diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index ad681335..6b255d6d 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -12,7 +12,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [20.x]
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
diff --git a/src/main/tipc/player.ts b/src/main/tipc/player.ts
index de6522e0..6d8ab117 100644
--- a/src/main/tipc/player.ts
+++ b/src/main/tipc/player.ts
@@ -7,7 +7,7 @@ import FFmpeg from '@main/lib/ffmpeg'
 import { getFilePathFromProtocolURL } from '@main/lib/protocols'
 import { coverSubtitleToAss } from '@main/lib/utils'
 import { showFileSelectionDialog } from '@main/modules/showDialog'
-import { calculateFileHashByBuffer } from '@renderer/lib/calc-file-hash'
+import { calculateFileHashByBuffer } from '@renderer/lib/file'
 import { dialog } from 'electron'
 import naturalCompare from 'string-natural-compare'
 
diff --git a/src/main/tipc/utils.ts b/src/main/tipc/utils.ts
index be429865..bc4b0949 100644
--- a/src/main/tipc/utils.ts
+++ b/src/main/tipc/utils.ts
@@ -1,13 +1,52 @@
+import path from 'node:path'
+
 import { getFilePathFromProtocolURL } from '@main/lib/protocols'
 import { coverSubtitleToAss } from '@main/lib/utils'
 
 import { t } from './_instance'
 
