diff --git a/app/picker.tsx b/app/picker.tsx
new file mode 100644
index 0000000..416b15e
--- /dev/null
+++ b/app/picker.tsx
@@ -0,0 +1,266 @@
+import { useCallback, useEffect, useState } from "react";
+import {
+  ActivityIndicator,
+  Dimensions,
+  FlatList,
+  Image,
+  Linking,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useRouter } from "expo-router";
+import * as MediaLibrary from "expo-media-library";
+import Animated, { FadeIn, FadeInDown } from "react-native-reanimated";
+import { X } from "phosphor-react-native";
+import { GlassCard, GlassButton, GlassPill } from "@/components/glass";
+import { useWallpaperStore } from "@/stores/wallpaper.store";
+import { requestGalleryPermission } from "@/services/media/gallery.service";
+import { colors, typography, spacing, layout } from "@/theme";
+
+const { width: SCREEN_WIDTH } = Dimensions.get("window");
+const NUM_COLUMNS = 3;
+const IMAGE_GAP = 2;
+const IMAGE_SIZE = (SCREEN_WIDTH - IMAGE_GAP * (NUM_COLUMNS - 1)) / NUM_COLUMNS;
+
+type Tab = "recent" | "favorites" | "albums";
+
+interface PhotoItem {
+  id: string;
+  uri: string;
+}
+
+export default function PickerScreen() {
+  const insets = useSafeAreaInsets();
+  const router = useRouter();
+  const setSourceImage = useWallpaperStore((s) => s.setSourceImage);
+  const resetEditor = useWallpaperStore((s) => s.resetEditor);
+
+  const [tab, setTab] = useState<Tab>("recent");
+  const [photos, setPhotos] = useState<PhotoItem[]>([]);
+  const [hasPermission, setHasPermission] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [offset, setOffset] = useState(0);
+  const [hasMore, setHasMore] = useState(true);
+
+  useEffect(() => {
+    (async () => {
+      const granted = await requestGalleryPermission();
+      setHasPermission(granted);
+      if (granted) {
+        await loadPhotos(0);
+      }
+      setLoading(false);
+    })();
+  }, []);
+
+  const loadPhotos = useCallback(async (startOffset: number) => {
+    try {
+      const query = new MediaLibrary.Query()
+        .eq(MediaLibrary.AssetField.MEDIA_TYPE, MediaLibrary.MediaType.IMAGE)
+        .orderBy({
+          key: MediaLibrary.AssetField.CREATION_TIME,
+          ascending: false,
+        })
+        .limit(60)
+        .offset(startOffset);
+
+      const assets = await query.exe();
+
+      // Resolve URIs from assets
+      const items: PhotoItem[] = [];
+      for (const asset of assets) {
+        try {
+          const uri = await asset.getUri();
+          items.push({ id: asset.id, uri });
+        } catch {
+          // Skip assets that can't be resolved (corrupted, cloud-only, etc.)
+        }
+      }
+
+      setPhotos((prev) => (startOffset === 0 ? items : [...prev, ...items]));
+      setOffset(startOffset + assets.length);
+      setHasMore(assets.length === 60);
+    } catch {
+      // Gallery read error — device-specific edge case
+    }
+  }, []);
+
+  const loadMore = useCallback(() => {
+    if (hasMore) {
+      loadPhotos(offset);
+    }
+  }, [hasMore, offset, loadPhotos]);
+
+  const handleSelectPhoto = useCallback(
+    (item: PhotoItem) => {
+      resetEditor();
+      setSourceImage(item.uri);
+      router.replace("/editor/new");
+    },
+    [router, setSourceImage, resetEditor]
+  );
+
+  if (loading) {
+    return (
+      <View style={[styles.container, styles.centered, { paddingTop: insets.top }]}>
+        <ActivityIndicator color={colors.text.secondary} size="large" />
+      </View>
+    );
+  }
+
+  if (!hasPermission) {
+    return (
+      <View style={[styles.container, { paddingTop: insets.top }]}>
+        <PermissionDenied />
+      </View>
+    );
+  }
+
+  return (
+    <View style={[styles.container, { paddingTop: insets.top }]}>
+      {/* Header */}
+      <Animated.View entering={FadeIn.duration(300)} style={styles.header}>
+        <GlassCard variant="subtle" radius="lg" padding={12}>
+          <View style={styles.headerRow}>
+            <Pressable onPress={() => router.back()}>
+              <X size={20} color={colors.text.primary} weight="light" />
+            </Pressable>
+            <Text style={typography.heading}>Choisir une photo</Text>
+            <View style={{ width: 24 }} />
+          </View>
+        </GlassCard>
+      </Animated.View>
+
+      {/* Tab pills */}
+      <Animated.View entering={FadeInDown.delay(100).duration(300)} style={styles.tabs}>
+        <GlassPill
+          label="Récentes"
+          selected={tab === "recent"}
+          onPress={() => setTab("recent")}
+        />
+        <GlassPill
+          label="Favoris"
+          selected={tab === "favorites"}
+          onPress={() => setTab("favorites")}
+        />
+        <GlassPill
+          label="Albums"
+          selected={tab === "albums"}
+          onPress={() => setTab("albums")}
+        />
+      </Animated.View>
+
+      {/* Photo grid */}
+      <FlatList
+        data={photos}
+        numColumns={NUM_COLUMNS}
+        keyExtractor={(item) => item.id}
+        onEndReached={loadMore}
+        onEndReachedThreshold={0.5}
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={[styles.grid, photos.length === 0 && styles.centered]}
+        ListEmptyComponent={
+          <View style={styles.emptyGallery}>
+            <Text style={[typography.bodySecondary, { textAlign: "center" }]}>
+              Aucune photo trouvée dans votre galerie
+            </Text>
+          </View>
+        }
+        renderItem={({ item }) => (
+          <Pressable
+            onPress={() => handleSelectPhoto(item)}
+            style={({ pressed }) => [
+              styles.imageContainer,
+              pressed && styles.imagePressed,
+            ]}
+          >
+            <Image
+              source={{ uri: item.uri }}
+              style={styles.image}
+              resizeMode="cover"
+            />
+          </Pressable>
+        )}
+      />
+    </View>
+  );
+}
+
+function PermissionDenied() {
+  return (
+    <View style={styles.permissionContainer}>
+      <GlassCard variant="medium" radius="xl" padding={32}>
+        <Text style={[typography.heading, { textAlign: "center" }]}>
+          Accès aux photos requis
+        </Text>
+        <Text
+          style={[
+            typography.bodySecondary,
+            { textAlign: "center", marginTop: 8, marginBottom: 20 },
+          ]}
+        >
+          Lively a besoin d'accéder à votre galerie{"\n"}pour créer des fonds
+          d'écran animés
+        </Text>
+        <GlassButton
+          label="Ouvrir les réglages"
+          onPress={() => Linking.openSettings()}
+          variant="primary"
+          size="md"
+        />
+      </GlassCard>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: colors.background,
+  },
+  header: {
+    paddingHorizontal: layout.screenPadding,
+    marginBottom: spacing.sm,
+  },
+  headerRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  tabs: {
+    flexDirection: "row",
+    paddingHorizontal: layout.screenPadding,
+    marginBottom: spacing.md,
+  },
+  grid: {
+    paddingBottom: 40,
+  },
+  imageContainer: {
+    width: IMAGE_SIZE,
+    height: IMAGE_SIZE,
+    padding: IMAGE_GAP / 2,
+  },
+  image: {
+    flex: 1,
+  },
+  imagePressed: {
+    opacity: 0.7,
+  },
+  permissionContainer: {
+    flex: 1,
+    justifyContent: "center",
+    paddingHorizontal: layout.screenPadding + spacing.md,
+  },
+  centered: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  emptyGallery: {
+    paddingTop: 80,
+    paddingHorizontal: layout.screenPadding,
+  },
+});