From e13be780fb0c38ebe1ed188460e9dfdd02bb9500 Mon Sep 17 00:00:00 2001
From: Michal Kinas <113341662+MichalKinas@users.noreply.github.com>
Date: Tue, 27 Jan 2026 11:17:27 +0100
Subject: [PATCH] [ACS-7768] Form fields cleanup (#4956)

* [ACS-7768] Form fields cleanup

* [ACS-7768] Move hint styling from ADF

* [ACS-7768] CR fixes

* [ACS-7768] Use latest ADF version

* [ACS-7768] E2E locator fix

* [ACS-7768] CR fix

* [ACS-7768] E2E locator fix
---
 app/src/app/app.config.ts                     |   5 +
 package-lock.json                             |  60 +--
 package.json                                  |  12 +-
 projects/aca-content/assets/i18n/en.json      |  10 +-
 .../rule-action-list.ui-component.html        |   2 +-
 .../rule-action-list.ui-component.scss        |  10 +-
 .../actions/rule-action.ui-component.html     |   4 +-
 .../actions/rule-action.ui-component.scss     |   7 -
 ...rule-composite-condition.ui-component.html |   4 +-
 ...rule-composite-condition.ui-component.scss |   6 -
 .../rule-simple-condition.ui-component.html   |   6 +-
 .../options/rule-options.ui-component.html    |   2 -
 .../options/rule-options.ui-component.scss    |  14 +-
 .../options/rule-options.ui-component.spec.ts |   1 -
 .../rule-details.ui-component.html            |  11 +-
 .../rule-details.ui-component.scss            |  46 +--
 .../bulk-actions-dropdown.component.html      |   2 -
 .../bulk-actions-dropdown.component.scss      |   7 -
 .../library-metadata-form.component.html      |  16 +-
 .../library-metadata-form.component.scss      |  48 +--
 .../search-input-control.component.html       |   2 +-
 .../search-input/search-input.component.html  |   2 +-
 .../saved-search-edit-dialog.component.scss   |   1 +
 .../dialog/save-search-dialog.component.scss  |   1 +
 .../view-profile/view-profile.component.html  | 349 +++++++-----------
 .../view-profile/view-profile.component.scss  |  85 +----
 .../view-profile.component.spec.ts            |  94 ++---
 .../view-profile/view-profile.component.ts    | 111 +++---
 .../create-from-template.dialog.scss          |  32 +-
 .../aca-content/src/lib/ui/mat-selectors.scss |   1 +
 .../src/lib/ui/overrides/adf-variables.scss   |   2 -
 projects/aca-content/src/lib/ui/theme.scss    |  63 +++-
 .../src/lib/ui/variables/variables.scss       |   2 -
 .../components/actions-dropdown.component.ts  |   2 +-
 .../manageRules/manage-rules.component.ts     |   2 +-
 .../info-drawer/info-drawer.component.scss    |  28 --
 .../info-drawer/info-drawer.component.ts      |  10 +-
 37 files changed, 386 insertions(+), 674 deletions(-)
 delete mode 100644 projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.scss

diff --git a/app/src/app/app.config.ts b/app/src/app/app.config.ts
index 809ac03a8..d54870d1c 100644
--- a/app/src/app/app.config.ts
+++ b/app/src/app/app.config.ts
@@ -50,6 +50,7 @@ import { CONTENT_LAYOUT_ROUTES, ContentServiceExtensionModule } from '@alfresco/
 import { SHELL_APP_SERVICE, SHELL_AUTH_TOKEN, provideShellRoutes } from '@alfresco/adf-core/shell';
 import { APP_ROUTES } from './app.routes';
 import { MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/snack-bar';
+import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 
 registerLocaleData(localeFr);
 registerLocaleData(localeDe);
@@ -95,6 +96,10 @@ export const AppConfig: ApplicationConfig = {
         duration: 10000,
         politeness: 'polite'
       }
+    },
+    {
+      provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
+      useValue: { appearance: 'outline', floatLabel: 'always', subscriptSizing: 'dynamic' }
     }
   ]
 };
