diff --git a/src/app/layout/common/quick-chat/quick-chat.component.html b/src/app/layout/common/quick-chat/quick-chat.component.html
index fce16399..d1ef83f6 100644
--- a/src/app/layout/common/quick-chat/quick-chat.component.html
+++ b/src/app/layout/common/quick-chat/quick-chat.component.html
@@ -151,12 +151,12 @@
 
                     <!-- Message field -->
                     <div class="flex items-end p-4 border-t bg-gray-50 dark:bg-transparent">
-                        <mat-form-field class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full">
+                        <mat-form-field
+                            class="fuse-mat-dense fuse-mat-rounded fuse-mat-bold w-full"
+                            [subscriptSizing]="'dynamic'">
                             <textarea
-                                class="min-h-5 my-0 resize-none"
-                                style="margin: 11px 0 !important; padding: 0 !important;"
-                                [rows]="1"
                                 matInput
+                                cdkTextareaAutosize
                                 #messageInput></textarea>
                         </mat-form-field>
                         <div class="flex items-center h-11 my-px ml-4">
diff --git a/src/app/layout/common/search/search.component.html b/src/app/layout/common/search/search.component.html
index 1890446b..18950a4c 100644
--- a/src/app/layout/common/search/search.component.html
+++ b/src/app/layout/common/search/search.component.html
@@ -68,7 +68,9 @@
 <!-- Basic search -->
 <ng-container *ngIf="appearance === 'basic'">
     <div class="w-full sm:min-w-80">
-        <mat-form-field class="fuse-mat-no-subscript w-full">
+        <mat-form-field
+            class="w-full"
+            [subscriptSizing]="'dynamic'">
             <mat-icon
                 matPrefix
                 [svgIcon]="'heroicons_outline:search'"></mat-icon>
diff --git a/src/app/modules/admin/apps/academy/details/details.component.html b/src/app/modules/admin/apps/academy/details/details.component.html
index 2742ffff..43cc5db9 100644
--- a/src/app/modules/admin/apps/academy/details/details.component.html
+++ b/src/app/modules/admin/apps/academy/details/details.component.html
@@ -140,10 +140,12 @@
                             mat-flat-button
                             [color]="'primary'"
                             (click)="goToPreviousStep()">
