diff --git a/package-lock.json b/package-lock.json
index 8f592e5..79c9468 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,6 +4,32 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@ant-design/colors": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@ant-design/colors/-/colors-5.0.1.tgz",
+      "integrity": "sha512-x1TUaRILaqy3zgFNo+kIqOa3eTYPt81H1/3E4dCjDP4Qvk/xaPEizLDFdRUcIx0cWwyu2LklwfyLHWpbYK8v6A==",
+      "requires": {
+        "@ctrl/tinycolor": "^3.3.1"
+      }
+    },
+    "@ant-design/icons": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-4.3.0.tgz",
+      "integrity": "sha512-UoIbw4oz/L/msbkgqs2nls2KP7XNKScOxVR54wRrWwnXOzJaGNwwSdYjHQz+5ETf8C53YPpzMOnRX99LFCdeIQ==",
+      "requires": {
+        "@ant-design/colors": "^5.0.0",
+        "@ant-design/icons-svg": "^4.0.0",
+        "@babel/runtime": "^7.11.2",
+        "classnames": "^2.2.6",
+        "insert-css": "^2.0.0",
+        "rc-util": "^5.0.1"
+      }
+    },
+    "@ant-design/icons-svg": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@ant-design/icons-svg/-/icons-svg-4.1.0.tgz",
+      "integrity": "sha512-Fi03PfuUqRs76aI3UWYpP864lkrfPo0hluwGqh7NJdLhvH4iRDc3jbJqZIvRDLHKbXrvAfPPV3+zjUccfFvWOQ=="
+    },
     "@babel/code-frame": {
       "version": "7.12.11",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz",
@@ -1185,6 +1211,11 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
       "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
     },
+    "@ctrl/tinycolor": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.3.2.tgz",
+      "integrity": "sha512-28A2j9DISNtHRcfc+FSCkxIAMnQoORQYz+UQLjc0+KlsGl80MqfbG3EzqXxzVmCMatlgmHfcX7/DBoMg+ik/Fg=="
+    },
     "@eslint/eslintrc": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.2.2.tgz",
@@ -4110,6 +4141,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+    },
     "clean-css": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
@@ -7865,6 +7901,11 @@
       "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
       "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
     },
+    "insert-css": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/insert-css/-/insert-css-2.0.0.tgz",
+      "integrity": "sha1-610Ql7dUL0x56jBg067gfQU4gPQ="
+    },
     "internal-ip": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-4.3.0.tgz",
@@ -14443,6 +14484,16 @@
         }
       }
     },
+    "rc-util": {
+      "version": "5.7.0",
+      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.7.0.tgz",
+      "integrity": "sha512-0hh5XkJ+vBDeMJsHElqT1ijMx+gC3gpClwQ10h/5hccrrgrMx8VUem183KLlH1YrWCfMMPmDXWWNnwsn+p6URw==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "react-is": "^16.12.0",
+        "shallowequal": "^1.1.0"
+      }
+    },
     "react": {
       "version": "17.0.1",
       "resolved": "https://registry.npmjs.org/react/-/react-17.0.1.tgz",
@@ -15722,6 +15773,11 @@
         "kind-of": "^6.0.2"
       }
     },
+    "shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
diff --git a/package.json b/package.json
index 4f2ff40..a2e8b0a 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@ant-design/icons": "^4.3.0",
     "@craco/craco": "^6.0.0",
     "@tailwindcss/postcss7-compat": "^2.0.2",
     "@testing-library/jest-dom": "^5.11.6",
diff --git a/src/Components/Home/Nav.js b/src/Components/Home/Nav.js
index 385eaf3..7233bf7 100644
--- a/src/Components/Home/Nav.js
+++ b/src/Components/Home/Nav.js
@@ -1,7 +1,10 @@
-import React from "react";
+import React, {useState} from "react";
+import {CloseOutlined,MenuOutlined} from "@ant-design/icons";
 import Logo from "../../Logo";
 
 export default function Nav() {
+
+  const [navButton, setNavButton] = useState(false);
   
   return (
     <div className="relative bg-opacity-0">
@@ -59,67 +62,66 @@ export default function Nav() {
                 <button
                   type="button"
                   className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
-                  
+                  onClick={() => setNavButton(current => !current)}
                 >
-                  <span className="sr-only">Close menu</span>
-
-                  <svg
-                    className="h-6 w-6"
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                    aria-hidden="true"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M6 18L18 6M6 6l12 12"
-                    />
-                  </svg>
+                  {
+                    navButton ?
+                    <>
+                      <span className="sr-only">Close menu</span>
+                      <span><CloseOutlined className="h-6 w-6"/></span>
+                    </>
+                    :
+                    <>
+                      <span className="sr-only">Close menu</span>
+                      <span>
+                      <MenuOutlined className="h-6 w-6"/></span>
+                    </>
+                  }
                 </button>
               </div>
             </div>
           </div>
-          <div className="py-6 px-5 space-y-6">
-            <div className="grid grid-cols-2 gap-y-4 gap-x-8">
-              <a
-                href="#"
-                className="w-full flex items-center justify-center px-4 py-2 text-base font-medium text-gray-900 hover:text-gray-700"
-              >
-                Home
-              </a>
+          {
+            navButton && 
+            <div className="py-6 px-5 space-y-6">
+              <div className="grid grid-cols-2 gap-y-4 gap-x-8">
+                <a
+                  href="#"
+                  className="w-full flex items-center justify-center px-4 py-2 text-base font-medium text-gray-900 hover:text-gray-700"
+                >
+                  Home
+                </a>
 
-              <a
-                href="#"
-                className="w-full flex items-center justify-center px-4 py-2 text-base font-medium text-gray-900 hover:text-gray-700"
-              >
-                Join
-              </a>
+                <a
+                  href="#"
+                  className="w-full flex items-center justify-center px-4 py-2 text-base font-medium text-gray-900 hover:text-gray-700"
+                >
+                  Join
+                </a>
 
-              <a
-                href="#"
-                className="w-full flex items-center justify-center px-4 py-2 text-base font-medium text-gray-900 hover:text-gray-700"
-              >
-                About
-              </a>
+                <a
+                  href="#"
+                  className="w-full flex items-center justify-center px-4 py-2 text-base font-medium text-gray-900 hover:text-gray-700"
+                >
+                  About
+                </a>
 
-              <a
-                href="#"
-                className="w-full flex items-center justify-center px-4 py-2 text-base font-medium text-gray-900 hover:text-gray-700"
-              >
-                Help
-              </a>
+                <a
+                  href="#"
+                  className="w-full flex items-center justify-center px-4 py-2 text-base font-medium text-gray-900 hover:text-gray-700"
+                >
+                  Help
+                </a>
 
-              <a
-                href="#"
-                className="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700"
-              >
-                Share your idea
-              </a>
+                <a
+                  href="#"
+                  className="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700"
+                >
+                  Share your idea
+                </a>
+              </div>
             </div>
-          </div>
+          }
         </div>
       </div>
     </div>