diff --git a/src/app/dashboard/add-data.component.html b/src/app/dashboard/add-data.component.html
index d832253..329c7d9 100644
--- a/src/app/dashboard/add-data.component.html
+++ b/src/app/dashboard/add-data.component.html
@@ -78,18 +78,21 @@
             <label class="col-md-3 form-control-label" for="text-input">Budget Type</label>
             <div class="col-md-9">
               <div class="row">
-                <div class="col-md-6 btn-group-vertical">
-                  <label class="btn btn-secondary mb-0" [class.active]="categoryId == ''">
-                    <input value="" type="radio" name="radios" style="display:none;" [(ngModel)]="categoryId">Uncategorised
-                  </label>
-                  <label *ngFor="let category of leftCategoryIdList, let i=index" class="btn btn-secondary mb-0" [class.active]="categoryId == category">
-                    <input [value]="category" type="radio" name="radios" style="display:none;" [(ngModel)]="categoryId">{{ categoryNameList[i] }}
-                  </label>
+                <div class="col-md-6">
+                  <div>
+                    <input value="" type="radio" name="radios" [(ngModel)]="categoryId">
+                    <label>Uncategorised</label>
+                  </div>
+                  <div class="radio" *ngFor="let category of leftCategoryIdList, let i=index">
+                    <input [value]="category" type="radio" name="radios" [(ngModel)]="categoryId">
+                    <label>{{ leftCategoryNameList[i] }}</label>
+                  </div>
                 </div>
-                <div class="col-md-6 btn-group-vertical">
-                  <label *ngFor="let category2 of rightCategoryIdList, let i=index" class="btn btn-secondary mb-0" [class.active]=" categoryId == category2">
-                    <input [value]="category2" type="radio" name="radios" style="display:none;" [(ngModel)]="categoryId">{{ categoryNameList[category2 - 1] }}
-                  </label>
+                <div class="col-md-6">
+                  <div class="radio" *ngFor="let category2 of rightCategoryIdList, let i=index">
+                    <input [value]="category2" type="radio" name="radios" [(ngModel)]="categoryId">
+                    <label>{{ rightCategoryNameList[i] }}</label>
+                  </div>
                 </div>
               </div>
               <span class="help-block"><strong>Optional:</strong> Choose the Budget Type for the majority of the purchase.</span>
diff --git a/src/app/dashboard/add-data.component.ts b/src/app/dashboard/add-data.component.ts
index b562721..99a1df4 100644
--- a/src/app/dashboard/add-data.component.ts
+++ b/src/app/dashboard/add-data.component.ts
@@ -44,7 +44,8 @@ export class AddDataComponent implements OnInit {
   minDate: any;
   leftCategoryIdList: number[] = [];
   rightCategoryIdList: number[] = [];
-  categoryNameList: string[] = [];
+  leftCategoryNameList: number[] = [];
+  rightCategoryNameList: number[] = [];
 
   constructor(
   private formBuilder: FormBuilder,
@@ -90,10 +91,12 @@ export class AddDataComponent implements OnInit {
 
   private setCategoryList(data: any) {
     let categoryIdList = Object.keys(data.ids).map(key => data.ids[key]);
-    this.categoryNameList = Object.keys(data.names).map(key => data.names[key]);
+    let categoryNameList = Object.keys(data.names).map(key => data.names[key]);
     let halfLength = Math.floor(categoryIdList.length / 2);
     this.leftCategoryIdList = categoryIdList.splice(0, halfLength);
+    this.leftCategoryNameList = categoryNameList.splice(0, halfLength);
     this.rightCategoryIdList = categoryIdList;
+    this.rightCategoryNameList = categoryNameList;
   }
 
   getMinDate() {