diff --git a/src-ui/src/app/components/common/input/select/select.component.html b/src-ui/src/app/components/common/input/select/select.component.html
index 7912423bd..717aa7964 100644
--- a/src-ui/src/app/components/common/input/select/select.component.html
+++ b/src-ui/src/app/components/common/input/select/select.component.html
@@ -1,7 +1,18 @@
 <div class="form-group">
   <label [for]="inputId">{{title}}</label>
-  <select class="form-control" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" (blur)="onTouched()" [disabled]="disabled" [style.color]="textColor" [style.background]="backgroundColor">
-    <option *ngFor="let i of items" [ngValue]="i.id" class="form-control">{{i.name}}</option>
-  </select>
+  <div [class.input-group]="showPlusButton()">
+    <select class="form-control" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" (blur)="onTouched()"
+      [disabled]="disabled" [style.color]="textColor" [style.background]="backgroundColor">
+      <option *ngIf="allowNull" [ngValue]="null" class="form-control">---</option>
+      <option *ngFor="let i of items" [ngValue]="i.id" class="form-control">{{i.name}}</option>
+    </select>
+    <div *ngIf="showPlusButton()" class="input-group-append">
+      <button class="btn btn-outline-secondary" type="button" (click)="createNew.emit()">
+        <svg class="buttonicon" fill="currentColor">
+          <use xlink:href="assets/bootstrap-icons.svg#plus" />
+        </svg>
+      </button>
+    </div>
+  </div>
   <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
 </div>
\ No newline at end of file
diff --git a/src-ui/src/app/components/common/input/select/select.component.ts b/src-ui/src/app/components/common/input/select/select.component.ts
index ba1dfe1c7..a53566dab 100644
--- a/src-ui/src/app/components/common/input/select/select.component.ts
+++ b/src-ui/src/app/components/common/input/select/select.component.ts
@@ -1,4 +1,4 @@
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { v4 as uuidv4 } from 'uuid';
 import { AbstractInputComponent } from '../abstract-input';
@@ -28,4 +28,14 @@ export class SelectComponent extends AbstractInputComponent<number> {
   @Input()
   backgroundColor: any
 
+  @Input()
+  allowNull: boolean = false
+
+  @Output()
+  createNew = new EventEmitter()
+  
+  showPlusButton(): boolean {
+    return this.createNew.observers.length > 0
+  }
+
 }
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.html b/src-ui/src/app/components/document-detail/document-detail.component.html
index 953c5d31f..a32418fe7 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.html
+++ b/src-ui/src/app/components/document-detail/document-detail.component.html
@@ -23,15 +23,15 @@
 <div class="row">
     <div class="col-xl">
         <form [formGroup]='documentForm' (ngSubmit)="save()">
-            <div class="form-group">
-                <label for="title">Title</label>
-                <input type="text" class="form-control" id="title" formControlName='title'>
-            </div>
+            
+            <app-input-text title="Title" formControlName="title"></app-input-text>
+            
             <div class="form-group">
                 <label for="archive_serial_number">Archive Serial Number</label>
                 <input type="number" class="form-control" id="archive_serial_number"
                     formControlName='archive_serial_number'>
             </div>
+            
             <div class="form-row">
                 <div class="form-group col">
                     <label for="created_date">Date created</label>
@@ -42,43 +42,16 @@
                     <input type="time" class="form-control" id="created_time" formControlName='created_time'>
                 </div>
             </div>
+            
             <div class="form-group">
                 <label for="content">Content</label>
                 <textarea class="form-control" id="content" rows="5" formControlName='content'></textarea>
             </div>
-            <div class="form-group">
-                <label for="correspondent">Correspondent</label>
-                <div class="input-group">
-                    <select class="form-control" id="correspondent" formControlName="correspondent_id">
-                        <option [ngValue]="null">---</option>
-                        <option *ngFor='let c of correspondents' [ngValue]="c.id">{{c.name}}</option>
-                    </select>
-                    <div class="input-group-append">
-                        <button class="btn btn-outline-secondary" type="button" (click)="createCorrespondent()">
-                            <svg class="buttonicon" fill="currentColor">
-                                <use xlink:href="assets/bootstrap-icons.svg#plus" />
-                            </svg>
-                        </button>
-                    </div>
-                </div>
-            </div>
-            <div class="form-group">
-                <label for="document_type">Document Type</label>
-                <div class="input-group">
-                    <select class="form-control" id="document_type" formControlName="document_type_id">
-                        <option [ngValue]="null">---</option>
-                        <option *ngFor="let dt of documentTypes" [ngValue]="dt.id">{{dt.name}}</option>
-                    </select>
-                    <div class="input-group-append">
-                        <button class="btn btn-outline-secondary" type="button" (click)="createDocumentType()">
-                            <svg class="buttonicon" fill="currentColor">
-                                <use xlink:href="assets/bootstrap-icons.svg#plus" />
-                            </svg>
-                        </button>
-                    </div>
-                </div>
 
-            </div>
+            <app-input-select [items]="correspondents" title="Correspondent" formControlName="correspondent_id" allowNull="true" (createNew)="createCorrespondent()"></app-input-select>
+
+            <app-input-select [items]="documentTypes" title="Document type" formControlName="document_type_id" allowNull="true" (createNew)="createDocumentType()"></app-input-select>
+
             <div class="form-group">
                 <label for="exampleFormControlTextarea1">Tags</label>