diff --git a/src/common/NavBar/UserMenu/UserMenu.js b/src/common/NavBar/UserMenu/UserMenu.js
index 17ad64012..cb32bf1e6 100644
--- a/src/common/NavBar/UserMenu/UserMenu.js
+++ b/src/common/NavBar/UserMenu/UserMenu.js
@@ -1,17 +1,21 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import Icon from 'stremio-icons/dom';
+import { Popup } from 'stremio-common';
 import styles from './styles';
 
-class UserMenu extends Component {
-    open = () => {
-
-    }
-
+class UserMenu extends PureComponent {
     render() {
         return (
-            <button className={styles['menu-button']} onClick={this.open}>
-                <Icon className={styles['user-icon']} icon={'ic_user'} />
-            </button>
+            <Popup>
+                <Popup.Label>
+                    <button className={styles['popup-label-container']}>
+                        <Icon className={styles['user-icon']} icon={'ic_user'} />
+                    </button>
+                </Popup.Label>
+                <Popup.Menu width={300}>
+                    <div style={{ background: 'red', width: '100%', height: 300 }}>kopele</div>
+                </Popup.Menu>
+            </Popup>
         );
     }
 }
diff --git a/src/common/NavBar/UserMenu/styles.less b/src/common/NavBar/UserMenu/styles.less
index 9df8322b5..729ab26ae 100644
--- a/src/common/NavBar/UserMenu/styles.less
+++ b/src/common/NavBar/UserMenu/styles.less
@@ -1,6 +1,9 @@
-.menu-button {
+.popup-label-container {
     height: 44px;
     width: 44px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     background-color: transparent;
     .user-icon {
         width: 40%;