diff --git a/app.config.ts b/app.config.ts
index d52dc1a671d15e3d852473443922f3f4d3bd25b8..6cd06c13765e7b8bfb00054860c439558c3303be 100644
--- a/app.config.ts
+++ b/app.config.ts
@@ -1,6 +1,6 @@
 export default defineAppConfig({
     ui: {
-        primary: '#ff6600',
+        primary: 'green',
         gray: 'cool'
     }
 })
diff --git a/package-lock.json b/package-lock.json
index 53880a42ab2278ffdaefcc506a39fffe770882f7..27781d33491c3b3e507a565a5680a203a8cc5db1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
       "name": "nuxt-app",
       "hasInstallScript": true,
       "dependencies": {
+        "@iconify-json/simple-icons": "^1.1.101",
         "@nuxt/ui": "^2.16.0",
         "@vite-pwa/nuxt": "^0.7.0",
         "nuxt": "^3.11.2",
@@ -2345,6 +2346,14 @@
         "@iconify/types": "*"
       }
     },
+    "node_modules/@iconify-json/simple-icons": {
+      "version": "1.1.101",
+      "resolved": "https://registry.npmjs.org/@iconify-json/simple-icons/-/simple-icons-1.1.101.tgz",
+      "integrity": "sha512-7h7iUvCok031UcYUt2+wPD21tOwu/AzFB2I2PzzoC3R1jsNJjn5YV3v1q0g2CXcMYAzcsCyH00RbpFPFAiqjcw==",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify/collections": {
       "version": "1.0.421",
       "resolved": "https://registry.npmjs.org/@iconify/collections/-/collections-1.0.421.tgz",
@@ -16705,6 +16714,14 @@
         "@iconify/types": "*"
       }
     },
+    "@iconify-json/simple-icons": {
+      "version": "1.1.101",
+      "resolved": "https://registry.npmjs.org/@iconify-json/simple-icons/-/simple-icons-1.1.101.tgz",
+      "integrity": "sha512-7h7iUvCok031UcYUt2+wPD21tOwu/AzFB2I2PzzoC3R1jsNJjn5YV3v1q0g2CXcMYAzcsCyH00RbpFPFAiqjcw==",
+      "requires": {
+        "@iconify/types": "*"
+      }
+    },
     "@iconify/collections": {
       "version": "1.0.421",
       "resolved": "https://registry.npmjs.org/@iconify/collections/-/collections-1.0.421.tgz",
diff --git a/package.json b/package.json
index c5b1aefd9d463b610f7b2bb35836bcd1556013f9..0ec4905118407ac199d156d53fe2ede49d8d082c 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "@iconify-json/simple-icons": "^1.1.101",
     "@nuxt/ui": "^2.16.0",
     "@vite-pwa/nuxt": "^0.7.0",
     "nuxt": "^3.11.2",
diff --git a/pages/index.vue b/pages/index.vue
index 9df3b397bb7f706b8d2d3c9dbe5b532587518f7b..e9a0bdf895e6c0728b69ee9eb5905cce7d832529 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,13 +1,41 @@
 <template>
     <div class="flex items-center justify-center h-full max-w-full">
-        <div class="max-w-screen-sm w-full">
+        <div class="max-w-screen-sm w-full flex flex-col space-y-4">
             <UTextarea
                 autoresize
                 placeholder="输入搜索内容..."
             />
+            <UDropdown
+                :items="repos"
+                :popper="{ placement: 'bottom-start' }"
+            >
+                <UButton
+                    color="white"
+                    :label="selectedRepo ? selectedRepo : '选择 GitHub 项目'"
+                    trailing-icon="i-heroicons-chevron-down-20-solid"
+                />
+                <template #repo="{ item }">
+                    <div @click="handleSelectRepo(item.label)">{{ item.label }}</div>
+                </template>
+            </UDropdown>
         </div>
     </div>
 </template>
 <script setup>
-
+const repos = [
+    [
+        {
+            label: 'keycloak',
+            slot: 'repo'
+        },
+        {
+            label: 'ViewUIPlus',
+            slot: 'repo'
+        }
+    ]
+]
+const selectedRepo = ref(null)
+const handleSelectRepo = (repo) => {
+    selectedRepo.value = repo;
+}
 </script>