diff --git a/src/backend/client/api/types.go b/src/backend/client/api/types.go
index 99b5d7ebc..d4731a3f2 100644
--- a/src/backend/client/api/types.go
+++ b/src/backend/client/api/types.go
@@ -7,6 +7,7 @@ import (
 	batchv1beta1 "k8s.io/api/batch/v1beta1"
 	corev1 "k8s.io/api/core/v1"
 	extensionsv1beta1 "k8s.io/api/extensions/v1beta1"
+	rbacv1 "k8s.io/api/rbac/v1"
 	storagev1 "k8s.io/api/storage/v1"
 	"k8s.io/apimachinery/pkg/runtime/schema"
 )
@@ -33,6 +34,11 @@ const (
 	ResourceNameStatefulSet             ResourceName = "statefulsets"
 	ResourceNameEndpoint                ResourceName = "endpoints"
 	ResourceNameStorageClass            ResourceName = "storageclasses"
+	ResourceNameRole                    ResourceName = "roles"
+	ResourceNameRoleBinding             ResourceName = "rolebindings"
+	ResourceNameClusterRole             ResourceName = "clusterroles"
+	ResourceNameClusterRoleBinding      ResourceName = "clusterrolebindings"
+	ResourceNameServiceAccount          ResourceName = "serviceaccounts"
 )
 
 type ResourceMap struct {
@@ -194,4 +200,45 @@ var KindToResourceMap = map[string]ResourceMap{
 		},
 		Namespaced: false,
 	},
+
+	ResourceNameRole: {
+		GroupVersionResource: schema.GroupVersionResource{
+			Group:    rbacv1.GroupName,
+			Version:  rbacv1.SchemeGroupVersion.Version,
+			Resource: ResourceNameRole,
+		},
+		Namespaced: true,
+	},
+	ResourceNameRoleBinding: {
+		GroupVersionResource: schema.GroupVersionResource{
+			Group:    rbacv1.GroupName,
+			Version:  rbacv1.SchemeGroupVersion.Version,
+			Resource: ResourceNameRoleBinding,
+		},
+		Namespaced: true,
+	},
+	ResourceNameClusterRole: {
+		GroupVersionResource: schema.GroupVersionResource{
+			Group:    rbacv1.GroupName,
+			Version:  rbacv1.SchemeGroupVersion.Version,
+			Resource: ResourceNameClusterRole,
+		},
+		Namespaced: false,
+	},
+	ResourceNameClusterRoleBinding: {
+		GroupVersionResource: schema.GroupVersionResource{
+			Group:    rbacv1.GroupName,
+			Version:  rbacv1.SchemeGroupVersion.Version,
+			Resource: ResourceNameClusterRoleBinding,
+		},
+		Namespaced: false,
+	},
+	ResourceNameServiceAccount: {
+		GroupVersionResource: schema.GroupVersionResource{
+			Group:    corev1.GroupName,
+			Version:  corev1.SchemeGroupVersion.Version,
+			Resource: ResourceNameServiceAccount,
+		},
+		Namespaced: true,
+	},
 }
