diff --git a/src/app/dashboard/add-data.component.html b/src/app/dashboard/add-data.component.html
index 329c7d9..6d57253 100644
--- a/src/app/dashboard/add-data.component.html
+++ b/src/app/dashboard/add-data.component.html
@@ -78,21 +78,18 @@
             <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">
-                  <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 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">{{ leftCategoryNameList[i] }}
+                  </label>
                 </div>
-                <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 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">{{ rightCategoryNameList[i] }}
+                  </label>
                 </div>
               </div>
               <span class="help-block"><strong>Optional:</strong> Choose the Budget Type for the majority of the purchase.</span>