diff --git a/public/css/notes.css b/public/css/notes.css
index 91dc543f9..5c6b2d3ba 100644
--- a/public/css/notes.css
+++ b/public/css/notes.css
@@ -1,46 +1,57 @@
-
 body {
     margin: 0;
-	padding:0;
-	width: 100%;
+    padding: 0;
+    width: 100%;
     background-color: rgb(36, 37, 37);
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-size: cover;
-	font-family: "Noto Sans", "Noto Color Emoji", sans-serif; 
-	font-size:16px; /*1rem*/
-	color: #999;
-	box-sizing: border-box;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-	/*z-index:0;*/
+    font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
+    font-size: 16px;
+    /*1rem*/
+    color: #999;
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    /*z-index:0;*/
 }
 
 #main {
     padding-top: 20px;
-	/*z-index:1;*/
-	}
+    /*z-index:1;*/
+}
 
-#content{
+#content {
     margin: 0 auto;
     max-width: 700px;
-	border: 1px solid #333;
-	padding: 20px;
-	border-radius: 20px;
-	background-color: rgba(0,0,0,0.5);
-	line-height: 1.5rem;
-	box-shadow: 0 0 5px black;
-	/*z-index: 2;*/
+    border: 1px solid #333;
+    padding: 20px;
+    border-radius: 20px;
+    background-color: rgba(0, 0, 0, 0.5);
+    line-height: 1.5rem;
+    box-shadow: 0 0 5px black;
+    /*z-index: 2;*/
 }
 
 code {
-	border: 1px solid #999; 
-	background-color: rgba(0,0,0,0.5);
-	padding: 5px;
-	border-radius:5px;
-	display: block;
-	}
+    border: 1px solid #999;
+    background-color: rgba(0, 0, 0, 0.5);
+    padding: 5px;
+    border-radius: 5px;
+    display: block;
+}
 
