From c99427b1e75b76ca3808aac2aa39e5c0d33c0ced Mon Sep 17 00:00:00 2001
From: uboar <uboaruboar@gmail.com>
Date: Sat, 11 Mar 2023 13:02:19 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=AD=E3=82=B4=E5=91=A8=E3=82=8A=E3=82=92?=
 =?UTF-8?q?=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/backend/src/server/web/style.css     |   2 +
 packages/frontend/src/pages/about.vue         | 170 ++++++++-------
 packages/frontend/src/pages/admin/index.vue   |  62 +++---
 .../frontend/src/pages/welcome.entrance.a.vue | 181 +++++++++-------
 .../src/ui/_common_/navbar-for-mobile.vue     | 138 ++++++------
 packages/frontend/src/ui/_common_/navbar.vue  | 204 ++++++++++--------
 packages/frontend/src/ui/classic.sidebar.vue  | 122 ++++++-----
 packages/frontend/src/ui/visitor/a.vue        | 108 +++++-----
 packages/frontend/src/ui/visitor/kanban.vue   | 121 ++++++-----
 .../src/widgets/WidgetInstanceInfo.vue        |  24 ++-
 10 files changed, 614 insertions(+), 518 deletions(-)

diff --git a/packages/backend/src/server/web/style.css b/packages/backend/src/server/web/style.css
index d59f00fe164a..8730d537ee64 100644
--- a/packages/backend/src/server/web/style.css
+++ b/packages/backend/src/server/web/style.css
@@ -26,6 +26,8 @@ html {
 	width: 64px;
 	height: 64px;
 	pointer-events: none;
+	background: #fff;
+	border-radius: 50%;
 }
 
 #splashSpinner {
diff --git a/packages/frontend/src/pages/about.vue b/packages/frontend/src/pages/about.vue
index be0c1828a32c..6fc4c575227e 100644
--- a/packages/frontend/src/pages/about.vue
+++ b/packages/frontend/src/pages/about.vue
@@ -1,88 +1,90 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer v-if="tab === 'overview'" :content-max="600" :margin-min="20">
-		<div class="_gaps_m">
-			<div class="fwhjspax" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }">
-				<div class="content">
-					<img :src="$instance.iconUrl ?? $instance.faviconUrl ?? '/favicon.ico'" alt="" class="icon"/>
-					<div class="name">
-						<b>{{ $instance.name ?? host }}</b>
+	<MkStickyContainer>
+		<template #header>
+			<MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs" />
+		</template>
+		<MkSpacer v-if="tab === 'overview'" :content-max="600" :margin-min="20">
+			<div class="_gaps_m">
+				<div class="fwhjspax" :style="{ backgroundImage: `url(${$instance.bannerUrl})` }">
+					<div class="content">
+						<!-- <img :src="$instance.iconUrl ?? $instance.faviconUrl ?? '/favicon.ico'" alt="" class="icon" /> -->
+						<img src="https://s3.ap-northeast-1.wasabisys.com/s3.nicomedkey.cc/public/nicomedkey/logo1_w.svg" alt="" class="icon" />
 					</div>
 				</div>
-			</div>
 
-			<MkKeyValue>
-				<template #key>{{ i18n.ts.description }}</template>
-				<template #value><div v-html="$instance.description"></div></template>
-			</MkKeyValue>
-
-			<FormSection>
-				<div class="_gaps_m">
-					<MkKeyValue :copy="version">
-						<template #key>Misskey</template>
-						<template #value>{{ version }}</template>
-					</MkKeyValue>
-					<div v-html="i18n.t('poweredByMisskeyDescription', { name: $instance.name ?? host })">
-					</div>
-					<FormLink to="/about-misskey">{{ i18n.ts.aboutMisskey }}</FormLink>
-				</div>
-			</FormSection>
-
-			<FormSection>
-				<div class="_gaps_m">
-					<FormSplit>
-						<MkKeyValue>
-							<template #key>{{ i18n.ts.administrator }}</template>
-							<template #value>{{ $instance.maintainerName }}</template>
-						</MkKeyValue>
-						<MkKeyValue>
-							<template #key>{{ i18n.ts.contact }}</template>
-							<template #value>{{ $instance.maintainerEmail }}</template>
-						</MkKeyValue>
-					</FormSplit>
-					<FormLink v-if="$instance.tosUrl" :to="$instance.tosUrl" external>{{ i18n.ts.tos }}</FormLink>
-				</div>
-			</FormSection>
+				<MkKeyValue>
+					<template #key>{{ i18n.ts.description }}</template>
+					<template #value>
+						<div v-html="$instance.description"></div>
+					</template>
+				</MkKeyValue>
 
-			<FormSuspense :p="initStats">
 				<FormSection>
-					<template #label>{{ i18n.ts.statistics }}</template>
-					<FormSplit>
-						<MkKeyValue>
-							<template #key>{{ i18n.ts.users }}</template>
-							<template #value>{{ number(stats.originalUsersCount) }}</template>
-						</MkKeyValue>
-						<MkKeyValue>
-							<template #key>{{ i18n.ts.notes }}</template>
-							<template #value>{{ number(stats.originalNotesCount) }}</template>
+					<div class="_gaps_m">
+						<MkKeyValue :copy="version">
+							<template #key>Misskey</template>
+							<template #value>{{ version }}</template>
 						</MkKeyValue>
-					</FormSplit>
+						<div v-html="i18n.t('poweredByMisskeyDescription', { name: $instance.name ?? host })">
+						</div>
+						<FormLink to="/about-misskey">{{ i18n.ts.aboutMisskey }}</FormLink>
+					</div>
 				</FormSection>
