diff --git a/package.json b/package.json
index 2f3a592356..85a87b21cf 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.118.1-calc.12.7",
+	"version": "12.118.1-calc.12.8",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue
index 8cb0c32ec4..cfee5a48b1 100644
--- a/packages/client/src/pages/timeline.vue
+++ b/packages/client/src/pages/timeline.vue
@@ -36,7 +36,7 @@
 				/>
 			</div>
 			<div v-else class="tl _block">
-				<swiper :modules="[Pagination]" :pagination="{ dynamicBullets: true, }">
+				<swiper :modules="[Pagination]" :pagination="{ dynamicBullets: true, }" :space-between="20">
 					<swiper-slide>
 						<XTimeline
 							ref="tl"
@@ -293,6 +293,8 @@ definePageMetadata(
 
 <style lang="scss" scoped>
 .cmuxhskf {
+	--swiper-theme-color: var(--accent);
+
 	> .new {
 		position: sticky;
 		top: calc(var(--stickyTop, 0px) + 16px);
@@ -316,5 +318,20 @@ definePageMetadata(
 		border-radius: var(--radius);
 		overflow: clip;
 	}
+
+	> .swiper-pagination {
+		position: fixed;
+		margin-bottom: 100px;
+		z-index: 99999;
+		background-color: var(--panelHighlight);
+		padding: 0.5rem 1rem;
+		border-radius: 999px;
+		color: var(--accent);
+	}
+
+	> .swiper-pagination-bullet-active {
+		background: var(--accent, var(--panel));
+	}
+
 }
 </style>