diff --git a/art-gallery-frontend/src/components/CollapsibleMenuAntD.vue b/art-gallery-frontend/src/components/CollapsibleMenuAntD.vue
index 21447b6..a60bc7a 100644
--- a/art-gallery-frontend/src/components/CollapsibleMenuAntD.vue
+++ b/art-gallery-frontend/src/components/CollapsibleMenuAntD.vue
@@ -1,108 +1,62 @@
 <template>
   <div>
-    <a-menu
-      v-model:openKeys="openKeys"
-      v-model:selectedKeys="current"
-      class="nav-menu-dropdown"
-      mode="inline"
-      @click="handleClick"
-    >
-      <div>
-        <a-sub-menu key="sub-artworks">
-          <template #title>
-            <span>artworks</span>
-          </template>
-          <a-menu-item key="artwork-of-day">
-            <router-link to="/artworkofday" class="nav-sub">
-              <span>Artwork of the Day</span>
-            </router-link>
-          </a-menu-item>
-          <a-menu-item key="artworks-list">
-            <router-link to="/artworks" class="nav-sub">
-              <span>List of Artworks</span>
-            </router-link></a-menu-item
-          >
-        </a-sub-menu>
-        <a-sub-menu key="sub-culture">
-          <template #title>
-            <span>art & culture</span>
-          </template>
-          <a-menu-item key="symbols"><span class="nav-sub">Symbols</span></a-menu-item>
-          <a-menu-item key="artist-of-day">
-            <router-link to="/artistofday" class="nav-sub">
-              <span>Artist of the Day</span>
-            </router-link>
-          </a-menu-item>
-          <a-menu-item key="art-facts"
-            ><span class="nav-sub">Aboriginal Art Facts</span></a-menu-item
-          >
-        </a-sub-menu>
-        <a-sub-menu key="sub-exhibitions">
-          <template #title>
-            <span>exhibitions</span>
-          </template>
-          <a-menu-item key="exhibition-current">
-            <router-link to="/exhibition" class="nav-sub">
-              <span>Current Exhibitions</span>
-            </router-link>
-          </a-menu-item>
-          <a-menu-item key="exhibition-past"
-            ><span class="nav-sub">Past Exhibitions</span></a-menu-item
-          >
-        </a-sub-menu>
-      </div>
-      <div>
-        <a-menu-item key="login">
-          <div class="nav-tools-login" v-if="!account.user">
-            <router-link to="/login" class="nav-link">
-              <span>Log In</span>
-            </router-link>
-          </div>
+    <a-menu :selectedKeys="current" class="nav-menu-dropdown" mode="inline" @click="handleClick">
+      <a-sub-menu key="sub-artworks" title="Artworks">
+        <a-menu-item key="artwork-of-day">
+          <router-link to="/artworkofday" class="nav-sub"> Artwork of the Day </router-link>
         </a-menu-item>
-        <a-menu-item key="signup">
-          <div class="nav-tools-signup" v-if="!account.user">
-            <router-link to="/signup" class="nav-link">
-              <span>Sign Up</span>
-            </router-link>
-          </div>
+        <a-menu-item key="artworks-list">
+          <router-link to="/artworks" class="nav-sub"> List of Artworks </router-link>
         </a-menu-item>
-      </div>
+      </a-sub-menu>
+      <a-sub-menu key="sub-culture" title="Art & Culture">
+        <a-menu-item key="symbols">Symbols</a-menu-item>
+        <a-menu-item key="artist-of-day">
+          <router-link to="/artistofday" class="nav-sub"> Artist of the Day </router-link>
+        </a-menu-item>
+        <a-menu-item key="art-facts">Aboriginal Art Facts</a-menu-item>
+      </a-sub-menu>
+      <a-sub-menu key="sub-exhibitions" title="Exhibitions">
+        <a-menu-item key="exhibition-current">
+          <router-link to="/exhibition" class="nav-sub"> Current Exhibitions </router-link>
+        </a-menu-item>
+        <a-menu-item key="exhibition-past">Past Exhibitions</a-menu-item>
+      </a-sub-menu>
+      <router-link v-if="!account.user" to="/login" class="nav-link">
+        <a-menu-item key="login">Log In</a-menu-item>
+      </router-link>
+      <router-link v-if="!account.user" to="/signup" class="nav-link">
+        <a-menu-item key="signup">Sign Up</a-menu-item>
+      </router-link>
     </a-menu>
   </div>
 </template>
 
 <script>
 import { Menu } from "ant-design-vue";
