diff --git a/src/routes/Settings/Settings.js b/src/routes/Settings/Settings.js
index abcfcf59e..20aee78c8 100644
--- a/src/routes/Settings/Settings.js
+++ b/src/routes/Settings/Settings.js
@@ -1,9 +1,9 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Icon from 'stremio-icons/dom';
-import { Input, Popup, Checkbox } from 'stremio/common';
-import classnames from 'classnames';
-import styles from './styles';
+const React = require('react');
+const PropTypes = require('prop-types');
+const classnames = require('classnames');
+const { TextInput, Button, Dropdown, Checkbox, MainNavBar } = require('stremio/common');
+const styles = require('./styles');
+const Input = TextInput
 
 const SECTIONS_ORDER = {
     'General': 1,
@@ -11,7 +11,7 @@ const SECTIONS_ORDER = {
     'Streaming': 3
 };
 
-class Settings extends Component {
+class Settings extends React.Component {
     constructor(props) {
         super(props);
 
@@ -128,24 +128,6 @@ class Settings extends Component {
         });
     }
 
-    activate = (id) => {
-        this.setState(({ inputs }) => ({
-            inputs: inputs.map((input) => ({
-                ...input,
-                active: id === input.id
-            }))
-        }));
-    }
-
-    deactivate = (id) => {
-        this.setState(({ inputs }) => ({
-            inputs: inputs.map((input) => ({
-                ...input,
-                active: id === input.id ? false : input.active
-            }))
-        }));
-    }
-
     toggleCheckbox = (id) => {
         this.setState(({ inputs }) => ({
             inputs: inputs.map((input) => ({
@@ -162,41 +144,29 @@ class Settings extends Component {
             return {
                 inputs: inputs.map((input) => ({
                     ...input,
-                    value: data.id === input.id ? data.option : input.value,
-                    active: false
+                    value: data.name === input.id ? data.value : input.value,
                 }))
             }
         })
     }
 
-    renderPopup({ ref, activate, deactivate, active, value, id, options, onClick }) {
+    renderDropdown({ value, id, options, onClick}) {
+        options = options.map(o=>({value: o, label: o}))
         return (
-            <Popup ref={ref} className={'popup-container'} onOpen={activate.bind(null, id)} onClose={deactivate.bind(null, id)}>
-                <Popup.Label>
-                    <Input className={classnames(styles['bar-button'], { 'active': active })} type={'button'}>
-                        <div className={styles['value']}>{value}</div>
-                        <Icon className={styles['icon']} icon={'ic_arrow_down'} />
-                    </Input>
-                </Popup.Label>
-                <Popup.Menu>
-                    <div className={styles['popup-content']}>
-                        {options.map((option) =>
-                            <div key={option} className={classnames(styles['option'], { [styles['selected']]: value === option })} data-option={option} data-id={id} onClick={onClick}>{option}</div>
-                        )}
-                    </div>
-                </Popup.Menu>
-            </Popup>
+            <Dropdown options={options} selected={[value]} name={id} key={id} className={styles['dropdown']} onSelect={onClick} />
         );
     }
 
     render() {
         return (
+            <div className={styles['settings-parent-container']}>
+            <MainNavBar className={styles['nav-bar']} />
             <div className={styles['settings-container']}>
                 <div className={styles['side-menu']}>
                     {this.state.sections.map((section) =>
-                        <Input key={section.id} className={classnames(styles['section-label'], { [styles['selected']]: this.state.selectedSectionId === section.id })} type={'button'} data-section={section.id} onClick={this.changeSection}>
+                        <Button key={section.id} className={classnames(styles['section-label'], { [styles['selected']]: this.state.selectedSectionId === section.id })} type={'button'} data-section={section.id} onClick={this.changeSection}>
                             {section.id}
-                        </Input>
+                        </Button>
                     )}
                 </div>
                 <div ref={this.scrollContainerRef} className={styles['scroll-container']} onScroll={this.onScroll}>
@@ -223,10 +193,7 @@ class Settings extends Component {
                                         return (
                                             <div key={input.id} className={classnames(styles['input-container'], styles['select-container'])}>
                                                 {input.header ? <div className={styles['input-header']}>{input.header}</div> : null}
-                                                {this.renderPopup({
-                                                    ref: input.ref,
-                                                    activate: this.activate,
-                                                    deactivate: this.deactivate,
+                                                {this.renderDropdown({
                                                     active: input.active,
                                                     id: input.id,
                                                     value: input.value,
@@ -239,17 +206,18 @@ class Settings extends Component {
                                         return (
                                             <div key={input.id} className={classnames(styles['input-container'], styles['link-container'])}>
                                                 {input.header ? <div className={styles['input-header']}>{input.header}</div> : null}
-                                                <Input ref={input.ref} className={styles['link']} type={input.type} href={input.href} target={'_blank'}>{input.label}</Input>
+                                                <Button ref={input.ref} className={styles['link']} type={input.type} href={input.href} target={'_blank'}>
+                                                    <div className={styles['label']}>{input.label}</div>
+                                                </Button>
                                             </div>
                                         );
                                     } else if (input.type === 'button') {
                                         return (
                                             <div key={input.id} className={classnames(styles['input-container'], styles['button-container'])}>
                                                 {input.header ? <div className={styles['input-header']}>{input.header}</div> : null}
-                                                <Input ref={input.ref} className={styles['button']} type={input.type}>
-                                                    {input.icon ? <Icon className={styles['icon']} icon={input.icon} /> : null}
+                                                <Button ref={input.ref} className={styles['button']} type={input.type}>
                                                     <div className={styles['label']}>{input.label}</div>
-                                                </Input>
+                                                </Button>
                                             </div>
                                         );
                                     } else if (input.type === 'checkbox') {
@@ -266,7 +234,7 @@ class Settings extends Component {
                                             <div key={input.id} className={classnames(styles['input-container'], styles['text-container'])}>
                                                 {input.header ? <div className={styles['input-header']}>{input.header}</div> : null}
                                                 <div className={styles['text']}>
-                                                    {input.icon ? <Icon className={styles[input.icon === 'ic_x' ? 'x-icon' : 'icon']} icon={input.icon} /> : null}
+                                                    {/* {input.icon ? <Icon className={styles[input.icon === 'ic_x' ? 'x-icon' : 'icon']} icon={input.icon} /> : null} */}
                                                     <div className={styles['label']}>{input.label}</div>
                                                 </div>
                                             </div>
@@ -284,6 +252,7 @@ class Settings extends Component {
                     )}
                 </div>
             </div>
+            </div>
         );
     }
 }
@@ -309,4 +278,4 @@ Settings.defaultProps = {
     settingsConfiguration: []
 }
 
-export default Settings;
+module.exports = Settings;
diff --git a/src/routes/Settings/index.js b/src/routes/Settings/index.js
index 6a02e4e24..0e6819989 100644
--- a/src/routes/Settings/index.js
+++ b/src/routes/Settings/index.js
@@ -1,3 +1,3 @@
-import Settings from './Settings';
+const Settings = require('./Settings');
 
-export default Settings;
+module.exports = Settings;
diff --git a/src/routes/Settings/styles.less b/src/routes/Settings/styles.less
index 9b7f6e72b..8e3d92883 100644
--- a/src/routes/Settings/styles.less
+++ b/src/routes/Settings/styles.less
@@ -4,280 +4,294 @@
     font-size: 14px;
 }
 
-.settings-container {
+.settings-parent-container {
+    display: flex;
+    flex-direction: column;
     width: 100%;
     height: 100%;
-    display: flex;
-    flex-direction: row;
+    background-color: var(--color-background);
 
-    .side-menu {
-        padding: var(--spacing);
-        width: 17em;
-        display: flex;
-        flex-direction: column;
-        background-color: var(--color-backgroundlighter);
-
-        .section-label {
-            padding: var(--spacing);
-            font-size: 1.1em;
-            border: calc(var(--focusable-border-size) * 0.5) solid transparent;
-            color: var(--color-surfacelight);
-            cursor: pointer;
-
-            &.selected {
-                color: var(--color-surfacelighter);
-                background-color: var(--color-background);
-
-                &:hover {
-                    background-color: var(--color-background);
-                }
-            }
-
-            &:focus {
-                border-color: var(--color-surfacelighter);
-            }
-
-            &:hover {
-                color: var(--color-surfacelighter);
-                background-color: var(--color-surface20);
-                border-color: transparent;
-            }
-        }
+    .nav-bar {
+        flex: none;
+        align-self: stretch;
     }
 
-    .scroll-container {
-        padding: 0 calc(var(--spacing) * 2);
-        flex: 1;
-        overflow-y: auto;
+    .settings-container {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: row;
+        background-color: var(--color-backgroundlight);
 
-        .section {
-            padding: calc(var(--spacing) * 4) calc(var(--spacing) * 2);
+        .side-menu {
+            padding: var(--spacing);
+            width: 17em;
+            display: flex;
+            flex-direction: column;
+            background-color: var(--color-backgroundlighter);
 
-            .section-header {
-                margin: 0 calc(var(--spacing) * 1.5) calc(var(--spacing) * 1.5) calc(var(--spacing) * 1.5);
-                font-size: 2em;
-                color: var(--color-surfacelighter);
+            .section-label {
+                padding: var(--spacing);
+                font-size: 1.1em;
+                border: calc(var(--focusable-border-size) * 0.5) solid transparent;
+                color: var(--color-surfacelight);
+                cursor: pointer;
+
+                &.selected {
+                    color: var(--color-surfacelighter);
+                    background-color: var(--color-background);
+
+                    &:hover {
+                        background-color: var(--color-background);
+                    }
+                }
+
+                &:focus {
+                    border-color: var(--color-surfacelighter);
+                }
+
+                &:hover {
+                    color: var(--color-surfacelighter);
+                    background-color: var(--color-surface20);
+                    border-color: transparent;
+                }
             }
+        }
 
-            .input-container {
-                margin: calc(var(--spacing) * 1.5);
-                display: flex;
-                flex-direction: column;
+        .scroll-container {
+            padding: 0 calc(var(--spacing) * 2);
+            flex: 1;
+            overflow-y: auto;
 
-                .input-header {
-                    margin-bottom: calc(var(--spacing) * 0.5);
+            .section {
+                padding: calc(var(--spacing) * 4) calc(var(--spacing) * 2);
+
+                .section-header {
+                    margin: 0 calc(var(--spacing) * 1.5) calc(var(--spacing) * 1.5) calc(var(--spacing) * 1.5);
+                    font-size: 2em;
                     color: var(--color-surfacelighter);
                 }
 
-                &.user-container {
-                    flex-direction: row;
-                    align-items: center;
+                .input-container {
+                    margin: calc(var(--spacing) * 1.5);
+                    display: flex;
+                    flex-direction: column;
 
-                    .avatar {
-                        margin: 0 var(--spacing);
-                        width: 4.2em;
-                        height: 4.2em;
-                        border-radius: 50%;
-                        border: var(--focusable-border-size) solid var(--color-primary);
-                        background-size: cover;
-                        background-position: center;
-                        background-repeat: no-repeat;
-                    }
-
-                    .email {
+                    .input-header {
+                        margin-bottom: calc(var(--spacing) * 0.5);
                         color: var(--color-surfacelighter);
                     }
-                }
 
-                &.select-container {
-                    .bar-button {
-                        padding: calc(var(--spacing) * 0.5);
-                        width: var(--input-width);
-                        display: flex;
+                    &.user-container {
                         flex-direction: row;
                         align-items: center;
-                        justify-content: space-between;
-                        border: calc(var(--focusable-border-size) * 0.5) solid var(--color-primary);
-                        cursor: pointer;
 
-                        .value {
-                            width: 100%;
-                            color: var(--color-surface);
+                        .avatar {
+                            margin: 0 var(--spacing);
+                            width: 4.2em;
+                            height: 4.2em;
+                            border-radius: 50%;
+                            border: var(--focusable-border-size) solid var(--color-primary);
+                            background-size: cover;
+                            background-position: center;
+                            background-repeat: no-repeat;
                         }
 
-                        .icon {
-                            width: var(--spacing);
-                            height: var(--spacing);
-                            fill: var(--color-surface);
+                        .email {
+                            color: var(--color-surfacelighter);
                         }
+                    }
 
-                        &:focus {
-                            border-color: var(--color-surfacelighter);
-                        }
-
-                        &:hover {
-                            background-color: var(--color-backgroundlight);
+                    &.select-container {
+                        .bar-button {
+                            padding: calc(var(--spacing) * 0.5);
+                            width: var(--input-width);
+                            display: flex;
+                            flex-direction: row;
+                            align-items: center;
+                            justify-content: space-between;
+                            border: calc(var(--focusable-border-size) * 0.5) solid var(--color-primary);
+                            cursor: pointer;
 
                             .value {
-                                color: var(--color-surfacelighter);
+                                width: 100%;
+                                color: var(--color-surface);
                             }
 
                             .icon {
+                                width: var(--spacing);
+                                height: var(--spacing);
+                                fill: var(--color-surface);
+                            }
+
+                            &:focus {
+                                border-color: var(--color-surfacelighter);
+                            }
+
+                            &:hover {
+                                background-color: var(--color-backgroundlight);
+
+                                .value {
+                                    color: var(--color-surfacelighter);
+                                }
+
+                                .icon {
+                                    fill: var(--color-surfacelighter);
+                                }
+                            }
+
+                            &:global(.active) {
+                                background-color: var(--color-surfacelighter);
+
+                                .value {
+                                    color: var(--color-backgrounddarker);
+                                }
+
+                                .icon {
+                                    fill: var(--color-backgrounddarker);
+                                }
+                            }
+                        }
+                    }
+
+                    &.link-container {
+                        margin: var(--spacing) calc(var(--spacing) * 1.5);
+
+                        .link {
+                            display: block;
+                            color: var(--color-secondarylight);
+
+                            &:focus {
+                                color: var(--color-surface);
+                            }
+
+                            &:hover {
+                                color: var(--color-surfacelighter);
+                            }
+                        }
+                    }
+
+                    &.button-container {
+                        .button {
+                            padding: calc(var(--spacing) * 0.7);
+                            width: var(--input-width);
+                            min-height: calc(var(--input-width) * 0.09);
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            background-color: var(--color-primary);
+                            border: calc(var(--focusable-border-size) * 0.5) solid transparent;
+                            cursor: pointer;
+
+                            .icon {
+                                width: 1.4em;
+                                height: 100%;
+                                margin-right: calc(var(--spacing) * 0.5);
                                 fill: var(--color-surfacelighter);
                             }
-                        }
-
-                        &:global(.active) {
-                            background-color: var(--color-surfacelighter);
-
-                            .value {
-                                color: var(--color-backgrounddarker);
-                            }
-
-                            .icon {
-                                fill: var(--color-backgrounddarker);
-                            }
-                        }
-                    }
-                }
-
-                &.link-container {
-                    margin: var(--spacing) calc(var(--spacing) * 1.5);
-
-                    .link {
-                        display: block;
-                        color: var(--color-secondarylight);
-
-                        &:focus {
-                            color: var(--color-surface);
-                        }
-
-                        &:hover {
-                            color: var(--color-surfacelighter);
-                        }
-                    }
-                }
-
-                &.button-container {
-                    .button {
-                        padding: calc(var(--spacing) * 0.7);
-                        width: var(--input-width);
-                        min-height: calc(var(--input-width) * 0.09);
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        background-color: var(--color-primary);
-                        border: calc(var(--focusable-border-size) * 0.5) solid transparent;
-                        cursor: pointer;
-
-                        .icon {
-                            width: 1.4em;
-                            height: 100%;
-                            margin-right: calc(var(--spacing) * 0.5);
-                            fill: var(--color-surfacelighter);
-                        }
-
-                        .label {
-                            max-width: 30em;
-                            color: var(--color-surfacelighter);
-                        }
-
-                        &:focus {
-                            border-color: var(--color-surfacelighter);
-                        }
-
-                        &:hover {
-                            border-color: transparent;
-                            background-color: var(--color-primarylight);
-                        }
-                    }
-                }
-
-                &.checkbox-container {
-                    .checkbox {
-                        --icon-size: 1.2em;
-                        --icon-color: var(--color-surface);
-                        --icon-background-color: transparent;
-
-                        display: flex;
-                        flex-direction: row;
-                        align-items: center;
-                        cursor: pointer;
-
-                        .label {
-                            width: 100%;
-                            margin-left: 0.5em;
-                            color: var(--color-surfacelight);
-                        }
-
-                        &:global(.checked) {
-                            --icon-color: var(--color-surfacelight);
-                            --icon-background-color: var(--color-primary);
-                        }
-
-                        &:focus, &:hover {
-                            --icon-color: var(--color-surfacelighter);
 
                             .label {
+                                max-width: 30em;
+                                color: var(--color-surfacelighter);
+                            }
+
+                            &:focus {
+                                border-color: var(--color-surfacelighter);
+                            }
+
+                            &:hover {
+                                border-color: transparent;
+                                background-color: var(--color-primarylight);
+                            }
+                        }
+                    }
+
+                    &.checkbox-container {
+                        .checkbox {
+                            --icon-size: 1.2em;
+                            --icon-color: var(--color-surface);
+                            --icon-background-color: transparent;
+
+                            display: flex;
+                            flex-direction: row;
+                            align-items: center;
+                            cursor: pointer;
+
+                            .label {
+                                width: 100%;
+                                margin-left: 0.5em;
+                                color: var(--color-surfacelight);
+                            }
+
+                            &:global(.checked) {
+                                --icon-color: var(--color-surfacelight);
+                                --icon-background-color: var(--color-primary);
+                            }
+
+                            &:focus, &:hover {
+                                --icon-color: var(--color-surfacelighter);
+
+                                .label {
+                                    color: var(--color-surfacelighter);
+                                }
+                            }
+                        }
+                    }
+
+                    &.text-container {
+                        .text {
+                            display: flex;
+                            flex-direction: row;
+                            align-items: center;
+
+                            .icon {
+                                margin-right: calc(var(--spacing) * 0.5);
+                                width: var(--spacing);
+                                height: var(--spacing);
+                                fill: var(--color-signal5);
+                            }
+
+                            .x-icon {
+                                margin-right: calc(var(--spacing) * 0.5);
+                                width: var(--spacing);
+                                height: var(--spacing);
+                                fill: var(--color-signal2);
+                            }
+
+                            .label {
+                                width: 100%;
                                 color: var(--color-surfacelighter);
                             }
                         }
                     }
-                }
 
-                &.text-container {
-                    .text {
-                        display: flex;
-                        flex-direction: row;
-                        align-items: center;
+                    &.color-container {
+                        .color-picker {
+                            width: var(--input-width);
+                            height: calc(var(--input-width) * 0.08);
+                            border: calc(var(--focusable-border-size) * 0.5) solid transparent;
+                            cursor: pointer;
 
-                        .icon {
-                            margin-right: calc(var(--spacing) * 0.5);
-                            width: var(--spacing);
-                            height: var(--spacing);
-                            fill: var(--color-signal5);
-                        }
+                            &:focus {
+                                border-color: var(--color-surfacelighter);
+                            }
 
-                        .x-icon {
-                            margin-right: calc(var(--spacing) * 0.5);
-                            width: var(--spacing);
-                            height: var(--spacing);
-                            fill: var(--color-signal2);
-                        }
-
-                        .label {
-                            width: 100%;
-                            color: var(--color-surfacelighter);
+                            &:hover {
+                                border-color: transparent;
+                            }
                         }
                     }
                 }
 
-                &.color-container {
-                    .color-picker {
-                        width: var(--input-width);
-                        height: calc(var(--input-width) * 0.08);
-                        border: calc(var(--focusable-border-size) * 0.5) solid transparent;
-                        cursor: pointer;
-
-                        &:focus {
-                            border-color: var(--color-surfacelighter);
-                        }
-
-                        &:hover {
-                            border-color: transparent;
-                        }
-                    }
+                >:last-child {
+                    margin-bottom: 0;
                 }
             }
 
-            >:last-child {
-                margin-bottom: 0;
+            >:not(:last-child) {
+                border-bottom: calc(var(--focusable-border-size) * 0.5) solid var(--color-primary);
             }
         }
-
-        >:not(:last-child) {
-            border-bottom: calc(var(--focusable-border-size) * 0.5) solid var(--color-primary);
-        }
     }
 }