-                            <mat-icon
-                                class="mr-2"
-                                [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
-                            <span class="mr-1">Prev</span>
+                            <span class="inline-flex items-center">
+                                <mat-icon
+                                    class="mr-2"
+                                    [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
+                                <span class="mr-1">Prev</span>
+                            </span>
                         </button>
                         <div class="flex items-center justify-center mx-2.5 font-medium leading-5 text-on-primary">
                             <span>{{currentStep + 1}}</span>
@@ -155,10 +157,12 @@
                             mat-flat-button
                             [color]="'primary'"
                             (click)="goToNextStep()">
-                            <span class="ml-1">Next</span>
-                            <mat-icon
-                                class="ml-2"
-                                [svgIcon]="'heroicons_outline:arrow-narrow-right'"></mat-icon>
+                            <span class="inline-flex items-center">
+                                <span class="ml-1">Next</span>
+                                <mat-icon
+                                    class="ml-2"
+                                    [svgIcon]="'heroicons_outline:arrow-narrow-right'"></mat-icon>
+                            </span>
                         </button>
                     </div>
                 </div>
diff --git a/src/app/modules/admin/apps/academy/list/list.component.html b/src/app/modules/admin/apps/academy/list/list.component.html
index c8388601..b875c50e 100644
--- a/src/app/modules/admin/apps/academy/list/list.component.html
+++ b/src/app/modules/admin/apps/academy/list/list.component.html
@@ -31,7 +31,9 @@
         <div class="flex flex-col flex-auto w-full max-w-xs sm:max-w-5xl mx-auto">
             <!-- Filters -->
             <div class="flex flex-col sm:flex-row items-center justify-between w-full max-w-xs sm:max-w-none">
-                <mat-form-field class="fuse-mat-no-subscript w-full sm:w-36">
+                <mat-form-field
+                    class="w-full sm:w-36"
+                    [subscriptSizing]="'dynamic'">
                     <mat-select
                         [value]="'all'"
                         (selectionChange)="filterByCategory($event)">
@@ -42,8 +44,8 @@
                     </mat-select>
                 </mat-form-field>
                 <mat-form-field
-                    class="fuse-mat-no-subscript w-full sm:w-72 mt-4 sm:mt-0 sm:ml-4"
-                    [floatLabel]="'always'">
+                    class="w-full sm:w-72 mt-4 sm:mt-0 sm:ml-4"
+                    [subscriptSizing]="'dynamic'">
                     <mat-icon
                         matPrefix
                         class="icon-size-5"
diff --git a/src/app/modules/admin/apps/chat/chats/chats.component.html b/src/app/modules/admin/apps/chat/chats/chats.component.html
index 9b45436f..4d25083e 100644
--- a/src/app/modules/admin/apps/chat/chats/chats.component.html
+++ b/src/app/modules/admin/apps/chat/chats/chats.component.html
@@ -95,8 +95,8 @@
                         <!-- Search -->
                         <div class="mt-4">
                             <mat-form-field
-                                class="fuse-mat-no-subscript fuse-mat-rounded fuse-mat-dense w-full"
-                                [floatLabel]="'always'">
+                                class="fuse-mat-rounded fuse-mat-dense w-full"
+                                [subscriptSizing]="'dynamic'">
                                 <mat-icon
                                     matPrefix
                                     class="icon-size-5"
diff --git a/src/app/modules/admin/apps/chat/conversation/conversation.component.html b/src/app/modules/admin/apps/chat/conversation/conversation.component.html
index 1c928b30..da041324 100644
--- a/src/app/modules/admin/apps/chat/conversation/conversation.component.html
+++ b/src/app/modules/admin/apps/chat/conversation/conversation.component.html
@@ -167,12 +167,12 @@
                             <mat-icon [svgIcon]="'heroicons_outline:paper-clip'"></mat-icon>
                         </button>
                     </div>
-                    <mat-form-field class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full ml-4">
+                    <mat-form-field
+                        class="fuse-mat-dense fuse-mat-rounded fuse-mat-bold w-full ml-4"
+                        subscriptSizing="dynamic">
                         <textarea
-                            class="min-h-5 my-0 resize-none"
-                            style="margin: 11px 0 !important; padding: 0 !important;"
-                            [rows]="1"
                             matInput
+                            cdkTextareaAutosize
                             #messageInput></textarea>
                     </mat-form-field>
                     <div class="flex items-center h-11 my-px ml-4">
diff --git a/src/app/modules/admin/apps/contacts/details/details.component.html b/src/app/modules/admin/apps/contacts/details/details.component.html
index 0a2f3f9f..c12e1b54 100644
--- a/src/app/modules/admin/apps/contacts/details/details.component.html
+++ b/src/app/modules/admin/apps/contacts/details/details.component.html
@@ -248,7 +248,9 @@
 
                     <!-- Name -->
                     <div class="mt-8">
-                        <mat-form-field class="fuse-mat-no-subscript w-full">
+                        <mat-form-field
+                            class="w-full"
+                            [subscriptSizing]="'dynamic'">
                             <mat-label>Name</mat-label>
                             <mat-icon
                                 matPrefix
@@ -332,7 +334,7 @@
                                         <ng-container *ngIf="!tagsEditMode">
                                             <ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
                                                 <div
-                                                    class="flex items-center h-10 min-h-10 px-4 cursor-pointer hover:bg-hover"
+                                                    class="flex items-center h-10 min-h-10 pl-1 pr-4 cursor-pointer hover:bg-hover"
                                                     (click)="toggleContactTag(tag)"
                                                     matRipple>
                                                     <mat-checkbox
@@ -341,7 +343,7 @@
                                                         [color]="'primary'"
                                                         [disableRipple]="true">
                                                     </mat-checkbox>
-                                                    <div class="ml-1">{{tag.title}}</div>
+                                                    <div>{{tag.title}}</div>
                                                 </div>
                                             </ng-container>
                                         </ng-container>
@@ -350,7 +352,9 @@
                                             <div class="py-2 space-y-2">
                                                 <ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
                                                     <div class="flex items-center">
-                                                        <mat-form-field class="fuse-mat-dense fuse-mat-no-subscript w-full mx-4">
+                                                        <mat-form-field
+                                                            class="fuse-mat-dense w-full mx-4"
+                                                            [subscriptSizing]="'dynamic'">
                                                             <input
                                                                 matInput
                                                                 [value]="tag.title"
@@ -387,7 +391,9 @@
 
                     <!-- Title -->
                     <div class="mt-8">
-                        <mat-form-field class="fuse-mat-no-subscript w-full">
+                        <mat-form-field
+                            class="w-full"
+                            [subscriptSizing]="'dynamic'">
                             <mat-label>Title</mat-label>
                             <mat-icon
                                 matPrefix
@@ -402,7 +408,9 @@
 
                     <!-- Company -->
                     <div class="mt-8">
-                        <mat-form-field class="fuse-mat-no-subscript w-full">
+                        <mat-form-field
+                            class="w-full"
+                            [subscriptSizing]="'dynamic'">
                             <mat-label>Company</mat-label>
                             <mat-icon
                                 matPrefix
@@ -420,7 +428,9 @@
                         <div class="space-y-4">
                             <ng-container *ngFor="let email of contactForm.get('emails')['controls']; let i = index; let first = first; let last = last; trackBy: trackByFn">
                                 <div class="flex">
-                                    <mat-form-field class="fuse-mat-no-subscript flex-auto">
+                                    <mat-form-field
+                                        class="flex-auto"
+                                        [subscriptSizing]="'dynamic'">
                                         <mat-label *ngIf="first">Email</mat-label>
                                         <mat-icon
                                             matPrefix
@@ -432,7 +442,9 @@
                                             [placeholder]="'Email address'"
                                             [spellcheck]="false">
                                     </mat-form-field>
-                                    <mat-form-field class="fuse-mat-no-subscript flex-auto w-full max-w-24 sm:max-w-40 ml-2 sm:ml-4">
+                                    <mat-form-field
+                                        class="flex-auto w-full max-w-24 sm:max-w-40 ml-2 sm:ml-4"
+                                        [subscriptSizing]="'dynamic'">
                                         <mat-label *ngIf="first">Label</mat-label>
                                         <mat-icon
                                             matPrefix
@@ -477,7 +489,9 @@
                         <div class="space-y-4">
                             <ng-container *ngFor="let phoneNumber of contactForm.get('phoneNumbers')['controls']; let i = index; let first = first; let last = last; trackBy: trackByFn">
                                 <div class="relative flex">
-                                    <mat-form-field class="fuse-mat-no-subscript flex-auto">
+                                    <mat-form-field
+                                        class="flex-auto"
+                                        [subscriptSizing]="'dynamic'">
                                         <mat-label *ngIf="first">Phone</mat-label>
                                         <input
                                             matInput
@@ -512,7 +526,9 @@
                                             </ng-container>
                                         </mat-select>
                                     </mat-form-field>
-                                    <mat-form-field class="fuse-mat-no-subscript flex-auto w-full max-w-24 sm:max-w-40 ml-2 sm:ml-4">
+                                    <mat-form-field
+                                        class="flex-auto w-full max-w-24 sm:max-w-40 ml-2 sm:ml-4"
+                                        [subscriptSizing]="'dynamic'">
                                         <mat-label *ngIf="first">Label</mat-label>
                                         <mat-icon
                                             matPrefix
@@ -554,7 +570,9 @@
 
                     <!-- Address -->
                     <div class="mt-8">
-                        <mat-form-field class="fuse-mat-no-subscript w-full">
+                        <mat-form-field
+                            class="w-full"
+                            [subscriptSizing]="'dynamic'">
                             <mat-label>Address</mat-label>
                             <mat-icon
                                 matPrefix
@@ -569,7 +587,9 @@
 
                     <!-- Birthday -->
                     <div class="mt-8">
-                        <mat-form-field class="fuse-mat-no-subscript w-full">
+                        <mat-form-field
+                            class="w-full"
+                            [subscriptSizing]="'dynamic'">
                             <mat-label>Birthday</mat-label>
                             <mat-icon
                                 matPrefix
@@ -590,7 +610,9 @@
 
                     <!-- Notes -->
                     <div class="mt-8">
-                        <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
+                        <mat-form-field
+                            class="w-full"
+                            [subscriptSizing]="'dynamic'">
                             <mat-label>Notes</mat-label>
                             <mat-icon
                                 matPrefix
@@ -602,7 +624,7 @@
                                 [placeholder]="'Notes'"
                                 [rows]="5"
                                 [spellcheck]="false"
-                                matTextareaAutosize></textarea>
+                                cdkTextareaAutosize></textarea>
                         </mat-form-field>
                     </div>
 
diff --git a/src/app/modules/admin/apps/contacts/list/list.component.html b/src/app/modules/admin/apps/contacts/list/list.component.html
index a5c8e368..2439085f 100644
--- a/src/app/modules/admin/apps/contacts/list/list.component.html
+++ b/src/app/modules/admin/apps/contacts/list/list.component.html
@@ -42,7 +42,9 @@
                     <div class="flex items-center mt-4 sm:mt-0 md:mt-4">
                         <!-- Search -->
                         <div class="flex-auto">
-                            <mat-form-field class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded w-full min-w-50">
+                            <mat-form-field
+                                class="fuse-mat-dense fuse-mat-rounded w-full min-w-50"
+                                subscriptSizing="dynamic">
                                 <mat-icon
                                     class="icon-size-5"
                                     matPrefix
diff --git a/src/app/modules/admin/apps/ecommerce/inventory/list/inventory.component.html b/src/app/modules/admin/apps/ecommerce/inventory/list/inventory.component.html
index 080903d0..50589a96 100644
--- a/src/app/modules/admin/apps/ecommerce/inventory/list/inventory.component.html
+++ b/src/app/modules/admin/apps/ecommerce/inventory/list/inventory.component.html
@@ -13,7 +13,9 @@
         <!-- Actions -->
         <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
             <!-- Search -->
-            <mat-form-field class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded min-w-64">
+            <mat-form-field
+                class="fuse-mat-dense fuse-mat-rounded min-w-64"
+                [subscriptSizing]="'dynamic'">
                 <mat-icon
                     class="icon-size-5"
                     matPrefix
@@ -398,7 +400,7 @@
                                                 <ng-container *ngIf="!tagsEditMode">
                                                     <ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
                                                         <mat-checkbox
-                                                            class="flex items-center h-10 min-h-10 px-4"
+                                                            class="flex items-center h-10 min-h-10 pl-1 pr-4"
                                                             [color]="'primary'"
                                                             [checked]="selectedProduct.tags.includes(tag.id)"
                                                             (change)="toggleProductTag(tag, $event)">
@@ -410,7 +412,9 @@
                                                 <ng-container *ngIf="tagsEditMode">
                                                     <div class="p-4 space-y-2">
                                                         <ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
-                                                            <mat-form-field class="fuse-mat-dense fuse-mat-no-subscript w-full">
+                                                            <mat-form-field
+                                                                class="fuse-mat-dense w-full"
+                                                                [subscriptSizing]="'dynamic'">
                                                                 <input
                                                                     matInput
                                                                     [value]="tag.title"
diff --git a/src/app/modules/admin/apps/help-center/help-center.component.html b/src/app/modules/admin/apps/help-center/help-center.component.html
index c5d959f8..9fa8d2ae 100644
--- a/src/app/modules/admin/apps/help-center/help-center.component.html
+++ b/src/app/modules/admin/apps/help-center/help-center.component.html
@@ -20,7 +20,9 @@
             <div class="mt-3 sm:text-2xl text-center tracking-tight text-secondary">
                 Search for a topic or question, check out our FAQs and guides, contact us for detailed support
             </div>
-            <mat-form-field class="fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full max-w-80 sm:max-w-120 mt-10 sm:mt-20">
+            <mat-form-field
+                class="fuse-mat-rounded fuse-mat-bold w-full max-w-80 sm:max-w-120 mt-10 sm:mt-20"
+                [subscriptSizing]="'dynamic'">
                 <input
                     matInput
                     [placeholder]="'Enter a question, topic or keyword'">
diff --git a/src/app/modules/admin/apps/help-center/support/support.component.html b/src/app/modules/admin/apps/help-center/support/support.component.html
index 360c00c4..1aaf5f53 100644
--- a/src/app/modules/admin/apps/help-center/support/support.component.html
+++ b/src/app/modules/admin/apps/help-center/support/support.component.html
@@ -71,13 +71,13 @@
                         </mat-error>
                     </mat-form-field>
                     <!-- Message -->
-                    <mat-form-field class="fuse-mat-textarea w-full">
+                    <mat-form-field class="w-full">
                         <textarea
                             matInput
                             [formControlName]="'message'"
                             [required]="true"
                             [rows]="5"
-                            matTextareaAutosize></textarea>
+                            cdkTextareaAutosize></textarea>
                         <mat-label>Message</mat-label>
                         <mat-error *ngIf="supportForm.get('message').hasError('required')">
                             Required
diff --git a/src/app/modules/admin/apps/mailbox/details/details.component.html b/src/app/modules/admin/apps/mailbox/details/details.component.html
index b4b09763..2bf7918d 100644
--- a/src/app/modules/admin/apps/mailbox/details/details.component.html
+++ b/src/app/modules/admin/apps/mailbox/details/details.component.html
@@ -332,7 +332,7 @@
                             class="flex flex-col w-full"
                             #replyForm>
 
-                            <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript">
+                            <mat-form-field [subscriptSizing]="'dynamic'">
                                 <textarea
                                     class="textarea"
                                     matInput
diff --git a/src/app/modules/admin/apps/notes/details/details.component.html b/src/app/modules/admin/apps/notes/details/details.component.html
index 363be7d8..2ca48fb1 100644
--- a/src/app/modules/admin/apps/notes/details/details.component.html
+++ b/src/app/modules/admin/apps/notes/details/details.component.html
@@ -33,7 +33,7 @@
                     [placeholder]="'Note'"
                     [(ngModel)]="note.content"
                     (input)="updateNoteDetails(note)"
-                    matTextareaAutosize></textarea>
+                    cdkTextareaAutosize></textarea>
             </div>
             <!-- Tasks -->
             <ng-container *ngIf="note.tasks">
diff --git a/src/app/modules/admin/apps/notes/labels/labels.component.html b/src/app/modules/admin/apps/notes/labels/labels.component.html
index 6f9f8c6d..cf1edfba 100644
--- a/src/app/modules/admin/apps/notes/labels/labels.component.html
+++ b/src/app/modules/admin/apps/notes/labels/labels.component.html
@@ -9,9 +9,7 @@
         </button>
     </div>
     <!-- New label -->
-    <mat-form-field
-        class="fuse-mat-dense w-full mt-8"
-        [floatLabel]="'always'">
+    <mat-form-field class="fuse-mat-dense w-full mt-8">
         <input
             name="new-label"
             [autocomplete]="'off'"
diff --git a/src/app/modules/admin/apps/notes/list/list.component.html b/src/app/modules/admin/apps/notes/list/list.component.html
index 04783638..23ae903d 100644
--- a/src/app/modules/admin/apps/notes/list/list.component.html
+++ b/src/app/modules/admin/apps/notes/list/list.component.html
@@ -82,7 +82,9 @@
                             (click)="drawer.toggle()">
                             <mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
                         </button>
-                        <mat-form-field class="fuse-mat-rounded fuse-mat-dense fuse-mat-no-subscript flex-auto ml-4 lg:ml-0">
+                        <mat-form-field
+                            class="fuse-mat-rounded fuse-mat-dense flex-auto ml-4 lg:ml-0"
+                            [subscriptSizing]="'dynamic'">
                             <mat-icon
                                 class="icon-size-5"
                                 [svgIcon]="'heroicons_solid:search'"
diff --git a/src/app/modules/admin/apps/scrumboard/board/add-card/add-card.component.html b/src/app/modules/admin/apps/scrumboard/board/add-card/add-card.component.html
index e930020b..ef0baa6b 100644
--- a/src/app/modules/admin/apps/scrumboard/board/add-card/add-card.component.html
+++ b/src/app/modules/admin/apps/scrumboard/board/add-card/add-card.component.html
@@ -3,7 +3,7 @@
     [class.h-13]="!formVisible">
     <div class="relative flex w-full h-full rounded-lg">
         <button
-            class="absolute inset-0 justify-start w-full px-5 rounded-lg"
+            class="absolute inset-0 justify-start w-full rounded-lg"
             [ngClass]="{'opacity-0 pointer-events-none': formVisible}"
             mat-button
             (click)="toggleFormVisibility()"
diff --git a/src/app/modules/admin/apps/scrumboard/board/board.component.html b/src/app/modules/admin/apps/scrumboard/board/board.component.html
index 58cefc2f..cea9b26b 100644
--- a/src/app/modules/admin/apps/scrumboard/board/board.component.html
+++ b/src/app/modules/admin/apps/scrumboard/board/board.component.html
@@ -14,17 +14,17 @@
                 mat-stroked-button
                 [routerLink]="['..']">
                 <mat-icon
-                    class="icon-size-5 mr-2"
+                    class="icon-size-5"
                     [svgIcon]="'heroicons_solid:view-boards'"></mat-icon>
-                Boards
+                <span class="ml-2">Boards</span>
             </a>
             <button
                 class="ml-3"
                 mat-stroked-button>
                 <mat-icon
-                    class="icon-size-5 mr-2"
+                    class="icon-size-5"
                     [svgIcon]="'heroicons_solid:cog'"></mat-icon>
-                Settings
+                <span class="ml-2">Settings</span>
             </button>
         </div>
     </div>
diff --git a/src/app/modules/admin/apps/scrumboard/card/details/details.component.html b/src/app/modules/admin/apps/scrumboard/card/details/details.component.html
index 85223a49..487919df 100644
--- a/src/app/modules/admin/apps/scrumboard/card/details/details.component.html
+++ b/src/app/modules/admin/apps/scrumboard/card/details/details.component.html
@@ -19,7 +19,9 @@
         [formGroup]="cardForm">
 
         <!-- Title -->
-        <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
+        <mat-form-field
+            class="w-full"
+            [subscriptSizing]="'dynamic'">
             <mat-label>Title</mat-label>
             <textarea
                 matInput
@@ -31,7 +33,9 @@
         </mat-form-field>
 
         <!-- Description -->
-        <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
+        <mat-form-field
+            class="w-full"
+            [subscriptSizing]="'dynamic'">
             <mat-label>Description</mat-label>
             <textarea
                 matInput
@@ -58,7 +62,9 @@
                     <ng-container *ngIf="card.dueDate">{{card.dueDate | date:'longDate'}}</ng-container>
                     <ng-container *ngIf="!card.dueDate">Not set</ng-container>
                 </span>
-                <mat-form-field class="fuse-mat-no-subscript fuse-mat-dense invisible absolute inset-0 -mt-2.5 opacity-0 pointer-events-none">
+                <mat-form-field
+                    class="fuse-mat-dense invisible absolute inset-0 -mt-2.5 opacity-0 pointer-events-none"
+                    [subscriptSizing]="'dynamic'">
                     <input
                         matInput
                         [formControlName]="'dueDate'"
@@ -107,7 +113,7 @@
                     <!-- Labels -->
                     <ng-container *ngFor="let label of filteredLabels; trackBy: trackByFn">
                         <mat-checkbox
-                            class="flex items-center h-10 min-h-10 px-4"
+                            class="flex items-center h-10 min-h-10 pl-1 pr-4"
                             [color]="'primary'"
                             [checked]="hasLabel(label)"
                             (change)="toggleProductTag(label, $event)">
diff --git a/src/app/modules/admin/apps/tasks/details/details.component.html b/src/app/modules/admin/apps/tasks/details/details.component.html
index 20c631cf..acb39abc 100644
--- a/src/app/modules/admin/apps/tasks/details/details.component.html
+++ b/src/app/modules/admin/apps/tasks/details/details.component.html
@@ -62,13 +62,15 @@
 
         <!-- Title -->
         <div>
-            <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
+            <mat-form-field
+                class="w-full"
+                [subscriptSizing]="'dynamic'">
                 <mat-label>{{task.type === 'task' ? 'Task title' : 'Section title'}}</mat-label>
                 <textarea
                     matInput
                     [formControlName]="'title'"
                     [spellcheck]="false"
-                    matTextareaAutosize
+                    cdkTextareaAutosize
                     #titleField></textarea>
             </mat-form-field>
         </div>
@@ -144,7 +146,7 @@
                                 <ng-container *ngIf="!tagsEditMode">
                                     <ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
                                         <div
-                                            class="flex items-center h-10 min-h-10 px-4 cursor-pointer hover:bg-hover"
+                                            class="flex items-center h-10 min-h-10 pl-1 pr-4 cursor-pointer hover:bg-hover"
                                             (click)="toggleTaskTag(tag)"
                                             matRipple>
                                             <mat-checkbox
@@ -162,7 +164,9 @@
                                     <div class="py-2 space-y-2">
                                         <ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
                                             <div class="flex items-center">
-                                                <mat-form-field class="fuse-mat-dense fuse-mat-no-subscript w-full mx-4">
+                                                <mat-form-field
+                                                    class="fuse-mat-dense w-full mx-4"
+                                                    [subscriptSizing]="'dynamic'">
                                                     <input
                                                         matInput
                                                         [value]="tag.title"
@@ -293,7 +297,9 @@
                         <ng-container *ngIf="task.dueDate">{{task.dueDate | date:'longDate'}}</ng-container>
                         <ng-container *ngIf="!task.dueDate">Not set</ng-container>
                     </span>
-                    <mat-form-field class="fuse-mat-no-subscript fuse-mat-dense invisible absolute inset-0 -mt-2.5 opacity-0 pointer-events-none">
+                    <mat-form-field
+                        class="fuse-mat-dense invisible absolute inset-0 -mt-2.5 opacity-0 pointer-events-none"
+                        [subscriptSizing]="'dynamic'">
                         <input
                             matInput
                             [formControlName]="'dueDate'"
@@ -321,13 +327,15 @@
 
         <!-- Notes -->
         <div class="mt-8">
-            <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
+            <mat-form-field
+                class="w-full"
+                [subscriptSizing]="'dynamic'">
                 <mat-label>Notes</mat-label>
                 <textarea
                     matInput
                     [formControlName]="'notes'"
                     [spellcheck]="false"
-                    matTextareaAutosize></textarea>
+                    cdkTextareaAutosize></textarea>
             </mat-form-field>
         </div>
 
diff --git a/src/app/modules/admin/dashboards/crypto/crypto.component.html b/src/app/modules/admin/dashboards/crypto/crypto.component.html
index fa37fb2b..795b07bb 100644
--- a/src/app/modules/admin/dashboards/crypto/crypto.component.html
+++ b/src/app/modules/admin/dashboards/crypto/crypto.component.html
@@ -55,20 +55,10 @@
                     <div class="flex flex-col px-6 pb-2">
                         <mat-form-field>
                             <mat-label>Action</mat-label>
-                            <span
-                                class="flex items-center justify-center"
-                                matPrefix>
-                                <ng-container *ngIf="buySellSelect.value === 'buy'">
-                                    <mat-icon
-                                        class="icon-size-5"
-                                        [svgIcon]="'heroicons_solid:download'"></mat-icon>
-                                </ng-container>
-                                <ng-container *ngIf="buySellSelect.value === 'sell'">
-                                    <mat-icon
-                                        class="icon-size-5"
-                                        [svgIcon]="'heroicons_solid:upload'"></mat-icon>
-                                </ng-container>
-                            </span>
+                            <mat-icon
+                                class="icon-size-5"
+                                [svgIcon]="buySellSelect.value === 'buy' ? 'heroicons_solid:download' : 'heroicons_solid:upload'"
+                                matPrefix></mat-icon>
                             <mat-select
                                 [value]="'buy'"
                                 #buySellSelect="matSelect">
diff --git a/src/app/modules/admin/dashboards/project/project.component.html b/src/app/modules/admin/dashboards/project/project.component.html
index 7cb46da2..262fbb7c 100644
--- a/src/app/modules/admin/dashboards/project/project.component.html
+++ b/src/app/modules/admin/dashboards/project/project.component.html
@@ -89,6 +89,7 @@
             <!-- Tabs -->
             <mat-tab-group
                 class="sm:px-2"
+                mat-stretch-tabs="false"
                 [animationDuration]="'0'">
 
                 <!-- Home -->
@@ -690,7 +691,13 @@
                 </mat-tab>
 
                 <!-- Team -->
-                <mat-tab label="Team">
+                <mat-tab>
+                    <ng-template mat-tab-label>
+                        <span class="inline-flex items-center space-x-2">
+                            <span class="">Team</span>
+                            <span class="px-2 py-1 text-sm rounded-full bg-primary-100 text-on-primary-100">9</span>
+                        </span>
+                    </ng-template>
                     <ng-template matTabContent>
                         <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 w-full min-w-0">
                             <ng-container *ngFor="let member of data.teamMembers">
diff --git a/src/app/modules/admin/pages/authentication/forgot-password/classic/forgot-password.component.html b/src/app/modules/admin/pages/authentication/forgot-password/classic/forgot-password.component.html
index f74f04d8..7ced1fa3 100644
--- a/src/app/modules/admin/pages/authentication/forgot-password/classic/forgot-password.component.html
+++ b/src/app/modules/admin/pages/authentication/forgot-password/classic/forgot-password.component.html
@@ -12,7 +12,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
diff --git a/src/app/modules/admin/pages/authentication/forgot-password/fullscreen-reversed/forgot-password.component.html b/src/app/modules/admin/pages/authentication/forgot-password/fullscreen-reversed/forgot-password.component.html
index a3e73210..1ce7295d 100644
--- a/src/app/modules/admin/pages/authentication/forgot-password/fullscreen-reversed/forgot-password.component.html
+++ b/src/app/modules/admin/pages/authentication/forgot-password/fullscreen-reversed/forgot-password.component.html
@@ -62,7 +62,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
diff --git a/src/app/modules/admin/pages/authentication/forgot-password/fullscreen/forgot-password.component.html b/src/app/modules/admin/pages/authentication/forgot-password/fullscreen/forgot-password.component.html
index 99f95986..38932222 100644
--- a/src/app/modules/admin/pages/authentication/forgot-password/fullscreen/forgot-password.component.html
+++ b/src/app/modules/admin/pages/authentication/forgot-password/fullscreen/forgot-password.component.html
@@ -12,7 +12,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
diff --git a/src/app/modules/admin/pages/authentication/forgot-password/split-screen-reversed/forgot-password.component.html b/src/app/modules/admin/pages/authentication/forgot-password/split-screen-reversed/forgot-password.component.html
index e619dd12..0bef7828 100644
--- a/src/app/modules/admin/pages/authentication/forgot-password/split-screen-reversed/forgot-password.component.html
+++ b/src/app/modules/admin/pages/authentication/forgot-password/split-screen-reversed/forgot-password.component.html
@@ -62,7 +62,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
diff --git a/src/app/modules/admin/pages/authentication/forgot-password/split-screen/forgot-password.component.html b/src/app/modules/admin/pages/authentication/forgot-password/split-screen/forgot-password.component.html
index 4137a1c4..1b1b5927 100644
--- a/src/app/modules/admin/pages/authentication/forgot-password/split-screen/forgot-password.component.html
+++ b/src/app/modules/admin/pages/authentication/forgot-password/split-screen/forgot-password.component.html
@@ -12,7 +12,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
diff --git a/src/app/modules/admin/pages/authentication/reset-password/classic/reset-password.component.html b/src/app/modules/admin/pages/authentication/reset-password/classic/reset-password.component.html
index 7e1beff8..df1a919f 100644
--- a/src/app/modules/admin/pages/authentication/reset-password/classic/reset-password.component.html
+++ b/src/app/modules/admin/pages/authentication/reset-password/classic/reset-password.component.html
@@ -12,7 +12,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
diff --git a/src/app/modules/admin/pages/authentication/reset-password/fullscreen-reversed/reset-password.component.html b/src/app/modules/admin/pages/authentication/reset-password/fullscreen-reversed/reset-password.component.html
index e9544c3c..01c9e697 100644
--- a/src/app/modules/admin/pages/authentication/reset-password/fullscreen-reversed/reset-password.component.html
+++ b/src/app/modules/admin/pages/authentication/reset-password/fullscreen-reversed/reset-password.component.html
@@ -62,7 +62,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
diff --git a/src/app/modules/admin/pages/authentication/reset-password/fullscreen/reset-password.component.html b/src/app/modules/admin/pages/authentication/reset-password/fullscreen/reset-password.component.html
index 980cd2e4..8be8fe66 100644
--- a/src/app/modules/admin/pages/authentication/reset-password/fullscreen/reset-password.component.html
+++ b/src/app/modules/admin/pages/authentication/reset-password/fullscreen/reset-password.component.html
@@ -12,7 +12,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
diff --git a/src/app/modules/admin/pages/authentication/reset-password/split-screen-reversed/reset-password.component.html b/src/app/modules/admin/pages/authentication/reset-password/split-screen-reversed/reset-password.component.html
index 5ad41d0c..350d272a 100644
--- a/src/app/modules/admin/pages/authentication/reset-password/split-screen-reversed/reset-password.component.html
+++ b/src/app/modules/admin/pages/authentication/reset-password/split-screen-reversed/reset-password.component.html
@@ -62,7 +62,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
diff --git a/src/app/modules/admin/pages/authentication/reset-password/split-screen/reset-password.component.html b/src/app/modules/admin/pages/authentication/reset-password/split-screen/reset-password.component.html
index c424027c..e86b01e9 100644
--- a/src/app/modules/admin/pages/authentication/reset-password/split-screen/reset-password.component.html
+++ b/src/app/modules/admin/pages/authentication/reset-password/split-screen/reset-password.component.html
@@ -12,7 +12,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
diff --git a/src/app/modules/admin/pages/authentication/sign-in/classic/sign-in.component.html b/src/app/modules/admin/pages/authentication/sign-in/classic/sign-in.component.html
index b3705f95..04013c61 100644
--- a/src/app/modules/admin/pages/authentication/sign-in/classic/sign-in.component.html
+++ b/src/app/modules/admin/pages/authentication/sign-in/classic/sign-in.component.html
@@ -18,7 +18,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
@@ -77,8 +77,9 @@
                 </mat-form-field>
 
                 <!-- Actions -->
-                <div class="inline-flex items-end justify-between w-full mt-1.5">
+                <div class="inline-flex items-center justify-between w-full mt-1.5">
                     <mat-checkbox
+                        class="-ml-2"
                         [color]="'primary'"
                         [formControlName]="'rememberMe'">
                         Remember me
diff --git a/src/app/modules/admin/pages/authentication/sign-in/fullscreen-reversed/sign-in.component.html b/src/app/modules/admin/pages/authentication/sign-in/fullscreen-reversed/sign-in.component.html
index 3d56820e..0c76a88e 100644
--- a/src/app/modules/admin/pages/authentication/sign-in/fullscreen-reversed/sign-in.component.html
+++ b/src/app/modules/admin/pages/authentication/sign-in/fullscreen-reversed/sign-in.component.html
@@ -68,7 +68,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
@@ -127,8 +127,9 @@
                 </mat-form-field>
 
                 <!-- Actions -->
-                <div class="inline-flex items-end justify-between w-full mt-1.5">
+                <div class="inline-flex items-center justify-between w-full mt-1.5">
                     <mat-checkbox
+                        class="-ml-2"
                         [color]="'primary'"
                         [formControlName]="'rememberMe'">
                         Remember me
diff --git a/src/app/modules/admin/pages/authentication/sign-in/fullscreen/sign-in.component.html b/src/app/modules/admin/pages/authentication/sign-in/fullscreen/sign-in.component.html
index c29522cf..9d4422b4 100644
--- a/src/app/modules/admin/pages/authentication/sign-in/fullscreen/sign-in.component.html
+++ b/src/app/modules/admin/pages/authentication/sign-in/fullscreen/sign-in.component.html
@@ -18,7 +18,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
@@ -77,8 +77,9 @@
                 </mat-form-field>
 
                 <!-- Actions -->
-                <div class="inline-flex items-end justify-between w-full mt-1.5">
+                <div class="inline-flex items-center justify-between w-full mt-1.5">
                     <mat-checkbox
+                        class="-ml-2"
                         [color]="'primary'"
                         [formControlName]="'rememberMe'">
                         Remember me
diff --git a/src/app/modules/admin/pages/authentication/sign-in/modern-reversed/sign-in.component.html b/src/app/modules/admin/pages/authentication/sign-in/modern-reversed/sign-in.component.html
index e4c4f088..d90d08ac 100644
--- a/src/app/modules/admin/pages/authentication/sign-in/modern-reversed/sign-in.component.html
+++ b/src/app/modules/admin/pages/authentication/sign-in/modern-reversed/sign-in.component.html
@@ -128,8 +128,9 @@
                     </mat-form-field>
 
                     <!-- Actions -->
-                    <div class="inline-flex items-end justify-between w-full mt-1.5">
+                    <div class="inline-flex items-center justify-between w-full mt-1.5">
                         <mat-checkbox
+                            class="-ml-2"
                             [color]="'primary'"
                             [formControlName]="'rememberMe'">
                             Remember me
diff --git a/src/app/modules/admin/pages/authentication/sign-in/modern/sign-in.component.html b/src/app/modules/admin/pages/authentication/sign-in/modern/sign-in.component.html
index ede32ff5..025cd98a 100644
--- a/src/app/modules/admin/pages/authentication/sign-in/modern/sign-in.component.html
+++ b/src/app/modules/admin/pages/authentication/sign-in/modern/sign-in.component.html
@@ -78,8 +78,9 @@
                     </mat-form-field>
 
                     <!-- Actions -->
-                    <div class="inline-flex items-end justify-between w-full mt-1.5">
+                    <div class="inline-flex items-center justify-between w-full mt-1.5">
                         <mat-checkbox
+                            class="-ml-2"
                             [color]="'primary'"
                             [formControlName]="'rememberMe'">
                             Remember me
diff --git a/src/app/modules/admin/pages/authentication/sign-in/split-screen-reversed/sign-in.component.html b/src/app/modules/admin/pages/authentication/sign-in/split-screen-reversed/sign-in.component.html
index a7440482..54a38bf9 100644
--- a/src/app/modules/admin/pages/authentication/sign-in/split-screen-reversed/sign-in.component.html
+++ b/src/app/modules/admin/pages/authentication/sign-in/split-screen-reversed/sign-in.component.html
@@ -68,7 +68,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
@@ -127,8 +127,9 @@
                 </mat-form-field>
 
                 <!-- Actions -->
-                <div class="inline-flex items-end justify-between w-full mt-1.5">
+                <div class="inline-flex items-center justify-between w-full mt-1.5">
                     <mat-checkbox
+                        class="-ml-2"
                         [color]="'primary'"
                         [formControlName]="'rememberMe'">
                         Remember me
diff --git a/src/app/modules/admin/pages/authentication/sign-in/split-screen/sign-in.component.html b/src/app/modules/admin/pages/authentication/sign-in/split-screen/sign-in.component.html
index 4d787bba..18abbca7 100644
--- a/src/app/modules/admin/pages/authentication/sign-in/split-screen/sign-in.component.html
+++ b/src/app/modules/admin/pages/authentication/sign-in/split-screen/sign-in.component.html
@@ -18,7 +18,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
@@ -77,8 +77,9 @@
                 </mat-form-field>
 
                 <!-- Actions -->
-                <div class="inline-flex items-end justify-between w-full mt-1.5">
+                <div class="inline-flex items-center justify-between w-full mt-1.5">
                     <mat-checkbox
+                        class="-ml-2"
                         [color]="'primary'"
                         [formControlName]="'rememberMe'">
                         Remember me
diff --git a/src/app/modules/admin/pages/authentication/sign-up/classic/sign-up.component.html b/src/app/modules/admin/pages/authentication/sign-up/classic/sign-up.component.html
index c4b82d1b..57081303 100644
--- a/src/app/modules/admin/pages/authentication/sign-up/classic/sign-up.component.html
+++ b/src/app/modules/admin/pages/authentication/sign-up/classic/sign-up.component.html
@@ -18,7 +18,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
@@ -99,12 +99,13 @@
                 <!-- ToS and PP -->
                 <div class="inline-flex items-end w-full mt-1.5">
                     <mat-checkbox
+                        class="-ml-2"
                         [color]="'primary'"
                         [formControlName]="'agreements'">
-                        <span>I agree to the</span>
+                        <span>I agree with</span>
                         <a
                             class="ml-1 text-primary-500 hover:underline"
-                            [routerLink]="['./']">Terms of Service
+                            [routerLink]="['./']">Terms
                         </a>
                         <span>and</span>
                         <a
diff --git a/src/app/modules/admin/pages/authentication/sign-up/fullscreen-reversed/sign-up.component.html b/src/app/modules/admin/pages/authentication/sign-up/fullscreen-reversed/sign-up.component.html
index b4c91707..650e3b07 100644
--- a/src/app/modules/admin/pages/authentication/sign-up/fullscreen-reversed/sign-up.component.html
+++ b/src/app/modules/admin/pages/authentication/sign-up/fullscreen-reversed/sign-up.component.html
@@ -68,7 +68,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
@@ -149,12 +149,13 @@
                 <!-- ToS and PP -->
                 <div class="inline-flex items-end w-full mt-1.5">
                     <mat-checkbox
+                        class="-ml-2"
                         [color]="'primary'"
                         [formControlName]="'agreements'">
-                        <span>I agree to the</span>
+                        <span>I agree with</span>
                         <a
                             class="ml-1 text-primary-500 hover:underline"
-                            [routerLink]="['./']">Terms of Service
+                            [routerLink]="['./']">Terms
                         </a>
                         <span>and</span>
                         <a
diff --git a/src/app/modules/admin/pages/authentication/sign-up/fullscreen/sign-up.component.html b/src/app/modules/admin/pages/authentication/sign-up/fullscreen/sign-up.component.html
index 87156d26..07ee6743 100644
--- a/src/app/modules/admin/pages/authentication/sign-up/fullscreen/sign-up.component.html
+++ b/src/app/modules/admin/pages/authentication/sign-up/fullscreen/sign-up.component.html
@@ -18,7 +18,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
@@ -99,12 +99,13 @@
                 <!-- ToS and PP -->
                 <div class="inline-flex items-end w-full mt-1.5">
                     <mat-checkbox
+                        class="-ml-2"
                         [color]="'primary'"
                         [formControlName]="'agreements'">
-                        <span>I agree to the</span>
+                        <span>I agree with</span>
                         <a
                             class="ml-1 text-primary-500 hover:underline"
-                            [routerLink]="['./']">Terms of Service
+                            [routerLink]="['./']">Terms
                         </a>
                         <span>and</span>
                         <a
diff --git a/src/app/modules/admin/pages/authentication/sign-up/modern-reversed/sign-up.component.html b/src/app/modules/admin/pages/authentication/sign-up/modern-reversed/sign-up.component.html
index 7cabef80..83fa63f0 100644
--- a/src/app/modules/admin/pages/authentication/sign-up/modern-reversed/sign-up.component.html
+++ b/src/app/modules/admin/pages/authentication/sign-up/modern-reversed/sign-up.component.html
@@ -150,12 +150,13 @@
                     <!-- ToS and PP -->
                     <div class="inline-flex items-end w-full mt-1.5">
                         <mat-checkbox
+                            class="-ml-2"
                             [color]="'primary'"
                             [formControlName]="'agreements'">
-                            <span>I agree to the</span>
+                            <span>I agree with</span>
                             <a
                                 class="ml-1 text-primary-500 hover:underline"
-                                [routerLink]="['./']">Terms of Service
+                                [routerLink]="['./']">Terms
                             </a>
                             <span>and</span>
                             <a
diff --git a/src/app/modules/admin/pages/authentication/sign-up/modern/sign-up.component.html b/src/app/modules/admin/pages/authentication/sign-up/modern/sign-up.component.html
index 20613a96..b98952ca 100644
--- a/src/app/modules/admin/pages/authentication/sign-up/modern/sign-up.component.html
+++ b/src/app/modules/admin/pages/authentication/sign-up/modern/sign-up.component.html
@@ -100,12 +100,13 @@
                     <!-- ToS and PP -->
                     <div class="inline-flex items-end w-full mt-1.5">
                         <mat-checkbox
+                            class="-ml-2"
                             [color]="'primary'"
                             [formControlName]="'agreements'">
-                            <span>I agree to the</span>
+                            <span>I agree with</span>
                             <a
                                 class="ml-1 text-primary-500 hover:underline"
-                                [routerLink]="['./']">Terms of Service
+                                [routerLink]="['./']">Terms
                             </a>
                             <span>and</span>
                             <a
diff --git a/src/app/modules/admin/pages/authentication/sign-up/split-screen-reversed/sign-up.component.html b/src/app/modules/admin/pages/authentication/sign-up/split-screen-reversed/sign-up.component.html
index 8360abfd..aaee4f41 100644
--- a/src/app/modules/admin/pages/authentication/sign-up/split-screen-reversed/sign-up.component.html
+++ b/src/app/modules/admin/pages/authentication/sign-up/split-screen-reversed/sign-up.component.html
@@ -68,7 +68,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
@@ -149,12 +149,13 @@
                 <!-- ToS and PP -->
                 <div class="inline-flex items-end w-full mt-1.5">
                     <mat-checkbox
+                        class="-ml-2"
                         [color]="'primary'"
                         [formControlName]="'agreements'">
-                        <span>I agree to the</span>
+                        <span>I agree with</span>
                         <a
                             class="ml-1 text-primary-500 hover:underline"
-                            [routerLink]="['./']">Terms of Service
+                            [routerLink]="['./']">Terms
                         </a>
                         <span>and</span>
                         <a
diff --git a/src/app/modules/admin/pages/authentication/sign-up/split-screen/sign-up.component.html b/src/app/modules/admin/pages/authentication/sign-up/split-screen/sign-up.component.html
index bbe0904d..1c4eccb4 100644
--- a/src/app/modules/admin/pages/authentication/sign-up/split-screen/sign-up.component.html
+++ b/src/app/modules/admin/pages/authentication/sign-up/split-screen/sign-up.component.html
@@ -18,7 +18,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
@@ -99,12 +99,13 @@
                 <!-- ToS and PP -->
                 <div class="inline-flex items-end w-full mt-1.5">
                     <mat-checkbox
+                        class="-ml-2"
                         [color]="'primary'"
                         [formControlName]="'agreements'">
-                        <span>I agree to the</span>
+                        <span>I agree with</span>
                         <a
                             class="ml-1 text-primary-500 hover:underline"
-                            [routerLink]="['./']">Terms of Service
+                            [routerLink]="['./']">Terms
                         </a>
                         <span>and</span>
                         <a
diff --git a/src/app/modules/admin/pages/authentication/unlock-session/classic/unlock-session.component.html b/src/app/modules/admin/pages/authentication/unlock-session/classic/unlock-session.component.html
index 9ceec621..6f9bc503 100644
--- a/src/app/modules/admin/pages/authentication/unlock-session/classic/unlock-session.component.html
+++ b/src/app/modules/admin/pages/authentication/unlock-session/classic/unlock-session.component.html
@@ -12,7 +12,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
diff --git a/src/app/modules/admin/pages/authentication/unlock-session/fullscreen-reversed/unlock-session.component.html b/src/app/modules/admin/pages/authentication/unlock-session/fullscreen-reversed/unlock-session.component.html
index e8a42f59..330e0b79 100644
--- a/src/app/modules/admin/pages/authentication/unlock-session/fullscreen-reversed/unlock-session.component.html
+++ b/src/app/modules/admin/pages/authentication/unlock-session/fullscreen-reversed/unlock-session.component.html
@@ -62,7 +62,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
diff --git a/src/app/modules/admin/pages/authentication/unlock-session/fullscreen/unlock-session.component.html b/src/app/modules/admin/pages/authentication/unlock-session/fullscreen/unlock-session.component.html
index 79413f3d..b7314f7c 100644
--- a/src/app/modules/admin/pages/authentication/unlock-session/fullscreen/unlock-session.component.html
+++ b/src/app/modules/admin/pages/authentication/unlock-session/fullscreen/unlock-session.component.html
@@ -12,7 +12,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
diff --git a/src/app/modules/admin/pages/authentication/unlock-session/split-screen-reversed/unlock-session.component.html b/src/app/modules/admin/pages/authentication/unlock-session/split-screen-reversed/unlock-session.component.html
index 9cc65ec7..0e270973 100644
--- a/src/app/modules/admin/pages/authentication/unlock-session/split-screen-reversed/unlock-session.component.html
+++ b/src/app/modules/admin/pages/authentication/unlock-session/split-screen-reversed/unlock-session.component.html
@@ -62,7 +62,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
diff --git a/src/app/modules/admin/pages/authentication/unlock-session/split-screen/unlock-session.component.html b/src/app/modules/admin/pages/authentication/unlock-session/split-screen/unlock-session.component.html
index 520a99e8..7b175305 100644
--- a/src/app/modules/admin/pages/authentication/unlock-session/split-screen/unlock-session.component.html
+++ b/src/app/modules/admin/pages/authentication/unlock-session/split-screen/unlock-session.component.html
@@ -12,7 +12,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
diff --git a/src/app/modules/admin/pages/coming-soon/classic/coming-soon.component.html b/src/app/modules/admin/pages/coming-soon/classic/coming-soon.component.html
index fa3d98f5..cf123748 100644
--- a/src/app/modules/admin/pages/coming-soon/classic/coming-soon.component.html
+++ b/src/app/modules/admin/pages/coming-soon/classic/coming-soon.component.html
@@ -14,7 +14,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
diff --git a/src/app/modules/admin/pages/coming-soon/fullscreen-reversed/coming-soon.component.html b/src/app/modules/admin/pages/coming-soon/fullscreen-reversed/coming-soon.component.html
index 32c2fc11..b1cfb636 100644
--- a/src/app/modules/admin/pages/coming-soon/fullscreen-reversed/coming-soon.component.html
+++ b/src/app/modules/admin/pages/coming-soon/fullscreen-reversed/coming-soon.component.html
@@ -64,7 +64,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
diff --git a/src/app/modules/admin/pages/coming-soon/fullscreen/coming-soon.component.html b/src/app/modules/admin/pages/coming-soon/fullscreen/coming-soon.component.html
index c92d934a..e6db3577 100644
--- a/src/app/modules/admin/pages/coming-soon/fullscreen/coming-soon.component.html
+++ b/src/app/modules/admin/pages/coming-soon/fullscreen/coming-soon.component.html
@@ -14,7 +14,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
diff --git a/src/app/modules/admin/pages/coming-soon/split-screen-reversed/coming-soon.component.html b/src/app/modules/admin/pages/coming-soon/split-screen-reversed/coming-soon.component.html
index 2569d98d..83ba7ed3 100644
--- a/src/app/modules/admin/pages/coming-soon/split-screen-reversed/coming-soon.component.html
+++ b/src/app/modules/admin/pages/coming-soon/split-screen-reversed/coming-soon.component.html
@@ -64,7 +64,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
diff --git a/src/app/modules/admin/pages/coming-soon/split-screen/coming-soon.component.html b/src/app/modules/admin/pages/coming-soon/split-screen/coming-soon.component.html
index d37d3261..fc5079cf 100644
--- a/src/app/modules/admin/pages/coming-soon/split-screen/coming-soon.component.html
+++ b/src/app/modules/admin/pages/coming-soon/split-screen/coming-soon.component.html
@@ -14,7 +14,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
diff --git a/src/app/modules/admin/pages/profile/profile.component.html b/src/app/modules/admin/pages/profile/profile.component.html
index bc832e1e..3b1b210d 100644
--- a/src/app/modules/admin/pages/profile/profile.component.html
+++ b/src/app/modules/admin/pages/profile/profile.component.html
@@ -538,12 +538,14 @@
                             alt="Card cover image">
                         <div class="sm:hidden">Brian Hughes</div>
                     </div>
-                    <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
+                    <mat-form-field
+                        class="w-full"
+                        [subscriptSizing]="'dynamic'">
                         <textarea
                             matInput
                             [placeholder]="'What\'s on your mind?'"
                             [rows]="3"
-                            matTextareaAutosize></textarea>
+                            cdkTextareaAutosize></textarea>
                     </mat-form-field>
                 </div>
                 <div class="flex items-center mt-6 sm:mt-8 -mx-3">
@@ -551,25 +553,25 @@
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                             [svgIcon]="'heroicons_solid:photograph'"></mat-icon>
-                        <span>Photo / Video</span>
+                        <span class="ml-2">Photo / Video</span>
                     </button>
                     <button
                         class="px-3 mr-1 hidden sm:inline-flex"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                             [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
-                        <span>Tag Friends</span>
+                        <span class="ml-2">Tag Friends</span>
                     </button>
                     <button
                         class="px-3 mr-1 hidden sm:inline-flex"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                             [svgIcon]="'heroicons_solid:emoji-happy'"></mat-icon>
-                        <span>Feeling</span>
+                        <span class="ml-2">Feeling</span>
                     </button>
                     <button
                         class="px-3"
@@ -723,25 +725,25 @@
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 text-red-500 mr-2"
+                            class="icon-size-5 text-red-500"
                             [svgIcon]="'heroicons_solid:heart'"></mat-icon>
-                        <span>Unlike</span>
+                        <span class="ml-2">Unlike</span>
                     </button>
                     <button
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                             [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
-                        <span>Comment</span>
+                        <span class="ml-2">Comment</span>
                     </button>
                     <button
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                             [svgIcon]="'heroicons_solid:share'"></mat-icon>
-                        <span>Share</span>
+                        <span class="ml-2">Share</span>
                     </button>
                 </div>
                 <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@@ -793,12 +795,14 @@
                                 class="w-12 h-12 rounded-full mr-5"
                                 src="assets/images/avatars/brian-hughes.jpg"
                                 alt="Card cover image">
-                            <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
+                            <mat-form-field
+                                class="w-full"
+                                [subscriptSizing]="'dynamic'">
                                 <textarea
                                     matInput
                                     [placeholder]="'Write a comment...'"
                                     [rows]="3"
-                                    matTextareaAutosize></textarea>
+                                    cdkTextareaAutosize></textarea>
                             </mat-form-field>
                         </div>
                         <div class="flex items-center mt-3 ml-auto -mr-3">
@@ -1070,25 +1074,25 @@
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 text-red-500 mr-2"
+                            class="icon-size-5 text-red-500"
                             [svgIcon]="'heroicons_solid:heart'"></mat-icon>
-                        <span>Unlike</span>
+                        <span class="ml-2">Unlike</span>
                     </button>
                     <button
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                             [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
-                        <span>Comment</span>
+                        <span class="ml-2">Comment</span>
                     </button>
                     <button
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                             [svgIcon]="'heroicons_solid:share'"></mat-icon>
-                        <span>Share</span>
+                        <span class="ml-2">Share</span>
                     </button>
                 </div>
                 <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@@ -1229,25 +1233,25 @@
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 text-red-500 mr-2"
+                            class="icon-size-5 text-red-500"
                             [svgIcon]="'heroicons_solid:heart'"></mat-icon>
-                        <span>Unlike</span>
+                        <span class="ml-2">Unlike</span>
                     </button>
                     <button
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                             [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
-                        <span>Comment</span>
+                        <span class="ml-2">Comment</span>
                     </button>
                     <button
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                             [svgIcon]="'heroicons_solid:share'"></mat-icon>
-                        <span>Share</span>
+                        <span class="ml-2">Share</span>
                     </button>
                 </div>
                 <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@@ -1383,25 +1387,25 @@
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 text-red-500 mr-2"
+                            class="icon-size-5 text-red-500"
                             [svgIcon]="'heroicons_solid:heart'"></mat-icon>
-                        <span>Unlike</span>
+                        <span class="ml-2">Unlike</span>
                     </button>
                     <button
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                             [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
-                        <span>Comment</span>
+                        <span class="ml-2">Comment</span>
                     </button>
                     <button
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                             [svgIcon]="'heroicons_solid:share'"></mat-icon>
-                        <span>Share</span>
+                        <span class="ml-2">Share</span>
                     </button>
                 </div>
                 <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@@ -1534,25 +1538,25 @@
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 text-red-500 mr-2"
+                            class="icon-size-5 text-red-500"
                             [svgIcon]="'heroicons_solid:heart'"></mat-icon>
-                        <span>Unlike</span>
+                        <span class="ml-2">Unlike</span>
                     </button>
                     <button
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                             [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
-                        <span>Comment</span>
+                        <span class="ml-2">Comment</span>
                     </button>
                     <button
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                             [svgIcon]="'heroicons_solid:share'"></mat-icon>
-                        <span>Share</span>
+                        <span class="ml-2">Share</span>
                     </button>
                 </div>
                 <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@@ -1688,25 +1692,25 @@
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 text-red-500 mr-2"
+                            class="icon-size-5 text-red-500"
                             [svgIcon]="'heroicons_solid:heart'"></mat-icon>
-                        <span>Unlike</span>
+                        <span class="ml-2">Unlike</span>
                     </button>
                     <button
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                             [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
-                        <span>Comment</span>
+                        <span class="ml-2">Comment</span>
                     </button>
                     <button
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                             [svgIcon]="'heroicons_solid:share'"></mat-icon>
-                        <span>Share</span>
+                        <span class="ml-2">Share</span>
                     </button>
                 </div>
                 <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
diff --git a/src/app/modules/admin/pages/settings/account/account.component.html b/src/app/modules/admin/pages/settings/account/account.component.html
index 9f0f2d86..a45195bb 100644
--- a/src/app/modules/admin/pages/settings/account/account.component.html
+++ b/src/app/modules/admin/pages/settings/account/account.component.html
@@ -11,7 +11,9 @@
         <div class="grid sm:grid-cols-4 gap-6 w-full mt-8">
             <!-- Name -->
             <div class="sm:col-span-4">
-                <mat-form-field class="fuse-mat-no-subscript w-full">
+                <mat-form-field
+                    class="w-full"
+                    [subscriptSizing]="'dynamic'">
                     <mat-label>Name</mat-label>
                     <mat-icon
                         class="icon-size-5"
@@ -24,7 +26,9 @@
             </div>
             <!-- Username -->
             <div class="sm:col-span-4">
-                <mat-form-field class="fuse-mat-no-subscript fuse-mat-emphasized-affix w-full">
+                <mat-form-field
+                    class="fuse-mat-emphasized-affix w-full"
+                    [subscriptSizing]="'dynamic'">
                     <mat-label>Username</mat-label>
                     <div
                         class="text-secondary"
@@ -38,7 +42,9 @@
             </div>
             <!-- Title -->
             <div class="sm:col-span-2">
-                <mat-form-field class="fuse-mat-no-subscript w-full">
+                <mat-form-field
+                    class="w-full"
+                    [subscriptSizing]="'dynamic'">
                     <mat-label>Title</mat-label>
                     <mat-icon
                         class="icon-size-5"
@@ -51,7 +57,9 @@
             </div>
             <!-- Company -->
             <div class="sm:col-span-2">
-                <mat-form-field class="fuse-mat-no-subscript w-full">
+                <mat-form-field
+                    class="w-full"
+                    [subscriptSizing]="'dynamic'">
                     <mat-label>Company</mat-label>
                     <mat-icon
                         class="icon-size-5"
@@ -64,7 +72,9 @@
             </div>
             <!-- About -->
             <div class="sm:col-span-4">
-                <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
+                <mat-form-field
+                    class="w-full"
+                    [subscriptSizing]="'dynamic'">
                     <mat-label>About</mat-label>
                     <textarea
                         matInput
@@ -87,7 +97,9 @@
         <div class="grid sm:grid-cols-4 gap-6 w-full mt-8">
             <!-- Email -->
             <div class="sm:col-span-2">
-                <mat-form-field class="fuse-mat-no-subscript w-full">
+                <mat-form-field
+                    class="w-full"
+                    [subscriptSizing]="'dynamic'">
                     <mat-label>Email</mat-label>
                     <mat-icon
                         class="icon-size-5"
@@ -100,7 +112,9 @@
             </div>
             <!-- Phone -->
             <div class="sm:col-span-2">
-                <mat-form-field class="fuse-mat-no-subscript w-full">
+                <mat-form-field
+                    class="w-full"
+                    [subscriptSizing]="'dynamic'">
                     <mat-label>Phone</mat-label>
                     <mat-icon
                         class="icon-size-5"
@@ -113,7 +127,9 @@
             </div>
             <!-- Country -->
             <div class="sm:col-span-2">
-                <mat-form-field class="fuse-mat-no-subscript w-full">
+                <mat-form-field
+                    class="w-full"
+                    [subscriptSizing]="'dynamic'">
                     <mat-label>Country</mat-label>
                     <mat-icon
                         class="icon-size-5"
@@ -131,7 +147,9 @@
             </div>
             <!-- Language -->
             <div class="sm:col-span-2">
-                <mat-form-field class="fuse-mat-no-subscript w-full">
+                <mat-form-field
+                    class="w-full"
+                    [subscriptSizing]="'dynamic'">
                     <mat-label>Language</mat-label>
                     <mat-icon
                         class="icon-size-5"
diff --git a/src/app/modules/admin/pages/settings/plan-billing/plan-billing.component.html b/src/app/modules/admin/pages/settings/plan-billing/plan-billing.component.html
index fa3f9708..a27b930e 100644
--- a/src/app/modules/admin/pages/settings/plan-billing/plan-billing.component.html
+++ b/src/app/modules/admin/pages/settings/plan-billing/plan-billing.component.html
@@ -35,7 +35,7 @@
                             class="absolute top-0 right-0 mt-3 mr-3 icon-size-7 text-primary"
                             [svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
                     </ng-container>
-                    <div class="font-medium">{{plan.label}}</div>
+                    <div class="font-semibold">{{plan.label}}</div>
                     <div class="mt-1 whitespace-normal text-secondary">{{plan.details}}</div>
                     <div class="flex-auto"></div>
                     <div class="mt-8 text-lg">
@@ -57,7 +57,9 @@
         <div class="grid grid-cols-4 gap-6 w-full mt-8">
             <!-- Card holder -->
             <div class="col-span-4">
-                <mat-form-field class="fuse-mat-no-subscript w-full">
+                <mat-form-field
+                    class="w-full"
+                    [subscriptSizing]="'dynamic'">
                     <mat-label>Card holder</mat-label>
                     <mat-icon
                         class="icon-size-5"
@@ -70,7 +72,9 @@
             </div>
             <!-- Card number -->
             <div class="col-span-4 sm:col-span-2">
-                <mat-form-field class="fuse-mat-no-subscript w-full">
+                <mat-form-field
+                    class="w-full"
+                    [subscriptSizing]="'dynamic'">
                     <mat-label>Card number</mat-label>
                     <mat-icon
                         class="icon-size-5"
@@ -84,8 +88,8 @@
             <!-- Card expiration -->
             <div class="col-span-2 sm:col-span-1">
                 <mat-form-field
-                    class="fuse-mat-no-subscript w-full"
-                    [floatLabel]="'always'">
+                    class="w-full"
+                    [subscriptSizing]="'dynamic'">
                     <mat-label>Expiration date</mat-label>
                     <mat-icon
                         class="icon-size-5"
@@ -99,7 +103,9 @@
             </div>
             <!-- Card CVC -->
             <div class="col-span-2 sm:col-span-1">
-                <mat-form-field class="fuse-mat-no-subscript w-full">
+                <mat-form-field
+                    class="w-full"
+                    [subscriptSizing]="'dynamic'">
                     <mat-label>CVC / CVC2</mat-label>
                     <mat-icon
                         class="icon-size-5"
@@ -112,7 +118,9 @@
             </div>
             <!-- Country -->
             <div class="col-span-4 sm:col-span-2">
-                <mat-form-field class="fuse-mat-no-subscript w-full">
+                <mat-form-field
+                    class="w-full"
+                    [subscriptSizing]="'dynamic'">
                     <mat-label>Country</mat-label>
                     <mat-icon
                         class="icon-size-5"
@@ -130,7 +138,9 @@
             </div>
             <!-- ZIP -->
             <div class="col-span-4 sm:col-span-2">
-                <mat-form-field class="fuse-mat-no-subscript w-full">
+                <mat-form-field
+                    class="w-full"
+                    [subscriptSizing]="'dynamic'">
                     <mat-label>ZIP / Postal code</mat-label>
                     <mat-icon
                         class="icon-size-5"
diff --git a/src/app/modules/admin/pages/settings/security/security.component.html b/src/app/modules/admin/pages/settings/security/security.component.html
index edb50b86..a3ff3496 100644
--- a/src/app/modules/admin/pages/settings/security/security.component.html
+++ b/src/app/modules/admin/pages/settings/security/security.component.html
@@ -11,7 +11,9 @@
         <div class="grid sm:grid-cols-4 gap-6 w-full mt-8">
             <!-- Current password -->
             <div class="sm:col-span-4">
-                <mat-form-field class="fuse-mat-no-subscript w-full">
+                <mat-form-field
+                    class="w-full"
+                    [subscriptSizing]="'dynamic'">
                     <mat-label>Current password</mat-label>
                     <mat-icon
                         class="icon-size-5"
@@ -25,7 +27,9 @@
             </div>
             <!-- New password -->
             <div class="sm:col-span-4">
-                <mat-form-field class="fuse-mat-no-subscript w-full">
+                <mat-form-field
+                    class="w-full"
+                    [subscriptSizing]="'dynamic'">
                     <mat-label>New password</mat-label>
                     <mat-icon
                         class="icon-size-5"
diff --git a/src/app/modules/admin/pages/settings/team/team.component.html b/src/app/modules/admin/pages/settings/team/team.component.html
index eebdfdc5..d5df26fb 100644
--- a/src/app/modules/admin/pages/settings/team/team.component.html
+++ b/src/app/modules/admin/pages/settings/team/team.component.html
@@ -3,8 +3,8 @@
     <!-- Add team member -->
     <div class="w-full">
         <mat-form-field
-            class="fuse-mat-no-subscript w-full"
-            [floatLabel]="'always'">
+            class="w-full"
+            [subscriptSizing]="'dynamic'">
             <mat-label>Add team members</mat-label>
             <mat-icon
                 class="icon-size-5"
@@ -48,7 +48,9 @@
                 </div>
                 <div class="flex items-center mt-4 sm:mt-0 sm:ml-auto">
                     <div class="order-2 sm:order-1 ml-4 sm:ml-0">
-                        <mat-form-field class="fuse-mat-dense fuse-mat-no-subscript w-32">
+                        <mat-form-field
+                            class="fuse-mat-dense w-32"
+                            [subscriptSizing]="'dynamic'">
                             <mat-select
                                 [panelClass]="'w-72 min-w-72 max-w-72 h-auto max-h-none'"
                                 [value]="member.role"
diff --git a/src/app/modules/admin/ui/advanced-search/advanced-search.component.html b/src/app/modules/admin/ui/advanced-search/advanced-search.component.html
index 318f0387..11611e75 100644
--- a/src/app/modules/admin/ui/advanced-search/advanced-search.component.html
+++ b/src/app/modules/admin/ui/advanced-search/advanced-search.component.html
@@ -44,7 +44,9 @@
                 [formGroup]="searchForm">
 
                 <!-- Keywords -->
-                <mat-form-field class="fuse-mat-no-subscript w-full">
+                <mat-form-field
+                    class="w-full"
+                    [subscriptSizing]="'dynamic'">
                     <mat-label>Keywords</mat-label>
                     <input
                         [autocomplete]="'off'"
@@ -53,7 +55,9 @@
                 </mat-form-field>
 
                 <!-- Type -->
-                <mat-form-field class="fuse-mat-no-subscript w-full">
+                <mat-form-field
+                    class="w-full"
+                    [subscriptSizing]="'dynamic'">
                     <mat-label>Type</mat-label>
                     <mat-select [formControlName]="'type'">
                         <mat-option [value]="'any'">Any</mat-option>
@@ -62,7 +66,7 @@
                     </mat-select>
                 </mat-form-field>
 
-                <div class="flex items-center space-x-8">
+                <div class="flex flex-col items-start -ml-2">
                     <!-- In trash -->
                     <mat-checkbox
                         [color]="'primary'"
diff --git a/src/app/modules/admin/ui/animations/animations.component.html b/src/app/modules/admin/ui/animations/animations.component.html
index 50308dc7..9819fd89 100644
--- a/src/app/modules/admin/ui/animations/animations.component.html
+++ b/src/app/modules/admin/ui/animations/animations.component.html
@@ -265,7 +265,7 @@
             <p>
                 The animation can be disabled by setting the state to <b>false</b>; <code>[@fadeIn]="false"</code>
             </p>
-            <mat-form-field class="fuse-mat-no-subscript">
+            <mat-form-field [subscriptSizing]="'dynamic'">
                 <mat-label>Direction</mat-label>
                 <mat-select
                     [value]="'in'"
@@ -698,7 +698,7 @@
             <p>
                 The animation can be disabled by setting the state to <b>false</b>; <code>[@fadeOut]="false"</code>
             </p>
-            <mat-form-field class="fuse-mat-no-subscript">
+            <mat-form-field [subscriptSizing]="'dynamic'">
                 <mat-label>Direction</mat-label>
                 <mat-select
                     [value]="'out'"
@@ -1131,7 +1131,7 @@
             <p>
                 The animation can be disabled by setting the state to <b>false</b>; <code>[@slideIn]="false"</code>
             </p>
-            <mat-form-field class="fuse-mat-no-subscript">
+            <mat-form-field [subscriptSizing]="'dynamic'">
                 <mat-label>Direction</mat-label>
                 <mat-select
                     [value]="'top'"
@@ -1483,7 +1483,7 @@
             <p>
                 The animation can be disabled by setting the state to <b>false</b>; <code>[@slideOut]="false"</code>
             </p>
-            <mat-form-field class="fuse-mat-no-subscript">
+            <mat-form-field [subscriptSizing]="'dynamic'">
                 <mat-label>Direction</mat-label>
                 <mat-select
                     [value]="'top'"
diff --git a/src/app/modules/admin/ui/animations/animations.component.scss b/src/app/modules/admin/ui/animations/animations.component.scss
index 3ff05f93..992d6255 100644
--- a/src/app/modules/admin/ui/animations/animations.component.scss
+++ b/src/app/modules/admin/ui/animations/animations.component.scss
@@ -1,24 +1,24 @@
 animations {
 
-    .mat-form-field {
+    .mat-mdc-form-field {
         width: 100%;
         margin-top: 32px;
     }
 
-    mat-tab-group {
+    .mat-mdc-tab-group {
 
-        .mat-tab-header {
+        .mat-mdc-tab-header {
             padding: 24px 0;
             border-top-width: 1px;
         }
 
-        .mat-tab-body-wrapper {
+        .mat-mdc-tab-body-wrapper {
 
-            .mat-tab-body {
+            .mat-mdc-tab-body {
 
                 &:first-child {
 
-                    .mat-tab-body-content {
+                    .mat-mdc-tab-body-content {
                         display: flex;
                         justify-content: center;
                         min-height: 200px;
diff --git a/src/app/modules/admin/ui/cards/cards.component.html b/src/app/modules/admin/ui/cards/cards.component.html
index fec19089..f583a6bb 100644
--- a/src/app/modules/admin/ui/cards/cards.component.html
+++ b/src/app/modules/admin/ui/cards/cards.component.html
@@ -1042,7 +1042,7 @@
                     <span class="w-3 h-3 border-2 border-blue-500 rounded-full mr-3"></span>
                     <span class="font-medium text-secondary">USER INTERFACE (5)</span>
                 </div>
-                <div class="flex flex-col mt-2 ml-6">
+                <div class="flex flex-col mt-2 ml-4">
                     <mat-checkbox
                         class="my-1"
                         [color]="'primary'">
@@ -1075,7 +1075,7 @@
                     <span class="w-3 h-3 border-2 border-green-500 rounded-full mr-3"></span>
                     <span class="font-medium text-secondary">DESIGN SYSTEM (3)</span>
                 </div>
-                <div class="flex flex-col mt-2 ml-6">
+                <div class="flex flex-col mt-2 ml-4">
                     <mat-checkbox
                         class="my-1"
                         [color]="'primary'"
@@ -2169,12 +2169,14 @@
                             alt="Card cover image">
                         <div class="sm:hidden">Brian Hughes</div>
                     </div>
-                    <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
+                    <mat-form-field
+                        class="w-full"
+                        [subscriptSizing]="'dynamic'">
                         <textarea
                             matInput
                             [placeholder]="'What\'s on your mind?'"
                             [rows]="3"
-                            matTextareaAutosize></textarea>
+                            cdkTextareaAutosize></textarea>
                     </mat-form-field>
                 </div>
                 <div class="flex items-center mt-6 sm:mt-8 -mx-3">
@@ -2182,25 +2184,25 @@
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                             [svgIcon]="'heroicons_solid:photograph'"></mat-icon>
-                        <span>Photo / Video</span>
+                        <span class="ml-2">Photo / Video</span>
                     </button>
                     <button
                         class="px-3 mr-1 hidden sm:inline-flex"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                             [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
-                        <span>Tag Friends</span>
+                        <span class="ml-2">Tag Friends</span>
                     </button>
                     <button
                         class="px-3 mr-1 hidden sm:inline-flex"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                             [svgIcon]="'heroicons_solid:emoji-happy'"></mat-icon>
-                        <span>Feeling</span>
+                        <span class="ml-2">Feeling</span>
                     </button>
                     <button
                         class="px-3"
@@ -2355,25 +2357,25 @@
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 text-red-500 mr-2"
+                            class="icon-size-5 text-red-500"
                             [svgIcon]="'heroicons_solid:heart'"></mat-icon>
-                        <span>Unlike</span>
+                        <span class="ml-2">Unlike</span>
                     </button>
                     <button
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                             [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
-                        <span>Comment</span>
+                        <span class="ml-2">Comment</span>
                     </button>
                     <button
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                             [svgIcon]="'heroicons_solid:share'"></mat-icon>
-                        <span>Share</span>
+                        <span class="ml-2">Share</span>
                     </button>
                 </div>
                 <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@@ -2425,12 +2427,14 @@
                                 class="w-12 h-12 rounded-full mr-5"
                                 src="assets/images/avatars/brian-hughes.jpg"
                                 alt="Card cover image">
-                            <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
+                            <mat-form-field
+                                class="w-full"
+                                [subscriptSizing]="'dynamic'">
                                 <textarea
                                     matInput
                                     [rows]="3"
                                     [placeholder]="'Write a comment...'"
-                                    matTextareaAutosize></textarea>
+                                    cdkTextareaAutosize></textarea>
                             </mat-form-field>
                         </div>
                         <div class="flex items-center mt-3 ml-auto -mr-3">
@@ -2709,25 +2713,25 @@
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 text-red-500 mr-2"
+                            class="icon-size-5 text-red-500"
                             [svgIcon]="'heroicons_solid:heart'"></mat-icon>
-                        <span>Unlike</span>
+                        <span class="ml-2">Unlike</span>
                     </button>
                     <button
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                             [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
-                        <span>Comment</span>
+                        <span class="ml-2">Comment</span>
                     </button>
                     <button
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                             [svgIcon]="'heroicons_solid:share'"></mat-icon>
-                        <span>Share</span>
+                        <span class="ml-2">Share</span>
                     </button>
                 </div>
                 <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@@ -2869,25 +2873,25 @@
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 text-red-500 mr-2"
+                            class="icon-size-5 text-red-500"
                             [svgIcon]="'heroicons_solid:heart'"></mat-icon>
-                        <span>Unlike</span>
+                        <span class="ml-2">Unlike</span>
                     </button>
                     <button
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                             [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
-                        <span>Comment</span>
+                        <span class="ml-2">Comment</span>
                     </button>
                     <button
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                             [svgIcon]="'heroicons_solid:share'"></mat-icon>
-                        <span>Share</span>
+                        <span class="ml-2">Share</span>
                     </button>
                 </div>
                 <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@@ -3037,25 +3041,25 @@
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 text-red-500 mr-2"
+                            class="icon-size-5 text-red-500"
                             [svgIcon]="'heroicons_solid:heart'"></mat-icon>
-                        <span>Unlike</span>
+                        <span class="ml-2">Unlike</span>
                     </button>
                     <button
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                             [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
-                        <span>Comment</span>
+                        <span class="ml-2">Comment</span>
                     </button>
                     <button
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                             [svgIcon]="'heroicons_solid:share'"></mat-icon>
-                        <span>Share</span>
+                        <span class="ml-2">Share</span>
                     </button>
                 </div>
                 <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@@ -3211,25 +3215,25 @@
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 text-red-500 mr-2"
+                            class="icon-size-5 text-red-500"
                             [svgIcon]="'heroicons_solid:heart'"></mat-icon>
-                        <span>Unlike</span>
+                        <span class="ml-2">Unlike</span>
                     </button>
                     <button
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                             [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
-                        <span>Comment</span>
+                        <span class="ml-2">Comment</span>
                     </button>
                     <button
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                             [svgIcon]="'heroicons_solid:share'"></mat-icon>
-                        <span>Share</span>
+                        <span class="ml-2">Share</span>
                     </button>
                 </div>
                 <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@@ -3389,25 +3393,25 @@
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 text-red-500 mr-2"
+                            class="icon-size-5 text-red-500"
                             [svgIcon]="'heroicons_solid:heart'"></mat-icon>
-                        <span>Unlike</span>
+                        <span class="ml-2">Unlike</span>
                     </button>
                     <button
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                             [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
-                        <span>Comment</span>
+                        <span class="ml-2">Comment</span>
                     </button>
                     <button
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                             [svgIcon]="'heroicons_solid:share'"></mat-icon>
-                        <span>Share</span>
+                        <span class="ml-2">Share</span>
                     </button>
                 </div>
                 <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@@ -3535,25 +3539,25 @@
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 text-red-500 mr-2"
+                            class="icon-size-5 text-red-500"
                             [svgIcon]="'heroicons_solid:heart'"></mat-icon>
-                        <span>Unlike</span>
+                        <span class="ml-2">Unlike</span>
                     </button>
                     <button
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                             [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
-                        <span>Comment</span>
+                        <span class="ml-2">Comment</span>
                     </button>
                     <button
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                             [svgIcon]="'heroicons_solid:share'"></mat-icon>
-                        <span>Share</span>
+                        <span class="ml-2">Share</span>
                     </button>
                 </div>
                 <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@@ -3690,25 +3694,25 @@
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 text-red-500 mr-2"
+                            class="icon-size-5 text-red-500"
                             [svgIcon]="'heroicons_solid:heart'"></mat-icon>
-                        <span>Unlike</span>
+                        <span class="ml-2">Unlike</span>
                     </button>
                     <button
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                             [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
-                        <span>Comment</span>
+                        <span class="ml-2">Comment</span>
                     </button>
                     <button
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                             [svgIcon]="'heroicons_solid:share'"></mat-icon>
-                        <span>Share</span>
+                        <span class="ml-2">Share</span>
                     </button>
                 </div>
                 <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@@ -3845,25 +3849,25 @@
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 text-red-500 mr-2"
+                            class="icon-size-5 text-red-500"
                             [svgIcon]="'heroicons_solid:heart'"></mat-icon>
-                        <span>Unlike</span>
+                        <span class="ml-2">Unlike</span>
                     </button>
                     <button
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                             [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
-                        <span>Comment</span>
+                        <span class="ml-2">Comment</span>
                     </button>
                     <button
                         class="px-3 mr-1"
                         mat-button>
                         <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                             [svgIcon]="'heroicons_solid:share'"></mat-icon>
-                        <span>Share</span>
+                        <span class="ml-2">Share</span>
                     </button>
                 </div>
                 <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@@ -3912,12 +3916,14 @@
                             class="w-12 h-12 rounded-full mr-5"
                             src="assets/images/avatars/brian-hughes.jpg"
                             alt="Card cover image">
-                        <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
+                        <mat-form-field
+                            class="w-full"
+                            [subscriptSizing]="'dynamic'">
                             <textarea
                                 class="leading-normal my-2"
                                 matInput
                                 [placeholder]="'Write a comment...'"
-                                matTextareaAutosize
+                                cdkTextareaAutosize
                                 [rows]="3"></textarea>
                         </mat-form-field>
                     </div>
diff --git a/src/app/modules/admin/ui/confirmation-dialog/confirmation-dialog.component.html b/src/app/modules/admin/ui/confirmation-dialog/confirmation-dialog.component.html
index a815ba47..f30e2a06 100644
--- a/src/app/modules/admin/ui/confirmation-dialog/confirmation-dialog.component.html
+++ b/src/app/modules/admin/ui/confirmation-dialog/confirmation-dialog.component.html
@@ -55,7 +55,9 @@
                         class="flex flex-col items-start">
 
                         <!-- Title -->
-                        <mat-form-field class="fuse-mat-no-subscript w-full">
+                        <mat-form-field
+                            class="w-full"
+                            [subscriptSizing]="'dynamic'">
                             <mat-label>Title</mat-label>
                             <input
                                 matInput
@@ -63,7 +65,9 @@
                         </mat-form-field>
 
                         <!-- Message -->
-                        <mat-form-field class="fuse-mat-no-subscript fuse-mat-textarea w-full mt-6">
+                        <mat-form-field
+                            class="w-full mt-6"
+                            [subscriptSizing]="'dynamic'">
                             <mat-label>Message</mat-label>
                             <textarea
                                 matInput
@@ -85,7 +89,9 @@
                             </mat-checkbox>
                             <div class="flex items-center w-full mt-6">
                                 <!-- Icon name -->
-                                <mat-form-field class="fuse-mat-no-subscript w-1/2 pr-2">
+                                <mat-form-field
+                                    class="w-1/2 pr-2"
+                                    [subscriptSizing]="'dynamic'">
                                     <mat-label>Icon name</mat-label>
                                     <input
                                         matInput
@@ -93,7 +99,9 @@
                                 </mat-form-field>
 
                                 <!-- Icon color -->
-                                <mat-form-field class="fuse-mat-no-subscript w-1/2 pl-2">
+                                <mat-form-field
+                                    class="w-1/2 pl-2"
+                                    [subscriptSizing]="'dynamic'">
                                     <mat-label>Icon color</mat-label>
                                     <mat-select [formControlName]="'color'">
                                         <ng-container *ngFor="let color of ['primary', 'accent', 'warn', 'basic', 'info', 'success', 'warning', 'error']">
@@ -123,7 +131,9 @@
                                 </mat-checkbox>
                                 <div class="flex items-center w-full mt-4">
                                     <!-- Confirm label -->
-                                    <mat-form-field class="fuse-mat-no-subscript w-1/2 pr-2">
+                                    <mat-form-field
+                                        class="w-1/2 pr-2"
+                                        [subscriptSizing]="'dynamic'">
                                         <mat-label>Confirm button label</mat-label>
                                         <input
                                             matInput
@@ -131,7 +141,9 @@
                                     </mat-form-field>
 
                                     <!-- Confirm color -->
-                                    <mat-form-field class="fuse-mat-no-subscript w-1/2 pl-2">
+                                    <mat-form-field
+                                        class="w-1/2 pl-2"
+                                        [subscriptSizing]="'dynamic'">
                                         <mat-label>Confirm button color</mat-label>
                                         <mat-select [formControlName]="'color'">
                                             <ng-container *ngFor="let color of ['primary', 'accent', 'warn']">
@@ -154,7 +166,9 @@
                                 </mat-checkbox>
                                 <div class="flex items-center w-full mt-4">
                                     <!-- Cancel label -->
-                                    <mat-form-field class="fuse-mat-no-subscript w-1/2 pr-2">
+                                    <mat-form-field
+                                        class="w-1/2 pr-2"
+                                        [subscriptSizing]="'dynamic'">
                                         <mat-label>Cancel button label</mat-label>
                                         <input
                                             matInput
diff --git a/src/app/modules/admin/ui/forms/fields/fields.component.html b/src/app/modules/admin/ui/forms/fields/fields.component.html
index c3075d1e..21cf42b7 100644
--- a/src/app/modules/admin/ui/forms/fields/fields.component.html
+++ b/src/app/modules/admin/ui/forms/fields/fields.component.html
@@ -66,12 +66,12 @@
                 <div class="flex">
                     <mat-form-field
                         [ngClass]="formFieldHelpers"
-                        class="fuse-mat-textarea flex-auto">
+                        class="flex-auto">
                         <mat-label>Address</mat-label>
                         <textarea
                             matInput
-                            [rows]="3"
-                            matTextareaAutosize></textarea>
+                            cdkTextareaAutosize
+                            [cdkAutosizeMinRows]="3"></textarea>
                         <mat-icon
                             class="icon-size-5"
                             matSuffix
@@ -142,8 +142,7 @@
                 </mat-form-field>
                 <mat-form-field
                     [ngClass]="formFieldHelpers"
-                    class="w-full"
-                    [floatLabel]="'always'">
+                    class="w-full">
                     <mat-label>Label and Placeholder</mat-label>
                     <input
                         matInput
@@ -159,35 +158,81 @@
                 </mat-form-field>
             </form>
 
+            <div class="prose prose-sm max-w-3xl">
+                <h2 class="mt-12">Subscript sizing</h2>
+                <p>
+                    Following form contains examples to showcase different subscript sizing methods. Focus on the inputs and then blur them
+                    to see how the <em>mat-error</em> acts differently in different cases.
+                </p>
+                <p>
+                    The best way of using Form Fields is to have <em>dynamic</em> subscript sizing with
+                    fixed spacing around the fields.
+                </p>
+            </div>
+
+            <form class="flex flex-col mt-8 p-8 pb-4 bg-card rounded-2xl shadow overflow-hidden">
+                <mat-form-field
+                    class="flex-auto"
+                    subscriptSizing="fixed">
+                    <mat-label>Fixed subscript sizing</mat-label>
+                    <input
+                        matInput
+                        [formControl]="fixedSubscriptInput"
+                        required>
+                    <mat-error>Required field!</mat-error>
+                </mat-form-field>
+
+                <mat-form-field
+                    class="flex-auto"
+                    subscriptSizing="fixed">
+                    <mat-label>Fixed subscript sizing with mat-hint</mat-label>
+                    <input
+                        matInput
+                        [formControl]="fixedSubscriptInputWithHint"
+                        required>
+                    <mat-hint>Hint text for the field</mat-hint>
+                    <mat-error>Required field!</mat-error>
+                </mat-form-field>
+            </form>
+
+            <form class="flex flex-col mt-8 p-8 pb-4 bg-card rounded-2xl shadow overflow-hidden">
+                <mat-form-field
+                    class="flex-auto"
+                    subscriptSizing="dynamic">
+                    <mat-label>Dynamic subscript sizing</mat-label>
+                    <input
+                        matInput
+                        [formControl]="dynamicSubscriptInput"
+                        required>
+                    <mat-error>Required field!</mat-error>
+                </mat-form-field>
+
+                <mat-form-field
+                    class="flex-auto"
+                    subscriptSizing="dynamic">
+                    <mat-label>Dynamic subscript sizing with mat-hint</mat-label>
+                    <input
+                        matInput
+                        [formControl]="dynamicSubscriptInputWithHint"
+                        required>
+                    <mat-hint>Hint text for the field</mat-hint>
+                    <mat-error>Required field!</mat-error>
+                </mat-form-field>
+            </form>
+
             <div class="prose prose-sm max-w-3xl">
                 <h2 class="mt-12">Field variations</h2>
                 <p>
                     Following form contains examples to showcase form field variations. In addition to the heavy modifications,
                     Fuse also provides set of helper classes to further modify the style of the form fields.
                 </p>
-                <h3>Required classes</h3>
                 <ul>
                     <li>
-                        <p><code>.fuse-mat-textarea</code></p>
+                        <p><code>.fuse-mat-bold</code></p>
                         <p>
-                            This helper class is required if you are using a textarea as your input. Since Angular Material doesn't differentiate a textarea from a
-                            normal input while using them with <strong>mat-form-field</strong>, this helper class is required for <strong>textarea</strong> inputs to look good and
-                            consistent.
+                            Provides set of adjustments to make the fields' border bolder.
                         </p>
                     </li>
-                </ul>
-                <!-- @formatter:off -->
-                <textarea
-                    fuse-highlight
-                    lang="html">
-                    <mat-form-field class="fuse-mat-textarea">
-                        <mat-label>Note</mat-label>
-                        &lt;textarea matInput&gt;&lt;/textarea&gt;
-                    </mat-form-field>
-                </textarea>
-                <!-- @formatter:on -->
-                <h3>Optional classes</h3>
-                <ul>
                     <li>
                         <p><code>.fuse-mat-dense</code></p>
                         <p>
@@ -199,14 +244,6 @@
                         <p><code>.fuse-mat-rounded</code></p>
                         <p>Provides set of adjustments to make the fields look fully rounded.</p>
                     </li>
-                    <li>
-                        <p><code>.fuse-mat-no-subscript</code></p>
-                        <p>
-                            Provides set of adjustments to remove the bottom spacing where <em>hint</em> and <em>error</em> messages placed. This helper is particularly useful to align the
-                            field easily if you don't need to show error messages or hint text. For example a search bar in the toolbar uses this helper to fit the field to the toolbar
-                            without having an extra bottom spacing.
-                        </p>
-                    </li>
                     <li>
                         <p><code>.fuse-mat-emphasized-affix</code></p>
                         <p>
@@ -223,9 +260,9 @@
                     <mat-button-toggle-group
                         [(ngModel)]="formFieldHelpers"
                         multiple>
+                        <mat-button-toggle [value]="'fuse-mat-bold'">Bold</mat-button-toggle>
                         <mat-button-toggle [value]="'fuse-mat-dense'">Dense</mat-button-toggle>
                         <mat-button-toggle [value]="'fuse-mat-rounded'">Rounded</mat-button-toggle>
-                        <mat-button-toggle [value]="'fuse-mat-no-subscript'">No subscript</mat-button-toggle>
                         <mat-button-toggle [value]="'fuse-mat-emphasized-affix'">Emphasized affix</mat-button-toggle>
                     </mat-button-toggle-group>
                 </p>
@@ -340,7 +377,7 @@
                 <div class="flex">
                     <mat-form-field
                         [ngClass]="formFieldHelpers"
-                        class="fuse-mat-textarea flex-auto">
+                        class="flex-auto">
                         <mat-label>Textarea</mat-label>
                         <textarea matInput></textarea>
                     </mat-form-field>
@@ -348,7 +385,7 @@
                 <div class="flex">
                     <mat-form-field
                         [ngClass]="formFieldHelpers"
-                        class="fuse-mat-textarea flex-auto">
+                        class="flex-auto">
                         <mat-label>Textarea with prefix & suffix</mat-label>
                         <textarea matInput></textarea>
                         <mat-icon
@@ -364,21 +401,21 @@
                 <div class="flex">
                     <mat-form-field
                         [ngClass]="formFieldHelpers"
-                        class="fuse-mat-textarea flex-auto">
+                        class="flex-auto">
                         <mat-label>Textarea with autosize</mat-label>
                         <textarea
                             matInput
-                            matTextareaAutosize></textarea>
+                            cdkTextareaAutosize></textarea>
                     </mat-form-field>
                 </div>
                 <div class="flex">
                     <mat-form-field
                         [ngClass]="formFieldHelpers"
-                        class="fuse-mat-textarea flex-auto">
+                        class="flex-auto">
                         <mat-label>Textarea with autosize, prefix & suffix</mat-label>
                         <textarea
                             matInput
-                            matTextareaAutosize></textarea>
+                            cdkTextareaAutosize></textarea>
                         <mat-icon
                             class="icon-size-5"
                             matPrefix
@@ -611,7 +648,7 @@
                 <div class="flex">
                     <mat-form-field
                         [ngClass]="formFieldHelpers"
-                        class="fuse-mat-textarea flex-auto">
+                        class="flex-auto">
                         <textarea
                             matInput
                             [placeholder]="'Textarea'"></textarea>
@@ -620,7 +657,7 @@
                 <div class="flex">
                     <mat-form-field
                         [ngClass]="formFieldHelpers"
-                        class="fuse-mat-textarea flex-auto">
+                        class="flex-auto">
                         <textarea
                             matInput
                             [placeholder]="'Textarea with prefix & suffix'"></textarea>
@@ -637,21 +674,21 @@
                 <div class="flex">
                     <mat-form-field
                         [ngClass]="formFieldHelpers"
-                        class="fuse-mat-textarea flex-auto">
+                        class="flex-auto">
                         <textarea
                             matInput
                             [placeholder]="'Textarea with autosize'"
-                            matTextareaAutosize></textarea>
+                            cdkTextareaAutosize></textarea>
                     </mat-form-field>
                 </div>
                 <div class="flex">
                     <mat-form-field
                         [ngClass]="formFieldHelpers"
-                        class="fuse-mat-textarea flex-auto">
+                        class="flex-auto">
                         <textarea
                             matInput
                             [placeholder]="'Textarea with autosize, prefix & suffix'"
-                            matTextareaAutosize></textarea>
+                            cdkTextareaAutosize></textarea>
                         <mat-icon
                             class="icon-size-5"
                             matPrefix
diff --git a/src/app/modules/admin/ui/forms/fields/fields.component.ts b/src/app/modules/admin/ui/forms/fields/fields.component.ts
index 0a7feb8b..ec2863fa 100644
--- a/src/app/modules/admin/ui/forms/fields/fields.component.ts
+++ b/src/app/modules/admin/ui/forms/fields/fields.component.ts
@@ -1,5 +1,5 @@
 import { Component, ViewEncapsulation } from '@angular/core';
-import { UntypedFormBuilder } from '@angular/forms';
+import { FormControl, UntypedFormBuilder, Validators } from '@angular/forms';
 
 @Component({
     selector     : 'forms-fields',
@@ -9,6 +9,10 @@ import { UntypedFormBuilder } from '@angular/forms';
 export class FormsFieldsComponent
 {
     formFieldHelpers: string[] = [''];
+    fixedSubscriptInput: FormControl = new FormControl('', [Validators.required]);
+    dynamicSubscriptInput: FormControl = new FormControl('', [Validators.required]);
+    fixedSubscriptInputWithHint: FormControl = new FormControl('', [Validators.required]);
+    dynamicSubscriptInputWithHint: FormControl = new FormControl('', [Validators.required]);
 
     /**
      * Constructor
diff --git a/src/app/modules/admin/ui/forms/layouts/layouts.component.html b/src/app/modules/admin/ui/forms/layouts/layouts.component.html
index 971a6547..95befcd3 100644
--- a/src/app/modules/admin/ui/forms/layouts/layouts.component.html
+++ b/src/app/modules/admin/ui/forms/layouts/layouts.component.html
@@ -121,7 +121,7 @@
                     </mat-form-field>
                 </div>
                 <div class="flex">
-                    <mat-form-field class="fuse-mat-textarea flex-auto">
+                    <mat-form-field class="flex-auto">
                         <textarea
                             matInput
                             [placeholder]="'About'"
@@ -303,7 +303,7 @@
                             </mat-form-field>
                         </div>
                         <div class="flex">
-                            <mat-form-field class="fuse-mat-textarea flex-auto">
+                            <mat-form-field class="flex-auto">
                                 <mat-label>About</mat-label>
                                 <textarea
                                     matInput
@@ -441,7 +441,7 @@
                         <input matInput>
                         <span matPrefix>www.example.com/</span>
                     </mat-form-field>
-                    <mat-form-field class="fuse-mat-textarea flex-auto">
+                    <mat-form-field class="flex-auto">
                         <mat-label>About</mat-label>
                         <textarea
                             matInput
@@ -600,7 +600,7 @@
                         </mat-form-field>
                     </div>
                     <div class="flex">
-                        <mat-form-field class="fuse-mat-textarea flex-auto">
+                        <mat-form-field class="flex-auto">
                             <textarea
                                 matInput
                                 [placeholder]="'About'"
@@ -741,7 +741,7 @@
                             <input matInput>
                             <span matPrefix>www.example.com/</span>
                         </mat-form-field>
-                        <mat-form-field class="fuse-mat-textarea flex-auto">
+                        <mat-form-field class="flex-auto">
                             <mat-label>About</mat-label>
                             <textarea
                                 matInput
@@ -890,7 +890,7 @@
                         </div>
                         <div class="flex flex-col gt-xs:flex-row gt-xs:items-baseline">
                             <span class="font-semibold mb-1 gt-xs:text-right gt-xs:min-w-32 gt-xs:mr-4 gt-xs:mb-0">About</span>
-                            <mat-form-field class="fuse-mat-textarea flex-auto">
+                            <mat-form-field class="flex-auto">
                                 <textarea
                                     matInput
                                     [rows]="3"></textarea>
diff --git a/src/app/modules/admin/ui/forms/wizards/wizards.component.html b/src/app/modules/admin/ui/forms/wizards/wizards.component.html
index c10ac046..39758a5d 100644
--- a/src/app/modules/admin/ui/forms/wizards/wizards.component.html
+++ b/src/app/modules/admin/ui/forms/wizards/wizards.component.html
@@ -163,7 +163,7 @@
                             </mat-form-field>
                         </div>
                         <div class="flex">
-                            <mat-form-field class="fuse-mat-textarea flex-auto">
+                            <mat-form-field class="flex-auto">
                                 <textarea
                                     matInput
                                     [formControlName]="'about'"
@@ -413,7 +413,7 @@
                             </mat-form-field>
                         </div>
                         <div class="flex">
-                            <mat-form-field class="fuse-mat-textarea flex-auto">
+                            <mat-form-field class="flex-auto">
                                 <textarea
                                     matInput
                                     [formControlName]="'about'"
diff --git a/src/app/modules/admin/ui/fuse-components/components/loading-bar/loading-bar.component.html b/src/app/modules/admin/ui/fuse-components/components/loading-bar/loading-bar.component.html
index 8bb6d07e..e408d7bd 100644
--- a/src/app/modules/admin/ui/fuse-components/components/loading-bar/loading-bar.component.html
+++ b/src/app/modules/admin/ui/fuse-components/components/loading-bar/loading-bar.component.html
@@ -393,13 +393,15 @@
                                     Toggle determinate mode
                                 </mat-slide-toggle>
 
-                                <mat-slider [color]="'primary'">
-                                    <input
-                                        matSliderThumb
-                                        [(value)]="sliderValue"
-                                        (valueChange)="setProgress()">
+                                <div>
                                     Progress value
-                                </mat-slider>
+                                    <mat-slider [color]="'primary'">
+                                        <input
+                                            matSliderThumb
+                                            [(value)]="sliderValue"
+                                            (valueChange)="setProgress()">
+                                    </mat-slider>
+                                </div>
 
                             </div>
                         </div>
diff --git a/src/app/modules/auth/forgot-password/forgot-password.component.html b/src/app/modules/auth/forgot-password/forgot-password.component.html
index 4137a1c4..1b1b5927 100644
--- a/src/app/modules/auth/forgot-password/forgot-password.component.html
+++ b/src/app/modules/auth/forgot-password/forgot-password.component.html
@@ -12,7 +12,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
diff --git a/src/app/modules/auth/reset-password/reset-password.component.html b/src/app/modules/auth/reset-password/reset-password.component.html
index c424027c..e86b01e9 100644
--- a/src/app/modules/auth/reset-password/reset-password.component.html
+++ b/src/app/modules/auth/reset-password/reset-password.component.html
@@ -12,7 +12,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
diff --git a/src/app/modules/auth/sign-in/sign-in.component.html b/src/app/modules/auth/sign-in/sign-in.component.html
index 4d787bba..7704c6d8 100644
--- a/src/app/modules/auth/sign-in/sign-in.component.html
+++ b/src/app/modules/auth/sign-in/sign-in.component.html
@@ -18,7 +18,16 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
+                [appearance]="'outline'"
+                [showIcon]="false"
+                [type]="'info'">
+                You are browsing <strong>Fuse Demo</strong>. Click on the "Sign in" button to access the Demo and Documentation.
+            </fuse-alert>
+
+            <!-- Alert -->
+            <fuse-alert
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
@@ -77,8 +86,9 @@
                 </mat-form-field>
 
                 <!-- Actions -->
-                <div class="inline-flex items-end justify-between w-full mt-1.5">
+                <div class="inline-flex items-center justify-between w-full mt-1.5">
                     <mat-checkbox
+                        class="-ml-2"
                         [color]="'primary'"
                         [formControlName]="'rememberMe'">
                         Remember me
diff --git a/src/app/modules/auth/sign-up/sign-up.component.html b/src/app/modules/auth/sign-up/sign-up.component.html
index f4241f4d..8d5d625b 100644
--- a/src/app/modules/auth/sign-up/sign-up.component.html
+++ b/src/app/modules/auth/sign-up/sign-up.component.html
@@ -18,7 +18,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
@@ -100,12 +100,13 @@
                 <!-- ToS and PP -->
                 <div class="inline-flex items-end w-full mt-1.5">
                     <mat-checkbox
+                        class="-ml-2"
                         [color]="'primary'"
                         [formControlName]="'agreements'">
-                        <span>I agree to the</span>
+                        <span>I agree with</span>
                         <a
                             class="ml-1 text-primary-500 hover:underline"
-                            [routerLink]="['./']">Terms of Service
+                            [routerLink]="['./']">Terms
                         </a>
                         <span>and</span>
                         <a
diff --git a/src/app/modules/auth/unlock-session/unlock-session.component.html b/src/app/modules/auth/unlock-session/unlock-session.component.html
index 520a99e8..7b175305 100644
--- a/src/app/modules/auth/unlock-session/unlock-session.component.html
+++ b/src/app/modules/auth/unlock-session/unlock-session.component.html
@@ -12,7 +12,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"