diff --git a/src/components/accounts/AccountSwitcher.jsx b/src/components/accounts/AccountSwitcher.jsx
index 30cde92..d700bc2 100644
--- a/src/components/accounts/AccountSwitcher.jsx
+++ b/src/components/accounts/AccountSwitcher.jsx
@@ -3,7 +3,8 @@ import React, { Component, PropTypes } from 'react';
 import classNames from 'classnames';
 import { FormattedMessage as Message } from 'react-intl';
 
-import { skins, SKIN_DARK } from 'components/ui';
+import { skins, SKIN_DARK, COLOR_LIGHT } from 'components/ui';
+import { Button } from 'components/ui/form';
 
 import styles from './accountSwitcher.scss';
 import messages from './AccountSwitcher.intl.json';
@@ -12,9 +13,9 @@ const accounts = {
     active: {id: 7, username: 'SleepWalker', email: 'danilenkos@auroraglobal.com'},
     available: [
         {id: 7, username: 'SleepWalker', email: 'danilenkos@auroraglobal.com'},
-        {id: 8, username: 'ErickSkrauch', email: 'erick@foo.bar'},
-        {id: 9, username: 'Ely-en', email: 'ely@-enfoo.bar'},
-        {id: 10, username: 'Ely-by', email: 'ely-by@foo.bar'},
+        {id: 8, username: 'ErickSkrauch', email: 'erickskrauch@yandex.ru'},
+        {id: 9, username: 'Ely-en', email: 'ely-en@ely.by'},
+        {id: 10, username: 'Ely-by', email: 'ely-pt@ely.by'},
     ]
 };
 
@@ -31,7 +32,7 @@ export default class AccountSwitcher extends Component {
             }))
         }),
         skin: PropTypes.oneOf(skins),
-        hightLightActiveAccount: PropTypes.bool, // whether active account should be expanded and shown on the top
+        highlightActiveAccount: PropTypes.bool, // whether active account should be expanded and shown on the top
         allowLogout: PropTypes.bool, // whether to show logout icon near each account
         allowAdd: PropTypes.bool // whether to show add account button
     };
