diff --git a/templates/base.html b/templates/base.html
index 410a945..f8ec1f6 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -229,19 +229,66 @@ input[type=number] {
   -moz-appearance: textfield;
 }
 
+.header {
+width:100%;
+    text-align:center;
+z-index: 99;
+background-color: white;
+}
+
+.content {
+	padding: 16px;
+}
+      /* The sticky class is added to the header with JS when it reaches its scroll position */
+.sticky {
+  position: fixed;
+  top: 0;
+  width: 100%
+}
+
+
+/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
+.sticky + .content {
+  padding-top: 102px;
+}
+
 </style>
 
   </head>
   <body>
-	  <button style="background-color: white;color: black;border: 1px dotted black;width: 98%;margin: 1%;" onclick="goToPage('/')">Home</button> 
+
+
+	  <div class="header" id='myHeader'>
+		  <span><h2>{{ tmp }} - {{ title }} </h2></span>
+
+	<span><button style="background-color: white;color: black;border: 1px dotted black;width: 98%;margin: 1%;" onclick="goToPage('/')">Home</button></span>
+</div>
+
     <div class="container">
       <center>
 
-      <h2 style="margin: 0px 0px 0px 0px;"> {{ tmp }}</h2>
       <img style='height: 100px; width: auto; object-fit: contain'  src="/static/sets/{{ tmp }}/cover.jpg" alt="Image">
-      <h2 style="margin: 0px 0px 0px 0px;">{{ title }}</h2></center>
       {% block content %}{% endblock %}
     </div>
     {% block scripts %}{% endblock %}
   </body>
+  <script>
+// When the user scrolls the page, execute myFunction
+window.onscroll = function() {myFunction()};
+
+// Get the header
+var header = document.getElementById("myHeader");
+
+// Get the offset position of the navbar
+var sticky = header.offsetTop;
+
+// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
+function myFunction() {
+  if (window.pageYOffset > sticky) {
+    header.classList.add("sticky");
+  } else {
+    header.classList.remove("sticky");
+  }
+} 
+</script>
 </html>
