diff --git a/src/app/components/board/task/task.component.scss b/src/app/components/board/task/task.component.scss
index 0f886fb..1cbdcec 100644
--- a/src/app/components/board/task/task.component.scss
+++ b/src/app/components/board/task/task.component.scss
@@ -10,10 +10,11 @@ section {
   justify-content: center;
   width: 238px;
   padding: 16px;
+  margin-bottom: 16px;
   border-radius: 24px;
   background-color: var(--white);
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.08);
-  margin-bottom: 16px;
+  transition: box-shadow 0.3s ease;
   cursor: pointer;
 
   &:hover {
diff --git a/src/app/components/contacts/contacts.component.scss b/src/app/components/contacts/contacts.component.scss
index f38b289..a1a1540 100644
--- a/src/app/components/contacts/contacts.component.scss
+++ b/src/app/components/contacts/contacts.component.scss
@@ -19,10 +19,12 @@
   cursor: pointer;
   font-size: 21px;
   font-weight: 700;
+
   &:hover {
     background-color: var(--light-blue);
     box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
   }
+
   img {
     padding-left: 12px;
   }
@@ -83,9 +85,11 @@
   align-items: center;
   padding: 16px;
   border-radius: 10px;
+  transition: all 0.3s ease;
   cursor: pointer;
+
   &:hover {
-    background-color: var(--very-light-gray);
+    background-color: var(--light-gray);
   }
 }
 
@@ -93,6 +97,7 @@
   color: var(--white);
   background-color: var(--dark-blue);
   cursor: unset;
+
   &:hover {
     background-color: var(--dark-blue);
   }
@@ -108,12 +113,14 @@
   height: 42px;
   border-radius: 100%;
   border: 2px solid var(--white);
+
   .initials {
     font-size: 12px;
     font-weight: 400;
     color: var(--white);
     text-shadow: 1px 1px 2px var(--black);
   }
