diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts
index f9e08d79b..f7a043bcf 100644
--- a/packages/client/src/init.ts
+++ b/packages/client/src/init.ts
@@ -38,6 +38,7 @@ import { reloadChannel } from '@/scripts/unison-reload';
 import { reactionPicker } from '@/scripts/reaction-picker';
 import { getUrlWithoutLoginId } from '@/scripts/login-id';
 import { getAccountFromId } from '@/scripts/get-account-from-id';
+import rootComponent from '@/root.vue';
 
 (async () => {
 	console.info(`Misskey v${version}`);
@@ -158,13 +159,7 @@ import { getAccountFromId } from '@/scripts/get-account-from-id';
 		initializeSw();
 	});
 
-	const app = createApp(
-		window.location.search === '?zen' ? defineAsyncComponent(() => import('@/ui/zen.vue')) :
-		!$i ? defineAsyncComponent(() => import('@/ui/visitor.vue')) :
-		ui === 'deck' ? defineAsyncComponent(() => import('@/ui/deck.vue')) :
-		ui === 'classic' ? defineAsyncComponent(() => import('@/ui/classic.vue')) :
-		defineAsyncComponent(() => import('@/ui/universal.vue')),
-	);
+	const app = createApp(rootComponent);
 
 	if (_DEV_) {
 		app.config.performance = true;
diff --git a/packages/client/src/root.vue b/packages/client/src/root.vue
new file mode 100644
index 000000000..d0bc5ffe9
--- /dev/null
+++ b/packages/client/src/root.vue
@@ -0,0 +1,19 @@
+<template>
+<ZenUi v-if="searchString === '?zen'" />
+<VisitorUi v-else-if="!$i" />
+<DeckUi v-else-if="ui === 'deck'" />
+<ClassicUi v-else-if="ui === 'classic'" />
+<UniversalUi v-else />
+</template>
+
+<script lang="ts" setup>
+import ZenUi from '@/ui/zen.vue';
+import VisitorUi from '@/ui/visitor.vue';
+import DeckUi from '@/ui/deck.vue';
+import ClassicUi from '@/ui/classic.vue';
+import UniversalUi from '@/ui/universal.vue';
+import { $i } from '@/account';
+import { ui } from '@/config';
+
+const searchString = window.location.search;
+</script>