diff --git a/src/backend/client/clientfactory.go b/src/backend/client/clientfactory.go
index 0f3af68db..d21f66669 100644
--- a/src/backend/client/clientfactory.go
+++ b/src/backend/client/clientfactory.go
@@ -6,6 +6,7 @@ import (
 	batchv1 "k8s.io/api/batch/v1"
 	corev1 "k8s.io/api/core/v1"
 	extensionsv1beta1 "k8s.io/api/extensions/v1beta1"
+	rbacv1 "k8s.io/api/rbac/v1"
 	storagev1 "k8s.io/api/storage/v1"
 	"k8s.io/apimachinery/pkg/runtime/schema"
 	"k8s.io/client-go/rest"
@@ -29,6 +30,8 @@ func (h *resourceHandler) getClientByGroupVersion(groupVersion schema.GroupVersi
 		return h.client.ExtensionsV1beta1().RESTClient()
 	case storagev1.GroupName:
 		return h.client.StorageV1().RESTClient()
+	case rbacv1.GroupName:
+		return h.client.RbacV1().RESTClient()
 	default:
 		return h.client.CoreV1().RESTClient()
 	}
diff --git a/src/backend/resources/common/common.go b/src/backend/resources/common/common.go
index 2f4b5ad8e..1959fd3ac 100644
--- a/src/backend/resources/common/common.go
+++ b/src/backend/resources/common/common.go
@@ -11,6 +11,9 @@ type Object struct {
 	metav1.TypeMeta   `json:",inline"`
 	metav1.ObjectMeta `json:"metadata,omitempty"`
 
+	// for ServiceAccount
+	Secrets []v1.ObjectReference `json:"secrets,omitempty"`
+
 	// for StorageClass
 	Provisioner   string                            `json:"provisioner,omitempty"`
 	ReclaimPolicy *v1.PersistentVolumeReclaimPolicy `json:"reclaimPolicy,omitempty"`
diff --git a/src/frontend/src/app/admin/admin-routing.module.ts b/src/frontend/src/app/admin/admin-routing.module.ts
index 891d9c1b1..9133aee09 100644
--- a/src/frontend/src/app/admin/admin-routing.module.ts
+++ b/src/frontend/src/app/admin/admin-routing.module.ts
@@ -82,6 +82,11 @@ import { KubePvcComponent } from './kubernetes/pvc/kube-pvc.component';
 import { KubeReplicasetComponent } from './kubernetes/replicaset/kube-replicaset.component';
 import { KubeStorageclassComponent } from './kubernetes/storageclass/kube-storageclass.component';
 import { KubeHpaComponent } from './kubernetes/hpa/kube-hpa.component';
+import { KubeRoleComponent } from './kubernetes/role/kube-role.component';
+import { KubeRolebindingComponent } from './kubernetes/rolebinding/kube-rolebinding.component';
+import { KubeServiceaccountComponent } from './kubernetes/serviceaccount/kube-serviceaccount.component';
+import { KubeClusterroleComponent } from './kubernetes/clusterrole/kube-clusterrole.component';
+import { KubeClusterrolebindingComponent } from './kubernetes/clusterrolebinding/kube-clusterrolebinding.component';
 
 
 const routes: Routes = [
@@ -190,6 +195,16 @@ const routes: Routes = [
       {path: 'kubernetes/storageclass/:cluster', component: KubeStorageclassComponent},
       {path: 'kubernetes/horizontalpodautoscaler', component: KubeHpaComponent},
       {path: 'kubernetes/horizontalpodautoscaler/:cluster', component: KubeHpaComponent},
+      {path: 'kubernetes/role', component: KubeRoleComponent},
+      {path: 'kubernetes/role/:cluster', component: KubeRoleComponent},
+      {path: 'kubernetes/rolebinding', component: KubeRolebindingComponent},
+      {path: 'kubernetes/rolebinding/:cluster', component: KubeRolebindingComponent},
+      {path: 'kubernetes/serviceaccount', component: KubeServiceaccountComponent},
+      {path: 'kubernetes/serviceaccount/:cluster', component: KubeServiceaccountComponent},
+      {path: 'kubernetes/clusterrole', component: KubeClusterroleComponent},
+      {path: 'kubernetes/clusterrole/:cluster', component: KubeClusterroleComponent},
+      {path: 'kubernetes/clusterrolebinding', component: KubeClusterrolebindingComponent},
+      {path: 'kubernetes/clusterrolebinding/:cluster', component: KubeClusterrolebindingComponent},
       ...ADMINROUTES
     ]
   }
diff --git a/src/frontend/src/app/admin/admin.module.ts b/src/frontend/src/app/admin/admin.module.ts
index f6cbfbabb..a38ac7707 100644
--- a/src/frontend/src/app/admin/admin.module.ts
+++ b/src/frontend/src/app/admin/admin.module.ts
@@ -62,6 +62,11 @@ import { KubeReplicasetModule } from './kubernetes/replicaset/kube-replicaset.mo
 import { KubePvcModule } from './kubernetes/pvc/kube-pvc.module';
 import { KubeStorageclassModule } from './kubernetes/storageclass/kube-storageclass.module';
 import { KubeHpaModule } from './kubernetes/hpa/kube-hpa.module';
+import { KubeRoleModule } from './kubernetes/role/kube-role.module';
+import { KubeRolebindingModule } from './kubernetes/rolebinding/kube-rolebinding.module';
+import { KubeServiceaccountModule } from './kubernetes/serviceaccount/kube-serviceaccount.module';
+import { KubeClusterroleModule } from './kubernetes/clusterrole/kube-clusterrole.module';
+import { KubeClusterrolebindingModule } from './kubernetes/clusterrolebinding/kube-clusterrolebinding.module';
 
 @NgModule({
   imports: [
@@ -117,7 +122,13 @@ import { KubeHpaModule } from './kubernetes/hpa/kube-hpa.module';
     KubeJobModule,
     KubePvcModule,
     KubeStorageclassModule,
-    KubeHpaModule
+    KubeHpaModule,
+    KubeRoleModule,
+    KubeRolebindingModule,
+    KubeServiceaccountModule,
+    KubeClusterroleModule,
+    KubeClusterrolebindingModule,
+    KubeNamespaceModule
   ],
   providers: [
     AdminAuthCheckGuard,
diff --git a/src/frontend/src/app/admin/kubernetes/clusterrole/kube-clusterrole.component.html b/src/frontend/src/app/admin/kubernetes/clusterrole/kube-clusterrole.component.html
new file mode 100644
index 000000000..650b8947d
--- /dev/null
+++ b/src/frontend/src/app/admin/kubernetes/clusterrole/kube-clusterrole.component.html
@@ -0,0 +1,37 @@
+<div class="clr-row">
+  <div class="clr-col-lg-12 clr-col-md-12 clr-col-sm-12 clr-col-xs-12">
+    <div class="table-search">
+      <div class="table-search-left">
+        <button class="wayne-button normal" (click)="createResource()">
+          {{'ADMIN.KUBERNETES.CLUSTERROLE.CREATE' | translate}}
+        </button>
+        <button class="wayne-button normal" (click)="retrieveResource()">
+          {{'ADMIN.KUBERNETES.ACTION.REFRESH' | translate}}
+        </button>
+        <wayne-filter-box (confirm)="onConfirmEvent()" (cancel)="onCancelEvent()">
+          <wayne-checkbox-group [(ngModel)]="showList">
+            <wayne-checkbox value="name">{{'ADMIN.KUBERNETES.CLUSTERROLE.LIST.NAME' | translate}}</wayne-checkbox>
+            <wayne-checkbox value="label">{{'ADMIN.KUBERNETES.CLUSTERROLE.LIST.LABEL' | translate}}</wayne-checkbox>
+            <wayne-checkbox value="age">{{'ADMIN.KUBERNETES.CLUSTERROLE.LIST.AGE' | translate}}</wayne-checkbox>
+          </wayne-checkbox-group>
+        </wayne-filter-box>
+      </div>
+    </div>
+
+    <wayne-list-clusterrole
+      [resources]="resources"
+      [showState]="showState"
+      (delete)="onDeleteResourceEvent($event)"
+      (edit)="onEditResourceEvent($event)"
+      [page]="pageState.page"
+      [cluster]="cluster"
+      (paginate)="retrieveResource($event)">
+    </wayne-list-clusterrole>
+  </div>
+</div>
+<deletion-dialog (outputObj)="confirmDeleteEvent($event)"></deletion-dialog>
+<wayne-ace-editor (createOutputObj)="onCreateResourceEvent($event)" (outputObj)="onSaveResourceEvent($event)"></wayne-ace-editor>
+<wayne-float-window value="{{ cluster }}">
+  <wayne-float-window-item *ngFor="let cluster of clusters" [value]="cluster"
+                           (click)="jumpToHref(cluster)"></wayne-float-window-item>
+</wayne-float-window>
diff --git a/src/frontend/src/app/admin/kubernetes/clusterrole/kube-clusterrole.component.ts b/src/frontend/src/app/admin/kubernetes/clusterrole/kube-clusterrole.component.ts
new file mode 100644
index 000000000..bc8533621
--- /dev/null
+++ b/src/frontend/src/app/admin/kubernetes/clusterrole/kube-clusterrole.component.ts
@@ -0,0 +1,54 @@
+import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MessageHandlerService } from '../../../shared/message-handler/message-handler.service';
+import { ClusterService } from '../../../shared/client/v1/cluster.service';
+import { AuthService } from '../../../shared/auth/auth.service';
+import { AceEditorComponent } from '../../../shared/ace-editor/ace-editor.component';
+import { KubernetesClient } from '../../../shared/client/v1/kubernetes/kubernetes';
+import { KubeResourceClusterRole } from '../../../shared/shared.const';
+import { DeletionDialogComponent } from '../../../shared/deletion-dialog/deletion-dialog.component';
+import { KubernetesUnNamespacedResource } from '../../../shared/base/kubernetes-namespaced/kubernetes-unnamespaced-resource';
+import { ListClusterroleComponent } from './list-clusterrole/list-clusterrole.component';
+
+const showState = {
+  'name': {hidden: false},
+  'label': {hidden: false},
+  'age': {hidden: false},
+};
+
+@Component({
+  selector: 'wayne-kube-clusterrole',
+  templateUrl: './kube-clusterrole.component.html'
+})
+
+export class KubeClusterroleComponent extends KubernetesUnNamespacedResource implements OnInit, OnDestroy {
+  @ViewChild(ListClusterroleComponent)
+  listResourceComponent: ListClusterroleComponent;
+
+  @ViewChild(AceEditorComponent)
+  aceEditorModal: AceEditorComponent;
+
+  @ViewChild(DeletionDialogComponent)
+  deletionDialogComponent: DeletionDialogComponent;
+
+  constructor(public kubernetesClient: KubernetesClient,
+              public route: ActivatedRoute,
+              public router: Router,
+              public clusterService: ClusterService,
+              public authService: AuthService,
+              public messageHandlerService: MessageHandlerService) {
+    super(kubernetesClient, route, router, clusterService, authService, messageHandlerService);
+    super.registResourceType('clusterrole');
+    super.registKubeResource(KubeResourceClusterRole);
+    super.registShowSate(showState);
+  }
+
+  ngOnInit() {
+    super.ngOnInit();
+  }
+
+  ngOnDestroy(): void {
+    super.ngOnDestroy();
+  }
+
+}
diff --git a/src/frontend/src/app/admin/kubernetes/clusterrole/kube-clusterrole.module.ts b/src/frontend/src/app/admin/kubernetes/clusterrole/kube-clusterrole.module.ts
new file mode 100644
index 000000000..4fcf446db
--- /dev/null
+++ b/src/frontend/src/app/admin/kubernetes/clusterrole/kube-clusterrole.module.ts
@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../../shared/shared.module';
+import { ReactiveFormsModule } from '@angular/forms';
+import { KubeClusterroleComponent } from './kube-clusterrole.component';
+import { KubernetesClient } from '../../../shared/client/v1/kubernetes/kubernetes';
+import { DeletionDialogModule } from '../../../shared/deletion-dialog/deletion-dialog.module';
+import { ListClusterroleComponent } from './list-clusterrole/list-clusterrole.component';
+
+@NgModule({
+  imports: [
+    SharedModule,
+    ReactiveFormsModule,
+    DeletionDialogModule
+  ],
+  providers: [
+    KubernetesClient
+  ],
+  exports: [],
+  declarations: [
+    KubeClusterroleComponent,
+    ListClusterroleComponent
+  ]
+})
+
+export class KubeClusterroleModule {
+}
diff --git a/src/frontend/src/app/admin/kubernetes/clusterrole/list-clusterrole/list-clusterrole.component.html b/src/frontend/src/app/admin/kubernetes/clusterrole/list-clusterrole/list-clusterrole.component.html
new file mode 100644
index 000000000..a5717395b
--- /dev/null
+++ b/src/frontend/src/app/admin/kubernetes/clusterrole/list-clusterrole/list-clusterrole.component.html
@@ -0,0 +1,40 @@
+<clr-datagrid (clrDgRefresh)="refresh($event)">
+  <clr-dg-column class="col-app-name" [clrDgField]="'name'">
+    <ng-container *clrDgHideableColumn="showState['name']">
+      {{'ADMIN.KUBERNETES.CLUSTERROLE.LIST.NAME' | translate}}
+    </ng-container>
+  </clr-dg-column>
+  <clr-dg-column>
+    <ng-container *clrDgHideableColumn="showState['label']">
+      {{'ADMIN.KUBERNETES.CLUSTERROLE.LIST.LABEL' | translate}}
+    </ng-container>
+  </clr-dg-column>
+  <clr-dg-column [clrDgField]="'creationTimestamp'">
+    <ng-container *clrDgHideableColumn="showState['age']">
+      {{'ADMIN.KUBERNETES.CLUSTERROLE.LIST.AGE' | translate}}
+    </ng-container>
+  </clr-dg-column>
+
+
+  <clr-dg-row *ngFor="let obj of resources" [clrDgItem]="obj">
+    <clr-dg-action-overflow>
+      <button class="action-item" (click)="onEditEvent(obj)">{{'ADMIN.KUBERNETES.ACTION.EDIT' | translate}}</button>
+      <button class="action-item" (click)="onDeleteEvent(obj)">{{'ADMIN.KUBERNETES.ACTION.DELETE' | translate}}</button>
+    </clr-dg-action-overflow>
+    <clr-dg-cell class="col-app-name"> {{ obj.metadata.name }} </clr-dg-cell>
+    <clr-dg-cell>
+      <div *ngFor="let label of obj.metadata.labels | keyvalue" class="version-text">
+        <a href="javascript:" (click)="versionDetail(label.key + ': ' + label.value)">{{label.key}}: {{label.value}}</a>
+      </div>
+    </clr-dg-cell>
+    <clr-dg-cell> {{ obj.metadata.creationTimestamp | relativeTime}} </clr-dg-cell>
+  </clr-dg-row>
+  <clr-dg-footer>
+    <wayne-paginate
+      [(currentPage)]="currentPage"
+      [total]="page.totalCount"
+      [pageSizes]="[10, 20, 50]"
+      (sizeChange)="pageSizeChange($event)">
+    </wayne-paginate>
+  </clr-dg-footer>
+</clr-datagrid>
diff --git a/src/frontend/src/app/admin/kubernetes/clusterrole/list-clusterrole/list-clusterrole.component.ts b/src/frontend/src/app/admin/kubernetes/clusterrole/list-clusterrole/list-clusterrole.component.ts
new file mode 100644
index 000000000..aa254a345
--- /dev/null
+++ b/src/frontend/src/app/admin/kubernetes/clusterrole/list-clusterrole/list-clusterrole.component.ts
@@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core';
+import { KubernetesListResource } from '../../../../shared/base/kubernetes-namespaced/kubernetes-list-resource';
+import { TplDetailService } from '../../../../shared/tpl-detail/tpl-detail.service';
+
+@Component({
+  selector: 'wayne-list-clusterrole',
+  templateUrl: './list-clusterrole.component.html'
+})
+
+export class ListClusterroleComponent extends KubernetesListResource {
+  @Input() resources: any[];
+  @Input() showState: object;
+
+  constructor(public tplDetailService: TplDetailService) {
+    super(tplDetailService);
+  }
+
+}
diff --git a/src/frontend/src/app/admin/kubernetes/clusterrolebinding/kube-clusterrolebinding.component.html b/src/frontend/src/app/admin/kubernetes/clusterrolebinding/kube-clusterrolebinding.component.html
new file mode 100644
index 000000000..aa8a99ccb
--- /dev/null
+++ b/src/frontend/src/app/admin/kubernetes/clusterrolebinding/kube-clusterrolebinding.component.html
@@ -0,0 +1,37 @@
+<div class="clr-row">
+  <div class="clr-col-lg-12 clr-col-md-12 clr-col-sm-12 clr-col-xs-12">
+    <div class="table-search">
+      <div class="table-search-left">
+        <button class="wayne-button normal" (click)="createResource()">
+          {{'ADMIN.KUBERNETES.CLUSTERROLEBINDING.CREATE' | translate}}
+        </button>
+        <button class="wayne-button normal" (click)="retrieveResource()">
+          {{'ADMIN.KUBERNETES.ACTION.REFRESH' | translate}}
+        </button>
+        <wayne-filter-box (confirm)="onConfirmEvent()" (cancel)="onCancelEvent()">
+          <wayne-checkbox-group [(ngModel)]="showList">
+            <wayne-checkbox value="name">{{'ADMIN.KUBERNETES.CLUSTERROLEBINDING.LIST.NAME' | translate}}</wayne-checkbox>
+            <wayne-checkbox value="label">{{'ADMIN.KUBERNETES.CLUSTERROLEBINDING.LIST.LABEL' | translate}}</wayne-checkbox>
+            <wayne-checkbox value="age">{{'ADMIN.KUBERNETES.CLUSTERROLEBINDING.LIST.AGE' | translate}}</wayne-checkbox>
+          </wayne-checkbox-group>
+        </wayne-filter-box>
+      </div>
+    </div>
+
+    <wayne-list-clusterrolebinding
+      [resources]="resources"
+      [showState]="showState"
+      (delete)="onDeleteResourceEvent($event)"
+      (edit)="onEditResourceEvent($event)"
+      [page]="pageState.page"
+      [cluster]="cluster"
+      (paginate)="retrieveResource($event)">
+    </wayne-list-clusterrolebinding>
+  </div>
+</div>
+<deletion-dialog (outputObj)="confirmDeleteEvent($event)"></deletion-dialog>
+<wayne-ace-editor (createOutputObj)="onCreateResourceEvent($event)" (outputObj)="onSaveResourceEvent($event)"></wayne-ace-editor>
+<wayne-float-window value="{{ cluster }}">
+  <wayne-float-window-item *ngFor="let cluster of clusters" [value]="cluster"
+                           (click)="jumpToHref(cluster)"></wayne-float-window-item>
+</wayne-float-window>
diff --git a/src/frontend/src/app/admin/kubernetes/clusterrolebinding/kube-clusterrolebinding.component.ts b/src/frontend/src/app/admin/kubernetes/clusterrolebinding/kube-clusterrolebinding.component.ts
new file mode 100644
index 000000000..d920a68f4
--- /dev/null
+++ b/src/frontend/src/app/admin/kubernetes/clusterrolebinding/kube-clusterrolebinding.component.ts
@@ -0,0 +1,54 @@
+import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MessageHandlerService } from '../../../shared/message-handler/message-handler.service';
+import { ClusterService } from '../../../shared/client/v1/cluster.service';
+import { AuthService } from '../../../shared/auth/auth.service';
+import { AceEditorComponent } from '../../../shared/ace-editor/ace-editor.component';
+import { KubernetesClient } from '../../../shared/client/v1/kubernetes/kubernetes';
+import { KubeResourceClusterRoleBinding } from '../../../shared/shared.const';
+import { DeletionDialogComponent } from '../../../shared/deletion-dialog/deletion-dialog.component';
+import { KubernetesUnNamespacedResource } from '../../../shared/base/kubernetes-namespaced/kubernetes-unnamespaced-resource';
+import { ListClusterrolebindingComponent } from './list-clusterrolebinding/list-clusterrolebinding.component';
+
+const showState = {
+  'name': {hidden: false},
+  'label': {hidden: false},
+  'age': {hidden: false},
+};
+
+@Component({
+  selector: 'wayne-kube-clusterrolebinding',
+  templateUrl: './kube-clusterrolebinding.component.html'
+})
+
+export class KubeClusterrolebindingComponent extends KubernetesUnNamespacedResource implements OnInit, OnDestroy {
+  @ViewChild(ListClusterrolebindingComponent)
+  listResourceComponent: ListClusterrolebindingComponent;
+
+  @ViewChild(AceEditorComponent)
+  aceEditorModal: AceEditorComponent;
+
+  @ViewChild(DeletionDialogComponent)
+  deletionDialogComponent: DeletionDialogComponent;
+
+  constructor(public kubernetesClient: KubernetesClient,
+              public route: ActivatedRoute,
+              public router: Router,
+              public clusterService: ClusterService,
+              public authService: AuthService,
+              public messageHandlerService: MessageHandlerService) {
+    super(kubernetesClient, route, router, clusterService, authService, messageHandlerService);
+    super.registResourceType('clusterrolebinding');
+    super.registKubeResource(KubeResourceClusterRoleBinding);
+    super.registShowSate(showState);
+  }
+
+  ngOnInit() {
+    super.ngOnInit();
+  }
+
+  ngOnDestroy(): void {
+    super.ngOnDestroy();
+  }
+
+}
diff --git a/src/frontend/src/app/admin/kubernetes/clusterrolebinding/kube-clusterrolebinding.module.ts b/src/frontend/src/app/admin/kubernetes/clusterrolebinding/kube-clusterrolebinding.module.ts
new file mode 100644
index 000000000..57848d0b6
--- /dev/null
+++ b/src/frontend/src/app/admin/kubernetes/clusterrolebinding/kube-clusterrolebinding.module.ts
@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../../shared/shared.module';
+import { ReactiveFormsModule } from '@angular/forms';
+import { KubeClusterrolebindingComponent } from './kube-clusterrolebinding.component';
+import { KubernetesClient } from '../../../shared/client/v1/kubernetes/kubernetes';
+import { DeletionDialogModule } from '../../../shared/deletion-dialog/deletion-dialog.module';
+import { ListClusterrolebindingComponent } from './list-clusterrolebinding/list-clusterrolebinding.component';
+
+@NgModule({
+  imports: [
+    SharedModule,
+    ReactiveFormsModule,
+    DeletionDialogModule
+  ],
+  providers: [
+    KubernetesClient
+  ],
+  exports: [],
+  declarations: [
+    KubeClusterrolebindingComponent,
+    ListClusterrolebindingComponent
+  ]
+})
+
+export class KubeClusterrolebindingModule {
+}
diff --git a/src/frontend/src/app/admin/kubernetes/clusterrolebinding/list-clusterrolebinding/list-clusterrolebinding.component.html b/src/frontend/src/app/admin/kubernetes/clusterrolebinding/list-clusterrolebinding/list-clusterrolebinding.component.html
new file mode 100644
index 000000000..07d142739
--- /dev/null
+++ b/src/frontend/src/app/admin/kubernetes/clusterrolebinding/list-clusterrolebinding/list-clusterrolebinding.component.html
@@ -0,0 +1,40 @@
+<clr-datagrid (clrDgRefresh)="refresh($event)">
+  <clr-dg-column class="col-app-name" [clrDgField]="'name'">
+    <ng-container *clrDgHideableColumn="showState['name']">
+      {{'ADMIN.KUBERNETES.CLUSTERROLEBINDING.LIST.NAME' | translate}}
+    </ng-container>
+  </clr-dg-column>
+  <clr-dg-column>
+    <ng-container *clrDgHideableColumn="showState['label']">
+      {{'ADMIN.KUBERNETES.CLUSTERROLEBINDING.LIST.LABEL' | translate}}
+    </ng-container>
+  </clr-dg-column>
+  <clr-dg-column [clrDgField]="'creationTimestamp'">
+    <ng-container *clrDgHideableColumn="showState['age']">
+      {{'ADMIN.KUBERNETES.CLUSTERROLEBINDING.LIST.AGE' | translate}}
+    </ng-container>
+  </clr-dg-column>
+
+
+  <clr-dg-row *ngFor="let obj of resources" [clrDgItem]="obj">
+    <clr-dg-action-overflow>
+      <button class="action-item" (click)="onEditEvent(obj)">{{'ADMIN.KUBERNETES.ACTION.EDIT' | translate}}</button>
+      <button class="action-item" (click)="onDeleteEvent(obj)">{{'ADMIN.KUBERNETES.ACTION.DELETE' | translate}}</button>
+    </clr-dg-action-overflow>
+    <clr-dg-cell class="col-app-name"> {{ obj.metadata.name }} </clr-dg-cell>
+    <clr-dg-cell>
+      <div *ngFor="let label of obj.metadata.labels | keyvalue" class="version-text">
+        <a href="javascript:" (click)="versionDetail(label.key + ': ' + label.value)">{{label.key}}: {{label.value}}</a>
+      </div>
+    </clr-dg-cell>
+    <clr-dg-cell> {{ obj.metadata.creationTimestamp | relativeTime}} </clr-dg-cell>
+  </clr-dg-row>
+  <clr-dg-footer>
+    <wayne-paginate
+      [(currentPage)]="currentPage"
+      [total]="page.totalCount"
+      [pageSizes]="[10, 20, 50]"
+      (sizeChange)="pageSizeChange($event)">
+    </wayne-paginate>
+  </clr-dg-footer>
+</clr-datagrid>
diff --git a/src/frontend/src/app/admin/kubernetes/clusterrolebinding/list-clusterrolebinding/list-clusterrolebinding.component.ts b/src/frontend/src/app/admin/kubernetes/clusterrolebinding/list-clusterrolebinding/list-clusterrolebinding.component.ts
new file mode 100644
index 000000000..059e721bf
--- /dev/null
+++ b/src/frontend/src/app/admin/kubernetes/clusterrolebinding/list-clusterrolebinding/list-clusterrolebinding.component.ts
@@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core';
+import { KubernetesListResource } from '../../../../shared/base/kubernetes-namespaced/kubernetes-list-resource';
+import { TplDetailService } from '../../../../shared/tpl-detail/tpl-detail.service';
+
+@Component({
+  selector: 'wayne-list-clusterrolebinding',
+  templateUrl: './list-clusterrolebinding.component.html'
+})
+
+export class ListClusterrolebindingComponent extends KubernetesListResource {
+  @Input() resources: any[];
+  @Input() showState: object;
+
+  constructor(public tplDetailService: TplDetailService) {
+    super(tplDetailService);
+  }
+
+}
diff --git a/src/frontend/src/app/admin/kubernetes/deployment/kube-deployment.component.html b/src/frontend/src/app/admin/kubernetes/deployment/kube-deployment.component.html
index 1eb754758..f47486f44 100644
--- a/src/frontend/src/app/admin/kubernetes/deployment/kube-deployment.component.html
+++ b/src/frontend/src/app/admin/kubernetes/deployment/kube-deployment.component.html
@@ -2,44 +2,48 @@
   <div class="clr-col-lg-12 clr-col-md-12 clr-col-sm-12 clr-col-xs-12">
     <div class="table-search">
       <div class="table-search-left">
-        <button class="wayne-button normal" (click)="retrieve()">
-          刷新
+        <button class="wayne-button normal" (click)="createResource()">
+          {{'ADMIN.KUBERNETES.DEPLOYMENT.CREATE' | translate}}
         </button>
-        <wayne-filter-box (confirm)="confirmEvent()" (cancel)="cancelEvent()">
+        <button class="wayne-button normal" (click)="retrieveResource()">
+          {{'ADMIN.KUBERNETES.ACTION.REFRESH' | translate}}
+        </button>
+        <wayne-filter-box (confirm)="onConfirmEvent()" (cancel)="onCancelEvent()">
           <wayne-checkbox-group [(ngModel)]="showList">
-            <wayne-checkbox value="name">名称</wayne-checkbox>
-            <wayne-checkbox value="label">Label</wayne-checkbox>
-            <wayne-checkbox value="containers">镜像</wayne-checkbox>
-            <wayne-checkbox value="status">容器状态</wayne-checkbox>
-            <wayne-checkbox value="age">Age</wayne-checkbox>
+            <wayne-checkbox value="name">{{'ADMIN.KUBERNETES.DEPLOYMENT.LIST.NAME' | translate}}</wayne-checkbox>
+            <wayne-checkbox value="label">{{'ADMIN.KUBERNETES.DEPLOYMENT.LIST.LABEL' | translate}}</wayne-checkbox>
+            <wayne-checkbox value="containers">{{'ADMIN.KUBERNETES.DEPLOYMENT.LIST.IMAGES' | translate}}</wayne-checkbox>
+            <wayne-checkbox value="status">{{'ADMIN.KUBERNETES.DEPLOYMENT.LIST.STATUS' | translate}}</wayne-checkbox>
+            <wayne-checkbox value="age">{{'ADMIN.KUBERNETES.DEPLOYMENT.LIST.AGE' | translate}}</wayne-checkbox>
           </wayne-checkbox-group>
         </wayne-filter-box>
-        <label for="namespace_name" class="clr-col-md-3">Kubernetes 命名空间:</label>
-          <wayne-select [(ngModel)]="namespace"  (change)="retrieve()"
-                        searchable
-                        name="namespace_name"
-                        [placeholder]="'PLACEHOLDER.CHOOSE' | translate"
-                        style="margin-left: 12px;">
-            <wayne-option *ngFor="let ns of namespaces" [value]="ns">{{ns}}</wayne-option>
-          </wayne-select>
-
+        <label for="namespace_name" class="clr-col-md-3">{{'ADMIN.KUBERNETES.LABEL.NAMESPACE' | translate}}</label>
+        <wayne-select [(ngModel)]="namespace" (change)="retrieveResource()"
+                      searchable
+                      name="namespace_name"
+                      [placeholder]="'PLACEHOLDER.CHOOSE' | translate"
+                      style="margin-left: 12px;">
+          <wayne-option *ngFor="let ns of namespaces" [value]="ns">{{ns}}</wayne-option>
+        </wayne-select>
       </div>
     </div>
-    <kube-list-deployment
-      [deployments]="changedDeployments"
+
+    <wayne-list-deployment
+      [resources]="resources"
+      [showState]="showState"
+      (delete)="onDeleteResourceEvent($event)"
+      (edit)="onEditResourceEvent($event)"
       [page]="pageState.page"
-      (detail)="detail($event)"
+      [cluster]="cluster"
       (migration)="migration($event)"
-      [showState]="showState"
-      (paginate)="retrieve($event)"></kube-list-deployment>
+      (paginate)="retrieveResource($event)">
+    </wayne-list-deployment>
   </div>
 </div>
-<kube-migration-deployment></kube-migration-deployment>
-<wayne-ace-editor (outputObj)="save($event)"
-                  [warningMsg]="'通过 Wayne 管理的资源请不要在此更新，否则可能会导致与 Wayne 模版不一致，再次通过 Wayne 发布时出现异常！'">
-</wayne-ace-editor>
-<wayne-float-window value="{{cluster}}">
+<kube-migration></kube-migration>
+<deletion-dialog (outputObj)="confirmDeleteEvent($event)"></deletion-dialog>
+<wayne-ace-editor (createOutputObj)="onCreateResourceEvent($event)" (outputObj)="onSaveResourceEvent($event)"></wayne-ace-editor>
+<wayne-float-window value="{{ cluster }}">
   <wayne-float-window-item *ngFor="let cluster of clusters" [value]="cluster"
-                           (click)="jumpTo(cluster)"></wayne-float-window-item>
+                           (click)="jumpToHref(cluster)"></wayne-float-window-item>
 </wayne-float-window>
-
diff --git a/src/frontend/src/app/admin/kubernetes/deployment/kube-deployment.component.ts b/src/frontend/src/app/admin/kubernetes/deployment/kube-deployment.component.ts
index aea7088a4..26a458345 100644
--- a/src/frontend/src/app/admin/kubernetes/deployment/kube-deployment.component.ts
+++ b/src/frontend/src/app/admin/kubernetes/deployment/kube-deployment.component.ts
@@ -1,169 +1,65 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { ClrDatagridStateInterface } from '@clr/angular';
-import { Subscription } from 'rxjs/Subscription';
-import { DeploymentClient } from '../../../shared/client/v1/kubernetes/deployment';
-import { PageState } from '../../../shared/page/page-state';
-import { BreadcrumbService } from '../../../shared/client/v1/breadcrumb.service';
 import { MessageHandlerService } from '../../../shared/message-handler/message-handler.service';
-import { KubeListDeploymentComponent } from './list/kube-list-deployment.component';
 import { ClusterService } from '../../../shared/client/v1/cluster.service';
-import { DeploymentList } from '../../../shared/model/v1/deployment-list';
-import { AdminDefaultApiId } from '../../../shared/shared.const';
-import { AceEditorService } from '../../../shared/ace-editor/ace-editor.service';
-import { KubeMigrationDeploymentComponent } from './migration/kube-migration-deployment.component';
-import { NamespaceClient } from '../../../shared/client/v1/kubernetes/namespace';
+import { AuthService } from '../../../shared/auth/auth.service';
 import { AceEditorComponent } from '../../../shared/ace-editor/ace-editor.component';
-import { KubeDeployment } from '../../../shared/model/v1/kubernetes/deployment';
+import { KubernetesClient } from '../../../shared/client/v1/kubernetes/kubernetes';
+import { KubeResourceDeployment } from '../../../shared/shared.const';
+import { KubernetesNamespacedResource } from '../../../shared/base/kubernetes-namespaced/kubernetes-namespaced-resource';
+import { DeletionDialogComponent } from '../../../shared/deletion-dialog/deletion-dialog.component';
+import { MigrationComponent } from './migration/migration.component';
+import { ListDeploymentComponent } from './list-deployment/list-deployment.component';
 
 const showState = {
   'name': {hidden: false},
   'label': {hidden: false},
   'containers': {hidden: false},
   'status': {hidden: false},
-  'age': {hidden: false}
+  'age': {hidden: false},
 };
 
 @Component({
-  selector: 'kubernetes-deployment',
+  selector: 'wayne-kube-deployment',
   templateUrl: './kube-deployment.component.html'
 })
-export class KubeDeploymentComponent implements OnInit {
-  @ViewChild(KubeListDeploymentComponent)
-  listDeployment: KubeListDeploymentComponent;
-  @ViewChild(KubeMigrationDeploymentComponent)
-  migrationDeployment: KubeMigrationDeploymentComponent;
-  @ViewChild(AceEditorComponent)
-  editModal: AceEditorComponent;
-
-  namespace: string;
-  cluster: string;
-  clusters: Array<any>;
-  changedDeployments: DeploymentList[];
-  pageState: PageState = new PageState();
-  subscription: Subscription;
-
-  showList: any[] = Array();
-  showState: object = showState;
-
-  namespaces: string[];
-
-  constructor(private breadcrumbService: BreadcrumbService,
-              private deploymentClient: DeploymentClient,
-              private clusterService: ClusterService,
-              private namespaceClient: NamespaceClient,
-              private route: ActivatedRoute,
-              private router: Router,
-              private aceEditorService: AceEditorService,
-              private messageHandlerService: MessageHandlerService) {
-  }
-
-  initShow() {
-    this.showList = [];
-    Object.keys(this.showState).forEach(key => {
-      if (!this.showState[key].hidden) {
-        this.showList.push(key);
-      }
-    });
-  }
 
-  confirmEvent() {
-    Object.keys(this.showState).forEach(key => {
-      if (this.showList.indexOf(key) > -1) {
-        this.showState[key] = {hidden: false};
-      } else {
-        this.showState[key] = {hidden: true};
-      }
-    });
-  }
+export class KubeDeploymentComponent extends KubernetesNamespacedResource implements OnInit, OnDestroy {
+  @ViewChild(ListDeploymentComponent)
+  listResourceComponent: ListDeploymentComponent;
 
-  cancelEvent() {
-    this.initShow();
+  @ViewChild(AceEditorComponent)
+  aceEditorModal: AceEditorComponent;
+
+  @ViewChild(DeletionDialogComponent)
+  deletionDialogComponent: DeletionDialogComponent;
+
+  @ViewChild(MigrationComponent)
+  migrationComponent: MigrationComponent;
+
+  constructor(public kubernetesClient: KubernetesClient,
+              public route: ActivatedRoute,
+              public router: Router,
+              public clusterService: ClusterService,
+              public authService: AuthService,
+              public messageHandlerService: MessageHandlerService) {
+    super(kubernetesClient, route, router, clusterService, authService, messageHandlerService);
+    super.registResourceType('deployment');
+    super.registKubeResource(KubeResourceDeployment);
+    super.registShowSate(showState);
   }
 
   ngOnInit() {
-    this.initShow();
-    const cluster = this.route.snapshot.params['cluster'];
-    this.clusterService.getNames().subscribe(
-      response => {
-        const data = response.data;
-        this.clusters = data.map(item => item.name);
-        if (data && data.length > 0 && !cluster) {
-          this.router.navigateByUrl(`admin/kubernetes/deployment/${data[0].name}`);
-          return;
-        }
-        if (cluster) {
-          this.jumpTo(cluster);
-        }
-      },
-      error => this.messageHandlerService.handleError(error)
-    );
-  }
-
-  jumpTo(cluster: string) {
-    this.cluster = cluster;
-    this.router.navigateByUrl(`admin/kubernetes/deployment/${cluster}`);
-    this.namespaceClient.getNames(cluster).subscribe(
-      resp => {
-        this.namespaces = resp.data;
-        this.namespace = this.namespaces && this.namespaces.length > 0 ? this.namespaces[0] : 'default';
-        this.retrieve();
-      },
-      error => this.messageHandlerService.handleError(error)
-    );
+    super.ngOnInit();
   }
 
-  detail(deploymentList: DeploymentList) {
-    this.deploymentClient.get(AdminDefaultApiId, this.cluster, deploymentList.objectMeta.namespace, deploymentList.objectMeta.name)
-      .subscribe(
-        response => {
-          const data = response.data;
-          this.editModal.openModal(data, '编辑节点', true);
-        },
-        error => this.messageHandlerService.handleError(error)
-      );
+  ngOnDestroy(): void {
+    super.ngOnDestroy();
   }
 
-  migration(deploymentList: DeploymentList) {
-    this.deploymentClient.get(AdminDefaultApiId, this.cluster, deploymentList.objectMeta.namespace, deploymentList.objectMeta.name)
-      .subscribe(
-        response => {
-          const data = response.data;
-          this.migrationDeployment.openModal(this.cluster, data);
-        },
-        error => this.messageHandlerService.handleError(error)
-      );
-  }
-
-  save(obj: KubeDeployment) {
-    this.deploymentClient.update(AdminDefaultApiId, this.cluster, obj.metadata.namespace, obj.metadata.name, obj).subscribe(
-      resp => {
-        this.messageHandlerService.showSuccess('更新成功！');
-        this.retrieve();
-      },
-      error => {
-        this.messageHandlerService.handleError(error);
-      }
-    );
-
-  }
 
-  retrieve(state?: ClrDatagridStateInterface): void {
-    if (state) {
-      this.pageState = PageState.fromState(state, {totalPage: this.pageState.page.totalPage, totalCount: this.pageState.page.totalCount});
-    }
-    if (this.cluster) {
-      this.deploymentClient.listPage(this.pageState, this.cluster, this.namespace)
-        .subscribe(
-          response => {
-            const data = response.data;
-            this.pageState.page.totalPage = data.totalPage;
-            this.pageState.page.totalCount = data.totalCount;
-            this.changedDeployments = data.list;
-          },
-          error => this.messageHandlerService.handleError(error)
-        );
-    }
+  migration(obj: any) {
+    this.migrationComponent.openModal(this.cluster, obj);
   }
 
 }
diff --git a/src/frontend/src/app/admin/kubernetes/deployment/kube-deployment.module.ts b/src/frontend/src/app/admin/kubernetes/deployment/kube-deployment.module.ts
index aac6fbc06..7f582f7a6 100644
--- a/src/frontend/src/app/admin/kubernetes/deployment/kube-deployment.module.ts
+++ b/src/frontend/src/app/admin/kubernetes/deployment/kube-deployment.module.ts
@@ -1,28 +1,26 @@
 import { NgModule } from '@angular/core';
 import { SharedModule } from '../../../shared/shared.module';
-import { KubeDeploymentComponent } from './kube-deployment.component';
 import { ReactiveFormsModule } from '@angular/forms';
-import { DeploymentClient } from '../../../shared/client/v1/kubernetes/deployment';
-import { KubeListDeploymentComponent } from './list/kube-list-deployment.component';
-import { KubeMigrationDeploymentComponent } from './migration/kube-migration-deployment.component';
+import { KubeDeploymentComponent } from './kube-deployment.component';
+import { KubernetesClient } from '../../../shared/client/v1/kubernetes/kubernetes';
+import { DeletionDialogModule } from '../../../shared/deletion-dialog/deletion-dialog.module';
+import { MigrationComponent } from './migration/migration.component';
+import { ListDeploymentComponent } from './list-deployment/list-deployment.component';
 
 @NgModule({
   imports: [
     SharedModule,
     ReactiveFormsModule,
+    DeletionDialogModule
   ],
   providers: [
-    DeploymentClient
-  ],
-  exports: [
-    KubeDeploymentComponent,
-    KubeListDeploymentComponent,
-    KubeMigrationDeploymentComponent
+    KubernetesClient
   ],
+  exports: [],
   declarations: [
     KubeDeploymentComponent,
-    KubeListDeploymentComponent,
-    KubeMigrationDeploymentComponent
+    ListDeploymentComponent,
+    MigrationComponent
   ]
 })
 
diff --git a/src/frontend/src/app/admin/kubernetes/deployment/list-deployment/list-deployment.component.html b/src/frontend/src/app/admin/kubernetes/deployment/list-deployment/list-deployment.component.html
new file mode 100644
index 000000000..e495faa72
--- /dev/null
+++ b/src/frontend/src/app/admin/kubernetes/deployment/list-deployment/list-deployment.component.html
@@ -0,0 +1,63 @@
+<clr-datagrid (clrDgRefresh)="refresh($event)">
+  <clr-dg-column class="col-app-name" [clrDgField]="'name'">
+    <ng-container *clrDgHideableColumn="showState['name']">
+      {{'ADMIN.KUBERNETES.DEPLOYMENT.LIST.NAME' | translate}}
+    </ng-container>
+  </clr-dg-column>
+  <clr-dg-column>
+    <ng-container *clrDgHideableColumn="showState['label']">
+      {{'ADMIN.KUBERNETES.DEPLOYMENT.LIST.LABEL' | translate}}
+    </ng-container>
+  </clr-dg-column>
+  <clr-dg-column class="col-version">
+    <ng-container *clrDgHideableColumn="showState['containers']">
+      {{'ADMIN.KUBERNETES.DEPLOYMENT.LIST.IMAGES' | translate}}
+    </ng-container>
+  </clr-dg-column>
+  <clr-dg-column>
+    <ng-container *clrDgHideableColumn="showState['status']">
+      {{'ADMIN.KUBERNETES.DEPLOYMENT.LIST.STATUS' | translate}}
+    </ng-container>
+  </clr-dg-column>
+  <clr-dg-column [clrDgField]="'creationTimestamp'">
+    <ng-container *clrDgHideableColumn="showState['age']">
+      {{'ADMIN.KUBERNETES.DEPLOYMENT.LIST.AGE' | translate}}
+    </ng-container>
+  </clr-dg-column>
+
+
+  <clr-dg-row *ngFor="let obj of resources" [clrDgItem]="obj">
+    <clr-dg-action-overflow>
+      <button class="action-item" (click)="onEditEvent(obj)">{{'ADMIN.KUBERNETES.ACTION.EDIT' | translate}}</button>
+      <button class="action-item" (click)="onDeleteEvent(obj)">{{'ADMIN.KUBERNETES.ACTION.DELETE' | translate}}</button>
+      <button class="action-item" (click)="migrationResource(obj)">{{'ADMIN.KUBERNETES.ACTION.MIGRATION' | translate}}</button>
+    </clr-dg-action-overflow>
+    <clr-dg-cell class="col-app-name"> {{ obj.metadata.name }} </clr-dg-cell>
+    <clr-dg-cell>
+      <div *ngFor="let label of obj.metadata.labels | keyvalue" class="version-text">
+        <a href="javascript:" (click)="versionDetail(label.key + ': ' + label.value)">{{label.key}}: {{label.value}}</a>
+      </div>
+    </clr-dg-cell>
+    <clr-dg-cell class="col-version">
+      <div *ngFor="let container of obj.spec.template.spec.containers" class="version-text">
+        <a href="javascript:" (click)="versionDetail(container.image)">{{container.image}}</a>
+      </div>
+    </clr-dg-cell>
+    <clr-dg-cell>
+      {{obj.status.readyReplicas ? obj.status.readyReplicas : 0 }}/{{obj.spec.replicas}}
+      <clr-icon style="color: #FF3434" shape="exclamation-triangle" *ngIf="obj.status.readyReplicas !== obj.spec.replicas"
+                class="is-solid"></clr-icon>
+      <clr-icon style="color: green" shape="success-standard" *ngIf="obj.status.readyReplicas === obj.spec.replicas"
+                class="is-solid"></clr-icon>
+    </clr-dg-cell>
+    <clr-dg-cell> {{ obj.metadata.creationTimestamp | relativeTime}} </clr-dg-cell>
+  </clr-dg-row>
+  <clr-dg-footer>
+    <wayne-paginate
+      [(currentPage)]="currentPage"
+      [total]="page.totalCount"
+      [pageSizes]="[10, 20, 50]"
+      (sizeChange)="pageSizeChange($event)">
+    </wayne-paginate>
+  </clr-dg-footer>
+</clr-datagrid>
diff --git a/src/frontend/src/app/admin/kubernetes/deployment/list-deployment/list-deployment.component.ts b/src/frontend/src/app/admin/kubernetes/deployment/list-deployment/list-deployment.component.ts
new file mode 100644
index 000000000..2edbfa68d
--- /dev/null
+++ b/src/frontend/src/app/admin/kubernetes/deployment/list-deployment/list-deployment.component.ts
@@ -0,0 +1,23 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { KubernetesListResource } from '../../../../shared/base/kubernetes-namespaced/kubernetes-list-resource';
+import { TplDetailService } from '../../../../shared/tpl-detail/tpl-detail.service';
+
+@Component({
+  selector: 'wayne-list-deployment',
+  templateUrl: './list-deployment.component.html'
+})
+
+export class ListDeploymentComponent extends KubernetesListResource {
+  @Input() resources: any[];
+  @Input() showState: object;
+
+  @Output() migration = new EventEmitter<any>();
+
+  constructor(public tplDetailService: TplDetailService) {
+    super(tplDetailService);
+  }
+
+  migrationResource(obj: any) {
+    this.migration.emit(obj);
+  }
+}
diff --git a/src/frontend/src/app/admin/kubernetes/deployment/list/kube-list-deployment.component.html b/src/frontend/src/app/admin/kubernetes/deployment/list/kube-list-deployment.component.html
deleted file mode 100644
index 148c18a8d..000000000
--- a/src/frontend/src/app/admin/kubernetes/deployment/list/kube-list-deployment.component.html
+++ /dev/null
@@ -1,62 +0,0 @@
-<clr-datagrid (clrDgRefresh)="refresh($event)">
-  <clr-dg-column [clrDgField]="'name'">
-    <ng-container *clrDgHideableColumn="showState['name']">
-      名称
-    </ng-container>
-  </clr-dg-column>
-  <clr-dg-column class="col-version">
-    <ng-container *clrDgHideableColumn="showState['label']">
-      标签
-    </ng-container>
-  </clr-dg-column>
-  <clr-dg-column class="col-version">
-    <ng-container *clrDgHideableColumn="showState['containers']">
-      镜像
-    </ng-container>
-  </clr-dg-column>
-  <clr-dg-column>
-    <ng-container *clrDgHideableColumn="showState['status']">
-      容器状态
-    </ng-container>
-  </clr-dg-column>
-  <clr-dg-column class="col-time">
-    <ng-container *clrDgHideableColumn="showState['age']">
-      已创建
-    </ng-container>
-  </clr-dg-column>
-
-
-  <clr-dg-row *ngFor="let deployment of deployments" [clrDgItem]="deployment">
-    <clr-dg-action-overflow>
-      <button class="action-item" (click)="detailDeployment(deployment)">{{'BUTTON.EDIT' | translate}}</button>
-      <button class="action-item" (click)="migrationDeployment(deployment)">迁移</button>
-    </clr-dg-action-overflow>
-    <clr-dg-cell>{{deployment.objectMeta.name}}</clr-dg-cell>
-    <clr-dg-cell class="col-version">
-      <div *ngFor="let label of deployment.objectMeta.labels | keyvalue" class="version-text">
-        <a href="javascript:" (click)="versionDetail(label.key + ': ' + label.value)">{{label.key}}: {{label.value}}</a>
-      </div>
-    </clr-dg-cell>
-    <clr-dg-cell class="col-version">
-      <div *ngFor="let container of deployment.containers" class="version-text">
-        <a href="javascript:" (click)="versionDetail(container)">{{container}}</a>
-      </div>
-    </clr-dg-cell>
-    <clr-dg-cell>
-      {{deployment.pods.current}}/{{deployment.pods.desired}}
-      <clr-icon style="color: #FF3434" shape="exclamation-triangle" *ngIf="deployment.pods.current !== deployment.pods.desired"
-                class="is-solid"></clr-icon>
-      <clr-icon style="color: green" shape="success-standard" *ngIf="deployment.pods.current === deployment.pods.desired"
-                class="is-solid"></clr-icon>
-    </clr-dg-cell>
-    <clr-dg-cell class="col-time">{{deployment.objectMeta.creationTimestamp | relativeTime}}</clr-dg-cell>
-  </clr-dg-row>
-  <clr-dg-footer>
-    <wayne-paginate
-      [(currentPage)]="currentPage"
-      [total]="page.totalCount"
-      [pageSizes]="[10, 20, 50]"
-      (sizeChange)="pageSizeChange($event)">
-    </wayne-paginate>
-  </clr-dg-footer>
-</clr-datagrid>
diff --git a/src/frontend/src/app/admin/kubernetes/deployment/list/kube-list-deployment.component.ts b/src/frontend/src/app/admin/kubernetes/deployment/list/kube-list-deployment.component.ts
deleted file mode 100644
index 5cf27d1d1..000000000
--- a/src/frontend/src/app/admin/kubernetes/deployment/list/kube-list-deployment.component.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { Router } from '@angular/router';
-import { ClrDatagridStateInterface } from '@clr/angular';
-import { Page } from '../../../../shared/page/page-state';
-import { BreadcrumbService } from '../../../../shared/client/v1/breadcrumb.service';
-import { DeploymentList } from '../../../../shared/model/v1/deployment-list';
-import { TplDetailService } from '../../../../shared/tpl-detail/tpl-detail.service';
-
-@Component({
-  selector: 'kube-list-deployment',
-  templateUrl: 'kube-list-deployment.component.html'
-})
-export class KubeListDeploymentComponent implements OnInit {
-
-  @Input() deployments: DeploymentList[];
-  @Input() page: Page;
-  @Input() showState: object;
-  currentPage = 1;
-  state: ClrDatagridStateInterface;
-
-  @Output() paginate = new EventEmitter<ClrDatagridStateInterface>();
-  @Output() detail = new EventEmitter<DeploymentList>();
-  @Output() migration = new EventEmitter<DeploymentList>();
-
-  constructor(
-    private breadcrumbService: BreadcrumbService,
-    private router: Router,
-    private tplDetailService: TplDetailService) {
-  }
-
-  ngOnInit(): void {
-  }
-
-  pageSizeChange(pageSize: number) {
-    this.state.page.to = pageSize - 1;
-    this.state.page.size = pageSize;
-    this.currentPage = 1;
-    this.paginate.emit(this.state);
-  }
-
-  refresh(state: ClrDatagridStateInterface) {
-    this.state = state;
-    this.paginate.emit(state);
-  }
-
-  versionDetail(version: string) {
-    this.tplDetailService.openModal(version, '版本');
-  }
-
-  detailDeployment(obj: DeploymentList) {
-    this.detail.emit(obj);
-  }
-
-  migrationDeployment(obj: DeploymentList) {
-    this.migration.emit(obj);
-  }
-}
diff --git a/src/frontend/src/app/admin/kubernetes/deployment/migration/kube-migration-deployment.component.ts b/src/frontend/src/app/admin/kubernetes/deployment/migration/kube-migration-deployment.component.ts
deleted file mode 100644
index df17ad63b..000000000
--- a/src/frontend/src/app/admin/kubernetes/deployment/migration/kube-migration-deployment.component.ts
+++ /dev/null
@@ -1,124 +0,0 @@
-import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
-import { NgForm } from '@angular/forms';
-import { AceEditorBoxComponent } from '../../../../shared/ace-editor/ace-editor-box/ace-editor-box.component';
-import { App } from '../../../../shared/model/v1/app';
-import { DeploymentService } from '../../../../shared/client/v1/deployment.service';
-import { AppService } from '../../../../shared/client/v1/app.service';
-import { AceEditorService } from '../../../../shared/ace-editor/ace-editor.service';
-import { MessageHandlerService } from '../../../../shared/message-handler/message-handler.service';
-import { AceEditorMsg } from '../../../../shared/ace-editor/ace-editor';
-import { isUndefined } from 'util';
-import { KubeDeployment } from '../../../../shared/model/v1/kubernetes/deployment';
-import { defaultDeployment } from '../../../../shared/default-models/deployment.const';
-import { AuthService } from '../../../../shared/auth/auth.service';
-import { Deployment, DeploymentMetaData } from '../../../../shared/model/v1/deployment';
-import { DeploymentTplService } from '../../../../shared/client/v1/deploymenttpl.service';
-import { DeploymentTpl } from '../../../../shared/model/v1/deploymenttpl';
-
-@Component({
-  selector: 'kube-migration-deployment',
-  templateUrl: 'kube-migration-deployment.component.html'
-})
-export class KubeMigrationDeploymentComponent implements OnInit {
-
-  @Output() create = new EventEmitter<boolean>();
-  modalOpened: boolean;
-
-  @ViewChild('ngForm')
-  currentForm: NgForm;
-
-  @ViewChild(AceEditorBoxComponent)
-  aceBox: any;
-
-  deployment: KubeDeployment;
-  isSubmitOnGoing = false;
-  cluster: string;
-
-  apps: App[];
-  selectedApp: App;
-
-  constructor(private deploymentService: DeploymentService,
-              private deploymentTplService: DeploymentTplService,
-              private appService: AppService,
-              public authService: AuthService,
-              private aceEditorService: AceEditorService,
-              private messageHandlerService: MessageHandlerService) {
-
-  }
-
-  ngOnInit(): void {
-    this.appService
-      .getNames()
-      .subscribe(
-        response => {
-          this.apps = response.data;
-        },
-        error => this.messageHandlerService.handleError(error)
-      );
-
-  }
-
-  openModal(cluster: string, deployment: KubeDeployment) {
-    this.modalOpened = true;
-    this.isSubmitOnGoing = false;
-    this.cluster = cluster;
-
-    this.deployment = JSON.parse(defaultDeployment);
-    this.deployment.metadata.name = deployment.metadata.name;
-    this.deployment.metadata.labels = deployment.metadata.labels;
-    this.deployment.metadata.annotations = deployment.metadata.annotations;
-    this.deployment.spec = deployment.spec;
-    this.initJsonEditor();
-  }
-
-  initJsonEditor(): void {
-    this.aceEditorService.announceMessage(AceEditorMsg.Instance(this.deployment));
-  }
-
-  onCancel() {
-    this.modalOpened = false;
-    this.currentForm.reset();
-  }
-
-  onSubmit() {
-    if (this.isSubmitOnGoing) {
-      return;
-    }
-    this.isSubmitOnGoing = true;
-    const deployment = new Deployment();
-    deployment.name = this.deployment.metadata.name;
-    deployment.appId = this.selectedApp.id;
-    const metaData = new DeploymentMetaData();
-    metaData.replicas = {[this.cluster]: this.deployment.spec.replicas};
-    deployment.metaData = JSON.stringify(metaData);
-    this.deploymentService.create(deployment).subscribe(
-      resp => {
-        const data = resp.data;
-        const deploymentTpl = new DeploymentTpl();
-        deploymentTpl.name = this.deployment.metadata.name;
-        deploymentTpl.deploymentId = data.id;
-        deploymentTpl.template = JSON.stringify(this.deployment);
-        deploymentTpl.description = 'migration from kubernetes. ';
-        this.deploymentTplService.create(deploymentTpl, this.selectedApp.id).subscribe(
-          () => {
-            this.messageHandlerService.showSuccess('创建部署和部署模版成功！请前往前台手动发布部署到相应机房！');
-          },
-          error => {
-            this.messageHandlerService.handleError(error);
-          });
-      },
-      error => {
-        this.messageHandlerService.handleError(error);
-      }
-    );
-    this.modalOpened = false;
-  }
-
-  public get isValid(): boolean {
-    return this.currentForm &&
-      this.currentForm.valid &&
-      !this.isSubmitOnGoing &&
-      !isUndefined(this.selectedApp);
-  }
-
-}
diff --git a/src/frontend/src/app/admin/kubernetes/deployment/migration/kube-migration-deployment.component.html b/src/frontend/src/app/admin/kubernetes/deployment/migration/migration.component.html
similarity index 70%
rename from src/frontend/src/app/admin/kubernetes/deployment/migration/kube-migration-deployment.component.html
rename to src/frontend/src/app/admin/kubernetes/deployment/migration/migration.component.html
index ce3c96305..488f54eea 100644
--- a/src/frontend/src/app/admin/kubernetes/deployment/migration/kube-migration-deployment.component.html
+++ b/src/frontend/src/app/admin/kubernetes/deployment/migration/migration.component.html
@@ -1,14 +1,14 @@
 <clr-modal [(clrModalOpen)]="modalOpened" [clrModalSize]="'xl'" #modal>
-  <h3 class="modal-title">迁移部署到[{{cluster}}]机房
+  <h3 class="modal-title">迁移资源
     <wayne-modal-operate [modal]="modal" *ngIf="modalOpened"></wayne-modal-operate>
   </h3>
   <div class="modal-body">
     <form #ngForm="ngForm">
       <section class="form-block">
         <div class="form-group" style="padding-left: 135px;">
-          <label for="deployment_app" class="clr-col-md-3 form-group-label-override required">应用</label>
+          <label for="app" class="clr-col-md-3 form-group-label-override required">应用</label>
           <div class="select form-control">
-            <wayne-select name="deployment_app" [(ngModel)]="selectedApp"
+            <wayne-select name="app" [(ngModel)]="selectedApp"
                           searchable
                           [placeholder]="'PLACEHOLDER.CHOOSE' | translate">
               <wayne-option *ngFor="let app of apps" [value]="app">{{app.name}}</wayne-option>
@@ -16,8 +16,8 @@ <h3 class="modal-title">迁移部署到[{{cluster}}]机房
           </div>
         </div>
         <div class="form-group" style="padding-left: 135px;">
-          <label for="deployment_metadata" class="clr-col-md-3 form-group-label-override">部署模版</label>
-          <wayne-ace-editor-box id="deployment_metadata"></wayne-ace-editor-box>
+          <label class="clr-col-md-3 form-group-label-override">模版</label>
+          <wayne-ace-editor-box></wayne-ace-editor-box>
 
         </div>
       </section>
diff --git a/src/frontend/src/app/admin/kubernetes/deployment/migration/migration.component.ts b/src/frontend/src/app/admin/kubernetes/deployment/migration/migration.component.ts
new file mode 100644
index 000000000..37455b35b
--- /dev/null
+++ b/src/frontend/src/app/admin/kubernetes/deployment/migration/migration.component.ts
@@ -0,0 +1,64 @@
+import { Component, OnInit } from '@angular/core';
+import { AppService } from '../../../../shared/client/v1/app.service';
+import { AceEditorService } from '../../../../shared/ace-editor/ace-editor.service';
+import { MessageHandlerService } from '../../../../shared/message-handler/message-handler.service';
+import { MigrationResource } from '../../../../shared/base/kubernetes-namespaced/migration-resource';
+import { KubernetesClient } from '../../../../shared/client/v1/kubernetes/kubernetes';
+import { KubeResourceDeployment } from '../../../../shared/shared.const';
+import { DeploymentService } from '../../../../shared/client/v1/deployment.service';
+import { DeploymentTplService } from '../../../../shared/client/v1/deploymenttpl.service';
+import { Deployment } from '../../../../shared/model/v1/deployment';
+import { DeploymentTpl } from '../../../../shared/model/v1/deploymenttpl';
+
+@Component({
+  selector: 'kube-migration',
+  templateUrl: 'migration.component.html'
+})
+export class MigrationComponent extends MigrationResource implements OnInit {
+
+  constructor(private deploymentService: DeploymentService,
+              private deploymentTplService: DeploymentTplService,
+              public appService: AppService,
+              public kubernetesClient: KubernetesClient,
+              public aceEditorService: AceEditorService,
+              public messageHandlerService: MessageHandlerService) {
+    super(kubernetesClient, appService, aceEditorService, messageHandlerService);
+    super.registKubeResource(KubeResourceDeployment);
+  }
+
+  ngOnInit(): void {
+    super.ngOnInit();
+  }
+
+  onSubmit() {
+    if (this.isSubmitOnGoing) {
+      return;
+    }
+    this.isSubmitOnGoing = true;
+    const resource = new Deployment();
+    resource.name = this.obj.metadata.name;
+    resource.appId = this.selectedApp.id;
+    this.deploymentService.create(resource).subscribe(
+      resp => {
+        const data = resp.data;
+        const tpl = new DeploymentTpl();
+        tpl.name = this.obj.metadata.name;
+        tpl.deploymentId = data.id;
+        tpl.template = JSON.stringify(this.obj);
+        tpl.description = 'migration from kubernetes. ';
+        this.deploymentTplService.create(tpl, this.selectedApp.id).subscribe(
+          () => {
+            this.messageHandlerService.showSuccess('资源创建成功！请前往前台手动发布到相应机房！');
+          },
+          error => {
+            this.messageHandlerService.handleError(error);
+          });
+      },
+      error => {
+        this.messageHandlerService.handleError(error);
+      }
+    );
+    this.modalOpened = false;
+  }
+
+}
diff --git a/src/frontend/src/app/admin/kubernetes/namespace/kube-namespace.component.html b/src/frontend/src/app/admin/kubernetes/namespace/kube-namespace.component.html
index b7ee926bb..7f9bb2a77 100644
--- a/src/frontend/src/app/admin/kubernetes/namespace/kube-namespace.component.html
+++ b/src/frontend/src/app/admin/kubernetes/namespace/kube-namespace.component.html
@@ -2,11 +2,18 @@
   <div class="clr-col-lg-12 clr-col-md-12 clr-col-sm-12 clr-col-xs-12">
     <div class="table-search">
       <div class="table-search-left">
+        <button class="wayne-button normal" (click)="createResource()">
+          {{'ADMIN.KUBERNETES.NAMESPACE.CREATE' | translate}}
+        </button>
+        <button class="wayne-button normal" (click)="retrieveResource()">
+          {{'ADMIN.KUBERNETES.ACTION.REFRESH' | translate}}
+        </button>
         <wayne-filter-box (confirm)="onConfirmEvent()" (cancel)="onCancelEvent()">
           <wayne-checkbox-group [(ngModel)]="showList">
-            <wayne-checkbox value="name">名称</wayne-checkbox>
-            <wayne-checkbox value="status">状态</wayne-checkbox>
-            <wayne-checkbox value="createTime">创建时间</wayne-checkbox>
+            <wayne-checkbox value="name">{{'ADMIN.KUBERNETES.NAMESPACE.LIST.NAME' | translate}}</wayne-checkbox>
+            <wayne-checkbox value="label">{{'ADMIN.KUBERNETES.NAMESPACE.LIST.LABEL' | translate}}</wayne-checkbox>
+            <wayne-checkbox value="status">{{'ADMIN.KUBERNETES.NAMESPACE.LIST.STATUS' | translate}}</wayne-checkbox>
+            <wayne-checkbox value="age">{{'ADMIN.KUBERNETES.NAMESPACE.LIST.AGE' | translate}}</wayne-checkbox>
           </wayne-checkbox-group>
         </wayne-filter-box>
       </div>
@@ -15,17 +22,16 @@
     <wayne-list-namespace
       [resources]="resources"
       [showState]="showState"
-      (refresh)="refresh($event)"
       (delete)="onDeleteResourceEvent($event)"
-      (detail)="onEditResourceEvent($event)"
       (edit)="onEditResourceEvent($event)"
       [page]="pageState.page"
-      (paginate)="retrieveResource($event)"
-    >
+      [cluster]="cluster"
+      (paginate)="retrieveResource($event)">
     </wayne-list-namespace>
   </div>
 </div>
-<wayne-ace-editor (outputObj)="onSaveResourceEvent($event)"></wayne-ace-editor>
+<deletion-dialog (outputObj)="confirmDeleteEvent($event)"></deletion-dialog>
+<wayne-ace-editor (createOutputObj)="onCreateResourceEvent($event)" (outputObj)="onSaveResourceEvent($event)"></wayne-ace-editor>
 <wayne-float-window value="{{ cluster }}">
   <wayne-float-window-item *ngFor="let cluster of clusters" [value]="cluster"
                            (click)="jumpToHref(cluster)"></wayne-float-window-item>
diff --git a/src/frontend/src/app/admin/kubernetes/namespace/kube-namespace.component.scss b/src/frontend/src/app/admin/kubernetes/namespace/kube-namespace.component.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/frontend/src/app/admin/kubernetes/namespace/kube-namespace.component.ts b/src/frontend/src/app/admin/kubernetes/namespace/kube-namespace.component.ts
index b16121739..eedef8dd0 100644
--- a/src/frontend/src/app/admin/kubernetes/namespace/kube-namespace.component.ts
+++ b/src/frontend/src/app/admin/kubernetes/namespace/kube-namespace.component.ts
@@ -1,100 +1,55 @@
 import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { ConfirmationDialogService } from '../../../shared/confirmation-dialog/confirmation-dialog.service';
 import { MessageHandlerService } from '../../../shared/message-handler/message-handler.service';
 import { ClusterService } from '../../../shared/client/v1/cluster.service';
 import { AuthService } from '../../../shared/auth/auth.service';
 import { AceEditorComponent } from '../../../shared/ace-editor/ace-editor.component';
+import { KubernetesClient } from '../../../shared/client/v1/kubernetes/kubernetes';
+import { KubeResourceNamespace } from '../../../shared/shared.const';
+import { DeletionDialogComponent } from '../../../shared/deletion-dialog/deletion-dialog.component';
+import { KubernetesUnNamespacedResource } from '../../../shared/base/kubernetes-namespaced/kubernetes-unnamespaced-resource';
 import { ListNamespaceComponent } from './list-namespace/list-namespace.component';
-import { NamespaceClient } from '../../../shared/client/v1/kubernetes/namespace';
-import { KubernetesResource } from '../../../shared/base/kubernetes/kubernetes-resource';
-import { NamespaceList } from '../../../shared/model/v1/namespace-list';
-import { KubeNamespace } from '../../../shared/model/v1/kubernetes/namespace';
 
 const showState = {
   'name': {hidden: false},
+  'label': {hidden: false},
   'status': {hidden: false},
-  'createTime': {hidden: false},
+  'age': {hidden: false},
 };
 
 @Component({
   selector: 'wayne-kube-namespace',
-  templateUrl: './kube-namespace.component.html',
-  styleUrls: ['./kube-namespace.component.scss']
+  templateUrl: './kube-namespace.component.html'
 })
 
-export class KubeNamespaceComponent extends KubernetesResource implements OnInit, OnDestroy {
+export class KubeNamespaceComponent extends KubernetesUnNamespacedResource implements OnInit, OnDestroy {
   @ViewChild(ListNamespaceComponent)
   listResourceComponent: ListNamespaceComponent;
 
   @ViewChild(AceEditorComponent)
   aceEditorModal: AceEditorComponent;
 
-  constructor( public namespaceClient: NamespaceClient,
-               public route: ActivatedRoute,
-               public router: Router,
-               public clusterService: ClusterService,
-               public authService: AuthService,
-               public messageHandlerService: MessageHandlerService,
-               public deletionDialogService: ConfirmationDialogService) {
-    super(namespaceClient, route, router, clusterService, authService, messageHandlerService, deletionDialogService);
+  @ViewChild(DeletionDialogComponent)
+  deletionDialogComponent: DeletionDialogComponent;
+
+  constructor(public kubernetesClient: KubernetesClient,
+              public route: ActivatedRoute,
+              public router: Router,
+              public clusterService: ClusterService,
+              public authService: AuthService,
+              public messageHandlerService: MessageHandlerService) {
+    super(kubernetesClient, route, router, clusterService, authService, messageHandlerService);
     super.registResourceType('namespace');
+    super.registKubeResource(KubeResourceNamespace);
     super.registShowSate(showState);
   }
 
   ngOnInit() {
-    this.initShow();
-    this.cluster = this.route.snapshot.params['cluster'];
-    this.clusterService.getNames().subscribe(
-      response => {
-        const data = response.data;
-        this.clusters = data.map(item => item.name);
-        if (data && data.length > 0 && !this.cluster) {
-          this.jumpToHref(data[0].name);
-          return;
-        }
-        this.retrieveResource();
-      },
-      error => this.messageHandlerService.handleError(error)
-    );
+    super.ngOnInit();
   }
 
   ngOnDestroy(): void {
-  }
-
-  onEditResourceEvent(ns: NamespaceList) {
-    this.namespaceClient.getNamespaceDetail( this.cluster, ns.objectMeta.name)
-      .subscribe(
-        response => {
-          const data = response.data;
-          this.aceEditorModal.openModal(data, '编辑 namespace', true);
-        },
-        error => this.messageHandlerService.handleError(error)
-      );
-  }
-
-  onSaveResourceEvent(ns: KubeNamespace) {
-    this.namespaceClient.getNamespaceDetail( this.cluster, ns.metadata.name).subscribe(
-      resp => {
-        const namespace: KubeNamespace = resp.data;
-        namespace.spec = ns.spec;
-        namespace.metadata.labels = ns.metadata.labels;
-        namespace.metadata.annotations = ns.metadata.annotations;
-        this.namespaceClient.update(namespace, this.cluster).subscribe(
-          resp2 => {
-            this.messageHandlerService.showSuccess('namespace 更新成功！');
-            this.retrieveResource();
-          },
-          error => {
-            this.messageHandlerService.handleError(error);
-          }
-        );
-      },
-      error => {
-        this.messageHandlerService.handleError(error);
-      }
-    );
-
+    super.ngOnDestroy();
   }
 
 }
diff --git a/src/frontend/src/app/admin/kubernetes/namespace/kube-namespace.module.ts b/src/frontend/src/app/admin/kubernetes/namespace/kube-namespace.module.ts
index afe161a92..d5dbe2269 100644
--- a/src/frontend/src/app/admin/kubernetes/namespace/kube-namespace.module.ts
+++ b/src/frontend/src/app/admin/kubernetes/namespace/kube-namespace.module.ts
@@ -1,24 +1,21 @@
 import { NgModule } from '@angular/core';
 import { SharedModule } from '../../../shared/shared.module';
-import { PersistentVolumeClient } from '../../../shared/client/v1/kubernetes/persistentvolume';
 import { ReactiveFormsModule } from '@angular/forms';
-import { PersistentVolumeRobinClient } from '../../../shared/client/v1/kubernetes/persistentvolume-robin';
 import { KubeNamespaceComponent } from './kube-namespace.component';
+import { KubernetesClient } from '../../../shared/client/v1/kubernetes/kubernetes';
+import { DeletionDialogModule } from '../../../shared/deletion-dialog/deletion-dialog.module';
 import { ListNamespaceComponent } from './list-namespace/list-namespace.component';
 
 @NgModule({
   imports: [
     SharedModule,
     ReactiveFormsModule,
+    DeletionDialogModule
   ],
   providers: [
-    PersistentVolumeClient,
-    PersistentVolumeRobinClient
-  ],
-  exports: [
-    KubeNamespaceComponent,
-    ListNamespaceComponent
+    KubernetesClient
   ],
+  exports: [],
   declarations: [
     KubeNamespaceComponent,
     ListNamespaceComponent
diff --git a/src/frontend/src/app/admin/kubernetes/namespace/list-namespace/list-namespace.component.html b/src/frontend/src/app/admin/kubernetes/namespace/list-namespace/list-namespace.component.html
index 9cc8a5ef2..61ad959db 100644
--- a/src/frontend/src/app/admin/kubernetes/namespace/list-namespace/list-namespace.component.html
+++ b/src/frontend/src/app/admin/kubernetes/namespace/list-namespace/list-namespace.component.html
@@ -1,28 +1,39 @@
 <clr-datagrid (clrDgRefresh)="refresh($event)">
-  <clr-dg-column [clrDgField]="'name'">
+  <clr-dg-column class="col-app-name" [clrDgField]="'name'">
     <ng-container *clrDgHideableColumn="showState['name']">
-      名称
+      {{'ADMIN.KUBERNETES.NAMESPACE.LIST.NAME' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column>
-    <ng-container *clrDgHideableColumn="showState['status']">
-      状态
+    <ng-container *clrDgHideableColumn="showState['label']">
+      {{'ADMIN.KUBERNETES.NAMESPACE.LIST.LABEL' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column>
-    <ng-container *clrDgHideableColumn="showState['createTime']">
-      创建时间
+    <ng-container *clrDgHideableColumn="showState['status']">
+      {{'ADMIN.KUBERNETES.NAMESPACE.LIST.STATUS' | translate}}
+    </ng-container>
+  </clr-dg-column>
+  <clr-dg-column [clrDgField]="'creationTimestamp'">
+    <ng-container *clrDgHideableColumn="showState['age']">
+      {{'ADMIN.KUBERNETES.NAMESPACE.LIST.AGE' | translate}}
     </ng-container>
   </clr-dg-column>
 
 
-  <clr-dg-row *ngFor="let namespace of resources" [clrDgItem]="namespace">
+  <clr-dg-row *ngFor="let obj of resources" [clrDgItem]="obj">
     <clr-dg-action-overflow>
-      <button class="action-item" (click)="onDetailEvent(namespace)">编辑</button>
+      <button class="action-item" (click)="onEditEvent(obj)">{{'ADMIN.KUBERNETES.ACTION.EDIT' | translate}}</button>
+      <button class="action-item" (click)="onDeleteEvent(obj)">{{'ADMIN.KUBERNETES.ACTION.DELETE' | translate}}</button>
     </clr-dg-action-overflow>
-    <clr-dg-cell> {{namespace.objectMeta.name}} </clr-dg-cell>
-    <clr-dg-cell> {{ namespace.status }} </clr-dg-cell>
-    <clr-dg-cell> {{namespace.objectMeta.creationTimestamp | relativeTime}} </clr-dg-cell>
+    <clr-dg-cell class="col-app-name"> {{ obj.metadata.name }} </clr-dg-cell>
+    <clr-dg-cell>
+      <div *ngFor="let label of obj.metadata.labels | keyvalue" class="version-text">
+        <a href="javascript:" (click)="versionDetail(label.key + ': ' + label.value)">{{label.key}}: {{label.value}}</a>
+      </div>
+    </clr-dg-cell>
+    <clr-dg-cell> {{ obj.status.phase }} </clr-dg-cell>
+    <clr-dg-cell> {{ obj.metadata.creationTimestamp | relativeTime}} </clr-dg-cell>
   </clr-dg-row>
   <clr-dg-footer>
     <wayne-paginate
diff --git a/src/frontend/src/app/admin/kubernetes/namespace/list-namespace/list-namespace.component.scss b/src/frontend/src/app/admin/kubernetes/namespace/list-namespace/list-namespace.component.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/frontend/src/app/admin/kubernetes/namespace/list-namespace/list-namespace.component.ts b/src/frontend/src/app/admin/kubernetes/namespace/list-namespace/list-namespace.component.ts
index f2706eb7a..49b562a0b 100644
--- a/src/frontend/src/app/admin/kubernetes/namespace/list-namespace/list-namespace.component.ts
+++ b/src/frontend/src/app/admin/kubernetes/namespace/list-namespace/list-namespace.component.ts
@@ -1,29 +1,18 @@
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { NamespaceList } from '../../../../shared/model/v1/namespace-list';
-import { KubernetesListResource } from '../../../../shared/base/kubernetes/kubernetes-list-resource';
-
+import { Component, Input } from '@angular/core';
+import { KubernetesListResource } from '../../../../shared/base/kubernetes-namespaced/kubernetes-list-resource';
+import { TplDetailService } from '../../../../shared/tpl-detail/tpl-detail.service';
 
 @Component({
   selector: 'wayne-list-namespace',
-  templateUrl: './list-namespace.component.html',
-  styleUrls: ['./list-namespace.component.scss']
+  templateUrl: './list-namespace.component.html'
 })
 
-export class ListNamespaceComponent extends KubernetesListResource implements OnInit, OnDestroy {
-  @Input() resources: NamespaceList[];
+export class ListNamespaceComponent extends KubernetesListResource {
+  @Input() resources: any[];
   @Input() showState: object;
 
-  @Output() detail = new EventEmitter<NamespaceList>();
-
-  constructor() {
-    super();
-  }
-
-  ngOnInit() {
+  constructor(public tplDetailService: TplDetailService) {
+    super(tplDetailService);
   }
 
-  ngOnDestroy() {
-  }
-
-
 }
diff --git a/src/frontend/src/app/admin/kubernetes/role/kube-role.component.html b/src/frontend/src/app/admin/kubernetes/role/kube-role.component.html
new file mode 100644
index 000000000..bc742f209
--- /dev/null
+++ b/src/frontend/src/app/admin/kubernetes/role/kube-role.component.html
@@ -0,0 +1,45 @@
+<div class="clr-row">
+  <div class="clr-col-lg-12 clr-col-md-12 clr-col-sm-12 clr-col-xs-12">
+    <div class="table-search">
+      <div class="table-search-left">
+        <button class="wayne-button normal" (click)="createResource()">
+          {{'ADMIN.KUBERNETES.ROLE.CREATE' | translate}}
+        </button>
+        <button class="wayne-button normal" (click)="retrieveResource()">
+          {{'ADMIN.KUBERNETES.ACTION.REFRESH' | translate}}
+        </button>
+        <wayne-filter-box (confirm)="onConfirmEvent()" (cancel)="onCancelEvent()">
+          <wayne-checkbox-group [(ngModel)]="showList">
+            <wayne-checkbox value="name">{{'ADMIN.KUBERNETES.ROLE.LIST.NAME' | translate}}</wayne-checkbox>
+            <wayne-checkbox value="label">{{'ADMIN.KUBERNETES.ROLE.LIST.LABEL' | translate}}</wayne-checkbox>
+            <wayne-checkbox value="age">{{'ADMIN.KUBERNETES.ROLE.LIST.AGE' | translate}}</wayne-checkbox>
+          </wayne-checkbox-group>
+        </wayne-filter-box>
+        <label for="namespace_name" class="clr-col-md-3">{{'ADMIN.KUBERNETES.LABEL.NAMESPACE' | translate}}</label>
+        <wayne-select [(ngModel)]="namespace" (change)="retrieveResource()"
+                      searchable
+                      name="namespace_name"
+                      [placeholder]="'PLACEHOLDER.CHOOSE' | translate"
+                      style="margin-left: 12px;">
+          <wayne-option *ngFor="let ns of namespaces" [value]="ns">{{ns}}</wayne-option>
+        </wayne-select>
+      </div>
+    </div>
+
+    <wayne-list-role
+      [resources]="resources"
+      [showState]="showState"
+      (delete)="onDeleteResourceEvent($event)"
+      (edit)="onEditResourceEvent($event)"
+      [page]="pageState.page"
+      [cluster]="cluster"
+      (paginate)="retrieveResource($event)">
+    </wayne-list-role>
+  </div>
+</div>
+<deletion-dialog (outputObj)="confirmDeleteEvent($event)"></deletion-dialog>
+<wayne-ace-editor (createOutputObj)="onCreateResourceEvent($event)" (outputObj)="onSaveResourceEvent($event)"></wayne-ace-editor>
+<wayne-float-window value="{{ cluster }}">
+  <wayne-float-window-item *ngFor="let cluster of clusters" [value]="cluster"
+                           (click)="jumpToHref(cluster)"></wayne-float-window-item>
+</wayne-float-window>
diff --git a/src/frontend/src/app/admin/kubernetes/role/kube-role.component.ts b/src/frontend/src/app/admin/kubernetes/role/kube-role.component.ts
new file mode 100644
index 000000000..5ca05a65d
--- /dev/null
+++ b/src/frontend/src/app/admin/kubernetes/role/kube-role.component.ts
@@ -0,0 +1,54 @@
+import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MessageHandlerService } from '../../../shared/message-handler/message-handler.service';
+import { ClusterService } from '../../../shared/client/v1/cluster.service';
+import { AuthService } from '../../../shared/auth/auth.service';
+import { AceEditorComponent } from '../../../shared/ace-editor/ace-editor.component';
+import { KubernetesClient } from '../../../shared/client/v1/kubernetes/kubernetes';
+import { KubeResourceRole } from '../../../shared/shared.const';
+import { KubernetesNamespacedResource } from '../../../shared/base/kubernetes-namespaced/kubernetes-namespaced-resource';
+import { DeletionDialogComponent } from '../../../shared/deletion-dialog/deletion-dialog.component';
+import { ListRoleComponent } from './list-role/list-role.component';
+
+const showState = {
+  'name': {hidden: false},
+  'label': {hidden: false},
+  'age': {hidden: false},
+};
+
+@Component({
+  selector: 'wayne-kube-role',
+  templateUrl: './kube-role.component.html'
+})
+
+export class KubeRoleComponent extends KubernetesNamespacedResource implements OnInit, OnDestroy {
+  @ViewChild(ListRoleComponent)
+  listResourceComponent: ListRoleComponent;
+
+  @ViewChild(AceEditorComponent)
+  aceEditorModal: AceEditorComponent;
+
+  @ViewChild(DeletionDialogComponent)
+  deletionDialogComponent: DeletionDialogComponent;
+
+  constructor(public kubernetesClient: KubernetesClient,
+              public route: ActivatedRoute,
+              public router: Router,
+              public clusterService: ClusterService,
+              public authService: AuthService,
+              public messageHandlerService: MessageHandlerService) {
+    super(kubernetesClient, route, router, clusterService, authService, messageHandlerService);
+    super.registResourceType('role');
+    super.registKubeResource(KubeResourceRole);
+    super.registShowSate(showState);
+  }
+
+  ngOnInit() {
+    super.ngOnInit();
+  }
+
+  ngOnDestroy(): void {
+    super.ngOnDestroy();
+  }
+
+}
diff --git a/src/frontend/src/app/admin/kubernetes/role/kube-role.module.ts b/src/frontend/src/app/admin/kubernetes/role/kube-role.module.ts
new file mode 100644
index 000000000..fdce28456
--- /dev/null
+++ b/src/frontend/src/app/admin/kubernetes/role/kube-role.module.ts
@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../../shared/shared.module';
+import { ReactiveFormsModule } from '@angular/forms';
+import { KubeRoleComponent } from './kube-role.component';
+import { KubernetesClient } from '../../../shared/client/v1/kubernetes/kubernetes';
+import { DeletionDialogModule } from '../../../shared/deletion-dialog/deletion-dialog.module';
+import { ListRoleComponent } from './list-role/list-role.component';
+
+@NgModule({
+  imports: [
+    SharedModule,
+    ReactiveFormsModule,
+    DeletionDialogModule
+  ],
+  providers: [
+    KubernetesClient
+  ],
+  exports: [
+    KubeRoleComponent,
+    ListRoleComponent
+  ],
+  declarations: [
+    KubeRoleComponent,
+    ListRoleComponent
+  ]
+})
+
+export class KubeRoleModule {
+}
diff --git a/src/frontend/src/app/admin/kubernetes/role/list-role/list-role.component.html b/src/frontend/src/app/admin/kubernetes/role/list-role/list-role.component.html
new file mode 100644
index 000000000..a6caedfa5
--- /dev/null
+++ b/src/frontend/src/app/admin/kubernetes/role/list-role/list-role.component.html
@@ -0,0 +1,40 @@
+<clr-datagrid (clrDgRefresh)="refresh($event)">
+  <clr-dg-column class="col-app-name" [clrDgField]="'name'">
+    <ng-container *clrDgHideableColumn="showState['name']">
+      {{'ADMIN.KUBERNETES.ROLE.LIST.NAME' | translate}}
+    </ng-container>
+  </clr-dg-column>
+  <clr-dg-column>
+    <ng-container *clrDgHideableColumn="showState['label']">
+      {{'ADMIN.KUBERNETES.ROLE.LIST.LABEL' | translate}}
+    </ng-container>
+  </clr-dg-column>
+  <clr-dg-column [clrDgField]="'creationTimestamp'">
+    <ng-container *clrDgHideableColumn="showState['age']">
+      {{'ADMIN.KUBERNETES.ROLE.LIST.AGE' | translate}}
+    </ng-container>
+  </clr-dg-column>
+
+
+  <clr-dg-row *ngFor="let obj of resources" [clrDgItem]="obj">
+    <clr-dg-action-overflow>
+      <button class="action-item" (click)="onEditEvent(obj)">{{'ADMIN.KUBERNETES.ACTION.EDIT' | translate}}</button>
+      <button class="action-item" (click)="onDeleteEvent(obj)">{{'ADMIN.KUBERNETES.ACTION.DELETE' | translate}}</button>
+    </clr-dg-action-overflow>
+    <clr-dg-cell class="col-app-name"> {{ obj.metadata.name }} </clr-dg-cell>
+    <clr-dg-cell>
+      <div *ngFor="let label of obj.metadata.labels | keyvalue" class="version-text">
+        <a href="javascript:" (click)="versionDetail(label.key + ': ' + label.value)">{{label.key}}: {{label.value}}</a>
+      </div>
+    </clr-dg-cell>
+    <clr-dg-cell> {{ obj.metadata.creationTimestamp | relativeTime}} </clr-dg-cell>
+  </clr-dg-row>
+  <clr-dg-footer>
+    <wayne-paginate
+      [(currentPage)]="currentPage"
+      [total]="page.totalCount"
+      [pageSizes]="[10, 20, 50]"
+      (sizeChange)="pageSizeChange($event)">
+    </wayne-paginate>
+  </clr-dg-footer>
+</clr-datagrid>
diff --git a/src/frontend/src/app/admin/kubernetes/role/list-role/list-role.component.ts b/src/frontend/src/app/admin/kubernetes/role/list-role/list-role.component.ts
new file mode 100644
index 000000000..f7d837cb4
--- /dev/null
+++ b/src/frontend/src/app/admin/kubernetes/role/list-role/list-role.component.ts
@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+import { KubernetesListResource } from '../../../../shared/base/kubernetes-namespaced/kubernetes-list-resource';
+import { TplDetailService } from '../../../../shared/tpl-detail/tpl-detail.service';
+
+@Component({
+  selector: 'wayne-list-role',
+  templateUrl: './list-role.component.html'
+})
+
+export class ListRoleComponent extends KubernetesListResource {
+  @Input() resources: any[];
+  @Input() showState: object;
+
+
+  constructor(public tplDetailService: TplDetailService) {
+    super(tplDetailService);
+  }
+
+}
diff --git a/src/frontend/src/app/admin/kubernetes/rolebinding/kube-rolebinding.component.html b/src/frontend/src/app/admin/kubernetes/rolebinding/kube-rolebinding.component.html
new file mode 100644
index 000000000..92fbf332d
--- /dev/null
+++ b/src/frontend/src/app/admin/kubernetes/rolebinding/kube-rolebinding.component.html
@@ -0,0 +1,45 @@
+<div class="clr-row">
+  <div class="clr-col-lg-12 clr-col-md-12 clr-col-sm-12 clr-col-xs-12">
+    <div class="table-search">
+      <div class="table-search-left">
+        <button class="wayne-button normal" (click)="createResource()">
+          {{'ADMIN.KUBERNETES.ROLEBINDING.CREATE' | translate}}
+        </button>
+        <button class="wayne-button normal" (click)="retrieveResource()">
+          {{'ADMIN.KUBERNETES.ACTION.REFRESH' | translate}}
+        </button>
+        <wayne-filter-box (confirm)="onConfirmEvent()" (cancel)="onCancelEvent()">
+          <wayne-checkbox-group [(ngModel)]="showList">
+            <wayne-checkbox value="name">{{'ADMIN.KUBERNETES.ROLEBINDING.LIST.NAME' | translate}}</wayne-checkbox>
+            <wayne-checkbox value="label">{{'ADMIN.KUBERNETES.ROLEBINDING.LIST.LABEL' | translate}}</wayne-checkbox>
+            <wayne-checkbox value="age">{{'ADMIN.KUBERNETES.ROLEBINDING.LIST.AGE' | translate}}</wayne-checkbox>
+          </wayne-checkbox-group>
+        </wayne-filter-box>
+        <label for="namespace_name" class="clr-col-md-3">{{'ADMIN.KUBERNETES.LABEL.NAMESPACE' | translate}}</label>
+        <wayne-select [(ngModel)]="namespace" (change)="retrieveResource()"
+                      searchable
+                      name="namespace_name"
+                      [placeholder]="'PLACEHOLDER.CHOOSE' | translate"
+                      style="margin-left: 12px;">
+          <wayne-option *ngFor="let ns of namespaces" [value]="ns">{{ns}}</wayne-option>
+        </wayne-select>
+      </div>
+    </div>
+
+    <wayne-list-rolebinding
+      [resources]="resources"
+      [showState]="showState"
+      (delete)="onDeleteResourceEvent($event)"
+      (edit)="onEditResourceEvent($event)"
+      [page]="pageState.page"
+      [cluster]="cluster"
+      (paginate)="retrieveResource($event)">
+    </wayne-list-rolebinding>
+  </div>
+</div>
+<deletion-dialog (outputObj)="confirmDeleteEvent($event)"></deletion-dialog>
+<wayne-ace-editor (createOutputObj)="onCreateResourceEvent($event)" (outputObj)="onSaveResourceEvent($event)"></wayne-ace-editor>
+<wayne-float-window value="{{ cluster }}">
+  <wayne-float-window-item *ngFor="let cluster of clusters" [value]="cluster"
+                           (click)="jumpToHref(cluster)"></wayne-float-window-item>
+</wayne-float-window>
diff --git a/src/frontend/src/app/admin/kubernetes/rolebinding/kube-rolebinding.component.ts b/src/frontend/src/app/admin/kubernetes/rolebinding/kube-rolebinding.component.ts
new file mode 100644
index 000000000..48403ad1c
--- /dev/null
+++ b/src/frontend/src/app/admin/kubernetes/rolebinding/kube-rolebinding.component.ts
@@ -0,0 +1,54 @@
+import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MessageHandlerService } from '../../../shared/message-handler/message-handler.service';
+import { ClusterService } from '../../../shared/client/v1/cluster.service';
+import { AuthService } from '../../../shared/auth/auth.service';
+import { AceEditorComponent } from '../../../shared/ace-editor/ace-editor.component';
+import { KubernetesClient } from '../../../shared/client/v1/kubernetes/kubernetes';
+import { KubeResourceRoleBinding } from '../../../shared/shared.const';
+import { KubernetesNamespacedResource } from '../../../shared/base/kubernetes-namespaced/kubernetes-namespaced-resource';
+import { DeletionDialogComponent } from '../../../shared/deletion-dialog/deletion-dialog.component';
+import { ListRolebindingComponent } from './list-rolebinding/list-rolebinding.component';
+
+const showState = {
+  'name': {hidden: false},
+  'label': {hidden: false},
+  'age': {hidden: false},
+};
+
+@Component({
+  selector: 'wayne-kube-rolebinding',
+  templateUrl: './kube-rolebinding.component.html'
+})
+
+export class KubeRolebindingComponent extends KubernetesNamespacedResource implements OnInit, OnDestroy {
+  @ViewChild(ListRolebindingComponent)
+  listResourceComponent: ListRolebindingComponent;
+
+  @ViewChild(AceEditorComponent)
+  aceEditorModal: AceEditorComponent;
+
+  @ViewChild(DeletionDialogComponent)
+  deletionDialogComponent: DeletionDialogComponent;
+
+  constructor(public kubernetesClient: KubernetesClient,
+              public route: ActivatedRoute,
+              public router: Router,
+              public clusterService: ClusterService,
+              public authService: AuthService,
+              public messageHandlerService: MessageHandlerService) {
+    super(kubernetesClient, route, router, clusterService, authService, messageHandlerService);
+    super.registResourceType('rolebinding');
+    super.registKubeResource(KubeResourceRoleBinding);
+    super.registShowSate(showState);
+  }
+
+  ngOnInit() {
+    super.ngOnInit();
+  }
+
+  ngOnDestroy(): void {
+    super.ngOnDestroy();
+  }
+
+}
diff --git a/src/frontend/src/app/admin/kubernetes/rolebinding/kube-rolebinding.module.ts b/src/frontend/src/app/admin/kubernetes/rolebinding/kube-rolebinding.module.ts
new file mode 100644
index 000000000..cd44f1318
--- /dev/null
+++ b/src/frontend/src/app/admin/kubernetes/rolebinding/kube-rolebinding.module.ts
@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../../shared/shared.module';
+import { ReactiveFormsModule } from '@angular/forms';
+import { KubeRolebindingComponent } from './kube-rolebinding.component';
+import { KubernetesClient } from '../../../shared/client/v1/kubernetes/kubernetes';
+import { DeletionDialogModule } from '../../../shared/deletion-dialog/deletion-dialog.module';
+import { ListRolebindingComponent } from './list-rolebinding/list-rolebinding.component';
+
+@NgModule({
+  imports: [
+    SharedModule,
+    ReactiveFormsModule,
+    DeletionDialogModule
+  ],
+  providers: [
+    KubernetesClient
+  ],
+  exports: [],
+  declarations: [
+    KubeRolebindingComponent,
+    ListRolebindingComponent
+  ]
+})
+
+export class KubeRolebindingModule {
+}
diff --git a/src/frontend/src/app/admin/kubernetes/rolebinding/list-rolebinding/list-rolebinding.component.html b/src/frontend/src/app/admin/kubernetes/rolebinding/list-rolebinding/list-rolebinding.component.html
new file mode 100644
index 000000000..aedf03b17
--- /dev/null
+++ b/src/frontend/src/app/admin/kubernetes/rolebinding/list-rolebinding/list-rolebinding.component.html
@@ -0,0 +1,40 @@
+<clr-datagrid (clrDgRefresh)="refresh($event)">
+  <clr-dg-column class="col-app-name" [clrDgField]="'name'">
+    <ng-container *clrDgHideableColumn="showState['name']">
+      {{'ADMIN.KUBERNETES.ROLEBINDING.LIST.NAME' | translate}}
+    </ng-container>
+  </clr-dg-column>
+  <clr-dg-column>
+    <ng-container *clrDgHideableColumn="showState['label']">
+      {{'ADMIN.KUBERNETES.ROLEBINDING.LIST.LABEL' | translate}}
+    </ng-container>
+  </clr-dg-column>
+  <clr-dg-column [clrDgField]="'creationTimestamp'">
+    <ng-container *clrDgHideableColumn="showState['age']">
+      {{'ADMIN.KUBERNETES.ROLEBINDING.LIST.AGE' | translate}}
+    </ng-container>
+  </clr-dg-column>
+
+
+  <clr-dg-row *ngFor="let obj of resources" [clrDgItem]="obj">
+    <clr-dg-action-overflow>
+      <button class="action-item" (click)="onEditEvent(obj)">{{'ADMIN.KUBERNETES.ACTION.EDIT' | translate}}</button>
+      <button class="action-item" (click)="onDeleteEvent(obj)">{{'ADMIN.KUBERNETES.ACTION.DELETE' | translate}}</button>
+    </clr-dg-action-overflow>
+    <clr-dg-cell class="col-app-name"> {{ obj.metadata.name }} </clr-dg-cell>
+    <clr-dg-cell>
+      <div *ngFor="let label of obj.metadata.labels | keyvalue" class="version-text">
+        <a href="javascript:" (click)="versionDetail(label.key + ': ' + label.value)">{{label.key}}: {{label.value}}</a>
+      </div>
+    </clr-dg-cell>
+    <clr-dg-cell> {{ obj.metadata.creationTimestamp | relativeTime}} </clr-dg-cell>
+  </clr-dg-row>
+  <clr-dg-footer>
+    <wayne-paginate
+      [(currentPage)]="currentPage"
+      [total]="page.totalCount"
+      [pageSizes]="[10, 20, 50]"
+      (sizeChange)="pageSizeChange($event)">
+    </wayne-paginate>
+  </clr-dg-footer>
+</clr-datagrid>
diff --git a/src/frontend/src/app/admin/kubernetes/rolebinding/list-rolebinding/list-rolebinding.component.ts b/src/frontend/src/app/admin/kubernetes/rolebinding/list-rolebinding/list-rolebinding.component.ts
new file mode 100644
index 000000000..9bff5fa1a
--- /dev/null
+++ b/src/frontend/src/app/admin/kubernetes/rolebinding/list-rolebinding/list-rolebinding.component.ts
@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+import { KubernetesListResource } from '../../../../shared/base/kubernetes-namespaced/kubernetes-list-resource';
+import { TplDetailService } from '../../../../shared/tpl-detail/tpl-detail.service';
+
+@Component({
+  selector: 'wayne-list-rolebinding',
+  templateUrl: './list-rolebinding.component.html'
+})
+
+export class ListRolebindingComponent extends KubernetesListResource {
+  @Input() resources: any[];
+  @Input() showState: object;
+
+
+  constructor(public tplDetailService: TplDetailService) {
+    super(tplDetailService);
+  }
+
+}
diff --git a/src/frontend/src/app/admin/kubernetes/serviceaccount/kube-serviceaccount.component.html b/src/frontend/src/app/admin/kubernetes/serviceaccount/kube-serviceaccount.component.html
new file mode 100644
index 000000000..31b1d47bb
--- /dev/null
+++ b/src/frontend/src/app/admin/kubernetes/serviceaccount/kube-serviceaccount.component.html
@@ -0,0 +1,45 @@
+<div class="clr-row">
+  <div class="clr-col-lg-12 clr-col-md-12 clr-col-sm-12 clr-col-xs-12">
+    <div class="table-search">
+      <div class="table-search-left">
+        <button class="wayne-button normal" (click)="createResource()">
+          {{'ADMIN.KUBERNETES.SERVICEACCOUNT.CREATE' | translate}}
+        </button>
+        <button class="wayne-button normal" (click)="retrieveResource()">
+          {{'ADMIN.KUBERNETES.ACTION.REFRESH' | translate}}
+        </button>
+        <wayne-filter-box (confirm)="onConfirmEvent()" (cancel)="onCancelEvent()">
+          <wayne-checkbox-group [(ngModel)]="showList">
+            <wayne-checkbox value="name">{{'ADMIN.KUBERNETES.SERVICEACCOUNT.LIST.NAME' | translate}}</wayne-checkbox>
+            <wayne-checkbox value="label">{{'ADMIN.KUBERNETES.SERVICEACCOUNT.LIST.LABEL' | translate}}</wayne-checkbox>
+            <wayne-checkbox value="age">{{'ADMIN.KUBERNETES.SERVICEACCOUNT.LIST.AGE' | translate}}</wayne-checkbox>
+          </wayne-checkbox-group>
+        </wayne-filter-box>
+        <label for="namespace_name" class="clr-col-md-3">{{'ADMIN.KUBERNETES.LABEL.NAMESPACE' | translate}}</label>
+        <wayne-select [(ngModel)]="namespace" (change)="retrieveResource()"
+                      searchable
+                      name="namespace_name"
+                      [placeholder]="'PLACEHOLDER.CHOOSE' | translate"
+                      style="margin-left: 12px;">
+          <wayne-option *ngFor="let ns of namespaces" [value]="ns">{{ns}}</wayne-option>
+        </wayne-select>
+      </div>
+    </div>
+
+    <wayne-list-serviceaccount
+      [resources]="resources"
+      [showState]="showState"
+      (delete)="onDeleteResourceEvent($event)"
+      (edit)="onEditResourceEvent($event)"
+      [page]="pageState.page"
+      [cluster]="cluster"
+      (paginate)="retrieveResource($event)">
+    </wayne-list-serviceaccount>
+  </div>
+</div>
+<deletion-dialog (outputObj)="confirmDeleteEvent($event)"></deletion-dialog>
+<wayne-ace-editor (createOutputObj)="onCreateResourceEvent($event)" (outputObj)="onSaveResourceEvent($event)"></wayne-ace-editor>
+<wayne-float-window value="{{ cluster }}">
+  <wayne-float-window-item *ngFor="let cluster of clusters" [value]="cluster"
+                           (click)="jumpToHref(cluster)"></wayne-float-window-item>
+</wayne-float-window>
diff --git a/src/frontend/src/app/admin/kubernetes/serviceaccount/kube-serviceaccount.component.ts b/src/frontend/src/app/admin/kubernetes/serviceaccount/kube-serviceaccount.component.ts
new file mode 100644
index 000000000..82908d0b1
--- /dev/null
+++ b/src/frontend/src/app/admin/kubernetes/serviceaccount/kube-serviceaccount.component.ts
@@ -0,0 +1,54 @@
+import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MessageHandlerService } from '../../../shared/message-handler/message-handler.service';
+import { ClusterService } from '../../../shared/client/v1/cluster.service';
+import { AuthService } from '../../../shared/auth/auth.service';
+import { AceEditorComponent } from '../../../shared/ace-editor/ace-editor.component';
+import { KubernetesClient } from '../../../shared/client/v1/kubernetes/kubernetes';
+import { KubeResourceServiceAccount } from '../../../shared/shared.const';
+import { KubernetesNamespacedResource } from '../../../shared/base/kubernetes-namespaced/kubernetes-namespaced-resource';
+import { DeletionDialogComponent } from '../../../shared/deletion-dialog/deletion-dialog.component';
+import { ListServiceaccountComponent } from './list-serviceaccount/list-serviceaccount.component';
+
+const showState = {
+  'name': {hidden: false},
+  'label': {hidden: false},
+  'age': {hidden: false},
+};
+
+@Component({
+  selector: 'wayne-kube-serviceaccount',
+  templateUrl: './kube-serviceaccount.component.html'
+})
+
+export class KubeServiceaccountComponent extends KubernetesNamespacedResource implements OnInit, OnDestroy {
+  @ViewChild(ListServiceaccountComponent)
+  listResourceComponent: ListServiceaccountComponent;
+
+  @ViewChild(AceEditorComponent)
+  aceEditorModal: AceEditorComponent;
+
+  @ViewChild(DeletionDialogComponent)
+  deletionDialogComponent: DeletionDialogComponent;
+
+  constructor(public kubernetesClient: KubernetesClient,
+              public route: ActivatedRoute,
+              public router: Router,
+              public clusterService: ClusterService,
+              public authService: AuthService,
+              public messageHandlerService: MessageHandlerService) {
+    super(kubernetesClient, route, router, clusterService, authService, messageHandlerService);
+    super.registResourceType('serviceaccount');
+    super.registKubeResource(KubeResourceServiceAccount);
+    super.registShowSate(showState);
+  }
+
+  ngOnInit() {
+    super.ngOnInit();
+  }
+
+  ngOnDestroy(): void {
+    super.ngOnDestroy();
+  }
+
+}
diff --git a/src/frontend/src/app/admin/kubernetes/serviceaccount/kube-serviceaccount.module.ts b/src/frontend/src/app/admin/kubernetes/serviceaccount/kube-serviceaccount.module.ts
new file mode 100644
index 000000000..61642613e
--- /dev/null
+++ b/src/frontend/src/app/admin/kubernetes/serviceaccount/kube-serviceaccount.module.ts
@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../../shared/shared.module';
+import { ReactiveFormsModule } from '@angular/forms';
+import { KubeServiceaccountComponent } from './kube-serviceaccount.component';
+import { KubernetesClient } from '../../../shared/client/v1/kubernetes/kubernetes';
+import { DeletionDialogModule } from '../../../shared/deletion-dialog/deletion-dialog.module';
+import { ListServiceaccountComponent } from './list-serviceaccount/list-serviceaccount.component';
+
+@NgModule({
+  imports: [
+    SharedModule,
+    ReactiveFormsModule,
+    DeletionDialogModule
+  ],
+  providers: [
+    KubernetesClient
+  ],
+  exports: [],
+  declarations: [
+    KubeServiceaccountComponent,
+    ListServiceaccountComponent
+  ]
+})
+
+export class KubeServiceaccountModule {
+}
diff --git a/src/frontend/src/app/admin/kubernetes/serviceaccount/list-serviceaccount/list-serviceaccount.component.html b/src/frontend/src/app/admin/kubernetes/serviceaccount/list-serviceaccount/list-serviceaccount.component.html
new file mode 100644
index 000000000..d2b0f4aab
--- /dev/null
+++ b/src/frontend/src/app/admin/kubernetes/serviceaccount/list-serviceaccount/list-serviceaccount.component.html
@@ -0,0 +1,50 @@
+<clr-datagrid (clrDgRefresh)="refresh($event)">
+  <clr-dg-column class="col-app-name" [clrDgField]="'name'">
+    <ng-container *clrDgHideableColumn="showState['name']">
+      {{'ADMIN.KUBERNETES.SERVICEACCOUNT.LIST.NAME' | translate}}
+    </ng-container>
+  </clr-dg-column>
+  <clr-dg-column>
+    <ng-container *clrDgHideableColumn="showState['label']">
+      {{'ADMIN.KUBERNETES.SERVICEACCOUNT.LIST.LABEL' | translate}}
+    </ng-container>
+  </clr-dg-column>
+  <clr-dg-column>
+    <ng-container *clrDgHideableColumn="showState['secret']">
+      {{'ADMIN.KUBERNETES.SERVICEACCOUNT.LIST.SECRET' | translate}}
+    </ng-container>
+  </clr-dg-column>
+  <clr-dg-column [clrDgField]="'creationTimestamp'">
+    <ng-container *clrDgHideableColumn="showState['age']">
+      {{'ADMIN.KUBERNETES.SERVICEACCOUNT.LIST.AGE' | translate}}
+    </ng-container>
+  </clr-dg-column>
+
+
+  <clr-dg-row *ngFor="let obj of resources" [clrDgItem]="obj">
+    <clr-dg-action-overflow>
+      <button class="action-item" (click)="onEditEvent(obj)">{{'ADMIN.KUBERNETES.ACTION.EDIT' | translate}}</button>
+      <button class="action-item" (click)="onDeleteEvent(obj)">{{'ADMIN.KUBERNETES.ACTION.DELETE' | translate}}</button>
+    </clr-dg-action-overflow>
+    <clr-dg-cell class="col-app-name"> {{ obj.metadata.name }} </clr-dg-cell>
+    <clr-dg-cell>
+      <div *ngFor="let label of obj.metadata.labels | keyvalue" class="version-text">
+        <a href="javascript:" (click)="versionDetail(label.key + ': ' + label.value)">{{label.key}}: {{label.value}}</a>
+      </div>
+    </clr-dg-cell>
+    <clr-dg-cell>
+      <div *ngFor="let secret of obj.secrets">
+        {{secret.name}}
+      </div>
+    </clr-dg-cell>
+    <clr-dg-cell> {{ obj.metadata.creationTimestamp | relativeTime}} </clr-dg-cell>
+  </clr-dg-row>
+  <clr-dg-footer>
+    <wayne-paginate
+      [(currentPage)]="currentPage"
+      [total]="page.totalCount"
+      [pageSizes]="[10, 20, 50]"
+      (sizeChange)="pageSizeChange($event)">
+    </wayne-paginate>
+  </clr-dg-footer>
+</clr-datagrid>
diff --git a/src/frontend/src/app/admin/kubernetes/serviceaccount/list-serviceaccount/list-serviceaccount.component.ts b/src/frontend/src/app/admin/kubernetes/serviceaccount/list-serviceaccount/list-serviceaccount.component.ts
new file mode 100644
index 000000000..0d1438836
--- /dev/null
+++ b/src/frontend/src/app/admin/kubernetes/serviceaccount/list-serviceaccount/list-serviceaccount.component.ts
@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+import { KubernetesListResource } from '../../../../shared/base/kubernetes-namespaced/kubernetes-list-resource';
+import { TplDetailService } from '../../../../shared/tpl-detail/tpl-detail.service';
+
+@Component({
+  selector: 'wayne-list-serviceaccount',
+  templateUrl: './list-serviceaccount.component.html'
+})
+
+export class ListServiceaccountComponent extends KubernetesListResource {
+  @Input() resources: any[];
+  @Input() showState: object;
+
+
+  constructor(public tplDetailService: TplDetailService) {
+    super(tplDetailService);
+  }
+
+}
diff --git a/src/frontend/src/app/admin/sidenav/sidenav.component.html b/src/frontend/src/app/admin/sidenav/sidenav.component.html
index 0c49c78e6..819fde1fa 100644
--- a/src/frontend/src/app/admin/sidenav/sidenav.component.html
+++ b/src/frontend/src/app/admin/sidenav/sidenav.component.html
@@ -13,11 +13,39 @@
     Kubernetes
     <clr-vertical-nav-group-children *clrIfExpanded="false">
       <a clrVerticalNavLink
-         routerLink="kubernetes/dashboard"
+         routerLink="kubernetes/role"
          [routerLinkActiveOptions]="{exact:true}"
          routerLinkActive="active">
-        <clr-icon clrVerticalNavIcon shape="dashboard"></clr-icon>
-        Dashboard
+        <clr-icon clrVerticalNavIcon shape="assign-user"></clr-icon>
+        Role
+      </a>
+      <a clrVerticalNavLink
+         routerLink="kubernetes/clusterrole"
+         [routerLinkActiveOptions]="{exact:true}"
+         routerLinkActive="active">
+        <clr-icon clrVerticalNavIcon class="is-solid" shape="assign-user"></clr-icon>
+        ClusterRole
+      </a>
+      <a clrVerticalNavLink
+         routerLink="kubernetes/rolebinding"
+         [routerLinkActiveOptions]="{exact:true}"
+         routerLinkActive="active">
+        <clr-icon clrVerticalNavIcon shape="administrator"></clr-icon>
+        RoleBinding
+      </a>
+      <a clrVerticalNavLink
+         routerLink="kubernetes/clusterrolebinding"
+         [routerLinkActiveOptions]="{exact:true}"
+         routerLinkActive="active">
+        <clr-icon clrVerticalNavIcon class="is-solid" shape="administrator"></clr-icon>
+        ClusterRoleBinding
+      </a>
+      <a clrVerticalNavLink
+         routerLink="kubernetes/serviceaccount"
+         [routerLinkActiveOptions]="{exact:true}"
+         routerLinkActive="active">
+        <clr-icon clrVerticalNavIcon shape="user"></clr-icon>
+        ServiceAccount
       </a>
       <div class="nav-divider"></div>
       <a clrVerticalNavLink
diff --git a/src/frontend/src/app/shared/shared.const.ts b/src/frontend/src/app/shared/shared.const.ts
index 1710159a8..5a4358ea9 100644
--- a/src/frontend/src/app/shared/shared.const.ts
+++ b/src/frontend/src/app/shared/shared.const.ts
@@ -29,6 +29,11 @@ export const KubeResourceService: KubeResourcesName = 'services';
 export const KubeResourceStatefulSet: KubeResourcesName = 'statefulsets';
 export const KubeResourceEndpoint: KubeResourcesName = 'endpoints';
 export const KubeResourceStorageClass: KubeResourcesName = 'storageclasses';
+export const KubeResourceRole: KubeResourcesName = 'roles';
+export const KubeResourceRoleBinding: KubeResourcesName = 'rolebindings';
+export const KubeResourceClusterRole: KubeResourcesName = 'clusterroles';
+export const KubeResourceClusterRoleBinding: KubeResourcesName = 'clusterrolebindings';
+export const KubeResourceServiceAccount: KubeResourcesName = 'serviceaccounts';
 
 export const LoginTokenKey = 'wayne_token';
 
diff --git a/src/frontend/src/assets/i18n/zh-Hans.json b/src/frontend/src/assets/i18n/zh-Hans.json
index deb3236a5..9a16257f3 100644
--- a/src/frontend/src/assets/i18n/zh-Hans.json
+++ b/src/frontend/src/assets/i18n/zh-Hans.json
@@ -675,6 +675,16 @@
           "AGE": "启动时间"
         }
       },
+      "DEPLOYMENT": {
+        "CREATE": "创建 Deployment",
+        "LIST": {
+          "NAME": "名称",
+          "LABEL": "标签",
+          "AGE": "启动时间",
+          "IMAGES": "镜像",
+          "STATUS": "状态"
+        }
+      },
       "STATEFULSET": {
         "CREATE": "创建 StatefulSet",
         "LIST": {
@@ -765,6 +775,56 @@
           "REPLICAS": "当前副本数",
           "AGE": "启动时间"
         }
+      },
+      "ROLE": {
+        "CREATE": "创建 Role",
+        "LIST": {
+          "NAME": "名称",
+          "LABEL": "标签",
+          "AGE": "启动时间"
+        }
+      },
+      "ROLEBINDING": {
+        "CREATE": "创建 RoleBinding",
+        "LIST": {
+          "NAME": "名称",
+          "LABEL": "标签",
+          "AGE": "启动时间"
+        }
+      },
+      "SERVICEACCOUNT": {
+        "CREATE": "创建 ServiceAccount",
+        "LIST": {
+          "NAME": "名称",
+          "LABEL": "标签",
+          "AGE": "启动时间",
+          "SECRET": "秘钥列表"
+        }
+      },
+      "CLUSTERROLE": {
+        "CREATE": "创建 ClusterRole",
+        "LIST": {
+          "NAME": "名称",
+          "LABEL": "标签",
+          "AGE": "启动时间"
+        }
+      },
+      "CLUSTERROLEBINDING": {
+        "CREATE": "创建 ClusterRoleBinding",
+        "LIST": {
+          "NAME": "名称",
+          "LABEL": "标签",
+          "AGE": "启动时间"
+        }
+      },
+      "NAMESPACE": {
+        "CREATE": "创建 Namespace",
+        "LIST": {
+          "NAME": "名称",
+          "LABEL": "标签",
+          "AGE": "启动时间",
+          "STATUS": "状态"
+        }
       }
     }
   }