added

keystone-app/App.tsx

@@ -13,7 +13,7 @@ export default function App() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#fff',
+    backgroundColor: '#F6EAE1',
     alignItems: 'center',
     justifyContent: 'center',
   },

keystone-app/app.json

@@ -23,7 +23,8 @@
         }
       ],
       "expo-router",
-      "expo-font"
+      "expo-font",
+      "expo-video"
     ],
     "extra": {
       "eas": {
@@ -39,4 +40,3 @@
     }
   }
 }
-

keystone-app/app/(auth)/_layout.tsx

@@ -0,0 +1,12 @@
+/**
+ * KeyStone – Auth Layout
+ * Wraps all auth screens with a shared gradient background.
+ */
+
+import { Stack } from 'expo-router';
+
+export default function AuthLayout() {
+  return (
+    <Stack screenOptions={{ headerShown: false }} />
+  );
+}

keystone-app/app/(auth)/forgot-password.tsx

@@ -0,0 +1,94 @@
+/**
+ * KeyStone – Forgot Password Screen
+ */
+
+import {
+  View, Text, TextInput, TouchableOpacity, StyleSheet,
+  KeyboardAvoidingView, Platform, ScrollView, ActivityIndicator,
+} from 'react-native';
+import { useState } from 'react';
+import { Link } from 'expo-router';
+import { LinearGradient } from 'expo-linear-gradient';
+import { useAuthStore } from '../../store/authStore';
+
+export default function ForgotPasswordScreen() {
+  const [email, setEmail] = useState('');
+  const [error, setError] = useState('');
+  const [sent, setSent] = useState(false);
+  const { resetPassword, isLoading } = useAuthStore();
+
+  const handleReset = async () => {
+    setError('');
+    if (!email) { setError('Please enter your email address.'); return; }
+    try {
+      await resetPassword(email);
+      setSent(true);
+    } catch (err: any) {
+      setError(err.message || 'Failed to send reset email.');
+    }
+  };
+
+  return (
+    <LinearGradient colors={['#0f0f23', '#1a0a2e', '#16213e']} style={styles.gradient}>
+      <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={styles.flex}>
+        <ScrollView contentContainerStyle={styles.scroll}>
+          <View style={styles.container}>
+            <View style={styles.card}>
+              <Text style={styles.cardTitle}>{sent ? '📨 Email sent!' : '🔑 Reset password'}</Text>
+              <Text style={styles.cardSubtitle}>
+                {sent
+                  ? `We sent a password reset link to ${email}.`
+                  : "Enter your email and we'll send you a reset link."}
+              </Text>
+
+              {!sent && (
+                <>
+                  {error ? <View style={styles.errorBox}><Text style={styles.errorText}>{error}</Text></View> : null}
+                  <View style={styles.inputGroup}>
+                    <Text style={styles.label}>Email</Text>
+                    <TextInput
+                      style={styles.input}
+                      placeholder="you@example.com"
+                      placeholderTextColor="#4a4a6a"
+                      value={email}
+                      onChangeText={setEmail}
+                      autoCapitalize="none"
+                      keyboardType="email-address"
+                    />
+                  </View>
+                  <TouchableOpacity style={[styles.btn, isLoading && styles.btnDisabled]} onPress={handleReset} disabled={isLoading} activeOpacity={0.85}>
+                    <LinearGradient colors={['#7c3aed', '#4f46e5']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.btnGradient}>
+                      {isLoading ? <ActivityIndicator color="#fff" /> : <Text style={styles.btnText}>Send Reset Link</Text>}
+                    </LinearGradient>
+                  </TouchableOpacity>
+                </>
+              )}
+
+              <Link href="/(auth)/login" style={styles.backLink}>← Back to Sign In</Link>
+            </View>
+          </View>
+        </ScrollView>
+      </KeyboardAvoidingView>
+    </LinearGradient>
+  );
+}
+
+const styles = StyleSheet.create({
+  gradient: { flex: 1 },
+  flex: { flex: 1 },
+  scroll: { flexGrow: 1, justifyContent: 'center' },
+  container: { flex: 1, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 20 },
+  card: { width: '100%', maxWidth: 420, backgroundColor: 'rgba(255,255,255,0.04)', borderWidth: 1, borderColor: 'rgba(255,255,255,0.08)', borderRadius: 24, padding: 28 },
+  cardTitle: { fontSize: 22, fontWeight: '700', color: '#fff', marginBottom: 8 },
+  cardSubtitle: { fontSize: 14, color: '#8888aa', marginBottom: 24, lineHeight: 20 },
+  errorBox: { backgroundColor: 'rgba(239,68,68,0.15)', borderWidth: 1, borderColor: 'rgba(239,68,68,0.3)', borderRadius: 10, padding: 12, marginBottom: 16 },
+  errorText: { color: '#fca5a5', fontSize: 13 },
+  inputGroup: { marginBottom: 16 },
+  label: { fontSize: 13, fontWeight: '600', color: '#c4c4d4', marginBottom: 8 },
+  input: { backgroundColor: 'rgba(255,255,255,0.06)', borderWidth: 1, borderColor: 'rgba(255,255,255,0.1)', borderRadius: 12, paddingHorizontal: 16, paddingVertical: 13, color: '#fff', fontSize: 15 },
+  btn: { borderRadius: 14, overflow: 'hidden', marginBottom: 20 },
+  btnDisabled: { opacity: 0.6 },
+  btnGradient: { paddingVertical: 15, alignItems: 'center', borderRadius: 14 },
+  btnText: { color: '#fff', fontWeight: '700', fontSize: 16 },
+  backLink: { color: '#7c3aed', fontSize: 14, textAlign: 'center', marginTop: 8 },
+});

keystone-app/app/(auth)/login.tsx

