diff --git a/website/dist/css/navstyle.css b/website/dist/css/navstyle.css
new file mode 100644
index 0000000..7fed4b6
--- /dev/null
+++ b/website/dist/css/navstyle.css
@@ -0,0 +1,139 @@
+/*
+*				myevent - navstyle.css
+*
+*	Created by Janis Hutz 03/06/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+*/
+
+/*
+    Default rules that are set for mobile interfaces
+*/
+.nav-container {
+    width: 100%;
+    height: 100%;
+    background-color: blue;
+}
+
+.toggle-wrapper {
+    display: inline-flex;
+    height: 100%;
+    width: 80%;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+
+/* Logo image and logo link (aka logo-container)*/
+.logo-container {
+    margin: 0.5%;
+    height: 80%;
+    display: inline-block;
+    width: fit-content;
+}
+
+.mobile-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+}
+
+.logo {
+    display: block;
+    width: auto;
+    height: 100%;
+}
+
+.listtoggle {
+    text-decoration: none;
+    color: black;
+    font-size: 5vh;
+    margin-right: 7%;
+    cursor: pointer;
+}
+
+.active {
+    color: rgba(184, 214, 240, 1);
+}
+
+/* Nav menu holder (contains the flex nav menu and has to exist because of jQuery */
+.nav-menu {
+    background-color: rgba(245, 245, 245, 0.9);
+    display: none;
+    width: 100%;
+}
+
+/* This is the list actually containing the menu items */
+.nav-list {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+}
+
+.navitem {
+    text-decoration: none;
+    text-align: center;
+    color: black;
+    font-size: 1.3rem;
+    padding-top: 2%;
+    padding-bottom: 2%;
+    width: 100%;
+}
+/*
+.navitem:hover {
+    background-color: rgba(184, 214, 240, 1);
+}*/
+
+
+/* 
+    Media queries to optimise for desktop
+*/
+@media only screen and (min-width: 999px) {
+    /* Top navigation bar container */
+    .nav-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    /* div containing the nav-menu unordered list */
+    .nav-wrapper {
+        height: 100%;
+        width: 80%;
+        margin: auto;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .listtoggle, .toggle-wrapper {
+        display: none;
+    }
+
+    .nav-menu {
+        display: flex;
+        background-color: rgba(0, 0, 0, 0);
+    }
+
+    .nav-list {
+        flex-direction: row;
+    }
+
+    .mobile-wrapper {
+        width: fit-content;
+        margin-left: 3%;
+    }
+
+    .navitem {
+        font-size: 0.9rem;
+        width: fit-content;
+        padding: 1%;
+        padding-left: 2%;
+        padding-right: 2%
+    }
+}
diff --git a/website/dist/index.html b/website/dist/index.html
index 3c295b2..757dadc 100644
--- a/website/dist/index.html
+++ b/website/dist/index.html
@@ -5,7 +5,14 @@
         <link rel="stylesheet" href="/css/style.css">
         <link rel="stylesheet" href="/css/home.css">
         <meta charset="utf-8">
+        <script src="/js/index.js"></script>
         <meta name="description" content="Looking for a free and open source event management solution you can host yourself? myevent is a project that does exactly that.">
+        <script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
+        <script defer src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+        <script defer src="/js/index.js"></script>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
+        <script>hljs.highlightAll();</script>
     </head>
     <body>
         <div id="nav"></div>
diff --git a/website/dist/js/index.js b/website/dist/js/index.js
index 7745b20..cfee12d 100644
--- a/website/dist/js/index.js
+++ b/website/dist/js/index.js
@@ -7,3 +7,6 @@
 *
 */
 
+$( document ).ready( function () {
+    $( '#nav' ).load( '/nav.html' );
+} );
\ No newline at end of file
diff --git a/website/dist/nav.html b/website/dist/nav.html
index 0a98019..5d58ac1 100644
--- a/website/dist/nav.html
+++ b/website/dist/nav.html
@@ -5,8 +5,60 @@
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>nav</title>
+        <link rel="stylesheet" href="/css/navstyle.css">
     </head>
     <body>
-        
+        <div class="nav-container">
+            <div class="mobile-wrapper">
+                <a class="logo-container" href="/"><img class="logo" src="/assets/apple-touch-icon.png" alt="impress-logo"></a>
+                <div class="toggle-wrapper">
+                    <a class="listtoggle" onclick="togglelist()">&#9776</a>
+                </div>
+            </div>
+            <div class="nav-wrapper">
+                <div class="nav-menu">
+                    <div class="nav-list">
+                        <a class="navitem" id="docs" href="/docs">Documentation</a>
+                        <a class="navitem" id="download" href="/download.html">Download</a>
+                        <a class="navitem" id="demo" href="/demo">Demo</a>
+                        <a class="navitem" id="examples" href="/demo/examples">Examples</a>
+                        <a class="navitem" id="gh" href="https://github.com/impress/impress.js">GitHub</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <script>
+            $(document).ready(function () {
+                $('.navitem').mouseenter( function () {
+                    if ( window.location.pathname.slice( 1, window.location.pathname.length ) == this.id ) {} else {
+                        $(this).stop();
+                        $(this).animate( { "color":"rgba(184, 214, 240, 1)", "background-color":"rgba(0, 0, 175, 1)" }, 200);
+                    };
+                });
+                $('.navitem').mouseleave( function () {
+                    if ( window.location.pathname.slice( 1, window.location.pathname.length ) == this.id ) {} else {
+                        $(this).stop();
+                        $(this).animate( { "color":"black", "background-color":"rgba(0, 0, 0, 0)" }, 200 );
+                    };
+                });
+            });
+
+            let previous = 1;
+            function togglelist() {
+                $( '.nav-menu' ).slideToggle(300);
+                $( '.listtoggle' ).toggleClass( 'active' );
+            }
+
+            window.addEventListener( 'resize', function( event ) {
+                if ( $(window).width() > 999 ) { 
+                    $( '.nav-menu' ).slideDown();
+                    previous = 1;
+                } else if ( $(window).width() < 999 && previous == 1 ) {
+                    $( '.nav-menu' ).slideUp();
+                    $( '.listtoggle' ).removeClass( 'active' );
+                    previous = 0;
+                };
+            }, true);
+        </script>
     </body>
 </html>
\ No newline at end of file
