diff --git a/content/site/navigation.json b/content/site/navigation.json
index 840a438b1..d2942db0e 100644
--- a/content/site/navigation.json
+++ b/content/site/navigation.json
@@ -12,7 +12,7 @@
     },
 
     {
-      "name": "Values",
+      "name": "About",
       "link": "/about",
       "external": false
     }
diff --git a/src/layouts/partials/Navbar.vue b/src/layouts/partials/Navbar.vue
index ac0a512fd..3ddcc4505 100644
--- a/src/layouts/partials/Navbar.vue
+++ b/src/layouts/partials/Navbar.vue
@@ -99,6 +99,21 @@
               element.name
             }}</g-link>
           </li>
+          <!-- <li class="hover:text-white py-1">
+          <div @click="open = false" class="relative" x-data="{ open: false }">
+                    <button @click="open = !open" class="flex flex-row items-center w-full md:w-auto md:inline md:mt-0 md:ml-4 animated-link ">
+                        <span>LIST</span>
+                        <svg fill="currentColor" viewBox="0 0 20 20" :class="{'rotate-180': open, 'rotate-0': !open}" class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+                    </button>
+                    <div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="absolute w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48 z-30">
+                        <div class="px-2 py-2 bg-black rounded-md shadow dark-mode:bg-gray-700">
+                            <a class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="#">Link #1</a>
+                            <a class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="#">Link #2</a>
+                            <a class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="#">Link #3</a>
+                        </div>
+                    </div>
+                </div>
+           </li> -->
         </ul>
         <div
           class="md:hidden inline-flex rounded-full border-grey-light border w-1/2"
@@ -185,6 +200,7 @@ export default {
       headerHeight: 0,
       isOpen: false,
       search: "",
+      open: false
     };
   },