diff --git a/frontend/src/app/ui/admin/description-template/editor/components/section/description-template-editor-section.component.html b/frontend/src/app/ui/admin/description-template/editor/components/section/description-template-editor-section.component.html
index 459e0b42d..f50db9ec4 100644
--- a/frontend/src/app/ui/admin/description-template/editor/components/section/description-template-editor-section.component.html
+++ b/frontend/src/app/ui/admin/description-template/editor/components/section/description-template-editor-section.component.html
@@ -9,7 +9,7 @@
 		<mat-error *ngIf="form.get('title').hasError('backendError')">{{form.get('title').getError('backendError').message}}</mat-error> 
 		<mat-error *ngIf="form.get('title').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 	</mat-form-field>
-	<label class="heading col-12" [appFormFocus]="'sectionDescription'">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.SECTION-INFO.SECTION-DESCRIPTION' | translate}} </label>
+	<label class="heading col-12" [appFor]="'sectionDescription'">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.SECTION-INFO.SECTION-DESCRIPTION' | translate}} </label>
 	<div class="hint col-12">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.SECTION-INFO.SECTION-DESCRIPTION-HINT' | translate}}</div>
 	<div class="col-12">
 		<rich-text-editor-component [form]="form.get('description')"
diff --git a/frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.html b/frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.html
index a6e40d07d..dad63893c 100644
--- a/frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.html
+++ b/frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.html
@@ -58,7 +58,7 @@
 						</mat-form-field>
 					</div>
 					<div class="col-12">
-						<label class="heading" [appFormFocus]="'descriptionInput'">1.3 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-DESCRIPTION'| translate}}
+						<label class="heading" [appFor]="'descriptionInput'">1.3 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-DESCRIPTION'| translate}}
                             &nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
                         </label>
 						<div class="hint">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-DESCRIPTION-HINT'| translate}}</div>
@@ -86,7 +86,7 @@
 						</mat-form-field>
 					</div>
 					<div class="col-12">
-						<label class="heading" [appFormFocus]="'languageInput'">1.5 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-LANGUAGE'| translate}} 
+						<label class="heading" [appFor]="'languageInput'">1.5 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-LANGUAGE'| translate}} 
                             &nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
                         </label>
 						<div class="hint">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-LANGUAGE-HINT'| translate}}</div>
diff --git a/frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.html b/frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.html
index 51605e5ee..e104347ad 100644
--- a/frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.html
+++ b/frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.html
@@ -1,7 +1,7 @@
 <div *ngIf="!hideTitle" class="row">
 	<div class="col-12">
 		<div class="row title">
-			<label [appFormFocus]="path" *ngIf="fieldSet.title && !isChild" class="col-auto field-set toc-field-set-header" [id]="fieldSet.id" [ngClass]="{'focused': isAnchor}">
+			<label [appFor]="path" *ngIf="fieldSet.title && !isChild" class="col-auto field-set toc-field-set-header" [id]="fieldSet.id" [ngClass]="{'focused': isAnchor}">
 				{{path}}
 				{{fieldSet.title}}
             </label>
diff --git a/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.html b/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.html
index b7f4aed89..1959fe5de 100644
--- a/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.html
+++ b/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.html
@@ -92,7 +92,7 @@
 							</div>
 						</div>
 						<div class="row">
-							<label [appFormFocus]="'descriptionInput'" class="heading2 col-12">{{'PLAN-EDITOR.FIELDS.DESCRIPTION' | translate}}</label>
+							<label [appFor]="'descriptionInput'" class="heading2 col-12">{{'PLAN-EDITOR.FIELDS.DESCRIPTION' | translate}}</label>
 							<div class="col-12">
 								<rich-text-editor-component id="descriptionInput" [form]="formGroup.get('description')" placeholder="{{'PLAN-EDITOR.PLACEHOLDER.DESCRIPTION' | translate}}" [required]="false">
 								</rich-text-editor-component>
@@ -207,13 +207,13 @@
 												<div *ngFor="let field of section.fields; let j=index">
 													<div class="heading-wrapper row align-items-start" [id]="field.id">
 														<div class="col-auto">
-															<label [appFormFocus]="(i + 1)+'.'+(j + 1)" class="heading" *ngIf="!field.label && field.category === planBlueprintSectionFieldCategoryEnum.System">{{i + 1}}.{{j + 1}} {{enumUtils.toPlanBlueprintSystemFieldTypeString(field.systemFieldType)}}
+															<label [appFor]="(i + 1)+'.'+(j + 1)" class="heading" *ngIf="!field.label && field.category === planBlueprintSectionFieldCategoryEnum.System">{{i + 1}}.{{j + 1}} {{enumUtils.toPlanBlueprintSystemFieldTypeString(field.systemFieldType)}}
                                                                 <span *ngIf="field.required">&nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small></span>
                                                             </label>
