diff --git a/src/app/p_resources/admin/catalogManagement/edit-resource-spec/edit-resource-spec-characteristics/edit-resource-spec-characteristics.component.html b/src/app/p_resources/admin/catalogManagement/edit-resource-spec/edit-resource-spec-characteristics/edit-resource-spec-characteristics.component.html
index 3ce26fd21714af112704dc88527c8c96b62e7a4b..98769088dc9f2bc891f5294b83b1c015074ab899 100644
--- a/src/app/p_resources/admin/catalogManagement/edit-resource-spec/edit-resource-spec-characteristics/edit-resource-spec-characteristics.component.html
+++ b/src/app/p_resources/admin/catalogManagement/edit-resource-spec/edit-resource-spec-characteristics/edit-resource-spec-characteristics.component.html
@@ -116,16 +116,13 @@
                   [formGroupName]="i" class="row align-items-center justify-content-center characteristic-value-container" [@fadeIn] >
                     <ng-template [ngIf]="!isCharValueBlockExpanded[i]" [ngIfElse]="blockExpanded">
                         <div formGroupName="value" class="col-lg-6 mt-2">
-                            <div class="row">
+                            <div class="row align-items-center">
                                 <mat-form-field class="col-lg-6">
                                     <mat-label>Alias</mat-label>
                                     <input matInput formControlName="alias">
                                 </mat-form-field>
-                                <mat-form-field class="col-lg-6">
-                                    <mat-label>Value</mat-label>
-                                    <input matInput formControlName="value">
-                                </mat-form-field>
-                
+                                <app-characteristic-input ngDefaultControl formControlName="value" class="col-lg-6"
+                                    [valueType]="editFormCharacteristic.controls.valueType.value"></app-characteristic-input>
                             </div>
                         </div>
                 
@@ -203,7 +200,7 @@
                         <div class="col-md-12 order-2 order-lg-6" formGroupName="value">
                             <mat-form-field>
                                 <mat-label>Value</mat-label>
-                                <textarea matTextareaAutosize="true" matAutosizeMaxRows="4" matInput formControlName="value"></textarea>
+                                <textarea cdkTextareaAutosize #autosize="cdkTextareaAutosize" cdkAutosizeMinRows="1" cdkAutosizeMaxRows="15" matInput formControlName="value"></textarea>
                                 <!-- <input matInput formControlName="value"> -->
                             </mat-form-field>
                         </div>
diff --git a/src/app/p_resources/admin/catalogManagement/edit-resource-spec/edit-resource-spec.component.html b/src/app/p_resources/admin/catalogManagement/edit-resource-spec/edit-resource-spec.component.html
index 2944cf1197adb7855b16756d509ee84775d6bf8e..cf3abd032f4f1da9fef526d1e1a28d61fa3c7e5e 100644
--- a/src/app/p_resources/admin/catalogManagement/edit-resource-spec/edit-resource-spec.component.html
+++ b/src/app/p_resources/admin/catalogManagement/edit-resource-spec/edit-resource-spec.component.html
@@ -149,13 +149,13 @@
                                         <div *ngIf="editForm.controls.isBundle.value">
                                             <div class="filter-container row align-items-center justify-content-center">
                                                 <div class="col-md-10">{{spec.resourceSpecRelationship.length}} related Resource Specification(s) assigned</div>
-                                        
+
                                                 <div class="col-md-2 my-md-0 my-2">
                                                     <button type="button" class="btn btn-success btn-sm btn-block"
                                                         (click)="openAssignSpecRelationshipDialog()"><i class="fas fa-cart-arrow-down mr-2"></i>Assign</button>
                                                 </div>
                                             </div>
-                                        
+
                                             <div class="row mt-3">
                                                 <mat-form-field *ngIf="spec?.resourceSpecRelationship.length > 0" class="col-12">
                                                     <mat-label>Apply Filter to related Resource Specifications...
@@ -163,7 +163,7 @@
                                                     <input matInput [formControl]="resourceRelatedSpecsFilterCtrl">
                                                 </mat-form-field>
                                             </div>