@@ -0,0 +1,207 @@
+/**
+ * KeyStone – Login Screen
+ * Works on Android, iOS, and Web (React Native Web).
+ */
+
+import {
+  View, Text, TextInput, TouchableOpacity, StyleSheet,
+  KeyboardAvoidingView, Platform, ScrollView, ActivityIndicator,
+  Alert, Dimensions,
+} from 'react-native';
+import { useState } from 'react';
+import { Link, useRouter } from 'expo-router';
+import { LinearGradient } from 'expo-linear-gradient';
+import { useAuthStore } from '../../store/authStore';
+
+const { width } = Dimensions.get('window');
+const isWeb = Platform.OS === 'web';
+
+export default function LoginScreen() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const { signIn, isLoading } = useAuthStore();
+  const router = useRouter();
+
+  const handleLogin = async () => {
+    setError('');
+    if (!email || !password) {
+      setError('Please fill in all fields.');
+      return;
+    }
+    try {
+      await signIn(email, password);
+      router.replace('/(tabs)/gallery');
+    } catch (err: any) {
+      setError(err.message || 'Login failed. Please try again.');
+    }
+  };
+
+  return (
+    <LinearGradient colors={['#0f0f23', '#1a0a2e', '#16213e']} style={styles.gradient}>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        style={styles.flex}
+      >
+        <ScrollView contentContainerStyle={styles.scroll} keyboardShouldPersistTaps="handled">
+          <View style={styles.container}>
+
+            {/* Logo / Brand */}
+            <View style={styles.logoArea}>
+              <View style={styles.logoIcon}>
+                <Text style={styles.logoEmoji}>🔷</Text>
+              </View>
+              <Text style={styles.brandName}>KeyStone</Text>
+              <Text style={styles.brandTagline}>Your private photo cloud</Text>
+            </View>
+
+            {/* Card */}
+            <View style={styles.card}>
+              <Text style={styles.cardTitle}>Welcome back</Text>
+              <Text style={styles.cardSubtitle}>Sign in to your account</Text>
+
+              {error ? (
+                <View style={styles.errorBox}>
+                  <Text style={styles.errorText}>{error}</Text>
+                </View>
+              ) : null}
+
+              <View style={styles.inputGroup}>
+                <Text style={styles.label}>Email</Text>
+                <TextInput
+                  style={styles.input}
+                  placeholder="you@example.com"
+                  placeholderTextColor="#4a4a6a"
+                  value={email}
+                  onChangeText={setEmail}
+                  autoCapitalize="none"
+                  keyboardType="email-address"
+                  autoComplete="email"
+                />
+              </View>
+
+              <View style={styles.inputGroup}>
+                <View style={styles.labelRow}>
+                  <Text style={styles.label}>Password</Text>
+                  <Link href="/(auth)/forgot-password" style={styles.forgotLink}>
+                    Forgot password?
+                  </Link>
+                </View>
+                <TextInput
+                  style={styles.input}
+                  placeholder="••••••••"
+                  placeholderTextColor="#4a4a6a"
+                  value={password}
+                  onChangeText={setPassword}
+                  secureTextEntry
+                  autoComplete="current-password"
+                />
+              </View>
+
+              <TouchableOpacity
+                style={[styles.btn, isLoading && styles.btnDisabled]}
+                onPress={handleLogin}
+                disabled={isLoading}
+                activeOpacity={0.85}
+              >
+                <LinearGradient
+                  colors={['#7c3aed', '#4f46e5']}
+                  start={{ x: 0, y: 0 }}
+                  end={{ x: 1, y: 0 }}
+                  style={styles.btnGradient}
+                >
+                  {isLoading ? (
+                    <ActivityIndicator color="#fff" />
+                  ) : (
+                    <Text style={styles.btnText}>Sign In</Text>
+                  )}
+                </LinearGradient>
+              </TouchableOpacity>
+
+              <View style={styles.footerRow}>
+                <Text style={styles.footerText}>Don't have an account? </Text>
+                <Link href="/(auth)/register" style={styles.footerLink}>
+                  Sign up
+                </Link>
+              </View>
+            </View>
+
+          </View>
+        </ScrollView>
+      </KeyboardAvoidingView>
+    </LinearGradient>
+  );
+}
+
+const styles = StyleSheet.create({
+  gradient: { flex: 1 },
+  flex: { flex: 1 },
+  scroll: { flexGrow: 1, justifyContent: 'center' },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 20,
+    paddingVertical: 40,
+  },
+  logoArea: { alignItems: 'center', marginBottom: 40 },
+  logoIcon: {
+    width: 72, height: 72,
+    borderRadius: 20,
+    backgroundColor: 'rgba(124,58,237,0.2)',
+    borderWidth: 1,
+    borderColor: 'rgba(124,58,237,0.5)',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 12,
+  },
+  logoEmoji: { fontSize: 36 },
+  brandName: { fontSize: 32, fontWeight: '800', color: '#fff', letterSpacing: -0.5 },
+  brandTagline: { fontSize: 14, color: '#8888aa', marginTop: 4 },
+
+  card: {
+    width: '100%',
+    maxWidth: 420,
+    backgroundColor: 'rgba(255,255,255,0.04)',
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.08)',
+    borderRadius: 24,
+    padding: 28,
+  },
+  cardTitle: { fontSize: 24, fontWeight: '700', color: '#fff', marginBottom: 4 },
+  cardSubtitle: { fontSize: 14, color: '#8888aa', marginBottom: 24 },
+
+  errorBox: {
+    backgroundColor: 'rgba(239,68,68,0.15)',
+    borderWidth: 1,
+    borderColor: 'rgba(239,68,68,0.3)',
+    borderRadius: 10,
+    padding: 12,
+    marginBottom: 16,
+  },
+  errorText: { color: '#fca5a5', fontSize: 13 },
+
+  inputGroup: { marginBottom: 16 },
+  labelRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 },
+  label: { fontSize: 13, fontWeight: '600', color: '#c4c4d4', marginBottom: 8 },
+  forgotLink: { fontSize: 12, color: '#7c3aed' },
+  input: {
+    backgroundColor: 'rgba(255,255,255,0.06)',
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.1)',
+    borderRadius: 12,
+    paddingHorizontal: 16,
+    paddingVertical: 13,
+    color: '#fff',
+    fontSize: 15,
+  },
+
+  btn: { borderRadius: 14, overflow: 'hidden', marginTop: 8 },
+  btnDisabled: { opacity: 0.6 },
+  btnGradient: { paddingVertical: 15, alignItems: 'center' },
+  btnText: { color: '#fff', fontWeight: '700', fontSize: 16 },
+
+  footerRow: { flexDirection: 'row', justifyContent: 'center', marginTop: 20 },
+  footerText: { color: '#8888aa', fontSize: 13 },
+  footerLink: { color: '#7c3aed', fontWeight: '600', fontSize: 13 },
+});