-a {color: orange; text-decoration:none; border-bottom: 1px dotted orange; }
-h2, h3 {margin: 0; color:#ccc;}
-hr {border: 1px solid #999;}
\ No newline at end of file
+a {
+    color: orange;
+    text-decoration: none;
+    border-bottom: 1px dotted orange;
+}
+
+h2,
+h3 {
+    color: #ccc;
+}
+
+hr {
+    border: 1px solid #999;
+}
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 87a5df02b..b316d2123 100644
--- a/public/index.html
+++ b/public/index.html
@@ -84,7 +84,7 @@
                         <div id="respective-presets-block" class="width100p">
                             <div id="kobold_api-presets">
                                 <h3>Kobold Presets
-                                    <a href="/notes/4" class="notes-link" target="_blank">
+                                    <a href="/notes#basicsettings" class="notes-link" target="_blank">
                                         <span class="note-link-span">?</span>
                                     </a>
                                 </h3>
@@ -95,7 +95,7 @@
                             <div id="novel_api-presets">
                                 <h3>
                                     NovelAI Presets
-                                    <a href="/notes/7" class="notes-link" target="_blank">
+                                    <a href="/notes#settings" class="notes-link" target="_blank">
                                         <span class="note-link-span">?</span>
                                     </a>
                                 </h3>
@@ -443,7 +443,7 @@
                             </div>
                             <div id="novel_api-settings">
                                 <h4>Novel AI Model
-                                    <a href="/notes/8" class="notes-link" target="_blank">
+                                    <a href="/notes#models" class="notes-link" target="_blank">
                                         <span class="note-link-span">?</span>
                                     </a>
                                 </h4>
@@ -863,7 +863,7 @@
 
                             <h4>API key</h4>
                             <h5>Where to get
-                                <a href="/notes/6" class="notes-link" target="_blank">
+                                <a href="/notes#apikey" class="notes-link" target="_blank">
                                     <span class="note-link-span">?</span>
                                 </a>
                             </h5>
@@ -904,7 +904,7 @@
                         <form action="javascript:void(null);" method="post" enctype="multipart/form-data">
                             <h4>API key </h4>
                             <h5>Where to get
-                                <a href="/notes/oai_api_key" class="notes-link" target="_blank">
+                                <a href="/notes#apikey-1" class="notes-link" target="_blank">
                                     <span class="note-link-span">?</span>
                                 </a>
                             </h5>
@@ -977,7 +977,7 @@
             </div>
             <div class="drawer-content">
                 <h3>Advanced Formatting
-                    <a href="/notes/advanced_formatting" class="notes-link" target="_blank">
+                    <a href="/notes#advancedformatting" class="notes-link" target="_blank">
                         <span class="note-link-span">?</span>
                     </a>
                 </h3>
@@ -1015,7 +1015,7 @@
                         <div id="anchors-block">
                             <h4>
                                 Anchors Order
-                                <a href="/notes/9" class="notes-link" target="_blank">
+                                <a href="/notes#anchors" class="notes-link" target="_blank">
                                     <span class="note-link-span">?</span>
                                 </a>
                             </h4>
@@ -1057,7 +1057,7 @@
                         <div>
                             <h4>
                                 Multigen
-                                <a href="/notes/multigen" class="notes-link" target="_blank">
+                                <a href="/notes#multigen" class="notes-link" target="_blank">
                                     <span class="note-link-span">?</span>
                                 </a>
                             </h4>
@@ -1100,7 +1100,7 @@
                             </div>
                         </div>
                     </div>
-                    <h4>How to use <a href="/notes/13" class="notes-link" target="_blank"><span class="note-link-span">?</span></a></h4>
+                    <h4>How to use <a href="/notes#worldinfo" class="notes-link" target="_blank"><span class="note-link-span">?</span></a></h4>
                     <div id="rm_world_import" class="right_menu" style="display: none;">
                         <form id="form_world_import" action="javascript:void(null);" method="post" enctype="multipart/form-data">
                             <input type="file" id="world_import_file" accept=".json" name="avatar">
@@ -1112,14 +1112,14 @@
                     <input id="world_info_edit_button" class="menu_button" type="submit" value="Details">
                     <div id="world_info_depth_block">
                         <h4>
-                            Scan Depth <a href="/notes/13_1" class="notes-link" target="_blank"><span class="note-link-span">?</span></a>
+                            Scan Depth <a href="/notes#scandepth" class="notes-link" target="_blank"><span class="note-link-span">?</span></a>
                         </h4>
                         <span id="world_info_depth_counter">depth</span>
                         <input type="range" id="world_info_depth" name="volume" min="1" max="10" step="1">
                     </div>
                     <div id="world_info_budget_block">
                         <h4>
-                            Token Budget <a href="/notes/13_2" class="notes-link" target="_blank"><span class="note-link-span">?</span></a>
+                            Token Budget <a href="/notes#budget" class="notes-link" target="_blank"><span class="note-link-span">?</span></a>
                         </h4>
                         <span id="world_info_budget_counter">budget</span>
                         <input type="range" id="world_info_budget" name="volume" min="32" max="2048" step="16">
@@ -1127,7 +1127,7 @@
                 </div>
                 <div id="softprompt_block">
                     <h4>Soft Prompt</h4>
-                    <h5>About soft prompts <a href="/notes/14" class="notes-link" target="_blank"><span class="note-link-span">?</span></a></h5>
+                    <h5>About soft prompts <a href="/notes#softprompts" class="notes-link" target="_blank"><span class="note-link-span">?</span></a></h5>
                     <select id="softprompt">
                         <option value="">None</option>
                     </select>
@@ -1267,7 +1267,7 @@
                                 <audio id="audio_message_sound" src="sounds/message.mp3" hidden></audio>
                                 <span>
                                     Message Sound
-                                    <a href="/notes/message_sound" class="notes-link" target="_blank">
+                                    <a href="/notes#messagesound" class="notes-link" target="_blank">
                                         <span class="note-link-span">?</span>
                                     </a>
                                 </span>
@@ -1421,7 +1421,7 @@
 
                             <div id="description_div" class="margin-bot-10px">
                                 Description
-                                <a href="/notes/1" class="notes-link" target="_blank">
+                                <a href="/notes#characterdescription" class="notes-link" target="_blank">
                                     <span class="note-link-span">?</span>
                                 </a>
                             </div>
@@ -1430,7 +1430,7 @@
 
                             <div id="first_message_div" class="margin-bot-10px">
                                 First message
-                                <a href="/notes/3" class="notes-link" target="_blank">
+                                <a href="/notes#firstmessage" class="notes-link" target="_blank">
                                     <span class="note-link-span">?</span>
                                 </a>
 
@@ -1476,7 +1476,7 @@
                                 </label>
                                 <h5>
                                     Group reply strategy
-                                    <a href="/notes/group_reply_strategy" class="notes-link" target="_blank"><span class="note-link-span">?</span></a>
+                                    <a href="/notes#groupreplystrategy" class="notes-link" target="_blank"><span class="note-link-span">?</span></a>
                                 </h5>
                                 <label>
                                     <input type="radio" name="rm_group_activation_strategy" value="0" />
@@ -1610,14 +1610,14 @@
         <div id="personality_div">
             <hr>
             <h4>Personality summary</h4>
-            <h5>A brief description of the personality <a href="/notes/2" class="notes-link" target="_blank"><span class="note-link-span">?</span></a></h5>
+            <h5>A brief description of the personality <a href="/notes#personalitysummary" class="notes-link" target="_blank"><span class="note-link-span">?</span></a></h5>
             <textarea id="personality_textarea" name="personality" placeholder="" form="form_create" class="text_pole" autocomplete="off" rows="2"></textarea>
         </div>
 
         <div id="scenario_div">
             <h4>Scenario</h4>
             <h5>Circumstances and context of the dialogue
-                <a href="/notes/12" class="notes-link" target="_blank">
+                <a href="/notes#scenario" class="notes-link" target="_blank">
                     <span class="note-link-span">?</span>
                 </a>
             </h5>
@@ -1639,7 +1639,7 @@
         <div id="mes_example_div">
             <div>
                 <h4>Examples of dialogue</h4>
-                <h5>Forms a personality more clearly <a href="/notes/11" class="notes-link" target="_blank"><span class="note-link-span">?</span></a></h5>
+                <h5>Forms a personality more clearly <a href="/notes#examplesofdialogue" class="notes-link" target="_blank"><span class="note-link-span">?</span></a></h5>
             </div>
             <textarea id="mes_example_textarea" name="mes_example" placeholder="" form="form_create"></textarea>
         </div>
@@ -1655,7 +1655,7 @@
                     <img src="img/book2.png" id="world_logo">
                     <h3>
                         World Info Editor
-                        <a href="/notes/13_3" class="notes-link" target="_blank"><span class="note-link-span">?</span></a>
+                        <a href="/notes#worldinfoentry" class="notes-link" target="_blank"><span class="note-link-span">?</span></a>
                     </h3>
                 </div>
                 <div class="world_popup_expander">&nbsp;</div>
@@ -1764,7 +1764,7 @@
                     <span id="ChatHistoryCharName"></span>
                     <br>
                     Chat History
-                    <a href="/notes/10" class="notes-link" target="_blank"><span class="note-link-span">?</span></a>
+                    <a href="/notes#chatimport" class="notes-link" target="_blank"><span class="note-link-span">?</span></a>
                 </div>
                 <form id="form_import_chat" action="javascript:void(null);" method="post" enctype="multipart/form-data" style="display: none;">
                     <input type="file" id="chat_import_file" accept=".json, .jsonl" name="avatar">
diff --git a/public/notes/index.html b/public/notes/index.html
index 18bc58988..c2ff713b6 100644
--- a/public/notes/index.html
+++ b/public/notes/index.html
@@ -1,4 +1,5 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
 
 <head>
     <title>SillyTavern Guidebook</title>
@@ -10,16 +11,24 @@
     <script src="/scripts/showdown-toc.min.js"></script>
     <script type="module">
         const toc = [];
+        let hash = location.hash;
         let converter = new showdown.Converter({ extensions: [showdownToc({ toc })] } );
         let text = await (await fetch('/notes/content.md')).text();
         let content = document.getElementById('content');
         content.innerHTML = converter.makeHtml(text);
+        const link = document.createElement('a');
+        link.href = hash;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
     </script>
 </head>
 
 <body>
     <div id="main">
         <div id="content">
+            <!-- To change the guidebook content edit the content.md file -->
+            <!-- Then it will be dynamically inserted here -->
         </div>
     </div>
 </body>