diff --git a/components/reviews/singleReview.vue b/components/reviews/singleReview.vue
new file mode 100644
index 0000000..342f65d
--- /dev/null
+++ b/components/reviews/singleReview.vue
@@ -0,0 +1,122 @@
+<script lang="ts" setup>
+	import { Form as veeForm, Field as veeField, useForm } from "vee-validate";
+	import { IReview } from "~/models/stories/review";
+	import { comment } from "~/lib/client/editorConfig";
+	import { SingleChapterResult } from "~/lib/client/types/slightlyDifferentStory";
+	const props = defineProps<{ review: IReview; story: SingleChapterResult }>();
+	const review = toRef(props.review);
+	const story = toRef(props.story);
+	const { data } = useAuth();
+	const isCommentAuthor = computed(() => {
+		return data?.value?.user?._id === props.review.author._id;
+	});
+	const isAuthor = computed(() => {
+		return props.story.author._id === data?.value?.user?._id;
+	});
+	const replyFormVisible = ref<boolean>(false);
+	const isEditing = ref<boolean>(false);
+	const editSubmit = async (values) => {
+		const { data } = await useApiFetch<any>(`/review/${props.review._id}`, {
+			method: "put",
+			body: values,
+		});
+		review.value.text = data.value.data.text;
+		isEditing.value = false;
+	};
+
+	const replySubmit = async (values) => {
+		const { data } = await useApiFetch<any>(
+			`/review/${props.review._id}/reply`,
+			{
+				method: "post",
+				body: values,
+			},
+		);
+		review.value.replies.push(data.value.data);
+		replyFormVisible.value = false;
+	};
+
+	const reallyDelete = async () => {
+		await useApiFetch(`/review/${props.review._id}`, {
+			method: "delete",
+		});
+	};
+
+	// const { handleSubmit } = useForm()
+</script>
+
+<template>
+	<a-comment>
+		<template #actions>
+			<div v-if="!!data?.user" class="review-actions">
+				<a-button
+					v-if="isCommentAuthor"
+					@click="() => (isEditing = !isEditing)"
+				>
+					Edit
+				</a-button>
+				<a-popconfirm
+					title="Are you sure you want to permanently delete this review?"
+					ok-text="Yes"
+					cancel-text="Never mind"
+					@confirm="reallyDelete"
+					v-if="isCommentAuthor || isAuthor"
+				>
+					<a-button> Delete </a-button>
+				</a-popconfirm>
+				<a-button
+					v-if="isAuthor"
+					type="primary"
+					@click="() => (replyFormVisible = !replyFormVisible)"
+				>
+					Reply
+				</a-button>
+			</div>
+		</template>
+		<template #author>
+			<b style="display: flex">
+				<span v-if="review.replyingTo == null">Review by&nbsp;</span>
+				<span v-else> Response from&nbsp; </span>
+				<nuxt-link :to="`/user/${review.author._id}`">
+					{{ review.author.username }}
+				</nuxt-link>
+			</b>
+		</template>
+		<template #content>
+			<div>
+				<vee-form @submit="editSubmit" v-if="isEditing">
+					<vee-field name="content" v-slot="{ value, field, errorMessage }">
+						<base-editor
+							:val="review.text"
+							:width="150"
+							label=""
+							:name="field.name"
+							:init="comment"
+						/>
+					</vee-field>
+					<a-button type="primary" html-type="submit"> Edit review </a-button>
+				</vee-form>
+				<div v-else v-html="review.text" />
+				<vee-form @submit="replySubmit" v-if="replyFormVisible">
+					<vee-field name="content" v-slot="{ value, field, errorMessage }">
+						<base-editor
+							:width="150"
+							label=""
+							:name="field.name"
+							:init="comment"
+						/>
+					</vee-field>
+					<a-button type="primary" html-type="submit"> Post response </a-button>
+				</vee-form>
+			</div>
+		</template>
+		<div v-for="reply in review.replies">
+			<single-review :review="reply" :story="story" />
+		</div>
+	</a-comment>
+</template>
+<style scoped>
+	.review-actions > * + * {
+		margin-left: 0.4em;
+	}
+</style>