diff --git a/language/en-GB/tpl_cassiopeia.sys.ini b/language/en-GB/tpl_cassiopeia.sys.ini
index f2b0f2a651100..8c8f79322bed2 100644
--- a/language/en-GB/tpl_cassiopeia.sys.ini
+++ b/language/en-GB/tpl_cassiopeia.sys.ini
@@ -8,6 +8,7 @@ TPL_CASSIOPEIA_MOD_MENU_LAYOUT_COLLAPSE-METISMENU="Collapsible Dropdown"
 TPL_CASSIOPEIA_MOD_MENU_LAYOUT_DROPDOWN-METISMENU="Dropdown"
 TPL_CASSIOPEIA_POSITION_BANNER="Banner"
 TPL_CASSIOPEIA_POSITION_BELOW-TOP="Below Top"
+TPL_CASSIOPEIA_POSITION_BOTTOM="Bottom"
 TPL_CASSIOPEIA_POSITION_BOTTOM-A="Bottom-a"
 TPL_CASSIOPEIA_POSITION_BOTTOM-B="Bottom-b"
 TPL_CASSIOPEIA_POSITION_BREADCRUMBS="Breadcrumbs"
@@ -19,6 +20,7 @@ TPL_CASSIOPEIA_POSITION_MENU="Menu"
 TPL_CASSIOPEIA_POSITION_SEARCH="Search"
 TPL_CASSIOPEIA_POSITION_SIDEBAR-LEFT="Sidebar-left"
 TPL_CASSIOPEIA_POSITION_SIDEBAR-RIGHT="Sidebar-right"
+TPL_CASSIOPEIA_POSITION_TOP="Top"
 TPL_CASSIOPEIA_POSITION_TOP-A="Top-a"
 TPL_CASSIOPEIA_POSITION_TOP-B="Top-b"
 TPL_CASSIOPEIA_POSITION_TOPBAR="Top Bar"
diff --git a/layouts/chromes/html5.php b/layouts/chromes/html5.php
index 7e370844d18a7..aa3f5d8ea1ed6 100644
--- a/layouts/chromes/html5.php
+++ b/layouts/chromes/html5.php
@@ -15,6 +15,7 @@
 
 $module  = $displayData['module'];
 $params  = $displayData['params'];
+$attribs = $displayData['attribs'];
 
 if ((string) $module->content === '')
 {
@@ -23,7 +24,8 @@
 
 $moduleTag              = htmlspecialchars($params->get('module_tag', 'div'), ENT_QUOTES, 'UTF-8');
 $moduleAttribs          = [];
-$moduleAttribs['class'] = 'moduletable ' . htmlspecialchars($params->get('moduleclass_sfx'), ENT_QUOTES, 'UTF-8');
+$moduleAttribs['class'] = trim("moduletable $module->position $attribs[class] "
+	. htmlspecialchars($params->get('moduleclass_sfx'), ENT_QUOTES, 'UTF-8'));
 $bootstrapSize          = (int) $params->get('bootstrap_size', 0);
 $moduleAttribs['class'] .= $bootstrapSize !== 0 ? ' col-md-' . $bootstrapSize : '';
 $headerTag              = htmlspecialchars($params->get('header_tag', 'h3'), ENT_QUOTES, 'UTF-8');
diff --git a/layouts/chromes/outline.php b/layouts/chromes/outline.php
index 1312c50ffc7ee..a469844460788 100644
--- a/layouts/chromes/outline.php
+++ b/layouts/chromes/outline.php
@@ -17,9 +17,9 @@
 	->registerAndUseStyle('layouts.chromes.outline', 'layouts/chromes/outline.css');
 
 $module = $displayData['module'];
-
+$chromeClass = trim('mod-preview ' . $displayData['attribs']['class']);
 ?>
-<div class="mod-preview">
+<div class="<?php echo $chromeClass; ?>">
 	<div class="mod-preview-info">
 		<div class="mod-preview-position">
 			<?php echo Text::sprintf('JGLOBAL_PREVIEW_POSITION', $module->position); ?>
diff --git a/layouts/chromes/table.php b/layouts/chromes/table.php
index 7d0fc8fe5b0e3..7d3a1b68ea47d 100644
--- a/layouts/chromes/table.php
+++ b/layouts/chromes/table.php
@@ -12,9 +12,10 @@
 
 $module  = $displayData['module'];
 $params  = $displayData['params'];
+$chromeClass = trim('moduletable ' . $displayData['attribs']['class'] . ' ' . htmlspecialchars($params->get('moduleclass_sfx'), ENT_COMPAT, 'UTF-8'));
 ?>
 <table
-	class="moduletable <?php echo htmlspecialchars($params->get('moduleclass_sfx'), ENT_COMPAT, 'UTF-8'); ?>">
+	class="<?php echo $chromeClass; ?>">
 	<?php if ((bool) $module->showtitle) : ?>
 		<tr>
 			<th>
diff --git a/libraries/src/Helper/ModuleHelper.php b/libraries/src/Helper/ModuleHelper.php
index 83880df3acc65..e5b8a315da639 100644
--- a/libraries/src/Helper/ModuleHelper.php
+++ b/libraries/src/Helper/ModuleHelper.php
@@ -160,6 +160,11 @@ public static function renderModule($module, $attribs = array())
 			return '';
 		}
 
