diff --git a/src/_locales/dict.setup-page.ts b/src/_locales/dict.setup-page.ts
index 080ac0399..ae5d2ccfd 100644
--- a/src/_locales/dict.setup-page.ts
+++ b/src/_locales/dict.setup-page.ts
@@ -1813,6 +1813,17 @@ You can also set prefixes for each command type for faster navigation. Starting
     zh: '同步子面板',
     ja: '同期サブパネル',
   },
+  'settings.sub_panel.youtube': {
+    en: 'YouTube playback controls (tabs panel)',
+    de: 'YouTube-Wiedergabesteuerung (Tab-Panel)',
+    fr: 'Contrôles de lecture YouTube (panneau d’onglets)',
+    hu: 'YouTube lejátszásvezérlők (lap panel)',
+    pl: 'Sterowanie odtwarzaniem YouTube (panel kart)',
+    ru: 'Элементы управления воспроизведением YouTube (панель вкладок)',
+    zh_CN: 'YouTube 播放控制（标签页面板）',
+    zh_TW: 'YouTube 播放控制（分頁面板）',
+    ja: 'YouTube 再生コントロール（タブパネル）',
+  },
   'settings.nav_bar_enabled': {
     en: 'Enabled elements',
     de: 'Aktivierte Elemente',
diff --git a/src/_locales/dict.sidebar.ts b/src/_locales/dict.sidebar.ts
index 5f6491d68..e0779b2a2 100644
--- a/src/_locales/dict.sidebar.ts
+++ b/src/_locales/dict.sidebar.ts
@@ -15,6 +15,48 @@ export const sidebarTranslations: Translations = {
     zh_TW: '搜尋...',
     ja: '検索...',
   },
+  'bar.youtube.prev': {
+    en: 'Previous video',
+    de: 'Vorheriges Video',
+    fr: 'Vidéo précédente',
+    ru: 'Предыдущее видео',
+    ja: '前の動画',
+  },
+  'bar.youtube.next': {
+    en: 'Next video',
+    de: 'Nächstes Video',
+    fr: 'Vidéo suivante',
+    ru: 'Следующее видео',
+    ja: '次の動画',
+  },
+  'bar.youtube.play': {
+    en: 'Play',
+    de: 'Wiedergeben',
+    fr: 'Lecture',
+    ru: 'Воспроизвести',
+    ja: '再生',
+  },
+  'bar.youtube.pause': {
+    en: 'Pause',
+    de: 'Pause',
+    fr: 'Pause',
+    ru: 'Пауза',
+    ja: '一時停止',
+  },
+  'bar.youtube.mute': {
+    en: 'Mute tab',
+    de: 'Tab stummschalten',
+    fr: 'Couper le son de l’onglet',
+    ru: 'Отключить звук вкладки',
+    ja: 'タブをミュート',
+  },
+  'bar.youtube.unmute': {
+    en: 'Unmute tab',
+    de: 'Tab-Stummschaltung aufheben',
+    fr: 'Réactiver le son de l’onglet',
+    ru: 'Включить звук вкладки',
+    ja: 'ミュート解除',
+  },
 
   // ---
   // -- Confirm dialogs
diff --git a/src/assets/chevron-left.svg b/src/assets/chevron-left.svg
new file mode 100644
index 000000000..975a55a43
--- /dev/null
+++ b/src/assets/chevron-left.svg
@@ -0,0 +1 @@
+<svg id="icon_chevron_left" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M10.8 2.3 9.4.9 3.3 7l6.1 6.1 1.4-1.4L6.1 7l4.7-4.7z"/></svg>
diff --git a/src/assets/chevron-right.svg b/src/assets/chevron-right.svg
new file mode 100644
index 000000000..ca1272f41
--- /dev/null
+++ b/src/assets/chevron-right.svg
@@ -0,0 +1 @@
+<svg id="icon_chevron_right" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M5.2 2.3 6.6.9l6.1 6.1-6.1 6.1-1.4-1.4L9.9 7 5.2 2.3z"/></svg>
diff --git a/src/defaults/settings.ts b/src/defaults/settings.ts
index b1c76f950..c08303d56 100644
--- a/src/defaults/settings.ts
+++ b/src/defaults/settings.ts
@@ -48,6 +48,7 @@ export const DEFAULT_SETTINGS: SettingsState = {
   subPanelBookmarks: true,
   subPanelHistory: true,
   subPanelSync: false,
+  subPanelYouTube: false,
 
   // Group page
   groupLayout: 'grid',
diff --git a/src/page.setup/components/settings.navbar.vue b/src/page.setup/components/settings.navbar.vue
index 076aaa6c7..10781cb7b 100644
--- a/src/page.setup/components/settings.navbar.vue
+++ b/src/page.setup/components/settings.navbar.vue
@@ -85,6 +85,12 @@ section(
       dbg="subPanelSync"
       :default="DEFAULT_SETTINGS.subPanelSync"
       @update:value="Settings.saveDebounced(150)")
+    ToggleField(
+      label="settings.sub_panel.youtube"
+      v-model:value="Settings.state.subPanelYouTube"
+      dbg="subPanelYouTube"
+      :default="DEFAULT_SETTINGS.subPanelYouTube"
+      @update:value="Settings.saveDebounced(150)")
 
   InfoField(
     label="settings.nav_bar_enabled"
diff --git a/src/services/youtube.fg.ts b/src/services/youtube.fg.ts
new file mode 100644
index 000000000..943d144a2
--- /dev/null
+++ b/src/services/youtube.fg.ts
@@ -0,0 +1,206 @@
+import type { Tab, Reactivator } from 'src/types'
+import { NOID } from 'src/defaults'
+import * as Tabs from 'src/services/tabs.fg'
+import * as Windows from 'src/services/windows.fg'
+import * as Logs from 'src/services/logs'
+import * as Permissions from 'src/services/permissions.fg'
+
+export interface YouTubeReactiveState {
+  probeTick: number
+}
+
+export let reactive: YouTubeReactiveState = { probeTick: 0 }
+
+export function reactivate(r: Reactivator<YouTubeReactiveState>): void {
+  reactive = r(reactive)
+}
+
+let nativeAudibleYtTabId: ID = NOID
+let probeTimeout: number | undefined
+let probeInterval: number | undefined
+let listenersBound = false
+
+function tabUrl(t: Tab): string {
+  return t.url || t.reactive.url || ''
+}
+
+function isYouTubePlaybackUrl(url: string | undefined): boolean {
+  if (!url || url.startsWith('about:')) return false
+  try {
+    const u = new URL(url)
+    const h = u.hostname.toLowerCase()
+    if (h === 'youtu.be') return true
+    if (h === 'music.youtube.com') return u.pathname.startsWith('/watch')
+    if (h === 'm.youtube.com' || h.endsWith('.youtube.com') || h === 'youtube.com') {
+      const p = u.pathname
+      return (
+        p.startsWith('/watch') ||
+        p.startsWith('/shorts/') ||
+        p.startsWith('/live/') ||
+        p.startsWith('/embed/')
+      )
+    }
+  } catch {
+    /* ignore */
+  }
+  return (
+    url.includes('youtu.be/') ||
+    url.includes('youtube.com/watch') ||
+    url.includes('youtube.com/shorts/') ||
+    url.includes('youtube.com/live/') ||
+    url.includes('youtube.com/embed/') ||
+    url.includes('music.youtube.com/watch')
+  )
+}
+
+async function refreshNativeAudibleYouTubeTabId(): Promise<void> {
+  if (!Windows.id) return
+  try {
+    const audibleTabs = await browser.tabs.query({ audible: true, windowId: Windows.id })
+    let next: ID = NOID
+    for (const nt of audibleTabs) {
+      if (nt.id === undefined || !nt.url) continue
+      if (isYouTubePlaybackUrl(nt.url)) {
+        next = nt.id
+        break
+      }
+    }
+    if (next !== nativeAudibleYtTabId) {
+      nativeAudibleYtTabId = next
+      reactive.probeTick++
+    }
+  } catch (err) {
+    Logs.err('YouTube: audible probe failed', err)
+  }
+}
+
+function scheduleNativeAudibleProbe(): void {
+  clearTimeout(probeTimeout)
+  probeTimeout = setTimeout(() => {
+    probeTimeout = undefined
+    void refreshNativeAudibleYouTubeTabId()
+  }, 80) as unknown as number
+}
+
+/** Sync audible YouTube tab id from Firefox (Sidebery tab updates can lag). */
+export function setupYouTubeBarListeners(): void {
+  if (listenersBound) return
+  listenersBound = true
+
+  const onUpdated = (_tabId: ID, change: browser.tabs.ChangeInfo): void => {
+    if (
+      change.audible !== undefined ||
+      change.url !== undefined ||
+      change.status !== undefined
+    ) {
+      scheduleNativeAudibleProbe()
+    }
+  }
+  browser.tabs.onUpdated.addListener(onUpdated)
+  browser.tabs.onActivated.addListener(scheduleNativeAudibleProbe)
+  void refreshNativeAudibleYouTubeTabId()
+
+  probeInterval = setInterval(() => {
+    void refreshNativeAudibleYouTubeTabId()
+  }, 3000) as unknown as number
+}
+
+/** Resolve target: native audible match, then Sidebery state, then active-tab fallback. */
+export function getTargetTab(): Tab | undefined {
+  for (const t of Tabs.list) {
+    void t.reactive.mediaAudible
+    void t.reactive.mediaPaused
+    void t.reactive.mediaMuted
+    void t.reactive.url
+    void t.reactive.active
+  }
+  void reactive.probeTick
+
+  const urlOk = (t: Tab) => !t.discarded && isYouTubePlaybackUrl(tabUrl(t))
+
+  if (nativeAudibleYtTabId !== NOID) {
+    const t = Tabs.byId[nativeAudibleYtTabId]
+    if (t && urlOk(t)) return t
+  }
+
+  const audible = Tabs.list.find(
+    t => urlOk(t) && (t.reactive.mediaAudible || t.audible === true)
+  )
+  if (audible) return audible
+
+  const paused = Tabs.list.find(t => urlOk(t) && (t.reactive.mediaPaused || t.mediaPaused))
+  if (paused) return paused
+
+  const act = Tabs.byId[Tabs.activeId]
+  if (act && urlOk(act)) return act
+
+  return undefined
+}
+
+export function isTargetMuted(tab: Tab): boolean {
+  return tab.reactive.mediaMuted || tab.mutedInfo?.muted === true
+}
+
+export async function play(): Promise<void> {
+  const tab = getTargetTab()
+  if (!tab) return
+  await Tabs.playTabMedia(tab.id)
+}
+
+export async function pause(): Promise<void> {
+  const tab = getTargetTab()
+  if (!tab) return
+  await Tabs.pauseTabMedia(tab.id)
+}
+
+export function mute(): void {
+  const tab = getTargetTab()
+  if (!tab) return
+  browser.tabs.update(tab.id, { muted: true }).catch(err => {
+    Logs.err('YouTube: mute tab failed', err)
+  })
+}
+
+export function unmute(): void {
+  const tab = getTargetTab()
+  if (!tab) return
+  browser.tabs.update(tab.id, { muted: false }).catch(err => {
+    Logs.err('YouTube: unmute tab failed', err)
+  })
+}
+
+async function ensureScriptingPermission(): Promise<boolean> {
+  if (!Permissions.reactive.webData) {
+    const result = await Permissions.request('<all_urls>')
+    if (!result) return false
+  }
+  return true
+}
+
+export async function prevVideo(): Promise<void> {
+  if (!(await ensureScriptingPermission())) return
+  const tab = getTargetTab()
+  if (!tab) return
+  browser.tabs
+    .executeScript(tab.id, {
+      code: "void document.querySelector('.ytp-prev-button')?.click()",
+      runAt: 'document_idle',
+    })
+    .catch(err => {
+      Logs.err('YouTube: prev executeScript failed', err)
+    })
+}
+
+export async function nextVideo(): Promise<void> {
+  if (!(await ensureScriptingPermission())) return
+  const tab = getTargetTab()
+  if (!tab) return
+  browser.tabs
+    .executeScript(tab.id, {
+      code: "void document.querySelector('.ytp-next-button')?.click()",
+      runAt: 'document_idle',
+    })
+    .catch(err => {
+      Logs.err('YouTube: next executeScript failed', err)
+    })
+}
diff --git a/src/sidebar/components/bar.youtube-controls.vue b/src/sidebar/components/bar.youtube-controls.vue
new file mode 100644
index 000000000..4ad9dd4fd
--- /dev/null
+++ b/src/sidebar/components/bar.youtube-controls.vue
@@ -0,0 +1,72 @@
+<template lang="pug">
+.YouTubeControlsBar
+  .YouTubeControlsBar-inner
+    .tool-btn(
+      :data-disabled="!tab"
+      @click="onPrev"
+      :title="translate('bar.youtube.prev')")
+      svg: use(href="#icon_chevron_left")
+    .tool-btn(
+      :data-disabled="!tab"
+      @click="onPlayPause"
+      :title="tab && isPaused ? translate('bar.youtube.play') : translate('bar.youtube.pause')")
+      svg(v-if="tab && isPaused"): use(href="#icon_play")
+      svg(v-else): use(href="#icon_pause")
+    .tool-btn(
+      :data-disabled="!tab"
+      @click="onNext"
+      :title="translate('bar.youtube.next')")
+      svg: use(href="#icon_chevron_right")
+    .tool-btn(
+      :data-disabled="!tab"
+      @click="onMuteToggle"
+      :title="tab && muted ? translate('bar.youtube.unmute') : translate('bar.youtube.mute')")
+      svg(v-if="tab && muted"): use(href="#icon_mute")
+      svg(v-else): use(href="#icon_loud")
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { translate } from 'src/dict'
+import * as Tabs from 'src/services/tabs.fg'
+import * as YouTube from 'src/services/youtube.fg'
+
+const tab = computed(() => YouTube.getTargetTab())
+
+const isPaused = computed(() => {
+  const t = tab.value
+  if (!t) return true
+  if (t.reactive.mediaPaused || t.mediaPaused) return true
+  if (t.reactive.mediaAudible || t.audible) return false
+  if (t.id === Tabs.activeId || t.reactive.active) return false
+  return true
+})
+
+const muted = computed(() => {
+  const t = tab.value
+  if (!t) return false
+  return YouTube.isTargetMuted(t)
+})
+
+function onPlayPause(): void {
+  if (!tab.value) return
+  if (isPaused.value) void YouTube.play()
+  else void YouTube.pause()
+}
+
+function onMuteToggle(): void {
+  const t = tab.value
+  if (!t) return
+  if (YouTube.isTargetMuted(t)) YouTube.unmute()
+  else YouTube.mute()
+}
+
+function onPrev(): void {
+  void YouTube.prevVideo()
+}
+
+function onNext(): void {
+  void YouTube.nextVideo()
+}
+</script>
+
diff --git a/src/sidebar/components/panel.tabs.vue b/src/sidebar/components/panel.tabs.vue
index d5f795188..a0b54c5b8 100644
--- a/src/sidebar/components/panel.tabs.vue
+++ b/src/sidebar/components/panel.tabs.vue
@@ -34,7 +34,7 @@
     v-if="Settings.state.showNewTabBtns && Settings.state.newTabBarPosition === 'bottom'"
     :panel="panel")
 
-  .bottom-bar-space(v-if="bottomBarSpaceNeeded")
+  .bottom-bar-space(v-if="bottomBarSpaceNeeded" :data-rows="bottomDockRows")
 
   PanelPlaceholder(
     :isMsg="Search.reactive.active && panel.reactive.filteredLen === 0"
@@ -42,7 +42,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import { translate } from 'src/dict'
 import type { ScrollBoxComponent, TabsPanel } from 'src/types'
 import * as E from 'src/enums'
@@ -65,10 +65,23 @@ import AnimatedTabList from './animated-tab-list.vue'
 
 const props = defineProps<{ panel: TabsPanel }>()
 const scrollBox = ref<ScrollBoxComponent | null>(null)
-const bottomBarSpaceNeeded =
-  Settings.state.subPanelRecentlyClosedBar ||
-  Settings.state.subPanelBookmarks ||
-  Settings.state.subPanelHistory
+
+const bottomBarTools = computed(
+  () =>
+    Settings.state.subPanelRecentlyClosedBar ||
+    Settings.state.subPanelBookmarks ||
+    Settings.state.subPanelHistory ||
+    Settings.state.subPanelSync
+)
+
+const bottomDockRows = computed(() => {
+  let n = 0
+  if (bottomBarTools.value) n++
+  if (Settings.state.subPanelYouTube) n++
+  return n
+})
+
+const bottomBarSpaceNeeded = computed(() => bottomDockRows.value > 0)
 let scrollBoxEl: HTMLElement | null = null
 
 onMounted(() => {
diff --git a/src/sidebar/sidebar.html b/src/sidebar/sidebar.html
index 47a44064a..827663d3e 100644
--- a/src/sidebar/sidebar.html
+++ b/src/sidebar/sidebar.html
@@ -146,6 +146,8 @@
     <inject>svg://src/assets/folder-open.svg#icon_folder_open</inject>
     <inject>svg://src/assets/tab.svg#icon_tab</inject>
     <inject>svg://src/assets/arrow-down.svg#icon_arrow_down</inject>
+    <inject>svg://src/assets/chevron-left.svg#icon_chevron_left</inject>
+    <inject>svg://src/assets/chevron-right.svg#icon_chevron_right</inject>
     <inject>svg://src/assets/add-tabs-panel.svg#icon_add_tabs_panel</inject>
     <inject>svg://src/assets/web.svg#icon_web</inject>
     <inject>svg://src/assets/ellipsis.svg#icon_ellipsis</inject>
diff --git a/src/sidebar/sidebar.ts b/src/sidebar/sidebar.ts
index 16ebf74b6..1b988df54 100644
--- a/src/sidebar/sidebar.ts
+++ b/src/sidebar/sidebar.ts
@@ -26,6 +26,7 @@ import * as Snapshots from 'src/services/snapshots.fg'
 import * as Sync from 'src/services/sync.fg'
 import * as Keybindings from 'src/services/keybindings.fg'
 import * as WebReq from 'src/services/web-req.fg'
+import * as YouTube from 'src/services/youtube.fg'
 import SidebarRoot from './sidebar.vue'
 
 async function main(): Promise<void> {
@@ -95,6 +96,7 @@ async function main(): Promise<void> {
   Favicons.reactivate(reactive)
   Bookmarks.reactivate(reactive)
   Tabs.reactivate(reactive)
+  YouTube.reactivate(reactive)
   DnD.reactivate(reactive)
   Permissions.reactivate(reactive)
   Notifications.reactivate(reactive)
@@ -124,6 +126,8 @@ async function main(): Promise<void> {
   if (Sidebar.hasTabs) await Tabs.load()
   else await Tabs.loadInShadowMode()
 
+  YouTube.setupYouTubeBarListeners()
+
   const actPanel = Sidebar.panelsById[Sidebar.activePanelId]
   const initBookmarks = !Settings.state.loadBookmarksOnDemand || Utils.isBookmarksPanel(actPanel)
   const initHistory = !Settings.state.loadHistoryOnDemand || Utils.isHistoryPanel(actPanel)
diff --git a/src/sidebar/sidebar.vue b/src/sidebar/sidebar.vue
index 6e71809dd..d30d9977a 100644
--- a/src/sidebar/sidebar.vue
+++ b/src/sidebar/sidebar.vue
@@ -74,32 +74,34 @@
           :panel="panel")
 
       Transition(name="bottom-bar")
-        .BottomBar(
-          v-if="bottomBar && Utils.isTabsPanel(activePanel)"
-          @dragover.prevent.stop=""
-          :data-drop-target-bookmarks="DnD.reactive.dstType === E.DropType.BookmarksSubPanelBtn && DnD.reactive.dstPanelId === activePanel.id"
-          :data-drop-target-sync="DnD.reactive.dstType === E.DropType.SyncSubPanelBtn")
-          .tool-btn(
-            v-if="Settings.state.subPanelRecentlyClosedBar"
-            :data-disabled="!Tabs.reactive.recentlyRemovedLen"
-            @click="Sidebar.openSubPanel(E.SubPanelType.RecentlyClosedTabs, activePanel)")
-            svg: use(href="#icon_trash")
-          .tool-btn.-bookmarks(
-            v-if="Settings.state.subPanelBookmarks"
-            @dragleave="onBSPBDragLeave"
-            @click="Sidebar.openSubPanel(E.SubPanelType.Bookmarks, activePanel)")
-            .dnd-layer(data-dnd-type="bspb")
-            svg: use(href="#icon_bookmarks")
-          .tool-btn(
-            v-if="Settings.state.subPanelHistory"
-            @click="Sidebar.openSubPanel(E.SubPanelType.History, activePanel)")
-            svg: use(href="#icon_clock")
-          .tool-btn.-sync(
-            v-if="Settings.state.subPanelSync"
-            @dragleave="onSSPBDragLeave"
-            @click="Sidebar.openSubPanel(E.SubPanelType.Sync, activePanel)")
-            .dnd-layer(data-dnd-type="sspb")
-            svg: use(href="#icon_sync")
+        .SidebarBottomDock(v-if="(bottomBar || showYouTubeBar) && Utils.isTabsPanel(activePanel)")
+          YouTubeControlsBar(v-if="showYouTubeBar")
+          .BottomBar(
+            v-if="bottomBar"
+            @dragover.prevent.stop=""
+            :data-drop-target-bookmarks="DnD.reactive.dstType === E.DropType.BookmarksSubPanelBtn && DnD.reactive.dstPanelId === activePanel.id"
+            :data-drop-target-sync="DnD.reactive.dstType === E.DropType.SyncSubPanelBtn")
+            .tool-btn(
+              v-if="Settings.state.subPanelRecentlyClosedBar"
+              :data-disabled="!Tabs.reactive.recentlyRemovedLen"
+              @click="Sidebar.openSubPanel(E.SubPanelType.RecentlyClosedTabs, activePanel)")
+              svg: use(href="#icon_trash")
+            .tool-btn.-bookmarks(
+              v-if="Settings.state.subPanelBookmarks"
+              @dragleave="onBSPBDragLeave"
+              @click="Sidebar.openSubPanel(E.SubPanelType.Bookmarks, activePanel)")
+              .dnd-layer(data-dnd-type="bspb")
+              svg: use(href="#icon_bookmarks")
+            .tool-btn(
+              v-if="Settings.state.subPanelHistory"
+              @click="Sidebar.openSubPanel(E.SubPanelType.History, activePanel)")
+              svg: use(href="#icon_clock")
+            .tool-btn.-sync(
+              v-if="Settings.state.subPanelSync"
+              @dragleave="onSSPBDragLeave"
+              @click="Sidebar.openSubPanel(E.SubPanelType.Sync, activePanel)")
+              .dnd-layer(data-dnd-type="sspb")
+              svg: use(href="#icon_sync")
 
       SubPanel
 
@@ -156,6 +158,7 @@ import NewTabShortcutsPopup from '../components/popup.new-tab-shortcuts.vue'
 import SiteConfigPopup from '../components/popup.site-config.vue'
 import ProcessingTabsPopup from './components/popup.processing-tabs.vue'
 import SubPanel from './components/sub-panel.vue'
+import YouTubeControlsBar from './components/bar.youtube-controls.vue'
 
 const rootEl = ref<HTMLElement | null>(null)
 const panelBoxEl = ref<HTMLElement | null>(null)
@@ -176,6 +179,8 @@ let bottomBar =
   Settings.state.subPanelHistory ||
   Settings.state.subPanelSync
 
+const showYouTubeBar = computed(() => Settings.state.subPanelYouTube)
+
 function recalcStaticVars() {
   animations = !Settings.state.animations ? 'none' : Settings.state.animationSpeed || 'fast'
   pinnedTabsBarTop = Settings.state.pinnedTabsPosition === 'top'
diff --git a/src/styles/sidebar/panel.tabs.styl b/src/styles/sidebar/panel.tabs.styl
index 5c53d7424..526ad8868 100644
--- a/src/styles/sidebar/panel.tabs.styl
+++ b/src/styles/sidebar/panel.tabs.styl
@@ -155,9 +155,15 @@
   flex-shrink: 0
   height: calc(var(--bottom-bar-height) + var(--general-margin)*2)
 
+.TabsPanel .bottom-bar-space[data-rows="2"]
+  height: calc((var(--bottom-bar-height) + var(--general-margin)*2) * 2)
+
 #root[data-new-tab-btns="true"] .TabsPanel .bottom-bar-space
   height: calc(var(--bottom-bar-height) + var(--general-margin))
 
+#root[data-new-tab-btns="true"] .TabsPanel .bottom-bar-space[data-rows="2"]
+  height: calc((var(--bottom-bar-height) + var(--general-margin)) * 2)
+
 .TabsPanel .tab-preview
   position: relative
   width: calc(100% - var(--tabs-margin) * 2)
diff --git a/src/styles/sidebar/sidebar.styl b/src/styles/sidebar/sidebar.styl
index 90bb13187..bcdc3d9f7 100644
--- a/src/styles/sidebar/sidebar.styl
+++ b/src/styles/sidebar/sidebar.styl
@@ -168,6 +168,49 @@ body
 // ---
 // -- Bottom bar
 // -
+.SidebarBottomDock
+  position: absolute
+  display: flex
+  flex-direction: column
+  width: 100%
+  bottom: 0
+  left: 0
+  flex-shrink: 0
+  z-index: 10
+
+.SidebarBottomDock .BottomBar
+  position: relative
+  bottom: auto
+  left: auto
+
+// YouTube controls (row above bottom tool strip)
+.SidebarBottomDock .YouTubeControlsBar
+  position: relative
+  width: 100%
+  flex-shrink: 0
+  z-index: 11
+  background-color: var(--frame-bg)
+  border-bottom: 1px solid var(--s-darker-border-color, var(--border, transparent))
+
+.SidebarBottomDock .YouTubeControlsBar-inner
+  display: flex
+  flex-direction: row
+  flex-wrap: nowrap
+  align-items: center
+  width: 100%
+  box-sizing: border-box
+  grid-gap: var(--general-margin)
+  padding: var(--general-margin)
+
+// Override .Sidebar .tool-btn { width: 100% } so four buttons stay on one row
+.SidebarBottomDock .YouTubeControlsBar .tool-btn
+  flex: 1 1 0
+  width: auto
+  min-width: var(--bottom-bar-height)
+  max-width: none
+  &:after
+    display: none
+
 .BottomBar
   position: absolute
   display: flex
@@ -178,6 +221,9 @@ body
   grid-gap: var(--general-margin)
   padding: var(--general-margin)
 
+#root[data-new-tab-btns="true"] .SidebarBottomDock .BottomBar
+  padding-top: 0
+
 #root[data-new-tab-btns="true"] .BottomBar
   padding-top: 0
 
diff --git a/src/types/settings.ts b/src/types/settings.ts
index 845436d60..2e01bf4d7 100644
--- a/src/types/settings.ts
+++ b/src/types/settings.ts
@@ -50,6 +50,7 @@ export interface SettingsState {
   subPanelBookmarks: boolean
   subPanelHistory: boolean
   subPanelSync: boolean
+  subPanelYouTube: boolean
 
   // Group page
   groupLayout: (typeof SETTINGS_OPTIONS.groupLayout)[number]