diff --git a/app/styles/app.css b/app/styles/app.css
index 135912e6..3c700eb2 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -26,16 +26,24 @@ main a.edit-icon {
   background: none;
 }
 
+.sidebar-container {
+  --sidebar-width: min-content;
+}
+
+.es-sidebar-content .table-of-contents:first-child {
+  margin-block-start: 0;
+}
+
 .table-of-contents {
   list-style-type: none;
   padding-left: 0;
-  font-size: var(--font-size-lg);
+  font-size: var(--font-size-base);
   font-weight: var(--font-weight-3);
 }
 
 .sub-table-of-contents {
   padding-left: var(--spacing-1);
-  font-size: var(--font-size-md);
+  font-size: var(--font-size-base);
   font-weight: var(--font-weight-2);
 }
 
@@ -82,3 +90,18 @@ li.toc-heading:first-child {
   margin-top: 0;
 }
 
+@media (min-width: 845px) {
+  .es-header {
+    padding: 0 var(--spacing-4);
+    justify-content: start;
+  }
+
+  .es-sidebar {
+    padding: var(--spacing-4);
+    background-color: var(--color-gray-200);
+  }
+
+  .content {
+    margin-top: var(--spacing-4);
+  }
+}
diff --git a/app/templates/ember-cli.hbs b/app/templates/ember-cli.hbs
index 0d2f76bd..8a5a75d0 100644
--- a/app/templates/ember-cli.hbs
+++ b/app/templates/ember-cli.hbs
@@ -1,4 +1,4 @@
-<div class="sidebar-container">
+<div class="sidebar-container sidebar-container--full-width">
   <EsSidebar><TableOfProjects @activeProject='ember-cli' /></EsSidebar>
   <section class="content">
     <article class="chapter">
diff --git a/app/templates/project-version.hbs b/app/templates/project-version.hbs
index facc6531..396b21ba 100644
--- a/app/templates/project-version.hbs
+++ b/app/templates/project-version.hbs
@@ -1,4 +1,4 @@
-<div class="sidebar-container">
+<div class="sidebar-container sidebar-container--full-width">
   <EsSidebar>
    <TableOfProjects @activeProject={{this.activeProject}} />
 
diff --git a/package-lock.json b/package-lock.json
index 2764f12a..dd0c1b6f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20829,9 +20829,9 @@
       }
     },
     "node_modules/ember-styleguide": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/ember-styleguide/-/ember-styleguide-8.3.0.tgz",
-      "integrity": "sha512-FN0FNXDXFRoimaICswP7/5aSI8gH/sVO00ju134wbWeUR/xMHE1bA/xT1P8UGPPXM6D9IE6mrxdt9Pf2iyaYRg==",
+      "version": "8.5.0",
+      "resolved": "https://registry.npmjs.org/ember-styleguide/-/ember-styleguide-8.5.0.tgz",
+      "integrity": "sha512-R/mUM3/teRgwOffc+W8LTTl2aD4VLZ0y8fM5wpE0oQTof72R6Ddpzm4/RNduT3AUcqrnB9iCNvw91vpSrc0wlw==",
       "dev": true,
       "dependencies": {
         "@ember/render-modifiers": "^2.0.2",
@@ -53126,9 +53126,9 @@
       }
     },
     "ember-styleguide": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/ember-styleguide/-/ember-styleguide-8.3.0.tgz",
-      "integrity": "sha512-FN0FNXDXFRoimaICswP7/5aSI8gH/sVO00ju134wbWeUR/xMHE1bA/xT1P8UGPPXM6D9IE6mrxdt9Pf2iyaYRg==",
+      "version": "8.5.0",
+      "resolved": "https://registry.npmjs.org/ember-styleguide/-/ember-styleguide-8.5.0.tgz",
+      "integrity": "sha512-R/mUM3/teRgwOffc+W8LTTl2aD4VLZ0y8fM5wpE0oQTof72R6Ddpzm4/RNduT3AUcqrnB9iCNvw91vpSrc0wlw==",
       "dev": true,
       "requires": {
         "@ember/render-modifiers": "^2.0.2",