-															<label [appFormFocus]="(i + 1)+'.'+(j + 1)" class="heading" *ngIf="!field.label && field.category === planBlueprintSectionFieldCategoryEnum.ReferenceType">{{i + 1}}.{{j + 1}} {{field.referenceType.name}}
+															<label [appFor]="(i + 1)+'.'+(j + 1)" class="heading" *ngIf="!field.label && field.category === planBlueprintSectionFieldCategoryEnum.ReferenceType">{{i + 1}}.{{j + 1}} {{field.referenceType.name}}
                                                                 <span *ngIf="field.required">&nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small></span>
                                                             </label>
-															<label [appFormFocus]="(i + 1)+'.'+(j + 1)" class="heading" *ngIf="field.label">{{i + 1}}.{{j + 1}} {{field.label}}
+															<label [appFor]="(i + 1)+'.'+(j + 1)" class="heading" *ngIf="field.label">{{i + 1}}.{{j + 1}} {{field.label}}
                                                                 <span *ngIf="field.required">&nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small></span>
                                                             </label>
 														</div>
diff --git a/frontend/src/app/ui/user-profile/user-profile.component.html b/frontend/src/app/ui/user-profile/user-profile.component.html
index 43f56fddd..6e15d3c79 100644
--- a/frontend/src/app/ui/user-profile/user-profile.component.html
+++ b/frontend/src/app/ui/user-profile/user-profile.component.html
@@ -40,17 +40,16 @@
 					<div class="row mb-5">
 						<div class="col">
 							<div class="row">
-								<div class="col-auto mb-1 field-title">{{'USER-PROFILE.SETTINGS.NAME' | translate}} 
+								<label class="col-auto mb-1 field-title" for="nameInput">{{'USER-PROFILE.SETTINGS.NAME' | translate}} 
                                     &nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
-                                </div>
+                                </label>
 							</div>
 							<div class="row">
 								<div class="col name-form">
 									<mat-form-field>
-										<input matInput type="text" name="name" placeholder="{{'USER-PROFILE.SETTINGS.NAME' | translate}}" [formControl]="formGroup.get('name')">
+										<input id="nameInput" matInput type="text" name="name" placeholder="{{'USER-PROFILE.SETTINGS.NAME' | translate}}" [formControl]="formGroup.get('name')" required>
                                         <mat-error *ngIf="formGroup.get('name').hasError('backendError')">{{formGroup.get('name').getError('backendError').message}}</mat-error>
                                         <mat-error *ngIf="formGroup.get('name').hasError('required')">{{'COMMONS.VALIDATION.REQUIRED' | translate}}</mat-error>
-
 									</mat-form-field>
 								</div>
 							</div>
@@ -95,12 +94,12 @@
 					<div class="row mb-5">
 						<div class="col-12 col-lg-6">
 							<div class="row">
-								<div class="col-auto mb-1 field-title">{{'USER-PROFILE.SETTINGS.ORGANIZATION' | translate}}</div>
+								<label for="organizationInput" class="col-auto mb-1 field-title">{{'USER-PROFILE.SETTINGS.ORGANIZATION' | translate}}</label>
 							</div>
 							<div class="row">
 								<div class="col organization-form">
 									<mat-form-field class="w-100">
-										<app-single-auto-complete placeholder="{{'PLAN-EDITOR.PLACEHOLDER.ORGANIZATION' | translate}}" [formControl]="this.formGroup.get('additionalInfo').get('organization')" [configuration]="organisationsSingleAutoCompleteConfiguration"></app-single-auto-complete>
+										<app-single-auto-complete [id]="'organizationInput'" placeholder="{{'PLAN-EDITOR.PLACEHOLDER.ORGANIZATION' | translate}}" [formControl]="this.formGroup.get('additionalInfo').get('organization')" [configuration]="organisationsSingleAutoCompleteConfiguration"></app-single-auto-complete>
 									</mat-form-field>
 								</div>
 							</div>
@@ -108,12 +107,12 @@
 						<!-- Role -->
 						<div class="col-12 col-lg-6">
 							<div class="row">
-								<div class="col-auto mb-1 field-title">{{'USER-PROFILE.SETTINGS.ROLE' | translate}}</div>
+								<label [appFor]="'roleInput'" class="col-auto mb-1 field-title">{{'USER-PROFILE.SETTINGS.ROLE' | translate}}</label>
 							</div>
 							<div class="row">
 								<div class="col role-form">
 									<mat-form-field class="w-100">