diff --git a/package-lock.json b/package-lock.json
index f20a1a2c2..a6920fc78 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,11 +9,11 @@
       "version": "7.3.0",
       "license": "LGPL-3.0",
       "dependencies": {
-        "@alfresco/adf-content-services": "8.4.0-21353303004",
-        "@alfresco/adf-core": "8.4.0-21353303004",
-        "@alfresco/adf-extensions": "8.4.0-21353303004",
-        "@alfresco/eslint-plugin-eslint-angular": "8.4.0-21353303004",
-        "@alfresco/js-api": "9.4.0-21353303004",
+        "@alfresco/adf-content-services": "8.4.0-21387976035",
+        "@alfresco/adf-core": "8.4.0-21387976035",
+        "@alfresco/adf-extensions": "8.4.0-21387976035",
+        "@alfresco/eslint-plugin-eslint-angular": "8.4.0-21387976035",
+        "@alfresco/js-api": "9.4.0-21387976035",
         "@angular/animations": "19.2.18",
         "@angular/cdk": "19.2.18",
         "@angular/common": "19.2.18",
@@ -46,7 +46,7 @@
         "zone.js": "0.15.0"
       },
       "devDependencies": {
-        "@alfresco/adf-cli": "8.4.0-21353303004",
+        "@alfresco/adf-cli": "8.4.0-21387976035",
         "@angular-devkit/build-angular": "19.2.19",
         "@angular-devkit/core": "19.2.18",
         "@angular-devkit/schematics": "19.2.18",
@@ -103,13 +103,13 @@
       }
     },
     "node_modules/@alfresco/adf-cli": {
-      "version": "8.4.0-21353303004",
-      "resolved": "https://registry.npmjs.org/@alfresco/adf-cli/-/adf-cli-8.4.0-21353303004.tgz",
-      "integrity": "sha512-MYFQOjFo509kgM07H3nskyvkBVeEpVpGEdeyHZyODvG4/lIQrKTIb3P32cw6dfY7JR4nud/8ntLE5qPB3sdUDw==",
+      "version": "8.4.0-21387976035",
+      "resolved": "https://registry.npmjs.org/@alfresco/adf-cli/-/adf-cli-8.4.0-21387976035.tgz",
+      "integrity": "sha512-sqnEZwBQ+3IVg+UISIO48JbpmGbciDc04hNfj27q1WAQojH+j3LBrUr0KejFcRR6HvM8JiJZeLL/fhHVsMj7zg==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "@alfresco/js-api": ">=9.4.0-21353303004",
+        "@alfresco/js-api": ">=9.4.0-21387976035",
         "ejs": "^3.1.10",
         "license-checker": "^25.0.1",
         "node-fetch": "^2.7.0",
@@ -121,16 +121,16 @@
       }
     },
     "node_modules/@alfresco/adf-content-services": {
-      "version": "8.4.0-21353303004",
-      "resolved": "https://registry.npmjs.org/@alfresco/adf-content-services/-/adf-content-services-8.4.0-21353303004.tgz",
-      "integrity": "sha512-TYYcuxeI5/z1BTyXp8sispik6lCY9tj3jYiAG6MTH0gn+lleRe0Tj36WUtq/ELbvAcsnGKKsQsQ+S7dB5VHmjQ==",
+      "version": "8.4.0-21387976035",
+      "resolved": "https://registry.npmjs.org/@alfresco/adf-content-services/-/adf-content-services-8.4.0-21387976035.tgz",
+      "integrity": "sha512-PkmB4a6LZgukqg4oEoiTyKCR+i36E4rxVxEiQrX3k5DA31k1ql1AIwybOEQNkopX9+WZor8SlkAQwO5pRQQ8eA==",
       "license": "Apache-2.0",
       "dependencies": {
         "tslib": "^2.3.0"
       },
       "peerDependencies": {
-        "@alfresco/adf-core": ">=8.4.0-21353303004",
-        "@alfresco/js-api": ">=9.4.0-21353303004",
+        "@alfresco/adf-core": ">=8.4.0-21387976035",
+        "@alfresco/js-api": ">=9.4.0-21387976035",
         "@angular/animations": ">=14.1.3",
         "@angular/cdk": ">=14.1.2",
         "@angular/common": ">=14.1.3",
@@ -145,9 +145,9 @@
       }
     },
     "node_modules/@alfresco/adf-core": {
-      "version": "8.4.0-21353303004",
-      "resolved": "https://registry.npmjs.org/@alfresco/adf-core/-/adf-core-8.4.0-21353303004.tgz",
-      "integrity": "sha512-ggpioX5W70ytFsDWBoRqblEglO916FY5bi7NMryI8u5TYw6/WuDoVCNh3Mm5gAe+OccZokRTfpp5K6Z2ErtqIw==",
+      "version": "8.4.0-21387976035",
+      "resolved": "https://registry.npmjs.org/@alfresco/adf-core/-/adf-core-8.4.0-21387976035.tgz",
+      "integrity": "sha512-vPGeuYRJpqfXDTPBuEtv/dwKg85r5onOW8AR+PxcepcUhbiIbCMcZ2vMBrZ9vorJG51CUtc1rXgpMG1sATfWLg==",
       "license": "Apache-2.0",
       "peer": true,
       "dependencies": {
@@ -159,8 +159,8 @@
         "tslib": "^2.3.0"
       },
       "peerDependencies": {
-        "@alfresco/adf-extensions": ">=8.4.0-21353303004",
-        "@alfresco/js-api": ">=9.4.0-21353303004",
+        "@alfresco/adf-extensions": ">=8.4.0-21387976035",
+        "@alfresco/js-api": ">=9.4.0-21387976035",
         "@angular/animations": ">=16.0.0",
         "@angular/cdk": ">=16.0.0",
         "@angular/common": ">=16.0.0",
@@ -193,30 +193,30 @@
       }
     },
     "node_modules/@alfresco/adf-extensions": {
-      "version": "8.4.0-21353303004",
-      "resolved": "https://registry.npmjs.org/@alfresco/adf-extensions/-/adf-extensions-8.4.0-21353303004.tgz",
-      "integrity": "sha512-ncrYLaX/ZIsrsmXIL+g6PmjP2iU22bE+0735RbmVeiQEr/9nVH+DO2JvHwnaGyb6bp9FIPkj+N8iO52MjXdzvQ==",
+      "version": "8.4.0-21387976035",
+      "resolved": "https://registry.npmjs.org/@alfresco/adf-extensions/-/adf-extensions-8.4.0-21387976035.tgz",
+      "integrity": "sha512-QoPANGBMjItW5vp8xl/LKWoTDNlyHtyaYYExVMPY8A6DZADNQgzop2MMiC8fN38tLOPlG/is8keqR0lqvgfJiA==",
       "license": "Apache-2.0",
       "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
       "peerDependencies": {
-        "@alfresco/js-api": ">=9.4.0-21353303004",
+        "@alfresco/js-api": ">=9.4.0-21387976035",
         "@angular/common": ">=14.1.3",
         "@angular/core": ">=14.1.3"
       }
     },
     "node_modules/@alfresco/eslint-plugin-eslint-angular": {
-      "version": "8.4.0-21353303004",
-      "resolved": "https://registry.npmjs.org/@alfresco/eslint-plugin-eslint-angular/-/eslint-plugin-eslint-angular-8.4.0-21353303004.tgz",
-      "integrity": "sha512-yTwIHidZ5uEFOJ4CLc0rojVgwEB431Lq4eXTwi8TYvcgFXX1FYuD34DV89/8JTYDH+2mw5aocVTgrTp1oGVvcQ==",
+      "version": "8.4.0-21387976035",
+      "resolved": "https://registry.npmjs.org/@alfresco/eslint-plugin-eslint-angular/-/eslint-plugin-eslint-angular-8.4.0-21387976035.tgz",
+      "integrity": "sha512-WB3rzF5NzZzDhwKKxk41Aya9gWM1CeQ280FQikCcQGmIeMK2ORgRsczpGl7/mUDGWjT0wmK1Y9N57F9tR+TdLQ==",
       "license": "Apache-2.0"
     },
     "node_modules/@alfresco/js-api": {
-      "version": "9.4.0-21353303004",
-      "resolved": "https://registry.npmjs.org/@alfresco/js-api/-/js-api-9.4.0-21353303004.tgz",
-      "integrity": "sha512-fZicgF65bFYx2sylPZofCsNdLfM+P328K5fi51JW+lNezSoPX6GeQ6Vpvdap4gumDZvN+glJ9QoyLGOapkwlGA==",
+      "version": "9.4.0-21387976035",
+      "resolved": "https://registry.npmjs.org/@alfresco/js-api/-/js-api-9.4.0-21387976035.tgz",
+      "integrity": "sha512-6+vC5mFJIVt34YIPp1PPy/ezqpYy08/+FAFj3HNAtHtiri95UkpP2d/ARDEZdi83QZkSDwEPtTWyyEfKTQE5ag==",
       "license": "Apache-2.0",
       "peer": true,
       "dependencies": {
diff --git a/package.json b/package.json
index 5365a02ad..5c83faf95 100644
--- a/package.json
+++ b/package.json
@@ -41,11 +41,11 @@
   },
   "private": true,
   "dependencies": {
-    "@alfresco/adf-content-services": "8.4.0-21353303004",
-    "@alfresco/adf-core": "8.4.0-21353303004",
-    "@alfresco/adf-extensions": "8.4.0-21353303004",
-    "@alfresco/eslint-plugin-eslint-angular": "8.4.0-21353303004",
-    "@alfresco/js-api": "9.4.0-21353303004",
+    "@alfresco/adf-content-services": "8.4.0-21387976035",
+    "@alfresco/adf-core": "8.4.0-21387976035",
+    "@alfresco/adf-extensions": "8.4.0-21387976035",
+    "@alfresco/eslint-plugin-eslint-angular": "8.4.0-21387976035",
+    "@alfresco/js-api": "9.4.0-21387976035",
     "@angular/animations": "19.2.18",
     "@angular/cdk": "19.2.18",
     "@angular/common": "19.2.18",
@@ -78,7 +78,7 @@
     "zone.js": "0.15.0"
   },
   "devDependencies": {
-    "@alfresco/adf-cli": "8.4.0-21353303004",
+    "@alfresco/adf-cli": "8.4.0-21387976035",
     "@angular-devkit/build-angular": "19.2.19",
     "@angular-devkit/core": "19.2.18",
     "@angular-devkit/schematics": "19.2.18",
diff --git a/projects/aca-content/assets/i18n/en.json b/projects/aca-content/assets/i18n/en.json
index 97832b374..84fdf7827 100644
--- a/projects/aca-content/assets/i18n/en.json
+++ b/projects/aca-content/assets/i18n/en.json
@@ -52,19 +52,13 @@
             "LOCATION": "Location",
             "TELEPHONE": "Telephone",
             "MOBILE": "Mobile",
-            "LOGIN": "Login",
-            "USERNAME": "Username",
             "EMAIL": "Email",
-            "PASSWORD": "Password",
-            "OLD_PASSWORD": "Old Password",
-            "FORGOT_PASSWORD": "Forgot Password",
-            "NEW_PASSWORD": "New Password",
-            "VERIFY_PASSWORD": "Verify Password",
             "COMPANY_DETAILS": "Company details",
             "NAME": "Name",
             "ADDRESS": "Address",
             "POSTCODE": "Postcode",
-            "INVALID_INPUT": "Invalid Input",
+            "INVALID_PHONE_FORMAT": "Please enter a valid phone number",
+            "INVALID_EMAIL_FORMAT": "Please enter a valid email address",
             "GO_TO_PERSONAL_FILES_BUTTON_LABEL": "Go to Personal Files"
         },
         "LOCKED_BY": "Locked by: ",
diff --git a/projects/aca-content/folder-rules/src/rule-details/actions/rule-action-list.ui-component.html b/projects/aca-content/folder-rules/src/rule-details/actions/rule-action-list.ui-component.html
index 4092bccd8..1e7f7db11 100644
--- a/projects/aca-content/folder-rules/src/rule-details/actions/rule-action-list.ui-component.html
+++ b/projects/aca-content/folder-rules/src/rule-details/actions/rule-action-list.ui-component.html
@@ -1,4 +1,4 @@
-<div class="aca-rule-action-list__item  " [attr.aria-labelledby]="'rule-actions-label'" *ngFor="let control of formControls">
+<div class="aca-rule-action-list__item" [attr.aria-labelledby]="'rule-actions-label'" *ngFor="let control of formControls">
   <aca-rule-action
     [actionDefinitions]="actionDefinitions"
     [parameterConstraints]="parameterConstraints"
diff --git a/projects/aca-content/folder-rules/src/rule-details/actions/rule-action-list.ui-component.scss b/projects/aca-content/folder-rules/src/rule-details/actions/rule-action-list.ui-component.scss
index 0412e91f6..0eef36b97 100644
--- a/projects/aca-content/folder-rules/src/rule-details/actions/rule-action-list.ui-component.scss
+++ b/projects/aca-content/folder-rules/src/rule-details/actions/rule-action-list.ui-component.scss
@@ -4,10 +4,6 @@
 .aca-rule-action-list {
   min-width: 0;
 
-  .aca-rule-action-list__item .aca-rule-action .mat-mdc-form-field-flex .mat-mdc-form-field-infix {
-    padding-top: 24px;
-  }
-
   .aca-rule-action-list-add-action-button {
     margin: 4px 0 20px;
 
@@ -24,16 +20,12 @@
     border-radius: 8px;
     display: flex;
     margin: 10px;
-    padding: 10px 10px 0;
+    padding: 10px;
 
     & > .aca-rule-action {
       flex: 1;
     }
 
-    #{ms.$mat-text-field-disabled}#{ms.$mat-text-field-filled} {
-      background: transparent;
-    }
-
     &:nth-child(2n) {
       background-color: hsl(0deg, 0%, 95%);
 
diff --git a/projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.html b/projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.html
index 59a20ac07..651fa6070 100644
--- a/projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.html
+++ b/projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.html
@@ -1,6 +1,6 @@
 <form class="aca-rule-action__form" [formGroup]="form">
 
-  <mat-form-field class="aca-rule-action-full-width aca-rule-action-form-field" appearance="fill" subscriptSizing="dynamic">
+  <mat-form-field class="aca-rule-action-full-width aca-rule-action-form-field">
     <mat-select
       formControlName="actionDefinitionId"
       data-automation-id="rule-action-select"
@@ -18,7 +18,7 @@
     *ngIf="cardViewItems?.length > 0"
     data-automation-id="rule-action-card-view"
     [properties]="cardViewItems"
-    class="aca-rule-action-full-width aca-rule-action-card-view"
+    class="aca-rule-action-full-width"
     [editable]="!readOnly" />
 
 </form>
diff --git a/projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.scss b/projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.scss
index ac6eb8093..ab9cad2f3 100644
--- a/projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.scss
+++ b/projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.scss
@@ -9,8 +9,6 @@
     gap: 20px;
 
     adf-card-view {
-      margin-top: -15px;
-
       .adf-property-list .adf-property adf-card-view-item-dispatcher adf-card-view-textitem {
         display: inline-block;
         width: 100%;
@@ -44,10 +42,5 @@
         min-height: 22.5px;
       }
     }
-
-    &.aca-rule-action-card-view {
-      overflow: hidden;
-      margin-top: 11px;
-    }
   }
 }
diff --git a/projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.html b/projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.html
index 1e4ab6d48..72859e528 100644
--- a/projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.html
+++ b/projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.html
@@ -12,7 +12,7 @@
     [attr.aria-labelledby]="'conditions-group-label-' + (childCondition ? 'nested' : 'main')"
     class="aca-rule-composite-condition__form__row"
     *ngFor="let control of conditionFormControls; let i = index">
-    <mat-form-field *ngIf="i === 0" subscriptSizing="dynamic">
+    <mat-form-field *ngIf="i === 0">
       <mat-label>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.LOGIC_OPERATOR' | translate }}</mat-label>
       <mat-select
         [formControl]="invertedControl"
@@ -22,7 +22,7 @@
       </mat-select>
     </mat-form-field>
 
-    <mat-form-field *ngIf="i > 0" subscriptSizing="dynamic" class="aca-rule-composite-condition__boolean-mode-control">
+    <mat-form-field *ngIf="i > 0" class="aca-rule-composite-condition__boolean-mode-control">
       <mat-select
         [formControl]="booleanModeControl">
         <mat-option value="and">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LOGIC_OPERATORS.AND' | translate }}</mat-option>
diff --git a/projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.scss b/projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.scss
index 1d9bb4d6b..b39c6f0c6 100644
--- a/projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.scss
+++ b/projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.scss
@@ -28,12 +28,6 @@
       display: flex;
       gap: 8px;
 
-      #{ms.$mat-form-field} {
-        #{ms.$mat-form-field-infix} {
-          padding-bottom: 4px;
-        }
-      }
-
       & > :nth-child(1) {
         width: 7em;
         height: fit-content;
diff --git a/projects/aca-content/folder-rules/src/rule-details/conditions/rule-simple-condition.ui-component.html b/projects/aca-content/folder-rules/src/rule-details/conditions/rule-simple-condition.ui-component.html
index 6b554bd48..a4d58b105 100644
--- a/projects/aca-content/folder-rules/src/rule-details/conditions/rule-simple-condition.ui-component.html
+++ b/projects/aca-content/folder-rules/src/rule-details/conditions/rule-simple-condition.ui-component.html
@@ -1,5 +1,5 @@
 <form class="aca-rule-simple-condition__form" [formGroup]="form">
-  <mat-form-field class="aca-rule-simple-condition__form__field-input" subscriptSizing="dynamic">
+  <mat-form-field class="aca-rule-simple-condition__form__field-input">
     <mat-label>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.FIELD' | translate }}</mat-label>
     <mat-select formControlName="field" data-automation-id="field-select"
       (selectionChange)="onChangeField()">
@@ -12,7 +12,7 @@
     </mat-select>
   </mat-form-field>
 
-  <mat-form-field class="aca-rule-simple-condition__form__field-input aca-rule-simple-condition__form__comparator-input" subscriptSizing="dynamic"
+  <mat-form-field class="aca-rule-simple-condition__form__field-input aca-rule-simple-condition__form__comparator-input"
                   [class]="{ 'aca-hidden': isComparatorHidden }" data-automation-id="comparator-form-field">
     <mat-label>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.COMPARATOR' | translate }}</mat-label>
     <mat-select formControlName="comparator" data-automation-id="comparator-select">
@@ -25,7 +25,7 @@
   </mat-form-field>
 
   <mat-form-field class="aca-rule-simple-condition__form__field-input aca-rule-simple-condition__form__parameter-input"
-                  subscriptSizing="dynamic" [ngSwitch]="selectedField.type">
+                  [ngSwitch]="selectedField.type">
     <mat-label>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.VALUE' | translate }}</mat-label>
     <mat-select formControlName="parameter" data-automation-id="simple-condition-value-select" *ngSwitchCase="'mimeType'">
       <mat-option *ngFor="let mimeType of mimeTypes"
diff --git a/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.html b/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.html
index d3089eb25..6895c4548 100644
--- a/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.html
+++ b/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.html
@@ -10,8 +10,6 @@
 
     <mat-form-field
       data-automation-id="rule-option-form-field-errorScript"
-      floatLabel="always"
-      appearance="fill"
       class="aca-rule-options__error-script-dropdown"
       [ngClass]="{ 'aca-hide-error-script-dropdown': hideErrorScriptDropdown }">
       <mat-label>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.ERROR_SCRIPT' | translate }}</mat-label>
diff --git a/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.scss b/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.scss
index ef9278775..44542f974 100644
--- a/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.scss
+++ b/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.scss
@@ -1,3 +1,5 @@
+@use '@angular/material' as mat;
+
 .aca-rule-options {
   fieldset {
     display: flex;
@@ -14,7 +16,17 @@
   }
 
   &__error-script-dropdown {
-    margin-top: 4px;
+    margin-top: 8px;
+
+    @include mat.form-field-overrides(
+      (
+        outlined-label-text-populated-size: 16px
+      )
+    );
+
+    mat-label {
+      line-height: 18px;
+    }
   }
 
   &.aca-read-only &__checkbox > div > div:first-child {
diff --git a/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.spec.ts b/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.spec.ts
index 4dc5f364e..e403e74a4 100644
--- a/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.spec.ts
+++ b/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.spec.ts
@@ -168,7 +168,6 @@ describe('RuleOptionsUiComponent', () => {
     const matFormField = getErrorScriptFormField();
     fixture.detectChanges();
     expect(matFormField).not.toBeNull();
-    expect(matFormField.componentInstance['floatLabel']).toBe('always');
   });
 
   it('should properly update formFields on only isAsynchronous and errorScript changes', () => {
diff --git a/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.html b/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.html
index 85535832d..a3e0e1913 100644
--- a/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.html
+++ b/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.html
@@ -4,11 +4,14 @@
     <div class="aca-rule-details__form__row">
       <label class="aca-rule-details__name__label" for="rule-details-name-input">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.NAME' | translate }}</label>
       <div>
-        <mat-form-field appearance="fill" floatLabel='always' class="aca-rule-details__form__row__field">
-          <mat-label *ngIf="!name.value">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.PLACEHOLDER.NAME' | translate }}</mat-label>
+        <mat-form-field class="aca-rule-details__form__row__field">
           <input
             id="rule-details-name-input"
-            matInput type="text" formControlName="name" data-automation-id="rule-details-name-input">
+            matInput
+            type="text"
+            formControlName="name"
+            [placeholder]="'ACA_FOLDER_RULES.RULE_DETAILS.PLACEHOLDER.NAME' | translate"
+            data-automation-id="rule-details-name-input">
           <mat-error>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.ERROR.REQUIRED' | translate }}</mat-error>
         </mat-form-field>
       </div>
@@ -17,7 +20,7 @@
     <div class="aca-rule-details__form__row aca-rule-details__form__description">
       <label for="rule-details-description-textarea">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.DESCRIPTION' | translate }}</label>
       <div>
-        <mat-form-field floatLabel='auto' appearance="fill" class="aca-rule-details__form__row__field">
+        <mat-form-field class="aca-rule-details__form__row__field">
         <textarea
           class="aca-rule-details__form__row__field__textarea"
           id="rule-details-description-textarea"
diff --git a/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.scss b/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.scss
index a025ef38b..ff349f71f 100644
--- a/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.scss
+++ b/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.scss
@@ -1,14 +1,8 @@
-@use '../styles/mat-selectors' as ms;
-
 .aca-rule-details {
   .aca-rule-details__form__triggers {
     margin-top: 10px;
   }
 
-  .aca-rule-details__name__label {
-    padding-top: 1.5em;
-  }
-
   .aca-rule-details__form__others {
     margin-bottom: 12px;
   }
@@ -51,6 +45,11 @@
         width: 100%;
         max-width: 400px;
         font-size: inherit;
+        margin-bottom: 15px;
+
+        &:first-of-type {
+          margin-top: 10px;
+        }
 
         label[for='rule-details-name-input'] {
           transform: translateY(-20%) scale(1);
@@ -86,40 +85,5 @@
         flex: 1;
       }
     }
-
-    &.aca-read-only,
-    #{ms.$mat-form-field-disabled} {
-      #{ms.$mat-notched-outline-leading},
-      #{ms.$mat-notched-outline-trailing},
-      #{ms.$mat-notched-outline-notch} {
-        border: none;
-      }
-
-      #{ms.$mat-line-ripple} {
-        &::before,
-        &::after {
-          display: none;
-        }
-      }
-
-      *:disabled,
-      #{ms.$mat-select-disabled} #{ms.$mat-select-value} {
-        color: inherit;
-      }
-
-      #{ms.$mat-select-arrow-wrapper} {
-        display: none;
-      }
-    }
-
-    .aca-rule-details__form__row #{ms.$mat-form-field-flex} #{ms.$mat-form-field-infix} {
-      padding-bottom: 0.375em;
-      padding-top: 24px;
-    }
-
-    .aca-rule-details__form__row aca-rule-action #{ms.$mat-form-field-flex} #{ms.$mat-form-field-infix} {
-      padding-top: 0.1em;
-      padding-bottom: 0.1em;
-    }
   }
 }
