diff --git a/src/app/views/qualifications/qualifications.component.html b/src/app/views/qualifications/qualifications.component.html
index ef816aa..396139a 100644
--- a/src/app/views/qualifications/qualifications.component.html
+++ b/src/app/views/qualifications/qualifications.component.html
@@ -2,9 +2,9 @@
     <div class="qualifications__action-row">
         <mat-form-field>
             <mat-label>Qualification</mat-label>
-            <input matInput>
+            <input matInput #qualificationInput minlength="1" maxlength="25">
         </mat-form-field>
-        <button mat-fab class="shadowless">
+        <button mat-fab class="shadowless" (click)="onAdd(qualificationInput)">
             <mat-icon>add</mat-icon>
         </button>
     </div>
diff --git a/src/app/views/qualifications/qualifications.component.ts b/src/app/views/qualifications/qualifications.component.ts
index f4ab16b..0de8985 100644
--- a/src/app/views/qualifications/qualifications.component.ts
+++ b/src/app/views/qualifications/qualifications.component.ts
@@ -79,6 +79,16 @@ export class QualificationsComponent {
         this.qualificationEdits.set(id, true);
     }
 
+    onAdd(qualificationField: HTMLInputElement){
+        this.qualificationService.createQualification({requestBody: {skill: qualificationField.value}}).subscribe((qualification)=>{
+            const data = this.qualificationDataSource.data;
+            data.push(qualification);
+            this.qualificationDataSource = new MatTableDataSource<Qualification>(data);
+            this.notifications.publish(`Added ${qualification.skill}`);
+            qualificationField.value='';
+        });
+    }
+
     endEdit(oldQualification: Qualification, save: boolean) {
 
         const qualificationFormGroup = this.qualificationSkillFormGroups.get(oldQualification.id);