diff --git a/images/anonymous.png b/images/anonymous.png
new file mode 100644
index 000000000..0b16120d4
Binary files /dev/null and b/images/anonymous.png differ
diff --git a/src/common/UserPanel/UserPanel.js b/src/common/UserPanel/UserPanel.js
index 0cf73f0a1..695a765ae 100644
--- a/src/common/UserPanel/UserPanel.js
+++ b/src/common/UserPanel/UserPanel.js
@@ -1,53 +1,54 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Icon, { dataUrl as iconDataUrl } from 'stremio-icons/dom';
-import colors from 'stremio-colors';
+import Icon from 'stremio-icons/dom';
 import styles from './styles';
 
-const renderEmail = (email) => {
+const renderAvatar = (avatar, email) => {
     if (email.length === 0) {
-        return null;
+        return (
+            <div style={{ backgroundImage: `url('/images/anonymous.png')` }} className={styles['avatar']} />
+        );
     }
 
     return (
-        <div className={styles['email']}>{email}</div>
+        <div style={{ backgroundImage: `url('${avatar}'), url('/images/default_avatar.png') ` }} className={styles['avatar']} />
+    );
+}
+
+const renderEmail = (email) => {
+    return (
+        <div className={styles['email']}>{email.length === 0 ? 'Anonymous' : email}</div>
     );
 }
 
 const UserPanel = (props) => {
-    const placeholderIconUrl = iconDataUrl({ icon: 'ic_user', fill: colors.accent });
-    const avatarStyle = {
-        backgroundImage: `url('${props.avatar}'), url('${placeholderIconUrl}')`
-    };
-
     return (
         <div className={styles['user-panel']}>
             <div className={styles['user-info']}>
-                <div style={avatarStyle} className={styles['avatar']} />
+                {renderAvatar(props.avatar, props.email)}
                 {renderEmail(props.email)}
-                <div onClick={props.logout} className={styles['log-out']}>Log out</div>
+                <div onClick={props.email.length === 0 ? props.login : props.logout} className={styles['logging']}>{props.email.length === 0 ? 'Log in' : 'Log out'}</div>
             </div>
+            <div className={styles['separator']}></div>
             <div onClick={props.resizeWindow} className={styles['option']}>
                 <Icon className={styles['icon']} icon={'ic_fullscreen'} />Fullscreen mode
             </div>
-            <div className={styles['options']}>
-                <a href={'#settings'} className={styles['option']}>
-                    <Icon className={styles['icon']} icon={'ic_settings'} />Settings
+            <div className={styles['separator']}></div>
+            <a href={'#settings'} className={styles['option']}>
+                <Icon className={styles['icon']} icon={'ic_settings'} />Settings
                 </a>
-                <a href={'#addons'} className={styles['option']}>
-                    <Icon className={styles['icon']} icon={'ic_addons'} />Add-ons
+            <a href={'#addons'} className={styles['option']}>
+                <Icon className={styles['icon']} icon={'ic_addons'} />Add-ons
                 </a>
-                <div onClick={props.playMagnetLink} className={styles['option']}>
-                    <Icon className={styles['icon']} icon={'ic_magnet'} />Play Magnet Link
+            <div onClick={props.playMagnetLink} className={styles['option']}>
+                <Icon className={styles['icon']} icon={'ic_magnet'} />Play Magnet Link
                 </div>
-                <a href={'https://stremio.zendesk.com'} target={'_blank'} className={styles['option']}>
-                    <Icon className={styles['icon']} icon={'ic_help'} />Help & Feedback
+            <a href={'https://stremio.zendesk.com'} target={'_blank'} className={styles['option']}>
+                <Icon className={styles['icon']} icon={'ic_help'} />Help & Feedback
                 </a>
-            </div>
-            <div className={styles['footer']}>
-                <a href={'https://www.stremio.com/tos'} target={'_blank'} className={styles['label']}>Terms of Service</a>
-                <a href={'https://www.stremio.com'} target={'_blank'} className={styles['label']}>About Stremio</a>
-            </div>
+            <div className={styles['separator']}></div>
+            <a href={'https://www.stremio.com/tos'} target={'_blank'} className={styles['option']}>Terms of Service</a>
+            <a href={'https://www.stremio.com'} target={'_blank'} className={styles['option']}>About Stremio</a>
         </div>
     );
 }
@@ -55,6 +56,7 @@ const UserPanel = (props) => {
 UserPanel.propTypes = {
     avatar: PropTypes.string.isRequired,
     email: PropTypes.string.isRequired,
+    login: PropTypes.func,
     logout: PropTypes.func,
     resizeWindow: PropTypes.func,
     playMagnetLink: PropTypes.func,
diff --git a/src/common/UserPanel/styles.less b/src/common/UserPanel/styles.less
index 519335852..c09d04bbc 100644
--- a/src/common/UserPanel/styles.less
+++ b/src/common/UserPanel/styles.less
@@ -22,20 +22,12 @@
         }
     }
 
-    .options {
-        padding: @spacing 0;
+    .label {
+        padding: ceil((@spacing * 0.6)) (2 * ceil((@spacing * 0.6)));
     }
 
-    .footer {
-        padding: @spacing 0;
-
-        .label {
-            padding: ceil((@spacing * 0.6)) (2 * ceil((@spacing * 0.6)));
-        }
-    }
-
-    >:not(:last-child) {
-        border-bottom-width: 1px;
+    .separator {
+        height: 1px;
     }
 }
 
@@ -51,16 +43,17 @@
         .avatar {
             grid-area: avatar;
             border-radius: 50%;
-            background-size: cover, auto;
+            background-size: cover;
             background-position: center;
             background-repeat: no-repeat;
         }
 
         .email {
             grid-area: email;
-            align-self: center;
+            display: flex;
+            align-items: center;
             color: @colorwhite;
-            margin-left: @spacing;
+            padding-left: @spacing;
             overflow: hidden;
             white-space: pre;
             text-overflow: ellipsis;
@@ -68,9 +61,13 @@
 
         .log-out {
             grid-area: logout;
-            align-self: center;
+            display: flex;
+            align-items: center;
             color: @colorneutral;
-            margin-left: @spacing;
+            padding-left: @spacing;
+            overflow: hidden;
+            white-space: pre;
+            text-overflow: ellipsis;
 
             &:hover {
                 cursor: pointer;
@@ -95,23 +92,7 @@
         }
     }
 
-    .footer {
-        display: flex;
-        flex-direction: column;
-
-        .label {
-            color: @colorwhite80;
-
-            &:hover {
-                cursor: pointer;
-                color: @colorwhite;
-                background-color: @coloraccent20;
-            }
-        }
-    }
-
-    >:not(:last-child) {
-        border-bottom-style: solid;
-        border-bottom-color: @colorneutral;
+    .separator {
+        background-color: @colorneutral;
     }
 }
\ No newline at end of file
diff --git a/stories/index.stories.js b/stories/index.stories.js
index b19384377..8d26e8fbe 100644
--- a/stories/index.stories.js
+++ b/stories/index.stories.js
@@ -211,7 +211,22 @@ storiesOf('Stream', module)
     ));
 
 storiesOf('UserPanel', module)
-    .add('user panel', () => (
+    .add('anonymous', () => (
+        <div style={storyStyle} className={appStyles['app']}>
+            <UserPanel
+                resizeWindow={function() { alert('asdas') }}
+            />
+        </div>
+    ))
+    .add('without avatar', () => (
+        <div style={storyStyle} className={appStyles['app']}>
+            <UserPanel
+                resizeWindow={function() { alert('asdas') }}
+                email={'animals@mail.com'}
+            />
+        </div>
+    ))
+    .add('with avatar', () => (
         <div style={storyStyle} className={appStyles['app']}>
             <UserPanel
                 resizeWindow={function() { alert('asdas') }}