diff --git a/src/client/default.vue b/src/client/default.vue
index 1942a9313e..9a6369d7f2 100644
--- a/src/client/default.vue
+++ b/src/client/default.vue
@@ -6,7 +6,7 @@
 				<button class="_button back" v-if="canBack" @click="back()"><fa :icon="faChevronLeft"/></button>
 			</transition>
 			<transition :name="$store.state.device.animation ? 'header' : ''" mode="out-in" appear>
-				<div class="body" :key="pageKey" id="_teleport_header"></div>
+				<portal-target class="body" :key="pageKey" name="header"></portal-target>
 			</transition>
 		</div>
 		<div class="sub">
diff --git a/src/client/pages/about-misskey.vue b/src/client/pages/about-misskey.vue
index 635af7c031..b2260acd51 100644
--- a/src/client/pages/about-misskey.vue
+++ b/src/client/pages/about-misskey.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="znqjceqz">
-	<teleport to="#_teleport_header">{{ $t('aboutMisskey') }}</teleport>
+	<portal to="header">{{ $t('aboutMisskey') }}</portal>
 
 	<section class="_card">
 		<div class="_title">{{ $t('aboutMisskey') }}</div>
diff --git a/src/client/pages/about.vue b/src/client/pages/about.vue
index a1f36a88c1..0a0f935ed7 100644
--- a/src/client/pages/about.vue
+++ b/src/client/pages/about.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="mmnnbwxb">
-	<teleport to="#_teleport_header"><fa :icon="faInfoCircle"/>{{ $t('about') }}</teleport>
+	<portal to="header"><fa :icon="faInfoCircle"/>{{ $t('about') }}</portal>
 
 	<section class="_card info" v-if="meta">
 		<div class="_title"><fa :icon="faInfoCircle"/> {{ $t('instanceInfo') }}</div>
diff --git a/src/client/pages/announcements.vue b/src/client/pages/announcements.vue
index 0b30325741..9d15cd0785 100644
--- a/src/client/pages/announcements.vue
+++ b/src/client/pages/announcements.vue
@@ -1,6 +1,6 @@
 <template>
 <div>
-	<teleport to="#_teleport_header"><fa :icon="faBroadcastTower"/>{{ $t('announcements') }}</teleport>
+	<portal to="header"><fa :icon="faBroadcastTower"/>{{ $t('announcements') }}</portal>
 
 	<mk-pagination :pagination="pagination" #default="{items}" class="ruryvtyk" ref="list">
 		<section class="_card announcement" v-for="(announcement, i) in items" :key="announcement.id">
diff --git a/src/client/pages/apps.vue b/src/client/pages/apps.vue
index c3cb1d2ee6..1b04bf1b23 100644
--- a/src/client/pages/apps.vue
+++ b/src/client/pages/apps.vue
@@ -1,6 +1,6 @@
 <template>
 <div>
-	<teleport to="#_teleport_header"><fa :icon="faPlug"/>{{ $t('installedApps') }}</teleport>
+	<portal to="header"><fa :icon="faPlug"/>{{ $t('installedApps') }}</portal>
 
 	<mk-pagination :pagination="pagination" class="bfomjevm" ref="list">
 		<template #empty>
diff --git a/src/client/pages/channel-editor.vue b/src/client/pages/channel-editor.vue
index 17ef6e1470..d69e7a0672 100644
--- a/src/client/pages/channel-editor.vue
+++ b/src/client/pages/channel-editor.vue
@@ -1,6 +1,6 @@
 <template>
 <div>
-	<teleport to="#_teleport_header"><fa :icon="faSatelliteDish"/>{{ channelId ? $t('_channel.edit') : $t('_channel.create') }}</teleport>
+	<portal to="header"><fa :icon="faSatelliteDish"/>{{ channelId ? $t('_channel.edit') : $t('_channel.create') }}</portal>
 
 	<div class="_card">
 		<div class="_content">
diff --git a/src/client/pages/channel.vue b/src/client/pages/channel.vue
index 6fad038167..a02a48005c 100644
--- a/src/client/pages/channel.vue
+++ b/src/client/pages/channel.vue
@@ -1,6 +1,6 @@
 <template>
 <div v-if="channel">
