diff --git a/assets/less/mio/classes/header.less b/assets/less/mio/classes/header.less
index da9c4516..9b5b6761 100644
--- a/assets/less/mio/classes/header.less
+++ b/assets/less/mio/classes/header.less
@@ -57,29 +57,26 @@
         list-style: none;
         display: flex;
 
+        &-toggle {
+            display: none;
+        }
+
         @media (max-width: @mio-header-mobile) {
             display: none;
             font-size: 1.6em;
             line-height: 1.5em;
-        }
 
-        &-toggle {
-            display: none;
-
-            &:checked ~ .header__menu {
+            &-toggle:checked ~ .header__menu {
                 display: block;
             }
         }
 
         @media (max-width: @mio-header-mobile) {
             width: 100%;
+            background: #c2affe;
 
-            &__item {
-                background: #c2affe;
-
-                &:not(:last-child) {
-                    border-bottom: 1px solid #9475b2;
-                }
+            &__item:not(:last-child) {
+                border-bottom: 1px solid #9475b2;
             }
 
             &__link {
@@ -162,14 +159,17 @@
         flex-direction: row-reverse;
         order: 3;
 
-        @media (max-width: @mio-header-mobile) {
+        &-toggle {
             display: none;
         }
 
-        &-toggle {
+        @media (max-width: @mio-header-mobile) {
             display: none;
+            width: 100%;
+            background: #c2affe;
+            font-size: 1.1em;
 
-            &:checked ~ .header__user {
+            &-toggle:checked ~ .header__user {
                 display: flex;
             }
         }
@@ -190,6 +190,13 @@
             flex-direction: column;
             align-items: flex-end;
             justify-content: center;
+
+            @media (max-width: @mio-header-mobile) {
+                margin: 0;
+                padding: 0;
+                display: block;
+                width: 100%;
+            }
         }
 
         &__name {
@@ -199,12 +206,20 @@
             font-family: @mio-font-heading;
             text-decoration: none;
             display: block;
-            display: inline-flex;
-            align-items: flex-end;
-            justify-content: right;
+            text-align: right;
 
-            &:hover {
-                text-decoration: underline;
+            @media (min-width: @mio-header-mobile) {
+                &:hover {
+                    text-decoration: underline;
+                }
+            }
+
+            @media (max-width: @mio-header-mobile) {
+                font-size: 1.6em;
+                line-height: 1.5em;
+                border-bottom: 1px solid #9475b2;
+                padding: 4px 8px;
+                text-align: left;
             }
         }
 
@@ -216,18 +231,42 @@
             max-width: 100px;
             font-size: .9em;
             line-height: 1.4em;
+
+            @media (max-width: @mio-header-mobile) {
+                font-size: 1.6em;
+                line-height: 1.5em;
+                max-width: initial;
+                width: 100%;
+                flex-direction: column;
+            }
         }
 
         &__action {
             padding-left: 6px;
+
+            @media (max-width: @mio-header-mobile) {
+                padding: 0;
+
+                &:not(:last-child) {
+                    border-bottom: 1px solid #9475b2;
+                }
+            }
         }
 
         &__link {
             color: inherit;
             text-decoration: none;
 
-            &:hover {
-                text-decoration: underline;
+            @media (max-width: @mio-header-mobile) {
+                padding: 4px 8px;
+                display: block;
+                width: 100%;
+            }
+
+            @media (min-width: @mio-header-mobile) {
+                &:hover {
+                    text-decoration: underline;
+                }
             }
         }
     }