diff --git a/website/docs/reference/index.html b/website/docs/reference/index.html
new file mode 100644
index 0000000..2de687c
--- /dev/null
+++ b/website/docs/reference/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Docs - impress.js</title>
+        <!--I am using jquery for button animations.-->
+        <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/docs/loader.js"></script>
+        <link rel="stylesheet" href="/css/docs/style.css">
+    </head>
+    <body>
+        <div class="content">
+            <div id="nav"></div>
+            <div id="top"></div>
+            <div id="docPage">
+                <div id="doc-container">
+                    <h1>API reference</h1>
+                    <p>impress.js is a JavaScript framework to create stunning presentations. Note: impress may not help you, if you have nothing interesting to say!</p>
+                    <p>If you are new to impress and you want to learn to use it, we suggest you <a href="./gettingStarted.html" class="docs-link">start here</a>!</p>
+                </div>
+            </div>
+            <div id="footer"></div>
+        </div>
+    </body>
+</html>
\ No newline at end of file
diff --git a/website/js/docs/loader.js b/website/js/docs/loader.js
index f79d2ce..9366e98 100644
--- a/website/js/docs/loader.js
+++ b/website/js/docs/loader.js
@@ -1,3 +1,6 @@
+let theme = '';
+theme = sessionStorage.getItem( 'theme' ) || getPreferredTheme();
+
 $( document ).ready( function () {
     $( '#nav' ).load( '/docs/nav.html' );
     $( '#top' ).load( '/docs/top.html' );
@@ -5,7 +8,6 @@ $( document ).ready( function () {
 } );
 
 
-let theme = sessionStorage.getItem( 'theme' ) || getPreferredTheme();
 
 // set theme on page load
 function setTheme () {
