diff --git a/frontend/src/views/dashboard/KeyNew.vue b/frontend/src/views/dashboard/KeyNew.vue
index ff2c78e..6c36cb7 100644
--- a/frontend/src/views/dashboard/KeyNew.vue
+++ b/frontend/src/views/dashboard/KeyNew.vue
@@ -60,24 +60,7 @@
                   <button type="button" @click="togglePasswordVisibility" tabindex="-1"
                     class="absolute inset-y-0 left-0 px-3 flex items-center text-base-content/60 hover:text-base-content/80 focus:outline-none focus:ring-0 rounded-r-md"
                     id="password-visibility-toggle">
-                    <template v-if="newApiKey.type === 'openai'">
-                      <img src="../../assets/openai.svg" class="w-5 h-5" alt="">
-                    </template>
-                    <template v-else-if="newApiKey.type === 'claude'">
-                      <img src="../../assets/claude.svg" class="w-5 h-5" alt="">
-                    </template>
-                    <template v-else-if="newApiKey.type === 'gemini'">
-                      <img src="../../assets/gemini.svg" class="w-5 h-5" alt="">
-                    </template>
-                    <template v-else-if="newApiKey.type ==='azure'">
-                      <img src="../../assets/azure.svg" class="w-5 h-5" alt="">
-                    </template>
-                    <template v-else-if="newApiKey.type ==='github'">
-                      <img src="../../assets/github.svg" class="w-5 h-5" alt="">
-                    </template>
-                    <template v-else="newApiKey.type">
-                      <img src="../../assets/logo.svg" class="w-5 h-5" alt="">
-                    </template>
+                    <img :src="apiKeyImageUrl(newApiKey.type)" class="w-5 h-5" alt="">
                   </button>
                 </div>
               </div>
@@ -260,6 +243,19 @@ const cancel = () => {
   emit('closeModal', true)
 }
 
+const apiKeyImageMap = {
+  'openai': '/assets/openai.svg',
+  'claude': '/assets/claude.svg',
+  'gemini': '/assets/gemini.svg',
+  'azure': '/assets/azure.svg',
+  'github': '/assets/github.svg'
+  
+};
+
+const apiKeyImageUrl = (keytype) => {
+  return apiKeyImageMap[keytype] || '/assets/logo.svg';
+};
+
 const createApiKey = async () => {
   if (!isFormValid.value) {
     setToast('Please fill in all required fields (Name, Type, API Key).', 'error')
diff --git a/frontend/src/views/dashboard/KeyView.vue b/frontend/src/views/dashboard/KeyView.vue
index d43a0ba..8e92cff 100644
--- a/frontend/src/views/dashboard/KeyView.vue
+++ b/frontend/src/views/dashboard/KeyView.vue
@@ -33,22 +33,13 @@
                     <option value="openai">OpenAI</option>
                     <option value="claude">Claude</option>
                     <option value="gemini">Gemini</option>
+                    <option value="azure">Azure</option>
+                    <option value="github">Github</option>
                     <option value="openai-compatible">OpenAI Compatible</option>
                   </select>
                   <button type="button" class="absolute inset-y-0 left-0 px-3 flex items-center text-base-content/60 hover:text-base-content/80 focus:outline-none focus:ring-0 rounded-r-md"
                     id="password-visibility-toggle">
-                    <template v-if="key.type === 'openai'">
-                      <img src="../../assets/openai.svg" class="w-5 h-5" alt="">
-                    </template>
-                    <template v-else-if="key.type === 'claude'">
-                      <img src="../../assets/claude.svg" class="w-5 h-5" alt="">
-                    </template>
-                    <template v-else-if="key.type === 'gemini'">
-                      <img src="../../assets/gemini.svg" class="w-5 h-5" alt="">
-                    </template>
-                    <template v-else="key.type">
-                      <img src="../../assets/logo.svg" class="w-5 h-5" alt="">
-                    </template>
+                    <img :src="apiKeyImageUrl(key.type)" class="w-5 h-5" alt="">
                   </button>
                 </div>
               </div>
@@ -167,7 +158,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, inject } from 'vue';
+import { ref, computed, onMounted, inject, reactive } from 'vue';
 import { useRoute,useRouter } from 'vue-router';
 import { Eye, EyeOff, BadgeCheck, Send, CircleX, CircleCheckBig, TrashIcon, Infinity } from 'lucide-vue-next';
 import { useKeyStore } from '../../stores/key';
@@ -194,6 +185,27 @@ onMounted(async () => {
   }
 });
 
+const keyOption = reactive([
+  {name: 'openai', label: 'OpenAI'},
+  {name: 'claude', label: 'Claude'},
+  {name: 'gemini', label: 'Gemini'},
+  {name: 'azure', label: 'Azure'},
+  {name: 'github', label: 'Github'},
+  {name: 'openai-compatible', label: 'OpenAI Compatible'}
+])
+
+const apiKeyImageMap = {
+  'openai': '/assets/openai.svg',
+  'claude': '/assets/claude.svg',
+  'gemini': '/assets/gemini.svg',
+  'azure': '/assets/azure.svg',
+  'github': '/assets/github.svg'
+};
+
+const apiKeyImageUrl = (keytype) => {
+  return apiKeyImageMap[keytype] || '/assets/logo.svg';
+};
+
 const onchange_supportmodel = () => {
   key.value.support_models = JSON.stringify(key.value.support_models_array)
 }