diff --git a/Frontend/Index.html b/Frontend/Index.html
index ba86c38..3bddecb 100755
--- a/Frontend/Index.html
+++ b/Frontend/Index.html
@@ -14,6 +14,7 @@
     <link rel="stylesheet" href="Styles/SpinningWheel.css" />
     <link rel="stylesheet" href="Styles/minibar.min.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/1.13.1/css/OverlayScrollbars.css" />
     <!-- CSS end -->
     <!-- Header scripts -->
     <script src="https://kit.fontawesome.com/57b6c8b971.js" crossorigin="anonymous"></script>
@@ -22,6 +23,7 @@
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/1.13.1/js/jquery.overlayScrollbars.js"></script>
     <!-- Header scripts end -->
 </head>
 
@@ -697,12 +699,15 @@
     </footer>
     <!-- Footer end -->
     <!-- Body scripts -->
+    <script src="Javascript/OverlayScrollbar.js"></script>
+    <script src="Javascript/ScrollController.js"></script>
+
     <script src="Javascript/Collapsible.js"></script>
     <script src="Javascript/PasswordValidation.js"></script>
     <script src="Javascript/Kalender.js"></script>
     <script src="Javascript/SpinningWheel.js"></script>
     <script src="Javascript/minibar.min.js"></script>
-    <script src="Javascript/HeaderFunctionality.js"></script>
+    <!-- <script src="Javascript/HeaderFunctionality.js"></script> -->
     <script src="Javascript/LoginFunctionality.js"></script>
     <!-- Body scripts end -->
 </body>
diff --git a/Frontend/Javascript/OverlayScrollbar.js b/Frontend/Javascript/OverlayScrollbar.js
new file mode 100644
index 0000000..edfa535
--- /dev/null
+++ b/Frontend/Javascript/OverlayScrollbar.js
@@ -0,0 +1,10 @@
+document.addEventListener("DOMContentLoaded", function() {
+    //The first argument are the elements to which the plugin shall be initialized
+    //The second argument has to be at least a empty object or a object with your desired options
+    OverlayScrollbars(document.querySelectorAll('body'), { });
+});
+
+$(function() {
+    //The passed argument has to be at least a empty object or a object with your desired options
+    $('body').overlayScrollbars({ });
+});
\ No newline at end of file
diff --git a/Frontend/Javascript/ScrollController.js b/Frontend/Javascript/ScrollController.js
new file mode 100644
index 0000000..1f89603
--- /dev/null
+++ b/Frontend/Javascript/ScrollController.js
@@ -0,0 +1,21 @@
+/* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */
+$(document).ready(function() {
+    var instance = $('body').overlayScrollbars(); 
+    var prevScrollpos = instance.scroll().position.y;
+
+    console.log(prevScrollpos);
+
+    window.onscroll = function() {
+
+        var currentScrollPos = instance.scroll().position.y;
+        console.log(currentScrollPos);
+        if (prevScrollpos > currentScrollPos) {
+                $("#header").css({"top" : "0"});
+        } else {
+                $("#header").css({"top" : "-50px"});
+        }
+
+        prevScrollpos = currentScrollPos;
+    }
+
+});
\ No newline at end of file