diff --git a/Yi.Bbs.Vue3/src/assets/box/browsingHistory.svg b/Yi.Bbs.Vue3/src/assets/box/browsingHistory.svg
new file mode 100644
index 00000000..8b8f1e3f
--- /dev/null
+++ b/Yi.Bbs.Vue3/src/assets/box/browsingHistory.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1703517695431" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11623" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M375.9 539.4a132.2 90 0 1 0 264.4 0 132.2 90 0 1 0-264.4 0z" fill="#97D2FF" p-id="11624"></path><path d="M512 211.8c-298.7 0-479.2 304.9-479.2 304.9S241.3 812.2 512 812.2s479.2-295.6 479.2-295.6S810.7 211.8 512 211.8z m299.7 413.6c-96.9 81.8-199.8 133.2-302.8 133.2S303 710.2 206.1 625.4c-33.3-30.3-66.6-60.6-93.9-93.9-6.1-6.1-9.1-12.1-15.1-18.2 3-6.1 9.1-12.1 12.1-18.2 24.2-33.3 54.5-66.6 87.8-96.9C290.9 313.4 393.8 262 508.9 262s218 51.5 311.9 136.2c33.3 30.3 60.6 63.6 87.8 96.9 3 6.1 9.1 12.1 12.1 18.2-3 6.1-9.1 12.1-15.1 18.2-27.4 30.4-57.6 63.8-93.9 93.9z" fill="#30A6FF" p-id="11625"></path><path d="M512 329.9c-93.3 0-164.9 74.7-164.9 164.9 0 93.3 74.7 164.9 164.9 164.9 93.3 0 164.9-74.7 164.9-164.9S602.2 329.9 512 329.9z m0 286.3c-65.3 0-118.3-52.9-118.3-118.3s53-118.2 118.3-118.2S630.3 432.6 630.3 498c0 62.3-53 118.2-118.3 118.2z" fill="#30A6FF" p-id="11626"></path></svg>
\ No newline at end of file
diff --git a/Yi.Bbs.Vue3/src/assets/box/recommend.svg b/Yi.Bbs.Vue3/src/assets/box/recommend.svg
new file mode 100644
index 00000000..7043723b
--- /dev/null
+++ b/Yi.Bbs.Vue3/src/assets/box/recommend.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1703517678226" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9589" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M518.741333 732.5696l331.5712 134.826667V153.770667A17.066667 17.066667 0 0 0 833.28 136.533333H204.7488A17.066667 17.066667 0 0 0 187.733333 153.7536v713.608533l331.008-134.792533zM136.533333 153.770667A68.266667 68.266667 0 0 1 204.7488 85.333333h628.5312a68.266667 68.266667 0 0 1 68.232533 68.420267v721.322667c0 37.7856-28.450133 56.832-63.197866 42.717866l-319.556267-129.9456-319.112533 129.9456C164.795733 931.976533 136.533333 912.9472 136.533333 875.076267V153.7536z" fill="#108EE9" p-id="9590"></path><path d="M458.120533 480.8704l-61.781333-60.2112 85.367467-12.407467 38.178133-77.346133 38.161067 77.346133 85.367466 12.407467-61.781333 60.2112 14.592 85.009067-76.3392-40.1408-76.356267 40.1408 14.592-85.009067z m120.610134-121.344l19.285333 13.994667-5.973333-12.066134-13.312-1.928533z m-136.977067 13.994667l19.285333-13.994667-13.329066 1.928533-5.973334 12.0832z m146.397867 245.9648c35.413333 18.602667 68.317867-5.256533 61.5424-44.714667l-13.038934-76.032 55.2448-53.845333c28.637867-27.921067 16.110933-66.577067-23.5008-72.3456l-76.3392-11.093334-34.133333-69.1712c-17.7152-35.874133-58.368-35.8912-76.0832 0l-34.133333 69.1712-76.3392 11.093334c-39.594667 5.751467-52.1728 44.407467-23.517867 72.362666l55.2448 53.828267-13.038933 76.032c-6.7584 39.424 26.112 63.351467 61.5424 44.714667l68.266666-35.8912 68.283734 35.8912z" fill="#108EE9" p-id="9591"></path></svg>
\ No newline at end of file
diff --git a/Yi.Bbs.Vue3/src/views/home/Index.vue b/Yi.Bbs.Vue3/src/views/home/Index.vue
index fcfd94ae..18ceedd5 100644
--- a/Yi.Bbs.Vue3/src/views/home/Index.vue
+++ b/Yi.Bbs.Vue3/src/views/home/Index.vue
@@ -97,6 +97,18 @@
               </template>
             </InfoCard>
           </el-col>
