diff --git a/apps/mobile/src/components/common/SwipeableItem.tsx b/apps/mobile/src/components/common/SwipeableItem.tsx
new file mode 100644
index 0000000000..ac9963d253
--- /dev/null
+++ b/apps/mobile/src/components/common/SwipeableItem.tsx
@@ -0,0 +1,248 @@
+import { atom, useAtomValue, useSetAtom } from "jotai"
+import { selectAtom } from "jotai/utils"
+import * as React from "react"
+import { Animated, StyleSheet, Text, View } from "react-native"
+import { RectButton, Swipeable } from "react-native-gesture-handler"
+
+interface Action {
+  label: string
+  icon?: React.ReactNode
+  backgroundColor?: string
+  onPress?: () => void
+  color?: string
+}
+
+interface SwipeableItemProps {
+  children: React.ReactNode
+  leftActions?: Action[]
+  rightActions?: Action[]
+  disabled?: boolean
+}
+
+const styles = StyleSheet.create({
+  absoluteFill: {
+    ...StyleSheet.absoluteFillObject,
+  },
+  actionContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  animatedContainer: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+  },
+  actionsWrapper: {
+    flexDirection: "row",
+  },
+  actionText: {
+    color: "#fff",
+  },
+})
+
+export const SwipeableItem: React.FC<SwipeableItemProps> = ({
+  children,
+  leftActions,
+  rightActions,
+  disabled,
+}) => {
+  const [leftHaptic, setLeftHaptic] = React.useState(false)
+  const [rightHaptic, setRightHaptic] = React.useState(false)
+  const itemRef = React.useRef<Swipeable | null>(null)
+
+  const renderLeftActions = (progress: Animated.AnimatedInterpolation<number>) => {
+    const width = leftActions?.length ? leftActions.length * 74 : 74
+
+    return (
+      <>
+        <View
+          style={[
+            styles.absoluteFill,
+            {
+              backgroundColor: leftActions?.[0]?.backgroundColor ?? "#fff",
+            },
+          ]}
+        />
+        <Animated.View style={[styles.actionsWrapper, { width }]}>
+          {leftActions?.map((action, index) => {
+            const trans = progress.interpolate({
+              inputRange: [0, 1],
+              outputRange: [-74 * (leftHaptic ? (leftActions?.length ?? 1) : index + 1), 0],
+            })
+
+            if (index === 0) {
+              trans.addListener(({ value }) => {
+                if (value >= (leftActions?.length === 1 ? 40 : 20)) {
+                  setLeftHaptic(true)
+                } else {
+                  leftHaptic && setLeftHaptic(false)
+                }
+              })
+            }
+
+            return (
+              <Animated.View
+                key={index}
+                style={[
+                  styles.animatedContainer,
+                  {
+                    transform: [{ translateX: trans }],
+                    width: leftHaptic && index === 0 ? "100%" : 74,
+                    left: index * 74,
+                  },
+                ]}
+              >
+                <RectButton
+                  style={[
+                    styles.actionContainer,
+                    {
+                      backgroundColor: action.backgroundColor ?? "#fff",
+                    },
+                  ]}
+                  onPress={action.onPress}
+                >
+                  {action.icon}
+                  <Text style={[styles.actionText, { color: action.color ?? "#fff" }]}>
+                    {action.label}
+                  </Text>
+                </RectButton>
+              </Animated.View>
+            )
+          })}
+        </Animated.View>
+      </>
+    )
+  }
+
+  const renderRightActions = (progress: Animated.AnimatedInterpolation<number>) => {
+    const width = rightActions?.length ? rightActions.length * 74 : 74
+
+    return (
+      <>
+        <View
+          style={[
+            styles.absoluteFill,
+            {
+              backgroundColor: rightActions?.[0]?.backgroundColor ?? "#fff",
+            },
+          ]}
+        />
+        <Animated.View style={[styles.actionsWrapper, { width }]}>
+          {rightActions?.map((action, index) => {
+            const trans = progress.interpolate({
+              inputRange: [0, 1],
+              outputRange: [74 * (rightHaptic ? (rightActions?.length ?? 1) : index + 1), 0],
+            })
+
+            if (index === 0) {
+              trans.addListener(({ value }) => {
+                if (value <= (rightActions?.length === 1 ? -40 : -20)) {
+                  setRightHaptic(true)
+                } else {
+                  rightHaptic && setRightHaptic(false)
+                }
+              })
+            }
+
+            return (
+              <Animated.View
+                key={index}
+                style={[
+                  styles.animatedContainer,
+                  {
+                    transform: [{ translateX: trans }],
+                    width: rightHaptic && index === 0 ? "100%" : 74,
+                    left: index * 74,
+                  },
+                ]}
+              >
+                <RectButton
+                  style={[
+                    styles.actionContainer,
+                    {
+                      backgroundColor: action.backgroundColor ?? "#fff",
+                    },
+                  ]}
+                  onPress={action.onPress}
+                >
+                  {action.icon}
+                  <Text style={styles.actionText}>{action.label}</Text>
+                </RectButton>
+              </Animated.View>
+            )
+          })}
+        </Animated.View>
+      </>
+    )
+  }
+
+  const id = React.useId()
+  const { swipeableOpenedId } = React.useContext(SwipeableGroupContext)
+
+  const setAtom = useSetAtom(swipeableOpenedId)
+  const isOpened = useAtomValue(
+    React.useMemo(
+      () => selectAtom(swipeableOpenedId, (value) => value === id),
+      [id, swipeableOpenedId],
+    ),
+  )
+
+  React.useEffect(() => {
+    if (!isOpened) {
+      itemRef.current?.close()
+    }
+  }, [isOpened])
+
+  return (
+    <Swipeable
+      ref={itemRef}
+      enabled={!disabled}
+      friction={1}
+      onSwipeableWillOpen={() => {
+        setAtom(id)
+      }}
+      leftThreshold={37}
+      rightThreshold={37}
+      enableTrackpadTwoFingerGesture
+      useNativeAnimations
+      onEnded={(e: any) => {
+        const { translationX } = e.nativeEvent
+        if (
+          leftHaptic &&
+          translationX >= (leftActions?.length === 1 ? 100 : 60) * (leftActions?.length ?? 1)
+        ) {
+          leftActions?.[0]?.onPress?.()
+        }
+        if (
+          rightHaptic &&
+          translationX <= (rightActions?.length === 1 ? -100 : -60) * (rightActions?.length ?? 1)
+        ) {
+          rightActions?.[0]?.onPress?.()
+        }
+      }}
+      renderLeftActions={leftActions?.length ? renderLeftActions : undefined}
+      renderRightActions={rightActions?.length ? renderRightActions : undefined}
+      overshootLeft={leftActions?.length ? leftActions?.length >= 1 : undefined}
+      overshootRight={rightActions?.length ? rightActions?.length >= 1 : undefined}
+      overshootFriction={3}
+    >
+      {children}
+    </Swipeable>
+  )
+}
+
+const SwipeableGroupContext = React.createContext({
+  swipeableOpenedId: atom(""),
+})
+
+export const SwipeableGroupProvider = ({ children }: { children: React.ReactNode }) => {
+  const ctx = React.useMemo(
+    () => ({
+      swipeableOpenedId: atom(""),
+    }),
+    [],
+  )
+
+  return <SwipeableGroupContext.Provider value={ctx}>{children}</SwipeableGroupContext.Provider>
+}
diff --git a/apps/mobile/src/modules/settings/routes/Lists.tsx b/apps/mobile/src/modules/settings/routes/Lists.tsx
index ec098bb3b1..19b44b48b5 100644
--- a/apps/mobile/src/modules/settings/routes/Lists.tsx
+++ b/apps/mobile/src/modules/settings/routes/Lists.tsx
@@ -26,6 +26,8 @@ import type { HonoApiClient } from "@/src/morph/types"
 import { listSyncServices } from "@/src/store/list/store"
 import { accentColor } from "@/src/theme/colors"
 
