diff --git a/src/browser/base/content/ZenUIManager.mjs b/src/browser/base/content/ZenUIManager.mjs
index f644915ca..185fe8cc3 100644
--- a/src/browser/base/content/ZenUIManager.mjs
+++ b/src/browser/base/content/ZenUIManager.mjs
@@ -37,6 +37,8 @@ var gZenUIManager = {
 
     window.addEventListener('TabClose', this.onTabClose.bind(this));
     this.tabsWrapper.addEventListener('scroll', this.saveScrollbarState.bind(this));
+
+    gZenMediaController.init();
   },
 
   updateTabsToolbar() {
diff --git a/src/browser/base/content/zen-assets.inc.xhtml b/src/browser/base/content/zen-assets.inc.xhtml
index 33e923742..9895f4093 100644
--- a/src/browser/base/content/zen-assets.inc.xhtml
+++ b/src/browser/base/content/zen-assets.inc.xhtml
@@ -26,6 +26,7 @@
 <link rel="stylesheet" type="text/css" href="chrome://browser/skin/zen-icons/icons.css" />
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-branding.css" />
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-welcome.css" />
+<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-media-controls.css" />
 </linkset>
 
 # Scripts used all over the browser
@@ -42,6 +43,7 @@
 <script src="chrome://browser/content/zen-components/ZenGradientGenerator.mjs" />
 <script src="chrome://browser/content/zen-components/ZenViewSplitter.mjs"/>
 <script src="chrome://browser/content/zen-components/ZenGlanceManager.mjs" />
+<script src="chrome://browser/content/zen-components/ZenMediaController.mjs" />
 
 # Unimportant scripts
 <script src="chrome://browser/content/zen-components/ZenRices.mjs" />
diff --git a/src/browser/base/content/zen-assets.jar.inc.mn b/src/browser/base/content/zen-assets.jar.inc.mn
index 2f20814ab..e13214714 100644
--- a/src/browser/base/content/zen-assets.jar.inc.mn
+++ b/src/browser/base/content/zen-assets.jar.inc.mn
@@ -25,6 +25,7 @@
         content/browser/zen-components/ZenRices.mjs             (zen-components/ZenRices.mjs)
         content/browser/zen-components/ZenEmojies.mjs           (zen-components/ZenEmojies.mjs)
         content/browser/zen-components/ZenWelcome.mjs           (zen-components/ZenWelcome.mjs)
+        content/browser/zen-components/ZenMediaController.mjs   (zen-components/ZenMediaController.mjs)
 
         content/browser/zen-styles/zen-theme.css                (content/zen-styles/zen-theme.css)
         content/browser/zen-styles/zen-buttons.css              (content/zen-styles/zen-buttons.css)
@@ -49,6 +50,7 @@
         content/browser/zen-styles/zen-rices.css                (content/zen-styles/zen-rices.css)
         content/browser/zen-styles/zen-branding.css             (content/zen-styles/zen-branding.css)
         content/browser/zen-styles/zen-welcome.css              (content/zen-styles/zen-welcome.css)
+        content/browser/zen-styles/zen-media-controls.css       (content/zen-styles/zen-media-controls.css)
 
         content/browser/zen-styles/zen-panels/bookmarks.css     (content/zen-styles/zen-panels/bookmarks.css)
         content/browser/zen-styles/zen-panels/extensions.css    (content/zen-styles/zen-panels/extensions.css)
diff --git a/src/browser/base/content/zen-media-player.inc.xhtml b/src/browser/base/content/zen-media-player.inc.xhtml
new file mode 100644
index 000000000..8295bf40a
--- /dev/null
+++ b/src/browser/base/content/zen-media-player.inc.xhtml
@@ -0,0 +1,51 @@
+<toolbar id="zen-media-controls-toolbar"
+  class="browser-toolbar customization-target zen-sidebar-toolbar"
+  context="toolbar-context-menu"
+  mode="icons"
+  hidden="true">
+  <toolbaritem>
+    <vbox id="zen-media-main-vbox">
+      <hbox id="zen-media-service-hbox" class="show-on-hover">
+        <hbox id="zen-media-service-button">
+          <image/>
+        </hbox>
+        <hbox id="zen-media-service-title" fadein="true">
+          <label class="service" />
+          <label class="tld" />
+        </hbox>
+      </hbox>
+      
+      <vbox id="zen-media-info-vbox" class="show-on-hover">
+        <label id="zen-media-title" fadein="true"/>
+        <label id="zen-media-artist" fadein="true"/>
+      </vbox>
+
+      <hbox id="zen-media-progress-hbox"  class="show-on-hover">
+        <label id="zen-media-current-time">0:00</label>
+        <html:input type="range" id="zen-media-progress-bar" 
+          value="0" min="0" max="100" step="0.1"
+          oninput="gZenMediaController.onMediaSeekDrag(event);"
+          onchange="gZenMediaController.onMediaSeekComplete(event);"/>
+        <label id="zen-media-duration">0:00</label>
+      </hbox>
+      
+      <hbox id="zen-media-controls-hbox">
+        <toolbarbutton id="zen-media-focus-button"
+          class="toolbarbutton-1"
+          oncommand="gZenMediaController.onMediaFocus();" />
+        <toolbarbutton id="zen-media-previoustrack-button"
+          class="toolbarbutton-1"
+          oncommand="gZenMediaController.onMediaPlayPrev();" />
+        <toolbarbutton id="zen-media-playpause-button"
+          class="toolbarbutton-1"
+          oncommand="gZenMediaController.onMediaToggle();" />
+        <toolbarbutton id="zen-media-nexttrack-button"
+          class="toolbarbutton-1"
+          oncommand="gZenMediaController.onMediaPlayNext();" />
+        <toolbarbutton id="zen-media-mute-button"
+          class="toolbarbutton-1"
+          oncommand="gZenMediaController.onMediaMute();" />
+      </hbox>
+    </vbox>
+  </toolbaritem>
+</toolbar>
diff --git a/src/browser/base/content/zen-sidebar-icons.inc.xhtml b/src/browser/base/content/zen-sidebar-icons.inc.xhtml
index a85aaf520..8fd14b854 100644
--- a/src/browser/base/content/zen-sidebar-icons.inc.xhtml
+++ b/src/browser/base/content/zen-sidebar-icons.inc.xhtml
@@ -1,3 +1,4 @@
+#include zen-media-player.inc.xhtml
 <toolbar brighttext="true"
   id="zen-sidebar-bottom-buttons"
   fullscreentoolbar="true"
diff --git a/src/browser/base/content/zen-styles/zen-media-controls.css b/src/browser/base/content/zen-styles/zen-media-controls.css
new file mode 100644
index 000000000..cd256a8cd
--- /dev/null
+++ b/src/browser/base/content/zen-styles/zen-media-controls.css
@@ -0,0 +1,252 @@
+#zen-media-controls-toolbar {
+  --progress-height: 5px;
+  --button-spacing: 2px;
+
+  display: flex;
+  justify-content: space-between;
+  min-width: 0;
+  background: transparent;
+  container-type: inline-size;
+
+  .toolbarbutton-1 {
+    border-radius: 5px;
+    color: white;
+  }
+
+  #zen-media-prev-button,
+  #zen-media-play-pause-button,
+  #zen-media-next-button {
+    margin: 0;
+  }
+
+  image.toolbarbutton-icon {
+    padding: 5px;
+    width: 26px;
+    height: 26px;
+  }
+
+  #zen-media-progress-bar {
+    appearance: none;
+    width: 100%;
+    height: var(--progress-height);
+    margin: 0 8px;
+    border-radius: 2px;
+    background-color: rgba(255, 255, 255, 0.2);
+    cursor: pointer;
+    transition: height 0.15s ease-out;
+
+    &::-moz-range-track {
+      background: var(--zen-colors-border);
+      border-radius: 999px;
+      height: var(--progress-height);
+    }
+
+    &::-moz-range-progress {
+      background: var(--zen-primary-color);
+      border-radius: 999px;
+      height: var(--progress-height);
+    }
+
+    &::-moz-range-thumb {
+      background: var(--zen-primary-color);
+      border: none;
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+      cursor: pointer;
+    }
+  }
+
+  &:hover {
+    & #zen-media-main-vbox {
+      gap: 6px;
+    }
+
+    .show-on-hover {
+      max-height: 50px;
+      margin: 2px 6px;
+      margin-bottom: 0;
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  #zen-media-focus-button {
+    align-self: center;
+    transition:
+      opacity 0.2s ease,
+      transform 0.2s ease;
+
+    @container (max-width: 185px) {
+      width: 0;
+      height: 0;
+      opacity: 0;
+      padding: 0;
+      transform: translateX(-20px);
+    }
+
+    @container (min-width: 185px) {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  toolbaritem {
+    flex-grow: 1;
+    padding: 0;
+    transition: padding 0.3s ease-out;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    padding: 4px;
+    border-radius: var(--border-radius-medium);
+    background: light-dark(rgb(255, 255, 255), rgb(11, 11, 11)) !important;
+    width: 100%;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
+  }
+
+  .show-on-hover {
+    max-height: 0;
+    opacity: 0;
+    overflow: hidden;
+    transform: translateY(5px);
+    margin: 0 6px;
+    transition:
+      max-height 0.1s ease-in-out,
+      opacity 0.1s ease-in-out,
+      transform 0.05s ease-in-out,
+      margin 0.15s ease-in-out;
+  }
+
+  #zen-media-current-time,
+  #zen-media-duration {
+    margin: 0 0 0 1px;
+    font-size: x-small;
+    opacity: 0.7;
+    font-weight: 500;
+  }
+}
+
+@keyframes zen-media-controls-show {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+#zen-media-controls-toolbar {
+  display: none;
+  animation: none;
+  transition: none;
+
+  &:not([hidden]) {
+    animation: zen-media-controls-show 0.2s ease-out;
+    display: flex;
+    height: 2.5rem;
+    overflow: visible;
+    position: relative;
+    z-index: 2;
+  }
+}
+
+#zen-media-service-title,
+#zen-media-title,
+#zen-media-artist {
+  white-space: nowrap;
+  width: 0;
+  margin-left: 0;
+}
+
+#zen-media-service-title {
+  align-self: center;
+  font-size: 13px;
+  margin-left: 6px;
+
+  & label {
+    margin: 0;
+  }
+
+  & .tld {
+    opacity: 0.5;
+  }
+}
+
+#zen-media-title,
+#zen-media-artist {
+  align-self: start;
+}
+
+#zen-media-artist {
+  opacity: 0.7;
+  font-weight: 500;
+  font-size: smaller;
+}
+
+#zen-media-title {
+  height: 16px;
+  font-size: math;
+  font-weight: bold;
+}
+
+#zen-media-main-vbox,
+#zen-media-service-hbox,
+#zen-media-info-vbox,
+#zen-media-progress-hbox {
+  width: 100%;
+}
+
+#zen-media-service-hbox {
+  margin-top: 6px;
+}
+
+#zen-media-info-vbox {
+  & label {
+    width: 100%;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+}
+
+#zen-media-main-vbox {
+  height: 100%;
+  justify-content: space-between;
+  overflow: hidden;
+  transition: gap 0.1s ease-out;
+  transition-delay: 0.1s;
+  gap: 0px;
+}
+
+#zen-media-progress-hbox {
+  flex-grow: 1;
+  height: 1.1rem;
+  align-items: center;
+}
+
+#zen-media-controls-hbox {
+  align-items: flex-end;
+  justify-content: space-between;
+  max-width: 100%;
+  overflow: hidden;
+  --toolbarbutton-outer-padding: 0;
+}
+
+#zen-media-service-button {
+  align-items: center;
+
+  & image {
+    width: 16px;
+    height: 16px;
+    border-radius: 4px;
+  }
+}
+
+:root:not([zen-sidebar-expanded='true']) {
+  #zen-media-controls-toolbar {
+    display: none;
+  }
+}
diff --git a/src/browser/base/zen-components/ZenMediaController.mjs b/src/browser/base/zen-components/ZenMediaController.mjs
new file mode 100644
index 000000000..e43a2e7f4
--- /dev/null
+++ b/src/browser/base/zen-components/ZenMediaController.mjs
@@ -0,0 +1,295 @@
+class ZenMediaController {
+  _currentMediaController = null;
+  _currentBrowser = null;
+  _mediaUpdateInterval = null;
+
+  mediaTitle = null;
+  mediaArtist = null;
+  mediaControlBar = null;
+  mediaServiceIcon = null;
+  mediaServiceTitle = null;
+  mediaProgressBar = null;
+  mediaCurrentTime = null;
+  mediaDuration = null;
+  mediaFocusButton = null;
+  mediaProgressBarContainer = null;
+
+  supportedKeys = ['playpause', 'previoustrack', 'nexttrack'];
+
+  init() {
+    this.mediaTitle = document.querySelector('#zen-media-title');
+    this.mediaArtist = document.querySelector('#zen-media-artist');
+    this.mediaControlBar = document.querySelector('#zen-media-controls-toolbar');
+    this.mediaServiceIcon = document.querySelector('#zen-media-service-button > image');
+    this.mediaServiceTitle = document.querySelector('#zen-media-service-title');
+    this.mediaProgressBar = document.querySelector('#zen-media-progress-bar');
+    this.mediaCurrentTime = document.querySelector('#zen-media-current-time');
+    this.mediaDuration = document.querySelector('#zen-media-duration');
+    this.mediaFocusButton = document.querySelector('#zen-media-focus-button');
+    this.mediaProgressBarContainer = document.querySelector('#zen-media-progress-hbox');
+
+    window.addEventListener('TabSelect', (event) => {
+      if (this._currentBrowser) {
+        if (event.target.linkedBrowser.browserId === this._currentBrowser.browserId) {
+          this.mediaControlBar.setAttribute('hidden', 'true');
+        } else {
+          this.mediaControlBar.removeAttribute('hidden');
+        }
+
+        gZenUIManager.updateTabsToolbar();
+      }
+    });
+  }
+
+  /**
+   * Deinitializes a media controller, removing all event listeners and resetting state.
+   * @param {Object} mediaController - The media controller to deinitialize.
+   */
+  deinitMediaController(mediaController) {
+    if (!mediaController) return;
+
+    mediaController.onpositionstatechange = null;
+    mediaController.onplaybackstatechange = null;
+    mediaController.onsupportedkeyschange = null;
+    mediaController.onmetadatachange = null;
+    mediaController.ondeactivated = null;
+
+    this._currentMediaController = null;
+    this._currentBrowser = null;
+
+    if (this._mediaUpdateInterval) {
+      clearInterval(this._mediaUpdateInterval);
+      this._mediaUpdateInterval = null;
+    }
+
+    this.mediaControlBar.setAttribute('hidden', 'true');
+    this.mediaControlBar.removeAttribute('muted');
+    this.mediaControlBar.classList.remove('playing');
+
+    gZenUIManager.updateTabsToolbar();
+  }
+
+  /**
+   * Sets up the media control UI with metadata and position state.
+   * @param {Object} metadata - The media metadata (title, artist, etc.).
+   * @param {Object} positionState - The position state (position, duration).
+   */
+  setupMediaControl(metadata, positionState) {
+    if (!this.mediaControlBar.classList.contains('playing')) {
+      this.mediaControlBar.classList.add('playing');
+    }
+
+    // Have it displayed as e.g. <white>youtube</white><grey>.com</grey>
+    let host = this._currentBrowser._originalURI.displayHost;
+    if (host.startsWith('www.')) host = host.slice(4);
+    // note: we might have subdomains, so we need to split the host
+    const [service, ...tld] = host.split('.');
+    this.mediaServiceTitle.querySelector('.service').textContent = service;
+    this.mediaServiceTitle.querySelector('.tld').textContent = '.' + tld.join('.');
+
+    this.mediaServiceIcon.src = this._currentBrowser.mIconURL;
+    this.mediaFocusButton.style.listStyleImage = `url(${this._currentBrowser.mIconURL})`;
+
+    this.mediaTitle.textContent = metadata.title || '';
+    this.mediaArtist.textContent = metadata.artist || '';
+
+    gZenUIManager.updateTabsToolbar();
+
+    this._currentPosition = positionState.position;
+    this._currentDuration = positionState.duration;
+    this.updateMediaPosition();
+
+    for (const key of this.supportedKeys) {
+      const button = this.mediaControlBar.querySelector(`#zen-media-${key}-button`);
+      button.disabled = !this._currentMediaController.supportedKeys.includes(key);
+    }
+  }
+
+  /**
+   * @param {Object} mediaController - The media controller to activate.
+   * @param {Object} browser - The browser associated with the media controller.
+   */
+  activateMediaControls(mediaController, browser) {
+    this.updateMuteState();
+
+    if (this._currentBrowser?.browserId === browser.browserId) return;
+    else {
+      this.deinitMediaController(this._currentMediaController);
+      this._currentMediaController = mediaController;
+      this._currentBrowser = browser;
+    }
+
+    mediaController.onpositionstatechange = this.onPositionstateChange.bind(this);
+    mediaController.onplaybackstatechange = this.onPlaybackstateChange.bind(this);
+    mediaController.onsupportedkeyschange = this.onSupportedKeysChange.bind(this);
+    mediaController.onmetadatachange = this.onMetadataChange.bind(this);
+    mediaController.ondeactivated = this.onDeactivated.bind(this);
+
+    const metadata = mediaController.getMetadata();
+    const positionState = mediaController.getPositionState();
+
+    this.setupMediaControl(metadata, positionState);
+  }
+
+  /**
+   * @param {Event} event - The deactivation event.
+   */
+  onDeactivated(event) {
+    if (event.target === this._currentMediaController) {
+      this.deinitMediaController(event.target);
+    }
+  }
+
+  /**
+   * Updates playback state and UI based on changes.
+   * @param {Event} event - The playback state change event.
+   */
+  onPlaybackstateChange(event) {
+    this.mediaControlBar.classList.toggle('playing', event.target.isPlaying);
+  }
+
+  /**
+   * Updates supported keys in the UI.
+   * @param {Event} event - The supported keys change event.
+   */
+  onSupportedKeysChange(event) {
+    for (const key of this.supportedKeys) {
+      const button = this.mediaControlBar.querySelector(`#zen-media-${key}-button`);
+      button.disabled = !event.target.supportedKeys.includes(key);
+    }
+  }
+
+  /**
+   * Updates position state and UI when the media position changes.
+   * @param {Event} event - The position state change event.
+   */
+  onPositionstateChange(event) {
+    if (event.target !== this._currentMediaController) return;
+
+    this._currentPosition = event.position;
+    this._currentDuration = event.duration;
+    this.updateMediaPosition();
+  }
+
+  /**
+   * Updates the media progress bar and time display.
+   */
+  updateMediaPosition() {
+    if (this._mediaUpdateInterval) {
+      clearInterval(this._mediaUpdateInterval);
+      this._mediaUpdateInterval = null;
+    }
+
+    if (this._currentDuration >= 900_000) return this.mediaProgressBarContainer.setAttribute('hidden', 'true');
+    else this.mediaProgressBarContainer.removeAttribute('hidden');
+
+    this.mediaCurrentTime.textContent = this.formatSecondsToTime(this._currentPosition);
+    this.mediaDuration.textContent = this.formatSecondsToTime(this._currentDuration);
+    this.mediaProgressBar.value = (this._currentPosition / this._currentDuration) * 100;
+
+    if (this._currentMediaController?.isPlaying) {
+      this._mediaUpdateInterval = setInterval(() => {
+        if (this._currentMediaController?.isPlaying) {
+          this._currentPosition += 1;
+          if (this._currentPosition > this._currentDuration) {
+            this._currentPosition = this._currentDuration;
+          }
+          this.mediaCurrentTime.textContent = this.formatSecondsToTime(this._currentPosition);
+          this.mediaProgressBar.value = (this._currentPosition / this._currentDuration) * 100;
+        } else {
+          clearInterval(this._mediaUpdateInterval);
+          this._mediaUpdateInterval = null;
+        }
+      }, 1000);
+    }
+  }
+
+  /**
+   * Formats seconds into a hours:minutes:seconds string.
+   * @param {number} seconds - The time in seconds.
+   * @returns {string} Formatted time string.
+   */
+  formatSecondsToTime(seconds) {
+    if (!seconds || isNaN(seconds)) return '0:00';
+
+    const totalSeconds = Math.max(0, Math.ceil(seconds));
+    const hours = Math.floor(totalSeconds / 3600);
+    const minutes = Math.floor((totalSeconds % 3600) / 60).toString();
+    const secs = (totalSeconds % 60).toString();
+
+    if (hours > 0) {
+      return `${hours}:${minutes.padStart(2, '0')}:${secs.padStart(2, '0')}`;
+    }
+
+    return `${minutes}:${secs.padStart(2, '0')}`;
+  }
+
+  /**
+   * Updates metadata in the UI.
+   * @param {Event} event - The metadata change event.
+   */
+  onMetadataChange(event) {
+    const metadata = event.target.getMetadata();
+    this.mediaTitle.textContent = metadata.title || '';
+    this.mediaArtist.textContent = metadata.artist || '';
+  }
+
+  onMediaPlayPrev() {
+    if (this._currentMediaController?.supportedKeys.includes('previoustrack')) {
+      this._currentMediaController.prevTrack();
+    }
+  }
+
+  onMediaPlayNext() {
+    if (this._currentMediaController?.supportedKeys.includes('nexttrack')) {
+      this._currentMediaController.nextTrack();
+    }
+  }
+
+  onMediaSeekDrag(event) {
+    this._currentMediaController?.pause();
+    const newTime = (event.target.value / 100) * this._currentDuration;
+    this.mediaCurrentTime.textContent = this.formatSecondsToTime(newTime);
+  }
+
+  onMediaSeekComplete(event) {
+    const newPosition = (event.target.value / 100) * this._currentDuration;
+    if (this._currentMediaController?.supportedKeys.includes('seekto')) {
+      this._currentMediaController.seekTo(newPosition);
+      this._currentMediaController.play();
+    }
+  }
+
+  onMediaFocus() {
+    this._currentMediaController?.focus();
+  }
+
+  onMediaMute() {
+    if (!this.mediaControlBar.hasAttribute('muted')) {
+      this._currentBrowser.mute();
+      this.mediaControlBar.setAttribute('muted', '');
+    } else {
+      this._currentBrowser.unmute();
+      this.mediaControlBar.removeAttribute('muted');
+    }
+  }
+
+  onMediaToggle() {
+    if (this.mediaControlBar.classList.contains('playing')) {
+      this._currentMediaController?.pause();
+    } else {
+      this._currentMediaController?.play();
+    }
+  }
+
+  updateMuteState() {
+    if (!this._currentBrowser) return;
+    if (this._currentBrowser._audioMuted) {
+      this.mediaControlBar.setAttribute('muted', '');
+    } else {
+      this.mediaControlBar.removeAttribute('muted');
+    }
+  }
+}
+
+window.gZenMediaController = new ZenMediaController();
diff --git a/src/browser/themes/shared/zen-icons/icons.css b/src/browser/themes/shared/zen-icons/icons.css
index c8c69e4e8..5a2baba6a 100644
--- a/src/browser/themes/shared/zen-icons/icons.css
+++ b/src/browser/themes/shared/zen-icons/icons.css
@@ -1150,3 +1150,37 @@ menupopup > menuitem:is([type='checkbox']) .menu-iconic-left {
 #sidebarRevampSeparator {
   display: none !important;
 }
