diff --git a/api/api.go b/api/api.go
index ac66de1..dc88ad5 100644
--- a/api/api.go
+++ b/api/api.go
@@ -14,6 +14,7 @@ type Datapoint struct {
 }
 
 var defaultPeriod = 7
+var defaultLimit = 10
 
 // log fatal errors
 func checkError(err error) {
diff --git a/api/browsers.go b/api/browsers.go
index 4fe9315..1cfb5d8 100644
--- a/api/browsers.go
+++ b/api/browsers.go
@@ -30,10 +30,10 @@ var GetBrowsersHandler = http.HandlerFunc(func(w http.ResponseWriter, r *http.Re
     WHERE timestamp >= DATE_SUB(CURRENT_TIMESTAMP, INTERVAL ? DAY) AND browser_name IS NOT NULL
     GROUP BY browser_name
     ORDER BY count DESC
-    LIMIT 10`)
+    LIMIT ?`)
   checkError(err)
   defer stmt.Close()
-  rows, err := stmt.Query(period)
+  rows, err := stmt.Query(period, defaultLimit)
   checkError(err)
   defer rows.Close()
 
diff --git a/api/countries.go b/api/countries.go
index 4ca90ad..93582b2 100644
--- a/api/countries.go
+++ b/api/countries.go
@@ -30,10 +30,10 @@ var GetCountriesHandler = http.HandlerFunc(func(w http.ResponseWriter, r *http.R
     WHERE timestamp >= DATE_SUB(CURRENT_TIMESTAMP, INTERVAL ? DAY) AND country IS NOT NULL
     GROUP BY country
     ORDER BY count DESC
-    LIMIT 10`)
+    LIMIT ?`)
   checkError(err)
   defer stmt.Close()
-  rows, err := stmt.Query(period)
+  rows, err := stmt.Query(period, defaultLimit)
   checkError(err)
   defer rows.Close()
 
diff --git a/api/languages.go b/api/languages.go
index 4f5185c..89d33d7 100644
--- a/api/languages.go
+++ b/api/languages.go
@@ -27,11 +27,12 @@ var GetLanguagesHandler = http.HandlerFunc(func(w http.ResponseWriter, r *http.R
     FROM visits
     WHERE timestamp >= DATE_SUB(CURRENT_TIMESTAMP, INTERVAL ? DAY)
     GROUP BY browser_language
-    ORDER BY count DESC`)
+    ORDER BY count DESC
+    LIMIT ?`)
   checkError(err)
   defer stmt.Close()
 
-  rows, err := stmt.Query(period)
+  rows, err := stmt.Query(period, defaultLimit)
   checkError(err)
   defer rows.Close()
 
diff --git a/api/pageviews.go b/api/pageviews.go
index 48ac5fc..a3bbe92 100644
--- a/api/pageviews.go
+++ b/api/pageviews.go
@@ -18,11 +18,12 @@ var GetPageviewsHandler = http.HandlerFunc(func(w http.ResponseWriter, r *http.R
     FROM visits
     WHERE timestamp >= DATE_SUB(CURRENT_TIMESTAMP, INTERVAL ? DAY)
     GROUP BY path
-    ORDER BY pageviews DESC`)
+    ORDER BY pageviews DESC
+    LIMIT ?`)
   checkError(err)
   defer stmt.Close()
 
-  rows, err := stmt.Query(period)
+  rows, err := stmt.Query(period, defaultLimit)
   checkError(err)
   defer rows.Close()
 
diff --git a/api/screen-resolutions.go b/api/screen-resolutions.go
index 54d2194..91513b0 100644
--- a/api/screen-resolutions.go
+++ b/api/screen-resolutions.go
@@ -29,10 +29,11 @@ var GetScreenResolutionsHandler = http.HandlerFunc(func(w http.ResponseWriter, r
     FROM visits
     WHERE timestamp >= DATE_SUB(CURRENT_TIMESTAMP, INTERVAL ? DAY)
     GROUP BY screen_resolution
-    ORDER BY count DESC`)
+    ORDER BY count DESC
+    LIMIT ?`)
   checkError(err)
   defer stmt.Close()
-  rows, err := stmt.Query(period)
+  rows, err := stmt.Query(period, defaultLimit)
   checkError(err)
   defer rows.Close()
 
diff --git a/assets/js/components/HeaderBar.js b/assets/js/components/HeaderBar.js
new file mode 100644
index 0000000..861f458
--- /dev/null
+++ b/assets/js/components/HeaderBar.js
@@ -0,0 +1,22 @@
+'use strict'
+
+import { h, render, Component } from 'preact';
+import LogoutButton from '../components/LogoutButton.js';
+
+class HeaderBar extends Component {
+  render() {
+    const rightContent = this.props.showLogout ? <LogoutButton onSuccess={this.props.onLogout} /> : '';
+
+    return (
+      <header class="header-bar cf">
+        <div class="container">
+          <h1 class="pull-left title">Ana <small class="subtitle">open web analytics</small></h1>
+          <div class="pull-right">
+              {rightContent}
+          </div>
+        </div>
+      </header>
+  )}
+}
+
+export default HeaderBar
diff --git a/assets/js/components/LoginForm.js b/assets/js/components/LoginForm.js
index 3cf6440..bc0c1c2 100644
--- a/assets/js/components/LoginForm.js
+++ b/assets/js/components/LoginForm.js
@@ -40,11 +40,11 @@ class LoginForm extends Component {
         <form method="POST" onSubmit={this.handleSubmit}>
           <div class="small-margin">
             <label>Email address</label>
-            <input type="email" name="email" onChange={this.linkState('email')} required="required" />
+            <input type="email" name="email" placeholder="Email address" onChange={this.linkState('email')} required="required" />
           </div>
           <div class="small-margin">
             <label>Password</label>
-            <input type="password" name="password" onChange={this.linkState('password')} required="required" />
+            <input type="password" name="password" placeholder="**********" onChange={this.linkState('password')} required="required" />
           </div>
           <div class="small-margin">
             <input type="submit" value="Sign in" />
diff --git a/assets/js/pages/dashboard.js b/assets/js/pages/dashboard.js
index 7842ee3..57b4a0b 100644
--- a/assets/js/pages/dashboard.js
+++ b/assets/js/pages/dashboard.js
@@ -1,12 +1,12 @@
 'use strict'
 
 import { h, render, Component } from 'preact';
-import LogoutButton from '../components/LogoutButton.js';
 import Pageviews from '../components/Pageviews.js';
 import Realtime from '../components/Realtime.js';
 import Graph from '../components/Graph.js';
 import DatePicker from '../components/DatePicker.js';
 import Table from '../components/Table.js';
+import HeaderBar from '../components/HeaderBar.js';
 
 class Dashboard extends Component {
   constructor(props) {
@@ -20,14 +20,7 @@ class Dashboard extends Component {
   render() {
     return (
     <div>
-      <header class="header-bar cf">
-        <div class="container">
-          <h1 class="pull-left title">Ana <small class="subtitle">open web analytics</small></h1>
-          <div class="pull-right">
-            <LogoutButton onSuccess={this.props.onLogout} />
-          </div>
-        </div>
-      </header>
+      <HeaderBar showLogout={true} onLogout={this.props.onLogout} />
       <div class="container">
         <Realtime />
         <div class="clear">
diff --git a/assets/js/pages/login.js b/assets/js/pages/login.js
index 5c64527..09423a5 100644
--- a/assets/js/pages/login.js
+++ b/assets/js/pages/login.js
@@ -2,15 +2,16 @@
 
 import { h, render, Component } from 'preact';
 import LoginForm from '../components/LoginForm.js';
+import HeaderBar from '../components/HeaderBar.js';
 
 class Login extends Component {
   render() {
     return (
-      <div class="container">
-        <header class="header cf">
-          <h1 class="pull-left">Ana <small>open web analytics</small></h1>
-        </header>
-        <LoginForm onSuccess={this.props.onLogin} />
+      <div>
+        <HeaderBar showLogout={false} />
+        <div class="container">
+          <LoginForm onSuccess={this.props.onLogin} />
+        </div>
       </div>
     )
   }
diff --git a/assets/sass/_forms.scss b/assets/sass/_forms.scss
new file mode 100644
index 0000000..70d6048
--- /dev/null
+++ b/assets/sass/_forms.scss
@@ -0,0 +1,37 @@
+label {
+  font-weight: bold;
+  display: block;
+  margin-bottom: 2px;
+}
+
+input {
+  padding: 8px;
+  border: 1px solid #999;
+  min-width: 260px;
+
+  &:focus {
+    border: 1px solid #33C3F0;
+    outline: 0;
+  }
+}
+
+button,
+input[type="submit"],
+input[type="button"],
+.button {
+  min-width: auto;
+  padding: 10px 20px;
+  cursor: pointer;
+
+  border: 0;
+  color: white;
+  background: #09F;
+  font-weight: bold;
+
+
+  &.active,
+  &:hover,
+  &:focus {
+    background: darken( #09F, 20%)
+  }
+}
diff --git a/assets/sass/styles.scss b/assets/sass/styles.scss
index 8cc1087..6d0d6f2 100644
--- a/assets/sass/styles.scss
+++ b/assets/sass/styles.scss
@@ -1,6 +1,7 @@
 @import "normalize";
 @import "util";
 @import "grid";
+@import "forms";
 
 body {
   font-family: Raleway, HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -43,24 +44,6 @@ a {
   }
 }
 
-label {
-  display: block;
-}
-
-input {
-  padding: 8px;
-}
-
-button,
-input[type="submit"] {
-  padding: 8px;
-  cursor: pointer;
-
-  &.active {
-    border: 2px solid black;
-  }
-}
-
 .container {
   max-width: 1020px;
   padding: 0 20px;
diff --git a/gulpfile.js b/gulpfile.js
index 7a46ba3..2a0a72a 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -40,5 +40,5 @@ gulp.task('sass', function () {
 
 gulp.task('watch', ['default'], function() {
   gulp.watch(['./assets/js/**/*.js'], ['browserify'] );
-  gulp.watch(['./assets/sass/*.scss'], ['sass'] );
+  gulp.watch(['./assets/sass/**/*.scss'], ['sass'] );
 });