-										<mat-select placeholder="{{'USER-PROFILE.SETTINGS.SELECT-ROLE' | translate}}" [formControl]="this.formGroup.get('additionalInfo').get('roleOrganization')">
+										<mat-select id="roleInput" placeholder="{{'USER-PROFILE.SETTINGS.SELECT-ROLE' | translate}}" [formControl]="this.formGroup.get('additionalInfo').get('roleOrganization')">
 											<mat-option [value]="roleOrganizationEnum.Faculty">{{enumUtils.toRoleOrganizationString(roleOrganizationEnum.Faculty)}}</mat-option>
 											<mat-option [value]="roleOrganizationEnum.Librarian">{{enumUtils.toRoleOrganizationString(roleOrganizationEnum.Librarian)}}</mat-option>
 											<mat-option [value]="roleOrganizationEnum.Researcher">{{enumUtils.toRoleOrganizationString(roleOrganizationEnum.Researcher)}}</mat-option>
@@ -138,16 +137,16 @@
 					<div class="row mb-5">
 						<div class="col-12 col-lg-4">
 							<div class="row">
-								<div class="col-auto mb-1 field-title">{{'USER-PROFILE.SETTINGS.TIMEZONE' | translate}} 
+								<label for="timeZoneInput" class="col-auto mb-1 field-title">{{'USER-PROFILE.SETTINGS.TIMEZONE' | translate}} 
                                     &nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
-                                </div>
+                                </label>
 							</div>
 							<div class="row">
 								<div class="col timezone-form">
 									<mat-form-field class="w-100">
-										<input matInput autocomplete="off" placeholder="{{'USER-PROFILE.SETTINGS.TIMEZONE' | translate}}" [matAutocomplete]="timezoneAuto" type="text" name="timezone" [formControl]="formGroup.get('additionalInfo').get('timezone')">
+										<input id="timeZoneInput" matInput autocomplete="off" placeholder="{{'USER-PROFILE.SETTINGS.TIMEZONE' | translate}}" [matAutocomplete]="timezoneAuto" type="text" name="timezone" [formControl]="formGroup.get('additionalInfo').get('timezone')" required>
 										<mat-error *ngIf="formGroup.get('additionalInfo').get('timezone').hasError('backendError')">{{formGroup.get('additionalInfo').get('timezone').getError('backendError').message}}</mat-error>
-                                        <mat-error *ngIf="formGroup.get('additionalInfo').get('timezone').hasError('backendError')">{{formGroup.get('additionalInfo').get('timezone').getError('backendError').message}}</mat-error>
+                                        <mat-error *ngIf="formGroup.get('additionalInfo').get('timezone').hasError('required')">{{'COMMONS.VALIDATION.REQUIRED' | translate}}</mat-error>
 										<mat-autocomplete autoActiveFirstOption #timezoneAuto="matAutocomplete">
 											<mat-option *ngFor="let timezone of filteredTimezones" [value]="timezone">{{timezone | timezoneInfoDisplay}}</mat-option>
 										</mat-autocomplete>
@@ -158,14 +157,14 @@
 						<!-- Culture -->
 						<div class="col-12 col-lg-4">
 							<div class="row">
-								<div class="col-auto mb-1 field-title">{{'USER-PROFILE.SETTINGS.CULTURE' | translate}} 
+								<label for="cultureInput" class="col-auto mb-1 field-title">{{'USER-PROFILE.SETTINGS.CULTURE' | translate}} 
                                     &nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
-                                </div>
+                                </label>
 							</div>
 							<div class="row">
 								<div class="col culture-form">
 									<mat-form-field class="w-100">
-										<input matInput autocomplete="off" placeholder="{{'USER-PROFILE.SETTINGS.CULTURE' | translate}}" [matAutocomplete]="cultureAuto" type="text" name="culture" [formControl]="formGroup.get('additionalInfo').get('culture')">
+										<input id="cultureInput" matInput autocomplete="off" placeholder="{{'USER-PROFILE.SETTINGS.CULTURE' | translate}}" [matAutocomplete]="cultureAuto" type="text" name="culture" [formControl]="formGroup.get('additionalInfo').get('culture')" required>
 										<mat-error *ngIf="formGroup.get('additionalInfo').get('culture').hasError('backendError')">{{formGroup.get('additionalInfo').get('culture').getError('backendError').message}}</mat-error>
 										<mat-error *ngIf="formGroup.get('additionalInfo').get('culture').hasError('required')">{{'COMMONS.VALIDATION.REQUIRED' | translate}}</mat-error>
 										<mat-autocomplete autoActiveFirstOption #cultureAuto="matAutocomplete" [displayWith]="displayCultureFn.bind(this)">
@@ -178,15 +177,15 @@
 						<!-- Language -->
 						<div class="col-12 col-lg-4">
 							<div class="row">