+
   img {
     position: absolute;
     width: 12px;
@@ -225,6 +232,7 @@
     margin: 0;
     z-index: 1;
     cursor: pointer;
+
     img {
       display: flex;
       align-items: center;
diff --git a/src/app/components/login/footer/footer.component.scss b/src/app/components/login/footer/footer.component.scss
index f5eac93..1a31a67 100644
--- a/src/app/components/login/footer/footer.component.scss
+++ b/src/app/components/login/footer/footer.component.scss
@@ -6,17 +6,19 @@
   left: 0;
   width: 100%;
   margin-bottom: 36px;
+
   a {
     text-align: center;
     font-size: 16px;
     font-weight: 400;
     color: var(--gray);
     padding: 8px;
-    cursor: pointer;
     width: fit-content;
     height: 19px;
     text-decoration: none;
+    transition: all 0.3s ease;
     cursor: pointer;
+
     &:hover {
       color: var(--light-blue);
       font-weight: 600;
diff --git a/src/app/components/login/header/header.component.scss b/src/app/components/login/header/header.component.scss
index 3faa309..e3b126a 100644
--- a/src/app/components/login/header/header.component.scss
+++ b/src/app/components/login/header/header.component.scss
@@ -13,6 +13,7 @@
   right: 100px;
   display: inline-flex;
   align-items: center;
+
   p {
     display: flex;
     align-items: center;
@@ -20,6 +21,7 @@
     font-size: 16px;
     font-weight: 400;
   }
+
   button {
     display: flex;
     justify-content: center;
@@ -32,8 +34,9 @@
     font-size: 16px;
     font-weight: 700;
     border: 0px;
-    transition: 125ms ease-in-out;
+    transition: box-shadow 0.3s ease, background-color 0.3s ease;
     cursor: pointer;
+
     &:hover {
       box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
       background-color: var(--light-blue);
@@ -45,7 +48,9 @@
   position: absolute;
   top: 12px;
   right: 12px;
+  transition: filter 0.3s ease;
   cursor: pointer;
+
   &:hover {
     filter: brightness(0) saturate(100%) invert(56%) sepia(64%) saturate(570%)
       hue-rotate(154deg) brightness(92%) contrast(92%);
diff --git a/src/app/components/login/login-loader/login-loader.component.scss b/src/app/components/login/login-loader/login-loader.component.scss
index 25a04de..0bab631 100644
--- a/src/app/components/login/login-loader/login-loader.component.scss
+++ b/src/app/components/login/login-loader/login-loader.component.scss
@@ -32,6 +32,7 @@
   margin-top: 200px;
   color: var(--white);
   text-shadow: 3px 3px 3px var(--black);
+
   p {
     font-size: 21px;
     font-weight: 400px;
diff --git a/src/app/components/login/login.component.scss b/src/app/components/login/login.component.scss
index d0b44e5..0abc267 100644
--- a/src/app/components/login/login.component.scss
+++ b/src/app/components/login/login.component.scss
@@ -17,10 +17,12 @@ section {
   box-shadow: 0px 0px 12px 3px rgba(0, 0, 0, 0.05);
   border-radius: 30px;
   padding: 48px 64px;
+
   p {
     font-size: 61px;
     font-weight: 700;
   }
+
   img {
     padding: 12px 0 24px 0;
   }
@@ -32,9 +34,11 @@ section {
   align-items: center;
   position: relative;
   width: 90%;
+
   .custom-input::-webkit-contacts-auto-fill-button {
     visibility: hidden;
   }
+
   .custom-input {
     font-size: 20px;
     font-weight: 400;
@@ -43,24 +47,34 @@ section {
     border: 1px solid var(--light-gray);
     padding: 12px 16px;
   }
+
   .custom-img {
     &:nth-child(2) {
       position: absolute;
       right: 0;
       top: 5px;
     }
+
     &:nth-child(5) {
       position: absolute;
       right: 0;
       top: 88px;
     }
   }
+
   .passwordEye {
     position: absolute;
     right: -5px;
     top: 88px;
+    transition: filter 0.3s ease;
     cursor: pointer;
+
+    &:hover {
+      filter: brightness(0) saturate(100%) invert(53%) sepia(83%) saturate(480%)
+        hue-rotate(155deg) brightness(94%) contrast(88%);
+    }
   }
+
   .custom-input:focus + .custom-img {
     display: none;
   }
@@ -73,6 +87,7 @@ section {
   height: 24px;
   padding: 6px;
   width: 120%;
+
   p {
     color: var(--red);
     font-size: 12px !important;
@@ -88,15 +103,17 @@ section {
 
 .forgot-pw {
   margin: 12px 0;
+
   a {
     text-align: center;
     font-size: 16px;
     font-weight: 400;
     color: var(--gray);
-    cursor: pointer;
     width: fit-content;
     text-decoration: none;
+    transition: all 0.3s ease;
     cursor: pointer;
+
     &:hover {
       color: var(--light-blue);
       font-weight: 600;
@@ -119,7 +136,9 @@ section {
   align-items: center;
   font-size: 16px;
   color: var(--gray);
+  transition: all 0.3s ease;
   cursor: pointer;
+
   &:hover {
     color: var(--light-blue);
     font-weight: 600;
@@ -131,12 +150,12 @@ input[type="checkbox"] {
   height: 20px;
   margin-right: 8px;
   accent-color: var(--light-blue);
+  transition: all 0.3s ease;
   cursor: pointer;
-  transition: all 0.2s ease;
-}
 
-input[type="checkbox"]:hover {
-  transform: scale(1.1);
+  &:hover {
+    transform: scale(1.1);
+  }
 }
 
 /*------------- RESPONSIVE -------------*/
@@ -152,9 +171,11 @@ input[type="checkbox"]:hover {
     width: 352px;
     height: fit-content;
     padding: 24px 36px;
+
     p {
       font-size: 47px;
     }
+
     .line {
       img {
         width: 120px;
@@ -167,9 +188,11 @@ input[type="checkbox"]:hover {
   .content {
     width: calc(100vw - 96px);
     padding: 24px 36px;
+
     p {
       font-size: 36px;
     }
+
     .line {
       img {
         width: 100px;
@@ -179,6 +202,7 @@ input[type="checkbox"]:hover {
 
   .loading-text {
     margin-top: 180px;
+
     p {
       font-size: 18px;
       font-weight: 400px;
@@ -187,6 +211,7 @@ input[type="checkbox"]:hover {
 
   .error-msg {
     height: 21px;
+
     p {
       font-size: 11px !important;
     }
@@ -197,9 +222,11 @@ input[type="checkbox"]:hover {
   .content {
     width: calc(100vw - 72px);
     padding: 12px 24px;
+
     p {
       font-size: 32px;
     }
+
     .line {
       img {
         width: 80px;
@@ -212,14 +239,17 @@ input[type="checkbox"]:hover {
       font-size: 16px;
       padding: 12px;
     }
+
     .custom-img {
       &:nth-child(2) {
         top: 2px;
       }
+
       &:nth-child(5) {
         top: 73px;
       }
     }
+
     .passwordEye {
       top: 76px;
     }
@@ -227,6 +257,7 @@ input[type="checkbox"]:hover {
 
   .error-msg {
     height: 18px;
+
     p {
       font-size: 10px !important;
     }
diff --git a/src/app/components/login/register/register.component.scss b/src/app/components/login/register/register.component.scss
index fff286f..267186b 100644
--- a/src/app/components/login/register/register.component.scss
+++ b/src/app/components/login/register/register.component.scss
@@ -25,11 +25,13 @@ section {
   align-items: center;
   justify-content: space-between;
   width: 100%;
+
   .headline {
     text-align: center;
     font-size: 61px;
     font-weight: 700;
   }
+
   .spacer {
     padding-left: 38px;
   }
@@ -47,9 +49,11 @@ section {
   align-items: center;
   position: relative;
   width: 90%;
+
   .custom-input::-webkit-contacts-auto-fill-button {
     visibility: hidden;
   }
+
   .custom-input {
     font-size: 20px;
     font-weight: 400;
@@ -58,40 +62,51 @@ section {
     border: 1px solid var(--light-gray);
     padding: 12px 16px;
   }
+
   .custom-img {
     &:nth-child(2) {
       position: absolute;
       right: 0;
       top: 15px;
     }
+
     &:nth-child(5) {
       position: absolute;
       right: 0;
       top: 102px;
     }
+
     &:nth-child(8) {
       position: absolute;
       right: 0;
       top: 186px;
     }
+
     &:nth-child(11) {
       position: absolute;
       right: 0px;
       top: 272px;
     }
   }
-  .passwordEye {
-    position: absolute;
-    right: -5px;
-    top: 186px;
-    cursor: pointer;
-  }
+
+  .passwordEye,
   .passwordEyeConfirm {
     position: absolute;
     right: -5px;
-    top: 272px;
+    top: 186px;
+    transition: filter 0.3s ease;
     cursor: pointer;
+
+    &:hover {
+      filter: brightness(0) saturate(100%) invert(53%) sepia(83%) saturate(480%)
+        hue-rotate(155deg) brightness(94%) contrast(88%);
+    }
   }
+
+  .passwordEyeConfirm {
+    top: 272px;
+  }
+
   .custom-input:focus + .custom-img {
     display: none;
   }
@@ -104,6 +119,7 @@ section {
   height: 24px;
   padding: 6px;
   width: 120%;
+
   p {
     color: var(--red);
     font-size: 12px !important;
@@ -121,33 +137,27 @@ section {
   align-items: center;
   justify-content: center;
   width: 100%;
+
   input[type="checkbox"] {
-    width: 24px;
-    height: 24px;
-    margin: 0 10px 0 15px;
-    appearance: none;
-    border: 0;
-    border-radius: 0;
-    background-image: url("./../../../../assets/img/login/checkbox.svg");
-    background-repeat: no-repeat;
-    background-position: center;
+    width: 20px;
+    height: 20px;
+    margin-right: 8px;
+    accent-color: var(--light-blue);
+    transition: all 0.3s ease;
     cursor: pointer;
-    &:checked {
-      background-image: url("./../../../../assets/img/login/checkbox-checked.svg");
-      &:hover {
-        background-image: url("./../../../../assets/img/login/checkbox-checked-hover.svg");
-      }
-    }
+
     &:hover {
-      background-image: url("./../../../../assets/img/login/checkbox-hover.svg");
+      transform: scale(1.1);
     }
   }
+
   .label {
     p {
       font-size: 14px;
       font-weight: 400;
       padding-right: 20px;
     }
+
     a {
       text-decoration: none;
       color: var(--light-blue);
@@ -229,23 +239,29 @@ section {
       font-size: 16px;
       padding: 12px;
     }
+
     .custom-img {
       &:nth-child(2) {
         top: 15px;
       }
+
       &:nth-child(5) {
         top: 90px;
       }
+
       &:nth-child(8) {
         top: 162px;
       }
+
       &:nth-child(11) {
         top: 237px;
       }
     }
+
     .passwordEye {
       top: 162px;
     }
+
     .passwordEyeConfirm {
       top: 237px;
     }
@@ -253,6 +269,7 @@ section {
 
   .error-msg {
     height: 18px;
+
     p {
       font-size: 10px !important;
     }
diff --git a/src/app/components/summary/summary.component.html b/src/app/components/summary/summary.component.html
index 3aae6c5..88d588e 100644
--- a/src/app/components/summary/summary.component.html
+++ b/src/app/components/summary/summary.component.html
@@ -84,13 +84,15 @@
     </div>
 
     <!-- GREETING CONTAINER -->
+    @if (currentUser) {
     <div class="welcome-container">
       <p>{{ greeting }},</p>
       <span id="welcome-user">
-        {{ currentUser!.firstName }}<br />
-        {{ currentUser!.lastName }}
+        {{ currentUser.firstName }}<br />
+        {{ currentUser.lastName }}
       </span>
     </div>
+    }
   </div>
 
   <!-- Show loading spinner if loading -->
diff --git a/src/app/components/summary/summary.component.scss b/src/app/components/summary/summary.component.scss
index a5ef5c8..fd1e229 100644
--- a/src/app/components/summary/summary.component.scss
+++ b/src/app/components/summary/summary.component.scss
@@ -53,11 +53,12 @@
   height: 168px;
   border-radius: 30px;
   background-color: var(--white);
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.08);
+  transition: all 0.5s ease;
   cursor: pointer;
 
   &:hover {
     transform: scale(1.02);
-    transition: 500ms ease-out;
     background-color: var(--dark-blue);
 
     p,
diff --git a/src/app/interfaces/task.interface.ts b/src/app/interfaces/task.interface.ts
index 458de08..5554973 100644
--- a/src/app/interfaces/task.interface.ts
+++ b/src/app/interfaces/task.interface.ts
@@ -24,7 +24,6 @@ export interface Subtask {
 }
 
 export interface Assignee {
-  id?: string;
   userId: string;
 }
 
diff --git a/src/app/shared/components/buttons/btn-back/btn-back.component.scss b/src/app/shared/components/buttons/btn-back/btn-back.component.scss
index b382199..d887b17 100644
--- a/src/app/shared/components/buttons/btn-back/btn-back.component.scss
+++ b/src/app/shared/components/buttons/btn-back/btn-back.component.scss
@@ -4,19 +4,24 @@
   align-items: center;
   width: 38px;
   height: 38px;
+  border-radius: 100%;
+  transition: all 0.3s ease;
   cursor: pointer;
+
   img {
     width: 22px;
     height: 22px;
     filter: brightness(0) saturate(100%) invert(56%) sepia(64%) saturate(570%)
       hue-rotate(154deg) brightness(92%) contrast(92%);
   }
+
   &:hover {
     background-color: var(--light-blue);
-    border-radius: 100%;
     scale: 1.1;
+
     img {
       scale: 1.1;
+
       filter: brightness(0) saturate(100%) invert(100%) sepia(0%)
         saturate(7485%) hue-rotate(325deg) brightness(100%) contrast(104%);
     }
diff --git a/src/app/shared/components/buttons/btn-close/btn-close.component.scss b/src/app/shared/components/buttons/btn-close/btn-close.component.scss
index b382199..d887b17 100644
--- a/src/app/shared/components/buttons/btn-close/btn-close.component.scss
+++ b/src/app/shared/components/buttons/btn-close/btn-close.component.scss
@@ -4,19 +4,24 @@
   align-items: center;
   width: 38px;
   height: 38px;
+  border-radius: 100%;
+  transition: all 0.3s ease;
   cursor: pointer;
+
   img {
     width: 22px;
     height: 22px;
     filter: brightness(0) saturate(100%) invert(56%) sepia(64%) saturate(570%)
       hue-rotate(154deg) brightness(92%) contrast(92%);
   }
+
   &:hover {
     background-color: var(--light-blue);
-    border-radius: 100%;
     scale: 1.1;
+
     img {
       scale: 1.1;
+
       filter: brightness(0) saturate(100%) invert(100%) sepia(0%)
         saturate(7485%) hue-rotate(325deg) brightness(100%) contrast(104%);
     }
diff --git a/src/app/shared/components/buttons/form-btn/form-btn.component.scss b/src/app/shared/components/buttons/form-btn/form-btn.component.scss
index 75c770e..eea3c64 100644
--- a/src/app/shared/components/buttons/form-btn/form-btn.component.scss
+++ b/src/app/shared/components/buttons/form-btn/form-btn.component.scss
@@ -8,6 +8,7 @@
   cursor: pointer;
   background-color: var(--white);
   border: 1px solid var(--black);
+  transition: all 0.3s ease;
 
   &:hover:not(:disabled) {
     box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
diff --git a/src/app/shared/components/header/header.component.scss b/src/app/shared/components/header/header.component.scss
index b417cf2..686bcd6 100644
--- a/src/app/shared/components/header/header.component.scss
+++ b/src/app/shared/components/header/header.component.scss
@@ -27,6 +27,7 @@
   border-radius: 25px;
   background-color: var(--white);
   color: var(--light-blue);
+  transition: all 0.3s ease;
   cursor: pointer;
   &:hover {
     background-color: var(--very-light-gray);
diff --git a/src/app/shared/components/header/navbar/navbar.component.scss b/src/app/shared/components/header/navbar/navbar.component.scss
index 76b39db..6736ee8 100644
--- a/src/app/shared/components/header/navbar/navbar.component.scss
+++ b/src/app/shared/components/header/navbar/navbar.component.scss
@@ -26,6 +26,7 @@
   padding: 8px 16px;
   border-radius: 8px;
   color: var(--white);
+  transition: all 0.3s ease;
   cursor: pointer;
   span {
     width: 118px;
diff --git a/src/app/shared/components/sidebar/sidebar-mobile/sidebar-mobile.component.scss b/src/app/shared/components/sidebar/sidebar-mobile/sidebar-mobile.component.scss
index 1cb1eb6..bed6c44 100644
--- a/src/app/shared/components/sidebar/sidebar-mobile/sidebar-mobile.component.scss
+++ b/src/app/shared/components/sidebar/sidebar-mobile/sidebar-mobile.component.scss
@@ -18,6 +18,7 @@ nav {
   width: 80px;
   height: 65px;
   border-radius: 16px;
+  transition: background-color 0.3s ease;
   cursor: pointer;
   &:hover {
     background-color: var(--very-dark-blue);
diff --git a/src/app/shared/components/sidebar/sidebar.component.scss b/src/app/shared/components/sidebar/sidebar.component.scss
index 13b9da6..999dd45 100644
--- a/src/app/shared/components/sidebar/sidebar.component.scss
+++ b/src/app/shared/components/sidebar/sidebar.component.scss
@@ -26,6 +26,7 @@ nav {
   padding: 4px 0;
   padding-left: 56px;
   height: 46px;
+  transition: background-color 0.3s ease;
   cursor: pointer;
 
   img {
@@ -68,12 +69,14 @@ nav {
     text-align: center;
     text-decoration: none;
     color: var(--light-gray);
+    transition: color 0.3s ease;
     cursor: pointer;
 
     img {
       display: none;
       width: 30px;
       height: 30px;
+      transition: filter 0.3s ease;
       cursor: pointer;
 
       &:hover {