diff --git a/services/self-service/src/main/resources/webapp/src/app/app.routing.module.ts b/services/self-service/src/main/resources/webapp/src/app/app.routing.module.ts
index d7990bd..d166b7d 100644
--- a/services/self-service/src/main/resources/webapp/src/app/app.routing.module.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/app.routing.module.ts
@@ -38,77 +38,90 @@
 import {OdahuComponent} from './administration/odahu/odahu.component';
 import {AuditComponent} from './reports/audit/audit.component';
 
-const routes: Routes = [{
-  path: 'login',
-  component: LoginComponent
-}, {
-  path: '',
-  canActivate: [CheckParamsGuard],
-  component: LayoutComponent,
-  children: [
-    {
-      path: '',
-      redirectTo: 'resources_list',
-      pathMatch: 'full'
-    }, {
-      path: 'resources_list',
-      component: ResourcesComponent,
-      canActivate: [AuthorizationGuard]
-    }, {
-      path: 'billing_report',
-      component: ReportingComponent,
-      canActivate: [AuthorizationGuard, CloudProviderGuard]
-    }, {
-      path: 'projects',
-      component: ProjectComponent,
-      canActivate: [AuthorizationGuard, AdminGuard],
-    },
-     {
-    //   path: 'odahu',
-    //   component: OdahuComponent,
-    //   canActivate: [AuthorizationGuard, AdminGuard],
-    // }, {
-      path: 'roles',
-      component: RolesComponent,
-      canActivate: [AuthorizationGuard, AdminGuard],
-    }, {
-      path: 'environment_management',
-      component: ManagementComponent,
-      canActivate: [AuthorizationGuard, AdminGuard]
-    }, {
-      path: 'configuration',
-      component: ConfigurationComponent,
-      canActivate: [AuthorizationGuard, AdminGuard, ProjectAdminGuard]
-    },
-    {
-      path: 'swagger',
-      component: SwaggerComponent,
-      canActivate: [AuthorizationGuard]
-    }, {
-      path: 'help/publickeyguide',
-      component: PublicKeyGuideComponent,
-      canActivate: [AuthorizationGuard]
-    }, {
-      path: 'help/accessnotebookguide',
-      component: AccessNotebookGuideComponent,
-      canActivate: [AuthorizationGuard]
-    },
-    {
-      path: 'audit',
-      component: AuditComponent,
-      canActivate: [AuthorizationGuard, AuditGuard],
-    },
-  ]
-}, {
-  path: 'terminal/:id/:endpoint',
-  component: WebterminalComponent
-}, {
-  path: '403',
-  component: AccessDeniedComponent,
-  canActivate: [AuthorizationGuard]
-}, {
+const routes: Routes = [
+  {
+    path: 'login',
+    component: LoginComponent
+  }, 
+  {
+    path: '',
+    canActivate: [CheckParamsGuard],
+    component: LayoutComponent,
+    children: [
+      {
+        path: '',
+        redirectTo: 'resources_list',
+        pathMatch: 'full'
+      }, 
+      {
+        path: 'resources_list',
+        component: ResourcesComponent,
+        canActivate: [AuthorizationGuard]
+      }, 
+      {
+        path: 'billing_report',
+        component: ReportingComponent,
+        canActivate: [AuthorizationGuard, CloudProviderGuard]
+      }, 
+      {
+        path: 'projects',
+        component: ProjectComponent,
+        canActivate: [AuthorizationGuard, AdminGuard],
+      },
+      {
+      //   path: 'odahu',
+      //   component: OdahuComponent,
+      //   canActivate: [AuthorizationGuard, AdminGuard],
+      // }, {
+        path: 'roles',
+        component: RolesComponent,
+        canActivate: [AuthorizationGuard, AdminGuard],
+      }, 
+      {
+        path: 'environment_management',
+        component: ManagementComponent,
+        canActivate: [AuthorizationGuard, AdminGuard]
+      }, 
+      {
+        path: 'configuration',
+        component: ConfigurationComponent,
+        canActivate: [AuthorizationGuard, AdminGuard, ProjectAdminGuard]
+      },
+      {
+        path: 'swagger',
+        component: SwaggerComponent,
+        canActivate: [AuthorizationGuard]
+      }, 
+      {
+        path: 'help/publickeyguide',
+        component: PublicKeyGuideComponent,
+        canActivate: [AuthorizationGuard]
+      }, 
+      {
+        path: 'help/accessnotebookguide',
+        component: AccessNotebookGuideComponent,
+        canActivate: [AuthorizationGuard]
+      },
+      {
+        path: 'audit',
+        component: AuditComponent,
+        canActivate: [AuthorizationGuard, AuditGuard],
+      },
+    ]
+  }, 
+  {
+    path: 'terminal/:id/:endpoint',
+    component: WebterminalComponent
+  }, 
+  {
+    path: '403',
+    component: AccessDeniedComponent,
+    canActivate: [AuthorizationGuard]
+  }, 
+  {
   path: '**',
   component: NotFoundComponent
-}];
+  }
+];
 
 export const AppRoutingModule: ModuleWithProviders<RouterModule> = RouterModule.forRoot(routes, { useHash: true });
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/bubble/bubble.component.css b/services/self-service/src/main/resources/webapp/src/app/shared/bubble/bubble.component.css
index 331f715..0769b00 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/bubble/bubble.component.css
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/bubble/bubble.component.css
@@ -18,12 +18,12 @@
  */
 
 .bubble-up {
+  position: absolute;
+  display: none;
   width: 100%;
   background: #fff;
   border: none;
-  display: none;
   overflow: visible;
-  position: absolute;
   box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px,
               rgba(0, 0, 0, 0.14) 0px 2px 2px 0px,
               rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/bubble/bubble.component.ts b/services/self-service/src/main/resources/webapp/src/app/shared/bubble/bubble.component.ts
index 46d6d63..02e8dde 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/bubble/bubble.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/bubble/bubble.component.ts
@@ -17,9 +17,18 @@
  * under the License.
  */
 
-import { Component, Input, Output, EventEmitter, HostBinding,
-         ChangeDetectorRef, ElementRef, OnInit, OnDestroy,
-         ViewEncapsulation, HostListener } from '@angular/core';
+import { 
+  Component, 
+  Input, 
+  Output, 
+  EventEmitter, 
+  HostBinding,
+  ChangeDetectorRef, 
+  ElementRef, 
+  OnDestroy,
+  ViewEncapsulation, 
+  HostListener 
+} from '@angular/core';
 import { BubblesCollector, BubbleService } from './bubble.service';
 
 @Component({
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/dropdown-list/dropdown-list.component.html b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/dropdown-list/dropdown-list.component.html
index 13d6b7d..d483d25 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/dropdown-list/dropdown-list.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/dropdown-list/dropdown-list.component.html
@@ -18,7 +18,13 @@
   -->
 
 <div class="dropdown-list" >
-  <button class="dropdown-toggle" type="button" #list (click)="emitEvent()" (click)="actions.toggle($event, list)">
+  <button 
+    class="dropdown-toggle" 
+    type="button" 
+    #list 
+    (click)="emitEvent()" 
+    (click)="actions.toggle($event, list)"
+  >
     <span class="title"><span [innerHTML]="label || 'None'"></span></span>
     <span class="caret-btn"><i class="material-icons">keyboard_arrow_down</i></span>
   </button>
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/dropdowns.component.scss b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/dropdowns.component.scss
index 66cf215..b49f8b6 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/dropdowns.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/dropdowns.component.scss
@@ -26,18 +26,18 @@
 .dropdown-list button,
 .dropdown-multiselect button {
   min-width: 100%;
-  background: #fff;
-  padding-left: 15px;
-  font-size: 13px;
-  padding-top: 1px;
   height: 34px;
+  padding-left: 15px;
+  padding-top: 1px;
+  background: #fff;
+  font-size: 13px;
   text-align: left;
   white-space: nowrap;
   cursor: pointer;
   border-radius: 0;
   border: none;
   outline: none;
-  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }
 
 .dropdown-list {
@@ -48,9 +48,9 @@
       color: #4a5c89;
 
       em {
+        margin-right: 0px;
         font-size: 13px;
         color: #35afd5;
-        margin-right: 0px;
         font-style: normal;
       }
     }
@@ -61,7 +61,7 @@
 .dropdown-list button:focus,
 .dropdown-multiselect button:active,
 .dropdown-multiselect button:focus {
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
 .dropdown-multiselect {
@@ -91,8 +91,8 @@
     right: 0;
     width: 40px;
     height: 100%;
-    text-align: center;
     padding: 7px;
+    text-align: center;
     -webkit-appearance: none;
     -moz-appearance: none;
     border-left: 1px solid #ececec;
@@ -101,9 +101,9 @@
   }
 
   .list-menu {
+    left: 0;
     width: 100%;
     max-height: 260px;
-    left: 0;
     padding: 0;
     margin: 0;
     overflow-y: auto;
@@ -113,7 +113,6 @@
       padding: 0;
       margin: 0;
     }
-
   }
 
   &.statuses {
@@ -135,10 +134,9 @@
 
 .dropdown-list .list-menu a,
 .dropdown-multiselect .list-menu li a {
-  display: block;
-  padding: 10px;
-  padding-left: 15px;
   position: relative;
+  display: block;
+  padding: 10px 10px 10px 15px;
   font-weight: 300;
   cursor: pointer;
   color: #4a5c89;
@@ -147,7 +145,7 @@
 
 .dropdown-multiselect .list-menu li a {
   padding-left: 30px;
-  transition: all .45s ease-in-out;
+  transition: all 0.45s ease-in-out;
 }
 
 .dropdown-list .list-menu a:hover,
@@ -163,16 +161,15 @@
 }
 
 .dropdown-multiselect .list-menu .filter-actions a {
-  width: 50%;
-  color: #35afd5;
   display: block;
+  width: 50%;
   padding: 0;
+  color: #35afd5;
   line-height: 40px !important;
   text-align: center;
 }
 
 .dropdown-list {
-
   .list-menu,
   .title {
     span {
@@ -206,16 +203,15 @@
 }
 
 .dropdown-list .list-menu a {
-  padding: 12px;
-  padding-left: 15px;
   position: relative;
+  padding: 12px 12px 12px 15px;
   font-weight: 300;
   cursor: pointer;
 
   em {
+    margin-right: 0px;
     font-size: 13px;
     color: #35afd5;
-    margin-right: 0px;
     font-style: normal;
   }
 }
@@ -229,7 +225,7 @@
   color: #35afd5;
   font-size: 18px;
   line-height: 26px;
-  transition: all .45s ease-in-out;
+  transition: all 0.45s ease-in-out;
 }
 
 .dropdown-multiselect .list-menu .select_all:hover,
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.html b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.html
index ef66677..1d6fda6 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.html
@@ -37,92 +37,91 @@
         </a>
       </li>
 
-        <ng-template  ngFor let-item [ngForOf]="items" let-i="index">
-          <li class="role-label" role="presentation" *ngIf="i === 0 || model && item.type !== items[i - 1].type" (click)="toggleItemsForLable(item.type, $event)" >
-            <a href="#" class="list-item" role="menuitem">
-              <span class="arrow" [ngClass]="{'rotate-arrow': isOpenCategory[item.type], 'arrow-checked': selectedAllInCattegory(item.type) || selectedSomeInCattegory(item.type)}">
+      <ng-template  ngFor let-item [ngForOf]="items" let-i="index">
+        <li class="role-label" role="presentation" *ngIf="i === 0 || model && item.type !== items[i - 1].type" (click)="toggleItemsForLable(item.type, $event)" >
+          <a href="#" class="list-item" role="menuitem">
+            <span class="arrow" [ngClass]="{'rotate-arrow': isOpenCategory[item.type], 'arrow-checked': selectedAllInCattegory(item.type) || selectedSomeInCattegory(item.type)}">
+              <i class="material-icons">keyboard_arrow_right</i>
+            </span>
+            <!--              <span class="empty-checkbox" [ngClass]="{'checked': selectedAllInCattegory(item.type) || selectedSomeInCattegory(item.type)}" (click)="toggleselectedCategory($event, model, item.type);$event.stopPropagation()" >-->
+            <!--                <span class="checked-checkbox" *ngIf="selectedAllInCattegory(item.type)"></span>-->
+            <!--                <span class="line-checkbox" *ngIf="selectedSomeInCattegory(item.type)"></span>-->
+            <!--              </span>-->
+            <datalab-checkbox
+              class="header-checkbox"
+              [checked]="selectedAllInCattegory(item.type)"
+              [someChecked]="selectedSomeInCattegory(item.type)"
+              (toggleSelection)="toggleselectedCategory(model, item.type)"
+            ></datalab-checkbox>
+            {{labels[item.type] || item.type | titlecase}}
+          </a>
+        </li>
+
+        <li 
+          class="role-item"
+          role="presentation"
+          *ngIf="model && isOpenCategory[item.type] && item.type !== 'COMPUTATIONAL_SHAPE' && item.type !== 'NOTEBOOK_SHAPE'"
+          [hidden]="!isAdmin && item.role === 'Allow to execute administration operation'"
+        >
+          <a href="#" class="list-item" role="menuitem" (click)="toggleSelectedOptions(model, item, $event)">
+            <!--              <span class="empty-checkbox" [ngClass]="{'checked': checkInModel(item.role)}">-->
+            <!--                <span class="checked-checkbox" *ngIf="checkInModel(item.role)"></span>-->
+            <!--              </span>-->
+            <datalab-checkbox
+              class="header-checkbox"
+              [checked]="checkInModel(item.role)"
+              (toggleSelection)="toggleSelectedOptions(model, item)"
+            ></datalab-checkbox>
+            {{item.role}}
+          </a>
+        </li>
+        <li 
+          class="role-item" 
+          role="presentation" 
+          (click)="toggleItemsForCloud(item.type + item.cloud, $event)"
+          *ngIf="model && isOpenCategory[item.type] && item.type === 'COMPUTATIONAL_SHAPE' && item.cloud !== items[i - 1].cloud
+            || model && isOpenCategory[item.type] && item.type === 'NOTEBOOK_SHAPE' && item.type !== items[i - 1].type
+            || model && isOpenCategory[item.type] && item.type === 'NOTEBOOK_SHAPE' && item.cloud !== items[i - 1].cloud
+            || model && isOpenCategory[item.type] && item.type === 'COMPUTATIONAL_SHAPE' && item.type !== items[i - 1].type"
+        >
+          <a href="#" class="list-item" role="menuitem">
+            <span class="arrow" [ngClass]="{'rotate-arrow': isCloudOpen[item.type + item.cloud], 'arrow-checked': selectedAllInCloud(item.type, item.cloud) || selectedSomeInCloud(item.type, item.cloud)}">
                 <i class="material-icons">keyboard_arrow_right</i>
-              </span>
-<!--              <span class="empty-checkbox" [ngClass]="{'checked': selectedAllInCattegory(item.type) || selectedSomeInCattegory(item.type)}" (click)="toggleselectedCategory($event, model, item.type);$event.stopPropagation()" >-->
-<!--                <span class="checked-checkbox" *ngIf="selectedAllInCattegory(item.type)"></span>-->
-<!--                <span class="line-checkbox" *ngIf="selectedSomeInCattegory(item.type)"></span>-->
-<!--              </span>-->
-              <datalab-checkbox
-                class="header-checkbox"
-                [checked]="selectedAllInCattegory(item.type)"
-                [someChecked]="selectedSomeInCattegory(item.type)"
-                (toggleSelection)="toggleselectedCategory(model, item.type)"
-              >
-              </datalab-checkbox>
+            </span>
+            <!--              <span class="empty-checkbox"-->
+            <!--                    [ngClass]="{-->
+            <!--                    'checked': selectedAllInCloud(item.type, item.cloud)-->
+            <!--                    || selectedSomeInCloud(item.type, item.cloud)}"-->
+            <!--                    (click)="toggleSelectedCloud($event, model, item.type, item.cloud);-->
+            <!--                    $event.stopPropagation()"-->
+            <!--              >-->
+            <!--                <span class="checked-checkbox" *ngIf="selectedAllInCloud(item.type, item.cloud)"></span>-->
+            <!--                <span class="line-checkbox" *ngIf="selectedSomeInCloud(item.type, item.cloud)"></span>-->
+            <!--              </span>-->
+            <datalab-checkbox
+              class="header-checkbox"
+              [checked]="selectedAllInCloud(item.type, item.cloud)"
+              [someChecked]="selectedSomeInCloud(item.type, item.cloud)"
+              (toggleSelection)="toggleSelectedCloud(model, item.type, item.cloud)"
+            ></datalab-checkbox>
+            {{item.cloud}}
+          </a>
+        </li>
+        <li class="role-cloud-item" role="presentation" *ngIf="model && isCloudOpen[item.type + item.cloud] && isOpenCategory[item.type]" >
+          <a href="#" class="list-item" role="menuitem" (click)="toggleSelectedOptions( model, item, $event)">
+            <!--              <span class="empty-checkbox" [ngClass]="{'checked': checkInModel(item.role)}">-->
+            <!--                <span class="checked-checkbox" *ngIf="checkInModel(item.role)"></span>-->
+            <!--              </span>-->
+            <datalab-checkbox
+              class="header-checkbox"
+              [checked]="checkInModel(item.role)"
+              (toggleSelection)="toggleSelectedOptions(model, item)"
+            ></datalab-checkbox>
+            {{item.role}}
+          </a>
+        </li>
 
-              {{labels[item.type] || item.type | titlecase}}
-            </a>
-          </li>
-
-          <li class="role-item"
-              role="presentation"
-              *ngIf="model && isOpenCategory[item.type] && item.type !== 'COMPUTATIONAL_SHAPE' && item.type !== 'NOTEBOOK_SHAPE'"
-              [hidden]="!isAdmin && item.role === 'Allow to execute administration operation'"
-          >
-            <a href="#" class="list-item" role="menuitem" (click)="toggleSelectedOptions(model, item, $event)">
-<!--              <span class="empty-checkbox" [ngClass]="{'checked': checkInModel(item.role)}">-->
-<!--                <span class="checked-checkbox" *ngIf="checkInModel(item.role)"></span>-->
-<!--              </span>-->
-              <datalab-checkbox
-                class="header-checkbox"
-                [checked]="checkInModel(item.role)"
-                (toggleSelection)="toggleSelectedOptions(model, item)"
-              >
-              </datalab-checkbox>
-              {{item.role}}
-            </a>
-          </li>
-          <li class="role-item" role="presentation" (click)="toggleItemsForCloud(item.type + item.cloud, $event)"
-              *ngIf="model && isOpenCategory[item.type] && item.type === 'COMPUTATIONAL_SHAPE' && item.cloud !== items[i - 1].cloud
-              || model && isOpenCategory[item.type] && item.type === 'NOTEBOOK_SHAPE' && item.type !== items[i - 1].type
-              || model && isOpenCategory[item.type] && item.type === 'NOTEBOOK_SHAPE' && item.cloud !== items[i - 1].cloud
-              || model && isOpenCategory[item.type] && item.type === 'COMPUTATIONAL_SHAPE' && item.type !== items[i - 1].type"
-          >
-            <a href="#" class="list-item" role="menuitem">
-              <span class="arrow" [ngClass]="{'rotate-arrow': isCloudOpen[item.type + item.cloud], 'arrow-checked': selectedAllInCloud(item.type, item.cloud) || selectedSomeInCloud(item.type, item.cloud)}">
-                 <i class="material-icons">keyboard_arrow_right</i>
-              </span>
-<!--              <span class="empty-checkbox"-->
-<!--                    [ngClass]="{-->
-<!--                    'checked': selectedAllInCloud(item.type, item.cloud)-->
-<!--                    || selectedSomeInCloud(item.type, item.cloud)}"-->
-<!--                    (click)="toggleSelectedCloud($event, model, item.type, item.cloud);-->
-<!--                    $event.stopPropagation()"-->
-<!--              >-->
-<!--                <span class="checked-checkbox" *ngIf="selectedAllInCloud(item.type, item.cloud)"></span>-->
-<!--                <span class="line-checkbox" *ngIf="selectedSomeInCloud(item.type, item.cloud)"></span>-->
-<!--              </span>-->
-              <datalab-checkbox
-                class="header-checkbox"
-                [checked]="selectedAllInCloud(item.type, item.cloud)"
-                [someChecked]="selectedSomeInCloud(item.type, item.cloud)"
-                (toggleSelection)="toggleSelectedCloud(model, item.type, item.cloud)"
-              >
-              </datalab-checkbox>
-              {{item.cloud}}
-            </a>
-          </li>
-          <li class="role-cloud-item" role="presentation" *ngIf="model && isCloudOpen[item.type + item.cloud] && isOpenCategory[item.type]" >
-            <a href="#" class="list-item" role="menuitem" (click)="toggleSelectedOptions( model, item, $event)">
-<!--              <span class="empty-checkbox" [ngClass]="{'checked': checkInModel(item.role)}">-->
-<!--                <span class="checked-checkbox" *ngIf="checkInModel(item.role)"></span>-->
-<!--              </span>-->
-              <datalab-checkbox
-                class="header-checkbox"
-                [checked]="checkInModel(item.role)"
-                (toggleSelection)="toggleSelectedOptions(model, item)"
-              >
-              </datalab-checkbox>
-              {{item.role}}
-            </a>
-          </li>
-
-        </ng-template>
+      </ng-template>
 
       <li *ngIf="items?.length == 0">
         <a role="menuitem" class="list-item">
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.scss b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.scss
index 6231568..62e893a 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.scss
@@ -25,19 +25,18 @@
 
 .dropdown-list button,
 .dropdown-multiselect button {
-
   width: 100%;
-  background: #fff;
-  padding-left: 15px;
-  font-size: 13px;
   height: 34px;
+  padding-left: 15px;
+  background: #fff;
+  font-size: 13px;
   text-align: left;
   white-space: nowrap;
   cursor: pointer;
   border-radius: 0;
   border: none;
   outline: none;
-  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }
 
 .dropdown-list {
@@ -48,9 +47,9 @@
       color: #4a5c89;
 
       em {
+        margin-right: 0px;
         font-size: 13px;
         color: #35afd5;
-        margin-right: 0px;
         font-style: normal;
       }
     }
@@ -61,27 +60,27 @@
 .dropdown-list button:focus,
 .dropdown-multiselect button:active,
 .dropdown-multiselect button:focus {
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
 .dropdown-multiselect {
   button {
-    span{
-      color: #999;
-      font-weight: 300;
+    span {
       display: inline-block;
       max-width: 80%;
+      color: #999;
+      font-weight: 300;
     }
 
-    span:not(.caret-btn){
+    span:not(.caret-btn) {
       padding-top: 3px;
       font-size: 14px;
     }
 
     .selected-items {
-      color: #4a5c89;
       max-width: 477px;
       padding-top: 5px;
+      color: #4a5c89;
     }
   }
 }
@@ -98,8 +97,8 @@
     right: 0;
     width: 40px;
     height: 100%;
-    text-align: center;
     padding: 7px;
+    text-align: center;
     -webkit-appearance: none;
     -moz-appearance: none;
     border-left: 1px solid #ececec;
@@ -108,9 +107,9 @@
   }
 
   .list-menu {
+    left: 0;
     width: 100%;
     max-height: 450px;
-    left: 0;
     padding: 0;
     margin: 0;
     overflow-y: auto;
@@ -121,14 +120,13 @@
       margin: 0;
     }
 
-    .role-item{
+    .role-item {
       padding-left: 30px;
     }
 
-    .role-cloud-item{
+    .role-cloud-item {
       padding-left: 60px;
     }
-
   }
 
   &.statuses {
@@ -150,10 +148,10 @@
 
 .dropdown-list .list-menu a,
 .dropdown-multiselect .list-menu li a {
+  position: relative;
   display: flex;
   padding: 10px;
   padding-left: 15px;
-  position: relative;
   font-weight: 300;
   cursor: pointer;
   color: #4a5c89;
@@ -162,7 +160,7 @@
 
 .dropdown-multiselect .list-menu li a {
   padding-left: 25px;
-  transition: all .45s ease-in-out;
+  transition: all 0.45s ease-in-out;
 }
 
 .dropdown-list .list-menu a:hover,
@@ -178,16 +176,15 @@
 }
 
 .dropdown-multiselect .list-menu .filter-actions a {
-  width: 50%;
-  color: #35afd5;
   display: block;
+  width: 50%;
   padding: 0;
+  color: #35afd5;
   line-height: 40px !important;
   text-align: center;
 }
 
 .dropdown-list {
-
   .list-menu,
   .title {
     span {
@@ -221,9 +218,9 @@
 }
 
 .dropdown-list .list-menu a {
+  position: relative;
   padding: 12px;
   padding-left: 15px;
-  position: relative;
   font-weight: 300;
   cursor: pointer;
 
@@ -244,7 +241,7 @@
   color: #35afd5;
   font-size: 18px;
   line-height: 26px;
-  transition: all .45s ease-in-out;
+  transition: all 0.45s ease-in-out;
 }
 
 .dropdown-multiselect .list-menu .select_all:hover,
@@ -267,13 +264,13 @@
     color: #35afd5;
 
     &.checked-checkbox {
+      position: absolute;
       top: 0;
       left: 4px;
       width: 5px;
       height: 10px;
       border-bottom: 2px solid white;
       border-right: 2px solid white;
-      position: absolute;
       transform: rotate(45deg);
     }
 
@@ -285,28 +282,28 @@
       border-bottom: 2px solid white;
     }
 
-    &.arrow{
+    &.arrow {
       left: 2px;
       top: 9px;
-      i{
+
+      i {
         color: lightgrey;
       }
-      &.rotate-arrow{
+      
+      &.rotate-arrow {
         transform: rotate(90deg);
-        transition: .1s ease-in-out;
+        transition: 0.1s ease-in-out;
         top: 6px;
         left: 0;
       }
 
-      &.arrow-checked{
-        i{
-          color: #36afd5
+      &.arrow-checked {
+        i {
+          color: #36afd5;
         }
       }
     }
   }
-
-
 }
 
 .dropdown-multiselect.btn-group.open .dropdown-toggle {
@@ -314,22 +311,23 @@
 }
 
 .empty-checkbox {
+  position: relative;
   width: 16px;
   height: 16px;
+  margin-top: 2px;
   border-radius: 2px;
   border: 2px solid lightgrey;
-  margin-top: 2px;
-  position: relative;
+
   &.checked {
     border-color: #35afd5;
     background-color: #35afd5;
   }
 }
 
-.d-none{
+.d-none {
   display: none;
 }
 
-datalab-checkbox{
+datalab-checkbox {
   margin: 2px 5px 0 0;
 }
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.ts b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.ts
index 9b1c918..0a2300f 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.ts
@@ -18,7 +18,7 @@
  */
 
 import { Input, Output, Component, EventEmitter } from '@angular/core';
-import {SortUtils} from '../../../core/util';
+import { SortUtils } from '../../../core/util';
 
 @Component({
   selector: 'multi-level-select-dropdown',
@@ -34,12 +34,8 @@
   @Input() isAdmin: boolean;
   @Output() selectionChange: EventEmitter<{}> = new EventEmitter();
 
-  public isOpenCategory = {
-  };
-
-  public isCloudOpen = {
-
-  };
+  public isOpenCategory = {};
+  public isCloudOpen = {};
 
   public labels = {
     COMPUTATIONAL_SHAPE: 'Compute shapes',
@@ -49,8 +45,7 @@
   };
   public selectedList: any;
 
-  constructor() {
-  }
+  constructor() {}
 
   toggleSelectedOptions( model, value, event?) {
     if (event) event.preventDefault();
@@ -63,7 +58,9 @@
     if (event) event.preventDefault();
     const categoryItems = this.items.filter(role => role.type === value);
     this.selectedAllInCattegory(value) ? this.model = this.model.filter(role => role.type !== value) : categoryItems.forEach(role => {
-      if (!model.filter(mod => mod.role === role.role).length) {this.model.push(role); }
+      if (!model.filter(mod => mod.role === role.role).length) {
+        this.model.push(role); 
+      }
     });
     this.onUpdate(event);
   }
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-select-dropdown/multi-select-dropdown.component.html b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-select-dropdown/multi-select-dropdown.component.html
index 2458d9f..178f9bc 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-select-dropdown/multi-select-dropdown.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-select-dropdown/multi-select-dropdown.component.html
@@ -20,9 +20,10 @@
 <div class="dropdown-multiselect btn-group" ngClass="{{type || ''}}">
   <button type="button" #list (click)="multiactions.toggle($event, list)">
     <span class="ellipsis" *ngIf="model.length === 0 && type">
-      <ng-container *ngIf="type === 'resource_type' || type === 'resource_types';else noResourceTypeSelect">Select {{ type | convertaction}}</ng-container>
-         <ng-template #noResourceTypeSelect>Select {{ type  }}</ng-template>
-
+      <ng-container *ngIf="type === 'resource_type' || type === 'resource_types';else noResourceTypeSelect">
+        Select {{ type | convertaction}}
+      </ng-container>
+      <ng-template #noResourceTypeSelect>Select {{ type  }}</ng-template>
     </span>
     <span class="selected-items ellipsis" *ngIf="model.length !== 0">
       Selected {{model.length}} item<strong *ngIf="model.length > 1">s</strong>
@@ -40,23 +41,33 @@
           <i class="material-icons">clear</i>&nbsp;None
         </a>
       </li>
-        <ng-template let-item ngFor [ngForOf]="items">
-          <li role="presentation" *ngIf="model">
-            <a href="#" 
-              class="list-item billing-user-name"
-              [ngClass]="{'uppercase': type === 'resource_type' || type === 'status'}"
-              role="menuitem" 
-              (click)="toggleSelectedOptions($event, model, item)">
-              <span class="material-icons" *ngIf="model.indexOf(item) >= 0">done</span>
-              <ng-container *ngIf="type !== 'resource_type' && type !== 'resource_types' && item !== 'invalid_name' && item !== 'invalid_version' && item !== 'installation_error'">
-                <div [ngClass]="{'uppercase': type === 'status'}">{{item}}</div>
-              </ng-container>
-              <ng-container *ngIf="type === 'resource_type' || type === 'resource_types' || item === 'invalid_name' || item === 'invalid_version' || item === 'installation_error'">
-                <div [ngClass]="{'uppercase': type === 'status' || type === 'resource_type'}">{{item | convertaction}}</div>
-              </ng-container>
-            </a>
-          </li>
-        </ng-template>
+      <ng-template let-item ngFor [ngForOf]="items">
+        <li role="presentation" *ngIf="model">
+          <a 
+            href="#" 
+            class="list-item billing-user-name"
+            [ngClass]="{'uppercase': type === 'resource_type' || type === 'status'}"
+            role="menuitem" 
+            (click)="toggleSelectedOptions($event, model, item)"
+          >
+            <span class="material-icons" *ngIf="model.indexOf(item) >= 0">done</span>
+            <ng-container 
+              *ngIf="type !== 'resource_type' && type !== 'resource_types' 
+                && item !== 'invalid_name' && item !== 'invalid_version' 
+                && item !== 'installation_error'"
+            >
+              <div [ngClass]="{'uppercase': type === 'status'}">{{item}}</div>
+            </ng-container>
+            <ng-container 
+              *ngIf="type === 'resource_type' || type === 'resource_types' 
+                || item === 'invalid_name' || item === 'invalid_version' 
+                || item === 'installation_error'"
+            >
+              <div [ngClass]="{'uppercase': type === 'status' || type === 'resource_type'}">{{item | convertaction}}</div>
+            </ng-container>
+          </a>
+        </li>
+      </ng-template>
       <li *ngIf="items?.length == 0">
         <a role="menuitem" class="list-item">
           <span class="material-icons">visibility_off</span>
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/inform-message/inform-message.component.css b/services/self-service/src/main/resources/webapp/src/app/shared/inform-message/inform-message.component.css
index 4a36213..96ee4e1 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/inform-message/inform-message.component.css
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/inform-message/inform-message.component.css
@@ -18,16 +18,16 @@
  */
 
 .message-wrapper{
-  min-height: 200px;
-  width: 100%;
-  box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
-  transition: box-shadow 280ms cubic-bezier(.4,0,.2,1);
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 16px;
-  border-radius: 4px;
+  min-height: 200px;
+  width: 100%;
   background: #fff;
   color: rgba(0,0,0,.87);
+  border-radius: 4px;
+  box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
+  transition: box-shadow 280ms cubic-bezier(.4,0,.2,1);
 }
 
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/inform-message/inform-message.component.ts b/services/self-service/src/main/resources/webapp/src/app/shared/inform-message/inform-message.component.ts
index f516928..26491cb 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/inform-message/inform-message.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/inform-message/inform-message.component.ts
@@ -17,10 +17,7 @@
  * under the License.
  */
 
-import { Component, Input, Output, EventEmitter, HostBinding,
-         ChangeDetectorRef, ElementRef, OnInit, OnDestroy,
-         ViewEncapsulation, HostListener } from '@angular/core';
-
+import { Component, Input, OnInit } from '@angular/core';
 
 @Component({
   selector: 'inform-message',
@@ -32,10 +29,7 @@
 export class InformMessageComponent implements OnInit {
   @Input() message: string;
 
-  constructor() {}
+  constructor() { }
 
-  ngOnInit(): void {
-  }
-
-
+  ngOnInit(): void { }
 }
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.html b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.html
index c539dbb..4c61dc9 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.html
@@ -18,7 +18,7 @@
   -->
 
 <div class="nav-bar" [hidden]="!isLoggedIn">
-<!--  <mat-progress-bar *ngIf="showProgressBar" mode="indeterminate"></mat-progress-bar>-->
+  <!--  <mat-progress-bar *ngIf="showProgressBar" mode="indeterminate"></mat-progress-bar>-->
   <mat-progress-bar *ngIf="progressBarService.showProgressBar | async" mode="indeterminate"></mat-progress-bar>
   <div class="menu-area" *ngIf="healthStatus">
 
@@ -61,88 +61,131 @@
         </p>
       </div>
     </bubble-up>
-    <button class="btn btn-logout ani" (click)="logout_btnClick()">Log out <span
-        class="user-name">{{currentUserName}}</span></button>
+    <button class="btn btn-logout ani" (click)="logout_btnClick()">
+      Log out <span class="user-name">{{currentUserName}}</span>
+    </button>
   </div>
-
 </div>
+
 <mat-sidenav-container class="example-container" autosize >
-  <mat-sidenav #drawer mode="side" opened role="navigation" [style.width]="isExpanded ? '220px' : '60px'" disableClose *ngIf="healthStatus">
+  <mat-sidenav 
+    #drawer 
+    mode="side" 
+    opened 
+    role="navigation" 
+    [style.width]="isExpanded ? '220px' : '60px'" 
+    disableClose 
+    *ngIf="healthStatus"
+  >
     <mat-nav-list >
       <nav>
         <div>
-          <a class="nav-item" [routerLink]="['/resources_list']" [routerLinkActive]="['active']"
-            [routerLinkActiveOptions]="{exact:true}">
+          <a 
+            class="nav-item" 
+            [routerLink]="['/resources_list']" 
+            [routerLinkActive]="['active']"
+            [routerLinkActiveOptions]="{exact:true}"
+          >
             <span *ngIf="isExpanded; else resources">List of Resources</span>
             <ng-template #resources><i class="material-icons">dashboard</i></ng-template>
           </a>
           <a class="nav-item has-children" *ngIf="healthStatus?.admin || healthStatus?.projectAdmin">
             <span *ngIf="isExpanded">Administration</span>
 
-            <a class="sub-nav-item" [style.margin-left.px]="isExpanded ? '30' : '0'" [routerLink]="['/roles']"
-              [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+            <a 
+              class="sub-nav-item" 
+              [style.margin-left.px]="isExpanded ? '30' : '0'" 
+              [routerLink]="['/roles']"
+              [routerLinkActive]="['active']" 
+              [routerLinkActiveOptions]="{exact:true}"
+            >
               <span *ngIf="isExpanded; else roles">Roles</span>
               <ng-template #roles><i class="material-icons">account_box</i></ng-template>
             </a>
-            <a class="sub-nav-item" [style.margin-left.px]="isExpanded ? '30' : '0'" [routerLink]="['/projects']"
-              [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+            <a 
+              class="sub-nav-item" 
+              [style.margin-left.px]="isExpanded ? '30' : '0'" 
+              [routerLink]="['/projects']"
+              [routerLinkActive]="['active']" 
+              [routerLinkActiveOptions]="{exact:true}"
+            >
               <span *ngIf="isExpanded; else projects">Projects</span>
               <ng-template #projects><i class="material-icons">dns</i></ng-template>
             </a>
-<!--            <a class="sub-nav-item" [style.margin-left.px]="isExpanded ? '30' : '0'" [routerLink]="['/odahu']"-->
-<!--               [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">-->
-<!--              <span *ngIf="isExpanded; else odahu">Odahu deployment</span>-->
-<!--              <ng-template #odahu><i class="material-icons">get_app</i></ng-template>-->
-<!--            </a>-->
-            <a class="sub-nav-item" [style.margin-left.px]="isExpanded ? '30' : '0'"
-              [routerLink]="['/environment_management']" [routerLinkActive]="['active']"
-              [routerLinkActiveOptions]="{exact:true}">
+            <!--            <a class="sub-nav-item" [style.margin-left.px]="isExpanded ? '30' : '0'" [routerLink]="['/odahu']"-->
+            <!--               [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">-->
+            <!--              <span *ngIf="isExpanded; else odahu">Odahu deployment</span>-->
+            <!--              <ng-template #odahu><i class="material-icons">get_app</i></ng-template>-->
+            <!--            </a>-->
+            <a 
+              class="sub-nav-item" 
+              [style.margin-left.px]="isExpanded ? '30' : '0'"
+              [routerLink]="['/environment_management']" 
+              [routerLinkActive]="['active']"
+              [routerLinkActiveOptions]="{exact:true}"
+            >
               <span *ngIf="isExpanded; else env">Environment Management</span>
               <ng-template #env><i class="material-icons">settings</i></ng-template>
             </a>
-            <a *ngIf="healthStatus?.admin" class="sub-nav-item" [style.margin-left.px]="isExpanded ? '30' : '0'"
-               [routerLink]="['/configuration']" [routerLinkActive]="['active']"
-               [routerLinkActiveOptions]="{exact:true}" >
+            <a 
+              *ngIf="healthStatus?.admin" 
+              class="sub-nav-item" 
+              [style.margin-left.px]="isExpanded ? '30' : '0'"
+              [routerLink]="['/configuration']" 
+              [routerLinkActive]="['active']"
+              [routerLinkActiveOptions]="{exact:true}"
+            >
               <span *ngIf="isExpanded; else env">Configuration</span>
               <ng-template #env><i class="material-icons">build_circle</i></ng-template>
             </a>
           </a>
           <a class="nav-item has-children" *ngIf="healthStatus?.billingEnabled || healthStatus?.auditEnabled">
             <span *ngIf="isExpanded">Reports</span>
-            <a *ngIf="healthStatus?.auditEnabled" class="sub-nav-item" [routerLink]="['/audit']" [style.margin-left.px]="isExpanded ? '30' : '0'"
-               [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+            <a 
+              *ngIf="healthStatus?.auditEnabled" 
+              class="sub-nav-item" 
+              [routerLink]="['/audit']" 
+              [style.margin-left.px]="isExpanded ? '30' : '0'"
+              [routerLinkActive]="['active']" 
+              [routerLinkActiveOptions]="{exact:true}"
+            >
               <span *ngIf="isExpanded; else audit">Audit</span>
               <ng-template #audit><i class="material-icons">library_books</i></ng-template>
             </a>
-            <a *ngIf="healthStatus?.billingEnabled" class="sub-nav-item" [routerLink]="['/billing_report']"
-              [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" [style.margin-left.px]="isExpanded ? '30' : '0'">
+            <a 
+              *ngIf="healthStatus?.billingEnabled" 
+              class="sub-nav-item" 
+              [routerLink]="['/billing_report']"
+              [routerLinkActive]="['active']" 
+              [routerLinkActiveOptions]="{exact:true}" 
+              [style.margin-left.px]="isExpanded ? '30' : '0'"
+            >
               <span *ngIf="isExpanded; else billing">Billing</span>
               <ng-template #billing><i class="material-icons">account_balance_wallet</i></ng-template>
             </a>
           </a>
         </div>
-<!--        <div>-->
-<!--          <a class="nav-item" [routerLink]="['/swagger']" [routerLinkActive]="['active']"-->
-<!--            [routerLinkActiveOptions]="{exact:true}">-->
-<!--            <span *ngIf="isExpanded; else endpoint">Cloud Endpoint API</span>-->
-<!--            <ng-template #endpoint>-->
-<!--              <span>-->
-<!--                  <g>-->
-<!--                    <path d="M127.059657,255.996921 C58.8506544,255.526472 -0.457073619,198.918442 0.00265506057,126.998303 C0.444649399,57.7958628 57.9516598,-0.468967577 129.11002,0.00284555012 C198.267128,0.462386081 256.613109,57.8667711 255.995136,128.194199 C256.568091,197.883453 197.934268,256.489189 127.059657,255.996921 Z M127.059657,255.996921 C58.8506544,255.526472 -0.457073619,198.918442 0.00265506057,126.998303 C0.444649399,57.7958628 57.9516598,-0.468967577 129.11002,0.00284555012 C198.267128,0.462386081 256.613109,57.8667711 255.995136,128.194199 C256.568091,197.883453 197.934268,256.489189 127.059657,255.996921 Z" fill="#FFFFFF"></path>-->
-<!--                    <path id="swager-bgr" d="M127.184644,238.997327 C68.0323765,238.589271 16.6036091,189.498744 17.0023028,127.131428 C17.3860285,67.1185953 67.2554,16.5917106 128.963117,17.0024872 C188.934544,17.4010221 239.531905,67.1825241 238.995778,128.169251 C239.492444,188.602381 188.64743,239.424426 127.184644,238.997327 Z M127.184644,238.997327 C68.0323765,238.589271 16.6036091,189.498744 17.0023028,127.131428 C17.3860285,67.1185953 67.2554,16.5917106 128.963117,17.0024872 C188.934544,17.4010221 239.531905,67.1825241 238.995778,128.169251 C239.492444,188.602381 188.64743,239.424426 127.184644,238.997327 Z" fill="#577289"></path>-->
-<!--                    <path d="M169.327319,127.956161 C169.042723,133.246373 164.421106,137.639224 159.866213,136.872586 C159.844426,136.872586 159.821277,136.872586 159.798128,136.872586 C154.753021,136.879395 150.658383,132.794288 150.652936,127.749182 C150.824511,122.690458 155.019915,118.703395 160.08,118.789182 C165.125106,118.813692 169.59966,123.077182 169.327319,127.956161 Z M88.2011915,179.220161 C90.1034894,179.27599 92.0071489,179.235139 94.2008511,179.235139 L94.2008511,193.021012 C80.5661277,195.326373 69.3348085,191.455054 66.5787234,179.929607 C65.6350638,175.69199 65.0549787,171.380841 64.8425532,167.04382 C64.5497872,162.452161 65.0563404,157.808756 64.706383,153.225267 C63.7368511,140.613182 62.1028085,136.30748 50,135.711054 L50,120.014714 C50.8674043,119.81182 51.7470638,119.662033 52.6321702,119.562629 C59.2677447,119.23582 62.0646809,117.201437 63.5489362,110.665267 C64.2243404,106.992756 64.6246809,103.275309 64.7431489,99.5428839 C65.268766,92.3258627 65.0822128,84.991735 66.2845957,77.8918201 C68.0221277,67.6245861 74.3962553,62.6366712 84.9249362,62.0783733 C87.9206809,61.9176925 90.9259574,62.0538627 94.3206809,62.0538627 L94.3206809,76.1447563 C92.9235745,76.2441605 91.6435745,76.4470542 90.3717447,76.4089265 C81.7916596,76.146118 81.3477447,79.0683308 80.7213617,86.1709691 C80.3305532,90.6250967 80.8697872,95.1554797 80.5661277,99.6245861 C80.2488511,104.071905 79.6537872,108.496075 78.7850213,112.869863 C77.547234,119.208586 73.6500426,123.922799 68.2495319,127.92348 C78.7332766,134.745607 79.9261277,145.346458 80.6069787,156.110714 C80.9732766,161.895224 80.8057872,167.720586 81.3926809,173.476501 C81.8502128,177.944246 83.5877447,179.08399 88.2011915,179.220161 Z M97.0372766,118.789182 C97.0917447,118.789182 97.1448511,118.789182 97.1993191,118.789182 C102.211745,118.872246 106.209702,123.002288 106.126638,128.016075 C106.126638,128.180841 106.121191,128.344246 106.11166,128.50765 C105.829787,133.407054 101.630298,137.149012 96.7308936,136.867139 C96.5334468,136.871224 96.3373617,136.867139 96.1399149,136.857607 C91.1506383,136.609778 87.3065532,132.36399 87.554383,127.374714 C87.8022128,122.385437 92.048,118.541352 97.0372766,118.789182 Z M128.273362,118.789182 C133.755574,118.746969 137.396766,122.29965 137.425362,127.719224 C137.455319,133.284501 134.003404,136.845352 128.556596,136.868501 C123.017191,136.893012 119.370553,133.389352 119.340596,128.002458 C119.324255,127.727395 119.32017,127.452331 119.32834,127.177267 C119.482213,122.390884 123.486979,118.635309 128.273362,118.789182 Z M193.673191,111.92348 C195.131574,117.370288 197.970723,119.284841 203.704851,119.546288 C204.644426,119.589863 205.579915,119.749182 206.868085,119.892161 L206.868085,135.584416 C206.170894,135.813182 205.456,135.984756 204.730213,136.096416 C197.046128,136.574373 193.54383,139.726714 192.76766,147.431224 C192.272,152.349692 192.312851,157.322629 191.972426,162.258799 C191.829447,167.678373 191.336511,173.082969 190.49634,178.438544 C188.535489,188.142033 182.477277,192.982884 172.467404,193.573863 C169.245617,193.764501 166.000681,193.60382 162.526979,193.60382 L162.526979,179.578288 C164.396596,179.462544 166.046979,179.303224 167.701447,179.263735 C173.682043,179.120756 175.796766,177.192586 176.089532,171.252841 C176.413617,164.727565 176.555234,158.194118 176.846638,151.66748 C177.270128,142.233607 179.853277,133.806033 188.641702,127.922118 C183.612936,124.336756 179.575489,119.994288 178.529702,114.138969 C177.264681,107.041778 176.85617,99.7879903 176.175319,92.5913946 C175.838979,88.9937776 175.855319,85.3648414 175.504,81.7699478 C175.125447,77.8890967 172.459234,76.5464584 168.926979,76.4593095 C166.903489,76.4102882 164.87183,76.4497776 162.284596,76.4497776 L162.284596,62.7537776 C178.793872,60.0126712 190.198128,65.5057776 191.257532,81.3015222 C191.701447,87.9343733 191.636085,94.5985435 192.060936,101.231395 C192.247489,104.839905 192.786723,108.421182 193.673191,111.92348 Z" fill="#ffffff"></path>-->
-<!--                  </g>-->
-<!--                </svg>-->
-<!--              </span>-->
-<!--            </ng-template>-->
-<!--          </a>-->
-<!--        </div>-->
+        <!--        <div>-->
+        <!--          <a class="nav-item" [routerLink]="['/swagger']" [routerLinkActive]="['active']"-->
+        <!--            [routerLinkActiveOptions]="{exact:true}">-->
+        <!--            <span *ngIf="isExpanded; else endpoint">Cloud Endpoint API</span>-->
+        <!--            <ng-template #endpoint>-->
+        <!--              <span>-->
+        <!--                  <g>-->
+        <!--                    <path d="M127.059657,255.996921 C58.8506544,255.526472 -0.457073619,198.918442 0.00265506057,126.998303 C0.444649399,57.7958628 57.9516598,-0.468967577 129.11002,0.00284555012 C198.267128,0.462386081 256.613109,57.8667711 255.995136,128.194199 C256.568091,197.883453 197.934268,256.489189 127.059657,255.996921 Z M127.059657,255.996921 C58.8506544,255.526472 -0.457073619,198.918442 0.00265506057,126.998303 C0.444649399,57.7958628 57.9516598,-0.468967577 129.11002,0.00284555012 C198.267128,0.462386081 256.613109,57.8667711 255.995136,128.194199 C256.568091,197.883453 197.934268,256.489189 127.059657,255.996921 Z" fill="#FFFFFF"></path>-->
+        <!--                    <path id="swager-bgr" d="M127.184644,238.997327 C68.0323765,238.589271 16.6036091,189.498744 17.0023028,127.131428 C17.3860285,67.1185953 67.2554,16.5917106 128.963117,17.0024872 C188.934544,17.4010221 239.531905,67.1825241 238.995778,128.169251 C239.492444,188.602381 188.64743,239.424426 127.184644,238.997327 Z M127.184644,238.997327 C68.0323765,238.589271 16.6036091,189.498744 17.0023028,127.131428 C17.3860285,67.1185953 67.2554,16.5917106 128.963117,17.0024872 C188.934544,17.4010221 239.531905,67.1825241 238.995778,128.169251 C239.492444,188.602381 188.64743,239.424426 127.184644,238.997327 Z" fill="#577289"></path>-->
+        <!--                    <path d="M169.327319,127.956161 C169.042723,133.246373 164.421106,137.639224 159.866213,136.872586 C159.844426,136.872586 159.821277,136.872586 159.798128,136.872586 C154.753021,136.879395 150.658383,132.794288 150.652936,127.749182 C150.824511,122.690458 155.019915,118.703395 160.08,118.789182 C165.125106,118.813692 169.59966,123.077182 169.327319,127.956161 Z M88.2011915,179.220161 C90.1034894,179.27599 92.0071489,179.235139 94.2008511,179.235139 L94.2008511,193.021012 C80.5661277,195.326373 69.3348085,191.455054 66.5787234,179.929607 C65.6350638,175.69199 65.0549787,171.380841 64.8425532,167.04382 C64.5497872,162.452161 65.0563404,157.808756 64.706383,153.225267 C63.7368511,140.613182 62.1028085,136.30748 50,135.711054 L50,120.014714 C50.8674043,119.81182 51.7470638,119.662033 52.6321702,119.562629 C59.2677447,119.23582 62.0646809,117.201437 63.5489362,110.665267 C64.2243404,106.992756 64.6246809,103.275309 64.7431489,99.5428839 C65.268766,92.3258627 65.0822128,84.991735 66.2845957,77.8918201 C68.0221277,67.6245861 74.3962553,62.6366712 84.9249362,62.0783733 C87.9206809,61.9176925 90.9259574,62.0538627 94.3206809,62.0538627 L94.3206809,76.1447563 C92.9235745,76.2441605 91.6435745,76.4470542 90.3717447,76.4089265 C81.7916596,76.146118 81.3477447,79.0683308 80.7213617,86.1709691 C80.3305532,90.6250967 80.8697872,95.1554797 80.5661277,99.6245861 C80.2488511,104.071905 79.6537872,108.496075 78.7850213,112.869863 C77.547234,119.208586 73.6500426,123.922799 68.2495319,127.92348 C78.7332766,134.745607 79.9261277,145.346458 80.6069787,156.110714 C80.9732766,161.895224 80.8057872,167.720586 81.3926809,173.476501 C81.8502128,177.944246 83.5877447,179.08399 88.2011915,179.220161 Z M97.0372766,118.789182 C97.0917447,118.789182 97.1448511,118.789182 97.1993191,118.789182 C102.211745,118.872246 106.209702,123.002288 106.126638,128.016075 C106.126638,128.180841 106.121191,128.344246 106.11166,128.50765 C105.829787,133.407054 101.630298,137.149012 96.7308936,136.867139 C96.5334468,136.871224 96.3373617,136.867139 96.1399149,136.857607 C91.1506383,136.609778 87.3065532,132.36399 87.554383,127.374714 C87.8022128,122.385437 92.048,118.541352 97.0372766,118.789182 Z M128.273362,118.789182 C133.755574,118.746969 137.396766,122.29965 137.425362,127.719224 C137.455319,133.284501 134.003404,136.845352 128.556596,136.868501 C123.017191,136.893012 119.370553,133.389352 119.340596,128.002458 C119.324255,127.727395 119.32017,127.452331 119.32834,127.177267 C119.482213,122.390884 123.486979,118.635309 128.273362,118.789182 Z M193.673191,111.92348 C195.131574,117.370288 197.970723,119.284841 203.704851,119.546288 C204.644426,119.589863 205.579915,119.749182 206.868085,119.892161 L206.868085,135.584416 C206.170894,135.813182 205.456,135.984756 204.730213,136.096416 C197.046128,136.574373 193.54383,139.726714 192.76766,147.431224 C192.272,152.349692 192.312851,157.322629 191.972426,162.258799 C191.829447,167.678373 191.336511,173.082969 190.49634,178.438544 C188.535489,188.142033 182.477277,192.982884 172.467404,193.573863 C169.245617,193.764501 166.000681,193.60382 162.526979,193.60382 L162.526979,179.578288 C164.396596,179.462544 166.046979,179.303224 167.701447,179.263735 C173.682043,179.120756 175.796766,177.192586 176.089532,171.252841 C176.413617,164.727565 176.555234,158.194118 176.846638,151.66748 C177.270128,142.233607 179.853277,133.806033 188.641702,127.922118 C183.612936,124.336756 179.575489,119.994288 178.529702,114.138969 C177.264681,107.041778 176.85617,99.7879903 176.175319,92.5913946 C175.838979,88.9937776 175.855319,85.3648414 175.504,81.7699478 C175.125447,77.8890967 172.459234,76.5464584 168.926979,76.4593095 C166.903489,76.4102882 164.87183,76.4497776 162.284596,76.4497776 L162.284596,62.7537776 C178.793872,60.0126712 190.198128,65.5057776 191.257532,81.3015222 C191.701447,87.9343733 191.636085,94.5985435 192.060936,101.231395 C192.247489,104.839905 192.786723,108.421182 193.673191,111.92348 Z" fill="#ffffff"></path>-->
+        <!--                  </g>-->
+        <!--                </svg>-->
+        <!--              </span>-->
+        <!--            </ng-template>-->
+        <!--          </a>-->
+        <!--        </div>-->
       </nav>
     </mat-nav-list>
   </mat-sidenav>
   <mat-sidenav-content id="scrolling" [style.margin-left]="isExpanded ? '220px' : '60px'">
     <div [@fadeAnimation]="getRouterOutletState(routerOutlet)" class="fade-animation">
-
       <router-outlet #routerOutlet="outlet"></router-outlet>
     </div>
   </mat-sidenav-content>
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.scss b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.scss
index 86480bd..3d99f7d 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.scss
@@ -21,15 +21,15 @@
 // }
 
 .nav-bar {
-  min-height: 48px;
-  height: 48px;
-  background-color: #222;
-  border-color: #080808;
   position: relative;
   display: flex;
   justify-content: space-between;
   margin-bottom: 0;
   border-radius: 0;
+  min-height: 48px;
+  height: 48px;
+  background-color: #222;
+  border-color: #080808;
 
   .menu-area {
     display: flex;
@@ -52,10 +52,10 @@
 
     .statusbar {
       display: flex;
+      justify-content: center;
       width: 50px;
       height: 46px;
       text-decoration: none;
-      justify-content: center;
       color: #f9fafb;
       cursor: pointer;
 
@@ -99,14 +99,14 @@
 
     .btn-logout {
       height: 46px;
+      min-width: 280px;
       padding: 0 28px;
       background: #383838;
+      font-size: 14px;
       color: #cfdae6;
       border: 0;
       border-radius: 0;
-      font-size: 14px;
       cursor: pointer;
-      min-width: 280px;
       text-align: left;
 
       .user-name {
@@ -129,11 +129,11 @@
 
   p {
     strong {
+      display: inline-block;
+      width: 120px;
       color: #455c74;
       font-size: 14px;
       font-weight: 600;
-      width: 120px;
-      display: inline-block;
     }
 
     .helper_instruction {
@@ -145,8 +145,8 @@
     }
 
     span {
-      width: 180px;
       display: inline-block;
+      width: 180px;
       vertical-align: bottom;
     }
   }
@@ -157,13 +157,13 @@
 }
 
 a.nav-item {
-  display: block;
   position: relative;
+  display: block;
   height: 56px;
   padding: 5px 10px;
   line-height: 48px;
   font-family: "Open Sans", sans-serif;
-  transition: all .45s ease-in-out;
+  transition: all 0.45s ease-in-out;
   text-decoration: none;
   font-size: 14px;
   overflow: hidden;
@@ -184,18 +184,19 @@
     background: none !important;
     color: #36afd5 !important;
   }
-  &:not(.has-children):hover #swager-bgr{
+
+  &:not(.has-children):hover #swager-bgr {
     fill: #36afd5;
   }
 
   &:not(:last-child)::after {
-    content: ' ';
+    content: " ";
     position: absolute;
     bottom: 0;
-    left: calc(50% - 200px/2);
+    left: calc(50% - 200px / 2);
+    display: block;
     height: 1px;
     width: 200px;
-    display: block;
     background: #edf1f5;
   }
 
@@ -212,7 +213,7 @@
 
   .sub-nav-item {
     display: block;
-    transition: all .45s ease-in-out;
+    transition: all 0.45s ease-in-out;
 
     i {
       vertical-align: middle;
@@ -235,30 +236,30 @@
 .error,
 .user-name,
 .meta {
-  transition: all .35s ease-in-out;
+  transition: all 0.35s ease-in-out;
 }
 
 .hamburger {
-  border: none;
-  padding: 0;
-  background: none;
-  outline: none;
   width: 60px;
   height: 46px;
+  padding: 0;
+  border: none;
+  background: none;
+  outline: none;
   cursor: pointer;
   border-radius: 0;
-  transition: all .45s ease-in-out;
+  transition: all 0.45s ease-in-out;
 
   .line {
+    display: block;
     width: 22px;
     height: 2px;
-    display: block;
     margin: 4px auto;
     border-radius: 1px;
     background-color: #ecf0f1;
-    -webkit-transition: all .35s ease-in-out;
-    -o-transition: all .35s ease-in-out;
-    transition: all .35s ease-in-out;
+    -webkit-transition: all 0.35s ease-in-out;
+    -o-transition: all 0.35s ease-in-out;
+    transition: all 0.35s ease-in-out;
 
     &:nth-child(2) {
       -webkit-transition-delay: 0.3s;
@@ -299,7 +300,6 @@
 }
 
 mat-sidenav {
-
   mat-nav-list {
     height: 100%;
 
@@ -329,6 +329,6 @@
   }
 }
 
-.blue{
+.blue {
   color: #35afd5;
 }
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.ts b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.ts
index bdb2b86..95907e7 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.ts
@@ -17,13 +17,19 @@
  * under the License.
  */
 
-import {Component, ViewEncapsulation, OnInit, OnDestroy, ViewChild, ChangeDetectorRef, ApplicationRef} from '@angular/core';
+import { Component, ViewEncapsulation, OnInit, OnDestroy } from '@angular/core';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
-import {Subscription, timer, interval, Subject} from 'rxjs';
+import { Subscription, timer } from 'rxjs';
 import { ToastrService } from 'ngx-toastr';
 import { RouterOutlet } from '@angular/router';
 
-import { ApplicationSecurityService, HealthStatusService, AppRoutingService, SchedulerService, StorageService } from '../../core/services';
+import { 
+  ApplicationSecurityService, 
+  HealthStatusService, 
+  AppRoutingService, 
+  SchedulerService, 
+  StorageService 
+} from '../../core/services';
 import { GeneralEnvironmentStatus } from '../../administration/management/management.model';
 import { NotificationDialogComponent } from '../modal-dialog/notification-dialog';
 import {
@@ -31,13 +37,12 @@
   animate,
   transition,
   style,
-  query, group,
-
+  query, 
+  group,
 } from '@angular/animations';
 import {skip, take} from 'rxjs/operators';
 import {ProgressBarService} from '../../core/services/progress-bar.service';
 
-
 interface Quota {
   projectQuotas: {};
   totalQuotaUsed: number;
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/ticker.component.ts b/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/ticker.component.ts
index 6600838..45931f1 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/ticker.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/ticker.component.ts
@@ -38,8 +38,13 @@
           <button mat-mini-fab class="ticker-selected"></button>
         </mat-toolbar>
         <div *ngFor="let step of steps; let i = index" [class]="getTimeValueClass(step, i)" >
-            <button mat-mini-fab [color]="selectedTimePart === step ? color : ''"
-                    (click)="changeTimeValue(step)"> {{ step }} </button>
+          <button 
+            mat-mini-fab 
+            [color]="selectedTimePart === step ? color : ''"
+            (click)="changeTimeValue(step)"
+          > 
+            {{ step }} 
+          </button>
         </div>
       </div>
     </div>
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/time-cover.component.ts b/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/time-cover.component.ts
index 96aa5ef..79f3434 100755
--- a/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/time-cover.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/time-cover.component.ts
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { Component, Input, Output, OnInit, Inject, EventEmitter  } from '@angular/core';
+import { Component, Input, Output, OnInit, EventEmitter  } from '@angular/core';
 
 import { CLOCK_TYPE, TimeFormat } from './ticker.component';
 type TimeFormatAlias = TimeFormat;
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/time-picker.component.scss b/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/time-picker.component.scss
index 55909ef..43281d1 100755
--- a/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/time-picker.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/time-picker.component.scss
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-@import '_variables.scss';
+@import "_variables.scss";
 
 @-webkit-keyframes bounce {
   from {
@@ -88,15 +88,15 @@
 }
 
 .time-cover {
-  max-height: 100%;
-  width: 300px;
   display: flex;
   flex-direction: column;
+  max-height: 100%;
+  width: 300px;
 
   .container {
-    padding: 15px;
     min-width: 160px;
     width: 160px;
+    padding: 15px;
 
     &.mat-toolbar-single-row {
       background: $modal-header-color;
@@ -105,9 +105,9 @@
   }
 
   .selected-time {
+    display: flex;
     font-size: 3.5rem;
     font-weight: 400;
-    display: flex;
 
     .active {
       color: #36afd5;
@@ -115,9 +115,9 @@
   }
 
   .selected-meridiem {
+    padding-top: 2rem;
     font-size: 1rem;
     line-height: 1.3rem;
-    padding-top: 2rem;
 
     .active {
       color: #36afd5;
@@ -135,19 +135,19 @@
   }
 }
 
-.selected-time>span,
-.selected-meridiem>span {
+.selected-time > span,
+.selected-meridiem > span {
   outline: 0;
   opacity: 0.5;
 }
 
-.selected-time>span:not(.active),
-.selected-meridiem>span:not(.active) {
+.selected-time > span:not(.active),
+.selected-meridiem > span:not(.active) {
   cursor: pointer;
 }
 
-.selected-time>span.active,
-.selected-meridiem>span.active {
+.selected-time > span.active,
+.selected-meridiem > span.active {
   opacity: 1;
 }
 
@@ -164,50 +164,50 @@
   .ticker {
     width: 200px;
     height: 200px;
+    padding: 24px;
+    margin: 30px auto;
     border-radius: 50%;
     cursor: pointer;
-    padding: 24px;
     background: #ededed;
-    margin: 30px auto;
 
     .ticker-container {
-      width: 100%;
-      height: 100%;
       position: relative;
       display: block;
+      width: 100%;
+      height: 100%;
     }
 
     .ticker-center {
-      height: 6px;
-      width: 6px;
       position: absolute;
       left: 0;
       right: 0;
       top: 0;
       bottom: 0;
+      height: 6px;
+      width: 6px;
       margin: auto;
       border-radius: 50%;
     }
 
     .pointer {
       box-shadow: none;
-      width: 1px;
-      height: 50%;
       position: absolute;
       left: 0;
       right: 0;
       bottom: 0;
+      z-index: 0;
+      width: 1px;
+      height: 50%;
       margin: 0 auto;
       padding: 0;
       transform-origin: top center;
       transition: transform 200ms;
-      z-index: 0;
       pointer-events: none;
     }
 
     .ticker-step {
-      display: block;
       position: absolute;
+      display: block;
       transform: translate(-50%, -50%);
       transition: transform 200ms;
 
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/time-picker.component.ts b/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/time-picker.component.ts
index 7b1f38d..6fba205 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/time-picker.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/time-picker.component.ts
@@ -29,13 +29,21 @@
   template: `
     <div class="time-picker">
       <mat-form-field class="time-select">
-        <input matInput
-               placeholder="{{ label }}"
-               [value]="(selectedTime | localDate : 'shortTime') || null"
-               (input)="checkEmpty($event.target['value'])"
-               [disabled]="disable"
+        <input 
+          matInput
+          placeholder="{{ label }}"
+          [value]="(selectedTime | localDate : 'shortTime') || null"
+          (input)="checkEmpty($event.target['value'])"
+          [disabled]="disable"
         />
-        <mat-icon matSuffix [ngClass]="{'not-allowed': disable}" (click)="openDatePickerDialog($event)" disabled="disable">access_time</mat-icon>
+        <mat-icon 
+          matSuffix 
+          [ngClass]="{'not-allowed': disable}" 
+          (click)="openDatePickerDialog($event)" 
+          disabled="disable"
+        >
+          access_time
+        </mat-icon>
       </mat-form-field>
     </div>`,
   styleUrls: ['./time-picker.component.scss']
diff --git a/services/self-service/src/main/resources/webapp/src/app/webterminal/webterminal.component.ts b/services/self-service/src/main/resources/webapp/src/app/webterminal/webterminal.component.ts
index 0b54e47..9d4adf1 100644
--- a/services/self-service/src/main/resources/webapp/src/app/webterminal/webterminal.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/webterminal/webterminal.component.ts
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { Component, OnInit, ElementRef, ViewEncapsulation, ViewContainerRef, ViewChild, Inject } from '@angular/core';
+import { Component, OnInit, ElementRef, ViewEncapsulation, ViewChild, Inject } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { ActivatedRoute } from '@angular/router';
 import Guacamole from 'guacamole-common-js';
@@ -28,7 +28,6 @@
 const API_URL = environment.apiUrl;
 
 import { StorageService } from '../core/services';
-import { FileUtils } from '../core/util';
 
 @Component({
   selector: 'datalab-webterminal',
diff --git a/services/self-service/src/main/resources/webapp/src/assets/styles/_dialogs.scss b/services/self-service/src/main/resources/webapp/src/assets/styles/_dialogs.scss
index e10cc90..2802945 100644
--- a/services/self-service/src/main/resources/webapp/src/assets/styles/_dialogs.scss
+++ b/services/self-service/src/main/resources/webapp/src/assets/styles/_dialogs.scss
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-@import '_variables.scss';
+@import "_variables.scss";
 
 .modal-xs {
   width: 375px;
@@ -61,22 +61,22 @@
   overflow-x: hidden;
 
   &.mat-dialog-container {
+    position: relative;
     padding: 0;
     border-radius: 0;
     overflow-x: hidden;
-    position: relative;
 
     #dialog-box {
-      color: $modal-text-color;
       min-height: 150px;
+      color: $modal-text-color;
       font-family: "Open Sans", sans-serif;
 
       .dialog-header {
-        padding-left: 30px;
-        background: $modal-header-color;
-        height: 50px;
-        line-height: 50px;
         position: relative;
+        padding-left: 30px;
+        height: 50px;
+        background: $modal-header-color;
+        line-height: 50px;
 
         .modal-title {
           width: 90%;
@@ -89,8 +89,8 @@
           font-size: 18px;
           background: $modal-header-color;
 
-          &::after{
-            content: '';
+          &::after {
+            content: "";
             display: block;
           }
 
@@ -112,7 +112,7 @@
           color: #577289;
           outline: none;
           cursor: pointer;
-          transition: all .45s ease-in-out;
+          transition: all 0.45s ease-in-out;
 
           &:hover {
             color: #36afd5;
@@ -126,7 +126,7 @@
 
       .dialog-content {
         .mat-select {
-          font-family: 'Opens Sans', sans-serif;
+          font-family: "Opens Sans", sans-serif;
         }
       }
 
@@ -137,7 +137,7 @@
       .upload-key {
         margin-bottom: 20px;
 
-        &>div>div {
+        & > div > div {
           margin-top: 5px;
         }
       }
@@ -156,9 +156,10 @@
       a {
         color: #35afd5;
         text-decoration: none;
-        transition: all .45s ease-in-out;
+        transition: all 0.45s ease-in-out;
         line-height: 19px;
-        &.spark-url{
+
+        &.spark-url {
           line-height: 16px;
         }
 
@@ -168,21 +169,21 @@
       }
 
       .info-label {
-        font-size: 15px;
         margin-top: 20px;
+        font-size: 15px;
       }
 
       .control-label {
-        font-weight: 600;
         margin-top: 6px;
+        font-weight: 600;
       }
 
       .form-group {
         small {
-          font-size: 12px;
-          color: #9cadbe;
           display: inline-block;
           margin-top: 6px;
+          font-size: 12px;
+          color: #9cadbe;
         }
       }
     }
@@ -195,40 +196,39 @@
 
 .butt-file {
   position: relative;
-  overflow: hidden;
-  margin-bottom: 10px;
   display: inline-block;
-  color: #35afd5;
-  padding: 6px 29px 6px 23px;
   width: 170px;
+  margin-bottom: 10px;
+  padding: 6px 29px 6px 23px;
+  overflow: hidden;
+  color: #35afd5;
   // font: 600 16px/1.45 'Open Sans';
   font-style: normal;
   font-weight: 600;
   font-size: 16px;
   line-height: 1.45;
-  font-family: 'Open Sans', sans-serif;
-
+  font-family: "Open Sans", sans-serif;
   text-align: center;
-  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
 
   .upload-icon {
-    background: url(/../../assets/img/upload-icon.png) no-repeat;
-    background-size: 100%;
+    position: relative;
+    top: 2px;
     display: inline-block;
     width: 17px;
     height: 17px;
     margin-right: 8px;
-    position: relative;
-    top: 2px;
+    background: url(/../../assets/img/upload-icon.png) no-repeat;
+    background-size: 100%;
   }
 
-  input[type=file] {
+  input[type="file"] {
+    display: block;
     font-size: 100px;
     text-align: right;
     outline: none;
     background: #fff;
     cursor: inherit;
-    display: block;
   }
 
   &:active {
@@ -237,15 +237,15 @@
 }
 
 .detail-header {
-  border-bottom: 0;
   width: 100%;
+  border-bottom: 0;
   border-collapse: collapse;
   table-layout: fixed;
 
   td {
+    padding: 20px;
     border: 1px solid #edf1f5;
     text-align: center;
-    padding: 20px;
     text-align: center !important;
     background: #fff;
 
@@ -257,8 +257,8 @@
       text-overflow: ellipsis;
       overflow: hidden;
       cursor: default;
-      &::after{
-        content: '';
+      &::after {
+        content: "";
         display: block;
       }
     }
@@ -276,9 +276,9 @@
 
 .detail-info {
   p {
-    font-weight: 400;
-    margin-bottom: 10px;
     display: flex;
+    margin-bottom: 10px;
+    font-weight: 400;
 
     small {
       font-size: 12px;
@@ -286,21 +286,23 @@
     }
   }
 
-  span:not(.description),{
+  span:not(.description) {
+    display: block;
+    max-width: 450px;
     font-size: 14px;
     overflow: hidden;
     text-overflow: ellipsis;
-    display: block;
-    max-width: 450px;
     white-space: nowrap;
-    &::after{
-      content: '';
+
+    &::after {
+      content: "";
       display: block;
     }
-    &.link-icon{
+
+    &.link-icon {
       //margin-left: 10px;
-      cursor: pointer;
       padding-top: 2px;
+      cursor: pointer;
     }
   }
 
@@ -326,7 +328,8 @@
     }
   }
 
-  .create-resources-dialog, .top-select {
+  .create-resources-dialog,
+  .top-select {
     margin-left: 6px;
     min-width: calc(100% + 10px) !important;
   }
@@ -356,103 +359,103 @@
   display: flex;
 }
 
-.endpoints-table{
+.endpoints-table {
   border-collapse: separate;
 }
 
-.mat-step-icon-state-number .mat-step-icon-content{
+.mat-step-icon-state-number .mat-step-icon-content {
   top: 49%;
 }
 
-.confirmation-dialog p.delete-user{
-  font-weight: 500;
+.confirmation-dialog p.delete-user {
   max-height: 200px;
   padding: 5px;
+  font-weight: 500;
   overflow: hidden auto;
   text-overflow: ellipsis;
 }
 
-.bucket-browser{
+.bucket-browser {
   .mat-form-field-appearance-legacy .mat-form-field-subscript-wrapper {
     width: calc(100% + 85px);
   }
 }
 
-.full-size-tooltip{
-  max-width: 1100px  !important;
+.full-size-tooltip {
+  max-width: 1100px !important;
   white-space: pre-line;
 }
 
-.mat-list-base .mat-list-item.delete-item{
+.mat-list-base .mat-list-item.delete-item {
   height: 30px;
 }
 
-.mat-list-item{
+.mat-list-item {
   font-family: "Open Sans", sans-serif;
   font-weight: 400;
 }
 
-.d-none{
+.d-none {
   display: none !important;
 }
 
-.d-flex{
+.d-flex {
   display: flex !important;
 }
 
-.progres{
-  border: 1px solid rgba(0,0,0,.12);
-  height: 17px;
+.progres {
   position: relative;
+  height: 17px;
   width: 155px;
+  border: 1px solid rgba(0, 0, 0, 0.12);
 
-  .bar{
+  .bar {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     width: 0;
-    background-color:  #00bcd4;
+    background-color: #00bcd4;
   }
 
-  .progress-bar-text{
+  .progress-bar-text {
     position: absolute;
     left: 5px;
     top: 0;
     bottom: 0;
+    z-index: 10;
     font-size: 11px;
     line-height: 13px;
     color: rgba(0, 0, 0, 0.87);
-    z-index: 10;
   }
 }
 
-.not-allow{
+.not-allow {
   cursor: not-allowed !important;
-  &.open-bucket{
+  
+  &.open-bucket {
     color: $blue-grey-color !important;
   }
 }
 
-.audit-info-content{
+.audit-info-content {
   .mat-list {
     height: unset;
 
     .list-header {
       line-height: unset;
-      
-      .mat-list-item-content{
+
+      .mat-list-item-content {
         align-items: start !important;
       }
     }
   }
 }
 
-.add-folder-form .mat-hint{
+.add-folder-form .mat-hint {
   color: #00bcd4;
 }
 
-
 @media screen and (max-width: 1280px) {
   .modal-fullscreen {
     max-width: 100vw !important;
diff --git a/services/self-service/src/main/resources/webapp/src/assets/styles/_general.scss b/services/self-service/src/main/resources/webapp/src/assets/styles/_general.scss
index 16ffc1e..74dc5b4 100644
--- a/services/self-service/src/main/resources/webapp/src/assets/styles/_general.scss
+++ b/services/self-service/src/main/resources/webapp/src/assets/styles/_general.scss
@@ -17,9 +17,12 @@
  * under the License.
  */
 
-html, body { height: 100%; }
+html, body {
+  height: 100%;
+}
+
 body {
-  font-family: 'Open Sans', sans-serif;
+  font-family: "Open Sans", sans-serif;
   font-size: 15px;
   overflow-x: hidden;
   font-weight: 300;
@@ -29,28 +32,54 @@
   overflow: hidden;
 }
 
-.alignleft, .al {float: left}
-.alignright, .ar {float: right; left: 26px; z-index: 1010}
-.aligncenter, .ac {margin-left: auto;margin-right: auto}
+.alignleft, .al {
+  float: left;
+}
 
-.mt-5 {margin-top: 5px}
+.alignright, .ar {
+  float: right;
+  left: 26px;
+  z-index: 1010;
+}
 
+.aligncenter, .ac {
+  margin-left: auto;
+  margin-right: auto;
+}
 
-.pr-3{padding-right: 3px}
+.mt-5 {
+  margin-top: 5px;
+}
 
-.pb-50 {padding-bottom: 50px;}
-.pb-25 {padding-bottom: 25px;}
-.pb-10 {padding-bottom: 10px;}
+.pr-3 {
+  padding-right: 3px;
+}
 
-.full-width{width: 100%;}
+.pb-50 {
+  padding-bottom: 50px;
+}
+.pb-25 {
+  padding-bottom: 25px;
+}
+.pb-10 {
+  padding-bottom: 10px;
+}
 
-.txt-r {text-align: right }
-.txt-l {text-align: left }
+.full-width {
+  width: 100%;
+}
 
-input[type='text']:not(.mat-input-element),
-input[type='number']:not(.mat-input-element),
-input[type='email']:not(.mat-input-element),
-input[type='password']:not(.mat-input-element),
+.txt-r {
+  text-align: right;
+}
+.txt-l {
+  text-align: left;
+}
+
+input[type="text"]:not(.mat-input-element),
+input[type="number"]:not(.mat-input-element),
+input[type="email"]:not(.mat-input-element),
+input[type="password"]:not(.mat-input-element),
 textarea {
   width: 100%;
   height: 36px;
@@ -60,39 +89,41 @@
   background: rgba(247, 247, 247, 0.87);
   transition: border 0.1s ease-out;
   outline: none;
-  font: 300 16px/26px 'Open Sans', sans-serif;
+  font: 300 16px/26px "Open Sans", sans-serif;
 }
 
-input[type='text']:not(.mat-input-element):focus,
-input[type='number']:not(.mat-input-element):focus,
-input[type='email']:not(.mat-input-element):focus,
-input[type='password']:not(.mat-input-element):focus,
+input[type="text"]:not(.mat-input-element):focus,
+input[type="number"]:not(.mat-input-element):focus,
+input[type="email"]:not(.mat-input-element):focus,
+input[type="password"]:not(.mat-input-element):focus,
 textarea:focus {
   border: none;
   background: #fff;
   transition: border 0.2s ease-in;
-  box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
-}
-input[type='text']:not(.mat-input-element):disabled {
-  opacity: .4;
-  cursor: not-allowed;
-  color: rgba(0,0,0,.38);
-  background-color: rgba(0,0,0,.12);
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }
 
-input[type='text']:not(.mat-input-element)::placeholder,
-input[type='number']:not(.mat-input-element)::placeholder,
-input[type='email']:not(.mat-input-element)::placeholder,
-input[type='password']:not(.mat-input-element)::placeholder,
+input[type="text"]:not(.mat-input-element):disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  color: rgba(0, 0, 0, 0.38);
+  background-color: rgba(0, 0, 0, 0.12);
+}
+
+input[type="text"]:not(.mat-input-element)::placeholder,
+input[type="number"]:not(.mat-input-element)::placeholder,
+input[type="email"]:not(.mat-input-element)::placeholder,
+input[type="password"]:not(.mat-input-element)::placeholder,
 textarea::placeholder {
   color: #718ba6;
 }
 
-.control-group, .row-wrap {
+.control-group,
+.row-wrap {
+  position: relative;
   display: flex;
   flex-flow: row wrap;
   padding-bottom: 20px;
-  position: relative;
 }
 
 .row-wrap {
@@ -104,13 +135,13 @@
 }
 
 .control-group .label {
+  align-self: center;
   width: 35%;
   color: #718ba6;
   font-size: 15px;
   font-weight: 600;
-  align-self: center;
   text-align: left;
-  font-family: 'Open Sans', sans-serif;
+  font-family: "Open Sans", sans-serif;
 }
 
 .control-group .control {
@@ -118,14 +149,28 @@
 }
 
 button {
-  font-family: 'Open Sans', sans-serif;
+  font-family: "Open Sans", sans-serif;
 }
 
-.info_color {color: #5bc0de}
-.primary_color {color: #337ab7}
-.success_color {color: #5cb85c}
-.warning_color {color: #f0ad4e}
-.danger_color {color: #d9534f}
+.info_color {
+  color: #5bc0de;
+}
+
+.primary_color {
+  color: #337ab7;
+}
+
+.success_color {
+  color: #5cb85c;
+}
+
+.warning_color {
+  color: #f0ad4e;
+}
+
+.danger_color {
+  color: #d9534f;
+}
 
 .list-header {
   width: 100%;
@@ -144,10 +189,11 @@
       }
     }
   }
+
   .capt {
+    margin-right: 0px;
     font-size: 13px;
     color: #35afd5;
-    margin-right: 0px;
     font-style: normal;
   }
 }
@@ -156,14 +202,16 @@
   color: #35afd5;
   overflow: hidden;
   cursor: pointer;
-  transition: all .45s ease-in-out;
+  transition: all 0.45s ease-in-out;
+
   &:hover {
     color: #3392b0;
   }
+
   .material-icons {
+    padding-right: 5px;
     font-size: 20px;
     vertical-align: top;
-    padding-right: 5px;
     overflow: hidden;
   }
 }
@@ -177,21 +225,21 @@
   line-height: 26px;
 }
 
-input[type=file],
-input[type=file]::-webkit-file-upload-button {
-    cursor: pointer;
+input[type="file"],
+input[type="file"]::-webkit-file-upload-button {
+  cursor: pointer;
 }
 
-.refresh-icon{
+.refresh-icon {
   color: #35afd5;
 }
 
 .buttons {
   position: absolute;
+  bottom: 9px;
+  z-index: 102;
   display: flex;
   justify-content: space-around;
-  z-index: 102;
-  bottom: 9px;
   width: 100%;
 
   .mat-mini-fab {
@@ -199,26 +247,23 @@
     width: 25px;
 
     .mat-button-wrapper {
-      padding: 0;
-      line-height: unset;
       display: flex;
       align-items: center;
       justify-content: center;
-      padding-top: 2px;
+      padding: 2px 0 0;
+      line-height: unset;
     }
   }
 }
 
-.shadow-none{
+.shadow-none {
   box-shadow: none !important;
 }
 
-.right-sticky{
+.right-sticky {
   right: -15px !important;
 }
 
-.cursor-pointer{
+.cursor-pointer {
   cursor: pointer;
 }
-
-
diff --git a/services/self-service/src/main/resources/webapp/src/assets/styles/_reset.scss b/services/self-service/src/main/resources/webapp/src/assets/styles/_reset.scss
index 6e90bae..3386a8d 100644
--- a/services/self-service/src/main/resources/webapp/src/assets/styles/_reset.scss
+++ b/services/self-service/src/main/resources/webapp/src/assets/styles/_reset.scss
@@ -48,7 +48,7 @@
 }
 
 a {
-  text-decoration: none
+  text-decoration: none;
 }
 
 table {
@@ -56,23 +56,22 @@
   border-spacing: 0;
 }
 
-[hidden],
-.hidden {
+[hidden], .hidden {
   display: none !important;
 }
 
 ::-moz-selection,
 ::selection {
   color: #fff;
-  background: #3399ff
+  background: #3399ff;
 }
 
 :focus {
-  outline: none
+  outline: none;
 }
 
 ::-moz-focus-inner {
-  border: 0
+  border: 0;
 }
 
 ::-webkit-file-upload-button {
@@ -98,7 +97,6 @@
 }
 
 input {
-
   &::-ms-clear,
   &::-ms-reveal {
     display: none;
diff --git a/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss b/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss
index 4a37d89..becd4a2 100644
--- a/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss
+++ b/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss
@@ -26,10 +26,11 @@
     font-style: normal;
     font-weight: 600;
     font-size: 15px;
-    font-family: 'Open Sans', sans-serif;
+    font-family: "Open Sans", sans-serif;
     color: #577289;
-    &[disabled]{
-      box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
+
+    &[disabled] {
+      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
     }
 
     i {
@@ -43,8 +44,9 @@
         margin: 0 5px 0 0;
         font-size: 20px;
         vertical-align: middle;
-        &.arrow-icon{
-          vertical-align: -5px
+
+        &.arrow-icon {
+          vertical-align: -5px;
         }
       }
     }
@@ -56,23 +58,23 @@
     &.action {
       width: 140px;
 
-      &.install-btn{
+      &.install-btn {
         margin-left: 0;
       }
 
-      &.close-btn{
+      &.close-btn {
         margin-right: 25px;
       }
     }
 
     &.butt-success {
-      background-color: #49af38;
       margin-left: 25px;
+      background-color: #49af38;
       color: #fff;
 
       &.mini {
-        margin-left: 5px;
         width: 80px;
+        margin-left: 5px;
       }
     }
 
@@ -90,8 +92,8 @@
     }
 
     &.butt-generate {
-      color: #35afd5;
       width: 170px;
+      color: #35afd5;
 
       &:active {
         box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
@@ -100,15 +102,13 @@
   }
 }
 
-
-
 .selector-wrapper {
   display: flex;
   align-self: center;
   width: 100%;
   height: 36px;
   padding-left: 10px;
-  font-family: 'Open Sans', sans-serif;
+  font-family: "Open Sans", sans-serif;
   font-size: 15px;
   font-weight: 300;
   box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
@@ -125,50 +125,49 @@
     }
 
     .caret {
+      position: absolute;
+      right: 0;
+      top: 0px;
       width: 40px;
       height: 40px;
       color: #4ab8dc;
       border: none;
       border-left: 1px solid #ececec;
       background-color: #fff;
-      position: absolute;
-      right: 0;
-      top: 0px;
       cursor: pointer;
 
       &.not-allowed {
         background-color: #dcdcdc;
         .mat-select-placeholder {
-         cursor: not-allowed;
+          cursor: not-allowed;
         }
       }
     }
   }
 }
 
-
-.audit{
+.audit {
   .select-wrapper {
-    .mat-reset{
-      .selector-wrapper{
+    .mat-reset {
+      .selector-wrapper {
         height: 25px;
 
-      .mat-form-field .mat-form-field-wrapper .mat-form-field-infix{
-        padding-top: 6px;
-        font-size: 13px;
-      }
+        .mat-form-field .mat-form-field-wrapper .mat-form-field-infix {
+          padding-top: 6px;
+          font-size: 13px;
+        }
         .caret {
           width: 25px;
           height: 31px;
-
         }
       }
     }
   }
 }
+
 .multiple-select {
-  border-bottom: 1px solid #dedbdb;
   padding: 0;
+  border-bottom: 1px solid #dedbdb;
 
   a {
     display: inline-block;
@@ -210,10 +209,10 @@
 }
 
 .mat-option {
-  font-family: 'Open Sans', sans-serif;
+  font-family: "Open Sans", sans-serif;
 
   .mat-option-text {
-    color: #607D8B;
+    color: #607d8b;
     font-size: 15px;
   }
 
@@ -250,17 +249,17 @@
   font-size: 14px;
 }
 
-.mat-select-disabled{
+.mat-select-disabled {
   .mat-select-placeholder {
     cursor: not-allowed;
   }
-  .mat-select-value{
+  .mat-select-value {
     cursor: not-allowed;
   }
 }
 
 .mat-select-disabled + .caret,
-.mat-tab-disabled{
+.mat-tab-disabled {
   cursor: not-allowed !important;
 }
 
@@ -274,7 +273,7 @@
 
 /* grid filtering */
 .filter-row .dropdown-multiselect button,
-.filter-row input[type='text'] {
+.filter-row input[type="text"] {
   font-size: 14px;
   height: 34px;
 }
@@ -294,7 +293,7 @@
   font-weight: 100;
   font-size: 16px;
   line-height: 24px;
-  font-family: 'Open Sans', sans-serif;
+  font-family: "Open Sans", sans-serif;
 }
 
 .backup-dialog .mat-slide-toggle,
@@ -351,32 +350,33 @@
 .project-form,
 .create-environment,
 .selection,
-.manage-roles{
-    .mat-select-value{
-      overflow: visible;
-    }
-    .mat-form-field-label {
-      line-height: 21px !important;
-      font-size: 15px !important;
+.manage-roles {
+  .mat-select-value {
+    overflow: visible;
+  }
+  .mat-form-field-label {
+    line-height: 21px !important;
+    font-size: 15px !important;
 
-      &:not(.mat-form-field-empty) {
-        color: transparent !important;
-      }
+    &:not(.mat-form-field-empty) {
+      color: transparent !important;
     }
+  }
 }
 
 .mat-chip-list {
   pointer-events: none;
-  .mat-chip{
+  .mat-chip {
     overflow: hidden;
     pointer-events: all;
-    &.mat-standard-chip.mat-chip-disabled{
+    &.mat-standard-chip.mat-chip-disabled {
       opacity: 1;
     }
   }
 }
 
-.selection, .project-form {
+.selection,
+.project-form {
   .mat-reset .mat-form-field .mat-form-field-wrapper .mat-form-field-label {
     transform: none;
   }
@@ -385,7 +385,7 @@
 .manage-roles,
 .project-form,
 .selection,
-.audit{
+.audit {
   .mat-form-field {
     width: 100%;
   }
@@ -410,14 +410,13 @@
       overflow: hidden;
 
       .mat-form-field-wrapper {
-
         .mat-form-field-infix {
           width: 275px;
+          padding-top: 10px;
           border: 0;
-          font-family: 'Open Sans', sans-serif;
+          font-family: "Open Sans", sans-serif;
           font-size: 15px;
           font-weight: 300;
-          padding-top: 10px;
 
           .mat-select-value {
             max-width: inherit;
@@ -481,18 +480,17 @@
   }
 
   .mat-chip {
+    max-width: 385px !important;
     background-color: rgba(47, 174, 215, 0.2) !important;
     color: #687e96;
-    max-width: 385px !important;
   }
 
   .roles {
-
     .selector-wrapper,
     .selector-wrapper-edit {
       .mat-select-trigger {
-        width: 100%;
         display: flex;
+        width: 100%;
         max-width: 500px;
       }
     }
@@ -501,7 +499,7 @@
 
 .audit {
   .mat-select {
-    font-family: 'Open Sans', sans-serif;
+    font-family: "Open Sans", sans-serif;
 
     .mat-select-value-text span {
       color: unset !important;
@@ -510,100 +508,102 @@
 }
 
 .empty-checkbox {
+  position: relative;
   min-width: 16px;
   width: 16px;
   height: 16px;
+  margin-top: 2px;
   border-radius: 2px;
   border: 2px solid lightgrey;
-  margin-top: 2px;
-  position: relative;
   cursor: pointer;
 
   &.checked {
     border-color: #35afd5;
     background-color: #35afd5;
   }
+
   .checked-checkbox {
+    position: absolute;
     top: 0;
     left: 4px;
     width: 5px;
     height: 10px;
     border-bottom: 2px solid white;
     border-right: 2px solid white;
-    position: absolute;
     transform: rotate(45deg);
   }
 
   .line-checkbox {
+    position: absolute;
     top: 0;
     left: 2px;
     width: 8px;
     height: 7px;
     border-bottom: 2px solid white;
-    position: absolute;
   }
 }
-.none-select{
+.none-select {
   user-select: none;
 }
 
-.action-select-wrapper{
+.action-select-wrapper {
   position: relative;
   display: block !important;
 
-  .action-button-wrapper{
+  .action-button-wrapper {
     position: relative;
     width: 160px;
   }
 
-  .mat-raised-button.butt{
+  .mat-raised-button.butt {
     margin-bottom: 0;
     padding-left: 45px;
     text-align: left;
 
-
-    &.actions-btn{
+    &.actions-btn {
       padding-right: 38px;
       margin: 0;
 
-      .material-icons{
-        transition: ease-in-out 1s;
-        font-size: 25px;
+      .material-icons {
         position: absolute;
         top: 7px;
         right: 30px;
+        transition: ease-in-out 1s;
+        font-size: 25px;
       }
     }
   }
 
-  .action-menu{
+  .action-menu {
     position: absolute;
-    text-align: center;
     display: block;
+    text-align: center;
     background-color: #fff;
 
-    &-item.mat-raised-button.butt{
+    &-item.mat-raised-button.butt {
+      position: relative;
       z-index: 101;
-      margin: 0;
-      box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 0px 0px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
       width: 160px;
       padding: 0 20px;
+      margin: 0;
+      box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 0px 0px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
       border-radius: 0;
       font-style: normal;
       font-weight: 600;
       font-size: 15px;
-      font-family: 'Open Sans', sans-serif;
+      font-family: "Open Sans", sans-serif;
       color: #577289;
-      position: relative;
       overflow: hidden;
       line-height: 36px;
-      &.action-menu-item{
-        &:hover{
-          color:  #00bcd4;
+
+      &.action-menu-item {
+        &:hover {
+          color: #00bcd4;
           background-color: #fafafa;
         }
-        &.disabled{
-          &:hover{
+
+        &.disabled {
+          &:hover {
             color: #577289;
           }
         }
@@ -619,7 +619,7 @@
     }
 
     .mat-step-label {
-      font-family: 'Open Sans', sans-serif;
+      font-family: "Open Sans", sans-serif;
       font-size: 15px;
       font-weight: 300;
     }
@@ -655,8 +655,8 @@
     }
 
     &.roles {
-      height: 190px;
       flex-direction: column;
+      height: 190px;
       text-align: center;
 
       .inner-step {
@@ -671,8 +671,8 @@
 }
 
 .multiple-select {
-  border-bottom: 1px solid #dedbdb;
   padding: 0 !important;
+  border-bottom: 1px solid #dedbdb;
 
   a {
     display: inline-block;
@@ -712,8 +712,8 @@
   &.reporting {
     .dropdown-multiselect {
       button {
-        font-size: 13px;
         padding-left: 10px;
+        font-size: 13px;
       }
     }
   }
@@ -739,20 +739,20 @@
     padding: 0;
 
     .content {
-      color: #718ba6;
       padding: 20px 40px;
+      margin: 0;
+      color: #718ba6;
       font-size: 14px;
       font-weight: 400;
       text-align: center;
-      margin: 0;
     }
 
     .dialog-header {
       position: relative;
       top: 0;
+      height: 54px;
       padding-left: 30px;
       background: #f6fafe;
-      height: 54px;
       line-height: 54px;
     }
 
@@ -795,17 +795,17 @@
   font-family: "Open Sans", sans-serif;
   font-weight: 400;
 
-  .mat-cell{
+  .mat-cell {
     font-size: 13px;
   }
   .header-row,
-  .mat-header-row{
+  .mat-header-row {
     .mat-header-cell {
-      font-family: 'Open Sans', sans-serif;
+      font-family: "Open Sans", sans-serif;
       font-weight: 600;
       font-size: 13px;
-      .label{
-        font-family: 'Open Sans', sans-serif;
+      .label {
+        font-family: "Open Sans", sans-serif;
         font-weight: 600;
         font-size: 13px;
       }
@@ -814,7 +814,7 @@
     .mat-cell {
       word-break: break-all;
       vertical-align: top;
-      padding: 15px 5px 10px 5px;
+      padding: 15px 5px 10px;
       font-size: 13px;
       font-family: "Open Sans", sans-serif;
 
@@ -843,30 +843,33 @@
 
 mat-progress-bar {
   .mat-progress-bar-fill::after {
-    background-color: #00BCD4;
+    background-color: #00bcd4;
   }
 
   .mat-progress-bar-buffer {
     background-color: #baf0f7;
   }
 }
-.manage-roles{
-  .mat-horizontal-content-container{
+.manage-roles {
+  .mat-horizontal-content-container {
     overflow: visible !important;
   }
 }
 
-.filter-row-item, .label-header{
+.filter-row-item,
+.label-header {
   box-shadow: inset 0 -1px 0 lightgrey;
   border-bottom: none !important;
-  multi-select-dropdown, .input-wrapper{
+
+  multi-select-dropdown,
+  .input-wrapper {
     position: absolute;
     top: 10px;
     left: 5px;
     right: 5px;
   }
 
-  .input-wrapper{
+  .input-wrapper {
     left: 10px;
     right: 4px;
   }
@@ -883,27 +886,24 @@
   fill: #36afd5;
 }
 
-#range-picker .ng-daterangepicker,
- {
+#range-picker .ng-daterangepicker {
   border: none;
   border-radius: 0;
   box-shadow: none;
 }
 
 #range-picker .ng-daterangepicker .calendar {
+  top: 58px;
   z-index: 102;
   border: 1px solid rgba(234, 234, 234, 0.64);
   border-radius: 0;
-  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
-  0 2px 2px 0 rgba(0, 0, 0, 0.14),
-  0 1px 5px 0 rgba(0, 0, 0, 0.12);
-  top: 58px;
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
 
   &.is-to:after {
     left: 250px;
   }
 
-  &.is-opened{
+  &.is-opened {
     display: flex;
   }
 }
@@ -922,8 +922,8 @@
 
 #range-picker .ng-daterangepicker .calendar .side-container .side-button.is-active,
 #range-picker .ng-daterangepicker .input-section .label-txt {
-  color: #35afd5;
   display: unset;
+  color: #35afd5;
   font-size: 13px;
 }
 
@@ -937,7 +937,6 @@
 #range-picker .ng-daterangepicker .calendar .calendar-container .days .day-num:hover {
   background: #35afd5;
   background-clip: padding-box;
-
 }
 
 #range-picker .ng-daterangepicker .calendar .calendar-container .day-names,
@@ -951,7 +950,7 @@
 }
 
 #range-picker .ng-daterangepicker .calendar .calendar-container .day.is-within-range {
-  background: #e9f8fc
+  background: #e9f8fc;
 }
 
 #range-picker .ng-daterangepicker .input-section .cal-icon svg path {
@@ -959,9 +958,9 @@
 }
 
 #range-picker .ng-daterangepicker .input-section .value-txt {
-  color: #718ba6;
   display: unset;
   padding-left: 5px;
+  color: #718ba6;
 }
 
 #range-picker .ng-daterangepicker .input-section .value-txt.untouched,
@@ -978,9 +977,9 @@
 //}
 
 .filter-row .actions {
-  text-align: right;
   display: flex;
   justify-content: flex-end;
+  text-align: right;
 }
 
 .filter-row .actions button {
@@ -1003,49 +1002,50 @@
 }
 
 #range-picker .ng-daterangepicker {
-  height: 37px;
-  width: 360px;
   display: flex;
   justify-content: space-between;
+  height: 37px;
+  width: 360px;
 
-
-  .d-none{
+  .d-none {
     display: none;
   }
 
   .input-section {
     height: 37px;
-    padding-right: 30px;
     width: 175px;
-    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
+    padding-right: 30px;
+    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
   }
 }
 
-.show-all-btn.mat-raised-button .mat-button-wrapper > *{
+.show-all-btn.mat-raised-button .mat-button-wrapper > * {
   vertical-align: baseline;
 }
 
 .resource-btns {
-  .mat-raised-button{
+  .mat-raised-button {
     line-height: 38px;
   }
 
-  .mat-select-value{
+  .mat-select-value {
     margin-top: 1px;
   }
 }
 
-.alert .highlight .strong{ color: #35afd5}
+.alert .highlight .strong {
+  color: #35afd5;
+}
 
 .audit-table-wrapper,
-.billing-page-wrapper{
-  tfoot{
+.billing-page-wrapper {
+  tfoot {
     position: sticky;
     z-index: 102;
     bottom: 0;
   }
 
-  .dropdown-multiselect{
+  .dropdown-multiselect {
     &.resources {
       .list-menu {
         .list-item {
@@ -1055,20 +1055,23 @@
     }
   }
 }
-.configuration-wrapper{
-  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
-  .mat-tab-header{
+.configuration-wrapper {
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 
+              0px 6px 10px 0px rgba(0, 0, 0, 0.14), 
+              0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+
+  .mat-tab-header {
     margin: 0 30px;
   }
-  .mat-tab-label{
-    .mat-tab-label-content{
+  .mat-tab-label {
+    .mat-tab-label-content {
       font-family: "Open Sans", sans-serif;
       font-weight: 600;
       font-size: 13px;
     }
   }
 
-  .ace-monokai{
+  .ace-monokai {
     height: calc(100%);
   }
 
@@ -1076,13 +1079,7 @@
     width: unset !important;
   }
 
-  .ace_scrollbar{
+  .ace_scrollbar {
     scrollbar-width: thin;
   }
 }
-
-
-
-
-
-
diff --git a/services/self-service/src/main/resources/webapp/src/styles.scss b/services/self-service/src/main/resources/webapp/src/styles.scss
index efc6b3a..00a27bb 100644
--- a/services/self-service/src/main/resources/webapp/src/styles.scss
+++ b/services/self-service/src/main/resources/webapp/src/styles.scss
@@ -19,20 +19,20 @@
 
 // @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
 
-@import './assets/fonts/Material_Icons/material-icons.css';
-@import './assets/fonts/Open_Sans/open-sans.css';
+@import "./assets/fonts/Material_Icons/material-icons.css";
+@import "./assets/fonts/Open_Sans/open-sans.css";
 
-@import '_reset.scss';
-@import '_general.scss';
-@import '_theme.scss';
-@import '_dialogs.scss';
+@import "_reset.scss";
+@import "_general.scss";
+@import "_theme.scss";
+@import "_dialogs.scss";
 
 .sans {
-  font-family: 'Open Sans', sans-serif !important;
+  font-family: "Open Sans", sans-serif !important;
 }
 
 .mat-tab-label {
-  font-family: 'Open Sans', sans-serif !important;
+  font-family: "Open Sans", sans-serif !important;
   color: #455c74;
 }
 
@@ -61,13 +61,14 @@
   height: calc(100% - 48px);
 }
 
-
 .mat-chip-list-wrap {
   max-height: 120px;
-  overflow: auto;
   margin-right: 5px;
-  .mat-chip-list-wrapper{
+  overflow: auto;
+
+  .mat-chip-list-wrapper {
     margin: 0;
+
     .mat-chip {
       font-size: 13px;
     }
@@ -75,10 +76,10 @@
 }
 
 mat-chip.mat-chip {
+  padding: 8px 18px;
   outline: none;
   color: #758ea8;
   font-size: 14px;
-  padding: 8px 18px;
 }
 
 mat-chip.mat-chip a {
@@ -97,17 +98,17 @@
 }
 
 .loader {
+  position: relative;
+  top: 28px;
+  width: 18px;
+  height: 18px;
+  margin-right: 15px;
+  float: right;
   border: 3px solid #f3f3f3;
   border-radius: 50%;
   border-top: 3px solid #35afd5;
-  width: 18px;
-  height: 18px;
   -webkit-animation: spin 2s linear infinite;
   animation: spin 2s linear infinite;
-  position: relative;
-  top: 28px;
-  margin-right: 15px;
-  float: right;
 }
 
 .rotate {
@@ -156,7 +157,7 @@
 .deleted,
 .invalid_version,
 .invalid_name,
-.installation_error{
+.installation_error {
   color: #f1696e;
 }
 
@@ -172,13 +173,13 @@
   pointer-events: none;
 }
 
-.cursor-not-allow{
+.cursor-not-allow {
   cursor: not-allowed !important;
 }
 
 .not-active {
   cursor: not-allowed !important;
-  opacity: .6;
+  opacity: 0.6;
 }
 
 .message {
@@ -187,22 +188,23 @@
 }
 
 .info {
+  position: relative;
   font-size: 15px;
   font-weight: 300;
   color: #35afd5;
-  position: relative;
-  .buttons{
+
+  .buttons {
     position: absolute;
   }
 }
 
 .base-retreat {
+  display: inline-block;
   height: 100%;
   max-height: 100%;
   width: 100%;
-  box-sizing: border-box;
   padding: 12px 15px;
-  display: inline-block;
+  box-sizing: border-box;
 }
 
 .sub-nav {
@@ -246,21 +248,21 @@
 }
 
 .tooltip-wrap .tooltip {
-  background: rgba(97, 97, 97, 0.9);
-  bottom: 100%;
-  color: #f3f3f3;
-  display: block;
+  position: absolute;
   left: -25px;
+  bottom: 100%;
+  display: block;
+  width: 100%;
   margin-bottom: 5px;
-  opacity: 0;
   padding: 5px;
+  background: rgba(97, 97, 97, 0.9);
+  color: #f3f3f3;
+  opacity: 0;
   white-space: pre-wrap;
   word-wrap: break-word;
   border-radius: 2px;
   font-size: 10px;
   pointer-events: none;
-  position: absolute;
-  width: 100%;
   -webkit-transform: translateY(10px);
   -moz-transform: translateY(10px);
   -ms-transform: translateY(10px);
@@ -289,8 +291,7 @@
 }
 
 /* IE can just show/hide with no transition */
-@media all and (-ms-high-contrast: none),
-(-ms-high-contrast: active) {
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .tooltip-wrap .tooltip {
     display: none;
   }
@@ -301,13 +302,13 @@
 }
 
 /* Turn off number input spinners */
-input[type='number']::-webkit-inner-spin-button,
-input[type='number']::-webkit-outer-spin-button {
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
 
-input[type='number'] {
+input[type="number"] {
   -moz-appearance: textfield;
 }
 
@@ -320,19 +321,19 @@
   text-align: right;
 }
 
-.pl-5{
+.pl-5 {
   padding-left: 5px;
 }
 
-.pl-10{
+.pl-10 {
   padding-left: 10px !important;
 }
 
-.pl-20{
+.pl-20 {
   padding-left: 20px;
 }
 
-.pr-20{
+.pr-20 {
   padding-right: 20px;
 }
 
@@ -385,7 +386,7 @@
 }
 
 .ani {
-  transition: all .35s ease-in-out;
+  transition: all 0.35s ease-in-out;
 }
 
 .empty-box {
@@ -399,7 +400,9 @@
     text-align: center;
   }
 }
-#scrolling, .scrolling, ace_scrollbar{
+#scrolling,
+.scrolling,
+ace_scrollbar {
   scrollbar-width: thin;
 }
 
@@ -456,8 +459,8 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
-  &::after{
-    content: '';
+  &::after {
+    content: "";
     display: block;
   }
 }
@@ -474,27 +477,27 @@
 
 .overlay-container {
   #toast-container {
-    >div {
-      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
+    > div {
+      margin: 5px 0 15px;
+      padding: 12px 20px;
+      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
       border-radius: 2px;
       background-color: #fff;
-      padding: 12px 20px;
       overflow: inherit;
-      margin: 5px 0 15px;
       font-size: 14px;
 
       &::before {
         position: absolute;
         left: -15px;
         top: -15px;
-        font-family: "Material Icons";
-        background-color: #fff;
         width: 30px;
         height: 30px;
         padding: 7px;
+        font-family: "Material Icons";
+        background-color: #fff;
         box-sizing: border-box;
         border-radius: 50%;
-        box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
+        box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
       }
 
       &.toast-success {
@@ -537,22 +540,23 @@
 }
 
 .dialog-max-width {
-  margin: 0 auto;
   max-width: 350px;
+  margin: 0 auto;
   overflow: hidden;
   text-overflow: ellipsis;
-  &::after{
-    content: '';
+  &::after {
+    content: "";
     display: block;
   }
 }
 
 .group-updated-tooltip {
-  white-space: pre-line;
   max-width: fit-content !important;
+  white-space: pre-line;
 }
 
-.mat-tooltip-for-users, .mat-tooltip-description {
+.mat-tooltip-for-users,
+.mat-tooltip-description {
   overflow-wrap: break-word;
 }