diff --git a/components/story/view/chapterPicker.vue b/components/story/view/chapterPicker.vue
new file mode 100644
index 0000000..4657804
--- /dev/null
+++ b/components/story/view/chapterPicker.vue
@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+	import { LabeledValue } from "ant-design-vue/es/select";
+	import { SingleChapterResult } from "~/lib/client/types/slightlyDifferentStory";
+
+	const { params } = useRoute();
+	const cidx = parseInt(params.cidx as string);
+	const story = inject<SingleChapterResult | null>("story")!;
+	const opts = ref<LabeledValue[]>(
+		story!.chapterNames.map(
+			(s, i) =>
+				({
+					label: s,
+					value: i + 1,
+				}) as LabeledValue,
+		),
+	);
+	const onChange = (v) => {
+		console.log("SELECT", v);
+		navigateTo(`/story/${story._id}/${v as LabeledValue}`);
+	};
+</script>
+
+<template>
+	<div style="display: flow-root">
+		<a-select :value="opts[cidx - 1]" @select="onChange" :options="opts" />
+	</div>
+</template>
+
+<style scoped>
+	.ant-select {
+		width: 100%;
+	}
+</style>