diff --git a/src/components/userbar/LoggedInPanel.jsx b/src/components/userbar/LoggedInPanel.jsx
index 8849351..fd7a33b 100644
--- a/src/components/userbar/LoggedInPanel.jsx
+++ b/src/components/userbar/LoggedInPanel.jsx
@@ -37,7 +37,7 @@ export default class LoggedInPanel extends Component {
                 <div className={classNames(styles.activeAccount, {
                     [styles.activeAccountExpanded]: isAccountSwitcherActive
                 })}>
-                    <button className={buttons.green} onClick={this.onExpandAccountSwitcher}>
+                    <button className={styles.activeAccountButton} onClick={this.onExpandAccountSwitcher}>
                         <span className={styles.userIcon} />
                         <span className={styles.userName}>{user.username}</span>
                         <span className={styles.expandIcon} />
diff --git a/src/components/userbar/loggedInPanel.scss b/src/components/userbar/loggedInPanel.scss
index f4b3771..3264b96 100644
--- a/src/components/userbar/loggedInPanel.scss
+++ b/src/components/userbar/loggedInPanel.scss
@@ -12,13 +12,21 @@
     border-right: $border;
 }
 
+.activeAccountButton {
+    composes: green from 'components/ui/buttons.scss';
+}
+
 .activeAccountExpanded {
+    .activeAccountButton {
+        background-color: darker($green);
+    }
+
     .accountSwitcherContainer {
         display: block;
     }
 
     .expandIcon {
-        transform: rotate(180deg);
+        transform: rotate(-180deg);
     }
 }
 
@@ -37,6 +45,7 @@
     margin-left: 4px;
     font-size: 6px;
     color: #CCC;
+    transition: .2s;
 }
 
 .userName {