diff --git a/src/client/components/note-detailed.vue b/src/client/components/note-detailed.vue
index 720f5aa2b4..e7f116d1fd 100644
--- a/src/client/components/note-detailed.vue
+++ b/src/client/components/note-detailed.vue
@@ -1,6 +1,6 @@
 <template>
 <div
-	class="note _block"
+	class="lxwezrsl _block"
 	v-if="!muted"
 	v-show="!isDeleted"
 	:tabindex="!isDeleted ? '-1' : null"
@@ -899,7 +899,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.note {
+.lxwezrsl {
 	position: relative;
 	transition: box-shadow 0.1s ease;
 	overflow: hidden;
diff --git a/src/client/components/notes.vue b/src/client/components/notes.vue
index 560441ba67..ba3b7d2b39 100644
--- a/src/client/components/notes.vue
+++ b/src/client/components/notes.vue
@@ -9,7 +9,7 @@
 		<div>{{ $ts.noNotes }}</div>
 	</div>
 
-	<div v-else class="giivymft">
+	<div v-else class="giivymft" :class="{ noGap }">
 		<div v-show="more && reversed" style="margin-bottom: var(--margin);">
 			<MkButton style="margin: 0 auto;" @click="fetchMoreFeature" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
 				<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
@@ -18,7 +18,7 @@
 		</div>
 
 		<XList ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed" :no-gap="noGap" :ad="true" class="notes">
-			<XNote :note="note" @update:note="updated(note, $event)" :key="note._featuredId_ || note._prId_ || note.id"/>
+			<XNote class="qtqtichx" :note="note" @update:note="updated(note, $event)" :key="note._featuredId_ || note._prId_ || note.id"/>
 		</XList>
 
 		<div v-show="more && !reversed" style="margin-top: var(--margin);">
@@ -110,8 +110,19 @@ export default defineComponent({
 }
 
 .giivymft {
-	> .notes {
-		background: var(--panel);
+	&.noGap {
+		> .notes {
+			background: var(--panel);
+		}
+	}
+
+	&:not(.noGap) {
+		> .notes {
+			.qtqtichx {
+				background: var(--panel);
+				border-radius: var(--radius);
+			}
+		}
 	}
 }
 </style>
diff --git a/src/client/components/ui/popup.vue b/src/client/components/ui/popup.vue
index 9e360411c0..8497eedecb 100644
--- a/src/client/components/ui/popup.vue
+++ b/src/client/components/ui/popup.vue
@@ -1,5 +1,5 @@
 <template>
-<transition :name="$store.state.animation ? 'popup-menu' : ''" :duration="$store.state.animation ? 300 : 0" appear @after-leave="onClosed" @enter="$emit('opening')" @after-enter="childRendered">
+<transition :name="$store.state.animation ? 'popup-menu' : ''" appear @after-leave="onClosed" @enter="$emit('opening')" @after-enter="childRendered">
 	<div v-show="manualShowing != null ? manualShowing : showing" class="ccczpooj" :class="{ front, fixed, top: position === 'top' }" ref="content" :style="{ pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
 		<slot :point="point"></slot>
 	</div>
diff --git a/src/client/pages/docs.vue b/src/client/pages/docs.vue
index 6dc5eb1ae8..be4d4255db 100644
--- a/src/client/pages/docs.vue
+++ b/src/client/pages/docs.vue
@@ -1,50 +1,54 @@
 <template>
 <div class="vtaihdtm">
-	<div class="search">
-		<MkInput v-model="query" :debounce="true" type="search" class="_inputNoTopMargin _inputNoBottomMargin" :placeholder="$ts.search">
-			<template #prefix><i class="fas fa-search"></i></template>
-		</MkInput>
+	<div class="body">
+		<div class="search">
+			<MkInput v-model="query" :debounce="true" type="search" class="_inputNoTopMargin _inputNoBottomMargin" :placeholder="$ts.search">
+				<template #prefix><i class="fas fa-search"></i></template>
+			</MkInput>
+		</div>
+		<div class="list">
+			<MkFolder>
+				<template #header>{{ $ts._docs.generalTopics }}</template>
+				<div class="docs">
+					<MkA v-for="doc in docs.filter(doc => doc.path.startsWith('general/'))" :key="doc.path" :to="`/docs/${doc.path}`" class="doc">
+						<div class="title">{{ doc.title }}</div>
+						<div class="summary">{{ doc.summary }}</div>
+						<div class="read">{{ $ts._docs.continueReading }}</div>
+					</MkA>
+				</div>
+			</MkFolder>
+			<MkFolder>
+				<template #header>{{ $ts._docs.features }}</template>
+				<div class="docs">
+					<MkA v-for="doc in docs.filter(doc => doc.path.startsWith('features/'))" :key="doc.path" :to="`/docs/${doc.path}`" class="doc">
+						<div class="title">{{ doc.title }}</div>
+						<div class="summary">{{ doc.summary }}</div>
+						<div class="read">{{ $ts._docs.continueReading }}</div>
+					</MkA>
+				</div>
+			</MkFolder>
+			<MkFolder>
+				<template #header>{{ $ts._docs.advancedTopics }}</template>
+				<div class="docs">
+					<MkA v-for="doc in docs.filter(doc => doc.path.startsWith('advanced/'))" :key="doc.path" :to="`/docs/${doc.path}`" class="doc">
+						<div class="title">{{ doc.title }}</div>
+						<div class="summary">{{ doc.summary }}</div>
+						<div class="read">{{ $ts._docs.continueReading }}</div>
+					</MkA>
+				</div>
+			</MkFolder>
+			<MkFolder>
+				<template #header>{{ $ts._docs.admin }}</template>
+				<div class="docs">
+					<MkA v-for="doc in docs.filter(doc => doc.path.startsWith('admin/'))" :key="doc.path" :to="`/docs/${doc.path}`" class="doc">
+						<div class="title">{{ doc.title }}</div>
+						<div class="summary">{{ doc.summary }}</div>
+						<div class="read">{{ $ts._docs.continueReading }}</div>
+					</MkA>
+				</div>
+			</MkFolder>
+		</div>
 	</div>
-	<MkFolder>
-		<template #header>{{ $ts._docs.generalTopics }}</template>
-		<div class="docs">
-			<MkA v-for="doc in docs.filter(doc => doc.path.startsWith('general/'))" :key="doc.path" :to="`/docs/${doc.path}`" class="doc">
-				<div class="title">{{ doc.title }}</div>
-				<div class="summary">{{ doc.summary }}</div>
-				<div class="read">{{ $ts._docs.continueReading }}</div>
-			</MkA>
-		</div>
-	</MkFolder>
-	<MkFolder>
-		<template #header>{{ $ts._docs.features }}</template>
-		<div class="docs">
-			<MkA v-for="doc in docs.filter(doc => doc.path.startsWith('features/'))" :key="doc.path" :to="`/docs/${doc.path}`" class="doc">
-				<div class="title">{{ doc.title }}</div>
-				<div class="summary">{{ doc.summary }}</div>
-				<div class="read">{{ $ts._docs.continueReading }}</div>
-			</MkA>
-		</div>
-	</MkFolder>
-	<MkFolder>
-		<template #header>{{ $ts._docs.advancedTopics }}</template>
-		<div class="docs">
-			<MkA v-for="doc in docs.filter(doc => doc.path.startsWith('advanced/'))" :key="doc.path" :to="`/docs/${doc.path}`" class="doc">
-				<div class="title">{{ doc.title }}</div>
-				<div class="summary">{{ doc.summary }}</div>
-				<div class="read">{{ $ts._docs.continueReading }}</div>
-			</MkA>
-		</div>
-	</MkFolder>
-	<MkFolder>
-		<template #header>{{ $ts._docs.admin }}</template>
-		<div class="docs">
-			<MkA v-for="doc in docs.filter(doc => doc.path.startsWith('admin/'))" :key="doc.path" :to="`/docs/${doc.path}`" class="doc">
-				<div class="title">{{ doc.title }}</div>
-				<div class="summary">{{ doc.summary }}</div>
-				<div class="read">{{ $ts._docs.continueReading }}</div>
-			</MkA>
-		</div>
-	</MkFolder>
 </div>
 </template>
 
@@ -97,41 +101,50 @@ export default defineComponent({
 .vtaihdtm {
 	background: var(--panel);
 
-	> .search {
-		padding: 16px;
-	}
+	> .body {
+		max-width: 900px;
+		margin: 0 auto;
 
-	.docs {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
-		grid-gap: 12px;
-		margin: 0 16px 16px 16px;
-
-		> .doc {
-			display: inline-block;
+		> .search {
 			padding: 16px;
-			border: solid 1px var(--divider);
-			border-radius: 6px;
+		}
 
-			&:hover {
-				border: solid 1px var(--accent);
-				text-decoration: none;
-			}
+		> .list {
+			padding: 0 16px;
 
-			> .title {
-				font-weight: bold;
-			}
+			.docs {
+				display: grid;
+				grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
+				grid-gap: 12px;
+				margin: 0 0 16px 0;
 
-			> .summary {
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				font-size: 0.9em;
-			}
+				> .doc {
+					display: inline-block;
+					padding: 16px;
+					border: solid 1px var(--divider);
+					border-radius: 6px;
 
-			> .read {
-				color: var(--link);
-				font-size: 0.9em;
+					&:hover {
+						border: solid 1px var(--accent);
+						text-decoration: none;
+					}
+
+					> .title {
+						font-weight: bold;
+					}
+
+					> .summary {
+						white-space: nowrap;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						font-size: 0.9em;
+					}
+
+					> .read {
+						color: var(--link);
+						font-size: 0.9em;
+					}
+				}
 			}
 		}
 	}
diff --git a/src/client/pages/favorites.vue b/src/client/pages/favorites.vue
index 408ab222b5..a2d61b98d9 100644
--- a/src/client/pages/favorites.vue
+++ b/src/client/pages/favorites.vue
@@ -1,6 +1,8 @@
 <template>
-<div class="_section">
-	<XNotes class="_content" :pagination="pagination" :detail="true" :prop="'note'" @before="before()" @after="after()"/>
+<div class="jmelgwjh">
+	<div class="body">
+		<XNotes class="notes" :pagination="pagination" :detail="true" :prop="'note'" @before="before()" @after="after()"/>
+	</div>
 </div>
 </template>
 
@@ -42,3 +44,16 @@ export default defineComponent({
 	}
 });
 </script>
+
+<style lang="scss" scoped>
+.jmelgwjh {
+	background: var(--bg);
+
+	> .body {
+		box-sizing: border-box;
+		max-width: 800px;
+		margin: 0 auto;
+		padding: 16px;
+	}
+}
+</style>
diff --git a/src/client/pages/note.vue b/src/client/pages/note.vue
index ce4af4eb4e..7725ca14b4 100644
--- a/src/client/pages/note.vue
+++ b/src/client/pages/note.vue
@@ -8,9 +8,9 @@
 
 			<div class="main _gap">
 				<MkButton v-if="!showNext && hasNext" class="load next" @click="showNext = true"><i class="fas fa-chevron-up"></i></MkButton>
-				<div class="_content _gap">
-					<MkRemoteCaution v-if="note.user.host != null" :href="note.url || note.uri" class="_gap"/>
-					<XNoteDetailed v-model:note="note" :key="note.id" class="_gap"/>
+				<div class="note _gap">
+					<MkRemoteCaution v-if="note.user.host != null" :href="note.url || note.uri" class="_isolated"/>
+					<XNoteDetailed v-model:note="note" :key="note.id" class="_isolated note"/>
 				</div>
 				<div class="_content clips _gap" v-if="clips && clips.length > 0">
 					<div class="title">{{ $ts.clip }}</div>
@@ -108,6 +108,7 @@ export default defineComponent({
 			os.api('notes/show', {
 				noteId: this.noteId
 			}).then(note => {
+				this.note = note;
 				Promise.all([
 					os.api('notes/clips', {
 						noteId: note.id,
@@ -126,7 +127,6 @@ export default defineComponent({
 					this.clips = clips;
 					this.hasPrev = prev.length !== 0;
 					this.hasNext = next.length !== 0;
-					this.note = note;
 				});
 			}).catch(e => {
 				this.error = e;
@@ -147,6 +147,8 @@ export default defineComponent({
 }
 
 .fcuexfpr {
+	background: var(--bg);
+
 	> .note {
 		> .main {
 			> .load {
@@ -163,6 +165,13 @@ export default defineComponent({
 				}
 			}
 
+			> .note {
+				> .note {
+					border-radius: var(--radius);
+					background: var(--panel);
+				}
+			}
+
 			> .clips {
 				> .title {
 					font-weight: bold;
diff --git a/src/client/pages/notifications.vue b/src/client/pages/notifications.vue
index 38797d746e..6b16b85b78 100644
--- a/src/client/pages/notifications.vue
+++ b/src/client/pages/notifications.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="_root">
+<div class="">
 	<XNotifications class="_content" @before="before" @after="after" page/>
 </div>
 </template>
diff --git a/src/client/pages/timeline.vue b/src/client/pages/timeline.vue
index 4e149cc518..119815e2ae 100644
--- a/src/client/pages/timeline.vue
+++ b/src/client/pages/timeline.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="cmuxhskf _root" v-hotkey.global="keymap">
+<div class="cmuxhskf" v-hotkey.global="keymap">
 	<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block _isolated"/>
 	<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block _isolated" fixed/>
 	<div class="tabs">
@@ -260,10 +260,9 @@ export default defineComponent({
 						left: 0;
 						right: 0;
 						margin: 0 auto;
-						width: calc(100% - 16px);
-						height: 4px;
+						width: 100%;
+						height: 2px;
 						background: var(--accent);
-						border-radius: 8px 8px 0 0;
 					}
 				}
 
diff --git a/src/client/style.scss b/src/client/style.scss
index a3e3b6a6a1..a6c027745a 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -330,6 +330,7 @@ hr {
 	contain: layout; // ふき出しがボックスから飛び出て表示されるようなデザインをする場合もあるので paint は contain することができない
 }
 
+// TODO: 廃止
 ._root {
 	box-sizing: border-box;
 	margin: var(--root-margin, 32px) auto;
diff --git a/src/client/ui/universal.vue b/src/client/ui/universal.vue
index ce957d23c4..d6cace0f41 100644
--- a/src/client/ui/universal.vue
+++ b/src/client/ui/universal.vue
@@ -257,6 +257,10 @@ export default defineComponent({
 		//backdrop-filter: var(--blur, blur(4px));
 	}
 
+	> .sidebar {
+		border-right: solid 0.5px var(--divider);
+	}
+
 	> .contents {
 		width: 100%;
 		min-width: 0;