diff --git a/app/src/components/ResolverCard.tsx b/app/src/components/ResolverCard.tsx
new file mode 100644
index 0000000..87406a1
--- /dev/null
+++ b/app/src/components/ResolverCard.tsx
@@ -0,0 +1,33 @@
+import type { JSX } from "react";
+import { Pressable, View } from "react-native";
+import { Typography } from "heroui-native";
+import type { Resolver } from "@/data/mock";
+
+interface ResolverCardProps {
+  resolver: Resolver;
+  isSelected: boolean;
+  onSelect: () => void;
+}
+
+export function ResolverCard({ resolver, isSelected, onSelect }: ResolverCardProps): JSX.Element {
+  return (
+    <Pressable
+      onPress={onSelect}
+      className={`mb-1.5 rounded-xl border p-3 ${
+        isSelected ? "border-accent bg-accent/10" : "border-border bg-transparent"
+      }`}
+    >
+      <View className="flex-row items-center justify-between">
+        <Typography type="body-sm" weight="semibold" className={isSelected ? "text-accent" : undefined}>
+          {resolver.name}
+        </Typography>
+        <Typography type="body-sm" weight="semibold" className={isSelected ? "text-accent" : undefined}>
+          {resolver.fee}
+        </Typography>
+      </View>
+      <Typography type="body-xs" color="muted" className="mt-0.5">
+        {resolver.type} · {resolver.wins}% buyer-favorable
+      </Typography>
+    </Pressable>
+  );
+}