diff --git a/src/frontend/packages/cf-autoscaler/src/features/autoscaler-metric-page/autoscaler-metric-page.component.scss b/src/frontend/packages/cf-autoscaler/src/features/autoscaler-metric-page/autoscaler-metric-page.component.scss
deleted file mode 100644
index 208b05bac8..0000000000
--- a/src/frontend/packages/cf-autoscaler/src/features/autoscaler-metric-page/autoscaler-metric-page.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-app-list {
-  flex: 1;
-}
-
-
diff --git a/src/frontend/packages/cf-autoscaler/src/features/autoscaler-metric-page/autoscaler-metric-page.component.ts b/src/frontend/packages/cf-autoscaler/src/features/autoscaler-metric-page/autoscaler-metric-page.component.ts
index 018fe8af2a..334e0b8cd4 100644
--- a/src/frontend/packages/cf-autoscaler/src/features/autoscaler-metric-page/autoscaler-metric-page.component.ts
+++ b/src/frontend/packages/cf-autoscaler/src/features/autoscaler-metric-page/autoscaler-metric-page.component.ts
@@ -19,7 +19,6 @@ import { AutoscalerConstants } from '../../core/autoscaler-helpers/autoscaler-ut
 @Component({
   selector: 'app-autoscaler-metric-page',
   templateUrl: './autoscaler-metric-page.component.html',
-  styleUrls: ['./autoscaler-metric-page.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/cf-autoscaler/src/features/autoscaler-tab-extension/autoscaler-tab-extension.component.html b/src/frontend/packages/cf-autoscaler/src/features/autoscaler-tab-extension/autoscaler-tab-extension.component.html
index 58554e5239..3f2ce164f5 100644
--- a/src/frontend/packages/cf-autoscaler/src/features/autoscaler-tab-extension/autoscaler-tab-extension.component.html
+++ b/src/frontend/packages/cf-autoscaler/src/features/autoscaler-tab-extension/autoscaler-tab-extension.component.html
@@ -1,32 +1,32 @@
 <app-page-sub-nav>
   @if (appAutoscalerPolicy$ | async; as policy) {
-    <button class="btn nav-button-with-text" name="edit" (click)="updatePolicyPage()">
-      <span class="nav-button-with-text__span">
-        <app-custom-icon class="nav-button-with-text__icon">edit</app-custom-icon> Edit Policy
+    <button class="btn my-0 mr-2.5 ml-0 py-0 px-1.5" name="edit" (click)="updatePolicyPage()">
+      <span class="flex items-center">
+        <app-custom-icon class="mr-1.5">edit</app-custom-icon> Edit Policy
       </span>
     </button>
-    <button class="btn nav-button-with-text" name="delete" (click)="disableAutoscaler()">
-      <span class="nav-button-with-text__span">
-        <app-custom-icon class="nav-button-with-text__icon">delete</app-custom-icon> Delete Policy
+    <button class="btn my-0 mr-2.5 ml-0 py-0 px-1.5" name="delete" (click)="disableAutoscaler()">
+      <span class="flex items-center">
+        <app-custom-icon class="mr-1.5">delete</app-custom-icon> Delete Policy
       </span>
     </button>
     @if (canManageCredentials()) {
-      <button class="btn nav-button-with-text" name="credential" (click)="manageCredentialPage()">
-        <span class="nav-button-with-text__span">
-          <app-custom-icon class="nav-button-with-text__icon">vpn_key</app-custom-icon> Manage Credentials
+      <button class="btn my-0 mr-2.5 ml-0 py-0 px-1.5" name="credential" (click)="manageCredentialPage()">
+        <span class="flex items-center">
+          <app-custom-icon class="mr-1.5">vpn_key</app-custom-icon> Manage Credentials
         </span>
       </button>
     }
   } @else {
-    <button class="btn nav-button-with-text" name="add" (click)="updatePolicyPage(true)">
-      <span class="nav-button-with-text__span">
-        <app-custom-icon class="nav-button-with-text__icon">add</app-custom-icon> Create Policy
+    <button class="btn my-0 mr-2.5 ml-0 py-0 px-1.5" name="add" (click)="updatePolicyPage(true)">
+      <span class="flex items-center">
+        <app-custom-icon class="mr-1.5">add</app-custom-icon> Create Policy
       </span>
     </button>
   }
 </app-page-sub-nav>
-<div class="autoscaler-tab">
-  <app-tile-grid class="app-autoscaler-tile-grid-100">
+<div class="flex relative w-full">
+  <app-tile-grid class="w-full">
     @if (appAutoscalerPolicy$ | async; as policy) {
       <app-tile-group>
         @if (policy.enabled) {
@@ -35,7 +35,7 @@
           </app-tile>
         }
         @if (policy.enabled) {
-          <app-tile class="autoscaler-tab__latest-metrics">
+          <app-tile class="flex-[2] min-h-[200px]">
             @if (policy.scaling_rules.length === 0) {
               <app-card-app-usage></app-card-app-usage>
             }
@@ -45,10 +45,10 @@
                   <app-card-title>Latest Metrics</app-card-title>
                 </app-card-header>
                 <app-card-content>
-                  <div class="app-metadata">
+                  <div class="flex flex-row">
                     @for (metric of appAutoscalerAppMetricNames$ | async; track metric) {
-                      <div class="app-metadata__two-cols">
-                        <app-metadata-item label={{metric.name}}>
+                      <div class="pr-10">
+                        <app-metadata-item class="my-0" label={{metric.name}}>
                           @if (appAutoscalerAppMetrics[metric.name] | async; as metricData) {
                             <canvas baseChart [type]="'doughnut'"
                               [data]="getGaugeData(metricData)"
@@ -61,7 +61,7 @@
                     }
                   </div>
                 </app-card-content>
-                <app-card-actions class="autoscaler-tab__actions">
+                <app-card-actions class="absolute bottom-2.5 right-6 pt-0 text-right">
                   <app-polling-indicator [manualPoll]="true" (poll)="loadLatestMetricsUponPolicy()">
                   </app-polling-indicator>
                   <button (click)="metricChartPage()" class="btn btn-icon" aria-label="Open metric chart">
@@ -84,7 +84,7 @@
                   <app-card-title>Scaling Rules </app-card-title>
                 </app-card-header>
                 <app-card-content>
-                  <div class="app-metadata app-metadata-table">
+                  <div class="block pb-2">
                     <div class="overflow-x-auto">
                       <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                         <thead class="bg-gray-50 dark:bg-gray-800">
@@ -120,7 +120,7 @@
                       </table>
                     </div>
                     @if (policy && policy.scaling_rules_form && policy.scaling_rules_form.length === 0) {
-                      <div class="autoscaler-tab-table-no-record text-center py-8 text-gray-500 dark:text-gray-400"
+                      <div class="mt-2 text-center py-8 text-gray-500 dark:text-gray-400"
                         >No scaling rules.
                       </div>
                     }
@@ -141,7 +141,7 @@
                   </app-card-title>
                 </app-card-header>
                 <app-card-content>
-                  <div class="app-metadata app-metadata-table autoscaler-table-policy-specific">
+                  <div class="block pb-2 autoscaler-table-policy-specific">
                     <div class="overflow-x-auto">
                       <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                         <thead class="bg-gray-50 dark:bg-gray-800">
@@ -188,13 +188,13 @@
                       </table>
                     </div>
                     @if (policy && policy.schedules && policy.schedules.specific_date && policy.schedules.specific_date.length === 0) {
-                      <div class="autoscaler-tab-table-no-record text-center py-8 text-gray-500 dark:text-gray-400"
+                      <div class="mt-2 text-center py-8 text-gray-500 dark:text-gray-400"
                         >
                       No specific date schedule.</div>
                     }
                   </div>
                   <br />
-                  <div class="app-metadata app-metadata-table autoscaler-table-policy-recurring">
+                  <div class="block pb-2 autoscaler-table-policy-recurring">
                     <div class="overflow-x-auto">
                       <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                         <thead class="bg-gray-50 dark:bg-gray-800">
@@ -253,7 +253,7 @@
                       </table>
                     </div>
                     @if (policy && policy.schedules && policy.schedules.specific_date && policy.schedules.recurring_schedule.length === 0) {
-                      <div class="autoscaler-tab-table-no-record text-center py-8 text-gray-500 dark:text-gray-400"
+                      <div class="mt-2 text-center py-8 text-gray-500 dark:text-gray-400"
                         >
                       No recurring schedule.</div>
                     }
@@ -266,20 +266,20 @@
       </div>
     }
     @if (showAutoscalerHistory$ | async) {
-      <app-tile-group class="autoscaler-tile-events">
+      <app-tile-group class="flex-col">
         @if ((appAutoscalerPolicy$ | async) === false) {
-          <span class="autoscaler-tile-events__no-policy">
+          <span class="flex items-center mb-3 p-3.5">
             {{noPolicyMessageFirstLine}}. {{noPolicyMessageSecondLine.text}}
           </span>
         }
         @if (appAutoscalerScalingHistory$ | async; as scalingHistory) {
           <app-tile>
             <app-card>
-              <app-card-header class="autoscaler-tile-events__header">
+              <app-card-header class="flex flex-1 h-10 justify-between pt-0">
                 <app-card-title>Latest Events </app-card-title>
               </app-card-header>
               <app-card-content>
-                <div class="app-metadata app-metadata-table">
+                <div class="block pb-2">
                   <div class="overflow-x-auto">
                     <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                       <thead class="bg-gray-50 dark:bg-gray-800">
@@ -320,13 +320,13 @@
                     </table>
                   </div>
                   @if (scalingHistory.length === 0) {
-                    <div class="autoscaler-tab-table-no-record text-center py-8 text-gray-500 dark:text-gray-400"
+                    <div class="mt-2 text-center py-8 text-gray-500 dark:text-gray-400"
                       >
                     No events.</div>
                   }
                 </div>
               </app-card-content>
-              <app-card-actions class="autoscaler-tab__actions">
+              <app-card-actions class="absolute bottom-2.5 right-6 pt-0 text-right">
                 <app-polling-indicator (poll)="fetchScalingHistory()"
                   [manualPoll]="(scalingHistoryLoading$ | async) === false"
                   [isPolling]="(scalingHistoryLoading$ | async)">
@@ -346,4 +346,4 @@
       </app-no-content-message>
     }
   </app-tile-grid>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/frontend/packages/cf-autoscaler/src/features/autoscaler-tab-extension/autoscaler-tab-extension.component.scss b/src/frontend/packages/cf-autoscaler/src/features/autoscaler-tab-extension/autoscaler-tab-extension.component.scss
deleted file mode 100644
index 940c93ce5d..0000000000
--- a/src/frontend/packages/cf-autoscaler/src/features/autoscaler-tab-extension/autoscaler-tab-extension.component.scss
+++ /dev/null
@@ -1,78 +0,0 @@
-@reference 'tailwindcss';
-
-.autoscaler-tab {
-  @apply flex relative w-full;
-  &__actions {
-    @apply absolute bottom-2.5 right-6 pt-0 text-right;
-  }
-  .table-header:first-of-type {
-    @apply pl-0;
-  }
-  .autoscaler-tab-table-no-record {
-    @apply mt-2;
-  }
-
-  &__latest-metrics {
-    @apply flex-[2] min-h-[200px];
-  }
-}
-
-
-.app-metadata {
-  @apply flex flex-row;
-  &__two-cols {
-    @apply pr-10;
-    app-metadata-item:first-child {
-      @apply mt-0;
-    }
-  }
-  app-metadata-item {
-    @apply mb-0;
-  }
-}
-
-.app-metadata-table {
-  @apply block pb-2;
-}
-
-.app-autoscaler-tile-grid-100 {
-  @apply w-full;
-}
-
-table {
-  @apply w-full;
-  td {
-    @apply pl-2;
-  }
-}
-
-.autoscaler-tile-events {
-  @apply flex-col;
-
-  &__no-policy {
-    @apply flex items-center mb-3 p-3.5;
-  }
-
-  &__header {
-    @apply flex flex-1 h-10 justify-between pt-0;
-
-    .card-title {
-      @apply mb-0;
-    }
-
-    button {
-      @apply -mr-2.5 -mt-2.5;
-    }
-  }
-}
-.nav-button-with-text {
-  @apply my-0 mr-2.5 ml-0 py-0 px-1.5;
-
-  &__span {
-    @apply flex items-center;
-  }
-
-  &__icon {
-    @apply mr-1.5;
-  }
-}
diff --git a/src/frontend/packages/cf-autoscaler/src/features/autoscaler-tab-extension/autoscaler-tab-extension.component.ts b/src/frontend/packages/cf-autoscaler/src/features/autoscaler-tab-extension/autoscaler-tab-extension.component.ts
index 9ee6308bad..2f74d39508 100644
--- a/src/frontend/packages/cf-autoscaler/src/features/autoscaler-tab-extension/autoscaler-tab-extension.component.ts
+++ b/src/frontend/packages/cf-autoscaler/src/features/autoscaler-tab-extension/autoscaler-tab-extension.component.ts
@@ -112,7 +112,6 @@ interface AutoscalerTabPaginationParams {
 @Component({
   selector: 'app-autoscaler-tab-extension',
   templateUrl: './autoscaler-tab-extension.component.html',
-  styleUrls: ['./autoscaler-tab-extension.component.scss'],
   providers: [
     ApplicationMonitorService
   ],
diff --git a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step1/edit-autoscaler-policy-step1.component.scss b/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step1/edit-autoscaler-policy-step1.component.scss
deleted file mode 100644
index 1ae787f91d..0000000000
--- a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step1/edit-autoscaler-policy-step1.component.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-
-.autoscaler-policy-edit-limit-max {
-  margin-top: 0.5em;
-}
diff --git a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step1/edit-autoscaler-policy-step1.component.ts b/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step1/edit-autoscaler-policy-step1.component.ts
index 403b12b970..d5a6c27d91 100644
--- a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step1/edit-autoscaler-policy-step1.component.ts
+++ b/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step1/edit-autoscaler-policy-step1.component.ts
@@ -22,7 +22,6 @@ interface EditLimitForm {
 @Component({
   selector: 'app-edit-autoscaler-policy-step1',
   templateUrl: './edit-autoscaler-policy-step1.component.html',
-  styleUrls: ['./edit-autoscaler-policy-step1.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
     { provide: TailwindErrorStateMatcher, useClass: TailwindShowOnDirtyErrorStateMatcher }
diff --git a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step2/edit-autoscaler-policy-step2.component.scss b/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step2/edit-autoscaler-policy-step2.component.scss
deleted file mode 100644
index c6ecc8eb54..0000000000
--- a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step2/edit-autoscaler-policy-step2.component.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-.app-autoscaler-tile-grid-100 {
-  width: 100%;
-}
-
-.autoscaler-policy-edit {
-  display: flex;
-  position: relative;
-  width: 100%;
-  &__actions {
-    bottom: 10px;
-    padding-top: 0;
-    position: absolute;
-    right: 24px;
-    text-align: right;
-  }
-}
-
-.autoscaler-policy-edit-trigger-item {
-  .autoscaler-policy-edit-trigger-item-desc {
-    margin-bottom: 0.5em;
-  }
-  .autoscaler-policy-edit-trigger-item__unit {
-    display: inline-block;
-    width: 23px;
-  }
-  mat-error {
-    font-size: 85%;
-  }
-}
-
-.autoscaler-edit-select {
-  input {
-    left: 0;
-    position: absolute;
-    top: 0.5em;
-    width: 90%;
-    z-index: 200;
-  }
-}
diff --git a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step2/edit-autoscaler-policy-step2.component.ts b/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step2/edit-autoscaler-policy-step2.component.ts
index 1726b1b432..d5cbd7a33e 100644
--- a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step2/edit-autoscaler-policy-step2.component.ts
+++ b/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step2/edit-autoscaler-policy-step2.component.ts
@@ -38,7 +38,6 @@ interface EditTriggerForm {
 @Component({
   selector: 'app-edit-autoscaler-policy-step2',
   templateUrl: './edit-autoscaler-policy-step2.component.html',
-  styleUrls: ['./edit-autoscaler-policy-step2.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
     { provide: TailwindErrorStateMatcher, useClass: TailwindShowOnDirtyErrorStateMatcher }
diff --git a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step3/edit-autoscaler-policy-step3.component.scss b/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step3/edit-autoscaler-policy-step3.component.scss
deleted file mode 100644
index 9a1df000ad..0000000000
--- a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step3/edit-autoscaler-policy-step3.component.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-@reference 'tailwindcss';
-
-.radio-outer-circle {
-  @apply h-[15px] w-[15px] top-[2.5px];
-}
-
-.app-autoscaler-tile-grid-100 {
-  @apply w-full;
-}
-
-.autoscaler-policy-edit {
-  @apply flex relative w-full;
-  &__actions {
-    @apply absolute bottom-2.5 right-6 pt-0 text-right;
-  }
-}
-
-.app-metadata {
-  @apply flex flex-row;
-  &__two-cols {
-    @apply flex-1 mr-12;
-    app-metadata-item:first-child {
-      @apply mt-0;
-    }
-  }
-}
-
-.autoscaler-policy-edit-recurring {
-  @apply max-w-full;
-  .form-field-left {
-    @apply mr-2;
-  }
-  .form-field-30 {
-    @apply w-[30%];
-  }
-  .form-field-50 {
-    @apply w-1/2;
-  }
-}
diff --git a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step3/edit-autoscaler-policy-step3.component.ts b/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step3/edit-autoscaler-policy-step3.component.ts
index dde057d61d..f416ff0670 100644
--- a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step3/edit-autoscaler-policy-step3.component.ts
+++ b/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step3/edit-autoscaler-policy-step3.component.ts
@@ -39,7 +39,6 @@ interface EditRecurringScheduleForm {
 @Component({
   selector: 'app-edit-autoscaler-policy-step3',
   templateUrl: './edit-autoscaler-policy-step3.component.html',
-  styleUrls: ['./edit-autoscaler-policy-step3.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
     { provide: TailwindErrorStateMatcher, useClass: TailwindShowOnDirtyErrorStateMatcher }
diff --git a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step4/edit-autoscaler-policy-step4.component.scss b/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step4/edit-autoscaler-policy-step4.component.scss
deleted file mode 100644
index 9b08a0e02d..0000000000
--- a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step4/edit-autoscaler-policy-step4.component.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-.app-autoscaler-tile-grid-100 {
-  width: 100%;
-}
-
-.autoscaler-policy-edit {
-  display: flex;
-  position: relative;
-  width: 100%;
-  &__actions {
-    bottom: 10px;
-    padding-top: 0;
-    position: absolute;
-    right: 24px;
-    text-align: right;
-  }
-}
-
-.app-metadata {
-  display: flex;
-  flex-direction: row;
-  &__two-cols {
-    flex: 1;
-    margin-right: 3em;
-    app-metadata-item:first-child {
-      margin-top: 0;
-    }
-  }
-}
-
-.autoscaler-policy-edit-specific {
-  max-width: 100%;
-  .form-field-left {
-    margin-right: 0.5em;
-  }
-  .form-field-30 {
-    width: 30%;
-  }
-}
-
diff --git a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step4/edit-autoscaler-policy-step4.component.ts b/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step4/edit-autoscaler-policy-step4.component.ts
index df3204dee4..89272ecf1e 100644
--- a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step4/edit-autoscaler-policy-step4.component.ts
+++ b/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step4/edit-autoscaler-policy-step4.component.ts
@@ -40,7 +40,6 @@ interface EditSpecificDateForm {
 @Component({
   selector: 'app-edit-autoscaler-policy-step4',
   templateUrl: './edit-autoscaler-policy-step4.component.html',
-  styleUrls: ['./edit-autoscaler-policy-step4.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy.component.html b/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy.component.html
index 83a4d074b4..d43a494400 100644
--- a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy.component.html
+++ b/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy.component.html
@@ -1,4 +1,4 @@
-<div class="autoscaler-policy-edit-steppers">
+<div class="h-full">
   <app-page-header>
     <h1>{{isCreate ? 'Create' : 'Edit' }} AutoScaler Policy:
       {{ (applicationService.application$ | async)?.app.entity.name }} </h1>
diff --git a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy.component.scss b/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy.component.scss
deleted file mode 100644
index d1d4e3e07b..0000000000
--- a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.autoscaler-policy-edit-steppers {
-  height: 100%;
-}
diff --git a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy.component.ts b/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy.component.ts
index ccbe765134..46e58606ef 100644
--- a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy.component.ts
+++ b/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy.component.ts
@@ -32,7 +32,6 @@ import { EditAutoscalerPolicyService } from './edit-autoscaler-policy-service';
 @Component({
   selector: 'app-edit-autoscaler-policy',
   templateUrl: './edit-autoscaler-policy.component.html',
-  styleUrls: ['./edit-autoscaler-policy.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
     { provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher },
diff --git a/src/frontend/packages/cf-autoscaler/src/shared/card-autoscaler-default/card-autoscaler-default.component.scss b/src/frontend/packages/cf-autoscaler/src/shared/card-autoscaler-default/card-autoscaler-default.component.scss
deleted file mode 100644
index 96e3d7bc25..0000000000
--- a/src/frontend/packages/cf-autoscaler/src/shared/card-autoscaler-default/card-autoscaler-default.component.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.card-autoscaler-default {
-  &__min-max {
-    display: flex;
-    flex-direction: row;
-
-    app-metadata-item {
-      padding-right: 10px;
-    }
-  }
-}
diff --git a/src/frontend/packages/cf-autoscaler/src/shared/card-autoscaler-default/card-autoscaler-default.component.ts b/src/frontend/packages/cf-autoscaler/src/shared/card-autoscaler-default/card-autoscaler-default.component.ts
index f0d14fd4dd..b080ea5366 100644
--- a/src/frontend/packages/cf-autoscaler/src/shared/card-autoscaler-default/card-autoscaler-default.component.ts
+++ b/src/frontend/packages/cf-autoscaler/src/shared/card-autoscaler-default/card-autoscaler-default.component.ts
@@ -22,7 +22,6 @@ import { AppAutoscalerPolicyLocal } from '../../store/app-autoscaler.types';
 @Component({
   selector: 'app-card-autoscaler-default',
   templateUrl: './card-autoscaler-default.component.html',
-  styleUrls: ['./card-autoscaler-default.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/cf-autoscaler/src/shared/list-types/app-autoscaler-metric-chart/app-autoscaler-metric-chart-card/app-autoscaler-metric-chart-card.component.scss b/src/frontend/packages/cf-autoscaler/src/shared/list-types/app-autoscaler-metric-chart/app-autoscaler-metric-chart-card/app-autoscaler-metric-chart-card.component.scss
deleted file mode 100644
index 5a6c191367..0000000000
--- a/src/frontend/packages/cf-autoscaler/src/shared/list-types/app-autoscaler-metric-chart/app-autoscaler-metric-chart-card/app-autoscaler-metric-chart-card.component.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-mat-card-header {
-  .autoscaler-metric-subtitle {
-    font-size: 0.9em;
-    margin-top: 0.3em;
-  }
-}
-
-.autoscaler-chart-card {
-  display: flex;
-  height: 250px;
-  width: 100%;
-
-  .autoscaler-chart-gauge {
-    height: 200px;
-    margin: 40px 20px 0 0;
-    width: 20%;
-    ngx-charts-gauge {
-      width: 100%;
-    }
-  }
-  .autoscaler-chart-combo {
-    margin-top: 1em;
-    width: 80%;
-  }
-}
diff --git a/src/frontend/packages/cf-autoscaler/src/shared/list-types/app-autoscaler-metric-chart/app-autoscaler-metric-chart-card/app-autoscaler-metric-chart-card.component.ts b/src/frontend/packages/cf-autoscaler/src/shared/list-types/app-autoscaler-metric-chart/app-autoscaler-metric-chart-card/app-autoscaler-metric-chart-card.component.ts
index 0d26d083fe..09081697ca 100644
--- a/src/frontend/packages/cf-autoscaler/src/shared/list-types/app-autoscaler-metric-chart/app-autoscaler-metric-chart-card/app-autoscaler-metric-chart-card.component.ts
+++ b/src/frontend/packages/cf-autoscaler/src/shared/list-types/app-autoscaler-metric-chart/app-autoscaler-metric-chart-card/app-autoscaler-metric-chart-card.component.ts
@@ -22,7 +22,6 @@ import { AppAutoscalerComboChartComponent } from './combo-chart/combo-chart.comp
 @Component({
   selector: 'app-app-autoscaler-metric-chart-card',
   templateUrl: './app-autoscaler-metric-chart-card.component.html',
-  styleUrls: ['./app-autoscaler-metric-chart-card.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/application-delete/application-delete.component.html b/src/frontend/packages/cloud-foundry/src/features/applications/application-delete/application-delete.component.html
index 2e55a367f0..96ec165ea4 100644
--- a/src/frontend/packages/cloud-foundry/src/features/applications/application-delete/application-delete.component.html
+++ b/src/frontend/packages/cloud-foundry/src/features/applications/application-delete/application-delete.component.html
@@ -9,13 +9,13 @@ <h1>Delete application</h1>
          on each step — the stepper subscribes to onHidden changes and
          re-filters its visible step list reactively. -->
     <app-step title="Routes" [hidden]="!routesLoaded() || appRoutes().length === 0" [signalHandle]="routesStepHandle">
-      <div class="app-delete__monitors">
+      <div class="flex flex-col w-full">
         <p>Please select any attached application routes you would like to delete.</p>
         <div class="mt-3 rounded border border-content-border p-4">
           <h2 class="text-xl font-semibold text-content-text m-0">{{ appName() || 'Application' }}</h2>
           <h3 class="text-sm font-medium text-content-muted mt-2 mb-1 uppercase tracking-wide">Routes</h3>
           <app-routes-picker
-            class="app-delete__step-table"
+            class="w-full"
             [routes]="appRoutes()"
             (selectedChange)="setSelectedRoutes($event)">
           </app-routes-picker>
@@ -23,21 +23,21 @@ <h3 class="text-sm font-medium text-content-muted mt-2 mb-1 uppercase tracking-w
       </div>
     </app-step>
     <app-step title="Service Instances" [hidden]="!bindingsLoaded() || appBindings().length === 0" [signalHandle]="bindingsStepHandle">
-      <div class="app-delete__monitors">
+      <div class="flex flex-col w-full">
         <p>Please select any attached application service instances you would like to unbind.</p>
         <div class="mt-3 rounded border border-content-border p-4">
           <h2 class="text-xl font-semibold text-content-text m-0">{{ appName() || 'Application' }}</h2>
           <h3 class="text-sm font-medium text-content-muted mt-2 mb-1 uppercase tracking-wide">Service Instances</h3>
           <app-service-bindings-picker
-            class="app-delete__step-table"
+            class="w-full"
             [bindings]="appBindings()"
             (selectedChange)="setSelectedServiceBindings($event)">
           </app-service-bindings-picker>
         </div>
       </div>
     </app-step>
-    <app-step title="Confirm" class="app-delete__monitors" [signalHandle]="confirmStepHandle">
-      <div class="app-delete__monitors">
+    <app-step title="Confirm" class="flex flex-col w-full" [signalHandle]="confirmStepHandle">
+      <div class="flex flex-col w-full">
         <p>Please confirm that you would like to delete the following application@if ((selectedRoutes && selectedRoutes.length) || (selectedServiceBindings && selectedServiceBindings.length)) {
           <span
             >
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/application-delete/application-delete.component.scss b/src/frontend/packages/cloud-foundry/src/features/applications/application-delete/application-delete.component.scss
deleted file mode 100644
index 00005ae58a..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/applications/application-delete/application-delete.component.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.app-delete {
-  &__step-table {
-    width: 100%;
-  }
-  &__monitors {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-  }
-  &__monitor {
-    margin-bottom: 15px;
-    max-width: 60%;
-  }
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/application-delete/application-delete.component.ts b/src/frontend/packages/cloud-foundry/src/features/applications/application-delete/application-delete.component.ts
index fec7d6b5cf..50c8740895 100644
--- a/src/frontend/packages/cloud-foundry/src/features/applications/application-delete/application-delete.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/applications/application-delete/application-delete.component.ts
@@ -24,7 +24,6 @@ import { AppServiceBindingsPickerComponent } from './app-service-bindings-picker
 @Component({
   selector: 'app-application-delete',
   templateUrl: './application-delete.component.html',
-  styleUrls: ['./application-delete.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/build-tab/build-tab.component.html b/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/build-tab/build-tab.component.html
index 82c80dabfd..089e678c87 100644
--- a/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/build-tab/build-tab.component.html
+++ b/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/build-tab/build-tab.component.html
@@ -1,5 +1,5 @@
 @if (data.appDetail(); as detail) {
-  <div class="summary">
+  <div>
     <app-tile-grid>
       <app-tile-group class="tile-group-3-cols">
         <app-tile>
@@ -17,7 +17,7 @@
       @if (detail.build?.error; as errorMsg) {
         <app-tile-group class="tile-group-1-cols">
           <app-tile>
-            <div class="card bg-yellow-50 border-yellow-400 border-l-4 summary__staging-error">
+            <div class="card bg-yellow-50 border-yellow-400 border-l-4 items-center flex">
               <span class="material-icons text-yellow-500">warning</span>
               <div>{{ errorMsg }}</div>
             </div>
@@ -31,9 +31,9 @@
               <h3 class="text-lg font-semibold">Application Info</h3>
             </div>
             <div class="card-body">
-              <div class="app-metadata">
-                <div class="app-metadata__two-cols">
-                  <app-metadata-item icon="memory" label="Memory Quota">{{ detail.process?.memoryMb | mbToHumanSize }}
+              <div class="flex flex-row">
+                <div class="flex-1">
+                  <app-metadata-item class="mt-0" icon="memory" label="Memory Quota">{{ detail.process?.memoryMb | mbToHumanSize }}
                   </app-metadata-item>
                   <app-metadata-item icon="storage" label="Disk Quota">{{ detail.process?.diskMb | mbToHumanSize }}
                   </app-metadata-item>
@@ -46,8 +46,8 @@ <h3 class="text-lg font-semibold">Application Info</h3>
                     {{ sshStatus$ | async }}
                   </app-metadata-item>
                 </div>
-                <div class="app-metadata__two-cols">
-                  <app-metadata-item icon="touch_app" label="App State">{{ detail.app.state }}</app-metadata-item>
+                <div class="flex-1">
+                  <app-metadata-item class="mt-0" icon="touch_app" label="App State">{{ detail.app.state }}</app-metadata-item>
                   <app-metadata-item icon="card_travel" label="Package State">{{ detail.pkg?.state ?? '-' }}
                   </app-metadata-item>
                   <app-metadata-item icon="service" iconFont="stratos-icons" label="Services">
@@ -98,7 +98,7 @@ <h3 class="text-lg font-semibold">Cloud Foundry</h3>
                 }
               </app-metadata-item>
               @if (data.org()) {
-                <app-metadata-item icon="keyboard" label="CLI Info" class="cli-link">
+                <app-metadata-item icon="keyboard" label="CLI Info" class="mt-6">
                   <a [routerLink]="['/applications/' + applicationService.cfGuid + '/' + detail.app.guid + '/cli']">View</a>
                 </app-metadata-item>
               }
@@ -140,9 +140,9 @@ <h3 class="text-lg font-semibold">Deployment Info</h3>
                     </app-metadata-item>
                   }
                   @case ('gitscm') {
-                    <div class="summary__gitscm">
-                      <div>
-                        <app-metadata-item [iconFont]="deploySource.icon.fontName" [icon]="deploySource.icon.iconName"
+                    <div class="flex">
+                      <div class="flex-1">
+                        <app-metadata-item class="mt-0" [iconFont]="deploySource.icon.fontName" [icon]="deploySource.icon.iconName"
                           label="SCM">
                           {{deploySource.label}}
                         </app-metadata-item>
@@ -157,8 +157,8 @@ <h3 class="text-lg font-semibold">Deployment Info</h3>
                           }
                         </app-metadata-item>
                       </div>
-                      <div>
-                        <app-metadata-item icon="call_split" label="Branch">
+                      <div class="flex-1">
+                        <app-metadata-item class="mt-0" icon="call_split" label="Branch">
                           @if (!!(gitRepo$ | async)) {
                             <a href="{{ (gitRepo$ | async)?.html_url }}/tree/{{ deploySource.branch }}" rel="noopener noreferrer"
                               target="_blank">
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/build-tab/build-tab.component.scss b/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/build-tab/build-tab.component.scss
deleted file mode 100644
index b70214592a..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/build-tab/build-tab.component.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-.summary {
-  &__cards {
-    display: flex;
-    $summary-card-spacing: 20px;
-    flex-wrap: wrap;
-    margin: auto;
-  }
-  &__card {
-    width: 100%;
-  }
-  &__large {
-    font-size: 16px;
-    font-weight: 500;
-  }
-  &__tile_actions {
-    padding: 6px;
-    text-align: right;
-  }
-  &__actions {
-    display: flex;
-  }
-  &__sub-nav {
-    display: flex;
-    width: 100%;
-
-    &__poll {
-      display: flex;
-      flex: 1;
-      justify-content: flex-end;
-    }
-  }
-
-  &__anchor {
-    display: flex;
-    justify-content: center;
-  }
-
-  &__staging-error {
-    align-items: center;
-    display: flex;
-
-    mat-icon {
-      margin-right: 8px;
-    }
-  }
-
-  &__gitscm {
-    display: flex;
-    div {
-      flex: 1;
-      app-metadata-item:first-of-type {
-        margin-top: 0;
-      }
-    }
-  }
-}
-
-.app-metadata {
-  display: flex;
-  flex-direction: row;
-  &__two-cols {
-    flex: 1;
-    app-metadata-item:first-child {
-      margin-top: 0;
-    }
-  }
-}
-
-.cli-link {
-  margin-top: 24px;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/build-tab/build-tab.component.ts b/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/build-tab/build-tab.component.ts
index b57dc03a00..bfbe88e7b4 100644
--- a/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/build-tab/build-tab.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/build-tab/build-tab.component.ts
@@ -38,7 +38,6 @@ interface CustomEnvVarStratosProjectSource extends EnvVarStratosProjectSource {
 @Component({
   selector: 'app-build-tab',
   templateUrl: './build-tab.component.html',
-  styleUrls: ['./build-tab.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/gitscm-tab/gitscm-tab.component.html b/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/gitscm-tab/gitscm-tab.component.html
index fc65149fbe..b47ae8e539 100644
--- a/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/gitscm-tab/gitscm-tab.component.html
+++ b/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/gitscm-tab/gitscm-tab.component.html
@@ -1,7 +1,7 @@
 <app-loading-page [isLoading]="isLoading$" text="Retrieving Git Details">
   <div>
     @if (hasRepo$ | async; as hasRepo) {
-      <app-tile-grid class="gitscm-tab">
+      <app-tile-grid>
         <app-tile-group class="tile-group-3-cols">
           @if (data.stratosProject(); as stratosProject) {
             <app-tile>
@@ -10,7 +10,7 @@
                   <h3 class="text-lg font-semibold">Deployment Information</h3>
                 </div>
                 <div class="card-body">
-                  <div class="gitscm-tab__deployment">
+                  <div>
                     <app-metadata-item label="Repository">
                       <a href="{{(gitSCMRepo$ | async)?.html_url}}"
                       target="_blank">{{stratosProject.deploySource.project }}</a>
@@ -21,7 +21,7 @@ <h3 class="text-lg font-semibold">Deployment Information</h3>
                         {{ stratosProject.deploySource.branch}}
                       </a>
                     </app-metadata-item>
-                    <div class="gitscm-tab__deployment__commit">
+                    <div>
                       <div>
                         <app-metadata-item label="Commit">
                           <a href="{{(commit$ | async)?.html_url}}"
@@ -29,11 +29,11 @@ <h3 class="text-lg font-semibold">Deployment Information</h3>
                         </app-metadata-item>
                       </div>
                       @if ((isHead$ | async) === false) {
-                        <div class="gitscm-tab__deployment__commit-warning">
+                        <div class="flex flex-row">
                           <div>
                             <span class="material-icons text-yellow-500">warning</span>
                           </div>
-                          <div class="gitscm-tab__deployment__commit-warning__msg">The
+                          <div class="pl-6">The
                             {{ stratosProject.deploySource.branch }}
                           branch has been updated since this app was deployed. Redeploy to update</div>
                         </div>
@@ -51,17 +51,17 @@ <h3 class="text-lg font-semibold">Deployment Information</h3>
               <div class="card">
                 <div class="card-header flex items-center justify-between">
                   <h3 class="text-lg font-semibold">Repository Details</h3>
-                  <div class="gitscm-tab__avatar">
+                  <div>
                     <img src={{gitSCMRepo.owner.avatar_url}} alt="Repository owner avatar" class="h-12 w-12 rounded-full">
                   </div>
                 </div>
                 <div class="card-body">
                   <div>
                     <app-metadata-item label="Full Name">
-                      <div class="gitscm-tab__repo__name">
-                        <a href="{{ gitSCMRepo.html_url }}" target="_blank">{{ gitSCMRepo.full_name }}</a>
+                      <div class="flex items-center break-all">
+                        <a class="flex-1" href="{{ gitSCMRepo.html_url }}" target="_blank">{{ gitSCMRepo.full_name }}</a>
                         @if (gitSCMRepo.private) {
-                          <span class="material-icons gitscm-tab__repo__name--icon"
+                          <span class="material-icons text-[18px] h-[18px] leading-[18px] ml-[5px] mr-0 w-[18px]"
                             title="Private Repo">
                           lock</span>
                         }
@@ -89,7 +89,7 @@ <h3 class="text-lg font-semibold">Repository Details</h3>
               <div class="card">
                 <div class="card-header flex items-center justify-between">
                   <h3 class="text-lg font-semibold">Commit Details</h3>
-                  <div class="gitscm-tab__avatar">
+                  <div>
                     <img src={{commitInfo.author.avatar_url}} alt="Commit author avatar" class="h-12 w-12 rounded-full">
                   </div>
                 </div>
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/gitscm-tab/gitscm-tab.component.scss b/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/gitscm-tab/gitscm-tab.component.scss
deleted file mode 100644
index 855a8110f2..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/gitscm-tab/gitscm-tab.component.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-.gitscm-tab {
-  &__deployment {
-    &__commit-warning {
-      display: flex;
-      flex-flow: row;
-    }
-    &__commit-warning__msg {
-      padding-left: 24px;
-    }
-  }
-
-  &__repo {
-    &__name {
-      align-items: center;
-      display: flex;
-      word-break: break-all;
-      a {
-        flex: 1;
-      }
-      &--icon {
-        font-size: 18px;
-        height: 18px;
-        line-height: 18px;
-        margin-left: 5px;
-        margin-right: 0;
-        width: 18px;
-      }
-    }
-  }
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/gitscm-tab/gitscm-tab.component.ts b/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/gitscm-tab/gitscm-tab.component.ts
index 605d0ab3f6..28974673a9 100644
--- a/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/gitscm-tab/gitscm-tab.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/gitscm-tab/gitscm-tab.component.ts
@@ -38,7 +38,6 @@ import { TruncatePipe } from '../../../../../../../../core/src/core/truncate.pip
 @Component({
   selector: 'app-gitscm-tab',
   templateUrl: './gitscm-tab.component.html',
-  styleUrls: ['./gitscm-tab.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/metrics-tab/metrics-tab.component.scss b/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/metrics-tab/metrics-tab.component.scss
deleted file mode 100644
index c149aedff7..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/metrics-tab/metrics-tab.component.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.metric-chart-wrapper {
-  height: 500px;
-  margin-bottom: 20px;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/metrics-tab/metrics-tab.component.ts b/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/metrics-tab/metrics-tab.component.ts
index 38d272efc6..1ae270146f 100644
--- a/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/metrics-tab/metrics-tab.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/metrics-tab/metrics-tab.component.ts
@@ -15,7 +15,6 @@ import { ApplicationService } from '../../../../application.service';
 @Component({
   selector: 'app-metrics-tab',
   templateUrl: './metrics-tab.component.html',
-  styleUrls: ['./metrics-tab.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/services-tab/services-tab.component.scss b/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/services-tab/services-tab.component.scss
deleted file mode 100644
index b3fff4df81..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/services-tab/services-tab.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-app-list {
-  flex: 1;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/services-tab/services-tab.component.ts b/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/services-tab/services-tab.component.ts
index b5ba58e6a8..064f02dbe1 100644
--- a/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/services-tab/services-tab.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/services-tab/services-tab.component.ts
@@ -56,7 +56,6 @@ import type { StServiceCredentialBinding } from '../../../../../../services/endp
 @Component({
   selector: 'app-services-tab',
   templateUrl: './services-tab.component.html',
-  styleUrls: ['./services-tab.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/create-application/create-application-step2/create-application-step2.component.scss b/src/frontend/packages/cloud-foundry/src/features/applications/create-application/create-application-step2/create-application-step2.component.scss
deleted file mode 100644
index 5f81e6c60e..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/applications/create-application/create-application-step2/create-application-step2.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-:host {
-  flex: 1;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/create-application/create-application-step2/create-application-step2.component.ts b/src/frontend/packages/cloud-foundry/src/features/applications/create-application/create-application-step2/create-application-step2.component.ts
index 790da7b3bf..24f1c4a5da 100644
--- a/src/frontend/packages/cloud-foundry/src/features/applications/create-application/create-application-step2/create-application-step2.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/applications/create-application/create-application-step2/create-application-step2.component.ts
@@ -17,7 +17,7 @@ interface CreateApplicationForm {
 @Component({
 selector: 'app-create-application-step2',
   templateUrl: './create-application-step2.component.html',
-  styleUrls: ['./create-application-step2.component.scss'],
+  host: { class: 'app-host-flex-1' },
   providers: [
     { provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher }
   ],
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/create-application/create-application-step3/create-application-step3.component.scss b/src/frontend/packages/cloud-foundry/src/features/applications/create-application/create-application-step3/create-application-step3.component.scss
deleted file mode 100644
index 5f81e6c60e..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/applications/create-application/create-application-step3/create-application-step3.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-:host {
-  flex: 1;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/create-application/create-application-step3/create-application-step3.component.ts b/src/frontend/packages/cloud-foundry/src/features/applications/create-application/create-application-step3/create-application-step3.component.ts
index afc9b3252b..c25d009e7f 100644
--- a/src/frontend/packages/cloud-foundry/src/features/applications/create-application/create-application-step3/create-application-step3.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/applications/create-application/create-application-step3/create-application-step3.component.ts
@@ -21,7 +21,7 @@ interface DomainHostForm {
 @Component({
   selector: 'app-create-application-step3',
   templateUrl: './create-application-step3.component.html',
-  styleUrls: ['./create-application-step3.component.scss'],
+  host: { class: 'app-host-flex-1' },
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/deploy-application/deploy-application-step2-1/deploy-application-step2-1.component.scss b/src/frontend/packages/cloud-foundry/src/features/applications/deploy-application/deploy-application-step2-1/deploy-application-step2-1.component.scss
deleted file mode 100644
index 5f81e6c60e..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/applications/deploy-application/deploy-application-step2-1/deploy-application-step2-1.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-:host {
-  flex: 1;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/deploy-application/deploy-application-step2-1/deploy-application-step2-1.component.ts b/src/frontend/packages/cloud-foundry/src/features/applications/deploy-application/deploy-application-step2-1/deploy-application-step2-1.component.ts
index c95ec7e68f..38def20189 100644
--- a/src/frontend/packages/cloud-foundry/src/features/applications/deploy-application/deploy-application-step2-1/deploy-application-step2-1.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/applications/deploy-application/deploy-application-step2-1/deploy-application-step2-1.component.ts
@@ -12,7 +12,7 @@ import { CommitListWrapperComponent } from './commit-list-wrapper/commit-list-wr
 @Component({
   selector: 'app-deploy-application-step2-1',
   templateUrl: './deploy-application-step2-1.component.html',
-  styleUrls: ['./deploy-application-step2-1.component.scss'],
+  host: { class: 'app-host-flex-1' },
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: []
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/deploy-application/deploy-application-step2/deploy-application-fs/deploy-application-fs.component.html b/src/frontend/packages/cloud-foundry/src/features/applications/deploy-application/deploy-application-step2/deploy-application-fs/deploy-application-fs.component.html
index 038f247e7c..446105fff9 100644
--- a/src/frontend/packages/cloud-foundry/src/features/applications/deploy-application/deploy-application-step2/deploy-application-fs/deploy-application-fs.component.html
+++ b/src/frontend/packages/cloud-foundry/src/features/applications/deploy-application/deploy-application-step2/deploy-application-fs/deploy-application-fs.component.html
@@ -1,30 +1,30 @@
-<div class="deploy-app-local">
+<div>
   @if (!hideTitle) {
     @if (sourceType === 'file') {
-      <div class="deploy-app-local__title">Deploy from local Application File archive</div>
+      <div class="font-semibold my-6">Deploy from local Application File archive</div>
     }
     @if (sourceType === 'folder') {
-      <div class="deploy-app-local__title">Deploy from local Application Folder</div>
+      <div class="font-semibold my-6">Deploy from local Application Folder</div>
     }
   }
   @if (sourceType === 'file') {
     <div>
-      <input #localPathSelectFile fileread="localPathFile" type="file" class="deploy-app-local__input"
+      <input #localPathSelectFile fileread="localPathFile" type="file" class="h-0 invisible w-0"
         name="localPathSelectFile" id="localPathSelectFile" (change)="onFileChange($event)" /> Choose an
-        <button (click)="localPathSelectFile.click()" class="btn btn-primary">Application Archive
+        <button (click)="localPathSelectFile.click()" class="btn btn-primary mx-px">Application Archive
         file</button>
       </div>
     }
     @if (sourceType === 'folder') {
       <div>
-        <input #localPathSelectFolder webkitdirectory fileread="localPathFile" type="file" class="deploy-app-local__input"
+        <input #localPathSelectFolder webkitdirectory fileread="localPathFile" type="file" class="h-0 invisible w-0"
           name="localPathSelectFolder" id="localPathSelectFolder" (change)="onFileChange($event)" /> Choose an
-          <button (click)="localPathSelectFolder.click()" class="btn btn-primary">Application
+          <button (click)="localPathSelectFolder.click()" class="btn btn-primary mx-px">Application
           Folder</button>
         </div>
       }
       @if (sourceData(); as source) {
-        <div class="deploy-app-local__info">
+        <div class="mt-6">
           @if (source.summaryType === 'file') {
             <div>
               <div>File Upload</div>
@@ -41,20 +41,20 @@
               <app-metadata-item icon="insert_drive_file" label="Files">{{ source.files }}</app-metadata-item>
               <app-metadata-item icon="folder" label="Folders">{{ source.folders }}</app-metadata-item>
               @if (!!source.manifestFile) {
-                <div class="deploy-app-local__indicator">
+                <div class="items-center flex mb-3">
                   <span class="material-icons">done</span>
                   <span>Manifest file detected</span>
                 </div>
               }
               @if (!!source.cfIgnoreFile) {
-                <div class="deploy-app-local__indicator">
+                <div class="items-center flex mb-3">
                   <span class="material-icons">done</span>
                   <span>.cfignore file was detected and applied ({{source.excludes.length}} files excluded)</span>
                 </div>
               }
             </div>
           }
-          <p class="deploy-app-local__next">Press Next to begin upload of source files.</p>
+          <p class="pt-6">Press Next to begin upload of source files.</p>
         </div>
       }
     </div>
\ No newline at end of file
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/deploy-application/deploy-application-step2/deploy-application-fs/deploy-application-fs.component.scss b/src/frontend/packages/cloud-foundry/src/features/applications/deploy-application/deploy-application-step2/deploy-application-fs/deploy-application-fs.component.scss
deleted file mode 100644
index 32831ae0e8..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/applications/deploy-application/deploy-application-step2/deploy-application-fs/deploy-application-fs.component.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-.deploy-app-local {
-  button {
-    margin: 0 1px;
-  }
-  &__input {
-    height: 0;
-    visibility: hidden;
-    width: 0;
-  }
-  &__title {
-    font-weight: 600;
-    margin: 24px 0;
-  }
-  &__info {
-    margin-top: 24px;
-  }
-  &__next {
-    padding-top: 24px;
-  }
-  &__indicator {
-    align-items: center;
-    display: flex;
-    margin-bottom: 12px;
-    mat-icon {
-      border-radius: 50%;
-      font-size: 20px;
-      margin-right: 8px;
-      padding: 2px;
-    }
-  }
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/deploy-application/deploy-application-step2/deploy-application-fs/deploy-application-fs.component.ts b/src/frontend/packages/cloud-foundry/src/features/applications/deploy-application/deploy-application-step2/deploy-application-fs/deploy-application-fs.component.ts
index 30749c84c2..9ad14aa067 100644
--- a/src/frontend/packages/cloud-foundry/src/features/applications/deploy-application/deploy-application-step2/deploy-application-fs/deploy-application-fs.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/applications/deploy-application/deploy-application-step2/deploy-application-fs/deploy-application-fs.component.ts
@@ -17,7 +17,6 @@ import { DeployApplicationFsUtils } from "./deploy-application-fs-utils";
 @Component({
   selector: "app-deploy-application-fs",
   templateUrl: "./deploy-application-fs.component.html",
-  styleUrls: ["./deploy-application-fs.component.scss"],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/edit-application/edit-application.component.scss b/src/frontend/packages/cloud-foundry/src/features/applications/edit-application/edit-application.component.scss
deleted file mode 100644
index 3d32b2c376..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/applications/edit-application/edit-application.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.edit-app {
-  flex: 1;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/edit-application/edit-application.component.ts b/src/frontend/packages/cloud-foundry/src/features/applications/edit-application/edit-application.component.ts
index 6a1a4d4b52..77b3d8129e 100644
--- a/src/frontend/packages/cloud-foundry/src/features/applications/edit-application/edit-application.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/applications/edit-application/edit-application.component.ts
@@ -38,7 +38,6 @@ interface EditApplicationForm {
 @Component({
   selector: 'app-edit-application',
   templateUrl: './edit-application.component.html',
-  styleUrls: ['./edit-application.component.scss'],
   providers: [
     { provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher }
   ],
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/new-application-base-step/new-application-base-step.component.html b/src/frontend/packages/cloud-foundry/src/features/applications/new-application-base-step/new-application-base-step.component.html
index 1ad72afbe2..1c82f45d4e 100644
--- a/src/frontend/packages/cloud-foundry/src/features/applications/new-application-base-step/new-application-base-step.component.html
+++ b/src/frontend/packages/cloud-foundry/src/features/applications/new-application-base-step/new-application-base-step.component.html
@@ -3,7 +3,7 @@ <h1>New Application</h1>
 </app-page-header>
 <app-steppers [cancel]="'/applications'">
   <app-step [hideNextButton]="true" [signalHandle]="signalHandle">
-    <div class="tiles">
+    <div class="flex-1">
       <h3>Select application source</h3>
       <p>To create an application you can either deploy from a specific source or create an application shell. An
         application shell is an empty application with no package associated with it.</p>
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/new-application-base-step/new-application-base-step.component.scss b/src/frontend/packages/cloud-foundry/src/features/applications/new-application-base-step/new-application-base-step.component.scss
deleted file mode 100644
index 712926fb2c..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/applications/new-application-base-step/new-application-base-step.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.tiles {
-  flex: 1;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/new-application-base-step/new-application-base-step.component.ts b/src/frontend/packages/cloud-foundry/src/features/applications/new-application-base-step/new-application-base-step.component.ts
index 5602644c1f..f8631dff79 100644
--- a/src/frontend/packages/cloud-foundry/src/features/applications/new-application-base-step/new-application-base-step.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/applications/new-application-base-step/new-application-base-step.component.ts
@@ -26,7 +26,6 @@ export interface IAppTileData extends ITileData {
 @Component({
   selector: 'app-new-application-base-step',
   templateUrl: './new-application-base-step.component.html',
-  styleUrls: ['./new-application-base-step.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/add-organization/add-organization.component.html b/src/frontend/packages/cloud-foundry/src/features/cf/add-organization/add-organization.component.html
index 9f3507bbf9..eaa2016609 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/add-organization/add-organization.component.html
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/add-organization/add-organization.component.html
@@ -1,4 +1,4 @@
-<div class="add-org-stepper">
+<div class="h-full">
   <app-page-header>
     Create Organization
   </app-page-header>
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/add-organization/add-organization.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/add-organization/add-organization.component.scss
deleted file mode 100644
index c0c741b5d6..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/add-organization/add-organization.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.add-org-stepper {
-  height: 100%;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/add-organization/add-organization.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/add-organization/add-organization.component.ts
index fe3bf973ea..6dcd32302a 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/add-organization/add-organization.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/add-organization/add-organization.component.ts
@@ -10,7 +10,6 @@ import { CreateOrganizationStepComponent } from './create-organization-step/crea
 @Component({
   selector: 'app-add-organization',
   templateUrl: './add-organization.component.html',
-  styleUrls: ['./add-organization.component.scss'],
   providers: [
     getActiveRouteCfOrgSpaceProvider
   ],
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/add-organization/create-organization-step/create-organization-step.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/add-organization/create-organization-step/create-organization-step.component.scss
deleted file mode 100644
index 5f81e6c60e..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/add-organization/create-organization-step/create-organization-step.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-:host {
-  flex: 1;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/add-organization/create-organization-step/create-organization-step.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/add-organization/create-organization-step/create-organization-step.component.ts
index fd71ff4aa8..af02c0cd7f 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/add-organization/create-organization-step/create-organization-step.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/add-organization/create-organization-step/create-organization-step.component.ts
@@ -20,7 +20,7 @@ interface CreateOrganizationForm {
 @Component({
   selector: 'app-create-organization-step',
   templateUrl: './create-organization-step.component.html',
-  styleUrls: ['./create-organization-step.component.scss'],
+  host: { class: 'app-host-flex-1' },
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/add-quota/add-quota.component.html b/src/frontend/packages/cloud-foundry/src/features/cf/add-quota/add-quota.component.html
index 900e53cd95..71cd7d4015 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/add-quota/add-quota.component.html
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/add-quota/add-quota.component.html
@@ -1,4 +1,4 @@
-<div class="add-quota-stepper">
+<div class="h-full">
   <app-page-header>
     Create Quota
   </app-page-header>
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/add-quota/add-quota.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/add-quota/add-quota.component.scss
deleted file mode 100644
index eaa7b01745..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/add-quota/add-quota.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.add-quota-stepper {
-  height: 100%;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/add-quota/add-quota.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/add-quota/add-quota.component.ts
index 3c6c93d0e0..82f6949401 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/add-quota/add-quota.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/add-quota/add-quota.component.ts
@@ -10,7 +10,6 @@ import { CreateQuotaStepComponent } from './create-quota-step/create-quota-step.
 @Component({
   selector: 'app-add-quota',
   templateUrl: './add-quota.component.html',
-  styleUrls: ['./add-quota.component.scss'],
   providers: [
     getActiveRouteCfOrgSpaceProvider
   ],
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/add-space-quota/add-space-quota.component.html b/src/frontend/packages/cloud-foundry/src/features/cf/add-space-quota/add-space-quota.component.html
index 82d2deed34..5573782a0e 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/add-space-quota/add-space-quota.component.html
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/add-space-quota/add-space-quota.component.html
@@ -1,4 +1,4 @@
-<div class="add-space-quota-stepper">
+<div class="h-full">
   <app-page-header>
     Create Space Quota
   </app-page-header>
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/add-space-quota/add-space-quota.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/add-space-quota/add-space-quota.component.scss
deleted file mode 100644
index 6c1ee98f3a..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/add-space-quota/add-space-quota.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.add-space-quota-stepper {
-  height: 100%;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/add-space-quota/add-space-quota.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/add-space-quota/add-space-quota.component.ts
index cd239238bf..217fc5dfff 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/add-space-quota/add-space-quota.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/add-space-quota/add-space-quota.component.ts
@@ -8,7 +8,6 @@ import { CreateSpaceQuotaStepComponent } from './create-space-quota-step/create-
 @Component({
   selector: 'app-add-space-quota',
   templateUrl: './add-space-quota.component.html',
-  styleUrls: ['./add-space-quota.component.scss'],
   providers: [
     getActiveRouteCfOrgSpaceProvider
   ],
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/add-space/add-space.component.html b/src/frontend/packages/cloud-foundry/src/features/cf/add-space/add-space.component.html
index ca6ea7a07a..1126c21faf 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/add-space/add-space.component.html
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/add-space/add-space.component.html
@@ -1,4 +1,4 @@
-<div class="add-space-stepper">
+<div class="h-full">
   <app-page-header>
     Create Space
   </app-page-header>
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/add-space/add-space.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/add-space/add-space.component.scss
deleted file mode 100644
index e6e7c8b8b3..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/add-space/add-space.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.add-space-stepper {
-  height: 100%;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/add-space/add-space.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/add-space/add-space.component.ts
index e1a2559d21..30b71fa8ee 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/add-space/add-space.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/add-space/add-space.component.ts
@@ -11,7 +11,6 @@ import { CreateSpaceStepComponent } from './create-space-step/create-space-step.
 @Component({
   selector: 'app-add-space',
   templateUrl: './add-space.component.html',
-  styleUrls: ['./add-space.component.scss'],
   providers: [
     getActiveRouteCfOrgSpaceProvider
   ],
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/add-space/create-space-step/create-space-step.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/add-space/create-space-step/create-space-step.component.scss
deleted file mode 100644
index 5f81e6c60e..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/add-space/create-space-step/create-space-step.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-:host {
-  flex: 1;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/add-space/create-space-step/create-space-step.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/add-space/create-space-step/create-space-step.component.ts
index 376d3f9dbd..f2fbc48204 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/add-space/create-space-step/create-space-step.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/add-space/create-space-step/create-space-step.component.ts
@@ -25,7 +25,7 @@ interface CreateSpaceForm {
 @Component({
   selector: 'app-create-space-step',
   templateUrl: './create-space-step.component.html',
-  styleUrls: ['./create-space-step.component.scss'],
+  host: { class: 'app-host-flex-1' },
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/edit-organization/edit-organization-step/edit-organization-step.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/edit-organization/edit-organization-step/edit-organization-step.component.scss
deleted file mode 100644
index 5f81e6c60e..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/edit-organization/edit-organization-step/edit-organization-step.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-:host {
-  flex: 1;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/edit-organization/edit-organization-step/edit-organization-step.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/edit-organization/edit-organization-step/edit-organization-step.component.ts
index ef27d430d6..9db82d2d77 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/edit-organization/edit-organization-step/edit-organization-step.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/edit-organization/edit-organization-step/edit-organization-step.component.ts
@@ -30,7 +30,7 @@ interface EditOrganizationForm {
 @Component({
   selector: 'app-edit-organization-step',
   templateUrl: './edit-organization-step.component.html',
-  styleUrls: ['./edit-organization-step.component.scss'],
+  host: { class: 'app-host-flex-1' },
   providers: [
     getActiveRouteCfOrgSpaceProvider,
     CloudFoundryOrganizationService,
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/edit-organization/edit-organization.component.html b/src/frontend/packages/cloud-foundry/src/features/cf/edit-organization/edit-organization.component.html
index be0cf0a77f..67138e7ca4 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/edit-organization/edit-organization.component.html
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/edit-organization/edit-organization.component.html
@@ -1,4 +1,4 @@
-<div class="edit-org-stepper">
+<div class="h-full">
   <app-page-header>
     Edit Organization
   </app-page-header>
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/edit-organization/edit-organization.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/edit-organization/edit-organization.component.scss
deleted file mode 100644
index 0cd9e60ed3..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/edit-organization/edit-organization.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.edit-org-stepper {
-  height: 100%;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/edit-organization/edit-organization.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/edit-organization/edit-organization.component.ts
index f091c6cbc3..ffab19eaa3 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/edit-organization/edit-organization.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/edit-organization/edit-organization.component.ts
@@ -8,7 +8,6 @@ import { getActiveRouteCfOrgSpaceProvider } from '../cf.helpers';
 @Component({
   selector: 'app-edit-organization',
   templateUrl: './edit-organization.component.html',
-  styleUrls: ['./edit-organization.component.scss'],
   providers: [getActiveRouteCfOrgSpaceProvider],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/edit-quota/edit-quota.component.html b/src/frontend/packages/cloud-foundry/src/features/cf/edit-quota/edit-quota.component.html
index 6a7498bcc1..858e372ae5 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/edit-quota/edit-quota.component.html
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/edit-quota/edit-quota.component.html
@@ -1,4 +1,4 @@
-<div class="add-quota-stepper">
+<div class="h-full">
   <app-page-header>
     Edit Quota
   </app-page-header>
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/edit-quota/edit-quota.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/edit-quota/edit-quota.component.scss
deleted file mode 100644
index eaa7b01745..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/edit-quota/edit-quota.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.add-quota-stepper {
-  height: 100%;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/edit-quota/edit-quota.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/edit-quota/edit-quota.component.ts
index 73bf4e162b..f8dbf24669 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/edit-quota/edit-quota.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/edit-quota/edit-quota.component.ts
@@ -13,7 +13,6 @@ import { EditQuotaStepComponent } from './edit-quota-step/edit-quota-step.compon
 @Component({
   selector: 'app-edit-quota',
   templateUrl: './edit-quota.component.html',
-  styleUrls: ['./edit-quota.component.scss'],
   providers: [
     getActiveRouteCfOrgSpaceProvider
   ],
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/edit-space-quota/edit-space-quota.component.html b/src/frontend/packages/cloud-foundry/src/features/cf/edit-space-quota/edit-space-quota.component.html
index 5c042174ec..82b3133471 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/edit-space-quota/edit-space-quota.component.html
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/edit-space-quota/edit-space-quota.component.html
@@ -1,4 +1,4 @@
-<div class="add-space-quota-stepper">
+<div class="h-full">
   <app-page-header>
     Edit Space Quota
   </app-page-header>
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/edit-space-quota/edit-space-quota.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/edit-space-quota/edit-space-quota.component.scss
deleted file mode 100644
index 6c1ee98f3a..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/edit-space-quota/edit-space-quota.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.add-space-quota-stepper {
-  height: 100%;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/edit-space-quota/edit-space-quota.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/edit-space-quota/edit-space-quota.component.ts
index 058c814c4b..ecaa5399d8 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/edit-space-quota/edit-space-quota.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/edit-space-quota/edit-space-quota.component.ts
@@ -11,7 +11,6 @@ import { EditSpaceQuotaStepComponent } from './edit-space-quota-step/edit-space-
 @Component({
   selector: 'app-edit-space-quota',
   templateUrl: './edit-space-quota.component.html',
-  styleUrls: ['./edit-space-quota.component.scss'],
   providers: [
     getActiveRouteCfOrgSpaceProvider
   ],
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/edit-space/edit-space.component.html b/src/frontend/packages/cloud-foundry/src/features/cf/edit-space/edit-space.component.html
index 0f4783bb3a..3157b46eee 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/edit-space/edit-space.component.html
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/edit-space/edit-space.component.html
@@ -1,4 +1,4 @@
-<div class="edit-space-stepper">
+<div class="h-full">
   <app-page-header>
     Edit {{spaceName$ | async}}
   </app-page-header>
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/edit-space/edit-space.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/edit-space/edit-space.component.scss
deleted file mode 100644
index 62f9c0662f..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/edit-space/edit-space.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.edit-space-stepper {
-  height: 100%;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/edit-space/edit-space.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/edit-space/edit-space.component.ts
index 9ac1a4539e..c4de7d8bf1 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/edit-space/edit-space.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/edit-space/edit-space.component.ts
@@ -16,7 +16,6 @@ import { EditSpaceStepComponent } from './edit-space-step/edit-space-step.compon
 @Component({
   selector: 'app-edit-space',
   templateUrl: './edit-space.component.html',
-  styleUrls: ['./edit-space.component.scss'],
   providers: [
     getActiveRouteCfOrgSpaceProvider,
     CfUserService,
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/quota-definition-base/quota-definition-base.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/quota-definition-base/quota-definition-base.component.scss
deleted file mode 100644
index 1fb31e04d8..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/quota-definition-base/quota-definition-base.component.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-.quota-definition-base {
-  &__name-sub-text {
-    font-size: 14px;
-    opacity: 0.6;
-  }
-  &__title {
-    margin: 10px 0;
-  }
-  &__name {
-    margin: 0;
-  }
-  &__section-header {
-    margin: 10px 0;
-    opacity: 0.6;
-  }
-  &__basic-services {
-    display: flex;
-    margin: 8px 0;
-  }
-  &__basic-services-label {
-    margin-right: 10px;
-    opacity: 0.6;
-  }
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/quota-definition/quota-definition.component.html b/src/frontend/packages/cloud-foundry/src/features/cf/quota-definition/quota-definition.component.html
index 4f08341d85..e529cdabb7 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/quota-definition/quota-definition.component.html
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/quota-definition/quota-definition.component.html
@@ -22,18 +22,18 @@ <h1>{{ quotaDefinition()?.name }}</h1>
 }
 
 @if (quotaDefinition(); as quotaDefinition) {
-  <div class="quota-definition-base quota-definition-page">
+  <div class="quota-definition-page">
     <app-loading-page [isLoading]="detailsLoading$" text="Retrieving details">
-      <div class="quota-definition-base__name-sub-text">Name</div>
-      <h2 class="quota-definition-base__name">{{ quotaDefinition.name }}</h2>
-      <div class="quota-definition-base__basic-services">
-        <div class="quota-definition-base__basic-services-label">Non Basic Services Allowed:</div>
+      <div class="text-sm opacity-60">Name</div>
+      <h2 class="m-0">{{ quotaDefinition.name }}</h2>
+      <div class="flex my-2">
+        <div class="mr-[10px] opacity-60">Non Basic Services Allowed:</div>
         <app-boolean-indicator [isTrue]="quotaDefinition.paidServicesAllowed" type="yes-no" subtle="true">
         </app-boolean-indicator>
       </div>
       <app-tile-grid fit="true">
-        <h3 class="quota-definition-base__title">Quota Limits</h3>
-        <h4 class="quota-definition-base__section-header">Memory</h4>
+        <h3 class="my-[10px]">Quota Limits</h3>
+        <h4 class="my-[10px] opacity-60">Memory</h4>
         <app-tile-group class="tile-group-2-cols">
           <app-tile>
             <app-card-number-metric labelAtTop="true" icon="memory" label="Maximum Memory Usage" units="mb"
@@ -46,7 +46,7 @@ <h4 class="quota-definition-base__section-header">Memory</h4>
             </app-card-number-metric>
           </app-tile>
         </app-tile-group>
-        <h4 class="quota-definition-base__section-header">Application</h4>
+        <h4 class="my-[10px] opacity-60">Application</h4>
         <app-tile-group class="tile-group-2-cols">
           <app-tile>
             <app-card-number-metric labelAtTop="true" icon="application_instance" iconFont="stratos-icons"  label="Maximum Application Instances"
@@ -59,7 +59,7 @@ <h4 class="quota-definition-base__section-header">Application</h4>
             </app-card-number-metric>
           </app-tile>
         </app-tile-group>
-        <h4 class="quota-definition-base__section-header">Service</h4>
+        <h4 class="my-[10px] opacity-60">Service</h4>
         <app-tile-group class="tile-group-2-cols">
           <app-tile>
             <app-card-number-metric labelAtTop="true" icon="service" iconFont="stratos-icons" label="Maximum Services"
@@ -72,7 +72,7 @@ <h4 class="quota-definition-base__section-header">Service</h4>
             </app-card-number-metric>
           </app-tile>
         </app-tile-group>
-        <h4 class="quota-definition-base__section-header">Routes & Domains</h4>
+        <h4 class="my-[10px] opacity-60">Routes & Domains</h4>
         <app-tile-group class="tile-group-2-cols">
           <app-tile>
             <app-card-number-metric labelAtTop="true" icon="route" iconFont="stratos-icons" label="Maximum Routes"
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/quota-definition/quota-definition.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/quota-definition/quota-definition.component.ts
index 738c123551..c16ca95295 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/quota-definition/quota-definition.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/quota-definition/quota-definition.component.ts
@@ -31,7 +31,6 @@ export const QUOTA_ORG_GUID = 'org';
 @Component({
   selector: 'app-quota-definition',
   templateUrl: './quota-definition.component.html',
-  styleUrls: ['../quota-definition-base/quota-definition-base.component.scss'],
   providers: [
     getActiveRouteCfOrgSpaceProvider
   ],
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/space-quota-definition/space-quota-definition.component.html b/src/frontend/packages/cloud-foundry/src/features/cf/space-quota-definition/space-quota-definition.component.html
index c6b14d12ce..7f13fb0bfe 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/space-quota-definition/space-quota-definition.component.html
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/space-quota-definition/space-quota-definition.component.html
@@ -22,18 +22,18 @@ <h1>{{ spaceQuotaDefinition()?.name }}</h1>
 }
 
 @if (spaceQuotaDefinition(); as quotaDefinition) {
-  <div class="quota-definition-base space-quota-definition-page">
+  <div class="space-quota-definition-page">
     <app-loading-page [isLoading]="detailsLoading$" text="Retrieving details">
-      <div class="quota-definition-base__name-sub-text">Name</div>
-      <h2 class="quota-definition-base__name">{{ quotaDefinition.name }}</h2>
-      <div class="quota-definition-base__basic-services">
-        <div class="quota-definition-base__basic-services-label">Non Basic Services Allowed:</div>
+      <div class="text-sm opacity-60">Name</div>
+      <h2 class="m-0">{{ quotaDefinition.name }}</h2>
+      <div class="flex my-2">
+        <div class="mr-[10px] opacity-60">Non Basic Services Allowed:</div>
         <app-boolean-indicator [isTrue]="quotaDefinition.paidServicesAllowed" type="yes-no" subtle="true">
         </app-boolean-indicator>
       </div>
       <app-tile-grid fit="true">
-        <h3 class="quota-definition-base__title">Quota Limits</h3>
-        <h4 class="quota-definition-base__section-header">Memory</h4>
+        <h3 class="my-[10px]">Quota Limits</h3>
+        <h4 class="my-[10px] opacity-60">Memory</h4>
         <app-tile-group class="tile-group-2-cols">
           <app-tile>
             <app-card-number-metric labelAtTop="true" icon="memory" label="Maximum Memory Usage" units="mb"
@@ -46,7 +46,7 @@ <h4 class="quota-definition-base__section-header">Memory</h4>
             </app-card-number-metric>
           </app-tile>
         </app-tile-group>
-        <h4 class="quota-definition-base__section-header">Application</h4>
+        <h4 class="my-[10px] opacity-60">Application</h4>
         <app-tile-group class="tile-group-2-cols">
           <app-tile>
             <app-card-number-metric labelAtTop="true" icon="application_instance" iconFont="stratos-icons" label="Maximum Application Instances"
@@ -59,7 +59,7 @@ <h4 class="quota-definition-base__section-header">Application</h4>
             </app-card-number-metric>
           </app-tile>
         </app-tile-group>
-        <h4 class="quota-definition-base__section-header">Service</h4>
+        <h4 class="my-[10px] opacity-60">Service</h4>
         <app-tile-group class="tile-group-2-cols">
           <app-tile>
             <app-card-number-metric labelAtTop="true" icon="service" iconFont="stratos-icons" label="Maximum Services"
@@ -72,7 +72,7 @@ <h4 class="quota-definition-base__section-header">Service</h4>
             </app-card-number-metric>
           </app-tile>
         </app-tile-group>
-        <h4 class="quota-definition-base__section-header">Routes</h4>
+        <h4 class="my-[10px] opacity-60">Routes</h4>
         <app-tile-group class="tile-group-2-cols">
           <app-tile>
             <app-card-number-metric labelAtTop="true" icon="route" iconFont="stratos-icons" label="Maximum Routes"
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/space-quota-definition/space-quota-definition.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/space-quota-definition/space-quota-definition.component.ts
index 7e928364a9..c221987729 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/space-quota-definition/space-quota-definition.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/space-quota-definition/space-quota-definition.component.ts
@@ -30,7 +30,6 @@ export const QUOTA_SPACE_GUID = 'space';
 
 @Component({
   selector: 'app-space-quota-definition',
-  styleUrls: ['../quota-definition-base/quota-definition-base.component.scss'],
   templateUrl: './space-quota-definition.component.html',
   providers: [
     getActiveRouteCfOrgSpaceProvider
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-admin-add-user-warning/cf-admin-add-user-warning.component.html b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-admin-add-user-warning/cf-admin-add-user-warning.component.html
index b8f789b7a6..3d131588fd 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-admin-add-user-warning/cf-admin-add-user-warning.component.html
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-admin-add-user-warning/cf-admin-add-user-warning.component.html
@@ -1,6 +1,6 @@
 @if (show$ | async) {
-  <app-card class="user-warning">
-    <span class="material-icons user-warning__icon">warning</span>There are too many users to show those without roles. To add a
+  <app-card class="items-center flex text-sm mb-3 px-[22px] py-3">
+    <span class="material-icons text-[22px] mr-[13px]">warning</span>There are too many users to show those without roles. To add a
     user to this {{isOrg ? 'organization' : 'space'}} please use the `Manage Roles By Username` button above
   </app-card>
 }
\ No newline at end of file
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-admin-add-user-warning/cf-admin-add-user-warning.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-admin-add-user-warning/cf-admin-add-user-warning.component.scss
deleted file mode 100644
index 0e265f156c..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-admin-add-user-warning/cf-admin-add-user-warning.component.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.user-warning {
-  align-items: center;
-  display: flex;
-  font-size: 14px;
-  margin-bottom: 12px;
-  padding: 12px 22px;
-
-  &__icon {
-    font-size: 22px;
-    margin-right: 13px;
-  }
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-admin-add-user-warning/cf-admin-add-user-warning.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-admin-add-user-warning/cf-admin-add-user-warning.component.ts
index b1516de807..325ba94d83 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-admin-add-user-warning/cf-admin-add-user-warning.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-admin-add-user-warning/cf-admin-add-user-warning.component.ts
@@ -12,7 +12,6 @@ import { waitForCFPermissions } from '../../cf.helpers';
 @Component({
   selector: 'app-cf-admin-add-user-warning',
   templateUrl: './cf-admin-add-user-warning.component.html',
-  styleUrls: ['./cf-admin-add-user-warning.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-applications/cloud-foundry-applications-signal.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-applications/cloud-foundry-applications-signal.component.scss
deleted file mode 100644
index 8b9f52ec88..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-applications/cloud-foundry-applications-signal.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-:host {
-  display: block;
-  height: 100%;
-  min-height: 0;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-applications/cloud-foundry-applications-signal.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-applications/cloud-foundry-applications-signal.component.ts
index 4785228540..825e61443e 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-applications/cloud-foundry-applications-signal.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-applications/cloud-foundry-applications-signal.component.ts
@@ -31,7 +31,7 @@ import type { StApp } from '../../../../services/endpoint-data/stratos-types';
 @Component({
   selector: 'app-cloud-foundry-applications-signal',
   templateUrl: './cloud-foundry-applications-signal.component.html',
-  styleUrls: ['./cloud-foundry-applications-signal.component.scss'],
+  host: { class: 'app-host-fill' },
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-cells/cloud-foundry-cell/cloud-foundry-cell-summary/cloud-foundry-cell-summary.component.html b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-cells/cloud-foundry-cell/cloud-foundry-cell-summary/cloud-foundry-cell-summary.component.html
index 664f66305d..6760a403da 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-cells/cloud-foundry-cell/cloud-foundry-cell-summary/cloud-foundry-cell-summary.component.html
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-cells/cloud-foundry-cell/cloud-foundry-cell-summary/cloud-foundry-cell-summary.component.html
@@ -1,16 +1,16 @@
-<app-card class="cell-summary__summary">
+<app-card class="mb-5">
   <app-card-status [status$]="status$"></app-card-status>
   <app-card-content>
-    <div class="cell-summary__summary__app-metadata">
-      <div class="cell-summary__summary__app-metadata--twoCols">
-        <app-metadata-item icon="perm_identity" label="ID">{{ (cfCellService.cellMetric$ | async)?.bosh_job_id}}</app-metadata-item>
+    <div class="flex flex-row">
+      <div class="flex-1">
+        <app-metadata-item class="mt-0" icon="perm_identity" label="ID">{{ (cfCellService.cellMetric$ | async)?.bosh_job_id}}</app-metadata-item>
         <app-metadata-item icon="perm_identity" label="Name">{{ (cfCellService.cellMetric$ | async)?.bosh_job_name}}</app-metadata-item>
         @if ((cfCellService.cellMetric$ | async)?.bosh_deployment; as bosh_deployment) {
           <app-metadata-item icon="perm_identity" label="Deployment">{{ bosh_deployment }}</app-metadata-item>
         }
       </div>
-      <div class="cell-summary__summary__app-metadata--twoCols">
-        <app-metadata-item icon="wallpaper" label="Environment">{{ (cfCellService.cellMetric$ | async)?.environment}}</app-metadata-item>
+      <div class="flex-1">
+        <app-metadata-item class="mt-0" icon="wallpaper" label="Environment">{{ (cfCellService.cellMetric$ | async)?.environment}}</app-metadata-item>
         <app-metadata-item icon="local_hospital" label="Healthy" matTooltip="Has the cell passed the garden backend health check?">
           <app-boolean-indicator [isTrue]="(status$ | async) === 'ok'" type="yes-no" [subtle]="false" [showText]="true"></app-boolean-indicator>
         </app-metadata-item>
@@ -22,7 +22,7 @@
   </app-card-content>
 </app-card>
 
-<app-tile-grid [fit]="false" class="cell-summary__usage">
+<app-tile-grid [fit]="false">
   <app-tile-group class="tile-group-3-cols">
     <app-tile>
       <app-card-number-metric icon="memory" label="Memory" units="mb" value="{{ cfCellService.usageMemory$ | async}} " limit="{{ cfCellService.totalMemory$ | async}}"></app-card-number-metric>
@@ -36,7 +36,7 @@
   </app-tile-group>
 </app-tile-grid>
 
-<div class="cell-summary__health">
+<div>
   @if (healthListConfig(); as cfg) {
     <app-signal-list [config]="cfg"></app-signal-list>
   }
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-cells/cloud-foundry-cell/cloud-foundry-cell-summary/cloud-foundry-cell-summary.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-cells/cloud-foundry-cell/cloud-foundry-cell-summary/cloud-foundry-cell-summary.component.scss
deleted file mode 100644
index 316cf9bff2..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-cells/cloud-foundry-cell/cloud-foundry-cell-summary/cloud-foundry-cell-summary.component.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.cell-summary {
-
-  &__summary {
-    margin-bottom: 20px;
-
-    &__app-metadata {
-      display: flex;
-      flex-direction: row;
-
-      &--twoCols {
-        flex: 1;
-
-        app-metadata-item:first-child {
-          margin-top: 0;
-        }
-      }
-    }
-  }
-
-
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-cells/cloud-foundry-cell/cloud-foundry-cell-summary/cloud-foundry-cell-summary.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-cells/cloud-foundry-cell/cloud-foundry-cell-summary/cloud-foundry-cell-summary.component.ts
index db77531e5c..a7ab60ba97 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-cells/cloud-foundry-cell/cloud-foundry-cell-summary/cloud-foundry-cell-summary.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-cells/cloud-foundry-cell/cloud-foundry-cell-summary/cloud-foundry-cell-summary.component.ts
@@ -30,7 +30,6 @@ import { CardNumberMetricComponent } from '../../../../../../../../core/src/shar
 @Component({
   selector: 'app-cloud-foundry-cell-summary',
   templateUrl: './cloud-foundry-cell-summary.component.html',
-  styleUrls: ['./cloud-foundry-cell-summary.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-marketplace/cloud-foundry-marketplace-signal.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-marketplace/cloud-foundry-marketplace-signal.component.scss
deleted file mode 100644
index 8b9f52ec88..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-marketplace/cloud-foundry-marketplace-signal.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-:host {
-  display: block;
-  height: 100%;
-  min-height: 0;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-marketplace/cloud-foundry-marketplace-signal.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-marketplace/cloud-foundry-marketplace-signal.component.ts
index 09a5a13824..50af6a9fff 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-marketplace/cloud-foundry-marketplace-signal.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-marketplace/cloud-foundry-marketplace-signal.component.ts
@@ -27,7 +27,7 @@ import type { StServiceOffering } from '../../../../services/endpoint-data/strat
 @Component({
   selector: 'app-cloud-foundry-marketplace-signal',
   templateUrl: './cloud-foundry-marketplace-signal.component.html',
-  styleUrls: ['./cloud-foundry-marketplace-signal.component.scss'],
+  host: { class: 'app-host-fill' },
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-invite-user-link/cloud-foundry-invite-user-link.component.html b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-invite-user-link/cloud-foundry-invite-user-link.component.html
index 877dc6f34c..d2df8cfe3f 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-invite-user-link/cloud-foundry-invite-user-link.component.html
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-invite-user-link/cloud-foundry-invite-user-link.component.html
@@ -1,9 +1,9 @@
 @if ((inviteUserDetails$ | async); as inviteUserDetails) {
-  <app-card class="invite-user-details">
+  <app-card class="mb-3 px-6 py-1.5">
     <app-card-content>
-      <div class="invite-user-details__content">
-        <div class="invite-user-details__text">{{inviteUserDetails.text}}</div>
-        <button class="btn btn-ghost invite-user-details__button"
+      <div class="flex items-baseline">
+        <div class="pr-[5px]">{{inviteUserDetails.text}}</div>
+        <button class="btn btn-ghost"
           (click)="inviteUser(inviteUserDetails.url)">Invite
         Users</button>
       </div>
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-invite-user-link/cloud-foundry-invite-user-link.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-invite-user-link/cloud-foundry-invite-user-link.component.scss
deleted file mode 100644
index 5c8a7a057b..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-invite-user-link/cloud-foundry-invite-user-link.component.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.invite-user-details {
-  margin-bottom: 12px;
-  padding: 6px 24px;
-
-  &__text {
-    padding-right: 5px;
-  }
-  &__content {
-    align-items: baseline;
-    display: flex;
-  }
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-invite-user-link/cloud-foundry-invite-user-link.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-invite-user-link/cloud-foundry-invite-user-link.component.ts
index 4324f1283d..247a3798cc 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-invite-user-link/cloud-foundry-invite-user-link.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-invite-user-link/cloud-foundry-invite-user-link.component.ts
@@ -17,7 +17,6 @@ interface UserInviteStepperLink {
 @Component({
   selector: 'app-cloud-foundry-invite-user-link',
   templateUrl: './cloud-foundry-invite-user-link.component.html',
-  styleUrls: ['./cloud-foundry-invite-user-link.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/cloud-foundry-organization-spaces-signal.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/cloud-foundry-organization-spaces-signal.component.scss
deleted file mode 100644
index 8b9f52ec88..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/cloud-foundry-organization-spaces-signal.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-:host {
-  display: block;
-  height: 100%;
-  min-height: 0;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/cloud-foundry-organization-spaces-signal.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/cloud-foundry-organization-spaces-signal.component.ts
index 41fc8bee05..79e988ae06 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/cloud-foundry-organization-spaces-signal.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/cloud-foundry-organization-spaces-signal.component.ts
@@ -32,7 +32,7 @@ import type { StSpace } from '../../../../../services/endpoint-data/stratos-type
 @Component({
   selector: 'app-cloud-foundry-organization-spaces-signal',
   templateUrl: './cloud-foundry-organization-spaces-signal.component.html',
-  styleUrls: ['./cloud-foundry-organization-spaces-signal.component.scss'],
+  host: { class: 'app-host-fill' },
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-apps/cloud-foundry-space-apps-signal.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-apps/cloud-foundry-space-apps-signal.component.scss
deleted file mode 100644
index 8b9f52ec88..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-apps/cloud-foundry-space-apps-signal.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-:host {
-  display: block;
-  height: 100%;
-  min-height: 0;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-apps/cloud-foundry-space-apps-signal.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-apps/cloud-foundry-space-apps-signal.component.ts
index 239da7779c..b7bbbf8b00 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-apps/cloud-foundry-space-apps-signal.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-apps/cloud-foundry-space-apps-signal.component.ts
@@ -37,7 +37,7 @@ import type { StApp } from '../../../../../../../services/endpoint-data/stratos-
 @Component({
   selector: 'app-cloud-foundry-space-apps-signal',
   templateUrl: './cloud-foundry-space-apps-signal.component.html',
-  styleUrls: ['./cloud-foundry-space-apps-signal.component.scss'],
+  host: { class: 'app-host-fill' },
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-routes/cloud-foundry-space-routes-signal.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-routes/cloud-foundry-space-routes-signal.component.scss
deleted file mode 100644
index 8b9f52ec88..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-routes/cloud-foundry-space-routes-signal.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-:host {
-  display: block;
-  height: 100%;
-  min-height: 0;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-routes/cloud-foundry-space-routes-signal.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-routes/cloud-foundry-space-routes-signal.component.ts
index 34f7a1b429..b2242ee829 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-routes/cloud-foundry-space-routes-signal.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-routes/cloud-foundry-space-routes-signal.component.ts
@@ -34,7 +34,7 @@ import type { StApp, StRoute } from '../../../../../../../services/endpoint-data
 @Component({
   selector: 'app-cloud-foundry-space-routes-signal',
   templateUrl: './cloud-foundry-space-routes-signal.component.html',
-  styleUrls: ['./cloud-foundry-space-routes-signal.component.scss'],
+  host: { class: 'app-host-fill' },
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-service-instances/cloud-foundry-space-service-instances-signal.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-service-instances/cloud-foundry-space-service-instances-signal.component.scss
deleted file mode 100644
index 8b9f52ec88..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-service-instances/cloud-foundry-space-service-instances-signal.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-:host {
-  display: block;
-  height: 100%;
-  min-height: 0;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-service-instances/cloud-foundry-space-service-instances-signal.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-service-instances/cloud-foundry-space-service-instances-signal.component.ts
index dbe5b53312..bf4ddf2df9 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-service-instances/cloud-foundry-space-service-instances-signal.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-service-instances/cloud-foundry-space-service-instances-signal.component.ts
@@ -36,7 +36,7 @@ import type { StServiceInstance } from '../../../../../../../services/endpoint-d
 @Component({
   selector: 'app-cloud-foundry-space-service-instances-signal',
   templateUrl: './cloud-foundry-space-service-instances-signal.component.html',
-  styleUrls: ['./cloud-foundry-space-service-instances-signal.component.scss'],
+  host: { class: 'app-host-fill' },
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-user-service-instances/cloud-foundry-space-user-service-instances-signal.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-user-service-instances/cloud-foundry-space-user-service-instances-signal.component.scss
deleted file mode 100644
index 8b9f52ec88..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-user-service-instances/cloud-foundry-space-user-service-instances-signal.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-:host {
-  display: block;
-  height: 100%;
-  min-height: 0;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-user-service-instances/cloud-foundry-space-user-service-instances-signal.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-user-service-instances/cloud-foundry-space-user-service-instances-signal.component.ts
index 349f51daa0..5b0160da59 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-user-service-instances/cloud-foundry-space-user-service-instances-signal.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-user-service-instances/cloud-foundry-space-user-service-instances-signal.component.ts
@@ -37,7 +37,7 @@ import type { StServiceInstance } from '../../../../../../../services/endpoint-d
 @Component({
   selector: 'app-cloud-foundry-space-user-service-instances-signal',
   templateUrl: './cloud-foundry-space-user-service-instances-signal.component.html',
-  styleUrls: ['./cloud-foundry-space-user-service-instances-signal.component.scss'],
+  host: { class: 'app-host-fill' },
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-users/cloud-foundry-space-users.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-users/cloud-foundry-space-users.component.scss
deleted file mode 100644
index 8b9f52ec88..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-users/cloud-foundry-space-users.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-:host {
-  display: block;
-  height: 100%;
-  min-height: 0;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-users/cloud-foundry-space-users.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-users/cloud-foundry-space-users.component.ts
index 7d623f1eab..1c8d92377a 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-users/cloud-foundry-space-users.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-users/cloud-foundry-space-users.component.ts
@@ -35,7 +35,7 @@ import type { StUser, StUserSpaceRole } from '../../../../../../../services/endp
 @Component({
   selector: 'app-cloud-foundry-space-users',
   templateUrl: './cloud-foundry-space-users.component.html',
-  styleUrls: ['./cloud-foundry-space-users.component.scss'],
+  host: { class: 'app-host-fill' },
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cloud-foundry-organizations-signal.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cloud-foundry-organizations-signal.component.scss
deleted file mode 100644
index 8b9f52ec88..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cloud-foundry-organizations-signal.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-:host {
-  display: block;
-  height: 100%;
-  min-height: 0;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cloud-foundry-organizations-signal.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cloud-foundry-organizations-signal.component.ts
index 0e31f6b7fa..3f94218119 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cloud-foundry-organizations-signal.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cloud-foundry-organizations-signal.component.ts
@@ -37,7 +37,7 @@ import type { StOrg } from '../../../../services/endpoint-data/stratos-types';
 @Component({
   selector: 'app-cloud-foundry-organizations-signal',
   templateUrl: './cloud-foundry-organizations-signal.component.html',
-  styleUrls: ['./cloud-foundry-organizations-signal.component.scss'],
+  host: { class: 'app-host-fill' },
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-routes/cloud-foundry-routes-signal.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-routes/cloud-foundry-routes-signal.component.scss
deleted file mode 100644
index 8b9f52ec88..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-routes/cloud-foundry-routes-signal.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-:host {
-  display: block;
-  height: 100%;
-  min-height: 0;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-routes/cloud-foundry-routes-signal.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-routes/cloud-foundry-routes-signal.component.ts
index 3dae94b9f5..8d655461b1 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-routes/cloud-foundry-routes-signal.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-routes/cloud-foundry-routes-signal.component.ts
@@ -36,7 +36,7 @@ import type { StApp, StRoute } from '../../../../services/endpoint-data/stratos-
 @Component({
   selector: 'app-cloud-foundry-routes-signal',
   templateUrl: './cloud-foundry-routes-signal.component.html',
-  styleUrls: ['./cloud-foundry-routes-signal.component.scss'],
+  host: { class: 'app-host-fill' },
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-services/cloud-foundry-services-signal.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-services/cloud-foundry-services-signal.component.scss
deleted file mode 100644
index 8b9f52ec88..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-services/cloud-foundry-services-signal.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-:host {
-  display: block;
-  height: 100%;
-  min-height: 0;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-services/cloud-foundry-services-signal.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-services/cloud-foundry-services-signal.component.ts
index 0039aff75c..32dcd989b8 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-services/cloud-foundry-services-signal.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-services/cloud-foundry-services-signal.component.ts
@@ -32,7 +32,7 @@ import type { StServiceInstance } from '../../../../services/endpoint-data/strat
 @Component({
   selector: 'app-cloud-foundry-services-signal',
   templateUrl: './cloud-foundry-services-signal.component.html',
-  styleUrls: ['./cloud-foundry-services-signal.component.scss'],
+  host: { class: 'app-host-fill' },
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-summary-tab/cloud-foundry-summary-tab.component.html b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-summary-tab/cloud-foundry-summary-tab.component.html
index e2c7af35ea..77367b920b 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-summary-tab/cloud-foundry-summary-tab.component.html
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-summary-tab/cloud-foundry-summary-tab.component.html
@@ -9,7 +9,7 @@
   </app-polling-indicator>
 </app-page-sub-nav>
 
-<div class="summary h-full overflow-y-auto">
+<div class="flex h-full min-h-full w-full overflow-y-auto">
   <app-tile-grid fit="true">
     <app-tile-group class="tile-group-1-cols">
       <app-tile>
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-summary-tab/cloud-foundry-summary-tab.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-summary-tab/cloud-foundry-summary-tab.component.scss
deleted file mode 100644
index dc360c8f01..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-summary-tab/cloud-foundry-summary-tab.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.summary {
-  display: flex;
-  min-height: 100%;
-  width: 100%;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-summary-tab/cloud-foundry-summary-tab.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-summary-tab/cloud-foundry-summary-tab.component.ts
index a652613906..ea51318058 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-summary-tab/cloud-foundry-summary-tab.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-summary-tab/cloud-foundry-summary-tab.component.ts
@@ -25,7 +25,6 @@ import { EndpointDataRegistry } from '../../../../services/endpoint-data/endpoin
 @Component({
   selector: 'app-cloud-foundry-summary-tab',
   templateUrl: './cloud-foundry-summary-tab.component.html',
-  styleUrls: ['./cloud-foundry-summary-tab.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-users/cloud-foundry-users.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-users/cloud-foundry-users.component.scss
deleted file mode 100644
index 8b9f52ec88..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-users/cloud-foundry-users.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-:host {
-  display: block;
-  height: 100%;
-  min-height: 0;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-users/cloud-foundry-users.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-users/cloud-foundry-users.component.ts
index ca2d4992b9..74e70b61bc 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-users/cloud-foundry-users.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-users/cloud-foundry-users.component.ts
@@ -26,7 +26,7 @@ import type { StUser, StUserOrgRole, StUserSpaceRole } from '../../../../service
 @Component({
   selector: 'app-cloud-foundry-users',
   templateUrl: './cloud-foundry-users.component.html',
-  styleUrls: ['./cloud-foundry-users.component.scss'],
+  host: { class: 'app-host-fill' },
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/services/detach-service-instance/detach-apps/detach-apps.component.scss b/src/frontend/packages/cloud-foundry/src/features/services/detach-service-instance/detach-apps/detach-apps.component.scss
deleted file mode 100644
index 5f81e6c60e..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/services/detach-service-instance/detach-apps/detach-apps.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-:host {
-  flex: 1;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/services/detach-service-instance/detach-apps/detach-apps.component.ts b/src/frontend/packages/cloud-foundry/src/features/services/detach-service-instance/detach-apps/detach-apps.component.ts
index 63a55c8240..877cde83a6 100644
--- a/src/frontend/packages/cloud-foundry/src/features/services/detach-service-instance/detach-apps/detach-apps.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/services/detach-service-instance/detach-apps/detach-apps.component.ts
@@ -30,7 +30,7 @@ interface DetachAppRow {
 @Component({
   selector: 'app-detach-apps',
   templateUrl: './detach-apps.component.html',
-  styleUrls: ['./detach-apps.component.scss'],
+  host: { class: 'app-host-flex-1' },
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [],
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance-base-step/add-service-instance-base-step.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance-base-step/add-service-instance-base-step.component.html
index 20a2ba742b..56268d8440 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance-base-step/add-service-instance-base-step.component.html
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance-base-step/add-service-instance-base-step.component.html
@@ -3,9 +3,9 @@
 </app-page-header>
 <app-steppers [cancel]="cancelUrl">
   <app-step [hideNextButton]="true">
-    <div class="select-service-step">
+    <div class="w-full">
       <h3>Choose service type to {{ bindApp ? 'bind' : 'create' }}</h3>
-      <p class="select-service-step__help">
+      <p class="pb-[10px]">
         Want to know more? Follow the links for information about <a
           href="https://docs.cloudfoundry.org/devguide/services/" target="_blank">marketplace services</a> and <a
           href="https://docs.cloudfoundry.org/devguide/services/user-provided.html" target="_blank">user provided
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance-base-step/add-service-instance-base-step.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance-base-step/add-service-instance-base-step.component.scss
deleted file mode 100644
index bc1f60623e..0000000000
--- a/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance-base-step/add-service-instance-base-step.component.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.select-service-step {
-  width: 100%;
-  &__help {
-    padding-bottom: 10px;
-  }
-}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance-base-step/add-service-instance-base-step.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance-base-step/add-service-instance-base-step.component.ts
index 9b9645d8f4..20cf556707 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance-base-step/add-service-instance-base-step.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance-base-step/add-service-instance-base-step.component.ts
@@ -22,7 +22,6 @@ interface ICreateServiceTilesData extends ITileData {
 @Component({
   selector: 'app-add-service-instance-base-step',
   templateUrl: './add-service-instance-base-step.component.html',
-  styleUrls: ['./add-service-instance-base-step.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance/add-service-instance.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance/add-service-instance.component.html
index 370dd54840..559cb9b708 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance/add-service-instance.component.html
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance/add-service-instance.component.html
@@ -2,7 +2,7 @@
   {{ title$ | async }}
 </app-page-header>
 @if (initialisedService(); as inited) {
-  <div class="add-service-instance">
+  <div class="h-full">
     <app-steppers [cancel]="modeService.cancelUrl">
       @if (serviceType === serviceTypes.SERVICE) {
         @if (modeService.viewDetail.showSelectCf && !isSpaceScoped()) {
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance/add-service-instance.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance/add-service-instance.component.scss
deleted file mode 100644
index 9dd3671b81..0000000000
--- a/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance/add-service-instance.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.add-service-instance {
-  height: 100%;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance/add-service-instance.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance/add-service-instance.component.ts
index 24a9a684ef..ddc300d6c9 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance/add-service-instance.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance/add-service-instance.component.ts
@@ -59,7 +59,6 @@ import { SpecifyUserProvidedDetailsComponent } from '../specify-user-provided-de
 @Component({
   selector: 'app-add-service-instance',
   templateUrl: './add-service-instance.component.html',
-  styleUrls: ['./add-service-instance.component.scss'],
   providers: [
     CreateServiceInstanceHelperServiceFactory,
     TitleCasePipe,
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/application-action-bar/application-action-bar.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/application-action-bar/application-action-bar.component.html
index 13ea580f0b..c7a09b2c10 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/application-action-bar/application-action-bar.component.html
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/application-action-bar/application-action-bar.component.html
@@ -1,7 +1,7 @@
 <app-page-sub-nav>
-  <div class="summary__sub-nav">
+  <div class="flex w-full">
     @if (applicationService.appSpace$ | async; as space) {
-      <div class="summary__actions">
+      <div class="flex">
         <ng-container
           *appCfUserPermission="manageAppPermission;spaceGuid:space.guid;endpointGuid:applicationService.cfGuid">
           <app-page-sub-nav-section>
@@ -54,7 +54,7 @@
         </ng-container>
       </div>
     }
-    <a class="summary__anchor btn btn-info btn-icon"
+    <a class="flex justify-center btn btn-info btn-icon"
       [class.pointer-events-none]="(applicationService.applicationUrl$ | async) === null || (applicationService.application$ | async)?.app.entity.state !== 'STARTED'"
       [class.opacity-50]="(applicationService.applicationUrl$ | async) === null || (applicationService.application$ | async)?.app.entity.state !== 'STARTED'"
       href="{{applicationService.applicationUrl$ | async}}" target="_blank" title="Visit">
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/application-action-bar/application-action-bar.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/application-action-bar/application-action-bar.component.scss
deleted file mode 100644
index 05b075a2ba..0000000000
--- a/src/frontend/packages/cloud-foundry/src/shared/components/application-action-bar/application-action-bar.component.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-// Styles preserved verbatim from build-tab.component.scss for the moved
-// sub-nav block. Byte-equivalent rendering on the Summary tab depends on
-// these class names matching the original layout exactly.
-.summary {
-  &__actions {
-    display: flex;
-  }
-  &__sub-nav {
-    display: flex;
-    width: 100%;
-
-    &__poll {
-      display: flex;
-      flex: 1;
-      justify-content: flex-end;
-    }
-  }
-
-  &__anchor {
-    display: flex;
-    justify-content: center;
-  }
-}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/application-action-bar/application-action-bar.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/application-action-bar/application-action-bar.component.ts
index 48160b56c4..d2bad164eb 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/application-action-bar/application-action-bar.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/application-action-bar/application-action-bar.component.ts
@@ -30,7 +30,6 @@ import { AppLifecycleProgressService } from '../app-lifecycle-progress/app-lifec
 @Component({
   selector: 'app-application-action-bar',
   templateUrl: './application-action-bar.component.html',
-  styleUrls: ['./application-action-bar.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-app-status/card-app-status.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-app-status/card-app-status.component.scss
deleted file mode 100644
index 39f4a1e3e3..0000000000
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-app-status/card-app-status.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.card-app-status {
-  &__large {
-    font-size: 16px;
-  }
-}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-info/card-cf-info.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-info/card-cf-info.component.html
index 6fbf67f7b0..dccbb90be3 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-info/card-cf-info.component.html
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-info/card-cf-info.component.html
@@ -1,12 +1,12 @@
 <div class="usage-card">
   <div class="custom-card">
     <div class="card-content">
-      <div class="app-metadata">
-        <div class="app-metadata__two-cols">
-          <app-metadata-item icon="title" label="Description">{{ description() }}</app-metadata-item>
+      <div class="flex flex-row">
+        <div class="flex-1">
+          <app-metadata-item class="mt-0" icon="title" label="Description">{{ description() }}</app-metadata-item>
           <app-metadata-item icon="link" label="Instance Address" [clipboardValue]="apiUrl()">
-            <div class="app-metadata__address">
-              <div class="app-metadata__address__value">{{ apiUrl() }}</div>
+            <div class="flex min-h-6">
+              <div class="items-center flex mr-7 break-all">{{ apiUrl() }}</div>
             </div>
           </app-metadata-item>
           <app-metadata-item icon="info_outline" label="CF API Version">
@@ -17,8 +17,8 @@
             {{ v }}</app-metadata-item>
           }
         </div>
-        <div class="app-metadata__two-cols">
-          <app-metadata-item icon="person" label="Account Username">
+        <div class="flex-1">
+          <app-metadata-item class="mt-0" icon="person" label="Account Username">
             {{ endpointInfo()?.entity?.user?.name }}
             @if (endpointInfo()?.entity?.user?.admin) {
               <span> (Administrator)</span>
@@ -27,12 +27,12 @@
           <app-metadata-item icon="virtual_guest" iconFont="stratos-icons" label="SSH Access">
           {{ hasSSHAccess() ? 'Available' : 'Not available' }}</app-metadata-item>
           <app-metadata-item icon="email" label="User Invitation Support">
-            <div class="user-invites">
+            <div>
               @if (canConfigureInvites()) {
                 @if (invitesConfigured()) {
-                  Configured - <button class="btn btn-ghost" (click)="deConfigureUserInvites()">Disable</button>
+                  Configured - <button class="btn btn-ghost [line-height:initial] m-0 min-w-[auto] p-0" (click)="deConfigureUserInvites()">Disable</button>
                 } @else {
-                  Not Configured - <button class="btn btn-ghost"
+                  Not Configured - <button class="btn btn-ghost [line-height:initial] m-0 min-w-[auto] p-0"
                   (click)="configureUserInvites()">Configure</button>
                 }
               } @else {
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-info/card-cf-info.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-info/card-cf-info.component.scss
deleted file mode 100644
index 065f26c240..0000000000
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-info/card-cf-info.component.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-.app-metadata {
-  display: flex;
-  flex-direction: row;
-
-  &__two-cols {
-    flex: 1;
-
-    app-metadata-item:first-child {
-      margin-top: 0;
-    }
-  }
-
-  &__address {
-    display: flex;
-    min-height: 24px;
-    &__value {
-      align-items: center;
-      display: flex;
-      margin-right: 28px;
-      word-break: break-all;
-    }
-  }
-}
-
-.user-invites {
-  button {
-    line-height: initial;
-    margin: 0;
-    min-width: auto;
-    padding: 0;
-  }
-}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-info/card-cf-info.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-info/card-cf-info.component.ts
index 56f7e022a0..70286f2e2f 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-info/card-cf-info.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-info/card-cf-info.component.ts
@@ -22,7 +22,6 @@ import { UserInviteConfigureService, UserInviteService } from '../../../../featu
 @Component({
   selector: 'app-card-cf-info',
   templateUrl: './card-cf-info.component.html',
-  styleUrls: ['./card-cf-info.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-org-user-details/card-cf-org-user-details.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-org-user-details/card-cf-org-user-details.component.html
index 6c381cee80..d8c9b66221 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-org-user-details/card-cf-org-user-details.component.html
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-org-user-details/card-cf-org-user-details.component.html
@@ -1,12 +1,12 @@
 <div class="cf-org-usage">
   <div class="custom-card">
     <div class="card-header">
-      <h2 class="card-title">Summary</h2>
+      <h2 class="font-medium">Summary</h2>
     </div>
     <div class="card-content">
-      <div class="app-metadata">
-        <div class="app-metadata__two-cols">
-          <app-metadata-item label="User Org Role">
+      <div class="flex flex-row">
+        <div class="flex-1">
+          <app-metadata-item class="mt-0" label="User Org Role">
             {{ (cfOrgService.userOrgRole$ | async) }}
           </app-metadata-item>
           <app-metadata-item label="Quota Definition">
@@ -20,8 +20,8 @@ <h2 class="card-title">Summary</h2>
           </app-metadata-item>
         </div>
 
-        <div class="app-metadata__two-cols">
-          <app-metadata-item label="Org Status">
+        <div class="flex-1">
+          <app-metadata-item class="mt-0" label="Org Status">
             {{ cfOrgService.orgDataService.org()?.status | capitalizeFirst }}
           </app-metadata-item>
           <app-metadata-item label="Created At">
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-org-user-details/card-cf-org-user-details.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-org-user-details/card-cf-org-user-details.component.scss
deleted file mode 100644
index 27bc592cd3..0000000000
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-org-user-details/card-cf-org-user-details.component.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@reference 'tailwindcss';
-
-.app-metadata {
-  @apply flex flex-row;
-
-  &__two-cols {
-    @apply flex-1;
-
-    app-metadata-item:first-child {
-      @apply mt-0;
-    }
-  }
-}
-
-.card-title {
-  @apply font-medium;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-org-user-details/card-cf-org-user-details.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-org-user-details/card-cf-org-user-details.component.ts
index 039198e33c..a006352ef2 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-org-user-details/card-cf-org-user-details.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-org-user-details/card-cf-org-user-details.component.ts
@@ -12,7 +12,6 @@ import { CapitalizeFirstPipe } from '@stratosui/core';
 @Component({
   selector: 'app-card-cf-org-user-details',
   templateUrl: './card-cf-org-user-details.component.html',
-  styleUrls: ['./card-cf-org-user-details.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-space-details/card-cf-space-details.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-space-details/card-cf-space-details.component.html
index 5fc760b467..f03c6a1323 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-space-details/card-cf-space-details.component.html
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-space-details/card-cf-space-details.component.html
@@ -1,12 +1,12 @@
 <div class="cf-space-usage">
   <div class="custom-card">
     <div class="card-header">
-      <h2 class="card-title">Summary</h2>
+      <h2 class="font-medium">Summary</h2>
     </div>
     <div class="card-content">
-      <div class="app-metadata">
-        <div class="app-metadata__two-cols">
-          <app-metadata-item label="User Space Role/s">
+      <div class="flex flex-row">
+        <div class="flex-1">
+          <app-metadata-item class="mt-0" label="User Space Role/s">
             {{ (cfSpaceService.userRole$ | async) }}
           </app-metadata-item>
           <app-metadata-item label="Quota Definition">
@@ -29,8 +29,8 @@ <h2 class="card-title">Summary</h2>
           </app-boolean-indicator>
         </app-metadata-item>
       </div>
-      <div class="app-metadata__two-cols">
-        <app-metadata-item label="SSH Access">
+      <div class="flex-1">
+        <app-metadata-item class="mt-0" label="SSH Access">
           {{ allowSshStatus$ | async }}
         </app-metadata-item>
         <app-metadata-item label="Created At">
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-space-details/card-cf-space-details.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-space-details/card-cf-space-details.component.scss
deleted file mode 100644
index 27bc592cd3..0000000000
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-space-details/card-cf-space-details.component.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@reference 'tailwindcss';
-
-.app-metadata {
-  @apply flex flex-row;
-
-  &__two-cols {
-    @apply flex-1;
-
-    app-metadata-item:first-child {
-      @apply mt-0;
-    }
-  }
-}
-
-.card-title {
-  @apply font-medium;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-space-details/card-cf-space-details.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-space-details/card-cf-space-details.component.ts
index f27f5ac1f5..9cec255f2b 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-space-details/card-cf-space-details.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-space-details/card-cf-space-details.component.ts
@@ -12,7 +12,6 @@ import { CloudFoundrySpaceService } from '../../../../features/cf/services/cloud
 @Component({
   selector: 'app-card-cf-space-details',
   templateUrl: './card-cf-space-details.component.html',
-  styleUrls: ['./card-cf-space-details.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-user-info/card-cf-user-info.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-user-info/card-cf-user-info.component.html
index 3fbe6df3ec..d9e02b9312 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-user-info/card-cf-user-info.component.html
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-user-info/card-cf-user-info.component.html
@@ -1,4 +1,4 @@
-<div class="user-card">
+<div class="h-full">
   <app-card>
     <app-card-header>
       <app-card-title>User Information</app-card-title>
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-user-info/card-cf-user-info.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-user-info/card-cf-user-info.component.scss
deleted file mode 100644
index 5d029e4c3d..0000000000
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-user-info/card-cf-user-info.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.user-card {
-  height: 100%;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-user-info/card-cf-user-info.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-user-info/card-cf-user-info.component.ts
index 95cf17ba39..3ce2dd4946 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-user-info/card-cf-user-info.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-user-info/card-cf-user-info.component.ts
@@ -12,7 +12,6 @@ import { CloudFoundryEndpointService } from '../../../../features/cf/services/cl
 @Component({
   selector: 'app-card-cf-user-info',
   templateUrl: './card-cf-user-info.component.html',
-  styleUrls: ['./card-cf-user-info.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cards/service-summary-card/service-summary-card.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/cards/service-summary-card/service-summary-card.component.html
index 949ae5a03e..8eb9a8a11b 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cards/service-summary-card/service-summary-card.component.html
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/cards/service-summary-card/service-summary-card.component.html
@@ -1,15 +1,15 @@
 @let v = view();
 
-<app-meta-card class="service-summary">
+<app-meta-card>
   <app-meta-card-title>
-    <div class="service-summary__title">
-      <div class="service-summary__title__link">Summary</div>
+    <div class="flex flex-row justify-between">
+      <div>Summary</div>
     </div>
   </app-meta-card-title>
   <app-meta-card-item customStyle="long-text">
     <app-meta-card-key></app-meta-card-key>
     <app-meta-card-value>
-      <span class="service-summary__description">
+      <span class="leading-normal">
         {{ v.description }}
       </span>
     </app-meta-card-value>
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cards/service-summary-card/service-summary-card.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/cards/service-summary-card/service-summary-card.component.scss
deleted file mode 100644
index 3b151b37b0..0000000000
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cards/service-summary-card/service-summary-card.component.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.service-summary {
-  &__title {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-  }
-  &__description {
-    line-height: 1.5em;
-  }
-}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cards/service-summary-card/service-summary-card.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/cards/service-summary-card/service-summary-card.component.ts
index 76a311ddeb..de0032d5fd 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cards/service-summary-card/service-summary-card.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/cards/service-summary-card/service-summary-card.component.ts
@@ -44,7 +44,6 @@ interface SummaryView {
 @Component({
   selector: 'app-service-summary-card',
   templateUrl: './service-summary-card.component.html',
-  styleUrls: ['./service-summary-card.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cf-endpoint-details/cf-endpoint-details.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/cf-endpoint-details/cf-endpoint-details.component.html
index 55ac5a3ee4..be031863c4 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cf-endpoint-details/cf-endpoint-details.component.html
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/cf-endpoint-details/cf-endpoint-details.component.html
@@ -1,7 +1,7 @@
 @if (row?.user; as user) {
-  <div class="cf-details">
-    <div class="cf-details__line">
-      <span class="cf-details__icon" matTooltip="Username">
+  <div class="flex flex-col">
+    <div class="flex items-center">
+      <span class="flex items-center justify-center mr-2" matTooltip="Username">
         <span class="material-icons">person</span>
       </span>
       {{ user.name}} @if (user.admin) {
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cf-endpoint-details/cf-endpoint-details.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/cf-endpoint-details/cf-endpoint-details.component.scss
deleted file mode 100644
index 4a125b2a60..0000000000
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cf-endpoint-details/cf-endpoint-details.component.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.cf-details {
-  display: flex;
-  flex-direction: column;
-
-  &__line {
-    align-items: center;
-    display: flex;
-  }
-
-  &__icon {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-    margin-right: 8px;
-  }
-}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cf-endpoint-details/cf-endpoint-details.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/cf-endpoint-details/cf-endpoint-details.component.ts
index 0611266337..473b92a681 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cf-endpoint-details/cf-endpoint-details.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/cf-endpoint-details/cf-endpoint-details.component.ts
@@ -5,7 +5,6 @@ import { CustomTooltipDirective, EndpointListDetailsComponent } from '@stratosui
 @Component({
   selector: 'lib-cf-endpoint-details',
   templateUrl: './cf-endpoint-details.component.html',
-  styleUrls: ['./cf-endpoint-details.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cli-info/cli-info.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/cli-info/cli-info.component.html
index c44c022c07..0519f58379 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cli-info/cli-info.component.html
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/cli-info/cli-info.component.html
@@ -1,6 +1,6 @@
 @if (context) {
-  <div class="cli-info">
-    <div class="cli-info__content">
+  <div class="flex flex-col h-full w-full">
+    <div class="flex-1 pb-12">
       <div>
         <p>Use the Cloud Foundry CLI to execute commands directly against a Cloud Foundry instance.</p>
         <h4>Getting Started</h4>
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cli-info/cli-info.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/cli-info/cli-info.component.scss
deleted file mode 100644
index f563b221f2..0000000000
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cli-info/cli-info.component.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.cli-info {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-  &__content {
-    flex: 1;
-    padding-bottom: 48px;
-  }
-  &__footer {
-    flex: 0 0 36px;
-    text-align: right;
-  }
-}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cli-info/cli-info.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/cli-info/cli-info.component.ts
index 76e462bfa6..9f9ae4dcbb 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cli-info/cli-info.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/cli-info/cli-info.component.ts
@@ -14,7 +14,6 @@ export interface CFAppCLIInfoContext {
 @Component({
   selector: 'app-cli-info',
   templateUrl: './cli-info.component.html',
-  styleUrls: ['./cli-info.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/create-application/create-application-step1/create-application-step1.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/create-application/create-application-step1/create-application-step1.component.scss
deleted file mode 100644
index 5f81e6c60e..0000000000
--- a/src/frontend/packages/cloud-foundry/src/shared/components/create-application/create-application-step1/create-application-step1.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-:host {
-  flex: 1;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/create-application/create-application-step1/create-application-step1.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/create-application/create-application-step1/create-application-step1.component.ts
index d5333d4541..6c6bc56ed4 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/create-application/create-application-step1/create-application-step1.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/create-application/create-application-step1/create-application-step1.component.ts
@@ -18,7 +18,7 @@ import { CfOrgSpaceDataService } from '../../../data-services/cf-org-space-servi
 @Component({
   selector: 'app-create-application-step1',
   templateUrl: './create-application-step1.component.html',
-  styleUrls: ['./create-application-step1.component.scss'],
+  host: { class: 'app-host-flex-1' },
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/env-var-view/env-var-view.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/env-var-view/env-var-view.component.html
index 76fe4773cd..764fe6665e 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/env-var-view/env-var-view.component.html
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/env-var-view/env-var-view.component.html
@@ -1,21 +1,21 @@
-<div class="env-var-view">
+<div class="flex flex-col">
   <h2 class="dialog-title">
     Environment Variables
   </h2>
-  <div class="dialog-content env-var-view__content">
+  <div class="dialog-content">
     <app-code-block>
       <ng-container>
-        <pre class="env-var-view__content__key">{{data.key}}=@if (!isObject(data.value)) {
+        <pre class="mb-0">{{data.key}}=@if (!isObject(data.value)) {
           <span>{{data.value}}</span>
         }</pre>
         @if (isObject(data.value)) {
-          <pre class="env-var-view__content__value">{{ data.value | json }}</pre>
+          <pre class="mt-0 whitespace-pre-wrap">{{ data.value | json }}</pre>
         }
       </ng-container>
     </app-code-block>
   </div>
 
-  <div class="dialog-actions env-var-view__actions">
+  <div class="dialog-actions flex flex-row-reverse justify-self-start">
     <button class="btn btn-primary" (click)="dialogRef.close()">Close</button>
   </div>
 </div>
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/env-var-view/env-var-view.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/env-var-view/env-var-view.component.scss
deleted file mode 100644
index c72d472100..0000000000
--- a/src/frontend/packages/cloud-foundry/src/shared/components/env-var-view/env-var-view.component.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.env-var-view {
-  display: flex;
-  flex-direction: column;
-  &__content {
-    &__value {
-      margin-top: 0;
-      white-space: pre-wrap;
-    }
-    &__key {
-      margin-bottom: 0;
-    }
-  }
-  &__actions {
-    display: flex;
-    flex-direction: row-reverse;
-    justify-self: flex-start;
-  }
-}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/env-var-view/env-var-view.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/env-var-view/env-var-view.component.ts
index c0f72e9923..54606b40e1 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/env-var-view/env-var-view.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/env-var-view/env-var-view.component.ts
@@ -6,7 +6,6 @@ import { MAT_DIALOG_DATA, TailwindDialogRef, CodeBlockComponent } from '@stratos
 @Component({
   selector: 'app-env-var-view',
   templateUrl: './env-var-view.component.html',
-  styleUrls: ['./env-var-view.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/app-variables/table-cell-edit-variable/table-cell-edit-variable.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/app-variables/table-cell-edit-variable/table-cell-edit-variable.component.html
index 8ebac27716..20e1031228 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/app-variables/table-cell-edit-variable/table-cell-edit-variable.component.html
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/app-variables/table-cell-edit-variable/table-cell-edit-variable.component.html
@@ -1,11 +1,11 @@
 @if (row.name === dataSource.editRow?.name) {
-  <div class="cell-edit-variable">
+  <div class="w-full">
     <input class="input" name="envVarValue" [value]="dataSource.editRow?.value"
       (input)="dataSource.editRow.value = $event.target.value" />
   </div>
 }
 @if (row.name !== dataSource.editRow?.name) {
-  <span class="cell-value-variable" role="button" tabindex="0"
+  <span class="cursor-pointer" role="button" tabindex="0"
     (click)="showPopup()"
     (keydown.enter)="showPopup()"
     (keydown.space)="showPopup(); $event.preventDefault()">{{row.value}}</span>
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/app-variables/table-cell-edit-variable/table-cell-edit-variable.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/app-variables/table-cell-edit-variable/table-cell-edit-variable.component.scss
deleted file mode 100644
index 8719056b30..0000000000
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/app-variables/table-cell-edit-variable/table-cell-edit-variable.component.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@reference 'tailwindcss';
-
-.form-field {
-  .form-field-infix {
-    @apply w-auto;
-  }
-}
-
-.cell-edit-variable {
-  @apply w-full;
-}
-
-.cell-value-variable {
-  @apply cursor-pointer;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/app-variables/table-cell-edit-variable/table-cell-edit-variable.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/app-variables/table-cell-edit-variable/table-cell-edit-variable.component.ts
index 8c32683ab3..d94625b2d9 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/app-variables/table-cell-edit-variable/table-cell-edit-variable.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/app-variables/table-cell-edit-variable/table-cell-edit-variable.component.ts
@@ -7,7 +7,6 @@ import { ListAppEnvVar } from '../cf-app-variables.types';
 @Component({
   selector: 'app-table-cell-edit-variable',
   templateUrl: './table-cell-edit-variable.component.html',
-  styleUrls: ['./table-cell-edit-variable.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: []
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-confirm-roles/table-cell-confirm-org-space/table-cell-confirm-org-space.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-confirm-roles/table-cell-confirm-org-space/table-cell-confirm-org-space.component.scss
deleted file mode 100644
index 0c0ba70785..0000000000
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-confirm-roles/table-cell-confirm-org-space/table-cell-confirm-org-space.component.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-div {
-  align-items: center;
-  display: flex;
-  > span {
-    padding-left: 5px;
-  }
-}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-confirm-roles/table-cell-confirm-org-space/table-cell-confirm-org-space.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-confirm-roles/table-cell-confirm-org-space/table-cell-confirm-org-space.component.ts
index bcafdc11f1..a155b5de68 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-confirm-roles/table-cell-confirm-org-space/table-cell-confirm-org-space.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-confirm-roles/table-cell-confirm-org-space/table-cell-confirm-org-space.component.ts
@@ -7,7 +7,6 @@ import { TableCellCustom } from '../../../../../../../../core/src/shared/compone
 @Component({
   selector: 'app-table-cell-confirm-org-space',
   templateUrl: './table-cell-confirm-org-space.component.html',
-  styleUrls: ['./table-cell-confirm-org-space.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.html
index f5960550b5..6a69831e4c 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.html
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.html
@@ -1,9 +1,9 @@
 @if (!!offering) {
-  <app-meta-card class="service-card" [clickAction]="!disableCardClick ? goToServiceInstances:null"
+  <app-meta-card [clickAction]="!disableCardClick ? goToServiceInstances:null"
     >
     <app-meta-card-title noMargin="true">
-      <div class="service-card__title">
-        <app-multiline-title class="service-card__title__link">{{ getDisplayName() }}</app-multiline-title>
+      <div class="flex flex-row justify-between w-full">
+        <app-multiline-title>{{ getDisplayName() }}</app-multiline-title>
         <app-service-icon [service]="offering"></app-service-icon>
       </div>
     </app-meta-card-title>
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.scss
deleted file mode 100644
index 6d53ccf4ed..0000000000
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.service-card {
-  &__title {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    width: 100%;
-  }
-  &__icon-link {
-    align-items: center;
-    display: flex;
-    text-decoration: none;
-  }
-}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.ts
index a90e4142ef..077f9a7682 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.ts
@@ -32,7 +32,6 @@ import { TableCellServiceTagsComponent } from '../table-cell-service-tags/table-
 @Component({
   selector: 'app-cf-service-card',
   templateUrl: './cf-service-card.component.html',
-  styleUrls: ['./cf-service-card.component.scss'],
   providers: [EntityServiceFactory],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-spaces-service-instances/table-cell-service/table-cell-service.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-spaces-service-instances/table-cell-service/table-cell-service.component.html
index 22a412e9fc..bdbc39e167 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-spaces-service-instances/table-cell-service/table-cell-service.component.html
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-spaces-service-instances/table-cell-service/table-cell-service.component.html
@@ -1,19 +1,19 @@
 @if (isUserProvidedServiceInstance === true) {
   <div>
-    <div>User Provided</div>
+    <div class="pb-[5px]">User Provided</div>
   </div>
 }
 @if (isUserProvidedServiceInstance === false) {
   <div>
-    <div><a [routerLink]="serviceUrl$ | async">{{ serviceName$ | async }}</a></div>
-    <div>Plan: {{ row.entity.service_plan?.entity.name }}</div>
-    <div class="broker">
-      Broker: <app-table-cell-service-broker [row]="service$ | async" [config]="brokerNameConfig">
+    <div class="pb-[5px]"><a [routerLink]="serviceUrl$ | async">{{ serviceName$ | async }}</a></div>
+    <div class="pb-[5px]">Plan: {{ row.entity.service_plan?.entity.name }}</div>
+    <div class="pb-[5px] flex">
+      Broker: <app-table-cell-service-broker class="pl-[5px]" [row]="service$ | async" [config]="brokerNameConfig">
     </app-table-cell-service-broker>
   </div>
-  <div class="broker">
-    Scope: <app-table-cell-service-broker [row]="service$ | async" [config]="brokerScopeConfig">
+  <div class="pb-[5px] flex">
+    Scope: <app-table-cell-service-broker class="pl-[5px]" [row]="service$ | async" [config]="brokerScopeConfig">
   </app-table-cell-service-broker>
 </div>
 </div>
-}
\ No newline at end of file
+}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-spaces-service-instances/table-cell-service/table-cell-service.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-spaces-service-instances/table-cell-service/table-cell-service.component.scss
deleted file mode 100644
index d28afe7bc1..0000000000
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-spaces-service-instances/table-cell-service/table-cell-service.component.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-div > div {
-  padding-bottom: 5px;
-}
-
-.broker {
-  display: flex;
-  app-table-cell-service-broker {
-    padding-left: 5px;
-  }
-}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-spaces-service-instances/table-cell-service/table-cell-service.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-spaces-service-instances/table-cell-service/table-cell-service.component.ts
index 5afba7409a..9f2482c236 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-spaces-service-instances/table-cell-service/table-cell-service.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-spaces-service-instances/table-cell-service/table-cell-service.component.ts
@@ -22,7 +22,6 @@ import {
 @Component({
   selector: 'app-table-cell-service',
   templateUrl: './table-cell-service.component.html',
-  styleUrls: ['./table-cell-service.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-users-org-space-roles/table-cell-select-org/table-cell-select-org.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-users-org-space-roles/table-cell-select-org/table-cell-select-org.component.scss
deleted file mode 100644
index b4023948ac..0000000000
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-users-org-space-roles/table-cell-select-org/table-cell-select-org.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@reference 'tailwindcss';
-
-.form-field {
-  @apply pt-1.5;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-users-org-space-roles/table-cell-select-org/table-cell-select-org.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-users-org-space-roles/table-cell-select-org/table-cell-select-org.component.ts
index 56585bbefe..01ebb6a9d9 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-users-org-space-roles/table-cell-select-org/table-cell-select-org.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-users-org-space-roles/table-cell-select-org/table-cell-select-org.component.ts
@@ -20,7 +20,6 @@ import { CfUsersRolesDataService } from '../../../../../../services/domain-data/
 @Component({
   selector: 'app-table-cell-select-org',
   templateUrl: './table-cell-select-org.component.html',
-  styleUrls: ['./table-cell-select-org.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/select-service/select-service.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/select-service/select-service.component.scss
deleted file mode 100644
index 5f81e6c60e..0000000000
--- a/src/frontend/packages/cloud-foundry/src/shared/components/select-service/select-service.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-:host {
-  flex: 1;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/select-service/select-service.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/select-service/select-service.component.ts
index d2d1481ce5..8a4c2f08cf 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/select-service/select-service.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/select-service/select-service.component.ts
@@ -33,7 +33,7 @@ interface SelectServiceForm {
 @Component({
   selector: 'app-select-service',
   templateUrl: './select-service.component.html',
-  styleUrls: ['./select-service.component.scss'],
+  host: { class: 'app-host-flex-1' },
   providers: [
     ServicesWallService
   ],
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/service-icon/service-icon.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/service-icon/service-icon.component.html
index 7726ea0cf8..92193a882e 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/service-icon/service-icon.component.html
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/service-icon/service-icon.component.html
@@ -1,8 +1,8 @@
-<div class='service-icon' [ngClass]="{'service-icon__padding': addMenuPadding}">
+<div class="self-end flex" [ngClass]="{'pr-6': addMenuPadding}">
   @if (!image) {
-    <app-custom-icon [fontSet]="'stratos-icons'">service</app-custom-icon>
+    <app-custom-icon class="text-[48px] h-12 w-12" [fontSet]="'stratos-icons'">service</app-custom-icon>
   }
   @if (image) {
-    <img [src]="image" (error)="imageLoadError()" alt="">
+    <img class="h-12 w-12" [src]="image" (error)="imageLoadError()" alt="">
   }
-</div>
\ No newline at end of file
+</div>
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/service-icon/service-icon.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/service-icon/service-icon.component.scss
deleted file mode 100644
index b0e96ddd6c..0000000000
--- a/src/frontend/packages/cloud-foundry/src/shared/components/service-icon/service-icon.component.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.service-icon {
-  align-self: flex-end;
-  display: flex;
-  &__padding {
-    padding-right: 24px;
-  }
-  img,
-  mat-icon,
-  app-custom-icon,
-  .custom-icon {
-    font-size: 48px;
-    height: 48px;
-    width: 48px;
-  }
-}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/service-icon/service-icon.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/service-icon/service-icon.component.ts
index 2d1a5dffb6..392d873d4a 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/service-icon/service-icon.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/service-icon/service-icon.component.ts
@@ -7,7 +7,6 @@ import { StServiceOffering } from '../../../services/endpoint-data/stratos-types
 @Component({
   selector: 'app-service-icon',
   templateUrl: './service-icon.component.html',
-  styleUrls: ['./service-icon.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/service-instance-last-op/service-instance-last-op.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/service-instance-last-op/service-instance-last-op.component.html
index db9e58a3b0..e10587e629 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/service-instance-last-op/service-instance-last-op.component.html
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/service-instance-last-op/service-instance-last-op.component.html
@@ -1,16 +1,16 @@
 @if (serviceInstance.entity.last_operation; as lo) {
-  <div class="last-op" [ngClass]="{ 'align-right': alignRight}">
-    <div class="last-op--row1">
+  <div>
+    <div class="items-center flex pb-[5px]" [ngClass]="alignRight ? 'justify-end' : 'justify-start'">
       {{lo.type | titlecase }}
       @if (lo.state==='in progress') {
-        <app-boolean-indicator class="last-op--item" [isTrue]="true"
+        <app-boolean-indicator [ngClass]="alignRight ? 'pl-[5px] pr-0' : 'pr-[5px]'" [isTrue]="true"
         type="progress-progress" [subtle]="false" [showText]="false"></app-boolean-indicator>
       } @else {
-        <app-boolean-indicator class="last-op--item" [isTrue]="lo.state==='succeeded'" type="yes-no" [subtle]="false"
+        <app-boolean-indicator [ngClass]="alignRight ? 'pl-[5px] pr-0' : 'pr-[5px]'" [isTrue]="lo.state==='succeeded'" type="yes-no" [subtle]="false"
           [showText]="false">
         </app-boolean-indicator>
       }
     </div>
-    <div class="last-op--row2">{{ lo.updated_at | date:'medium' }}</div>
+    <div>{{ lo.updated_at | date:'medium' }}</div>
   </div>
-}
\ No newline at end of file
+}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/service-instance-last-op/service-instance-last-op.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/service-instance-last-op/service-instance-last-op.component.scss
deleted file mode 100644
index 4445e48872..0000000000
--- a/src/frontend/packages/cloud-foundry/src/shared/components/service-instance-last-op/service-instance-last-op.component.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.last-op {
-  &--row1 {
-    align-items: center;
-    display: flex;
-    justify-content: flex-start;
-    padding-bottom: 5px;
-  }
-  &--item {
-    padding-right: 5px;
-  }
-}
-
-.align-right {
-  .last-op--row1 {
-    justify-content: flex-end;
-  }
-  .last-op--item {
-    padding-left: 5px;
-    padding-right: 0;
-  }
-}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/service-instance-last-op/service-instance-last-op.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/service-instance-last-op/service-instance-last-op.component.ts
index 2a28237d67..65f4cc6545 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/service-instance-last-op/service-instance-last-op.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/service-instance-last-op/service-instance-last-op.component.ts
@@ -8,7 +8,6 @@ import { IServiceInstance } from '../../../cf-api-svc.types';
 @Component({
   selector: 'app-service-instance-last-op',
   templateUrl: './service-instance-last-op.component.html',
-  styleUrls: ['./service-instance-last-op.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/core/src/app.component.html b/src/frontend/packages/core/src/app.component.html
index cfb4698d9b..8712b41a3a 100644
--- a/src/frontend/packages/core/src/app.component.html
+++ b/src/frontend/packages/core/src/app.component.html
@@ -2,6 +2,6 @@
 
   <router-outlet></router-outlet>
   @if (userId$ | async; as userId) {
-    <div class="user-id" id="__stratos-userid__">{{userId}}</div>
+    <div class="hidden" id="__stratos-userid__">{{userId}}</div>
   }
 </span>
\ No newline at end of file
diff --git a/src/frontend/packages/core/src/app.component.scss b/src/frontend/packages/core/src/app.component.scss
deleted file mode 100644
index cfe82df042..0000000000
--- a/src/frontend/packages/core/src/app.component.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-html,
-body,
-material-app {
-  height: 100%;
-  margin: 0;
-  width: 100%;
-}
-
-:host {
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 0%;
-  height: 100vh;
-  min-height: 0;
-}
-
-.user-id {
-  display: none;
-}
diff --git a/src/frontend/packages/core/src/app.component.ts b/src/frontend/packages/core/src/app.component.ts
index fc813bbe2d..042221abaf 100644
--- a/src/frontend/packages/core/src/app.component.ts
+++ b/src/frontend/packages/core/src/app.component.ts
@@ -15,7 +15,7 @@ import { LoggedInService } from './logged-in.service';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
+  host: { class: 'flex flex-col flex-1 h-screen min-h-0' },
   standalone: false,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
diff --git a/src/frontend/packages/core/src/core/dot-content/dot-content.component.html b/src/frontend/packages/core/src/core/dot-content/dot-content.component.html
index bd1388b2d3..94e2698176 100644
--- a/src/frontend/packages/core/src/core/dot-content/dot-content.component.html
+++ b/src/frontend/packages/core/src/core/dot-content/dot-content.component.html
@@ -1 +1 @@
-<span class="dot" [ngClass]="{'disabled': disabled}"><ng-content></ng-content></span>
+<span class="inline-flex items-center justify-center rounded-full h-6 w-6 p-0 text-sm leading-6" [ngClass]="{'disabled': disabled}"><ng-content></ng-content></span>
diff --git a/src/frontend/packages/core/src/core/dot-content/dot-content.component.scss b/src/frontend/packages/core/src/core/dot-content/dot-content.component.scss
deleted file mode 100644
index 2236f57880..0000000000
--- a/src/frontend/packages/core/src/core/dot-content/dot-content.component.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.dot {
-  align-items: center;
-  border-radius: 50%;
-  display: flex;
-  font-size: 14px;
-  height: 24px;
-  justify-content: center;
-  line-height: 24px;
-  padding: 0;
-  width: 24px;
-}
diff --git a/src/frontend/packages/core/src/core/dot-content/dot-content.component.ts b/src/frontend/packages/core/src/core/dot-content/dot-content.component.ts
index cfc0d36af9..e8677465d5 100644
--- a/src/frontend/packages/core/src/core/dot-content/dot-content.component.ts
+++ b/src/frontend/packages/core/src/core/dot-content/dot-content.component.ts
@@ -4,7 +4,6 @@ import { CommonModule } from '@angular/common';
 @Component({
   selector: 'app-dot-content',
   templateUrl: './dot-content.component.html',
-  styleUrls: ['./dot-content.component.scss'],
   standalone: true,
   imports: [
     CommonModule
diff --git a/src/frontend/packages/core/src/core/entity-favorite-star/entity-favorite-star.component.html b/src/frontend/packages/core/src/core/entity-favorite-star/entity-favorite-star.component.html
index ce3b24dcee..4354566e95 100644
--- a/src/frontend/packages/core/src/core/entity-favorite-star/entity-favorite-star.component.html
+++ b/src/frontend/packages/core/src/core/entity-favorite-star/entity-favorite-star.component.html
@@ -1,9 +1,9 @@
 @if ((endpointsService.disablePersistenceFeatures$ | async) === false) {
-  <div class="favorite-star" role="button" tabindex="0"
+  <div class="flex items-center cursor-pointer" role="button" tabindex="0"
     (click)="toggleFavorite($event)"
     (keydown.enter)="toggleFavorite($event)"
     (keydown.space)="toggleFavorite($event); $event.preventDefault()"
-    [ngClass]="{'favorite-star__small': small}">
+    [ngClass]="small ? 'h-5 w-5' : 'h-6 w-6'">
     @switch (isFavorite$ | async) {
       @case (true) {
         <app-custom-icon matTooltip="Unset as favorite" aria-label="Set as Favorite">star</app-custom-icon>
diff --git a/src/frontend/packages/core/src/core/entity-favorite-star/entity-favorite-star.component.scss b/src/frontend/packages/core/src/core/entity-favorite-star/entity-favorite-star.component.scss
deleted file mode 100644
index c27f56975a..0000000000
--- a/src/frontend/packages/core/src/core/entity-favorite-star/entity-favorite-star.component.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-$size: 24px;
-$small: 20px;
-.favorite-star {
-  align-items: center;
-  cursor: pointer;
-  display: flex;
-  height: $size;
-  width: $size;
-  &__small {
-    height: $small;
-    width: $small;
-    mat-icon {
-      font-size: $small;
-      height: $small;
-      line-height: $small;
-      width: $small;
-    }
-  }
-}
diff --git a/src/frontend/packages/core/src/core/entity-favorite-star/entity-favorite-star.component.spec.ts b/src/frontend/packages/core/src/core/entity-favorite-star/entity-favorite-star.component.spec.ts
index da0ab6f9e2..4c2f46052d 100644
--- a/src/frontend/packages/core/src/core/entity-favorite-star/entity-favorite-star.component.spec.ts
+++ b/src/frontend/packages/core/src/core/entity-favorite-star/entity-favorite-star.component.spec.ts
@@ -90,7 +90,7 @@ describe('EntityFavoriteStarComponent', () => {
     fixture.detectChanges();
     await fixture.whenStable();
 
-    const starEl: HTMLElement = element.querySelector('.favorite-star');
+    const starEl: HTMLElement = element.querySelector('[role="button"]');
     starEl.click();
     fixture.detectChanges();
     await fixture.whenStable();
@@ -123,7 +123,7 @@ describe('EntityFavoriteStarComponent', () => {
       expect(element.textContent).toContain('star');
 
       // Click the star to trigger confirmation dialog
-      const starEl: HTMLElement = element.querySelector('.favorite-star');
+      const starEl: HTMLElement = element.querySelector('[role="button"]');
       starEl.click();
       fixture.detectChanges();
       await vi.advanceTimersByTimeAsync(0);
@@ -175,7 +175,7 @@ describe('EntityFavoriteStarComponent', () => {
       await vi.advanceTimersByTimeAsync(0);
 
       // Click the star
-      const starEl: HTMLElement = element.querySelector('.favorite-star');
+      const starEl: HTMLElement = element.querySelector('[role="button"]');
       starEl.click();
       fixture.detectChanges();
       await vi.advanceTimersByTimeAsync(0);
diff --git a/src/frontend/packages/core/src/core/entity-favorite-star/entity-favorite-star.component.ts b/src/frontend/packages/core/src/core/entity-favorite-star/entity-favorite-star.component.ts
index ed017c21ab..6fabf306a5 100644
--- a/src/frontend/packages/core/src/core/entity-favorite-star/entity-favorite-star.component.ts
+++ b/src/frontend/packages/core/src/core/entity-favorite-star/entity-favorite-star.component.ts
@@ -13,7 +13,6 @@ import { CustomIconComponent } from '../../shared/components/custom-material/cus
 @Component({
   selector: 'app-entity-favorite-star',
   templateUrl: './entity-favorite-star.component.html',
-  styleUrls: ['./entity-favorite-star.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/core/src/core/log-out-dialog/log-out-dialog.component.html b/src/frontend/packages/core/src/core/log-out-dialog/log-out-dialog.component.html
index ac3d5ad0ac..d0a6c4f36e 100644
--- a/src/frontend/packages/core/src/core/log-out-dialog/log-out-dialog.component.html
+++ b/src/frontend/packages/core/src/core/log-out-dialog/log-out-dialog.component.html
@@ -1,15 +1,15 @@
-<div class="logout-dialog__outer">
-  <app-progress-bar class="logout-dialog__progress" mode="determinate" [value]="percentage">
+<div class="m-[-24px_-24px_0] p-[24px_50px] relative">
+  <app-progress-bar class="absolute inset-x-0 top-0" mode="determinate" [value]="percentage">
   </app-progress-bar>
-  <div class="dialog-content logout-dialog__content">
-    <div class="logout-dialog__message">
+  <div class="dialog-content p-5">
+    <div class="flex flex-row items-center">
       <i class="material-icons">pan_tool</i>
-      <div>
+      <div class="flex-1 text-lg font-bold">
         Are you still there?
       </div>
     </div>
   </div>
-  <div class="dialog-actions logout-dialog__actions">
+  <div class="dialog-actions justify-center">
     <button class="btn btn-primary" (click)="dialogRef.close(true)">Yes</button>
   </div>
 </div>
diff --git a/src/frontend/packages/core/src/core/log-out-dialog/log-out-dialog.component.scss b/src/frontend/packages/core/src/core/log-out-dialog/log-out-dialog.component.scss
deleted file mode 100644
index 49762d6159..0000000000
--- a/src/frontend/packages/core/src/core/log-out-dialog/log-out-dialog.component.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-mat-dialog-actions {
-  justify-content: flex-end;
-}
-
-.logout-dialog {
-  &__content {
-    padding: 20px;
-  }
-  &__progress {
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-  }
-  &__outer {
-    margin: -24px -24px 0;
-    padding: 24px 50px;
-    position: relative;
-  }
-  &__actions {
-    justify-content: center;
-  }
-  &__message {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-
-    > mat-icon {
-      flex: 0;
-      font-size: 48px;
-      height: 48px;
-      margin-right: 20px;
-      opacity: 0.7;
-      width: 48px;
-    }
-    > div {
-      flex: 1;
-      font-size: 18px;
-      font-weight: bold;
-    }
-  }
-}
-
diff --git a/src/frontend/packages/core/src/core/log-out-dialog/log-out-dialog.component.ts b/src/frontend/packages/core/src/core/log-out-dialog/log-out-dialog.component.ts
index dbf4c95dec..66a0aa00b7 100644
--- a/src/frontend/packages/core/src/core/log-out-dialog/log-out-dialog.component.ts
+++ b/src/frontend/packages/core/src/core/log-out-dialog/log-out-dialog.component.ts
@@ -10,7 +10,6 @@ import { AppProgressBarComponent } from '../../shared/components/progress-bar/ap
 @Component({
   selector: 'app-log-out-dialog',
   templateUrl: './log-out-dialog.component.html',
-  styleUrls: ['./log-out-dialog.component.scss'],
   standalone: true,
   imports: [
     AppProgressBarComponent
diff --git a/src/frontend/packages/core/src/core/stateful-icon/stateful-icon.component.html b/src/frontend/packages/core/src/core/stateful-icon/stateful-icon.component.html
index f588c4c043..6791bdd815 100644
--- a/src/frontend/packages/core/src/core/stateful-icon/stateful-icon.component.html
+++ b/src/frontend/packages/core/src/core/stateful-icon/stateful-icon.component.html
@@ -1,5 +1,5 @@
 @if (selectedState || stateKey === allStateKeys.BUSY) {
-  <div class="stateful-icon">
+  <div class="flex items-center justify-center leading-6 h-6 w-6">
     @if (stateKey !== allStateKeys.BUSY) {
       <app-custom-icon [inline]="inline"
         [ngClass]="{'warning': stateKey === allStateKeys.WARNING, 'error': stateKey === allStateKeys.ERROR, 'ok': stateKey === allStateKeys.OK }"
diff --git a/src/frontend/packages/core/src/core/stateful-icon/stateful-icon.component.scss b/src/frontend/packages/core/src/core/stateful-icon/stateful-icon.component.scss
deleted file mode 100644
index 842deb1d4d..0000000000
--- a/src/frontend/packages/core/src/core/stateful-icon/stateful-icon.component.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-$size: 24px;
-.stateful-icon {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  line-height: $size;
-}
-.stateful-icon,
-mat-spinner {
-  height: $size;
-  width: $size;
-}
diff --git a/src/frontend/packages/core/src/core/stateful-icon/stateful-icon.component.ts b/src/frontend/packages/core/src/core/stateful-icon/stateful-icon.component.ts
index 6de24fa55b..9403cc95fe 100644
--- a/src/frontend/packages/core/src/core/stateful-icon/stateful-icon.component.ts
+++ b/src/frontend/packages/core/src/core/stateful-icon/stateful-icon.component.ts
@@ -19,7 +19,6 @@ type StatefulIconDefinition = IconDefinition | IconTemplateDefinition;
 @Component({
   selector: 'app-stateful-icon',
   templateUrl: './stateful-icon.component.html',
-  styleUrls: ['./stateful-icon.component.scss'],
   standalone: true,
   imports: [
     CommonModule,
diff --git a/src/frontend/packages/core/src/features/api-keys/api-keys-page/api-keys-page.component.scss b/src/frontend/packages/core/src/features/api-keys/api-keys-page/api-keys-page.component.scss
deleted file mode 100644
index 291e1522e1..0000000000
--- a/src/frontend/packages/core/src/features/api-keys/api-keys-page/api-keys-page.component.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.keys-page {
-  &__new {
-    mat-card {
-      margin-bottom: 24px;
-      mat-card-header {
-        align-items: center;
-        display: flex;
-        margin-bottom: 15px;
-        mat-icon {
-          margin-right: 5px;
-        }
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/src/frontend/packages/core/src/features/api-keys/api-keys-page/api-keys-page.component.ts b/src/frontend/packages/core/src/features/api-keys/api-keys-page/api-keys-page.component.ts
index f233ab52a8..0ddcf6e010 100644
--- a/src/frontend/packages/core/src/features/api-keys/api-keys-page/api-keys-page.component.ts
+++ b/src/frontend/packages/core/src/features/api-keys/api-keys-page/api-keys-page.component.ts
@@ -26,7 +26,6 @@ import { CustomIconComponent } from '../../../shared/components/custom-material/
 @Component({
   selector: 'app-api-keys-page',
   templateUrl: './api-keys-page.component.html',
-  styleUrls: ['./api-keys-page.component.scss'],
   providers: [ApiKeysSignalConfigService],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
diff --git a/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-checkbox-cell/backup-checkbox-cell.component.html b/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-checkbox-cell/backup-checkbox-cell.component.html
index 36d4c93c22..fe419122f5 100644
--- a/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-checkbox-cell/backup-checkbox-cell.component.html
+++ b/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-checkbox-cell/backup-checkbox-cell.component.html
@@ -1,2 +1,2 @@
-<app-checkbox [(ngModel)]="$any(service.state[row.guid])[config.type]" [disabled]="disabled()" (change)="validate()">
+<app-checkbox class="ml-[15px]" [(ngModel)]="$any(service.state[row.guid])[config.type]" [disabled]="disabled()" (change)="validate()">
 </app-checkbox>
\ No newline at end of file
diff --git a/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-checkbox-cell/backup-checkbox-cell.component.scss b/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-checkbox-cell/backup-checkbox-cell.component.scss
deleted file mode 100644
index de979ef749..0000000000
--- a/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-checkbox-cell/backup-checkbox-cell.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-app-checkbox {
-  margin-left: 15px;
-}
diff --git a/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-checkbox-cell/backup-checkbox-cell.component.ts b/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-checkbox-cell/backup-checkbox-cell.component.ts
index de40cf9b18..659e3486ca 100644
--- a/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-checkbox-cell/backup-checkbox-cell.component.ts
+++ b/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-checkbox-cell/backup-checkbox-cell.component.ts
@@ -14,7 +14,6 @@ interface BackupCheckboxConfig {
 @Component({
   selector: 'app-backup-checkbox-cell',
   templateUrl: './backup-checkbox-cell.component.html',
-  styleUrls: ['./backup-checkbox-cell.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-restore-endpoints/backup-restore-endpoints.component.html b/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-restore-endpoints/backup-restore-endpoints.component.html
index 1156c9ea06..f638d4c3f7 100644
--- a/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-restore-endpoints/backup-restore-endpoints.component.html
+++ b/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-restore-endpoints/backup-restore-endpoints.component.html
@@ -4,7 +4,7 @@ <h1>Backup/Restore Endpoints</h1>
 
 <app-steppers cancel="/endpoints">
   <app-step [hideNextButton]="true" [signalHandle]="signalHandle">
-    <div class="tiles">
+    <div class="flex-1">
       <p>Create a backup of endpoints and their connection details or restore from an existing backup.</p>
       <app-tile-selector [options]="tileSelectorConfig" (selection)="selectedTile = $event"></app-tile-selector>
     </div>
diff --git a/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-restore-endpoints/backup-restore-endpoints.component.scss b/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-restore-endpoints/backup-restore-endpoints.component.scss
deleted file mode 100644
index 712926fb2c..0000000000
--- a/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-restore-endpoints/backup-restore-endpoints.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.tiles {
-  flex: 1;
-}
diff --git a/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-restore-endpoints/backup-restore-endpoints.component.ts b/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-restore-endpoints/backup-restore-endpoints.component.ts
index 7c567593a9..bf44fd0f32 100644
--- a/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-restore-endpoints/backup-restore-endpoints.component.ts
+++ b/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-restore-endpoints/backup-restore-endpoints.component.ts
@@ -14,7 +14,6 @@ interface IAppTileData extends ITileData {
 @Component({
   selector: 'app-backup-restore-endpoints',
   templateUrl: './backup-restore-endpoints.component.html',
-  styleUrls: ['./backup-restore-endpoints.component.scss'],
   standalone: true,
   imports: [
     PageHeaderComponent,
diff --git a/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/credentials-auth-form.component.html b/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/credentials-auth-form.component.html
index c9461f23f0..babd8b11eb 100644
--- a/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/credentials-auth-form.component.html
+++ b/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/credentials-auth-form.component.html
@@ -1,5 +1,5 @@
 <div [formGroup]="formGroup">
-  <div formGroupName="authValues" class="credentials-auth__form">
+  <div formGroupName="authValues" class="flex flex-col">
     <app-form-field>
       <input class="w-full placeholder:!text-transparent focus:outline-none" appInput placeholder="{{config?.usernameLabel}}" formControlName="username" required autocomplete="username">
     </app-form-field>
diff --git a/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/credentials-auth-form.component.scss b/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/credentials-auth-form.component.scss
deleted file mode 100644
index 5a1d42d2c5..0000000000
--- a/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/credentials-auth-form.component.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.credentials-auth {
-  &__form {
-    display: flex;
-    flex-direction: column;
-  }
-}
diff --git a/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/credentials-auth-form.component.ts b/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/credentials-auth-form.component.ts
index 816516a3c8..b3342cc2f7 100644
--- a/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/credentials-auth-form.component.ts
+++ b/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/credentials-auth-form.component.ts
@@ -14,7 +14,6 @@ interface CredentialsAuthForm {
 @Component({
   selector: 'app-credentials-auth-form',
   templateUrl: './credentials-auth-form.component.html',
-  styleUrls: ['./credentials-auth-form.component.scss'],
   standalone: true,
   imports: [
     ReactiveFormsModule,
diff --git a/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/none-auth-form.component.html b/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/none-auth-form.component.html
index a6cc831bf2..92850023bd 100644
--- a/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/none-auth-form.component.html
+++ b/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/none-auth-form.component.html
@@ -1,5 +1,5 @@
 <div>
-  <div class="none-auth__form">
+  <div class="flex flex-col mb-6">
     <p>Press 'Connect' to connect without authentication</p>
   </div>
 </div>
diff --git a/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/none-auth-form.component.scss b/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/none-auth-form.component.scss
deleted file mode 100644
index a1cd95660a..0000000000
--- a/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/none-auth-form.component.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.none-auth {
-  &__form {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 24px;
-  }
-}
diff --git a/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/none-auth-form.component.ts b/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/none-auth-form.component.ts
index 8ff175dd9b..a4b276c9d2 100644
--- a/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/none-auth-form.component.ts
+++ b/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/none-auth-form.component.ts
@@ -11,7 +11,6 @@ export interface NoneAuthFormValue {}
 @Component({
   selector: 'app-none-auth-form',
   templateUrl: './none-auth-form.component.html',
-  styleUrls: ['./none-auth-form.component.scss'],
   standalone: true,
   imports: [],
   changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/sso-auth-form.component.html b/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/sso-auth-form.component.html
index 1ba073dc25..40538f0cbb 100644
--- a/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/sso-auth-form.component.html
+++ b/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/sso-auth-form.component.html
@@ -1,5 +1,5 @@
 <div [formGroup]="formGroup">
-  <div formGroupName="authValues" class="sso-auth__form">
+  <div formGroupName="authValues" class="flex flex-col">
     <p>You will be redirected to the Single Sign-On UI for this endpoint and returned to <app-product-name></app-product-name> upon completion.</p>
   </div>
 </div>
diff --git a/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/sso-auth-form.component.scss b/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/sso-auth-form.component.scss
deleted file mode 100644
index ba26a862d7..0000000000
--- a/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/sso-auth-form.component.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.sso-auth {
-  &__form {
-    display: flex;
-    flex-direction: column;
-  }
-}
diff --git a/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/sso-auth-form.component.ts b/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/sso-auth-form.component.ts
index 0d3e6f698f..c135cf092d 100644
--- a/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/sso-auth-form.component.ts
+++ b/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/sso-auth-form.component.ts
@@ -15,7 +15,6 @@ interface SsoAuthForm {
 @Component({
   selector: 'app-sso-auth-form',
   templateUrl: './sso-auth-form.component.html',
-  styleUrls: ['./sso-auth-form.component.scss'],
   standalone: true,
   imports: [
     ReactiveFormsModule,
diff --git a/src/frontend/packages/core/src/features/endpoints/connect-endpoint/connect-endpoint.component.html b/src/frontend/packages/core/src/features/endpoints/connect-endpoint/connect-endpoint.component.html
index b312339301..6829cc0ae2 100644
--- a/src/frontend/packages/core/src/features/endpoints/connect-endpoint/connect-endpoint.component.html
+++ b/src/frontend/packages/core/src/features/endpoints/connect-endpoint/connect-endpoint.component.html
@@ -1,6 +1,6 @@
-<form class="connect flex flex-col gap-4" [formGroup]="endpointForm" (ngSubmit)="formSubmit && connectService.submit()">
+<form class="flex flex-col gap-4" [formGroup]="endpointForm" (ngSubmit)="formSubmit && connectService.submit()">
   @if (authTypesForEndpoint.length > 1) {
-    <app-form-field class="connect__auth-type">
+    <app-form-field class="w-full">
       <app-select (selectionChange)="authChanged($event)" id="authType" name="authType" formControlName="authType"
         placeholder="Auth Type">
         @for (auth of authTypesForEndpoint; track auth) {
diff --git a/src/frontend/packages/core/src/features/endpoints/connect-endpoint/connect-endpoint.component.scss b/src/frontend/packages/core/src/features/endpoints/connect-endpoint/connect-endpoint.component.scss
deleted file mode 100644
index 2f3863087e..0000000000
--- a/src/frontend/packages/core/src/features/endpoints/connect-endpoint/connect-endpoint.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.connect {
-  &__auth-type {
-    width: 100%;
-  }
-}
diff --git a/src/frontend/packages/core/src/features/endpoints/connect-endpoint/connect-endpoint.component.ts b/src/frontend/packages/core/src/features/endpoints/connect-endpoint/connect-endpoint.component.ts
index db99c32cf4..390ee91d0d 100644
--- a/src/frontend/packages/core/src/features/endpoints/connect-endpoint/connect-endpoint.component.ts
+++ b/src/frontend/packages/core/src/features/endpoints/connect-endpoint/connect-endpoint.component.ts
@@ -24,7 +24,6 @@ interface EndpointForm {
 @Component({
   selector: 'app-connect-endpoint',
   templateUrl: './connect-endpoint.component.html',
-  styleUrls: ['./connect-endpoint.component.scss'],
   standalone: true,
   imports: [
     ReactiveFormsModule,
diff --git a/src/frontend/packages/core/src/features/endpoints/create-endpoint/create-endpoint-base-step/create-endpoint-base-step.component.html b/src/frontend/packages/core/src/features/endpoints/create-endpoint/create-endpoint-base-step/create-endpoint-base-step.component.html
index efc15f6cdf..4dddbeea68 100644
--- a/src/frontend/packages/core/src/features/endpoints/create-endpoint/create-endpoint-base-step/create-endpoint-base-step.component.html
+++ b/src/frontend/packages/core/src/features/endpoints/create-endpoint/create-endpoint-base-step/create-endpoint-base-step.component.html
@@ -3,7 +3,7 @@ <h1>Register Endpoint</h1>
 </app-page-header>
 <app-steppers [cancel]="'/endpoints'">
   <app-step [hideNextButton]="true" [signalHandle]="signalHandle">
-    <div class="select-step">
+    <div class="w-full">
       <h3>Select the type of the endpoint to register</h3>
       <!--
       <p class="select-step__help">
diff --git a/src/frontend/packages/core/src/features/endpoints/create-endpoint/create-endpoint-base-step/create-endpoint-base-step.component.scss b/src/frontend/packages/core/src/features/endpoints/create-endpoint/create-endpoint-base-step/create-endpoint-base-step.component.scss
deleted file mode 100644
index a9fdc63c60..0000000000
--- a/src/frontend/packages/core/src/features/endpoints/create-endpoint/create-endpoint-base-step/create-endpoint-base-step.component.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.select-step {
-  width: 100%;
-  &__help {
-    padding-bottom: 10px;
-  }
-}
diff --git a/src/frontend/packages/core/src/features/endpoints/create-endpoint/create-endpoint-base-step/create-endpoint-base-step.component.ts b/src/frontend/packages/core/src/features/endpoints/create-endpoint/create-endpoint-base-step/create-endpoint-base-step.component.ts
index ac78d92393..49c82ce4cc 100644
--- a/src/frontend/packages/core/src/features/endpoints/create-endpoint/create-endpoint-base-step/create-endpoint-base-step.component.ts
+++ b/src/frontend/packages/core/src/features/endpoints/create-endpoint/create-endpoint-base-step/create-endpoint-base-step.component.ts
@@ -22,7 +22,6 @@ import { TileSelectorComponent } from '../../../../shared/components/tile-select
 @Component({
   selector: 'app-create-endpoint-base-step',
   templateUrl: './create-endpoint-base-step.component.html',
-  styleUrls: ['./create-endpoint-base-step.component.scss'],
   standalone: true,
   imports: [
     CommonModule,
diff --git a/src/frontend/packages/core/src/features/endpoints/edit-endpoint/edit-endpoint.component.html b/src/frontend/packages/core/src/features/endpoints/edit-endpoint/edit-endpoint.component.html
index aa1811c185..2f27e3c628 100644
--- a/src/frontend/packages/core/src/features/endpoints/edit-endpoint/edit-endpoint.component.html
+++ b/src/frontend/packages/core/src/features/endpoints/edit-endpoint/edit-endpoint.component.html
@@ -1,4 +1,4 @@
-<div class="edit-endpoint-stepper">
+<div class="h-full">
   <app-page-header>
     Edit Endpoint
   </app-page-header>
diff --git a/src/frontend/packages/core/src/features/endpoints/edit-endpoint/edit-endpoint.component.scss b/src/frontend/packages/core/src/features/endpoints/edit-endpoint/edit-endpoint.component.scss
deleted file mode 100644
index f313bb9d3f..0000000000
--- a/src/frontend/packages/core/src/features/endpoints/edit-endpoint/edit-endpoint.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.edit-endpoint-stepper {
-  height: 100%;
-}
diff --git a/src/frontend/packages/core/src/features/endpoints/edit-endpoint/edit-endpoint.component.ts b/src/frontend/packages/core/src/features/endpoints/edit-endpoint/edit-endpoint.component.ts
index 591a34cd15..6c68c99f65 100644
--- a/src/frontend/packages/core/src/features/endpoints/edit-endpoint/edit-endpoint.component.ts
+++ b/src/frontend/packages/core/src/features/endpoints/edit-endpoint/edit-endpoint.component.ts
@@ -8,7 +8,6 @@ import { EditEndpointStepComponent } from './edit-endpoint-step/edit-endpoint-st
 @Component({
   selector: 'app-edit-endpoint',
   templateUrl: './edit-endpoint.component.html',
-  styleUrls: ['./edit-endpoint.component.scss'],
   providers: [],
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/core/src/features/endpoints/endpoints-page/endpoints-page.component.scss b/src/frontend/packages/core/src/features/endpoints/endpoints-page/endpoints-page.component.scss
deleted file mode 100644
index 0fcca77f9d..0000000000
--- a/src/frontend/packages/core/src/features/endpoints/endpoints-page/endpoints-page.component.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-:host {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  min-height: 0;
-}
-
-app-endpoints-signal-list {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-}
diff --git a/src/frontend/packages/core/src/features/endpoints/endpoints-page/endpoints-page.component.ts b/src/frontend/packages/core/src/features/endpoints/endpoints-page/endpoints-page.component.ts
index 05444926ea..bdfd01018e 100644
--- a/src/frontend/packages/core/src/features/endpoints/endpoints-page/endpoints-page.component.ts
+++ b/src/frontend/packages/core/src/features/endpoints/endpoints-page/endpoints-page.component.ts
@@ -36,7 +36,7 @@ import { EndpointsSignalListComponent } from './endpoints-signal-list.component'
 @Component({
   selector: 'app-endpoints-page',
   templateUrl: './endpoints-page.component.html',
-  styleUrls: ['./endpoints-page.component.scss'],
+  host: { class: 'flex flex-col h-full min-h-0' },
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/core/src/features/endpoints/endpoints-page/endpoints-signal-list.component.scss b/src/frontend/packages/core/src/features/endpoints/endpoints-page/endpoints-signal-list.component.scss
deleted file mode 100644
index bdc879646b..0000000000
--- a/src/frontend/packages/core/src/features/endpoints/endpoints-page/endpoints-signal-list.component.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-:host {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-}
diff --git a/src/frontend/packages/core/src/features/endpoints/endpoints-page/endpoints-signal-list.component.ts b/src/frontend/packages/core/src/features/endpoints/endpoints-page/endpoints-signal-list.component.ts
index 9078aea4a3..61dd3b7ecd 100644
--- a/src/frontend/packages/core/src/features/endpoints/endpoints-page/endpoints-signal-list.component.ts
+++ b/src/frontend/packages/core/src/features/endpoints/endpoints-page/endpoints-signal-list.component.ts
@@ -42,7 +42,7 @@ import { EndpointsSignalConfigService } from './endpoints-signal-config.service'
 @Component({
   selector: 'app-endpoints-signal-list',
   templateUrl: './endpoints-signal-list.component.html',
-  styleUrls: ['./endpoints-signal-list.component.scss'],
+  host: { class: 'flex flex-col flex-1 min-h-0' },
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [CommonModule, ListSubNavComponent, SignalListComponent],
diff --git a/src/frontend/packages/core/src/features/home/home/default-endpoint-home-component/default-endpoint-home-component.component.html b/src/frontend/packages/core/src/features/home/home/default-endpoint-home-component/default-endpoint-home-component.component.html
index 7f552300f8..f77527730c 100644
--- a/src/frontend/packages/core/src/features/home/home/default-endpoint-home-component/default-endpoint-home-component.component.html
+++ b/src/frontend/packages/core/src/features/home/home/default-endpoint-home-component/default-endpoint-home-component.component.html
@@ -1,8 +1,8 @@
 @if (url) {
-  <div class="default-home-card">
+  <div class="m-4">
     <app-metadata-item icon="link" label="Instance Address" [clipboardValue]="url">
-      <div class="default-home-card__address">
-        <div class="default-home-card__address__value">{{ url }}</div>
+      <div class="flex min-h-6">
+        <div class="flex items-center mr-7 break-all">{{ url }}</div>
       </div>
     </app-metadata-item>
   </div>
diff --git a/src/frontend/packages/core/src/features/home/home/default-endpoint-home-component/default-endpoint-home-component.component.scss b/src/frontend/packages/core/src/features/home/home/default-endpoint-home-component/default-endpoint-home-component.component.scss
deleted file mode 100644
index e6d1a5abe5..0000000000
--- a/src/frontend/packages/core/src/features/home/home/default-endpoint-home-component/default-endpoint-home-component.component.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.default-home-card {
-  margin: 1em;
-
-  &__address {
-    display: flex;
-    min-height: 24px;
-    &__value {
-      align-items: center;
-      display: flex;
-      margin-right: 28px;
-      word-break: break-all;
-    }
-  }
-}
\ No newline at end of file
diff --git a/src/frontend/packages/core/src/features/home/home/default-endpoint-home-component/default-endpoint-home-component.component.ts b/src/frontend/packages/core/src/features/home/home/default-endpoint-home-component/default-endpoint-home-component.component.ts
index f742b57c73..e22e0274a9 100644
--- a/src/frontend/packages/core/src/features/home/home/default-endpoint-home-component/default-endpoint-home-component.component.ts
+++ b/src/frontend/packages/core/src/features/home/home/default-endpoint-home-component/default-endpoint-home-component.component.ts
@@ -10,7 +10,6 @@ import { MetadataItemComponent } from '../../../../shared/components/metadata-it
 @Component({
   selector: 'app-default-endpoint-home-component',
   templateUrl: './default-endpoint-home-component.component.html',
-  styleUrls: ['./default-endpoint-home-component.component.scss'],
   standalone: true,
   imports: [
     MetadataItemComponent
diff --git a/src/frontend/packages/core/src/features/home/home/favorites-side-panel/favorites-side-panel.component.html b/src/frontend/packages/core/src/features/home/home/favorites-side-panel/favorites-side-panel.component.html
index 815f3b27b3..dc5f69c1d5 100644
--- a/src/frontend/packages/core/src/features/home/home/favorites-side-panel/favorites-side-panel.component.html
+++ b/src/frontend/packages/core/src/features/home/home/favorites-side-panel/favorites-side-panel.component.html
@@ -2,7 +2,7 @@
   @if (favorites$ | async; as favs) {
     <div>
       @for (entity of favs; track entity) {
-        <app-favorites-meta-card class="fav-side-panel__card" [favoriteEntity]="entity"></app-favorites-meta-card>
+        <app-favorites-meta-card class="flex flex-col mb-1.5" [favoriteEntity]="entity"></app-favorites-meta-card>
       }
     </div>
   }
diff --git a/src/frontend/packages/core/src/features/home/home/favorites-side-panel/favorites-side-panel.component.scss b/src/frontend/packages/core/src/features/home/home/favorites-side-panel/favorites-side-panel.component.scss
deleted file mode 100644
index c0137eecc0..0000000000
--- a/src/frontend/packages/core/src/features/home/home/favorites-side-panel/favorites-side-panel.component.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.fav-side-panel {
-  &__card {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 6px;
-  }
-}
\ No newline at end of file
diff --git a/src/frontend/packages/core/src/features/home/home/favorites-side-panel/favorites-side-panel.component.ts b/src/frontend/packages/core/src/features/home/home/favorites-side-panel/favorites-side-panel.component.ts
index 3d790b7129..0a869ee9e0 100644
--- a/src/frontend/packages/core/src/features/home/home/favorites-side-panel/favorites-side-panel.component.ts
+++ b/src/frontend/packages/core/src/features/home/home/favorites-side-panel/favorites-side-panel.component.ts
@@ -9,7 +9,6 @@ import { FavoritesMetaCardComponent } from '../favorites-meta-card/favorites-met
 @Component({
   selector: 'app-favorites-side-panel',
   templateUrl: './favorites-side-panel.component.html',
-  styleUrls: ['./favorites-side-panel.component.scss'],
   standalone: true,
   imports: [
     CommonModule,
diff --git a/src/frontend/packages/core/src/features/login/logout-page/logout-page.component.html b/src/frontend/packages/core/src/features/login/logout-page/logout-page.component.html
index 46b279939c..f26cc5ada7 100644
--- a/src/frontend/packages/core/src/features/login/logout-page/logout-page.component.html
+++ b/src/frontend/packages/core/src/features/login/logout-page/logout-page.component.html
@@ -1,15 +1,15 @@
-<app-intro-screen id="app-login-page" class="logout">
-  <app-card class="logout__card">
+<app-intro-screen id="app-login-page">
+  <app-card class="p-0 w-[300px]">
     <app-stratos-title></app-stratos-title>
     @if (error$ | async) {
-      <div class="logout__body">
-        <div class="logout__msg">An error occurred logging out</div>
+      <div class="p-6 text-center">
+        <div class="text-lg pb-5">An error occurred logging out</div>
         <button (click)="reload()" class="btn btn-primary" type="button">Reload</button>
       </div>
     } @else {
-      <div class="logout__body">
-        <div class="logout__msg">Logging out</div>
-        <div id="logout__loading" class="logout__loading">
+      <div class="p-6 text-center">
+        <div class="text-lg pb-5">Logging out</div>
+        <div id="logout__loading">
           <app-progress-bar mode="indeterminate"></app-progress-bar>
         </div>
       </div>
diff --git a/src/frontend/packages/core/src/features/login/logout-page/logout-page.component.scss b/src/frontend/packages/core/src/features/login/logout-page/logout-page.component.scss
deleted file mode 100644
index c1b0168e6d..0000000000
--- a/src/frontend/packages/core/src/features/login/logout-page/logout-page.component.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.logout {
-  &__card {
-    padding: 0;
-    width: 300px;
-  }
-  &__body {
-    padding: 24px;
-    text-align: center;    
-  }
-  &__msg {
-    font-size: 18px;
-    padding-bottom: 20px;
-  }
-}
diff --git a/src/frontend/packages/core/src/features/login/logout-page/logout-page.component.ts b/src/frontend/packages/core/src/features/login/logout-page/logout-page.component.ts
index d3d91c3160..062e4c2f47 100644
--- a/src/frontend/packages/core/src/features/login/logout-page/logout-page.component.ts
+++ b/src/frontend/packages/core/src/features/login/logout-page/logout-page.component.ts
@@ -13,7 +13,6 @@ import { AppProgressBarComponent } from '../../../shared/components/progress-bar
 @Component({
 selector: 'app-logout-page',
   templateUrl: './logout-page.component.html',
-  styleUrls: ['./logout-page.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/core/src/features/metrics/metrics-endpoint-details/metrics-endpoint-details.component.html b/src/frontend/packages/core/src/features/metrics/metrics-endpoint-details/metrics-endpoint-details.component.html
index 56b99eac40..27583482f6 100644
--- a/src/frontend/packages/core/src/features/metrics/metrics-endpoint-details/metrics-endpoint-details.component.html
+++ b/src/frontend/packages/core/src/features/metrics/metrics-endpoint-details/metrics-endpoint-details.component.html
@@ -1,8 +1,8 @@
 @if (data$ | async; as info) {
-  <div class="metrics-details">
-    <div class="metrics-details__line">
+  <div class="flex flex-col">
+    <div class="flex items-center">
       @if (info.warning) {
-        <app-custom-icon class="metrics-details__icon text-warning">warning</app-custom-icon>
+        <app-custom-icon class="flex items-center justify-center mr-2 text-warning">warning</app-custom-icon>
       }
       {{ info.ok }}
       @if (info.total > 0) {
diff --git a/src/frontend/packages/core/src/features/metrics/metrics-endpoint-details/metrics-endpoint-details.component.scss b/src/frontend/packages/core/src/features/metrics/metrics-endpoint-details/metrics-endpoint-details.component.scss
deleted file mode 100644
index c18a9f0f79..0000000000
--- a/src/frontend/packages/core/src/features/metrics/metrics-endpoint-details/metrics-endpoint-details.component.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.metrics-details {
-  display: flex;
-  flex-direction: column;
-
-  &__line {
-    align-items: center;
-    display: flex;
-  }
-
-  &__icon {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-    margin-right: 8px;
-  }
-}
diff --git a/src/frontend/packages/core/src/features/metrics/metrics-endpoint-details/metrics-endpoint-details.component.ts b/src/frontend/packages/core/src/features/metrics/metrics-endpoint-details/metrics-endpoint-details.component.ts
index 76aa03d62d..666783e596 100644
--- a/src/frontend/packages/core/src/features/metrics/metrics-endpoint-details/metrics-endpoint-details.component.ts
+++ b/src/frontend/packages/core/src/features/metrics/metrics-endpoint-details/metrics-endpoint-details.component.ts
@@ -21,7 +21,6 @@ interface MetricsDetailsInfo {
 @Component({
   selector: 'app-metrics-endpoint-details',
   templateUrl: './metrics-endpoint-details.component.html',
-  styleUrls: ['./metrics-endpoint-details.component.scss'],
   standalone: true,
   imports: [
     CommonModule,
diff --git a/src/frontend/packages/core/src/features/no-endpoints-non-admin/no-endpoints-non-admin.component.html b/src/frontend/packages/core/src/features/no-endpoints-non-admin/no-endpoints-non-admin.component.html
index a529a4ea53..69f79f0d3a 100644
--- a/src/frontend/packages/core/src/features/no-endpoints-non-admin/no-endpoints-non-admin.component.html
+++ b/src/frontend/packages/core/src/features/no-endpoints-non-admin/no-endpoints-non-admin.component.html
@@ -4,7 +4,7 @@
 
 <app-show-page-header></app-show-page-header>
 
-<app-no-content-message class="full-screen-centered" [icon]="'device_hub'"
+<app-no-content-message class="flex h-full mt-[calc(56px-16vh)] w-full" [icon]="'device_hub'"
   [firstLine]="'There are no registered endpoints'" [secondLine]="{
   text: 'At least one registered endpoint is required to continue. Registered endpoints are provided by your system administrator. Please contact your administrator.'
 }"></app-no-content-message>
\ No newline at end of file
diff --git a/src/frontend/packages/core/src/features/no-endpoints-non-admin/no-endpoints-non-admin.component.scss b/src/frontend/packages/core/src/features/no-endpoints-non-admin/no-endpoints-non-admin.component.scss
deleted file mode 100644
index 31442f0b1f..0000000000
--- a/src/frontend/packages/core/src/features/no-endpoints-non-admin/no-endpoints-non-admin.component.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-button {
-  position: absolute;
-  right: 0;
-}
-
-.full-screen-centered {
-  display: flex;
-  height: 100%;
-  margin-top: calc(56px - 16vh);
-  width: 100%;
-}
diff --git a/src/frontend/packages/core/src/features/no-endpoints-non-admin/no-endpoints-non-admin.component.ts b/src/frontend/packages/core/src/features/no-endpoints-non-admin/no-endpoints-non-admin.component.ts
index 5b0b88b910..329b816945 100644
--- a/src/frontend/packages/core/src/features/no-endpoints-non-admin/no-endpoints-non-admin.component.ts
+++ b/src/frontend/packages/core/src/features/no-endpoints-non-admin/no-endpoints-non-admin.component.ts
@@ -8,7 +8,6 @@ import { NoContentMessageComponent } from '../../shared/components/no-content-me
 @Component({
   selector: 'app-no-endpoints-non-admin',
   templateUrl: './no-endpoints-non-admin.component.html',
-  styleUrls: ['./no-endpoints-non-admin.component.scss'],
   standalone: true,
   imports: [
     PageHeaderComponent,
diff --git a/src/frontend/packages/core/src/features/setup/domain-mismatch/domain-mismatch.component.scss b/src/frontend/packages/core/src/features/setup/domain-mismatch/domain-mismatch.component.scss
deleted file mode 100644
index 8aaa125eb4..0000000000
--- a/src/frontend/packages/core/src/features/setup/domain-mismatch/domain-mismatch.component.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.domain {
-  &__card {
-    margin: 12px;
-    padding: 24px 64px;
-  }
-  &__message {
-    align-items: center;
-    display: flex;
-    font-size: 18px;
-    font-weight: 600;
-    justify-content: center;
-    padding: 32px 48px 0;
-    text-align: center;
-    span {
-      margin-left: 12px;
-    }
-  }
-  &__detail {
-    font-size: 16px;
-    padding: 24px 0 32px;
-    text-align: center;
-  }
-}
diff --git a/src/frontend/packages/core/src/features/setup/domain-mismatch/domain-mismatch.component.ts b/src/frontend/packages/core/src/features/setup/domain-mismatch/domain-mismatch.component.ts
index 96d9ea0623..3d6e9b0b92 100644
--- a/src/frontend/packages/core/src/features/setup/domain-mismatch/domain-mismatch.component.ts
+++ b/src/frontend/packages/core/src/features/setup/domain-mismatch/domain-mismatch.component.ts
@@ -7,7 +7,6 @@ import { ProductNameComponent } from '../../../shared/components/product-name.cc
 @Component({
   selector: 'app-domain-mismatch',
   templateUrl: './domain-mismatch.component.html',
-  styleUrls: ['./domain-mismatch.component.scss'],
   standalone: true,
   imports: [
     IntroScreenComponent,
diff --git a/src/frontend/packages/core/src/features/setup/local-account-wizard/local-account-wizard.component.html b/src/frontend/packages/core/src/features/setup/local-account-wizard/local-account-wizard.component.html
index a1f9ce3cde..204529c195 100644
--- a/src/frontend/packages/core/src/features/setup/local-account-wizard/local-account-wizard.component.html
+++ b/src/frontend/packages/core/src/features/setup/local-account-wizard/local-account-wizard.component.html
@@ -1,10 +1,10 @@
-<div class="page-container setup">
+<div class="setup flex flex-col h-full">
   <app-page-header hideMenu="true" [showHistory]="false">
     <h1>{{title}} Setup with Local Admin Account</h1>
   </app-page-header>
   <app-show-page-header></app-show-page-header>
   <div class="p-6">
-    <app-steppers>
+    <app-steppers class="flex flex-1 my-6">
       <app-step title="Local Account Information" [signalHandle]="signalHandle">
         <app-loading-page [isLoading]="applyingSetup()" alert="Saving configuration"
           text="Please wait - this will take a few moments">
@@ -16,7 +16,7 @@ <h1>{{title}} Setup with Local Admin Account</h1>
                   class="font-mono bg-gray-100 px-2 py-1 rounded text-sm">admin</span>
                 and the password that you choose below.</p>
             </div>
-            <form [formGroup]="passwordForm" class="space-y-4">
+            <form [formGroup]="passwordForm" class="space-y-4 min-w-[400px] w-full">
               <div class="space-y-4">
                 <div class="form-field">
                   <label class="form-label" for="adminPassword">Password</label>
diff --git a/src/frontend/packages/core/src/features/setup/local-account-wizard/local-account-wizard.component.scss b/src/frontend/packages/core/src/features/setup/local-account-wizard/local-account-wizard.component.scss
deleted file mode 100644
index 0a0a427260..0000000000
--- a/src/frontend/packages/core/src/features/setup/local-account-wizard/local-account-wizard.component.scss
+++ /dev/null
@@ -1,69 +0,0 @@
-@reference 'tailwindcss';
-
-.page-container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.local-setup-wizard {
-  display: flex;
-  flex: 1;
-  margin: 0 100px;
-  &__form {
-    display: block;
-    flex-direction: column;
-    width: 100%;
-  }
-  &__form-block {
-    display: flex;
-    flex-direction: column;
-    margin-left: 36px;
-  }
-  &__form-section {
-    margin: 12px 0 6px;
-  }
-  &__intro {
-    font-size: 18px;
-    font-weight: 600;
-    padding-top: 36px;
-  }
-  &__form-username {
-    font-family: Source Code Pro;
-    font-weight: bold;
-  }
-  &__sso-block {
-    margin-left: 28px;
-    margin-top: 6px;
-    code {
-      font-size: 14px;
-      padding-left: 6px;
-    }
-  }
-  form {
-    min-width: 400px;
-    width: 100%;
-  }
-  app-steppers {
-    @apply flex flex-1 my-6; // 24px = spacing[6]
-    > .steppers__wrapper {
-      @apply flex-1;
-    }
-    .stepper-form {
-      @apply mt-0 max-w-none;
-    }
-    .form-field,
-    .custom-form-field {
-      @apply max-w-[450px];
-    }
-    .steppers__contents {
-      @apply mx-12 overflow-y-auto; // 48px = spacing[12]
-    }
-    .steppers__navigation {
-      @apply mt-9; // 36px = spacing[9]
-    }
- }
-  app-stratos-title {
-    text-align: center;
-  }
-}
diff --git a/src/frontend/packages/core/src/features/setup/local-account-wizard/local-account-wizard.component.ts b/src/frontend/packages/core/src/features/setup/local-account-wizard/local-account-wizard.component.ts
index 0efaea8383..68c90d5e4d 100644
--- a/src/frontend/packages/core/src/features/setup/local-account-wizard/local-account-wizard.component.ts
+++ b/src/frontend/packages/core/src/features/setup/local-account-wizard/local-account-wizard.component.ts
@@ -32,7 +32,6 @@ interface LocalAccountForm {
 @Component({
 selector: 'app-local-account-wizard',
   templateUrl: './local-account-wizard.component.html',
-  styleUrls: ['./local-account-wizard.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/core/src/features/setup/uaa-wizard/console-uaa-wizard.component.html b/src/frontend/packages/core/src/features/setup/uaa-wizard/console-uaa-wizard.component.html
index 72a44ff38e..be2db60536 100644
--- a/src/frontend/packages/core/src/features/setup/uaa-wizard/console-uaa-wizard.component.html
+++ b/src/frontend/packages/core/src/features/setup/uaa-wizard/console-uaa-wizard.component.html
@@ -1,16 +1,16 @@
-<div class="page-container setup">
+<div class="setup flex flex-col h-full">
   <app-page-header hideMenu="true" [showHistory]="false">
     <h1>{{title}} Setup with Cloud Foundry UAA</h1>
   </app-page-header>
   <app-show-page-header></app-show-page-header>
   <div class="p-6">
-    <app-steppers>
+    <app-steppers class="flex flex-1 my-6">
       <app-step title="UAA Endpoint" [signalHandle]="uaaFormStepHandle">
         <div class="space-y-6">
           <p class="text-content-text">Please enter the following information to allow <app-product-name></app-product-name> to authenticate
           with
         your UAA:</p>
-        <form [formGroup]="uaaForm" class="space-y-6">
+        <form [formGroup]="uaaForm" class="space-y-6 min-w-[400px] w-full">
           <div class="space-y-4">
             <div class="form-field">
               <label class="form-label" for="apiUrl">UAA Endpoint URL</label>
@@ -91,7 +91,7 @@ <h1>{{title}} Setup with Cloud Foundry UAA</h1>
       text="Please wait - this will take a few moments">
       <div class="space-y-4">
         <p class="text-content-text">Please select the UAA scope to use to identify users as <app-product-name></app-product-name> Administrators:</p>
-        <form class="space-y-4">
+        <form class="space-y-4 min-w-[400px] w-full">
           <div class="form-field">
             <label class="form-label" for="uaaScope">UAA Scope</label>
             <select id="uaaScope" class="input" [(ngModel)]="selectedScope" name="UAAScope">
diff --git a/src/frontend/packages/core/src/features/setup/uaa-wizard/console-uaa-wizard.component.scss b/src/frontend/packages/core/src/features/setup/uaa-wizard/console-uaa-wizard.component.scss
deleted file mode 100644
index aa164bdf46..0000000000
--- a/src/frontend/packages/core/src/features/setup/uaa-wizard/console-uaa-wizard.component.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-@reference 'tailwindcss';
-
-.page-container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.uaa-wizard {
-  display: flex;
-  flex: 1;
-  margin: 0 100px;
-  &__form {
-    display: block;
-    flex-direction: column;
-    width: 100%;
-  }
-  &__form-block {
-    display: flex;
-    flex-direction: column;
-    margin-left: 36px;
-  }
-  &__form-section {
-    margin: 12px 0 6px;
-  }
-  &__intro {
-    font-size: 18px;
-    font-weight: 600;
-    padding-top: 36px;
-  }
-  &__sso-block {
-    margin-left: 28px;
-    margin-top: 6px;
-    code {
-      font-size: 14px;
-      padding-left: 6px;
-    }
-  }
-  form {
-    min-width: 400px;
-    width: 100%;
-  }
-  app-steppers {
-    @apply flex flex-1 my-6; // 24px = spacing[6]
-    > .steppers__wrapper {
-      @apply flex-1;
-    }
-    .stepper-form {
-      @apply mt-0 max-w-none;
-    }
-    .form-field,
-    .custom-form-field {
-      @apply max-w-[450px];
-    }
-    .steppers__contents {
-      @apply mx-12 overflow-y-auto; // 48px = spacing[12]
-    }
-    .steppers__navigation {
-      @apply mt-9; // 36px = spacing[9]
-    }
- }
-  app-stratos-title {
-    text-align: center;
-  }
-}
diff --git a/src/frontend/packages/core/src/features/setup/uaa-wizard/console-uaa-wizard.component.ts b/src/frontend/packages/core/src/features/setup/uaa-wizard/console-uaa-wizard.component.ts
index 2b4d24f0e2..7752ab00a7 100644
--- a/src/frontend/packages/core/src/features/setup/uaa-wizard/console-uaa-wizard.component.ts
+++ b/src/frontend/packages/core/src/features/setup/uaa-wizard/console-uaa-wizard.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation, inject, signal } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, inject, signal } from '@angular/core';
 import { toObservable } from '@angular/core/rxjs-interop';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule, FormsModule, FormControl, FormGroup, Validators } from '@angular/forms';
@@ -38,8 +38,6 @@ import { LoadingPageComponent } from '../../../shared/components/loading-page/lo
 @Component({
   selector: 'app-console-uaa-wizard',
   templateUrl: './console-uaa-wizard.component.html',
-  styleUrls: ['./console-uaa-wizard.component.scss'],
-  encapsulation: ViewEncapsulation.None,
   standalone: true,
   imports: [
     CommonModule,
diff --git a/src/frontend/packages/core/src/features/setup/upgrade-page/upgrade-page.component.scss b/src/frontend/packages/core/src/features/setup/upgrade-page/upgrade-page.component.scss
deleted file mode 100644
index 5f49842994..0000000000
--- a/src/frontend/packages/core/src/features/setup/upgrade-page/upgrade-page.component.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.upgrade {
-  &__card {
-    margin: 12px;
-    padding: 0;
-  }
-  &__message {
-    font-size: 18px;
-    font-weight: 600;
-    padding: 32px 48px 0;
-    text-align: center;
-  }
-  &__detail {
-    font-size: 16px;
-    padding: 24px 0 32px;
-    text-align: center;
-  }
-}
diff --git a/src/frontend/packages/core/src/features/setup/upgrade-page/upgrade-page.component.ts b/src/frontend/packages/core/src/features/setup/upgrade-page/upgrade-page.component.ts
index 33d038411e..1cbc1f7ff1 100644
--- a/src/frontend/packages/core/src/features/setup/upgrade-page/upgrade-page.component.ts
+++ b/src/frontend/packages/core/src/features/setup/upgrade-page/upgrade-page.component.ts
@@ -7,7 +7,6 @@ import { ProductNameComponent } from '../../../shared/components/product-name.cc
 @Component({
   selector: 'app-upgrade-page',
   templateUrl: './upgrade-page.component.html',
-  styleUrls: ['./upgrade-page.component.scss'],
   standalone: true,
   imports: [
     IntroScreenComponent,
diff --git a/src/frontend/packages/core/src/features/user-profile/edit-profile-info/edit-profile-info.component.html b/src/frontend/packages/core/src/features/user-profile/edit-profile-info/edit-profile-info.component.html
index 032773ab28..781da95acb 100644
--- a/src/frontend/packages/core/src/features/user-profile/edit-profile-info/edit-profile-info.component.html
+++ b/src/frontend/packages/core/src/features/user-profile/edit-profile-info/edit-profile-info.component.html
@@ -9,7 +9,7 @@ <h1>Edit User Profile</h1>
 <app-steppers cancel="/user-profile">
   <app-step [title]="'Edit User Profile'" [signalHandle]="signalHandle" finishButtonText="Save">
     <div>
-      <form [formGroup]="editProfileForm" validate class="edit-profile edit-profile__group">
+      <form [formGroup]="editProfileForm" validate class="mt-2.5 flex flex-col max-w-full">
         <app-form-field>
           <input appInput placeholder="Given Name" formControlName="givenName">
         </app-form-field>
@@ -37,7 +37,7 @@ <h1>Edit User Profile</h1>
           </app-form-field>
         }
         @if ((canChangePassword | async)) {
-          <div class="edit-profile__group">
+          <div class="flex flex-col max-w-full">
             <p>Change Password (Leave blank to keep current password)</p>
             @if (!needsPasswordForEmailChange) {
               <app-form-field>
diff --git a/src/frontend/packages/core/src/features/user-profile/edit-profile-info/edit-profile-info.component.scss b/src/frontend/packages/core/src/features/user-profile/edit-profile-info/edit-profile-info.component.scss
deleted file mode 100644
index 15c59eb82a..0000000000
--- a/src/frontend/packages/core/src/features/user-profile/edit-profile-info/edit-profile-info.component.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.edit-profile {
-  margin-top: 10px;
-  &__group {
-    display: flex;
-    flex-direction: column;
-    max-width: 100%;
-    .custom-form-field {
-      max-width: 450px;
-    }
-  }
-}
diff --git a/src/frontend/packages/core/src/features/user-profile/edit-profile-info/edit-profile-info.component.ts b/src/frontend/packages/core/src/features/user-profile/edit-profile-info/edit-profile-info.component.ts
index 64e3d725de..6517607700 100644
--- a/src/frontend/packages/core/src/features/user-profile/edit-profile-info/edit-profile-info.component.ts
+++ b/src/frontend/packages/core/src/features/user-profile/edit-profile-info/edit-profile-info.component.ts
@@ -31,7 +31,6 @@ interface EditProfileForm {
 @Component({
   selector: 'app-edit-profile-info',
   templateUrl: './edit-profile-info.component.html',
-  styleUrls: ['./edit-profile-info.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
     { provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher }
diff --git a/src/frontend/packages/core/src/features/user-profile/profile-info/profile-info.component.scss b/src/frontend/packages/core/src/features/user-profile/profile-info/profile-info.component.scss
deleted file mode 100644
index 545e68de59..0000000000
--- a/src/frontend/packages/core/src/features/user-profile/profile-info/profile-info.component.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-$user-profile-avatar-size: 48px;
-
-.user-profile {
-  bottom: 0;
-  display: flex;
-  flex-direction: column;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 56px;
-  mat-card:not(:first-child) {
-    margin-top: 24px;
-  }
-  &__section {
-    margin-top: 10px;
-  }
-
-  &__info {
-    flex: 1;
-    overflow: auto;
-  }
-  &__content {
-    margin: 2% 24px;
-  }
-
-  &__local-storage {
-    &--div {
-      padding-bottom: 10px;
-    }
-
-    button {
-      margin-left: 15px;
-    }
-  }
-}
diff --git a/src/frontend/packages/core/src/features/user-profile/profile-info/profile-info.component.ts b/src/frontend/packages/core/src/features/user-profile/profile-info/profile-info.component.ts
index a4dc18f1ce..31746947ff 100644
--- a/src/frontend/packages/core/src/features/user-profile/profile-info/profile-info.component.ts
+++ b/src/frontend/packages/core/src/features/user-profile/profile-info/profile-info.component.ts
@@ -23,7 +23,6 @@ import { AppChipsComponent } from '../../../shared/components/chips/chips.compon
 @Component({
   selector: 'app-profile-info',
   templateUrl: './profile-info.component.html',
-  styleUrls: ['./profile-info.component.scss'],
   standalone: true,
   imports: [
     CommonModule,
diff --git a/src/frontend/packages/core/src/shared/components/application-state/application-state-icon/application-state-icon.component.html b/src/frontend/packages/core/src/shared/components/application-state/application-state-icon/application-state-icon.component.html
index 7ba53449f0..0f10702a19 100644
--- a/src/frontend/packages/core/src/shared/components/application-state/application-state-icon/application-state-icon.component.html
+++ b/src/frontend/packages/core/src/shared/components/application-state/application-state-icon/application-state-icon.component.html
@@ -1,3 +1,3 @@
-<div class="app-state-icon">
+<div class="flex flex-row">
   <app-custom-icon [ngClass]="status | applicationStateIcon:'class'">{{status | applicationStateIcon:'icon'}}</app-custom-icon>
 </div>
diff --git a/src/frontend/packages/core/src/shared/components/application-state/application-state-icon/application-state-icon.component.scss b/src/frontend/packages/core/src/shared/components/application-state/application-state-icon/application-state-icon.component.scss
deleted file mode 100644
index ddc8be26de..0000000000
--- a/src/frontend/packages/core/src/shared/components/application-state/application-state-icon/application-state-icon.component.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.app-state-icon {
-  display: flex;
-  flex-direction: row;
-}
diff --git a/src/frontend/packages/core/src/shared/components/application-state/application-state-icon/application-state-icon.component.ts b/src/frontend/packages/core/src/shared/components/application-state/application-state-icon/application-state-icon.component.ts
index d5156a1b1e..ec68d19c17 100644
--- a/src/frontend/packages/core/src/shared/components/application-state/application-state-icon/application-state-icon.component.ts
+++ b/src/frontend/packages/core/src/shared/components/application-state/application-state-icon/application-state-icon.component.ts
@@ -7,7 +7,6 @@ import { ApplicationStateIconPipe } from './application-state-icon.pipe';
 @Component({
   selector: 'app-application-state-icon',
   templateUrl: './application-state-icon.component.html',
-  styleUrls: ['./application-state-icon.component.scss'],
   standalone: true,
   imports: [
     NgClass,
diff --git a/src/frontend/packages/core/src/shared/components/application-state/application-state.component.html b/src/frontend/packages/core/src/shared/components/application-state/application-state.component.html
index bef30d999b..5cf3ef54fb 100644
--- a/src/frontend/packages/core/src/shared/components/application-state/application-state.component.html
+++ b/src/frontend/packages/core/src/shared/components/application-state/application-state.component.html
@@ -1,12 +1,12 @@
-<div class="app-state" [ngClass]="{'app-state__with-icon': !hideIcon}">
+<div class="flex flex-row items-center" [class.h-\[25px\]]="!hideIcon">
   @if (!hideIcon) {
-    <app-application-state-icon [status]="status$ | async "></app-application-state-icon>
+    <app-application-state-icon class="pr-[5px]" [status]="status$ | async "></app-application-state-icon>
   }
-  <span class="app-state__label">{{ label$ | async }}</span>
+  <span class="overflow-hidden text-ellipsis">{{ label$ | async }}</span>
   @if (!initialStateOnly && (subLabel$ | async); as subLabel) {
     <span>
       <span>&nbsp;-&nbsp;</span>
-      <span class="app-state__sub-label">{{ subLabel$ | async }}</span>
+      <span class="overflow-hidden text-ellipsis">{{ subLabel$ | async }}</span>
     </span>
   }
 </div>
diff --git a/src/frontend/packages/core/src/shared/components/application-state/application-state.component.scss b/src/frontend/packages/core/src/shared/components/application-state/application-state.component.scss
deleted file mode 100644
index d46b5457d2..0000000000
--- a/src/frontend/packages/core/src/shared/components/application-state/application-state.component.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.app-state {
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  app-application-state-icon {
-    padding-right: 5px;
-  }
-  &__with-icon {
-    height: 25px;
-  }
-  &__label,
-  &__sub-label {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}
diff --git a/src/frontend/packages/core/src/shared/components/application-state/application-state.component.ts b/src/frontend/packages/core/src/shared/components/application-state/application-state.component.ts
index 8da9c20fe0..6d2bb9301a 100644
--- a/src/frontend/packages/core/src/shared/components/application-state/application-state.component.ts
+++ b/src/frontend/packages/core/src/shared/components/application-state/application-state.component.ts
@@ -9,7 +9,6 @@ import { ApplicationStateIconComponent } from './application-state-icon/applicat
 @Component({
   selector: 'app-application-state',
   templateUrl: './application-state.component.html',
-  styleUrls: ['./application-state.component.scss'],
   standalone: true,
   imports: [
     CommonModule,
diff --git a/src/frontend/packages/core/src/shared/components/boolean-indicator/boolean-indicator.component.scss b/src/frontend/packages/core/src/shared/components/boolean-indicator/boolean-indicator.component.scss
deleted file mode 100644
index bc06dec338..0000000000
--- a/src/frontend/packages/core/src/shared/components/boolean-indicator/boolean-indicator.component.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.boolean-indicator {
-  &__container {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    mat-icon {
-      font-size: 20px;
-      height: 20px;
-      width: 20px;
-    }
-    &__show-text {
-      mat-icon {
-        margin-right: 4px;
-      }
-    }
-  }
-}
diff --git a/src/frontend/packages/core/src/shared/components/boolean-indicator/boolean-indicator.component.ts b/src/frontend/packages/core/src/shared/components/boolean-indicator/boolean-indicator.component.ts
index 65b5d4e234..d4bc176ffc 100644
--- a/src/frontend/packages/core/src/shared/components/boolean-indicator/boolean-indicator.component.ts
+++ b/src/frontend/packages/core/src/shared/components/boolean-indicator/boolean-indicator.component.ts
@@ -32,7 +32,6 @@ export type booleanStringType = 'True' | 'False' | 'Unknown';
 @Component({
   selector: 'app-boolean-indicator',
   templateUrl: './boolean-indicator.component.html',
-  styleUrls: ['./boolean-indicator.component.scss'],
   standalone: true,
   imports: [
     CommonModule
diff --git a/src/frontend/packages/core/src/shared/components/cards/card-boolean-metric/card-boolean-metric.component.html b/src/frontend/packages/core/src/shared/components/cards/card-boolean-metric/card-boolean-metric.component.html
index 9444343931..d3936162b5 100644
--- a/src/frontend/packages/core/src/shared/components/cards/card-boolean-metric/card-boolean-metric.component.html
+++ b/src/frontend/packages/core/src/shared/components/cards/card-boolean-metric/card-boolean-metric.component.html
@@ -1,5 +1,5 @@
 <ng-template #content>
-  <div class="boolean-metric-card">
+  <div class="boolean-metric-card h-full">
     @if (!textOnly) {
       <div class="card p-4 flex items-center space-x-4">
         @if (icon) {
diff --git a/src/frontend/packages/core/src/shared/components/cards/card-boolean-metric/card-boolean-metric.component.scss b/src/frontend/packages/core/src/shared/components/cards/card-boolean-metric/card-boolean-metric.component.scss
deleted file mode 100644
index d398ed32ff..0000000000
--- a/src/frontend/packages/core/src/shared/components/cards/card-boolean-metric/card-boolean-metric.component.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-.boolean-metric-card {
-  height: 100%;
-  &__anchor {
-    cursor: pointer;
-  }
-  &__container {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    padding: 12px;
-    > div {
-      flex: 1;
-    }
-  }
-  &__icon {
-    flex: 0 0 40px;
-    font-size: 40px;
-    height: 40px;
-    margin-right: 12px;
-    width: 40px;
-  }
-  &__label {
-    font-size: 15px;
-  }
-  &__value {
-    font-size: 23px;
-  }
-  &__limit {
-    font-size: 18px;
-  }
-}
diff --git a/src/frontend/packages/core/src/shared/components/cards/card-boolean-metric/card-boolean-metric.component.ts b/src/frontend/packages/core/src/shared/components/cards/card-boolean-metric/card-boolean-metric.component.ts
index 6f5630b2da..5b71f238d8 100644
--- a/src/frontend/packages/core/src/shared/components/cards/card-boolean-metric/card-boolean-metric.component.ts
+++ b/src/frontend/packages/core/src/shared/components/cards/card-boolean-metric/card-boolean-metric.component.ts
@@ -6,7 +6,6 @@ import { RouterNav, AppState } from '@stratosui/store';
 @Component({
   selector: 'app-card-boolean-metric',
   templateUrl: './card-boolean-metric.component.html',
-  styleUrls: ['./card-boolean-metric.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/core/src/shared/components/cards/card-status/card-status.component.html b/src/frontend/packages/core/src/shared/components/cards/card-status/card-status.component.html
index 153e111a24..5c8cc6889d 100644
--- a/src/frontend/packages/core/src/shared/components/cards/card-status/card-status.component.html
+++ b/src/frontend/packages/core/src/shared/components/cards/card-status/card-status.component.html
@@ -1,6 +1,6 @@
 @if ((status$ | async); as status) {
   <div
-    class="app-card-status absolute top-0 left-0 w-full h-1 rounded-t-lg"
+    class="absolute top-0 left-0 w-full h-1 rounded-t-lg transition-colors duration-[1ms] ease-in"
      [ngClass]="{
        'bg-success-shade-500': status === cardStatus.OK,
        'bg-warning-shade-500': status === cardStatus.WARNING,
diff --git a/src/frontend/packages/core/src/shared/components/cards/card-status/card-status.component.scss b/src/frontend/packages/core/src/shared/components/cards/card-status/card-status.component.scss
deleted file mode 100644
index 154f736c04..0000000000
--- a/src/frontend/packages/core/src/shared/components/cards/card-status/card-status.component.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.app-card-status {
-  height: 4px;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-  transition: background-color 1ms ease-in;
-}
diff --git a/src/frontend/packages/core/src/shared/components/cards/card-status/card-status.component.ts b/src/frontend/packages/core/src/shared/components/cards/card-status/card-status.component.ts
index 4401b7bc94..0191079bd8 100644
--- a/src/frontend/packages/core/src/shared/components/cards/card-status/card-status.component.ts
+++ b/src/frontend/packages/core/src/shared/components/cards/card-status/card-status.component.ts
@@ -23,7 +23,6 @@ export function determineCardStatus(value: number, limit: number): StratosStatus
 @Component({
   selector: 'app-card-status',
   templateUrl: './card-status.component.html',
-  styleUrls: ['./card-status.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/core/src/shared/components/chips/chips.component.html b/src/frontend/packages/core/src/shared/components/chips/chips.component.html
index 221a7f0401..fa6c90b201 100644
--- a/src/frontend/packages/core/src/shared/components/chips/chips.component.html
+++ b/src/frontend/packages/core/src/shared/components/chips/chips.component.html
@@ -2,13 +2,13 @@
   <span class="text-content-muted">None</span>
 }
 @if (chips && chips.length) {
-  <div class="app-chips flex flex-wrap gap-2"
+  <div class="flex flex-wrap gap-2 my-[5px]"
     [ngClass]="{'flex-col': stacked, 'flex-row-reverse': orientation==='rtl'}"
     >
     @for (chip of chips | slice:0:limit; track chip.key ?? chip.value; let i = $index) {
       <div class="chip app-chip inline-flex items-center gap-2 px-3 py-1 text-sm rounded-full border"
         [ngClass]="getChipClasses(chip.color)">
-        <div class="app-chip__container flex items-center gap-1">
+        <div class="flex items-center gap-1">
           @if (!!chip.url) {
             <a
               class="app-chip__link hover:underline"
@@ -17,7 +17,7 @@
               {{chip[displayProperty]}}
             </a>
           } @else {
-            <div class="app-chip__label">{{chip[displayProperty]}}</div>
+            <div class="flex-1 h-[18px] leading-[18px] break-all">{{chip[displayProperty]}}</div>
           }
           @if (chip.clearAction && (chip.hideClearButton$ | async) === false) {
             @if (!chip.busy || (chip.busy | async) === false) {
@@ -25,13 +25,13 @@
                 (click)="chip.clearAction(chip)"
                 (keydown.enter)="chip.clearAction(chip)"
                 (keydown.space)="chip.clearAction(chip); $event.preventDefault()"
-                class="material-icons text-sm app-chip__close cursor-pointer hover:text-red-600">
+                class="material-icons text-[15px] h-[15px] w-[15px] flex-none ml-[5px] cursor-pointer hover:text-red-600">
                 close
               </span>
             }
             @if (chip.busy && (chip.busy | async)) {
               <div
-                class="app-chip__busy-spinner">
+                class="flex-none ml-[5px]">
                 <div class="spinner w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin"></div>
               </div>
             }
@@ -40,8 +40,7 @@
       </div>
     }
     @if (chips.length > lowerLimit) {
-      <button class="btn btn-sm btn-primary app-chips__limit"
-        [ngClass]="{'app-chips__show-more': atLowerLimit, 'app-chips__show-less': !atLowerLimit}"
+      <button class="btn btn-sm btn-primary cursor-pointer font-light min-w-0 px-[5px]"
         (click)="toggleLimit()"
         appClickStopPropagation>
         @if (atLowerLimit) {
diff --git a/src/frontend/packages/core/src/shared/components/chips/chips.component.scss b/src/frontend/packages/core/src/shared/components/chips/chips.component.scss
deleted file mode 100644
index 2468c9ecf4..0000000000
--- a/src/frontend/packages/core/src/shared/components/chips/chips.component.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-.app-chip {
-  $size: 15px;
-  &__busy-spinner,
-  &__close {
-    flex: 0;
-    margin-left: 5px;
-  }
-  &__close {
-    cursor: pointer;
-    font-size: $size;
-    height: $size;
-    width: $size;
-  }
-  &__container {
-    align-items: center;
-    display: flex;
-  }
-  &__label {
-    flex: 1;
-    height: 18px; // height = 32px - 2 * 7px padding
-    line-height: 18px;
-    word-break: break-all;
-  }
-}
-
-.app-chips {
-  display: block;
-  margin: 5px 0;
-  &__limit {
-    cursor: pointer;
-    font-weight: 300;
-    min-width: 0;
-    padding: 0 5px;
-  }
-}
-
diff --git a/src/frontend/packages/core/src/shared/components/chips/chips.component.ts b/src/frontend/packages/core/src/shared/components/chips/chips.component.ts
index 3ec7afad22..5e4e05e91e 100644
--- a/src/frontend/packages/core/src/shared/components/chips/chips.component.ts
+++ b/src/frontend/packages/core/src/shared/components/chips/chips.component.ts
@@ -35,7 +35,6 @@ export class AppChip<T = string> implements IAppChip<T> {
     ClickStopPropagationDirective
   ],
   templateUrl: './chips.component.html',
-  styleUrls: ['./chips.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AppChipsComponent implements OnInit {
diff --git a/src/frontend/packages/core/src/shared/components/code-block/code-block.component.html b/src/frontend/packages/core/src/shared/components/code-block/code-block.component.html
index ebd24ff394..37cf303359 100644
--- a/src/frontend/packages/core/src/shared/components/code-block/code-block.component.html
+++ b/src/frontend/packages/core/src/shared/components/code-block/code-block.component.html
@@ -1,11 +1,11 @@
-<div class="app-code-block relative rounded-md"
-  [ngClass]="{ 'app-code-block__pre': codeBlockStyle === 'pre'}">
-  <div class="app-code-block__content p-4 font-mono text-sm overflow-x-auto" #preBlock>
+<div class="relative rounded-md p-[10px_20px] bg-[var(--code-block-bg)] border border-[var(--code-block-border)] text-[var(--code-block-text)]"
+  [class.px-\[20px\]]="codeBlockStyle === 'pre'">
+  <div class="flex flex-col justify-center p-4 font-mono text-sm overflow-x-auto mr-[20px]" #preBlock>
     <ng-content></ng-content>
   </div>
   @if (!hideCopy) {
     <app-copy-to-clipboard
-      class="app-code-block__copy absolute top-2 right-2"
+      class="absolute top-[10px] right-[20px]"
       [text]="text"
       [compact]="true">
     </app-copy-to-clipboard>
diff --git a/src/frontend/packages/core/src/shared/components/code-block/code-block.component.scss b/src/frontend/packages/core/src/shared/components/code-block/code-block.component.scss
deleted file mode 100644
index b9455fabff..0000000000
--- a/src/frontend/packages/core/src/shared/components/code-block/code-block.component.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-.app-code-block {
-  padding: 10px 20px;
-  position: relative;
-  background-color: var(--code-block-bg);
-  border: 1px solid var(--code-block-border);
-  color: var(--code-block-text);
-
-  &__content {
-    display: flex;
-    flex-direction: column;
-    font-family: 'Source Code Pro', monospace;
-    font-size: 14px;
-    justify-content: center;
-    margin-right: 20px; // Prevent text overlapping copy button
-    color: var(--code-block-text);
-  }
-  &__pre {
-    // For wrapped PRE, vertical padding is already on the PRE element, so remove it here
-    padding: 0 20px;
-  }
-
-  &__copy {
-    position: absolute;
-    right: 20px;
-    top: 10px;
-  }
-}
diff --git a/src/frontend/packages/core/src/shared/components/code-block/code-block.component.ts b/src/frontend/packages/core/src/shared/components/code-block/code-block.component.ts
index e1a1e64588..afe136915d 100644
--- a/src/frontend/packages/core/src/shared/components/code-block/code-block.component.ts
+++ b/src/frontend/packages/core/src/shared/components/code-block/code-block.component.ts
@@ -11,7 +11,6 @@ import { CopyToClipboardComponent } from '../copy-to-clipboard/copy-to-clipboard
     CopyToClipboardComponent
   ],
   templateUrl: './code-block.component.html',
-  styleUrls: ['./code-block.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class CodeBlockComponent implements OnInit, OnDestroy {
diff --git a/src/frontend/packages/core/src/shared/components/copy-to-clipboard/copy-to-clipboard.component.html b/src/frontend/packages/core/src/shared/components/copy-to-clipboard/copy-to-clipboard.component.html
index eb8a499782..2954e7868a 100644
--- a/src/frontend/packages/core/src/shared/components/copy-to-clipboard/copy-to-clipboard.component.html
+++ b/src/frontend/packages/core/src/shared/components/copy-to-clipboard/copy-to-clipboard.component.html
@@ -1,19 +1,19 @@
-<div class="copy relative inline-flex items-center gap-2"
-  [ngClass]="{'copy__success': copySuccessWait}">
-  <div class="copy__copied-div flex items-center gap-1"
+<div class="relative inline-flex items-center gap-2">
+  <div class="absolute right-0 top-0 flex items-center gap-1 transition-opacity duration-300"
     [class.opacity-100]="copySuccessWait"
-    [class.opacity-0]="!copySuccessWait"
-    class="transition-opacity duration-300">
+    [class.opacity-0]="!copySuccessWait">
     @if (showSuccessText) {
-      <span class="copy__copied-msg text-sm text-success-shade-600">Copied to clipboard</span>
+      <span class="text-sm text-success-shade-600 mr-[5px] whitespace-nowrap">Copied to clipboard</span>
     }
-    <span class="material-icons copy__copied-icon text-success-shade-600"
+    <span class="material-icons text-success-shade-600 mr-[5px]"
       [ngClass]="{'text-sm': compact, 'text-base': !compact}">
       check_circle
     </span>
   </div>
   @if (canCopy) {
-    <span class="material-icons copy__copy-icon cursor-pointer text-content-muted hover:text-content-text transition-colors"
+    <span class="material-icons absolute right-0 top-0 cursor-pointer text-content-muted hover:text-content-text transition-opacity duration-300"
+      [class.opacity-0]="copySuccessWait"
+      [class.opacity-100]="!copySuccessWait"
       [ngClass]="{'text-sm': compact, 'text-base': !compact}"
       role="button" tabindex="0"
       (click)="copyToClipboard($event)"
diff --git a/src/frontend/packages/core/src/shared/components/copy-to-clipboard/copy-to-clipboard.component.scss b/src/frontend/packages/core/src/shared/components/copy-to-clipboard/copy-to-clipboard.component.scss
deleted file mode 100644
index 5464339f09..0000000000
--- a/src/frontend/packages/core/src/shared/components/copy-to-clipboard/copy-to-clipboard.component.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-.copy {
-  display: flex;
-  position: relative;
-  &__copied-div,
-  &__copy-icon {
-    position: absolute;
-    right: 0;
-    top: 0;
-    transition: opacity 250ms linear;
-  }
-  &__copied-div {
-    align-items: center;
-    display: flex;
-    opacity: 0;
-    span {
-      margin-right: 5px;
-    }
-  }
-  &__copied-msg {
-    white-space: nowrap;
-  }
-  &__copy-icon {
-    cursor: pointer;
-  }
-  &__copy-icon-small {
-    font-size: 16px;
-    height: 16px;
-    width: 16px;
-  }
-  &__success {
-    .copy {
-      &__copied-div {
-        opacity: 1;
-      }
-      &__copy-icon {
-        opacity: 0;
-      }
-    }
-  }
-}
diff --git a/src/frontend/packages/core/src/shared/components/copy-to-clipboard/copy-to-clipboard.component.ts b/src/frontend/packages/core/src/shared/components/copy-to-clipboard/copy-to-clipboard.component.ts
index 6bc8560f2d..d62fe357f8 100644
--- a/src/frontend/packages/core/src/shared/components/copy-to-clipboard/copy-to-clipboard.component.ts
+++ b/src/frontend/packages/core/src/shared/components/copy-to-clipboard/copy-to-clipboard.component.ts
@@ -6,7 +6,6 @@ import { ChangeDetectionStrategy, Component, Input, OnInit, inject } from '@angu
   standalone: true,
   imports: [CommonModule],
   templateUrl: './copy-to-clipboard.component.html',
-  styleUrls: ['./copy-to-clipboard.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class CopyToClipboardComponent implements OnInit {
diff --git a/src/frontend/packages/core/src/shared/components/custom-expansion-panel/custom-expansion-panel.component.scss b/src/frontend/packages/core/src/shared/components/custom-expansion-panel/custom-expansion-panel.component.scss
deleted file mode 100644
index d55c1dbee0..0000000000
--- a/src/frontend/packages/core/src/shared/components/custom-expansion-panel/custom-expansion-panel.component.scss
+++ /dev/null
@@ -1,81 +0,0 @@
-.custom-expansion-panel {
-  border: 1px solid #e0e0e0;
-  border-radius: 4px;
-  margin-bottom: 8px;
-  overflow: hidden;
-  
-  &.disabled {
-    opacity: 0.6;
-    pointer-events: none;
-  }
-}
-
-.expansion-header {
-  display: flex;
-  align-items: center;
-  padding: 16px;
-  cursor: pointer;
-  background-color: #fafafa;
-  border-bottom: 1px solid transparent;
-  transition: background-color 0.2s ease;
-  
-  &:hover {
-    background-color: #f5f5f5;
-  }
-  
-  &.hide-toggle {
-    cursor: default;
-    
-    &:hover {
-      background-color: #fafafa;
-    }
-  }
-  
-  .toggle-before & {
-    flex-direction: row;
-  }
-  
-  .toggle-after & {
-    flex-direction: row-reverse;
-  }
-}
-
-.expansion-content {
-  max-height: 0;
-  overflow: hidden;
-  transition: max-height 0.3s ease;
-  
-  &.expanded {
-    max-height: 1000px; // Adjust as needed
-  }
-}
-
-.toggle-button {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 4px;
-  margin-left: auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  
-  &.before {
-    margin-left: 0;
-    margin-right: 16px;
-  }
-  
-  &.after {
-    margin-left: auto;
-    margin-right: 0;
-  }
-}
-
-.toggle-icon {
-  transition: transform 0.2s ease;
-  fill: #666;
-  
-  &.rotated {
-    transform: rotate(180deg);
-  }
-}
\ No newline at end of file
diff --git a/src/frontend/packages/core/src/shared/components/date-time/date-time.component.html b/src/frontend/packages/core/src/shared/components/date-time/date-time.component.html
index e4d902b9ba..9410d0f879 100644
--- a/src/frontend/packages/core/src/shared/components/date-time/date-time.component.html
+++ b/src/frontend/packages/core/src/shared/components/date-time/date-time.component.html
@@ -1,5 +1,5 @@
-<form class="date-time-form flex gap-2">
-  <div class="form-field flex-1">
+<form class="flex gap-2">
+  <div class="flex flex-1 h-[66px]">
     <input
       class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-gray-100"
       name="date"
@@ -7,7 +7,7 @@
       type="date"
       placeholder="Choose a date">
   </div>
-  <div class="form-field flex-1">
+  <div class="flex flex-1 h-[66px]">
     <input
       class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-gray-100"
       name="time"
diff --git a/src/frontend/packages/core/src/shared/components/date-time/date-time.component.scss b/src/frontend/packages/core/src/shared/components/date-time/date-time.component.scss
deleted file mode 100644
index 2c847d5272..0000000000
--- a/src/frontend/packages/core/src/shared/components/date-time/date-time.component.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.date-time-form {
-  display: flex;
-}
-
-.form-field {
-  display: flex;
-  height: 66px;
-}
diff --git a/src/frontend/packages/core/src/shared/components/date-time/date-time.component.ts b/src/frontend/packages/core/src/shared/components/date-time/date-time.component.ts
index 895531d50f..87102521f4 100644
--- a/src/frontend/packages/core/src/shared/components/date-time/date-time.component.ts
+++ b/src/frontend/packages/core/src/shared/components/date-time/date-time.component.ts
@@ -12,7 +12,6 @@ import { format, parse, setHours, setMinutes, isValid, isEqual } from 'date-fns'
     ReactiveFormsModule
 ],
   templateUrl: './date-time.component.html',
-  styleUrls: ['./date-time.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DateTimeComponent implements OnDestroy {
diff --git a/src/frontend/packages/core/src/shared/components/display-value/display-value.component.html b/src/frontend/packages/core/src/shared/components/display-value/display-value.component.html
index b9a8a386fe..270f0b730b 100644
--- a/src/frontend/packages/core/src/shared/components/display-value/display-value.component.html
+++ b/src/frontend/packages/core/src/shared/components/display-value/display-value.component.html
@@ -1,8 +1,8 @@
-<div class="display-value">
+<div class="min-w-[200px]">
   @if (label) {
-    <div class="display-value__label">{{label}}</div>
+    <div class="font-bold text-sm mb-2.5">{{label}}</div>
   }
-  <div class="display-value__value">
+  <div>
     @if (displayCustom.children.length === 0) {
       <span>{{value}}</span>
     }
diff --git a/src/frontend/packages/core/src/shared/components/display-value/display-value.component.scss b/src/frontend/packages/core/src/shared/components/display-value/display-value.component.scss
deleted file mode 100644
index 43f6eda9c3..0000000000
--- a/src/frontend/packages/core/src/shared/components/display-value/display-value.component.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.display-value {
-  min-width: 200px;
-  &__label {
-    font-weight: bold;
-    font-size: 14px;
-    margin-bottom: 10px;
-  }
-}
diff --git a/src/frontend/packages/core/src/shared/components/display-value/display-value.component.ts b/src/frontend/packages/core/src/shared/components/display-value/display-value.component.ts
index 8882bc27cc..5343ecdaa9 100644
--- a/src/frontend/packages/core/src/shared/components/display-value/display-value.component.ts
+++ b/src/frontend/packages/core/src/shared/components/display-value/display-value.component.ts
@@ -4,7 +4,6 @@ import { ChangeDetectionStrategy, Component, Input  } from '@angular/core';
 @Component({
   selector: 'app-display-value',
   templateUrl: './display-value.component.html',
-  styleUrls: ['./display-value.component.scss'],
   standalone: true,
   imports: [],
   changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/src/frontend/packages/core/src/shared/components/endpoints-missing/endpoints-missing.component.html b/src/frontend/packages/core/src/shared/components/endpoints-missing/endpoints-missing.component.html
index 60e1e18be0..5890cd6f94 100644
--- a/src/frontend/packages/core/src/shared/components/endpoints-missing/endpoints-missing.component.html
+++ b/src/frontend/packages/core/src/shared/components/endpoints-missing/endpoints-missing.component.html
@@ -1,5 +1,5 @@
 @if (noContent$ | async; as message) {
-  <app-no-content-message [icon]="'settings_ethernet'" [hidden]="!message"
+  <app-no-content-message class="flex w-full relative overflow-visible" [icon]="'settings_ethernet'" [hidden]="!message"
     [firstLine]="message.firstLine" [secondLine]="showDirectToEndpointMessage ? message.secondLine : null"
     [toolbarLink]="message.toolbarLink" toolbarAlign="stratos-add-endpoint">
   </app-no-content-message>
diff --git a/src/frontend/packages/core/src/shared/components/endpoints-missing/endpoints-missing.component.scss b/src/frontend/packages/core/src/shared/components/endpoints-missing/endpoints-missing.component.scss
deleted file mode 100644
index 1d6b492084..0000000000
--- a/src/frontend/packages/core/src/shared/components/endpoints-missing/endpoints-missing.component.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-app-no-content-message {
-  display: flex;
-  width: 100%;
-  position: relative;
-  overflow: visible;
-  &[hidden] {
-    display: none;
-  }
-}
-
-:host {
-  display: block;
-  position: relative;
-  overflow: visible;
-}
diff --git a/src/frontend/packages/core/src/shared/components/endpoints-missing/endpoints-missing.component.ts b/src/frontend/packages/core/src/shared/components/endpoints-missing/endpoints-missing.component.ts
index 56ae971fe4..d7905860fa 100644
--- a/src/frontend/packages/core/src/shared/components/endpoints-missing/endpoints-missing.component.ts
+++ b/src/frontend/packages/core/src/shared/components/endpoints-missing/endpoints-missing.component.ts
@@ -19,7 +19,7 @@ export interface EndpointMissingMessageParts {
 @Component({
   selector: 'app-endpoints-missing',
   templateUrl: './endpoints-missing.component.html',
-  styleUrls: ['./endpoints-missing.component.scss'],
+  host: { class: 'block relative overflow-visible' },
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/core/src/shared/components/entity-summary-title/entity-summary-title.component.html b/src/frontend/packages/core/src/shared/components/entity-summary-title/entity-summary-title.component.html
index 4e4facdf82..c586683bd2 100644
--- a/src/frontend/packages/core/src/shared/components/entity-summary-title/entity-summary-title.component.html
+++ b/src/frontend/packages/core/src/shared/components/entity-summary-title/entity-summary-title.component.html
@@ -1,30 +1,30 @@
-<div class="entity-summary">
-  <div class="entity-summary__header-section">
+<div class="my-[10px]">
+  <div class="flex m-[10px]">
     <!-- <img *ngIf="imagePath" class="entity-summary__logo" title="{{ title }}'s image" src="{{ imagePath }}"> -->
     @if (image) {
-      <img class="entity-summary__img" title="{{ title }}'s image" [src]="image"
+      <img class="grow-0 shrink-0 basis-16 max-h-16 self-center h-16 object-contain w-16" title="{{ title }}'s image" [src]="image"
         (error)="failedImageLoad()" alt="{{ title }}">
     } @else {
-      <app-custom-icon class="entity-summary__logo" fontSet="{{fallBackIconFont}}">{{fallBackIcon}}</app-custom-icon>
+      <app-custom-icon class="grow-0 shrink-0 basis-16 max-h-16 text-[54px]" fontSet="{{fallBackIconFont}}">{{fallBackIcon}}</app-custom-icon>
     }
 
-    <div class="entity-summary__header-inner">
-      <div class="entity-summary__header-wrapper">
-        <h1 class="entity-summary__header">{{ title }} </h1>
+    <div class="flex-1 ml-[10px]">
+      <div class="flex items-baseline">
+        <h1 class="m-0">{{ title }} </h1>
         @if (info) {
-          <app-custom-icon class="entity-summary__header-info" matTooltip="{{ info }}">
+          <app-custom-icon class="text-xl ml-[10px] opacity-40" matTooltip="{{ info }}">
           info</app-custom-icon>
         }
       </div>
       @if (subTitle) {
-        <div class="entity-summary__sub-header"> {{ subTitle }}</div>
+        <div class="text-base -mt-[3px] opacity-60"> {{ subTitle }}</div>
       }
       @if (subText) {
-        <div class="entity-summary__sub-text"> {{ subText }}</div>
+        <div class="text-base opacity-60 pt-[10px]"> {{ subText }}</div>
       }
     </div>
   </div>
-  <div class="entity-summary__content">
+  <div class="mt-0 -mx-[20px] -mb-[20px] pt-0 px-[20px] pb-[20px]">
     <ng-content></ng-content>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/frontend/packages/core/src/shared/components/entity-summary-title/entity-summary-title.component.scss b/src/frontend/packages/core/src/shared/components/entity-summary-title/entity-summary-title.component.scss
deleted file mode 100644
index efdba0da18..0000000000
--- a/src/frontend/packages/core/src/shared/components/entity-summary-title/entity-summary-title.component.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-.entity-summary {
-  margin: 10px 0;
-  &__img,
-  &__logo {
-    flex: 0 0 64px;
-    max-height: 64px;
-  }
-  &__img {
-    align-self: center;
-    height: 64px;
-    object-fit: contain;
-    width: 64px;
-  }
-  &__logo {
-    font-size: 54px;
-  }
-  &__sub-header {
-    font-size: 16px;
-    margin-top: -3px;
-    opacity: 0.6;
-  }
-  &__sub-text {
-    font-size: 16px;
-    opacity: 0.6;
-    padding-top: 10px;
-  }
-  &__header {
-    margin: 0;
-  }
-  &__header-inner {
-    flex: 1;
-    margin-left: 10px;
-  }
-  &__header-wrapper {
-    align-items: baseline;
-    display: flex;
-  }
-  &__header-info {
-    font-size: 20px;
-    margin-left: 10px;
-    opacity: 0.4;
-  }
-  &__header-section {
-    display: flex;
-    margin: 10px;
-  }
-  &__content {
-    margin: 0 -20px -20px;
-    padding: 0 20px 20px;
-  }
-  &__dashboard {
-    font-size: 14px;
-    margin: -24px 20px 24px 24px;
-  }
-  &__spacing {
-    font-size: 14px;
-    margin: 12px 0;
-  }
-}
diff --git a/src/frontend/packages/core/src/shared/components/entity-summary-title/entity-summary-title.component.ts b/src/frontend/packages/core/src/shared/components/entity-summary-title/entity-summary-title.component.ts
index 79baebc68d..62d4c7ae93 100644
--- a/src/frontend/packages/core/src/shared/components/entity-summary-title/entity-summary-title.component.ts
+++ b/src/frontend/packages/core/src/shared/components/entity-summary-title/entity-summary-title.component.ts
@@ -11,7 +11,6 @@ import { CustomIconComponent } from '../custom-material/custom-material.componen
     CustomTooltipDirective
 ],
   templateUrl: './entity-summary-title.component.html',
-  styleUrls: ['./entity-summary-title.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class EntitySummaryTitleComponent {
diff --git a/src/frontend/packages/core/src/shared/components/file-input/file-input.component.html b/src/frontend/packages/core/src/shared/components/file-input/file-input.component.html
index 2f9a317c35..127707b7b5 100644
--- a/src/frontend/packages/core/src/shared/components/file-input/file-input.component.html
+++ b/src/frontend/packages/core/src/shared/components/file-input/file-input.component.html
@@ -1,23 +1,23 @@
-<div class="file-input" [ngClass]="{'file-input__disabled': disabled}">
+<div class="flex flex-col" [class.opacity-50]="disabled" [class.pointer-events-none]="disabled">
   <input [accept]="accept" type="file" (change)="onNativeInputFileSelect($event)" #inputFile hidden />
   @if (!buttonLabel) {
     <div class="form-field file-input__form-field">
       <div class="file-input__field input flex items-center justify-between"
         [class.opacity-50]="disabled"
         [class.cursor-not-allowed]="disabled">
-        <input type="text" class="file-input__input flex-1"
+        <input type="text" class="flex-1 bg-transparent border-none outline-none text-[inherit] font-[inherit] p-0 min-w-0"
           [placeholder]="placeholder || 'No file selected'"
           [value]="name"
           [disabled]="disabled"
           (change)="onPathInput($event)" />
         @if (fileCount) {
-          <button class="file-input__button btn btn-sm btn-secondary ml-1" type="button"
+          <button class="btn btn-sm btn-secondary ml-1 flex-none leading-[inherit] min-w-[auto] px-1" type="button"
             [disabled]="disabled" (click)="clearFile($event)"
             title="Clear file">
             <span class="material-icons text-sm">close</span>
           </button>
         }
-        <button class="file-input__button btn btn-sm btn-secondary ml-1" type="button"
+        <button class="btn btn-sm btn-secondary ml-1 flex-none leading-[inherit] min-w-[auto] px-1" type="button"
           [disabled]="disabled" (click)="selectFile($event)"
           title="Browse for file">
           <span class="material-icons text-sm">more_horiz</span>
diff --git a/src/frontend/packages/core/src/shared/components/file-input/file-input.component.scss b/src/frontend/packages/core/src/shared/components/file-input/file-input.component.scss
deleted file mode 100644
index 0182afc7bf..0000000000
--- a/src/frontend/packages/core/src/shared/components/file-input/file-input.component.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-.file-input {
-  display: flex;
-  flex-direction: column;
-
-  &__disabled {
-    opacity: 0.5;
-    pointer-events: none;
-  }
-  &__field {
-    align-items: center;
-    display: flex;
-  }
-  &__input {
-    flex: 1;
-    background: transparent;
-    border: none;
-    outline: none;
-    color: inherit;
-    font: inherit;
-    padding: 0;
-    min-width: 0;
-  }
-  &__none {
-    opacity: 0.4;
-  }
-  &__button {
-    flex: 0;
-    line-height: inherit;
-    min-width: auto;
-    padding: 0 4px;
-  }
-  &__hint {
-    font-size: 75%;
-    margin-top: -16px;
-  }
-}
diff --git a/src/frontend/packages/core/src/shared/components/file-input/file-input.component.ts b/src/frontend/packages/core/src/shared/components/file-input/file-input.component.ts
index 82d81f2dfc..6104cff0e9 100644
--- a/src/frontend/packages/core/src/shared/components/file-input/file-input.component.ts
+++ b/src/frontend/packages/core/src/shared/components/file-input/file-input.component.ts
@@ -9,7 +9,6 @@ import { safeUnsubscribe } from '../../../core/utils.service';
 @Component({
   selector: 'app-file-input',
   templateUrl: './file-input.component.html',
-  styleUrls: ['./file-input.component.scss'],
   standalone: true,
   imports: [
     CommonModule,
diff --git a/src/frontend/packages/core/src/shared/components/intro-screen/intro-screen.component.html b/src/frontend/packages/core/src/shared/components/intro-screen/intro-screen.component.html
index 76e1ed39f2..166234761a 100644
--- a/src/frontend/packages/core/src/shared/components/intro-screen/intro-screen.component.html
+++ b/src/frontend/packages/core/src/shared/components/intro-screen/intro-screen.component.html
@@ -1,3 +1,3 @@
-<div class="intro">
+<div class="flex flex-col items-center justify-center h-screen bg-[url(/core/assets/login-bg.jpg)] bg-center bg-cover">
   <ng-content></ng-content>
 </div>
diff --git a/src/frontend/packages/core/src/shared/components/intro-screen/intro-screen.component.scss b/src/frontend/packages/core/src/shared/components/intro-screen/intro-screen.component.scss
deleted file mode 100644
index 460a2db0a9..0000000000
--- a/src/frontend/packages/core/src/shared/components/intro-screen/intro-screen.component.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.intro {
-  align-items: center;
-  background-image: url('/core/assets/login-bg.jpg');
-  background-position: center;
-  background-size: cover;
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  justify-content: center;
-}
diff --git a/src/frontend/packages/core/src/shared/components/intro-screen/intro-screen.component.ts b/src/frontend/packages/core/src/shared/components/intro-screen/intro-screen.component.ts
index 3a65f3f0fa..6ed31c9be5 100644
--- a/src/frontend/packages/core/src/shared/components/intro-screen/intro-screen.component.ts
+++ b/src/frontend/packages/core/src/shared/components/intro-screen/intro-screen.component.ts
@@ -3,7 +3,6 @@ import { ChangeDetectionStrategy, Component  } from '@angular/core';
 @Component({
   selector: 'app-intro-screen',
   templateUrl: './intro-screen.component.html',
-  styleUrls: ['./intro-screen.component.scss'],
   standalone: true,
   imports: [],
   changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/src/frontend/packages/core/src/shared/components/list/list-cards/card/card.component.scss b/src/frontend/packages/core/src/shared/components/list/list-cards/card/card.component.scss
deleted file mode 100644
index a85c48c037..0000000000
--- a/src/frontend/packages/core/src/shared/components/list/list-cards/card/card.component.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-
-:host {
-  position: relative;
-}
diff --git a/src/frontend/packages/core/src/shared/components/list/list-cards/card/card.component.ts b/src/frontend/packages/core/src/shared/components/list/list-cards/card/card.component.ts
index 8b89b3b5c5..1cb57bf64a 100644
--- a/src/frontend/packages/core/src/shared/components/list/list-cards/card/card.component.ts
+++ b/src/frontend/packages/core/src/shared/components/list/list-cards/card/card.component.ts
@@ -18,7 +18,7 @@ interface ISetupData<T> {
 @Component({
   selector: 'app-card',
   templateUrl: './card.component.html',
-  styleUrls: ['./card.component.scss'],
+  host: { class: 'relative' },
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: []
diff --git a/src/frontend/packages/core/src/shared/components/list/list-generics/list-view/list-view.component.scss b/src/frontend/packages/core/src/shared/components/list/list-generics/list-view/list-view.component.scss
deleted file mode 100644
index bdc879646b..0000000000
--- a/src/frontend/packages/core/src/shared/components/list/list-generics/list-view/list-view.component.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-:host {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-}
diff --git a/src/frontend/packages/core/src/shared/components/list/list-generics/list-view/list-view.component.ts b/src/frontend/packages/core/src/shared/components/list/list-generics/list-view/list-view.component.ts
index 76dfd5dcab..b36026a580 100644
--- a/src/frontend/packages/core/src/shared/components/list/list-generics/list-view/list-view.component.ts
+++ b/src/frontend/packages/core/src/shared/components/list/list-generics/list-view/list-view.component.ts
@@ -8,7 +8,7 @@ import { ListConfigProvider } from '../list-config-provider.types';
 @Component({
   selector: 'app-list-view',
   templateUrl: './list-view.component.html',
-  styleUrls: ['./list-view.component.scss'],
+  host: { class: 'flex flex-col flex-1 min-h-0' },
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/app-table-cell-default/app-table-cell-default.component.html b/src/frontend/packages/core/src/shared/components/list/list-table/app-table-cell-default/app-table-cell-default.component.html
index 7e61b5daf1..5ebd6ba6b4 100644
--- a/src/frontend/packages/core/src/shared/components/list/list-table/app-table-cell-default/app-table-cell-default.component.html
+++ b/src/frontend/packages/core/src/shared/components/list/list-table/app-table-cell-default/app-table-cell-default.component.html
@@ -7,8 +7,8 @@
   <span class="link">
     @if (showShortLink) {
       @if (linkValue) {
-        <div class="link__short">
-          <a class="link__short__icon" [href]="linkValue" [attr.target]="linkTarget" (click)="$event.stopPropagation()">
+        <div class="flex">
+          <a class="text-[17px]" [href]="linkValue" [attr.target]="linkTarget" (click)="$event.stopPropagation()">
             <app-custom-icon>launch</app-custom-icon>
           </a>
           <a [href]="linkValue" [attr.target]="linkTarget">View</a>
diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/app-table-cell-default/app-table-cell-default.component.scss b/src/frontend/packages/core/src/shared/components/list/list-table/app-table-cell-default/app-table-cell-default.component.scss
deleted file mode 100644
index e335f03e90..0000000000
--- a/src/frontend/packages/core/src/shared/components/list/list-table/app-table-cell-default/app-table-cell-default.component.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.link {
-  &__short {
-    display: flex;
-
-    &__icon {
-      font-size: 17px;
-
-      mat-icon {
-        font-size: 16px;
-        height: 16px;
-        margin-right: 2px;
-        width: 16px;
-      }
-    }
-
-  }
-}
diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/app-table-cell-default/app-table-cell-default.component.ts b/src/frontend/packages/core/src/shared/components/list/list-table/app-table-cell-default/app-table-cell-default.component.ts
index ffbadbee8b..a6e8237e77 100644
--- a/src/frontend/packages/core/src/shared/components/list/list-table/app-table-cell-default/app-table-cell-default.component.ts
+++ b/src/frontend/packages/core/src/shared/components/list/list-table/app-table-cell-default/app-table-cell-default.component.ts
@@ -12,7 +12,6 @@ import { CustomIconComponent } from '../../../../../shared/components/custom-mat
 @Component({
   selector: 'app-table-cell-default',
   templateUrl: 'app-table-cell-default.component.html',
-  styleUrls: ['app-table-cell-default.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-edit/table-cell-edit.component.html b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-edit/table-cell-edit.component.html
index f00a4ad40f..b696075992 100644
--- a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-edit/table-cell-edit.component.html
+++ b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-edit/table-cell-edit.component.html
@@ -1,14 +1,14 @@
-<div class="edit flex gap-1" [ngClass]="{'edit--subtle': subtle}">
+<div class="flex gap-1 justify-end">
   @if (!isEditing()) {
-    <button class="btn btn-icon btn-sm" (click)="dataSource.startEdit(row)"
+    <button class="btn btn-icon btn-sm" [ngClass]="subtle ? 'text-[18px] h-[25px] leading-[25px] opacity-60 pl-[5px] w-[35px]' : ''" (click)="dataSource.startEdit(row)"
       [disabled]="(dataSource.isSelecting$ | async) || (dataSource.isAdding$ | async)">
       <span class="material-icons">edit</span>
     </button>
   } @else {
-    <button id="table-cell-edit-done" class="btn btn-icon btn-sm btn-success" (click)="dataSource.saveEdit()">
+    <button id="table-cell-edit-done" class="btn btn-icon btn-sm btn-success" [ngClass]="subtle ? 'text-[18px] h-[25px] leading-[25px] opacity-60 pl-[5px] w-[35px]' : ''" (click)="dataSource.saveEdit()">
       <span class="material-icons">done</span>
     </button>
-    <button id="table-cell-edit-cancel" class="btn btn-icon btn-sm" (click)="dataSource.cancelEdit()">
+    <button id="table-cell-edit-cancel" class="btn btn-icon btn-sm" [ngClass]="subtle ? 'text-[18px] h-[25px] leading-[25px] opacity-60 pl-[5px] w-[35px]' : ''" (click)="dataSource.cancelEdit()">
       <span class="material-icons">clear</span>
     </button>
   }
diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-edit/table-cell-edit.component.scss b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-edit/table-cell-edit.component.scss
deleted file mode 100644
index e83483ff0c..0000000000
--- a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-edit/table-cell-edit.component.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.edit {
-  display: flex;
-  justify-content: flex-end;
-  &--subtle {
-    .btn-icon {
-      font-size: 18px;
-      height: 25px;
-      line-height: 25px;
-      opacity: 0.6;
-      padding-left: 5px;
-      width: 35px;
-    }
-  }
-}
diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-edit/table-cell-edit.component.ts b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-edit/table-cell-edit.component.ts
index b929f4b682..448fd19e27 100644
--- a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-edit/table-cell-edit.component.ts
+++ b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-edit/table-cell-edit.component.ts
@@ -7,7 +7,6 @@ import { TableCellCustom } from '../../list.types';
 @Component({
   selector: 'app-table-cell-edit',
   templateUrl: './table-cell-edit.component.html',
-  styleUrls: ['./table-cell-edit.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-expander/table-cell-expander.component.html b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-expander/table-cell-expander.component.html
index a081cda055..c487e96b63 100644
--- a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-expander/table-cell-expander.component.html
+++ b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-expander/table-cell-expander.component.html
@@ -1,10 +1,10 @@
-<div class="expander cursor-pointer inline-flex items-center justify-center w-6 h-6"
+<div class="cursor-pointer inline-flex items-center justify-center w-6 h-6"
      role="button" tabindex="0"
      (click)="toggle()"
      (keydown.enter)="toggle()"
      (keydown.space)="toggle(); $event.preventDefault()"
      [@indicatorRotate]="expandedService.expanded[rowId] ? 'expanded': 'collapsed'">
-  <div class="expander__icon-container">
+  <div class="h-[18px] w-[8px]">
     <span class="material-icons text-sm transition-transform duration-200"
           [class.rotate-90]="expandedService.expanded[rowId]">
       chevron_right
diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-expander/table-cell-expander.component.scss b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-expander/table-cell-expander.component.scss
deleted file mode 100644
index 0a98ff6121..0000000000
--- a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-expander/table-cell-expander.component.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.expander {
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-
-  &__icon-container {
-    height: 18px;
-    width: 8px;
-  }
-}
diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-expander/table-cell-expander.component.ts b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-expander/table-cell-expander.component.ts
index 720f8c4b19..aec9425c38 100644
--- a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-expander/table-cell-expander.component.ts
+++ b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-expander/table-cell-expander.component.ts
@@ -13,7 +13,6 @@ export interface TableCellExpanderConfig {
 @Component({
   selector: 'app-table-cell-expander',
   templateUrl: './table-cell-expander.component.html',
-  styleUrls: ['./table-cell-expander.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [],
diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-favorite/table-cell-favorite.component.html b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-favorite/table-cell-favorite.component.html
index 713fdccb66..52975c3b6c 100644
--- a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-favorite/table-cell-favorite.component.html
+++ b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-favorite/table-cell-favorite.component.html
@@ -1 +1 @@
-@if (canFavorite) {<app-entity-favorite-star class="table-cell-favorite" [favorite]="favorite"></app-entity-favorite-star>}
\ No newline at end of file
+@if (canFavorite) {<app-entity-favorite-star class="flex justify-end" [favorite]="favorite"></app-entity-favorite-star>}
\ No newline at end of file
diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-favorite/table-cell-favorite.component.scss b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-favorite/table-cell-favorite.component.scss
deleted file mode 100644
index a43f558379..0000000000
--- a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-favorite/table-cell-favorite.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-
-.table-cell-favorite {
-  display: flex;
-  justify-content: flex-end;
-}
diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-favorite/table-cell-favorite.component.ts b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-favorite/table-cell-favorite.component.ts
index ec41cb4657..d5ab4bc8e6 100644
--- a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-favorite/table-cell-favorite.component.ts
+++ b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-favorite/table-cell-favorite.component.ts
@@ -81,7 +81,6 @@ export interface TableCellFavoriteComponentConfig<T, Y extends IFavoriteMetadata
 @Component({
 selector: 'app-table-cell-favorite',
   templateUrl: './table-cell-favorite.component.html',
-  styleUrls: ['./table-cell-favorite.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-side-panel/table-cell-side-panel.component.html b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-side-panel/table-cell-side-panel.component.html
index 14c32d3b33..4dc4c6bd5d 100644
--- a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-side-panel/table-cell-side-panel.component.html
+++ b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-side-panel/table-cell-side-panel.component.html
@@ -1,4 +1,4 @@
-<a class="link text-brand-600 hover:text-brand-800 cursor-pointer" role="button" tabindex="0"
+<a class="link text-brand-600 hover:text-brand-800 cursor-pointer underline" role="button" tabindex="0"
   (click)="showSidePanel(); $event.stopPropagation()"
   (keydown.enter)="showSidePanel(); $event.stopPropagation()"
   (keydown.space)="showSidePanel(); $event.stopPropagation(); $event.preventDefault()">
diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-side-panel/table-cell-side-panel.component.scss b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-side-panel/table-cell-side-panel.component.scss
deleted file mode 100644
index 13645db922..0000000000
--- a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-side-panel/table-cell-side-panel.component.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-a {
-  cursor: pointer;
-  text-decoration: underline;
-}
diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-side-panel/table-cell-side-panel.component.ts b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-side-panel/table-cell-side-panel.component.ts
index cd1128422b..b26494f275 100644
--- a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-side-panel/table-cell-side-panel.component.ts
+++ b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-side-panel/table-cell-side-panel.component.ts
@@ -13,7 +13,6 @@ export interface TableCellSidePanelConfig<T> {
 @Component({
   selector: 'app-table-cell-side-panel',
   templateUrl: './table-cell-side-panel.component.html',
-  styleUrls: ['./table-cell-side-panel.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true
 })
diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell/table-cell.component.scss b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell/table-cell.component.scss
deleted file mode 100644
index ec1a2f6000..0000000000
--- a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell/table-cell.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.app-table__cell--table-column-nowrap {
-  white-space: nowrap;
-}
diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell/table-cell.component.ts b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell/table-cell.component.ts
index 4f695637ea..5ca1e7c42f 100644
--- a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell/table-cell.component.ts
+++ b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell/table-cell.component.ts
@@ -18,7 +18,6 @@ import { ICellDefinition } from '../table.types';
 @Component({
   selector: 'app-table-cell',
   templateUrl: './table-cell.component.html',
-  styleUrls: ['./table-cell.component.scss'],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
diff --git a/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-address/table-cell-endpoint-address.component.html b/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-address/table-cell-endpoint-address.component.html
index 1b9e5d44c8..6bf42789f7 100644
--- a/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-address/table-cell-endpoint-address.component.html
+++ b/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-address/table-cell-endpoint-address.component.html
@@ -1,7 +1,7 @@
 @if (endpointAddress$ | async; as address) {
-  <div class="endpoint-address-cell">
+  <div class="flex items-center">
     <div>{{ address }}</div>
-    <app-copy-to-clipboard class="endpoint-address-cell__copy" [compact]="true" [text]="address" tooltip="Copy to clipboard" [showSuccessText]="false">
+    <app-copy-to-clipboard class="w-6" [compact]="true" [text]="address" tooltip="Copy to clipboard" [showSuccessText]="false">
     </app-copy-to-clipboard>
     @if (isDuplicate$ | async) {
       <span class="material-icons text-warning-shade-600 dark:text-warning-shade-300 ml-1 text-[20px] leading-none"
diff --git a/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-address/table-cell-endpoint-address.component.scss b/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-address/table-cell-endpoint-address.component.scss
deleted file mode 100644
index 6404b248c8..0000000000
--- a/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-address/table-cell-endpoint-address.component.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.endpoint-address-cell {
-  display: flex;
-  align-items: center;
-
-  &__copy {
-    width: 24px;
-  }
-
-
-}
diff --git a/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-address/table-cell-endpoint-address.component.ts b/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-address/table-cell-endpoint-address.component.ts
index decac6be9f..1cf3b57a1b 100644
--- a/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-address/table-cell-endpoint-address.component.ts
+++ b/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-address/table-cell-endpoint-address.component.ts
@@ -14,7 +14,6 @@ import { RowWithEndpointId } from '../table-cell-endpoint-name/table-cell-endpoi
 @Component({
   selector: 'app-table-cell-endpoint-address',
   templateUrl: './table-cell-endpoint-address.component.html',
-  styleUrls: ['./table-cell-endpoint-address.component.scss'],
   standalone: true,
   imports: [
     CommonModule,
diff --git a/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-name/table-cell-endpoint-name.component.html b/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-name/table-cell-endpoint-name.component.html
index 347fb59d32..dfb096fd4b 100644
--- a/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-name/table-cell-endpoint-name.component.html
+++ b/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-name/table-cell-endpoint-name.component.html
@@ -1,5 +1,5 @@
 @if (endpoint$ | async; as endpoint) {
-  <div class="endpoint-name-cell">
+  <div class="flex items-center">
     @if (endpoint.canShowLink) {
       <a routerLink="{{ endpoint.link }}">{{ endpoint.name }}</a>
     }
@@ -8,7 +8,7 @@
     }
     @if (!!endpoint.system_shared_token) {
       <app-custom-icon
-        matTooltip="This endpoint's connection is shared by the administrator" class="endpoint-name-cell__icon">share
+        matTooltip="This endpoint's connection is shared by the administrator" class="text-[20px] h-5 w-5 pl-2">share
       </app-custom-icon>
     }
   </div>
diff --git a/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-name/table-cell-endpoint-name.component.scss b/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-name/table-cell-endpoint-name.component.scss
deleted file mode 100644
index 0c52fc94ed..0000000000
--- a/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-name/table-cell-endpoint-name.component.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.endpoint-name-cell {
-  align-items: center;
-  display: flex;
-  &__icon {
-    font-size: 20px;
-    height: 20px;
-    padding-left: 8px;
-    width: 20px;
-  }
-}
diff --git a/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-name/table-cell-endpoint-name.component.ts b/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-name/table-cell-endpoint-name.component.ts
index 1463f77a6c..c32c975d0d 100644
--- a/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-name/table-cell-endpoint-name.component.ts
+++ b/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-name/table-cell-endpoint-name.component.ts
@@ -18,7 +18,6 @@ export interface RowWithEndpointId {
 @Component({
   selector: 'app-table-cell-endpoint-name',
   templateUrl: './table-cell-endpoint-name.component.html',
-  styleUrls: ['./table-cell-endpoint-name.component.scss'],
   standalone: true,
   imports: [
     CommonModule,
diff --git a/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-status/table-cell-endpoint-status.component.html b/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-status/table-cell-endpoint-status.component.html
index ca66f8abec..38cccf9cdb 100644
--- a/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-status/table-cell-endpoint-status.component.html
+++ b/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-status/table-cell-endpoint-status.component.html
@@ -1,30 +1,30 @@
-<div>
+<div class="flex items-center">
   @if (connectable) {
     @if (row.connectionStatus === 'connected' ) {
       @if (config?.showLabel) {
-        <span>Connected @if (row.local) {
-          <span>(local)</span>
+        <span class="mr-2">Connected @if (row.local) {
+          <span class="mr-2">(local)</span>
         }</span>
       }
       <app-custom-icon fontSet="stratos-icons">endpoints_connected</app-custom-icon>
     }
     @if (row.connectionStatus === 'disconnected') {
       @if (config?.showLabel) {
-        <span>Disconnected @if (row.local) {
-          <span>(local)</span>
+        <span class="mr-2">Disconnected @if (row.local) {
+          <span class="mr-2">(local)</span>
         }</span>
       }
       <app-custom-icon fontSet="stratos-icons">endpoints_disconnected</app-custom-icon>
     }
     @if (row.connectionStatus === 'checking') {
       @if (config?.showLabel) {
-        <span>Updating </span>
+        <span class="mr-2">Updating </span>
       }
       <app-spinner [diameter]="20"></app-spinner>
     }
     @if (!row.connectionStatus || row.connectionStatus === 'unknown') {
       @if (config?.showLabel) {
-        <span>Unknown </span>
+        <span class="mr-2">Unknown </span>
       }
       <app-custom-icon>help_outline</app-custom-icon>
     }
@@ -32,25 +32,25 @@
     @if (row?.endpoint_metadata?.status; as status) {
       @if (status === 'Synchronized') {
         @if (config?.showLabel) {
-          <span>Synchronized </span>
+          <span class="mr-2">Synchronized </span>
         }
         <app-custom-icon>cloud_done</app-custom-icon>
       }
       @if (status === 'Synchronizing') {
         @if (config?.showLabel) {
-          <span>Synchronizing </span>
+          <span class="mr-2">Synchronizing </span>
         }
         <app-spinner [diameter]="20"></app-spinner>
       }
       @if (status === 'Pending') {
         @if (config?.showLabel) {
-          <span>Sync Pending</span>
+          <span class="mr-2">Sync Pending</span>
         }
         <app-custom-icon>hourglass_empty</app-custom-icon>
       }
       @if (status === 'Failed') {
         @if (config?.showLabel) {
-          <span>Synchronization failed</span>
+          <span class="mr-2">Synchronization failed</span>
         }
         <app-custom-icon>sync_problem</app-custom-icon>
       }
diff --git a/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-status/table-cell-endpoint-status.component.scss b/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-status/table-cell-endpoint-status.component.scss
deleted file mode 100644
index b238964bca..0000000000
--- a/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-status/table-cell-endpoint-status.component.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-div {
-  align-items: center;
-  display: flex;
-  span {
-    margin-right: 8px;
-  }
-}
diff --git a/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-status/table-cell-endpoint-status.component.ts b/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-status/table-cell-endpoint-status.component.ts
index 02df0938e4..a1c80e1669 100644
--- a/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-status/table-cell-endpoint-status.component.ts
+++ b/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-status/table-cell-endpoint-status.component.ts
@@ -8,7 +8,6 @@ import { CustomIconComponent } from '../../../../../../shared/components/custom-
 @Component({
   selector: 'app-table-cell-endpoint-status',
   templateUrl: './table-cell-endpoint-status.component.html',
-  styleUrls: ['./table-cell-endpoint-status.component.scss'],
   standalone: true,
   imports: [
     CustomIconComponent
diff --git a/src/frontend/packages/core/src/shared/components/list/max-list-message/max-list-message.component.html b/src/frontend/packages/core/src/shared/components/list/max-list-message/max-list-message.component.html
index bc0416b635..b551c11e90 100644
--- a/src/frontend/packages/core/src/shared/components/list/max-list-message/max-list-message.component.html
+++ b/src/frontend/packages/core/src/shared/components/list/max-list-message/max-list-message.component.html
@@ -1,5 +1,5 @@
 @if (state$ | async; as state) {
-  <div class="maxed">
+  <div class="flex flex-col items-center">
     <app-no-content-message [icon]="state.icon" [iconFont]="state.iconFont" [firstLine]="state.firstLine"
       [otherLines]="state.otherLines">
       @if (state.canIgnoreMaxedState) {
diff --git a/src/frontend/packages/core/src/shared/components/list/max-list-message/max-list-message.component.scss b/src/frontend/packages/core/src/shared/components/list/max-list-message/max-list-message.component.scss
deleted file mode 100644
index ccf5bfbf05..0000000000
--- a/src/frontend/packages/core/src/shared/components/list/max-list-message/max-list-message.component.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.maxed {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-
-  &__load {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-  }
-}
diff --git a/src/frontend/packages/core/src/shared/components/list/max-list-message/max-list-message.component.ts b/src/frontend/packages/core/src/shared/components/list/max-list-message/max-list-message.component.ts
index d9eec0e8df..28d00d902e 100644
--- a/src/frontend/packages/core/src/shared/components/list/max-list-message/max-list-message.component.ts
+++ b/src/frontend/packages/core/src/shared/components/list/max-list-message/max-list-message.component.ts
@@ -11,7 +11,6 @@ import { ITableTextMaxed } from '../list-table/table.types';
 @Component({
   selector: 'app-max-list-message',
   templateUrl: './max-list-message.component.html',
-  styleUrls: ['./max-list-message.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/core/src/shared/components/monaco-editor/monaco-editor.component.html b/src/frontend/packages/core/src/shared/components/monaco-editor/monaco-editor.component.html
index 167db2f350..c795a7b7a0 100644
--- a/src/frontend/packages/core/src/shared/components/monaco-editor/monaco-editor.component.html
+++ b/src/frontend/packages/core/src/shared/components/monaco-editor/monaco-editor.component.html
@@ -1 +1 @@
-<div #editorContainer class="monaco-editor-container"></div>
+<div #editorContainer class="w-full h-full min-h-[200px]"></div>
diff --git a/src/frontend/packages/core/src/shared/components/monaco-editor/monaco-editor.component.scss b/src/frontend/packages/core/src/shared/components/monaco-editor/monaco-editor.component.scss
deleted file mode 100644
index 298a713de1..0000000000
--- a/src/frontend/packages/core/src/shared/components/monaco-editor/monaco-editor.component.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-:host {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-.monaco-editor-container {
-  width: 100%;
-  height: 100%;
-  min-height: 200px;
-}
diff --git a/src/frontend/packages/core/src/shared/components/monaco-editor/monaco-editor.component.ts b/src/frontend/packages/core/src/shared/components/monaco-editor/monaco-editor.component.ts
index afbdee40f3..e6a3666194 100644
--- a/src/frontend/packages/core/src/shared/components/monaco-editor/monaco-editor.component.ts
+++ b/src/frontend/packages/core/src/shared/components/monaco-editor/monaco-editor.component.ts
@@ -34,7 +34,7 @@ export interface MonacoEditorOptions {
 @Component({
   selector: 'app-monaco-editor',
   templateUrl: './monaco-editor.component.html',
-  styleUrls: ['./monaco-editor.component.scss'],
+  host: { class: 'block w-full h-full' },
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
diff --git a/src/frontend/packages/core/src/shared/components/page-sub-nav-section/page-sub-nav-section.component.html b/src/frontend/packages/core/src/shared/components/page-sub-nav-section/page-sub-nav-section.component.html
index 8f42c6b3a5..28e687a83d 100644
--- a/src/frontend/packages/core/src/shared/components/page-sub-nav-section/page-sub-nav-section.component.html
+++ b/src/frontend/packages/core/src/shared/components/page-sub-nav-section/page-sub-nav-section.component.html
@@ -1,7 +1,7 @@
-<span class="sub-nav-section">
-  <div class="sub-nav-section__inner">
+<span class="inline-block">
+  <div class="flex items-center">
     <ng-content></ng-content>
-    <div class="sub-nav-section__divider">
+    <div class="border-r border-[rgba(100,121,143,0.4)] h-5 mr-2.5 pr-2.5">
     </div>
   </div>
 </span>
\ No newline at end of file
diff --git a/src/frontend/packages/core/src/shared/components/page-sub-nav-section/page-sub-nav-section.component.scss b/src/frontend/packages/core/src/shared/components/page-sub-nav-section/page-sub-nav-section.component.scss
deleted file mode 100644
index 6911af86ab..0000000000
--- a/src/frontend/packages/core/src/shared/components/page-sub-nav-section/page-sub-nav-section.component.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.sub-nav-section {
-  display: inline-block;
-  &__inner {
-    align-items: center;
-    display: flex;
-  }
-  &__divider {
-    border-right: 1px solid rgba(100, 121, 143, .4);
-    height: 20px;
-    margin-right: 10px;
-    padding-right: 10px;
-  }
-}
diff --git a/src/frontend/packages/core/src/shared/components/page-sub-nav-section/page-sub-nav-section.component.ts b/src/frontend/packages/core/src/shared/components/page-sub-nav-section/page-sub-nav-section.component.ts
index 7ac11f0aae..281f79804e 100644
--- a/src/frontend/packages/core/src/shared/components/page-sub-nav-section/page-sub-nav-section.component.ts
+++ b/src/frontend/packages/core/src/shared/components/page-sub-nav-section/page-sub-nav-section.component.ts
@@ -3,7 +3,6 @@ import { ChangeDetectionStrategy, Component  } from '@angular/core';
 @Component({
   selector: 'app-page-sub-nav-section',
   templateUrl: './page-sub-nav-section.component.html',
-  styleUrls: ['./page-sub-nav-section.component.scss'],
   standalone: true,
   imports: [],
   changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/src/frontend/packages/core/src/shared/components/routing-indicator/routing-indicator.component.html b/src/frontend/packages/core/src/shared/components/routing-indicator/routing-indicator.component.html
index a1261d5ab3..2eca645fcd 100644
--- a/src/frontend/packages/core/src/shared/components/routing-indicator/routing-indicator.component.html
+++ b/src/frontend/packages/core/src/shared/components/routing-indicator/routing-indicator.component.html
@@ -1,7 +1,7 @@
 @if (value$ | async; as value) {
   <div>
     @if (value < HIDE_VALUE) {
-      <app-progress-bar class="routing-indicator" mode="determinate" [value]="value"></app-progress-bar>
+      <app-progress-bar class="h-[3px]" mode="determinate" [value]="value"></app-progress-bar>
     }
   </div>
 }
diff --git a/src/frontend/packages/core/src/shared/components/routing-indicator/routing-indicator.component.scss b/src/frontend/packages/core/src/shared/components/routing-indicator/routing-indicator.component.scss
deleted file mode 100644
index ff211c45e8..0000000000
--- a/src/frontend/packages/core/src/shared/components/routing-indicator/routing-indicator.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.routing-indicator {
-  height: 3px;
-}
diff --git a/src/frontend/packages/core/src/shared/components/routing-indicator/routing-indicator.component.ts b/src/frontend/packages/core/src/shared/components/routing-indicator/routing-indicator.component.ts
index 056c4a26db..bb58a595d2 100644
--- a/src/frontend/packages/core/src/shared/components/routing-indicator/routing-indicator.component.ts
+++ b/src/frontend/packages/core/src/shared/components/routing-indicator/routing-indicator.component.ts
@@ -7,7 +7,6 @@ import { filter, map, startWith, switchMap, delay, tap } from 'rxjs/operators';
 @Component({
   selector: 'app-routing-indicator',
   templateUrl: './routing-indicator.component.html',
-  styleUrls: ['./routing-indicator.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/core/src/shared/components/sidepanel-preview/sidepanel-preview.component.html b/src/frontend/packages/core/src/shared/components/sidepanel-preview/sidepanel-preview.component.html
index ab587569fc..89ebd7f5c6 100644
--- a/src/frontend/packages/core/src/shared/components/sidepanel-preview/sidepanel-preview.component.html
+++ b/src/frontend/packages/core/src/shared/components/sidepanel-preview/sidepanel-preview.component.html
@@ -1,19 +1,24 @@
-<div class="sidepanel-preview" [ngClass]="{'sidepanel-preview__preview': sidePanelService.previewMode()}">
-  <div class="sidepanel-preview__header">
-    <h1>{{ title }}</h1>
+<div class="flex flex-col bg-[var(--card-bg)] text-[var(--content-text)]"
+  [ngClass]="sidePanelService.previewMode() ? 'h-[calc(100vh-57px)]' : 'h-screen'">
+  <div class="flex bg-[var(--card-header-bg)] border-b border-[var(--content-border)]"
+    [ngClass]="sidePanelService.previewMode() ? 'h-[48px] flex-[0_0_48px]' : 'h-14 flex-[0_0_56px]'">
+    <h1 class="self-center ml-3 text-[var(--content-text)]"
+      [ngClass]="sidePanelService.previewMode() ? 'text-[16px]' : 'text-xl'">{{ title }}</h1>
     @if (favorite) {
-      <app-entity-favorite-star [small]="true" class="sidepanel-preview__favorite" [favorite]="favorite"></app-entity-favorite-star>
+      <app-entity-favorite-star [small]="true" class="flex items-center ml-[10px] opacity-60" [favorite]="favorite"></app-entity-favorite-star>
     }
-    <div  class="sidepanel-preview__custom">
+    <div class="self-center flex-1 mx-[10px] mr-[50px]">
       @if (header) {
         <ng-container [cdkPortalOutlet]="header"></ng-container>
       }
     </div>
-    <button class="sidepanel__close btn btn-icon" type="button" (click)="sidePanelService.hide()">
+    <button class="btn btn-icon absolute right-[5px]"
+      [ngClass]="sidePanelService.previewMode() ? 'top-[3px]' : 'top-[7px]'"
+      type="button" (click)="sidePanelService.hide()">
       <app-custom-icon>close</app-custom-icon>
     </button>
   </div>
-  <div class="sidepanel-preview__content">
+  <div class="flex-1 overflow-y-auto p-[12px_15px] relative bg-[var(--card-bg)]">
     <ng-content></ng-content>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/frontend/packages/core/src/shared/components/sidepanel-preview/sidepanel-preview.component.scss b/src/frontend/packages/core/src/shared/components/sidepanel-preview/sidepanel-preview.component.scss
deleted file mode 100644
index 4851d4a8ac..0000000000
--- a/src/frontend/packages/core/src/shared/components/sidepanel-preview/sidepanel-preview.component.scss
+++ /dev/null
@@ -1,72 +0,0 @@
-.sidepanel-preview {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  background-color: var(--card-bg);
-  color: var(--content-text);
-
-  &__preview {
-    height: calc(100vh - 57px);
-
-    .sidepanel-preview__header {
-      flex: 0 0 48px;
-      height: 48px;
-
-      h1 {
-        font-size: 16px;
-      }
-
-      .sidepanel__close {
-        position: absolute;
-        right: 5px;
-        top: 3px;
-      }
-    }
-  }
-  &__header {
-    display: flex;
-    flex: 0 0 56px;
-    height: 56px;
-    background-color: var(--card-header-bg);
-    border-bottom: 1px solid var(--content-border);
-
-    h1 {
-      align-self: center;
-      font-size: 20px;
-      margin-left: 12px;
-      color: var(--content-text);
-    }
-
-    .sidepanel__close {
-      position: absolute;
-      right: 5px;
-      top: 7px;
-    }
-  }
-  &__custom {
-    align-self: center;
-    flex: 1;
-    margin: 0 50px 0 10px;
-  }
-
-  &__content {
-    flex: 1;
-    overflow-y: auto;
-    padding: 12px 15px;
-    position: relative;
-    background-color: var(--card-bg);
-  }
-
-  &__side-help-button {
-    position: absolute;
-    right: 5px;
-    top: 7px;
-  }
-
-  &__favorite {
-    align-items: center;
-    display: flex;
-    margin-left: 10px;
-    opacity: 0.6;
-  }
-}
diff --git a/src/frontend/packages/core/src/shared/components/sidepanel-preview/sidepanel-preview.component.ts b/src/frontend/packages/core/src/shared/components/sidepanel-preview/sidepanel-preview.component.ts
index 705f7dfd11..d319a0538c 100644
--- a/src/frontend/packages/core/src/shared/components/sidepanel-preview/sidepanel-preview.component.ts
+++ b/src/frontend/packages/core/src/shared/components/sidepanel-preview/sidepanel-preview.component.ts
@@ -10,7 +10,6 @@ import { CustomIconComponent } from '../../../shared/components/custom-material/
 @Component({
   selector: 'app-sidepanel-preview',
   templateUrl: './sidepanel-preview.component.html',
-  styleUrls: ['./sidepanel-preview.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/core/src/shared/components/snackbar-return/snackbar-return.component.html b/src/frontend/packages/core/src/shared/components/snackbar-return/snackbar-return.component.html
index a1e32b80d6..c11beb54ad 100644
--- a/src/frontend/packages/core/src/shared/components/snackbar-return/snackbar-return.component.html
+++ b/src/frontend/packages/core/src/shared/components/snackbar-return/snackbar-return.component.html
@@ -1,7 +1,7 @@
-<div class="app-snackbar-return mat-simple-snackbar">
+<div class="flex justify-between items-center h-full leading-5 opacity-100 mat-simple-snackbar">
   <span>{{ message }}</span>
   @if (returnUrl) {
-    <div class="app-snackbar-return-action mat-simple-snackbar-action">
+    <div class="shrink-0 -mt-2 -mr-2 -mb-2 ml-2 mat-simple-snackbar-action">
       <button class="btn btn-ghost" type="button" (click)="return()">{{ returnLabel }}</button>
       <button class="btn btn-ghost" type="button" (click)="dismiss()">Dismiss</button>
     </div>
diff --git a/src/frontend/packages/core/src/shared/components/snackbar-return/snackbar-return.component.scss b/src/frontend/packages/core/src/shared/components/snackbar-return/snackbar-return.component.scss
deleted file mode 100644
index 0f2a6975e0..0000000000
--- a/src/frontend/packages/core/src/shared/components/snackbar-return/snackbar-return.component.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.app-snackbar-return {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 100%;
-  line-height: 20px;
-  opacity: 1;
-}
-
-.app-snackbar-return-action {
-  flex-shrink: 0;
-  margin: -8px -8px -8px 8px;
-}
\ No newline at end of file
diff --git a/src/frontend/packages/core/src/shared/components/snackbar-return/snackbar-return.component.ts b/src/frontend/packages/core/src/shared/components/snackbar-return/snackbar-return.component.ts
index 10c093ac6f..82c54d77d8 100644
--- a/src/frontend/packages/core/src/shared/components/snackbar-return/snackbar-return.component.ts
+++ b/src/frontend/packages/core/src/shared/components/snackbar-return/snackbar-return.component.ts
@@ -8,7 +8,6 @@ import { RouterNav, AppState } from '@stratosui/store';
 @Component({
   selector: 'app-snackbar-return',
   templateUrl: './snackbar-return.component.html',
-  styleUrls: ['./snackbar-return.component.scss'],
   standalone: true,
   imports: [],
   changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/src/frontend/packages/core/src/shared/components/stacked-input-actions/stacked-input-actions.component.html b/src/frontend/packages/core/src/shared/components/stacked-input-actions/stacked-input-actions.component.html
index c51880a741..e9e77d11eb 100644
--- a/src/frontend/packages/core/src/shared/components/stacked-input-actions/stacked-input-actions.component.html
+++ b/src/frontend/packages/core/src/shared/components/stacked-input-actions/stacked-input-actions.component.html
@@ -2,6 +2,6 @@
   <div #inputs></div>
 </div>
 <button class="stacked-input__add btn btn-ghost" type="button" (click)="addComponent()" [disabled]="disabled">
-  <div class="stacked-input__add--content">Add another <app-custom-icon class="">add_box</app-custom-icon>
+  <div class="flex items-center">Add another <app-custom-icon class="">add_box</app-custom-icon>
   </div>
 </button>
\ No newline at end of file
diff --git a/src/frontend/packages/core/src/shared/components/stacked-input-actions/stacked-input-actions.component.scss b/src/frontend/packages/core/src/shared/components/stacked-input-actions/stacked-input-actions.component.scss
deleted file mode 100644
index 73989e7b2b..0000000000
--- a/src/frontend/packages/core/src/shared/components/stacked-input-actions/stacked-input-actions.component.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.stacked-input {
-  &__add {
-    &--content {
-      align-items: center;
-      display: flex;
-      mat-icon {
-        padding-left: 5px;
-      }
-    }
-  }
-}
diff --git a/src/frontend/packages/core/src/shared/components/stacked-input-actions/stacked-input-actions.component.ts b/src/frontend/packages/core/src/shared/components/stacked-input-actions/stacked-input-actions.component.ts
index ed46c00733..9cc5f80798 100644
--- a/src/frontend/packages/core/src/shared/components/stacked-input-actions/stacked-input-actions.component.ts
+++ b/src/frontend/packages/core/src/shared/components/stacked-input-actions/stacked-input-actions.component.ts
@@ -26,7 +26,6 @@ export interface StackedInputActionsUpdate { values: { [key: string]: string };
 @Component({
   selector: 'app-stacked-input-actions',
   templateUrl: './stacked-input-actions.component.html',
-  styleUrls: ['./stacked-input-actions.component.scss'],
   standalone: true,
   imports: [
     CustomIconComponent
diff --git a/src/frontend/packages/core/src/shared/components/start-end-date/start-end-date.component.html b/src/frontend/packages/core/src/shared/components/start-end-date/start-end-date.component.html
index f2e5cba813..56b076a7fe 100644
--- a/src/frontend/packages/core/src/shared/components/start-end-date/start-end-date.component.html
+++ b/src/frontend/packages/core/src/shared/components/start-end-date/start-end-date.component.html
@@ -1,14 +1,14 @@
-<div class="start-end-date">
-  <div class="start-end-date__selector">
+<div class="flex items-center flex-wrap w-full">
+  <div class="flex-none px-[5px]">
     <app-date-time [(dateTime)]="start"></app-date-time>
   </div>
-  <div class="start-end-date__arrow">
+  <div class="px-[5px]">
     to
   </div>
-  <div class="start-end-date__selector">
+  <div class="flex-none px-[5px]">
     <app-date-time [(dateTime)]="end"></app-date-time>
   </div>
 </div>
-<div class="invalid-message">
+<div class="text-xs min-h-4">
   {{ validMessage }}
 </div>
\ No newline at end of file
diff --git a/src/frontend/packages/core/src/shared/components/start-end-date/start-end-date.component.scss b/src/frontend/packages/core/src/shared/components/start-end-date/start-end-date.component.scss
deleted file mode 100644
index 8d9ff8f5f7..0000000000
--- a/src/frontend/packages/core/src/shared/components/start-end-date/start-end-date.component.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.start-end-date {
-  align-items: center;
-  display: flex;
-  flex-wrap: wrap;
-  width: 100%;
-  &__selector {
-    flex: none;
-    padding: 0 5px;
-  }
-  &__arrow {
-    padding: 0 5px;
-  }
-}
-
-.invalid-message {
-  font-size: 12px;
-  min-height: 16px;
-}
diff --git a/src/frontend/packages/core/src/shared/components/start-end-date/start-end-date.component.ts b/src/frontend/packages/core/src/shared/components/start-end-date/start-end-date.component.ts
index 6ef38ec1fb..1545ddf98c 100644
--- a/src/frontend/packages/core/src/shared/components/start-end-date/start-end-date.component.ts
+++ b/src/frontend/packages/core/src/shared/components/start-end-date/start-end-date.component.ts
@@ -6,7 +6,6 @@ import { DateTimeComponent } from '../date-time/date-time.component';
 @Component({
   selector: 'app-start-end-date',
   templateUrl: './start-end-date.component.html',
-  styleUrls: ['./start-end-date.component.scss'],
   standalone: true,
   imports: [
     DateTimeComponent
diff --git a/src/frontend/packages/core/src/shared/components/stepper/stepper-form/stepper-form.component.html b/src/frontend/packages/core/src/shared/components/stepper/stepper-form/stepper-form.component.html
index 94e040b3db..42eeed3a62 100644
--- a/src/frontend/packages/core/src/shared/components/stepper/stepper-form/stepper-form.component.html
+++ b/src/frontend/packages/core/src/shared/components/stepper/stepper-form/stepper-form.component.html
@@ -1,3 +1,3 @@
-<div class="steppers-form">
+<div class="flex flex-col h-full w-3/5">
   <ng-content></ng-content>
 </div>
diff --git a/src/frontend/packages/core/src/shared/components/stepper/stepper-form/stepper-form.component.scss b/src/frontend/packages/core/src/shared/components/stepper/stepper-form/stepper-form.component.scss
deleted file mode 100644
index c365c06ad1..0000000000
--- a/src/frontend/packages/core/src/shared/components/stepper/stepper-form/stepper-form.component.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.steppers-form {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 60%;
-}
diff --git a/src/frontend/packages/core/src/shared/components/stepper/stepper-form/stepper-form.component.ts b/src/frontend/packages/core/src/shared/components/stepper/stepper-form/stepper-form.component.ts
index 80c1882d2f..51c98b90ca 100644
--- a/src/frontend/packages/core/src/shared/components/stepper/stepper-form/stepper-form.component.ts
+++ b/src/frontend/packages/core/src/shared/components/stepper/stepper-form/stepper-form.component.ts
@@ -3,7 +3,6 @@ import { ChangeDetectionStrategy, Component  } from '@angular/core';
 @Component({
   selector: 'app-stepper-form',
   templateUrl: './stepper-form.component.html',
-  styleUrls: ['./stepper-form.component.scss'],
   standalone: true,
   imports: [],
   changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/src/frontend/packages/core/src/shared/components/stratos-title/stratos-title.component.html b/src/frontend/packages/core/src/shared/components/stratos-title/stratos-title.component.html
index 907b998a8f..283dbb2511 100644
--- a/src/frontend/packages/core/src/shared/components/stratos-title/stratos-title.component.html
+++ b/src/frontend/packages/core/src/shared/components/stratos-title/stratos-title.component.html
@@ -1,10 +1,10 @@
-<div class="stratos-title text-center">
-  <img class="stratos-title__logo mx-auto mb-4" [src]="themeLogo()" alt="" />
-  <h1 class="stratos-title__header text-2xl font-bold text-content-text mb-2">
+<div class="flex flex-col justify-center pt-6 text-center">
+  <img class="self-center pt-3 pb-4 w-60 mb-4" [src]="themeLogo()" alt="" />
+  <h1 class="hidden">
     {{ title || themeTitle() }}
   </h1>
   @if (themeSubtitle()) {
-    <p class="stratos-title__subtitle text-content-muted text-sm">
+    <p class="text-content-muted text-sm">
       {{ themeSubtitle() }}
     </p>
   }
diff --git a/src/frontend/packages/core/src/shared/components/stratos-title/stratos-title.component.scss b/src/frontend/packages/core/src/shared/components/stratos-title/stratos-title.component.scss
deleted file mode 100644
index be2b80bd6e..0000000000
--- a/src/frontend/packages/core/src/shared/components/stratos-title/stratos-title.component.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.stratos-title {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding-top: 24px;
-  &__logo {
-    align-self: center;
-    padding: 12px 0 16px;
-    width: 240px;
-  }
-  &__header {
-    display: none;
-    font-size: 28px;
-    font-weight: 500;
-    letter-spacing: 2px;
-    margin: 0;
-    text-align: center;
-    text-transform: uppercase;
-  }
-}
diff --git a/src/frontend/packages/core/src/shared/components/stratos-title/stratos-title.component.ts b/src/frontend/packages/core/src/shared/components/stratos-title/stratos-title.component.ts
index fbdeab9812..e04e413e29 100644
--- a/src/frontend/packages/core/src/shared/components/stratos-title/stratos-title.component.ts
+++ b/src/frontend/packages/core/src/shared/components/stratos-title/stratos-title.component.ts
@@ -10,7 +10,6 @@ import { StratosBrandingService } from "../../../../../theme/stratos-branding.se
 @Component({
   selector: "app-stratos-title",
   templateUrl: "./stratos-title.component.html",
-  styleUrls: ["./stratos-title.component.scss"],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [],
diff --git a/src/frontend/packages/core/src/shared/components/upload-progress-indicator/upload-progress-indicator.component.html b/src/frontend/packages/core/src/shared/components/upload-progress-indicator/upload-progress-indicator.component.html
index 6d79dcb858..773511a892 100644
--- a/src/frontend/packages/core/src/shared/components/upload-progress-indicator/upload-progress-indicator.component.html
+++ b/src/frontend/packages/core/src/shared/components/upload-progress-indicator/upload-progress-indicator.component.html
@@ -1,7 +1,13 @@
-<div class="upload-progress" [ngClass]="{'upload-progress-done': value === 100}">
-  <app-custom-icon class="upload-progress__icon">cloud_upload</app-custom-icon>
-  <app-custom-icon class="upload-progress__done">done</app-custom-icon>
-  <div class="upload-progress__spinner">
+<div class="relative w-[140px] h-[140px] align-middle">
+  <app-custom-icon class="absolute h-[140px] w-[140px] text-[96px] pt-4 border-4 border-solid rounded-full text-center transition-opacity duration-1000"
+    [class.opacity-0]="value === 100"
+    [class.opacity-100]="value !== 100">cloud_upload</app-custom-icon>
+  <app-custom-icon class="absolute h-[140px] w-[140px] text-[96px] pt-4 border-4 border-solid rounded-full text-center transition-opacity duration-1000"
+    [class.opacity-100]="value === 100"
+    [class.opacity-0]="value !== 100">done</app-custom-icon>
+  <div class="absolute w-[140px] h-[140px] transition-opacity duration-1000"
+    [class.opacity-0]="value === 100"
+    [class.opacity-100]="value !== 100">
     <custom-progress-bar [value]="value" mode="determinate" color="primary"></custom-progress-bar>
   </div>
 </div>
diff --git a/src/frontend/packages/core/src/shared/components/upload-progress-indicator/upload-progress-indicator.component.scss b/src/frontend/packages/core/src/shared/components/upload-progress-indicator/upload-progress-indicator.component.scss
deleted file mode 100644
index fae5d91687..0000000000
--- a/src/frontend/packages/core/src/shared/components/upload-progress-indicator/upload-progress-indicator.component.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-$progress-size: 140px;
-$progress-transition-speed: 1s;
-.upload-progress {
-  height: $progress-size;
-  position: relative;
-  vertical-align: center;
-  width: $progress-size;
-  &__icon,
-  &__done {
-    border-radius: 50%;
-    border-style: solid;
-    border-width: 4px;
-    font-size: 96px;
-    height: $progress-size;
-    padding-top: 16px;
-    position: absolute;
-    text-align: center;
-    transition: opacity $progress-transition-speed linear;
-    width: $progress-size;
-  }
-  &__done {
-    opacity: 0;
-  }
-  &__spinner {
-    height: $progress-size;
-    opacity: 1;
-    position: absolute;
-    transition: opacity $progress-transition-speed linear;
-    width: $progress-size;
-  }
-}
-.upload-progress-done {
-  .upload-progress {
-    &__done {
-      opacity: 1;
-    }
-    &__icon {
-      opacity: 0;
-    }
-    &__spinner {
-      opacity: 0;
-    }
-  }
-}
diff --git a/src/frontend/packages/core/src/shared/components/upload-progress-indicator/upload-progress-indicator.component.ts b/src/frontend/packages/core/src/shared/components/upload-progress-indicator/upload-progress-indicator.component.ts
index a4c99943e9..fa4c85598f 100644
--- a/src/frontend/packages/core/src/shared/components/upload-progress-indicator/upload-progress-indicator.component.ts
+++ b/src/frontend/packages/core/src/shared/components/upload-progress-indicator/upload-progress-indicator.component.ts
@@ -6,7 +6,6 @@ import { CustomIconComponent } from '../../../shared/components/custom-material/
 @Component({
   selector: 'app-upload-progress-indicator',
   templateUrl: './upload-progress-indicator.component.html',
-  styleUrls: ['./upload-progress-indicator.component.scss'],
   standalone: true,
   imports: [
     CommonModule,
diff --git a/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.html b/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.html
index ab5696d6dd..7b854a5463 100644
--- a/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.html
+++ b/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.html
@@ -1,11 +1,11 @@
-<div class="user-avatar" [ngClass]="{'user-avatar__large': size === 'large'}">
+<div class="flex items-center justify-center" [ngClass]="size === 'large' ? 'h-16 w-16' : ''">
   @if (!initials && !gravatar) {
-    <span class="material-icons user-avatar__placeholder">account_circle</span>
+    <span class="material-icons" [ngClass]="size === 'large' ? 'text-[64px] h-16 w-16' : 'text-[36px] h-9 w-9 leading-[initial]'">account_circle</span>
   }
   @if (initials) {
-    <div [ngClass]="{'user-avatar__header': color === 'header'}" class="user-avatar__initials">{{ initials }}</div>
+    <div [ngClass]="size === 'large' ? 'rounded-full text-center text-[26px] h-[60px] w-[60px] leading-[60px]' : 'rounded-full text-center text-sm h-[30px] w-[30px] leading-[30px]'" [class.user-avatar__header]="color === 'header'">{{ initials }}</div>
   }
   @if (gravatar) {
-    <img class="user-avatar__gravatar" [src]="gravatar" alt="">
+    <img class="rounded-full" [ngClass]="size === 'large' ? 'h-16 w-16' : 'h-9 w-9'" [src]="gravatar" alt="">
   }
-</div>
\ No newline at end of file
+</div>
diff --git a/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.scss b/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.scss
deleted file mode 100644
index eae71a5163..0000000000
--- a/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-.user-avatar {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-
-  &__placeholder {
-    font-size: 36px;
-    height: 36px;
-    line-height: initial;
-    width: 36px;
-  }
-  &__initials {
-    border-radius: 50%;
-    font-size: 14px;
-    height: 30px;
-    line-height: 30px;
-    text-align: center;
-    width: 30px;
-  }
-  &__gravatar {
-    border-radius: 50%;
-    height: 36px;
-    width: 36px;
-  }
-  &__large {
-    height: 64px;
-    width: 64px;
-
-    .user-avatar {
-      &__initials {
-        font-size: 26px;
-        height: 60px;
-        line-height: 60px;
-        width: 60px;
-      }
-      &__gravatar {
-        border-radius: 50%;
-        height: 64px;
-        width: 64px;
-      }
-      &__placeholder {
-        font-size: 64px;
-        height: 64px;
-        width: 64px;
-      }
-    }
-  }
-}
diff --git a/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.ts b/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.ts
index b39fe4a565..818047f893 100644
--- a/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.ts
+++ b/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.ts
@@ -7,7 +7,6 @@ import { MD5 } from './md5';
 @Component({
   selector: 'app-user-avatar',
   templateUrl: './user-avatar.component.html',
-  styleUrls: ['./user-avatar.component.scss'],
   standalone: true,
   imports: [
     CommonModule
diff --git a/src/frontend/packages/core/src/shared/components/user-profile-banner/user-profile-banner.component.html b/src/frontend/packages/core/src/shared/components/user-profile-banner/user-profile-banner.component.html
index 42096ea0e7..1bb0d90626 100644
--- a/src/frontend/packages/core/src/shared/components/user-profile-banner/user-profile-banner.component.html
+++ b/src/frontend/packages/core/src/shared/components/user-profile-banner/user-profile-banner.component.html
@@ -1,14 +1,14 @@
-<div class="user-profile-banner">
-  <div class="user-profile-banner__avatar">
+<div class="flex flex-row p-6">
+  <div class="flex-none mr-6">
     <app-user-avatar size="large" [allowGravatar]="canUseGravatar" fallback="initials" [user]="userProfile"></app-user-avatar>
   </div>
   @if ((name || email)) {
-    <div class="user-profile-banner__title">
+    <div class="flex-1 text-[28px]">
       <div>{{ name }}</div>
-      <div class="user-profile-banner__email">{{ email }}</div>
+      <div class="text-base">{{ email }}</div>
     </div>
   } @else {
-    <div class="user-profile-banner__title">
+    <div class="flex-1 text-[28px]">
       <div>{{ username }}</div>
     </div>
   }
diff --git a/src/frontend/packages/core/src/shared/components/user-profile-banner/user-profile-banner.component.scss b/src/frontend/packages/core/src/shared/components/user-profile-banner/user-profile-banner.component.scss
deleted file mode 100644
index 04fa576a04..0000000000
--- a/src/frontend/packages/core/src/shared/components/user-profile-banner/user-profile-banner.component.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-$user-profile-avatar-size: 48px;
-.user-profile-banner {
-  display: flex;
-  flex-direction: row;
-  padding: 24px;
-  &__email {
-    font-size: 16px;
-  }
-  &__avatar {
-    flex: 0;
-    margin-right: 24px;
-    mat-icon {
-      font-size: $user-profile-avatar-size;
-      height: $user-profile-avatar-size;
-      width: $user-profile-avatar-size;
-    }
-  }
-  &__title {
-    flex: 1;
-    font-size: 28px;
-  }
-}
diff --git a/src/frontend/packages/core/src/shared/components/user-profile-banner/user-profile-banner.component.ts b/src/frontend/packages/core/src/shared/components/user-profile-banner/user-profile-banner.component.ts
index e0dd98e7e3..e2f53c5cd3 100644
--- a/src/frontend/packages/core/src/shared/components/user-profile-banner/user-profile-banner.component.ts
+++ b/src/frontend/packages/core/src/shared/components/user-profile-banner/user-profile-banner.component.ts
@@ -6,7 +6,6 @@ import { UserAvatarComponent } from '../user-avatar/user-avatar.component';
 @Component({
   selector: 'app-user-profile-banner',
   templateUrl: './user-profile-banner.component.html',
-  styleUrls: ['./user-profile-banner.component.scss'],
   standalone: true,
   imports: [
     UserAvatarComponent
diff --git a/src/frontend/packages/core/src/styles.scss b/src/frontend/packages/core/src/styles.scss
index 021e126d56..ca6324914e 100644
--- a/src/frontend/packages/core/src/styles.scss
+++ b/src/frontend/packages/core/src/styles.scss
@@ -35,3 +35,12 @@ body {
 .dark-theme-supported {
   @apply hidden;
 }
+
+// Host-element layout utilities. Applied via `host: { class: '...' }` in
+// component decorators to eliminate single-rule :host stylesheets.
+.app-host-fill {
+  @apply block h-full min-h-0;
+}
+.app-host-flex-1 {
+  @apply flex-1;
+}
diff --git a/src/frontend/packages/example-extensions/src/acme-support-info/acme-support-info.component.scss b/src/frontend/packages/example-extensions/src/acme-support-info/acme-support-info.component.scss
deleted file mode 100644
index 1464b0ddfe..0000000000
--- a/src/frontend/packages/example-extensions/src/acme-support-info/acme-support-info.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-mat-card {
-  margin-bottom: 24px;
-}
diff --git a/src/frontend/packages/example-extensions/src/acme-support-info/acme-support-info.component.ts b/src/frontend/packages/example-extensions/src/acme-support-info/acme-support-info.component.ts
index f5811dfd93..34daedb95d 100644
--- a/src/frontend/packages/example-extensions/src/acme-support-info/acme-support-info.component.ts
+++ b/src/frontend/packages/example-extensions/src/acme-support-info/acme-support-info.component.ts
@@ -3,7 +3,6 @@ import { Component } from '@angular/core';
 @Component({
 selector: 'app-acme-support-info',
   templateUrl: './acme-support-info.component.html',
-  styleUrls: ['./acme-support-info.component.scss'],
   standalone: false
 })
 export class AcmeSupportInfoComponent {
diff --git a/src/frontend/packages/git/src/shared/components/git-endpoint-details/git-endpoint-details.component.scss b/src/frontend/packages/git/src/shared/components/git-endpoint-details/git-endpoint-details.component.scss
deleted file mode 100644
index e435ea343b..0000000000
--- a/src/frontend/packages/git/src/shared/components/git-endpoint-details/git-endpoint-details.component.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.git-details {
-  display: flex;
-  flex-direction: column;
-
-  &__line {
-    align-items: center;
-    display: flex;
-  }
-
-  &__icon {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-    margin-right: 8px;
-
-    img {
-      border-radius: 50%;
-      height: 20px;
-      width: 20px;
-    }
-  }
-}
diff --git a/src/frontend/packages/git/src/shared/components/git-endpoint-details/git-endpoint-details.component.ts b/src/frontend/packages/git/src/shared/components/git-endpoint-details/git-endpoint-details.component.ts
index 690a1c090b..6990739b95 100644
--- a/src/frontend/packages/git/src/shared/components/git-endpoint-details/git-endpoint-details.component.ts
+++ b/src/frontend/packages/git/src/shared/components/git-endpoint-details/git-endpoint-details.component.ts
@@ -11,7 +11,6 @@ import { GIT_ENDPOINT_SUB_TYPES } from '../../../store/git-entity-factory';
 @Component({
   selector: 'lib-git-endpoint-details',
   templateUrl: './git-endpoint-details.component.html',
-  styleUrls: ['./git-endpoint-details.component.scss'],
   standalone: true,
   imports: [],
   changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/src/frontend/packages/git/src/shared/components/github-commit-author/github-commit-author.component.scss b/src/frontend/packages/git/src/shared/components/github-commit-author/github-commit-author.component.scss
deleted file mode 100644
index cac91f778c..0000000000
--- a/src/frontend/packages/git/src/shared/components/github-commit-author/github-commit-author.component.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.github-commit-author__core-author {
-  align-items: center;
-  display: flex;
-  img {
-    height: 30px;
-    padding-left: 10px;
-  }
-}
diff --git a/src/frontend/packages/git/src/shared/components/github-commit-author/github-commit-author.component.ts b/src/frontend/packages/git/src/shared/components/github-commit-author/github-commit-author.component.ts
index 1d4b8eb219..0e782c3803 100644
--- a/src/frontend/packages/git/src/shared/components/github-commit-author/github-commit-author.component.ts
+++ b/src/frontend/packages/git/src/shared/components/github-commit-author/github-commit-author.component.ts
@@ -5,7 +5,6 @@ import { GitCommit } from '@stratosui/git';
 @Component({
   selector: 'app-github-commit-author',
   templateUrl: './github-commit-author.component.html',
-  styleUrls: ['./github-commit-author.component.scss'],
   standalone: true,
   imports: [],
   changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/src/frontend/packages/kubernetes/src/helm/monocular/panel/panel.component.html b/src/frontend/packages/kubernetes/src/helm/monocular/panel/panel.component.html
index 7834d8d13d..6df50e1330 100644
--- a/src/frontend/packages/kubernetes/src/helm/monocular/panel/panel.component.html
+++ b/src/frontend/packages/kubernetes/src/helm/monocular/panel/panel.component.html
@@ -1,6 +1,6 @@
-<div [ngClass]="{ 'panel': true, 'panel--background': background, 'panel--container': container, 'panel--border': border }">
+<div class="p-8" [ngClass]="{ 'bg-gray-50': background, 'w-4/5 mx-auto': container, 'rounded-lg border border-gray-300': border }">
   @if (title.length > 0) {
-    <h1 class="panel__title">{{ title }}</h1>
+    <h1 class="mt-0">{{ title }}</h1>
   }
   <ng-content></ng-content>
 </div>
diff --git a/src/frontend/packages/kubernetes/src/helm/monocular/panel/panel.component.scss b/src/frontend/packages/kubernetes/src/helm/monocular/panel/panel.component.scss
deleted file mode 100644
index 7dcc36e442..0000000000
--- a/src/frontend/packages/kubernetes/src/helm/monocular/panel/panel.component.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@reference 'tailwindcss';
-
-.panel {
-  @apply p-8;
-}
-
-.panel--container {
-  @apply w-4/5 mx-auto;
-}
-
-.panel--background {
-  @apply bg-gray-50;
-}
-
-.panel--border {
-  @apply rounded-lg border border-gray-300;
-}
-
-.panel__title {
-  @apply mt-0;
-}
diff --git a/src/frontend/packages/kubernetes/src/helm/monocular/panel/panel.component.ts b/src/frontend/packages/kubernetes/src/helm/monocular/panel/panel.component.ts
index d81a7dee13..37727c137f 100644
--- a/src/frontend/packages/kubernetes/src/helm/monocular/panel/panel.component.ts
+++ b/src/frontend/packages/kubernetes/src/helm/monocular/panel/panel.component.ts
@@ -5,7 +5,6 @@ import { CommonModule } from '@angular/common';
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'app-panel',
   templateUrl: './panel.component.html',
-  styleUrls: ['./panel.component.scss'],
   standalone: true,
   imports: [CommonModule]
 })
diff --git a/src/frontend/packages/kubernetes/src/helm/tabs/catalog-tab/catalog-tab.component.html b/src/frontend/packages/kubernetes/src/helm/tabs/catalog-tab/catalog-tab.component.html
index 1c5b2df260..97790a2cc4 100644
--- a/src/frontend/packages/kubernetes/src/helm/tabs/catalog-tab/catalog-tab.component.html
+++ b/src/frontend/packages/kubernetes/src/helm/tabs/catalog-tab/catalog-tab.component.html
@@ -1,7 +1,7 @@
 <div class="flex flex-row max-h-full">
   @if (!hide) {
     <div class="flex flex-col max-h-full overflow-auto"
-      [ngClass]="{'charts__repos--collapse': collapsed, 'charts__repos--expand': !collapsed}">
+      [ngClass]="{'mr-0 min-w-0 w-0': collapsed, 'mr-2.5 min-w-[200px] w-auto': !collapsed}">
       <h3 class="text-base my-1.5">Filter By Repository</h3>
       <app-form-field>
         <input appInput placeholder="Filter by Repository" name="searchReposValue" [(ngModel)]="searchReposValue"
diff --git a/src/frontend/packages/kubernetes/src/helm/tabs/catalog-tab/catalog-tab.component.scss b/src/frontend/packages/kubernetes/src/helm/tabs/catalog-tab/catalog-tab.component.scss
deleted file mode 100644
index fce83190c9..0000000000
--- a/src/frontend/packages/kubernetes/src/helm/tabs/catalog-tab/catalog-tab.component.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@reference 'tailwindcss';
-
-.charts__repos--collapse {
-  @apply mr-0 min-w-0 w-0;
-}
-
-.charts__repos--expand {
-  @apply mr-2.5;
-  min-width: 200px;
-  width: initial;
-}
-
-app-list {
-  flex: 4;
-}
diff --git a/src/frontend/packages/kubernetes/src/helm/tabs/catalog-tab/catalog-tab.component.ts b/src/frontend/packages/kubernetes/src/helm/tabs/catalog-tab/catalog-tab.component.ts
index 2e84b9e2c5..170f33f259 100644
--- a/src/frontend/packages/kubernetes/src/helm/tabs/catalog-tab/catalog-tab.component.ts
+++ b/src/frontend/packages/kubernetes/src/helm/tabs/catalog-tab/catalog-tab.component.ts
@@ -22,7 +22,6 @@ import { ChartItemComponent } from '../../monocular/chart-item/chart-item.compon
 @Component({
   selector: 'app-catalog-tab',
   templateUrl: './catalog-tab.component.html',
-  styleUrls: ['./catalog-tab.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-certs-auth-form/kubernetes-certs-auth-form.component.html b/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-certs-auth-form/kubernetes-certs-auth-form.component.html
index 82045278bc..208fe908ba 100644
--- a/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-certs-auth-form/kubernetes-certs-auth-form.component.html
+++ b/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-certs-auth-form/kubernetes-certs-auth-form.component.html
@@ -14,7 +14,7 @@
         </div>
       </app-tab>
       <app-tab label="Certificate Content">
-        <div class="kube-certs-auth__content flex flex-col gap-3" spellcheck="false">
+        <div class="flex flex-col gap-3 pt-4" spellcheck="false">
           <span class="text-sm">Specify Certificate:</span>
           <textarea rows="8" formControlName="cert"
             class="w-full focus:outline-none min-h-[200px] resize-y font-mono text-sm border border-content-border rounded-md p-3 bg-content-bg focus:border-primary focus:ring-1 focus:ring-primary"></textarea>
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-certs-auth-form/kubernetes-certs-auth-form.component.scss b/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-certs-auth-form/kubernetes-certs-auth-form.component.scss
deleted file mode 100644
index 5dee13973b..0000000000
--- a/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-certs-auth-form/kubernetes-certs-auth-form.component.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@reference 'tailwindcss';
-
-.kube-certs-auth__content {
-  @apply flex flex-col pt-4;
-
-  > * {
-    margin-bottom: 10px;
-  }
-
-  textarea {
-    max-height: 75px;
-    min-height: 60px;
-    font-family: "Source Code Pro";
-    font-size: 14px;
-    line-break: anywhere;
-  }
-}
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-certs-auth-form/kubernetes-certs-auth-form.component.ts b/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-certs-auth-form/kubernetes-certs-auth-form.component.ts
index b64dad9b9e..c17c1bfe03 100644
--- a/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-certs-auth-form/kubernetes-certs-auth-form.component.ts
+++ b/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-certs-auth-form/kubernetes-certs-auth-form.component.ts
@@ -14,7 +14,6 @@ interface CertsAuthForm {
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'app-kubernetes-certs-auth-form',
   templateUrl: './kubernetes-certs-auth-form.component.html',
-  styleUrls: ['./kubernetes-certs-auth-form.component.scss'],
   standalone: true,
   imports: [
     ReactiveFormsModule,
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-serviceaccount-auth-form/kubernetes-serviceaccount-auth-form.component.html b/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-serviceaccount-auth-form/kubernetes-serviceaccount-auth-form.component.html
index 5bc08070a4..f0730149ac 100644
--- a/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-serviceaccount-auth-form/kubernetes-serviceaccount-auth-form.component.html
+++ b/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-serviceaccount-auth-form/kubernetes-serviceaccount-auth-form.component.html
@@ -1,7 +1,7 @@
 <div [formGroup]="formGroup">
-  <div formGroupName="authValues" class="kube-sa-auth__form">
+  <div formGroupName="authValues" class="flex flex-col">
     <div class="text-sm mb-3">Token:</div>
     <textarea rows="10" appInput formControlName="token"
-      class="w-full focus:outline-none min-h-[200px] resize-y text-sm border border-content-border rounded-md p-3 bg-content-bg focus:border-primary focus:ring-1 focus:ring-primary"></textarea>
+      class="w-full focus:outline-none min-h-[200px] resize-y font-mono text-sm [line-break:anywhere] border border-content-border rounded-md p-3 bg-content-bg focus:border-primary focus:ring-1 focus:ring-primary"></textarea>
   </div>
 </div>
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-serviceaccount-auth-form/kubernetes-serviceaccount-auth-form.component.scss b/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-serviceaccount-auth-form/kubernetes-serviceaccount-auth-form.component.scss
deleted file mode 100644
index c2b631009d..0000000000
--- a/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-serviceaccount-auth-form/kubernetes-serviceaccount-auth-form.component.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@reference 'tailwindcss';
-
-.kube-sa-auth__form {
-  @apply flex flex-col;
-
-  textarea {
-    font-family: "Source Code Pro";
-    font-size: 14px;
-    line-break: anywhere;
-  }
-}
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-serviceaccount-auth-form/kubernetes-serviceaccount-auth-form.component.ts b/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-serviceaccount-auth-form/kubernetes-serviceaccount-auth-form.component.ts
index 41bebcde1e..17b0b993b8 100644
--- a/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-serviceaccount-auth-form/kubernetes-serviceaccount-auth-form.component.ts
+++ b/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-serviceaccount-auth-form/kubernetes-serviceaccount-auth-form.component.ts
@@ -11,7 +11,6 @@ interface ServiceAccountAuthForm {
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'app-kubernetes-serviceaccount-auth-form',
   templateUrl: './kubernetes-serviceaccount-auth-form.component.html',
-  styleUrls: ['./kubernetes-serviceaccount-auth-form.component.scss'],
   standalone: true,
   imports: [ReactiveFormsModule]
 })
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/kube-config-registration/kube-config-import/kube-config-import.component.scss b/src/frontend/packages/kubernetes/src/kubernetes/kube-config-registration/kube-config-import/kube-config-import.component.scss
deleted file mode 100644
index f8ee97585c..0000000000
--- a/src/frontend/packages/kubernetes/src/kubernetes/kube-config-registration/kube-config-import/kube-config-import.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@reference 'tailwindcss';
-
-:host {
-  @apply flex flex-1;
-}
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/kube-config-registration/kube-config-import/kube-config-import.component.ts b/src/frontend/packages/kubernetes/src/kubernetes/kube-config-registration/kube-config-import/kube-config-import.component.ts
index d582f7273e..252aba3070 100644
--- a/src/frontend/packages/kubernetes/src/kubernetes/kube-config-registration/kube-config-import/kube-config-import.component.ts
+++ b/src/frontend/packages/kubernetes/src/kubernetes/kube-config-registration/kube-config-import/kube-config-import.component.ts
@@ -66,7 +66,7 @@ function createSignalWrapper<T>(initialValue: T) {
 @Component({
 selector: 'app-kube-config-import',
   templateUrl: './kube-config-import.component.html',
-  styleUrls: ['./kube-config-import.component.scss'],
+  host: { class: 'flex flex-1' },
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/kube-config-registration/kube-config-selection/kube-config-selection.component.scss b/src/frontend/packages/kubernetes/src/kubernetes/kube-config-registration/kube-config-selection/kube-config-selection.component.scss
deleted file mode 100644
index f8ee97585c..0000000000
--- a/src/frontend/packages/kubernetes/src/kubernetes/kube-config-registration/kube-config-selection/kube-config-selection.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@reference 'tailwindcss';
-
-:host {
-  @apply flex flex-1;
-}
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/kube-config-registration/kube-config-selection/kube-config-selection.component.ts b/src/frontend/packages/kubernetes/src/kubernetes/kube-config-registration/kube-config-selection/kube-config-selection.component.ts
index 3dcd375cda..e2b7afe722 100644
--- a/src/frontend/packages/kubernetes/src/kubernetes/kube-config-registration/kube-config-selection/kube-config-selection.component.ts
+++ b/src/frontend/packages/kubernetes/src/kubernetes/kube-config-registration/kube-config-selection/kube-config-selection.component.ts
@@ -31,7 +31,7 @@ export interface KubeConfigTableListDataSource extends ITableListDataSource<Kube
 @Component({
 selector: 'app-kube-config-selection',
   templateUrl: './kube-config-selection.component.html',
-  styleUrls: ['./kube-config-selection.component.scss'],
+  host: { class: 'flex flex-1' },
   providers: [
     KubeConfigHelper
   ],
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource-viewer/kubernetes-resource-viewer.component.html b/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource-viewer/kubernetes-resource-viewer.component.html
index 0110a0bad4..f887e6cdfd 100644
--- a/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource-viewer/kubernetes-resource-viewer.component.html
+++ b/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource-viewer/kubernetes-resource-viewer.component.html
@@ -2,7 +2,7 @@
 
   @if (resource$ | async; as resource) {
     <div>
-      <div class="resource-preview__side-by-side">
+      <div class="flex space-x-10">
         <app-metadata-item label="API Version">{{ resource.apiVersion }}</app-metadata-item>
         <app-metadata-item label="Kind">{{ resource.kind | titlecase }}</app-metadata-item>
         <div class="flex items-center">
@@ -11,7 +11,7 @@
           }
         </div>
       </div>
-      <div class="resource-preview__side-by-side">
+      <div class="flex space-x-10">
         <app-metadata-item label="Created">{{ resource.creationTimestamp | date:'medium' }}</app-metadata-item>
         <app-metadata-item label="Age">{{ resource.age }}</app-metadata-item>
       </div>
@@ -48,7 +48,7 @@
 </app-sidepanel-preview>
 
 <ng-template #header>
-  <div class="resource-preview__header">
+  <div class="flex justify-end">
     <button class="btn-icon" name="delete" (click)="deleteWarn()" title="Delete">
       <span class="material-icons">delete</span>
     </button>
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource-viewer/kubernetes-resource-viewer.component.scss b/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource-viewer/kubernetes-resource-viewer.component.scss
deleted file mode 100644
index b3b3dfd79b..0000000000
--- a/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource-viewer/kubernetes-resource-viewer.component.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@reference 'tailwindcss';
-
-.resource-preview__side-by-side {
-  @apply flex;
-
-  app-metadata-item {
-    margin-right: 40px;
-  }
-}
-
-.resource-preview__header {
-  @apply flex justify-end;
-
-  mat-icon {
-    font-size: 20px;
-    height: 20px;
-    line-height: 20px;
-    opacity: 0.7;
-    width: 20px;
-  }
-}
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource-viewer/kubernetes-resource-viewer.component.ts b/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource-viewer/kubernetes-resource-viewer.component.ts
index 64b771b4c0..014e97a2aa 100644
--- a/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource-viewer/kubernetes-resource-viewer.component.ts
+++ b/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource-viewer/kubernetes-resource-viewer.component.ts
@@ -63,7 +63,6 @@ interface KubernetesResourceViewerResource {
 @Component({
 selector: 'app-kubernetes-resource-viewer',
   templateUrl: './kubernetes-resource-viewer.component.html',
-  styleUrls: ['./kubernetes-resource-viewer.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource/kubernetes-resource-list/kubernetes-resource-list.component.html b/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource/kubernetes-resource-list/kubernetes-resource-list.component.html
index 86e0cde658..c8766a4289 100644
--- a/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource/kubernetes-resource-list/kubernetes-resource-list.component.html
+++ b/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource/kubernetes-resource-list/kubernetes-resource-list.component.html
@@ -1,12 +1,12 @@
 <app-page-sub-nav>
   @if (namespaces$) {
-    <div class="sub-nav-menu-button">
+    <div class="rounded ml-5 w-[200px]">
       <div class="relative inline-block">
-        <button class="btn btn-ghost sub-nav-menu-button__btn"
+        <button class="btn btn-ghost w-full leading-7 py-0 pr-2 pl-3"
           [class.opacity-50]="!isNamespacedView"
           (click)="menuOpen = !menuOpen">
           @if (selectedNamespace) {
-            <span class="stratos-icons sub-nav-menu-button__icon">namespace</span>
+            <span class="stratos-icons">namespace</span>
           }
           <span class="flex-1 overflow-hidden text-left truncate whitespace-nowrap">{{ selectedNamespace || 'All namespaces'}}</span>
           <span class="material-symbols-outlined m-0 ml-2.5">arrow_drop_down</span>
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource/kubernetes-resource-list/kubernetes-resource-list.component.scss b/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource/kubernetes-resource-list/kubernetes-resource-list.component.scss
deleted file mode 100644
index 4cec86cec3..0000000000
--- a/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource/kubernetes-resource-list/kubernetes-resource-list.component.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@reference 'tailwindcss';
-
-.sub-nav-menu-button {
-  @apply rounded ml-5 w-[200px];
-
-  &__btn {
-    @apply w-full;
-    line-height: 28px;
-    padding: 0 8px 0 12px;
-
-    // Converted from Material button wrapper
-    .btn-wrapper {
-      @apply flex justify-start;
-    }
-  }
-}
-
-.menu {
-  @apply max-h-[400px] w-[180px];
-}
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource/kubernetes-resource-list/kubernetes-resource-list.component.ts b/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource/kubernetes-resource-list/kubernetes-resource-list.component.ts
index 85cb92e012..0924ee7e38 100644
--- a/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource/kubernetes-resource-list/kubernetes-resource-list.component.ts
+++ b/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource/kubernetes-resource-list/kubernetes-resource-list.component.ts
@@ -77,7 +77,6 @@ const namespaceColumnId = 'namespace';
 @Component({
   selector: 'app-kubernetes-resource-list',
   templateUrl: './kubernetes-resource-list.component.html',
-  styleUrls: ['./kubernetes-resource-list.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-ips/kubernetes-node-ips.component.scss b/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-ips/kubernetes-node-ips.component.scss
deleted file mode 100644
index d1116fe371..0000000000
--- a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-ips/kubernetes-node-ips.component.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@reference 'tailwindcss';
-
-mat-icon {
-  font-size: 20px;
-  @apply w-5 h-5;
-}
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-ips/kubernetes-node-ips.component.ts b/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-ips/kubernetes-node-ips.component.ts
index 931a9ccad2..7cdc1b2e0a 100644
--- a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-ips/kubernetes-node-ips.component.ts
+++ b/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-ips/kubernetes-node-ips.component.ts
@@ -8,7 +8,6 @@ import { KubernetesAddressExternal, KubernetesAddressInternal, KubernetesNode }
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'app-kubernetes-node-ips',
   templateUrl: './kubernetes-node-ips.component.html',
-  styleUrls: ['./kubernetes-node-ips.component.scss'],
   standalone: true,
   imports: [
     CustomTooltipDirective,
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-labels/kubernetes-node-labels.component.scss b/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-labels/kubernetes-node-labels.component.scss
deleted file mode 100644
index d1116fe371..0000000000
--- a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-labels/kubernetes-node-labels.component.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@reference 'tailwindcss';
-
-mat-icon {
-  font-size: 20px;
-  @apply w-5 h-5;
-}
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-labels/kubernetes-node-labels.component.ts b/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-labels/kubernetes-node-labels.component.ts
index 72ed9dfc36..b34f847ae3 100644
--- a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-labels/kubernetes-node-labels.component.ts
+++ b/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-labels/kubernetes-node-labels.component.ts
@@ -8,7 +8,6 @@ import { KubernetesNode } from '../../../store/kube.types';
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'app-kubernetes-node-labels',
   templateUrl: './kubernetes-node-labels.component.html',
-  styleUrls: ['./kubernetes-node-labels.component.scss'],
   standalone: true,
   imports: [
     CustomTooltipDirective,
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-link/kubernetes-node-link.component.scss b/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-link/kubernetes-node-link.component.scss
deleted file mode 100644
index 93270d36e7..0000000000
--- a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-link/kubernetes-node-link.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@reference 'tailwindcss';
-
-mat-icon {
-  @apply pl-2.5;
-}
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-link/kubernetes-node-link.component.ts b/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-link/kubernetes-node-link.component.ts
index 1af75924f8..daef70e001 100644
--- a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-link/kubernetes-node-link.component.ts
+++ b/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-link/kubernetes-node-link.component.ts
@@ -9,7 +9,6 @@ import { KubernetesNode } from '../../../store/kube.types';
 @Component({
   selector: 'app-kubernetes-node-link',
   templateUrl: './kubernetes-node-link.component.html',
-  styleUrls: ['./kubernetes-node-link.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [RouterLink, CustomTooltipDirective]
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-summary/kubernetes-node-info-card/kubernetes-node-info-card.component.scss b/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-summary/kubernetes-node-info-card/kubernetes-node-info-card.component.scss
deleted file mode 100644
index 683ae23fae..0000000000
--- a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-summary/kubernetes-node-info-card/kubernetes-node-info-card.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-:host {
-  height: 100%;
-}
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-summary/kubernetes-node-info-card/kubernetes-node-info-card.component.ts b/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-summary/kubernetes-node-info-card/kubernetes-node-info-card.component.ts
index f7cde03002..5f14007547 100644
--- a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-summary/kubernetes-node-info-card/kubernetes-node-info-card.component.ts
+++ b/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-summary/kubernetes-node-info-card/kubernetes-node-info-card.component.ts
@@ -7,7 +7,7 @@ import { KubernetesNodeService } from '../../../../services/kubernetes-node.serv
 @Component({
   selector: 'app-kubernetes-node-info-card',
   templateUrl: './kubernetes-node-info-card.component.html',
-  styleUrls: ['./kubernetes-node-info-card.component.scss'],
+  host: { class: 'h-full' },
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-pods/kubernetes-pod-containers/kubernetes-pod-containers.component.html b/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-pods/kubernetes-pod-containers/kubernetes-pod-containers.component.html
index 094d073adb..8ce95bf927 100644
--- a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-pods/kubernetes-pod-containers/kubernetes-pod-containers.component.html
+++ b/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-pods/kubernetes-pod-containers/kubernetes-pod-containers.component.html
@@ -2,7 +2,7 @@
   <div class="flex flex-col pl-[54px]">
     @for (container of containers; track container; let last = $last) {
       <div class="flex flex-row h-[100px]">
-        <div class="pod-container-icon">
+        <div class="flex items-center h-15 w-[50px]">
           @if (icon[container.isInit]; as iconDetail) {
             <span [class]="iconDetail.font"
               [ngClass]="{'pl-1': iconDetail.icon === 'container'}" [matTooltip]="iconDetail.tooltip">
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-pods/kubernetes-pod-containers/kubernetes-pod-containers.component.scss b/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-pods/kubernetes-pod-containers/kubernetes-pod-containers.component.scss
deleted file mode 100644
index daa5daa966..0000000000
--- a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-pods/kubernetes-pod-containers/kubernetes-pod-containers.component.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@reference 'tailwindcss';
-
-/* Container icon — mat-icon sizing not expressible in Tailwind */
-.pod-container-icon {
-  @apply flex items-center;
-  height: 60px;
-  width: 50px;
-
-  mat-icon {
-    font-size: 35px;
-    height: 35px;
-    width: 35px;
-  }
-}
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-pods/kubernetes-pod-containers/kubernetes-pod-containers.component.ts b/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-pods/kubernetes-pod-containers/kubernetes-pod-containers.component.ts
index 1e08bdcac4..8077af03ed 100644
--- a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-pods/kubernetes-pod-containers/kubernetes-pod-containers.component.ts
+++ b/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-pods/kubernetes-pod-containers/kubernetes-pod-containers.component.ts
@@ -19,7 +19,6 @@ export interface ContainerForTable {
 @Component({
   selector: 'app-kubernetes-pod-containers',
   templateUrl: './kubernetes-pod-containers.component.html',
-  styleUrls: ['./kubernetes-pod-containers.component.scss'],
   providers: [
     TitleCasePipe
   ],