-	<teleport to="#_teleport_header"><fa :icon="faSatelliteDish"/>{{ channel.name }}</teleport>
+	<portal to="header"><fa :icon="faSatelliteDish"/>{{ channel.name }}</portal>
 
 	<div class="wpgynlbz _panel _vMargin" :class="{ hide: !showBanner }">
 		<x-channel-follow-button :channel="channel" :full="true" class="subscribe"/>
diff --git a/src/client/pages/channels.vue b/src/client/pages/channels.vue
index bff4de95dd..804232f2f5 100644
--- a/src/client/pages/channels.vue
+++ b/src/client/pages/channels.vue
@@ -1,6 +1,6 @@
 <template>
 <div>
-	<teleport to="#_teleport_header"><fa :icon="faSatelliteDish"/>{{ $t('channel') }}</teleport>
+	<portal to="header"><fa :icon="faSatelliteDish"/>{{ $t('channel') }}</portal>
 
 	<mk-tab v-model="tab" :items="[{ label: $t('_channel.featured'), value: 'featured', icon: faFireAlt }, { label: $t('_channel.following'), value: 'following', icon: faHeart }, { label: $t('_channel.owned'), value: 'owned', icon: faEdit }]"/>
 
diff --git a/src/client/pages/doc.vue b/src/client/pages/doc.vue
index 42b0c4abab..c177e66210 100644
--- a/src/client/pages/doc.vue
+++ b/src/client/pages/doc.vue
@@ -1,6 +1,6 @@
 <template>
 <div>
-	<teleport to="#_teleport_header"><fa :icon="faFileAlt"/>{{ title }}</teleport>
+	<portal to="header"><fa :icon="faFileAlt"/>{{ title }}</portal>
 	<main class="_card">
 		<div class="_title"><fa :icon="faFileAlt"/> {{ title }}</div>
 		<div class="_content">
diff --git a/src/client/pages/docs.vue b/src/client/pages/docs.vue
index a3bde8ef4f..3541b93381 100644
--- a/src/client/pages/docs.vue
+++ b/src/client/pages/docs.vue
@@ -1,6 +1,6 @@
 <template>
 <div>
-	<teleport to="#_teleport_header"><fa :icon="faQuestionCircle"/>{{ $t('help') }}</teleport>
+	<portal to="header"><fa :icon="faQuestionCircle"/>{{ $t('help') }}</portal>
 	<main class="_card">
 		<div class="_content">
 			<ul>
diff --git a/src/client/pages/drive.vue b/src/client/pages/drive.vue
index 90788db321..4eb2595c60 100644
--- a/src/client/pages/drive.vue
+++ b/src/client/pages/drive.vue
@@ -1,13 +1,13 @@
 <template>
 <div class="full">
-	<teleport to="#_teleport_header">
+	<portal to="header">
 		<button @click="menu" class="_button _jmoebdiw_">
 			<fa :icon="faCloud" style="margin-right: 8px;"/>
 			<span v-if="folder">{{ $t('drive') }} ({{ folder.name }})</span>
 			<span v-else>{{ $t('drive') }}</span>
 			<fa :icon="menuOpened ? faAngleUp : faAngleDown" style="margin-left: 8px;"/>
 		</button>
-	</teleport>
+	</portal>
 	<x-drive ref="drive" @cd="x => folder = x"/>
 </div>
 </template>
diff --git a/src/client/pages/explore.vue b/src/client/pages/explore.vue
index 9dd439f480..fb50fa1c77 100644
--- a/src/client/pages/explore.vue
+++ b/src/client/pages/explore.vue
@@ -1,6 +1,6 @@
 <template>
 <div>
-	<teleport to="#_teleport_header"><fa :icon="faHashtag"/>{{ $t('explore') }}</teleport>
+	<portal to="header"><fa :icon="faHashtag"/>{{ $t('explore') }}</portal>
 
 	<div class="localfedi7 _panel" v-if="meta && stats && tag == null" :style="{ backgroundImage: meta.bannerUrl ? `url(${meta.bannerUrl})` : null }">
 		<header><span>{{ $t('explore', { host: meta.name || 'Misskey' }) }}</span></header>
diff --git a/src/client/pages/favorites.vue b/src/client/pages/favorites.vue
index 8fdaefa0b9..5f3749a803 100644
--- a/src/client/pages/favorites.vue
+++ b/src/client/pages/favorites.vue
@@ -1,6 +1,6 @@
 <template>
 <div>
