diff --git a/bin/scripts/data/cheatsheet-foot.txt b/bin/scripts/data/cheatsheet-foot.txt
index 6fb73f024e..e10e7559e6 100644
--- a/bin/scripts/data/cheatsheet-foot.txt
+++ b/bin/scripts/data/cheatsheet-foot.txt
@@ -1,4 +1,6 @@
-</div>
+}
+</script>
+
 <h3>Removed Icons</h3>
 <h5 align="center">With Release <code>v3.0.0</code> the Material Design Icons were updated and moved to new codepoints (reasons for that are in the release notes).</h5>
 <h5 align="center">They are still shown here for reference, but are missing in the actual fonts.</h5>
@@ -15,7 +17,7 @@
 
 I really <i class="nf nf-fa-heart"></i> <i class="nf nf-custom-vim"></i>
   {% endhighlight %}
-  <span class="nerd-fonts-example-usage">
-    I really <i class="nf nf-fa-heart ow"></i> <i class="nf nf-custom-vim nfunc"></i>
-  </span>
+    <p><span class="nerd-fonts-example-usage">
+      I really <i class="nf nf-fa-heart ow"></i> <i class="nf nf-custom-vim nfunc"></i>
+    </span></p>
 </div>
diff --git a/bin/scripts/data/cheatsheet-head.txt b/bin/scripts/data/cheatsheet-head.txt
index 550dfa2cd1..65e2f9a7b8 100644
--- a/bin/scripts/data/cheatsheet-head.txt
+++ b/bin/scripts/data/cheatsheet-head.txt
@@ -10,16 +10,9 @@ style: container
 
 <h1 class="center">Cheat Sheet</h1>
 
-<input type="text" id="glyphSearch" placeholder="Search for glyphs/icons..." title="Type in a glyph name or hex codepoint" class="nerd-font-cheat-sheet-search nerd-font-input tertiary sanity-test" />
+<input type="text" id="glyphSearch" placeholder="Search for glyphs/icons here..." title="Type in a glyph name or hex codepoint" class="nerd-font-cheat-sheet-search nerd-font-input tertiary sanity-test" />
 
-<div class="center">
-  <h5 class="inlineblock nerd-font-button tertiary" id="glyphSearchButton">
-    <i class="nf nf-fa-search"></i>&nbsp;Search
-  </h5>
+<div id="glyphCheatSheet" class="nerd-font-cheat-sheet"></div>
 
-  <h5 class="inlineblock nerd-font-button tertiary" id="glyphSearchAllButton">
-    <i class="nf nf-mdi-select_all"></i>&nbsp;Show All Icons
-  </h5>
-</div>
-
-<div id="glyphCheatSheet" class="nerd-font-cheat-sheet">
+<script>
+const glyphs = {
diff --git a/bin/scripts/generate-css.sh b/bin/scripts/generate-css.sh
index c4470e2b3a..014a0ce0fa 100755
--- a/bin/scripts/generate-css.sh
+++ b/bin/scripts/generate-css.sh
@@ -110,19 +110,12 @@ for var in "${!i@}"; do
 
   # generate HTML cheat sheet
   {
-    printf "  <div class=\"column\">"
-    printf "\\n"
     if [[ "$glyph_name" = mdi-* ]]; then
-      printf "    <span class=\"corner-red\"></span><span class=\"corner-text\">removed</span>\\n"
-      printf "    <div class=\"nfold nfold-%s center\"></div>" "$glyph_name"
+      namespace="nfold"
     else
-      printf "    <div class=\"nf nf-%s center\"></div>" "$glyph_name"
+      namespace="nf"
     fi
-    printf "\\n"
-    printf "    <div class=\"class-name\">nf-%s</div><div title=\"Copy Hex Code to Clipboard\" class=\"codepoint\">%s</div>" "$glyph_name" "$glyph_code"
-    printf "\\n"
-    printf "  </div>"
-    printf "\\n"
+    printf "  \"%s-%s\": \"%s\",\\n" "$namespace" "$glyph_name" "$glyph_code"
   } >> "$output_cheat_sheet_file"
 
 done