diff --git a/package-lock.json b/package-lock.json
index ecdbe1a..7334a98 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6752,9 +6752,9 @@
       "integrity": "sha1-zJJ7GR2Yb+D7atKVeQdQxV3L6FE="
     },
     "ngx-bootstrap": {
-      "version": "2.0.0-beta.8",
-      "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-2.0.0-beta.8.tgz",
-      "integrity": "sha512-e+3euXDb4nhzxn9kBO4RPWwRaI2ef7Lg+us8Yo2DBfD/Kuk/vl7ksWjoolMFLKEGpcTcKhMT/4BH5dUx+S4AtA=="
+      "version": "2.0.0-rc.1",
+      "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-2.0.0-rc.1.tgz",
+      "integrity": "sha512-/ARJ2LLrT4bDghOVS16btJovJ7lsDcILmBUvGt0EXzNlU1HbTQZKfl/OKhrufmRgHQIzc6kXckVUhz5d5QIsUA=="
     },
     "ngx-pagination": {
       "version": "3.0.3",
diff --git a/package.json b/package.json
index 11dcb5e..5d7e254 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,7 @@
     "moment": "^2.21.0",
     "ng2-charts": "1.6.0",
     "ng2-validation-manager": "0.5.3",
-    "ngx-bootstrap": "2.0.0-beta.8",
+    "ngx-bootstrap": "2.0.0-rc.1",
     "ngx-pagination": "3.0.3",
     "rxjs": "5.5.6",
     "ts-helpers": "1.1.2",
diff --git a/src/app/dashboard/add-data.component.html b/src/app/dashboard/add-data.component.html
index a756040..d832253 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>{{ categoryNameList[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">{{ categoryNameList[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>{{ categoryNameList[category2 - 1] }}</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">{{ categoryNameList[category2 - 1] }}
+                  </label>
                 </div>
               </div>
               <span class="help-block"><strong>Optional:</strong> Choose the Budget Type for the majority of the purchase.</span>