diff --git a/CLAUDE.md b/CLAUDE.md
index 0e9ff16..d2dd7ce 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -134,6 +134,7 @@ Edge functions in `apps/supabase/functions/` handle complex operations:
 - `delete-relationship` - Deletes couple data (matches, messages, media) while keeping accounts
 - `delete-account` - Permanently deletes user account and all associated data (Apple App Store requirement)
 - `send-notification` - Push notifications for matches
+- `send-nudge-notification` - Partner nudge notifications (rate limited to once per 12 hours)
 - `revenuecat-webhook` - Subscription webhook handler
 - `sync-subscription` - Syncs RevenueCat subscription status
 - `redeem-code` - Redeems promotional codes for premium access (website only)
@@ -165,6 +166,7 @@ This approach:
 | `revenuecat-webhook` | false | Webhook signature validation |
 | `send-notification` | false | Internal trigger (no auth) |
 | `send-message-notification` | false | Internal trigger (no auth) |
+| `send-nudge-notification` | false | Manual via getUser() |
 
 ### Database Best Practices
 - **Always use `.maybeSingle()` instead of `.single()`** when the row might not exist. `.single()` throws an error if 0 or >1 rows are returned.
diff --git a/apps/admin/src/components/ai/AiGeneratorDialog.tsx b/apps/admin/src/components/ai/AiGeneratorDialog.tsx
index d36df69..bc5b069 100644
--- a/apps/admin/src/components/ai/AiGeneratorDialog.tsx
+++ b/apps/admin/src/components/ai/AiGeneratorDialog.tsx
@@ -114,7 +114,7 @@ export function AiGeneratorDialog({
                         context={context}
                         config={generation.config}
                         onCountChange={generation.setCount}
-                        onToneChange={generation.setTone}
+                        onExplicitChange={generation.setExplicit}
                         onCrudeLangChange={generation.setCrudeLang}
                         onInspirationChange={generation.setInspiration}
                     />
diff --git a/apps/admin/src/components/ai/GenerationForm.tsx b/apps/admin/src/components/ai/GenerationForm.tsx
index 20c0528..3243666 100644
--- a/apps/admin/src/components/ai/GenerationForm.tsx
+++ b/apps/admin/src/components/ai/GenerationForm.tsx
@@ -1,9 +1,7 @@
-import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
 import { Switch } from '@/components/ui/switch';
-import { TONE_LEVELS, type ToneLevel } from '@/lib/openai';
 import type { GeneratorType, GeneratorContext, GenerationConfig } from './hooks/useAiGeneration';
 
 // =============================================================================
@@ -15,7 +13,7 @@ interface GenerationFormProps {
     context?: GeneratorContext;
     config: GenerationConfig;
     onCountChange: (count: number) => void;
-    onToneChange: (tone: ToneLevel) => void;
+    onExplicitChange: (isExplicit: boolean) => void;
     onCrudeLangChange: (crudeLang: boolean) => void;
     onInspirationChange: (inspiration: string) => void;
 }
@@ -29,12 +27,10 @@ export function GenerationForm({
     context,
     config,
     onCountChange,
-    onToneChange,
+    onExplicitChange,
     onCrudeLangChange,
     onInspirationChange,
 }: GenerationFormProps) {
-    const isExplicit = config.tone >= 4;
-
     return (
         <div className="space-y-4">
             {/* Question Count (questions only) */}
@@ -53,42 +49,15 @@ export function GenerationForm({
                 </div>
             )}
 
-            {/* Intimacy Level Selector (questions only) */}
-            {type === 'questions' && (
-                <div className="space-y-2">
-                    <Label>Intimacy Level</Label>
-                    <div className="flex flex-wrap gap-2">
-                        {TONE_LEVELS.map((t) => (
-                            <Button
-                                key={t.level}
-                                type="button"
-                                variant={config.tone === t.level ? 'default' : 'outline'}
-                                size="sm"
-                                onClick={() => onToneChange(t.level as ToneLevel)}
-                                className={config.tone === t.level ? 'ring-2 ring-offset-1' : ''}
-                                title={t.description}
-                            >
-                                {t.level}. {t.label}
-                            </Button>
-                        ))}
-                    </div>
-                    <p className="text-xs text-muted-foreground">
-                        {TONE_LEVELS.find(t => t.level === config.tone)?.description}
-                    </p>
-                </div>
-            )}
-
-            {/* Wild/Explicit Toggle (for other generators) */}
-            {(type === 'category-ideas' || type === 'category-pack-ideas' || type === 'pack') && (
-                <div className="flex items-center space-x-2">
-                    <Switch
-                        id="explicit-mode"
-                        checked={isExplicit}
-                        onCheckedChange={(checked: boolean) => onToneChange(checked ? 5 : 3)}
-                    />
-                    <Label htmlFor="explicit-mode">Include Wild/Adult Ideas</Label>
-                </div>
-            )}
+            {/* Explicit Toggle */}
+            <div className="flex items-center space-x-2">
+                <Switch
+                    id="explicit-mode"
+                    checked={config.isExplicit}
+                    onCheckedChange={onExplicitChange}
+                />
+                <Label htmlFor="explicit-mode">Explicit Content</Label>
+            </div>
 
             {/* Crude Language Override Toggle */}
             <div className="flex items-center space-x-2">
diff --git a/apps/admin/src/components/ai/QuestionList.tsx b/apps/admin/src/components/ai/QuestionList.tsx
index 973959d..25a30bb 100644
--- a/apps/admin/src/components/ai/QuestionList.tsx
+++ b/apps/admin/src/components/ai/QuestionList.tsx
@@ -10,7 +10,6 @@ import {
     Bot,
 } from 'lucide-react';
 import {
-    INTENSITY_LEVELS,
     type GeneratedQuestion,
     type QuestionReview,
     type CouncilGenerationResult,
@@ -199,16 +198,6 @@ function QuestionItem({
                         )}
                     </div>
                     <div className="flex items-center gap-2 flex-wrap">
-                        {/* Intensity Badge */}
-                        <span
-                            className={`inline-block text-xs px-2 py-0.5 rounded text-white ${
-                                INTENSITY_LEVELS[question.intensity - 1]?.color || 'bg-muted'
-                            }`}
-                            title={INTENSITY_LEVELS[question.intensity - 1]?.description}
-                        >
-                            {question.intensity} - {INTENSITY_LEVELS[question.intensity - 1]?.label || 'Unknown'}
-                        </span>
-
                         {/* Source Generator Badge (cherry-pick mode) */}
                         {selectionMode === 'cherry_pick' && question.sourceGeneratorModel && (
                             <span className="inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400">
@@ -228,7 +217,7 @@ function QuestionItem({
                                             : 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
                                 }`}
                                 title={review.scores
-                                    ? `Scores: ${review.scores.guidelineCompliance}/${review.scores.creativity}/${review.scores.clarity}/${review.scores.intensityAccuracy}`
+                                    ? `Scores: ${review.scores.guidelineCompliance}/${review.scores.creativity}/${review.scores.clarity}`
                                     : ''
                                 }
                             >
diff --git a/apps/admin/src/components/ai/ReviewSummary.tsx b/apps/admin/src/components/ai/ReviewSummary.tsx
index a16280f..cef67fb 100644
--- a/apps/admin/src/components/ai/ReviewSummary.tsx
+++ b/apps/admin/src/components/ai/ReviewSummary.tsx
@@ -91,15 +91,6 @@ export function ReviewSummary({
                         </p>
                     )}
 
-                    {/* Intensity distribution for cherry-pick */}
-                    {selectionMode === 'cherry_pick' && cherryPickResult && Object.keys(cherryPickResult.intensityDistribution).length > 0 && (
-                        <p>
-                            Intensity distribution: {Object.entries(cherryPickResult.intensityDistribution)
-                                .sort(([a], [b]) => Number(a) - Number(b))
-                                .map(([level, count]) => `L${level}:${count}`)
-                                .join(', ')}
-                        </p>
-                    )}
                 </div>
             )}
         </div>
diff --git a/apps/admin/src/components/ai/hooks/useAiGeneration.ts b/apps/admin/src/components/ai/hooks/useAiGeneration.ts
index ba97914..b978f7c 100644
--- a/apps/admin/src/components/ai/hooks/useAiGeneration.ts
+++ b/apps/admin/src/components/ai/hooks/useAiGeneration.ts
@@ -10,7 +10,6 @@ import {
     type GeneratedQuestion,
     type GeneratedCategoryIdea,
     type GeneratedPackIdea,
-    type ToneLevel,
     type QuestionReview,
     type CouncilGenerationResult,
     type GenerationCandidate,
@@ -38,7 +37,7 @@ export interface GeneratorContext {
 
 export interface GenerationConfig {
     count: number;
-    tone: ToneLevel;
+    isExplicit: boolean;
     crudeLang: boolean;
     inspiration: string;
 }
@@ -77,7 +76,7 @@ export function useAiGeneration(
     // Config state
     const [config, setConfig] = useState<GenerationConfig>({
         count: 10,
-        tone: context?.isExplicit ? 5 : 2,
+        isExplicit: Boolean(context?.isExplicit),
         crudeLang: false,
         inspiration: '',
     });
@@ -118,14 +117,12 @@ export function useAiGeneration(
     // Council config
     const councilConfig = getCouncilConfig();
 
-    // Update tone when context changes
+    // Update explicit flag when context changes
     useEffect(() => {
-        if (type === 'questions') {
-            setConfig(prev => ({
-                ...prev,
-                tone: context?.isExplicit ? 5 : 2,
-            }));
-        }
+        setConfig(prev => ({
+            ...prev,
+            isExplicit: Boolean(context?.isExplicit),
+        }));
     }, [context?.isExplicit, type]);
 
     // Config setters
@@ -133,8 +130,8 @@ export function useAiGeneration(
         setConfig(prev => ({ ...prev, count }));
     }, []);
 
-    const setTone = useCallback((tone: ToneLevel) => {
-        setConfig(prev => ({ ...prev, tone }));
+    const setExplicit = useCallback((isExplicit: boolean) => {
+        setConfig(prev => ({ ...prev, isExplicit }));
     }, []);
 
     const setCrudeLang = useCallback((crudeLang: boolean) => {
@@ -219,7 +216,7 @@ export function useAiGeneration(
         setFilter('all');
         setSourceModel(null);
 
-        const isExplicit = config.tone >= 4;
+        const isExplicit = config.isExplicit;
 
         try {
             if (type === 'pack') {
@@ -253,7 +250,7 @@ export function useAiGeneration(
                     context.packName,
                     config.count,
                     undefined,
-                    config.tone,
+                    isExplicit ? 5 : 2,
                     context.packDescription || undefined,
                     context.existingQuestions,
                     config.crudeLang,
@@ -369,7 +366,7 @@ export function useAiGeneration(
         // Config
         config,
         setCount,
-        setTone,
+        setExplicit,
         setCrudeLang,
         setInspiration,
 
diff --git a/apps/admin/src/components/content/PackFormDialog.tsx b/apps/admin/src/components/content/PackFormDialog.tsx
index 3ffa055..3d82d07 100644
--- a/apps/admin/src/components/content/PackFormDialog.tsx
+++ b/apps/admin/src/components/content/PackFormDialog.tsx
@@ -203,11 +203,12 @@ export function PackFormDialog({
                         <Switch
                             checked={formData.is_public}
                             onCheckedChange={(checked) => {
-                                setField('is_public', checked);
-                                // Clear scheduled release if making public immediately
-                                if (checked) {
-                                    setField('scheduled_release_at', null);
-                                }
+                                const next = {
+                                    ...formData,
+                                    is_public: checked,
+                                    ...(checked ? { scheduled_release_at: null } : {}),
+                                };
+                                onFormChange(next);
                             }}
                         />
                     </div>
diff --git a/apps/admin/src/pages/content/DaresPage.tsx b/apps/admin/src/pages/content/DaresPage.tsx
index 76e25f8..a4b4416 100644
--- a/apps/admin/src/pages/content/DaresPage.tsx
+++ b/apps/admin/src/pages/content/DaresPage.tsx
@@ -37,7 +37,6 @@ import { Plus, Pencil, Trash2, Zap, Loader2, Clock } from 'lucide-react';
 import { Checkbox } from '@/components/ui/checkbox';
 import { toast } from 'sonner';
 import { IconPreview } from '@/components/ui/icon-picker';
-import { INTENSITY_LEVELS } from '@/lib/openai';
 
 // =============================================================================
 // Types
@@ -71,8 +70,7 @@ const DURATION_OPTIONS = [
     { value: '168', label: '1 week' },
 ];
 
-// Helper to get intensity info by level (1-indexed)
-const getIntensity = (level: number) => INTENSITY_LEVELS[level - 1] || INTENSITY_LEVELS[0];
+const getDefaultIntensity = (isExplicit?: boolean) => (isExplicit ? 4 : 2);
 
 // Format duration for display
 const formatDuration = (hours: number | null): string => {
@@ -107,7 +105,7 @@ export function DaresPage() {
         suggested_duration_hours: string;
     }>({
         text: '',
-        intensity: 1,
+        intensity: getDefaultIntensity(),
         suggested_duration_hours: '',
     });
 
@@ -169,7 +167,7 @@ export function DaresPage() {
 
     const openCreateDialog = () => {
         setEditingDare(null);
-        setFormData({ text: '', intensity: 1, suggested_duration_hours: '' });
+        setFormData({ text: '', intensity: getDefaultIntensity(pack?.is_explicit), suggested_duration_hours: '' });
         setDialogOpen(true);
     };
 
@@ -343,25 +341,6 @@ export function DaresPage() {
                                 />
                             </div>
 
-                            <div className="space-y-2">
-                                <Label>Intensity Level</Label>
-                                <div className="flex gap-2 flex-wrap">
-                                    {INTENSITY_LEVELS.map((intensity) => (
-                                        <Button
-                                            key={intensity.level}
-                                            type="button"
-                                            variant={formData.intensity === intensity.level ? 'default' : 'outline'}
-                                            size="sm"
-                                            onClick={() => setFormData(d => ({ ...d, intensity: intensity.level }))}
-                                            className={formData.intensity === intensity.level ? intensity.color : ''}
-                                            title={intensity.description}
-                                        >
-                                            {intensity.level} - {intensity.label}
-                                        </Button>
-                                    ))}
-                                </div>
-                            </div>
-
                             <div className="space-y-2">
                                 <Label>Suggested Duration</Label>
                                 <Select
@@ -467,7 +446,6 @@ export function DaresPage() {
                                 </TableHead>
                                 <TableHead className="w-12">#</TableHead>
                                 <TableHead>Dare</TableHead>
-                                <TableHead className="w-24">Intensity</TableHead>
                                 <TableHead className="w-24">Duration</TableHead>
                                 <TableHead className="w-24">Actions</TableHead>
                             </TableRow>
@@ -491,14 +469,6 @@ export function DaresPage() {
                                     <TableCell>
                                         <span className="line-clamp-2">{dare.text}</span>
                                     </TableCell>
-                                    <TableCell>
-                                        <Badge
-                                            className={`${getIntensity(dare.intensity).color} text-white`}
-                                            title={getIntensity(dare.intensity).description}
-                                        >
-                                            {getIntensity(dare.intensity).label}
-                                        </Badge>
-                                    </TableCell>
                                     <TableCell>
                                         {dare.suggested_duration_hours ? (
                                             <Badge variant="outline" className="text-xs">
diff --git a/apps/admin/src/pages/content/QuestionsPage.tsx b/apps/admin/src/pages/content/QuestionsPage.tsx
index 2336b02..0b3aaf8 100644
--- a/apps/admin/src/pages/content/QuestionsPage.tsx
+++ b/apps/admin/src/pages/content/QuestionsPage.tsx
@@ -73,12 +73,8 @@ interface Question {
     config?: QuestionConfig | null;
 }
 
-import { INTENSITY_LEVELS } from '@/lib/openai';
-
-// Helper to get intensity info by level (1-indexed)
-const getIntensity = (level: number) => INTENSITY_LEVELS[level - 1] || INTENSITY_LEVELS[0];
-
 const DEFAULT_AUDIO_DURATION = 60;
+const getDefaultIntensity = (isExplicit?: boolean) => (isExplicit ? 4 : 2);
 
 const QUESTION_TYPE_OPTIONS: Array<{ value: QuestionType; label: string }> = [
     { value: 'swipe', label: 'Swipe' },
@@ -138,7 +134,7 @@ export function QuestionsPage() {
     }>({
         text: '',
         partner_text: '',
-        intensity: 1,
+        intensity: getDefaultIntensity(),
         allowed_couple_genders: [],
         target_user_genders: [],
         required_props: '',
@@ -276,7 +272,7 @@ export function QuestionsPage() {
         setFormData({
             text: '',
             partner_text: '',
-            intensity: 1,
+            intensity: getDefaultIntensity(pack?.is_explicit),
             allowed_couple_genders: [],
             target_user_genders: [],
             required_props: '',
@@ -388,6 +384,7 @@ export function QuestionsPage() {
 
     const handleAiGenerated = (generatedQuestions: Array<{ text: string; partner_text?: string; intensity: number; inverse_pair_id?: string | null }>) => {
         const generatedQuestionType: QuestionType = 'swipe';
+        const defaultIntensity = getDefaultIntensity(pack?.is_explicit);
 
         // Bulk insert AI-generated questions with inverse_of linking
         const insertQuestions = async () => {
@@ -414,7 +411,7 @@ export function QuestionsPage() {
                             pack_id: packId,
                             text: q.text,
                             partner_text: q.partner_text || null,
-                            intensity: q.intensity,
+                            intensity: defaultIntensity,
                             inverse_of: null,
                             question_type: generatedQuestionType,
                             config: null,
@@ -434,7 +431,7 @@ export function QuestionsPage() {
                                 pack_id: packId,
                                 text: primary.text,
                                 partner_text: primary.partner_text || null,
-                                intensity: primary.intensity,
+                                intensity: defaultIntensity,
                                 inverse_of: null,
                                 question_type: generatedQuestionType,
                                 config: null,
@@ -452,7 +449,7 @@ export function QuestionsPage() {
                                     pack_id: packId,
                                     text: inverse.text,
                                     partner_text: inverse.partner_text || null,
-                                    intensity: inverse.intensity,
+                                    intensity: defaultIntensity,
                                     inverse_of: primaryId,
                                     question_type: generatedQuestionType,
                                     config: null,
@@ -470,7 +467,7 @@ export function QuestionsPage() {
                                     pack_id: packId,
                                     text: extra.text,
                                     partner_text: extra.partner_text || null,
-                                    intensity: extra.intensity,
+                                    intensity: defaultIntensity,
                                     inverse_of: null,
                                     question_type: generatedQuestionType,
                                     config: null,
@@ -486,7 +483,7 @@ export function QuestionsPage() {
                             pack_id: packId,
                             text: pair[0].text,
                             partner_text: pair[0].partner_text || null,
-                            intensity: pair[0].intensity,
+                            intensity: defaultIntensity,
                             inverse_of: null,
                             question_type: generatedQuestionType,
                             config: null,
@@ -732,25 +729,6 @@ export function QuestionsPage() {
                                     </p>
                                 </div>
 
-                                <div className="space-y-2">
-                                    <Label>Intensity Level</Label>
-                                    <div className="flex gap-2">
-                                        {INTENSITY_LEVELS.map((intensity) => (
-                                            <Button
-                                                key={intensity.level}
-                                                type="button"
-                                                variant={formData.intensity === intensity.level ? 'default' : 'outline'}
-                                                size="sm"
-                                                onClick={() => setFormData(d => ({ ...d, intensity: intensity.level }))}
-                                                className={formData.intensity === intensity.level ? intensity.color : ''}
-                                                title={intensity.description}
-                                            >
-                                                {intensity.level} - {intensity.label}
-                                            </Button>
-                                        ))}
-                                    </div>
-                                </div>
-
                                 <div className="space-y-2">
                                     <Label htmlFor="required_props">Required Props (optional)</Label>
                                     <Input
@@ -1026,7 +1004,6 @@ export function QuestionsPage() {
                                     <TableHead className="w-32">Partner Text</TableHead>
                                     <TableHead className="w-24">Couples</TableHead>
                                     <TableHead className="w-24">Initiator</TableHead>
-                                    <TableHead className="w-24">Intensity</TableHead>
                                     <TableHead className="w-24">Actions</TableHead>
                                 </TableRow>
                             </TableHeader>
@@ -1124,14 +1101,6 @@ export function QuestionsPage() {
                                                 <span className="text-muted-foreground text-xs">Any</span>
                                             )}
                                         </TableCell>
-                                        <TableCell>
-                                            <Badge
-                                                className={`${getIntensity(question.intensity).color} text-white`}
-                                                title={getIntensity(question.intensity).description}
-                                            >
-                                                {getIntensity(question.intensity).label}
-                                            </Badge>
-                                        </TableCell>
                                         <TableCell>
                                             <div className="flex gap-1">
                                                 <Button
diff --git a/apps/mobile/.eslintrc.js b/apps/mobile/.eslintrc.js
new file mode 100644
index 0000000..7296f7c
--- /dev/null
+++ b/apps/mobile/.eslintrc.js
@@ -0,0 +1,5 @@
+// https://docs.expo.dev/guides/using-eslint/
+module.exports = {
+  extends: 'expo',
+  ignorePatterns: ['/dist/*'],
+};
diff --git a/apps/mobile/DESIGN.md b/apps/mobile/DESIGN.md
index e4ec17e..365d197 100644
--- a/apps/mobile/DESIGN.md
+++ b/apps/mobile/DESIGN.md
@@ -1,24 +1,24 @@
-# Sauci Design System
-
-A boutique, premium design framework for the Sauci couples intimacy app.
+# Sauci Design System
+
+A boutique, premium design framework for the Sauci couples intimacy app.
 
 ## Brand Identity
 
-**Aesthetic:** Boutique lingerie store meets modern dating app. Think Ann Summers sophistication - sensual but tasteful, premium but accessible, intimate but playful.
+**Aesthetic:** Boutique lingerie store meets modern dating app. Think Ann Summers sophistication - sensual but tasteful, premium but accessible, intimate but playful.
 
-**Mood:** Romantic, luxurious, warm, inviting, confident
+**Mood:** Romantic, luxurious, warm, inviting, confident
 
-**Key Principles:**
-
-- Glass-morphism for depth and elegance
-- Dark backgrounds with warm accents
-- Primary gradient (rose → purple) as the core brand signature
-- Gold reserved for premium/dares features only
-- Gradients for visual interest and brand recognition
+**Key Principles:**
+
+- Dark, velvety backgrounds with subtle gradient atmosphere
+- Solid, high-contrast surfaces (no glass or blur effects)
+- Primary gradient (rose → purple) as the core brand signature
+- Gold reserved for premium/dares features only
+- Soft glows and shadows for depth, not transparency
 
 ---
 
-## Color Hierarchy
+## Color Hierarchy
 
 ### 1. Brand Colors (Primary Palette)
 
@@ -26,14 +26,14 @@ The core brand identity. Used for primary actions, key UI elements, and brand re
 
 | Name | Hex | RGB | Usage |
 |------|-----|-----|-------|
-| **Primary** | `#e94560` | 233, 69, 96 | Primary buttons, active states, key accents |
-| **Primary Dark** | `#c73a52` | 199, 58, 82 | Pressed states, darker variants |
-| **Secondary** | `#9b59b6` | 155, 89, 182 | Secondary accents, gradient endpoints |
-| **Secondary Dark** | `#8e44ad` | 142, 68, 173 | Pressed states, darker variants |
-
-**Primary Gradient:** `#e94560 → #9b59b6` (Rose to Purple)
-- Direction: Left to right (horizontal) or top to bottom (vertical)
-- Use for: Primary buttons, match celebrations, brand moments
+| **Primary** | `#e1306c` | 225, 48, 108 | Primary buttons, active states, key accents |
+| **Primary Dark** | `#c12055` | 193, 32, 85 | Pressed states, darker variants |
+| **Secondary** | `#9b59b6` | 155, 89, 182 | Secondary accents, gradient endpoints |
+| **Secondary Dark** | `#8e44ad` | 142, 68, 173 | Pressed states, darker variants |
+
+**Primary Gradient:** `#e1306c → #9b59b6` (Rose to Purple)
+- Direction: Left to right (horizontal) or top to bottom (vertical)
+- Use for: Primary buttons, match celebrations, brand moments
 
 ### 2. Premium/Luxury Colors
 
@@ -53,11 +53,11 @@ Each core feature has a designated accent color for consistency and recognition.
 
 | Feature | Primary Color | Hex | Gradient |
 |---------|---------------|-----|----------|
-| **Swipe/Match** | Primary | `#e94560` | Primary gradient (rose → purple) |
-| **Quiz** | Rose | `#E8A4AE` | `#E8A4AE → #D4919B` |
-| **Dares** | Gold | `#D4AF37` | `#D4AF37 → #B8860B` |
-| **Chat** | Primary | `#e94560` | Primary gradient |
-| **Profile** | Secondary | `#9b59b6` | Secondary gradient |
+| **Swipe/Match** | Primary | `#e1306c` | Primary gradient (rose → purple) |
+| **Quiz** | Rose | `#E8A4AE` | `#E8A4AE → #D4919B` |
+| **Dares** | Gold | `#D4AF37` | `#D4AF37 → #B8860B` |
+| **Chat** | Primary | `#e1306c` | Primary gradient |
+| **Profile** | Secondary | `#9b59b6` | Secondary gradient |
 
 **Usage Rules:**
 - Feature icons use their designated color
@@ -71,22 +71,31 @@ Dark, rich backgrounds that make content pop.
 
 | Name | Hex | RGBA | Usage |
 |------|-----|------|-------|
-| **Background** | `#0d0d1a` | 13, 13, 26 | Primary app background |
-| **Background Light** | `#1a1a2e` | 26, 26, 46 | Cards, elevated surfaces |
-| **Surface** | — | `rgba(22, 33, 62, 0.6)` | Glass overlays |
-| **Surface Solid** | `#16213e` | 22, 33, 62 | Non-transparent surfaces |
-
-### 5. Glass/Surface Colors
-
-For the glass-morphism effect that defines the UI.
-
-| Name | RGBA | Usage |
-|------|------|-------|
-| **Glass Background** | `rgba(22, 33, 62, 0.4)` | Standard glass cards |
-| **Glass Background Heavy** | `rgba(22, 33, 62, 0.6)` | Emphasized glass cards |
-| **Glass Border** | `rgba(255, 255, 255, 0.08)` | Subtle borders |
-| **Glass Border Light** | `rgba(255, 255, 255, 0.12)` | Prominent borders |
-| **Glass Highlight** | `rgba(255, 255, 255, 0.05)` | Top edge shine |
+| **Background** | `#0e0e11` | 14, 14, 17 | Primary app background |
+| **Background Light** | `#17171c` | 23, 23, 28 | Cards, elevated surfaces |
+| **Surface** | `#17171c` | 23, 23, 28 | Primary surface color |
+| **Surface Solid** | `#17171c` | 23, 23, 28 | Opaque surfaces |
+| **Border** | `#303036` | 48, 48, 54 | Dividers, outlines, input borders |
+
+### 5. Tile/Category Colors (Home Screen)
+
+Discovery/Home tiles use vibrant, solid colors for quick recognition.
+
+| Token | Hex |
+|-------|-----|
+| **teal** | `#14B8A6` |
+| **purple** | `#8B5CF6` |
+| **orange** | `#F97316` |
+| **coral** | `#F87171` |
+| **emerald** | `#10B981` |
+| **indigo** | `#6366F1` |
+| **rose** | `#EC4899` |
+| **amber** | `#F59E0B` |
+
+**Usage Rules:**
+- Tiles are solid fills with a subtle dark overlay for depth
+- Category colors are consistent across the app
+- Avoid gradients on tiles unless it is a premium moment
 
 ### 6. Text Colors
 
@@ -122,14 +131,14 @@ Consistent across all swipe interactions:
 
 ---
 
-## Gradients
+## Gradients
 
 ### Brand Gradients
 
 ```
-Primary:         #e94560 → #9b59b6  (Rose to Purple)
-Primary Subtle:  rgba(233, 69, 96, 0.8) → rgba(155, 89, 182, 0.8)
-Primary Reverse: #9b59b6 → #e94560  (Purple to Rose)
+Primary:         #e1306c → #9b59b6  (Rose to Purple)
+Primary Subtle:  rgba(225, 48, 108, 0.8) → rgba(155, 89, 182, 0.8)
+Primary Reverse: #9b59b6 → #e1306c  (Purple to Rose)
 ```
 
 ### Premium Gradients
@@ -142,8 +151,8 @@ Premium Rose:  #E8A4AE → #D4919B
 ### Background Gradients
 
 ```
-Background:         #1a1a2e → #0d0d1a  (Light to Dark)
-Background Reverse: #0d0d1a → #1a1a2e  (Dark to Light)
+Background:         #0e0e11 → #1f1417 → #0e0e11
+Background Reverse: #0e0e11 → #1f1417 → #0e0e11
 ```
 
 ### Boutique Card Gradients
@@ -163,44 +172,44 @@ Boutique Amethyst: rgba(142, 68, 173, 0.4) → rgba(44, 62, 80, 0.4)
 
 ## Component Patterns
 
-### Buttons
+### Buttons
 
 | Variant | Background | Text | Border |
 |---------|------------|------|--------|
-| **Primary** | Primary gradient | White | None |
-| **Secondary** | Glass background | White | Glass border |
-| **Ghost** | Transparent | Primary | None |
-| **Danger** | Error gradient | White | None |
-| **Feature** | Feature color gradient | White | None |
+| **Primary** | Primary gradient | White | None |
+| **Secondary** | Surface | White | Border |
+| **Ghost** | Transparent | Primary | None |
+| **Danger** | Error gradient | White | None |
+| **Feature** | Feature color gradient | White | None |
 
-### Cards
+### Cards
 
 | Variant | Background | Border | Use Case |
 |---------|------------|--------|----------|
-| **Glass** | Glass background | Glass border | Standard content |
-| **Glass Elevated** | Glass background heavy | Glass border light | Emphasized content |
-| **Solid** | Background light | Glass border | Non-blur contexts |
+| **Solid** | Surface | Border | Standard content |
+| **Raised** | Surface | Border | Emphasized content + shadow |
+| **Tinted** | Category color | None | Home tiles, feature promos |
 
-### Inputs
+### Inputs
 
 | State | Border Color | Background |
 |-------|--------------|------------|
-| **Default** | Glass border | Glass background |
-| **Focused** | Primary | Glass background |
-| **Error** | Error | Glass background |
-| **Disabled** | Glass border | Glass background (opacity 0.5) |
+| **Default** | Border | Surface |
+| **Focused** | Primary | Surface |
+| **Error** | Error | Surface |
+| **Disabled** | Border | Surface (opacity 0.6) |
 
 ---
 
-## Tab Bar
+## Tab Bar
 
 | Element | Color |
 |---------|-------|
-| **Background** | `rgba(13, 13, 26, 0.92)` with blur |
-| **Top Border** | `rgba(233, 69, 96, 0.2)` (primary tint) |
-| **Active Icon** | Primary `#e94560` |
-| **Inactive Icon** | Text secondary |
-| **Badge** | Rose `#E8A4AE` |
+| **Background** | `#0e0e11` |
+| **Top Border** | `rgba(225, 48, 108, 0.2)` (primary tint) |
+| **Active Icon** | Primary `#e1306c` |
+| **Inactive Icon** | Text secondary |
+| **Badge** | Rose `#E8A4AE` |
 
 ## Play Button (Center Tab)
 
@@ -208,10 +217,10 @@ The main "play" button uses the primary brand gradient for maximum brand presenc
 
 | Element | Color |
 |---------|-------|
-| **Glow** | Primary glow `rgba(233, 69, 96, 0.3)` |
-| **Border** | `rgba(233, 69, 96, 0.4)` |
-| **Highlight** | Primary → Secondary gradient |
-| **Icon** | Primary `#e94560` |
+| **Glow** | Primary glow `rgba(225, 48, 108, 0.3)` |
+| **Border** | `rgba(225, 48, 108, 0.4)` |
+| **Highlight** | Primary → Secondary gradient |
+| **Icon** | Primary `#e1306c` |
 
 ## Radial Menu
 
@@ -219,9 +228,9 @@ Feature-specific colors for quick action items:
 
 | Item | Variant | Color |
 |------|---------|-------|
-| **Match** | Primary | `#e94560` (core feature) |
-| **Dares** | Gold | `#D4AF37` (premium/adventure) |
-| **Quiz** | Rose | `#E8A4AE` (intimacy) |
+| **Match** | Primary | `#e1306c` (core feature) |
+| **Dares** | Gold | `#D4AF37` (premium/adventure) |
+| **Quiz** | Rose | `#E8A4AE` (intimacy) |
 
 ---
 
@@ -278,17 +287,17 @@ Feature-specific colors for quick action items:
 
 | Style | Size | Weight | Line Height | Usage |
 |-------|------|--------|-------------|-------|
-| `largeTitle` | 34px | Bold | 41px | Screen titles |
-| `title1` | 28px | Bold | 34px | Section headers |
-| `title2` | 22px | Bold | 28px | Card titles |
-| `title3` | 20px | SemiBold | 25px | Subsection headers |
-| `headline` | 17px | SemiBold | 22px | Emphasized body |
-| `body` | 17px | Regular | 22px | Body text |
-| `callout` | 16px | Regular | 21px | Secondary body |
-| `subhead` | 15px | Regular | 20px | Supporting text |
-| `footnote` | 13px | Regular | 18px | Captions |
-| `caption1` | 12px | Regular | 16px | Small labels |
-| `caption2` | 11px | Regular | 13px | Tiny text |
+| `largeTitle` | 32px | Bold | 40px | Screen titles |
+| `title1` | 28px | Bold | 34px | Section headers |
+| `title2` | 24px | Bold | 30px | Card titles |
+| `title3` | 20px | SemiBold | 26px | Subsection headers |
+| `headline` | 17px | SemiBold | 22px | Emphasized body |
+| `body` | 16px | Regular | 22px | Body text |
+| `callout` | 15px | Regular | 20px | Secondary body |
+| `subhead` | 14px | Regular | 20px | Supporting text |
+| `footnote` | 13px | Regular | 18px | Captions |
+| `caption1` | 12px | Regular | 16px | Small labels |
+| `caption2` | 11px | Regular | 14px | Tiny text |
 
 ---
 
@@ -305,35 +314,35 @@ Feature-specific colors for quick action items:
 
 ---
 
-## Platform Considerations
-
-### iOS
-- Use BlurView for glass effects
-- Haptic feedback on interactions
-- Native-feeling animations
-
-### Android
-- Fallback to solid semi-transparent backgrounds
-- Reduced blur intensity for performance
-- Adjusted shadow rendering
+## Platform Considerations
+
+### iOS
+- Favor solid surfaces and shadows for depth
+- Haptic feedback on interactions
+- Native-feeling animations
+
+### Android
+- Match iOS surface colors and shadows
+- Avoid blur and heavy transparency for performance
+- Adjust shadow rendering as needed
 
 ---
 
 ## Do's and Don'ts
 
-### Do
-- Use the primary gradient for main CTAs
-- Apply feature colors consistently within a feature
-- Use glass effects for depth and hierarchy
-- Keep text high-contrast (white on dark)
-- Use gold/rose for premium moments
+### Do
+- Use the primary gradient for main CTAs
+- Apply feature colors consistently within a feature
+- Use solid surfaces with soft shadows for depth
+- Keep text high-contrast (white on dark)
+- Use gold/rose for premium moments
 
-### Don't
-- Mix feature colors within a single screen
-- Use more than 2-3 accent colors per screen
-- Apply the primary gradient to everything
-- Use pure black (#000000) for backgrounds
-- Forget to include the glow effect on premium elements
+### Don't
+- Mix feature colors within a single screen
+- Use more than 2-3 accent colors per screen
+- Apply the primary gradient to everything
+- Use glass, blur, or frosted effects
+- Use pure black (#000000) for backgrounds
 
 ---
 
diff --git a/apps/mobile/agents.md b/apps/mobile/agents.md
index 8cb24dd..a701eea 100644
--- a/apps/mobile/agents.md
+++ b/apps/mobile/agents.md
@@ -4,44 +4,35 @@
 
 ## Architecture
 
-This is an Expo React Native app using:
-- **Routing**: expo-router with file-based routing in `app/` directory
-- **State**: Zustand stores in `src/store/index.ts`
-- **Backend**: Supabase client in `src/lib/supabase.ts`
-- **UI**: Glass-morphism themed components in `src/components/ui/`
-- **Theme**: Centralized theme in `src/theme/index.ts`
+This is an Expo React Native app using:
+- **Routing**: expo-router with file-based routing in `app/` directory
+- **State**: Zustand stores in `src/store/index.ts`
+- **Backend**: Supabase client in `src/lib/supabase.ts`
+
+Design guidance lives in `apps/mobile/DESIGN.md`.
 
 ## Directory Structure
 
 ```
-app/                    # Expo Router routes
-  (auth)/               # Authentication screens
-  (app)/                # Protected app screens (tabs)
-src/
-  components/           # Reusable components
-    ui/                 # Base UI components (GlassCard, GlassButton, etc.)
-  lib/                  # Utilities (supabase, analytics, revenuecat)
-  store/                # Zustand stores (index.ts)
-  theme/                # Theme constants (colors, gradients, spacing, etc.)
-  types/                # TypeScript types
-```
-
-## Critical Rules
-
-### Tab Bar - NEVER CHANGE
-
-**NEVER set `backgroundColor: 'transparent'` on the tab bar.**
-
-Always use:
-```typescript
-backgroundColor: 'rgba(18, 18, 18, 0.85)',
-```
-
-The BlurView in `tabBarBackground` is unreliable. The solid rgba background acts as a fallback.
-
-Location: `app/(app)/_layout.tsx` - `tabBarStyle`
-
-### State Management
+app/                    # Expo Router routes
+  (auth)/               # Authentication screens
+  (app)/                # Protected app screens (tabs)
+src/
+  components/           # Reusable components
+    ui/
+  lib/                  # Utilities (supabase, analytics, revenuecat)
+  store/                # Zustand stores (index.ts)
+  theme/
+  types/                # TypeScript types
+```
+
+## Critical Rules
+
+### File Size
+
+- Keep files small: aim for 200-300 lines max per file.
+
+### State Management
 
 - Use existing Zustand stores: `useAuthStore`, `useMatchStore`, `usePacksStore`, `useMessageStore`, `useSubscriptionStore`
 - Access cross-store state via `getState()` (e.g., `useAuthStore.getState().user`)
@@ -53,24 +44,6 @@ Location: `app/(app)/_layout.tsx` - `tabBarStyle`
 - `.single()` throws an error if 0 or >1 rows are returned
 - Check for null before performing operations
 
-### UI Components
-
-Use existing UI primitives from `src/components/ui/`:
-- `GlassCard` - Glass-morphism card container
-- `GlassButton` - Glass-styled button
-- `GlassInput` - Glass-styled input field
-- `GradientBackground` - Screen background gradient
-- `ShimmerEffect` - Loading shimmer animation
-
-### Theme Usage
-
-Import from `src/theme/index.ts`:
-```typescript
-import { colors, gradients, spacing, radius, typography, shadows } from '@/theme';
-```
-
-**DO NOT hardcode colors**. Always use theme values.
-
 ### Response Handling
 
 - Responses use UPSERT with `onConflict: "user_id,question_id"`
@@ -92,11 +65,9 @@ import { colors, gradients, spacing, radius, typography, shadows } from '@/theme
 - Use `Events` from `src/lib/analytics` for tracking
 - Track: `packEnabled`, `packDisabled`, `signOut`, etc.
 
-## Forbidden Actions
-
-1. **DO NOT** change tab bar background to transparent
-2. **DO NOT** use `.single()` for queries that might return 0 rows
-3. **DO NOT** hardcode colors - use theme values
-4. **DO NOT** create new stores without integrating with auth sign-out cleanup
-5. **DO NOT** bypass RevenueCat availability checks
-6. **DO NOT** add navigation logic outside of expo-router
+## Forbidden Actions
+
+1. **DO NOT** use `.single()` for queries that might return 0 rows
+2. **DO NOT** create new stores without integrating with auth sign-out cleanup
+3. **DO NOT** bypass RevenueCat availability checks
+4. **DO NOT** add navigation logic outside of expo-router
diff --git a/apps/mobile/app/(app)/_layout.tsx b/apps/mobile/app/(app)/_layout.tsx
index 67b8707..03174ec 100755
--- a/apps/mobile/app/(app)/_layout.tsx
+++ b/apps/mobile/app/(app)/_layout.tsx
@@ -1,19 +1,18 @@
 import { Tabs, useRouter, useSegments } from "expo-router";
 import { Ionicons } from "@expo/vector-icons";
-import { View, ActivityIndicator, StyleSheet, Platform, Text, Pressable, Animated, AppState, AppStateStatus } from "react-native";
+import { View, ActivityIndicator, StyleSheet, Platform, Text, Pressable, Animated, AppState } from "react-native";
 import { BlurView } from "expo-blur";
-import { LinearGradient } from "expo-linear-gradient";
 import { useEffect, useState, useCallback, useRef } from "react";
 import { useAuthStore, useMatchStore, useMessageStore, useSubscriptionStore, usePacksStore, useStreakStore } from "../../src/store";
-import { colors, gradients, blur, radius, spacing, typography, shadows } from "../../src/theme";
+import { colors, radius, spacing, typography, shadows } from "../../src/theme";
 import { supabase } from "../../src/lib/supabase";
 import { isBiometricEnabled } from "../../src/lib/biometricAuth";
 import { checkAndRegisterPushToken } from "../../src/lib/notifications";
 import { syncBadgeCount } from "../../src/lib/badge";
 import { BiometricLockScreen } from "../../src/components/BiometricLockScreen";
-import { MatchNotificationModal, MatchNotificationData } from "../../src/components/MatchNotificationModal";
 import { Events } from "../../src/lib/analytics";
-import type { MatchWithQuestion, AnswerType } from "../../src/types";
+import { needsOnboarding } from "../../src/constants/onboarding";
+import type { MatchWithQuestion } from "../../src/types";
 import type { Database } from "../../src/types/supabase";
 
 type Message = Database["public"]["Tables"]["messages"]["Row"];
@@ -54,157 +53,21 @@ function TabBarBackground() {
     return null;
 }
 
-interface PlayTabButtonProps {
-    children?: React.ReactNode;
-    onPress?: (e: any) => void;
-    accessibilityState?: { selected?: boolean };
-    isMenuOpen?: boolean;
-    onToggleMenu?: () => void;
-}
-
-interface RadialMenuItem {
-    id: string;
-    icon: keyof typeof Ionicons.glyphMap;
-    label: string;
-    angle: number; // degrees from top (0 = top, -45 = left, 45 = right)
-    variant: 'primary' | 'gold' | 'rose' | 'muted';
-}
-
-// Brand color palette for navigation
-const NAV_COLORS = {
-    // Primary brand colors (from logo)
-    primary: colors.primary,
-    primaryRgba: 'rgba(233, 69, 96, ',
-    secondary: colors.secondary,
-    secondaryRgba: 'rgba(155, 89, 182, ',
-    // Feature-specific colors
-    gold: colors.premium.gold,
-    goldRgba: 'rgba(212, 175, 55, ',
-    rose: colors.premium.rose,
-    roseRgba: 'rgba(232, 164, 174, ',
-    dark: '#0d0d1a',
-};
-
-const RADIAL_MENU_ITEMS: RadialMenuItem[] = [
-    { id: 'dares', icon: 'flash', label: 'Dares', angle: -50, variant: 'gold' },
-    { id: 'match', icon: 'flame', label: 'Match', angle: 0, variant: 'primary' },
-    { id: 'quiz', icon: 'help-circle', label: 'Quiz', angle: 50, variant: 'rose' },
-];
-
-const RADIAL_DISTANCE = 100; // Distance from center button
-
-// Store for sharing state between PlayTabButton and AppLayout
-let globalMenuToggle: (() => void) | null = null;
-let globalMenuOpen = false;
-
-function PlayTabButton({ accessibilityState }: PlayTabButtonProps) {
-    const isSelected = accessibilityState?.selected;
-    const [, forceUpdate] = useState({});
-
-    // Subscribe to global state changes
-    useEffect(() => {
-        const interval = setInterval(() => {
-            forceUpdate({});
-        }, 50);
-        return () => clearInterval(interval);
-    }, []);
-
-    return (
-        <View style={styles.playButtonContainer}>
-            {/* Outer glow effect - primary brand */}
-            <View style={[styles.playButtonGlow, isSelected && styles.playButtonGlowActive]} />
-
-            {/* Main circle button - premium dark with primary gradient border */}
-            <Pressable onPress={() => globalMenuToggle?.()}>
-                <Animated.View style={styles.playButtonCircle}>
-                    <View style={styles.playButtonInner}>
-                        {/* Silk highlight at top - primary gradient */}
-                        <LinearGradient
-                            colors={[`${NAV_COLORS.primaryRgba}0.2)`, `${NAV_COLORS.secondaryRgba}0.1)`, 'transparent']}
-                            style={styles.playButtonHighlight}
-                            start={{ x: 0, y: 0 }}
-                            end={{ x: 1, y: 1 }}
-                        />
-                        <Ionicons
-                            name={globalMenuOpen ? "close" : "flame"}
-                            size={28}
-                            color={globalMenuOpen ? colors.textSecondary : NAV_COLORS.primary}
-                        />
-                    </View>
-                </Animated.View>
-            </Pressable>
-        </View>
-    );
-}
-
 export default function AppLayout() {
     const router = useRouter();
     const segments = useSegments();
     const { isAuthenticated, isLoading, user, signOut, updateLastActive } = useAuthStore();
-    const { matches, newMatchesCount, addMatch, updateMatchUnreadCount } = useMatchStore();
+    const { matches, newMatchesCount, addMatch, updateMatchUnreadCount, pendingQuestions, fetchPendingQuestions } = useMatchStore();
     const { unreadCount, lastMessage, fetchUnreadCount, addMessage, clearLastMessage } = useMessageStore();
     const { fetchEnabledPacks } = usePacksStore();
     const { initializeRevenueCat } = useSubscriptionStore();
     const { fetchStreak } = useStreakStore();
-    const [matchNotification, setMatchNotification] = useState<MatchNotificationData | null>(null);
     const messageToastAnim = useRef(new Animated.Value(-100)).current;
     const messageTimeoutRef = useRef<NodeJS.Timeout | null>(null);
     const [isLocked, setIsLocked] = useState(false);
     const hasCheckedInitialBiometric = useRef(false);
     const wentToBackgroundAt = useRef<number | null>(null);
 
-    // Radial menu state
-    const [isRadialMenuOpen, setIsRadialMenuOpen] = useState(false);
-    const radialMenuAnim = useRef(new Animated.Value(0)).current;
-
-    const toggleRadialMenu = useCallback(() => {
-        const toValue = isRadialMenuOpen ? 0 : 1;
-        setIsRadialMenuOpen(!isRadialMenuOpen);
-        globalMenuOpen = !isRadialMenuOpen;
-
-        Animated.spring(radialMenuAnim, {
-            toValue,
-            useNativeDriver: true,
-            tension: 100,
-            friction: 8,
-        }).start();
-    }, [isRadialMenuOpen, radialMenuAnim]);
-
-    const closeRadialMenu = useCallback(() => {
-        setIsRadialMenuOpen(false);
-        globalMenuOpen = false;
-        Animated.timing(radialMenuAnim, {
-            toValue: 0,
-            duration: 150,
-            useNativeDriver: true,
-        }).start();
-    }, [radialMenuAnim]);
-
-    const handleRadialMenuItemPress = useCallback((itemId: string) => {
-        closeRadialMenu();
-
-        // Navigate based on item
-        switch (itemId) {
-            case 'match':
-                router.push('/(app)/swipe');
-                break;
-            case 'dares':
-                router.push('/(app)/dares');
-                break;
-            case 'quiz':
-                router.push('/(app)/quiz');
-                break;
-        }
-    }, [router, closeRadialMenu]);
-
-    // Register global menu toggle for PlayTabButton
-    useEffect(() => {
-        globalMenuToggle = toggleRadialMenu;
-        return () => {
-            globalMenuToggle = null;
-        };
-    }, [toggleRadialMenu]);
-
     // Check if we're on screens that should hide the tab bar
     const segmentStrings = segments as string[];
     const isOnOnboarding = segmentStrings.includes("onboarding");
@@ -213,11 +76,11 @@ export default function AppLayout() {
     const isOnSettingsSubscreen = segmentStrings.includes("settings") && segmentStrings.length > 2;
     const shouldHideTabBar = isOnOnboarding || isOnPairing || isOnChat || isOnSettingsSubscreen;
 
-    // Redirect to login when not authenticated, or to onboarding if not completed
+    // Redirect to login when not authenticated, or to onboarding if not completed/outdated
     useEffect(() => {
         if (!isLoading && !isAuthenticated) {
             router.replace("/(auth)/login");
-        } else if (!isLoading && isAuthenticated && user && !user.onboarding_completed && !isOnOnboarding) {
+        } else if (!isLoading && isAuthenticated && user && needsOnboarding(user.onboarding_completed, user.onboarding_version) && !isOnOnboarding) {
             router.replace("/(app)/onboarding");
         }
     }, [isLoading, isAuthenticated, user, router, isOnOnboarding]);
@@ -316,10 +179,17 @@ export default function AppLayout() {
         }
     }, [user?.couple_id, fetchStreak]);
 
-    // Sync app icon badge count whenever matches or messages change
+    // Fetch pending questions (Your Turn) when user is in a couple
     useEffect(() => {
-        syncBadgeCount(newMatchesCount, unreadCount);
-    }, [newMatchesCount, unreadCount]);
+        if (user?.couple_id) {
+            fetchPendingQuestions();
+        }
+    }, [user?.couple_id, fetchPendingQuestions]);
+
+    // Sync app icon badge count whenever matches, messages, or pending questions change
+    useEffect(() => {
+        syncBadgeCount(newMatchesCount + pendingQuestions.length, unreadCount);
+    }, [newMatchesCount, unreadCount, pendingQuestions.length]);
 
     // Initialize RevenueCat for subscription management (iOS and Android only)
     useEffect(() => {
@@ -367,7 +237,7 @@ export default function AppLayout() {
         };
     }, [user?.id, user?.couple_id]);
 
-    // Subscribe to realtime match notifications
+    // Subscribe to realtime match notifications (for badge updates and analytics)
     useEffect(() => {
         if (!user?.couple_id) return;
 
@@ -401,42 +271,12 @@ export default function AppLayout() {
                             Events.milestoneMatch(currentMatchCount + 1);
                         }
 
-                        // Add to store
+                        // Add to store (updates badge count via newMatchesCount)
                         addMatch(matchWithQuestion);
                         Events.matchCreated(matchWithQuestion.match_type || "unknown");
 
-                        // Fetch individual responses to show what each person said
-                        const { data: responses } = await supabase
-                            .from("responses")
-                            .select("user_id, answer")
-                            .eq("question_id", matchWithQuestion.question_id)
-                            .eq("couple_id", user.couple_id);
-
-                        let userResponse: AnswerType | undefined;
-                        let partnerResponse: AnswerType | undefined;
-
-                        if (responses && responses.length >= 2) {
-                            for (const r of responses) {
-                                if (r.user_id === user.id) {
-                                    userResponse = r.answer as AnswerType;
-                                } else {
-                                    partnerResponse = r.answer as AnswerType;
-                                }
-                            }
-                        }
-
-                        // Get partner name from auth store
-                        const { partner } = useAuthStore.getState();
-
-                        // Show notification with response data
-                        setMatchNotification({
-                            id: matchWithQuestion.id,
-                            match_type: matchWithQuestion.match_type,
-                            question: matchWithQuestion.question,
-                            userResponse,
-                            partnerResponse,
-                            partnerName: partner?.name,
-                        });
+                        // Note: No modal popup - user will see badge on matches tab
+                        // Confetti animation is shown inline on swipe screen when user creates match
                     }
                 }
             )
@@ -561,18 +401,6 @@ export default function AppLayout() {
         };
     }, [lastMessage]);
 
-    const dismissNotification = useCallback(() => {
-        setMatchNotification(null);
-    }, []);
-
-    const handleMatchChat = useCallback(() => {
-        if (matchNotification) {
-            const matchId = matchNotification.id;
-            setMatchNotification(null);
-            router.push(`/(app)/chat/${matchId}`);
-        }
-    }, [matchNotification, router]);
-
     const dismissMessageToast = useCallback(() => {
         Animated.timing(messageToastAnim, {
             toValue: -100,
@@ -591,7 +419,7 @@ export default function AppLayout() {
     }, [lastMessage, dismissMessageToast, router]);
 
     // Show loading state while checking authentication or redirecting to onboarding
-    if (isLoading || !isAuthenticated || (user && !user.onboarding_completed && !isOnOnboarding)) {
+    if (isLoading || !isAuthenticated || (user && needsOnboarding(user.onboarding_completed, user.onboarding_version) && !isOnOnboarding)) {
         return (
             <View style={styles.loadingContainer}>
                 <ActivityIndicator size="large" color={colors.primary} />
@@ -633,20 +461,10 @@ export default function AppLayout() {
                         ),
                     }}
                 />
-                <Tabs.Screen
-                    name="packs"
-                    options={{
-                        title: "Packs",
-                        tabBarIcon: ({ color, size }) => (
-                            <Ionicons name="layers" size={size} color={color} />
-                        ),
-                    }}
-                />
                 <Tabs.Screen
                     name="swipe"
                     options={{
-                        title: "",
-                        tabBarButton: (props) => <PlayTabButton {...props} />,
+                        href: null, // Hide from tab bar - accessed from home screen
                     }}
                 />
                 <Tabs.Screen
@@ -656,7 +474,7 @@ export default function AppLayout() {
                         tabBarIcon: ({ color, size }) => (
                             <Ionicons name="heart" size={size} color={color} />
                         ),
-                        tabBarBadge: (newMatchesCount + unreadCount) > 0 ? (newMatchesCount + unreadCount) : undefined,
+                        tabBarBadge: (newMatchesCount + unreadCount + pendingQuestions.length) > 0 ? (newMatchesCount + unreadCount + pendingQuestions.length) : undefined,
                         tabBarBadgeStyle: {
                             backgroundColor: colors.premium.rose,
                             fontSize: 9,
@@ -720,128 +538,6 @@ export default function AppLayout() {
                 />
             </Tabs>
 
-            {/* Radial Menu Overlay */}
-            {isRadialMenuOpen && (
-                <Pressable
-                    style={radialStyles.overlay}
-                    onPress={closeRadialMenu}
-                />
-            )}
-
-            {/* Radial Menu Items - positioned above the center button */}
-            <Animated.View
-                style={[
-                    radialStyles.menuContainer,
-                    { opacity: radialMenuAnim },
-                ]}
-                pointerEvents={isRadialMenuOpen ? 'auto' : 'none'}
-            >
-                {RADIAL_MENU_ITEMS.map((item) => {
-                    // Convert angle to radians and calculate position
-                    const angleRad = (item.angle - 90) * (Math.PI / 180); // -90 to make 0 = top
-                    const translateX = Math.cos(angleRad) * RADIAL_DISTANCE;
-                    const translateY = Math.sin(angleRad) * RADIAL_DISTANCE;
-
-                    const itemScale = radialMenuAnim.interpolate({
-                        inputRange: [0, 1],
-                        outputRange: [0.3, 1],
-                    });
-
-                    const itemTranslateX = radialMenuAnim.interpolate({
-                        inputRange: [0, 1],
-                        outputRange: [0, translateX],
-                    });
-
-                    const itemTranslateY = radialMenuAnim.interpolate({
-                        inputRange: [0, 1],
-                        outputRange: [0, translateY],
-                    });
-
-                    // Brand and feature variant colors
-                    const getVariantStyles = () => {
-                        switch (item.variant) {
-                            case 'primary':
-                                return {
-                                    bg: `${NAV_COLORS.primaryRgba}0.15)`,
-                                    border: `${NAV_COLORS.primaryRgba}0.35)`,
-                                    icon: NAV_COLORS.primary,
-                                    label: NAV_COLORS.primary,
-                                };
-                            case 'gold':
-                                return {
-                                    bg: `${NAV_COLORS.goldRgba}0.15)`,
-                                    border: `${NAV_COLORS.goldRgba}0.35)`,
-                                    icon: NAV_COLORS.gold,
-                                    label: NAV_COLORS.gold,
-                                };
-                            case 'rose':
-                                return {
-                                    bg: `${NAV_COLORS.roseRgba}0.15)`,
-                                    border: `${NAV_COLORS.roseRgba}0.35)`,
-                                    icon: NAV_COLORS.rose,
-                                    label: NAV_COLORS.rose,
-                                };
-                            case 'muted':
-                            default:
-                                return {
-                                    bg: 'rgba(255, 255, 255, 0.08)',
-                                    border: 'rgba(255, 255, 255, 0.15)',
-                                    icon: colors.textSecondary,
-                                    label: colors.textSecondary,
-                                };
-                        }
-                    };
-
-                    const variantStyles = getVariantStyles();
-
-                    return (
-                        <Animated.View
-                            key={item.id}
-                            style={[
-                                radialStyles.menuItem,
-                                {
-                                    transform: [
-                                        { translateX: itemTranslateX },
-                                        { translateY: itemTranslateY },
-                                        { scale: itemScale },
-                                    ],
-                                },
-                            ]}
-                        >
-                            <Pressable
-                                onPress={() => handleRadialMenuItemPress(item.id)}
-                                style={radialStyles.menuItemButton}
-                            >
-                                <View style={[
-                                    radialStyles.menuItemCircle,
-                                    {
-                                        backgroundColor: variantStyles.bg,
-                                        borderColor: variantStyles.border,
-                                    },
-                                ]}>
-                                    <Ionicons
-                                        name={item.icon}
-                                        size={22}
-                                        color={variantStyles.icon}
-                                    />
-                                </View>
-                                <Text style={[radialStyles.menuItemLabel, { color: variantStyles.label }]}>
-                                    {item.label}
-                                </Text>
-                            </Pressable>
-                        </Animated.View>
-                    );
-                })}
-            </Animated.View>
-
-            {/* Match Notification Modal - Premium styling with response details */}
-            <MatchNotificationModal
-                visible={!!matchNotification}
-                match={matchNotification}
-                onDismiss={dismissNotification}
-                onChat={handleMatchChat}
-            />
-
             {/* Message Toast Notification */}
             {lastMessage && (
                 <Animated.View
@@ -923,98 +619,4 @@ const styles = StyleSheet.create({
         color: colors.textSecondary,
         marginTop: 2,
     },
-    // Play button styles - Premium boutique
-    playButtonContainer: {
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginTop: -28,
-    },
-    playButtonGlow: {
-        position: 'absolute',
-        width: 76,
-        height: 76,
-        borderRadius: 38,
-        backgroundColor: colors.primaryGlow,
-        opacity: 0.4,
-    },
-    playButtonGlowActive: {
-        opacity: 0.7,
-        ...shadows.glow(colors.primary),
-    },
-    playButtonCircle: {
-        width: 64,
-        height: 64,
-        borderRadius: 32,
-        overflow: 'hidden',
-        borderWidth: 1.5,
-        borderColor: 'rgba(233, 69, 96, 0.4)', // primary brand
-        ...shadows.lg,
-    },
-    playButtonInner: {
-        flex: 1,
-        backgroundColor: '#0d0d1a',
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    playButtonHighlight: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        height: '50%',
-    },
-    playButtonGradient: {
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-});
-
-// Radial menu styles - Premium boutique
-const TAB_BAR_HEIGHT = Platform.OS === 'ios' ? 88 : 64;
-
-const radialStyles = StyleSheet.create({
-    overlay: {
-        ...StyleSheet.absoluteFillObject,
-        backgroundColor: 'rgba(13, 13, 26, 0.85)',
-        zIndex: 998,
-    },
-    menuContainer: {
-        position: 'absolute',
-        bottom: TAB_BAR_HEIGHT + 30, // Position above tab bar, centered on button
-        left: 0,
-        right: 0,
-        alignItems: 'center',
-        zIndex: 999,
-    },
-    menuItem: {
-        position: 'absolute',
-        alignItems: 'center',
-    },
-    menuItemButton: {
-        alignItems: 'center',
-    },
-    menuItemCircle: {
-        width: 56,
-        height: 56,
-        borderRadius: 28,
-        backgroundColor: 'rgba(22, 33, 62, 0.9)',
-        justifyContent: 'center',
-        alignItems: 'center',
-        ...shadows.md,
-        borderWidth: 1.5,
-        borderColor: 'rgba(255, 255, 255, 0.15)',
-    },
-    menuItemLabel: {
-        ...typography.caption2,
-        color: colors.text,
-        marginTop: 8,
-        fontWeight: '500',
-        letterSpacing: 1,
-        textTransform: 'uppercase',
-        textShadowColor: 'rgba(0, 0, 0, 0.5)',
-        textShadowOffset: { width: 0, height: 1 },
-        textShadowRadius: 2,
-    },
 });
diff --git a/apps/mobile/app/(app)/dares.tsx b/apps/mobile/app/(app)/dares.tsx
index f35e1aa..447535a 100644
--- a/apps/mobile/app/(app)/dares.tsx
+++ b/apps/mobile/app/(app)/dares.tsx
@@ -162,15 +162,36 @@ const styles = StyleSheet.create({
         marginHorizontal: spacing.md,
         opacity: 0.6,
     },
-    badge: {
-        backgroundColor: 'rgba(212, 175, 55, 0.1)',
-        paddingHorizontal: spacing.lg,
-        paddingVertical: spacing.sm,
-        borderRadius: radius.full,
-        borderWidth: 1,
-        borderColor: 'rgba(212, 175, 55, 0.2)',
-        marginBottom: spacing.xl,
-    },
+    badge: {
+        backgroundColor: colors.backgroundLight,
+        paddingHorizontal: spacing.lg,
+        paddingVertical: spacing.sm,
+        borderRadius: radius.full,
+        borderWidth: 1,
+        borderColor: colors.border,
+        marginBottom: spacing.xl,
+    },
+    interestButton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: colors.backgroundLight,
+        paddingHorizontal: spacing.lg,
+        paddingVertical: spacing.sm + 2,
+        borderRadius: radius.full,
+        borderWidth: 1,
+        borderColor: colors.border,
+        gap: spacing.sm,
+    },
+    interestButtonActive: {
+        backgroundColor: colors.background,
+        borderColor: colors.primary,
+    },
+    interestButtonText: {
+        ...typography.subhead,
+        fontWeight: '600',
+        color: ACCENT_COLOR,
+    },
     badgeText: {
         ...typography.caption2,
         fontWeight: '600',
@@ -198,35 +219,14 @@ const styles = StyleSheet.create({
         color: colors.text,
         marginLeft: spacing.sm,
     },
-    teaser: {
-        ...typography.footnote,
-        fontStyle: 'italic',
-        color: colors.textTertiary,
-        textAlign: 'center',
-    },
-    interestButtonContainer: {
-        marginTop: spacing.xl,
-        minHeight: 44,
-    },
-    interestButton: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: 'rgba(212, 175, 55, 0.1)',
-        paddingHorizontal: spacing.lg,
-        paddingVertical: spacing.sm + 2,
-        borderRadius: radius.full,
-        borderWidth: 1,
-        borderColor: 'rgba(212, 175, 55, 0.2)',
-        gap: spacing.sm,
-    },
-    interestButtonActive: {
-        backgroundColor: 'rgba(212, 175, 55, 0.15)',
-        borderColor: 'rgba(212, 175, 55, 0.3)',
-    },
-    interestButtonText: {
-        ...typography.subhead,
-        fontWeight: '600',
-        color: ACCENT_COLOR,
-    },
-});
+    teaser: {
+        ...typography.footnote,
+        fontStyle: 'italic',
+        color: colors.textTertiary,
+        textAlign: 'center',
+    },
+    interestButtonContainer: {
+        marginTop: spacing.xl,
+        minHeight: 44,
+    },
+});
diff --git a/apps/mobile/app/(app)/index.tsx b/apps/mobile/app/(app)/index.tsx
index d94dc92..ff3693e 100755
--- a/apps/mobile/app/(app)/index.tsx
+++ b/apps/mobile/app/(app)/index.tsx
@@ -1,22 +1,23 @@
-import { useCallback, useMemo, useState } from 'react';
-import { ScrollView, StyleSheet, Platform, View, Text, useWindowDimensions } from 'react-native';
-import { useFocusEffect } from 'expo-router';
-import Animated, { FadeInDown } from 'react-native-reanimated';
-import { Ionicons } from '@expo/vector-icons';
-import { useAuthStore, usePacksStore } from '../../src/store';
-import { GradientBackground } from '../../src/components/ui';
-import { Paywall } from '../../src/components/paywall';
-import { CompactHeader, ContentRow } from '../../src/components/discovery';
-import { colors, spacing, typography, radius } from '../../src/theme';
-import type { QuestionPack, Category } from '../../src/types';
-
-const MAX_CONTENT_WIDTH = 600;
-
-// Group packs by category
-function groupPacksByCategory(
-  packs: QuestionPack[],
-  categories: Category[]
-): { category: Category; packs: QuestionPack[] }[] {
+import { useCallback, useMemo, useState } from 'react';
+import { ScrollView, StyleSheet, Platform, View, Text, useWindowDimensions } from 'react-native';
+import { useFocusEffect } from 'expo-router';
+import Animated, { FadeInDown } from 'react-native-reanimated';
+import { Ionicons } from '@expo/vector-icons';
+import { BlurView } from 'expo-blur';
+import { useAuthStore, usePacksStore } from '../../src/store';
+import { GradientBackground } from '../../src/components/ui';
+import { Paywall } from '../../src/components/paywall';
+import { CompactHeader, ContentRow } from '../../src/components/discovery';
+import { colors, spacing, typography, radius } from '../../src/theme';
+import type { QuestionPack, Category } from '../../src/types';
+
+const MAX_CONTENT_WIDTH = 600;
+
+// Group packs by category
+function groupPacksByCategory(
+  packs: QuestionPack[],
+  categories: Category[]
+): { category: Category; packs: QuestionPack[] }[] {
   const categoryMap = new Map<string, QuestionPack[]>();
   const uncategorized: QuestionPack[] = [];
 
@@ -67,88 +68,97 @@ function groupPacksByCategory(
 export default function DiscoveryScreen() {
   const { user, partner, couple } = useAuthStore();
   const { packs, categories, fetchPacks, getPackProgress } = usePacksStore();
-  const { width } = useWindowDimensions();
-  const [showPaywall, setShowPaywall] = useState(false);
-
-  const isPremiumUser = user?.is_premium ?? false;
-  const isWideScreen = width > MAX_CONTENT_WIDTH;
-
-  // Refresh data when screen gains focus
-  useFocusEffect(
-    useCallback(() => {
-      fetchPacks();
-    }, [])
-  );
-
-  // Group packs by category
-  const packsByCategory = useMemo(
-    () => groupPacksByCategory(packs, categories),
-    [packs, categories]
-  );
-
-  // Check if user has no packs enabled (empty state)
-  const hasNoPacks = packs.length === 0;
-
-  return (
-    <GradientBackground>
-      <ScrollView
-        style={styles.container}
-        contentContainerStyle={[
-          styles.contentContainer,
-          isWideScreen && styles.contentContainerWide,
-        ]}
-        showsVerticalScrollIndicator={false}
-      >
-        <View style={[styles.innerContainer, isWideScreen && styles.innerContainerWide]}>
-          {/* Compact Header */}
-          <CompactHeader user={user} partner={partner} couple={couple} />
-
-          {/* Content Rows by Category */}
-          {packsByCategory.map((group, index) => (
-            <ContentRow
-              key={group.category.id}
-              title={group.category.name}
-              packs={group.packs}
-              isPremiumUser={isPremiumUser}
-              categoryId={group.category.id}
-              delay={200 + index * 100}
-              getPackProgress={getPackProgress}
-              onShowPaywall={() => setShowPaywall(true)}
-            />
-          ))}
-
-          {/* Empty state when no packs */}
-          {hasNoPacks && (
-            <Animated.View
-              entering={FadeInDown.delay(300).duration(500).springify()}
-              style={styles.emptyState}
-            >
-              <View style={styles.emptyIcon}>
-                <Ionicons name="layers-outline" size={48} color={colors.primary} />
-              </View>
-              <Text style={styles.emptyTitle}>No packs available</Text>
-              <Text style={styles.emptySubtitle}>
-                Check back soon for new content
-              </Text>
-            </Animated.View>
-          )}
-
-          <View style={styles.bottomSpacer} />
-        </View>
-      </ScrollView>
-
-      {/* Paywall Modal */}
-      <Paywall
-        visible={showPaywall}
-        onClose={() => setShowPaywall(false)}
-        onSuccess={() => {
-          setShowPaywall(false);
-          fetchPacks(); // Refresh packs to update lock status
-        }}
-      />
-    </GradientBackground>
-  );
-}
+  const { width } = useWindowDimensions();
+  const [showPaywall, setShowPaywall] = useState(false);
+  const [headerHeight, setHeaderHeight] = useState(130);
+
+  const isPremiumUser = user?.is_premium ?? false;
+  const isWideScreen = width > MAX_CONTENT_WIDTH;
+
+  // Refresh data when screen gains focus
+  useFocusEffect(
+    useCallback(() => {
+      fetchPacks();
+    }, [])
+  );
+
+  // Group packs by category
+  const packsByCategory = useMemo(
+    () => groupPacksByCategory(packs, categories),
+    [packs, categories]
+  );
+
+  // Check if user has no packs enabled (empty state)
+  const hasNoPacks = packs.length === 0;
+
+  return (
+    <GradientBackground>
+      <View
+        style={[styles.stickyHeader, isWideScreen && styles.stickyHeaderWide]}
+        onLayout={(e) => setHeaderHeight(e.nativeEvent.layout.height)}
+      >
+        <BlurView intensity={80} tint="dark" style={StyleSheet.absoluteFill} />
+        <View style={[StyleSheet.absoluteFill, { backgroundColor: 'rgba(14, 14, 17, 0.85)' }]} />
+        <CompactHeader user={user} partner={partner} couple={couple} />
+      </View>
+
+      <ScrollView
+        style={styles.container}
+        contentContainerStyle={[
+          styles.contentContainer,
+          isWideScreen && styles.contentContainerWide,
+          { paddingTop: headerHeight },
+        ]}
+        showsVerticalScrollIndicator={false}
+      >
+        <View style={[styles.innerContainer, isWideScreen && styles.innerContainerWide]}>
+          {/* Content Rows by Category */}
+          {packsByCategory.map((group, index) => (
+            <ContentRow
+              key={group.category.id}
+              title={group.category.name}
+              packs={group.packs}
+              isPremiumUser={isPremiumUser}
+              categoryId={group.category.id}
+              delay={200 + index * 100}
+              getPackProgress={getPackProgress}
+              onShowPaywall={() => setShowPaywall(true)}
+            />
+          ))}
+
+          {/* Empty state when no packs */}
+          {hasNoPacks && (
+            <Animated.View
+              entering={FadeInDown.delay(300).duration(500).springify()}
+              style={styles.emptyState}
+            >
+              <View style={styles.emptyIcon}>
+                <Ionicons name="layers-outline" size={48} color={colors.primary} />
+              </View>
+              <Text style={styles.emptyTitle}>No packs available</Text>
+              <Text style={styles.emptySubtitle}>
+                Check back soon for new content
+              </Text>
+            </Animated.View>
+          )}
+
+          <View style={styles.bottomSpacer} />
+        </View>
+      </ScrollView>
+
+      {/* Paywall Modal */}
+      <Paywall
+        visible={showPaywall}
+        onClose={() => setShowPaywall(false)}
+        onSuccess={() => {
+          setShowPaywall(false);
+          fetchPacks(); // Refresh packs to update lock status
+        }}
+      />
+    </GradientBackground>
+  );
+}
+
 
 const styles = StyleSheet.create({
   container: {
@@ -194,7 +204,22 @@ const styles = StyleSheet.create({
     color: colors.textSecondary,
     textAlign: 'center',
   },
-  bottomSpacer: {
-    height: spacing.lg,
-  },
-});
+  bottomSpacer: {
+    height: spacing.lg,
+  },
+  stickyHeader: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 10,
+    overflow: 'hidden', // Ensures blur doesn't bleed if we rounded corners (optional)
+  },
+  stickyHeaderWide: {
+    left: '50%',
+    right: 'auto',
+    width: MAX_CONTENT_WIDTH,
+    transform: [{ translateX: -MAX_CONTENT_WIDTH / 2 }],
+  },
+});
+
diff --git a/apps/mobile/app/(app)/matches.tsx b/apps/mobile/app/(app)/matches.tsx
index b1c4d9b..b66a699 100755
--- a/apps/mobile/app/(app)/matches.tsx
+++ b/apps/mobile/app/(app)/matches.tsx
@@ -1,13 +1,12 @@
-import { View, Text, StyleSheet, FlatList, RefreshControl, TouchableOpacity, ActivityIndicator, Platform, useWindowDimensions } from "react-native";
+import { View, Text, StyleSheet, FlatList, RefreshControl, TouchableOpacity, ActivityIndicator, Platform, useWindowDimensions, ScrollView } from "react-native";
+import { BlurView } from "expo-blur";
 import { useMatchStore, useAuthStore, type PendingQuestion } from "../../src/store";
-import { useEffect, useCallback, useState } from "react";
+import { useEffect, useCallback, useState, useRef } from "react";
 import { useFocusEffect } from "expo-router";
 import { Ionicons } from "@expo/vector-icons";
 import { useRouter } from "expo-router";
-import { LinearGradient } from "expo-linear-gradient";
 import Animated, {
     FadeIn,
-    FadeInDown,
     FadeInRight,
     FadeInUp,
     useSharedValue,
@@ -16,23 +15,20 @@ import Animated, {
     interpolate,
     Extrapolation,
 } from "react-native-reanimated";
-import { BlurView } from "expo-blur";
-import { GradientBackground, GlassCard, GlassButton, DecorativeSeparator } from "../../src/components/ui";
+import { GradientBackground, GlassButton, DecorativeSeparator } from "../../src/components/ui";
+import { CompactHeader } from "../../src/components/discovery";
 import { SwipeableMatchItem } from "../../src/components/matches";
-import { useAmbientOrbAnimation } from "../../src/hooks";
-import { colors, gradients, spacing, typography, radius, shadows } from "../../src/theme";
+import { colors, spacing, typography, radius } from "../../src/theme";
 import { MatchesTutorial } from "../../src/components/tutorials";
 import { hasSeenMatchesTutorial, markMatchesTutorialSeen } from "../../src/lib/matchesTutorialSeen";
 
-// Premium color palette
-const ACCENT = colors.premium.gold;
-const ACCENT_RGBA = 'rgba(212, 175, 55, ';
-const ROSE = colors.premium.rose;
-const ROSE_RGBA = 'rgba(232, 164, 174, ';
+// Feature colors - Matches uses Primary per DESIGN.md
+const PRIMARY = colors.primary;
+const PRIMARY_RGBA = 'rgba(225, 48, 108, ';
+const SECONDARY = colors.secondary;
+const SECONDARY_RGBA = 'rgba(155, 89, 182, ';
 
 const MAX_CONTENT_WIDTH = 500;
-const NAV_BAR_HEIGHT = 44;
-const STATUS_BAR_HEIGHT = 60;
 const HEADER_SCROLL_DISTANCE = 100;
 
 const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
@@ -46,6 +42,7 @@ export default function MatchesScreen() {
         hasMore,
         isLoadingMore,
         totalCount,
+        newMatchesCount,
         // Archive state and methods
         archivedMatches,
         showArchived,
@@ -55,15 +52,26 @@ export default function MatchesScreen() {
         // Pending state and methods
         pendingQuestions,
         isLoadingPending,
+        // Their Turn state and methods
+        theirTurnQuestions,
+        isLoadingTheirTurn,
+        fetchTheirTurnQuestions,
         currentView,
         setCurrentView,
         fetchPendingQuestions,
+        // Nudge state and methods
+        nudgeCooldownUntil,
+        isNudging,
+        sendNudge,
+        checkNudgeCooldown,
     } = useMatchStore();
     const { user, couple, partner } = useAuthStore();
     const router = useRouter();
     const { width } = useWindowDimensions();
     const isWideScreen = width > MAX_CONTENT_WIDTH;
     const [showTutorial, setShowTutorial] = useState(false);
+    const [nudgeFeedback, setNudgeFeedback] = useState<string | null>(null);
+    const [headerHeight, setHeaderHeight] = useState(130);
 
     const scrollY = useSharedValue(0);
 
@@ -90,29 +98,6 @@ export default function MatchesScreen() {
         return { opacity, transform: [{ scale }] };
     });
 
-    const compactHeaderStyle = useAnimatedStyle(() => {
-        const opacity = interpolate(
-            scrollY.value,
-            [HEADER_SCROLL_DISTANCE * 0.5, HEADER_SCROLL_DISTANCE],
-            [0, 1],
-            Extrapolation.CLAMP
-        );
-        return { opacity };
-    });
-
-    const navBarBackgroundStyle = useAnimatedStyle(() => {
-        const opacity = interpolate(
-            scrollY.value,
-            [0, HEADER_SCROLL_DISTANCE * 0.8],
-            [0, 1],
-            Extrapolation.CLAMP
-        );
-        return { opacity };
-    });
-
-    // Ambient orb breathing animations
-    const { orbStyle1, orbStyle2 } = useAmbientOrbAnimation();
-
     // Check if tutorial should be shown when screen is focused or matches change
     useFocusEffect(
         useCallback(() => {
@@ -138,9 +123,49 @@ export default function MatchesScreen() {
             fetchMatches(true);
             // Also refresh pending questions when focused
             fetchPendingQuestions();
+            fetchTheirTurnQuestions();
+            // Check nudge cooldown
+            checkNudgeCooldown();
+
+            // Cleanup: mark matches as seen when leaving the screen (if on Complete tab)
+            return () => {
+                const state = useMatchStore.getState();
+                if (state.currentView === 'active' && state.matches.length > 0 && state.newMatchesCount > 0) {
+                    state.markAllAsSeen();
+                }
+            };
         }, [])
     );
 
+    // Format cooldown remaining time
+    const formatCooldownTime = (cooldownUntil: Date): string => {
+        const now = new Date();
+        const diffMs = cooldownUntil.getTime() - now.getTime();
+        if (diffMs <= 0) return '';
+
+        const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+        const diffMins = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
+
+        if (diffHours > 0) {
+            return `${diffHours}h ${diffMins}m`;
+        }
+        return `${diffMins}m`;
+    };
+
+    // Check if nudge is on cooldown
+    const isNudgeOnCooldown = !!(nudgeCooldownUntil && new Date() < nudgeCooldownUntil);
+
+    // Handle nudge button press
+    const handleNudge = async () => {
+        if (isNudging || isNudgeOnCooldown) return;
+
+        const result = await sendNudge();
+        if (result.success) {
+            setNudgeFeedback(result.notificationSent ? 'Nudge sent!' : 'Nudge recorded');
+            setTimeout(() => setNudgeFeedback(null), 3000);
+        }
+    };
+
     const handleLoadMore = useCallback(() => {
         console.log('[Matches] onEndReached called', { isLoading, isLoadingMore, hasMore, matchesCount: matches.length });
         if (!isLoading && !isLoadingMore && hasMore) {
@@ -148,11 +173,19 @@ export default function MatchesScreen() {
         }
     }, [isLoading, isLoadingMore, hasMore, matches.length]);
 
+    // Track previous view to detect when leaving Complete tab
+    const prevViewRef = useRef<string>(currentView);
+
+    // Mark matches as seen when navigating AWAY from the Complete tab
     useEffect(() => {
-        if (matches.length > 0) {
+        const prevView = prevViewRef.current;
+        prevViewRef.current = currentView;
+
+        // If we were on 'active' and now switching to a different view, mark as seen
+        if (prevView === 'active' && currentView !== 'active' && matches.length > 0) {
             markAllAsSeen();
         }
-    }, [matches.length]);
+    }, [currentView, matches.length, markAllAsSeen]);
 
     const renderItem = ({ item, index }: { item: any; index: number }) => {
         // Skip rendering if question was deleted
@@ -177,6 +210,20 @@ export default function MatchesScreen() {
         }
 
         const isYesYes = item.match_type === "yes_yes";
+        const isBothAnswered = item.match_type === "both_answered";
+
+        // Get the appropriate label for the match type
+        const getMatchLabel = () => {
+            if (isYesYes) return "YES + YES";
+            if (isBothAnswered) return "MATCHED";
+            return "YES + MAYBE";
+        };
+
+        // Get the appropriate icon for the match type
+        const getMatchIcon = () => {
+            if (isYesYes || isBothAnswered) return "heart";
+            return "heart-half";
+        };
 
         const handleArchive = async () => {
             if (showArchived) {
@@ -196,32 +243,34 @@ export default function MatchesScreen() {
                         onPress={() => router.push(`/chat/${item.id}`)}
                         activeOpacity={0.8}
                     >
-                        <View style={styles.matchCardPremium}>
-                            {/* Subtle gradient background */}
-                            <LinearGradient
-                                colors={['rgba(22, 33, 62, 0.6)', 'rgba(13, 13, 26, 0.8)']}
-                                style={StyleSheet.absoluteFill}
-                                start={{ x: 0, y: 0 }}
-                                end={{ x: 1, y: 1 }}
-                            />
-                            {/* Top silk highlight */}
-                            <LinearGradient
-                                colors={[`${ACCENT_RGBA}0.06)`, 'transparent']}
-                                style={styles.cardSilkHighlight}
-                                start={{ x: 0.5, y: 0 }}
-                                end={{ x: 0.5, y: 1 }}
-                            />
+                        <View style={[styles.matchCardPremium, item.is_new && styles.matchCardNew]}>
+                        {/* Subtle gradient background - removed for flat style
+                        <LinearGradient
+                            colors={['rgba(22, 33, 62, 0.6)', 'rgba(13, 13, 26, 0.8)']}
+                            style={StyleSheet.absoluteFill}
+                            start={{ x: 0, y: 0 }}
+                            end={{ x: 1, y: 1 }}
+                        />
+                        */}
+                        {/* Top silk highlight - removed for flat style
+                        <LinearGradient
+                            colors={[`${ACCENT_RGBA}0.06)`, 'transparent']}
+                            style={styles.cardSilkHighlight}
+                            start={{ x: 0.5, y: 0 }}
+                            end={{ x: 0.5, y: 1 }}
+                        />
+                        */}
 
                             <View style={styles.matchRow}>
                                 {/* Premium icon container */}
                                 <View style={[
                                     styles.iconContainerPremium,
-                                    isYesYes && styles.iconContainerYesYes
+                                    (isYesYes || isBothAnswered) && styles.iconContainerYesYes
                                 ]}>
                                     <Ionicons
-                                        name={isYesYes ? "heart" : "heart-half"}
+                                        name={getMatchIcon()}
                                         size={20}
-                                        color={isYesYes ? ACCENT : ROSE}
+                                        color={(isYesYes || isBothAnswered) ? PRIMARY : SECONDARY}
                                     />
                                 </View>
 
@@ -235,16 +284,23 @@ export default function MatchesScreen() {
                                         </Text>
                                     )}
                                     <View style={styles.metaRow}>
-                                        <View style={[
-                                            styles.tagPremium,
-                                            isYesYes && styles.tagPremiumHighlight
-                                        ]}>
-                                            <Text style={[
-                                                styles.tagTextPremium,
-                                                isYesYes && styles.tagTextPremiumHighlight
+                                        <View style={styles.metaLeft}>
+                                            <View style={[
+                                                styles.tagPremium,
+                                                (isYesYes || isBothAnswered) && styles.tagPremiumHighlight
                                             ]}>
-                                                {isYesYes ? "YES + YES" : "YES + MAYBE"}
-                                            </Text>
+                                                <Text style={[
+                                                    styles.tagTextPremium,
+                                                    (isYesYes || isBothAnswered) && styles.tagTextPremiumHighlight
+                                                ]}>
+                                                    {getMatchLabel()}
+                                                </Text>
+                                            </View>
+                                            {item.is_new && (
+                                                <View style={styles.newBadge}>
+                                                    <Text style={styles.newBadgeText}>NEW</Text>
+                                                </View>
+                                            )}
                                         </View>
                                         <Text style={styles.datePremium}>
                                             {new Date(item.created_at).toLocaleDateString()}
@@ -259,7 +315,7 @@ export default function MatchesScreen() {
                                         </View>
                                     )}
                                     <View style={styles.chevronContainerPremium}>
-                                        <Ionicons name="chevron-forward" size={16} color={`${ACCENT_RGBA}0.6)`} />
+                                        <Ionicons name="chevron-forward" size={16} color={`${PRIMARY_RGBA}0.6)`} />
                                     </View>
                                 </View>
                             </View>
@@ -291,28 +347,13 @@ export default function MatchesScreen() {
                     activeOpacity={0.8}
                 >
                     <View style={styles.matchCardPremium}>
-                        {/* Subtle gradient background - slightly different hue for pending */}
-                        <LinearGradient
-                            colors={['rgba(33, 33, 62, 0.6)', 'rgba(13, 13, 26, 0.8)']}
-                            style={StyleSheet.absoluteFill}
-                            start={{ x: 0, y: 0 }}
-                            end={{ x: 1, y: 1 }}
-                        />
-                        {/* Top silk highlight */}
-                        <LinearGradient
-                            colors={[`${ROSE_RGBA}0.06)`, 'transparent']}
-                            style={styles.cardSilkHighlight}
-                            start={{ x: 0.5, y: 0 }}
-                            end={{ x: 0.5, y: 1 }}
-                        />
-
                         <View style={styles.matchRow}>
                             {/* Pending icon container - hourglass */}
                             <View style={[styles.iconContainerPremium, styles.iconContainerPending]}>
                                 <Ionicons
                                     name="hourglass-outline"
                                     size={20}
-                                    color={ROSE}
+                                    color={PRIMARY}
                                 />
                             </View>
 
@@ -334,7 +375,7 @@ export default function MatchesScreen() {
 
                             <View style={styles.rightSection}>
                                 <View style={styles.chevronContainerPremium}>
-                                    <Ionicons name="chevron-forward" size={16} color={`${ROSE_RGBA}0.6)`} />
+                                    <Ionicons name="chevron-forward" size={16} color={`${PRIMARY_RGBA}0.6)`} />
                                 </View>
                             </View>
                         </View>
@@ -347,6 +388,57 @@ export default function MatchesScreen() {
         );
     };
 
+    const renderTheirTurnItem = ({ item, index }: { item: PendingQuestion; index: number }) => {
+        if (!item.question) {
+            return null;
+        }
+
+        const packName = item.question.pack?.name ?? 'Unknown Pack';
+        const timeSince = getTimeSince(item.partnerAnsweredAt);
+
+        return (
+            <Animated.View entering={FadeInRight.delay(index * 50).duration(300)}>
+                <View style={styles.matchCardPremium}>
+                    <View style={styles.matchRow}>
+                        {/* Their turn icon container - clock */}
+                        <View style={[styles.iconContainerPremium, styles.iconContainerTheirTurn]}>
+                            <Ionicons
+                                name="time-outline"
+                                size={20}
+                                color={SECONDARY}
+                            />
+                        </View>
+
+                        <View style={styles.content}>
+                            <Text style={styles.questionTextPremium} numberOfLines={2}>
+                                {item.question.text}
+                            </Text>
+                            <View style={styles.metaRow}>
+                                <View style={[styles.tagPremium, styles.tagTheirTurn]}>
+                                    <Text style={[styles.tagTextPremium, styles.tagTextTheirTurn]}>
+                                        {packName}
+                                    </Text>
+                                </View>
+                                <Text style={styles.datePremium}>
+                                    {timeSince}
+                                </Text>
+                            </View>
+                        </View>
+
+                        <View style={styles.rightSection}>
+                            <View style={[styles.chevronContainerPremium, styles.chevronTheirTurn]}>
+                                <Ionicons name="checkmark" size={16} color={SECONDARY} />
+                            </View>
+                        </View>
+                    </View>
+
+                    {/* Premium border */}
+                    <View style={[styles.cardPremiumBorder, styles.cardTheirTurnBorder]} pointerEvents="none" />
+                </View>
+            </Animated.View>
+        );
+    };
+
     // Helper to get time since partner answered
     const getTimeSince = (dateString: string): string => {
         const date = new Date(dateString);
@@ -386,23 +478,24 @@ export default function MatchesScreen() {
     if (!partner) {
         return (
             <GradientBackground>
-                {/* Ambient Orbs */}
-                <Animated.View style={[styles.ambientOrb, styles.orbTopRight, orbStyle1]} pointerEvents="none">
-                    <LinearGradient
-                        colors={[colors.premium.goldGlow, 'transparent']}
-                        style={styles.orbGradient}
-                        start={{ x: 0.5, y: 0.5 }}
-                        end={{ x: 1, y: 1 }}
-                    />
-                </Animated.View>
-                <Animated.View style={[styles.ambientOrb, styles.orbBottomLeft, orbStyle2]} pointerEvents="none">
-                    <LinearGradient
-                        colors={[`${ROSE_RGBA}0.2)`, 'transparent']}
-                        style={styles.orbGradient}
-                        start={{ x: 0.5, y: 0.5 }}
-                        end={{ x: 0, y: 0 }}
-                    />
-                </Animated.View>
+            {/* Ambient Orbs - Commented out for flat look
+            <Animated.View style={[styles.ambientOrb, styles.orbTopRight, orbStyle1]} pointerEvents="none">
+                <LinearGradient
+                    colors={[colors.premium.goldGlow, 'transparent']}
+                    style={styles.orbGradient}
+                    start={{ x: 0.5, y: 0.5 }}
+                    end={{ x: 1, y: 1 }}
+                />
+            </Animated.View>
+            <Animated.View style={[styles.ambientOrb, styles.orbBottomLeft, orbStyle2]} pointerEvents="none">
+                <LinearGradient
+                    colors={[`${ROSE_RGBA}0.2)`, 'transparent']}
+                    style={styles.orbGradient}
+                    start={{ x: 0.5, y: 0.5 }}
+                    end={{ x: 0, y: 0 }}
+                />
+            </Animated.View>
+            */}
 
                 <View style={styles.pairingGateContainer}>
                     <Animated.View
@@ -411,14 +504,14 @@ export default function MatchesScreen() {
                     >
                         {/* Icon */}
                         <View style={styles.pairingGateIconContainer}>
-                            <Ionicons name="heart" size={36} color={ROSE} />
+                            <Ionicons name="heart" size={36} color={PRIMARY} />
                         </View>
 
                         {/* Title section */}
                         <Text style={styles.pairingGateLabel}>{couple ? "ALMOST THERE" : "CONNECT"}</Text>
                         <Text style={styles.pairingGateTitle}>{couple ? "Waiting" : "Pair Up"}</Text>
 
-                        <DecorativeSeparator variant="rose" />
+                        <DecorativeSeparator variant="primary" />
 
                         {/* Status badge */}
                         <Animated.View
@@ -439,15 +532,15 @@ export default function MatchesScreen() {
                         {/* Feature hints */}
                         <View style={styles.pairingGateFeatures}>
                             <View style={styles.pairingGateFeatureItem}>
-                                <Ionicons name="heart" size={16} color={ACCENT} />
+                                <Ionicons name="heart" size={16} color={PRIMARY} />
                                 <Text style={styles.pairingGateFeatureText}>See when you both agree</Text>
                             </View>
                             <View style={styles.pairingGateFeatureItem}>
-                                <Ionicons name="sparkles" size={16} color={ACCENT} />
+                                <Ionicons name="sparkles" size={16} color={PRIMARY} />
                                 <Text style={styles.pairingGateFeatureText}>Unlock hidden connections</Text>
                             </View>
                             <View style={styles.pairingGateFeatureItem}>
-                                <Ionicons name="chatbubbles-outline" size={16} color={ACCENT} />
+                                <Ionicons name="chatbubbles-outline" size={16} color={PRIMARY} />
                                 <Text style={styles.pairingGateFeatureText}>Chat about your matches</Text>
                             </View>
                         </View>
@@ -469,7 +562,7 @@ export default function MatchesScreen() {
 
     return (
         <GradientBackground>
-            {/* Ambient Orbs - Premium gold/rose */}
+            {/* Ambient Orbs - Commented out for flat look
             <Animated.View style={[styles.ambientOrb, styles.orbTopRight, orbStyle1]} pointerEvents="none">
                 <LinearGradient
                     colors={[colors.premium.goldGlow, 'transparent']}
@@ -486,85 +579,125 @@ export default function MatchesScreen() {
                     end={{ x: 0, y: 0 }}
                 />
             </Animated.View>
+            */}
+
+            <View
+                style={[styles.stickyHeader, isWideScreen && styles.stickyHeaderWide]}
+                onLayout={(e) => setHeaderHeight(e.nativeEvent.layout.height)}
+            >
+                <BlurView intensity={80} tint="dark" style={StyleSheet.absoluteFill} />
+                <View style={[StyleSheet.absoluteFill, { backgroundColor: "rgba(14, 14, 17, 0.85)" }]} />
+                <CompactHeader
+                    user={user}
+                    partner={partner}
+                    couple={couple}
+                    label="Matches"
+                    showGreeting={false}
+                    showPartnerBadge={false}
+                    accessory={
+                        <TouchableOpacity
+                            style={styles.headerActionButton}
+                            onPress={() => router.push({ pathname: "/(app)/my-answers", params: { returnTo: "/(app)/matches" } })}
+                        >
+                            <Ionicons name="list-outline" size={18} color={colors.text} />
+                        </TouchableOpacity>
+                    }
+                />
+            </View>
 
             <View style={styles.container}>
-                {/* Fixed Nav Bar */}
-                <View style={styles.navBar}>
-                    <Animated.View style={[styles.navBarBackground, navBarBackgroundStyle]}>
-                        {Platform.OS === "ios" ? (
-                            <BlurView intensity={80} tint="dark" style={StyleSheet.absoluteFill} />
-                        ) : (
-                            <View style={[StyleSheet.absoluteFill, { backgroundColor: "rgba(13, 13, 26, 0.95)" }]} />
-                        )}
-                    </Animated.View>
-                    
-                    <Animated.Text style={[styles.navBarTitle, compactHeaderStyle]} numberOfLines={1}>
-                        Matches
-                    </Animated.Text>
-                    
-                    {/* My Answers button moved to Nav Bar */}
-                    <TouchableOpacity
-                        style={styles.navBarButton}
-                        onPress={() => router.push({ pathname: "/(app)/my-answers", params: { returnTo: "/(app)/matches" } })}
-                    >
-                         <Ionicons name="list-outline" size={20} color={ACCENT} />
-                    </TouchableOpacity>
-                </View>
 
                 <AnimatedFlatList
-                    data={currentView === 'archived' ? archivedMatches : currentView === 'pending' ? pendingQuestions : matches}
-                    renderItem={currentView === 'pending' ? renderPendingItem as any : renderItem}
+                    data={
+                        currentView === 'archived' ? archivedMatches :
+                        currentView === 'pending' ? pendingQuestions :
+                        currentView === 'their_turn' ? theirTurnQuestions :
+                        matches
+                    }
+                    renderItem={
+                        currentView === 'pending' ? renderPendingItem as any :
+                        currentView === 'their_turn' ? renderTheirTurnItem as any :
+                        renderItem
+                    }
                     keyExtractor={(item: any) => item.id}
-                    contentContainerStyle={[styles.list, isWideScreen && styles.listWide]}
+                    contentContainerStyle={[
+                        styles.list,
+                        isWideScreen && styles.listWide,
+                        { paddingTop: headerHeight },
+                    ]}
                     showsVerticalScrollIndicator={false}
                     onScroll={scrollHandler}
                     scrollEventThrottle={16}
                         refreshControl={
                             <RefreshControl
-                                refreshing={currentView === 'pending' ? isLoadingPending : isLoading}
+                                refreshing={
+                                    currentView === 'pending' ? isLoadingPending :
+                                    currentView === 'their_turn' ? isLoadingTheirTurn :
+                                    isLoading
+                                }
                                 onRefresh={() => {
                                     if (currentView === 'pending') {
                                         fetchPendingQuestions();
+                                    } else if (currentView === 'their_turn') {
+                                        fetchTheirTurnQuestions();
                                     } else {
                                         fetchMatches(true);
                                     }
                                 }}
                                 tintColor={colors.primary}
                                 colors={[colors.primary]}
-                                progressViewOffset={STATUS_BAR_HEIGHT + NAV_BAR_HEIGHT}
+                                progressViewOffset={headerHeight}
                             />
                         }
-                        onEndReached={currentView === 'pending' ? undefined : handleLoadMore}
+                        onEndReached={(currentView === 'pending' || currentView === 'their_turn') ? undefined : handleLoadMore}
                         onEndReachedThreshold={2}
-                        ListFooterComponent={currentView === 'pending' ? null : renderFooter}
+                        ListFooterComponent={(currentView === 'pending' || currentView === 'their_turn') ? null : renderFooter}
                         ListHeaderComponent={
                             <Animated.View
                                 entering={FadeIn.duration(400)}
                                 style={[styles.header, isWideScreen && styles.headerWide, heroStyle]}
                             >
                             <View style={styles.headerContent}>
-                                {/* Premium label */}
-                                <Text style={styles.headerLabel}>DISCOVER</Text>
-                                <Text style={styles.headerTitle}>Matches</Text>
 
-                                {/* Decorative separator */}
-                                <DecorativeSeparator variant="gold" />
-
-                                {/* Filter toggle */}
-                                <View style={styles.filterContainer}>
+                                {/* Filter toggle - horizontal scrollable */}
+                                <ScrollView
+                                    horizontal
+                                    showsHorizontalScrollIndicator={false}
+                                    contentContainerStyle={styles.filterContainer}
+                                    style={styles.filterScrollContainer}
+                                >
+                                    <TouchableOpacity
+                                        style={[styles.filterTab, currentView === 'active' && styles.filterTabActive]}
+                                        onPress={() => currentView !== 'active' && setCurrentView('active')}
+                                        activeOpacity={0.7}
+                                    >
+                                        <Ionicons
+                                            name="heart"
+                                            size={16}
+                                            color={currentView === 'active' ? PRIMARY : colors.textTertiary}
+                                        />
+                                        <Text style={[styles.filterTabText, currentView === 'active' && styles.filterTabTextActive]}>
+                                            Complete
+                                        </Text>
+                                        {newMatchesCount > 0 && currentView !== 'active' && (
+                                            <View style={styles.pendingBadge}>
+                                                <Text style={styles.pendingBadgeText}>{newMatchesCount}</Text>
+                                            </View>
+                                        )}
+                                    </TouchableOpacity>
                                     <TouchableOpacity
                                         style={[styles.filterTab, currentView === 'pending' && styles.filterTabActive]}
                                         onPress={() => currentView !== 'pending' && setCurrentView('pending')}
                                         activeOpacity={0.7}
                                     >
                                         {isLoadingPending ? (
-                                            <ActivityIndicator size="small" color={ACCENT} />
+                                            <ActivityIndicator size="small" color={PRIMARY} />
                                         ) : (
                                             <>
                                                 <Ionicons
                                                     name="hourglass-outline"
-                                                    size={14}
-                                                    color={currentView === 'pending' ? ACCENT : colors.textTertiary}
+                                                    size={16}
+                                                    color={currentView === 'pending' ? PRIMARY : colors.textTertiary}
                                                 />
                                                 <Text style={[styles.filterTabText, currentView === 'pending' && styles.filterTabTextActive]}>
                                                     Your Turn
@@ -578,18 +711,29 @@ export default function MatchesScreen() {
                                         )}
                                     </TouchableOpacity>
                                     <TouchableOpacity
-                                        style={[styles.filterTab, currentView === 'active' && styles.filterTabActive]}
-                                        onPress={() => currentView !== 'active' && setCurrentView('active')}
+                                        style={[styles.filterTab, currentView === 'their_turn' && styles.filterTabActiveSecondary]}
+                                        onPress={() => currentView !== 'their_turn' && setCurrentView('their_turn')}
                                         activeOpacity={0.7}
                                     >
-                                        <Ionicons
-                                            name="heart"
-                                            size={14}
-                                            color={currentView === 'active' ? ACCENT : colors.textTertiary}
-                                        />
-                                        <Text style={[styles.filterTabText, currentView === 'active' && styles.filterTabTextActive]}>
-                                            Complete
-                                        </Text>
+                                        {isLoadingTheirTurn ? (
+                                            <ActivityIndicator size="small" color={PRIMARY} />
+                                        ) : (
+                                            <>
+                                                <Ionicons
+                                                    name="time-outline"
+                                                    size={16}
+                                                    color={currentView === 'their_turn' ? SECONDARY : colors.textTertiary}
+                                                />
+                                                <Text style={[styles.filterTabText, currentView === 'their_turn' && styles.filterTabTextActive]}>
+                                                    Their Turn
+                                                </Text>
+                                                {theirTurnQuestions.length > 0 && currentView !== 'their_turn' && (
+                                                    <View style={[styles.pendingBadge, styles.theirTurnBadge]}>
+                                                        <Text style={styles.pendingBadgeText}>{theirTurnQuestions.length}</Text>
+                                                    </View>
+                                                )}
+                                            </>
+                                        )}
                                     </TouchableOpacity>
                                     <TouchableOpacity
                                         style={[styles.filterTab, currentView === 'archived' && styles.filterTabActive]}
@@ -597,13 +741,13 @@ export default function MatchesScreen() {
                                         activeOpacity={0.7}
                                     >
                                         {isLoadingArchived ? (
-                                            <ActivityIndicator size="small" color={ACCENT} />
+                                            <ActivityIndicator size="small" color={PRIMARY} />
                                         ) : (
                                             <>
                                                 <Ionicons
                                                     name="archive-outline"
-                                                    size={14}
-                                                    color={currentView === 'archived' ? ACCENT : colors.textTertiary}
+                                                    size={16}
+                                                    color={currentView === 'archived' ? PRIMARY : colors.textTertiary}
                                                 />
                                                 <Text style={[styles.filterTabText, currentView === 'archived' && styles.filterTabTextActive]}>
                                                     Archived
@@ -611,24 +755,77 @@ export default function MatchesScreen() {
                                             </>
                                         )}
                                     </TouchableOpacity>
-                                </View>
+                                </ScrollView>
 
                                 {/* Count badge */}
                                 <View style={styles.countBadgePremium}>
                                     <Ionicons
-                                        name={currentView === 'archived' ? "archive" : currentView === 'pending' ? "hourglass" : "heart"}
+                                        name={
+                                            currentView === 'archived' ? "archive" :
+                                            currentView === 'pending' ? "hourglass" :
+                                            currentView === 'their_turn' ? "time" :
+                                            "heart"
+                                        }
                                         size={12}
-                                        color={ACCENT}
+                                        color={PRIMARY}
                                     />
                                     <Text style={styles.countTextPremium}>
                                         {currentView === 'archived'
                                             ? `${archivedMatches.length} ARCHIVED`
                                             : currentView === 'pending'
                                             ? `${pendingQuestions.length} WAITING`
+                                            : currentView === 'their_turn'
+                                            ? `${theirTurnQuestions.length} SENT`
                                             : `${totalCount ?? matches.length} COMPLETE`
                                         }
                                     </Text>
                                 </View>
+
+                                {/* Nudge button - only show in Their Turn view with questions */}
+                                {currentView === 'their_turn' && theirTurnQuestions.length > 0 && (
+                                    <View style={styles.nudgeContainer}>
+                                        {nudgeFeedback ? (
+                                            <Animated.View
+                                                entering={FadeIn.duration(200)}
+                                                style={styles.nudgeFeedback}
+                                            >
+                                                <Ionicons name="checkmark-circle" size={16} color={colors.success} />
+                                                <Text style={styles.nudgeFeedbackText}>{nudgeFeedback}</Text>
+                                            </Animated.View>
+                                        ) : (
+                                            <TouchableOpacity
+                                                style={[
+                                                    styles.nudgeButton,
+                                                    (isNudging || isNudgeOnCooldown) && styles.nudgeButtonDisabled
+                                                ]}
+                                                onPress={handleNudge}
+                                                disabled={isNudging || isNudgeOnCooldown}
+                                                activeOpacity={0.7}
+                                            >
+                                                {isNudging ? (
+                                                    <ActivityIndicator size="small" color={SECONDARY} />
+                                                ) : (
+                                                    <>
+                                                        <Ionicons
+                                                            name="hand-left-outline"
+                                                            size={16}
+                                                            color={isNudgeOnCooldown ? colors.textTertiary : SECONDARY}
+                                                        />
+                                                        <Text style={[
+                                                            styles.nudgeButtonText,
+                                                            isNudgeOnCooldown && styles.nudgeButtonTextDisabled
+                                                        ]}>
+                                                            {isNudgeOnCooldown && nudgeCooldownUntil
+                                                                ? `Nudge in ${formatCooldownTime(nudgeCooldownUntil)}`
+                                                                : 'Nudge partner'
+                                                            }
+                                                        </Text>
+                                                    </>
+                                                )}
+                                            </TouchableOpacity>
+                                        )}
+                                    </View>
+                                )}
                             </View>
                         </Animated.View>
                     }
@@ -640,7 +837,7 @@ export default function MatchesScreen() {
                             >
                                 {/* Archive icon */}
                                 <View style={styles.emptyIconContainer}>
-                                    <Ionicons name="archive-outline" size={48} color={ACCENT} />
+                                    <Ionicons name="archive-outline" size={48} color={PRIMARY} />
                                 </View>
 
                                 {/* Description */}
@@ -662,8 +859,8 @@ export default function MatchesScreen() {
                                 style={styles.emptyContent}
                             >
                                 {/* Pending icon */}
-                                <View style={[styles.emptyIconContainer, { backgroundColor: `${ROSE_RGBA}0.1)`, borderColor: `${ROSE_RGBA}0.2)` }]}>
-                                    <Ionicons name="checkmark-circle-outline" size={48} color={ROSE} />
+                                <View style={[styles.emptyIconContainer, { backgroundColor: `${PRIMARY_RGBA}0.1)`, borderColor: `${PRIMARY_RGBA}0.2)` }]}>
+                                    <Ionicons name="checkmark-circle-outline" size={48} color={PRIMARY} />
                                 </View>
 
                                 {/* Description */}
@@ -673,7 +870,30 @@ export default function MatchesScreen() {
                                 </Text>
 
                                 <GlassButton
-                                    onPress={() => router.push("/(app)/swipe")}
+                                    onPress={() => router.push("/")}
+                                    style={{ marginTop: spacing.lg }}
+                                >
+                                    Keep Swiping
+                                </GlassButton>
+                            </Animated.View>
+                        ) : currentView === 'their_turn' ? (
+                            <Animated.View
+                                entering={FadeInUp.duration(600).springify()}
+                                style={styles.emptyContent}
+                            >
+                                {/* Their Turn icon */}
+                                <View style={[styles.emptyIconContainer, { backgroundColor: `${SECONDARY_RGBA}0.1)`, borderColor: `${SECONDARY_RGBA}0.2)` }]}>
+                                    <Ionicons name="time-outline" size={48} color={SECONDARY} />
+                                </View>
+
+                                {/* Description */}
+                                <Text style={styles.emptyTitle}>Waiting for Partner</Text>
+                                <Text style={styles.emptyDescription}>
+                                    All questions you've answered have been matched! Keep swiping to give your partner more to respond to.
+                                </Text>
+
+                                <GlassButton
+                                    onPress={() => router.push("/")}
                                     style={{ marginTop: spacing.lg }}
                                 >
                                     Keep Swiping
@@ -692,15 +912,15 @@ export default function MatchesScreen() {
                                 {/* Feature hints */}
                                 <View style={styles.emptyFeatures}>
                                     <View style={styles.emptyFeatureItem}>
-                                        <Ionicons name="heart" size={16} color={ACCENT} />
+                                        <Ionicons name="heart" size={16} color={PRIMARY} />
                                         <Text style={styles.emptyFeatureText}>Swipe right for yes</Text>
                                     </View>
                                     <View style={styles.emptyFeatureItem}>
-                                        <Ionicons name="sparkles" size={16} color={ACCENT} />
+                                        <Ionicons name="sparkles" size={16} color={PRIMARY} />
                                         <Text style={styles.emptyFeatureText}>Match when you both agree</Text>
                                     </View>
                                     <View style={styles.emptyFeatureItem}>
-                                        <Ionicons name="chatbubbles-outline" size={16} color={ACCENT} />
+                                        <Ionicons name="chatbubbles-outline" size={16} color={PRIMARY} />
                                         <Text style={styles.emptyFeatureText}>Chat about your matches</Text>
                                     </View>
                                 </View>
@@ -709,7 +929,7 @@ export default function MatchesScreen() {
                                 <Text style={styles.emptyTeaser}>Your first match is just a swipe away</Text>
 
                                 <GlassButton
-                                    onPress={() => router.push("/(app)/swipe")}
+                                    onPress={() => router.push("/")}
                                     style={{ marginTop: spacing.lg }}
                                 >
                                     Start Swiping
@@ -757,47 +977,33 @@ const styles = StyleSheet.create({
         height: '100%',
         borderRadius: 150,
     },
-    // Fixed Nav Bar
-    navBar: {
+    stickyHeader: {
         position: "absolute",
         top: 0,
         left: 0,
         right: 0,
-        height: STATUS_BAR_HEIGHT + NAV_BAR_HEIGHT,
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "center",
-        paddingTop: STATUS_BAR_HEIGHT - 10,
-        paddingHorizontal: spacing.md,
-        zIndex: 100,
-    },
-    navBarBackground: {
-        ...StyleSheet.absoluteFillObject,
-        borderBottomWidth: 1,
-        borderBottomColor: 'rgba(212, 175, 55, 0.15)', // Gold tint for matches
+        zIndex: 10,
         overflow: "hidden",
     },
-    navBarTitle: {
-        ...typography.headline,
-        color: colors.text,
-        textAlign: "center",
+    stickyHeaderWide: {
+        left: "50%",
+        right: "auto",
+        width: MAX_CONTENT_WIDTH,
+        transform: [{ translateX: -MAX_CONTENT_WIDTH / 2 }],
     },
-    navBarButton: {
-        position: 'absolute',
-        right: spacing.md,
-        top: STATUS_BAR_HEIGHT - 5,
-        width: 36,
-        height: 36,
-        borderRadius: 18,
-        backgroundColor: 'rgba(255, 255, 255, 0.08)',
-        justifyContent: 'center',
-        alignItems: 'center',
+    headerActionButton: {
+        width: 32,
+        height: 32,
+        borderRadius: 16,
+        backgroundColor: colors.backgroundLight,
+        justifyContent: "center",
+        alignItems: "center",
         borderWidth: 1,
-        borderColor: 'rgba(255, 255, 255, 0.1)',
+        borderColor: colors.border,
     },
     // Header (Hero)
     header: {
-        paddingTop: STATUS_BAR_HEIGHT + spacing.md,
+        paddingTop: spacing.lg,
         paddingHorizontal: spacing.lg,
         paddingBottom: spacing.lg,
         alignItems: 'center',
@@ -809,12 +1015,13 @@ const styles = StyleSheet.create({
     },
     headerContent: {
         alignItems: 'center',
+        width: '100%',
     },
     headerLabel: {
         ...typography.caption2,
         fontWeight: '600',
         letterSpacing: 3,
-        color: ACCENT,
+        color: PRIMARY,
         marginBottom: spacing.xs,
     },
     headerTitle: {
@@ -822,26 +1029,39 @@ const styles = StyleSheet.create({
         color: colors.text,
         textAlign: 'center',
     },
-    // Filter toggle
+    // Filter toggle - scrollable carousel
+    filterScrollContainer: {
+        flexGrow: 0,
+        marginBottom: spacing.md,
+        alignSelf: 'stretch',
+        marginHorizontal: -(spacing.lg * 2),
+    },
     filterContainer: {
         flexDirection: 'row',
-        backgroundColor: 'rgba(255, 255, 255, 0.05)',
-        borderRadius: radius.lg,
-        padding: 4,
-        marginBottom: spacing.md,
-        borderWidth: 1,
-        borderColor: 'rgba(255, 255, 255, 0.08)',
+        alignItems: 'center',
+        gap: spacing.sm,
+        paddingHorizontal: spacing.lg * 2,
     },
     filterTab: {
         flexDirection: 'row',
         alignItems: 'center',
-        paddingHorizontal: spacing.md,
-        paddingVertical: spacing.sm,
-        borderRadius: radius.md,
+        justifyContent: 'center',
+        paddingHorizontal: spacing.lg,
+        paddingVertical: spacing.sm + 2,
+        borderRadius: radius.full,
         gap: spacing.xs,
+        height: 40,
+        backgroundColor: colors.backgroundLight,
+        borderWidth: 1,
+        borderColor: colors.border,
     },
     filterTabActive: {
-        backgroundColor: `${ACCENT_RGBA}0.15)`,
+        backgroundColor: `${PRIMARY_RGBA}0.15)`,
+        borderColor: `${PRIMARY_RGBA}0.3)`,
+    },
+    filterTabActiveSecondary: {
+        backgroundColor: `${SECONDARY_RGBA}0.15)`,
+        borderColor: `${SECONDARY_RGBA}0.3)`,
     },
     filterTabText: {
         ...typography.caption1,
@@ -849,11 +1069,11 @@ const styles = StyleSheet.create({
         fontWeight: '500',
     },
     filterTabTextActive: {
-        color: ACCENT,
+        color: PRIMARY,
         fontWeight: '600',
     },
     pendingBadge: {
-        backgroundColor: ROSE,
+        backgroundColor: PRIMARY,
         borderRadius: 10,
         minWidth: 18,
         height: 18,
@@ -862,6 +1082,9 @@ const styles = StyleSheet.create({
         alignItems: 'center',
         marginLeft: 2,
     },
+    theirTurnBadge: {
+        backgroundColor: SECONDARY,
+    },
     pendingBadgeText: {
         ...typography.caption2,
         color: colors.text,
@@ -871,24 +1094,23 @@ const styles = StyleSheet.create({
     countBadgePremium: {
         flexDirection: 'row',
         alignItems: 'center',
-        backgroundColor: `${ACCENT_RGBA}0.1)`,
+        backgroundColor: colors.backgroundLight,
         paddingHorizontal: spacing.md,
         paddingVertical: spacing.sm,
         borderRadius: radius.full,
         borderWidth: 1,
-        borderColor: `${ACCENT_RGBA}0.2)`,
+        borderColor: colors.border,
         gap: spacing.xs,
     },
     countTextPremium: {
         ...typography.caption2,
         fontWeight: '600',
         letterSpacing: 2,
-        color: ACCENT,
+        color: PRIMARY,
     },
     // List
     list: {
         padding: spacing.lg,
-        // Remove top padding as header handles it
         paddingTop: 0,
         paddingBottom: Platform.OS === 'ios' ? 120 : 100,
     },
@@ -903,26 +1125,27 @@ const styles = StyleSheet.create({
         borderRadius: radius.lg,
         overflow: 'hidden',
         padding: spacing.md,
+        backgroundColor: colors.backgroundLight,
+        borderWidth: 1,
+        borderColor: colors.border,
+    },
+    matchCardNew: {
+        backgroundColor: `${PRIMARY_RGBA}0.08)`,
+        borderColor: `${PRIMARY_RGBA}0.4)`,
+        borderLeftWidth: 3,
+        borderLeftColor: PRIMARY,
     },
     cardSilkHighlight: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        height: 60,
+        display: 'none',
     },
     cardPremiumBorder: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        borderRadius: radius.lg,
-        borderWidth: 1,
-        borderColor: `${ACCENT_RGBA}0.15)`,
+        display: 'none',
     },
     cardPendingBorder: {
-        borderColor: `${ROSE_RGBA}0.2)`,
+        display: 'none',
+    },
+    cardTheirTurnBorder: {
+        display: 'none',
     },
     matchRow: {
         flexDirection: "row",
@@ -932,20 +1155,24 @@ const styles = StyleSheet.create({
         width: 44,
         height: 44,
         borderRadius: 22,
-        backgroundColor: `${ROSE_RGBA}0.1)`,
+        backgroundColor: colors.background,
         borderWidth: 1,
-        borderColor: `${ROSE_RGBA}0.2)`,
+        borderColor: colors.border,
         justifyContent: "center",
         alignItems: "center",
         marginRight: spacing.md,
     },
     iconContainerYesYes: {
-        backgroundColor: `${ACCENT_RGBA}0.1)`,
-        borderColor: `${ACCENT_RGBA}0.2)`,
+        backgroundColor: `${PRIMARY_RGBA}0.1)`,
+        borderColor: `${PRIMARY_RGBA}0.2)`,
     },
     iconContainerPending: {
-        backgroundColor: `${ROSE_RGBA}0.15)`,
-        borderColor: `${ROSE_RGBA}0.25)`,
+        backgroundColor: `${PRIMARY_RGBA}0.15)`,
+        borderColor: `${PRIMARY_RGBA}0.25)`,
+    },
+    iconContainerTheirTurn: {
+        backgroundColor: `${SECONDARY_RGBA}0.15)`,
+        borderColor: `${SECONDARY_RGBA}0.25)`,
     },
     content: {
         flex: 1,
@@ -968,26 +1195,51 @@ const styles = StyleSheet.create({
         alignItems: "center",
         justifyContent: "space-between",
     },
+    metaLeft: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: spacing.xs,
+    },
+    newBadge: {
+        backgroundColor: PRIMARY,
+        paddingHorizontal: spacing.xs + 2,
+        paddingVertical: 2,
+        borderRadius: radius.xs,
+    },
+    newBadgeText: {
+        ...typography.caption2,
+        color: colors.text,
+        fontWeight: "700",
+        fontSize: 9,
+        letterSpacing: 0.5,
+    },
     tagPremium: {
-        backgroundColor: `${ROSE_RGBA}0.1)`,
+        backgroundColor: colors.background,
         paddingHorizontal: spacing.sm,
         paddingVertical: 3,
         borderRadius: radius.sm,
         borderWidth: 1,
-        borderColor: `${ROSE_RGBA}0.15)`,
+        borderColor: colors.border,
     },
     tagPremiumHighlight: {
-        backgroundColor: `${ACCENT_RGBA}0.1)`,
-        borderColor: `${ACCENT_RGBA}0.2)`,
+        backgroundColor: `${PRIMARY_RGBA}0.1)`,
+        borderColor: `${PRIMARY_RGBA}0.2)`,
     },
     tagTextPremium: {
         ...typography.caption2,
-        color: ROSE,
+        color: SECONDARY,
         fontWeight: "600",
         letterSpacing: 1,
     },
     tagTextPremiumHighlight: {
-        color: ACCENT,
+        color: PRIMARY,
+    },
+    tagTheirTurn: {
+        backgroundColor: `${SECONDARY_RGBA}0.1)`,
+        borderColor: `${SECONDARY_RGBA}0.2)`,
+    },
+    tagTextTheirTurn: {
+        color: SECONDARY,
     },
     datePremium: {
         ...typography.caption2,
@@ -1004,7 +1256,7 @@ const styles = StyleSheet.create({
         width: 22,
         height: 22,
         borderRadius: 11,
-        backgroundColor: ACCENT,
+        backgroundColor: PRIMARY,
         justifyContent: 'center',
         alignItems: 'center',
     },
@@ -1012,12 +1264,16 @@ const styles = StyleSheet.create({
         width: 28,
         height: 28,
         borderRadius: 14,
-        backgroundColor: `${ACCENT_RGBA}0.08)`,
+        backgroundColor: colors.background,
         borderWidth: 1,
-        borderColor: `${ACCENT_RGBA}0.15)`,
+        borderColor: colors.border,
         justifyContent: 'center',
         alignItems: 'center',
     },
+    chevronTheirTurn: {
+        backgroundColor: `${SECONDARY_RGBA}0.1)`,
+        borderColor: `${SECONDARY_RGBA}0.2)`,
+    },
     // Premium Empty State
     emptyContent: {
         width: '100%',
@@ -1029,9 +1285,9 @@ const styles = StyleSheet.create({
         width: 80,
         height: 80,
         borderRadius: 40,
-        backgroundColor: `${ACCENT_RGBA}0.1)`,
+        backgroundColor: colors.backgroundLight,
         borderWidth: 1,
-        borderColor: `${ACCENT_RGBA}0.2)`,
+        borderColor: colors.border,
         justifyContent: 'center',
         alignItems: 'center',
         marginBottom: spacing.lg,
@@ -1073,7 +1329,6 @@ const styles = StyleSheet.create({
         alignItems: "center",
         justifyContent: "center",
     },
-    // Pairing gate styles
     pairingGateContainer: {
         flex: 1,
         justifyContent: 'center',
@@ -1090,9 +1345,9 @@ const styles = StyleSheet.create({
         width: 80,
         height: 80,
         borderRadius: 40,
-        backgroundColor: `${ROSE_RGBA}0.1)`,
+        backgroundColor: `${PRIMARY_RGBA}0.1)`,
         borderWidth: 1,
-        borderColor: `${ROSE_RGBA}0.2)`,
+        borderColor: `${PRIMARY_RGBA}0.2)`,
         justifyContent: 'center',
         alignItems: 'center',
         marginBottom: spacing.lg,
@@ -1101,7 +1356,7 @@ const styles = StyleSheet.create({
         ...typography.caption2,
         fontWeight: '600',
         letterSpacing: 3,
-        color: ROSE,
+        color: PRIMARY,
         marginBottom: spacing.xs,
     },
     pairingGateTitle: {
@@ -1111,19 +1366,19 @@ const styles = StyleSheet.create({
         marginBottom: spacing.sm,
     },
     pairingGateBadge: {
-        backgroundColor: `${ROSE_RGBA}0.1)`,
+        backgroundColor: `${PRIMARY_RGBA}0.1)`,
         paddingHorizontal: spacing.md,
         paddingVertical: spacing.sm,
         borderRadius: radius.full,
         borderWidth: 1,
-        borderColor: `${ROSE_RGBA}0.2)`,
+        borderColor: `${PRIMARY_RGBA}0.2)`,
         marginBottom: spacing.lg,
     },
     pairingGateBadgeText: {
         ...typography.caption2,
         fontWeight: '600',
         letterSpacing: 2,
-        color: ROSE,
+        color: PRIMARY,
     },
     pairingGateDescription: {
         ...typography.body,
@@ -1152,4 +1407,46 @@ const styles = StyleSheet.create({
         color: colors.textTertiary,
         textAlign: 'center',
     },
+    // Nudge button styles
+    nudgeContainer: {
+        marginTop: spacing.md,
+        alignItems: 'center',
+    },
+    nudgeButton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: spacing.lg,
+        paddingVertical: spacing.sm + 2,
+        borderRadius: radius.full,
+        gap: spacing.xs,
+        backgroundColor: `${SECONDARY_RGBA}0.15)`,
+        borderWidth: 1,
+        borderColor: `${SECONDARY_RGBA}0.3)`,
+        minWidth: 140,
+    },
+    nudgeButtonDisabled: {
+        backgroundColor: colors.backgroundLight,
+        borderColor: colors.border,
+    },
+    nudgeButtonText: {
+        ...typography.caption1,
+        color: SECONDARY,
+        fontWeight: '600',
+    },
+    nudgeButtonTextDisabled: {
+        color: colors.textTertiary,
+    },
+    nudgeFeedback: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: spacing.xs,
+        paddingHorizontal: spacing.md,
+        paddingVertical: spacing.sm,
+    },
+    nudgeFeedbackText: {
+        ...typography.caption1,
+        color: colors.success,
+        fontWeight: '500',
+    },
 });
diff --git a/apps/mobile/app/(app)/my-answers.tsx b/apps/mobile/app/(app)/my-answers.tsx
index e953169..0b849a0 100644
--- a/apps/mobile/app/(app)/my-answers.tsx
+++ b/apps/mobile/app/(app)/my-answers.tsx
@@ -48,7 +48,7 @@ type GroupByOption = "pack" | "date" | "answer";
 
 export default function MyAnswersScreen() {
     const { responses, isLoading, isLoadingMore, hasMore, groupBy, dateSortOrder, fetchResponses, setGroupBy, toggleDateSortOrder, totalCount } = useResponsesStore();
-    const { user } = useAuthStore();
+    const { user, partner } = useAuthStore();
     const router = useRouter();
     const params = useLocalSearchParams();
     const { width } = useWindowDimensions();
@@ -152,6 +152,9 @@ export default function MyAnswersScreen() {
             index={index}
             onEditPress={() => handleEditPress(item)}
             onChatPress={item.match_id ? () => router.push(`/chat/${item.match_id}`) : undefined}
+            viewerId={user?.id}
+            viewerName={user?.name}
+            partnerName={partner?.name}
         />
     );
 
@@ -210,7 +213,7 @@ export default function MyAnswersScreen() {
 
     return (
         <GradientBackground>
-            {/* Ambient Orbs */}
+            {/* Ambient Orbs - Commented out for flat look
             <Animated.View
                 style={[styles.ambientOrb, styles.orbTopRight, orbStyle1]}
                 pointerEvents="none"
@@ -233,16 +236,13 @@ export default function MyAnswersScreen() {
                     end={{ x: 0, y: 0 }}
                 />
             </Animated.View>
+            */}
 
             <View style={styles.container}>
                 {/* Fixed Nav Bar */}
                 <View style={styles.navBar}>
                     <Animated.View style={[styles.navBarBackground, navBarBackgroundStyle]}>
-                        {Platform.OS === "ios" ? (
-                            <BlurView intensity={80} tint="dark" style={StyleSheet.absoluteFill} />
-                        ) : (
-                            <View style={[StyleSheet.absoluteFill, { backgroundColor: "rgba(13, 13, 26, 0.95)" }]} />
-                        )}
+                        <View style={[StyleSheet.absoluteFill, { backgroundColor: colors.background }]} />
                     </Animated.View>
                     
                     <TouchableOpacity style={styles.navBarBackButton} onPress={handleBack}>
@@ -322,7 +322,7 @@ export default function MyAnswersScreen() {
                                     come back here to review and change your answers anytime.
                                 </Text>
                                 <GlassButton
-                                    onPress={() => router.push("/(app)/swipe")}
+                                    onPress={() => router.push("/")}
                                     style={{ marginTop: spacing.lg }}
                                 >
                                     Start Swiping
@@ -390,7 +390,8 @@ const styles = StyleSheet.create({
     navBarBackground: {
         ...StyleSheet.absoluteFillObject,
         borderBottomWidth: 1,
-        borderBottomColor: 'rgba(212, 175, 55, 0.15)', // Gold tint
+        borderBottomColor: colors.border,
+        backgroundColor: colors.background,
         overflow: "hidden",
     },
     navBarBackButton: {
@@ -401,12 +402,52 @@ const styles = StyleSheet.create({
         width: 36,
         height: 36,
         borderRadius: 18,
-        backgroundColor: "rgba(255, 255, 255, 0.08)",
+        backgroundColor: colors.backgroundLight,
         justifyContent: "center",
         alignItems: "center",
         borderWidth: 1,
-        borderColor: "rgba(255, 255, 255, 0.1)",
+        borderColor: colors.border,
     },
+    // ...
+    countBadgePremium: {
+        flexDirection: "row",
+        alignItems: "center",
+        backgroundColor: colors.backgroundLight,
+        paddingHorizontal: spacing.md,
+        paddingVertical: spacing.sm,
+        borderRadius: radius.full,
+        borderWidth: 1,
+        borderColor: colors.border,
+        gap: spacing.xs,
+    },
+    // ...
+    groupByButton: {
+        flexDirection: "row",
+        alignItems: "center",
+        paddingHorizontal: spacing.md,
+        paddingVertical: spacing.sm,
+        borderRadius: radius.full,
+        backgroundColor: colors.backgroundLight,
+        borderWidth: 1,
+        borderColor: colors.border,
+    },
+    groupByButtonActive: {
+        backgroundColor: colors.background,
+        borderColor: colors.primary,
+    },
+    // ...
+    emptyIcon: {
+        width: 80,
+        height: 80,
+        borderRadius: 40,
+        backgroundColor: colors.backgroundLight,
+        justifyContent: "center",
+        alignItems: "center",
+        marginBottom: spacing.lg,
+        borderWidth: 1,
+        borderColor: colors.border,
+    },
+
     navBarTitle: {
         ...typography.headline,
         color: colors.text,
@@ -439,17 +480,7 @@ const styles = StyleSheet.create({
         color: colors.text,
         textAlign: "center",
     },
-    countBadgePremium: {
-        flexDirection: "row",
-        alignItems: "center",
-        backgroundColor: `${ACCENT_RGBA}0.1)`,
-        paddingHorizontal: spacing.md,
-        paddingVertical: spacing.sm,
-        borderRadius: radius.full,
-        borderWidth: 1,
-        borderColor: `${ACCENT_RGBA}0.2)`,
-        gap: spacing.xs,
-    },
+
     countTextPremium: {
         ...typography.caption2,
         fontWeight: "600",
@@ -463,20 +494,8 @@ const styles = StyleSheet.create({
         gap: spacing.sm,
         marginTop: spacing.md,
     },
-    groupByButton: {
-        flexDirection: "row",
-        alignItems: "center",
-        paddingHorizontal: spacing.md,
-        paddingVertical: spacing.sm,
-        borderRadius: radius.full,
-        backgroundColor: "rgba(255, 255, 255, 0.05)",
-        borderWidth: 1,
-        borderColor: "rgba(255, 255, 255, 0.1)",
-    },
-    groupByButtonActive: {
-        backgroundColor: `${ACCENT_RGBA}0.15)`,
-        borderColor: `${ACCENT_RGBA}0.3)`,
-    },
+
+
     groupByText: {
         ...typography.caption1,
         color: colors.textSecondary,
@@ -518,15 +537,7 @@ const styles = StyleSheet.create({
         paddingHorizontal: spacing.md,
         paddingVertical: spacing.xxl,
     },
-    emptyIcon: {
-        width: 80,
-        height: 80,
-        borderRadius: 40,
-        backgroundColor: `${ACCENT_RGBA}0.1)`,
-        justifyContent: "center",
-        alignItems: "center",
-        marginBottom: spacing.lg,
-    },
+
     emptyTitle: {
         ...typography.title2,
         color: colors.text,
diff --git a/apps/mobile/app/(app)/onboarding.tsx b/apps/mobile/app/(app)/onboarding.tsx
index 9a63e1e..7b38faf 100644
--- a/apps/mobile/app/(app)/onboarding.tsx
+++ b/apps/mobile/app/(app)/onboarding.tsx
@@ -25,13 +25,16 @@ import { GradientBackground } from '../../src/components/ui/GradientBackground';
 import { GlassCard } from '../../src/components/ui/GlassCard';
 import { GlassButton } from '../../src/components/ui/GlassButton';
 import { GlassToggle } from '../../src/components/ui/GlassToggle';
+import { Paywall } from '../../src/components/paywall';
 import { colors, gradients, spacing, typography, radius, shadows } from '../../src/theme';
 import { useAuthStore } from '../../src/store';
 import { supabase } from '../../src/lib/supabase';
 import { getProfileError } from '../../src/lib/errors';
 import { registerForPushNotificationsAsync, savePushToken } from '../../src/lib/notifications';
 import { Events } from '../../src/lib/analytics';
+import { hasSeenOnboardingPaywall, markOnboardingPaywallSeen } from '../../src/lib/onboardingPaywallSeen';
 import { useAvatarPicker } from '../../src/hooks/useAvatarPicker';
+import { REQUIRED_ONBOARDING_VERSION, ONBOARDING_OFFERING_ID } from '../../src/constants/onboarding';
 import type { Gender } from '../../src/types';
 
 const GENDER_OPTIONS: { value: Gender; label: string; icon: string }[] = [
@@ -69,7 +72,9 @@ export default function OnboardingScreen() {
     const [hideNsfw, setHideNsfw] = useState(user?.hide_nsfw ?? false);
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState<string | null>(null);
+    const [showPaywall, setShowPaywall] = useState(false);
     const inputRef = useRef<TextInput>(null);
+    const paywallNavigationRef = useRef(false);
 
     const {
         avatarUri,
@@ -187,6 +192,7 @@ export default function OnboardingScreen() {
                 show_explicit_content: showExplicitContent,
                 hide_nsfw: hideNsfw,
                 onboarding_completed: true,
+                onboarding_version: REQUIRED_ONBOARDING_VERSION,
                 updated_at: new Date().toISOString(),
             };
 
@@ -210,6 +216,15 @@ export default function OnboardingScreen() {
             console.log('[Onboarding] User fetched, navigating to home...');
             Events.profileUpdated(updatedFields);
             Events.onboardingComplete();
+            const currentUser = useAuthStore.getState().user;
+            if (currentUser?.id && !currentUser.is_premium) {
+                const hasSeenPaywall = await hasSeenOnboardingPaywall(currentUser.id);
+                if (!hasSeenPaywall) {
+                    paywallNavigationRef.current = true;
+                    setShowPaywall(true);
+                    return;
+                }
+            }
             router.replace('/');
         } catch (err: any) {
             console.error('Onboarding error:', err);
@@ -219,6 +234,18 @@ export default function OnboardingScreen() {
         }
     };
 
+    const handlePaywallClose = () => {
+        setShowPaywall(false);
+        const currentUser = useAuthStore.getState().user;
+        if (currentUser?.id) {
+            void markOnboardingPaywallSeen(currentUser.id);
+        }
+        if (paywallNavigationRef.current) {
+            paywallNavigationRef.current = false;
+            router.replace('/');
+        }
+    };
+
     const renderStage = () => {
         switch (stage) {
             case 'avatar':
@@ -248,12 +275,11 @@ export default function OnboardingScreen() {
                                     {avatarUri ? (
                                         <Image source={{ uri: avatarUri }} style={styles.avatarImage} />
                                     ) : (
-                                        <LinearGradient
-                                            colors={[colors.glass.background, colors.glass.backgroundLight]}
+                                        <View
                                             style={styles.avatarPlaceholder}
                                         >
                                             <Ionicons name="camera" size={40} color={colors.textSecondary} />
-                                        </LinearGradient>
+                                        </View>
                                     )}
                                     <View style={styles.avatarBadge}>
                                         <Ionicons name={avatarUri ? "pencil" : "add"} size={16} color={colors.text} />
@@ -662,6 +688,12 @@ export default function OnboardingScreen() {
                     {renderStage()}
                 </ScrollView>
             </KeyboardAvoidingView>
+
+            <Paywall
+                visible={showPaywall}
+                onClose={handlePaywallClose}
+                offeringId={ONBOARDING_OFFERING_ID}
+            />
         </GradientBackground>
     );
 }
@@ -685,9 +717,92 @@ const styles = StyleSheet.create({
         width: 40,
         height: 40,
         borderRadius: 20,
-        backgroundColor: colors.glass.background,
+        backgroundColor: colors.backgroundLight,
         alignItems: 'center',
         justifyContent: 'center',
+        borderWidth: 1,
+        borderColor: colors.border,
+    },
+    // ...
+    progressDot: {
+        width: 8,
+        height: 8,
+        borderRadius: 4,
+        backgroundColor: colors.border,
+    },
+    // ...
+    avatarPlaceholder: {
+        width: 120,
+        height: 120,
+        borderRadius: 60,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderWidth: 2,
+        borderColor: colors.border,
+        borderStyle: 'dashed',
+        backgroundColor: colors.backgroundLight,
+    },
+    // ...
+    inputContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: colors.background, // Flat background
+        borderRadius: radius.md,
+        borderWidth: 1,
+        borderColor: colors.border,
+        paddingHorizontal: spacing.md,
+    },
+    // ...
+    genderOption: {
+        width: '48%',
+        alignItems: 'center',
+        backgroundColor: colors.backgroundLight,
+        borderRadius: radius.lg,
+        borderWidth: 2,
+        borderColor: colors.border,
+        paddingVertical: spacing.lg,
+        paddingHorizontal: spacing.md,
+        gap: spacing.sm,
+    },
+    // ...
+    purposeOption: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: colors.backgroundLight,
+        borderRadius: radius.lg,
+        borderWidth: 2,
+        borderColor: colors.border,
+        padding: spacing.md,
+    },
+    // ...
+    purposeIcon: {
+        width: 44,
+        height: 44,
+        borderRadius: 22,
+        backgroundColor: colors.background,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginRight: spacing.md,
+        borderWidth: 1,
+        borderColor: colors.border,
+    },
+    // ...
+    radioOuter: {
+        width: 24,
+        height: 24,
+        borderRadius: 12,
+        borderWidth: 2,
+        borderColor: colors.border,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    // ...
+    notificationFeature: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: spacing.md,
+        borderBottomWidth: 1,
+        borderBottomColor: colors.border,
     },
     backButtonPlaceholder: {
         width: 40,
@@ -697,12 +812,7 @@ const styles = StyleSheet.create({
         justifyContent: 'center',
         gap: spacing.sm,
     },
-    progressDot: {
-        width: 8,
-        height: 8,
-        borderRadius: 4,
-        backgroundColor: colors.glass.border,
-    },
+
     progressDotActive: {
         backgroundColor: colors.primary,
         width: 24,
@@ -747,16 +857,7 @@ const styles = StyleSheet.create({
         borderWidth: 3,
         borderColor: colors.primary,
     },
-    avatarPlaceholder: {
-        width: 120,
-        height: 120,
-        borderRadius: 60,
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderWidth: 2,
-        borderColor: colors.glass.border,
-        borderStyle: 'dashed',
-    },
+
     avatarBadge: {
         position: 'absolute',
         bottom: 4,
@@ -800,15 +901,7 @@ const styles = StyleSheet.create({
         color: colors.text,
         marginBottom: spacing.md,
     },
-    inputContainer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        backgroundColor: colors.glass.background,
-        borderRadius: radius.md,
-        borderWidth: 1,
-        borderColor: colors.glass.border,
-        paddingHorizontal: spacing.md,
-    },
+
     inputIcon: {
         marginRight: spacing.sm,
     },
@@ -823,17 +916,7 @@ const styles = StyleSheet.create({
         flexWrap: 'wrap',
         gap: spacing.sm,
     },
-    genderOption: {
-        width: '48%',
-        alignItems: 'center',
-        backgroundColor: colors.glass.background,
-        borderRadius: radius.lg,
-        borderWidth: 2,
-        borderColor: colors.glass.border,
-        paddingVertical: spacing.lg,
-        paddingHorizontal: spacing.md,
-        gap: spacing.sm,
-    },
+
     genderOptionSelected: {
         borderColor: colors.primary,
         backgroundColor: colors.primaryLight,
@@ -850,28 +933,12 @@ const styles = StyleSheet.create({
     purposeList: {
         gap: spacing.sm,
     },
-    purposeOption: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        backgroundColor: colors.glass.background,
-        borderRadius: radius.lg,
-        borderWidth: 2,
-        borderColor: colors.glass.border,
-        padding: spacing.md,
-    },
+
     purposeOptionSelected: {
         borderColor: colors.primary,
         backgroundColor: colors.primaryLight,
     },
-    purposeIcon: {
-        width: 44,
-        height: 44,
-        borderRadius: 22,
-        backgroundColor: colors.glass.background,
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginRight: spacing.md,
-    },
+
     purposeIconSelected: {
         backgroundColor: colors.primaryLight,
     },
@@ -921,15 +988,7 @@ const styles = StyleSheet.create({
         textAlign: 'center',
         marginTop: spacing.lg,
     },
-    radioOuter: {
-        width: 24,
-        height: 24,
-        borderRadius: 12,
-        borderWidth: 2,
-        borderColor: colors.glass.border,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
+
     radioOuterSelected: {
         borderColor: colors.primary,
     },
@@ -956,13 +1015,7 @@ const styles = StyleSheet.create({
     footer: {
         marginTop: 'auto',
     },
-    notificationFeature: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingVertical: spacing.md,
-        borderBottomWidth: 1,
-        borderBottomColor: colors.glass.border,
-    },
+
     notificationFeatureLast: {
         borderBottomWidth: 0,
     },
diff --git a/apps/mobile/app/(app)/packs/_layout.tsx b/apps/mobile/app/(app)/packs/_layout.tsx
deleted file mode 100644
index 8a6bdeb..0000000
--- a/apps/mobile/app/(app)/packs/_layout.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Stack } from "expo-router";
-import { colors } from "../../../src/theme";
-
-export default function PacksLayout() {
-    return (
-        <Stack
-            screenOptions={{
-                headerShown: false,
-                contentStyle: { backgroundColor: colors.background },
-                animation: "fade",
-                animationDuration: 150,
-            }}
-        />
-    );
-}
diff --git a/apps/mobile/app/(app)/packs/index.tsx b/apps/mobile/app/(app)/packs/index.tsx
deleted file mode 100644
index e193268..0000000
--- a/apps/mobile/app/(app)/packs/index.tsx
+++ /dev/null
@@ -1,298 +0,0 @@
-import { View, Text, StyleSheet, Pressable, Platform } from "react-native";
-import { Ionicons } from "@expo/vector-icons";
-import { router } from "expo-router";
-import { useEffect } from "react";
-import Animated, { FadeInDown } from "react-native-reanimated";
-import { LinearGradient } from "expo-linear-gradient";
-import { GradientBackground } from "../../../src/components/ui";
-import { usePacksStore } from "../../../src/store";
-import { colors, spacing, radius, typography, shadows } from "../../../src/theme";
-
-interface PackTypeCard {
-    id: string;
-    title: string;
-    description: string;
-    icon: keyof typeof Ionicons.glyphMap;
-    color: string;
-    colorRgba: string;
-    gradient: [string, string];
-    comingSoon: boolean;
-    route?: string;
-}
-
-const PACK_TYPES: PackTypeCard[] = [
-    {
-        id: "questions",
-        title: "Question Packs",
-        description: "Explore intimate questions together and discover what you both want",
-        icon: "layers",
-        color: colors.primary,
-        colorRgba: "rgba(233, 69, 96, ",
-        gradient: ["rgba(233, 69, 96, 0.25)", "rgba(155, 89, 182, 0.25)"],
-        comingSoon: false,
-        route: "/(app)/packs/questions",
-    },
-    {
-        id: "dares",
-        title: "Dare Packs",
-        description: "Spice things up with exciting dares for adventurous couples",
-        icon: "flash",
-        color: colors.premium.gold,
-        colorRgba: "rgba(212, 175, 55, ",
-        gradient: ["rgba(212, 175, 55, 0.25)", "rgba(184, 134, 11, 0.25)"],
-        comingSoon: true,
-        route: "/(app)/dares",
-    },
-    {
-        id: "quiz",
-        title: "Quiz Packs",
-        description: "Test how well you know each other with fun couple quizzes",
-        icon: "help-circle",
-        color: colors.premium.rose,
-        colorRgba: "rgba(232, 164, 174, ",
-        gradient: ["rgba(232, 164, 174, 0.25)", "rgba(212, 145, 155, 0.25)"],
-        comingSoon: true,
-        route: "/(app)/quiz",
-    },
-];
-
-export default function PackTypeSelection() {
-    const { fetchPacks } = usePacksStore();
-
-    // Prefetch packs data so it's ready when navigating to questions
-    useEffect(() => {
-        fetchPacks();
-    }, []);
-
-    const handlePackTypePress = (packType: PackTypeCard) => {
-        if (packType.route) {
-            router.push(packType.route as any);
-        }
-    };
-
-    return (
-        <GradientBackground>
-            <View style={styles.container}>
-                {/* Header */}
-                <Animated.View
-                    entering={FadeInDown.duration(600).springify()}
-                    style={styles.header}
-                >
-                    <Text style={styles.label}>EXPLORE</Text>
-                    <Text style={styles.title}>Content Packs</Text>
-
-                    {/* Decorative Separator */}
-                    <View style={styles.separator}>
-                        <View style={styles.separatorLine} />
-                        <View style={styles.separatorDiamond} />
-                        <View style={styles.separatorLine} />
-                    </View>
-
-                    <Text style={styles.subtitle}>
-                        Choose a pack type to explore
-                    </Text>
-                </Animated.View>
-
-                {/* Pack Type Cards */}
-                <View style={styles.cardsContainer}>
-                    {PACK_TYPES.map((packType, index) => (
-                        <Animated.View
-                            key={packType.id}
-                            entering={FadeInDown.delay(100 + index * 100).duration(500).springify()}
-                        >
-                            <Pressable
-                                onPress={() => handlePackTypePress(packType)}
-                                style={({ pressed }) => [
-                                    styles.card,
-                                    pressed && !packType.comingSoon && styles.cardPressed,
-                                    packType.comingSoon && styles.cardDisabled,
-                                ]}
-                            >
-                                <LinearGradient
-                                    colors={packType.gradient as [string, string]}
-                                    start={{ x: 0, y: 0 }}
-                                    end={{ x: 1, y: 1 }}
-                                    style={styles.cardGradient}
-                                >
-                                    {/* Icon Circle */}
-                                    <View
-                                        style={[
-                                            styles.iconCircle,
-                                            {
-                                                backgroundColor: `${packType.colorRgba}0.15)`,
-                                                borderColor: `${packType.colorRgba}0.3)`,
-                                            },
-                                        ]}
-                                    >
-                                        <Ionicons
-                                            name={packType.icon}
-                                            size={32}
-                                            color={packType.comingSoon ? colors.textTertiary : packType.color}
-                                        />
-                                    </View>
-
-                                    {/* Content */}
-                                    <View style={styles.cardContent}>
-                                        <View style={styles.cardTitleRow}>
-                                            <Text
-                                                style={[
-                                                    styles.cardTitle,
-                                                    packType.comingSoon && styles.cardTitleDisabled,
-                                                ]}
-                                            >
-                                                {packType.title}
-                                            </Text>
-                                            {packType.comingSoon && (
-                                                <View style={styles.comingSoonBadge}>
-                                                    <Text style={styles.comingSoonText}>Coming Soon</Text>
-                                                </View>
-                                            )}
-                                        </View>
-                                        <Text
-                                            style={[
-                                                styles.cardDescription,
-                                                packType.comingSoon && styles.cardDescriptionDisabled,
-                                            ]}
-                                        >
-                                            {packType.description}
-                                        </Text>
-                                    </View>
-
-                                    {/* Arrow */}
-                                    {!packType.comingSoon && (
-                                        <Ionicons
-                                            name="chevron-forward"
-                                            size={24}
-                                            color={colors.textSecondary}
-                                        />
-                                    )}
-                                </LinearGradient>
-                            </Pressable>
-                        </Animated.View>
-                    ))}
-                </View>
-            </View>
-        </GradientBackground>
-    );
-}
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-    },
-    header: {
-        paddingTop: 60,
-        paddingHorizontal: spacing.lg,
-        paddingBottom: spacing.lg,
-        alignItems: "center",
-    },
-    label: {
-        ...typography.caption1,
-        fontWeight: "600",
-        letterSpacing: 3,
-        color: colors.primary,
-        textAlign: "center",
-        marginBottom: spacing.xs,
-    },
-    title: {
-        ...typography.title1,
-        color: colors.text,
-        textAlign: "center",
-    },
-    separator: {
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "center",
-        marginVertical: spacing.md,
-        width: 140,
-    },
-    separatorLine: {
-        flex: 1,
-        height: 1,
-        backgroundColor: "rgba(233, 69, 96, 0.3)",
-    },
-    separatorDiamond: {
-        width: 6,
-        height: 6,
-        backgroundColor: colors.primary,
-        transform: [{ rotate: "45deg" }],
-        marginHorizontal: spacing.md,
-        opacity: 0.6,
-    },
-    subtitle: {
-        ...typography.body,
-        color: colors.textSecondary,
-        textAlign: "center",
-    },
-    cardsContainer: {
-        paddingHorizontal: spacing.lg,
-        gap: spacing.md,
-    },
-    card: {
-        borderRadius: radius.lg,
-        overflow: "hidden",
-        borderWidth: 1,
-        borderColor: colors.glass.border,
-        ...shadows.md,
-    },
-    cardPressed: {
-        opacity: 0.9,
-        transform: [{ scale: 0.98 }],
-    },
-    cardDisabled: {
-        opacity: 0.6,
-    },
-    cardGradient: {
-        flexDirection: "row",
-        alignItems: "center",
-        padding: spacing.lg,
-        gap: spacing.md,
-    },
-    iconCircle: {
-        width: 64,
-        height: 64,
-        borderRadius: 32,
-        justifyContent: "center",
-        alignItems: "center",
-        borderWidth: 1,
-    },
-    cardContent: {
-        flex: 1,
-    },
-    cardTitleRow: {
-        flexDirection: "row",
-        alignItems: "center",
-        gap: spacing.sm,
-        marginBottom: spacing.xs,
-    },
-    cardTitle: {
-        ...typography.title3,
-        color: colors.text,
-    },
-    cardTitleDisabled: {
-        color: colors.textSecondary,
-    },
-    cardDescription: {
-        ...typography.subhead,
-        color: colors.textSecondary,
-        lineHeight: 20,
-    },
-    cardDescriptionDisabled: {
-        color: colors.textTertiary,
-    },
-    comingSoonBadge: {
-        backgroundColor: "rgba(255, 255, 255, 0.1)",
-        paddingHorizontal: spacing.sm,
-        paddingVertical: 2,
-        borderRadius: radius.full,
-        borderWidth: 1,
-        borderColor: "rgba(255, 255, 255, 0.15)",
-    },
-    comingSoonText: {
-        ...typography.caption2,
-        color: colors.textTertiary,
-        fontWeight: "500",
-        textTransform: "uppercase",
-        letterSpacing: 0.5,
-    },
-});
diff --git a/apps/mobile/app/(app)/packs/questions.tsx b/apps/mobile/app/(app)/packs/questions.tsx
deleted file mode 100644
index 9423143..0000000
--- a/apps/mobile/app/(app)/packs/questions.tsx
+++ /dev/null
@@ -1,864 +0,0 @@
-import { View, Text, StyleSheet, RefreshControl, Platform, Alert, Pressable } from "react-native";
-import { usePacksStore, useAuthStore, useSubscriptionStore } from "../../../src/store";
-import { Ionicons } from "@expo/vector-icons";
-import { router } from "expo-router";
-import { useMemo, useState, useCallback } from "react";
-import Animated, {
-    FadeIn,
-    FadeOut,
-    useAnimatedStyle,
-    useSharedValue,
-    withTiming,
-    useAnimatedScrollHandler,
-    interpolate,
-    Extrapolation,
-} from "react-native-reanimated";
-import { BlurView } from "expo-blur";
-import { GradientBackground, GlassToggle } from "../../../src/components/ui";
-import { Paywall } from "../../../src/components/paywall";
-import { PackTeaser } from "../../../src/components/PackTeaser";
-import { colors, spacing, radius, typography } from "../../../src/theme";
-import { getPackIconName } from "../../../src/lib/packIcons";
-import type { QuestionPack, Category } from "../../../src/types";
-
-const HEADER_MAX_HEIGHT = 180;
-const HEADER_MIN_HEIGHT = 100;
-const HEADER_SCROLL_DISTANCE = HEADER_MAX_HEIGHT - HEADER_MIN_HEIGHT;
-
-const INTENSITY_LABELS: Record<number, string> = {
-    1: "Light",
-    2: "Mild",
-    3: "Moderate",
-    4: "Spicy",
-    5: "Intense",
-};
-
-const clampIntensity = (value: number) => Math.min(5, Math.max(1, Math.round(value)));
-
-const isValidIntensity = (value?: number | null): value is number =>
-    typeof value === "number" && value >= 1 && value <= 5;
-
-const getIntensityDisplay = (pack: QuestionPack) => {
-    const min = isValidIntensity(pack.min_intensity) ? pack.min_intensity : null;
-    const max = isValidIntensity(pack.max_intensity) ? pack.max_intensity : null;
-    const avg = typeof pack.avg_intensity === "number" ? clampIntensity(pack.avg_intensity) : null;
-    const fallback = avg ?? (pack.is_explicit ? 5 : 2);
-
-    const minCount = min ?? max ?? fallback;
-    const maxCount = max ?? min ?? fallback;
-    const label = minCount === maxCount
-        ? INTENSITY_LABELS[minCount]
-        : `${INTENSITY_LABELS[minCount]} - ${INTENSITY_LABELS[maxCount]}`;
-
-    return { minCount, maxCount, label };
-};
-
-
-interface PackRowProps {
-    pack: QuestionPack;
-    isEnabled: boolean;
-    isPremiumLocked: boolean;
-    isExpanded: boolean;
-    onToggle: () => void;
-    onPress: () => void;
-    onInfoPress: () => void;
-}
-
-function PackRow({ pack, isEnabled, isPremiumLocked, isExpanded, onToggle, onPress, onInfoPress }: PackRowProps) {
-    const questionCount = pack.questions?.[0]?.count || 0;
-    const intensityDisplay = getIntensityDisplay(pack);
-
-
-    return (
-        <Pressable onPress={onPress} style={styles.packRow}>
-            <View style={styles.packRowMain}>
-                <View style={[styles.packIcon, isEnabled && styles.packIconEnabled]}>
-                    <Ionicons
-                        name={getPackIconName(pack.icon)}
-                        size={20}
-                        color={isEnabled ? colors.primary : colors.textSecondary}
-                    />
-                </View>
-
-                <View style={styles.packContent}>
-                    <View style={styles.packTitleRow}>
-                        <Text style={styles.packName} numberOfLines={1}>{pack.name}</Text>
-                        {pack.is_premium && (
-                            <View style={[styles.premiumBadge, isPremiumLocked && styles.premiumBadgeLocked]}>
-                                <Ionicons
-                                    name={isPremiumLocked ? "lock-closed" : "sparkles"}
-                                    size={12}
-                                    color={colors.premium.gold}
-                                />
-                                <Text style={styles.premiumBadgeText}>PRO</Text>
-                            </View>
-                        )}
-                    </View>
-                    <Text style={styles.packMeta}>
-                        {questionCount} {questionCount === 1 ? "question" : "questions"}
-                        {isEnabled && <Text style={styles.packMetaEnabled}> · Enabled</Text>}
-                    </Text>
-                    <View style={styles.packIntensityRow}>
-                        <View style={styles.packIntensityFlames}>
-                            {Array.from({ length: 5 }).map((_, index) => {
-                                const level = index + 1;
-                                const isInRange = level >= intensityDisplay.minCount && level <= intensityDisplay.maxCount;
-
-                                return (
-                                    <Ionicons
-                                        key={`intensity-${pack.id}-${index}`}
-                                        name={isInRange ? "flame" : "flame-outline"}
-                                        size={12}
-                                        color={isInRange ? colors.primary : colors.textTertiary}
-                                    />
-                                );
-                            })}
-                        </View>
-                        <Text style={styles.packIntensityText}>{intensityDisplay.label}</Text>
-                    </View>
-                </View>
-
-
-                <Ionicons
-                    name={isExpanded ? "chevron-up" : "chevron-down"}
-                    size={20}
-                    color={colors.textTertiary}
-                />
-            </View>
-
-            {isExpanded && (
-                <Animated.View
-                    entering={FadeIn.duration(200)}
-                    exiting={FadeOut.duration(150)}
-                    style={styles.packExpanded}
-                >
-                    {pack.description && (
-                        <Text style={styles.packDescription}>{pack.description}</Text>
-                    )}
-                    <View style={styles.packActions}>
-                        <Pressable style={styles.packInfoButton} onPress={onInfoPress}>
-                            <Ionicons name="eye-outline" size={18} color={colors.textSecondary} />
-                            <Text style={styles.packInfoButtonText}>Preview</Text>
-                        </Pressable>
-
-                        <Pressable
-                            style={[
-                                styles.packToggleButton,
-                                isEnabled && styles.packToggleButtonEnabled,
-                                isPremiumLocked && styles.packToggleButtonLocked,
-                            ]}
-                            onPress={onToggle}
-                        >
-                            {isPremiumLocked ? (
-                                <>
-                                    <Ionicons name="lock-closed" size={16} color={colors.premium.gold} />
-                                    <Text style={[styles.packToggleButtonText, styles.packToggleButtonTextLocked]}>
-                                        Unlock
-                                    </Text>
-                                </>
-                            ) : isEnabled ? (
-                                <>
-                                    <Ionicons name="checkmark" size={16} color={colors.primary} />
-                                    <Text style={[styles.packToggleButtonText, styles.packToggleButtonTextEnabled]}>
-                                        Enabled
-                                    </Text>
-                                </>
-                            ) : (
-                                <>
-                                    <Ionicons name="add" size={16} color={colors.text} />
-                                    <Text style={styles.packToggleButtonText}>Enable</Text>
-                                </>
-                            )}
-                        </Pressable>
-                    </View>
-                </Animated.View>
-            )}
-        </Pressable>
-    );
-}
-
-interface CategorySectionProps {
-    category: Category;
-    packs: QuestionPack[];
-    enabledPackIds: string[];
-    hasPremiumAccess: boolean;
-    expandedPackId: string | null;
-    onPackPress: (packId: string) => void;
-    onPackToggle: (pack: QuestionPack) => void;
-    onPackInfo: (pack: QuestionPack) => void;
-}
-
-function CategorySection({
-    category,
-    packs,
-    enabledPackIds,
-    hasPremiumAccess,
-    expandedPackId,
-    onPackPress,
-    onPackToggle,
-    onPackInfo,
-}: CategorySectionProps) {
-    const [isCollapsed, setIsCollapsed] = useState(false);
-    const enabledCount = packs.filter(p => enabledPackIds.includes(p.id)).length;
-
-    const rotateAnim = useSharedValue(0);
-
-    const chevronStyle = useAnimatedStyle(() => ({
-        transform: [{ rotate: `${rotateAnim.value}deg` }],
-    }));
-
-    const handleToggleCollapse = () => {
-        rotateAnim.value = withTiming(isCollapsed ? 0 : -90, { duration: 200 });
-        setIsCollapsed(!isCollapsed);
-    };
-
-    return (
-        <View style={styles.categorySection}>
-            <Pressable style={styles.categoryHeader} onPress={handleToggleCollapse}>
-                <View style={styles.categoryHeaderLeft}>
-                    <Ionicons
-                        name={getPackIconName(category.icon)}
-                        size={16}
-                        color={colors.textSecondary}
-                    />
-                    <Text style={styles.categoryName}>{category.name}</Text>
-                    {enabledCount > 0 && (
-                        <View style={styles.categoryBadge}>
-                            <Text style={styles.categoryBadgeText}>{enabledCount}</Text>
-                        </View>
-                    )}
-                </View>
-                <Animated.View style={chevronStyle}>
-                    <Ionicons name="chevron-down" size={20} color={colors.textSecondary} />
-                </Animated.View>
-            </Pressable>
-
-            {!isCollapsed && (
-                <Animated.View
-                    entering={FadeIn.duration(200)}
-                    exiting={FadeOut.duration(150)}
-                    style={styles.packsList}
-                >
-                    {packs.map((pack) => (
-                        <PackRow
-                            key={pack.id}
-                            pack={pack}
-                            isEnabled={enabledPackIds.includes(pack.id)}
-                            isPremiumLocked={pack.is_premium && !hasPremiumAccess}
-                            isExpanded={expandedPackId === pack.id}
-                            onPress={() => onPackPress(pack.id)}
-                            onToggle={() => onPackToggle(pack)}
-                            onInfoPress={() => onPackInfo(pack)}
-                        />
-                    ))}
-                </Animated.View>
-            )}
-        </View>
-    );
-}
-
-export default function QuestionPacksScreen() {
-    const { packs, categories, enabledPackIds, togglePack, isLoading, fetchPacks, showAllIntensities, setShowAllIntensities } = usePacksStore();
-    const { user, partner } = useAuthStore();
-    const { subscription } = useSubscriptionStore();
-
-    const [expandedPackId, setExpandedPackId] = useState<string | null>(null);
-    const [showPaywall, setShowPaywall] = useState(false);
-    const [showTeaser, setShowTeaser] = useState(false);
-    const [teaserPack, setTeaserPack] = useState<QuestionPack | null>(null);
-
-    const scrollY = useSharedValue(0);
-
-    const scrollHandler = useAnimatedScrollHandler({
-        onScroll: (event) => {
-            scrollY.value = event.contentOffset.y;
-        },
-    });
-
-    const hasPremiumAccess = useMemo(() => {
-        return user?.is_premium || partner?.is_premium || subscription.isProUser;
-    }, [user?.is_premium, partner?.is_premium, subscription.isProUser]);
-
-    const packsByCategory = useMemo(() => {
-        const grouped = new Map<string, QuestionPack[]>();
-        categories.forEach(cat => grouped.set(cat.id, []));
-        grouped.set("uncategorized", []);
-        packs.forEach(pack => {
-            const catId = pack.category_id || "uncategorized";
-            const existing = grouped.get(catId) || [];
-            existing.push(pack);
-            grouped.set(catId, existing);
-        });
-        return grouped;
-    }, [packs, categories]);
-
-    const handlePackPress = useCallback((packId: string) => {
-        setExpandedPackId(current => current === packId ? null : packId);
-    }, []);
-
-    const handlePackToggle = useCallback(async (pack: QuestionPack) => {
-        if (pack.is_premium && !hasPremiumAccess) {
-            setTeaserPack(pack);
-            setShowTeaser(true);
-            return;
-        }
-        const result = await togglePack(pack.id);
-        if (!result.success && result.reason === "no_couple") {
-            Alert.alert(
-                "Pair with Partner",
-                "You need to pair with your partner before you can customise question packs.",
-                [
-                    { text: "Later", style: "cancel" },
-                    { text: "Pair Now", onPress: () => router.push("/pairing") }
-                ]
-            );
-        }
-    }, [hasPremiumAccess, togglePack]);
-
-    const handlePackInfo = useCallback((pack: QuestionPack) => {
-        const isPremiumLocked = pack.is_premium && !hasPremiumAccess;
-        if (isPremiumLocked) {
-            setTeaserPack(pack);
-            setShowTeaser(true);
-        } else {
-            router.push(`/pack/${pack.id}`);
-        }
-    }, [hasPremiumAccess]);
-
-    const handleTeaserUnlock = useCallback(() => {
-        setShowTeaser(false);
-        setShowPaywall(true);
-    }, []);
-
-    const handleTeaserClose = useCallback(() => {
-        setShowTeaser(false);
-        setTeaserPack(null);
-    }, []);
-
-    const handleToggleComfortZone = useCallback((value: boolean) => {
-        setShowAllIntensities(value);
-    }, [setShowAllIntensities]);
-
-    const enabledPackCount = enabledPackIds.length;
-    const totalQuestions = packs
-        .filter(p => enabledPackIds.includes(p.id))
-        .reduce((sum, p) => sum + (p.questions?.[0]?.count || 0), 0);
-
-    // Animated styles for collapsing header
-    const largeHeaderStyle = useAnimatedStyle(() => {
-        const opacity = interpolate(
-            scrollY.value,
-            [0, HEADER_SCROLL_DISTANCE * 0.5],
-            [1, 0],
-            Extrapolation.CLAMP
-        );
-        const translateY = interpolate(
-            scrollY.value,
-            [0, HEADER_SCROLL_DISTANCE],
-            [0, -20],
-            Extrapolation.CLAMP
-        );
-        return { opacity, transform: [{ translateY }] };
-    });
-
-    const compactHeaderStyle = useAnimatedStyle(() => {
-        const opacity = interpolate(
-            scrollY.value,
-            [HEADER_SCROLL_DISTANCE * 0.5, HEADER_SCROLL_DISTANCE],
-            [0, 1],
-            Extrapolation.CLAMP
-        );
-        return { opacity };
-    });
-
-    const navBarBackgroundStyle = useAnimatedStyle(() => {
-        const opacity = interpolate(
-            scrollY.value,
-            [0, HEADER_SCROLL_DISTANCE * 0.8],
-            [0, 1],
-            Extrapolation.CLAMP
-        );
-        return { opacity };
-    });
-
-    return (
-        <GradientBackground>
-            <View style={styles.container}>
-                {/* Fixed Nav Bar */}
-                <View style={styles.navBar}>
-                    {/* Nav bar background with blur */}
-                    <Animated.View style={[styles.navBarBackground, navBarBackgroundStyle]}>
-                        {Platform.OS === "ios" ? (
-                            <BlurView intensity={80} tint="dark" style={StyleSheet.absoluteFill} />
-                        ) : (
-                            <View style={[StyleSheet.absoluteFill, { backgroundColor: "rgba(13, 13, 26, 0.95)" }]} />
-                        )}
-                    </Animated.View>
-
-                    {/* Back button */}
-                    <Pressable
-                        style={styles.backButton}
-                        onPress={() => router.back()}
-                        hitSlop={8}
-                    >
-                        <Ionicons name="chevron-back" size={24} color={colors.text} />
-                    </Pressable>
-
-                    {/* Compact title (fades in on scroll) */}
-                    <Animated.Text style={[styles.navBarTitle, compactHeaderStyle]}>
-                        Question Packs
-                    </Animated.Text>
-
-                    {/* Spacer for alignment */}
-                    <View style={styles.navBarSpacer} />
-                </View>
-
-                {/* Scrollable Content */}
-                <Animated.ScrollView
-                    showsVerticalScrollIndicator={false}
-                    onScroll={scrollHandler}
-                    scrollEventThrottle={16}
-                    refreshControl={
-                        <RefreshControl
-                            refreshing={isLoading}
-                            onRefresh={fetchPacks}
-                            tintColor={colors.primary}
-                            colors={[colors.primary]}
-                            progressViewOffset={HEADER_MAX_HEIGHT}
-                        />
-                    }
-                    contentContainerStyle={styles.scrollContent}
-                >
-                    {/* Large Header (fades out on scroll) */}
-                    <Animated.View style={[styles.largeHeader, largeHeaderStyle]}>
-                        <Text style={styles.label}>COLLECTION</Text>
-                        <Text style={styles.title}>Question Packs</Text>
-
-                        <View style={styles.separator}>
-                            <View style={styles.separatorLine} />
-                            <View style={styles.separatorDiamond} />
-                            <View style={styles.separatorLine} />
-                        </View>
-
-                        <View style={styles.statsBadge}>
-                            <Ionicons name="checkmark-circle" size={14} color={colors.primary} />
-                            <Text style={styles.statsBadgeText}>
-                                {totalQuestions} {totalQuestions === 1 ? "question" : "questions"} from {enabledPackCount} {enabledPackCount === 1 ? "pack" : "packs"}
-                            </Text>
-                        </View>
-
-                        <Pressable
-                            style={styles.comfortZoneToggle}
-                            onPress={() => handleToggleComfortZone(!showAllIntensities)}
-                        >
-                            <View style={styles.comfortZoneToggleLeft}>
-                                <Ionicons
-                                    name={showAllIntensities ? "flame" : "flame-outline"}
-                                    size={16}
-                                    color={showAllIntensities ? colors.primary : colors.textSecondary}
-                                />
-                                <Text style={styles.comfortZoneToggleText}>
-                                    Show all intensities
-                                </Text>
-                            </View>
-                            <GlassToggle
-                                value={showAllIntensities}
-                                onValueChange={handleToggleComfortZone}
-                            />
-                        </Pressable>
-                    </Animated.View>
-
-                    {/* Categories */}
-                    <View style={styles.categoriesContainer}>
-                        {categories.map(category => {
-                            const categoryPacks = packsByCategory.get(category.id) || [];
-                            if (categoryPacks.length === 0) return null;
-
-                            return (
-                                <CategorySection
-                                    key={category.id}
-                                    category={category}
-                                    packs={categoryPacks}
-                                    enabledPackIds={enabledPackIds}
-                                    hasPremiumAccess={hasPremiumAccess}
-                                    expandedPackId={expandedPackId}
-                                    onPackPress={handlePackPress}
-                                    onPackToggle={handlePackToggle}
-                                    onPackInfo={handlePackInfo}
-                                />
-                            );
-                        })}
-
-                        {(packsByCategory.get("uncategorized")?.length || 0) > 0 && (
-                            <CategorySection
-                                category={{
-                                    id: "uncategorized",
-                                    name: "Other",
-                                    description: null,
-                                    icon: "📁",
-                                    color: null,
-                                    sort_order: 999,
-                                    created_at: "",
-                                    is_public: true
-                                }}
-                                packs={packsByCategory.get("uncategorized") || []}
-                                enabledPackIds={enabledPackIds}
-                                hasPremiumAccess={hasPremiumAccess}
-                                expandedPackId={expandedPackId}
-                                onPackPress={handlePackPress}
-                                onPackToggle={handlePackToggle}
-                                onPackInfo={handlePackInfo}
-                            />
-                        )}
-                    </View>
-                </Animated.ScrollView>
-
-                {/* Modals */}
-                {teaserPack && (
-                    <PackTeaser
-                        visible={showTeaser}
-                        packId={teaserPack.id}
-                        packName={teaserPack.name}
-                        packIcon={teaserPack.icon}
-                        onClose={handleTeaserClose}
-                        onUnlock={handleTeaserUnlock}
-                    />
-                )}
-
-                <Paywall
-                    visible={showPaywall}
-                    onClose={() => setShowPaywall(false)}
-                    onSuccess={() => fetchPacks()}
-                />
-            </View>
-        </GradientBackground>
-    );
-}
-
-const NAV_BAR_HEIGHT = 44;
-const STATUS_BAR_HEIGHT = 60; // Match other pages
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-    },
-
-    // Fixed Nav Bar
-    navBar: {
-        position: "absolute",
-        top: 0,
-        left: 0,
-        right: 0,
-        height: STATUS_BAR_HEIGHT + NAV_BAR_HEIGHT,
-        flexDirection: "row",
-        alignItems: "center",
-        paddingTop: STATUS_BAR_HEIGHT - 10,
-        paddingHorizontal: spacing.md,
-        zIndex: 100,
-    },
-    navBarBackground: {
-        ...StyleSheet.absoluteFillObject,
-        borderBottomWidth: 1,
-        borderBottomColor: "rgba(255, 255, 255, 0.1)",
-        overflow: "hidden",
-    },
-    backButton: {
-        width: 40,
-        height: 40,
-        borderRadius: 20,
-        backgroundColor: "rgba(255, 255, 255, 0.1)",
-        justifyContent: "center",
-        alignItems: "center",
-    },
-    navBarTitle: {
-        flex: 1,
-        ...typography.headline,
-        color: colors.text,
-        textAlign: "center",
-        marginRight: 40, // Balance with back button
-    },
-    navBarSpacer: {
-        width: 0,
-    },
-
-    // Large Header
-    largeHeader: {
-        alignItems: "center",
-        paddingBottom: spacing.lg,
-    },
-    label: {
-        ...typography.caption1,
-        fontWeight: "600",
-        letterSpacing: 3,
-        color: colors.primary,
-        textAlign: "center",
-        marginBottom: spacing.xs,
-    },
-    title: {
-        ...typography.title1,
-        color: colors.text,
-        textAlign: "center",
-    },
-    separator: {
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "center",
-        marginVertical: spacing.md,
-        width: 140,
-    },
-    separatorLine: {
-        flex: 1,
-        height: 1,
-        backgroundColor: "rgba(233, 69, 96, 0.3)",
-    },
-    separatorDiamond: {
-        width: 6,
-        height: 6,
-        backgroundColor: colors.primary,
-        transform: [{ rotate: "45deg" }],
-        marginHorizontal: spacing.md,
-        opacity: 0.6,
-    },
-    statsBadge: {
-        flexDirection: "row",
-        alignItems: "center",
-        backgroundColor: "rgba(233, 69, 96, 0.1)",
-        paddingHorizontal: spacing.md,
-        paddingVertical: spacing.sm,
-        borderRadius: radius.full,
-        borderWidth: 1,
-        borderColor: "rgba(233, 69, 96, 0.2)",
-        gap: spacing.sm,
-    },
-    statsBadgeText: {
-        ...typography.caption1,
-        color: colors.textSecondary,
-        fontWeight: "500",
-    },
-    comfortZoneToggle: {
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "space-between",
-        backgroundColor: "rgba(255, 255, 255, 0.05)",
-        paddingHorizontal: spacing.md,
-        paddingVertical: spacing.sm,
-        borderRadius: radius.md,
-        borderWidth: 1,
-        borderColor: colors.glass.border,
-        marginTop: spacing.md,
-        width: "100%",
-        maxWidth: 280,
-    },
-    comfortZoneToggleLeft: {
-        flexDirection: "row",
-        alignItems: "center",
-        gap: spacing.sm,
-    },
-    comfortZoneToggleText: {
-        ...typography.subhead,
-        color: colors.textSecondary,
-        fontWeight: "500",
-    },
-
-    // Scroll Content
-    scrollContent: {
-        paddingTop: 60, // Match other pages
-        paddingBottom: Platform.OS === "ios" ? 120 : 100,
-    },
-    categoriesContainer: {
-        paddingHorizontal: spacing.lg,
-    },
-
-    // Category Section
-    categorySection: {
-        marginBottom: spacing.lg,
-    },
-    categoryHeader: {
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "space-between",
-        paddingVertical: spacing.sm,
-        marginBottom: spacing.xs,
-    },
-    categoryHeaderLeft: {
-        flexDirection: "row",
-        alignItems: "center",
-        gap: spacing.sm,
-    },
-    categoryName: {
-        ...typography.headline,
-        color: colors.text,
-        textTransform: "uppercase",
-        letterSpacing: 1,
-        fontSize: 13,
-    },
-    categoryBadge: {
-        backgroundColor: colors.primary,
-        paddingHorizontal: 8,
-        paddingVertical: 2,
-        borderRadius: 10,
-        minWidth: 20,
-        alignItems: "center",
-    },
-    categoryBadgeText: {
-        ...typography.caption2,
-        color: colors.text,
-        fontWeight: "600",
-    },
-    packsList: {
-        backgroundColor: "rgba(255, 255, 255, 0.03)",
-        borderRadius: radius.lg,
-        borderWidth: 1,
-        borderColor: colors.glass.border,
-        overflow: "hidden",
-    },
-
-    // Pack Row
-    packRow: {
-        borderBottomWidth: 1,
-        borderBottomColor: colors.glass.border,
-    },
-    packRowMain: {
-        flexDirection: "row",
-        alignItems: "center",
-        padding: spacing.md,
-        gap: spacing.md,
-    },
-    packIcon: {
-        width: 44,
-        height: 44,
-        borderRadius: 12,
-        backgroundColor: "rgba(255, 255, 255, 0.05)",
-        justifyContent: "center",
-        alignItems: "center",
-        borderWidth: 1,
-        borderColor: "rgba(255, 255, 255, 0.08)",
-    },
-    packIconEnabled: {
-        backgroundColor: "rgba(233, 69, 96, 0.1)",
-        borderColor: "rgba(233, 69, 96, 0.2)",
-    },
-    packContent: {
-        flex: 1,
-    },
-    packTitleRow: {
-        flexDirection: "row",
-        alignItems: "center",
-        gap: spacing.xs,
-    },
-    packName: {
-        ...typography.body,
-        color: colors.text,
-        fontWeight: "500",
-        flexShrink: 1,
-    },
-    premiumBadge: {
-        flexDirection: "row",
-        alignItems: "center",
-        gap: 4,
-        paddingHorizontal: 8,
-        paddingVertical: 3,
-        borderRadius: radius.full,
-        backgroundColor: "rgba(212, 175, 55, 0.12)",
-        borderWidth: 1,
-        borderColor: "rgba(212, 175, 55, 0.25)",
-    },
-    premiumBadgeLocked: {
-        backgroundColor: "rgba(212, 175, 55, 0.18)",
-        borderColor: "rgba(212, 175, 55, 0.35)",
-    },
-    premiumBadgeText: {
-        ...typography.caption2,
-        color: colors.premium.gold,
-        fontWeight: "700",
-        letterSpacing: 0.6,
-    },
-    packMeta: {
-        ...typography.caption1,
-        color: colors.textTertiary,
-        marginTop: 2,
-    },
-    packMetaEnabled: {
-        color: colors.primary,
-    },
-    packIntensityRow: {
-        flexDirection: "row",
-        alignItems: "center",
-        gap: 6,
-        marginTop: spacing.xs,
-    },
-    packIntensityFlames: {
-        flexDirection: "row",
-        alignItems: "center",
-        gap: 2,
-    },
-    packIntensityText: {
-        ...typography.caption2,
-        color: colors.textSecondary,
-        fontWeight: "600",
-    },
-
-    // Expanded Pack
-    packExpanded: {
-        paddingHorizontal: spacing.md,
-        paddingBottom: spacing.md,
-        paddingTop: 0,
-    },
-    packDescription: {
-        ...typography.subhead,
-        color: colors.textSecondary,
-        lineHeight: 20,
-        marginBottom: spacing.md,
-    },
-    packActions: {
-        flexDirection: "row",
-        gap: spacing.sm,
-    },
-    packInfoButton: {
-        flexDirection: "row",
-        alignItems: "center",
-        gap: spacing.xs,
-        paddingVertical: spacing.sm,
-        paddingHorizontal: spacing.md,
-        borderRadius: radius.sm,
-        backgroundColor: "rgba(255, 255, 255, 0.05)",
-        borderWidth: 1,
-        borderColor: colors.glass.border,
-    },
-    packInfoButtonText: {
-        ...typography.subhead,
-        color: colors.textSecondary,
-    },
-    packToggleButton: {
-        flex: 1,
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: spacing.xs,
-        paddingVertical: spacing.sm,
-        paddingHorizontal: spacing.md,
-        borderRadius: radius.sm,
-        backgroundColor: "rgba(255, 255, 255, 0.08)",
-        borderWidth: 1,
-        borderColor: "rgba(255, 255, 255, 0.12)",
-    },
-    packToggleButtonEnabled: {
-        backgroundColor: "rgba(233, 69, 96, 0.1)",
-        borderColor: "rgba(233, 69, 96, 0.3)",
-    },
-    packToggleButtonLocked: {
-        backgroundColor: "rgba(212, 175, 55, 0.1)",
-        borderColor: "rgba(212, 175, 55, 0.3)",
-    },
-    packToggleButtonText: {
-        ...typography.subhead,
-        color: colors.text,
-        fontWeight: "500",
-    },
-    packToggleButtonTextEnabled: {
-        color: colors.primary,
-    },
-    packToggleButtonTextLocked: {
-        color: colors.premium.gold,
-    },
-});
diff --git a/apps/mobile/app/(app)/pairing.tsx b/apps/mobile/app/(app)/pairing.tsx
index 297e78e..e1416a5 100755
--- a/apps/mobile/app/(app)/pairing.tsx
+++ b/apps/mobile/app/(app)/pairing.tsx
@@ -414,15 +414,61 @@ const styles = StyleSheet.create({
         flexDirection: "row",
         alignItems: "center",
     },
-    backButton: {
-        width: 44,
-        height: 44,
-        borderRadius: 22,
-        backgroundColor: colors.glass.background,
-        justifyContent: "center",
-        alignItems: "center",
-        marginRight: spacing.md,
-    },
+    backButton: {
+        width: 44,
+        height: 44,
+        borderRadius: 22,
+        backgroundColor: colors.backgroundLight,
+        justifyContent: "center",
+        alignItems: "center",
+        marginRight: spacing.md,
+        borderWidth: 1,
+        borderColor: colors.border,
+    },
+    // ...
+    input: {
+        backgroundColor: colors.background, // Flat background
+        borderRadius: radius.md,
+        borderWidth: 1,
+        borderColor: colors.border,
+        padding: spacing.md,
+        ...typography.headline,
+        color: colors.text,
+        textAlign: "center",
+        letterSpacing: 4,
+        fontFamily: Platform.OS === "ios" ? "Courier" : "monospace",
+        marginBottom: spacing.md,
+    },
+    // ...
+    dividerLine: {
+        flex: 1,
+        height: 1,
+        backgroundColor: colors.border,
+    },
+    // ...
+    copyIcon: {
+        width: 36,
+        height: 36,
+        borderRadius: 18,
+        backgroundColor: colors.background,
+        justifyContent: "center",
+        alignItems: "center",
+        marginLeft: spacing.md,
+        borderWidth: 1,
+        borderColor: colors.border,
+    },
+    // ...
+    waitingBadge: {
+        flexDirection: "row",
+        alignItems: "center",
+        backgroundColor: colors.backgroundLight,
+        paddingHorizontal: spacing.md,
+        paddingVertical: spacing.sm,
+        borderRadius: radius.full,
+        gap: spacing.sm,
+        borderWidth: 1,
+        borderColor: colors.border,
+    },
     title: {
         ...typography.title1,
         color: colors.text,
@@ -462,29 +508,13 @@ const styles = StyleSheet.create({
         marginBottom: spacing.sm,
         marginLeft: spacing.xs,
     },
-    input: {
-        backgroundColor: colors.glass.background,
-        borderRadius: radius.md,
-        borderWidth: 1,
-        borderColor: colors.glass.border,
-        padding: spacing.md,
-        ...typography.headline,
-        color: colors.text,
-        textAlign: "center",
-        letterSpacing: 4,
-        fontFamily: Platform.OS === "ios" ? "Courier" : "monospace",
-        marginBottom: spacing.md,
-    },
+
     divider: {
         flexDirection: "row",
         alignItems: "center",
         marginVertical: spacing.lg,
     },
-    dividerLine: {
-        flex: 1,
-        height: 1,
-        backgroundColor: colors.glass.border,
-    },
+
     dividerText: {
         ...typography.subhead,
         color: colors.textTertiary,
@@ -501,15 +531,7 @@ const styles = StyleSheet.create({
         letterSpacing: 6,
         fontFamily: Platform.OS === "ios" ? "Courier" : "monospace",
     },
-    copyIcon: {
-        width: 36,
-        height: 36,
-        borderRadius: 18,
-        backgroundColor: colors.glass.background,
-        justifyContent: "center",
-        alignItems: "center",
-        marginLeft: spacing.md,
-    },
+
     tapToCopy: {
         ...typography.caption1,
         color: colors.textTertiary,
@@ -520,15 +542,7 @@ const styles = StyleSheet.create({
         alignItems: "center",
         marginTop: spacing.xl,
     },
-    waitingBadge: {
-        flexDirection: "row",
-        alignItems: "center",
-        backgroundColor: colors.glass.background,
-        paddingHorizontal: spacing.md,
-        paddingVertical: spacing.sm,
-        borderRadius: radius.full,
-        gap: spacing.sm,
-    },
+
     waitingText: {
         ...typography.subhead,
         color: colors.textTertiary,
diff --git a/apps/mobile/app/(app)/quiz.tsx b/apps/mobile/app/(app)/quiz.tsx
index efbb019..5cf76e5 100644
--- a/apps/mobile/app/(app)/quiz.tsx
+++ b/apps/mobile/app/(app)/quiz.tsx
@@ -162,15 +162,36 @@ const styles = StyleSheet.create({
         marginHorizontal: spacing.md,
         opacity: 0.6,
     },
-    badge: {
-        backgroundColor: 'rgba(232, 164, 174, 0.1)',
-        paddingHorizontal: spacing.lg,
-        paddingVertical: spacing.sm,
-        borderRadius: radius.full,
-        borderWidth: 1,
-        borderColor: 'rgba(232, 164, 174, 0.2)',
-        marginBottom: spacing.xl,
-    },
+    badge: {
+        backgroundColor: colors.backgroundLight,
+        paddingHorizontal: spacing.lg,
+        paddingVertical: spacing.sm,
+        borderRadius: radius.full,
+        borderWidth: 1,
+        borderColor: colors.border,
+        marginBottom: spacing.xl,
+    },
+    interestButton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: colors.backgroundLight,
+        paddingHorizontal: spacing.lg,
+        paddingVertical: spacing.sm + 2,
+        borderRadius: radius.full,
+        borderWidth: 1,
+        borderColor: colors.border,
+        gap: spacing.sm,
+    },
+    interestButtonActive: {
+        backgroundColor: colors.background,
+        borderColor: colors.primary,
+    },
+    interestButtonText: {
+        ...typography.subhead,
+        fontWeight: '600',
+        color: ACCENT_COLOR,
+    },
     badgeText: {
         ...typography.caption2,
         fontWeight: '600',
@@ -198,35 +219,14 @@ const styles = StyleSheet.create({
         color: colors.text,
         marginLeft: spacing.sm,
     },
-    teaser: {
-        ...typography.footnote,
-        fontStyle: 'italic',
-        color: colors.textTertiary,
-        textAlign: 'center',
-    },
-    interestButtonContainer: {
-        marginTop: spacing.xl,
-        minHeight: 44,
-    },
-    interestButton: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: 'rgba(232, 164, 174, 0.1)',
-        paddingHorizontal: spacing.lg,
-        paddingVertical: spacing.sm + 2,
-        borderRadius: radius.full,
-        borderWidth: 1,
-        borderColor: 'rgba(232, 164, 174, 0.2)',
-        gap: spacing.sm,
-    },
-    interestButtonActive: {
-        backgroundColor: 'rgba(232, 164, 174, 0.15)',
-        borderColor: 'rgba(232, 164, 174, 0.3)',
-    },
-    interestButtonText: {
-        ...typography.subhead,
-        fontWeight: '600',
-        color: ACCENT_COLOR,
-    },
-});
+    teaser: {
+        ...typography.footnote,
+        fontStyle: 'italic',
+        color: colors.textTertiary,
+        textAlign: 'center',
+    },
+    interestButtonContainer: {
+        marginTop: spacing.xl,
+        minHeight: 44,
+    },
+});
diff --git a/apps/mobile/app/(app)/swipe.tsx b/apps/mobile/app/(app)/swipe.tsx
index 450c799..3d18a7c 100755
--- a/apps/mobile/app/(app)/swipe.tsx
+++ b/apps/mobile/app/(app)/swipe.tsx
@@ -2,6 +2,8 @@ import { useState, useEffect, useRef, useCallback } from "react";
 import { View, StyleSheet, Text, ActivityIndicator, Platform, TouchableOpacity } from "react-native";
 import { useLocalSearchParams, router, useFocusEffect } from "expo-router";
 import { Ionicons } from "@expo/vector-icons";
+import * as FileSystem from "expo-file-system";
+import { decode } from "base64-arraybuffer";
 import Animated, {
     FadeIn,
     FadeInUp,
@@ -17,16 +19,45 @@ import { supabase } from "../../src/lib/supabase";
 import { usePacksStore, useAuthStore } from "../../src/store";
 import { useAmbientOrbAnimation } from "../../src/hooks";
 import { skipQuestion, getSkippedQuestionIds } from "../../src/lib/skippedQuestions";
-import { hasSeenSwipeTutorial, markSwipeTutorialSeen } from "../../src/lib/swipeTutorialSeen";
 import { invokeWithAuthRetry } from "../../src/lib/authErrorHandler";
-// import SwipeCard from "../../src/components/SwipeCard";
-import { SwipeCardPremium as SwipeCard } from "../../src/components/swipe"; // PoC: Premium styling
-import { SwipeTutorial } from "../../src/components/tutorials";
+import {
+    QuestionCard,
+    QuestionCardText,
+    QuestionCardPhoto,
+    QuestionCardAudio,
+    QuestionCardWhoLikely
+} from "../../src/components/questions";
 import { QuestionFeedbackModal } from "../../src/components/feedback";
+import { MatchConfetti } from "../../src/components/MatchConfetti";
 import { GradientBackground, GlassCard, GlassButton, DecorativeSeparator } from "../../src/components/ui";
 import { Paywall } from "../../src/components/paywall";
 import { Events } from "../../src/lib/analytics";
-import { colors, gradients, spacing, typography, radius, shadows } from "../../src/theme";
+import { colors, gradients, spacing, typography, radius, shadows, getCategoryColor } from "../../src/theme";
+import type { AnswerType } from "../../src/types";
+
+// Response data types for different question types
+interface TextResponseData {
+    type: 'text_answer';
+    text: string;
+}
+
+interface PhotoResponseData {
+    type: 'photo';
+    media_path: string;
+}
+
+interface AudioResponseData {
+    type: 'audio';
+    media_path: string;
+    duration_seconds: number;
+}
+
+interface WhoLikelyResponseData {
+    type: 'who_likely';
+    chosen_user_id: string;
+}
+
+type ResponseData = TextResponseData | PhotoResponseData | AudioResponseData | WhoLikelyResponseData;
 
 interface DailyLimitInfo {
     responses_today: number;
@@ -47,15 +78,25 @@ export default function SwipeScreen() {
     const [questions, setQuestions] = useState<any[]>([]);
     const [isLoading, setIsLoading] = useState(true);
     const [currentIndex, setCurrentIndex] = useState(0);
-    const [showTutorial, setShowTutorial] = useState(false);
     const [feedbackQuestion, setFeedbackQuestion] = useState<{id: string, text: string} | null>(null);
+    const [isUploading, setIsUploading] = useState(false);
     const [isBlocked, setIsBlocked] = useState(false);
     const [gapInfo, setGapInfo] = useState<{ unanswered: number; threshold: number } | null>(null);
     const [dailyLimitInfo, setDailyLimitInfo] = useState<DailyLimitInfo | null>(null);
     const [showPaywall, setShowPaywall] = useState(false);
     const [packContext, setPackContext] = useState<{ name: string; icon: string } | null>(null);
-    const { enabledPackIds, ensureEnabledPacksLoaded } = usePacksStore();
-    const { partner, couple } = useAuthStore();
+    const [showConfetti, setShowConfetti] = useState(false);
+    const { enabledPackIds, ensureEnabledPacksLoaded, packs } = usePacksStore();
+    const { user, partner, couple } = useAuthStore();
+
+    // Supported question types - filter out types the UI doesn't support yet
+    const supportedTypes = ['swipe', 'text_answer', 'photo', 'audio', 'who_likely'];
+
+    // Filter questions to only supported types (safety during rollout)
+    // Must be calculated early since it's used by effectiveTotal and throughout rendering
+    const filteredQuestions = questions.filter(q =>
+        !q.question_type || supportedTypes.includes(q.question_type)
+    );
     const hasTrackedExhausted = useRef(false);
     const fetchRequestId = useRef(0);
     const lastFetchedMode = useRef<string | undefined>(undefined);
@@ -134,8 +175,7 @@ export default function SwipeScreen() {
                 fetchQuestions();
             }
         });
-        checkTutorial();
-    }, [packId, mode]);
+    }, [packId, mode, startQuestionId]);
 
     // Fetch pack context when packId is provided
     useEffect(() => {
@@ -252,7 +292,7 @@ export default function SwipeScreen() {
 
     // Calculate effective total questions (accounting for gap limit AND daily limit)
     const effectiveTotal = (() => {
-        let total = questions.length;
+        let total = filteredQuestions.length;
 
         // Apply gap limit if active
         if (gapInfo && gapInfo.threshold > 0) {
@@ -270,23 +310,11 @@ export default function SwipeScreen() {
 
     // Track when all questions are exhausted
     useEffect(() => {
-        if (questions.length > 0 && currentIndex >= questions.length && !hasTrackedExhausted.current) {
+        if (filteredQuestions.length > 0 && currentIndex >= filteredQuestions.length && !hasTrackedExhausted.current) {
             hasTrackedExhausted.current = true;
             Events.allQuestionsExhausted();
         }
-    }, [currentIndex, questions.length]);
-
-    const checkTutorial = async () => {
-        const seen = await hasSeenSwipeTutorial();
-        if (!seen) {
-            setShowTutorial(true);
-        }
-    };
-
-    const handleTutorialComplete = async () => {
-        await markSwipeTutorialSeen();
-        setShowTutorial(false);
-    };
+    }, [currentIndex, filteredQuestions.length]);
 
     // Filter out questions from disabled packs immediately when enabledPackIds changes
     // Skip this filter in pending mode - user should answer ALL questions partner swiped on
@@ -328,7 +356,12 @@ export default function SwipeScreen() {
             }
 
             // Filter out recently skipped questions
-            const filtered = (data || []).filter((q: any) => !skippedIds.has(q.id));
+            let filtered = (data || []).filter((q: any) => !skippedIds.has(q.id));
+
+            // If no unskipped questions remain, show skipped ones again
+            if (filtered.length === 0 && data && data.length > 0) {
+                filtered = data;
+            }
 
             // Always check answer gap and daily limit when user has partner and not viewing specific pack
             if (partner && !packId) {
@@ -469,33 +502,123 @@ export default function SwipeScreen() {
         }
     };
 
-    const handleSwipe = async (direction: "left" | "right" | "up" | "down") => {
-        const question = questions[currentIndex];
+    // Upload media (photo/audio) to Supabase storage
+    const uploadResponseMedia = async (
+        localUri: string,
+        questionId: string,
+        mediaType: 'photo' | 'audio'
+    ): Promise<string | null> => {
+        if (!user?.id) return null;
 
-        setCurrentIndex(prev => prev + 1);
+        try {
+            const timestamp = Date.now();
+            const extMatch = localUri.match(/\.(\w+)$/);
+            const ext = extMatch ? extMatch[1] : (mediaType === 'photo' ? 'jpg' : 'm4a');
+            const fileName = `${user.id}/${questionId}_${timestamp}.${ext}`;
+            const contentType = mediaType === 'photo'
+                ? `image/${ext === 'jpg' ? 'jpeg' : ext}`
+                : `audio/${ext}`;
+
+            let fileBody: ArrayBuffer | Blob;
+
+            if (Platform.OS === 'web') {
+                const response = await fetch(localUri);
+                fileBody = await response.blob();
+            } else {
+                const base64 = await FileSystem.readAsStringAsync(localUri, {
+                    encoding: FileSystem.EncodingType.Base64,
+                });
+                fileBody = decode(base64);
+            }
+
+            const { error } = await supabase.storage
+                .from('response-media')
+                .upload(fileName, fileBody, { contentType });
+
+            if (error) {
+                console.error('Media upload error:', error);
+                return null;
+            }
+
+            return fileName;
+        } catch (error) {
+            console.error('Media upload failed:', error);
+            return null;
+        }
+    };
+
+    // Handle answer submission from question cards (supports response_data for new question types)
+    const handleAnswer = async (questionId: string, answer: AnswerType | 'skip', responseData?: ResponseData) => {
+        const question = filteredQuestions[currentIndex];
 
         // Handle skip - don't submit a response, just store it for later
-        if (direction === "down") {
-            await skipQuestion(question.id);
+        if (answer === 'skip') {
+            setCurrentIndex(prev => prev + 1);
+            await skipQuestion(questionId);
             Events.questionSkipped();
             return;
         }
 
-        const answer = direction === "right" ? "yes" : direction === "left" ? "no" : "maybe";
-
         try {
-            const { error } = await invokeWithAuthRetry("submit-response", {
+            // Upload media if response contains photo or audio with local URI
+            let finalResponseData = responseData;
+            if (responseData) {
+                if (responseData.type === 'photo' && responseData.media_path) {
+                    setIsUploading(true);
+                    try {
+                        const uploadedPath = await uploadResponseMedia(responseData.media_path, questionId, 'photo');
+                        if (uploadedPath) {
+                            finalResponseData = { ...responseData, media_path: uploadedPath };
+                        } else {
+                            console.error('Photo upload failed, skipping response_data');
+                            finalResponseData = undefined;
+                        }
+                    } finally {
+                        setIsUploading(false);
+                    }
+                } else if (responseData.type === 'audio' && responseData.media_path) {
+                    setIsUploading(true);
+                    try {
+                        const uploadedPath = await uploadResponseMedia(responseData.media_path, questionId, 'audio');
+                        if (uploadedPath) {
+                            finalResponseData = { ...responseData, media_path: uploadedPath };
+                        } else {
+                            console.error('Audio upload failed, skipping response_data');
+                            finalResponseData = undefined;
+                        }
+                    } finally {
+                        setIsUploading(false);
+                    }
+                }
+            }
+
+            const { data, error } = await invokeWithAuthRetry("submit-response", {
                 body: {
-                    question_id: question.id,
+                    question_id: questionId,
                     answer,
+                    response_data: finalResponseData,
                 },
             });
 
             if (error) {
                 console.error("Submit response error:", error);
+                // Advance to next question even on error
+                setCurrentIndex(prev => prev + 1);
             } else {
                 Events.questionAnswered(answer, question.pack_id);
-                
+
+                // Check if a match was created
+                const hasMatch = data?.match != null;
+
+                if (hasMatch) {
+                    // Show confetti celebration - delay advancing to next question
+                    setShowConfetti(true);
+                    // Confetti component will call onAnimationComplete which advances
+                } else {
+                    // No match - advance immediately
+                    setCurrentIndex(prev => prev + 1);
+                }
+
                 // Skip limit checks in pending mode - user is just catching up
                 if (mode !== 'pending') {
                     // Increment local daily count if we have limit info
@@ -514,6 +637,131 @@ export default function SwipeScreen() {
             }
         } catch (error) {
             console.error("Failed to submit response", error);
+            // Advance to next question even on error
+            setCurrentIndex(prev => prev + 1);
+        }
+    };
+
+    // Handle confetti animation completion
+    const handleConfettiComplete = useCallback(() => {
+        setShowConfetti(false);
+        setCurrentIndex(prev => prev + 1);
+    }, []);
+
+    // Get pack info for a question - use packContext if viewing a specific pack, otherwise question's pack
+    const getQuestionPackInfo = (question: any) => {
+        // If viewing specific pack, use that context but try to enrich with color from store
+        if (packId) {
+            const pack = packs.find(p => p.id === packId);
+            const categoryColor = pack ? getCategoryColor(pack.category) : undefined;
+            
+            if (packContext) {
+                return { ...packContext, color: categoryColor };
+            }
+            if (pack) {
+                return { name: pack.name, icon: pack.icon || 'layers', color: categoryColor };
+            }
+        }
+
+        // For pending mode or mixed mode, look up pack details
+        if (question.pack_id) {
+            const pack = packs.find(p => p.id === question.pack_id);
+            const categoryColor = pack ? getCategoryColor(pack.category) : undefined;
+            
+            // Pending questions might have name/icon embedded if pack not found in store
+            if (question.pack_name) {
+                return { 
+                    name: question.pack_name, 
+                    icon: question.pack_icon || 'layers',
+                    color: categoryColor 
+                };
+            }
+            
+            if (pack) {
+                return { name: pack.name, icon: pack.icon || 'layers', color: categoryColor };
+            }
+        }
+        
+        return null;
+    };
+
+    // Render the appropriate question card based on question_type
+    const renderQuestionCard = (question: any) => {
+        // For backwards compatibility: default to 'swipe' if no question_type
+        const questionType = question.question_type || 'swipe';
+        const packInfo = getQuestionPackInfo(question);
+
+        switch (questionType) {
+            case 'text_answer':
+                return (
+                    <QuestionCardText
+                        key={question.id}
+                        question={question}
+                        packInfo={packInfo}
+                        onAnswer={(answer, responseData) => handleAnswer(question.id, answer, responseData)}
+                        onReport={() => setFeedbackQuestion({
+                            id: question.id,
+                            text: question.text
+                        })}
+                    />
+                );
+            case 'photo':
+                return (
+                    <QuestionCardPhoto
+                        key={question.id}
+                        question={question}
+                        packInfo={packInfo}
+                        onAnswer={(answer, responseData) => handleAnswer(question.id, answer, responseData)}
+                        onReport={() => setFeedbackQuestion({
+                            id: question.id,
+                            text: question.text
+                        })}
+                    />
+                );
+            case 'audio':
+                return (
+                    <QuestionCardAudio
+                        key={question.id}
+                        question={question}
+                        packInfo={packInfo}
+                        onAnswer={(answer, responseData) => handleAnswer(question.id, answer, responseData)}
+                        onReport={() => setFeedbackQuestion({
+                            id: question.id,
+                            text: question.text
+                        })}
+                    />
+                );
+            case 'who_likely':
+                return (
+                    <QuestionCardWhoLikely
+                        key={question.id}
+                        question={question}
+                        packInfo={packInfo}
+                        user={{ id: user?.id || '', name: user?.name || undefined, avatar_url: user?.avatar_url }}
+                        partner={{ id: partner?.id || '', name: partner?.name || undefined, avatar_url: partner?.avatar_url }}
+                        onAnswer={(responseData) => handleAnswer(question.id, 'yes', responseData)}
+                        onSkip={() => handleAnswer(question.id, 'skip')}
+                        onReport={() => setFeedbackQuestion({
+                            id: question.id,
+                            text: question.text
+                        })}
+                    />
+                );
+            case 'swipe':
+            default:
+                // Standard swipe card for 'swipe' type and any unknown types (backwards compatibility)
+                return (
+                    <QuestionCard
+                        key={question.id}
+                        question={question}
+                        packInfo={packInfo}
+                        onAnswer={(answer) => handleAnswer(question.id, answer)}
+                        onReport={() => setFeedbackQuestion({
+                            id: question.id,
+                            text: question.text
+                        })}
+                    />
+                );
         }
     };
 
@@ -600,7 +848,7 @@ export default function SwipeScreen() {
         const LIMIT_ACCENT = colors.premium.gold;
         return (
             <GradientBackground>
-                {/* Ambient Orbs - Gold/warm glow */}
+                {/* Ambient Orbs - Gold/warm glow - Commented out for flat design
                 <Animated.View style={[styles.ambientOrb, styles.dailyLimitOrbTop, orbStyle1]} pointerEvents="none">
                     <LinearGradient
                         colors={[colors.premium.goldGlow, 'transparent']}
@@ -617,6 +865,7 @@ export default function SwipeScreen() {
                         end={{ x: 0, y: 0 }}
                     />
                 </Animated.View>
+                */}
 
                 <View style={styles.centerContainer}>
                     <Animated.View
@@ -826,10 +1075,10 @@ export default function SwipeScreen() {
                         <Text style={styles.waitingTeaser}>Your journey of discovery awaits</Text>
 
                         <GlassButton
-                            onPress={() => router.push("/packs")}
+                            onPress={() => router.push("/")}
                             style={{ marginTop: spacing.lg }}
                         >
-                            Choose Packs
+                            Browse Packs
                         </GlassButton>
                     </Animated.View>
                 </View>
@@ -837,7 +1086,7 @@ export default function SwipeScreen() {
         );
     }
 
-    if (currentIndex >= questions.length) {
+    if (currentIndex >= filteredQuestions.length) {
         const CAUGHT_UP_ACCENT = colors.premium.rose;
         const isPackMode = !!packId;
         const isPendingMode = mode === 'pending';
@@ -878,8 +1127,8 @@ export default function SwipeScreen() {
                             {isPendingMode
                                 ? "You've answered all the questions your partner swiped on. Nice work! Check back later for more."
                                 : isPackMode
-                                ? "You've answered all questions in this pack. Explore other packs to discover more!"
-                                : "You've answered all available questions. New questions are added regularly, or explore different packs."
+                                ? "You've answered all questions in this pack. Head home to discover more!"
+                                : "You've answered all available questions. New questions are added regularly, or explore different packs from home."
                             }
                         </Text>
 
@@ -907,8 +1156,8 @@ export default function SwipeScreen() {
                                         <Text style={styles.waitingFeatureText}>New questions weekly</Text>
                                     </View>
                                     <View style={styles.waitingFeatureItem}>
-                                        <Ionicons name="layers-outline" size={16} color={CAUGHT_UP_ACCENT} />
-                                        <Text style={styles.waitingFeatureText}>Try different packs</Text>
+                                        <Ionicons name="home-outline" size={16} color={CAUGHT_UP_ACCENT} />
+                                        <Text style={styles.waitingFeatureText}>Explore from home</Text>
                                     </View>
                                     <View style={styles.waitingFeatureItem}>
                                         <Ionicons name="chatbubbles-outline" size={16} color={CAUGHT_UP_ACCENT} />
@@ -936,10 +1185,10 @@ export default function SwipeScreen() {
                             </GlassButton>
                         ) : isPackMode ? (
                             <GlassButton
-                                onPress={() => router.back()}
+                                onPress={() => router.push("/")}
                                 style={{ marginTop: spacing.lg }}
                             >
-                                Explore More Packs
+                                Back to Home
                             </GlassButton>
                         ) : (
                             <GlassButton
@@ -958,7 +1207,7 @@ export default function SwipeScreen() {
 
     return (
         <GradientBackground>
-            {/* Ambient Orbs - Premium gold/rose */}
+            {/* Ambient Orbs - Premium gold/rose - Commented out for flat design
             <Animated.View style={[styles.ambientOrb, styles.orbTopRight, orbStyle1]} pointerEvents="none">
                 <LinearGradient
                     colors={[colors.premium.goldGlow, 'transparent']}
@@ -975,6 +1224,7 @@ export default function SwipeScreen() {
                     end={{ x: 0, y: 0 }}
                 />
             </Animated.View>
+            */}
 
             <View style={styles.container}>
                 {/* Header */}
@@ -995,14 +1245,14 @@ export default function SwipeScreen() {
                                 {mode === 'pending' ? 'YOUR TURN' : packContext ? packContext.name.toUpperCase() : 'EXPLORE'}
                             </Text>
                             <Text style={styles.progressText}>
-                                {currentIndex + 1} of {effectiveTotal || questions.length}
+                                {currentIndex + 1} of {effectiveTotal || filteredQuestions.length}
                             </Text>
                             <View style={[styles.progressBar, styles.progressBarPremium]}>
                                 <Animated.View
                                     style={[
                                         styles.progressFill,
                                         styles.progressFillPremium,
-                                        { width: `${((currentIndex + 1) / (effectiveTotal || questions.length || 1)) * 100}%` }
+                                        { width: `${((currentIndex + 1) / (effectiveTotal || filteredQuestions.length || 1)) * 100}%` }
                                     ]}
                                 >
                                     {/* Shimmer sweep */}
@@ -1025,52 +1275,23 @@ export default function SwipeScreen() {
                 {/* Card Stack */}
                 <View style={styles.cardContainer}>
                     {/* Third card (deepest) */}
-                    {questions[currentIndex + 2] && (
+                    {filteredQuestions[currentIndex + 2] && (
                         <View style={[styles.stackCard, styles.stackCardThird]} />
                     )}
 
                     {/* Second card */}
-                    {questions[currentIndex + 1] && (
+                    {filteredQuestions[currentIndex + 1] && (
                         <View style={[styles.stackCard, styles.stackCardSecond]} />
                     )}
 
-                    {/* Active card */}
-                    <SwipeCard
-                        key={questions[currentIndex].id}
-                        question={questions[currentIndex]}
-                        onSwipe={handleSwipe}
-                        onReport={() => setFeedbackQuestion({
-                            id: questions[currentIndex].id,
-                            text: questions[currentIndex].text
-                        })}
-                    />
+                    {/* Active card - render appropriate component based on question_type */}
+                    {renderQuestionCard(filteredQuestions[currentIndex])}
                 </View>
 
-                {/* Hint - Premium styling */}
-                <Animated.View
-                    entering={FadeIn.delay(500).duration(400)}
-                    style={styles.hintContainer}
-                >
-                    <Text style={styles.hintTextPremium}>Swipe or tap to answer</Text>
-                    
-                    <TouchableOpacity
-                        onPress={() => router.push({ pathname: "/my-answers", params: { returnTo: "/(app)/swipe" } })}
-                        style={styles.editLinkButton}
-                        hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-                    >
-                        <Text style={styles.editLinkText}>Edit previous answers</Text>
-                    </TouchableOpacity>
-                </Animated.View>
-
                 {/* Bottom spacing for tab bar */}
                 <View style={styles.bottomSpacer} />
             </View>
 
-            {/* Tutorial Overlay */}
-            {showTutorial && (
-                <SwipeTutorial onComplete={handleTutorialComplete} />
-            )}
-
             {/* Question Feedback Modal */}
             <QuestionFeedbackModal
                 visible={!!feedbackQuestion}
@@ -1079,6 +1300,12 @@ export default function SwipeScreen() {
                 questionText={feedbackQuestion?.text || ''}
             />
 
+            {/* Match Confetti Animation */}
+            <MatchConfetti
+                visible={showConfetti}
+                onAnimationComplete={handleConfettiComplete}
+            />
+
             {/* Paywall Modal */}
             <Paywall
                 visible={showPaywall}
@@ -1089,6 +1316,16 @@ export default function SwipeScreen() {
                     fetchQuestions();
                 }}
             />
+
+            {/* Upload spinner overlay */}
+            {isUploading && (
+                <View style={styles.uploadOverlay}>
+                    <View style={styles.uploadSpinnerContainer}>
+                        <ActivityIndicator size="large" color={colors.premium.gold} />
+                        <Text style={styles.uploadText}>Uploading...</Text>
+                    </View>
+                </View>
+            )}
         </GradientBackground>
     );
 }
@@ -1193,11 +1430,11 @@ const styles = StyleSheet.create({
         justifyContent: "center",
         alignItems: "center",
     },
-    // Card stack - Premium styling
+    // Card stack - Premium styling (background cards)
     stackCard: {
         position: "absolute",
         width: "85%",
-        height: 500,
+        height: "85%",
         backgroundColor: '#0d0d1a',
         borderRadius: radius.xl,
         borderWidth: 1,
@@ -1213,32 +1450,6 @@ const styles = StyleSheet.create({
         opacity: 0.2,
         ...shadows.sm,
     },
-    hintContainer: {
-        alignItems: "center",
-        paddingBottom: spacing.md,
-    },
-    hintText: {
-        ...typography.caption1,
-        color: colors.textTertiary,
-    },
-    hintTextPremium: {
-        ...typography.caption1,
-        fontStyle: 'italic',
-        color: colors.textTertiary,
-        letterSpacing: 0.5,
-    },
-    editLinkButton: {
-        marginTop: spacing.md,
-        paddingVertical: spacing.xs,
-        paddingHorizontal: spacing.sm,
-    },
-    editLinkText: {
-        ...typography.caption2,
-        color: colors.premium.gold,
-        textDecorationLine: 'underline',
-        opacity: 0.8,
-        letterSpacing: 0.5,
-    },
     bottomSpacer: {
         height: Platform.OS === 'ios' ? 100 : 80,
     },
@@ -1443,4 +1654,26 @@ const styles = StyleSheet.create({
         fontWeight: '600',
         color: '#000',
     },
+    // Upload overlay styles
+    uploadOverlay: {
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: 'rgba(0, 0, 0, 0.6)',
+        justifyContent: 'center',
+        alignItems: 'center',
+        zIndex: 100,
+    },
+    uploadSpinnerContainer: {
+        backgroundColor: colors.backgroundLight,
+        paddingHorizontal: spacing.xl,
+        paddingVertical: spacing.lg,
+        borderRadius: radius.lg,
+        alignItems: 'center',
+        gap: spacing.md,
+        borderWidth: 1,
+        borderColor: 'rgba(212, 175, 55, 0.2)',
+    },
+    uploadText: {
+        ...typography.subhead,
+        color: colors.text,
+    },
 });
diff --git a/apps/mobile/app/(auth)/login.tsx b/apps/mobile/app/(auth)/login.tsx
index 903bc86..e765fa7 100755
--- a/apps/mobile/app/(auth)/login.tsx
+++ b/apps/mobile/app/(auth)/login.tsx
@@ -768,10 +768,18 @@ const styles = StyleSheet.create({
     },
     modeToggleContainer: {
         flexDirection: "row",
-        backgroundColor: colors.glass.background,
+        backgroundColor: colors.background, // Flat background
         borderRadius: radius.md,
         padding: 4,
         marginBottom: spacing.lg,
+        borderWidth: 1,
+        borderColor: colors.border,
+    },
+    // ...
+    dividerLine: {
+        flex: 1,
+        height: 1,
+        backgroundColor: colors.border,
     },
     modeToggle: {
         flex: 1,
@@ -832,11 +840,7 @@ const styles = StyleSheet.create({
         alignItems: "center",
         marginBottom: spacing.lg,
     },
-    dividerLine: {
-        flex: 1,
-        height: 1,
-        backgroundColor: colors.glass.border,
-    },
+
     dividerText: {
         ...typography.caption1,
         color: colors.textTertiary,
diff --git a/apps/mobile/app/index.tsx b/apps/mobile/app/index.tsx
index 3f7312b..751d505 100755
--- a/apps/mobile/app/index.tsx
+++ b/apps/mobile/app/index.tsx
@@ -1,7 +1,8 @@
-import { Redirect } from "expo-router";
-import { useAuthStore } from "../src/store";
-import { View, ActivityIndicator, StyleSheet } from "react-native";
-
+import { Redirect } from "expo-router";
+import { useAuthStore } from "../src/store";
+import { View, ActivityIndicator, StyleSheet } from "react-native";
+import { needsOnboarding } from "../src/constants/onboarding";
+
 export default function Index() {
     const { isAuthenticated, isLoading, user } = useAuthStore();
 
@@ -19,8 +20,8 @@ export default function Index() {
         return <Redirect href="/(auth)/login" />;
     }
 
-    // If user hasn't completed onboarding, go to onboarding first
-    if (!user?.onboarding_completed) {
+    // If user hasn't completed onboarding or needs to re-onboard, go to onboarding
+    if (needsOnboarding(user?.onboarding_completed, user?.onboarding_version)) {
         return <Redirect href="/(app)/onboarding" />;
     }
 
@@ -28,12 +29,12 @@ export default function Index() {
     // No forced redirect to pairing for users without a couple
     return <Redirect href="/(app)" />;
 }
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
-        backgroundColor: "#1a1a2e",
-    },
-});
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        backgroundColor: "#1a1a2e",
+    },
+});
diff --git a/apps/mobile/app/pack/[id].tsx b/apps/mobile/app/pack/[id].tsx
index 3372031..96259c0 100644
--- a/apps/mobile/app/pack/[id].tsx
+++ b/apps/mobile/app/pack/[id].tsx
@@ -242,12 +242,19 @@ export default function PackDetailsScreen() {
                     {category ? category.name.toUpperCase() : 'PREVIEW'}
                 </Text>
 
+                {/* Explicit badge */}
+                {pack?.is_explicit && (
+                    <View style={styles.explicitBadge}>
+                        <Ionicons name="flame" size={12} color={colors.text} />
+                        <Text style={styles.explicitBadgeText}>18+ EXPLICIT</Text>
+                    </View>
+                )}
+
                 {/* Icon with enhanced glow for premium */}
                 <View style={styles.iconWrapper}>
                     {pack?.is_premium && (
                         <>
-                            <View style={styles.iconGlowOuter} />
-                            <View style={styles.iconGlow} />
+                            {/* Glow effects removed for flat design */}
                         </>
                     )}
                     <View style={[
@@ -329,11 +336,7 @@ export default function PackDetailsScreen() {
                 {/* Fixed Nav Bar */}
                 <View style={styles.navBar}>
                     <Animated.View style={[styles.navBarBackground, navBarBackgroundStyle]}>
-                        {Platform.OS === "ios" ? (
-                            <BlurView intensity={80} tint="dark" style={StyleSheet.absoluteFill} />
-                        ) : (
-                            <View style={[StyleSheet.absoluteFill, { backgroundColor: "rgba(13, 13, 26, 0.95)" }]} />
-                        )}
+                        <View style={[StyleSheet.absoluteFill, { backgroundColor: colors.background }]} />
                     </Animated.View>
 
                     <TouchableOpacity onPress={() => router.back()} style={styles.backButton}>
@@ -440,8 +443,87 @@ const styles = StyleSheet.create({
     navBarBackground: {
         ...StyleSheet.absoluteFillObject,
         borderBottomWidth: 1,
-        borderBottomColor: 'rgba(233, 69, 96, 0.15)',
+        borderBottomColor: colors.border,
         overflow: "hidden",
+        backgroundColor: colors.background, // Flat
+    },
+    // ...
+
+    // ...
+    premiumBanner: {
+        marginHorizontal: spacing.lg,
+        marginBottom: spacing.lg,
+        borderRadius: radius.md,
+        overflow: 'hidden',
+        // Removed heavy shadow
+        borderWidth: 1,
+        borderColor: colors.premium.gold,
+    },
+    // ...
+    iconWrapper: {
+        position: 'relative',
+        marginBottom: spacing.md,
+        // Removed glowing background elements
+    },
+    // ...
+    iconContainer: {
+        width: 72,
+        height: 72,
+        borderRadius: 36,
+        backgroundColor: colors.backgroundLight,
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderWidth: 1,
+        borderColor: colors.border,
+        overflow: 'hidden',
+    },
+    iconContainerPremium: {
+        borderColor: colors.premium.gold,
+        borderWidth: 2,
+        backgroundColor: colors.backgroundLight,
+        // Removed heavy shadows
+    },
+    // ...
+    statsBadge: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: spacing.xs,
+        backgroundColor: colors.backgroundLight,
+        paddingHorizontal: spacing.lg,
+        paddingVertical: spacing.sm,
+        borderRadius: radius.full,
+        borderWidth: 1,
+        borderColor: colors.border,
+    },
+    // ...
+    questionCard: {
+        backgroundColor: colors.backgroundLight, // Flat
+        borderRadius: radius.md,
+        borderWidth: 1,
+        borderColor: colors.border,
+        marginBottom: spacing.sm,
+    },
+    // ...
+    partnerTextContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: spacing.xs,
+        marginBottom: spacing.sm,
+        paddingVertical: spacing.xs,
+        paddingHorizontal: spacing.sm,
+        backgroundColor: colors.background, // Nested flat container
+        borderRadius: radius.sm,
+        alignSelf: 'flex-start',
+        borderWidth: 1,
+        borderColor: colors.border,
+    },
+    // ...
+    tooltipContainer: {
+        maxWidth: 320,
+        overflow: 'hidden',
+        backgroundColor: colors.backgroundLight, // Flat
+        borderWidth: 1,
+        borderColor: colors.border,
     },
     backButton: {
         zIndex: 10,
@@ -482,17 +564,7 @@ const styles = StyleSheet.create({
     },
 
     // Premium Banner
-    premiumBanner: {
-        marginHorizontal: spacing.lg,
-        marginBottom: spacing.lg,
-        borderRadius: radius.md,
-        overflow: 'hidden',
-        shadowColor: colors.premium.gold,
-        shadowOffset: { width: 0, height: 4 },
-        shadowOpacity: 0.3,
-        shadowRadius: 8,
-        elevation: 8,
-    },
+
     premiumBannerContent: {
         flexDirection: 'row',
         alignItems: 'center',
@@ -519,49 +591,32 @@ const styles = StyleSheet.create({
     labelPremium: {
         color: colors.premium.gold,
     },
-    iconWrapper: {
-        position: 'relative',
+    explicitBadge: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: colors.error,
+        paddingHorizontal: spacing.md,
+        paddingVertical: spacing.xs,
+        borderRadius: radius.full,
+        gap: spacing.xs,
         marginBottom: spacing.md,
     },
+    explicitBadgeText: {
+        ...typography.caption2,
+        fontWeight: '700',
+        color: colors.text,
+        letterSpacing: 1,
+    },
+
+    // Removed glow styles
     iconGlowOuter: {
-        position: 'absolute',
-        top: -20,
-        left: -20,
-        right: -20,
-        bottom: -20,
-        borderRadius: 60,
-        backgroundColor: 'rgba(212, 175, 55, 0.08)',
+        display: 'none',
     },
     iconGlow: {
-        position: 'absolute',
-        top: -10,
-        left: -10,
-        right: -10,
-        bottom: -10,
-        borderRadius: 50,
-        backgroundColor: 'rgba(212, 175, 55, 0.2)',
-    },
-    iconContainer: {
-        width: 72,
-        height: 72,
-        borderRadius: 36,
-        backgroundColor: 'rgba(255, 255, 255, 0.06)',
-        justifyContent: 'center',
-        alignItems: 'center',
-        borderWidth: 1,
-        borderColor: 'rgba(255, 255, 255, 0.1)',
-        overflow: 'hidden',
-    },
-    iconContainerPremium: {
-        borderColor: colors.premium.gold,
-        borderWidth: 2,
-        backgroundColor: 'rgba(212, 175, 55, 0.15)',
-        shadowColor: colors.premium.gold,
-        shadowOffset: { width: 0, height: 0 },
-        shadowOpacity: 0.5,
-        shadowRadius: 12,
-        elevation: 8,
+        display: 'none',
     },
+
+
     crownBadge: {
         position: 'absolute',
         top: -4,
@@ -647,17 +702,7 @@ const styles = StyleSheet.create({
         paddingHorizontal: spacing.md,
         marginBottom: spacing.md,
     },
-    statsBadge: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: spacing.xs,
-        backgroundColor: 'rgba(233, 69, 96, 0.1)',
-        paddingHorizontal: spacing.lg,
-        paddingVertical: spacing.sm,
-        borderRadius: radius.full,
-        borderWidth: 1,
-        borderColor: 'rgba(233, 69, 96, 0.2)',
-    },
+
     statsBadgePremium: {
         backgroundColor: 'rgba(212, 175, 55, 0.1)',
         borderColor: 'rgba(212, 175, 55, 0.3)',
@@ -676,13 +721,7 @@ const styles = StyleSheet.create({
         paddingHorizontal: spacing.md,
         paddingBottom: Platform.OS === 'ios' ? 100 : 80,
     },
-    questionCard: {
-        backgroundColor: 'rgba(22, 33, 62, 0.4)',
-        borderRadius: radius.md,
-        borderWidth: 1,
-        borderColor: 'rgba(255, 255, 255, 0.06)',
-        marginBottom: spacing.sm,
-    },
+
     questionContent: {
         padding: spacing.md,
     },
@@ -697,17 +736,7 @@ const styles = StyleSheet.create({
         marginBottom: spacing.sm,
         lineHeight: 22,
     },
-    partnerTextContainer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: spacing.xs,
-        marginBottom: spacing.sm,
-        paddingVertical: spacing.xs,
-        paddingHorizontal: spacing.sm,
-        backgroundColor: 'rgba(232, 164, 174, 0.1)',
-        borderRadius: radius.sm,
-        alignSelf: 'flex-start',
-    },
+
     partnerText: {
         ...typography.caption1,
         color: colors.premium.rose,
@@ -755,10 +784,7 @@ const styles = StyleSheet.create({
         alignItems: 'center',
         padding: spacing.lg,
     },
-    tooltipContainer: {
-        maxWidth: 320,
-        overflow: 'hidden',
-    },
+
     tooltipTitle: {
         ...typography.title3,
         color: colors.text,
diff --git a/apps/mobile/ios/Podfile.lock b/apps/mobile/ios/Podfile.lock
index da468bb..8d20d65 100644
--- a/apps/mobile/ios/Podfile.lock
+++ b/apps/mobile/ios/Podfile.lock
@@ -300,6 +300,8 @@ PODS:
     - Yoga
   - ExpoSecureStore (14.0.1):
     - ExpoModulesCore
+  - ExpoSharing (14.0.8):
+    - ExpoModulesCore
   - EXUpdatesInterface (1.0.0):
     - ExpoModulesCore
   - fast_float (6.1.4)
@@ -1703,6 +1705,27 @@ PODS:
     - Yoga
   - react-native-safe-area-context (4.12.0):
     - React-Core
+  - react-native-view-shot (4.0.3):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.10.14.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - React-nativeconfig (0.76.9)
   - React-NativeModulesApple (0.76.9):
     - glog
@@ -2230,6 +2253,7 @@ DEPENDENCIES:
   - ExpoMediaLibrary (from `../../../node_modules/expo-media-library/ios`)
   - ExpoModulesCore (from `../../../node_modules/expo-modules-core`)
   - ExpoSecureStore (from `../../../node_modules/expo-secure-store/ios`)
+  - ExpoSharing (from `../../../node_modules/expo-sharing/ios`)
   - EXUpdatesInterface (from `../../../node_modules/expo-updates-interface/ios`)
   - fast_float (from `../../../node_modules/react-native/third-party-podspecs/fast_float.podspec`)
   - FBLazyVector (from `../../../node_modules/react-native/Libraries/FBLazyVector`)
@@ -2269,6 +2293,7 @@ DEPENDENCIES:
   - React-microtasksnativemodule (from `../../../node_modules/react-native/ReactCommon/react/nativemodule/microtasks`)
   - react-native-compressor (from `../../../node_modules/react-native-compressor`)
   - react-native-safe-area-context (from `../../../node_modules/react-native-safe-area-context`)
+  - react-native-view-shot (from `../../../node_modules/react-native-view-shot`)
   - React-nativeconfig (from `../../../node_modules/react-native/ReactCommon`)
   - React-NativeModulesApple (from `../../../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
   - React-perflogger (from `../../../node_modules/react-native/ReactCommon/reactperflogger`)
@@ -2399,6 +2424,8 @@ EXTERNAL SOURCES:
     :path: "../../../node_modules/expo-modules-core"
   ExpoSecureStore:
     :path: "../../../node_modules/expo-secure-store/ios"
+  ExpoSharing:
+    :path: "../../../node_modules/expo-sharing/ios"
   EXUpdatesInterface:
     :path: "../../../node_modules/expo-updates-interface/ios"
   fast_float:
@@ -2474,6 +2501,8 @@ EXTERNAL SOURCES:
     :path: "../../../node_modules/react-native-compressor"
   react-native-safe-area-context:
     :path: "../../../node_modules/react-native-safe-area-context"
+  react-native-view-shot:
+    :path: "../../../node_modules/react-native-view-shot"
   React-nativeconfig:
     :path: "../../../node_modules/react-native/ReactCommon"
   React-NativeModulesApple:
@@ -2586,6 +2615,7 @@ SPEC CHECKSUMS:
   ExpoMediaLibrary: 2709fc2e4fcf87d28767714abcc603c4bec228c6
   ExpoModulesCore: 2d8d1c8e238bd5e1448b06c284ac896b162fb856
   ExpoSecureStore: 9a3665d7161dd1031be386e278bffd623658f316
+  ExpoSharing: 0d983394ed4a80334bab5a0d5384f75710feb7e8
   EXUpdatesInterface: 7c977640bdd8b85833c19e3959ba46145c5719db
   fast_float: 06eeec4fe712a76acc9376682e4808b05ce978b6
   FBLazyVector: 7605ea4810e0e10ae4815292433c09bf4324ba45
@@ -2638,6 +2668,7 @@ SPEC CHECKSUMS:
   React-microtasksnativemodule: 338bfa0a7d8cd1ed212b055f2143a6789252137a
   react-native-compressor: 40b3e2b942aebac3daaae9549b23a13510c67a6f
   react-native-safe-area-context: 8b8404e70b0cbf2a56428a17017c14c1dcc16448
+  react-native-view-shot: 4147b714c5316d7e17ed652d0b5a182c028f842e
   React-nativeconfig: 415626a63057638759bcc75e0a96e2e07771a479
   React-NativeModulesApple: d33b55553c6957ff94835574636838d78121a1c6
   React-perflogger: 72e653eb3aba9122f9e57cf012d22d2486f33358
diff --git a/apps/mobile/ios/Sauci.xcodeproj/project.pbxproj b/apps/mobile/ios/Sauci.xcodeproj/project.pbxproj
index e4d78b0..ca44296 100644
--- a/apps/mobile/ios/Sauci.xcodeproj/project.pbxproj
+++ b/apps/mobile/ios/Sauci.xcodeproj/project.pbxproj
@@ -10,13 +10,13 @@
 		13B07FBC1A68108700A75B9A /* AppDelegate.mm in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.mm */; };
 		13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
 		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
+		205B32B3C49E4FAE89D6C5F0 /* noop-file.swift in Sources */ = {isa = PBXBuildFile; fileRef = CCCF3A9B29424BA98FBA8B48 /* noop-file.swift */; };
 		3E461D99554A48A4959DE609 /* SplashScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = AA286B85B6C04FC6940260E9 /* SplashScreen.storyboard */; };
-		42547B8429A622FDB6A08D1A /* PrivacyInfo.xcprivacy in Resources */ = {isa = PBXBuildFile; fileRef = 6F16AA977A27D49DC4EABEBD /* PrivacyInfo.xcprivacy */; };
+		6576698ADC99475D84AFD6D9 /* GoogleService-Info.plist in Resources */ = {isa = PBXBuildFile; fileRef = E4DB794D33A243BDB0648CC7 /* GoogleService-Info.plist */; };
+		944B75281101CC74377D82DB /* PrivacyInfo.xcprivacy in Resources */ = {isa = PBXBuildFile; fileRef = 8D7E553B42EBF30261ADEC30 /* PrivacyInfo.xcprivacy */; };
 		B18059E884C0ABDD17F3DC3D /* ExpoModulesProvider.swift in Sources */ = {isa = PBXBuildFile; fileRef = FAC715A2D49A985799AEE119 /* ExpoModulesProvider.swift */; };
-		B7C05C8A003645F0BE64907E /* GoogleService-Info.plist in Resources */ = {isa = PBXBuildFile; fileRef = 635D1AC9C28D4D029F2F8C7A /* GoogleService-Info.plist */; };
 		BB2F792D24A3F905000567C9 /* Expo.plist in Resources */ = {isa = PBXBuildFile; fileRef = BB2F792C24A3F905000567C9 /* Expo.plist */; };
-		C3F98487868740D8A0D61E28 /* noop-file.swift in Sources */ = {isa = PBXBuildFile; fileRef = DC04D93C99ED45B8A9943233 /* noop-file.swift */; };
-		FE422ED79FD52F74C1E29BFB /* Pods_Sauci.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 8641A69B4B5E9431AF468A7C /* Pods_Sauci.framework */; };
+		BCF95FBAB579F4031AACC822 /* Pods_Sauci.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 95792FE2B2AD39D770B9A7F1 /* Pods_Sauci.framework */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXFileReference section */
@@ -26,15 +26,15 @@
 		13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = Sauci/Images.xcassets; sourceTree = "<group>"; };
 		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = Sauci/Info.plist; sourceTree = "<group>"; };
 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = Sauci/main.m; sourceTree = "<group>"; };
-		635D1AC9C28D4D029F2F8C7A /* GoogleService-Info.plist */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 4; includeInIndex = 0; lastKnownFileType = text.plist.xml; name = "GoogleService-Info.plist"; path = "Sauci/GoogleService-Info.plist"; sourceTree = "<group>"; };
 		6C2E3173556A471DD304B334 /* Pods-Sauci.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Sauci.debug.xcconfig"; path = "Target Support Files/Pods-Sauci/Pods-Sauci.debug.xcconfig"; sourceTree = "<group>"; };
-		6F16AA977A27D49DC4EABEBD /* PrivacyInfo.xcprivacy */ = {isa = PBXFileReference; includeInIndex = 1; name = PrivacyInfo.xcprivacy; path = Sauci/PrivacyInfo.xcprivacy; sourceTree = "<group>"; };
+		78D1B9CD5B66459A822DF0D3 /* Sauci-Bridging-Header.h */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 4; includeInIndex = 0; lastKnownFileType = sourcecode.c.h; name = "Sauci-Bridging-Header.h"; path = "Sauci/Sauci-Bridging-Header.h"; sourceTree = "<group>"; };
 		7A4D352CD337FB3A3BF06240 /* Pods-Sauci.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Sauci.release.xcconfig"; path = "Target Support Files/Pods-Sauci/Pods-Sauci.release.xcconfig"; sourceTree = "<group>"; };
-		8641A69B4B5E9431AF468A7C /* Pods_Sauci.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; includeInIndex = 0; path = Pods_Sauci.framework; sourceTree = BUILT_PRODUCTS_DIR; };
+		8D7E553B42EBF30261ADEC30 /* PrivacyInfo.xcprivacy */ = {isa = PBXFileReference; includeInIndex = 1; name = PrivacyInfo.xcprivacy; path = Sauci/PrivacyInfo.xcprivacy; sourceTree = "<group>"; };
+		95792FE2B2AD39D770B9A7F1 /* Pods_Sauci.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; includeInIndex = 0; path = Pods_Sauci.framework; sourceTree = BUILT_PRODUCTS_DIR; };
 		AA286B85B6C04FC6940260E9 /* SplashScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = SplashScreen.storyboard; path = Sauci/SplashScreen.storyboard; sourceTree = "<group>"; };
 		BB2F792C24A3F905000567C9 /* Expo.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = Expo.plist; sourceTree = "<group>"; };
-		CA157390B5A149C0AD0B6B08 /* Sauci-Bridging-Header.h */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 4; includeInIndex = 0; lastKnownFileType = sourcecode.c.h; name = "Sauci-Bridging-Header.h"; path = "Sauci/Sauci-Bridging-Header.h"; sourceTree = "<group>"; };
-		DC04D93C99ED45B8A9943233 /* noop-file.swift */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 4; includeInIndex = 0; lastKnownFileType = sourcecode.swift; name = "noop-file.swift"; path = "Sauci/noop-file.swift"; sourceTree = "<group>"; };
+		CCCF3A9B29424BA98FBA8B48 /* noop-file.swift */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 4; includeInIndex = 0; lastKnownFileType = sourcecode.swift; name = "noop-file.swift"; path = "Sauci/noop-file.swift"; sourceTree = "<group>"; };
+		E4DB794D33A243BDB0648CC7 /* GoogleService-Info.plist */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 4; includeInIndex = 0; lastKnownFileType = text.plist.xml; name = "GoogleService-Info.plist"; path = "Sauci/GoogleService-Info.plist"; sourceTree = "<group>"; };
 		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
 		FAC715A2D49A985799AEE119 /* ExpoModulesProvider.swift */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = sourcecode.swift; name = ExpoModulesProvider.swift; path = "Pods/Target Support Files/Pods-Sauci/ExpoModulesProvider.swift"; sourceTree = "<group>"; };
 /* End PBXFileReference section */
@@ -44,7 +44,7 @@
 			isa = PBXFrameworksBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
-				FE422ED79FD52F74C1E29BFB /* Pods_Sauci.framework in Frameworks */,
+				BCF95FBAB579F4031AACC822 /* Pods_Sauci.framework in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -61,10 +61,10 @@
 				13B07FB61A68108700A75B9A /* Info.plist */,
 				13B07FB71A68108700A75B9A /* main.m */,
 				AA286B85B6C04FC6940260E9 /* SplashScreen.storyboard */,
-				635D1AC9C28D4D029F2F8C7A /* GoogleService-Info.plist */,
-				DC04D93C99ED45B8A9943233 /* noop-file.swift */,
-				CA157390B5A149C0AD0B6B08 /* Sauci-Bridging-Header.h */,
-				6F16AA977A27D49DC4EABEBD /* PrivacyInfo.xcprivacy */,
+				E4DB794D33A243BDB0648CC7 /* GoogleService-Info.plist */,
+				CCCF3A9B29424BA98FBA8B48 /* noop-file.swift */,
+				78D1B9CD5B66459A822DF0D3 /* Sauci-Bridging-Header.h */,
+				8D7E553B42EBF30261ADEC30 /* PrivacyInfo.xcprivacy */,
 			);
 			name = Sauci;
 			sourceTree = "<group>";
@@ -73,7 +73,7 @@
 			isa = PBXGroup;
 			children = (
 				ED297162215061F000B7C4FE /* JavaScriptCore.framework */,
-				8641A69B4B5E9431AF468A7C /* Pods_Sauci.framework */,
+				95792FE2B2AD39D770B9A7F1 /* Pods_Sauci.framework */,
 			);
 			name = Frameworks;
 			sourceTree = "<group>";
@@ -150,15 +150,15 @@
 			buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "Sauci" */;
 			buildPhases = (
 				08A4A3CD28434E44B6B9DE2E /* [CP] Check Pods Manifest.lock */,
-				380EBB147031A50785146268 /* [Expo] Configure project */,
+				343E25507BEB6EFEF50B08AF /* [Expo] Configure project */,
 				13B07F871A680F5B00A75B9A /* Sources */,
 				13B07F8C1A680F5B00A75B9A /* Frameworks */,
 				13B07F8E1A680F5B00A75B9A /* Resources */,
 				00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
 				800E24972A6A228C8D4807E9 /* [CP] Copy Pods Resources */,
-				5F6BF0C2EF824875B30C4F47 /* Upload Debug Symbols to Sentry */,
-				83F7C8F647047F466249E15C /* [CP] Embed Pods Frameworks */,
-				3AB0FB698F7BE8E7FEAC6EB4 /* [CP-User] [RNFB] Core Configuration */,
+				8C453F47518C4580A321EB65 /* Upload Debug Symbols to Sentry */,
+				9F907B34B4D68CFE07BD67A0 /* [CP] Embed Pods Frameworks */,
+				5020657B8213723F010419B9 /* [CP-User] [RNFB] Core Configuration */,
 			);
 			buildRules = (
 			);
@@ -210,8 +210,8 @@
 				BB2F792D24A3F905000567C9 /* Expo.plist in Resources */,
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
 				3E461D99554A48A4959DE609 /* SplashScreen.storyboard in Resources */,
-				B7C05C8A003645F0BE64907E /* GoogleService-Info.plist in Resources */,
-				42547B8429A622FDB6A08D1A /* PrivacyInfo.xcprivacy in Resources */,
+				6576698ADC99475D84AFD6D9 /* GoogleService-Info.plist in Resources */,
+				944B75281101CC74377D82DB /* PrivacyInfo.xcprivacy in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -255,7 +255,7 @@
 			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
 			showEnvVarsInLog = 0;
 		};
-		380EBB147031A50785146268 /* [Expo] Configure project */ = {
+		343E25507BEB6EFEF50B08AF /* [Expo] Configure project */ = {
 			isa = PBXShellScriptBuildPhase;
 			alwaysOutOfDate = 1;
 			buildActionMask = 2147483647;
@@ -274,7 +274,7 @@
 			shellPath = /bin/sh;
 			shellScript = "# This script configures Expo modules and generates the modules provider file.\nbash -l -c \"./Pods/Target\\ Support\\ Files/Pods-Sauci/expo-configure-project.sh\"\n";
 		};
-		3AB0FB698F7BE8E7FEAC6EB4 /* [CP-User] [RNFB] Core Configuration */ = {
+		5020657B8213723F010419B9 /* [CP-User] [RNFB] Core Configuration */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
@@ -287,20 +287,6 @@
 			shellPath = /bin/sh;
 			shellScript = "#!/usr/bin/env bash\n#\n# Copyright (c) 2016-present Invertase Limited & Contributors\n#\n# Licensed under the Apache License, Version 2.0 (the \"License\");\n# you may not use this library except in compliance with the License.\n# You may obtain a copy of the License at\n#\n#   http://www.apache.org/licenses/LICENSE-2.0\n#\n# Unless required by applicable law or agreed to in writing, software\n# distributed under the License is distributed on an \"AS IS\" BASIS,\n# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n# See the License for the specific language governing permissions and\n# limitations under the License.\n#\n\n##########################################################################\n##########################################################################\n#\n#  NOTE THAT IF YOU CHANGE THIS FILE YOU MUST RUN pod install AFTERWARDS\n#\n#  This file is installed as an Xcode build script in the project file\n#  by cocoapods, and you will not see your changes until you pod install\n#\n##########################################################################\n##########################################################################\n\nset -e\n\n_MAX_LOOKUPS=2;\n_SEARCH_RESULT=''\n_RN_ROOT_EXISTS=''\n_CURRENT_LOOKUPS=1\n_JSON_ROOT=\"'react-native'\"\n_JSON_FILE_NAME='firebase.json'\n_JSON_OUTPUT_BASE64='e30=' # { }\n_CURRENT_SEARCH_DIR=${PROJECT_DIR}\n_PLIST_BUDDY=/usr/libexec/PlistBuddy\n_TARGET_PLIST=\"${BUILT_PRODUCTS_DIR}/${INFOPLIST_PATH}\"\n_DSYM_PLIST=\"${DWARF_DSYM_FOLDER_PATH}/${DWARF_DSYM_FILE_NAME}/Contents/Info.plist\"\n\n# plist arrays\n_PLIST_ENTRY_KEYS=()\n_PLIST_ENTRY_TYPES=()\n_PLIST_ENTRY_VALUES=()\n\nfunction setPlistValue {\n  echo \"note:      setting plist entry '$1' of type '$2' in file '$4'\"\n  ${_PLIST_BUDDY} -c \"Add :$1 $2 '$3'\" $4 || echo \"note:      '$1' already exists\"\n}\n\nfunction getFirebaseJsonKeyValue () {\n  if [[ ${_RN_ROOT_EXISTS} ]]; then\n    ruby -Ku -e \"require 'rubygems';require 'json'; output=JSON.parse('$1'); puts output[$_JSON_ROOT]['$2']\"\n  else\n    echo \"\"\n  fi;\n}\n\nfunction jsonBoolToYesNo () {\n  if [[ $1 == \"false\" ]]; then\n    echo \"NO\"\n  elif [[ $1 == \"true\" ]]; then\n    echo \"YES\"\n  else echo \"NO\"\n  fi\n}\n\necho \"note: -> RNFB build script started\"\necho \"note: 1) Locating ${_JSON_FILE_NAME} file:\"\n\nif [[ -z ${_CURRENT_SEARCH_DIR} ]]; then\n  _CURRENT_SEARCH_DIR=$(pwd)\nfi;\n\nwhile true; do\n  _CURRENT_SEARCH_DIR=$(dirname \"$_CURRENT_SEARCH_DIR\")\n  if [[ \"$_CURRENT_SEARCH_DIR\" == \"/\" ]] || [[ ${_CURRENT_LOOKUPS} -gt ${_MAX_LOOKUPS} ]]; then break; fi;\n  echo \"note:      ($_CURRENT_LOOKUPS of $_MAX_LOOKUPS) Searching in '$_CURRENT_SEARCH_DIR' for a ${_JSON_FILE_NAME} file.\"\n  _SEARCH_RESULT=$(find \"$_CURRENT_SEARCH_DIR\" -maxdepth 2 -name ${_JSON_FILE_NAME} -print | /usr/bin/head -n 1)\n  if [[ ${_SEARCH_RESULT} ]]; then\n    echo \"note:      ${_JSON_FILE_NAME} found at $_SEARCH_RESULT\"\n    break;\n  fi;\n  _CURRENT_LOOKUPS=$((_CURRENT_LOOKUPS+1))\ndone\n\nif [[ ${_SEARCH_RESULT} ]]; then\n  _JSON_OUTPUT_RAW=$(cat \"${_SEARCH_RESULT}\")\n  if ! _RN_ROOT_EXISTS=$(ruby -Ku -e \"require 'json'; output=JSON.parse('$_JSON_OUTPUT_RAW'); puts output[$_JSON_ROOT]\"); then\n    echo \"error: Failed to parse firebase.json, check for syntax errors.\"\n    exit 1\n  fi\n\n  if [[ ${_RN_ROOT_EXISTS} ]]; then\n    if ! python3 --version >/dev/null 2>&1; then echo \"error: python3 not found, firebase.json file processing error.\" && exit 1; fi\n    _JSON_OUTPUT_BASE64=$(python3 -c 'import json,sys,base64;print(base64.b64encode(bytes(json.dumps(json.loads(open('\"'${_SEARCH_RESULT}'\"', '\"'rb'\"').read())['${_JSON_ROOT}']), '\"'utf-8'\"')).decode())' || echo \"e30=\")\n  fi\n\n  _PLIST_ENTRY_KEYS+=(\"firebase_json_raw\")\n  _PLIST_ENTRY_TYPES+=(\"string\")\n  _PLIST_ENTRY_VALUES+=(\"$_JSON_OUTPUT_BASE64\")\n\n  # config.app_data_collection_default_enabled\n  _APP_DATA_COLLECTION_ENABLED=$(getFirebaseJsonKeyValue \"$_JSON_OUTPUT_RAW\" \"app_data_collection_default_enabled\")\n  if [[ $_APP_DATA_COLLECTION_ENABLED ]]; then\n    _PLIST_ENTRY_KEYS+=(\"FirebaseDataCollectionDefaultEnabled\")\n    _PLIST_ENTRY_TYPES+=(\"bool\")\n    _PLIST_ENTRY_VALUES+=(\"$(jsonBoolToYesNo \"$_APP_DATA_COLLECTION_ENABLED\")\")\n  fi\n\n  # config.analytics_auto_collection_enabled\n  _ANALYTICS_AUTO_COLLECTION=$(getFirebaseJsonKeyValue \"$_JSON_OUTPUT_RAW\" \"analytics_auto_collection_enabled\")\n  if [[ $_ANALYTICS_AUTO_COLLECTION ]]; then\n    _PLIST_ENTRY_KEYS+=(\"FIREBASE_ANALYTICS_COLLECTION_ENABLED\")\n    _PLIST_ENTRY_TYPES+=(\"bool\")\n    _PLIST_ENTRY_VALUES+=(\"$(jsonBoolToYesNo \"$_ANALYTICS_AUTO_COLLECTION\")\")\n  fi\n\n  # config.analytics_collection_deactivated\n  _ANALYTICS_DEACTIVATED=$(getFirebaseJsonKeyValue \"$_JSON_OUTPUT_RAW\" \"analytics_collection_deactivated\")\n  if [[ $_ANALYTICS_DEACTIVATED ]]; then\n    _PLIST_ENTRY_KEYS+=(\"FIREBASE_ANALYTICS_COLLECTION_DEACTIVATED\")\n    _PLIST_ENTRY_TYPES+=(\"bool\")\n    _PLIST_ENTRY_VALUES+=(\"$(jsonBoolToYesNo \"$_ANALYTICS_DEACTIVATED\")\")\n  fi\n\n  # config.analytics_idfv_collection_enabled\n  _ANALYTICS_IDFV_COLLECTION=$(getFirebaseJsonKeyValue \"$_JSON_OUTPUT_RAW\" \"analytics_idfv_collection_enabled\")\n  if [[ $_ANALYTICS_IDFV_COLLECTION ]]; then\n    _PLIST_ENTRY_KEYS+=(\"GOOGLE_ANALYTICS_IDFV_COLLECTION_ENABLED\")\n    _PLIST_ENTRY_TYPES+=(\"bool\")\n    _PLIST_ENTRY_VALUES+=(\"$(jsonBoolToYesNo \"$_ANALYTICS_IDFV_COLLECTION\")\")\n  fi\n\n  # config.analytics_default_allow_analytics_storage\n  _ANALYTICS_STORAGE=$(getFirebaseJsonKeyValue \"$_JSON_OUTPUT_RAW\" \"analytics_default_allow_analytics_storage\")\n  if [[ $_ANALYTICS_STORAGE ]]; then\n    _PLIST_ENTRY_KEYS+=(\"GOOGLE_ANALYTICS_DEFAULT_ALLOW_ANALYTICS_STORAGE\")\n    _PLIST_ENTRY_TYPES+=(\"bool\")\n    _PLIST_ENTRY_VALUES+=(\"$(jsonBoolToYesNo \"$_ANALYTICS_STORAGE\")\")\n  fi\n\n  # config.analytics_default_allow_ad_storage\n  _ANALYTICS_AD_STORAGE=$(getFirebaseJsonKeyValue \"$_JSON_OUTPUT_RAW\" \"analytics_default_allow_ad_storage\")\n  if [[ $_ANALYTICS_AD_STORAGE ]]; then\n    _PLIST_ENTRY_KEYS+=(\"GOOGLE_ANALYTICS_DEFAULT_ALLOW_AD_STORAGE\")\n    _PLIST_ENTRY_TYPES+=(\"bool\")\n    _PLIST_ENTRY_VALUES+=(\"$(jsonBoolToYesNo \"$_ANALYTICS_AD_STORAGE\")\")\n  fi\n\n  # config.analytics_default_allow_ad_user_data\n  _ANALYTICS_AD_USER_DATA=$(getFirebaseJsonKeyValue \"$_JSON_OUTPUT_RAW\" \"analytics_default_allow_ad_user_data\")\n  if [[ $_ANALYTICS_AD_USER_DATA ]]; then\n    _PLIST_ENTRY_KEYS+=(\"GOOGLE_ANALYTICS_DEFAULT_ALLOW_AD_USER_DATA\")\n    _PLIST_ENTRY_TYPES+=(\"bool\")\n    _PLIST_ENTRY_VALUES+=(\"$(jsonBoolToYesNo \"$_ANALYTICS_AD_USER_DATA\")\")\n  fi\n\n  # config.analytics_default_allow_ad_personalization_signals\n  _ANALYTICS_PERSONALIZATION=$(getFirebaseJsonKeyValue \"$_JSON_OUTPUT_RAW\" \"analytics_default_allow_ad_personalization_signals\")\n  if [[ $_ANALYTICS_PERSONALIZATION ]]; then\n    _PLIST_ENTRY_KEYS+=(\"GOOGLE_ANALYTICS_DEFAULT_ALLOW_AD_PERSONALIZATION_SIGNALS\")\n    _PLIST_ENTRY_TYPES+=(\"bool\")\n    _PLIST_ENTRY_VALUES+=(\"$(jsonBoolToYesNo \"$_ANALYTICS_PERSONALIZATION\")\")\n  fi\n\n  # config.analytics_registration_with_ad_network_enabled\n  _ANALYTICS_REGISTRATION_WITH_AD_NETWORK=$(getFirebaseJsonKeyValue \"$_JSON_OUTPUT_RAW\" \"google_analytics_registration_with_ad_network_enabled\")\n  if [[ $_ANALYTICS_REGISTRATION_WITH_AD_NETWORK ]]; then\n    _PLIST_ENTRY_KEYS+=(\"GOOGLE_ANALYTICS_REGISTRATION_WITH_AD_NETWORK_ENABLED\")\n    _PLIST_ENTRY_TYPES+=(\"bool\")\n    _PLIST_ENTRY_VALUES+=(\"$(jsonBoolToYesNo \"$_ANALYTICS_REGISTRATION_WITH_AD_NETWORK\")\")\n  fi\n\n  # config.google_analytics_automatic_screen_reporting_enabled\n  _ANALYTICS_AUTO_SCREEN_REPORTING=$(getFirebaseJsonKeyValue \"$_JSON_OUTPUT_RAW\" \"google_analytics_automatic_screen_reporting_enabled\")\n  if [[ $_ANALYTICS_AUTO_SCREEN_REPORTING ]]; then\n    _PLIST_ENTRY_KEYS+=(\"FirebaseAutomaticScreenReportingEnabled\")\n    _PLIST_ENTRY_TYPES+=(\"bool\")\n    _PLIST_ENTRY_VALUES+=(\"$(jsonBoolToYesNo \"$_ANALYTICS_AUTO_SCREEN_REPORTING\")\")\n  fi\n\n  # config.perf_auto_collection_enabled\n  _PERF_AUTO_COLLECTION=$(getFirebaseJsonKeyValue \"$_JSON_OUTPUT_RAW\" \"perf_auto_collection_enabled\")\n  if [[ $_PERF_AUTO_COLLECTION ]]; then\n    _PLIST_ENTRY_KEYS+=(\"firebase_performance_collection_enabled\")\n    _PLIST_ENTRY_TYPES+=(\"bool\")\n    _PLIST_ENTRY_VALUES+=(\"$(jsonBoolToYesNo \"$_PERF_AUTO_COLLECTION\")\")\n  fi\n\n  # config.perf_collection_deactivated\n  _PERF_DEACTIVATED=$(getFirebaseJsonKeyValue \"$_JSON_OUTPUT_RAW\" \"perf_collection_deactivated\")\n  if [[ $_PERF_DEACTIVATED ]]; then\n    _PLIST_ENTRY_KEYS+=(\"firebase_performance_collection_deactivated\")\n    _PLIST_ENTRY_TYPES+=(\"bool\")\n    _PLIST_ENTRY_VALUES+=(\"$(jsonBoolToYesNo \"$_PERF_DEACTIVATED\")\")\n  fi\n\n  # config.messaging_auto_init_enabled\n  _MESSAGING_AUTO_INIT=$(getFirebaseJsonKeyValue \"$_JSON_OUTPUT_RAW\" \"messaging_auto_init_enabled\")\n  if [[ $_MESSAGING_AUTO_INIT ]]; then\n    _PLIST_ENTRY_KEYS+=(\"FirebaseMessagingAutoInitEnabled\")\n    _PLIST_ENTRY_TYPES+=(\"bool\")\n    _PLIST_ENTRY_VALUES+=(\"$(jsonBoolToYesNo \"$_MESSAGING_AUTO_INIT\")\")\n  fi\n\n  # config.in_app_messaging_auto_colllection_enabled\n  _FIAM_AUTO_INIT=$(getFirebaseJsonKeyValue \"$_JSON_OUTPUT_RAW\" \"in_app_messaging_auto_collection_enabled\")\n  if [[ $_FIAM_AUTO_INIT ]]; then\n    _PLIST_ENTRY_KEYS+=(\"FirebaseInAppMessagingAutomaticDataCollectionEnabled\")\n    _PLIST_ENTRY_TYPES+=(\"bool\")\n    _PLIST_ENTRY_VALUES+=(\"$(jsonBoolToYesNo \"$_FIAM_AUTO_INIT\")\")\n  fi\n\n  # config.app_check_token_auto_refresh\n  _APP_CHECK_TOKEN_AUTO_REFRESH=$(getFirebaseJsonKeyValue \"$_JSON_OUTPUT_RAW\" \"app_check_token_auto_refresh\")\n  if [[ $_APP_CHECK_TOKEN_AUTO_REFRESH ]]; then\n    _PLIST_ENTRY_KEYS+=(\"FirebaseAppCheckTokenAutoRefreshEnabled\")\n    _PLIST_ENTRY_TYPES+=(\"bool\")\n    _PLIST_ENTRY_VALUES+=(\"$(jsonBoolToYesNo \"$_APP_CHECK_TOKEN_AUTO_REFRESH\")\")\n  fi\n\n  # config.crashlytics_disable_auto_disabler - undocumented for now - mainly for debugging, document if becomes useful\n  _CRASHLYTICS_AUTO_DISABLE_ENABLED=$(getFirebaseJsonKeyValue \"$_JSON_OUTPUT_RAW\" \"crashlytics_disable_auto_disabler\")\n  if [[ $_CRASHLYTICS_AUTO_DISABLE_ENABLED == \"true\" ]]; then\n    echo \"Disabled Crashlytics auto disabler.\" # do nothing\n  else\n    _PLIST_ENTRY_KEYS+=(\"FirebaseCrashlyticsCollectionEnabled\")\n    _PLIST_ENTRY_TYPES+=(\"bool\")\n    _PLIST_ENTRY_VALUES+=(\"NO\")\n  fi\nelse\n  _PLIST_ENTRY_KEYS+=(\"firebase_json_raw\")\n  _PLIST_ENTRY_TYPES+=(\"string\")\n  _PLIST_ENTRY_VALUES+=(\"$_JSON_OUTPUT_BASE64\")\n  echo \"warning:   A firebase.json file was not found, whilst this file is optional it is recommended to include it to configure firebase services in React Native Firebase.\"\nfi;\n\necho \"note: 2) Injecting Info.plist entries: \"\n\n# Log out the keys we're adding\nfor i in \"${!_PLIST_ENTRY_KEYS[@]}\"; do\n  echo \"    ->  $i) ${_PLIST_ENTRY_KEYS[$i]}\" \"${_PLIST_ENTRY_TYPES[$i]}\" \"${_PLIST_ENTRY_VALUES[$i]}\"\ndone\n\nfor plist in \"${_TARGET_PLIST}\" \"${_DSYM_PLIST}\" ; do\n  if [[ -f \"${plist}\" ]]; then\n\n    # paths with spaces break the call to setPlistValue. temporarily modify\n    # the shell internal field separator variable (IFS), which normally\n    # includes spaces, to consist only of line breaks\n    oldifs=$IFS\n    IFS=\"\n\"\n\n    for i in \"${!_PLIST_ENTRY_KEYS[@]}\"; do\n      setPlistValue \"${_PLIST_ENTRY_KEYS[$i]}\" \"${_PLIST_ENTRY_TYPES[$i]}\" \"${_PLIST_ENTRY_VALUES[$i]}\" \"${plist}\"\n    done\n\n    # restore the original internal field separator value\n    IFS=$oldifs\n  else\n    echo \"warning:   A Info.plist build output file was not found (${plist})\"\n  fi\ndone\n\necho \"note: <- RNFB build script finished\"\n";
 		};
-		5F6BF0C2EF824875B30C4F47 /* Upload Debug Symbols to Sentry */ = {
-			isa = PBXShellScriptBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			inputPaths = (
-			);
-			name = "Upload Debug Symbols to Sentry";
-			outputPaths = (
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
-			shellScript = "/bin/sh `${NODE_BINARY:-node} --print \"require('path').dirname(require.resolve('@sentry/react-native/package.json')) + '/scripts/sentry-xcode-debug-files.sh'\"`";
-		};
 		800E24972A6A228C8D4807E9 /* [CP] Copy Pods Resources */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
@@ -373,7 +359,21 @@
 			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Sauci/Pods-Sauci-resources.sh\"\n";
 			showEnvVarsInLog = 0;
 		};
-		83F7C8F647047F466249E15C /* [CP] Embed Pods Frameworks */ = {
+		8C453F47518C4580A321EB65 /* Upload Debug Symbols to Sentry */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+			);
+			name = "Upload Debug Symbols to Sentry";
+			outputPaths = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "/bin/sh `${NODE_BINARY:-node} --print \"require('path').dirname(require.resolve('@sentry/react-native/package.json')) + '/scripts/sentry-xcode-debug-files.sh'\"`";
+		};
+		9F907B34B4D68CFE07BD67A0 /* [CP] Embed Pods Frameworks */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
@@ -401,7 +401,7 @@
 				13B07FBC1A68108700A75B9A /* AppDelegate.mm in Sources */,
 				13B07FC11A68108700A75B9A /* main.m in Sources */,
 				B18059E884C0ABDD17F3DC3D /* ExpoModulesProvider.swift in Sources */,
-				C3F98487868740D8A0D61E28 /* noop-file.swift in Sources */,
+				205B32B3C49E4FAE89D6C5F0 /* noop-file.swift in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
diff --git a/apps/mobile/package.json b/apps/mobile/package.json
index 8314f65..b72bd62 100644
--- a/apps/mobile/package.json
+++ b/apps/mobile/package.json
@@ -54,6 +54,7 @@
     "expo-notifications": "~0.29.0",
     "expo-router": "~4.0.0",
     "expo-secure-store": "~14.0.0",
+    "expo-sharing": "^14.0.8",
     "expo-status-bar": "~2.0.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
@@ -66,6 +67,7 @@
     "react-native-screens": "~4.4.0",
     "react-native-svg": "15.8.0",
     "react-native-url-polyfill": "^2.0.0",
+    "react-native-view-shot": "^4.0.3",
     "react-native-web": "~0.19.13",
     "zustand": "^4.4.7"
   },
@@ -77,6 +79,8 @@
     "@types/react": "~18.3.12",
     "@types/react-test-renderer": "^19.1.0",
     "dotenv-cli": "^11.0.0",
+    "eslint": "^8.57.0",
+    "eslint-config-expo": "~8.0.1",
     "jest": "^29.7.0",
     "jest-expo": "~52.0.0",
     "react-test-renderer": "^18.3.1",
diff --git a/apps/mobile/src/__tests__/components/GlassCard.test.tsx b/apps/mobile/src/__tests__/components/GlassCard.test.tsx
index e9c8dce..5ef55f3 100644
--- a/apps/mobile/src/__tests__/components/GlassCard.test.tsx
+++ b/apps/mobile/src/__tests__/components/GlassCard.test.tsx
@@ -72,22 +72,21 @@ describe('GlassCard', () => {
     });
 
     describe('platform behavior', () => {
-        it('uses BlurView on iOS', () => {
+        // GlassCard now uses solid backgrounds instead of BlurView for reliability
+        it('renders correctly on iOS', () => {
             Object.defineProperty(Platform, 'OS', {
                 get: () => 'ios',
             });
 
-            const { getByTestId } = render(
+            const { getByText } = render(
                 <GlassCard>
                     <Text>iOS Card</Text>
                 </GlassCard>
             );
 
-            expect(getByTestId('blur-view')).toBeTruthy();
+            expect(getByText('iOS Card')).toBeTruthy();
         });
 
-        // Note: Testing Android platform requires component re-evaluation
-        // which is complex with module-level Platform checks
         it('renders correctly', () => {
             const { getByText } = render(
                 <GlassCard>
@@ -100,43 +99,42 @@ describe('GlassCard', () => {
     });
 
     describe('intensity prop', () => {
+        // Note: intensity prop is kept for API compatibility but no longer affects visual rendering
+        // since BlurView was replaced with solid backgrounds for reliability
         beforeEach(() => {
             Object.defineProperty(Platform, 'OS', {
                 get: () => 'ios',
             });
         });
 
-        it('applies light intensity', () => {
-            const { getByTestId } = render(
+        it('accepts light intensity prop', () => {
+            const { getByText } = render(
                 <GlassCard intensity="light">
                     <Text>Light Card</Text>
                 </GlassCard>
             );
 
-            const blurView = getByTestId('blur-view');
-            expect(blurView).toBeTruthy();
+            expect(getByText('Light Card')).toBeTruthy();
         });
 
-        it('applies medium intensity by default', () => {
-            const { getByTestId } = render(
+        it('accepts medium intensity by default', () => {
+            const { getByText } = render(
                 <GlassCard>
                     <Text>Medium Card</Text>
                 </GlassCard>
             );
 
-            const blurView = getByTestId('blur-view');
-            expect(blurView).toBeTruthy();
+            expect(getByText('Medium Card')).toBeTruthy();
         });
 
-        it('applies heavy intensity', () => {
-            const { getByTestId } = render(
+        it('accepts heavy intensity prop', () => {
+            const { getByText } = render(
                 <GlassCard intensity="heavy">
                     <Text>Heavy Card</Text>
                 </GlassCard>
             );
 
-            const blurView = getByTestId('blur-view');
-            expect(blurView).toBeTruthy();
+            expect(getByText('Heavy Card')).toBeTruthy();
         });
     });
 
diff --git a/apps/mobile/src/__tests__/components/GlassInput.test.tsx b/apps/mobile/src/__tests__/components/GlassInput.test.tsx
index f951246..ca99172 100644
--- a/apps/mobile/src/__tests__/components/GlassInput.test.tsx
+++ b/apps/mobile/src/__tests__/components/GlassInput.test.tsx
@@ -92,16 +92,17 @@ describe('GlassInput', () => {
     });
 
     describe('platform behavior', () => {
-        it('uses BlurView on iOS', () => {
+        // GlassInput now uses solid backgrounds instead of BlurView for reliability
+        it('renders correctly on iOS', () => {
             Object.defineProperty(Platform, 'OS', {
                 get: () => 'ios',
             });
 
-            const { getByTestId } = render(
+            const { getByPlaceholderText } = render(
                 <GlassInput placeholder="iOS Input" />
             );
 
-            expect(getByTestId('blur-view')).toBeTruthy();
+            expect(getByPlaceholderText('iOS Input')).toBeTruthy();
         });
 
         // Note: Testing Android platform requires component re-evaluation
diff --git a/apps/mobile/src/components/BoutiquePackCard.tsx b/apps/mobile/src/components/BoutiquePackCard.tsx
index 7be75ed..03d3674 100644
--- a/apps/mobile/src/components/BoutiquePackCard.tsx
+++ b/apps/mobile/src/components/BoutiquePackCard.tsx
@@ -1,18 +1,18 @@
-import React from 'react';
-import { StyleSheet, View, Text, TouchableOpacity, Platform } from 'react-native';
-import { LinearGradient } from 'expo-linear-gradient';
-import { BlurView } from 'expo-blur';
-import { Ionicons } from '@expo/vector-icons';
-import Animated, {
-  useAnimatedStyle,
-  withSpring,
-  useSharedValue,
-  FadeIn,
-} from 'react-native-reanimated';
-import { ShimmerEffect } from './ui/ShimmerEffect';
-import { GlassToggle } from './ui/GlassToggle';
-import { colors, gradients, spacing, radius, typography, blur, shadows, animations } from '../theme';
-import type { QuestionPack } from '../types';
+import React from 'react';
+import { StyleSheet, View, Text, TouchableOpacity, Platform } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { BlurView } from 'expo-blur';
+import { Ionicons } from '@expo/vector-icons';
+import Animated, {
+  useAnimatedStyle,
+  withSpring,
+  useSharedValue,
+  FadeIn,
+} from 'react-native-reanimated';
+import { ShimmerEffect } from './ui/ShimmerEffect';
+import { GlassToggle } from './ui/GlassToggle';
+import { colors, gradients, spacing, radius, typography, blur, shadows, animations } from '../theme';
+import type { QuestionPack } from '../types';
 
 // Boutique gradient palette for pack cards
 const BOUTIQUE_GRADIENTS: Array<readonly [string, string]> = [
@@ -71,33 +71,39 @@ export function BoutiquePackCard({
         style={StyleSheet.absoluteFill}
       />
 
-      {/* Glass overlay */}
-      {useBlur ? (
-        <BlurView
-          intensity={blur.light}
-          tint="dark"
-          style={[StyleSheet.absoluteFill, styles.glassOverlay]}
-        />
-      ) : (
-        <View style={[StyleSheet.absoluteFill, styles.glassOverlayFallback]} />
-      )}
+      {/* Flat overlay - removed glass */}
+      <View style={[StyleSheet.absoluteFill, { backgroundColor: 'rgba(0,0,0,0.4)' }]} />
 
-      {/* Silk texture effect */}
+      {/* Silk texture effect - removed for flatter look
       <LinearGradient
         colors={gradients.silkLight as [string, string]}
         start={{ x: 0, y: 0 }}
         end={{ x: 1, y: 1 }}
         style={[StyleSheet.absoluteFill, { opacity: 0.5 }]}
       />
+      */}
 
-      {/* Top highlight */}
+      {/* Top highlight - removed
       <LinearGradient
         colors={[colors.glass.highlight, 'transparent']}
         style={styles.topHighlight}
       />
+      */}
 
       {/* Content */}
       <View style={styles.content}>
+        {/* Explicit Badge (top-left) */}
+        {pack.is_explicit && (
+          <View style={styles.explicitBadge}>
+            <Ionicons
+              name="flame"
+              size={10}
+              color={colors.text}
+            />
+            <Text style={styles.explicitBadgeText}>18+</Text>
+          </View>
+        )}
+
         {/* PRO Badge (top-right) */}
         {pack.is_premium && (
           <View style={[
@@ -148,17 +154,17 @@ export function BoutiquePackCard({
         <View style={styles.footer}>
           <View style={styles.questionBadge}>
             <Text style={styles.questionCount}>{questionCount}</Text>
-            <Text style={styles.questionLabel}>questions</Text>
-          </View>
-
-          <GlassToggle
-            value={isEnabled}
-            onValueChange={onToggle}
-            disabled={isPremiumLocked}
-            style={isPremiumLocked ? { opacity: 0.4 } : undefined}
-          />
-        </View>
-      </View>
+            <Text style={styles.questionLabel}>questions</Text>
+          </View>
+
+          <GlassToggle
+            value={isEnabled}
+            onValueChange={onToggle}
+            disabled={isPremiumLocked}
+            style={isPremiumLocked ? { opacity: 0.4 } : undefined}
+          />
+        </View>
+      </View>
 
       {/* Lock overlay for premium locked packs */}
       {isPremiumLocked && (
@@ -209,7 +215,6 @@ const styles = StyleSheet.create({
   cardPremium: {
     borderWidth: 1,
     borderColor: colors.premium.gold,
-    ...shadows.glow(colors.premium.goldGlow),
   },
   cardEnabled: {
     borderWidth: 1,
@@ -224,23 +229,37 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
   },
   glassOverlay: {
-    backgroundColor: 'rgba(22, 33, 62, 0.3)',
+    display: 'none',
   },
   glassOverlayFallback: {
-    backgroundColor: 'rgba(22, 33, 62, 0.5)',
+    display: 'none',
   },
   topHighlight: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    height: 40,
+    display: 'none',
   },
   content: {
     flex: 1,
     padding: spacing.md,
     justifyContent: 'space-between',
   },
+  explicitBadge: {
+    position: 'absolute',
+    top: spacing.sm,
+    left: spacing.sm,
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: colors.error,
+    paddingHorizontal: spacing.sm,
+    paddingVertical: 3,
+    borderRadius: radius.xs,
+    gap: 3,
+    zIndex: 10,
+  },
+  explicitBadgeText: {
+    ...typography.caption2,
+    color: colors.text,
+    fontWeight: '700',
+  },
   proBadge: {
     position: 'absolute',
     top: spacing.sm,
@@ -255,7 +274,7 @@ const styles = StyleSheet.create({
     zIndex: 10,
   },
   proBadgeLocked: {
-    backgroundColor: colors.glass.backgroundLight,
+    backgroundColor: colors.background, // Flat bg
   },
   proBadgeText: {
     ...typography.caption2,
diff --git a/apps/mobile/src/components/MatchConfetti.tsx b/apps/mobile/src/components/MatchConfetti.tsx
new file mode 100644
index 0000000..379806a
--- /dev/null
+++ b/apps/mobile/src/components/MatchConfetti.tsx
@@ -0,0 +1,360 @@
+/**
+ * MatchConfetti - Premium celebration animation for match moments
+ *
+ * Uses Reanimated for smooth animations. Displays an elegant burst of
+ * hearts and sparkles that explode outward, plus a prominent "It's a Match!" popup.
+ */
+import React, { useEffect, useMemo } from 'react';
+import { View, StyleSheet, Dimensions, Text } from 'react-native';
+import Animated, {
+    useSharedValue,
+    useAnimatedStyle,
+    withTiming,
+    withDelay,
+    withSpring,
+    withSequence,
+    Easing,
+    interpolate,
+} from 'react-native-reanimated';
+import { LinearGradient } from 'expo-linear-gradient';
+import { Ionicons } from '@expo/vector-icons';
+import * as Haptics from 'expo-haptics';
+import { Platform } from 'react-native';
+import { colors, typography, spacing, radius } from '../theme';
+
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
+
+interface Props {
+    visible: boolean;
+    onAnimationComplete?: () => void;
+}
+
+type ParticleShape = 'heart' | 'sparkle' | 'circle' | 'star';
+
+interface Particle {
+    id: number;
+    startX: number;
+    startY: number;
+    endX: number;
+    endY: number;
+    rotation: number;
+    color: string;
+    size: number;
+    delay: number;
+    shape: ParticleShape;
+}
+
+const CONFETTI_COLORS = [
+    colors.primary,        // Brand pink #e1306c
+    '#FF6B9D',            // Hot pink
+    '#FFB3C6',            // Light pink
+    colors.premium.rose,   // Soft rose
+    '#9b59b6',            // Secondary purple
+    colors.premium.gold,   // Gold accent
+    '#FF8A5B',            // Coral
+    '#FFFFFF',            // White sparkle
+];
+
+const PARTICLE_COUNT = 40;
+
+// Particle shapes distribution
+const SHAPES: ParticleShape[] = ['heart', 'heart', 'sparkle', 'sparkle', 'circle', 'star'];
+
+// Generate particle with physics-based trajectory
+const generateParticle = (index: number): Particle => {
+    // Start from center of screen
+    const startX = SCREEN_WIDTH / 2;
+    const startY = SCREEN_HEIGHT / 2 - 80;
+
+    // Random angle for explosion (360 degrees) with more upward bias
+    const baseAngle = (index / PARTICLE_COUNT) * Math.PI * 2;
+    const angle = baseAngle + (Math.random() - 0.5) * 0.8;
+    const velocity = 180 + Math.random() * 280;
+
+    // Calculate end position - more spread, less gravity drop for hearts
+    const endX = startX + Math.cos(angle) * velocity;
+    const endY = startY + Math.sin(angle) * velocity + 250;
+
+    const shape = SHAPES[Math.floor(Math.random() * SHAPES.length)];
+
+    return {
+        id: index,
+        startX,
+        startY,
+        endX,
+        endY,
+        rotation: Math.random() * 540 - 270,
+        color: CONFETTI_COLORS[Math.floor(Math.random() * CONFETTI_COLORS.length)],
+        size: shape === 'heart' ? 14 + Math.random() * 10 : 8 + Math.random() * 8,
+        delay: Math.random() * 150,
+        shape,
+    };
+};
+
+// Heart shape component
+const HeartShape: React.FC<{ size: number; color: string }> = ({ size, color }) => (
+    <Ionicons name="heart" size={size} color={color} />
+);
+
+// Sparkle/star shape component
+const SparkleShape: React.FC<{ size: number; color: string }> = ({ size, color }) => (
+    <Ionicons name="sparkles" size={size} color={color} />
+);
+
+// Star shape component
+const StarShape: React.FC<{ size: number; color: string }> = ({ size, color }) => (
+    <Ionicons name="star" size={size} color={color} />
+);
+
+const ConfettiParticle: React.FC<{ particle: Particle; visible: boolean }> = ({
+    particle,
+    visible,
+}) => {
+    const progress = useSharedValue(0);
+    const opacity = useSharedValue(0);
+
+    useEffect(() => {
+        if (visible) {
+            progress.value = 0;
+            opacity.value = 1;
+
+            progress.value = withDelay(
+                particle.delay,
+                withTiming(1, {
+                    duration: 1000,
+                    easing: Easing.out(Easing.cubic),
+                })
+            );
+
+            opacity.value = withDelay(
+                particle.delay + 600,
+                withTiming(0, {
+                    duration: 400,
+                    easing: Easing.out(Easing.ease),
+                })
+            );
+        } else {
+            progress.value = 0;
+            opacity.value = 0;
+        }
+    }, [visible]);
+
+    const animatedStyle = useAnimatedStyle(() => {
+        const x = particle.startX + (particle.endX - particle.startX) * progress.value;
+        const y = particle.startY + (particle.endY - particle.startY) * progress.value;
+        const rotation = particle.rotation * progress.value;
+        // Scale pulses slightly then shrinks
+        const scale = interpolate(progress.value, [0, 0.2, 1], [0.5, 1.2, 0.6]);
+
+        return {
+            transform: [
+                { translateX: x },
+                { translateY: y },
+                { rotate: `${rotation}deg` },
+                { scale },
+            ],
+            opacity: opacity.value,
+        };
+    });
+
+    const renderShape = () => {
+        switch (particle.shape) {
+            case 'heart':
+                return <HeartShape size={particle.size} color={particle.color} />;
+            case 'sparkle':
+                return <SparkleShape size={particle.size} color={particle.color} />;
+            case 'star':
+                return <StarShape size={particle.size} color={particle.color} />;
+            case 'circle':
+            default:
+                return (
+                    <View
+                        style={{
+                            width: particle.size,
+                            height: particle.size,
+                            backgroundColor: particle.color,
+                            borderRadius: particle.size / 2,
+                        }}
+                    />
+                );
+        }
+    };
+
+    return (
+        <Animated.View style={[styles.particle, animatedStyle]}>
+            {renderShape()}
+        </Animated.View>
+    );
+};
+
+// Animated popup message component - prominent and celebratory
+const MatchPopup: React.FC<{ visible: boolean }> = ({ visible }) => {
+    const scale = useSharedValue(0);
+    const opacity = useSharedValue(0);
+    const iconScale = useSharedValue(0);
+
+    useEffect(() => {
+        if (visible) {
+            // Pop in with bouncy spring, then fade out after delay
+            scale.value = withSequence(
+                withSpring(1, { damping: 10, stiffness: 180 }),
+                withDelay(3200, withTiming(0.9, { duration: 400 }))
+            );
+
+            // Fade in quickly, stay visible, then fade out
+            opacity.value = withSequence(
+                withTiming(1, { duration: 150 }),
+                withDelay(3200, withTiming(0, { duration: 400 }))
+            );
+
+            // Heart icon bounces after text appears
+            iconScale.value = withDelay(
+                150,
+                withSequence(
+                    withSpring(1.3, { damping: 8, stiffness: 200 }),
+                    withSpring(1, { damping: 12, stiffness: 200 })
+                )
+            );
+        } else {
+            scale.value = 0;
+            opacity.value = 0;
+            iconScale.value = 0;
+        }
+    }, [visible]);
+
+    const animatedStyle = useAnimatedStyle(() => ({
+        transform: [{ scale: scale.value }],
+        opacity: opacity.value,
+    }));
+
+    const iconAnimatedStyle = useAnimatedStyle(() => ({
+        transform: [{ scale: iconScale.value }],
+    }));
+
+    return (
+        <Animated.View style={[styles.popupContainer, animatedStyle]}>
+            <View style={styles.popup}>
+                <LinearGradient
+                    colors={[colors.primary, '#9b59b6']}
+                    start={{ x: 0, y: 0 }}
+                    end={{ x: 1, y: 1 }}
+                    style={styles.popupGradient}
+                >
+                    <Text style={styles.popupTitle}>You both answered!</Text>
+                    <Animated.View style={iconAnimatedStyle}>
+                        <Ionicons name="heart" size={32} color="#fff" style={styles.popupIcon} />
+                    </Animated.View>
+                </LinearGradient>
+            </View>
+        </Animated.View>
+    );
+};
+
+export const MatchConfetti: React.FC<Props> = ({ visible, onAnimationComplete }) => {
+    const particles = useMemo(
+        () => Array.from({ length: PARTICLE_COUNT }, (_, i) => generateParticle(i)),
+        []
+    );
+
+    // Trigger haptic and callback when animation starts
+    useEffect(() => {
+        if (visible) {
+            // Celebration haptic pattern - satisfying burst
+            if (Platform.OS !== 'web') {
+                // Initial success notification
+                Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+
+                // Follow up with impacts for celebration feel
+                setTimeout(() => {
+                    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);
+                }, 80);
+                setTimeout(() => {
+                    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+                }, 180);
+                setTimeout(() => {
+                    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);
+                }, 300);
+            }
+
+            // Notify parent when animation completes (after popup fades)
+            if (onAnimationComplete) {
+                const timer = setTimeout(() => {
+                    onAnimationComplete();
+                }, 4000);
+                return () => clearTimeout(timer);
+            }
+        }
+    }, [visible, onAnimationComplete]);
+
+    if (!visible) return null;
+
+    return (
+        <View style={styles.container} pointerEvents="none">
+            {/* Confetti particles */}
+            {particles.map((particle) => (
+                <ConfettiParticle
+                    key={particle.id}
+                    particle={particle}
+                    visible={visible}
+                />
+            ))}
+
+            {/* Match popup message */}
+            <MatchPopup visible={visible} />
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        ...StyleSheet.absoluteFillObject,
+        zIndex: 1000,
+    },
+    particle: {
+        position: 'absolute',
+        left: 0,
+        top: 0,
+    },
+    popupContainer: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        justifyContent: 'center',
+        alignItems: 'center',
+        zIndex: 10,
+    },
+    popup: {
+        borderRadius: radius.xl,
+        shadowColor: colors.primary,
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.6,
+        shadowRadius: 24,
+        elevation: 15,
+        overflow: 'hidden',
+    },
+    popupGradient: {
+        paddingHorizontal: spacing.xl + spacing.md,
+        paddingVertical: spacing.lg + spacing.sm,
+        alignItems: 'center',
+    },
+    popupTitle: {
+        ...typography.title1,
+        color: '#fff',
+        fontWeight: '800',
+        textAlign: 'center',
+        textShadowColor: 'rgba(0, 0, 0, 0.3)',
+        textShadowOffset: { width: 0, height: 2 },
+        textShadowRadius: 4,
+    },
+    popupSubtext: {
+        ...typography.callout,
+        color: 'rgba(255, 255, 255, 0.9)',
+        textAlign: 'center',
+        marginTop: spacing.xs,
+    },
+    popupIcon: {
+        marginTop: spacing.sm,
+    },
+});
diff --git a/apps/mobile/src/components/MatchNotificationModal.tsx b/apps/mobile/src/components/MatchNotificationModal.tsx
index c86a78d..f159ae7 100644
--- a/apps/mobile/src/components/MatchNotificationModal.tsx
+++ b/apps/mobile/src/components/MatchNotificationModal.tsx
@@ -252,18 +252,12 @@ export const MatchNotificationModal: React.FC<Props> = ({
                 <View style={styles.glowOuter} />
 
                 <View style={styles.modalContainer}>
-                    {/* Glass background */}
-                    <BlurView intensity={40} tint="dark" style={styles.blurContainer}>
-                        <LinearGradient
-                            colors={['rgba(22, 33, 62, 0.95)', 'rgba(13, 13, 26, 0.98)']}
-                            style={styles.gradientOverlay}
-                        />
-                    </BlurView>
-
+                    {/* Flat background */}
+                    <View style={styles.flatBackground} />
                     {/* Content */}
                     <View style={styles.content}>
-                        {/* Title section */}
-                        <Text style={styles.title}>It's a Match!</Text>
+                            {/* Title section */}
+                            <Text style={styles.title}>It's a Match!</Text>
 
                         {/* Match type badge */}
                         <View style={[styles.matchTypeBadge, { borderColor: `${matchTypeInfo.color}30` }]}>
@@ -342,9 +336,6 @@ export const MatchNotificationModal: React.FC<Props> = ({
                             </Pressable>
                         </View>
                     </View>
-
-                    {/* Border */}
-                    <View style={styles.border} pointerEvents="none" />
                 </View>
             </Animated.View>
         </Animated.View>
@@ -374,24 +365,22 @@ const styles = StyleSheet.create({
         borderRadius: radius.xl + 3,
         backgroundColor: 'transparent',
         borderWidth: 1,
-        borderColor: 'rgba(233, 69, 96, 0.15)',
-        shadowColor: colors.primary,
-        shadowOffset: { width: 0, height: 0 },
-        shadowOpacity: 0.2,
-        shadowRadius: 20,
-        elevation: 8,
+        borderColor: colors.primary, // Simpler border
+        opacity: 0.2, // Subtle opacity
     },
     modalContainer: {
         width: '100%',
         borderRadius: radius.xl,
         overflow: 'hidden',
+        backgroundColor: colors.backgroundLight, // Solid background
+        borderWidth: 1,
+        borderColor: colors.border,
     },
-    blurContainer: {
-        ...StyleSheet.absoluteFillObject,
-    },
-    gradientOverlay: {
+    flatBackground: {
         ...StyleSheet.absoluteFillObject,
+        backgroundColor: colors.backgroundLight,
     },
+    // Removed blur/gradient styles
     content: {
         padding: spacing.xl,
         paddingTop: spacing.lg,
@@ -404,7 +393,7 @@ const styles = StyleSheet.create({
         marginBottom: spacing.sm,
     },
     matchTypeBadge: {
-        backgroundColor: 'rgba(255, 255, 255, 0.05)',
+        backgroundColor: colors.background, // Darker flat background
         paddingHorizontal: spacing.lg,
         paddingVertical: spacing.sm,
         borderRadius: radius.full,
@@ -523,21 +512,17 @@ const styles = StyleSheet.create({
     dismissButton: {
         flex: 1,
         borderRadius: radius.lg,
-        backgroundColor: colors.glass.background,
+        backgroundColor: colors.background, // Flat dark background
         borderWidth: 1,
-        borderColor: colors.glass.border,
+        borderColor: colors.border,
         paddingVertical: spacing.md,
         alignItems: 'center',
         justifyContent: 'center',
     },
+    // Removed border style since it's now on modalContainer
+    // border: { ... }
     dismissButtonText: {
         ...typography.headline,
         color: colors.textSecondary,
     },
-    border: {
-        ...StyleSheet.absoluteFillObject,
-        borderRadius: radius.xl,
-        borderWidth: 1,
-        borderColor: 'rgba(233, 69, 96, 0.2)',
-    },
 });
diff --git a/apps/mobile/src/components/discovery/CompactHeader.tsx b/apps/mobile/src/components/discovery/CompactHeader.tsx
index 6bbaeeb..43cbd24 100644
--- a/apps/mobile/src/components/discovery/CompactHeader.tsx
+++ b/apps/mobile/src/components/discovery/CompactHeader.tsx
@@ -1,72 +1,96 @@
-import React from 'react';
-import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
-import { Ionicons } from '@expo/vector-icons';
-import { Image } from 'expo-image';
-import { router } from 'expo-router';
-import Animated, { FadeInDown } from 'react-native-reanimated';
-import { colors, spacing, typography, radius } from '../../theme';
-import type { Profile, Couple } from '@/types';
-
-interface CompactHeaderProps {
-  user: Profile | null;
-  partner: Profile | null;
-  couple: Couple | null;
-}
-
-export function CompactHeader({ user, partner, couple }: CompactHeaderProps) {
-  return (
-    <Animated.View
-      entering={FadeInDown.delay(100).duration(500).springify()}
-      style={styles.container}
-    >
-      {/* Greeting */}
-      <View style={styles.greetingRow}>
-        <View>
-          <Text style={styles.welcomeLabel}>Discover</Text>
-          <Text style={styles.greeting}>
-            Hey, {user?.name || 'Beautiful'}
-          </Text>
-        </View>
-
-        {/* Partner badge */}
-        {partner ? (
-          <View style={styles.partnerBadge}>
-            {partner.avatar_url ? (
-              <Image
-                source={{ uri: partner.avatar_url }}
-                style={styles.partnerAvatar}
-                cachePolicy="disk"
-                contentFit="cover"
-                transition={200}
-              />
-            ) : (
-              <Ionicons name="heart" size={12} color={colors.primary} />
-            )}
-            <Text style={styles.partnerText} numberOfLines={1}>
-              {partner.name || partner.email?.split('@')[0] || 'Partner'}
-            </Text>
-          </View>
-        ) : couple ? (
-          <TouchableOpacity
-            style={styles.waitingBadge}
-            onPress={() => router.push('/(app)/pairing')}
-          >
-            <Ionicons name="hourglass-outline" size={12} color={colors.primary} />
-            <Text style={styles.waitingText}>Waiting</Text>
-          </TouchableOpacity>
-        ) : (
-          <TouchableOpacity
-            style={styles.pairBadge}
-            onPress={() => router.push('/(app)/pairing')}
-          >
-            <Ionicons name="add-circle-outline" size={14} color={colors.textTertiary} />
-            <Text style={styles.pairText}>Connect</Text>
-          </TouchableOpacity>
-        )}
-      </View>
-    </Animated.View>
-  );
-}
+import React from 'react';
+import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { Image } from 'expo-image';
+import { router } from 'expo-router';
+import Animated, { FadeInDown } from 'react-native-reanimated';
+import { colors, spacing, typography, radius } from '../../theme';
+import type { Profile, Couple } from '@/types';
+
+interface CompactHeaderProps {
+  user: Profile | null;
+  partner: Profile | null;
+  couple: Couple | null;
+  label?: string;
+  accessory?: React.ReactNode;
+  showGreeting?: boolean;
+  showPartnerBadge?: boolean;
+}
+
+export function CompactHeader({
+  user,
+  partner,
+  couple,
+  label = 'Discover',
+  accessory,
+  showGreeting = true,
+  showPartnerBadge = true,
+}: CompactHeaderProps) {
+  return (
+    <Animated.View
+      entering={FadeInDown.delay(100).duration(500).springify()}
+      style={styles.container}
+    >
+      {showGreeting ? (
+        <View style={styles.greetingRow}>
+          <View>
+            <Text style={styles.welcomeLabel}>{label}</Text>
+            <Text style={styles.greeting}>
+              Hey, {user?.name || 'Beautiful'}
+            </Text>
+          </View>
+
+          <View style={styles.rightSection}>
+            {/* Partner badge */}
+            {showPartnerBadge ? (
+              partner ? (
+                <View style={styles.partnerBadge}>
+                  {partner.avatar_url ? (
+                    <Image
+                      source={{ uri: partner.avatar_url }}
+                      style={styles.partnerAvatar}
+                      cachePolicy="disk"
+                      contentFit="cover"
+                      transition={200}
+                    />
+                  ) : (
+                    <Ionicons name="heart" size={12} color={colors.primary} />
+                  )}
+                  <Text style={styles.partnerText} numberOfLines={1}>
+                    {partner.name || partner.email?.split('@')[0] || 'Partner'}
+                  </Text>
+                </View>
+              ) : couple ? (
+                <TouchableOpacity
+                  style={styles.waitingBadge}
+                  onPress={() => router.push('/(app)/pairing')}
+                >
+                  <Ionicons name="hourglass-outline" size={12} color={colors.primary} />
+                  <Text style={styles.waitingText}>Waiting</Text>
+                </TouchableOpacity>
+              ) : (
+                <TouchableOpacity
+                  style={styles.pairBadge}
+                  onPress={() => router.push('/(app)/pairing')}
+                >
+                  <Ionicons name="add-circle-outline" size={14} color={colors.textTertiary} />
+                  <Text style={styles.pairText}>Connect</Text>
+                </TouchableOpacity>
+              )
+            ) : null}
+            {accessory ? <View style={styles.accessory}>{accessory}</View> : null}
+          </View>
+        </View>
+      ) : (
+        <View style={styles.titleRow}>
+          {accessory ? <View style={styles.titleSpacer} /> : null}
+          <Text style={styles.titleOnly}>{label}</Text>
+          {accessory ? <View style={styles.accessory}>{accessory}</View> : null}
+        </View>
+      )}
+    </Animated.View>
+  );
+}
 
 const styles = StyleSheet.create({
   container: {
@@ -74,11 +98,34 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.lg,
     paddingBottom: spacing.lg,
   },
-  greetingRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
+  greetingRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  rightSection: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+  },
+  accessory: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  titleRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  titleOnly: {
+    ...typography.title2,
+    color: colors.text,
+    textAlign: 'center',
+    flex: 1,
+  },
+  titleSpacer: {
+    width: 32,
+  },
   welcomeLabel: {
     ...typography.caption2,
     fontWeight: '600',
diff --git a/apps/mobile/src/components/discovery/ContentRow.tsx b/apps/mobile/src/components/discovery/ContentRow.tsx
index 4de57bf..bcdb868 100644
--- a/apps/mobile/src/components/discovery/ContentRow.tsx
+++ b/apps/mobile/src/components/discovery/ContentRow.tsx
@@ -32,7 +32,7 @@ export function ContentRow({
   const handleSeeAll = () => {
     // Navigate to packs screen with category filter
     router.push({
-      pathname: '/(app)/packs',
+      pathname: '/',
       params: categoryId ? { category: categoryId } : undefined,
     });
   };
diff --git a/apps/mobile/src/components/discovery/ContentTile.tsx b/apps/mobile/src/components/discovery/ContentTile.tsx
index 7e10179..7e511f6 100644
--- a/apps/mobile/src/components/discovery/ContentTile.tsx
+++ b/apps/mobile/src/components/discovery/ContentTile.tsx
@@ -29,14 +29,13 @@ export function ContentTile({ pack, isLocked, isNew = false, progress, onPress }
   };
   const backgroundColor = getCategoryColor(pack.category);
   const icon = pack.icon || pack.category?.icon || 'layers';
-  const questionCount = pack.questions?.[0]?.count ?? 0;
 
   // Calculate progress percentage
   const progressPercent = progress && progress.totalQuestions > 0
     ? progress.answeredQuestions / progress.totalQuestions
     : 0;
-  // Show progress ring for packs with questions (even at 0%)
-  const showProgress = progress && progress.totalQuestions > 0;
+  // Always show progress ring when progress data exists (even at 0% or 0 questions)
+  const showProgress = !!progress;
 
   return (
     <TouchableOpacity
@@ -55,6 +54,12 @@ export function ContentTile({ pack, isLocked, isNew = false, progress, onPress }
             />
           </View>
           <View style={styles.badges}>
+            {pack.is_explicit && (
+              <View style={styles.explicitBadge}>
+                <Ionicons name="flame" size={10} color={colors.text} />
+                <Text style={styles.explicitBadgeText}>18+</Text>
+              </View>
+            )}
             {isNew && (
               <View style={styles.newBadge}>
                 <Text style={styles.newBadgeText}>NEW</Text>
@@ -87,13 +92,6 @@ export function ContentTile({ pack, isLocked, isNew = false, progress, onPress }
           </Text>
         </View>
 
-        {/* Bottom info */}
-        <View style={styles.bottomRow}>
-          <Text style={styles.countText}>
-            {questionCount} {questionCount === 1 ? 'question' : 'questions'}
-          </Text>
-        </View>
-
         {/* Decorative overlay for depth */}
         <View style={styles.overlay} />
       </View>
@@ -136,6 +134,20 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     gap: spacing.xs,
   },
+  explicitBadge: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: colors.error,
+    paddingHorizontal: spacing.sm,
+    paddingVertical: 2,
+    borderRadius: radius.xs,
+    gap: 2,
+  },
+  explicitBadgeText: {
+    ...typography.caption2,
+    fontWeight: '700',
+    color: colors.text,
+  },
   newBadge: {
     backgroundColor: 'rgba(255, 255, 255, 0.95)',
     paddingHorizontal: spacing.sm,
@@ -173,13 +185,6 @@ const styles = StyleSheet.create({
     color: colors.text,
     fontWeight: '700',
   },
-  bottomRow: {
-    marginTop: 'auto',
-  },
-  countText: {
-    ...typography.caption1,
-    color: 'rgba(255, 255, 255, 0.7)',
-  },
 });
 
 export default ContentTile;
diff --git a/apps/mobile/src/components/feedback/QuestionFeedbackModal.tsx b/apps/mobile/src/components/feedback/QuestionFeedbackModal.tsx
index 1cdf72c..ba72c0c 100644
--- a/apps/mobile/src/components/feedback/QuestionFeedbackModal.tsx
+++ b/apps/mobile/src/components/feedback/QuestionFeedbackModal.tsx
@@ -1,338 +1,338 @@
-import React, { useState } from 'react';
-import {
-    View,
-    Text,
-    StyleSheet,
-    Modal,
-    TouchableOpacity,
-    TextInput,
-    Alert,
-    ActivityIndicator,
-} from 'react-native';
-import { Ionicons } from '@expo/vector-icons';
-import { LinearGradient } from 'expo-linear-gradient';
-import { supabase } from '../../lib/supabase';
-import { getDeviceInfo } from '../../lib/deviceInfo';
-import { useAuthStore } from '../../store';
-import { colors, gradients, spacing, radius, typography } from '../../theme';
-
-interface QuestionFeedbackModalProps {
-    visible: boolean;
-    onClose: () => void;
-    questionId: string;
-    questionText: string;
-}
-
-const FEEDBACK_REASONS = [
-    { id: 'inappropriate', label: 'Inappropriate', icon: 'warning' as const },
-    { id: 'confusing', label: 'Confusing', icon: 'help-circle' as const },
-    { id: 'duplicate', label: 'Duplicate', icon: 'copy' as const },
-    { id: 'other', label: 'Other', icon: 'ellipsis-horizontal' as const },
-];
-
-export function QuestionFeedbackModal({
-    visible,
-    onClose,
-    questionId,
-    questionText,
-}: QuestionFeedbackModalProps) {
-    const { user } = useAuthStore();
-    const [selectedReason, setSelectedReason] = useState<string | null>(null);
-    const [additionalInfo, setAdditionalInfo] = useState('');
-    const [isSubmitting, setIsSubmitting] = useState(false);
-
-    const resetForm = () => {
-        setSelectedReason(null);
-        setAdditionalInfo('');
-    };
-
-    const handleClose = () => {
-        if (!isSubmitting) {
-            resetForm();
-            onClose();
-        }
-    };
-
-    const handleSubmit = async () => {
-        if (!selectedReason) {
-            Alert.alert('Please select a reason', 'Choose why you want to report this question.');
-            return;
-        }
-
-        if (!user) {
-            Alert.alert('Error', 'You must be logged in to submit feedback.');
-            return;
-        }
-
-        setIsSubmitting(true);
-
-        try {
-            const deviceInfo = getDeviceInfo();
-            const reasonLabel = FEEDBACK_REASONS.find(r => r.id === selectedReason)?.label || selectedReason;
-
-            const { error } = await supabase.from('feedback').insert({
-                user_id: user.id,
-                type: 'question',
-                title: `Question Feedback: ${reasonLabel}`,
-                description: additionalInfo.trim() || `Reported as: ${reasonLabel}`,
-                question_id: questionId,
-                device_info: deviceInfo,
-            });
-
-            if (error) throw error;
-
-            Alert.alert('Thank you!', 'Your feedback has been submitted.', [
-                { text: 'OK', onPress: handleClose },
-            ]);
-
-            resetForm();
-        } catch (error) {
-            Alert.alert('Error', 'Failed to submit feedback. Please try again.');
-            console.error(error);
-        } finally {
-            setIsSubmitting(false);
-        }
-    };
-
-    return (
-        <Modal visible={visible} transparent animationType="fade" onRequestClose={handleClose}>
-            <View style={styles.overlay}>
-                <View style={styles.content}>
-                    {/* Header */}
-                    <View style={styles.header}>
-                        <LinearGradient
-                            colors={gradients.primary as [string, string]}
-                            style={styles.headerIcon}
-                            start={{ x: 0, y: 0 }}
-                            end={{ x: 1, y: 1 }}
-                        >
-                            <Ionicons name="flag" size={24} color={colors.text} />
-                        </LinearGradient>
-                        <Text style={styles.headerTitle}>Report Question</Text>
-                    </View>
-
-                    {/* Question Preview */}
-                    <View style={styles.questionPreview}>
-                        <Text style={styles.questionText} numberOfLines={2}>
-                            "{questionText}"
-                        </Text>
-                    </View>
-
-                    {/* Reason Selection */}
-                    <Text style={styles.label}>What's the issue?</Text>
-                    <View style={styles.reasonsGrid}>
-                        {FEEDBACK_REASONS.map((reason) => (
-                            <TouchableOpacity
-                                key={reason.id}
-                                style={[
-                                    styles.reasonButton,
-                                    selectedReason === reason.id && styles.reasonButtonActive,
-                                ]}
-                                onPress={() => setSelectedReason(reason.id)}
-                                activeOpacity={0.7}
-                                disabled={isSubmitting}
-                            >
-                                <Ionicons
-                                    name={reason.icon}
-                                    size={20}
-                                    color={
-                                        selectedReason === reason.id
-                                            ? colors.text
-                                            : colors.textSecondary
-                                    }
-                                />
-                                <Text
-                                    style={[
-                                        styles.reasonText,
-                                        selectedReason === reason.id && styles.reasonTextActive,
-                                    ]}
-                                >
-                                    {reason.label}
-                                </Text>
-                            </TouchableOpacity>
-                        ))}
-                    </View>
-
-                    {/* Additional Info */}
-                    <Text style={styles.label}>Additional details (optional)</Text>
-                    <TextInput
-                        style={styles.input}
-                        value={additionalInfo}
-                        onChangeText={setAdditionalInfo}
-                        placeholder="Tell us more..."
-                        placeholderTextColor={colors.textTertiary}
-                        multiline
-                        numberOfLines={3}
-                        textAlignVertical="top"
-                        editable={!isSubmitting}
-                    />
-
-                    {/* Buttons */}
-                    <View style={styles.buttons}>
-                        <TouchableOpacity
-                            style={styles.cancelButton}
-                            onPress={handleClose}
-                            disabled={isSubmitting}
-                            activeOpacity={0.7}
-                        >
-                            <Text style={styles.cancelButtonText}>Cancel</Text>
-                        </TouchableOpacity>
-
-                        <TouchableOpacity
-                            style={[
-                                styles.submitButton,
-                                !selectedReason && styles.submitButtonDisabled,
-                            ]}
-                            onPress={handleSubmit}
-                            disabled={isSubmitting || !selectedReason}
-                            activeOpacity={0.7}
-                        >
-                            {isSubmitting ? (
-                                <ActivityIndicator size="small" color={colors.text} />
-                            ) : (
-                                <>
-                                    <Ionicons name="send" size={16} color={colors.text} />
-                                    <Text style={styles.submitButtonText}>Submit</Text>
-                                </>
-                            )}
-                        </TouchableOpacity>
-                    </View>
-                </View>
-            </View>
-        </Modal>
-    );
-}
-
-const styles = StyleSheet.create({
-    overlay: {
-        flex: 1,
-        backgroundColor: 'rgba(0, 0, 0, 0.8)',
-        justifyContent: 'center',
-        alignItems: 'center',
-        padding: spacing.lg,
-    },
-    content: {
-        backgroundColor: colors.backgroundLight,
-        borderRadius: radius.xl,
-        padding: spacing.lg,
-        width: '100%',
-        maxWidth: 360,
-        borderWidth: 1,
-        borderColor: colors.glass.border,
-    },
-    header: {
-        alignItems: 'center',
-        marginBottom: spacing.md,
-    },
-    headerIcon: {
-        width: 48,
-        height: 48,
-        borderRadius: 24,
-        justifyContent: 'center',
-        alignItems: 'center',
-        marginBottom: spacing.sm,
-    },
-    headerTitle: {
-        ...typography.title3,
-        color: colors.text,
-        textAlign: 'center',
-    },
-    questionPreview: {
-        backgroundColor: colors.glass.background,
-        borderRadius: radius.md,
-        padding: spacing.md,
-        marginBottom: spacing.md,
-        borderWidth: 1,
-        borderColor: colors.glass.border,
-    },
-    questionText: {
-        ...typography.subhead,
-        color: colors.textSecondary,
-        fontStyle: 'italic',
-        textAlign: 'center',
-    },
-    label: {
-        ...typography.subhead,
-        color: colors.textSecondary,
-        marginBottom: spacing.sm,
-        marginLeft: spacing.xs,
-    },
-    reasonsGrid: {
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        gap: spacing.sm,
-        marginBottom: spacing.md,
-    },
-    reasonButton: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: spacing.xs,
-        backgroundColor: colors.glass.background,
-        paddingVertical: spacing.sm,
-        paddingHorizontal: spacing.md,
-        borderRadius: radius.md,
-        borderWidth: 1,
-        borderColor: colors.glass.border,
-    },
-    reasonButtonActive: {
-        backgroundColor: colors.primary,
-        borderColor: colors.primary,
-    },
-    reasonText: {
-        ...typography.caption1,
-        color: colors.textSecondary,
-        fontWeight: '600',
-    },
-    reasonTextActive: {
-        color: colors.text,
-    },
-    input: {
-        backgroundColor: colors.glass.background,
-        borderRadius: radius.md,
-        borderWidth: 1,
-        borderColor: colors.glass.border,
-        padding: spacing.md,
-        ...typography.body,
-        color: colors.text,
-        minHeight: 80,
-        marginBottom: spacing.md,
-    },
-    buttons: {
-        flexDirection: 'row',
-        gap: spacing.md,
-    },
-    cancelButton: {
-        flex: 1,
-        backgroundColor: colors.glass.backgroundLight,
-        paddingVertical: spacing.md,
-        borderRadius: radius.md,
-        alignItems: 'center',
-        borderWidth: 1,
-        borderColor: colors.glass.borderLight,
-    },
-    cancelButtonText: {
-        ...typography.body,
-        color: colors.textSecondary,
-        fontWeight: '600',
-    },
-    submitButton: {
-        flex: 1,
-        backgroundColor: colors.primary,
-        paddingVertical: spacing.md,
-        borderRadius: radius.md,
-        alignItems: 'center',
-        flexDirection: 'row',
-        justifyContent: 'center',
-        gap: spacing.xs,
-    },
-    submitButtonDisabled: {
-        opacity: 0.5,
-    },
-    submitButtonText: {
-        ...typography.body,
-        color: colors.text,
-        fontWeight: '600',
-    },
-});
-
-export default QuestionFeedbackModal;
+import React, { useState } from 'react';
+import {
+    View,
+    Text,
+    StyleSheet,
+    Modal,
+    TouchableOpacity,
+    TextInput,
+    Alert,
+    ActivityIndicator,
+} from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { LinearGradient } from 'expo-linear-gradient';
+import { supabase } from '../../lib/supabase';
+import { getDeviceInfo } from '../../lib/deviceInfo';
+import { useAuthStore } from '../../store';
+import { colors, gradients, spacing, radius, typography } from '../../theme';
+
+interface QuestionFeedbackModalProps {
+    visible: boolean;
+    onClose: () => void;
+    questionId: string;
+    questionText: string;
+}
+
+const FEEDBACK_REASONS = [
+    { id: 'inappropriate', label: 'Inappropriate', icon: 'warning' as const },
+    { id: 'confusing', label: 'Confusing', icon: 'help-circle' as const },
+    { id: 'duplicate', label: 'Duplicate', icon: 'copy' as const },
+    { id: 'other', label: 'Other', icon: 'ellipsis-horizontal' as const },
+];
+
+export function QuestionFeedbackModal({
+    visible,
+    onClose,
+    questionId,
+    questionText,
+}: QuestionFeedbackModalProps) {
+    const { user } = useAuthStore();
+    const [selectedReason, setSelectedReason] = useState<string | null>(null);
+    const [additionalInfo, setAdditionalInfo] = useState('');
+    const [isSubmitting, setIsSubmitting] = useState(false);
+
+    const resetForm = () => {
+        setSelectedReason(null);
+        setAdditionalInfo('');
+    };
+
+    const handleClose = () => {
+        if (!isSubmitting) {
+            resetForm();
+            onClose();
+        }
+    };
+
+    const handleSubmit = async () => {
+        if (!selectedReason) {
+            Alert.alert('Please select a reason', 'Choose why you want to report this question.');
+            return;
+        }
+
+        if (!user) {
+            Alert.alert('Error', 'You must be logged in to submit feedback.');
+            return;
+        }
+
+        setIsSubmitting(true);
+
+        try {
+            const deviceInfo = getDeviceInfo();
+            const reasonLabel = FEEDBACK_REASONS.find(r => r.id === selectedReason)?.label || selectedReason;
+
+            const { error } = await supabase.from('feedback').insert({
+                user_id: user.id,
+                type: 'question',
+                title: `Question Feedback: ${reasonLabel}`,
+                description: additionalInfo.trim() || `Reported as: ${reasonLabel}`,
+                question_id: questionId,
+                device_info: deviceInfo,
+            });
+
+            if (error) throw error;
+
+            Alert.alert('Thank you!', 'Your feedback has been submitted.', [
+                { text: 'OK', onPress: handleClose },
+            ]);
+
+            resetForm();
+        } catch (error) {
+            Alert.alert('Error', 'Failed to submit feedback. Please try again.');
+            console.error(error);
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    return (
+        <Modal visible={visible} transparent animationType="fade" onRequestClose={handleClose}>
+            <View style={styles.overlay}>
+                <View style={styles.content}>
+                    {/* Header */}
+                    <View style={styles.header}>
+                        <LinearGradient
+                            colors={gradients.primary as [string, string]}
+                            style={styles.headerIcon}
+                            start={{ x: 0, y: 0 }}
+                            end={{ x: 1, y: 1 }}
+                        >
+                            <Ionicons name="flag" size={24} color={colors.text} />
+                        </LinearGradient>
+                        <Text style={styles.headerTitle}>Report Question</Text>
+                    </View>
+
+                    {/* Question Preview */}
+                    <View style={styles.questionPreview}>
+                        <Text style={styles.questionText} numberOfLines={2}>
+                            "{questionText}"
+                        </Text>
+                    </View>
+
+                    {/* Reason Selection */}
+                    <Text style={styles.label}>What's the issue?</Text>
+                    <View style={styles.reasonsGrid}>
+                        {FEEDBACK_REASONS.map((reason) => (
+                            <TouchableOpacity
+                                key={reason.id}
+                                style={[
+                                    styles.reasonButton,
+                                    selectedReason === reason.id && styles.reasonButtonActive,
+                                ]}
+                                onPress={() => setSelectedReason(reason.id)}
+                                activeOpacity={0.7}
+                                disabled={isSubmitting}
+                            >
+                                <Ionicons
+                                    name={reason.icon}
+                                    size={20}
+                                    color={
+                                        selectedReason === reason.id
+                                            ? colors.text
+                                            : colors.textSecondary
+                                    }
+                                />
+                                <Text
+                                    style={[
+                                        styles.reasonText,
+                                        selectedReason === reason.id && styles.reasonTextActive,
+                                    ]}
+                                >
+                                    {reason.label}
+                                </Text>
+                            </TouchableOpacity>
+                        ))}
+                    </View>
+
+                    {/* Additional Info */}
+                    <Text style={styles.label}>Additional details (optional)</Text>
+                    <TextInput
+                        style={styles.input}
+                        value={additionalInfo}
+                        onChangeText={setAdditionalInfo}
+                        placeholder="Tell us more..."
+                        placeholderTextColor={colors.textTertiary}
+                        multiline
+                        numberOfLines={3}
+                        textAlignVertical="top"
+                        editable={!isSubmitting}
+                    />
+
+                    {/* Buttons */}
+                    <View style={styles.buttons}>
+                        <TouchableOpacity
+                            style={styles.cancelButton}
+                            onPress={handleClose}
+                            disabled={isSubmitting}
+                            activeOpacity={0.7}
+                        >
+                            <Text style={styles.cancelButtonText}>Cancel</Text>
+                        </TouchableOpacity>
+
+                        <TouchableOpacity
+                            style={[
+                                styles.submitButton,
+                                !selectedReason && styles.submitButtonDisabled,
+                            ]}
+                            onPress={handleSubmit}
+                            disabled={isSubmitting || !selectedReason}
+                            activeOpacity={0.7}
+                        >
+                            {isSubmitting ? (
+                                <ActivityIndicator size="small" color={colors.text} />
+                            ) : (
+                                <>
+                                    <Ionicons name="send" size={16} color={colors.text} />
+                                    <Text style={styles.submitButtonText}>Submit</Text>
+                                </>
+                            )}
+                        </TouchableOpacity>
+                    </View>
+                </View>
+            </View>
+        </Modal>
+    );
+}
+
+const styles = StyleSheet.create({
+    overlay: {
+        flex: 1,
+        backgroundColor: 'rgba(0, 0, 0, 0.8)',
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: spacing.lg,
+    },
+    content: {
+        backgroundColor: colors.backgroundLight,
+        borderRadius: radius.xl,
+        padding: spacing.lg,
+        width: '100%',
+        maxWidth: 360,
+        borderWidth: 1,
+        borderColor: colors.border,
+    },
+    header: {
+        alignItems: 'center',
+        marginBottom: spacing.md,
+    },
+    headerIcon: {
+        width: 48,
+        height: 48,
+        borderRadius: 24,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginBottom: spacing.sm,
+    },
+    headerTitle: {
+        ...typography.title3,
+        color: colors.text,
+        textAlign: 'center',
+    },
+    questionPreview: {
+        backgroundColor: colors.background, // Flat inner container
+        borderRadius: radius.md,
+        padding: spacing.md,
+        marginBottom: spacing.md,
+        borderWidth: 1,
+        borderColor: colors.border,
+    },
+    questionText: {
+        ...typography.subhead,
+        color: colors.textSecondary,
+        fontStyle: 'italic',
+        textAlign: 'center',
+    },
+    label: {
+        ...typography.subhead,
+        color: colors.textSecondary,
+        marginBottom: spacing.sm,
+        marginLeft: spacing.xs,
+    },
+    reasonsGrid: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: spacing.sm,
+        marginBottom: spacing.md,
+    },
+    reasonButton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: spacing.xs,
+        backgroundColor: colors.background, // Flat button
+        paddingVertical: spacing.sm,
+        paddingHorizontal: spacing.md,
+        borderRadius: radius.md,
+        borderWidth: 1,
+        borderColor: colors.border,
+    },
+    reasonButtonActive: {
+        backgroundColor: colors.primary,
+        borderColor: colors.primary,
+    },
+    reasonText: {
+        ...typography.caption1,
+        color: colors.textSecondary,
+        fontWeight: '600',
+    },
+    reasonTextActive: {
+        color: colors.text,
+    },
+    input: {
+        backgroundColor: colors.background,
+        borderRadius: radius.md,
+        borderWidth: 1,
+        borderColor: colors.border,
+        padding: spacing.md,
+        ...typography.body,
+        color: colors.text,
+        minHeight: 80,
+        marginBottom: spacing.md,
+    },
+    buttons: {
+        flexDirection: 'row',
+        gap: spacing.md,
+    },
+    cancelButton: {
+        flex: 1,
+        backgroundColor: colors.background,
+        paddingVertical: spacing.md,
+        borderRadius: radius.md,
+        alignItems: 'center',
+        borderWidth: 1,
+        borderColor: colors.border,
+    },
+    cancelButtonText: {
+        ...typography.body,
+        color: colors.textSecondary,
+        fontWeight: '600',
+    },
+    submitButton: {
+        flex: 1,
+        backgroundColor: colors.primary,
+        paddingVertical: spacing.md,
+        borderRadius: radius.md,
+        alignItems: 'center',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        gap: spacing.xs,
+    },
+    submitButtonDisabled: {
+        opacity: 0.5,
+    },
+    submitButtonText: {
+        ...typography.body,
+        color: colors.text,
+        fontWeight: '600',
+    },
+});
+
+export default QuestionFeedbackModal;
diff --git a/apps/mobile/src/components/paywall/Paywall.tsx b/apps/mobile/src/components/paywall/Paywall.tsx
index 8e14ca2..c4fff61 100644
--- a/apps/mobile/src/components/paywall/Paywall.tsx
+++ b/apps/mobile/src/components/paywall/Paywall.tsx
@@ -10,40 +10,45 @@ import {
     Platform,
     Pressable,
     Linking,
+    Image,
 } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import { LinearGradient } from "expo-linear-gradient";
 import { router } from "expo-router";
 import { useAuthStore, useSubscriptionStore } from "../../store";
-import { colors, gradients, spacing, radius, typography } from "../../theme";
+import { colors, gradients, spacing, radius, typography, shadows } from "../../theme";
 import type { PurchasesPackage } from "../../lib/revenuecat";
 import { Events } from "../../lib/analytics";
 
+const logoImage = require("../../../assets/logo.png");
+
 interface PaywallProps {
     visible: boolean;
     onClose: () => void;
     onSuccess?: () => void;
+    /** Optional RevenueCat offering identifier. If not provided, uses the default offering. */
+    offeringId?: string;
 }
 
 const FEATURES = [
     {
-        icon: "diamond" as const,
-        title: "Unlock All Packs",
-        description: "Access every premium collection",
+        icon: "layers" as const,
+        title: "All Premium Packs",
+        description: "Unlock every intimate collection",
     },
     {
         icon: "sparkles" as const,
-        title: "Exclusive Content",
-        description: "New packs added regularly",
+        title: "New Content Weekly",
+        description: "Fresh questions added regularly",
     },
     {
         icon: "heart" as const,
-        title: "Share with Partner",
-        description: "Both of you get Pro access",
+        title: "Shared Access",
+        description: "Your partner gets Pro too",
     },
 ];
 
-export function Paywall({ visible, onClose, onSuccess }: PaywallProps) {
+export function Paywall({ visible, onClose, onSuccess, offeringId }: PaywallProps) {
     const { isAnonymous } = useAuthStore();
 
     const handleClose = (reason: "dismiss" | "success" | "restore" | "system") => {
@@ -67,15 +72,13 @@ export function Paywall({ visible, onClose, onSuccess }: PaywallProps) {
     const [guestConfirmed, setGuestConfirmed] = useState(false);
 
     useEffect(() => {
-        if (visible && !offerings) {
-            fetchOfferings();
-        }
         if (visible) {
+            fetchOfferings(offeringId);
             Events.paywallShown("paywall");
             setGuestConfirmed(false);
             setShowGuestConfirm(false);
         }
-    }, [visible, offerings, fetchOfferings]);
+    }, [visible, offeringId, fetchOfferings]);
 
     useEffect(() => {
         // Auto-select annual package as default (better value)
@@ -169,18 +172,13 @@ export function Paywall({ visible, onClose, onSuccess }: PaywallProps) {
         >
             <View style={styles.overlay}>
                 <View style={styles.content}>
-                    {/* Premium gradient background */}
+                    {/* Gold accent line at top */}
                     <LinearGradient
-                        colors={['rgba(22, 33, 62, 0.98)', 'rgba(13, 13, 26, 1)']}
-                        style={StyleSheet.absoluteFill}
+                        colors={[colors.premium.gold, colors.premium.goldDark]}
+                        style={styles.topAccent}
+                        start={{ x: 0, y: 0 }}
+                        end={{ x: 1, y: 0 }}
                     />
-                    {/* Top silk highlight */}
-                    <LinearGradient
-                        colors={['rgba(212, 175, 55, 0.08)', 'transparent']}
-                        style={styles.silkHighlight}
-                    />
-                    {/* Premium border accent */}
-                    <View style={styles.premiumBorderAccent} />
 
                     <ScrollView
                         showsVerticalScrollIndicator={false}
@@ -192,47 +190,34 @@ export function Paywall({ visible, onClose, onSuccess }: PaywallProps) {
                             onPress={() => handleClose("dismiss")}
                             hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
                         >
-                            <Ionicons name="close" size={24} color={colors.textSecondary} />
+                            <Ionicons name="close" size={22} color={colors.textSecondary} />
                         </TouchableOpacity>
 
                         {/* Header */}
                         <View style={styles.header}>
-                            {/* Premium label */}
-                            <Text style={styles.label}>EXCLUSIVE ACCESS</Text>
-
-                            {/* Icon with glow */}
-                            <View style={styles.iconContainer}>
-                                <LinearGradient
-                                    colors={[colors.premium.gold, colors.premium.goldDark]}
-                                    style={StyleSheet.absoluteFill}
-                                    start={{ x: 0, y: 0 }}
-                                    end={{ x: 1, y: 1 }}
+                            {/* Sauci logo */}
+                            <View style={styles.logoContainer}>
+                                <Image
+                                    source={logoImage}
+                                    style={styles.logo}
+                                    resizeMode="contain"
                                 />
-                                <Ionicons name="diamond" size={32} color={colors.background} />
                             </View>
 
                             <Text style={styles.title}>Sauci Pro</Text>
-
-                            {/* Decorative separator */}
-                            <View style={styles.separator}>
-                                <View style={styles.separatorLine} />
-                                <View style={styles.separatorDiamond} />
-                                <View style={styles.separatorLine} />
-                            </View>
-
                             <Text style={styles.subtitle}>
-                                Unlock all premium content for you and your partner
+                                Unlock the full intimate experience
                             </Text>
                         </View>
 
                         {/* Features */}
                         <View style={styles.features}>
-                            {FEATURES.map((feature, index) => (
+                            {FEATURES.map((feature) => (
                                 <View key={feature.title} style={styles.featureRow}>
                                     <View style={styles.featureIcon}>
                                         <Ionicons
                                             name={feature.icon}
-                                            size={18}
+                                            size={20}
                                             color={colors.premium.gold}
                                         />
                                     </View>
@@ -242,11 +227,6 @@ export function Paywall({ visible, onClose, onSuccess }: PaywallProps) {
                                             {feature.description}
                                         </Text>
                                     </View>
-                                    <Ionicons
-                                        name="checkmark-circle"
-                                        size={20}
-                                        color={colors.premium.gold}
-                                    />
                                 </View>
                             ))}
                         </View>
@@ -261,75 +241,96 @@ export function Paywall({ visible, onClose, onSuccess }: PaywallProps) {
                                     </Text>
                                 </View>
                             ) : offerings?.availablePackages ? (
-                                offerings.availablePackages.map((pkg) => {
-                                    const isSelected =
-                                        selectedPackage?.identifier === pkg.identifier;
-                                    const isAnnual = pkg.packageType === "ANNUAL";
-
-                                    return (
-                                        <Pressable
-                                            key={pkg.identifier}
-                                            onPress={() => setSelectedPackage(pkg)}
-                                            style={[
-                                                styles.packageCard,
-                                                isSelected && styles.packageCardSelected,
-                                                isAnnual && styles.packageCardAnnual,
-                                            ]}
-                                        >
-                                            {isAnnual && (
-                                                <LinearGradient
-                                                    colors={['rgba(212, 175, 55, 0.1)', 'rgba(184, 134, 11, 0.05)']}
-                                                    style={StyleSheet.absoluteFill}
-                                                />
-                                            )}
-                                            {isAnnual && savings && savings > 0 && (
-                                                <View style={styles.savingsBadge}>
-                                                    <LinearGradient
-                                                        colors={[colors.premium.gold, colors.premium.goldDark]}
-                                                        style={StyleSheet.absoluteFill}
-                                                        start={{ x: 0, y: 0 }}
-                                                        end={{ x: 1, y: 0 }}
-                                                    />
-                                                    <Ionicons name="star" size={10} color={colors.background} />
-                                                    <Text style={styles.savingsText}>
-                                                        SAVE {savings}%
-                                                    </Text>
-                                                </View>
-                                            )}
-                                            <View style={styles.packageContent}>
-                                                <View
+                                <>
+                                    {/* Annual package - hero card */}
+                                    {offerings.availablePackages
+                                        .filter((p) => p.packageType === "ANNUAL")
+                                        .map((pkg) => {
+                                            const isSelected = selectedPackage?.identifier === pkg.identifier;
+                                            return (
+                                                <Pressable
+                                                    key={pkg.identifier}
+                                                    onPress={() => setSelectedPackage(pkg)}
                                                     style={[
-                                                        styles.radioOuter,
-                                                        isSelected && styles.radioOuterSelected,
+                                                        styles.packageCard,
+                                                        styles.packageCardAnnual,
+                                                        isSelected && styles.packageCardSelected,
                                                     ]}
                                                 >
-                                                    {isSelected && <View style={styles.radioInner} />}
-                                                </View>
-                                                <View style={styles.packageInfo}>
-                                                    <View style={styles.packageTitleRow}>
-                                                        <Text style={[
-                                                            styles.packageTitle,
-                                                            isAnnual && styles.packageTitleAnnual
+                                                    {/* Subtle gold tint background */}
+                                                    <View style={styles.annualBackground} />
+
+                                                    {/* Best value badge */}
+                                                    {savings && savings > 0 && (
+                                                        <View style={styles.savingsBadge}>
+                                                            <LinearGradient
+                                                                colors={[colors.premium.gold, colors.premium.goldDark]}
+                                                                style={StyleSheet.absoluteFill}
+                                                                start={{ x: 0, y: 0 }}
+                                                                end={{ x: 1, y: 0 }}
+                                                            />
+                                                            <Text style={styles.savingsText}>
+                                                                SAVE {savings}%
+                                                            </Text>
+                                                        </View>
+                                                    )}
+
+                                                    <View style={styles.packageContent}>
+                                                        <View style={[
+                                                            styles.radioOuter,
+                                                            isSelected && styles.radioOuterSelected,
                                                         ]}>
-                                                            {isAnnual ? "Annual" : "Monthly"}
-                                                        </Text>
-                                                        {isAnnual && (
-                                                            <View style={styles.bestValueBadge}>
-                                                                <Text style={styles.bestValueText}>BEST VALUE</Text>
+                                                            {isSelected && <View style={styles.radioInner} />}
+                                                        </View>
+                                                        <View style={styles.packageInfo}>
+                                                            <View style={styles.packageHeader}>
+                                                                <Text style={styles.packageTitleAnnual}>Annual</Text>
+                                                                <View style={styles.recommendedBadge}>
+                                                                    <Ionicons name="star" size={10} color={colors.premium.gold} />
+                                                                    <Text style={styles.recommendedText}>BEST VALUE</Text>
+                                                                </View>
                                                             </View>
-                                                        )}
+                                                            <Text style={styles.packagePriceAnnual}>
+                                                                {formatPrice(pkg)}
+                                                            </Text>
+                                                        </View>
                                                     </View>
-                                                    <Text style={[
-                                                        styles.packagePrice,
-                                                        isAnnual && styles.packagePriceAnnual
-                                                    ]}>
-                                                        {formatPrice(pkg)}
-                                                    </Text>
-                                                </View>
-                                            </View>
-                                        </Pressable>
-                                    );
-                                })
+                                                </Pressable>
+                                            );
+                                        })}
+
+                                    {/* Monthly package */}
+                                    {offerings.availablePackages
+                                        .filter((p) => p.packageType === "MONTHLY")
+                                        .map((pkg) => {
+                                            const isSelected = selectedPackage?.identifier === pkg.identifier;
+                                            return (
+                                                <Pressable
+                                                    key={pkg.identifier}
+                                                    onPress={() => setSelectedPackage(pkg)}
+                                                    style={[
+                                                        styles.packageCard,
+                                                        isSelected && styles.packageCardSelected,
+                                                    ]}
+                                                >
+                                                    <View style={styles.packageContent}>
+                                                        <View style={[
+                                                            styles.radioOuter,
+                                                            isSelected && styles.radioOuterSelected,
+                                                        ]}>
+                                                            {isSelected && <View style={styles.radioInner} />}
+                                                        </View>
+                                                        <View style={styles.packageInfo}>
+                                                            <Text style={styles.packageTitle}>Monthly</Text>
+                                                            <Text style={styles.packagePrice}>
+                                                                {formatPrice(pkg)}
+                                                            </Text>
+                                                        </View>
+                                                    </View>
+                                                </Pressable>
+                                            );
+                                        })}
+                                </>
                             ) : (
                                 <View style={styles.errorContainer}>
                                     <Text style={styles.errorText}>
@@ -342,7 +343,7 @@ export function Paywall({ visible, onClose, onSuccess }: PaywallProps) {
                                     )}
                                     <TouchableOpacity
                                         style={styles.retryButton}
-                                        onPress={fetchOfferings}
+                                        onPress={() => fetchOfferings(offeringId)}
                                     >
                                         <Text style={styles.retryButtonText}>Retry</Text>
                                     </TouchableOpacity>
@@ -379,7 +380,6 @@ export function Paywall({ visible, onClose, onSuccess }: PaywallProps) {
                                         start={{ x: 0, y: 0 }}
                                         end={{ x: 1, y: 0 }}
                                     >
-                                        <Ionicons name="diamond" size={18} color={colors.background} style={{ marginRight: spacing.sm }} />
                                         <Text style={styles.purchaseButtonText}>Unlock Pro</Text>
                                     </LinearGradient>
                                 )}
@@ -405,18 +405,19 @@ export function Paywall({ visible, onClose, onSuccess }: PaywallProps) {
                                 <TouchableOpacity
                                     onPress={() => Linking.openURL("https://sauci.app/terms")}
                                 >
-                                    <Text style={styles.legalLinkText}>Terms of Use</Text>
+                                    <Text style={styles.legalLinkText}>Terms</Text>
                                 </TouchableOpacity>
                                 <Text style={styles.legalSeparator}>•</Text>
                                 <TouchableOpacity
                                     onPress={() => Linking.openURL("https://sauci.app/privacy")}
                                 >
-                                    <Text style={styles.legalLinkText}>Privacy Policy</Text>
+                                    <Text style={styles.legalLinkText}>Privacy</Text>
                                 </TouchableOpacity>
                             </View>
                         </View>
                     </ScrollView>
 
+                    {/* Guest confirmation modal */}
                     {showGuestConfirm && (
                         <View style={styles.guestConfirmOverlay}>
                             <Pressable
@@ -425,8 +426,8 @@ export function Paywall({ visible, onClose, onSuccess }: PaywallProps) {
                             />
                             <View style={styles.guestConfirmCard}>
                                 <View style={styles.guestConfirmHeader}>
-                                    <View style={styles.guestConfirmIcon}>
-                                        <Ionicons name="shield-checkmark" size={22} color={colors.premium.gold} />
+                                    <View style={styles.guestConfirmIconWrapper}>
+                                        <Ionicons name="shield-checkmark" size={24} color={colors.premium.gold} />
                                     </View>
                                     <TouchableOpacity
                                         onPress={() => setShowGuestConfirm(false)}
@@ -440,7 +441,7 @@ export function Paywall({ visible, onClose, onSuccess }: PaywallProps) {
                                 <Text style={styles.guestConfirmTitle}>Save your account first?</Text>
                                 <Text style={styles.guestConfirmBody}>
                                     Unsaved accounts can't be recovered if you delete the app or switch devices.
-                                    Saving your account protects your access to Pro.
+                                    Saving protects your Pro access.
                                 </Text>
 
                                 <View style={styles.guestConfirmActions}>
@@ -452,7 +453,14 @@ export function Paywall({ visible, onClose, onSuccess }: PaywallProps) {
                                             router.push("/(app)/settings/save-account" as any);
                                         }}
                                     >
-                                        <Text style={styles.guestConfirmPrimaryText}>Save account</Text>
+                                        <LinearGradient
+                                            colors={[colors.premium.gold, colors.premium.goldDark]}
+                                            style={styles.guestConfirmPrimaryGradient}
+                                            start={{ x: 0, y: 0 }}
+                                            end={{ x: 1, y: 0 }}
+                                        >
+                                            <Text style={styles.guestConfirmPrimaryText}>Save account</Text>
+                                        </LinearGradient>
                                     </Pressable>
 
                                     <Pressable
@@ -463,7 +471,7 @@ export function Paywall({ visible, onClose, onSuccess }: PaywallProps) {
                                             await doPurchase();
                                         }}
                                     >
-                                        <Text style={styles.guestConfirmSecondaryText}>Continue purchase</Text>
+                                        <Text style={styles.guestConfirmSecondaryText}>Continue anyway</Text>
                                     </Pressable>
                                 </View>
                             </View>
@@ -485,132 +493,84 @@ const styles = StyleSheet.create({
         backgroundColor: colors.background,
         borderTopLeftRadius: radius.xxl,
         borderTopRightRadius: radius.xxl,
-        maxHeight: "90%",
-        borderWidth: 1,
-        borderBottomWidth: 0,
-        borderColor: 'rgba(212, 175, 55, 0.2)',
+        maxHeight: "92%",
         overflow: 'hidden',
     },
-    silkHighlight: {
+    topAccent: {
         position: 'absolute',
         top: 0,
         left: 0,
         right: 0,
-        height: 150,
+        height: 3,
         borderTopLeftRadius: radius.xxl,
         borderTopRightRadius: radius.xxl,
     },
-    premiumBorderAccent: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        height: 2,
-        backgroundColor: colors.premium.gold,
-        opacity: 0.4,
-    },
     scrollContent: {
         padding: spacing.lg,
-        paddingTop: spacing.xl,
-        paddingBottom: Platform.OS === "ios" ? 40 : spacing.lg,
+        paddingTop: spacing.xxl,
+        paddingBottom: Platform.OS === "ios" ? 44 : spacing.xl,
     },
     closeButton: {
         position: "absolute",
-        top: spacing.md,
-        right: spacing.md,
-        width: 40,
-        height: 40,
-        borderRadius: 20,
-        backgroundColor: 'rgba(255, 255, 255, 0.08)',
+        top: spacing.sm,
+        right: spacing.sm,
+        width: 36,
+        height: 36,
+        borderRadius: 18,
+        backgroundColor: colors.backgroundLight,
         justifyContent: "center",
         alignItems: "center",
         zIndex: 10,
-        borderWidth: 1,
-        borderColor: 'rgba(255, 255, 255, 0.1)',
     },
+
+    // Header
     header: {
         alignItems: "center",
         marginBottom: spacing.xl,
     },
-    label: {
-        ...typography.caption1,
-        fontWeight: '600',
-        letterSpacing: 3,
-        color: colors.premium.gold,
-        textAlign: 'center',
-        marginBottom: spacing.md,
-    },
-    iconContainer: {
-        width: 72,
-        height: 72,
-        borderRadius: 36,
+    logoContainer: {
+        width: 88,
+        height: 88,
         justifyContent: "center",
         alignItems: "center",
-        overflow: 'hidden',
-        marginBottom: spacing.md,
-        shadowColor: colors.premium.gold,
-        shadowOffset: { width: 0, height: 0 },
-        shadowOpacity: 0.6,
-        shadowRadius: 20,
-        elevation: 12,
+        marginBottom: spacing.lg,
+    },
+    logo: {
+        width: 88,
+        height: 88,
     },
     title: {
-        ...typography.title1,
+        ...typography.largeTitle,
         color: colors.text,
         marginBottom: spacing.xs,
-        textShadowColor: 'rgba(212, 175, 55, 0.3)',
-        textShadowOffset: { width: 0, height: 0 },
-        textShadowRadius: 10,
-    },
-    separator: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginVertical: spacing.md,
-        width: 140,
-    },
-    separatorLine: {
-        flex: 1,
-        height: 1,
-        backgroundColor: 'rgba(212, 175, 55, 0.3)',
-    },
-    separatorDiamond: {
-        width: 6,
-        height: 6,
-        backgroundColor: colors.premium.gold,
-        transform: [{ rotate: '45deg' }],
-        marginHorizontal: spacing.md,
-        opacity: 0.8,
     },
     subtitle: {
         ...typography.body,
         color: colors.textSecondary,
         textAlign: "center",
-        lineHeight: 24,
     },
+
+    // Features
     features: {
         marginBottom: spacing.xl,
-        backgroundColor: 'rgba(212, 175, 55, 0.05)',
-        borderRadius: radius.lg,
-        padding: spacing.md,
-        borderWidth: 1,
-        borderColor: 'rgba(212, 175, 55, 0.1)',
+        gap: spacing.sm,
     },
     featureRow: {
         flexDirection: "row",
         alignItems: "center",
         paddingVertical: spacing.sm,
+        paddingHorizontal: spacing.md,
+        backgroundColor: colors.backgroundLight,
+        borderRadius: radius.md,
     },
     featureIcon: {
-        width: 40,
-        height: 40,
-        borderRadius: 20,
-        backgroundColor: 'rgba(212, 175, 55, 0.1)',
+        width: 44,
+        height: 44,
+        borderRadius: 22,
+        backgroundColor: colors.premium.goldLight,
         justifyContent: "center",
         alignItems: "center",
         marginRight: spacing.md,
-        borderWidth: 1,
-        borderColor: 'rgba(212, 175, 55, 0.2)',
     },
     featureText: {
         flex: 1,
@@ -622,7 +582,10 @@ const styles = StyleSheet.create({
     featureDescription: {
         ...typography.subhead,
         color: colors.textSecondary,
+        marginTop: 2,
     },
+
+    // Packages
     packages: {
         marginBottom: spacing.lg,
         gap: spacing.md,
@@ -638,27 +601,28 @@ const styles = StyleSheet.create({
     },
     packageCard: {
         position: "relative",
-        backgroundColor: 'rgba(22, 33, 62, 0.4)',
+        backgroundColor: colors.backgroundLight,
         borderRadius: radius.lg,
-        borderWidth: 1,
-        borderColor: 'rgba(255, 255, 255, 0.08)',
+        borderWidth: 2,
+        borderColor: colors.border,
         padding: spacing.md,
         overflow: "hidden",
     },
     packageCardSelected: {
         borderColor: colors.premium.gold,
-        borderWidth: 2,
     },
     packageCardAnnual: {
-        borderColor: 'rgba(212, 175, 55, 0.3)',
+        borderColor: colors.premium.goldLight,
+    },
+    annualBackground: {
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: colors.premium.goldLight,
+        opacity: 0.3,
     },
     savingsBadge: {
         position: "absolute",
-        top: -1,
+        top: 0,
         right: spacing.md,
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
         paddingHorizontal: spacing.sm,
         paddingVertical: 4,
         borderBottomLeftRadius: radius.sm,
@@ -680,7 +644,7 @@ const styles = StyleSheet.create({
         height: 24,
         borderRadius: 12,
         borderWidth: 2,
-        borderColor: 'rgba(255, 255, 255, 0.3)',
+        borderColor: colors.border,
         justifyContent: "center",
         alignItems: "center",
         marginRight: spacing.md,
@@ -697,7 +661,7 @@ const styles = StyleSheet.create({
     packageInfo: {
         flex: 1,
     },
-    packageTitleRow: {
+    packageHeader: {
         flexDirection: 'row',
         alignItems: 'center',
         gap: spacing.sm,
@@ -707,19 +671,23 @@ const styles = StyleSheet.create({
         color: colors.text,
     },
     packageTitleAnnual: {
+        ...typography.headline,
         color: colors.premium.champagne,
     },
-    bestValueBadge: {
-        backgroundColor: 'rgba(212, 175, 55, 0.2)',
-        paddingHorizontal: spacing.xs,
+    recommendedBadge: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        backgroundColor: colors.premium.goldLight,
+        paddingHorizontal: spacing.sm,
         paddingVertical: 2,
         borderRadius: radius.xs,
     },
-    bestValueText: {
+    recommendedText: {
         ...typography.caption2,
         color: colors.premium.gold,
         fontWeight: '700',
-        letterSpacing: 0.5,
+        letterSpacing: 0.3,
     },
     packagePrice: {
         ...typography.subhead,
@@ -727,9 +695,12 @@ const styles = StyleSheet.create({
         marginTop: 2,
     },
     packagePriceAnnual: {
+        ...typography.subhead,
         color: colors.premium.champagne,
-        opacity: 0.8,
+        marginTop: 2,
     },
+
+    // Error states
     errorContainer: {
         alignItems: "center",
         padding: spacing.lg,
@@ -741,12 +712,10 @@ const styles = StyleSheet.create({
         marginBottom: spacing.md,
     },
     retryButton: {
-        backgroundColor: 'rgba(212, 175, 55, 0.1)',
+        backgroundColor: colors.premium.goldLight,
         paddingHorizontal: spacing.lg,
         paddingVertical: spacing.sm,
         borderRadius: radius.md,
-        borderWidth: 1,
-        borderColor: 'rgba(212, 175, 55, 0.2)',
     },
     retryButtonText: {
         ...typography.subhead,
@@ -764,17 +733,17 @@ const styles = StyleSheet.create({
         color: colors.error,
         textAlign: "center",
     },
+
+    // Actions
     actions: {
         marginBottom: spacing.lg,
     },
     purchaseButton: {
         borderRadius: radius.lg,
         overflow: "hidden",
+        ...shadows.lg,
         shadowColor: colors.premium.gold,
-        shadowOffset: { width: 0, height: 4 },
-        shadowOpacity: 0.3,
-        shadowRadius: 8,
-        elevation: 8,
+        shadowOpacity: 0.4,
     },
     purchaseButtonDisabled: {
         opacity: 0.5,
@@ -786,7 +755,6 @@ const styles = StyleSheet.create({
         backgroundColor: colors.premium.gold,
     },
     purchaseButtonGradient: {
-        flexDirection: 'row',
         paddingVertical: spacing.md,
         alignItems: "center",
         justifyContent: 'center',
@@ -795,6 +763,7 @@ const styles = StyleSheet.create({
         ...typography.headline,
         color: colors.background,
         fontWeight: '700',
+        fontSize: 18,
     },
     restoreButton: {
         alignItems: "center",
@@ -803,11 +772,12 @@ const styles = StyleSheet.create({
     },
     restoreText: {
         ...typography.subhead,
-        color: colors.premium.gold,
-        opacity: 0.8,
+        color: colors.textSecondary,
     },
+
+    // Legal
     legal: {
-        paddingHorizontal: spacing.md,
+        paddingHorizontal: spacing.sm,
     },
     legalText: {
         ...typography.caption1,
@@ -820,11 +790,11 @@ const styles = StyleSheet.create({
         justifyContent: "center",
         alignItems: "center",
         marginTop: spacing.sm,
-        gap: spacing.xs,
+        gap: spacing.sm,
     },
     legalLinkText: {
         ...typography.caption1,
-        color: colors.premium.gold,
+        color: colors.textSecondary,
         textDecorationLine: "underline",
     },
     legalSeparator: {
@@ -832,21 +802,22 @@ const styles = StyleSheet.create({
         color: colors.textTertiary,
     },
 
+    // Guest confirm modal
     guestConfirmOverlay: {
         ...StyleSheet.absoluteFillObject,
-        backgroundColor: "rgba(0, 0, 0, 0.7)",
+        backgroundColor: "rgba(0, 0, 0, 0.8)",
         justifyContent: "center",
         alignItems: "center",
         padding: spacing.lg,
     },
     guestConfirmCard: {
         width: "100%",
-        maxWidth: 420,
-        backgroundColor: "rgba(22, 33, 62, 0.98)",
+        maxWidth: 400,
+        backgroundColor: colors.backgroundLight,
         borderRadius: radius.xl,
         padding: spacing.lg,
         borderWidth: 1,
-        borderColor: "rgba(212, 175, 55, 0.2)",
+        borderColor: colors.border,
     },
     guestConfirmHeader: {
         flexDirection: "row",
@@ -854,23 +825,21 @@ const styles = StyleSheet.create({
         justifyContent: "space-between",
         marginBottom: spacing.md,
     },
-    guestConfirmIcon: {
-        width: 40,
-        height: 40,
-        borderRadius: 20,
-        backgroundColor: "rgba(212, 175, 55, 0.12)",
+    guestConfirmIconWrapper: {
+        width: 48,
+        height: 48,
+        borderRadius: 24,
+        backgroundColor: colors.premium.goldLight,
         justifyContent: "center",
         alignItems: "center",
     },
     guestConfirmClose: {
-        width: 40,
-        height: 40,
-        borderRadius: 20,
-        backgroundColor: "rgba(255, 255, 255, 0.08)",
+        width: 36,
+        height: 36,
+        borderRadius: 18,
+        backgroundColor: colors.background,
         justifyContent: "center",
         alignItems: "center",
-        borderWidth: 1,
-        borderColor: "rgba(255, 255, 255, 0.1)",
     },
     guestConfirmTitle: {
         ...typography.title3,
@@ -878,19 +847,20 @@ const styles = StyleSheet.create({
         marginBottom: spacing.sm,
     },
     guestConfirmBody: {
-        ...typography.subhead,
+        ...typography.body,
         color: colors.textSecondary,
-        lineHeight: 20,
+        lineHeight: 22,
         marginBottom: spacing.lg,
-        textAlign: "left",
     },
     guestConfirmActions: {
         gap: spacing.sm,
     },
     guestConfirmPrimary: {
-        backgroundColor: colors.premium.gold,
-        paddingVertical: spacing.md,
         borderRadius: radius.lg,
+        overflow: 'hidden',
+    },
+    guestConfirmPrimaryGradient: {
+        paddingVertical: spacing.md,
         alignItems: "center",
     },
     guestConfirmPrimaryText: {
@@ -899,16 +869,16 @@ const styles = StyleSheet.create({
         fontWeight: "700",
     },
     guestConfirmSecondary: {
-        backgroundColor: "rgba(255, 255, 255, 0.06)",
+        backgroundColor: colors.background,
         paddingVertical: spacing.md,
         borderRadius: radius.lg,
         alignItems: "center",
         borderWidth: 1,
-        borderColor: "rgba(255, 255, 255, 0.12)",
+        borderColor: colors.border,
     },
     guestConfirmSecondaryText: {
         ...typography.subhead,
-        color: colors.text,
+        color: colors.textSecondary,
         fontWeight: "600",
     },
 });
diff --git a/apps/mobile/src/components/questions/QuestionCard.tsx b/apps/mobile/src/components/questions/QuestionCard.tsx
new file mode 100644
index 0000000..78cbc54
--- /dev/null
+++ b/apps/mobile/src/components/questions/QuestionCard.tsx
@@ -0,0 +1,452 @@
+import { useState, useEffect } from "react";
+import { View, Text, StyleSheet, Platform, TouchableOpacity } from "react-native";
+import { LinearGradient } from "expo-linear-gradient";
+import Animated, {
+    useSharedValue,
+    useAnimatedStyle,
+    withSpring,
+    withRepeat,
+    withSequence,
+    withTiming,
+    interpolate,
+    Easing,
+    FadeInDown,
+} from "react-native-reanimated";
+import { Ionicons } from "@expo/vector-icons";
+import { colors, gradients, radius, shadows, typography, spacing, animations } from "../../theme";
+import { QuestionFeedbackModal } from "../feedback";
+import { SharePreviewModal } from "../share";
+
+const ACTION_BUTTON_SIZE = 72;
+const ACTION_BUTTON_OVERHANG_PERCENT = 0.5; // 50% of button hangs below the card
+const actionButtonOffset = ACTION_BUTTON_SIZE * ACTION_BUTTON_OVERHANG_PERCENT;
+const actionButtonBackground = colors.muted;
+
+// Haptics helper - not supported on web
+const triggerHaptic = async (style: 'light' | 'medium' | 'heavy' = 'medium') => {
+    if (Platform.OS === 'web') return;
+    const Haptics = await import('expo-haptics');
+    const feedbackStyle = style === 'light'
+        ? Haptics.ImpactFeedbackStyle.Light
+        : style === 'heavy'
+            ? Haptics.ImpactFeedbackStyle.Heavy
+            : Haptics.ImpactFeedbackStyle.Medium;
+    await Haptics.impactAsync(feedbackStyle);
+};
+
+export interface QuestionCardProps {
+    question: {
+        id: string;
+        text: string;
+        intensity: number;
+        partner_text?: string | null;
+        is_two_part?: boolean;
+        partner_answered?: boolean;
+        question_type?: string;
+    };
+    packInfo?: { name: string; icon: string; color?: string } | null;
+    onAnswer: (answer: 'yes' | 'no' | 'skip') => void;
+    onReport?: () => void;
+}
+
+export default function QuestionCard({ question, packInfo, onAnswer, onReport }: QuestionCardProps) {
+    const [showFeedbackModal, setShowFeedbackModal] = useState(false);
+    const [showShareModal, setShowShareModal] = useState(false);
+
+    const idleBreathing = useSharedValue(0);
+
+    const handleSharePress = async () => {
+        await triggerHaptic('light');
+        setShowShareModal(true);
+    };
+
+    // Subtle idle breathing animation
+    useEffect(() => {
+        idleBreathing.value = withRepeat(
+            withSequence(
+                withTiming(1, { duration: 2000, easing: Easing.inOut(Easing.sin) }),
+                withTiming(0, { duration: 2000, easing: Easing.inOut(Easing.sin) })
+            ),
+            -1,
+            true
+        );
+    }, []);
+
+    const animatedStyle = useAnimatedStyle(() => {
+        const idleOffset = interpolate(idleBreathing.value, [0, 1], [0, -4]);
+        return {
+            transform: [{ translateY: idleOffset }],
+        };
+    });
+
+    const handleButtonPress = async (answer: 'yes' | 'no' | 'skip') => {
+        await triggerHaptic(answer === 'skip' ? 'light' : 'medium');
+        onAnswer(answer);
+    };
+
+    const handleFeedbackPress = () => {
+        if (onReport) {
+            onReport();
+        } else {
+            setShowFeedbackModal(true);
+        }
+    };
+
+    return (
+        <>
+            <Animated.View
+                entering={FadeInDown.duration(400).springify()}
+                style={styles.cardWrapper}
+            >
+                <Animated.View style={[styles.cardOuter, animatedStyle, shadows.lg, { shadowColor: colors.primary }]}>
+                    <View
+                        style={[
+                            styles.gradientContainer, 
+                            { backgroundColor: packInfo?.color || colors.background }
+                        ]}
+                    >
+                        <CardContent
+                            question={question}
+                            packInfo={packInfo}
+                            handleButtonPress={handleButtonPress}
+                            onFeedbackPress={handleFeedbackPress}
+                            onSharePress={handleSharePress}
+                        />
+                    </View>
+                </Animated.View>
+            </Animated.View>
+
+            <QuestionFeedbackModal
+                visible={showFeedbackModal}
+                onClose={() => setShowFeedbackModal(false)}
+                questionId={question.id}
+                questionText={question.text}
+            />
+
+            <SharePreviewModal
+                visible={showShareModal}
+                onClose={() => setShowShareModal(false)}
+                question={question}
+                packName={packInfo?.name}
+                cardColor={packInfo?.color}
+            />
+        </>
+    );
+}
+
+function CardContent({
+    question,
+    packInfo,
+    handleButtonPress,
+    onFeedbackPress,
+    onSharePress,
+}: {
+    question: QuestionCardProps['question'];
+    packInfo?: { name: string; icon: string } | null;
+    handleButtonPress: (answer: 'yes' | 'no' | 'skip') => void;
+    onFeedbackPress: () => void;
+    onSharePress: () => void;
+}) {
+    return (
+        <View style={styles.cardInner}>
+            {/* Header Row - Pack badge and action buttons */}
+            <View style={styles.headerRow}>
+                {/* Pack Badge */}
+                {packInfo && (
+                    <View style={styles.packBadge}>
+                        <Ionicons name={packInfo.icon as any} size={14} color={colors.text} />
+                        <Text style={styles.packBadgeText} numberOfLines={1}>
+                            {packInfo.name}
+                        </Text>
+                    </View>
+                )}
+                {!packInfo && <View style={styles.headerSpacer} />}
+
+                {/* Action Buttons */}
+                <View style={styles.headerActions}>
+                    <TouchableOpacity
+                        style={styles.headerButton}
+                        onPress={onSharePress}
+                        hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+                        activeOpacity={0.7}
+                    >
+                        <Ionicons name="share-outline" size={20} color="rgba(255,255,255,0.8)" />
+                    </TouchableOpacity>
+                    <TouchableOpacity
+                        style={styles.headerButton}
+                        onPress={onFeedbackPress}
+                        hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+                        activeOpacity={0.7}
+                    >
+                        <Ionicons name="flag-outline" size={20} color="rgba(255,255,255,0.6)" />
+                    </TouchableOpacity>
+                </View>
+            </View>
+
+            {/* Content - Question text centered */}
+            <View style={styles.content}>
+                <Text style={[styles.text, question.is_two_part && styles.twoPartText]}>
+                    {question.text}
+                </Text>
+
+                {/* Partner's version of the question - only show when user is answering first */}
+                {question.partner_text && !question.partner_answered && (
+                    <View style={styles.partnerTextContainer}>
+                        <View style={styles.partnerDivider}>
+                            <View style={styles.partnerDividerLine} />
+                            <View style={styles.partnerLabelContainer}>
+                                <Ionicons name="swap-horizontal" size={12} color="rgba(255,255,255,0.8)" />
+                                <Text style={styles.partnerLabel}>Partner sees</Text>
+                            </View>
+                            <View style={styles.partnerDividerLine} />
+                        </View>
+                        <Text style={styles.partnerText}>{question.partner_text}</Text>
+                    </View>
+                )}
+            </View>
+
+            {/* Footer - Action Buttons pinned to bottom */}
+            <View style={styles.footer}>
+                <View style={styles.buttonContainer}>
+                    <ActionButton
+                        onPress={() => handleButtonPress("no")}
+                        icon="close"
+                        iconColor={colors.error}
+                        label="NO"
+                    />
+
+                    {/* Skip button in between */}
+                    <TouchableOpacity
+                        style={styles.skipButtonCenter}
+                        onPress={() => handleButtonPress("skip")}
+                        activeOpacity={0.7}
+                    >
+                        <Text style={styles.skipText}>Skip</Text>
+                    </TouchableOpacity>
+
+                    <ActionButton
+                        onPress={() => handleButtonPress("yes")}
+                        icon="checkmark"
+                        iconColor={colors.success}
+                        label="YES"
+                    />
+                </View>
+            </View>
+        </View>
+    );
+}
+
+function ActionButton({
+    onPress,
+    icon,
+    iconColor,
+    label,
+    small = false,
+}: {
+    onPress: () => void;
+    icon: string;
+    iconColor: string;
+    label: string;
+    small?: boolean;
+}) {
+    const buttonScale = useSharedValue(1);
+
+    const handlePressIn = () => {
+        buttonScale.value = withSpring(0.92, animations.spring);
+    };
+
+    const handlePressOut = () => {
+        buttonScale.value = withSpring(1, animations.spring);
+    };
+
+    const buttonAnimatedStyle = useAnimatedStyle(() => ({
+        transform: [{ scale: buttonScale.value }],
+    }));
+
+    return (
+        <TouchableOpacity
+            onPress={onPress}
+            onPressIn={handlePressIn}
+            onPressOut={handlePressOut}
+            activeOpacity={1}
+            style={styles.actionButtonWrapper}
+        >
+            <Animated.View style={[
+                styles.actionButton,
+                small && styles.actionButtonSmall,
+                buttonAnimatedStyle,
+                { backgroundColor: actionButtonBackground }
+            ]}>
+                <Ionicons
+                    name={icon as any}
+                    size={small ? 20 : 32}
+                    color={iconColor}
+                    style={styles.buttonIcon}
+                />
+            </Animated.View>
+        </TouchableOpacity>
+    );
+}
+
+const styles = StyleSheet.create({
+    cardWrapper: {
+        width: "90%",
+        maxWidth: 400,
+        flex: 1,
+        maxHeight: 580 - actionButtonOffset, // Account for button overhang
+    },
+    cardOuter: {
+        flex: 1,
+        borderRadius: radius.xxl,
+        overflow: "visible",
+    },
+    gradientContainer: {
+        flex: 1,
+        borderRadius: radius.xxl,
+        overflow: "visible",
+    },
+    cardInner: {
+        flex: 1,
+        paddingTop: spacing.md,
+        paddingBottom: spacing.sm,
+        paddingHorizontal: spacing.lg,
+    },
+    // Header row styles
+    headerRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: spacing.md,
+    },
+    headerSpacer: {
+        flex: 1,
+    },
+    packBadge: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: 'rgba(255,255,255,0.15)',
+        paddingHorizontal: spacing.md,
+        paddingVertical: spacing.sm,
+        borderRadius: radius.full,
+        gap: spacing.xs,
+        maxWidth: '60%',
+    },
+    packBadgeText: {
+        ...typography.caption1,
+        fontWeight: '600',
+        color: colors.text,
+    },
+    headerActions: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: spacing.xs,
+    },
+    headerButton: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        backgroundColor: 'rgba(255,255,255,0.12)',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    // Content styles
+    content: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        paddingHorizontal: spacing.sm,
+    },
+    text: {
+        ...typography.title1,
+        color: colors.text,
+        textAlign: "center",
+        lineHeight: 36,
+    },
+    twoPartText: {
+        ...typography.title2,
+        lineHeight: 32,
+    },
+    partnerTextContainer: {
+        marginTop: spacing.lg,
+        width: '100%',
+        paddingHorizontal: spacing.sm,
+    },
+    partnerDivider: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: spacing.sm,
+    },
+    partnerDividerLine: {
+        flex: 1,
+        height: 1,
+        backgroundColor: 'rgba(255,255,255,0.2)',
+    },
+    partnerLabelContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: spacing.md,
+        paddingVertical: spacing.xs,
+        backgroundColor: 'rgba(255,255,255,0.15)',
+        borderRadius: radius.full,
+        gap: spacing.xs,
+    },
+    partnerLabel: {
+        ...typography.caption1,
+        color: 'rgba(255,255,255,0.8)',
+        fontWeight: '500',
+        letterSpacing: 0.3,
+    },
+    partnerText: {
+        ...typography.subhead,
+        color: 'rgba(255,255,255,0.7)',
+        textAlign: 'center',
+        fontStyle: 'italic',
+    },
+    // Footer styles
+    footer: {
+        paddingTop: spacing.md,
+        transform: [{ translateY: actionButtonOffset }],
+    },
+    buttonContainer: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "flex-end",
+        width: '100%',
+        paddingHorizontal: spacing.md,
+    },
+    actionButtonWrapper: {
+        alignItems: 'center',
+        gap: spacing.xs,
+    },
+    actionButton: {
+        width: 72,
+        height: 72,
+        borderRadius: 36,
+        justifyContent: "center",
+        alignItems: "center",
+        overflow: "hidden",
+        elevation: 4,
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.3,
+        shadowRadius: 4,
+    },
+    actionButtonSmall: {
+        width: 52,
+        height: 52,
+        borderRadius: 26,
+    },
+    buttonIcon: {
+        zIndex: 1,
+    },
+    skipButtonCenter: {
+        paddingVertical: spacing.sm,
+        paddingHorizontal: spacing.md,
+        marginBottom: 30, // Align above center of 72px buttons
+    },
+    skipText: {
+        ...typography.caption1,
+        color: 'rgba(255,255,255,0.5)',
+        fontWeight: '600',
+    },
+});
diff --git a/apps/mobile/src/components/questions/QuestionCardAudio.tsx b/apps/mobile/src/components/questions/QuestionCardAudio.tsx
new file mode 100644
index 0000000..b634fcc
--- /dev/null
+++ b/apps/mobile/src/components/questions/QuestionCardAudio.tsx
@@ -0,0 +1,1111 @@
+import { useState, useEffect } from "react";
+import { View, Text, StyleSheet, Platform, TouchableOpacity } from "react-native";
+import { LinearGradient } from "expo-linear-gradient";
+import { Audio } from "expo-av";
+import Animated, {
+    useSharedValue,
+    useAnimatedStyle,
+    withSpring,
+    withRepeat,
+    withSequence,
+    withTiming,
+    interpolate,
+    Easing,
+    FadeInDown,
+    FadeIn,
+} from "react-native-reanimated";
+import { Ionicons } from "@expo/vector-icons";
+import { colors, gradients, radius, shadows, typography, spacing, animations } from "../../theme";
+import { useAudioRecorder } from "../../hooks/useAudioRecorder";
+import { SharePreviewModal } from "../share";
+
+const ACTION_BUTTON_SIZE = 72;
+const ACTION_BUTTON_OVERHANG_PERCENT = 0.5;
+const actionButtonOffset = ACTION_BUTTON_SIZE * ACTION_BUTTON_OVERHANG_PERCENT;
+const actionButtonBackground = colors.muted;
+
+// Haptics helper - not supported on web
+const triggerHaptic = async (style: 'light' | 'medium' | 'heavy' = 'medium') => {
+    if (Platform.OS === 'web') return;
+    const Haptics = await import('expo-haptics');
+    const feedbackStyle = style === 'light'
+        ? Haptics.ImpactFeedbackStyle.Light
+        : style === 'heavy'
+            ? Haptics.ImpactFeedbackStyle.Heavy
+            : Haptics.ImpactFeedbackStyle.Medium;
+    await Haptics.impactAsync(feedbackStyle);
+};
+
+export interface QuestionCardAudioProps {
+    question: {
+        id: string;
+        text: string;
+        intensity: number;
+        partner_text?: string | null;
+        partner_answered?: boolean;
+        config?: { max_duration_seconds?: number };
+    };
+    packInfo?: { name: string; icon: string; color?: string } | null;
+    onAnswer: (answer: 'yes' | 'skip', responseData?: { type: 'audio'; media_path: string; duration_seconds: number }) => void;
+    onReport?: () => void;
+}
+
+export default function QuestionCardAudio({ question, packInfo, onAnswer, onReport }: QuestionCardAudioProps) {
+    const [showShareModal, setShowShareModal] = useState(false);
+
+    const maxDuration = question.config?.max_duration_seconds ?? 60;
+    const { state, durationSeconds, recordingUri, startRecording, stopRecording, resetRecording } = useAudioRecorder({
+        maxDurationSeconds: maxDuration,
+    });
+
+    const [sound, setSound] = useState<Audio.Sound | null>(null);
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [playbackPosition, setPlaybackPosition] = useState(0);
+
+    const idleBreathing = useSharedValue(0);
+
+    const handleSharePress = async () => {
+        await triggerHaptic('light');
+        setShowShareModal(true);
+    };
+
+    // Subtle idle breathing animation
+    useEffect(() => {
+        idleBreathing.value = withRepeat(
+            withSequence(
+                withTiming(1, { duration: 2000, easing: Easing.inOut(Easing.sin) }),
+                withTiming(0, { duration: 2000, easing: Easing.inOut(Easing.sin) })
+            ),
+            -1,
+            true
+        );
+    }, []);
+
+    // Cleanup sound on unmount
+    useEffect(() => {
+        return () => {
+            if (sound) {
+                sound.unloadAsync();
+            }
+        };
+    }, [sound]);
+
+    const animatedStyle = useAnimatedStyle(() => {
+        const idleOffset = interpolate(idleBreathing.value, [0, 1], [0, -4]);
+        return {
+            transform: [{ translateY: idleOffset }],
+        };
+    });
+
+    const handleStartRecording = async () => {
+        await triggerHaptic('medium');
+        await startRecording();
+    };
+
+    const handleStopRecording = async () => {
+        await triggerHaptic('light');
+        await stopRecording();
+    };
+
+    const handlePlayPreview = async () => {
+        if (!recordingUri) return;
+        await triggerHaptic('light');
+
+        if (isPlaying && sound) {
+            await sound.pauseAsync();
+            setIsPlaying(false);
+            return;
+        }
+
+        if (sound) {
+            await sound.playAsync();
+            setIsPlaying(true);
+            return;
+        }
+
+        const { sound: newSound } = await Audio.Sound.createAsync(
+            { uri: recordingUri },
+            { shouldPlay: true },
+            (status) => {
+                if (status.isLoaded) {
+                    setPlaybackPosition(status.positionMillis / 1000);
+                    if (status.didJustFinish) {
+                        setIsPlaying(false);
+                        setPlaybackPosition(0);
+                    }
+                }
+            }
+        );
+        setSound(newSound);
+        setIsPlaying(true);
+    };
+
+    const handleConfirm = async () => {
+        if (!recordingUri) return;
+        await triggerHaptic('medium');
+        if (sound) {
+            await sound.unloadAsync();
+            setSound(null);
+        }
+        onAnswer('yes', { type: 'audio', media_path: recordingUri, duration_seconds: durationSeconds });
+    };
+
+    const handleReRecord = async () => {
+        await triggerHaptic('light');
+        if (sound) {
+            await sound.unloadAsync();
+            setSound(null);
+        }
+        setIsPlaying(false);
+        setPlaybackPosition(0);
+        resetRecording();
+    };
+
+    const handleCancel = async () => {
+        await triggerHaptic('light');
+        if (sound) {
+            await sound.unloadAsync();
+            setSound(null);
+        }
+        setIsPlaying(false);
+        setPlaybackPosition(0);
+        resetRecording();
+    };
+
+    const handleSkip = async () => {
+        await triggerHaptic('light');
+        if (sound) {
+            await sound.unloadAsync();
+            setSound(null);
+        }
+        onAnswer('skip');
+    };
+
+    const renderContent = () => {
+        if (state === 'recording') {
+            return (
+                <RecordingContent
+                    question={question}
+                    packInfo={packInfo}
+                    durationSeconds={durationSeconds}
+                    maxDuration={maxDuration}
+                    onStop={handleStopRecording}
+                    onReport={onReport}
+                />
+            );
+        }
+
+        if (state === 'stopped' && recordingUri) {
+            return (
+                <PreviewContent
+                    question={question}
+                    packInfo={packInfo}
+                    durationSeconds={durationSeconds}
+                    isPlaying={isPlaying}
+                    playbackPosition={playbackPosition}
+                    onPlayPause={handlePlayPreview}
+                    onConfirm={handleConfirm}
+                    onReRecord={handleReRecord}
+                    onCancel={handleCancel}
+                    onReport={onReport}
+                />
+            );
+        }
+
+        return (
+            <ReadyToRecordContent
+                question={question}
+                packInfo={packInfo}
+                maxDuration={maxDuration}
+                onRecord={handleStartRecording}
+                onSkip={handleSkip}
+                onReport={onReport}
+                onSharePress={handleSharePress}
+            />
+        );
+    };
+
+    return (
+        <>
+            <Animated.View
+                entering={FadeInDown.duration(400).springify()}
+                style={styles.cardWrapper}
+            >
+                <Animated.View style={[styles.cardOuter, animatedStyle, shadows.lg, { shadowColor: colors.primary }]}>
+                    <View
+                        style={[
+                            styles.gradientContainer, 
+                            { backgroundColor: packInfo?.color || colors.background }
+                        ]}
+                    >
+                        {renderContent()}
+                    </View>
+                </Animated.View>
+            </Animated.View>
+
+            <SharePreviewModal
+                visible={showShareModal}
+                onClose={() => setShowShareModal(false)}
+                question={question}
+                packName={packInfo?.name}
+                cardColor={packInfo?.color}
+            />
+        </>
+    );
+}
+
+// State A - Ready to record
+function ReadyToRecordContent({
+    question,
+    packInfo,
+    maxDuration,
+    onRecord,
+    onSkip,
+    onReport,
+    onSharePress,
+}: {
+    question: QuestionCardAudioProps['question'];
+    packInfo?: { name: string; icon: string; color?: string } | null;
+    maxDuration: number;
+    onRecord: () => void;
+    onSkip: () => void;
+    onReport?: () => void;
+    onSharePress: () => void;
+}) {
+    return (
+        <View style={styles.cardInner}>
+            {/* Header Row */}
+            <View style={styles.headerRow}>
+                {packInfo && (
+                    <View style={styles.packBadge}>
+                        <Ionicons name={packInfo.icon as any} size={14} color={colors.text} />
+                        <Text style={styles.packBadgeText} numberOfLines={1}>
+                            {packInfo.name}
+                        </Text>
+                    </View>
+                )}
+                {!packInfo && <View style={styles.headerSpacer} />}
+
+                <View style={styles.headerActions}>
+                    <TouchableOpacity
+                        style={styles.headerButton}
+                        onPress={onSharePress}
+                        hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+                        activeOpacity={0.7}
+                    >
+                        <Ionicons name="share-outline" size={20} color="rgba(255,255,255,0.8)" />
+                    </TouchableOpacity>
+                    {onReport && (
+                        <TouchableOpacity
+                            style={styles.headerButton}
+                            onPress={onReport}
+                            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+                            activeOpacity={0.7}
+                        >
+                            <Ionicons name="flag-outline" size={20} color="rgba(255,255,255,0.6)" />
+                        </TouchableOpacity>
+                    )}
+                </View>
+            </View>
+
+            {/* Content */}
+            <View style={styles.content}>
+                <Text style={styles.text}>
+                    {question.text}
+                </Text>
+
+                <View style={styles.waveformPlaceholder}>
+                    <Ionicons name="mic-outline" size={48} color="rgba(255,255,255,0.4)" />
+                    <Text style={styles.durationLimitText}>Up to {maxDuration} seconds</Text>
+                </View>
+            </View>
+
+            {/* Footer */}
+            <View style={styles.footer}>
+                <View style={styles.audioButtonContainer}>
+                    {/* Left - No/Skip */}
+                    <TouchableOpacity
+                        onPress={onSkip}
+                        style={styles.circleActionButton}
+                    >
+                        <View style={[StyleSheet.absoluteFill, { backgroundColor: actionButtonBackground, borderRadius: 36 }]} />
+                        <Ionicons name="close" size={32} color={colors.error} style={styles.buttonIcon} />
+                    </TouchableOpacity>
+
+                    {/* Middle - Skip (Label) */}
+                    <TouchableOpacity
+                        style={styles.skipButtonCenter}
+                        onPress={onSkip}
+                        activeOpacity={0.7}
+                    >
+                        <Text style={styles.skipText}>Skip</Text>
+                    </TouchableOpacity>
+
+                    {/* Right - Record */}
+                    <RecordButton onPress={onRecord} />
+                </View>
+            </View>
+        </View>
+    );
+}
+
+// State B - Recording
+function RecordingContent({
+    question,
+    packInfo,
+    durationSeconds,
+    maxDuration,
+    onStop,
+    onReport,
+}: {
+    question: QuestionCardAudioProps['question'];
+    packInfo?: { name: string; icon: string } | null;
+    durationSeconds: number;
+    maxDuration: number;
+    onStop: () => void;
+    onReport?: () => void;
+}) {
+    const pulseAnim = useSharedValue(0);
+
+    useEffect(() => {
+        pulseAnim.value = withRepeat(
+            withSequence(
+                withTiming(1, { duration: 500, easing: Easing.inOut(Easing.sin) }),
+                withTiming(0, { duration: 500, easing: Easing.inOut(Easing.sin) })
+            ),
+            -1,
+            true
+        );
+    }, []);
+
+    const pulseStyle = useAnimatedStyle(() => ({
+        opacity: interpolate(pulseAnim.value, [0, 1], [0.6, 1]),
+        transform: [{ scale: interpolate(pulseAnim.value, [0, 1], [1, 1.1]) }],
+    }));
+
+    const formatTime = (seconds: number) => {
+        const mins = Math.floor(seconds / 60);
+        const secs = Math.floor(seconds % 60);
+        return `${mins}:${secs.toString().padStart(2, '0')}`;
+    };
+
+    return (
+        <View style={styles.cardInner}>
+            {/* Header Row */}
+            <View style={styles.headerRow}>
+                {packInfo && (
+                    <View style={styles.packBadge}>
+                        <Ionicons name={packInfo.icon as any} size={14} color={colors.text} />
+                        <Text style={styles.packBadgeText} numberOfLines={1}>
+                            {packInfo.name}
+                        </Text>
+                    </View>
+                )}
+                {!packInfo && <View style={styles.headerSpacer} />}
+
+                <View style={styles.headerActions}>
+                    {onReport && (
+                        <TouchableOpacity
+                            style={styles.headerButton}
+                            onPress={onReport}
+                            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+                            activeOpacity={0.7}
+                        >
+                            <Ionicons name="flag-outline" size={20} color="rgba(255,255,255,0.6)" />
+                        </TouchableOpacity>
+                    )}
+                </View>
+            </View>
+
+            {/* Content */}
+            <View style={styles.content}>
+                <Text style={styles.previewText} numberOfLines={2}>
+                    {question.text}
+                </Text>
+
+                <Animated.View
+                    entering={FadeIn.duration(300)}
+                    style={styles.recordingIndicatorContainer}
+                >
+                    <View style={styles.recordingHeader}>
+                        <Animated.View style={[styles.recordingDot, pulseStyle]} />
+                        <Text style={styles.recordingText}>Recording</Text>
+                    </View>
+
+                    <Text style={styles.recordingTimer}>{formatTime(durationSeconds)}</Text>
+
+                    <AudioLevelBars isActive={true} />
+
+                    <View style={styles.progressBarContainer}>
+                        <View style={styles.progressBarBackground}>
+                            <View
+                                style={[
+                                    styles.progressBarFill,
+                                    { width: `${(durationSeconds / maxDuration) * 100}%` }
+                                ]}
+                            />
+                        </View>
+                        <Text style={styles.progressText}>
+                            {formatTime(maxDuration - durationSeconds)} remaining
+                        </Text>
+                    </View>
+                </Animated.View>
+            </View>
+
+            {/* Footer */}
+            <View style={styles.footer}>
+                <View style={styles.centerButtonContainer}>
+                    <StopButton onPress={onStop} />
+                </View>
+            </View>
+        </View>
+    );
+}
+
+// State C - Preview
+function PreviewContent({
+    question,
+    packInfo,
+    durationSeconds,
+    isPlaying,
+    playbackPosition,
+    onPlayPause,
+    onConfirm,
+    onReRecord,
+    onCancel,
+    onReport,
+}: {
+    question: QuestionCardAudioProps['question'];
+    packInfo?: { name: string; icon: string } | null;
+    durationSeconds: number;
+    isPlaying: boolean;
+    playbackPosition: number;
+    onPlayPause: () => void;
+    onConfirm: () => void;
+    onReRecord: () => void;
+    onCancel: () => void;
+    onReport?: () => void;
+}) {
+    const formatTime = (seconds: number) => {
+        const mins = Math.floor(seconds / 60);
+        const secs = Math.floor(seconds % 60);
+        return `${mins}:${secs.toString().padStart(2, '0')}`;
+    };
+
+    return (
+        <View style={styles.cardInner}>
+            {/* Header Row */}
+            <View style={styles.headerRow}>
+                {packInfo && (
+                    <View style={styles.packBadge}>
+                        <Ionicons name={packInfo.icon as any} size={14} color={colors.text} />
+                        <Text style={styles.packBadgeText} numberOfLines={1}>
+                            {packInfo.name}
+                        </Text>
+                    </View>
+                )}
+                {!packInfo && <View style={styles.headerSpacer} />}
+
+                <View style={styles.headerActions}>
+                    {onReport && (
+                        <TouchableOpacity
+                            style={styles.headerButton}
+                            onPress={onReport}
+                            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+                            activeOpacity={0.7}
+                        >
+                            <Ionicons name="flag-outline" size={20} color="rgba(255,255,255,0.6)" />
+                        </TouchableOpacity>
+                    )}
+                </View>
+            </View>
+
+            {/* Content */}
+            <View style={styles.previewContent}>
+                <Text style={styles.previewText} numberOfLines={2}>
+                    {question.text}
+                </Text>
+
+                <Animated.View
+                    entering={FadeIn.duration(300)}
+                    style={styles.playbackContainer}
+                >
+                    <PlayPauseButton isPlaying={isPlaying} onPress={onPlayPause} />
+
+                    <View style={styles.playbackWaveform}>
+                        <AudioLevelBars isActive={isPlaying} />
+                    </View>
+
+                    <View style={styles.playbackDuration}>
+                        <Text style={styles.playbackTimeText}>
+                            {formatTime(playbackPosition)} / {formatTime(durationSeconds)}
+                        </Text>
+                    </View>
+                </Animated.View>
+            </View>
+
+            {/* Footer */}
+            <View style={styles.previewFooter}>
+                <View style={styles.previewButtonRow}>
+                    <TouchableOpacity
+                        style={styles.secondaryButton}
+                        onPress={onCancel}
+                        activeOpacity={0.7}
+                    >
+                        <Ionicons name="close" size={20} color="rgba(255,255,255,0.7)" />
+                        <Text style={styles.secondaryButtonText}>Cancel</Text>
+                    </TouchableOpacity>
+
+                    <ConfirmButton onPress={onConfirm} />
+
+                    <TouchableOpacity
+                        style={styles.secondaryButton}
+                        onPress={onReRecord}
+                        activeOpacity={0.7}
+                    >
+                        <Ionicons name="refresh" size={20} color="rgba(255,255,255,0.7)" />
+                        <Text style={styles.secondaryButtonText}>Re-record</Text>
+                    </TouchableOpacity>
+                </View>
+            </View>
+        </View>
+    );
+}
+
+// Audio level visualization component
+function AudioLevelBars({ isActive }: { isActive: boolean }) {
+    const bars = 5;
+    const barAnimations = Array.from({ length: bars }, () => useSharedValue(0.3));
+
+    useEffect(() => {
+        if (isActive) {
+            barAnimations.forEach((anim, index) => {
+                const delay = index * 100;
+                anim.value = withRepeat(
+                    withSequence(
+                        withTiming(Math.random() * 0.5 + 0.5, {
+                            duration: 200 + Math.random() * 200,
+                            easing: Easing.inOut(Easing.sin)
+                        }),
+                        withTiming(Math.random() * 0.3 + 0.2, {
+                            duration: 200 + Math.random() * 200,
+                            easing: Easing.inOut(Easing.sin)
+                        })
+                    ),
+                    -1,
+                    true
+                );
+            });
+        } else {
+            barAnimations.forEach((anim) => {
+                anim.value = withTiming(0.3, { duration: 300 });
+            });
+        }
+    }, [isActive]);
+
+    return (
+        <View style={styles.audioLevelContainer}>
+            {barAnimations.map((anim, index) => {
+                const barStyle = useAnimatedStyle(() => ({
+                    height: interpolate(anim.value, [0, 1], [8, 40]),
+                }));
+
+                return (
+                    <Animated.View
+                        key={index}
+                        style={[styles.audioLevelBar, barStyle]}
+                    />
+                );
+            })}
+        </View>
+    );
+}
+
+// Record button component
+function RecordButton({ onPress }: { onPress: () => void }) {
+    const buttonScale = useSharedValue(1);
+    const buttonGlow = useSharedValue(0);
+
+    const handlePressIn = () => {
+        buttonScale.value = withSpring(0.92, animations.spring);
+        buttonGlow.value = withTiming(1, { duration: 150 });
+    };
+
+    const handlePressOut = () => {
+        buttonScale.value = withSpring(1, animations.spring);
+        buttonGlow.value = withTiming(0, { duration: 200 });
+    };
+
+    const buttonAnimatedStyle = useAnimatedStyle(() => ({
+        transform: [{ scale: buttonScale.value }],
+        shadowOpacity: interpolate(buttonGlow.value, [0, 1], [0.3, 0.6]),
+        shadowRadius: interpolate(buttonGlow.value, [0, 1], [8, 16]),
+    }));
+
+    return (
+        <TouchableOpacity
+            onPress={onPress}
+            onPressIn={handlePressIn}
+            onPressOut={handlePressOut}
+            activeOpacity={1}
+            style={styles.recordButtonWrapper}
+        >
+            <Animated.View style={[
+                styles.recordButton,
+                buttonAnimatedStyle,
+                { backgroundColor: actionButtonBackground }
+            ]}>
+                <Ionicons
+                    name="mic"
+                    size={32}
+                    color="#FFFFFF"
+                    style={styles.buttonIcon}
+                />
+            </Animated.View>
+        </TouchableOpacity>
+    );
+}
+
+// Stop button component
+function StopButton({ onPress }: { onPress: () => void }) {
+    const buttonScale = useSharedValue(1);
+    const pulseAnim = useSharedValue(0);
+
+    useEffect(() => {
+        pulseAnim.value = withRepeat(
+            withSequence(
+                withTiming(1, { duration: 800, easing: Easing.inOut(Easing.sin) }),
+                withTiming(0, { duration: 800, easing: Easing.inOut(Easing.sin) })
+            ),
+            -1,
+            true
+        );
+    }, []);
+
+    const handlePressIn = () => {
+        buttonScale.value = withSpring(0.92, animations.spring);
+    };
+
+    const handlePressOut = () => {
+        buttonScale.value = withSpring(1, animations.spring);
+    };
+
+    const buttonAnimatedStyle = useAnimatedStyle(() => ({
+        transform: [{ scale: buttonScale.value }],
+    }));
+
+    const glowStyle = useAnimatedStyle(() => ({
+        opacity: interpolate(pulseAnim.value, [0, 1], [0.3, 0.6]),
+        transform: [{ scale: interpolate(pulseAnim.value, [0, 1], [1, 1.3]) }],
+    }));
+
+    return (
+        <TouchableOpacity
+            onPress={onPress}
+            onPressIn={handlePressIn}
+            onPressOut={handlePressOut}
+            activeOpacity={1}
+        >
+            <View style={styles.stopButtonContainer}>
+                <Animated.View style={[styles.stopButtonGlow, glowStyle]} />
+                <Animated.View style={[styles.stopButton, buttonAnimatedStyle]}>
+                    <LinearGradient
+                        colors={gradients.error as [string, string]}
+                        style={StyleSheet.absoluteFill}
+                        start={{ x: 0, y: 0 }}
+                        end={{ x: 1, y: 1 }}
+                    />
+                    <View style={styles.stopIcon} />
+                </Animated.View>
+            </View>
+        </TouchableOpacity>
+    );
+}
+
+// Play/Pause button component
+function PlayPauseButton({ isPlaying, onPress }: { isPlaying: boolean; onPress: () => void }) {
+    const buttonScale = useSharedValue(1);
+
+    const handlePressIn = () => {
+        buttonScale.value = withSpring(0.92, animations.spring);
+    };
+
+    const handlePressOut = () => {
+        buttonScale.value = withSpring(1, animations.spring);
+    };
+
+    const buttonAnimatedStyle = useAnimatedStyle(() => ({
+        transform: [{ scale: buttonScale.value }],
+    }));
+
+    return (
+        <TouchableOpacity
+            onPress={onPress}
+            onPressIn={handlePressIn}
+            onPressOut={handlePressOut}
+            activeOpacity={1}
+        >
+            <Animated.View style={[styles.playPauseButton, buttonAnimatedStyle]}>
+                <LinearGradient
+                    colors={['#ffffff', '#f0f0f0']}
+                    style={StyleSheet.absoluteFill}
+                    start={{ x: 0, y: 0 }}
+                    end={{ x: 1, y: 1 }}
+                />
+                <Ionicons
+                    name={isPlaying ? "pause" : "play"}
+                    size={28}
+                    color={colors.primary}
+                    style={styles.buttonIcon}
+                />
+            </Animated.View>
+        </TouchableOpacity>
+    );
+}
+
+// Confirm button component
+function ConfirmButton({ onPress }: { onPress: () => void }) {
+    const buttonScale = useSharedValue(1);
+    const buttonGlow = useSharedValue(0);
+
+    const handlePressIn = () => {
+        buttonScale.value = withSpring(0.92, animations.spring);
+        buttonGlow.value = withTiming(1, { duration: 150 });
+    };
+
+    const handlePressOut = () => {
+        buttonScale.value = withSpring(1, animations.spring);
+        buttonGlow.value = withTiming(0, { duration: 200 });
+    };
+
+    const buttonAnimatedStyle = useAnimatedStyle(() => ({
+        transform: [{ scale: buttonScale.value }],
+        shadowOpacity: interpolate(buttonGlow.value, [0, 1], [0.3, 0.6]),
+        shadowRadius: interpolate(buttonGlow.value, [0, 1], [8, 16]),
+    }));
+
+    return (
+        <TouchableOpacity
+            onPress={onPress}
+            onPressIn={handlePressIn}
+            onPressOut={handlePressOut}
+            activeOpacity={1}
+        >
+            <Animated.View style={[
+                styles.confirmButton,
+                buttonAnimatedStyle,
+                { backgroundColor: colors.success }
+            ]}>
+                <LinearGradient
+                    colors={gradients.success as [string, string]}
+                    style={StyleSheet.absoluteFill}
+                    start={{ x: 0, y: 0 }}
+                    end={{ x: 1, y: 1 }}
+                />
+                <Ionicons
+                    name="checkmark"
+                    size={28}
+                    color={colors.text}
+                    style={styles.buttonIcon}
+                />
+            </Animated.View>
+        </TouchableOpacity>
+    );
+}
+
+const styles = StyleSheet.create({
+    cardWrapper: {
+        width: "90%",
+        maxWidth: 400,
+        flex: 1,
+        maxHeight: 580 - actionButtonOffset, // Account for button overhang
+    },
+    cardOuter: {
+        flex: 1,
+        borderRadius: radius.xxl,
+        overflow: "visible",
+    },
+    gradientContainer: {
+        flex: 1,
+        borderRadius: radius.xxl,
+        overflow: "visible",
+    },
+    cardInner: {
+        flex: 1,
+        paddingTop: spacing.md,
+        paddingBottom: spacing.sm,
+        paddingHorizontal: spacing.lg,
+    },
+    // Header row styles
+    headerRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: spacing.md,
+    },
+    headerSpacer: {
+        flex: 1,
+    },
+    packBadge: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: 'rgba(255,255,255,0.15)',
+        paddingHorizontal: spacing.md,
+        paddingVertical: spacing.sm,
+        borderRadius: radius.full,
+        gap: spacing.xs,
+        maxWidth: '60%',
+    },
+    packBadgeText: {
+        ...typography.caption1,
+        fontWeight: '600',
+        color: colors.text,
+    },
+    headerActions: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: spacing.xs,
+    },
+    headerButton: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        backgroundColor: 'rgba(255,255,255,0.12)',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    // Content styles
+    content: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        paddingHorizontal: spacing.sm,
+    },
+    text: {
+        ...typography.title1,
+        color: colors.text,
+        textAlign: "center",
+        lineHeight: 36,
+    },
+    waveformPlaceholder: {
+        marginTop: spacing.xl,
+        alignItems: 'center',
+        gap: spacing.sm,
+    },
+    durationLimitText: {
+        ...typography.caption1,
+        color: 'rgba(255,255,255,0.5)',
+    },
+    // Footer styles
+    footer: {
+        paddingTop: spacing.md,
+        transform: [{ translateY: actionButtonOffset }],
+    },
+    previewFooter: {
+        paddingTop: spacing.md,
+        paddingBottom: spacing.lg,
+    },
+    audioButtonContainer: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "flex-end",
+        width: '100%',
+        paddingHorizontal: spacing.md,
+    },
+    centerButtonContainer: {
+        alignItems: "center",
+        justifyContent: "center",
+        paddingBottom: spacing.sm,
+    },
+    skipButtonCenter: {
+        paddingVertical: spacing.sm,
+        paddingHorizontal: spacing.md,
+        marginBottom: 30, // Align above center of 72px buttons
+    },
+    skipText: {
+        ...typography.caption1,
+        color: 'rgba(255,255,255,0.5)',
+        fontWeight: '600',
+    },
+    circleActionButton: {
+        width: 72,
+        height: 72,
+        borderRadius: 36,
+        justifyContent: "center",
+        alignItems: "center",
+        overflow: "hidden",
+        elevation: 4,
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.3,
+        shadowRadius: 4,
+    },
+    recordButtonWrapper: {
+        alignItems: 'center',
+        gap: spacing.xs,
+    },
+    recordButton: {
+        width: 72,
+        height: 72,
+        borderRadius: 36,
+        justifyContent: "center",
+        alignItems: "center",
+        overflow: "hidden",
+        elevation: 4,
+        shadowColor: colors.primary,
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.3,
+        shadowRadius: 4,
+    },
+    buttonIcon: {
+        zIndex: 1,
+    },
+    // Recording state styles
+    recordingIndicatorContainer: {
+        alignItems: 'center',
+        gap: spacing.lg,
+    },
+    recordingHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: spacing.sm,
+    },
+    recordingDot: {
+        width: 12,
+        height: 12,
+        borderRadius: 6,
+        backgroundColor: colors.error,
+    },
+    recordingText: {
+        ...typography.headline,
+        color: colors.error,
+        fontWeight: '600',
+    },
+    recordingTimer: {
+        ...typography.largeTitle,
+        color: colors.text,
+        fontWeight: 'bold',
+        fontVariant: ['tabular-nums'],
+    },
+    progressBarContainer: {
+        width: '100%',
+        alignItems: 'center',
+        gap: spacing.xs,
+    },
+    progressBarBackground: {
+        width: '100%',
+        height: 4,
+        backgroundColor: 'rgba(255,255,255,0.2)',
+        borderRadius: radius.full,
+        overflow: 'hidden',
+    },
+    progressBarFill: {
+        height: '100%',
+        backgroundColor: colors.text,
+        borderRadius: radius.full,
+    },
+    progressText: {
+        ...typography.caption1,
+        color: 'rgba(255,255,255,0.6)',
+    },
+    stopButtonContainer: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    stopButtonGlow: {
+        position: 'absolute',
+        width: 100,
+        height: 100,
+        borderRadius: 50,
+        backgroundColor: colors.error,
+    },
+    stopButton: {
+        width: 80,
+        height: 80,
+        borderRadius: 40,
+        justifyContent: "center",
+        alignItems: "center",
+        overflow: "hidden",
+    },
+    stopIcon: {
+        width: 24,
+        height: 24,
+        borderRadius: 4,
+        backgroundColor: colors.text,
+        zIndex: 1,
+    },
+    // Preview state styles
+    previewContent: {
+        flex: 1,
+        paddingTop: spacing.sm,
+    },
+    previewText: {
+        ...typography.headline,
+        color: colors.text,
+        textAlign: "center",
+        marginBottom: spacing.lg,
+    },
+    playbackContainer: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: spacing.lg,
+    },
+    playPauseButton: {
+        width: 72,
+        height: 72,
+        borderRadius: 36,
+        justifyContent: "center",
+        alignItems: "center",
+        overflow: "hidden",
+    },
+    playbackWaveform: {
+        width: '100%',
+        paddingHorizontal: spacing.xl,
+    },
+    playbackDuration: {
+        alignItems: 'center',
+    },
+    playbackTimeText: {
+        ...typography.subhead,
+        color: 'rgba(255,255,255,0.7)',
+        fontVariant: ['tabular-nums'],
+    },
+    audioLevelContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: 50,
+        gap: spacing.sm,
+    },
+    audioLevelBar: {
+        width: 6,
+        backgroundColor: colors.text,
+        borderRadius: radius.full,
+    },
+    previewButtonRow: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        gap: spacing.md,
+    },
+    secondaryButton: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: spacing.sm,
+        paddingHorizontal: spacing.md,
+        gap: spacing.xs,
+    },
+    secondaryButtonText: {
+        ...typography.caption1,
+        color: 'rgba(255,255,255,0.7)',
+    },
+    confirmButton: {
+        width: 64,
+        height: 64,
+        borderRadius: 32,
+        justifyContent: "center",
+        alignItems: "center",
+        overflow: "hidden",
+    },
+});
diff --git a/apps/mobile/src/components/questions/QuestionCardPhoto.tsx b/apps/mobile/src/components/questions/QuestionCardPhoto.tsx
new file mode 100644
index 0000000..df6acf4
--- /dev/null
+++ b/apps/mobile/src/components/questions/QuestionCardPhoto.tsx
@@ -0,0 +1,630 @@
+import { useState, useEffect } from "react";
+import { View, Text, StyleSheet, Platform, TouchableOpacity, Image } from "react-native";
+import { LinearGradient } from "expo-linear-gradient";
+import Animated, {
+    useSharedValue,
+    useAnimatedStyle,
+    withSpring,
+    withRepeat,
+    withSequence,
+    withTiming,
+    interpolate,
+    Easing,
+    FadeInDown,
+    FadeIn,
+} from "react-native-reanimated";
+import { Ionicons } from "@expo/vector-icons";
+import { colors, gradients, radius, shadows, typography, spacing, animations } from "../../theme";
+import { useMediaPicker } from "../../hooks/useMediaPicker";
+import { SharePreviewModal } from "../share";
+
+const ACTION_BUTTON_SIZE = 72;
+const ACTION_BUTTON_OVERHANG_PERCENT = 0.5;
+const actionButtonOffset = ACTION_BUTTON_SIZE * ACTION_BUTTON_OVERHANG_PERCENT;
+const actionButtonBackground = colors.muted;
+
+// Haptics helper - not supported on web
+const triggerHaptic = async (style: 'light' | 'medium' | 'heavy' = 'medium') => {
+    if (Platform.OS === 'web') return;
+    const Haptics = await import('expo-haptics');
+    const feedbackStyle = style === 'light'
+        ? Haptics.ImpactFeedbackStyle.Light
+        : style === 'heavy'
+            ? Haptics.ImpactFeedbackStyle.Heavy
+            : Haptics.ImpactFeedbackStyle.Medium;
+    await Haptics.impactAsync(feedbackStyle);
+};
+
+export interface QuestionCardPhotoProps {
+    question: {
+        id: string;
+        text: string;
+        intensity: number;
+        partner_text?: string | null;
+        partner_answered?: boolean;
+    };
+    packInfo?: { name: string; icon: string; color?: string } | null;
+    onAnswer: (answer: 'yes' | 'skip', responseData?: { type: 'photo'; media_path: string }) => void;
+    onReport?: () => void;
+}
+
+export default function QuestionCardPhoto({ question, packInfo, onAnswer, onReport }: QuestionCardPhotoProps) {
+    const [selectedPhotoUri, setSelectedPhotoUri] = useState<string | null>(null);
+    const [showShareModal, setShowShareModal] = useState(false);
+
+    const { takePhoto, pickMedia } = useMediaPicker({ imageQuality: 0.8 });
+
+    const idleBreathing = useSharedValue(0);
+
+    const handleSharePress = async () => {
+        await triggerHaptic('light');
+        setShowShareModal(true);
+    };
+
+    // Subtle idle breathing animation
+    useEffect(() => {
+        idleBreathing.value = withRepeat(
+            withSequence(
+                withTiming(1, { duration: 2000, easing: Easing.inOut(Easing.sin) }),
+                withTiming(0, { duration: 2000, easing: Easing.inOut(Easing.sin) })
+            ),
+            -1,
+            true
+        );
+    }, []);
+
+    const animatedStyle = useAnimatedStyle(() => {
+        const idleOffset = interpolate(idleBreathing.value, [0, 1], [0, -4]);
+        return {
+            transform: [{ translateY: idleOffset }],
+        };
+    });
+
+    const handleTakePhoto = async () => {
+        await triggerHaptic('light');
+        const result = await takePhoto();
+        if (result) {
+            setSelectedPhotoUri(result.uri);
+        }
+    };
+
+    const handlePickFromLibrary = async () => {
+        await triggerHaptic('light');
+        const result = await pickMedia();
+        if (result && result.mediaType === 'image') {
+            setSelectedPhotoUri(result.uri);
+        }
+    };
+
+    const handleConfirm = async () => {
+        if (!selectedPhotoUri) return;
+        await triggerHaptic('medium');
+        onAnswer('yes', { type: 'photo', media_path: selectedPhotoUri });
+    };
+
+    const handleRetake = async () => {
+        await triggerHaptic('light');
+        setSelectedPhotoUri(null);
+    };
+
+    const handleCancel = async () => {
+        await triggerHaptic('light');
+        setSelectedPhotoUri(null);
+    };
+
+    const handleSkip = async () => {
+        await triggerHaptic('light');
+        onAnswer('skip');
+    };
+
+    return (
+        <>
+            <Animated.View
+                entering={FadeInDown.duration(400).springify()}
+                style={styles.cardWrapper}
+            >
+                <Animated.View style={[styles.cardOuter, animatedStyle, shadows.lg, { shadowColor: colors.primary }]}>
+                    <View
+                        style={[
+                            styles.gradientContainer, 
+                            { backgroundColor: packInfo?.color || colors.background }
+                        ]}
+                    >
+                        {selectedPhotoUri ? (
+                            <PhotoPreviewContent
+                                question={question}
+                                packInfo={packInfo}
+                                photoUri={selectedPhotoUri}
+                                onConfirm={handleConfirm}
+                                onRetake={handleRetake}
+                                onCancel={handleCancel}
+                                onReport={onReport}
+                            />
+                        ) : (
+                            <PhotoSelectContent
+                                question={question}
+                                packInfo={packInfo}
+                                onTakePhoto={handleTakePhoto}
+                                onPickFromLibrary={handlePickFromLibrary}
+                                onSkip={handleSkip}
+                                onReport={onReport}
+                                onSharePress={handleSharePress}
+                            />
+                        )}
+                    </View>
+                </Animated.View>
+            </Animated.View>
+
+            <SharePreviewModal
+                visible={showShareModal}
+                onClose={() => setShowShareModal(false)}
+                question={question}
+                packName={packInfo?.name}
+                cardColor={packInfo?.color}
+            />
+        </>
+    );
+}
+
+// State A - No photo selected
+function PhotoSelectContent({
+    question,
+    packInfo,
+    onTakePhoto,
+    onPickFromLibrary,
+    onSkip,
+    onReport,
+    onSharePress,
+}: {
+    question: QuestionCardPhotoProps['question'];
+    packInfo?: { name: string; icon: string } | null;
+    onTakePhoto: () => void;
+    onPickFromLibrary: () => void;
+    onSkip: () => void;
+    onReport?: () => void;
+    onSharePress: () => void;
+}) {
+    return (
+        <View style={styles.cardInner}>
+            {/* Header Row */}
+            <View style={styles.headerRow}>
+                {packInfo && (
+                    <View style={styles.packBadge}>
+                        <Ionicons name={packInfo.icon as any} size={14} color={colors.text} />
+                        <Text style={styles.packBadgeText} numberOfLines={1}>
+                            {packInfo.name}
+                        </Text>
+                    </View>
+                )}
+                {!packInfo && <View style={styles.headerSpacer} />}
+
+                <View style={styles.headerActions}>
+                    <TouchableOpacity
+                        style={styles.headerButton}
+                        onPress={onSharePress}
+                        hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+                        activeOpacity={0.7}
+                    >
+                        <Ionicons name="share-outline" size={20} color="rgba(255,255,255,0.8)" />
+                    </TouchableOpacity>
+                    {onReport && (
+                        <TouchableOpacity
+                            style={styles.headerButton}
+                            onPress={onReport}
+                            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+                            activeOpacity={0.7}
+                        >
+                            <Ionicons name="flag-outline" size={20} color="rgba(255,255,255,0.6)" />
+                        </TouchableOpacity>
+                    )}
+                </View>
+            </View>
+
+            {/* Content */}
+            <View style={styles.content}>
+                <Text style={styles.text}>
+                    {question.text}
+                </Text>
+            </View>
+
+            {/* Footer */}
+            <View style={styles.footer}>
+                <View style={styles.photoButtonContainer}>
+                    <PhotoActionButton
+                        onPress={onPickFromLibrary}
+                        icon="images"
+                        label="Library"
+                        colors={[colors.secondary, colors.secondaryDark]}
+                    />
+                    
+                    <TouchableOpacity
+                        style={styles.skipButtonCenter}
+                        onPress={onSkip}
+                        activeOpacity={0.7}
+                    >
+                        <Text style={styles.skipText}>Skip</Text>
+                    </TouchableOpacity>
+
+                    <PhotoActionButton
+                        onPress={onTakePhoto}
+                        icon="camera"
+                        label="Camera"
+                        colors={gradients.primary as [string, string]}
+                    />
+                </View>
+            </View>
+        </View>
+    );
+}
+
+// State B - Photo preview
+function PhotoPreviewContent({
+    question,
+    packInfo,
+    photoUri,
+    onConfirm,
+    onRetake,
+    onCancel,
+    onReport,
+}: {
+    question: QuestionCardPhotoProps['question'];
+    packInfo?: { name: string; icon: string } | null;
+    photoUri: string;
+    onConfirm: () => void;
+    onRetake: () => void;
+    onCancel: () => void;
+    onReport?: () => void;
+}) {
+    return (
+        <View style={styles.cardInner}>
+            {/* Header Row */}
+            <View style={styles.headerRow}>
+                {packInfo && (
+                    <View style={styles.packBadge}>
+                        <Ionicons name={packInfo.icon as any} size={14} color={colors.text} />
+                        <Text style={styles.packBadgeText} numberOfLines={1}>
+                            {packInfo.name}
+                        </Text>
+                    </View>
+                )}
+                {!packInfo && <View style={styles.headerSpacer} />}
+
+                <View style={styles.headerActions}>
+                    {onReport && (
+                        <TouchableOpacity
+                            style={styles.headerButton}
+                            onPress={onReport}
+                            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+                            activeOpacity={0.7}
+                        >
+                            <Ionicons name="flag-outline" size={20} color="rgba(255,255,255,0.6)" />
+                        </TouchableOpacity>
+                    )}
+                </View>
+            </View>
+
+            {/* Content */}
+            <View style={styles.previewContent}>
+                <Text style={styles.previewText} numberOfLines={2}>
+                    {question.text}
+                </Text>
+
+                {/* Photo Preview */}
+                <Animated.View
+                    entering={FadeIn.duration(300)}
+                    style={styles.photoPreviewContainer}
+                >
+                    <Image
+                        source={{ uri: photoUri }}
+                        style={styles.photoPreview}
+                        resizeMode="cover"
+                    />
+                    <View style={styles.photoPreviewBorder} pointerEvents="none" />
+                </Animated.View>
+            </View>
+
+            {/* Footer */}
+            <View style={styles.previewFooter}>
+                <View style={styles.previewButtonRow}>
+                    <TouchableOpacity
+                        style={styles.secondaryButton}
+                        onPress={onCancel}
+                        activeOpacity={0.7}
+                    >
+                        <Ionicons name="close" size={20} color="rgba(255,255,255,0.7)" />
+                        <Text style={styles.secondaryButtonText}>Cancel</Text>
+                    </TouchableOpacity>
+
+                    <ConfirmButton onPress={onConfirm} />
+
+                    <TouchableOpacity
+                        style={styles.secondaryButton}
+                        onPress={onRetake}
+                        activeOpacity={0.7}
+                    >
+                        <Ionicons name="refresh" size={20} color="rgba(255,255,255,0.7)" />
+                        <Text style={styles.secondaryButtonText}>Retake</Text>
+                    </TouchableOpacity>
+                </View>
+            </View>
+        </View>
+    );
+}
+
+function PhotoActionButton({
+    onPress,
+    colors: _buttonColors,
+    icon,
+    label,
+}: {
+    onPress: () => void;
+    colors: [string, string];
+    icon: string;
+    label: string;
+}) {
+    const buttonScale = useSharedValue(1);
+
+    const handlePressIn = () => {
+        buttonScale.value = withSpring(0.95, animations.spring);
+    };
+
+    const handlePressOut = () => {
+        buttonScale.value = withSpring(1, animations.spring);
+    };
+
+    const buttonAnimatedStyle = useAnimatedStyle(() => ({
+        transform: [{ scale: buttonScale.value }],
+    }));
+
+    return (
+        <TouchableOpacity
+            onPress={onPress}
+            onPressIn={handlePressIn}
+            onPressOut={handlePressOut}
+            activeOpacity={1}
+            style={styles.photoActionWrapper}
+        >
+            <Animated.View style={[
+                styles.photoActionButton,
+                buttonAnimatedStyle,
+                { backgroundColor: actionButtonBackground }
+            ]}>
+                <Ionicons
+                    name={icon as any}
+                    size={28}
+                    color="white"
+                    style={styles.buttonIcon}
+                />
+            </Animated.View>
+        </TouchableOpacity>
+    );
+}
+
+function ConfirmButton({ onPress }: { onPress: () => void }) {
+    const buttonScale = useSharedValue(1);
+
+    const handlePressIn = () => {
+        buttonScale.value = withSpring(0.92, animations.spring);
+    };
+
+    const handlePressOut = () => {
+        buttonScale.value = withSpring(1, animations.spring);
+    };
+
+    const buttonAnimatedStyle = useAnimatedStyle(() => ({
+        transform: [{ scale: buttonScale.value }],
+    }));
+
+    return (
+        <TouchableOpacity
+            onPress={onPress}
+            onPressIn={handlePressIn}
+            onPressOut={handlePressOut}
+            activeOpacity={1}
+        >
+            <Animated.View style={[
+                styles.confirmButton,
+                buttonAnimatedStyle,
+                { backgroundColor: colors.success }
+            ]}>
+                <LinearGradient
+                    colors={gradients.success as [string, string]}
+                    style={StyleSheet.absoluteFill}
+                    start={{ x: 0, y: 0 }}
+                    end={{ x: 1, y: 1 }}
+                />
+                <Ionicons
+                    name="checkmark"
+                    size={28}
+                    color={colors.text}
+                    style={styles.buttonIcon}
+                />
+            </Animated.View>
+        </TouchableOpacity>
+    );
+}
+
+const styles = StyleSheet.create({
+    cardWrapper: {
+        width: "90%",
+        maxWidth: 400,
+        flex: 1,
+        maxHeight: 580 - actionButtonOffset, // Account for button overhang
+    },
+    cardOuter: {
+        flex: 1,
+        borderRadius: radius.xxl,
+        overflow: "visible",
+    },
+    gradientContainer: {
+        flex: 1,
+        borderRadius: radius.xxl,
+        overflow: "visible",
+    },
+    cardInner: {
+        flex: 1,
+        paddingTop: spacing.md,
+        paddingBottom: spacing.sm,
+        paddingHorizontal: spacing.lg,
+    },
+    // Header row styles
+    headerRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: spacing.md,
+    },
+    headerSpacer: {
+        flex: 1,
+    },
+    packBadge: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: 'rgba(255,255,255,0.15)',
+        paddingHorizontal: spacing.md,
+        paddingVertical: spacing.sm,
+        borderRadius: radius.full,
+        gap: spacing.xs,
+        maxWidth: '60%',
+    },
+    packBadgeText: {
+        ...typography.caption1,
+        fontWeight: '600',
+        color: colors.text,
+    },
+    headerActions: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: spacing.xs,
+    },
+    headerButton: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        backgroundColor: 'rgba(255,255,255,0.12)',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    // Content styles
+    content: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        paddingHorizontal: spacing.sm,
+    },
+    text: {
+        ...typography.title1,
+        color: colors.text,
+        textAlign: "center",
+        lineHeight: 36,
+    },
+    // Footer styles
+    footer: {
+        paddingTop: spacing.md,
+        transform: [{ translateY: actionButtonOffset }],
+    },
+    previewFooter: {
+        paddingTop: spacing.md,
+        paddingBottom: spacing.sm,
+    },
+    photoButtonContainer: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "flex-end",
+        width: '100%',
+        paddingHorizontal: spacing.md,
+    },
+    photoActionWrapper: {
+        alignItems: 'center',
+        gap: spacing.xs,
+    },
+    photoActionButton: {
+        width: 72,
+        height: 72,
+        borderRadius: 36,
+        justifyContent: "center",
+        alignItems: "center",
+        overflow: "hidden",
+        elevation: 4,
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.3,
+        shadowRadius: 4,
+    },
+    buttonIcon: {
+        zIndex: 1,
+    },
+    photoActionButtonLabel: {
+        ...typography.caption1,
+        color: colors.text,
+        fontWeight: '600',
+    },
+    skipButtonCenter: {
+        paddingVertical: spacing.sm,
+        paddingHorizontal: spacing.md,
+        marginBottom: 30, // Align above center of 72px buttons
+    },
+    skipText: {
+        ...typography.caption1,
+        color: 'rgba(255,255,255,0.5)',
+        fontWeight: '600',
+    },
+    // Preview state styles
+    previewContent: {
+        flex: 1,
+        paddingTop: spacing.sm,
+    },
+    previewText: {
+        ...typography.headline,
+        color: colors.text,
+        textAlign: "center",
+        marginBottom: spacing.md,
+    },
+    photoPreviewContainer: {
+        flex: 1,
+        marginBottom: spacing.sm,
+        borderRadius: radius.lg,
+        overflow: 'hidden',
+        backgroundColor: 'rgba(0,0,0,0.2)',
+    },
+    photoPreview: {
+        width: '100%',
+        height: '100%',
+        borderRadius: radius.lg,
+    },
+    photoPreviewBorder: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        borderRadius: radius.lg,
+        borderWidth: 2,
+        borderColor: 'rgba(255,255,255,0.2)',
+    },
+    previewButtonRow: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        gap: spacing.md,
+    },
+    secondaryButton: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: spacing.sm,
+        paddingHorizontal: spacing.md,
+        gap: spacing.xs,
+    },
+    secondaryButtonText: {
+        ...typography.caption1,
+        color: 'rgba(255,255,255,0.7)',
+    },
+    confirmButton: {
+        width: 64,
+        height: 64,
+        borderRadius: 32,
+        justifyContent: "center",
+        alignItems: "center",
+        overflow: "hidden",
+    },
+});
diff --git a/apps/mobile/src/components/questions/QuestionCardText.tsx b/apps/mobile/src/components/questions/QuestionCardText.tsx
new file mode 100644
index 0000000..5c34741
--- /dev/null
+++ b/apps/mobile/src/components/questions/QuestionCardText.tsx
@@ -0,0 +1,496 @@
+import { useState, useEffect } from "react";
+import {
+    View,
+    Text,
+    StyleSheet,
+    Platform,
+    TouchableOpacity,
+    TextInput,
+    Keyboard,
+    TouchableWithoutFeedback,
+} from "react-native";
+import { LinearGradient } from "expo-linear-gradient";
+import Animated, {
+    useSharedValue,
+    useAnimatedStyle,
+    withSpring,
+    withRepeat,
+    withSequence,
+    withTiming,
+    interpolate,
+    Easing,
+    FadeInDown,
+} from "react-native-reanimated";
+import { Ionicons } from "@expo/vector-icons";
+import { colors, gradients, radius, shadows, typography, spacing, animations } from "../../theme";
+import { QuestionFeedbackModal } from "../feedback";
+import { SharePreviewModal } from "../share";
+
+const ACTION_BUTTON_SIZE = 72;
+const ACTION_BUTTON_OVERHANG_PERCENT = 0.5;
+const actionButtonOffset = ACTION_BUTTON_SIZE * ACTION_BUTTON_OVERHANG_PERCENT;
+const actionButtonBackground = colors.muted;
+
+// Haptics helper - not supported on web
+const triggerHaptic = async (style: 'light' | 'medium' | 'heavy' = 'medium') => {
+    if (Platform.OS === 'web') return;
+    const Haptics = await import('expo-haptics');
+    const feedbackStyle = style === 'light'
+        ? Haptics.ImpactFeedbackStyle.Light
+        : style === 'heavy'
+            ? Haptics.ImpactFeedbackStyle.Heavy
+            : Haptics.ImpactFeedbackStyle.Medium;
+    await Haptics.impactAsync(feedbackStyle);
+};
+
+const MAX_TEXT_LENGTH = 500;
+
+export interface QuestionCardTextProps {
+    question: {
+        id: string;
+        text: string;
+        intensity: number;
+        partner_text?: string | null;
+        partner_answered?: boolean;
+    };
+    packInfo?: { name: string; icon: string; color?: string } | null;
+    onAnswer: (answer: 'yes' | 'no' | 'skip', responseData?: { type: 'text_answer'; text: string }) => void;
+    onReport?: () => void;
+}
+
+export default function QuestionCardText({ question, packInfo, onAnswer, onReport }: QuestionCardTextProps) {
+    const [showFeedbackModal, setShowFeedbackModal] = useState(false);
+    const [showShareModal, setShowShareModal] = useState(false);
+    const [textValue, setTextValue] = useState('');
+    const [isFocused, setIsFocused] = useState(false);
+
+    const idleBreathing = useSharedValue(0);
+
+    const handleSharePress = async () => {
+        await triggerHaptic('light');
+        setShowShareModal(true);
+    };
+
+    // Subtle idle breathing animation
+    useEffect(() => {
+        idleBreathing.value = withRepeat(
+            withSequence(
+                withTiming(1, { duration: 2000, easing: Easing.inOut(Easing.sin) }),
+                withTiming(0, { duration: 2000, easing: Easing.inOut(Easing.sin) })
+            ),
+            -1,
+            true
+        );
+    }, []);
+
+    const animatedStyle = useAnimatedStyle(() => {
+        const idleOffset = interpolate(idleBreathing.value, [0, 1], [0, -4]);
+        return {
+            transform: [{ translateY: idleOffset }],
+        };
+    });
+
+    const handleButtonPress = async (answer: 'yes' | 'no' | 'skip') => {
+        Keyboard.dismiss();
+        await triggerHaptic(answer === 'skip' ? 'light' : 'medium');
+        if (answer === 'yes' && textValue.trim().length > 0) {
+            onAnswer(answer, { type: 'text_answer', text: textValue.trim() });
+        } else {
+            onAnswer(answer);
+        }
+    };
+
+    const handleFeedbackPress = () => {
+        if (onReport) {
+            onReport();
+        } else {
+            setShowFeedbackModal(true);
+        }
+    };
+
+    const isYesDisabled = textValue.trim().length === 0;
+
+    return (
+        <>
+            <Animated.View
+                entering={FadeInDown.duration(400).springify()}
+                style={styles.cardWrapper}
+            >
+                <Animated.View style={[styles.cardOuter, animatedStyle, shadows.lg, { shadowColor: colors.primary }]}>
+                    <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
+                        <View
+                            style={[
+                                styles.gradientContainer, 
+                                { backgroundColor: packInfo?.color || colors.background }
+                            ]}
+                        >
+                            <CardContent
+                                question={question}
+                                packInfo={packInfo}
+                                textValue={textValue}
+                                setTextValue={setTextValue}
+                                isFocused={isFocused}
+                                setIsFocused={setIsFocused}
+                                isYesDisabled={isYesDisabled}
+                                handleButtonPress={handleButtonPress}
+                                onFeedbackPress={handleFeedbackPress}
+                                onSharePress={handleSharePress}
+                            />
+                        </View>
+                    </TouchableWithoutFeedback>
+                </Animated.View>
+            </Animated.View>
+
+            <QuestionFeedbackModal
+                visible={showFeedbackModal}
+                onClose={() => setShowFeedbackModal(false)}
+                questionId={question.id}
+                questionText={question.text}
+            />
+
+            <SharePreviewModal
+                visible={showShareModal}
+                onClose={() => setShowShareModal(false)}
+                question={question}
+                packName={packInfo?.name}
+                cardColor={packInfo?.color}
+            />
+        </>
+    );
+}
+
+function CardContent({
+    question,
+    packInfo,
+    textValue,
+    setTextValue,
+    isFocused,
+    setIsFocused,
+    isYesDisabled,
+    handleButtonPress,
+    onFeedbackPress,
+    onSharePress,
+}: {
+    question: QuestionCardTextProps['question'];
+    packInfo?: { name: string; icon: string } | null;
+    textValue: string;
+    setTextValue: (value: string) => void;
+    isFocused: boolean;
+    setIsFocused: (focused: boolean) => void;
+    isYesDisabled: boolean;
+    handleButtonPress: (answer: 'yes' | 'no' | 'skip') => void;
+    onFeedbackPress: () => void;
+    onSharePress: () => void;
+}) {
+    return (
+        <View style={styles.cardInner}>
+            {/* Header Row - Pack badge and action buttons */}
+            <View style={styles.headerRow}>
+                {/* Pack Badge */}
+                {packInfo && (
+                    <View style={styles.packBadge}>
+                        <Ionicons name={packInfo.icon as any} size={14} color={colors.text} />
+                        <Text style={styles.packBadgeText} numberOfLines={1}>
+                            {packInfo.name}
+                        </Text>
+                    </View>
+                )}
+                {!packInfo && <View style={styles.headerSpacer} />}
+
+                {/* Action Buttons */}
+                <View style={styles.headerActions}>
+                    <TouchableOpacity
+                        style={styles.headerButton}
+                        onPress={onSharePress}
+                        hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+                        activeOpacity={0.7}
+                    >
+                        <Ionicons name="share-outline" size={20} color="rgba(255,255,255,0.8)" />
+                    </TouchableOpacity>
+                    <TouchableOpacity
+                        style={styles.headerButton}
+                        onPress={onFeedbackPress}
+                        hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+                        activeOpacity={0.7}
+                    >
+                        <Ionicons name="flag-outline" size={20} color="rgba(255,255,255,0.6)" />
+                    </TouchableOpacity>
+                </View>
+            </View>
+
+            {/* Content */}
+            <View style={styles.content}>
+                <Text style={styles.text}>
+                    {question.text}
+                </Text>
+
+                {/* Text Input Area - Glass style */}
+                <View style={[
+                    styles.inputContainer,
+                    isFocused && styles.inputContainerFocused
+                ]}>
+                    <TextInput
+                        style={styles.textInput}
+                        value={textValue}
+                        onChangeText={(text) => setTextValue(text.slice(0, MAX_TEXT_LENGTH))}
+                        onFocus={() => setIsFocused(true)}
+                        onBlur={() => setIsFocused(false)}
+                        placeholder="Type your answer..."
+                        placeholderTextColor="rgba(255,255,255,0.4)"
+                        multiline
+                        textAlignVertical="top"
+                        maxLength={MAX_TEXT_LENGTH}
+                    />
+                    <View style={styles.charCountContainer}>
+                        <Text style={[
+                            styles.charCount,
+                            textValue.length >= MAX_TEXT_LENGTH && styles.charCountMax
+                        ]}>
+                            {textValue.length}/{MAX_TEXT_LENGTH}
+                        </Text>
+                    </View>
+                </View>
+            </View>
+
+            {/* Footer - Action Buttons */}
+            <View style={styles.footer}>
+                <View style={styles.buttonContainer}>
+                    <ActionButton
+                        onPress={() => handleButtonPress("no")}
+                        icon="close"
+                        iconColor={colors.error}
+                        label="NO"
+                    />
+
+                    {/* Skip button in between */}
+                    <TouchableOpacity
+                        style={styles.skipButtonCenter}
+                        onPress={() => handleButtonPress("skip")}
+                        activeOpacity={0.7}
+                    >
+                        <Text style={styles.skipText}>Skip</Text>
+                    </TouchableOpacity>
+
+                    <ActionButton
+                        onPress={() => handleButtonPress("yes")}
+                        icon="checkmark"
+                        iconColor={colors.success}
+                        label="YES"
+                        disabled={isYesDisabled}
+                    />
+                </View>
+            </View>
+        </View>
+    );
+}
+
+function ActionButton({
+    onPress,
+    icon,
+    iconColor,
+    label,
+    disabled = false,
+}: {
+    onPress: () => void;
+    icon: string;
+    iconColor: string;
+    label: string;
+    disabled?: boolean;
+}) {
+    const buttonScale = useSharedValue(1);
+
+    const handlePressIn = () => {
+        if (disabled) return;
+        buttonScale.value = withSpring(0.92, animations.spring);
+    };
+
+    const handlePressOut = () => {
+        if (disabled) return;
+        buttonScale.value = withSpring(1, animations.spring);
+    };
+
+    const handlePress = () => {
+        if (disabled) return;
+        onPress();
+    };
+
+    const buttonAnimatedStyle = useAnimatedStyle(() => ({
+        transform: [{ scale: buttonScale.value }],
+    }));
+
+    return (
+        <TouchableOpacity
+            onPress={handlePress}
+            onPressIn={handlePressIn}
+            onPressOut={handlePressOut}
+            activeOpacity={disabled ? 1 : 1}
+            disabled={disabled}
+            style={styles.actionButtonWrapper}
+        >
+            <Animated.View style={[
+                styles.actionButton,
+                buttonAnimatedStyle,
+                { backgroundColor: actionButtonBackground }
+            ]}>
+                <Ionicons
+                    name={icon as any}
+                    size={32}
+                    color={iconColor}
+                    style={[styles.buttonIcon, disabled && { opacity: 0.4 }]}
+                />
+            </Animated.View>
+        </TouchableOpacity>
+    );
+}
+
+const styles = StyleSheet.create({
+    cardWrapper: {
+        width: "90%",
+        maxWidth: 400,
+        flex: 1,
+        maxHeight: 580 - actionButtonOffset, // Account for button overhang
+    },
+    cardOuter: {
+        flex: 1,
+        borderRadius: radius.xxl,
+        overflow: "visible",
+    },
+    gradientContainer: {
+        flex: 1,
+        borderRadius: radius.xxl,
+        overflow: "visible",
+    },
+    cardInner: {
+        flex: 1,
+        paddingTop: spacing.md,
+        paddingBottom: spacing.sm,
+        paddingHorizontal: spacing.lg,
+    },
+    // Header row styles
+    headerRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: spacing.md,
+    },
+    headerSpacer: {
+        flex: 1,
+    },
+    packBadge: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: 'rgba(255,255,255,0.15)',
+        paddingHorizontal: spacing.md,
+        paddingVertical: spacing.sm,
+        borderRadius: radius.full,
+        gap: spacing.xs,
+        maxWidth: '60%',
+    },
+    packBadgeText: {
+        ...typography.caption1,
+        fontWeight: '600',
+        color: colors.text,
+    },
+    headerActions: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: spacing.xs,
+    },
+    headerButton: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        backgroundColor: 'rgba(255,255,255,0.12)',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    // Content styles
+    content: {
+        flex: 1,
+        justifyContent: "flex-start",
+        alignItems: "center",
+        paddingTop: spacing.sm,
+    },
+    text: {
+        ...typography.title2,
+        color: colors.text,
+        textAlign: "center",
+        lineHeight: 30,
+        marginBottom: spacing.lg,
+    },
+    // Glass-style input
+    inputContainer: {
+        width: '100%',
+        flex: 1,
+        minHeight: 100,
+        maxHeight: 180,
+        backgroundColor: 'rgba(255,255,255,0.12)',
+        borderRadius: radius.lg,
+        borderWidth: 1,
+        borderColor: 'rgba(255,255,255,0.15)',
+        padding: spacing.md,
+    },
+    inputContainerFocused: {
+        borderColor: 'rgba(255,255,255,0.4)',
+        backgroundColor: 'rgba(255,255,255,0.18)',
+    },
+    textInput: {
+        flex: 1,
+        ...typography.body,
+        color: colors.text,
+        textAlignVertical: 'top',
+    },
+    charCountContainer: {
+        alignItems: 'flex-end',
+        marginTop: spacing.xs,
+    },
+    charCount: {
+        ...typography.caption2,
+        color: 'rgba(255,255,255,0.5)',
+    },
+    charCountMax: {
+        color: colors.error,
+    },
+    // Footer styles
+    footer: {
+        paddingTop: spacing.md,
+        transform: [{ translateY: actionButtonOffset }],
+    },
+    buttonContainer: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "flex-end",
+        width: '100%',
+        paddingHorizontal: spacing.md,
+    },
+    actionButtonWrapper: {
+        alignItems: 'center',
+        gap: spacing.xs,
+    },
+    actionButton: {
+        width: 72,
+        height: 72,
+        borderRadius: 36,
+        justifyContent: "center",
+        alignItems: "center",
+        overflow: "hidden",
+        elevation: 4,
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.3,
+        shadowRadius: 4,
+    },
+    buttonIcon: {
+        zIndex: 1,
+    },
+    skipButtonCenter: {
+        paddingVertical: spacing.sm,
+        paddingHorizontal: spacing.md,
+        marginBottom: 30, // Align above center of 72px buttons
+    },
+    skipText: {
+        ...typography.caption1,
+        color: 'rgba(255,255,255,0.5)',
+        fontWeight: '600',
+    },
+});
diff --git a/apps/mobile/src/components/questions/QuestionCardWhoLikely.tsx b/apps/mobile/src/components/questions/QuestionCardWhoLikely.tsx
new file mode 100644
index 0000000..97a68b8
--- /dev/null
+++ b/apps/mobile/src/components/questions/QuestionCardWhoLikely.tsx
@@ -0,0 +1,478 @@
+import { useState, useEffect } from "react";
+import { View, Text, StyleSheet, Platform, TouchableOpacity } from "react-native";
+import { Image } from "expo-image";
+import { LinearGradient } from "expo-linear-gradient";
+import Animated, {
+    useSharedValue,
+    useAnimatedStyle,
+    withSpring,
+    withRepeat,
+    withSequence,
+    withTiming,
+    interpolate,
+    Easing,
+    FadeInDown,
+} from "react-native-reanimated";
+import { Ionicons } from "@expo/vector-icons";
+import { colors, gradients, radius, shadows, typography, spacing, animations } from "../../theme";
+import { QuestionFeedbackModal } from "../feedback";
+import { SharePreviewModal } from "../share";
+
+const AVATAR_SIZE = 72;
+const AVATAR_OVERHANG_PERCENT = 0.5; // 50% of avatar hangs below the card
+const actionButtonOffset = AVATAR_SIZE * AVATAR_OVERHANG_PERCENT;
+
+// Haptics helper - not supported on web
+const triggerHaptic = async (style: 'light' | 'medium' | 'heavy' = 'medium') => {
+    if (Platform.OS === 'web') return;
+    const Haptics = await import('expo-haptics');
+    const feedbackStyle = style === 'light'
+        ? Haptics.ImpactFeedbackStyle.Light
+        : style === 'heavy'
+            ? Haptics.ImpactFeedbackStyle.Heavy
+            : Haptics.ImpactFeedbackStyle.Medium;
+    await Haptics.impactAsync(feedbackStyle);
+};
+
+export interface QuestionCardWhoLikelyProps {
+    question: {
+        id: string;
+        text: string;
+        intensity: number;
+    };
+    packInfo?: { name: string; icon: string; color?: string } | null;
+    user: {
+        id: string;
+        name?: string;
+        avatar_url?: string | null;
+    };
+    partner: {
+        id: string;
+        name?: string;
+        avatar_url?: string | null;
+    };
+    onAnswer: (responseData: { type: 'who_likely'; chosen_user_id: string }) => void;
+    onSkip?: () => void;
+    onReport?: () => void;
+}
+
+// Get initials from name
+function getInitials(name?: string): string {
+    if (!name) return "?";
+    const parts = name.trim().split(/\s+/);
+    if (parts.length === 1) {
+        return parts[0].charAt(0).toUpperCase();
+    }
+    return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
+}
+
+export default function QuestionCardWhoLikely({ question, packInfo, user, partner, onAnswer, onSkip, onReport }: QuestionCardWhoLikelyProps) {
+    const [showFeedbackModal, setShowFeedbackModal] = useState(false);
+    const [showShareModal, setShowShareModal] = useState(false);
+    const [selectedId, setSelectedId] = useState<string | null>(null);
+
+    const idleBreathing = useSharedValue(0);
+
+    const handleSharePress = async () => {
+        await triggerHaptic('light');
+        setShowShareModal(true);
+    };
+
+    // Subtle idle breathing animation
+    useEffect(() => {
+        idleBreathing.value = withRepeat(
+            withSequence(
+                withTiming(1, { duration: 2000, easing: Easing.inOut(Easing.sin) }),
+                withTiming(0, { duration: 2000, easing: Easing.inOut(Easing.sin) })
+            ),
+            -1,
+            true
+        );
+    }, []);
+
+    const animatedStyle = useAnimatedStyle(() => {
+        const idleOffset = interpolate(idleBreathing.value, [0, 1], [0, -4]);
+        return {
+            transform: [{ translateY: idleOffset }],
+        };
+    });
+
+    const handleAvatarPress = async (userId: string) => {
+        await triggerHaptic('medium');
+        setSelectedId(userId);
+        // Brief delay to show selection before triggering answer
+        setTimeout(() => {
+            onAnswer({ type: 'who_likely', chosen_user_id: userId });
+        }, 200);
+    };
+
+    const handleSkipPress = async () => {
+        await triggerHaptic('light');
+        onSkip?.();
+    };
+
+    const handleFeedbackPress = () => {
+        if (onReport) {
+            onReport();
+        } else {
+            setShowFeedbackModal(true);
+        }
+    };
+
+    return (
+        <>
+            <Animated.View
+                entering={FadeInDown.duration(400).springify()}
+                style={styles.cardWrapper}
+            >
+                <Animated.View style={[styles.cardOuter, animatedStyle, shadows.lg, { shadowColor: colors.primary }]}>
+                    <View
+                        style={[styles.gradientContainer, { backgroundColor: packInfo?.color || colors.background }]}
+                    >
+                        <CardContent
+                            question={question}
+                            packInfo={packInfo}
+                            user={user}
+                            partner={partner}
+                            selectedId={selectedId}
+                            onAvatarPress={handleAvatarPress}
+                            onSkipPress={handleSkipPress}
+                            onFeedbackPress={handleFeedbackPress}
+                            onSharePress={handleSharePress}
+                        />
+                    </View>
+                </Animated.View>
+            </Animated.View>
+
+            <QuestionFeedbackModal
+                visible={showFeedbackModal}
+                onClose={() => setShowFeedbackModal(false)}
+                questionId={question.id}
+                questionText={question.text}
+            />
+
+            <SharePreviewModal
+                visible={showShareModal}
+                onClose={() => setShowShareModal(false)}
+                question={question}
+                packName={packInfo?.name}
+                cardColor={packInfo?.color}
+            />
+        </>
+    );
+}
+
+function CardContent({
+    question,
+    packInfo,
+    user,
+    partner,
+    selectedId,
+    onAvatarPress,
+    onSkipPress,
+    onFeedbackPress,
+    onSharePress,
+}: {
+    question: QuestionCardWhoLikelyProps['question'];
+    packInfo?: { name: string; icon: string; color?: string } | null;
+    user: QuestionCardWhoLikelyProps['user'];
+    partner: QuestionCardWhoLikelyProps['partner'];
+    selectedId: string | null;
+    onAvatarPress: (userId: string) => void;
+    onSkipPress: () => void;
+    onFeedbackPress: () => void;
+    onSharePress: () => void;
+}) {
+    return (
+        <View style={styles.cardInner}>
+            {/* Header Row */}
+            <View style={styles.headerRow}>
+                {packInfo && (
+                    <View style={styles.packBadge}>
+                        <Ionicons name={packInfo.icon as any} size={14} color={colors.text} />
+                        <Text style={styles.packBadgeText} numberOfLines={1}>
+                            {packInfo.name}
+                        </Text>
+                    </View>
+                )}
+                {!packInfo && <View style={styles.headerSpacer} />}
+
+                <View style={styles.headerActions}>
+                    <TouchableOpacity
+                        style={styles.headerButton}
+                        onPress={onSharePress}
+                        hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+                        activeOpacity={0.7}
+                    >
+                        <Ionicons name="share-outline" size={20} color="rgba(255,255,255,0.8)" />
+                    </TouchableOpacity>
+                    <TouchableOpacity
+                        style={styles.headerButton}
+                        onPress={onFeedbackPress}
+                        hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+                        activeOpacity={0.7}
+                    >
+                        <Ionicons name="flag-outline" size={20} color="rgba(255,255,255,0.6)" />
+                    </TouchableOpacity>
+                </View>
+            </View>
+
+            {/* Content */}
+            <View style={styles.content}>
+                <Text style={styles.text}>
+                    {question.text}
+                </Text>
+            </View>
+
+            {/* Footer - Avatar Buttons */}
+            <View style={styles.footer}>
+                <View style={styles.avatarContainer}>
+                    <AvatarButton
+                        userId={user.id}
+                        name={user.name}
+                        avatarUrl={user.avatar_url}
+                        isSelected={selectedId === user.id}
+                        onPress={onAvatarPress}
+                    />
+                    <TouchableOpacity
+                        style={styles.skipButtonCenter}
+                        onPress={onSkipPress}
+                        activeOpacity={0.7}
+                    >
+                        <Text style={styles.skipText}>Skip</Text>
+                    </TouchableOpacity>
+                    <AvatarButton
+                        userId={partner.id}
+                        name={partner.name}
+                        avatarUrl={partner.avatar_url}
+                        isSelected={selectedId === partner.id}
+                        onPress={onAvatarPress}
+                    />
+                </View>
+            </View>
+        </View>
+    );
+}
+
+function AvatarButton({
+    userId,
+    name,
+    avatarUrl,
+    isSelected,
+    onPress,
+}: {
+    userId: string;
+    name?: string;
+    avatarUrl?: string | null;
+    isSelected: boolean;
+    onPress: (userId: string) => void;
+}) {
+    const buttonScale = useSharedValue(1);
+    const buttonGlow = useSharedValue(0);
+
+    // Animate selection
+    useEffect(() => {
+        if (isSelected) {
+            buttonScale.value = withSequence(
+                withSpring(1.1, animations.springBouncy),
+                withSpring(1.05, animations.spring)
+            );
+            buttonGlow.value = withTiming(1, { duration: 200 });
+        } else {
+            buttonScale.value = withSpring(1, animations.spring);
+            buttonGlow.value = withTiming(0, { duration: 200 });
+        }
+    }, [isSelected]);
+
+    const handlePressIn = () => {
+        if (!isSelected) {
+            buttonScale.value = withSpring(0.95, animations.spring);
+            buttonGlow.value = withTiming(0.5, { duration: 100 });
+        }
+    };
+
+    const handlePressOut = () => {
+        if (!isSelected) {
+            buttonScale.value = withSpring(1, animations.spring);
+            buttonGlow.value = withTiming(0, { duration: 150 });
+        }
+    };
+
+    const buttonAnimatedStyle = useAnimatedStyle(() => ({
+        transform: [{ scale: buttonScale.value }],
+        shadowOpacity: interpolate(buttonGlow.value, [0, 1], [0.2, 0.6]),
+        shadowRadius: interpolate(buttonGlow.value, [0, 1], [8, 20]),
+    }));
+
+    const borderAnimatedStyle = useAnimatedStyle(() => ({
+        borderWidth: interpolate(buttonGlow.value, [0, 1], [3, 4]),
+        borderColor: colors.text, // Solid white border
+    }));
+
+    return (
+        <TouchableOpacity
+            onPress={() => onPress(userId)}
+            onPressIn={handlePressIn}
+            onPressOut={handlePressOut}
+            activeOpacity={1}
+            style={styles.avatarButtonWrapper}
+        >
+            <Animated.View style={[
+                styles.avatarButton,
+                buttonAnimatedStyle,
+                { shadowColor: colors.text }
+            ]}>
+                <Animated.View style={[styles.avatarBorder, borderAnimatedStyle]}>
+                    {avatarUrl ? (
+                        <Image
+                            source={{ uri: avatarUrl }}
+                            style={styles.avatarImage}
+                            contentFit="cover"
+                            cachePolicy="memory-disk"
+                            transition={200}
+                        />
+                    ) : (
+                        <View style={styles.avatarFallback}>
+                            <Text style={styles.avatarInitials}>
+                                {getInitials(name)}
+                            </Text>
+                        </View>
+                    )}
+                </Animated.View>
+            </Animated.View>
+        </TouchableOpacity>
+    );
+}
+
+const styles = StyleSheet.create({
+    cardWrapper: {
+        width: "90%",
+        maxWidth: 400,
+        flex: 1,
+        maxHeight: 580 - actionButtonOffset, // Account for avatar overhang
+    },
+    cardOuter: {
+        flex: 1,
+        borderRadius: radius.xxl,
+        overflow: "visible",
+    },
+    gradientContainer: {
+        flex: 1,
+        borderRadius: radius.xxl,
+        overflow: "visible",
+    },
+    cardInner: {
+        flex: 1,
+        paddingTop: spacing.md,
+        paddingBottom: spacing.sm,
+        paddingHorizontal: spacing.lg,
+    },
+    // Header row styles
+    headerRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: spacing.md,
+    },
+    headerSpacer: {
+        flex: 1,
+    },
+    packBadge: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: 'rgba(255,255,255,0.15)',
+        paddingHorizontal: spacing.md,
+        paddingVertical: spacing.sm,
+        borderRadius: radius.full,
+        gap: spacing.xs,
+        maxWidth: '60%',
+    },
+    packBadgeText: {
+        ...typography.caption1,
+        fontWeight: '600',
+        color: colors.text,
+    },
+    headerActions: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: spacing.xs,
+    },
+    headerButton: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        backgroundColor: 'rgba(255,255,255,0.12)',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    // Content styles
+    content: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        paddingHorizontal: spacing.sm,
+    },
+    text: {
+        ...typography.title1,
+        color: colors.text,
+        textAlign: "center",
+        lineHeight: 36,
+    },
+    // Footer styles
+    footer: {
+        paddingTop: spacing.md,
+        transform: [{ translateY: actionButtonOffset }],
+    },
+    avatarContainer: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'flex-end',
+        gap: spacing.lg,
+    },
+    avatarButtonWrapper: {
+        alignItems: 'center',
+    },
+    avatarButton: {
+        width: AVATAR_SIZE,
+        height: AVATAR_SIZE,
+        borderRadius: AVATAR_SIZE / 2,
+        justifyContent: 'center',
+        alignItems: 'center',
+        shadowOffset: { width: 0, height: 4 },
+    },
+    avatarBorder: {
+        width: AVATAR_SIZE,
+        height: AVATAR_SIZE,
+        borderRadius: AVATAR_SIZE / 2,
+        borderWidth: 3,
+        borderColor: colors.text,
+    },
+    avatarImage: {
+        width: AVATAR_SIZE - 6, // Account for border width (3px each side)
+        height: AVATAR_SIZE - 6,
+        borderRadius: (AVATAR_SIZE - 6) / 2,
+    },
+    avatarFallback: {
+        width: AVATAR_SIZE - 6,
+        height: AVATAR_SIZE - 6,
+        borderRadius: (AVATAR_SIZE - 6) / 2,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: colors.primary,
+    },
+    avatarInitials: {
+        ...typography.title1,
+        color: colors.text,
+        fontWeight: 'bold',
+    },
+    skipButtonCenter: {
+        paddingVertical: spacing.sm,
+        paddingHorizontal: spacing.md,
+        marginBottom: 30, // Align above center of 72px avatars
+    },
+    skipText: {
+        ...typography.caption1,
+        color: 'rgba(255,255,255,0.5)',
+        fontWeight: '600',
+    },
+});
diff --git a/apps/mobile/src/components/questions/index.ts b/apps/mobile/src/components/questions/index.ts
new file mode 100644
index 0000000..9e03125
--- /dev/null
+++ b/apps/mobile/src/components/questions/index.ts
@@ -0,0 +1,10 @@
+export { default as QuestionCard } from './QuestionCard';
+export type { QuestionCardProps } from './QuestionCard';
+export { default as QuestionCardText } from './QuestionCardText';
+export type { QuestionCardTextProps } from './QuestionCardText';
+export { default as QuestionCardWhoLikely } from './QuestionCardWhoLikely';
+export type { QuestionCardWhoLikelyProps } from './QuestionCardWhoLikely';
+export { default as QuestionCardPhoto } from './QuestionCardPhoto';
+export type { QuestionCardPhotoProps } from './QuestionCardPhoto';
+export { default as QuestionCardAudio } from './QuestionCardAudio';
+export type { QuestionCardAudioProps } from './QuestionCardAudio';
diff --git a/apps/mobile/src/components/responses/EditResponseSheet.tsx b/apps/mobile/src/components/responses/EditResponseSheet.tsx
index 79e916c..a489c85 100644
--- a/apps/mobile/src/components/responses/EditResponseSheet.tsx
+++ b/apps/mobile/src/components/responses/EditResponseSheet.tsx
@@ -1,29 +1,33 @@
-import { useState, useEffect } from "react";
-import {
-    View,
-    Text,
-    StyleSheet,
-    Modal,
-    TouchableOpacity,
-    TouchableWithoutFeedback,
-    ActivityIndicator,
+import { useState, useEffect, type ReactNode } from "react";
+import {
+    View,
+    Text,
+    TextInput,
+    StyleSheet,
+    Modal,
+    TouchableOpacity,
+    TouchableWithoutFeedback,
+    ActivityIndicator,
     Platform,
 } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
-import { LinearGradient } from "expo-linear-gradient";
 import { BlurView } from "expo-blur";
-import Animated, { FadeIn, FadeOut, SlideInDown, SlideOutDown } from "react-native-reanimated";
-import type { ResponseWithQuestion, UpdateResponseResult } from "../../store";
-import { useResponsesStore } from "../../store";
-import type { AnswerType } from "@/types";
-import { colors, spacing, typography, radius } from "../../theme";
-import { DeleteMatchConfirmModal } from "./DeleteMatchConfirmModal";
+import Animated, { FadeIn, FadeOut, SlideInDown, SlideOutDown } from "react-native-reanimated";
+import type { ResponseWithQuestion } from "../../store";
+import { useAuthStore, useResponsesStore } from "../../store";
+import { useMediaPicker } from "../../hooks/useMediaPicker";
+import { useResponseMediaUpload } from "../../hooks/useResponseMediaUpload";
+import { useAudioRecorder } from "../../hooks/useAudioRecorder";
+import type { AnswerType, ResponseData } from "@/types";
+import { colors, spacing, typography, radius } from "../../theme";
+import { DeleteMatchConfirmModal } from "./DeleteMatchConfirmModal";
 
 // Premium color palette
-const ACCENT = colors.premium.gold;
-const ACCENT_RGBA = "rgba(212, 175, 55, ";
+const ACCENT = colors.premium.gold;
+const ACCENT_RGBA = "rgba(212, 175, 55, ";
+const MAX_TEXT_LENGTH = 500;
 
-// Answer button config
+// Answer button config (includes 'maybe' for displaying existing responses)
 const ANSWER_CONFIG = {
     yes: {
         color: colors.success,
@@ -31,20 +35,23 @@ const ANSWER_CONFIG = {
         icon: "checkmark-circle" as const,
         label: "Yes",
     },
-    maybe: {
-        color: colors.warning,
-        rgba: "rgba(243, 156, 18, ",
-        icon: "help-circle" as const,
-        label: "Maybe",
-    },
     no: {
         color: colors.error,
         rgba: "rgba(231, 76, 60, ",
         icon: "close-circle" as const,
         label: "No",
     },
+    maybe: {
+        color: colors.warning,
+        rgba: "rgba(243, 156, 18, ",
+        icon: "help-circle" as const,
+        label: "Maybe",
+    },
 };
 
+// Only these answer types can be selected by users
+type SelectableAnswerType = "yes" | "no";
+
 interface EditResponseSheetProps {
     visible: boolean;
     response: ResponseWithQuestion | null;
@@ -52,33 +59,73 @@ interface EditResponseSheetProps {
     onSuccess: () => void;
 }
 
-export function EditResponseSheet({ visible, response, onClose, onSuccess }: EditResponseSheetProps) {
-    const { updateResponse } = useResponsesStore();
-    const [isLoading, setIsLoading] = useState(false);
-    const [pendingAnswer, setPendingAnswer] = useState<AnswerType | null>(null);
-    const [confirmModalData, setConfirmModalData] = useState<{
-        matchId: string;
-        messageCount: number;
-    } | null>(null);
+export function EditResponseSheet({ visible, response, onClose, onSuccess }: EditResponseSheetProps) {
+    const { updateResponse } = useResponsesStore();
+    const { user, partner } = useAuthStore();
+    const [isLoading, setIsLoading] = useState(false);
+    const [pendingAnswer, setPendingAnswer] = useState<AnswerType | null>(null);
+    const [confirmModalData, setConfirmModalData] = useState<{
+        matchId: string;
+        messageCount: number;
+    } | null>(null);
+    const [textValue, setTextValue] = useState("");
+    const [selectedWhoLikely, setSelectedWhoLikely] = useState<string | null>(null);
+
+    const questionId = response?.question_id ?? "";
+    const maxDurationSeconds = response?.question.config?.max_duration_seconds ?? 60;
+    const { takePhoto, pickMedia } = useMediaPicker({ imageQuality: 0.8 });
+    const { uploading, uploadPhoto, uploadAudio } = useResponseMediaUpload({
+        userId: user?.id ?? "",
+        questionId,
+    });
+    const {
+        state: audioState,
+        durationSeconds,
+        recordingUri,
+        startRecording,
+        stopRecording,
+        resetRecording,
+    } = useAudioRecorder({ maxDurationSeconds });
+    const isBusy = isLoading || uploading;
 
     // Reset state when modal closes
-    useEffect(() => {
-        if (!visible) {
-            setIsLoading(false);
-            setPendingAnswer(null);
-            setConfirmModalData(null);
-        }
-    }, [visible]);
+    useEffect(() => {
+        if (!visible) {
+            setIsLoading(false);
+            setPendingAnswer(null);
+            setConfirmModalData(null);
+            setTextValue("");
+            setSelectedWhoLikely(null);
+            resetRecording();
+        }
+    }, [visible, resetRecording]);
+
+    useEffect(() => {
+        if (!visible || !response) return;
+
+        if (response.response_data?.type === "text_answer") {
+            setTextValue(response.response_data.text);
+        } else {
+            setTextValue("");
+        }
+
+        if (response.response_data?.type === "who_likely") {
+            setSelectedWhoLikely(response.response_data.chosen_user_id);
+        } else {
+            setSelectedWhoLikely(null);
+        }
+    }, [visible, response]);
+
+    if (!response) return null;
 
-    if (!response) return null;
-
-    const handleAnswerPress = async (newAnswer: AnswerType) => {
-        if (newAnswer === response.answer || isLoading) return;
-
-        setIsLoading(true);
-        setPendingAnswer(newAnswer);
-
-        const result = await updateResponse(response.question_id, newAnswer, false);
+    const handleAnswerPress = async (newAnswer: AnswerType, responseData?: ResponseData | null) => {
+        if (isBusy) return;
+        if (newAnswer === response.answer && typeof responseData === "undefined") return;
+
+        setIsLoading(true);
+        setPendingAnswer(newAnswer);
+
+        const result = await updateResponse(response.question_id, newAnswer, false, responseData);
 
         if (result.requires_confirmation && result.match_id) {
             // Show confirmation modal
@@ -120,32 +167,101 @@ export function EditResponseSheet({ visible, response, onClose, onSuccess }: Edi
         }
     };
 
-    const handleCancelDelete = () => {
-        setConfirmModalData(null);
-        setPendingAnswer(null);
-    };
-
-    const AnswerButton = ({ answer }: { answer: AnswerType }) => {
-        const config = ANSWER_CONFIG[answer];
-        const isSelected = response.answer === answer;
-        const isPending = pendingAnswer === answer;
-
-        return (
-            <TouchableOpacity
-                style={[
-                    styles.answerButton,
-                    isSelected && {
-                        backgroundColor: `${config.rgba}0.2)`,
-                        borderColor: `${config.rgba}0.4)`,
-                    },
-                ]}
-                onPress={() => handleAnswerPress(answer)}
-                disabled={isLoading}
-                activeOpacity={0.7}
-            >
-                {isPending && isLoading ? (
-                    <ActivityIndicator color={config.color} size="small" />
-                ) : (
+    const handleCancelDelete = () => {
+        setConfirmModalData(null);
+        setPendingAnswer(null);
+    };
+
+    const questionType = response.question.question_type ?? "swipe";
+    const isTextSaveDisabled = textValue.trim().length === 0 || isBusy;
+    const isNoSelected = response.answer === "no";
+    const userLabel = user?.name || "You";
+    const partnerLabel = partner?.name || "Partner";
+    const canUpload = !!user?.id && !!questionId;
+
+    const handleTextSave = async () => {
+        const trimmed = textValue.trim();
+        if (!trimmed) return;
+        await handleAnswerPress("yes", { type: "text_answer", text: trimmed });
+    };
+
+    const handleSetNo = async () => {
+        await handleAnswerPress("no", null);
+    };
+
+    const handleWhoLikelySelect = async (userId: string) => {
+        if (isBusy) return;
+        setSelectedWhoLikely(userId);
+        await handleAnswerPress("yes", { type: "who_likely", chosen_user_id: userId });
+    };
+
+    const handlePhotoPick = async (source: "camera" | "library") => {
+        if (isBusy || !canUpload) return;
+        const result = source === "camera" ? await takePhoto() : await pickMedia();
+        if (!result || result.mediaType !== "image") return;
+
+        const uploadResult = await uploadPhoto(result.uri);
+        if (!uploadResult.success || !uploadResult.mediaPath) {
+            console.error("Failed to upload photo response:", uploadResult.error);
+            return;
+        }
+
+        await handleAnswerPress("yes", { type: "photo", media_path: uploadResult.mediaPath });
+    };
+
+    const handleStartRecording = async () => {
+        if (isBusy) return;
+        await startRecording();
+    };
+
+    const handleStopRecording = async () => {
+        if (isBusy) return;
+        await stopRecording();
+    };
+
+    const handleAudioSave = async () => {
+        if (!recordingUri || isBusy || !canUpload) return;
+
+        const uploadResult = await uploadAudio(recordingUri, durationSeconds);
+        if (!uploadResult.success || !uploadResult.mediaPath) {
+            console.error("Failed to upload audio response:", uploadResult.error);
+            return;
+        }
+
+        await handleAnswerPress("yes", {
+            type: "audio",
+            media_path: uploadResult.mediaPath,
+            duration_seconds: durationSeconds,
+        });
+        resetRecording();
+    };
+
+    const handleDiscardRecording = () => {
+        if (isBusy) return;
+        resetRecording();
+    };
+
+    const AnswerButton = ({ answer }: { answer: SelectableAnswerType }) => {
+        const config = ANSWER_CONFIG[answer];
+        const isSelected = response.answer === answer;
+        const isPending = pendingAnswer === answer;
+
+        return (
+            <TouchableOpacity
+                style={[
+                    styles.answerButton,
+                    isSelected && {
+                        backgroundColor: `${config.rgba}0.2)`,
+                        borderColor: `${config.rgba}0.4)`,
+                    },
+                ]}
+                onPress={() => handleAnswerPress(answer)}
+                disabled={isBusy}
+                activeOpacity={0.7}
+            >
+                {isPending && isLoading ? (
+                    <ActivityIndicator color={config.color} size="small" />
+                ) : (
                     <Ionicons
                         name={config.icon}
                         size={28}
@@ -165,15 +281,252 @@ export function EditResponseSheet({ visible, response, onClose, onSuccess }: Edi
                         <Ionicons name="checkmark" size={14} color={config.color} />
                     </View>
                 )}
-            </TouchableOpacity>
-        );
-    };
-
-    return (
-        <Modal
-            visible={visible}
-            transparent
-            animationType="none"
+            </TouchableOpacity>
+        );
+    };
+
+    const ActionButton = ({
+        label,
+        icon,
+        color = ACCENT,
+        onPress,
+        disabled = false,
+        loading = false,
+    }: {
+        label: string;
+        icon: keyof typeof Ionicons.glyphMap;
+        color?: string;
+        onPress: () => void;
+        disabled?: boolean;
+        loading?: boolean;
+    }) => {
+        const isDisabled = disabled || loading;
+        const iconColor = isDisabled ? colors.textTertiary : color;
+
+        return (
+            <TouchableOpacity
+                style={[styles.actionButton, isDisabled && styles.actionButtonDisabled]}
+                onPress={onPress}
+                disabled={isDisabled}
+                activeOpacity={0.7}
+            >
+                {loading ? (
+                    <ActivityIndicator color={iconColor} size="small" />
+                ) : (
+                    <Ionicons name={icon} size={20} color={iconColor} />
+                )}
+                <Text style={[styles.actionButtonText, { color: iconColor }]}>
+                    {label}
+                </Text>
+            </TouchableOpacity>
+        );
+    };
+
+    const ChoiceButton = ({
+        label,
+        selected,
+        onPress,
+        disabled = false,
+    }: {
+        label: string;
+        selected: boolean;
+        onPress: () => void;
+        disabled?: boolean;
+    }) => (
+        <TouchableOpacity
+            style={[styles.choiceButton, selected && styles.choiceButtonSelected]}
+            onPress={onPress}
+            disabled={disabled}
+            activeOpacity={0.7}
+        >
+            <Text style={[styles.choiceButtonText, selected && styles.choiceButtonTextSelected]}>
+                {label}
+            </Text>
+            {selected && <Ionicons name="checkmark" size={16} color={ACCENT} />}
+        </TouchableOpacity>
+    );
+
+    const isSavingYes = isLoading && pendingAnswer === "yes";
+    const isSavingNo = isLoading && pendingAnswer === "no";
+
+    const actionContent = (() => {
+        if (questionType === "text_answer") {
+            return (
+                <View style={styles.editorContainer}>
+                    <View style={styles.textInputContainer}>
+                        <TextInput
+                            style={styles.textInput}
+                            value={textValue}
+                            onChangeText={(value) => setTextValue(value.slice(0, MAX_TEXT_LENGTH))}
+                            placeholder="Update your answer..."
+                            placeholderTextColor={colors.textTertiary}
+                            multiline
+                            editable={!isBusy}
+                            textAlignVertical="top"
+                            maxLength={MAX_TEXT_LENGTH}
+                        />
+                        <View style={styles.charCountContainer}>
+                            <Text style={styles.charCount}>
+                                {textValue.length}/{MAX_TEXT_LENGTH}
+                            </Text>
+                        </View>
+                    </View>
+                    <View style={styles.actionRow}>
+                        <ActionButton
+                            label="Set No"
+                            icon="close"
+                            color={ANSWER_CONFIG.no.color}
+                            onPress={handleSetNo}
+                            disabled={isBusy || isNoSelected}
+                            loading={isSavingNo}
+                        />
+                        <ActionButton
+                            label="Save"
+                            icon="checkmark"
+                            color={ANSWER_CONFIG.yes.color}
+                            onPress={handleTextSave}
+                            disabled={isTextSaveDisabled}
+                            loading={isSavingYes}
+                        />
+                    </View>
+                </View>
+            );
+        }
+
+        if (questionType === "who_likely") {
+            return (
+                <View style={styles.editorContainer}>
+                    <View style={styles.choiceRow}>
+                        <ChoiceButton
+                            label={userLabel}
+                            selected={selectedWhoLikely === user?.id}
+                            onPress={() => {
+                                if (user?.id) {
+                                    handleWhoLikelySelect(user.id);
+                                }
+                            }}
+                            disabled={isBusy || !user?.id}
+                        />
+                        <ChoiceButton
+                            label={partnerLabel}
+                            selected={selectedWhoLikely === partner?.id}
+                            onPress={() => {
+                                if (partner?.id) {
+                                    handleWhoLikelySelect(partner.id);
+                                }
+                            }}
+                            disabled={isBusy || !partner?.id}
+                        />
+                    </View>
+                    <View style={styles.actionRow}>
+                        <ActionButton
+                            label="Set No"
+                            icon="close"
+                            color={ANSWER_CONFIG.no.color}
+                            onPress={handleSetNo}
+                            disabled={isBusy || isNoSelected}
+                            loading={isSavingNo}
+                        />
+                    </View>
+                </View>
+            );
+        }
+
+        if (questionType === "photo") {
+            return (
+                <View style={styles.editorContainer}>
+                    <View style={styles.actionRow}>
+                        <ActionButton
+                            label="Camera"
+                            icon="camera"
+                            onPress={() => handlePhotoPick("camera")}
+                            disabled={isBusy || !canUpload}
+                            loading={uploading}
+                        />
+                        <ActionButton
+                            label="Library"
+                            icon="images"
+                            onPress={() => handlePhotoPick("library")}
+                            disabled={isBusy || !canUpload}
+                            loading={uploading}
+                        />
+                    </View>
+                    <View style={styles.actionRow}>
+                        <ActionButton
+                            label="Set No"
+                            icon="close"
+                            color={ANSWER_CONFIG.no.color}
+                            onPress={handleSetNo}
+                            disabled={isBusy || isNoSelected}
+                            loading={isSavingNo}
+                        />
+                    </View>
+                </View>
+            );
+        }
+
+        if (questionType === "audio") {
+            const statusText = audioState === "recording"
+                ? `Recording... ${durationSeconds}s`
+                : recordingUri
+                    ? `Recorded ${durationSeconds}s`
+                    : "Tap record to start";
+
+            return (
+                <View style={styles.editorContainer}>
+                    <Text style={styles.audioStatusText}>{statusText}</Text>
+                    <View style={styles.actionRow}>
+                        <ActionButton
+                            label={audioState === "recording" ? "Stop" : recordingUri ? "Re-record" : "Record"}
+                            icon={audioState === "recording" ? "square" : "mic"}
+                            onPress={audioState === "recording" ? handleStopRecording : handleStartRecording}
+                            disabled={isBusy}
+                        />
+                        <ActionButton
+                            label="Save"
+                            icon="checkmark"
+                            color={ANSWER_CONFIG.yes.color}
+                            onPress={handleAudioSave}
+                            disabled={!recordingUri || audioState === "recording" || isBusy || !canUpload}
+                            loading={uploading || isSavingYes}
+                        />
+                    </View>
+                    {recordingUri && audioState !== "recording" && (
+                        <TouchableOpacity
+                            style={styles.linkButton}
+                            onPress={handleDiscardRecording}
+                            disabled={isBusy}
+                        >
+                            <Text style={styles.linkButtonText}>Discard recording</Text>
+                        </TouchableOpacity>
+                    )}
+                    <View style={styles.actionRow}>
+                        <ActionButton
+                            label="Set No"
+                            icon="close"
+                            color={ANSWER_CONFIG.no.color}
+                            onPress={handleSetNo}
+                            disabled={isBusy || isNoSelected}
+                            loading={isSavingNo}
+                        />
+                    </View>
+                </View>
+            );
+        }
+
+        return (
+            <View style={styles.answerButtons}>
+                <AnswerButton answer="yes" />
+                <AnswerButton answer="no" />
+            </View>
+        );
+    })();
+
+    return (
+        <Modal
+            visible={visible}
+            transparent
+            animationType="none"
             onRequestClose={onClose}
             statusBarTranslucent
         >
@@ -187,24 +540,24 @@ export function EditResponseSheet({ visible, response, onClose, onSuccess }: Edi
                     entering={SlideInDown.springify().damping(20)}
                     exiting={SlideOutDown.duration(200)}
                 >
-                    {Platform.OS === "ios" ? (
-                        <BlurView intensity={80} tint="dark" style={styles.sheet}>
-                            <SheetContent
-                                response={response}
-                                AnswerButton={AnswerButton}
-                                onClose={onClose}
-                            />
-                        </BlurView>
-                    ) : (
-                        <View style={[styles.sheet, styles.sheetAndroid]}>
-                            <SheetContent
-                                response={response}
-                                AnswerButton={AnswerButton}
-                                onClose={onClose}
-                            />
-                        </View>
-                    )}
-                </Animated.View>
+                    {Platform.OS === "ios" ? (
+                        <BlurView intensity={80} tint="dark" style={styles.sheet}>
+                            <SheetContent
+                                response={response}
+                                actions={actionContent}
+                                onClose={onClose}
+                            />
+                        </BlurView>
+                    ) : (
+                        <View style={[styles.sheet, styles.sheetAndroid]}>
+                            <SheetContent
+                                response={response}
+                                actions={actionContent}
+                                onClose={onClose}
+                            />
+                        </View>
+                    )}
+                </Animated.View>
             </Animated.View>
 
             {/* Confirmation Modal */}
@@ -219,15 +572,15 @@ export function EditResponseSheet({ visible, response, onClose, onSuccess }: Edi
 }
 
 // Sheet content extracted for reuse between iOS blur and Android solid background
-function SheetContent({
-    response,
-    AnswerButton,
-    onClose,
-}: {
-    response: ResponseWithQuestion;
-    AnswerButton: React.FC<{ answer: AnswerType }>;
-    onClose: () => void;
-}) {
+function SheetContent({
+    response,
+    actions,
+    onClose,
+}: {
+    response: ResponseWithQuestion;
+    actions: ReactNode;
+    onClose: () => void;
+}) {
     return (
         <>
             {/* Handle */}
@@ -261,16 +614,12 @@ function SheetContent({
                 </View>
             )}
 
-            {/* Answer buttons */}
-            <View style={styles.answerButtons}>
-                <AnswerButton answer="yes" />
-                <AnswerButton answer="maybe" />
-                <AnswerButton answer="no" />
-            </View>
-
-            {/* Bottom padding for safe area */}
-            <View style={styles.bottomPadding} />
-        </>
+            {/* Action content */}
+            <View style={styles.actionsContainer}>{actions}</View>
+
+            {/* Bottom padding for safe area */}
+            <View style={styles.bottomPadding} />
+        </>
     );
 }
 
@@ -354,19 +703,45 @@ const styles = StyleSheet.create({
         marginBottom: spacing.lg,
         gap: spacing.sm,
     },
-    warningText: {
-        ...typography.footnote,
-        color: colors.warning,
-        flex: 1,
-    },
-    answerButtons: {
-        flexDirection: "row",
-        gap: spacing.md,
-        marginBottom: spacing.lg,
-    },
-    answerButton: {
-        flex: 1,
-        alignItems: "center",
+    warningText: {
+        ...typography.footnote,
+        color: colors.warning,
+        flex: 1,
+    },
+    actionsContainer: {
+        marginBottom: spacing.lg,
+    },
+    editorContainer: {
+        gap: spacing.md,
+    },
+    textInputContainer: {
+        backgroundColor: "rgba(255, 255, 255, 0.08)",
+        borderRadius: radius.lg,
+        borderWidth: 1,
+        borderColor: "rgba(255, 255, 255, 0.12)",
+        padding: spacing.md,
+        minHeight: 120,
+    },
+    textInput: {
+        ...typography.body,
+        color: colors.text,
+        minHeight: 80,
+    },
+    charCountContainer: {
+        alignItems: "flex-end",
+        marginTop: spacing.xs,
+    },
+    charCount: {
+        ...typography.caption2,
+        color: colors.textTertiary,
+    },
+    answerButtons: {
+        flexDirection: "row",
+        gap: spacing.md,
+    },
+    answerButton: {
+        flex: 1,
+        alignItems: "center",
         justifyContent: "center",
         paddingVertical: spacing.lg,
         borderRadius: radius.lg,
@@ -380,18 +755,82 @@ const styles = StyleSheet.create({
         color: colors.textSecondary,
         fontWeight: "600",
     },
-    selectedIndicator: {
-        position: "absolute",
-        top: spacing.sm,
-        right: spacing.sm,
-        width: 20,
+    selectedIndicator: {
+        position: "absolute",
+        top: spacing.sm,
+        right: spacing.sm,
+        width: 20,
         height: 20,
         borderRadius: 10,
         backgroundColor: "rgba(255, 255, 255, 0.1)",
-        justifyContent: "center",
-        alignItems: "center",
-    },
-    bottomPadding: {
-        height: Platform.OS === "ios" ? 34 : 20,
-    },
-});
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    actionRow: {
+        flexDirection: "row",
+        gap: spacing.md,
+        alignItems: "center",
+    },
+    actionButton: {
+        flex: 1,
+        alignItems: "center",
+        justifyContent: "center",
+        paddingVertical: spacing.md,
+        borderRadius: radius.md,
+        backgroundColor: "rgba(255, 255, 255, 0.05)",
+        borderWidth: 1,
+        borderColor: "rgba(255, 255, 255, 0.1)",
+        gap: spacing.xs,
+    },
+    actionButtonDisabled: {
+        opacity: 0.6,
+    },
+    actionButtonText: {
+        ...typography.caption1,
+        fontWeight: "600",
+    },
+    choiceRow: {
+        flexDirection: "row",
+        gap: spacing.md,
+    },
+    choiceButton: {
+        flex: 1,
+        alignItems: "center",
+        justifyContent: "center",
+        paddingVertical: spacing.md,
+        borderRadius: radius.md,
+        backgroundColor: "rgba(255, 255, 255, 0.06)",
+        borderWidth: 1,
+        borderColor: "rgba(255, 255, 255, 0.12)",
+        flexDirection: "row",
+        gap: spacing.xs,
+    },
+    choiceButtonSelected: {
+        borderColor: `${ACCENT_RGBA}0.6)`,
+        backgroundColor: `${ACCENT_RGBA}0.12)`,
+    },
+    choiceButtonText: {
+        ...typography.callout,
+        color: colors.textSecondary,
+        fontWeight: "600",
+    },
+    choiceButtonTextSelected: {
+        color: ACCENT,
+    },
+    audioStatusText: {
+        ...typography.caption1,
+        color: colors.textSecondary,
+        textAlign: "center",
+    },
+    linkButton: {
+        alignSelf: "center",
+    },
+    linkButtonText: {
+        ...typography.caption1,
+        color: colors.textTertiary,
+        textDecorationLine: "underline",
+    },
+    bottomPadding: {
+        height: Platform.OS === "ios" ? 34 : 20,
+    },
+});
diff --git a/apps/mobile/src/components/responses/ResponseCard.tsx b/apps/mobile/src/components/responses/ResponseCard.tsx
index 259aa5c..2d3af27 100644
--- a/apps/mobile/src/components/responses/ResponseCard.tsx
+++ b/apps/mobile/src/components/responses/ResponseCard.tsx
@@ -6,17 +6,15 @@ import type { ResponseWithQuestion } from "../../store";
 import { colors, spacing, typography, radius } from "../../theme";
 
 // Premium color palette
-const ACCENT = colors.premium.gold;
-const ACCENT_RGBA = "rgba(212, 175, 55, ";
-const ROSE = colors.premium.rose;
-const ROSE_RGBA = "rgba(232, 164, 174, ";
+const ACCENT = colors.premium.gold;
+const ACCENT_RGBA = "rgba(212, 175, 55, ";
 
 // Answer colors (semantic)
-const ANSWER_COLORS = {
-    yes: {
-        color: colors.success,
-        rgba: "rgba(46, 204, 113, ",
-        label: "YES",
+const ANSWER_COLORS = {
+    yes: {
+        color: colors.success,
+        rgba: "rgba(46, 204, 113, ",
+        label: "YES",
     },
     no: {
         color: colors.error,
@@ -27,18 +25,100 @@ const ANSWER_COLORS = {
         color: colors.warning,
         rgba: "rgba(243, 156, 18, ",
         label: "MAYBE",
-    },
-};
-
-interface ResponseCardProps {
-    response: ResponseWithQuestion;
-    index: number;
-    onEditPress: () => void;
-    onChatPress?: () => void;
-}
-
-export function ResponseCard({ response, index, onEditPress, onChatPress }: ResponseCardProps) {
-    const answerStyle = ANSWER_COLORS[response.answer];
+    },
+};
+
+const RESPONSE_TYPE_CONFIG = {
+    text_answer: {
+        icon: "chatbubble-ellipses-outline" as const,
+        label: "TEXT",
+    },
+    photo: {
+        icon: "image-outline" as const,
+        label: "PHOTO",
+    },
+    audio: {
+        icon: "mic-outline" as const,
+        label: "AUDIO",
+    },
+    who_likely: {
+        icon: "people-outline" as const,
+        label: "WHO",
+    },
+};
+
+interface ResponseCardProps {
+    response: ResponseWithQuestion;
+    index: number;
+    onEditPress: () => void;
+    onChatPress?: () => void;
+    viewerId?: string;
+    viewerName?: string | null;
+    partnerName?: string | null;
+}
+
+function truncateText(value: string, maxLength: number) {
+    if (value.length <= maxLength) return value;
+    return `${value.slice(0, maxLength - 3)}...`;
+}
+
+function getResponseSummary(
+    response: ResponseWithQuestion,
+    viewerId?: string,
+    viewerName?: string | null,
+    partnerName?: string | null
+) {
+    const data = response.response_data;
+    if (!data) return null;
+
+    if (data.type === "text_answer") {
+        return `"${truncateText(data.text, 90)}"`;
+    }
+
+    if (data.type === "photo") {
+        return "Photo response saved";
+    }
+
+    if (data.type === "audio") {
+        const duration = data.duration_seconds ? `${data.duration_seconds}s` : "";
+        return duration ? `Audio response (${duration})` : "Audio response saved";
+    }
+
+    if (data.type === "who_likely") {
+        const chosenName = data.chosen_user_id === viewerId
+            ? viewerName || "you"
+            : partnerName || "your partner";
+        return `You chose ${chosenName}`;
+    }
+
+    return null;
+}
+
+export function ResponseCard({
+    response,
+    index,
+    onEditPress,
+    onChatPress,
+    viewerId,
+    viewerName,
+    partnerName,
+}: ResponseCardProps) {
+    const answerStyle = ANSWER_COLORS[response.answer];
+    const questionType = response.question.question_type ?? "swipe";
+    const responseSummary = getResponseSummary(response, viewerId, viewerName, partnerName);
+    const typeKey = response.response_data?.type || (questionType !== "swipe" ? questionType : null);
+    const typeConfig = typeKey ? RESPONSE_TYPE_CONFIG[typeKey as keyof typeof RESPONSE_TYPE_CONFIG] : null;
+    const showTypeBadge = questionType !== "swipe" && response.answer !== "no" && !!typeConfig;
+    const badgeColor = showTypeBadge ? ACCENT : answerStyle.color;
+    const badgeRgba = showTypeBadge ? ACCENT_RGBA : answerStyle.rgba;
+    const badgeIcon = showTypeBadge && typeConfig
+        ? typeConfig.icon
+        : response.answer === "yes"
+            ? "checkmark"
+            : response.answer === "no"
+                ? "close"
+                : "help";
+    const tagLabel = showTypeBadge && typeConfig ? typeConfig.label : answerStyle.label;
 
     return (
         <Animated.View entering={FadeInRight.delay(index * 30).duration(250)}>
@@ -50,56 +130,55 @@ export function ResponseCard({ response, index, onEditPress, onChatPress }: Resp
                     start={{ x: 0, y: 0 }}
                     end={{ x: 1, y: 1 }}
                 />
-                {/* Top silk highlight */}
-                <LinearGradient
-                    colors={[`${answerStyle.rgba}0.06)`, "transparent"]}
-                    style={styles.cardSilkHighlight}
-                    start={{ x: 0.5, y: 0 }}
-                    end={{ x: 0.5, y: 1 }}
-                />
+                {/* Top silk highlight */}
+                <LinearGradient
+                    colors={[`${badgeRgba}0.06)`, "transparent"]}
+                    style={styles.cardSilkHighlight}
+                    start={{ x: 0.5, y: 0 }}
+                    end={{ x: 0.5, y: 1 }}
+                />
 
                 <View style={styles.row}>
                     {/* Answer badge */}
-                    <View
-                        style={[
-                            styles.answerBadge,
-                            { backgroundColor: `${answerStyle.rgba}0.15)`, borderColor: `${answerStyle.rgba}0.3)` },
-                        ]}
-                    >
-                        <Ionicons
-                            name={
-                                response.answer === "yes"
-                                    ? "checkmark"
-                                    : response.answer === "no"
-                                      ? "close"
-                                      : "help"
-                            }
-                            size={18}
-                            color={answerStyle.color}
-                        />
-                    </View>
+                    <View
+                        style={[
+                            styles.answerBadge,
+                            { backgroundColor: `${badgeRgba}0.15)`, borderColor: `${badgeRgba}0.3)` },
+                        ]}
+                    >
+                        <Ionicons
+                            name={badgeIcon}
+                            size={18}
+                            color={badgeColor}
+                        />
+                    </View>
 
                     {/* Content */}
-                    <View style={styles.content}>
-                        <Text style={styles.questionText} numberOfLines={2}>
-                            {response.question.text}
-                        </Text>
-
-                        <View style={styles.metaRow}>
-                            {/* Answer tag */}
-                            <View
-                                style={[
-                                    styles.tag,
-                                    {
-                                        backgroundColor: `${answerStyle.rgba}0.1)`,
-                                        borderColor: `${answerStyle.rgba}0.2)`,
-                                    },
-                                ]}
-                            >
-                                <Text style={[styles.tagText, { color: answerStyle.color }]}>
-                                    {answerStyle.label}
-                                </Text>
-                            </View>
+                    <View style={styles.content}>
+                        <Text style={styles.questionText} numberOfLines={2}>
+                            {response.question.text}
+                        </Text>
+                        {responseSummary && (
+                            <Text style={styles.responseSummary} numberOfLines={2}>
+                                {responseSummary}
+                            </Text>
+                        )}
+
+                        <View style={styles.metaRow}>
+                            {/* Answer tag */}
+                            <View
+                                style={[
+                                    styles.tag,
+                                    {
+                                        backgroundColor: `${badgeRgba}0.1)`,
+                                        borderColor: `${badgeRgba}0.2)`,
+                                    },
+                                ]}
+                            >
+                                <Text style={[styles.tagText, { color: badgeColor }]}>
+                                    {tagLabel}
+                                </Text>
+                            </View>
 
                             {/* Pack name */}
                             <View style={styles.packBadge}>
@@ -175,13 +254,18 @@ const styles = StyleSheet.create({
     content: {
         flex: 1,
     },
-    questionText: {
-        ...typography.subhead,
-        color: colors.text,
-        fontWeight: "500",
-        marginBottom: spacing.xs,
-        lineHeight: 20,
-    },
+    questionText: {
+        ...typography.subhead,
+        color: colors.text,
+        fontWeight: "500",
+        marginBottom: spacing.xs,
+        lineHeight: 20,
+    },
+    responseSummary: {
+        ...typography.caption1,
+        color: colors.textSecondary,
+        marginBottom: spacing.xs,
+    },
     metaRow: {
         flexDirection: "row",
         alignItems: "center",
diff --git a/apps/mobile/src/components/share/SharePreviewModal.tsx b/apps/mobile/src/components/share/SharePreviewModal.tsx
new file mode 100644
index 0000000..252896b
--- /dev/null
+++ b/apps/mobile/src/components/share/SharePreviewModal.tsx
@@ -0,0 +1,534 @@
+import { useRef, useEffect, useState } from "react";
+import {
+    View,
+    Text,
+    StyleSheet,
+    Modal,
+    TouchableOpacity,
+    Platform,
+    Linking,
+    Share,
+    useWindowDimensions,
+    Image,
+} from "react-native";
+import { BlurView } from "expo-blur";
+import { LinearGradient } from "expo-linear-gradient";
+import Animated, {
+    FadeIn,
+    FadeOut,
+    SlideInDown,
+    SlideOutDown,
+} from "react-native-reanimated";
+import { Ionicons } from "@expo/vector-icons";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import ViewShot from "react-native-view-shot";
+import * as Sharing from "expo-sharing";
+import * as FileSystem from "expo-file-system";
+import { colors, gradients, radius, typography, spacing, blur } from "../../theme";
+
+const logo = require("../../../assets/logo.png");
+
+const MAX_CARD_WIDTH = 340;
+
+interface SharePreviewModalProps {
+    visible: boolean;
+    onClose: () => void;
+    question: {
+        text: string;
+        partner_text?: string | null;
+        is_two_part?: boolean;
+    };
+    packName?: string;
+    cardColor?: string;
+}
+
+export function SharePreviewModal({
+    visible,
+    onClose,
+    question,
+    packName,
+    cardColor,
+}: SharePreviewModalProps) {
+    const insets = useSafeAreaInsets();
+    const { width: screenWidth } = useWindowDimensions();
+    const cardWidth = Math.min(screenWidth - 64, MAX_CARD_WIDTH);
+    const shareViewRef = useRef<ViewShot>(null);
+    const [capturedUri, setCapturedUri] = useState<string | null>(null);
+    const [isCapturing, setIsCapturing] = useState(false);
+
+    // Capture the card when modal becomes visible
+    useEffect(() => {
+        if (visible && shareViewRef.current) {
+            setIsCapturing(true);
+            // Small delay to ensure the view is rendered
+            const timer = setTimeout(async () => {
+                try {
+                    const uri = await shareViewRef.current?.capture?.();
+                    if (uri) {
+                        setCapturedUri(uri);
+                    }
+                } catch (error) {
+                    console.error('Error capturing share image:', error);
+                } finally {
+                    setIsCapturing(false);
+                }
+            }, 100);
+            return () => clearTimeout(timer);
+        }
+    }, [visible]);
+
+    // Reset state when modal closes
+    useEffect(() => {
+        if (!visible) {
+            setCapturedUri(null);
+        }
+    }, [visible]);
+
+    const handleInstagramShare = async () => {
+        if (!capturedUri) return;
+
+        try {
+            // Check if Instagram is installed
+            const instagramUrl = 'instagram://app';
+            const canOpenInstagram = await Linking.canOpenURL(instagramUrl);
+
+            if (canOpenInstagram && Platform.OS === 'ios') {
+                // For iOS, we can use the Instagram Stories URL scheme
+                // First, we need to copy the image to a location Instagram can access
+                const base64 = await FileSystem.readAsStringAsync(capturedUri, {
+                    encoding: FileSystem.EncodingType.Base64,
+                });
+
+                // Use Instagram Stories URL scheme
+                const instagramStoriesUrl = `instagram-stories://share?source_application=com.sauci.app`;
+
+                // Try to open Instagram Stories with the image
+                // Note: This requires the image to be in the pasteboard on iOS
+                await Linking.openURL(instagramStoriesUrl);
+            } else {
+                // Fallback to regular sharing
+                await handleMoreShare();
+            }
+        } catch (error) {
+            console.error('Instagram share error:', error);
+            // Fallback to regular sharing
+            await handleMoreShare();
+        }
+    };
+
+    const handleMessagesShare = async () => {
+        if (!capturedUri) {
+            // Fallback to text
+            await Share.share({
+                message: `${question.text}\n\nDiscover more on sauci.app`,
+            });
+            return;
+        }
+
+        try {
+            // On iOS, we can share directly to Messages
+            if (Platform.OS === 'ios') {
+                await Sharing.shareAsync(capturedUri, {
+                    mimeType: 'image/png',
+                    UTI: 'public.png',
+                });
+            } else {
+                await handleMoreShare();
+            }
+        } catch (error) {
+            console.error('Messages share error:', error);
+            await Share.share({
+                message: `${question.text}\n\nDiscover more on sauci.app`,
+            });
+        }
+    };
+
+    const handleMoreShare = async () => {
+        if (!capturedUri) {
+            await Share.share({
+                message: `${question.text}\n\nDiscover more on sauci.app`,
+            });
+            return;
+        }
+
+        try {
+            const isAvailable = await Sharing.isAvailableAsync();
+            if (isAvailable) {
+                await Sharing.shareAsync(capturedUri, {
+                    mimeType: 'image/png',
+                    dialogTitle: 'Share this question',
+                });
+            } else {
+                await Share.share({
+                    message: `${question.text}\n\nDiscover more on sauci.app`,
+                });
+            }
+        } catch (error) {
+            console.error('Share error:', error);
+        }
+    };
+
+    const useBlur = Platform.OS === 'ios';
+
+    return (
+        <Modal
+            visible={visible}
+            transparent
+            animationType="none"
+            statusBarTranslucent
+            onRequestClose={onClose}
+        >
+            <View style={styles.overlay}>
+                {/* Backdrop */}
+                <Animated.View
+                    entering={FadeIn.duration(200)}
+                    exiting={FadeOut.duration(200)}
+                    style={StyleSheet.absoluteFill}
+                >
+                    {useBlur ? (
+                        <BlurView
+                            intensity={blur.heavy}
+                            tint="dark"
+                            style={StyleSheet.absoluteFill}
+                        />
+                    ) : (
+                        <View style={styles.backdropFallback} />
+                    )}
+                </Animated.View>
+
+                {/* Content */}
+                <Animated.View
+                    entering={SlideInDown.springify().damping(20)}
+                    exiting={SlideOutDown.duration(200)}
+                    style={[styles.content, { paddingTop: insets.top }]}
+                >
+                    {/* Header */}
+                    <View style={styles.header}>
+                        <TouchableOpacity
+                            style={styles.closeButton}
+                            onPress={onClose}
+                            hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
+                        >
+                            <Ionicons name="close" size={28} color={colors.text} />
+                        </TouchableOpacity>
+                        <Text style={styles.title}>Share</Text>
+                        <View style={styles.headerSpacer} />
+                    </View>
+
+                    {/* Card Preview */}
+                    <View style={styles.previewContainer}>
+                        <ViewShot
+                            ref={shareViewRef}
+                            options={{
+                                format: 'png',
+                                quality: 1,
+                                result: 'tmpfile',
+                            }}
+                        >
+                            <ShareableCard
+                                question={question}
+                                packName={packName}
+                                cardWidth={cardWidth}
+                                cardColor={cardColor}
+                            />
+                        </ViewShot>
+                    </View>
+
+                    {/* Share Actions */}
+                    <View style={[styles.actionsContainer, { paddingBottom: insets.bottom + spacing.lg }]}>
+                        <ShareActionButton
+                            icon="logo-instagram"
+                            label="Instagram"
+                            colors={['#833AB4', '#FD1D1D', '#F77737']}
+                            onPress={handleInstagramShare}
+                            disabled={isCapturing}
+                        />
+                        <ShareActionButton
+                            icon="chatbubble-ellipses"
+                            label="Messages"
+                            colors={['#34C759', '#30D158']}
+                            onPress={handleMessagesShare}
+                            disabled={isCapturing}
+                        />
+                        <ShareActionButton
+                            icon="share-outline"
+                            label="More"
+                            colors={[colors.glass.backgroundLight, colors.glass.backgroundLight]}
+                            onPress={handleMoreShare}
+                            disabled={isCapturing}
+                            isOutline
+                        />
+                    </View>
+                </Animated.View>
+            </View>
+        </Modal>
+    );
+}
+
+function ShareActionButton({
+    icon,
+    label,
+    colors: buttonColors,
+    onPress,
+    disabled,
+    isOutline,
+}: {
+    icon: string;
+    label: string;
+    colors: string[];
+    onPress: () => void;
+    disabled?: boolean;
+    isOutline?: boolean;
+}) {
+    return (
+        <TouchableOpacity
+            style={styles.actionButton}
+            onPress={onPress}
+            disabled={disabled}
+            activeOpacity={0.7}
+        >
+            <View style={[
+                styles.actionIconContainer,
+                isOutline && styles.actionIconOutline,
+            ]}>
+                {!isOutline && (
+                    <LinearGradient
+                        colors={buttonColors as [string, string, ...string[]]}
+                        style={StyleSheet.absoluteFill}
+                        start={{ x: 0, y: 0 }}
+                        end={{ x: 1, y: 1 }}
+                    />
+                )}
+                <Ionicons
+                    name={icon as any}
+                    size={28}
+                    color={colors.text}
+                />
+            </View>
+            <Text style={styles.actionLabel}>{label}</Text>
+        </TouchableOpacity>
+    );
+}
+
+function ShareableCard({
+    question,
+    packName,
+    cardWidth,
+    cardColor,
+}: {
+    question: {
+        text: string;
+        partner_text?: string | null;
+        is_two_part?: boolean;
+    };
+    packName?: string;
+    cardWidth: number;
+    cardColor?: string;
+}) {
+    // Use the card color if provided, otherwise fall back to primary gradient
+    const useGradient = !cardColor;
+
+    return (
+        <View style={[styles.shareableCard, { width: cardWidth }]}>
+            {/* Background - solid color matching what the user saw, or gradient fallback */}
+            {useGradient ? (
+                <LinearGradient
+                    colors={gradients.primary as [string, string]}
+                    style={[StyleSheet.absoluteFill, { borderRadius: radius.xl }]}
+                    start={{ x: 0, y: 0 }}
+                    end={{ x: 1, y: 1 }}
+                />
+            ) : (
+                <View
+                    style={[
+                        StyleSheet.absoluteFill,
+                        { backgroundColor: cardColor, borderRadius: radius.xl }
+                    ]}
+                />
+            )}
+
+            {/* Subtle overlay for depth */}
+            <View style={styles.cardOverlay} />
+
+            {/* Pack name badge */}
+            {packName && (
+                <View style={styles.packBadge}>
+                    <Text style={styles.packBadgeText}>{packName}</Text>
+                </View>
+            )}
+
+            {/* Content */}
+            <View style={styles.shareableContent}>
+                <Text style={[styles.questionText, question.is_two_part && styles.questionTextSmaller]}>
+                    {question.text}
+                </Text>
+
+                {/* Partner's version of the question */}
+                {question.partner_text && (
+                    <View style={styles.partnerSection}>
+                        <View style={styles.partnerDivider}>
+                            <View style={styles.partnerDividerLine} />
+                            <Text style={styles.partnerLabel}>Partner sees</Text>
+                            <View style={styles.partnerDividerLine} />
+                        </View>
+                        <Text style={styles.partnerText}>{question.partner_text}</Text>
+                    </View>
+                )}
+            </View>
+
+            {/* Branding with logo */}
+            <View style={styles.branding}>
+                <Image source={logo} style={styles.brandingLogo} />
+                <Text style={styles.brandingText}>sauci.app</Text>
+            </View>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    overlay: {
+        flex: 1,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    },
+    backdropFallback: {
+        flex: 1,
+        backgroundColor: 'rgba(13, 13, 26, 0.95)',
+    },
+    content: {
+        flex: 1,
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: spacing.lg,
+        paddingVertical: spacing.md,
+    },
+    closeButton: {
+        width: 44,
+        height: 44,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    title: {
+        ...typography.headline,
+        color: colors.text,
+        fontWeight: '600',
+    },
+    headerSpacer: {
+        width: 44,
+    },
+    previewContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingHorizontal: spacing.lg,
+    },
+    actionsContainer: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        gap: spacing.xl,
+        paddingTop: spacing.xl,
+        paddingHorizontal: spacing.lg,
+    },
+    actionButton: {
+        alignItems: 'center',
+        gap: spacing.sm,
+    },
+    actionIconContainer: {
+        width: 64,
+        height: 64,
+        borderRadius: 32,
+        justifyContent: 'center',
+        alignItems: 'center',
+        overflow: 'hidden',
+    },
+    actionIconOutline: {
+        backgroundColor: colors.glass.backgroundLight,
+        borderWidth: 1,
+        borderColor: colors.glass.border,
+    },
+    actionLabel: {
+        ...typography.caption1,
+        color: colors.text,
+        fontWeight: '500',
+    },
+    // Shareable card styles
+    shareableCard: {
+        aspectRatio: 0.7,
+        borderRadius: radius.xl,
+        overflow: 'hidden',
+        padding: spacing.lg,
+    },
+    cardOverlay: {
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: 'rgba(0, 0, 0, 0.1)',
+    },
+    packBadge: {
+        alignSelf: 'flex-start',
+        backgroundColor: 'rgba(255, 255, 255, 0.2)',
+        paddingHorizontal: spacing.md,
+        paddingVertical: spacing.xs,
+        borderRadius: radius.full,
+    },
+    packBadgeText: {
+        ...typography.caption1,
+        color: colors.text,
+        fontWeight: '600',
+    },
+    shareableContent: {
+        flex: 1,
+        justifyContent: 'center',
+        paddingVertical: spacing.xl,
+    },
+    questionText: {
+        ...typography.title1,
+        color: colors.text,
+        fontWeight: '700',
+        lineHeight: 36,
+    },
+    questionTextSmaller: {
+        ...typography.title2,
+        lineHeight: 30,
+    },
+    partnerSection: {
+        marginTop: spacing.lg,
+    },
+    partnerDivider: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: spacing.sm,
+        gap: spacing.sm,
+    },
+    partnerDividerLine: {
+        flex: 1,
+        height: 1,
+        backgroundColor: 'rgba(255, 255, 255, 0.3)',
+    },
+    partnerLabel: {
+        ...typography.caption1,
+        color: 'rgba(255, 255, 255, 0.7)',
+        fontWeight: '500',
+    },
+    partnerText: {
+        ...typography.subhead,
+        color: 'rgba(255, 255, 255, 0.8)',
+        fontStyle: 'italic',
+    },
+    branding: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: spacing.sm,
+    },
+    brandingLogo: {
+        width: 24,
+        height: 24,
+        resizeMode: 'contain',
+    },
+    brandingText: {
+        ...typography.subhead,
+        color: colors.text,
+        fontWeight: '600',
+    },
+});
diff --git a/apps/mobile/src/components/share/index.ts b/apps/mobile/src/components/share/index.ts
new file mode 100644
index 0000000..1b98015
--- /dev/null
+++ b/apps/mobile/src/components/share/index.ts
@@ -0,0 +1 @@
+export { SharePreviewModal } from './SharePreviewModal';
diff --git a/apps/mobile/src/components/swipe/SwipeCard.native.tsx b/apps/mobile/src/components/swipe/SwipeCard.native.tsx
deleted file mode 100755
index 87f9b51..0000000
--- a/apps/mobile/src/components/swipe/SwipeCard.native.tsx
+++ /dev/null
@@ -1,678 +0,0 @@
-import { useState, useEffect } from "react";
-import { View, Text, StyleSheet, Platform, useWindowDimensions, TouchableOpacity as RNTouchableOpacity } from "react-native";
-import { Gesture, GestureDetector, TouchableOpacity } from "react-native-gesture-handler";
-import { BlurView } from "expo-blur";
-import { LinearGradient } from "expo-linear-gradient";
-import Animated, {
-    useSharedValue,
-    useAnimatedStyle,
-    withSpring,
-    withRepeat,
-    withSequence,
-    runOnJS,
-    interpolate,
-    Extrapolate,
-    withTiming,
-    interpolateColor,
-    Easing,
-} from "react-native-reanimated";
-import { Ionicons } from "@expo/vector-icons";
-import { colors, gradients, radius, shadows, blur, typography, spacing, animations } from "../../theme";
-import { QuestionFeedbackModal } from "../feedback";
-
-// Haptics helper - not supported on web
-const triggerHaptic = async (style: 'light' | 'medium' | 'heavy' = 'medium') => {
-    if (Platform.OS === 'web') return;
-    const Haptics = await import('expo-haptics');
-    const feedbackStyle = style === 'light'
-        ? Haptics.ImpactFeedbackStyle.Light
-        : style === 'heavy'
-            ? Haptics.ImpactFeedbackStyle.Heavy
-            : Haptics.ImpactFeedbackStyle.Medium;
-    await Haptics.impactAsync(feedbackStyle);
-};
-
-const MAX_CARD_WIDTH = 400;
-const SWIPE_THRESHOLD = 100;
-
-interface Props {
-    question: { id: string; text: string; intensity: number; partner_text?: string | null; is_two_part?: boolean; partner_answered?: boolean };
-    onSwipe: (direction: "left" | "right" | "up" | "down") => void;
-}
-
-const AnimatedBlurView = Animated.createAnimatedComponent(BlurView);
-
-export default function SwipeCard({ question, onSwipe }: Props) {
-    const { width: screenWidth } = useWindowDimensions();
-    const cardWidth = Math.min(screenWidth - 48, MAX_CARD_WIDTH);
-    const [showFeedbackModal, setShowFeedbackModal] = useState(false);
-
-    const translateX = useSharedValue(0);
-    const translateY = useSharedValue(0);
-    const rotation = useSharedValue(0);
-    const scale = useSharedValue(1);
-    const shadowExpand = useSharedValue(0);
-    const idleBreathing = useSharedValue(0);
-    const isGesturing = useSharedValue(false);
-
-    const context = useSharedValue({ x: 0, y: 0 });
-
-    // Subtle idle breathing animation
-    useEffect(() => {
-        idleBreathing.value = withRepeat(
-            withSequence(
-                withTiming(1, { duration: 2000, easing: Easing.inOut(Easing.sin) }),
-                withTiming(0, { duration: 2000, easing: Easing.inOut(Easing.sin) })
-            ),
-            -1,
-            true
-        );
-    }, []);
-
-    const gesture = Gesture.Pan()
-        .activeOffsetX([-15, 15])
-        .activeOffsetY([-15, 15])
-        .onStart(() => {
-            context.value = { x: translateX.value, y: translateY.value };
-            scale.value = withTiming(1.02, { duration: animations.timing.fast });
-            shadowExpand.value = withTiming(1, { duration: animations.timing.fast });
-            isGesturing.value = true;
-        })
-        .onUpdate((event) => {
-            translateX.value = event.translationX + context.value.x;
-            translateY.value = event.translationY + context.value.y;
-            rotation.value = interpolate(
-                translateX.value,
-                [-cardWidth / 2, cardWidth / 2],
-                [-12, 12],
-                Extrapolate.CLAMP
-            );
-        })
-        .onEnd(() => {
-            scale.value = withTiming(1, { duration: animations.timing.fast });
-            shadowExpand.value = withTiming(0, { duration: animations.timing.fast });
-            isGesturing.value = false;
-
-            if (Math.abs(translateX.value) > SWIPE_THRESHOLD) {
-                const direction = translateX.value > 0 ? "right" : "left";
-                runOnJS(triggerHaptic)('medium');
-                translateX.value = withSpring(
-                    direction === "right" ? screenWidth * 1.5 : -screenWidth * 1.5,
-                    animations.springGentle
-                );
-                runOnJS(onSwipe)(direction);
-            } else if (translateY.value < -SWIPE_THRESHOLD) {
-                runOnJS(triggerHaptic)('medium');
-                translateY.value = withSpring(-screenWidth * 1.5, animations.springGentle);
-                runOnJS(onSwipe)("up");
-            } else if (translateY.value > SWIPE_THRESHOLD) {
-                runOnJS(triggerHaptic)('light');
-                translateY.value = withSpring(screenWidth * 1.5, animations.springGentle);
-                runOnJS(onSwipe)("down");
-            } else {
-                translateX.value = withSpring(0, animations.spring);
-                translateY.value = withSpring(0, animations.spring);
-                rotation.value = withSpring(0, animations.spring);
-            }
-        });
-
-    const animatedStyle = useAnimatedStyle(() => {
-        // Apply idle breathing only when card is at rest
-        const idleOffset = isGesturing.value ? 0 : interpolate(idleBreathing.value, [0, 1], [0, -6]);
-
-        return {
-            transform: [
-                { translateX: translateX.value },
-                { translateY: translateY.value + idleOffset },
-                { rotate: `${rotation.value}deg` },
-                { scale: scale.value },
-            ],
-        };
-    });
-
-    // Dynamic shadow for card lift effect
-    const cardShadowStyle = useAnimatedStyle(() => ({
-        shadowOpacity: interpolate(shadowExpand.value, [0, 1], [0.3, 0.5]),
-        shadowRadius: interpolate(shadowExpand.value, [0, 1], [24, 36]),
-        shadowOffset: {
-            width: 0,
-            height: interpolate(shadowExpand.value, [0, 1], [12, 18]),
-        },
-    }));
-
-    const overlayStyle = (direction: "left" | "right" | "up" | "down") =>
-        useAnimatedStyle(() => {
-            let opacity = 0;
-            let backgroundColor = 'transparent';
-
-            if (direction === "right") {
-                opacity = interpolate(translateX.value, [0, SWIPE_THRESHOLD], [0, 0.9]);
-                backgroundColor = interpolateColor(
-                    opacity,
-                    [0, 0.9],
-                    ['transparent', 'rgba(46, 204, 113, 0.4)']
-                ) as string;
-            } else if (direction === "left") {
-                opacity = interpolate(translateX.value, [0, -SWIPE_THRESHOLD], [0, 0.9]);
-                backgroundColor = interpolateColor(
-                    opacity,
-                    [0, 0.9],
-                    ['transparent', 'rgba(231, 76, 60, 0.4)']
-                ) as string;
-            } else if (direction === "up") {
-                opacity = interpolate(translateY.value, [0, -SWIPE_THRESHOLD], [0, 0.9]);
-                backgroundColor = interpolateColor(
-                    opacity,
-                    [0, 0.9],
-                    ['transparent', 'rgba(243, 156, 18, 0.4)']
-                ) as string;
-            } else {
-                opacity = interpolate(translateY.value, [0, SWIPE_THRESHOLD], [0, 0.9]);
-                backgroundColor = interpolateColor(
-                    opacity,
-                    [0, 0.9],
-                    ['transparent', 'rgba(108, 117, 125, 0.4)']
-                ) as string;
-            }
-
-            return {
-                opacity,
-                backgroundColor,
-            };
-        });
-
-    const handleButtonPress = async (direction: "left" | "right" | "up") => {
-        await triggerHaptic('light');
-        onSwipe(direction);
-    };
-
-    const useBlur = Platform.OS === 'ios';
-
-    const handleFeedbackPress = () => {
-        setShowFeedbackModal(true);
-    };
-
-    return (
-        <>
-            <View style={[styles.cardWrapper, { width: cardWidth }]}>
-                <GestureDetector gesture={gesture}>
-                    <Animated.View style={[styles.cardOuter, animatedStyle, cardShadowStyle, { shadowColor: '#000' }]}>
-                        {useBlur ? (
-                            <BlurView
-                                intensity={blur.medium}
-                                tint="dark"
-                                style={styles.blurContainer}
-                            >
-                                <CardContent
-                                    question={question}
-                                    overlayStyle={overlayStyle}
-                                    handleButtonPress={handleButtonPress}
-                                    onFeedbackPress={handleFeedbackPress}
-                                    translateX={translateX}
-                                    translateY={translateY}
-                                />
-                            </BlurView>
-                        ) : (
-                            <View style={styles.fallbackContainer}>
-                                <CardContent
-                                    question={question}
-                                    overlayStyle={overlayStyle}
-                                    handleButtonPress={handleButtonPress}
-                                    onFeedbackPress={handleFeedbackPress}
-                                    translateX={translateX}
-                                    translateY={translateY}
-                                />
-                            </View>
-                        )}
-                        {/* Inner border highlight for depth */}
-                        <View style={styles.innerBorder} pointerEvents="none" />
-                    </Animated.View>
-                </GestureDetector>
-            </View>
-
-            <QuestionFeedbackModal
-                visible={showFeedbackModal}
-                onClose={() => setShowFeedbackModal(false)}
-                questionId={question.id}
-                questionText={question.text}
-            />
-        </>
-    );
-}
-
-function CardContent({
-    question,
-    overlayStyle,
-    handleButtonPress,
-    onFeedbackPress,
-    translateX,
-    translateY,
-}: {
-    question: Props['question'];
-    overlayStyle: (direction: "left" | "right" | "up" | "down") => any;
-    handleButtonPress: (direction: "left" | "right" | "up") => void;
-    onFeedbackPress: () => void;
-    translateX: Animated.SharedValue<number>;
-    translateY: Animated.SharedValue<number>;
-}) {
-    const isHighIntensity = question.intensity >= 3;
-
-    // Badge scale animation based on swipe progress
-    const badgeScaleStyle = (direction: "left" | "right" | "up" | "down") =>
-        useAnimatedStyle(() => {
-            let progress = 0;
-            if (direction === "right") {
-                progress = interpolate(translateX.value, [0, SWIPE_THRESHOLD], [0, 1], Extrapolate.CLAMP);
-            } else if (direction === "left") {
-                progress = interpolate(translateX.value, [-SWIPE_THRESHOLD, 0], [1, 0], Extrapolate.CLAMP);
-            } else if (direction === "up") {
-                progress = interpolate(translateY.value, [-SWIPE_THRESHOLD, 0], [1, 0], Extrapolate.CLAMP);
-            } else {
-                progress = interpolate(translateY.value, [0, SWIPE_THRESHOLD], [0, 1], Extrapolate.CLAMP);
-            }
-            return {
-                transform: [{ scale: interpolate(progress, [0, 0.5, 1], [0.8, 1, 1.1]) }],
-            };
-        });
-
-    return (
-        <>
-            {/* Top highlight */}
-            <LinearGradient
-                colors={[colors.glass.highlight, 'transparent']}
-                style={styles.highlight}
-                start={{ x: 0.5, y: 0 }}
-                end={{ x: 0.5, y: 1 }}
-                pointerEvents="none"
-            />
-
-            {/* Left edge highlight */}
-            <LinearGradient
-                colors={['rgba(255,255,255,0.08)', 'transparent']}
-                style={styles.edgeHighlightLeft}
-                start={{ x: 0, y: 0.5 }}
-                end={{ x: 1, y: 0.5 }}
-                pointerEvents="none"
-            />
-
-            {/* Right edge highlight */}
-            <LinearGradient
-                colors={['transparent', 'rgba(255,255,255,0.08)']}
-                style={styles.edgeHighlightRight}
-                start={{ x: 0, y: 0.5 }}
-                end={{ x: 1, y: 0.5 }}
-                pointerEvents="none"
-            />
-
-            {/* Feedback Button */}
-            <RNTouchableOpacity 
-                style={styles.feedbackButton}
-                onPress={onFeedbackPress}
-                hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
-                activeOpacity={0.7}
-            >
-                <Ionicons
-                    name="flag-outline"
-                    size={22}
-                    color={colors.textTertiary}
-                />
-            </RNTouchableOpacity>
-
-            {/* Overlays with gradient badges */}
-            <Animated.View style={[styles.overlay, overlayStyle("right")]} pointerEvents="none">
-                <Animated.View style={[styles.overlayBadge, badgeScaleStyle("right")]}>
-                    <LinearGradient
-                        colors={gradients.success as [string, string]}
-                        style={StyleSheet.absoluteFill}
-                        start={{ x: 0, y: 0 }}
-                        end={{ x: 1, y: 1 }}
-                    />
-                    <Text style={styles.overlayText}>YES</Text>
-                </Animated.View>
-            </Animated.View>
-            <Animated.View style={[styles.overlay, overlayStyle("left")]} pointerEvents="none">
-                <Animated.View style={[styles.overlayBadge, badgeScaleStyle("left")]}>
-                    <LinearGradient
-                        colors={gradients.error as [string, string]}
-                        style={StyleSheet.absoluteFill}
-                        start={{ x: 0, y: 0 }}
-                        end={{ x: 1, y: 1 }}
-                    />
-                    <Text style={styles.overlayText}>NO</Text>
-                </Animated.View>
-            </Animated.View>
-            <Animated.View style={[styles.overlay, overlayStyle("up")]} pointerEvents="none">
-                <Animated.View style={[styles.overlayBadge, badgeScaleStyle("up")]}>
-                    <LinearGradient
-                        colors={gradients.warning as [string, string]}
-                        style={StyleSheet.absoluteFill}
-                        start={{ x: 0, y: 0 }}
-                        end={{ x: 1, y: 1 }}
-                    />
-                    <Text style={styles.overlayText}>MAYBE</Text>
-                </Animated.View>
-            </Animated.View>
-            <Animated.View style={[styles.overlay, overlayStyle("down")]} pointerEvents="none">
-                <Animated.View style={[styles.overlayBadge, badgeScaleStyle("down")]}>
-                    <View style={[StyleSheet.absoluteFill, { backgroundColor: colors.textTertiary }]} />
-                    <Text style={styles.overlayText}>SKIP</Text>
-                </Animated.View>
-            </Animated.View>
-
-            {/* Content */}
-            <View style={styles.content}>
-                <View style={[
-                    styles.intensityContainer,
-                    isHighIntensity && styles.intensityContainerHigh
-                ]}>
-                    {[...Array(question.intensity)].map((_, i) => (
-                        <Ionicons key={i} name="flame" size={16} color={colors.primary} />
-                    ))}
-                </View>
-                <Text style={[styles.text, question.is_two_part && styles.twoPartText]}>
-                    {question.text}
-                </Text>
-
-                {/* Partner's version of the question - only show when user is answering first */}
-                {question.partner_text && !question.partner_answered && (
-                    <View style={styles.partnerTextContainer}>
-                        <View style={styles.partnerDivider}>
-                            <View style={styles.partnerDividerLine} />
-                            <View style={styles.partnerLabelContainer}>
-                                <Ionicons name="swap-horizontal" size={12} color={colors.secondary} />
-                                <Text style={styles.partnerLabel}>Partner sees</Text>
-                            </View>
-                            <View style={styles.partnerDividerLine} />
-                        </View>
-                        <Text style={styles.partnerText}>{question.partner_text}</Text>
-                    </View>
-                )}
-            </View>
-
-            {/* Action Buttons */}
-            <View style={styles.footer}>
-                <View style={styles.buttonContainer}>
-                    <ActionButton
-                        onPress={() => handleButtonPress("left")}
-                        colors={gradients.error as [string, string]}
-                        icon="close"
-                    />
-                    <ActionButton
-                        onPress={() => handleButtonPress("up")}
-                        colors={gradients.warning as [string, string]}
-                        icon="help"
-                        small
-                    />
-                    <ActionButton
-                        onPress={() => handleButtonPress("right")}
-                        colors={gradients.success as [string, string]}
-                        icon="heart"
-                    />
-                </View>
-            </View>
-        </>
-    );
-}
-
-function ActionButton({
-    onPress,
-    colors: buttonColors,
-    icon,
-    small = false,
-}: {
-    onPress: () => void;
-    colors: [string, string];
-    icon: string;
-    small?: boolean;
-}) {
-    const buttonScale = useSharedValue(1);
-    const buttonGlow = useSharedValue(0);
-
-    const handlePressIn = () => {
-        buttonScale.value = withSpring(0.92, animations.spring);
-        buttonGlow.value = withTiming(1, { duration: 150 });
-    };
-
-    const handlePressOut = () => {
-        buttonScale.value = withSpring(1, animations.spring);
-        buttonGlow.value = withTiming(0, { duration: 200 });
-    };
-
-    const buttonAnimatedStyle = useAnimatedStyle(() => ({
-        transform: [{ scale: buttonScale.value }],
-        shadowOpacity: interpolate(buttonGlow.value, [0, 1], [0.3, 0.6]),
-        shadowRadius: interpolate(buttonGlow.value, [0, 1], [8, 16]),
-    }));
-
-    return (
-        <TouchableOpacity
-            onPress={onPress}
-            onPressIn={handlePressIn}
-            onPressOut={handlePressOut}
-            activeOpacity={1}
-        >
-            <Animated.View style={[
-                styles.actionButton,
-                small && styles.actionButtonSmall,
-                buttonAnimatedStyle,
-                { shadowColor: buttonColors[0] }
-            ]}>
-                <LinearGradient
-                    colors={buttonColors}
-                    style={StyleSheet.absoluteFill}
-                    start={{ x: 0, y: 0 }}
-                    end={{ x: 1, y: 1 }}
-                />
-                <LinearGradient
-                    colors={['rgba(255,255,255,0.25)', 'rgba(255,255,255,0.05)']}
-                    style={styles.buttonHighlight}
-                    start={{ x: 0.5, y: 0 }}
-                    end={{ x: 0.5, y: 1 }}
-                />
-                <Ionicons
-                    name={icon as any}
-                    size={small ? 20 : 28}
-                    color={colors.text}
-                    style={styles.buttonIcon}
-                />
-            </Animated.View>
-        </TouchableOpacity>
-    );
-}
-
-const styles = StyleSheet.create({
-    cardWrapper: {
-        position: "absolute",
-        maxWidth: MAX_CARD_WIDTH,
-        height: 480,
-    },
-    cardOuter: {
-        width: "100%",
-        height: "100%",
-        borderRadius: radius.xxl,
-        overflow: "hidden",
-    },
-    blurContainer: {
-        flex: 1,
-        backgroundColor: colors.glass.background,
-        borderWidth: 1,
-        borderColor: colors.glass.border,
-        borderRadius: radius.xxl,
-        overflow: "hidden",
-    },
-    fallbackContainer: {
-        flex: 1,
-        backgroundColor: colors.glass.backgroundLight,
-        borderWidth: 1,
-        borderColor: colors.glass.border,
-        borderRadius: radius.xxl,
-        overflow: "hidden",
-    },
-    highlight: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        height: 80,
-    },
-    edgeHighlightLeft: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        bottom: 0,
-        width: 60,
-    },
-    edgeHighlightRight: {
-        position: 'absolute',
-        top: 0,
-        right: 0,
-        bottom: 0,
-        width: 60,
-    },
-    innerBorder: {
-        position: 'absolute',
-        top: 2,
-        left: 2,
-        right: 2,
-        bottom: 2,
-        borderRadius: radius.xxl - 2,
-        borderWidth: 1,
-        borderColor: 'rgba(255, 255, 255, 0.06)',
-    },
-    feedbackButton: {
-        position: 'absolute',
-        top: spacing.md,
-        right: spacing.md,
-        width: 44,
-        height: 44,
-        borderRadius: 22,
-        backgroundColor: colors.glass.background,
-        justifyContent: 'center',
-        alignItems: 'center',
-        zIndex: 999,
-        elevation: 999,
-        borderWidth: 1,
-        borderColor: colors.glass.border,
-    },
-    content: {
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
-        padding: spacing.xl,
-    },
-    intensityContainer: {
-        flexDirection: "row",
-        marginBottom: spacing.lg,
-        backgroundColor: colors.primaryLight,
-        paddingHorizontal: spacing.md,
-        paddingVertical: spacing.sm,
-        borderRadius: radius.full,
-        gap: 2,
-    },
-    intensityContainerHigh: {
-        borderWidth: 1,
-        borderColor: colors.primary,
-        ...shadows.glow(colors.primaryGlow),
-    },
-    text: {
-        ...typography.title2,
-        color: colors.text,
-        textAlign: "center",
-        lineHeight: 32,
-    },
-    twoPartText: {
-        ...typography.title3,
-        lineHeight: 28,
-    },
-    partnerTextContainer: {
-        marginTop: spacing.lg,
-        width: '100%',
-        paddingHorizontal: spacing.sm,
-    },
-    partnerDivider: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        marginBottom: spacing.sm,
-    },
-    partnerDividerLine: {
-        flex: 1,
-        height: 1,
-        backgroundColor: colors.glass.border,
-    },
-    partnerLabelContainer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingHorizontal: spacing.md,
-        paddingVertical: spacing.xs,
-        backgroundColor: colors.secondaryLight,
-        borderRadius: radius.full,
-        gap: spacing.xs,
-    },
-    partnerLabel: {
-        ...typography.caption1,
-        color: colors.secondary,
-        fontWeight: '500',
-        letterSpacing: 0.3,
-    },
-    partnerText: {
-        ...typography.subhead,
-        color: colors.textSecondary,
-        textAlign: 'center',
-        fontStyle: 'italic',
-    },
-    footer: {
-        paddingBottom: spacing.lg,
-        paddingHorizontal: spacing.lg,
-    },
-    overlay: {
-        ...StyleSheet.absoluteFillObject,
-        justifyContent: "center",
-        alignItems: "center",
-        zIndex: 10,
-        borderRadius: radius.xxl,
-    },
-    overlayBadge: {
-        paddingHorizontal: spacing.lg,
-        paddingVertical: spacing.sm,
-        borderRadius: radius.md,
-        transform: [{ rotate: "-15deg" }],
-        overflow: 'hidden',
-    },
-    overlayText: {
-        fontSize: 36,
-        fontWeight: "900",
-        color: colors.text,
-        letterSpacing: 2,
-    },
-    buttonContainer: {
-        flexDirection: "row",
-        justifyContent: "center",
-        alignItems: "center",
-        gap: spacing.md,
-    },
-    actionButton: {
-        width: 64,
-        height: 64,
-        borderRadius: 32,
-        justifyContent: "center",
-        alignItems: "center",
-        overflow: "hidden",
-    },
-    actionButtonSmall: {
-        width: 52,
-        height: 52,
-        borderRadius: 26,
-    },
-    buttonHighlight: {
-        position: "absolute",
-        top: 0,
-        left: 0,
-        right: 0,
-        height: "50%",
-        borderTopLeftRadius: 32,
-        borderTopRightRadius: 32,
-    },
-    buttonIcon: {
-        zIndex: 1,
-    },
-});
diff --git a/apps/mobile/src/components/swipe/SwipeCard.tsx b/apps/mobile/src/components/swipe/SwipeCard.tsx
deleted file mode 100644
index 4f0ce0b..0000000
--- a/apps/mobile/src/components/swipe/SwipeCard.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * SwipeCard component with platform-specific implementations.
- * 
- * - On native (iOS/Android): Uses react-native-gesture-handler with Reanimated
- *   for smooth, native-level gesture performance (SwipeCard.native.tsx)
- * 
- * - On web: Uses React Native's built-in PanResponder which is compatible with
- *   react-native-web (SwipeCard.web.tsx)
- * 
- * Metro bundler automatically picks the right file based on the platform:
- * - .native.tsx for iOS/Android
- * - .web.tsx for web
- * 
- * This file is a fallback that re-exports the web version for any other platform
- * that might not have a specific implementation.
- */
-export { default } from "./SwipeCard.web";
diff --git a/apps/mobile/src/components/swipe/SwipeCard.web.tsx b/apps/mobile/src/components/swipe/SwipeCard.web.tsx
deleted file mode 100644
index 78d6c2d..0000000
--- a/apps/mobile/src/components/swipe/SwipeCard.web.tsx
+++ /dev/null
@@ -1,478 +0,0 @@
-import { useState, useRef } from "react";
-import { View, Text, StyleSheet, Animated, PanResponder, TouchableOpacity, useWindowDimensions } from "react-native";
-import { Ionicons } from "@expo/vector-icons";
-import { QuestionFeedbackModal } from "../feedback";
-
-const MAX_CARD_WIDTH = 400;
-const SWIPE_THRESHOLD = 100;
-
-interface Props {
-    question: { id: string; text: string; intensity: number; partner_text?: string | null; partner_answered?: boolean };
-    onSwipe: (direction: "left" | "right" | "up" | "down") => void;
-}
-
-/**
- * Web-compatible SwipeCard using React Native's built-in PanResponder
- * instead of react-native-gesture-handler which doesn't work on web.
- */
-export default function SwipeCard({ question, onSwipe }: Props) {
-    const { width: screenWidth } = useWindowDimensions();
-    const cardWidth = Math.min(screenWidth - 48, MAX_CARD_WIDTH);
-
-    const [dismissed, setDismissed] = useState(false);
-    const [hoveredButton, setHoveredButton] = useState<string | null>(null);
-    const [showFeedbackModal, setShowFeedbackModal] = useState(false);
-
-    const translateX = useRef(new Animated.Value(0)).current;
-    const translateY = useRef(new Animated.Value(0)).current;
-    const scale = useRef(new Animated.Value(1)).current;
-
-    const rotation = translateX.interpolate({
-        inputRange: [-cardWidth / 2, cardWidth / 2],
-        outputRange: ["-15deg", "15deg"],
-        extrapolate: "clamp",
-    });
-
-    const rightOverlayOpacity = translateX.interpolate({
-        inputRange: [0, SWIPE_THRESHOLD],
-        outputRange: [0, 1],
-        extrapolate: "clamp",
-    });
-
-    const leftOverlayOpacity = translateX.interpolate({
-        inputRange: [-SWIPE_THRESHOLD, 0],
-        outputRange: [1, 0],
-        extrapolate: "clamp",
-    });
-
-    const upOverlayOpacity = translateY.interpolate({
-        inputRange: [-SWIPE_THRESHOLD, 0],
-        outputRange: [1, 0],
-        extrapolate: "clamp",
-    });
-
-    const downOverlayOpacity = translateY.interpolate({
-        inputRange: [0, SWIPE_THRESHOLD],
-        outputRange: [0, 1],
-        extrapolate: "clamp",
-    });
-
-    const panResponder = useRef(
-        PanResponder.create({
-            onStartShouldSetPanResponder: (_, gestureState) => {
-                // Don't activate if touch is in footer area (bottom 100px)
-                const CARD_HEIGHT = 500;
-                const FOOTER_START_Y = CARD_HEIGHT - 100;
-                return gestureState.y0 < FOOTER_START_Y;
-            },
-            onMoveShouldSetPanResponder: (_, gestureState) => {
-                // Don't activate if touch is in footer area
-                const CARD_HEIGHT = 500;
-                const FOOTER_START_Y = CARD_HEIGHT - 100;
-                return gestureState.y0 < FOOTER_START_Y && (Math.abs(gestureState.dx) > 5 || Math.abs(gestureState.dy) > 5);
-            },
-            onPanResponderGrant: () => {
-                Animated.timing(scale, {
-                    toValue: 1.05,
-                    duration: 100,
-                    useNativeDriver: true,
-                }).start();
-            },
-            onPanResponderMove: (_, gestureState) => {
-                translateX.setValue(gestureState.dx);
-                translateY.setValue(gestureState.dy);
-            },
-            onPanResponderRelease: (_, gestureState) => {
-                Animated.timing(scale, {
-                    toValue: 1,
-                    duration: 100,
-                    useNativeDriver: true,
-                }).start();
-
-                if (Math.abs(gestureState.dx) > SWIPE_THRESHOLD) {
-                    // Horizontal swipe
-                    const direction = gestureState.dx > 0 ? "right" : "left";
-                    const targetX = direction === "right" ? screenWidth * 1.5 : -screenWidth * 1.5;
-
-                    Animated.spring(translateX, {
-                        toValue: targetX,
-                        useNativeDriver: true,
-                    }).start(() => {
-                        setDismissed(true);
-                        onSwipe(direction);
-                    });
-                } else if (gestureState.dy < -SWIPE_THRESHOLD) {
-                    // Vertical swipe up
-                    Animated.spring(translateY, {
-                        toValue: -screenWidth * 1.5,
-                        useNativeDriver: true,
-                    }).start(() => {
-                        setDismissed(true);
-                        onSwipe("up");
-                    });
-                } else if (gestureState.dy > SWIPE_THRESHOLD) {
-                    // Vertical swipe down - skip
-                    Animated.spring(translateY, {
-                        toValue: screenWidth * 1.5,
-                        useNativeDriver: true,
-                    }).start(() => {
-                        setDismissed(true);
-                        onSwipe("down");
-                    });
-                } else {
-                    // Reset position
-                    Animated.parallel([
-                        Animated.spring(translateX, {
-                            toValue: 0,
-                            useNativeDriver: true,
-                        }),
-                        Animated.spring(translateY, {
-                            toValue: 0,
-                            useNativeDriver: true,
-                        }),
-                    ]).start();
-                }
-            },
-        })
-    ).current;
-
-    if (dismissed) {
-        return null;
-    }
-
-    return (
-        <>
-            <Animated.View
-                style={[
-                    styles.card,
-                    webStyles.card as any,
-                    {
-                        width: cardWidth,
-                        transform: [
-                            { translateX },
-                            { translateY },
-                            { rotate: rotation },
-                            { scale },
-                        ],
-                    },
-                ]}
-                {...panResponder.panHandlers}
-            >
-                {/* Feedback Button */}
-                <TouchableOpacity
-                    style={styles.feedbackButton}
-                    onPress={() => setShowFeedbackModal(true)}
-                    activeOpacity={0.7}
-                >
-                    <Ionicons name="flag-outline" size={18} color="#888" />
-                </TouchableOpacity>
-
-                {/* Overlays */}
-                <Animated.View
-                    style={[
-                        styles.overlay,
-                        { opacity: rightOverlayOpacity, backgroundColor: "rgba(76, 175, 80, 0.4)" },
-                    ]}
-                >
-                    <Text style={styles.overlayText}>YES</Text>
-                </Animated.View>
-                <Animated.View
-                    style={[
-                        styles.overlay,
-                        { opacity: leftOverlayOpacity, backgroundColor: "rgba(244, 67, 54, 0.4)" },
-                    ]}
-                >
-                    <Text style={styles.overlayText}>NO</Text>
-                </Animated.View>
-                <Animated.View
-                    style={[
-                        styles.overlay,
-                        { opacity: upOverlayOpacity, backgroundColor: "rgba(255, 152, 0, 0.4)" },
-                    ]}
-                >
-                    <Text style={styles.overlayText}>MAYBE</Text>
-                </Animated.View>
-                <Animated.View
-                    style={[
-                        styles.overlay,
-                        { opacity: downOverlayOpacity, backgroundColor: "rgba(108, 117, 125, 0.4)" },
-                    ]}
-                >
-                    <Text style={styles.overlayText}>SKIP</Text>
-                </Animated.View>
-
-                <View style={styles.content}>
-                    <View style={styles.intensityContainer}>
-                        {[...Array(question.intensity)].map((_, i) => (
-                            <Ionicons key={i} name="flame" size={16} color="#e94560" />
-                        ))}
-                    </View>
-                    <Text style={[styles.text, question.partner_text ? styles.twoPartText : null]}>{question.text}</Text>
-
-                    {/* Partner's version of the question - only show when user is answering first */}
-                    {question.partner_text && !question.partner_answered && (
-                        <View style={styles.partnerTextContainer}>
-                            <View style={styles.partnerDivider}>
-                                <View style={styles.partnerDividerLine} />
-                                <View style={styles.partnerLabelContainer}>
-                                    <Ionicons name="swap-horizontal" size={12} color="#9b59b6" />
-                                    <Text style={styles.partnerLabel}>Partner sees</Text>
-                                </View>
-                                <View style={styles.partnerDividerLine} />
-                            </View>
-                            <Text style={styles.partnerText}>{question.partner_text}</Text>
-                        </View>
-                    )}
-                </View>
-
-                <View style={styles.footer}>
-                    <View style={styles.buttonContainer}>
-                        <TouchableOpacity
-                            style={[
-                                styles.actionButton,
-                                styles.noButton,
-                                hoveredButton === "no" && styles.buttonHovered,
-                            ]}
-                            onPress={() => onSwipe("left")}
-                            // @ts-expect-error - web-only props
-                            onMouseEnter={() => setHoveredButton("no")}
-                            onMouseLeave={() => setHoveredButton(null)}
-                            activeOpacity={0.7}
-                        >
-                            <View style={styles.buttonInnerGlow} />
-                            <Ionicons name="thumbs-down" size={24} color="#fff" style={styles.buttonIcon} />
-                        </TouchableOpacity>
-
-                        <TouchableOpacity
-                            style={[
-                                styles.actionButton,
-                                styles.maybeButton,
-                                hoveredButton === "maybe" && styles.buttonHovered,
-                            ]}
-                            onPress={() => onSwipe("up")}
-                            // @ts-expect-error - web-only props
-                            onMouseEnter={() => setHoveredButton("maybe")}
-                            onMouseLeave={() => setHoveredButton(null)}
-                            activeOpacity={0.7}
-                        >
-                            <View style={styles.buttonInnerGlow} />
-                            <Ionicons name="help-circle" size={24} color="#fff" style={styles.buttonIcon} />
-                        </TouchableOpacity>
-
-                        <TouchableOpacity
-                            style={[
-                                styles.actionButton,
-                                styles.yesButton,
-                                hoveredButton === "yes" && styles.buttonHovered,
-                            ]}
-                            onPress={() => onSwipe("right")}
-                            // @ts-expect-error - web-only props
-                            onMouseEnter={() => setHoveredButton("yes")}
-                            onMouseLeave={() => setHoveredButton(null)}
-                            activeOpacity={0.7}
-                        >
-                            <View style={styles.buttonInnerGlow} />
-                            <Ionicons name="thumbs-up" size={24} color="#fff" style={styles.buttonIcon} />
-                        </TouchableOpacity>
-                    </View>
-                </View>
-            </Animated.View>
-
-            <QuestionFeedbackModal
-                visible={showFeedbackModal}
-                onClose={() => setShowFeedbackModal(false)}
-                questionId={question.id}
-                questionText={question.text}
-            />
-        </>
-    );
-}
-
-// Separate web-only styles that TypeScript doesn't recognize
-const webStyles = {
-    card: { cursor: "grab" as const },
-    actionButton: { transition: "transform 0.2s ease, box-shadow 0.2s ease" },
-};
-
-const styles = StyleSheet.create({
-    card: {
-        position: "absolute",
-        height: 500,
-        maxWidth: MAX_CARD_WIDTH,
-        backgroundColor: "#16213e",
-        borderRadius: 24,
-        borderWidth: 1,
-        borderColor: "#0f3460",
-        shadowColor: "#000",
-        shadowOffset: {
-            width: 0,
-            height: 4,
-        },
-        shadowOpacity: 0.3,
-        shadowRadius: 4.65,
-        elevation: 8,
-        overflow: "hidden",
-    },
-    feedbackButton: {
-        position: 'absolute',
-        top: 12,
-        right: 12,
-        width: 32,
-        height: 32,
-        borderRadius: 16,
-        backgroundColor: 'rgba(255, 255, 255, 0.1)',
-        justifyContent: 'center',
-        alignItems: 'center',
-        zIndex: 5,
-        borderWidth: 1,
-        borderColor: 'rgba(255, 255, 255, 0.2)',
-    },
-    content: {
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
-        padding: 32,
-    },
-    intensityContainer: {
-        flexDirection: "row",
-        marginBottom: 24,
-        backgroundColor: "rgba(233, 69, 96, 0.1)",
-        paddingHorizontal: 12,
-        paddingVertical: 6,
-        borderRadius: 12,
-    },
-    text: {
-        fontSize: 24,
-        fontWeight: "bold",
-        color: "#fff",
-        textAlign: "center",
-        lineHeight: 32,
-    },
-    twoPartText: {
-        fontSize: 20,
-        lineHeight: 28,
-    },
-    footer: {
-        paddingTop: 8,
-        paddingBottom: 16,
-        paddingHorizontal: 8,
-        alignItems: "center",
-        backgroundColor: "rgba(0,0,0,0.2)",
-    },
-    hint: {
-        color: "#666",
-        fontSize: 12,
-        marginBottom: 4,
-    },
-    overlay: {
-        ...StyleSheet.absoluteFillObject,
-        justifyContent: "center",
-        alignItems: "center",
-        zIndex: 10,
-    },
-    overlayText: {
-        fontSize: 48,
-        fontWeight: "900",
-        color: "#fff",
-        textShadowColor: "rgba(0,0,0,0.5)",
-        textShadowOffset: { width: 0, height: 2 },
-        textShadowRadius: 4,
-        transform: [{ rotate: "-15deg" }],
-        borderWidth: 4,
-        borderColor: "#fff",
-        paddingHorizontal: 16,
-        paddingVertical: 8,
-        borderRadius: 12,
-    },
-    partnerTextContainer: {
-        marginTop: 24,
-        width: "100%",
-        paddingHorizontal: 8,
-    },
-    partnerDivider: {
-        flexDirection: "row",
-        alignItems: "center",
-        marginBottom: 8,
-    },
-    partnerDividerLine: {
-        flex: 1,
-        height: 1,
-        backgroundColor: "rgba(255, 255, 255, 0.08)",
-    },
-    partnerLabelContainer: {
-        flexDirection: "row",
-        alignItems: "center",
-        paddingHorizontal: 16,
-        paddingVertical: 4,
-        backgroundColor: "rgba(155, 89, 182, 0.15)",
-        borderRadius: 9999,
-        gap: 4,
-    },
-    partnerLabel: {
-        fontSize: 12,
-        color: "#9b59b6",
-        fontWeight: "500",
-        letterSpacing: 0.3,
-    },
-    partnerText: {
-        fontSize: 14,
-        color: "rgba(255, 255, 255, 0.7)",
-        textAlign: "center",
-        fontStyle: "italic",
-    },
-    buttonContainer: {
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-        paddingHorizontal: 32,
-        paddingVertical: 16,
-        gap: 20,
-    },
-    actionButton: {
-        alignItems: "center",
-        justifyContent: "center",
-        width: 64,
-        height: 64,
-        borderRadius: 32,
-        shadowColor: "#000",
-        shadowOffset: { width: 0, height: 4 },
-        shadowOpacity: 0.4,
-        shadowRadius: 8,
-        elevation: 8,
-        borderWidth: 2,
-        overflow: "hidden",
-    },
-    noButton: {
-        backgroundColor: "#E74C3C",
-        borderColor: "rgba(255, 255, 255, 0.3)",
-    },
-    maybeButton: {
-        backgroundColor: "#F39C12",
-        borderColor: "rgba(255, 255, 255, 0.3)",
-    },
-    yesButton: {
-        backgroundColor: "#2ECC71",
-        borderColor: "rgba(255, 255, 255, 0.3)",
-    },
-    buttonInnerGlow: {
-        position: "absolute",
-        top: 0,
-        left: 0,
-        right: 0,
-        height: "50%",
-        backgroundColor: "rgba(255, 255, 255, 0.15)",
-        borderTopLeftRadius: 32,
-        borderTopRightRadius: 32,
-    },
-    buttonIcon: {
-        zIndex: 1,
-        textShadowColor: "rgba(0, 0, 0, 0.3)",
-        textShadowOffset: { width: 0, height: 1 },
-        textShadowRadius: 2,
-    },
-    buttonHovered: {
-        transform: [{ scale: 1.1 }],
-        shadowOpacity: 0.6,
-        shadowRadius: 12,
-    },
-});
diff --git a/apps/mobile/src/components/swipe/SwipeCardPremium.tsx b/apps/mobile/src/components/swipe/SwipeCardPremium.tsx
deleted file mode 100644
index a7938b7..0000000
--- a/apps/mobile/src/components/swipe/SwipeCardPremium.tsx
+++ /dev/null
@@ -1,587 +0,0 @@
-/**
- * SwipeCardPremium - PoC of premium/boutique styling for the swipe experience
- *
- * Inspired by the "Coming Soon" Ann Summers aesthetic
- */
-import { useState, useEffect } from "react";
-import { View, Text, StyleSheet, Platform, useWindowDimensions, Pressable } from "react-native";
-import { Gesture, GestureDetector, TouchableOpacity } from "react-native-gesture-handler";
-import { BlurView } from "expo-blur";
-import { LinearGradient } from "expo-linear-gradient";
-import Animated, {
-    useSharedValue,
-    useAnimatedStyle,
-    withSpring,
-    withRepeat,
-    withSequence,
-    runOnJS,
-    interpolate,
-    Extrapolate,
-    withTiming,
-    interpolateColor,
-    Easing,
-    FadeIn,
-} from "react-native-reanimated";
-import { Ionicons } from "@expo/vector-icons";
-import { colors, gradients, featureColors, radius, shadows, blur, typography, spacing, animations } from "../../theme";
-
-// Use feature colors for consistency
-const { accent: ACCENT } = featureColors.dares;
-const { accent: ROSE } = featureColors.quiz;
-
-// RGBA helpers for custom opacity levels (derived from theme colors)
-// Gold: #D4AF37 = rgb(212, 175, 55)
-// Rose: #E8A4AE = rgb(232, 164, 174)
-const rgba = {
-    gold: (opacity: number) => `rgba(212, 175, 55, ${opacity})`,
-    rose: (opacity: number) => `rgba(232, 164, 174, ${opacity})`,
-};
-
-// Haptics helper
-const triggerHaptic = async (style: 'light' | 'medium' | 'heavy' = 'medium') => {
-    if (Platform.OS === 'web') return;
-    const Haptics = await import('expo-haptics');
-    const feedbackStyle = style === 'light'
-        ? Haptics.ImpactFeedbackStyle.Light
-        : style === 'heavy'
-            ? Haptics.ImpactFeedbackStyle.Heavy
-            : Haptics.ImpactFeedbackStyle.Medium;
-    await Haptics.impactAsync(feedbackStyle);
-};
-
-const MAX_CARD_WIDTH = 400;
-const SWIPE_THRESHOLD = 100;
-
-interface Props {
-    question: { id: string; text: string; intensity: number; partner_text?: string | null; is_two_part?: boolean; partner_answered?: boolean };
-    onSwipe: (direction: "left" | "right" | "up" | "down") => void;
-    onReport?: () => void;
-}
-
-export default function SwipeCardPremium({ question, onSwipe, onReport }: Props) {
-    const { width: screenWidth } = useWindowDimensions();
-    const cardWidth = Math.min(screenWidth - 48, MAX_CARD_WIDTH);
-
-    const translateX = useSharedValue(0);
-    const translateY = useSharedValue(0);
-    const rotation = useSharedValue(0);
-    const scale = useSharedValue(1);
-    const shadowExpand = useSharedValue(0);
-    const idleBreathing = useSharedValue(0);
-    const isGesturing = useSharedValue(false);
-
-    const context = useSharedValue({ x: 0, y: 0 });
-
-    // Subtle idle breathing animation
-    useEffect(() => {
-        idleBreathing.value = withRepeat(
-            withSequence(
-                withTiming(1, { duration: 3000, easing: Easing.inOut(Easing.sin) }),
-                withTiming(0, { duration: 3000, easing: Easing.inOut(Easing.sin) })
-            ),
-            -1,
-            true
-        );
-    }, []);
-
-    const gesture = Gesture.Pan()
-        .activeOffsetX([-15, 15])
-        .activeOffsetY([-15, 15])
-        .onStart(() => {
-            context.value = { x: translateX.value, y: translateY.value };
-            scale.value = withTiming(1.02, { duration: animations.timing.fast });
-            shadowExpand.value = withTiming(1, { duration: animations.timing.fast });
-            isGesturing.value = true;
-        })
-        .onUpdate((event) => {
-            translateX.value = event.translationX + context.value.x;
-            translateY.value = event.translationY + context.value.y;
-            rotation.value = interpolate(
-                translateX.value,
-                [-cardWidth / 2, cardWidth / 2],
-                [-8, 8], // Reduced rotation for elegance
-                Extrapolate.CLAMP
-            );
-        })
-        .onEnd(() => {
-            scale.value = withTiming(1, { duration: animations.timing.fast });
-            shadowExpand.value = withTiming(0, { duration: animations.timing.fast });
-            isGesturing.value = false;
-
-            if (Math.abs(translateX.value) > SWIPE_THRESHOLD) {
-                const direction = translateX.value > 0 ? "right" : "left";
-                runOnJS(triggerHaptic)('medium');
-                translateX.value = withSpring(
-                    direction === "right" ? screenWidth * 1.5 : -screenWidth * 1.5,
-                    animations.springGentle
-                );
-                runOnJS(onSwipe)(direction);
-            } else if (translateY.value < -SWIPE_THRESHOLD) {
-                runOnJS(triggerHaptic)('medium');
-                translateY.value = withSpring(-screenWidth * 1.5, animations.springGentle);
-                runOnJS(onSwipe)("up");
-            } else if (translateY.value > SWIPE_THRESHOLD) {
-                runOnJS(triggerHaptic)('light');
-                translateY.value = withSpring(screenWidth * 1.5, animations.springGentle);
-                runOnJS(onSwipe)("down");
-            } else {
-                translateX.value = withSpring(0, animations.spring);
-                translateY.value = withSpring(0, animations.spring);
-                rotation.value = withSpring(0, animations.spring);
-            }
-        });
-
-    const animatedStyle = useAnimatedStyle(() => {
-        const idleOffset = isGesturing.value ? 0 : interpolate(idleBreathing.value, [0, 1], [0, -4]);
-        return {
-            transform: [
-                { translateX: translateX.value },
-                { translateY: translateY.value + idleOffset },
-                { rotate: `${rotation.value}deg` },
-                { scale: scale.value },
-            ],
-        };
-    });
-
-    const cardShadowStyle = useAnimatedStyle(() => ({
-        shadowOpacity: interpolate(shadowExpand.value, [0, 1], [0.2, 0.4]),
-        shadowRadius: interpolate(shadowExpand.value, [0, 1], [20, 32]),
-        shadowOffset: {
-            width: 0,
-            height: interpolate(shadowExpand.value, [0, 1], [10, 16]),
-        },
-    }));
-
-    const overlayStyle = (direction: "left" | "right" | "up" | "down") =>
-        useAnimatedStyle(() => {
-            let opacity = 0;
-            if (direction === "right") {
-                opacity = interpolate(translateX.value, [0, SWIPE_THRESHOLD], [0, 1]);
-            } else if (direction === "left") {
-                opacity = interpolate(translateX.value, [0, -SWIPE_THRESHOLD], [0, 1]);
-            } else if (direction === "up") {
-                opacity = interpolate(translateY.value, [0, -SWIPE_THRESHOLD], [0, 1]);
-            } else {
-                opacity = interpolate(translateY.value, [0, SWIPE_THRESHOLD], [0, 1]);
-            }
-            return { opacity };
-        });
-
-    const handleButtonPress = async (direction: "left" | "right" | "up") => {
-        await triggerHaptic('light');
-        onSwipe(direction);
-    };
-
-    return (
-        <View style={[styles.cardWrapper, { width: cardWidth }]}>
-            {/* Report Button - outside GestureDetector to receive touches */}
-            {onReport && (
-                <Pressable
-                    style={styles.reportButton}
-                    onPress={onReport}
-                    hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-                >
-                    <Ionicons name="flag-outline" size={16} color={colors.textTertiary} />
-                </Pressable>
-            )}
-
-            <GestureDetector gesture={gesture}>
-                <Animated.View style={[styles.cardOuter, animatedStyle, cardShadowStyle, { shadowColor: ACCENT }]}>
-                    {/* Premium dark background */}
-                    <View style={styles.cardBackground}>
-                        {/* Subtle gradient overlay */}
-                        <LinearGradient
-                            colors={['rgba(22, 33, 62, 0.95)', 'rgba(13, 13, 26, 0.98)']}
-                            style={StyleSheet.absoluteFill}
-                            start={{ x: 0.5, y: 0 }}
-                            end={{ x: 0.5, y: 1 }}
-                        />
-
-                        {/* Top silk highlight */}
-                        <LinearGradient
-                            colors={[rgba.gold(0.08), 'transparent']}
-                            style={styles.silkHighlight}
-                            start={{ x: 0.5, y: 0 }}
-                            end={{ x: 0.5, y: 1 }}
-                        />
-
-                        {/* Swipe Overlays - Premium style */}
-                        <Animated.View style={[styles.overlay, styles.overlayYes, overlayStyle("right")]} pointerEvents="none">
-                            <View style={styles.overlayBadgePremium}>
-                                <Text style={styles.overlayTextPremium}>YES</Text>
-                            </View>
-                        </Animated.View>
-                        <Animated.View style={[styles.overlay, styles.overlayNo, overlayStyle("left")]} pointerEvents="none">
-                            <View style={[styles.overlayBadgePremium, styles.overlayBadgeNo]}>
-                                <Text style={[styles.overlayTextPremium, styles.overlayTextNo]}>NO</Text>
-                            </View>
-                        </Animated.View>
-                        <Animated.View style={[styles.overlay, styles.overlayMaybe, overlayStyle("up")]} pointerEvents="none">
-                            <View style={[styles.overlayBadgePremium, styles.overlayBadgeMaybe]}>
-                                <Text style={[styles.overlayTextPremium, styles.overlayTextMaybe]}>MAYBE</Text>
-                            </View>
-                        </Animated.View>
-                        <Animated.View style={[styles.overlay, styles.overlaySkip, overlayStyle("down")]} pointerEvents="none">
-                            <View style={[styles.overlayBadgePremium, styles.overlayBadgeSkip]}>
-                                <Text style={[styles.overlayTextPremium, styles.overlayTextSkip]}>SKIP</Text>
-                            </View>
-                        </Animated.View>
-
-                        {/* Content */}
-                        <View style={styles.content}>
-                            {/* Intensity badge - more prominent */}
-                            <View style={styles.intensityBadge}>
-                                <Text style={styles.intensityLabel}>INTENSITY</Text>
-                                <View style={styles.intensityRow}>
-                                    {[...Array(5)].map((_, i) => (
-                                        <Ionicons
-                                            key={i}
-                                            name={i < question.intensity ? "flame" : "flame-outline"}
-                                            size={18}
-                                            color={i < question.intensity ? ACCENT : 'rgba(255, 255, 255, 0.2)'}
-                                        />
-                                    ))}
-                                </View>
-                            </View>
-
-                            {/* Decorative separator */}
-                            <View style={styles.separator}>
-                                <View style={styles.separatorLine} />
-                                <View style={styles.separatorDiamond} />
-                                <View style={styles.separatorLine} />
-                            </View>
-
-                            {/* Question text */}
-                            <Text style={styles.questionText}>
-                                {question.text}
-                            </Text>
-
-                            {/* Partner's version of the question - only show when user is answering first */}
-                            {question.partner_text && !question.partner_answered && (
-                                <View style={styles.partnerTextContainer}>
-                                    <View style={styles.partnerDivider}>
-                                        <View style={styles.partnerDividerLine} />
-                                        <View style={styles.partnerLabelBadge}>
-                                            <Ionicons name="swap-horizontal" size={10} color={ROSE} />
-                                            <Text style={styles.partnerLabelText}>PARTNER SEES</Text>
-                                        </View>
-                                        <View style={styles.partnerDividerLine} />
-                                    </View>
-                                    <Text style={styles.partnerQuestionText}>{question.partner_text}</Text>
-                                </View>
-                            )}
-
-                            {/* Bottom separator */}
-                            <View style={styles.separator}>
-                                <View style={styles.separatorLine} />
-                                <View style={styles.separatorDiamond} />
-                                <View style={styles.separatorLine} />
-                            </View>
-                        </View>
-
-                        {/* Premium Action Buttons */}
-                        <View style={styles.footer}>
-                            <View style={styles.buttonContainer}>
-                                <PremiumButton
-                                    onPress={() => handleButtonPress("left")}
-                                    icon="close"
-                                    variant="no"
-                                />
-                                <PremiumButton
-                                    onPress={() => handleButtonPress("up")}
-                                    icon="help"
-                                    variant="maybe"
-                                    small
-                                />
-                                <PremiumButton
-                                    onPress={() => handleButtonPress("right")}
-                                    icon="heart"
-                                    variant="yes"
-                                />
-                            </View>
-                        </View>
-                    </View>
-
-                    {/* Premium border */}
-                    <View style={styles.premiumBorder} pointerEvents="none" />
-                </Animated.View>
-            </GestureDetector>
-        </View>
-    );
-}
-
-function PremiumButton({
-    onPress,
-    icon,
-    variant,
-    small = false,
-}: {
-    onPress: () => void;
-    icon: string;
-    variant: 'yes' | 'no' | 'maybe';
-    small?: boolean;
-}) {
-    const buttonScale = useSharedValue(1);
-
-    const handlePressIn = () => {
-        buttonScale.value = withSpring(0.92, animations.spring);
-    };
-
-    const handlePressOut = () => {
-        buttonScale.value = withSpring(1, animations.spring);
-    };
-
-    const buttonAnimatedStyle = useAnimatedStyle(() => ({
-        transform: [{ scale: buttonScale.value }],
-    }));
-
-    const getColors = () => {
-        switch (variant) {
-            case 'yes': return { bg: rgba.gold(0.15), border: rgba.gold(0.3), icon: ACCENT };
-            case 'no': return { bg: rgba.rose(0.15), border: rgba.rose(0.3), icon: ROSE };
-            case 'maybe': return { bg: 'rgba(255, 255, 255, 0.08)', border: 'rgba(255, 255, 255, 0.15)', icon: colors.textSecondary };
-        }
-    };
-
-    const c = getColors();
-
-    return (
-        <TouchableOpacity
-            onPress={onPress}
-            onPressIn={handlePressIn}
-            onPressOut={handlePressOut}
-            activeOpacity={1}
-        >
-            <Animated.View style={[
-                styles.premiumButton,
-                small && styles.premiumButtonSmall,
-                { backgroundColor: c.bg, borderColor: c.border },
-                buttonAnimatedStyle,
-            ]}>
-                <Ionicons
-                    name={icon as any}
-                    size={small ? 18 : 24}
-                    color={c.icon}
-                />
-            </Animated.View>
-        </TouchableOpacity>
-    );
-}
-
-const styles = StyleSheet.create({
-    cardWrapper: {
-        position: "absolute",
-        maxWidth: MAX_CARD_WIDTH,
-        height: 500,
-    },
-    cardOuter: {
-        width: "100%",
-        height: "100%",
-        borderRadius: radius.xl,
-        overflow: "hidden",
-    },
-    cardBackground: {
-        flex: 1,
-        backgroundColor: '#0d0d1a',
-        borderRadius: radius.xl,
-        overflow: "hidden",
-    },
-    silkHighlight: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        height: 120,
-    },
-    reportButton: {
-        position: 'absolute',
-        top: spacing.md,
-        right: spacing.md,
-        zIndex: 100,
-        padding: spacing.sm,
-        opacity: 0.6,
-    },
-    premiumBorder: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        borderRadius: radius.xl,
-        borderWidth: 1,
-        borderColor: 'rgba(212, 175, 55, 0.2)', // gold @ 0.2
-    },
-    content: {
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
-        paddingHorizontal: spacing.xl,
-    },
-    intensityBadge: {
-        alignItems: 'center',
-        backgroundColor: 'rgba(212, 175, 55, 0.08)', // gold @ 0.08
-        paddingHorizontal: spacing.lg,
-        paddingVertical: spacing.sm,
-        borderRadius: radius.lg,
-        borderWidth: 1,
-        borderColor: 'rgba(212, 175, 55, 0.15)', // gold @ 0.15
-        marginBottom: spacing.md,
-    },
-    intensityLabel: {
-        ...typography.caption2,
-        fontWeight: '600',
-        letterSpacing: 2,
-        color: 'rgba(212, 175, 55, 0.7)', // gold @ 0.7
-        marginBottom: spacing.xs,
-    },
-    intensityRow: {
-        flexDirection: 'row',
-        gap: 4,
-    },
-    separator: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginVertical: spacing.lg,
-        width: 120,
-    },
-    separatorLine: {
-        flex: 1,
-        height: 1,
-        backgroundColor: 'rgba(212, 175, 55, 0.2)', // gold @ 0.2
-    },
-    separatorDiamond: {
-        width: 6,
-        height: 6,
-        backgroundColor: ACCENT,
-        transform: [{ rotate: '45deg' }],
-        marginHorizontal: spacing.md,
-        opacity: 0.5,
-    },
-    questionText: {
-        ...typography.title2,
-        color: colors.text,
-        textAlign: "center",
-        lineHeight: 32,
-        paddingHorizontal: spacing.sm,
-    },
-    partnerTextContainer: {
-        marginTop: spacing.lg,
-        width: '100%',
-        paddingHorizontal: spacing.sm,
-    },
-    partnerDivider: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        marginBottom: spacing.sm,
-    },
-    partnerDividerLine: {
-        flex: 1,
-        height: 1,
-        backgroundColor: rgba.rose(0.2),
-    },
-    partnerLabelBadge: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingHorizontal: spacing.md,
-        paddingVertical: spacing.xs,
-        backgroundColor: rgba.rose(0.1),
-        borderRadius: radius.full,
-        borderWidth: 1,
-        borderColor: rgba.rose(0.2),
-        gap: spacing.xs,
-    },
-    partnerLabelText: {
-        ...typography.caption2,
-        fontWeight: '600',
-        letterSpacing: 1.5,
-        color: rgba.rose(0.8),
-    },
-    partnerQuestionText: {
-        ...typography.subhead,
-        color: colors.textSecondary,
-        textAlign: 'center',
-        fontStyle: 'italic',
-        opacity: 0.85,
-    },
-    footer: {
-        paddingBottom: spacing.xl,
-        paddingHorizontal: spacing.lg,
-    },
-    buttonContainer: {
-        flexDirection: "row",
-        justifyContent: "center",
-        alignItems: "center",
-        gap: spacing.lg,
-    },
-    premiumButton: {
-        width: 60,
-        height: 60,
-        borderRadius: 30,
-        justifyContent: "center",
-        alignItems: "center",
-        borderWidth: 1,
-    },
-    premiumButtonSmall: {
-        width: 48,
-        height: 48,
-        borderRadius: 24,
-    },
-    // Overlays
-    overlay: {
-        ...StyleSheet.absoluteFillObject,
-        justifyContent: "center",
-        alignItems: "center",
-        zIndex: 10,
-        borderRadius: radius.xl,
-    },
-    overlayYes: {
-        backgroundColor: 'rgba(212, 175, 55, 0.15)', // gold @ 0.15
-    },
-    overlayNo: {
-        backgroundColor: 'rgba(232, 164, 174, 0.15)', // rose @ 0.15
-    },
-    overlayMaybe: {
-        backgroundColor: 'rgba(255, 255, 255, 0.08)',
-    },
-    overlaySkip: {
-        backgroundColor: 'rgba(0, 0, 0, 0.3)',
-    },
-    overlayBadgePremium: {
-        paddingHorizontal: spacing.xl,
-        paddingVertical: spacing.md,
-        borderRadius: radius.full,
-        backgroundColor: 'rgba(212, 175, 55, 0.2)', // gold @ 0.2
-        borderWidth: 1,
-        borderColor: 'rgba(212, 175, 55, 0.4)', // gold @ 0.4
-        transform: [{ rotate: "-12deg" }],
-    },
-    overlayBadgeNo: {
-        backgroundColor: 'rgba(232, 164, 174, 0.2)', // rose @ 0.2
-        borderColor: 'rgba(232, 164, 174, 0.4)', // rose @ 0.4
-    },
-    overlayBadgeMaybe: {
-        backgroundColor: 'rgba(255, 255, 255, 0.1)',
-        borderColor: 'rgba(255, 255, 255, 0.2)',
-    },
-    overlayBadgeSkip: {
-        backgroundColor: 'rgba(255, 255, 255, 0.1)',
-        borderColor: 'rgba(255, 255, 255, 0.15)',
-    },
-    overlayTextPremium: {
-        fontSize: 28,
-        fontWeight: "600",
-        letterSpacing: 4,
-        color: ACCENT,
-    },
-    overlayTextNo: {
-        color: ROSE,
-    },
-    overlayTextMaybe: {
-        color: colors.textSecondary,
-    },
-    overlayTextSkip: {
-        color: colors.textTertiary,
-        fontSize: 24,
-    },
-});
diff --git a/apps/mobile/src/components/swipe/index.ts b/apps/mobile/src/components/swipe/index.ts
deleted file mode 100644
index 68ecfc3..0000000
--- a/apps/mobile/src/components/swipe/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as SwipeCard } from './SwipeCard';
-export { default as SwipeCardPremium } from './SwipeCardPremium';
diff --git a/apps/mobile/src/components/tutorials/MatchesTutorial.tsx b/apps/mobile/src/components/tutorials/MatchesTutorial.tsx
index cb80f65..b28a6e4 100644
--- a/apps/mobile/src/components/tutorials/MatchesTutorial.tsx
+++ b/apps/mobile/src/components/tutorials/MatchesTutorial.tsx
@@ -34,7 +34,7 @@ const STEPS: TutorialStep[] = [
     {
         key: "match",
         title: "You've Got a Match!",
-        description: "When both you and your partner swipe YES or MAYBE on the same question, it creates a match. This means you're both interested!",
+        description: "When both you and your partner swipe YES on the same question, it creates a match. This means you're both interested!",
         icon: "heart",
         gradient: gradients.primary as [string, string],
     },
@@ -185,11 +185,6 @@ export default function MatchesTutorial({ onComplete }: Props) {
                                             <Ionicons name="heart" size={16} color={colors.text} />
                                             <Text style={styles.badgeText}>YES + YES</Text>
                                         </LinearGradient>
-                                        <View style={styles.badgeConnector} />
-                                        <View style={[styles.matchBadge, styles.maybeBadge]}>
-                                            <Ionicons name="heart-half" size={16} color={colors.primary} />
-                                            <Text style={[styles.badgeText, styles.maybeBadgeText]}>YES + MAYBE</Text>
-                                        </View>
                                     </View>
                                 </View>
                             )}
@@ -249,9 +244,9 @@ export default function MatchesTutorial({ onComplete }: Props) {
                                             <Text style={styles.answerCardQuestion} numberOfLines={1}>
                                                 "Try something new together"
                                             </Text>
-                                            <View style={[styles.answerCardBadge, styles.answerCardBadgeMaybe]}>
-                                                <Ionicons name="help" size={12} color={colors.warning} />
-                                                <Text style={[styles.answerCardBadgeText, styles.answerCardBadgeTextMaybe]}>MAYBE</Text>
+                                            <View style={[styles.answerCardBadge, styles.answerCardBadgeNo]}>
+                                                <Ionicons name="close" size={12} color={colors.error} />
+                                                <Text style={[styles.answerCardBadgeText, styles.answerCardBadgeTextNo]}>NO</Text>
                                             </View>
                                         </View>
                                     </View>
@@ -384,25 +379,12 @@ const styles = StyleSheet.create({
         borderRadius: radius.full,
         gap: spacing.xs,
     },
-    maybeBadge: {
-        backgroundColor: colors.glass.background,
-        borderWidth: 1,
-        borderColor: colors.glass.border,
-    },
     badgeText: {
         ...typography.caption1,
         color: colors.text,
         fontWeight: "700",
         letterSpacing: 0.5,
     },
-    maybeBadgeText: {
-        color: colors.primary,
-    },
-    badgeConnector: {
-        width: 20,
-        height: 2,
-        backgroundColor: colors.glass.border,
-    },
     chatDemo: {
         marginTop: spacing.lg,
         gap: spacing.sm,
@@ -508,18 +490,18 @@ const styles = StyleSheet.create({
         borderRadius: radius.full,
         gap: 2,
     },
-    answerCardBadgeMaybe: {
-        backgroundColor: "rgba(243, 156, 18, 0.2)",
+    answerCardBadgeNo: {
+        backgroundColor: "rgba(231, 76, 60, 0.2)",
         borderWidth: 1,
-        borderColor: colors.warning,
+        borderColor: colors.error,
     },
     answerCardBadgeText: {
         ...typography.caption2,
         fontWeight: "700",
         color: colors.text,
     },
-    answerCardBadgeTextMaybe: {
-        color: colors.warning,
+    answerCardBadgeTextNo: {
+        color: colors.error,
     },
     answerCardEdit: {
         marginLeft: spacing.sm,
diff --git a/apps/mobile/src/components/tutorials/SwipeTutorial.tsx b/apps/mobile/src/components/tutorials/SwipeTutorial.tsx
deleted file mode 100644
index 17ef375..0000000
--- a/apps/mobile/src/components/tutorials/SwipeTutorial.tsx
+++ /dev/null
@@ -1,705 +0,0 @@
-import { useEffect, useState } from "react";
-import { View, Text, StyleSheet, Pressable, useWindowDimensions, Platform } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { BlurView } from "expo-blur";
-import { LinearGradient } from "expo-linear-gradient";
-import { Ionicons } from "@expo/vector-icons";
-import Animated, {
-    useSharedValue,
-    useAnimatedStyle,
-    withTiming,
-    withRepeat,
-    withSequence,
-    withDelay,
-    withSpring,
-    FadeIn,
-    FadeOut,
-    interpolate,
-    Easing,
-    runOnJS,
-} from "react-native-reanimated";
-import { colors, gradients, radius, shadows, blur, typography, spacing, animations } from "../../theme";
-import { Events } from "../../lib/analytics";
-
-interface Props {
-    onComplete: () => void;
-}
-
-interface TutorialStep {
-    key: string;
-    label: string;
-    description: string;
-    icon: string;
-    color: string;
-    gradient: [string, string];
-    translateX: number;
-    translateY: number;
-    isSwipe: boolean;
-}
-
-const STEPS: TutorialStep[] = [
-    {
-        key: "right",
-        label: "YES",
-        description: "Swipe right if you're interested",
-        icon: "heart",
-        color: colors.success,
-        gradient: gradients.success as [string, string],
-        translateX: 80,
-        translateY: 0,
-        isSwipe: true,
-    },
-    {
-        key: "left",
-        label: "NO",
-        description: "Swipe left if you're not interested",
-        icon: "close",
-        color: colors.error,
-        gradient: gradients.error as [string, string],
-        translateX: -80,
-        translateY: 0,
-        isSwipe: true,
-    },
-    {
-        key: "up",
-        label: "MAYBE",
-        description: "Swipe up if you're unsure",
-        icon: "help",
-        color: colors.warning,
-        gradient: gradients.warning as [string, string],
-        translateX: 0,
-        translateY: -80,
-        isSwipe: true,
-    },
-    {
-        key: "down",
-        label: "SKIP",
-        description: "Swipe down to skip for now",
-        icon: "arrow-down",
-        color: colors.textTertiary,
-        gradient: ["#6c757d", "#495057"],
-        translateX: 0,
-        translateY: 80,
-        isSwipe: true,
-    },
-    {
-        key: "feedback",
-        label: "FEEDBACK",
-        description: "Tap the flag to report issues with a question",
-        icon: "flag-outline",
-        color: colors.primary,
-        gradient: gradients.primary as [string, string],
-        translateX: 0,
-        translateY: 0,
-        isSwipe: false,
-    },
-];
-
-export default function SwipeTutorial({ onComplete }: Props) {
-    const { width: screenWidth, height: screenHeight } = useWindowDimensions();
-    const insets = useSafeAreaInsets();
-    const [currentStep, setCurrentStep] = useState(0);
-
-    const cardTranslateX = useSharedValue(0);
-    const cardTranslateY = useSharedValue(0);
-    const cardRotation = useSharedValue(0);
-    const cardScale = useSharedValue(1);
-    const overlayOpacity = useSharedValue(0);
-    const pulseScale = useSharedValue(1);
-    const handOffset = useSharedValue(0);
-
-    const currentStep_ = STEPS[currentStep];
-    const isSwipeStep = currentStep_.isSwipe;
-
-    // Track tutorial started on mount
-    useEffect(() => {
-        Events.tutorialStarted("swipe");
-        Events.tutorialStepViewed("swipe", 0, STEPS[0].key);
-    }, []);
-
-    // Track step changes
-    useEffect(() => {
-        if (currentStep > 0) {
-            Events.tutorialStepViewed("swipe", currentStep, STEPS[currentStep].key);
-        }
-    }, [currentStep]);
-
-    useEffect(() => {
-        // Reset animations for current step
-        cardTranslateX.value = 0;
-        cardTranslateY.value = 0;
-        cardRotation.value = 0;
-        overlayOpacity.value = 0;
-        handOffset.value = 0;
-
-        // Start the swipe demonstration animation
-        const animateSwipe = () => {
-            if (!isSwipeStep) {
-                // For non-swipe steps (feedback), just pulse the card
-                cardScale.value = withRepeat(
-                    withSequence(
-                        withTiming(1.02, { duration: 600 }),
-                        withTiming(1, { duration: 600 })
-                    ),
-                    -1,
-                    true
-                );
-                return;
-            }
-
-            // Pulse the card first
-            cardScale.value = withSequence(
-                withTiming(1.02, { duration: 200 }),
-                withTiming(1, { duration: 200 })
-            );
-
-            // Animate hand movement
-            handOffset.value = withRepeat(
-                withSequence(
-                    withTiming(1, { duration: 800, easing: Easing.out(Easing.cubic) }),
-                    withDelay(300, withTiming(0, { duration: 400 }))
-                ),
-                -1,
-                false
-            );
-
-            // Animate card swipe
-            cardTranslateX.value = withRepeat(
-                withSequence(
-                    withDelay(200, withTiming(currentStep_.translateX * 0.7, {
-                        duration: 600,
-                        easing: Easing.out(Easing.cubic)
-                    })),
-                    withDelay(400, withSpring(0, animations.spring))
-                ),
-                -1,
-                false
-            );
-
-            cardTranslateY.value = withRepeat(
-                withSequence(
-                    withDelay(200, withTiming(currentStep_.translateY * 0.7, {
-                        duration: 600,
-                        easing: Easing.out(Easing.cubic)
-                    })),
-                    withDelay(400, withSpring(0, animations.spring))
-                ),
-                -1,
-                false
-            );
-
-            // Rotate card for horizontal swipes
-            if (currentStep_.translateX !== 0) {
-                cardRotation.value = withRepeat(
-                    withSequence(
-                        withDelay(200, withTiming(currentStep_.translateX > 0 ? 8 : -8, {
-                            duration: 600
-                        })),
-                        withDelay(400, withSpring(0, animations.spring))
-                    ),
-                    -1,
-                    false
-                );
-            }
-
-            // Show overlay during swipe
-            overlayOpacity.value = withRepeat(
-                withSequence(
-                    withDelay(400, withTiming(0.8, { duration: 400 })),
-                    withDelay(200, withTiming(0, { duration: 400 }))
-                ),
-                -1,
-                false
-            );
-        };
-
-        // Pulse animation for the indicator
-        pulseScale.value = withRepeat(
-            withSequence(
-                withTiming(1.2, { duration: 800 }),
-                withTiming(1, { duration: 800 })
-            ),
-            -1,
-            true
-        );
-
-        const timeout = setTimeout(animateSwipe, 300);
-        return () => clearTimeout(timeout);
-    }, [currentStep]);
-
-    const handleNext = () => {
-        if (currentStep < STEPS.length - 1) {
-            setCurrentStep(currentStep + 1);
-        } else {
-            Events.tutorialCompleted("swipe");
-            onComplete();
-        }
-    };
-
-    const handleSkip = () => {
-        Events.tutorialSkipped("swipe", currentStep);
-        onComplete();
-    };
-
-    const cardAnimatedStyle = useAnimatedStyle(() => ({
-        transform: [
-            { translateX: cardTranslateX.value },
-            { translateY: cardTranslateY.value },
-            { rotate: `${cardRotation.value}deg` },
-            { scale: cardScale.value },
-        ],
-    }));
-
-    const overlayAnimatedStyle = useAnimatedStyle(() => ({
-        opacity: overlayOpacity.value,
-    }));
-
-    const pulseAnimatedStyle = useAnimatedStyle(() => ({
-        transform: [{ scale: pulseScale.value }],
-        opacity: interpolate(pulseScale.value, [1, 1.2], [0.6, 0.2]),
-    }));
-
-    const handAnimatedStyle = useAnimatedStyle(() => {
-        const progress = handOffset.value;
-        return {
-            transform: [
-                { translateX: currentStep_.translateX * progress * 0.5 },
-                { translateY: currentStep_.translateY * progress * 0.5 },
-            ],
-            opacity: interpolate(progress, [0, 0.2, 0.8, 1], [0, 1, 1, 0]),
-        };
-    });
-
-    return (
-        <Animated.View
-            entering={FadeIn.duration(300)}
-            exiting={FadeOut.duration(200)}
-            style={styles.container}
-        >
-            <BlurView intensity={blur.heavy} tint="dark" style={styles.blur}>
-                <View style={[styles.content, { paddingBottom: Math.max(40, insets.bottom + (Platform.OS === 'ios' ? 100 : 80)) }]}>
-                    {/* Skip button */}
-                    <Pressable style={styles.skipButton} onPress={handleSkip}>
-                        <Text style={styles.skipText}>Skip</Text>
-                    </Pressable>
-
-                    {/* Title */}
-                    <Animated.View entering={FadeIn.delay(100).duration(400)}>
-                        <Text style={styles.title}>How to Play</Text>
-                        <Text style={styles.subtitle}>
-                            Swipe to answer questions and find your matches
-                        </Text>
-                    </Animated.View>
-
-                    {/* Demo Card Area */}
-                    <View style={styles.demoArea}>
-                        {/* Direction indicators around the card - only for swipe steps */}
-                        {isSwipeStep && (
-                            <View style={styles.indicatorsContainer}>
-                                {STEPS.filter(s => s.isSwipe).map((dir, index) => (
-                                    <View
-                                        key={dir.key}
-                                        style={[
-                                            styles.directionIndicator,
-                                            dir.key === "right" && styles.indicatorRight,
-                                            dir.key === "left" && styles.indicatorLeft,
-                                            dir.key === "up" && styles.indicatorUp,
-                                            dir.key === "down" && styles.indicatorDown,
-                                        ]}
-                                    >
-                                        {index === currentStep && (
-                                            <Animated.View style={[styles.pulseRing, pulseAnimatedStyle]}>
-                                                <View style={[styles.pulseInner, { backgroundColor: dir.color }]} />
-                                            </Animated.View>
-                                        )}
-                                        <LinearGradient
-                                            colors={index === currentStep ? dir.gradient : ['rgba(255,255,255,0.1)', 'rgba(255,255,255,0.05)'] as [string, string]}
-                                            style={[
-                                                styles.indicatorBadge,
-                                                index === currentStep && styles.indicatorActive,
-                                            ]}
-                                        >
-                                            <Ionicons
-                                                name={dir.icon as any}
-                                                size={20}
-                                                color={index === currentStep ? colors.text : colors.textTertiary}
-                                            />
-                                        </LinearGradient>
-                                    </View>
-                                ))}
-                            </View>
-                        )}
-
-                        {/* Demo Card */}
-                        <Animated.View style={[styles.demoCard, cardAnimatedStyle, shadows.xl]}>
-                            <LinearGradient
-                                colors={[colors.glass.backgroundLight, colors.glass.background]}
-                                style={styles.demoCardInner}
-                            >
-                                {/* Feedback button indicator */}
-                                <View style={[
-                                    styles.feedbackButtonDemo,
-                                    !isSwipeStep && styles.feedbackButtonHighlight
-                                ]}>
-                                    {!isSwipeStep && (
-                                        <Animated.View style={[styles.feedbackPulse, pulseAnimatedStyle]}>
-                                            <View style={[styles.pulseInner, { backgroundColor: currentStep_.color }]} />
-                                        </Animated.View>
-                                    )}
-                                    <Ionicons name="flag-outline" size={18} color={!isSwipeStep ? colors.text : colors.textTertiary} />
-                                </View>
-
-                                {/* Overlay - only for swipe steps */}
-                                {isSwipeStep && (
-                                    <Animated.View
-                                        style={[
-                                            styles.demoOverlay,
-                                            overlayAnimatedStyle,
-                                            { backgroundColor: `${currentStep_.color}40` }
-                                        ]}
-                                    >
-                                        <View style={[styles.overlayBadge, { backgroundColor: currentStep_.color }]}>
-                                            <Text style={styles.overlayText}>{currentStep_.label}</Text>
-                                        </View>
-                                    </Animated.View>
-                                )}
-
-                                {/* Card content */}
-                                <View style={styles.demoCardContent}>
-                                    <View style={styles.intensityDemo}>
-                                        <Ionicons name="flame" size={14} color={colors.primary} />
-                                        <Ionicons name="flame" size={14} color={colors.primary} />
-                                    </View>
-                                    <Text style={styles.demoQuestion}>
-                                        Would you try a new restaurant together?
-                                    </Text>
-                                </View>
-                            </LinearGradient>
-
-                            {/* Hand gesture indicator - only for swipe steps */}
-                            {isSwipeStep && (
-                                <Animated.View style={[styles.handIndicator, handAnimatedStyle]}>
-                                    <View style={styles.handCircle}>
-                                        <Ionicons name="hand-left" size={24} color={colors.text} />
-                                    </View>
-                                </Animated.View>
-                            )}
-                        </Animated.View>
-                    </View>
-
-                    {/* Current instruction */}
-                    <Animated.View
-                        key={currentStep}
-                        entering={FadeIn.duration(300)}
-                        style={styles.instructionContainer}
-                    >
-                        <LinearGradient
-                            colors={currentStep_.gradient}
-                            style={styles.instructionBadge}
-                            start={{ x: 0, y: 0 }}
-                            end={{ x: 1, y: 0 }}
-                        >
-                            <Ionicons name={currentStep_.icon as any} size={24} color={colors.text} />
-                            <Text style={styles.instructionLabel}>{currentStep_.label}</Text>
-                        </LinearGradient>
-                        <Text style={styles.instructionText}>{currentStep_.description}</Text>
-                    </Animated.View>
-
-                    {/* Progress dots */}
-                    <View style={styles.dotsContainer}>
-                        {STEPS.map((_, index) => (
-                            <View
-                                key={index}
-                                style={[
-                                    styles.dot,
-                                    index === currentStep && styles.dotActive,
-                                    index < currentStep && styles.dotCompleted,
-                                ]}
-                            />
-                        ))}
-                    </View>
-
-                    {/* Next button */}
-                    <Pressable onPress={handleNext} style={({ pressed }) => [
-                        styles.nextButton,
-                        pressed && styles.nextButtonPressed
-                    ]}>
-                        <LinearGradient
-                            colors={gradients.primary as [string, string]}
-                            style={styles.nextButtonGradient}
-                            start={{ x: 0, y: 0 }}
-                            end={{ x: 1, y: 0 }}
-                        >
-                            <Text style={styles.nextButtonText}>
-                                {currentStep < STEPS.length - 1 ? "Next" : "Got it!"}
-                            </Text>
-                            <Ionicons
-                                name={currentStep < STEPS.length - 1 ? "arrow-forward" : "checkmark"}
-                                size={20}
-                                color={colors.text}
-                            />
-                        </LinearGradient>
-                    </Pressable>
-                </View>
-            </BlurView>
-        </Animated.View>
-    );
-}
-
-const styles = StyleSheet.create({
-    container: {
-        ...StyleSheet.absoluteFillObject,
-        zIndex: 1000,
-    },
-    blur: {
-        flex: 1,
-        backgroundColor: 'rgba(13, 13, 26, 0.85)',
-    },
-    content: {
-        flex: 1,
-        paddingHorizontal: spacing.lg,
-        paddingTop: 80,
-        alignItems: "center",
-    },
-    skipButton: {
-        position: "absolute",
-        top: 60,
-        right: spacing.lg,
-        paddingVertical: spacing.sm,
-        paddingHorizontal: spacing.md,
-    },
-    skipText: {
-        ...typography.callout,
-        color: colors.textSecondary,
-    },
-    title: {
-        ...typography.title1,
-        color: colors.text,
-        textAlign: "center",
-        marginBottom: spacing.sm,
-    },
-    subtitle: {
-        ...typography.body,
-        color: colors.textSecondary,
-        textAlign: "center",
-        marginBottom: spacing.xl,
-    },
-    demoArea: {
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
-        width: "100%",
-        maxHeight: 350,
-    },
-    indicatorsContainer: {
-        position: "absolute",
-        width: 280,
-        height: 280,
-    },
-    directionIndicator: {
-        position: "absolute",
-        alignItems: "center",
-        justifyContent: "center",
-    },
-    indicatorRight: {
-        right: -20,
-        top: "50%",
-        marginTop: -24,
-    },
-    indicatorLeft: {
-        left: -20,
-        top: "50%",
-        marginTop: -24,
-    },
-    indicatorUp: {
-        top: -20,
-        left: "50%",
-        marginLeft: -24,
-    },
-    indicatorDown: {
-        bottom: -20,
-        left: "50%",
-        marginLeft: -24,
-    },
-    pulseRing: {
-        position: "absolute",
-        width: 64,
-        height: 64,
-        borderRadius: 32,
-        justifyContent: "center",
-        alignItems: "center",
-    },
-    pulseInner: {
-        width: "100%",
-        height: "100%",
-        borderRadius: 32,
-    },
-    indicatorBadge: {
-        width: 48,
-        height: 48,
-        borderRadius: 24,
-        justifyContent: "center",
-        alignItems: "center",
-        borderWidth: 1,
-        borderColor: colors.glass.border,
-    },
-    indicatorActive: {
-        borderColor: "transparent",
-    },
-    demoCard: {
-        width: 220,
-        height: 280,
-        borderRadius: radius.xl,
-        overflow: "visible",
-    },
-    demoCardInner: {
-        flex: 1,
-        borderRadius: radius.xl,
-        borderWidth: 1,
-        borderColor: colors.glass.border,
-        overflow: "hidden",
-    },
-    feedbackButtonDemo: {
-        position: 'absolute',
-        top: spacing.md,
-        right: spacing.md,
-        width: 36,
-        height: 36,
-        borderRadius: 18,
-        backgroundColor: colors.glass.background,
-        justifyContent: 'center',
-        alignItems: 'center',
-        zIndex: 100,
-        borderWidth: 1,
-        borderColor: colors.glass.border,
-    },
-    feedbackButtonHighlight: {
-        backgroundColor: colors.primary,
-        borderColor: colors.primary,
-    },
-    feedbackPulse: {
-        position: "absolute",
-        width: 56,
-        height: 56,
-        borderRadius: 28,
-        justifyContent: "center",
-        alignItems: "center",
-    },
-    demoOverlay: {
-        ...StyleSheet.absoluteFillObject,
-        justifyContent: "center",
-        alignItems: "center",
-        zIndex: 10,
-        borderRadius: radius.xl,
-    },
-    overlayBadge: {
-        paddingHorizontal: spacing.md,
-        paddingVertical: spacing.xs,
-        borderRadius: radius.sm,
-        transform: [{ rotate: "-15deg" }],
-    },
-    overlayText: {
-        fontSize: 24,
-        fontWeight: "900",
-        color: colors.text,
-        letterSpacing: 2,
-    },
-    demoCardContent: {
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
-        padding: spacing.lg,
-    },
-    intensityDemo: {
-        flexDirection: "row",
-        backgroundColor: colors.primaryLight,
-        paddingHorizontal: spacing.sm,
-        paddingVertical: spacing.xs,
-        borderRadius: radius.full,
-        gap: 2,
-        marginBottom: spacing.md,
-    },
-    demoQuestion: {
-        ...typography.headline,
-        color: colors.text,
-        textAlign: "center",
-    },
-    handIndicator: {
-        position: "absolute",
-        bottom: 40,
-        left: "50%",
-        marginLeft: -20,
-    },
-    handCircle: {
-        width: 40,
-        height: 40,
-        borderRadius: 20,
-        backgroundColor: colors.primary,
-        justifyContent: "center",
-        alignItems: "center",
-        ...shadows.md,
-    },
-    instructionContainer: {
-        alignItems: "center",
-        marginTop: spacing.xl,
-        marginBottom: spacing.lg,
-    },
-    instructionBadge: {
-        flexDirection: "row",
-        alignItems: "center",
-        paddingHorizontal: spacing.lg,
-        paddingVertical: spacing.sm,
-        borderRadius: radius.full,
-        gap: spacing.sm,
-        marginBottom: spacing.md,
-    },
-    instructionLabel: {
-        ...typography.headline,
-        color: colors.text,
-        fontWeight: "700",
-    },
-    instructionText: {
-        ...typography.body,
-        color: colors.textSecondary,
-        textAlign: "center",
-    },
-    dotsContainer: {
-        flexDirection: "row",
-        gap: spacing.sm,
-        marginBottom: spacing.xl,
-    },
-    dot: {
-        width: 8,
-        height: 8,
-        borderRadius: 4,
-        backgroundColor: colors.glass.border,
-    },
-    dotActive: {
-        backgroundColor: colors.primary,
-        width: 24,
-    },
-    dotCompleted: {
-        backgroundColor: colors.primary,
-    },
-    nextButton: {
-        width: "100%",
-        maxWidth: 280,
-        borderRadius: radius.lg,
-        overflow: "hidden",
-    },
-    nextButtonPressed: {
-        opacity: 0.9,
-        transform: [{ scale: 0.98 }],
-    },
-    nextButtonGradient: {
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "center",
-        paddingVertical: spacing.md,
-        gap: spacing.sm,
-    },
-    nextButtonText: {
-        ...typography.headline,
-        color: colors.text,
-    },
-});
diff --git a/apps/mobile/src/components/tutorials/index.ts b/apps/mobile/src/components/tutorials/index.ts
index db19205..30df6ff 100644
--- a/apps/mobile/src/components/tutorials/index.ts
+++ b/apps/mobile/src/components/tutorials/index.ts
@@ -1,2 +1 @@
-export { default as SwipeTutorial } from './SwipeTutorial';
 export { default as MatchesTutorial } from './MatchesTutorial';
diff --git a/apps/mobile/src/components/ui/DecorativeSeparator.tsx b/apps/mobile/src/components/ui/DecorativeSeparator.tsx
index cae9568..cce5be0 100644
--- a/apps/mobile/src/components/ui/DecorativeSeparator.tsx
+++ b/apps/mobile/src/components/ui/DecorativeSeparator.tsx
@@ -2,10 +2,10 @@ import React from 'react';
 import { View, StyleSheet, ViewStyle, DimensionValue } from 'react-native';
 import { colors, spacing } from '../../theme';
 
-export type SeparatorVariant = 'rose' | 'gold' | 'muted';
+export type SeparatorVariant = 'primary' | 'rose' | 'gold' | 'muted';
 
 export interface DecorativeSeparatorProps {
-    /** Color variant: 'rose' (default), 'gold' (premium/yes-yes), 'muted' */
+    /** Color variant: 'primary' (default), 'rose' (quiz), 'gold' (premium/dares), 'muted' */
     variant?: SeparatorVariant;
     /** Width of the separator. Default: 140 */
     width?: DimensionValue;
@@ -16,6 +16,10 @@ export interface DecorativeSeparatorProps {
 }
 
 const VARIANT_COLORS: Record<SeparatorVariant, { line: string; diamond: string }> = {
+    primary: {
+        line: 'rgba(225, 48, 108, 0.3)',
+        diamond: colors.primary,
+    },
     rose: {
         line: 'rgba(232, 164, 174, 0.3)',
         diamond: colors.premium.rose,
@@ -35,7 +39,7 @@ const VARIANT_COLORS: Record<SeparatorVariant, { line: string; diamond: string }
  * Used for visual separation in waiting states, headers, and empty states.
  */
 export const DecorativeSeparator: React.FC<DecorativeSeparatorProps> = ({
-    variant = 'rose',
+    variant = 'primary',
     width = 140,
     marginVertical = spacing.lg,
     style,
diff --git a/apps/mobile/src/components/ui/GlassCard.tsx b/apps/mobile/src/components/ui/GlassCard.tsx
index f70ea59..ee2de84 100644
--- a/apps/mobile/src/components/ui/GlassCard.tsx
+++ b/apps/mobile/src/components/ui/GlassCard.tsx
@@ -1,98 +1,52 @@
-import React from 'react';
-import { StyleSheet, View, ViewStyle, Platform } from 'react-native';
-import { BlurView } from 'expo-blur';
-import { LinearGradient } from 'expo-linear-gradient';
-import { colors, radius, shadows, blur } from '../../theme';
-
-interface GlassCardProps {
-  children: React.ReactNode;
-  style?: ViewStyle;
-  intensity?: 'light' | 'medium' | 'heavy';
-  variant?: 'default' | 'elevated' | 'subtle';
-  noPadding?: boolean;
-}
-
-export function GlassCard({
-  children,
-  style,
-  intensity = 'medium',
-  variant = 'default',
-  noPadding = false,
-}: GlassCardProps) {
-  const blurIntensity = blur[intensity];
-  const shadowStyle = variant === 'elevated' ? shadows.lg : variant === 'subtle' ? shadows.sm : shadows.md;
-  const borderColor = variant === 'elevated' ? colors.glass.borderLight : colors.glass.border;
-
-  // Use BlurView on iOS, fallback to solid background on Android for performance
-  const useBlur = Platform.OS === 'ios';
-
-  return (
-    <View style={[styles.container, shadowStyle, style]}>
-      {useBlur ? (
-        <BlurView
-          intensity={blurIntensity}
-          tint="dark"
-          style={[styles.blurContainer, { borderColor }]}
-        >
-          {/* Top highlight gradient */}
-          <LinearGradient
-            colors={[colors.glass.highlight, 'transparent']}
-            style={styles.highlight}
-            start={{ x: 0.5, y: 0 }}
-            end={{ x: 0.5, y: 1 }}
-          />
-          <View style={[styles.content, noPadding && styles.noPadding]}>
-            {children}
-          </View>
-        </BlurView>
-      ) : (
-        // Android fallback with solid background
-        <View style={[styles.fallbackContainer, { borderColor }]}>
-          <LinearGradient
-            colors={[colors.glass.highlight, 'transparent']}
-            style={styles.highlight}
-            start={{ x: 0.5, y: 0 }}
-            end={{ x: 0.5, y: 1 }}
-          />
-          <View style={[styles.content, noPadding && styles.noPadding]}>
-            {children}
-          </View>
-        </View>
-      )}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    borderRadius: radius.lg,
-    overflow: 'hidden',
-  },
-  blurContainer: {
-    overflow: 'hidden',
-    borderRadius: radius.lg,
-    borderWidth: 1,
-    backgroundColor: colors.glass.background,
-  },
-  fallbackContainer: {
-    overflow: 'hidden',
-    borderRadius: radius.lg,
-    borderWidth: 1,
-    backgroundColor: colors.glass.backgroundLight,
-  },
-  highlight: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    height: 60,
-  },
-  content: {
-    padding: 16,
-  },
-  noPadding: {
-    padding: 0,
-  },
-});
-
-export default GlassCard;
+import React from 'react';
+import { StyleSheet, View, ViewStyle } from 'react-native';
+import { colors, radius, shadows } from '../../theme';
+
+interface GlassCardProps {
+  children: React.ReactNode;
+  style?: ViewStyle;
+  intensity?: 'light' | 'medium' | 'heavy'; // Kept for API compatibility
+  variant?: 'default' | 'elevated' | 'subtle';
+  noPadding?: boolean;
+}
+
+export function GlassCard({
+  children,
+  style,
+  variant = 'default',
+  noPadding = false,
+}: GlassCardProps) {
+  const shadowStyle = variant === 'elevated' ? shadows.lg : variant === 'subtle' ? shadows.sm : shadows.md;
+  const borderColor = variant === 'elevated' ? colors.glass.borderLight : colors.glass.border;
+
+  return (
+    <View style={[styles.container, shadowStyle, style]}>
+      <View style={[styles.flatContainer, { borderColor }]}>
+        <View style={[styles.content, noPadding && styles.noPadding]}>
+          {children}
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: radius.lg,
+    overflow: 'hidden',
+  },
+  flatContainer: {
+    overflow: 'hidden',
+    borderRadius: radius.lg,
+    backgroundColor: colors.backgroundLight, // Use solid card color
+    // Removed border for flatter look
+  },
+  content: {
+    padding: 16,
+  },
+  noPadding: {
+    padding: 0,
+  },
+});
+
+export default GlassCard;
diff --git a/apps/mobile/src/components/ui/GlassInput.tsx b/apps/mobile/src/components/ui/GlassInput.tsx
index 4e90b86..9f4313e 100644
--- a/apps/mobile/src/components/ui/GlassInput.tsx
+++ b/apps/mobile/src/components/ui/GlassInput.tsx
@@ -1,140 +1,117 @@
-import React, { useState } from 'react';
-import { StyleSheet, TextInput, View, Text, TextInputProps, ViewStyle, Platform } from 'react-native';
-import { BlurView } from 'expo-blur';
-import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
-  withTiming,
-  interpolateColor,
-} from 'react-native-reanimated';
-import { colors, radius, blur, animations, typography } from '../../theme';
-
-interface GlassInputProps extends Omit<TextInputProps, 'style'> {
-  label?: string;
-  error?: string;
-  containerStyle?: ViewStyle;
-  icon?: React.ReactNode;
-}
-
-const AnimatedBlurView = Animated.createAnimatedComponent(BlurView);
-const AnimatedView = Animated.View;
-
-export function GlassInput({
-  label,
-  error,
-  containerStyle,
-  icon,
-  ...props
-}: GlassInputProps) {
-  const [isFocused, setIsFocused] = useState(false);
-  const focusAnim = useSharedValue(0);
-
-  const handleFocus = (e: any) => {
-    setIsFocused(true);
-    focusAnim.value = withTiming(1, { duration: animations.timing.fast });
-    props.onFocus?.(e);
-  };
-
-  const handleBlur = (e: any) => {
-    setIsFocused(false);
-    focusAnim.value = withTiming(0, { duration: animations.timing.fast });
-    props.onBlur?.(e);
-  };
-
-  const animatedBorderStyle = useAnimatedStyle(() => ({
-    borderColor: interpolateColor(
-      focusAnim.value,
-      [0, 1],
-      [error ? colors.error : colors.glass.border, error ? colors.error : colors.primary]
-    ),
-  }));
-
-  const useBlur = Platform.OS === 'ios';
-
-  const inputContent = (
-    <View style={styles.inputWrapper}>
-      {icon && <View style={styles.icon}>{icon}</View>}
-      <TextInput
-        {...props}
-        style={[styles.input, icon ? styles.inputWithIcon : undefined]}
-        placeholderTextColor={colors.textTertiary}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        selectionColor={colors.primary}
-      />
-    </View>
-  );
-
-  return (
-    <View style={[styles.container, containerStyle]}>
-      {label && <Text style={styles.label}>{label}</Text>}
-
-      {useBlur ? (
-        <AnimatedView style={[styles.blurWrapper, animatedBorderStyle]}>
-          <BlurView
-            intensity={blur.light}
-            tint="dark"
-            style={styles.blurContainer}
-          >
-            {inputContent}
-          </BlurView>
-        </AnimatedView>
-      ) : (
-        <AnimatedView style={[styles.fallbackContainer, animatedBorderStyle]}>
-          {inputContent}
-        </AnimatedView>
-      )}
-
-      {error && <Text style={styles.error}>{error}</Text>}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    marginBottom: 16,
-  },
-  label: {
-    ...typography.subhead,
-    color: colors.textSecondary,
-    marginBottom: 8,
-    marginLeft: 4,
-  },
-  blurWrapper: {
-    borderRadius: radius.md,
-    borderWidth: 1,
-    overflow: 'hidden',
-  },
-  blurContainer: {
-    backgroundColor: colors.glass.background,
-  },
-  fallbackContainer: {
-    borderRadius: radius.md,
-    borderWidth: 1,
-    backgroundColor: colors.glass.backgroundLight,
-  },
-  inputWrapper: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  icon: {
-    paddingLeft: 16,
-  },
-  input: {
-    flex: 1,
-    padding: 16,
-    fontSize: 16,
-    color: colors.text,
-  },
-  inputWithIcon: {
-    paddingLeft: 12,
-  },
-  error: {
-    ...typography.caption1,
-    color: colors.error,
-    marginTop: 6,
-    marginLeft: 4,
-  },
-});
-
-export default GlassInput;
+import React, { useState } from 'react';
+import { StyleSheet, TextInput, View, Text, TextInputProps, ViewStyle, Platform } from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  interpolateColor,
+} from 'react-native-reanimated';
+import { colors, radius, animations, typography } from '../../theme';
+
+interface GlassInputProps extends Omit<TextInputProps, 'style'> {
+  label?: string;
+  error?: string;
+  containerStyle?: ViewStyle;
+  icon?: React.ReactNode;
+}
+
+const AnimatedView = Animated.View;
+
+export function GlassInput({
+  label,
+  error,
+  containerStyle,
+  icon,
+  ...props
+}: GlassInputProps) {
+  const [isFocused, setIsFocused] = useState(false);
+  const focusAnim = useSharedValue(0);
+
+  const handleFocus = (e: any) => {
+    setIsFocused(true);
+    focusAnim.value = withTiming(1, { duration: animations.timing.fast });
+    props.onFocus?.(e);
+  };
+
+  const handleBlur = (e: any) => {
+    setIsFocused(false);
+    focusAnim.value = withTiming(0, { duration: animations.timing.fast });
+    props.onBlur?.(e);
+  };
+
+  const animatedContainerStyle = useAnimatedStyle(() => ({
+    backgroundColor: interpolateColor(
+      focusAnim.value,
+      [0, 1],
+      [colors.backgroundLight, colors.backgroundLight] // Consistent flat background
+    ),
+    borderColor: interpolateColor(
+      focusAnim.value,
+      [0, 1],
+      [error ? colors.error : colors.border, error ? colors.error : colors.primary]
+    ),
+  }));
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      {label && <Text style={styles.label}>{label}</Text>}
+
+      <AnimatedView style={[styles.inputContainer, animatedContainerStyle]}>
+        <View style={styles.inputWrapper}>
+          {icon && <View style={styles.icon}>{icon}</View>}
+          <TextInput
+            {...props}
+            style={[styles.input, icon ? styles.inputWithIcon : undefined]}
+            placeholderTextColor={colors.textTertiary}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            selectionColor={colors.primary}
+          />
+        </View>
+      </AnimatedView>
+
+      {error && <Text style={styles.error}>{error}</Text>}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 16,
+  },
+  label: {
+    ...typography.subhead,
+    color: colors.textSecondary,
+    marginBottom: 8,
+    marginLeft: 4,
+  },
+  inputContainer: {
+    borderRadius: radius.lg,
+    borderWidth: 1,
+    overflow: 'hidden',
+  },
+  inputWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  icon: {
+    paddingLeft: 16,
+  },
+  input: {
+    flex: 1,
+    padding: 16,
+    fontSize: 16,
+    color: colors.text,
+  },
+  inputWithIcon: {
+    paddingLeft: 12,
+  },
+  error: {
+    ...typography.caption1,
+    color: colors.error,
+    marginTop: 6,
+    marginLeft: 4,
+  },
+});
+
+export default GlassInput;
diff --git a/apps/mobile/src/components/ui/GlassToggle.tsx b/apps/mobile/src/components/ui/GlassToggle.tsx
index 5788cf1..f67229d 100644
--- a/apps/mobile/src/components/ui/GlassToggle.tsx
+++ b/apps/mobile/src/components/ui/GlassToggle.tsx
@@ -66,11 +66,18 @@ export function GlassToggle({
     const backgroundColor = interpolateColor(
       progress.value,
       [0, 1],
-      ['rgba(255, 255, 255, 0.1)', 'transparent'] // We use LinearGradient for active state
+      [colors.backgroundLight, 'transparent'] // Use backgroundLight for inactive
     );
     
+    const borderColor = interpolateColor(
+      progress.value,
+      [0, 1],
+      [colors.border, 'transparent'] // Use standard border for inactive
+    );
+
     return {
       backgroundColor,
+      borderColor,
     };
   });
 
@@ -114,7 +121,7 @@ const styles = StyleSheet.create({
     height: '100%',
     borderRadius: radius.full,
     borderWidth: 1,
-    borderColor: 'rgba(255, 255, 255, 0.1)',
+    borderColor: colors.border, // Use standard border
     overflow: 'hidden',
     justifyContent: 'center',
     padding: PADDING,
diff --git a/apps/mobile/src/components/ui/IntensitySlider.tsx b/apps/mobile/src/components/ui/IntensitySlider.tsx
index 83d5d5a..ddc7d61 100644
--- a/apps/mobile/src/components/ui/IntensitySlider.tsx
+++ b/apps/mobile/src/components/ui/IntensitySlider.tsx
@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from 'react';
-import { View, Text, StyleSheet, Pressable, Platform, Image, Modal, TouchableOpacity } from 'react-native';
+import { View, Text, StyleSheet, Pressable, Platform, Modal, TouchableOpacity } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { LinearGradient } from 'expo-linear-gradient';
 import { BlurView } from 'expo-blur';
+import { Image } from 'expo-image';
 import Animated, {
     useAnimatedStyle,
     useSharedValue,
@@ -126,6 +127,9 @@ export function IntensitySlider({
                                             <Image
                                                 source={{ uri: partnerAvatar }}
                                                 style={styles.partnerAvatarSmall}
+                                                cachePolicy="memory-disk"
+                                                contentFit="cover"
+                                                transition={150}
                                             />
                                         ) : (
                                             <Ionicons name="heart" size={8} color={colors.secondary} />
@@ -189,7 +193,13 @@ export function IntensitySlider({
                         onPress={() => setShowInfoModal(true)}
                     >
                         {partnerAvatar ? (
-                            <Image source={{ uri: partnerAvatar }} style={styles.partnerAvatarTiny} />
+                            <Image
+                                source={{ uri: partnerAvatar }}
+                                style={styles.partnerAvatarTiny}
+                                cachePolicy="memory-disk"
+                                contentFit="cover"
+                                transition={150}
+                            />
                         ) : (
                             <View style={styles.partnerIconTiny}>
                                 <Ionicons name="person" size={10} color={colors.secondary} />
@@ -276,7 +286,13 @@ export function IntensitySlider({
 
                                     <View style={styles.comparisonPerson}>
                                         {partnerAvatar ? (
-                                            <Image source={{ uri: partnerAvatar }} style={styles.comparisonAvatarImage} />
+                                            <Image
+                                                source={{ uri: partnerAvatar }}
+                                                style={styles.comparisonAvatarImage}
+                                                cachePolicy="memory-disk"
+                                                contentFit="cover"
+                                                transition={150}
+                                            />
                                         ) : (
                                             <View style={[styles.comparisonAvatar, { backgroundColor: HEAT_COLORS[(partnerValue ?? 1) - 1] }]}>
                                                 <Text style={styles.comparisonEmoji}>{partnerLevel?.emoji}</Text>
@@ -388,13 +404,13 @@ const styles = StyleSheet.create({
         borderRadius: 18,
         alignItems: 'center',
         justifyContent: 'center',
-        backgroundColor: 'rgba(255, 255, 255, 0.05)',
+        backgroundColor: colors.backgroundLight, // Flat
         borderWidth: 2,
-        borderColor: 'rgba(255, 255, 255, 0.1)',
+        borderColor: colors.border,
     },
     levelIndicatorActive: {
-        backgroundColor: 'rgba(233, 69, 96, 0.15)',
-        borderColor: 'rgba(233, 69, 96, 0.3)',
+        backgroundColor: colors.background, // Nested
+        borderColor: colors.primary,
     },
     levelIndicatorPartner: {
         borderColor: colors.secondary,
@@ -435,15 +451,15 @@ const styles = StyleSheet.create({
         color: colors.secondary,
     },
     currentCard: {
-        backgroundColor: 'rgba(255, 255, 255, 0.05)',
+        backgroundColor: colors.backgroundLight, // Flat
         borderRadius: radius.md,
         padding: spacing.md,
         borderWidth: 1,
-        borderColor: 'rgba(255, 255, 255, 0.08)',
+        borderColor: colors.border,
     },
     currentCardWarning: {
-        borderColor: 'rgba(243, 156, 18, 0.3)',
-        backgroundColor: 'rgba(243, 156, 18, 0.05)',
+        borderColor: colors.warning,
+        backgroundColor: colors.background, // Use background for warning state to differentiate
     },
     currentHeader: {
         flexDirection: 'row',
@@ -486,7 +502,7 @@ const styles = StyleSheet.create({
         marginTop: spacing.sm,
         paddingTop: spacing.sm,
         borderTopWidth: 1,
-        borderTopColor: 'rgba(255, 255, 255, 0.08)',
+        borderTopColor: colors.border,
     },
     partnerAvatarTiny: {
         width: 20,
@@ -509,7 +525,6 @@ const styles = StyleSheet.create({
     mismatchTextWarning: {
         color: colors.warning,
     },
-    // Modal styles
     modalOverlay: {
         flex: 1,
         backgroundColor: 'rgba(0, 0, 0, 0.7)',
@@ -522,13 +537,13 @@ const styles = StyleSheet.create({
         maxWidth: 360,
         borderRadius: radius.xl,
         overflow: 'hidden',
-        backgroundColor: Platform.OS === 'ios' ? 'transparent' : colors.backgroundLight,
+        backgroundColor: colors.backgroundLight, // Flat
         borderWidth: 1,
-        borderColor: 'rgba(255, 255, 255, 0.1)',
+        borderColor: colors.border,
     },
     modalInner: {
         padding: spacing.lg,
-        backgroundColor: Platform.OS === 'ios' ? 'rgba(26, 26, 46, 0.85)' : 'transparent',
+        backgroundColor: colors.backgroundLight,
     },
     modalHeader: {
         alignItems: 'center',
@@ -551,7 +566,7 @@ const styles = StyleSheet.create({
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'center',
-        backgroundColor: 'rgba(255, 255, 255, 0.05)',
+        backgroundColor: colors.background,
         borderRadius: radius.lg,
         padding: spacing.md,
         marginBottom: spacing.lg,
@@ -627,12 +642,12 @@ const styles = StyleSheet.create({
         color: colors.warning,
     },
     modalCloseButton: {
-        backgroundColor: colors.glass.background,
+        backgroundColor: colors.background,
         borderRadius: radius.md,
         paddingVertical: spacing.md,
         alignItems: 'center',
         borderWidth: 1,
-        borderColor: colors.glass.border,
+        borderColor: colors.border,
     },
     modalCloseText: {
         ...typography.subhead,
diff --git a/apps/mobile/src/constants/onboarding.ts b/apps/mobile/src/constants/onboarding.ts
new file mode 100644
index 0000000..1233b62
--- /dev/null
+++ b/apps/mobile/src/constants/onboarding.ts
@@ -0,0 +1,44 @@
+/**
+ * Required onboarding version.
+ *
+ * Bump this number when you need existing users to go through onboarding again
+ * to collect new required data (e.g., profile pictures, new fields).
+ *
+ * Version history:
+ * - 1: Initial onboarding (avatar, name, gender, purpose, content prefs, notifications)
+ * - 2: Made avatar mandatory for all users
+ */
+export const REQUIRED_ONBOARDING_VERSION = 2;
+
+/**
+ * RevenueCat offering identifier for the onboarding discount paywall.
+ *
+ * Create this offering in RevenueCat dashboard with discounted products.
+ * If the offering doesn't exist, the paywall will fall back to the default offering.
+ *
+ * To set up:
+ * 1. Create discounted products in App Store Connect (e.g., "sauci_annual_onboarding")
+ * 2. In RevenueCat → Products, add these products
+ * 3. In RevenueCat → Offerings, create offering "onboarding_promo" with the discounted products
+ */
+export const ONBOARDING_OFFERING_ID = "onboarding_promo";
+
+/**
+ * Check if a user needs to complete onboarding based on their current version
+ */
+export function needsOnboarding(
+    onboardingCompleted: boolean | undefined,
+    onboardingVersion: number | undefined
+): boolean {
+    // Never completed onboarding
+    if (!onboardingCompleted) {
+        return true;
+    }
+
+    // Completed an older version - need to re-onboard
+    if ((onboardingVersion ?? 0) < REQUIRED_ONBOARDING_VERSION) {
+        return true;
+    }
+
+    return false;
+}
diff --git a/apps/mobile/src/features/chat/ChatScreen.tsx b/apps/mobile/src/features/chat/ChatScreen.tsx
index 8479e7a..d9b8b5d 100644
--- a/apps/mobile/src/features/chat/ChatScreen.tsx
+++ b/apps/mobile/src/features/chat/ChatScreen.tsx
@@ -308,7 +308,7 @@ export const ChatScreen: React.FC = () => {
 
     return (
         <GradientBackground>
-            {/* Ambient Orbs */}
+            {/* Ambient Orbs - Commented out for flat look
             <Animated.View style={[styles.ambientOrb, styles.orbTopRight, orbStyle1]} pointerEvents="none">
                 <LinearGradient
                     colors={[colors.premium.goldGlow, 'transparent']}
@@ -325,6 +325,7 @@ export const ChatScreen: React.FC = () => {
                     end={{ x: 0, y: 0 }}
                 />
             </Animated.View>
+            */}
 
             <KeyboardAvoidingView
                 style={styles.keyboardAvoiding}
@@ -343,6 +344,8 @@ export const ChatScreen: React.FC = () => {
                 <ChatMessages
                     messages={messages}
                     userId={user?.id}
+                    userName={user?.name ?? undefined}
+                    partnerName={partner?.name ?? undefined}
                     match={match}
                     uploadStatus={uploadStatus}
                     partnerTyping={partnerTyping}
@@ -357,15 +360,20 @@ export const ChatScreen: React.FC = () => {
                     entering={FadeInDown.duration(300)}
                     style={[styles.inputWrapper, { paddingBottom: insets.bottom || spacing.sm }]}
                 >
-                    {/* Gradient background */}
+                    {/* Flat background */}
+                    <View style={[StyleSheet.absoluteFill, { backgroundColor: colors.backgroundLight, borderTopWidth: 1, borderTopColor: colors.border }]} />
+                    
+                    {/* Gradient background - removed
                     <LinearGradient
                         colors={['rgba(22, 33, 62, 0.9)', 'rgba(13, 13, 26, 0.95)']}
                         style={StyleSheet.absoluteFill}
                         start={{ x: 0, y: 0 }}
                         end={{ x: 0, y: 1 }}
                     />
-                    {/* Top border glow */}
+                    */}
+                    {/* Top border glow - removed
                     <View style={styles.inputWrapperBorder} />
+                    */}
 
                     <InputBar
                         inputText={inputText}
diff --git a/apps/mobile/src/features/chat/components/ChatHeader.tsx b/apps/mobile/src/features/chat/components/ChatHeader.tsx
index 2e798fe..d5a0567 100644
--- a/apps/mobile/src/features/chat/components/ChatHeader.tsx
+++ b/apps/mobile/src/features/chat/components/ChatHeader.tsx
@@ -31,20 +31,25 @@ const ChatHeaderComponent: React.FC<ChatHeaderProps> = ({
             entering={FadeIn.duration(300)}
             style={[styles.header, { paddingTop: insets.top + spacing.sm }]}
         >
-            {/* Gradient background */}
+            {/* Flat background */}
+            <View style={[StyleSheet.absoluteFill, { backgroundColor: colors.background, borderBottomWidth: 1, borderBottomColor: colors.border }]} />
+            
+            {/* Gradient background - removed
             <LinearGradient
                 colors={['rgba(22, 33, 62, 0.8)', 'rgba(13, 13, 26, 0.6)']}
                 style={StyleSheet.absoluteFill}
                 start={{ x: 0, y: 0 }}
                 end={{ x: 0, y: 1 }}
             />
-            {/* Top silk highlight */}
+            */}
+            {/* Top silk highlight - removed
             <LinearGradient
                 colors={[`${ACCENT_RGBA}0.1)`, 'transparent']}
                 style={styles.headerSilkHighlight}
                 start={{ x: 0.5, y: 0 }}
                 end={{ x: 0.5, y: 1 }}
             />
+            */}
 
             <TouchableOpacity
                 onPress={onBack}
@@ -138,12 +143,25 @@ const styles = StyleSheet.create({
         width: 36,
         height: 36,
         borderRadius: 18,
-        backgroundColor: `${ACCENT_RGBA}0.1)`,
+        backgroundColor: colors.backgroundLight,
         borderWidth: 1,
-        borderColor: `${ACCENT_RGBA}0.2)`,
+        borderColor: colors.border,
         justifyContent: 'center',
         alignItems: 'center',
     },
+    // ...
+    headerSpacer: {
+        width: 40,
+    },
+    settingsButton: {
+        width: 40,
+        height: 40,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    headerBorderBottom: {
+        display: 'none',
+    },
     headerCenter: {
         flex: 1,
         flexDirection: 'row',
@@ -195,21 +213,5 @@ const styles = StyleSheet.create({
         ...typography.headline,
         color: colors.text,
     },
-    headerSpacer: {
-        width: 40,
-    },
-    settingsButton: {
-        width: 40,
-        height: 40,
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    headerBorderBottom: {
-        position: 'absolute',
-        bottom: 0,
-        left: 0,
-        right: 0,
-        height: 1,
-        backgroundColor: `${ACCENT_RGBA}0.15)`,
-    },
+
 });
diff --git a/apps/mobile/src/features/chat/components/ChatMessages.tsx b/apps/mobile/src/features/chat/components/ChatMessages.tsx
index 4570223..6000eeb 100644
--- a/apps/mobile/src/features/chat/components/ChatMessages.tsx
+++ b/apps/mobile/src/features/chat/components/ChatMessages.tsx
@@ -19,6 +19,8 @@ type Message = Database['public']['Tables']['messages']['Row'];
 interface ChatMessagesProps {
     messages: Message[];
     userId: string | undefined;
+    userName: string | undefined;
+    partnerName: string | undefined;
     match: Match | null;
     uploadStatus: UploadStatus | null;
     partnerTyping: boolean;
@@ -46,6 +48,8 @@ function isSameDay(date1: Date, date2: Date): boolean {
 const ChatMessagesComponent: React.FC<ChatMessagesProps> = ({
     messages,
     userId,
+    userName,
+    partnerName,
     match,
     uploadStatus,
     partnerTyping,
@@ -108,9 +112,9 @@ const ChatMessagesComponent: React.FC<ChatMessagesProps> = ({
     // Memoize ListFooterComponent to prevent recreation
     const listFooterComponent = useMemo(() => (
         <View style={styles.footerContainer}>
-            <MatchCard match={match} user={userObject} />
+            <MatchCard match={match} user={userObject} userName={userName} partnerName={partnerName} onImagePress={onImagePress} />
         </View>
-    ), [match, userObject]);
+    ), [match, userObject, userName, partnerName, onImagePress]);
 
     // Memoize ListEmptyComponent to prevent recreation
     const listEmptyComponent = useMemo(() => (
diff --git a/apps/mobile/src/features/chat/components/InputBar.tsx b/apps/mobile/src/features/chat/components/InputBar.tsx
index 03f0865..671acc5 100644
--- a/apps/mobile/src/features/chat/components/InputBar.tsx
+++ b/apps/mobile/src/features/chat/components/InputBar.tsx
@@ -203,45 +203,32 @@ const styles = StyleSheet.create({
         alignItems: 'center',
     },
     plusButton: {
-        backgroundColor: 'rgba(212, 175, 55, 0.1)',
+        backgroundColor: colors.backgroundLight,
         borderWidth: 1,
-        borderColor: 'rgba(212, 175, 55, 0.2)',
-    },
-    mediaMenuContainer: {
-        flexDirection: 'row',
-        overflow: 'hidden',
-        gap: spacing.xs,
-    },
-    mediaMenuItem: {
-        width: 40,
-        height: 40,
-        justifyContent: 'center',
-        alignItems: 'center',
+        borderColor: colors.border,
     },
+    // ...
     mediaMenuItemInner: {
         width: 36,
         height: 36,
         borderRadius: 18,
-        backgroundColor: 'rgba(255, 255, 255, 0.05)',
+        backgroundColor: colors.backgroundLight,
         borderWidth: 1,
-        borderColor: 'rgba(255, 255, 255, 0.1)',
+        borderColor: colors.border,
         justifyContent: 'center',
         alignItems: 'center',
     },
-    inputFieldWrapper: {
-        flex: 1,
-        position: 'relative',
-    },
+    // ...
     inputFieldBorder: {
         ...StyleSheet.absoluteFillObject,
         borderRadius: radius.xl,
         borderWidth: 1,
-        borderColor: 'rgba(212, 175, 55, 0.15)',
+        borderColor: colors.border,
     },
     input: {
         ...typography.body,
         color: colors.text,
-        backgroundColor: 'rgba(22, 33, 62, 0.6)',
+        backgroundColor: colors.background, // Nested flat background
         borderRadius: radius.xl,
         paddingHorizontal: spacing.md,
         paddingTop: 12,
@@ -255,7 +242,27 @@ const styles = StyleSheet.create({
         justifyContent: 'center',
         alignItems: 'center',
         overflow: 'hidden',
+        // Keep gradient for primary action to make it pop
     },
+    mediaMenuContainer: {
+        flexDirection: 'row',
+        overflow: 'hidden',
+        gap: spacing.xs,
+    },
+    mediaMenuItem: {
+        width: 40,
+        height: 40,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+
+    inputFieldWrapper: {
+        flex: 1,
+        position: 'relative',
+    },
+
+
+
     sendButtonHighlight: {
         position: 'absolute',
         top: 0,
diff --git a/apps/mobile/src/features/chat/components/MatchCard.tsx b/apps/mobile/src/features/chat/components/MatchCard.tsx
index 25a588b..46742fb 100644
--- a/apps/mobile/src/features/chat/components/MatchCard.tsx
+++ b/apps/mobile/src/features/chat/components/MatchCard.tsx
@@ -1,12 +1,16 @@
-import React, { useRef } from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import React, { useRef, useState, useEffect } from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, ActivityIndicator } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { LinearGradient } from 'expo-linear-gradient';
+import { Image } from 'expo-image';
+import { Audio } from 'expo-av';
 import Animated, { FadeInDown } from 'react-native-reanimated';
 
 import { DecorativeSeparator } from '../../../components/ui';
 import { colors, gradients, spacing, radius, typography } from '../../../theme';
 import { Match } from '../types';
+import { ResponseData } from '@sauci/shared';
+import { getCachedSignedUrl, getStoragePath } from '../../../lib/imageCache';
 
 // Premium color palette
 const ACCENT = colors.premium.gold;
@@ -15,9 +19,356 @@ const ACCENT_RGBA = 'rgba(212, 175, 55, ';
 interface MatchCardProps {
     match: Match | null;
     user: { id: string } | null;
+    userName?: string;
+    partnerName?: string;
+    onImagePress?: (uri: string) => void;
 }
 
-const MatchCardComponent: React.FC<MatchCardProps> = ({ match, user }) => {
+/**
+ * Helper function to get display text for who_likely choices
+ */
+function getChoiceDisplay(chosenUserId: string, userId: string, userName: string, partnerName: string): string {
+    return chosenUserId === userId ? userName : partnerName;
+}
+
+/**
+ * Component to render text_answer response summary
+ */
+const TextAnswerDisplay: React.FC<{
+    responseSummary: Record<string, ResponseData>;
+    userId: string;
+    partnerName: string;
+}> = ({ responseSummary, userId, partnerName }) => {
+    const entries = Object.entries(responseSummary);
+
+    return (
+        <View style={styles.responseSummaryContainer}>
+            {entries.map(([responderId, data]) => {
+                if (data.type !== 'text_answer') return null;
+                const isUser = responderId === userId;
+                const name = isUser ? 'You' : partnerName;
+
+                return (
+                    <View key={responderId} style={styles.textResponseCard}>
+                        <Text style={styles.textResponseName}>{name}</Text>
+                        <View style={[
+                            styles.textBubble,
+                            isUser ? styles.textBubbleUser : styles.textBubblePartner
+                        ]}>
+                            <Text style={styles.textBubbleText}>"{data.text}"</Text>
+                        </View>
+                    </View>
+                );
+            })}
+        </View>
+    );
+};
+
+/**
+ * Component to render photo response summary
+ */
+const PhotoDisplay: React.FC<{
+    responseSummary: Record<string, ResponseData>;
+    userId: string;
+    partnerName: string;
+    onImagePress?: (uri: string) => void;
+}> = ({ responseSummary, userId, partnerName, onImagePress }) => {
+    const [photoUrls, setPhotoUrls] = useState<Record<string, string>>({});
+    const [loadingUrls, setLoadingUrls] = useState(true);
+    const [loadingImages, setLoadingImages] = useState<Record<string, boolean>>({});
+
+    useEffect(() => {
+        const fetchPhotoUrls = async () => {
+            // Fetch all signed URLs in parallel for faster loading
+            const photoEntries: Array<[string, { type: 'photo'; media_path: string }]> = [];
+            for (const [responderId, data] of Object.entries(responseSummary)) {
+                if (data.type === 'photo') {
+                    photoEntries.push([responderId, data]);
+                }
+            }
+
+            const urlPromises = photoEntries.map(async ([responderId, data]) => {
+                try {
+                    const storagePath = getStoragePath(data.media_path);
+                    const signedUrl = await getCachedSignedUrl(storagePath, 'response-media');
+                    return { responderId, signedUrl };
+                } catch (err) {
+                    console.error('Failed to get photo URL:', err);
+                    return { responderId, signedUrl: null };
+                }
+            });
+
+            const results = await Promise.all(urlPromises);
+            const urls: Record<string, string> = {};
+
+            // Collect URLs and prefetch images
+            const prefetchPromises: Promise<boolean>[] = [];
+            for (const { responderId, signedUrl } of results) {
+                if (signedUrl) {
+                    urls[responderId] = signedUrl;
+                    // Prefetch image for faster display
+                    prefetchPromises.push(Image.prefetch(signedUrl));
+                }
+            }
+
+            // Set URLs immediately, prefetch in background
+            setPhotoUrls(urls);
+            setLoadingUrls(false);
+
+            // Initialize loading state for each image
+            const initialLoading: Record<string, boolean> = {};
+            for (const responderId of Object.keys(urls)) {
+                initialLoading[responderId] = true;
+            }
+            setLoadingImages(initialLoading);
+
+            // Wait for prefetch to complete (non-blocking)
+            Promise.all(prefetchPromises).catch(() => {
+                // Prefetch failures are non-critical
+            });
+        };
+
+        fetchPhotoUrls();
+    }, [responseSummary]);
+
+    const handleImageLoad = (responderId: string) => {
+        setLoadingImages(prev => ({ ...prev, [responderId]: false }));
+    };
+
+    const entries = Object.entries(responseSummary);
+
+    return (
+        <View style={styles.photoContainer}>
+            {entries.map(([responderId, data]) => {
+                if (data.type !== 'photo') return null;
+                const isUser = responderId === userId;
+                const name = isUser ? 'You' : partnerName;
+                const photoUrl = photoUrls[responderId];
+                const isImageLoading = loadingImages[responderId];
+
+                return (
+                    <View key={responderId} style={styles.photoCard}>
+                        <Text style={styles.photoName}>{name}</Text>
+                        <TouchableOpacity
+                            style={styles.photoThumbnailContainer}
+                            onPress={() => photoUrl && onImagePress?.(photoUrl)}
+                            disabled={!photoUrl}
+                            activeOpacity={0.8}
+                            accessibilityRole="button"
+                            accessibilityLabel={`View ${name}'s photo full screen`}
+                        >
+                            {loadingUrls ? (
+                                <View style={styles.photoPlaceholder}>
+                                    <ActivityIndicator size="small" color={colors.premium.gold} />
+                                </View>
+                            ) : photoUrl ? (
+                                <>
+                                    <Image
+                                        source={{ uri: photoUrl }}
+                                        style={styles.photoThumbnail}
+                                        contentFit="cover"
+                                        cachePolicy="disk"
+                                        transition={200}
+                                        onLoad={() => handleImageLoad(responderId)}
+                                    />
+                                    {isImageLoading && (
+                                        <View style={styles.photoLoadingOverlay}>
+                                            <ActivityIndicator size="small" color={colors.premium.gold} />
+                                        </View>
+                                    )}
+                                </>
+                            ) : (
+                                <View style={styles.photoPlaceholder}>
+                                    <Ionicons name="image-outline" size={24} color={colors.textTertiary} />
+                                </View>
+                            )}
+                        </TouchableOpacity>
+                    </View>
+                );
+            })}
+        </View>
+    );
+};
+
+/**
+ * Component to render who_likely response summary
+ */
+const WhoLikelyDisplay: React.FC<{
+    responseSummary: Record<string, ResponseData>;
+    userId: string;
+    userName: string;
+    partnerName: string;
+}> = ({ responseSummary, userId, userName, partnerName }) => {
+    const entries = Object.entries(responseSummary);
+
+    return (
+        <View style={styles.whoLikelyContainer}>
+            {entries.map(([responderId, data]) => {
+                if (data.type !== 'who_likely') return null;
+                const isUser = responderId === userId;
+                const voterName = isUser ? 'You' : partnerName;
+                const choiceName = getChoiceDisplay(data.chosen_user_id, userId, userName, partnerName);
+
+                return (
+                    <View key={responderId} style={styles.whoLikelyCard}>
+                        <Text style={styles.whoLikelyVoter}>{voterName} chose:</Text>
+                        <LinearGradient
+                            colors={gradients.premiumRose as [string, string]}
+                            style={styles.whoLikelyChoiceBadge}
+                            start={{ x: 0, y: 0 }}
+                            end={{ x: 1, y: 1 }}
+                        >
+                            <Text style={styles.whoLikelyChoiceText}>{choiceName}</Text>
+                        </LinearGradient>
+                    </View>
+                );
+            })}
+        </View>
+    );
+};
+
+/**
+ * Component to render audio response summary
+ */
+const AudioDisplay: React.FC<{
+    responseSummary: Record<string, ResponseData>;
+    userId: string;
+    partnerName: string;
+}> = ({ responseSummary, userId, partnerName }) => {
+    const [audioUrls, setAudioUrls] = useState<Record<string, string>>({});
+    const [playingId, setPlayingId] = useState<string | null>(null);
+    const [sounds, setSounds] = useState<Record<string, Audio.Sound>>({});
+
+    useEffect(() => {
+        const fetchAudioUrls = async () => {
+            const urls: Record<string, string> = {};
+
+            for (const [responderId, data] of Object.entries(responseSummary)) {
+                if (data.type === 'audio' && data.media_path) {
+                    try {
+                        const storagePath = getStoragePath(data.media_path);
+                        const signedUrl = await getCachedSignedUrl(storagePath, 'response-media');
+
+                        if (signedUrl) {
+                            urls[responderId] = signedUrl;
+                        }
+                    } catch (err) {
+                        console.error('Failed to get audio URL:', err);
+                    }
+                }
+            }
+
+            setAudioUrls(urls);
+        };
+
+        fetchAudioUrls();
+
+        // Cleanup sounds on unmount
+        return () => {
+            Object.values(sounds).forEach(sound => {
+                sound.unloadAsync();
+            });
+        };
+    }, [responseSummary]);
+
+    const formatDuration = (seconds: number) => {
+        const mins = Math.floor(seconds / 60);
+        const secs = Math.floor(seconds % 60);
+        return `${mins}:${secs.toString().padStart(2, '0')}`;
+    };
+
+    const handlePlayPause = async (responderId: string) => {
+        const audioUrl = audioUrls[responderId];
+        if (!audioUrl) return;
+
+        // If already playing this one, pause it
+        if (playingId === responderId && sounds[responderId]) {
+            await sounds[responderId].pauseAsync();
+            setPlayingId(null);
+            return;
+        }
+
+        // Stop any currently playing audio
+        if (playingId && sounds[playingId]) {
+            await sounds[playingId].stopAsync();
+        }
+
+        // Play the selected audio
+        try {
+            let sound = sounds[responderId];
+            if (!sound) {
+                const { sound: newSound } = await Audio.Sound.createAsync(
+                    { uri: audioUrl },
+                    { shouldPlay: false },
+                    (status) => {
+                        if (status.isLoaded && status.didJustFinish) {
+                            setPlayingId(null);
+                        }
+                    }
+                );
+                sound = newSound;
+                setSounds(prev => ({ ...prev, [responderId]: sound }));
+            }
+            await sound.playFromPositionAsync(0);
+            setPlayingId(responderId);
+        } catch (err) {
+            console.error('Failed to play audio:', err);
+        }
+    };
+
+    const entries = Object.entries(responseSummary);
+
+    return (
+        <View style={styles.audioContainer}>
+            {entries.map(([responderId, data]) => {
+                if (data.type !== 'audio') return null;
+                const isUser = responderId === userId;
+                const name = isUser ? 'You' : partnerName;
+                const audioUrl = audioUrls[responderId];
+                const isPlaying = playingId === responderId;
+
+                return (
+                    <View key={responderId} style={styles.audioCard}>
+                        <Text style={styles.audioName}>{name}</Text>
+                        <TouchableOpacity
+                            style={styles.audioPlayer}
+                            onPress={() => handlePlayPause(responderId)}
+                            disabled={!audioUrl}
+                        >
+                            <View style={[
+                                styles.audioPlayButton,
+                                isPlaying && styles.audioPlayButtonActive
+                            ]}>
+                                <Ionicons
+                                    name={isPlaying ? 'pause' : 'play'}
+                                    size={20}
+                                    color={colors.text}
+                                />
+                            </View>
+                            <View style={styles.audioWaveform}>
+                                {[...Array(5)].map((_, i) => (
+                                    <View
+                                        key={i}
+                                        style={[
+                                            styles.audioBar,
+                                            { height: 8 + (i % 3) * 8 },
+                                            isPlaying && styles.audioBarActive
+                                        ]}
+                                    />
+                                ))}
+                            </View>
+                            <Text style={styles.audioDuration}>
+                                {formatDuration(data.duration_seconds)}
+                            </Text>
+                        </TouchableOpacity>
+                    </View>
+                );
+            })}
+        </View>
+    );
+};
+
+const MatchCardComponent: React.FC<MatchCardProps> = ({ match, user, userName = 'You', partnerName = 'Partner', onImagePress }) => {
     // Track if animation has already played to prevent re-animation on re-renders
     const hasAnimatedRef = useRef(false);
     const shouldAnimate = !hasAnimatedRef.current;
@@ -29,6 +380,16 @@ const MatchCardComponent: React.FC<MatchCardProps> = ({ match, user }) => {
     if (!match?.question) return null;
 
     const isYesYes = match?.match_type === 'yes_yes';
+    const isBothAnswered = match?.match_type === 'both_answered';
+
+    // Determine the response type from response_summary
+    const getResponseType = (): ResponseData['type'] | null => {
+        if (!match.response_summary) return null;
+        const firstResponse = Object.values(match.response_summary)[0];
+        return firstResponse?.type || null;
+    };
+
+    const responseType = getResponseType();
 
     // Only animate on first render to prevent re-animation when list re-renders
     const enteringAnimation = shouldAnimate
@@ -41,7 +402,7 @@ const MatchCardComponent: React.FC<MatchCardProps> = ({ match, user }) => {
             style={styles.matchCardContainer}
         >
             <View style={styles.matchCard}>
-                {/* Card gradient background */}
+                {/* Card gradient background - removed for flat style
                 <LinearGradient
                     colors={isYesYes
                         ? ['rgba(212, 175, 55, 0.12)', 'rgba(184, 134, 11, 0.08)']
@@ -51,8 +412,9 @@ const MatchCardComponent: React.FC<MatchCardProps> = ({ match, user }) => {
                     start={{ x: 0, y: 0 }}
                     end={{ x: 1, y: 1 }}
                 />
+                */}
 
-                {/* Top glow for YES+YES */}
+                {/* Top glow for YES+YES - removed
                 {isYesYes && (
                     <LinearGradient
                         colors={[`${ACCENT_RGBA}0.15)`, 'transparent']}
@@ -61,10 +423,11 @@ const MatchCardComponent: React.FC<MatchCardProps> = ({ match, user }) => {
                         end={{ x: 0.5, y: 1 }}
                     />
                 )}
+                */}
 
                 {/* Match Label */}
                 <Text style={[styles.matchLabel, isYesYes && styles.matchLabelYesYes]}>
-                    {isYesYes ? "PERFECT MATCH" : "SOFT MATCH"}
+                    {isYesYes ? "PERFECT MATCH" : isBothAnswered ? "BOTH ANSWERED" : "SOFT MATCH"}
                 </Text>
 
                 {/* Decorative Separator */}
@@ -74,8 +437,57 @@ const MatchCardComponent: React.FC<MatchCardProps> = ({ match, user }) => {
                     marginVertical={spacing.md}
                 />
 
-                {/* Question and Responses - Show who answered what */}
-                {match.responses && match.responses.length > 0 ? (
+                {/* Question and Responses - Show based on match type and response type */}
+                {isBothAnswered && match.response_summary && responseType ? (
+                    // Render response summary for non-swipe question types
+                    <View style={styles.responseSummaryWrapper}>
+                        {/* Show the question text */}
+                        <Text style={styles.matchQuestionText}>
+                            "{match.question.text}"
+                        </Text>
+
+                        <DecorativeSeparator
+                            variant="rose"
+                            width="40%"
+                            marginVertical={spacing.sm}
+                        />
+
+                        {/* Render based on response type */}
+                        {responseType === 'text_answer' && (
+                            <TextAnswerDisplay
+                                responseSummary={match.response_summary}
+                                userId={user?.id || ''}
+                                partnerName={partnerName}
+                            />
+                        )}
+
+                        {responseType === 'photo' && (
+                            <PhotoDisplay
+                                responseSummary={match.response_summary}
+                                userId={user?.id || ''}
+                                partnerName={partnerName}
+                                onImagePress={onImagePress}
+                            />
+                        )}
+
+                        {responseType === 'audio' && (
+                            <AudioDisplay
+                                responseSummary={match.response_summary}
+                                userId={user?.id || ''}
+                                partnerName={partnerName}
+                            />
+                        )}
+
+                        {responseType === 'who_likely' && (
+                            <WhoLikelyDisplay
+                                responseSummary={match.response_summary}
+                                userId={user?.id || ''}
+                                userName={userName}
+                                partnerName={partnerName}
+                            />
+                        )}
+                    </View>
+                ) : match.responses && match.responses.length > 0 ? (
                     <View style={styles.responsesContainer}>
                         {(() => {
                             // Sort responses by created_at to determine who answered first
@@ -134,18 +546,13 @@ const MatchCardComponent: React.FC<MatchCardProps> = ({ match, user }) => {
                     </Text>
                 )}
 
-                {/* Premium border */}
-                <View style={[
-                    styles.matchCardBorder,
-                    isYesYes && styles.matchCardBorderYesYes
-                ]} pointerEvents="none" />
+                {/* Premium border removed */}
             </View>
         </Animated.View>
     );
 };
 
-// Wrap with React.memo for performance
-export const MatchCard = React.memo(MatchCardComponent);
+// ...
 
 const styles = StyleSheet.create({
     matchCardContainer: {
@@ -153,6 +560,9 @@ const styles = StyleSheet.create({
         marginTop: spacing.md,
         borderRadius: radius.lg,
         overflow: 'hidden',
+        borderWidth: 1,
+        borderColor: colors.border,
+        backgroundColor: colors.backgroundLight,
     },
     matchCard: {
         borderRadius: radius.lg,
@@ -160,14 +570,81 @@ const styles = StyleSheet.create({
         paddingHorizontal: spacing.md,
         alignItems: 'center',
         overflow: 'hidden',
+        backgroundColor: colors.backgroundLight,
     },
     matchCardGlow: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        height: 60,
+        display: 'none',
     },
+    // ...
+    responseCard: {
+        backgroundColor: colors.background, // Nested
+        borderRadius: radius.md,
+        padding: spacing.sm,
+        borderWidth: 1,
+        borderColor: colors.border,
+    },
+    // ...
+    matchCardBorder: {
+        display: 'none',
+    },
+    matchCardBorderYesYes: {
+        display: 'none',
+    },
+    // ...
+    textBubbleUser: {
+        backgroundColor: colors.background,
+        borderWidth: 1,
+        borderColor: colors.primary,
+        alignSelf: 'flex-end',
+    },
+    textBubblePartner: {
+        backgroundColor: colors.background,
+        borderWidth: 1,
+        borderColor: colors.border,
+        alignSelf: 'flex-start',
+    },
+    // ...
+    photoPlaceholder: {
+        width: '100%',
+        height: '100%',
+        backgroundColor: colors.background,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    // ...
+    whoLikelyCard: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        backgroundColor: colors.background,
+        borderRadius: radius.md,
+        padding: spacing.sm,
+        borderWidth: 1,
+        borderColor: colors.border,
+    },
+    // ...
+    audioPlayer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: colors.background,
+        borderRadius: radius.lg,
+        padding: spacing.sm,
+        gap: spacing.sm,
+        borderWidth: 1,
+        borderColor: colors.border,
+    },
+    audioPlayButton: {
+        width: 36,
+        height: 36,
+        borderRadius: 18,
+        backgroundColor: colors.backgroundLight,
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderWidth: 1,
+        borderColor: colors.border,
+    },
+
+
     matchLabel: {
         ...typography.caption2,
         fontWeight: '700',
@@ -189,13 +666,7 @@ const styles = StyleSheet.create({
         width: '100%',
         gap: spacing.sm,
     },
-    responseCard: {
-        backgroundColor: 'rgba(255, 255, 255, 0.03)',
-        borderRadius: radius.md,
-        padding: spacing.sm,
-        borderWidth: 1,
-        borderColor: 'rgba(255, 255, 255, 0.06)',
-    },
+
     responseHeader: {
         flexDirection: 'row',
         alignItems: 'center',
@@ -246,17 +717,151 @@ const styles = StyleSheet.create({
         fontStyle: 'italic',
         lineHeight: 18,
     },
-    matchCardBorder: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        borderRadius: radius.lg,
-        borderWidth: 1,
-        borderColor: `rgba(232, 164, 174, 0.2)`,
+
+
+
+    // Response summary styles for non-swipe question types
+    responseSummaryWrapper: {
+        width: '100%',
+        alignItems: 'center',
     },
-    matchCardBorderYesYes: {
-        borderColor: `${ACCENT_RGBA}0.25)`,
+    responseSummaryContainer: {
+        width: '100%',
+        gap: spacing.sm,
+    },
+
+    // Text answer styles
+    textResponseCard: {
+        width: '100%',
+        gap: spacing.xs,
+    },
+    textResponseName: {
+        ...typography.caption2,
+        fontWeight: '600',
+        color: colors.textSecondary,
+        textTransform: 'uppercase',
+        letterSpacing: 1,
+    },
+    textBubble: {
+        paddingHorizontal: spacing.md,
+        paddingVertical: spacing.sm,
+        borderRadius: radius.md,
+        maxWidth: '100%',
+    },
+
+
+    textBubbleText: {
+        ...typography.subhead,
+        color: colors.text,
+        fontStyle: 'italic',
+        lineHeight: 20,
+    },
+
+    // Photo styles
+    photoContainer: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        gap: spacing.md,
+        width: '100%',
+    },
+    photoCard: {
+        alignItems: 'center',
+        gap: spacing.xs,
+        flex: 1,
+        maxWidth: 120,
+    },
+    photoName: {
+        ...typography.caption2,
+        fontWeight: '600',
+        color: colors.textSecondary,
+        textTransform: 'uppercase',
+        letterSpacing: 1,
+    },
+    photoThumbnailContainer: {
+        width: 80,
+        height: 80,
+        borderRadius: radius.md,
+        overflow: 'hidden',
+        borderWidth: 2,
+        borderColor: 'rgba(232, 164, 174, 0.3)',
+    },
+    photoThumbnail: {
+        width: '100%',
+        height: '100%',
+    },
+    photoLoadingOverlay: {
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+
+
+    // Who likely styles
+    whoLikelyContainer: {
+        width: '100%',
+        gap: spacing.sm,
+    },
+
+    whoLikelyVoter: {
+        ...typography.caption1,
+        fontWeight: '500',
+        color: colors.textSecondary,
+    },
+    whoLikelyChoiceBadge: {
+        paddingHorizontal: spacing.md,
+        paddingVertical: spacing.xs,
+        borderRadius: radius.full,
+    },
+    whoLikelyChoiceText: {
+        ...typography.caption1,
+        fontWeight: '700',
+        color: colors.text,
+        letterSpacing: 0.5,
+    },
+    // Audio display styles
+    audioContainer: {
+        width: '100%',
+        gap: spacing.md,
+    },
+    audioCard: {
+        width: '100%',
+        gap: spacing.xs,
+    },
+    audioName: {
+        ...typography.caption1,
+        fontWeight: '600',
+        color: colors.textSecondary,
+        textAlign: 'center',
+    },
+
+
+    audioPlayButtonActive: {
+        backgroundColor: colors.primary,
+    },
+    audioWaveform: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 3,
+        height: 32,
+    },
+    audioBar: {
+        width: 4,
+        backgroundColor: 'rgba(232, 164, 174, 0.3)',
+        borderRadius: radius.full,
+    },
+    audioBarActive: {
+        backgroundColor: colors.primary,
+    },
+    audioDuration: {
+        ...typography.caption1,
+        color: colors.textTertiary,
+        fontVariant: ['tabular-nums'],
+        minWidth: 35,
+        textAlign: 'right',
     },
 });
+
+export { MatchCardComponent as MatchCard };
diff --git a/apps/mobile/src/features/chat/components/MessageBubble.tsx b/apps/mobile/src/features/chat/components/MessageBubble.tsx
index b2f643d..2d23991 100644
--- a/apps/mobile/src/features/chat/components/MessageBubble.tsx
+++ b/apps/mobile/src/features/chat/components/MessageBubble.tsx
@@ -51,13 +51,14 @@ const MessageBubbleComponent = ({ isMe, index, children, onLongPress }: MessageB
                         start={{ x: 0, y: 0 }}
                         end={{ x: 1, y: 1 }}
                     >
-                        {/* Silk highlight */}
+                        {/* Silk highlight removed for flat look
                         <LinearGradient
                             colors={['rgba(255, 255, 255, 0.15)', 'transparent']}
                             style={styles.bubbleSilkHighlight}
                             start={{ x: 0.5, y: 0 }}
                             end={{ x: 0.5, y: 1 }}
                         />
+                        */}
                         {children}
                     </LinearGradient>
                 </TouchableOpacity>
@@ -72,20 +73,22 @@ const MessageBubbleComponent = ({ isMe, index, children, onLongPress }: MessageB
                     accessibilityHint="Long press to report"
                 >
                     <View style={[styles.bubble, styles.theirBubble]}>
-                        {/* Subtle gradient background */}
+                        {/* Subtle gradient background removed
                         <LinearGradient
                             colors={['rgba(22, 33, 62, 0.6)', 'rgba(13, 13, 26, 0.8)']}
                             style={StyleSheet.absoluteFill}
                             start={{ x: 0, y: 0 }}
                             end={{ x: 1, y: 1 }}
                         />
-                        {/* Silk highlight */}
+                        */}
+                        {/* Silk highlight removed
                         <LinearGradient
                             colors={[`${ACCENT_RGBA}0.08)`, 'transparent']}
                             style={styles.bubbleSilkHighlight}
                             start={{ x: 0.5, y: 0 }}
                             end={{ x: 0.5, y: 1 }}
                         />
+                        */}
                         {children}
                     </View>
                 </TouchableOpacity>
@@ -126,13 +129,10 @@ const styles = StyleSheet.create({
     theirBubble: {
         borderTopLeftRadius: radius.xs,
         borderWidth: 1,
-        borderColor: `${ACCENT_RGBA}0.15)`,
+        borderColor: colors.border,
+        backgroundColor: colors.backgroundLight,
     },
     bubbleSilkHighlight: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        height: 30,
+        display: 'none',
     },
 });
diff --git a/apps/mobile/src/features/chat/components/MessageContent.tsx b/apps/mobile/src/features/chat/components/MessageContent.tsx
index 329642a..5135631 100644
--- a/apps/mobile/src/features/chat/components/MessageContent.tsx
+++ b/apps/mobile/src/features/chat/components/MessageContent.tsx
@@ -10,7 +10,7 @@ import { Ionicons } from '@expo/vector-icons';
 import { colors, gradients, spacing, radius } from '../../../theme';
 import { MessageMeta } from './MessageMeta';
 import { ChatVideoPlayer } from './ChatVideoPlayer';
-import { supabase } from '../../../lib/supabase';
+import { getCachedSignedUrl, getStoragePath } from '../../../lib/imageCache';
 import type { Message } from '../types';
 
 const ACCENT = colors.premium.gold;
@@ -67,14 +67,17 @@ const MessageContentComponent: React.FC<MessageContentProps> = ({
             setMediaLoading(true);
             setMediaError(false);
             try {
-                const { data, error } = await supabase.storage
-                    .from('chat-media')
-                    .createSignedUrl(item.media_path!, 3600); // 1 hour expiry
+                const storagePath = getStoragePath(item.media_path!);
+                const signedUrl = await getCachedSignedUrl(storagePath, 'chat-media');
 
-                if (error) throw error;
-                setMediaUri(data.signedUrl);
+                if (!signedUrl) {
+                    throw new Error('Missing signed URL for chat media');
+                }
+
+                setMediaUri(signedUrl);
             } catch (err) {
                 console.error('Failed to get media URL:', err);
+                setMediaUri(null);
                 setMediaError(true);
             } finally {
                 setMediaLoading(false);
diff --git a/apps/mobile/src/features/chat/types.ts b/apps/mobile/src/features/chat/types.ts
index 6e46b72..1c2cb36 100644
--- a/apps/mobile/src/features/chat/types.ts
+++ b/apps/mobile/src/features/chat/types.ts
@@ -1,4 +1,5 @@
 import { Database } from '../../types/supabase';
+import { ResponseData } from '@sauci/shared';
 
 /** Message type from database */
 export type Message = Database['public']['Tables']['messages']['Row'];
@@ -15,8 +16,10 @@ export interface Match {
     id: string;
     question_id: string;
     couple_id: string;
-    match_type: 'yes_yes' | 'yes_maybe' | 'maybe_maybe';
+    match_type: 'yes_yes' | 'yes_maybe' | 'maybe_maybe' | 'both_answered';
     created_at: string;
+    /** Summary of both partners' response data (keyed by user_id) for non-swipe questions */
+    response_summary?: Record<string, ResponseData> | null;
     question?: {
         id: string;
         text: string;
diff --git a/apps/mobile/src/features/profile/ProfileScreen.tsx b/apps/mobile/src/features/profile/ProfileScreen.tsx
index cf6a45f..ebd1c23 100644
--- a/apps/mobile/src/features/profile/ProfileScreen.tsx
+++ b/apps/mobile/src/features/profile/ProfileScreen.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { View, Text, StyleSheet, ScrollView, useWindowDimensions, Platform, Alert, TouchableOpacity } from 'react-native';
+import { BlurView } from 'expo-blur';
 import { useRouter } from 'expo-router';
 import { Ionicons } from '@expo/vector-icons';
 import Constants from 'expo-constants';
@@ -9,9 +10,9 @@ import { LinearGradient } from 'expo-linear-gradient';
 
 import { GradientBackground } from '../../components/ui';
 import { Paywall } from '../../components/paywall';
+import { CompactHeader } from '../../components/discovery';
 import { colors, featureColors, spacing, typography, radius } from '../../theme';
 import { useAuthStore, useSubscriptionStore } from '../../store';
-import { resetSwipeTutorial } from '../../lib/swipeTutorialSeen';
 import { resetMatchesTutorial } from '../../lib/matchesTutorialSeen';
 import { supabase } from '../../lib/supabase';
 
@@ -29,12 +30,13 @@ export function ProfileScreen() {
     const { width } = useWindowDimensions();
     const isWideScreen = width > MAX_CONTENT_WIDTH;
 
-    const { user, partner, fetchUser, isAnonymous } = useAuthStore();
+    const { user, partner, couple, fetchUser, isAnonymous } = useAuthStore();
     const { subscription } = useSubscriptionStore();
     const settings = useProfileSettings();
 
     // Paywall state
     const [showPaywall, setShowPaywall] = useState(false);
+    const [headerHeight, setHeaderHeight] = useState(130);
 
     // Derived state
     const isOwnSubscription = subscription.isProUser || user?.is_premium;
@@ -61,28 +63,31 @@ export function ProfileScreen() {
 
     return (
         <GradientBackground>
+            <View
+                style={[styles.stickyHeader, isWideScreen && styles.stickyHeaderWide]}
+                onLayout={(e) => setHeaderHeight(e.nativeEvent.layout.height)}
+            >
+                <BlurView intensity={80} tint="dark" style={StyleSheet.absoluteFill} />
+                <View style={[StyleSheet.absoluteFill, { backgroundColor: 'rgba(14, 14, 17, 0.85)' }]} />
+                <CompactHeader
+                    user={user}
+                    partner={partner}
+                    couple={couple}
+                    label="Settings"
+                    showGreeting={false}
+                    showPartnerBadge={false}
+                />
+            </View>
+
             <ScrollView
                 style={styles.container}
                 contentContainerStyle={[
                     styles.contentContainer,
                     isWideScreen && styles.contentContainerWide,
+                    { paddingTop: headerHeight },
                 ]}
                 showsVerticalScrollIndicator={false}
             >
-                {/* Header with user info (compact) */}
-                <Animated.View
-                    entering={FadeInDown.delay(100).duration(500)}
-                    style={styles.header}
-                >
-                    <Text style={styles.headerLabel}>YOUR SAUCI</Text>
-                    <Text style={styles.title}>Settings</Text>
-                    <View style={styles.separator}>
-                        <View style={styles.separatorLine} />
-                        <View style={styles.separatorDiamond} />
-                        <View style={styles.separatorLine} />
-                    </View>
-                </Animated.View>
-
                 {/* Compact Profile Preview */}
                 <Animated.View
                     entering={FadeInDown.delay(150).duration(500)}
@@ -213,16 +218,6 @@ export function ProfileScreen() {
                             showChevron={false}
                         />
                         <View style={styles.divider} />
-                        <MenuItem
-                            icon="refresh-outline"
-                            label="Reset Swipe Tutorial"
-                            description="Show the tutorial again"
-                            onPress={async () => {
-                                await resetSwipeTutorial();
-                                Alert.alert("Success", "Swipe tutorial has been reset.");
-                            }}
-                        />
-                        <View style={styles.divider} />
                         <MenuItem
                             icon="heart-outline"
                             label="Reset Matches Tutorial"
@@ -289,59 +284,31 @@ const styles = StyleSheet.create({
         width: '100%',
         maxWidth: MAX_CONTENT_WIDTH,
     },
-    header: {
-        paddingTop: Platform.OS === 'ios' ? 60 : 40,
-        paddingHorizontal: spacing.lg,
-        paddingBottom: spacing.md,
-        alignItems: 'center',
+    stickyHeader: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        zIndex: 10,
+        overflow: 'hidden',
     },
-    headerLabel: {
-        ...typography.caption2,
-        fontWeight: '600',
-        letterSpacing: 3,
-        color: colors.secondary,
-        marginBottom: spacing.xs,
-    },
-    title: {
-        ...typography.largeTitle,
-        color: colors.text,
-        textAlign: 'center',
-    },
-    separator: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginVertical: spacing.md,
-        width: 100,
-    },
-    separatorLine: {
-        flex: 1,
-        height: 1,
-        backgroundColor: 'rgba(155, 89, 182, 0.3)',
-    },
-    separatorDiamond: {
-        width: 6,
-        height: 6,
-        backgroundColor: colors.secondary,
-        transform: [{ rotate: '45deg' }],
-        marginHorizontal: spacing.sm,
-        opacity: 0.6,
+    stickyHeaderWide: {
+        left: '50%',
+        right: 'auto',
+        width: MAX_CONTENT_WIDTH,
+        transform: [{ translateX: -MAX_CONTENT_WIDTH / 2 }],
     },
     // Profile Preview
     profilePreview: {
         marginHorizontal: spacing.lg,
         marginBottom: spacing.lg,
-        backgroundColor: colors.glass.background,
+        backgroundColor: colors.backgroundLight, // Flat background
         borderRadius: radius.lg,
         borderWidth: 1,
-        borderColor: colors.glass.border,
+        borderColor: colors.border,
         overflow: 'hidden',
     },
-    profilePreviewContent: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        padding: spacing.md,
-    },
+    // ...
     avatarGradient: {
         width: 56,
         height: 56,
@@ -349,7 +316,26 @@ const styles = StyleSheet.create({
         padding: 2,
         justifyContent: 'center',
         alignItems: 'center',
+        // Removed shadow
     },
+    // ...
+    versionBadge: {
+        flexDirection: "row",
+        alignItems: "center",
+        backgroundColor: colors.backgroundLight, // Flat background
+        paddingHorizontal: spacing.md,
+        paddingVertical: spacing.sm,
+        borderRadius: radius.full,
+        gap: spacing.xs,
+        borderWidth: 1,
+        borderColor: colors.border,
+    },
+    profilePreviewContent: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: spacing.md,
+    },
+
     avatar: {
         width: '100%',
         height: '100%',
@@ -387,7 +373,7 @@ const styles = StyleSheet.create({
     },
     divider: {
         height: 1,
-        backgroundColor: colors.glass.border,
+        backgroundColor: colors.border,
         marginVertical: spacing.md,
     },
     // Version Badge
@@ -395,15 +381,7 @@ const styles = StyleSheet.create({
         alignItems: "center",
         marginTop: spacing.lg,
     },
-    versionBadge: {
-        flexDirection: "row",
-        alignItems: "center",
-        backgroundColor: colors.glass.background,
-        paddingHorizontal: spacing.md,
-        paddingVertical: spacing.sm,
-        borderRadius: radius.full,
-        gap: spacing.xs,
-    },
+
     version: {
         ...typography.caption1,
         color: colors.textTertiary,
diff --git a/apps/mobile/src/features/profile/components/CoupleStatus.tsx b/apps/mobile/src/features/profile/components/CoupleStatus.tsx
index 66a9817..39a84ba 100644
--- a/apps/mobile/src/features/profile/components/CoupleStatus.tsx
+++ b/apps/mobile/src/features/profile/components/CoupleStatus.tsx
@@ -204,11 +204,11 @@ const styles = StyleSheet.create({
         width: 48,
         height: 48,
         borderRadius: 24,
-        backgroundColor: colors.glass.background,
+        backgroundColor: colors.backgroundLight,
         justifyContent: 'center',
         alignItems: 'center',
         borderWidth: 2,
-        borderColor: colors.glass.border,
+        borderColor: colors.border,
         borderStyle: 'dashed',
     },
     rowTextContainer: {
@@ -234,16 +234,20 @@ const styles = StyleSheet.create({
         width: 36,
         height: 36,
         borderRadius: 18,
-        backgroundColor: colors.glass.background,
+        backgroundColor: colors.backgroundLight,
         justifyContent: 'center',
         alignItems: 'center',
+        borderWidth: 1,
+        borderColor: colors.border,
     },
     chevronContainer: {
         width: 28,
         height: 28,
         borderRadius: 14,
-        backgroundColor: colors.glass.background,
+        backgroundColor: colors.backgroundLight,
         justifyContent: 'center',
         alignItems: 'center',
+        borderWidth: 1,
+        borderColor: colors.border,
     },
 });
diff --git a/apps/mobile/src/features/profile/components/DangerZone.tsx b/apps/mobile/src/features/profile/components/DangerZone.tsx
index 6d2c3a7..557857a 100644
--- a/apps/mobile/src/features/profile/components/DangerZone.tsx
+++ b/apps/mobile/src/features/profile/components/DangerZone.tsx
@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 import { View, Text, StyleSheet, Modal, Platform, KeyboardAvoidingView, TouchableOpacity, ActivityIndicator, TextInput, ViewStyle } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import Animated, { FadeInDown } from 'react-native-reanimated';
-import { BlurView } from 'expo-blur';
 import { GlassCard, GlassButton } from '../../../components/ui';
 import { colors, spacing, radius, typography } from '../../../theme';
 
@@ -185,96 +184,90 @@ export const DangerZone: React.FC<DangerZoneProps> = ({
                 animationType="fade"
                 onRequestClose={closeResetModal}
             >
-                <BlurView
-                    intensity={Platform.OS === 'ios' ? 20 : 0}
-                    tint="dark"
-                    style={StyleSheet.absoluteFill}
+                <KeyboardAvoidingView
+                    behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+                    style={styles.modalOverlay}
                 >
-                    <KeyboardAvoidingView
-                        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-                        style={styles.modalOverlay}
-                    >
-                        <View style={styles.modalContent}>
-                            <View style={styles.modalHeader}>
-                                <View style={styles.warningModalIconContainer}>
-                                    <Ionicons name="refresh" size={32} color={colors.warning} />
-                                </View>
-                                <Text style={styles.modalTitle}>Reset Progress?</Text>
+                    <View style={styles.modalContent}>
+                        <View style={styles.modalHeader}>
+                            <View style={styles.warningModalIconContainer}>
+                                <Ionicons name="refresh" size={32} color={colors.warning} />
                             </View>
+                            <Text style={styles.modalTitle}>Reset Progress?</Text>
+                        </View>
 
-                            <Text style={styles.modalDescription}>
-                                This will permanently delete:
-                            </Text>
+                        <Text style={styles.modalDescription}>
+                            This will permanently delete:
+                        </Text>
 
-                            <View style={styles.warningList}>
-                                <View style={styles.deleteListItem}>
-                                    <Ionicons name="swap-horizontal" size={16} color={colors.warning} />
-                                    <Text style={styles.deleteListText}>All your swipes</Text>
-                                </View>
-                                <View style={styles.deleteListItem}>
-                                    <Ionicons name="heart" size={16} color={colors.warning} />
-                                    <Text style={styles.deleteListText}>All matches</Text>
-                                </View>
-                                <View style={styles.deleteListItem}>
-                                    <Ionicons name="chatbubbles" size={16} color={colors.warning} />
-                                    <Text style={styles.deleteListText}>All chat messages</Text>
-                                </View>
+                        <View style={styles.warningList}>
+                            <View style={styles.deleteListItem}>
+                                <Ionicons name="swap-horizontal" size={16} color={colors.warning} />
+                                <Text style={styles.deleteListText}>All your swipes</Text>
                             </View>
-
-                            <View style={styles.keepList}>
-                                <View style={styles.deleteListItem}>
-                                    <Ionicons name="checkmark-circle" size={16} color={colors.success} />
-                                    <Text style={styles.deleteListText}>Your partner connection stays</Text>
-                                </View>
+                            <View style={styles.deleteListItem}>
+                                <Ionicons name="heart" size={16} color={colors.warning} />
+                                <Text style={styles.deleteListText}>All matches</Text>
                             </View>
-
-                            <Text style={styles.confirmLabel}>
-                                Type <Text style={styles.warningKeyword}>RESET</Text> to confirm:
-                            </Text>
-
-                            <TextInput
-                                style={styles.warningInput}
-                                value={confirmText}
-                                onChangeText={setConfirmText}
-                                placeholder="Type RESET"
-                                placeholderTextColor={colors.textTertiary}
-                                autoCapitalize="characters"
-                                autoCorrect={false}
-                                editable={!isResetting}
-                            />
-
-                            <View style={styles.modalButtons}>
-                                <TouchableOpacity
-                                    style={styles.cancelButton}
-                                    onPress={closeResetModal}
-                                    disabled={isResetting}
-                                    activeOpacity={0.7}
-                                >
-                                    <Text style={styles.cancelButtonText}>Cancel</Text>
-                                </TouchableOpacity>
-
-                                <TouchableOpacity
-                                    style={[
-                                        styles.warningActionButton,
-                                        (confirmText !== "RESET" || isResetting) && styles.deleteButtonDisabled,
-                                    ]}
-                                    onPress={handleResetProgress}
-                                    disabled={confirmText !== "RESET" || isResetting}
-                                    activeOpacity={0.7}
-                                >
-                                    {isResetting ? (
-                                        <ActivityIndicator size="small" color={colors.text} />
-                                    ) : (
-                                        <>
-                                            <Ionicons name="refresh" size={16} color={colors.text} />
-                                            <Text style={styles.deleteButtonText}>Reset</Text>
-                                        </>
-                                    )}
-                                </TouchableOpacity>
+                            <View style={styles.deleteListItem}>
+                                <Ionicons name="chatbubbles" size={16} color={colors.warning} />
+                                <Text style={styles.deleteListText}>All chat messages</Text>
                             </View>
                         </View>
-                    </KeyboardAvoidingView>
-                </BlurView>
+
+                        <View style={styles.keepList}>
+                            <View style={styles.deleteListItem}>
+                                <Ionicons name="checkmark-circle" size={16} color={colors.success} />
+                                <Text style={styles.deleteListText}>Your partner connection stays</Text>
+                            </View>
+                        </View>
+
+                        <Text style={styles.confirmLabel}>
+                            Type <Text style={styles.warningKeyword}>RESET</Text> to confirm:
+                        </Text>
+
+                        <TextInput
+                            style={styles.warningInput}
+                            value={confirmText}
+                            onChangeText={setConfirmText}
+                            placeholder="Type RESET"
+                            placeholderTextColor={colors.textTertiary}
+                            autoCapitalize="characters"
+                            autoCorrect={false}
+                            editable={!isResetting}
+                        />
+
+                        <View style={styles.modalButtons}>
+                            <TouchableOpacity
+                                style={styles.cancelButton}
+                                onPress={closeResetModal}
+                                disabled={isResetting}
+                                activeOpacity={0.7}
+                            >
+                                <Text style={styles.cancelButtonText}>Cancel</Text>
+                            </TouchableOpacity>
+
+                            <TouchableOpacity
+                                style={[
+                                    styles.warningActionButton,
+                                    (confirmText !== "RESET" || isResetting) && styles.deleteButtonDisabled,
+                                ]}
+                                onPress={handleResetProgress}
+                                disabled={confirmText !== "RESET" || isResetting}
+                                activeOpacity={0.7}
+                            >
+                                {isResetting ? (
+                                    <ActivityIndicator size="small" color={colors.text} />
+                                ) : (
+                                    <>
+                                        <Ionicons name="refresh" size={16} color={colors.text} />
+                                        <Text style={styles.deleteButtonText}>Reset</Text>
+                                    </>
+                                )}
+                            </TouchableOpacity>
+                        </View>
+                    </View>
+                </KeyboardAvoidingView>
             </Modal>
 
             {/* Delete Relationship Modal */}
@@ -284,93 +277,87 @@ export const DangerZone: React.FC<DangerZoneProps> = ({
                 animationType="fade"
                 onRequestClose={closeRelationshipModal}
             >
-                <BlurView
-                    intensity={Platform.OS === 'ios' ? 20 : 0}
-                    tint="dark"
-                    style={StyleSheet.absoluteFill}
+                <KeyboardAvoidingView
+                    behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+                    style={styles.modalOverlay}
                 >
-                    <KeyboardAvoidingView
-                        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-                        style={styles.modalOverlay}
-                    >
-                        <View style={styles.modalContent}>
-                            <View style={styles.modalHeader}>
-                                <View style={styles.modalIconContainer}>
-                                    <Ionicons name="heart-dislike" size={32} color={colors.error} />
-                                </View>
-                                <Text style={styles.modalTitle}>Delete Relationship Data?</Text>
+                    <View style={styles.modalContent}>
+                        <View style={styles.modalHeader}>
+                            <View style={styles.modalIconContainer}>
+                                <Ionicons name="heart-dislike" size={32} color={colors.error} />
                             </View>
+                            <Text style={styles.modalTitle}>Delete Relationship Data?</Text>
+                        </View>
 
-                            <Text style={styles.modalDescription}>
-                                This action cannot be undone. This will permanently delete:
-                            </Text>
+                        <Text style={styles.modalDescription}>
+                            This action cannot be undone. This will permanently delete:
+                        </Text>
 
-                            <View style={styles.deleteList}>
-                                <View style={styles.deleteListItem}>
-                                    <Ionicons name="heart-dislike" size={16} color={colors.error} />
-                                    <Text style={styles.deleteListText}>Your couple connection</Text>
-                                </View>
-                                <View style={styles.deleteListItem}>
-                                    <Ionicons name="checkmark-circle" size={16} color={colors.error} />
-                                    <Text style={styles.deleteListText}>All matches and responses</Text>
-                                </View>
-                                <View style={styles.deleteListItem}>
-                                    <Ionicons name="chatbubbles" size={16} color={colors.error} />
-                                    <Text style={styles.deleteListText}>All chat messages</Text>
-                                </View>
-                                <View style={styles.deleteListItem}>
-                                    <Ionicons name="images" size={16} color={colors.error} />
-                                    <Text style={styles.deleteListText}>All shared photos</Text>
-                                </View>
+                        <View style={styles.deleteList}>
+                            <View style={styles.deleteListItem}>
+                                <Ionicons name="heart-dislike" size={16} color={colors.error} />
+                                <Text style={styles.deleteListText}>Your couple connection</Text>
                             </View>
-
-                            <Text style={styles.confirmLabel}>
-                                Type <Text style={styles.confirmKeyword}>DELETE</Text> to confirm:
-                            </Text>
-
-                            <TextInput
-                                style={styles.confirmInput}
-                                value={confirmText}
-                                onChangeText={setConfirmText}
-                                placeholder="Type DELETE"
-                                placeholderTextColor={colors.textTertiary}
-                                autoCapitalize="characters"
-                                autoCorrect={false}
-                                editable={!isDeletingRelationship}
-                            />
-
-                            <View style={styles.modalButtons}>
-                                <TouchableOpacity
-                                    style={styles.cancelButton}
-                                    onPress={closeRelationshipModal}
-                                    disabled={isDeletingRelationship}
-                                    activeOpacity={0.7}
-                                >
-                                    <Text style={styles.cancelButtonText}>Cancel</Text>
-                                </TouchableOpacity>
-
-                                <TouchableOpacity
-                                    style={[
-                                        styles.deleteButton,
-                                        (confirmText !== "DELETE" || isDeletingRelationship) && styles.deleteButtonDisabled,
-                                    ]}
-                                    onPress={handleDeleteRelationship}
-                                    disabled={confirmText !== "DELETE" || isDeletingRelationship}
-                                    activeOpacity={0.7}
-                                >
-                                    {isDeletingRelationship ? (
-                                        <ActivityIndicator size="small" color={colors.text} />
-                                    ) : (
-                                        <>
-                                            <Ionicons name="trash" size={16} color={colors.text} />
-                                            <Text style={styles.deleteButtonText}>Delete</Text>
-                                        </>
-                                    )}
-                                </TouchableOpacity>
+                            <View style={styles.deleteListItem}>
+                                <Ionicons name="checkmark-circle" size={16} color={colors.error} />
+                                <Text style={styles.deleteListText}>All matches and responses</Text>
+                            </View>
+                            <View style={styles.deleteListItem}>
+                                <Ionicons name="chatbubbles" size={16} color={colors.error} />
+                                <Text style={styles.deleteListText}>All chat messages</Text>
+                            </View>
+                            <View style={styles.deleteListItem}>
+                                <Ionicons name="images" size={16} color={colors.error} />
+                                <Text style={styles.deleteListText}>All shared photos</Text>
                             </View>
                         </View>
-                    </KeyboardAvoidingView>
-                </BlurView>
+
+                        <Text style={styles.confirmLabel}>
+                            Type <Text style={styles.confirmKeyword}>DELETE</Text> to confirm:
+                        </Text>
+
+                        <TextInput
+                            style={styles.confirmInput}
+                            value={confirmText}
+                            onChangeText={setConfirmText}
+                            placeholder="Type DELETE"
+                            placeholderTextColor={colors.textTertiary}
+                            autoCapitalize="characters"
+                            autoCorrect={false}
+                            editable={!isDeletingRelationship}
+                        />
+
+                        <View style={styles.modalButtons}>
+                            <TouchableOpacity
+                                style={styles.cancelButton}
+                                onPress={closeRelationshipModal}
+                                disabled={isDeletingRelationship}
+                                activeOpacity={0.7}
+                            >
+                                <Text style={styles.cancelButtonText}>Cancel</Text>
+                            </TouchableOpacity>
+
+                            <TouchableOpacity
+                                style={[
+                                    styles.deleteButton,
+                                    (confirmText !== "DELETE" || isDeletingRelationship) && styles.deleteButtonDisabled,
+                                ]}
+                                onPress={handleDeleteRelationship}
+                                disabled={confirmText !== "DELETE" || isDeletingRelationship}
+                                activeOpacity={0.7}
+                            >
+                                {isDeletingRelationship ? (
+                                    <ActivityIndicator size="small" color={colors.text} />
+                                ) : (
+                                    <>
+                                        <Ionicons name="trash" size={16} color={colors.text} />
+                                        <Text style={styles.deleteButtonText}>Delete</Text>
+                                    </>
+                                )}
+                            </TouchableOpacity>
+                        </View>
+                    </View>
+                </KeyboardAvoidingView>
             </Modal>
 
             {/* Delete Account Modal */}
@@ -380,101 +367,95 @@ export const DangerZone: React.FC<DangerZoneProps> = ({
                 animationType="fade"
                 onRequestClose={closeAccountModal}
             >
-                <BlurView
-                    intensity={Platform.OS === 'ios' ? 20 : 0}
-                    tint="dark"
-                    style={StyleSheet.absoluteFill}
+                <KeyboardAvoidingView
+                    behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+                    style={styles.modalOverlay}
                 >
-                    <KeyboardAvoidingView
-                        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-                        style={styles.modalOverlay}
-                    >
-                        <View style={styles.modalContent}>
-                            <View style={styles.modalHeader}>
-                                <View style={styles.modalIconContainer}>
-                                    <Ionicons name="person-remove" size={32} color={colors.error} />
-                                </View>
-                                <Text style={styles.modalTitle}>Delete Account?</Text>
+                    <View style={styles.modalContent}>
+                        <View style={styles.modalHeader}>
+                            <View style={styles.modalIconContainer}>
+                                <Ionicons name="person-remove" size={32} color={colors.error} />
                             </View>
+                            <Text style={styles.modalTitle}>Delete Account?</Text>
+                        </View>
 
-                            <Text style={styles.modalDescription}>
-                                This action cannot be undone. This will permanently delete:
-                            </Text>
+                        <Text style={styles.modalDescription}>
+                            This action cannot be undone. This will permanently delete:
+                        </Text>
 
-                            <View style={styles.deleteList}>
-                                <View style={styles.deleteListItem}>
-                                    <Ionicons name="person" size={16} color={colors.error} />
-                                    <Text style={styles.deleteListText}>Your account and profile</Text>
-                                </View>
-                                {hasRelationship && (
-                                    <>
-                                        <View style={styles.deleteListItem}>
-                                            <Ionicons name="heart-dislike" size={16} color={colors.error} />
-                                            <Text style={styles.deleteListText}>Your relationship data</Text>
-                                        </View>
-                                        <View style={styles.deleteListItem}>
-                                            <Ionicons name="chatbubbles" size={16} color={colors.error} />
-                                            <Text style={styles.deleteListText}>All chat messages and photos</Text>
-                                        </View>
-                                    </>
-                                )}
-                                <View style={styles.deleteListItem}>
-                                    <Ionicons name="key" size={16} color={colors.error} />
-                                    <Text style={styles.deleteListText}>Your encryption keys</Text>
-                                </View>
-                                <View style={styles.deleteListItem}>
-                                    <Ionicons name="cloud-offline" size={16} color={colors.error} />
-                                    <Text style={styles.deleteListText}>All cloud-stored data</Text>
-                                </View>
+                        <View style={styles.deleteList}>
+                            <View style={styles.deleteListItem}>
+                                <Ionicons name="person" size={16} color={colors.error} />
+                                <Text style={styles.deleteListText}>Your account and profile</Text>
                             </View>
-
-                            <Text style={styles.confirmLabel}>
-                                Type <Text style={styles.confirmKeyword}>DELETE</Text> to confirm:
-                            </Text>
-
-                            <TextInput
-                                style={styles.confirmInput}
-                                value={confirmText}
-                                onChangeText={setConfirmText}
-                                placeholder="Type DELETE"
-                                placeholderTextColor={colors.textTertiary}
-                                autoCapitalize="characters"
-                                autoCorrect={false}
-                                editable={!isDeletingAccount}
-                            />
-
-                            <View style={styles.modalButtons}>
-                                <TouchableOpacity
-                                    style={styles.cancelButton}
-                                    onPress={closeAccountModal}
-                                    disabled={isDeletingAccount}
-                                    activeOpacity={0.7}
-                                >
-                                    <Text style={styles.cancelButtonText}>Cancel</Text>
-                                </TouchableOpacity>
-
-                                <TouchableOpacity
-                                    style={[
-                                        styles.deleteButton,
-                                        (confirmText !== "DELETE" || isDeletingAccount) && styles.deleteButtonDisabled,
-                                    ]}
-                                    onPress={handleDeleteAccount}
-                                    disabled={confirmText !== "DELETE" || isDeletingAccount}
-                                    activeOpacity={0.7}
-                                >
-                                    {isDeletingAccount ? (
-                                        <ActivityIndicator size="small" color={colors.text} />
-                                    ) : (
-                                        <>
-                                            <Ionicons name="trash" size={16} color={colors.text} />
-                                            <Text style={styles.deleteButtonText}>Delete Account</Text>
-                                        </>
-                                    )}
-                                </TouchableOpacity>
+                            {hasRelationship && (
+                                <>
+                                    <View style={styles.deleteListItem}>
+                                        <Ionicons name="heart-dislike" size={16} color={colors.error} />
+                                        <Text style={styles.deleteListText}>Your relationship data</Text>
+                                    </View>
+                                    <View style={styles.deleteListItem}>
+                                        <Ionicons name="chatbubbles" size={16} color={colors.error} />
+                                        <Text style={styles.deleteListText}>All chat messages and photos</Text>
+                                    </View>
+                                </>
+                            )}
+                            <View style={styles.deleteListItem}>
+                                <Ionicons name="key" size={16} color={colors.error} />
+                                <Text style={styles.deleteListText}>Your encryption keys</Text>
+                            </View>
+                            <View style={styles.deleteListItem}>
+                                <Ionicons name="cloud-offline" size={16} color={colors.error} />
+                                <Text style={styles.deleteListText}>All cloud-stored data</Text>
                             </View>
                         </View>
-                    </KeyboardAvoidingView>
-                </BlurView>
+
+                        <Text style={styles.confirmLabel}>
+                            Type <Text style={styles.confirmKeyword}>DELETE</Text> to confirm:
+                        </Text>
+
+                        <TextInput
+                            style={styles.confirmInput}
+                            value={confirmText}
+                            onChangeText={setConfirmText}
+                            placeholder="Type DELETE"
+                            placeholderTextColor={colors.textTertiary}
+                            autoCapitalize="characters"
+                            autoCorrect={false}
+                            editable={!isDeletingAccount}
+                        />
+
+                        <View style={styles.modalButtons}>
+                            <TouchableOpacity
+                                style={styles.cancelButton}
+                                onPress={closeAccountModal}
+                                disabled={isDeletingAccount}
+                                activeOpacity={0.7}
+                            >
+                                <Text style={styles.cancelButtonText}>Cancel</Text>
+                            </TouchableOpacity>
+
+                            <TouchableOpacity
+                                style={[
+                                    styles.deleteButton,
+                                    (confirmText !== "DELETE" || isDeletingAccount) && styles.deleteButtonDisabled,
+                                ]}
+                                onPress={handleDeleteAccount}
+                                disabled={confirmText !== "DELETE" || isDeletingAccount}
+                                activeOpacity={0.7}
+                            >
+                                {isDeletingAccount ? (
+                                    <ActivityIndicator size="small" color={colors.text} />
+                                ) : (
+                                    <>
+                                        <Ionicons name="trash" size={16} color={colors.text} />
+                                        <Text style={styles.deleteButtonText}>Delete Account</Text>
+                                    </>
+                                )}
+                            </TouchableOpacity>
+                        </View>
+                    </View>
+                </KeyboardAvoidingView>
             </Modal>
         </>
     );
@@ -577,7 +558,7 @@ const styles = StyleSheet.create({
         backgroundColor: colors.backgroundLight,
         borderRadius: radius.xl,
         borderWidth: 1,
-        borderColor: colors.glass.border,
+        borderColor: colors.border,
     },
     modalHeader: {
         alignItems: "center",
@@ -644,7 +625,7 @@ const styles = StyleSheet.create({
         color: colors.warning,
     },
     warningInput: {
-        backgroundColor: colors.glass.background,
+        backgroundColor: colors.background,
         borderRadius: radius.md,
         borderWidth: 1,
         borderColor: colors.warning,
@@ -684,7 +665,7 @@ const styles = StyleSheet.create({
         color: colors.error,
     },
     confirmInput: {
-        backgroundColor: colors.glass.background,
+        backgroundColor: colors.background,
         borderRadius: radius.md,
         borderWidth: 1,
         borderColor: colors.error,
@@ -700,12 +681,12 @@ const styles = StyleSheet.create({
     },
     cancelButton: {
         flex: 1,
-        backgroundColor: colors.glass.backgroundLight,
+        backgroundColor: colors.background,
         paddingVertical: spacing.md,
         borderRadius: radius.md,
         alignItems: "center",
         borderWidth: 1,
-        borderColor: colors.glass.borderLight,
+        borderColor: colors.border,
     },
     cancelButtonText: {
         ...typography.body,
diff --git a/apps/mobile/src/features/profile/components/MenuItem.tsx b/apps/mobile/src/features/profile/components/MenuItem.tsx
index d59cd21..fbb1736 100644
--- a/apps/mobile/src/features/profile/components/MenuItem.tsx
+++ b/apps/mobile/src/features/profile/components/MenuItem.tsx
@@ -127,6 +127,8 @@ const styles = StyleSheet.create({
         alignItems: 'center',
         marginRight: spacing.md,
         backgroundColor: 'rgba(239, 68, 68, 0.1)',
+        borderWidth: 1,
+        borderColor: 'rgba(239, 68, 68, 0.2)', // Added border
     },
     textContainer: {
         flex: 1,
diff --git a/apps/mobile/src/features/profile/components/NotificationSettings.tsx b/apps/mobile/src/features/profile/components/NotificationSettings.tsx
index 4cdfe09..9a19f19 100644
--- a/apps/mobile/src/features/profile/components/NotificationSettings.tsx
+++ b/apps/mobile/src/features/profile/components/NotificationSettings.tsx
@@ -34,6 +34,7 @@ export const NotificationSettings: React.FC<NotificationSettingsProps> = ({
         onMatchesToggle: (value: boolean) => updatePreference('matches_enabled', value),
         onMessagesToggle: (value: boolean) => updatePreference('messages_enabled', value),
         onPartnerActivityToggle: (value: boolean) => updatePreference('partner_activity_enabled', value),
+        onNudgesToggle: (value: boolean) => updatePreference('nudges_enabled', value),
         onPackChangesToggle: (value: boolean) => updatePreference('pack_changes_enabled', value),
         onNewPacksToggle: (value: boolean) => updatePreference('new_packs_enabled', value),
         onStreakMilestonesToggle: (value: boolean) => updatePreference('streak_milestones_enabled', value),
@@ -91,6 +92,17 @@ export const NotificationSettings: React.FC<NotificationSettingsProps> = ({
 
                     <View style={styles.itemDivider} />
 
+                    <SwitchItem
+                        icon="hand-left-outline"
+                        label="Partner Nudges"
+                        description="When your partner sends you a reminder"
+                        value={preferences.nudges_enabled}
+                        onValueChange={handlers.onNudgesToggle}
+                        disabled={isUpdating}
+                    />
+
+                    <View style={styles.itemDivider} />
+
                     <SwitchItem
                         icon="layers-outline"
                         label="Pack Updates"
@@ -133,7 +145,7 @@ const styles = StyleSheet.create({
         marginBottom: spacing.md,
         paddingTop: spacing.md,
         borderTopWidth: 1,
-        borderTopColor: colors.glass.border,
+        borderTopColor: colors.border,
     },
     subsectionLabel: {
         ...typography.caption1,
@@ -144,7 +156,7 @@ const styles = StyleSheet.create({
     },
     itemDivider: {
         height: 1,
-        backgroundColor: colors.glass.border,
+        backgroundColor: colors.border,
         marginVertical: spacing.sm,
     },
 });
diff --git a/apps/mobile/src/features/profile/components/PrivacySettings.tsx b/apps/mobile/src/features/profile/components/PrivacySettings.tsx
index 364a26e..50f445d 100644
--- a/apps/mobile/src/features/profile/components/PrivacySettings.tsx
+++ b/apps/mobile/src/features/profile/components/PrivacySettings.tsx
@@ -58,7 +58,7 @@ export const PrivacySettings: React.FC<PrivacySettingsProps> = ({
 const styles = StyleSheet.create({
     divider: {
         height: 1,
-        backgroundColor: colors.glass.border,
+        backgroundColor: colors.border,
         marginVertical: spacing.lg,
     },
 });
diff --git a/apps/mobile/src/features/profile/components/ProfileHeader.tsx b/apps/mobile/src/features/profile/components/ProfileHeader.tsx
index 3a5453e..7675159 100644
--- a/apps/mobile/src/features/profile/components/ProfileHeader.tsx
+++ b/apps/mobile/src/features/profile/components/ProfileHeader.tsx
@@ -155,11 +155,32 @@ const styles = StyleSheet.create({
         padding: 3,
         justifyContent: 'center',
         alignItems: 'center',
-        shadowColor: featureColors.profile.accent,
-        shadowOffset: { width: 0, height: 4 },
-        shadowOpacity: 0.3,
-        shadowRadius: 8,
-        elevation: 6,
+        // Removed shadows for flat look
+    },
+    // ...
+    avatarEditBadge: {
+        position: 'absolute',
+        bottom: 0,
+        right: 0,
+        backgroundColor: colors.backgroundLight,
+        width: 28,
+        height: 28,
+        borderRadius: 14,
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderWidth: 2,
+        borderColor: colors.background,
+    },
+    // ...
+    cancelEditButton: {
+        width: 32,
+        height: 32,
+        borderRadius: 16,
+        backgroundColor: colors.backgroundLight,
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderWidth: 1,
+        borderColor: colors.border,
     },
     avatarImage: {
         width: '100%',
@@ -191,19 +212,7 @@ const styles = StyleSheet.create({
         justifyContent: 'center',
         alignItems: 'center',
     },
-    avatarEditBadge: {
-        position: 'absolute',
-        bottom: 0,
-        right: 0,
-        backgroundColor: colors.surfaceSolid,
-        width: 28,
-        height: 28,
-        borderRadius: 14,
-        justifyContent: 'center',
-        alignItems: 'center',
-        borderWidth: 2,
-        borderColor: colors.background,
-    },
+
     profileInfo: {
         flex: 1,
         justifyContent: 'center',
@@ -253,12 +262,5 @@ const styles = StyleSheet.create({
         alignItems: 'center',
         marginLeft: spacing.xs,
     },
-    cancelEditButton: {
-        width: 32,
-        height: 32,
-        borderRadius: 16,
-        backgroundColor: colors.glass.highlight,
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
+
 });
diff --git a/apps/mobile/src/features/profile/components/RelationshipDangerZone.tsx b/apps/mobile/src/features/profile/components/RelationshipDangerZone.tsx
index 99d46ed..121b077 100644
--- a/apps/mobile/src/features/profile/components/RelationshipDangerZone.tsx
+++ b/apps/mobile/src/features/profile/components/RelationshipDangerZone.tsx
@@ -2,8 +2,7 @@ import React, { useState } from 'react';
 import { View, Text, StyleSheet, Modal, Platform, KeyboardAvoidingView, TouchableOpacity, ActivityIndicator, TextInput, ViewStyle } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import Animated, { FadeInDown } from 'react-native-reanimated';
-import { BlurView } from 'expo-blur';
-import { GlassCard, GlassButton } from '../../../components/ui';
+import { GlassCard, GlassButton } from '../../../components/ui';
 import { colors, spacing, radius, typography } from '../../../theme';
 
 interface RelationshipDangerZoneProps {
@@ -132,199 +131,187 @@ export const RelationshipDangerZone: React.FC<RelationshipDangerZoneProps> = ({
             </Animated.View>
 
             {/* Reset Progress Modal */}
-            <Modal
-                visible={showResetModal}
-                transparent
-                animationType="fade"
-                onRequestClose={closeResetModal}
-            >
-                <BlurView
-                    intensity={Platform.OS === 'ios' ? 20 : 0}
-                    tint="dark"
-                    style={StyleSheet.absoluteFill}
-                >
-                    <KeyboardAvoidingView
-                        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-                        style={styles.modalOverlay}
-                    >
-                        <View style={styles.modalContent}>
-                            <View style={styles.modalHeader}>
-                                <View style={styles.warningModalIconContainer}>
-                                    <Ionicons name="refresh" size={32} color={colors.warning} />
-                                </View>
-                                <Text style={styles.modalTitle}>Reset Progress?</Text>
-                            </View>
-
-                            <Text style={styles.modalDescription}>
-                                This will permanently delete:
-                            </Text>
-
-                            <View style={styles.warningList}>
-                                <View style={styles.deleteListItem}>
-                                    <Ionicons name="swap-horizontal" size={16} color={colors.warning} />
-                                    <Text style={styles.deleteListText}>All your swipes</Text>
-                                </View>
-                                <View style={styles.deleteListItem}>
-                                    <Ionicons name="heart" size={16} color={colors.warning} />
-                                    <Text style={styles.deleteListText}>All matches</Text>
-                                </View>
-                                <View style={styles.deleteListItem}>
-                                    <Ionicons name="chatbubbles" size={16} color={colors.warning} />
-                                    <Text style={styles.deleteListText}>All chat messages</Text>
-                                </View>
-                            </View>
-
-                            <View style={styles.keepList}>
-                                <View style={styles.deleteListItem}>
-                                    <Ionicons name="checkmark-circle" size={16} color={colors.success} />
-                                    <Text style={styles.deleteListText}>Your partner connection stays</Text>
-                                </View>
-                            </View>
-
-                            <Text style={styles.confirmLabel}>
-                                Type <Text style={styles.warningKeyword}>RESET</Text> to confirm:
-                            </Text>
-
-                            <TextInput
-                                style={styles.warningInput}
-                                value={confirmText}
-                                onChangeText={setConfirmText}
-                                placeholder="Type RESET"
-                                placeholderTextColor={colors.textTertiary}
-                                autoCapitalize="characters"
-                                autoCorrect={false}
-                                editable={!isResetting}
-                            />
-
-                            <View style={styles.modalButtons}>
-                                <TouchableOpacity
-                                    style={styles.cancelButton}
-                                    onPress={closeResetModal}
-                                    disabled={isResetting}
-                                    activeOpacity={0.7}
-                                >
-                                    <Text style={styles.cancelButtonText}>Cancel</Text>
-                                </TouchableOpacity>
-
-                                <TouchableOpacity
-                                    style={[
-                                        styles.warningActionButton,
-                                        (confirmText !== "RESET" || isResetting) && styles.deleteButtonDisabled,
-                                    ]}
-                                    onPress={handleResetProgress}
-                                    disabled={confirmText !== "RESET" || isResetting}
-                                    activeOpacity={0.7}
-                                >
-                                    {isResetting ? (
-                                        <ActivityIndicator size="small" color={colors.text} />
-                                    ) : (
-                                        <>
-                                            <Ionicons name="refresh" size={16} color={colors.text} />
-                                            <Text style={styles.deleteButtonText}>Reset</Text>
-                                        </>
-                                    )}
-                                </TouchableOpacity>
-                            </View>
-                        </View>
-                    </KeyboardAvoidingView>
-                </BlurView>
-            </Modal>
+            <Modal
+                visible={showResetModal}
+                transparent
+                animationType="fade"
+                onRequestClose={closeResetModal}
+            >
+                <KeyboardAvoidingView
+                    behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+                    style={styles.modalOverlay}
+                >
+                    <View style={styles.modalContent}>
+                        <View style={styles.modalHeader}>
+                            <View style={styles.warningModalIconContainer}>
+                                <Ionicons name="refresh" size={32} color={colors.warning} />
+                            </View>
+                            <Text style={styles.modalTitle}>Reset Progress?</Text>
+                        </View>
+
+                        <Text style={styles.modalDescription}>
+                            This will permanently delete:
+                        </Text>
+
+                        <View style={styles.warningList}>
+                            <View style={styles.deleteListItem}>
+                                <Ionicons name="swap-horizontal" size={16} color={colors.warning} />
+                                <Text style={styles.deleteListText}>All your swipes</Text>
+                            </View>
+                            <View style={styles.deleteListItem}>
+                                <Ionicons name="heart" size={16} color={colors.warning} />
+                                <Text style={styles.deleteListText}>All matches</Text>
+                            </View>
+                            <View style={styles.deleteListItem}>
+                                <Ionicons name="chatbubbles" size={16} color={colors.warning} />
+                                <Text style={styles.deleteListText}>All chat messages</Text>
+                            </View>
+                        </View>
+
+                        <View style={styles.keepList}>
+                            <View style={styles.deleteListItem}>
+                                <Ionicons name="checkmark-circle" size={16} color={colors.success} />
+                                <Text style={styles.deleteListText}>Your partner connection stays</Text>
+                            </View>
+                        </View>
+
+                        <Text style={styles.confirmLabel}>
+                            Type <Text style={styles.warningKeyword}>RESET</Text> to confirm:
+                        </Text>
+
+                        <TextInput
+                            style={styles.warningInput}
+                            value={confirmText}
+                            onChangeText={setConfirmText}
+                            placeholder="Type RESET"
+                            placeholderTextColor={colors.textTertiary}
+                            autoCapitalize="characters"
+                            autoCorrect={false}
+                            editable={!isResetting}
+                        />
+
+                        <View style={styles.modalButtons}>
+                            <TouchableOpacity
+                                style={styles.cancelButton}
+                                onPress={closeResetModal}
+                                disabled={isResetting}
+                                activeOpacity={0.7}
+                            >
+                                <Text style={styles.cancelButtonText}>Cancel</Text>
+                            </TouchableOpacity>
+
+                            <TouchableOpacity
+                                style={[
+                                    styles.warningActionButton,
+                                    (confirmText !== "RESET" || isResetting) && styles.deleteButtonDisabled,
+                                ]}
+                                onPress={handleResetProgress}
+                                disabled={confirmText !== "RESET" || isResetting}
+                                activeOpacity={0.7}
+                            >
+                                {isResetting ? (
+                                    <ActivityIndicator size="small" color={colors.text} />
+                                ) : (
+                                    <>
+                                        <Ionicons name="refresh" size={16} color={colors.text} />
+                                        <Text style={styles.deleteButtonText}>Reset</Text>
+                                    </>
+                                )}
+                            </TouchableOpacity>
+                        </View>
+                    </View>
+                </KeyboardAvoidingView>
+            </Modal>
 
             {/* Delete Relationship Modal */}
-            <Modal
-                visible={showDeleteRelationshipModal}
-                transparent
-                animationType="fade"
-                onRequestClose={closeRelationshipModal}
-            >
-                <BlurView
-                    intensity={Platform.OS === 'ios' ? 20 : 0}
-                    tint="dark"
-                    style={StyleSheet.absoluteFill}
-                >
-                    <KeyboardAvoidingView
-                        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-                        style={styles.modalOverlay}
-                    >
-                        <View style={styles.modalContent}>
-                            <View style={styles.modalHeader}>
-                                <View style={styles.modalIconContainer}>
-                                    <Ionicons name="heart-dislike" size={32} color={colors.error} />
-                                </View>
-                                <Text style={styles.modalTitle}>Delete Relationship Data?</Text>
-                            </View>
-
-                            <Text style={styles.modalDescription}>
-                                This action cannot be undone. This will permanently delete:
-                            </Text>
-
-                            <View style={styles.deleteList}>
-                                <View style={styles.deleteListItem}>
-                                    <Ionicons name="heart-dislike" size={16} color={colors.error} />
-                                    <Text style={styles.deleteListText}>Your couple connection</Text>
-                                </View>
-                                <View style={styles.deleteListItem}>
-                                    <Ionicons name="checkmark-circle" size={16} color={colors.error} />
-                                    <Text style={styles.deleteListText}>All matches and responses</Text>
-                                </View>
-                                <View style={styles.deleteListItem}>
-                                    <Ionicons name="chatbubbles" size={16} color={colors.error} />
-                                    <Text style={styles.deleteListText}>All chat messages</Text>
-                                </View>
-                                <View style={styles.deleteListItem}>
-                                    <Ionicons name="images" size={16} color={colors.error} />
-                                    <Text style={styles.deleteListText}>All shared photos</Text>
-                                </View>
-                            </View>
-
-                            <Text style={styles.confirmLabel}>
-                                Type <Text style={styles.confirmKeyword}>DELETE</Text> to confirm:
-                            </Text>
-
-                            <TextInput
-                                style={styles.confirmInput}
-                                value={confirmText}
-                                onChangeText={setConfirmText}
-                                placeholder="Type DELETE"
-                                placeholderTextColor={colors.textTertiary}
-                                autoCapitalize="characters"
-                                autoCorrect={false}
-                                editable={!isDeletingRelationship}
-                            />
-
-                            <View style={styles.modalButtons}>
-                                <TouchableOpacity
-                                    style={styles.cancelButton}
-                                    onPress={closeRelationshipModal}
-                                    disabled={isDeletingRelationship}
-                                    activeOpacity={0.7}
-                                >
-                                    <Text style={styles.cancelButtonText}>Cancel</Text>
-                                </TouchableOpacity>
-
-                                <TouchableOpacity
-                                    style={[
-                                        styles.deleteButton,
-                                        (confirmText !== "DELETE" || isDeletingRelationship) && styles.deleteButtonDisabled,
-                                    ]}
-                                    onPress={handleDeleteRelationship}
-                                    disabled={confirmText !== "DELETE" || isDeletingRelationship}
-                                    activeOpacity={0.7}
-                                >
-                                    {isDeletingRelationship ? (
-                                        <ActivityIndicator size="small" color={colors.text} />
-                                    ) : (
-                                        <>
-                                            <Ionicons name="trash" size={16} color={colors.text} />
-                                            <Text style={styles.deleteButtonText}>Delete</Text>
-                                        </>
-                                    )}
-                                </TouchableOpacity>
-                            </View>
-                        </View>
-                    </KeyboardAvoidingView>
-                </BlurView>
-            </Modal>
+            <Modal
+                visible={showDeleteRelationshipModal}
+                transparent
+                animationType="fade"
+                onRequestClose={closeRelationshipModal}
+            >
+                <KeyboardAvoidingView
+                    behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+                    style={styles.modalOverlay}
+                >
+                    <View style={styles.modalContent}>
+                        <View style={styles.modalHeader}>
+                            <View style={styles.modalIconContainer}>
+                                <Ionicons name="heart-dislike" size={32} color={colors.error} />
+                            </View>
+                            <Text style={styles.modalTitle}>Delete Relationship Data?</Text>
+                        </View>
+
+                        <Text style={styles.modalDescription}>
+                            This action cannot be undone. This will permanently delete:
+                        </Text>
+
+                        <View style={styles.deleteList}>
+                            <View style={styles.deleteListItem}>
+                                <Ionicons name="heart-dislike" size={16} color={colors.error} />
+                                <Text style={styles.deleteListText}>Your couple connection</Text>
+                            </View>
+                            <View style={styles.deleteListItem}>
+                                <Ionicons name="checkmark-circle" size={16} color={colors.error} />
+                                <Text style={styles.deleteListText}>All matches and responses</Text>
+                            </View>
+                            <View style={styles.deleteListItem}>
+                                <Ionicons name="chatbubbles" size={16} color={colors.error} />
+                                <Text style={styles.deleteListText}>All chat messages</Text>
+                            </View>
+                            <View style={styles.deleteListItem}>
+                                <Ionicons name="images" size={16} color={colors.error} />
+                                <Text style={styles.deleteListText}>All shared photos</Text>
+                            </View>
+                        </View>
+
+                        <Text style={styles.confirmLabel}>
+                            Type <Text style={styles.confirmKeyword}>DELETE</Text> to confirm:
+                        </Text>
+
+                        <TextInput
+                            style={styles.confirmInput}
+                            value={confirmText}
+                            onChangeText={setConfirmText}
+                            placeholder="Type DELETE"
+                            placeholderTextColor={colors.textTertiary}
+                            autoCapitalize="characters"
+                            autoCorrect={false}
+                            editable={!isDeletingRelationship}
+                        />
+
+                        <View style={styles.modalButtons}>
+                            <TouchableOpacity
+                                style={styles.cancelButton}
+                                onPress={closeRelationshipModal}
+                                disabled={isDeletingRelationship}
+                                activeOpacity={0.7}
+                            >
+                                <Text style={styles.cancelButtonText}>Cancel</Text>
+                            </TouchableOpacity>
+
+                            <TouchableOpacity
+                                style={[
+                                    styles.deleteButton,
+                                    (confirmText !== "DELETE" || isDeletingRelationship) && styles.deleteButtonDisabled,
+                                ]}
+                                onPress={handleDeleteRelationship}
+                                disabled={confirmText !== "DELETE" || isDeletingRelationship}
+                                activeOpacity={0.7}
+                            >
+                                {isDeletingRelationship ? (
+                                    <ActivityIndicator size="small" color={colors.text} />
+                                ) : (
+                                    <>
+                                        <Ionicons name="trash" size={16} color={colors.text} />
+                                        <Text style={styles.deleteButtonText}>Delete</Text>
+                                    </>
+                                )}
+                            </TouchableOpacity>
+                        </View>
+                    </View>
+                </KeyboardAvoidingView>
+            </Modal>
         </>
     );
 };
@@ -419,15 +406,15 @@ const styles = StyleSheet.create({
         alignItems: "center",
         padding: spacing.lg,
     },
-    modalContent: {
-        width: "100%",
-        maxWidth: 400,
-        padding: spacing.xl,
-        backgroundColor: colors.backgroundLight,
-        borderRadius: radius.xl,
-        borderWidth: 1,
-        borderColor: colors.glass.border,
-    },
+    modalContent: {
+        width: "100%",
+        maxWidth: 400,
+        padding: spacing.xl,
+        backgroundColor: colors.backgroundLight,
+        borderRadius: radius.xl,
+        borderWidth: 1,
+        borderColor: colors.border,
+    },
     modalHeader: {
         alignItems: "center",
         marginBottom: spacing.lg,
@@ -492,13 +479,13 @@ const styles = StyleSheet.create({
         fontWeight: "bold",
         color: colors.warning,
     },
-    warningInput: {
-        backgroundColor: colors.glass.background,
-        borderRadius: radius.md,
-        borderWidth: 1,
-        borderColor: colors.warning,
-        padding: spacing.md,
-        ...typography.body,
+    warningInput: {
+        backgroundColor: colors.background,
+        borderRadius: radius.md,
+        borderWidth: 1,
+        borderColor: colors.warning,
+        padding: spacing.md,
+        ...typography.body,
         color: colors.text,
         textAlign: 'center',
         marginBottom: spacing.xl,
@@ -532,13 +519,13 @@ const styles = StyleSheet.create({
         fontWeight: "bold",
         color: colors.error,
     },
-    confirmInput: {
-        backgroundColor: colors.glass.background,
-        borderRadius: radius.md,
-        borderWidth: 1,
-        borderColor: colors.error,
-        padding: spacing.md,
-        ...typography.body,
+    confirmInput: {
+        backgroundColor: colors.background,
+        borderRadius: radius.md,
+        borderWidth: 1,
+        borderColor: colors.error,
+        padding: spacing.md,
+        ...typography.body,
         color: colors.text,
         textAlign: 'center',
         marginBottom: spacing.xl,
@@ -547,15 +534,15 @@ const styles = StyleSheet.create({
         flexDirection: "row",
         gap: spacing.md,
     },
-    cancelButton: {
-        flex: 1,
-        backgroundColor: colors.glass.backgroundLight,
-        paddingVertical: spacing.md,
-        borderRadius: radius.md,
-        alignItems: "center",
-        borderWidth: 1,
-        borderColor: colors.glass.borderLight,
-    },
+    cancelButton: {
+        flex: 1,
+        backgroundColor: colors.background,
+        paddingVertical: spacing.md,
+        borderRadius: radius.md,
+        alignItems: "center",
+        borderWidth: 1,
+        borderColor: colors.border,
+    },
     cancelButtonText: {
         ...typography.body,
         color: colors.textSecondary,
diff --git a/apps/mobile/src/features/profile/components/ResetProgress.tsx b/apps/mobile/src/features/profile/components/ResetProgress.tsx
index 6218092..b63f482 100644
--- a/apps/mobile/src/features/profile/components/ResetProgress.tsx
+++ b/apps/mobile/src/features/profile/components/ResetProgress.tsx
@@ -2,8 +2,7 @@ import React, { useState } from 'react';
 import { View, Text, StyleSheet, Modal, Platform, KeyboardAvoidingView, TouchableOpacity, ActivityIndicator, TextInput } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import Animated, { FadeInDown } from 'react-native-reanimated';
-import { BlurView } from 'expo-blur';
-import { GlassCard } from '../../../components/ui';
+import { GlassCard } from '../../../components/ui';
 import { colors, spacing, radius, typography } from '../../../theme';
 
 interface ResetProgressProps {
@@ -61,106 +60,100 @@ export const ResetProgress: React.FC<ResetProgressProps> = ({ onResetProgress })
                 </GlassCard>
             </Animated.View>
 
-            <Modal
-                visible={showResetModal}
-                transparent
-                animationType="fade"
-                onRequestClose={() => !isResetting && setShowResetModal(false)}
-            >
-                <BlurView
-                    intensity={Platform.OS === 'ios' ? 20 : 0}
-                    tint="dark"
-                    style={StyleSheet.absoluteFill}
-                >
-                    <KeyboardAvoidingView
-                        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-                        style={styles.modalOverlay}
-                    >
-                        <View style={styles.modalContent}>
-                            <View style={styles.modalHeader}>
-                                <View style={styles.modalIconContainer}>
-                                    <Ionicons name="refresh" size={32} color={colors.warning} />
-                                </View>
-                                <Text style={styles.modalTitle}>Reset Progress?</Text>
-                            </View>
-
-                            <Text style={styles.modalDescription}>
-                                This action cannot be undone. This will permanently delete:
-                            </Text>
-
-                            <View style={styles.resetList}>
-                                <View style={styles.resetListItem}>
-                                    <Ionicons name="swap-horizontal" size={16} color={colors.warning} />
-                                    <Text style={styles.resetListText}>All your swipes</Text>
-                                </View>
-                                <View style={styles.resetListItem}>
-                                    <Ionicons name="heart" size={16} color={colors.warning} />
-                                    <Text style={styles.resetListText}>All matches</Text>
-                                </View>
-                                <View style={styles.resetListItem}>
-                                    <Ionicons name="chatbubbles" size={16} color={colors.warning} />
-                                    <Text style={styles.resetListText}>All chat messages</Text>
-                                </View>
-                            </View>
-
-                            <View style={styles.keepList}>
-                                <View style={styles.keepListItem}>
-                                    <Ionicons name="checkmark-circle" size={16} color={colors.success} />
-                                    <Text style={styles.keepListText}>Your partner connection stays</Text>
-                                </View>
-                            </View>
-
-                            <Text style={styles.confirmLabel}>
-                                Type <Text style={styles.confirmKeyword}>RESET</Text> to confirm:
-                            </Text>
-
-                            <TextInput
-                                style={styles.confirmInput}
-                                value={resetConfirmText}
-                                onChangeText={setResetConfirmText}
-                                placeholder="Type RESET"
-                                placeholderTextColor={colors.textTertiary}
-                                autoCapitalize="characters"
-                                autoCorrect={false}
-                                editable={!isResetting}
-                            />
-
-                            <View style={styles.modalButtons}>
-                                <TouchableOpacity
-                                    style={styles.cancelButton}
-                                    onPress={() => {
-                                        setShowResetModal(false);
-                                        setResetConfirmText("");
-                                    }}
-                                    disabled={isResetting}
-                                    activeOpacity={0.7}
-                                >
-                                    <Text style={styles.cancelButtonText}>Cancel</Text>
-                                </TouchableOpacity>
-
-                                <TouchableOpacity
-                                    style={[
-                                        styles.confirmResetButton,
-                                        (resetConfirmText !== "RESET" || isResetting) && styles.confirmResetButtonDisabled,
-                                    ]}
-                                    onPress={handleReset}
-                                    disabled={resetConfirmText !== "RESET" || isResetting}
-                                    activeOpacity={0.7}
-                                >
-                                    {isResetting ? (
-                                        <ActivityIndicator size="small" color={colors.text} />
-                                    ) : (
-                                        <>
-                                            <Ionicons name="refresh" size={16} color={colors.text} />
-                                            <Text style={styles.confirmResetButtonText}>Reset</Text>
-                                        </>
-                                    )}
-                                </TouchableOpacity>
-                            </View>
-                        </View>
-                    </KeyboardAvoidingView>
-                </BlurView>
-            </Modal>
+            <Modal
+                visible={showResetModal}
+                transparent
+                animationType="fade"
+                onRequestClose={() => !isResetting && setShowResetModal(false)}
+            >
+                <KeyboardAvoidingView
+                    behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+                    style={styles.modalOverlay}
+                >
+                    <View style={styles.modalContent}>
+                        <View style={styles.modalHeader}>
+                            <View style={styles.modalIconContainer}>
+                                <Ionicons name="refresh" size={32} color={colors.warning} />
+                            </View>
+                            <Text style={styles.modalTitle}>Reset Progress?</Text>
+                        </View>
+
+                        <Text style={styles.modalDescription}>
+                            This action cannot be undone. This will permanently delete:
+                        </Text>
+
+                        <View style={styles.resetList}>
+                            <View style={styles.resetListItem}>
+                                <Ionicons name="swap-horizontal" size={16} color={colors.warning} />
+                                <Text style={styles.resetListText}>All your swipes</Text>
+                            </View>
+                            <View style={styles.resetListItem}>
+                                <Ionicons name="heart" size={16} color={colors.warning} />
+                                <Text style={styles.resetListText}>All matches</Text>
+                            </View>
+                            <View style={styles.resetListItem}>
+                                <Ionicons name="chatbubbles" size={16} color={colors.warning} />
+                                <Text style={styles.resetListText}>All chat messages</Text>
+                            </View>
+                        </View>
+
+                        <View style={styles.keepList}>
+                            <View style={styles.keepListItem}>
+                                <Ionicons name="checkmark-circle" size={16} color={colors.success} />
+                                <Text style={styles.keepListText}>Your partner connection stays</Text>
+                            </View>
+                        </View>
+
+                        <Text style={styles.confirmLabel}>
+                            Type <Text style={styles.confirmKeyword}>RESET</Text> to confirm:
+                        </Text>
+
+                        <TextInput
+                            style={styles.confirmInput}
+                            value={resetConfirmText}
+                            onChangeText={setResetConfirmText}
+                            placeholder="Type RESET"
+                            placeholderTextColor={colors.textTertiary}
+                            autoCapitalize="characters"
+                            autoCorrect={false}
+                            editable={!isResetting}
+                        />
+
+                        <View style={styles.modalButtons}>
+                            <TouchableOpacity
+                                style={styles.cancelButton}
+                                onPress={() => {
+                                    setShowResetModal(false);
+                                    setResetConfirmText("");
+                                }}
+                                disabled={isResetting}
+                                activeOpacity={0.7}
+                            >
+                                <Text style={styles.cancelButtonText}>Cancel</Text>
+                            </TouchableOpacity>
+
+                            <TouchableOpacity
+                                style={[
+                                    styles.confirmResetButton,
+                                    (resetConfirmText !== "RESET" || isResetting) && styles.confirmResetButtonDisabled,
+                                ]}
+                                onPress={handleReset}
+                                disabled={resetConfirmText !== "RESET" || isResetting}
+                                activeOpacity={0.7}
+                            >
+                                {isResetting ? (
+                                    <ActivityIndicator size="small" color={colors.text} />
+                                ) : (
+                                    <>
+                                        <Ionicons name="refresh" size={16} color={colors.text} />
+                                        <Text style={styles.confirmResetButtonText}>Reset</Text>
+                                    </>
+                                )}
+                            </TouchableOpacity>
+                        </View>
+                    </View>
+                </KeyboardAvoidingView>
+            </Modal>
         </>
     );
 };
@@ -233,15 +226,15 @@ const styles = StyleSheet.create({
         alignItems: "center",
         padding: spacing.lg,
     },
-    modalContent: {
-        width: "100%",
-        maxWidth: 400,
-        padding: spacing.xl,
-        backgroundColor: colors.backgroundLight,
-        borderRadius: radius.xl,
-        borderWidth: 1,
-        borderColor: colors.glass.border,
-    },
+    modalContent: {
+        width: "100%",
+        maxWidth: 400,
+        padding: spacing.xl,
+        backgroundColor: colors.backgroundLight,
+        borderRadius: radius.xl,
+        borderWidth: 1,
+        borderColor: colors.border,
+    },
     modalHeader: {
         alignItems: "center",
         marginBottom: spacing.lg,
@@ -312,13 +305,13 @@ const styles = StyleSheet.create({
         fontWeight: "bold",
         color: colors.warning,
     },
-    confirmInput: {
-        backgroundColor: colors.glass.background,
-        borderRadius: radius.md,
-        borderWidth: 1,
-        borderColor: colors.warning,
-        padding: spacing.md,
-        ...typography.body,
+    confirmInput: {
+        backgroundColor: colors.background,
+        borderRadius: radius.md,
+        borderWidth: 1,
+        borderColor: colors.warning,
+        padding: spacing.md,
+        ...typography.body,
         color: colors.text,
         textAlign: 'center',
         marginBottom: spacing.xl,
@@ -327,15 +320,15 @@ const styles = StyleSheet.create({
         flexDirection: "row",
         gap: spacing.md,
     },
-    cancelButton: {
-        flex: 1,
-        backgroundColor: colors.glass.backgroundLight,
-        paddingVertical: spacing.md,
-        borderRadius: radius.md,
-        alignItems: "center",
-        borderWidth: 1,
-        borderColor: colors.glass.borderLight,
-    },
+    cancelButton: {
+        flex: 1,
+        backgroundColor: colors.background,
+        paddingVertical: spacing.md,
+        borderRadius: radius.md,
+        alignItems: "center",
+        borderWidth: 1,
+        borderColor: colors.border,
+    },
     cancelButtonText: {
         ...typography.body,
         color: colors.textSecondary,
diff --git a/apps/mobile/src/features/profile/components/ScreenHeader.tsx b/apps/mobile/src/features/profile/components/ScreenHeader.tsx
index 449a2d0..c3ed7a5 100644
--- a/apps/mobile/src/features/profile/components/ScreenHeader.tsx
+++ b/apps/mobile/src/features/profile/components/ScreenHeader.tsx
@@ -53,14 +53,16 @@ const styles = StyleSheet.create({
         borderBottomWidth: 1,
         borderBottomColor: `${featureColors.profile.accent}15`,
     },
-    backButton: {
-        width: 40,
-        height: 40,
-        borderRadius: 20,
-        backgroundColor: colors.glass.background,
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
+    backButton: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        backgroundColor: colors.backgroundLight,
+        borderWidth: 1,
+        borderColor: colors.border,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
     title: {
         ...typography.headline,
         color: colors.text,
diff --git a/apps/mobile/src/features/profile/components/SettingsSection.tsx b/apps/mobile/src/features/profile/components/SettingsSection.tsx
index 05f99c5..77b73c6 100644
--- a/apps/mobile/src/features/profile/components/SettingsSection.tsx
+++ b/apps/mobile/src/features/profile/components/SettingsSection.tsx
@@ -14,7 +14,7 @@ export interface SettingsSectionProps {
 }
 
 /**
- * Reusable settings section with title and glass card container.
+ * Reusable settings section with title and solid card container.
  */
 export function SettingsSection({ title, delay = 200, children }: SettingsSectionProps) {
     return (
diff --git a/apps/mobile/src/features/profile/components/SubscriptionCard.tsx b/apps/mobile/src/features/profile/components/SubscriptionCard.tsx
index 5aca151..3aa1bd0 100644
--- a/apps/mobile/src/features/profile/components/SubscriptionCard.tsx
+++ b/apps/mobile/src/features/profile/components/SubscriptionCard.tsx
@@ -242,24 +242,57 @@ const styles = StyleSheet.create({
         ...StyleSheet.absoluteFillObject,
         opacity: 0.3,
     },
-    proCardInner: {
-        backgroundColor: 'rgba(22, 33, 62, 0.8)',
-        margin: 1,
-        borderRadius: radius.lg - 1,
-        padding: spacing.md,
-    },
+    proCardInner: {
+        backgroundColor: colors.backgroundLight, // Solid/Flat background
+        margin: 1,
+        borderRadius: radius.lg - 1,
+        padding: spacing.md,
+    },
+    // ...
+    proBadge: {
+        width: 36,
+        height: 36,
+        borderRadius: 18,
+        justifyContent: 'center',
+        alignItems: 'center',
+        // Removed glow
+    },
+    // ...
+    manageButton: {
+        paddingHorizontal: spacing.md,
+        paddingVertical: spacing.sm,
+        borderRadius: radius.md,
+        backgroundColor: colors.background,
+        borderWidth: 1,
+        borderColor: colors.border,
+    },
+    // ...
+    proStatusRow: {
+        flexDirection: 'row',
+        marginTop: spacing.md,
+        paddingTop: spacing.md,
+        borderTopWidth: 1,
+        borderTopColor: colors.border,
+        gap: spacing.lg,
+    },
+    // ...
+    freeCardInner: {
+        backgroundColor: colors.backgroundLight, // Solid/Flat background
+        margin: 1,
+        borderRadius: radius.lg - 1,
+        padding: spacing.lg,
+    },
+    // ...
+    ctaButtonContainer: {
+        borderRadius: radius.md,
+        overflow: 'hidden',
+        // Removed glow
+    },
     proHeader: {
         flexDirection: 'row',
         alignItems: 'center',
     },
-    proBadge: {
-        width: 36,
-        height: 36,
-        borderRadius: 18,
-        justifyContent: 'center',
-        alignItems: 'center',
-        ...shadows.glow(colors.premium.gold),
-    },
+
     proHeaderText: {
         flex: 1,
         marginLeft: spacing.md,
@@ -274,27 +307,13 @@ const styles = StyleSheet.create({
         color: colors.textTertiary,
         marginTop: 2,
     },
-    manageButton: {
-        paddingHorizontal: spacing.md,
-        paddingVertical: spacing.sm,
-        borderRadius: radius.md,
-        backgroundColor: colors.glass.background,
-        borderWidth: 1,
-        borderColor: `${colors.premium.gold}40`,
-    },
+
     manageButtonText: {
         ...typography.subhead,
         color: colors.premium.gold,
         fontWeight: '600',
     },
-    proStatusRow: {
-        flexDirection: 'row',
-        marginTop: spacing.md,
-        paddingTop: spacing.md,
-        borderTopWidth: 1,
-        borderTopColor: colors.glass.border,
-        gap: spacing.lg,
-    },
+
     proStatusItem: {
         flexDirection: 'row',
         alignItems: 'center',
@@ -313,12 +332,7 @@ const styles = StyleSheet.create({
     freeBorderGradient: {
         ...StyleSheet.absoluteFillObject,
     },
-    freeCardInner: {
-        backgroundColor: 'rgba(22, 33, 62, 0.85)',
-        margin: 1,
-        borderRadius: radius.lg - 1,
-        padding: spacing.lg,
-    },
+
     freeHeader: {
         alignItems: 'center',
         marginBottom: spacing.lg,
@@ -358,11 +372,7 @@ const styles = StyleSheet.create({
         ...typography.body,
         color: colors.text,
     },
-    ctaButtonContainer: {
-        borderRadius: radius.md,
-        overflow: 'hidden',
-        ...shadows.glow(colors.premium.gold),
-    },
+
     ctaButton: {
         flexDirection: 'row',
         alignItems: 'center',
diff --git a/apps/mobile/src/features/profile/screens/ProfileSettingsScreen.tsx b/apps/mobile/src/features/profile/screens/ProfileSettingsScreen.tsx
index dc8c83d..618ece5 100644
--- a/apps/mobile/src/features/profile/screens/ProfileSettingsScreen.tsx
+++ b/apps/mobile/src/features/profile/screens/ProfileSettingsScreen.tsx
@@ -16,7 +16,7 @@ import { Ionicons } from '@expo/vector-icons';
 import { LinearGradient } from 'expo-linear-gradient';
 import Animated, { FadeInDown } from 'react-native-reanimated';
 
-import { GradientBackground, GlassCard, GlassButton } from '../../../components/ui';
+import { GradientBackground } from '../../../components/ui';
 import { colors, featureColors, spacing, typography, radius } from '../../../theme';
 import { useAuthStore } from '../../../store';
 import { supabase } from '../../../lib/supabase';
@@ -53,7 +53,7 @@ const GENDER_OPTIONS: { value: Gender; label: string; icon: string }[] = [
  * Profile settings sub-screen for editing avatar, display name, and gender.
  */
 export function ProfileSettingsScreen() {
-    const { user, fetchUser } = useAuthStore();
+    const { user, fetchUser, isAnonymous } = useAuthStore();
     const settings = useProfileSettings();
     const authEmail = useAuthEmail();
 
@@ -260,10 +260,12 @@ export function ProfileSettingsScreen() {
                             color={colors.textTertiary}
                             style={styles.inputIcon}
                         />
-                        <Text style={styles.readOnlyText}>{authEmail || 'Loading...'}</Text>
+                        <Text style={styles.readOnlyText}>
+                            {authEmail || (isAnonymous ? 'Guest account' : 'Loading...')}
+                        </Text>
                     </View>
                     <Text style={styles.inputHint}>
-                        Email cannot be changed
+                        {isAnonymous ? 'Save your account to add an email' : 'Email cannot be changed'}
                     </Text>
                 </SettingsSection>
 
@@ -300,11 +302,41 @@ const styles = StyleSheet.create({
         padding: 4,
         justifyContent: 'center',
         alignItems: 'center',
-        shadowColor: featureColors.profile.accent,
-        shadowOffset: { width: 0, height: 4 },
-        shadowOpacity: 0.3,
-        shadowRadius: 8,
-        elevation: 6,
+        // Removed shadows
+    },
+    // ...
+    inputContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: colors.background, // Flat
+        borderRadius: radius.md,
+        borderWidth: 1,
+        borderColor: colors.border,
+        paddingHorizontal: spacing.md,
+    },
+    // ...
+    readOnlyField: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: colors.backgroundLight,
+        borderRadius: radius.md,
+        borderWidth: 1,
+        borderColor: colors.border,
+        paddingHorizontal: spacing.md,
+        paddingVertical: spacing.md,
+        opacity: 0.7,
+    },
+    // ...
+    genderOption: {
+        width: '48%',
+        alignItems: 'center',
+        backgroundColor: colors.backgroundLight,
+        borderRadius: radius.lg,
+        borderWidth: 2,
+        borderColor: colors.border,
+        paddingVertical: spacing.md,
+        paddingHorizontal: spacing.sm,
+        gap: spacing.xs,
     },
     avatarImage: {
         width: '100%',
@@ -354,15 +386,7 @@ const styles = StyleSheet.create({
         color: colors.textTertiary,
     },
     // Input
-    inputContainer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        backgroundColor: colors.glass.background,
-        borderRadius: radius.md,
-        borderWidth: 1,
-        borderColor: colors.glass.border,
-        paddingHorizontal: spacing.md,
-    },
+
     inputIcon: {
         marginRight: spacing.sm,
     },
@@ -379,17 +403,7 @@ const styles = StyleSheet.create({
         marginLeft: spacing.xs,
     },
     // Read-only field
-    readOnlyField: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        backgroundColor: colors.glass.background,
-        borderRadius: radius.md,
-        borderWidth: 1,
-        borderColor: colors.glass.border,
-        paddingHorizontal: spacing.md,
-        paddingVertical: spacing.md,
-        opacity: 0.7,
-    },
+
     readOnlyText: {
         ...typography.body,
         color: colors.textSecondary,
@@ -405,17 +419,7 @@ const styles = StyleSheet.create({
         flexWrap: 'wrap',
         gap: spacing.sm,
     },
-    genderOption: {
-        width: '48%',
-        alignItems: 'center',
-        backgroundColor: colors.glass.background,
-        borderRadius: radius.lg,
-        borderWidth: 2,
-        borderColor: colors.glass.border,
-        paddingVertical: spacing.md,
-        paddingHorizontal: spacing.sm,
-        gap: spacing.xs,
-    },
+
     genderOptionSelected: {
         borderColor: colors.primary,
         backgroundColor: colors.primaryLight,
diff --git a/apps/mobile/src/features/profile/screens/SaveAccountScreen.tsx b/apps/mobile/src/features/profile/screens/SaveAccountScreen.tsx
index b889a1a..4247541 100644
--- a/apps/mobile/src/features/profile/screens/SaveAccountScreen.tsx
+++ b/apps/mobile/src/features/profile/screens/SaveAccountScreen.tsx
@@ -510,7 +510,7 @@ const styles = StyleSheet.create({
     },
     modeToggleContainer: {
         flexDirection: "row",
-        backgroundColor: colors.glass.background,
+        backgroundColor: colors.backgroundLight,
         borderRadius: radius.md,
         padding: 4,
         marginBottom: spacing.md,
diff --git a/apps/mobile/src/features/profile/screens/SupportScreen.tsx b/apps/mobile/src/features/profile/screens/SupportScreen.tsx
index 4d554d1..258486b 100644
--- a/apps/mobile/src/features/profile/screens/SupportScreen.tsx
+++ b/apps/mobile/src/features/profile/screens/SupportScreen.tsx
@@ -58,11 +58,11 @@ const styles = StyleSheet.create({
         paddingTop: spacing.lg,
         paddingBottom: Platform.OS === 'ios' ? 40 : 20,
     },
-    divider: {
-        height: 1,
-        backgroundColor: colors.glass.border,
-        marginVertical: spacing.md,
-    },
-});
+    divider: {
+        height: 1,
+        backgroundColor: colors.border,
+        marginVertical: spacing.md,
+    },
+});
 
 export default SupportScreen;
diff --git a/apps/mobile/src/hooks/index.ts b/apps/mobile/src/hooks/index.ts
index ad78263..6b01130 100644
--- a/apps/mobile/src/hooks/index.ts
+++ b/apps/mobile/src/hooks/index.ts
@@ -8,3 +8,11 @@ export type { UseTypingIndicatorConfig, UseTypingIndicatorReturn } from './useTy
 export { useMessageSubscription } from './useMessageSubscription';
 export type { UseMessageSubscriptionConfig, UseMessageSubscriptionReturn } from './useMessageSubscription';
 export { useMediaSaver } from './useMediaSaver';
+export { useResponseMediaUpload } from './useResponseMediaUpload';
+export type {
+    UseResponseMediaUploadOptions,
+    UseResponseMediaUploadReturn,
+    UploadResult,
+} from './useResponseMediaUpload';
+export { useAudioRecorder } from './useAudioRecorder';
+export type { UseAudioRecorderOptions, RecordingState } from './useAudioRecorder';
diff --git a/apps/mobile/src/hooks/useAudioRecorder.ts b/apps/mobile/src/hooks/useAudioRecorder.ts
new file mode 100644
index 0000000..8b75c77
--- /dev/null
+++ b/apps/mobile/src/hooks/useAudioRecorder.ts
@@ -0,0 +1,240 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { Alert } from 'react-native';
+import { Audio } from 'expo-av';
+
+export interface UseAudioRecorderOptions {
+    /** Maximum recording duration in seconds. Default: 60 */
+    maxDurationSeconds?: number;
+    /** Callback when recording completes (either manually or via auto-stop) */
+    onRecordingComplete?: (uri: string, durationSeconds: number) => void;
+}
+
+export type RecordingState = 'idle' | 'recording' | 'stopped';
+
+const DEFAULT_OPTIONS: Required<Omit<UseAudioRecorderOptions, 'onRecordingComplete'>> = {
+    maxDurationSeconds: 60,
+};
+
+/**
+ * Hook for audio recording functionality using expo-av.
+ * Handles microphone permissions, recording lifecycle, and cleanup.
+ *
+ * @param options - Optional configuration for recording
+ * @returns Audio recorder state and controls
+ */
+export const useAudioRecorder = (options?: UseAudioRecorderOptions) => {
+    const settings = {
+        ...DEFAULT_OPTIONS,
+        ...options,
+    };
+
+    const [state, setState] = useState<RecordingState>('idle');
+    const [durationSeconds, setDurationSeconds] = useState(0);
+    const [recordingUri, setRecordingUri] = useState<string | null>(null);
+
+    // Refs to track recording instance and cleanup
+    const recordingRef = useRef<Audio.Recording | null>(null);
+    const onRecordingCompleteRef = useRef(options?.onRecordingComplete);
+
+    // Keep the callback ref up to date
+    useEffect(() => {
+        onRecordingCompleteRef.current = options?.onRecordingComplete;
+    }, [options?.onRecordingComplete]);
+
+    /**
+     * Request microphone permissions with user-friendly error handling.
+     * @returns true if granted, false otherwise
+     */
+    const requestPermission = useCallback(async (): Promise<boolean> => {
+        const { status } = await Audio.requestPermissionsAsync();
+        if (status !== 'granted') {
+            Alert.alert(
+                'Microphone Permission',
+                'Please allow microphone access to record audio.'
+            );
+            return false;
+        }
+        return true;
+    }, []);
+
+    /**
+     * Stop the current recording and return the result.
+     * @returns Object with uri and duration, or null if no recording
+     */
+    const stopRecording = useCallback(async (): Promise<{ uri: string; duration: number } | null> => {
+        const recording = recordingRef.current;
+        if (!recording) {
+            return null;
+        }
+
+        try {
+            // Get final status before stopping
+            const status = await recording.getStatusAsync();
+            const finalDurationMs = status.isRecording ? status.durationMillis : 0;
+            const finalDurationSeconds = Math.round(finalDurationMs / 1000);
+
+            // Stop and unload the recording
+            await recording.stopAndUnloadAsync();
+
+            // Reset audio mode to allow playback
+            await Audio.setAudioModeAsync({
+                allowsRecordingIOS: false,
+                playsInSilentModeIOS: true,
+            });
+
+            const uri = recording.getURI();
+            recordingRef.current = null;
+
+            if (uri) {
+                setRecordingUri(uri);
+                setState('stopped');
+                setDurationSeconds(finalDurationSeconds);
+
+                // Call the completion callback if provided
+                if (onRecordingCompleteRef.current) {
+                    onRecordingCompleteRef.current(uri, finalDurationSeconds);
+                }
+
+                return { uri, duration: finalDurationSeconds };
+            }
+
+            setState('idle');
+            return null;
+        } catch (error) {
+            console.error('Error stopping recording:', error);
+            recordingRef.current = null;
+            setState('idle');
+            return null;
+        }
+    }, []);
+
+    /**
+     * Start a new audio recording.
+     * @returns true if recording started successfully, false otherwise
+     */
+    const startRecording = useCallback(async (): Promise<boolean> => {
+        // Don't start if already recording
+        if (recordingRef.current) {
+            return false;
+        }
+
+        try {
+            // Request permission
+            const hasPermission = await requestPermission();
+            if (!hasPermission) {
+                return false;
+            }
+
+            // Configure audio mode for recording
+            await Audio.setAudioModeAsync({
+                allowsRecordingIOS: true,
+                playsInSilentModeIOS: true,
+            });
+
+            // Reset state
+            setDurationSeconds(0);
+            setRecordingUri(null);
+            setState('recording');
+
+            // Create and start the recording
+            const { recording } = await Audio.Recording.createAsync(
+                Audio.RecordingOptionsPresets.HIGH_QUALITY
+            );
+
+            recordingRef.current = recording;
+
+            // Set up status update callback to track duration
+            recording.setOnRecordingStatusUpdate((status) => {
+                if (status.isRecording) {
+                    const currentSeconds = Math.round(status.durationMillis / 1000);
+                    setDurationSeconds(currentSeconds);
+
+                    // Auto-stop if max duration reached
+                    if (currentSeconds >= settings.maxDurationSeconds) {
+                        stopRecording();
+                    }
+                }
+            });
+
+            // Set progress update interval (100ms for smooth duration updates)
+            recording.setProgressUpdateInterval(100);
+
+            return true;
+        } catch (error) {
+            console.error('Error starting recording:', error);
+            recordingRef.current = null;
+            setState('idle');
+
+            // Reset audio mode on error
+            try {
+                await Audio.setAudioModeAsync({
+                    allowsRecordingIOS: false,
+                    playsInSilentModeIOS: true,
+                });
+            } catch {
+                // Ignore errors during cleanup
+            }
+
+            return false;
+        }
+    }, [requestPermission, settings.maxDurationSeconds, stopRecording]);
+
+    /**
+     * Reset the recording state to idle.
+     * Cleans up any existing recording.
+     */
+    const resetRecording = useCallback(() => {
+        // Clean up any existing recording
+        if (recordingRef.current) {
+            try {
+                recordingRef.current.stopAndUnloadAsync().catch(() => {
+                    // Ignore errors during cleanup
+                });
+            } catch {
+                // Ignore errors during cleanup
+            }
+            recordingRef.current = null;
+        }
+
+        setState('idle');
+        setDurationSeconds(0);
+        setRecordingUri(null);
+    }, []);
+
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            if (recordingRef.current) {
+                recordingRef.current.stopAndUnloadAsync().catch(() => {
+                    // Ignore errors during cleanup
+                });
+                recordingRef.current = null;
+            }
+
+            // Reset audio mode
+            Audio.setAudioModeAsync({
+                allowsRecordingIOS: false,
+                playsInSilentModeIOS: true,
+            }).catch(() => {
+                // Ignore errors during cleanup
+            });
+        };
+    }, []);
+
+    return {
+        /** Current recording state: 'idle', 'recording', or 'stopped' */
+        state,
+        /** Current recording duration in seconds */
+        durationSeconds,
+        /** URI of the recorded audio file (available when state is 'stopped') */
+        recordingUri,
+        /** Start a new recording. Returns true if successful. */
+        startRecording,
+        /** Stop the current recording. Returns the uri and duration, or null. */
+        stopRecording,
+        /** Reset state to idle and clean up any recording. */
+        resetRecording,
+        /** Request microphone permission. Returns true if granted. */
+        requestPermission,
+    };
+};
diff --git a/apps/mobile/src/hooks/useResponseMediaUpload.ts b/apps/mobile/src/hooks/useResponseMediaUpload.ts
new file mode 100644
index 0000000..4e43771
--- /dev/null
+++ b/apps/mobile/src/hooks/useResponseMediaUpload.ts
@@ -0,0 +1,191 @@
+import { useState, useCallback, useRef } from 'react';
+import { Platform } from 'react-native';
+import * as FileSystem from 'expo-file-system';
+import { decode } from 'base64-arraybuffer';
+
+import { supabase } from '../lib/supabase';
+
+export interface UseResponseMediaUploadOptions {
+    userId: string;
+    questionId: string;
+}
+
+export interface UploadResult {
+    success: boolean;
+    /** Storage path, e.g., "user123/question456_1706189234.jpg" */
+    mediaPath?: string;
+    error?: string;
+}
+
+export interface UseResponseMediaUploadReturn {
+    /** Whether an upload is in progress */
+    uploading: boolean;
+    /** Upload a photo to response-media storage */
+    uploadPhoto: (localUri: string) => Promise<UploadResult>;
+    /** Upload an audio file to response-media storage */
+    uploadAudio: (localUri: string, durationSeconds: number) => Promise<UploadResult>;
+}
+
+/**
+ * Hook for uploading response media (photos and audio) to Supabase storage.
+ * Uploads to the `response-media` bucket with path format: {userId}/{questionId}_{timestamp}.{ext}
+ */
+export function useResponseMediaUpload(
+    options: UseResponseMediaUploadOptions
+): UseResponseMediaUploadReturn {
+    const [uploading, setUploading] = useState(false);
+
+    // Use ref for options to avoid stale closures
+    const optionsRef = useRef(options);
+    optionsRef.current = options;
+
+    const uploadPhoto = useCallback(async (localUri: string): Promise<UploadResult> => {
+        const { userId, questionId } = optionsRef.current;
+
+        if (!userId || !questionId) {
+            return { success: false, error: 'Missing userId or questionId' };
+        }
+
+        setUploading(true);
+
+        try {
+            let fileBody;
+            let ext = 'jpg';
+
+            if (Platform.OS === 'web') {
+                const response = await fetch(localUri);
+                const blob = await response.blob();
+                fileBody = blob;
+
+                // Detect extension from blob type
+                if (blob.type === 'image/png') ext = 'png';
+                else if (blob.type === 'image/webp') ext = 'webp';
+                else if (blob.type === 'image/gif') ext = 'gif';
+            } else {
+                const base64 = await FileSystem.readAsStringAsync(localUri, {
+                    encoding: FileSystem.EncodingType.Base64,
+                });
+                fileBody = decode(base64);
+
+                // Try to get extension from URI
+                const uriExt = localUri.split('.').pop()?.toLowerCase();
+                if (uriExt && ['jpg', 'jpeg', 'png', 'webp', 'gif'].includes(uriExt)) {
+                    ext = uriExt === 'jpeg' ? 'jpg' : uriExt;
+                }
+            }
+
+            const timestamp = Date.now();
+            const mediaPath = `${userId}/${questionId}_${timestamp}.${ext}`;
+            const contentType = `image/${ext === 'jpg' ? 'jpeg' : ext}`;
+
+            const { error: uploadError } = await supabase.storage
+                .from('response-media')
+                .upload(mediaPath, fileBody, {
+                    contentType,
+                    upsert: false,
+                });
+
+            if (uploadError) {
+                console.error('Error uploading photo:', uploadError);
+                return { success: false, error: uploadError.message };
+            }
+
+            return { success: true, mediaPath };
+        } catch (error) {
+            console.error('Error uploading photo:', error);
+            return {
+                success: false,
+                error: error instanceof Error ? error.message : 'Unknown error',
+            };
+        } finally {
+            setUploading(false);
+        }
+    }, []);
+
+    const uploadAudio = useCallback(
+        async (localUri: string, _durationSeconds: number): Promise<UploadResult> => {
+            const { userId, questionId } = optionsRef.current;
+
+            if (!userId || !questionId) {
+                return { success: false, error: 'Missing userId or questionId' };
+            }
+
+            setUploading(true);
+
+            try {
+                let fileBody;
+                let ext = 'm4a';
+                let contentType = 'audio/m4a';
+
+                if (Platform.OS === 'web') {
+                    const response = await fetch(localUri);
+                    const blob = await response.blob();
+                    fileBody = blob;
+
+                    // Detect extension from blob type
+                    if (blob.type === 'audio/mpeg' || blob.type === 'audio/mp3') {
+                        ext = 'mp3';
+                        contentType = 'audio/mpeg';
+                    } else if (blob.type === 'audio/wav') {
+                        ext = 'wav';
+                        contentType = 'audio/wav';
+                    } else if (blob.type === 'audio/webm') {
+                        ext = 'webm';
+                        contentType = 'audio/webm';
+                    } else if (blob.type === 'audio/mp4' || blob.type === 'audio/x-m4a') {
+                        ext = 'm4a';
+                        contentType = 'audio/m4a';
+                    }
+                } else {
+                    const base64 = await FileSystem.readAsStringAsync(localUri, {
+                        encoding: FileSystem.EncodingType.Base64,
+                    });
+                    fileBody = decode(base64);
+
+                    // Try to get extension from URI
+                    const uriExt = localUri.split('.').pop()?.toLowerCase();
+                    if (uriExt && ['m4a', 'mp3', 'wav', 'aac', 'caf'].includes(uriExt)) {
+                        ext = uriExt;
+                        if (ext === 'mp3') contentType = 'audio/mpeg';
+                        else if (ext === 'wav') contentType = 'audio/wav';
+                        else if (ext === 'aac') contentType = 'audio/aac';
+                        else if (ext === 'caf') contentType = 'audio/x-caf';
+                        else contentType = 'audio/m4a';
+                    }
+                }
+
+                const timestamp = Date.now();
+                const mediaPath = `${userId}/${questionId}_${timestamp}.${ext}`;
+
+                const { error: uploadError } = await supabase.storage
+                    .from('response-media')
+                    .upload(mediaPath, fileBody, {
+                        contentType,
+                        upsert: false,
+                    });
+
+                if (uploadError) {
+                    console.error('Error uploading audio:', uploadError);
+                    return { success: false, error: uploadError.message };
+                }
+
+                return { success: true, mediaPath };
+            } catch (error) {
+                console.error('Error uploading audio:', error);
+                return {
+                    success: false,
+                    error: error instanceof Error ? error.message : 'Unknown error',
+                };
+            } finally {
+                setUploading(false);
+            }
+        },
+        []
+    );
+
+    return {
+        uploading,
+        uploadPhoto,
+        uploadAudio,
+    };
+}
diff --git a/apps/mobile/src/lib/imageCache.ts b/apps/mobile/src/lib/imageCache.ts
index b944666..a954ae6 100644
--- a/apps/mobile/src/lib/imageCache.ts
+++ b/apps/mobile/src/lib/imageCache.ts
@@ -60,14 +60,14 @@ export async function getCachedSignedUrl(
 /**
  * Extract storage path from media_path (handles both old full URLs and new path-only format)
  */
-export function getStoragePath(mediaPath: string): string {
-    if (mediaPath.startsWith('http')) {
-        // Old format: extract path from full URL
-        const match = mediaPath.match(/\/chat-media\/(.+)$/);
-        return match ? match[1] : mediaPath;
-    }
-    return mediaPath;
-}
+export function getStoragePath(mediaPath: string): string {
+    if (mediaPath.startsWith('http')) {
+        // Old format: extract path from full URL
+        const match = mediaPath.match(/\/(chat-media|response-media)\/(.+)$/);
+        return match ? match[2] : mediaPath;
+    }
+    return mediaPath;
+}
 
 /**
  * Clear expired URLs from the cache to free memory.
diff --git a/apps/mobile/src/lib/notifications.ts b/apps/mobile/src/lib/notifications.ts
index f3ef6da..3b7c9f3 100644
--- a/apps/mobile/src/lib/notifications.ts
+++ b/apps/mobile/src/lib/notifications.ts
@@ -5,6 +5,7 @@ import { router } from "expo-router";
 import { supabase } from "./supabase";
 import { captureError } from "./sentry";
 import { Events } from "./analytics";
+import { useMatchStore } from "../store/matchStore";
 
 // Configure notification behavior for foreground
 // We don't show system alerts since the app handles notifications with in-app toasts
@@ -17,13 +18,13 @@ Notifications.setNotificationHandler({
 });
 
 // Types
-export interface NotificationData {
-  type: "match" | "message" | "match_digest";
-  match_id?: string;
-  message_id?: string;
-  count?: number;
-}
-
+export interface NotificationData {
+  type: "match" | "message" | "match_digest" | "partner_activity" | "nudge";
+  match_id?: string;
+  message_id?: string;
+  count?: number;
+}
+
 
 /**
  * Request notification permissions and get Expo push token.
@@ -221,28 +222,42 @@ export async function checkAndRegisterPushToken(userId: string): Promise<boolean
 /**
  * Handle notification tap - navigate to appropriate screen.
  */
-export function handleNotificationResponse(
-  response: Notifications.NotificationResponse
-): void {
-  const data = response.notification.request.content.data as NotificationData;
-
-  if (!data) {
-    return;
-  }
-
-  if (data.type === "match_digest") {
-    router.push("/(app)/matches");
-    return;
-  }
-
-  if (!data.match_id) {
-    return;
-  }
-
-  // Both match and message notifications navigate to chat
-  router.push(`/(app)/chat/${data.match_id}`);
-}
-
+export function handleNotificationResponse(
+  response: Notifications.NotificationResponse
+): void {
+  const data = response.notification.request.content.data as NotificationData;
+
+  if (!data) {
+    return;
+  }
+
+  if (data.type === "match_digest") {
+    router.push("/(app)/matches");
+    return;
+  }
+
+  if (data.type === "nudge") {
+    // Navigate to Matches > Your Turn tab
+    useMatchStore.getState().setCurrentView('pending');
+    router.push("/(app)/matches");
+    return;
+  }
+
+  if (data.type === "partner_activity") {
+    // Navigate to Matches > Your Turn tab (questions to answer)
+    useMatchStore.getState().setCurrentView('pending');
+    router.push("/(app)/matches");
+    return;
+  }
+
+  if (!data.match_id) {
+    return;
+  }
+
+  // Both match and message notifications navigate to chat
+  router.push(`/(app)/chat/${data.match_id}`);
+}
+
 
 /**
  * Set up listener for notification taps (when app is running).
diff --git a/apps/mobile/src/lib/onboardingPaywallSeen.ts b/apps/mobile/src/lib/onboardingPaywallSeen.ts
new file mode 100644
index 0000000..8356b54
--- /dev/null
+++ b/apps/mobile/src/lib/onboardingPaywallSeen.ts
@@ -0,0 +1,49 @@
+import * as SecureStore from "expo-secure-store";
+import { Platform } from "react-native";
+
+const STORAGE_KEY_PREFIX = "onboarding_paywall_seen";
+
+const buildKey = (userId: string): string => `${STORAGE_KEY_PREFIX}_${userId}`;
+
+async function getStorage(key: string): Promise<boolean> {
+    try {
+        let data: string | null = null;
+
+        if (Platform.OS === "web") {
+            if (typeof window !== "undefined" && typeof window.localStorage !== "undefined") {
+                data = window.localStorage.getItem(key);
+            }
+        } else {
+            data = await SecureStore.getItemAsync(key);
+        }
+
+        return data === "true";
+    } catch (error) {
+        console.error("Error reading onboarding paywall state:", error);
+    }
+    return false;
+}
+
+async function setStorage(key: string, seen: boolean): Promise<void> {
+    try {
+        const data = seen ? "true" : "false";
+
+        if (Platform.OS === "web") {
+            if (typeof window !== "undefined" && typeof window.localStorage !== "undefined") {
+                window.localStorage.setItem(key, data);
+            }
+        } else {
+            await SecureStore.setItemAsync(key, data);
+        }
+    } catch (error) {
+        console.error("Error saving onboarding paywall state:", error);
+    }
+}
+
+export async function hasSeenOnboardingPaywall(userId: string): Promise<boolean> {
+    return getStorage(buildKey(userId));
+}
+
+export async function markOnboardingPaywallSeen(userId: string): Promise<void> {
+    await setStorage(buildKey(userId), true);
+}
diff --git a/apps/mobile/src/lib/revenuecat.ts b/apps/mobile/src/lib/revenuecat.ts
index 5cb5db9..d475c95 100644
--- a/apps/mobile/src/lib/revenuecat.ts
+++ b/apps/mobile/src/lib/revenuecat.ts
@@ -145,7 +145,7 @@ class RevenueCatService {
         return result.current;
     }
 
-    async getOfferingsDebug(): Promise<{
+    async getOfferingsDebug(offeringIdentifier?: string): Promise<{
         current: PurchasesOffering | null;
         availableOfferings: string[] | null;
         error: string | null;
@@ -162,8 +162,17 @@ class RevenueCatService {
             const offerings = await this.Purchases.getOfferings();
             const availableOfferings = Object.keys(offerings.all || {});
 
+            // If a specific offering is requested, try to get it
+            let targetOffering = offerings.current;
+            if (offeringIdentifier && offerings.all?.[offeringIdentifier]) {
+                console.log(`RevenueCat: Using offering "${offeringIdentifier}"`);
+                targetOffering = offerings.all[offeringIdentifier];
+            } else if (offeringIdentifier) {
+                console.log(`RevenueCat: Offering "${offeringIdentifier}" not found, falling back to current`);
+            }
+
             return {
-                current: offerings.current,
+                current: targetOffering,
                 availableOfferings,
                 error: null
             };
diff --git a/apps/mobile/src/lib/swipeTutorialSeen.ts b/apps/mobile/src/lib/swipeTutorialSeen.ts
deleted file mode 100644
index 71300b0..0000000
--- a/apps/mobile/src/lib/swipeTutorialSeen.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import * as SecureStore from "expo-secure-store";
-import { Platform } from "react-native";
-
-const STORAGE_KEY = "swipe_tutorial_seen";
-
-async function getStorage(): Promise<boolean> {
-    try {
-        let data: string | null = null;
-
-        if (Platform.OS === "web") {
-            if (typeof window !== "undefined" && typeof window.localStorage !== "undefined") {
-                data = window.localStorage.getItem(STORAGE_KEY);
-            }
-        } else {
-            data = await SecureStore.getItemAsync(STORAGE_KEY);
-        }
-
-        return data === "true";
-    } catch (error) {
-        console.error("Error reading swipe tutorial state:", error);
-    }
-    return false;
-}
-
-async function setStorage(seen: boolean): Promise<void> {
-    try {
-        const data = seen ? "true" : "false";
-
-        if (Platform.OS === "web") {
-            if (typeof window !== "undefined" && typeof window.localStorage !== "undefined") {
-                window.localStorage.setItem(STORAGE_KEY, data);
-            }
-        } else {
-            await SecureStore.setItemAsync(STORAGE_KEY, data);
-        }
-    } catch (error) {
-        console.error("Error saving swipe tutorial state:", error);
-    }
-}
-
-export async function hasSeenSwipeTutorial(): Promise<boolean> {
-    return getStorage();
-}
-
-export async function markSwipeTutorialSeen(): Promise<void> {
-    await setStorage(true);
-}
-
-export async function resetSwipeTutorial(): Promise<void> {
-    await setStorage(false);
-}
diff --git a/apps/mobile/src/store/matchStore.ts b/apps/mobile/src/store/matchStore.ts
index b17649e..5021d8e 100644
--- a/apps/mobile/src/store/matchStore.ts
+++ b/apps/mobile/src/store/matchStore.ts
@@ -12,7 +12,19 @@ export interface PendingQuestion {
     partnerAnsweredAt: string;
 }
 
-type MatchViewType = 'active' | 'archived' | 'pending';
+type MatchViewType = 'active' | 'archived' | 'pending' | 'their_turn';
+
+// Rate limit: 12 hours in milliseconds
+const NUDGE_COOLDOWN_MS = 12 * 60 * 60 * 1000;
+
+interface NudgeResponse {
+    success: boolean;
+    notification_sent?: boolean;
+    reason?: string;
+    next_nudge_available_at?: string;
+    error?: string;
+    cooldown_remaining_seconds?: number;
+}
 
 interface MatchState {
     matches: Match[];
@@ -31,7 +43,13 @@ interface MatchState {
     // Pending (Your Turn) state
     pendingQuestions: PendingQuestion[];
     isLoadingPending: boolean;
+    // Their Turn state (user answered, partner hasn't)
+    theirTurnQuestions: PendingQuestion[];
+    isLoadingTheirTurn: boolean;
     currentView: MatchViewType;
+    // Nudge state
+    nudgeCooldownUntil: Date | null;
+    isNudging: boolean;
     // Methods
     fetchMatches: (refresh?: boolean) => Promise<void>;
     markAsSeen: (matchId: string) => Promise<void>;
@@ -47,7 +65,11 @@ interface MatchState {
     isMatchArchived: (matchId: string) => boolean;
     // Pending methods
     fetchPendingQuestions: () => Promise<void>;
+    fetchTheirTurnQuestions: () => Promise<void>;
     setCurrentView: (view: MatchViewType) => void;
+    // Nudge methods
+    sendNudge: () => Promise<{ success: boolean; notificationSent: boolean }>;
+    checkNudgeCooldown: () => Promise<void>;
 }
 
 export const useMatchStore = create<MatchState>((set, get) => ({
@@ -67,7 +89,13 @@ export const useMatchStore = create<MatchState>((set, get) => ({
     // Pending (Your Turn) state
     pendingQuestions: [],
     isLoadingPending: false,
+    // Their Turn state
+    theirTurnQuestions: [],
+    isLoadingTheirTurn: false,
     currentView: 'pending' as MatchViewType,
+    // Nudge state
+    nudgeCooldownUntil: null,
+    isNudging: false,
 
     fetchMatches: async (refresh = false) => {
         const userId = useAuthStore.getState().user?.id;
@@ -291,7 +319,11 @@ clearMatches: () => {
             isLoadingArchived: false,
             pendingQuestions: [],
             isLoadingPending: false,
+            theirTurnQuestions: [],
+            isLoadingTheirTurn: false,
             currentView: 'pending',
+            nudgeCooldownUntil: null,
+            isNudging: false,
         });
     },
 
@@ -547,6 +579,81 @@ clearMatches: () => {
         }
     },
 
+    // Their Turn methods (user answered, partner hasn't yet)
+    fetchTheirTurnQuestions: async () => {
+        const userId = useAuthStore.getState().user?.id;
+        const coupleId = useAuthStore.getState().user?.couple_id;
+
+        if (!coupleId || !userId) {
+            set({ theirTurnQuestions: [], isLoadingTheirTurn: false });
+            return;
+        }
+
+        const state = get();
+        if (state.isLoadingTheirTurn) return;
+
+        set({ isLoadingTheirTurn: true });
+
+        try {
+            // Get partner's user_id
+            const { data: coupleProfiles } = await supabase
+                .from("profiles")
+                .select("id")
+                .eq("couple_id", coupleId)
+                .neq("id", userId);
+
+            const partnerId = coupleProfiles?.[0]?.id;
+            if (!partnerId) {
+                set({ theirTurnQuestions: [], isLoadingTheirTurn: false });
+                return;
+            }
+
+            // Get questions the partner has already answered
+            const { data: partnerResponses } = await supabase
+                .from("responses")
+                .select("question_id")
+                .eq("user_id", partnerId)
+                .eq("couple_id", coupleId);
+
+            const partnerAnsweredQuestionIds = new Set(partnerResponses?.map(r => r.question_id) ?? []);
+
+            // Get user's responses (questions they answered that partner hasn't)
+            const { data: userResponses, error } = await supabase
+                .from("responses")
+                .select(`
+                    id,
+                    question_id,
+                    created_at,
+                    question:questions(
+                        *,
+                        pack:question_packs(id, name, icon)
+                    )
+                `)
+                .eq("user_id", userId)
+                .eq("couple_id", coupleId)
+                .order("created_at", { ascending: false });
+
+            if (error) throw error;
+
+            // Filter to only questions partner hasn't answered, excluding deleted questions
+            const theirTurnQuestions: PendingQuestion[] = (userResponses ?? [])
+                .filter(r => {
+                    const question = r.question as unknown as PendingQuestion['question'] | null;
+                    return !partnerAnsweredQuestionIds.has(r.question_id) && question && !(question as any).deleted_at;
+                })
+                .map(r => ({
+                    id: r.id,
+                    question: r.question as unknown as PendingQuestion['question'],
+                    partnerAnsweredAt: r.created_at, // Using user's answer time here
+                }));
+
+            set({ theirTurnQuestions, isLoadingTheirTurn: false });
+        } catch (err) {
+            console.error("Error fetching their turn questions:", err);
+            set({ isLoadingTheirTurn: false });
+        }
+    },
+
     setCurrentView: (view: MatchViewType) => {
         const state = get();
 
@@ -559,6 +666,107 @@ clearMatches: () => {
             get().fetchArchivedMatches();
         } else if (view === 'pending' && state.pendingQuestions.length === 0) {
             get().fetchPendingQuestions();
+        } else if (view === 'their_turn' && state.theirTurnQuestions.length === 0) {
+            get().fetchTheirTurnQuestions();
+        }
+    },
+
+    // Nudge methods
+    sendNudge: async () => {
+        const state = get();
+        if (state.isNudging) {
+            return { success: false, notificationSent: false };
+        }
+
+        // Check if still in cooldown
+        if (state.nudgeCooldownUntil && new Date() < state.nudgeCooldownUntil) {
+            return { success: false, notificationSent: false };
+        }
+
+        set({ isNudging: true });
+
+        try {
+            const { data: sessionData } = await supabase.auth.getSession();
+            const token = sessionData?.session?.access_token;
+
+            if (!token) {
+                set({ isNudging: false });
+                return { success: false, notificationSent: false };
+            }
+
+            const response = await fetch(
+                `${process.env.EXPO_PUBLIC_SUPABASE_URL}/functions/v1/send-nudge-notification`,
+                {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                        Authorization: `Bearer ${token}`,
+                    },
+                }
+            );
+
+            const data: NudgeResponse = await response.json();
+
+            if (response.status === 429) {
+                // Rate limited - update cooldown
+                const cooldownUntil = data.next_nudge_available_at
+                    ? new Date(data.next_nudge_available_at)
+                    : new Date(Date.now() + (data.cooldown_remaining_seconds || 0) * 1000);
+                set({ nudgeCooldownUntil: cooldownUntil, isNudging: false });
+                return { success: false, notificationSent: false };
+            }
+
+            if (!response.ok) {
+                console.error("Nudge error:", data.error);
+                set({ isNudging: false });
+                return { success: false, notificationSent: false };
+            }
+
+            // Success - update cooldown
+            const cooldownUntil = data.next_nudge_available_at
+                ? new Date(data.next_nudge_available_at)
+                : new Date(Date.now() + NUDGE_COOLDOWN_MS);
+
+            set({ nudgeCooldownUntil: cooldownUntil, isNudging: false });
+
+            return {
+                success: true,
+                notificationSent: data.notification_sent ?? false,
+            };
+        } catch (err) {
+            console.error("Error sending nudge:", err);
+            set({ isNudging: false });
+            return { success: false, notificationSent: false };
+        }
+    },
+
+    checkNudgeCooldown: async () => {
+        const userId = useAuthStore.getState().user?.id;
+        if (!userId) return;
+
+        try {
+            const { data: profile, error } = await supabase
+                .from("profiles")
+                .select("last_nudge_sent_at")
+                .eq("id", userId)
+                .maybeSingle();
+
+            if (error || !profile?.last_nudge_sent_at) {
+                set({ nudgeCooldownUntil: null });
+                return;
+            }
+
+            const lastNudge = new Date(profile.last_nudge_sent_at);
+            const cooldownUntil = new Date(lastNudge.getTime() + NUDGE_COOLDOWN_MS);
+
+            // Only set cooldown if it's still in the future
+            if (cooldownUntil > new Date()) {
+                set({ nudgeCooldownUntil: cooldownUntil });
+            } else {
+                set({ nudgeCooldownUntil: null });
+            }
+        } catch (err) {
+            console.error("Error checking nudge cooldown:", err);
         }
     },
 }));
diff --git a/apps/mobile/src/store/notificationPreferencesStore.ts b/apps/mobile/src/store/notificationPreferencesStore.ts
index 1c106cd..2663071 100644
--- a/apps/mobile/src/store/notificationPreferencesStore.ts
+++ b/apps/mobile/src/store/notificationPreferencesStore.ts
@@ -7,6 +7,7 @@ export interface NotificationPreferences {
     matches_enabled: boolean;
     messages_enabled: boolean;
     partner_activity_enabled: boolean;
+    nudges_enabled: boolean;
     pack_changes_enabled: boolean;
     new_packs_enabled: boolean;
     streak_milestones_enabled: boolean;
diff --git a/apps/mobile/src/store/responsesStore.ts b/apps/mobile/src/store/responsesStore.ts
index 50365ef..200bfa0 100644
--- a/apps/mobile/src/store/responsesStore.ts
+++ b/apps/mobile/src/store/responsesStore.ts
@@ -1,7 +1,7 @@
 import { create } from "zustand";
 import { supabase } from "../lib/supabase";
 import { invokeWithAuthRetry } from "../lib/authErrorHandler";
-import type { Question, QuestionPack, AnswerType } from "@/types";
+import type { Question, QuestionPack, AnswerType, ResponseData } from "@/types";
 import { useAuthStore } from "./authStore";
 import { useMatchStore } from "./matchStore";
 
@@ -10,6 +10,7 @@ export interface ResponseWithQuestion {
     id: string;
     question_id: string;
     answer: AnswerType;
+    response_data?: ResponseData | null;
     created_at: string;
     question: Question & {
         pack: Pick<QuestionPack, "id" | "name" | "icon">;
@@ -49,7 +50,8 @@ interface ResponsesState {
     updateResponse: (
         questionId: string,
         newAnswer: AnswerType,
-        confirmDelete?: boolean
+        confirmDelete?: boolean,
+        responseData?: ResponseData | null
     ) => Promise<UpdateResponseResult>;
     setGroupBy: (groupBy: GroupByOption) => void;
     setDateSortOrder: (order: DateSortOrder) => void;
@@ -108,6 +110,7 @@ export const useResponsesStore = create<ResponsesState>((set, get) => ({
                     id,
                     question_id,
                     answer,
+                    response_data,
                     created_at,
                     question:questions!inner(
                         id,
@@ -115,6 +118,8 @@ export const useResponsesStore = create<ResponsesState>((set, get) => ({
                         partner_text,
                         intensity,
                         pack_id,
+                        question_type,
+                        config,
                         pack:question_packs!inner(id, name, icon)
                     )
                 `)
@@ -180,6 +185,7 @@ export const useResponsesStore = create<ResponsesState>((set, get) => ({
                         id: r.id,
                         question_id: r.question_id,
                         answer: r.answer as AnswerType,
+                        response_data: (r as any).response_data as ResponseData | null,
                         created_at: r.created_at,
                         question: {
                             id: question.id,
@@ -187,6 +193,8 @@ export const useResponsesStore = create<ResponsesState>((set, get) => ({
                             partner_text: question.partner_text,
                             intensity: question.intensity,
                             pack_id: question.pack_id,
+                            question_type: question.question_type,
+                            config: question.config ?? null,
                             created_at: question.created_at || "",
                             pack: {
                                 id: pack.id,
@@ -219,13 +227,15 @@ export const useResponsesStore = create<ResponsesState>((set, get) => ({
     updateResponse: async (
         questionId: string,
         newAnswer: AnswerType,
-        confirmDelete = false
+        confirmDelete = false,
+        responseData?: ResponseData | null
     ): Promise<UpdateResponseResult> => {
         const { data, error } = await invokeWithAuthRetry("update-response", {
             body: {
                 question_id: questionId,
                 new_answer: newAnswer,
                 confirm_delete_match: confirmDelete,
+                response_data: responseData,
             },
         });
 
@@ -242,9 +252,16 @@ export const useResponsesStore = create<ResponsesState>((set, get) => ({
             set((state) => ({
                 responses: state.responses.map((r) => {
                     if (r.question_id === questionId) {
+                        const nextResponseData =
+                            newAnswer === "no"
+                                ? null
+                                : typeof responseData !== "undefined"
+                                  ? responseData
+                                  : r.response_data;
                         return {
                             ...r,
                             answer: newAnswer,
+                            response_data: nextResponseData,
                             // Update match status based on result
                             has_match: result.match_deleted
                                 ? false
diff --git a/apps/mobile/src/store/subscriptionStore.ts b/apps/mobile/src/store/subscriptionStore.ts
index 0ddcbe0..12dfe1a 100644
--- a/apps/mobile/src/store/subscriptionStore.ts
+++ b/apps/mobile/src/store/subscriptionStore.ts
@@ -7,28 +7,28 @@ import revenueCatService, {
 } from "../lib/revenuecat";
 import { useAuthStore } from "./authStore";
 
-export type PurchaseResult = {
-    success: boolean;
-    cancelled?: boolean;
-    errorCode?: unknown;
-    errorMessage?: unknown;
-};
-
-interface SubscriptionStoreState {
-    subscription: SubscriptionState;
-    offerings: PurchasesOffering | null;
-    isLoadingOfferings: boolean;
-    isPurchasing: boolean;
-    error: string | null;
-
-    // Actions
-    initializeRevenueCat: (userId: string) => Promise<void>;
-    fetchOfferings: () => Promise<void>;
-    purchasePackage: (pkg: PurchasesPackage) => Promise<PurchaseResult>;
-    restorePurchases: () => Promise<boolean>;
-    refreshSubscriptionStatus: () => Promise<void>;
-    clearSubscription: () => void;
-}
+export type PurchaseResult = {
+    success: boolean;
+    cancelled?: boolean;
+    errorCode?: unknown;
+    errorMessage?: unknown;
+};
+
+interface SubscriptionStoreState {
+    subscription: SubscriptionState;
+    offerings: PurchasesOffering | null;
+    isLoadingOfferings: boolean;
+    isPurchasing: boolean;
+    error: string | null;
+
+    // Actions
+    initializeRevenueCat: (userId: string) => Promise<void>;
+    fetchOfferings: (offeringIdentifier?: string) => Promise<void>;
+    purchasePackage: (pkg: PurchasesPackage) => Promise<PurchaseResult>;
+    restorePurchases: () => Promise<boolean>;
+    refreshSubscriptionStatus: () => Promise<void>;
+    clearSubscription: () => void;
+}
 
 const defaultSubscription: SubscriptionState = {
     isProUser: false,
@@ -77,7 +77,7 @@ export const useSubscriptionStore = create<SubscriptionStoreState>((set, get) =>
         }
     },
 
-    fetchOfferings: async () => {
+    fetchOfferings: async (offeringIdentifier?: string) => {
         set({ isLoadingOfferings: true, error: null });
         try {
             // Check if RevenueCat is initialized
@@ -90,7 +90,7 @@ export const useSubscriptionStore = create<SubscriptionStoreState>((set, get) =>
                 return;
             }
 
-            const result = await revenueCatService.getOfferingsDebug();
+            const result = await revenueCatService.getOfferingsDebug(offeringIdentifier);
 
             if (result.error) {
                 set({
@@ -128,36 +128,36 @@ export const useSubscriptionStore = create<SubscriptionStoreState>((set, get) =>
         }
     },
 
-    purchasePackage: async (pkg: PurchasesPackage) => {
-        set({ isPurchasing: true, error: null });
-        try {
-            const customerInfo = await revenueCatService.purchasePackage(pkg);
-            const subscription = revenueCatService.parseCustomerInfo(customerInfo);
-            set({ subscription, isPurchasing: false });
-
-            // Refresh user profile to get updated is_premium
-            await useAuthStore.getState().fetchUser();
-
-            return { success: true };
-        } catch (error: any) {
-            const isCancelled =
-                error?.userCancelled === true ||
-                error?.message === "Purchase cancelled" ||
-                error?.code === "PURCHASE_CANCELLED";
-
-            const message = isCancelled
-                ? "Purchase was cancelled"
-                : "Purchase failed. Please try again.";
-
-            set({ error: message, isPurchasing: false });
-            return {
-                success: false,
-                cancelled: isCancelled,
-                errorCode: error?.code,
-                errorMessage: error?.message,
-            };
-        }
-    },
+    purchasePackage: async (pkg: PurchasesPackage) => {
+        set({ isPurchasing: true, error: null });
+        try {
+            const customerInfo = await revenueCatService.purchasePackage(pkg);
+            const subscription = revenueCatService.parseCustomerInfo(customerInfo);
+            set({ subscription, isPurchasing: false });
+
+            // Refresh user profile to get updated is_premium
+            await useAuthStore.getState().fetchUser();
+
+            return { success: true };
+        } catch (error: any) {
+            const isCancelled =
+                error?.userCancelled === true ||
+                error?.message === "Purchase cancelled" ||
+                error?.code === "PURCHASE_CANCELLED";
+
+            const message = isCancelled
+                ? "Purchase was cancelled"
+                : "Purchase failed. Please try again.";
+
+            set({ error: message, isPurchasing: false });
+            return {
+                success: false,
+                cancelled: isCancelled,
+                errorCode: error?.code,
+                errorMessage: error?.message,
+            };
+        }
+    },
 
     restorePurchases: async () => {
         set({ isPurchasing: true, error: null });
diff --git a/apps/mobile/src/theme/index.ts b/apps/mobile/src/theme/index.ts
index 231b304..2369770 100644
--- a/apps/mobile/src/theme/index.ts
+++ b/apps/mobile/src/theme/index.ts
@@ -1,26 +1,29 @@
 import { Platform } from 'react-native';
 
-export const colors = {
-  // Backgrounds
-  background: '#0d0d1a',
-  backgroundLight: '#1a1a2e',
-  surface: 'rgba(22, 33, 62, 0.6)',
-  surfaceSolid: '#16213e',
-
-  // Glass effects
-  glass: {
-    background: 'rgba(22, 33, 62, 0.4)',
-    backgroundLight: 'rgba(22, 33, 62, 0.6)',
-    border: 'rgba(255, 255, 255, 0.08)',
-    borderLight: 'rgba(255, 255, 255, 0.12)',
-    highlight: 'rgba(255, 255, 255, 0.05)',
-  },
-
-  // Brand
-  primary: '#e94560',
-  primaryDark: '#c73a52',
-  primaryLight: 'rgba(233, 69, 96, 0.15)',
-  primaryGlow: 'rgba(233, 69, 96, 0.3)',
+export const colors = {
+  // Backgrounds - Updated to Flat/Admin Palette
+  background: '#0e0e11', // hsl(240 10% 6%)
+  backgroundLight: '#17171c', // hsl(240 8% 10%)
+  surface: '#17171c', // Mapped to card color
+  surfaceSolid: '#17171c',
+
+  // Border
+  border: '#303036', // hsl(240 6% 20%)
+
+  // Glass effects - Retained keys for compat, but mapped to flat/subtle values
+  glass: {
+    background: '#17171c', // Solid card color
+    backgroundLight: '#222228', // Slightly lighter
+    border: '#303036',
+    borderLight: '#404048',
+    highlight: 'transparent', // Removed highlight
+  },
+
+  // Brand
+  primary: '#e1306c', // Adjusted to match admin rose approximately
+  primaryDark: '#c12055',
+  primaryLight: 'rgba(225, 48, 108, 0.15)',
+  primaryGlow: 'rgba(225, 48, 108, 0.3)',
   secondary: '#9b59b6',
   secondaryDark: '#8e44ad',
   secondaryLight: 'rgba(155, 89, 182, 0.15)',
@@ -67,14 +70,14 @@ export const colors = {
   mutedLight: 'rgba(108, 117, 125, 0.15)',
 };
 
-export const gradients = {
-  primary: ['#e94560', '#9b59b6'],
-  primarySubtle: ['rgba(233, 69, 96, 0.8)', 'rgba(155, 89, 182, 0.8)'],
-  primaryReverse: ['#9b59b6', '#e94560'],
-  primaryVertical: ['#e94560', '#9b59b6'],
-  background: ['#1a1a2e', '#0d0d1a'],
-  backgroundReverse: ['#0d0d1a', '#1a1a2e'],
-  glass: ['rgba(255, 255, 255, 0.08)', 'rgba(255, 255, 255, 0)'],
+export const gradients = {
+  primary: ['#e1306c', '#9b59b6'],
+  primarySubtle: ['rgba(225, 48, 108, 0.8)', 'rgba(155, 89, 182, 0.8)'],
+  primaryReverse: ['#9b59b6', '#e1306c'],
+  primaryVertical: ['#e1306c', '#9b59b6'],
+  background: ['#0e0e11', '#1f1417', '#0e0e11'], // Premium subtle gradient from admin
+  backgroundReverse: ['#0e0e11', '#1f1417', '#0e0e11'],
+  glass: ['#17171c', '#17171c'], // Solid fallback
   success: ['#2ECC71', '#27ae60'],
   warning: ['#F39C12', '#e67e22'],
   error: ['#E74C3C', '#c0392b'],
diff --git a/apps/mobile/src/types/index.ts b/apps/mobile/src/types/index.ts
index 18b9ea9..08664e5 100755
--- a/apps/mobile/src/types/index.ts
+++ b/apps/mobile/src/types/index.ts
@@ -15,6 +15,8 @@ export interface Profile {
     max_intensity: IntensityLevel;
     hide_nsfw: boolean;
     onboarding_completed: boolean;
+    /** Version of onboarding flow completed. 0 = never, 1+ = that version */
+    onboarding_version: number;
     created_at: string;
     updated_at: string;
     /** RSA public key for E2EE (JWK format) */
@@ -61,34 +63,55 @@ export interface QuestionPack {
 }
 
 // Individual question
-export interface Question {
-    id: string;
-    pack_id: string;
-    text: string;
-    partner_text?: string | null;
-    intensity: 1 | 2 | 3 | 4 | 5;
-    allowed_couple_genders?: string[] | null;
-    target_user_genders?: string[] | null;
-    /** References the primary question that this is an inverse of (e.g., give vs receive). NULL means this is a primary/standalone question. */
-    inverse_of?: string | null;
-    created_at: string;
-}
-
-// User's answer type
-export type AnswerType = 'yes' | 'no' | 'maybe';
-
-// Match type when both partners agree
-export type MatchType = 'yes_yes' | 'yes_maybe' | 'maybe_maybe';
+export interface Question {
+    id: string;
+    pack_id: string;
+    text: string;
+    partner_text?: string | null;
+    intensity: 1 | 2 | 3 | 4 | 5;
+    allowed_couple_genders?: string[] | null;
+    target_user_genders?: string[] | null;
+    /** References the primary question that this is an inverse of (e.g., give vs receive). NULL means this is a primary/standalone question. */
+    inverse_of?: string | null;
+    /** Type of question interaction (default: 'swipe') */
+    question_type?: QuestionType;
+    /** Configuration options for specific question types */
+    config?: QuestionConfig | null;
+    created_at: string;
+}
+
+// User's answer type
+export type AnswerType = 'yes' | 'no' | 'maybe';
+
+// Question type (default is 'swipe' for backwards compatibility)
+export type QuestionType = 'swipe' | 'text_answer' | 'audio' | 'photo' | 'who_likely';
+
+// Question configuration options
+export interface QuestionConfig {
+    max_duration_seconds?: number;  // For audio questions (default: 60)
+}
+
+// Response data for non-swipe question types
+export type ResponseData =
+    | { type: 'text_answer'; text: string }
+    | { type: 'audio'; media_path: string; duration_seconds: number }
+    | { type: 'photo'; media_path: string }
+    | { type: 'who_likely'; chosen_user_id: string };
+
+// Match type when both partners agree
+export type MatchType = 'yes_yes' | 'yes_maybe' | 'maybe_maybe' | 'both_answered';
 
 // User response to a question
-export interface Response {
-    id: string;
-    user_id: string;
-    question_id: string;
-    couple_id: string;
-    answer: AnswerType;
-    created_at: string;
-}
+export interface Response {
+    id: string;
+    user_id: string;
+    question_id: string;
+    couple_id: string;
+    answer: AnswerType;
+    /** Additional response data for non-swipe question types */
+    response_data?: ResponseData | null;
+    created_at: string;
+}
 
 // Match between partners
 export interface Match {
diff --git a/apps/supabase/functions/send-match-notification-digest/index.ts b/apps/supabase/functions/send-match-notification-digest/index.ts
index bd850f5..bc2790a 100644
--- a/apps/supabase/functions/send-match-notification-digest/index.ts
+++ b/apps/supabase/functions/send-match-notification-digest/index.ts
@@ -2,15 +2,20 @@ import "jsr:@supabase/functions-js/edge-runtime.d.ts";
 import { createClient } from "https://esm.sh/@supabase/supabase-js@2.45.0?target=deno";
 
 /**
- * Send coalesced match notifications.
+ * Send session-based activity notifications.
  * Called by pg_cron every minute and processes any pending notifications
- * whose notify_at has passed.
+ * whose notify_at has passed (5 minutes of user inactivity).
+ *
+ * Sends notification to the PARTNER of the active user with copy:
+ * "[Partner] has been answering questions!"
  */
 
 interface PendingMatchNotification {
     id: string;
     couple_id: string;
+    active_user_id: string | null;
     match_count: number;
+    response_count: number;
     latest_match_id: string | null;
     notify_at: string;
 }
@@ -67,7 +72,7 @@ Deno.serve(async (req) => {
         // Get all pending notifications where notify_at has passed
         const { data: pendingNotifications, error: fetchError } = await supabase
             .from("pending_match_notifications")
-            .select("id, couple_id, match_count, latest_match_id, notify_at")
+            .select("id, couple_id, active_user_id, match_count, response_count, latest_match_id, notify_at")
             .lte("notify_at", nowIso);
 
         if (fetchError) {
@@ -87,19 +92,20 @@ Deno.serve(async (req) => {
 
         const coupleIds = Array.from(new Set(pendingNotifications.map((n) => n.couple_id)));
 
-        // Fetch all push tokens + match notification preference for couples
+        // Fetch all profiles for couples (need name, push_token, last_active_at, prefs)
         const { data: profiles, error: profilesError } = await supabase
             .from("profiles")
             .select(
                 `
                 id,
+                name,
                 couple_id,
                 push_token,
-                notification_preferences:notification_preferences(matches_enabled)
+                last_active_at,
+                notification_preferences:notification_preferences(partner_activity_enabled)
             `
             )
-            .in("couple_id", coupleIds)
-            .not("push_token", "is", null);
+            .in("couple_id", coupleIds);
 
         if (profilesError) {
             console.error("Error fetching profiles:", profilesError);
@@ -110,56 +116,85 @@ Deno.serve(async (req) => {
         }
 
         const profilesByCouple = new Map<string, any[]>();
+        const profilesById = new Map<string, any>();
         for (const profile of profiles || []) {
             const list = profilesByCouple.get(profile.couple_id) ?? [];
             list.push(profile);
             profilesByCouple.set(profile.couple_id, list);
+            profilesById.set(profile.id, profile);
         }
 
+        // Helper to check if user is currently active (within last 5 minutes)
+        const isUserActive = (lastActiveAt: string | null): boolean => {
+            if (!lastActiveAt) return false;
+            const lastActive = new Date(lastActiveAt).getTime();
+            const fiveMinutesAgo = Date.now() - 5 * 60 * 1000;
+            return lastActive > fiveMinutesAgo;
+        };
+
         const messages: ExpoPushMessage[] = [];
         const processedIds: string[] = [];
 
         for (const notification of pendingNotifications as PendingMatchNotification[]) {
             const coupleProfiles = profilesByCouple.get(notification.couple_id) ?? [];
 
-            for (const profile of coupleProfiles) {
-                const prefs = Array.isArray(profile.notification_preferences)
-                    ? profile.notification_preferences[0]
-                    : profile.notification_preferences;
+            // Find the active user (the one who was answering) and their partner
+            const activeUser = notification.active_user_id
+                ? profilesById.get(notification.active_user_id)
+                : null;
 
-                // Skip if user has explicitly disabled match notifications
-                if (prefs && prefs.matches_enabled === false) {
-                    continue;
-                }
+            // Find the partner (the one who should receive the notification)
+            const partner = coupleProfiles.find(p => p.id !== notification.active_user_id);
 
-                const count = Math.max(1, Number(notification.match_count) || 1);
-                const latestMatchId = notification.latest_match_id;
-
-                // If the match was deleted before the digest fired, don't notify.
-                if (!latestMatchId) {
-                    continue;
-                }
-
-                if (count === 1) {
-                    messages.push({
-                        to: profile.push_token,
-                        title: "It's a match! 💕",
-                        body: "You and your partner matched on something new!",
-                        sound: "default",
-                        data: { type: "match", match_id: latestMatchId },
-                    });
-                } else {
-                    messages.push({
-                        to: profile.push_token,
-                        title: "New matches 💕",
-                        body: `You have ${count} new matches`,
-                        sound: "default",
-                        // Include latest_match_id for backwards compatibility
-                        data: { type: "match_digest", count, match_id: latestMatchId },
-                    });
-                }
+            // Skip if we can't identify the partner or they have no push token
+            if (!partner || !partner.push_token) {
+                processedIds.push(notification.id);
+                continue;
             }
 
+            // Skip if partner is currently active in the app
+            if (isUserActive(partner.last_active_at)) {
+                console.log(`Skipping notification - partner ${partner.id} is active in app`);
+                processedIds.push(notification.id);
+                continue;
+            }
+
+            // Check notification preferences (partner_activity_enabled)
+            const prefs = Array.isArray(partner.notification_preferences)
+                ? partner.notification_preferences[0]
+                : partner.notification_preferences;
+
+            if (prefs && prefs.partner_activity_enabled === false) {
+                processedIds.push(notification.id);
+                continue;
+            }
+
+            // Get active user's name for personalized notification
+            const activeUserName = activeUser?.name || "Your partner";
+            const matchCount = Math.max(0, Number(notification.match_count) || 0);
+
+            // Build notification message
+            // Primary message: "[Partner] has been answering questions!"
+            // Include match count in body if there are matches
+            let body = `Tap to see what you both said`;
+            if (matchCount > 0) {
+                body = matchCount === 1
+                    ? `You have a new match! Tap to see what you both said`
+                    : `You have ${matchCount} new matches! Tap to see what you both said`;
+            }
+
+            messages.push({
+                to: partner.push_token,
+                title: `${activeUserName} has been answering questions! 💕`,
+                body,
+                sound: "default",
+                data: {
+                    type: "match_digest",
+                    count: matchCount,
+                    match_id: notification.latest_match_id,
+                },
+            });
+
             processedIds.push(notification.id);
         }
 
diff --git a/apps/supabase/functions/send-nudge-notification/index.ts b/apps/supabase/functions/send-nudge-notification/index.ts
new file mode 100644
index 0000000..eaaec4a
--- /dev/null
+++ b/apps/supabase/functions/send-nudge-notification/index.ts
@@ -0,0 +1,229 @@
+import "jsr:@supabase/functions-js/edge-runtime.d.ts";
+import { createClient } from "https://esm.sh/@supabase/supabase-js@2.45.0?target=deno";
+
+/**
+ * Send a nudge notification to partner.
+ * Rate limited to once per 12 hours.
+ *
+ * Called directly from the client when user taps "Nudge partner" button.
+ * Requires authentication via JWT.
+ */
+
+const corsHeaders = {
+    "Access-Control-Allow-Origin": "*",
+    "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
+};
+
+// Rate limit: 12 hours in milliseconds
+const NUDGE_COOLDOWN_MS = 12 * 60 * 60 * 1000;
+
+interface ExpoPushMessage {
+    to: string;
+    title: string;
+    body: string;
+    sound?: string;
+    data?: Record<string, unknown>;
+}
+
+async function sendExpoPushNotification(message: ExpoPushMessage) {
+    const response = await fetch("https://exp.host/--/api/v2/push/send", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+            Accept: "application/json",
+        },
+        body: JSON.stringify(message),
+    });
+
+    if (!response.ok) {
+        const error = await response.text();
+        console.error("Expo push error:", error);
+        throw new Error(`Failed to send push notification: ${error}`);
+    }
+
+    return response.json();
+}
+
+Deno.serve(async (req) => {
+    // Handle CORS preflight
+    if (req.method === "OPTIONS") {
+        return new Response("ok", { headers: corsHeaders });
+    }
+
+    if (req.method !== "POST") {
+        return new Response("Method not allowed", { status: 405, headers: corsHeaders });
+    }
+
+    try {
+        // Get user from JWT (manual validation as per CLAUDE.md)
+        const authHeader = req.headers.get("Authorization");
+        if (!authHeader) {
+            return new Response(
+                JSON.stringify({ error: "Missing authorization" }),
+                { status: 401, headers: { ...corsHeaders, "Content-Type": "application/json" } }
+            );
+        }
+
+        const supabase = createClient(
+            Deno.env.get("SUPABASE_URL")!,
+            Deno.env.get("SUPABASE_SERVICE_ROLE_KEY")!
+        );
+
+        // Verify the JWT and get user
+        const token = authHeader.replace("Bearer ", "");
+        const { data: { user }, error: authError } = await supabase.auth.getUser(token);
+
+        if (authError || !user) {
+            return new Response(
+                JSON.stringify({ error: "Invalid token" }),
+                { status: 401, headers: { ...corsHeaders, "Content-Type": "application/json" } }
+            );
+        }
+
+        // Get the user's profile with couple info
+        const { data: profile, error: profileError } = await supabase
+            .from("profiles")
+            .select("id, name, couple_id, last_nudge_sent_at")
+            .eq("id", user.id)
+            .maybeSingle();
+
+        if (profileError || !profile) {
+            console.error("Error fetching profile:", profileError);
+            return new Response(
+                JSON.stringify({ error: "Profile not found" }),
+                { status: 404, headers: { ...corsHeaders, "Content-Type": "application/json" } }
+            );
+        }
+
+        if (!profile.couple_id) {
+            return new Response(
+                JSON.stringify({ error: "Not in a couple" }),
+                { status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" } }
+            );
+        }
+
+        // Check rate limiting
+        const now = new Date();
+        if (profile.last_nudge_sent_at) {
+            const lastNudge = new Date(profile.last_nudge_sent_at);
+            const timeSinceLastNudge = now.getTime() - lastNudge.getTime();
+
+            if (timeSinceLastNudge < NUDGE_COOLDOWN_MS) {
+                const cooldownRemaining = NUDGE_COOLDOWN_MS - timeSinceLastNudge;
+                const nextNudgeAvailable = new Date(lastNudge.getTime() + NUDGE_COOLDOWN_MS);
+
+                return new Response(
+                    JSON.stringify({
+                        error: "Rate limited",
+                        cooldown_remaining_seconds: Math.ceil(cooldownRemaining / 1000),
+                        next_nudge_available_at: nextNudgeAvailable.toISOString(),
+                    }),
+                    { status: 429, headers: { ...corsHeaders, "Content-Type": "application/json" } }
+                );
+            }
+        }
+
+        // Get the partner
+        const { data: partner, error: partnerError } = await supabase
+            .from("profiles")
+            .select("id, name, push_token")
+            .eq("couple_id", profile.couple_id)
+            .neq("id", user.id)
+            .maybeSingle();
+
+        if (partnerError) {
+            console.error("Error fetching partner:", partnerError);
+            return new Response(
+                JSON.stringify({ error: "Failed to find partner" }),
+                { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
+            );
+        }
+
+        if (!partner) {
+            return new Response(
+                JSON.stringify({ error: "Partner not found" }),
+                { status: 404, headers: { ...corsHeaders, "Content-Type": "application/json" } }
+            );
+        }
+
+        // Update last_nudge_sent_at FIRST (prevents gaming by quickly re-sending)
+        const { error: updateError } = await supabase
+            .from("profiles")
+            .update({ last_nudge_sent_at: now.toISOString() })
+            .eq("id", user.id);
+
+        if (updateError) {
+            console.error("Error updating last_nudge_sent_at:", updateError);
+            return new Response(
+                JSON.stringify({ error: "Failed to update nudge timestamp" }),
+                { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
+            );
+        }
+
+        // Check partner's notification preferences
+        const { data: prefs } = await supabase
+            .from("notification_preferences")
+            .select("nudges_enabled")
+            .eq("user_id", partner.id)
+            .maybeSingle();
+
+        // If prefs don't exist or nudges_enabled is not explicitly false, send notification
+        const nudgesEnabled = prefs?.nudges_enabled !== false;
+
+        // Check if partner has a push token
+        if (!partner.push_token) {
+            console.log(`Partner ${partner.id} has no push token`);
+            return new Response(
+                JSON.stringify({
+                    success: true,
+                    notification_sent: false,
+                    reason: "no_push_token",
+                    next_nudge_available_at: new Date(now.getTime() + NUDGE_COOLDOWN_MS).toISOString(),
+                }),
+                { headers: { ...corsHeaders, "Content-Type": "application/json" } }
+            );
+        }
+
+        // Skip sending if partner has disabled nudge notifications
+        if (!nudgesEnabled) {
+            console.log(`Partner ${partner.id} has disabled nudge notifications`);
+            return new Response(
+                JSON.stringify({
+                    success: true,
+                    notification_sent: false,
+                    reason: "nudges_disabled",
+                    next_nudge_available_at: new Date(now.getTime() + NUDGE_COOLDOWN_MS).toISOString(),
+                }),
+                { headers: { ...corsHeaders, "Content-Type": "application/json" } }
+            );
+        }
+
+        // Send the push notification
+        const userName = profile.name || "Your partner";
+
+        await sendExpoPushNotification({
+            to: partner.push_token,
+            title: "Partner nudge",
+            body: `${userName} wants you to catch up!`,
+            sound: "default",
+            data: { type: "nudge" },
+        });
+
+        console.log(`Nudge notification sent from ${user.id} to ${partner.id}`);
+
+        return new Response(
+            JSON.stringify({
+                success: true,
+                notification_sent: true,
+                next_nudge_available_at: new Date(now.getTime() + NUDGE_COOLDOWN_MS).toISOString(),
+            }),
+            { headers: { ...corsHeaders, "Content-Type": "application/json" } }
+        );
+    } catch (error) {
+        console.error("Nudge notification error:", error);
+        return new Response(
+            JSON.stringify({ error: "Internal server error" }),
+            { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
+        );
+    }
+});
diff --git a/apps/supabase/functions/submit-response/index.ts b/apps/supabase/functions/submit-response/index.ts
index f9b3563..5d493d1 100755
--- a/apps/supabase/functions/submit-response/index.ts
+++ b/apps/supabase/functions/submit-response/index.ts
@@ -7,18 +7,48 @@ const corsHeaders = {
 };
 
 type Answer = "yes" | "no" | "maybe";
-type MatchType = "yes_yes" | "yes_maybe" | "maybe_maybe";
+type MatchType = "yes_yes" | "yes_maybe" | "maybe_maybe" | "both_answered";
+type QuestionType = "swipe" | "text_answer" | "audio" | "photo" | "who_likely";
+
+type ResponseData =
+    | { type: "text_answer"; text: string }
+    | { type: "audio"; media_path: string; duration_seconds: number }
+    | { type: "photo"; media_path: string }
+    | { type: "who_likely"; chosen_user_id: string };
 
 interface SubmitResponseBody {
     question_id: string;
     answer: Answer;
+    response_data?: ResponseData;  // Optional for backwards compatibility
 }
 
-function calculateMatch(a1: Answer, a2: Answer): MatchType | null {
-    if (a1 === "no" || a2 === "no") return null;
-    if (a1 === "yes" && a2 === "yes") return "yes_yes";
-    if (a1 === "maybe" && a2 === "maybe") return "maybe_maybe";
-    return "yes_maybe";
+interface Question {
+    id: string;
+    question_type?: QuestionType;
+    // ... other fields
+}
+
+function calculateMatchType(question: Question, answer1: Answer, answer2: Answer): MatchType | null {
+    // For swipe questions (or legacy questions without type), use existing logic
+    if (!question.question_type || question.question_type === "swipe") {
+        if (answer1 === "no" || answer2 === "no") return null;
+        if (answer1 === "yes" && answer2 === "yes") return "yes_yes";
+        if (answer1 === "maybe" && answer2 === "maybe") return "maybe_maybe";
+        return "yes_maybe";
+    }
+
+    // For text/audio/photo questions: match if both answered positively
+    if (["text_answer", "audio", "photo"].includes(question.question_type)) {
+        if (answer1 === "no" || answer2 === "no") return null;
+        return "both_answered";
+    }
+
+    // For who_likely: always matches when both answered
+    if (question.question_type === "who_likely") {
+        return "both_answered";
+    }
+
+    return null;
 }
 
 Deno.serve(async (req) => {
@@ -54,7 +84,7 @@ Deno.serve(async (req) => {
         }
 
         // Parse request body
-        const { question_id, answer }: SubmitResponseBody = await req.json();
+        const { question_id, answer, response_data }: SubmitResponseBody = await req.json();
 
         if (!question_id || !answer) {
             return new Response(
@@ -63,6 +93,20 @@ Deno.serve(async (req) => {
             );
         }
 
+        // Fetch the question to get its type
+        const { data: question, error: questionError } = await supabase
+            .from("questions")
+            .select("id, question_type")
+            .eq("id", question_id)
+            .single();
+
+        if (questionError || !question) {
+            return new Response(
+                JSON.stringify({ error: "Question not found" }),
+                { status: 404, headers: { ...corsHeaders, "Content-Type": "application/json" } }
+            );
+        }
+
         // Get user's profile and couple
         const { data: profile, error: profileError } = await supabase
             .from("profiles")
@@ -70,88 +114,89 @@ Deno.serve(async (req) => {
             .eq("id", user.id)
             .single();
 
-        if (profileError || !profile?.couple_id) {
-            return new Response(
-                JSON.stringify({ error: "User is not in a couple" }),
-                { status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" } }
-            );
-        }
-
-        // Check if this is a new response or an edit (edits bypass daily limit)
-        const { data: existingResponse } = await supabase
-            .from("responses")
-            .select("id")
-            .eq("user_id", user.id)
-            .eq("question_id", question_id)
-            .maybeSingle();
-
-        const isNewResponse = !existingResponse;
-
-        // Enforce daily response limit for new responses only
-        if (isNewResponse) {
-            // Check if user has premium access
-            const { data: hasPremiumData } = await supabase.rpc("has_premium_access", {
-                check_user_id: user.id,
-            });
-
-            const hasPremium = hasPremiumData === true;
-
-            // If non-premium, check daily limit
-            if (!hasPremium) {
-                // Get daily limit from app_config
-                const { data: configData } = await supabase
-                    .from("app_config")
-                    .select("daily_response_limit")
-                    .limit(1)
-                    .maybeSingle();
-
-                const dailyLimit = configData?.daily_response_limit || 0;
-
-                // If daily limit is enabled (> 0), check if user has reached it
-                if (dailyLimit > 0) {
-                    // Calculate UTC day boundaries
-                    const now = new Date();
-                    const todayStart = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate()));
-                    const tomorrowStart = new Date(todayStart);
-                    tomorrowStart.setUTCDate(tomorrowStart.getUTCDate() + 1);
-
-                    // Count responses created today (UTC)
-                    const { count: dailyCount } = await supabase
-                        .from("responses")
-                        .select("*", { count: "exact", head: true })
-                        .eq("user_id", user.id)
-                        .gte("created_at", todayStart.toISOString())
-                        .lt("created_at", tomorrowStart.toISOString());
-
-                    // If over limit, reject
-                    if ((dailyCount || 0) >= dailyLimit) {
-                        return new Response(
-                            JSON.stringify({
-                                error: "Daily response limit reached",
-                                daily_limit: dailyLimit,
-                                reset_at: tomorrowStart.toISOString(),
-                            }),
-                            { status: 429, headers: { ...corsHeaders, "Content-Type": "application/json" } }
-                        );
-                    }
-                }
-            }
-        }
-
-        // Save or update response
-        const { data: response, error: responseError } = await supabase
-            .from("responses")
-            .upsert(
-                {
-                    user_id: user.id,
-                    question_id,
-                    couple_id: profile.couple_id,
-                    answer,
-                },
-                { onConflict: "user_id,question_id" }
-            )
-            .select()
-            .single();
+        if (profileError || !profile?.couple_id) {
+            return new Response(
+                JSON.stringify({ error: "User is not in a couple" }),
+                { status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" } }
+            );
+        }
+
+        // Check if this is a new response or an edit (edits bypass daily limit)
+        const { data: existingResponse } = await supabase
+            .from("responses")
+            .select("id")
+            .eq("user_id", user.id)
+            .eq("question_id", question_id)
+            .maybeSingle();
+
+        const isNewResponse = !existingResponse;
+
+        // Enforce daily response limit for new responses only
+        if (isNewResponse) {
+            // Check if user has premium access
+            const { data: hasPremiumData } = await supabase.rpc("has_premium_access", {
+                check_user_id: user.id,
+            });
+
+            const hasPremium = hasPremiumData === true;
+
+            // If non-premium, check daily limit
+            if (!hasPremium) {
+                // Get daily limit from app_config
+                const { data: configData } = await supabase
+                    .from("app_config")
+                    .select("daily_response_limit")
+                    .limit(1)
+                    .maybeSingle();
+
+                const dailyLimit = configData?.daily_response_limit || 0;
+
+                // If daily limit is enabled (> 0), check if user has reached it
+                if (dailyLimit > 0) {
+                    // Calculate UTC day boundaries
+                    const now = new Date();
+                    const todayStart = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate()));
+                    const tomorrowStart = new Date(todayStart);
+                    tomorrowStart.setUTCDate(tomorrowStart.getUTCDate() + 1);
+
+                    // Count responses created today (UTC)
+                    const { count: dailyCount } = await supabase
+                        .from("responses")
+                        .select("*", { count: "exact", head: true })
+                        .eq("user_id", user.id)
+                        .gte("created_at", todayStart.toISOString())
+                        .lt("created_at", tomorrowStart.toISOString());
+
+                    // If over limit, reject
+                    if ((dailyCount || 0) >= dailyLimit) {
+                        return new Response(
+                            JSON.stringify({
+                                error: "Daily response limit reached",
+                                daily_limit: dailyLimit,
+                                reset_at: tomorrowStart.toISOString(),
+                            }),
+                            { status: 429, headers: { ...corsHeaders, "Content-Type": "application/json" } }
+                        );
+                    }
+                }
+            }
+        }
+
+        // Save or update response
+        const { data: response, error: responseError } = await supabase
+            .from("responses")
+            .upsert(
+                {
+                    user_id: user.id,
+                    question_id,
+                    couple_id: profile.couple_id,
+                    answer,
+                    response_data: response_data ?? null,
+                },
+                { onConflict: "user_id,question_id" }
+            )
+            .select()
+            .single();
 
         if (responseError) {
             return new Response(
@@ -163,7 +208,7 @@ Deno.serve(async (req) => {
         // Check for partner's response
         const { data: partnerResponse } = await supabase
             .from("responses")
-            .select("answer")
+            .select("answer, response_data, user_id")
             .eq("couple_id", profile.couple_id)
             .eq("question_id", question_id)
             .neq("user_id", user.id)
@@ -172,9 +217,15 @@ Deno.serve(async (req) => {
         let match = null;
 
         if (partnerResponse) {
-            const matchType = calculateMatch(answer, partnerResponse.answer as Answer);
+            const matchType = calculateMatchType(question as Question, answer, partnerResponse.answer as Answer);
 
             if (matchType) {
+                // Build response_summary for 'both_answered' matches
+                const responseSummary = (matchType === "both_answered") ? {
+                    [user.id]: response_data ?? null,
+                    [partnerResponse.user_id]: partnerResponse.response_data ?? null,
+                } : null;
+
                 // Create or update match
                 const { data: newMatch, error: matchError } = await supabase
                     .from("matches")
@@ -184,6 +235,7 @@ Deno.serve(async (req) => {
                             question_id,
                             match_type: matchType,
                             is_new: true,
+                            response_summary: responseSummary,
                         },
                         { onConflict: "couple_id,question_id" }
                     )
@@ -196,9 +248,9 @@ Deno.serve(async (req) => {
                 if (!matchError) {
                     match = newMatch;
 
-                    // Match push notifications are queued via a Postgres trigger
-                    // (pending_match_notifications) to allow short digesting.
-
+                    // Match push notifications are queued via a Postgres trigger
+                    // (pending_match_notifications) to allow short digesting.
+
                 }
             }
         }
diff --git a/apps/supabase/functions/update-response/index.ts b/apps/supabase/functions/update-response/index.ts
index 200f6af..f9e6206 100644
--- a/apps/supabase/functions/update-response/index.ts
+++ b/apps/supabase/functions/update-response/index.ts
@@ -6,14 +6,22 @@ const corsHeaders = {
     "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
 };
 
-type Answer = "yes" | "no" | "maybe";
-type MatchType = "yes_yes" | "yes_maybe" | "maybe_maybe";
-
-interface UpdateResponseBody {
-    question_id: string;
-    new_answer: Answer;
-    confirm_delete_match?: boolean;
-}
+type Answer = "yes" | "no" | "maybe";
+type MatchType = "yes_yes" | "yes_maybe" | "maybe_maybe" | "both_answered";
+type QuestionType = "swipe" | "text_answer" | "audio" | "photo" | "who_likely";
+
+type ResponseData =
+    | { type: "text_answer"; text: string }
+    | { type: "audio"; media_path: string; duration_seconds: number }
+    | { type: "photo"; media_path: string }
+    | { type: "who_likely"; chosen_user_id: string };
+
+interface UpdateResponseBody {
+    question_id: string;
+    new_answer: Answer;
+    response_data?: ResponseData | null;
+    confirm_delete_match?: boolean;
+}
 
 interface UpdateResponseResult {
     success: boolean;
@@ -21,16 +29,34 @@ interface UpdateResponseResult {
     match_id?: string;
     message_count?: number;
     new_match?: Record<string, unknown> | null;
-    match_deleted?: boolean;
-    match_type_updated?: boolean;
-}
-
-function calculateMatch(a1: Answer, a2: Answer): MatchType | null {
-    if (a1 === "no" || a2 === "no") return null;
-    if (a1 === "yes" && a2 === "yes") return "yes_yes";
-    if (a1 === "maybe" && a2 === "maybe") return "maybe_maybe";
-    return "yes_maybe";
-}
+    match_deleted?: boolean;
+    match_type_updated?: boolean;
+}
+
+interface Question {
+    id: string;
+    question_type?: QuestionType;
+}
+
+function calculateMatchType(question: Question, answer1: Answer, answer2: Answer): MatchType | null {
+    if (!question.question_type || question.question_type === "swipe") {
+        if (answer1 === "no" || answer2 === "no") return null;
+        if (answer1 === "yes" && answer2 === "yes") return "yes_yes";
+        if (answer1 === "maybe" && answer2 === "maybe") return "maybe_maybe";
+        return "yes_maybe";
+    }
+
+    if (["text_answer", "audio", "photo"].includes(question.question_type)) {
+        if (answer1 === "no" || answer2 === "no") return null;
+        return "both_answered";
+    }
+
+    if (question.question_type === "who_likely") {
+        return "both_answered";
+    }
+
+    return null;
+}
 
 Deno.serve(async (req) => {
     // Handle CORS preflight
@@ -65,7 +91,7 @@ Deno.serve(async (req) => {
         }
 
         // Parse request body
-        const { question_id, new_answer, confirm_delete_match }: UpdateResponseBody = await req.json();
+        const { question_id, new_answer, response_data, confirm_delete_match }: UpdateResponseBody = await req.json();
 
         if (!question_id || !new_answer) {
             return new Response(
@@ -96,13 +122,27 @@ Deno.serve(async (req) => {
             );
         }
 
-        // Get current response
-        const { data: currentResponse, error: currentResponseError } = await supabase
-            .from("responses")
-            .select("answer")
-            .eq("user_id", user.id)
-            .eq("question_id", question_id)
-            .maybeSingle();
+        // Fetch the question to get its type
+        const { data: question, error: questionError } = await supabase
+            .from("questions")
+            .select("id, question_type")
+            .eq("id", question_id)
+            .single();
+
+        if (questionError || !question) {
+            return new Response(
+                JSON.stringify({ error: "Question not found" }),
+                { status: 404, headers: { ...corsHeaders, "Content-Type": "application/json" } }
+            );
+        }
+
+        // Get current response
+        const { data: currentResponse, error: currentResponseError } = await supabase
+            .from("responses")
+            .select("answer, response_data")
+            .eq("user_id", user.id)
+            .eq("question_id", question_id)
+            .maybeSingle();
 
         if (currentResponseError) {
             return new Response(
@@ -118,13 +158,13 @@ Deno.serve(async (req) => {
             );
         }
 
-        // If answer hasn't changed, return early
-        if (currentResponse.answer === new_answer) {
-            return new Response(
-                JSON.stringify({ success: true, message: "Answer unchanged" } as UpdateResponseResult),
-                { headers: { ...corsHeaders, "Content-Type": "application/json" } }
-            );
-        }
+        // If answer hasn't changed and no response_data updates, return early
+        if (currentResponse.answer === new_answer && typeof response_data === "undefined") {
+            return new Response(
+                JSON.stringify({ success: true, message: "Answer unchanged" } as UpdateResponseResult),
+                { headers: { ...corsHeaders, "Content-Type": "application/json" } }
+            );
+        }
 
         // Check if a match exists for this question
         const { data: existingMatch } = await supabase
@@ -135,15 +175,28 @@ Deno.serve(async (req) => {
             .maybeSingle();
 
         // Get partner's response
-        const { data: partnerResponse } = await supabase
-            .from("responses")
-            .select("answer")
-            .eq("couple_id", profile.couple_id)
-            .eq("question_id", question_id)
-            .neq("user_id", user.id)
-            .maybeSingle();
-
-        const result: UpdateResponseResult = { success: true };
+        const { data: partnerResponse } = await supabase
+            .from("responses")
+            .select("answer, response_data, user_id")
+            .eq("couple_id", profile.couple_id)
+            .eq("question_id", question_id)
+            .neq("user_id", user.id)
+            .maybeSingle();
+
+        const result: UpdateResponseResult = { success: true };
+        const isNonSwipe = !!question.question_type && question.question_type !== "swipe";
+        const normalizedResponseData = isNonSwipe && new_answer !== "no"
+            ? (typeof response_data !== "undefined" ? response_data : currentResponse.response_data ?? null)
+            : null;
+        const matchType = partnerResponse
+            ? calculateMatchType(question as Question, new_answer, partnerResponse.answer as Answer)
+            : null;
+        const responseSummary = isNonSwipe && matchType === "both_answered" && partnerResponse
+            ? {
+                [user.id]: normalizedResponseData ?? null,
+                [partnerResponse.user_id]: partnerResponse.response_data ?? null,
+            }
+            : null;
 
         // Case 1: Changing to "no" AND match exists - requires confirmation
         if (new_answer === "no" && existingMatch) {
@@ -195,63 +248,68 @@ Deno.serve(async (req) => {
             result.match_deleted = true;
         }
 
-        // Case 2: Changing FROM "no" to yes/maybe - may create a new match
-        if (currentResponse.answer === "no" && new_answer !== "no" && partnerResponse) {
-            const newMatchType = calculateMatch(new_answer, partnerResponse.answer as Answer);
-
-            if (newMatchType) {
-                // Create new match
-                const { data: newMatch, error: matchError } = await supabase
-                    .from("matches")
-                    .upsert(
-                        {
-                            couple_id: profile.couple_id,
-                            question_id,
-                            match_type: newMatchType,
-                            is_new: true,
-                        },
-                        { onConflict: "couple_id,question_id" }
-                    )
-                    .select(`*, question:questions(*)`)
-                    .single();
-
-                if (!matchError && newMatch) {
-                    result.new_match = newMatch;
-
+        // Case 2: Changing FROM "no" to yes/maybe - may create a new match
+        if (currentResponse.answer === "no" && new_answer !== "no" && partnerResponse) {
+            if (matchType) {
+                // Create new match
+                const { data: newMatch, error: matchError } = await supabase
+                    .from("matches")
+                    .upsert(
+                        {
+                            couple_id: profile.couple_id,
+                            question_id,
+                            match_type: matchType,
+                            is_new: true,
+                            response_summary: responseSummary,
+                        },
+                        { onConflict: "couple_id,question_id" }
+                    )
+                    .select(`*, question:questions(*)`)
+                    .single();
+
+                if (!matchError && newMatch) {
+                    result.new_match = newMatch;
+
                     // Match push notifications are queued via a Postgres trigger
                     // (pending_match_notifications) to allow short digesting.
 
-                }
-            }
-        }
-
-        // Case 3: Changing between yes/maybe - may update match type
-        if (
-            currentResponse.answer !== "no" &&
-            new_answer !== "no" &&
-            existingMatch &&
-            partnerResponse
-        ) {
-            const newMatchType = calculateMatch(new_answer, partnerResponse.answer as Answer);
-
-            if (newMatchType) {
-                const { error: updateMatchError } = await supabase
-                    .from("matches")
-                    .update({ match_type: newMatchType })
-                    .eq("id", existingMatch.id);
-
-                if (!updateMatchError) {
-                    result.match_type_updated = true;
-                }
-            }
-        }
-
-        // Update the response
-        const { error: updateError } = await supabase
-            .from("responses")
-            .update({ answer: new_answer })
-            .eq("user_id", user.id)
-            .eq("question_id", question_id);
+                }
+            }
+        }
+
+        // Case 3: Changing between yes/maybe - may update match type
+        if (
+            new_answer !== "no" &&
+            existingMatch &&
+            partnerResponse &&
+            matchType
+        ) {
+            const updatePayload: Record<string, unknown> = { match_type: matchType };
+            if (isNonSwipe) {
+                updatePayload.response_summary = responseSummary;
+            }
+
+            const { error: updateMatchError } = await supabase
+                .from("matches")
+                .update(updatePayload)
+                .eq("id", existingMatch.id);
+
+            if (!updateMatchError) {
+                result.match_type_updated = true;
+            }
+        }
+
+        // Update the response
+        const responseUpdate: Record<string, unknown> = { answer: new_answer };
+        if (isNonSwipe || new_answer === "no" || typeof response_data !== "undefined") {
+            responseUpdate.response_data = normalizedResponseData;
+        }
+
+        const { error: updateError } = await supabase
+            .from("responses")
+            .update(responseUpdate)
+            .eq("user_id", user.id)
+            .eq("question_id", question_id);
 
         if (updateError) {
             return new Response(
diff --git a/apps/supabase/migrations/20260125100000_add_question_types.sql b/apps/supabase/migrations/20260125100000_add_question_types.sql
new file mode 100644
index 0000000..a5274c4
--- /dev/null
+++ b/apps/supabase/migrations/20260125100000_add_question_types.sql
@@ -0,0 +1,111 @@
+-- Migration: Add Question Types Support
+-- This migration adds support for different question types beyond the original swipe mechanic.
+-- New types include: text_answer, audio, photo, and who_likely
+
+-- 1. Create question_type enum
+CREATE TYPE question_type AS ENUM ('swipe', 'text_answer', 'audio', 'photo', 'who_likely');
+
+-- 2. Add columns to questions table
+-- question_type: The type of question (defaults to 'swipe' for backwards compatibility)
+-- config: JSONB field for type-specific configuration (e.g., max_length for text, duration for audio)
+ALTER TABLE questions
+  ADD COLUMN question_type question_type NOT NULL DEFAULT 'swipe',
+  ADD COLUMN config JSONB DEFAULT '{}';
+
+-- 3. Add response_data to responses table
+-- This stores type-specific response data (e.g., text answer, audio URL, photo URL, selection)
+-- For swipe questions, this remains NULL (the answer column is used)
+ALTER TABLE responses
+  ADD COLUMN response_data JSONB DEFAULT NULL;
+
+-- 4. Extend match_type enum with 'both_answered' for non-swipe question types
+-- Using DO block because ADD VALUE IF NOT EXISTS doesn't work in transaction blocks
+DO $$
+BEGIN
+  IF NOT EXISTS (
+    SELECT 1 FROM pg_enum
+    WHERE enumlabel = 'both_answered'
+    AND enumtypid = (SELECT oid FROM pg_type WHERE typname = 'match_type')
+  ) THEN
+    ALTER TYPE match_type ADD VALUE 'both_answered';
+  END IF;
+END
+$$;
+
+-- 5. Add response_summary to matches table
+-- This stores a summary of both partners' responses for display purposes
+-- For swipe matches, this can remain NULL
+-- For other types, it contains both responses for easy retrieval
+ALTER TABLE matches
+  ADD COLUMN response_summary JSONB DEFAULT NULL;
+
+-- 6. Create storage bucket for response media (audio, photos)
+INSERT INTO storage.buckets (id, name, public)
+VALUES ('response-media', 'response-media', false)
+ON CONFLICT (id) DO NOTHING;
+
+-- 7. RLS policies for response-media bucket
+
+-- Policy: Users can upload to their own folder (user_id/*)
+CREATE POLICY "Users can upload to own folder"
+ON storage.objects
+FOR INSERT
+TO authenticated
+WITH CHECK (
+  bucket_id = 'response-media'
+  AND (storage.foldername(name))[1] = auth.uid()::text
+);
+
+-- Policy: Users can update their own uploads
+CREATE POLICY "Users can update own uploads"
+ON storage.objects
+FOR UPDATE
+TO authenticated
+USING (
+  bucket_id = 'response-media'
+  AND (storage.foldername(name))[1] = auth.uid()::text
+)
+WITH CHECK (
+  bucket_id = 'response-media'
+  AND (storage.foldername(name))[1] = auth.uid()::text
+);
+
+-- Policy: Users can delete their own uploads
+CREATE POLICY "Users can delete own uploads"
+ON storage.objects
+FOR DELETE
+TO authenticated
+USING (
+  bucket_id = 'response-media'
+  AND (storage.foldername(name))[1] = auth.uid()::text
+);
+
+-- Policy: Users can read from their couple's folder (their own + partner's uploads)
+-- This allows partners to see each other's media in matches
+CREATE POLICY "Users can read couple media"
+ON storage.objects
+FOR SELECT
+TO authenticated
+USING (
+  bucket_id = 'response-media'
+  AND (
+    -- User can read their own folder
+    (storage.foldername(name))[1] = auth.uid()::text
+    OR
+    -- User can read their partner's folder (same couple)
+    (storage.foldername(name))[1] IN (
+      SELECT p.id::text
+      FROM profiles p
+      WHERE p.couple_id = (
+        SELECT couple_id FROM profiles WHERE id = auth.uid()
+      )
+      AND p.couple_id IS NOT NULL
+    )
+  )
+);
+
+-- Add comments for documentation
+COMMENT ON COLUMN questions.question_type IS 'The type of question: swipe (yes/no/maybe), text_answer, audio, photo, or who_likely';
+COMMENT ON COLUMN questions.config IS 'Type-specific configuration as JSONB. Examples: {"max_length": 500} for text, {"max_duration_seconds": 60} for audio';
+COMMENT ON COLUMN responses.response_data IS 'Type-specific response data as JSONB. Examples: {"text": "..."} for text_answer, {"url": "..."} for audio/photo, {"selection": "partner1"} for who_likely';
+COMMENT ON COLUMN matches.response_summary IS 'Summary of both partners responses for display. Contains both response_data values keyed by user_id';
diff --git a/apps/supabase/migrations/20260125110000_add_question_type_to_recommended_questions.sql b/apps/supabase/migrations/20260125110000_add_question_type_to_recommended_questions.sql
new file mode 100644
index 0000000..5f111cd
--- /dev/null
+++ b/apps/supabase/migrations/20260125110000_add_question_type_to_recommended_questions.sql
@@ -0,0 +1,227 @@
+-- Update get_recommended_questions to return question_type and config for new question types
+-- Must DROP first because we're changing the return type signature
+DROP FUNCTION IF EXISTS public.get_recommended_questions(uuid);
+
+CREATE OR REPLACE FUNCTION public.get_recommended_questions(target_pack_id uuid DEFAULT NULL::uuid)
+ RETURNS TABLE(id uuid, text text, partner_text text, is_two_part boolean, pack_id uuid, intensity integer, partner_answered boolean, allowed_couple_genders text[], target_user_genders text[], question_type question_type, config jsonb)
+ LANGUAGE plpgsql
+ SECURITY DEFINER
+ SET search_path TO 'public'
+AS $function$
+DECLARE
+  v_user_id UUID;
+  v_couple_id UUID;
+  v_partner_id UUID;
+  v_user_gender TEXT;
+  v_partner_gender TEXT;
+  v_couple_type TEXT;
+  v_has_premium BOOLEAN;
+  v_gap_threshold INTEGER;
+  v_my_unanswered INTEGER;
+  v_partner_unanswered INTEGER;
+  v_net_gap INTEGER;
+  v_user_max_intensity INTEGER;
+  v_partner_max_intensity INTEGER;
+  v_effective_max_intensity INTEGER;
+  v_use_couple_intensity_gate BOOLEAN;
+  v_daily_limit INTEGER;
+  v_daily_count INTEGER;
+  v_today_start TIMESTAMPTZ;
+  v_tomorrow_start TIMESTAMPTZ;
+BEGIN
+  v_user_id := auth.uid();
+
+  SELECT p.couple_id, p.gender, COALESCE(p.max_intensity, 5)
+  INTO v_couple_id, v_user_gender, v_user_max_intensity
+  FROM public.profiles p
+  WHERE p.id = v_user_id;
+
+  IF v_couple_id IS NULL THEN
+    RETURN;
+  END IF;
+
+  SELECT p.id, p.gender, COALESCE(p.max_intensity, 5)
+  INTO v_partner_id, v_partner_gender, v_partner_max_intensity
+  FROM public.profiles p
+  WHERE p.couple_id = v_couple_id AND p.id != v_user_id
+  LIMIT 1;
+
+  -- Toggle: gate questions by couple-effective intensity
+  SELECT COALESCE(ac.couple_intensity_gate_enabled, FALSE)
+  INTO v_use_couple_intensity_gate
+  FROM app_config ac
+  LIMIT 1;
+
+  v_use_couple_intensity_gate := COALESCE(v_use_couple_intensity_gate, FALSE);
+
+  v_effective_max_intensity := CASE
+    WHEN v_use_couple_intensity_gate AND v_partner_id IS NOT NULL THEN LEAST(v_user_max_intensity, v_partner_max_intensity)
+    ELSE v_user_max_intensity
+  END;
+
+  -- Check premium access (used for both answer gap and daily limit)
+  v_has_premium := public.has_premium_access(v_user_id);
+
+  -- Check daily response limit (only when not browsing a specific pack and user is non-premium)
+  IF v_partner_id IS NOT NULL AND target_pack_id IS NULL AND NOT v_has_premium THEN
+    SELECT COALESCE(ac.daily_response_limit, 0) INTO v_daily_limit
+    FROM app_config ac
+    LIMIT 1;
+
+    IF v_daily_limit > 0 THEN
+      v_today_start := date_trunc('day', NOW() AT TIME ZONE 'UTC') AT TIME ZONE 'UTC';
+      v_tomorrow_start := v_today_start + INTERVAL '1 day';
+
+      SELECT COUNT(*)::INTEGER INTO v_daily_count
+      FROM responses r
+      WHERE r.user_id = v_user_id
+      AND r.created_at >= v_today_start
+      AND r.created_at < v_tomorrow_start;
+
+      IF v_daily_count >= v_daily_limit THEN
+        RETURN;
+      END IF;
+    END IF;
+  END IF;
+
+  -- Check answer gap threshold using NET gap (only when not browsing a specific pack)
+  IF v_partner_id IS NOT NULL AND target_pack_id IS NULL THEN
+    SELECT COALESCE(ac.answer_gap_threshold, 10) INTO v_gap_threshold
+    FROM app_config ac
+    LIMIT 1;
+
+    IF v_gap_threshold > 0 THEN
+      WITH enabled_packs AS (
+        SELECT cp.pack_id
+        FROM couple_packs cp
+        WHERE cp.couple_id = v_couple_id AND cp.enabled = true
+      )
+      SELECT
+        COALESCE(SUM(CASE WHEN r.user_id = v_user_id AND NOT EXISTS (
+            SELECT 1 FROM responses pr
+            WHERE pr.question_id = r.question_id
+            AND pr.user_id = v_partner_id
+        ) THEN 1 ELSE 0 END), 0)::integer,
+        COALESCE(SUM(CASE WHEN r.user_id = v_partner_id AND NOT EXISTS (
+            SELECT 1 FROM responses pr
+            WHERE pr.question_id = r.question_id
+            AND pr.user_id = v_user_id
+        ) THEN 1 ELSE 0 END), 0)::integer
+      INTO v_my_unanswered, v_partner_unanswered
+      FROM responses r
+      INNER JOIN questions q ON q.id = r.question_id
+      WHERE r.couple_id = v_couple_id
+      AND r.user_id IN (v_user_id, v_partner_id)
+      AND EXISTS (SELECT 1 FROM enabled_packs)
+      AND q.pack_id IN (SELECT ep.pack_id FROM enabled_packs ep)
+      AND (
+        NOT v_use_couple_intensity_gate
+        OR q.intensity IS NULL
+        OR q.intensity <= v_effective_max_intensity
+      );
+
+      v_net_gap := GREATEST(0, v_my_unanswered - v_partner_unanswered);
+
+      IF v_net_gap >= v_gap_threshold THEN
+        RETURN;
+      END IF;
+    END IF;
+  END IF;
+
+  IF v_user_gender IS NOT NULL AND v_partner_gender IS NOT NULL THEN
+      IF v_user_gender < v_partner_gender THEN
+        v_couple_type := v_user_gender || '+' || v_partner_gender;
+      ELSE
+        v_couple_type := v_partner_gender || '+' || v_user_gender;
+      END IF;
+  END IF;
+
+  RETURN QUERY
+  WITH user_config_exists AS (
+    SELECT 1 FROM public.couple_packs WHERE couple_id = v_couple_id LIMIT 1
+  ),
+  active_packs AS (
+    SELECT target_pack_id AS pack_id
+    WHERE target_pack_id IS NOT NULL
+    AND EXISTS (
+      SELECT 1 FROM public.question_packs qp
+      WHERE qp.id = target_pack_id
+      AND (qp.is_premium = FALSE OR v_has_premium = TRUE)
+    )
+    UNION ALL
+    SELECT cp.pack_id FROM public.couple_packs cp
+    INNER JOIN public.question_packs qp ON qp.id = cp.pack_id
+    WHERE target_pack_id IS NULL
+    AND cp.couple_id = v_couple_id
+    AND cp.enabled = TRUE
+    AND (qp.is_premium = FALSE OR v_has_premium = TRUE)
+    AND EXISTS (SELECT 1 FROM user_config_exists)
+    UNION ALL
+    SELECT p.id AS pack_id FROM public.question_packs p
+    WHERE target_pack_id IS NULL
+    AND p.is_public = TRUE
+    AND (p.is_premium = FALSE OR v_has_premium = TRUE)
+    AND NOT EXISTS (SELECT 1 FROM user_config_exists)
+  )
+  SELECT
+    q.id,
+    CASE
+      WHEN q.partner_text IS NOT NULL AND EXISTS (
+        SELECT 1 FROM public.responses r
+        WHERE r.question_id = q.id
+        AND r.couple_id = v_couple_id
+        AND r.user_id != v_user_id
+      ) THEN q.partner_text
+      ELSE q.text
+    END as text,
+    q.partner_text,
+    q.partner_text IS NOT NULL as is_two_part,
+    q.pack_id,
+    q.intensity,
+    EXISTS (
+      SELECT 1 FROM public.responses r
+      WHERE r.question_id = q.id
+      AND r.couple_id = v_couple_id
+      AND r.user_id != v_user_id
+    ) AS partner_answered,
+    q.allowed_couple_genders,
+    q.target_user_genders,
+    q.question_type,  -- NEW: Return question type
+    q.config          -- NEW: Return question config
+  FROM public.questions q
+  WHERE q.pack_id IN (SELECT ap.pack_id FROM active_packs ap)
+  AND NOT EXISTS (
+    SELECT 1 FROM public.responses r
+    WHERE r.question_id = q.id
+    AND r.user_id = v_user_id
+  )
+  AND (
+    q.allowed_couple_genders IS NULL
+    OR v_couple_type IS NULL
+    OR v_couple_type = ANY(q.allowed_couple_genders)
+  )
+  AND (
+    q.target_user_genders IS NULL
+    OR v_user_gender = ANY(q.target_user_genders)
+    OR EXISTS (
+      SELECT 1 FROM public.responses r
+      WHERE r.question_id = q.id
+      AND r.couple_id = v_couple_id
+      AND r.user_id != v_user_id
+    )
+  )
+  AND (
+    q.intensity IS NULL
+    OR q.intensity <= v_effective_max_intensity
+  )
+  ORDER BY
+    EXISTS (
+      SELECT 1 FROM public.responses r
+      WHERE r.question_id = q.id
+      AND r.couple_id = v_couple_id
+      AND r.user_id != v_user_id
+    ) DESC,
+    q.intensity ASC,
+    q.id ASC;
+END;
+$function$;
diff --git a/apps/supabase/migrations/20260125120000_session_based_notifications.sql b/apps/supabase/migrations/20260125120000_session_based_notifications.sql
new file mode 100644
index 0000000..048e008
--- /dev/null
+++ b/apps/supabase/migrations/20260125120000_session_based_notifications.sql
@@ -0,0 +1,109 @@
+-- Session-based notification system
+--
+-- Changes from the previous match-based notification system:
+-- 1. Notifications are triggered by ANY response, not just matches
+-- 2. Tracks which user is actively answering (active_user_id)
+-- 3. Only notifies the partner of the active user (not both)
+-- 4. Uses rolling 5-minute inactivity window instead of fixed 2-minute delay
+-- 5. Notification copy changes to "[Partner] has been answering questions!"
+
+-- Add new columns to pending_match_notifications
+ALTER TABLE pending_match_notifications
+ADD COLUMN IF NOT EXISTS active_user_id UUID REFERENCES profiles(id) ON DELETE CASCADE,
+ADD COLUMN IF NOT EXISTS response_count INTEGER NOT NULL DEFAULT 0;
+
+-- Drop the old trigger on matches (we'll trigger on responses instead)
+DROP TRIGGER IF EXISTS on_match_created ON matches;
+
+-- Create or replace the notification queue function
+-- Now triggers on responses instead of matches
+CREATE OR REPLACE FUNCTION queue_response_notification()
+RETURNS TRIGGER
+LANGUAGE plpgsql
+SECURITY DEFINER
+SET search_path = 'public'
+AS $$
+DECLARE
+    v_couple_id UUID;
+BEGIN
+    -- Get couple_id from the response
+    v_couple_id := NEW.couple_id;
+
+    -- Skip if no couple_id (shouldn't happen, but safety check)
+    IF v_couple_id IS NULL THEN
+        RETURN NEW;
+    END IF;
+
+    -- Insert or update pending notification with rolling 5-minute window
+    -- The notification is for the PARTNER of the user who is answering
+    INSERT INTO pending_match_notifications (
+        couple_id,
+        active_user_id,
+        match_count,
+        response_count,
+        latest_match_id,
+        notify_at
+    )
+    VALUES (
+        v_couple_id,
+        NEW.user_id,
+        0, -- match_count starts at 0, will be incremented by match trigger if needed
+        1,
+        NULL, -- No match yet
+        now() + interval '5 minutes' -- Rolling 5-minute inactivity window
+    )
+    ON CONFLICT (couple_id) DO UPDATE SET
+        active_user_id = NEW.user_id, -- Update who is active
+        response_count = pending_match_notifications.response_count + 1,
+        notify_at = now() + interval '5 minutes', -- Reset the 5-minute timer
+        updated_at = now();
+
+    RETURN NEW;
+END;
+$$;
+
+-- Create or replace the match count incrementer
+-- This runs when a match is created to track match_count separately
+CREATE OR REPLACE FUNCTION increment_pending_match_count()
+RETURNS TRIGGER
+LANGUAGE plpgsql
+SECURITY DEFINER
+SET search_path = 'public'
+AS $$
+BEGIN
+    -- Update the pending notification to increment match count and store latest match
+    UPDATE pending_match_notifications
+    SET
+        match_count = match_count + 1,
+        latest_match_id = NEW.id,
+        updated_at = now()
+    WHERE couple_id = NEW.couple_id;
+
+    RETURN NEW;
+END;
+$$;
+
+-- Trigger on responses table for activity tracking
+CREATE TRIGGER on_response_created
+    AFTER INSERT ON responses
+    FOR EACH ROW
+    EXECUTE FUNCTION queue_response_notification();
+
+-- Trigger on matches table just to track match count
+CREATE TRIGGER on_match_created_count
+    AFTER INSERT ON matches
+    FOR EACH ROW
+    EXECUTE FUNCTION increment_pending_match_count();
+
+-- Add index on active_user_id for efficient queries
+CREATE INDEX IF NOT EXISTS idx_pending_match_notifications_active_user
+    ON pending_match_notifications(active_user_id);
+
+-- Comment explaining the new behavior
+COMMENT ON TABLE pending_match_notifications IS
+'Session-based notification queue. Tracks when a user is actively answering questions
+and sends a single digest notification to their partner after 5 minutes of inactivity.
+- active_user_id: The user who was answering (their partner receives the notification)
+- response_count: Total responses during this session
+- match_count: Number of matches created during this session
+- notify_at: When to send the notification (rolling 5-min from last activity)';
diff --git a/apps/supabase/migrations/20260125200000_add_onboarding_version.sql b/apps/supabase/migrations/20260125200000_add_onboarding_version.sql
new file mode 100644
index 0000000..41ad029
--- /dev/null
+++ b/apps/supabase/migrations/20260125200000_add_onboarding_version.sql
@@ -0,0 +1,14 @@
+-- Add onboarding_version column to track which version of onboarding users completed
+-- This allows forcing users through re-onboarding when new data is required
+
+ALTER TABLE profiles
+ADD COLUMN onboarding_version INTEGER DEFAULT 0;
+
+-- Set existing users who completed onboarding to version 1
+-- New users will default to 0 and need to complete the current version
+UPDATE profiles
+SET onboarding_version = 1
+WHERE onboarding_completed = true;
+
+-- Add comment for documentation
+COMMENT ON COLUMN profiles.onboarding_version IS 'Version of onboarding flow completed. 0 = never completed, 1+ = completed that version. Used to force re-onboarding when new data is required.';
diff --git a/apps/supabase/migrations/20260125210000_add_nudge_feature.sql b/apps/supabase/migrations/20260125210000_add_nudge_feature.sql
new file mode 100644
index 0000000..f4046b1
--- /dev/null
+++ b/apps/supabase/migrations/20260125210000_add_nudge_feature.sql
@@ -0,0 +1,14 @@
+-- Add nudge feature support
+-- Allows partners to send reminder notifications with rate limiting
+
+-- Add nudge tracking to profiles (for rate limiting)
+ALTER TABLE profiles
+ADD COLUMN IF NOT EXISTS last_nudge_sent_at TIMESTAMPTZ;
+
+-- Add nudge preference to notification_preferences
+ALTER TABLE notification_preferences
+ADD COLUMN IF NOT EXISTS nudges_enabled BOOLEAN DEFAULT true;
+
+-- Comment for documentation
+COMMENT ON COLUMN profiles.last_nudge_sent_at IS 'Timestamp of last nudge sent to partner (rate limited to once per 12 hours)';
+COMMENT ON COLUMN notification_preferences.nudges_enabled IS 'Whether to receive nudge notifications from partner';
diff --git a/docs/live-draw-feature-plan.md b/docs/live-draw-feature-plan.md
new file mode 100644
index 0000000..b41b02f
--- /dev/null
+++ b/docs/live-draw-feature-plan.md
@@ -0,0 +1,202 @@
+# Live Draw Feature - Implementation Plan
+
+## Overview
+
+Add a real-time collaborative drawing canvas where both partners can draw together and see each other's strokes live. Supports async drawing - one partner can draw and the other sees strokes when they open it later. Entry point from the chat media menu.
+
+## Architecture Decisions
+
+| Decision | Choice | Rationale |
+|----------|--------|-----------|
+| Canvas library | `@shopify/react-native-skia` | High-performance Skia engine, great gesture integration, cross-platform |
+| Real-time sync | Supabase Broadcast + DB persistence | Broadcast for live updates, DB for async support |
+| State persistence | `live_draw_sessions` table | Store current canvas state per match for async viewing |
+| Entry point | Chat media menu | Contextual to match, natural extension of chat |
+| Storage | Existing `chat-media` bucket | Save completed drawings as PNG images to chat |
+
+## File Structure
+
+### New Files
+```
+apps/mobile/src/features/live-draw/
+├── index.ts
+├── LiveDrawScreen.tsx           # Main screen
+├── components/
+│   ├── DrawingCanvas.tsx        # Skia canvas + gesture handling
+│   ├── DrawingToolbar.tsx       # Sliders for thickness/color, eraser, undo/redo
+│   ├── ThicknessSlider.tsx      # Custom slider for brush thickness (2-24px)
+│   ├── ColorSlider.tsx          # Hue slider for color selection
+│   └── PartnerCursor.tsx        # Shows partner's position
+├── hooks/
+│   ├── useDrawingSync.ts        # Broadcast sync + DB persistence
+│   ├── useDrawingHistory.ts     # Undo/redo stack management
+│   └── useCanvasCapture.ts      # Capture canvas as image
+├── types.ts
+└── constants.ts
+
+apps/mobile/app/(app)/live-draw/
+└── [matchId].tsx                # Route file
+
+apps/supabase/migrations/
+└── YYYYMMDDHHMMSS_add_live_draw_sessions.sql  # New table for canvas state
+```
+
+### Files to Modify
+- `apps/mobile/package.json` - Add `@shopify/react-native-skia`
+- `apps/mobile/src/features/chat/components/InputBar.tsx` - Add brush icon (4th media menu item)
+- `apps/mobile/src/features/chat/ChatScreen.tsx` - Add `onOpenLiveDraw` handler
+- `apps/mobile/app/(app)/_layout.tsx` - Register hidden `live-draw/[matchId]` route
+
+## Database Schema
+
+```sql
+-- New table for persisting canvas state (async support)
+CREATE TABLE live_draw_sessions (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  match_id UUID NOT NULL REFERENCES matches(id) ON DELETE CASCADE,
+  strokes JSONB NOT NULL DEFAULT '[]',  -- Array of StrokeSegment
+  updated_at TIMESTAMPTZ NOT NULL DEFAULT now(),
+  created_at TIMESTAMPTZ NOT NULL DEFAULT now(),
+  UNIQUE(match_id)  -- One session per match
+);
+
+-- Enable realtime for live updates
+ALTER PUBLICATION supabase_realtime ADD TABLE live_draw_sessions;
+
+-- RLS: Only couple members can access their match's drawing
+CREATE POLICY "Users can view own couple drawings"
+  ON live_draw_sessions FOR SELECT
+  USING (match_id IN (
+    SELECT id FROM matches WHERE couple_id = get_auth_user_couple_id()
+  ));
+
+CREATE POLICY "Users can update own couple drawings"
+  ON live_draw_sessions FOR ALL
+  USING (match_id IN (
+    SELECT id FROM matches WHERE couple_id = get_auth_user_couple_id()
+  ));
+```
+
+## Data Structures
+
+```typescript
+// Normalized coordinates (0-1) for cross-device compatibility
+interface StrokePoint { x: number; y: number; }
+
+interface StrokeSegment {
+  id: string;
+  userId: string;
+  points: StrokePoint[];
+  color: string;       // HSL string from color slider
+  width: number;       // 2-24px from thickness slider
+  timestamp: number;
+  isEraser: boolean;   // If true, renders as white/background color
+}
+
+// Broadcast events (real-time when both online)
+type LiveDrawEvent =
+  | { type: 'stroke_start'; stroke: StrokeSegment }
+  | { type: 'stroke_continue'; strokeId: string; points: StrokePoint[] }
+  | { type: 'stroke_end'; strokeId: string }
+  | { type: 'clear_canvas'; userId: string }
+  | { type: 'undo'; userId: string; strokeId: string }
+  | { type: 'redo'; userId: string; strokeId: string };
+```
+
+## Implementation Phases
+
+### Phase 1: Setup & Database
+1. Create migration for `live_draw_sessions` table
+2. Install `@shopify/react-native-skia`
+3. Run `pod install` for iOS
+4. Create feature folder structure
+
+### Phase 2: Drawing Canvas
+- Skia `Canvas` with `Path` components for each stroke
+- `GestureDetector` from react-native-gesture-handler for touch
+- Quadratic bezier path smoothing for natural strokes
+- Normalized coordinates for different screen sizes
+
+### Phase 3: Toolbar with Sliders
+- **ThicknessSlider**: Horizontal slider (2-24px range), shows preview circle
+- **ColorSlider**: Hue slider (0-360°), displays current color
+- **Eraser toggle**: Button that switches to eraser mode
+- **Undo/Redo buttons**: Stack-based history (own strokes only)
+- **Clear canvas**: With confirmation alert
+
+### Phase 4: Real-time Sync + Persistence
+- Channel: `livedraw:${matchId}` for broadcast
+- Batch points every 50ms (reduces traffic ~80%)
+- On stroke end: Update `live_draw_sessions` table
+- On screen open: Load existing strokes from DB
+- Subscribe to `live_draw_sessions` changes for async updates
+
+### Phase 5: Undo/Redo System
+- `useDrawingHistory` hook manages undo/redo stacks
+- Track own strokes separately from partner strokes
+- Undo removes last own stroke, adds to redo stack
+- Redo restores from redo stack
+- Clear redo stack when new stroke added
+
+### Phase 6: Save & Send
+- Capture canvas as PNG via Skia's `makeImageFromView`
+- Upload to `chat-media` bucket: `{match_id}/livedraw_{timestamp}.png`
+- Insert message with `media_type: 'image'`
+- Clear `live_draw_sessions` for this match (optional - could keep for "continue drawing")
+- Navigate back to chat
+
+### Phase 7: Chat Integration
+- Add brush icon to InputBar media menu
+- Update menu width animation: 132px → 176px (4 items)
+- Wire navigation: `router.push(\`/(app)/live-draw/${matchId}\`)`
+
+## Feature Colors
+
+- User strokes: Primary `#e94560`
+- Partner strokes: Secondary `#9b59b6`
+- Feature accent: Teal `#14B8A6`
+
+## Edge Cases
+
+| Scenario | Handling |
+|----------|----------|
+| Partner disconnects | Continue drawing, strokes persist in DB for when they return |
+| Connection lost | "Reconnecting..." overlay, queue strokes locally, sync on reconnect |
+| Partner not in canvas | Strokes saved to DB, they see when they open |
+| Both save simultaneously | Either can save, creates two messages (fine) |
+| Canvas too large | Limit to ~500 strokes, prompt to save and start fresh |
+
+## Database Changes Required
+
+- New `live_draw_sessions` table (see schema above)
+- Migration file: `apps/supabase/migrations/YYYYMMDDHHMMSS_add_live_draw_sessions.sql`
+- Add to realtime publication
+- RLS policies for couple isolation
+
+## Key Reference Files
+
+These existing files should be referenced during implementation:
+
+- `apps/mobile/src/hooks/useTypingIndicator.ts` - Pattern for Supabase Broadcast real-time sync
+- `apps/mobile/src/features/chat/ChatScreen.tsx` - Parent screen pattern and navigation integration
+- `apps/mobile/src/features/chat/components/InputBar.tsx` - Entry point for brush icon
+- `apps/mobile/src/theme/index.ts` - Design tokens for consistent styling
+
+## Verification
+
+1. **Manual testing with 2 devices**:
+   - Open same chat on both devices
+   - Tap brush icon → both see Live Draw screen
+   - Draw on device A → strokes appear on device B in real-time
+   - Close app on device B, draw more on A, reopen B → see new strokes
+   - Save → image appears in chat on both devices
+
+2. **Unit tests**:
+   - Stroke normalization/denormalization
+   - useDrawingSync broadcast handling
+   - useDrawingHistory undo/redo logic
+
+3. **Platform testing**:
+   - iOS simulator
+   - Android emulator
+   - Web browser
diff --git a/package-lock.json b/package-lock.json
index c9166fb..b15829e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -109,6 +109,7 @@
         "expo-notifications": "~0.29.0",
         "expo-router": "~4.0.0",
         "expo-secure-store": "~14.0.0",
+        "expo-sharing": "^14.0.8",
         "expo-status-bar": "~2.0.0",
         "react": "18.3.1",
         "react-dom": "18.3.1",
@@ -121,6 +122,7 @@
         "react-native-screens": "~4.4.0",
         "react-native-svg": "15.8.0",
         "react-native-url-polyfill": "^2.0.0",
+        "react-native-view-shot": "^4.0.3",
         "react-native-web": "~0.19.13",
         "zustand": "^4.4.7"
       },
@@ -132,6 +134,8 @@
         "@types/react": "~18.3.12",
         "@types/react-test-renderer": "^19.1.0",
         "dotenv-cli": "^11.0.0",
+        "eslint": "^8.57.0",
+        "eslint-config-expo": "~8.0.1",
         "jest": "^29.7.0",
         "jest-expo": "~52.0.0",
         "react-test-renderer": "^18.3.1",
@@ -2431,6 +2435,40 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/@emnapi/core": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.8.1.tgz",
+      "integrity": "sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.1.0",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.8.1.tgz",
+      "integrity": "sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/wasi-threads": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.1.0.tgz",
+      "integrity": "sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@emoji-mart/data": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@emoji-mart/data/-/data-1.2.1.tgz",
@@ -2838,6 +2876,185 @@
         "node": ">=12"
       }
     },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz",
+      "integrity": "sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.12.2",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz",
+      "integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/config-array": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.1.tgz",
+      "integrity": "sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/object-schema": "^2.1.7",
+        "debug": "^4.3.1",
+        "minimatch": "^3.1.2"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/config-helpers": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.4.2.tgz",
+      "integrity": "sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.17.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/core": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.17.0.tgz",
+      "integrity": "sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
+      "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^9.6.0",
+        "globals": "^13.19.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@eslint/eslintrc/node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "8.57.1",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.1.tgz",
+      "integrity": "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/object-schema": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.7.tgz",
+      "integrity": "sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/plugin-kit": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.4.1.tgz",
+      "integrity": "sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.17.0",
+        "levn": "^0.4.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
     "node_modules/@expo/bunyan": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/@expo/bunyan/-/bunyan-4.0.1.tgz",
@@ -4640,6 +4857,82 @@
         "node": ">=6"
       }
     },
+    "node_modules/@humanfs/core": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
+      "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node": {
+      "version": "0.16.7",
+      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.7.tgz",
+      "integrity": "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanfs/core": "^0.19.1",
+        "@humanwhocodes/retry": "^0.4.0"
+      },
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanwhocodes/config-array": {
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
+      "integrity": "sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==",
+      "deprecated": "Use @eslint/config-array instead",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanwhocodes/object-schema": "^2.0.3",
+        "debug": "^4.3.1",
+        "minimatch": "^3.0.5"
+      },
+      "engines": {
+        "node": ">=10.10.0"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/object-schema": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
+      "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
+      "deprecated": "Use @eslint/object-schema instead",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@humanwhocodes/retry": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz",
+      "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
     "node_modules/@ide/backoff": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@ide/backoff/-/backoff-1.0.0.tgz",
@@ -5667,6 +5960,19 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "0.2.12",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.12.tgz",
+      "integrity": "sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.4.3",
+        "@emnapi/runtime": "^1.4.3",
+        "@tybys/wasm-util": "^0.10.0"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -5702,6 +6008,16 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@nolyfill/is-core-module": {
+      "version": "1.0.39",
+      "resolved": "https://registry.npmjs.org/@nolyfill/is-core-module/-/is-core-module-1.0.39.tgz",
+      "integrity": "sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.4.0"
+      }
+    },
     "node_modules/@npmcli/fs": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-3.1.1.tgz",
@@ -8305,6 +8621,13 @@
         "win32"
       ]
     },
+    "node_modules/@rtsao/scc": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
+      "integrity": "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@sauci/admin": {
       "resolved": "apps/admin",
       "link": true
@@ -8937,6 +9260,17 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@tybys/wasm-util": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
+      "integrity": "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -9213,6 +9547,13 @@
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
       "license": "MIT"
     },
+    "node_modules/@types/json5": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
+      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/keyv": {
       "version": "3.1.4",
       "resolved": "https://registry.npmjs.org/@types/keyv/-/keyv-3.1.4.tgz",
@@ -9362,6 +9703,564 @@
       "integrity": "sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==",
       "license": "MIT"
     },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "8.53.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.53.1.tgz",
+      "integrity": "sha512-cFYYFZ+oQFi6hUnBTbLRXfTJiaQtYE3t4O692agbBl+2Zy+eqSKWtPjhPXJu1G7j4RLjKgeJPDdq3EqOwmX5Ag==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.12.2",
+        "@typescript-eslint/scope-manager": "8.53.1",
+        "@typescript-eslint/type-utils": "8.53.1",
+        "@typescript-eslint/utils": "8.53.1",
+        "@typescript-eslint/visitor-keys": "8.53.1",
+        "ignore": "^7.0.5",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^2.4.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^8.53.1",
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/ignore": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+      "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "8.53.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.53.1.tgz",
+      "integrity": "sha512-nm3cvFN9SqZGXjmw5bZ6cGmvJSyJPn0wU9gHAZZHDnZl2wF9PhHv78Xf06E0MaNk4zLVHL8hb2/c32XvyJOLQg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "8.53.1",
+        "@typescript-eslint/types": "8.53.1",
+        "@typescript-eslint/typescript-estree": "8.53.1",
+        "@typescript-eslint/visitor-keys": "8.53.1",
+        "debug": "^4.4.3"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/project-service": {
+      "version": "8.53.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.53.1.tgz",
+      "integrity": "sha512-WYC4FB5Ra0xidsmlPb+1SsnaSKPmS3gsjIARwbEkHkoWloQmuzcfypljaJcR78uyLA1h8sHdWWPHSLDI+MtNog==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/tsconfig-utils": "^8.53.1",
+        "@typescript-eslint/types": "^8.53.1",
+        "debug": "^4.4.3"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.53.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.53.1.tgz",
+      "integrity": "sha512-Lu23yw1uJMFY8cUeq7JlrizAgeQvWugNQzJp8C3x8Eo5Jw5Q2ykMdiiTB9vBVOOUBysMzmRRmUfwFrZuI2C4SQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.53.1",
+        "@typescript-eslint/visitor-keys": "8.53.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/tsconfig-utils": {
+      "version": "8.53.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.53.1.tgz",
+      "integrity": "sha512-qfvLXS6F6b1y43pnf0pPbXJ+YoXIC7HKg0UGZ27uMIemKMKA6XH2DTxsEDdpdN29D+vHV07x/pnlPNVLhdhWiA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "8.53.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.53.1.tgz",
+      "integrity": "sha512-MOrdtNvyhy0rHyv0ENzub1d4wQYKb2NmIqG7qEqPWFW7Mpy2jzFC3pQ2yKDvirZB7jypm5uGjF2Qqs6OIqu47w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.53.1",
+        "@typescript-eslint/typescript-estree": "8.53.1",
+        "@typescript-eslint/utils": "8.53.1",
+        "debug": "^4.4.3",
+        "ts-api-utils": "^2.4.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "8.53.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.53.1.tgz",
+      "integrity": "sha512-jr/swrr2aRmUAUjW5/zQHbMaui//vQlsZcJKijZf3M26bnmLj8LyZUpj8/Rd6uzaek06OWsqdofN/Thenm5O8A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.53.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.53.1.tgz",
+      "integrity": "sha512-RGlVipGhQAG4GxV1s34O91cxQ/vWiHJTDHbXRr0li2q/BGg3RR/7NM8QDWgkEgrwQYCvmJV9ichIwyoKCQ+DTg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/project-service": "8.53.1",
+        "@typescript-eslint/tsconfig-utils": "8.53.1",
+        "@typescript-eslint/types": "8.53.1",
+        "@typescript-eslint/visitor-keys": "8.53.1",
+        "debug": "^4.4.3",
+        "minimatch": "^9.0.5",
+        "semver": "^7.7.3",
+        "tinyglobby": "^0.2.15",
+        "ts-api-utils": "^2.4.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "8.53.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.53.1.tgz",
+      "integrity": "sha512-c4bMvGVWW4hv6JmDUEG7fSYlWOl3II2I4ylt0NM+seinYQlZMQIaKaXIIVJWt9Ofh6whrpM+EdDQXKXjNovvrg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.9.1",
+        "@typescript-eslint/scope-manager": "8.53.1",
+        "@typescript-eslint/types": "8.53.1",
+        "@typescript-eslint/typescript-estree": "8.53.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.53.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.53.1.tgz",
+      "integrity": "sha512-oy+wV7xDKFPRyNggmXuZQSBzvoLnpmJs+GhzRhPjrxl2b/jIlyjVokzm47CZCDUdXKr2zd7ZLodPfOBpOPyPlg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.53.1",
+        "eslint-visitor-keys": "^4.2.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@ungap/structured-clone": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
+      "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/@unrs/resolver-binding-android-arm-eabi": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm-eabi/-/resolver-binding-android-arm-eabi-1.11.1.tgz",
+      "integrity": "sha512-ppLRUgHVaGRWUx0R0Ut06Mjo9gBaBkg3v/8AxusGLhsIotbBLuRk51rAzqLC8gq6NyyAojEXglNjzf6R948DNw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-android-arm64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm64/-/resolver-binding-android-arm64-1.11.1.tgz",
+      "integrity": "sha512-lCxkVtb4wp1v+EoN+HjIG9cIIzPkX5OtM03pQYkG+U5O/wL53LC4QbIeazgiKqluGeVEeBlZahHalCaBvU1a2g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-darwin-arm64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-arm64/-/resolver-binding-darwin-arm64-1.11.1.tgz",
+      "integrity": "sha512-gPVA1UjRu1Y/IsB/dQEsp2V1pm44Of6+LWvbLc9SDk1c2KhhDRDBUkQCYVWe6f26uJb3fOK8saWMgtX8IrMk3g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-darwin-x64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-x64/-/resolver-binding-darwin-x64-1.11.1.tgz",
+      "integrity": "sha512-cFzP7rWKd3lZaCsDze07QX1SC24lO8mPty9vdP+YVa3MGdVgPmFc59317b2ioXtgCMKGiCLxJ4HQs62oz6GfRQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-freebsd-x64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-freebsd-x64/-/resolver-binding-freebsd-x64-1.11.1.tgz",
+      "integrity": "sha512-fqtGgak3zX4DCB6PFpsH5+Kmt/8CIi4Bry4rb1ho6Av2QHTREM+47y282Uqiu3ZRF5IQioJQ5qWRV6jduA+iGw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm-gnueabihf": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-gnueabihf/-/resolver-binding-linux-arm-gnueabihf-1.11.1.tgz",
+      "integrity": "sha512-u92mvlcYtp9MRKmP+ZvMmtPN34+/3lMHlyMj7wXJDeXxuM0Vgzz0+PPJNsro1m3IZPYChIkn944wW8TYgGKFHw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm-musleabihf": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-musleabihf/-/resolver-binding-linux-arm-musleabihf-1.11.1.tgz",
+      "integrity": "sha512-cINaoY2z7LVCrfHkIcmvj7osTOtm6VVT16b5oQdS4beibX2SYBwgYLmqhBjA1t51CarSaBuX5YNsWLjsqfW5Cw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-gnu/-/resolver-binding-linux-arm64-gnu-1.11.1.tgz",
+      "integrity": "sha512-34gw7PjDGB9JgePJEmhEqBhWvCiiWCuXsL9hYphDF7crW7UgI05gyBAi6MF58uGcMOiOqSJ2ybEeCvHcq0BCmQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm64-musl": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-musl/-/resolver-binding-linux-arm64-musl-1.11.1.tgz",
+      "integrity": "sha512-RyMIx6Uf53hhOtJDIamSbTskA99sPHS96wxVE/bJtePJJtpdKGXO1wY90oRdXuYOGOTuqjT8ACccMc4K6QmT3w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-ppc64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-ppc64-gnu/-/resolver-binding-linux-ppc64-gnu-1.11.1.tgz",
+      "integrity": "sha512-D8Vae74A4/a+mZH0FbOkFJL9DSK2R6TFPC9M+jCWYia/q2einCubX10pecpDiTmkJVUH+y8K3BZClycD8nCShA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-riscv64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-gnu/-/resolver-binding-linux-riscv64-gnu-1.11.1.tgz",
+      "integrity": "sha512-frxL4OrzOWVVsOc96+V3aqTIQl1O2TjgExV4EKgRY09AJ9leZpEg8Ak9phadbuX0BA4k8U5qtvMSQQGGmaJqcQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-riscv64-musl": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-musl/-/resolver-binding-linux-riscv64-musl-1.11.1.tgz",
+      "integrity": "sha512-mJ5vuDaIZ+l/acv01sHoXfpnyrNKOk/3aDoEdLO/Xtn9HuZlDD6jKxHlkN8ZhWyLJsRBxfv9GYM2utQ1SChKew==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-s390x-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-s390x-gnu/-/resolver-binding-linux-s390x-gnu-1.11.1.tgz",
+      "integrity": "sha512-kELo8ebBVtb9sA7rMe1Cph4QHreByhaZ2QEADd9NzIQsYNQpt9UkM9iqr2lhGr5afh885d/cB5QeTXSbZHTYPg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-x64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-gnu/-/resolver-binding-linux-x64-gnu-1.11.1.tgz",
+      "integrity": "sha512-C3ZAHugKgovV5YvAMsxhq0gtXuwESUKc5MhEtjBpLoHPLYM+iuwSj3lflFwK3DPm68660rZ7G8BMcwSro7hD5w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-x64-musl": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-musl/-/resolver-binding-linux-x64-musl-1.11.1.tgz",
+      "integrity": "sha512-rV0YSoyhK2nZ4vEswT/QwqzqQXw5I6CjoaYMOX0TqBlWhojUf8P94mvI7nuJTeaCkkds3QE4+zS8Ko+GdXuZtA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-wasm32-wasi": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-wasm32-wasi/-/resolver-binding-wasm32-wasi-1.11.1.tgz",
+      "integrity": "sha512-5u4RkfxJm+Ng7IWgkzi3qrFOvLvQYnPBmjmZQ8+szTK/b31fQCnleNl1GgEt7nIsZRIf5PLhPwT0WM+q45x/UQ==",
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@napi-rs/wasm-runtime": "^0.2.11"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@unrs/resolver-binding-win32-arm64-msvc": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-arm64-msvc/-/resolver-binding-win32-arm64-msvc-1.11.1.tgz",
+      "integrity": "sha512-nRcz5Il4ln0kMhfL8S3hLkxI85BXs3o8EYoattsJNdsX4YUU89iOkVn7g0VHSRxFuVMdM4Q1jEpIId1Ihim/Uw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-win32-ia32-msvc": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-ia32-msvc/-/resolver-binding-win32-ia32-msvc-1.11.1.tgz",
+      "integrity": "sha512-DCEI6t5i1NmAZp6pFonpD5m7i6aFrpofcp4LA2i8IIq60Jyo28hamKBxNrZcyOwVOZkgsRp9O2sXWBWP8MnvIQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-win32-x64-msvc": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-x64-msvc/-/resolver-binding-win32-x64-msvc-1.11.1.tgz",
+      "integrity": "sha512-lrW200hZdbfRtztbygyaq/6jP6AKE8qQN2KvPcJ+x7wiD038YtnYtZ82IMNJ69GJibV7bwL3y9FgK+5w/pYt6g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
     "node_modules/@urql/core": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@urql/core/-/core-5.2.0.tgz",
@@ -9678,6 +10577,16 @@
         "acorn": "^8.14.0"
       }
     },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
     "node_modules/acorn-loose": {
       "version": "8.5.2",
       "resolved": "https://registry.npmjs.org/acorn-loose/-/acorn-loose-8.5.2.tgz",
@@ -9886,6 +10795,46 @@
         "node": ">=10"
       }
     },
+    "node_modules/array-buffer-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
+      "integrity": "sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "is-array-buffer": "^3.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array-includes": {
+      "version": "3.1.9",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.9.tgz",
+      "integrity": "sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.24.0",
+        "es-object-atoms": "^1.1.1",
+        "get-intrinsic": "^1.3.0",
+        "is-string": "^1.1.1",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/array-union": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
@@ -9895,6 +10844,126 @@
         "node": ">=8"
       }
     },
+    "node_modules/array.prototype.findlast": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz",
+      "integrity": "sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.findlastindex": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.6.tgz",
+      "integrity": "sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.9",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "es-shim-unscopables": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flat": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.3.tgz",
+      "integrity": "sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flatmap": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.3.tgz",
+      "integrity": "sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.tosorted": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz",
+      "integrity": "sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.3",
+        "es-errors": "^1.3.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/arraybuffer.prototype.slice": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz",
+      "integrity": "sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.1",
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "is-array-buffer": "^3.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/asap": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
@@ -9926,6 +10995,16 @@
         "node": ">=4"
       }
     },
+    "node_modules/async-function": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/async-function/-/async-function-1.0.0.tgz",
+      "integrity": "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/async-limiter": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
@@ -11328,6 +12407,15 @@
         "hyphenate-style-name": "^1.0.3"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/css-select": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.2.2.tgz",
@@ -11552,6 +12640,60 @@
         "node": ">=12"
       }
     },
+    "node_modules/data-view-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
+      "integrity": "sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/data-view-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz",
+      "integrity": "sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/inspect-js"
+      }
+    },
+    "node_modules/data-view-byte-offset": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz",
+      "integrity": "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/date-fns": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
@@ -11652,6 +12794,13 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/deepmerge": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
@@ -11852,6 +13001,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/doctrine": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
@@ -12121,6 +13283,75 @@
         "stackframe": "^1.3.4"
       }
     },
+    "node_modules/es-abstract": {
+      "version": "1.24.1",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.1.tgz",
+      "integrity": "sha512-zHXBLhP+QehSSbsS9Pt23Gg964240DPd6QCf8WpkqEXxQ7fhdZzYsocOr5u7apWonsS5EjZDmTF+/slGMyasvw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.2",
+        "arraybuffer.prototype.slice": "^1.0.4",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "data-view-buffer": "^1.0.2",
+        "data-view-byte-length": "^1.0.2",
+        "data-view-byte-offset": "^1.0.1",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "es-set-tostringtag": "^2.1.0",
+        "es-to-primitive": "^1.3.0",
+        "function.prototype.name": "^1.1.8",
+        "get-intrinsic": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "get-symbol-description": "^1.1.0",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "internal-slot": "^1.1.0",
+        "is-array-buffer": "^3.0.5",
+        "is-callable": "^1.2.7",
+        "is-data-view": "^1.0.2",
+        "is-negative-zero": "^2.0.3",
+        "is-regex": "^1.2.1",
+        "is-set": "^2.0.3",
+        "is-shared-array-buffer": "^1.0.4",
+        "is-string": "^1.1.1",
+        "is-typed-array": "^1.1.15",
+        "is-weakref": "^1.1.1",
+        "math-intrinsics": "^1.1.0",
+        "object-inspect": "^1.13.4",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.7",
+        "own-keys": "^1.0.1",
+        "regexp.prototype.flags": "^1.5.4",
+        "safe-array-concat": "^1.1.3",
+        "safe-push-apply": "^1.0.0",
+        "safe-regex-test": "^1.1.0",
+        "set-proto": "^1.0.0",
+        "stop-iteration-iterator": "^1.1.0",
+        "string.prototype.trim": "^1.2.10",
+        "string.prototype.trimend": "^1.0.9",
+        "string.prototype.trimstart": "^1.0.8",
+        "typed-array-buffer": "^1.0.3",
+        "typed-array-byte-length": "^1.0.3",
+        "typed-array-byte-offset": "^1.0.4",
+        "typed-array-length": "^1.0.7",
+        "unbox-primitive": "^1.1.0",
+        "which-typed-array": "^1.1.19"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/es-define-property": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
@@ -12139,6 +13370,34 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-iterator-helpers": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.2.2.tgz",
+      "integrity": "sha512-BrUQ0cPTB/IwXj23HtwHjS9n7O4h9FX94b4xc5zlTHxeLgTAdzYUDyy6KdExAl9lbN5rtfe44xpjpmj9grxs5w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.24.1",
+        "es-errors": "^1.3.0",
+        "es-set-tostringtag": "^2.1.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.3.0",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "iterator.prototype": "^1.1.5",
+        "safe-array-concat": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/es-module-lexer": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.0.0.tgz",
@@ -12174,6 +13433,37 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-shim-unscopables": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.1.0.tgz",
+      "integrity": "sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-to-primitive": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.3.0.tgz",
+      "integrity": "sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.2.7",
+        "is-date-object": "^1.0.5",
+        "is-symbol": "^1.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/es-toolkit": {
       "version": "1.44.0",
       "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.44.0.tgz",
@@ -12272,6 +13562,568 @@
         "source-map": "~0.6.1"
       }
     },
+    "node_modules/eslint": {
+      "version": "8.57.1",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.1.tgz",
+      "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
+      "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.2.0",
+        "@eslint-community/regexpp": "^4.6.1",
+        "@eslint/eslintrc": "^2.1.4",
+        "@eslint/js": "8.57.1",
+        "@humanwhocodes/config-array": "^0.13.0",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@nodelib/fs.walk": "^1.2.8",
+        "@ungap/structured-clone": "^1.2.0",
+        "ajv": "^6.12.4",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
+        "debug": "^4.3.2",
+        "doctrine": "^3.0.0",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^7.2.2",
+        "eslint-visitor-keys": "^3.4.3",
+        "espree": "^9.6.1",
+        "esquery": "^1.4.2",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^6.0.1",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "globals": "^13.19.0",
+        "graphemer": "^1.4.0",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "is-path-inside": "^3.0.3",
+        "js-yaml": "^4.1.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "levn": "^0.4.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3",
+        "strip-ansi": "^6.0.1",
+        "text-table": "^0.2.0"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-config-expo": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-config-expo/-/eslint-config-expo-8.0.1.tgz",
+      "integrity": "sha512-r9PSgkuZk5Q5ALbk1yowYwEIj0oqO/ikRO9TNhpx2DzSOdK65y3urgFI04WYvQzMr9q1fnA62wr9iGfrsmF5pQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/eslint-plugin": "^8.9.0",
+        "@typescript-eslint/parser": "^8.9.0",
+        "eslint-import-resolver-typescript": "^3.6.3",
+        "eslint-plugin-expo": "^0.1.0",
+        "eslint-plugin-import": "^2.30.0",
+        "eslint-plugin-react": "^7.36.1",
+        "eslint-plugin-react-hooks": "^4.6.2"
+      },
+      "peerDependencies": {
+        "eslint": ">=8.10"
+      }
+    },
+    "node_modules/eslint-import-resolver-node": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
+      "integrity": "sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^3.2.7",
+        "is-core-module": "^2.13.0",
+        "resolve": "^1.22.4"
+      }
+    },
+    "node_modules/eslint-import-resolver-node/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-import-resolver-typescript": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.10.1.tgz",
+      "integrity": "sha512-A1rHYb06zjMGAxdLSkN2fXPBwuSaQ0iO5M/hdyS0Ajj1VBaRp0sPD3dn1FhME3c/JluGFbwSxyCfqdSbtQLAHQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@nolyfill/is-core-module": "1.0.39",
+        "debug": "^4.4.0",
+        "get-tsconfig": "^4.10.0",
+        "is-bun-module": "^2.0.0",
+        "stable-hash": "^0.0.5",
+        "tinyglobby": "^0.2.13",
+        "unrs-resolver": "^1.6.2"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-import-resolver-typescript"
+      },
+      "peerDependencies": {
+        "eslint": "*",
+        "eslint-plugin-import": "*",
+        "eslint-plugin-import-x": "*"
+      },
+      "peerDependenciesMeta": {
+        "eslint-plugin-import": {
+          "optional": true
+        },
+        "eslint-plugin-import-x": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-module-utils": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.12.1.tgz",
+      "integrity": "sha512-L8jSWTze7K2mTg0vos/RuLRS5soomksDPoJLXIslC7c8Wmut3bx7CPpJijDcBZtxQ5lrbUdM+s0OlNbz0DCDNw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^3.2.7"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-module-utils/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-plugin-expo": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-expo/-/eslint-plugin-expo-0.1.4.tgz",
+      "integrity": "sha512-YA7yiMacQbLJySuyJA0Eb5V65obqp6fVOWtw1JdYDRWC5MeToPrnNvhGDpk01Bv3Vm4ownuzUfvi89MXi1d6cg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "^8.29.1",
+        "@typescript-eslint/utils": "^8.29.1",
+        "eslint": "^9.24.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "eslint": ">=8.10"
+      }
+    },
+    "node_modules/eslint-plugin-expo/node_modules/@eslint/eslintrc": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.3.tgz",
+      "integrity": "sha512-Kr+LPIUVKz2qkx1HAMH8q1q6azbqBAsXJUxBl/ODDuVPX45Z9DfwB8tPjTi6nNZ8BuM3nbJxC5zCAg5elnBUTQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^10.0.1",
+        "globals": "^14.0.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.1",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-plugin-expo/node_modules/@eslint/js": {
+      "version": "9.39.2",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.2.tgz",
+      "integrity": "sha512-q1mjIoW1VX4IvSocvM/vbTiveKC4k9eLrajNEuSsmjymSDEbpGddtpfOoN7YGAqBK3NG+uqo8ia4PDTt8buCYA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      }
+    },
+    "node_modules/eslint-plugin-expo/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/eslint-plugin-expo/node_modules/eslint": {
+      "version": "9.39.2",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.2.tgz",
+      "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.8.0",
+        "@eslint-community/regexpp": "^4.12.1",
+        "@eslint/config-array": "^0.21.1",
+        "@eslint/config-helpers": "^0.4.2",
+        "@eslint/core": "^0.17.0",
+        "@eslint/eslintrc": "^3.3.1",
+        "@eslint/js": "9.39.2",
+        "@eslint/plugin-kit": "^0.4.1",
+        "@humanfs/node": "^0.16.6",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@humanwhocodes/retry": "^0.4.2",
+        "@types/estree": "^1.0.6",
+        "ajv": "^6.12.4",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.6",
+        "debug": "^4.3.2",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^8.4.0",
+        "eslint-visitor-keys": "^4.2.1",
+        "espree": "^10.4.0",
+        "esquery": "^1.5.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^8.0.0",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "jiti": "*"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-plugin-expo/node_modules/eslint-scope": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
+      "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-plugin-expo/node_modules/eslint-visitor-keys": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-plugin-expo/node_modules/espree": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
+      "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "acorn": "^8.15.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^4.2.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-plugin-expo/node_modules/file-entry-cache": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
+      "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flat-cache": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-expo/node_modules/flat-cache": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
+      "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/eslint-plugin-expo/node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/eslint-plugin-expo/node_modules/globals": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
+      "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint-plugin-expo/node_modules/import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint-plugin-expo/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/eslint-plugin-expo/node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/eslint-plugin-import": {
+      "version": "2.32.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz",
+      "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rtsao/scc": "^1.1.0",
+        "array-includes": "^3.1.9",
+        "array.prototype.findlastindex": "^1.2.6",
+        "array.prototype.flat": "^1.3.3",
+        "array.prototype.flatmap": "^1.3.3",
+        "debug": "^3.2.7",
+        "doctrine": "^2.1.0",
+        "eslint-import-resolver-node": "^0.3.9",
+        "eslint-module-utils": "^2.12.1",
+        "hasown": "^2.0.2",
+        "is-core-module": "^2.16.1",
+        "is-glob": "^4.0.3",
+        "minimatch": "^3.1.2",
+        "object.fromentries": "^2.0.8",
+        "object.groupby": "^1.0.3",
+        "object.values": "^1.2.1",
+        "semver": "^6.3.1",
+        "string.prototype.trimend": "^1.0.9",
+        "tsconfig-paths": "^3.15.0"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/doctrine": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/eslint-plugin-react": {
+      "version": "7.37.5",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.5.tgz",
+      "integrity": "sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-includes": "^3.1.8",
+        "array.prototype.findlast": "^1.2.5",
+        "array.prototype.flatmap": "^1.3.3",
+        "array.prototype.tosorted": "^1.1.4",
+        "doctrine": "^2.1.0",
+        "es-iterator-helpers": "^1.2.1",
+        "estraverse": "^5.3.0",
+        "hasown": "^2.0.2",
+        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
+        "minimatch": "^3.1.2",
+        "object.entries": "^1.1.9",
+        "object.fromentries": "^2.0.8",
+        "object.values": "^1.2.1",
+        "prop-types": "^15.8.1",
+        "resolve": "^2.0.0-next.5",
+        "semver": "^6.3.1",
+        "string.prototype.matchall": "^4.0.12",
+        "string.prototype.repeat": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7"
+      }
+    },
+    "node_modules/eslint-plugin-react-hooks": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz",
+      "integrity": "sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/doctrine": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/resolve": {
+      "version": "2.0.0-next.5",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz",
+      "integrity": "sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/eslint-scope": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
@@ -12298,6 +14150,91 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/eslint/node_modules/eslint-scope": {
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
+      "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint/node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/eslint/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/espree": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
+      "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "acorn": "^8.9.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^3.4.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
     "node_modules/esprima": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
@@ -12311,13 +14248,25 @@
         "node": ">=4"
       }
     },
+    "node_modules/esquery": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.7.0.tgz",
+      "integrity": "sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/esrecurse": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
       "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
       "dev": true,
       "license": "BSD-2-Clause",
-      "peer": true,
       "dependencies": {
         "estraverse": "^5.2.0"
       },
@@ -13147,6 +15096,15 @@
         "expo": "*"
       }
     },
+    "node_modules/expo-sharing": {
+      "version": "14.0.8",
+      "resolved": "https://registry.npmjs.org/expo-sharing/-/expo-sharing-14.0.8.tgz",
+      "integrity": "sha512-A1pPr2iBrxypFDCWVAESk532HK+db7MFXbvO2sCV9ienaFXAk7lIBm6bkqgE6vzRd9O3RGdEGzYx80cYlc089Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-status-bar": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/expo-status-bar/-/expo-status-bar-2.0.1.tgz",
@@ -13200,6 +15158,13 @@
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
       "license": "MIT"
     },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/fast-loops": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/fast-loops/-/fast-loops-1.1.4.tgz",
@@ -13282,12 +15247,43 @@
       "integrity": "sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==",
       "license": "MIT"
     },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fetch-retry": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/fetch-retry/-/fetch-retry-4.1.1.tgz",
       "integrity": "sha512-e6eB7zN6UBSwGVwrbWVH+gdLnkW9WwHhmq2YDK1Sh30pzx1onRVGBvogTlUeWxwTa+L86NYdo4hFkh7O8ZjSnA==",
       "license": "MIT"
     },
+    "node_modules/file-entry-cache": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
+      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flat-cache": "^3.0.4"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -13536,6 +15532,28 @@
         }
       }
     },
+    "node_modules/flat-cache": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
+      "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.3",
+        "rimraf": "^3.0.2"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
+      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/flow-enums-runtime": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/flow-enums-runtime/-/flow-enums-runtime-0.0.6.tgz",
@@ -13731,6 +15749,37 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/function.prototype.name": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.8.tgz",
+      "integrity": "sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "functions-have-names": "^1.2.3",
+        "hasown": "^2.0.2",
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/generator-function": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/generator-function/-/generator-function-2.0.1.tgz",
@@ -13828,6 +15877,37 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/get-symbol-description": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
+      "integrity": "sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-tsconfig": {
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.13.0.tgz",
+      "integrity": "sha512-1VKTZJCwBrvbd+Wn3AOgQP/2Av+TfTCOlE4AcRJE72W1ksZXbAx8PPBR9RzgTeSPzlPMHrbANMH3LbltH73wxQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "resolve-pkg-maps": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
+      }
+    },
     "node_modules/getenv": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/getenv/-/getenv-1.0.0.tgz",
@@ -13878,6 +15958,52 @@
       "license": "BSD-2-Clause",
       "peer": true
     },
+    "node_modules/globals": {
+      "version": "13.24.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globals/node_modules/type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "dev": true,
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globalthis": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
+      "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.2.1",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/globby": {
       "version": "11.1.0",
       "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
@@ -13941,6 +16067,26 @@
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
       "license": "ISC"
     },
+    "node_modules/graphemer": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
+      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/has-bigints": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
+      "integrity": "sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -13962,6 +16108,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/has-proto": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.2.0.tgz",
+      "integrity": "sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/has-symbols": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
@@ -14069,6 +16231,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "license": "MIT",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/http-cache-semantics": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.2.0.tgz",
@@ -14363,6 +16538,21 @@
         "node": ">=6"
       }
     },
+    "node_modules/internal-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
+      "integrity": "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "hasown": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/internmap": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
@@ -14415,12 +16605,66 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-array-buffer": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
+      "integrity": "sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
       "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
       "license": "MIT"
     },
+    "node_modules/is-async-function": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz",
+      "integrity": "sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "async-function": "^1.0.0",
+        "call-bound": "^1.0.3",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-bigint": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.1.0.tgz",
+      "integrity": "sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-bigints": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -14434,12 +16678,52 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-boolean-object": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
+      "integrity": "sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-buffer": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
       "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
       "license": "MIT"
     },
+    "node_modules/is-bun-module": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-bun-module/-/is-bun-module-2.0.0.tgz",
+      "integrity": "sha512-gNCGbnnnnFAUGKeZ9PdbyeGYJqewpmc2aKHUEMO5nQPWU9lOmv7jcmQIv+qHD8fXW6W7qfuCwX4rY9LNRjXrkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.7.1"
+      }
+    },
+    "node_modules/is-bun-module/node_modules/semver": {
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/is-callable": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
@@ -14467,6 +16751,41 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-data-view": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.2.tgz",
+      "integrity": "sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-date-object": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz",
+      "integrity": "sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-directory": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/is-directory/-/is-directory-0.3.1.tgz",
@@ -14500,6 +16819,22 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-finalizationregistry": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz",
+      "integrity": "sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-fullwidth-code-point": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
@@ -14550,6 +16885,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-map": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
+      "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-nan": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/is-nan/-/is-nan-1.3.2.tgz",
@@ -14566,6 +16914,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-negative-zero": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
+      "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -14575,6 +16936,23 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/is-number-object": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.1.tgz",
+      "integrity": "sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-path-cwd": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz",
@@ -14639,6 +17017,35 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-set": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
+      "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-shared-array-buffer": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz",
+      "integrity": "sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-stream": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
@@ -14648,6 +17055,41 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-string": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.1.tgz",
+      "integrity": "sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-symbol": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.1.1.tgz",
+      "integrity": "sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-typed-array": {
       "version": "1.1.15",
       "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
@@ -14663,6 +17105,52 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-weakmap": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
+      "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.1.1.tgz",
+      "integrity": "sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakset": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.4.tgz",
+      "integrity": "sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-wsl": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
@@ -14675,6 +17163,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -14773,6 +17268,24 @@
         "node": ">=8"
       }
     },
+    "node_modules/iterator.prototype": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.5.tgz",
+      "integrity": "sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.6",
+        "get-proto": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/jackspeak": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
@@ -16682,6 +19195,13 @@
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
       "license": "MIT"
     },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/json5": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
@@ -16703,6 +19223,22 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/jsx-ast-utils": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
+      "integrity": "sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-includes": "^3.1.6",
+        "array.prototype.flat": "^1.3.1",
+        "object.assign": "^4.1.4",
+        "object.values": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -16739,6 +19275,20 @@
         "node": ">=6"
       }
     },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/lighthouse-logger": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/lighthouse-logger/-/lighthouse-logger-1.4.2.tgz",
@@ -17060,6 +19610,13 @@
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
       "license": "MIT"
     },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/lodash.throttle": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
@@ -17969,6 +20526,22 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/napi-postinstall": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/napi-postinstall/-/napi-postinstall-0.3.4.tgz",
+      "integrity": "sha512-PHI5f1O0EP5xJ9gQmFGMS6IZcrVvTjpXjz7Na41gTE7eE2hK11lg04CECCYEEjdc17EV4DO+fkGEtt7TpTaTiQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "napi-postinstall": "lib/cli.js"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/napi-postinstall"
+      }
+    },
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -18223,6 +20796,19 @@
         "node": ">= 6"
       }
     },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/object-is": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.6.tgz",
@@ -18268,6 +20854,75 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/object.entries": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.9.tgz",
+      "integrity": "sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.fromentries": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.8.tgz",
+      "integrity": "sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.groupby": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/object.groupby/-/object.groupby-1.0.3.tgz",
+      "integrity": "sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.values": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.1.tgz",
+      "integrity": "sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/on-finished": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
@@ -18371,6 +21026,24 @@
       "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
       "license": "MIT"
     },
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/ora": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/ora/-/ora-3.4.0.tgz",
@@ -18480,6 +21153,24 @@
         "node": ">=4"
       }
     },
+    "node_modules/own-keys": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz",
+      "integrity": "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-intrinsic": "^1.2.6",
+        "object-keys": "^1.1.1",
+        "safe-push-apply": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/p-cancelable": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-2.1.1.tgz",
@@ -18558,6 +21249,19 @@
       "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
       "license": "BlueOak-1.0.0"
     },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/parse-json": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
@@ -19090,6 +21794,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
@@ -19692,6 +22406,19 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-view-shot": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/react-native-view-shot/-/react-native-view-shot-4.0.3.tgz",
+      "integrity": "sha512-USNjYmED7C0me02c1DxKA0074Hw+y/nxo+xJKlffMvfUWWzL5ELh/TJA/pTnVqFurIrzthZDPtDM7aBFJuhrHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "html2canvas": "^1.4.1"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-web": {
       "version": "0.19.13",
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.19.13.tgz",
@@ -20083,6 +22810,29 @@
         "redux": "^5.0.0"
       }
     },
+    "node_modules/reflect.getprototypeof": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
+      "integrity": "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.9",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.7",
+        "get-proto": "^1.0.1",
+        "which-builtin-type": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -20107,6 +22857,27 @@
       "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
       "license": "MIT"
     },
+    "node_modules/regexp.prototype.flags": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
+      "integrity": "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-errors": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/regexpu-core": {
       "version": "6.4.0",
       "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-6.4.0.tgz",
@@ -20249,6 +23020,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/resolve-pkg-maps": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
+      "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
+      }
+    },
     "node_modules/resolve-workspace-root": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/resolve-workspace-root/-/resolve-workspace-root-2.0.1.tgz",
@@ -20380,6 +23161,26 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/safe-array-concat": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz",
+      "integrity": "sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "has-symbols": "^1.1.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">=0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -20400,6 +23201,23 @@
       ],
       "license": "MIT"
     },
+    "node_modules/safe-push-apply": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
+      "integrity": "sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/safe-regex-test": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
@@ -20632,6 +23450,37 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/set-function-name": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
+      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-proto": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/set-proto/-/set-proto-1.0.0.tgz",
+      "integrity": "sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/setimmediate": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
@@ -20704,6 +23553,82 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/side-channel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/signal-exit": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
@@ -20856,6 +23781,13 @@
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
+    "node_modules/stable-hash": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/stable-hash/-/stable-hash-0.0.5.tgz",
+      "integrity": "sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/stack-generator": {
       "version": "2.0.10",
       "resolved": "https://registry.npmjs.org/stack-generator/-/stack-generator-2.0.10.tgz",
@@ -20956,6 +23888,20 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/stop-iteration-iterator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
+      "integrity": "sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "internal-slot": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/stream-buffers": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/stream-buffers/-/stream-buffers-2.2.0.tgz",
@@ -21017,6 +23963,104 @@
         "node": ">=8"
       }
     },
+    "node_modules/string.prototype.matchall": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz",
+      "integrity": "sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.6",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.6",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "regexp.prototype.flags": "^1.5.3",
+        "set-function-name": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.repeat": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/string.prototype.repeat/-/string.prototype.repeat-1.0.0.tgz",
+      "integrity": "sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.5"
+      }
+    },
+    "node_modules/string.prototype.trim": {
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz",
+      "integrity": "sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-data-property": "^1.1.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-object-atoms": "^1.0.0",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimend": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz",
+      "integrity": "sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimstart": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
+      "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -21623,6 +24667,22 @@
         "node": ">=8"
       }
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
+    "node_modules/text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/thenify": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
@@ -21656,6 +24716,36 @@
       "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
       "license": "MIT"
     },
+    "node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -21722,12 +24812,61 @@
         "node": ">=12"
       }
     },
+    "node_modules/ts-api-utils": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.4.0.tgz",
+      "integrity": "sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.12"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4"
+      }
+    },
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
       "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
       "license": "Apache-2.0"
     },
+    "node_modules/tsconfig-paths": {
+      "version": "3.15.0",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
+      "integrity": "sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/json5": "^0.0.29",
+        "json5": "^1.0.2",
+        "minimist": "^1.2.6",
+        "strip-bom": "^3.0.0"
+      }
+    },
+    "node_modules/tsconfig-paths/node_modules/json5": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minimist": "^1.2.0"
+      },
+      "bin": {
+        "json5": "lib/cli.js"
+      }
+    },
+    "node_modules/tsconfig-paths/node_modules/strip-bom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+      "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
@@ -21836,6 +24975,19 @@
         "win32"
       ]
     },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/type-detect": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
@@ -21857,6 +25009,84 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/typed-array-buffer": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
+      "integrity": "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/typed-array-byte-length": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz",
+      "integrity": "sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-byte-offset": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz",
+      "integrity": "sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.15",
+        "reflect.getprototypeof": "^1.0.9"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-length": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.7.tgz",
+      "integrity": "sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "is-typed-array": "^1.1.13",
+        "possible-typed-array-names": "^1.0.0",
+        "reflect.getprototypeof": "^1.0.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/typescript": {
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
@@ -21897,6 +25127,25 @@
         "node": "*"
       }
     },
+    "node_modules/unbox-primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
+      "integrity": "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "which-boxed-primitive": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/undici": {
       "version": "6.23.0",
       "resolved": "https://registry.npmjs.org/undici/-/undici-6.23.0.tgz",
@@ -22006,6 +25255,41 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/unrs-resolver": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/unrs-resolver/-/unrs-resolver-1.11.1.tgz",
+      "integrity": "sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "napi-postinstall": "^0.3.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unrs-resolver"
+      },
+      "optionalDependencies": {
+        "@unrs/resolver-binding-android-arm-eabi": "1.11.1",
+        "@unrs/resolver-binding-android-arm64": "1.11.1",
+        "@unrs/resolver-binding-darwin-arm64": "1.11.1",
+        "@unrs/resolver-binding-darwin-x64": "1.11.1",
+        "@unrs/resolver-binding-freebsd-x64": "1.11.1",
+        "@unrs/resolver-binding-linux-arm-gnueabihf": "1.11.1",
+        "@unrs/resolver-binding-linux-arm-musleabihf": "1.11.1",
+        "@unrs/resolver-binding-linux-arm64-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-arm64-musl": "1.11.1",
+        "@unrs/resolver-binding-linux-ppc64-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-riscv64-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-riscv64-musl": "1.11.1",
+        "@unrs/resolver-binding-linux-s390x-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-x64-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-x64-musl": "1.11.1",
+        "@unrs/resolver-binding-wasm32-wasi": "1.11.1",
+        "@unrs/resolver-binding-win32-arm64-msvc": "1.11.1",
+        "@unrs/resolver-binding-win32-ia32-msvc": "1.11.1",
+        "@unrs/resolver-binding-win32-x64-msvc": "1.11.1"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
@@ -22146,6 +25430,15 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/uuid": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
@@ -22520,6 +25813,73 @@
         "node": ">= 8"
       }
     },
+    "node_modules/which-boxed-primitive": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz",
+      "integrity": "sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-bigint": "^1.1.0",
+        "is-boolean-object": "^1.2.1",
+        "is-number-object": "^1.1.1",
+        "is-string": "^1.1.1",
+        "is-symbol": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-builtin-type": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.2.1.tgz",
+      "integrity": "sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "function.prototype.name": "^1.1.6",
+        "has-tostringtag": "^1.0.2",
+        "is-async-function": "^2.0.0",
+        "is-date-object": "^1.1.0",
+        "is-finalizationregistry": "^1.1.0",
+        "is-generator-function": "^1.0.10",
+        "is-regex": "^1.2.1",
+        "is-weakref": "^1.0.2",
+        "isarray": "^2.0.5",
+        "which-boxed-primitive": "^1.1.0",
+        "which-collection": "^1.0.2",
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-collection": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
+      "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-map": "^2.0.3",
+        "is-set": "^2.0.3",
+        "is-weakmap": "^2.0.2",
+        "is-weakset": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/which-typed-array": {
       "version": "1.1.20",
       "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.20.tgz",
@@ -22547,6 +25907,16 @@
       "integrity": "sha512-SSil+ecw6B4/Dm7Pf2sAshKQ5hWFvfyGlfPbEd6A14dOH6VDjrmbY86u6nZvy9omGwwIPFR8V41+of1EezgoUw==",
       "license": "MIT"
     },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/wrap-ansi": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
diff --git a/packages/shared/src/types/index.ts b/packages/shared/src/types/index.ts
index bc73c7b..a02a8a3 100755
--- a/packages/shared/src/types/index.ts
+++ b/packages/shared/src/types/index.ts
@@ -12,6 +12,10 @@ export interface Profile {
     public_key_jwk?: Record<string, unknown> | null;
     /** When true, packs marked as is_explicit will be hidden */
     hide_nsfw?: boolean;
+    /** Whether onboarding flow has been completed */
+    onboarding_completed?: boolean;
+    /** Version of onboarding flow completed. 0 = never, 1+ = that version */
+    onboarding_version?: number;
 }
 
 // Couple pairing
@@ -45,6 +49,10 @@ export interface Question {
     required_props?: string[] | null;
     /** References the primary question that this is an inverse of (e.g., give vs receive). NULL means this is a primary/standalone question. */
     inverse_of?: string | null;
+    /** Type of question interaction (default: 'swipe') */
+    question_type?: QuestionType;
+    /** Configuration options for specific question types */
+    config?: QuestionConfig | null;
     created_at: string;
     deleted_at?: string | null;
 }
@@ -52,8 +60,23 @@ export interface Question {
 // User's answer type
 export type AnswerType = 'yes' | 'no' | 'maybe';
 
+// Question type (default is 'swipe' for backwards compatibility)
+export type QuestionType = 'swipe' | 'text_answer' | 'audio' | 'photo' | 'who_likely';
+
+// Question configuration options
+export interface QuestionConfig {
+    max_duration_seconds?: number;  // For audio questions (default: 60)
+}
+
+// Response data for non-swipe question types
+export type ResponseData =
+    | { type: 'text_answer'; text: string }
+    | { type: 'audio'; media_path: string; duration_seconds: number }
+    | { type: 'photo'; media_path: string }
+    | { type: 'who_likely'; chosen_user_id: string };
+
 // Match type when both partners agree
-export type MatchType = 'yes_yes' | 'yes_maybe' | 'maybe_maybe';
+export type MatchType = 'yes_yes' | 'yes_maybe' | 'maybe_maybe' | 'both_answered';
 
 // User response to a question
 export interface Response {
@@ -62,6 +85,8 @@ export interface Response {
     question_id: string;
     couple_id: string;
     answer: AnswerType;
+    /** Additional response data for non-swipe question types */
+    response_data?: ResponseData | null;
     created_at: string;
 }
 
@@ -72,6 +97,8 @@ export interface Match {
     question_id: string;
     match_type: MatchType;
     is_new: boolean;
+    /** Summary of both partners' response data (keyed by user_id) for non-swipe questions */
+    response_summary?: Record<string, ResponseData> | null;
     created_at: string;
 }
 
diff --git a/packages/shared/src/types/supabase.ts b/packages/shared/src/types/supabase.ts
index 3aed108..4e3adc1 100755
--- a/packages/shared/src/types/supabase.ts
+++ b/packages/shared/src/types/supabase.ts
@@ -609,6 +609,7 @@ export type Database = {
           is_new: boolean | null
           match_type: Database["public"]["Enums"]["match_type"]
           question_id: string
+          response_summary: Json | null
         }
         Insert: {
           couple_id: string
@@ -617,6 +618,7 @@ export type Database = {
           is_new?: boolean | null
           match_type: Database["public"]["Enums"]["match_type"]
           question_id: string
+          response_summary?: Json | null
         }
         Update: {
           couple_id?: string
@@ -625,6 +627,7 @@ export type Database = {
           is_new?: boolean | null
           match_type?: Database["public"]["Enums"]["match_type"]
           question_id?: string
+          response_summary?: Json | null
         }
         Relationships: [
           {
@@ -797,6 +800,53 @@ export type Database = {
           },
         ]
       }
+      notification_preferences: {
+        Row: {
+          user_id: string
+          matches_enabled: boolean | null
+          messages_enabled: boolean | null
+          partner_activity_enabled: boolean | null
+          nudges_enabled: boolean | null
+          pack_changes_enabled: boolean | null
+          new_packs_enabled: boolean | null
+          streak_milestones_enabled: boolean | null
+          created_at: string | null
+          updated_at: string | null
+        }
+        Insert: {
+          user_id: string
+          matches_enabled?: boolean | null
+          messages_enabled?: boolean | null
+          partner_activity_enabled?: boolean | null
+          nudges_enabled?: boolean | null
+          pack_changes_enabled?: boolean | null
+          new_packs_enabled?: boolean | null
+          streak_milestones_enabled?: boolean | null
+          created_at?: string | null
+          updated_at?: string | null
+        }
+        Update: {
+          user_id?: string
+          matches_enabled?: boolean | null
+          messages_enabled?: boolean | null
+          partner_activity_enabled?: boolean | null
+          nudges_enabled?: boolean | null
+          pack_changes_enabled?: boolean | null
+          new_packs_enabled?: boolean | null
+          streak_milestones_enabled?: boolean | null
+          created_at?: string | null
+          updated_at?: string | null
+        }
+        Relationships: [
+          {
+            foreignKeyName: "notification_preferences_user_id_fkey"
+            columns: ["user_id"]
+            isOneToOne: true
+            referencedRelation: "profiles"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
       pack_topics: {
         Row: {
           pack_id: string
@@ -836,6 +886,7 @@ export type Database = {
           gender: string | null
           id: string
           is_premium: boolean | null
+          last_nudge_sent_at: string | null
           max_intensity: number | null
           name: string | null
           onboarding_completed: boolean | null
@@ -853,6 +904,7 @@ export type Database = {
           gender?: string | null
           id: string
           is_premium?: boolean | null
+          last_nudge_sent_at?: string | null
           max_intensity?: number | null
           name?: string | null
           onboarding_completed?: boolean | null
@@ -870,6 +922,7 @@ export type Database = {
           gender?: string | null
           id?: string
           is_premium?: boolean | null
+          last_nudge_sent_at?: string | null
           max_intensity?: number | null
           name?: string | null
           onboarding_completed?: boolean | null
@@ -948,31 +1001,37 @@ export type Database = {
       questions: {
         Row: {
           allowed_couple_genders: string[] | null
+          config: Json | null
           created_at: string | null
           id: string
           intensity: number | null
           pack_id: string
           partner_text: string | null
+          question_type: Database["public"]["Enums"]["question_type"]
           target_user_genders: string[] | null
           text: string
         }
         Insert: {
           allowed_couple_genders?: string[] | null
+          config?: Json | null
           created_at?: string | null
           id?: string
           intensity?: number | null
           pack_id: string
           partner_text?: string | null
+          question_type?: Database["public"]["Enums"]["question_type"]
           target_user_genders?: string[] | null
           text: string
         }
         Update: {
           allowed_couple_genders?: string[] | null
+          config?: Json | null
           created_at?: string | null
           id?: string
           intensity?: number | null
           pack_id?: string
           partner_text?: string | null
+          question_type?: Database["public"]["Enums"]["question_type"]
           target_user_genders?: string[] | null
           text?: string
         }
@@ -1032,6 +1091,7 @@ export type Database = {
           created_at: string | null
           id: string
           question_id: string
+          response_data: Json | null
           user_id: string
         }
         Insert: {
@@ -1040,6 +1100,7 @@ export type Database = {
           created_at?: string | null
           id?: string
           question_id: string
+          response_data?: Json | null
           user_id: string
         }
         Update: {
@@ -1048,6 +1109,7 @@ export type Database = {
           created_at?: string | null
           id?: string
           question_id?: string
+          response_data?: Json | null
           user_id?: string
         }
         Relationships: [
@@ -1347,12 +1409,14 @@ export type Database = {
         Args: { target_pack_id?: string }
         Returns: {
           allowed_couple_genders: string[]
+          config: Json
           id: string
           intensity: number
           is_two_part: boolean
           pack_id: string
           partner_answered: boolean
           partner_text: string
+          question_type: Database["public"]["Enums"]["question_type"]
           target_user_genders: string[]
           text: string
         }[]
@@ -1424,7 +1488,8 @@ export type Database = {
         | "resolved"
         | "closed"
       feedback_type: "bug" | "feature_request" | "general" | "question"
-      match_type: "yes_yes" | "yes_maybe" | "maybe_maybe"
+      match_type: "yes_yes" | "yes_maybe" | "maybe_maybe" | "both_answered"
+      question_type: "swipe" | "text_answer" | "audio" | "photo" | "who_likely"
       report_reason: "harassment" | "spam" | "inappropriate_content" | "other"
       subscription_status:
         | "active"
@@ -1572,7 +1637,8 @@ export const Constants = {
       ],
       feedback_status: ["new", "reviewed", "in_progress", "resolved", "closed"],
       feedback_type: ["bug", "feature_request", "general", "question"],
-      match_type: ["yes_yes", "yes_maybe", "maybe_maybe"],
+      match_type: ["yes_yes", "yes_maybe", "maybe_maybe", "both_answered"],
+      question_type: ["swipe", "text_answer", "audio", "photo", "who_likely"],
       report_reason: ["harassment", "spam", "inappropriate_content", "other"],
       subscription_status: [
         "active",