diff --git a/components/listings/singleStory.vue b/components/listings/singleStory.vue
index 9e91c7a..a002d2b 100644
--- a/components/listings/singleStory.vue
+++ b/components/listings/singleStory.vue
@@ -10,12 +10,13 @@
 	const { token } = useToken();
 	const dark = inject<Ref<boolean>>("dark");
 	const { data } = useAuth();
-	let prop = defineProps<{ story: IStory; last?: boolean; showActions?: boolean }>();
-	const idxo = (prop.last || false ? prop.story.chapters.length : 1) - 1;
+	const story = defineModel<IStory>("story", { required: true });
+	let prop = defineProps<{ last?: boolean; showActions?: boolean }>();
+	const idxo = computed(() => (prop.last || false ? story.value.chapters.length : 1) - 1);
 	// console.log("idx0->", idxo)
 	// log.debug("posti->", prop.story.chapters[ prop.story.chapters.length - 1 ]);
-	const shortDate = format(Date.parse(prop.story.chapters[prop.story.chapters.length - 1]?.posted!.toString()), "yyyy/MM/dd");
-	const longDate = format(Date.parse(prop.story.chapters[prop.story.chapters.length - 1]?.posted!.toString()), "iiii',' yyyy-MM-dd");
+	const shortDate = format(Date.parse(story.value.chapters[story.value.chapters.length - 1]?.posted!.toString()), "yyyy/MM/dd");
+	const longDate = format(Date.parse(story.value.chapters[story.value.chapters.length - 1]?.posted!.toString()), "iiii',' yyyy-MM-dd");
 </script>
 <template>
 	<a-card>
diff --git a/components/listings/stories.vue b/components/listings/stories.vue
index 96319d5..9faa741 100644
--- a/components/listings/stories.vue
+++ b/components/listings/stories.vue
@@ -4,64 +4,53 @@
 	const route = useRoute();
 	let curPage = ref(route.query.page || 1);
 	const props = defineProps<{
-		prefix?: string;
-		items?: IStory[];
+		prefix: string;
 		last?: boolean;
 	}>();
-	let data;
-	if (!props.prefix) {
-		data = props.items;
-	} else if (!props.items) {
-		data = (
-			await useApiFetch<any>(`${props.prefix}`, {
-				query: {
-					page: curPage,
-				},
-			})
-		).data;
-	}
-	let rdata = ref(data);
-	const pagiChange = async (page, pageSize) => {
-		curPage.value = page;
-		// await navigateTo({
-		// 	path: useRoute().fullPath,
-		// 	query: {
-		// 		page
-		// 	}
-		// })
-		let { data: data } = await useApiFetch(`${props.prefix}`, {
+	let data = (
+		await useApiFetch<any>(props.prefix, {
 			query: {
-				page: curPage,
+				page: curPage.value,
 			},
+		})
+	).data.value;
+	let rdata = ref(data);
+	const loading = ref<boolean>(false);
+	const pagiChange = (page, pageSize) => {
+		loading.value = true;
+		curPage.value = page;
+		useApiFetch(props.prefix, {
+			query: {
+				page,
+			},
+		}).then(({ data }) => {
+			rdata.value = data.value;
+			loading.value = false;
+			navigateTo({
+				path: useRoute().fullPath,
+				query: {
+					page,
+				},
+			});
 		});
-		rdata.value = data.value;
 	};
 </script>
 <template>
 	<div>
-		<a-list :data-source="rdata.stories" item-layout="vertical">
+		<a-list v-model:data-source="rdata.stories" item-layout="vertical" v-model:loading="loading">
 			<template #renderItem="{ item }">
-				<!-- {{ item.title }} -->
-				<single-story :story="item" :last="last" />
+				<single-story :key="item._id" :story="item" :last="last" />
 			</template>
 		</a-list>
 		<a-pagination
+			v-model:disabled="loading"
 			:default-page-size="20"
 			:total="rdata.total"
-			:default-current="curPage as number"
 			@change="pagiChange"
 			:show-quick-jumper="true"
 			:show-size-changer="false"
 		/>
 	</div>
-	<!--		{
-			defaultPageSize: 20,
-			total: rdata.total,
-			defaultCurrent: curPage as number,
-			onChange: pagiChange,
-			// hideOnSinglePage: true,
-			showSizeChanger: false,
-		}-->
 </template>
 <style scoped>
 	.ant-list-items > * + * {