diff --git a/src/components/TravelListItem.tsx b/src/components/TravelListItem.tsx
new file mode 100644
index 00000000..c28b3c33
--- /dev/null
+++ b/src/components/TravelListItem.tsx
@@ -0,0 +1,25 @@
+import type { TravelMetadata } from "@/travel";
+import { Button } from "./ui/button";
+import type { MouseEventHandler } from "react";
+import { cn } from "@/lib/utils";
+
+export function TravelListItem({
+	metadata,
+	onClick,
+}: {
+	metadata: TravelMetadata;
+	onClick: MouseEventHandler<HTMLButtonElement>;
+}) {
+	return (
+		<Button
+			className={cn(
+				"text-sm border cursor-pointer hover:border-accent justify-start",
+			)}
+			onClick={onClick}
+			variant="dummy"
+			size="sm"
+		>
+			{metadata.city}, {metadata.country} - {metadata.date}
+		</Button>
+	);
+}