diff --git a/client/package-lock.json b/client/package-lock.json
index 3cb0f6b..287c5cb 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -2337,6 +2337,11 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "bootstrap": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.1.1.tgz",
+      "integrity": "sha512-SpiDSOcbg4J/PjVSt4ny5eY6j74VbVSjROY4Fb/WIUXBV9cnb5luyR4KnPvNoXuGnBK1T+nJIWqRsvU3yP8Mcg=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
diff --git a/client/package.json b/client/package.json
index 32eb9a1..63d6d35 100644
--- a/client/package.json
+++ b/client/package.json
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "axios": "^0.18.0",
+    "bootstrap": "^4.1.1",
     "vue": "^2.5.16",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1"
diff --git a/client/src/App.vue b/client/src/App.vue
index 238aa08..f39aaa4 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -10,11 +10,6 @@
 
 <style>
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
   margin-top: 60px;
 }
 </style>
diff --git a/client/src/components/Ping.vue b/client/src/components/Ping.vue
index 26ccf86..66c31c6 100644
--- a/client/src/components/Ping.vue
+++ b/client/src/components/Ping.vue
@@ -1,6 +1,6 @@
 <template>
-    <div>
-        <p>{{msg}}</p>
+    <div class="container">
+        <button type="button" class="btn btn-primary">{{msg}}</button>
     </div>
 </template>
 
diff --git a/client/src/main.js b/client/src/main.js
index 8db99dd..0d9c757 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -1,3 +1,4 @@
+import 'bootstrap/dist/css/bootstrap.css'
 import Vue from 'vue'
 import App from './App.vue'
 import store from './store'