@@ -60,12 +61,16 @@ export default class AccountSwitcher extends Component {
             )}>
                 {highlightActiveAccount ? (
                     <div className={styles.item}>
-                        <div className={styles.accountIcon}></div>
+                        <div className={classNames(
+                            styles.accountIcon,
+                            styles.activeAccountIcon,
+                            styles.accountIcon1
+                        )}></div>
                         <div className={styles.activeAccountInfo}>
                             <div className={styles.activeAccountUsername}>
                                 {accounts.active.username}
                             </div>
-                            <div className={styles.activeAccountEmail}>
+                            <div className={classNames(styles.accountEmail, styles.activeAccountEmail)}>
                                 {accounts.active.email}
                             </div>
                             <div className={styles.links}>
@@ -83,30 +88,47 @@ export default class AccountSwitcher extends Component {
                         </div>
                     </div>
                 ) : null}
-                {available.map((account) => (
-                    <div className={styles.item} key={account.id}>
-                        <div className="account-icon"></div>
-                        <div>
-                            <div>
-                                {account.username}
-                            </div>
-                            <div>
-                                {account.email}
-                            </div>
-                        </div>
+                {available.map((account, id) => (
+                    <div className={classNames(styles.item, styles.accountSwitchItem)} key={account.id}>
+                        <div className={classNames(
+                            styles.accountIcon,
+                            styles[`accountIcon${id % 7 + (highlightActiveAccount ? 2 : 1)}`]
+                        )}></div>
+
                         {allowLogout ? (
                             <div className={styles.logoutIcon}></div>
                         ) : (
                             <div className={styles.nextIcon}></div>
                         )}
+
+                        <div className={styles.accountInfo}>
+                            <div className={styles.accountUsername}>
+                                {account.username}
+                            </div>
+                            <div className={styles.accountEmail}>
+                                {account.email}
+                            </div>
+                        </div>
                     </div>
                 ))}
                 {allowAdd ? (
                     <div>
-                        <div>
-                            <span className={styles.addAccount}>+</span>
-                            <Message {...messages.addAccount} />
-                        </div>
+                        <Button
+                            color={COLOR_LIGHT}
+                            block
+                            small
+                            className={styles.addAccount}
+                            label={
+                                <Message {...messages.addAccount}>
+                                    {(message) =>
+                                        <span>
+                                            <div className={styles.addIcon} />
+                                            {message}
+                                        </span>
+                                    }
+                                </Message>
+                            }
+                        />
                     </div>
                 ) : null}
             </div>
diff --git a/src/components/accounts/accountSwitcher.scss b/src/components/accounts/accountSwitcher.scss
index 455ea61..6cd797a 100644
--- a/src/components/accounts/accountSwitcher.scss
+++ b/src/components/accounts/accountSwitcher.scss
@@ -1,82 +1,228 @@
 @import '~components/ui/colors.scss';
 @import '~components/ui/fonts.scss';
 
-$borderColor: #EEE;
+// TODO: эту константу можно заимпортить из panel.scss, но это приводит к странным ошибкам
+//@import '~components/ui/panel.scss';
+$bodyLeftRightPadding: 20px;
+
+$lightBorderColor: #EEE;
 
 .accountSwitcher {
-    background: #fff;
-    color: #444;
     text-align: left;
-    width: 205px;
+}
 
-    $border: 1px solid $borderColor;
-    border-left: $border;
-    border-right: $border;
+.accountInfo {
+
+}
+
+.accountUsername {
+    line-height: normal; // button style override
+}
+
+.accountEmail {
+    line-height: normal; // button style override
+    font-family: $font-family-base; // button style override
 }
 
 .lightAccountSwitcher {
     background: #fff;
+    color: #444;
+    width: 205px;
+
+    $border: 1px solid $lightBorderColor;
+    border-left: $border;
+    border-right: $border;
+    border-bottom: 7px solid darker($green);
+
+    .item {
+        padding: 15px;
+        border-bottom: 1px solid $lightBorderColor;
+    }
+
+    .accountSwitchItem {
+        cursor: pointer;
+        transition: .25s;
+
+        &:hover {
+            background-color: $lightButtonLight;
+        }
+
+        &:active {
+            background-color: $lightButtonDark;
+        }
+    }
+
+    .accountIcon {
+        font-size: 27px;
+        width: 20px;
+        text-align: center;
+    }
+
+    .activeAccountIcon {
+        font-size: 40px;
+    }
+
+    .activeAccountInfo {
+        margin-left: 29px;
+    }
+
+    .activeAccountUsername {
+        font-size: 20px;
+        line-height: normal; // button style override
+        color: $green;
+    }
+
+    .activeAccountEmail {
+    }
+
+    .links {
+        margin-top: 6px;
+    }
+
+    .link {
+        line-height: normal; // button style override
+        font-size: 12px; // button style override
+        margin-bottom: 3px;
+
+        &:last-of-type {
+            margin-bottom: 0;
+        }
+
+        a {
+            color: #666;
+            font-size: 12px;
+            border-bottom: 1px dotted #666;
+            text-decoration: none;
+            transition: .25s;
+
+            &:hover {
+                border-bottom-color: #aaa;
+                color: #777;
+            }
+        }
+    }
+
+    .accountInfo {
+        margin-left: 29px;
+        margin-right: 25px;
+    }
+
+    .accountUsername {
+        color: #666;
+        font-size: 14px;
+    }
+
+    .accountEmail {
+        font-size: 10px;
+        color: #999;
+    }
+
+    .addAccount {
+    }
 }
 
 .darkAccountSwitcher {
     background: $black;
-}
 
-.item {
-    padding: 15px;
-    border-bottom: 1px solid $borderColor;
+    $border: 1px solid lighter($black);
+
+    .item {
+        padding: 15px 20px;
+        border-top: 1px solid lighter($black);
+        transition: .25s;
+        cursor: pointer;
+
+        &:hover {
+            background-color: lighter($black);
+        }
+
+        &:active {
+            background-color: darker($black);
+        }
+
+        &:last-of-type {
+            border-bottom: $border;
+        }
+    }
+
+    .accountIcon {
+        font-size: 35px;
+    }
+
+    .accountInfo {
+        margin-left: 30px;
+        margin-right: 26px;
+    }
+
+    .accountUsername {
+        color: #fff;
+    }
+
+    .accountEmail {
+        color: #666;
+        font-size: 12px;
+    }
 }
 
 .accountIcon {
     composes: minecraft-character from 'components/ui/icons.scss';
 
-    font-size: 40px;
-    color: $green;
     float: left;
-}
 
-.activeAccountInfo {
-    margin-left: 29px;
-}
-
-.activeAccountUsername {
-    font-size: 20px;
-    line-height: normal; // button style override
-    color: $green;
-}
-
-.activeAccountEmail {
-    font-size: 10px;
-    color: #999;
-
-    line-height: normal; // button style override
-    font-family: $font-family-base; // button style override
-}
-
-.links {
-    margin-top: 6px;
-}
-
-.link {
-    line-height: normal; // button style override
-    font-size: 12px; // button style override
-    margin-bottom: 3px;
-
-    &:last-of-type {
-        margin-bottom: 0;
+    &1 {
+        color: $green;
     }
 
-    a {
-        color: #666;
-        font-size: 12px;
-        border-bottom: 1px dotted #666;
-        text-decoration: none;
-        transition: .25s;
+    &2 {
+        color: $blue;
+    }
 
-        &:hover {
-            border-bottom-color: #777;
-            color: #777;
-        }
+    &3 {
+        color: $violet;
+    }
+
+    &4 {
+        color: $orange;
+    }
+
+    &5 {
+        color: $dark_blue;
+    }
+
+    &6 {
+        color: $light_violet;
+    }
+
+    &7 {
+        color: $red;
+    }
+}
+
+.addIcon {
+    composes: plus from 'components/ui/icons.scss';
+
+    color: $green;
+    position: relative;
+    bottom: 1px;
+    margin-right: 3px;
+}
+
+.nextIcon {
+    composes: arrowRight from 'components/ui/icons.scss';
+
+    position: relative;
+    float: right;
+
+    font-size: 24px;
+    color: #4E4E4E;
+    line-height: 35px;
+    left: 0;
+
+    transition: color .25s, left .5s;
+
+    .item:hover & {
+        color: #aaa;
+        left: 5px;
     }
 }
 
@@ -84,10 +230,11 @@ $borderColor: #EEE;
     composes: exit from 'components/ui/icons.scss';
 
     color: #cdcdcd;
-}
+    float: right;
+    line-height: 27px;
+    transition: .25s;
 
-.nextIcon {
-    composes: arrowRight from 'components/ui/icons.scss';
-
-    color: #cdcdcd;
+    &:hover {
+        color: #777;
+    }
 }
diff --git a/src/components/auth/chooseAccount/ChooseAccount.jsx b/src/components/auth/chooseAccount/ChooseAccount.jsx
index 1c95553..b220f7d 100644
--- a/src/components/auth/chooseAccount/ChooseAccount.jsx
+++ b/src/components/auth/chooseAccount/ChooseAccount.jsx
@@ -9,4 +9,3 @@ export default factory({
         label: messages.addAccount
     }
 });
-
diff --git a/src/components/auth/chooseAccount/ChooseAccountBody.jsx b/src/components/auth/chooseAccount/ChooseAccountBody.jsx
index 53415dd..a09f95d 100644
--- a/src/components/auth/chooseAccount/ChooseAccountBody.jsx
+++ b/src/components/auth/chooseAccount/ChooseAccountBody.jsx
@@ -21,7 +21,7 @@ export default class ChooseAccountBody extends BaseAuthBody {
             <div>
                 {this.renderErrors()}
 
-                <div>
+                <div className={styles.description}>
                     <Message {...messages.description} values={{
                         appName: <span className={styles.appName}>{client.name}</span>
                     }} />
diff --git a/src/components/auth/chooseAccount/chooseAccount.scss b/src/components/auth/chooseAccount/chooseAccount.scss
index 7c652e5..be1319a 100644
--- a/src/components/auth/chooseAccount/chooseAccount.scss
+++ b/src/components/auth/chooseAccount/chooseAccount.scss
@@ -1,4 +1,21 @@
+//@import '~components/ui/panel.scss';
+// TODO: эту константу можно заимпортить из panel.scss, но это приводит к странным ошибкам
+$bodyLeftRightPadding: 20px;
+
+//@import '~components/ui/fonts.scss';
+// TODO: эту константу можно заимпортить из fonts.scss, но это приводит к странным ошибкам
+$font-family-title: 'Roboto Condensed', Arial, sans-serif;
+
 .accountSwitcherContainer {
+    margin-left: -$bodyLeftRightPadding;
+    margin-right: -$bodyLeftRightPadding;
+}
+
+.description {
+    font-family: $font-family-title;
+    margin: 5px 0 19px;
+    line-height: 1.4;
+    font-size: 16px;
 }
 
 .appName {
diff --git a/src/components/langMenu/langMenu.scss b/src/components/langMenu/langMenu.scss
index 45321d8..4f37506 100644
--- a/src/components/langMenu/langMenu.scss
+++ b/src/components/langMenu/langMenu.scss
@@ -56,7 +56,7 @@
     transition: .2s;
 
     &:hover {
-        background: #f5f5f5;
+        background: $lightButtonLight;
         color: #262626;
     }
 
diff --git a/src/components/ui/buttons.scss b/src/components/ui/buttons.scss
index 7f4b925..e68b3e0 100644
--- a/src/components/ui/buttons.scss
+++ b/src/components/ui/buttons.scss
@@ -42,7 +42,6 @@
     }
 }
 
-// TODO: не уверен на счёт этого класса. Мб может лучше добавить это как класс-модификатор для .button?
 .smallButton {
     composes: button;
 
@@ -52,20 +51,23 @@
     line-height: 30px;
 }
 
-.black {
+.light {
     composes: button;
 
-    background-color: $black;
+    background-color: #fff;
+    color: #444;
 
     &:hover {
-        background-color: $black-button-light;
+        color: #262626;
+        background-color: $lightButtonLight;
     }
 
     &:active {
-        background-color: $black-button-dark;
+        background-color: $lightButtonDark;
     }
 }
 
+@include button-theme('black', $black);
 @include button-theme('blue', $blue);
 @include button-theme('green', $green);
 @include button-theme('orange', $orange);
diff --git a/src/components/ui/colors.scss b/src/components/ui/colors.scss
index 8d2cca5..1020f0b 100644
--- a/src/components/ui/colors.scss
+++ b/src/components/ui/colors.scss
@@ -10,8 +10,8 @@ $light: #ebe8e1;
 $black: #232323;
 
 $defaultButtonTextColor : #fff;
-$black-button-light: #392f2c;
-$black-button-dark: #1e0b11;
+$lightButtonLight: #f5f5f5;
+$lightButtonDark: #f5f5f5; // TODO: найти оптимальный цвет для прожатого состояния
 
 @function darker($color) {
     $elyColorsMap : (
diff --git a/src/components/ui/form/Button.jsx b/src/components/ui/form/Button.jsx
index 449d30a..245ca24 100644
--- a/src/components/ui/form/Button.jsx
+++ b/src/components/ui/form/Button.jsx
@@ -19,7 +19,9 @@ export default class Button extends FormComponent {
             PropTypes.string
         ]).isRequired,
         block: PropTypes.bool,
-        color: PropTypes.oneOf(colors)
+        small: PropTypes.bool,
+        color: PropTypes.oneOf(colors),
+        className: PropTypes.string
     };
 
     static defaultProps = {
@@ -27,7 +29,7 @@ export default class Button extends FormComponent {
     };
 
     render() {
-        const { color, block, small } = this.props;
+        const { color, block, small, className } = this.props;
 
         const props = omit(this.props, Object.keys(Button.propTypes));
 
@@ -37,7 +39,7 @@ export default class Button extends FormComponent {
             <button className={classNames(buttons[color], {
                 [buttons.block]: block,
                 [buttons.smallButton]: small
-            })}
+            }, className)}
                 {...props}
             >
                 {label}
diff --git a/src/components/ui/index.js b/src/components/ui/index.js
index 09a786d..2e02942 100644
--- a/src/components/ui/index.js
+++ b/src/components/ui/index.js
@@ -8,6 +8,8 @@ export const COLOR_VIOLET = 'violet';
 export const COLOR_LIGHT_VIOLET = 'lightViolet';
 export const COLOR_ORANGE = 'orange';
 export const COLOR_RED = 'red';
+export const COLOR_BLACK = 'black';
+export const COLOR_LIGHT = 'light';
 
 export const colors = [
     COLOR_GREEN,
@@ -16,7 +18,9 @@ export const colors = [
     COLOR_VIOLET,
     COLOR_LIGHT_VIOLET,
     COLOR_ORANGE,
-    COLOR_RED
+    COLOR_RED,
+    COLOR_BLACK,
+    COLOR_LIGHT
 ];
 
 export const skins = [SKIN_DARK, SKIN_LIGHT];
diff --git a/src/components/userbar/loggedInPanel.scss b/src/components/userbar/loggedInPanel.scss
index 69fb816..54c00e6 100644
--- a/src/components/userbar/loggedInPanel.scss
+++ b/src/components/userbar/loggedInPanel.scss
@@ -41,7 +41,7 @@
 .accountSwitcherContainer {
     position: absolute;
     top: 100%;
-    right: 0;
+    right: -2px;
     cursor: auto;
 
     display: none;
diff --git a/src/icons/webfont/plus.svg b/src/icons/webfont/plus.svg
new file mode 100644
index 0000000..878154f
--- /dev/null
+++ b/src/icons/webfont/plus.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<svg version="1.2" baseProfile="tiny" id="&#x421;&#x43B;&#x43E;&#x439;_1"
+	 xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px" width="17px" height="19px"
+	 viewBox="0 0 17 19">
+<polygon fill="#FFFFFF" points="17,11.93 10.927,11.93 10.927,18 6.073,18 6.073,11.93 0,11.93 0,7.064 6.073,7.064 6.073,1 
+	10.927,1 10.927,7.064 17,7.064 "/>
+</svg>