diff --git a/src/common/useInLibrary.js b/src/common/useInLibrary.js
index 2f595ed15..f9de835c0 100644
--- a/src/common/useInLibrary.js
+++ b/src/common/useInLibrary.js
@@ -1,12 +1,60 @@
-const useBinaryState = require('stremio/common/useBinaryState');
+const React = require('react');
+const { useServices } = require('stremio/services');
+const useModelState = require('stremio/common/useModelState');
 
-const useInLibrary = (id) => {
-    const [inLibrary, addToLibrary, removeFromLibrary, toggleInLibrary] = useBinaryState(false);
-    if (typeof id === 'string') {
-        return [inLibrary, addToLibrary, removeFromLibrary, toggleInLibrary];
-    } else {
-        return [false, null, null, null];
-    }
+const useInLibrary = (metaItem) => {
+    const { core } = useServices();
+    const initLibraryItemsState = React.useCallback(() => {
+        return core.getState('library_items');
+    }, []);
+    const libraryItems = useModelState({
+        model: 'library_items',
+        init: initLibraryItemsState
+    });
+    const addToLibrary = React.useCallback((metaItem) => {
+        core.dispatch({
+            action: 'UserOp',
+            args: {
+                userOp: 'AddToLibrary',
+                args: {
+                    meta_item: metaItem,
+                    now: new Date()
+                }
+            }
+        });
+    }, []);
+    const removeFromLibrary = React.useCallback((id) => {
+        core.dispatch({
+            action: 'UserOp',
+            args: {
+                userOp: 'RemoveFromLibrary',
+                args: {
+                    id,
+                    now: new Date()
+                }
+            }
+        });
+    }, []);
+    const inLibrary = React.useMemo(() => {
+        return typeof metaItem === 'object' && metaItem !== null ?
+            libraryItems.ids.includes(metaItem.id)
+            :
+            false;
+    }, [metaItem, libraryItems]);
+    const toggleInLibrary = React.useMemo(() => {
+        if (typeof metaItem !== 'object' || metaItem === null) {
+            return null;
+        }
+
+        return () => {
+            if (inLibrary) {
+                removeFromLibrary(metaItem.id);
+            } else {
+                addToLibrary(metaItem);
+            }
+        };
+    }, [metaItem, inLibrary]);
+    return [inLibrary, toggleInLibrary];
 };
 
 module.exports = useInLibrary;
diff --git a/src/routes/Addons/Addon/Addon.js b/src/routes/Addons/Addon/Addon.js
index f26dbcf3b..d646ed2b9 100644
--- a/src/routes/Addons/Addon/Addon.js
+++ b/src/routes/Addons/Addon/Addon.js
@@ -2,24 +2,54 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Icon = require('stremio-icons/dom');
-const { Button } = require('stremio/common');
+const { Button, Image } = require('stremio/common');
 const styles = require('./styles');
 
-const Addon = ({ className, id, name, logo, description, types, version, installed, toggle, onShareButtonClicked }) => {
-    const onKeyUp = React.useCallback((event) => {
-        if (event.key === 'Enter' && typeof toggle === 'function') {
-            toggle(event);
+const Addon = ({ className, id, name, version, logo, description, types, installed, onToggle, onShare, dataset }) => {
+    const toggleButtonOnClick = React.useCallback((event) => {
+        if (typeof onToggle === 'function') {
+            onToggle({
+                type: 'toggle',
+                nativeEvent: event.nativeEvent,
+                reactEvent: event,
+                dataset: dataset
+            });
         }
-    }, [toggle]);
+    }, [onToggle, dataset]);
+    const shareButtonOnClick = React.useCallback((event) => {
+        if (typeof onShare === 'function') {
+            onShare({
+                type: 'share',
+                nativeEvent: event.nativeEvent,
+                reactEvent: event,
+                dataset: dataset
+            });
+        }
+    }, [onShare, dataset]);
+    const onKeyDown = React.useCallback((event) => {
+        if (event.key === 'Enter' && typeof onToggle === 'function') {
+            onToggle({
+                type: 'toggle',
+                nativeEvent: event.nativeEvent,
+                reactEvent: event,
+                dataset: dataset
+            });
+        }
+    }, [onToggle, dataset]);
+    const renderLogoFallback = React.useMemo(() => () => {
+        return (
+            <Icon className={styles['icon']} icon={'ic_addons'} />
+        );
+    }, []);
     return (
-        <Button className={classnames(styles['addon-container'], className)} data-id={id} onKeyUp={onKeyUp}>
+        <Button className={classnames(className, styles['addon-container'])} onKeyDown={onKeyDown}>
             <div className={styles['logo-container']}>
-                {
-                    typeof logo === 'string' && logo.length > 0 ?
-                        <img className={styles['logo']} src={logo} alt={' '} />
-                        :
-                        <Icon className={styles['icon']} icon={'ic_addons'} />
-                }
+                <Image
+                    className={styles['logo']}
+                    src={logo}
+                    alt={' '}
+                    renderFallback={renderLogoFallback}
+                />
             </div>
             <div className={styles['info-container']}>
                 <div className={styles['name-container']} title={typeof name === 'string' && name.length > 0 ? name : id}>
@@ -32,10 +62,10 @@ const Addon = ({ className, id, name, logo, description, types, version, install
                         null
                 }
                 {
-                    Array.isArray(types) ?
+                    Array.isArray(types) && types.length > 0 ?
                         <div className={styles['types-container']}>
                             {
-                                types.length <= 1 ?
+                                types.length === 1 ?
                                     types.join('')
                                     :
                                     types.slice(0, -1).join(', ') + ' & ' + types[types.length - 1]
@@ -52,10 +82,10 @@ const Addon = ({ className, id, name, logo, description, types, version, install
                 }
             </div>
             <div className={styles['buttons-container']}>
-                <Button className={installed ? styles['uninstall-button-container'] : styles['install-button-container']} title={installed ? 'Uninstall' : 'Install'} tabIndex={-1} data-id={id} onClick={toggle}>
+                <Button className={installed ? styles['uninstall-button-container'] : styles['install-button-container']} title={installed ? 'Uninstall' : 'Install'} tabIndex={-1} onClick={toggleButtonOnClick}>
                     <div className={styles['label']}>{installed ? 'Uninstall' : 'Install'}</div>
                 </Button>
-                <Button className={styles['share-button-container']} title={'Share addon'} tabIndex={-1} onClick={onShareButtonClicked}>
+                <Button className={styles['share-button-container']} title={'Share addon'} tabIndex={-1} onClick={shareButtonOnClick}>
                     <Icon className={styles['icon']} icon={'ic_share'} />
                     <div className={styles['label']}>Share addon</div>
                 </Button>
@@ -68,13 +98,14 @@ Addon.propTypes = {
     className: PropTypes.string,
     id: PropTypes.string,
     name: PropTypes.string,
+    version: PropTypes.string,
     logo: PropTypes.string,
     description: PropTypes.string,
     types: PropTypes.arrayOf(PropTypes.string),
-    version: PropTypes.string,
     installed: PropTypes.bool,
-    toggle: PropTypes.func,
-    onShareButtonClicked: PropTypes.func
+    onToggle: PropTypes.func,
+    onShare: PropTypes.func,
+    dataset: PropTypes.objectOf(PropTypes.string)
 };
 
 module.exports = Addon;
diff --git a/src/routes/Addons/Addon/styles.less b/src/routes/Addons/Addon/styles.less
index 2ae172544..e57eea428 100644
--- a/src/routes/Addons/Addon/styles.less
+++ b/src/routes/Addons/Addon/styles.less
@@ -1,7 +1,6 @@
 .addon-container {
     display: flex;
     flex-direction: row;
-    flex-wrap: wrap;
     align-items: flex-start;
     padding: 1rem;
     background-color: var(--color-backgroundlighter);
@@ -17,6 +16,7 @@
             display: block;
             width: 100%;
             height: 100%;
+            padding: 0.5rem;
             object-fit: contain;
             object-position: center;
         }
@@ -31,14 +31,13 @@
     }
 
     .info-container {
-        flex-grow: 1000;
+        flex-grow: 1;
         flex-shrink: 1;
         flex-basis: 0;
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
         align-items: baseline;
-        min-width: 40rem;
         padding: 0 0.5rem;
 
         .name-container {
@@ -47,7 +46,7 @@
             flex-basis: auto;
             padding: 0 0.5rem;
             max-height: 3.6em;
-            font-size: 1.5rem;
+            font-size: 1.6rem;
             color: var(--color-surfacelighter);
         }
 
@@ -55,6 +54,7 @@
             flex-grow: 1;
             flex-shrink: 1;
             flex-basis: auto;
+            margin-top: 0.5rem;
             padding: 0 0.5rem;
             max-height: 2.4em;
             color: var(--color-surfacelight);
@@ -83,22 +83,14 @@
     }
 
     .buttons-container {
-        flex-grow: 1;
-        flex-shrink: 0;
-        flex-basis: 0;
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-items: flex-end;
-        min-width: 17rem;
+        flex: none;
+        width: 17rem;
 
         .install-button-container, .uninstall-button-container, .share-button-container {
-            flex: none;
             display: flex;
             flex-direction: row;
             align-items: center;
             justify-content: center;
-            width: 17rem;
             height: 3.5rem;
             padding: 0 1rem;
 
@@ -106,13 +98,8 @@
                 margin-top: 1rem;
             }
 
-            &:not(:last-child) {
-                margin-right: 1rem;
-            }
-
             .icon {
                 flex: none;
-                display: block;
                 width: 1.5rem;
                 height: 1.5rem;
                 margin-right: 1rem;
diff --git a/src/routes/Addons/Addons.js b/src/routes/Addons/Addons.js
index cd68402df..5362c92e3 100644
--- a/src/routes/Addons/Addons.js
+++ b/src/routes/Addons/Addons.js
@@ -1,50 +1,93 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const Icon = require('stremio-icons/dom');
-const { Button, Multiselect, NavBar, TextInput, SharePrompt, ModalDialog } = require('stremio/common');
+const { Button, Multiselect, NavBar, TextInput, SharePrompt, ModalDialog, useBinaryState } = require('stremio/common');
 const Addon = require('./Addon');
-const AddonPrompt = require('./AddonPrompt');
 const useAddons = require('./useAddons');
-const useSelectedAddon = require('./useSelectedAddon');
+const useSelectableInputs = require('./useSelectableInputs');
 const styles = require('./styles');
 
+const navigateToAddonDetails = (addonsCatalogRequest, transportUrl) => {
+    const queryParams = new URLSearchParams([['addon', transportUrl]]);
+    if (addonsCatalogRequest !== null) {
+        const addonTransportUrl = encodeURIComponent(addonsCatalogRequest.base);
+        const catalogId = encodeURIComponent(addonsCatalogRequest.path.id);
+        const type = encodeURIComponent(addonsCatalogRequest.path.type_name);
+        window.location.replace(`#/addons/${addonTransportUrl}/${catalogId}/${type}?${queryParams}`);
+    } else {
+        window.location.replace(`#/addons?${queryParams}`);
+    }
+};
+
 const Addons = ({ urlParams, queryParams }) => {
-    const inputRef = React.useRef(null);
-    const [query, setQuery] = React.useState('');
-    const queryOnChange = React.useCallback((event) => {
-        setQuery(event.currentTarget.value);
-    }, []);
-    const [[addons, dropdowns, setSelectedAddon, installedAddons, error], installSelectedAddon, uninstallSelectedAddon] = useAddons(urlParams, queryParams);
-    const [addAddonModalOpened, setAddAddonModalOpened] = React.useState(false);
-    const [selectedAddon, clearSelectedAddon] = useSelectedAddon(queryParams.get('addon'));
-    const [sharedAddon, setSharedAddon] = React.useState(null);
-    const onAddAddonButtonClicked = React.useCallback(() => {
-        setAddAddonModalOpened(true);
-    }, []);
-    const onAddButtonClicked = React.useCallback(() => {
-        if (inputRef.current.value.length > 0) {
-            setSelectedAddon(inputRef.current.value);
-            setAddAddonModalOpened(false);
+    const addons = useAddons(urlParams);
+    const selectInputs = useSelectableInputs(addons);
+    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);
         }
-    }, [setSelectedAddon]);
-    const installedAddon = React.useCallback((currentAddon) => {
-        return installedAddons.some((installedAddon) => installedAddon.transportUrl === currentAddon.transportUrl);
-    }, [installedAddons]);
-    const toggleAddon = React.useCallback(() => {
-        installedAddon(selectedAddon) ? uninstallSelectedAddon(selectedAddon) : installSelectedAddon(selectedAddon);
-        clearSelectedAddon();
-    }, [selectedAddon]);
+    }, [addons]);
+    const addAddonModalButtons = React.useMemo(() => {
+        return [
+            {
+                className: styles['cancel-button'],
+                label: 'Cancel',
+                props: {
+                    onClick: closeAddAddonModal
+                }
+            },
+            {
+                label: 'Add',
+                props: {
+                    onClick: addAddonOnSubmit
+                }
+            }
+        ];
+    }, [addAddonOnSubmit]);
+    const [search, setSearch] = React.useState('');
+    const searchInputOnChange = React.useCallback((event) => {
+        setSearch(event.currentTarget.value);
+    }, []);
+    const [sharedTransportUrl, setSharedTransportUrl] = React.useState(null);
+    const clearSharedTransportUrl = React.useCallback(() => {
+        setSharedTransportUrl(null);
+    }, []);
+    const onAddonShare = React.useCallback((event) => {
+        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]);
+    React.useLayoutEffect(() => {
+        closeAddAddonModal();
+        setSearch('');
+        clearSharedTransportUrl();
+    }, [urlParams, queryParams]);
     return (
         <div className={styles['addons-container']}>
             <NavBar className={styles['nav-bar']} backButton={true} title={'Addons'} />
             <div className={styles['addons-content']}>
-                <div className={styles['top-bar-container']}>
-                    <Button className={styles['add-button-container']} title={'Add addon'} onClick={onAddAddonButtonClicked}>
+                <div className={styles['selectable-inputs-container']}>
+                    <Button className={styles['add-button-container']} title={'Add addon'} onClick={openAddAddonModal}>
                         <Icon className={styles['icon']} icon={'ic_plus'} />
                         <div className={styles['add-button-label']}>Add addon</div>
                     </Button>
-                    {dropdowns.map((dropdown, index) => (
-                        <Multiselect {...dropdown} key={index} className={styles['dropdown']} />
+                    {selectInputs.map((selectInput, index) => (
+                        <Multiselect
+                            {...selectInput}
+                            key={index}
+                            className={styles['select-input-container']}
+                        />
                     ))}
                     <label className={styles['search-bar-container']}>
                         <Icon className={styles['icon']} icon={'ic_search'} />
@@ -52,114 +95,94 @@ const Addons = ({ urlParams, queryParams }) => {
                             className={styles['search-input']}
                             type={'text'}
                             placeholder={'Search addons...'}
-                            value={query}
-                            onChange={queryOnChange}
+                            value={search}
+                            onChange={searchInputOnChange}
                         />
                     </label>
                 </div>
-                <div className={styles['addons-list-container']}>
-                    {
-                        error !== null ?
+                {
+                    addons.selectable.catalogs.length === 0 && addons.catalog_resource === null ?
+                        <div className={styles['message-container']}>
+                            No addons
+                        </div>
+                        :
+                        addons.catalog_resource === null ?
                             <div className={styles['message-container']}>
-                                {error.type}{error.type === 'Other' ? ` - ${error.content}` : null}
+                                No select
                             </div>
                             :
-                            Array.isArray(addons) ?
-                                addons.filter((addon) => query.length === 0 ||
-                                    ((typeof addon.manifest.name === 'string' && addon.manifest.name.toLowerCase().includes(query.toLowerCase())) ||
-                                        (typeof addon.manifest.description === 'string' && addon.manifest.description.toLowerCase().includes(query.toLowerCase()))
-                                    ))
-                                    .map((addon, index) => (
-                                        <Addon
-                                            {...addon.manifest}
-                                            key={index}
-                                            installed={installedAddon(addon)}
-                                            className={styles['addon']}
-                                            toggle={() => setSelectedAddon(addon.transportUrl)}
-                                            onShareButtonClicked={() => setSharedAddon(addon)}
-                                        />
-                                    ))
-                                :
+                            addons.catalog_resource.content.type === 'Err' ?
                                 <div className={styles['message-container']}>
-                                    Loading
+                                    Addons could not be loaded
                                 </div>
-                    }
-                </div>
-                {
-                    addAddonModalOpened ?
-                        <ModalDialog
-                            className={styles['add-addon-prompt-container']}
-                            title={'Add addon'}
-                            buttons={[
-                                {
-                                    label: 'Cancel',
-                                    className: styles['cancel-button'],
-                                    props: {
-                                        title: 'Cancel',
-                                        onClick: () => setAddAddonModalOpened(false)
-                                    }
-                                },
-                                {
-                                    label: 'Add',
-                                    props: {
-                                        title: 'Add',
-                                        onClick: onAddButtonClicked
-                                    }
-                                }
-                            ]}
-                            onCloseRequest={() => setAddAddonModalOpened(false)}
-                        >
-                            <TextInput ref={inputRef} className={styles['url-content']} type={'text'} tabIndex={'-1'} placeholder={'Paste url...'} />
-                        </ModalDialog>
-                        :
-                        null
-                }
-                {
-                    selectedAddon !== null ?
-                        <ModalDialog
-                            className={styles['addon-prompt-container']}
-                            buttons={[
-                                {
-                                    label: 'Cancel',
-                                    className: styles['cancel-button'],
-                                    props: {
-                                        title: 'Cancel',
-                                        onClick: clearSelectedAddon
-                                    }
-                                },
-                                {
-                                    label: installedAddon(selectedAddon) ? 'Uninstall' : 'Install',
-                                    props: {
-                                        title: installedAddon(selectedAddon) ? 'Uninstall' : 'Install',
-                                        onClick: toggleAddon
-                                    }
-                                }
-                            ]}
-                            onCloseRequest={clearSelectedAddon}
-                        >
-                            <AddonPrompt
-                                {...selectedAddon.manifest}
-                                transportUrl={selectedAddon.transportUrl}
-                                installed={installedAddon(selectedAddon)}
-                                official={selectedAddon.flags.official}
-                                cancel={clearSelectedAddon}
-                            />
-                        </ModalDialog>
-                        :
-                        null
-                }
-                {
-                    sharedAddon !== null ?
-                        <ModalDialog className={styles['share-prompt-container']} title={'Share addon'} onCloseRequest={() => setSharedAddon(null)}>
-                            <SharePrompt
-                                url={sharedAddon.transportUrl}
-                                close={() => setSharedAddon(null)}
-                            />
-                        </ModalDialog>
-                        :
-                        null
+                                :
+                                addons.catalog_resource.content.type === 'Loading' ?
+                                    <div className={styles['message-container']}>
+                                        Loading
+                                    </div>
+                                    :
+                                    <div className={styles['addons-list-container']}>
+                                        {
+                                            addons.catalog_resource.content.content
+                                                .filter((addon) => {
+                                                    return search.length === 0 ||
+                                                        (
+                                                            (typeof addon.manifest.name === 'string' && addon.manifest.name.toLowerCase().includes(search.toLowerCase())) ||
+                                                            (typeof addon.manifest.description === 'string' && addon.manifest.description.toLowerCase().includes(search.toLowerCase()))
+                                                        );
+                                                })
+                                                .map((addon, index) => (
+                                                    <Addon
+                                                        key={index}
+                                                        className={styles['addon']}
+                                                        id={addon.manifest.id}
+                                                        name={addon.manifest.name}
+                                                        version={addon.manifest.version}
+                                                        logo={addon.manifest.logo}
+                                                        description={addon.manifest.description}
+                                                        types={addon.manifest.types}
+                                                        installed={addon.installed}
+                                                        onToggle={onAddonToggle}
+                                                        onShare={onAddonShare}
+                                                        dataset={{ transportUrl: addon.transportUrl }}
+                                                    />
+                                                ))
+                                        }
+                                    </div>
                 }
             </div>
+            {
+                addAddonModalOpen ?
+                    <ModalDialog
+                        className={styles['add-addon-modal-container']}
+                        title={'Add addon'}
+                        buttons={addAddonModalButtons}
+                        onCloseRequest={closeAddAddonModal}>
+                        <TextInput
+                            ref={addAddonUrlInputRef}
+                            className={styles['addon-url-input']}
+                            type={'text'}
+                            placeholder={'Paste url...'}
+                            onSubmit={addAddonOnSubmit}
+                        />
+                    </ModalDialog>
+                    :
+                    null
+            }
+            {
+                typeof sharedTransportUrl === 'string' ?
+                    <ModalDialog
+                        className={styles['share-modal-container']}
+                        title={'Share addon'}
+                        onCloseRequest={clearSharedTransportUrl}>
+                        <SharePrompt
+                            className={styles['share-prompt-container']}
+                            url={sharedTransportUrl}
+                        />
+                    </ModalDialog>
+                    :
+                    null
+            }
         </div>
     );
 };
diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less
index ff3b7f2c1..f7ef52dcd 100644
--- a/src/routes/Addons/styles.less
+++ b/src/routes/Addons/styles.less
@@ -1,3 +1,7 @@
+:import('~stremio/common/Multiselect/styles.less') {
+    multiselect-menu-container: menu-container;
+}
+
 .addons-container {
     display: flex;
     flex-direction: column;
@@ -16,11 +20,12 @@
         display: flex;
         flex-direction: column;
 
-        .top-bar-container {
+        .selectable-inputs-container {
             flex: none;
+            align-self: stretch;
             display: flex;
             flex-direction: row;
-            margin: 2rem;
+            padding: 1.5rem;
             overflow: visible;
 
             .add-button-container {
@@ -30,7 +35,7 @@
                 align-items: center;
                 height: 3rem;
                 max-width: 15rem;
-                margin-right: 1rem;
+                margin-right: 1.5rem;
                 padding: 0 1rem;
                 background-color: var(--color-signal5);
 
@@ -40,8 +45,8 @@
 
                 .icon {
                     flex: none;
-                    width: 1.5rem;
-                    height: 1.5rem;
+                    width: 1.2rem;
+                    height: 1.2rem;
                     margin-right: 1rem;
                     fill: var(--color-surfacelighter);
                 }
@@ -56,12 +61,17 @@
                 }
             }
 
-            .dropdown {
+            .select-input-container {
                 flex-grow: 0;
                 flex-shrink: 1;
                 flex-basis: 15rem;
                 height: 3rem;
-                margin-right: 1rem;
+                margin-right: 1.5rem;
+
+                .multiselect-menu-container {
+                    max-height: calc(3.2rem * 7);
+                    overflow: auto;
+                }
             }
 
             .search-bar-container {
@@ -72,7 +82,6 @@
                 flex-direction: row;
                 align-items: center;
                 height: 3rem;
-                margin-right: 1rem;
                 padding: 0 1rem;
                 background-color: var(--color-backgroundlighter);
                 cursor: text;
@@ -82,7 +91,7 @@
                 }
 
                 .icon {
-                    display: block;
+                    flex: none;
                     width: 1.2rem;
                     height: 1.2rem;
                     margin-right: 1rem;
@@ -91,7 +100,6 @@
 
                 .search-input {
                     flex: 1;
-                    align-self: stretch;
                     color: var(--color-surfacelighter);
 
                     &::placeholder {
@@ -103,32 +111,31 @@
             }
         }
 
+        .message-container {
+            flex: 1;
+            align-self: stretch;
+            padding: 0 1.5rem;
+            font-size: 2rem;
+            color: var(--color-surfacelighter);
+        }
+
         .addons-list-container {
             flex: 1;
             align-self: stretch;
-            padding: 0 2rem;
+            padding: 0 1.5rem;
             overflow-y: auto;
 
             .addon {
-                width: 100%;
-                margin-bottom: 2rem;
-            }
-
-            .message-container {
-                padding: 0 2rem;
-                font-size: 2rem;
-                color: var(--color-surfacelighter);
+                margin-bottom: 1.5rem;
             }
         }
     }
 }
 
-.add-addon-prompt-container {
-    .url-content {
-        flex: 1;
-        width: 100%;
-        padding: 0.5rem;
-        font-size: 0.9rem;
+.add-addon-modal-container {
+    .addon-url-input {
+        width: 25rem;
+        padding: 0.5rem 1rem;
         color: var(--color-surfacedark);
         border: thin solid var(--color-surface);
     }
@@ -138,8 +145,8 @@
     }
 }
 
-.addon-prompt-container {
-    .cancel-button {
-        background-color: var(--color-surfacedark);
+.share-modal-container {
+    .share-prompt-container {
+        width: 25rem;
     }
 }
\ No newline at end of file
diff --git a/src/routes/Addons/useAddonDetails.js b/src/routes/Addons/useAddonDetails.js
new file mode 100644
index 000000000..afa45eceb
--- /dev/null
+++ b/src/routes/Addons/useAddonDetails.js
@@ -0,0 +1,48 @@
+const React = require('react');
+const { useModelState } = require('stremio/common');
+
+const initAddonDetailsState = () => ({
+    descriptor: null
+});
+
+const mapAddonDetailsStateWithCtx = (addonDetails, ctx) => {
+    const descriptor = addonDetails.descriptor !== null && addonDetails.descriptor.content.type === 'Ready' ?
+        {
+            ...addonDetails.descriptor,
+            content: {
+                ...addonDetails.descriptor.content,
+                installed: ctx.content.addons.some((addon) => addon.transportUrl === addonDetails.descriptor.transport_url),
+            }
+        }
+        :
+        addonDetails.descriptor;
+    return { descriptor };
+};
+
+const useAddonDetails = (queryParams) => {
+    const loadAddonDetailsAction = React.useMemo(() => {
+        if (queryParams.has('addon')) {
+            return {
+                action: 'Load',
+                args: {
+                    load: 'AddonDetails',
+                    args: {
+                        transport_url: queryParams.get('addon')
+                    }
+                }
+            };
+        } else {
+            return {
+                action: 'Unload'
+            };
+        }
+    }, [queryParams]);
+    return useModelState({
+        model: 'addon_details',
+        action: loadAddonDetailsAction,
+        mapWithCtx: mapAddonDetailsStateWithCtx,
+        init: initAddonDetailsState,
+    });
+};
+
+module.exports = useAddonDetails;
diff --git a/src/routes/Addons/useAddons.js b/src/routes/Addons/useAddons.js
index b29b23cd4..57be65b45 100644
--- a/src/routes/Addons/useAddons.js
+++ b/src/routes/Addons/useAddons.js
@@ -15,8 +15,28 @@ const initAddonsState = () => ({
 
 const mapAddonsStateWithCtx = (addons, ctx) => {
     const selectable = addons.selectable;
-    const catalog_resource = addons.catalog_resource;
-    // TODO add MY catalogId replace catalog content if resource catalog id is MY
+    // 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,
+            content: {
+                ...addons.catalog_resource.content,
+                content: addons.catalog_resource.content.content.map((descriptor) => ({
+                    transportUrl: descriptor.transportUrl,
+                    installed: ctx.content.addons.some((addon) => addon.transportUrl === descriptor.transportUrl),
+                    manifest: {
+                        id: descriptor.manifest.id,
+                        name: descriptor.manifest.name,
+                        version: descriptor.manifest.version,
+                        logo: descriptor.manifest.logo,
+                        description: descriptor.manifest.description,
+                        types: descriptor.manifest.types
+                    }
+                }))
+            }
+        }
+        :
+        addons.catalog_resource;
     return { selectable, catalog_resource };
 };
 
diff --git a/src/routes/Addons/useSelectableInputs.js b/src/routes/Addons/useSelectableInputs.js
index 8376fa846..1b1c4dd15 100644
--- a/src/routes/Addons/useSelectableInputs.js
+++ b/src/routes/Addons/useSelectableInputs.js
@@ -15,18 +15,6 @@ const equalWithouExtra = (request1, request2) => {
 };
 
 const mapSelectableInputs = (addons) => {
-    const selectedCatalogRequest = addons.catalog_resource !== null ?
-        addons.catalog_resource.request
-        :
-        {
-            base: null,
-            path: {
-                resource: 'addon_catalog',
-                id: null,
-                type_name: null,
-                extra: []
-            }
-        };
     const catalogSelect = {
         title: 'Select catalog',
         options: addons.selectable.catalogs
@@ -36,7 +24,8 @@ const mapSelectableInputs = (addons) => {
             })),
         selected: addons.selectable.catalogs
             .filter(({ load_request: { path: { id } } }) => {
-                return id === selectedCatalogRequest.path.id;
+                return addons.catalog_resource !== null &&
+                    addons.catalog_resource.request.path.id === id;
             })
             .map(({ load_request }) => JSON.stringify(load_request)),
         onSelect: (event) => {
@@ -52,7 +41,8 @@ const mapSelectableInputs = (addons) => {
             })),
         selected: addons.selectable.types
             .filter(({ load_request }) => {
-                return equalWithouExtra(load_request, selectedCatalogRequest);
+                return addons.catalog_resource !== null &&
+                    equalWithouExtra(addons.catalog_resource.request, load_request);
             })
             .map(({ load_request }) => JSON.stringify(load_request)),
         onSelect: (event) => {
diff --git a/src/routes/Addons/useSelectedAddon.js b/src/routes/Addons/useSelectedAddon.js
deleted file mode 100644
index 5bffaec37..000000000
--- a/src/routes/Addons/useSelectedAddon.js
+++ /dev/null
@@ -1,35 +0,0 @@
-const React = require('react');
-const UrlUtils = require('url');
-const { routesRegexp, useLocationHash, useRouteActive } = require('stremio/common');
-
-const useSelectedAddon = (transportUrl) => {
-    const [addon, setAddon] = React.useState(null);
-    const locationHash = useLocationHash();
-    const active = useRouteActive(routesRegexp.addons.regexp);
-    React.useEffect(() => {
-        if (typeof transportUrl !== 'string') {
-            setAddon(null);
-            return;
-        }
-
-        fetch(transportUrl) // TODO
-            .then((resp) => resp.json())
-            .then((manifest) => setAddon({ manifest, transportUrl, flags: {} }));
-    }, [transportUrl]);
-    const clear = React.useCallback(() => {
-        if (active) {
-            const { pathname, search } = UrlUtils.parse(locationHash.slice(1));
-            const queryParams = new URLSearchParams(search || '');
-            queryParams.delete('addon');
-            if ([...queryParams].length !== 0) {
-                window.location.replace(`#${pathname}?${queryParams.toString()}`);
-            } else {
-                window.location.replace(`#${pathname}`);
-            }
-            setAddon(null);
-        }
-    }, [active, locationHash]);
-    return [addon, clear, setAddon];
-};
-
-module.exports = useSelectedAddon;
diff --git a/src/routes/MetaDetails/MetaDetails.js b/src/routes/MetaDetails/MetaDetails.js
index 16417e77a..42221f5a8 100644
--- a/src/routes/MetaDetails/MetaDetails.js
+++ b/src/routes/MetaDetails/MetaDetails.js
@@ -12,7 +12,20 @@ const MetaDetails = ({ urlParams }) => {
     const [metaResourceRef, metaResources, selectedMetaResource] = useSelectableResource(metaDetails.selected.meta_resource_ref, metaDetails.meta_resources);
     const streamsResourceRef = metaDetails.selected.streams_resource_ref;
     const streamsResources = metaDetails.streams_resources;
-    const [inLibrary, , , toggleInLibrary] = useInLibrary(metaResourceRef !== null ? metaResourceRef.id : null);
+    const metaItem = React.useMemo(() => {
+        return selectedMetaResource !== null ?
+            selectedMetaResource.content.content
+            :
+            metaResourceRef !== null ?
+                {
+                    id: metaResourceRef.id,
+                    type: metaResourceRef.type_name,
+                    name: ''
+                }
+                :
+                null;
+    }, [metaResourceRef, selectedMetaResource]);
+    const [inLibrary, toggleInLibrary] = useInLibrary(metaItem);
     return (
         <div className={styles['metadetails-container']}>
             <NavBar