diff --git a/app/src/components/Navbar.vue b/app/src/components/Navbar.vue
index 109dff2..e37e414 100644
--- a/app/src/components/Navbar.vue
+++ b/app/src/components/Navbar.vue
@@ -17,6 +17,7 @@
           width="68"
           alt="SysNDD Logo"
           rel="preload"
+          class="app-logo"
         >
         SysNDD
       </b-navbar-brand>
@@ -197,6 +198,26 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
+/* Styles for the application logo */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes pulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.1); }
+}
+.app-logo {
+  max-width: 92px; /* Fixed maximum width */
+  margin-right: 20px; /* Spacing between logo and title */
+  animation: fadeIn 2s ease-out forwards;
+}
+.app-logo:hover {
+  animation: pulse 2s infinite;
+}
+
+/* Styles for the navbar */
 h3 {
   margin: 40px 0 0;
 }