diff --git a/CHANGELOG.md b/CHANGELOG.md
index e8a73843d0..e09e778c87 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@
 ## 12.x.x (unreleased)
 
 ### Improvements
+- クライアント: ノートプレビューの精度を改善
 
 ### Bugfixes
 - クライアント: 一部のコンポーネントが裏に隠れるのを修正
diff --git a/packages/client/src/components/note-preview.vue b/packages/client/src/components/note-preview.vue
index 6e3eba9306..bdcb8d5eed 100644
--- a/packages/client/src/components/note-preview.vue
+++ b/packages/client/src/components/note-preview.vue
@@ -7,7 +7,7 @@
 		</div>
 		<div class="body">
 			<div class="content">
-				<Mfm :text="text" :author="$i" :i="$i"/>
+				<Mfm :text="text.trim()" :author="$i" :i="$i"/>
 			</div>
 		</div>
 	</div>
@@ -61,6 +61,7 @@ export default defineComponent({
 		width: 40px;
 		height: 40px;
 		border-radius: 8px;
+		pointer-events: none;
 	}
 
 	> .main {
@@ -69,6 +70,7 @@ export default defineComponent({
 
 		> .header {
 			margin-bottom: 2px;
+			font-weight: bold;
 		}
 
 		> .body {
diff --git a/packages/client/src/pages/admin/file-dialog.vue b/packages/client/src/pages/admin/file-dialog.vue
index f0774b2946..4c33f62399 100644
--- a/packages/client/src/pages/admin/file-dialog.vue
+++ b/packages/client/src/pages/admin/file-dialog.vue
@@ -40,7 +40,6 @@ import MkButton from '@/components/ui/button.vue';
 import MkSwitch from '@/components/form/switch.vue';
 import XModalWindow from '@/components/ui/modal-window.vue';
 import MkDriveFileThumbnail from '@/components/drive-file-thumbnail.vue';
-import Progress from '@/scripts/loading';
 import bytes from '@/filters/bytes';
 import * as os from '@/os';
 
@@ -74,11 +73,9 @@ export default defineComponent({
 
 	methods: {
 		async fetch() {
-			Progress.start();
 			this.file = await os.api('drive/files/show', { fileId: this.fileId });
 			this.info = await os.api('admin/drive/show-file', { fileId: this.fileId });
 			this.isSensitive = this.file.isSensitive;
-			Progress.done();
 		},
 
 		showUser() {
diff --git a/packages/client/src/pages/antenna-timeline.vue b/packages/client/src/pages/antenna-timeline.vue
index 2738208c9d..c38f285725 100644
--- a/packages/client/src/pages/antenna-timeline.vue
+++ b/packages/client/src/pages/antenna-timeline.vue
@@ -7,8 +7,6 @@
 			src="antenna"
 			:antenna="antennaId"
 			:sound="true"
-			@before="before()"
-			@after="after()"
 			@queue="queueUpdated"
 		/>
 	</div>
@@ -17,7 +15,6 @@
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent, computed } from 'vue';
-import Progress from '@/scripts/loading';
 import XTimeline from '@/components/timeline.vue';
 import { scroll } from '@/scripts/scroll';
 import * as os from '@/os';
@@ -76,14 +73,6 @@ export default defineComponent({
 	},
 
 	methods: {
-		before() {
-			Progress.start();
-		},
-
-		after() {
-			Progress.done();
-		},
-
 		queueUpdated(q) {
 			this.queue = q;
 		},
diff --git a/packages/client/src/pages/favorites.vue b/packages/client/src/pages/favorites.vue
index 980d59835f..faab864744 100644
--- a/packages/client/src/pages/favorites.vue
+++ b/packages/client/src/pages/favorites.vue
@@ -1,14 +1,13 @@
 <template>
 <div class="jmelgwjh">
 	<div class="body">
-		<XNotes class="notes" :pagination="pagination" :detail="true" :prop="'note'" @before="before()" @after="after()"/>
+		<XNotes class="notes" :pagination="pagination" :detail="true" :prop="'note'"/>
 	</div>
 </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import Progress from '@/scripts/loading';
 import XNotes from '@/components/notes.vue';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
@@ -33,16 +32,6 @@ export default defineComponent({
 			},
 		};
 	},
-
-	methods: {
-		before() {
-			Progress.start();
-		},
-
-		after() {
-			Progress.done();
-		}
-	}
 });
 </script>
 
diff --git a/packages/client/src/pages/featured.vue b/packages/client/src/pages/featured.vue
index f5edf25594..0844c0952f 100644
--- a/packages/client/src/pages/featured.vue
+++ b/packages/client/src/pages/featured.vue
@@ -1,12 +1,11 @@
 <template>
 <MkSpacer :content-max="800">
-	<XNotes ref="notes" :pagination="pagination" @before="before" @after="after"/>
+	<XNotes ref="notes" :pagination="pagination"/>
 </MkSpacer>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import Progress from '@/scripts/loading';
 import XNotes from '@/components/notes.vue';
 import * as symbols from '@/symbols';
 
@@ -29,15 +28,5 @@ export default defineComponent({
 			},
 		};
 	},
-
-	methods: {
-		before() {
-			Progress.start();
-		},
-
-		after() {
-			Progress.done();
-		}
-	}
 });
 </script>
diff --git a/packages/client/src/pages/mentions.vue b/packages/client/src/pages/mentions.vue
index cd9c6a8fdf..691d3bd9aa 100644
--- a/packages/client/src/pages/mentions.vue
+++ b/packages/client/src/pages/mentions.vue
@@ -1,12 +1,11 @@
 <template>
 <MkSpacer :content-max="800">
-	<XNotes :pagination="pagination" @before="before()" @after="after()"/>
+	<XNotes :pagination="pagination"/>
 </MkSpacer>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import Progress from '@/scripts/loading';
 import XNotes from '@/components/notes.vue';
 import * as symbols from '@/symbols';
 
@@ -28,15 +27,5 @@ export default defineComponent({
 			},
 		};
 	},
-
-	methods: {
-		before() {
-			Progress.start();
-		},
-
-		after() {
-			Progress.done();
-		}
-	}
 });
 </script>
diff --git a/packages/client/src/pages/messages.vue b/packages/client/src/pages/messages.vue
index 9fde0bc7d5..9085af9489 100644
--- a/packages/client/src/pages/messages.vue
+++ b/packages/client/src/pages/messages.vue
@@ -1,12 +1,11 @@
 <template>
 <MkSpacer :content-max="800">
-	<XNotes :pagination="pagination" @before="before()" @after="after()"/>
+	<XNotes :pagination="pagination"/>
 </MkSpacer>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import Progress from '@/scripts/loading';
 import XNotes from '@/components/notes.vue';
 import * as symbols from '@/symbols';
 
@@ -31,15 +30,5 @@ export default defineComponent({
 			},
 		};
 	},
