diff --git a/public/img/icon/play-journal-card.svg b/public/img/icon/play-journal-card.svg
new file mode 100644
index 0000000..1cd7729
--- /dev/null
+++ b/public/img/icon/play-journal-card.svg
@@ -0,0 +1,4 @@
+<svg width="46" height="32" viewBox="0 0 46 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="46" height="32" rx="16" fill="#F2F3F7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.6198 14.5256C30.7532 15.1818 30.7532 16.8182 29.6198 17.4744L18.8905 23.6861C17.7547 24.3437 16.3332 23.5241 16.3332 22.2117L16.3332 9.78833C16.3332 8.47591 17.7547 7.65633 18.8905 8.3139L29.6198 14.5256Z" fill="black" fill-opacity="0.95"/>
+</svg>
diff --git a/src/components/Category.tsx b/src/components/Category.tsx
index 73d0757..62264c9 100644
--- a/src/components/Category.tsx
+++ b/src/components/Category.tsx
@@ -7,7 +7,7 @@ const Category = async ({ list, current }: { list: Category[]; current: string }
         <Link
           href={`/vol/list/${item.nameEn}`}
           key={item.id}
-          className={`w-[80px] h-[35px] mt-[10px] rounded-[120px] text-[13px] leading-[18px] text-center leading-[35px] cursor-pointer ${current === item.id ? 'bg-brand text-[#fff]' : 'bg-[#F2F3F7] text-[#000]'} hover:bg-brand hover:text-[#fff]`}
+          className={`w-[80px] h-[35px] mt-[10px] rounded-[120px] text-[13px] leading-[18px] text-center leading-[35px] cursor-pointer ${current === item.id ? 'bg-brand text-[#fff]' : 'bg-[#F2F3F7] text-[#000]'} hover:text-brand`}
         >
           {item.nameCh}
         </Link>
diff --git a/src/components/Journal/JournalCard.tsx b/src/components/Journal/JournalCard.tsx
index 347ead3..488628f 100644
--- a/src/components/Journal/JournalCard.tsx
+++ b/src/components/Journal/JournalCard.tsx
@@ -1,13 +1,15 @@
 import Image from 'next/image';
 
-function VolNo({ no }: { no: string }) {
+import styles from './index.module.css';
+
+function VolNo({ text }: { text: string }) {
   return (
-    <div className="flex flex-col justify-between absolute top-0 left-0 w-[64px] h-[64px] mt-[16px] ml-[16px] pt-[9.35px] pb-[9.2px] px-[11.13px] rounded-[2px] bg-[rgba(255,255,255,0.9)] z-2">
-      <p className="h-[23.2px] w-full text-[16px] leading-[23.2px] text-[#000] text-left">
-        {no.toString().padStart(4, '0')}
+    <div className="absolute top-[16px] left-[16px] w-[48px] h-[48px] pt-[8px] rounded-[2px] bg-[rgba(255,255,255,0.9)] z-2">
+      <p className="w-full h-[15px] ml-[5px] text-[15px] font-normal leading-[15px] text-[rgba(0,0,0,0.9)] text-left">
+        {text.toString().padStart(4, '0')}
       </p>
-      <div className="w-[37.1px] h-[1.4px] bg-gradient-to-r from-red-700 via-red-700 to-transparent" />
-      <p className="w-full text-[10px] leading-[18px] text-[rgba(0,0,0,0.4)]">VOL</p>
+      <div className="w-[14px] h-[1.4px] my-[3px] ml-[6px] bg-brand" />
+      <p className="ml-[6px] text-[9px] leading-[10px] text-[rgba(0,0,0,0.4)]">VOL</p>
     </div>
   );
 }
@@ -15,9 +17,9 @@ function VolNo({ no }: { no: string }) {
 export default function JournalCard({ image, title, journalNo }: { image: string; title?: string; journalNo: string }) {
   return (
     /* banner container */
-    <div className={`relative w-[712px] h-[420px] rounded-[6px] overflow-hidden bg-[url(${image})]`}>
-      {/* 左上角标 */}
-      <VolNo no={journalNo} />
+    <div className={`relative w-[712px] h-[420px] rounded-[6px] overflow-hidden bg-[url(${image})] group`}>
+      {/* 左上方 角标 */}
+      <VolNo text={journalNo} />
       {/* banner */}
       <Image
         width={712}
@@ -28,7 +30,11 @@ export default function JournalCard({ image, title, journalNo }: { image: string
         className="absolute bottom-0 cursor-pointer"
       />
       {/* 标题 */}
-      {title && <p className="absolute bottom-[23px] left-[23px] text-[#fff] text-[24px] leading-[33.6px]">{title}</p>}
+      <div className={`absolute bottom-0 w-full h-[126px] ${styles.title_background}`}>
+        <p className="absolute bottom-[23px] left-[23px] text-[#fff] text-[24px] leading-[33.6px]">{title}</p>
+      </div>
+      {/* 遮罩层 */}
+      <div className="absolute bottom-[24px] right-[24px] w-[46px] h-[32px] bg-[url(/img/icon/play-journal-card.svg)] bg-no-repeat z-2 opacity-0 group-hover:opacity-100  transition-opacity-500" />
     </div>
   );
 }
diff --git a/src/components/Journal/JournalItem.tsx b/src/components/Journal/JournalItem.tsx
index 1d694a6..cdede23 100644
--- a/src/components/Journal/JournalItem.tsx
+++ b/src/components/Journal/JournalItem.tsx
@@ -19,7 +19,7 @@ export default function JournalItem({
         <JournalCard image={image} title={title} journalNo={journalNo} />
       </Link>
       {/* 摘要 */}
-      <p className="w-full mt-[15px] mb-[12px] text-[17px] leading-[23.8px] text-base hover:text-brand cursor-pointer overflow-hidden whitespace-nowrap truncate">
+      <p className="w-full mt-[15px] mb-[12px] text-[17px] leading-[23.8px] text-base cursor-pointer overflow-hidden whitespace-nowrap truncate">
         {summary}
       </p>
       {/* 精选评论 */}
@@ -33,7 +33,7 @@ export default function JournalItem({
               </div>
             )}
           </div>
-          <p className="w-[270px] text-[14px] leading-[20px] text-[rgba(0,0,0,0.7)] hover:text-brand cursor-pointer overflow-hidden whitespace-nowrap truncate">
+          <p className="w-[270px] text-[14px] leading-[20px] text-[rgba(0,0,0,0.7)] cursor-pointer overflow-hidden whitespace-nowrap truncate">
             {commentList[0].content}
           </p>
         </div>
diff --git a/src/components/Journal/JournalRecommendCard.tsx b/src/components/Journal/JournalRecommendCard.tsx
index b0320ac..b44b9e9 100644
--- a/src/components/Journal/JournalRecommendCard.tsx
+++ b/src/components/Journal/JournalRecommendCard.tsx
@@ -5,10 +5,10 @@ export default function JournalRecommendCard({ title, image, userCollectCount }:
     <div className="flex flex-row items-center h-[56px] group">
       <Image src={image} alt={title} width={80} height={56} unoptimized className="w-[80px] h-[56px] rounded-[3px]" />{' '}
       <div className="flex flex-col justify-between h-full ml-[20px] py-[6px]">
-        <p className="w-[200px] text-[15px] leading-[21px] cursor-pointer group-hover:text-brand overflow-hidden whitespace-nowrap truncate">
+        <p className="w-[200px] text-[15px] leading-[21px] cursor-pointer overflow-hidden whitespace-nowrap truncate">
           {title}
         </p>
-        <p className="text-[13px] leading-[18.2px] cursor-pointer group-hover:text-brand">{`${userCollectCount}人收藏`}</p>
+        <p className="text-[13px] leading-[18.2px] cursor-pointer">{`${userCollectCount}人收藏`}</p>
       </div>
     </div>
   );
diff --git a/src/components/Journal/index.module.css b/src/components/Journal/index.module.css
new file mode 100644
index 0000000..64a6640
--- /dev/null
+++ b/src/components/Journal/index.module.css
@@ -0,0 +1,3 @@
+.title_background {
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.6) 100%);
+}
diff --git a/uno.config.ts b/uno.config.ts
index 007eae3..32f35e9 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -25,9 +25,9 @@ export default defineConfig({
     'text-base': 'text-[rgba(0,0,0,0.95)] dark:text-[#f0f0f0] switch-animation',
     'switch-label-base': 'bg-gray-200 dark:bg-gray-800 switch-animation',
     'switch-span-base': 'bg-white dark:bg-gray-300 switch-animation',
-    'text-brand': 'text-[#C43737]',
     'text-overflow': 'overflow-hidden whitespace-nowrap truncate',
-    'border-brand': 'border-[#C43737]',
+    'text-brand': 'text-[#C43737]',
     'bg-brand': 'bg-[#C43737]',
+    'border-brand': 'border-[#C43737]',
   },
 });