diff --git a/src/app/components/config-preview/config-preview.component.html b/src/app/components/config-preview/config-preview.component.html
index 734ee2f..04efe04 100644
--- a/src/app/components/config-preview/config-preview.component.html
+++ b/src/app/components/config-preview/config-preview.component.html
@@ -1,10 +1,10 @@
 <div class="h-full flex flex-col">
   <div class="flex items-center">
     <div class="text-white">Config Preview</div>
-    <div class="flex-grow"></div>
+    <div class="grow"></div>
     <div>
       <button mat-icon-button matTooltip="Download Config" (click)="downloadConfig()">
-        <mat-icon class="!text-white">download</mat-icon>
+        <mat-icon class="text-white!">download</mat-icon>
       </button>
     </div>
   </div>
diff --git a/src/app/components/module-list/module-list.component.html b/src/app/components/module-list/module-list.component.html
index 5664c63..629e171 100644
--- a/src/app/components/module-list/module-list.component.html
+++ b/src/app/components/module-list/module-list.component.html
@@ -18,7 +18,7 @@
     }
     <div class="text-white">Modules</div>
   </div>
-  <div class="flex-grow overflow-x-hidden overflow-y-auto gap-1.5">
+  <div class="grow overflow-x-hidden overflow-y-auto gap-1.5">
     @for (module of modules(); track module.id; let i = $index) {
       <div class="m-2">
         <app-module
diff --git a/src/app/components/module/module.component.html b/src/app/components/module/module.component.html
index 4747ff2..22e8e25 100644
--- a/src/app/components/module/module.component.html
+++ b/src/app/components/module/module.component.html
@@ -12,9 +12,9 @@
         <div class="text-white">
           {{ schema().title || module()?.type }}
         </div>
-        <div class="flex-grow"></div>
+        <div class="grow"></div>
         <div class="flex items-center justify-center hover:bg-gray-700 hover:cursor-pointer" (click)="delete.emit()">
-          <mat-icon class="!text-red-500">close</mat-icon>
+          <mat-icon class="text-red-500!">close</mat-icon>
         </div>
       </div>
       <hr class="bg-gray-600 h-0.5 border-0">
@@ -29,7 +29,7 @@
                 [placeholder]="'module-1'"
                 [formControlName]="'id'"
               />
-              <mat-icon class="!text-white" matTooltip="String">abc</mat-icon>
+              <mat-icon class="text-white!" matTooltip="String">abc</mat-icon>
               @if (!formGroup.controls['id'].valid) {
                 <!-- TODO(jwetzell): better error displaying -->
                 <div class="ml-2 text-red-500">{{ formGroup.controls['id'].errors | json }}</div>
diff --git a/src/app/components/params-form/params-form.component.html b/src/app/components/params-form/params-form.component.html
index 3221f44..65fe90e 100644
--- a/src/app/components/params-form/params-form.component.html
+++ b/src/app/components/params-form/params-form.component.html
@@ -40,7 +40,7 @@
                     }
                   </select>
                 }
-                <mat-icon class="!text-white">123</mat-icon>
+                <mat-icon class="text-white!">123</mat-icon>
               }
               @case ('integer') {
                 @if (!paramInfo.options) {
@@ -62,7 +62,7 @@
                     }
                   </select>
                 }
-                <mat-icon class="!text-white" matTooltip="Number">123</mat-icon>
+                <mat-icon class="text-white!" matTooltip="Number">123</mat-icon>
               }
               @case ('string') {
                 @if (!paramInfo.options) {
@@ -84,14 +84,14 @@
                     }
                   </select>
                 }
-                <mat-icon class="!text-white" matTooltip="String">abc</mat-icon>
+                <mat-icon class="text-white!" matTooltip="String">abc</mat-icon>
               }
               @case ('array') {
                 <app-array-form
                   [paramFormControl]="paramsFormInfo.formGroup.get(paramInfo.key)"
                   [paramInfo]="paramInfo"
                 ></app-array-form>
-                <mat-icon class="!text-white" matTooltip="Item list">data_array</mat-icon>
+                <mat-icon class="text-white!" matTooltip="Item list">data_array</mat-icon>
               }
               @case ('object') {
                 <!-- TODO(jwetzell): figure out how to display objects-->
@@ -100,7 +100,7 @@
                   [formControlName]="paramInfo.key"
                   [placeholder]="paramInfo.placeholder"
                 />
-                <mat-icon class="!text-white" matTooltip="JSON">data_object</mat-icon>
+                <mat-icon class="text-white!" matTooltip="JSON">data_object</mat-icon>
               }
               @default {
                 <input
@@ -111,7 +111,7 @@
             }
             @if (paramInfo.hint) {
               <div class="flex items-center justify-center">
-                <mat-icon [matTooltip]="paramInfo.hint" class="ml-2 !text-white">
+                <mat-icon [matTooltip]="paramInfo.hint" class="ml-2 text-white!">
                   help_outline
                 </mat-icon>
               </div>
diff --git a/src/app/components/processor/processor.component.html b/src/app/components/processor/processor.component.html
index 61fdaf5..b137e95 100644
--- a/src/app/components/processor/processor.component.html
+++ b/src/app/components/processor/processor.component.html
@@ -6,11 +6,11 @@
       }} border-solid w-fit h-full"
     >
       <div class="flex items-center justify-center">
-        <div class="flex-grow ml-1 mr-3 text-white">
+        <div class="grow ml-1 mr-3 text-white">
           {{ schema()?.title || processor()?.type }}
         </div>
         <div class="flex items-center justify-center hover:bg-gray-700 hover:cursor-pointer" (click)="delete.emit()">
-          <mat-icon class="!text-red-500">close</mat-icon>
+          <mat-icon class="text-red-500!">close</mat-icon>
         </div>
       </div>
       @if (hasParams()) {
diff --git a/src/app/components/route-list/route-list.component.html b/src/app/components/route-list/route-list.component.html
index f5cc9f7..124fd21 100644
--- a/src/app/components/route-list/route-list.component.html
+++ b/src/app/components/route-list/route-list.component.html
@@ -9,7 +9,7 @@
     </div>
     <div class="text-white">Routes</div>
   </div>
-  <div class="flex-grow overflow-x-hidden overflow-y-auto gap-1.5">
+  <div class="grow overflow-x-hidden overflow-y-auto gap-1.5">
     @for (route of routes(); track $index; let i = $index) {
       <div class="m-2">
         <app-route 
diff --git a/src/app/components/route/route.component.html b/src/app/components/route/route.component.html
index 5de3489..dc6102b 100644
--- a/src/app/components/route/route.component.html
+++ b/src/app/components/route/route.component.html
@@ -9,9 +9,9 @@
       <div class="flex items-center">
           <mat-icon [style.color]="indicatorColor()" matTooltip="Route Indicator">chevron_right</mat-icon>
       </div>
-      <div class="flex-grow text-left ml-2 text-white">Route {{ index() }}</div>
+      <div class="grow text-left ml-2 text-white">Route {{ index() }}</div>
       <div class="flex items-center justify-center hover:bg-gray-700 hover:cursor-pointer" (click)="delete.emit()">
-        <mat-icon class="!text-red-500">close</mat-icon>
+        <mat-icon class="text-red-500!">close</mat-icon>
       </div>
     </div>
     <hr class="bg-gray-600 h-0.5 border-0">