diff --git a/core/misc/dialog/off-canvas.base.css b/core/misc/dialog/off-canvas.base.css
index 138ea03a0f..f50e4e7226 100644
--- a/core/misc/dialog/off-canvas.base.css
+++ b/core/misc/dialog/off-canvas.base.css
@@ -4,8 +4,7 @@
  */
 
 /* Set some global attributes. */
-#drupal-off-canvas *,
-#drupal-off-canvas *:not(div) {
+#drupal-off-canvas {
   background: #444;
   font-family: "Lucida Grande", 'Lucida Sans Unicode', 'liberation sans', sans-serif;
   color: #ddd;
diff --git a/core/modules/workspace/css/workspace.overview.css b/core/modules/workspace/css/workspace.overview.css
new file mode 100644
index 0000000000..cd3dda2a3c
--- /dev/null
+++ b/core/modules/workspace/css/workspace.overview.css
@@ -0,0 +1,8 @@
+/**
+ * @file
+ * Styling for the Workspace overview table.
+ */
+
+tr.active-workspace {
+  background-color: #ebeae4;
+}
diff --git a/core/modules/workspace/css/workspace.toolbar.css b/core/modules/workspace/css/workspace.toolbar.css
index 9c69720fe6..0bcb8060fe 100644
--- a/core/modules/workspace/css/workspace.toolbar.css
+++ b/core/modules/workspace/css/workspace.toolbar.css
@@ -12,43 +12,243 @@
   float: left;
 }
 .toolbar .toolbar-bar .workspace-toolbar-tab--is-default {
-  background-color: #77b259;
+  background-color: #81C071;
 }
 
 .toolbar .toolbar-bar .workspace-toolbar-tab .toolbar-item {
+  color: #000000;
   margin: 0;
 }
 
 .toolbar .toolbar-icon-workspace:before {
-  background-image: url("../icons/ffffff/workspace.svg");
+  background-image: url("../icons/000000/workspace.svg");
 }
 
-/* Manage workspaces link */
-.toolbar .toolbar-tray-vertical .manage-workspaces {
-  text-align: right; /* LTR */
-  padding: 1em;
+/* Off canvas dialog */
+.workspace-dialog.ui-dialog-off-canvas a:focus {
+  outline:none;
 }
-[dir="rtl"] .toolbar .toolbar-tray-vertical .manage-workspaces {
-  text-align: left;
+
+.workspace-dialog.ui-dialog-off-canvas #drupal-off-canvas,
+.workspace-dialog.ui-dialog-off-canvas {
+  background: #333333;
+  padding: 0;
 }
-.toolbar .toolbar-tray-horizontal .manage-workspaces {
-  float: right; /* LTR */
+
+.workspace-dialog.ui-widget.ui-widget-content {
+  height: 100% !important;
 }
-[dir="rtl"] .toolbar .toolbar-tray-horizontal .manage-workspaces {
-  float: left;
+
+.workspace-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
+  visibility: hidden;
+  position: relative;
+}
+
+.workspace-dialog.ui-dialog-off-canvas .ui-dialog-titlebar .ui-button {
+  visibility: visible;
+  z-index: 101;
 }
 
-/* Individual workspace links */
-.toolbar-horizontal .toolbar-tray .toolbar-menu li + li {
-  border-left: 1px solid #ddd; /* LTR */
+#drupal-off-canvas .active-workspace {
+  background-color: #444444;
+  width: 100%;
+  padding: 20px 40px 0 20px;
+  height: 140px;
+  position: relative;
+  top: 16px;
 }
-[dir="rtl"] .toolbar-horizontal .toolbar-tray .toolbar-menu li + li {
-  border-left: 0 none;
-  border-right: 1px solid #ddd;
+
+@media all and (min-width: 767px) {
+  #drupal-off-canvas .active-workspace {
+    padding: 20px 40px 0 40px;
+  }
+}
+
+#drupal-off-canvas .active-workspace__title {
+  font-size: 0.8125rem;
+  font-weight: bold;
+}
+
+#drupal-off-canvas .active-workspace__label {
+  color: #ffffff;
+  font-size: 1.285em;
+  margin-top: 0.5em;
+  margin-left: 3.2rem;
+}
+
+#drupal-off-canvas .active-workspace__manage {
+  font-size: 0.9286em;
+  margin-left: 3.2rem;
+  white-space: nowrap;
+  outline-color: currentColor;
 }
