diff --git a/src/app/vol/[journalId]/page.tsx b/src/app/vol/[journalId]/page.tsx
index 96782c9..2e0196a 100644
--- a/src/app/vol/[journalId]/page.tsx
+++ b/src/app/vol/[journalId]/page.tsx
@@ -1,10 +1,9 @@
 /** 期刊详情 */
-
 import Link from 'next/link';
 import { notFound } from 'next/navigation';
 
-import { JournalCard, SongCardList, HotJournalList, Comment, Collect } from '@/components';
-import { apiGetJournalInfoById, apiGetSongsByJournalNo } from '@/services';
+import { JournalCard, SongCardList, JournalRecommendList, Comment, Collect } from '@/components';
+import { apiGetJournalInfoById, apiGetSongsByJournalNo, apiGetJournalRecommendById } from '@/services';
 
 export async function generateMetadata({ params: { journalId } }: { params: { journalId: string } }) {
   const res = await apiGetJournalInfoById({ id: journalId });
@@ -13,16 +12,17 @@ export async function generateMetadata({ params: { journalId } }: { params: { jo
 }
 
 const getData = async (journalId: string) => {
-  const [journalInfoRes, songListRes] = await Promise.all([
+  const [journalInfoRes, songListRes, recommendList] = await Promise.all([
     apiGetJournalInfoById({ id: journalId }),
     apiGetSongsByJournalNo({ id: journalId }),
+    apiGetJournalRecommendById({ id: journalId, limit: 8 }),
   ]);
   if (!(journalInfoRes.code === 200 && songListRes.code === 200)) return notFound();
-  return { journalInfo: journalInfoRes.data, songList: songListRes.data };
+  return { journalInfo: journalInfoRes.data, songList: songListRes.data, recommendList: recommendList.data };
 };
 
 export default async function JournalDetail({ params: { journalId } }: { params: { journalId: string } }) {
-  const { journalInfo, songList } = await getData(journalId);
+  const { journalInfo, songList, recommendList } = await getData(journalId);
 
   return (
     <main className="w-[1200px] mx-auto flex flex-row justify-between items-left pt-[145px] pb-[104px] ">
@@ -59,7 +59,7 @@ export default async function JournalDetail({ params: { journalId } }: { params:
           {/* 收藏 */}
           <Collect
             active={journalInfo.haveCollect}
-            text={`${journalInfo.totalCommentReply}人收藏`}
+            text={`${journalInfo.userCollectCount}人收藏`}
             id={journalInfo.id}
             type="1"
           />
@@ -83,7 +83,7 @@ export default async function JournalDetail({ params: { journalId } }: { params:
 
       <div className="w-[346px]">
         {/* 热门推荐 */}
-        <HotJournalList type="journal" journalId={journalInfo.id} />
+        {recommendList.length ? <JournalRecommendList list={recommendList} /> : <div />}
       </div>
     </main>
   );
diff --git a/src/app/vol/list/[category]/[[...page]]/page.tsx b/src/app/vol/list/[category]/[[...page]]/page.tsx
index f4cb253..4967e7e 100644
--- a/src/app/vol/list/[category]/[[...page]]/page.tsx
+++ b/src/app/vol/list/[category]/[[...page]]/page.tsx
@@ -1,7 +1,8 @@
 /** 期刊列表 */
+import { notFound } from 'next/navigation';
 
-import { Category, JournalList, HotJournalList } from '@/components';
-import { apiSearchCategory } from '@/services';
+import { Category, JournalList, JournalRecommendList } from '@/components';
+import { apiSearchCategoryList, apiGetJournalRecommendWithCollect } from '@/services';
 
 import type { Metadata } from 'next';
 
@@ -9,14 +10,18 @@ export const metadata: Metadata = {
   title: '期刊',
 };
 
-const getCategoryList = async () => {
-  const result = await apiSearchCategory();
-  return result.code === 200 ? result.data : [];
+const getData = async () => {
+  const [categoryList, recomendList] = await Promise.all([
+    apiSearchCategoryList(),
+    apiGetJournalRecommendWithCollect(),
+  ]);
+  if (categoryList.code !== 200) return notFound();
+  return { categoryList: categoryList.data, recomendList: recomendList.data };
 };
 
 export default async function Journal({ params }: { params: { category?: string; page?: number } }) {
   const { category = 'all', page = 1 } = params;
-  const categoryList = await getCategoryList();
+  const { categoryList, recomendList } = await getData();
   const categoryInfo: Category | undefined = categoryList.find((item: Category) => item.nameEn === category);
 
   return (
@@ -32,7 +37,7 @@ export default async function Journal({ params }: { params: { category?: string;
       {/* 右侧 */}
       <div className="w-[346px] mt-[218px]">
         {/* 热门推荐 */}
-        <HotJournalList type="hot" />
+        <JournalRecommendList list={recomendList} />
       </div>
     </main>
   );
diff --git a/src/components/Category.tsx b/src/components/Category.tsx
index c163c05..86e888a 100644
--- a/src/components/Category.tsx
+++ b/src/components/Category.tsx
@@ -1,9 +1,9 @@
 import Link from 'next/link';
 
-import { apiSearchCategory } from '@/services/server/journal';
+import { apiSearchCategoryList } from '@/services/server/journal';
 
 const getCategoryList = async () => {
-  const result = await apiSearchCategory();
+  const result = await apiSearchCategoryList();
   return result.code === 200 ? result.data : [];
 };
 
diff --git a/src/components/Journal/HotJournalList.tsx b/src/components/Journal/HotJournalList.tsx
deleted file mode 100644
index bc83f1b..0000000
--- a/src/components/Journal/HotJournalList.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import Link from 'next/link';
-
-import HotJournalCard from './HotJournalCard';
-
-import { apiJournalRecommend } from '@/services/server/journal';
-
-interface HotProp {
-  type: 'hot';
-}
-
-interface JournalProp {
-  type: 'journal';
-  journalId: string;
-}
-
-const getData = async (id: string) => {
-  const res = await apiJournalRecommend({ id });
-  return res.code === 200 ? res.data : [];
-};
-
-const RecommondJournal = async (prop: HotProp | JournalProp) => {
-  let journalList: JournalInfo[] = [];
-  if (prop.type === 'hot') journalList = [];
-  if (prop.type === 'journal') journalList = await getData(prop.journalId);
-
-  return (
-    <div className="flex flex-col">
-      {/* 分类 & 电台 */}
-      <div className="text-[17px] leading-[23.8px]">热门推荐</div>
-      {/* 期刊 list */}
-      <div className="flex flex-col gap-[30px] mt-[17px]">
-        {!!journalList?.length &&
-          journalList.map((item: JournalInfo) => (
-            <Link key={item.id} href={`/vol/${item.journalNo}`}>
-              <HotJournalCard key={item.id} {...item} />
-            </Link>
-          ))}
-      </div>
-    </div>
-  );
-};
-
-export default RecommondJournal;
diff --git a/src/components/Journal/JournalItem.tsx b/src/components/Journal/JournalItem.tsx
index e06f020..5092388 100644
--- a/src/components/Journal/JournalItem.tsx
+++ b/src/components/Journal/JournalItem.tsx
@@ -11,6 +11,7 @@ export default function JournalItem({
   haveCollect,
   totalCommentReply,
   commentList,
+  userCollectCount,
 }: JournalInfo) {
   return (
     <div className="flex flex-col w-[712px] rounded-[6px] bg-base ">
@@ -52,7 +53,7 @@ export default function JournalItem({
           unoptimized
         />
         <p className="ml-[6px] text-[14px] leading-[16px] text-[rgba(0,0,0,0.4) cursor-pointer hover:text-brand">
-          {totalCommentReply}
+          {userCollectCount}
         </p>
       </div>
     </div>
diff --git a/src/components/Journal/HotJournalCard.tsx b/src/components/Journal/JournalRecommendCard.tsx
similarity index 76%
rename from src/components/Journal/HotJournalCard.tsx
rename to src/components/Journal/JournalRecommendCard.tsx
index ee90450..b0320ac 100644
--- a/src/components/Journal/HotJournalCard.tsx
+++ b/src/components/Journal/JournalRecommendCard.tsx
@@ -1,6 +1,6 @@
 import Image from 'next/image';
 
-export default function JournalItem({ title, image, totalCommentReply }: JournalInfo) {
+export default function JournalRecommendCard({ title, image, userCollectCount }: JournalInfo) {
   return (
     <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]" />{' '}
@@ -8,7 +8,7 @@ export default function JournalItem({ title, image, totalCommentReply }: Journal
         <p className="w-[200px] text-[15px] leading-[21px] cursor-pointer group-hover:text-brand overflow-hidden whitespace-nowrap truncate">
           {title}
         </p>
-        <p className="text-[13px] leading-[18.2px] cursor-pointer group-hover:text-brand">{`${totalCommentReply}人收藏`}</p>
+        <p className="text-[13px] leading-[18.2px] cursor-pointer group-hover:text-brand">{`${userCollectCount}人收藏`}</p>
       </div>
     </div>
   );
diff --git a/src/components/Journal/JournalRecommendList.tsx b/src/components/Journal/JournalRecommendList.tsx
new file mode 100644
index 0000000..6d6458f
--- /dev/null
+++ b/src/components/Journal/JournalRecommendList.tsx
@@ -0,0 +1,27 @@
+import Link from 'next/link';
+
+import JournalRecommendCard from './JournalRecommendCard';
+
+interface Props {
+  list: JournalInfo[];
+}
+
+const JournalRecommendList = async ({ list }: Props) => {
+  return (
+    <div className="flex flex-col">
+      {/* 分类 & 电台 */}
+      <div className="text-[17px] leading-[23.8px]">热门推荐</div>
+      {/* 期刊 list */}
+      <div className="flex flex-col gap-[30px] mt-[17px]">
+        {!!list?.length &&
+          list.map((item: JournalInfo) => (
+            <Link key={item.id} href={`/vol/${item.journalNo}`}>
+              <JournalRecommendCard key={item.id} {...item} />
+            </Link>
+          ))}
+      </div>
+    </div>
+  );
+};
+
+export default JournalRecommendList;
diff --git a/src/components/index.ts b/src/components/index.ts
index 36aacd1..4b82202 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -14,8 +14,8 @@ export { default as LoginForm } from './Login/LoginForm';
 export { default as JournalItem } from './Journal/JournalItem';
 export { default as JournalCard } from './Journal/JournalCard';
 export { default as JournalList } from './Journal/JournalList';
-export { default as HotJournalCard } from './Journal/HotJournalCard';
-export { default as HotJournalList } from './Journal/HotJournalList';
+export { default as JournalRecommendCard } from './Journal/JournalRecommendCard';
+export { default as JournalRecommendList } from './Journal/JournalRecommendList';
 
 // Common
 export { default as Input } from './common/Input';
diff --git a/src/services/server/journal.ts b/src/services/server/journal.ts
index 01267cc..879f5f1 100644
--- a/src/services/server/journal.ts
+++ b/src/services/server/journal.ts
@@ -36,7 +36,7 @@ export const apiJournalList: (params: {
 /**
  * @description 查询标签信息
  */
-export const apiSearchCategory: () => Promise<FetchResponse<Category[]>> = async () => {
+export const apiSearchCategoryList: () => Promise<FetchResponse<Category[]>> = async () => {
   const request = new Request('http://localhost', {
     method: 'GET',
     headers: {
@@ -47,17 +47,33 @@ export const apiSearchCategory: () => Promise<FetchResponse<Category[]>> = async
   return res;
 };
 
+/**
+ * @description 根据收藏数推荐8期
+ * @id 期刊号
+ */
+export const apiGetJournalRecommendWithCollect: () => Promise<FetchResponse<JournalInfo[]>> = async () => {
+  const request = new Request('http://localhost', {
+    method: 'GET',
+    headers: {
+      requestUrl: `/music/journal/recommend`,
+    },
+  });
+  const res = await serverHttp.get(request);
+  return res;
+};
+
 /**
  * @description 根据当前期刊的期刊号推荐6期类似期刊
  * @id 期刊号
  */
-export const apiJournalRecommend: (params: { id: string }) => Promise<FetchResponse<JournalInfo[]>> = async ({
-  id,
-}) => {
+export const apiGetJournalRecommendById: (params: {
+  id: string;
+  limit: number;
+}) => Promise<FetchResponse<JournalInfo[]>> = async ({ id, limit }) => {
   const request = new Request('http://localhost', {
     method: 'GET',
     headers: {
-      requestUrl: `/music/journal/recommend/${id}`,
+      requestUrl: `/music/journal/recommend/${id}/${limit}`,
     },
   });
   const res = await serverHttp.get(request);
diff --git a/src/types/reqeust.d.ts b/src/types/reqeust.d.ts
index d47632d..8bf4ed1 100644
--- a/src/types/reqeust.d.ts
+++ b/src/types/reqeust.d.ts
@@ -85,6 +85,8 @@ declare interface JournalInfo {
   totalCommentReply: string;
   /** 期刊总评论数 int */
   totalCommentReplyInt: number;
+  /** 期刊总收藏数 int */
+  userCollectCount: number;
 }
 
 /**