diff --git a/web/src/views/app/AllView.vue b/web/src/views/app/AppView.vue
similarity index 100%
rename from web/src/views/app/AllView.vue
rename to web/src/views/app/AppView.vue
diff --git a/web/src/views/app/EnvironmentView.vue b/web/src/views/app/EnvironmentView.vue
new file mode 100644
index 00000000..ea8bac01
--- /dev/null
+++ b/web/src/views/app/EnvironmentView.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <n-empty></n-empty>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/web/src/views/app/IndexView.vue b/web/src/views/app/IndexView.vue
index a307da45..b2066ae6 100644
--- a/web/src/views/app/IndexView.vue
+++ b/web/src/views/app/IndexView.vue
@@ -7,11 +7,13 @@ import { NButton } from 'naive-ui'
 import { useGettext } from 'vue3-gettext'
 
 import app from '@/api/panel/app'
-import AllView from '@/views/app/AllView.vue'
+import AppView from '@/views/app/AppView.vue'
+import EnvironmentView from '@/views/app/EnvironmentView.vue'
+import TemplateView from '@/views/app/TemplateView.vue'
 
 const { $gettext } = useGettext()
 
-const currentTab = ref('all')
+const currentTab = ref('app')
 
 const handleUpdateCache = () => {
   useRequest(app.updateCache()).onSuccess(() => {
@@ -25,15 +27,17 @@ const handleUpdateCache = () => {
     <template #tabbar>
       <div class="flex items-center justify-between">
         <n-tabs v-model:value="currentTab" animated class="flex-1">
-          <n-tab name="all" :tab="$gettext('All')" />
-          <n-tab name="environment" :tab="$gettext('Environment')" />
-          <n-tab name="compose" :tab="$gettext('Compose Templates')" />
+          <n-tab name="app" :tab="$gettext('Native App')" />
+          <n-tab name="environment" :tab="$gettext('Operating Environment')" />
+          <n-tab name="template" :tab="$gettext('Container Template')" />
         </n-tabs>
         <n-button v-if="currentTab != 'installed'" type="primary" @click="handleUpdateCache">
           {{ $gettext('Update Cache') }}
         </n-button>
       </div>
     </template>
-    <all-view v-if="currentTab === 'all'" />
+    <app-view v-if="currentTab === 'app'" />
+    <environment-view v-if="currentTab === 'environment'" />
+    <template-view v-if="currentTab === 'template'" />
   </common-page>
 </template>
diff --git a/web/src/views/app/TemplateView.vue b/web/src/views/app/TemplateView.vue
new file mode 100644
index 00000000..ea8bac01
--- /dev/null
+++ b/web/src/views/app/TemplateView.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <n-empty></n-empty>
+</template>
+
+<style scoped lang="scss"></style>