diff --git a/projects/aca-content/src/lib/components/bulk-actions-dropdown/bulk-actions-dropdown.component.html b/projects/aca-content/src/lib/components/bulk-actions-dropdown/bulk-actions-dropdown.component.html
index 610db0570..c356a5876 100644
--- a/projects/aca-content/src/lib/components/bulk-actions-dropdown/bulk-actions-dropdown.component.html
+++ b/projects/aca-content/src/lib/components/bulk-actions-dropdown/bulk-actions-dropdown.component.html
@@ -1,8 +1,6 @@
 <mat-form-field
   *ngIf="items?.length"
   [title]="tooltip"
-  appearance="outline"
-  subscriptSizing="dynamic"
   class="aca-bulk-actions-form-field"
   data-automation-id="aca-bulk-actions-form-field"
 >
diff --git a/projects/aca-content/src/lib/components/bulk-actions-dropdown/bulk-actions-dropdown.component.scss b/projects/aca-content/src/lib/components/bulk-actions-dropdown/bulk-actions-dropdown.component.scss
index dd9eeb1f2..20e3534c0 100644
--- a/projects/aca-content/src/lib/components/bulk-actions-dropdown/bulk-actions-dropdown.component.scss
+++ b/projects/aca-content/src/lib/components/bulk-actions-dropdown/bulk-actions-dropdown.component.scss
@@ -3,13 +3,6 @@
 .aca-bulk-actions-form-field {
   margin-left: 24px;
   width: 295px;
-
-  #{ms.$mat-form-field-flex},
-  #{ms.$mat-select-value} {
-    height: 48px;
-    display: flex;
-    align-items: center;
-  }
 }
 
 .aca-bulk-actions-option-content {
diff --git a/projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.html b/projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.html
index 9b36a72ff..3d1ec3b5a 100644
--- a/projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.html
+++ b/projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.html
@@ -2,8 +2,8 @@
 <mat-card appearance="raised">
   <mat-card-content>
     <form [formGroup]="form" autocomplete="off">
-      <mat-form-field floatLabel="auto" data-automation-id="library-name-properties-wrapper" class="app-library-metadata-form-field">
-        <mat-label class="app-library-metadata-form-field-label">{{ 'LIBRARY.DIALOG.FORM.NAME' | translate }}</mat-label>
+      <mat-form-field data-automation-id="library-name-properties-wrapper" class="app-library-metadata-form-field">
+        <mat-label>{{ 'LIBRARY.DIALOG.FORM.NAME' | translate }}</mat-label>
         <input
           #libraryNameInput
           data-automation-id="app-library-metadata-form-name-input"
@@ -21,13 +21,13 @@
         </mat-error>
       </mat-form-field>
 
-      <mat-form-field floatLabel="auto" data-automation-id="library-id-properties-wrapper" class="app-library-metadata-form-field">
-        <mat-label class="app-library-metadata-form-field-label">{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}</mat-label>
+      <mat-form-field data-automation-id="library-id-properties-wrapper" class="app-library-metadata-form-field">
+        <mat-label>{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}</mat-label>
         <input matInput placeholder="{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}" formControlName="id" />
       </mat-form-field>
 
-      <mat-form-field floatLabel="auto" data-automation-id="library-visibility-properties-wrapper" class="app-library-metadata-form-field">
-        <mat-label class="app-library-metadata-form-field-label">{{ 'LIBRARY.DIALOG.FORM.VISIBILITY' | translate }}</mat-label>
+      <mat-form-field data-automation-id="library-visibility-properties-wrapper" class="app-library-metadata-form-field">
+        <mat-label>{{ 'LIBRARY.DIALOG.FORM.VISIBILITY' | translate }}</mat-label>
         <mat-select placeholder="{{ 'LIBRARY.DIALOG.FORM.VISIBILITY' | translate }}" formControlName="visibility">
           <mat-option [value]="type.value" [attr.data-automation-id]="'library-visibility-option-' + type.value" *ngFor="let type of libraryType">
             {{ type.label | translate }}
@@ -35,8 +35,8 @@
         </mat-select>
       </mat-form-field>
 
-      <mat-form-field floatLabel="auto" data-automation-id="library-description-properties-wrapper" class="app-library-metadata-form-field">
-        <mat-label class="app-library-metadata-form-field-label">{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}</mat-label>
+      <mat-form-field data-automation-id="library-description-properties-wrapper" class="app-library-metadata-form-field">
+        <mat-label>{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}</mat-label>
         <textarea
           matInput
           placeholder="{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}"
diff --git a/projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.scss b/projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.scss
index 984d53255..2d15b6315 100644
--- a/projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.scss
+++ b/projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.scss
@@ -1,52 +1,6 @@
-/* stylelint-disable selector-class-pattern */
-
 app-library-metadata-form {
   .app-library-metadata-form-field {
     width: 100%;
-
-    .mat-mdc-form-field-flex {
-      border-bottom: 1px solid;
-
-      .mat-mdc-form-field-infix {
-        padding-bottom: 3px;
-        min-height: unset;
-      }
-    }
-
-    &.mat-form-field-disabled {
-      .mat-mdc-form-field-flex {
-        border-bottom: 1px dotted var(--theme-text-disabled-color);
-      }
-    }
-
-    &.mat-focused {
-      .mat-mdc-form-field-flex {
-        border-bottom: 2px solid var(--theme-blue-button-color);
-      }
-    }
-  }
-
-  .mdc-text-field--disabled.mdc-text-field--filled {
-    background: transparent;
-  }
-
-  .mat-mdc-card-content:first-child {
-    padding: 8px 16px;
-  }
-
-  .app-library-metadata-form-field-label {
-    color: var(--theme-text-color);
-  }
-
-  .mdc-text-field {
-    padding: 0;
-  }
-
-  .mdc-line-ripple {
-    display: none;
-  }
-
-  .mat-mdc-form-field-subscript-wrapper {
-    height: 10px;
+    margin-bottom: 15px;
   }
 }
diff --git a/projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.html b/projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.html
index 399ef4093..3f378a6d5 100644
--- a/projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.html
+++ b/projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.html
@@ -1,5 +1,5 @@
 <div class="app-search-container">
-  <mat-form-field class="app-input-form-field" appearance="outline">
+  <mat-form-field class="app-input-form-field">
 
     <button
       mat-icon-button
diff --git a/projects/aca-content/src/lib/components/search/search-input/search-input.component.html b/projects/aca-content/src/lib/components/search/search-input/search-input.component.html
index 4ff47724b..345a4cb04 100644
--- a/projects/aca-content/src/lib/components/search/search-input/search-input.component.html
+++ b/projects/aca-content/src/lib/components/search/search-input/search-input.component.html
@@ -4,7 +4,7 @@
   (menuOpened)="onMenuOpened()"
   (menuClosed)="syncInputValues()"
 >
-  <mat-form-field class="app-input-form-field" appearance="outline">
+  <mat-form-field class="app-input-form-field">
     <button class="aca-search-input--search-button" mat-icon-button matPrefix (click)="searchByOption()" [title]="'SEARCH.BUTTON.TOOLTIP' | translate">
       <mat-icon [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
     </button>
diff --git a/projects/aca-content/src/lib/components/search/search-save/dialog/edit/saved-search-edit-dialog.component.scss b/projects/aca-content/src/lib/components/search/search-save/dialog/edit/saved-search-edit-dialog.component.scss
index 88177c314..57aa26540 100644
--- a/projects/aca-content/src/lib/components/search/search-save/dialog/edit/saved-search-edit-dialog.component.scss
+++ b/projects/aca-content/src/lib/components/search/search-save/dialog/edit/saved-search-edit-dialog.component.scss
@@ -1,6 +1,7 @@
 .aca-saved-search-edit-dialog {
   .aca-saved-search-edit-dialog__form-field {
     width: 100%;
+    margin-bottom: 15px;
   }
 
   .aca-saved-search-edit-dialog__header {
diff --git a/projects/aca-content/src/lib/components/search/search-save/dialog/save-search-dialog.component.scss b/projects/aca-content/src/lib/components/search/search-save/dialog/save-search-dialog.component.scss
index ca32e3434..2d54689a6 100644
--- a/projects/aca-content/src/lib/components/search/search-save/dialog/save-search-dialog.component.scss
+++ b/projects/aca-content/src/lib/components/search/search-save/dialog/save-search-dialog.component.scss
@@ -1,6 +1,7 @@
 .aca-save-search-dialog {
   .aca-save-search-dialog__form-field {
     width: 100%;
+    margin-bottom: 15px;
   }
 
   .aca-save-search-dialog__header {
diff --git a/projects/aca-content/src/lib/components/view-profile/view-profile.component.html b/projects/aca-content/src/lib/components/view-profile/view-profile.component.html
index e4816d5e2..1999278a2 100644
--- a/projects/aca-content/src/lib/components/view-profile/view-profile.component.html
+++ b/projects/aca-content/src/lib/components/view-profile/view-profile.component.html
@@ -26,17 +26,17 @@
       <div class="app-profile-general-section">
         <button
           mat-icon-button
-          (click)="toggleGeneralDropdown()"
-          [attr.title]="`APP.TOOLTIPS.${generalSectionDropdown ? 'COLLAPSE' : 'EXPAND'}_SECTION` | translate"
-          [attr.aria-label]="`APP.TOOLTIPS.${generalSectionDropdown ? 'COLLAPSE' : 'EXPAND'}_SECTION` | translate">
-          <mat-icon>{{ generalSectionDropdown ?  'expand_more' : 'chevron_right'}}</mat-icon>
+          (click)="toggleGeneralSection()"
+          [attr.title]="generalSectionButtonTooltip | translate"
+          [attr.aria-label]="generalSectionButtonTooltip | translate">
+          <mat-icon>{{ generalSectionExpanded ?  'expand_more' : 'chevron_right'}}</mat-icon>
         </button>
         <h4 class="app-general-title">{{'APP.EDIT_PROFILE.GENERAL' | translate}}</h4>
       </div>
-      @if (generalSectionButtonsToggle) {
+      @if (!generalSectionEditMode) {
         <button
           mat-icon-button
-          (click)="toggleGeneralButtons()"
+          (click)="toggleGeneralSectionEditMode()"
           class="app-general-edit"
           [attr.title]="'APP.TOOLTIPS.EDIT' | translate"
           [attr.aria-label]="'APP.TOOLTIPS.EDIT' | translate">
@@ -48,7 +48,7 @@
           class="app-general-cancel-btn"
           [attr.title]="'APP.TOOLTIPS.CANCEL' | translate"
           [attr.aria-label]="'APP.TOOLTIPS.CANCEL' | translate"
-          (click)="toggleGeneralButtons()">
+          (click)="toggleGeneralSectionEditMode()">
           <mat-icon>close</mat-icon>
         </button>
         <button
@@ -62,103 +62,76 @@
         </button>
       }
     </div>
-    @if (generalSectionDropdown) {
+    @if (generalSectionExpanded) {
       <mat-divider class="app-divider" aria-hidden="true" />
       <div class="app-general-dropdown">
-        <div class="app-general-dropdown-details">
-          <h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.FIRST_NAME' | translate}}</h4>
-          <p class="app-profile-general-dropdown-details">{{personDetails?.firstName}}</p>
-        </div>
-        <mat-divider class="app-general-dropdown-divider" aria-hidden="true" />
-        <div class="app-general-dropdown-details">
-          <h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.LAST_NAME' | translate}}</h4>
-          <p class="app-profile-general-dropdown-details">{{personDetails?.lastName}}</p>
-        </div>
-        <mat-divider class="app-general-dropdown-divider" aria-hidden="true" />
-        <div class="app-general-dropdown-details">
-          <label
-            class="app-profile-general-dropdown-heading"
-            for="app-view-profile-job-title">
-            {{'APP.EDIT_PROFILE.JOB_TITLE' | translate}}
-          </label>
-          @if (generalSectionButtonsToggle) {
-            <p class="app-profile-general-dropdown-details">{{personDetails?.jobTitle}}</p>
-          } @else {
-            <input
-              type="text"
-              value=""
-              formControlName="jobTitle"
-              class="app-profile-general-dropdown-input-details app-selected"
-              id="app-view-profile-job-title">
-          }
-        </div>
-        <mat-divider class="app-general-dropdown-divider" aria-hidden="true" />
-        <div class="app-general-dropdown-details">
-          <label
-            class="app-profile-general-dropdown-heading"
-            for="app-view-profile-location">
-            {{'APP.EDIT_PROFILE.LOCATION' | translate}}
-          </label>
-          @if (generalSectionButtonsToggle) {
-            <p class="app-profile-general-dropdown-details">{{personDetails?.location}}</p>
-          } @else {
-            <input
-              type="text"
-              value=""
-              formControlName="location"
-              class="app-profile-general-dropdown-input-details app-selected"
-              id="app-view-profile-location">
-          }
-        </div>
-        <mat-divider class="app-general-dropdown-divider" aria-hidden="true" />
-        <div class="app-general-dropdown-details">
-          <label
-            class="app-profile-general-dropdown-heading"
-            for="app-view-profile-telephone">
-            {{'APP.EDIT_PROFILE.TELEPHONE' | translate}}
-          </label>
-          @if (generalSectionButtonsToggle) {
-            <p class="app-profile-general-dropdown-details">{{personDetails?.telephone}}</p>
-          } @else {
-            <input
-              type="tel"
-              name="Telephone"
-              value=""
-              formControlName="telephone"
-              class="app-profile-general-dropdown-input-details app-selected"
-              aria-describedby="app-view-profile-phone-error-message"
-              id="app-view-profile-telephone">
-          }
-          @if (profileForm.controls['telephone'].errors) {
-            <mat-error class="app-error-message" role="alert" id="app-view-profile-phone-error-message">
-              {{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
-            </mat-error>
-          }
-        </div>
-        <mat-divider class="app-general-dropdown-divider" aria-hidden="true" />
-        <div class="app-general-dropdown-details">
-          <label
-            class="app-profile-general-dropdown-heading"
-            for="app-view-profile-mobile">
-            {{'APP.EDIT_PROFILE.MOBILE' | translate}}
-          </label>
-          @if (generalSectionButtonsToggle) {
-            <p class="app-profile-general-dropdown-details">{{personDetails?.mobile}}</p>
-          } @else {
-            <input
-              type="tel"
-              value=""
-              formControlName="mobile"
-              class="app-profile-general-dropdown-input-details app-selected"
-              aria-describedby="app-view-profile-mobile-error-message"
-              id="app-view-profile-mobile">
-          }
-          @if (profileForm.controls['mobile'].errors) {
-            <mat-error class="app-error-message" role="alert" id="app-view-profile-mobile-error-message">
-              {{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
-            </mat-error>
-          }
-        </div>
+        <mat-form-field class="app-form-field">
+          <mat-label>{{ 'APP.EDIT_PROFILE.FIRST_NAME' | translate }}</mat-label>
+          <input
+            matInput
+            readonly
+            placeholder="{{ 'APP.EDIT_PROFILE.FIRST_NAME' | translate }}"
+            formControlName="firstName"
+          />
+        </mat-form-field>
+
+        <mat-form-field class="app-form-field">
+          <mat-label>{{ 'APP.EDIT_PROFILE.LAST_NAME' | translate }}</mat-label>
+          <input
+            matInput
+            readonly
+            placeholder="{{ 'APP.EDIT_PROFILE.LAST_NAME' | translate }}"
+            formControlName="lastName"
+          />
+        </mat-form-field>
+
+        <mat-form-field class="app-form-field">
+          <mat-label>{{ 'APP.EDIT_PROFILE.JOB_TITLE' | translate }}</mat-label>
+          <input
+            matInput
+            [readonly]="!generalSectionEditMode"
+            placeholder="{{ 'APP.EDIT_PROFILE.JOB_TITLE' | translate }}"
+            formControlName="jobTitle"
+          />
+        </mat-form-field>
+
+        <mat-form-field class="app-form-field">
+          <mat-label>{{ 'APP.EDIT_PROFILE.LOCATION' | translate }}</mat-label>
+          <input
+            matInput
+            [readonly]="!generalSectionEditMode"
+            placeholder="{{ 'APP.EDIT_PROFILE.LOCATION' | translate }}"
+            formControlName="location"
+          />
+        </mat-form-field>
+
+        <mat-form-field class="app-form-field">
+          <mat-label>{{ 'APP.EDIT_PROFILE.TELEPHONE' | translate }}</mat-label>
+          <input
+            matInput
+            [type]="'tel'"
+            [readonly]="!generalSectionEditMode"
+            placeholder="{{ 'APP.EDIT_PROFILE.TELEPHONE' | translate }}"
+            formControlName="telephone"
+          />
+          <mat-error>
+            {{ 'APP.EDIT_PROFILE.INVALID_PHONE_FORMAT' | translate }}
+          </mat-error>
+        </mat-form-field>
+
+        <mat-form-field class="app-form-field">
+          <mat-label>{{ 'APP.EDIT_PROFILE.MOBILE' | translate }}</mat-label>
+          <input
+            matInput
+            [type]="'tel'"
+            [readonly]="!generalSectionEditMode"
+            placeholder="{{ 'APP.EDIT_PROFILE.MOBILE' | translate }}"
+            formControlName="mobile"
+          />
+          <mat-error>
+            {{ 'APP.EDIT_PROFILE.INVALID_PHONE_FORMAT' | translate }}
+          </mat-error>
+        </mat-form-field>
       </div>
     }
   </div>
@@ -168,17 +141,17 @@
       <div class="app-profile-general-section">
          <button
           mat-icon-button
-          (click)="toggleContactDropdown()"
-          [attr.title]="`APP.TOOLTIPS.${contactSectionDropdown ? 'COLLAPSE' : 'EXPAND'}_SECTION` | translate"
-          [attr.aria-label]="`APP.TOOLTIPS.${contactSectionDropdown ? 'COLLAPSE' : 'EXPAND'}_SECTION` | translate">
-          <mat-icon>{{ contactSectionDropdown ?  'expand_more' : 'chevron_right'}}</mat-icon>
+          (click)="toggleContactSection()"
+          [attr.title]="contactSectionButtonTooltip | translate"
+          [attr.aria-label]="contactSectionButtonTooltip | translate">
+          <mat-icon>{{ contactSectionExpanded ?  'expand_more' : 'chevron_right'}}</mat-icon>
         </button>
         <h4 class="app-general-title">{{'APP.EDIT_PROFILE.COMPANY_DETAILS' | translate}}</h4>
       </div>
-      @if (contactSectionButtonsToggle) {
+      @if (!contactSectionEditMode) {
         <button
           mat-icon-button
-          (click)="toggleContactButtons()"
+          (click)="toggleContactSectionEditMode()"
           class="app-general-edit"
           [attr.title]="'APP.TOOLTIPS.EDIT' | translate"
           [attr.aria-label]="'APP.TOOLTIPS.EDIT' | translate">
@@ -190,7 +163,7 @@
           class="app-general-cancel-btn"
           [attr.title]="'APP.TOOLTIPS.CANCEL' | translate"
           [attr.aria-label]="'APP.TOOLTIPS.CANCEL' | translate"
-          (click)="toggleContactButtons()">
+          (click)="toggleContactSectionEditMode()">
           <mat-icon>close</mat-icon>
         </button>
         <button
@@ -204,110 +177,64 @@
         </button>
       }
     </div>
-    @if (contactSectionDropdown) {
+    @if (contactSectionExpanded) {
       <mat-divider class="app-divider" aria-hidden="true" />
       <div class="app-general-dropdown">
-        <div class="app-general-dropdown-details">
-          <label
-            class="app-profile-general-dropdown-heading"
-            for="app-view-profile-company-name">
-            {{'APP.EDIT_PROFILE.NAME' | translate}}
-          </label>
-          @if (contactSectionButtonsToggle) {
-            <p class="app-profile-general-dropdown-details">{{personDetails?.company?.organization}}</p>
-          } @else {
-            <input
-              type="text"
-              value=""
-              formControlName="companyName"
-              class="app-profile-general-dropdown-input-details app-selected"
-              id="app-view-profile-company-name">
-          }
-        </div>
-        <mat-divider class="app-general-dropdown-divider" aria-hidden="true" />
-        <div class="app-general-dropdown-details">
-          <label
-            class="app-profile-general-dropdown-heading"
-            for="app-view-profile-company-address">
-            {{'APP.EDIT_PROFILE.ADDRESS' | translate}}
-          </label>
-          @if (contactSectionButtonsToggle) {
-            <p class="app-profile-general-dropdown-details">{{personDetails?.company?.address1}}</p>
-          } @else {
-            <input
-              type="text"
-              value=""
-              formControlName="companyAddress"
-              class="app-profile-general-dropdown-input-details app-selected"
-              id="app-view-profile-company-address">
-          }
-        </div>
-        <mat-divider class="app-general-dropdown-divider" aria-hidden="true" />
-        <div class="app-general-dropdown-details">
-          <label
-            class="app-profile-general-dropdown-heading"
-            for="app-view-profile-company-post-code">
-            {{'APP.EDIT_PROFILE.POSTCODE' | translate}}
-          </label>
-          @if (contactSectionButtonsToggle) {
-            <p class="app-profile-general-dropdown-details">{{personDetails?.company?.postcode}}</p>
-          } @else {
-            <input
-              type="text"
-              value=""
-              formControlName="companyPostCode"
-              class="app-profile-general-dropdown-input-details app-selected"
-              id="app-view-profile-company-post-code">
-          }
-        </div>
-        <mat-divider class="app-general-dropdown-divider" aria-hidden="true" />
-        <div class="app-general-dropdown-details">
-          <label
-            class="app-profile-general-dropdown-heading"
-            for="app-view-profile-company-telephone">
-            {{'APP.EDIT_PROFILE.TELEPHONE' | translate}}
-          </label>
-          @if (contactSectionButtonsToggle) {
-            <p class="app-profile-general-dropdown-details">{{personDetails?.company?.telephone}}</p>
-          } @else {
-            <input
-              type="tel"
-              value=""
-              formControlName="companyTelephone"
-              class="app-profile-general-dropdown-input-details app-selected"
-              aria-describedby="app-view-profile-company-phone-error-message"
-              id="app-view-profile-company-telephone">
-          }
-          @if (profileForm.controls['companyTelephone'].errors) {
-            <mat-error class="app-error-message" role="alert" id="app-view-profile-company-phone-error-message">
-              {{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
-            </mat-error>
-          }
-        </div>
-        <mat-divider class="app-general-dropdown-divider" aria-hidden="true" />
-        <div class="app-general-dropdown-details">
-          <label
-            class="app-profile-general-dropdown-heading"
-            for="app-view-profile-company-email">
-            {{'APP.EDIT_PROFILE.EMAIL' | translate}}
-          </label>
-          @if (contactSectionButtonsToggle) {
-             <p class="app-profile-general-dropdown-details">{{personDetails?.company?.email}}</p>
-          } @else {
-            <input
-              type="text"
-              value=""
-              formControlName="companyEmail"
-              class="app-profile-general-dropdown-input-details app-selected"
-              aria-describedby="app-view-profile-company-email-error-message"
-              id="app-view-profile-company-email">
-          }
-          @if (profileForm.controls['companyEmail'].errors) {
-            <mat-error class="app-error-message" role="alert" id="app-view-profile-company-email-error-message">
-              {{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
-            </mat-error>
-          }
-        </div>
+        <mat-form-field class="app-form-field">
+          <mat-label>{{ 'APP.EDIT_PROFILE.NAME' | translate }}</mat-label>
+          <input
+            matInput
+            [readonly]="!contactSectionEditMode"
+            placeholder="{{ 'APP.EDIT_PROFILE.NAME' | translate }}"
+            formControlName="companyName"
+          />
+        </mat-form-field>
+
+        <mat-form-field class="app-form-field">
+          <mat-label>{{ 'APP.EDIT_PROFILE.ADDRESS' | translate }}</mat-label>
+          <input
+            matInput
+            [readonly]="!contactSectionEditMode"
+            placeholder="{{ 'APP.EDIT_PROFILE.ADDRESS' | translate }}"
+            formControlName="companyAddress"
+          />
+        </mat-form-field>
+
+        <mat-form-field class="app-form-field">
+          <mat-label>{{ 'APP.EDIT_PROFILE.POSTCODE' | translate }}</mat-label>
+          <input
+            matInput
+            [readonly]="!contactSectionEditMode"
+            placeholder="{{ 'APP.EDIT_PROFILE.POSTCODE' | translate }}"
+            formControlName="companyPostCode"
+          />
+        </mat-form-field>
+
+        <mat-form-field class="app-form-field">
+          <mat-label>{{ 'APP.EDIT_PROFILE.TELEPHONE' | translate }}</mat-label>
+          <input
+            matInput
+            [readonly]="!contactSectionEditMode"
+            placeholder="{{ 'APP.EDIT_PROFILE.TELEPHONE' | translate }}"
+            formControlName="companyTelephone"
+          />
+          <mat-error>
+            {{ 'APP.EDIT_PROFILE.INVALID_PHONE_FORMAT' | translate }}
+          </mat-error>
+        </mat-form-field>
+
+        <mat-form-field class="app-form-field">
+          <mat-label>{{ 'APP.EDIT_PROFILE.EMAIL' | translate }}</mat-label>
+          <input
+            matInput
+            [readonly]="!contactSectionEditMode"
+            placeholder="{{ 'APP.EDIT_PROFILE.EMAIL' | translate }}"
+            formControlName="companyEmail"
+          />
+          <mat-error>
+            {{ 'APP.EDIT_PROFILE.INVALID_EMAIL_FORMAT' | translate }}
+          </mat-error>
+        </mat-form-field>
       </div>
     }
   </div>
diff --git a/projects/aca-content/src/lib/components/view-profile/view-profile.component.scss b/projects/aca-content/src/lib/components/view-profile/view-profile.component.scss
index 70f3f8f00..c81000ba9 100644
--- a/projects/aca-content/src/lib/components/view-profile/view-profile.component.scss
+++ b/projects/aca-content/src/lib/components/view-profile/view-profile.component.scss
@@ -42,15 +42,6 @@ app-view-profile {
     border-radius: 1rem;
   }
 
-  .app-profile-general-icon {
-    padding: 0 0.5rem 0 1rem;
-    cursor: pointer;
-  }
-
-  .app-profile-text {
-    letter-spacing: 0.5px;
-  }
-
   .app-profile-general {
     display: flex;
     align-items: center;
@@ -83,75 +74,14 @@ app-view-profile {
     padding-right: 1px;
   }
 
-  .app-selected:focus {
-    border: 2px solid var(--theme-blue-button-color);
-    border-radius: 6px;
-    outline: none;
-    box-shadow: 0 0 2px var(--theme-blue-button-color);
-  }
-
-  .app-general-dropdown-divider {
-    border-top-color: var(--theme-grey-divider-color);
-  }
-
   .app-general-dropdown {
-    padding: 0 1rem;
-  }
-
-  .app-general-dropdown-details {
     display: flex;
-  }
+    flex-direction: column;
+    padding: 21.5px 1rem 0;
 
-  .app-profile-general-dropdown-heading {
-    color: var(--theme-heading-color);
-    width: 20%;
-    font-weight: 400;
-    letter-spacing: 0.5px;
-    margin-top: 1.33em;
-    margin-bottom: 1.33em;
-  }
-
-  .app-profile-general-dropdown-details {
-    margin-top: 1.3rem;
-    letter-spacing: 0.5px;
-  }
-
-  .app-profile-general-dropdown-input-details {
-    width: 24%;
-    height: 25px;
-    border: none;
-    margin-top: 1.3rem;
-    background-color: var(--theme-dropdown-color);
-  }
-
-  .app-profile-login-row {
-    margin: 2rem 0 0 2rem;
-    width: 70%;
-    border: 1px solid var(--theme-grey-background-color);
-    border-radius: 1rem;
-  }
-
-  .app-profile-login {
-    display: flex;
-    padding-left: 1rem;
-  }
-
-  .app-profile-login-dropdown-details {
-    width: 24%;
-    height: 25px;
-    border: none;
-    margin-top: 1.3rem;
-    background-color: var(--theme-dropdown-color);
-  }
-
-  .app-profile-login-dropdown-heading-forgot {
-    margin-top: 1.3rem;
-    color: var(--theme-heading-color);
-    margin-left: 16rem;
-  }
-
-  .app-profile-company-row {
-    margin-top: 2rem;
+    .app-form-field {
+      margin-bottom: 15px;
+    }
   }
 
   .app-profile-contact-row {
@@ -160,9 +90,4 @@ app-view-profile {
     border: 1px solid var(--theme-grey-background-color);
     border-radius: 1rem;
   }
-
-  .app-error-message {
-    padding-top: 2rem;
-    padding-left: 0.5rem;
-  }
 }
diff --git a/projects/aca-content/src/lib/components/view-profile/view-profile.component.spec.ts b/projects/aca-content/src/lib/components/view-profile/view-profile.component.spec.ts
index a99f6abe3..cd801137f 100644
--- a/projects/aca-content/src/lib/components/view-profile/view-profile.component.spec.ts
+++ b/projects/aca-content/src/lib/components/view-profile/view-profile.component.spec.ts
@@ -66,9 +66,9 @@ describe('ViewProfileComponent', () => {
     router.initialNavigation();
   });
 
-  it('should company dropdown remains close', async () => {
-    expect(component.loginSectionDropdown).toBe(false);
-    expect(component.contactSectionDropdown).toBe(false);
+  it('should expand only general section by default', async () => {
+    expect(component.generalSectionExpanded).toBe(true);
+    expect(component.contactSectionExpanded).toBe(false);
   });
 
   it('should toggle the appService toggleAppNavBar$ Subject', () => {
@@ -77,18 +77,17 @@ describe('ViewProfileComponent', () => {
     expect(appServiceMock.toggleAppNavBar$.next).toHaveBeenCalled();
   });
 
-  it('should save button is disabled if form has invalid mobile number', () => {
+  it('should disable save button if form is invalid', () => {
     component.ngOnInit();
     const profileFormGroup = component.profileForm;
 
     profileFormGroup.setValue({
+      firstName: 'John',
+      lastName: 'Doe',
       jobTitle: 'Developer',
       location: 'US',
       telephone: '2744245',
-      mobile: 'AB8866322112',
-      oldPassword: 'admin@123',
-      newPassword: 'admin@1234',
-      verifyPassword: 'admin@1234',
+      mobile: 'invalid',
       companyName: 'test Name',
       companyPostCode: '12345',
       companyAddress: 'test address',
@@ -97,44 +96,54 @@ describe('ViewProfileComponent', () => {
     });
 
     expect(profileFormGroup.valid).toEqual(false);
-    expect(component.isSaveButtonDisabled()).toBeTruthy();
-  });
-
-  it('should save button is disabled if form has invalid email', () => {
-    component.ngOnInit();
-    const profileFormGroup = component.profileForm;
+    expect(component.isSaveButtonDisabled()).toBeTrue();
 
     profileFormGroup.setValue({
+      firstName: 'John',
+      lastName: 'Doe',
       jobTitle: 'Developer',
       location: 'US',
-      telephone: '27442445',
-      mobile: '457554',
-      oldPassword: 'admin@123',
-      newPassword: 'admin@1234',
-      verifyPassword: 'admin@1234',
+      telephone: '274-424-55',
+      mobile: '886-632-2112',
       companyName: 'test Name',
       companyPostCode: '12345',
       companyAddress: 'test address',
-      companyTelephone: '27442266',
-      companyEmail: 'email'
+      companyTelephone: '274-42-266',
+      companyEmail: 'invalid'
     });
 
     expect(profileFormGroup.valid).toEqual(false);
-    expect(component.isSaveButtonDisabled()).toBeTruthy();
+    expect(component.isSaveButtonDisabled()).toBeTrue();
+
+    profileFormGroup.setValue({
+      firstName: 'John',
+      lastName: 'Doe',
+      jobTitle: 'Developer',
+      location: 'US',
+      telephone: 'invalid',
+      mobile: '886-632-2112',
+      companyName: 'test Name',
+      companyPostCode: '12345',
+      companyAddress: 'test address',
+      companyTelephone: '274-42-266',
+      companyEmail: 'test@test.com'
+    });
+
+    expect(profileFormGroup.valid).toEqual(false);
+    expect(component.isSaveButtonDisabled()).toBeTrue();
   });
 
-  it('should save button is enabled if form has valid inputs', () => {
+  it('should enable save button if form has valid inputs', () => {
     component.ngOnInit();
     const profileFormGroup = component.profileForm;
 
     profileFormGroup.setValue({
+      firstName: 'John',
+      lastName: 'Doe',
       jobTitle: 'Developer',
       location: 'US',
       telephone: '274-422-55',
       mobile: '886-632-2112',
-      oldPassword: 'test@123',
-      newPassword: 'test@1234',
-      verifyPassword: 'test@1234',
       companyName: 'testCompany',
       companyPostCode: '12345',
       companyAddress: 'test address',
@@ -143,40 +152,33 @@ describe('ViewProfileComponent', () => {
     });
 
     expect(profileFormGroup.valid).toEqual(true);
-    expect(component.isSaveButtonDisabled()).toBeFalsy();
-  });
-
-  it('should navigate to personal files when back button is clicked', () => {
-    const navigateSpy = spyOn(router, 'navigate');
-    component.navigateToPersonalFiles();
-
-    expect(navigateSpy).toHaveBeenCalledWith(['/personal-files'], { replaceUrl: true });
+    expect(component.isSaveButtonDisabled()).toBeFalse();
   });
 
   it('should expand or compress general dropdown when arrow button is clicked', () => {
-    spyOn(component, 'toggleGeneralDropdown').and.callThrough();
-    component.generalSectionDropdown = false;
+    spyOn(component, 'toggleGeneralSection').and.callThrough();
+    component.generalSectionExpanded = false;
     fixture.detectChanges();
 
     unitTestingUtils.clickByCSS('#general-dropdown button');
 
-    expect(component.toggleGeneralDropdown).toHaveBeenCalled();
-    expect(component.generalSectionButtonsToggle).toBe(true);
+    expect(component.toggleGeneralSection).toHaveBeenCalled();
+    expect(component.generalSectionExpanded).toBe(true);
   });
 
   it('should expand or compress contact dropdown when arrow button is clicked', () => {
-    spyOn(component, 'toggleContactDropdown').and.callThrough();
-    component.contactSectionDropdown = false;
+    spyOn(component, 'toggleContactSection').and.callThrough();
+    component.contactSectionExpanded = false;
     fixture.detectChanges();
 
     unitTestingUtils.clickByCSS('#contact-dropdown button');
 
-    expect(component.toggleContactDropdown).toHaveBeenCalled();
-    expect(component.contactSectionButtonsToggle).toBe(true);
+    expect(component.toggleContactSection).toHaveBeenCalled();
+    expect(component.contactSectionExpanded).toBe(true);
   });
 
   it('should toggle form view when edit or cancel buttons is clicked for general form', () => {
-    spyOn(component, 'toggleGeneralButtons').and.callThrough();
+    spyOn(component, 'toggleGeneralSectionEditMode').and.callThrough();
     fixture.detectChanges();
 
     unitTestingUtils.clickByCSS('#general-dropdown .app-general-edit');
@@ -184,11 +186,11 @@ describe('ViewProfileComponent', () => {
 
     unitTestingUtils.clickByCSS('#general-dropdown .app-general-cancel-btn');
 
-    expect(component.toggleGeneralButtons).toHaveBeenCalledTimes(2);
+    expect(component.toggleGeneralSectionEditMode).toHaveBeenCalledTimes(2);
   });
 
   it('should toggle form view when edit or cancel buttons is clicked for contact form', () => {
-    spyOn(component, 'toggleContactButtons').and.callThrough();
+    spyOn(component, 'toggleContactSectionEditMode').and.callThrough();
     fixture.detectChanges();
 
     unitTestingUtils.clickByCSS('#contact-dropdown .app-general-edit');
@@ -196,7 +198,7 @@ describe('ViewProfileComponent', () => {
 
     unitTestingUtils.clickByCSS('#contact-dropdown .app-general-cancel-btn');
 
-    expect(component.toggleContactButtons).toHaveBeenCalledTimes(2);
+    expect(component.toggleContactSectionEditMode).toHaveBeenCalledTimes(2);
   });
 
   it('should navigate to personal files when go to personal files button is clicked', async () => {
diff --git a/projects/aca-content/src/lib/components/view-profile/view-profile.component.ts b/projects/aca-content/src/lib/components/view-profile/view-profile.component.ts
index ec000dcba..b3b9703db 100644
--- a/projects/aca-content/src/lib/components/view-profile/view-profile.component.ts
+++ b/projects/aca-content/src/lib/components/view-profile/view-profile.component.ts
@@ -37,6 +37,7 @@ import { MatDividerModule } from '@angular/material/divider';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DynamicExtensionComponent } from '@alfresco/adf-extensions';
+import { MatInputModule } from '@angular/material/input';
 
 @Component({
   imports: [
@@ -47,6 +48,7 @@ import { DynamicExtensionComponent } from '@alfresco/adf-extensions';
     MatIconModule,
     MatDividerModule,
     MatFormFieldModule,
+    MatInputModule,
     DynamicExtensionComponent
   ],
   selector: 'app-view-profile',
@@ -56,22 +58,35 @@ import { DynamicExtensionComponent } from '@alfresco/adf-extensions';
 })
 export class ViewProfileComponent implements OnInit {
   peopleApi: PeopleApi;
-
-  profileForm: FormGroup;
+  profileForm = new FormGroup({
+    firstName: new FormControl(''),
+    lastName: new FormControl(''),
+    jobTitle: new FormControl(''),
+    location: new FormControl(''),
+    telephone: new FormControl('', [Validators.pattern('^([0-9]+-)*[0-9]+$')]),
+    mobile: new FormControl('', [Validators.pattern('^([0-9]+-)*[0-9]+$')]),
+    companyName: new FormControl(''),
+    companyPostCode: new FormControl(''),
+    companyAddress: new FormControl(''),
+    companyTelephone: new FormControl('', [Validators.pattern('^([0-9]+-)*[0-9]+$')]),
+    companyEmail: new FormControl('', [Validators.email])
+  });
   personDetails: Person;
-
-  generalSectionDropdown = true;
-  generalSectionButtonsToggle = true;
-
-  loginSectionDropdown = false;
-  loginSectionButtonsToggle = true;
-  passwordSectionDropdown = false;
-
-  contactSectionDropdown = false;
-  contactSectionButtonsToggle = true;
+  generalSectionExpanded = true;
+  generalSectionEditMode = false;
+  contactSectionExpanded = false;
+  contactSectionEditMode = false;
   appNavNarMode$: Observable<'collapsed' | 'expanded'>;
   sections: UserProfileSection[] = [];
 
+  get generalSectionButtonTooltip(): string {
+    return `APP.TOOLTIPS.${this.generalSectionExpanded ? 'COLLAPSE' : 'EXPAND'}_SECTION`;
+  }
+
+  get contactSectionButtonTooltip(): string {
+    return `APP.TOOLTIPS.${this.contactSectionExpanded ? 'COLLAPSE' : 'EXPAND'}_SECTION`;
+  }
+
   constructor(
     private router: Router,
     private readonly apiService: AlfrescoApiService,
@@ -105,19 +120,18 @@ export class ViewProfileComponent implements OnInit {
   }
 
   populateForm(userInfo: Person) {
-    this.profileForm = new FormGroup({
-      jobTitle: new FormControl(userInfo?.jobTitle || ''),
-      location: new FormControl(userInfo?.location || ''),
-      telephone: new FormControl(userInfo?.telephone || '', [Validators.pattern('^([0-9]+-)*[0-9]+$')]),
-      mobile: new FormControl(userInfo?.mobile || '', [Validators.pattern('^([0-9]+-)*[0-9]+$')]),
-      oldPassword: new FormControl(''),
-      newPassword: new FormControl(''),
-      verifyPassword: new FormControl(''),
-      companyName: new FormControl(userInfo?.company?.organization || ''),
-      companyPostCode: new FormControl(userInfo?.company?.postcode || ''),
-      companyAddress: new FormControl(userInfo?.company?.address1 || ''),
-      companyTelephone: new FormControl(userInfo?.company?.telephone || '', [Validators.pattern('^([0-9]+-)*[0-9]+$')]),
-      companyEmail: new FormControl(userInfo?.company?.email || '', [Validators.email])
+    this.profileForm.setValue({
+      firstName: userInfo?.firstName || '',
+      lastName: userInfo?.lastName || '',
+      jobTitle: userInfo?.jobTitle || '',
+      location: userInfo?.location || '',
+      telephone: userInfo?.telephone || '',
+      mobile: userInfo?.mobile || '',
+      companyName: userInfo?.company?.organization || '',
+      companyPostCode: userInfo?.company?.postcode || '',
+      companyAddress: userInfo?.company?.address1 || '',
+      companyTelephone: userInfo?.company?.telephone || '',
+      companyEmail: userInfo?.company?.email || ''
     });
   }
 
@@ -127,56 +141,37 @@ export class ViewProfileComponent implements OnInit {
     });
   }
 
-  toggleGeneralDropdown() {
-    this.generalSectionDropdown = !this.generalSectionDropdown;
+  toggleGeneralSection() {
+    this.generalSectionExpanded = !this.generalSectionExpanded;
   }
 
-  toggleGeneralButtons() {
-    this.generalSectionButtonsToggle = !this.generalSectionButtonsToggle;
+  toggleGeneralSectionEditMode() {
+    this.generalSectionEditMode = !this.generalSectionEditMode;
 
-    if (!this.generalSectionButtonsToggle) {
-      this.generalSectionDropdown = true;
+    if (this.generalSectionEditMode) {
+      this.generalSectionExpanded = true;
     }
   }
 
   onSaveGeneralData(event) {
-    this.generalSectionButtonsToggle = !this.generalSectionButtonsToggle;
+    this.generalSectionEditMode = false;
     this.updatePersonDetails(event);
   }
 
-  onSaveLoginData() {
-    this.passwordSectionDropdown = !this.passwordSectionDropdown;
-    this.loginSectionButtonsToggle = !this.loginSectionButtonsToggle;
-  }
-
   onSaveCompanyData(event) {
-    this.contactSectionButtonsToggle = !this.contactSectionButtonsToggle;
+    this.contactSectionEditMode = false;
     this.updatePersonDetails(event);
   }
 
-  toggleLoginDropdown() {
-    this.loginSectionDropdown = !this.loginSectionDropdown;
+  toggleContactSection() {
+    this.contactSectionExpanded = !this.contactSectionExpanded;
   }
 
-  toggleLoginButtons() {
-    this.loginSectionButtonsToggle = !this.loginSectionButtonsToggle;
-    this.passwordSectionDropdown = !this.passwordSectionDropdown;
+  toggleContactSectionEditMode() {
+    this.contactSectionEditMode = !this.contactSectionEditMode;
 
-    if (!this.loginSectionButtonsToggle) {
-      this.loginSectionDropdown = true;
-      this.passwordSectionDropdown = true;
-    }
-  }
-
-  toggleContactDropdown() {
-    this.contactSectionDropdown = !this.contactSectionDropdown;
-  }
-
-  toggleContactButtons() {
-    this.contactSectionButtonsToggle = !this.contactSectionButtonsToggle;
-
-    if (!this.contactSectionButtonsToggle) {
-      this.contactSectionDropdown = true;
+    if (this.contactSectionEditMode) {
+      this.contactSectionExpanded = true;
     }
   }
 
diff --git a/projects/aca-content/src/lib/dialogs/node-template/create-from-template.dialog.scss b/projects/aca-content/src/lib/dialogs/node-template/create-from-template.dialog.scss
index 4d0c12fde..6e7acfd2b 100644
--- a/projects/aca-content/src/lib/dialogs/node-template/create-from-template.dialog.scss
+++ b/projects/aca-content/src/lib/dialogs/node-template/create-from-template.dialog.scss
@@ -23,45 +23,23 @@ app-create-from-template-dialog {
 
     &-field {
       width: 100%;
-
-      &:first-of-type {
-        margin-bottom: 9.5px;
-      }
-
-      &:nth-of-type(2) {
-        margin-bottom: 6.5px;
-      }
+      margin-bottom: 15px;
     }
 
     &-content {
       margin: 0 2px;
       overflow: hidden;
 
+      form:first-child {
+        margin-top: 5px;
+      }
+
       .app-create-from-template-field {
         .mdc-floating-label {
           -webkit-font-smoothing: subpixel-antialiased;
         }
 
-        &.mat-form-field-hide-placeholder {
-          .mdc-floating-label {
-            padding-top: 11px;
-          }
-        }
-
-        &.app-create-from-template-field-description {
-          &.mat-form-field-hide-placeholder {
-            .mdc-floating-label {
-              padding-top: 19px;
-            }
-          }
-        }
-
-        .mat-mdc-form-field-infix {
-          padding-bottom: 3.5px;
-        }
-
         .mat-mdc-form-field-error-wrapper {
-          margin-left: -2px;
           font-size: 10.5px;
           -webkit-font-smoothing: subpixel-antialiased;
         }
diff --git a/projects/aca-content/src/lib/ui/mat-selectors.scss b/projects/aca-content/src/lib/ui/mat-selectors.scss
index dddd725c9..1b91e4726 100644
--- a/projects/aca-content/src/lib/ui/mat-selectors.scss
+++ b/projects/aca-content/src/lib/ui/mat-selectors.scss
@@ -99,4 +99,5 @@ $mat-select-disabled: '.mat-mdc-select-disabled';
 $mat-select-value: '.mat-mdc-select-value';
 $mat-checkbox-native-control: '.mdc-checkbox__native-control';
 $mat-card-header: '.mat-mdc-card-header';
+$mat-form-field-hint-wrapper: '.mat-mdc-form-field-hint-wrapper';
 $mat-expansion-panel-body: '.mat-expansion-panel-body';
diff --git a/projects/aca-content/src/lib/ui/overrides/adf-variables.scss b/projects/aca-content/src/lib/ui/overrides/adf-variables.scss
index c24c9b37f..8646afa98 100644
--- a/projects/aca-content/src/lib/ui/overrides/adf-variables.scss
+++ b/projects/aca-content/src/lib/ui/overrides/adf-variables.scss
@@ -81,11 +81,9 @@
     --adf-theme-spacing: 8px,
     // components
     --adf-metadata-property-panel-border-color: rgba(0, 0, 0, 0.12),
-    --adf-metadata-buttons-background-color: rgba(33, 33, 33, 0.05),
     --adf-metadata-action-button-clear-color: rgba(33, 35, 40, 0.698),
     --adf-metadata-property-panel-text-color: rgba(33, 35, 40, 0.7),
     --adf-metadata-property-panel-label-color: rgba(33, 33, 33, 0.24),
-    --adf-metadata-property-panel-title-color: rgb(33, 33, 33),
     --adf-error-color: #ba1b1b,
     --adf-secondary-button-background: #2121210d,
     --adf-secondary-modal-text-color: #212121,
diff --git a/projects/aca-content/src/lib/ui/theme.scss b/projects/aca-content/src/lib/ui/theme.scss
index afaa86608..2cc235fdd 100644
--- a/projects/aca-content/src/lib/ui/theme.scss
+++ b/projects/aca-content/src/lib/ui/theme.scss
@@ -18,6 +18,43 @@
   --mdc-checkbox-selected-hover-icon-color: var(--theme-blue-checkbox-color);
   --mdc-checkbox-selected-focus-icon-color: var(--theme-blue-checkbox-color);
   --mat-dialog-container-max-width: 100%;
+
+  @include mat.form-field-overrides(
+    (
+      outlined-label-text-populated-size: 18px,
+      outlined-label-text-color: var(--theme-selected-text-color),
+      outlined-hover-label-text-color: var(--adf-theme-foreground-text-color),
+      outlined-disabled-input-text-color: var(--adf-theme-foreground-text-color-040),
+      outlined-disabled-label-text-color: var(--adf-theme-foreground-text-color-040),
+      outlined-disabled-outline-color: var(--adf-theme-foreground-text-color-040),
+      subscript-text-size: 12px
+    )
+  );
+}
+
+.adf-search-properties-form,
+.adf-search-date-range {
+  @include mat.form-field-overrides(
+    (
+      outlined-label-text-populated-size: 14px
+    )
+  );
+
+  #{ms.$mat-form-field} .mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
+    line-height: 18px;
+  }
+}
+
+.adf-property-readonly-value {
+  color: var(--adf-theme-foreground-text-color-040);
+
+  .adf-dateitem-editable-controls {
+    color: var(--adf-theme-foreground-text-color-040);
+  }
+}
+
+#{ms.$mat-form-field} .mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
+  line-height: 22px;
 }
 
 mat-toolbar {
@@ -28,20 +65,6 @@ mat-toolbar {
   color: var(--theme-secondary-text);
 }
 
-#{ms.$mat-text-field-filled}:not(#{ms.$mat-text-field-disabled}) {
-  padding: 0;
-}
-
-#{ms.$mat-form-field-error-wrapper}:is(div) {
-  padding: 0;
-  font-size: 10px;
-
-  #{ms.$mat-form-field-error} {
-    position: relative;
-    top: -3px;
-  }
-}
-
 #{ms.$mat-checkbox} {
   #{ms.$mat-checkbox-box}:has(div) {
     padding-right: 2px;
@@ -316,12 +339,6 @@ adf-dynamic-component {
   }
 }
 
-#{ms.$mat-notched-outline-trailing},
-#{ms.$mat-notched-outline-notch},
-#{ms.$mat-notched-outline-leading} {
-  border-color: var(--adf-theme-foreground-text-color-014);
-}
-
 #{ms.$mat-menu-surface}#{ms.$mat-autocomplete-panel}:is(div) {
   padding: 0;
 
@@ -358,3 +375,9 @@ adf-dynamic-component {
   right: 6px;
   transform: translateY(-50%);
 }
+
+#{ms.$mat-form-field-hint-wrapper} {
+  /* stylelint-disable-next-line declaration-no-important */
+  padding-left: 0 !important;
+  color: var(--adf-theme-foreground-secondary-text-color);
+}
diff --git a/projects/aca-content/src/lib/ui/variables/variables.scss b/projects/aca-content/src/lib/ui/variables/variables.scss
index 1db79ed28..6584ada98 100644
--- a/projects/aca-content/src/lib/ui/variables/variables.scss
+++ b/projects/aca-content/src/lib/ui/variables/variables.scss
@@ -65,7 +65,6 @@ $defaults: (
   --theme-tab-active-text-color: mat.m2-get-color-from-palette($foreground, text),
   --theme-text-bold-color: mat.m2-get-color-from-palette($foreground, text, 0.87),
   --theme-title-color: mat.m2-get-color-from-palette($foreground, text, 0.87),
-  --theme-text-disabled-color: mat.m2-get-color-from-palette($foreground, text, 0.38),
   --theme-border-color: mat.m2-get-color-from-palette($foreground, text, 0.07),
   --theme-card-background-color: mat.m2-get-color-from-palette($background, card),
   --theme-foreground-text-color: mat.m2-get-color-from-palette($foreground, text, 0.72),
@@ -83,7 +82,6 @@ $defaults: (
   --theme-warning-snackbar-background: $warning-snackbar-background,
   --theme-blue-checkbox-color: $blue-checkbox-background,
   --theme-blue-active-table-row-color: $blue-active-table-row,
-  --theme-heading-color: $black-heading,
   --theme-content-color: $light-grey-content,
   --theme-dropdown-color: $theme-dropdown-background,
   --theme-dropdown-background-hover: $theme-dropdown-background-hover,
diff --git a/projects/aca-playwright-shared/src/page-objects/components/actions-dropdown.component.ts b/projects/aca-playwright-shared/src/page-objects/components/actions-dropdown.component.ts
index 6fc8a8d69..13dc4c08d 100644
--- a/projects/aca-playwright-shared/src/page-objects/components/actions-dropdown.component.ts
+++ b/projects/aca-playwright-shared/src/page-objects/components/actions-dropdown.component.ts
@@ -77,7 +77,7 @@ export class ActionsDropdownComponent extends BaseComponent {
   private actionSimpleWorkflowLabelApproveLocator = `[data-automation-id="card-boolean-label-approve-move"]`;
   private actionSimpleWorkflowSRejectStepLocator = '[data-automation-id="header-reject-step"] input';
   private actionSimpleWorkflowRejectFolderLocator = `[data-automation-id="header-reject-folder"] input`;
-  private readonly mimeTypeDropdownLocator = this.getChild('[data-automation-class="select-box"][aria-label="Mimetype *"]');
+  private readonly mimeTypeDropdownLocator = this.getChild('[data-automation-id="select-box"][aria-label="Mimetype *"]');
   private readonly actionTransformAndCopyContentDestinationFolderLocator = '[data-automation-id="card-textitem-value-destination-folder"]';
   private readonly contentNodeSelectorSearchInput = '[data-automation-id="content-node-selector-search-input"]';
 
diff --git a/projects/aca-playwright-shared/src/page-objects/components/manageRules/manage-rules.component.ts b/projects/aca-playwright-shared/src/page-objects/components/manageRules/manage-rules.component.ts
index 44a22798c..b82db85a7 100644
--- a/projects/aca-playwright-shared/src/page-objects/components/manageRules/manage-rules.component.ts
+++ b/projects/aca-playwright-shared/src/page-objects/components/manageRules/manage-rules.component.ts
@@ -35,7 +35,7 @@ export class ManageRules extends BaseComponent {
   public ruleDetailsDeleteButton = this.getChild('#delete-rule-btn');
   public ruleDetailsEditButton = this.getChild('#edit-rule-btn');
   public ruleDetailsWhenText = this.getChild('[data-automation-id="rule-details-triggers-component"]');
-  public ruleDetailsPerformActionsDiv = this.getChild('adf-card-view-selectitem .adf-property-read-only');
+  public ruleDetailsPerformActionsDiv = this.getChild('adf-card-view-selectitem [data-automation-id="select-box"]');
   public rulesEmptyListTitle = this.getChild('.adf-empty-content__title');
   public ruleActions = this.getChild('aca-rule-action');
   public ruleConditionsInGroup = this.getChild('aca-rule-composite-condition aca-rule-simple-condition');
diff --git a/projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.scss b/projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.scss
deleted file mode 100644
index 5d3b4fb62..000000000
--- a/projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-@use '../../styles/mat-selectors' as ms;
-
-aca-info-drawer {
-  .aca-info-drawer {
-    .adf-card-view-textitem {
-      .adf-property-value-not-editable {
-        color: var(--adf-metadata-property-panel-title-color);
-      }
-    }
-
-    .adf-card-view-selectitem #{ms.$mat-form-field-infix} {
-      padding-left: 0;
-      padding-right: 0;
-    }
-
-    .adf-property-list .adf-property-value {
-      #{ms.$mat-select-trigger} {
-        background-color: var(--adf-metadata-buttons-background-color);
-        border-radius: 3px;
-        padding: 2%;
-
-        #{ms.$mat-select-arrow-wrapper} {
-          margin-top: 16px;
-        }
-      }
-    }
-  }
-}
diff --git a/projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.ts b/projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.ts
index 9760b543b..79c9dcffd 100644
--- a/projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.ts
+++ b/projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.ts
@@ -37,7 +37,6 @@ import { A11yModule } from '@angular/cdk/a11y';
 import { ToolbarComponent } from '../toolbar/toolbar.component';
 import { ContentService, NodesApiService } from '@alfresco/adf-content-services';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 
 @Component({
   imports: [
@@ -52,14 +51,7 @@ import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
   ],
   selector: 'aca-info-drawer',
   templateUrl: './info-drawer.component.html',
-  styleUrl: './info-drawer.component.scss',
-  encapsulation: ViewEncapsulation.None,
-  providers: [
-    {
-      provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
-      useValue: { appearance: 'fill', floatLabel: 'always' }
-    }
-  ]
+  encapsulation: ViewEncapsulation.None
 })
 export class InfoDrawerComponent implements OnChanges, OnInit, OnDestroy {
   @Input()