diff --git a/internal/service/app.go b/internal/service/app.go
index 52594303..3b9a3300 100644
--- a/internal/service/app.go
+++ b/internal/service/app.go
@@ -47,6 +47,7 @@ func (s *AppService) List(w http.ResponseWriter, r *http.Request) {
 			show = installedAppMap[item.Slug].Show
 		}
 		apps = append(apps, types.AppCenter{
+			Icon:        item.Icon,
 			Name:        item.Name,
 			Description: item.Description,
 			Slug:        item.Slug,
diff --git a/web/src/views/app/IndexView.vue b/web/src/views/app/IndexView.vue
index e226513c..f3cfb8fe 100644
--- a/web/src/views/app/IndexView.vue
+++ b/web/src/views/app/IndexView.vue
@@ -4,6 +4,7 @@ import VersionModal from '@/views/app/VersionModal.vue'
 import { NButton, NDataTable, NPopconfirm, NSwitch } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 
+import TheIcon from '@/components/custom/TheIcon.vue'
 import { router } from '@/router'
 import { renderIcon } from '@/utils'
 import type { App } from '@/views/app/types'
@@ -16,7 +17,18 @@ const versionModalOperation = ref('安装')
 const versionModalInfo = ref<App>({} as App)
 
 const columns: any = [
-  { type: 'selection', fixed: 'left' },
+  {
+    key: 'icon',
+    fixed: 'left',
+    width: 80,
+    align: 'center',
+    render(row: any) {
+      return h(TheIcon, {
+        icon: row.icon,
+        size: 24
+      })
+    }
+  },
   {
     title: t('appIndex.columns.name'),
     key: 'name',
diff --git a/web/src/views/apps/frp/route.ts b/web/src/views/apps/frp/route.ts
index d655b64d..f663fe6e 100644
--- a/web/src/views/apps/frp/route.ts
+++ b/web/src/views/apps/frp/route.ts
@@ -14,7 +14,7 @@ export default {
       component: () => import('./IndexView.vue'),
       meta: {
         title: 'Frp',
-        icon: 'mdi:virtual-private-network',
+        icon: 'icon-park-outline:connection-box',
         role: ['admin'],
         requireAuth: true
       }
diff --git a/web/src/views/apps/gitea/route.ts b/web/src/views/apps/gitea/route.ts
index 5a29ef18..90690cd8 100644
--- a/web/src/views/apps/gitea/route.ts
+++ b/web/src/views/apps/gitea/route.ts
@@ -14,7 +14,7 @@ export default {
       component: () => import('./IndexView.vue'),
       meta: {
         title: 'Gitea',
-        icon: 'mdi:git',
+        icon: 'simple-icons:gitea',
         role: ['admin'],
         requireAuth: true
       }
diff --git a/web/src/views/apps/mysql/route.ts b/web/src/views/apps/mysql/route.ts
index 79b86c73..d0d629cc 100644
--- a/web/src/views/apps/mysql/route.ts
+++ b/web/src/views/apps/mysql/route.ts
@@ -14,7 +14,7 @@ export default {
       component: () => import('./IndexView.vue'),
       meta: {
         title: 'Percona（MySQL）',
-        icon: 'mdi:database',
+        icon: 'logos:percona',
         role: ['admin'],
         requireAuth: true
       }
diff --git a/web/src/views/apps/nginx/route.ts b/web/src/views/apps/nginx/route.ts
index b2dab575..b6dabc27 100644
--- a/web/src/views/apps/nginx/route.ts
+++ b/web/src/views/apps/nginx/route.ts
@@ -14,7 +14,7 @@ export default {
       component: () => import('./IndexView.vue'),
       meta: {
         title: 'OpenResty（Nginx）',
-        icon: 'mdi:server-network',
+        icon: 'logos:nginx',
         role: ['admin'],
         requireAuth: true
       }
diff --git a/web/src/views/apps/php74/route.ts b/web/src/views/apps/php74/route.ts
deleted file mode 100644
index 50d19a7c..00000000
--- a/web/src/views/apps/php74/route.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { RouteType } from '~/types/router'
-
-const Layout = () => import('@/layout/IndexView.vue')
-
-export default {
-  name: 'php74',
-  path: '/apps/php74',
-  component: Layout,
-  isHidden: true,
-  children: [
-    {
-      name: 'apps-php74-index',
-      path: '',
-      component: () => import('../php/IndexView.vue'),
-      meta: {
-        title: 'PHP 7.4',
-        icon: 'mdi:language-php',
-        role: ['admin'],
-        requireAuth: true,
-        php: 74
-      }
-    }
-  ]
-} as RouteType
diff --git a/web/src/views/apps/php80/route.ts b/web/src/views/apps/php80/route.ts
deleted file mode 100644
index 7e8b0401..00000000
--- a/web/src/views/apps/php80/route.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { RouteType } from '~/types/router'
-
-const Layout = () => import('@/layout/IndexView.vue')
-
-export default {
-  name: 'php80',
-  path: '/apps/php80',
-  component: Layout,
-  isHidden: true,
-  children: [
-    {
-      name: 'apps-php80-index',
-      path: '',
-      component: () => import('../php/IndexView.vue'),
-      meta: {
-        title: 'PHP 8.0',
-        icon: 'mdi:language-php',
-        role: ['admin'],
-        requireAuth: true,
-        php: 80
-      }
-    }
-  ]
-} as RouteType
diff --git a/web/src/views/apps/php81/route.ts b/web/src/views/apps/php81/route.ts
index 99abee03..4e1aab88 100644
--- a/web/src/views/apps/php81/route.ts
+++ b/web/src/views/apps/php81/route.ts
@@ -14,7 +14,7 @@ export default {
       component: () => import('../php/IndexView.vue'),
       meta: {
         title: 'PHP 8.1',
-        icon: 'mdi:language-php',
+        icon: 'logos:php',
         role: ['admin'],
         requireAuth: true,
         php: 81
diff --git a/web/src/views/apps/php82/route.ts b/web/src/views/apps/php82/route.ts
index 104e4e12..1dac38d0 100644
--- a/web/src/views/apps/php82/route.ts
+++ b/web/src/views/apps/php82/route.ts
@@ -14,7 +14,7 @@ export default {
       component: () => import('../php/IndexView.vue'),
       meta: {
         title: 'PHP 8.2',
-        icon: 'mdi:language-php',
+        icon: 'logos:php',
         role: ['admin'],
         requireAuth: true,
         php: 82
diff --git a/web/src/views/apps/php83/route.ts b/web/src/views/apps/php83/route.ts
index 519b78c9..e4f3e43c 100644
--- a/web/src/views/apps/php83/route.ts
+++ b/web/src/views/apps/php83/route.ts
@@ -14,7 +14,7 @@ export default {
       component: () => import('../php/IndexView.vue'),
       meta: {
         title: 'PHP 8.3',
-        icon: 'mdi:language-php',
+        icon: 'logos:php',
         role: ['admin'],
         requireAuth: true,
         php: 83
diff --git a/web/src/views/apps/phpmyadmin/route.ts b/web/src/views/apps/phpmyadmin/route.ts
index 017d7208..cbaf61a7 100644
--- a/web/src/views/apps/phpmyadmin/route.ts
+++ b/web/src/views/apps/phpmyadmin/route.ts
@@ -14,7 +14,7 @@ export default {
       component: () => import('./IndexView.vue'),
       meta: {
         title: 'phpMyAdmin',
-        icon: 'mdi:database',
+        icon: 'simple-icons:phpmyadmin',
         role: ['admin'],
         requireAuth: true
       }
diff --git a/web/src/views/apps/podman/route.ts b/web/src/views/apps/podman/route.ts
index 9ea023c4..878096ad 100644
--- a/web/src/views/apps/podman/route.ts
+++ b/web/src/views/apps/podman/route.ts
@@ -14,7 +14,7 @@ export default {
       component: () => import('./IndexView.vue'),
       meta: {
         title: 'Podman',
-        icon: 'mdi:cup-outline',
+        icon: 'devicon:podman',
         role: ['admin'],
         requireAuth: true
       }
diff --git a/web/src/views/apps/postgresql/route.ts b/web/src/views/apps/postgresql/route.ts
index 96515f91..6fd7a018 100644
--- a/web/src/views/apps/postgresql/route.ts
+++ b/web/src/views/apps/postgresql/route.ts
@@ -14,7 +14,7 @@ export default {
       component: () => import('./IndexView.vue'),
       meta: {
         title: 'PostgreSQL',
-        icon: 'mdi:database',
+        icon: 'logos:postgresql',
         role: ['admin'],
         requireAuth: true
       }
diff --git a/web/src/views/apps/redis/route.ts b/web/src/views/apps/redis/route.ts
index 1592391a..2bc3e036 100644
--- a/web/src/views/apps/redis/route.ts
+++ b/web/src/views/apps/redis/route.ts
@@ -14,7 +14,7 @@ export default {
       component: () => import('./IndexView.vue'),
       meta: {
         title: 'Redis',
-        icon: 'mdi:database',
+        icon: 'logos:redis',
         role: ['admin'],
         requireAuth: true
       }
diff --git a/web/src/views/apps/rsync/route.ts b/web/src/views/apps/rsync/route.ts
index aeb63d52..c5904ec1 100644
--- a/web/src/views/apps/rsync/route.ts
+++ b/web/src/views/apps/rsync/route.ts
@@ -14,7 +14,7 @@ export default {
       component: () => import('./IndexView.vue'),
       meta: {
         title: 'Rsync',
-        icon: 'mdi:sync',
+        icon: 'file-icons:rsync',
         role: ['admin'],
         requireAuth: true
       }
diff --git a/web/src/views/home/IndexView.vue b/web/src/views/home/IndexView.vue
index a19047ad..d9cbc547 100644
--- a/web/src/views/home/IndexView.vue
+++ b/web/src/views/home/IndexView.vue
@@ -632,9 +632,9 @@ if (import.meta.hot) {
                         <n-space>
                           <n-thing>
                             <template #avatar>
-                              <n-avatar class="mt-4">
-                                <TheIcon :size="24" icon="mdi:package-variant-closed" />
-                              </n-avatar>
+                              <div class="mt-8">
+                                <TheIcon :size="30" :icon="item.icon" />
+                              </div>
                             </template>
                             <template #header>
                               {{ item.name }}