+          <el-col :span="24">
+            <InfoCard
+              :items="themeList"
+              header="推荐主题"
+              text="更多"
+              height="400"
+            >
+              <template #item="temp">
+                <ThemeData :themeData="temp" />
+              </template>
+            </InfoCard>
+          </el-col>
 
           <el-col :span="24" style="background: transparent">
             <BottomInfo />
@@ -121,9 +133,14 @@ import { getList } from "@/apis/plateApi.js";
 import { getList as bannerGetList } from "@/apis/bannerApi.js";
 import { getHomeDiscuss } from "@/apis/discussApi.js";
 import { getWeek } from "@/apis/accessApi.js";
-import { getRecommendedFriend, getRankingPoints } from "@/apis/analyseApi.js";
+import {
+  getRecommendedTopic,
+  getRecommendedFriend,
+  getRankingPoints,
+} from "@/apis/analyseApi.js";
 import PointsRanking from "./components/PointsRanking/index.vue";
 import RecommendFriend from "./components/RecommendFriend/index.vue";
+import ThemeData from "./components/RecommendTheme/index.vue";
 
 const plateList = ref([]);
 const discussList = ref([]);
@@ -131,6 +148,7 @@ const bannerList = ref([]);
 const weekList = ref([]);
 const pointList = ref([]);
 const friendList = ref([]);
+const themeList = ref([]);
 
 const items = [{ user: "用户1" }, { user: "用户2" }, { user: "用户3" }];
 //主题查询参数
@@ -155,6 +173,8 @@ onMounted(async () => {
   pointList.value = pointData;
   const { data: friendData } = await getRecommendedFriend();
   friendList.value = friendData;
+  const { data: themeData } = await getRecommendedTopic();
+  themeList.value = themeData;
 });
 
 const weekXAxis = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
diff --git a/Yi.Bbs.Vue3/src/views/home/components/RecommendFriend/index.vue b/Yi.Bbs.Vue3/src/views/home/components/RecommendFriend/index.vue
index 22d04c19..b179d577 100644
--- a/Yi.Bbs.Vue3/src/views/home/components/RecommendFriend/index.vue
+++ b/Yi.Bbs.Vue3/src/views/home/components/RecommendFriend/index.vue
@@ -40,8 +40,6 @@ const props = defineProps({
   },
 });
 
-console.log(props.friendData, "friendData");
-
 const statusTypeList = [
   {
     label: "正常",
diff --git a/Yi.Bbs.Vue3/src/views/home/components/RecommendTheme/index.vue b/Yi.Bbs.Vue3/src/views/home/components/RecommendTheme/index.vue
new file mode 100644
index 00000000..120b1b10
--- /dev/null
+++ b/Yi.Bbs.Vue3/src/views/home/components/RecommendTheme/index.vue
@@ -0,0 +1,116 @@
+<template>
+  <div class="theme-box">
+    <div class="left">
+      <div class="icon">
+        <img src="@/assets/box/recommend.svg" alt="" />
+      </div>
+      <div class="text" @click="handleClickTheme(themeData?.id)">
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          :content="themeData.title"
+          placement="top"
+        >
+          #{{ themeData.title }}
+        </el-tooltip>
+      </div>
+    </div>
+    <div class="right">
+      <template v-if="seeNumLength > 4">
+        <div class="icon">
+          <img src="@/assets/box/browsingHistory.svg" alt="" />
+        </div>
+        <div class="text">
+          <el-tooltip
+            class="box-item"
+            effect="dark"
+            :content="themeData.seeNum"
+            placement="top"
+          >
+            <div class="text">{{ themeData.seeNum }}</div>
+          </el-tooltip>
+        </div>
+      </template>
+      <template v-else>
+        <div class="icon">
+          <img src="@/assets/box/browsingHistory.svg" alt="" />
+        </div>
+        <div class="text">{{ themeData.seeNum }}</div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup name="RecommendFriend">
+import { defineProps, ref } from "vue";
+import { useRouter } from "vue-router";
+
+const props = defineProps({
+  themeData: {
+    type: Array,
+    default: () => [],
+  },
+});
+const router = useRouter();
+
+const seeNumLength = ref(props.themeData.seeNum.toString().length);
+
+const handleClickTheme = (id) => {
+  router.push(`/article/${id}`);
+};
+</script>
+
+<style lang="scss">
+.theme-box {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  justify-content: space-around;
+  .left {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    align-items: center;
+
+    .text {
+      font-size: 16px;
+      cursor: pointer;
+      width: 230px;
+      color: #252933;
+      margin-left: 5px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      &:hover {
+        color: #1171ee;
+      }
+    }
+  }
+  .right {
+    width: 25%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    .text {
+      width: 30px;
+      margin-left: 10px;
+      cursor: pointer;
+      color: #252933;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+  .icon {
+    width: 25px;
+    height: 25px;
+    display: flex;
+    align-items: center;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>