-.toolbar-horizontal .toolbar-tray .toolbar-menu li:last-child {
-  border-right: 1px solid #ddd;
+
+#drupal-off-canvas .active-workspace__actions {
+  position: relative;
+  top: 1em;
+}
+
+#drupal-off-canvas .active-workspace__button {
+  border-radius: 20px;
+  background-image: linear-gradient(to bottom, #007bc6, #0071b8);
+  border: solid 1px #1e5c90;
+  padding: 5px 22px;
+  color: #ffffff;
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
+  font-weight: bold;
+}
+
+#drupal-off-canvas .active-workspace__button:hover {
+  text-decoration: none;
+}
+
+#drupal-off-canvas .all-workspaces {
+  position: fixed;
+  bottom: 1em;
+  left: 20px;
+  color: #ffffff;
+  outline-color: currentColor;
+}
+
+#drupal-off-canvas .workspaces ul {
+  display: block;
+}
+
+#drupal-off-canvas .workspaces li {
+  flex: 1;
+  margin-bottom: 1px;
+}
+
+#drupal-off-canvas .workspaces a {
+  background-color: #555555;
+  box-sizing: border-box;
+  padding: 20px 0 0 50px;
+  margin-right: 1px;
+  color: #FFFFFF;
+  font-size: 0.929em;
+  font-weight: bold;
+  text-decoration: none;
+  position: relative;
+  display: block;
+  height: 73px;
 }
-[dir="rtl"] .toolbar-horizontal .toolbar-tray .toolbar-menu li:last-child {
-  border-left: 1px solid #ddd;
+
+#drupal-off-canvas .active-workspace__label:before,
+#drupal-off-canvas .workspaces__item:before {
+  background: url("../icons/f0a100/ws_icon.svg") center center no-repeat;
+  background-size: 100% auto;
+  content: '';
+  display: block;
+  height: 20px;
+  width: 20px;
+  left: 20px;
+  position: absolute;
+}
+
+#drupal-off-canvas .active-workspace--default .active-workspace__label:before,
+#drupal-off-canvas .workspaces__item--default:before {
+  background-image: url("../icons/81c071/ws_icon.svg");
+}
+
+#drupal-off-canvas .active-workspace__label:before {
+  height: 40px;
+  width: 40px;
+  left: 20px;
+}
+
+@media all and (min-width: 767px) {
+  #drupal-off-canvas .active-workspace__label:before {
+    left: 40px;
+  }
+}
+
+ .workspace-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
+   padding: 0;
+   top: 39px;
+ }
+
+.workspace-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close {
+  right: 0.5em;
+  top: 1em;
+}
+
+@media all and (max-width: 766px) {
+  .toolbar .toolbar-icon-workspace {
+    padding-left: 2.75em;
+    padding-right: 1.3333em;
+    text-indent: 0;
+    width: 8em;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .toolbar .toolbar-icon-workspace:before {
+    background-size: 100% auto;
+    left: 0.6667em;
+    width: 20px;
+  }
+}
+
+@media all and (min-width: 767px) {
+  #drupal-off-canvas .active-workspace {
+    right: 0;
+    top: 0;
+    position: fixed;
+    width: calc(30% - 80px);
+    padding: 20px 40px 0;
+    height: 140px;
+  }
+
+  #drupal-off-canvas .all-workspaces {
+    padding-left: 20px;
+    position: relative;
+    margin-top: 31px;
+    left: 0;
+    top: 27px;
+  }
+
+  .workspace-dialog.ui-widget.ui-widget-content {
+    height: 161px !important;
+  }
+
+  #drupal-off-canvas .workspaces {
+    width: 70%;
+    bottom: 0;
+    position: absolute;
+  }
+
+  #drupal-off-canvas .workspaces ul {
+    display: flex;
+    flex-direction: row;
+  }
+
+  #drupal-off-canvas .workspaces li {
+    margin-bottom: 0;
+  }
+
+  #drupal-off-canvas .active-workspace__actions {
+    position: absolute;
+    bottom: 1em;
+    top: unset;
+  }
+
+  .workspace-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
+    top: 0;
+  }
+
+  .workspace-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close,
+  .workspace-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close:hover,
+  .workspace-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close:focus {
+    top: 1.5em;
+  }
+
+}
+
+/* Make dialog width 100% for workspace mobile viewports. */
+@media all and (max-width: 48em) {
+  .ui-dialog.workspace-dialog {
+      min-width: 100%;
+      max-width: 100%;
+  }
 }