-	<teleport to="#_teleport_header"><fa :icon="faStar"/>{{ $t('favorites') }}</teleport>
+	<portal to="header"><fa :icon="faStar"/>{{ $t('favorites') }}</portal>
 	<x-notes :pagination="pagination" :detail="true" :prop="'note'" @before="before()" @after="after()"/>
 </div>
 </template>
diff --git a/src/client/pages/featured.vue b/src/client/pages/featured.vue
index 3e65f13882..82368f5eb0 100644
--- a/src/client/pages/featured.vue
+++ b/src/client/pages/featured.vue
@@ -1,6 +1,6 @@
 <template>
 <div>
-	<teleport to="#_teleport_header"><fa :icon="faFireAlt"/>{{ $t('featured') }}</teleport>
+	<portal to="header"><fa :icon="faFireAlt"/>{{ $t('featured') }}</portal>
 	<x-notes ref="notes" :pagination="pagination" @before="before" @after="after"/>
 </div>
 </template>
diff --git a/src/client/pages/follow-requests.vue b/src/client/pages/follow-requests.vue
index f37f060d37..2642edcf58 100644
--- a/src/client/pages/follow-requests.vue
+++ b/src/client/pages/follow-requests.vue
@@ -1,6 +1,6 @@
 <template>
 <div>
-	<teleport to="#_teleport_header"><fa :icon="faUserClock"/>{{ $t('followRequests') }}</teleport>
+	<portal to="header"><fa :icon="faUserClock"/>{{ $t('followRequests') }}</portal>
 
 	<mk-pagination :pagination="pagination" class="mk-follow-requests" ref="list">
 		<template #empty>
diff --git a/src/client/pages/index.home.vue b/src/client/pages/index.home.vue
index 2562158fde..45d613162d 100644
--- a/src/client/pages/index.home.vue
+++ b/src/client/pages/index.home.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="mk-home" v-hotkey.global="keymap">
-	<teleport to="#_teleport_header" v-if="showTitle">
+	<portal to="header" v-if="showTitle">
 		<button @click="choose" class="_button _kjvfvyph_">
 			<i><fa v-if="$store.state.i.hasUnreadAntenna || $store.state.i.hasUnreadChannel" :icon="faCircle"/></i>
 			<fa v-if="src === 'home'" :icon="faHome"/>
@@ -13,7 +13,7 @@
 			<span style="margin-left: 8px;">{{ src === 'list' ? list.name : src === 'antenna' ? antenna.name : src === 'channel' ? channel.name : $t('_timelines.' + src) }}</span>
 			<fa :icon="menuOpened ? faAngleUp : faAngleDown" style="margin-left: 8px;"/>
 		</button>
-	</teleport>
+	</portal>
 
 	<div class="new" v-if="queue > 0" :style="{ width: width + 'px' }"><button class="_buttonPrimary" @click="top()">{{ $t('newNoteRecived') }}</button></div>
 
diff --git a/src/client/pages/index.welcome.vue b/src/client/pages/index.welcome.vue
index 8d35a370b1..a9089856d7 100644
--- a/src/client/pages/index.welcome.vue
+++ b/src/client/pages/index.welcome.vue
@@ -1,6 +1,6 @@
 <template>
 <div v-if="meta" class="mk-welcome">
-	<teleport to="#_teleport_header">{{ instanceName }}</teleport>
+	<portal to="header">{{ instanceName }}</portal>
 	<x-setup v-if="meta.requireSetup"/>
 	<x-entrance v-else/>
 </div>
diff --git a/src/client/pages/instance/announcements.vue b/src/client/pages/instance/announcements.vue
index 574d260fcc..2d96c4e81c 100644
--- a/src/client/pages/instance/announcements.vue
+++ b/src/client/pages/instance/announcements.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="ztgjmzrw">
-	<teleport to="#_teleport_header"><fa :icon="faBroadcastTower"/>{{ $t('announcements') }}</teleport>
+	<portal to="header"><fa :icon="faBroadcastTower"/>{{ $t('announcements') }}</portal>
 	<mk-button @click="add()" primary style="margin: 0 auto 16px auto;"><fa :icon="faPlus"/> {{ $t('add') }}</mk-button>
 	<section class="_card announcements">
 		<div class="_content announcement" v-for="announcement in announcements">
