diff --git a/package-lock.json b/package-lock.json
index b87054be90ad3bfad24d716b699cb6053b910f1d..969552f258803cb182fd8f4a5cff36ae102f2fcb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
+        "@popperjs/core": "^2.11.8",
         "bootstrap": "^5.3.3",
         "pinia": "^2.1.7",
         "vue": "^3.4.21",
@@ -1362,7 +1363,6 @@
       "version": "2.11.8",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
       "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
-      "peer": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/popperjs"
diff --git a/package.json b/package.json
index 8aa8451a9527cc0c9c884aae659458207ce85337..8e38aa925053d6df7ce85891ec58823811d25d33 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.3",
     "pinia": "^2.1.7",
     "vue": "^3.4.21",
diff --git a/src/assets/Sparesti-logo.png b/src/assets/Sparesti-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..22c480c6044969c4c3352cd33f20a3a0334441b9
Binary files /dev/null and b/src/assets/Sparesti-logo.png differ
diff --git a/src/assets/userprofile.png b/src/assets/userprofile.png
new file mode 100644
index 0000000000000000000000000000000000000000..399fa14557c357f826b72a69306f54b3c5ac002b
Binary files /dev/null and b/src/assets/userprofile.png differ
diff --git a/src/components/BaseComponents/Menu.vue b/src/components/BaseComponents/Menu.vue
index ff63410a1aae31e94e1836490f47083dbaa2d6b2..494a029a55f6bc780357c12f5816c8de44219cf4 100644
--- a/src/components/BaseComponents/Menu.vue
+++ b/src/components/BaseComponents/Menu.vue
@@ -1,43 +1,62 @@
 <template>
-    <nav class="navbar navbar-expand-lg bg-danger-subtle">
-        <div class="container-fluid">
-            <a class="navbar-brand" href="#">Navbar</a>
+    <nav class="navbar navbar-expand-lg bg-success">
+        <div class="container-fluid" >
+            <a class="navbar-brand" href="#">
+              <img src="/src/assets/Sparesti-logo.png" alt="Sparesti-logo" width="60">
+            </a>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                 data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                 aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
             </button>
             <div class="collapse navbar-collapse" id="navbarSupportedContent">
-                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                <ul class="navbar-nav ms-auto mb-2 mb-lg-0 ui-menu">
                     <li class="nav-item">
-                        <a class="nav-link active" aria-current="page" href="#">Home</a>
+                        <a class="nav-link text-white" href="#">Saving goals</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" href="#">Link</a>
-                    </li>
-                    <li class="nav-item dropdown">
-                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
-                            aria-expanded="false">
-                            Dropdown
-                        </a>
-                        <ul class="dropdown-menu">
-                            <li><a class="dropdown-item" href="#">Action</a></li>
-                            <li><a class="dropdown-item" href="#">Another action</a></li>
-                            <li>
-                                <hr class="dropdown-divider">
-                            </li>
-                            <li><a class="dropdown-item" href="#">Something else here</a></li>
-                        </ul>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+                        <a class="nav-link text-white" href="#">Leaderboard</a>
                     </li>
+                  <li class="nav-item">
+                    <a class="nav-link text-white" href="#">News</a>
+                  </li>
+                  <li class="nav-item">
+                    <a class="nav-link text-white" href="#">Store</a>
+                  </li>
+                </ul>
+              <nav class="navbar bg-success">
+              <div class="container-fluid">
+                <a class="nav-link dropdown-toggle username-text text-white " href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                  <img src="/src/assets/userprofile.png" alt="Userprofile" width="30" height="30" class="d-inline-block align-text-top">
+                  Username
+                </a>
+                <ul class="dropdown-menu bg-success dropdown-username-content">
+                <li><a class="dropdown-item text-white dropdown-username-link" href="#">User Profile</a></li>
+                <li><a class="dropdown-item text-white dropdown-username-link" href="#">Setting</a></li>
                 </ul>
-                <form class="d-flex" role="search">
-                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
-                    <button class="btn btn-outline-success" type="submit">Search</button>
-                </form>
+              </div>
+              </nav>
             </div>
         </div>
     </nav>
-</template>
\ No newline at end of file
+</template>
+<script setup lang="ts">
+</script>
+<style scoped>
+.ui-menu{
+  font-size: 150%;
+}
+
+.username-text{
+  font-size: 150%;
+
+}
+
+.dropdown-username-content{
+  font-size: 150%;
+}
+
+.dropdown-username-link:hover{
+  background-color: #538d53
+}
+</style>
\ No newline at end of file