diff --git a/src/routes/Library/Library.js b/src/routes/Library/Library.js
index 0273fe201..f271799f8 100644
--- a/src/routes/Library/Library.js
+++ b/src/routes/Library/Library.js
@@ -1,87 +1,61 @@
 const React = require('react');
-const UrlUtils = require('url');
 const classnames = require('classnames');
-const { Button, Multiselect, MainNavBar, MetaItem, useUser } = require('stremio/common');
+const { Button, Multiselect, MainNavBar, MetaItem } = require('stremio/common');
 const useLibrary = require('./useLibrary');
-const useSort = require('./useSort');
+const useSelectableInputs = require('./useSelectableInputs');
 const styles = require('./styles');
 
 const Library = ({ urlParams, queryParams }) => {
-    const [user] = useUser();
-    const library = useLibrary(urlParams);
-    const [selectSortInput, sortFunction] = useSort(urlParams, queryParams);
-    const loginButtonOnClick = React.useCallback(() => {
-        window.location.replace('#/intro');
-    }, []);
-    const selectTypeInput = React.useMemo(() => {
-        return {
-            selected: [library.selected.type_name],
-            options: library.type_names
-                .map((type) => ({
-                    label: type === '' ? '"Empty"' : type,
-                    value: type
-                })),
-            onSelect: (event) => {
-                const { search } = UrlUtils.parse(window.location.hash.slice(1));
-                window.location.replace(`#/library/${event.value}${search !== null ? search : ''}`);
-            }
-        }
-    }, [library.selected.type_name, library.type_names]);
+    const library = useLibrary(urlParams, queryParams);
+    const [typeSelect, sortPropSelect] = useSelectableInputs(library);
     return (
         <div className={styles['library-container']}>
             <MainNavBar className={styles['nav-bar']} />
             <div className={styles['library-content']}>
                 {
-                    user ?
-                        <div className={styles['controls-container']}>
-                            <Multiselect {...selectTypeInput} className={styles['select-input-container']} />
-                            <Multiselect {...selectSortInput} className={styles['select-input-container']} />
+                    library.library_state.type === 'Ready' && library.library_state.content.uid !== null && library.type_names.length > 0 ?
+                        <div className={styles['selectable-inputs-container']}>
+                            <Multiselect {...typeSelect} className={styles['select-input-container']} />
+                            <Multiselect {...sortPropSelect} className={styles['select-input-container']} />
                         </div>
                         :
                         null
                 }
-                <div className={styles['type-content-container']}>
-                    {
-                        !user ?
-                            <div className={classnames(styles['message-container'], styles['anonymous-user-message-container'])}>
-                                Please log into this app
-                                <Button className={styles['login-button']} onClick={loginButtonOnClick}>
-                                    <div className={styles['label']}>LOG IN</div>
-                                </Button>
+                {
+                    library.library_state.type === 'Ready' && library.library_state.content.uid === null ?
+                        <div className={classnames(styles['message-container'], styles['no-user-message-container'])}>
+                            <div className={styles['message-label']}>Library is only availavle for logged in users</div>
+                            <Button className={styles['login-button-container']} href={'#/intro'}>
+                                <div className={styles['label']}>LOG IN</div>
+                            </Button>
+                        </div>
+                        :
+                        library.library_state.type !== 'Ready' ?
+                            <div className={styles['message-container']}>
+                                <div className={styles['message-label']}>Loading</div>
                             </div>
                             :
-                            library.library_state.type != 'Ready' ?
+                            library.type_names.length === 0 ?
                                 <div className={styles['message-container']}>
-                                    Loading
+                                    <div className={styles['message-label']}>Empty library</div>
                                 </div>
                                 :
-                                library.type_names.length > 0 ?
-                                    library.selected.type_name !== null ?
-                                        library.lib_items.length > 0 ?
-                                            <div className={styles['meta-items-container']}>
-                                                {library.lib_items
-                                                    .sort(sortFunction)
-                                                    .map(({ removed, temp, ...libItem }, index) => (
-                                                        <MetaItem
-                                                            {...libItem}
-                                                            key={index}
-                                                        />
-                                                    ))}
-                                            </div>
-                                            :
-                                            <div className={styles['message-container']}>
-                                                Empty library
-                                            </div>
-                                        :
-                                        <div className={styles['message-container']}>
-                                            Select a type, please
-                                        </div>
-                                    :
+                                library.selected === null ?
                                     <div className={styles['message-container']}>
-                                        Empty library
+                                        <div className={styles['message-label']}>Please select a type</div>
                                     </div>
-                    }
-                </div>
+                                    :
+                                    library.lib_items.length === 0 ?
+                                        <div className={styles['message-container']}>
+                                            <div className={styles['message-label']}>There are no items for the selected type</div>
+                                        </div>
+                                        :
+                                        <div className={styles['meta-items-container']}>
+                                            {library.lib_items.map((libItem, index) => (
+                                                <MetaItem {...libItem} key={index} />
+                                            ))}
+                                        </div>
+                }
             </div>
         </div>
     );
diff --git a/src/routes/Library/styles.less b/src/routes/Library/styles.less
index a09fb601e..5dab0caa9 100644
--- a/src/routes/Library/styles.less
+++ b/src/routes/Library/styles.less
@@ -1,5 +1,9 @@
 @import (reference) '~stremio/common/screen-sizes.less';
 
+:import('~stremio/common/Multiselect/styles.less') {
+    multiselect-menu-container: menu-container;
+}
+
 .library-container {
     display: flex;
     flex-direction: column;
@@ -15,18 +19,15 @@
     .library-content {
         flex: 1;
         align-self: stretch;
-        display: grid;
-        grid-template-columns: 1fr auto;
-        grid-template-rows: auto 1fr;
-        grid-template-areas:
-            "controls-area switch-view-area"
-            "type-content-area type-content-area";
+        display: flex;
+        flex-direction: column;
 
-        .controls-container {
-            grid-area: controls-area;
+        .selectable-inputs-container {
+            flex: none;
+            align-self: stretch;
             display: flex;
             flex-direction: row;
-            margin: 2rem;
+            margin: 1.5rem;
             overflow: visible;
 
             .select-input-container {
@@ -36,68 +37,82 @@
                 height: 3rem;
 
                 &:not(:last-child) {
-                    margin-right: 1rem;
+                    margin-right: 1.5rem;
+                }
+
+                .multiselect-menu-container {
+                    max-height: calc(3.2rem * 7);
+                    overflow: auto;
                 }
             }
         }
 
-        .type-content-container {
-            grid-area: type-content-area;
+        .message-container, .meta-items-container {
+            flex-grow: 0;
+            flex-shrink: 1;
+            flex-basis: auto;
+            padding: 0 1.5rem;
+            overflow-y: auto;
+        }
 
-            .meta-items-container {
-                display: grid;
-                max-height: 100%;
-                grid-auto-rows: max-content;
-                grid-gap: 1.5rem;
-                align-items: center;
-                padding: 0 2rem;
-                overflow-y: auto;
+        .message-container {
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+            align-items: center;
+
+            &:first-child {
+                .message-label {
+                    margin: 1.5rem 0;
+                }
             }
 
-            .message-container {
-                padding: 0 2rem;
-                font-size: 2rem;
-                color: var(--color-surfacelighter);
-            }
-
-            .anonymous-user-message-container {
-                display: flex;
-                flex-direction: column;
+            &.no-user-message-container {
+                flex: 1;
                 justify-content: center;
-                align-items: center;
-                width: 100%;
-                height: 100%;
 
-                .login-button {
+                .login-button-container {
+                    flex: none;
                     display: flex;
-                    flex-direction: column;
+                    flex-direction: row;
                     align-items: center;
                     justify-content: center;
                     width: 20rem;
                     min-height: 4rem;
-                    margin-top: 2rem;
                     padding: 0.5rem 1rem;
                     background-color: var(--color-primarydark);
 
-                    .label {
-                        flex-grow: 0;
-                        flex-shrink: 1;
-                        flex-basis: auto;
-                        font-size: 1.1rem;
-                        font-weight: 700;
-                        color: var(--color-surfacelighter);
-                        text-align: center;
-                    }
-
                     &:hover {
                         background-color: var(--color-primary);
                     }
 
                     .label {
+                        flex-grow: 0;
+                        flex-shrink: 1;
+                        flex-basis: auto;
+                        max-height: 4.8em;
                         font-size: 1.2rem;
+                        font-weight: 700;
+                        color: var(--color-surfacelighter);
+                        text-align: center;
                     }
                 }
             }
+
+            .message-label {
+                flex: none;
+                max-height: 4.8em;
+                font-size: 2rem;
+                color: var(--color-surfacelighter);
+                text-align: center;
+            }
+        }
+
+        .meta-items-container {
+            display: grid;
+            grid-auto-rows: max-content;
+            align-items: center;
+            grid-gap: 1.5rem;
         }
     }
 }