diff --git a/src/components/GalleryImage/GalleryImage.js b/src/components/GalleryImage/GalleryImage.js
index 88506cd..59c32d8 100644
--- a/src/components/GalleryImage/GalleryImage.js
+++ b/src/components/GalleryImage/GalleryImage.js
@@ -157,7 +157,7 @@ const GalleryImage = ({ data, location: { state } }) => {
               href: getGalleryPageUrl({ keyword: filterKeyword, sortKey }, image.base),
               label: (
                 <>
-                  Home <kbd>esc</kbd>
+                  Home <kbd className="font-normal">esc</kbd>
                 </>
               ),
             },
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index d1f195f..24783be 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -22,14 +22,13 @@ const Nav = ({ isClient, internalLinks, className }: NavProps) => {
   const [linksMenu, setLinksMenu] = useState(false);
 
   const navClasses = classnames(
-    "hover:underline mx-2 md:mx-3",
-    isClient ? "text-vibrant-light" : "text-gray-200"
+    "hover:underline mx-2 md:mx-3 text-gray-200"
   );
   return (
     <nav
       className={classnames(
-        "m-2 flex justify-center font-sans w-full",
-        isClient ? "text-vibrant-light" : "text-gray-200",
+        "p-2 mt-0 flex justify-center w-full font-serif",
+        "text-gray-200 bg-black border-b border-b-white",
         className
       )}
       ref={observe}
@@ -50,7 +49,7 @@ const Nav = ({ isClient, internalLinks, className }: NavProps) => {
               </li>
             ))}
         </ul>
-        {internalLinks && currentBreakpoint !== "XS" && <>|</>}
+        {internalLinks && currentBreakpoint !== "XS" && <span className={navClasses}>|</span>}
         {currentBreakpoint === "XS" && (
           <button
             className="mx-2 hover:underline inline-flex align-middle"
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 20ab349..1fbf2d4 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -164,15 +164,13 @@ const GalleryPage = ({ data }: PageProps<Queries.GalleryPageQueryQuery>) => {
         <title>Photo Gallery | Chuck Dries</title>
         <body className="bg-black text-white" />
       </Helmet>
-      <div className="sm:sticky top-0 pt-1 z-10 bg-black">
-        <Nav
-          className="mb-4"
-          internalLinks={[{ href: "/", label: "Home" }]}
-        />
+      <div className="top-0 z-10 bg-black">
+        <Nav className="mb-4" internalLinks={[{ href: "/", label: "Home" }]} />
         <div className="flex flex-col text-center mr-5 md:ml-4 ml-2 my-4 md:my-7 font-serif">
           <h1 className="text-5xl mt-0 font-black z-10">Chuck Dries</h1>
           <h2 className="">Full Stack Software Engineer & Photographer</h2>
         </div>
+        {/* <div className="w-full gradient h-[10px]"></div> */}
         <div className="flex flex-col md:flex-row md:items-end justify-between">
           <KeywordsPicker
             keywords={[
diff --git a/src/styles/global.css b/src/styles/global.css
index 31814e9..68f7726 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -70,6 +70,31 @@
     border: 1px solid rgb(var(--light-vibrant));
     box-shadow: 3px 3px 0px 0px rgb(var(--light-vibrant));
   }
+  .text-shadow {
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
+    & kbd {
+      text-shadow: none;
+    }
+  }
+  .text-outline {
+    text-shadow: -1px 1px 0 #fff, 1px 1px 0 #fff, 1px -1px 0 #fff,
+      -1px -1px 0 #fff;
+  }
+  .gradient {
+    background-image: linear-gradient(
+      45deg,
+      hsl(226deg 100% 20%) 0%,
+      hsl(279deg 68% 26%) 24%,
+      hsl(309deg 85% 28%) 39%,
+      hsl(324deg 92% 37%) 51%,
+      hsl(339deg 72% 50%) 60%,
+      hsl(356deg 91% 62%) 68%,
+      hsl(15deg 100% 62%) 76%,
+      hsl(32deg 100% 57%) 83%,
+      hsl(45deg 100% 50%) 91%,
+      hsl(55deg 100% 50%) 100%
+    );
+  }
 }
 
 body {
@@ -92,5 +117,9 @@ a {
 }
 
 kbd {
-    @apply bg-gray-300 text-black border border-gray-700 rounded p-1;
+  @apply bg-gray-300 text-black border border-gray-700 rounded p-1;
+}
+
+button {
+  @apply cursor-auto;
 }
\ No newline at end of file
diff --git a/src/styles/index.css b/src/styles/index.css
deleted file mode 100644
index e57435a..0000000
--- a/src/styles/index.css
+++ /dev/null
@@ -1,4 +0,0 @@
-/* main.hero {
-text-vibrant-dark border-vibrant bg-vibrant-light
-  
-} */