+		if (!isset($attribs['class']))
+		{
+			$attribs['class'] = '';
+		}
+
 		// Get module parameters
 		$params = new Registry($module->params);
 
diff --git a/templates/cassiopeia/error.php b/templates/cassiopeia/error.php
index ff62322a5370e..6d757d9da632d 100644
--- a/templates/cassiopeia/error.php
+++ b/templates/cassiopeia/error.php
@@ -138,6 +138,7 @@
 	</header>
 
 	<div class="site-grid">
+		<jdoc:include type="modules" name="top" style="html5" class="container-top" />
 		<div class="grid-child container-component">
 			<h1 class="page-header"><?php echo Text::_('JERROR_LAYOUT_PAGE_NOT_FOUND'); ?></h1>
 			<div class="card">
@@ -181,7 +182,9 @@
 				</div>
 			</div>
 		</div>
+		<jdoc:include type="modules" name="bottom" style="html5" class="container-bottom" />
 	</div>
+
 	<?php if ($this->countModules('footer')) : ?>
 	<footer class="container-footer footer full-width">
 		<div class="grid-child">
diff --git a/templates/cassiopeia/html/layouts/chromes/card.php b/templates/cassiopeia/html/layouts/chromes/card.php
index 2a2ce4098c486..1148f0663f55c 100644
--- a/templates/cassiopeia/html/layouts/chromes/card.php
+++ b/templates/cassiopeia/html/layouts/chromes/card.php
@@ -22,7 +22,8 @@
 
 $moduleTag              = $params->get('module_tag', 'div');
 $moduleAttribs          = [];
-$moduleAttribs['class'] = $module->position . ' card ' . htmlspecialchars($params->get('moduleclass_sfx'), ENT_QUOTES, 'UTF-8');
+$moduleAttribs['class'] = trim("card $module->position $attribs[class] "
+	. htmlspecialchars($params->get('moduleclass_sfx'), ENT_QUOTES, 'UTF-8'));
 $headerTag              = htmlspecialchars($params->get('header_tag', 'h3'), ENT_QUOTES, 'UTF-8');
 $headerClass            = htmlspecialchars($params->get('header_class', ''), ENT_QUOTES, 'UTF-8');
 $headerAttribs          = [];
diff --git a/templates/cassiopeia/html/layouts/chromes/noCard.php b/templates/cassiopeia/html/layouts/chromes/noCard.php
index c997addab6667..6b6cd6717844b 100644
--- a/templates/cassiopeia/html/layouts/chromes/noCard.php
+++ b/templates/cassiopeia/html/layouts/chromes/noCard.php
@@ -22,7 +22,8 @@
 
 $moduleTag              = $params->get('module_tag', 'div');
 $moduleAttribs          = [];
