diff --git a/.eslintrc b/.eslintrc
index 8f16371b4..7bbe9d0e9 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -56,6 +56,7 @@
                 "max": 1
             }
         ],
+        "no-prototype-builtins": "off",
         "no-template-curly-in-string": "error",
         "no-trailing-spaces": "error",
         "no-useless-concat": "error",
diff --git a/src/common/AddonDetailsModal/AddonDetailsModal.js b/src/common/AddonDetailsModal/AddonDetailsModal.js
index fd20da40f..4e678c4b6 100644
--- a/src/common/AddonDetailsModal/AddonDetailsModal.js
+++ b/src/common/AddonDetailsModal/AddonDetailsModal.js
@@ -10,7 +10,7 @@ const AddonDetailsModal = ({ transportUrl, onCloseRequest }) => {
     const { core } = useServices();
     const addonDetails = useAddonDetails(transportUrl);
     const modalButtons = React.useMemo(() => {
-        if (addonDetails.descriptor === null || addonDetails.descriptor.content.type !== 'Ready') {
+        if (addonDetails.addon === null || addonDetails.addon.content.type !== 'Ready') {
             return null;
         }
 
@@ -25,10 +25,10 @@ const AddonDetailsModal = ({ transportUrl, onCloseRequest }) => {
         };
         const installOnClick = (event) => {
             core.dispatch({
-                action: 'AddonOp',
+                action: 'Ctx',
                 args: {
-                    addonOp: 'Install',
-                    args: addonDetails.descriptor.content.content
+                    action: 'InstallAddon',
+                    args: addonDetails.addon.content.content
                 }
             });
             if (typeof onCloseRequest === 'function') {
@@ -41,12 +41,10 @@ const AddonDetailsModal = ({ transportUrl, onCloseRequest }) => {
         };
         const uninstallOnClick = (event) => {
             core.dispatch({
-                action: 'AddonOp',
+                action: 'Ctx',
                 args: {
-                    addonOp: 'Uninstall',
-                    args: {
-                        transport_url: addonDetails.descriptor.content.content.transportUrl
-                    }
+                    action: 'UninstallAddon',
+                    args: addonDetails.addon.content.content.transportUrl
                 }
             });
             if (typeof onCloseRequest === 'function') {
@@ -65,7 +63,7 @@ const AddonDetailsModal = ({ transportUrl, onCloseRequest }) => {
                     onClick: cancelOnClick
                 }
             },
-            addonDetails.descriptor.content.content.installed ?
+            addonDetails.addon.content.content.installed ?
                 {
                     className: styles['uninstall-button'],
                     label: 'Uninstall',
@@ -87,27 +85,33 @@ const AddonDetailsModal = ({ transportUrl, onCloseRequest }) => {
     return (
         <ModalDialog className={styles['addon-details-modal-container']} title={'Stremio addon'} buttons={modalButtons} onCloseRequest={onCloseRequest}>
             {
-                addonDetails.descriptor === null || addonDetails.descriptor.content.type === 'Loading' ?
+                addonDetails.selected === null ?
                     <div className={styles['addon-details-message-container']}>
-                        Loading addon manifest from {transportUrl}
+                        Loading addon manifest
                     </div>
                     :
-                    addonDetails.descriptor.content.type === 'Err' ?
+                    addonDetails.addon === null || addonDetails.addon.content.type === 'Loading' ?
                         <div className={styles['addon-details-message-container']}>
-                            Failed to get addon manifest from {transportUrl}
+                            Loading addon manifest from {addonDetails.selected.transport_url}
                         </div>
                         :
-                        <AddonDetails
-                            className={styles['addon-details-container']}
-                            id={addonDetails.descriptor.content.content.manifest.id}
-                            name={addonDetails.descriptor.content.content.manifest.name}
-                            version={addonDetails.descriptor.content.content.manifest.version}
-                            logo={addonDetails.descriptor.content.content.manifest.logo}
-                            description={addonDetails.descriptor.content.content.manifest.description}
-                            types={addonDetails.descriptor.content.content.manifest.types}
-                            transportUrl={addonDetails.descriptor.content.content.transportUrl}
-                            official={addonDetails.descriptor.content.content.flags.official}
-                        />
+                        addonDetails.addon.content.type === 'Err' ?
+                            <div className={styles['addon-details-message-container']}>
+                                Failed to get addon manifest from {addonDetails.selected.transport_url}.
+                                {addonDetails.addon.content.content}
+                            </div>
+                            :
+                            <AddonDetails
+                                className={styles['addon-details-container']}
+                                id={addonDetails.addon.content.content.manifest.id}
+                                name={addonDetails.addon.content.content.manifest.name}
+                                version={addonDetails.addon.content.content.manifest.version}
+                                logo={addonDetails.addon.content.content.manifest.logo}
+                                description={addonDetails.addon.content.content.manifest.description}
+                                types={addonDetails.addon.content.content.manifest.types}
+                                transportUrl={addonDetails.addon.content.content.transportUrl}
+                                official={addonDetails.addon.content.content.flags.official}
+                            />
             }
         </ModalDialog>
     );
diff --git a/src/common/AddonDetailsModal/useAddonDetails.js b/src/common/AddonDetailsModal/useAddonDetails.js
index 71b9c2a9d..0775a99df 100644
--- a/src/common/AddonDetailsModal/useAddonDetails.js
+++ b/src/common/AddonDetailsModal/useAddonDetails.js
@@ -2,24 +2,26 @@ const React = require('react');
 const useModelState = require('stremio/common/useModelState');
 
 const initAddonDetailsState = () => ({
-    descriptor: null
+    selected: null,
+    addon: null
 });
 
 const mapAddonDetailsStateWithCtx = (addonDetails, ctx) => {
-    const descriptor = addonDetails.descriptor !== null && addonDetails.descriptor.content.type === 'Ready' ?
+    const selected = addonDetails.selected;
+    const addon = addonDetails.addon !== null && addonDetails.addon.content.type === 'Ready' ?
         {
-            ...addonDetails.descriptor,
+            transport_url: addonDetails.addon.transport_url,
             content: {
-                ...addonDetails.descriptor.content,
+                type: addonDetails.addon.content.type,
                 content: {
-                    ...addonDetails.descriptor.content.content,
-                    installed: ctx.content.addons.some((addon) => addon.transportUrl === addonDetails.descriptor.transportUrl),
+                    ...addonDetails.addon.content.content,
+                    installed: ctx.profile.addons.some(({ transportUrl }) => transportUrl === addonDetails.addon.transport_url),
                 }
             }
         }
         :
-        addonDetails.descriptor;
-    return { descriptor };
+        addonDetails.addon;
+    return { selected, addon };
 };
 
 const useAddonDetails = (transportUrl) => {
@@ -28,7 +30,7 @@ const useAddonDetails = (transportUrl) => {
             return {
                 action: 'Load',
                 args: {
-                    load: 'AddonDetails',
+                    model: 'AddonDetails',
                     args: {
                         transport_url: transportUrl
                     }
diff --git a/src/common/ColorInput/ColorInput.js b/src/common/ColorInput/ColorInput.js
index d64d8938e..e03aa3266 100644
--- a/src/common/ColorInput/ColorInput.js
+++ b/src/common/ColorInput/ColorInput.js
@@ -1,10 +1,12 @@
 const React = require('react');
 const PropTypes = require('prop-types');
+const classnames = require('classnames');
 const AColorPicker = require('a-color-picker');
 const Button = require('stremio/common/Button');
 const ModalDialog = require('stremio/common/ModalDialog');
 const useBinaryState = require('stremio/common/useBinaryState');
 const ColorPicker = require('./ColorPicker');
+const styles = require('./styles');
 
 const parseColor = (value) => {
     return AColorPicker.parseColor(value, 'hexcss4');
@@ -18,6 +20,9 @@ const ColorInput = ({ className, value, dataset, onChange, ...props }) => {
     const labelButtonStyle = React.useMemo(() => ({
         backgroundColor: value
     }), [value]);
+    const isTransparent = React.useMemo(() => {
+        return parseColor(value).endsWith('00');
+    }, [value]);
     const labelButtonOnClick = React.useCallback((event) => {
         if (typeof props.onClick === 'function') {
             props.onClick(event);
@@ -61,11 +66,19 @@ const ColorInput = ({ className, value, dataset, onChange, ...props }) => {
         setTempValue(parseColor(value));
     }, [value, modalOpen]);
     return (
-        <Button title={value} {...props} style={labelButtonStyle} className={className} onClick={labelButtonOnClick}>
+        <Button title={isTransparent ? 'Transparent' : value} {...props} style={labelButtonStyle} className={classnames(className, styles['color-input-container'])} onClick={labelButtonOnClick}>
+            {
+                isTransparent ?
+                    <div className={styles['transparent-label-container']}>
+                        <div className={styles['transparent-label']}>Transparent</div>
+                    </div>
+                    :
+                    null
+            }
             {
                 modalOpen ?
                     <ModalDialog title={'Choose a color:'} buttons={modalButtons} onCloseRequest={closeModal} onClick={modalDialogOnClick}>
-                        <ColorPicker value={tempValue} onInput={colorPickerOnInput} />
+                        <ColorPicker className={styles['color-picker-container']} value={tempValue} onInput={colorPickerOnInput} />
                     </ModalDialog>
                     :
                     null
diff --git a/src/common/ColorInput/styles.less b/src/common/ColorInput/styles.less
new file mode 100644
index 000000000..9e85d9d8b
--- /dev/null
+++ b/src/common/ColorInput/styles.less
@@ -0,0 +1,31 @@
+.color-input-container {
+    position: relative;
+    z-index: 0;
+
+    .transparent-label-container {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0 0.5rem;
+        border: thin solid var(--color-surfacelighter20);
+        pointer-events: none;
+
+        .transparent-label {
+            flex: 1;
+            text-align: center;
+            color: var(--color-surfacelighter);
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+    }
+}
+
+.color-picker-container {
+    margin: 1rem 0;
+}
diff --git a/src/common/ModalDialog/ModalDialog.js b/src/common/ModalDialog/ModalDialog.js
index 441907f10..d6f995392 100644
--- a/src/common/ModalDialog/ModalDialog.js
+++ b/src/common/ModalDialog/ModalDialog.js
@@ -70,30 +70,30 @@ const ModalDialog = ({ className, title, buttons, children, dataset, onCloseRequ
                 </div>
                 <div className={styles['modal-dialog-content']}>
                     {children}
-                    {
-                        Array.isArray(buttons) && buttons.length > 0 ?
-                            <div className={styles['buttons-container']}>
-                                {buttons.map(({ className, label, icon, props }, index) => (
-                                    <Button title={label} {...props} key={index} className={classnames(className, styles['action-button'])}>
-                                        {
-                                            typeof icon === 'string' && icon.length > 0 ?
-                                                <Icon className={styles['icon']} icon={icon} />
-                                                :
-                                                null
-                                        }
-                                        {
-                                            typeof label === 'string' && label.length > 0 ?
-                                                <div className={styles['label']}>{label}</div>
-                                                :
-                                                null
-                                        }
-                                    </Button>
-                                ))}
-                            </div>
-                            :
-                            null
-                    }
                 </div>
+                {
+                    Array.isArray(buttons) && buttons.length > 0 ?
+                        <div className={styles['buttons-container']}>
+                            {buttons.map(({ className, label, icon, props }, index) => (
+                                <Button title={label} {...props} key={index} className={classnames(className, styles['action-button'])}>
+                                    {
+                                        typeof icon === 'string' && icon.length > 0 ?
+                                            <Icon className={styles['icon']} icon={icon} />
+                                            :
+                                            null
+                                    }
+                                    {
+                                        typeof label === 'string' && label.length > 0 ?
+                                            <div className={styles['label']}>{label}</div>
+                                            :
+                                            null
+                                    }
+                                </Button>
+                            ))}
+                        </div>
+                        :
+                        null
+                }
             </div>
         </Modal>
     );
diff --git a/src/common/ModalDialog/styles.less b/src/common/ModalDialog/styles.less
index c6b7c04a1..d14526017 100644
--- a/src/common/ModalDialog/styles.less
+++ b/src/common/ModalDialog/styles.less
@@ -60,15 +60,25 @@
         .modal-dialog-content {
             flex: 1;
             align-self: stretch;
-            margin: 2rem 1rem;
+            margin: 2rem 1rem 0;
             padding: 0 1rem;
             overflow-y: auto;
 
-            .buttons-container {
-                margin-top: 1rem;
-                display: flex;
-                flex-direction: row;
-                flex-wrap: wrap;
+            &:last-child {
+                margin-bottom: 2rem;
+            }
+        }
+
+        .buttons-container {
+            flex: none;
+            align-self: stretch;
+            margin: 1rem 2rem 0;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+
+            &:last-child {
+                margin-bottom: 2rem;
             }
         }
     }
diff --git a/src/common/NavBar/NavMenu/NavMenu.js b/src/common/NavBar/NavMenu/NavMenu.js
index 40a846d9d..0a791090f 100644
--- a/src/common/NavBar/NavMenu/NavMenu.js
+++ b/src/common/NavBar/NavMenu/NavMenu.js
@@ -7,7 +7,7 @@ const Button = require('stremio/common/Button');
 const Popup = require('stremio/common/Popup');
 const useBinaryState = require('stremio/common/useBinaryState');
 const useFullscreen = require('stremio/common/useFullscreen');
-const useProfile = require('./useProfile');
+const useProfile = require('stremio/common/useProfile');
 const styles = require('./styles');
 
 const NavMenu = ({ className }) => {
diff --git a/src/common/NavBar/NavMenu/styles.less b/src/common/NavBar/NavMenu/styles.less
index c6d5c6dc9..fe3c84d7c 100644
--- a/src/common/NavBar/NavMenu/styles.less
+++ b/src/common/NavBar/NavMenu/styles.less
@@ -62,7 +62,7 @@
                 display: flex;
                 flex-direction: row;
                 align-items: center;
-                padding: 0 1em 1rem 0;
+                padding: 0 1rem 1rem 0;
 
                 &:hover, &:focus {
                     outline: none;
diff --git a/src/common/index.js b/src/common/index.js
index ef266e228..c8923bbe0 100644
--- a/src/common/index.js
+++ b/src/common/index.js
@@ -27,6 +27,8 @@ const useFullscreen = require('./useFullscreen');
 const useInLibrary = require('./useInLibrary');
 const useLiveRef = require('./useLiveRef');
 const useModelState = require('./useModelState');
+const useProfile = require('./useProfile');
+const useStreamingServer = require('./useStreamingServer');
 
 module.exports = {
     AddonDetailsModal,
@@ -58,5 +60,7 @@ module.exports = {
     useFullscreen,
     useInLibrary,
     useLiveRef,
-    useModelState
+    useModelState,
+    useProfile,
+    useStreamingServer
 };
diff --git a/src/common/NavBar/NavMenu/useProfile.js b/src/common/useProfile.js
similarity index 100%
rename from src/common/NavBar/NavMenu/useProfile.js
rename to src/common/useProfile.js
diff --git a/src/common/useStreamingServer.js b/src/common/useStreamingServer.js
new file mode 100644
index 000000000..7d3bd470f
--- /dev/null
+++ b/src/common/useStreamingServer.js
@@ -0,0 +1,23 @@
+const React = require('react');
+const { useServices } = require('stremio/services');
+const useModelState = require('stremio/common/useModelState');
+
+const mapStreamingServerState = (ctx) => {
+    return ctx.streaming_server;
+};
+
+const useStreamingServer = () => {
+    const { core } = useServices();
+    const initStreamingServer = React.useCallback(() => {
+        const ctx = core.getState('ctx');
+        return mapStreamingServerState(ctx);
+    }, []);
+    const streamingServer = useModelState({
+        model: 'ctx',
+        init: initStreamingServer,
+        map: mapStreamingServerState
+    });
+    return streamingServer;
+};
+
+module.exports = useStreamingServer;
diff --git a/src/router/Modal/Modal.js b/src/router/Modal/Modal.js
index 4b22a133c..043a6599b 100644
--- a/src/router/Modal/Modal.js
+++ b/src/router/Modal/Modal.js
@@ -8,7 +8,7 @@ const { useModalsContainer } = require('../ModalsContainerContext');
 const Modal = ({ className, autoFocus, disabled, children, ...props }) => {
     const modalsContainer = useModalsContainer();
     return ReactDOM.createPortal(
-        <FocusLock className={classnames(className, 'modal-container')} autoFocus={autoFocus} disabled={disabled} lockProps={props}>
+        <FocusLock className={classnames(className, 'modal-container')} autoFocus={!!autoFocus} disabled={!!disabled} lockProps={props}>
             {children}
         </FocusLock>,
         modalsContainer
diff --git a/src/routes/Addons/Addons.js b/src/routes/Addons/Addons.js
index e8519ebec..51a9eda78 100644
--- a/src/routes/Addons/Addons.js
+++ b/src/routes/Addons/Addons.js
@@ -1,5 +1,6 @@
 const React = require('react');
 const PropTypes = require('prop-types');
+const { useRouteFocused } = require('stremio-router');
 const Icon = require('stremio-icons/dom');
 const { AddonDetailsModal, Button, Multiselect, NavBar, TextInput, SharePrompt, ModalDialog, useBinaryState } = require('stremio/common');
 const Addon = require('./Addon');
@@ -7,44 +8,41 @@ const useAddons = require('./useAddons');
 const useSelectableInputs = require('./useSelectableInputs');
 const styles = require('./styles');
 
-const navigateToAddonDetails = (addonsCatalogRequest, transportUrl) => {
-    const queryParams = new URLSearchParams([['addon', transportUrl]]);
-    if (addonsCatalogRequest !== null) {
-        const transportUrl = encodeURIComponent(addonsCatalogRequest.base);
-        const catalogId = encodeURIComponent(addonsCatalogRequest.path.id);
-        const type = encodeURIComponent(addonsCatalogRequest.path.type_name);
-        window.location.replace(`#/addons/${transportUrl}/${catalogId}/${type}?${queryParams}`);
-    } else {
-        window.location.replace(`#/addons?${queryParams}`);
-    }
-};
-
-const clearAddonDetails = (addonsCatalogRequest) => {
-    if (addonsCatalogRequest !== null) {
-        const transportUrl = encodeURIComponent(addonsCatalogRequest.base);
-        const catalogId = encodeURIComponent(addonsCatalogRequest.path.id);
-        const type = encodeURIComponent(addonsCatalogRequest.path.type_name);
-        window.location.replace(`#/addons/${transportUrl}/${catalogId}/${type}`);
-    } else {
-        window.location.replace('#/addons');
-    }
-};
-
 const Addons = ({ urlParams, queryParams }) => {
+    const routeFocused = useRouteFocused();
+    const navigate = React.useCallback((args) => {
+        if (!routeFocused) {
+            return;
+        }
+
+        const nextPath = args.hasOwnProperty('request') ?
+            `/${encodeURIComponent(args.request.base)}/${encodeURIComponent(args.request.path.id)}/${encodeURIComponent(args.request.path.type_name)}`
+            :
+            typeof urlParams.transportUrl === 'string' && typeof urlParams.catalogId === 'string' && typeof urlParams.type === 'string' ?
+                `/${encodeURIComponent(urlParams.transportUrl)}/${encodeURIComponent(urlParams.catalogId)}/${encodeURIComponent(urlParams.type)}`
+                :
+                '';
+        const nextQueryParams = new URLSearchParams(queryParams);
+        if (args.hasOwnProperty('detailsTransportUrl')) {
+            if (args.detailsTransportUrl === null) {
+                nextQueryParams.delete('addon');
+            } else {
+                nextQueryParams.set('addon', args.detailsTransportUrl);
+            }
+        }
+
+        window.location.replace(`#/addons${nextPath}?${nextQueryParams}`);
+    }, [routeFocused, urlParams, queryParams]);
     const addons = useAddons(urlParams);
     const detailsTransportUrl = queryParams.get('addon');
-    const selectInputs = useSelectableInputs(addons);
+    const selectInputs = useSelectableInputs(addons, navigate);
     const [addAddonModalOpen, openAddAddonModal, closeAddAddonModal] = useBinaryState(false);
     const addAddonUrlInputRef = React.useRef(null);
     const addAddonOnSubmit = React.useCallback(() => {
         if (addAddonUrlInputRef.current !== null) {
-            const addonsCatalogRequest = addons.catalog_resource !== null ?
-                addons.catalog_resource.request
-                :
-                null;
-            navigateToAddonDetails(addonsCatalogRequest, addAddonUrlInputRef.current.value);
+            navigate({ detailsTransportUrl: addAddonUrlInputRef.current.value });
         }
-    }, [addons]);
+    }, [navigate]);
     const addAddonModalButtons = React.useMemo(() => {
         return [
             {
@@ -74,19 +72,11 @@ const Addons = ({ urlParams, queryParams }) => {
         setSharedTransportUrl(event.dataset.transportUrl);
     }, []);
     const onAddonToggle = React.useCallback((event) => {
-        const addonsCatalogRequest = addons.catalog_resource !== null ?
-            addons.catalog_resource.request
-            :
-            null;
-        navigateToAddonDetails(addonsCatalogRequest, event.dataset.transportUrl);
-    }, [addons]);
+        navigate({ detailsTransportUrl: event.dataset.transportUrl });
+    }, [navigate]);
     const closeAddonDetails = React.useCallback(() => {
-        const addonsCatalogRequest = addons.catalog_resource !== null ?
-            addons.catalog_resource.request
-            :
-            null;
-        clearAddonDetails(addonsCatalogRequest);
-    }, [addons]);
+        navigate({ detailsTransportUrl: null });
+    }, [navigate]);
     React.useLayoutEffect(() => {
         closeAddAddonModal();
         setSearch('');
diff --git a/src/routes/Addons/useAddons.js b/src/routes/Addons/useAddons.js
index d92afbed9..80f0c9b50 100644
--- a/src/routes/Addons/useAddons.js
+++ b/src/routes/Addons/useAddons.js
@@ -5,22 +5,22 @@ const { useModelState } = require('stremio/common');
 const initAddonsState = () => ({
     selectable: {
         types: [],
-        catalogs: [],
-        extra: [],
-        has_next_page: false,
-        has_prev_page: false
+        catalogs: []
     },
     catalog_resource: null
 });
 
 const mapAddonsStateWithCtx = (addons, ctx) => {
-    const selectable = addons.selectable;
+    const selectable = {
+        types: addons.selectable.types,
+        catalogs: addons.selectable.catalogs
+    };
     // TODO replace catalog content if resource catalog id is MY
     const catalog_resource = addons.catalog_resource !== null && addons.catalog_resource.content.type === 'Ready' ?
         {
-            ...addons.catalog_resource,
+            request: addons.catalog_resource.request,
             content: {
-                ...addons.catalog_resource.content,
+                type: addons.catalog_resource.content.type,
                 content: addons.catalog_resource.content.content.map((addon) => ({
                     transportUrl: addon.transportUrl,
                     installed: ctx.profile.addons.some(({ transportUrl }) => transportUrl === addon.transportUrl),
@@ -45,7 +45,7 @@ const onNewAddonsState = (addons) => {
         return {
             action: 'Load',
             args: {
-                model: 'CatalogFiltered',
+                model: 'CatalogWithFilters',
                 args: {
                     request: addons.selectable.catalogs[0].request
                 }
@@ -61,7 +61,7 @@ const useAddons = (urlParams) => {
             return {
                 action: 'Load',
                 args: {
-                    model: 'CatalogFiltered',
+                    model: 'CatalogWithFilters',
                     args: {
                         request: {
                             base: urlParams.transportUrl,
@@ -81,7 +81,7 @@ const useAddons = (urlParams) => {
                 return {
                     action: 'Load',
                     args: {
-                        model: 'CatalogFiltered',
+                        model: 'CatalogWithFilters',
                         args: {
                             request: addons.selectable.catalogs[0].request
                         }
diff --git a/src/routes/Addons/useSelectableInputs.js b/src/routes/Addons/useSelectableInputs.js
index e7b5a7b2f..f8a6f34ed 100644
--- a/src/routes/Addons/useSelectableInputs.js
+++ b/src/routes/Addons/useSelectableInputs.js
@@ -1,20 +1,6 @@
 const React = require('react');
 
-const navigateWithRequest = (request) => {
-    const transportUrl = encodeURIComponent(request.base);
-    const catalogId = encodeURIComponent(request.path.id);
-    const type = encodeURIComponent(request.path.type_name);
-    window.location.replace(`#/addons/${transportUrl}/${catalogId}/${type}`);
-};
-
-const equalWithoutExtra = (request1, request2) => {
-    return request1.base === request2.base &&
-        request1.path.resource === request2.path.resource &&
-        request1.path.type_name === request2.path.type_name &&
-        request1.path.id === request2.path.id;
-};
-
-const mapSelectableInputs = (addons) => {
+const mapSelectableInputs = (addons, navigate) => {
     const catalogSelect = {
         title: 'Select catalog',
         options: addons.selectable.catalogs
@@ -23,13 +9,14 @@ const mapSelectableInputs = (addons) => {
                 label: name
             })),
         selected: addons.selectable.catalogs
-            .filter(({ request: { path: { id } } }) => {
+            .filter(({ request }) => {
                 return addons.catalog_resource !== null &&
-                    addons.catalog_resource.request.path.id === id;
+                    addons.catalog_resource.request.base === request.base &&
+                    addons.catalog_resource.request.path.id === request.path.id;
             })
             .map(({ request }) => JSON.stringify(request)),
         onSelect: (event) => {
-            navigateWithRequest(JSON.parse(event.value));
+            navigate({ request: JSON.parse(event.value) });
         }
     };
     const typeSelect = {
@@ -42,20 +29,20 @@ const mapSelectableInputs = (addons) => {
         selected: addons.selectable.types
             .filter(({ request }) => {
                 return addons.catalog_resource !== null &&
-                    equalWithoutExtra(addons.catalog_resource.request, request);
+                    addons.catalog_resource.request.path.type_name === request.path.type_name;
             })
             .map(({ request }) => JSON.stringify(request)),
         onSelect: (event) => {
-            navigateWithRequest(JSON.parse(event.value));
+            navigate({ request: JSON.parse(event.value) });
         }
     };
     return [catalogSelect, typeSelect];
 };
 
-const useSelectableInputs = (addons) => {
+const useSelectableInputs = (addons, navigate) => {
     const selectableInputs = React.useMemo(() => {
-        return mapSelectableInputs(addons);
-    }, [addons]);
+        return mapSelectableInputs(addons, navigate);
+    }, [addons, navigate]);
     return selectableInputs;
 };
 
diff --git a/src/routes/Board/useBoard.js b/src/routes/Board/useBoard.js
index d5cc92d17..a16468292 100644
--- a/src/routes/Board/useBoard.js
+++ b/src/routes/Board/useBoard.js
@@ -9,7 +9,7 @@ const initBoardState = () => ({
 const mapBoardStateWithCtx = (board, ctx) => {
     const selected = board.selected;
     const catalog_resources = board.catalog_resources.map((catalog_resource) => {
-        catalog_resource.addon_name = ctx.content.addons.reduce((addon_name, addon) => {
+        catalog_resource.addon_name = ctx.profile.addons.reduce((addon_name, addon) => {
             if (addon.transportUrl === catalog_resource.request.base) {
                 return addon.manifest.name;
             }
@@ -35,7 +35,7 @@ const useBoard = () => {
     const loadBoardAction = React.useMemo(() => ({
         action: 'Load',
         args: {
-            load: 'CatalogsWithExtra',
+            model: 'CatalogsWithExtra',
             args: { extra: [] }
         }
     }), []);
diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js
index f4b9196db..db7908310 100644
--- a/src/routes/Discover/Discover.js
+++ b/src/routes/Discover/Discover.js
@@ -75,7 +75,7 @@ const Discover = ({ urlParams, queryParams }) => {
                     }
                 </div>
                 {
-                    discover.catalog_resource != null && !state.ctx.content.addons.some((addon) => addon.transportUrl === discover.catalog_resource.request.base) ?
+                    discover.catalog_resource !== null && !state.ctx.profile.addons.some((addon) => addon.transportUrl === discover.catalog_resource.request.base) ?
                         <div className={styles['missing-addon-warning-container']}>
                             <div className={styles['warning-info']}>This addon is not installed. Install now?</div>
                             <Button className={styles['install-button']} title={'Install addon'} onClick={openAddonModal}>
diff --git a/src/routes/Discover/useDiscover.js b/src/routes/Discover/useDiscover.js
index a40264ca0..981d8892f 100644
--- a/src/routes/Discover/useDiscover.js
+++ b/src/routes/Discover/useDiscover.js
@@ -17,9 +17,9 @@ const mapDiscoverState = (discover) => {
     const selectable = discover.selectable;
     const catalog_resource = discover.catalog_resource !== null && discover.catalog_resource.content.type === 'Ready' ?
         {
-            ...discover.catalog_resource,
+            request: discover.catalog_resource.request,
             content: {
-                ...discover.catalog_resource.content,
+                type: discover.catalog_resource.content.type,
                 content: discover.catalog_resource.content.content.map((metaItem) => ({
                     type: metaItem.type,
                     name: metaItem.name,
@@ -47,8 +47,10 @@ const onNewDiscoverState = (discover) => {
         return {
             action: 'Load',
             args: {
-                load: 'CatalogFiltered',
-                args: discover.selectable.types[0].load_request
+                model: 'CatalogWithFilters',
+                args: {
+                    request: discover.selectable.types[0].request
+                }
             }
         };
     }
@@ -61,14 +63,16 @@ const useDiscover = (urlParams, queryParams) => {
             return {
                 action: 'Load',
                 args: {
-                    load: 'CatalogFiltered',
+                    model: 'CatalogWithFilters',
                     args: {
-                        base: urlParams.transportUrl,
-                        path: {
-                            resource: 'catalog',
-                            type_name: urlParams.type,
-                            id: urlParams.catalogId,
-                            extra: Array.from(queryParams.entries())
+                        request: {
+                            base: urlParams.transportUrl,
+                            path: {
+                                resource: 'catalog',
+                                type_name: urlParams.type,
+                                id: urlParams.catalogId,
+                                extra: Array.from(queryParams.entries())
+                            }
                         }
                     }
                 }
@@ -79,8 +83,10 @@ const useDiscover = (urlParams, queryParams) => {
                 return {
                     action: 'Load',
                     args: {
-                        load: 'CatalogFiltered',
-                        args: discover.selectable.types[0].load_request
+                        model: 'CatalogWithFilters',
+                        args: {
+                            request: discover.selectable.types[0].request
+                        }
                     }
                 };
             } else {
diff --git a/src/routes/Discover/useSelectableInputs.js b/src/routes/Discover/useSelectableInputs.js
index 3132b8905..576109fde 100644
--- a/src/routes/Discover/useSelectableInputs.js
+++ b/src/routes/Discover/useSelectableInputs.js
@@ -8,11 +8,11 @@ const SKIP_EXTRA = {
     isRequired: false
 };
 
-const navigateWithLoadRequest = (load_request) => {
-    const transportUrl = encodeURIComponent(load_request.base);
-    const type = encodeURIComponent(load_request.path.type_name);
-    const catalogId = encodeURIComponent(load_request.path.id);
-    const extra = new URLSearchParams(load_request.path.extra).toString();
+const navigateWithLoadRequest = (request) => {
+    const transportUrl = encodeURIComponent(request.base);
+    const type = encodeURIComponent(request.path.type_name);
+    const catalogId = encodeURIComponent(request.path.id);
+    const extra = new URLSearchParams(request.path.extra).toString();
     window.location.replace(`#/discover/${transportUrl}/${type}/${catalogId}?${extra}`);
 };
 
@@ -52,13 +52,6 @@ const getNextExtra = (prevExtra, extraProp, extraValue) => {
         }, []);
 };
 
-const equalWithoutExtra = (request1, request2) => {
-    return request1.base === request2.base &&
-        request1.path.resource === request2.path.resource &&
-        request1.path.type_name === request2.path.type_name &&
-        request1.path.id === request2.path.id;
-};
-
 const mapSelectableInputs = (discover) => {
     const selectedCatalogRequest = discover.catalog_resource !== null ?
         discover.catalog_resource.request
@@ -85,15 +78,15 @@ const mapSelectableInputs = (discover) => {
     const typeSelect = {
         title: 'Select type',
         options: discover.selectable.types
-            .map(({ name, load_request }) => ({
-                value: JSON.stringify(load_request),
+            .map(({ name, request }) => ({
+                value: JSON.stringify(request),
                 label: name
             })),
         selected: discover.selectable.types
-            .filter(({ load_request: { path: { type_name } } }) => {
-                return type_name === selectedCatalogRequest.path.type_name;
+            .filter(({ request }) => {
+                return selectedCatalogRequest.path.type_name === request.path.type_name;
             })
-            .map(({ load_request }) => JSON.stringify(load_request)),
+            .map(({ request }) => JSON.stringify(request)),
         onSelect: (event) => {
             navigateWithLoadRequest(JSON.parse(event.value));
         }
@@ -101,15 +94,16 @@ const mapSelectableInputs = (discover) => {
     const catalogSelect = {
         title: 'Select catalog',
         options: discover.selectable.catalogs
-            .map(({ name, load_request }) => ({
-                value: JSON.stringify(load_request),
+            .map(({ name, request }) => ({
+                value: JSON.stringify(request),
                 label: name
             })),
         selected: discover.selectable.catalogs
-            .filter(({ load_request }) => {
-                return equalWithoutExtra(load_request, selectedCatalogRequest);
+            .filter(({ request }) => {
+                return selectedCatalogRequest.base === request.base &&
+                    selectedCatalogRequest.path.id === request.path.id;
             })
-            .map(({ load_request }) => JSON.stringify(load_request)),
+            .map(({ request }) => JSON.stringify(request)),
         onSelect: (event) => {
             navigateWithLoadRequest(JSON.parse(event.value));
         }
diff --git a/src/routes/Intro/Intro.js b/src/routes/Intro/Intro.js
index 223294e12..97e19ef3a 100644
--- a/src/routes/Intro/Intro.js
+++ b/src/routes/Intro/Intro.js
@@ -3,10 +3,11 @@ const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Icon = require('stremio-icons/dom');
 const { useRouteFocused } = require('stremio-router');
-const { Button, useCoreEvent } = require('stremio/common');
+const { Button, useBinaryState, useCoreEvent } = require('stremio/common');
 const { useServices } = require('stremio/services');
 const CredentialsTextInput = require('./CredentialsTextInput');
 const ConsentCheckbox = require('./ConsentCheckbox');
+const PasswordResetModal = require('./PasswordResetModal');
 const styles = require('./styles');
 
 const SIGNUP_FORM = 'signup';
@@ -22,6 +23,7 @@ const Intro = ({ queryParams }) => {
     const privacyPolicyRef = React.useRef();
     const marketingRef = React.useRef();
     const errorRef = React.useRef();
+    const [passwordRestModalOpen, openPasswordRestModal, closePasswordResetModal] = useBinaryState(false);
     const [state, dispatch] = React.useReducer(
         (state, action) => {
             switch (action.type) {
@@ -89,7 +91,7 @@ const Intro = ({ queryParams }) => {
     const loginWithFacebook = React.useCallback(() => {
         FB.login((response) => {
             if (response.status === 'connected') {
-                fetch('https://www.strem.io/fb-login-with-token/' + encodeURIComponent(response.authResponse.accessToken), { timeout: 10 * 1000 })
+                fetch('https://www.strem.io/fb-login-with-token/' + encodeURIComponent(response.authResponse.accessToken), { timeout: 10 * 60 * 1000 })
                     .then((resp) => {
                         if (resp.status < 200 || resp.status >= 300) {
                             throw new Error('Login failed at getting token from Stremio with status ' + resp.status);
@@ -97,22 +99,30 @@ const Intro = ({ queryParams }) => {
                             return resp.json();
                         }
                     })
-                    .then(() => {
+                    .then(({ user }) => {
+                        if (!user || typeof user.fbLoginToken !== 'string' || typeof user.email !== 'string') {
+                            throw new Error('Login failed at getting token from Stremio');
+                        }
                         core.dispatch({
-                            action: 'UserOp',
+                            action: 'Ctx',
                             args: {
-                                userOp: 'Login',
+                                action: 'Authenticate',
                                 args: {
-                                    email: state.email,
-                                    password: response.authResponse.accessToken
+                                    type: 'Login',
+                                    email: user.email,
+                                    password: user.fbLoginToken
                                 }
                             }
                         });
                     })
-                    .catch(() => { });
+                    .catch((err = {}) => {
+                        dispatch({ type: 'error', error: err.message || JSON.stringify(err) });
+                    });
+            } else {
+                dispatch({ type: 'error', error: 'Login failed at getting token from Facebook' });
             }
         });
-    }, [state.email, state.password]);
+    }, []);
     const loginWithEmail = React.useCallback(() => {
         if (typeof state.email !== 'string' || state.email.length === 0) {
             dispatch({ type: 'error', error: 'Invalid email' });
@@ -315,7 +325,7 @@ const Intro = ({ queryParams }) => {
                         </React.Fragment>
                         :
                         <div className={styles['forgot-password-link-container']}>
-                            <Button className={styles['forgot-password-link']} href={'https://www.strem.io/reset-password/'} target={'_blank'}>Forgot password?</Button>
+                            <Button className={styles['forgot-password-link']} onClick={openPasswordRestModal}>Forgot password?</Button>
                         </div>
                 }
                 {
@@ -339,6 +349,12 @@ const Intro = ({ queryParams }) => {
                     <div className={styles['label']}>{state.form === SIGNUP_FORM ? 'LOG IN' : 'SING UP WITH EMAIL'}</div>
                 </Button>
             </div>
+            {
+                passwordRestModalOpen ?
+                    <PasswordResetModal email={state.email} onCloseRequest={closePasswordResetModal} />
+                    :
+                    null
+            }
         </div>
     );
 };
diff --git a/src/routes/Intro/PasswordResetModal/PasswordResetModal.js b/src/routes/Intro/PasswordResetModal/PasswordResetModal.js
new file mode 100644
index 000000000..7877492bb
--- /dev/null
+++ b/src/routes/Intro/PasswordResetModal/PasswordResetModal.js
@@ -0,0 +1,75 @@
+const React = require('react');
+const PropTypes = require('prop-types');
+const { useRouteFocused } = require('stremio-router');
+const { ModalDialog } = require('stremio/common');
+const CredentialsTextInput = require('../CredentialsTextInput');
+const styles = require('./styles');
+
+const PasswordResetModal = ({ email, onCloseRequest }) => {
+    const routeFocused = useRouteFocused();
+    const [error, setError] = React.useState('');
+    const еmailRef = React.useRef(null);
+    const goToPasswordReset = React.useCallback(() => {
+        еmailRef.current.value.length > 0 && еmailRef.current.validity.valid ?
+            window.open('https://www.strem.io/reset-password/' + еmailRef.current.value, '_blank')
+            :
+            setError('Invalid email');
+    }, []);
+    const passwordResetOnClick = React.useCallback(() => {
+        goToPasswordReset();
+    }, []);
+    const passwordResetModalButtons = React.useMemo(() => {
+        return [
+            {
+                className: styles['cancel-button'],
+                label: 'Cancel',
+                props: {
+                    onClick: onCloseRequest
+                }
+            },
+            {
+                label: 'Send',
+                props: {
+                    onClick: passwordResetOnClick
+                }
+            }
+        ];
+    }, [onCloseRequest, passwordResetOnClick]);
+    const emailOnChange = React.useCallback(() => {
+        setError('');
+    }, []);
+    const emailOnSubmit = React.useCallback(() => {
+        goToPasswordReset();
+    }, []);
+    React.useEffect(() => {
+        if (routeFocused) {
+            еmailRef.current.focus();
+        }
+    }, [routeFocused]);
+    return (
+        <ModalDialog className={styles['password-reset-modal-container']} title={'Password reset'} buttons={passwordResetModalButtons} onCloseRequest={onCloseRequest}>
+            <CredentialsTextInput
+                ref={еmailRef}
+                className={styles['credentials-text-input']}
+                type={'email'}
+                placeholder={'Email'}
+                defaultValue={typeof email === 'string' ? email : ''}
+                onChange={emailOnChange}
+                onSubmit={emailOnSubmit}
+            />
+            {
+                error.length > 0 ?
+                    <div className={styles['error-message']}>{error}</div>
+                    :
+                    null
+            }
+        </ModalDialog>
+    );
+};
+
+PasswordResetModal.propTypes = {
+    email: PropTypes.string,
+    onCloseRequest: PropTypes.func
+};
+
+module.exports = PasswordResetModal;
diff --git a/src/routes/Intro/PasswordResetModal/index.js b/src/routes/Intro/PasswordResetModal/index.js
new file mode 100644
index 000000000..128292036
--- /dev/null
+++ b/src/routes/Intro/PasswordResetModal/index.js
@@ -0,0 +1,3 @@
+const PasswordResetModal = require('./PasswordResetModal');
+
+module.exports = PasswordResetModal;
diff --git a/src/routes/Intro/PasswordResetModal/styles.less b/src/routes/Intro/PasswordResetModal/styles.less
new file mode 100644
index 000000000..4b537dad7
--- /dev/null
+++ b/src/routes/Intro/PasswordResetModal/styles.less
@@ -0,0 +1,17 @@
+.password-reset-modal-container {
+    .credentials-text-input {
+        width: 20rem;
+        padding: 0.5rem;
+        border: thin solid var(--color-surfacedark);
+    }
+
+    .error-message {
+        margin: 1rem 0;
+        text-align: center;
+        color: var(--color-signal2);
+    }
+
+    .cancel-button {
+        background-color: var(--color-surfacedark);
+    }
+}
\ No newline at end of file
diff --git a/src/routes/Search/Search.js b/src/routes/Search/Search.js
index b6669f298..7abcdbe24 100644
--- a/src/routes/Search/Search.js
+++ b/src/routes/Search/Search.js
@@ -42,7 +42,7 @@ const Search = ({ queryParams }) => {
                         search.catalog_resources.length === 0 ?
                             <div className={styles['message-container']}>
                                 <div className={styles['message-content']}>
-                                    <div className={styles['label']}> No addons were requested for catalogs</div>
+                                    <div className={styles['label']}>No addons were requested for catalogs</div>
                                 </div>
                             </div>
                             :
diff --git a/src/routes/Search/styles.less b/src/routes/Search/styles.less
index 565cc3a94..bda1befdd 100644
--- a/src/routes/Search/styles.less
+++ b/src/routes/Search/styles.less
@@ -48,7 +48,6 @@
             flex-direction: row;
             align-items: flex-start;
             justify-content: center;
-            max-height: calc(100% - 10rem);
             margin: 5rem;
 
             .message-content {
diff --git a/src/routes/Search/useSearch.js b/src/routes/Search/useSearch.js
index 078d53840..a4bb60949 100644
--- a/src/routes/Search/useSearch.js
+++ b/src/routes/Search/useSearch.js
@@ -13,7 +13,7 @@ const mapSearchStateWithCtx = (search, ctx) => {
         '';
     const selected = search.selected;
     const catalog_resources = search.catalog_resources.map((catalog_resource) => {
-        catalog_resource.addon_name = ctx.content.addons.reduce((addon_name, addon) => {
+        catalog_resource.addon_name = ctx.profile.addons.reduce((addon_name, addon) => {
             if (addon.transportUrl === catalog_resource.request.base) {
                 return addon.manifest.name;
             }
@@ -41,7 +41,7 @@ const useSearch = (queryParams) => {
             return {
                 action: 'Load',
                 args: {
-                    load: 'CatalogsWithExtra',
+                    model: 'CatalogsWithExtra',
                     args: {
                         extra: [
                             ['search', queryParams.get('search')]
diff --git a/src/routes/Settings/SectionsList/SectionsList.js b/src/routes/Settings/SectionsList/SectionsList.js
deleted file mode 100644
index 8ff5fe581..000000000
--- a/src/routes/Settings/SectionsList/SectionsList.js
+++ /dev/null
@@ -1,287 +0,0 @@
-const React = require('react');
-const PropTypes = require('prop-types');
-const { Button, Multiselect, Checkbox, ColorInput } = require('stremio/common');
-const Icon = require('stremio-icons/dom');
-const classnames = require('classnames');
-const styles = require('./styles');
-
-const SectionsList = React.forwardRef(({ className, sections, preferences, onPreferenceChanged, onScroll }, ref) => {
-    const toggleCheckbox = (id) => {
-        onPreferenceChanged(id, preferences[id] === 'true' ? 'false' : 'true');
-    };
-
-    const colorChanged = React.useCallback((event) => {
-        const id = event.dataset.id;
-        const color = event.value;
-        onPreferenceChanged(id, color);
-    }, [onPreferenceChanged]);
-
-    const updateDropdown = React.useCallback((event) => {
-        const name = event.dataset.name;
-        const value = event.reactEvent.currentTarget.dataset.value;
-        onPreferenceChanged(name, value);
-    }, [onPreferenceChanged]);
-
-    const updateStreamingDropdown = React.useCallback((event) => {
-        const name = event.dataset.name;
-        const value = event.reactEvent.currentTarget.dataset.value;
-        const newPrefs = { ...preferences.streaming, [name]: value };
-        onPreferenceChanged('streaming', newPrefs);
-    }, [onPreferenceChanged, preferences.streaming]);
-
-    const checkUser = React.useCallback((event) => {
-        if (!preferences.user) {
-            // Here in Stremio 4 we show a toast with a message, asking the anonymous user to log in/register
-            console.log('No user found');
-            event.preventDefault();
-        }
-    }, []);
-
-    // Determines whether the link should be opened in new window or in the current one.
-    const getTargetFor = url => ['//', 'http://', 'https://', 'file://', 'ftp://', 'mailto:', 'magnet:']
-        .some(scheme => url.startsWith(scheme)) ? '_blank' : '_self'
-
-    // TODO: If we get the user data after initialization, these should be wrapped in React.useState and set by React.useEffect
-    const changePasswordUrl = preferences.user && 'https://www.strem.io/reset-password/' + preferences.user.email;
-    const webCalUrl = preferences.user && 'webcal://www.strem.io/calendar/' + preferences.user._id + '.ics';
-
-    const formatBytes = inBytes => {
-        if (inBytes === '0') return 'no caching';
-        if (inBytes === 'Infinity') return '∞';
-
-        const bytes = parseInt(inBytes, 10);
-
-        const kilo = 1024;
-        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-
-        const power = Math.floor(Math.log(bytes) / Math.log(kilo));
-
-        // More than 1024 yotta bytes
-        if (power >= sizes.length) {
-            power = sizes.length - 1;
-        }
-        return parseFloat((bytes / Math.pow(kilo, power)).toFixed(2)) + ' ' + sizes[power];
-    }
-    const cacheSizes = ['0', '2147483648', '5368709120', '10737418240', 'Infinity'];
-    const mkCacheSizeOptions = sizes => sizes.map(size => ({
-        label: formatBytes(size), // TODO: translation
-        value: size.toString(),
-    }))
-    const supportedProfiles = ['default', 'soft', 'fast'];
-    const mkProfiles = profiles => profiles.map(profile => ({
-        label: profile[0].toUpperCase() + profile.slice(1).toLowerCase(), // TODO: translation
-        value: profile,
-    }))
-    const [cachingOptions, setCachingOptions] = React.useState(mkProfiles(supportedProfiles));
-    const [streamingProfiles, setStreamingProfiles] = React.useState(mkProfiles(supportedProfiles));
-    React.useEffect(() => {
-        if (!preferences.streaming || typeof preferences.streaming.cacheSize === 'undefined') return;
-        setCachingOptions(mkCacheSizeOptions([...new Set(cacheSizes.concat(preferences.streaming.cacheSize))]));
-    }, [preferences.streaming && preferences.streaming.cacheSize]);
-    React.useEffect(() => {
-        if (preferences.streaming && preferences.streaming.profile && !supportedProfiles.includes(preferences.streaming.profile)) {
-            setStreamingProfiles(mkProfiles(supportedProfiles.concat(preferences.streaming.profile)));
-        }
-    }, [preferences.streaming && preferences.streaming.profile]);
-
-    const sectionsElements = sections.map((section) =>
-        <div key={section.id} ref={section.ref} className={styles['section']} data-section={section.id}>
-            <div className={styles['section-header']}>{section.id}</div>
-            {(section.inputs || [])
-                .map((input) => {
-                    if (input.type === 'user') {
-                        return (
-                            <React.Fragment key={'user'}>
-                                <div className={classnames(styles['input-container'], styles['user-container'])}>
-                                    {
-                                        !preferences.user
-                                            ?
-                                            <div style={{ backgroundImage: `url('/images/anonymous.png')` }} className={styles['avatar']} />
-                                            :
-                                            <div style={{ backgroundImage: `url('${preferences.user.avatar}'), url('/images/default_avatar.png')` }} className={styles['avatar']} />
-                                    }
-                                    <div className={styles['email']}>{!preferences.user ? 'Anonymous user' : preferences.user.email}</div>
-                                </div>
-                                <div className={classnames(styles['input-container'], styles['button-container'])}>
-                                    <Button className={styles['button']} href={'#/intro'}>
-                                        <div className={styles['label']}>{preferences.user ? 'LOG OUT' : 'SIGN IN'}</div>
-                                    </Button>
-                                </div>
-                                <div className={classnames(styles['input-container'], styles['link-container'])}>
-                                    <Button className={styles['link']} href={changePasswordUrl} target={'_blank'} onClick={checkUser}>
-                                        <div className={styles['label']}>{'Change password'}</div>
-                                    </Button>
-                                </div>
-                                <div className={classnames(styles['input-container'], styles['text-container'])}>
-                                    <div className={styles['text']}>
-                                        <div className={styles['label']}>{'Import options'}</div>
-                                    </div>
-                                </div>
-                                <div className={classnames(styles['input-container'], styles['link-container'])}>
-                                    <Button className={styles['link']} href={'https://www.stremio.com/#TODO:install-facebook-addon'} target={'_blank'} onClick={checkUser}>
-                                        <div className={styles['label']}>{'Import from Facebook'}</div>
-                                    </Button>
-                                </div>
-                                <div className={classnames(styles['input-container'], styles['link-container'])}>
-                                    <Button className={styles['link']} href={'https://www.stremio.com/#TODO:export-user-data'} target={'_blank'} onClick={checkUser}>
-                                        <div className={styles['label']}>{'Export user data'}</div>
-                                    </Button>
-                                </div>
-                                <div className={classnames(styles['input-container'], styles['link-container'])}>
-                                    <Button className={styles['link']} href={webCalUrl} target={'_blank'} onClick={checkUser}>
-                                        <div className={styles['label']}>{'Subscribe to calendar'}</div>
-                                    </Button>
-                                </div>
-                                <div className={classnames(styles['input-container'], styles['link-container'])}>
-                                    <Button className={styles['link']} href={'https://stremio.zendesk.com/'} target={'_blank'}>
-                                        <div className={styles['label']}>{'Contact support'}</div>
-                                    </Button>
-                                </div>
-                                <div className={classnames(styles['input-container'], styles['link-container'])}>
-                                    <Button className={styles['link']} href={'https://docs.google.com/forms/d/e/1FAIpQLScubrlTpDMIPUUBlhZ5lwcXl3HxzKfunIMCX5Jnp-cDyglWjQ/viewform?usp=sf_link'} target={'_blank'}>
-                                        <div className={styles['label']}>{'Request account deletion'}</div>
-                                    </Button>
-                                </div>
-                                <div className={classnames(styles['input-container'], styles['button-container'])}>
-                                    <div className={styles['input-header']}>{'Trakt Scrobbling'}</div>
-                                    <Button className={styles['button']}>
-                                        <Icon className={styles['icon']} icon={'ic_trackt'} />
-                                        <div className={styles['label']}>{preferences.user && preferences.user.trakt ? 'ALREADY UTHENTIATED' : 'AUTHENTIATE'}</div>
-                                    </Button>
-                                </div>
-                            </React.Fragment>
-                        );
-                    } else if (input.type === 'streaming') {
-                        return (
-                            preferences.streaming_loaded
-                                ?
-                                <React.Fragment key={'streaming'}>
-                                    {
-                                        // The streaming server settings are shown only if server is available
-                                        preferences.streaming_error
-                                            ?
-                                            null
-                                            :
-                                            <React.Fragment>
-                                                <div className={classnames(styles['input-container'], styles['select-container'])}>
-                                                    <div className={styles['input-header']}>Caching</div>
-                                                    <Multiselect options={cachingOptions} selected={[preferences.streaming.cacheSize]} dataset={{ name: 'cacheSize' }} className={styles['dropdown']} onSelect={updateStreamingDropdown} />
-                                                </div>
-                                                <div className={classnames(styles['input-container'], styles['select-container'])}>
-                                                    <div className={styles['input-header']}>Torrent Profile</div>
-                                                    <Multiselect options={streamingProfiles} selected={[preferences.streaming.profile]} dataset={{ name: 'profile' }} className={styles['dropdown']} onSelect={updateStreamingDropdown} />
-                                                </div>
-                                            </React.Fragment>
-                                    }
-                                    {/* From here there is only presentation */}
-                                    <div key={'server_url'} className={classnames(styles['input-container'], styles['text-container'])}>
-                                        <div className={styles['input-header']}><strong>Streaming server URL:</strong> {preferences.server_url}</div>
-                                    </div>
-                                    <div key={'server_available'} className={classnames(styles['input-container'], styles['text-container'])}>
-                                        <div className={styles['text']}>
-                                            <Icon className={classnames(styles['icon'], { [styles['x-icon']]: preferences.streaming_error })} icon={preferences.streaming_error ? 'ic_x' : 'ic_check'} />
-                                            <div className={styles['label']}>{'Streaming server is ' + (preferences.streaming_error ? 'not ' : '') + 'available.'}{preferences.streaming_error && ' Reason: ' + preferences.streaming_error}</div>
-                                        </div>
-                                    </div>
-                                </React.Fragment>
-                                :
-                                <div key={'server_url'} className={classnames(styles['input-container'], styles['text-container'])}>
-                                    <div className={styles['input-header']}>Loading streaming settgins...</div>
-                                </div>
-                        );
-                    } else if (input.type === 'select') {
-                        return (
-                            <div key={input.id} className={classnames(styles['input-container'], styles['select-container'])}>
-                                {input.header ? <div className={styles['input-header']}>{input.header}</div> : null}
-                                <Multiselect options={input.options} selected={[preferences[input.id]]} dataset={{ name: input.id }} key={input.id} className={styles['dropdown']} onSelect={updateDropdown} />
-                            </div>
-                        );
-                    } else if (input.type === 'link') {
-                        return (
-                            <div key={input.id} className={classnames(styles['input-container'], styles['link-container'])}>
-                                {input.header ? <div className={styles['input-header']}>{input.header}</div> : null}
-                                <Button ref={input.ref} className={styles['link']} href={input.href} target={getTargetFor(input.href)}>
-                                    <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}
-                                <Button ref={input.ref} className={styles['button']} href={input.href}>
-                                    {input.icon ? <Icon className={styles['icon']} icon={input.icon} /> : null}
-                                    <div className={styles['label']}>{input.label}</div>
-                                </Button>
-                            </div>
-                        );
-                    } else if (input.type === 'checkbox') {
-                        return (
-                            <div key={input.id} className={classnames(styles['input-container'], styles['checkbox-container'])}>
-                                {input.header ? <div className={styles['input-header']}>{input.header}</div> : null}
-                                <Checkbox ref={input.ref} className={styles['checkbox']} checked={preferences[input.id] === 'true'} onClick={toggleCheckbox.bind(null, input.id)}>
-                                    <div className={styles['label']}>{input.label}</div>
-                                </Checkbox>
-                            </div>
-                        );
-                    } else if (input.type === 'static-text') {
-                        return (
-                            <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}
-                                    <div className={styles['label']}>{input.label}</div>
-                                </div>
-                            </div>
-                        );
-                    } else if (input.type === 'color') {
-                        return (
-                            <div key={input.id} className={classnames(styles['input-container'], styles['color-container'])}>
-                                {input.header ? <div className={styles['input-header']}>{input.header}</div> : null}
-                                <ColorInput className={styles['color-picker']} dataset={{ id: input.id }} value={preferences[input.id]} onChange={colorChanged} />
-                            </div>
-                        );
-                    } else if (input.type === 'info') {
-                        return (
-                            <div key={input.id} className={classnames(styles['input-container'])}>
-                                <div className={styles['input-header']}><strong>{input.header}</strong> {preferences[input.id]}</div>
-                            </div>
-                        );
-                    }
-                })}
-        </div>
-    );
-
-    return (
-        <div ref={ref} className={className} onScroll={onScroll}>
-            {sectionsElements}
-        </div>
-    );
-});
-
-SectionsList.propTypes = {
-    className: PropTypes.string,
-    sections: PropTypes.arrayOf(PropTypes.shape({
-        id: PropTypes.string.isRequired,
-        ref: PropTypes.shape({
-            current: PropTypes.object,
-        }).isRequired,
-        inputs: PropTypes.arrayOf(PropTypes.shape({
-            type: PropTypes.string.isRequired,
-            id: PropTypes.string,
-            header: PropTypes.string,
-            label: PropTypes.string,
-            icon: PropTypes.string,
-            href: PropTypes.string,
-            options: PropTypes.arrayOf(PropTypes.shape({
-                label: PropTypes.string.isRequired,
-                value: PropTypes.string.isRequired,
-            })),
-        })),
-    })),
-    preferences: PropTypes.object,
-    onPreferenceChanged: PropTypes.func.isRequired,
-    onScroll: PropTypes.func.isRequired,
-};
-
-module.exports = SectionsList;
\ No newline at end of file
diff --git a/src/routes/Settings/SectionsList/index.js b/src/routes/Settings/SectionsList/index.js
deleted file mode 100644
index ff7a9b4a0..000000000
--- a/src/routes/Settings/SectionsList/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-const SectionsList = require('./SectionsList');
-
-module.exports = SectionsList;
\ No newline at end of file
diff --git a/src/routes/Settings/SectionsList/styles.less b/src/routes/Settings/SectionsList/styles.less
deleted file mode 100644
index 403257d22..000000000
--- a/src/routes/Settings/SectionsList/styles.less
+++ /dev/null
@@ -1,195 +0,0 @@
-:import('~stremio/common/Checkbox/styles.less') {
-    checkbox-icon: icon;
-}
-:import('~stremio/common/Multiselect/styles.less') {
-    menu-container: menu-container;
-}
-
-.dropdown {
-    .menu-container {
-        max-height: 30rem;
-        overflow-y: auto;
-    }
-}
-
-.section {
-    padding: 4rem 0;
-    margin: 0 2rem;
-    width: var(--input-width);
-    overflow: visible;
-
-    .section-header {
-        margin: 1.5rem 0;
-        font-size: 2rem;
-        color: var(--color-surfacelighter);
-    }
-
-    .input-container {
-        margin: 2rem 0;
-        display: flex;
-        flex-direction: column;
-        overflow: visible;
-
-        .input-header {
-            margin-bottom: 0.5rem;
-            color: var(--color-surfacelighter);
-        }
-
-        .checkbox-icon {
-            flex: none;
-            width: 1.2rem;
-            height: 1.2rem;
-            fill: var(--color-surfacelight);
-        }
-
-        &.user-container {
-            flex-direction: row;
-            align-items: center;
-
-            .avatar {
-                margin: 0 1rem;
-                width: 4.2rem;
-                height: 4.2rem;
-                border-radius: 50%;
-                border: var(--focusable-border-size) solid var(--color-primary);
-                background-size: cover;
-                background-position: center;
-                background-repeat: no-repeat;
-            }
-
-            .email {
-                color: var(--color-surfacelighter);
-            }
-        }
-
-        &.select-container {
-            .dropdown {
-                height: 3rem;
-            }
-        }
-
-        &.link-container {
-            margin: 0;
-            .link {
-                padding: .75rem 0;
-                display: block;
-                color: var(--color-secondarylight);
-
-                &:focus {
-                    color: var(--color-surface);
-                }
-
-                &:hover {
-                    color: var(--color-surfacelighter);
-                }
-            }
-        }
-
-        &.button-container {
-            .button {
-                padding: 0.7rem;
-                min-height: calc(var(--input-width) * 0.09);
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                background-color: var(--color-primary);
-                cursor: pointer;
-
-                .icon {
-                    width: 1.4rem;
-                    height: 100%;
-                    margin-right: 0.5rem;
-                    fill: var(--color-surfacelighter);
-                }
-
-                .label {
-                    color: var(--color-surfacelighter);
-                }
-
-                &:focus {
-                    border-color: var(--color-surfacelighter);
-                }
-
-                &:hover {
-                    border-color: transparent;
-                    background-color: var(--color-primarylight);
-                }
-            }
-        }
-
-        &.checkbox-container {
-            .checkbox {
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-                cursor: pointer;
-
-                .label {
-                    width: 100%;
-                    margin-left: 0.5rem;
-                    color: var(--color-surfacelight);
-                }
-
-                &:focus,
-                &:hover {
-                    .checkbox-icon {
-                        fill: var(--color-surfacelighter);
-                    }
-
-                    .label {
-                        color: var(--color-surfacelighter);
-                    }
-                }
-            }
-        }
-
-        &.text-container {
-            margin: 0;
-            .text {
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-                padding: .75rem 0;
-
-                .icon {
-                    margin-right: 0.5rem;
-                    width: 1rem;
-                    height: 1rem;
-                    fill: var(--color-signal5);
-                }
-
-                .x-icon {
-                    margin-right: 0.5rem;
-                    width: 1rem;
-                    height: 1rem;
-                    fill: var(--color-signal2);
-                }
-
-                .label {
-                    width: 100%;
-                    color: var(--color-surfacelighter);
-                }
-            }
-        }
-
-        &.color-container {
-            .color-picker {
-                box-shadow: inset 0px 0px .2rem 0px var(--color-surfacelighter20);
-                height: calc(var(--input-width) * 0.08);
-                cursor: pointer;
-
-                &:focus {
-                    border-color: var(--color-surfacelighter);
-                }
-
-                &:hover {
-                    border-color: transparent;
-                }
-            }
-        }
-    }
-
-    >:last-child {
-        margin-bottom: 0;
-    }
-}
\ No newline at end of file
diff --git a/src/routes/Settings/SectionsSelector/SectionsSelector.js b/src/routes/Settings/SectionsSelector/SectionsSelector.js
deleted file mode 100644
index a1f08dd12..000000000
--- a/src/routes/Settings/SectionsSelector/SectionsSelector.js
+++ /dev/null
@@ -1,28 +0,0 @@
-const React = require('react');
-const PropTypes = require('prop-types');
-const { Button } = require('stremio/common');
-const classnames = require('classnames');
-const styles = require('./styles');
-
-const SectionsSelector = ({ className, sections, selectedSectionId, onSelectedSection }) => {
-    return (
-        <div className={className}>
-            {sections.map((section) =>
-                <Button key={section.id} className={classnames(styles['section-label'], { [styles['selected']]: selectedSectionId === section.id })} type={'button'} data-section={section.id} onClick={onSelectedSection}>
-                    {section.id}
-                </Button>
-            )}
-        </div>
-    );
-};
-
-SectionsSelector.propTypes = {
-    className: PropTypes.string,
-    sections: PropTypes.arrayOf(PropTypes.shape({
-        id: PropTypes.string.isRequired,
-    })),
-    selectedSectionId: PropTypes.string.isRequired,
-    onSelectedSection: PropTypes.func.isRequired,
-};
-
-module.exports = SectionsSelector;
diff --git a/src/routes/Settings/SectionsSelector/index.js b/src/routes/Settings/SectionsSelector/index.js
deleted file mode 100644
index d873092a7..000000000
--- a/src/routes/Settings/SectionsSelector/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-const SectionsSelector = require('./SectionsSelector');
-
-module.exports = SectionsSelector;
diff --git a/src/routes/Settings/SectionsSelector/styles.less b/src/routes/Settings/SectionsSelector/styles.less
deleted file mode 100644
index f4a15c2a8..000000000
--- a/src/routes/Settings/SectionsSelector/styles.less
+++ /dev/null
@@ -1,26 +0,0 @@
-.section-label {
-    padding: 1rem;
-    font-size: 1.1rem;
-    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;
-    }
-}
\ No newline at end of file
diff --git a/src/routes/Settings/Settings.js b/src/routes/Settings/Settings.js
index a8d216b20..e00b92a99 100644
--- a/src/routes/Settings/Settings.js
+++ b/src/routes/Settings/Settings.js
@@ -1,65 +1,398 @@
 const React = require('react');
-const { NavBar } = require('stremio/common');
+const classnames = require('classnames');
+const throttle = require('lodash.throttle');
+const Icon = require('stremio-icons/dom');
+const { useServices } = require('stremio/services');
+const { Button, Checkbox, NavBar, Multiselect, ColorInput, useProfile, useStreamingServer } = require('stremio/common');
+const useProfileSettingsInputs = require('./useProfileSettingsInputs');
+const useStreamingServerSettingsInputs = require('./useStreamingServerSettingsInputs');
 const styles = require('./styles');
-const SectionsSelector = require('./SectionsSelector');
-const SectionsList = require('./SectionsList');
-const { settingsSections } = require('./constants');
-const useSettings = require('./useSettings');
+
+const GENERAL_SECTION = 'general';
+const PLAYER_SECTION = 'player';
+const STREAMING_SECTION = 'streaming';
 
 const Settings = () => {
-    const [preferences, setPreferences] = useSettings();
-    const [dynamicSections, setDynamicSections] = React.useState(settingsSections);
-    // TODO: The Streaming section should be handled separately
-    const sections = React.useMemo(() => Object.keys(dynamicSections)
-        .map((section) => ({
-            id: section,
-            inputs: dynamicSections[section],
-            ref: React.createRef()
-        })), [dynamicSections]);
-
-    const [selectedSectionId, setSelectedSectionId] = React.useState(sections[0].id);
-    const scrollContainerRef = React.useRef(null);
-
-    const updatePreference = (option, value) => {
-        setPreferences({ ...preferences, [option]: value });
-    }
-
-    const changeSection = React.useCallback((event) => {
-        const currentSectionId = event.currentTarget.dataset.section;
-        const section = sections.find((section) => section.id === currentSectionId);
-        //setSelectedSectionId(currentSectionId);
-        scrollContainerRef.current.scrollTo({
-            top: section.ref.current.offsetTop,
-            behavior: 'smooth'
+    const { core } = useServices();
+    const profile = useProfile();
+    const streaminServer = useStreamingServer();
+    const {
+        interfaceLanguageSelect,
+        subtitlesLanguageSelect,
+        subtitlesSizeSelect,
+        subtitlesTextColorInput,
+        subtitlesBackgroundColorInput,
+        subtitlesOutlineColorInput,
+        bingeWatchingCheckbox,
+        playInBackgroundCheckbox,
+        playInExternalPlayerCheckbox,
+        hardwareDecodingCheckbox
+    } = useProfileSettingsInputs();
+    const {
+        cacheSizeSelect,
+        torrentProfileSelect
+    } = useStreamingServerSettingsInputs();
+    const logoutButtonOnClick = React.useCallback(() => {
+        core.dispatch({
+            action: 'Ctx',
+            args: {
+                action: 'Logout'
+            }
         });
-    }, [sections]);
-
-    const sectionListOnScorll = React.useCallback((event) => {
-        const scrollContainer = event.currentTarget;
-        if (scrollContainer.scrollTop + scrollContainer.clientHeight === scrollContainer.scrollHeight) {
+    }, []);
+    const authenticateTraktOnClick = React.useCallback(() => {
+        // TODO
+    }, []);
+    const importFacebookOnClick = React.useCallback(() => {
+        // TODO
+    }, []);
+    const subscribeCalendarOnClick = React.useCallback(() => {
+        // TODO
+    }, []);
+    const exportDataOnClick = React.useCallback(() => {
+        // TODO
+    }, []);
+    const reloadStreamingServer = React.useCallback(() => {
+        core.dispatch({
+            action: 'Ctx',
+            args: {
+                action: 'ReloadStreamingServer'
+            }
+        });
+    }, []);
+    const sectionsContainerRef = React.useRef(null);
+    const generalSectionRef = React.useRef(null);
+    const playerSectionRef = React.useRef(null);
+    const streamingServerSectionRef = React.useRef(null);
+    const sections = React.useMemo(() => ([
+        { ref: generalSectionRef, id: GENERAL_SECTION },
+        { ref: playerSectionRef, id: PLAYER_SECTION },
+        { ref: streamingServerSectionRef, id: STREAMING_SECTION },
+    ]), []);
+    const [selectedSectionId, setSelectedSectionId] = React.useState(sections[0].id);
+    const updateSelectedSectionId = React.useCallback(() => {
+        if (sectionsContainerRef.current.scrollTop + sectionsContainerRef.current.clientHeight === sectionsContainerRef.current.scrollHeight) {
             setSelectedSectionId(sections[sections.length - 1].id);
         } else {
             for (let i = sections.length - 1; i >= 0; i--) {
-                if (sections[i].ref.current.offsetTop <= scrollContainer.scrollTop) {
+                if (sections[i].ref.current.offsetTop - sectionsContainerRef.current.offsetTop <= sectionsContainerRef.current.scrollTop) {
                     setSelectedSectionId(sections[i].id);
                     break;
                 }
             }
         }
-    }, [sections]);
-
+    }, []);
+    const sideMenuButtonOnClick = React.useCallback((event) => {
+        const section = sections.find((section) => {
+            return section.id === event.currentTarget.dataset.section;
+        });
+        sectionsContainerRef.current.scrollTo({
+            top: section.ref.current.offsetTop - sectionsContainerRef.current.offsetTop,
+            behavior: 'smooth'
+        });
+    }, []);
+    const sectionsContainerOnScorll = React.useCallback(throttle(() => {
+        updateSelectedSectionId();
+    }, 50), []);
+    React.useEffect(() => {
+        updateSelectedSectionId();
+    }, []);
     return (
-        <div className={styles['settings-parent-container']}>
+        <div className={styles['settings-container']}>
             <NavBar
                 className={styles['nav-bar']}
                 backButton={true}
                 addonsButton={true}
                 fullscreenButton={true}
                 notificationsMenu={true}
-                navMenu={true} />
-            <div className={styles['settings-container']}>
-                <SectionsSelector className={styles['side-menu']} sections={sections} selectedSectionId={selectedSectionId} onSelectedSection={changeSection} />
-                <SectionsList ref={scrollContainerRef} className={styles['scroll-container']} sections={sections} preferences={preferences} onPreferenceChanged={updatePreference} onScroll={sectionListOnScorll} />
+                navMenu={true}
+            />
+            <div className={styles['settings-content']}>
+                <div className={styles['side-menu-container']}>
+                    <Button className={classnames(styles['side-menu-button'], { [styles['selected']]: selectedSectionId === GENERAL_SECTION })} data-section={GENERAL_SECTION} onClick={sideMenuButtonOnClick}>
+                        General
+                    </Button>
+                    <Button className={classnames(styles['side-menu-button'], { [styles['selected']]: selectedSectionId === PLAYER_SECTION })} data-section={PLAYER_SECTION} onClick={sideMenuButtonOnClick}>
+                        Player
+                    </Button>
+                    <Button className={classnames(styles['side-menu-button'], { [styles['selected']]: selectedSectionId === STREAMING_SECTION })} data-section={STREAMING_SECTION} onClick={sideMenuButtonOnClick}>
+                        Streaming server
+                    </Button>
+                    <div className={styles['spacing']} />
+                    <div className={styles['version-info-label']}>App Version: {process.env.VERSION}</div>
+                    {
+                        streaminServer.type === 'Ready' ?
+                            <div className={styles['version-info-label']}>Server Version: {streaminServer.settings.serverVersion}</div>
+                            :
+                            null
+                    }
+                </div>
+                <div ref={sectionsContainerRef} className={styles['sections-container']} onScroll={sectionsContainerOnScorll}>
+                    <div ref={generalSectionRef} className={styles['section-container']}>
+                        <div className={styles['section-title']}>General</div>
+                        <div className={classnames(styles['option-container'], styles['user-info-option-container'])}>
+                            <div
+                                className={styles['avatar-container']}
+                                style={{
+                                    backgroundImage: profile.auth === null ?
+                                        'url(\'/images/anonymous.png\')'
+                                        :
+                                        `url('${profile.auth.user.avatar}'), url('/images/default_avatar.png')`
+                                }}
+                            />
+                            <div className={styles['email-logout-container']}>
+                                <div className={styles['email-label-container']} title={profile.auth === null ? 'Anonymous user' : profile.auth.user.email}>
+                                    <div className={styles['email-label']}>
+                                        {profile.auth === null ? 'Anonymous user' : profile.auth.user.email}
+                                    </div>
+                                </div>
+                                {
+                                    profile.auth !== null ?
+                                        <Button className={styles['logout-button-container']} title={'Log out'} href={'#/intro'} onClick={logoutButtonOnClick}>
+                                            <div className={styles['logout-label']}>Log out</div>
+                                        </Button>
+                                        :
+                                        null
+                                }
+                            </div>
+                        </div>
+                        {
+                            profile.auth === null ?
+                                <div className={styles['option-container']}>
+                                    <Button className={classnames(styles['option-input-container'], styles['button-container'])} title={'Log in / Sign up'} href={'#/intro'} onClick={logoutButtonOnClick}>
+                                        <div className={styles['label']}>Log in / Sign up</div>
+                                    </Button>
+                                </div>
+                                :
+                                <div className={styles['option-container']}>
+                                    <Button className={classnames(styles['option-input-container'], styles['button-container'])} title={'User panel'} target={'_blank'} href={'https://www.stremio.com/acc-settings'}>
+                                        <Icon className={styles['icon']} icon={'ic_user'} />
+                                        <div className={styles['label']}>User panel</div>
+                                    </Button>
+                                </div>
+                        }
+                        <div className={styles['option-container']}>
+                            <Button className={classnames(styles['option-input-container'], styles['button-container'])} title={'Addons'} href={'#/addons'}>
+                                <Icon className={styles['icon']} icon={'ic_addons'} />
+                                <div className={styles['label']}>Addons</div>
+                            </Button>
+                        </div>
+                        <div className={styles['option-container']}>
+                            <div className={styles['option-name-container']}>
+                                <div className={styles['label']}>Trakt Scrobbling</div>
+                            </div>
+                            <Button className={classnames(styles['option-input-container'], styles['button-container'])} title={'Authenticate'} onClick={authenticateTraktOnClick}>
+                                <Icon className={styles['icon']} icon={'ic_trackt'} />
+                                <div className={styles['label']}>Authenticate</div>
+                            </Button>
+                        </div>
+                        <div className={styles['option-container']}>
+                            <div className={styles['option-name-container']}>
+                                <div className={styles['label']}>Facebook</div>
+                            </div>
+                            <Button className={classnames(styles['option-input-container'], styles['button-container'])} title={'Import'} onClick={importFacebookOnClick}>
+                                <Icon className={styles['icon']} icon={'ic_facebook'} />
+                                <div className={styles['label']}>Import</div>
+                            </Button>
+                        </div>
+                        <div className={styles['option-container']}>
+                            <div className={styles['option-name-container']}>
+                                <div className={styles['label']}>Calendar</div>
+                            </div>
+                            <Button className={classnames(styles['option-input-container'], styles['button-container'])} title={'Subscribe'} onClick={subscribeCalendarOnClick}>
+                                <Icon className={styles['icon']} icon={'ic_calendar'} />
+                                <div className={styles['label']}>Subscribe</div>
+                            </Button>
+                        </div>
+                        <div className={styles['option-container']}>
+                            <div className={styles['option-name-container']}>
+                                <div className={styles['label']}>Interface language</div>
+                            </div>
+                            <Multiselect
+                                className={classnames(styles['option-input-container'], styles['multiselect-container'])}
+                                {...interfaceLanguageSelect}
+                            />
+                        </div>
+                        <div className={styles['option-container']}>
+                            <Button className={classnames(styles['option-input-container'], styles['link-container'])} title={'Export user data'} onClick={exportDataOnClick}>
+                                <div className={styles['label']}>Export user data</div>
+                            </Button>
+                        </div>
+                        <div className={styles['option-container']}>
+                            <Button className={classnames(styles['option-input-container'], styles['link-container'])} title={'Contact support'} target={'_blank'} href={'https://stremio.zendesk.com/hc/en-us'}>
+                                <div className={styles['label']}>Contact support</div>
+                            </Button>
+                        </div>
+                        <div className={styles['option-container']}>
+                            <Button className={classnames(styles['option-input-container'], styles['link-container'])} title={'Source code'} target={'_blank'} href={`https://github.com/stremio/stremio-web/commit/${process.env.COMMIT_HASH}`}>
+                                <div className={styles['label']}>Source code</div>
+                            </Button>
+                        </div>
+                        <div className={styles['option-container']}>
+                            <Button className={classnames(styles['option-input-container'], styles['link-container'])} title={'Terms of Service'} target={'_blank'} href={'https://www.stremio.com/tos'}>
+                                <div className={styles['label']}>Terms of Service</div>
+                            </Button>
+                        </div>
+                        <div className={styles['option-container']}>
+                            <Button className={classnames(styles['option-input-container'], styles['link-container'])} title={'Privacy Policy'} target={'_blank'} href={'https://www.stremio.com/privacy'}>
+                                <div className={styles['label']}>Privacy Policy</div>
+                            </Button>
+                        </div>
+                    </div>
+                    <div ref={playerSectionRef} className={styles['section-container']}>
+                        <div className={styles['section-title']}>Player</div>
+                        <div className={styles['option-container']}>
+                            <div className={styles['option-name-container']}>
+                                <div className={styles['label']}>Subtitles language</div>
+                            </div>
+                            <Multiselect
+                                className={classnames(styles['option-input-container'], styles['multiselect-container'])}
+                                {...subtitlesLanguageSelect}
+                            />
+                        </div>
+                        <div className={styles['option-container']}>
+                            <div className={styles['option-name-container']}>
+                                <div className={styles['label']}>Subtitles size</div>
+                            </div>
+                            <Multiselect
+                                className={classnames(styles['option-input-container'], styles['multiselect-container'])}
+                                {...subtitlesSizeSelect}
+                            />
+                        </div>
+                        <div className={styles['option-container']}>
+                            <div className={styles['option-name-container']}>
+                                <div className={styles['label']}>Subtitles text color</div>
+                            </div>
+                            <ColorInput
+                                className={classnames(styles['option-input-container'], styles['color-input-container'])}
+                                {...subtitlesTextColorInput}
+                            />
+                        </div>
+                        <div className={styles['option-container']}>
+                            <div className={styles['option-name-container']}>
+                                <div className={styles['label']}>Subtitles background color</div>
+                            </div>
+                            <ColorInput
+                                className={classnames(styles['option-input-container'], styles['color-input-container'])}
+                                {...subtitlesBackgroundColorInput}
+                            />
+                        </div>
+                        <div className={styles['option-container']}>
+                            <div className={styles['option-name-container']}>
+                                <div className={styles['label']}>Subtitles outline color</div>
+                            </div>
+                            <ColorInput
+                                className={classnames(styles['option-input-container'], styles['color-input-container'])}
+                                {...subtitlesOutlineColorInput}
+                            />
+                        </div>
+                        <div className={styles['option-container']}>
+                            <div className={styles['option-name-container']}>
+                                <div className={styles['label']}>Auto-play next episode</div>
+                            </div>
+                            <Checkbox
+                                className={classnames(styles['option-input-container'], styles['checkbox-container'])}
+                                {...bingeWatchingCheckbox}
+                            />
+                        </div>
+                        <div className={styles['option-container']}>
+                            <div className={styles['option-name-container']}>
+                                <div className={styles['label']}>Play in background</div>
+                            </div>
+                            <Checkbox
+                                className={classnames(styles['option-input-container'], styles['checkbox-container'])}
+                                {...playInBackgroundCheckbox}
+                            />
+                        </div>
+                        <div className={styles['option-container']}>
+                            <div className={styles['option-name-container']}>
+                                <div className={styles['label']}>Play in external player</div>
+                            </div>
+                            <Checkbox
+                                className={classnames(styles['option-input-container'], styles['checkbox-container'])}
+                                {...playInExternalPlayerCheckbox}
+                            />
+                        </div>
+                        <div className={styles['option-container']}>
+                            <div className={styles['option-name-container']}>
+                                <div className={styles['label']}>Hardware-accelerated decoding</div>
+                            </div>
+                            <Checkbox
+                                className={classnames(styles['option-input-container'], styles['checkbox-container'])}
+                                {...hardwareDecodingCheckbox}
+                            />
+                        </div>
+                    </div>
+                    <div ref={streamingServerSectionRef} className={styles['section-container']}>
+                        <div className={styles['section-title']}>Streaming Server</div>
+                        <div className={styles['option-container']}>
+                            <Button className={classnames(styles['option-input-container'], styles['button-container'])} title={'Reload'} onClick={reloadStreamingServer}>
+                                <div className={styles['label']}>Reload</div>
+                            </Button>
+                        </div>
+                        <div className={styles['option-container']}>
+                            <div className={styles['option-name-container']}>
+                                <div className={styles['label']}>Status</div>
+                            </div>
+                            <div className={classnames(styles['option-input-container'], styles['info-container'])}>
+                                <div className={styles['label']}>
+                                    {
+                                        streaminServer.type === 'Ready' ?
+                                            'Online'
+                                            :
+                                            streaminServer.type === 'Error' ?
+                                                `Error: (${streaminServer.error})`
+                                                :
+                                                streaminServer.type
+                                    }
+                                </div>
+                            </div>
+                        </div>
+                        {
+                            streaminServer.type === 'Ready' ?
+                                <div className={styles['option-container']}>
+                                    <div className={styles['option-name-container']}>
+                                        <div className={styles['label']}>Base Url</div>
+                                    </div>
+                                    <div className={classnames(styles['option-input-container'], styles['info-container'], styles['selectable'])}>
+                                        <div className={styles['label']}>
+                                            {streaminServer.base_url}
+                                        </div>
+                                    </div>
+                                </div>
+                                :
+                                null
+                        }
+                        {
+                            cacheSizeSelect !== null ?
+                                <div className={styles['option-container']}>
+                                    <div className={styles['option-name-container']}>
+                                        <div className={styles['label']}>Cache size</div>
+                                    </div>
+                                    <Multiselect
+                                        className={classnames(styles['option-input-container'], styles['multiselect-container'])}
+                                        {...cacheSizeSelect}
+                                    />
+                                </div>
+                                :
+                                null
+                        }
+                        {
+                            torrentProfileSelect !== null ?
+                                <div className={styles['option-container']}>
+                                    <div className={styles['option-name-container']}>
+                                        <div className={styles['label']}>Torrent profile</div>
+                                    </div>
+                                    <Multiselect
+                                        className={classnames(styles['option-input-container'], styles['multiselect-container'])}
+                                        {...torrentProfileSelect}
+                                    />
+                                </div>
+                                :
+                                null
+                        }
+                    </div>
+                </div>
             </div>
         </div>
     );
diff --git a/src/routes/Settings/constants.js b/src/routes/Settings/constants.js
deleted file mode 100644
index 9a3a95b9d..000000000
--- a/src/routes/Settings/constants.js
+++ /dev/null
@@ -1,28 +0,0 @@
-const languageOptions = [ { "label": "аҧсуа бызшәа", "value": "abk" }, { "label": "Afaraf", "value": "aar" }, { "label": "Afrikaans", "value": "afr" }, { "label": "Akan", "value": "aka" }, { "label": "gjuha shqipe", "value": "sqi" }, { "label": "አማርኛ", "value": "amh" }, { "label": "العربية", "value": "ara" }, { "label": "aragonés", "value": "arg" }, { "label": "Հայերեն", "value": "hye" }, { "label": "অসমীয়া", "value": "asm" }, { "label": "авар мацӀ", "value": "ava" }, { "label": "avesta", "value": "ave" }, { "label": "aymar aru", "value": "aym" }, { "label": "azərbaycan dili", "value": "aze" }, { "label": "bamanankan", "value": "bam" }, { "label": "башҡорт теле", "value": "bak" }, { "label": "euskara", "value": "eus" }, { "label": "беларуская мова", "value": "bel" }, { "label": "বাংলা", "value": "ben" }, { "label": "भोजपुरी", "value": "bih" }, { "label": "Bislama", "value": "bis" }, { "label": "bosanski jezik", "value": "bos" }, { "label": "brezhoneg", "value": "bre" }, { "label": "български език", "value": "bul" }, { "label": "ဗမာစာ", "value": "mya" }, { "label": "català", "value": "cat" }, { "label": "Chamoru", "value": "cha" }, { "label": "нохчийн мотт", "value": "che" }, { "label": "chiCheŵa", "value": "nya" }, { "label": "中文 (Zhōngwén)", "value": "zho" }, { "label": "чӑваш чӗлхи", "value": "chv" }, { "label": "Kernewek", "value": "cor" }, { "label": "corsu", "value": "cos" }, { "label": "ᓀᐦᐃᔭᐍᐏᐣ", "value": "cre" }, { "label": "hrvatski jezik", "value": "hrv" }, { "label": "čeština", "value": "ces" }, { "label": "dansk", "value": "dan" }, { "label": "ދިވެހި", "value": "div" }, { "label": "Nederlands", "value": "nld" }, { "label": "རྫོང་ཁ", "value": "dzo" }, { "label": "English", "value": "eng" }, { "label": "Esperanto", "value": "epo" }, { "label": "eesti", "value": "est" }, { "label": "Eʋegbe", "value": "ewe" }, { "label": "føroyskt", "value": "fao" }, { "label": "vosa Vakaviti", "value": "fij" }, { "label": "suomi", "value": "fin" }, { "label": "français", "value": "fre" }, { "label": "Fulfulde", "value": "ful" }, { "label": "galego", "value": "glg" }, { "label": "ქართული", "value": "kat" }, { "label": "Deutsch", "value": "ger" }, { "label": "ελληνικά", "value": "ell" }, { "label": "Avañe'ẽ", "value": "grn" }, { "label": "ગુજરાતી", "value": "guj" }, { "label": "Kreyòl ayisyen", "value": "hat" }, { "label": "Hausa", "value": "hau" }, { "label": "עברית", "value": "heb" }, { "label": "Otjiherero", "value": "her" }, { "label": "हिन्दी", "value": "hin" }, { "label": "Hiri Motu", "value": "hmo" }, { "label": "magyar", "value": "hun" }, { "label": "Interlingua", "value": "ina" }, { "label": "Bahasa Indonesia", "value": "ind" }, { "label": "Interlingue", "value": "ile" }, { "label": "Gaeilge", "value": "gle" }, { "label": "Asụsụ Igbo", "value": "ibo" }, { "label": "Iñupiaq", "value": "ipk" }, { "label": "Ido", "value": "ido" }, { "label": "Íslenska", "value": "isl" }, { "label": "italiano", "value": "ita" }, { "label": "ᐃᓄᒃᑎᑐᑦ", "value": "iku" }, { "label": "日本語 (にほんご)", "value": "jpn" }, { "label": "basa Jawa", "value": "jav" }, { "label": "kalaallisut", "value": "kal" }, { "label": "ಕನ್ನಡ", "value": "kan" }, { "label": "Kanuri", "value": "kau" }, { "label": "कश्मीरी", "value": "kas" }, { "label": "қазақ тілі", "value": "kaz" }, { "label": "ខ្មែរ", "value": "khm" }, { "label": "Gĩkũyũ", "value": "kik" }, { "label": "Ikinyarwanda", "value": "kin" }, { "label": "Кыргызча", "value": "kir" }, { "label": "коми кыв", "value": "kom" }, { "label": "KiKongo", "value": "kon" }, { "label": "한국어 (韓國語)", "value": "kor" }, { "label": "Kurdî", "value": "kur" }, { "label": "Kuanyama", "value": "kua" }, { "label": "latine", "value": "lat" }, { "label": "Lëtzebuergesch", "value": "ltz" }, { "label": "Luganda", "value": "lug" }, { "label": "Limburgs", "value": "lim" }, { "label": "Lingála", "value": "lin" }, { "label": "ພາສາລາວ", "value": "lao" }, { "label": "lietuvių kalba", "value": "lit" }, { "label": "Tshiluba", "value": "lub" }, { "label": "latviešu valoda", "value": "lav" }, { "label": "Gaelg", "value": "glv" }, { "label": "македонски јазик", "value": "mkd" }, { "label": "fiteny malagasy", "value": "mlg" }, { "label": "bahasa Melayu", "value": "msa" }, { "label": "മലയാളം", "value": "mal" }, { "label": "Malti", "value": "mlt" }, { "label": "te reo Māori", "value": "mri" }, { "label": "मराठी", "value": "mar" }, { "label": "Kajin M̧ajeļ", "value": "mah" }, { "label": "монгол", "value": "mon" }, { "label": "Ekakairũ Naoero", "value": "nau" }, { "label": "Diné bizaad", "value": "nav" }, { "label": "Norsk bokmål", "value": "nob" }, { "label": "isiNdebele", "value": "nde" }, { "label": "नेपाली", "value": "nep" }, { "label": "Owambo", "value": "ndo" }, { "label": "Norsk nynorsk", "value": "nno" }, { "label": "Norsk", "value": "nor" }, { "label": "ꆈꌠ꒿ Nuosuhxop", "value": "iii" }, { "label": "isiNdebele", "value": "nbl" }, { "label": "occitan", "value": "oci" }, { "label": "ᐊᓂᔑᓈᐯᒧᐎᓐ", "value": "oji" }, { "label": "ѩзыкъ словѣньскъ", "value": "chu" }, { "label": "Afaan Oromoo", "value": "orm" }, { "label": "ଓଡ଼ିଆ", "value": "ori" }, { "label": "ирон æвзаг", "value": "oss" }, { "label": "ਪੰਜਾਬੀ", "value": "pan" }, { "label": "पाऴि", "value": "pli" }, { "label": "فارسی", "value": "fas" }, { "label": "język polski", "value": "pol" }, { "label": "پښتو", "value": "pus" }, { "label": "português", "value": "por" }, { "label": "português Brazil", "value": "pob" }, { "label": "Runa Simi", "value": "que" }, { "label": "rumantsch grischun", "value": "roh" }, { "label": "Ikirundi", "value": "run" }, { "label": "limba română", "value": "ron" }, { "label": "русский язык", "value": "rus" }, { "label": "संस्कृतम्", "value": "san" }, { "label": "sardu", "value": "srd" }, { "label": "सिन्धी", "value": "snd" }, { "label": "Davvisámegiella", "value": "sme" }, { "label": "gagana fa'a Samoa", "value": "smo" }, { "label": "yângâ tî sängö", "value": "sag" }, { "label": "српски језик", "value": "srp" }, { "label": "Gàidhlig", "value": "gla" }, { "label": "chiShona", "value": "sna" }, { "label": "සිංහල", "value": "sin" }, { "label": "slovenčina", "value": "slk" }, { "label": "slovenski jezik", "value": "slv" }, { "label": "Soomaaliga", "value": "som" }, { "label": "Sesotho", "value": "sot" }, { "label": "español", "value": "spa" }, { "label": "Basa Sunda", "value": "sun" }, { "label": "Kiswahili", "value": "swa" }, { "label": "SiSwati", "value": "ssw" }, { "label": "Svenska", "value": "swe" }, { "label": "தமிழ்", "value": "tam" }, { "label": "తెలుగు", "value": "tel" }, { "label": "тоҷикӣ", "value": "tgk" }, { "label": "ไทย", "value": "tha" }, { "label": "ትግርኛ", "value": "tir" }, { "label": "བོད་ཡིག", "value": "bod" }, { "label": "Türkmen", "value": "tuk" }, { "label": "Wikang Tagalog", "value": "tgl" }, { "label": "Setswana", "value": "tsn" }, { "label": "faka Tonga", "value": "ton" }, { "label": "Türkçe", "value": "tur" }, { "label": "Xitsonga", "value": "tso" }, { "label": "татар теле", "value": "tat" }, { "label": "Twi", "value": "twi" }, { "label": "Reo Tahiti", "value": "tah" }, { "label": "Uyƣurqə", "value": "uig" }, { "label": "українська мова", "value": "ukr" }, { "label": "اردو", "value": "urd" }, { "label": "O'zbek", "value": "uzb" }, { "label": "Tshivenḓa", "value": "ven" }, { "label": "Tiếng Việt", "value": "vie" }, { "label": "Volapük", "value": "vol" }, { "label": "walon", "value": "wln" }, { "label": "Cymraeg", "value": "cym" }, { "label": "Wollof", "value": "wol" }, { "label": "Frysk", "value": "fry" }, { "label": "isiXhosa", "value": "xho" }, { "label": "ייִדיש", "value": "yid" }, { "label": "Yorùbá", "value": "yor" }, { "label": "Saɯ cueŋƅ", "value": "zha" }, { "label": "isiZulu", "value": "zul" } ];
-
-const settingsSections = {
-    'General': [
-        { 'id': 'user', 'type': 'user' },
-        { 'id': 'language', 'header': 'UI Language', 'label': 'UI Language', 'type': 'select', 'options': [{ 'label': 'Български език', 'value': 'bul' }, { 'label': 'English', 'value': 'eng' }, { 'label': 'Deutsch', 'value': 'ger' }, { 'label': 'Español', 'value': 'esp' }, { 'label': 'Italiano', 'value': 'ita' }] },
-        { 'id': 'show_vid_overview', 'label': 'Show videos overview', 'type': 'checkbox' },
-    ],
-    'Player': [
-        { 'id': 'add-ons', 'label': 'ADD-ONS', 'type': 'button', 'icon': 'ic_addons', 'href': '#/addons' },
-        { 'id': 'subtitles_language', 'header': 'Default Subtitles Language', 'label': 'Default Subtitles Language', 'type': 'select', 'options': languageOptions },
-        { 'id': 'subtitles_size', 'header': 'Default Subtitles Size', 'label': 'Default Subtitles Size', 'type': 'select', 'options': [{ 'label': '72%', 'value': '72%' }, { 'label': '80%', 'value': '80%' }, { 'label': '100%', 'value': '100%' }, { 'label': '120%', 'value': '120%' }, { 'label': '140%', 'value': '140%' }, { 'label': '160%', 'value': '160%' }, { 'label': '180%', 'value': '180%' }] },
-        { 'id': 'subtitles_background', 'header': 'Subtitles Background', 'label': 'Subtitles background', 'type': 'select', 'options': [{ 'label': 'None', 'value': '' }, { 'label': 'Solid', 'value': 'solid' }, { 'label': 'Transparent', 'value': 'transparent' }] },
-        { 'id': 'subtitles_color', 'header': 'Subtitles color', 'label': 'Subtitles color', 'type': 'color' },
-        { 'id': 'subtitles_outline_color', 'header': 'Subtitles outline color', 'label': 'Subtitles outline color', 'type': 'color' },
-        { 'id': 'autoplay_next_vid', 'label': 'Auto-play next episode', 'type': 'checkbox' },
-        { 'id': 'pause_on_lost_focus', 'label': 'Pause playback when not in focus', 'type': 'checkbox' },
-        { 'id': 'use_external_player', 'label': 'Launch player in a separate window (advanced)', 'type': 'checkbox' },
-    ],
-    'Streaming': [
-        { 'id': 'streaming', 'type': 'streaming' },
-    ]
-};
-
-
-module.exports = {
-    settingsSections,
-};
diff --git a/src/routes/Settings/languages.json b/src/routes/Settings/languages.json
new file mode 100644
index 000000000..ad4abb3ec
--- /dev/null
+++ b/src/routes/Settings/languages.json
@@ -0,0 +1,187 @@
+{
+    "abk": "аҧсуа бызшәа",
+    "aar": "Afaraf",
+    "afr": "Afrikaans",
+    "aka": "Akan",
+    "sqi": "gjuha shqipe",
+    "amh": "አማርኛ",
+    "ara": "العربية",
+    "arg": "aragonés",
+    "hye": "Հայերեն",
+    "asm": "অসমীয়া",
+    "ava": "авар мацӀ",
+    "ave": "avesta",
+    "aym": "aymar aru",
+    "aze": "azərbaycan dili",
+    "bam": "bamanankan",
+    "bak": "башҡорт теле",
+    "eus": "euskara",
+    "bel": "беларуская мова",
+    "ben": "বাংলা",
+    "bih": "भोजपुरी",
+    "bis": "Bislama",
+    "bos": "bosanski jezik",
+    "bre": "brezhoneg",
+    "bul": "български език",
+    "mya": "ဗမာစာ",
+    "cat": "català",
+    "cha": "Chamoru",
+    "che": "нохчийн мотт",
+    "nya": "chiCheŵa",
+    "zho": "中文 (Zhōngwén)",
+    "chv": "чӑваш чӗлхи",
+    "cor": "Kernewek",
+    "cos": "corsu",
+    "cre": "ᓀᐦᐃᔭᐍᐏᐣ",
+    "hrv": "hrvatski jezik",
+    "ces": "čeština",
+    "dan": "dansk",
+    "div": "ދިވެހި",
+    "nld": "Nederlands",
+    "dzo": "རྫོང་ཁ",
+    "eng": "English",
+    "epo": "Esperanto",
+    "est": "eesti",
+    "ewe": "Eʋegbe",
+    "fao": "føroyskt",
+    "fij": "vosa Vakaviti",
+    "fin": "suomi",
+    "fre": "français",
+    "ful": "Fulfulde",
+    "glg": "galego",
+    "kat": "ქართული",
+    "ger": "Deutsch",
+    "ell": "ελληνικά",
+    "grn": "Avañe'ẽ",
+    "guj": "ગુજરાતી",
+    "hat": "Kreyòl ayisyen",
+    "hau": "Hausa",
+    "heb": "עברית",
+    "her": "Otjiherero",
+    "hin": "हिन्दी",
+    "hmo": "Hiri Motu",
+    "hun": "magyar",
+    "ina": "Interlingua",
+    "ind": "Bahasa Indonesia",
+    "ile": "Interlingue",
+    "gle": "Gaeilge",
+    "ibo": "Asụsụ Igbo",
+    "ipk": "Iñupiaq",
+    "ido": "Ido",
+    "isl": "Íslenska",
+    "ita": "italiano",
+    "iku": "ᐃᓄᒃᑎᑐᑦ",
+    "jpn": "日本語 (にほんご)",
+    "jav": "basa Jawa",
+    "kal": "kalaallisut",
+    "kan": "ಕನ್ನಡ",
+    "kau": "Kanuri",
+    "kas": "कश्मीरी",
+    "kaz": "қазақ тілі",
+    "khm": "ខ្មែរ",
+    "kik": "Gĩkũyũ",
+    "kin": "Ikinyarwanda",
+    "kir": "Кыргызча",
+    "kom": "коми кыв",
+    "kon": "KiKongo",
+    "kor": "한국어 (韓國語)",
+    "kur": "Kurdî",
+    "kua": "Kuanyama",
+    "lat": "latine",
+    "ltz": "Lëtzebuergesch",
+    "lug": "Luganda",
+    "lim": "Limburgs",
+    "lin": "Lingála",
+    "lao": "ພາສາລາວ",
+    "lit": "lietuvių kalba",
+    "lub": "Tshiluba",
+    "lav": "latviešu valoda",
+    "glv": "Gaelg",
+    "mkd": "македонски јазик",
+    "mlg": "fiteny malagasy",
+    "msa": "bahasa Melayu",
+    "mal": "മലയാളം",
+    "mlt": "Malti",
+    "mri": "te reo Māori",
+    "mar": "मराठी",
+    "mah": "Kajin M̧ajeļ",
+    "mon": "монгол",
+    "nau": "Ekakairũ Naoero",
+    "nav": "Diné bizaad",
+    "nob": "Norsk bokmål",
+    "nde": "isiNdebele",
+    "nep": "नेपाली",
+    "ndo": "Owambo",
+    "nno": "Norsk nynorsk",
+    "nor": "Norsk",
+    "iii": "ꆈꌠ꒿ Nuosuhxop",
+    "nbl": "isiNdebele",
+    "oci": "occitan",
+    "oji": "ᐊᓂᔑᓈᐯᒧᐎᓐ",
+    "chu": "ѩзыкъ словѣньскъ",
+    "orm": "Afaan Oromoo",
+    "ori": "ଓଡ଼ିଆ",
+    "oss": "ирон æвзаг",
+    "pan": "ਪੰਜਾਬੀ",
+    "pli": "पाऴि",
+    "fas": "فارسی",
+    "pol": "język polski",
+    "pus": "پښتو",
+    "por": "português",
+    "pob": "português Brazil",
+    "que": "Runa Simi",
+    "roh": "rumantsch grischun",
+    "run": "Ikirundi",
+    "ron": "limba română",
+    "rus": "русский язык",
+    "san": "संस्कृतम्",
+    "srd": "sardu",
+    "snd": "सिन्धी",
+    "sme": "Davvisámegiella",
+    "smo": "gagana fa'a Samoa",
+    "sag": "yângâ tî sängö",
+    "srp": "српски језик",
+    "gla": "Gàidhlig",
+    "sna": "chiShona",
+    "sin": "සිංහල",
+    "slk": "slovenčina",
+    "slv": "slovenski jezik",
+    "som": "Soomaaliga",
+    "sot": "Sesotho",
+    "spa": "español",
+    "sun": "Basa Sunda",
+    "swa": "Kiswahili",
+    "ssw": "SiSwati",
+    "swe": "Svenska",
+    "tam": "தமிழ்",
+    "tel": "తెలుగు",
+    "tgk": "тоҷикӣ",
+    "tha": "ไทย",
+    "tir": "ትግርኛ",
+    "bod": "བོད་ཡིག",
+    "tuk": "Türkmen",
+    "tgl": "Wikang Tagalog",
+    "tsn": "Setswana",
+    "ton": "faka Tonga",
+    "tur": "Türkçe",
+    "tso": "Xitsonga",
+    "tat": "татар теле",
+    "twi": "Twi",
+    "tah": "Reo Tahiti",
+    "uig": "Uyƣurqə",
+    "ukr": "українська мова",
+    "urd": "اردو",
+    "uzb": "O'zbek",
+    "ven": "Tshivenḓa",
+    "vie": "Tiếng Việt",
+    "vol": "Volapük",
+    "wln": "walon",
+    "cym": "Cymraeg",
+    "wol": "Wollof",
+    "fry": "Frysk",
+    "xho": "isiXhosa",
+    "yid": "ייִדיש",
+    "yor": "Yorùbá",
+    "zha": "Saɯ cueŋƅ",
+    "zul": "isiZulu"
+}
\ No newline at end of file
diff --git a/src/routes/Settings/styles.less b/src/routes/Settings/styles.less
index df5281628..9757d578e 100644
--- a/src/routes/Settings/styles.less
+++ b/src/routes/Settings/styles.less
@@ -1,4 +1,13 @@
-.settings-parent-container {
+:import('~stremio/common/Checkbox/styles.less') {
+    checkbox-icon: icon;
+}
+
+:import('~stremio/common/Multiselect/styles.less') {
+    multiselect-menu-container: menu-container;
+    multiselect-label: label;
+}
+
+.settings-container {
     display: flex;
     flex-direction: column;
     width: 100%;
@@ -10,32 +19,242 @@
         align-self: stretch;
     }
 
-    .settings-container {
-        width: 100%;
-        height: 100%;
+    .settings-content {
+        flex: 1;
+        align-self: stretch;
         display: flex;
         flex-direction: row;
-        background-color: var(--color-backgroundlight);
-        --input-width: 35rem;
-    
-        .side-menu {
-            padding: 1rem;
-            width: 17rem;
+
+        .side-menu-container {
+            flex: none;
+            align-self: stretch;
             display: flex;
             flex-direction: column;
+            width: 17rem;
+            padding: 1rem;
             background-color: var(--color-backgroundlighter);
 
+            .side-menu-button {
+                flex: none;
+                align-self: stretch;
+                padding: 1rem;
+                font-size: 1.1rem;
+                color: var(--color-surfacelighter);
 
+                &.selected {
+                    background-color: var(--color-background);
+                }
+
+                &:hover {
+                    background-color: var(--color-surface20);
+                }
+            }
+
+            .spacing {
+                flex: 1;
+            }
+
+            .version-info-label {
+                margin: 0.5rem 0;
+                color: var(--color-surfacelight);
+            }
         }
 
-        .scroll-container {
-            padding: 0 2rem;
+        .sections-container {
             flex: 1;
+            align-self: stretch;
+            padding: 0 2rem;
             overflow-y: auto;
 
-            >:not(:last-child) {
-                border-bottom: calc(var(--focusable-border-size) * 0.5) solid var(--color-primary);
+            .section-container {
+                display: flex;
+                flex-direction: column;
+                padding: 2rem 0;
+                overflow: visible;
+
+                &:first-child {
+                    padding-top: 1rem;
+                }
+
+                &:not(:last-child) {
+                    border-bottom: thin solid var(--color-primary40);
+                }
+
+                .section-title {
+                    flex: none;
+                    align-self: stretch;
+                    font-size: 1.8rem;
+                    line-height: 3.4rem;
+                    margin-bottom: 1rem;
+                    color: var(--color-surfacelighter);
+                }
+
+                .option-container {
+                    flex: none;
+                    align-self: stretch;
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                    max-width: 35rem;
+                    margin-bottom: 2rem;
+                    overflow: visible;
+
+                    &:last-child {
+                        margin-bottom: 0;
+                    }
+
+                    &.user-info-option-container {
+                        height: 7rem;
+
+                        .avatar-container {
+                            flex: none;
+                            align-self: stretch;
+                            width: 7rem;
+                            margin-right: 1rem;
+                            border-radius: 50%;
+                            background-size: cover;
+                            background-repeat: no-repeat;
+                            background-position: center;
+                            background-origin: content-box;
+                            background-clip: content-box;
+                        }
+
+                        .email-logout-container {
+                            flex: 1;
+                            align-self: stretch;
+                            display: flex;
+                            flex-direction: column;
+                            padding: 1rem 0;
+
+                            .email-label-container, .logout-button-container {
+                                display: flex;
+                                flex-direction: row;
+                                align-items: center;
+                            }
+
+                            .email-label-container {
+                                flex: 1 0 auto;
+
+                                .email-label {
+                                    flex: 1;
+                                    font-size: 1.4rem;
+                                    max-height: 2.4em;
+                                    color: var(--color-surfacelighter);
+                                }
+                            }
+
+                            .logout-button-container {
+                                flex: 0 1 50%;
+
+                                &:hover, &:focus {
+                                    outline: none;
+
+                                    .logout-label {
+                                        color: var(--color-surfacelighter);
+                                        text-decoration: underline;
+                                    }
+                                }
+
+                                .logout-label {
+                                    flex: 1;
+                                    max-height: 1.2em;
+                                    color: var(--color-surface);
+                                }
+                            }
+                        }
+                    }
+
+                    .option-name-container, .option-input-container {
+                        flex: 1 1 50%;
+                        display: flex;
+                        flex-direction: row;
+                        align-items: center;
+
+                        .icon {
+                            flex: none;
+                            width: 1.5rem;
+                            height: 1.5rem;
+                            margin-right: 0.5rem;
+                            fill: var(--color-surfacelighter);
+                        }
+
+                        .label {
+                            flex-grow: 0;
+                            flex-shrink: 1;
+                            flex-basis: auto;
+                            line-height: 1.5rem;
+                            color: var(--color-surfacelighter);
+                        }
+                    }
+
+                    .option-name-container {
+                        justify-content: flex-start;
+                        padding: 1rem 1rem 1rem 0;
+                        margin-right: 2rem;
+                    }
+
+                    .option-input-container {
+                        padding: 1rem;
+
+                        &.button-container {
+                            justify-content: center;
+                            background-color: var(--color-primary);
+
+                            &:hover {
+                                background-color: var(--color-primarylight);
+                            }
+                        }
+
+                        &.multiselect-container {
+                            >.multiselect-label {
+                                line-height: 1.5rem;
+                                max-height: 1.5rem;
+                            }
+
+                            .multiselect-menu-container {
+                                max-height: calc(3.2rem * 7);
+                                overflow: auto;
+                            }
+                        }
+
+                        &.link-container {
+                            flex: 0 1 auto;
+                            padding: 1rem 0;
+
+                            &:hover {
+                                .label {
+                                    text-decoration: underline;
+                                }
+                            }
+                        }
+
+                        &.checkbox-container {
+                            justify-content: center;
+
+                            .checkbox-icon {
+                                width: 1.5rem;
+                                height: 1.5rem;
+                            }
+                        }
+
+                        &.color-input-container {
+                            padding: 1.75rem 1rem;
+                        }
+
+                        &.info-container {
+                            justify-content: center;
+
+                            &.selectable {
+                                user-select: text;
+
+                                .label {
+                                    user-select: text;
+                                }
+                            }
+                        }
+                    }
+                }
             }
         }
     }
-}
+}
\ No newline at end of file
diff --git a/src/routes/Settings/useProfileSettingsInputs.js b/src/routes/Settings/useProfileSettingsInputs.js
new file mode 100644
index 000000000..42e06cd50
--- /dev/null
+++ b/src/routes/Settings/useProfileSettingsInputs.js
@@ -0,0 +1,202 @@
+const React = require('react');
+const { useServices } = require('stremio/services');
+const { useProfile } = require('stremio/common');
+const languages = require('./languages');
+
+const SUBTITLES_SIZES = [75, 100, 125, 150, 175, 200, 250];
+
+const useProfileSettingsInputs = () => {
+    const { core } = useServices();
+    const profile = useProfile();
+    const interfaceLanguageSelect = React.useMemo(() => ({
+        options: Object.keys(languages).map((code) => ({
+            value: code,
+            label: languages[code]
+        })),
+        selected: [profile.settings.interface_language],
+        renderLabelText: () => {
+            return typeof languages[profile.settings.interface_language] === 'string' ?
+                languages[profile.settings.interface_language]
+                :
+                profile.settings.interface_language;
+        },
+        onSelect: (event) => {
+            core.dispatch({
+                action: 'Ctx',
+                args: {
+                    action: 'UpdateSettings',
+                    args: {
+                        ...profile.settings,
+                        interface_language: event.value
+                    }
+                }
+            });
+        }
+    }), [profile.settings]);
+    const subtitlesLanguageSelect = React.useMemo(() => ({
+        options: Object.keys(languages).map((code) => ({
+            value: code,
+            label: languages[code]
+        })),
+        selected: [profile.settings.subtitles_language],
+        renderLabelText: () => {
+            return typeof languages[profile.settings.subtitles_language] === 'string' ?
+                languages[profile.settings.subtitles_language]
+                :
+                profile.settings.subtitles_language;
+        },
+        onSelect: (event) => {
+            core.dispatch({
+                action: 'Ctx',
+                args: {
+                    action: 'UpdateSettings',
+                    args: {
+                        ...profile.settings,
+                        subtitles_language: event.value
+                    }
+                }
+            });
+        }
+    }), [profile.settings]);
+    const subtitlesSizeSelect = React.useMemo(() => ({
+        options: SUBTITLES_SIZES.map((size) => ({
+            value: `${size}`,
+            label: `${size}%`
+        })),
+        selected: [`${profile.settings.subtitles_size}`],
+        renderLabelText: () => {
+            return `${profile.settings.subtitles_size}%`;
+        },
+        onSelect: (event) => {
+            core.dispatch({
+                action: 'Ctx',
+                args: {
+                    action: 'UpdateSettings',
+                    args: {
+                        ...profile.settings,
+                        subtitles_size: parseInt(event.value)
+                    }
+                }
+            });
+        }
+    }), [profile.settings]);
+    const subtitlesTextColorInput = React.useMemo(() => ({
+        value: profile.settings.subtitles_text_color,
+        onChange: (event) => {
+            core.dispatch({
+                action: 'Ctx',
+                args: {
+                    action: 'UpdateSettings',
+                    args: {
+                        ...profile.settings,
+                        subtitles_text_color: event.value
+                    }
+                }
+            });
+        }
+    }), [profile.settings]);
+    const subtitlesBackgroundColorInput = React.useMemo(() => ({
+        value: profile.settings.subtitles_background_color,
+        onChange: (event) => {
+            core.dispatch({
+                action: 'Ctx',
+                args: {
+                    action: 'UpdateSettings',
+                    args: {
+                        ...profile.settings,
+                        subtitles_background_color: event.value
+                    }
+                }
+            });
+        }
+    }), [profile.settings]);
+    const subtitlesOutlineColorInput = React.useMemo(() => ({
+        value: profile.settings.subtitles_outline_color,
+        onChange: (event) => {
+            core.dispatch({
+                action: 'Ctx',
+                args: {
+                    action: 'UpdateSettings',
+                    args: {
+                        ...profile.settings,
+                        subtitles_outline_color: event.value
+                    }
+                }
+            });
+        }
+    }), [profile.settings]);
+    const bingeWatchingCheckbox = React.useMemo(() => ({
+        checked: profile.settings.binge_watching,
+        onClick: () => {
+            core.dispatch({
+                action: 'Ctx',
+                args: {
+                    action: 'UpdateSettings',
+                    args: {
+                        ...profile.settings,
+                        binge_watching: !profile.settings.binge_watching
+                    }
+                }
+            });
+        }
+    }), [profile.settings]);
+    const playInBackgroundCheckbox = React.useMemo(() => ({
+        checked: profile.settings.play_in_background,
+        onClick: () => {
+            core.dispatch({
+                action: 'Ctx',
+                args: {
+                    action: 'UpdateSettings',
+                    args: {
+                        ...profile.settings,
+                        play_in_background: !profile.settings.play_in_background
+                    }
+                }
+            });
+        }
+    }), [profile.settings]);
+    const playInExternalPlayerCheckbox = React.useMemo(() => ({
+        checked: profile.settings.play_in_external_player,
+        onClick: () => {
+            core.dispatch({
+                action: 'Ctx',
+                args: {
+                    action: 'UpdateSettings',
+                    args: {
+                        ...profile.settings,
+                        play_in_external_player: !profile.settings.play_in_external_player
+                    }
+                }
+            });
+        }
+    }), [profile.settings]);
+    const hardwareDecodingCheckbox = React.useMemo(() => ({
+        checked: profile.settings.hardware_decoding,
+        onClick: () => {
+            core.dispatch({
+                action: 'Ctx',
+                args: {
+                    action: 'UpdateSettings',
+                    args: {
+                        ...profile.settings,
+                        hardware_decoding: !profile.settings.hardware_decoding
+                    }
+                }
+            });
+        }
+    }), [profile.settings]);
+    return {
+        interfaceLanguageSelect,
+        subtitlesLanguageSelect,
+        subtitlesSizeSelect,
+        subtitlesTextColorInput,
+        subtitlesBackgroundColorInput,
+        subtitlesOutlineColorInput,
+        bingeWatchingCheckbox,
+        playInBackgroundCheckbox,
+        playInExternalPlayerCheckbox,
+        hardwareDecodingCheckbox
+    };
+};
+
+module.exports = useProfileSettingsInputs;
diff --git a/src/routes/Settings/useSettings.js b/src/routes/Settings/useSettings.js
deleted file mode 100644
index 4f71eba0e..000000000
--- a/src/routes/Settings/useSettings.js
+++ /dev/null
@@ -1,68 +0,0 @@
-const React = require('react');
-const { useServices } = require('stremio/services');
-
-const IGNORED_SETTINGS = Object.freeze(['user', 'streaming']);
-
-module.exports = () => {
-    const { core } = useServices();
-
-    const [settings, setSettings] = React.useState({
-        user: null,
-        streaming: {},
-        streaming_loaded: false,
-        streaming_error: ""
-    });
-
-    React.useEffect(() => {
-        const onNewState = () => {
-            const { ctx, streaming_server_settings } = core.getState()
-            try {
-                const newSettings = {
-                    ...settings,
-                    ...ctx.content.settings,
-                    user: ctx.content.auth ? ctx.content.auth.user : null,
-                    streaming: streaming_server_settings && streaming_server_settings.ready || {},
-                    streaming_loaded: streaming_server_settings && !!(streaming_server_settings.error || streaming_server_settings.ready),
-                    streaming_error: streaming_server_settings && streaming_server_settings.error || "",
-                };
-                setSettings(newSettings);
-            } catch (e) {
-                console.log('Cannot update settings state', e);
-            }
-        };
-        const onStoreError = ({ event, args }) => {
-            if (event !== "SettingsStoreError") return;
-            // TODO: Notify with maybe a toast?
-            console.log(args)
-        }
-
-        core.on('NewModel', onNewState);
-        core.on('Event', onStoreError);
-
-        onNewState();
-
-        return () => {
-            // Destructor function
-            core.off('NewModel', onNewState);
-            core.off('Event', onStoreError);
-        };
-    }, []);
-
-    const setTheSettings = React.useCallback(newSettings => {
-        const event = { action: 'Settings', args: { args: {} } };
-        // This can be done with React.useEffect and newSettings.streaming as dependency
-        const streamingServerSettingChanged = settings.streaming && Object.keys(newSettings.streaming)
-            .some(prop => settings.streaming[prop] !== newSettings.streaming[prop]);
-        if (streamingServerSettingChanged) {
-            event.args = { settings: 'StoreStreamingServer', args: newSettings.streaming };
-        } else {
-            event.args.settings = 'Store';
-            Object.keys(newSettings)
-                .filter(prop => !IGNORED_SETTINGS.includes(prop))
-                .forEach(key => event.args.args[key] = newSettings[key].toString());
-        }
-        core.dispatch(event);
-    }, [settings])
-
-    return [settings, setTheSettings];
-};
diff --git a/src/routes/Settings/useStreamingServerSettingsInputs.js b/src/routes/Settings/useStreamingServerSettingsInputs.js
new file mode 100644
index 000000000..fc247c902
--- /dev/null
+++ b/src/routes/Settings/useStreamingServerSettingsInputs.js
@@ -0,0 +1,134 @@
+const React = require('react');
+const isEqual = require('lodash.isequal');
+const { useServices } = require('stremio/services');
+const { useStreamingServer } = require('stremio/common');
+
+const CACHE_SIZES = [0, 2147483648, 5368709120, 10737418240, null];
+
+const cacheSizeToString = (size) => {
+    return size === null ?
+        'Infinite'
+        :
+        size === 0 ?
+            'No caching'
+            :
+            `${size / 1024 / 1024 / 1024}GiB`;
+};
+
+const TORRENT_PROFILES = {
+    default: {
+        btDownloadSpeedHardLimit: 2621440,
+        btDownloadSpeedSoftLimit: 1677721.6,
+        btHandshakeTimeout: 20000,
+        btMaxConnections: 35,
+        btMinPeersForStable: 5,
+        btRequestTimeout: 4000
+    },
+    soft: {
+        btDownloadSpeedHardLimit: 1677721.6,
+        btDownloadSpeedSoftLimit: 1677721.6,
+        btHandshakeTimeout: 20000,
+        btMaxConnections: 35,
+        btMinPeersForStable: 5,
+        btRequestTimeout: 4000
+    },
+    fast: {
+        btDownloadSpeedHardLimit: 39321600,
+        btDownloadSpeedSoftLimit: 4194304,
+        btHandshakeTimeout: 20000,
+        btMaxConnections: 200,
+        btMinPeersForStable: 10,
+        btRequestTimeout: 4000
+    }
+};
+
+const useStreaminServerSettingsInputs = () => {
+    const { core } = useServices();
+    const streaminServer = useStreamingServer();
+    const cacheSizeSelect = React.useMemo(() => {
+        if (streaminServer.type !== 'Ready') {
+            return null;
+        }
+
+        return {
+            options: CACHE_SIZES.map((size) => ({
+                label: cacheSizeToString(size),
+                value: JSON.stringify(size)
+            })),
+            selected: [JSON.stringify(streaminServer.settings.cacheSize)],
+            renderLabelText: () => {
+                return cacheSizeToString(streaminServer.settings.cacheSize);
+            },
+            onSelect: (event) => {
+                core.dispatch({
+                    action: 'Ctx',
+                    args: {
+                        action: 'UpdateSettings',
+                        args: {
+                            ...streaminServer.settings,
+                            cacheSize: JSON.parse(event.value)
+                        }
+                    }
+                });
+            }
+        };
+    }, [streaminServer.type, streaminServer.settings]);
+    const torrentProfileSelect = React.useMemo(() => {
+        if (streaminServer.type !== 'Ready') {
+            return null;
+        }
+
+        const selectedTorrentProfile = {
+            btDownloadSpeedHardLimit: streaminServer.settings.btDownloadSpeedHardLimit,
+            btDownloadSpeedSoftLimit: streaminServer.settings.btDownloadSpeedSoftLimit,
+            btHandshakeTimeout: streaminServer.settings.btHandshakeTimeout,
+            btMaxConnections: streaminServer.settings.btMaxConnections,
+            btMinPeersForStable: streaminServer.settings.btMinPeersForStable,
+            btRequestTimeout: streaminServer.settings.btRequestTimeout
+        };
+        const isCustomTorrentProfileSelected = Object.values(TORRENT_PROFILES).every((torrentProfile) => {
+            return !isEqual(torrentProfile, selectedTorrentProfile);
+        });
+        return {
+            options: Object.keys(TORRENT_PROFILES)
+                .map((profileName) => ({
+                    label: profileName,
+                    value: JSON.stringify(TORRENT_PROFILES[profileName])
+                }))
+                .concat(
+                    isCustomTorrentProfileSelected ?
+                        [{
+                            label: 'custom',
+                            value: JSON.stringify(selectedTorrentProfile)
+                        }]
+                        :
+                        []
+                ),
+            selected: [JSON.stringify(selectedTorrentProfile)],
+            renderLabelText: () => {
+                return Object.keys(TORRENT_PROFILES).reduce((result, profileName) => {
+                    if (isEqual(TORRENT_PROFILES[profileName], selectedTorrentProfile)) {
+                        return profileName;
+                    }
+
+                    return result;
+                }, 'custom');
+            },
+            onSelect: (event) => {
+                core.dispatch({
+                    action: 'Ctx',
+                    args: {
+                        action: 'UpdateSettings',
+                        args: {
+                            ...streaminServer.settings,
+                            ...JSON.parse(event.value)
+                        }
+                    }
+                });
+            }
+        };
+    }, [streaminServer.type, streaminServer.settings]);
+    return { cacheSizeSelect, torrentProfileSelect };
+};
+
+module.exports = useStreaminServerSettingsInputs;
diff --git a/src/services/KeyboardNavigation/KeyboardNavigation.js b/src/services/KeyboardNavigation/KeyboardNavigation.js
index bd46169d2..c3ad4a65b 100644
--- a/src/services/KeyboardNavigation/KeyboardNavigation.js
+++ b/src/services/KeyboardNavigation/KeyboardNavigation.js
@@ -12,6 +12,14 @@ function KeyboardNavigation() {
         if (tab) {
             event.preventDefault();
             window.location = tab.href;
+            return;
+        }
+
+        if (event.target.tagName !== 'INPUT') {
+            if (event.key === 'Backspace') {
+                window.history.back();
+                return;
+            }
         }
     }
     function start() {
diff --git a/webpack.config.js b/webpack.config.js
index cf679670e..9676769b4 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,10 +1,12 @@
 const path = require('path');
+const child_process = require('child_process');
 const webpack = require('webpack');
 const HtmlWebPackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
+const pachageJson = require('./package.json');
 
 module.exports = (env, argv) => ({
     entry: './src/index.js',
@@ -130,6 +132,8 @@ module.exports = (env, argv) => ({
     plugins: [
         new webpack.EnvironmentPlugin({
             DEBUG: argv.mode !== 'production',
+            VERSION: pachageJson.version,
+            COMMIT_HASH: child_process.execSync('git rev-parse HEAD').toString(),
             ...env
         }),
         new webpack.ProgressPlugin(),