diff --git a/src/components/Hot.vue b/src/components/Hot.vue
deleted file mode 100644
index 67b0914..0000000
--- a/src/components/Hot.vue
+++ /dev/null
@@ -1,139 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref } from "vue";
-import { ElNotification } from "element-plus";
-import { hotRoom } from "@/services/apis/room";
-import type { RoomList } from "@/types/Room";
-import JoinRoom from "@/views/JoinRoom.vue";
-import { roomStore } from "@/stores/room";
-import { useRouter } from "vue-router";
-
-const router = useRouter();
-const __roomList = ref<RoomList[]>([]);
-const room = roomStore();
-const JoinRoomDialog = ref(false);
-const formData = ref({
-  roomId: "",
-  password: ""
-});
-
-const openJoinRoomDialog = (item: RoomList) => {
-  if (!room.login) {
-    ElNotification({
-      title: "错误",
-      message: "请先登录",
-      type: "error"
-    });
-    router.replace({
-        name: "login",
-        query: {
-          redirect: router.currentRoute.value.fullPath
-        }
-      });
-    return;
-  }
-  formData.value.roomId = item.roomId;
-  JoinRoomDialog.value = true;
-};
-
-const { state: roomList, execute: reqHotRoomList } = hotRoom();
-const totalItems = ref(0);
-const currentPage = ref(1);
-const pageSize = ref(10);
-
-const getRoomList = async (showMsg = false) => {
-  try {
-    await reqHotRoomList({
-      params: {
-        page: currentPage.value,
-        max: pageSize.value
-      }
-    });
-
-    if (roomList.value && roomList.value.list) {
-      totalItems.value = roomList.value.total;
-      __roomList.value = roomList.value.list;
-    }
-
-    showMsg &&
-      ElNotification({
-        title: `更新列表成功`,
-        type: "success"
-      });
-  } catch (err: any) {
-    console.error(err.message);
-    ElNotification({
-      title: "错误",
-      message: err.response.data.error || err.message,
-      type: "error"
-    });
-  }
-};
-
-onMounted(() => {
-  getRoomList();
-});
-</script>
-
-<template>
-  <div class="card mx-auto">
-    <div class="card-title flex flex-wrap justify-between">
-      <div>热度榜</div>
-    </div>
-    <div class="card-body">
-      <el-empty v-if="__roomList.length === 0" description="无房间，去创建一个吧~" />
-      <div
-        v-else
-        v-for="(item, i) in __roomList"
-        :key="i"
-        class="flex max-sm:flex-wrap justify-around m-2 rounded-lg bg-zinc-50 hover:bg-white transition-all dark:bg-zinc-800 hover:dark:bg-neutral-800 w-auto items-center"
-      >
-        <div class="m-auto sm:ml-5 max-sm:mt-5">
-          <b> {{ i + 1 }}</b>
-        </div>
-        <div class="overflow-hidden text-ellipsis p-2 w-full">
-          <b class="block text-base font-semibold truncate"> {{ item["roomName"] }}</b>
-        </div>
-        <div class="overflow-hidden text-ellipsis p-2 text-sm w-full">
-          在线人数：<span :class="item.peopleNum > 0 ? 'text-green-500' : 'text-red-500'">{{
-            item["peopleNum"]
-          }}</span>
-
-          <div>创建者：{{ item.creator }}</div>
-        </div>
-        <div class="flex p-2 w-full justify-between items-center">
-          <el-tag disabled :type="item.needPassword ? 'danger' : 'success'">
-            {{ item.needPassword ? "有密码" : "无密码" }}
-          </el-tag>
-          <button class="btn btn-dense md:ml-2" @click="openJoinRoomDialog(item)">
-            加入房间
-            <PlayIcon class="inline-block" width="18px" />
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <div class="card-footer justify-between flex-wrap overflow-hidden">
-      <button class="btn btn-success max-sm:mb-4" @click="getRoomList(true)">更新列表</button>
-      <el-pagination
-        v-if="__roomList.length > 0"
-        v-model:current-page="currentPage"
-        v-model:page-size="pageSize"
-        :pager-count="5"
-        layout="sizes, prev, pager, next, jumper"
-        :total="totalItems"
-        @size-change="getRoomList(false)"
-        @current-change="getRoomList(false)"
-        class="flex-wrap"
-      />
-    </div>
-  </div>
-
-  <el-dialog v-model="JoinRoomDialog" class="rounded-lg dark:bg-zinc-800 w-[443px] max-sm:w-[90%]">
-    <template #header>
-      <div class="overflow-hidden text-ellipsis">
-        <span class="truncate">加入房间</span>
-      </div>
-    </template>
-    <JoinRoom :item="formData" />
-  </el-dialog>
-</template>
diff --git a/src/components/RoomList.vue b/src/components/RoomList.vue
index 139173d..6960f29 100644
--- a/src/components/RoomList.vue
+++ b/src/components/RoomList.vue
@@ -13,6 +13,7 @@ import { getObjValue } from "@/utils";
 const router = useRouter();
 const props = defineProps<{
   isMyRoom: boolean;
+  isHot: boolean;
   userId?: string;
 }>();
 
