diff --git a/package.json b/package.json
index cce7e373..c1e929a8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "javaistic",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "The official website for Javaistic.",
   "private": true,
   "main": "index.js",
@@ -21,6 +21,8 @@
     "@badrap/bar-of-progress": "^0.1.2",
     "@docsearch/react": "^1.0.0-alpha.28",
     "@formspree/react": "^2.2.4",
+    "@headlessui/react": "^1.4.2",
+    "@heroicons/react": "^1.0.5",
     "@juggle/resize-observer": "^3.3.1",
     "@mdx-js/loader": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
@@ -75,4 +77,4 @@
     "prettier": "^2.5.0",
     "typescript": "^4.5.2"
   }
-}
\ No newline at end of file
+}
diff --git a/redirects.json b/redirects.json
index 41839d94..60a2833d 100644
--- a/redirects.json
+++ b/redirects.json
@@ -7,6 +7,8 @@
   },
   { "source": "/docs/slug", "destination": "/docs/slug", "permanent": false },
   { "source": "/community", "destination": "https://discord.gg/RkHJqvK9r8", "permanent": false },
+  { "source": "/changelog", "destination":"https://javaistic-changelog.vercel.app/", "permanent": false },
+  { "source": "/license", "destination":"  https://raw.githubusercontent.com/javaistic/javaistic/main/LICENSE", "permanent": false },
   { "source": "/discord", "destination": "https://discord.gg/RkHJqvK9r8", "permanent": false },
   { "source": "/status", "destination": "https://javaistic.betteruptime.com/", "permanent": false },
   { "source": "/stats", "destination": "https://javaistic.betteruptime.com/", "permanent": false }
diff --git a/src/components/home/Menu.js b/src/components/home/Menu.js
new file mode 100644
index 00000000..2b725a04
--- /dev/null
+++ b/src/components/home/Menu.js
@@ -0,0 +1,123 @@
+import { Menu, Transition } from '@headlessui/react'
+import { ChevronDownIcon } from '@heroicons/react/solid'
+import { Fragment } from 'react'
+
+function classNames(...classes) {
+    return classes.filter(Boolean).join(' ')
+}
+
+export default function MenuButton() {
+    return (
+        <Menu as="div" className="relative inline-block text-left">
+            <div>
+                <Menu.Button className="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-100">
+                    Menu
+                    <ChevronDownIcon className="-mr-1 ml-2 h-6 w-6" aria-hidden="true" />
+                </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="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
+                    <div className="py-1">
+                        <Menu.Item>
+                            {({ active }) => (
+                                <a
+                                    href="#"
+                                    className={classNames(
+                                        active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                                        'block px-4 py-2 text-base sm:hidden'
+                                    )}
+                                >
+                                    Documentation
+                                </a>
+                            )}
+                        </Menu.Item>
+                        <Menu.Item>
+                            {({ active }) => (
+                                <a
+                                    href="#"
+                                    className={classNames(
+                                        active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                                        'block px-4 py-2 text-base'
+                                    )}
+                                >
+                                    About
+                                </a>
+                            )}
+                        </Menu.Item>
+                        <Menu.Item>
+                            {({ active }) => (
+                                <a
+                                    href="/sponsors"
+                                    className={classNames(
+                                        active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                                        'block px-4 py-2 text-base'
+                                    )}
+                                >
+                                    Sponsors
+                                </a>
+                            )}
+                        </Menu.Item>
+                        <Menu.Item>
+                            {({ active }) => (
+                                <a
+                                    href="/license"
+                                    className={classNames(
+                                        active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                                        'block px-4 py-2 text-base'
+                                    )}
+                                >
+                                    License
+                                </a>
+                            )}
+                        </Menu.Item>
+                        <Menu.Item>
+                            {({ active }) => (
+                                <a
+                                    href="/changelog"
+                                    className={classNames(
+                                        active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                                        'block w-full text-left px-4 py-2 text-base'
+                                    )}
+                                >
+                                    Change Log
+                                </a>
+                            )}
+                        </Menu.Item>
+                        <Menu.Item>
+                            {({ active }) => (
+                                <a
+                                    href="https://github.com/javaistic/javaistic"
+                                    className={classNames(
+                                        active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                                        'block px-4 py-2 text-base sm:hidden'
+                                    )}
+                                >
+                                    <div className="flex">
+                                        <span className="sr-only">Javaistic on GitHub</span>
+                                        <svg className="w-6 h-6 mr-2" viewBox="0 0 16 16" fill="currentColor">
+                                            <path
+                                                fillRule="evenodd"
+                                                d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
+                                            />
+                                        </svg>
+                                        GitHub
+                                    </div>
+                                </a>
+                            )}
+                        </Menu.Item>
+
+                    </div>
+                </Menu.Items>
+            </Transition>
+        </Menu>
+    )
+}
diff --git a/src/pages/index.js b/src/pages/index.js
index 5679876e..069c4d94 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,6 +1,7 @@
 import { BigText, InlineCode, Paragraph, Widont } from '@/components/home/common'
 import { Footer } from '@/components/home/Footer'
 import { Hero } from '@/components/home/Hero'
