diff --git a/src/common/Checkbox/Checkbox.js b/src/common/Checkbox/Checkbox.js
index 707c30d6c..0a64306ed 100644
--- a/src/common/Checkbox/Checkbox.js
+++ b/src/common/Checkbox/Checkbox.js
@@ -1,5 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import Icon from 'stremio-icons/dom';
 import styles from './styles';
 
 class Checkbox extends Component {
@@ -8,26 +10,33 @@ class Checkbox extends Component {
             nextProps.enabled !== this.props.enabled;
     }
 
-    onPress = () => {
-        if (this.props.enabled && typeof this.props.onPress === 'function') {
-            this.props.onPress();
+    onClick = () => {
+        if (this.props.enabled && typeof this.props.onClick === 'function') {
+            this.props.onClick();
         }
     }
 
     render() {
         return (
-            <div className={styles.root} onClick={this.onPress} />
+            <div style={{height: this.props.iconHeight, width: this.props.iconWidth}} className={classnames(styles.root, this.props.checked ? styles['checkbox-checked'] : null, !this.props.enabled ? styles['checkbox-disabled'] : null)} onClick={this.onClick}>
+                <Icon style={{width: this.props.iconWidth}} className={classnames(styles['icon'], this.props.checked ? styles['checked'] : null)} icon={this.props.checked ? 'ic_check' : 'ic_box_empty'}></Icon>
+            </div>
         );
     }
 }
 
 Checkbox.propTypes = {
+    iconHeight: PropTypes.number,
+    iconWidth: PropTypes.number,
+    className: PropTypes.string,
     enabled: PropTypes.bool.isRequired,
     checked: PropTypes.bool.isRequired,
-    onPress: PropTypes.func
+    onClick: PropTypes.func
 };
+
 Checkbox.defaultProps = {
-    enabled: true
+    enabled: true,
+    checked: false
 };
 
 export default Checkbox;
diff --git a/src/common/Checkbox/styles.less b/src/common/Checkbox/styles.less
index df379745a..3f968dda2 100644
--- a/src/common/Checkbox/styles.less
+++ b/src/common/Checkbox/styles.less
@@ -1,6 +1,26 @@
 @import 'stremio-colors';
+
 .root {
-    width: 30px;
-    height: 30px;
-    background-color: @colorprimlight60;
+    margin: 30px;
+    display: flex;
+    cursor: pointer;
+
+    &.checkbox-checked {
+        border: 2px solid @colorprimlight;
+        background-color: @colorprimlight;
+    }
+
+    &.checkbox-disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    .icon {
+        margin: auto;
+        fill: @colorwhite60;
+
+        &.checked {
+            fill: @colorwhite;
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/routes/Settings/Settings.js b/src/routes/Settings/Settings.js
index 9f50fd060..e27c7a7f3 100644
--- a/src/routes/Settings/Settings.js
+++ b/src/routes/Settings/Settings.js
@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Icon from 'stremio-icons/dom';
 import classnames from 'classnames';
+import Icon from 'stremio-icons/dom';
 import styles from './styles';
 
 const SETTINGS_MENUS = {
@@ -26,42 +25,42 @@ class Settings extends Component {
     }
 
     shouldComponentUpdate(nextState) {
-        return nextState.selectedMenu != this.state.selectedMenu;
+        return nextState.selectedMenu !== this.state.selectedMenu;
     }
 
     renderPlayerSettings = () => {
         const preferences = ['Hardware-accelerated decoding', 'Auto-play next episode', 'Data saver'];
 
         return (
-            <div className={styles['player-preferences-menu']}>
-                {preferences.map((item, key) =>
-                    <label key={key} className={styles['preferences-section']}>
-                        <input type='checkbox' className={styles['default-checkbox']} />
-                        <span className={styles['preference']}>{item}</span>
-                        <p className={styles['checkbox']}>
-                            <Icon className={styles['checkmark']} icon={'ic_check'} />
-                        </p>
-                    </label>
-                )}
+            <div className={styles['settings-list']}>
+                <div className={styles['settings-section']}>
+                    {preferences.map((preference) =>
+                        <label key={preference} className={styles['toggle-option']}>
+                            <input type={'checkbox'} className={styles['default-checkbox']} />
+                            <span className={styles['preference']}>{preference}</span>
+                            <p className={styles['checkbox']}>
+                                <Icon className={styles['checkmark']} icon={'ic_check'} />
+                            </p>
+                        </label>
+                    )}
+                </div>
             </div>
         );
     }
 
     renderLanguageSettings = () => {
         return (
-            <div className={styles['language-menu']}>
-                <div className={styles['language-section']}>
-                    <span className={styles['headline']}>INTERFACE LANGUAGE</span>
-                    <div className={styles['selected-language']}>English
-                        <Icon className={styles['arrow-down']} icon={'ic_arrow_down'} />
-                    </div>
-                </div>
-                <div className={styles['language-section']}>
-                    <span className={styles['headline']}>DEFAULT SUBTITLES LANGUAGE</span>
-                    <div className={styles['selected-language']}>Portugese - BR
-                        <Icon className={styles['arrow-down']} icon={'ic_arrow_down'} />
-                    </div>
-                </div>
+            <div className={styles['settings-list']}>
+                <select className={styles['settings-section']}>
+                    <option value={'English'}>English</option>
+                    <option value={'Portugese'}>Portugese</option>
+                    <option value={'Deutch'}>Deutch</option>
+                </select>
+                <select className={styles['settings-section']}>
+                    <option value={'English'}>English</option>
+                    <option value={'Portugese'}>Portugese</option>
+                    <option value={'Deutch'}>Deutch</option>
+                </select>
             </div>
         );
     }
@@ -79,15 +78,15 @@ class Settings extends Component {
 
     render() {
         return (
-            <div className={styles['settings']}>
+            <div className={styles['settings-container']}>
                 <div className={styles['side-menu']}>
                     {Object.keys(SETTINGS_MENUS).map((menu) =>
-                        <div key={menu} className={classnames(styles['menu-option'], this.state.selectedMenu === SETTINGS_MENUS[menu] ? styles['menu-option-selected'] : null)} onClick={() => this.changeSelectedMenu(SETTINGS_MENUS[menu])}>{menu}</div>
+                        <div key={menu} className={classnames(styles['menu-option'], this.state.selectedMenu === SETTINGS_MENUS[menu] ? styles['selected'] : null)} onClick={() => this.changeSelectedMenu(SETTINGS_MENUS[menu])}>{menu}</div>
                     )}
                 </div>
                 {this.renderSelectedMenu()}
             </div>
-        )
+        );
     }
 }
 
diff --git a/src/routes/Settings/styles.less b/src/routes/Settings/styles.less
index 297e51b55..7caab927f 100644
--- a/src/routes/Settings/styles.less
+++ b/src/routes/Settings/styles.less
@@ -1,103 +1,98 @@
 @import 'stremio-colors';
-.settings {
+
+.settings-container {
     height: 100%;
+    width: 100%;
     display: flex;
     color: @colorwhite60;
     font-family: LatoLight;
+
     .side-menu {
         width: 240px;
         padding: 20px;
         display: flex;
-        font-size: 14px;
         flex-direction: column;
+        font-size: 14px;
         background: @colordarkest;
+
         .menu-option {
             padding: 14px;
             font-weight: 600;
-            &:hover {
-                cursor: pointer;
-                color: @colorwhite;
-                background: @colorglass;
-            }
-            &.menu-option-selected {
+
+            &:hover, &.selected {
                 cursor: pointer;
                 color: @colorwhite;
                 background: @colorglass;
             }
         }
     }
-    .player-preferences-menu {
-        height: 145px;
+
+    .settings-list {
+        width: 280px;
         margin: 40px 50px;
-        border-bottom: 1px solid @colormedium;
-        .preferences-section {
+
+        .settings-section {
             display: flex;
-            cursor: pointer;
-            margin-bottom: 30px;
-            align-items: center;
-            .preference {
-                width: 280px;
-            }
-            .default-checkbox {
-                display: none;
-            }
-            .checkbox {
-                width: 14px;
-                height: 14px;
-                cursor: pointer;
-                border: 2px solid @colorwhite60;
-                .checkmark {
-                    width: 10px;
-                    height: 10px;
-                    display: none;
-                    fill: @colorwhite;
-                }
-            }
-            input:checked ~ .checkbox {
-                background-color: @colorprimlight;
-                border: 2px solid @colorprimlight;
-                .checkmark {
-                    display: block;
-                }
-            }
-            input:checked ~ .preference {
-                color: @colorwhite;
-            }
-        }
-    }
-    .language-menu {
-        margin: 40px 50px;
-        .language-section {
-            border-bottom: 1px solid @colormedium;
-            .headline {
-                font-weight: 600;
-                color: @colorwhite40;
-            }
-            .selected-language {
-                height: 40px;
-                width: 280px;
-                padding: 20px;
+            flex-direction: column;
+
+            .toggle-option {
                 display: flex;
-                margin: 30px 0px;
+                cursor: pointer;
+                margin-bottom: 30px;
                 align-items: center;
-                justify-content: space-between;
-                font-weight: 600;
-                color: @colorwhite;
-                background-color: @colordarkest;
-                border: 1px solid @colortransparent;
-                .arrow-down {
-                    width: 8px;
-                    height: 10px;
-                    fill: @colorwhite40;
+
+                .preference {
+                    flex: 1;
+                    white-space: pre;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
                 }
-                &:hover {
+
+                .default-checkbox {
+                    display: none;
+                }
+
+                .checkbox {
+                    width: 14px;
+                    height: 14px;
                     cursor: pointer;
-                    border: 1px solid @colormedium;
+                    border: 2px solid @colorwhite60;
+
+                    .checkmark {
+                        width: 10px;
+                        height: 10px;
+                        display: none;
+                        fill: @colorwhite;
+                    }
+                }
+
+                input:checked~.checkbox {
+                    background-color: @colorprimlight;
+                    border: 2px solid @colorprimlight;
+
+                    .checkmark {
+                        display: block;
+                    }
+                }
+
+                input:checked~.preference {
+                    color: @colorwhite;
+                }
+
+                &:hover {
+                    .preference {
+                        color: @colorwhite;
+                    }
+
+                    input:not(:checked)~.checkbox {
+                        border: 2px solid @colorwhite;
+                    }
                 }
             }
+
             &:not(:last-child) {
                 margin-bottom: 30px;
-
+                border-bottom: 1px solid @colormedium;
             }
         }
     }
diff --git a/stories/index.stories.js b/stories/index.stories.js
index 5d5b55413..ae7b3a2ca 100644
--- a/stories/index.stories.js
+++ b/stories/index.stories.js
@@ -5,7 +5,7 @@ import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { linkTo } from '@storybook/addon-links';
 
-import { Addon, LibraryItemList, MetaItem, ShareAddon, Stream, UserPanel, Video } from 'stremio-common';
+import { Addon, Checkbox, LibraryItemList, MetaItem, ShareAddon, Stream, UserPanel, Video } from 'stremio-common';
 
 storiesOf('Addon', module)
   .add('addon', () => (
@@ -17,6 +17,16 @@ storiesOf('Addon', module)
     </div>
   ));
 
+storiesOf('Checkbox', module)
+  .add('checkbox', () => (
+    <div style={{padding: '10px'}} className={styles['app']}>
+      <Checkbox iconHeight={20} iconWidth={20} checked={true} enabled={false}></Checkbox>
+      <Checkbox iconHeight={30} iconWidth={30} checked={false} enabled={false}></Checkbox>
+      <Checkbox iconHeight={10} iconWidth={10} checked={false} enabled={true}></Checkbox>
+      <Checkbox iconHeight={40} iconWidth={40} checked={true} enabled={true}></Checkbox>
+    </div>
+  ))
+
 storiesOf('LibraryItemList', module)
   .add('library item list', () => (
     <div style={{padding: '10px'}} className={styles['app']}>