diff --git a/templates/cassiopeia/index.php b/templates/cassiopeia/index.php
index e11b9229b9ab8..4aed453f76a6f 100644
--- a/templates/cassiopeia/index.php
+++ b/templates/cassiopeia/index.php
@@ -66,7 +66,7 @@
 	<jdoc:include type="scripts" />
 </head>
 
-<body class="site-grid site <?php echo $option
+<body class="site-grid site<?php echo $option
 	. ' ' . $wrapper
 	. ' view-' . $view
 	. ($layout ? ' layout-' . $layout : ' no-layout')
@@ -75,6 +75,7 @@
 	. ' ' . $pageclass;
 	echo ($this->direction == 'rtl' ? ' rtl' : '');
 ?>">
+  
 	<div class="grid-child container-header full-width">
 		<header class="header">
 			<nav class="grid-child navbar navbar-expand-lg">
@@ -168,16 +169,13 @@
 	<?php if ($this->countModules('footer')) : ?>
 	<footer class="grid-child container-footer footer">
 		<hr>
-		<p class="float-right">
-			<a href="#top" id="back-top" class="back-top">
-				<span class="icon-arrow-up-4" aria-hidden="true"></span>
-				<span class="sr-only"><?php echo Text::_('TPL_CASSIOPEIA_BACKTOTOP'); ?></span>
-			</a>
-		</p>
 		<jdoc:include type="modules" name="footer" style="none" />
 	</footer>
 	<?php endif; ?>
-
+   <div class="gotop">
+	   <a href="#top" id="back-top" class="back-top" title="<?php echo Text::_('TPL_CASSIOPEIA_BACKTOTOP'); ?>"><span class="icon-arrow-up-4" aria-hidden="true"></span></a>
+	   </div>
+    
 	<jdoc:include type="modules" name="debug" style="none" />
 
 </body>
diff --git a/templates/cassiopeia/js/template.js b/templates/cassiopeia/js/template.js
index ea029cc8e53f7..a5e4ff9e4bc06 100644
--- a/templates/cassiopeia/js/template.js
+++ b/templates/cassiopeia/js/template.js
@@ -50,4 +50,6 @@ Joomla = window.Joomla || {};
 	 */
 	document.addEventListener('joomla:updated', initTemplate);
 
-})(Joomla, document);
\ No newline at end of file
+})(Joomla, document);
+
+
diff --git a/templates/cassiopeia/scss/blocks/_css-grid.scss b/templates/cassiopeia/scss/blocks/_css-grid.scss
index c341e6f85f037..d136774f62eba 100644
--- a/templates/cassiopeia/scss/blocks/_css-grid.scss
+++ b/templates/cassiopeia/scss/blocks/_css-grid.scss
@@ -12,7 +12,7 @@
       ". main main main main ."
       ". bot-a bot-a bot-a bot-a ."
       ". bot-b bot-b bot-b bot-b ."
-      ". footer footer footer footer ."
+      ". footer footer footer gotop ."
       ". debug debug debug debug .";
     grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 270px)) [main-end] minmax(0, 1fr) [full-end];
     grid-gap: 0 $cassiopeia-grid-gutter;
@@ -52,7 +52,7 @@
         ". top-b top-b top-b top-b ."
         ". bot-a bot-a bot-a bot-a ."
         ". bot-b bot-b bot-b bot-b ."
-        ". footer footer footer footer ."
+        ". footer footer footer gotop ."
         ". debug debug debug debug .";
     }
 
diff --git a/templates/system/css/user.css b/templates/system/css/user.css
new file mode 100644
index 0000000000000..914e9e13dbad3
--- /dev/null
+++ b/templates/system/css/user.css
@@ -0,0 +1,21 @@
+.gotop {
+  position: fixed; 
+  width: 50px; 
+  height: 50px; 
+  margin-top: 500px; 
+  padding: 15px 11px; 
+  border-radius: 3px; 
+  bottom: 2px; 
+  right: 10px; 
+  background-color: rgba(67, 76, 120, 0.75);
+  z-index: 999;
+}
+.icon-arrow-up-4:before {
+  font-size: 2.0em;  
+}
+.back-top {
+  color: white;
+}
+.back-top:hover {
+  color: #A1A0BB;
+}
\ No newline at end of file