+
+#zen-media-playpause-button {
+  list-style-image: url('media-play.svg') !important;
+}
+
+#zen-media-controls-toolbar.playing #zen-media-playpause-button {
+  list-style-image: url('media-pause.svg') !important;
+}
+
+#zen-media-nexttrack-button {
+  list-style-image: url('media-next.svg') !important;
+}
+
+#zen-media-previoustrack-button {
+  list-style-image: url('media-previous.svg') !important;
+}
+
+#zen-media-controls-toolbar[muted] #zen-media-mute-button {
+  list-style-image: url('media-mute.svg') !important;
+}
+
+#zen-media-mute-button {
+  list-style-image: url('media-unmute.svg') !important;
+}
+
+#zen-media-close-button {
+  list-style-image: url('close.svg') !important;
+}
+
+#zen-media-controls-toolbar:hover {
+  #zen-media-focus-button {
+    list-style-image: url('screen.svg') !important;
+  }
+}
diff --git a/src/browser/themes/shared/zen-icons/jar.inc.mn b/src/browser/themes/shared/zen-icons/jar.inc.mn
index fa20d2220..515c183f9 100644
--- a/src/browser/themes/shared/zen-icons/jar.inc.mn
+++ b/src/browser/themes/shared/zen-icons/jar.inc.mn
@@ -66,9 +66,11 @@
   skin/classic/browser/zen-icons/manage.svg                      (../shared/zen-icons/lin/manage.svg) 
   skin/classic/browser/zen-icons/media-loop.svg                      (../shared/zen-icons/lin/media-loop.svg) 
   skin/classic/browser/zen-icons/media-mute.svg                      (../shared/zen-icons/lin/media-mute.svg) 
