diff --git a/frontend/src/routers/modules/ai.ts b/frontend/src/routers/modules/ai.ts
index 39bc711504b5..5faf024792a6 100644
--- a/frontend/src/routers/modules/ai.ts
+++ b/frontend/src/routers/modules/ai.ts
@@ -1,5 +1,14 @@
 import { Layout } from '@/routers/constant';
 
+const vllmModules = import.meta.glob('@/xpack/views/vllm/index.vue');
+const loadVllmView = () => {
+    const loader = vllmModules['/src/xpack/views/vllm/index.vue'];
+    if (loader) {
+        return loader();
+    }
+    return import('@/views/ai/model/vllm/index.vue');
+};
+
 const databaseRouter = {
     sort: 4,
     path: '/ai',
@@ -67,7 +76,7 @@ const databaseRouter = {
             path: '/ai/model/vllm',
             hidden: true,
             name: 'Vllm',
-            component: () => import('@/xpack/views/vllm/index.vue'),
+            component: loadVllmView,
             meta: {
                 title: 'vLLM',
                 activeMenu: '/ai/model/ollama',
diff --git a/frontend/src/views/ai/model/vllm/index.vue b/frontend/src/views/ai/model/vllm/index.vue
new file mode 100644
index 000000000000..af0d870ce281
--- /dev/null
+++ b/frontend/src/views/ai/model/vllm/index.vue
@@ -0,0 +1,101 @@
+<template>
+    <div>
+        <RouterMenu />
+        <LayoutContent title="vLLM">
+            <template #leftToolBar>
+                <el-button type="primary" @click="goLicense">
+                    {{ $t('license.levelUpPro') }}
+                </el-button>
+            </template>
+            <template #prompt>
+                <el-alert type="info" :closable="false">
+                    <template #title>
+                        <span>{{ $t('license.vllm') }}</span>
+                    </template>
+                </el-alert>
+            </template>
+            <template #main>
+                <div class="vllm-placeholder">
+                    <div class="vllm-placeholder__intro">
+                        <div class="vllm-placeholder__title">{{ $t('license.introduce') }}</div>
+                        <div class="vllm-placeholder__desc">{{ $t('license.vllm') }}</div>
+                    </div>
+                    <el-row :gutter="16">
+                        <el-col v-for="item in features" :key="item.title" :xs="24" :sm="12" :xl="6">
+                            <el-card class="feature-card" shadow="hover">
+                                <template #header>
+                                    <div class="feature-card__header">
+                                        <svg-icon class="feature-card__icon" :iconName="item.icon" />
+                                        <span>{{ $t(item.title) }}</span>
+                                    </div>
+                                </template>
+                                <div class="feature-card__content">{{ $t(item.content) }}</div>
+                            </el-card>
+                        </el-col>
+                    </el-row>
+                </div>
+            </template>
+        </LayoutContent>
+    </div>
+</template>
+
+<script setup lang="ts">
+import RouterMenu from '@/views/ai/model/router-menu.vue';
+import { routerToName } from '@/utils/router';
+
+const features = [
+    { icon: 'p-ai-1', title: 'xpack.helper.vllmTitle1', content: 'xpack.helper.vllmContent1' },
+    { icon: 'p-ai-2', title: 'xpack.helper.vllmTitle2', content: 'xpack.helper.vllmContent2' },
+    { icon: 'p-ai-3', title: 'xpack.helper.vllmTitle3', content: 'xpack.helper.vllmContent3' },
+    { icon: 'p-ai-4', title: 'xpack.helper.vllmTitle4', content: 'xpack.helper.vllmContent4' },
+];
+
+const goLicense = () => {
+    routerToName('License');
+};
+</script>
+
+<style scoped lang="scss">
+.vllm-placeholder {
+    padding-bottom: 16px;
+}
+
+.vllm-placeholder__intro {
+    max-width: 760px;
+    margin-bottom: 20px;
+}
+
+.vllm-placeholder__title {
+    font-size: 28px;
+    font-weight: 500;
+    line-height: 1.4;
+}
+
+.vllm-placeholder__desc {
+    margin-top: 12px;
+    color: var(--el-text-color-regular);
+    line-height: 1.7;
+}
+
+.feature-card {
+    height: 100%;
+    border: var(--panel-border);
+}
+
+.feature-card__header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 16px;
+    font-weight: 500;
+}
+
+.feature-card__icon {
+    font-size: 18px;
+}
+
+.feature-card__content {
+    color: var(--el-text-color-regular);
+    line-height: 1.7;
+}
+</style>