-import { watch } from "vue";
+import { ref, watch } from "vue";
 import { mapState } from "vuex";
 
 export default {
   name: "CollapsibleMenuAntD",
   components: {
-    AMenu: Menu,
-    ASubMenu: Menu.SubMenu,
-    AMenuItem: Menu.Item,
+    AntMenu: Menu,
+    AntSubMenu: Menu.SubMenu,
+    AntMenuItem: Menu.Item,
   },
   setup() {
-    const current = [];
-    const openKeys = [];
+    const current = ref([]);
     const handleClick = (e) => {
       console.log("click", e);
     };
-    const titleClick = (e) => {
-      console.log("titleClick", e);
-    };
-    watch(
-      () => openKeys,
-      (val) => {
-        console.log("openKeys", val);
-      }
-    );
+
+    watch(current, (val) => {
+      console.log("current", val);
+    });
+
     return {
       current,
-      openKeys,
       handleClick,
-      titleClick,
     };
   },
   computed: {
@@ -124,10 +78,4 @@ export default {
   display: grid;
   grid-template-columns: max-content auto;
 }
-.nav-sub {
-  font-size: calc(12px + 2 * (100vw - 320px) / 1040);
-}
-.ant-menu::before {
-  content: none;
-}
 </style>
diff --git a/art-gallery-frontend/src/components/CollapsibleMenuHTML.vue b/art-gallery-frontend/src/components/CollapsibleMenuHTML.vue
index a5d83bf..66150f1 100644
--- a/art-gallery-frontend/src/components/CollapsibleMenuHTML.vue
+++ b/art-gallery-frontend/src/components/CollapsibleMenuHTML.vue
@@ -3,46 +3,37 @@
     <ul class="nav-menu-dropdown">
       <li>
         <router-link to="/artworks" class="nav-link nav-link-1">
-          <span>Artworks</span>
+          <span class="nav-text">Artworks</span>
         </router-link>
-      </li>
-      <li>
-        <router-link to="/culture" class="nav-link nav-link-2">
-          <span>Art & Culture</span>
-        </router-link>
-      </li>
-      <li>
-        <div class="nav-tools-login" v-if="!account.user">
-          <router-link to="/login" class="nav-link nav-link-3">
-            <span>Log In</span>
-          </router-link>
-        </div>
-      </li>
-      <li>
         <router-link to="/artworkofday" class="nav-sub nav-link-1">
-          <span>Artwork of the Day</span>
+          <span class="nav-text">Artwork of the Day</span>
         </router-link>
       </li>
       <li>
+        <router-link to="/culture" class="nav-link nav-link-2">
+          <span class="nav-text">Art & Culture</span>
+        </router-link>
         <router-link to="/artistofday" class="nav-sub nav-link-2">
-          <span>Artist of the Day</span>
+          <span class="nav-text">Artist of the Day</span>
         </router-link>
       </li>
-      <li>
-        <div class="nav-tools-signup" v-if="!account.user">
-          <router-link to="/signup" class="nav-link nav-link-3">
-            <span>Sign Up</span>
-          </router-link>
-        </div>
+      <li v-if="!account.user" class="nav-link nav-link-3">
+        <router-link to="/login">
+          <span class="nav-text">Log In</span>
+        </router-link>
+        <router-link to="/signup">
+          <span class="nav-text">Sign Up</span>
+        </router-link>
       </li>
       <li>
         <router-link to="/exhibition" class="nav-link nav-link-1">
-          <span>Exhibitions</span>
+          <span class="nav-text">Exhibitions</span>
         </router-link>
       </li>
     </ul>
   </div>
 </template>
+
 <script>
 import { mapState } from "vuex";
 
@@ -57,25 +48,32 @@ export default {
 </script>
 
 <style scoped>
+/* Add classes to style individual elements */
 .nav-menu-dropdown {
   display: grid;
   grid-template-columns: auto auto 100px;
 }
 
-:deep(.nav-link-1) {
+.nav-text {
+  font-weight: lighter;
+  font-size: smaller;
+  padding-left: 40px;
+}
+
+.nav-link-1 {
   grid-column-start: 1;
 }
 
-:deep(.nav-link-2) {
+.nav-link-2 {
   grid-column-start: 2;
 }
 
-:deep(.nav-link-3) {
+.nav-link-3 {
   grid-column-start: 3;
   margin-left: 0;
 }
 
-:deep(.nav-sub) {
+.nav-sub {
   font-weight: lighter;
   font-size: smaller;
   padding-left: 40px;
diff --git a/art-gallery-frontend/src/components/DropdownMenuAntD.vue b/art-gallery-frontend/src/components/DropdownMenuAntD.vue
index 40478e3..e737be5 100644
--- a/art-gallery-frontend/src/components/DropdownMenuAntD.vue
+++ b/art-gallery-frontend/src/components/DropdownMenuAntD.vue
@@ -6,57 +6,39 @@
       class="nav-menu"
       disabledOverflow="{true}"
     >
-      <a-sub-menu>
+      <a-sub-menu key="artworks">
         <template #title>
           <router-link to="/artworks" class="nav-link">
-            <span>Artworks</span>
+            Artworks
           </router-link>
         </template>
         <a-menu-item key="artwork-of-day" class="menu-item">
-          <router-link to="/artworkofday" class="nav-sub">
-            <span>Artwork of the Day</span>
-          </router-link>
+          <router-link to="/artworkofday" class="nav-sub">Artwork of the Day</router-link>
         </a-menu-item>
         <a-menu-item key="artworks-list">
-          <router-link to="/artworks" class="nav-sub">
-            <span>Gallery of Artworks</span>
-          </router-link>
+          <router-link to="/artworks" class="nav-sub">Gallery of Artworks</router-link>
         </a-menu-item>
       </a-sub-menu>
-      <a-sub-menu>
+      <a-sub-menu key="art-and-culture">
         <template #title>
-          <router-link to="/culture" class="nav-link">
-            <span>Art & Culture</span>
-          </router-link>
+          <router-link to="/culture" class="nav-link">Art & Culture</router-link>
         </template>
-        <a-menu-item key="symbols">
-          <span class="nav-sub">Symbols</span>
-        </a-menu-item>
+        <a-menu-item key="symbols">Symbols</a-menu-item>
         <a-menu-item key="artist-of-day">
-          <router-link to="/artistofday" class="nav-sub">
-            <span>Artist of the Day</span>
-          </router-link>
-        </a-menu-item>
-        <a-menu-item key="art-facts">
-          <span class="nav-sub">Art & Culture Facts</span>
+          <router-link to="/artistofday" class="nav-sub">Artist of the Day</router-link>
         </a-menu-item>
+        <a-menu-item key="art-facts">Art & Culture Facts</a-menu-item>
       </a-sub-menu>
-      <a-sub-menu>
+      <a-sub-menu key="exhibitions">
         <template #title>
-          <router-link to="/exhibition" class="nav-link">
-            <span>Exhibitions</span>
-          </router-link>
+          <router-link to="/exhibition" class="nav-link">Exhibitions</router-link>
         </template>
-        <a-menu-item key="exhibition-currnt">
-          <router-link to="/exhibition" class="nav-sub">
-            <span>Current Exhibitions</span>
-          </router-link>
-        </a-menu-item>
-        <a-menu-item key="exhibition-past">
-          <span class="nav-sub">Past Exhibitions</span>
+        <a-menu-item key="exhibition-current">
+          <router-link to="/exhibition" class="nav-sub">Current Exhibitions</router-link>
         </a-menu-item>
+        <a-menu-item key="exhibition-past">Past Exhibitions</a-menu-item>
       </a-sub-menu>
-      <a-sub-menu v-if="isAdmin()">
+      <a-sub-menu key="swagger" v-if="isAdmin()">
         <template #title>
           <a href="https://localhost:7194/swagger/index.html" class="nav-link">Swagger</a>
         </template>
diff --git a/art-gallery-frontend/src/components/DropdownMenuHTML.vue b/art-gallery-frontend/src/components/DropdownMenuHTML.vue
index c96bb8d..9132adc 100644
--- a/art-gallery-frontend/src/components/DropdownMenuHTML.vue
+++ b/art-gallery-frontend/src/components/DropdownMenuHTML.vue
@@ -2,58 +2,51 @@
   <div class="nav-site">
     <ul class="nav-menu">
       <li>
-        <router-link to="/" class="nav-link">
-          <span>Home</span>
-        </router-link>
+        <router-link to="/" class="nav-link">Home</router-link>
       </li>
-      <li>
-        <router-link to="/artworks" class="nav-link subnav">
-          <link
-            rel="stylesheet"
-            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-          />
-          <span>Artworks <i class="fa fa-caret-down"></i></span>
-          <div class="subnav-content">
-            <router-link to="/artworkofday" class="nav-sub">
-              <span>Artwork of the Day</span>
-            </router-link>
-            <br />
-            <br />
-            <router-link to="/artworks" class="nav-sub">
-              <span>List of Artworks</span>
-            </router-link>
-          </div>
+      <li class="subnav">
+        <router-link to="/artworks" class="nav-link">
+          <i class="fa fa-caret-down"></i>
+          Artworks
         </router-link>
+        <ul class="subnav-content">
+          <li>
+            <router-link to="/artworkofday" class="nav-sub">Artwork of the Day</router-link>
+          </li>
+          <br /><br />
+          <li>
+            <router-link to="/artworks" class="nav-sub">List of Artworks</router-link>
+          </li>
+        </ul>
       </li>
-      <li>
-        <router-link to="/culture" class="nav-link subnav">
-          <span>Art & Culture <i class="fa fa-caret-down"></i></span>
-          <div class="subnav-content">
+      <li class="subnav">
+        <router-link to="/culture" class="nav-link">
+          <i class="fa fa-caret-down"></i>
+          Art & Culture
+        </router-link>
+        <ul class="subnav-content">
+          <li>
             <span class="nav-sub">Symbols</span>
-            <br />
-            <br />
-            <router-link to="/artistofday" class="nav-sub">
-              <span>Artist of the Day</span>
-            </router-link>
-            <br />
-            <br />
+          </li>
+          <br /><br />
+          <li>
+            <router-link to="/artistofday" class="nav-sub">Artist of the Day</router-link>
+          </li>
+          <br /><br />
+          <li>
             <span class="nav-sub">Aboriginal Art Facts</span>
-          </div>
-        </router-link>
+          </li>
+        </ul>
       </li>
       <li>
-        <router-link to="/exhibition" class="nav-link">
-          <span>Exhibitions</span>
-        </router-link>
+        <router-link to="/exhibition" class="nav-link">Exhibitions</router-link>
+      </li>
+    </ul>
+    <ul class="nav-menu" v-if="isAdmin()">
+      <li>
+        <a href="https://localhost:7194/swagger/index.html" class="nav-link">Swagger</a>
       </li>
     </ul>
-    <div v-if="isAdmin()">
-      <ul class="nav-menu">
-        <li>
-          <a href="https://localhost:7194/swagger/index.html" class="nav-link">Swagger</a>
-        </li>
-      </ul>
-    </div>
   </div>
 </template>
 
@@ -61,25 +54,21 @@
 import { mapState } from "vuex";
 
 export default {
-  name: "DropdownMenuHTML",
+  name: "DropdownMenu",
+  computed: {
+    ...mapState(["account"]),
+  },
   methods: {
     isAdmin() {
-      if (this.account.user) {
-        return this.account.user.role == "Admin";
-      }
+      return this.account?.user?.role === "Admin";
     },
   },
-  computed: {
-    ...mapState({
-      account: (state) => state.account,
-    }),
-  },
 };
 </script>
 
 <style scoped>
 .subnav {
-  overflow: hidden;
+  position: relative;
 }
 
 .subnav-content {
@@ -89,10 +78,6 @@ export default {
   background-color: white;
   font-size: smaller;
   box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.205);
-}
-
-.subnav:hover .subnav-content {
-  display: block;
   margin-left: 15px;
   padding: 10px;
   color: black;
@@ -102,9 +87,10 @@ export default {
   font-size: 16px;
   padding-left: 0;
 }
+
 .nav-sub:hover {
   color: var(--color--turquoise-light-hover);
-  transition: 0.1s;
+  transition: color 0.1s;
   transition-delay: 0;
   border-bottom: 2px solid;
 }
diff --git a/package-lock.json b/package-lock.json
index 18f5c67..1006c6f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,65 +1,100 @@
 {
   "name": "art-gallery-project",
   "version": "1.0.0",
-  "lockfileVersion": 1,
+  "lockfileVersion": 3,
   "requires": true,
-  "dependencies": {
-    "argparse": {
+  "packages": {
+    "": {
+      "name": "art-gallery-project",
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "markdownlint": "^0.28.2"
+      },
+      "devDependencies": {
+        "prettier": "^2.8.8"
+      }
+    },
+    "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
     },
-    "entities": {
+    "node_modules/entities": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
-      "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q=="
+      "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
     },
-    "linkify-it": {
+    "node_modules/linkify-it": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-4.0.1.tgz",
       "integrity": "sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==",
-      "requires": {
+      "dependencies": {
         "uc.micro": "^1.0.1"
       }
     },
-    "markdown-it": {
+    "node_modules/markdown-it": {
       "version": "13.0.1",
       "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-13.0.1.tgz",
       "integrity": "sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==",
-      "requires": {
+      "dependencies": {
         "argparse": "^2.0.1",
         "entities": "~3.0.1",
         "linkify-it": "^4.0.1",
         "mdurl": "^1.0.1",
         "uc.micro": "^1.0.5"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.js"
       }
     },
-    "markdownlint": {
+    "node_modules/markdownlint": {
       "version": "0.28.2",
       "resolved": "https://registry.npmjs.org/markdownlint/-/markdownlint-0.28.2.tgz",
       "integrity": "sha512-yYaQXoKKPV1zgrFsyAuZPEQoe+JrY9GDag9ObKpk09twx4OCU5lut+0/kZPrQ3W7w82SmgKhd7D8m34aG1unVw==",
-      "requires": {
+      "dependencies": {
         "markdown-it": "13.0.1",
         "markdownlint-micromark": "0.1.2"
+      },
+      "engines": {
+        "node": ">=14.18.0"
       }
     },
-    "markdownlint-micromark": {
+    "node_modules/markdownlint-micromark": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/markdownlint-micromark/-/markdownlint-micromark-0.1.2.tgz",
-      "integrity": "sha512-jRxlQg8KpOfM2IbCL9RXM8ZiYWz2rv6DlZAnGv8ASJQpUh6byTBnEsbuMZ6T2/uIgntyf7SKg/mEaEBo1164fQ=="
+      "integrity": "sha512-jRxlQg8KpOfM2IbCL9RXM8ZiYWz2rv6DlZAnGv8ASJQpUh6byTBnEsbuMZ6T2/uIgntyf7SKg/mEaEBo1164fQ==",
+      "engines": {
+        "node": ">=14.18.0"
+      }
     },
-    "mdurl": {
+    "node_modules/mdurl": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
       "integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g=="
     },
-    "prettier": {
+    "node_modules/prettier": {
       "version": "2.8.8",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
       "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
-      "dev": true
+      "dev": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
     },
-    "uc.micro": {
+    "node_modules/uc.micro": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
       "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="