diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js
index cc897a507..4cca357f2 100644
--- a/src/routes/Board/Board.js
+++ b/src/routes/Board/Board.js
@@ -21,65 +21,63 @@ const Board = () => {
                 notificationsMenu={true}
                 navMenu={true}
             />
-            <div className={styles['board-content-container']}>
-                <MainVerticalNavBar className={styles['nav-bar']} route={'board'} />
-                <div className={styles['board-content']}>
-                    {
-                        continueWatching.lib_items.length > 0 ?
-                            <MetaRow
-                                className={styles['board-row']}
-                                title={'Continue Watching'}
-                                items={continueWatching.lib_items.map(({ id, videoId, ...libItem }) => ({
-                                    ...libItem,
-                                    dataset: { id, videoId, type: libItem.type },
-                                    options,
-                                    optionOnSelect
-                                }))}
-                                limit={10}
-                            />
-                            :
-                            null
-                    }
-                    {board.catalog_resources.map((catalog_resource, index) => {
-                        const title = `${catalog_resource.addon_name} - ${catalog_resource.request.path.id} ${catalog_resource.request.path.type_name}`;
-                        switch (catalog_resource.content.type) {
-                            case 'Ready': {
-                                return (
-                                    <MetaRow
-                                        key={index}
-                                        className={styles['board-row']}
-                                        title={title}
-                                        items={catalog_resource.content.content}
-                                        href={catalog_resource.href}
-                                        limit={10}
-                                    />
-                                );
-                            }
-                            case 'Err': {
-                                const message = `Error(${catalog_resource.content.content.type})${typeof catalog_resource.content.content.content === 'string' ? ` - ${catalog_resource.content.content.content}` : ''}`;
-                                return (
-                                    <MetaRow
-                                        key={index}
-                                        className={styles['board-row']}
-                                        title={title}
-                                        message={message}
-                                        limit={10}
-                                    />
-                                );
-                            }
-                            case 'Loading': {
-                                return (
-                                    <MetaRow.Placeholder
-                                        key={index}
-                                        className={styles['board-row-placeholder']}
-                                        title={title}
-                                        limit={10}
-                                    />
-                                );
-                            }
+            <MainVerticalNavBar className={styles['vertical-nav-bar']} route={'board'} />
+            <div className={styles['board-content']}>
+                {
+                    continueWatching.lib_items.length > 0 ?
+                        <MetaRow
+                            className={styles['board-row']}
+                            title={'Continue Watching'}
+                            items={continueWatching.lib_items.map(({ id, videoId, ...libItem }) => ({
+                                ...libItem,
+                                dataset: { id, videoId, type: libItem.type },
+                                options,
+                                optionOnSelect
+                            }))}
+                            limit={10}
+                        />
+                        :
+                        null
+                }
+                {board.catalog_resources.map((catalog_resource, index) => {
+                    const title = `${catalog_resource.addon_name} - ${catalog_resource.request.path.id} ${catalog_resource.request.path.type_name}`;
+                    switch (catalog_resource.content.type) {
+                        case 'Ready': {
+                            return (
+                                <MetaRow
+                                    key={index}
+                                    className={styles['board-row']}
+                                    title={title}
+                                    items={catalog_resource.content.content}
+                                    href={catalog_resource.href}
+                                    limit={10}
+                                />
+                            );
                         }
-                    })}
-                </div>
+                        case 'Err': {
+                            const message = `Error(${catalog_resource.content.content.type})${typeof catalog_resource.content.content.content === 'string' ? ` - ${catalog_resource.content.content.content}` : ''}`;
+                            return (
+                                <MetaRow
+                                    key={index}
+                                    className={styles['board-row']}
+                                    title={title}
+                                    message={message}
+                                    limit={10}
+                                />
+                            );
+                        }
+                        case 'Loading': {
+                            return (
+                                <MetaRow.Placeholder
+                                    key={index}
+                                    className={styles['board-row-placeholder']}
+                                    title={title}
+                                    limit={10}
+                                />
+                            );
+                        }
+                    }
+                })}
             </div>
         </div>
     );
diff --git a/src/routes/Board/styles.less b/src/routes/Board/styles.less
index 741ca9c0a..458690e35 100644
--- a/src/routes/Board/styles.less
+++ b/src/routes/Board/styles.less
@@ -11,41 +11,41 @@
 }
 
 .board-container {
-    display: flex;
-    flex-direction: column;
+    display: grid;
     width: 100%;
     height: 100%;
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto 1fr;
+    grid-template-areas:
+        "horizontal-nav-bar horizontal-nav-bar"
+        "vertical-nav-bar board-content";
     background-color: var(--color-background);
 
     .horizontal-nav-bar {
-        flex: none;
-        align-self: stretch;
+        grid-area: horizontal-nav-bar;
     }
 
-    .board-content-container {
-        display: flex;
-        flex-direction: row;
-        height: 100%;
+    .vertical-nav-bar {
+        grid-area: vertical-nav-bar;
+    }
 
-        .board-content {
-            flex: 1;
-            align-self: stretch;
-            overflow-y: auto;
+    .board-content {
+        grid-area: board-content;
+        overflow-y: auto;
 
-            .board-row, .board-row-placeholder {
-                margin: 4rem 2rem;
+        .board-row, .board-row-placeholder {
+            margin: 4rem 2rem;
 
-                &:first-child {
-                    margin-top: 2rem;
-                }
+            &:first-child {
+                margin-top: 2rem;
+            }
 
-                &:last-child {
-                    margin-bottom: 2rem;
-                }
+            &:last-child {
+                margin-bottom: 2rem;
+            }
 
-                .see-all-container, .see-all-container-placeholder {
-                    width: 12rem;
-                }
+            .see-all-container, .see-all-container-placeholder {
+                width: 12rem;
             }
         }
     }
@@ -53,13 +53,11 @@
 
 @media only screen and (min-width: @large) {
     .board-container {
-        .board-content-container {
-            .board-content {
-                .board-row, .board-row-placeholder {
-                    .meta-item, .meta-item-placeholder {
-                        &:nth-child(n+9) {
-                            display: none;
-                        }
+        .board-content {
+            .board-row, .board-row-placeholder {
+                .meta-item, .meta-item-placeholder {
+                    &:nth-child(n+9) {
+                        display: none;
                     }
                 }
             }
@@ -69,13 +67,11 @@
 
 @media only screen and (max-width: @large) {
     .board-container {
-        .board-content-container {
-            .board-content {
-                .board-row, .board-row-placeholder {
-                    .meta-item, .meta-item-placeholder {
-                        &:nth-child(n+8) {
-                            display: none;
-                        }
+        .board-content {
+            .board-row, .board-row-placeholder {
+                .meta-item, .meta-item-placeholder {
+                    &:nth-child(n+8) {
+                        display: none;
                     }
                 }
             }
@@ -85,13 +81,11 @@
 
 @media only screen and (max-width: @medium) {
     .board-container {
-        .board-content-container {
-            .board-content {
-                .board-row, .board-row-placeholder {
-                    .meta-item, .meta-item-placeholder {
-                        &:nth-child(n+7) {
-                            display: none;
-                        }
+        .board-content {
+            .board-row, .board-row-placeholder {
+                .meta-item, .meta-item-placeholder {
+                    &:nth-child(n+7) {
+                        display: none;
                     }
                 }
             }
@@ -101,13 +95,11 @@
 
 @media only screen and (max-width: @small) {
     .board-container {
-        .board-content-container {
-            .board-content {
-                .board-row, .board-row-placeholder {
-                    .meta-item, .meta-item-placeholder {
-                        &:nth-child(n+6) {
-                            display: none;
-                        }
+        .board-content {
+            .board-row, .board-row-placeholder {
+                .meta-item, .meta-item-placeholder {
+                    &:nth-child(n+6) {
+                        display: none;
                     }
                 }
             }
@@ -117,13 +109,11 @@
 
 @media only screen and (max-width: @xsmall) {
     .board-container {
-        .board-content-container {
-            .board-content {
-                .board-row, .board-row-placeholder {
-                    .meta-item, .meta-item-placeholder {
-                        &:nth-child(n+5) {
-                            display: none;
-                        }
+        .board-content {
+            .board-row, .board-row-placeholder {
+                .meta-item, .meta-item-placeholder {
+                    &:nth-child(n+5) {
+                        display: none;
                     }
                 }
             }