diff --git a/core/modules/workspace/icons/000000/workspace.svg b/core/modules/workspace/icons/000000/workspace.svg
new file mode 100644
index 0000000000..5bf38bc975
--- /dev/null
+++ b/core/modules/workspace/icons/000000/workspace.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path d="M14,12 L16,12 L16,0 L4,0 L4,2 L14,2 L14,12 Z M0,4 L12,4 L12,16 L0,16 L0,4 Z"/>
+</svg>
diff --git a/core/modules/workspace/icons/81c071/ws_icon.svg b/core/modules/workspace/icons/81c071/ws_icon.svg
new file mode 100644
index 0000000000..38566fba3d
--- /dev/null
+++ b/core/modules/workspace/icons/81c071/ws_icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+  <path fill="#81C071" fill-rule="evenodd" d="M19,0 L1,0 C0.449,0 0,0.448 0,1 L0,19 C0,19.552 0.45,20 1,20 L19,20 C19.552,20 20,19.55 20,19 L20,1 C20,0.44771525 19.5522847,3.38176876e-17 19,0 Z M17.001,2 C17.553,2 18.001,2.45 18.001,3 C18.001,3.55 17.551,3.999 17.001,3.999 C16.451,3.999 16.001,3.549 16.001,2.999 C16.001,2.44671525 16.4487153,1.999 17.001,1.999 L17.001,2 Z M13.001,2 C13.552,2 14.001,2.45 14.001,3 C14.001,3.55 13.551,3.999 13.001,3.999 C12.4487153,3.999 12.001,3.55128475 12.001,2.999 C12.001,2.44671525 12.4487153,1.999 13.001,1.999 L13.001,2 Z M9.001,2 C9.552,2 10.001,2.45 10.001,3 C10.001,3.55 9.551,3.999 9.001,3.999 C8.44871525,3.999 8.001,3.55128475 8.001,2.999 C8.001,2.44671525 8.44871525,1.999 9.001,1.999 L9.001,2 Z M18.001,18 L2,18 L2,6 L18.001,6 L18.001,18 Z M4.402,16 L7.598,16 C7.70460623,16.0005334 7.80701477,15.9584887 7.88249152,15.8831997 C7.95796827,15.8079107 8.00026785,15.7056072 8,15.599 L8,8.402 C8.00026565,8.29574025 7.95824022,8.19374159 7.88319685,8.11851062 C7.80815349,8.04327965 7.70626008,8.00099967 7.6,8.001 L4.396,8.001 C4.28956674,8.00073358 4.18741595,8.04289612 4.11215603,8.11815603 C4.03689612,8.19341595 3.99473358,8.29556674 3.995,8.402 L3.995,15.603 C3.999,15.823 4.177,16 4.401,16 L4.402,16 Z M10.402,12 L15.603,12 C15.7094333,12.0002664 15.811584,11.9581039 15.886844,11.882844 C15.9621039,11.807584 16.0042664,11.7054333 16.004,11.599 L16.004,8.398 C16.0042664,8.29156674 15.9621039,8.18941595 15.886844,8.11415603 C15.811584,8.03889612 15.7094333,7.99673358 15.603,7.997 L10.402,7.997 C10.2957402,7.99673435 10.1937416,8.03875978 10.1185106,8.11380315 C10.0432796,8.18884651 10.0009997,8.29073992 10.001,8.397 L10.001,11.6 C10.001,11.824 10.178,12 10.401,12 L10.402,12 Z M10.402,16 L15.603,16 C15.7094333,16.0002664 15.811584,15.9581039 15.886844,15.882844 C15.9621039,15.807584 16.0042664,15.7054333 16.004,15.599 L16.004,14.398 C16.0042664,14.2915667 15.9621039,14.189416 15.886844,14.114156 C15.811584,14.0388961 15.7094333,13.9967336 15.603,13.997 L10.402,13.997 C10.2957402,13.9967343 10.1937416,14.0387598 10.1185106,14.1138031 C10.0432796,14.1888465 10.0009997,14.2907399 10.001,14.397 L10.001,15.6 C10.001,15.824 10.178,16 10.401,16 L10.402,16 Z"/>
+</svg>
diff --git a/core/modules/workspace/icons/f0a100/ws_icon.svg b/core/modules/workspace/icons/f0a100/ws_icon.svg
new file mode 100644
index 0000000000..0e40a50480
--- /dev/null
+++ b/core/modules/workspace/icons/f0a100/ws_icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
+  <path fill="#F0A100" fill-rule="evenodd" d="M38,0 L2.002,0 C0.896716337,-1.37884559e-07 0.000552089742,0.895716475 0,2.001 L0,38.003 C0,39.105 0.899,40.003 2,40.003 L38,40.003 C39.103,40.003 40,39.103 40,38.003 L40,2.001 C40.000531,1.47031248 39.7900198,0.961193334 39.4148607,0.585846626 C39.0397016,0.210499918 38.5306877,-0.000265742306 38,0 Z M34.003,4 C35.105,4 36.003,4.899 36.003,6 C36.003,7.102 35.103,7.998 34.003,7.998 C32.9235903,7.96385326 32.0662376,7.07894966 32.0662376,5.999 C32.0662376,4.91905034 32.9235903,4.03414674 34.003,4 Z M26.003,4 C27.105,4 28.002,4.899 28.002,6 C28.002,7.102 27.102,7.998 26.002,7.998 C24.9225903,7.96385326 24.0652376,7.07894966 24.0652376,5.999 C24.0652376,4.91905034 24.9225903,4.03414674 26.002,4 L26.003,4 Z M18.002,4 C19.104,4 20.002,4.899 20.002,6 C20.002,7.102 19.102,7.998 18.002,7.998 C16.899,7.998 16.002,7.1 16.002,5.999 C16.0025521,4.89482104 16.8978209,3.99999986 18.002,4 Z M36.002,36.002 L4,36.002 L4,12.001 L36.002,12.001 L36.002,36.002 Z M8.805,32.002 L15.196,32.002 C15.4092125,32.0030667 15.6140295,31.9189775 15.764983,31.7683995 C15.9159365,31.6178215 16.0005357,31.4132145 16,31.2 L16,16.805 C16.0005341,16.5919596 15.916072,16.3875055 15.7653354,16.2369566 C15.6145988,16.0864077 15.4100395,16.0022004 15.197,16.003 L8.794,16.003 C8.581215,16.0027342 8.37706868,16.087145 8.22660684,16.2376068 C8.07614501,16.3880687 7.99173418,16.592215 7.992,16.805 L7.992,31.208 C7.99966319,31.6507223 8.36222028,32.0048063 8.805,32.002 Z M20.803,24.002 L31.206,24.002 C31.4190404,24.0025341 31.6234945,23.918072 31.7740434,23.7673354 C31.9245923,23.6165988 32.0087996,23.4120395 32.008,23.199 L32.008,16.797 C32.0085328,16.5841335 31.9242078,16.3798319 31.7736879,16.2293121 C31.6231681,16.0787922 31.4188665,15.9944672 31.206,15.995 L20.803,15.995 C20.5901335,15.9944672 20.3858319,16.0787922 20.2353121,16.2293121 C20.0847922,16.3798319 20.0004672,16.5841335 20.001,16.797 L20.001,23.199 C20.001,23.646 20.356,24.001 20.803,24.001 L20.803,24.002 Z M20.803,32.002 L31.206,32.002 C31.4188665,32.0025328 31.6231681,31.9182078 31.7736879,31.7676879 C31.9242078,31.6171681 32.0085328,31.4128665 32.008,31.2 L32.008,28.797 C32.0085328,28.5841335 31.9242078,28.3798319 31.7736879,28.2293121 C31.6231681,28.0787922 31.4188665,27.9944672 31.206,27.995 L20.803,27.995 C20.5901335,27.9944672 20.3858319,28.0787922 20.2353121,28.2293121 C20.0847922,28.3798319 20.0004672,28.5841335 20.001,28.797 L20.001,31.2 C20.001,31.647 20.356,32.002 20.803,32.002 Z"/>
+</svg>
diff --git a/core/modules/workspace/icons/ffffff/workspace.svg b/core/modules/workspace/icons/ffffff/workspace.svg
deleted file mode 100644
index 299ff26cb5..0000000000
--- a/core/modules/workspace/icons/ffffff/workspace.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g fill="none"><g fill="#FFF"><path d="M14 12L16 12 16 0 4 0 4 2 14 2 14 12ZM0 4L12 4 12 16 0 16 0 4Z"/></g></g></svg>
diff --git a/core/modules/workspace/src/Form/WorkspaceActivateForm.php b/core/modules/workspace/src/Form/WorkspaceActivateForm.php
index ea029c451b..29cd1c6fcf 100644
--- a/core/modules/workspace/src/Form/WorkspaceActivateForm.php
+++ b/core/modules/workspace/src/Form/WorkspaceActivateForm.php
@@ -107,7 +107,7 @@ public function submitForm(array &$form, FormStateInterface $form_state) {
     try {
       $this->workspaceManager->setActiveWorkspace($this->entity);
       $this->messenger->addMessage($this->t('%workspace_label is now the active workspace.', ['%workspace_label' => $this->entity->label()]));
-      $form_state->setRedirectUrl($this->entity->toUrl('collection'));
+      $form_state->setRedirect('<front>');
     }
     catch (WorkspaceAccessException $e) {
       $this->messenger->addError($this->t('You do not have access to activate the %workspace_label workspace.', ['%workspace_label' => $this->entity->label()]));
diff --git a/core/modules/workspace/src/Form/WorkspaceSwitcherForm.php b/core/modules/workspace/src/Form/WorkspaceSwitcherForm.php
index 6ac54a24c6..e760747b6b 100644
--- a/core/modules/workspace/src/Form/WorkspaceSwitcherForm.php
+++ b/core/modules/workspace/src/Form/WorkspaceSwitcherForm.php
@@ -122,7 +122,6 @@ public function submitForm(array &$form, FormStateInterface $form_state) {
     try {
       $this->workspaceManager->setActiveWorkspace($workspace);
       $this->messenger->addMessage($this->t('%workspace_label is now the active workspace.', ['%workspace_label' => $workspace->label()]));
-      $form_state->setRedirect('<front>');
     }
     catch (WorkspaceAccessException $e) {
       $this->messenger->addError($this->t('You do not have access to activate the %workspace_label workspace.', ['%workspace_label' => $workspace->label()]));
diff --git a/core/modules/workspace/src/WorkspaceListBuilder.php b/core/modules/workspace/src/WorkspaceListBuilder.php
index f6bb9340ec..bbaaed3639 100644
--- a/core/modules/workspace/src/WorkspaceListBuilder.php
+++ b/core/modules/workspace/src/WorkspaceListBuilder.php
@@ -2,10 +2,13 @@
 
 namespace Drupal\workspace;
 
+use Drupal\Component\Serialization\Json;
+use Drupal\Core\Ajax\AjaxHelperTrait;
 use Drupal\Core\Entity\EntityInterface;
 use Drupal\Core\Entity\EntityListBuilder;
 use Drupal\Core\Entity\EntityStorageInterface;
 use Drupal\Core\Entity\EntityTypeInterface;
+use Drupal\Core\Url;
 use Symfony\Component\DependencyInjection\ContainerInterface;
 
 /**
@@ -15,6 +18,8 @@
  */
 class WorkspaceListBuilder extends EntityListBuilder {
 
+  use AjaxHelperTrait;
+
   /**
    * The workspace manager service.
    *
@@ -54,7 +59,6 @@ public static function createInstance(ContainerInterface $container, EntityTypeI
   public function buildHeader() {
     $header['label'] = $this->t('Workspace');
     $header['uid'] = $this->t('Owner');
-    $header['status'] = $this->t('Status');
 
     return $header + parent::buildHeader();
   }
@@ -64,12 +68,18 @@ public function buildHeader() {
    */
   public function buildRow(EntityInterface $entity) {
     /** @var \Drupal\workspace\WorkspaceInterface $entity */
-    $row['label'] = $this->t('@label (@id)', ['@label' => $entity->label(), '@id' => $entity->id()]);
-    $row['owner'] = $entity->getOwner()->getDisplayname();
-    $active_workspace = $this->workspaceManager->getActiveWorkspace()->id();
-    $row['status'] = $active_workspace == $entity->id() ? $this->t('Active') : $this->t('Inactive');
+    $row['data'] = [
+      'label' => $entity->label(),
+      'owner' => $entity->getOwner()->getDisplayname(),
+    ];
+    $row['data'] = $row['data'] + parent::buildRow($entity);
+
 
-    return $row + parent::buildRow($entity);
+    $active_workspace = $this->workspaceManager->getActiveWorkspace();
+    if ($entity->id() === $active_workspace->id()) {
+      $row['class'] = 'active-workspace';
+    }
+    return $row;
   }
 
   /**
@@ -85,7 +95,7 @@ public function getDefaultOperations(EntityInterface $entity) {
     $active_workspace = $this->workspaceManager->getActiveWorkspace();
     if ($entity->id() != $active_workspace->id()) {
       $operations['activate'] = [
-        'title' => $this->t('Set Active'),
+        'title' => $this->t('Switch to @workspace', ['@workspace' => $entity->label()]),
         // Use a weight lower than the one of the 'Edit' operation because we
         // want the 'Activate' operation to be the primary operation.
         'weight' => 0,
@@ -106,4 +116,126 @@ public function getDefaultOperations(EntityInterface $entity) {
     return $operations;
   }
 
+  /**
+   * {@inheritdoc}
+   */
+  public function load() {
+    $entities =  parent::load();
+    // Make the active workspace more visible by moving it first in the list.
+    $active_workspace = $this->workspaceManager->getActiveWorkspace();
+    $entities = [$active_workspace->id() => $entities[$active_workspace->id()]] + $entities;
+    return $entities;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function render() {
+    $build = parent::render();
+    if ($this->isAjax()) {
+      $this->offCanvasRender($build);
+    }
+    else {
+      $build['#attached'] = [
+        'library' => ['workspace/drupal.workspace.overview'],
+      ];
+    }
+    return $build;
+  }
+
+  /**
+   * Renders the off canvas elements.
+   *
+   * @param array $build
+   *   A render array.
+   */
+  protected function offCanvasRender(array &$build) {
+    $active_workspace = $this->workspaceManager->getActiveWorkspace();
+    $row_count = count($build['table']['#rows']);
+    $build['active_workspace'] = [
+      '#type' => 'container',
+      '#weight' => -20,
+      '#attributes' => [
+        'class' => [
+          'active-workspace',
+          $active_workspace->isDefaultWorkspace() ? 'active-workspace--default' : 'active-workspace--not-default',
+          'active-workspace--' . $active_workspace->id(),
+        ],
+      ],
+      'label' => [
+        '#type' => 'label',
+        '#prefix' => '<div class="active-workspace__title">' . $this->t('Current workspace:') . '</div>',
+        '#title' => $active_workspace->label(),
+        '#title_display' => '',
+        '#attributes' => ['class' => 'active-workspace__label'],
+      ],
+      'manage' => [
+        '#type' => 'link',
+        '#title' => $this->t('Manage workspaces'),
+        '#url' => $active_workspace->toUrl('collection'),
+        '#attributes' => [
+          'class' => ['active-workspace__manage'],
+        ],
+      ],
+    ];
+    if (!$active_workspace->isDefaultWorkspace()) {
+      $build['active_workspace']['actions'] = [
+        '#type' => 'container',
+        '#weight' => 20,
+        '#attributes' => [
+          'class' => ['active-workspace__actions'],
+        ],
+        'deploy' => [
+          '#type' => 'link',
+          '#title' => $this->t('Deploy content'),
+          '#url' => $active_workspace->toUrl('deploy-form', ['query' => ['destination' => $active_workspace->toUrl('collection')->toString()]]),
+          '#attributes' => [
+            'class' => ['button', 'active-workspace__button'],
+          ],
+        ],
+      ];
+    }
+    if ($row_count > 1) {
+      $build['all_workspaces'] = [
+        '#type' => 'link',
+        '#title' => $this->t('View all @count workspaces', ['@count' => $row_count]),
+        '#url' => $active_workspace->toUrl('collection'),
+        '#attributes' => [
+          'class' => ['all-workspaces'],
+        ],
+      ];
+    }
+    $items = [];
+    $rows = array_slice($build['table']['#rows'], 0, 4, TRUE);
+    foreach ($rows as $id => $row) {
+      if ($active_workspace->id() !== $id) {
+        $url = Url::fromRoute('entity.workspace.activate_form', ['workspace' => $id]);
+        $default_class = $id === WorkspaceInterface::DEFAULT_WORKSPACE ? 'workspaces__item--default' : 'workspaces__item--not-default';
+        $items[] = [
+          '#type' => 'link',
+          '#title' => $row['data']['label'],
+          '#url' => $url,
+          '#attributes' => [
+            'class' => ['use-ajax', 'workspaces__item', $default_class],
+            'data-dialog-type' => 'modal',
+            'data-dialog-options' => Json::encode([
+              'width' => 500,
+            ]),
+          ],
+        ];
+      }
+    }
+    $build['workspaces'] = [
+      '#theme' => 'item_list',
+      '#items' => $items,
+      '#wrapper_attributes' => ['class' => ['workspaces']],
+      '#cache' => [
+        'contexts' => $this->entityType->getListCacheContexts(),
+        'tags' => $this->entityType->getListCacheTags(),
+      ],
+    ];
+    unset($build['table']);
+    unset($build['pager']);
+  }
+
 }
diff --git a/core/modules/workspace/workspace.libraries.yml b/core/modules/workspace/workspace.libraries.yml
index c7aad42bb3..a480f90ef7 100644
--- a/core/modules/workspace/workspace.libraries.yml
+++ b/core/modules/workspace/workspace.libraries.yml
@@ -3,3 +3,8 @@ drupal.workspace.toolbar:
   css:
     theme:
       css/workspace.toolbar.css: {}
+drupal.workspace.overview:
+  version: VERSION
+  css:
+    theme:
+      css/workspace.overview.css: {}
diff --git a/core/modules/workspace/workspace.module b/core/modules/workspace/workspace.module
index dd2ef3823a..0300108eec 100644
--- a/core/modules/workspace/workspace.module
+++ b/core/modules/workspace/workspace.module
@@ -6,8 +6,6 @@
  */
 
 use Drupal\Component\Serialization\Json;
-use Drupal\Core\Cache\Cache;
-use Drupal\Core\Url;
 use Drupal\Core\Entity\EntityInterface;
 use Drupal\Core\Form\FormStateInterface;
 use Drupal\Core\Routing\RouteMatchInterface;
@@ -148,16 +146,6 @@ function workspace_toolbar() {
   /** @var \Drupal\workspace\WorkspaceInterface $active_workspace */
   $active_workspace = \Drupal::service('workspace.manager')->getActiveWorkspace();
 
-  $configure_link = NULL;
-  if ($current_user->hasPermission('administer workspaces')) {
-    $configure_link = [
-      '#type' => 'link',
-      '#title' => t('Manage workspaces'),
-      '#url' => $active_workspace->toUrl('collection'),
-      '#options' => ['attributes' => ['class' => ['manage-workspaces']]],
-    ];
-  }
-
   $items['workspace'] = [
     '#type' => 'toolbar_item',
     'tab' => [
@@ -166,14 +154,17 @@ function workspace_toolbar() {
       '#url' => $active_workspace->toUrl('collection'),
       '#attributes' => [
         'title' => t('Switch workspace'),
-        'class' => ['toolbar-icon', 'toolbar-icon-workspace'],
+        'class' => ['use-ajax', 'toolbar-icon', 'toolbar-icon-workspace'],
+        'data-dialog-type' => 'dialog',
+        'data-dialog-renderer' => 'off_canvas_top',
+        'data-dialog-options' => Json::encode([
+          'height' => 161,
+          'classes' => [
+            'ui-dialog' => 'workspace-dialog',
+          ],
+        ]),
       ],
     ],
-    'tray' => [
-      '#heading' => t('Workspaces'),
-      'workspaces' => workspace_build_renderable_links(),
-      'configure' => $configure_link,
-    ],
     '#wrapper_attributes' => [
       'class' => ['workspace-toolbar-tab'],
     ],
@@ -191,61 +182,3 @@ function workspace_toolbar() {
 
   return $items;
 }
-
-/**
- * Returns an array of workspace activation form links, suitable for rendering.
- *
- * @return array
- *   A render array containing links to the workspace activation form.
- */
-function workspace_build_renderable_links() {
-  $entity_type_manager = \Drupal::entityTypeManager();
-  /** @var \Drupal\Core\Entity\EntityRepositoryInterface $entity_repository */
-  $entity_repository = \Drupal::service('entity.repository');
-  /** @var \Drupal\workspace\WorkspaceInterface $active_workspace */
-  $active_workspace = \Drupal::service('workspace.manager')->getActiveWorkspace();
-
-  $links = $cache_tags = [];
-  foreach ($entity_type_manager->getStorage('workspace')->loadMultiple() as $workspace) {
-    $workspace = $entity_repository->getTranslationFromContext($workspace);
-
-    // Add the 'is-active' class for the currently active workspace.
-    $options = [];
-    if ($workspace->id() === $active_workspace->id()) {
-      $options['attributes']['class'][] = 'is-active';
-    }
-
-    // Get the URL of the workspace activation form and display it in a modal.
-    $url = Url::fromRoute('entity.workspace.activate_form', ['workspace' => $workspace->id()], $options);
-    if ($url->access()) {
-      $links[$workspace->id()] = [
-        'type' => 'link',
-        'title' => $workspace->label(),
-        'url' => $url,
-        'attributes' => [
-          'class' => ['use-ajax'],
-          'data-dialog-type' => 'modal',
-          'data-dialog-options' => Json::encode([
-            'width' => 500,
-          ]),
-        ],
-      ];
-      $cache_tags = Cache::mergeTags($cache_tags, $workspace->getCacheTags());
-    }
-  }
-
-  if (!empty($links)) {
-    $links = [
-      '#theme' => 'links__toolbar_workspaces',
-      '#links' => $links,
-      '#attributes' => [
-        'class' => ['toolbar-menu'],
-      ],
-      '#cache' => [
-        'tags' => $cache_tags,
-      ],
-    ];
-  }
-
-  return $links;
-}
diff --git a/core/themes/stable/css/core/dialog/off-canvas.base.css b/core/themes/stable/css/core/dialog/off-canvas.base.css
index 917dd2390c..cc46bcfa30 100644
--- a/core/themes/stable/css/core/dialog/off-canvas.base.css
+++ b/core/themes/stable/css/core/dialog/off-canvas.base.css
@@ -4,8 +4,7 @@
  */
 
 /* Set some global attributes. */
-#drupal-off-canvas *,
-#drupal-off-canvas *:not(div) {
+#drupal-off-canvas {
   background: #444;
   font-family: "Lucida Grande", 'Lucida Sans Unicode', 'liberation sans', sans-serif;
   color: #ddd;
