diff --git a/.gitignore b/.gitignore
index aa282bd..486146d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,7 +1,8 @@
 .aider*
 output/*
-# Created by https://www.toptal.com/developers/gitignore/api/Vim,macOS,Python,venv
-# Edit at https://www.toptal.com/developers/gitignore?templates=Vim,macOS,Python,venv
+
+cheatsheets/*
+!cheatsheets/example.yaml
 
 ### macOS ###
 # General
diff --git a/assets/icons/KoalaKeys.png b/assets/icons/KoalaKeys.png
index 4a14aa3..a29665c 100644
Binary files a/assets/icons/KoalaKeys.png and b/assets/icons/KoalaKeys.png differ
diff --git a/assets/icons/KoalaKeys_Large.png b/assets/icons/KoalaKeys_Large.png
deleted file mode 100644
index 31664bb..0000000
Binary files a/assets/icons/KoalaKeys_Large.png and /dev/null differ
diff --git a/cheatsheets/example.yaml b/cheatsheets/example.yaml
index 12fdf67..6541bb8 100644
--- a/cheatsheets/example.yaml
+++ b/cheatsheets/example.yaml
@@ -1,12 +1,15 @@
-title: Example
+title: "Default macOS Keyboard Shortcuts"
+layout:
+  keyboard: US
+  system: Darwin
 shortcuts:
-  File Operations:
-    "Cmd+C":
-      description: "Copy"
-    "Cmd+V":
-      description: "Paste"
-    "Cmd+S":
-      description: "Save"
-  Window Management:
-    "CMD+H":
-      description: "Hide Current Window"
+  General:
+    "CMD+C":
+      description: "Copy selected item"
+    "CMD+X":
+      description: "Cut selected item"
+  File and App Management:
+    "CMD+N":
+      description: "Open new window or document"
+    "CMD+O":
+      description: "Open selected item or display dialog to choose file to open"
diff --git a/src/cheatsheet_template.html b/src/cheatsheet_template.html
index dbb0f65..c742d19 100644
--- a/src/cheatsheet_template.html
+++ b/src/cheatsheet_template.html
@@ -347,34 +347,6 @@
         height: 25px;
         font-size: 14px;
       }
-      #dark-mode-toggle {
-        position: fixed;
-        top: 20px;
-        right: 20px;
-        padding: 10px 15px;
-        background-color: var(--latte-lavender);
-        color: var(--latte-base);
-        border: none;
-        border-radius: 8px;
-        cursor: pointer;
-        transition:
-          background-color 0.3s,
-          transform 0.2s;
-        font-weight: 600;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-      }
-      #dark-mode-toggle:hover {
-        background-color: var(--latte-sapphire);
-        transform: translateY(-2px);
-      }
-      body.dark-mode #dark-mode-toggle {
-        background-color: var(--mocha-peach);
-        color: var(--mocha-base);
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-      }
-      body.dark-mode #dark-mode-toggle:hover {
-        background-color: var(--mocha-maroon);
-      }
       .wide {
         width: 65px;
       }
@@ -485,7 +457,7 @@
         transform: translateX(-50%);
       }
 
-      #theme-toggle {
+      #dark-mode-toggle {
         flex: 0 0 auto;
         position: relative;
         z-index: 1002;
@@ -497,7 +469,7 @@
         transition: color 0.3s;
       }
 
-      body.dark-mode #theme-toggle {
+      body.dark-mode #dark-mode-toggle {
         color: var(--mocha-text);
       }
 
@@ -627,8 +599,8 @@ <h1>{{ title }}</h1>
         />
       </div>
       <button
-        id="theme-toggle"
-        class="theme-toggle"
+        id="dark-mode-toggle"
+        class="dark-mode-toggle"
         aria-label="Toggle dark mode"
       >
         <span id="theme-icon">◐</span>
@@ -876,21 +848,21 @@ <h2>{{ section }}</h2>
       // Call generateKeyboard on page load
       document.addEventListener("DOMContentLoaded", generateKeyboard);
 
-      // Theme toggle functionality
-      const themeToggle = document.getElementById("theme-toggle");
+      // Dark-Mode toggle functionality
+      const darkModeToggle = document.getElementById('dark-mode-toggle');
       const themeIcon = document.getElementById("theme-icon");
       const body = document.body;
 
-      function updateThemeToggle() {
+      function updateDarkModeToggle() {
         themeIcon.textContent = body.classList.contains("dark-mode")
           ? "☀️"
           : "🌙";
       }
 
-      themeToggle.addEventListener("click", () => {
+      darkModeToggle.addEventListener("click", () => {
         body.classList.toggle("dark-mode");
         localStorage.setItem("darkMode", body.classList.contains("dark-mode"));
-        updateThemeToggle();
+        updateDarkModeToggle();
         adjustLayout();
       });
 
@@ -920,7 +892,7 @@ <h2>{{ section }}</h2>
         body.classList.remove("dark-mode");
       }
 
-      updateThemeToggle();
+      updateDarkModeToggle();
       adjustLayout();
 
       function highlightKeys(shortcut) {
diff --git a/src/index_template.html b/src/index_template.html
index 4f724c7..9518da3 100644
--- a/src/index_template.html
+++ b/src/index_template.html
@@ -88,11 +88,24 @@
         background-color: var(--mocha-base);
       }
 
+      .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      #logo_img {
+        top: 10px;
+        left: 10px;
+      }
+
       h1 {
+        flex-grow: 2;
         color: var(--latte-mauve);
         text-align: center;
         font-size: 2.5rem;
         margin-bottom: 2rem;
+        margin-right: 8rem;
       }
 
       body.dark-mode h1 {
@@ -100,35 +113,16 @@
       }
 
       #dark-mode-toggle {
-        position: fixed;
-        top: 20px;
-        right: 20px;
-        padding: 10px 15px;
-        background-color: var(--latte-blue);
-        color: var(--latte-base);
+        background: none;
         border: none;
-        border-radius: 8px;
         cursor: pointer;
-        transition:
-          background-color 0.3s,
-          transform 0.2s;
-        font-weight: 600;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-      }
-
-      #dark-mode-toggle:hover {
-        background-color: var(--latte-sapphire);
-        transform: translateY(-2px);
+        font-size: 24px;
+        color: var(--text);
+        transition: color 0.3s;
       }
 
       body.dark-mode #dark-mode-toggle {
-        background-color: var(--mocha-peach);
-        color: var(--mocha-base);
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-      }
-
-      body.dark-mode #dark-mode-toggle:hover {
-        background-color: var(--mocha-maroon);
+        color: var(--mocha-text);
       }
 
       .controls {
@@ -313,11 +307,122 @@
         opacity: 0.5;
         cursor: not-allowed;
       }
+
+      footer {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        width: 40%;
+        margin-left: auto;
+        margin-right: auto;
+        margin-top: 8px;
+        padding: 10px;
+        font-family: "Iosevka Web", monospace;
+        line-height: 1.6;
+        transition:
+          background-color 0.3s,
+          color 0.3s;
+      }
+
+      .center {
+        margin: auto;
+        text-align: center;
+        padding: 10px;
+      }
+
+      #icon-footer {
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+        width: 40%;
+      }
+
+      .GitHub_Button {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 10px 15px;
+        gap: 15px;
+        background-color: var(--latte-blue);
+        color: var(--latte-base);
+        outline-offset: -3px;
+        border-radius: 5px;
+        border: none;
+        cursor: pointer;
+        transition: 400ms;
+        height: auto;
+      }
+
+      .dark-mode .GitHub_Button {
+        background-color: var(--mocha-maroon);
+      }
+
+      .GitHub_Button .text {
+        color: black;
+        font-weight: 700;
+        font-size: 1.2em;
+        transition: 400ms;
+      }
+
+      .dark-mode .GitHub_Button .text {
+        color: black;
+      }
+
+      .GitHub_Button svg path {
+        transition: 400ms;
+      }
+
+      .GitHub_Button svg path {
+        fill: white;
+      }
+
+      .dark-mode .GitHub_Button svg path {
+        fill: #181717;
+      }
+
+      .GitHub_Button:hover {
+        background-color: var(--latte-sapphire);
+      }
+
+      .GitHub_Button:hover .text {
+        color: white;
+      }
+
+      .dark-mode .GitHub_Button:hover {
+        background-color: var(--mocha-maroon);
+      }
+
+      .dark-mode .GitHub_Button:hover .text {
+        color: black;
+      }
+
+      a:link {
+        text-decoration: none;
+      }
+      a:visited {
+        text-decoration: none;
+      }
+      a:hover {
+        text-decoration: none;
+      }
+      a:active {
+        text-decoration: none;
+      }
     </style>
   </head>
   <body class="dark-mode">
-    <h1>Cheatsheet Index</h1>
-    <button id="dark-mode-toggle">Toggle Light Mode</button>
+    <div class="header">
+      <img
+        src="https://github.com/rtuszik/KoalaKeys/raw/main/assets/icons/KoalaKeys.png"
+        id="logo_img"
+        width="128"
+      />
+      <h1>Cheatsheet Index</h1>
+      <button id="dark-mode-toggle" aria-label="Toggle dark mode">
+        <span id="theme-icon">◐</span>
+      </button>
+    </div>
     <div class="controls">
       <div class="search-bar">
         <input type="text" id="search" placeholder="Search cheatsheets..." />
@@ -327,11 +432,11 @@ <h1>Cheatsheet Index</h1>
         <option value="name-desc">Name (Z-A)</option>
       </select>
       <select id="items-per-page" class="items-per-page-select">
-        <option value="9">9 per page</option>
-        <option value="18">18 per page</option>
-        <option value="27">27 per page</option>
-        <option value="36">36 per page</option>
-        <option value="45">45 per page</option>
+        <option value="8">8 per page</option>
+        <option value="16">16 per page</option>
+        <option value="32">32 per page</option>
+        <option value="64">64 per page</option>
+        <option value="128">128 per page</option>
       </select>
     </div>
     <ul id="cheatsheet-list" class="cheatsheet-list"></ul>
@@ -354,8 +459,12 @@ <h1>Cheatsheet Index</h1>
       const nextPageButton = document.getElementById('next-page');
       const body = document.body;
 
+      const themeIcon = document.getElementById("theme-icon");
+
       function updateDarkModeToggle() {
-          darkModeToggle.textContent = body.classList.contains('dark-mode') ? 'Toggle Light Mode' : 'Toggle Dark Mode';
+        themeIcon.textContent = body.classList.contains("dark-mode")
+          ? "☀️"
+          : "🌙";
       }
 
       darkModeToggle.addEventListener('click', () => {
@@ -460,4 +569,29 @@ <h1>Cheatsheet Index</h1>
       updateCheatsheets();
     </script>
   </body>
+  <footer>
+    <img
+      src="https://github.com/rtuszik/KoalaKeys/raw/main/assets/icons/KoalaKeys.png"
+      alt="KoalaKeys"
+      id="icon-footer"
+      width="128"
+    />
+    <a href="https://github.com/rtuszik/KoalaKeys">
+      <button class="GitHub_Button">
+        <svg
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 0.296997C5.37 0.296997 0 5.67 0 12.297C0 17.6 3.438 22.097 8.205 23.682C8.805 23.795 9.025 23.424 9.025 23.105C9.025 22.82 9.015 22.065 9.01 21.065C5.672 21.789 4.968 19.455 4.968 19.455C4.422 18.07 3.633 17.7 3.633 17.7C2.546 16.956 3.717 16.971 3.717 16.971C4.922 17.055 5.555 18.207 5.555 18.207C6.625 20.042 8.364 19.512 9.05 19.205C9.158 18.429 9.467 17.9 9.81 17.6C7.145 17.3 4.344 16.268 4.344 11.67C4.344 10.36 4.809 9.29 5.579 8.45C5.444 8.147 5.039 6.927 5.684 5.274C5.684 5.274 6.689 4.952 8.984 6.504C9.944 6.237 10.964 6.105 11.984 6.099C13.004 6.105 14.024 6.237 14.984 6.504C17.264 4.952 18.269 5.274 18.269 5.274C18.914 6.927 18.509 8.147 18.389 8.45C19.154 9.29 19.619 10.36 19.619 11.67C19.619 16.28 16.814 17.295 14.144 17.59C14.564 17.95 14.954 18.686 14.954 19.81C14.954 21.416 14.939 22.706 14.939 23.096C14.939 23.411 15.149 23.786 15.764 23.666C20.565 22.092 24 17.592 24 12.297C24 5.67 18.627 0.296997 12 0.296997Z"
+            fill="white"
+          ></path>
+        </svg>
+        <p class="text">KoalaKeys</p>
+      </button>
+    </a>
+  </footer>
 </html>