-                                        
+
                                             <div *ngFor="let relatedSpec of filteredRelatedSpecs$ | async" class="spec-relationship-container pb-2" [@fadeIn]>
                                                 <a routerLink='/{{appService.portalDomain}}/resource_spec_update/{{relatedSpec.id}}'>{{relatedSpec.name}}</a>
                                                 <button class="btn btn-warning btn-sm"
@@ -257,10 +257,12 @@
                                                           <span
                                                               *ngFor="let val of element.resourceSpecCharacteristicValue; let last = last"
                                                               [class.hidden]="!val || !val.isDefault">
-                                                              <span
-                                                                  *ngIf="val && val.isDefault">{{val.value.value}}
+                                                              <span *ngIf="val && val.isDefault">
+                                                                  <app-characteristic-value
+                                                                    [value]="val.value.value"
+                                                                    [valueType]="element.valueType"></app-characteristic-value>
                                                                   <span
-                                                                      *ngIf="val.value.alias">({{val.value.alias}})</span>
+                                                                      *ngIf="val.value.alias"> ({{val.value.alias}})</span>
                                                                   <!-- <span class="comma-separator">, </span> -->
                                                               </span>
                                                               <br>
diff --git a/src/app/p_resources/admin/inventoryManagement/preview-resource/preview-resource.component.html b/src/app/p_resources/admin/inventoryManagement/preview-resource/preview-resource.component.html
index 5dab83e7501c57fab5cb5ad5e525291a82d43afd..9cac265f9bb952af4b039b54f050a8b44cf2d3a3 100644
--- a/src/app/p_resources/admin/inventoryManagement/preview-resource/preview-resource.component.html
+++ b/src/app/p_resources/admin/inventoryManagement/preview-resource/preview-resource.component.html
@@ -223,8 +223,10 @@
 
                                 <ng-container *ngSwitchDefault>
                                   <td class="align-middle">
