diff --git a/src/newsreader/js/pages/homepage/App.js b/src/newsreader/js/pages/homepage/App.js
index 01ca773..844f7e1 100644
--- a/src/newsreader/js/pages/homepage/App.js
+++ b/src/newsreader/js/pages/homepage/App.js
@@ -5,7 +5,6 @@ import { isEqual } from 'lodash';
 
 import { fetchCategories } from './actions/categories';
 
-import Sidebar from './components/sidebar/Sidebar.js';
 import PostList from './components/postlist/PostList.js';
 import PostModal from './components/PostModal.js';
 import Messages from '../../components/Messages.js';
@@ -15,10 +14,10 @@ class App extends React.Component {
     this.props.fetchCategories();
   }
 
+  // TODO: render sidebar separate from main component
   render() {
     return (
       <>
-        <Sidebar />
         <PostList
           feedUrl={this.props.feedUrl}
           subredditUrl={this.props.subredditUrl}
@@ -41,6 +40,7 @@ class App extends React.Component {
           />
         )}
 
+        {/* TODO: check this styling */}
         {this.props.error && (
           <Messages messages={[{ type: 'error', text: this.props.error.message }]} />
         )}
diff --git a/src/newsreader/js/pages/homepage/components/sidebar/Sidebar.js b/src/newsreader/js/pages/homepage/components/sidebar/Sidebar.js
index 88a69f2..393ca8c 100644
--- a/src/newsreader/js/pages/homepage/components/sidebar/Sidebar.js
+++ b/src/newsreader/js/pages/homepage/components/sidebar/Sidebar.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { isEqual } from 'lodash';
 
 import { filterCategories, filterRules } from './filters.js';
 
@@ -33,7 +32,7 @@ class Sidebar extends React.Component {
       [CATEGORY_TYPE, RULE_TYPE].includes(this.props.selected.item.type);
 
     return (
-      <div className="sidebar">
+      <>
         {(this.props.categories.isFetching || this.props.rules.isFetching) && (
           <LoadingIndicator />
         )}
@@ -44,7 +43,7 @@ class Sidebar extends React.Component {
         </ul>
 
         {showReadButton && <ReadButton />}
-      </div>
+      </>
     );
   }
 }
diff --git a/src/newsreader/js/pages/homepage/index.js b/src/newsreader/js/pages/homepage/index.js
index 86cdd09..7f51d80 100644
--- a/src/newsreader/js/pages/homepage/index.js
+++ b/src/newsreader/js/pages/homepage/index.js
@@ -16,6 +16,7 @@ if (page) {
 
   const app = (
     <Provider store={store}>
+      {/* TODO: split App into Main & Sidebar mounts */}
       <App
         feedUrl={feedUrl.substring(1, feedUrl.length - 3)}
         subredditUrl={subredditUrl.substring(1, subredditUrl.length - 3)}
diff --git a/src/newsreader/news/core/templates/news/core/views/homepage.html b/src/newsreader/news/core/templates/news/core/views/homepage.html
index a135314..08621b2 100644
--- a/src/newsreader/news/core/templates/news/core/views/homepage.html
+++ b/src/newsreader/news/core/templates/news/core/views/homepage.html
@@ -1,9 +1,11 @@
 {% extends "base.html" %}
 {% load static %}
 
-{% block content %}
-  <main id="homepage--page" class="main"></main>
-{% endblock content %}
+{% block page_class %}homepage--page{% endblock %}
+
+{% block sidebar %}
+  <div className="sidebar"></div>
+{% endblock %}
 
 {% block scripts %}
   {{ homepageSettings|json_script:"homepageSettings" }}
diff --git a/src/newsreader/scss/components/body/_body.scss b/src/newsreader/scss/components/body/_body.scss
index 34bba4c..3eb1c26 100644
--- a/src/newsreader/scss/components/body/_body.scss
+++ b/src/newsreader/scss/components/body/_body.scss
@@ -4,6 +4,10 @@
 
   font-family: Rubik, sans-serif;
   font-size: $font-size;
+
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  grid-gap: 20px;
 }
 
 body {
@@ -14,5 +18,4 @@ body {
     padding: 0;
     box-sizing: border-box;
   }
-
 }
diff --git a/src/newsreader/scss/components/navbar/_navbar.scss b/src/newsreader/scss/components/navbar/_navbar.scss
index afdacce..ad81832 100644
--- a/src/newsreader/scss/components/navbar/_navbar.scss
+++ b/src/newsreader/scss/components/navbar/_navbar.scss
@@ -1,4 +1,7 @@
 .nav {
+  grid-column: 1 /3;
+  grid-row: 1;
+
   display: flex;
   justify-content: center;
   align-items: center;
@@ -6,9 +9,6 @@
   padding: 10px 0;
   width: 100%;
 
-  position: sticky;
-  top: 0;
-
   background-color: var(--lightest-accent-color);
 
   ol {
diff --git a/src/newsreader/scss/components/sidebar/_sidebar.scss b/src/newsreader/scss/components/sidebar/_sidebar.scss
index 0521af4..c21f652 100644
--- a/src/newsreader/scss/components/sidebar/_sidebar.scss
+++ b/src/newsreader/scss/components/sidebar/_sidebar.scss
@@ -1,13 +1,10 @@
 .sidebar {
+  grid-column: 1;
+  grid-row: 2;
+
   display: flex;
   flex-direction: column;
   align-items: center;
-  align-self: start;
-
-  position: sticky;
-  top: 50px;
-
-  width: 20%;
 
   &__nav {
     width: 100%;
@@ -15,7 +12,6 @@
     overflow: auto;
 
     list-style: none;
-
   }
 
   &__container {
diff --git a/src/newsreader/scss/pages/homepage/index.scss b/src/newsreader/scss/pages/homepage/index.scss
index 30f5a50..b6eff8b 100644
--- a/src/newsreader/scss/pages/homepage/index.scss
+++ b/src/newsreader/scss/pages/homepage/index.scss
@@ -1,9 +1,10 @@
 #homepage--page {
+    grid-column: 2;
+    grid-row: 2;
+
     display: flex;
     flex-direction: row;
     align-items: initial;
-    width: 100%;
 
-    margin: 20px 0 0 0;
     background-color: initial;
 }
diff --git a/src/newsreader/templates/base.html b/src/newsreader/templates/base.html
index 3c65329..76dee73 100644
--- a/src/newsreader/templates/base.html
+++ b/src/newsreader/templates/base.html
@@ -10,7 +10,7 @@
     {% endblock %}
   </head>
 
-  <body class="body">
+  <body class="body {% block page_class %}{% endblock %}">
     <nav class="nav">
       <ol>
         {% if request.user.is_authenticated %}
@@ -41,7 +41,11 @@
       </ul>
     {% endif %}
 
-    {% block content %}{% endblock content %}
+    {% block sidebar %}{% endblock %}
+
+    <main class="main">
+      {% block content %}{% endblock content %}
+    </main>
   </body>
 
   {% block scripts %}