diff --git a/src/index.html b/src/index.html
index 25e296a..b044514 100644
--- a/src/index.html
+++ b/src/index.html
@@ -55,7 +55,55 @@
     x-data="loadIcons()"
   >
     <main class="flex-grow">
-      <div class="bg-white px-8 py-4">
+      <nav class="flex p-4 md:p-6 lg:p-8 justify-between text-sm md:text-base">
+        <a class="font-extrabold" href="/">System UIcons</a>
+        <div class="space-x-3 md:space-x-8">
+          <!-- <a class="hover:underline" href="/about">Behind the design</a>
+          <a class="hover:underline" href="/changelog">Changelog</a> -->
+          <a
+            class="hover:underline"
+            href="https://github.com/CoreyGinnivan/system-uicons"
+            rel="noreferrer"
+            target="_blank"
+            >GitHub</a
+          >
+          <a
+            class="hover:underline"
+            href="https://github.com/sponsors/CoreyGinnivan"
+            rel="noreferrer"
+            target="_blank"
+            >Sponsor</a
+          >
+        </div>
+      </nav>
+      <div class="p-4 md:p-6 lg:p-8">
+        <p class="text-xl lg:text-3xl xl:text-5xl text-black leading-tight">
+          A growing collection of simple and consistent icons specifically
+          designed for systems and products.
+          <strong class="italic underline"
+            >Use how you want, without attribution.</strong
+          >
+        </p>
+      </div>
+      <div
+        class="bg-white text-gray-400 px-4 md:px-6 lg:px-8 py-4 flex flex-row items-center mt-4 md:mt-6 lg:mt-8"
+      >
+        <svg
+          viewBox="0 0 21 21"
+          xmlns="http://www.w3.org/2000/svg"
+          class="w-6 md:w-7 lg:w-12 h-6 md:h-7 lg:h-12 mr-4"
+        >
+          <g
+            fill="none"
+            fill-rule="evenodd"
+            stroke="currentcolor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <circle cx="8.5" cy="8.5" r="5" />
+            <path d="m17.571 17.5-5.571-5.5" />
+          </g>
+        </svg>
         <input
           onFocus="this.select()"
           autofocus="autofocus"
@@ -70,11 +118,11 @@
           autocomplete="off"
           autocorrect="off"
           spellcheck="false"
-          class="flex flex-1 w-full py-4 focus:outline-none placeholder-gray-400 appearance-none text-black focus:text-black tracking-tighter text-xl lg:text-3xl xl:text-5xl"
+          class="flex flex-1 w-full focus:outline-none placeholder-gray-400 appearance-none text-black focus:text-black tracking-tighter text-xl lg:text-3xl xl:text-5xl"
         />
       </div>
       <div
-        class="flex flex-col space-y-2 md:space-y-0 md:flex-row border-t border-gray-300 bg-white py-4 px-2 lg:px-8 sticky top-0 z-10"
+        class="flex flex-col space-y-2 md:space-y-0 md:flex-row border-t border-gray-300 bg-white py-4 px-4 md:px-6 lg:px-8 sticky top-0 z-10"
       >
         <div
           class="flex flex-col md:flex-row bg-gray-200 p-1 rounded space-x-0 md:space-x-1 space-y-1 md:space-y-0"
@@ -230,7 +278,7 @@
       </div>
 
       <div
-        class="p-2 lg:p-8 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 xl:grid-cols-8 gap-2 md:gap-4"
+        class="p-4 md:p-6 lg:p-8 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 xl:grid-cols-8 gap-2 md:gap-4"
       >
         <template x-for="(item, index) in filteredIcons" :key="index">
           <a