-                                    {{ specCharacteristic.value.value }}
-                                    <span *ngIf="specCharacteristic.value.alias">({{
+                                    <app-characteristic-value
+                                      [value]="specCharacteristic.value.value"
+                                      [valueType]="specCharacteristic.valueType"></app-characteristic-value>
+                                    <span *ngIf="specCharacteristic.value.alias"> ({{
                                       specCharacteristic.value.alias
                                       }})</span>
                                   </td>
@@ -301,4 +303,4 @@
       </div>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/p_services/admin/catalogManagement/edit-service-specs/edit-service-spec-characteristics/edit-service-spec-characteristics.component.html b/src/app/p_services/admin/catalogManagement/edit-service-specs/edit-service-spec-characteristics/edit-service-spec-characteristics.component.html
index e3df65eae46833c4be3ee710ebd28bf44e517e3f..07e46dff00dc7a7f0143bffab61269b54e09581b 100644
--- a/src/app/p_services/admin/catalogManagement/edit-service-specs/edit-service-spec-characteristics/edit-service-spec-characteristics.component.html
+++ b/src/app/p_services/admin/catalogManagement/edit-service-specs/edit-service-spec-characteristics/edit-service-spec-characteristics.component.html
@@ -118,16 +118,13 @@
                     
                         <ng-template [ngIf]="!isCharValueBlockExpanded[i]" [ngIfElse]="blockExpanded">
                             <div formGroupName="value" class="col-lg-6 mt-2">
-                                <div class="row">
+                                <div class="row align-items-center">
                                     <mat-form-field class="col-lg-6">
                                         <mat-label>Alias</mat-label>
                                         <input matInput formControlName="alias">
                                     </mat-form-field>
-                                    <mat-form-field class="col-lg-6">
-                                        <mat-label>Value</mat-label>
-                                        <input matInput formControlName="value">
-                                    </mat-form-field>
-                    
+                                    <app-characteristic-input ngDefaultControl formControlName="value" class="col-lg-6"
+                                        [valueType]="editFormCharacteristic.controls.valueType.value"></app-characteristic-input>
                                 </div>
                             </div>
                     
@@ -205,7 +202,7 @@
                             <div class="col-md-12 order-2 order-lg-6" formGroupName="value">
                                 <mat-form-field>
                                     <mat-label>Value</mat-label>
-                                    <textarea matTextareaAutosize="true" matAutosizeMaxRows="4" matInput formControlName="value"></textarea>
+                                    <textarea cdkTextareaAutosize #autosize="cdkTextareaAutosize" cdkAutosizeMinRows="1" cdkAutosizeMaxRows="15" matInput formControlName="value"></textarea>
                                     <!-- <input matInput formControlName="value"> -->
                                 </mat-form-field>
                             </div>
diff --git a/src/app/p_services/admin/catalogManagement/edit-service-specs/edit-service-specs.component.html b/src/app/p_services/admin/catalogManagement/edit-service-specs/edit-service-specs.component.html
index 4f6bd542f020cda2b58bfd5392bf3b533065ceac..bd8dc774f76eab895513052637f34c76a5328ee6 100644
--- a/src/app/p_services/admin/catalogManagement/edit-service-specs/edit-service-specs.component.html
+++ b/src/app/p_services/admin/catalogManagement/edit-service-specs/edit-service-specs.component.html
@@ -119,13 +119,13 @@
                                                     </div>
 
                                                     <div class="col-md-12 mt-4" [@fadeIn] *ngIf="currentSpecRelationshipsUrl">
-                                                        <div>Relationships Overview</div>                                                       
+                                                        <div>Relationships Overview</div>
                                                         <img [src]="currentSpecRelationshipsUrl" alt="Relationship graph not available" class="img-fluid">
                                                     </div>
-                                                    
+
                                                 </div>
 
-                                                
+
                                                 <div class="container-fluid">
                                                     <div class="row justify-content-end">
                                                         <button type="submit" class="btn btn-primary"
@@ -152,7 +152,7 @@
                                             <div  *ngIf="editForm.controls.isBundle.value">
                                                 <div class="filter-container row align-items-center justify-content-between">
                                                     <div class="col-md-10">{{spec.serviceSpecRelationship.length}} related Service Specification(s) assigned</div>
-                                                      
+
                                                     <div class="col-md-2 my-md-0 my-2">
                                                         <button type="button" class="btn btn-success btn-sm btn-block"
                                                             (click)="openAssignServiceSpecRelationshipDialog()"><i
@@ -168,7 +168,7 @@
                                                         <input matInput [formControl]="relatedServiceSpecsFilterCtrl">
                                                     </mat-form-field>
                                                 </div>
-    
+
                                                 <div *ngFor="let relatedSpec of filteredRelatedServiceSpecs$ | async"
                                                     class="spec-relationship-container pb-2" [@fadeIn]>
                                                     <a routerLink="/services/service_spec_update/{{relatedSpec.id}}">{{relatedSpec.name}}</a>
@@ -193,7 +193,7 @@
                                         <div class="card-body">
                                             <div class="filter-container row align-items-center justify-content-between">
                                                 <div class="col-md-10">{{spec.resourceSpecification.length}} related Resource Specification(s) assigned</div>
-                                                  
+
                                                 <div class="col-md-2 my-md-0 my-2">
                                                     <button type="button" class="btn btn-success btn-sm btn-block"
                                                         (click)="openAssignResourceSpecRelationshipDialog()"><i
@@ -303,10 +303,11 @@
                                                             <span
                                                                 *ngFor="let val of element.serviceSpecCharacteristicValue; let last = last"
                                                                 [class.hidden]="!val || !val.isDefault">
-                                                                <span
-                                                                    *ngIf="val && val.isDefault">{{val.value.value}}
-                                                                    <span
-                                                                        *ngIf="val.value.alias">({{val.value.alias}})</span>
+                                                                <span *ngIf="val && val.isDefault">
+                                                                    <app-characteristic-value
+                                                                      [value]="val.value.value"
+                                                                      [valueType]="element.valueType"></app-characteristic-value>
+                                                                    <span *ngIf="val.value.alias"> ({{val.value.alias}})</span>
                                                                     <!-- <span class="comma-separator">, </span> -->
                                                                 </span>
                                                                 <br>
@@ -493,7 +494,7 @@
                                                         <i class="fas fa-plus-circle mr-2"></i>Create new rule
                                                     </button>
                                                 </div>
-                                            
+
                                             </div>
                                             <div class="mb-3">
                                                 <mat-chip-list>
@@ -535,7 +536,7 @@
                                                         <td mat-cell *matCellDef="let element">
                                                             {{element.priority}} </td>
                                                     </ng-container>
-                                                   
+
 
                                                     <ng-container matColumnDef="actions">
                                                         <th mat-header-cell *matHeaderCellDef>Actions</th>
@@ -570,7 +571,7 @@
 
 
 
-                                         </div>   
+                                         </div>
                                         <div class="card-footer"></div>
                                 </div>
                                 <!-- END OF LCM Tab -->
@@ -583,4 +584,4 @@
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/p_services/admin/orderManagement/preview-service-order/edit-service-order-items/edit-orders-service-spec-characteristics/edit-orders-service-spec-characteristics.component.html b/src/app/p_services/admin/orderManagement/preview-service-order/edit-service-order-items/edit-orders-service-spec-characteristics/edit-orders-service-spec-characteristics.component.html
index bfd45da9f13ca2ff22b6ede0ef086414cbfc3ec6..6629057b8b93868d3be052e6bdec7ae63d44c1c6 100644
--- a/src/app/p_services/admin/orderManagement/preview-service-order/edit-service-order-items/edit-orders-service-spec-characteristics/edit-orders-service-spec-characteristics.component.html
+++ b/src/app/p_services/admin/orderManagement/preview-service-order/edit-service-order-items/edit-orders-service-spec-characteristics/edit-orders-service-spec-characteristics.component.html
@@ -47,15 +47,12 @@
                     </ng-container>
 
                     <ng-container *ngSwitchDefault>
-                        <mat-form-field appearance="outline">
-                            <mat-label>Custom Value</mat-label>
-                            <!-- <input matInput [(ngModel)]="charForm.get('value').value.value"
-                                [ngModelOptions]="{standalone: true}"> -->
-
-                            <textarea matTextareaAutosize="true" matAutosizeMaxRows="4" matInput [(ngModel)]="charForm.get('value').value.value"
-                            [ngModelOptions]="{standalone: true}"></textarea>
-
-                        </mat-form-field>
+                        <app-characteristic-input ngDefaultControl
+                                                  appearance="outline"
+                                                  label="Custom Value"
+                                                  [(ngModel)]="charForm.get('value').value.value"
+                                                  [ngModelOptions]="{standalone: true}"
+                                                  [valueType]="charForm.get('valueType').value"></app-characteristic-input>
                     </ng-container>
 
                     <ng-template #iterables>
diff --git a/src/app/p_services/admin/orderManagement/preview-service-order/preview-service-order.component.html b/src/app/p_services/admin/orderManagement/preview-service-order/preview-service-order.component.html
index 950134db23348996a1344bf7092a091fe6e3e606..d50e1adef4e5b50e7e1ac4d47fee43c36a073603 100644
--- a/src/app/p_services/admin/orderManagement/preview-service-order/preview-service-order.component.html
+++ b/src/app/p_services/admin/orderManagement/preview-service-order/preview-service-order.component.html
@@ -391,8 +391,10 @@
                                                     
                                                                                 <ng-container *ngSwitchDefault>
                                                                                     <td class="align-middle">
-                                                                                        {{specCharacteristic.value.value}} <span *ngIf="specCharacteristic.value.alias">({{specCharacteristic.value.alias}})</span> 
-                        
+                                                                                        <app-characteristic-value
+                                                                                          [value]="specCharacteristic.value.value"
+                                                                                          [valueType]="specCharacteristic.valueType"></app-characteristic-value>
+                                                                                        <span *ngIf="specCharacteristic.value.alias"> ({{specCharacteristic.value.alias}})</span> 
                                                                                     </td>
                     
                                                                                 </ng-container>
@@ -515,4 +517,4 @@
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/p_services/admin/serviceActivationAndConfiguration/edit-service-characteristics/edit-service-characteristics.component.html b/src/app/p_services/admin/serviceActivationAndConfiguration/edit-service-characteristics/edit-service-characteristics.component.html
index 11a47b295f901639c28e6caae6262fc763d6748c..8700907bd36e961010f8e79253b9026c4bf20265 100644
--- a/src/app/p_services/admin/serviceActivationAndConfiguration/edit-service-characteristics/edit-service-characteristics.component.html
+++ b/src/app/p_services/admin/serviceActivationAndConfiguration/edit-service-characteristics/edit-service-characteristics.component.html
@@ -60,13 +60,12 @@
                     </ng-container>
 
                     <ng-container *ngSwitchDefault>
-                        <mat-form-field appearance="outline">
-                            <mat-label>Custom Value</mat-label>
-                            <!-- <input matInput [(ngModel)]="charForm.get('value').value.value"
-                                [ngModelOptions]="{standalone: true}"> -->
-                            <textarea matTextareaAutosize="true" matAutosizeMaxRows="4" matInput [(ngModel)]="charForm.get('value').value.value"
-                                [ngModelOptions]="{standalone: true}"></textarea>
-                        </mat-form-field>
+                        <app-characteristic-input ngDefaultControl
+                                                  label="Custom Value"
+                                                  appearance="outline"
+                                                  [(ngModel)]="charForm.get('value').value.value"
+                                                  [ngModelOptions]="{standalone: true}"
+                                                  [valueType]="charForm.get('valueType').value"></app-characteristic-input>
                     </ng-container>
 
                     <ng-template #iterables>
@@ -194,4 +193,4 @@
             <button type="submit" class="btn btn-success m-2" (click)="submitDialog()">Submit</button>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/p_services/admin/serviceActivationAndConfiguration/preview-service/preview-service.component.html b/src/app/p_services/admin/serviceActivationAndConfiguration/preview-service/preview-service.component.html
index fc1630d5f3ea978d767bdec37f5fb1aa179be7a2..99c7cc0f2d7351c0d9b99949919bbbe89b638b89 100644
--- a/src/app/p_services/admin/serviceActivationAndConfiguration/preview-service/preview-service.component.html
+++ b/src/app/p_services/admin/serviceActivationAndConfiguration/preview-service/preview-service.component.html
@@ -292,8 +292,12 @@
 
                                                               <ng-container *ngSwitchDefault>
                                                                   <td class="align-middle">
-                                                                      {{specCharacteristic.value.value}} <span
-                                                                          *ngIf="specCharacteristic.value.alias">({{specCharacteristic.value.alias}})</span>
+                                                                      <app-characteristic-value
+                                                                        [value]="specCharacteristic.value.value"
+                                                                        [valueType]="specCharacteristic.valueType"></app-characteristic-value>
+                                                                      <span *ngIf="specCharacteristic.value.alias"> ({{
+                                                                        specCharacteristic.value.alias
+                                                                        }})</span>
                                                                   </td>
 
                                                               </ng-container>
diff --git a/src/app/p_services/orderCheckout/service-order-checkout/service-order-checkout.component.html b/src/app/p_services/orderCheckout/service-order-checkout/service-order-checkout.component.html
index 52ba9cc0b073e96479466362b157de6d1935cbe3..7e774287e361bac27396b1269f7fe64765305a50 100644
--- a/src/app/p_services/orderCheckout/service-order-checkout/service-order-checkout.component.html
+++ b/src/app/p_services/orderCheckout/service-order-checkout/service-order-checkout.component.html
@@ -67,11 +67,11 @@
                                     </ng-container>
         
                                     <ng-container *ngSwitchDefault>
-                                        <mat-form-field >
-                                            <mat-label>Custom Value</mat-label>
-                                            <input matInput [(ngModel)]="charForm.get('value').value[0].value.value"
-                                                [ngModelOptions]="{standalone: true}">
-                                        </mat-form-field>
+                                        <app-characteristic-input ngDefaultControl
+                                                                  label="Custom Value"
+                                                                  [(ngModel)]="charForm.get('value').value[0].value.value"
+                                                                  [ngModelOptions]="{standalone: true}"
+                                                                  [valueType]="charForm.get('valueType').value"></app-characteristic-input>
                                     </ng-container>
         
                                     <ng-template #iterables>
@@ -218,4 +218,4 @@
         </div>
     </div> 
 
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/shared.module.ts b/src/app/shared.module.ts
index 75e8f5386812d6156ecebe79913adc91bf279b16..3c25ab5f836fed7118a833a9aba64ab9fefaa847 100644
--- a/src/app/shared.module.ts
+++ b/src/app/shared.module.ts
@@ -26,6 +26,8 @@ import { DeleteOrganizationComponent } from './shared/components/partyManagement
 import { ListIndividualsComponent } from './shared/components/partyManagement/list-individuals/list-individuals.component';
 import { EditIndividualsComponent } from './shared/components/partyManagement/edit-individuals/edit-individuals.component';
 import { DeleteIndividualComponent } from './shared/components/partyManagement/delete-individual/delete-individual.component';
+import { CharacteristicInputComponent } from './shared/components/characteristicManagement/characteristic-input/characteristic-input.component';
+import { CharacteristicValueComponent } from './shared/components/characteristicManagement/characteristic-value/characteristic-value.component';
 import { jsonParsePipe } from './shared/pipes/jsonParsePipe';
 
 
@@ -78,7 +80,9 @@ const routes: Routes = [
         ListIndividualsComponent,
         EditIndividualsComponent,
         DeleteIndividualComponent,
-        AssistantComponent
+        AssistantComponent,
+        CharacteristicInputComponent,
+        CharacteristicValueComponent
     ],
     imports: [
         RouterModule.forChild(routes),
@@ -139,6 +143,8 @@ const routes: Routes = [
         ListIndividualsComponent,
         EditIndividualsComponent,
         DeleteIndividualComponent,
+        CharacteristicInputComponent,
+        CharacteristicValueComponent,
         FormsModule,
         ReactiveFormsModule,
         MatTableModule,
diff --git a/src/app/shared/components/characteristicManagement/characteristic-input/characteristic-input.component.html b/src/app/shared/components/characteristicManagement/characteristic-input/characteristic-input.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..7fade0032a4d8624668bc09e2e5466037070506b
--- /dev/null
+++ b/src/app/shared/components/characteristicManagement/characteristic-input/characteristic-input.component.html
@@ -0,0 +1,36 @@
+<!-- <mat-form-field> must be redefined for each case, because otherwise the
+     material selectors don't function correctly -->
+<ng-container [ngSwitch]="valueType">
+    <ng-container *ngSwitchCase="'SECRET'">
+        <mat-form-field [appearance]="appearance">
+            <mat-label>{{ label }}</mat-label>
+
+            <input matInput [formControl]="ngControl.control" [attr.type]="exposeSecret ? 'text' : 'password'">
+            <button mat-icon-button matSuffix (click)="exposeSecret = !exposeSecret">
+                <mat-icon>{{exposeSecret ? 'visibility_off' : 'visibility'}}</mat-icon>
+            </button>
+        </mat-form-field>
+    </ng-container>
+
+    <ng-container *ngSwitchCase="'LONGTEXT'">
+        <mat-form-field [appearance]="appearance">
+            <mat-label>{{ label }}</mat-label>
+
+            <textarea matInput 
+                cdkTextareaAutosize
+                #autosize="cdkTextareaAutosize"
+                cdkAutosizeMinRows="1"
+                cdkAutosizeMaxRows="6"
+                [formControl]="ngControl.control">
+            </textarea>
+        </mat-form-field>
+    </ng-container>
+
+    <ng-container *ngSwitchDefault>
+        <mat-form-field [appearance]="appearance">
+            <mat-label>{{ label }}</mat-label>
+
+            <input matInput [formControl]="ngControl.control" type="text">
+        </mat-form-field>
+    </ng-container>
+</ng-container>
diff --git a/src/app/shared/components/characteristicManagement/characteristic-input/characteristic-input.component.scss b/src/app/shared/components/characteristicManagement/characteristic-input/characteristic-input.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/app/shared/components/characteristicManagement/characteristic-input/characteristic-input.component.spec.ts b/src/app/shared/components/characteristicManagement/characteristic-input/characteristic-input.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a70ee91346c2f0b4ea2821995ae94c9d4f177d2f
--- /dev/null
+++ b/src/app/shared/components/characteristicManagement/characteristic-input/characteristic-input.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CharacteristicInputComponent } from './characteristic-input.component';
+
+describe('CharacteristicInputComponent', () => {
+  let component: CharacteristicInputComponent;
+  let fixture: ComponentFixture<CharacteristicInputComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CharacteristicInputComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CharacteristicInputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/components/characteristicManagement/characteristic-input/characteristic-input.component.ts b/src/app/shared/components/characteristicManagement/characteristic-input/characteristic-input.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5530d877a7a07bb16d9e391d91424526752ef71a
--- /dev/null
+++ b/src/app/shared/components/characteristicManagement/characteristic-input/characteristic-input.component.ts
@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+import { NgControl } from '@angular/forms';
+
+@Component({
+  selector: 'app-characteristic-input',
+  templateUrl: './characteristic-input.component.html',
+  styleUrls: ['./characteristic-input.component.scss'],
+})
+export class CharacteristicInputComponent {
+  @Input() valueType: string;
+  @Input() label: string = "Value";
+
+  @Input() appearance: string;
+
+  exposeSecret: boolean = false;
+
+  constructor(public ngControl: NgControl) {
+  }
+}
diff --git a/src/app/shared/components/characteristicManagement/characteristic-value/characteristic-value.component.html b/src/app/shared/components/characteristicManagement/characteristic-value/characteristic-value.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..698ee18e382edc27e76f06bc8ccc8cb14339464e
--- /dev/null
+++ b/src/app/shared/components/characteristicManagement/characteristic-value/characteristic-value.component.html
@@ -0,0 +1,6 @@
+<span>
+    <span>{{ this.valueRender() }}</span>
+    <button mat-icon-button (click)="exposeSecret = !exposeSecret" *ngIf="valueType === 'SECRET'">
+        <mat-icon>{{exposeSecret ? 'visibility_off' : 'visibility'}}</mat-icon>
+    </button>
+</span>
diff --git a/src/app/shared/components/characteristicManagement/characteristic-value/characteristic-value.component.scss b/src/app/shared/components/characteristicManagement/characteristic-value/characteristic-value.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/app/shared/components/characteristicManagement/characteristic-value/characteristic-value.component.spec.ts b/src/app/shared/components/characteristicManagement/characteristic-value/characteristic-value.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..896934a3b984189f25ed142c00aef21b9691e963
--- /dev/null
+++ b/src/app/shared/components/characteristicManagement/characteristic-value/characteristic-value.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CharacteristicValueComponent } from './characteristic-value.component';
+
+describe('CharacteristicValueComponent', () => {
+  let component: CharacteristicValueComponent;
+  let fixture: ComponentFixture<CharacteristicValueComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CharacteristicValueComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CharacteristicValueComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/components/characteristicManagement/characteristic-value/characteristic-value.component.ts b/src/app/shared/components/characteristicManagement/characteristic-value/characteristic-value.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..83fdd90489d93a7e2e3b3a4ecbeb0566b99c93b7
--- /dev/null
+++ b/src/app/shared/components/characteristicManagement/characteristic-value/characteristic-value.component.ts
@@ -0,0 +1,22 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-characteristic-value',
+  templateUrl: './characteristic-value.component.html',
+  styleUrls: ['./characteristic-value.component.scss']
+})
+export class CharacteristicValueComponent {
+  @Input() value: string;
+  @Input() valueType: string;
+
+  exposeSecret: boolean = false;
+
+  valueRender(): string {
+    switch (this.valueType) {
+      case "SECRET":
+        return this.exposeSecret ? this.value : "\u2217\u2217\u2217\u2217\u2217\u2217";
+      default:
+        return this.value;
+    }
+  }
+}