diff --git a/src/common/Checkbox/Checkbox.js b/src/common/Checkbox/Checkbox.js
index 06a177086..78bac0384 100644
--- a/src/common/Checkbox/Checkbox.js
+++ b/src/common/Checkbox/Checkbox.js
@@ -5,22 +5,33 @@ import Icon from 'stremio-icons/dom';
 import styles from './styles';
 
 class Checkbox extends Component {
-    shouldComponentUpdate(nextProps, nextState) {
+    shouldComponentUpdate(nextProps) {
         return nextProps.checked !== this.props.checked ||
-            nextProps.enabled !== this.props.enabled;
+            nextProps.disabled !== this.props.disabled ||
+            nextProps.className !== this.props.className;
     }
 
-    onClick = () => {
-        if (this.props.enabled && typeof this.props.onClick === 'function') {
+    onClick = (event) => {
+        event.preventDefault();
+        if (typeof this.props.onClick === 'function') {
             this.props.onClick();
         }
     }
 
     render() {
         return (
-            <div className={classnames(styles['root'], this.props.className, { [styles['checkbox-checked']]: this.props.checked }, { [styles['checkbox-disabled']]: !this.props.enabled })}>
-                <Icon className={classnames(styles['icon'])} icon={this.props.checked ? 'ic_check' : 'ic_box_empty'} />
-                <input type={'checkbox'} className={styles['native-checkbox']} defaultChecked={this.props.checked} disabled={!this.props.enabled} onClick={this.onClick} />
+            <div className={classnames(this.props.className, styles['checkbox-container'], { 'checked': this.props.checked }, { 'disabled': this.props.disabled })}>
+                <Icon
+                    className={styles['icon']}
+                    icon={this.props.checked ? 'ic_check' : 'ic_box_empty'}
+                />
+                <input
+                    className={styles['native-checkbox']}
+                    type={'checkbox'}
+                    disabled={this.props.disabled}
+                    defaultChecked={this.props.checked}
+                    onClick={this.onClick}
+                />
             </div>
         );
     }
@@ -28,13 +39,13 @@ class Checkbox extends Component {
 
 Checkbox.propTypes = {
     className: PropTypes.string,
-    enabled: PropTypes.bool.isRequired,
+    disabled: PropTypes.bool.isRequired,
     checked: PropTypes.bool.isRequired,
     onClick: PropTypes.func
 };
 
 Checkbox.defaultProps = {
-    enabled: true,
+    disabled: false,
     checked: false
 };
 
diff --git a/src/common/Checkbox/styles.less b/src/common/Checkbox/styles.less
index ddd98d566..220a1c349 100644
--- a/src/common/Checkbox/styles.less
+++ b/src/common/Checkbox/styles.less
@@ -1,18 +1,14 @@
-.root {
-    cursor: pointer;
+.checkbox-container {
+    position: relative;
+    z-index: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--background-color);
 
-    &.checkbox-checked {
-        background-color: var(--color-primarylight);
-
-        .icon {
-            padding: 10%;
-            fill: var(--color-surfacelighter);
-        }
-    }
-
-    &.checkbox-disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
+    .icon {
+        height: 100%;
+        fill: var(--icon-color);
     }
 
     .native-checkbox {
@@ -20,14 +16,13 @@
         opacity: 0;
         height: 0;
         width: 0;
-        top: -9999px;
-        left: -9999px;
+        top: -99999999px;
+        left: -99999999px;
     }
 
-    .icon {
-        width: 100%;
-        height: 100%;
-        margin: auto;
-        fill: var(--color-surfacelighter60);
+    &:global(.checked) {
+        .icon {
+            height: 55%;
+        }
     }
 }
\ No newline at end of file