diff --git a/src/client/components/link.vue b/src/client/components/link.vue
index f4e07c162..11de68852 100644
--- a/src/client/components/link.vue
+++ b/src/client/components/link.vue
@@ -13,7 +13,7 @@
 import Vue from 'vue';
 import { faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons';
 import { url as local } from '../config';
-import XUrlPreview from './url-preview-popup.vue';
+import MkUrlPreview from './url-preview-popup.vue';
 
 export default Vue.extend({
 	props: {
@@ -44,7 +44,7 @@ export default Vue.extend({
 			if (!document.body.contains(this.$el)) return;
 			if (this.preview) return;
 
-			this.preview = new XUrlPreview({
+			this.preview = new MkUrlPreview({
 				parent: this,
 				propsData: {
 					url: this.url,
diff --git a/src/client/components/note.vue b/src/client/components/note.vue
index b3126e067..48e37c33d 100644
--- a/src/client/components/note.vue
+++ b/src/client/components/note.vue
@@ -49,7 +49,7 @@
 						<x-media-list :media-list="appearNote.files"/>
 					</div>
 					<x-poll v-if="appearNote.poll" :note="appearNote" ref="pollViewer"/>
-					<x-url-preview v-for="url in urls" :url="url" :key="url" :compact="true" class="url-preview"/>
+					<mk-url-preview v-for="url in urls" :url="url" :key="url" :compact="true" class="url-preview"/>
 					<div class="renote" v-if="appearNote.renote"><x-note-preview :note="appearNote.renote"/></div>
 				</div>
 			</div>
@@ -97,7 +97,7 @@ import XReactionsViewer from './reactions-viewer.vue';
 import XMediaList from './media-list.vue';
 import XCwButton from './cw-button.vue';
 import XPoll from './poll.vue';
-import XUrlPreview from './url-preview.vue';
+import MkUrlPreview from './url-preview.vue';
 import MkReactionPicker from './reaction-picker.vue';
 import pleaseLogin from '../scripts/please-login';
 import { focusPrev, focusNext } from '../scripts/focus';
@@ -115,7 +115,7 @@ export default Vue.extend({
 		XMediaList,
 		XCwButton,
 		XPoll,
-		XUrlPreview,
+		MkUrlPreview,
 	},
 
 	props: {
diff --git a/src/client/components/url-preview-popup.vue b/src/client/components/url-preview-popup.vue
index 26fdbf44a..938566e9e 100644
--- a/src/client/components/url-preview-popup.vue
+++ b/src/client/components/url-preview-popup.vue
@@ -1,19 +1,19 @@
 <template>
 <div class="fgmtyycl _panel" :style="{ top: top + 'px', left: left + 'px' }">
-	<x-url-preview :url="url"/>
+	<mk-url-preview :url="url"/>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
 import i18n from '../i18n';
-import XUrlPreview from './url-preview.vue';
+import MkUrlPreview from './url-preview.vue';
 
 export default Vue.extend({
 	i18n,
 
 	components: {
-		XUrlPreview
+		MkUrlPreview
 	},
 
 	props: {
diff --git a/src/client/components/url.vue b/src/client/components/url.vue
index df16bc9c2..409bb128f 100644
--- a/src/client/components/url.vue
+++ b/src/client/components/url.vue
@@ -23,7 +23,7 @@ import Vue from 'vue';
 import { faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons';
 import { toUnicode as decodePunycode } from 'punycode';
 import { url as local } from '../config';
-import XUrlPreview from './url-preview-popup.vue';
+import MkUrlPreview from './url-preview-popup.vue';
 
 export default Vue.extend({
 	props: {
@@ -70,7 +70,7 @@ export default Vue.extend({
 			if (!document.body.contains(this.$el)) return;
 			if (this.preview) return;
 
-			this.preview = new XUrlPreview({
+			this.preview = new MkUrlPreview({
 				parent: this,
 				propsData: {
 					url: this.url,
diff --git a/src/client/pages/messaging.vue b/src/client/pages/messaging/index.vue
similarity index 97%
rename from src/client/pages/messaging.vue
rename to src/client/pages/messaging/index.vue
index 47d761d89..702979a09 100644
--- a/src/client/pages/messaging.vue
+++ b/src/client/pages/messaging/index.vue
@@ -42,10 +42,10 @@
 <script lang="ts">
 import Vue from 'vue';
 import { faUser, faUsers, faComments, faPlus } from '@fortawesome/free-solid-svg-icons';
-import i18n from '../i18n';
-import getAcct from '../../misc/acct/render';
-import MkButton from '../components/ui/button.vue';
-import MkUserSelect from '../components/user-select.vue';
+import i18n from '../../i18n';
+import getAcct from '../../../misc/acct/render';
+import MkButton from '../../components/ui/button.vue';
+import MkUserSelect from '../../components/user-select.vue';
 
 export default Vue.extend({
 	i18n,
diff --git a/src/client/pages/messaging-room.form.vue b/src/client/pages/messaging/messaging-room.form.vue
similarity index 95%
rename from src/client/pages/messaging-room.form.vue
rename to src/client/pages/messaging/messaging-room.form.vue
index 72e263277..0cd3dfcc8 100644
--- a/src/client/pages/messaging-room.form.vue
+++ b/src/client/pages/messaging/messaging-room.form.vue
@@ -27,14 +27,14 @@ import Vue from 'vue';
 import { faPaperPlane, faPhotoVideo, faLaughSquint } from '@fortawesome/free-solid-svg-icons';
 import insertTextAtCursor from 'insert-text-at-cursor';
 import * as autosize from 'autosize';
-import i18n from '../i18n';
-import { formatTimeString } from '../../misc/format-time-string';
-import { selectFile } from '../scripts/select-file';
+import i18n from '../../i18n';
+import { formatTimeString } from '../../../misc/format-time-string';
+import { selectFile } from '../../scripts/select-file';
 
 export default Vue.extend({
 	i18n,
 	components: {
-		XUploader: () => import('../components/uploader.vue').then(m => m.default),
+		XUploader: () => import('../../components/uploader.vue').then(m => m.default),
 	},
 	props: {
 		user: {
@@ -221,7 +221,7 @@ export default Vue.extend({
 		},
 
 		async insertEmoji(ev) {
-			const vm = this.$root.new(await import('../components/emoji-picker.vue').then(m => m.default), {
+			const vm = this.$root.new(await import('../../components/emoji-picker.vue').then(m => m.default), {
 				source: ev.currentTarget || ev.target
 			}).$once('chosen', emoji => {
 				insertTextAtCursor(this.$refs.text, emoji);
diff --git a/src/client/pages/messaging-room.message.vue b/src/client/pages/messaging/messaging-room.message.vue
similarity index 95%
rename from src/client/pages/messaging-room.message.vue
rename to src/client/pages/messaging/messaging-room.message.vue
index f26ef449b..4988b70a2 100644
--- a/src/client/pages/messaging-room.message.vue
+++ b/src/client/pages/messaging/messaging-room.message.vue
@@ -21,7 +21,7 @@
 			</div>
 		</div>
 		<div></div>
-		<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
+		<mk-url-preview v-for="url in urls" :url="url" :key="url" style="margin: 8px 0;"/>
 		<footer>
 			<template v-if="isGroup">
 				<span class="read" v-if="message.reads.length > 0">{{ $t('messageRead') }} {{ message.reads.length }}</span>
@@ -38,12 +38,16 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import i18n from '../i18n';
-import { parse } from '../../mfm/parse';
-import { unique } from '../../prelude/array';
+import i18n from '../../i18n';
+import { parse } from '../../../mfm/parse';
+import { unique } from '../../../prelude/array';
+import MkUrlPreview from '../../components/url-preview.vue';
 
 export default Vue.extend({
 	i18n,
+	components: {
+		MkUrlPreview
+	},
 	props: {
 		message: {
 			required: true
@@ -223,10 +227,6 @@ export default Vue.extend({
 			}
 		}
 
-		> .mk-url-preview {
-			margin: 8px 0;
-		}
-
 		> footer {
 			display: block;
 			margin: 2px 0 0 0;
diff --git a/src/client/pages/messaging-room.vue b/src/client/pages/messaging/messaging-room.vue
similarity index 98%
rename from src/client/pages/messaging-room.vue
rename to src/client/pages/messaging/messaging-room.vue
index 5fca8c0ff..0a20c56c2 100644
--- a/src/client/pages/messaging-room.vue
+++ b/src/client/pages/messaging/messaging-room.vue
@@ -37,12 +37,12 @@
 <script lang="ts">
 import Vue from 'vue';
 import { faArrowCircleDown, faFlag, faUsers, faInfoCircle } from '@fortawesome/free-solid-svg-icons';
-import i18n from '../i18n';
-import XList from '../components/date-separated-list.vue';
+import i18n from '../../i18n';
+import XList from '../../components/date-separated-list.vue';
 import XMessage from './messaging-room.message.vue';
 import XForm from './messaging-room.form.vue';
-import { url } from '../config';
-import parseAcct from '../../misc/acct/parse';
+import { url } from '../../config';
+import parseAcct from '../../../misc/acct/parse';
 
 export default Vue.extend({
 	i18n,
diff --git a/src/client/router.ts b/src/client/router.ts
index 3b2bbe9c8..83445fea7 100644
--- a/src/client/router.ts
+++ b/src/client/router.ts
@@ -31,9 +31,9 @@ export const router = new VueRouter({
 		{ path: '/my/favorites', component: page('favorites') },
 		{ path: '/my/messages', component: page('messages') },
 		{ path: '/my/mentions', component: page('mentions') },
-		{ path: '/my/messaging', name: 'messaging', component: page('messaging') },
-		{ path: '/my/messaging/:user', component: page('messaging-room') },
-		{ path: '/my/messaging/group/:group', component: page('messaging-room') },
+		{ path: '/my/messaging', name: 'messaging', component: page('messaging/index') },
+		{ path: '/my/messaging/:user', component: page('messaging/messaging-room') },
+		{ path: '/my/messaging/group/:group', component: page('messaging/messaging-room') },
 		{ path: '/my/drive', name: 'drive', component: page('drive') },
 		{ path: '/my/drive/folder/:folder', component: page('drive') },
 		{ path: '/my/pages', name: 'pages', component: page('pages') },