+import MenuButton from '@/components/home/Menu'
 import { Newsletter } from '@/components/home/Newsletter'
 import { OpenSource } from '@/components/home/OpenSource'
 import { Logo } from '@/components/Logo'
@@ -46,17 +47,17 @@ export default function Home() {
                 </a>
               </NextLink>
             </div>
-            <div className="flex items-center space-x-6 sm:space-x-10 ml-6 sm:ml-2">
+            <div className="flex items-center space-x-4 sm:space-x-6 ml-6 sm:ml-2">
               <Search />
               <NextLink href="/docs">
-                <a className="text-base leading-6 font-medium hover:text-gray-600 transition-colors duration-200 py-2">
-                  <span className="sm:hidden">Docs</span>
+                <a className="hidden sm:inline text-base leading-4 font-medium hover:text-gray-600 px-4 py-3 rounded-md hover:bg-gray-100 transition-colors duration-200">
                   <span className="hidden sm:inline">Documentation</span>
                 </a>
               </NextLink>
+              <MenuButton />
               <a
                 href="https://github.com/javaistic/javaistic"
-                className="text-gray-400 hover:text-gray-500 transition-colors duration-200"
+                className="hidden sm:inline text-gray-400 hover:text-gray-500 transition-colors duration-200"
               >
                 <span className="sr-only">Javaistic on GitHub</span>
                 <svg width="24" height="24" viewBox="0 0 16 16" fill="currentColor">
diff --git a/yarn.lock b/yarn.lock
index e5adb821..842f08db 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1381,6 +1381,16 @@
   resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.2.0.tgz#f3933a44e365864f4dad5db94158106d511e8131"
   integrity sha512-sqKVVVOe5ivCaXDWivIJYVSaEgdQK9ul7a4Kity5Iw7u9+wBAPbX1RMSnLLmp7O4Vzj0WOWwMAJsTL00xwaNug==
 
+"@headlessui/react@^1.4.2":
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.4.2.tgz#87e264f190dbebbf8dfdd900530da973dad24576"
+  integrity sha512-N8tv7kLhg9qGKBkVdtg572BvKvWhmiudmeEpOCyNwzOsZHCXBtl8AazGikIfUS+vBoub20Fse3BjawXDVPPdug==
+
+"@heroicons/react@^1.0.5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-1.0.5.tgz#2fe4df9d33eb6ce6d5178a0f862e97b61c01e27d"
+  integrity sha512-UDMyLM2KavIu2vlWfMspapw9yii7aoLwzI2Hudx4fyoPwfKfxU8r3cL8dEBXOjcLG0/oOONZzbT14M1HoNtEcg==
+
 "@juggle/resize-observer@^3.3.1":
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.3.1.tgz#b50a781709c81e10701004214340f25475a171a0"