diff --git a/src/client/pages/instance/emojis.vue b/src/client/pages/instance/emojis.vue
index 9a73a810a1..d687adc69e 100644
--- a/src/client/pages/instance/emojis.vue
+++ b/src/client/pages/instance/emojis.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="mk-instance-emojis">
-	<teleport to="#_teleport_header"><fa :icon="faLaugh"/>{{ $t('customEmojis') }}</teleport>
+	<portal to="header"><fa :icon="faLaugh"/>{{ $t('customEmojis') }}</portal>
 
 	<section class="_card _vMargin local">
 		<div class="_title"><fa :icon="faLaugh"/> {{ $t('customEmojis') }}</div>
diff --git a/src/client/pages/instance/federation.vue b/src/client/pages/instance/federation.vue
index 0f6932dd6e..2b6de14c87 100644
--- a/src/client/pages/instance/federation.vue
+++ b/src/client/pages/instance/federation.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="mk-federation">
-	<teleport to="#_teleport_header"><fa :icon="faGlobe"/>{{ $t('federation') }}</teleport>
+	<portal to="header"><fa :icon="faGlobe"/>{{ $t('federation') }}</portal>
 
 	<section class="_card instances">
 		<div class="_content">
diff --git a/src/client/pages/instance/index.vue b/src/client/pages/instance/index.vue
index bdb15fb1b5..a4ebd1408d 100644
--- a/src/client/pages/instance/index.vue
+++ b/src/client/pages/instance/index.vue
@@ -1,6 +1,6 @@
 <template>
 <div v-if="meta" class="xhexznfu" v-size="{ min: [1600] }">
-	<teleport to="#_teleport_header"><fa :icon="faServer"/>{{ $t('instance') }}</teleport>
+	<portal to="header"><fa :icon="faServer"/>{{ $t('instance') }}</portal>
 
 	<mk-folder>
 		<template #header><fa :icon="faTachometerAlt"/> {{ $t('overview') }}</template>
diff --git a/src/client/pages/instance/queue.vue b/src/client/pages/instance/queue.vue
index 0cc7964b7b..b6b82ed0d7 100644
--- a/src/client/pages/instance/queue.vue
+++ b/src/client/pages/instance/queue.vue
@@ -1,6 +1,6 @@
 <template>
 <div>
-	<teleport to="#_teleport_header"><fa :icon="faExchangeAlt"/>{{ $t('jobQueue') }}</teleport>
+	<portal to="header"><fa :icon="faExchangeAlt"/>{{ $t('jobQueue') }}</portal>
 
 	<x-queue :connection="connection" domain="inbox">
 		<template #title><fa :icon="faExchangeAlt"/> In</template>
diff --git a/src/client/pages/instance/relays.vue b/src/client/pages/instance/relays.vue
index a41bc8ea6d..2ee442b9f4 100644
--- a/src/client/pages/instance/relays.vue
+++ b/src/client/pages/instance/relays.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="relaycxt">
-	<teleport to="#_teleport_header"><fa :icon="faProjectDiagram"/>{{ $t('relays') }}</teleport>
+	<portal to="header"><fa :icon="faProjectDiagram"/>{{ $t('relays') }}</portal>
 
 	<section class="_card _vMargin add">
 		<div class="_title"><fa :icon="faPlus"/> {{ $t('addRelay') }}</div>
diff --git a/src/client/pages/instance/settings.vue b/src/client/pages/instance/settings.vue
index 2cfbeb50b8..e21b4a5724 100644
--- a/src/client/pages/instance/settings.vue
+++ b/src/client/pages/instance/settings.vue
@@ -1,6 +1,6 @@
 <template>
 <div v-if="meta">
-	<teleport to="#_teleport_header"><fa :icon="faCog"/>{{ $t('settings') }}</teleport>
+	<portal to="header"><fa :icon="faCog"/>{{ $t('settings') }}</portal>
 
 	<section class="_card _vMargin info">
 		<div class="_title"><fa :icon="faInfoCircle"/> {{ $t('basicInfo') }}</div>