-
-	methods: {
-		before() {
-			Progress.start();
-		},
-
-		after() {
-			Progress.done();
-		}
-	}
 });
 </script>
diff --git a/packages/client/src/pages/my-groups/group.vue b/packages/client/src/pages/my-groups/group.vue
index 89c8659b4f..c307f037a6 100644
--- a/packages/client/src/pages/my-groups/group.vue
+++ b/packages/client/src/pages/my-groups/group.vue
@@ -35,7 +35,6 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import Progress from '@/scripts/loading';
 import MkButton from '@/components/ui/button.vue';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
@@ -73,7 +72,6 @@ export default defineComponent({
 
 	methods: {
 		fetch() {
-			Progress.start();
 			os.api('users/groups/show', {
 				groupId: this.groupId
 			}).then(group => {
@@ -82,7 +80,6 @@ export default defineComponent({
 					userIds: this.group.userIds
 				}).then(users => {
 					this.users = users;
-					Progress.done();
 				});
 			});
 		},
diff --git a/packages/client/src/pages/my-lists/list.vue b/packages/client/src/pages/my-lists/list.vue
index 0bfa20514b..a25522f933 100644
--- a/packages/client/src/pages/my-lists/list.vue
+++ b/packages/client/src/pages/my-lists/list.vue
@@ -36,7 +36,6 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import Progress from '@/scripts/loading';
 import MkButton from '@/components/ui/button.vue';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
@@ -68,7 +67,6 @@ export default defineComponent({
 
 	methods: {
 		fetch() {
-			Progress.start();
 			os.api('users/lists/show', {
 				listId: this.$route.params.list
 			}).then(list => {
@@ -77,7 +75,6 @@ export default defineComponent({
 					userIds: this.list.userIds
 				}).then(users => {
 					this.users = users;
-					Progress.done();
 				});
 			});
 		},
diff --git a/packages/client/src/pages/notifications.vue b/packages/client/src/pages/notifications.vue
index cf8e934b59..695c54a535 100644
--- a/packages/client/src/pages/notifications.vue
+++ b/packages/client/src/pages/notifications.vue
@@ -1,14 +1,13 @@
 <template>
 <MkSpacer :content-max="800">
 	<div class="clupoqwt">
-		<XNotifications class="notifications" :include-types="includeTypes" :unread-only="tab === 'unread'" @before="before" @after="after"/>
+		<XNotifications class="notifications" :include-types="includeTypes" :unread-only="tab === 'unread'"/>
 	</div>
 </MkSpacer>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import Progress from '@/scripts/loading';
 import XNotifications from '@/components/notifications.vue';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
@@ -53,14 +52,6 @@ export default defineComponent({
 	},
 
 	methods: {
-		before() {
-			Progress.start();
-		},
-
-		after() {
-			Progress.done();
-		},
-
 		setFilter(ev) {
 			const typeItems = notificationTypes.map(t => ({
 				text: this.$t(`_notification._types.${t}`),
diff --git a/packages/client/src/pages/search.vue b/packages/client/src/pages/search.vue
index c7da3fe1c1..85d19bb255 100644
--- a/packages/client/src/pages/search.vue
+++ b/packages/client/src/pages/search.vue
@@ -1,14 +1,13 @@
 <template>
 <div class="_section">
 	<div class="_content">
-		<XNotes ref="notes" :pagination="pagination" @before="before" @after="after"/>
+		<XNotes ref="notes" :pagination="pagination"/>
 	</div>
 </div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import Progress from '@/scripts/loading';
 import XNotes from '@/components/notes.vue';
 import * as symbols from '@/symbols';
 
@@ -39,15 +38,5 @@ export default defineComponent({
 			(this.$refs.notes as any).reload();
 		}
 	},
-
-	methods: {
-		before() {
-			Progress.start();
-		},
-
-		after() {
-			Progress.done();
-		}
-	}
 });
 </script>
diff --git a/packages/client/src/pages/tag.vue b/packages/client/src/pages/tag.vue
index f4709659e3..a0c8367849 100644
--- a/packages/client/src/pages/tag.vue
+++ b/packages/client/src/pages/tag.vue
@@ -1,12 +1,11 @@
 <template>
 <div class="_section">
-	<XNotes ref="notes" class="_content" :pagination="pagination" @before="before" @after="after"/>
+	<XNotes ref="notes" class="_content" :pagination="pagination"/>
 </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import Progress from '@/scripts/loading';
 import XNotes from '@/components/notes.vue';
 import * as symbols from '@/symbols';
 
@@ -43,15 +42,5 @@ export default defineComponent({
 			(this.$refs.notes as any).reload();
 		}
 	},
-
-	methods: {
-		before() {
-			Progress.start();
-		},
-
-		after() {
-			Progress.done();
-		}
-	}
 });
 </script>
diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue
index 494932c602..216b3c34ea 100644
--- a/packages/client/src/pages/timeline.vue
+++ b/packages/client/src/pages/timeline.vue
@@ -10,8 +10,6 @@
 				class="tl"
 				:src="src"
 				:sound="true"
-				@before="before()"
-				@after="after()"
 				@queue="queueUpdated"
 			/>
 		</div>
@@ -21,7 +19,6 @@
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent, computed } from 'vue';
-import Progress from '@/scripts/loading';
 import XTimeline from '@/components/timeline.vue';
 import XPostForm from '@/components/post-form.vue';
 import { scroll } from '@/scripts/scroll';
@@ -118,14 +115,6 @@ export default defineComponent({
 	},
 
 	methods: {
-		before() {
-			Progress.start();
-		},
-
-		after() {
-			Progress.done();
-		},
-
 		queueUpdated(q) {
 			this.queue = q;
 		},
diff --git a/packages/client/src/pages/user-list-timeline.vue b/packages/client/src/pages/user-list-timeline.vue
index c2970c8d06..4476567cfb 100644
--- a/packages/client/src/pages/user-list-timeline.vue
+++ b/packages/client/src/pages/user-list-timeline.vue
@@ -7,8 +7,6 @@
 			src="list"
 			:list="listId"
 			:sound="true"
-			@before="before()"
-			@after="after()"
 			@queue="queueUpdated"
 		/>
 	</div>
@@ -17,7 +15,6 @@
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent, computed } from 'vue';
-import Progress from '@/scripts/loading';
 import XTimeline from '@/components/timeline.vue';
 import { scroll } from '@/scripts/scroll';
 import * as os from '@/os';
@@ -76,14 +73,6 @@ export default defineComponent({
 	},
 
 	methods: {
-		before() {
-			Progress.start();
-		},
-
-		after() {
-			Progress.done();
-		},
-
 		queueUpdated(q) {
 			this.queue = q;
 		},
diff --git a/packages/client/src/pages/user/index.vue b/packages/client/src/pages/user/index.vue
index 5a529ba8cf..0b96368587 100644
--- a/packages/client/src/pages/user/index.vue
+++ b/packages/client/src/pages/user/index.vue
@@ -205,7 +205,6 @@ import MkFolder from '@/components/ui/folder.vue';
 import MkRemoteCaution from '@/components/remote-caution.vue';
 import MkTab from '@/components/tab.vue';
 import MkInfo from '@/components/ui/info.vue';
-import Progress from '@/scripts/loading';
 import * as Acct from 'misskey-js/built/acct';
 import { getScrollPosition } from '@/scripts/scroll';
 import { getUserMenu } from '@/scripts/get-user-menu';
@@ -328,13 +327,10 @@ export default defineComponent({
 		fetch() {
 			if (this.acct == null) return;
 			this.user = null;
-			Progress.start();
 			os.api('users/show', Acct.parse(this.acct)).then(user => {
 				this.user = user;
 			}).catch(e => {
 				this.error = e;
-			}).finally(() => {
-				Progress.done();
 			});
 		},
 
diff --git a/packages/client/src/scripts/loading.ts b/packages/client/src/scripts/loading.ts
deleted file mode 100644
index 4b0a560e34..0000000000
--- a/packages/client/src/scripts/loading.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export default {
-	start: () => {
-		// TODO
-	},
-	done: () => {
-		// TODO
-	},
-	set: val => {
-		// TODO
-	}
-};
diff --git a/packages/client/src/ui/_common_/sidebar.vue b/packages/client/src/ui/_common_/sidebar.vue
index e363c3abd9..bf560e8dd6 100644
--- a/packages/client/src/ui/_common_/sidebar.vue
+++ b/packages/client/src/ui/_common_/sidebar.vue
@@ -170,6 +170,8 @@ export default defineComponent({
 			}
 
 			&:hover, &.active {
+				color: var(--accent);
+
 				&:before {
 					content: "";
 					display: block;
@@ -283,8 +285,10 @@ export default defineComponent({
 				}
 
 				&:before {
-					width: 100%;
-					border-radius: 0;
+					width: auto;
+					height: 100%;
+					aspect-ratio: 1/1;
+					border-radius: 8px;
 				}
 
 				&.post {
@@ -296,8 +300,9 @@ export default defineComponent({
 				}
 
 				&.post:before {
-					width: calc(100% - 32px);
-					height: calc(100% - 32px);
+					width: calc(100% - 28px);
+					height: auto;
+					aspect-ratio: 1/1;
 					border-radius: 100%;
 				}
 			}
diff --git a/packages/client/src/ui/deck/direct-column.vue b/packages/client/src/ui/deck/direct-column.vue
index a11b2e82ed..6ef733dfd0 100644
--- a/packages/client/src/ui/deck/direct-column.vue
+++ b/packages/client/src/ui/deck/direct-column.vue
@@ -8,7 +8,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import Progress from '@/scripts/loading';
 import XColumn from './column.vue';
 import XNotes from '@/components/notes.vue';
 import * as os from '@/os';
@@ -41,15 +40,5 @@ export default defineComponent({
 			},
 		}
 	},
-
-	methods: {
-		before() {
-			Progress.start();
-		},
-
-		after() {
-			Progress.done();
-		}
-	}
 });
 </script>
diff --git a/packages/client/src/ui/deck/mentions-column.vue b/packages/client/src/ui/deck/mentions-column.vue
index 7dd06989cb..4b8dc0c4ee 100644
--- a/packages/client/src/ui/deck/mentions-column.vue
+++ b/packages/client/src/ui/deck/mentions-column.vue
@@ -8,7 +8,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import Progress from '@/scripts/loading';
 import XColumn from './column.vue';
 import XNotes from '@/components/notes.vue';
 import * as os from '@/os';
@@ -38,15 +37,5 @@ export default defineComponent({
 			},
 		}
 	},
-
-	methods: {
-		before() {
-			Progress.start();
-		},
-
-		after() {
-			Progress.done();
-		}
-	}
 });
 </script>