diff --git a/frontend/app/(app)/trips/[id]/activities/components/activity-card.tsx b/frontend/app/(app)/trips/[id]/activities/components/activity-card.tsx
new file mode 100644
index 00000000..c9efa63f
--- /dev/null
+++ b/frontend/app/(app)/trips/[id]/activities/components/activity-card.tsx
@@ -0,0 +1,145 @@
+import { Box, Text } from "@/design-system";
+import { Avatar } from "@/design-system/components/avatars/avatar";
+import { ColorPalette } from "@/design-system/tokens/color";
+import { CornerRadius } from "@/design-system/tokens/corner-radius";
+import { Elevation } from "@/design-system/tokens/elevation";
+import { Layout } from "@/design-system/tokens/layout";
+import type { ModelsActivityAPIResponse } from "@/types/types.gen";
+import { Image } from "expo-image";
+import { Heart } from "lucide-react-native";
+import { Pressable, StyleSheet } from "react-native";
+
+type ActivityCardProps = {
+  activity: ModelsActivityAPIResponse;
+  onPress?: () => void;
+  isNew?: boolean;
+};
+
+export function ActivityCard({ activity, onPress, isNew }: ActivityCardProps) {
+  const hasThumbnail = !!activity.thumbnail_url;
+  const goingCount = activity.going_count ?? 0;
+  const goingUsers = activity.going_users ?? [];
+
+  return (
+    <Pressable
+      onPress={onPress}
+      style={({ pressed }) => ({ opacity: pressed ? 0.97 : 1 })}
+    >
+      <Box style={styles.card}>
+        {/* Thumbnail */}
+        {hasThumbnail && (
+          <Box style={styles.thumbnailContainer}>
+            <Image
+              source={{ uri: activity.thumbnail_url! }}
+              style={styles.thumbnail}
+              contentFit="cover"
+            />
+            {isNew && (
+              <Box style={styles.newBadge}>
+                <Text variant="bodyXxsMedium" color="white">
+                  New • 1m
+                </Text>
+              </Box>
+            )}
+          </Box>
+        )}
+
+        {/* Content */}
+        <Box style={styles.content}>
+          <Box
+            flexDirection="row"
+            alignItems="center"
+            justifyContent="space-between"
+          >
+            <Text
+              variant="bodySmMedium"
+              color="gray900"
+              style={{ flex: 1 }}
+              numberOfLines={1}
+            >
+              {activity.name}
+            </Text>
+            <Box flexDirection="row" alignItems="center" gap="xs">
+              {goingCount > 0 && (
+                <Box flexDirection="row" alignItems="center" gap="xxs">
+                  <Heart
+                    size={14}
+                    color={ColorPalette.statusError}
+                    fill={ColorPalette.statusError}
+                  />
+                  <Text variant="bodyXsMedium" color="gray500">
+                    {goingCount}
+                  </Text>
+                </Box>
+              )}
+            </Box>
+          </Box>
+
+          {activity.estimated_price != null && (
+            <Text variant="bodyXsDefault" color="gray500">
+              ${activity.estimated_price} per person
+            </Text>
+          )}
+
+          {goingUsers.length > 0 && (
+            <Box flexDirection="row" alignItems="center" gap="xxs">
+              {goingUsers.slice(0, 3).map((u) => (
+                <Avatar
+                  key={u.user_id}
+                  variant="xs"
+                  seed={u.user_id}
+                  profilePhoto={u.profile_picture_url ?? undefined}
+                />
+              ))}
+            </Box>
+          )}
+        </Box>
+
+        {/* Comments row — placeholder, comments ticket is separate */}
+        {isNew && (
+          <Box style={styles.commentRow}>
+            <Text variant="bodyXsMedium" color="blue500">
+              1 new comment
+            </Text>
+          </Box>
+        )}
+      </Box>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: ColorPalette.white,
+    borderRadius: CornerRadius.lg,
+    overflow: "hidden",
+    ...Elevation.xs,
+  },
+  thumbnailContainer: {
+    height: 160,
+    width: "100%",
+    position: "relative",
+  },
+  thumbnail: {
+    width: "100%",
+    height: "100%",
+  },
+  newBadge: {
+    position: "absolute",
+    top: Layout.spacing.xs,
+    left: Layout.spacing.xs,
+    backgroundColor: ColorPalette.brand500,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: CornerRadius.sm,
+  },
+  content: {
+    padding: Layout.spacing.xs,
+    gap: 4,
+  },
+  commentRow: {
+    paddingHorizontal: Layout.spacing.xs,
+    paddingVertical: Layout.spacing.xs,
+    backgroundColor: ColorPalette.blue50,
+  },
+});
\ No newline at end of file
diff --git a/frontend/app/(app)/trips/[id]/activities/components/add-activity-entry-sheet.tsx b/frontend/app/(app)/trips/[id]/activities/components/add-activity-entry-sheet.tsx
new file mode 100644
index 00000000..a1ff6677
--- /dev/null
+++ b/frontend/app/(app)/trips/[id]/activities/components/add-activity-entry-sheet.tsx
@@ -0,0 +1,190 @@
+import { parseActivityLink } from "@/api/activities";
+import { Box, Button, Text, TextField, useToast } from "@/design-system";
+import { ColorPalette } from "@/design-system/tokens/color";
+import { CornerRadius } from "@/design-system/tokens/corner-radius";
+import { Layout } from "@/design-system/tokens/layout";
+import type { ModelsParsedActivityData } from "@/types/types.gen";
+import { Link } from "lucide-react-native";
+import { forwardRef, useImperativeHandle, useState } from "react";
+import {
+    Image,
+    KeyboardAvoidingView,
+    Modal,
+    Platform,
+    Pressable,
+    StyleSheet,
+} from "react-native";
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+type AddActivityEntrySheetProps = {
+  tripID: string;
+  onManual: () => void;
+  onAutofilled: (data: ModelsParsedActivityData) => void;
+  onClose: () => void;
+};
+
+export type AddActivityEntrySheetHandle = {
+  open: () => void;
+  close: () => void;
+};
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+export const AddActivityEntrySheet = forwardRef<
+  AddActivityEntrySheetHandle,
+  AddActivityEntrySheetProps
+>(({ tripID, onManual, onAutofilled, onClose }, ref) => {
+  const toast = useToast();
+  const [visible, setVisible] = useState(false);
+  const [url, setUrl] = useState("");
+  const [isAutofilling, setIsAutofilling] = useState(false);
+
+  useImperativeHandle(ref, () => ({
+    open: () => setVisible(true),
+    close: () => {
+      setVisible(false);
+      setUrl("");
+    },
+  }));
+
+  const handleClose = () => {
+    setVisible(false);
+    setUrl("");
+    onClose();
+  };
+
+  const handleManual = () => {
+    setVisible(false);
+    setUrl("");
+    onManual();
+  };
+
+  const handleAutofill = async () => {
+    if (!url.trim()) return;
+    setIsAutofilling(true);
+    try {
+      const data = await parseActivityLink(tripID, { url: url.trim() });
+      setIsAutofilling(false);
+      setVisible(false);
+      setUrl("");
+      onAutofilled(data);
+    } catch {
+      setIsAutofilling(false);
+      toast.show({ message: "Couldn't fetch that link. Try adding manually." });
+    }
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="slide"
+      onRequestClose={handleClose}
+    >
+      <Pressable style={styles.backdrop} onPress={handleClose}>
+        <KeyboardAvoidingView
+          behavior={Platform.OS === "ios" ? "padding" : undefined}
+          style={styles.sheetWrapper}
+        >
+          {/* Prevent backdrop tap from closing when tapping sheet */}
+          <Pressable style={styles.sheet} onPress={() => {}}>
+            {/* Handle */}
+            <Box alignItems="center" paddingTop="sm" paddingBottom="xs">
+              <Box style={styles.handle} />
+            </Box>
+
+            <Box padding="sm" gap="md" alignItems="center">
+              {/* Illustration */}
+              <Image
+                source={require("@/assets/images/binoculars.png")}
+                style={{ width: 80, height: 80 }}
+                resizeMode="contain"
+              />
+
+              {/* Header — changes during autofill */}
+              <Box gap="xxs" alignItems="center">
+                <Text variant="headingSm" color="gray900">
+                  {isAutofilling
+                    ? "Fetching listing details..."
+                    : "Add an activity"}
+                </Text>
+                <Text
+                  variant="bodySmDefault"
+                  color="gray500"
+                  textAlign="center"
+                >
+                  {isAutofilling
+                    ? "Hang tight while we pull the details from your link. This only takes a second or two."
+                    : "Easily import from yelp, instagram, tiktok, etc."}
+                </Text>
+              </Box>
+
+              {/* URL input */}
+              <Box style={{ width: "100%" }}>
+                <TextField
+                  value={url}
+                  onChangeText={setUrl}
+                  placeholder="https://..."
+                  leftIcon={<Link size={16} color={ColorPalette.gray400} />}
+                  autoCapitalize="none"
+                  keyboardType="url"
+                />
+              </Box>
+
+              {/* Autofill button */}
+              <Box style={{ width: "100%" }}>
+                <Button
+                  layout="textOnly"
+                  label={isAutofilling ? "Autofilling..." : "Autofill from link"}
+                  variant="Primary"
+                  loading={isAutofilling}
+                  disabled={!url.trim() || isAutofilling}
+                  onPress={handleAutofill}
+                />
+              </Box>
+
+              {/* Manual fallback */}
+              <Box style={{ width: "100%" }}>
+              <Button
+                layout="textOnly"
+                label="Add manually"
+                variant="Secondary"
+                disabled={isAutofilling}
+                onPress={handleManual}
+              />
+              </Box>
+            </Box>
+          </Pressable>
+        </KeyboardAvoidingView>
+      </Pressable>
+    </Modal>
+  );
+});
+
+AddActivityEntrySheet.displayName = "AddActivityEntrySheet";
+
+// ─── Styles ──────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    backgroundColor: "rgba(0,0,0,0.4)",
+    justifyContent: "flex-end",
+  },
+  sheetWrapper: {
+    justifyContent: "flex-end",
+  },
+  sheet: {
+    backgroundColor: ColorPalette.white,
+    borderTopLeftRadius: CornerRadius.lg,
+    borderTopRightRadius: CornerRadius.lg,
+    paddingBottom: Layout.spacing.xl,
+  },
+  handle: {
+    width: 36,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: ColorPalette.gray300,
+  },
+});
\ No newline at end of file
diff --git a/frontend/app/(app)/trips/[id]/activities/components/add-activity-manual-sheet.tsx b/frontend/app/(app)/trips/[id]/activities/components/add-activity-manual-sheet.tsx
new file mode 100644
index 00000000..7b7e4c34
--- /dev/null
+++ b/frontend/app/(app)/trips/[id]/activities/components/add-activity-manual-sheet.tsx
@@ -0,0 +1,433 @@
+import { useCreateActivity } from "@/api/activities";
+import { useUploadImage } from "@/api/files/custom";
+import {
+  Box,
+  Button,
+  DateRangePicker,
+  Dialog,
+  ImagePicker,
+  Text,
+  useToast,
+} from "@/design-system";
+import BottomSheet from "@/design-system/components/bottom-sheet/bottom-sheet";
+import type { DateRange } from "@/design-system/primitives/date-picker";
+import { ColorPalette } from "@/design-system/tokens/color";
+import { CornerRadius } from "@/design-system/tokens/corner-radius";
+import { Layout } from "@/design-system/tokens/layout";
+import { getImageURL } from "@/services/imageService";
+import type {
+  ModelsActivityAPIResponse,
+  ModelsParsedActivityData,
+} from "@/types/types.gen";
+import { BottomSheetScrollView } from "@gorhom/bottom-sheet";
+import { BottomSheetMethods } from "@gorhom/bottom-sheet/lib/typescript/types";
+import { router } from "expo-router";
+import {
+  Calendar,
+  DollarSign,
+  Link,
+  MapPin,
+  Plus,
+} from "lucide-react-native";
+import {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
+import { Pressable, StyleSheet, TextInput } from "react-native";
+import { CategoriesSheet } from "./categories-sheet";
+import { FormRow } from "./form-row";
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+type PendingLocation = { name: string; lat: number; lng: number };
+
+export type AddActivityManualSheetHandle = {
+  open: (prefill?: Partial<ModelsParsedActivityData>) => void;
+  close: () => void;
+  setLocation: (loc: PendingLocation) => void;
+};
+
+type AddActivityManualSheetProps = {
+  tripID: string;
+  onSaved: (activity: ModelsActivityAPIResponse) => void;
+  onClose: () => void;
+};
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+function formatDateRange(range: DateRange): string | null {
+  if (!range.start) return null;
+  const fmt = (d: Date) =>
+    d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+  if (!range.end || range.start.getTime() === range.end.getTime())
+    return fmt(range.start);
+  return `${fmt(range.start)} – ${fmt(range.end)}`;
+}
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+export const AddActivityManualSheet = forwardRef<
+  AddActivityManualSheetHandle,
+  AddActivityManualSheetProps
+>(({ tripID, onSaved, onClose }, ref) => {
+  const toast = useToast();
+  const createActivity = useCreateActivity();
+  const uploadImage = useUploadImage();
+  const bottomSheetRef = useRef<BottomSheetMethods>(null);
+  const categoriesSheetRef = useRef<BottomSheetMethods>(null);
+  const savedRef = useRef(false);
+
+  // ─── Form state ──────────────────────────────────────────────────────────
+  const [thumbnailUri, setThumbnailUri] = useState<string | null>(null);
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [categories, setCategories] = useState<string[]>([]);
+  const [locationName, setLocationName] = useState<string | null>(null);
+  const [locationLat, setLocationLat] = useState<number | null>(null);
+  const [locationLng, setLocationLng] = useState<number | null>(null);
+  const [price, setPrice] = useState("");
+  const [dateRange, setDateRange] = useState<DateRange>({ start: null, end: null });
+  const [link, setLink] = useState("");
+  const [isDatePickerVisible, setIsDatePickerVisible] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [showCancelConfirm, setShowCancelConfirm] = useState(false);
+
+  // ─── Imperative handle ───────────────────────────────────────────────────
+  useImperativeHandle(ref, () => ({
+    open: (prefill) => {
+      if (prefill) {
+        if (prefill.name) setName(prefill.name);
+        if (prefill.description) setDescription(prefill.description);
+        if (prefill.thumbnail_url) setThumbnailUri(prefill.thumbnail_url);
+        if (prefill.media_url) setLink(prefill.media_url);
+      }
+      bottomSheetRef.current?.snapToIndex(0);
+    },
+    close: () => bottomSheetRef.current?.close(),
+    setLocation: (loc) => {
+      setLocationName(loc.name);
+      setLocationLat(loc.lat);
+      setLocationLng(loc.lng);
+    },
+  }));
+
+  // ─── Handlers ────────────────────────────────────────────────────────────
+
+  const handleLocationPress = useCallback(() => {
+    router.push(
+      `/trips/${tripID}/search-location?tripID=${tripID}&returnTo=/trips/${tripID}/activities`,
+    );
+  }, [tripID]);
+
+  const resetForm = () => {
+    setName("");
+    setDescription("");
+    setThumbnailUri(null);
+    setCategories([]);
+    setLocationName(null);
+    setLocationLat(null);
+    setLocationLng(null);
+    setPrice("");
+    setDateRange({ start: null, end: null });
+    setLink("");
+  };
+
+  const handleSave = async () => {
+    if (!name.trim()) return;
+    setIsSaving(true);
+    try {
+      let thumbnailURL: string | undefined;
+
+      if (thumbnailUri?.startsWith("http")) {
+        // Remote URL from autofill — use directly
+        thumbnailURL = thumbnailUri;
+      } else if (thumbnailUri) {
+        // Local file — upload and get presigned URL
+        try {
+          const res = await uploadImage.mutateAsync({
+            uri: thumbnailUri,
+            sizes: ["medium"],
+          });
+          const urlRes = await getImageURL(res.imageId, "medium");
+          thumbnailURL = urlRes.url;
+        } catch (uploadErr) {
+          console.warn("Image upload failed, skipping thumbnail:", uploadErr);
+        }
+      }
+
+      const dates =
+        dateRange.start && dateRange.end
+          ? [
+              {
+                start: dateRange.start.toISOString().split("T")[0]!,
+                end: dateRange.end.toISOString().split("T")[0]!,
+              },
+            ]
+          : undefined;
+
+      const estimatedPrice = parseFloat(price);
+      const result = await createActivity.mutateAsync({
+        tripID,
+        data: {
+          name: name.trim(),
+          description: description.trim() || undefined,
+          category_names: categories,
+          location_name: locationName ?? undefined,
+          location_lat: locationLat ?? undefined,
+          location_lng: locationLng ?? undefined,
+          estimated_price: isNaN(estimatedPrice) ? undefined : estimatedPrice,
+          dates,
+          thumbnail_url: thumbnailURL,
+          media_url: link.trim() || undefined,
+        },
+      });
+
+      toast.show({
+        message: "Activity added",
+        action: { label: "View", onPress: () => {} },
+      });
+      savedRef.current = true;
+      resetForm();
+      onSaved(result);
+    } catch (e) {
+      toast.show({ message: "Couldn't save activity. Try again." });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleCancel = () => {
+    if (savedRef.current) {
+      savedRef.current = false;
+      return;
+    }
+    const hasData = name.trim() || description.trim() || thumbnailUri;
+    if (hasData) {
+      setShowCancelConfirm(true);
+    } else {
+      resetForm();
+      onClose();
+    }
+  };
+
+  const isValid = name.trim().length > 0;
+
+  // ─── Render ──────────────────────────────────────────────────────────────
+
+  return (
+    <>
+      <BottomSheet
+        ref={bottomSheetRef}
+        snapPoints={["90%"]}
+        initialIndex={-1}
+        onClose={handleCancel}
+        footer={
+          <Box style={styles.footer}>
+            <Button
+              layout="textOnly"
+              label="Save activity"
+              variant="Primary"
+              disabled={!isValid || isSaving}
+              loading={isSaving}
+              onPress={handleSave}
+            />
+            <Button
+              layout="textOnly"
+              label="Cancel"
+              variant="Tertiary"
+              onPress={handleCancel}
+            />
+          </Box>
+        }
+      >
+        <BottomSheetScrollView
+          keyboardShouldPersistTaps="handled"
+          contentContainerStyle={styles.scrollContent}
+        >
+          <Box paddingHorizontal="sm" paddingTop="sm" alignItems="center">
+            <Text variant="bodySmMedium" color="gray500">
+              Add an activity
+            </Text>
+          </Box>
+
+          <Box paddingHorizontal="sm">
+            <ImagePicker
+              variant="rectangular"
+              width="100%"
+              height={180}
+              value={thumbnailUri ?? undefined}
+              onChange={(uri) => setThumbnailUri(uri)}
+              placeholder="Add cover image"
+            />
+          </Box>
+
+          <Box paddingHorizontal="sm" gap="xxs">
+            <TextInput
+              value={name}
+              onChangeText={setName}
+              placeholder="New Activity"
+              placeholderTextColor={ColorPalette.gray400}
+              style={styles.nameInput}
+            />
+            <TextInput
+              value={description}
+              onChangeText={setDescription}
+              placeholder="Add a description"
+              placeholderTextColor={ColorPalette.gray400}
+              multiline
+              style={styles.descriptionInput}
+            />
+          </Box>
+
+          <Box paddingHorizontal="sm">
+            <Box flexDirection="row" flexWrap="wrap" gap="xs" alignItems="center">
+              {categories.map((cat) => (
+                <Box key={cat} paddingHorizontal="sm" paddingVertical="xxs" style={styles.categoryChip}>
+                  <Text variant="bodyXsMedium" color="gray700">{cat}</Text>
+                </Box>
+              ))}
+              <Pressable onPress={() => categoriesSheetRef.current?.snapToIndex(0)}>
+                <Box flexDirection="row" alignItems="center" gap="xxs" paddingHorizontal="sm" paddingVertical="xxs" style={styles.addCategoryChip}>
+                  <Plus size={12} color={ColorPalette.gray500} />
+                  <Text variant="bodyXsMedium" color="gray500">Add category</Text>
+                </Box>
+              </Pressable>
+            </Box>
+          </Box>
+
+          <Box paddingHorizontal="sm" gap="xxs" borderTopWidth={1} borderTopColor="gray100" paddingTop="sm">
+            <FormRow
+              icon={MapPin}
+              value={locationName ?? undefined}
+              placeholder="Location"
+              onPress={handleLocationPress}
+            />
+            <Box flexDirection="row" alignItems="center" gap="sm" paddingVertical="xs">
+              <DollarSign size={16} color={price ? ColorPalette.gray700 : ColorPalette.gray400} />
+              <TextInput
+                value={price}
+                onChangeText={setPrice}
+                placeholder="Price"
+                placeholderTextColor={ColorPalette.gray400}
+                keyboardType="decimal-pad"
+                style={styles.inlineInput}
+              />
+            </Box>
+            <FormRow
+              icon={Calendar}
+              value={formatDateRange(dateRange) ?? undefined}
+              placeholder="Dates"
+              onPress={() => setIsDatePickerVisible(true)}
+            />
+            <Box flexDirection="row" alignItems="center" gap="sm" paddingVertical="xs">
+              <Link size={16} color={link ? ColorPalette.gray700 : ColorPalette.gray400} />
+              <TextInput
+                value={link}
+                onChangeText={setLink}
+                placeholder="Link"
+                placeholderTextColor={ColorPalette.gray400}
+                autoCapitalize="none"
+                keyboardType="url"
+                style={styles.inlineInput}
+              />
+            </Box>
+          </Box>
+        </BottomSheetScrollView>
+      </BottomSheet>
+
+      <CategoriesSheet
+        ref={categoriesSheetRef}
+        tripID={tripID}
+        selected={categories}
+        onChange={setCategories}
+        onDone={() => categoriesSheetRef.current?.close()}
+      />
+
+      <DateRangePicker
+        visible={isDatePickerVisible}
+        onClose={() => setIsDatePickerVisible(false)}
+        onSave={(range) => {
+          setDateRange(range);
+          setIsDatePickerVisible(false);
+        }}
+        initialRange={dateRange}
+      />
+
+      <Dialog
+        visible={showCancelConfirm}
+        onClose={() => setShowCancelConfirm(false)}
+        title={`Cancel adding "${name || "New Activity"}"?`}
+        message="You'll lose any additions you made"
+        actions={[
+          {
+            label: `Delete "${name || "New Activity"}"`,
+            style: "destructive",
+            onPress: () => {
+              setShowCancelConfirm(false);
+              resetForm();
+              onClose();
+            },
+          },
+          {
+            label: `Keep "${name || "New Activity"}"`,
+            style: "default",
+            onPress: () => setShowCancelConfirm(false),
+          },
+        ]}
+      />
+    </>
+  );
+});
+
+AddActivityManualSheet.displayName = "AddActivityManualSheet";
+
+// ─── Styles ──────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create({
+  scrollContent: {
+    gap: Layout.spacing.sm,
+    paddingBottom: 120,
+  },
+  nameInput: {
+    fontFamily: "Figtree-SemiBold",
+    fontSize: 20,
+    color: ColorPalette.gray900,
+    paddingVertical: 4,
+  },
+  descriptionInput: {
+    fontFamily: "Figtree-Regular",
+    fontSize: 14,
+    color: ColorPalette.gray500,
+    paddingVertical: 4,
+  },
+  categoryChip: {
+    borderWidth: 1,
+    borderColor: ColorPalette.gray200,
+    borderRadius: CornerRadius.full,
+  },
+  addCategoryChip: {
+    borderWidth: 1,
+    borderStyle: "dashed",
+    borderColor: ColorPalette.gray300,
+    borderRadius: CornerRadius.full,
+  },
+  inlineInput: {
+    flex: 1,
+    fontFamily: "Figtree-Regular",
+    fontSize: 14,
+    color: ColorPalette.gray900,
+    paddingVertical: 0,
+  },
+  footer: {
+    paddingHorizontal: Layout.spacing.sm,
+    paddingBottom: Layout.spacing.md,
+    paddingTop: Layout.spacing.xs,
+    gap: Layout.spacing.xxs,
+    backgroundColor: ColorPalette.white,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: ColorPalette.gray100,
+  },
+});
\ No newline at end of file
diff --git a/frontend/app/(app)/trips/[id]/activities/components/categories-sheet.tsx b/frontend/app/(app)/trips/[id]/activities/components/categories-sheet.tsx
new file mode 100644
index 00000000..5abe712d
--- /dev/null
+++ b/frontend/app/(app)/trips/[id]/activities/components/categories-sheet.tsx
@@ -0,0 +1,122 @@
+import { useGetCategoriesByTripID } from "@/api/categories";
+import { Box, Button, Text } from "@/design-system";
+import BottomSheet from "@/design-system/components/bottom-sheet/bottom-sheet";
+import { ColorPalette } from "@/design-system/tokens/color";
+import { CornerRadius } from "@/design-system/tokens/corner-radius";
+import { BottomSheetMethods } from "@gorhom/bottom-sheet/lib/typescript/types";
+import { Plus } from "lucide-react-native";
+import { forwardRef } from "react";
+import { Pressable, StyleSheet } from "react-native";
+
+type CategoriesSheetProps = {
+  tripID: string;
+  selected: string[];
+  onChange: (categories: string[]) => void;
+  onDone: () => void;
+};
+
+export const CategoriesSheet = forwardRef<BottomSheetMethods, CategoriesSheetProps>(
+  ({ tripID, selected, onChange, onDone }, ref) => {
+    const { data } = useGetCategoriesByTripID(tripID);
+    const categories = data?.categories ?? [];
+
+    const toggle = (name: string) => {
+      onChange(
+        selected.includes(name)
+          ? selected.filter((n) => n !== name)
+          : [...selected, name],
+      );
+    };
+
+    return (
+      <BottomSheet
+        ref={ref}
+        snapPoints={["40%"]}
+        initialIndex={-1}
+        footer={
+          <Box paddingHorizontal="sm" paddingBottom="md">
+            <Button
+              layout="textOnly"
+              label="Done"
+              variant="Primary"
+              onPress={onDone}
+            />
+          </Box>
+        }
+      >
+        <Box padding="sm" gap="sm">
+          <Box
+            flexDirection="row"
+            justifyContent="space-between"
+            alignItems="center"
+          >
+            <Text variant="bodyMedium" color="gray900">
+              Categories
+            </Text>
+            <Pressable onPress={onDone}>
+              <Text variant="bodySmMedium" color="gray500">
+                Done
+              </Text>
+            </Pressable>
+          </Box>
+
+          <Box flexDirection="row" flexWrap="wrap" gap="xs">
+            {categories.map((cat) => {
+              const isSelected = selected.includes(cat.name);
+              return (
+                <Pressable key={cat.name} onPress={() => toggle(cat.name)}>
+                  <Box
+                    paddingHorizontal="sm"
+                    paddingVertical="xxs"
+                    style={[styles.chip, isSelected && styles.chipSelected]}
+                  >
+                    <Text
+                      variant="bodyXsMedium"
+                      style={{
+                        color: isSelected
+                          ? ColorPalette.white
+                          : ColorPalette.gray900,
+                      }}
+                    >
+                      {cat.label ?? cat.name}
+                    </Text>
+                  </Box>
+                </Pressable>
+              );
+            })}
+
+            <Pressable>
+              <Box
+                flexDirection="row"
+                alignItems="center"
+                gap="xxs"
+                paddingHorizontal="sm"
+                paddingVertical="xxs"
+                style={styles.chip}
+              >
+                <Plus size={12} color={ColorPalette.gray500} />
+                <Text variant="bodyXsMedium" color="gray500">
+                  Create amenity
+                </Text>
+              </Box>
+            </Pressable>
+          </Box>
+        </Box>
+      </BottomSheet>
+    );
+  },
+);
+
+CategoriesSheet.displayName = "CategoriesSheet";
+
+const styles = StyleSheet.create({
+  chip: {
+    borderWidth: 1,
+    borderColor: ColorPalette.gray200,
+    borderRadius: CornerRadius.full,
+  },
+  chipSelected: {
+    backgroundColor: ColorPalette.gray900,
+    borderColor: ColorPalette.gray900,
+  },
+});
\ No newline at end of file
diff --git a/frontend/app/(app)/trips/[id]/activities/components/form-row.tsx b/frontend/app/(app)/trips/[id]/activities/components/form-row.tsx
new file mode 100644
index 00000000..368d410a
--- /dev/null
+++ b/frontend/app/(app)/trips/[id]/activities/components/form-row.tsx
@@ -0,0 +1,34 @@
+
+import { Box, Text } from "@/design-system";
+import { ColorPalette } from "@/design-system/tokens/color";
+import { LucideProps } from "lucide-react-native";
+import React from "react";
+import { Pressable } from "react-native";
+
+type FormRowProps = {
+  icon: React.ComponentType<LucideProps>;
+  value?: string;
+  placeholder: string;
+  onPress?: () => void;
+};
+
+export function FormRow({ icon: Icon, value, placeholder, onPress }: FormRowProps) {
+  const hasValue = !!value;
+  return (
+    <Pressable onPress={onPress}>
+      <Box flexDirection="row" alignItems="center" gap="sm" paddingVertical="xs">
+        <Icon
+          size={16}
+          color={hasValue ? ColorPalette.gray700 : ColorPalette.gray400}
+        />
+        <Text
+          variant="bodySmDefault"
+          color={hasValue ? "gray900" : "gray400"}
+          style={{ flex: 1 }}
+        >
+          {value ?? placeholder}
+        </Text>
+      </Box>
+    </Pressable>
+  );
+}
\ No newline at end of file
diff --git a/frontend/app/(app)/trips/[id]/activities/creation/index.tsx b/frontend/app/(app)/trips/[id]/activities/creation/index.tsx
index 3da27791..d3b7421d 100644
--- a/frontend/app/(app)/trips/[id]/activities/creation/index.tsx
+++ b/frontend/app/(app)/trips/[id]/activities/creation/index.tsx
@@ -1,253 +1,178 @@
-import { useCreateActivity } from "@/api/activities";
-import { useDeleteImage, useUploadImage } from "@/api/files/custom";
-import { Box, Button, Screen, Text } from "@/design-system";
-import type { ModelsActivityTimeOfDay } from "@/types/types.gen";
+import { useActivitiesList } from "@/api/activities/custom/useActivitiesList";
+import { Box, EmptyState, SkeletonRect, Text } from "@/design-system";
 import { ColorPalette } from "@/design-system/tokens/color";
-import * as ImagePicker from "expo-image-picker";
-import { useLocalSearchParams, useRouter } from "expo-router";
-import { useState } from "react";
+import { Layout } from "@/design-system/tokens/layout";
+import type {
+  ModelsActivityAPIResponse,
+  ModelsParsedActivityData,
+} from "@/types/types.gen";
+import { useLocalSearchParams } from "expo-router";
+import { Plus } from "lucide-react-native";
+import { useCallback, useRef } from "react";
 import {
   ActivityIndicator,
-  Alert,
-  Image,
+  FlatList,
   Pressable,
-  ScrollView,
-  TextInput,
+  StyleSheet,
 } from "react-native";
+import { ActivityCard } from "../components/activity-card";
+import {
+  AddActivityEntrySheet,
+  type AddActivityEntrySheetHandle,
+} from "../components/add-activity-entry-sheet";
+import {
+  AddActivityManualSheet,
+  type AddActivityManualSheetHandle,
+} from "../components/add-activity-manual-sheet";
 
-export default function CreateActivity() {
+function ActivitiesSkeleton() {
+  return (
+    <Box gap="xs" paddingHorizontal="sm" paddingTop="sm">
+      {[1, 2, 3].map((i) => (
+        <SkeletonRect key={i} width="full" height="lg" borderRadius="sm" />
+      ))}
+    </Box>
+  );
+}
+
+export default function ActivitiesScreen() {
   const {
     id: tripID,
-    date,
-    timeOfDay,
   } = useLocalSearchParams<{
     id: string;
-    date?: string;
-    timeOfDay?: string;
+    locationName?: string;
+    locationLat?: string;
+    locationLng?: string;
   }>();
-  const router = useRouter();
-
-  const [name, setName] = useState("");
-  const [description, setDescription] = useState("");
-  const [imageUris, setImageUris] = useState<string[]>([]);
-  const [isSubmitting, setIsSubmitting] = useState(false);
 
-  const uploadImageMutation = useUploadImage();
-  const deleteImageMutation = useDeleteImage();
-  const createActivityMutation = useCreateActivity();
+  const entrySheetRef = useRef<AddActivityEntrySheetHandle>(null);
+  const manualSheetRef = useRef<AddActivityManualSheetHandle>(null);
 
-  const pickImage = async () => {
-    if (imageUris.length >= 5) {
-      Alert.alert("Limit reached", "You can add up to 5 images.");
-      return;
-    }
+  const { activities, isLoading, isLoadingMore, fetchMore, prependActivity } =
+    useActivitiesList(tripID);
 
-    const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
-    if (status !== "granted") {
-      Alert.alert("Permission denied", "Media library access is required.");
-      return;
-    }
+  const handleAutofilled = useCallback((data: ModelsParsedActivityData) => {
+    entrySheetRef.current?.close();
+    setTimeout(() => manualSheetRef.current?.open(data), 300);
+  }, []);
 
-    const result = await ImagePicker.launchImageLibraryAsync({
-      mediaTypes: ["images"],
-      quality: 1,
-    });
+  const handleManual = useCallback(() => {
+    entrySheetRef.current?.close();
+    setTimeout(() => manualSheetRef.current?.open(), 300);
+  }, []);
 
-    const uri = result.assets?.[0]?.uri;
-    if (!result.canceled && uri) {
-      setImageUris((prev) => [...prev, uri]);
-    }
-  };
-
-  const removeImage = (index: number) => {
-    setImageUris((prev) => prev.filter((_, i) => i !== index));
-  };
-
-  const handleCreate = async () => {
-    if (!name.trim()) {
-      Alert.alert("Validation", "Activity name is required.");
-      return;
-    }
-
-    setIsSubmitting(true);
-
-    const uploadedImageIds: string[] = [];
-
-    try {
-      for (const uri of imageUris) {
-        const res = await uploadImageMutation.mutateAsync({
-          uri,
-          sizes: ["medium"],
-        });
-        uploadedImageIds.push(res.imageId);
-      }
+  const handleSaved = useCallback(
+    (activity: ModelsActivityAPIResponse) => {
+      manualSheetRef.current?.close();
+      prependActivity(activity);
+    },
+    [prependActivity],
+  );
 
-      const activity = await createActivityMutation.mutateAsync({
-        tripID,
-        data: {
-          trip_id: tripID,
-          name: name.trim(),
-          description: description.trim() || undefined,
-          image_ids: uploadedImageIds,
-          ...(date ? { dates: [{ start: date, end: date }] } : {}),
-          ...(timeOfDay
-            ? { time_of_day: timeOfDay as ModelsActivityTimeOfDay }
-            : {}),
-        },
-      });
+  const renderItem = useCallback(
+    ({ item }: { item: ModelsActivityAPIResponse }) => (
+      <ActivityCard activity={item} />
+    ),
+    [],
+  );
 
-      router.replace(
-        `/trips/${tripID}/activities/${activity.id}?tripID=${tripID}`,
-      );
-    } catch {
-      await Promise.allSettled(
-        uploadedImageIds.map((id) => deleteImageMutation.mutateAsync(id)),
-      );
-      Alert.alert("Error", "Failed to create activity. Please try again.");
-      setIsSubmitting(false);
-    }
-  };
+  const renderFooter = useCallback(
+    () =>
+      isLoadingMore ? (
+        <Box paddingVertical="sm" alignItems="center">
+          <ActivityIndicator size="small" />
+        </Box>
+      ) : null,
+    [isLoadingMore],
+  );
 
   return (
-    <Screen>
-      <Box flex={1} backgroundColor="gray50">
-        <Box padding="lg" paddingTop="xl" backgroundColor="white" gap="xs">
+    <Box flex={1} backgroundColor="gray50">
+      {isLoading ? (
+        <ActivitiesSkeleton />
+      ) : activities.length === 0 ? (
+        <Box flex={1} alignItems="center" justifyContent="center">
+          <EmptyState
+            title="No activities yet"
+            description="Add the first one!"
+          />
+        </Box>
+      ) : (
+        <>
+          <Box paddingHorizontal="sm" paddingTop="xs" paddingBottom="xxs">
+            <Text variant="bodyXsDefault" color="gray500">
+              {activities.length}{" "}
+              {activities.length === 1 ? "activity" : "activities"} added
+            </Text>
+          </Box>
+          <FlatList
+            data={activities}
+            keyExtractor={(item) => item.id ?? ""}
+            renderItem={renderItem}
+            onEndReached={fetchMore}
+            onEndReachedThreshold={0.3}
+            ListFooterComponent={renderFooter}
+            contentContainerStyle={styles.list}
+          />
+        </>
+      )}
+
+      {/* Add an activity button */}
+      <Pressable
+        onPress={() => entrySheetRef.current?.open()}
+        style={({ pressed }) => [
+          styles.addButton,
+          pressed && { opacity: 0.8 },
+        ]}
+      >
+        <Box
+          flexDirection="row"
+          alignItems="center"
+          justifyContent="center"
+          gap="xs"
+          paddingVertical="sm"
+          borderRadius="sm"
+          style={styles.addButtonInner}
+        >
+          <Plus size={16} color={ColorPalette.gray500} />
           <Text variant="bodySmMedium" color="gray500">
-            NEW
-          </Text>
-          <Text variant="headingMd" color="gray900">
-            Create Activity
+            Add an activity
           </Text>
         </Box>
-
-        <ScrollView>
-          <Box padding="sm" gap="md">
-            <Box gap="xs">
-              <Text variant="bodySmMedium" color="gray500">
-                NAME *
-              </Text>
-              <Box
-                backgroundColor="white"
-                borderRadius="sm"
-                borderWidth={1}
-                borderColor="gray300"
-                padding="sm"
-              >
-                <TextInput
-                  value={name}
-                  onChangeText={setName}
-                  placeholder="Activity name"
-                  placeholderTextColor={ColorPalette.gray500}
-                  style={{ fontSize: 15, color: ColorPalette.gray900 }}
-                />
-              </Box>
-            </Box>
-
-            <Box gap="xs">
-              <Text variant="bodySmMedium" color="gray500">
-                DESCRIPTION
-              </Text>
-              <Box
-                backgroundColor="white"
-                borderRadius="sm"
-                borderWidth={1}
-                borderColor="gray300"
-                padding="sm"
-              >
-                <TextInput
-                  value={description}
-                  onChangeText={setDescription}
-                  placeholder="Optional description"
-                  placeholderTextColor={ColorPalette.gray500}
-                  multiline
-                  numberOfLines={3}
-                  style={{
-                    fontSize: 15,
-                    color: ColorPalette.gray900,
-                    minHeight: 72,
-                    textAlignVertical: "top",
-                  }}
-                />
-              </Box>
-            </Box>
-
-            <Box gap="xs">
-              <Text variant="bodySmMedium" color="gray500">
-                IMAGES ({imageUris.length}/5)
-              </Text>
-              <Box flexDirection="row" flexWrap="wrap" gap="xs">
-                {imageUris.map((uri, i) => (
-                  <Box
-                    key={i}
-                    width={80}
-                    height={80}
-                    borderRadius="sm"
-                    overflow="hidden"
-                  >
-                    <Image source={{ uri }} style={{ width: 80, height: 80 }} />
-                    <Pressable
-                      onPress={() => removeImage(i)}
-                      style={{
-                        position: "absolute",
-                        top: -6,
-                        right: -6,
-                        width: 20,
-                        height: 20,
-                        borderRadius: 10,
-                        backgroundColor: ColorPalette.gray900,
-                        justifyContent: "center",
-                        alignItems: "center",
-                      }}
-                    >
-                      <Text variant="bodySmMedium" color="gray900">
-                        ×
-                      </Text>
-                    </Pressable>
-                  </Box>
-                ))}
-
-                {imageUris.length < 5 && (
-                  <Pressable onPress={pickImage}>
-                    <Box
-                      width={80}
-                      height={80}
-                      borderRadius="sm"
-                      borderWidth={1}
-                      borderColor="gray300"
-                      backgroundColor="white"
-                      justifyContent="center"
-                      alignItems="center"
-                    >
-                      <Text variant="bodyDefault" color="gray500">
-                        + Add
-                      </Text>
-                    </Box>
-                  </Pressable>
-                )}
-              </Box>
-            </Box>
-
-            {isSubmitting ? (
-              <Box
-                backgroundColor="white"
-                borderRadius="sm"
-                padding="sm"
-                alignItems="center"
-              >
-                <ActivityIndicator />
-              </Box>
-            ) : (
-              <Button
-                layout="textOnly"
-                label="Create Activity"
-                variant="Primary"
-                onPress={handleCreate}
-                disabled={isSubmitting}
-              />
-            )}
-          </Box>
-        </ScrollView>
-      </Box>
-    </Screen>
+      </Pressable>
+
+      <AddActivityEntrySheet
+        ref={entrySheetRef}
+        tripID={tripID ?? ""}
+        onManual={handleManual}
+        onAutofilled={handleAutofilled}
+        onClose={() => entrySheetRef.current?.close()}
+      />
+
+      <AddActivityManualSheet
+        ref={manualSheetRef}
+        tripID={tripID ?? ""}
+        onSaved={handleSaved}
+        onClose={() => manualSheetRef.current?.close()}
+      />
+    </Box>
   );
 }
+
+const styles = StyleSheet.create({
+  list: {
+    paddingHorizontal: Layout.spacing.sm,
+    paddingVertical: Layout.spacing.xs,
+    gap: Layout.spacing.xs,
+  },
+  addButton: {
+    marginHorizontal: Layout.spacing.sm,
+    marginBottom: Layout.spacing.md,
+  },
+  addButtonInner: {
+    borderWidth: 1,
+    borderStyle: "dashed",
+    borderColor: ColorPalette.gray300,
+    backgroundColor: ColorPalette.gray50,
+  },
+});
\ No newline at end of file
diff --git a/frontend/app/(app)/trips/[id]/activities/index.tsx b/frontend/app/(app)/trips/[id]/activities/index.tsx
index 83cef9fa..7e96cb03 100644
--- a/frontend/app/(app)/trips/[id]/activities/index.tsx
+++ b/frontend/app/(app)/trips/[id]/activities/index.tsx
@@ -1,8 +1,5 @@
-import { useCreateActivity } from "@/api/activities";
 import { useActivitiesList } from "@/api/activities/custom/useActivitiesList";
-import { useEntityComments } from "@/api/comments/custom/useEntityComments";
-import { Box, Screen, Text } from "@/design-system";
-import CommentSection from "@/design-system/components/comments/comment-section";
+import { Box, EmptyState, SkeletonRect, Text } from "@/design-system";
 import { ColorPalette } from "@/design-system/tokens/color";
 import { useUser } from "@/contexts/user";
 import { modelsEntityType } from "@/types/types.gen";
@@ -20,14 +17,59 @@ import {
   Pressable,
   StyleSheet,
 } from "react-native";
+import { ActivityCard } from "./components/activity-card";
+import {
+  AddActivityEntrySheet,
+  type AddActivityEntrySheetHandle,
+} from "./components/add-activity-entry-sheet";
+import {
+  AddActivityManualSheet,
+  type AddActivityManualSheetHandle,
+} from "./components/add-activity-manual-sheet";
 
-// ─── Component ───────────────────────────────────────────────────────────────
+function ActivitiesSkeleton() {
+  return (
+    <Box gap="xs" paddingHorizontal="sm" paddingTop="sm">
+      {[1, 2, 3].map((i) => (
+        <SkeletonRect key={i} width="full" height="lg" borderRadius="sm" />
+      ))}
+    </Box>
+  );
+}
+
+export default function ActivitiesScreen() {
+  const router = useRouter();
+  const {
+    id: tripID,
+    locationName,
+    locationLat,
+    locationLng,
+  } = useLocalSearchParams<{
+    id: string;
+    locationName?: string;
+    locationLat?: string;
+    locationLng?: string;
+  }>();
 
-export default function Activities() {
-  const { id: tripID } = useLocalSearchParams<{ id: string }>();
-  const { currentUser } = useUser();
+  const entrySheetRef = useRef<AddActivityEntrySheetHandle>(null);
+  const manualSheetRef = useRef<AddActivityManualSheetHandle>(null);
 
-  const [activeActivityId, setActiveActivityId] = useState<string | null>(null);
+  // Consume location params returned from search-location modal
+  useEffect(() => {
+    if (locationName && locationLat && locationLng) {
+      manualSheetRef.current?.setLocation({
+        name: locationName,
+        lat: parseFloat(locationLat),
+        lng: parseFloat(locationLng),
+      });
+      router.setParams({
+        locationName: undefined,
+        locationLat: undefined,
+        locationLng: undefined,
+      });
+      manualSheetRef.current?.open();
+    }
+  }, [locationName, locationLat, locationLng, router]);
 
   const { activities, isLoading, isLoadingMore, fetchMore, prependActivity } =
     useActivitiesList(tripID);
@@ -43,126 +85,80 @@ export default function Activities() {
         if (data) prependActivity(data);
       },
     },
-  });
-
-  const handleCreateActivity = () => {
-    if (!tripID) return;
-    const count = activities.length + 1;
-    createActivity({
-      tripID,
-      data: {
-        name: `Test Activity ${count}`,
-        description: "Created for comment testing",
-      },
-    });
-  };
+    [prependActivity],
+  );
 
