diff --git a/src/constants.js b/src/constants.js
index f45e30fb8211..6a40a323ab56 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -5,6 +5,10 @@ const IpcChannels = {
   OPEN_EXTERNAL_LINK: 'open-external-link',
   GET_SYSTEM_LOCALE: 'get-system-locale',
   GET_PICTURES_PATH: 'get-pictures-path',
+  GET_NAV_HISTORY_ENTRY_TITLE_AT_INDEX: 'get-navigation-history-entry-at-index',
+  GET_NAV_HISTORY_ACTIVE_INDEX: 'get-navigation-history-active-index',
+  GET_NAV_HISTORY_LENGTH: 'get-navigation-history-length',
+  GO_TO_NAV_HISTORY_OFFSET: 'go-to-navigation-history-index',
   SHOW_OPEN_DIALOG: 'show-open-dialog',
   SHOW_SAVE_DIALOG: 'show-save-dialog',
   STOP_POWER_SAVE_BLOCKER: 'stop-power-save-blocker',
diff --git a/src/main/index.js b/src/main/index.js
index 3e671abccaf5..9cccd635de59 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -888,6 +888,26 @@ function runApp() {
     session.defaultSession.closeAllConnections()
   })
 
+  // #region navigation history
+
+  ipcMain.on(IpcChannels.GO_TO_NAV_HISTORY_OFFSET, ({ sender }, offset) => {
+    sender.navigationHistory.goToOffset(offset)
+  })
+
+  ipcMain.handle(IpcChannels.GET_NAV_HISTORY_ENTRY_TITLE_AT_INDEX, async ({ sender }, index) => {
+    return sender.navigationHistory.getEntryAtIndex(index)?.title
+  })
+
+  ipcMain.handle(IpcChannels.GET_NAV_HISTORY_ACTIVE_INDEX, async ({ sender }) => {
+    return sender.navigationHistory.getActiveIndex()
+  })
+
+  ipcMain.handle(IpcChannels.GET_NAV_HISTORY_LENGTH, async ({ sender }) => {
+    return sender.navigationHistory.length()
+  })
+
+  // #endregion navigation history
+
   ipcMain.handle(IpcChannels.OPEN_EXTERNAL_LINK, (_, url) => {
     if (typeof url === 'string') {
       let parsedURL
diff --git a/src/renderer/App.js b/src/renderer/App.js
index 6f29f4e2a7c4..71fa8411fc43 100644
--- a/src/renderer/App.js
+++ b/src/renderer/App.js
@@ -97,6 +97,7 @@ export default defineComponent({
     externalPlayer: function () {
       return this.$store.getters.getExternalPlayer
     },
+
     defaultInvidiousInstance: function () {
       return this.$store.getters.getDefaultInvidiousInstance
     },
@@ -142,7 +143,11 @@ export default defineComponent({
 
     externalLinkHandling: function () {
       return this.$store.getters.getExternalLinkHandling
-    }
+    },
+
+    appTitle: function () {
+      return this.$store.getters.getAppTitle
+    },
   },
   watch: {
     windowTitle: 'setWindowTitle',
@@ -154,10 +159,11 @@ export default defineComponent({
     secColor: 'checkThemeSettings',
 
     locale: 'setLocale',
+
+    appTitle: 'setDocumentTitle'
   },
   created () {
     this.checkThemeSettings()
-    this.setWindowTitle()
     this.setLocale()
   },
   mounted: function () {
@@ -203,10 +209,16 @@ export default defineComponent({
         if (this.$router.currentRoute.path === '/') {
           this.$router.replace({ path: this.landingPage })
         }
+
+        this.setWindowTitle()
       })
     })
   },
   methods: {
+    setDocumentTitle: function(value) {
+      document.title = value
+      this.$nextTick(() => this.$refs.topNav?.setActiveNavigationHistoryEntryTitle(value))
+    },
     checkThemeSettings: function () {
       const theme = {
         baseTheme: this.baseTheme || 'dark',
@@ -535,7 +547,7 @@ export default defineComponent({
 
     setWindowTitle: function() {
       if (this.windowTitle !== null) {
-        document.title = this.windowTitle
+        this.setAppTitle(this.windowTitle)
       }
     },
 
@@ -558,6 +570,7 @@ export default defineComponent({
       'getExternalPlayerCmdArgumentsData',
       'fetchInvidiousInstances',
       'fetchInvidiousInstancesFromFile',
+      'setAppTitle',
       'setRandomCurrentInvidiousInstance',
       'setupListenersToSyncWindows',
       'updateBaseTheme',
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.js b/src/renderer/components/ft-icon-button/ft-icon-button.js
index 6c1209287442..89defc78efe9 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.js
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.js
@@ -2,6 +2,8 @@ import { defineComponent, nextTick } from 'vue'
 import FtPrompt from '../ft-prompt/ft-prompt.vue'
 import { sanitizeForHtmlId } from '../../helpers/accessibility'
 
+const LONG_CLICK_BOUNDARY_MS = 500
+
 export default defineComponent({
   name: 'FtIconButton',
   components: {
@@ -55,21 +57,27 @@ export default defineComponent({
     dropdownOptions: {
       // Array of objects with these properties
       // - type: ('labelValue'|'divider', default to 'labelValue' for less typing)
-      // - label: String (if type == 'labelValue')
-      // - value: String (if type == 'labelValue')
+      // - label: String (if type === 'labelValue')
+      // - value: String (if type === 'labelValue')
+      // - (OPTIONAL) active: Number (if type === 'labelValue')
       type: Array,
       default: () => { return [] }
     },
     dropdownModalOnMobile: {
       type: Boolean,
       default: false
+    },
+    openOnRightOrLongClick: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['click', 'disabled-click'],
   data: function () {
     return {
       dropdownShown: false,
-      mouseDownOnIcon: false,
+      blockLeftClick: false,
+      longPressTimer: null,
       useModal: false
     }
   },
@@ -91,14 +99,24 @@ export default defineComponent({
       this.dropdownShown = false
     },
 
-    handleIconClick: function () {
+    handleIconClick: function (e, isRightOrLongClick = false) {
       if (this.disabled) {
         this.$emit('disabled-click')
         return
       }
-      if (this.forceDropdown || (this.dropdownOptions.length > 0)) {
-        this.dropdownShown = !this.dropdownShown
 
+      if (this.blockLeftClick) {
+        return
+      }
+
+      if (this.longPressTimer != null) {
+        clearTimeout(this.longPressTimer)
+        this.longPressTimer = null
+      }
+
+      if ((!this.openOnRightOrLongClick || (this.openOnRightOrLongClick && isRightOrLongClick)) &&
+       (this.forceDropdown || this.dropdownOptions.length > 0)) {
+        this.dropdownShown = !this.dropdownShown
         if (this.dropdownShown && !this.useModal) {
           // wait until the dropdown is visible
           // then focus it so we can hide it automatically when it loses focus
@@ -111,24 +129,38 @@ export default defineComponent({
       }
     },
 
-    handleIconMouseDown: function () {
-      if (this.disabled) { return }
-      if (this.dropdownShown) {
-        this.mouseDownOnIcon = true
+    handleIconPointerDown: function (event) {
+      if (!this.openOnRightOrLongClick) { return }
+      if (event.button === 2) { // right button click
+        this.handleIconClick(null, true)
+      } else if (event.button === 0) { // left button click
+        this.longPressTimer = setTimeout(() => {
+          this.handleIconClick(null, true)
+
+          // prevent a long press that ends on the icon button from firing the handleIconClick handler
+          window.addEventListener('pointerup', this.preventButtonClickAfterLongPress, { once: true })
+          window.addEventListener('pointercancel', () => {
+            window.removeEventListener('pointerup', this.preventButtonClickAfterLongPress)
+          }, { once: true })
+        }, LONG_CLICK_BOUNDARY_MS)
       }
     },
 
+    // prevent the handleIconClick handler from firing for an instant
+    preventButtonClickAfterLongPress: function () {
+      this.blockLeftClick = true
+      setTimeout(() => { this.blockLeftClick = false }, 0)
+    },
+
     handleDropdownFocusOut: function () {
-      if (this.mouseDownOnIcon) {
-        this.mouseDownOnIcon = false
-      } else if (!this.$refs.dropdown.matches(':focus-within')) {
+      if (this.dropdownShown && !this.$refs.ftIconButton.matches(':focus-within')) {
         this.dropdownShown = false
       }
     },
 
     handleDropdownEscape: function () {
-      this.$refs.iconButton.focus()
-      // handleDropdownFocusOut will hide the dropdown for us
+      this.dropdownShown = false
+      this.$refs.ftIconButton.firstElementChild.focus()
     },
 
     handleDropdownClick: function ({ url, index }) {
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.scss b/src/renderer/components/ft-icon-button/ft-icon-button.scss
index c01f70573b49..e1fc416dfbb2 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.scss
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.scss
@@ -4,6 +4,7 @@
   flex-flow: row wrap;
   justify-content: space-evenly;
   position: relative;
+  line-height: normal;
   user-select: none;
 }
 
@@ -24,12 +25,13 @@
 
     &:not(.disabled) {
       &:hover,
-      &:focus-visible {
+      &:focus-visible,
+      &.pressed {
         background-color: var(--side-nav-hover-color);
         color: var(--side-nav-hover-text-color);
       }
 
-      &:active {
+      &.active {
         background-color: var(--side-nav-active-color);
         color: var(--side-nav-active-text-color);
       }
@@ -38,12 +40,13 @@
 
   &.base-no-default:not(.disabled) {
     &:hover,
-    &:focus-visible {
+    &:focus-visible,
+    &.pressed {
       background-color: var(--side-nav-hover-color);
       color: var(--side-nav-hover-text-color);
     }
 
-    &:active {
+    &.active {
       background-color: var(--side-nav-active-color);
       color: var(--side-nav-active-text-color);
     }
@@ -55,11 +58,12 @@
 
     &:not(.disabled) {
       &:hover,
-      &:focus-visible {
+      &:focus-visible,
+      &.pressed {
         background-color: var(--primary-color-hover);
       }
 
-      &:active {
+      &.active {
         background-color: var(--primary-color-active);
       }
     }
@@ -72,11 +76,12 @@
 
     &:not(.disabled) {
       &:hover,
-      &:focus-visible {
+      &:focus-visible,
+      &.pressed {
         background-color: var(--accent-color-hover);
       }
 
-      &:active {
+      &.active {
         background-color: var(--accent-color-active);
       }
     }
@@ -88,11 +93,12 @@
 
     &:not(.disabled) {
       &:hover,
-      &:focus-visible {
+      &:focus-visible,
+      &.pressed {
         background-color: var(--destructive-hover-color);
       }
 
-      &:active {
+      &.active {
         background-color: var(--destructive-active-color);
       }
     }
@@ -150,6 +156,17 @@
     padding: 0;
   }
 
+  :has(.active) {
+    .checkmarkColumn {
+      min-inline-size: 12px;
+    }
+
+    .listItem {
+      display: flex;
+      gap: 6px;
+    }
+  }
+
   .listItem {
     cursor: pointer;
     margin: 0;
@@ -159,12 +176,20 @@
     white-space: nowrap;
 
     &:hover,
-    &:focus-visible {
+    &:focus-visible,
+    &.pressed,
+    &.active {
       background-color: var(--side-nav-hover-color);
       color: var(--side-nav-hover-text-color);
       transition: background 0.2s ease-in;
     }
 
+    &.active {
+      font-weight: 600;
+      display: flex;
+      gap: 6px;
+    }
+
     &:active {
       background-color: var(--side-nav-active-color);
       color: var(--side-nav-active-text-color);
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.vue b/src/renderer/components/ft-icon-button/ft-icon-button.vue
index 4c6af4f0e3d4..f31aa5afdd09 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.vue
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.vue
@@ -1,13 +1,17 @@
 <template>
-  <div class="ftIconButton">
+  <div
+    ref="ftIconButton"
+    class="ftIconButton"
+    @focusout="handleDropdownFocusOut"
+  >
     <font-awesome-icon
-      ref="iconButton"
       class="iconButton"
       :title="title"
       :icon="icon"
       :class="{
         [theme]: true,
         shadow: useShadow,
+        pressed: openOnRightOrLongClick && dropdownShown,
         disabled
       }"
       :style="{
@@ -18,8 +22,9 @@
       role="button"
       :aria-disabled="disabled"
       :aria-expanded="dropdownShown"
+      @pointerdown="handleIconPointerDown"
+      @contextmenu.prevent=""
       @click="handleIconClick"
-      @mousedown="handleIconMouseDown"
       @keydown.enter.prevent="handleIconClick"
       @keydown.space.prevent="handleIconClick"
     />
@@ -43,9 +48,13 @@
               :id="sanitizeForHtmlId(title + '-' + index)"
               :key="index"
               role="option"
-              aria-selected="false"
+              :aria-selected="option.active"
               tabindex="-1"
-              :class="option.type === 'divider' ? 'listItemDivider' : 'listItem'"
+              :class="{
+                listItemDivider: option.type === 'divider',
+                listItem: option.type !== 'divider',
+                active: option.active
+              }"
               @click="handleDropdownClick({url: option.value, index: index})"
               @keydown.enter="handleDropdownClick({url: option.value, index: index})"
               @keydown.space="handleDropdownClick({url: option.value, index: index})"
@@ -67,7 +76,6 @@
           bottom: dropdownPositionY === 'bottom',
           top: dropdownPositionY === 'top'
         }"
-        @focusout="handleDropdownFocusOut"
         @keydown.esc.stop="handleDropdownEscape"
       >
         <slot>
@@ -81,13 +89,23 @@
               :id="sanitizeForHtmlId(title + '-' + index)"
               :key="index"
               :role="option.type === 'divider' ? 'separator' : 'option'"
-              aria-selected="false"
+              :aria-selected="option.active"
               :tabindex="option.type === 'divider' ? '-1' : '0'"
-              :class="option.type === 'divider' ? 'listItemDivider' : 'listItem'"
+              :class="{
+                listItemDivider: option.type === 'divider',
+                listItem: option.type !== 'divider',
+                active: option.active
+              }"
               @click="handleDropdownClick({url: option.value, index: index}, $event)"
               @keydown.enter="handleDropdownClick({url: option.value, index: index}, $event)"
               @keydown.space="handleDropdownClick({url: option.value, index: index}, $event)"
             >
+              <div class="checkmarkColumn">
+                <font-awesome-icon
+                  v-if="option.active"
+                  :icon="['fas', 'check']"
+                />
+              </div>
               {{ option.type === 'divider' ? '' : option.label }}
             </li>
           </ul>
diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
index f5aef0c0b669..8dfdeabc42de 100644
--- a/src/renderer/components/top-nav/top-nav.js
+++ b/src/renderer/components/top-nav/top-nav.js
@@ -2,6 +2,7 @@ import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
 import FtInput from '../ft-input/ft-input.vue'
 import FtProfileSelector from '../ft-profile-selector/ft-profile-selector.vue'
+import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
 import debounce from 'lodash.debounce'
 
 import { IpcChannels, MOBILE_WIDTH_THRESHOLD } from '../../../constants'
@@ -10,9 +11,13 @@ import { translateWindowTitle } from '../../helpers/strings'
 import { clearLocalSearchSuggestionsSession, getLocalSearchSuggestions } from '../../helpers/api/local'
 import { invidiousAPICall } from '../../helpers/api/invidious'
 
+const NAV_HISTORY_DISPLAY_LIMIT = 15
+const HALF_OF_NAV_HISTORY_DISPLAY_LIMIT = Math.floor(NAV_HISTORY_DISPLAY_LIMIT / 2)
+
 export default defineComponent({
   name: 'TopNav',
   components: {
+    FtIconButton,
     FtInput,
     FtProfileSelector
   },
@@ -31,6 +36,8 @@ export default defineComponent({
       showSearchContainer: true,
       isArrowBackwardDisabled,
       isArrowForwardDisabled,
+      navigationHistoryDropdownActiveEntry: null,
+      navigationHistoryDropdownOptions: [],
       searchSuggestionsDataList: [],
       lastSuggestionQuery: ''
     }
@@ -86,25 +93,34 @@ export default defineComponent({
       return this.$store.getters.getSearchFilterValueChanged
     },
 
+    navigationHistoryAddendum: function () {
+      if (this.navigationHistoryDropdownOptions.length === 0) {
+        return ''
+      }
+
+      return '\n' + this.$t('Right-click or hold to see history')
+    },
+
     forwardText: function () {
-      return this.$t('Forward')
+      return this.$t('Forward') + this.navigationHistoryAddendum
     },
 
     backwardText: function () {
-      return this.$t('Back')
+      return this.$t('Back') + this.navigationHistoryAddendum
     },
 
     newWindowText: function () {
       return this.$t('Open New Window')
-    }
+    },
   },
   watch: {
     $route: function () {
+      this.setNavigationHistoryDropdownOptions()
       if ('navigation' in window) {
         this.isArrowForwardDisabled = !window.navigation.canGoForward
         this.isArrowBackwardDisabled = !window.navigation.canGoBack
       }
-    }
+    },
   },
   mounted: function () {
     let previousWidth = window.innerWidth
@@ -326,12 +342,69 @@ export default defineComponent({
       this.showSearchContainer = !this.showSearchContainer
     },
 
-    historyBack: function () {
-      this.$router.back()
+    getNavigationHistoryResultEndIndex: function (navigationHistoryActiveIndex, navigationHistoryLength) {
+      if (navigationHistoryActiveIndex < HALF_OF_NAV_HISTORY_DISPLAY_LIMIT) {
+        return Math.min(navigationHistoryLength - 1, NAV_HISTORY_DISPLAY_LIMIT - 1)
+      } else if (navigationHistoryLength - navigationHistoryActiveIndex < HALF_OF_NAV_HISTORY_DISPLAY_LIMIT + 1) {
+        return navigationHistoryLength - 1
+      } else {
+        return navigationHistoryActiveIndex + HALF_OF_NAV_HISTORY_DISPLAY_LIMIT
+      }
     },
 
-    historyForward: function () {
-      this.$router.forward()
+    getNavigationHistoryDropdownOptions: async function (ipcRenderer, navigationHistoryActiveIndex, navigationHistoryLength) {
+      const dropdownOptions = []
+      const end = this.getNavigationHistoryResultEndIndex(navigationHistoryActiveIndex, navigationHistoryLength)
+
+      for (let index = end; index >= Math.max(0, end + 1 - NAV_HISTORY_DISPLAY_LIMIT); --index) {
+        const routeLabel = await ipcRenderer.invoke(IpcChannels.GET_NAV_HISTORY_ENTRY_TITLE_AT_INDEX, index)
+        const isActiveIndex = index === navigationHistoryActiveIndex
+        const dropdownOption = {
+          label: routeLabel,
+          value: index - navigationHistoryActiveIndex,
+          active: isActiveIndex
+        }
+
+        dropdownOptions.push(dropdownOption)
+
+        if (isActiveIndex) {
+          this.navigationHistoryDropdownActiveEntry = dropdownOption
+        }
+      }
+      return dropdownOptions
+    },
+
+    setNavigationHistoryDropdownOptions: async function() {
+      if (process.env.IS_ELECTRON) {
+        const { ipcRenderer } = require('electron')
+        const navigationHistoryLength = await ipcRenderer.invoke(IpcChannels.GET_NAV_HISTORY_LENGTH)
+        const navigationHistoryActiveIndex = await ipcRenderer.invoke(IpcChannels.GET_NAV_HISTORY_ACTIVE_INDEX)
+
+        this.navigationHistoryDropdownOptions = await this.getNavigationHistoryDropdownOptions(ipcRenderer, navigationHistoryActiveIndex, navigationHistoryLength)
+      }
+    },
+
+    goToOffset: function (offset) {
+      if (process.env.IS_ELECTRON) {
+        const { ipcRenderer } = require('electron')
+        ipcRenderer.send(IpcChannels.GO_TO_NAV_HISTORY_OFFSET, offset)
+      }
+    },
+
+    historyBack: function (offset) {
+      if (offset != null) {
+        this.goToOffset(offset)
+      } else {
+        this.$router.back()
+      }
+    },
+
+    historyForward: function (offset) {
+      if (offset != null) {
+        this.goToOffset(offset)
+      } else {
+        this.$router.forward()
+      }
     },
 
     toggleSideNav: function () {
@@ -352,6 +425,14 @@ export default defineComponent({
     updateSearchInputText: function (text) {
       this.$refs.searchInput.updateInputData(text)
     },
+    setActiveNavigationHistoryEntryTitle(value) {
+      this.$nextTick(() => {
+        if (this.navigationHistoryDropdownActiveEntry?.label) {
+          this.navigationHistoryDropdownActiveEntry.label = value
+        }
+      })
+    },
+
     ...mapActions([
       'getYoutubeUrlInfo',
       'showSearchFilters'
diff --git a/src/renderer/components/top-nav/top-nav.scss b/src/renderer/components/top-nav/top-nav.scss
index c5917b0a7070..62ab62f52ddd 100644
--- a/src/renderer/components/top-nav/top-nav.scss
+++ b/src/renderer/components/top-nav/top-nav.scss
@@ -45,7 +45,17 @@
   }
 }
 
-.navIcon {
+.arrowDisabled :deep(.iconButton) {
+  color: #808080;
+  background-color: inherit;
+  opacity: 0.5;
+  pointer-events: auto;
+  cursor: default;
+  user-select: none;
+}
+
+.navIcon,
+:deep(.ftIconButton:not(.arrowDisabled) .iconButton) {
   border-radius: 50%;
   color: var(--primary-text-color);
   cursor: pointer;
@@ -55,39 +65,34 @@
   transition: background 0.2s ease-out;
   inline-size: 1em;
 
-  @include top-nav-is-colored {
-    color: var(--text-with-main-color);
-  }
-
-  &.arrowBackwardDisabled,
-  &.arrowForwardDisabled {
-    color: #808080;
-    opacity: 0.5;
-    pointer-events: none;
-    user-select: none;
-  }
-
   &:hover {
     background-color: var(--side-nav-hover-color);
     color: var(--side-nav-hover-text-color);
     transition: background 0.2s ease-in;
 
-    @include top-nav-is-colored {
-      background-color: var(--primary-color-hover);
-    }
   }
 
   &:active {
     background-color: var(--tertiary-text-color);
     color: var(--side-nav-active-text-color);
     transition: background 0.2s ease-in;
+  }
+}
 
-    @include top-nav-is-colored {
-      background-color: var(--primary-color-active);
-    }
+.topNavBarColor .navIcon,
+.topNavBarColor :deep(.ftIconButton:not(.arrowDisabled) .iconButton) {
+  color: var(--text-with-main-color);
+
+  &:hover {
+    background-color: var(--primary-color-hover);
+  }
+
+  &:active {
+    background-color: var(--primary-color-active);
   }
 }
 
+
 .navFilterIcon {
   $effect-distance: 20px;
 
diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue
index ca023d47795b..d156e0296854 100644
--- a/src/renderer/components/top-nav/top-nav.vue
+++ b/src/renderer/components/top-nav/top-nav.vue
@@ -13,24 +13,32 @@
         @click="toggleSideNav"
         @keydown.enter.prevent="toggleSideNav"
       />
-      <font-awesome-icon
-        :aria-disabled="isArrowBackwardDisabled"
-        class="navIcon"
-        :class="{ arrowBackwardDisabled: isArrowBackwardDisabled}"
+      <ft-icon-button
+        class="navIconButton"
+        :disabled="isArrowBackwardDisabled"
+        :class="{ arrowDisabled: isArrowBackwardDisabled }"
         :icon="['fas', 'arrow-left']"
-        role="button"
-        tabindex="0"
+        :theme="null"
+        :size="20"
+        :use-shadow="false"
+        dropdown-position-x="right"
+        :dropdown-options="navigationHistoryDropdownOptions"
+        :open-on-right-or-long-click="true"
         :title="backwardText"
         @click="historyBack"
         @keydown.enter.prevent="historyBack"
       />
-      <font-awesome-icon
-        :aria-disabled="isArrowForwardDisabled"
-        class="navIcon"
-        :class="{ arrowForwardDisabled: isArrowForwardDisabled}"
+      <ft-icon-button
+        class="navIconButton"
+        :disabled="isArrowForwardDisabled"
+        :class="{ arrowDisabled: isArrowForwardDisabled }"
         :icon="['fas', 'arrow-right']"
-        role="button"
-        tabindex="0"
+        :theme="null"
+        :size="20"
+        :use-shadow="false"
+        dropdown-position-x="right"
+        :dropdown-options="navigationHistoryDropdownOptions"
+        :open-on-right-or-long-click="true"
         :title="forwardText"
         @click="historyForward"
         @keydown.enter.prevent="historyForward"
diff --git a/src/renderer/store/modules/utils.js b/src/renderer/store/modules/utils.js
index 53385c9c22a6..e3dad4adc0a6 100644
--- a/src/renderer/store/modules/utils.js
+++ b/src/renderer/store/modules/utils.js
@@ -60,6 +60,7 @@ const state = {
     shorts: false,
     communityPosts: false,
   },
+  appTitle: ''
 }
 
 const getters = {
@@ -175,6 +176,9 @@ const getters = {
   getSubscriptionForCommunityPostsFirstAutoFetchRun (state) {
     return state.subscriptionFirstAutoFetchRunData.communityPosts === true
   },
+  getAppTitle (state) {
+    return state.appTitle
+  }
 }
 
 const actions = {
@@ -793,6 +797,10 @@ const actions = {
       ipcRenderer.send(IpcChannels.OPEN_IN_EXTERNAL_PLAYER, { executable, args })
     }
   },
+
+  setAppTitle({ commit }, title) {
+    commit('setAppTitle', title)
+  }
 }
 
 const mutations = {
@@ -957,6 +965,10 @@ const mutations = {
     state.externalPlayerCmdArguments = value
   },
 
+  setAppTitle (state, value) {
+    state.appTitle = value
+  },
+
   setSubscriptionForVideosFirstAutoFetchRun (state) {
     state.subscriptionFirstAutoFetchRunData.videos = true
   },
@@ -968,7 +980,7 @@ const mutations = {
   },
   setSubscriptionForCommunityPostsFirstAutoFetchRun (state) {
     state.subscriptionFirstAutoFetchRunData.communityPosts = true
-  },
+  }
 }
 
 export default {
diff --git a/src/renderer/views/Channel/Channel.js b/src/renderer/views/Channel/Channel.js
index 2230ce23bda4..ce0063b3f2b5 100644
--- a/src/renderer/views/Channel/Channel.js
+++ b/src/renderer/views/Channel/Channel.js
@@ -522,7 +522,7 @@ export default defineComponent({
           this.channelName = channelName
           this.thumbnailUrl = channelThumbnailUrl
 
-          document.title = `${channelName} - ${packageDetails.productName}`
+          this.setAppTitle(`${channelName} - ${packageDetails.productName}`)
 
           this.updateSubscriptionDetails({ channelThumbnailUrl, channelName, channelId: this.id })
 
@@ -566,7 +566,7 @@ export default defineComponent({
         }
         this.tags = tags
 
-        document.title = `${channelName} - ${packageDetails.productName}`
+        this.setAppTitle(`${channelName} - ${packageDetails.productName}`)
 
         if (subscriberText) {
           const subCount = parseLocalSubscriberCount(subscriberText)
@@ -1018,7 +1018,7 @@ export default defineComponent({
         const channelName = response.author
         const channelId = response.authorId
         this.channelName = channelName
-        document.title = `${this.channelName} - ${packageDetails.productName}`
+        this.setAppTitle(`${this.channelName} - ${packageDetails.productName}`)
         this.id = channelId
         this.isFamilyFriendly = response.isFamilyFriendly
         this.subCount = response.subCount
@@ -2012,6 +2012,7 @@ export default defineComponent({
     getIconForSortPreference: (s) => getIconForSortPreference(s),
 
     ...mapActions([
+      'setAppTitle',
       'showOutlines',
       'updateSubscriptionDetails',
       'updateSubscriptionVideosCacheByChannel',
diff --git a/src/renderer/views/Hashtag/Hashtag.js b/src/renderer/views/Hashtag/Hashtag.js
index 3bc62f9b5dc1..33fa12b354b0 100644
--- a/src/renderer/views/Hashtag/Hashtag.js
+++ b/src/renderer/views/Hashtag/Hashtag.js
@@ -1,4 +1,5 @@
 import { defineComponent } from 'vue'
+import { mapActions } from 'vuex'
 import FtCard from '../../components/ft-card/ft-card.vue'
 import FtElementList from '../../components/FtElementList/FtElementList.vue'
 import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
@@ -68,7 +69,7 @@ export default defineComponent({
       } else {
         await this.getInvidiousHashtag(hashtag)
       }
-      document.title = `${this.hashtag} - ${packageDetails.productName}`
+      this.setAppTitle(`${this.hashtag} - ${packageDetails.productName}`)
     },
 
     getInvidiousHashtag: async function(hashtag, page) {
@@ -167,6 +168,10 @@ export default defineComponent({
       } else if (this.apiUsed === 'invidious') {
         this.getInvidiousHashtag(this.hashtag.substring(1), this.pageNumber)
       }
-    }
+    },
+
+    ...mapActions([
+      'setAppTitle'
+    ])
   }
 })
diff --git a/src/renderer/views/Playlist/Playlist.js b/src/renderer/views/Playlist/Playlist.js
index 82faccfb8f91..44281b557856 100644
--- a/src/renderer/views/Playlist/Playlist.js
+++ b/src/renderer/views/Playlist/Playlist.js
@@ -602,7 +602,7 @@ export default defineComponent({
         playlistTitle,
         channelName,
       ].filter(v => v).join(' | ')
-      document.title = `${titleText} - ${packageDetails.productName}`
+      this.setAppTitle(`${titleText} - ${packageDetails.productName}`)
     },
 
     handleResize: function () {
@@ -616,6 +616,7 @@ export default defineComponent({
       'updatePlaylist',
       'updateUserPlaylistSortOrder',
       'removeVideo',
+      'setAppTitle'
     ]),
 
     ...mapMutations([
diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js
index a1ca5e06edd8..b7831d9400b6 100644
--- a/src/renderer/views/Watch/Watch.js
+++ b/src/renderer/views/Watch/Watch.js
@@ -1582,7 +1582,7 @@ export default defineComponent({
     },
 
     updateTitle: function () {
-      document.title = `${this.videoTitle} - ${packageDetails.productName}`
+      this.setAppTitle(`${this.videoTitle} - ${packageDetails.productName}`)
     },
 
     isHiddenVideo: function (forbiddenTitles, channelsHidden, video) {
@@ -1599,6 +1599,7 @@ export default defineComponent({
     },
 
     ...mapActions([
+      'setAppTitle',
       'updateHistory',
       'updateWatchProgress',
       'updateLastViewedPlaylist',
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index 20634be0c2f1..a20222095dcc 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -29,6 +29,7 @@ Minimize: Minimize
 Close: Close
 Back: Back
 Forward: Forward
+Right-click or hold to see history: Right-click or hold to see history
 Open New Window: Open New Window
 Go to page: Go to {page}
 Close Banner: Close Banner