diff --git a/src/client/pages/instance/users.user.vue b/src/client/pages/instance/users.user.vue
index f42cb21527..219ba65178 100644
--- a/src/client/pages/instance/users.user.vue
+++ b/src/client/pages/instance/users.user.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="vrcsvlkm" v-if="user && info">
-	<teleport to="#_teleport_header" v-if="user"><mk-avatar class="avatar" :user="user" :disable-preview="true"/><mk-user-name :user="user" :nowrap="false" class="name"/></teleport>
+	<portal to="header" v-if="user"><mk-avatar class="avatar" :user="user" :disable-preview="true"/><mk-user-name :user="user" :nowrap="false" class="name"/></portal>
 
 	<section class="_card">
 		<div class="_title">
diff --git a/src/client/pages/instance/users.vue b/src/client/pages/instance/users.vue
index 08e2709807..c50c8070a8 100644
--- a/src/client/pages/instance/users.vue
+++ b/src/client/pages/instance/users.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="mk-instance-users">
-	<teleport to="#_teleport_header"><fa :icon="faUsers"/>{{ $t('users') }}</teleport>
+	<portal to="header"><fa :icon="faUsers"/>{{ $t('users') }}</portal>
 
 	<section class="_card _vMargin lookup">
 		<div class="_title"><fa :icon="faSearch"/> {{ $t('lookup') }}</div>
diff --git a/src/client/pages/mentions.vue b/src/client/pages/mentions.vue
index 99a3f93538..cb0209b3a0 100644
--- a/src/client/pages/mentions.vue
+++ b/src/client/pages/mentions.vue
@@ -1,6 +1,6 @@
 <template>
 <div>
-	<teleport to="#_teleport_header"><fa :icon="faAt"/>{{ $t('mentions') }}</teleport>
+	<portal to="header"><fa :icon="faAt"/>{{ $t('mentions') }}</portal>
 	<x-notes :pagination="pagination" @before="before()" @after="after()"/>
 </div>
 </template>
diff --git a/src/client/pages/messages.vue b/src/client/pages/messages.vue
index bfeb6b190c..b99e7eb85a 100644
--- a/src/client/pages/messages.vue
+++ b/src/client/pages/messages.vue
@@ -1,6 +1,6 @@
 <template>
 <div>
-	<teleport to="#_teleport_header"><fa :icon="faEnvelope"/>{{ $t('directNotes') }}</teleport>
+	<portal to="header"><fa :icon="faEnvelope"/>{{ $t('directNotes') }}</portal>
 	<x-notes :pagination="pagination" @before="before()" @after="after()"/>
 </div>
 </template>
diff --git a/src/client/pages/messaging/index.vue b/src/client/pages/messaging/index.vue
index 22614f5fcb..b54855f454 100644
--- a/src/client/pages/messaging/index.vue
+++ b/src/client/pages/messaging/index.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="mk-messaging" v-size="{ max: [400] }">
-	<teleport to="#_teleport_header"><fa :icon="faComments"/>{{ $t('messaging') }}</teleport>
+	<portal to="header"><fa :icon="faComments"/>{{ $t('messaging') }}</portal>
 
 	<mk-button @click="start" primary class="start"><fa :icon="faPlus"/> {{ $t('startMessaging') }}</mk-button>
 
diff --git a/src/client/pages/messaging/messaging-room.vue b/src/client/pages/messaging/messaging-room.vue
index 376b6f06d6..427a869083 100644
--- a/src/client/pages/messaging/messaging-room.vue
+++ b/src/client/pages/messaging/messaging-room.vue
@@ -4,10 +4,10 @@
 	@drop.prevent.stop="onDrop"
 >
 	<template v-if="!fetching && user">
-		<teleport to="#_teleport_header"><mk-avatar class="avatar" :user="user" :disable-preview="true"/><mk-user-name :user="user" :nowrap="false" class="name"/></teleport>
+		<portal to="header"><mk-avatar class="avatar" :user="user" :disable-preview="true"/><mk-user-name :user="user" :nowrap="false" class="name"/></portal>
 	</template>
 	<template v-if="!fetching && group">
-		<teleport to="#_teleport_header"><fa :icon="faUsers"/>{{ group.name }}</teleport>
+		<portal to="header"><fa :icon="faUsers"/>{{ group.name }}</portal>
 	</template>
 
 	<div class="body">
