diff --git a/scss/components/_workspace_layout.scss b/scss/components/_workspace_layout.scss
new file mode 100644
index 00000000..e2cf4c24
--- /dev/null
+++ b/scss/components/_workspace_layout.scss
@@ -0,0 +1,26 @@
+.workspace-panel-container {
+  @include media($large-screen) {
+    @include grid-row;
+  }
+}
+
+.workspace-navigation {
+  @include panel-margin;
+
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    li {
+      flex-grow: 1;
+    }
+  }
+
+  @include media($large-screen) {
+    width: 20rem;
+    margin-right: $gap * 2;
+
+    ul {
+      display: block;
+    }
+  }
+}
diff --git a/templates/base_workspace.html.to b/templates/base_workspace.html.to
index 9622032f..7803ace8 100644
--- a/templates/base_workspace.html.to
+++ b/templates/base_workspace.html.to
@@ -2,8 +2,14 @@
 
 {% block content %}
 
-  {% include 'navigation/workspace_navigation.html.to' %}
+  <div class='workspace-panel-container'>
+    <div class='col'>
+      {% include 'navigation/workspace_navigation.html.to' %}
+    </div>
 
-  {% block workspace_content %}{% end %}
+    <div class='col col--grow'>
+      {% block workspace_content %}{% end %}
+    </div>
+  </div>
 
 {% end %}