diff --git a/src/views/applications/DatabaseApp/DatabaseAppList.vue b/src/views/applications/DatabaseApp/DatabaseAppList.vue
index 66bd021bd..9750da02e 100644
--- a/src/views/applications/DatabaseApp/DatabaseAppList.vue
+++ b/src/views/applications/DatabaseApp/DatabaseAppList.vue
@@ -11,6 +11,41 @@ export default {
   },
   data() {
     const vm = this
+    const appType = [
+      {
+        name: 'mysql',
+        title: 'MySQL',
+        has: true,
+        group: this.$t('assets.RDBProtocol')
+      },
+      {
+        name: 'postgresql',
+        title: 'PostgreSQL',
+        has: this.$store.getters.hasValidLicense
+      },
+      {
+        name: 'mariadb',
+        title: 'MariaDB',
+        type: 'primary',
+        has: this.$store.getters.hasValidLicense
+      },
+      {
+        name: 'oracle',
+        title: 'Oracle',
+        has: this.$store.getters.hasValidLicense
+      },
+      {
+        name: 'sqlserver',
+        title: 'SQLServer',
+        has: this.$store.getters.hasValidLicense
+      },
+      {
+        name: 'redis',
+        title: 'Redis',
+        has: true,
+        group: this.$t('assets.NoSQLProtocol')
+      }
+    ]
     return {
       tableConfig: {
         url: '/api/v1/applications/applications/?category=db',
@@ -24,8 +59,7 @@ export default {
         },
         columnsMeta: {
           type_display: {
-            label: this.$t('applications.type'),
-            width: '120px'
+            label: this.$t('applications.type')
           },
           'attrs.host': {
             label: this.$t('applications.host'),
@@ -69,50 +103,37 @@ export default {
         hasBulkDelete: true,
         createRoute: 'DatabaseAppCreate',
         searchConfig: {
-          exclude: ['category', 'type']
+          exclude: ['category', 'type'],
+          options: [
+            {
+              value: 'type',
+              label: this.$t('applications.type'),
+              children: this.getAppType(appType)
+            }
+          ]
         },
         moreCreates: {
           callback: (item) => {
             vm.$router.push({ name: 'DatabaseAppCreate', query: { type: item.name.toLowerCase() }})
           },
-          dropdown: [
-            {
-              name: 'MySQL',
-              title: 'MySQL',
-              has: true,
-              group: this.$t('assets.RDBProtocol')
-            },
-            {
-              name: 'PostgreSQL',
-              title: 'PostgreSQL',
-              has: this.$store.getters.hasValidLicense
-            },
-            {
-              name: 'MariaDB',
-              title: 'MariaDB',
-              type: 'primary',
-              has: this.$store.getters.hasValidLicense
-            },
-            {
-              name: 'Oracle',
-              title: 'Oracle',
-              has: this.$store.getters.hasValidLicense
-            },
-            {
-              name: 'SQLServer',
-              title: 'SQLServer',
-              has: this.$store.getters.hasValidLicense
-            },
-            {
-              name: 'Redis',
-              title: 'Redis',
-              has: true,
-              group: this.$t('assets.NoSQLProtocol')
-            }
-          ]
+          dropdown: appType
         }
       }
     }
+  },
+  methods: {
+    getAppType(arr) {
+      const searchAppType = []
+      if (arr.length < 1) return searchAppType
+      arr.forEach((i) => {
+        const option = {
+          value: i.name,
+          label: i.title
+        }
+        searchAppType.push(option)
+      })
+      return searchAppType
+    }
   }
 }
 </script>
diff --git a/src/views/applications/KubernetesApp/KubernetesAppList.vue b/src/views/applications/KubernetesApp/KubernetesAppList.vue
index 628ba7ded..b572a77d3 100644
--- a/src/views/applications/KubernetesApp/KubernetesAppList.vue
+++ b/src/views/applications/KubernetesApp/KubernetesAppList.vue
@@ -15,12 +15,12 @@ export default {
       tableConfig: {
         url: '/api/v1/applications/applications/?category=cloud',
         columns: [
-          'name', 'type', 'attrs.cluster',
+          'name', 'type_display', 'attrs.cluster',
           'created_by', 'date_created', 'date_updated', 'comment', 'org_name', 'actions'
         ],
         columnsShow: {
           min: ['name', 'actions'],
-          default: ['name', 'type', 'attrs.cluster', 'comment', 'actions']
+          default: ['name', 'type_display', 'attrs.cluster', 'comment', 'actions']
         },
         columnsMeta: {
           'attrs.cluster': {
@@ -29,8 +29,8 @@ export default {
           comment: {
             width: '340px'
           },
-          type: {
-            width: '140px'
+          type_display: {
+            label: this.$t('applications.type')
           },
           actions: {
             prop: 'actions',
diff --git a/src/views/applications/RemoteApp/RemoteAppList.vue b/src/views/applications/RemoteApp/RemoteAppList.vue
index ede2da147..9d3733c25 100644
--- a/src/views/applications/RemoteApp/RemoteAppList.vue
+++ b/src/views/applications/RemoteApp/RemoteAppList.vue
@@ -17,17 +17,16 @@ export default {
       tableConfig: {
         url: '/api/v1/applications/applications/?category=remote_app',
         columns: [
-          'name', 'type', 'attrs.asset',
+          'name', 'type_display', 'attrs.asset',
           'created_by', 'date_created', 'date_updated', 'comment', 'org_name', 'actions'
         ],
         columnsShow: {
           min: ['name', 'actions'],
-          default: ['name', 'type', 'attrs.asset', 'comment', 'actions']
+          default: ['name', 'type_display', 'attrs.asset', 'comment', 'actions']
         },
         columnsMeta: {
-          type: {
-            displayKey: 'get_type_display',
-            width: '140px'
+          type_display: {
+            label: this.$t('applications.type')
           },
           'attrs.asset': {
             label: this.$t('assets.Assets'),
@@ -67,7 +66,14 @@ export default {
         hasImport: false,
         // createRoute: 'RemoteAppCreate',
         searchConfig: {
-          exclude: ['category', 'type']
+          exclude: ['category', 'type'],
+          options: [
+            {
+              value: 'type',
+              label: this.$t('applications.type'),
+              children: this.getCreateAppType()
+            }
+          ]
         },
         moreCreates: {
           dropdown: this.getCreateAppType(),
@@ -85,6 +91,8 @@ export default {
         const item = { ...REMOTE_APP_TYPE_META_MAP[value] }
         item.can = true
         item.has = true
+        item.value = item.name
+        item.label = item.title
         extraMoreActions.push(item)
       }
       return extraMoreActions