diff --git a/src/views/settings/Terminal/Component/TerminalDetail/index.vue b/src/views/settings/Terminal/Component/TerminalDetail/index.vue
index 2e42788ea..0177e3988 100644
--- a/src/views/settings/Terminal/Component/TerminalDetail/index.vue
+++ b/src/views/settings/Terminal/Component/TerminalDetail/index.vue
@@ -38,8 +38,7 @@ export default {
         actions: {
           canUpdate: this.$hasPerm('terminal.change_terminal'),
           hasDelete: this.$hasPerm('terminal.delete_terminal'),
-          canDelete: this.$hasPerm('terminal.delete_terminal'),
-          detailApiUrl: `/api/v1/terminal/terminals/${this.$route.params.id}/`
+          canDelete: this.$hasPerm('terminal.delete_terminal')
         },
         titlePrefix: this.$t('TerminalDetail')
       }
@@ -49,7 +48,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-
-</style>
diff --git a/src/views/settings/Terminal/Component/TerminalList.vue b/src/views/settings/Terminal/Component/TerminalList.vue
index c18b1cd3e..a7448a61f 100644
--- a/src/views/settings/Terminal/Component/TerminalList.vue
+++ b/src/views/settings/Terminal/Component/TerminalList.vue
@@ -1,6 +1,12 @@
 <template>
   <div>
-    <ListTable :header-actions="headerActions" :table-config="tableConfig" />
+    <ListTable
+      ref="ListTable"
+      :header-actions="headerActions"
+      :table-config="tableConfig"
+      :create-drawer="createDrawer"
+      :detail-drawer="detailDrawer"
+    />
     <Dialog
       :destroy-on-close="true"
       :show-cancel="false"
@@ -14,11 +20,13 @@
 </template>
 
 <script>
-import ListTable from '@/components/Table/ListTable'
-import { GenericCreateUpdateForm } from '@/layout/components'
 import Dialog from '@/components/Dialog'
 import Select2 from '@/components/Form/FormFields/Select2'
 
+import { DrawerListTable as ListTable } from '@/components'
+import { GenericCreateUpdateForm } from '@/layout/components'
+import { DetailFormatter } from '@/components/Table/TableFormatters'
+
 export default {
   components: {
     ListTable,
@@ -28,6 +36,8 @@ export default {
   data() {
     const vm = this
     return {
+      createDrawer: () => import('./TerminalUpdate.vue'),
+      detailDrawer: () => import('./TerminalDetail/index.vue'),
       dialogSettings: {
         selectedRows: [],
         visible: false,
@@ -110,8 +120,17 @@ export default {
         columnsMeta: {
           name: {
             sortable: 'custom',
+            formatter: DetailFormatter,
             formatterArgs: {
-              route: 'TerminalDetail'
+              drawer: true,
+              getRoute: ({ row }) => {
+                return {
+                  name: 'TerminalDetail',
+                  params: {
+                    id: row.id
+                  }
+                }
+              }
             }
           },
           stat: {
diff --git a/src/views/settings/Terminal/Endpoint/EndpointList.vue b/src/views/settings/Terminal/Endpoint/EndpointList.vue
index 06b7cec27..d81f10ba7 100644
--- a/src/views/settings/Terminal/Endpoint/EndpointList.vue
+++ b/src/views/settings/Terminal/Endpoint/EndpointList.vue
@@ -1,12 +1,17 @@
 <template>
   <div>
     <el-alert v-sanitize="helpMessage" type="success" />
-    <ListTable :header-actions="headerActions" :table-config="tableConfig" />
+    <ListTable
+      ref="ListTable"
+      :header-actions="headerActions"
+      :table-config="tableConfig"
+      :create-drawer="createDrawer"
+    />
   </div>
 </template>
 
 <script>
-import ListTable from '@/components/Table/ListTable'
+import { DrawerListTable as ListTable } from '@/components'
 
 export default {
   name: 'EndpointList',
@@ -15,6 +20,7 @@ export default {
   },
   data() {
     return {
+      createDrawer: () => import('./EndpointCreateUpdate.vue'),
       helpMessage: this.$t('EndpointListHelpMessage'),
       tableConfig: {
         url: '/api/v1/terminal/endpoints/',
@@ -51,7 +57,3 @@ export default {
   }
 }
 </script>
-
-<style>
-
-</style>
diff --git a/src/views/settings/Terminal/EndpointRule/EndpointRuleList.vue b/src/views/settings/Terminal/EndpointRule/EndpointRuleList.vue
index 6865be016..d30185080 100644
--- a/src/views/settings/Terminal/EndpointRule/EndpointRuleList.vue
+++ b/src/views/settings/Terminal/EndpointRule/EndpointRuleList.vue
@@ -1,12 +1,17 @@
 <template>
   <div>
     <el-alert v-sanitize="helpMessage" type="success" />
-    <ListTable :header-actions="headerActions" :table-config="tableConfig" />
+    <ListTable
+      ref="ListTable"
+      :header-actions="headerActions"
+      :table-config="tableConfig"
+      :create-drawer="createDrawer"
+    />
   </div>
 </template>
 
 <script>
-import ListTable from '@/components/Table/ListTable'
+import { DrawerListTable as ListTable } from '@/components'
 
 export default {
   name: 'EndpointRule',
@@ -15,6 +20,7 @@ export default {
   },
   data() {
     return {
+      createDrawer: () => import('./EndpointRuleCreateUpdate.vue'),
       helpMessage: this.$t('EndpointRuleListHelpMessage'),
       tableConfig: {
         url: '/api/v1/terminal/endpoint-rules/',
@@ -46,7 +52,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-
-</style>