diff --git a/website/css/style.css b/website/css/style.css
index f796988..b6547d2 100644
--- a/website/css/style.css
+++ b/website/css/style.css
@@ -119,8 +119,29 @@ body {
 }
 
 /* This div will have crazy cool style, as this should represent that you can use (almost) all the CSS you want.*/
-.create .crazy-styled {
+.create .special-style {
     background-color: aqua;
+    border-radius: 50px;
+    font-family: cursive;
+    padding: 5%;
+    animation-name: background;
+    animation-duration: 5s;
+    animation-iteration-count: 500;
+}
+
+@keyframes background {
+    0% {
+        background-color: aqua;
+        border-radius: 50px;
+    }
+    50% {
+        background-color: rgba(0, 255, 255, 0.2);
+        border-radius: 200px;
+    }
+    100% {
+        background-color: aqua;
+        border-radius: 50px;
+    }
 }
 
 .centered {
diff --git a/website/demo/examples/index.html b/website/demo/examples/index.html
index 7a533cf..8fdc2e7 100644
--- a/website/demo/examples/index.html
+++ b/website/demo/examples/index.html
@@ -1,16 +1,41 @@
+
+<!DOCTYPE html>
 <html>
-<head>
-<title>Example presentations</title>
-</head>
-<body><h1>Example presentations</h1>
-<ul><br />
-  <li><a href="undefined/">undefined</a></li>
-  <li><a href="undefined/">undefined</a></li>
-  <li><a href="undefined/">undefined</a></li>
-  <li><a href="undefined/">undefined</a></li>
-  <li><a href="undefined/">undefined</a></li>
-  <li><a href="undefined/">undefined</a></li>
-  <li><a href="undefined/">undefined</a></li>
-</ul>
-</body>
+    <head>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/css/style.css">
+        <title>Example presentations</title>
+        <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>
+        <style>
+            .list {
+                margin-top: 10%;
+                font-size: 1.5rem;
+                list-style: none;
+            }
+            .list-element {
+                text-decoration: none;
+                color: white;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="navbar"></div>
+        <div class="title">
+            <div class="title-content">
+                <h1 class="heading">Examples</h1>
+            </div>
+                <ul class="list"><br>
+                  <li class="button"><a class="list-element" href="2D-navigation/">2D-navigation</a></li>
+                  <li class="button"><a class="list-element" href="3D-positions/">3D-positions</a></li>
+                  <li class="button"><a class="list-element" href="3D-rotations/">3D-rotations</a></li>
+                  <li class="button"><a class="list-element" href="classic-slides/">classic-slides</a></li>
+                  <li class="button"><a class="list-element" href="cube/">cube</a></li>
+                  <li class="button"><a class="list-element" href="markdown/">markdown</a></li>
+
+                </ul>
+            </div>
+        <div id="footer"></div>
+    </body>
 </html>
\ No newline at end of file
diff --git a/website/docs/nav.html b/website/docs/nav.html
index 32d13a9..526b64e 100644
--- a/website/docs/nav.html
+++ b/website/docs/nav.html
@@ -13,7 +13,7 @@
                     <a class="navitem" id="gettingStarted" href="/docs/gettingStarted.html">Getting Started</a>
                     <a class="navitem" id="referenceNav" onclick="toggleList( 'reference' );">API reference</a>
                     <div class="dropdown" id="reference">
-                        <a class="nav-subitem" id="root" href="/docs/reference">Home</a><a class="nav-subitem" id="CSS" href="/docs/reference/CSS.html">CSS</a><a class="nav-subitem" id="HTML" href="/docs/reference/HTML.html">HTML</a><a class="nav-subitem" id="JavaScript" href="/docs/reference/JavaScript.html">JavaScript</a><a class="nav-subitem" id="Plugins" href="/docs/reference/Plugins.html">Plugins</a></div>
+                        <a class="nav-subitem" id="root" href="/docs/reference">Home</a><a class="nav-subitem" id="CSS" href="/docs/reference/CSS.html">CSS</a><a class="nav-subitem" id="HTML" href="/docs/reference/HTML.html">HTML</a><a class="nav-subitem" id="JavaScript" href="/docs/reference/JavaScript.html">JavaScript</a><a class="nav-subitem" id="Plugins" href="/docs/reference/Plugins.html">Plugins</a><a class="nav-subitem" id="index" href="/docs/reference/index.html">index</a></div>
                     <a class="navitem" id="pluginsNav" onclick="toggleList( 'plugins' );">Plugins</a>
                     <div class="dropdown" id="plugins">
                     <a class="nav-subitem" id="autoplay" href="/docs/plugins/autoplay.html">autoplay</a><a class="nav-subitem" id="blackout" href="/docs/plugins/blackout.html">blackout</a><a class="nav-subitem" id="extras" href="/docs/plugins/extras.html">extras</a><a class="nav-subitem" id="form" href="/docs/plugins/form.html">form</a><a class="nav-subitem" id="fullscreen" href="/docs/plugins/fullscreen.html">fullscreen</a><a class="nav-subitem" id="goto" href="/docs/plugins/goto.html">goto</a><a class="nav-subitem" id="help" href="/docs/plugins/help.html">help</a><a class="nav-subitem" id="impressConsole" href="/docs/plugins/impressConsole.html">impressConsole</a><a class="nav-subitem" id="media" href="/docs/plugins/media.html">media</a><a class="nav-subitem" id="mobile" href="/docs/plugins/mobile.html">mobile</a><a class="nav-subitem" id="mouse-timeout" href="/docs/plugins/mouse-timeout.html">mouse-timeout</a><a class="nav-subitem" id="navigation" href="/docs/plugins/navigation.html">navigation</a><a class="nav-subitem" id="navigation-ui" href="/docs/plugins/navigation-ui.html">navigation-ui</a><a class="nav-subitem" id="progress" href="/docs/plugins/progress.html">progress</a><a class="nav-subitem" id="rel" href="/docs/plugins/rel.html">rel</a><a class="nav-subitem" id="resize" href="/docs/plugins/resize.html">resize</a><a class="nav-subitem" id="skip" href="/docs/plugins/skip.html">skip</a><a class="nav-subitem" id="stop" href="/docs/plugins/stop.html">stop</a><a class="nav-subitem" id="substep" href="/docs/plugins/substep.html">substep</a><a class="nav-subitem" id="toolbar" href="/docs/plugins/toolbar.html">toolbar</a><a class="nav-subitem" id="touch" href="/docs/plugins/touch.html">touch</a></div>
diff --git a/website/docs/src/build.js b/website/docs/src/build.js
index a9c5d02..66cbec9 100644
--- a/website/docs/src/build.js
+++ b/website/docs/src/build.js
@@ -372,16 +372,48 @@ function buildExamplesPage () {
     /* Auto generate an index.html that lists all the directories under examples/
     * This is useful for gh-pages, so you can link to http://impress.github.io/impress.js/examples
     */
-    var html_list = '<ul><br />\n'
-    let dirList = fs.readdirSync( path.join( __dirname + '/../../demo/examples' ) )
+    console.log( 'building examples page' );
+    let html_list = '<ul class="list"><br>\n';
+    let dirList = fs.readdirSync( path.join( __dirname + '/../../demo/examples' ) );
     dirList.forEach( function( dir ) {
-        html_list += '  <li><a href="' + dir['file'] + '/">' + dir[ 'name' ] + '</a></li>\n';
+        if ( dir === 'index.html' ) {} else {
+            html_list += '                  <li class="button"><a class="list-element" href="' + dir + '/">' + dir + '</a></li>\n';
+        };
     });
-    html_list += '</ul>\n'
-
-    var html = '<html>\n<head>\n<title>Example presentations</title>\n</head>\n<body>'
-    html += '<h1>Example presentations</h1>\n' + html_list
-    html += '</body>\n</html>'
+    let html = `
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/css/style.css">
+        <title>Example presentations</title>
+        <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>
+        <style>
+            .list {
+                margin-top: 10%;
+                font-size: 1.5rem;
+                list-style: none;
+            }
+            .list-element {
+                text-decoration: none;
+                color: white;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="navbar"></div>
+        <div class="title">
+            <div class="title-content">
+                <h1 class="heading">Examples</h1>
+            </div>
+                ${ html_list }
+                </ul>
+            </div>
+        <div id="footer"></div>
+    </body>
+</html>`;
 
     fs.writeFileSync( path.join( __dirname + '/../../demo/examples/index.html' ), html );
 }
\ No newline at end of file
diff --git a/website/index.html b/website/index.html
index 7dba61a..7f82a2a 100644
--- a/website/index.html
+++ b/website/index.html
@@ -9,8 +9,8 @@
         <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>
         <!--I will be using highlight.js to highlight the syntax, but I still need to figure out how to use it.-->
-        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
-        <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.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>
@@ -42,9 +42,21 @@
                         </code>
                     </pre>
                 </div>
-                <div class="crazy-styled">
-                    <h3>And CSS</h3>
-                    <!--TODO: Add CSS demo-code-->
+                <div class="special-style">
+                    <h3 style="font-size: 200%;">And CSS</h3>
+                    <pre>
+                        <code>
+.impress-supported .fallback-message {
+    display: none;
+}
+
+.step {
+    width: 80vw;
+    height: 80vh;
+    background-color: white;
+}
+                        </code>
+                    </pre>
                 </div>
                 <p>To create stunning presentations</p>
             </div>
diff --git a/website/js/index.js b/website/js/index.js
index 4398743..5e5f278 100644
--- a/website/js/index.js
+++ b/website/js/index.js
@@ -1,6 +1,6 @@
 $( document ).ready( function () {
-    $( '#navbar' ).load( 'nav.html' );
-    $( '#footer' ).load( 'footer.html' );
+    $( '#navbar' ).load( '/nav.html' );
+    $( '#footer' ).load( '/footer.html' );
 
     $( document ).ready(function () {
         $( '.button' ).mouseenter( function () {
diff --git a/website/nav.html b/website/nav.html
index 7bde880..debef2b 100644
--- a/website/nav.html
+++ b/website/nav.html
@@ -2,7 +2,7 @@
 <html>
     <head>
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <link rel="stylesheet" href="./css/menustyle.css">
+        <link rel="stylesheet" href="/css/menustyle.css">
     </head>
     <body>
         <div class="nav-container">
