diff --git a/package.json b/package.json
index b877ede..57db2ab 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "axios": "^1.3.2",
     "cheerio": "^1.0.0-rc.12",
     "moment": "^2.29.4",
+    "nzh": "^1.0.8",
     "vue": "^3.2.41"
   },
   "devDependencies": {
diff --git a/src/App.vue b/src/App.vue
index 7581e88..96ce9c3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,14 +2,18 @@
 import {darkTheme, useOsTheme} from "naive-ui";
 import {computed, ref} from "vue";
 import ReadHub from "./components/ReadHub.vue";
+import WeiboHot from "./components/WeiboHot.vue";
+import UseConfig from "./js/useConfig.js";
 
 export default {
-  components: { ReadHub},
+  components: {WeiboHot, ReadHub},
   setup() {
     const osThemeRef = useOsTheme();
     const loading = ref(false)
+    const {config} = UseConfig()
     return {
       loading,
+      config,
       theme: computed(() => osThemeRef.value === "dark" ? darkTheme : null),
     }
   }
@@ -22,13 +26,14 @@ export default {
       <n-layout position="absolute">
         <n-layout-header style="height: 50px;" bordered>
           <n-space justify="space-between" align="center" style="height: 50px;padding:0 10px">
-            <n-tag checked checkable>ReadHub</n-tag>
+            <n-tag checked checkable>{{ config['source']['title'] }}</n-tag>
           </n-space>
         </n-layout-header>
         <n-layout has-sider position="absolute" style="top: 60px">
           <n-layout content-style="padding: 5px 10px;" :native-scrollbar="false">
             <n-spin :show="loading" style="min-height: 300px">
-              <ReadHub v-model:loading="loading"/>
+              <ReadHub v-if="config['source']['name']==='readhub'" v-model:loading="loading"/>
+              <WeiboHot v-if="config['source']['name']==='weibohot'" v-model:loading="loading"/>
             </n-spin>
           </n-layout>
         </n-layout>
diff --git a/src/components/WeiboHot.vue b/src/components/WeiboHot.vue
new file mode 100644
index 0000000..46ebb62
--- /dev/null
+++ b/src/components/WeiboHot.vue
@@ -0,0 +1,84 @@
+<template>
+  <n-list hoverable clickable>
+    <n-list-item :key="item.uid" v-for="(item,index) in news" align="left"
+                 @click.stop="()=>openOriginLink(item['word_scheme'])">
+      <template #prefix>
+        <n-space justify="center" align="center">
+          <n-tag type="default" round size="small">
+            {{ index + 1 }}
+          </n-tag>
+        </n-space>
+      </template>
+      <n-space vertical>
+        <n-space justify="start" vertical>
+          <div>
+            <n-text class="cursor-pointer">{{ item['word'] }}</n-text>
+          </div>
+        </n-space>
+      </n-space>
+      <template #suffix>
+        <n-space>
+          <n-tag v-if="item['icon_desc']" type="info" size="small"
+                 :color="{textColor:'#ffffff',color:item['icon_desc_color']}">
+            {{ item['icon_desc'] }}
+          </n-tag>
+        </n-space>
+      </template>
+    </n-list-item>
+  </n-list>
+  <DetailDrawer ref="detailDrawer"/>
+</template>
+
+<script>
+import {onMounted, ref} from "vue";
+import axios from "axios";
+import {toDateTimeStr} from "../js/useDate.js";
+import DetailDrawer from "/src/components/DetailDrawer.vue";
+import {OpenInBrowserRound} from "@vicons/material";
+import nzh from "nzh/cn";
+
+export default {
+  name: "WeiboHot",
+  components: {DetailDrawer, OpenInBrowserRound},
+  props: {
+    loading: {type: Boolean, default: false},
+  },
+  emits: ['update:loading'],
+  setup(props, ctx) {
+    // https://api.readhub.cn/topic/list?size=50
+    const news = ref([])
+    const reload = () => {
+      ctx.emit('update:loading', true)
+      axios.get('https://weibo.com/ajax/side/hotSearch')
+          .then(res => {
+            const {realtime: items} = res.data.data
+            news.value = items || []
+          })
+          .finally(() => ctx.emit('update:loading', false))
+    }
+    const detailDrawer = ref()
+    const showContent = (item) => {
+      detailDrawer.value.show({title: item['title'], content: item['summary']})
+    }
+
+    const openOriginLink = (wordScheme) => utools.shellOpenExternal(`https://s.weibo.com/weibo?q=${encodeURIComponent(wordScheme)}`)
+
+    onMounted(reload)
+
+    return {
+      news,
+      toDateTimeStr,
+      detailDrawer,
+      showContent,
+      DetailDrawer,
+      openOriginLink,
+      OpenInBrowserRound,
+      nzh,
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/js/useConfig.js b/src/js/useConfig.js
index baf1f47..0c5d83b 100644
--- a/src/js/useConfig.js
+++ b/src/js/useConfig.js
@@ -1,15 +1,27 @@
 import {ref} from "vue";
 
-function fetchConfig(){
+function fetchConfig() {
 }
 
 export default function () {
     const config = ref({
         source: {
-            name: ''
+            title: '微博热搜',
+            name: 'weibohot',
         },
     })
-    const sources = ref()
+    const sources = ref(
+        [
+            {
+                title: '微博热搜',
+                name: 'weibohot',
+            },
+            {
+                title: 'ReadHub',
+                name: 'readhub',
+            },
+        ]
+    )
 
     return {
         sources,