+  skin/classic/browser/zen-icons/media-next.svg                      (../shared/zen-icons/lin/media-next.svg) 
   skin/classic/browser/zen-icons/media-pause.svg                      (../shared/zen-icons/lin/media-pause.svg) 
   skin/classic/browser/zen-icons/media-pip.svg                      (../shared/zen-icons/lin/media-pip.svg) 
   skin/classic/browser/zen-icons/media-play.svg                      (../shared/zen-icons/lin/media-play.svg) 
+  skin/classic/browser/zen-icons/media-previous.svg                      (../shared/zen-icons/lin/media-previous.svg) 
   skin/classic/browser/zen-icons/media-speed.svg                      (../shared/zen-icons/lin/media-speed.svg) 
   skin/classic/browser/zen-icons/media-unmute.svg                      (../shared/zen-icons/lin/media-unmute.svg) 
   skin/classic/browser/zen-icons/menu-bar.svg                      (../shared/zen-icons/lin/menu-bar.svg) 
@@ -198,9 +200,11 @@
   skin/classic/browser/zen-icons/manage.svg                      (../shared/zen-icons/lin/manage.svg) 
   skin/classic/browser/zen-icons/media-loop.svg                      (../shared/zen-icons/lin/media-loop.svg) 
   skin/classic/browser/zen-icons/media-mute.svg                      (../shared/zen-icons/lin/media-mute.svg) 
