diff --git a/site/components/Nav.js b/site/components/Nav.js
index cae7410..5b19267 100644
--- a/site/components/Nav.js
+++ b/site/components/Nav.js
@@ -12,14 +12,14 @@ function classNames(...classes) {
 
 export default function Nav() {
   return (
-    <Disclosure as="nav" className="shadow">
+    <Disclosure as="nav" className="shadow-md bg-slate-900 sticky top-0 z-10">
       {({ open }) => (
         <>
           <div className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
-            <div className="relative flex justify-between h-16">
-              <div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
+            <div className="flex justify-between h-16">
+              <div className="flex items-center xl:hidden">
                 {/* Mobile menu button */}
-                <Disclosure.Button className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
+                <Disclosure.Button className="inline-flex items-center justify-center p-2 mr-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
                   <span className="sr-only">Open main menu</span>
                   {open ? (
                     <XIcon className="block h-6 w-6" aria-hidden="true" />
@@ -28,13 +28,13 @@ export default function Nav() {
                   )}
                 </Disclosure.Button>
               </div>
-              <div className="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
-                <div className="flex-shrink-0 flex items-center uppercase text-yellow-500">
+              <div className="flex-1 flex justify-between">
+                <div className="text-sm sm:text-base flex-shrink-0 flex items-center uppercase text-yellow-500">
                   <Link href="/">
                     <a>{siteConfig.title}</a>
                   </Link>
                 </div>
-                <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
+                <div className="hidden xl:flex mx-auto space-x-4">
                   {/* Current: "border-indigo-500 text-gray-900", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" */}
                   {navLinks.map((item, i) => (
                     <Link key={i} href={item.href}>
@@ -53,7 +53,7 @@ export default function Nav() {
                     </Link>
                   ))}
                 </div>
-                <div className="hidden sm:flex items-center justify-end w-full space-x-4">
+                <div className="hidden md:flex items-center justify-end space-x-4">
                   {siteConfig.social.map(
                     ({ name, href, icon: Icon }) =>
                       ["YouTube", "GitHub", "Life Itself"].includes(name) && (
@@ -77,8 +77,7 @@ export default function Nav() {
               </div>
             </div>
           </div>
-
-          <Disclosure.Panel className="sm:hidden">
+          <Disclosure.Panel className="xl:hidden">
             <div className="pt-2 pb-4 space-y-1">
               {/* Current: "bg-indigo-50 border-indigo-500 text-indigo-700", Default: "border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700" */}
               {navLinks.map((item, i) => (