-$moduleAttribs['class'] = $module->position . ' no-card ' . htmlspecialchars($params->get('moduleclass_sfx'), ENT_QUOTES, 'UTF-8');
+$moduleAttribs['class'] = trim("no-card $module->position $attribs[class] "
+	. htmlspecialchars($params->get('moduleclass_sfx'), ENT_QUOTES, 'UTF-8'));
 $headerTag              = htmlspecialchars($params->get('header_tag', 'h3'), ENT_QUOTES, 'UTF-8');
 $headerClass            = htmlspecialchars($params->get('header_class', ''), ENT_QUOTES, 'UTF-8');
 $headerAttribs          = [];
diff --git a/templates/cassiopeia/index.php b/templates/cassiopeia/index.php
index 6df33d64d46bd..b2ce62b1eaf7f 100644
--- a/templates/cassiopeia/index.php
+++ b/templates/cassiopeia/index.php
@@ -173,6 +173,8 @@
 			</div>
 		<?php endif; ?>
 
+		<jdoc:include type="modules" name="top" style="html5" class="container-top" />
+
 		<?php if ($this->countModules('top-a', true)) : ?>
 		<div class="grid-child container-top-a">
 			<jdoc:include type="modules" name="top-a" style="card" />
@@ -218,6 +220,8 @@
 			<jdoc:include type="modules" name="bottom-b" style="card" />
 		</div>
 		<?php endif; ?>
+
+		<jdoc:include type="modules" name="bottom" style="html5" class="container-bottom" />
 	</div>
 
 	<?php if ($this->countModules('footer', true)) : ?>
diff --git a/templates/cassiopeia/scss/blocks/_css-grid.scss b/templates/cassiopeia/scss/blocks/_css-grid.scss
index 6f18d76e71f8e..b0555b063b977 100644
--- a/templates/cassiopeia/scss/blocks/_css-grid.scss
+++ b/templates/cassiopeia/scss/blocks/_css-grid.scss
@@ -38,14 +38,17 @@ body {
 @supports (display: grid) {
   .site-grid {
     display: grid;
+
     grid-template-areas: ". banner banner banner banner ."
+      ". top top top top ."
       ". top-a top-a top-a top-a ."
       ". top-b top-b top-b top-b ."
       ". comp comp comp comp ."
       ". side-r side-r side-r side-r ."
       ". side-l side-l side-l side-l ."
       ". bot-a bot-a bot-a bot-a ."
-      ". bot-b bot-b bot-b bot-b .";
+      ". bot-b bot-b bot-b bot-b ."
+      ". bot bot bot bot .";
     grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 19.875rem)) [main-end] minmax(0, 1fr) [full-end];
     grid-gap: 0 $cassiopeia-grid-gutter;
 
@@ -62,11 +65,13 @@ body {
 
     @include media-breakpoint-up(lg) {
       grid-template-areas: ". banner banner banner banner ."
+        ". top top top top ."
         ". top-a top-a top-a top-a ."
         ". top-b top-b top-b top-b ."
         ". side-l comp comp side-r ."
         ". bot-a bot-a bot-a bot-a ."
-        ". bot-b bot-b bot-b bot-b .";
+        ". bot-b bot-b bot-b bot-b ."
+        ". bot bot bot bot .";
     }
   }
 }
@@ -75,6 +80,10 @@ body {
   grid-area: banner;
 }
 
+.container-top {
+  grid-area: top;
+}
+
 .container-top-a {
   grid-area: top-a;
 }
@@ -114,3 +123,7 @@ body {
 .container-bottom-b {
   grid-area: bot-b;
 }
+
+.container-bottom {
+  grid-area: bot;
+}
diff --git a/templates/cassiopeia/templateDetails.xml b/templates/cassiopeia/templateDetails.xml
index 7934224a35409..6e050349bf14e 100644
--- a/templates/cassiopeia/templateDetails.xml
+++ b/templates/cassiopeia/templateDetails.xml
@@ -28,6 +28,7 @@
 		<position>menu</position>
 		<position>search</position>
 		<position>banner</position>
+		<position>top</position>
 		<position>top-a</position>
 		<position>top-b</position>
 		<position>main-top</position>
@@ -37,6 +38,7 @@
 		<position>sidebar-right</position>
 		<position>bottom-a</position>
 		<position>bottom-b</position>
+		<position>bottom</position>
 		<position>footer</position>
 		<position>debug</position>
 	</positions>