+  skin/classic/browser/zen-icons/media-next.svg                      (../shared/zen-icons/lin/media-next.svg) 
   skin/classic/browser/zen-icons/media-pause.svg                      (../shared/zen-icons/lin/media-pause.svg) 
   skin/classic/browser/zen-icons/media-pip.svg                      (../shared/zen-icons/lin/media-pip.svg) 
   skin/classic/browser/zen-icons/media-play.svg                      (../shared/zen-icons/lin/media-play.svg) 
+  skin/classic/browser/zen-icons/media-previous.svg                      (../shared/zen-icons/lin/media-previous.svg) 
   skin/classic/browser/zen-icons/media-speed.svg                      (../shared/zen-icons/lin/media-speed.svg) 
   skin/classic/browser/zen-icons/media-unmute.svg                      (../shared/zen-icons/lin/media-unmute.svg) 
   skin/classic/browser/zen-icons/menu-bar.svg                      (../shared/zen-icons/lin/menu-bar.svg) 
@@ -330,9 +334,11 @@
   skin/classic/browser/zen-icons/manage.svg                      (../shared/zen-icons/lin/manage.svg) 
   skin/classic/browser/zen-icons/media-loop.svg                      (../shared/zen-icons/lin/media-loop.svg) 
   skin/classic/browser/zen-icons/media-mute.svg                      (../shared/zen-icons/lin/media-mute.svg) 
