diff --git a/src/contentScripts/views/History/History.vue b/src/contentScripts/views/History/History.vue
index 07fc71bc..0ff240ee 100644
--- a/src/contentScripts/views/History/History.vue
+++ b/src/contentScripts/views/History/History.vue
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n'
 
 import { useApiClient } from '~/composables/api'
 import { useBewlyApp } from '~/composables/useAppProvider'
+import { settings } from '~/logic'
 import type { HistoryResult, List as HistoryItem } from '~/models/history/history'
 import { Business } from '~/models/history/history'
 import type { HistorySearchResult, List as HistorySearchItem } from '~/models/video/historySearch'
@@ -12,6 +13,8 @@ import { getCSRF, removeHttpFromUrl } from '~/utils/main'
 
 const { t } = useI18n()
 const api = useApiClient()
+const { openIframeDrawer } = useBewlyApp()
+
 const isLoading = ref<boolean>()
 const noMoreContent = ref<boolean>(false)
 const historyList = reactive<Array<HistoryItem>>([])
@@ -235,12 +238,15 @@ function jumpToLoginPage() {
       <TransitionGroup name="list">
         <a
           v-for="(historyItem, index) in historyList"
-          :key="historyItem.kid" :href="getHistoryUrl(historyItem)"
+          :key="historyItem.kid"
+          :href="settings.videoCardLinkOpenMode === 'drawer' ? undefined : getHistoryUrl(historyItem)"
           target="_blank"
+          rel="noopener noreferrer"
           block
           class="group"
           flex
           cursor-pointer
+          @click="settings.videoCardLinkOpenMode === 'drawer' && openIframeDrawer(getHistoryUrl(historyItem))"
         >
           <!-- time slot -->
           <div
diff --git a/src/contentScripts/views/WatchLater/WatchLater.vue b/src/contentScripts/views/WatchLater/WatchLater.vue
index 6593751c..113ec5b7 100644
--- a/src/contentScripts/views/WatchLater/WatchLater.vue
+++ b/src/contentScripts/views/WatchLater/WatchLater.vue
@@ -4,12 +4,15 @@ import { useI18n } from 'vue-i18n'
 
 import { useApiClient } from '~/composables/api'
 import { useBewlyApp } from '~/composables/useAppProvider'
+import { settings } from '~/logic'
 import type { List as VideoItem, WatchLaterResult } from '~/models/video/watchLater'
 import { calcCurrentTime } from '~/utils/dataFormatter'
 import { getCSRF, openLinkToNewTab, removeHttpFromUrl } from '~/utils/main'
 
 const { t } = useI18n()
 const api = useApiClient()
+const { openIframeDrawer } = useBewlyApp()
+
 const isLoading = ref<boolean>()
 const noMoreContent = ref<boolean>()
 const allWatchLaterList = ref<VideoItem[]>([])
@@ -152,9 +155,12 @@ function jumpToLoginPage() {
           <a
             v-for="(item, index) in currentWatchLaterList"
             :key="item.aid"
-            :href="`https://www.bilibili.com/list/watchlater?bvid=${item.bvid}`" target="_blank" rel="noopener noreferrer"
+            :href="settings.videoCardLinkOpenMode === 'drawer' ? undefined : `https://www.bilibili.com/list/watchlater?bvid=${item.bvid}`"
+            target="_blank"
+            rel="noopener noreferrer"
             class="group"
             flex cursor-pointer
+            @click="settings.videoCardLinkOpenMode === 'drawer' && openIframeDrawer(`https://www.bilibili.com/list/watchlater?bvid=${item.bvid}`)"
           >
             <section
               rounded="$bew-radius"