diff --git a/web/src/components/custom/TheIconLocal.vue b/web/src/components/custom/TheIconLocal.vue
new file mode 100644
index 00000000..ede18555
--- /dev/null
+++ b/web/src/components/custom/TheIconLocal.vue
@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import { renderLocalIcon } from '@/utils'
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'app',
+  size: 14,
+  color: undefined
+})
+
+interface Props {
+  type: string
+  icon: string
+  size?: number
+  color?: string
+}
+</script>
+
+<template>
+  <component
+    :is="renderLocalIcon(props.type, props.icon, { size: props.size, color: props.color })"
+  />
+</template>
diff --git a/web/src/views/app/AppView.vue b/web/src/views/app/AppView.vue
index b04b41db..5a5d3be8 100644
--- a/web/src/views/app/AppView.vue
+++ b/web/src/views/app/AppView.vue
@@ -102,7 +102,7 @@ const columns: any = [
                 NButton,
                 {
                   size: 'small',
-                  type: 'success',
+                  type: 'info',
                   onClick: () => handleManage(row.slug)
                 },
                 {
@@ -146,7 +146,7 @@ const columns: any = [
                 NButton,
                 {
                   size: 'small',
-                  type: 'info',
+                  type: 'success',
                   onClick: () => {
                     versionModalShow.value = true
                     versionModalOperation.value = $gettext('Install')
diff --git a/web/src/views/app/EnvironmentView.vue b/web/src/views/app/EnvironmentView.vue
index 2c40c8f2..e6c2bc7c 100644
--- a/web/src/views/app/EnvironmentView.vue
+++ b/web/src/views/app/EnvironmentView.vue
@@ -86,7 +86,7 @@ const columns: any = [
                 NButton,
                 {
                   size: 'small',
-                  type: 'success'
+                  type: 'info'
                   //onClick: () => handleManage(row.slug)
                 },
                 {
@@ -138,7 +138,7 @@ const columns: any = [
                       NButton,
                       {
                         size: 'small',
-                        type: 'primary'
+                        type: 'success'
                       },
                       {
                         default: () => $gettext('Install')
diff --git a/web/src/views/apps/openresty/route.ts b/web/src/views/apps/openresty/route.ts
new file mode 100644
index 00000000..c531d659
--- /dev/null
+++ b/web/src/views/apps/openresty/route.ts
@@ -0,0 +1,22 @@
+import type { RouteType } from '~/types/router'
+
+const Layout = () => import('@/layout/IndexView.vue')
+
+export default {
+  name: 'openresty',
+  path: '/apps/openresty',
+  component: Layout,
+  isHidden: true,
+  children: [
+    {
+      name: 'apps-openresty-index',
+      path: '',
+      component: () => import('../nginx/IndexView.vue'),
+      meta: {
+        title: 'OpenResty',
+        role: ['admin'],
+        requireAuth: true
+      }
+    }
+  ]
+} as RouteType
diff --git a/web/src/views/home/IndexView.vue b/web/src/views/home/IndexView.vue
index 60bc8fea..f62e2d2f 100644
--- a/web/src/views/home/IndexView.vue
+++ b/web/src/views/home/IndexView.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import TheIconLocal from '@/components/custom/TheIconLocal.vue'
+
 defineOptions({
   name: 'home-index'
 })
@@ -459,7 +461,7 @@ if (import.meta.hot) {
           <n-flex v-if="realtime" size="large">
             <n-popover placement="bottom" trigger="hover">
               <template #trigger>
-                <n-flex vertical flex items-center p-20 pl-40 pr-40>
+                <n-flex vertical p-20 pl-40 pr-40 flex items-center>
                   <p>{{ $gettext('Load Status') }}</p>
                   <n-progress
                     type="dashboard"
@@ -498,7 +500,7 @@ if (import.meta.hot) {
             </n-popover>
             <n-popover placement="bottom" trigger="hover">
               <template #trigger>
-                <n-flex vertical flex items-center p-20 pl-40 pr-40>
+                <n-flex vertical p-20 pl-40 pr-40 flex items-center>
                   <p>CPU</p>
                   <n-progress
                     type="dashboard"
@@ -534,7 +536,7 @@ if (import.meta.hot) {
             </n-popover>
             <n-popover placement="bottom" trigger="hover">
               <template #trigger>
-                <n-flex vertical flex items-center p-20 pl-40 pr-40>
+                <n-flex vertical p-20 pl-40 pr-40 flex items-center>
                   <p>{{ $gettext('Memory') }}</p>
                   <n-progress
                     type="dashboard"
@@ -694,7 +696,7 @@ if (import.meta.hot) {
                     v-if="!appLoading"
                     x-gap="12"
                     y-gap="12"
-                    cols="3 s:1 m:2 l:3"
+                    cols="4 s:1 m:2 l:3 xl:4 2xl:4"
                     item-responsive
                     responsive="screen"
                     p-10
@@ -711,7 +713,7 @@ if (import.meta.hot) {
                           <n-thing>
                             <template #avatar>
                               <div class="mt-8">
-                                <the-icon :size="30" :icon="item.icon" />
+                                <the-icon-local type="app" :size="30" :icon="item.slug" />
                               </div>
                             </template>
                             <template #header>