diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js
index 7fcf73b9e..8837b9bc1 100644
--- a/src/routes/Discover/Discover.js
+++ b/src/routes/Discover/Discover.js
@@ -20,7 +20,7 @@ const Discover = ({ urlParams, queryParams }) => {
         }
     }, [metaItems]);
     React.useEffect(() => {
-        const metaItem = metaItems.length > 0 ? metaItems[0] : null;
+        const metaItem = Array.isArray(metaItems) && metaItems.length > 0 ? metaItems[0] : null;
         setSelectedMetaItem(metaItem);
     }, [metaItems]);
     return (
@@ -36,15 +36,34 @@ const Discover = ({ urlParams, queryParams }) => {
                         />
                     ))}
                 </div>
-                <div className={styles['meta-items-container']} onMouseDownCapture={metaItemsOnMouseDownCapture} onFocusCapture={metaItemsOnFocusCapture}>
-                    {metaItems.map((metaItem, index) => (
-                        <MetaItem
-                            {...metaItem}
-                            key={index}
-                            data-id={metaItem.id}
-                            className={classnames(styles['meta-item'], { 'selected': selectedMetaItem !== null && metaItem.id === selectedMetaItem.id })}
-                        />
-                    ))}
+                <div className={styles['catalog-content-container']}>
+                    {
+                        error ?
+                            <div className={styles['message-container']}>
+                                {error}
+                            </div>
+                            :
+                            Array.isArray(metaItems) ?
+                                metaItems.length > 0 ?
+                                    <div className={styles['meta-items-container']} onMouseDownCapture={metaItemsOnMouseDownCapture} onFocusCapture={metaItemsOnFocusCapture}>
+                                        {metaItems.map((metaItem, index) => (
+                                            <MetaItem
+                                                {...metaItem}
+                                                key={index}
+                                                data-id={metaItem.id}
+                                                className={classnames(styles['meta-item'], { 'selected': selectedMetaItem !== null && metaItem.id === selectedMetaItem.id })}
+                                            />
+                                        ))}
+                                    </div>
+                                    :
+                                    <div className={styles['message-container']}>
+                                        Empty catalog
+                                    </div>
+                                :
+                                <div className={styles['message-container']}>
+                                    Loading
+                                </div>
+                    }
                 </div>
                 {
                     selectedMetaItem !== null ?
diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less
index 3834d168c..83e775770 100644
--- a/src/routes/Discover/styles.less
+++ b/src/routes/Discover/styles.less
@@ -20,7 +20,7 @@
         grid-template-rows: 7rem 1fr;
         grid-template-areas:
             "multiselects-area meta-preview-area"
-            "meta-items-area meta-preview-area";
+            "catalog-content-area meta-preview-area";
 
         .multiselects-container {
             grid-area: multiselects-area;
@@ -36,23 +36,33 @@
             }
         }
 
-        .meta-items-container {
-            grid-area: meta-items-area;
-            display: grid;
-            grid-auto-rows: max-content;
-            grid-gap: 1.5rem;
-            align-items: center;
-            padding: 0 2rem;
-            overflow-y: auto;
+        .catalog-content-container {
+            grid-area: catalog-content-area;
 
-            .meta-item {
-                &:global(.selected) {
-                    &::after {
-                        outline-width: calc(1.5 * var(--focus-outline-size));
-                        outline-offset: calc(-1.5 * var(--focus-outline-size));
+            .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;
+
+                .meta-item {
+                    &:global(.selected) {
+                        &::after {
+                            outline-width: calc(1.5 * var(--focus-outline-size));
+                            outline-offset: calc(-1.5 * var(--focus-outline-size));
+                        }
                     }
                 }
             }
+
+            .message-container {
+                padding: 0 2rem;
+                font-size: 2rem;
+                color: var(--color-surfacelighter);
+            }
         }
 
         .meta-preview-container {
@@ -65,8 +75,10 @@
 @media only screen and (min-width: @xxlarge) {
     .discover-container {
         .discover-content {
-            .meta-items-container {
-                grid-template-columns: repeat(8, auto);
+            .catalog-content-container {
+                .meta-items-container {
+                    grid-template-columns: repeat(8, auto);
+                }
             }
         }
     }
@@ -75,8 +87,10 @@
 @media only screen and (max-width: @xxlarge) {
     .discover-container {
         .discover-content {
-            .meta-items-container {
-                grid-template-columns: repeat(7, auto);
+            .catalog-content-container {
+                .meta-items-container {
+                    grid-template-columns: repeat(7, auto);
+                }
             }
         }
     }
@@ -85,8 +99,10 @@
 @media only screen and (max-width: @normal) {
     .discover-container {
         .discover-content {
-            .meta-items-container {
-                grid-template-columns: repeat(6, auto);
+            .catalog-content-container {
+                .meta-items-container {
+                    grid-template-columns: repeat(6, auto);
+                }
             }
         }
     }
@@ -95,8 +111,10 @@
 @media only screen and (max-width: @medium) {
     .discover-container {
         .discover-content {
-            .meta-items-container {
-                grid-template-columns: repeat(5, auto);
+            .catalog-content-container {
+                .meta-items-container {
+                    grid-template-columns: repeat(5, auto);
+                }
             }
         }
     }
@@ -105,8 +123,10 @@
 @media only screen and (max-width: @small) {
     .discover-container {
         .discover-content {
-            .meta-items-container {
-                grid-template-columns: repeat(4, auto);
+            .catalog-content-container {
+                .meta-items-container {
+                    grid-template-columns: repeat(4, auto);
+                }
             }
         }
     }
@@ -119,14 +139,16 @@
             grid-template-rows: fit-content(19rem) 1fr;
             grid-template-areas:
                 "multiselects-area"
-                "meta-items-area";
+                "catalog-content-area";
 
             .multiselects-container {
                 grid-template-columns: repeat(4, 1fr);
             }
 
-            .meta-items-container {
-                grid-template-columns: repeat(5, auto);
+            .catalog-content-container {
+                .meta-items-container {
+                    grid-template-columns: repeat(5, auto);
+                }
             }
 
             .meta-preview-container {
diff --git a/src/routes/Discover/useDiscover.js b/src/routes/Discover/useDiscover.js
index 4bb23e779..8abbb9a51 100644
--- a/src/routes/Discover/useDiscover.js
+++ b/src/routes/Discover/useDiscover.js
@@ -7,7 +7,7 @@ const DEFAULT_TYPE = 'movie';
 
 const useCatalog = (urlParams, queryParams) => {
     const { core } = useServices();
-    const [discover, setDiscover] = React.useState([[], [], null]);
+    const [discover, setDiscover] = React.useState([[], null, null]);
     React.useEffect(() => {
         const addonTransportUrl = typeof urlParams.addonTransportUrl === 'string' ? urlParams.addonTransportUrl : DEFAULT_ADDON_TRANSPORT_URL;
         const catalogId = typeof urlParams.catalogId === 'string' ? urlParams.catalogId : DEFAULT_CATALOG_ID;
@@ -49,7 +49,7 @@ const useCatalog = (urlParams, queryParams) => {
                     }
                 }
             ];
-            const items = state.discover.content.type === 'Ready' ? state.discover.content.content : [];
+            const items = state.discover.content.type === 'Ready' ? state.discover.content.content : null;
             const error = state.discover.content.type === 'Err' ? JSON.stringify(state.discover.content.content) : null;
             setDiscover([selectInputs, items, error]);
         };