diff --git a/locales/en-US.yml b/locales/en-US.yml
index 16d3abaae5..1d9a9d3eac 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -1107,8 +1107,10 @@ branding: "Branding"
 translateProfile: "Translate a profile"
 _bannerDisplay:
   all: "All"
+  topBottom: "Top and Bottom"
   top: "Top (Server banner)"
   bottom: "Bottom (Profile banner)"
+  bg: "Background"
   hide: "Hide"
 _requireRefreshBehavior:
   dialog: "Show warning dialog"
diff --git a/locales/index.d.ts b/locales/index.d.ts
index aacb976673..9a6c46756f 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -1110,8 +1110,10 @@ export interface Locale {
     "translateProfile": string;
     "_bannerDisplay": {
         "all": string;
+        "topBottom": string;
         "top": string;
         "bottom": string;
+        "bg": string;
         "hide": string;
     };
     "_requireRefreshBehavior": {
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 5ef56428a2..96941a5620 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1108,8 +1108,10 @@ translateProfile: "プロフィールを翻訳する"
 
 _bannerDisplay:
   all: "全て"
+  topBottom: "上部と下部"
   top: "上部（サーバーバナー）"
   bottom: "下部（プロフィールバナー）"
+  bg: "バックグラウンド"
   hide: "隠す"
 
 _requireRefreshBehavior:
diff --git a/locales/ko-KR.yml b/locales/ko-KR.yml
index 8a93e4cec0..f082a96e73 100644
--- a/locales/ko-KR.yml
+++ b/locales/ko-KR.yml
@@ -1107,8 +1107,10 @@ installed: "설치됨"
 translateProfile: "프로필 번역하기"
 _bannerDisplay:
   all: "전부"
+  topBottom: "상단 및 하단"
   top: "상단 (서버 배너)"
   bottom: "하단 (프로필 배너)"
+  bg: "백그라운드"
   hide: "숨기기"
 _requireRefreshBehavior:
   dialog: "알림창 표시"
diff --git a/packages/frontend/src/pages/settings/navbar.vue b/packages/frontend/src/pages/settings/navbar.vue
index d7ba67a3f6..724d462921 100644
--- a/packages/frontend/src/pages/settings/navbar.vue
+++ b/packages/frontend/src/pages/settings/navbar.vue
@@ -41,8 +41,10 @@
 	<MkRadios v-model="bannerDisplay">
 		<template #label>{{ i18n.ts.displayBanner }} <span class="_beta">CherryPick</span></template>
 		<option value="all">{{ i18n.ts._bannerDisplay.all }}</option>
+		<option value="topBottom">{{ i18n.ts._bannerDisplay.topBottom }}</option>
 		<option value="top">{{ i18n.ts._bannerDisplay.top }}</option>
 		<option value="bottom">{{ i18n.ts._bannerDisplay.bottom }}</option>
+		<option value="bg">{{ i18n.ts._bannerDisplay.bg }}</option>
 		<option value="hide">{{ i18n.ts._bannerDisplay.hide }}</option>
 	</MkRadios>
 </div>
diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts
index 0e86e56139..4af7ee0498 100644
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@@ -370,7 +370,7 @@ export const defaultStore = markRaw(new Storage('base', {
 	},
 	bannerDisplay: {
 		where: 'device',
-		default: 'all' as 'all' | 'top' | 'bottom' | 'hide',
+		default: 'topBottom' as 'all' | 'topBottom' | 'top' | 'bottom' | 'bg' | 'hide',
 	},
 	hideAvatarsInNote: {
 		where: 'device',
diff --git a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
index 904f1440f1..f9699736c6 100644
--- a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
+++ b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
@@ -1,7 +1,8 @@
 <template>
 <div :class="$style.root">
+	<div v-if="['all', 'bg'].includes(<string>defaultStore.state.bannerDisplay)" :class="[$style.banner, $style.topBanner]" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
 	<div :class="$style.top">
-		<div v-if="defaultStore.state.bannerDisplay === 'all' || defaultStore.state.bannerDisplay === 'top'" :class="[$style.banner, $style.topBanner]" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
+		<div v-if="['all', 'topBottom', 'top'].includes(<string>defaultStore.state.bannerDisplay)" :class="[$style.banner, $style.topBanner]" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
 		<button class="_button" :class="$style.instance" @click="openInstanceMenu">
 			<img :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" :class="$style.instanceIcon"/>
 		</button>
@@ -30,7 +31,7 @@
 		</MkA>
 	</div>
 	<div :class="$style.bottom">
-		<div v-if="defaultStore.state.bannerDisplay === 'all' || defaultStore.state.bannerDisplay === 'bottom'" :class="[$style.banner, $style.bottomBanner]" :style="{ backgroundImage: `url(${ $i.bannerUrl })` }"></div>
+		<div v-if="['all', 'topBottom', 'bottom'].includes(<string>defaultStore.state.bannerDisplay)" :class="[$style.banner, $style.bottomBanner]" :style="{ backgroundImage: `url(${ $i.bannerUrl })` }"></div>
 		<button class="_button" :class="$style.post" data-cy-open-post-form @click="os.post">
 			<i :class="$style.postIcon" class="ti ti-pencil ti-fw"></i><span style="position: relative;">{{ i18n.ts.note }}</span>
 		</button>
diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue
index 321852456d..d13aa22a27 100644
--- a/packages/frontend/src/ui/_common_/navbar.vue
+++ b/packages/frontend/src/ui/_common_/navbar.vue
@@ -1,8 +1,9 @@
 <template>
 <div :class="[$style.root, { [$style.iconOnly]: iconOnly }]">
 	<div :class="$style.body">
+		<div v-if="['all', 'bg'].includes(<string>defaultStore.state.bannerDisplay)" :class="[$style.banner, $style.topBanner]" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
 		<div :class="$style.top">
-			<div v-if="defaultStore.state.bannerDisplay === 'all' || defaultStore.state.bannerDisplay === 'top'" :class="[$style.banner, $style.topBanner]" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
+			<div v-if="['all', 'topBottom', 'top'].includes(<string>defaultStore.state.bannerDisplay)" :class="[$style.banner, $style.topBanner]" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
 			<button v-tooltip.noDelay.right="instance.name ?? i18n.ts.instance" class="_button" :class="$style.instance" @click="openInstanceMenu">
 				<img :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" :class="$style.instanceIcon"/>
 			</button>
@@ -40,7 +41,7 @@
 			</MkA>
 		</div>
 		<div :class="$style.bottom">
-			<div v-if="defaultStore.state.bannerDisplay === 'all' || defaultStore.state.bannerDisplay === 'bottom'" :class="[$style.banner, $style.bottomBanner]" :style="{ backgroundImage: `url(${ $i.bannerUrl })` }"></div>
+			<div v-if="['all', 'topBottom', 'bottom'].includes(<string>defaultStore.state.bannerDisplay)" :class="[$style.banner, $style.bottomBanner]" :style="{ backgroundImage: `url(${ $i.bannerUrl })` }"></div>
 			<button v-tooltip.noDelay.right="i18n.ts.note" class="_button" :class="[$style.post]" data-cy-open-post-form @click="os.post">
 				<i class="ti ti-pencil ti-fw" :class="$style.postIcon"></i><span :class="$style.postText">{{ i18n.ts.note }}</span>
 			</button>
diff --git a/packages/frontend/src/ui/friendly/navbar-for-mobile.vue b/packages/frontend/src/ui/friendly/navbar-for-mobile.vue
index cdc046c24f..2e53835806 100644
--- a/packages/frontend/src/ui/friendly/navbar-for-mobile.vue
+++ b/packages/frontend/src/ui/friendly/navbar-for-mobile.vue
@@ -1,7 +1,8 @@
 <template>
 <div :class="$style.root">
+	<div v-if="['all', 'bg'].includes(<string>defaultStore.state.bannerDisplay)" :class="[$style.banner, $style.topBanner]" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
 	<div :class="$style.top">
-		<div v-if="defaultStore.state.bannerDisplay === 'all' || defaultStore.state.bannerDisplay === 'top'" :class="[$style.banner, $style.topBanner]" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
+		<div v-if="['all', 'topBottom', 'top'].includes(<string>defaultStore.state.bannerDisplay)" :class="[$style.banner, $style.topBanner]" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
 		<button class="_button" :class="$style.instance" @click="openInstanceMenu">
 			<img :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" :class="$style.instanceIcon"/>
 		</button>
@@ -30,7 +31,7 @@
 		</MkA>
 	</div>
 	<div :class="$style.bottom">
-		<div v-if="defaultStore.state.bannerDisplay === 'all' || defaultStore.state.bannerDisplay === 'bottom'" :class="[$style.banner, $style.bottomBanner]" :style="{ backgroundImage: `url(${ $i.bannerUrl })` }"></div>
+		<div v-if="['all', 'topBottom', 'bottom'].includes(<string>defaultStore.state.bannerDisplay)" :class="[$style.banner, $style.bottomBanner]" :style="{ backgroundImage: `url(${ $i.bannerUrl })` }"></div>
 		<button class="_button" :class="$style.post" data-cy-open-post-form @click="os.post">
 			<i :class="$style.postIcon" class="ti ti-pencil ti-fw"></i><span style="position: relative;">{{ i18n.ts.note }}</span>
 		</button>
diff --git a/packages/frontend/src/ui/friendly/navbar.vue b/packages/frontend/src/ui/friendly/navbar.vue
index c9a1e62d45..b78b41faa6 100644
--- a/packages/frontend/src/ui/friendly/navbar.vue
+++ b/packages/frontend/src/ui/friendly/navbar.vue
@@ -1,8 +1,9 @@
 <template>
 <div :class="[$style.root, { [$style.iconOnly]: iconOnly }]">
 	<div :class="$style.body">
+		<div v-if="['all', 'bg'].includes(<string>defaultStore.state.bannerDisplay)" :class="[$style.banner, $style.topBanner]" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
 		<div :class="$style.top">
-			<div v-if="defaultStore.state.bannerDisplay === 'all' || defaultStore.state.bannerDisplay === 'top'" :class="[$style.banner, $style.topBanner]" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
+			<div v-if="['all', 'topBottom', 'top'].includes(<string>defaultStore.state.bannerDisplay)" :class="[$style.banner, $style.topBanner]" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
 			<button v-tooltip.noDelay.right="instance.name ?? i18n.ts.instance" class="_button" :class="$style.instance" @click="openInstanceMenu">
 				<img :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" :class="$style.instanceIcon"/>
 			</button>
@@ -40,7 +41,7 @@
 			</MkA>
 		</div>
 		<div :class="$style.bottom">
-			<div v-if="defaultStore.state.bannerDisplay === 'all' || defaultStore.state.bannerDisplay === 'bottom'" :class="[$style.banner, $style.bottomBanner]" :style="{ backgroundImage: `url(${ $i.bannerUrl })` }"></div>
+			<div v-if="['all', 'topBottom', 'bottom'].includes(<string>defaultStore.state.bannerDisplay)" :class="[$style.banner, $style.bottomBanner]" :style="{ backgroundImage: `url(${ $i.bannerUrl })` }"></div>
 			<button v-tooltip.noDelay.right="i18n.ts.note" class="_button" :class="[$style.post]" data-cy-open-post-form @click="os.post">
 				<i class="ti ti-pencil ti-fw" :class="$style.postIcon"></i><span :class="$style.postText">{{ i18n.ts.note }}</span>
 			</button>