diff --git a/ui/index.html b/ui/index.html
index 74be075..ac97553 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
     <title>Cosmic Pi UI</title>
   </head>
 
diff --git a/ui/package.json b/ui/package.json
index 1804917..6e7ce57 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -4,7 +4,7 @@
   "description": "Web interface for Cosmic Pi",
   "main": "webpack.config.js",
   "scripts": {
-    "dev": "webpack-dev-server --open --mode development",
+    "dev": "webpack-dev-server --open --mode development --disable-host-check --host 0.0.0.0",
     "build": "webpack --progress --mode production",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
diff --git a/ui/src/assets/css/main.css b/ui/src/assets/css/main.css
index 49aebd0..3aebc5d 100644
--- a/ui/src/assets/css/main.css
+++ b/ui/src/assets/css/main.css
@@ -108,13 +108,10 @@ hr {
     #sidebar .hideable {
         display: none;
     }
-}
 
-.box {
-    border: 1px solid #ddd;
-    background-color: #f5f5f5;
-    padding: 20px;
-    border-radius: 5px; 
+    .card {
+        margin: 0 -25px;
+    }
 }
 
 .card-narrow {
diff --git a/ui/src/components/Login.vue b/ui/src/components/Login.vue
index 3ab3f14..0398ada 100644
--- a/ui/src/components/Login.vue
+++ b/ui/src/components/Login.vue
@@ -1,22 +1,28 @@
 <template>
-<div class="col-md-4 offset-md-4 col-sm-6 offset-sm-4 box">
-    <h3 class="text-center">Login</h3>
-    <hr />
-    <div v-if="!authFail" class="alert alert-warning" role="alert">
-        Login is required to access to settings
-    </div>
-    <div v-if="authFail" class="alert alert-danger" role="alert">
-        Username or password is not correct
-    </div>
-    <form @submit.prevent="onLoginSubmit">
-        <div class="form-group">
-            <input type="text" ref="username" value="cosmicpi" class="form-control" placeholder="Username">
+<div class="col-md-6 offset-md-3 col-sm-8 offset-sm-2 ">
+    <div class="card card-default">
+        <div class="card-header">
+            <h3>Login</h3>
         </div>
-        <div class="form-group">
-            <input type="password" ref="password" value="MuonsFROMSp8ce" class="form-control" placeholder="Password">
+        
+        <div class="card-body">
+            <div v-if="!authFail" class="alert alert-warning" role="alert">
+                Login is required to access to settings
+            </div>
+            <div v-if="authFail" class="alert alert-danger" role="alert">
+                Username or password is not correct
+            </div>
+            <form @submit.prevent="onLoginSubmit">
+                <div class="form-group">
+                    <input type="text" ref="username" value="cosmicpi" class="form-control" placeholder="Username">
+                </div>
+                <div class="form-group">
+                    <input type="password" ref="password" value="MuonsFROMSp8ce" class="form-control" placeholder="Password">
+                </div>
+                <button type="submit" ref="submit" class="btn btn-primary btn-lg btn-block">Login</button>
+            </form>
         </div>
-        <button type="submit" ref="submit" class="btn btn-primary btn-lg btn-block">Login</button>
-    </form>
+    </div>
 </div>
 </template>
 
diff --git a/ui/src/components/Science.vue b/ui/src/components/Science.vue
index aeb8a7a..e0788aa 100644
--- a/ui/src/components/Science.vue
+++ b/ui/src/components/Science.vue
@@ -1,26 +1,31 @@
 <template>
 <div class="row">
-    <div class="col-md-8 offset-md-2 col-sm-12 box">
-        <h3>Export Data</h3>
-        <hr />
-        <div class="row">
-            <div class="form-group col">
-                <label for="fromDate">From date:</label>
-                <datetime @input="rangeUpdated" v-model="from" id="fromDate" type="datetime" input-class="form-control"></datetime>
+    <div class="col-md-6 offset-md-3 col-sm-8 offset-sm-2">
+        <div class="card card-default">
+            <div class="card-header">
+                <h3>Export Data</h3>
             </div>
-            <div class="form-group col">
-                <label for="toDate">To date:</label>
-                <datetime @input="rangeUpdated" v-model="to" id="toDate" type="datetime" input-class="form-control"></datetime>
-            </div>
-        </div>
-        <div class="row">
-            <img v-if="graphIsLoading" ref="loader" style="margin: auto" :src="loaderUrl" />
-            <img ref="graph" style="width: 100%; height: 100%" />
-        </div>
-                
-        <div class="row">
-            <div class="col">
-                <a href="#" target="_blank" ref="csvButton" class="btn btn-primary btn-block">Download CSV</a>
+            <div class="card-body">
+                <div class="row">
+                    <div class="form-group col">
+                        <label for="fromDate">From date:</label>
+                        <datetime @input="rangeUpdated" v-model="from" id="fromDate" type="datetime" input-class="form-control"></datetime>
+                    </div>
+                    <div class="form-group col">
+                        <label for="toDate">To date:</label>
+                        <datetime @input="rangeUpdated" v-model="to" id="toDate" type="datetime" input-class="form-control"></datetime>
+                    </div>
+                </div>
+                <div class="row">
+                    <img v-if="graphIsLoading" ref="loader" style="margin: auto" :src="loaderUrl" />
+                    <img ref="graph" style="width: 100%; height: 100%" />
+                </div>
+                        
+                <div class="row">
+                    <div class="col">
+                        <a href="#" target="_blank" ref="csvButton" class="btn btn-primary btn-block">Download CSV</a>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
diff --git a/ui/src/components/dashboard/Dashboard.vue b/ui/src/components/dashboard/Dashboard.vue
index 402609f..8667e87 100644
--- a/ui/src/components/dashboard/Dashboard.vue
+++ b/ui/src/components/dashboard/Dashboard.vue
@@ -1,10 +1,10 @@
 <template>
 <div>
   <div class="row">
-    <div class="col-6">
+    <div class="col-sm-12 col-md-6">
       <Histogram></Histogram>
     </div>
-    <div class="col-6">
+    <div class="col-sm-12 col-md-6">
       <Location :longitude=lastLongitude :latitude=lastLatitude></Location>
     </div>
   </div>
diff --git a/ui/src/components/dashboard/Histogram.vue b/ui/src/components/dashboard/Histogram.vue
index 9b64e36..6114c0a 100644
--- a/ui/src/components/dashboard/Histogram.vue
+++ b/ui/src/components/dashboard/Histogram.vue
@@ -3,14 +3,14 @@
     <div class="card-header">
         <h5>Histogram</h5>
         <div class="row">
-            <div class="col-10">
+            <div class="col-sm-9 col-md-10">
                 <p class="small">
                     Showing data in period {{from}} - {{to}} ({{period}}s), 
                     <b>{{ numberOfEvents }}</b> events with
                     bin size <b>{{ binSize }}s</b>
                 </p>
             </div>
-            <div class="col-2">
+            <div class="col-sm-3 col-md-2">
                 <input v-model="binSize" class="form-control" min="1" type="number"/>
             </div>
         </div>
diff --git a/ui/src/components/settings/Wifi.vue b/ui/src/components/settings/Wifi.vue
index b78635a..2db1b6f 100644
--- a/ui/src/components/settings/Wifi.vue
+++ b/ui/src/components/settings/Wifi.vue
@@ -1,27 +1,33 @@
 <template>
-<div class="col-md-4 offset-md-4 col-sm-6 offset-sm-4 box">
-    <h3 class="text-center">Wifi</h3>
-    <hr />
-    <div v-if="connected" class="alert alert-success">
-        Great, you are already connected to wifi network <b>{{ currentWifi }}</b>!
-    </div>
-    <div v-if="response" class="alert alert-warning">
-        {{ response }}
-    </div>
+<div class="col-md-6 offset-md-3 col-sm-8 offset-sm-2 ">
+    <div class="card card-default">
+        <div class="card-header">
+            <h3>Wifi</h3>
+        </div>
 
-    <form @submit.prevent="onFormSubmit">
-        <div class="form-group">
-            <label for="inputSSID">SSID:</label>
-            <select class="form-control" ref="ssid" id="inputSSID">
-                <option v-for="wifi in wifiList" :key="wifi" :value="wifi">{{ wifi }}</option>
-            </select>
+        <div class="card-body">
+            <div v-if="connected" class="alert alert-success">
+                Great, you are already connected to wifi network <b>{{ currentWifi }}</b>!
+            </div>
+            <div v-if="response" class="alert alert-warning">
+                {{ response }}
+            </div>
+
+            <form @submit.prevent="onFormSubmit">
+                <div class="form-group">
+                    <label for="inputSSID">SSID:</label>
+                    <select class="form-control" ref="ssid" id="inputSSID">
+                        <option v-for="wifi in wifiList" :key="wifi" :value="wifi">{{ wifi }}</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label for="inputPassword">Password</label>
+                    <input type="password" ref="pass" class="form-control" id="inputPassword">
+                </div>
+                <button type="submit" ref="submit" class="btn btn-primary btn-lg btn-block">Connect</button>
+            </form>
         </div>
-        <div class="form-group">
-            <label for="inputPassword">Password</label>
-            <input type="password" ref="pass" class="form-control" id="inputPassword">
-        </div>
-        <button type="submit" ref="submit" class="btn btn-primary btn-lg btn-block">Connect</button>
-    </form>
+    </div>
 </div>
 </template>
 
@@ -72,12 +78,3 @@ export default {
     },
 }
 </script>
-
-<style>
-.box {
-    border: 1px solid #ddd;
-    background-color: #f5f5f5;
-    padding: 20px;
-    border-radius: 5px; 
-}
-</style>
