diff --git a/components/reviews/forChapter.vue b/components/reviews/forChapter.vue
new file mode 100644
index 0000000..ee26639
--- /dev/null
+++ b/components/reviews/forChapter.vue
@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+	import { IReview } from "~/models/stories/review";
+	import singleReview from "./singleReview.vue";
+	import { SingleChapterResult } from "~/lib/client/types/slightlyDifferentStory";
+	const props = defineProps<{ endpoint: string }>();
+	const story = inject<SingleChapterResult>("story");
+	const { data: reviews } = (await useApiFetch<IReview[]>(
+		`${props.endpoint}/reviews`,
+	)) as unknown as {
+		data: IReview[];
+	};
+</script>
+<template>
+	<div v-for="comment in reviews">
+		<single-review :review="comment" :story="story!" />
+	</div>
+</template>
diff --git a/pages/story/[id]/[cidx]/index.vue b/pages/story/[id]/[cidx]/index.vue
new file mode 100644
index 0000000..4f35356
--- /dev/null
+++ b/pages/story/[id]/[cidx]/index.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+	import { SingleChapterResult } from "~/lib/client/types/slightlyDifferentStory";
+	import { theme } from "ant-design-vue";
+	import { storyMiddleware } from "~/lib/client/middleware";
+	import forChapter from "~/components/reviews/forChapter.vue";
+	import storyInfo from "~/components/story/view/storyInfo.vue";
+	import chapterPicker from "~/components/story/view/chapterPicker.vue";
+
+	const { useToken } = theme;
+	const { token } = useToken();
+	definePageMeta({
+		middleware: [storyMiddleware],
+	});
+	const rtr = useRoute();
+	const { data: story, error } = await useApiFetch<SingleChapterResult>(
+		`/story/${rtr.params.id}/${rtr.params.cidx}`,
+	);
+	provide<SingleChapterResult | null>("story", story.value);
+	console.log("storyyy", story.value?.currentChapter);
+	console.log(rtr);
+	let dark = inject<boolean>("dark");
+	useHead({
+		title: `"${story.value.title}" by ${story.value.author.username}`,
+	});
+</script>
+<template>
+	<a-typography-title>
+		{{ story?.title }}
+	</a-typography-title>
+	<story-info />
+	<div>
+		<a-card
+			:style="{
+				backgroundColor: dark ? 'rgb(191, 54, 67)' : token.colorError,
+				display: 'flow-root',
+				color: '#fff',
+			}"
+		>
+			<div>
+				<a-typography-title :level="2"> Disclaimer </a-typography-title>
+				<a-divider style="background-color: #fff" />
+				{{ story.author.profile.disclaimer }}
+			</div>
+		</a-card>
+		<a-typography-title :level="3">
+			{{ story.currentChapter.title }}
+		</a-typography-title>
+		<chapter-picker v-if="story.totalChapters > 1" />
+		<div style="display: flow-root">
+			<a-divider />
+		</div>
+		<div v-html="story?.currentChapter.text"></div>
+		<a-divider style="background-color: #fff" />
+		<a-button-group size="large" v-if="story.totalChapters > 1">
+			<a-button
+				v-if="parseInt(rtr.params.cidx as string) > 1"
+				@click="() => navigateTo(`/story/${rtr.params.id}/1`)"
+			>
+				First
+			</a-button>
+			<a-button
+				v-if="parseInt(rtr.params.cidx as string) > 1"
+				@click="
+					() =>
+						navigateTo(
+							`/story/${rtr.params.id}/${
+								parseInt(rtr.params.cidx as string) - 1
+							}`,
+						)
+				"
+			>
+				Previous
+			</a-button>
+			<a-button
+				v-if="
+					parseInt(rtr.params.cidx as string) < story.chapterNames.length - 1
+				"
+				@click="
+					() =>
+						navigateTo(
+							`/story/${rtr.params.id}/${
+								parseInt(rtr.params.cidx as string) + 1
+							}`,
+						)
+				"
+			>
+				Next
+			</a-button>
+			<a-button
+				@click="
+					() =>
+						navigateTo(`/story/${rtr.params.id}/${story.chapterNames.length}`)
+				"
+				v-if="
+					parseInt(rtr.params.cidx as string) < story.chapterNames.length - 1
+				"
+			>
+				Last
+			</a-button>
+		</a-button-group>
+		<a-typography-title style="text-align: center" :level="2">
+			Reviews
+		</a-typography-title>
+		<for-chapter :endpoint="`/story/${rtr.params.id}/${rtr.params.cidx}`" />
+	</div>
+</template>