diff --git a/frontend/src/views/Cluster/MachineDetail/Index.vue b/frontend/src/views/Cluster/MachineDetail/Index.vue
index dda74ac165b0368c7faaaa909c6ea86b4ad75942..a2fc778b161175366ae20f08629274cde786877e 100644
--- a/frontend/src/views/Cluster/MachineDetail/Index.vue
+++ b/frontend/src/views/Cluster/MachineDetail/Index.vue
@@ -7,7 +7,9 @@
             <el-tab-pane name="user" label="用户信息">
                 <User />
             </el-tab-pane>
-            <el-tab-pane name="service" label="服务信息"> 服务信息 </el-tab-pane>
+            <el-tab-pane name="service" label="服务信息">
+                <Service />
+            </el-tab-pane>
             <el-tab-pane name="network" label="网络配置"> 网络配置 </el-tab-pane>
             <el-tab-pane name="systl" label="内核参数"> 内核参数 </el-tab-pane>
             <el-tab-pane name="npm" label="软件包"> 软件包 </el-tab-pane>
@@ -21,6 +23,7 @@ import { ref } from "vue";
 
 import Base from "./Base.vue";
 import User from "./User.vue";
+import Service from "./Service.vue";
 
 const activePane = ref("base")
 
diff --git a/frontend/src/views/Cluster/MachineDetail/Service.vue b/frontend/src/views/Cluster/MachineDetail/Service.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4adca0fd13d35f4def4433190d170f8337784794
--- /dev/null
+++ b/frontend/src/views/Cluster/MachineDetail/Service.vue
@@ -0,0 +1,47 @@
+<template>
+    <div class="content">
+        <div class="services">
+            <el-autocomplete style="width:50%" class="inline-input" v-model="serviceName"
+                placeholder="请输入服务名称"></el-autocomplete>
+            <el-button plain type="primary">搜索</el-button>
+            <el-button plain type="primary">启动</el-button>
+            <el-button plain type="primary">停止</el-button>
+            <el-button plain type="primary">重启</el-button>
+        </div>
+        <div class="info">
+            <div class="detail" v-if="display">
+                <p class="title">服务详情：</p>
+                <el-descriptions :column="2" size="medium" border>
+                    <el-descriptions-item label="服务名"> Name </el-descriptions-item>
+                    <el-descriptions-item label="状态"> Active </el-descriptions-item>
+                    <el-descriptions-item label="模块是否加载"> LOAD </el-descriptions-item>
+                    <el-descriptions-item label="SUB"> SUB </el-descriptions-item>
+                </el-descriptions>
+            </div>
+            <div class="result" v-else>
+                <p class="title">执行结果：</p>
+                <el-descriptions :column="2" size="medium" border>
+                    <el-descriptions-item label="软件包名">serviceName </el-descriptions-item>
+                    <el-descriptions-item label="执行动作">action </el-descriptions-item>
+                    <el-descriptions-item label="结果">
+                        {{ result + ":" }}
+                        <p class="progress" v-show="result != ''">
+                            <span>100%</span>
+                        </p>
+                    </el-descriptions-item>
+                </el-descriptions>
+            </div>
+        </div>
+
+    </div>
+</template>
+<script lang="ts" setup>
+import { ref } from "vue";
+
+const serviceName = ref("")
+
+const display = ref(true)
+const result = ref("")
+
+</script>
+<style lang="scss" scoped></style>
\ No newline at end of file