diff --git a/src/client/app.vue b/src/client/app.vue
index 0b7c18fcb..b0c92105e 100644
--- a/src/client/app.vue
+++ b/src/client/app.vue
@@ -652,7 +652,7 @@ export default Vue.extend({
 	$header-height: 60px;
 	$nav-width: 250px;
 	$nav-icon-only-width: 74px;
-	$main-width: 700px;
+	$main-width: 650px;
 	$ui-font-size: 1em;
 	$nav-icon-only-threshold: 1300px;
 	$nav-hide-threshold: 700px;
@@ -976,6 +976,7 @@ export default Vue.extend({
 			width: $main-width;
 			min-width: $main-width;
 			box-shadow: 1px 0 0 0 var(--divider), -1px 0 0 0 var(--divider);
+			background: var(--mainBg);
 
 			@media (max-width: $side-hide-threshold) {
 				min-width: 0;
diff --git a/src/client/components/note.sub.vue b/src/client/components/note.sub.vue
index a8eee8de6..5efbb8f1e 100644
--- a/src/client/components/note.sub.vue
+++ b/src/client/components/note.sub.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="wrpstxzv">
+<div class="wrpstxzv" v-size="[{ max: 450 }]">
 	<mk-avatar class="avatar" :user="note.user"/>
 	<div class="main">
 		<x-note-header class="header" :note="note" :mini="true"/>
@@ -61,7 +61,7 @@ export default Vue.extend({
 	padding: 16px 32px;
 	font-size: 0.9em;
 
-	@media (max-width: 450px) {
+	&.max-width_450px {
 		padding: 14px 16px;
 	}
 
diff --git a/src/client/pages/messaging-room.message.vue b/src/client/pages/messaging-room.message.vue
index a520306f2..ba30f6145 100644
--- a/src/client/pages/messaging-room.message.vue
+++ b/src/client/pages/messaging-room.message.vue
@@ -2,7 +2,7 @@
 <div class="thvuemwp" :data-is-me="isMe">
 	<mk-avatar class="avatar" :user="message.user"/>
 	<div class="content">
-		<div class="balloon _panel" :data-no-text="message.text == null">
+		<div class="balloon" :data-no-text="message.text == null">
 			<button class="delete-button" v-if="isMe" :title="$t('delete')" @click="del">
 				<img src="/assets/remove.png" alt="Delete"/>
 			</button>
@@ -243,6 +243,7 @@ export default Vue.extend({
 	}
 
 	&:not([data-is-me]) {
+		padding-left: var(--margin);
 
 		> .content {
 			padding-left: 16px;
@@ -279,6 +280,7 @@ export default Vue.extend({
 
 	&[data-is-me] {
 		flex-direction: row-reverse;
+		padding-right: var(--margin);
 
 		> .content {
 			padding-right: 16px;
diff --git a/src/client/themes/_dark.json5 b/src/client/themes/_dark.json5
index e6d8b42a5..7ef6e339b 100644
--- a/src/client/themes/_dark.json5
+++ b/src/client/themes/_dark.json5
@@ -17,9 +17,10 @@
 		fgHighlighted: ':lighten<3<@fg',
 		html: '@bg',
 		indicator: '@accent',
-		panel: '#111213',
+		panel: '#000',
 		shadow: 'rgba(0, 0, 0, 0.1)',
 		header: 'rgba(20, 20, 20, 0.75)',
+		mainBg: ':lighten<3<@bg',
 		navBg: '@panel',
 		navFg: '@fg',
 		navHoverFg: ':lighten<17<@fg',
diff --git a/src/client/themes/_light.json5 b/src/client/themes/_light.json5
index 18a122291..3727b93a3 100644
--- a/src/client/themes/_light.json5
+++ b/src/client/themes/_light.json5
@@ -20,6 +20,7 @@
 		panel: '#fff',
 		shadow: 'rgba(0, 0, 0, 0.1)',
 		header: 'rgba(255, 255, 255, 0.75)',
+		mainBg: '@bg',
 		navBg: '@panel',
 		navFg: '@fg',
 		navHoverFg: ':darken<17<@fg',