diff --git a/package-lock.json b/package-lock.json
index 2c36b50c5..09d112c71 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17041,8 +17041,9 @@
       }
     },
     "node_modules/lottie-web": {
-      "version": "5.11.0",
-      "license": "MIT"
+      "version": "5.12.2",
+      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.12.2.tgz",
+      "integrity": "sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg=="
     },
     "node_modules/lower-case": {
       "version": "1.1.4",
@@ -36854,7 +36855,9 @@
       "optional": true
     },
     "lottie-web": {
-      "version": "5.11.0"
+      "version": "5.12.2",
+      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.12.2.tgz",
+      "integrity": "sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg=="
     },
     "lower-case": {
       "version": "1.1.4",
diff --git a/src/app/common/header/unit-dropdown/unit-dropdown.component.html b/src/app/common/header/unit-dropdown/unit-dropdown.component.html
index c6d5097e4..9b0de209a 100644
--- a/src/app/common/header/unit-dropdown/unit-dropdown.component.html
+++ b/src/app/common/header/unit-dropdown/unit-dropdown.component.html
@@ -1,72 +1,82 @@
 <div class="flex items-center">
   @if (unit) {
-  <div
-    class="bg-formatif-blue text-white rounded-full cursor-pointer pl-6 pr-6 min-h-12 h-12 flex items-center"
-    style="font-size: 14px"
-    matTooltip="{{ unit.name }}"
-    [matMenuTriggerFor]="menu"
-    #menuState="matMenuTrigger"
-  >
-    <span class="text-md">{{ unit?.code }}</span>
-    <mat-icon>{{ menuState.menuOpen ? 'arrow_drop_up' : 'arrow_drop_down' }} </mat-icon>
-  </div>
-  } @if (!unit) {
-
-  <button mat-button [matMenuTriggerFor]="menu" #menuState="matMenuTrigger">
-    <span class="flex items-center">
-      <span>Select Unit</span>
+    <div
+      class="bg-formatif-blue text-white rounded-full cursor-pointer pl-6 pr-6 min-h-12 h-12 flex items-center"
+      style="font-size: 14px"
+      matTooltip="{{ unit.name }}"
+      [matMenuTriggerFor]="menu"
+      #menuState="matMenuTrigger"
+    >
+      <span class="text-md">{{ unit?.code }}</span>
       <mat-icon>{{ menuState.menuOpen ? 'arrow_drop_up' : 'arrow_drop_down' }} </mat-icon>
-    </span>
-  </button>
-
+    </div>
+  }
+  @if (!unit) {
+    <button mat-button [matMenuTriggerFor]="menu" #menuState="matMenuTrigger">
+      <span class="flex items-center">
+        <span>Select Unit</span>
+        <mat-icon>{{ menuState.menuOpen ? 'arrow_drop_up' : 'arrow_drop_down' }} </mat-icon>
+      </span>
+    </button>
   }
 </div>
 
 <mat-menu #menu="matMenu" class="unit-dropdown-menu">
   @if (media.isActive('xs')) {
-  <button uiSref="home" mat-menu-item>
-    <mat-icon
-      uiSref="home"
-      style="margin-right: 20px"
-      svgIcon="formatif-logo"
-      class="formatif-icon"
-      aria-label="Home Icon"
-    ></mat-icon>
-    <div class="unitName">Home</div>
-    <span class="flex-grow"></span>
-  </button>
-  } @if (media.isActive('xs')) {
-  <mat-divider></mat-divider>
+    <button uiSref="home" mat-menu-item>
+      <mat-icon
+        uiSref="home"
+        style="margin-right: 20px"
+        svgIcon="formatif-logo"
+        class="formatif-icon"
+        aria-label="Home Icon"
+      ></mat-icon>
+      <div class="unitName">Home</div>
+      <span class="flex-grow"></span>
+    </button>
+  }
+  @if (media.isActive('xs')) {
+    <mat-divider></mat-divider>
   }
 
   <div mat-subheader [hidden]="unitRoles?.length === 0">Units you teach</div>
-  @for (unitRole of unitRoles; track unitRole) { @if (!unitRole.unit.teachingPeriod ||
-  unitRole.unit.teachingPeriod?.active) {
-  <div uiSref="units/tasks/inbox" [uiParams]="{ unitId: unitRole.unit.id }" mat-menu-item class="w-full">
-    <div class="flex items-center w-full">
-      <div class="flex-none unitName">{{ unitRole.unit.name }}</div>
-      <div class="grow"></div>
-      <f-chip>
-        {{ unitRole.unit.code }}
-      </f-chip>
-    </div>
-  </div>
-  } }
+  @for (unitRole of unitRoles; track unitRole) {
+    @if (!unitRole.unit.teachingPeriod || unitRole.unit.teachingPeriod?.active) {
+      <div
+        uiSref="units/tasks/inbox"
+        [uiParams]="{unitId: unitRole.unit.id}"
+        mat-menu-item
+        class="w-full"
+      >
+        <div class="flex items-center w-full">
+          <div class="flex-none unitName">{{ unitRole.unit.name }}</div>
+          <div class="grow"></div>
+          <f-chip>
+            {{ unitRole.unit.code }}
+          </f-chip>
+        </div>
+      </div>
+    }
+  }
 
   <mat-divider [hidden]="unitRoles?.length === 0 || projects?.length === 0"></mat-divider>
   <div mat-subheader [hidden]="projects?.length === 0">Units You Study</div>
-  @for (project of projects; track project) { @if (!project.unit.teachingPeriod || project.unit.teachingPeriod.active) {
-  <button
-    uiSref="projects/dashboard"
-    [uiParams]="{ projectId: project.id, taskAbbr: '' }"
-    class="flex items-center mb-2"
-    mat-menu-item
-  >
-    <div class="unitName">{{ project.unit.name }}</div>
-    <span fxFlex style="flex-grow: 1"></span>
-    <f-chip>
-      {{ project.unit.code }}
-    </f-chip>
-  </button>
-  } }
+  @for (project of projects; track project) {
+    @if (!project.unit.teachingPeriod || project.unit.teachingPeriod.active) {
+      <button
+        uiSref="projects/dashboard"
+        [uiParams]="{projectId: project.id, taskAbbr: ''}"
+        class="flex items-center mb-2"
+        mat-menu-item
+      >
+        <span class="flex flex-row border-box">
+          <div class="unitName">{{ project.unit.name }}</div>
+          <span class="flex-1 border-box"></span>
+          <f-chip>
+            {{ project.unit.code }}
+          </f-chip>
+        </span>
+      </button>
+    }
+  }
 </mat-menu>
diff --git a/src/app/common/hero-sidebar/hero-sidebar.component.html b/src/app/common/hero-sidebar/hero-sidebar.component.html
index 6578781ae..8136d0673 100644
--- a/src/app/common/hero-sidebar/hero-sidebar.component.html
+++ b/src/app/common/hero-sidebar/hero-sidebar.component.html
@@ -1,12 +1,12 @@
-<div class="left-banner" fxLayout="column">
+<div class="left-banner flex flex-col">
   <div class="header">
-    <div class="wordmark" fxLayout="row" fxLayoutAlign="start center">
+    <div class="wordmark flex justify-start items-center">
       <img src="../../../assets/images/logo-white.svg" width="40px" alt="Homepage Logo" style="padding-right: 6px" />
       <p>{{ externalName.value }}</p>
     </div>
     <h1 class="mt-6">Manage your learning, with feedback you'll want to receive.</h1>
   </div>
 
-  <div fxFlex="10"></div>
-  <div fxFlex="grow" class="pattern"></div>
+  <div class="flex-1" style="max-height: 10%;"></div>
+  <div class="pattern flex-grow"></div>
 </div>
diff --git a/src/app/common/user-badge/user-badge.component.html b/src/app/common/user-badge/user-badge.component.html
index 4aec1e08a..548f6e348 100644
--- a/src/app/common/user-badge/user-badge.component.html
+++ b/src/app/common/user-badge/user-badge.component.html
@@ -1,4 +1,4 @@
-<div fxLayout="row" fxLayoutAlign="start start">
+<div class="flex flex-row justify-start items-start">
   <a (click)="!unselected ? goToStudent() : null" style="display: flex">
     <user-icon
       size="40"
@@ -7,7 +7,7 @@
       style="margin-right: 8px"
     ></user-icon>
   </a>
-  <div fxLayout="column" fxLayoutAlign="center start" style="line-height: 0.5em; margin-top: 4px">
+  <div class="flex-col justify-center items-start" style="line-height: 0.5em; margin-top: 4px">
     <div style="margin-top: 6px" id="placeholder1" [hidden]="!unselected"></div>
     <div id="placeholder2" [hidden]="!unselected"></div>
     <a (click)="!unselected ? goToStudent() : null" style="display: flex">
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/task-dashboard.component.html b/src/app/projects/states/dashboard/directives/task-dashboard/task-dashboard.component.html
index 56fa44ae9..b2d723387 100644
--- a/src/app/projects/states/dashboard/directives/task-dashboard/task-dashboard.component.html
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/task-dashboard.component.html
@@ -20,7 +20,7 @@
 
   <!-- Render if no PDF URL is available for the current view -->
   <ng-template #noPdfUrl>
-    <div fxFlexFill fxLayout="column" fxLayoutAlign="center center">
+    <div class="flex flex-col w-full h-full justify-center items-center">
       <mat-icon>subtitles_off</mat-icon>
     </div>
   </ng-template>
diff --git a/src/app/units/states/tasks/inbox/directives/staff-task-list/staff-task-list.component.html b/src/app/units/states/tasks/inbox/directives/staff-task-list/staff-task-list.component.html
index e6a5d73d0..f4de83b40 100644
--- a/src/app/units/states/tasks/inbox/directives/staff-task-list/staff-task-list.component.html
+++ b/src/app/units/states/tasks/inbox/directives/staff-task-list/staff-task-list.component.html
@@ -85,8 +85,8 @@
       >
         <form class="search-options">
           <div class="task-definition">
-            <div fxLayout="row" fxLayoutAlign="space-between center">
-              <mat-form-field fxFlex>
+            <div class="flex flex-row justify-between items-center">
+              <mat-form-field class="flex-1">
                 <mat-label>Task</mat-label>
                 <mat-select
                   [(ngModel)]="filters.taskDefinitionIdSelected"
@@ -112,8 +112,8 @@
             </div>
           </div>
           <!--/task-definition-->
-          <div fxLayout="row" fxLayoutAlign="space-between center">
-            <mat-form-field fxFlex>
+          <div class="flex flex-row justify-between items-center">
+            <mat-form-field class="flex-1">
               <mat-label>Students</mat-label>
               <mat-select
                 [(ngModel)]="filters.tutorialIdSelected"
@@ -147,7 +147,7 @@
 </ng-template>
 
 <!-- Actual task-inbox -->
-<div class="task-inbox" [ngClass]="isNarrow ? 'narrow-width' : 'full-width'" div fxLayout="column" fxLayoutAlign="none">
+<div class="task-inbox flex flex-col justify-normal" [ngClass]="isNarrow ? 'narrow-width' : 'full-width'">
   <div class="openSearchDialog" [hidden]="!isNarrow">
     <button mat-icon-button (click)="openDialog()" aria-label="Seach Button">
       <mat-icon>search</mat-icon>
@@ -200,8 +200,8 @@
                 similarities: task.similaritiesDetected
               }"
             ></span>
-            <user-icon fxFlexAlign="center" [user]="task.project.student" [size]="30"> </user-icon>
-            <div class="task-list-data truncate" fxFlex [hidden]="isNarrow">
+            <user-icon class="self-center" [user]="task.project.student" [size]="30"> </user-icon>
+            <div class="task-list-data truncate flex-1" [hidden]="isNarrow">
               <h4 class="student-name">{{ task.project.student.name }}</h4>
               <div class="task-details truncate">
                 {{ task.definition.abbreviation }} -