diff --git a/src/components/BaseComponents/NavBar.vue b/src/components/BaseComponents/NavBar.vue
index 0893ea15801ebef06539a5f1bc6fc0531b4ef785..27a9753ff0bc895d9adac389a9b1f47e9ee621a8 100644
--- a/src/components/BaseComponents/NavBar.vue
+++ b/src/components/BaseComponents/NavBar.vue
@@ -51,7 +51,7 @@
                                 <img :src="notificationImageMapper[String(item.notificationType)]" alt="Varslingsikon"          class="notification-icon">
                               </div>
                               <div class="flex-grow-1 ms-3">
-                                <div class="not-item dropdown-item text-wrap">{{item.message}}</div>
+                                <div class="not-item dropdown-item" id="notificationText">{{item.message}}</div>
                               </div>
                             </router-link>
                           </li>
@@ -491,5 +491,14 @@ onMounted(() => {
   display: none;
 }
 
+#notificationText {
+  text-wrap: nowrap;
+}
+
+@media (max-width: 768px) {
+  #notificationText {
+    text-wrap: wrap;
+  }
+}
 
 </style>
\ No newline at end of file
diff --git a/src/components/UserProfile/MyProfile.vue b/src/components/UserProfile/MyProfile.vue
index c6922f1e76d0649955d0cbb62dc664869227b34c..e6a4871922b77d5dd24d5903c11ce18e9645f492 100644
--- a/src/components/UserProfile/MyProfile.vue
+++ b/src/components/UserProfile/MyProfile.vue
@@ -345,6 +345,12 @@ const toUpdateUserSettings = () => {
   background-color: #00DBDE;
 }
 
+.classyButton {
+  background-color: #003A58;
+  border: #003A58;
+  color: white;
+}
+
 .classyButton:hover {
   background-color: #003b58ec;
   border: #003A58;