+  skin/classic/browser/zen-icons/media-next.svg                      (../shared/zen-icons/lin/media-next.svg) 
   skin/classic/browser/zen-icons/media-pause.svg                      (../shared/zen-icons/lin/media-pause.svg) 
   skin/classic/browser/zen-icons/media-pip.svg                      (../shared/zen-icons/lin/media-pip.svg) 
   skin/classic/browser/zen-icons/media-play.svg                      (../shared/zen-icons/lin/media-play.svg) 
+  skin/classic/browser/zen-icons/media-previous.svg                      (../shared/zen-icons/lin/media-previous.svg) 
   skin/classic/browser/zen-icons/media-speed.svg                      (../shared/zen-icons/lin/media-speed.svg) 
   skin/classic/browser/zen-icons/media-unmute.svg                      (../shared/zen-icons/lin/media-unmute.svg) 
   skin/classic/browser/zen-icons/menu-bar.svg                      (../shared/zen-icons/lin/menu-bar.svg) 
diff --git a/src/browser/themes/shared/zen-icons/lin/media-next.svg b/src/browser/themes/shared/zen-icons/lin/media-next.svg
new file mode 100644
index 000000000..0bf9db593
--- /dev/null
+++ b/src/browser/themes/shared/zen-icons/lin/media-next.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18"><path d="M4.05,3.677l8.254,4.57c.595,.33,.595,1.177,0,1.506L4.05,14.323c-.582,.322-1.3-.094-1.3-.753V4.43c0-.66,.718-1.075,1.3-.753Z" fill="none" stroke="context-fill" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><line x1="15.25" y1="15.25" x2="15.25" y2="2.75" fill="none" stroke="context-fill" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-color="color-2"></line></svg>
diff --git a/src/browser/themes/shared/zen-icons/lin/media-pause.svg b/src/browser/themes/shared/zen-icons/lin/media-pause.svg
index 298a939d0..75e535bf0 100644
--- a/src/browser/themes/shared/zen-icons/lin/media-pause.svg
+++ b/src/browser/themes/shared/zen-icons/lin/media-pause.svg
@@ -1 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="context-fill" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><rect x="2.75" y="2.75" width="3.5" height="12.5" rx="1" ry="1"></rect><rect x="11.75" y="2.75" width="3.5" height="12.5" rx="1" ry="1" data-color="color-2"></rect></g></svg>
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.33333 2.22217H4.66667C3.59278 2.22217 2.72222 3.09273 2.72222 4.16661V15.8333C2.72222 16.9072 3.59278 17.7777 4.66667 17.7777H6.33333C7.40722 17.7777 8.27778 16.9072 8.27778 15.8333V4.16661C8.27778 3.09273 7.40722 2.22217 6.33333 2.22217Z" fill="context-fill" fill-opacity="context-fill-opacity"/>
+<path d="M16.3333 2.22217H14.6667C13.5928 2.22217 12.7222 3.09273 12.7222 4.16661V15.8333C12.7222 16.9072 13.5928 17.7777 14.6667 17.7777H16.3333C17.4072 17.7777 18.2778 16.9072 18.2778 15.8333V4.16661C18.2778 3.09273 17.4072 2.22217 16.3333 2.22217Z" fill="context-fill" fill-opacity="context-fill-opacity"/>
+</svg>
diff --git a/src/browser/themes/shared/zen-icons/lin/media-play.svg b/src/browser/themes/shared/zen-icons/lin/media-play.svg
index eec6a8e93..4ebc76933 100644
--- a/src/browser/themes/shared/zen-icons/lin/media-play.svg
+++ b/src/browser/themes/shared/zen-icons/lin/media-play.svg
@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="context-fill" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M11.652,8.568l-3.651-2.129c-.333-.194-.752,.046-.752,.432v4.259c0,.386,.419,.626,.752,.432l3.651-2.129c.331-.193,.331-.671,0-.864Z" data-color="color-2"></path><path d="M4.987,2.961c.778-.518,1.662-.89,2.612-1.075"></path><path d="M1.879,7.631c.185-.968,.562-1.867,1.091-2.657"></path><path d="M4.987,15.039c.778,.518,1.662,.89,2.612,1.075"></path><path d="M1.879,10.369c.185,.968,.562,1.867,1.091,2.657"></path><path d="M10.435,1.892c3.317,.666,5.815,3.595,5.815,7.108s-2.499,6.443-5.817,7.108"></path></g></svg>
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.2778 8.30893L6.73111 2.46893C6.11667 2.12893 5.39111 2.13893 4.78778 2.49448C4.19 2.84671 3.83334 3.46893 3.83334 4.16004V15.84C3.83334 16.5312 4.19 17.1534 4.78778 17.5056C5.09778 17.6878 5.43889 17.78 5.78222 17.78C6.10778 17.78 6.43334 17.6967 6.73111 17.5323L17.2767 11.6923C17.8944 11.3512 18.2778 10.7023 18.2778 10.0012C18.2778 9.30004 17.8944 8.65004 17.2778 8.30893Z" fill="context-fill" fill-opacity="context-fill-opacity"/>
+</svg>
diff --git a/src/browser/themes/shared/zen-icons/lin/media-previous.svg b/src/browser/themes/shared/zen-icons/lin/media-previous.svg
new file mode 100644
index 000000000..1175b9c3f
--- /dev/null
+++ b/src/browser/themes/shared/zen-icons/lin/media-previous.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18"><path d="M13.95,14.323L5.697,9.753c-.595-.33-.595-1.177,0-1.506L13.95,3.677c.582-.322,1.3,.094,1.3,.753V13.57c0,.66-.718,1.075-1.3,.753Z" fill="none" stroke="context-fill" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><line x1="2.75" y1="2.75" x2="2.75" y2="15.25" fill="none" stroke="context-fill" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-color="color-2"></line></svg>
diff --git a/src/dom/chrome-webidl/MediaController-webidl.patch b/src/dom/chrome-webidl/MediaController-webidl.patch
new file mode 100644
index 000000000..73a252539
--- /dev/null
+++ b/src/dom/chrome-webidl/MediaController-webidl.patch
@@ -0,0 +1,27 @@
+diff --git a/dom/chrome-webidl/MediaController.webidl b/dom/chrome-webidl/MediaController.webidl
+index 20f416d1c3b41798e0f90bbac5db40ed2a4ab000..06cb4c847fcfba964eeb93089613e293dc10bd87 100644
+--- a/dom/chrome-webidl/MediaController.webidl
++++ b/dom/chrome-webidl/MediaController.webidl
+@@ -20,6 +20,12 @@ enum MediaControlKey {
+   "stop",
+ };
+ 
++dictionary MediaControllerPositionState {
++  required double duration;
++  required double playbackRate;
++  required double position;
++};
++
+ /**
+  * MediaController is used to control media playback for a tab, and each tab
+  * would only have one media controller, which can be accessed from the
+@@ -36,6 +42,9 @@ interface MediaController : EventTarget {
+   [Throws]
+   MediaMetadataInit getMetadata();
+ 
++  [Throws]
++  MediaControllerPositionState getPositionState();
++
+   [Frozen, Cached, Pure]
+   readonly attribute sequence<MediaControlKey> supportedKeys;
+ 
diff --git a/src/dom/html/HTMLMediaElement-cpp.patch b/src/dom/html/HTMLMediaElement-cpp.patch
new file mode 100644
index 000000000..412aab2ef
--- /dev/null
+++ b/src/dom/html/HTMLMediaElement-cpp.patch
@@ -0,0 +1,12 @@
+diff --git a/dom/html/HTMLMediaElement.cpp b/dom/html/HTMLMediaElement.cpp
+index 0b8dee1ca22b1f0ddcf7e6a976f606990104b56e..a3a5a7cfcaa8a4719e56988bc917183fa3cc9d10 100644
+--- a/dom/html/HTMLMediaElement.cpp
++++ b/dom/html/HTMLMediaElement.cpp
+@@ -455,6 +455,7 @@ class HTMLMediaElement::MediaControlKeyListener final
+     // audible state. Therefore, in that case we would noitfy the audible state
+     // when media starts playing.
+     if (mState == MediaPlaybackState::ePlayed) {
++      NotifyMediaPositionState();
+       NotifyAudibleStateChanged(mIsOwnerAudible
+                                     ? MediaAudibleState::eAudible
+                                     : MediaAudibleState::eInaudible);
diff --git a/src/dom/media/mediacontrol/MediaController-cpp.patch b/src/dom/media/mediacontrol/MediaController-cpp.patch
new file mode 100644
index 000000000..562756783
--- /dev/null
+++ b/src/dom/media/mediacontrol/MediaController-cpp.patch
@@ -0,0 +1,30 @@
+diff --git a/dom/media/mediacontrol/MediaController.cpp b/dom/media/mediacontrol/MediaController.cpp
+index 3f08d24d4ed56bb72ed513ed602b2c8fa48afe7b..690d9abdb0ab8efc019dd606743b82504834faa0 100644
+--- a/dom/media/mediacontrol/MediaController.cpp
++++ b/dom/media/mediacontrol/MediaController.cpp
+@@ -51,6 +51,25 @@ void MediaController::GetSupportedKeys(
+   }
+ }
+ 
++void MediaController::GetPositionState(MediaControllerPositionState& aPositionState, ErrorResult& aRv) {
++  if (!IsActive() || mShutdown) {
++    LOG("Cannot get position state: controller is inactive or shut down");
++    aRv.Throw(NS_ERROR_NOT_AVAILABLE);
++    return;
++  }
++
++  Maybe<PositionState> currentPositionState = GetCurrentPositionState();
++  if (!currentPositionState) {
++    LOG("No position state available for controller %" PRId64, Id());
++    aRv.Throw(NS_ERROR_NOT_AVAILABLE);
++    return;
++  }
++
++  aPositionState.mDuration = currentPositionState->mDuration;
++  aPositionState.mPosition = currentPositionState->mLastReportedPlaybackPosition;
++  aPositionState.mPlaybackRate = currentPositionState->mPlaybackRate;
++}
++
+ void MediaController::GetMetadata(MediaMetadataInit& aMetadata,
+                                   ErrorResult& aRv) {
+   if (!IsActive() || mShutdown) {
diff --git a/src/dom/media/mediacontrol/MediaController-h.patch b/src/dom/media/mediacontrol/MediaController-h.patch
new file mode 100644
index 000000000..f2fec73c4
--- /dev/null
+++ b/src/dom/media/mediacontrol/MediaController-h.patch
@@ -0,0 +1,12 @@
+diff --git a/dom/media/mediacontrol/MediaController.h b/dom/media/mediacontrol/MediaController.h
+index 8fec9c59e38bc24b9ff6d30ddbaebff67107bc76..5e7f3634f9edef48d6f96b4900f82a7ebbd730be 100644
+--- a/dom/media/mediacontrol/MediaController.h
++++ b/dom/media/mediacontrol/MediaController.h
+@@ -90,6 +90,7 @@ class MediaController final : public DOMEventTargetHelper,
+                        JS::Handle<JSObject*> aGivenProto) override;
+   void GetSupportedKeys(nsTArray<MediaControlKey>& aRetVal) const;
+   void GetMetadata(MediaMetadataInit& aMetadata, ErrorResult& aRv);
++  void GetPositionState(MediaControllerPositionState& aPositionState, ErrorResult& aRv);
+   IMPL_EVENT_HANDLER(activated);
+   IMPL_EVENT_HANDLER(deactivated);
+   IMPL_EVENT_HANDLER(metadatachange);
diff --git a/src/toolkit/actors/AudioPlaybackParent-sys-mjs.patch b/src/toolkit/actors/AudioPlaybackParent-sys-mjs.patch
new file mode 100644
index 000000000..1c84761b7
--- /dev/null
+++ b/src/toolkit/actors/AudioPlaybackParent-sys-mjs.patch
@@ -0,0 +1,17 @@
+diff --git a/toolkit/actors/AudioPlaybackParent.sys.mjs b/toolkit/actors/AudioPlaybackParent.sys.mjs
+index db682fd90b2bb5330497d2cf2158ff4cac6bbc47..4e6f891275d489418b8ea58a10345a1baa3a554c 100644
+--- a/toolkit/actors/AudioPlaybackParent.sys.mjs
++++ b/toolkit/actors/AudioPlaybackParent.sys.mjs
+@@ -14,10 +14,12 @@ export class AudioPlaybackParent extends JSWindowActorParent {
+     switch (aMessage.name) {
+       case "AudioPlayback:Start":
+         this._hasAudioPlayback = true;
++        browser.ownerGlobal.gZenMediaController.activateMediaControls(this.browsingContext.mediaController, browser);
+         browser.audioPlaybackStarted();
+         break;
+       case "AudioPlayback:Stop":
+         this._hasAudioPlayback = false;
++        browser.ownerGlobal.gZenMediaController.updateMuteState();
+         browser.audioPlaybackStopped();
+         break;
+       case "AudioPlayback:ActiveMediaBlockStart":