2 files changed, 15 insertions, 3 deletions

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index fa1b3b7..d505868 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -126,7 +126,19 @@ document.addEventListener("DOMContentLoaded", () => {
 document.addEventListener("DOMContentLoaded", () => {
   const toggle = document.getElementById("toggle-chords");
 
-  toggle?.addEventListener("change", () => {
+  if (!toggle) return;
+
+  // ✅ Restore saved state
+  const savedState = localStorage.getItem("chords-toggle");
+  if (savedState !== null) {
+    const isChecked = savedState === "true";
+    toggle.checked = isChecked;
+    document.body.classList.toggle("hide-chords", !isChecked);
+  }
+
+  // ✅ Save on change
+  toggle.addEventListener("change", () => {
+    localStorage.setItem("chords-toggle", toggle.checked);
     document.body.classList.toggle("hide-chords", !toggle.checked);
   });
 });
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 38cf763..ad55680 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -22,7 +22,7 @@
       </label>
     </div>
 
-    <div >
+    <div class="key-selector">
       <label for="key-selector">Key:</label>
       <select id="key-selector" data-original-key="{{ with .Params.key }}{{ . }}{{ else }}C{{ end }}">
         {{ $allKeys := slice "C" "C#/Db" "D" "D#/Eb" "E" "F" "F#/Gb" "G" "G#/Ab" "A" "A#/Bb" "B" }}
@@ -30,7 +30,7 @@
         {{ range $k := $allKeys }}
         {{ $cleanKey := (index (split $k "/") 0) }}
         <option value="{{ $cleanKey }}" {{ if in $currentKey $k }}selected{{ end }}>
-          {{ $k }}
+          {{ if in $currentKey $k }}{{ $k }} (Original) {{ else }} {{ $k }} {{ end }} 
         </option>
         {{ end }}
       </select>