diff --git a/src/client/pages/my-antennas/index.vue b/src/client/pages/my-antennas/index.vue
index 9f3e70046c..ab10d8f461 100644
--- a/src/client/pages/my-antennas/index.vue
+++ b/src/client/pages/my-antennas/index.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="ieepwinx">
-	<teleport to="#_teleport_header"><fa :icon="faSatellite"/>{{ $t('manageAntennas') }}</teleport>
+	<portal to="header"><fa :icon="faSatellite"/>{{ $t('manageAntennas') }}</portal>
 
 	<mk-button @click="create" primary class="add"><fa :icon="faPlus"/> {{ $t('add') }}</mk-button>
 
diff --git a/src/client/pages/my-groups/group.vue b/src/client/pages/my-groups/group.vue
index 14cddc865e..75e3538fc3 100644
--- a/src/client/pages/my-groups/group.vue
+++ b/src/client/pages/my-groups/group.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="mk-group-page">
-	<teleport to="#_teleport_header"><fa :icon="faUsers"/>{{ group.name }}</teleport>
+	<portal to="header"><fa :icon="faUsers"/>{{ group.name }}</portal>
 
 	<transition name="zoom" mode="out-in">
 		<div v-if="group" class="_card _vMargin">
diff --git a/src/client/pages/my-groups/index.vue b/src/client/pages/my-groups/index.vue
index 88d7efb8f2..14e81e9fb1 100644
--- a/src/client/pages/my-groups/index.vue
+++ b/src/client/pages/my-groups/index.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="">
-	<teleport to="#_teleport_header"><fa :icon="faUsers"/>{{ $t('groups') }}</teleport>
+	<portal to="header"><fa :icon="faUsers"/>{{ $t('groups') }}</portal>
 
 	<mk-button @click="create" primary style="margin: 0 auto var(--margin) auto;"><fa :icon="faPlus"/> {{ $t('createGroup') }}</mk-button>
 
diff --git a/src/client/pages/my-lists/index.vue b/src/client/pages/my-lists/index.vue
index 8f50aee9d4..73d002f626 100644
--- a/src/client/pages/my-lists/index.vue
+++ b/src/client/pages/my-lists/index.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="qkcjvfiv">
-	<teleport to="#_teleport_header"><fa :icon="faListUl"/>{{ $t('manageLists') }}</teleport>
+	<portal to="header"><fa :icon="faListUl"/>{{ $t('manageLists') }}</portal>
 
 	<mk-button @click="create" primary class="add"><fa :icon="faPlus"/> {{ $t('createList') }}</mk-button>
 
diff --git a/src/client/pages/my-lists/list.vue b/src/client/pages/my-lists/list.vue
index 6a4d4a7743..3c1bb56d79 100644
--- a/src/client/pages/my-lists/list.vue
+++ b/src/client/pages/my-lists/list.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="mk-list-page">
-	<teleport to="#_teleport_header"><fa :icon="faListUl"/>{{ list.name }}</teleport>
+	<portal to="header"><fa :icon="faListUl"/>{{ list.name }}</portal>
 
 	<transition name="zoom" mode="out-in">
 		<div v-if="list" class="_card _vMargin">
diff --git a/src/client/pages/my-settings/index.vue b/src/client/pages/my-settings/index.vue
index 71de1db98a..4d637b3097 100644
--- a/src/client/pages/my-settings/index.vue
+++ b/src/client/pages/my-settings/index.vue
@@ -1,6 +1,6 @@
 <template>
 <div>
-	<teleport to="#_teleport_header"><fa :icon="faCog"/>{{ $t('accountSettings') }}</teleport>
+	<portal to="header"><fa :icon="faCog"/>{{ $t('accountSettings') }}</portal>
 
 	<x-profile-setting class="_vMargin"/>
 	<x-privacy-setting class="_vMargin"/>
diff --git a/src/client/pages/not-found.vue b/src/client/pages/not-found.vue
index 8cdffd08f5..df32369adf 100644
--- a/src/client/pages/not-found.vue
+++ b/src/client/pages/not-found.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="ipledcug">
-	<teleport to="#_teleport_header"><fa :icon="faExclamationTriangle"/>{{ $t('notFound') }}</teleport>
+	<portal to="header"><fa :icon="faExclamationTriangle"/>{{ $t('notFound') }}</portal>
 
 	<div class="_fullinfo">
 		<img src="https://xn--931a.moe/assets/not-found.jpg" class="_ghost"/>
