diff --git a/console/src/app/modules/nav-toggle/nav-toggle.component.html b/console/src/app/modules/nav-toggle/nav-toggle.component.html
new file mode 100644
index 0000000000..35ca967148
--- /dev/null
+++ b/console/src/app/modules/nav-toggle/nav-toggle.component.html
@@ -0,0 +1,6 @@
+<button class="nav-toggle" [ngClass]="{active}" (click)="clicked.emit()">
+  <div class="c_label">
+    <span> {{ label }} </span>
+    <small *ngIf="count" class="count">({{ count }})</small>
+  </div>
+</button>
diff --git a/console/src/app/modules/nav-toggle/nav-toggle.component.scss b/console/src/app/modules/nav-toggle/nav-toggle.component.scss
new file mode 100644
index 0000000000..0e4a1a7227
--- /dev/null
+++ b/console/src/app/modules/nav-toggle/nav-toggle.component.scss
@@ -0,0 +1,71 @@
+@use '@angular/material' as mat;
+
+@mixin nav-toggle-theme($theme) {
+  $primary: map-get($theme, primary);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $accent: map-get($theme, accent);
+  $primary-color: mat.get-color-from-palette($primary, 500);
+
+  $warn-color: mat.get-color-from-palette($warn, 500);
+  $accent-color: mat.get-color-from-palette($accent, 500);
+  $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
+  $back: map-get($background, background);
+
+  .nav-toggle {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    line-height: 14px;
+    padding: 0.4rem 12px;
+    color: mat.get-color-from-palette($foreground, text) !important;
+    transition: all 0.2s ease;
+    text-decoration: none;
+    border-radius: 50vw;
+    border: none;
+    font-weight: 400;
+    margin: 0.25rem 2px;
+    white-space: nowrap;
+    position: relative;
+    background: none;
+    cursor: pointer;
+    font-family: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
+
+    .c_label {
+      display: flex;
+      align-items: center;
+      text-align: center;
+
+      .count {
+        display: none;
+        margin-left: 6px;
+      }
+    }
+
+    &.external-link {
+      padding-right: 2rem;
+
+      i {
+        position: absolute;
+        right: 8px;
+        font-size: 1.2rem;
+      }
+    }
+
+    &:hover {
+      background: if($is-dark-theme, #ffffff40, #00000010);
+    }
+
+    &.active {
+      background-color: $primary-color;
+      color: mat.get-color-from-palette($foreground, toolbar-items) !important;
+
+      .c_label {
+        .count {
+          display: inline-block;
+        }
+      }
+    }
+  }
+}
diff --git a/console/src/app/modules/nav-toggle/nav-toggle.component.spec.ts b/console/src/app/modules/nav-toggle/nav-toggle.component.spec.ts
new file mode 100644
index 0000000000..63158cf042
--- /dev/null
+++ b/console/src/app/modules/nav-toggle/nav-toggle.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavToggleComponent } from './nav-toggle.component';
+
+describe('NavToggleComponent', () => {
+  let component: NavToggleComponent;
+  let fixture: ComponentFixture<NavToggleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ NavToggleComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(NavToggleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/console/src/app/modules/nav-toggle/nav-toggle.component.ts b/console/src/app/modules/nav-toggle/nav-toggle.component.ts
new file mode 100644
index 0000000000..97cca6bfab
--- /dev/null
+++ b/console/src/app/modules/nav-toggle/nav-toggle.component.ts
@@ -0,0 +1,14 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'cnsl-nav-toggle',
+  templateUrl: './nav-toggle.component.html',
+  styleUrls: ['./nav-toggle.component.scss'],
+})
+export class NavToggleComponent {
+  @Input() public label: string = '';
+  @Input() public count: number | null = 0;
+  @Input() public active: boolean = false;
+  @Output() public clicked: EventEmitter<void> = new EventEmitter<void>();
+  constructor() {}
+}
diff --git a/console/src/app/modules/nav-toggle/nav-toggle.module.ts b/console/src/app/modules/nav-toggle/nav-toggle.module.ts
new file mode 100644
index 0000000000..ca348c0d1f
--- /dev/null
+++ b/console/src/app/modules/nav-toggle/nav-toggle.module.ts
@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { NavToggleComponent } from './nav-toggle.component';
+
+@NgModule({
+  declarations: [NavToggleComponent],
+  imports: [CommonModule, RouterModule],
+  exports: [NavToggleComponent],
+})
+export class NavToggleModule {}
diff --git a/console/src/app/modules/refresh-table/refresh-table.component.scss b/console/src/app/modules/refresh-table/refresh-table.component.scss
index 5f3ab80e47..dbed9fc327 100644
--- a/console/src/app/modules/refresh-table/refresh-table.component.scss
+++ b/console/src/app/modules/refresh-table/refresh-table.component.scss
@@ -7,9 +7,10 @@
     display: flex;
     align-items: center;
     padding-bottom: 0.5rem;
+    box-sizing: border-box;
 
     &.border-bottom {
-      padding-bottom: 0.5rem;
+      padding-bottom: 1rem;
       margin-bottom: 1rem;
       border-bottom: 1px solid map-get($foreground, divider);
     }
diff --git a/console/src/app/pages/projects/apps/redirect-uris/redirect-uris.component.scss b/console/src/app/pages/projects/apps/redirect-uris/redirect-uris.component.scss
index 0768e4a319..550950334b 100644
--- a/console/src/app/pages/projects/apps/redirect-uris/redirect-uris.component.scss
+++ b/console/src/app/pages/projects/apps/redirect-uris/redirect-uris.component.scss
@@ -80,7 +80,7 @@
   min-width: 320px;
 
   .formfield {
-    flex: 1;
+    width: 500px;
   }
 
   button {
diff --git a/console/src/app/pages/projects/projects.component.html b/console/src/app/pages/projects/projects.component.html
index 0c596c3c5c..9d62108cb3 100644
--- a/console/src/app/pages/projects/projects.component.html
+++ b/console/src/app/pages/projects/projects.component.html
@@ -9,22 +9,21 @@
     <p class="sub cnsl-secondary-text max-width-description">{{ 'PROJECT.PAGES.LISTDESCRIPTION' | translate }}</p>
 
     <div class="projects-controls">
-      <div class="project-type-actions">
-        <button
-          class="type-button"
-          [ngClass]="{ active: (projectType$ | async) === ProjectType.PROJECTTYPE_OWNED }"
-          (click)="setType(ProjectType.PROJECTTYPE_OWNED)"
-        >
-          {{ 'PROJECT.PAGES.TYPE.OWNED' | translate }} ({{ (mgmtService?.ownedProjectsCount | async) ?? 0 }})
-        </button>
-        <button
-          class="type-button"
-          [ngClass]="{ active: (projectType$ | async) === ProjectType.PROJECTTYPE_GRANTED }"
-          (click)="setType(ProjectType.PROJECTTYPE_GRANTED)"
-        >
-          {{ 'PROJECT.PAGES.TYPE.GRANTED' | translate }} ({{ (mgmtService?.grantedProjectsCount | async) ?? 0 }})
-        </button>
+      <div class="project-toggle-group">
+        <cnsl-nav-toggle
+          label="{{ 'PROJECT.PAGES.TYPE.OWNED' | translate }}"
+          [count]="mgmtService.ownedProjectsCount | async"
+          (clicked)="setType(ProjectType.PROJECTTYPE_OWNED)"
+          [active]="(projectType$ | async) === ProjectType.PROJECTTYPE_OWNED"
+        ></cnsl-nav-toggle>
+        <cnsl-nav-toggle
+          label="{{ 'PROJECT.PAGES.TYPE.GRANTED' | translate }}"
+          [count]="mgmtService.grantedProjectsCount | async"
+          (clicked)="setType(ProjectType.PROJECTTYPE_GRANTED)"
+          [active]="(projectType$ | async) === ProjectType.PROJECTTYPE_GRANTED"
+        ></cnsl-nav-toggle>
       </div>
+
       <span class="fill-space"></span>
       <button class="grid-btn" (click)="grid = !grid" mat-icon-button [attr.data-e2e]="'toggle-grid'">
         <i *ngIf="grid" class="show list view las la-th-list"></i>
diff --git a/console/src/app/pages/projects/projects.component.scss b/console/src/app/pages/projects/projects.component.scss
index 606aaad81d..8500249bfd 100644
--- a/console/src/app/pages/projects/projects.component.scss
+++ b/console/src/app/pages/projects/projects.component.scss
@@ -23,34 +23,33 @@
 
   .projects-controls {
     display: flex;
-    padding-bottom: 0.5rem;
+    align-items: center;
+    padding-bottom: 1rem;
     border-bottom: 1px solid map-get($foreground, dividers);
 
-    .project-type-actions {
+    .project-toggle-group {
       display: flex;
-      align-items: center;
 
-      .type-button {
-        border: none;
-        background: none;
-        text-align: left;
-        padding: 0.75rem 0;
-        opacity: 0.6;
-        font-size: 15px;
-        cursor: pointer;
-        color: map-get($foreground, text);
+      .toggle-row {
+        display: flex;
+        align-items: center;
 
-        &:first-child {
-          margin-right: 1rem;
+        i {
+          margin-right: 0.5rem;
         }
 
-        &:hover {
-          opacity: 1;
+        .info-i {
+          font-size: 1.2rem;
+          margin-left: 0.5rem;
+          margin-right: 0;
         }
 
-        &.active {
-          font-weight: 600;
-          opacity: 1;
+        .current-dot {
+          height: 8px;
+          width: 8px;
+          border-radius: 50%;
+          background-color: rgb(84, 142, 230);
+          margin-left: 0.5rem;
         }
       }
     }
diff --git a/console/src/app/pages/projects/projects.component.ts b/console/src/app/pages/projects/projects.component.ts
index 022e2b81ad..add43ca66f 100644
--- a/console/src/app/pages/projects/projects.component.ts
+++ b/console/src/app/pages/projects/projects.component.ts
@@ -13,6 +13,7 @@ import { ManagementService } from 'src/app/services/mgmt.service';
 export class ProjectsComponent {
   public zitadelProjectId: string = '';
   public projectType$: BehaviorSubject<any> = new BehaviorSubject(ProjectType.PROJECTTYPE_OWNED);
+  public projectType: ProjectType = ProjectType.PROJECTTYPE_OWNED;
   public ProjectType: any = ProjectType;
   public grid: boolean = true;
   constructor(
diff --git a/console/src/app/pages/projects/projects.module.ts b/console/src/app/pages/projects/projects.module.ts
index f75307f27e..0873e7ebd8 100644
--- a/console/src/app/pages/projects/projects.module.ts
+++ b/console/src/app/pages/projects/projects.module.ts
@@ -15,6 +15,7 @@ import { ActionKeysModule } from 'src/app/modules/action-keys/action-keys.module
 import { CardModule } from 'src/app/modules/card/card.module';
 import { FilterProjectModule } from 'src/app/modules/filter-project/filter-project.module';
 import { InputModule } from 'src/app/modules/input/input.module';
+import { NavToggleModule } from 'src/app/modules/nav-toggle/nav-toggle.module';
 import { PaginatorModule } from 'src/app/modules/paginator/paginator.module';
 import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
 import { SharedModule } from 'src/app/modules/shared/shared.module';
@@ -55,6 +56,7 @@ import { ProjectsComponent } from './projects.component';
     LocalizedDatePipeModule,
     RefreshTableModule,
     MatRippleModule,
+    NavToggleModule,
   ],
 })
 export class ProjectsModule {}
diff --git a/console/src/app/pages/users/user-detail/detail-form/detail-form.component.html b/console/src/app/pages/users/user-detail/detail-form/detail-form.component.html
index a1d53125d9..1dd2d1def9 100644
--- a/console/src/app/pages/users/user-detail/detail-form/detail-form.component.html
+++ b/console/src/app/pages/users/user-detail/detail-form/detail-form.component.html
@@ -1,62 +1,74 @@
 <form [formGroup]="profileForm" *ngIf="profileForm" (ngSubmit)="submitForm()">
-  <div class="user-form-content">
-    <div class="user-form-content inner">
-      <button [disabled]="user && disabled" class="camera-wrapper" type="button"
-        (click)="showEditImage ? openUploadDialog() : null">
+  <div class="user-top-content">
+    <div class="user-form-content">
+      <button
+        [disabled]="user && disabled"
+        class="camera-wrapper"
+        type="button"
+        (click)="showEditImage ? openUploadDialog() : null"
+      >
         <div class="i-wrapper" *ngIf="showEditImage">
           <i class="las la-camera"></i>
         </div>
-        <cnsl-avatar *ngIf="user && user.profile?.displayName && user.profile?.firstName && user.profile?.lastName"
-          class="avatar" [name]="user.profile?.displayName ?? ''" [avatarUrl]="user?.profile?.avatarUrl || ''"
-          [forColor]="preferredLoginName" [size]="80">
+        <cnsl-avatar
+          *ngIf="user && user.profile?.displayName && user.profile?.firstName && user.profile?.lastName"
+          class="avatar"
+          [name]="user.profile?.displayName ?? ''"
+          [avatarUrl]="user?.profile?.avatarUrl || ''"
+          [forColor]="preferredLoginName"
+          [size]="80"
+        >
         </cnsl-avatar>
       </button>
 
-      <div className="usernamediv">
+      <div class="usernamediv">
         <cnsl-form-field class="formfield">
           <cnsl-label>{{ 'USER.PROFILE.USERNAME' | translate }}</cnsl-label>
           <input cnslInput formControlName="userName" />
         </cnsl-form-field>
-        <button [disabled]="user && disabled" type="button" mat-stroked-button class="edit"
-          (click)="changeUsername()">{{'USER.PROFILE.CHANGEUSERNAME' |
-          translate}}</button>
+        <button [disabled]="user && disabled" type="button" mat-stroked-button class="edit" (click)="changeUsername()">
+          {{ 'USER.PROFILE.CHANGEUSERNAME' | translate }}
+        </button>
       </div>
     </div>
-    <cnsl-form-field class="formfield">
-      <cnsl-label>{{ 'USER.PROFILE.FIRSTNAME' | translate }}</cnsl-label>
-      <input cnslInput formControlName="firstName" />
-    </cnsl-form-field>
-    <cnsl-form-field class="formfield">
-      <cnsl-label>{{ 'USER.PROFILE.LASTNAME' | translate }}</cnsl-label>
-      <input cnslInput formControlName="lastName" />
-    </cnsl-form-field>
-    <cnsl-form-field class="formfield">
-      <cnsl-label>{{ 'USER.PROFILE.NICKNAME' | translate }}</cnsl-label>
-      <input cnslInput formControlName="nickName" />
-    </cnsl-form-field>
-    <cnsl-form-field class="formfield">
-      <cnsl-label>{{ 'USER.PROFILE.DISPLAYNAME' | translate }}</cnsl-label>
-      <input cnslInput formControlName="displayName" />
-    </cnsl-form-field>
-    <cnsl-form-field class="formfield">
-      <cnsl-label>{{ 'USER.PROFILE.GENDER' | translate }}</cnsl-label>
-      <mat-select formControlName="gender">
-        <mat-option *ngFor="let gender of genders" [value]="gender">
-          {{ 'GENDERS.'+gender | translate }}
-        </mat-option>
-      </mat-select>
-    </cnsl-form-field>
-    <cnsl-form-field class="formfield">
-      <cnsl-label>{{ 'USER.PROFILE.PREFERRED_LANGUAGE' | translate }}</cnsl-label>
-      <mat-select formControlName="preferredLanguage">
-        <mat-option *ngFor="let language of languages" [value]="language">
-          {{ 'LANGUAGES.'+language | translate }}
-        </mat-option>
-      </mat-select>
-    </cnsl-form-field>
+    <div class="user-grid">
+      <cnsl-form-field class="formfield">
+        <cnsl-label>{{ 'USER.PROFILE.FIRSTNAME' | translate }}</cnsl-label>
+        <input cnslInput formControlName="firstName" />
+      </cnsl-form-field>
+      <cnsl-form-field class="formfield">
+        <cnsl-label>{{ 'USER.PROFILE.LASTNAME' | translate }}</cnsl-label>
+        <input cnslInput formControlName="lastName" />
+      </cnsl-form-field>
+      <cnsl-form-field class="formfield">
+        <cnsl-label>{{ 'USER.PROFILE.NICKNAME' | translate }}</cnsl-label>
+        <input cnslInput formControlName="nickName" />
+      </cnsl-form-field>
+      <cnsl-form-field class="formfield">
+        <cnsl-label>{{ 'USER.PROFILE.DISPLAYNAME' | translate }}</cnsl-label>
+        <input cnslInput formControlName="displayName" />
+      </cnsl-form-field>
+      <cnsl-form-field class="formfield">
+        <cnsl-label>{{ 'USER.PROFILE.GENDER' | translate }}</cnsl-label>
+        <mat-select formControlName="gender">
+          <mat-option *ngFor="let gender of genders" [value]="gender">
+            {{ 'GENDERS.' + gender | translate }}
+          </mat-option>
+        </mat-select>
+      </cnsl-form-field>
+      <cnsl-form-field class="formfield">
+        <cnsl-label>{{ 'USER.PROFILE.PREFERRED_LANGUAGE' | translate }}</cnsl-label>
+        <mat-select formControlName="preferredLanguage">
+          <mat-option *ngFor="let language of languages" [value]="language">
+            {{ 'LANGUAGES.' + language | translate }}
+          </mat-option>
+        </mat-select>
+      </cnsl-form-field>
+    </div>
   </div>
   <div class="btn-container">
-    <button [disabled]="disabled" class="submit-button" type="submit" color="primary" mat-raised-button>{{
-      'ACTIONS.SAVE' | translate }}</button>
+    <button [disabled]="disabled" class="submit-button" type="submit" color="primary" mat-raised-button>
+      {{ 'ACTIONS.SAVE' | translate }}
+    </button>
   </div>
-</form>
\ No newline at end of file
+</form>
diff --git a/console/src/app/pages/users/user-detail/detail-form/detail-form.component.scss b/console/src/app/pages/users/user-detail/detail-form/detail-form.component.scss
index 819ef62d9f..407ec23d8b 100644
--- a/console/src/app/pages/users/user-detail/detail-form/detail-form.component.scss
+++ b/console/src/app/pages/users/user-detail/detail-form/detail-form.component.scss
@@ -2,31 +2,28 @@
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  margin: 0 -.5rem;
+  margin: 0;
+  width: 100%;
+  align-items: center;
 
-  &.inner {
-    margin: 0;
-    width: 100%;
-    display: flex;
-    align-items: center;
+  .usernamediv {
+    margin-left: 0.5rem;
+    margin-bottom: 0.5rem;
 
-    .usernamediv {
-      margin-left: .5rem;
-      margin-bottom: .5rem;
+    .formfield {
+      margin: 0;
+      flex: 1;
+    }
 
-      .formfield {
-        margin: 0;
-        flex: 1;
-      }
-
-      .edit {
-        cursor: pointer !important;
-      }
+    .edit {
+      display: block;
+      margin-top: 0.5rem;
+      cursor: pointer !important;
     }
   }
 
   .camera-wrapper {
-    margin: 0 .5rem;
+    margin: 0 0.5rem;
     position: relative;
     border-radius: 50%;
     padding: 0;
@@ -36,37 +33,49 @@
     justify-content: center;
     background: none;
     cursor: pointer;
-    transition: all .3s ease;
+    transition: all 0.3s ease;
+    overflow: hidden;
 
     .i-wrapper {
-      border-radius: 50%;
-      background-color: #00000050;
+      display: none;
+      background-color: #00000080;
       position: absolute;
-      top: 0;
       z-index: 1;
       left: 0;
       right: 0;
       bottom: 0;
-      display: flex;
       align-items: center;
       justify-content: center;
+      transition: all 0.2 ease;
 
       i {
-        font-size: 3rem;
+        font-size: 1.2rem;
+        margin: 0.25rem;
         color: white;
       }
     }
 
     &:hover {
       .i-wrapper {
-        background-color: #00000080;
+        display: inline;
       }
     }
   }
 
   .formfield {
     flex: 1 1 33%;
-    margin: 0 .5rem;
+    margin: 0 0.5rem;
+  }
+}
+
+.user-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1rem;
+  margin: 0;
+
+  @media only screen and (min-width: 700px) {
+    grid-template-columns: 1fr 1fr;
   }
 }
 
@@ -75,6 +84,6 @@
   justify-content: flex-end;
 
   .submit-button {
-    border-radius: .5rem;
+    border-radius: 0.5rem;
   }
 }
diff --git a/console/src/app/pages/users/user-detail/detail-form/profile-picture/profile-picture.component.html b/console/src/app/pages/users/user-detail/detail-form/profile-picture/profile-picture.component.html
index 669638c545..7c60010bfa 100644
--- a/console/src/app/pages/users/user-detail/detail-form/profile-picture/profile-picture.component.html
+++ b/console/src/app/pages/users/user-detail/detail-form/profile-picture/profile-picture.component.html
@@ -1,20 +1,26 @@
-<span class="title" mat-dialog-title>{{'USER.PROFILE.AVATAR.UPLOADTITLE' | translate}}</span>
+<span class="title" mat-dialog-title>{{ 'USER.PROFILE.AVATAR.UPLOADTITLE' | translate }}</span>
 <div mat-dialog-content>
-  <p class="desc cnsl-secondary-text">{{'USER.PROFILE.AVATAR.CURRENT' | translate}}</p>
+  <p class="desc cnsl-secondary-text">{{ 'USER.PROFILE.AVATAR.CURRENT' | translate }}</p>
   <div class="current-pic-wrapper">
     <img class="pic" [src]="data.profilePic" *ngIf="data.profilePic" />
     <span class="fill-space"></span>
-    <input #selectedFile style="display: none;" class="file-input" type="file" (change)="onDrop($event)">
-    <button class="btn" mat-raised-button color="primary" type="button"
-      (click)="selectedFile.click();">{{'USER.PROFILE.AVATAR.UPLOADBTN' | translate}}</button>
-    <button *ngIf="data.profilePic" matTooltip="{{'ACTIONS.DELETE' | translate}}" color="warn" (click)="deletePic()"
-      mat-icon-button>
-      <mat-icon>remove_circle</mat-icon>
+    <input #selectedFile style="display: none" class="file-input" type="file" (change)="onDrop($event)" />
+    <button class="btn" mat-raised-button color="primary" type="button" (click)="selectedFile.click()">
+      {{ 'USER.PROFILE.AVATAR.UPLOADBTN' | translate }}
+    </button>
+    <button
+      *ngIf="data.profilePic"
+      matTooltip="{{ 'ACTIONS.DELETE' | translate }}"
+      color="warn"
+      (click)="deletePic()"
+      mat-icon-button
+    >
+      <i class="las la-minus-circle"></i>
     </button>
   </div>
 </div>
 <div mat-dialog-actions class="action">
   <button color="primary" mat-stroked-button class="ok-button" (click)="closeDialog()">
-    {{'ACTIONS.CLOSE' | translate}}
+    {{ 'ACTIONS.CLOSE' | translate }}
   </button>
-</div>
\ No newline at end of file
+</div>
diff --git a/console/src/app/pages/users/user-detail/detail-form/profile-picture/profile-picture.component.ts b/console/src/app/pages/users/user-detail/detail-form/profile-picture/profile-picture.component.ts
index 6f808b20f7..293d42355a 100644
--- a/console/src/app/pages/users/user-detail/detail-form/profile-picture/profile-picture.component.ts
+++ b/console/src/app/pages/users/user-detail/detail-form/profile-picture/profile-picture.component.ts
@@ -49,7 +49,9 @@ export class ProfilePictureComponent {
           this.data.profilePic = resp.user?.human?.profile?.avatarUrl ?? '';
         });
       })
-      .catch((error) => this.toast.showError(error));
+      .catch((error) => {
+        this.toast.showError(error.error, false);
+      });
   }
 
   public closeDialog(): void {
diff --git a/console/src/app/pages/users/user-list/user-list.module.ts b/console/src/app/pages/users/user-list/user-list.module.ts
index 969f737b1f..be86f4ddfd 100644
--- a/console/src/app/pages/users/user-list/user-list.module.ts
+++ b/console/src/app/pages/users/user-list/user-list.module.ts
@@ -18,6 +18,7 @@ import { AvatarModule } from 'src/app/modules/avatar/avatar.module';
 import { CardModule } from 'src/app/modules/card/card.module';
 import { FilterUserModule } from 'src/app/modules/filter-user/filter-user.module';
 import { InputModule } from 'src/app/modules/input/input.module';
+import { NavToggleModule } from 'src/app/modules/nav-toggle/nav-toggle.module';
 import { PaginatorModule } from 'src/app/modules/paginator/paginator.module';
 import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
 import { TableActionsModule } from 'src/app/modules/table-actions/table-actions.module';
@@ -49,6 +50,7 @@ import { UserTableComponent } from './user-table/user-table.component';
     TranslateModule,
     FilterUserModule,
     RouterModule,
+    NavToggleModule,
     RefreshTableModule,
     TableActionsModule,
     ActionKeysModule,
diff --git a/console/src/app/pages/users/user-list/user-table/user-table.component.html b/console/src/app/pages/users/user-list/user-table/user-table.component.html
index bb83827477..a6c263f77b 100644
--- a/console/src/app/pages/users/user-list/user-table/user-table.component.html
+++ b/console/src/app/pages/users/user-list/user-table/user-table.component.html
@@ -8,13 +8,17 @@
   [emitRefreshOnPreviousRoutes]="refreshOnPreviousRoutes"
   [showBorder]="true"
 >
-  <div leftActions class="user-table-left-actions">
-    <button class="type-button" [ngClass]="{ active: type === Type.TYPE_HUMAN }" (click)="setType(Type.TYPE_HUMAN)">
-      {{ 'USER.TABLE.TYPES.HUMAN' | translate }}
-    </button>
-    <button class="type-button" [ngClass]="{ active: type === Type.TYPE_MACHINE }" (click)="setType(Type.TYPE_MACHINE)">
-      {{ 'USER.TABLE.TYPES.MACHINE' | translate }}
-    </button>
+  <div leftActions class="user-toggle-group">
+    <cnsl-nav-toggle
+      label="{{ 'USER.TABLE.TYPES.HUMAN' | translate }}"
+      (clicked)="setType(Type.TYPE_HUMAN)"
+      [active]="type === Type.TYPE_HUMAN"
+    ></cnsl-nav-toggle>
+    <cnsl-nav-toggle
+      label="{{ 'USER.TABLE.TYPES.MACHINE' | translate }}"
+      (clicked)="setType(Type.TYPE_MACHINE)"
+      [active]="type === Type.TYPE_MACHINE"
+    ></cnsl-nav-toggle>
   </div>
 
   <ng-template cnslHasRole [hasRole]="['user.write']" actions>
diff --git a/console/src/app/pages/users/user-list/user-table/user-table.component.scss b/console/src/app/pages/users/user-list/user-table/user-table.component.scss
index 8a9159bf3f..99f2f2a3b1 100644
--- a/console/src/app/pages/users/user-list/user-table/user-table.component.scss
+++ b/console/src/app/pages/users/user-list/user-table/user-table.component.scss
@@ -4,31 +4,31 @@
   $foreground: map-get($theme, foreground);
   $is-dark-theme: map-get($theme, is-dark);
 
-  .user-table-left-actions {
+  .user-toggle-group {
     display: flex;
-    align-items: center;
+    margin: 0;
+    height: 100%;
 
-    .type-button {
-      border: none;
-      background: none;
-      text-align: left;
-      padding: 0.75rem 0;
-      opacity: 0.6;
-      font-size: 15px;
-      cursor: pointer;
-      color: map-get($foreground, text);
+    .toggle-row {
+      display: flex;
+      align-items: center;
 
-      &:first-child {
-        margin-right: 1rem;
+      i {
+        margin-right: 0.5rem;
       }
 
-      &:hover {
-        opacity: 1;
+      .info-i {
+        font-size: 1.2rem;
+        margin-left: 0.5rem;
+        margin-right: 0;
       }
 
-      &.active {
-        font-weight: 600;
-        opacity: 1;
+      .current-dot {
+        height: 8px;
+        width: 8px;
+        border-radius: 50%;
+        background-color: rgb(84, 142, 230);
+        margin-left: 0.5rem;
       }
     }
   }
diff --git a/console/src/app/services/toast.service.ts b/console/src/app/services/toast.service.ts
index c881dcd92c..b545a050cb 100644
--- a/console/src/app/services/toast.service.ts
+++ b/console/src/app/services/toast.service.ts
@@ -33,15 +33,19 @@ export class ToastService {
     }
   }
 
-  public showError(grpcError: any): void {
-    const { message, code, metadata } = grpcError;
-    if (code !== 16) {
-      this.translate
-        .get('ACTIONS.CLOSE')
-        .pipe(take(1))
-        .subscribe((value) => {
-          this.showMessage(decodeURI(message), value, false);
-        });
+  public showError(error: any | string, isGrpc: boolean = true): void {
+    if (isGrpc) {
+      const { message, code, metadata } = error;
+      if (code !== 16) {
+        this.translate
+          .get('ACTIONS.CLOSE')
+          .pipe(take(1))
+          .subscribe((value) => {
+            this.showMessage(decodeURI(message), value, false);
+          });
+      }
+    } else {
+      this.showMessage(error as string, '', false);
     }
   }
 
diff --git a/console/src/component-themes.scss b/console/src/component-themes.scss
index 019973e2ac..b377a4b0ba 100644
--- a/console/src/component-themes.scss
+++ b/console/src/component-themes.scss
@@ -12,6 +12,7 @@
 @import 'src/app/modules/app-card/app-card.component';
 @import 'src/app/modules/contributors/contributors.component';
 @import 'src/app/modules/nav/nav.component';
+@import 'src/app/modules/nav-toggle/nav-toggle.component';
 @import './styles/toast.scss';
 @import 'src/app/modules/table-actions/table-actions.component';
 @import 'src/app/modules/org-context/org-context.component.scss';
@@ -62,6 +63,7 @@
   @include main-theme($theme);
   @include avatar-theme($theme);
   @include nav-theme($theme);
+  @include nav-toggle-theme($theme);
   @include header-theme($theme);
   @include app-type-radio-theme($theme);
   @include projects-theme($theme);
diff --git a/console/src/styles.scss b/console/src/styles.scss
index 110aa3eb20..c25f70439f 100644
--- a/console/src/styles.scss
+++ b/console/src/styles.scss
@@ -446,9 +446,18 @@ $custom-typography: mat.define-typography-config(
     }
   }
 
-  .mat-button-toggle-button {
+  .mat-button-toggle-group-appearance-standard {
+    border-color: map-get($foreground, divider);
+  }
+
+  .mat-button-toggle {
     background-color: mat.get-color-from-palette($background, cards);
     transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    transition: border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+    &.mat-button-toggle-checked {
+      background-color: #00000010;
+    }
   }
 
   .main-container,
@@ -509,9 +518,18 @@ $custom-typography: mat.define-typography-config(
     }
   }
 
-  .mat-button-toggle-button {
+  .mat-button-toggle-group-appearance-standard {
+    border-color: map-get($foreground, divider);
+  }
+
+  .mat-button-toggle {
     background-color: mat.get-color-from-palette($background, cards);
     transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    transition: border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+    &.mat-button-toggle-checked {
+      background-color: mat.get-color-from-palette($background, background);
+    }
   }
 
   .main-container,
@@ -601,3 +619,15 @@ i {
 .mat-checkbox-inner-container.mat-checkbox-inner-container-no-side-margin {
   margin-right: 0.5rem !important;
 }
+
+.mat-button-toggle-button {
+  display: flex;
+  height: 36px;
+  line-height: 36px !important;
+  align-items: center;
+  font-size: 14px !important;
+}
+
+.mat-button-toggle-label-content {
+  line-height: 36px;
+}
diff --git a/console/src/styles/input.scss b/console/src/styles/input.scss
index 53779af177..190b8be9a6 100644
--- a/console/src/styles/input.scss
+++ b/console/src/styles/input.scss
@@ -20,8 +20,8 @@
     transform: all 0.2 linear;
     font-size: 1rem;
     border: none;
-    border: 1px solid if($is-dark-theme, #f9f7f725, #1a191938);
-    background-color: if($is-dark-theme, #00000020, #00000004);
+    border: 1px solid if($is-dark-theme, #f9f7f775, #1a191954);
+    background-color: if($is-dark-theme, #00000040, #00000004);
     border-radius: 4px;
     height: 40px;
     padding: 10px;
@@ -34,7 +34,7 @@
     margin-bottom: 2px;
 
     &:hover {
-      border-color: if($is-dark-theme, #aeafb1, #1a1b1b);
+      border-color: if($is-dark-theme, #e0e0e0, #1a1b1b);
     }
 
     &:active,