diff --git a/src/i18n/langs/zh.json b/src/i18n/langs/zh.json
index 68b888c89..f56004447 100644
--- a/src/i18n/langs/zh.json
+++ b/src/i18n/langs/zh.json
@@ -713,6 +713,8 @@
     "instantAdhoc": "即时命令",
     "AdhocManage": "命令管理",
     "PlaybookManage": "Playbook管理",
+    "PlaybookUpdate": "更新Playbook",
+    "PlaybookDetail": "Playbook详情",
     "history": "历史记录",
     "createAdhoc": "创建命令",
     "AdhocDetail": "命令详情",
diff --git a/src/layout/components/NavLeft/index.vue b/src/layout/components/NavLeft/index.vue
index f195a6be4..35a941d07 100644
--- a/src/layout/components/NavLeft/index.vue
+++ b/src/layout/components/NavLeft/index.vue
@@ -12,8 +12,10 @@
         />
         <span
           v-show="!isCollapse"
-          style="margin-left: 3px;"
-        >{{ isRouteMeta.title || '' }}</span>
+          style="margin-left: 10px;"
+        >
+          {{ isRouteMeta.title || '' }}
+        </span>
         <span v-show="!isCollapse" class="switch-view">
           <el-popover
             placement="right-start"
@@ -125,6 +127,7 @@ export default {
 </script>
 <style lang="scss" scoped>
   @import "~@/styles/variables.scss";
+
   .nav-header {
     overflow: hidden;
     background-color: var(--color-primary);
@@ -145,6 +148,7 @@ export default {
     white-space: nowrap;
     cursor: pointer;
     background-color: var(--menu-bg);
+
     .switch-view {
       position: absolute;
       top: 50%;
@@ -157,6 +161,7 @@ export default {
       &:hover {
         background: var(--menu-hover)!important;
       }
+
       .icon {
         margin-right: 0!important;
         &:hover {
@@ -200,20 +205,25 @@ export default {
       background-color: $subMenuHover;
     }
   }
+
   .active-mobile {
     display: none;
-    &>>> .organization {
+
+    & > > > .organization {
       padding-left: 8px;
       background: transparent;
       color: #fff;
     }
-    &>>> .menu-main {
+
+    & > > > .menu-main {
       margin-left: -10px;
     }
-    &>>> .title-label {
+
+    & > > > .title-label {
       color: white !important;
     }
   }
+
   @media screen and (max-width: 992px) {
     .active-mobile {
       display: block;
diff --git a/src/router/workbench/index.js b/src/router/workbench/index.js
index 4d9408cee..be232bc4f 100644
--- a/src/router/workbench/index.js
+++ b/src/router/workbench/index.js
@@ -181,7 +181,7 @@ export default {
           meta: {
             title: i18n.t('route.updateAdhoc'),
             permissions: [],
-            activeMenu: '/workbench/ops/adhoc'
+            activeMenu: '/workbench/ops/scripts'
           }
         },
         {
@@ -192,7 +192,7 @@ export default {
           meta: {
             title: i18n.t('ops.createAdhoc'),
             permissions: [],
-            activeMenu: '/workbench/ops/adhoc'
+            activeMenu: '/workbench/ops/scripts'
           }
         },
         {
@@ -203,18 +203,29 @@ export default {
           meta: {
             title: i18n.t('route.AdhocDetail'),
             permissions: [],
-            activeMenu: '/workbench/ops/adhoc'
+            activeMenu: '/workbench/ops/scripts'
           }
         },
         {
-          path: 'playbook/create',
-          name: 'PlaybookCreate',
+          path: 'playbook/:id/update',
+          name: 'PlaybookUpdate',
           hidden: true,
-          component: () => import('@/views/ops/ScriptManage/Playbook/PlaybookUpdateCreate'),
+          component: () => import('@/views/ops/ScriptManage/Playbook/PlaybookUpdate'),
           meta: {
-            title: i18n.t('route.PlaybookCreate'),
+            title: i18n.t('ops.PlaybookUpdate'),
             permissions: [],
-            activeMenu: '/workbench/ops/playbook'
+            activeMenu: '/workbench/ops/scripts'
+          }
+        },
+        {
+          path: 'playbook/:id',
+          component: () => import('@/views/ops/ScriptManage/Playbook/PlaybookDetail'),
+          name: 'PlaybookDetail',
+          hidden: true,
+          meta: {
+            title: i18n.t('ops.PlaybookDetail'),
+            permissions: [],
+            activeMenu: '/workbench/ops/scripts'
           }
         }
       ]
diff --git a/src/styles/menu.scss b/src/styles/menu.scss
index 7361e81c5..805cf1872 100644
--- a/src/styles/menu.scss
+++ b/src/styles/menu.scss
@@ -1,8 +1,10 @@
 @import "./variables";
+
 .left-menu.el-menu {
   .el-menu--inline {
     background-color: $subMenuBg;
   }
+
   .el-menu-item, .el-submenu {
     font-weight: 600;
   }
@@ -13,9 +15,11 @@
 
     .el-submenu__title {
       color: $menuText;
+
       &:hover {
         color: $menuActiveText;
       }
+
       i {
         color: $menuActiveText;
       }
@@ -30,10 +34,10 @@
     &.submenu-title-noDropdown {
       list-style: none;
     }
-    &.is-active{
+
+    &.is-active {
       color: $subMenuActiveText;
-      background-color: $subMenuHover!important;
-      font-weight: 600;
+      background-color: $subMenuHover !important;
       list-style-type: disc;
     }
 
@@ -42,14 +46,15 @@
       color: $subMenuActiveText;
       list-style-type: disc;
     }
+
     i {
       color: $menuText;
     }
   }
 
-   i.fa {
-     margin-right: 10px;
-     width: 13px;
+  i.fa {
+    margin-right: 10px;
+    width: 13px;
   }
 
   .is-active i.fa {
@@ -98,14 +103,16 @@
   }
 
   .el-submenu-sidebar .el-menu-item {
-    background-color: $subMenuBg ;
+    background-color: $subMenuBg;
   }
 
   .el-submenu.is-opened {
     background-color: $subMenuBg;
+
     .el-submenu__title {
-      background-color: $subMenuBg!important;
+      background-color: $subMenuBg !important;
     }
+
     & .nest-menu {
       background-color: $subMenuBg;
     }
diff --git a/src/views/ops/ScriptManage/Adhoc.vue b/src/views/ops/ScriptManage/Adhoc.vue
index f18f399b1..3a47db677 100644
--- a/src/views/ops/ScriptManage/Adhoc.vue
+++ b/src/views/ops/ScriptManage/Adhoc.vue
@@ -15,8 +15,12 @@ export default {
       tableConfig: {
         url: '/api/v1/ops/adhocs/',
         columns: [
-          'name', 'module', 'date_updated', 'date_created', 'actions'
+          'name', 'module', 'args', 'comment', 'date_updated', 'date_created', 'actions'
         ],
+        columnsShow: {
+          min: ['name', 'actions'],
+          default: ['name', 'module', 'comment', 'args', 'comment', 'date_created', 'actions']
+        },
         columnsMeta: {
           name: {
             formatterArgs: {
diff --git a/src/views/ops/ScriptManage/Adhoc/AdhocUpdateCreate.vue b/src/views/ops/ScriptManage/Adhoc/AdhocUpdateCreate.vue
index 040167d70..fe9149155 100644
--- a/src/views/ops/ScriptManage/Adhoc/AdhocUpdateCreate.vue
+++ b/src/views/ops/ScriptManage/Adhoc/AdhocUpdateCreate.vue
@@ -14,7 +14,7 @@ export default {
     return {
       url: '/api/v1/ops/adhocs/',
       fields: [
-        [this.$t('common.Basic'), ['name', 'module', 'args']]
+        [this.$t('common.Basic'), ['name', 'comment', 'module', 'args']]
       ],
       initial: {
         module: 'shell',
@@ -22,15 +22,14 @@ export default {
       },
       fieldsMeta: {
         args: {
-          label: 'content',
           component: CodeEditor
         }
       },
       createSuccessNextRoute: {
-        name: 'Adhoc'
+        name: 'ScriptManage'
       },
       updateSuccessNextRoute: {
-        name: 'Adhoc'
+        name: 'ScriptManage'
       }
     }
   }
diff --git a/src/views/ops/ScriptManage/Playbook.vue b/src/views/ops/ScriptManage/Playbook.vue
index 6db9bca94..8b14e8a19 100644
--- a/src/views/ops/ScriptManage/Playbook.vue
+++ b/src/views/ops/ScriptManage/Playbook.vue
@@ -21,13 +21,17 @@ export default {
       tableConfig: {
         url: '/api/v1/ops/playbooks/',
         columns: [
-          'name', 'path', 'date_updated', 'date_created', 'actions'
+          'name', 'comment', 'date_created', 'date_updated', 'creator', 'actions'
         ],
+        columnsShow: {
+          min: ['name', 'actions'],
+          default: ['name', 'comment', 'date_created', 'actions']
+        },
         columnsMeta: {
           name: {
             formatterArgs: {
               can: true,
-              route: 'AdhocDetail'
+              route: 'PlaybookDetail'
             }
           },
           actions: {
@@ -35,7 +39,7 @@ export default {
             formatterArgs: {
               hasUpdate: true,
               canUpdate: true,
-              updateRoute: 'AdhocUpdate',
+              updateRoute: 'PlaybookUpdate',
               hasDelete: true,
               canDelete: true,
               hasClone: false,
diff --git a/src/views/ops/ScriptManage/Playbook/PlaybookDetail/PlaybookDetail.vue b/src/views/ops/ScriptManage/Playbook/PlaybookDetail/PlaybookDetail.vue
new file mode 100644
index 000000000..a7cb81c19
--- /dev/null
+++ b/src/views/ops/ScriptManage/Playbook/PlaybookDetail/PlaybookDetail.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-row :gutter="20">
+    <el-col :md="14" :sm="24">
+      <DetailCard :title="cardTitle" :items="detailCardItems" />
+    </el-col>
+  </el-row>
+</template>
+
+<script type="text/jsx">
+import DetailCard from '@/components/DetailCard'
+
+export default {
+  components: {
+    DetailCard
+  },
+  props: {
+    object: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    cardTitle() {
+      return this.object.name
+    },
+    detailCardItems() {
+      return [
+        {
+          key: this.$t('common.Name'),
+          value: this.object.name
+        },
+        {
+          key: this.$t('common.Comment'),
+          value: this.object.comment
+        }
+      ]
+    }
+  },
+  methods: {}
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>
diff --git a/src/views/ops/ScriptManage/Playbook/PlaybookDetail/index.vue b/src/views/ops/ScriptManage/Playbook/PlaybookDetail/index.vue
new file mode 100644
index 000000000..cbc1206d9
--- /dev/null
+++ b/src/views/ops/ScriptManage/Playbook/PlaybookDetail/index.vue
@@ -0,0 +1,42 @@
+<template>
+  <GenericDetailPage :object.sync="PlaybookDetail" :active-menu.sync="config.activeMenu" v-bind="config" v-on="$listeners">
+    <keep-alive>
+      <component :is="config.activeMenu" :object="PlaybookDetail" />
+    </keep-alive>
+  </GenericDetailPage>
+</template>
+
+<script>
+import { GenericDetailPage } from '@/layout/components'
+import PlaybookDetail from '@/views/ops/ScriptManage/Playbook/PlaybookDetail/PlaybookDetail'
+
+export default {
+  components: {
+    GenericDetailPage,
+    PlaybookDetail
+  },
+  data() {
+    return {
+      PlaybookDetail: {},
+      config: {
+        getTitle(row) {
+          return row['name']
+        },
+        url: '/api/v1/ops/playbooks/',
+        activeMenu: 'PlaybookDetail',
+        submenu: [
+          {
+            title: this.$t('ops.PlaybookDetail'),
+            name: 'PlaybookDetail'
+          }
+        ],
+        hasRightSide: false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ops/ScriptManage/Playbook/PlaybookUpdate.vue b/src/views/ops/ScriptManage/Playbook/PlaybookUpdate.vue
new file mode 100644
index 000000000..8df2ab061
--- /dev/null
+++ b/src/views/ops/ScriptManage/Playbook/PlaybookUpdate.vue
@@ -0,0 +1,31 @@
+<template>
+  <GenericCreateUpdatePage v-bind="$data" />
+</template>
+
+<script>
+import { GenericCreateUpdatePage } from '@/layout/components'
+
+export default {
+  components: {
+    GenericCreateUpdatePage
+  },
+  data() {
+    return {
+      url: '/api/v1/ops/playbooks/',
+      fields: [
+        [this.$t('common.Basic'), ['name', 'comment']]
+      ],
+      createSuccessNextRoute: {
+        name: 'ScriptManage'
+      },
+      updateSuccessNextRoute: {
+        name: 'ScriptManage'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ops/ScriptManage/Playbook/PlaybookUpdateCreate.vue b/src/views/ops/ScriptManage/Playbook/PlaybookUpdateCreate.vue
deleted file mode 100644
index 327b2e3ca..000000000
--- a/src/views/ops/ScriptManage/Playbook/PlaybookUpdateCreate.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-  <GenericCreateUpdatePage v-bind="$data" />
-</template>
-
-<script>
-import { GenericCreateUpdatePage } from '@/layout/components'
-import CodeEditor from '@/components/FormFields/CodeEditor'
-
-export default {
-  components: {
-    GenericCreateUpdatePage
-  },
-  data() {
-    return {
-      cmOptions: {
-        tabSize: 4,
-        mode: 'shell',
-        theme: 'base16-light',
-        lineNumbers: true,
-        line: true
-      },
-      url: '/api/v1/ops/adhocs/',
-      fields: [
-        [this.$t('common.Basic'), ['name', 'module', 'args']]
-      ],
-      initial: {
-        module: 'shell',
-        args: ''
-      },
-      fieldsMeta: {
-        args: {
-          label: 'content',
-          component: CodeEditor
-        }
-      },
-      createSuccessNextRoute: {
-        name: 'Adhoc'
-      },
-      updateSuccessNextRoute: {
-        name: 'Adhoc'
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>