diff --git a/config/routes.ts b/config/routes.ts
index a62e8b42..7898e241 100644
--- a/config/routes.ts
+++ b/config/routes.ts
@@ -114,7 +114,7 @@ export default [
         selectedIcon: 'icon-rocket-launch-fill',
         defaultIcon: 'icon-rocket-launch1',
         access: 'canSeeAdmin',
-        component: './llmodels/index'
+        component: './llmodels/deployments'
       },
       {
         name: 'routes',
diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx
index 64cdb609..ad8be339 100644
--- a/src/layouts/index.tsx
+++ b/src/layouts/index.tsx
@@ -47,6 +47,7 @@ const NO_CONTAINER_PAGES = [
   'clusterDetail',
   'clusterCreate',
   'benchmarkDetail',
+  'deployment',
   'video'
 ];
 
diff --git a/src/pages/llmodels/deployments.tsx b/src/pages/llmodels/deployments.tsx
new file mode 100644
index 00000000..62764e33
--- /dev/null
+++ b/src/pages/llmodels/deployments.tsx
@@ -0,0 +1,70 @@
+import IconFont from '@/components/icon-font';
+import { PageContainerInner } from '@/pages/_components/page-box';
+import { useIntl } from '@umijs/max';
+import { Segmented, Tabs } from 'antd';
+import { useMemo, useState } from 'react';
+import ModelView from './index';
+import InstanceView from './instance-view';
+
+const TabsValueMap = {
+  ModelView: 'modelView',
+  InstanceView: 'instanceView'
+};
+
+const Playground: React.FC = () => {
+  const intl = useIntl();
+  const [activeKey, setActiveKey] = useState(TabsValueMap.ModelView);
+
+  const header = useMemo(() => {
+    return {
+      title: (
+        <div className="flex items-center">
+          <span className="font-600">
+            {intl.formatMessage({ id: 'menu.models.deployment' })}
+          </span>
+          <Segmented
+            options={[
+              {
+                label: 'Model View',
+                value: TabsValueMap.ModelView,
+                icon: <IconFont type={'icon-models'}></IconFont>
+              },
+              {
+                label: 'Instance View',
+                value: TabsValueMap.InstanceView,
+                icon: <IconFont type={'icon-database'}></IconFont>
+              }
+            ]}
+            size="middle"
+            className="m-l-24 font-600"
+            value={activeKey}
+            onChange={(key) => setActiveKey(key)}
+          ></Segmented>
+        </div>
+      )
+    };
+  }, [activeKey, intl]);
+
+  return (
+    <PageContainerInner header={header}>
+      <Tabs
+        renderTabBar={() => <></>}
+        items={[
+          {
+            key: TabsValueMap.ModelView,
+            label: 'Model View',
+            children: <ModelView></ModelView>
+          },
+          {
+            key: TabsValueMap.InstanceView,
+            label: 'Instance View',
+            children: <InstanceView></InstanceView>
+          }
+        ]}
+        activeKey={activeKey}
+      ></Tabs>
+    </PageContainerInner>
+  );
+};
+
+export default Playground;
diff --git a/src/pages/llmodels/instance-view/index.tsx b/src/pages/llmodels/instance-view/index.tsx
new file mode 100644
index 00000000..d3f9ebfd
--- /dev/null
+++ b/src/pages/llmodels/instance-view/index.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const InstanceView: React.FC = () => {
+  return <div>InstanceView</div>;
+};
+
+export default InstanceView;
diff --git a/src/pages/playground/style/content-item.less b/src/pages/playground/style/content-item.less
index 6c0bdad9..326ad075 100644
--- a/src/pages/playground/style/content-item.less
+++ b/src/pages/playground/style/content-item.less
@@ -25,7 +25,7 @@
     position: relative;
     padding: 0 4px;
     border-radius: var(--border-radius-mini);
-    font-weight: var(--font-weight-500);
+    color: var(--ant-color-text-tertiary);
   }
 
   .actions {