diff --git a/app/tag-data.json b/app/tag-data.json
index 7bacbaf8c..e35862a4f 100644
--- a/app/tag-data.json
+++ b/app/tag-data.json
@@ -1,20 +1 @@
-{
-  "markdown": 1,
-  "code": 1,
-  "features": 1,
-  "next-js": 6,
-  "math": 1,
-  "ols": 1,
-  "github": 1,
-  "guide": 5,
-  "tailwind": 3,
-  "hello": 1,
-  "holiday": 1,
-  "canada": 1,
-  "images": 1,
-  "feature": 2,
-  "writings": 1,
-  "book": 1,
-  "reflection": 1,
-  "multi-author": 1
-}
+{"markdown":1,"code":1,"features":1,"next-js":6,"math":1,"ols":1,"github":1,"guide":5,"tailwind":3,"holiday":1,"canada":1,"images":1,"feature":2,"writings":1,"book":1,"reflection":1,"multi-author":1}
\ No newline at end of file
diff --git a/components/Header.tsx b/components/Header.tsx
index 362b7cdd9..a8db0a39d 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -5,6 +5,7 @@ import Link from './Link'
 import MobileNav from './MobileNav'
 import ThemeSwitch from './ThemeSwitch'
 import SearchButton from './SearchButton'
+import { NavOptions } from './NavOptions'
 
 const Header = () => {
   return (
@@ -37,6 +38,7 @@ const Header = () => {
               {link.title}
             </Link>
           ))}
+        <NavOptions />
         <SearchButton />
         <ThemeSwitch />
         <MobileNav />
diff --git a/components/MobileNav.tsx b/components/MobileNav.tsx
index b777b822c..0fbec479d 100644
--- a/components/MobileNav.tsx
+++ b/components/MobileNav.tsx
@@ -2,7 +2,7 @@
 
 import { useState } from 'react'
 import Link from './Link'
-import headerNavLinks from '@/data/headerNavLinks'
+import headerNavLinks, { headerNavOptions } from '@/data/headerNavLinks'
 
 const MobileNav = () => {
   const [navShow, setNavShow] = useState(false)
@@ -68,6 +68,18 @@ const MobileNav = () => {
               </Link>
             </div>
           ))}
+          {headerNavOptions.children &&
+            headerNavOptions.children.map((link) => (
+              <div key={link.title} className="px-12 py-4">
+                <Link
+                  href={link.href}
+                  className="text-2xl font-bold tracking-widest text-gray-900 dark:text-gray-100"
+                  onClick={onToggleNav}
+                >
+                  {link.title}
+                </Link>
+              </div>
+            ))}
         </nav>
       </div>
     </>
diff --git a/components/NavOptions.tsx b/components/NavOptions.tsx
new file mode 100644
index 000000000..8e390bfe9
--- /dev/null
+++ b/components/NavOptions.tsx
@@ -0,0 +1,48 @@
+'use client'
+
+import { Fragment, useEffect, useState } from 'react'
+import { useTheme } from 'next-themes'
+import { Menu, RadioGroup, Transition } from '@headlessui/react'
+import { headerNavOptions } from '@/data/headerNavLinks'
+import Link from 'next/link'
+
+export const NavOptions = () => {
+  return (
+    <div className="mr-5">
+      <Menu as="div" className="relative inline-block text-left">
+        <div>
+          {headerNavOptions.title && (
+            <Menu.Button className={'hidden font-medium text-gray-900 dark:text-gray-100 sm:block'}>
+              {headerNavOptions.title}
+            </Menu.Button>
+          )}
+        </div>
+        <Transition
+          as={Fragment}
+          enter="transition ease-out duration-100"
+          enterFrom="transform opacity-0 scale-95"
+          enterTo="transform opacity-100 scale-100"
+          leave="transition ease-in duration-75"
+          leaveFrom="transform opacity-100 scale-100"
+          leaveTo="transform opacity-0 scale-95"
+        >
+          <Menu.Items className="absolute right-0 mt-2 w-32 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800">
+            <div className="p-1">
+              {headerNavOptions.children &&
+                headerNavOptions.children.map((link) => (
+                  <Menu.Item key={link.title}>
+                    <Link
+                      href={link.href}
+                      className="group flex w-full items-center rounded-md px-2 py-2 text-sm"
+                    >
+                      {link.title}
+                    </Link>
+                  </Menu.Item>
+                ))}
+            </div>
+          </Menu.Items>
+        </Transition>
+      </Menu>
+    </div>
+  )
+}
diff --git a/data/headerNavLinks.ts b/data/headerNavLinks.ts
index 8ca9493db..7005935f7 100644
--- a/data/headerNavLinks.ts
+++ b/data/headerNavLinks.ts
@@ -6,4 +6,12 @@ const headerNavLinks = [
   { href: '/about', title: 'About' },
 ]
 
+export const headerNavOptions = { 
+  title: 'Dropdown', children: [
+    {href: '/projects', title: 'Projects',},
+    {href: '/about', title: 'About',},
+  ]
+}
+
+
 export default headerNavLinks