diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js
index 2dbed505f..6441d422f 100644
--- a/src/routes/Board/Board.js
+++ b/src/routes/Board/Board.js
@@ -11,8 +11,8 @@ const Board = () => {
     const board = useBoard();
     const continueWatchingPreview = useContinueWatchingPreview();
     return (
-        <div className={styles['board-content-container']}>
-            <MainNavBars className={styles['board-container']} route={'board'}>
+        <div className={styles['board-container']}>
+            <MainNavBars className={styles['board-content-container']} route={'board'}>
                 <div className={styles['board-content']}>
                     {
                         continueWatchingPreview.libraryItems.length > 0 ?
diff --git a/src/routes/Board/styles.less b/src/routes/Board/styles.less
index bd10380ea..6f8949c26 100644
--- a/src/routes/Board/styles.less
+++ b/src/routes/Board/styles.less
@@ -11,13 +11,13 @@
     meta-item-placeholder: meta-item;
 }
 
-.board-content-container {
+.board-container {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
 
-    .board-container {
+    .board-content-container {
         flex: 1;
         align-self: stretch;
         background-color: @color-background-dark2;
@@ -43,8 +43,8 @@
 }
 
 @media only screen and (max-width: @large) {
-    .board-content-container {
-        .board-container {
+    .board-container {
+        .board-content-container {
             .board-content {
                 .board-row-poster, .board-row-square {
                     .meta-item, .meta-item-placeholder {
@@ -67,8 +67,8 @@
 }
 
 @media only screen and (max-width: @normal) {
-    .board-content-container {
-        .board-container {
+    .board-container {
+        .board-content-container {
             .board-content {
                 .board-row-poster, .board-row-square {
                     .meta-item, .meta-item-placeholder {
@@ -91,8 +91,8 @@
 }
 
 @media only screen and (max-width: @medium) {
-    .board-content-container {
-        .board-container {
+    .board-container {
+        .board-content-container {
             .board-content {
                 .board-row-poster, .board-row-square {
                     .meta-item, .meta-item-placeholder {
@@ -115,8 +115,8 @@
 }
 
 @media only screen and (max-width: @small) {
-    .board-content-container {
-        .board-container {
+    .board-container {
+        .board-content-container {
             .board-content {
                 .board-row-poster, .board-row-square {
                     .meta-item, .meta-item-placeholder {
@@ -139,8 +139,8 @@
 }
 
 @media only screen and (max-width: @xsmall) {
-    .board-content-container {
-        .board-container {
+    .board-container {
+        .board-content-container {
             .board-content {
                 .board-row-poster, .board-row-square {
                     .meta-item, .meta-item-placeholder {
@@ -163,8 +163,8 @@
 }
 
 @media only screen and (max-width: @xxsmall) {
-    .board-content-container {
-        .board-container {
+    .board-container {
+        .board-content-container {
             .board-content {
                 .board-row-poster, .board-row-square {
                     .meta-item, .meta-item-placeholder {