diff --git a/src/components/TopBar/components/HistoryPop.vue b/src/components/TopBar/components/HistoryPop.vue
index 0e65149b..1cec7007 100644
--- a/src/components/TopBar/components/HistoryPop.vue
+++ b/src/components/TopBar/components/HistoryPop.vue
@@ -10,7 +10,7 @@ import type { HistoryResult, List as HistoryItem } from '~/models/history/histor
 import { Business } from '~/models/history/history'
 import api from '~/utils/api'
 import { calcCurrentTime } from '~/utils/dataFormatter'
-import { removeHttpFromUrl, scrollToTop } from '~/utils/main'
+import { getCSRF, removeHttpFromUrl, scrollToTop } from '~/utils/main'
 
 const { t } = useI18n()
 const historys = reactive<Array<HistoryItem>>([])
@@ -165,6 +165,17 @@ function getHistoryList(type: Business, view_at = 0 as number) {
       isLoading.value = false
     })
 }
+
+function deleteHistoryItem(index: number, historyItem: HistoryItem) {
+  api.history.deleteHistoryItem({
+    kid: `${historyItem.history.business}_${historyItem.history.oid}`,
+    csrf: getCSRF(),
+  })
+    .then((res) => {
+      if (res.code === 0)
+        historys.splice(index, 1)
+    })
+}
 </script>
 
 <template>
@@ -239,9 +250,10 @@ function getHistoryList(type: Business, view_at = 0 as number) {
       <!-- historys -->
       <TransitionGroup name="list">
         <ALink
-          v-for="historyItem in historys"
+          v-for="(historyItem, index) in historys"
           :key="historyItem.kid"
           :href="getHistoryUrl(historyItem)"
+          class="group"
           type="topBar"
           m="last:b-4" p="2"
           rounded="$bew-radius"
@@ -252,11 +264,27 @@ function getHistoryList(type: Business, view_at = 0 as number) {
             <!-- Video cover, live cover, ariticle cover -->
             <div
               bg="$bew-skeleton"
+              pos="relative"
               w="150px"
               flex="shrink-0"
               border="rounded-$bew-radius-half"
               overflow="hidden"
             >
+              <!-- Delete button -->
+              <div
+                class="group-hover:opacity-100 opacity-0"
+                pos="absolute top-0 right-0" z-1 w-24px h-24px
+                bg="black opacity-60 hover:$bew-error-color"
+                grid="~ place-items-center"
+                m="1"
+                text="white xs"
+                duration-300
+                border="rounded-full"
+                @click.stop.prevent="deleteHistoryItem(index, historyItem)"
+              >
+                <i i-mingcute:close-line />
+              </div>
+
               <!-- Video -->
               <template v-if="activatedTab === 0">
                 <div pos="relative">
diff --git a/src/components/TopBar/components/WatchLaterPop.vue b/src/components/TopBar/components/WatchLaterPop.vue
index 2defe40b..951a36b3 100644
--- a/src/components/TopBar/components/WatchLaterPop.vue
+++ b/src/components/TopBar/components/WatchLaterPop.vue
@@ -7,7 +7,7 @@ import Progress from '~/components/Progress.vue'
 import type { List as VideoItem, WatchLaterResult } from '~/models/video/watchLater'
 import api from '~/utils/api'
 import { calcCurrentTime } from '~/utils/dataFormatter'
-import { removeHttpFromUrl } from '~/utils/main'
+import { getCSRF, removeHttpFromUrl } from '~/utils/main'
 
 const watchLaterList = reactive<VideoItem[]>([])
 const isLoading = ref<boolean>()
@@ -46,6 +46,18 @@ function getAllWatchLaterList() {
       isLoading.value = false
     })
 }
+
+function deleteWatchLaterItem(index: number, aid: number) {
+  api.watchlater.removeFromWatchLater({
+    aid,
+    csrf: getCSRF(),
+  })
+    .then((res) => {
+      if (res.code === 0) {
+        watchLaterList.splice(index, 1)
+      }
+    })
+}
 </script>
 
 <template>
@@ -121,9 +133,10 @@ function getAllWatchLaterList() {
       <!-- watchlater -->
       <TransitionGroup name="list">
         <ALink
-          v-for="item in watchLaterList"
+          v-for="(item, index) in watchLaterList"
           :key="item.aid"
           :href="getWatchLaterUrl(item.bvid)"
+          class="group"
           type="topBar"
           m="last:b-4" p="2"
           rounded="$bew-radius"
@@ -134,11 +147,27 @@ function getAllWatchLaterList() {
             <!-- Video cover, live cover, ariticle cover -->
             <div
               bg="$bew-skeleton"
+              pos="relative"
               w="150px"
               flex="shrink-0"
               border="rounded-$bew-radius-half"
               overflow="hidden"
             >
+              <!-- Delete button -->
+              <div
+                class="group-hover:opacity-100 opacity-0"
+                pos="absolute top-0 right-0" z-1 w-24px h-24px
+                bg="black opacity-60 hover:$bew-error-color"
+                grid="~ place-items-center"
+                m="1"
+                text="white xs"
+                duration-300
+                border="rounded-full"
+                @click.stop.prevent="deleteWatchLaterItem(index, item.aid)"
+              >
+                <i i-mingcute:close-line />
+              </div>
+
               <!-- Video -->
               <div pos="relative">
                 <img