diff --git a/src/assets/styles/common-buttons.scss b/src/assets/styles/common-buttons.scss
index dc61749..b26a9fc 100644
--- a/src/assets/styles/common-buttons.scss
+++ b/src/assets/styles/common-buttons.scss
@@ -1,110 +1,18 @@
-iqser-icon-button .mdc-button.mat-mdc-button {
-    --mdc-text-button-container-shape: var(--iqser-button-radius);
-    --mdc-text-button-label-text-color: var(--iqser-accent);
-
-    &[disabled] {
-        --mdc-text-button-disabled-label-text-color: rgba(var(--iqser-accent-rgb), 0.3);
-    }
-
-    height: var(--iqser-button-height);
-    padding: 0 14px;
-
-    &.has-icon {
-        padding: 0 14px 0 10px;
-
-        > .mat-icon {
-            margin-right: 6px;
-            width: 14px;
-        }
-    }
-
-    &.primary {
-        --mdc-text-button-label-text-color: var(--iqser-white);
-        --mdc-text-button-disabled-label-text-color: rgba(255, 255, 255, 0.5);
-
-        background: var(--iqser-primary);
-        font-weight: 500;
-    }
-
-    &.dark {
-        background: var(--iqser-btn-bg);
+@mixin iconSize14 {
+    .mat-icon {
+        width: 14px;
+        height: 14px;
+        font-size: 14px;
     }
 }
 
-iqser-circle-button .mat-mdc-icon-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .mat-mdc-button-touch-target {
-        width: var(--circle-button-size);
-        height: var(--circle-button-size);
-    }
-
-    &.mat-mdc-button-base {
-        height: var(--circle-button-size);
-        width: var(--circle-button-size);
-        padding: 0;
-    }
-
-    svg {
-        vertical-align: bottom;
-        width: inherit;
-        height: inherit;
-    }
-
-    &.primary {
-        --mdc-icon-button-icon-color: var(--iqser-white);
-
-        &[disabled] {
-            --mdc-icon-button-disabled-icon-color: rgba(255, 255, 255, 0.5);
-        }
-
-        background: var(--iqser-primary);
-    }
-
-    &.warn:not([disabled]) {
-        --mdc-icon-button-icon-color: var(--iqser-accent);
-        background-color: var(--iqser-warn);
-    }
-
-    mat-icon {
-        width: var(--circle-button-icon-size);
-        height: var(--circle-button-icon-size);
-        line-height: var(--circle-button-icon-size);
-        margin: 0 !important;
-
-        svg {
-            line-height: var(--circle-button-icon-size);
-        }
+@mixin labelNoWrap {
+    .mdc-button__label {
+        white-space: nowrap;
     }
 }
 
-iqser-chevron-button .mat-mdc-button {
-    --mdc-text-button-container-shape: var(--iqser-button-radius);
-
-    height: var(--iqser-button-height);
-
-    &:not([disabled]) {
-        --mdc-text-button-label-text-color: var(--iqser-accent);
-    }
-}
-
-iqser-chevron-button,
-iqser-circle-button,
-iqser-icon-button {
-    display: block;
-    position: relative;
-
-    .dot {
-        top: 1px;
-        left: 1px;
-    }
-
-    .overlay {
-        background: rgba(var(--iqser-primary-rgb), 0.1);
-    }
-
+@mixin ariaExpanded {
     &[aria-expanded='true'] {
         .mat-mdc-button-base {
             background: rgba(var(--iqser-primary-rgb), 0.1);
@@ -120,115 +28,153 @@ iqser-icon-button {
     }
 }
 
-//.mat-button,
-//.mat-flat-button {
-//    border-radius: var(--iqser-button-radius) !important;
-//    font-size: var(--iqser-button-font-size) !important;
-//    display: flex !important;
-//    align-items: center;
-//
-//    &:not(.text) {
-//        height: var(--iqser-button-height);
-//    }
-//
-//    .mat-button-wrapper {
-//        display: flex;
-//        align-items: center;
-//        line-height: var(--iqser-font-size);
-//        transition: opacity 0.2s;
-//        width: 100%;
-//
-//        > *:not(:last-child) {
-//            margin-right: 6px;
-//        }
-//
-//        > span {
-//            margin: auto;
-//        }
-//    }
-//}
-//
-//.mat-button,
-//.mat-icon-button,
-//.mat-flat-button {
-//    &.mat-button-disabled .mat-button-wrapper {
-//        color: var(--iqser-text);
-//        opacity: 0.3;
-//    }
-//}
-//
-//.mat-flat-button.mat-primary,
-//.mat-button.primary {
-//    padding: 0 14px;
-//    transition: background-color 0.2s, color 0.2s;
-//
-//    background-color: var(--iqser-primary);
-//
-//    &.mat-button-disabled {
-//        background-color: var(--iqser-primary);
-//
-//        .mat-button-wrapper {
-//            color: var(--iqser-white);
-//            opacity: 0.5;
-//        }
-//    }
-//
-//    &:not(.mat-button-disabled):hover {
-//        background-color: var(--iqser-primary-2);
-//    }
-//}
-//
-//iqser-icon-button,
-//iqser-chevron-button,
-//.user-button,
-//iqser-circle-button {
-//    position: relative;
-//    display: flex;
-//
-//    button {
-//        font-weight: 400 !important;
-//        transition: background-color 0.2s;
-//
-//        &.overlay {
-//            background: rgba(var(--iqser-primary-rgb), 0.1);
-//        }
-//
-//        &:not(.overlay):not(.mat-button-disabled):not(.primary):not(.dark-bg):not(.warn):not(.help):not(.text):hover {
-//            background-color: var(--iqser-btn-bg);
-//        }
-//
-//        &.text {
-//            color: var(--iqser-primary);
-//            font-weight: 500 !important;
-//
-//            &:hover {
-//                background-color: rgba(var(--iqser-primary-rgb), 0.05);
-//            }
-//        }
-//
-//        &.primary {
-//            font-weight: 500 !important;
-//            background-color: var(--iqser-primary);
-//            color: var(--iqser-white);
-//
-//            &:hover {
-//                background-color: var(--iqser-primary-2);
-//            }
-//        }
-//
-//        &.dark-bg:hover {
-//            background-color: var(--iqser-btn-bg-hover);
-//        }
-//
-//        &.help:hover {
-//            background-color: var(--iqser-helpmode-primary);
-//            color: var(--iqser-grey-1);
-//        }
-//    }
-//
-//    .dot {
-//        top: 1px;
-//        left: 1px;
-//    }
-//}
-//
+@mixin dotOverlay {
+    position: relative;
+
+    .dot {
+        top: 1px;
+        left: 1px;
+    }
+
+    .overlay {
+        background: rgba(var(--iqser-primary-rgb), 0.1);
+    }
+}
+
+@mixin buttonShape {
+    .mat-mdc-button {
+        --mdc-text-button-container-shape: var(--iqser-button-radius);
+
+        height: var(--iqser-button-height);
+
+        .mat-mdc-button-touch-target {
+            height: var(--iqser-button-height);
+        }
+    }
+}
+
+iqser-icon-button {
+    @include buttonShape;
+    @include ariaExpanded;
+    @include dotOverlay;
+    @include labelNoWrap;
+
+    display: block;
+
+    .mdc-button.mat-mdc-button {
+        @include iconSize14;
+
+        --mdc-text-button-label-text-color: var(--iqser-accent);
+        padding: 0 14px;
+
+        &[disabled] {
+            --mdc-text-button-disabled-label-text-color: rgba(var(--iqser-accent-rgb), 0.3);
+        }
+
+        .mat-icon {
+            margin-right: 6px;
+        }
+
+        &.has-icon {
+            padding: 0 14px 0 10px;
+        }
+
+        &.primary {
+            --mdc-text-button-label-text-color: var(--iqser-white);
+            --mdc-text-button-disabled-label-text-color: rgba(255, 255, 255, 0.5);
+
+            background: var(--iqser-primary);
+            font-weight: 500;
+        }
+
+        &.dark {
+            background: var(--iqser-btn-bg);
+        }
+    }
+}
+
+iqser-circle-button {
+    @include ariaExpanded;
+    @include dotOverlay;
+
+    display: block;
+
+    .mat-mdc-icon-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .mat-mdc-button-touch-target {
+            width: var(--circle-button-size);
+            height: var(--circle-button-size);
+        }
+
+        &.mat-mdc-button-base {
+            height: var(--circle-button-size);
+            width: var(--circle-button-size);
+            padding: 0;
+        }
+
+        svg {
+            vertical-align: bottom;
+            width: inherit;
+            height: inherit;
+        }
+
+        &.primary {
+            --mdc-icon-button-icon-color: var(--iqser-white);
+
+            &[disabled] {
+                --mdc-icon-button-disabled-icon-color: rgba(255, 255, 255, 0.5);
+            }
+
+            background: var(--iqser-primary);
+        }
+
+        &.warn:not([disabled]) {
+            --mdc-icon-button-icon-color: var(--iqser-accent);
+            background-color: var(--iqser-warn);
+        }
+
+        mat-icon {
+            width: var(--circle-button-icon-size);
+            height: var(--circle-button-icon-size);
+            line-height: var(--circle-button-icon-size);
+            margin: 0 !important;
+
+            svg {
+                line-height: var(--circle-button-icon-size);
+            }
+        }
+    }
+}
+
+iqser-chevron-button {
+    @include buttonShape;
+    @include ariaExpanded;
+    @include dotOverlay;
+    @include labelNoWrap;
+
+    display: block;
+
+    .mat-mdc-button {
+        @include iconSize14;
+
+        &:not([disabled]) {
+            --mdc-text-button-label-text-color: var(--iqser-accent);
+        }
+    }
+}
+
+iqser-user-button {
+    @include buttonShape;
+    @include ariaExpanded;
+    @include dotOverlay;
+
+    display: block;
+
+    .mat-mdc-button {
+        @include iconSize14;
+        padding: 0 10px 0 5px;
+    }
+}
diff --git a/src/lib/users/components/user-button/user-button.component.html b/src/lib/users/components/user-button/user-button.component.html
index 05da46f..694c628 100644
--- a/src/lib/users/components/user-button/user-button.component.html
+++ b/src/lib/users/components/user-button/user-button.component.html
@@ -4,11 +4,11 @@
         {{ userService.currentUser$ | async | name }}
     </ng-container>
 
-    <mat-icon *ngIf="showDropdownArrow" svgIcon="iqser:arrow-down"></mat-icon>
+    <mat-icon *ngIf="showDropdownArrow" iconPositionEnd svgIcon="iqser:arrow-down"></mat-icon>
 </button>
 
 <div *ngIf="showDot" class="dot"></div>
 
 <ng-template #initialsAvatar>
-    <iqser-initials-avatar [user]="userService.currentUser$ | async" [withName]="true" [showTooltip]="false"></iqser-initials-avatar>
+    <iqser-initials-avatar [showTooltip]="false" [user]="userService.currentUser$ | async" [withName]="true"></iqser-initials-avatar>
 </ng-template>
diff --git a/src/lib/users/components/user-button/user-button.component.scss b/src/lib/users/components/user-button/user-button.component.scss
index 0f6e0d0..35c257a 100644
--- a/src/lib/users/components/user-button/user-button.component.scss
+++ b/src/lib/users/components/user-button/user-button.component.scss
@@ -1,24 +1,3 @@
-@use '../../../../assets/styles/common-buttons';
-
 :host {
-    //@extend .user-button;
     min-width: fit-content;
-
-    button {
-        padding: 0 10px 0 5px;
-
-        mat-icon {
-            width: 14px;
-        }
-    }
-
-    &[aria-expanded='true'] {
-        button {
-            background: rgba(var(--iqser-primary-rgb), 0.1);
-        }
-    }
-
-    .dot {
-        left: -2px;
-    }
 }