keystone-app/app/(auth)/register.tsx

@@ -0,0 +1,176 @@
+/**
+ * KeyStone – Register Screen
+ */
+
+import {
+  View, Text, TextInput, TouchableOpacity, StyleSheet,
+  KeyboardAvoidingView, Platform, ScrollView, ActivityIndicator,
+} from 'react-native';
+import { useState } from 'react';
+import { Link, useRouter } from 'expo-router';
+import { LinearGradient } from 'expo-linear-gradient';
+import { useAuthStore } from '../../store/authStore';
+
+export default function RegisterScreen() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirm, setConfirm] = useState('');
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState(false);
+  const { signUp, isLoading } = useAuthStore();
+  const router = useRouter();
+
+  const handleRegister = async () => {
+    setError('');
+    if (!email || !password || !confirm) {
+      setError('Please fill in all fields.');
+      return;
+    }
+    if (password.length < 8) {
+      setError('Password must be at least 8 characters.');
+      return;
+    }
+    if (password !== confirm) {
+      setError('Passwords do not match.');
+      return;
+    }
+    try {
+      await signUp(email, password);
+      setSuccess(true);
+    } catch (err: any) {
+      setError(err.message || 'Registration failed. Please try again.');
+    }
+  };
+
+  if (success) {
+    return (
+      <LinearGradient colors={['#0f0f23', '#1a0a2e', '#16213e']} style={styles.gradient}>
+        <View style={styles.successContainer}>
+          <Text style={styles.successEmoji}>📬</Text>
+          <Text style={styles.successTitle}>Check your email!</Text>
+          <Text style={styles.successText}>
+            We've sent a confirmation link to {email}. Click it to activate your account.
+          </Text>
+          <TouchableOpacity onPress={() => router.replace('/(auth)/login')}>
+            <LinearGradient colors={['#7c3aed', '#4f46e5']} style={styles.btnGradient}>
+              <Text style={styles.btnText}>Back to Sign In</Text>
+            </LinearGradient>
+          </TouchableOpacity>
+        </View>
+      </LinearGradient>
+    );
+  }
+
+  return (
+    <LinearGradient colors={['#0f0f23', '#1a0a2e', '#16213e']} style={styles.gradient}>
+      <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={styles.flex}>
+        <ScrollView contentContainerStyle={styles.scroll} keyboardShouldPersistTaps="handled">
+          <View style={styles.container}>
+            <View style={styles.logoArea}>
+              <View style={styles.logoIcon}>
+                <Text style={styles.logoEmoji}>🔷</Text>
+              </View>
+              <Text style={styles.brandName}>KeyStone</Text>
+              <Text style={styles.brandTagline}>Create your private cloud</Text>
+            </View>
+
+            <View style={styles.card}>
+              <Text style={styles.cardTitle}>Create account</Text>
+              <Text style={styles.cardSubtitle}>Start backing up your photos today</Text>
+
+              {error ? (
+                <View style={styles.errorBox}>
+                  <Text style={styles.errorText}>{error}</Text>
+                </View>
+              ) : null}
+
+              <View style={styles.inputGroup}>
+                <Text style={styles.label}>Email</Text>
+                <TextInput
+                  style={styles.input}
+                  placeholder="you@example.com"
+                  placeholderTextColor="#4a4a6a"
+                  value={email}
+                  onChangeText={setEmail}
+                  autoCapitalize="none"
+                  keyboardType="email-address"
+                />
+              </View>
+
+              <View style={styles.inputGroup}>
+                <Text style={styles.label}>Password</Text>
+                <TextInput
+                  style={styles.input}
+                  placeholder="Min. 8 characters"
+                  placeholderTextColor="#4a4a6a"
+                  value={password}
+                  onChangeText={setPassword}
+                  secureTextEntry
+                />
+              </View>
+
+              <View style={styles.inputGroup}>
+                <Text style={styles.label}>Confirm Password</Text>
+                <TextInput
+                  style={styles.input}
+                  placeholder="Repeat password"
+                  placeholderTextColor="#4a4a6a"
+                  value={confirm}
+                  onChangeText={setConfirm}
+                  secureTextEntry
+                />
+              </View>
+
+              <TouchableOpacity
+                style={[styles.btn, isLoading && styles.btnDisabled]}
+                onPress={handleRegister}
+                disabled={isLoading}
+                activeOpacity={0.85}
+              >
+                <LinearGradient colors={['#7c3aed', '#4f46e5']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.btnGradient}>
+                  {isLoading ? <ActivityIndicator color="#fff" /> : <Text style={styles.btnText}>Create Account</Text>}
+                </LinearGradient>
+              </TouchableOpacity>
+
+              <View style={styles.footerRow}>
+                <Text style={styles.footerText}>Already have an account? </Text>
+                <Link href="/(auth)/login" style={styles.footerLink}>Sign in</Link>
+              </View>
+            </View>
+          </View>
+        </ScrollView>
+      </KeyboardAvoidingView>
+    </LinearGradient>
+  );
+}
+
+const styles = StyleSheet.create({
+  gradient: { flex: 1 },
+  flex: { flex: 1 },
+  scroll: { flexGrow: 1, justifyContent: 'center' },
+  container: { flex: 1, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 20, paddingVertical: 40 },
+  logoArea: { alignItems: 'center', marginBottom: 32 },
+  logoIcon: { width: 64, height: 64, borderRadius: 18, backgroundColor: 'rgba(124,58,237,0.2)', borderWidth: 1, borderColor: 'rgba(124,58,237,0.5)', alignItems: 'center', justifyContent: 'center', marginBottom: 10 },
+  logoEmoji: { fontSize: 30 },
+  brandName: { fontSize: 28, fontWeight: '800', color: '#fff' },
+  brandTagline: { fontSize: 13, color: '#8888aa', marginTop: 4 },
+  card: { width: '100%', maxWidth: 420, backgroundColor: 'rgba(255,255,255,0.04)', borderWidth: 1, borderColor: 'rgba(255,255,255,0.08)', borderRadius: 24, padding: 28 },
+  cardTitle: { fontSize: 22, fontWeight: '700', color: '#fff', marginBottom: 4 },
+  cardSubtitle: { fontSize: 13, color: '#8888aa', marginBottom: 20 },
+  errorBox: { backgroundColor: 'rgba(239,68,68,0.15)', borderWidth: 1, borderColor: 'rgba(239,68,68,0.3)', borderRadius: 10, padding: 12, marginBottom: 16 },
+  errorText: { color: '#fca5a5', fontSize: 13 },
+  inputGroup: { marginBottom: 14 },
+  label: { fontSize: 13, fontWeight: '600', color: '#c4c4d4', marginBottom: 8 },
+  input: { backgroundColor: 'rgba(255,255,255,0.06)', borderWidth: 1, borderColor: 'rgba(255,255,255,0.1)', borderRadius: 12, paddingHorizontal: 16, paddingVertical: 13, color: '#fff', fontSize: 15 },
+  btn: { borderRadius: 14, overflow: 'hidden', marginTop: 8 },
+  btnDisabled: { opacity: 0.6 },
+  btnGradient: { paddingVertical: 15, alignItems: 'center', borderRadius: 14 },
+  btnText: { color: '#fff', fontWeight: '700', fontSize: 16 },
+  footerRow: { flexDirection: 'row', justifyContent: 'center', marginTop: 20 },
+  footerText: { color: '#8888aa', fontSize: 13 },
+  footerLink: { color: '#7c3aed', fontWeight: '600', fontSize: 13 },
+  successContainer: { flex: 1, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 32 },
+  successEmoji: { fontSize: 64, marginBottom: 20 },
+  successTitle: { fontSize: 26, fontWeight: '800', color: '#fff', marginBottom: 12 },
+  successText: { fontSize: 15, color: '#8888aa', textAlign: 'center', marginBottom: 32, lineHeight: 22 },
+});