-								<div class="col-auto mb-1 field-title">{{'USER-PROFILE.SETTINGS.LANGUAGE' | translate}} 
+								<label [appFor]="'languageInput'" class="col-auto mb-1 field-title">{{'USER-PROFILE.SETTINGS.LANGUAGE' | translate}} 
                                     &nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
-                                </div>
+                                </label>
 							</div>
 							<div class="row">
 								<div class="col language-form">
 
 									<mat-form-field class="w-100">
-										<mat-select [formControl]="this.formGroup.get('additionalInfo').get('language')" name="language">
+										<mat-select id="languageInput" [formControl]="this.formGroup.get('additionalInfo').get('language')" name="language">
 											<mat-option *ngFor="let language of languages" [value]="language">
 												{{ "GENERAL.LANGUAGES."+ language | translate }}
 											</mat-option>
diff --git a/frontend/src/app/ui/user-profile/user-profile.module.ts b/frontend/src/app/ui/user-profile/user-profile.module.ts
index a861551e8..386e536d3 100644
--- a/frontend/src/app/ui/user-profile/user-profile.module.ts
+++ b/frontend/src/app/ui/user-profile/user-profile.module.ts
@@ -8,6 +8,7 @@ import { AddAccountDialogModule } from './add-account/add-account-dialog.module'
 import { UserProfileComponent } from './user-profile.component';
 import { UserProfileRoutingModule } from './user-profile.routing';
 import { UserProfileNotifierListModule } from '@notification-service/ui/user-profile/notifier-list/user-profile-notifier-list-editor.module';
+import { FormFocusDirective } from '@common/forms/form-focus.directive';
 
 @NgModule({
     imports: [
@@ -18,7 +19,8 @@ import { UserProfileNotifierListModule } from '@notification-service/ui/user-pro
         AutoCompleteModule,
         AddAccountDialogModule,
         FormValidationErrorsDialogModule,
-        UserProfileNotifierListModule
+        UserProfileNotifierListModule,
+        FormFocusDirective
     ],
     declarations: [
         UserProfileComponent
diff --git a/frontend/src/common/forms/form-focus.directive.ts b/frontend/src/common/forms/form-focus.directive.ts
index 4e15645e1..bf5c61958 100644
--- a/frontend/src/common/forms/form-focus.directive.ts
+++ b/frontend/src/common/forms/form-focus.directive.ts
@@ -1,17 +1,17 @@
 import { Directive, HostListener, Input } from '@angular/core';
 
 @Directive({
-  selector: '[appFormFocus]',
+  selector: '[appFor]',
   standalone: true
 })
 export class FormFocusDirective { //todo it doesn't work on rich-text-editor inputs
-    @Input() appFormFocus: string;
+    @Input() appFor: string;
     constructor() { }
     @HostListener('click') onLabelClick(){
-        if(this.appFormFocus) {
-            document.getElementById(this.appFormFocus)?.focus();
-            (document.getElementById(this.appFormFocus)?.querySelector(".angular-editor-textarea") as HTMLElement)?.focus(); //for rich-text-editor 
-            document.getElementById(`${this.appFormFocus}-input`)?.focus(); //for any mat component that nests the <input> 
+        if(this.appFor) {
+            document.getElementById(this.appFor)?.focus();
+            (document.getElementById(this.appFor)?.querySelector(".angular-editor-textarea") as HTMLElement)?.focus(); //for rich-text-editor 
+            document.getElementById(`${this.appFor}-input`)?.focus(); //for any mat component that nests the <input> 
         }
     }
 }
diff --git a/frontend/src/notification-service/ui/user-profile/notifier-list/user-profile-notifier-list-editor.component.html b/frontend/src/notification-service/ui/user-profile/notifier-list/user-profile-notifier-list-editor.component.html
index 84870091f..ac55b19e1 100644
--- a/frontend/src/notification-service/ui/user-profile/notifier-list/user-profile-notifier-list-editor.component.html
+++ b/frontend/src/notification-service/ui/user-profile/notifier-list/user-profile-notifier-list-editor.component.html
@@ -6,7 +6,7 @@
 					<h3 mat-subheader>{{notificationServiceEnumUtils.toNotificationTypeString(notificationType)}}</h3>
 					<mat-list-item *ngFor="let contactType of availableNotifiers[notificationType]" cdkDrag>
 						<div class="d-flex align-items-center">
-							<mat-icon matListIcon cdkDragHandle>unfold_more</mat-icon>
+							<mat-icon matListIcon cdkDragHandle class="pointer">unfold_more</mat-icon>
 							{{notificationServiceEnumUtils.toContactTypeString(contactType)}}
 						</div>
 					</mat-list-item>