diff --git a/Web/public/scss/layouts/_header.scss b/Web/public/scss/layouts/_header.scss
index 3a3f07b..d26c90d 100755
--- a/Web/public/scss/layouts/_header.scss
+++ b/Web/public/scss/layouts/_header.scss
@@ -1,13 +1,14 @@
 @use "../variables" as *;
 
 html .topbar {
+  transition: background-color 0.5s ease; /* Smooth transition for background color */
   position: sticky;
   top: 0;
   z-index: 9;
   height: $header-height;
 
-  .notification-badge{
-    .mat-badge-content{
+  .notification-badge {
+    .mat-badge-content {
       left: 80%;
       bottom: 85%;
       width: 16px;
@@ -61,4 +62,4 @@ html .topbar {
       --mat-button-text-label-text-color: $dark-text-secondary !important;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/Web/public/scss/pages/_frontend.scss b/Web/public/scss/pages/_frontend.scss
index 3d02904..2dd5b8c 100755
--- a/Web/public/scss/pages/_frontend.scss
+++ b/Web/public/scss/pages/_frontend.scss
@@ -5,8 +5,8 @@
         width: 100%;
         background-color: var(--mat-sys-background) !important;
         z-index: 9;
-     -webkit-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.2); 
-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.2);
+        -webkit-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.2);
+        box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.2);
     }
 }