+import { SwipeableGroupProvider, SwipeableItem } from "../../../components/common/SwipeableItem"
+
 export const ListsScreen = () => {
   const { isLoading, data } = useQuery({
     queryKey: ["owned", "lists"],
@@ -54,22 +56,22 @@ export const ListsScreen = () => {
           />
         </GroupedInsetListCard>
       </View>
-
       <View className="mt-6">
         {data && (
           <GroupedInsetListCard>
-            <Animated.FlatList
-              keyExtractor={keyExtractor}
-              itemLayoutAnimation={LinearTransition}
-              scrollEnabled={false}
-              data={data}
-              renderItem={ListItemCell}
-              ItemSeparatorComponent={ItemSeparatorComponent}
-            />
+            <SwipeableGroupProvider>
+              <Animated.FlatList
+                keyExtractor={keyExtractor}
+                itemLayoutAnimation={LinearTransition}
+                scrollEnabled={false}
+                data={data}
+                renderItem={ListItemCell}
+                ItemSeparatorComponent={ItemSeparatorComponent}
+              />
+            </SwipeableGroupProvider>
           </GroupedInsetListCard>
         )}
       </View>
-
       {isLoading && (
         <View className="flex-1 items-center justify-center">
           <LoadingIndicator />
@@ -102,61 +104,73 @@ const keyExtractor = (item: HonoApiClient.List_List_Get) => item.id
 const ListItemCell: ListRenderItem<HonoApiClient.List_List_Get> = ({ item: list }) => {
   const { title, description } = list
   return (
-    <View className="flex-row p-4">
-      <View className="size-16 overflow-hidden rounded-lg">
-        {list.image ? (
-          <Image source={{ uri: list.image }} resizeMode="cover" className="size-full" />
-        ) : (
-          <FallbackIcon title={list.title || ""} size="100%" textStyle={styles.title} />
-        )}
-      </View>
-      <View className="ml-4 flex-1">
-        <Text
-          className="text-label text-lg font-semibold leading-tight"
-          numberOfLines={1}
-          ellipsizeMode="middle"
-        >
-          {title}
-        </Text>
-        <Text className="text-secondary-label text-base" numberOfLines={4}>
-          {description}
-        </Text>
-        <View className="flex-row items-center gap-1">
-          {!!views[list.view]?.icon &&
-            createElement(views[list.view]!.icon, {
-              color: views[list.view]!.activeColor,
-              height: 16,
-              width: 16,
-            })}
-          <Text className="text-secondary-label text-base">{views[list.view]?.name}</Text>
+    <SwipeableItem
+      rightActions={[
+        {
+          label: "Edit",
+          onPress: () => {
+            // TODO
+          },
+          backgroundColor: "#0ea5e9",
+        },
+      ]}
+    >
+      <View className="bg-secondary-system-grouped-background flex-row p-4">
+        <View className="size-16 overflow-hidden rounded-lg">
+          {list.image ? (
+            <Image source={{ uri: list.image }} resizeMode="cover" className="size-full" />
+          ) : (
+            <FallbackIcon title={list.title || ""} size="100%" textStyle={styles.title} />
+          )}
         </View>
-      </View>
-
-      <View
-        className="bg-opaque-separator mx-4 h-full"
-        style={{ width: StyleSheet.hairlineWidth }}
-      />
-      <View className="w-16 gap-1">
-        <View className="flex-row items-center gap-1">
-          <PowerIcon height={16} width={16} color={accentColor} />
-          <Text className="text-secondary-label text-sm">{list.fee}</Text>
+        <View className="ml-4 flex-1">
+          <Text
+            className="text-label text-lg font-semibold leading-tight"
+            numberOfLines={1}
+            ellipsizeMode="middle"
+          >
+            {title}
+          </Text>
+          <Text className="text-secondary-label text-base" numberOfLines={4}>
+            {description}
+          </Text>
+          <View className="flex-row items-center gap-1">
+            {!!views[list.view]?.icon &&
+              createElement(views[list.view]!.icon, {
+                color: views[list.view]!.activeColor,
+                height: 16,
+                width: 16,
+              })}
+            <Text className="text-secondary-label text-base">{views[list.view]?.name}</Text>
+          </View>
         </View>
 
-        <View className="flex-row items-center gap-1">
-          <UserAdd2CuteFiIcon height={16} width={16} color={accentColor} />
-          <Text className="text-secondary-label text-sm">{list.subscriptionCount || 0}</Text>
-        </View>
+        <View
+          className="bg-opaque-separator mx-4 h-full"
+          style={{ width: StyleSheet.hairlineWidth }}
+        />
+        <View className="w-16 gap-1">
+          <View className="flex-row items-center gap-1">
+            <PowerIcon height={16} width={16} color={accentColor} />
+            <Text className="text-secondary-label text-sm">{list.fee}</Text>
+          </View>
 
-        {!!list.purchaseAmount && (
           <View className="flex-row items-center gap-1">
-            <Wallet2CuteFiIcon height={16} width={16} color={accentColor} />
-            <Balance className="text-secondary-label text-sm">
-              {BigInt(list.purchaseAmount)}
-            </Balance>
+            <UserAdd2CuteFiIcon height={16} width={16} color={accentColor} />
+            <Text className="text-secondary-label text-sm">{list.subscriptionCount || 0}</Text>
           </View>
-        )}
+
+          {!!list.purchaseAmount && (
+            <View className="flex-row items-center gap-1">
+              <Wallet2CuteFiIcon height={16} width={16} color={accentColor} />
+              <Balance className="text-secondary-label text-sm">
+                {BigInt(list.purchaseAmount)}
+              </Balance>
+            </View>
+          )}
+        </View>
       </View>
-    </View>
+    </SwipeableItem>
   )
 }