diff --git a/components/story/atoms/actions.vue b/components/story/atoms/actions.vue
new file mode 100644
index 0000000..03a2d2f
--- /dev/null
+++ b/components/story/atoms/actions.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+	import { theme } from "ant-design-vue";
+	import { IStory } from "@models/stories";
+	import { deleteStory } from "@client/storyActions";
+	const props = defineProps<{ story: IStory }>();
+</script>
+
+<template>
+	<a-popconfirm title="Are you sure you want to delete this story?" @confirm="() => deleteStory(story._id!)">
+		<a-tooltip title="Delete">
+			<a-button type="ghost">
+				<icon istyle="regular" name="trash" :icolor="theme.useToken().token.value.colorError" />
+			</a-button>
+		</a-tooltip>
+	</a-popconfirm>
+	<a-tooltip title="Edit">
+		<a-button type="ghost" @click="$router.push(`/story/${story._id}/edit`)">
+			<icon istyle="regular" name="pen-to-square" />
+		</a-button>
+	</a-tooltip>
+	<a-tooltip title="View">
+		<a-button type="ghost" @click="$router.push(`/story/${story._id}/${story.chapters.length}`)">
+			<icon istyle="regular" name="eye" />
+		</a-button>
+	</a-tooltip>
+</template>
+
+<style scoped></style>
diff --git a/lib/client/storyActions.ts b/lib/client/storyActions.ts
new file mode 100644
index 0000000..53191bd
--- /dev/null
+++ b/lib/client/storyActions.ts
@@ -0,0 +1,6 @@
+import { useApiFetch } from "#imports";
+
+export async function deleteStory(id: number) {
+	await useApiFetch(`/story/${id}`, { method: "delete" });
+	await navigateTo("/my-stuff/stories");
+}