diff --git a/src/client/pages/note.vue b/src/client/pages/note.vue
index d3b2093c0c..67ac986a37 100644
--- a/src/client/pages/note.vue
+++ b/src/client/pages/note.vue
@@ -1,12 +1,12 @@
 <template>
 <div class="mk-note-page">
-	<teleport to="#_teleport_header" v-if="note">
+	<portal to="header" v-if="note">
 		<mk-avatar class="avatar" :user="note.user" :disable-preview="true"/>
 		<mfm 
 			:text="$t('noteOf', { user: note.user.name || note.user.username })"
 			:plain="true" :nowrap="true" :custom-emojis="note.user.emojis" :is-note="false"
 		/>
-	</teleport>
+	</portal>
 
 	<div v-if="note">
 		<button class="_panel _button" v-if="hasNext && !showNext" @click="showNext = true" style="margin: 0 auto var(--margin) auto;"><fa :icon="faChevronUp"/></button>
diff --git a/src/client/pages/notifications.vue b/src/client/pages/notifications.vue
index 6591cf4e80..d7b650b1a5 100644
--- a/src/client/pages/notifications.vue
+++ b/src/client/pages/notifications.vue
@@ -1,6 +1,6 @@
 <template>
 <div>
-	<teleport to="#_teleport_header"><fa :icon="faBell"/>{{ $t('notifications') }}</teleport>
+	<portal to="header"><fa :icon="faBell"/>{{ $t('notifications') }}</portal>
 	<x-notifications @before="before" @after="after" page/>
 </div>
 </template>
diff --git a/src/client/pages/page.vue b/src/client/pages/page.vue
index d1fa7917a3..340d06ebcd 100644
--- a/src/client/pages/page.vue
+++ b/src/client/pages/page.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="xcukqgmh">
-	<teleport to="#_teleport_header" v-if="page"><mk-avatar class="avatar" :user="page.user" :disable-preview="true"/>{{ page.title || page.name }}</teleport>
+	<portal to="header" v-if="page"><mk-avatar class="avatar" :user="page.user" :disable-preview="true"/>{{ page.title || page.name }}</portal>
 
 	<div class="_card" v-if="page" :key="page.id">
 		<div class="_title">{{ page.title }}</div>
diff --git a/src/client/pages/pages.vue b/src/client/pages/pages.vue
index 6a31e1d354..ebb74f3132 100644
--- a/src/client/pages/pages.vue
+++ b/src/client/pages/pages.vue
@@ -1,6 +1,6 @@
 <template>
 <div>
-	<teleport to="#_teleport_header"><fa :icon="faStickyNote"/>{{ $t('pages') }}</teleport>
+	<portal to="header"><fa :icon="faStickyNote"/>{{ $t('pages') }}</portal>
 
 	<mk-tab v-model="tab" :items="[{ label: $t('_pages.my'), value: 'my', icon: faEdit }, { label: $t('_pages.liked'), value: 'liked', icon: faHeart }]"/>
 
diff --git a/src/client/pages/preferences/index.vue b/src/client/pages/preferences/index.vue
index 9b48d19fed..3589103e71 100644
--- a/src/client/pages/preferences/index.vue
+++ b/src/client/pages/preferences/index.vue
@@ -1,6 +1,6 @@
 <template>
 <div>
-	<teleport to="#_teleport_header"><fa :icon="faCog"/>{{ $t('clinetSettings') }}</teleport>
+	<portal to="header"><fa :icon="faCog"/>{{ $t('clinetSettings') }}</portal>
 
 	<router-link v-if="$store.getters.isSignedIn" class="_panel _buttonPrimary" to="/my/settings" style="margin-bottom: var(--margin);">{{ $t('accountSettings') }}</router-link>
 
diff --git a/src/client/pages/room/room.vue b/src/client/pages/room/room.vue
index fbf4c6f913..c74b1fde29 100644
--- a/src/client/pages/room/room.vue
+++ b/src/client/pages/room/room.vue
@@ -1,12 +1,12 @@
 <template>
 <div class="hveuntkp">
-	<teleport to="#_teleport_header" v-if="user">
+	<portal to="header" v-if="user">
 		<mk-avatar class="avatar" :user="user" :disable-preview="true"/>
 		<mfm 
 			:text="$t('_rooms.roomOf', { user: user.name || user.username })"
 			:plain="true" :nowrap="true" :custom-emojis="user.emojis" :is-note="false"
 		/>