-			</FormSuspense>
-
-			<FormSection>
-				<template #label>Well-known resources</template>
-				<div class="_formLinks">
-					<FormLink :to="`/.well-known/host-meta`" external>host-meta</FormLink>
-					<FormLink :to="`/.well-known/host-meta.json`" external>host-meta.json</FormLink>
-					<FormLink :to="`/.well-known/nodeinfo`" external>nodeinfo</FormLink>
-					<FormLink :to="`/robots.txt`" external>robots.txt</FormLink>
-					<FormLink :to="`/manifest.json`" external>manifest.json</FormLink>
-				</div>
-			</FormSection>
-		</div>
-	</MkSpacer>
-	<MkSpacer v-else-if="tab === 'emojis'" :content-max="1000" :margin-min="20">
-		<XEmojis/>
-	</MkSpacer>
-	<MkSpacer v-else-if="tab === 'federation'" :content-max="1000" :margin-min="20">
-		<XFederation/>
-	</MkSpacer>
-	<MkSpacer v-else-if="tab === 'charts'" :content-max="1000" :margin-min="20">
-		<MkInstanceStats/>
-	</MkSpacer>
-</MkStickyContainer>
+
+				<FormSection>
+					<div class="_gaps_m">
+						<FormSplit>
+							<MkKeyValue>
+								<template #key>{{ i18n.ts.administrator }}</template>
+								<template #value>{{ $instance.maintainerName }}</template>
+							</MkKeyValue>
+							<MkKeyValue>
+								<template #key>{{ i18n.ts.contact }}</template>
+								<template #value>{{ $instance.maintainerEmail }}</template>
+							</MkKeyValue>
+						</FormSplit>
+						<FormLink v-if="$instance.tosUrl" :to="$instance.tosUrl" external>{{ i18n.ts.tos }}</FormLink>
+					</div>
+				</FormSection>
+
+				<FormSuspense :p="initStats">
+					<FormSection>
+						<template #label>{{ i18n.ts.statistics }}</template>
+						<FormSplit>
+							<MkKeyValue>
+								<template #key>{{ i18n.ts.users }}</template>
+								<template #value>{{ number(stats.originalUsersCount) }}</template>
+							</MkKeyValue>
+							<MkKeyValue>
+								<template #key>{{ i18n.ts.notes }}</template>
+								<template #value>{{ number(stats.originalNotesCount) }}</template>
+							</MkKeyValue>
+						</FormSplit>
+					</FormSection>
+				</FormSuspense>
+
+				<FormSection>
+					<template #label>Well-known resources</template>
+					<div class="_formLinks">
+						<FormLink :to="`/.well-known/host-meta`" external>host-meta</FormLink>
+						<FormLink :to="`/.well-known/host-meta.json`" external>host-meta.json</FormLink>
+						<FormLink :to="`/.well-known/nodeinfo`" external>nodeinfo</FormLink>
+						<FormLink :to="`/robots.txt`" external>robots.txt</FormLink>
+						<FormLink :to="`/manifest.json`" external>manifest.json</FormLink>
+					</div>
+				</FormSection>
+			</div>
+		</MkSpacer>
+		<MkSpacer v-else-if="tab === 'emojis'" :content-max="1000" :margin-min="20">
+			<XEmojis />
+		</MkSpacer>
+		<MkSpacer v-else-if="tab === 'federation'" :content-max="1000" :margin-min="20">
+			<XFederation />
+		</MkSpacer>
+		<MkSpacer v-else-if="tab === 'charts'" :content-max="1000" :margin-min="20">
+			<MkInstanceStats />
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -111,6 +113,8 @@ const props = withDefaults(defineProps<{
 let stats = $ref(null);
 let tab = $ref(props.initialTab);
 
+const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
 watch($$(tab), () => {
 	if (tab === 'charts') {
 		claimAchievement('viewInstanceChart');
@@ -154,18 +158,19 @@ definePageMetadata(computed(() => ({
 	overflow: clip;
 	background-size: cover;
 	background-position: center center;
+	background-color: #333333;
 
-	> .content {
+	>.content {
 		overflow: hidden;
 
-		> .icon {
+		>.icon {
 			display: block;
-			margin: 16px auto 0 auto;
+			margin: 4px auto 4px auto;
 			height: 64px;
 			border-radius: 8px;
 		}
 
-		> .name {
+		>.name {
 			display: block;
 			padding: 16px;
 			color: #fff;
@@ -173,5 +178,4 @@ definePageMetadata(computed(() => ({
 			background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
 		}
 	}
-}
-</style>
+}</style>
diff --git a/packages/frontend/src/pages/admin/index.vue b/packages/frontend/src/pages/admin/index.vue
index b054999303f0..d3f0a6e6fef3 100644
--- a/packages/frontend/src/pages/admin/index.vue
+++ b/packages/frontend/src/pages/admin/index.vue
@@ -1,25 +1,35 @@
 <template>
-<div ref="el" class="hiyeyicy" :class="{ wide: !narrow }">
-	<div v-if="!narrow || currentPage?.route.name == null" class="nav">	
-		<MkSpacer :content-max="700" :margin-min="16">
-			<div class="lxpfedzu">
-				<div class="banner">
-					<img :src="$instance.iconUrl || '/favicon.ico'" alt="" class="icon"/>
-				</div>
+	<div ref="el" class="hiyeyicy" :class="{ wide: !narrow }">
+		<div v-if="!narrow || currentPage?.route.name == null" class="nav">
+			<MkSpacer :content-max="700" :margin-min="16">
+				<div class="lxpfedzu">
+					<div class="banner">
+						<!-- <img :src="$instance.iconUrl || '/favicon.ico'" alt="" class="icon"/> -->
+						<img src="https://s3.ap-northeast-1.wasabisys.com/s3.nicomedkey.cc/public/nicomedkey/logo1_w.svg" alt=""
+							class="icon" />
+					</div>
 
-				<MkInfo v-if="thereIsUnresolvedAbuseReport" warn class="info">{{ i18n.ts.thereIsUnresolvedAbuseReportWarning }} <MkA to="/admin/abuses" class="_link">{{ i18n.ts.check }}</MkA></MkInfo>
-				<MkInfo v-if="noMaintainerInformation" warn class="info">{{ i18n.ts.noMaintainerInformationWarning }} <MkA to="/admin/settings" class="_link">{{ i18n.ts.configure }}</MkA></MkInfo>
-				<MkInfo v-if="noBotProtection" warn class="info">{{ i18n.ts.noBotProtectionWarning }} <MkA to="/admin/security" class="_link">{{ i18n.ts.configure }}</MkA></MkInfo>
-				<MkInfo v-if="noEmailServer" warn class="info">{{ i18n.ts.noEmailServerWarning }} <MkA to="/admin/email-settings" class="_link">{{ i18n.ts.configure }}</MkA></MkInfo>
+					<MkInfo v-if="thereIsUnresolvedAbuseReport" warn class="info">{{ i18n.ts.thereIsUnresolvedAbuseReportWarning }}
+						<MkA to="/admin/abuses" class="_link">{{ i18n.ts.check }}</MkA>
+					</MkInfo>
+					<MkInfo v-if="noMaintainerInformation" warn class="info">{{ i18n.ts.noMaintainerInformationWarning }} <MkA
+							to="/admin/settings" class="_link">{{ i18n.ts.configure }}</MkA>
+					</MkInfo>
+					<MkInfo v-if="noBotProtection" warn class="info">{{ i18n.ts.noBotProtectionWarning }} <MkA to="/admin/security"
+							class="_link">{{ i18n.ts.configure }}</MkA>
+					</MkInfo>
+					<MkInfo v-if="noEmailServer" warn class="info">{{ i18n.ts.noEmailServerWarning }} <MkA
+							to="/admin/email-settings" class="_link">{{ i18n.ts.configure }}</MkA>
+					</MkInfo>
 
-				<MkSuperMenu :def="menuDef" :grid="currentPage?.route.name == null"></MkSuperMenu>
-			</div>
-		</MkSpacer>
-	</div>
-	<div v-if="!(narrow && currentPage?.route.name == null)" class="main">
-		<RouterView/>
+					<MkSuperMenu :def="menuDef" :grid="currentPage?.route.name == null"></MkSuperMenu>
+				</div>
+			</MkSpacer>
+		</div>
+		<div v-if="!(narrow && currentPage?.route.name == null)" class="main">
+			<RouterView />
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
@@ -278,7 +288,7 @@ defineExpose({
 		margin: 0 auto;
 		height: 100%;
 
-		> .nav {
+		>.nav {
 			width: 32%;
 			max-width: 280px;
 			box-sizing: border-box;
@@ -287,29 +297,29 @@ defineExpose({
 			height: 100%;
 		}
 
-		> .main {
+		>.main {
 			flex: 1;
 			min-width: 0;
 		}
 	}
 
-	> .nav {
+	>.nav {
 		.lxpfedzu {
-			> .info {
+			>.info {
 				margin: 16px 0;
 			}
 
-			> .banner {
+			>.banner {
 				margin: 16px;
 
-				> .icon {
+				>.icon {
 					display: block;
 					margin: auto;
 					height: 42px;
 					border-radius: 8px;
+					filter: drop-shadow(0 0 8px black);
 				}
 			}
 		}
 	}
-}
-</style>
+}</style>
diff --git a/packages/frontend/src/pages/welcome.entrance.a.vue b/packages/frontend/src/pages/welcome.entrance.a.vue
index b6f9b3eb2364..44d5b8a9b15f 100644
--- a/packages/frontend/src/pages/welcome.entrance.a.vue
+++ b/packages/frontend/src/pages/welcome.entrance.a.vue
@@ -1,58 +1,70 @@
 <template>
-<div v-if="meta" class="rsqzvsbo">
-	<MkFeaturedPhotos class="bg"/>
-	<XTimeline class="tl"/>
-	<div class="shape1"></div>
-	<div class="shape2"></div>
-	<img src="/client-assets/misskey.svg" class="misskey"/>
-	<div class="emojis">
-		<MkEmoji :normal="true" :no-style="true" emoji="👍"/>
-		<MkEmoji :normal="true" :no-style="true" emoji="❤"/>
-		<MkEmoji :normal="true" :no-style="true" emoji="😆"/>
-		<MkEmoji :normal="true" :no-style="true" emoji="🎉"/>
-		<MkEmoji :normal="true" :no-style="true" emoji="🍮"/>
-	</div>
-	<div class="contents">
-		<div class="main">
-			<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
-			<button class="_button _acrylic menu" @click="showMenu"><i class="ti ti-dots"></i></button>
-			<div class="fg">
-				<h1>
-					<!-- 背景色によってはロゴが見えなくなるのでとりあえず無効に -->
-					<!-- <img class="logo" v-if="meta.logoImageUrl" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span> -->
-					<span class="text">{{ instanceName }}</span>
-				</h1>
-				<div class="about">
-					<!-- eslint-disable-next-line vue/no-v-html -->
-					<div class="desc" v-html="meta.description || i18n.ts.headlineMisskey"></div>
-				</div>
-				<div v-if="instance.disableRegistration" class="warn">
-					<MkInfo warn>{{ i18n.ts.invitationRequiredToRegister }}</MkInfo>
+	<div v-if="meta" class="rsqzvsbo">
+		<MkFeaturedPhotos class="bg" />
+		<XTimeline class="tl" />
+		<div class="shape1"></div>
+		<div class="shape2"></div>
+		<div class="misskey-parent">
+			<div class="powered-by">
+				Powered By</div>
+			<img src="/client-assets/misskey.svg" class="misskey" />
+		</div>
+		<div class="emojis">
+			<MkEmoji :normal="true" :no-style="true" emoji="👍" />
+			<MkEmoji :normal="true" :no-style="true" emoji="❤" />
+			<MkEmoji :normal="true" :no-style="true" emoji="😆" />
+			<MkEmoji :normal="true" :no-style="true" emoji="🎉" />
+			<MkEmoji :normal="true" :no-style="true" emoji="🍮" />
+		</div>
+		<div class="contents">
+			<div class="main">
+				<!-- <img v-if="isDarkMode" src="https://s3.ap-northeast-1.wasabisys.com/s3.nicomedkey.cc/public/nicomedkey/icon_w.svg"
+					alt="" class="icon" />
+				<img v-else src="https://s3.ap-northeast-1.wasabisys.com/s3.nicomedkey.cc/public/nicomedkey/icon_b.svg" alt=""
+					class="icon" /> -->
+				<button class="_button _acrylic menu" @click="showMenu"><i class="ti ti-dots"></i></button>
+				<div class="fg">
+					<h1>
+						<!-- 背景色によってはロゴが見えなくなるのでとりあえず無効に -->
+						<img class="logo" v-if="isDarkMode"
+							src="https://s3.ap-northeast-1.wasabisys.com/s3.nicomedkey.cc/public/nicomedkey/logo1_w.svg">
+						<img class="logo" v-else
+							src="https://s3.ap-northeast-1.wasabisys.com/s3.nicomedkey.cc/public/nicomedkey/logo1.svg">
+						<!-- <span class="text">{{ instanceName }}</span> -->
+					</h1>
+					<div class="about">
+						<!-- eslint-disable-next-line vue/no-v-html -->
+						<div class="desc" v-html="meta.description || i18n.ts.headlineMisskey"></div>
+					</div>
+					<div v-if="instance.disableRegistration" class="warn">
+						<MkInfo warn>{{ i18n.ts.invitationRequiredToRegister }}</MkInfo>
+					</div>
+					<div class="action _gaps_s">
+						<MkButton full rounded gradate data-cy-signup style="margin-right: 12px;" @click="signup()">{{
+							i18n.ts.joinThisServer }}</MkButton>
+						<MkButton full rounded @click="exploreOtherServers()">{{ i18n.ts.exploreOtherServers }}</MkButton>
+						<MkButton full rounded data-cy-signin @click="signin()">{{ i18n.ts.login }}</MkButton>
+					</div>
 				</div>
-				<div class="action _gaps_s">
-					<MkButton full rounded gradate data-cy-signup style="margin-right: 12px;" @click="signup()">{{ i18n.ts.joinThisServer }}</MkButton>
-					<MkButton full rounded @click="exploreOtherServers()">{{ i18n.ts.exploreOtherServers }}</MkButton>
-					<MkButton full rounded data-cy-signin @click="signin()">{{ i18n.ts.login }}</MkButton>
+			</div>
+			<div v-if="instance.policies.ltlAvailable" class="tl">
+				<div class="title">{{ i18n.ts.letsLookAtTimeline }}</div>
+				<div class="body">
+					<MkTimeline src="local" />
 				</div>
 			</div>
 		</div>
-		<div v-if="instance.policies.ltlAvailable" class="tl">
-			<div class="title">{{ i18n.ts.letsLookAtTimeline }}</div>
-			<div class="body">
-				<MkTimeline src="local"/>
-			</div>
+		<div v-if="instances && instances.length > 0" class="federation">
+			<MarqueeText :duration="40">
+				<MkA v-for="instance in instances" :key="instance.id" :class="$style.federationInstance"
+					:to="`/instance-info/${instance.host}`" behavior="window">
+					<!--<MkInstanceCardMini :instance="instance"/>-->
+					<img v-if="instance.iconUrl" class="icon" :src="instance.iconUrl" alt="" />
+					<span class="name _monospace">{{ instance.host }}</span>
+				</MkA>
+			</MarqueeText>
 		</div>
 	</div>
-	<div v-if="instances && instances.length > 0" class="federation">
-		<MarqueeText :duration="40">
-			<MkA v-for="instance in instances" :key="instance.id" :class="$style.federationInstance" :to="`/instance-info/${instance.host}`" behavior="window">
-				<!--<MkInstanceCardMini :instance="instance"/>-->
-				<img v-if="instance.iconUrl" class="icon" :src="instance.iconUrl" alt=""/>
-				<span class="name _monospace">{{ instance.host }}</span>
-			</MkA>
-		</MarqueeText>
-	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
@@ -76,8 +88,11 @@ let instances = $ref<any[]>();
 
 os.api('meta', { detail: true }).then(_meta => {
 	meta = _meta;
+	console.log(meta)
 });
 
+const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
 os.apiGet('federation/instances', {
 	sort: '+pubSub',
 	limit: 20,
@@ -127,7 +142,7 @@ function exploreOtherServers() {
 
 <style lang="scss" scoped>
 .rsqzvsbo {
-	> .bg {
+	>.bg {
 		position: fixed;
 		top: 0;
 		right: 0;
@@ -135,7 +150,7 @@ function exploreOtherServers() {
 		height: 100vh;
 	}
 
-	> .tl {
+	>.tl {
 		position: fixed;
 		top: 0;
 		bottom: 0;
@@ -145,15 +160,15 @@ function exploreOtherServers() {
 		width: 500px;
 		height: calc(100% - 256px);
 		overflow: hidden;
-		-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
-		mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
+		-webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 128px, rgba(0, 0, 0, 1) calc(100% - 128px), rgba(0, 0, 0, 0) 100%);
+		mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 128px, rgba(0, 0, 0, 1) calc(100% - 128px), rgba(0, 0, 0, 0) 100%);
 
 		@media (max-width: 1200px) {
 			display: none;
 		}
 	}
 
-	> .shape1 {
+	>.shape1 {
 		position: fixed;
 		top: 0;
 		left: 0;
@@ -162,7 +177,8 @@ function exploreOtherServers() {
 		background: var(--accent);
 		clip-path: polygon(0% 0%, 45% 0%, 20% 100%, 0% 100%);
 	}
-	> .shape2 {
+
+	>.shape2 {
 		position: fixed;
 		top: 0;
 		left: 0;
@@ -173,23 +189,28 @@ function exploreOtherServers() {
 		opacity: 0.5;
 	}
 
-	> .misskey {
+	>.misskey-parent {
 		position: fixed;
-		top: 42px;
-		left: 42px;
-		width: 140px;
+		top: 36px;
+		left: 36px;
+		flex: auto;
+		color: #FFFFFF;
 
-		@media (max-width: 450px) {
-			width: 130px;
+		>.misskey {
+			width: 140px;
+
+			@media (max-width: 450px) {
+				width: 130px;
+			}
 		}
 	}
 
-	> .emojis {
+	>.emojis {
 		position: fixed;
 		bottom: 32px;
 		left: 35px;
 
-		> * {
+		>* {
 			margin-right: 8px;
 		}
 
@@ -198,7 +219,7 @@ function exploreOtherServers() {
 		}
 	}
 
-	> .contents {
+	>.contents {
 		position: relative;
 		width: min(430px, calc(100% - 32px));
 		margin-left: 128px;
@@ -208,21 +229,22 @@ function exploreOtherServers() {
 			margin: auto;
 		}
 
-		> .main {
+		>.main {
 			position: relative;
 			background: var(--panel);
 			border-radius: var(--radius);
 			box-shadow: 0 12px 32px rgb(0 0 0 / 25%);
 			text-align: center;
-		
-			> .icon {
+
+			>.icon {
 				width: 85px;
 				margin-top: -47px;
 				border-radius: 100%;
 				vertical-align: bottom;
+				background-color: var(--panel);
 			}
 
-			> .menu {
+			>.menu {
 				position: absolute;
 				top: 16px;
 				right: 16px;
@@ -230,44 +252,45 @@ function exploreOtherServers() {
 				height: 32px;
 				border-radius: 8px;
 				font-size: 18px;
+				z-index: 50;
 			}
 
-			> .fg {
+			>.fg {
 				position: relative;
 				z-index: 1;
 
-				> h1 {
+				>h1 {
 					display: block;
 					margin: 0;
-					padding: 16px 32px 24px 32px;
+					padding: 32px 32px 24px 32px;
 					font-size: 1.4em;
 
-					> .logo {
+					>.logo {
 						vertical-align: bottom;
 						max-height: 120px;
 						max-width: min(100%, 300px);
 					}
 				}
 
-				> .about {
+				>.about {
 					padding: 0 32px;
 				}
 
-				> .warn {
+				>.warn {
 					padding: 32px 32px 0 32px;
 				}
 
-				> .action {
+				>.action {
 					padding: 32px;
 
-					> * {
+					>* {
 						line-height: 28px;
 					}
 				}
 			}
 		}
 
-		> .tl {
+		>.tl {
 			position: relative;
 			background: var(--panel);
 			border-radius: var(--radius);
@@ -275,19 +298,19 @@ function exploreOtherServers() {
 			box-shadow: 0 12px 32px rgb(0 0 0 / 25%);
 			margin-top: 16px;
 
-			> .title {
+			>.title {
 				padding: 12px 16px;
 				border-bottom: solid 1px var(--divider);
 			}
 
-			> .body {
+			>.body {
 				height: 350px;
 				overflow: auto;
 			}
 		}
 	}
 
-	> .federation {
+	>.federation {
 		position: fixed;
 		bottom: 16px;
 		left: 0;
diff --git a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
index 935aceea7ce8..043fc39b4e4d 100644
--- a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
+++ b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
@@ -1,45 +1,52 @@
 <template>
-<div class="kmwsukvl">
-	<div class="body">
-		<div class="top">
-			<div class="banner" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }"></div>
-			<button v-click-anime class="item _button instance" @click="openInstanceMenu">
-				<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
-			</button>
-		</div>
-		<div class="middle">
-			<MkA v-click-anime class="item index" active-class="active" to="/" exact>
-				<i class="icon ti ti-home ti-fw"></i><span class="text">{{ i18n.ts.timeline }}</span>
-			</MkA>
-			<template v-for="item in menu">
-				<div v-if="item === '-'" class="divider"></div>
-				<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime class="item _button" :class="[item, { active: navbarItemDef[item].active }]" active-class="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
-					<i class="icon ti-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ navbarItemDef[item].title }}</span>
-					<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="icon _indicatorCircle"></i></span>
-				</component>
-			</template>
-			<div class="divider"></div>
-			<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime class="item" active-class="active" to="/admin">
-				<i class="icon ti ti-dashboard ti-fw"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
-			</MkA>
-			<button v-click-anime class="item _button" @click="more">
-				<i class="icon ti ti-grid-dots ti-fw"></i><span class="text">{{ i18n.ts.more }}</span>
-				<span v-if="otherMenuItemIndicated" class="indicator"><i class="icon _indicatorCircle"></i></span>
-			</button>
-			<MkA v-click-anime class="item" active-class="active" to="/settings">
-				<i class="icon ti ti-settings ti-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
-			</MkA>
-		</div>
-		<div class="bottom">
-			<button class="item _button post" data-cy-open-post-form @click="os.post">
-				<i class="icon ti ti-pencil ti-fw"></i><span class="text">{{ i18n.ts.note }}</span>
-			</button>
-			<button v-click-anime class="item _button account" @click="openAccountMenu">
-				<MkAvatar :user="$i" class="avatar"/><MkAcct class="text _nowrap" :user="$i"/>
-			</button>
+	<div class="kmwsukvl">
+		<div class="body">
+			<div class="top">
+				<div class="banner" :style="{ backgroundImage: `url(${$instance.bannerUrl})` }"></div>
+				<button v-click-anime class="item _button instance" @click="openInstanceMenu">
+					<!-- <img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon" /> -->
+					<img src="https://s3.ap-northeast-1.wasabisys.com/s3.nicomedkey.cc/public/nicomedkey/logo1_w.svg" alt=""
+						class="logo" />
+				</button>
+			</div>
+			<div class="middle">
+				<MkA v-click-anime class="item index" active-class="active" to="/" exact>
+					<i class="icon ti ti-home ti-fw"></i><span class="text">{{ i18n.ts.timeline }}</span>
+				</MkA>
+				<template v-for="item in menu">
+					<div v-if="item === '-'" class="divider"></div>
+					<component :is="navbarItemDef[item].to ? 'MkA' : 'button'"
+						v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime class="item _button"
+						:class="[item, { active: navbarItemDef[item].active }]" active-class="active" :to="navbarItemDef[item].to"
+						v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
+						<i class="icon ti-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ navbarItemDef[item].title
+						}}</span>
+						<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="icon _indicatorCircle"></i></span>
+					</component>
+				</template>
+				<div class="divider"></div>
+				<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime class="item" active-class="active" to="/admin">
+					<i class="icon ti ti-dashboard ti-fw"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
+				</MkA>
+				<button v-click-anime class="item _button" @click="more">
+					<i class="icon ti ti-grid-dots ti-fw"></i><span class="text">{{ i18n.ts.more }}</span>
+					<span v-if="otherMenuItemIndicated" class="indicator"><i class="icon _indicatorCircle"></i></span>
+				</button>
+				<MkA v-click-anime class="item" active-class="active" to="/settings">
+					<i class="icon ti ti-settings ti-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
+				</MkA>
+			</div>
+			<div class="bottom">
+				<button class="item _button post" data-cy-open-post-form @click="os.post">
+					<i class="icon ti ti-pencil ti-fw"></i><span class="text">{{ i18n.ts.note }}</span>
+				</button>
+				<button v-click-anime class="item _button account" @click="openAccountMenu">
+					<MkAvatar :user="$i" class="avatar" />
+					<MkAcct class="text _nowrap" :user="$i" />
+				</button>
+			</div>
 		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
@@ -74,11 +81,11 @@ function more() {
 
 <style lang="scss" scoped>
 .kmwsukvl {
-	> .body {
+	>.body {
 		display: flex;
 		flex-direction: column;
 
-		> .top {
+		>.top {
 			position: sticky;
 			top: 0;
 			z-index: 1;
@@ -86,8 +93,9 @@ function more() {
 			background: var(--X14);
 			-webkit-backdrop-filter: var(--blur, blur(8px));
 			backdrop-filter: var(--blur, blur(8px));
+			background: linear-gradient(#333333, var(--navBg));
 
-			> .banner {
+			>.banner {
 				position: absolute;
 				top: 0;
 				left: 0;
@@ -95,25 +103,31 @@ function more() {
 				height: 100%;
 				background-size: cover;
 				background-position: center center;
-				-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
-				mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
+				-webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0.75) 100%);
+				mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0.75) 100%);
 			}
 
-			> .instance {
+			>.instance {
 				position: relative;
 				display: block;
 				text-align: center;
 				width: 100%;
 
-				> .icon {
+				>.icon {
 					display: inline-block;
 					width: 38px;
 					aspect-ratio: 1;
 				}
+
+				>.logo {
+					display: inline-block;
+					width: 128px;
+					filter: drop-shadow(0 0 3px #333333);
+				}
 			}
 		}
 
-		> .bottom {
+		>.bottom {
 			position: sticky;
 			bottom: 0;
 			padding: 20px 0;
@@ -121,7 +135,7 @@ function more() {
 			-webkit-backdrop-filter: var(--blur, blur(8px));
 			backdrop-filter: var(--blur, blur(8px));
 
-			> .post {
+			>.post {
 				position: relative;
 				display: block;
 				width: 100%;
@@ -145,25 +159,26 @@ function more() {
 					background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
 				}
 
-				&:hover, &.active {
+				&:hover,
+				&.active {
 					&:before {
 						background: var(--accentLighten);
 					}
 				}
 
-				> .icon {
+				>.icon {
 					position: relative;
 					margin-left: 30px;
 					margin-right: 8px;
 					width: 32px;
 				}
 
-				> .text {
+				>.text {
 					position: relative;
 				}
 			}
 
-			> .account {
+			>.account {
 				position: relative;
 				display: flex;
 				align-items: center;
@@ -173,7 +188,7 @@ function more() {
 				box-sizing: border-box;
 				margin-top: 16px;
 
-				> .avatar {
+				>.avatar {
 					display: block;
 					flex-shrink: 0;
 					position: relative;
@@ -182,7 +197,7 @@ function more() {
 					margin-right: 8px;
 				}
 
-				> .text {
+				>.text {
 					display: block;
 					flex-shrink: 1;
 					padding-right: 8px;
@@ -190,15 +205,15 @@ function more() {
 			}
 		}
 
-		> .middle {
+		>.middle {
 			flex: 1;
 
-			> .divider {
+			>.divider {
 				margin: 16px 16px;
 				border-top: solid 0.5px var(--divider);
 			}
 
-			> .item {
+			>.item {
 				position: relative;
 				display: block;
 				padding-left: 24px;
@@ -211,13 +226,13 @@ function more() {
 				box-sizing: border-box;
 				color: var(--navFg);
 
-				> .icon {
+				>.icon {
 					position: relative;
 					width: 32px;
 					margin-right: 8px;
 				}
 
-				> .indicator {
+				>.indicator {
 					position: absolute;
 					top: 0;
 					left: 20px;
@@ -226,7 +241,7 @@ function more() {
 					animation: blink 1s infinite;
 				}
 
-				> .text {
+				>.text {
 					position: relative;
 					font-size: 0.9em;
 				}
@@ -240,7 +255,8 @@ function more() {
 					color: var(--navActive);
 				}
 
-				&:hover, &.active {
+				&:hover,
+				&.active {
 					&:before {
 						content: "";
 						display: block;
diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue
index 3c161f6797fb..30282df391e9 100644
--- a/packages/frontend/src/ui/_common_/navbar.vue
+++ b/packages/frontend/src/ui/_common_/navbar.vue
@@ -1,55 +1,58 @@
 <template>
-<div class="mvcprjjd" :class="{ iconOnly }">
-	<div class="body">
-		<div class="top">
-			<div class="banner" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }"></div>
-			<button v-click-anime v-tooltip.noDelay.right="$instance.name ?? i18n.ts.instance" class="item _button instance" @click="openInstanceMenu">
-				<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
-			</button>
-		</div>
-		<div class="middle">
-			<MkA v-click-anime v-tooltip.noDelay.right="i18n.ts.timeline" class="item index" active-class="active" to="/" exact>
-				<i class="icon ti ti-home ti-fw"></i><span class="text">{{ i18n.ts.timeline }}</span>
-			</MkA>
-			<template v-for="item in menu">
-				<div v-if="item === '-'" class="divider"></div>
-				<component
-					:is="navbarItemDef[item].to ? 'MkA' : 'button'"
-					v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)"
-					v-click-anime
-					v-tooltip.noDelay.right="navbarItemDef[item].title"
-					class="item _button"
-					:class="[item, { active: navbarItemDef[item].active }]"
-					active-class="active"
-					:to="navbarItemDef[item].to"
-					v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}"
-				>
-					<i class="icon ti-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ navbarItemDef[item].title }}</span>
-					<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="icon _indicatorCircle"></i></span>
-				</component>
-			</template>
-			<div class="divider"></div>
-			<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime v-tooltip.noDelay.right="i18n.ts.controlPanel" class="item" active-class="active" to="/admin">
-				<i class="icon ti ti-dashboard ti-fw"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
-			</MkA>
-			<button v-click-anime class="item _button" @click="more">
-				<i class="icon ti ti-grid-dots ti-fw"></i><span class="text">{{ i18n.ts.more }}</span>
-				<span v-if="otherMenuItemIndicated" class="indicator"><i class="icon _indicatorCircle"></i></span>
-			</button>
-			<MkA v-click-anime v-tooltip.noDelay.right="i18n.ts.settings" class="item" active-class="active" to="/settings">
-				<i class="icon ti ti-settings ti-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
-			</MkA>
-		</div>
-		<div class="bottom">
-			<button v-tooltip.noDelay.right="i18n.ts.note" class="item _button post" data-cy-open-post-form @click="os.post">
-				<i class="icon ti ti-pencil ti-fw"></i><span class="text">{{ i18n.ts.note }}</span>
-			</button>
-			<button v-click-anime v-tooltip.noDelay.right="`${i18n.ts.account}: @${$i.username}`" class="item _button account" @click="openAccountMenu">
-				<MkAvatar :user="$i" class="avatar"/><MkAcct class="text _nowrap" :user="$i"/>
-			</button>
+	<div class="mvcprjjd" :class="{ iconOnly }">
+		<div class="body">
+			<div class="top">
+				<div class="banner" :style="{ backgroundImage: `url(${$instance.bannerUrl})` }"></div>
+				<button v-click-anime v-tooltip.noDelay.right="$instance.name ?? i18n.ts.instance" class="item _button instance"
+					@click="openInstanceMenu">
+					<img v-if="!iconOnly"
+						src="https://s3.ap-northeast-1.wasabisys.com/s3.nicomedkey.cc/public/nicomedkey/logo1_w.svg" alt=""
+						class="logo" />
+					<img v-else :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon" />
+				</button>
+			</div>
+			<div class="middle">
+				<MkA v-click-anime v-tooltip.noDelay.right="i18n.ts.timeline" class="item index" active-class="active" to="/"
+					exact>
+					<i class="icon ti ti-home ti-fw"></i><span class="text">{{ i18n.ts.timeline }}</span>
+				</MkA>
+				<template v-for="item in menu">
+					<div v-if="item === '-'" class="divider"></div>
+					<component :is="navbarItemDef[item].to ? 'MkA' : 'button'"
+						v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime
+						v-tooltip.noDelay.right="navbarItemDef[item].title" class="item _button"
+						:class="[item, { active: navbarItemDef[item].active }]" active-class="active" :to="navbarItemDef[item].to"
+						v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
+						<i class="icon ti-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ navbarItemDef[item].title
+						}}</span>
+						<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="icon _indicatorCircle"></i></span>
+					</component>
+				</template>
+				<div class="divider"></div>
+				<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime v-tooltip.noDelay.right="i18n.ts.controlPanel" class="item"
+					active-class="active" to="/admin">
+					<i class="icon ti ti-dashboard ti-fw"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
+				</MkA>
+				<button v-click-anime class="item _button" @click="more">
+					<i class="icon ti ti-grid-dots ti-fw"></i><span class="text">{{ i18n.ts.more }}</span>
+					<span v-if="otherMenuItemIndicated" class="indicator"><i class="icon _indicatorCircle"></i></span>
+				</button>
+				<MkA v-click-anime v-tooltip.noDelay.right="i18n.ts.settings" class="item" active-class="active" to="/settings">
+					<i class="icon ti ti-settings ti-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
+				</MkA>
+			</div>
+			<div class="bottom">
+				<button v-tooltip.noDelay.right="i18n.ts.note" class="item _button post" data-cy-open-post-form @click="os.post">
+					<i class="icon ti ti-pencil ti-fw"></i><span class="text">{{ i18n.ts.note }}</span>
+				</button>
+				<button v-click-anime v-tooltip.noDelay.right="`${i18n.ts.account}: @${$i.username}`" class="item _button account"
+					@click="openAccountMenu">
+					<MkAvatar :user="$i" class="avatar" />
+					<MkAcct class="text _nowrap" :user="$i" />
+				</button>
+			</div>
 		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
@@ -107,7 +110,7 @@ function more(ev: MouseEvent) {
 	width: $nav-width;
 	box-sizing: border-box;
 
-	> .body {
+	>.body {
 		position: fixed;
 		top: 0;
 		left: 0;
@@ -124,19 +127,20 @@ function more(ev: MouseEvent) {
 	}
 
 	&:not(.iconOnly) {
-		> .body {
+		>.body {
 			width: $nav-width;
 
-			> .top {
+			>.top {
 				position: sticky;
 				top: 0;
 				z-index: 1;
-				padding: 20px 0;
+				padding: 20px 0 20px;
 				background: var(--X14);
 				-webkit-backdrop-filter: var(--blur, blur(8px));
 				backdrop-filter: var(--blur, blur(8px));
+				background: linear-gradient(#333333, var(--navBg));
 
-				> .banner {
+				>.banner {
 					position: absolute;
 					top: 0;
 					left: 0;
@@ -144,25 +148,31 @@ function more(ev: MouseEvent) {
 					height: 100%;
 					background-size: cover;
 					background-position: center center;
-					-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
-					mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
+					-webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0.75) 100%);
+					mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0.75) 100%);
 				}
 
-				> .instance {
+				>.instance {
 					position: relative;
 					display: block;
 					text-align: center;
 					width: 100%;
 
-					> .icon {
+					>.icon {
 						display: inline-block;
 						width: 38px;
 						aspect-ratio: 1;
 					}
+
+					.logo {
+						display: inline-block;
+						width: 128px;
+						filter: drop-shadow(0 0 8px #333333);
+					}
 				}
 			}
 
-			> .bottom {
+			>.bottom {
 				position: sticky;
 				bottom: 0;
 				padding: 20px 0;
@@ -170,7 +180,7 @@ function more(ev: MouseEvent) {
 				-webkit-backdrop-filter: var(--blur, blur(8px));
 				backdrop-filter: var(--blur, blur(8px));
 
-				> .post {
+				>.post {
 					position: relative;
 					display: block;
 					width: 100%;
@@ -194,25 +204,26 @@ function more(ev: MouseEvent) {
 						background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
 					}
 
-					&:hover, &.active {
+					&:hover,
+					&.active {
 						&:before {
 							background: var(--accentLighten);
 						}
 					}
 
-					> .icon {
+					>.icon {
 						position: relative;
 						margin-left: 30px;
 						margin-right: 8px;
 						width: 32px;
 					}
 
-					> .text {
+					>.text {
 						position: relative;
 					}
 				}
 
-				> .account {
+				>.account {
 					position: relative;
 					display: flex;
 					align-items: center;
@@ -222,7 +233,7 @@ function more(ev: MouseEvent) {
 					box-sizing: border-box;
 					margin-top: 16px;
 
-					> .avatar {
+					>.avatar {
 						display: block;
 						flex-shrink: 0;
 						position: relative;
@@ -231,7 +242,7 @@ function more(ev: MouseEvent) {
 						margin-right: 8px;
 					}
 
-					> .text {
+					>.text {
 						display: block;
 						flex-shrink: 1;
 						padding-right: 8px;
@@ -239,15 +250,15 @@ function more(ev: MouseEvent) {
 				}
 			}
 
-			> .middle {
+			>.middle {
 				flex: 1;
 
-				> .divider {
+				>.divider {
 					margin: 16px 16px;
 					border-top: solid 0.5px var(--divider);
 				}
 
-				> .item {
+				>.item {
 					position: relative;
 					display: block;
 					padding-left: 30px;
@@ -260,13 +271,13 @@ function more(ev: MouseEvent) {
 					box-sizing: border-box;
 					color: var(--navFg);
 
-					> .icon {
+					>.icon {
 						position: relative;
 						width: 32px;
 						margin-right: 8px;
 					}
 
-					> .indicator {
+					>.indicator {
 						position: absolute;
 						top: 0;
 						left: 20px;
@@ -275,7 +286,7 @@ function more(ev: MouseEvent) {
 						animation: blink 1s infinite;
 					}
 
-					> .text {
+					>.text {
 						position: relative;
 						font-size: 0.9em;
 					}
@@ -289,7 +300,8 @@ function more(ev: MouseEvent) {
 						color: var(--navActive);
 					}
 
-					&:hover, &.active {
+					&:hover,
+					&.active {
 						color: var(--accent);
 
 						&:before {
@@ -316,10 +328,10 @@ function more(ev: MouseEvent) {
 		flex: 0 0 $nav-icon-only-width;
 		width: $nav-icon-only-width;
 
-		> .body {
+		>.body {
 			width: $nav-icon-only-width;
 
-			> .top {
+			>.top {
 				position: sticky;
 				top: 0;
 				z-index: 1;
@@ -328,20 +340,22 @@ function more(ev: MouseEvent) {
 				-webkit-backdrop-filter: var(--blur, blur(8px));
 				backdrop-filter: var(--blur, blur(8px));
 
-				> .instance {
+				>.instance {
 					display: block;
 					text-align: center;
 					width: 100%;
 
-					> .icon {
+					>.icon {
 						display: inline-block;
 						width: 30px;
 						aspect-ratio: 1;
+						background: white;
+						border-radius: 50%;
 					}
 				}
 			}
 
-			> .bottom {
+			>.bottom {
 				position: sticky;
 				bottom: 0;
 				padding: 20px 0;
@@ -349,7 +363,7 @@ function more(ev: MouseEvent) {
 				-webkit-backdrop-filter: var(--blur, blur(8px));
 				backdrop-filter: var(--blur, blur(8px));
 
-				> .post {
+				>.post {
 					display: block;
 					position: relative;
 					width: 100%;
@@ -372,66 +386,68 @@ function more(ev: MouseEvent) {
 						background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
 					}
 
-					&:hover, &.active {
+					&:hover,
+					&.active {
 						&:before {
 							background: var(--accentLighten);
 						}
 					}
 
-					> .icon {
+					>.icon {
 						position: relative;
 						color: var(--fgOnAccent);
 					}
 
-					> .text {
+
+					>.text {
 						display: none;
 					}
 				}
 
-				> .account {
+				>.account {
 					display: block;
 					text-align: center;
 					width: 100%;
 
-					> .avatar {
+					>.avatar {
 						display: inline-block;
 						width: 38px;
 						aspect-ratio: 1;
 					}
 
-					> .text {
+					>.text {
 						display: none;
 					}
 				}
 			}
 
-			> .middle {
+			>.middle {
 				flex: 1;
 
-				> .divider {
+				>.divider {
 					margin: 8px auto;
 					width: calc(100% - 32px);
 					border-top: solid 0.5px var(--divider);
 				}
 
-				> .item {
+				>.item {
 					display: block;
 					position: relative;
 					padding: 18px 0;
 					width: 100%;
 					text-align: center;
 
-					> .icon {
+					>.icon {
 						display: block;
 						margin: 0 auto;
 						opacity: 0.7;
 					}
 
-					> .text {
+					>.text {
 						display: none;
 					}
 
-					> .indicator {
+					>.indicator {
 						position: absolute;
 						top: 6px;
 						left: 24px;
@@ -440,7 +456,8 @@ function more(ev: MouseEvent) {
 						animation: blink 1s infinite;
 					}
 
-					&:hover, &.active {
+					&:hover,
+					&.active {
 						text-decoration: none;
 						color: var(--accent);
 
@@ -459,7 +476,8 @@ function more(ev: MouseEvent) {
 							background: var(--accentedBg);
 						}
 
-						> .icon, > .text {
+						>.icon,
+						>.text {
 							opacity: 1;
 						}
 					}
diff --git a/packages/frontend/src/ui/classic.sidebar.vue b/packages/frontend/src/ui/classic.sidebar.vue
index 6fff233ac5ac..d202fb3291c0 100644
--- a/packages/frontend/src/ui/classic.sidebar.vue
+++ b/packages/frontend/src/ui/classic.sidebar.vue
@@ -1,43 +1,50 @@
 <template>
-<div class="npcljfve" :class="{ iconOnly }">
-	<button v-click-anime class="item _button account" @click="openAccountMenu">
-		<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
-	</button>
-	<div class="post" data-cy-open-post-form @click="post">
-		<MkButton class="button" gradate full rounded>
-			<i class="ti ti-pencil ti-fw"></i><span v-if="!iconOnly" class="text">{{ $ts.note }}</span>
-		</MkButton>
-	</div>
-	<div class="divider"></div>
-	<MkA v-click-anime class="item index" active-class="active" to="/" exact>
-		<i class="ti ti-home ti-fw"></i><span class="text">{{ $ts.timeline }}</span>
-	</MkA>
-	<template v-for="item in menu">
-		<div v-if="item === '-'" class="divider"></div>
-		<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime class="item _button" :class="item" active-class="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
-			<i class="ti-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ navbarItemDef[item].title }}</span>
-			<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="_indicatorCircle"></i></span>
-		</component>
-	</template>
-	<div class="divider"></div>
-	<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null">
-		<i class="ti ti-dashboard ti-fw"></i><span class="text">{{ $ts.controlPanel }}</span>
-	</MkA>
-	<button v-click-anime class="item _button" @click="more">
-		<i class="ti ti-dots ti-fw"></i><span class="text">{{ $ts.more }}</span>
-		<span v-if="otherNavItemIndicated" class="indicator"><i class="_indicatorCircle"></i></span>
-	</button>
-	<MkA v-click-anime class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
-		<i class="ti ti-settings ti-fw"></i><span class="text">{{ $ts.settings }}</span>
-	</MkA>
-	<div class="divider"></div>
-	<div class="about">
-		<button v-click-anime class="item _button" @click="openInstanceMenu">
-			<img :src="$instance.iconUrl ?? $instance.faviconUrl ?? '/favicon.ico'" class="_ghost"/>
+	<div class="npcljfve" :class="{ iconOnly }">
+		<button v-click-anime class="item _button account" @click="openAccountMenu">
+			<MkAvatar :user="$i" class="avatar" />
+			<MkAcct class="text" :user="$i" />
+		</button>
+		<div class="post" data-cy-open-post-form @click="post">
+			<MkButton class="button" gradate full rounded>
+				<i class="ti ti-pencil ti-fw"></i><span v-if="!iconOnly" class="text">{{ $ts.note }}</span>
+			</MkButton>
+		</div>
+		<div class="divider"></div>
+		<MkA v-click-anime class="item index" active-class="active" to="/" exact>
+			<i class="ti ti-home ti-fw"></i><span class="text">{{ $ts.timeline }}</span>
+		</MkA>
+		<template v-for="item in menu">
+			<div v-if="item === '-'" class="divider"></div>
+			<component :is="navbarItemDef[item].to ? 'MkA' : 'button'"
+				v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime class="item _button"
+				:class="item" active-class="active" :to="navbarItemDef[item].to"
+				v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
+				<i class="ti-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ navbarItemDef[item].title }}</span>
+				<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="_indicatorCircle"></i></span>
+			</component>
+		</template>
+		<div class="divider"></div>
+		<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime class="item" active-class="active" to="/admin"
+			:behavior="settingsWindowed ? 'modalWindow' : null">
+			<i class="ti ti-dashboard ti-fw"></i><span class="text">{{ $ts.controlPanel }}</span>
+		</MkA>
+		<button v-click-anime class="item _button" @click="more">
+			<i class="ti ti-dots ti-fw"></i><span class="text">{{ $ts.more }}</span>
+			<span v-if="otherNavItemIndicated" class="indicator"><i class="_indicatorCircle"></i></span>
 		</button>
+		<MkA v-click-anime class="item" active-class="active" to="/settings"
+			:behavior="settingsWindowed ? 'modalWindow' : null">
+			<i class="ti ti-settings ti-fw"></i><span class="text">{{ $ts.settings }}</span>
+		</MkA>
+		<div class="divider"></div>
+		<div class="about">
+			<button v-click-anime class="item _button" @click="openInstanceMenu">
+				<img src="https://s3.ap-northeast-1.wasabisys.com/s3.nicomedkey.cc/public/nicomedkey/logo1_w.svg" alt=""
+					class="_ghost logo" />
+			</button>
+		</div>
+		<!--<MisskeyLogo class="misskey"/>-->
 	</div>
-	<!--<MisskeyLogo class="misskey"/>-->
-</div>
 </template>
 
 <script lang="ts">
@@ -153,76 +160,77 @@ export default defineComponent({
 		flex: 0 0 $nav-icon-only-width;
 		width: $nav-icon-only-width !important;
 
-		> .divider {
+		>.divider {
 			margin: 8px auto;
 			width: calc(100% - 32px);
 		}
 
-		> .post {
-			> .button {
+		>.post {
+			>.button {
 				width: 46px;
 				height: 46px;
 				padding: 0;
 			}
 		}
 
-		> .item {
+		>.item {
 			padding-left: 0;
 			width: 100%;
 			text-align: center;
 			font-size: $ui-font-size * 1.1;
 			line-height: 3.7rem;
 
-			> i,
-			> .avatar {
+			>i,
+			>.avatar {
 				margin-right: 0;
 			}
 
-			> i {
+			>i {
 				left: 10px;
 			}
 
-			> .text {
+			>.text {
 				display: none;
 			}
 		}
 	}
 
-	> .divider {
+	>.divider {
 		margin: 10px 0;
 		border-top: solid 0.5px var(--divider);
 	}
 
-	> .post {
+	>.post {
 		position: sticky;
 		top: 0;
 		z-index: 1;
 		padding: 16px 0;
 		background: var(--bg);
 
-		> .button {
+		>.button {
 			min-width: 0;
 		}
 	}
 
-	> .about {
+	>.about {
 		fill: currentColor;
 		padding: 8px 0 16px 0;
 		text-align: center;
 
-		> .item {
+		>.item {
 			display: block;
-			width: 32px;
+			width: 128px;
 			margin: 0 auto;
 
 			img {
 				display: block;
 				width: 100%;
+				filter: drop-shadow(0 0 8px black);
 			}
 		}
 	}
 
-	> .item {
+	>.item {
 		position: relative;
 		display: block;
 		font-size: $ui-font-size;
@@ -234,22 +242,22 @@ export default defineComponent({
 		text-align: left;
 		box-sizing: border-box;
 
-		> i {
+		>i {
 			width: 32px;
 		}
 
-		> i,
-		> .avatar {
+		>i,
+		>.avatar {
 			margin-right: $avatar-margin;
 		}
 
-		> .avatar {
+		>.avatar {
 			width: $avatar-size;
 			height: $avatar-size;
 			vertical-align: middle;
 		}
 
-		> .indicator {
+		>.indicator {
 			position: absolute;
 			top: 0;
 			left: 0;
diff --git a/packages/frontend/src/ui/visitor/a.vue b/packages/frontend/src/ui/visitor/a.vue
index 023b7fdb94e9..d8de8df1e88e 100644
--- a/packages/frontend/src/ui/visitor/a.vue
+++ b/packages/frontend/src/ui/visitor/a.vue
@@ -1,39 +1,44 @@
 <template>
-<div class="mk-app">
-	<div v-if="mainRouter.currentRoute?.name === 'index'" class="banner" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }">
-		<div>
-			<h1 v-if="meta"><img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></h1>
-			<div v-if="meta" class="about">
-				<!-- eslint-disable-next-line vue/no-v-html -->
-				<div class="desc" v-html="meta.description || $ts.introMisskey"></div>
-			</div>
-			<div class="action">
-				<button class="_button primary" @click="signup()">{{ $ts.signup }}</button>
-				<button class="_button" @click="signin()">{{ $ts.login }}</button>
+	<div class="mk-app">
+		<div v-if="mainRouter.currentRoute?.name === 'index'" class="banner"
+			:style="{ backgroundImage: `url(${$instance.bannerUrl})` }">
+			<div>
+				<h1 v-if="meta"><img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl"><span v-else class="text">{{
+					instanceName }}</span></h1>
+				<div v-if="meta" class="about">
+					<!-- eslint-disable-next-line vue/no-v-html -->
+					<div class="desc" v-html="meta.description || $ts.introMisskey"></div>
+				</div>
+				<div class="action">
+					<button class="_button primary" @click="signup()">{{ $ts.signup }}</button>
+					<button class="_button" @click="signin()">{{ $ts.login }}</button>
+				</div>
 			</div>
 		</div>
-	</div>
-	<div v-else class="banner-mini" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }">
-		<div>
-			<h1 v-if="meta"><img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></h1>
+		<div v-else class="banner-mini" :style="{ backgroundImage: `url(${$instance.bannerUrl})` }">
+			<div>
+				<h1 v-if="meta"><img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl"><span v-else class="text">{{
+					instanceName }}</span></h1>
+			</div>
 		</div>
-	</div>
 
-	<div class="main">
-		<div ref="contents" class="contents" :class="{ wallpaper }">
-			<header v-show="mainRouter.currentRoute?.name !== 'index'" ref="header" class="header">
-				<XHeader :info="pageInfo"/>
-			</header>
-			<main ref="main" style="container-type: inline-size;">
-				<RouterView/>
-			</main>
-			<div class="powered-by">
-				<b><MkA to="/">{{ host }}</MkA></b>
-				<small>Powered by <a href="https://github.com/misskey-dev/misskey" target="_blank">Misskey</a></small>
+		<div class="main">
+			<div ref="contents" class="contents" :class="{ wallpaper }">
+				<header v-show="mainRouter.currentRoute?.name !== 'index'" ref="header" class="header">
+					<XHeader :info="pageInfo" />
+				</header>
+				<main ref="main" style="container-type: inline-size;">
+					<RouterView />
+				</main>
+				<div class="powered-by">
+					<b>
+						<MkA to="/">{{ host }}</MkA>
+					</b>
+					<small>Powered by <a href="https://github.com/misskey-dev/misskey" target="_blank">Misskey</a></small>
+				</div>
 			</div>
 		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts">
@@ -132,33 +137,34 @@ export default defineComponent({
 .mk-app {
 	min-height: 100vh;
 
-	> .banner {
+	>.banner {
+		background-color: #333333;
 		position: relative;
 		width: 100%;
 		text-align: center;
 		background-position: center;
 		background-size: cover;
 
-		> div {
+		>div {
 			height: 100%;
 			background: rgba(0, 0, 0, 0.3);
 
 			* {
 				color: #fff;
 			}
-					
-			> h1 {
+
+			>h1 {
 				margin: 0;
 				padding: 96px 32px 0 32px;
 				text-shadow: 0 0 8px black;
 
-				> .logo {
+				>.logo {
 					vertical-align: bottom;
 					max-height: 150px;
 				}
 			}
 
-			> .about {
+			>.about {
 				padding: 32px;
 				max-width: 580px;
 				margin: 0 auto;
@@ -166,10 +172,10 @@ export default defineComponent({
 				text-shadow: 0 0 8px black;
 			}
 
-			> .action {
+			>.action {
 				padding-bottom: 64px;
-				
-				> button {
+
+				>button {
 					display: inline-block;
 					padding: 10px 20px;
 					box-sizing: border-box;
@@ -191,14 +197,15 @@ export default defineComponent({
 		}
 	}
 
-	> .banner-mini {
+	>.banner-mini {
 		position: relative;
 		width: 100%;
 		text-align: center;
+		background-color: #333333;
 		background-position: center;
 		background-size: cover;
 
-		> div {
+		>div {
 			position: relative;
 			z-index: 1;
 			height: 100%;
@@ -208,16 +215,14 @@ export default defineComponent({
 				color: #fff !important;
 			}
 
-			> header {
-				
-			}
-					
-			> h1 {
+			>header {}
+
+			>h1 {
 				margin: 0;
 				padding: 32px;
 				text-shadow: 0 0 8px black;
 
-				> .logo {
+				>.logo {
 					vertical-align: bottom;
 					max-height: 100px;
 				}
@@ -225,25 +230,25 @@ export default defineComponent({
 		}
 	}
 
-	> .main {
-		> .contents {
+	>.main {
+		>.contents {
 			position: relative;
 			z-index: 1;
 
-			> .header {
+			>.header {
 				position: sticky;
 				top: 0;
 				left: 0;
 				z-index: 1000;
 			}
 
-			> .powered-by {
+			>.powered-by {
 				padding: 28px;
 				font-size: 14px;
 				text-align: center;
 				border-top: 1px solid var(--divider);
 
-				> small {
+				>small {
 					display: block;
 					margin-top: 8px;
 					opacity: 0.5;
@@ -254,5 +259,4 @@ export default defineComponent({
 }
 </style>
 
-<style lang="scss">
-</style>
+<style lang="scss"></style>
diff --git a/packages/frontend/src/ui/visitor/kanban.vue b/packages/frontend/src/ui/visitor/kanban.vue
index 05ded834eecb..31217f722589 100644
--- a/packages/frontend/src/ui/visitor/kanban.vue
+++ b/packages/frontend/src/ui/visitor/kanban.vue
@@ -1,40 +1,45 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
-<div class="rwqkcmrc" :style="{ backgroundImage: transparent ? 'none' : `url(${ $instance.backgroundImageUrl })` }">
-	<div class="back" :class="{ transparent }"></div>
-	<div class="contents">
-		<div class="wrapper">
-			<h1 v-if="meta" :class="{ full }">
-				<MkA to="/" class="link"><img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl" alt="logo"><span v-else class="text">{{ instanceName }}</span></MkA>
-			</h1>
-			<template v-if="full">
-				<div v-if="meta" class="about">
-					<div class="desc" v-html="meta.description || $ts.introMisskey"></div>
-				</div>
-				<div class="action">
-					<button class="_buttonPrimary" @click="signup()">{{ $ts.signup }}</button>
-					<button class="_button" @click="signin()">{{ $ts.login }}</button>
-				</div>
-				<div class="announcements panel">
-					<header>{{ $ts.announcements }}</header>
-					<MkPagination v-slot="{items}" :pagination="announcements" class="list">
-						<section v-for="announcement in items" :key="announcement.id" class="item">
-							<div class="title">{{ announcement.title }}</div>
-							<div class="content">
-								<Mfm :text="announcement.text"/>
-								<img v-if="announcement.imageUrl" :src="announcement.imageUrl" alt="announcement image"/>
-							</div>
-						</section>
-					</MkPagination>
-				</div>
-				<div v-if="poweredBy" class="powered-by">
-					<b><MkA to="/">{{ host }}</MkA></b>
-					<small>Powered by <a href="https://github.com/misskey-dev/misskey" target="_blank">Misskey</a></small>
-				</div>
-			</template>
+	<div class="rwqkcmrc" :style="{ backgroundImage: transparent ? 'none' : `url(${$instance.backgroundImageUrl})` }">
+		<div class="back" :class="{ transparent }"></div>
+		<div class="contents">
+			<div class="wrapper">
+				<h1 v-if="meta" :class="{ full }">
+					<!-- <MkA to="/" class="link"><img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl" alt="logo"><span v-else class="text">{{ instanceName }}</span></MkA> -->
+					<MkA to="/" class="link"><img class="logo"
+							src="https://s3.ap-northeast-1.wasabisys.com/s3.nicomedkey.cc/public/nicomedkey/logo2_w.svg" alt="logo">
+					</MkA>
+				</h1>
+				<template v-if="full">
+					<div v-if="meta" class="about">
+						<div class="desc" v-html="meta.description || $ts.introMisskey"></div>
+					</div>
+					<div class="action">
+						<button class="_buttonPrimary" @click="signup()">{{ $ts.signup }}</button>
+						<button class="_button" @click="signin()">{{ $ts.login }}</button>
+					</div>
+					<div class="announcements panel">
+						<header>{{ $ts.announcements }}</header>
+						<MkPagination v-slot="{ items }" :pagination="announcements" class="list">
+							<section v-for="announcement in items" :key="announcement.id" class="item">
+								<div class="title">{{ announcement.title }}</div>
+								<div class="content">
+									<Mfm :text="announcement.text" />
+									<img v-if="announcement.imageUrl" :src="announcement.imageUrl" alt="announcement image" />
+								</div>
+							</section>
+						</MkPagination>
+					</div>
+					<div v-if="poweredBy" class="powered-by">
+						<b>
+							<MkA to="/">{{ host }}</MkA>
+						</b>
+						<small>Powered by <a href="https://github.com/misskey-dev/misskey" target="_blank">Misskey</a></small>
+					</div>
+				</template>
+			</div>
 		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts">
@@ -114,7 +119,11 @@ export default defineComponent({
 	background-size: cover;
 	// TODO: パララックスにしたい
 
-	> .back {
+	.logo {
+		filter: drop-shadow(0 0 8px #333333);
+	}
+
+	>.back {
 		position: absolute;
 		top: 0;
 		left: 0;
@@ -128,30 +137,31 @@ export default defineComponent({
 		}
 	}
 
-	> .contents {
+	>.contents {
 		position: relative;
 		z-index: 1;
 		height: inherit;
 		overflow: auto;
 
-		> .wrapper {
+		>.wrapper {
 			max-width: 380px;
 			padding: 0 16px;
 			box-sizing: border-box;
 			margin: 0 auto;
 
-			> .panel {
+			>.panel {
 				-webkit-backdrop-filter: var(--blur, blur(8px));
 				backdrop-filter: var(--blur, blur(8px));
 				background: rgba(0, 0, 0, 0.5);
 				border-radius: var(--radius);
 
-				&, * {
+				&,
+				* {
 					color: #fff !important;
 				}
 			}
 
-			> h1 {
+			>h1 {
 				display: block;
 				margin: 0;
 				padding: 32px 0 32px 0;
@@ -160,14 +170,14 @@ export default defineComponent({
 				&.full {
 					padding: 64px 0 0 0;
 
-					> .link {
+					>.link {
 						> ::v-deep(.logo) {
 							max-height: 130px;
 						}
 					}
 				}
 
-				> .link {
+				>.link {
 					display: block;
 
 					> ::v-deep(.logo) {
@@ -177,7 +187,7 @@ export default defineComponent({
 				}
 			}
 
-			> .about {
+			>.about {
 				display: block;
 				margin: 24px 0;
 				text-align: center;
@@ -186,8 +196,8 @@ export default defineComponent({
 				color: #fff;
 			}
 
-			> .action {
-				> button {
+			>.action {
+				>button {
 					display: block;
 					width: 100%;
 					padding: 10px;
@@ -205,32 +215,32 @@ export default defineComponent({
 				}
 			}
 
-			> .announcements {
+			>.announcements {
 				margin: 32px 0;
 				text-align: left;
 
-				> header {
+				>header {
 					padding: 12px 16px;
 					border-bottom: solid 1px rgba(255, 255, 255, 0.5);
 				}
 
-				> .list {
+				>.list {
 					max-height: 300px;
 					overflow: auto;
 
-					> .item {
+					>.item {
 						padding: 12px 16px;
 
-						& + .item {
+						&+.item {
 							border-top: solid 1px rgba(255, 255, 255, 0.5);
 						}
 
-						> .title {
+						>.title {
 							font-weight: bold;
 						}
 
-						> .content {
-							> img {
+						>.content {
+							>img {
 								max-width: 100%;
 							}
 						}
@@ -238,14 +248,14 @@ export default defineComponent({
 				}
 			}
 
-			> .powered-by {
+			>.powered-by {
 				padding: 28px;
 				font-size: 14px;
 				text-align: center;
 				border-top: 1px solid rgba(255, 255, 255, 0.5);
 				color: #fff;
 
-				> small {
+				>small {
 					display: block;
 					margin-top: 8px;
 					opacity: 0.5;
@@ -253,5 +263,4 @@ export default defineComponent({
 			}
 		}
 	}
-}
-</style>
+}</style>
diff --git a/packages/frontend/src/widgets/WidgetInstanceInfo.vue b/packages/frontend/src/widgets/WidgetInstanceInfo.vue
index 3a3b071b7d58..a0a8838d60cd 100644
--- a/packages/frontend/src/widgets/WidgetInstanceInfo.vue
+++ b/packages/frontend/src/widgets/WidgetInstanceInfo.vue
@@ -1,17 +1,18 @@
 <template>
-<div class="_panel">
-	<div :class="$style.container" :style="{ backgroundImage: $instance.bannerUrl ? `url(${ $instance.bannerUrl })` : null }">
-		<div :class="$style.iconContainer">
-			<img :src="$instance.iconUrl ?? $instance.faviconUrl ?? '/favicon.ico'" alt="" :class="$style.icon"/>
-		</div>
-		<div :class="$style.bodyContainer">
-			<div :class="$style.body">
-				<MkA :class="$style.name" to="/about" behavior="window">{{ $instance.name }}</MkA>
-				<div :class="$style.host">{{ host }}</div>
+	<div class="_panel">
+		<div :class="$style.container"
+			:style="{ backgroundImage: $instance.bannerUrl ? `url(${$instance.bannerUrl})` : null }">
+			<div :class="$style.iconContainer">
+				<img :src="$instance.iconUrl ?? $instance.faviconUrl ?? '/favicon.ico'" alt="" :class="$style.icon" />
+			</div>
+			<div :class="$style.bodyContainer">
+				<div :class="$style.body">
+					<MkA :class="$style.name" to="/about" behavior="window">{{ $instance.name }}</MkA>
+					<div :class="$style.host">{{ host }}</div>
+				</div>
 			</div>
 		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
@@ -63,9 +64,10 @@ defineExpose<WidgetComponentExpose>({
 	display: inline-block;
 	width: 60px;
 	height: 60px;
-	border-radius: 8px;
+	border-radius: 50%;
 	box-sizing: border-box;
 	border: solid 3px #fff;
+	background: #fff;
 }
 
 .bodyContainer {