@@ -41,6 +42,9 @@ const {
   getMyRoomList,
   myRoomList,
 
+  getHotRoomList,
+  hotRoomList,
+
   joinRoom
 } = useRoomApi(formData.value.roomId);
 
@@ -48,6 +52,9 @@ const getRoomList = async (showMsg = false) => {
   if (props.isMyRoom) {
     await getMyRoomList(showMsg);
     if (myRoomList.value) thisRoomList.value = myRoomList.value.list!;
+  } else if (props.isHot) {
+    await getHotRoomList(showMsg);
+    if (hotRoomList.value) thisRoomList.value = hotRoomList.value.list!;
   } else {
     await getRoomList_();
     if (roomList.value) thisRoomList.value = roomList.value.list!;
@@ -88,9 +95,9 @@ onMounted(() => {
   <div class="card mx-auto">
     <div class="card-title flex flex-wrap justify-between items-center">
       <div class="max-sm:mb-3">
-        {{ isMyRoom ? "我创建的" : "房间列表" }}（{{ thisRoomList.length }}）
+        {{ isMyRoom ? "我创建的" : isHot ? "热度榜" : "房间列表" }}（{{ thisRoomList.length }}）
       </div>
-      <div class="text-base -my-2">
+      <div class="text-base -my-2" v-if="!isHot">
         排序方式：<el-select
           v-model="sort"
           class="m-2"
@@ -111,7 +118,7 @@ onMounted(() => {
         </button>
       </div>
     </div>
-    <div class="card-body text-center">
+    <div class="card-body" :class="{ 'text-center': !isHot }">
       <div class="m-auto w-96 mb-3 flex" v-if="isMyRoom">
         <el-select
           v-model="status"
@@ -141,8 +148,38 @@ onMounted(() => {
         </el-input>
       </div>
 
-      <div class="flex flex-wrap justify-center">
+      <div :class="isHot ? '' : 'flex flex-wrap justify-center'">
         <el-empty v-if="thisRoomList.length === 0" description="啥都没有哦~" />
+        <div
+          v-else-if="isHot"
+          v-for="(item, i) in thisRoomList"
+          :key="i"
+          class="flex max-sm:flex-wrap justify-around m-2 rounded-lg bg-zinc-50 hover:bg-white transition-all dark:bg-zinc-800 hover:dark:bg-neutral-800 w-auto items-center"
+        >
+          <div class="m-auto sm:ml-5 max-sm:mt-5">
+            <b> {{ i + 1 }}</b>
+          </div>
+          <div class="overflow-hidden text-ellipsis p-2 w-full">
+            <b class="block text-base font-semibold truncate"> {{ item["roomName"] }}</b>
+          </div>
+          <div class="overflow-hidden text-ellipsis p-2 text-sm w-full">
+            在线人数：<span :class="item.peopleNum > 0 ? 'text-green-500' : 'text-red-500'">{{
+              item["peopleNum"]
+            }}</span>
+
+            <div>创建者：{{ item.creator }}</div>
+          </div>
+          <div class="flex p-2 w-full justify-between items-center">
+            <el-tag disabled :type="item.needPassword ? 'danger' : 'success'">
+              {{ item.needPassword ? "有密码" : "无密码" }}
+            </el-tag>
+            <button class="btn btn-dense md:ml-2" @click="joinThisRoom(item)">
+              加入房间
+              <PlayIcon class="inline-block" width="18px" />
+            </button>
+          </div>
+        </div>
+
         <div
           v-else
           v-for="item in thisRoomList"
diff --git a/src/hooks/useRoom.ts b/src/hooks/useRoom.ts
index 87d3cdd..9390f9a 100644
--- a/src/hooks/useRoom.ts
+++ b/src/hooks/useRoom.ts
@@ -4,11 +4,11 @@ import { userStore } from "@/stores/user";
 import router from "@/router";
 import { myRoomListApi } from "@/services/apis/user";
 import { userRoomListApi } from "@/services/apis/admin";
-import { joinRoomApi, checkRoomApi, roomListApi } from "@/services/apis/room";
+import { joinRoomApi, checkRoomApi, roomListApi, hotRoom } from "@/services/apis/room";
 import { strLengthLimit } from "@/utils";
 
 // 获取用户信息
-const { isLogin, info, token } = userStore();
+const { info, token } = userStore();
 
 export const useRoomApi = (roomId: string) => {
   // 检查房间状态
@@ -113,7 +113,7 @@ export const useRoomApi = (roomId: string) => {
 
       showMsg &&
         ElNotification({
-          title: `更新列表成功`,
+          title: "更新列表成功",
           type: "success"
         });
     } catch (err: any) {
@@ -151,7 +151,7 @@ export const useRoomApi = (roomId: string) => {
 
       showMsg &&
         ElNotification({
-          title: `更新列表成功`,
+          title: "更新列表成功",
           type: "success"
         });
     } catch (err: any) {
@@ -194,7 +194,7 @@ export const useRoomApi = (roomId: string) => {
 
       showMsg &&
         ElNotification({
-          title: `更新列表成功`,
+          title: "更新列表成功",
           type: "success"
         });
     } catch (err: any) {
@@ -207,6 +207,35 @@ export const useRoomApi = (roomId: string) => {
     }
   };
 
+  // 热度榜
+  const { state: hotRoomList, execute: reqHotRoomList } = hotRoom();
+  const getHotRoomList = async (showMsg = false) => {
+    try {
+      await reqHotRoomList({
+        params: {
+          page: currentPage.value,
+          max: pageSize.value
+        }
+      });
+
+      if (hotRoomList.value) {
+        totalItems.value = hotRoomList.value.total;
+      }
+
+      showMsg &&
+        ElNotification({
+          title: "更新列表成功",
+          type: "success"
+        });
+    } catch (err: any) {
+      console.error(err.message);
+      ElNotification({
+        title: "错误",
+        message: err.response.data.error || err.message,
+        type: "error"
+      });
+    }
+  };
   return {
     checkRoom,
     thisRoomInfo,
@@ -230,6 +259,9 @@ export const useRoomApi = (roomId: string) => {
 
     getUserRoomList,
     userRoomList,
-    userRoomListLoading
+    userRoomListLoading,
+
+    getHotRoomList,
+    hotRoomList
   };
 };
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 53f48a5..8a961e8 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Hot from "@/components/Hot.vue";
+import RoomList from "@/components/RoomList.vue";
 </script>
 
 <template>
@@ -7,7 +7,7 @@ import Hot from "@/components/Hot.vue";
     <h1 class="text-3xl">首页</h1>
     <br />
     <div class="xl:w-6/12 lg:w-7/12 md:w-9/12 mx-auto">
-      <Hot />
+      <RoomList :is-my-room="false" :is-hot="true" />
     </div>
     <br />
     <p>