keystone-app/app/(tabs)/index.tsx

@@ -17,6 +17,7 @@ import {
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 import * as MediaLibrary from 'expo-media-library';
 import { Image } from 'expo-image';
+import MediaViewer from '../../components/MediaViewer';
 import * as FileSystem from 'expo-file-system/legacy';
 import { Video, ResizeMode } from 'expo-av';
 import * as Sharing from 'expo-sharing';
@@ -97,10 +98,12 @@ const GalleryRow = React.memo(({
             activeOpacity={0.85}
           >
             <Image
-              source={asset.isCloudOnly && isVideo && asset.cloudThumbUri ? asset.cloudThumbUri : asset.uri}
+              source={asset.isCloudOnly && asset.cloudThumbUri ? asset.cloudThumbUri : asset.uri}
               style={styles.image}
               contentFit="cover"
               cachePolicy="memory-disk"
+              transition={200}
+              backgroundColor="transparent"
             />
             {isVideo && (
               <View style={styles.videoOverlay}>
@@ -470,8 +473,14 @@ export default function PhotosScreen() {
   const performAdvancedDelete = async (items: UnifiedAsset[], target: 'device' | 'cloud' | 'both') => {
     try {
       const token = await getToken();
-      // 1. Delete from Device (Move to local bin)
+      // 1. Delete from Device (Move to local bin & delete physical file)
       if (target === 'device' || target === 'both') {
+        const localAssetsToDelete = items.filter(i => !i.isCloudOnly && i.originalId).map(i => i.originalId!);
+        if (localAssetsToDelete.length > 0) {
+          // Permanently delete from device's camera roll
+          await MediaLibrary.deleteAssetsAsync(localAssetsToDelete as any);
+        }
+        
         const trashed = await getTrashedAssets();
         const newTrashed = [...trashed, ...items];
         await AsyncStorage.setItem(TRASHED_ASSETS_KEY, JSON.stringify(newTrashed));
@@ -801,36 +810,16 @@ export default function PhotosScreen() {
             renderImage={(props) => {
               const uri = props.source.uri;
               const asset = allAssets.find(a => a.uri === uri);
-              
-              if (asset?.mediaType === 'video') {
-                return (
-                  <View 
-                    style={{ width, height, paddingBottom: insets.bottom + 80, justifyContent: 'center' }}
-                    onStartShouldSetResponder={() => true}
-                    onResponderTerminationRequest={() => false}
-                  >
-                    <Video
-                      source={{ uri: asset.uri }}
-                      style={{ width: '100%', height: '100%' }}
-                      resizeMode={ResizeMode.CONTAIN}
-                      useNativeControls
-                      shouldPlay={allAssets[viewerIndex ?? 0]?.id === asset.id && isPlaying}
-                      isLooping={false}
-                      onPlaybackStatusUpdate={(status) => {
-                        if (status.isLoaded && status.didJustFinish) setIsPlaying(false);
-                      }}
-                    />
-                  </View>
-                );
-              }
+              const shouldPlay = allAssets[viewerIndex ?? 0]?.uri === uri && isPlaying;
               
               return (
-                <Image
-                  source={uri}
-                  style={{ width: '100%', height: '100%' }}
-                  contentFit="contain"
-                  cachePolicy="memory-disk"
-                />
+                <View 
+                  style={{ width, height, paddingBottom: insets.bottom + 80, justifyContent: 'center' }}
+                  onStartShouldSetResponder={() => true}
+                  onResponderTerminationRequest={() => false}
+                >
+                  <MediaViewer asset={asset} shouldPlay={shouldPlay} />
+                </View>
               );
             }}
           />
@@ -936,8 +925,8 @@ export default function PhotosScreen() {
 }
 
 const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: '#fff' },
-  center: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 24, backgroundColor: '#fff' },
+  container: { flex: 1, backgroundColor: '#F6EAE1' },
+  center: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 24, backgroundColor: '#F6EAE1' },
   webMessage: { fontSize: 20, fontWeight: '700', marginTop: 16, color: '#202124' },
   webSubMessage: { fontSize: 15, color: '#5f6368', textAlign: 'center', marginTop: 6 },
   permissionTitle: { fontSize: 22, fontWeight: '700', color: '#202124', marginTop: 20, marginBottom: 10, textAlign: 'center' },
@@ -947,7 +936,7 @@ const styles = StyleSheet.create({
 
   header: {
     flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center',
-    paddingHorizontal: 16, paddingVertical: 10, backgroundColor: '#fff',
+    paddingHorizontal: 16, paddingVertical: 10, backgroundColor: '#F6EAE1',
   },
   headerLogo: { fontSize: 22, fontWeight: '700', color: '#202124', letterSpacing: -0.5 },
   selectionCount: { fontSize: 18, fontWeight: '600', color: '#202124' },
@@ -966,7 +955,7 @@ const styles = StyleSheet.create({
   progressBarFill: { height: 3, backgroundColor: '#1a73e8', borderRadius: 2 },
 
   listContent: { paddingHorizontal: SPACING, paddingBottom: 16 },
-  sectionHeader: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingVertical: 14, paddingHorizontal: 4, backgroundColor: '#fff' },
+  sectionHeader: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingVertical: 14, paddingHorizontal: 4, backgroundColor: '#F6EAE1' },
   sectionTitle: { fontSize: 15, fontWeight: '600', color: '#3c4043', flex: 1 },
   dayCheckBtn: { padding: 4 },
 
@@ -1007,7 +996,7 @@ const styles = StyleSheet.create({
   viewerActionLabel: { color: '#fff', fontSize: 13, fontWeight: '500' },
   
   infoModalBg: { flex: 1, justifyContent: 'flex-end', backgroundColor: 'rgba(0,0,0,0.5)' },
-  infoSheet: { backgroundColor: '#fff', borderTopLeftRadius: 16, borderTopRightRadius: 16, padding: 24 },
+  infoSheet: { backgroundColor: '#F6EAE1', borderTopLeftRadius: 16, borderTopRightRadius: 16, padding: 24 },
   infoTitle: { fontSize: 20, fontWeight: '700', color: '#202124', marginBottom: 16 },
   infoRow: { flexDirection: 'row', alignItems: 'center', marginBottom: 16, gap: 12 },
   infoText: { fontSize: 15, color: '#3c4043', flex: 1 },

keystone-app/app/(tabs)/library.tsx

@@ -15,6 +15,7 @@ import {
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 import * as MediaLibrary from 'expo-media-library';
 import { Image } from 'expo-image';
+import MediaViewer from '../../components/MediaViewer';
 import { StatusBar } from 'expo-status-bar';
 import { MaterialIcons } from '@expo/vector-icons';
 import { format } from 'date-fns';
@@ -238,7 +239,7 @@ export default function LibraryScreen() {
 
       {/* Album detail modal */}
       <Modal visible={!!openAlbum} animationType="slide" onRequestClose={() => { setOpenAlbum(null); setAlbumAssets([]); }}>
-        <SafeAreaView style={{ flex: 1, backgroundColor: '#fff' }}>
+        <SafeAreaView style={{ flex: 1, backgroundColor: '#F6EAE1' }}>
           <View style={styles.modalHeader}>
             <TouchableOpacity onPress={() => { setOpenAlbum(null); setAlbumAssets([]); }} style={{ padding: 8 }}>
               <MaterialIcons name="arrow-back" size={24} color="#202124" />
@@ -270,7 +271,7 @@ export default function LibraryScreen() {
                   style={{ flex: 1, margin: 2, aspectRatio: 1, borderRadius: 4, overflow: 'hidden', backgroundColor: '#e0e0e0' }}
                   onPress={() => setViewerAsset(item)}
                 >
-                  <Image source={{ uri: item.uri }} style={StyleSheet.absoluteFill} contentFit="cover" cachePolicy="memory-disk" />
+                  <Image source={{ uri: item.uri }} style={StyleSheet.absoluteFill} contentFit="cover" cachePolicy="memory-disk" transition={200} backgroundColor="transparent" />
                   {item.mediaType === MediaLibrary.MediaType.video && (
                     <View style={{ position: 'absolute', bottom: 4, left: 4 }}>
                       <MaterialIcons name="play-circle-fill" size={18} color="rgba(255,255,255,0.9)" />
@@ -285,7 +286,7 @@ export default function LibraryScreen() {
 
       {/* Bin detail modal */}
       <Modal visible={viewingBin} animationType="slide" onRequestClose={() => setViewingBin(false)}>
-        <SafeAreaView style={{ flex: 1, backgroundColor: '#fff' }}>
+        <SafeAreaView style={{ flex: 1, backgroundColor: '#F6EAE1' }}>
           <View style={styles.modalHeader}>
             <TouchableOpacity onPress={() => setViewingBin(false)} style={{ padding: 8 }}>
               <MaterialIcons name="arrow-back" size={24} color="#202124" />
@@ -303,7 +304,7 @@ export default function LibraryScreen() {
                 style={{ flex: 1, margin: 2, aspectRatio: 1, borderRadius: 4, overflow: 'hidden', backgroundColor: '#e0e0e0' }}
                 onPress={() => { setViewerAsset(item); setIsViewerFromBin(true); }}
               >
-                <Image source={{ uri: item.uri }} style={StyleSheet.absoluteFill} contentFit="cover" cachePolicy="memory-disk" />
+                <Image source={{ uri: item.isCloudOnly && item.cloudThumbUri ? item.cloudThumbUri : item.uri }} style={StyleSheet.absoluteFill} contentFit="cover" cachePolicy="memory-disk" transition={200} backgroundColor="transparent" />
               </TouchableOpacity>
             )}
           />
@@ -319,12 +320,7 @@ export default function LibraryScreen() {
           >
             <MaterialIcons name="close" size={26} color="#fff" />
           </TouchableOpacity>
-          <Image
-            source={{ uri: viewerAsset?.uri }}
-            style={{ flex: 1 }}
-            contentFit="contain"
-            cachePolicy="memory-disk"
-          />
+          <MediaViewer asset={viewerAsset} />
           {viewerAsset && isViewerFromBin && (
             <View style={{ position: 'absolute', bottom: 0, left: 0, right: 0, flexDirection: 'row', justifyContent: 'space-around', backgroundColor: 'rgba(0,0,0,0.8)', paddingVertical: 16, paddingBottom: insets.bottom + 16 }}>
               <TouchableOpacity onPress={() => setShowRestoreMenu(true)} style={{ alignItems: 'center' }}>
@@ -487,7 +483,7 @@ export default function LibraryScreen() {
 }
 
 const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: '#fff' },
+  container: { flex: 1, backgroundColor: '#F6EAE1' },
   center: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 24 },
   title: { fontSize: 22, fontWeight: '700', color: '#202124', marginTop: 16 },
   subtitle: { fontSize: 15, color: '#5f6368', textAlign: 'center', marginTop: 8 },
@@ -519,7 +515,7 @@ const styles = StyleSheet.create({
   modalCount: { fontSize: 13, color: '#5f6368', marginRight: 8 },
 
   actionSheetBg: { flex: 1, justifyContent: 'flex-end', backgroundColor: 'rgba(0,0,0,0.5)' },
-  actionSheet: { backgroundColor: '#fff', borderTopLeftRadius: 16, borderTopRightRadius: 16, padding: 24, paddingBottom: 40 },
+  actionSheet: { backgroundColor: '#F6EAE1', borderTopLeftRadius: 16, borderTopRightRadius: 16, padding: 24, paddingBottom: 40 },
   actionSheetTitle: { fontSize: 20, fontWeight: '700', color: '#202124', marginBottom: 16 },
   actionSheetRow: { flexDirection: 'row', alignItems: 'center', marginBottom: 20, gap: 12 },
   actionSheetText: { fontSize: 15, fontWeight: '600', color: '#202124' },

keystone-app/app/(tabs)/memories.tsx

@@ -12,8 +12,8 @@ import {
   Animated,
 } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import * as MediaLibrary from 'expo-media-library';
 import { Image } from 'expo-image';
+import MediaViewer from '../../components/MediaViewer';
 import { StatusBar } from 'expo-status-bar';
 import { MaterialIcons } from '@expo/vector-icons';
 import { LinearGradient } from 'expo-linear-gradient';
@@ -160,6 +160,8 @@ export default function MemoriesScreen() {
                   style={StyleSheet.absoluteFill}
                   contentFit="cover"
                   cachePolicy="memory-disk"
+                  transition={200}
+                  backgroundColor="transparent"
                 />
                 {/* Gradient overlay */}
                 <LinearGradient colors={['transparent', 'rgba(0,0,0,0.7)']} style={styles.memCardOverlay} />
@@ -197,7 +199,7 @@ export default function MemoriesScreen() {
                       setViewerIndex(group.assets.indexOf(item));
                     }}
                   >
-                    <Image source={{ uri: item.uri }} style={StyleSheet.absoluteFill} contentFit="cover" cachePolicy="memory-disk" />
+                    <Image source={{ uri: item.uri }} style={StyleSheet.absoluteFill} contentFit="cover" cachePolicy="memory-disk" transition={200} backgroundColor="transparent" />
                   </TouchableOpacity>
                 )}
               />
@@ -224,13 +226,10 @@ export default function MemoriesScreen() {
               initialScrollIndex={viewerIndex}
               getItemLayout={(_, i) => ({ length: width, offset: width * i, index: i })}
               keyExtractor={a => a.id}
-              renderItem={({ item }) => (
-                <Image
-                  source={{ uri: item.uri }}
-                  style={{ width, height: '100%' }}
-                  contentFit="contain"
-                  cachePolicy="memory-disk"
-                />
+              renderItem={({ item, index }) => (
+                <View style={{ width, height: '100%', justifyContent: 'center' }}>
+                  <MediaViewer asset={item} shouldPlay={viewerIndex === index} />
+                </View>
               )}
             />
             <View style={styles.viewerInfo}>
@@ -244,7 +243,7 @@ export default function MemoriesScreen() {
 }
 
 const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: '#fff' },
+  container: { flex: 1, backgroundColor: '#F6EAE1' },
   center: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 24 },
   title: { fontSize: 22, fontWeight: '700', color: '#202124', marginTop: 16 },
   subtitle: { fontSize: 15, color: '#5f6368', textAlign: 'center', marginTop: 8 },

keystone-app/app/(tabs)/search.tsx

@@ -13,8 +13,8 @@ import {
   ActivityIndicator,
 } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import * as MediaLibrary from 'expo-media-library';
 import { Image } from 'expo-image';
+import MediaViewer from '../../components/MediaViewer';
 import { StatusBar } from 'expo-status-bar';
 import { MaterialIcons } from '@expo/vector-icons';
 import { format, subDays, subMonths, subYears, startOfDay, endOfDay, startOfMonth, endOfMonth, startOfYear, endOfYear } from 'date-fns';
@@ -260,6 +260,8 @@ export default function SearchScreen() {
                   style={StyleSheet.absoluteFill}
                   contentFit="cover"
                   cachePolicy="memory-disk"
+                  transition={200}
+                  backgroundColor="transparent"
                 />
                 {item.mediaType === MediaLibrary.MediaType.video && (
                   <View style={styles.videoIcon}>
@@ -286,12 +288,7 @@ export default function SearchScreen() {
           >
             <MaterialIcons name="close" size={26} color="#fff" />
           </TouchableOpacity>
-          <Image
-            source={{ uri: viewerAsset?.uri }}
-            style={{ flex: 1 }}
-            contentFit="contain"
-            cachePolicy="memory-disk"
-          />
+          <MediaViewer asset={viewerAsset} />
           {viewerAsset && (
             <View style={{ position: 'absolute', bottom: 40, left: 0, right: 0, alignItems: 'center' }}>
               <Text style={{ color: '#fff', fontSize: 13, backgroundColor: 'rgba(0,0,0,0.5)', paddingHorizontal: 12, paddingVertical: 6, borderRadius: 16 }}>
@@ -306,7 +303,7 @@ export default function SearchScreen() {
 }
 
 const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: '#fff' },
+  container: { flex: 1, backgroundColor: '#F6EAE1' },
   center: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 24 },
   title: { fontSize: 22, fontWeight: '700', color: '#202124', marginTop: 16 },
   subtitle: { fontSize: 15, color: '#5f6368', textAlign: 'center', marginTop: 8 },

keystone-app/app/(tabs)/settings.tsx

@@ -4,7 +4,7 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import { StatusBar } from 'expo-status-bar';
 import { MaterialIcons } from '@expo/vector-icons';
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import { BACKGROUND_SYNC_ENABLED_KEY } from '../utils/syncManager';
+import { BACKGROUND_SYNC_ENABLED_KEY, BACKEND_URL, getToken } from '../utils/syncManager';
 import { useAuth } from '../../components/AuthContext';
 
 export const SYNC_ON_CELLULAR_KEY = '@setting_sync_cellular';
@@ -14,6 +14,7 @@ export default function SettingsScreen() {
   const [syncOnCellular, setSyncOnCellular] = useState(false);
   const [bgSync, setBgSync] = useState(true); // Default to true if not set
   const [isLoading, setIsLoading] = useState(true);
+  const [storageStats, setStorageStats] = useState<{ total: number, used: number, free: number } | null>(null);
 
   useEffect(() => {
     loadSettings();
@@ -34,6 +35,19 @@ export default function SettingsScreen() {
       } else {
         await AsyncStorage.setItem(BACKGROUND_SYNC_ENABLED_KEY, 'true');
       }
+
+      // Fetch storage stats
+      try {
+        const token = await getToken();
+        if (token) {
+          const res = await fetch(`${BACKEND_URL}/storage/stats?token=${token}`);
+          if (res.ok) {
+            setStorageStats(await res.json());
+          }
+        }
+      } catch (e) {
+        console.warn('Could not fetch storage stats', e);
+      }
     } catch (e) {
       console.error('Failed to load settings', e);
     } finally {
@@ -144,6 +158,29 @@ export default function SettingsScreen() {
         </View>
       )}
 
+      {!isLoading && storageStats && (
+        <View style={[styles.settingsList, { marginTop: 24 }]}>
+          <Text style={styles.sectionHeader}>Storage (Cloud Bucket)</Text>
+          <View style={{ padding: 16 }}>
+            <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 8 }}>
+              <Text style={styles.settingLabel}>
+                {(storageStats.used / (1024 * 1024 * 1024)).toFixed(1)} GB used
+              </Text>
+              <Text style={styles.settingDesc}>
+                {(storageStats.free / (1024 * 1024 * 1024)).toFixed(1)} GB free
+              </Text>
+            </View>
+            <View style={{ height: 8, backgroundColor: '#e8f0fe', borderRadius: 4, overflow: 'hidden' }}>
+              <View style={{ 
+                height: '100%', 
+                backgroundColor: '#1a73e8', 
+                width: `${Math.min(100, Math.max(0, (storageStats.used / storageStats.total) * 100))}%` 
+              }} />
+            </View>
+          </View>
+        </View>
+      )}
+
       {!isLoading && (
         <View style={[styles.settingsList, { marginTop: 24 }]}>
           <TouchableOpacity style={styles.settingItem} onPress={handleLogout}>
@@ -164,12 +201,12 @@ export default function SettingsScreen() {
 }
 
 const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: '#f8f9fa' },
+  container: { flex: 1, backgroundColor: '#F6EAE1' },
   center: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 24 },
   title: { fontSize: 22, fontWeight: '700', color: '#202124', marginTop: 16 },
   subtitle: { fontSize: 15, color: '#5f6368', textAlign: 'center', marginTop: 8 },
 
-  header: { paddingHorizontal: 20, paddingTop: 8, paddingBottom: 16, backgroundColor: '#fff', borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: '#e0e0e0' },
+  header: { paddingHorizontal: 20, paddingTop: 8, paddingBottom: 16, backgroundColor: '#F6EAE1', borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: '#e0e0e0' },
   headerTitle: { fontSize: 28, fontWeight: '800', color: '#202124', letterSpacing: -0.5 },
 
   settingsList: { marginTop: 24, marginHorizontal: 16, backgroundColor: '#fff', borderRadius: 16, overflow: 'hidden' },

keystone-app/app/_layout.tsx

@@ -29,7 +29,7 @@ function AppContent() {
 
   if (isAuthenticated === null) {
     return (
-      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f8f9fa' }}>
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F6EAE1' }}>
         <ActivityIndicator size="large" color="#1a73e8" />
       </View>
     );

keystone-app/components/LoginScreen.tsx

@@ -100,12 +100,12 @@ export default function LoginScreen({ onLoginSuccess }: Props) {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#f8f9fa',
+    backgroundColor: '#F6EAE1',
     justifyContent: 'center',
     padding: 24,
   },
   card: {
-    backgroundColor: '#fff',
+    backgroundColor: '#F6EAE1',
     borderRadius: 24,
     padding: 32,
     shadowColor: '#000',

keystone-app/components/MediaViewer.tsx

@@ -0,0 +1,76 @@
+import React, { useEffect } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Image } from 'expo-image';
+import { useVideoPlayer, VideoView } from 'expo-video';
+
+interface MediaViewerProps {
+  asset: any;
+  shouldPlay?: boolean;
+}
+
+export default function MediaViewer({ asset, shouldPlay = true }: MediaViewerProps) {
+  if (!asset) return null;
+
+  const isVideo = 
+    asset.mediaType === 'video' || 
+    asset.filename?.toLowerCase().match(/\.(mp4|mov|avi|webm)$/i);
+
+  if (isVideo) {
+    return <VideoWrapper uri={asset.uri} shouldPlay={shouldPlay} />;
+  }
+
+  // expo-image natively supports GIFs and handles caching perfectly.
+  return (
+    <Image
+      source={{ uri: asset.uri }}
+      placeholder={{ uri: asset.cloudThumbUri }}
+      style={{ flex: 1, width: '100%', height: '100%' }}
+      contentFit="contain"
+      cachePolicy="memory-disk"
+      transition={200}
+      backgroundColor="transparent"
+      allowDownscaling={false}
+    />
+  );
+}
+
+function VideoWrapper({ uri, shouldPlay }: { uri: string; shouldPlay: boolean }) {
+  const player = useVideoPlayer(uri, (p) => {
+    p.loop = true;
+    if (shouldPlay) p.play();
+  });
+
+  useEffect(() => {
+    if (shouldPlay) {
+      player.play();
+    } else {
+      player.pause();
+    }
+  }, [shouldPlay, player]);
+
+  return (
+    <View style={styles.videoContainer}>
+      <VideoView 
+        style={styles.video}
+        player={player}
+        allowsFullscreen
+        allowsPictureInPicture
+        nativeControls={true}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  videoContainer: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  video: {
+    width: '100%',
+    height: '100%',
+  },
+});

keystone-app/package-lock.json

@@ -26,6 +26,7 @@
         "expo-sharing": "~14.0.8",
         "expo-status-bar": "~3.0.9",
         "expo-task-manager": "~14.0.9",
+        "expo-video": "~3.0.16",
         "react": "19.1.0",
         "react-dom": "19.1.0",
         "react-native": "0.81.5",
@@ -5091,6 +5092,17 @@
         "expo": "*"
       }
     },
+    "node_modules/expo-video": {
+      "version": "3.0.16",
+      "resolved": "https://registry.npmjs.org/expo-video/-/expo-video-3.0.16.tgz",
+      "integrity": "sha512-H1HlxcHGomZItqisGfW3YL/G9BHtNBfVSimDJcLuyxyU87wFnV8loO9tCjuhufkfh/aTa2sW5BYAjLjg9DvnBQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "expo": "*",
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/expo/node_modules/@babel/code-frame": {
       "version": "7.29.7",
       "license": "MIT",

keystone-app/package.json

@@ -21,6 +21,7 @@
     "expo-sharing": "~14.0.8",
     "expo-status-bar": "~3.0.9",
     "expo-task-manager": "~14.0.9",
+    "expo-video": "~3.0.16",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-native": "0.81.5",

keystone-app/store/authStore.ts

@@ -0,0 +1,52 @@
+import { useState } from 'react';
+import { useAuth } from '../components/AuthContext';
+import { BACKEND_URL } from '../app/utils/syncManager';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+export const useAuthStore = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const { login } = useAuth();
+
+  const signIn = async (email: string, password: string) => {
+    setIsLoading(true);
+    try {
+      const res = await fetch(`${BACKEND_URL}/auth/login`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ username: email, password })
+      });
+      
+      const data = await res.json();
+      if (!res.ok) {
+        throw new Error(data.detail || 'Login failed');
+      }
+      
+      await AsyncStorage.setItem('jwt_token', data.token);
+      login(data.token);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const signUp = async (email: string, password: string) => {
+    setIsLoading(true);
+    try {
+      // Mock signup or implement if backend supports it
+      throw new Error("Signup is not currently supported by the backend.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const resetPassword = async (email: string) => {
+    setIsLoading(true);
+    try {
+      // Mock reset password
+      await new Promise(resolve => setTimeout(resolve, 1000));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return { signIn, signUp, resetPassword, isLoading };
+};

keystone-backend/main.py

@@ -116,6 +116,16 @@ async def health_check():
         "storage_path": BASE_STORAGE_DIR
     }
 
+@app.get("/storage/stats")
+async def storage_stats(username: str = Depends(verify_jwt_token)):
+    # Get overall bucket storage stats
+    total, used, free = shutil.disk_usage(BASE_STORAGE_DIR)
+    return {
+        "total": total,
+        "used": used,
+        "free": free
+    }
+
 @app.post("/auth/login")
 async def login(req: LoginRequest):
     if req.username not in VALID_USERS or VALID_USERS[req.username] != req.password:
@@ -138,15 +148,41 @@ async def upload_photo(
     
     # Determine the date for folder structure
     dt = datetime.now()
-    if creation_time:
+    
+    # 1. Try EXIF Date Taken (most accurate)
+    exif_dt = None
+    if file.filename.lower().endswith(('.jpg', '.jpeg', '.heic')):
+        try:
+            # Read first chunk into memory to parse EXIF without consuming whole stream
+            header_chunk = await file.read(65536)
+            try:
+                with Image.open(io.BytesIO(header_chunk)) as img:
+                    exif = img.getexif()
+                    if exif:
+                        # 36867 is the EXIF tag for DateTimeOriginal
+                        dt_original = exif.get(36867)
+                        if dt_original:
+                            # Format: 'YYYY:MM:DD HH:MM:SS'
+                            exif_dt = datetime.strptime(dt_original, '%Y:%m:%d %H:%M:%S')
+            except Exception:
+                pass
+            finally:
+                # Seek back to start for the actual file save!
+                await file.seek(0)
+        except Exception:
+            pass
+            
+    if exif_dt:
+        dt = exif_dt
+    elif creation_time:
+        # 2. Try creation_time provided by the app
         try:
-            # creation_time might be epoch milliseconds or an ISO string
             if creation_time.isdigit():
                 dt = datetime.fromtimestamp(int(creation_time) / 1000.0)
             else:
                 dt = datetime.fromisoformat(creation_time.replace('Z', '+00:00'))
         except Exception:
-            pass # Fallback to now() if parsing fails
+            pass # Fallback to now()
 
     year_folder = dt.strftime("%Y")
     month_folder = dt.strftime("%m")