diff --git a/app/src/components/AppHeader.tsx b/app/src/components/AppHeader.tsx
new file mode 100644
index 0000000..009d010
--- /dev/null
+++ b/app/src/components/AppHeader.tsx
@@ -0,0 +1,25 @@
+import type { JSX } from "react";
+import { Pressable, View } from "react-native";
+import { useRouter } from "expo-router";
+import { Ionicons } from "@expo/vector-icons";
+import { Typography, useThemeColor } from "heroui-native";
+
+interface AppHeaderProps {
+  title: string;
+}
+
+export function AppHeader({ title }: AppHeaderProps): JSX.Element {
+  const router = useRouter();
+  const foreground = useThemeColor("foreground");
+
+  return (
+    <View className="flex-row items-center gap-2 px-4 py-3 md:hidden">
+      <Pressable onPress={() => router.back()} hitSlop={8} className="p-1">
+        <Ionicons name="chevron-back" size={22} color={foreground} />
+      </Pressable>
+      <Typography type="h6" numberOfLines={1} className="flex-1">
+        {title}
+      </Typography>
+    </View>
+  );
+}