+type Actions =
+  | 'cover-path-from-protocol'
+  | 'get-file-name-from-path'
+  | 'url-to-base64'
+  | 'cover-subtitle-to-ass'
+
+// type FileAction<T extends Actions> = T extends 'cover-subtitle-to-ass'
+
 export const utilsRoute = {
-  getFilePathFromProtocolURL: t.procedure.input<{ path: string }>().action(async ({ input }) => {
-    return getFilePathFromProtocolURL(input.path)
-  }),
-  coverSubtitleToAss: t.procedure.input<{ path: string }>().action(async ({ input }) => {
+  fileAction: t.procedure
+    .input<{
+      action: Actions
+      url: string
+    }>()
+    .action(async ({ input }) => {
+      const { url, action } = input
+
+      switch (action) {
+        case 'cover-path-from-protocol': {
+          return getFilePathFromProtocolURL(url)
+        }
+        case 'get-file-name-from-path': {
+          return path.basename(url)
+        }
+        case 'url-to-base64': {
+          try {
+            const response = await fetch(url)
+            const arrayBuffer = await response.arrayBuffer()
+            const buffer = Buffer.from(arrayBuffer)
+            const base64 = buffer.toString('base64')
+            return `data:${response.headers.get('content-type')};base64,${base64}`
+          } catch (error) {
+            console.error('Error converting image to base64:', error)
+            return
+          }
+        }
+        default: {
+          throw new Error(`Unsupported action: ${action}`)
+        }
+      }
+    }),
+  coverSubtitleToAss: t.procedure.input<{ path: string }>().action(({ input }) => {
     return coverSubtitleToAss(input.path)
   }),
 }
diff --git a/src/renderer/src/atoms/settings/app.ts b/src/renderer/src/atoms/settings/app.ts
index 96b32218..6466dd09 100644
--- a/src/renderer/src/atoms/settings/app.ts
+++ b/src/renderer/src/atoms/settings/app.ts
@@ -14,4 +14,4 @@ const createAppDefaultSettings = () => {
 export const appSettingAtom = createSettingATom('app', createAppDefaultSettings)
 
 export const useAppSettings = () => useAtom(appSettingAtom)
-export const useAppSettingsValue = () => useAtomValue(appSettingAtom)
+export const useAppSettingsValue = () => useAtomValue(appSettingAtom)
\ No newline at end of file
diff --git a/src/renderer/src/components/common/ErrorView.tsx b/src/renderer/src/components/common/ErrorView.tsx
index 05ab3fa6..d80d933e 100644
--- a/src/renderer/src/components/common/ErrorView.tsx
+++ b/src/renderer/src/components/common/ErrorView.tsx
@@ -1,30 +1,48 @@
 import { tipcClient } from '@renderer/lib/client'
+import { RouteName } from '@renderer/router'
 import * as Sentry from '@sentry/react'
 import { useEffect } from 'react'
-import { useRouteError } from 'react-router'
+import { useLocation, useNavigate, useRouteError } from 'react-router'
 
 import { Button } from '../ui/button'
 
 export default function ErrorView() {
   const error = useRouteError() as { statusText: string; message: string }
+  const location = useLocation()
+  const navigate = useNavigate()
   console.error(error)
 
   useEffect(() => {
     Sentry.captureException(error)
   }, [error])
   return (
-    <div className="flex h-screen flex-col items-center justify-center gap-5">
+    <div className="flex h-screen flex-col items-center justify-center gap-6">
       <p className="text-xl">糟糕发生错误了😭</p>
-      <p className="text-lg">
-        错误信息: <i>{error?.statusText ?? error?.message}</i>
-      </p>
-      <Button
-        onClick={() => {
-          tipcClient?.windowAction({ action: 'restart' })
-        }}
-      >
-        重新加载页面
-      </Button>
+      <div className="space-y-4 text-lg">
+        <p>
+          错误信息: <i>{error?.statusText ?? error?.message}</i>
+        </p>
+        <p>
+          当前路由: <i>{location.pathname}</i>
+        </p>
+      </div>
+      <div className='space-x-4'>
+        <Button
+          onClick={() => {
+            navigate(RouteName.PLAYER)
+          }}
+        >
+          返回首页
+        </Button>
+
+        <Button
+          onClick={() => {
+            tipcClient?.windowAction({ action: 'restart' })
+          }}
+        >
+          重新加载页面
+        </Button>
+      </div>
     </div>
   )
 }
diff --git a/src/renderer/src/components/layout/root/RouterLayout.tsx b/src/renderer/src/components/layout/root/RouterLayout.tsx
deleted file mode 100644
index 46e8a09d..00000000
--- a/src/renderer/src/components/layout/root/RouterLayout.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { cn, isWeb } from '@renderer/lib/utils'
-import { RouteName, useCurrentRoute } from '@renderer/router'
-import type { FC, PropsWithChildren, ReactNode } from 'react'
-
-interface RouterLayoutProps extends PropsWithChildren {
-  FunctionArea?: ReactNode
-}
-
-export const RouterLayout: FC<RouterLayoutProps> = ({ children, FunctionArea }) => {
-  const currentRoute = useCurrentRoute()
-  if (currentRoute?.path === RouteName.PLAYER) {
-    return
-  }
-  return (
-    <div className={cn('relative flex h-full flex-col space-y-3 pt-7', isWeb && 'pt-4')}>
-      <section className="mx-8 flex h-12 items-center justify-between overflow-hidden border-b pb-2.5 dark:border-zinc-600">
-        <h3 className="select-none align-middle text-2xl font-medium">
-          {currentRoute?.meta.title}
-        </h3>
-        {FunctionArea}
-      </section>
-      {children}
-    </div>
-  )
-}
diff --git a/src/renderer/src/components/layout/root/TitleBarLayout.tsx b/src/renderer/src/components/layout/root/TitleBarLayout.tsx
new file mode 100644
index 00000000..64d64d41
--- /dev/null
+++ b/src/renderer/src/components/layout/root/TitleBarLayout.tsx
@@ -0,0 +1,28 @@
+import { cn } from '@renderer/lib/utils'
+import { useCurrentRoute } from '@renderer/router'
+import type { FC, PropsWithChildren, ReactNode } from 'react'
+
+interface TitleBarLayoutProps extends PropsWithChildren {
+  FunctionArea?: ReactNode
+  title?: ReactNode
+}
+
+export const TitleBarLayout: FC<TitleBarLayoutProps> = ({ children, FunctionArea, title }) => {
+  const currentRoute = useCurrentRoute()
+
+  return (
+    <div className={cn('relative flex h-full flex-col pt-1')}>
+      <section className="flex h-14 items-center justify-between overflow-hidden border-b px-4 dark:border-zinc-600">
+        <div>
+          {title ?? (
+            <h3 className="select-none align-middle text-lg font-medium">
+              {currentRoute?.meta?.title}
+            </h3>
+          )}
+        </div>
+        {FunctionArea}
+      </section>
+      {children}
+    </div>
+  )
+}
diff --git a/src/renderer/src/components/layout/sidebar/index.tsx b/src/renderer/src/components/layout/sidebar/index.tsx
index aa79db98..ea68c6e0 100644
--- a/src/renderer/src/components/layout/sidebar/index.tsx
+++ b/src/renderer/src/components/layout/sidebar/index.tsx
@@ -32,7 +32,7 @@ export const Sidebar = () => {
               </p>
             </Show>
           </Link>
-          <ButtonWithIcon icon="icon-[mingcute--settings-3-line]" onClick={() => showModal()} />
+          <ButtonWithIcon icon="icon-[mingcute--settings-3-line]" className='hover:bg-base-300' onClick={() => showModal()} />
         </div>
         <nav className="mt-5 flex select-none flex-col gap-2">
           {siderbarRoutes.map((route) => (
@@ -64,7 +64,7 @@ const NavLinkItem: FC<SidebarRouteObject> = ({ path, meta }) => {
     <NavLink
       draggable={false}
       to={path}
-      className={cn(pathname === path && 'rounded-md bg-base-300')}
+      className={cn(pathname.includes(path) && 'rounded-md bg-base-300')}
     >
       <p className="flex cursor-default items-center gap-1.5 p-2">
         <i className={cn(icon, 'text-xl')} />
diff --git a/src/renderer/src/components/modules/history/HistoryAnimeDataProvider.tsx b/src/renderer/src/components/modules/history/HistoryAnimeDataProvider.tsx
new file mode 100644
index 00000000..ab05b196
--- /dev/null
+++ b/src/renderer/src/components/modules/history/HistoryAnimeDataProvider.tsx
@@ -0,0 +1,59 @@
+import { useToast } from '@renderer/components/ui/toast'
+import { db } from '@renderer/database/db'
+import type { DB_Bangumi } from '@renderer/database/schemas/bangumi'
+import type { DB_History } from '@renderer/database/schemas/history'
+import { RouteName } from '@renderer/router'
+import { useQuery } from '@tanstack/react-query'
+import type { FC, PropsWithChildren } from 'react'
+import { createContext, use } from 'react'
+import { useNavigate, useParams } from 'react-router'
+
+interface AnimeDataContextType {
+  bangumiData: DB_Bangumi
+  episodeData: DB_History[]
+}
+
+const AnimeDataContext = createContext<AnimeDataContextType | null>(null)
+
+export const HistoryAnimeDataProvider: FC<PropsWithChildren> = ({ children }) => {
+  const { animeId } = useParams()
+  const { toast } = useToast()
+  const navigate = useNavigate()
+  const { isLoading, data } = useQuery({
+    queryKey: [RouteName.HISTORY, animeId],
+    queryFn: async () => {
+      if (!animeId) {
+        return
+      }
+      const bangumiData = await db.bangumi.get(+animeId)
+      const episodeData = await db.history.where({ animeId: +animeId }).toArray()
+      if (!bangumiData) {
+        return
+      }
+      return {
+        bangumiData,
+        episodeData,
+      }
+    },
+  })
+  if (isLoading) {
+    return null
+  }
+  if (!data) {
+    toast({
+      title: '错误',
+      description: '未找到该番剧',
+    })
+    navigate(RouteName.HISTORY)
+    return null
+  }
+  return <AnimeDataContext value={data}>{children}</AnimeDataContext>
+}
+
+export const useHistoryAnimeData = () => {
+  const context = use(AnimeDataContext)
+  if (!context) {
+    throw new Error('useHistoryAnimeData must be used within a HistoryAnimeDataProvider')
+  }
+  return context
+}
diff --git a/src/renderer/src/components/modules/history/HistoryDetailsContent.tsx b/src/renderer/src/components/modules/history/HistoryDetailsContent.tsx
new file mode 100644
index 00000000..dbfe1874
--- /dev/null
+++ b/src/renderer/src/components/modules/history/HistoryDetailsContent.tsx
@@ -0,0 +1,7 @@
+
+export const HistoryDetailsContent = ()=>{
+  // const { bangumiData,episodeData } = useHistoryAnimeData()
+  return <div>
+    {/* <img src={episodeData[0].thumbnail} className="size-full"/> */}
+  </div>
+}
\ No newline at end of file
diff --git a/src/renderer/src/components/modules/player/initialize/Event.tsx b/src/renderer/src/components/modules/player/initialize/Event.tsx
index 22f42c56..b83d7e7f 100644
--- a/src/renderer/src/components/modules/player/initialize/Event.tsx
+++ b/src/renderer/src/components/modules/player/initialize/Event.tsx
@@ -155,7 +155,7 @@ const usePlayerInitialize = (player: PlayerType | null | undefined) => {
     })
 
     player.on(Events.PLAYNEXT, async (url: string) => {
-      const path = await tipcClient?.getFilePathFromProtocolURL({ path: url })
+      const path = await tipcClient?.fileAction({ action: 'cover-path-from-protocol', url })
       if (!path) {
         return
       }
diff --git a/src/renderer/src/components/modules/player/loading/hooks.ts b/src/renderer/src/components/modules/player/loading/hooks.ts
index d3609c6f..b9ce1019 100644
--- a/src/renderer/src/components/modules/player/loading/hooks.ts
+++ b/src/renderer/src/components/modules/player/loading/hooks.ts
@@ -11,9 +11,9 @@ import { usePlayerSettingsValue } from '@renderer/atoms/settings/player'
 import { db } from '@renderer/database/db'
 import type { DB_Danmaku, DB_History } from '@renderer/database/schemas/history'
 import { usePlayAnimeFailedToast } from '@renderer/hooks/use-toast'
-import { calculateFileHash } from '@renderer/lib/calc-file-hash'
 import { chineseConverter } from '@renderer/lib/cht-to-chs'
 import { tipcClient } from '@renderer/lib/client'
+import { calculateFileHash } from '@renderer/lib/file'
 import { isWeb } from '@renderer/lib/utils'
 import { apiClient } from '@renderer/request'
 import type { CommentsModel } from '@renderer/request/models/comment'
@@ -178,7 +178,7 @@ export const useDanmakuData = () => {
   const video = useAtomValue(videoAtom)
   const { enableTraditionalToSimplified } = usePlayerSettingsValue()
   const [currentMatchedVideo] = useAtom(currentMatchedVideoAtom)
-  const { episodeId } = currentMatchedVideo
+  const { episodeId, animeId } = currentMatchedVideo
   const { data: thirdPartyDanmakuUrlData } = useQuery({
     queryKey: [apiClient.related.relatedkeys.getRelatedDanmakuByEpisodeId, episodeId],
     queryFn: async () => {
@@ -208,8 +208,8 @@ export const useDanmakuData = () => {
         queryKey: [apiClient.comment.Commentkeys.getExtcomment, episodeId, related.url],
         queryFn: async () => {
           const history = await db.history.get(video.hash)
+          const bangumi = await db.bangumi.get(history?.animeId ?? animeId)
           const historyDanmaku = history?.danmaku?.find((item) => item.source === related.url)
-
           const handleIsSelected = () => {
             // bilibili 弹幕库感觉有重复的弹幕，目前只默认加载一个 bilibili 弹幕库
             if (related.url.includes('bilibili')) {
@@ -221,7 +221,7 @@ export const useDanmakuData = () => {
             return true
           }
           // 使用弹幕缓存
-          if (historyDanmaku && !history?.newBangumi) {
+          if (historyDanmaku && !bangumi?.newBangumi) {
             return {
               ...historyDanmaku?.content,
               selected: historyDanmaku?.selected,
@@ -248,8 +248,9 @@ export const useDanmakuData = () => {
         queryKey: [apiClient.comment.Commentkeys.getDanmu, episodeId],
         queryFn: async () => {
           const history = await db.history.get(video.hash)
+          const bangumi = await db.bangumi.get(history?.animeId ?? animeId)
           const historyDanmaku = history?.danmaku?.find((item) => item.source === 'dandanplay')
-          if (historyDanmaku && !history?.newBangumi) {
+          if (historyDanmaku && !bangumi?.newBangumi) {
             return {
               ...historyDanmaku.content,
               selected: historyDanmaku.selected,
@@ -340,44 +341,50 @@ export const saveToHistory = async (
   params: Omit<DB_History, 'cover' | 'updatedAt' | 'progress' | 'duration'>,
 ) => {
   const { animeId, hash } = params
-  const existingAnime = await db.history.where({ hash }).first()
+  const existingHistory = await db.history.where({ hash }).first()
   const historyData = {
     ...params,
     updatedAt: new Date().toISOString(),
   }
-  if (!existingAnime) {
+
+  const updateBangumiData = async () => {
     if (!animeId) {
-      return db.history.add({
-        ...historyData,
-        progress: 0,
-        duration: 0,
-      })
+      return
     }
-
-    const primaryKey = await db.history.add({
+    const existingBangumi = await db.bangumi.get(animeId)
+    if (existingBangumi) {
+      return
+    }
+    const [bangumiDetail, bangumiShin] = await Promise.all([
+      apiClient.bangumi.getBangumiDetailById(animeId),
+      apiClient.bangumi.getBangumiShin(),
+    ])
+    const { bangumi } = bangumiDetail
+    await db.bangumi.add({
+      animeId,
+      title: historyData.animeTitle ?? bangumi.animeTitle,
+      updatedAt: new Date().toISOString(),
+      detail: bangumi,
+      newBangumi: bangumiShin.bangumiList.some((item) => item.animeId === +animeId),
+      cover:
+        (await tipcClient?.fileAction({ action: 'url-to-base64', url: bangumi.imageUrl })) ??
+        bangumi.imageUrl,
+    })
+  }
+  if (!existingHistory) {
+    await db.history.add({
       ...historyData,
       progress: 0,
       duration: 0,
     })
-    const updateBangumiData = async () => {
-      const [bangumiDetail, bangumiShin] = await Promise.all([
-        apiClient.bangumi.getBangumiDetailById(animeId),
-        apiClient.bangumi.getBangumiShin(),
-      ])
-
-      Object.assign(historyData, {
-        cover: bangumiDetail.bangumi.imageUrl,
-        newBangumi: bangumiShin.bangumiList.some((item) => item.animeId === +animeId),
-      })
-      return db.history.update(primaryKey, historyData)
-    }
 
     // 减少加载时长，先插入数据库，直接播放动漫，之后再获取动漫详情
     updateBangumiData()
     return
   }
 
-  return db.history.update(existingAnime.hash, historyData)
+  updateBangumiData()
+  return db.history.update(existingHistory.hash, historyData)
 }
 
 export const useLoadingHistoricalAnime = () => {
diff --git a/src/renderer/src/components/ui/button/FunctionAreaButton.tsx b/src/renderer/src/components/ui/button/FunctionAreaButton.tsx
index 8d3184f9..909c2023 100644
--- a/src/renderer/src/components/ui/button/FunctionAreaButton.tsx
+++ b/src/renderer/src/components/ui/button/FunctionAreaButton.tsx
@@ -30,7 +30,7 @@ export const ButtonWithIcon: FC<
     <button
       type="button"
       className={cn(
-        'no-drag-region flex size-8 cursor-default items-center justify-center rounded-md transition-colors hover:bg-base-300',
+        'no-drag-region flex size-8 cursor-default items-center justify-center rounded-md transition-colors hover:bg-base-200',
         className,
       )}
       {...props}
diff --git a/src/renderer/src/database/constants.ts b/src/renderer/src/database/constants.ts
index 5803e5d7..3f66dc14 100644
--- a/src/renderer/src/database/constants.ts
+++ b/src/renderer/src/database/constants.ts
@@ -2,4 +2,5 @@ export const LOCAL_DB_NAME = 'MARCHEN_DB'
 
 export enum TABLES {
   HISTORY = 'history',
+  BANGUMI = 'bangumi'
 }
diff --git a/src/renderer/src/database/db.schema.ts b/src/renderer/src/database/db.schema.ts
index 7c8e2ebb..99d7c589 100644
--- a/src/renderer/src/database/db.schema.ts
+++ b/src/renderer/src/database/db.schema.ts
@@ -9,3 +9,9 @@ export const dbSchemaV2 = {
   [TABLES.HISTORY]:
     '&hash,animeId, episodeId, path, animeTitle, episodeTitle, progress, duration, cover,thumbnail, danmaku, newBangumi, updatedAt',
 }
+
+export const dbSchemaV3 = {
+  [TABLES.HISTORY]:
+    '&hash,animeId, episodeId, path, animeTitle, episodeTitle, progress, duration, thumbnail, danmaku, updatedAt',
+  [TABLES.BANGUMI]: '&animeId, title,cover,newBangumi,detail, updatedAt',
+}
diff --git a/src/renderer/src/database/db.ts b/src/renderer/src/database/db.ts
index 8d266945..739a9a7e 100644
--- a/src/renderer/src/database/db.ts
+++ b/src/renderer/src/database/db.ts
@@ -2,17 +2,19 @@ import type { EntityTable } from 'dexie'
 import Dexie from 'dexie'
 
 import { LOCAL_DB_NAME, TABLES } from './constants'
-import { dbSchemaV1 } from './db.schema'
+import { dbSchemaV1, dbSchemaV2, dbSchemaV3 } from './db.schema'
+import type { DB_Bangumi } from './schemas/bangumi'
 import type { DB_History } from './schemas/history'
 
 class LocalDB extends Dexie {
   history: EntityTable<DB_History, 'hash'>
+  bangumi: EntityTable<DB_Bangumi, 'animeId'>
 
   constructor() {
     super(LOCAL_DB_NAME)
     this.version(1).stores(dbSchemaV1)
     this.version(2)
-      .stores(dbSchemaV1)
+      .stores(dbSchemaV2)
       .upgrade(async (trans) => {
         const historyTable = trans.table<DB_History>(TABLES.HISTORY)
         const allRecords = await historyTable.toArray()
@@ -21,7 +23,9 @@ class LocalDB extends Dexie {
           await historyTable.put(record)
         }
       })
+    this.version(3).stores(dbSchemaV3)
     this.history = this.table(TABLES.HISTORY)
+    this.bangumi = this.table(TABLES.BANGUMI)
   }
 
   async deleteDatabase(): Promise<void> {
diff --git a/src/renderer/src/database/schemas/bangumi.ts b/src/renderer/src/database/schemas/bangumi.ts
new file mode 100644
index 00000000..3bcb5dbe
--- /dev/null
+++ b/src/renderer/src/database/schemas/bangumi.ts
@@ -0,0 +1,10 @@
+import type { BangumiModel } from '@renderer/request/models/bangumi'
+
+export interface DB_Bangumi {
+  animeId: number
+  title: string
+  newBangumi: boolean
+  updatedAt: string
+  detail: BangumiModel
+  cover: string
+}
diff --git a/src/renderer/src/database/schemas/history.ts b/src/renderer/src/database/schemas/history.ts
index b8f8058d..6c6307c0 100644
--- a/src/renderer/src/database/schemas/history.ts
+++ b/src/renderer/src/database/schemas/history.ts
@@ -9,10 +9,8 @@ export interface DB_History {
   episodeTitle?: string
   progress: number
   duration: number
-  cover?: string
   thumbnail?: string
   danmaku?: DB_Danmaku[]
-  newBangumi?: boolean
   subtitles?: DB_Subtitles
   updatedAt: string
 }
diff --git a/src/renderer/src/lib/calc-file-hash.ts b/src/renderer/src/lib/file.ts
similarity index 100%
rename from src/renderer/src/lib/calc-file-hash.ts
rename to src/renderer/src/lib/file.ts
diff --git a/src/renderer/src/page/history/[animeId]/index.tsx b/src/renderer/src/page/history/[animeId]/index.tsx
new file mode 100644
index 00000000..59d06024
--- /dev/null
+++ b/src/renderer/src/page/history/[animeId]/index.tsx
@@ -0,0 +1,39 @@
+import { TitleBarLayout } from '@renderer/components/layout/root/TitleBarLayout'
+import {
+  HistoryAnimeDataProvider,
+  useHistoryAnimeData,
+} from '@renderer/components/modules/history/HistoryAnimeDataProvider'
+import { HistoryDetailsContent } from '@renderer/components/modules/history/HistoryDetailsContent'
+import { ButtonWithIcon } from '@renderer/components/ui/button'
+import { ScrollArea } from '@renderer/components/ui/scrollArea'
+import { RouteName } from '@renderer/router'
+import { m } from 'framer-motion'
+import { Link } from 'react-router'
+
+export const HistoryDetails = () => {
+  return (
+    <m.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
+      <HistoryAnimeDataProvider>
+        <TitleBarLayout title={<HistoryDetailsTitle />}>
+          <ScrollArea>
+            <HistoryDetailsContent />
+          </ScrollArea>
+        </TitleBarLayout>
+      </HistoryAnimeDataProvider>
+    </m.div>
+  )
+}
+
+const HistoryDetailsTitle = () => {
+  const { bangumiData, episodeData } = useHistoryAnimeData()
+  return (
+    <div className="flex items-center gap-2">
+      <Link to={RouteName.HISTORY} className=" no-drag-region flex items-center">
+        <ButtonWithIcon icon="icon-[mingcute--left-line] text-2xl" />
+      </Link>
+      <h3 className=" align-middle text-lg font-medium">
+        {bangumiData?.title ?? episodeData[0]?.animeTitle}
+      </h3>
+    </div>
+  )
+}
diff --git a/src/renderer/src/page/history/index.tsx b/src/renderer/src/page/history/index.tsx
index 01fc982c..bc65a771 100644
--- a/src/renderer/src/page/history/index.tsx
+++ b/src/renderer/src/page/history/index.tsx
@@ -1,20 +1,11 @@
-import { useAppSettings, useAppSettingsValue } from '@renderer/atoms/settings/app'
-import { RouterLayout } from '@renderer/components/layout/root/RouterLayout'
-import { showMatchAnimeDialog } from '@renderer/components/modules/player/loading/dialog/hooks'
+import { TitleBarLayout } from '@renderer/components/layout/root/TitleBarLayout'
 import { MatchDanmakuDialog } from '@renderer/components/modules/shared/MatchDanmakuDialog'
 import { Badge } from '@renderer/components/ui/badge'
-import { FunctionAreaButton, FunctionAreaToggle } from '@renderer/components/ui/button'
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuSeparator,
-  ContextMenuTrigger,
-} from '@renderer/components/ui/menu'
+import { FunctionAreaButton } from '@renderer/components/ui/button'
+import { ContextMenu, ContextMenuTrigger } from '@renderer/components/ui/menu'
 import { ScrollArea } from '@renderer/components/ui/scrollArea'
-import { useToast } from '@renderer/components/ui/toast'
 import { db } from '@renderer/database/db'
-import type { DB_History } from '@renderer/database/schemas/history'
+import type { DB_Bangumi } from '@renderer/database/schemas/bangumi'
 import { useConfirmationDialog } from '@renderer/hooks/use-dialog'
 import { relativeTimeToNow } from '@renderer/initialize/date'
 import { cn, isWeb } from '@renderer/lib/utils'
@@ -24,29 +15,18 @@ import type { Variants } from 'framer-motion'
 import { m } from 'framer-motion'
 import type { FC } from 'react'
 import { memo, useMemo, useState } from 'react'
-import { useNavigate } from 'react-router'
+import { Link } from 'react-router'
 
 export default function History() {
-  const historyData = useLiveQuery(() =>
-    db.history.orderBy('updatedAt').limit(30).reverse().toArray(),
+  const bangumiData = useLiveQuery(() =>
+    db.bangumi.orderBy('updatedAt').limit(30).reverse().toArray(),
   )
-  const appSettings = useAppSettingsValue()
-  const showPoster = appSettings.showPoster || isWeb
   return (
-    <RouterLayout FunctionArea={<FunctionArea />}>
-      <ScrollArea className="h-full px-8 ">
-        {historyData?.length !== 0 ? (
-          <ul
-            className={cn(
-              'grid gap-2 gap-y-3',
-              showPoster
-                ? 'grid-auto-cols'
-                : 'grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 3xl:grid-cols-5',
-            )}
-          >
-            {historyData?.map((item) => (
-              <HistoryItem {...item} showPoster={showPoster || isWeb} key={item.hash} />
-            ))}
+    <TitleBarLayout FunctionArea={<FunctionArea />}>
+      <ScrollArea className="mt-3 px-6">
+        {bangumiData?.length !== 0 ? (
+          <ul className={cn('grid-history-cols grid gap-3')}>
+            {bangumiData?.map((item) => <HistoryItem {...item} key={item.animeId} />)}
           </ul>
         ) : (
           <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-center text-gray-500">
@@ -56,147 +36,65 @@ export default function History() {
         )}
       </ScrollArea>
       <MatchDanmakuDialog />
-    </RouterLayout>
+    </TitleBarLayout>
   )
 }
 
-interface HistoryItemProps extends DB_History {
-  showPoster: boolean
-}
-
 const hoverVariant: Variants = {
-  icon: {
-    opacity: 1,
-  },
   img: {
     opacity: 0.8,
     scale: 1.05,
   },
 }
 
-const HistoryItem: FC<HistoryItemProps> = memo((props) => {
-  const {
-    cover,
-    animeTitle,
-    episodeTitle,
-    progress,
-    duration,
-    episodeId,
-    thumbnail,
-    showPoster,
-    updatedAt,
-    hash,
-  } = props
-  const navigation = useNavigate()
-  const { toast } = useToast()
-
-  const percentage = useMemo(() => {
-    const percentage = progress / duration
+const HistoryItem: FC<DB_Bangumi> = memo((props) => {
+  const episodeCount = useLiveQuery(() => db.history.where({ animeId: props.animeId }).count())
+  const { updatedAt, cover, title, detail } = props
+  const percentageOfMatchedEpisode = useMemo(() => {
+    const percentage = (episodeCount ?? 0) / detail.episodes.length
     return Number.isFinite(percentage) && !Number.isNaN(percentage)
       ? Math.round(percentage * 100)
       : 0
-  }, [progress, duration])
-
-  const playAnime = () => {
-    if (isWeb) {
-      return toast({
-        title: '请使用客户端播放',
-        description: 'WEB 版本暂时不支持续播功能',
-        duration: 5000,
-      })
-    }
-    return navigation(RouteName.PLAYER, { state: { episodeId, hash } })
-  }
+  }, [detail.episodes.length, episodeCount])
   return (
     <ContextMenu>
       <ContextMenuTrigger>
-        <li
+        <Link
+          to={`${RouteName.HISTORY}/${props.animeId}`}
           className={cn(
             'flex size-full cursor-default select-none flex-col items-center',
             !isWeb && 'group',
           )}
-          onClick={playAnime}
         >
           <m.div
-            className={cn(
-              'relative aspect-video size-full overflow-hidden rounded-md ',
-              showPoster && 'aspect-auto h-72',
-            )}
-            whileHover={['icon', 'img']}
+            className={cn('relative size-full overflow-hidden rounded-md ', 'aspect-auto h-72')}
+            whileHover={['img']}
           >
-            <HistoryImage src={showPoster ? (cover ?? thumbnail) : (thumbnail ?? cover)} />
-            {!isWeb && (
-              <m.i
-                className={cn(
-                  'icon-[mingcute--play-circle-line]',
-                  'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transition-all duration-100',
-                  'size-16 text-zinc-100 opacity-0 shadow-md',
-                )}
-                variants={{ icon: hoverVariant.icon }}
-              />
-            )}
+            <HistoryImage src={cover} />
             <div
               className={cn('absolute bottom-0 left-0 h-1 rounded-md bg-warning')}
-              style={{ width: `${percentage}%` }}
+              style={{ width: `${percentageOfMatchedEpisode}%` }}
             />
           </m.div>
-          <div className="mt-1 w-full px-0.5">
-            <p className="truncate text-sm" title={animeTitle}>
-              {animeTitle}
+          <div className="mt-1.5 w-full px-0.5">
+            <p className="truncate text-sm font-medium" title={title}>
+              {title}
             </p>
-            <div
-              className="flex items-center justify-between text-xs text-zinc-500"
-              title={episodeTitle}
-            >
-              <span className="truncate">{episodeTitle || '暂无弹幕库'}</span>
-              <div className="shrink-0 ">
-                <Badge variant={'outline'}>{relativeTimeToNow(updatedAt)}</Badge>
-              </div>
+            <div className="mt-0.5 flex items-center  text-zinc-500">
+              <Badge variant={'outline'}>{relativeTimeToNow(updatedAt)}</Badge>
             </div>
           </div>
-        </li>
+        </Link>
       </ContextMenuTrigger>
-      <ContextMenuContent>
-        <ContextMenuItem onClick={playAnime}>继续观看</ContextMenuItem>
-        <ContextMenuSeparator />
-        <ContextMenuItem
-          onClick={() => {
-            showMatchAnimeDialog(true, hash)
-          }}
-        >
-          重新匹配弹幕库
-        </ContextMenuItem>
-        <ContextMenuItem onClick={() => db.history.update(hash, { danmaku: undefined })}>
-          清除弹幕缓存
-        </ContextMenuItem>
-        <ContextMenuSeparator />
-        <ContextMenuItem className="!text-secondary" onClick={() => db.history.delete(hash)}>
-          删除
-        </ContextMenuItem>
-      </ContextMenuContent>
     </ContextMenu>
   )
 })
 
 const FunctionArea = memo(() => {
-  const [appSettings, setAppSettings] = useAppSettings()
   const present = useConfirmationDialog()
 
   return (
     <div className="no-drag-region flex items-center space-x-2 text-2xl text-zinc-500 ">
-      {!isWeb && (
-        <FunctionAreaToggle
-          pressed={appSettings.showPoster}
-          onPressedChange={(value) =>
-            setAppSettings((old) => ({
-              ...old,
-              showPoster: value,
-            }))
-          }
-        >
-          <i className="icon-[mingcute--pic-line]" />
-        </FunctionAreaToggle>
-      )}
       <FunctionAreaButton
         onClick={() =>
           present({
@@ -221,7 +119,7 @@ const HistoryImage: FC<HistoryImageProps> = (props) => {
   const { src } = props
   const [imgError, setImgError] = useState(false)
   return (
-    <m.div className=" size-full border " variants={{ img: hoverVariant.img }}>
+    <m.div className="size-full border shadow-2xl" variants={{ img: hoverVariant.img }}>
       {!src || imgError ? (
         <div className="flex size-full items-center justify-center bg-gray-200 text-zinc-500 dark:bg-zinc-300">
           <span className="icon-[mingcute--pic-line] size-10 group-hover:hidden" />
diff --git a/src/renderer/src/page/latest-anime/index.tsx b/src/renderer/src/page/latest-anime/index.tsx
index 165c07f5..4b318b50 100644
--- a/src/renderer/src/page/latest-anime/index.tsx
+++ b/src/renderer/src/page/latest-anime/index.tsx
@@ -1,9 +1,9 @@
-import { RouterLayout } from '@renderer/components/layout/root/RouterLayout'
+import { TitleBarLayout } from '@renderer/components/layout/root/TitleBarLayout'
 
 export default function LastAnime() {
   return (
-    <RouterLayout>
+    <TitleBarLayout>
       <div className="flex h-full items-center justify-center">还在编写中，敬请期待</div>
-    </RouterLayout>
+    </TitleBarLayout>
   )
 }
diff --git a/src/renderer/src/providers/index.tsx b/src/renderer/src/providers/index.tsx
index 27164c83..e7e3ee0f 100644
--- a/src/renderer/src/providers/index.tsx
+++ b/src/renderer/src/providers/index.tsx
@@ -1,10 +1,8 @@
 import { jotaiStore } from '@renderer/atoms/store'
 import { ModalStackProvider } from '@renderer/components/ui/modal'
 import { Toaster } from '@renderer/components/ui/toast'
-import { isDev } from '@renderer/lib/env'
 import queryClient from '@renderer/lib/query-client'
 import { QueryClientProvider } from '@tanstack/react-query'
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { domMax, LazyMotion } from 'framer-motion'
 import { Provider as JotaiProvider } from 'jotai'
 import { ThemeProvider } from 'next-themes'
@@ -29,6 +27,6 @@ export const RootProviders: FC<PropsWithChildren> = ({ children }) => (
     {children}
 
     <Toaster />
-    {isDev && <ReactQueryDevtools initialIsOpen={false} buttonPosition="top-right" />}
+    {/* {isDev && <ReactQueryDevtools initialIsOpen={false} buttonPosition="top-right" />} */}
   </ProviderComposer>
 )
diff --git a/src/renderer/src/request/models/bangumi.ts b/src/renderer/src/request/models/bangumi.ts
index d6b573c6..494d7422 100644
--- a/src/renderer/src/request/models/bangumi.ts
+++ b/src/renderer/src/request/models/bangumi.ts
@@ -55,7 +55,7 @@ interface TrailerModel {
   date: string
 }
 
-interface BangumiModel {
+export interface BangumiModel {
   type: string
   typeDescription: string
   titles: TitleModel[]
diff --git a/src/renderer/src/router/router.tsx b/src/renderer/src/router/router.tsx
index 758abc35..7884b745 100644
--- a/src/renderer/src/router/router.tsx
+++ b/src/renderer/src/router/router.tsx
@@ -1,6 +1,7 @@
 import App from '@renderer/App'
 import ErrorView from '@renderer/components/common/ErrorView'
 import History from '@renderer/page/history'
+import { HistoryDetails } from '@renderer/page/history/[animeId]'
 import VideoPlayer from '@renderer/page/player'
 import type { NonIndexRouteObject, RouteObject } from 'react-router'
 import { createHashRouter, Navigate, useLocation } from 'react-router'
@@ -41,6 +42,11 @@ export const siderbarRoutes = [
     errorElement: <ErrorView />,
     element: <History />,
   },
+  {
+    path: `${RouteName.HISTORY}/:animeId`,
+    element: <HistoryDetails />,
+    errorElement: <ErrorView />,
+  },
 ] satisfies SidebarRouteObject[]
 
 export const router = [
diff --git a/src/renderer/src/styles/font.css b/src/renderer/src/styles/font.css
index d4a1bcae..1e9c6b47 100644
--- a/src/renderer/src/styles/font.css
+++ b/src/renderer/src/styles/font.css
@@ -1,2 +1,3 @@
 @import '@fontsource/manrope/400.css';
+@import '@fontsource/manrope/500.css';
 @import '@fontsource/manrope/700.css';
diff --git a/src/renderer/src/styles/tailwind-extend.css b/src/renderer/src/styles/tailwind-extend.css
index 8892d5be..6d6ec226 100644
--- a/src/renderer/src/styles/tailwind-extend.css
+++ b/src/renderer/src/styles/tailwind-extend.css
@@ -7,7 +7,7 @@
     -webkit-app-region: no-drag;
   }
 
-  .grid-auto-cols {
+  .grid-history-cols {
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   }
 }