diff --git a/src/common/UserPanel/UserPanel.js b/src/common/UserPanel/UserPanel.js
index 695a765ae..a44c488f2 100644
--- a/src/common/UserPanel/UserPanel.js
+++ b/src/common/UserPanel/UserPanel.js
@@ -27,7 +27,7 @@ const UserPanel = (props) => {
             <div className={styles['user-info']}>
                 {renderAvatar(props.avatar, props.email)}
                 {renderEmail(props.email)}
-                <div onClick={props.email.length === 0 ? props.login : props.logout} className={styles['logging']}>{props.email.length === 0 ? 'Log in' : 'Log out'}</div>
+                <div onClick={props.email.length === 0 ? props.login : props.logout} className={styles['login-logout']}>{props.email.length === 0 ? 'Log in' : 'Log out'}</div>
             </div>
             <div className={styles['separator']}></div>
             <div onClick={props.resizeWindow} className={styles['option']}>
diff --git a/src/common/UserPanel/styles.less b/src/common/UserPanel/styles.less
index 66ae9d8d6..7c8c84ca3 100644
--- a/src/common/UserPanel/styles.less
+++ b/src/common/UserPanel/styles.less
@@ -38,7 +38,7 @@
         display: grid;
         grid-template-areas:
             "avatar email"
-            "avatar logout";
+            "avatar login-logout";
 
         .avatar {
             grid-area: avatar;
@@ -59,8 +59,8 @@
             text-overflow: ellipsis;
         }
 
-        .logging {
-            grid-area: logout;
+        .login-logout {
+            grid-area: login-logout;
             display: flex;
             align-items: center;
             color: @colorneutral;