-  const {
-    comments,
-    isLoading: isLoadingComments,
-    isLoadingMore: isLoadingMoreComments,
-    fetchNextPage,
-    onSubmitComment,
-    onReact,
-  } = useEntityComments({
-    tripID: tripID ?? "",
-    entityType: modelsEntityType.ActivityEntity,
-    entityID: activeActivityId ?? "",
-    enabled: !!activeActivityId && !!tripID,
-  });
+  const renderItem = useCallback(
+    ({ item }: { item: ModelsActivityAPIResponse }) => (
+      <ActivityCard activity={item} />
+    ),
+    [],
+  );
 
   const renderFooter = useCallback(
     () =>
       isLoadingMore ? (
         <Box paddingVertical="sm" alignItems="center">
-          <ActivityIndicator size="small" color={ColorPalette.gray500} />
+          <ActivityIndicator size="small" />
         </Box>
       ) : null,
     [isLoadingMore],
   );
 
-  const renderItem = useCallback(
-    ({ item }: { item: ModelsActivity }) => (
-      <Box
-        backgroundColor="white"
-        borderRadius="md"
-        padding="md"
-        gap="sm"
-        marginHorizontal="sm"
-      >
-        <Text variant="headingSm" color="gray900" numberOfLines={1}>
-          {item.name ?? "Unnamed Activity"}
-        </Text>
-        {item.description ? (
-          <Text variant="bodySmDefault" color="gray500" numberOfLines={2}>
-            {item.description}
-          </Text>
-        ) : null}
-
-        <Box height={1} backgroundColor="gray100" />
+  return (
+    <Box flex={1} backgroundColor="gray50">
+      {isLoading ? (
+        <ActivitiesSkeleton />
+      ) : activities.length === 0 ? (
+        <Box flex={1} alignItems="center" justifyContent="center">
+          <EmptyState
+            title="No activities yet"
+            description="Add the first one!"
+          />
+        </Box>
+      ) : (
+        <>
+          <Box paddingHorizontal="sm" paddingTop="xs" paddingBottom="xxs">
+            <Text variant="bodyXsDefault" color="gray500">
+              {activities.length}{" "}
+              {activities.length === 1 ? "activity" : "activities"} added
+            </Text>
+          </Box>
+          <FlatList
+            data={activities}
+            keyExtractor={(item) => item.id ?? ""}
+            renderItem={renderItem}
+            onEndReached={fetchMore}
+            onEndReachedThreshold={0.3}
+            ListFooterComponent={renderFooter}
+            contentContainerStyle={styles.list}
+          />
+        </>
+      )}
 
-        <Pressable
-          onPress={() => setActiveActivityId(item.id ?? null)}
-          style={({ pressed }) => [
-            styles.commentButton,
-            pressed && styles.commentButtonPressed,
-          ]}
-          accessibilityLabel="Open comments"
+      {/* Add an activity button */}
+      <Pressable
+        onPress={() => entrySheetRef.current?.open()}
+        style={({ pressed }) => [
+          styles.addButton,
+          pressed && { opacity: 0.8 },
+        ]}
+      >
+        <Box
+          flexDirection="row"
+          alignItems="center"
+          justifyContent="center"
+          gap="xs"
+          paddingVertical="sm"
+          borderRadius="sm"
+          style={styles.addButtonInner}
         >
-          <MessageCircle size={16} color={ColorPalette.gray500} />
-          <Text variant="bodyXsMedium" color="gray500">
-            Comments
+          <Plus size={16} color={ColorPalette.gray500} />
+          <Text variant="bodySmMedium" color="gray500">
+            Add an activity
           </Text>
-        </Pressable>
-      </Box>
-    ),
-    [],
-  );
-
-  return (
-    <Screen>
-      <Box flex={1} backgroundColor="gray50">
-        <FlatList
-          data={activities}
-          keyExtractor={(item) => item.id ?? ""}
-          renderItem={renderItem}
-          onEndReached={fetchMore}
-          onEndReachedThreshold={0.3}
-          ListFooterComponent={renderFooter}
-          contentContainerStyle={styles.listContent}
-          ListHeaderComponent={
-            <Box gap="sm">
-              <Box
-                padding="lg"
-                paddingTop="xl"
-                backgroundColor="white"
-                gap="xs"
-              >
-                <Text variant="headingMd" color="gray900">
-                  Activities
-                </Text>
-              </Box>
-
-              <Pressable
-                onPress={handleCreateActivity}
-                disabled={isCreating || !tripID}
-                style={({ pressed }) => [
-                  styles.createButton,
-                  (pressed || isCreating) && styles.createButtonPressed,
-                ]}
-              >
-                {isCreating ? (
-                  <ActivityIndicator
-                    size="small"
-                    color={ColorPalette.gray900}
-                  />
-                ) : (
-                  <Plus size={18} color={ColorPalette.gray900} />
-                )}
-                <Text variant="bodySmMedium" color="gray900">
-                  Create Activity
-                </Text>
-              </Pressable>
+        </Box>
+      </Pressable>
 
               <Pressable
                 onPress={() =>
@@ -225,22 +221,15 @@ export default function Activities() {
   );
 }
 
-// ─── Styles ──────────────────────────────────────────────────────────────────
-
 const styles = StyleSheet.create({
-  listContent: {
-    gap: 8,
-    paddingBottom: 24,
+  list: {
+    paddingHorizontal: Layout.spacing.sm,
+    paddingVertical: Layout.spacing.xs,
+    gap: Layout.spacing.xs,
   },
-  createButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 8,
-    marginHorizontal: 12,
-    paddingVertical: 12,
-    borderRadius: 10,
-    backgroundColor: ColorPalette.brand500,
+  addButton: {
+    marginHorizontal: Layout.spacing.sm,
+    marginBottom: Layout.spacing.md,
   },
   createButtonPressed: {
     opacity: 0.75,
@@ -271,7 +260,4 @@ const styles = StyleSheet.create({
     borderRadius: 20,
     backgroundColor: ColorPalette.gray50,
   },
-  commentButtonPressed: {
-    opacity: 0.7,
-  },
-});
+});
\ No newline at end of file
diff --git a/frontend/app/(app)/trips/[id]/search-location.tsx b/frontend/app/(app)/trips/[id]/search-location.tsx
index 23af7570..a66900d6 100644
--- a/frontend/app/(app)/trips/[id]/search-location.tsx
+++ b/frontend/app/(app)/trips/[id]/search-location.tsx
@@ -136,14 +136,13 @@ export default function SearchLocationScreen() {
           onDismiss={() => router.back()}
           isLoading={isLoadingPredictions}
         />
-
         {showPredictions ? (
           <PredictionsList
             predictions={predictions}
             onSelect={handleSelectPrediction}
           />
         ) : showMap ? (
-          <LocationMapView location={selectedLocation} />
+          <LocationMapView location={selectedLocation!} />
         ) : isLoadingDetails ? (
           <Box flex={1} justifyContent="center" alignItems="center">
             <ActivityIndicator size="large" color={ColorPalette.brand500} />
@@ -213,7 +212,6 @@ function SearchHeader({
           </TouchableOpacity>
         )}
       </Box>
-
       <TextField
         value={query}
         onChangeText={onChangeQuery}
@@ -237,7 +235,7 @@ function PredictionsList({
   onSelect,
 }: {
   predictions: Prediction[];
-  onSelect: (prediction: Prediction) => void;
+  onSelect: (p: Prediction) => void;
 }) {
   return (
     <FlatList
@@ -261,7 +259,6 @@ function PredictionsList({
       ItemSeparatorComponent={() => (
         <Box style={styles.separator} backgroundColor="gray50" />
       )}
-      style={styles.predictionsList}
     />
   );
 }
@@ -273,7 +270,6 @@ function LocationMapView({ location }: { location: LocationDetails }) {
     location.geometry.location.lng,
     location.geometry.location.lat,
   ];
-
   return (
     <View style={styles.mapContainer}>
       <MapView
@@ -294,7 +290,6 @@ function LocationMapView({ location }: { location: LocationDetails }) {
           </View>
         </PointAnnotation>
       </MapView>
-
       <View style={styles.locationLabel} pointerEvents="none">
         <Box
           backgroundColor="white"
@@ -311,7 +306,7 @@ function LocationMapView({ location }: { location: LocationDetails }) {
   );
 }
 
-// ─── Styles ───────────────────────────────────────────────────────────────────
+// ─── Styles ──────────────────────────────────────────────────────────────────
 
 const styles = StyleSheet.create({
   header: {
diff --git a/frontend/assets/images/binoculars.png b/frontend/assets/images/binoculars.png
new file mode 100644
index 00000000..7d999acd
Binary files /dev/null and b/frontend/assets/images/binoculars.png differ