-	</teleport>
+	</portal>
 
 	<div class="controller _card _vMargin" v-if="objectSelected">
 		<div class="_content">
diff --git a/src/client/pages/scratchpad.vue b/src/client/pages/scratchpad.vue
index 889ceb007d..8082a9b752 100644
--- a/src/client/pages/scratchpad.vue
+++ b/src/client/pages/scratchpad.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="">
-	<teleport to="#_teleport_header"><fa :icon="faTerminal"/>{{ $t('scratchpad') }}</teleport>
+	<portal to="header"><fa :icon="faTerminal"/>{{ $t('scratchpad') }}</portal>
 
 	<div class="_panel">
 		<prism-editor class="_code" v-model="code" :highlight="highlighter" :line-numbers="false"/>
diff --git a/src/client/pages/search.vue b/src/client/pages/search.vue
index 8c80308c82..76a55e2448 100644
--- a/src/client/pages/search.vue
+++ b/src/client/pages/search.vue
@@ -1,6 +1,6 @@
 <template>
 <div>
-	<teleport to="#_teleport_header"><fa :icon="faSearch"/>{{ $t('searchWith', { q: $route.query.q }) }}</teleport>
+	<portal to="header"><fa :icon="faSearch"/>{{ $t('searchWith', { q: $route.query.q }) }}</portal>
 	<x-notes ref="notes" :pagination="pagination" @before="before" @after="after"/>
 </div>
 </template>
diff --git a/src/client/pages/share.vue b/src/client/pages/share.vue
index a6112f994e..5f1de9ceed 100644
--- a/src/client/pages/share.vue
+++ b/src/client/pages/share.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="">
-	<teleport to="#_teleport_header"><fa :icon="faShareAlt"/>{{ $t('share') }}</teleport>
+	<portal to="header"><fa :icon="faShareAlt"/>{{ $t('share') }}</portal>
 
 	<section class="_card">
 		<div class="_title" v-if="title">{{ title }}</div>
diff --git a/src/client/pages/tag.vue b/src/client/pages/tag.vue
index 5b0325fe54..7f1b9f922b 100644
--- a/src/client/pages/tag.vue
+++ b/src/client/pages/tag.vue
@@ -1,6 +1,6 @@
 <template>
 <div>
-	<teleport to="#_teleport_header"><fa :icon="faHashtag"/>{{ $route.params.tag }}</teleport>
+	<portal to="header"><fa :icon="faHashtag"/>{{ $route.params.tag }}</portal>
 
 	<x-notes ref="notes" :pagination="pagination" @before="before" @after="after"/>
 </div>
diff --git a/src/client/pages/theme-editor.vue b/src/client/pages/theme-editor.vue
index bdd59042ea..8e6c531daa 100644
--- a/src/client/pages/theme-editor.vue
+++ b/src/client/pages/theme-editor.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="t9makv94">
-	<teleport to="#_teleport_header"><fa :icon="faPalette"/>{{ $t('themeEditor') }}</teleport>
+	<portal to="header"><fa :icon="faPalette"/>{{ $t('themeEditor') }}</portal>
 
 	<section class="_card">
 		<div class="_content">
diff --git a/src/client/pages/user/index.vue b/src/client/pages/user/index.vue
index 3e8df6bc2a..33d3e4ef4f 100644
--- a/src/client/pages/user/index.vue
+++ b/src/client/pages/user/index.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="mk-user-page" v-if="user" v-size="{ max: [500] }">
-	<teleport to="#_teleport_header" v-if="user"><mk-avatar class="avatar" :user="user" :disable-preview="true"/><mk-user-name :user="user" :nowrap="false" class="name"/></teleport>
+	<portal to="header" v-if="user"><mk-avatar class="avatar" :user="user" :disable-preview="true"/><mk-user-name :user="user" :nowrap="false" class="name"/></portal>
 
 	<mk-remote-caution v-if="user.host != null" :href="user.url" style="margin-bottom: var(--margin)"/>
 	<div class="punished _panel" v-if="user.isSuspended"><fa :icon="faExclamationTriangle" style="margin-right: 8px;"/> {{ $t('userSuspended') }}</div>