diff --git a/package.json b/package.json
index 11152664083..0c31f9e2616 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,8 @@
     "reflect-metadata": "0.1.2",
     "rxjs": "5.0.0-beta.0",
     "systemjs": "0.19.20",
-    "zone.js": "0.5.10"
+    "zone.js": "0.5.10",
+    "grunt-sass": "^1.1.0"
   },
   "engines": {
     "node": "0.4.x",
diff --git a/public/less/base/base.scss b/public/less/base/base.scss
new file mode 100644
index 00000000000..1556ee1d534
--- /dev/null
+++ b/public/less/base/base.scss
@@ -0,0 +1,28 @@
+html {
+	height: 100%;
+}
+
+body {
+	height: 100%;
+  margin: 0;
+  font-family: $baseFontFamily;
+  font-size: $baseFontSize;
+  line-height: $baseLineHeight;
+  color: $textColor;
+  background-color: $bodyBackground;
+}
+
+
+// Links
+// -------------------------
+
+a {
+  color: $linkColor;
+  text-decoration: none;
+}
+
+a:hover,
+a:focus {
+  color: $linkColorHover;
+}
+
diff --git a/public/less/base/code.scss b/public/less/base/code.scss
new file mode 100644
index 00000000000..c345da0db5d
--- /dev/null
+++ b/public/less/base/code.scss
@@ -0,0 +1,52 @@
+//
+// Code (inline and blocK)
+// --------------------------------------------------
+
+
+// Inline and block code styles
+code,
+pre {
+  @include font-family-monospace();
+  font-size: $baseFontSize - 2;
+  background-color: $codeTagBackground;
+  color: $textColor;
+  border: 1px solid darken($codeTagBackground, 15%);
+  padding: 2px;
+}
+
+// Inline code
+code {
+  color: #d14;
+  background-color: #f7f7f9;
+  border: 1px solid #e1e1e8;
+  white-space: nowrap;
+}
+
+// Blocks of code
+pre {
+  display: block;
+  margin: 0 0 $baseLineHeight / 2;
+  font-size: $baseFontSize - 1; // 14px to 13px
+  line-height: $baseLineHeight;
+  word-break: break-all;
+  word-wrap: break-word;
+  white-space: pre;
+  white-space: pre-wrap;
+  background-color: #f5f5f5;
+
+  // Make prettyprint styles more spaced out for readability
+  &.prettyprint {
+    margin-bottom: $baseLineHeight;
+  }
+
+  // Account for some code outputs that place code tags in pre tags
+  code {
+    padding: 0;
+    color: inherit;
+    white-space: pre;
+    white-space: pre-wrap;
+    background-color: transparent;
+    border: 0;
+  }
+}
+
diff --git a/public/less/base/fonts.scss b/public/less/base/fonts.scss
new file mode 100644
index 00000000000..61ff672465b
--- /dev/null
+++ b/public/less/base/fonts.scss
@@ -0,0 +1,168 @@
+@font-face {
+    font-family: 'grafana-icons';
+    src:    url('../fonts/grafana-icons.eot?h6rv8b');
+    src:    url('../fonts/grafana-icons.eot?h6rv8b#iefix') format('embedded-opentype'),
+        url('../fonts/grafana-icons.ttf?h6rv8b') format('truetype'),
+        url('../fonts/grafana-icons.woff?h6rv8b') format('woff'),
+        url('../fonts/grafana-icons.svg?h6rv8b#grafana-icons') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+ 
+.icon-gf {
+    /* use !important to prevent issues with browser extensions that change fonts */
+    font-family: 'grafana-icons' !important;
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-gf-raintank_wordmark:before {
+    content: "\e600";
+}
+.icon-gf-raintank_icn:before {
+    content: "\e601";
+}
+.icon-gf-raintank_r-icn:before {
+    content: "\e905";
+}
+.icon-gf-check-alt:before {
+    content: "\e603";
+}
+.icon-gf-check:before {
+    content: "\e604";
+}
+.icon-gf-collector:before {
+    content: "\e605";
+}
+.icon-gf-dashboard:before {
+    content: "\e606";
+}
+.icon-gf-panel:before {
+    content: "\e904";
+}
+.icon-gf-datasources:before {
+    content: "\e607";
+}
+.icon-gf-endpoint-tiny:before {
+    content: "\e608";
+}
+.icon-gf-endpoint:before {
+    content: "\e609";
+}
+.icon-gf-filter:before {
+    content: "\e60a";
+}
+.icon-gf-status:before {
+    content: "\e60b";
+}
+.icon-gf-monitoring:before {
+    content: "\e60c";
+}
+.icon-gf-monitoring-tiny:before {
+    content: "\e620";
+}
+.icon-gf-jump-to-dashboard:before {
+    content: "\e60d";
+}
+.icon-gf-warn:before {
+    content: "\e60e";
+}
+.icon-gf-nodata:before {
+    content: "\e60f";
+}
+.icon-gf-critical:before {
+    content: "\e610";
+}
+.icon-gf-online:before {
+    content: "\e611";
+}
+.icon-gf-event-error:before {
+    content: "\e623";
+}
+.icon-gf-event:before {
+    content: "\e624";
+}
+.icon-gf-private-collector:before {
+    content: "\e612";
+}
+.icon-gf-alert:before {
+    content: "\e61f";
+}
+.icon-gf-alert-disabled:before {
+    content: "\e621";
+}
+.icon-gf-refresh:before {
+    content: "\e613";
+}
+.icon-gf-save:before {
+    content: "\e614";
+}
+.icon-gf-settings:before {
+    content: "\e615";
+}
+.icon-gf-share:before {
+    content: "\e616";
+}
+.icon-gf-star:before {
+    content: "\e617";
+}
+.icon-gf-search:before {
+    content: "\e618";
+}
+.icon-gf-tag-add:before {
+    content: "\e619";
+}
+.icon-gf-tag-remove:before {
+    content: "\e61a";
+}
+.icon-gf-video:before {
+    content: "\e61b";
+}
+.icon-gf-bulk_action:before {
+    content: "\e61c";
+}
+.icon-gf-users:before {
+    content: "\e622";
+}
+.icon-gf-globe:before {
+    content: "\e61d";
+}
+.icon-gf-snapshot:before {
+    content: "\e61e";
+}
+.icon-gf-play-grafana-icon:before {
+    content: "\e629";
+}
+.icon-gf-grafana-icon:before {
+    content: "\e625";
+}
+.icon-gf-email:before {
+    content: "\e628";
+}
+.icon-gf-stopwatch:before {
+    content: "\e626";
+}
+.icon-gf-skull:before {
+    content: "\e900";
+}
+.icon-gf-probe:before {
+    content: "\e901";
+}
+.icon-gf-apps:before {
+    content: "\e902";
+}
+.icon-gf-litmus:before {
+    content: "\e627";
+}
+.icon-gf-grafana_wordmark:before {
+    content: "\e903";
+}
+
diff --git a/public/less/base/forms.scss b/public/less/base/forms.scss
new file mode 100644
index 00000000000..644c77980b2
--- /dev/null
+++ b/public/less/base/forms.scss
@@ -0,0 +1,290 @@
+//
+// Forms
+// --------------------------------------------------
+
+
+// GENERAL STYLES
+// --------------
+
+// Make all forms have space below them
+form {
+  margin: 0 0 $baseLineHeight;
+}
+
+fieldset {
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+// Groups of fields with labels on top (legends)
+legend {
+  display: block;
+  width: 100%;
+  padding: 0;
+  margin-bottom: $baseLineHeight;
+  font-size: $baseFontSize * 1.5;
+  line-height: $baseLineHeight * 2;
+  color: $grayDark;
+  border: 0;
+  border-bottom: 1px solid #e5e5e5;
+
+  // Small
+  small {
+    font-size: $baseLineHeight * .75;
+    color: $grayLight;
+  }
+}
+
+// Set font for forms
+label,
+input,
+button,
+select,
+textarea {
+  @include font-shorthand($baseFontSize,normal,$baseLineHeight); // Set size, weight, line-height here
+}
+input,
+button,
+select,
+textarea {
+  font-family: $baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
+}
+
+// Identify controls by their labels
+label {
+  display: block;
+  margin-bottom: 5px;
+}
+
+// Form controls
+// -------------------------
+
+// Shared size and type resets
+select,
+textarea,
+input[type="text"],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="search"],
+input[type="tel"],
+input[type="color"],
+.uneditable-input {
+  display: inline-block;
+  height: $baseLineHeight;
+  padding: 4px 6px;
+  font-size: $baseFontSize;
+  line-height: $baseLineHeight;
+  color: $inputText;
+  vertical-align: top;
+}
+
+// Reset appearance properties for textual inputs and textarea
+// Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
+input,
+textarea,
+.uneditable-input {
+  width: 206px; // plus 12px padding and 2px border
+}
+// Reset height since textareas have rows
+textarea {
+  height: auto;
+}
+
+// Everything else
+textarea,
+input[type="text"],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="search"],
+input[type="tel"],
+input[type="color"],
+.uneditable-input {
+  background-color: $inputBackground;
+  @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
+  @include transition("border linear .2s, box-shadow linear .2s");
+
+  // Focus state
+  &:focus {
+    border-color: rgba(82,168,236, .8);
+    outline: 0;
+    @include box-shadow("inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
+  }
+}
+
+// Position radios and checkboxes better
+input[type="radio"],
+input[type="checkbox"] {
+  margin: 4px 0 0;
+  line-height: normal;
+}
+
+// Reset width of input images, buttons, radios, checkboxes
+input[type="file"],
+input[type="image"],
+input[type="submit"],
+input[type="reset"],
+input[type="button"],
+input[type="radio"],
+input[type="checkbox"] {
+  width: auto; // Override of generic input selector
+}
+
+// Set the height of select and file controls to match text inputs
+select,
+input[type="file"] {
+  height: $inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */
+  line-height: $inputHeight;
+}
+
+// Make select elements obey height by applying a border
+select {
+  width: 220px; // default input width + 10px of padding that doesn't get applied
+  border: 1px solid $inputBorder;
+  background-color: $inputBackground; // Chrome on Linux and Mobile Safari need background-color
+}
+
+// Make multiple select elements height not fixed
+select[multiple],
+select[size] {
+  height: auto;
+}
+
+// Focus for select, file, radio, and checkbox
+select:focus,
+input[type="file"]:focus,
+input[type="radio"]:focus,
+input[type="checkbox"]:focus {
+  @include tab-focus();
+}
+
+// Placeholder
+// -------------------------
+
+// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector
+input,
+textarea {
+  @include placeholder();
+}
+
+
+// INPUT SIZES
+// -----------
+
+// General classes for quick sizes
+.input-mini       { width: 60px; }
+.input-small      { width: 90px; }
+.input-medium     { width: 150px; }
+.input-large      { width: 210px; }
+.input-xlarge     { width: 270px; }
+.input-xxlarge    { width: 530px; }
+
+// GRID SIZING FOR INPUTS
+// ----------------------
+
+// DISABLED STATE
+// --------------
+
+// Disabled and read-only inputs
+input[disabled],
+select[disabled],
+textarea[disabled],
+input[readonly],
+select[readonly],
+textarea[readonly] {
+  cursor: not-allowed;
+  background-color: $inputDisabledBackground;
+}
+
+// Explicitly reset the colors here
+input[type="radio"][disabled],
+input[type="checkbox"][disabled],
+input[type="radio"][readonly],
+input[type="checkbox"][readonly] {
+  background-color: transparent;
+}
+
+
+// HTML5 invalid states
+// Shares styles with the .control-group.error above
+input:focus:invalid,
+textarea:focus:invalid,
+select:focus:invalid {
+  color: #b94a48;
+  border-color: #ee5f5b;
+  &:focus {
+    border-color: darken(#ee5f5b, 10%);
+    $shadow: 0 0 6px lighten(#ee5f5b, 20%);
+    @include box-shadow($shadow);
+  }
+}
+
+input[type=text].input-fluid {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10px;
+  font-size: 16px;
+  -moz-box-sizing: border-box;
+  height: 100%;
+}
+
+input[type="checkbox"].cr1 {
+  display: none;
+}
+
+.editor-option label.cr1 {
+  display: inline-block;
+  margin: 5px 0 1px 0;
+}
+
+label.cr1 {
+  display: inline-block;
+  height: 19px;
+  position: relative;
+  clear: none;
+  text-indent: 2px;
+  margin: 0 0 0px 0;
+  padding: 0 0 0 20px;
+  vertical-align: top;
+  background: url($checkboxImageUrl) left top no-repeat;
+  cursor:pointer;
+}
+
+input[type="checkbox"]:checked+label {
+  background: url($checkboxImageUrl) 0px -21px no-repeat;
+}
+
+.gf-fluid-input {
+  border: none;
+  display: block;
+  overflow: hidden;
+  padding-right: 10px;
+  input[type=text] {
+    width: 100%;
+    padding: 5px 6px;
+    height: 100%;
+    box-sizing: border-box;
+  }
+  textarea {
+    width: 100%;
+    padding: 5px 6px;
+    height: 100%;
+    box-sizing: border-box;
+  }
+}
diff --git a/public/less/base/normalize.scss b/public/less/base/normalize.scss
new file mode 100644
index 00000000000..93dd4521727
--- /dev/null
+++ b/public/less/base/normalize.scss
@@ -0,0 +1,425 @@
+/*! normalize.css commit fe56763 | MIT License | github.com/necolas/normalize.css */
+
+//
+// 1. Set default font family to sans-serif.
+// 2. Prevent iOS and IE text size adjust after device orientation change,
+//    without disabling user zoom.
+//
+
+html {
+  font-family: sans-serif; // 1
+  -ms-text-size-adjust: 100%; // 2
+  -webkit-text-size-adjust: 100%; // 2
+}
+
+//
+// Remove default margin.
+//
+
+body {
+  margin: 0;
+}
+
+// HTML5 display definitions
+// ==========================================================================
+
+//
+// Correct `block` display not defined for any HTML5 element in IE 8/9.
+// Correct `block` display not defined for `details` or `summary` in IE 10/11
+// and Firefox.
+// Correct `block` display not defined for `main` in IE 11.
+//
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+//
+// 1. Correct `inline-block` display not defined in IE 8/9.
+// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+//
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; // 1
+  vertical-align: baseline; // 2
+}
+
+//
+// Prevent modern browsers from displaying `audio` without controls.
+// Remove excess height in iOS 5 devices.
+//
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+//
+// Address `[hidden]` styling not present in IE 8/9/10.
+// Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
+//
+
+[hidden],
+template {
+  display: none;
+}
+
+// Links
+// ==========================================================================
+
+//
+// Remove the gray background color from active links in IE 10.
+//
+
+a {
+  background-color: transparent;
+}
+
+//
+// Improve readability of focused elements when they are also in an
+// active/hover state.
+//
+
+a {
+  &:active {
+    outline: 0;
+  }
+  &:hover {
+    outline: 0;
+  }
+}
+
+// Text-level semantics
+// ==========================================================================
+
+//
+// Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+//
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+//
+// Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+//
+
+b,
+strong {
+  font-weight: bold;
+}
+
+//
+// Address styling not present in Safari and Chrome.
+//
+
+dfn {
+  font-style: italic;
+}
+
+//
+// Address variable `h1` font-size and margin within `section` and `article`
+// contexts in Firefox 4+, Safari, and Chrome.
+//
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+//
+// Address styling not present in IE 8/9.
+//
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+//
+// Address inconsistent and variable font size in all browsers.
+//
+
+small {
+  font-size: 80%;
+}
+
+//
+// Prevent `sub` and `sup` affecting `line-height` in all browsers.
+//
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+// Embedded content
+// ==========================================================================
+
+//
+// Remove border when inside `a` element in IE 8/9/10.
+//
+
+img {
+  border: 0;
+}
+
+//
+// Correct overflow not hidden in IE 9/10/11.
+//
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+// Grouping content
+// ==========================================================================
+
+//
+// Address margin not present in IE 8/9 and Safari.
+//
+
+figure {
+  margin: 1em 40px;
+}
+
+//
+// Address differences between Firefox and other browsers.
+//
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+}
+
+//
+// Contain overflow in all browsers.
+//
+
+pre {
+  overflow: auto;
+}
+
+//
+// Address odd `em`-unit font size rendering in all browsers.
+//
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+// Forms
+// ==========================================================================
+
+//
+// Known limitation: by default, Chrome and Safari on OS X allow very limited
+// styling of `select`, unless a `border` property is set.
+//
+
+//
+// 1. Correct color not being inherited.
+//    Known issue: affects color of disabled elements.
+// 2. Correct font properties not being inherited.
+// 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+//
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; // 1
+  font: inherit; // 2
+  margin: 0; // 3
+}
+
+//
+// Address `overflow` set to `hidden` in IE 8/9/10/11.
+//
+
+button {
+  overflow: visible;
+}
+
+//
+// Address inconsistent `text-transform` inheritance for `button` and `select`.
+// All other form control elements do not inherit `text-transform` values.
+// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+// Correct `select` style inheritance in Firefox.
+//
+
+button,
+select {
+  text-transform: none;
+}
+
+//
+// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+//    and `video` controls.
+// 2. Correct inability to style clickable `input` types in iOS.
+// 3. Improve usability and consistency of cursor style between image-type
+//    `input` and others.
+//
+
+button,
+html input[type="button"], // 1
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; // 2
+  cursor: pointer; // 3
+}
+
+//
+// Re-set default cursor for disabled elements.
+//
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+//
+// Remove inner padding and border in Firefox 4+.
+//
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+//
+// Address Firefox 4+ setting `line-height` on `input` using `!important` in
+// the UA stylesheet.
+//
+
+input {
+  line-height: normal;
+}
+
+//
+// It's recommended that you don't attempt to style these elements.
+// Firefox's implementation doesn't respect box-sizing, padding, or width.
+//
+// 1. Address box sizing set to `content-box` in IE 8/9/10.
+// 2. Remove excess padding in IE 8/9/10.
+//
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; // 1
+  padding: 0; // 2
+}
+
+//
+// Fix the cursor style for Chrome's increment/decrement buttons. For certain
+// `font-size` values of the `input`, it causes the cursor style of the
+// decrement button to change from `default` to `text`.
+//
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+//
+// Address `appearance` set to `searchfield` in Safari and Chrome.
+//
+
+input[type="search"] {
+  -webkit-appearance: textfield;
+}
+
+//
+// Remove inner padding and search cancel button in Safari and Chrome on OS X.
+// Safari (but not Chrome) clips the cancel button when the search input has
+// padding (and `textfield` appearance).
+//
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+//
+// Define consistent border, margin, and padding.
+//
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+//
+// 1. Correct `color` not being inherited in IE 8/9/10/11.
+// 2. Remove padding so people aren't caught out if they zero out fieldsets.
+//
+
+legend {
+  border: 0; // 1
+  padding: 0; // 2
+}
+
+//
+// Remove default vertical scrollbar in IE 8/9/10/11.
+//
+
+textarea {
+  overflow: auto;
+}
+
+//
+// Don't inherit the `font-weight` (applied by a rule above).
+// NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+//
+
+optgroup {
+  font-weight: bold;
+}
+
+// Tables
+// ==========================================================================
+
+//
+// Remove most spacing between table cells.
+//
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}
diff --git a/public/less/base/type.less b/public/less/base/type.less
index d00b10fb5d3..f75e52d0f90 100644
--- a/public/less/base/type.less
+++ b/public/less/base/type.less
@@ -141,20 +141,6 @@ dt {
 dd {
   margin-left: @baseLineHeight / 2;
 }
-// Horizontal layout (like forms)
-.dl-horizontal {
-  .clearfix(); // Ensure dl clears floats if empty dd elements present
-  dt {
-    float: left;
-    width: @horizontalComponentOffset - 20;
-    clear: left;
-    text-align: right;
-    .text-overflow();
-  }
-  dd {
-    margin-left: @horizontalComponentOffset;
-  }
-}
 
 // MISC
 // ----
diff --git a/public/less/base/type.scss b/public/less/base/type.scss
new file mode 100644
index 00000000000..f834bbf5ca6
--- /dev/null
+++ b/public/less/base/type.scss
@@ -0,0 +1,257 @@
+//
+// Typography
+// --------------------------------------------------
+
+
+// Body text
+// -------------------------
+
+p {
+  margin: 0 0 $baseLineHeight / 2;
+}
+.lead {
+  margin-bottom: $baseLineHeight;
+  font-size: $baseFontSize * 1.5;
+  font-weight: 200;
+  line-height: $baseLineHeight * 1.5;
+}
+
+// Emphasis & misc
+
+// -------------------------
+
+// Ex: 14px base font * 85% = about 12px
+.small, small   { font-size: 85%; }
+.large { font-size: 120%; }
+
+strong  { font-weight: bold; }
+em      { font-style: italic; color: $headingsColor; }
+cite    { font-style: normal; }
+
+// Utility classes
+.muted               { color: $grayLight; }
+a.muted:hover,
+a.muted:focus        { color: darken($grayLight, 10%); }
+
+.text-warning        { color: $warningText; }
+a.text-warning:hover,
+a.text-warning:focus { color: darken($warningText, 10%); }
+
+.text-error          { color: $errorText; }
+a.text-error:hover,
+a.text-error:focus   { color: darken($errorText, 10%); }
+
+.text-info           { color: $infoText; }
+a.text-info:hover,
+a.text-info:focus    { color: darken($infoText, 10%); }
+
+.text-success        { color: $successText; }
+a.text-success:hover,
+a.text-success:focus { color: darken($successText, 10%); }
+a { cursor: pointer; }
+
+.text-left           { text-align: left; }
+.text-right          { text-align: right; }
+.text-center         { text-align: center; }
+
+
+// Headings
+// -------------------------
+
+h1, h2, h3, h4, h5, h6 {
+  margin: ($baseLineHeight / 2) 0;
+  font-family: $headingsFontFamily;
+  font-weight: $headingsFontWeight;
+  line-height: $baseLineHeight;
+  color: $headingsColor;
+  text-rendering: optimizelegibility; // Fix the character spacing for headings
+  font-style: $headingsFontStyle;
+  small {
+    font-weight: normal;
+    line-height: 1;
+    color: $grayLight;
+  }
+}
+
+h1,
+h2,
+h3 { line-height: $baseLineHeight * 2; }
+
+h1 { font-size: $baseFontSize * 2.00; } // ~38px
+h2 { font-size: $baseFontSize * 1.75; } // ~32px
+h3 { font-size: $baseFontSize * 1.50; } // ~24px
+h4 { font-size: $baseFontSize * 1.25; } // ~18px
+h5 { font-size: $baseFontSize; }
+h6 { font-size: $baseFontSize * 0.85; } // ~12px
+
+h1 small { font-size: $baseFontSize * 1.75; } // ~24px
+h2 small { font-size: $baseFontSize * 1.25; } // ~18px
+h3 small { font-size: $baseFontSize; }
+h4 small { font-size: $baseFontSize; }
+
+
+// Lists
+// --------------------------------------------------
+
+// Unordered and Ordered lists
+ul, ol {
+  padding: 0;
+  margin: 0 0 $baseLineHeight / 2 25px;
+}
+ul ul,
+ul ol,
+ol ol,
+ol ul {
+  margin-bottom: 0;
+}
+li {
+  line-height: $baseLineHeight;
+}
+
+// Remove default list styles
+ul.unstyled,
+ol.unstyled {
+  margin-left: 0;
+  list-style: none;
+}
+
+// Single-line list items
+ul.inline,
+ol.inline {
+  margin-left: 0;
+  list-style: none;
+  > li {
+    display: inline-block;
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+}
+
+// Description Lists
+dl {
+  margin-bottom: $baseLineHeight;
+}
+dt,
+dd {
+  line-height: $baseLineHeight;
+}
+dt {
+  font-weight: bold;
+}
+dd {
+  margin-left: $baseLineHeight / 2;
+}
+// Horizontal layout (like forms)
+.dl-horizontal {
+  @include clearfix();
+  dt {
+    float: left;
+    width: $horizontalComponentOffset - 20;
+    clear: left;
+    text-align: right;
+    @include text-overflow();
+  }
+  dd {
+    margin-left: $horizontalComponentOffset;
+  }
+}
+
+// MISC
+// ----
+
+// Horizontal rules
+hr {
+  margin: $baseLineHeight 0;
+  border: 0;
+  border-top: 1px solid $hrBorder;
+  border-bottom: 1px solid $white;
+}
+
+// Abbreviations and acronyms
+abbr[title],
+// Added data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
+abbr[data-original-title] {
+  cursor: help;
+  border-bottom: 1px dotted $grayLight;
+}
+abbr.initialism {
+  font-size: 90%;
+  text-transform: uppercase;
+}
+
+// Blockquotes
+blockquote {
+  padding: 0 0 0 15px;
+  margin: 0 0 $baseLineHeight;
+  border-left: 5px solid $grayLighter;
+  p {
+    margin-bottom: 0;
+    font-size: $baseFontSize * 1.25;
+    font-weight: 300;
+    line-height: 1.25;
+  }
+  small {
+    display: block;
+    line-height: $baseLineHeight;
+    color: $grayLight;
+    &:before {
+      content: '\2014 \00A0';
+    }
+  }
+
+  // Float right with text-align: right
+  &.pull-right {
+    float: right;
+    padding-right: 15px;
+    padding-left: 0;
+    border-right: 5px solid $grayLighter;
+    border-left: 0;
+    p,
+    small {
+      text-align: right;
+    }
+    small {
+      &:before {
+        content: '';
+      }
+      &:after {
+        content: '\00A0 \2014';
+      }
+    }
+  }
+}
+
+// Quotes
+q:before,
+q:after,
+blockquote:before,
+blockquote:after {
+  content: "";
+}
+
+// Addresses
+address {
+  display: block;
+  margin-bottom: $baseLineHeight;
+  font-style: normal;
+  line-height: $baseLineHeight;
+}
+
+a.external-link {
+  color: $blue;
+  text-decoration: underline;
+}
+
+
+.link {
+  color: $linkColor;
+  cursor: pointer;
+}
+
+.link:hover {
+  color: $linkColorHover;
+}
+
+.pointer {
+  cursor: pointer;
+}
diff --git a/public/less/bootstrap/grid.scss b/public/less/bootstrap/grid.scss
new file mode 100644
index 00000000000..15b89a8703e
--- /dev/null
+++ b/public/less/bootstrap/grid.scss
@@ -0,0 +1,21 @@
+//
+// Grid system
+// --------------------------------------------------
+
+
+// Fixed (940px)
+#grid > .core($gridColumnWidth, $gridGutterWidth);
+
+// Fluid (940px)
+#grid > .fluid($fluidGridColumnWidth, $fluidGridGutterWidth);
+
+// Reset utility classes due to specificity
+[class*="span"].hide,
+.row-fluid [class*="span"].hide {
+  display: none;
+}
+
+[class*="span"].pull-right,
+.row-fluid [class*="span"].pull-right {
+  float: right;
+}
diff --git a/public/less/bootstrap/responsive-1200px-min.scss b/public/less/bootstrap/responsive-1200px-min.scss
new file mode 100644
index 00000000000..8b85385d84f
--- /dev/null
+++ b/public/less/bootstrap/responsive-1200px-min.scss
@@ -0,0 +1,28 @@
+//
+// Responsive: Large desktop and up
+// --------------------------------------------------
+
+
+@media (min-width: 1200px) {
+
+  // Fixed grid
+  #grid > .core($gridColumnWidth1200, $gridGutterWidth1200);
+
+  // Fluid grid
+  #grid > .fluid($fluidGridColumnWidth1200, $fluidGridGutterWidth1200);
+
+  // Input grid
+  #grid > .input($gridColumnWidth1200, $gridGutterWidth1200);
+
+  // Thumbnails
+  .thumbnails {
+    margin-left: -$gridGutterWidth1200;
+  }
+  .thumbnails > li {
+    margin-left: $gridGutterWidth1200;
+  }
+  .row-fluid .thumbnails {
+    margin-left: 0;
+  }
+
+}
diff --git a/public/less/bootstrap/responsive-767px-max.scss b/public/less/bootstrap/responsive-767px-max.scss
new file mode 100644
index 00000000000..5c01855cbc2
--- /dev/null
+++ b/public/less/bootstrap/responsive-767px-max.scss
@@ -0,0 +1,161 @@
+//
+// Responsive: Landscape phone to desktop/tablet
+// --------------------------------------------------
+
+
+@media (max-width: 767px) {
+
+  // GRID & CONTAINERS
+  // -----------------
+  // Remove width from containers
+  .container {
+    width: auto;
+  }
+  // Fluid rows
+  .row-fluid {
+    width: 100%;
+  }
+  // Undo negative margin on rows and thumbnails
+  .row,
+  .thumbnails {
+    margin-left: 0;
+  }
+  .thumbnails > li {
+    float: none;
+    margin-left: 0; // Reset the default margin for all li elements when no .span* classes are present
+  }
+  // Make all grid-sized elements block level again
+  [class*="span"],
+  .uneditable-input[class*="span"], // Makes uneditable inputs full-width when using grid sizing
+  .row-fluid [class*="span"] {
+    float: none;
+    display: block;
+    width: 100%;
+    margin-left: 0;
+    @include box-sizing(border-box);
+  }
+  .span12,
+  .row-fluid .span12 {
+    width: 100%;
+    @include box-sizing(border-box);
+  }
+  .row-fluid [class*="offset"]:first-child {
+    margin-left: 0;
+  }
+
+  // FORM FIELDS
+  // -----------
+  // Make span* classes full width
+  .input-large,
+  .input-xlarge,
+  .input-xxlarge,
+  input[class*="span"],
+  select[class*="span"],
+  textarea[class*="span"],
+  .uneditable-input {
+    @mixin input-block-level();
+  }
+  // But don't let it screw up prepend/append inputs
+  .input-prepend input,
+  .input-append input,
+  .input-prepend input[class*="span"],
+  .input-append input[class*="span"] {
+    display: inline-block; // redeclare so they don't wrap to new lines
+    width: auto;
+  }
+  .controls-row [class*="span"] + [class*="span"] {
+    margin-left: 0;
+  }
+
+  // Modals
+  .modal {
+    position: fixed;
+    top:   20px;
+    left:  20px;
+    right: 20px;
+    width: auto;
+    margin: 0;
+    &.fade  { top: -100px; }
+    &.fade.in { top: 20px; }
+  }
+
+}
+
+
+
+// UP TO LANDSCAPE PHONE
+// ---------------------
+
+@media (max-width: 480px) {
+
+  // Smooth out the collapsing/expanding nav
+  .nav-collapse {
+    -webkit-transform: translate3d(0, 0, 0); // activate the GPU
+  }
+
+  // Block level the page header small tag for readability
+  .page-header h1 small {
+    display: block;
+    line-height: $baseLineHeight;
+  }
+
+  // Update checkboxes for iOS
+  input[type="checkbox"],
+  input[type="radio"] {
+    border: 1px solid #ccc;
+  }
+
+  // Remove the horizontal form styles
+  .form-horizontal {
+    .control-label {
+      float: none;
+      width: auto;
+      padding-top: 0;
+      text-align: left;
+    }
+    // Move over all input controls and content
+    .controls {
+      margin-left: 0;
+    }
+    // Move the options list down to align with labels
+    .control-list {
+      padding-top: 0; // has to be padding because margin collaspes
+    }
+    // Move over buttons in .form-actions to align with .controls
+    .form-actions {
+      padding-left: 10px;
+      padding-right: 10px;
+    }
+  }
+
+  // Medias
+  // Reset float and spacing to stack
+  .media .pull-left,
+  .media .pull-right  {
+    float: none;
+    display: block;
+    margin-bottom: 10px;
+  }
+  // Remove side margins since we stack instead of indent
+  .media-object {
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  // Modals
+  .modal {
+    top:   10px;
+    left:  10px;
+    right: 10px;
+  }
+  .modal-header .close {
+    padding: 10px;
+    margin: -10px;
+  }
+
+  // Carousel
+  .carousel-caption {
+    position: static;
+  }
+
+}
diff --git a/public/less/bootstrap/responsive-768px-979px.scss b/public/less/bootstrap/responsive-768px-979px.scss
new file mode 100644
index 00000000000..cef846699c3
--- /dev/null
+++ b/public/less/bootstrap/responsive-768px-979px.scss
@@ -0,0 +1,19 @@
+//
+// Responsive: Tablet to desktop
+// --------------------------------------------------
+
+
+@media (min-width: 768px) and (max-width: 979px) {
+
+  // Fixed grid
+  #grid > .core($gridColumnWidth768, $gridGutterWidth768);
+
+  // Fluid grid
+  #grid > .fluid($fluidGridColumnWidth768, $fluidGridGutterWidth768);
+
+  // Input grid
+  #grid > .input($gridColumnWidth768, $gridGutterWidth768);
+
+  // No need to reset .thumbnails here since it's the same $gridGutterWidth
+
+}
diff --git a/public/less/bootstrap/responsive-utilities.scss b/public/less/bootstrap/responsive-utilities.scss
new file mode 100644
index 00000000000..eca42571a89
--- /dev/null
+++ b/public/less/bootstrap/responsive-utilities.scss
@@ -0,0 +1,59 @@
+//
+// Responsive: Utility classes
+// --------------------------------------------------
+
+
+// IE10 Metro responsive
+// Required for Windows 8 Metro split-screen snapping with IE10
+// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
+$-ms-viewport{
+  width: device-width;
+}
+
+// Hide from screenreaders and browsers
+// Credit: HTML5 Boilerplate
+.hidden {
+  display: none;
+  visibility: hidden;
+}
+
+// Visibility utilities
+
+// For desktops
+.visible-phone     { display: none !important; }
+.visible-tablet    { display: none !important; }
+.hidden-phone      { }
+.hidden-tablet     { }
+.hidden-desktop    { display: none !important; }
+.visible-desktop   { display: inherit !important; }
+
+// Tablets & small desktops only
+@media (min-width: 768px) and (max-width: 979px) {
+  // Hide everything else
+  .hidden-desktop    { display: inherit !important; }
+  .visible-desktop   { display: none !important ; }
+  // Show
+  .visible-tablet    { display: inherit !important; }
+  // Hide
+  .hidden-tablet     { display: none !important; }
+}
+
+// Phones only
+@media (max-width: 767px) {
+  // Hide everything else
+  .hidden-desktop    { display: inherit !important; }
+  .visible-desktop   { display: none !important; }
+  // Show
+  .visible-phone     { display: inherit !important; } // Use inherit to restore previous behavior
+  // Hide
+  .hidden-phone      { display: none !important; }
+}
+
+// Print utilities
+.visible-print    { display: none !important; }
+.hidden-print     { }
+
+@media print {
+  .visible-print  { display: inherit !important; }
+  .hidden-print   { display: none !important; }
+}
diff --git a/public/less/bootstrap/responsive.scss b/public/less/bootstrap/responsive.scss
new file mode 100644
index 00000000000..8f4888f23d5
--- /dev/null
+++ b/public/less/bootstrap/responsive.scss
@@ -0,0 +1,27 @@
+/*!
+ * Bootstrap Responsive v2.3.2
+ *
+ * Copyright 2013 Twitter, Inc
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Designed and built with all the love in the world by $mdo and $fat.
+ */
+
+
+// Responsive.scss
+// For phone and tablet devices
+// -------------------------------------------------------------
+
+
+// REPEAT VARIABLES & MIXINS
+// -------------------------
+// Required since we compile the responsive stuff separately
+
+@import "../mixins/mixins.scss";
+@import "responsive-utilities.scss";
+@import "responsive-1200px-min.scss";
+@import "responsive-768px-979px.scss";
+@import "responsive-767px-max.scss";
+
+
diff --git a/public/less/components/alerts.scss b/public/less/components/alerts.scss
new file mode 100644
index 00000000000..b6a79ae8a53
--- /dev/null
+++ b/public/less/components/alerts.scss
@@ -0,0 +1,68 @@
+//
+// Alerts
+// --------------------------------------------------
+
+
+// Base styles
+// -------------------------
+
+.alert {
+  padding: 8px 35px 13px 14px;
+  margin-bottom: $baseLineHeight;
+  text-shadow: 0 1px 0 rgba(255,255,255,.5);
+  background-color: $warningBackground;
+  position: relative;
+  color: $white;
+  text-shadow: 0 1px 0 rgba(0,0,0,.5);
+  border-radius: 2px;
+}
+
+// Alternate styles
+// -------------------------
+
+.alert-success {
+  background-color: $successBackground;
+}
+
+.alert-danger,
+.alert-error {
+  background-color: $errorBackground;
+}
+.alert-info {
+  background-color: $infoBackground;
+}
+.alert-warning {
+  background-color: $warningBackground;
+}
+
+.page-alert-list {
+  z-index: 8000;
+  min-width: 300px;
+  max-width: 300px;
+  position: fixed;
+  right: 20px;
+  top: 56px;
+}
+
+.alert-close {
+  position: absolute;
+  top: -4px;
+  right: -2px;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  background: $white;
+  border-radius: 50%;
+  border: none;
+  font-size: 1.1rem;
+  color: $grayDarker;
+  .fa {
+    position: relative;
+    top: -2px;
+  }
+}
+
+.alert-title {
+  font-weight: $fontWeightSemi;
+  padding-bottom: 2px;
+}
diff --git a/public/less/components/buttons.scss b/public/less/components/buttons.scss
new file mode 100644
index 00000000000..b6a0b986b37
--- /dev/null
+++ b/public/less/components/buttons.scss
@@ -0,0 +1,102 @@
+//
+// Buttons
+// --------------------------------------------------
+
+// Base styles
+// --------------------------------------------------
+
+// Core
+.btn {
+  display: inline-block;
+	padding: 8px 12px;
+	margin-right: 10px;
+  font-size: $baseFontSize;
+  line-height: $baseLineHeight;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  border: none;
+
+  @include buttonBackground($btnBackground, $btnBackgroundHighlight,  $grayDark, 0 1px 1px rgba(255,255,255,.75));
+  @include box-shadow("inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
+
+  // Hover/focus state
+  &:hover,
+  &:focus {
+    text-decoration: none;
+  }
+
+  // Focus state for keyboard and accessibility
+  &:focus {
+    @include tab-focus();
+  }
+
+  // Active state
+  &.active,
+  &:active {
+    background-image: none;
+  }
+
+  // Disabled state
+  &.disabled,
+  &[disabled] {
+    cursor: default;
+    background-image: none;
+    @include opacity(65);
+  }
+}
+
+// Button Sizes
+// --------------------------------------------------
+
+// Large
+.btn-large {
+  padding: 6px 20px;
+  font-size: $fontSizeLarge;
+}
+
+.btn-small {
+	padding: 2px 10px;
+  font-size: $fontSizeSmall;
+}
+
+.btn-mini {
+	padding: 2px 6px;
+	margin-right: 0;
+	margin-right: 0;
+  font-size: $fontSizeMini;
+}
+
+// Set the backgrounds
+// -------------------------
+.btn-primary {
+  @include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight);
+}
+// Warning appears are orange
+.btn-warning {
+  @include buttonBackground($btnWarningBackground, $btnWarningBackgroundHighlight);
+}
+// Danger and error appear as red
+.btn-danger {
+  @include buttonBackground($btnDangerBackground, $btnDangerBackgroundHighlight);
+}
+// Success appears as green
+.btn-success {
+  @include buttonBackground($btnSuccessBackground, $btnSuccessBackgroundHighlight);
+}
+// Info appears as a neutral blue
+.btn-info {
+  @include buttonBackground($btnInfoBackground, $btnInfoBackgroundHighlight);
+}
+// Inverse appears as dark gray
+.btn-inverse {
+  @include buttonBackground($btnInverseBackground, $btnInverseBackgroundHighlight, $btnInverseText);
+  box-shadow: none;
+  border: 1px solid $grafanaTargetFuncHightlight;
+}
+
+.btn-text {
+  color: $btnText;
+  margin: 0;
+  vertical-align: middle;
+}
diff --git a/public/less/components/color_picker.scss b/public/less/components/color_picker.scss
new file mode 100644
index 00000000000..bc3c11aed0c
--- /dev/null
+++ b/public/less/components/color_picker.scss
@@ -0,0 +1,37 @@
+
+.sp-replacer {
+  background: inherit;
+  border: none;
+  color: inherit;
+  padding: 0;
+}
+
+.sp-replacer:hover, .sp-replacer.sp-active {
+  border-color: inherit;
+  color: inherit;
+}
+
+.sp-container {
+  border-radius: 0;
+  background-color: $heroUnitBackground;
+  border: none;
+  padding: 0;
+}
+
+.sp-palette-container, .sp-picker-container {
+  border: none;
+}
+
+.sp-dd {
+  display: none;
+}
+
+.sp-preview {
+  position: relative;
+  width: 15px;
+  height: 15px;
+  border: none;
+  margin-right: 5px;
+  float: left;
+  z-index: 0;
+}
diff --git a/public/less/components/dashboard.scss b/public/less/components/dashboard.scss
new file mode 100644
index 00000000000..bea7058d87d
--- /dev/null
+++ b/public/less/components/dashboard.scss
@@ -0,0 +1,285 @@
+.template-variable {
+  color: $variable;
+}
+
+.grafana-row {
+  margin-bottom: 5px;
+}
+
+.row-tab {
+  .dropdown-menu-right {
+    top: 0;
+    left: 33px;
+  }
+}
+
+.row-tab-button {
+  padding: 0px;
+  cursor: pointer;
+  vertical-align: middle;
+  width: 30px;
+  height: 30px;
+  text-align: center;
+  display: inline-block;
+  line-height: 30px;
+  background: $btnSuccessBackground;
+  color: rgba(255,255,255,.90);
+}
+
+.row-button {
+  width: 24px;
+  float: left;
+  cursor: pointer;
+  line-height: 31px;
+  background-color: $blueDark;
+}
+
+.row-text {
+  white-space: nowrap;
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 0.9em;
+  text-align: center;
+  line-height: 31px;
+  height: 31px;
+}
+
+.row-close {
+  padding: 0px;
+  margin: 0px;
+  background: $grafanaPanelBackground;
+  text-align: center;
+}
+
+.row-close-buttons {
+  position: absolute;
+  left: 0;
+}
+
+.row-open {
+  margin-top: 5px;
+  left: -28px;
+  position: absolute;
+  z-index: 100;
+  transition: .10s left;
+  transition-delay: .10s;
+
+  &:hover {
+    left: -12px;
+  }
+}
+
+
+.row-control-inner {
+  padding:0px;
+  margin:0px;
+  position:relative;
+}
+
+.hide-controls {
+  padding: 0;
+  .row-tab {
+    display: none;
+  }
+  .add-row-panel-hint {
+    display: none;
+  }
+}
+
+.playlist-active {
+  .add-row-panel-hint,
+  .dashnav-refresh-action,
+  .dashnav-zoom-out,
+  .dashnav-action-icons {
+    display: none;
+  }
+
+  .grafana-menu-stop-playlist {
+    display: list-item;
+  }
+}
+
+div.flot-text {
+  color: $textColor !important;
+}
+
+.panel {
+  display: inline-block;
+  float: left;
+  vertical-align: top;
+  position: relative;
+}
+
+.panel-margin {
+  margin: 5px;
+  display: block;
+}
+
+.panel-container {
+  background-color: $grafanaPanelBackground;
+  position: relative;
+  border: $grafanaPanelBorder;
+  &:hover {
+    .panel-actions {
+      display: block;
+    }
+  }
+
+  &.panel-transparent {
+    background-color: transparent;
+    border: none;
+  }
+}
+
+.panel-content {
+  padding: 0px 10px 5px 10px;
+}
+
+.panel-title-container {
+  min-height: 5px;
+  padding-top: 4px;
+  cursor: pointer;
+}
+
+.panel-title {
+  border: 0px;
+  font-weight: $fontWeightSemi;
+  position: relative;
+  cursor: pointer;
+  width: 100%;
+  display: block;
+}
+
+.panel-links-btn {
+  margin-left: 10px;
+  display: none;
+}
+
+.panel-loading {
+  position:absolute;
+  top: -3px;
+  right: 0px;
+  z-index: 800;
+}
+
+.panel-header {
+  text-align: center;
+}
+
+.panel-error {
+  color: $white;
+  position: absolute;
+  left: 0;
+  padding: 0px 17px 6px 5px;
+  top: 0;
+  z-index: 10;
+  i {
+    position: relative;
+    top: -2px;
+  }
+}
+
+.panel-error-arrow {
+  width: 0;
+  height: 0;
+  position: absolute;
+  border-left: 31px solid transparent;
+  border-right: 30px solid transparent;
+  border-bottom: 27px solid $grafanaPanelBackground;
+  left: 0;
+  bottom: 0;
+}
+
+.panel-fullscreen {
+  .panel-title-container {
+    padding: 8px;
+  }
+}
+
+.panel-full-edit {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.panel-menu {
+  z-index: 500;
+  position: absolute;
+  background: $grafanaTargetFuncBackground;
+  border: 1px solid black;
+
+  .panel-menu-row {
+    white-space: nowrap;
+    border-bottom: 1px solid black;
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .panel-menu-link, .panel-menu-icon {
+    padding: 5px 10px;
+  }
+
+  .panel-menu-link {
+    display: inline-block;
+    border-right: 1px solid black;
+    &:last-child {
+      border: none;
+    }
+  }
+
+  .dropdown-menu {
+    text-align: left;
+  }
+}
+
+.panel-highlight  {
+  @include box-shadow("inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(82,168,236, 0.8)");
+}
+
+.on-drag-hover {
+  .panel-container {
+    @include box-shadow("inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(82,168,236, 0.8)");
+  }
+}
+
+.panel-drop-zone {
+  display: none;
+  .panel-container {
+    border: 1px solid $grayDark;
+  }
+}
+
+.panel-time-info {
+  font-weight: bold;
+  float: right;
+  margin-right: 15px;
+  color: $blue;
+  font-size: 85%;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.resize-panel-handle {
+  cursor: se-resize;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 15px;
+  height: 15px;
+  display: block;
+}
+
+.dashboard-header {
+  font-family: "grafana-icons";
+  font-size: 22px;
+  text-align: center;
+  span {
+    display: inline-block;
+    border: none;
+    border-image: linear-gradient(to right, rgba(255,213,0,1) 0%, rgba(255,68,0,1) 99%, rgba(255,68,0,1) 100%);
+    border-image-slice: 1;
+    border-bottom: 2px solid transparent;
+    padding: 1.2rem .2rem .4rem .2rem;
+  }
+}
diff --git a/public/less/components/dropdown.scss b/public/less/components/dropdown.scss
new file mode 100644
index 00000000000..b9ad1574bb1
--- /dev/null
+++ b/public/less/components/dropdown.scss
@@ -0,0 +1,236 @@
+//
+// Dropdown menus
+// --------------------------------------------------
+
+
+// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
+.dropup,
+.dropdown {
+  position: relative;
+}
+.dropdown-toggle {
+  // The caret makes the toggle a bit too tall in IE7
+  *margin-bottom: -3px;
+}
+.dropdown-toggle:active,
+.open .dropdown-toggle {
+  outline: 0;
+}
+
+// Dropdown arrow/caret
+// --------------------
+.caret {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  vertical-align: top;
+  border-top:   4px solid $black;
+  border-right: 4px solid transparent;
+  border-left:  4px solid transparent;
+  content: "";
+}
+
+// Place the caret
+.dropdown .caret {
+  margin-top: 8px;
+  margin-left: 2px;
+}
+
+// The dropdown menu (ul)
+// ----------------------
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: $zindexDropdown;
+  display: none; // none by default, but block on "open" of the menu
+  float: left;
+  min-width: 140px;
+  padding: 5px 0;
+  margin: 2px 0 0; // override default ul
+  list-style: none;
+  background-color: $dropdownBackground;
+  border: 1px solid #ccc; // Fallback for IE7-8
+  border: 1px solid $dropdownBorder;
+
+  // Aligns the dropdown menu to right
+  &.pull-right {
+    right: 0;
+    left: auto;
+  }
+
+  // Links within the dropdown menu
+  > li > a {
+    display: block;
+    padding: 3px 20px 3px 15px;
+    clear: both;
+    font-weight: normal;
+    line-height: $baseLineHeight;
+    color: $dropdownLinkColor;
+    white-space: nowrap;
+
+    i {
+      padding-right: 5px;
+      color: $linkColorDisabled;
+    }
+  }
+}
+
+// Hover/Focus state
+// -----------
+.dropdown-menu > li > a:hover,
+.dropdown-menu > li > a:focus,
+.dropdown-submenu:hover > a,
+.dropdown-submenu:focus > a {
+  text-decoration: none;
+  color: $dropdownLinkColorHover;
+  background-color: $grafanaListHighlight;
+}
+
+// Active state
+// ------------
+.dropdown-menu > .active > a,
+.dropdown-menu > .active > a:hover,
+.dropdown-menu > .active > a:focus {
+  color: $dropdownLinkColorActive;
+  text-decoration: none;
+  outline: 0;
+  background-color: $grafanaListHighlight;
+}
+
+// Disabled state
+// --------------
+// Gray out text and ensure the hover/focus state remains gray
+.dropdown-menu > .disabled > a,
+.dropdown-menu > .disabled > a:hover,
+.dropdown-menu > .disabled > a:focus {
+  color: $grayLight;
+}
+// Nuke hover/focus effects
+.dropdown-menu > .disabled > a:hover,
+.dropdown-menu > .disabled > a:focus {
+  text-decoration: none;
+  background-color: transparent;
+  background-image: none; // Remove CSS gradient
+  cursor: default;
+}
+
+// Open state for the dropdown
+// ---------------------------
+.open {
+  & > .dropdown-menu {
+    display: block;
+  }
+}
+
+// Backdrop to catch body clicks on mobile, etc.
+// ---------------------------
+.dropdown-backdrop {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  z-index: $zindexDropdown - 10;
+}
+
+// Right aligned dropdowns
+// ---------------------------
+.pull-right > .dropdown-menu {
+  right: 0;
+  left: auto;
+}
+
+// Allow for dropdowns to go bottom up (aka, dropup-menu)
+// ------------------------------------------------------
+// Just add .dropup after the standard .dropdown class and you're set, bro.
+// TODO: abstract this so that the navbar fixed styles are not placed here?
+.dropup,
+.navbar-fixed-bottom .dropdown {
+  // Reverse the caret
+  .caret {
+    border-top: 0;
+    border-bottom: 4px solid $black;
+    content: "";
+  }
+  // Different positioning for bottom up menu
+  .dropdown-menu {
+    top: auto;
+    bottom: 100%;
+    margin-bottom: 1px;
+  }
+}
+
+// Sub menus
+// ---------------------------
+.dropdown-submenu {
+  position: relative;
+}
+// Default dropdowns
+.dropdown-submenu > .dropdown-menu {
+  top: 0;
+  left: 100%;
+  margin-top: -6px;
+  margin-left: -1px;
+  @include border-radius(0 6px 6px 6px);
+}
+.dropdown-submenu:hover > .dropdown-menu {
+  display: block;
+}
+
+// Dropups
+.dropup .dropdown-submenu > .dropdown-menu {
+  top: auto;
+  bottom: 0;
+  margin-top: 0;
+  margin-bottom: -2px;
+  @include border-radius(5px 5px 5px 0);
+}
+
+// Caret to indicate there is a submenu
+.dropdown-submenu > a:after {
+  display: block;
+  content: " ";
+  float: right;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 5px 0 5px 5px;
+  border-left-color: darken($dropdownBackground, 20%);
+  margin-top: 5px;
+  margin-right: -10px;
+}
+.dropdown-submenu:hover > a:after {
+  border-left-color: $dropdownLinkColorHover;
+}
+
+// Left aligned submenus
+.dropdown-submenu.pull-left {
+  // Undo the float
+  // Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere.
+  float: none;
+
+  // Positioning the submenu
+  > .dropdown-menu {
+    left: -100%;
+    margin-left: 10px;
+    @include border-radius(6px 0 6px 6px);
+  }
+}
+
+// Tweak nav headers
+// -----------------
+// Increase padding from 15px to 20px on sides
+.dropdown .dropdown-menu .nav-header {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+// Typeahead
+// ---------
+.typeahead {
+  z-index: 1051;
+  margin-top: 2px; // give it some space to breathe
+  @include border-radius($baseBorderRadius);
+}
diff --git a/public/less/components/filter-controls.scss b/public/less/components/filter-controls.scss
new file mode 100644
index 00000000000..287bebe3757
--- /dev/null
+++ b/public/less/components/filter-controls.scss
@@ -0,0 +1,37 @@
+// ==========================================================================
+// FILTER CONTROLS
+// ==========================================================================
+
+
+
+// Filters
+// --------------------------------------------------------------------------
+
+.filter-controls-filters {
+  display: inline-block;
+  margin-bottom: 40px;
+}
+
+.tab-pane > .filter-controls-filters {
+  margin-top: 20px;
+}
+
+
+
+// Actions
+// --------------------------------------------------------------------------
+
+.filter-controls-actions {
+  margin: 0 0 10px;
+  padding: 0;
+  list-style: none;
+}
+
+.filter-controls-actions > li {
+  display: inline-block;
+  margin-right: 10px;
+}
+
+.filter-controls-actions-selected {
+  text-transform: uppercase;
+}
diff --git a/public/less/components/filter-list.scss b/public/less/components/filter-list.scss
new file mode 100644
index 00000000000..73f8057b686
--- /dev/null
+++ b/public/less/components/filter-list.scss
@@ -0,0 +1,142 @@
+// ==========================================================================
+// FILTER LIST
+// ==========================================================================
+
+
+
+// List
+// --------------------------------------------------------------------------
+
+.filter-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.filter-list > li {
+  padding: 10px;
+  margin-bottom: 2px;
+  background: $grafanaPanelBackground;
+
+  &:last-child {
+    margin: 0;
+  }
+}
+
+
+
+// Card
+// --------------------------------------------------------------------------
+
+.filter-list-card {
+  display: table;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.filter-list-card > li {
+  display: table-cell;
+  vertical-align: top;
+}
+
+.filter-list-card-select {
+  width: 23px;
+  padding-right: 5px;
+}
+
+.filter-list-card-title {
+  display: block;
+  font-size: 16px;
+  font-weight: normal;
+}
+
+.filter-list-card-image {
+  width: 50px;
+  padding: 5px 50px 5px 5px;
+}
+
+
+.filter-list-card-status {
+  color: #777;
+  font-size: 12px;
+}
+
+.filter-list-card-state {
+  display: inline-block;
+  padding: 5px 0 0 28px;
+  background: 0 bottom no-repeat;
+  background-size: 24px auto;
+  font-size: 14px;
+  text-transform: uppercase;
+
+  &.online {
+    background-image: url('/img/online.svg');
+    color: $online;
+  }
+
+  &.warn {
+    background-image: url('/img/warn-tiny.svg');
+    color: $warn;
+  }
+
+  &.critical {
+    background-image: url('/img/critical.svg');
+    color: $critical;
+  }
+}
+
+.filter-list-card-controls {
+  float: right;
+}
+
+.filter-list-card-links,
+.filter-list-card-config,
+.filter-list-card-expand {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.filter-list-card-link {
+  display: block;
+  color: #777;
+  text-align: right;
+
+  > a {
+    color: #777;
+  }
+}
+
+.filter-list-card-config {
+  padding: 8px 8px 8px 16px;
+  color: #777;
+  font-size: 25px;
+
+  > a {
+    color: #777;
+  }
+}
+
+.filter-list-card-expand {
+  width: 20px;
+  padding: 8px 0 8px 8px;
+  color: #aaa;
+  font-size: 30px;
+  text-align: center;
+  cursor: pointer;
+}
+
+.filter-list-card-details {
+  padding: 20px 0 0 30px;
+}
+
+.filter-list-card-details-heading {
+  font-weight: normal;
+
+  > a {
+    float: right;
+    color: $blue;
+    font-size: 12px;
+  }
+}
diff --git a/public/less/components/filter-table.scss b/public/less/components/filter-table.scss
new file mode 100644
index 00000000000..28fcefb1b3d
--- /dev/null
+++ b/public/less/components/filter-table.scss
@@ -0,0 +1,57 @@
+// ==========================================================================
+// FILTER TABLE
+// ==========================================================================
+
+
+
+// Table
+// --------------------------------------------------------------------------
+
+.filter-table * {
+  box-sizing: border-box;
+}
+
+.filter-table {
+  width: 100%;
+  border-collapse: collapse;
+  // table-layout: fixed;
+}
+
+.filter-table tr {
+  background: $grafanaListBackground;
+  border-bottom: 2px solid $pageBackground;
+}
+
+.filter-table th {
+  width: auto;
+  padding: 10px 15px 10px 0;
+  text-align: left;
+
+  &:first-child {
+    padding-left: 15px;
+  }
+}
+
+.filter-table td {
+  padding: 15px 15px 15px 0;
+
+  &:first-child {
+    padding-left: 15px;
+  }
+}
+
+.filter-table .ellipsis {
+  display: block;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.filter-table .expanded {
+  border-color: $grafanaPanelBackground;
+}
+
+.filter-table .expanded > td {
+  padding-bottom: 0;
+}
diff --git a/public/less/components/footer.scss b/public/less/components/footer.scss
new file mode 100644
index 00000000000..302fd8ee142
--- /dev/null
+++ b/public/less/components/footer.scss
@@ -0,0 +1,9 @@
+.grafana-version-info {
+  position: absolute;
+  bottom: 2px;
+  left: 3px;
+  font-size: 80%;
+  color: darken($gray, 25%);
+  a { color: darken($gray, 25%); }
+}
+
diff --git a/public/less/components/gf-form.scss b/public/less/components/gf-form.scss
new file mode 100644
index 00000000000..78f42e4a68d
--- /dev/null
+++ b/public/less/components/gf-form.scss
@@ -0,0 +1,71 @@
+.gf-form {
+  margin-top: 3px;
+  margin-right: 3px;
+  display: inline-block;
+
+  .checkbox-label {
+    display: inline;
+    padding: 8px 7px 8px 4px;
+  }
+  .cr1 {
+    margin-left: 8px;
+  }
+}
+
+.gf-form-group {
+  margin-bottom: 20px;
+}
+
+.gf-form-flow {
+  float: left;
+  margin-right: 20px;
+}
+
+.gf-form-button-row {
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+
+.gf-form-label {
+  background-color: $labelBackground;
+  display: inline-block;
+  padding: 8px 7px;
+  @include small;
+}
+
+[type=text],
+[type=email],
+[type=number],
+[type=password], {
+  &.gf-form-input {
+    border: none;
+    margin: 0px;
+    border-radius: 0;
+    padding: 8px 6px;
+    height: 100%;
+    box-sizing: border-box;
+    font-size: 15px;
+  }
+}
+
+input[type=checkbox].gf-form-checkbox {
+  margin: 0;
+}
+
+select.gf-form-input {
+  padding: 2px 3px;
+  font-size: 15px;
+  box-sizing: content-box;
+}
+
+.gf-size-xs { width: 60px; }
+.gf-size-s { width: 80px; }
+.gf-size-ms { width: 100px;}
+.gf-size-m { width: 110px; }
+.gf-size-l { width: 120px; }
+.gf-size-xl { width: 150px; }
+.gf-size-xxl { width: 200px; }
+.gf-size-xxxl { width: 300px; }
+.gf-size-auto { width: auto; }
+
+
diff --git a/public/less/components/gfbox.scss b/public/less/components/gfbox.scss
new file mode 100644
index 00000000000..544bbe11f1d
--- /dev/null
+++ b/public/less/components/gfbox.scss
@@ -0,0 +1,69 @@
+.gf-box {
+  margin: 10px 5px;
+  background-color: $grafanaPanelBackground;
+  position: relative;
+  border: 1px solid $grafanaTargetFuncBackground;
+}
+
+.gf-box-no-margin {
+  margin: 0;
+}
+
+.gf-box-header-close-btn {
+  float: right;
+  padding: 0;
+  margin: 0;
+  background-color: transparent;
+  border: none;
+  padding: 8px;
+  i {
+    font-size: 120%;
+  }
+  color: $textColor;
+  &:hover {
+    color: $white;
+  }
+}
+
+.gf-box-header-save-btn {
+  padding: 7px 0;
+  float: right;
+  color: $grayLight;
+  font-style: italic;
+}
+
+.gf-box-body {
+  padding: 20px;
+  min-height: 150px;
+}
+
+.gf-box-footer {
+  overflow: hidden;
+}
+
+.gf-box-header {
+  border-bottom: 1px solid $grafanaTargetFuncBackground;
+  overflow: hidden;
+  background-color: $grafanaTargetBackground;
+  .tabs {
+    float: left;
+  }
+  .nav {
+    margin: 0;
+  }
+}
+
+.gf-box-title {
+  padding-right: 20px;
+  padding-left: 10px;
+  float: left;
+  color: $linkColor;
+  font-size: 18px;
+  font-weight: normal;
+  line-height: 38px;
+  margin: 0;
+  .fa {
+    padding: 0 8px 0 5px;
+    color: $textColor;
+  }
+}
diff --git a/public/less/components/infobox.scss b/public/less/components/infobox.scss
new file mode 100644
index 00000000000..82fd07633bb
--- /dev/null
+++ b/public/less/components/infobox.scss
@@ -0,0 +1,20 @@
+.grafana-info-box:before {
+  content: "\f05a";
+  font-family:'FontAwesome';
+  position: absolute;
+  top: -8px;
+  left: -8px;
+  font-size: 20px;
+  color: $blue;
+}
+
+.grafana-info-box {
+  position: relative;
+  padding: 5px 15px;
+  background-color: $grafanaTargetBackground;
+  border: 1px solid $grafanaTargetBorder;
+  h5 {
+    margin-top: 5px;
+  }
+}
+
diff --git a/public/less/components/modals.scss b/public/less/components/modals.scss
new file mode 100644
index 00000000000..6165766e80f
--- /dev/null
+++ b/public/less/components/modals.scss
@@ -0,0 +1,149 @@
+//
+// Modals
+// --------------------------------------------------
+
+// Background
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: $zindexModalBackdrop;
+  background-color: $black;
+}
+
+.modal-backdrop,
+.modal-backdrop.fade.in {
+  @include opacity(70);
+}
+
+// Base modal
+.modal {
+  position: fixed;
+  z-index: $zindexModal;
+  width: 100%;
+	background-color: $grafanaPanelBackground;
+  @include box-shadow(0 3px 7px rgba(0,0,0,0.3));
+  @include background-clip(padding-box);
+  outline: none;
+
+  max-width: 800px;
+  left: 0;
+  right: 0;
+  margin-left: auto;
+  margin-right: auto;
+  top: 20%;
+}
+
+.modal-header {
+  padding: 9px 15px;
+	border-bottom: 1px solid $grafanaPanelBackground;
+}
+
+// Body (where all modal content resides)
+.modal-body {
+  position: relative;
+  overflow-y: auto;
+}
+
+// Remove bottom margin if need be
+.modal-form {
+  margin-bottom: 0;
+}
+
+// Footer (for actions)
+.modal-footer {
+  padding: 14px 15px 15px;
+	border-top: 1px solid $grafanaPanelBackground;
+  background-color: $grafanaPanelBackground;
+  text-align: right; // right align buttons
+  @include clearfix(); // clear it in case folks use .pull-* classes on buttons
+}
+
+.modal-no-header {
+  border: 1px solid $grafanaTargetFuncBackground;
+  text-align: center;
+
+  h3 {
+    margin-top: 30px;
+  }
+
+  .modal-close {
+    float: right;
+    font-size: 140%;
+    padding: 10px;
+  }
+
+  .modal-tagline {
+    font-size: 16px;
+  }
+}
+
+.confirm-modal {
+  max-width: 500px;
+
+  .confirm-modal-icon {
+    padding-top: 41px;
+    font-size: 280%;
+    color: $green;
+    padding-bottom: 20px;
+  }
+
+  .confirm-modal-title {
+    font-size: 18px;
+    color: $linkColor;
+    margin-bottom: 15px;
+  }
+
+  .confirm-modal-buttons {
+    margin-top: 35px;
+    margin-bottom: 35px;
+    button {
+      margin-right: 5px
+    }
+  }
+}
+
+.share-modal-body {
+  text-align: center;
+  padding: 10px 0;
+
+  .tight-form {
+    text-align: left;
+  }
+
+  .share-modal-options {
+    margin: 11px 20px 33px 20px;
+  }
+
+  .share-modal-big-icon {
+    .fa, .icon-gf {
+      font-size: 70px;
+    }
+  }
+
+  .share-snapshot-info-text {
+    margin: 10px 105px;
+    strong {
+      color: $headingsColor;
+      font-weight: 500;
+    }
+  }
+
+  .share-snapshot-header {
+    margin: 20px 0 22px 0;
+  }
+
+  .tight-form {
+    text-align: left;
+  }
+
+  .share-snapshot-link {
+    max-width: 716px;
+    white-space: nowrap;
+    overflow: hidden;
+    display: block;
+    text-overflow: ellipsis;
+  }
+}
diff --git a/public/less/components/navbar.scss b/public/less/components/navbar.scss
new file mode 100644
index 00000000000..92aaf8b2176
--- /dev/null
+++ b/public/less/components/navbar.scss
@@ -0,0 +1,178 @@
+
+
+.navbar {
+  overflow: visible;
+  position: relative;
+  z-index: 110;
+}
+
+.navbar-inner {
+  min-height: $navbarHeight;
+  padding-right: 20px;
+  background-color: $navbarBackground;
+  border-bottom: $navbarBorder;
+
+  @include clearfix();
+}
+
+.navbar .nav {
+  position: relative;
+  left: 0;
+  float: left;
+  margin: 0 10px 0 0;
+}
+
+.nav {
+  display: block;
+}
+
+.navbar .nav.pull-right {
+  float: right; // redeclare due to specificity
+  margin-right: 0; // remove margin on float right nav
+}
+
+.navbar .nav > li {
+  float: left;
+}
+
+// Links
+.navbar .nav > li > a {
+  float: none;
+  padding: 17px 13px 13px;
+  color: $navbarLinkColor;
+  text-decoration: none;
+
+  .fa { font-size: 115%; }
+}
+
+// Hover/focus
+.navbar .nav > li > a:focus,
+.navbar .nav > li > a:hover {
+  background-color: $navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover/:focus from .active
+  color: $navbarLinkColorHover;
+  text-decoration: none;
+}
+
+// Active nav items
+.navbar .nav > .active > a,
+.navbar .nav > .active > a:hover,
+.navbar .nav > .active > a:focus {
+  color: $navbarLinkColorActive;
+  text-decoration: none;
+  background-color: $navbarLinkBackgroundActive;
+}
+
+
+.fa.top-nav-breadcrumb-icon {
+  margin: 18px 0 6px 5px;
+  float: left;
+  font-size: 120%;
+  color: $textColor;
+}
+
+.top-nav-btn {
+  display: block;
+  position: relative;
+  float: left;
+  margin: 0;
+  font-size: 1.4em;
+  border-right: 1px solid $grafanaTargetBorder;
+
+  .fa-caret-down {
+    font-size: 55%;
+    position: absolute;
+    right: 8px;
+    top: 23px;
+    margin-right: 2px;
+  }
+
+  a {
+    color: darken($linkColor, 5%);
+    background-color: $navbarButtonBackground;
+    display: inline-block;
+    &:hover {
+      background: $navbarButtonBackgroundHighlight;
+      color: $linkColor;
+      // border-bottom: 1px solid $blue;
+    }
+  }
+}
+
+.top-nav-menu-btn {
+  a {
+     padding: 7px 20px 6px 13px;
+  }
+  img {
+    width: 30px;
+    position: relative;
+  }
+  .top-nav-logo-background {
+    display: inline-block;
+    border: 1px solid $bodyBackground;
+    padding: 4px;
+    border-radius: 50%;
+    background: $iconContainerBackground;
+    width: 30px;
+    height: 30px;
+  }
+  .icon-gf-grafana_wordmark {
+    font-size: 21px;
+    position: relative;
+    top: 4px;
+    padding-left: 5px;
+    display: none;
+  }
+}
+
+.dashnav-dashboards-btn {
+  a {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    display: block;
+    padding: 16px 17px 16px 13px;
+  }
+
+  .fa-th-large {
+    position: relative;
+    top: 2px;
+  }
+
+  .icon-gf {
+    position: relative;
+    top: 2px;
+    font-size: 20px;
+    line-height: 8px;
+  }
+}
+
+.dashboard-title {
+  padding: 0px 6px 5px 5px;
+  font-size: 17px;
+}
+
+.top-nav-icon {
+  margin: 5px 0px 0 11px;
+  line-height: 41px;
+  float: left;
+}
+
+.top-nav-section {
+  display: block;
+  float: left;
+  padding: 19px 9px 8px 0;
+  font-weight: bold;
+  i {
+    padding-left: 8px;
+  }
+}
+
+.top-nav-title {
+  display: block;
+  float: left;
+  font-size: 17px;
+  padding: 18px 10px 10px 13px;
+  color: $linkColor;
+}
+
+
diff --git a/public/less/components/navs.scss b/public/less/components/navs.scss
new file mode 100644
index 00000000000..8e67bd677f2
--- /dev/null
+++ b/public/less/components/navs.scss
@@ -0,0 +1,200 @@
+//
+// Navs
+// --------------------------------------------------
+
+
+// BASE CLASS
+// ----------
+
+.nav {
+  margin-left: 0;
+  margin-bottom: $baseLineHeight;
+  list-style: none;
+}
+
+// Make links block level
+.nav > li > a {
+  display: block;
+}
+.nav > li > a:hover,
+.nav > li > a:focus {
+  text-decoration: none;
+  background-color: $grayLighter;
+}
+
+// Redeclare pull classes because of specifity
+.nav > .pull-right {
+  float: right;
+}
+
+// Nav headers (for dropdowns and lists)
+.nav-header {
+  display: block;
+  padding: 3px 15px;
+  font-size: 11px;
+  font-weight: bold;
+  line-height: $baseLineHeight;
+  color: $grayLight;
+  text-shadow: 0 1px 0 rgba(255,255,255,.5);
+  text-transform: uppercase;
+}
+// Space them out when they follow another list item (link)
+.nav li + .nav-header {
+  margin-top: 9px;
+}
+
+
+
+// NAV LIST
+// --------
+
+.nav-list {
+  padding-left: 15px;
+  padding-right: 15px;
+  margin-bottom: 0;
+}
+.nav-list > li > a,
+.nav-list .nav-header {
+  margin-left:  -15px;
+  margin-right: -15px;
+  text-shadow: 0 1px 0 rgba(255,255,255,.5);
+}
+.nav-list > li > a {
+  padding: 3px 15px;
+}
+.nav-list > .active > a,
+.nav-list > .active > a:hover,
+.nav-list > .active > a:focus {
+  color: $white;
+  text-shadow: 0 -1px 0 rgba(0,0,0,.2);
+  background-color: $linkColor;
+}
+.nav-list [class^="icon-"],
+.nav-list [class*=" icon-"] {
+  margin-right: 2px;
+}
+
+// TABS AND PILLS
+// -------------
+
+// Common styles
+.nav-tabs,
+.nav-pills {
+  @include clearfix();
+}
+.nav-tabs > li,
+.nav-pills > li {
+  float: left;
+}
+.nav-tabs > li > a,
+.nav-pills > li > a {
+  padding-right: 12px;
+  padding-left: 12px;
+  margin-right: 2px;
+  line-height: 14px; // keeps the overall height an even number
+}
+
+// TABS
+// ----
+
+// Give the tabs something to sit on
+.nav-tabs {
+  border-bottom: 1px solid #ddd;
+}
+// Make the list-items overlay the bottom border
+.nav-tabs > li {
+  margin-bottom: -1px;
+}
+// Actual tabs (as links)
+.nav-tabs > li > a {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  line-height: $baseLineHeight;
+  border: 1px solid transparent;
+  @include border-radius(4px 4px 0 0);
+  &:hover,
+  &:focus {
+    border-color: $grayLighter $grayLighter #ddd;
+  }
+}
+// Active state, and it's :hover/:focus to override normal :hover/:focus
+.nav-tabs > .active > a,
+.nav-tabs > .active > a:hover,
+.nav-tabs > .active > a:focus {
+  color: $gray;
+  background-color: $bodyBackground;
+  border: 1px solid #ddd;
+  border-bottom-color: transparent;
+  cursor: default;
+}
+
+
+// Default dropdown links
+// -------------------------
+// Make carets use linkColor to start
+.nav .dropdown-toggle .caret {
+  border-top-color: $linkColor;
+  border-bottom-color: $linkColor;
+  margin-top: 6px;
+}
+.nav .dropdown-toggle:hover .caret,
+.nav .dropdown-toggle:focus .caret {
+  border-top-color: $linkColorHover;
+  border-bottom-color: $linkColorHover;
+}
+/* move down carets for tabs */
+.nav-tabs .dropdown-toggle .caret {
+  margin-top: 8px;
+}
+
+// Active dropdown links
+// -------------------------
+.nav .active .dropdown-toggle .caret {
+  border-top-color: #fff;
+  border-bottom-color: #fff;
+}
+.nav-tabs .active .dropdown-toggle .caret {
+  border-top-color: $gray;
+  border-bottom-color: $gray;
+}
+
+// Active:hover/:focus dropdown links
+// -------------------------
+.nav > .dropdown.active > a:hover,
+.nav > .dropdown.active > a:focus {
+  cursor: pointer;
+}
+
+// Open dropdowns
+// -------------------------
+.nav-tabs .open .dropdown-toggle,
+.nav-pills .open .dropdown-toggle,
+.nav > li.dropdown.open.active > a:hover,
+.nav > li.dropdown.open.active > a:focus {
+  color: $white;
+  background-color: $grayLight;
+  border-color: $grayLight;
+}
+.nav li.dropdown.open .caret,
+.nav li.dropdown.open.active .caret,
+.nav li.dropdown.open a:hover .caret,
+.nav li.dropdown.open a:focus .caret {
+  border-top-color: $white;
+  border-bottom-color: $white;
+  @include opacity(100);
+}
+
+// Dropdowns in stacked tabs
+.tabs-stacked .open > a:hover,
+.tabs-stacked .open > a:focus {
+  border-color: $grayLight;
+}
+
+// Show/hide tabbable areas
+.tab-content > .tab-pane {
+  display: none;
+}
+
+.tab-content > .active {
+  display: block;
+}
diff --git a/public/less/components/old_stuff.scss b/public/less/components/old_stuff.scss
new file mode 100644
index 00000000000..eae5eb558ce
--- /dev/null
+++ b/public/less/components/old_stuff.scss
@@ -0,0 +1,20 @@
+
+div.editor-row {
+  vertical-align: top;
+}
+
+div.editor-row div.section {
+  margin-right: 20px;
+  vertical-align: top;
+  display: inline-block;
+}
+
+div.editor-option {
+  vertical-align: top;
+  display: inline-block;
+  margin-right: 10px;
+}
+
+div.editor-option label {
+  display: block;
+}
diff --git a/public/less/components/pagination.scss b/public/less/components/pagination.scss
new file mode 100644
index 00000000000..7d67a980cf6
--- /dev/null
+++ b/public/less/components/pagination.scss
@@ -0,0 +1,113 @@
+.pagination {
+}
+
+.pagination ul {
+  display: inline-block;
+  margin-left: 0;
+  margin-bottom: 0;
+  @include border-radius($baseBorderRadius);
+  @include box-shadow(0 1px 2px rgba(0,0,0,.05));
+}
+.pagination ul > li {
+  display: inline; // Remove list-style and block-level defaults
+}
+.pagination ul > li > a,
+.pagination ul > li > span {
+  float: left; // Collapse white-space
+  padding: 4px 12px;
+  line-height: $baseLineHeight;
+  text-decoration: none;
+  background-color: $paginationBackground;
+  border: 1px solid $paginationBorder;
+  border-left-width: 0;
+}
+.pagination ul > li > a:hover,
+.pagination ul > li > a:focus,
+.pagination ul > .active > a,
+.pagination ul > .active > span {
+  background-color: $paginationActiveBackground;
+}
+.pagination ul > .active > a,
+.pagination ul > .active > span {
+  color: $grayLight;
+  cursor: default;
+}
+.pagination ul > .disabled > span,
+.pagination ul > .disabled > a,
+.pagination ul > .disabled > a:hover,
+.pagination ul > .disabled > a:focus {
+  color: $grayLight;
+  background-color: transparent;
+  cursor: default;
+}
+.pagination ul > li:first-child > a,
+.pagination ul > li:first-child > span {
+  border-left-width: 1px;
+  @include border-left-radius($baseBorderRadius);
+}
+.pagination ul > li:last-child > a,
+.pagination ul > li:last-child > span {
+  @include border-right-radius($baseBorderRadius);
+}
+
+
+// Alignment
+// --------------------------------------------------
+
+.pagination-centered {
+  text-align: center;
+}
+.pagination-right {
+  text-align: right;
+}
+
+
+// Sizing
+// --------------------------------------------------
+
+// Large
+.pagination-large {
+  ul > li > a,
+  ul > li > span {
+    padding: $paddingLarge;
+    font-size: $fontSizeLarge;
+  }
+  ul > li:first-child > a,
+  ul > li:first-child > span {
+    @include border-left-radius($borderRadiusLarge);
+  }
+  ul > li:last-child > a,
+  ul > li:last-child > span {
+    @include border-right-radius($borderRadiusLarge);
+  }
+}
+
+// Small and mini
+.pagination-mini,
+.pagination-small {
+  ul > li:first-child > a,
+  ul > li:first-child > span {
+    @include border-left-radius($borderRadiusSmall);
+  }
+  ul > li:last-child > a,
+  ul > li:last-child > span {
+    @include border-right-radius($borderRadiusSmall);
+  }
+}
+
+// Small
+.pagination-small {
+  ul > li > a,
+  ul > li > span {
+    padding: $paddingSmall;
+    font-size: $fontSizeSmall;
+  }
+}
+// Mini
+.pagination-mini {
+  ul > li > a,
+  ul > li > span {
+    padding: $paddingMini;
+    font-size: $fontSizeMini;
+  }
+}
diff --git a/public/less/components/panel_dashlist.scss b/public/less/components/panel_dashlist.scss
new file mode 100644
index 00000000000..4847d41d144
--- /dev/null
+++ b/public/less/components/panel_dashlist.scss
@@ -0,0 +1,22 @@
+.dashlist-item {
+
+}
+
+.dashlist-link {
+  display: block;
+  margin: 5px;
+  padding: 7px;
+  background-color: $grafanaTargetBackground;
+  border: 1px solid $grafanaTargetBorder;
+  .fa {
+    float: right;
+    padding-top: 3px;
+  }
+  .fa-star {
+    color: $orange;
+  }
+
+  &:hover {
+    background-color: $grafanaTargetFuncBackground;
+  }
+}
diff --git a/public/less/components/panel_graph.scss b/public/less/components/panel_graph.scss
new file mode 100644
index 00000000000..e527507bef5
--- /dev/null
+++ b/public/less/components/panel_graph.scss
@@ -0,0 +1,298 @@
+.graph-canvas-wrapper {
+  position: relative;
+  cursor: crosshair;
+}
+
+.histogram-chart {
+  position: relative;
+}
+
+.datapoints-warning {
+  pointer: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 10;
+  margin-top: -50px;
+  margin-left: -100px;
+  width: 200px;
+  text-align: center;
+  cursor: auto;
+  padding: 10px;
+}
+
+.graph-legend {
+  margin: 0 20px;
+  text-align: center;
+
+  .popover-content {
+    padding: 0;
+  }
+}
+
+.graph-legend-icon {
+  position: relative;
+  padding-right: 4px;
+  top: 1px;
+}
+
+.graph-legend-icon,
+.graph-legend-alias,
+.graph-legend-value {
+  float: left;
+  white-space: nowrap;
+  font-size: 85%;
+  text-align: left;
+  &.current:before {
+    content: "Current: "
+  }
+  &.max:before {
+    content: "Max: "
+  }
+  &.min:before {
+    content: "Min: "
+  }
+  &.total:before {
+    content: "Total: "
+  }
+  &.avg:before {
+    content: "Avg: "
+  }
+}
+
+.graph-legend-icon .fa {
+  font-size: 135%;
+  position: relative;
+  top: 1px;
+}
+
+.graph-legend-series {
+  float: left;
+  white-space: nowrap;
+  padding-left: 10px;
+  padding-top: 6px;
+}
+
+.graph-legend-value {
+  padding-left: 6px;
+}
+
+.graph-legend-table {
+  width: 100%;
+  margin: 0;
+
+  .graph-legend-series {
+    display: table-row;
+    float: none;
+    padding-left: 0;
+    &.pull-right {
+      float: none;
+    }
+  }
+
+  td, .graph-legend-alias, .graph-legend-icon, .graph-legend-value {
+    float: none;
+    display: table-cell;
+    white-space: nowrap;
+    padding: 2px 10px;
+    text-align: right;
+  }
+
+  .graph-legend-icon {
+    width: 5px;
+    padding: 0;
+    top: 0;
+    .fa {
+      top: 4px;
+    }
+  }
+
+ .graph-legend-value  {
+    padding-left: 15px;
+  }
+
+  .graph-legend-alias {
+    padding-left: 7px;
+    text-align: left;
+    width: 95%;
+  }
+
+  .graph-legend-series:nth-child(odd) {
+    background-color: $grafanaListAccent;
+  }
+
+  .graph-legend-value {
+    &.current, &.max, &.min, &.total, &.avg {
+      &:before {
+        content: '';
+      }
+    }
+  }
+
+  th {
+    text-align: right;
+    padding: 0px 10px 1px 0;
+    font-weight: bold;
+    color: $blue;
+    font-size: 85%;
+    white-space: nowrap;
+  }
+}
+
+.graph-legend-rightside {
+
+  &.graph-wrapper {
+    display: table;
+    width: 100%;
+  }
+
+  .graph-canvas-wrapper {
+    display: table-cell;
+    width: 100%;
+    position: relative;
+  }
+
+  .graph-legend-wrapper {
+    display: table-cell;
+    vertical-align: top;
+    position: relative;
+    left: 4px;
+  }
+
+  .graph-legend {
+    margin: 0;
+  }
+
+  .graph-legend-series {
+    display: block;
+    padding-left: 0px;
+  }
+
+  .graph-legend-table .graph-legend-series {
+    display: table-row;
+  }
+}
+
+.graph-legend-series-hidden {
+  a {
+    color: $linkColorDisabled;
+  }
+}
+
+.graph-legend-popover {
+  width: 200px;
+  min-height: 100px;
+  label {
+    display: inline-block;
+  }
+  .btn {
+    padding: 1px 3px;
+    margin-right: 0px;
+    line-height: initial;
+  }
+  .close {
+    margin-right: 5px;
+    color: $linkColor;
+    opacity: 0.7;
+    text-shadow: none;
+  }
+  .editor-row {
+    padding: 5px;
+  }
+}
+
+.annotation-tags {
+  color: $purple;
+}
+
+.graph-series-override {
+  input {
+    float: left;
+    margin-right: 10px;
+  }
+  .graph-series-override-option {
+    float: left;
+    padding: 2px 6px;
+  }
+  .graph-series-override-selector {
+    float: left;
+  }
+}
+
+.graph-tooltip {
+  white-space: nowrap;
+
+  .graph-tooltip-time {
+    text-align: center;
+    font-weight: $fontWeightSemi;
+    position: relative;
+    top: -3px;
+  }
+
+  .tone-down {
+    opacity: 0.7;
+  }
+
+  .label-tag {
+    margin-right: 4px;
+    margin-top: 8px;
+  }
+
+  .graph-tooltip-list-item {
+    display: table-row;
+  }
+
+  .graph-tooltip-series-name {
+    display: table-cell;
+  }
+
+  .graph-tooltip-value {
+    display: table-cell;
+    font-weight: bold;
+    padding-left: 10px;
+    text-align: right;
+  }
+}
+
+.left-yaxis-label {
+  top: 50%;
+  left: -5px;
+  transform: rotate(-90deg);
+  -o-transform: rotate(-90deg);
+  -ms-transform: rotate(-90deg);
+  -moz-transform: rotate(-90deg);
+  -webkit-transform: rotate(-90deg);
+  transform-origin: left top;
+  -o-transform-origin: left top;
+  -ms-transform-origin: left top;
+  -moz-transform-origin: left top;
+  -webkit-transform-origin: left top;
+}
+
+.right-yaxis-label {
+  top: 50%;
+  right: -5px;
+
+  -webkit-transform: rotate(90deg);
+  -webkit-transform-origin: right top;
+  -moz-transform: rotate(90deg);
+  -moz-transform-origin: right top;
+  -ms-transform: rotate(90deg);
+  -ms-transform-origin: right top;
+  -o-transform: rotate(90deg);
+  -o-transform-origin: right top;
+  transform: rotate(90deg);
+  transform-origin: right top;
+}
+
+.axisLabel {
+  color: $textColor;
+  font-size: $fontSizeSmall;
+  position: absolute;
+  text-align: center;
+  font-size: 12px;
+}
+
+.graph-legend-fixed-height {
+  overflow-y: scroll;
+}
diff --git a/public/less/components/panel_singlestat.scss b/public/less/components/panel_singlestat.scss
new file mode 100644
index 00000000000..84de79c387e
--- /dev/null
+++ b/public/less/components/panel_singlestat.scss
@@ -0,0 +1,51 @@
+.singlestat-panel {
+  position: relative;
+  display: table;
+  width: 100%;
+}
+
+.singlestat-panel-value-container {
+  padding: 20px;
+  display: table-cell;
+  vertical-align: middle;
+  text-align: center;
+  position: relative;
+  z-index: 1;
+  font-size: 3em;
+  font-weight: bold;
+}
+
+.singlestat-panel-prefix {
+  padding-right: 20px;
+}
+
+.singlestat-panel-table {
+  width: 100%;
+  td {
+    padding: 5px 10px;
+    white-space: nowrap;
+    text-align: right;
+    border-bottom: 1px solid $grafanaListBorderBottom;
+  }
+
+  th {
+    text-align: right;
+    padding: 5px 10px;
+    font-weight: bold;
+    color: $blue
+  }
+
+  td:first-child {
+    text-align: left;
+  }
+
+  tr:nth-child(odd) td {
+    background-color: $grafanaListAccent;
+  }
+
+  tr:last-child td {
+    border: none;
+  }
+}
+
+
diff --git a/public/less/components/panel_table.scss b/public/less/components/panel_table.scss
new file mode 100644
index 00000000000..ad30d3d0d64
--- /dev/null
+++ b/public/less/components/panel_table.scss
@@ -0,0 +1,101 @@
+.table-panel-wrapper {
+  .panel-content {
+    padding: 0;
+  }
+  .panel-title-container {
+    padding-bottom: 4px;
+  }
+}
+
+.table-panel-scroll {
+  overflow: auto;
+}
+
+.table-panel-container {
+  padding-top: 2.2em;
+  position: relative;
+}
+
+.table-panel-footer {
+  text-align: center;
+  font-size: 90%;
+  line-height: 2px;
+
+  ul {
+    position: relative;
+    display: inline-block;
+    margin-left: 0;
+    margin-bottom: 0;
+  }
+  ul > li {
+    display: inline; // Remove list-style and block-level defaults
+  }
+  ul > li > a {
+    float: left; // Collapse white-space
+    padding: 4px 12px;
+    text-decoration: none;
+    border-left-width: 0;
+
+    &:hover {
+      background-color: $grafanaTargetFuncBackground;
+    }
+
+    &.active {
+      font-weight: bold;
+      color: $blue;
+    }
+  }
+}
+
+.table-panel-table {
+  width: 100%;
+  border-collapse: collapse;
+
+  th {
+    padding: 0;
+
+    &:first-child {
+      .table-panel-table-header-inner {
+        padding-left: 15px;
+      }
+    }
+  }
+
+  td {
+    padding: 0.45em 0 0.45em 1.1em;
+    border-bottom: 2px solid $bodyBackground;
+    border-right: 2px solid $bodyBackground;
+
+    &:first-child {
+      padding-left: 15px;
+    }
+    &:last-child {
+      border-right: none;
+    }
+  }
+}
+
+.table-panel-header-bg {
+  background: $grafanaListAccent;
+  border-top: 2px solid $bodyBackground;
+  border-bottom: 2px solid $bodyBackground;
+  height: 2.0em;
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+}
+
+.table-panel-table-header-inner {
+  padding: 0.45em 0 0.45em 1.1em;
+  text-align: left;
+  color: $blue;
+  position: absolute;
+  top: 0;
+}
+
+.table-panel-width-hack {
+  visibility: hidden;
+  height: 0px;
+  line-height: 0px;
+}
diff --git a/public/less/components/popovers.scss b/public/less/components/popovers.scss
new file mode 100644
index 00000000000..cf9ea93b80b
--- /dev/null
+++ b/public/less/components/popovers.scss
@@ -0,0 +1,128 @@
+//
+// Popovers
+// --------------------------------------------------
+
+
+.popover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: $zindexPopover;
+  display: none;
+  max-width: 480px;
+  padding: 1px;
+  text-align: left; // Reset given new insertion method
+  background-color: $popoverBackground;
+  background-clip: padding-box;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0,0,0,.2);
+  @include box-shadow(0 5px 10px rgba(0,0,0,.2));
+
+  // Overrides for proper insertion
+  white-space: normal;
+
+  // Offset the popover to account for the popover arrow
+  &.top     { margin-top: -10px; }
+  &.right   { margin-left: 10px; }
+  &.bottom  { margin-top: 10px; }
+  &.left    { margin-left: -10px; }
+}
+
+.popover-title {
+  margin: 0; // reset heading margin
+  padding: 8px 14px;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 18px;
+  background-color: $popoverTitleBackground;
+
+  &:empty {
+    display: none;
+  }
+}
+
+.popover-content {
+  padding: 9px 14px;
+}
+
+// Arrows
+//
+// .arrow is outer, .arrow:after is inner
+
+.popover .arrow,
+.popover .arrow:after {
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+.popover .arrow {
+  border-width: $popoverArrowOuterWidth;
+}
+.popover .arrow:after {
+  border-width: $popoverArrowWidth;
+  content: "";
+}
+
+.popover {
+  &.top .arrow {
+    left: 50%;
+    margin-left: -$popoverArrowOuterWidth;
+    border-bottom-width: 0;
+    border-top-color: #999; // IE8 fallback
+    border-top-color: $popoverArrowOuterColor;
+    bottom: -$popoverArrowOuterWidth;
+    &:after {
+      bottom: 1px;
+      margin-left: -$popoverArrowWidth;
+      border-bottom-width: 0;
+      border-top-color: $popoverArrowColor;
+    }
+  }
+  &.right .arrow {
+    top: 50%;
+    left: -$popoverArrowOuterWidth;
+    margin-top: -$popoverArrowOuterWidth;
+    border-left-width: 0;
+    border-right-color: #999; // IE8 fallback
+    border-right-color: $popoverArrowOuterColor;
+    &:after {
+      left: 1px;
+      bottom: -$popoverArrowWidth;
+      border-left-width: 0;
+      border-right-color: $popoverArrowColor;
+    }
+  }
+  &.bottom .arrow {
+    left: 50%;
+    margin-left: -$popoverArrowOuterWidth;
+    border-top-width: 0;
+    border-bottom-color: #999; // IE8 fallback
+    border-bottom-color: $popoverArrowOuterColor;
+    top: -$popoverArrowOuterWidth;
+    &:after {
+      top: 1px;
+      margin-left: -$popoverArrowWidth;
+      border-top-width: 0;
+      border-bottom-color: $popoverArrowColor;
+    }
+  }
+
+  &.left .arrow {
+    top: 50%;
+    right: -$popoverArrowOuterWidth;
+    margin-top: -$popoverArrowOuterWidth;
+    border-right-width: 0;
+    border-left-color: #999; // IE8 fallback
+    border-left-color: $popoverArrowOuterColor;
+    &:after {
+      right: 1px;
+      border-right-width: 0;
+      border-left-color: $popoverArrowColor;
+      bottom: -$popoverArrowWidth;
+    }
+  }
+
+}
diff --git a/public/less/components/query_editor.scss b/public/less/components/query_editor.scss
new file mode 100644
index 00000000000..fe8d3fb157c
--- /dev/null
+++ b/public/less/components/query_editor.scss
@@ -0,0 +1,16 @@
+.query-keyword {
+  font-weight: bold;
+  color: $blue;
+}
+
+.query-segment-key {
+  border-right: none;
+  padding-right: 1px;
+}
+
+.query-segment-operator {
+  padding-right: 1px;
+  border-right: none;
+  color: $orange;
+}
+
diff --git a/public/less/components/scrollbar.scss b/public/less/components/scrollbar.scss
new file mode 100644
index 00000000000..85227625a8d
--- /dev/null
+++ b/public/less/components/scrollbar.scss
@@ -0,0 +1,41 @@
+//
+// Srollbars
+//
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar:hover {
+  height: 8px;
+}
+
+::-webkit-scrollbar-button:start:decrement,
+::-webkit-scrollbar-button:end:increment { display: none;  }
+::-webkit-scrollbar-button:horizontal:decrement {  display: none; }
+::-webkit-scrollbar-button:horizontal:increment {  display: none; }
+::-webkit-scrollbar-button:vertical:decrement { display: none; }
+::-webkit-scrollbar-button:vertical:increment { display: none; }
+::-webkit-scrollbar-button:horizontal:decrement:active { background-image: none; }
+::-webkit-scrollbar-button:horizontal:increment:active { background-image: none; }
+::-webkit-scrollbar-button:vertical:decrement:active { background-image: none; }
+::-webkit-scrollbar-button:vertical:increment:active {background-image: none; }
+::-webkit-scrollbar-track-piece { background-color: transparent; }
+
+::-webkit-scrollbar-thumb:vertical {
+  height: 50px;
+  background: -webkit-gradient(linear, left top, right top, color-stop(0%, $scrollbarBackground), color-stop(100%, $scrollbarBackground2));
+  border: 1px solid $scrollbarBorder;
+  border-top: 1px solid $scrollbarBorder;
+  border-left: 1px solid $scrollbarBorder;
+}
+
+::-webkit-scrollbar-thumb:horizontal {
+  width: 50px;
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $scrollbarBackground), color-stop(100%, $scrollbarBackground2));
+  border: 1px solid $scrollbarBorder;
+  border-top: 1px solid $scrollbarBorder;
+  border-left: 1px solid $scrollbarBorder;
+}
+
diff --git a/public/less/components/search.scss b/public/less/components/search.scss
new file mode 100644
index 00000000000..1a117f252b9
--- /dev/null
+++ b/public/less/components/search.scss
@@ -0,0 +1,107 @@
+.search-container {
+  left: 72px;
+  top: 39px;
+  margin: 16px 0 0 2px;
+  z-index: 1000;
+  position: absolute;
+  width: 700px;
+  box-shadow: $searchShadow;
+  padding: 10px;
+  background-color: $grafanaPanelBackground;
+  border: $grafanaPanelBorder;
+
+  .label-tag {
+    margin-left: 6px;
+    font-size: 11px;
+    padding: 2px 6px;
+  }
+}
+
+// Search
+.search-field-wrapper {
+  padding-bottom: 10px;
+  input {
+    width: 100%;
+    padding: 8px 8px;
+    height: 100%;
+    box-sizing: border-box;
+  }
+  button {
+    margin: 0 4px 0 0;
+  }
+  > span {
+    display: block;
+    overflow: hidden;
+  }
+}
+
+.search-results-container {
+  height: 450px;
+  overflow: auto;
+  display: block;
+  line-height: 28px;
+
+  .search-item:hover, .search-item.selected {
+    background-color: $grafanaListHighlight;
+  }
+
+  .selected {
+    .search-result-tag {
+      opacity: 0.70;
+      color: white;
+    }
+  }
+
+  .fa-star, .fa-star-o {
+    padding-left: 13px;
+  }
+
+  .fa-star {
+    color: $orange;
+  }
+
+  .search-result-link {
+    color: $grafanaListMainLinkColor;
+    .fa {
+      padding-right: 10px;
+    }
+  }
+
+  .search-item {
+    display: block;
+    padding: 3px 10px;
+    white-space: nowrap;
+    background-color: $grafanaListBackground;
+    margin-bottom: 4px;
+    .search-result-icon:before {
+      content: "\f009";
+    }
+
+    &.search-item-dash-home .search-result-icon:before {
+      content: "\f015";
+    }
+  }
+
+  .search-result-tags {
+    float: right;
+  }
+
+  .search-result-actions {
+    float: right;
+    padding-left: 20px;
+  }
+}
+
+.search-switches {
+  position: absolute;
+  top: 19px;
+  right: 21px;
+}
+
+.search-button-row {
+  padding-top: 20px;
+  button, a {
+    margin-right: 10px;
+  }
+}
+
diff --git a/public/less/components/shortcuts.scss b/public/less/components/shortcuts.scss
new file mode 100644
index 00000000000..ed639b6292c
--- /dev/null
+++ b/public/less/components/shortcuts.scss
@@ -0,0 +1,6 @@
+.shortcut-table {
+  td { padding: 3px; }
+  th:last-child { text-align: left; }
+  td:first-child { text-align: right; }
+}
+
diff --git a/public/less/components/sidemenu.scss b/public/less/components/sidemenu.scss
new file mode 100644
index 00000000000..ec6c23fc984
--- /dev/null
+++ b/public/less/components/sidemenu.scss
@@ -0,0 +1,220 @@
+$sideMenuWidth:  220px;
+
+.sidemenu-canvas {
+  position: relative;
+}
+
+.sidemenu-wrapper {
+  position: absolute;
+  top: 52px;
+  left: 0;
+  width: $sideMenuWidth;
+  background-color: $bodyBackground;
+  z-index: 101;
+  transform: translate3d(0, -100%, 0);
+  visibility: hidden;
+
+  a:focus {
+    text-decoration: none;
+  }
+}
+
+.sidemenu-open {
+  .sidemenu-wrapper {
+    visibility: visible;
+    transform: translate3d(0, 0, 0);
+    transition: all 0.2s;
+  }
+}
+
+.sidemenu-pinned {
+  .sidemenu-wrapper {
+    min-height: 100%;
+  }
+  .dashboard-container {
+    padding-left: $sideMenuWidth;
+  }
+  .page-container {
+    margin-left: 195px;
+    padding-left: 77px;
+  }
+  .top-nav-menu-btn {
+    a {
+      background-color: $pageBackground;
+      padding-right: 67px;
+      padding-left: 22px;
+    }
+    .icon-gf-grafana_wordmark  {
+      display: inline-block;
+    }
+    .fa {
+      display: none;
+    }
+  }
+  .sidemenu-org {
+    box-shadow: none;
+  }
+  .search-container {
+    left: auto;
+  }
+}
+
+.sidemenu {
+  font-weight: $baseFontWeight;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  li {
+    position: relative;
+
+    &:hover {
+      .dropdown-menu {
+        display: block;
+        top: 0px;
+        left: $sideMenuWidth;
+        background-color: $bodyBackground;
+      }
+    }
+  }
+}
+
+.sidemenu-main-link {
+  font-size: 16px;
+}
+
+.sidemenu-item-text {
+  width: 110px;
+  display: inline-block;
+  vertical-align: middle;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.icon-circle {
+  width: 40px;
+  height: 40px;
+  display: inline-block;
+  i {
+    color: $linkColor;
+    opacity: .7;
+    position: relative;
+    left: 7px;
+    top: 5px;
+    font-size: 150%;
+  }
+  img {
+    left: 7px;
+    position: relative;
+  }
+}
+
+.sidemenu-item {
+  color: $linkColor;
+  line-height: 47px;
+  padding: 0px 10px 0px 10px;
+  display: block;
+
+  &:hover {
+    background-color: $sideMenuBackgroundHighlight;
+  }
+
+  .sidemenu-item-text {
+    padding-left: 11px;
+  }
+
+  img {
+    border-radius: 50%;
+    width: 28px;
+    height: 28px;
+    box-shadow: 0 0 14px 2px rgba(255,255,255, 0.05);
+  }
+}
+
+.sidemenu-section-tagline {
+  font-style: italic;
+  line-height: 10px;
+}
+
+.sidemenu-section-text-wrapper {
+  padding-top: 4px;
+}
+
+.sidemenu-org-section .dropdown-menu-title {
+  margin: 0 10px 0 6px;
+  padding: 7px 0 7px;
+  overflow: hidden;
+  color: $dropdownTitle;
+}
+
+.sidemenu-org-section .dropdown-menu-title > span {
+  display: inline-block;
+  position: relative;
+
+  &:after {
+    display: block;
+    position: absolute;
+    top: 50%;
+    right: 0;
+    left: 100%;
+    width: 200px;
+    height: 1px;
+    margin-left: 5px;
+    background: $dropdownDivider;
+    content: '';
+  }
+}
+
+.sidemenu-org {
+  padding: 17px 10px 15px 14px;
+  box-sizing: border-box;
+  cursor: pointer;
+  &:hover {
+    background-color: $sideMenuBackgroundHighlight;
+  }
+  display: table;
+  position: relative;
+  width: 100%;
+}
+
+.sidemenu .fa-caret-right {
+  position: absolute;
+  top: 38%;
+  right: 25px;
+  font-size: 14px;
+  color: $linkColor;
+}
+
+.sidemenu-org-avatar,
+.sidemenu-org-details {
+  display: table-cell;
+  vertical-align: top;
+}
+
+.sidemenu-org-avatar {
+  width: 44px;
+}
+
+.sidemenu-org-avatar > img {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.sidemenu-org-details {
+  padding-left: 10px;
+  color: $linkColor;
+}
+
+.sidemenu-org-name {
+  display: block;
+  font-size: 13px;
+  color: $linkColorDisabled;
+}
+
+.sidemenu-org-user {
+  display: block;
+}
+
diff --git a/public/less/components/submenu.scss b/public/less/components/submenu.scss
new file mode 100644
index 00000000000..b4a7154aee5
--- /dev/null
+++ b/public/less/components/submenu.scss
@@ -0,0 +1,133 @@
+.submenu-controls {
+  margin: 10px 5px;
+  font-size: 16px;
+}
+
+.annotation-disabled, .annotation-disabled a {
+  color: $linkColorDisabled;
+}
+
+.annotation-segment {
+  label.cr1 {
+    margin-left: 5px;
+  }
+  padding: 8px 7px;
+}
+
+.submenu-item {
+  margin-right: 20px;
+  display: inline-block;
+  border-radius: 3px;
+  background-color: $grafanaPanelBackground;
+  border: $grafanaPanelBorder;
+  margin-right: 10px;
+  display: inline-block;
+
+  .fa-caret-down {
+    font-size: 75%;
+    position: relative;
+    top: 1px;
+  }
+}
+
+.variable-value-link {
+  font-size: 16px;
+  padding-right: 10px;
+  .label-tag {
+    margin: 0 5px;
+  }
+}
+
+.variable-link-wrapper  {
+  display: inline-block;
+  position: relative;
+}
+
+.variable-value-dropdown {
+  position: absolute;
+  top: 47px;
+  min-width: 150px;
+  max-height: 400px;
+  min-height: 150px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background-color: $dropdownBackground;
+  box-shadow: 0 0 25px 0 rgba(0,0,0,0.4);
+  z-index: 1000;
+  font-size: $baseFontSize;
+  border-radius: 3px 3px 0 0;
+  border: 1px solid $grafanaTargetFuncBackground;
+
+  &.multi {
+   .selected {
+     .variable-option-icon{
+       background: url($checkboxImageUrl) 0px -18px no-repeat;
+     }
+   }
+ }
+
+ &.single {
+   .variable-option-icon {
+     display: none;
+   }
+   .selected {
+     background-color: $grafanaTargetFuncHightlight;
+   }
+ }
+}
+
+.variable-options-wrapper {
+  display: table;
+  width: 100%;
+}
+
+.variable-options-column {
+  max-height: 350px;
+  display: table-cell;
+  line-height: 26px;
+  &:nth-child(2) {
+    border-left: 1px solid $grafanaTargetFuncBackground;
+  }
+}
+
+.variable-option-tag,
+.variable-option,
+.variable-options-column-header {
+  display: block;
+  padding: 2px 27px 0 8px;
+  position: relative;
+  white-space: nowrap;
+  min-width: 115px;
+}
+
+.variable-options-column-header {
+  padding-top: 5px;
+  padding-bottom: 5px;
+  margin-bottom: 5px;
+  &.many-selected {
+    .variable-option-icon {
+      background: url($checkboxImageUrl) 0px -36px no-repeat;
+    }
+  }
+}
+
+.variable-option-icon {
+  display: inline-block;
+  width: 24px;
+  height: 18px;
+  position: relative;
+  top: 4px;
+  background: url($checkboxImageUrl) left top no-repeat;
+}
+
+.variable-option {
+  &:hover, &.highlighted {
+    background-color: $blueDark;
+  }
+}
+
+.dash-nav-link {
+  padding: 8px 7px;
+  display: inline-block;
+  color: $textColor;
+}
diff --git a/public/less/components/tables_lists.scss b/public/less/components/tables_lists.scss
new file mode 100644
index 00000000000..f6d1edf35bc
--- /dev/null
+++ b/public/less/components/tables_lists.scss
@@ -0,0 +1,43 @@
+.grafana-options-table {
+  width: 100%;
+
+  th {
+    text-align: left;
+    padding: 5px 10px;
+    border-bottom: 4px solid $grafanaPanelBackground;
+  }
+
+  tr td {
+    background-color: $grafanaListBackground;
+    padding: 5px 10px;
+    white-space: nowrap;
+    border-bottom: 4px solid $grafanaPanelBackground;
+    &.nobg {
+      background-color: transparent;
+    }
+  }
+
+  .max-width-btns {
+    padding-right: 0px;
+    .btn {
+      box-sizing: border-box;
+      width: 100%;
+    }
+  }
+}
+
+.max-width {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -o-text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.grafana-list-item {
+  display: block;
+  padding: 1px 10px;
+  line-height: 34px;
+  background-color: $grafanaTargetBackground;
+  margin-bottom: 4px;
+  cursor: pointer;
+}
diff --git a/public/less/components/tabs.scss b/public/less/components/tabs.scss
new file mode 100644
index 00000000000..792314df2d3
--- /dev/null
+++ b/public/less/components/tabs.scss
@@ -0,0 +1,40 @@
+
+.nav-tabs-alt {
+  border-bottom: $grafanaTriggerBorder;
+  padding-left: 10px;
+  margin: 0 0 10px 0;
+
+	& > li > a {
+	  color: darken($linkColor, 20%);
+	}
+
+	li > a:hover {
+    border-bottom: none;
+	}
+
+	li.active > a,
+	li.active > a:focus,
+	li.active > a:hover {
+    @include border-radius(3px);
+	  border: $grafanaTriggerBorder;
+	  background-color: transparent;
+	  border-bottom: 1px solid $grafanaPanelBackground;
+	  color: $linkColor;
+	}
+
+	li.disabled > a {
+		color: $textColor;
+	}
+
+	.open .dropdown-toggle {
+		background-color: #060606;
+		border-color: transparent;
+	}
+
+  .tab-content {
+    padding: 10px;
+    background-color: $grafanaPanelBackground;
+  }
+}
+
+
diff --git a/public/less/components/tags.scss b/public/less/components/tags.scss
new file mode 100644
index 00000000000..c0aa1bd23a5
--- /dev/null
+++ b/public/less/components/tags.scss
@@ -0,0 +1,39 @@
+// Base classes
+.label,
+.badge {
+  display: inline-block;
+  padding: 2px 4px;
+  font-size: $baseFontSize * .846;
+  font-weight: bold;
+  line-height: 14px; // ensure proper line-height if floated
+  color: $white;
+  vertical-align: baseline;
+  white-space: nowrap;
+  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+  background-color: $grayLight;
+}
+
+
+// Labels & Badges
+.label-tag {
+  background-color: $purple;
+  color: darken($white, 5%);
+  white-space: nowrap;
+  border-radius: 3px;
+  text-shadow: none;
+  font-size: 13px;
+  padding: 2px 6px;
+  border-width: 1px;
+  border-style: solid;
+  .icon-tag {
+    position: relative;
+    top: 1px;
+    padding-right: 4px;
+  }
+}
+
+.label-tag:hover {
+  opacity: 0.85;
+  background-color: darken($purple, 10%);
+}
+
diff --git a/public/less/components/tagsinput.scss b/public/less/components/tagsinput.scss
new file mode 100644
index 00000000000..3bfdb5547c8
--- /dev/null
+++ b/public/less/components/tagsinput.scss
@@ -0,0 +1,39 @@
+.bootstrap-tagsinput {
+  display: inline-block;
+  padding: 0 0 0 6px;
+  vertical-align: middle;
+  max-width: 100%;
+  line-height: 22px;
+  background-color: $inputBackground;
+
+  input {
+    border: none;
+    border-right: 1px solid $grafanaTargetSegmentBorder;
+    margin: 0px;
+    border-radius: 0;
+    padding: 8px 6px;
+    height: 100%;
+    width: 5rem;
+    box-sizing: border-box;
+  }
+
+  .tag {
+    margin-right: 2px;
+    color: white;
+
+    [data-role="remove"] {
+      margin-left:8px;
+      cursor:pointer;
+      &:after{
+        content: "x";
+        padding:0px 2px;
+      }
+      &:hover {
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+        &:active {
+          box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
+        }
+      }
+    }
+  }
+}
diff --git a/public/less/components/tightform.scss b/public/less/components/tightform.scss
new file mode 100644
index 00000000000..e1df5f2ae71
--- /dev/null
+++ b/public/less/components/tightform.scss
@@ -0,0 +1,236 @@
+.tight-form {
+  border-top: 1px solid $grafanaTargetBorder;
+  border-left: 1px solid $grafanaTargetBorder;
+  border-right: 1px solid $grafanaTargetBorder;
+  background: $grafanaTargetBackground;
+
+  &.last {
+    border-bottom: 1px solid $grafanaTargetBorder;
+  }
+
+  &.borderless {
+    background: transparent;
+    border: none;
+  }
+
+  .checkbox-label {
+    display: inline;
+    padding-right: 4px;
+    margin-bottom: 0;
+  }
+}
+
+.tight-form-container-no-item-borders {
+  border: 1px solid $grafanaTargetBorder;
+  border-bottom: none;
+
+  .tight-form, .tight-form-item, [type=text].tight-form-input, [type=text].tight-form-clear-input  {
+    border: none;
+  }
+}
+
+
+.spaced-form {
+  .tight-form {
+    margin: 7px 0;
+  }
+}
+
+.borderless {
+  .tight-form-item,
+  .tight-form-input {
+    border: none;
+  }
+}
+
+.tight-form-container {
+  border-bottom: 1px solid $grafanaTargetBorder;
+}
+
+.tight-form-btn {
+  padding: 7px 12px;
+}
+
+.tight-form-list {
+  list-style: none;
+  margin: 0;
+  >li {
+    float: left;
+  }
+}
+
+.tight-form-flex-wrapper {
+  display: flex;
+  flex-direction: row;
+  float: none !important;
+}
+
+.grafana-metric-options {
+  margin-top: 25px;
+}
+
+.tight-form-item {
+  padding: 8px 7px;
+  display: inline-block;
+  font-weight: normal;
+  border-right: 1px solid $grafanaTargetSegmentBorder;
+  color: $grafanaTargetColor;
+  display: inline-block;
+
+  .has-open-function & {
+    padding-top: 25px;
+  }
+
+  .tight-form-disabled & {
+    color: $grafanaTargetColorHide;
+  }
+
+  &:hover, &:focus {
+    text-decoration: none;
+  }
+
+  &a:hover {
+    background: $grafanaTargetFuncBackground;
+  }
+
+  &.last {
+    border-right: none;
+  }
+}
+
+
+.tight-form-item-icon {
+  i {
+    width: 15px;
+    text-align: center;
+    display: inline-block;
+  }
+}
+
+.tight-form-func {
+  background: $grafanaTargetFuncBackground;
+  > a {
+    color: $grafanaTargetColor;
+  }
+  > a:hover {
+    color: $linkColor;
+  }
+
+  &.show-function-controls {
+    padding-top: 5px;
+    min-width: 100px;
+    text-align: center;
+  }
+}
+
+input[type=text].tight-form-func-param {
+  background: transparent;
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+input[type=text].tight-form-clear-input {
+  padding: 8px 7px;
+  border: none;
+  margin: 0px;
+  background: transparent;
+  color: $grafanaTargetColor;
+  border-radius: 0;
+  border-right: 1px solid $grafanaTargetSegmentBorder;
+}
+
+[type=text],
+[type=email],
+[type=number],
+[type=password] {
+  &.tight-form-input {
+    border: none;
+    border-right: 1px solid $grafanaTargetSegmentBorder;
+    margin: 0px;
+    border-radius: 0;
+    padding: 8px 6px;
+    height: 100%;
+    box-sizing: border-box;
+    &.last {
+      border-right: none;
+    }
+  }
+}
+
+input[type=checkbox].tight-form-checkbox {
+  margin: 0;
+}
+
+.tight-form-textarea {
+  height: 200px;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+select.tight-form-input {
+  border: none;
+  border-right: 1px solid $grafanaTargetSegmentBorder;
+  margin: 0px;
+  border-radius: 0;
+  height: 36px;
+  padding: 9px 3px;
+  &.last {
+    border-right: none;
+  }
+}
+
+.tight-form-func-controls {
+  display: none;
+  text-align: center;
+
+  .fa-arrow-left {
+    float: left;
+    position: relative;
+    top: 2px;
+  }
+  .fa-arrow-right {
+    float: right;
+    position: relative;
+    top: 2px;
+  }
+  .fa-remove {
+    margin-left: 10px;
+  }
+}
+
+.tight-form-radio {
+  input[type=radio] {
+    margin: 0;
+  }
+  label {
+    display: inline;
+  }
+}
+
+.tight-form-section {
+  margin-bottom: 20px;
+  margin-right: 40px;
+  vertical-align: top;
+  display: inline-block;
+  .tight-form {
+    margin-left: 20px;
+  }
+}
+
+.tight-form-align {
+  padding-left: 66px;
+}
+
+.tight-form-item-large { width: 115px; }
+.tight-form-item-xlarge { width: 150px; }
+.tight-form-item-xxlarge { width: 200px; }
+
+.tight-form-input.tight-form-item-xxlarge {
+  width: 215px;
+}
+
+.tight-form-inner-box {
+  margin: 20px 0 20px 148px;
+  display: inline-block;
+}
diff --git a/public/less/components/timepicker.scss b/public/less/components/timepicker.scss
new file mode 100644
index 00000000000..8a232ddc779
--- /dev/null
+++ b/public/less/components/timepicker.scss
@@ -0,0 +1,107 @@
+.nav.gf-timepicker-nav {
+  margin-right: 0;
+}
+
+.timepicker-timestring {
+  font-weight: normal;
+}
+
+.gf-timepicker-nav-btn {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.gf-timepicker-dropdown {
+  margin: -5px -10px 10px 5px;
+  padding: 10px 20px;
+  float: right;
+  background-color: $grafanaPanelBackground;
+  @include box-shadow($navbarDropdownShadow);
+}
+
+.gf-timepicker-absolute-section {
+  width: 300px;
+  float: left;
+  border-right: $grafanaTriggerBorder;
+  padding: 0 0 0 20px;
+  select {
+    width: 183px;
+    margin-bottom: 0;
+  }
+}
+
+.gf-timepicker-btn-apply {
+  margin: 0 0 0 15px;
+}
+
+.gf-timepicker-utc {
+  background-color: $grafanaTargetFuncBackground;
+  color: $orange;
+  font-size: 75%;
+  padding: 3px;
+  border-radius: 2px;
+  font-weight: bold;
+  margin-left: 4px;
+}
+
+.gf-timepicker-relative-section {
+  padding: 0 20px 0 30px;
+  min-height: 258px;
+  float: left;
+  ul {
+    list-style: none;
+    float: left;
+    margin: 0 30px 10px 0px;
+    li {
+      line-height: 22px;
+    }
+    li.active {
+      border-bottom: 1px solid $blue;
+      margin: 3px 0;
+      font-weight: bold;
+    }
+  }
+}
+
+.gf-timepicker-component {
+  margin-bottom: 10px;
+  button.btn-sm {
+    @include buttonBackground($btnInverseBackground, $btnInverseBackgroundHighlight);
+    background-image: none;
+    border: none;
+    padding: 6px 9px;
+    color: $textColor;
+    &.active span {
+      color: $blue;
+      font-weight: bold;
+    }
+    .text-info {
+      color: $orange;
+      font-weight: bold;
+    }
+  }
+}
+
+.faMixin {
+  display: inline-block;
+  font: normal normal normal 14px/1 FontAwesome;
+  font-size: inherit;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.glyphicon-chevron-right:before {
+  @include faMixin;
+  content: "\f054";
+}
+
+.glyphicon-chevron-left:before {
+  @include faMixin;
+  content: "\f053";
+}
+
+.input-datetime-format {
+  color: $linkColorDisabled
+}
diff --git a/public/less/components/tooltip.scss b/public/less/components/tooltip.scss
new file mode 100644
index 00000000000..3d0e2a7b16a
--- /dev/null
+++ b/public/less/components/tooltip.scss
@@ -0,0 +1,102 @@
+//
+// Tooltips
+// --------------------------------------------------
+
+
+// Base class
+.tooltip {
+  position: absolute;
+  z-index: $zindexTooltip;
+  display: block;
+  visibility: visible;
+  font-size: 11px;
+  line-height: 1.4;
+  @include opacity(0);
+  &.in     { .opacity(100); }
+  &.top    { margin-top:  -3px; padding: 5px 0; }
+  &.right  { margin-left:  3px; padding: 0 5px; }
+  &.bottom { margin-top:   3px; padding: 5px 0; }
+  &.left   { margin-left: -3px; padding: 0 5px; }
+}
+
+// Wrapper for the tooltip content
+.tooltip-inner {
+  max-width: 400px;
+  padding: 8px;
+  color: $tooltipColor;
+  text-align: center;
+  text-decoration: none;
+  background-color: $tooltipBackground;
+  @include border-radius($baseBorderRadius);
+}
+
+// Arrows
+.tooltip-arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+.tooltip {
+  &.top .tooltip-arrow {
+    bottom: 0;
+    left: 50%;
+    margin-left: -$tooltipArrowWidth;
+    border-width: $tooltipArrowWidth $tooltipArrowWidth 0;
+    border-top-color: $tooltipArrowColor;
+  }
+  &.right .tooltip-arrow {
+    top: 50%;
+    left: 0;
+    margin-top: -$tooltipArrowWidth;
+    border-width: $tooltipArrowWidth $tooltipArrowWidth $tooltipArrowWidth 0;
+    border-right-color: $tooltipArrowColor;
+  }
+  &.left .tooltip-arrow {
+    top: 50%;
+    right: 0;
+    margin-top: -$tooltipArrowWidth;
+    border-width: $tooltipArrowWidth 0 $tooltipArrowWidth $tooltipArrowWidth;
+    border-left-color: $tooltipArrowColor;
+  }
+  &.bottom .tooltip-arrow {
+    top: 0;
+    left: 50%;
+    margin-left: -$tooltipArrowWidth;
+    border-width: 0 $tooltipArrowWidth $tooltipArrowWidth;
+    border-bottom-color: $tooltipArrowColor;
+  }
+}
+
+.grafana-tooltip {
+  position : absolute;
+  top: -1000;
+  left: 0;
+  color: $tooltipColor;
+  padding: 10px;
+  font-size: 11pt;
+  font-weight : 200;
+  background-color: $tooltipBackground;
+  border-radius: 5px;
+  z-index: 9999;
+  max-width: 800px;
+  max-height: 600px;
+  overflow: hidden;
+  line-height: 14px;
+  a {
+    color: $tooltipLinkColor;
+  }
+}
+
+.grafana-tooltip hr {
+ padding: 2px;
+ color: #c8c8c8;
+ margin: 0px;
+ border-bottom: 0px solid #c8c8c8;
+}
+
+.grafana-tip {
+  padding-left: 5px;
+}
+
diff --git a/public/less/components/typeahead.scss b/public/less/components/typeahead.scss
new file mode 100644
index 00000000000..efa4f3459ed
--- /dev/null
+++ b/public/less/components/typeahead.scss
@@ -0,0 +1,11 @@
+
+// typeahead max height
+.typeahead {
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.typeahead strong {
+  color: $yellow;
+}
+
diff --git a/public/less/grafana-responsive.scss b/public/less/grafana-responsive.scss
new file mode 100644
index 00000000000..051a801f215
--- /dev/null
+++ b/public/less/grafana-responsive.scss
@@ -0,0 +1,127 @@
+@import "variables.dark.scss";
+@import "bootstrap/responsive.scss";
+
+$gridColumnWidth:         70px;
+$gridGutterWidth:         10px;
+
+$gridColumnWidth768:      52px;
+$gridGutterWidth768:      10px;
+
+$gridColumnWidth1200:     90px;
+$gridGutterWidth1200:     10px;
+
+// Fluid grid
+// -------------------------
+$fluidGridColumnWidth:    percentage($gridColumnWidth/$gridRowWidth);
+$fluidGridGutterWidth:    percentage($gridGutterWidth/$gridRowWidth);
+
+// 1200px min
+$fluidGridColumnWidth1200:     percentage($gridColumnWidth1200/$gridRowWidth1200);
+$fluidGridGutterWidth1200:     percentage($gridGutterWidth1200/$gridRowWidth1200);
+
+// 768px-979px
+$fluidGridColumnWidth768:      percentage($gridColumnWidth768/$gridRowWidth768);
+$fluidGridGutterWidth768:      percentage($gridGutterWidth768/$gridRowWidth768);
+
+$screen-xs: 320px;
+$screen-sm: 768px;
+$screen-md: 992px;
+$screen-lg: 1200px;
+
+$screen-xs-max: ($screen-sm - 1);
+$screen-sm-max: ($screen-md - 1);
+$screen-md-max: ($screen-lg - 1);
+
+$breakpoint-xs-up:         "only screen and (min-width: #{$screen-xs})";
+$breakpoint-xs:            "only screen and (min-width: #{$screen-xs}) and (max-width: #{$screen-xs-max})";
+$breakpoint-sm-up:         "only screen and (min-width: #{$screen-sm})";
+$breakpoint-sm:            "only screen and (min-width: #{$screen-sm}) and (max-width: #{$screen-sm-max})";
+$breakpoint-md-up:         "only screen and (min-width: #{$screen-md})";
+$breakpoint-md:            "only screen and (min-width: #{$screen-md}) and (max-width: #{$screen-md-max})";
+$breakpoint-lg:            "only screen and (min-width: #{$screen-lg})";
+
+.dashnav-back-to-dashboard  {
+  display: none;
+}
+
+// Media queries
+// ---------------------
+@media $breakpoint-xs {
+  div.panel {
+    width: 100% !important;
+    padding: 0px !important;
+  }
+  .panel-margin {
+    margin-right: 0;
+    margin-left: 0;
+  }
+  body {
+    padding: 0;
+  }
+  .dashnav-dashboards-btn a {
+    max-width: 200px;
+  }
+  .gf-timepicker-nav-btn {
+    max-width: 120px;
+  }
+  .dashnav-zoom-out,
+  .dashnav-action-icons {
+    display: none;
+  }
+  .page-container {
+    padding: 10px 20px;
+  }
+}
+
+// form styles
+@media $breakpoint-sm-up {
+  .gf-size-m { width: 120px; }
+  .gf-size-l { width: 150px; }
+  .gf-size-xl { width: 200px; }
+  .gf-size-xxl { width: 300px; }
+  .gf-size-xxxl { width: 400px; }
+}
+
+@media $breakpoint-sm-up {
+  .dashnav-dashboards-btn a {
+    max-width: 200px;
+  }
+  .gf-timepicker-nav-btn {
+    max-width: 120px;
+  }
+  .panel-in-fullscreen {
+    .dashnav-action-icons {
+      display: none;
+    }
+    .dashnav-back-to-dashboard  {
+      display: block;
+    }
+  }
+}
+
+@media $breakpoint-md-up {
+  .dashnav-dashboards-btn a {
+    max-width: 290px;
+  }
+  .gf-timepicker-nav-btn {
+    max-width: 250px;
+  }
+  .dashnav-zoom-out {
+    display: block;
+  }
+}
+
+@media $breakpoint-lg {
+  .panel-in-fullscreen {
+    .dashnav-action-icons {
+      display: block;
+    }
+  }
+
+  .dashnav-dashboards-btn a {
+    max-width: none;
+  }
+  .gf-timepicker-nav-btn {
+    max-width: none;
+  }
+}
diff --git a/public/less/grafana.dark.scss b/public/less/grafana.dark.scss
new file mode 100644
index 00000000000..2dbd9475e24
--- /dev/null
+++ b/public/less/grafana.dark.scss
@@ -0,0 +1,2 @@
+@import "variables.dark.scss";
+@import "grafana.scss";
diff --git a/public/less/grafana.less b/public/less/grafana.less
index 5bbc9c08b74..6a3facc4206 100644
--- a/public/less/grafana.less
+++ b/public/less/grafana.less
@@ -17,7 +17,7 @@
 @import "./mixins/buttons.less";
 
 // LAYOUTS
-@import "./bootstrap/grid.less";
+// @import "./bootstrap/grid.less";
 @import "./layout/page.less";
 
 // COMPONENTS
diff --git a/public/less/grafana.light.scss b/public/less/grafana.light.scss
new file mode 100644
index 00000000000..bc9b18e52fe
--- /dev/null
+++ b/public/less/grafana.light.scss
@@ -0,0 +1,2 @@
+@import "variables.light.scss";
+@import "grafana.scss";
diff --git a/public/less/grafana.scss b/public/less/grafana.scss
new file mode 100644
index 00000000000..3d8de05687f
--- /dev/null
+++ b/public/less/grafana.scss
@@ -0,0 +1,69 @@
+
+// BASE
+@import "./base/normalize.scss";
+@import "./base/base.scss";
+@import "./base/type.scss";
+@import "./base/forms.scss";
+@import "./base/fonts.scss";
+@import "./base/code.scss";
+
+// UTILS
+@import "./utils/utils.scss";
+@import "./utils/validation.scss";
+@import "./utils/angular.scss";
+
+// MIXINS
+@import "./mixins/mixins.scss";
+@import "./mixins/buttons.scss";
+
+// LAYOUTS
+// @import "./bootstrap/grid.scss";
+@import "./layout/page.scss";
+
+// COMPONENTS
+@import "./components/panel_graph.scss";
+@import "./components/submenu.scss";
+@import "./components/panel_dashlist.scss";
+@import "./components/panel_singlestat.scss";
+@import "./components/panel_table.scss";
+@import "./components/tagsinput.scss";
+@import "./components/tables_lists.scss";
+@import "./components/search.scss";
+@import "./components/dashboard.scss";
+@import "./components/tightform.scss";
+@import "./components/gf-form.scss";
+@import "./components/sidemenu.scss";
+@import "./components/navbar.scss";
+@import "./components/gfbox.scss";
+@import "./components/pagination.scss";
+@import "./components/tabs.scss";
+@import "./components/timepicker.scss";
+@import "./components/filter-controls.scss";
+@import "./components/filter-list.scss";
+@import "./components/filter-table.scss";
+@import "./components/scrollbar.scss";
+@import "./components/old_stuff.scss";
+@import "./components/navbar.scss";
+@import "./components/popovers.scss";
+@import "./components/alerts.scss";
+@import "./components/typeahead.scss";
+@import "./components/tags.scss";
+@import "./components/modals.scss";
+@import "./components/dropdown.scss";
+@import "./components/color_picker.scss";
+@import "./components/tooltip.scss";
+@import "./components/buttons.scss";
+@import "./components/footer.scss";
+@import "./components/infobox.scss";
+@import "./components/shortcuts.scss";
+@import "./components/query_editor.scss";
+@import "./components/navs.scss";
+
+// PAGES
+@import "./pages/login.scss";
+@import "./pages/playlist.scss";
+@import "./pages/admin.scss";
+@import "./pages/alerting.scss";
+@import "./pages/apps.scss";
+@import "./pages/signup.scss";
+
diff --git a/public/less/layout/page.scss b/public/less/layout/page.scss
new file mode 100644
index 00000000000..de28297b319
--- /dev/null
+++ b/public/less/layout/page.scss
@@ -0,0 +1,71 @@
+.grafana-app {
+  display: block;
+  height: 100%;
+}
+
+.dashboard-container {
+  padding: 5px 5px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.main-view {
+  // background-image: url(/img/grafana_pattern.png);
+  // background-position: 100% -550px;
+  // background-repeat: no-repeat;
+  height: 100%;
+}
+
+.page-dashboard {
+  .main-view {
+    background-image: none;
+  }
+}
+
+.page-container {
+  background-color: $pageBackground;
+  position: relative;
+  padding: 25px 56px 10px 56px;
+  max-width: 1060px;
+  margin-left: 0;
+  height: 100%;
+}
+
+
+.page-header {
+  padding: 10px 0 39px 0px;
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -ms-flexbox;      /* TWEENER - IE 10 */
+  display: -webkit-flex;     /* NEW - Chrome */
+  flex-wrap: wrap-reverse;
+  background: transparent url(../img/page_header_line.png) no-repeat left 60px;
+  h1 {
+    font-style: italic;
+  }
+}
+
+.admin-page {
+  max-width: 800px;
+  margin-left: 10px;
+  .gf-box {
+    margin-top: 0;
+  }
+  .gf-box-body {
+    min-height: 0;
+  }
+  h2 {
+    margin-left: 15px;
+    margin-bottom: 0px;
+    font-size: $fontSizeLarge;
+    color: $textColor;
+    i {
+      padding-right: 6px;
+    }
+  }
+}
+
diff --git a/public/less/mixins/buttons.scss b/public/less/mixins/buttons.scss
new file mode 100644
index 00000000000..6d7def7e2dc
--- /dev/null
+++ b/public/less/mixins/buttons.scss
@@ -0,0 +1,18 @@
+
+// Button backgrounds
+// ------------------
+@mixin buttonBackground($startColor, $endColor, $textColor: #fff, $textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
+  // gradientBar will set the background to a pleasing blend of these, to support IE<=9
+  @include gradientBar($startColor, $endColor, $textColor, $textShadow);
+
+  box-shadow: inset 0 -4px rgba(0,0,0,0.3);
+
+  // in these cases the gradient won't cover the background, so we override
+  &:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
+    color: $textColor;
+    background-image: none;
+    background-color: darken($endColor, 2%);
+  }
+}
+
+
diff --git a/public/less/mixins/mixins.scss b/public/less/mixins/mixins.scss
new file mode 100644
index 00000000000..ecbdc0288e9
--- /dev/null
+++ b/public/less/mixins/mixins.scss
@@ -0,0 +1,334 @@
+
+@mixin clearfix() {
+  &::after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
+
+@mixin tab-focus() {
+  // Default
+  outline: thin dotted;
+  // WebKit
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+
+// Center-align a block level element
+// ----------------------------------
+@mixin center-block() {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+// Sizing shortcuts
+// -------------------------
+@mixin size($height, $width) {
+  width: $width;
+  height: $height;
+}
+
+@mixin square($size) {
+  @include size($size, $size);
+}
+
+// Placeholder text
+// -------------------------
+@mixin placeholder($color: $placeholderText) {
+  &:-moz-placeholder {
+    color: $color;
+  }
+  &:-ms-input-placeholder {
+    color: $color;
+  }
+  &::-webkit-input-placeholder {
+    color: $color;
+  }
+}
+
+// Text overflow
+// -------------------------
+// Requires inline-block or block for proper styling
+@mixin text-overflow() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// CSS image replacement
+// -------------------------
+// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
+.hide-text {
+  font: 0/0 a;
+  color: transparent;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0;
+}
+
+
+// FONTS
+// --------------------------------------------------
+
+@mixin font-family-serif() {
+  font-family: $serifFontFamily;
+}
+
+@mixin font-family-sans-serif() {
+  font-family: $sansFontFamily;
+}
+
+@mixin font-family-monospace() {
+  font-family: $monoFontFamily;
+}
+
+@mixin font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
+  font-size: $size;
+  font-weight: $weight;
+  line-height: $lineHeight;
+}
+
+@mixin font-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
+  @include font-family-serif();
+  @include font-shorthand($size, $weight, $lineHeight);
+}
+
+@mixin font-sans-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
+  @include font-family-sans-serif();
+  @include font-shorthand($size, $weight, $lineHeight);
+}
+
+@mixin monospace($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
+  @include font-family-monospace;
+  @include font-shorthand($size, $weight, $lineHeight);
+}
+
+
+// FORMS
+// --------------------------------------------------
+
+// Block level inputs
+.input-block-level {
+  display: block;
+  width: 100%;
+  min-height: $inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
+  @include box-sizing(border-box); // Makes inputs behave like true block-level elements
+}
+
+
+// CSS3 PROPERTIES
+// --------------------------------------------------
+
+// Border Radius
+@mixin border-radius($radius) {
+  -webkit-border-radius: $radius;
+  -moz-border-radius: $radius;
+  border-radius: $radius;
+}
+
+// Single Corner Border Radius
+@mixin border-top-left-radius($radius) {
+  -webkit-border-top-left-radius: $radius;
+  -moz-border-radius-topleft: $radius;
+  border-top-left-radius: $radius;
+}
+@mixin border-top-right-radius($radius) {
+  -webkit-border-top-right-radius: $radius;
+  -moz-border-radius-topright: $radius;
+  border-top-right-radius: $radius;
+}
+@mixin border-bottom-right-radius($radius) {
+  -webkit-border-bottom-right-radius: $radius;
+      -moz-border-radius-bottomright: $radius;
+          border-bottom-right-radius: $radius;
+}
+@mixin border-bottom-left-radius($radius) {
+  -webkit-border-bottom-left-radius: $radius;
+      -moz-border-radius-bottomleft: $radius;
+          border-bottom-left-radius: $radius;
+}
+
+// Single Side Border Radius
+@mixin border-top-radius($radius) {
+  @include border-top-right-radius($radius);
+  @include border-top-left-radius($radius);
+}
+@mixin border-right-radius($radius) {
+  @include border-top-right-radius($radius);
+  @include border-bottom-right-radius($radius);
+}
+@mixin border-bottom-radius($radius) {
+  @include border-bottom-right-radius($radius);
+  @include border-bottom-left-radius($radius);
+}
+@mixin border-left-radius($radius) {
+  @include border-top-left-radius($radius);
+  @include border-bottom-left-radius($radius);
+}
+
+// Drop shadows
+@mixin box-shadow($shadow) {
+  box-shadow: $shadow;
+}
+
+// Transitions
+@mixin transition($transition) {
+  transition: $transition;
+}
+
+@mixin transition-delay($transition-delay) {
+  transition-delay: $transition-delay;
+}
+
+@mixin transition-duration($transition-duration) {
+  transition-duration: $transition-duration;
+}
+
+// Transformations
+@mixin rotate($degrees) {
+  transform: rotate($degrees);
+}
+
+@mixin scale($ratio) {
+  transform: scale($ratio);
+}
+
+@mixin translate($x, $y) {
+  transform: translate($x, $y);
+}
+
+@mixin skew($x, $y) {
+  transform: skew($x, $y);
+  -webkit-backface-visibility: hidden; // See https://github.com/twbs/bootstrap/issues/5319
+}
+
+@mixin translate3d($x, $y, $z) {
+  transform: translate3d($x, $y, $z);
+}
+
+@mixin backface-visibility($visibility) {
+  backface-visibility: $visibility;
+}
+// Heads up: FF 3.6 and under need "padding" instead of "padding-box"
+@mixin background-clip($clip) {
+  background-clip: $clip;
+}
+
+// Background sizing
+@mixin background-size($size) {
+  background-size: $size;
+}
+
+// Box sizing
+@mixin box-sizing($boxmodel) {
+  box-sizing: $boxmodel;
+}
+
+// User select
+// For selecting text on the page
+@mixin user-select($select) {
+  user-select: $select;
+}
+
+// Resize anything
+@mixin resizable($direction) {
+  resize: $direction; // Options: horizontal, vertical, both
+  overflow: auto; // Safari fix
+}
+
+// CSS3 Content Columns
+@mixin content-columns($columnCount, $columnGap: $gridGutterWidth) {
+  -webkit-column-count: $columnCount;
+     -moz-column-count: $columnCount;
+          column-count: $columnCount;
+  -webkit-column-gap: $columnGap;
+     -moz-column-gap: $columnGap;
+          column-gap: $columnGap;
+}
+
+// Optional hyphenation
+@mixin hyphens($mode: auto) {
+  word-wrap: break-word;
+  -webkit-hyphens: $mode;
+     -moz-hyphens: $mode;
+      -ms-hyphens: $mode;
+       -o-hyphens: $mode;
+          hyphens: $mode;
+}
+
+// Opacity
+@mixin opacity($opacity) {
+  opacity: $opacity / 100;
+}
+
+// BACKGROUNDS
+// --------------------------------------------------
+
+// Add an alphatransparency value to any background or border color (via Elyse Holladay)
+#translucent {
+  @mixin background($color: $white, $alpha: 1) {
+    background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
+  }
+  @mixin border($color: $white, $alpha: 1) {
+    border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
+    @include background-clip(padding-box);
+  }
+}
+
+// Gradient Bar Colors for buttons and alerts
+@mixin gradientBar($primaryColor, $secondaryColor, $textColor: #fff, $textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
+  color: $textColor;
+  text-shadow: $textShadow;
+  @include gradient-vertical($primaryColor, $secondaryColor);
+  border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%);
+  border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
+}
+
+// Gradients
+@mixin gradient-horizontal($startColor: #555, $endColor: #333) {
+  background-color: $endColor;
+  background-image: linear-gradient(to right, $startColor, $endColor); // Standard, IE10
+  background-repeat: repeat-x;
+}
+
+@mixin gradient-vertical($startColor: #555, $endColor: #333) {
+  background-color: mix($startColor, $endColor, 60%);
+  background-image: linear-gradient(to bottom, $startColor, $endColor); // Standard, IE10
+  background-repeat: repeat-x;
+}
+
+@mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45deg) {
+  background-color: $endColor;
+  background-repeat: repeat-x;
+  background-image: linear-gradient($deg, $startColor, $endColor); // Standard, IE10
+}
+
+@mixin gradient-horizontal-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
+  background-color: mix($midColor, $endColor, 80%);
+  background-image: linear-gradient(to right, $startColor, $midColor $colorStop, $endColor);
+  background-repeat: no-repeat;
+}
+
+@mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
+  background-color: mix($midColor, $endColor, 80%);
+  background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
+  background-repeat: no-repeat;
+}
+
+@mixin gradient-radial($innerColor: #555, $outerColor: #333) {
+  background-color: $outerColor;
+  background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor));
+  background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor);
+  background-image: -moz-radial-gradient(circle, $innerColor, $outerColor);
+  background-image: -o-radial-gradient(circle, $innerColor, $outerColor);
+  background-repeat: no-repeat;
+}
+
+@mixin striped($color: #555, $angle: 45deg) {
+  background-color: $color;
+  background-image: linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
+}
+
+
diff --git a/public/less/pages/admin.scss b/public/less/pages/admin.scss
new file mode 100644
index 00000000000..30bc3ca8b34
--- /dev/null
+++ b/public/less/pages/admin.scss
@@ -0,0 +1,10 @@
+
+.admin-settings-section {
+  color: $variable;
+  font-weight: bold;
+}
+
+td.admin-settings-key {
+  padding-left: 20px;
+}
+
diff --git a/public/less/pages/alerting.scss b/public/less/pages/alerting.scss
new file mode 100644
index 00000000000..00ecf707520
--- /dev/null
+++ b/public/less/pages/alerting.scss
@@ -0,0 +1,42 @@
+.copy-query {
+  display: block;
+  width: 30px;
+  height: 36px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent url(/img/CopyQuery.png) 50% 50% no-repeat;
+  cursor: pointer;
+}
+
+.alert-state {
+  display: inline-block;
+  padding-left: 30px;
+  background: 0 50% no-repeat;
+  background-size: 20px auto;
+}
+
+.alert-state-online {
+  background-image: url('/img/online.svg');
+}
+
+.alert-state-warning {
+  background-image: url('/img/warn-tiny.svg');
+}
+
+.alert-state-critical {
+  background-image: url('/img/critical.svg');
+}
+
+.alert-notify-emails {
+  width: 400px;
+  border-right: 1px solid $black;
+}
+
+.alert-notify-emails .bootstrap-tagsinput {
+  width: 394px; // offset for 8px left padding and border width
+}
+
+.alert-notify-emails .bootstrap-tagsinput input {
+  border: 0;
+}
diff --git a/public/less/pages/apps.scss b/public/less/pages/apps.scss
new file mode 100644
index 00000000000..35e4f8522cd
--- /dev/null
+++ b/public/less/pages/apps.scss
@@ -0,0 +1,26 @@
+
+.app-edit-logo-box {
+  padding: 1.2rem;
+  background: $grafanaPanelBackground;
+  text-align: center;
+  img {
+    max-width: 7rem;
+  }
+  margin-right: 2rem;
+}
+
+.app-edit-links {
+  list-style: none;
+  margin: 0 0 0 2rem;
+
+  li {
+    background: $grafanaPanelBackground;
+    margin-top: 4px;
+    padding: 0.2rem 1rem;
+  }
+}
+
+.app-edit-description {
+  font-style: italic;
+  margin-bottom: 1.5rem;
+}
diff --git a/public/less/pages/login.scss b/public/less/pages/login.scss
new file mode 100644
index 00000000000..a0f2188b4f2
--- /dev/null
+++ b/public/less/pages/login.scss
@@ -0,0 +1,169 @@
+
+.login-form {
+  width: 50%;
+  float: left;
+  margin-left: 25%;
+  margin-right: 25%;
+  padding-top: 25px;
+}
+
+.login-box {
+  width: 700px;
+  margin: 70px auto 0 auto;
+}
+
+.login-box-logo {
+  text-align: center;
+  img {
+    width: 125px;
+  }
+  .icon-gf-grafana_wordmark {
+    color: $linkColor;
+    position: relative;
+    top: -90px;
+    font-size: 3rem;
+    text-shadow: 3px 3px 5px black;
+  }
+}
+
+.login-inner-box {
+  background: $grafanaPanelBackground;
+}
+
+.login-tab-header {
+  background: $grafanaTargetBackground;
+  text-align: center;
+}
+
+.btn-login-tab {
+  background: transparent;
+  border: none;
+  font-size: 15px;
+  padding: 10px 10px;
+
+  &.active {
+    background: darken($grafanaTargetBackground, 5%);
+    color: $white;
+  }
+
+  font-weight: bold;
+  display: inline-block;
+  width: 170px;
+  color: $textColor;
+}
+
+.password-strength {
+  display: block;
+  width: 15%;
+  overflow: visible;
+  white-space: nowrap;
+  padding-top: 3px;
+  color: darken($textColor, 20%);
+  border-top: 3px solid $red;
+  &.password-strength-ok {
+    width: 40%;
+    border-top: 3px solid lighten($yellow, 10%);
+  }
+  &.password-strength-good {
+    width: 100%;
+    border-top: 3px solid lighten($green, 10%);
+  }
+}
+
+.login-submit-button-row {
+  text-align: center;
+  margin-top: 30px;
+  button {
+    padding: 14px 23px;
+    font-size: 16px;
+    font-weight: bold;
+    min-width: 150px;
+    display: inline-block;
+    border: 1px solid lighten($btnInverseBackground, 10%);
+  }
+}
+
+.login-oauth {
+  margin-bottom: 15px;
+
+  .btn {
+    margin: 5px;
+  }
+
+  .btn-google {
+    background: #dd4b39;
+    color: white;
+  }
+
+  .btn-github {
+    background: #555;
+    color: white;
+  }
+}
+
+.password-recovery {
+  background: $grafanaTargetBackground;
+  margin-top: 10px;
+  padding: 10px;
+  a {
+    color: $grayLight;
+  }
+}
+
+.login-divider {
+  float: left;
+  width: 50%;
+  margin: 5px 25% 25px 25%;
+
+  .login-divider-line {
+    width: 100%;
+    height: 10px;
+    border-bottom: 1px solid $gray;
+
+    .login-divider-text {
+      background-color: $grayDarker;
+      color: $grayLight;
+      padding: 0 10px;
+    }
+  }
+}
+
+.signup-page-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 100%;
+  width: 100%;
+  background-image: url(../img/background_tease.jpg);
+  opacity: 0.3;
+  z-index: -1;
+}
+
+.invite-box {
+  text-align: center;
+  border: 1px solid $grafanaTargetFuncBackground;
+	background-color: $grafanaPanelBackground;
+  width: 800px;
+  margin-left: auto;
+  margin-right: auto;
+
+  .tight-form {
+    text-align: left;
+  }
+
+  h3 {
+    margin-top: 30px;
+  }
+
+  .modal-close {
+    float: right;
+    font-size: 140%;
+    padding: 10px;
+  }
+
+  .modal-tagline {
+    font-size: 16px;
+  }
+}
diff --git a/public/less/pages/playlist.scss b/public/less/pages/playlist.scss
new file mode 100644
index 00000000000..782d49d584d
--- /dev/null
+++ b/public/less/pages/playlist.scss
@@ -0,0 +1,93 @@
+.playlist-search-container {
+  // margin: 15px;
+  z-index: 1000;
+  position: relative;
+  width: 700px;
+  box-shadow: 0px 0px 55px 0px black;
+  background-color: $grafanaPanelBackground;
+
+  .label-tag {
+    margin-left: 6px;
+    font-size: 11px;
+    padding: 2px 6px;
+  }
+}
+
+.playlist-search-switches {
+  position: absolute;
+  top: 8px;
+  right: 11px;
+}
+
+.playlist-search-field-wrapper {
+  input {
+    width: 100%;
+    padding: 8px 8px;
+    height: 100%;
+    box-sizing: border-box;
+  }
+  button {
+    margin: 0 4px 0 0;
+  }
+  > span {
+    display: block;
+    overflow: hidden;
+  }
+}
+
+.playlist-search-results-container {
+  min-height: 100px;
+  overflow: auto;
+  display: block;
+  line-height: 28px;
+
+  .search-item:hover, .search-item.selected {
+    background-color: $grafanaListHighlight;
+  }
+
+  .selected {
+    .search-result-tag {
+      opacity: 0.70;
+      color: white;
+    }
+  }
+
+  .fa-star, .fa-star-o {
+    padding-left: 13px;
+  }
+
+  .fa-star {
+    color: $orange;
+  }
+
+  .search-result-link {
+    color: $grafanaListMainLinkColor;
+    .fa {
+      padding-right: 10px;
+    }
+  }
+
+  .search-item {
+    display: block;
+    padding: 3px 10px;
+    white-space: nowrap;
+    background-color: $grafanaListBackground;
+    margin-bottom: 4px;
+    .search-result-icon:before {
+      content: "\f009";
+    }
+
+    &.search-item-dash-home .search-result-icon:before {
+      content: "\f015";
+    }
+  }
+
+  .search-result-tags {
+    float: right;
+  }
+
+  .search-result-actions {
+    float: right;
+    padding-left: 20px;
+  }
+}
diff --git a/public/less/pages/signup.scss b/public/less/pages/signup.scss
new file mode 100644
index 00000000000..7b2b0b0e84a
--- /dev/null
+++ b/public/less/pages/signup.scss
@@ -0,0 +1,17 @@
+.signup-page-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 100%;
+  width: 100%;
+  background-image: url(/img/background_tease.jpg);
+
+  .signup-logo-container {
+    width: 150px;
+    margin: 0 auto;
+    padding: 80px 0;
+  }
+}
+
diff --git a/public/less/utils/angular.scss b/public/less/utils/angular.scss
new file mode 100644
index 00000000000..1519b249920
--- /dev/null
+++ b/public/less/utils/angular.scss
@@ -0,0 +1,7 @@
+
+
+[ng\:cloak], [ng-cloak], .ng-cloak {
+  display: none !important;
+}
+
+
diff --git a/public/less/utils/utils.scss b/public/less/utils/utils.scss
new file mode 100644
index 00000000000..497142956a8
--- /dev/null
+++ b/public/less/utils/utils.scss
@@ -0,0 +1,64 @@
+.highlight-word {
+  color: $orange;
+}
+
+// Close icons
+// --------------------------------------------------
+.close {
+  float: right;
+  font-size: 20px;
+  font-weight: bold;
+  line-height: $baseLineHeight;
+  color: $black;
+  text-shadow: 0 1px 0 rgba(255,255,255,1);
+  @include opacity(20);
+  &:hover,
+  &:focus {
+    color: $black;
+    text-decoration: none;
+    cursor: pointer;
+    @include opacity(40);
+  }
+}
+
+// Additional properties for button version
+// iOS requires the button element instead of an anchor tag.
+// If you want the anchor version, it requires `href="#"`.
+button.close {
+  padding: 0;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  -webkit-appearance: none;
+}
+
+//
+// Utility classes
+// --------------------------------------------------
+
+
+// Quick floats
+.pull-right {
+  float: right;
+}
+.pull-left {
+  float: left;
+}
+
+// Toggling content
+.hide {
+  display: none;
+}
+.show {
+  display: block;
+}
+
+// Visibility
+.invisible {
+  visibility: hidden;
+}
+
+// For Affix plugin
+.affix {
+  position: fixed;
+}
diff --git a/public/less/utils/validation.scss b/public/less/utils/validation.scss
new file mode 100644
index 00000000000..b732322d2de
--- /dev/null
+++ b/public/less/utils/validation.scss
@@ -0,0 +1,7 @@
+input[type=text].ng-dirty.ng-invalid {
+  box-shadow: inset 0 0px 7px $red;
+}
+
+form input.ng-invalid {
+  color: $errorText;
+}
diff --git a/public/less/variables.dark.scss b/public/less/variables.dark.scss
new file mode 100644
index 00000000000..7237b386e7f
--- /dev/null
+++ b/public/less/variables.dark.scss
@@ -0,0 +1,342 @@
+// Global values
+// --------------------------------------------------
+
+
+// Grays
+// -------------------------
+$black:                 #000;
+$gray:                  #bbb;
+$grayDark:              #262626;
+$grayDarker:            #1f1f1f;
+
+$grayLight:             #ADAFAE;
+$grayLighter:           #BBBFC2;
+$white:                 #fff;
+
+// Accent colors
+// -------------------------
+$blue:                  #33B5E5;
+$blueDark:              #005f81;
+$green:                 #669900;
+$red:                   #CC3900;
+$yellow:                #ECBB13;
+$orange:                #FF8800;
+$pink:                  #FF4444;
+$purple:                #9933CC;
+$variable:              #32D1DF;
+
+// Status colors
+// -------------------------
+$online:                #10a345;
+$warn:                  #ffc03c;
+$critical:              #ed2e18;
+
+// grafana Variables
+// -------------------------
+$grafanaPanelBackground: 	$grayDarker;
+$grafanaPanelBorder: 		solid 1px $grayDark;
+$grafanaTriggerBorder:		solid 1px #555;
+
+// Graphite Target Editor
+$grafanaTargetBorder:         $black;
+$grafanaTargetBackground:     $grayDark;
+$grafanaTargetColor:          #c8c8c8;
+$grafanaTargetColorHide:      darken(#c8c8c8, 25%);
+$grafanaTargetSegmentBorder:  #050505;
+
+$grafanaTargetFuncBackground: #333;
+$grafanaTargetFuncHightlight: #444;
+
+$grafanaSelectBackground:	$grafanaTargetFuncBackground;
+
+$modalBackground: $black;
+$codeTagBackground: #444;
+
+// Scaffolding
+// -------------------------
+$bodyBackground:  rgb(20,20,20);
+$pageBackground:  $grayDarker;
+$textColor:       $grayLighter;
+
+// Links
+// -------------------------
+$linkColor:             darken($white,11%);
+$linkColorDisabled:     darken($linkColor,30%);
+$linkColorHover:        $white;
+
+
+// Typography
+// -------------------------
+$sansFontFamily:        "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+$serifFontFamily:       Georgia, "Times New Roman", Times, serif;
+$monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace;
+
+$baseFontSize:          14px;
+$baseFontWeight:		    400;
+$baseFontFamily:        $sansFontFamily;
+$baseLineHeight:        20px;
+$altFontFamily:         $serifFontFamily;
+$fontWeightSemi:		    600;
+
+$headingsFontFamily:    inherit; // empty to use BS default, $baseFontFamily
+$headingsFontWeight:    400;    // instead of browser default, bold
+$headingsFontStyle:    	normal;
+$headingsColor:         darken($white,11%); // empty to use BS default, $textColor
+$inputText:             $grayLight;
+
+
+// Component sizing
+// -------------------------
+// Based on 14px font-size and 20px line-height
+
+$fontSizeLarge:         $baseFontSize * 1.25; // ~18px
+$fontSizeSmall:         $baseFontSize * 0.85; // ~12px
+$fontSizeMini:          $baseFontSize * 0.75; // ~11px
+
+$paddingLarge:          11px 19px; // 44px
+$paddingSmall:          2px 10px;  // 26px
+$paddingMini:           0px 6px;   // 22px
+
+$baseBorderRadius:      3px;
+$borderRadiusLarge:     4px;
+$borderRadiusSmall:     2px;
+
+// Lists
+$grafanaListBackground:  $grayDark;
+$grafanaListAccent:      lighten($grayDarker, 2%);
+$grafanaListBorderTop:      $grayDark;
+$grafanaListBorderBottom:   $black;
+$grafanaListHighlight:      #333;
+$grafanaListMainLinkColor: $textColor;
+
+// Scrollbars
+$scrollbarBackground: #3a3a3a;
+$scrollbarBackground2: #3a3a3a;
+$scrollbarBorder: black;
+
+// Tables
+// -------------------------
+$tableBackground:                   transparent; // overall background-color
+$tableBackgroundAccent:             rgba(100, 100, 100, 0.3); // for striping
+$tableBackgroundHover:              $grayDark; // for hover
+$tableBorder:                       $grayDark; // table and cell border
+
+// Buttons
+// -------------------------
+$btnBackground:                     $grayDark;
+$btnBackgroundHighlight:            darken($grayLight, 15%);
+$btnBackgroundShadow:            	darken($grayLight, 15%);
+$btnBorder:                         #bbb;
+
+$btnPrimaryBackground:              $blueDark;
+$btnPrimaryBackgroundHighlight:     lighten($blueDark, 5%);
+
+$btnInfoBackground:                 lighten($purple, 3%);
+$btnInfoBackgroundHighlight:        darken($purple, 3%);
+
+$btnSuccessBackground:              lighten($green, 3%);
+$btnSuccessBackgroundHighlight:     darken($green, 3%);
+
+$btnWarningBackground:              lighten($orange, 3%);
+$btnWarningBackgroundHighlight:     darken($orange, 3%);
+
+$btnDangerBackground:               lighten($red, 3%);
+$btnDangerBackgroundHighlight:      darken($red, 3%);
+
+$btnInverseBackground:              $grayDark;
+$btnInverseBackgroundHighlight:     lighten($grayDark, 1%);
+$btnInverseText:                    $textColor;
+$btnInverseBorder:                  #333;
+
+$btnText:              				$gray;
+
+$iconContainerBackground:			      $black;
+$iconContainerBackgroundHighlight:	lighten($black, 5%);
+$iconContainerBorder:				        1px solid transparent;
+$iconContainerShadow:				        0 0 14px 2px rgba(255,255,255, 0.05);
+
+
+// Forms
+// -------------------------
+$inputBackground:               lighten($grayDark,5%);
+$inputBorder:                   lighten($grayDark,5%);
+$inputBorderRadius:             $baseBorderRadius;
+$inputDisabledBackground:       #555;
+$formActionsBackground:         transparent;
+$inputHeight:                   $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
+$labelBackground:				$grayDark;
+
+
+// Sidemenu
+// -------------------------
+$sideMenuTopShadow:          $navbarDropdownShadow;
+$sideMenuBackground:         $grayDark;
+$sideMenuBackgroundHighlight: lighten($grayDark, 4%);
+$sideMenuShadow: 0 0 35px 0 $bodyBackground;
+
+// Search
+$searchShadow: 0 0 35px 0 $bodyBackground;
+
+// Dropdowns
+// -------------------------
+$dropdownBackground:            $heroUnitBackground;
+$dropdownBorder:                rgba(0,0,0,.2);
+$dropdownDividerTop:            transparent;
+$dropdownDividerBottom:         #444;
+$dropdownDivider:               $dropdownDividerBottom;
+$dropdownTitle:                 $linkColorDisabled;
+
+$dropdownLinkColor:             $textColor;
+$dropdownLinkColorHover:        $white;
+$dropdownLinkColorActive:       $white;
+
+$dropdownLinkBackgroundActive:  $blueDark;
+$dropdownLinkBackgroundHover:   $blueDark;
+
+
+
+// COMPONENT VARIABLES
+// --------------------------------------------------
+
+
+// Z-index master list
+// -------------------------
+// Used for a bird's eye view of components dependent on the z-axis
+// Try to avoid customizing these :)
+$zindexDropdown:          1000;
+$zindexPopover:           1010;
+$zindexTooltip:           1020;
+$zindexFixedNavbar:       1030;
+$zindexModalBackdrop:     1040;
+$zindexModal:             1050;
+
+// Sprite icons path
+// -------------------------
+$iconSpritePath:          "../img/glyphicons-halflings.png";
+$iconWhiteSpritePath:     "../img/glyphicons-halflings-white.png";
+
+
+// Input placeholder text color
+// -------------------------
+$placeholderText:         darken($textColor, 25%);
+
+
+// Hr border color
+// -------------------------
+$hrBorder:                $grayDark;
+
+
+// Horizontal forms & lists
+// -------------------------
+$horizontalComponentOffset:       180px;
+
+
+// Wells
+// -------------------------
+$wellBackground:                  #131517;
+
+
+// Navbar
+// -------------------------
+$navbarCollapseWidth:             979px;
+$navbarCollapseDesktopWidth:      $navbarCollapseWidth + 1;
+
+$navbarHeight:                    52px;
+$navbarBackgroundHighlight:       $grayDark;
+$navbarBackground:                $grayDark;
+$navbarBorder:                    1px solid $bodyBackground;
+
+$navbarText:                      $grayLight;
+$navbarLinkColor:                 $grayLight;
+$navbarLinkColorHover:            $white;
+$navbarLinkColorActive:           $navbarLinkColorHover;
+$navbarLinkBackgroundHover:       transparent;
+$navbarLinkBackgroundActive:      $navbarBackground;
+$navbarBrandColor:                $linkColor;
+$navbarDropdownShadow:            inset 0px 4px 10px -4px $bodyBackground;
+
+$navbarButtonBackground:          lighten($navbarBackground, 3%);
+$navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
+
+// Pagination
+// -------------------------
+$paginationBackground:                $bodyBackground;
+$paginationBorder:                    transparent;
+$paginationActiveBackground:          $blue;
+
+
+// Hero unit
+// -------------------------
+$heroUnitBackground:              $grayDark;
+$heroUnitHeadingColor:            inherit;
+$heroUnitLeadColor:               inherit;
+
+
+// Form states and alerts
+// -------------------------
+$warningText:             darken(#c09853, 10%);
+$warningBackground:       $orange;
+
+$errorText:               #b94a48;
+$errorBackground:         $btnDangerBackground;
+
+$successText:             #468847;
+$successBackground:       $btnSuccessBackground;
+
+$infoText:                $blueDark;
+$infoBackground:          $btnInfoBackground;
+
+// Tooltips and popovers
+// -------------------------
+$tooltipColor:            $white;
+$tooltipBackground:       rgb(58, 57, 57);
+$tooltipArrowWidth:       5px;
+$tooltipArrowColor:       $tooltipBackground;
+$tooltipLinkColor:        $linkColor;
+
+$popoverBackground:       $heroUnitBackground;
+$popoverArrowWidth:       10px;
+$popoverArrowColor:       $popoverBackground;
+$popoverTitleBackground:  $popoverBackground;
+
+// Special enhancement for popovers
+$popoverArrowOuterWidth:  $popoverArrowWidth + 1;
+$popoverArrowOuterColor:  rgba(0,0,0,.25);
+
+// images
+$checkboxImageUrl: '../img/checkbox.png';
+
+// GRID
+// --------------------------------------------------
+
+
+// Default 940px grid
+// -------------------------
+$gridColumns:             12;
+$gridColumnWidth:         60px;
+$gridGutterWidth:         20px;
+$gridRowWidth:            ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1));
+
+// 1200px min
+$gridColumnWidth1200:     70px;
+$gridGutterWidth1200:     30px;
+$gridRowWidth1200:        ($gridColumns * $gridColumnWidth1200) + ($gridGutterWidth1200 * ($gridColumns - 1));
+
+// 768px-979px
+$gridColumnWidth768:      42px;
+$gridGutterWidth768:      20px;
+$gridRowWidth768:         ($gridColumns * $gridColumnWidth768) + ($gridGutterWidth768 * ($gridColumns - 1));
+
+
+// Fluid grid
+// -------------------------
+$fluidGridColumnWidth:    percentage($gridColumnWidth/$gridRowWidth);
+$fluidGridGutterWidth:    percentage($gridGutterWidth/$gridRowWidth);
+
+// 1200px min
+$fluidGridColumnWidth1200:     percentage($gridColumnWidth1200/$gridRowWidth1200);
+$fluidGridGutterWidth1200:     percentage($gridGutterWidth1200/$gridRowWidth1200);
+
+// 768px-979px
+$fluidGridColumnWidth768:      percentage($gridColumnWidth768/$gridRowWidth768);
+$fluidGridGutterWidth768:      percentage($gridGutterWidth768/$gridRowWidth768);
diff --git a/public/less/variables.light.scss b/public/less/variables.light.scss
new file mode 100644
index 00000000000..5cc0908e42e
--- /dev/null
+++ b/public/less/variables.light.scss
@@ -0,0 +1,359 @@
+// Cosmo 2.3.2
+// Variables
+// --------------------------------------------------
+
+
+// Global values
+// --------------------------------------------------
+
+
+// Grays
+// -------------------------
+$black:                 #000;
+$grayDarker:            lighten(#000, 11.5%); // #222
+$grayDark:              lighten(#000, 20%);   // #333
+$gray:                  lighten(#000, 33.5%); // #555
+$grayLight:             lighten(#000, 60%);   // #999
+$grayLighter:           lighten(#000, 97.5%); // #eee
+$white:                 #fff;
+
+
+// Accent colors
+// -------------------------
+$blueOrig:              #007FFF;
+$blue:             	   	#2AB2E4;
+$blueDark:              #75CAEB;
+$green:                 #28B62C;
+$red:                   #FF4136;
+$yellow:                #FF851B;
+$orange:                #FF7518;
+$pink:                  #E671B8;
+$purple:                #9954BB;
+$variable:              #2AB2E4;
+
+// Status colors
+// -------------------------
+$online:                #01A64F;
+$warn:                  #F79520;
+$critical:              #EC2128;
+
+// grafana Variables
+// -------------------------
+$grafanaPanelBackground: 	$grayLighter;
+$grafanaPanelBorder: 	  	solid 1px #ddd;
+$grafanaTriggerBorder:		solid 1px $grayLight;
+
+// Submenu
+$submenuBackground:     rgb(218, 217, 217);
+$submenuBorder:         $white;
+
+// Tabs
+$fullEditBorder:          $grayLighter;
+
+// Graphite Target Editor
+$grafanaTargetBorder:         #ddd;
+$grafanaTargetBackground:     #efefef;
+$grafanaTargetColor:          $textColor;
+$grafanaTargetColorHide:      lighten($textColor, 25%);
+$grafanaTargetSegmentBorder:  #ddd;
+
+$grafanaTargetFuncBackground: darken($grafanaTargetBackground, 5%);
+$grafanaTargetFuncHightlight: darken($grafanaTargetBackground, 10%);
+
+$grafanaSelectBackground: $grafanaTargetFuncBackground;
+
+$modalBackground: $bodyBackground;
+$codeTagBackground: #ddd;
+
+// Scaffolding
+// -------------------------
+$bodyBackground:      #EFEFEF;
+$pageBackground:  	  $white;
+$textColor:           $gray;
+
+// Links
+// -------------------------
+$linkColor:             $gray;
+$linkColorDisabled:     lighten($linkColor,30%);
+$linkColorHover:        darken($linkColor, 20%);
+
+// Typography
+// -------------------------
+$sansFontFamily:        "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+$serifFontFamily:       Georgia, "Times New Roman", Times, serif;
+$monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace;
+
+$baseFontSize:          14px;
+$baseFontWeight:		    400;
+$fontWeightSemi:		    600;
+$baseFontFamily:        $sansFontFamily;
+$baseLineHeight:        20px;
+$altFontFamily:         $serifFontFamily;
+
+$headingsFontFamily:    inherit; // inherit. empty to use BS default, $baseFontFamily
+$headingsFontWeight:    normal;    // instead of browser default, bold
+$headingsFontStyle:    	normal;
+$headingsColor:         $textColor; // empty to use BS default, $textColor
+
+
+// Component sizing
+// -------------------------
+// Based on 14px font-size and 20px line-height
+
+$fontSizeLarge:         $baseFontSize * 1.25; // ~18px
+$fontSizeSmall:         $baseFontSize * 0.85; // ~12px
+$fontSizeMini:          $baseFontSize * 0.75; // ~11px
+
+$paddingLarge:          22px 30px; // 66px
+$paddingSmall:          2px 10px;  // 26px
+$paddingMini:           2px 6px;   // 24px
+
+$baseBorderRadius:      3px;
+$borderRadiusLarge:     4px;
+$borderRadiusSmall:     2px;
+
+// Lists
+$grafanaListBackground:  	     darken($grayLighter,5%);
+$grafanaListAccent:            darken($grayLighter,8%);
+$grafanaListBorderTop:         #eee;
+$grafanaListBorderBottom:      #eee;
+$grafanaListHighlight:         darken($grayLighter,10%);
+$grafanaListHighlightContrast: #ddd;
+$grafanaListMainLinkColor:     $textColor;
+
+
+// Tables
+// -------------------------
+$tableBackground:                   transparent; // overall background-color
+$tableBackgroundAccent:             #f9f9f9; // for striping
+$tableBackgroundHover:              #E8F8FD; // for hover
+$tableBorder:                       #ddd; // table and cell border
+
+// Scrollbars
+$scrollbarBackground: $grayLighter;
+$scrollbarBackground2: $grayLighter;
+$scrollbarBorder: $grayLight;
+
+// Buttons
+// -------------------------
+$btnBackground:                     $grayLighter;
+$btnBackgroundHighlight:            darken($grayLighter, 15%);
+$btnBorder:                         #bbb;
+
+$btnPrimaryBackground:              lighten($blue, 3%);
+$btnPrimaryBackgroundHighlight:     darken($blue, 3%);
+
+$btnInfoBackground:                 lighten($purple, 3%);
+$btnInfoBackgroundHighlight:        darken($purple, 3%);
+
+$btnSuccessBackground:              lighten($green, 3%);
+$btnSuccessBackgroundHighlight:     darken($green, 3%);
+
+$btnWarningBackground:              lighten($orange, 3%);
+$btnWarningBackgroundHighlight:     darken($orange, 3%);
+
+$btnDangerBackground:               lighten($red, 3%);
+$btnDangerBackgroundHighlight:      darken($red, 3%);
+
+$btnInverseBackground:              $grayLighter;
+$btnInverseBackgroundHighlight:     darken($grayLighter, 5%);
+$btnInverseText:                    $black;
+$btnInverseBorder:                  $grayLight;
+
+$btnText:              				$grayLighter;
+
+$iconContainerBackground:			      $white;
+$iconContainerBackgroundHighlight:	lighten($white, 5%);
+$iconContainerBorder:				        1px solid rgba(0,0,0, 0.05);
+$iconContainerShadow:				        0 0 14px 2px rgba(0,0,0, 0.05);
+
+
+// Forms
+// -------------------------
+$inputBackground:               $white;
+$inputBorder:                   $grayLight;
+$inputBorderRadius:             $baseBorderRadius;
+$inputDisabledBackground:       $grayLighter;
+$formActionsBackground:         #f5f5f5;
+$inputHeight:                   $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
+$inputText:                     #020202;
+$labelBackground:				#f8f8f8;
+
+
+// Sidemenu
+// -------------------------
+$sideMenuBackground:            $grafanaPanelBackground;
+$sideMenuBackgroundHighlight:   darken($sideMenuBackground, 4%);
+
+// search
+$searchShadow: 0 5px 30px 0 lighten($grayLight, 30%);
+
+// Dropdowns
+// -------------------------
+$dropdownBackground:            $white;
+$dropdownBorder:                $grafanaTargetBorder;
+$dropdownDividerTop:            #e5e5e5;
+$dropdownDividerBottom:         $white;
+$dropdownDivider:               $dropdownDividerTop;
+$dropdownTitle:                 #333;
+
+$dropdownLinkColor:             $grayDark;
+$dropdownLinkColorHover:        $white;
+$dropdownLinkColorActive:       $white;
+
+$dropdownLinkBackgroundActive:  $blue;
+$dropdownLinkBackgroundHover:   $blue;
+
+
+// COMPONENT VARIABLES
+// --------------------------------------------------
+
+
+// Z-index master list
+// -------------------------
+// Used for a bird's eye view of components dependent on the z-axis
+// Try to avoid customizing these :)
+$zindexDropdown:          1000;
+$zindexPopover:           1010;
+$zindexTooltip:           1030;
+$zindexFixedNavbar:       1030;
+$zindexModalBackdrop:     1040;
+$zindexModal:             1050;
+
+
+// Sprite icons path
+// -------------------------
+$iconSpritePath:          "../img/glyphicons-halflings.png";
+$iconWhiteSpritePath:     "../img/glyphicons-halflings-white.png";
+
+
+// Input placeholder text color
+// -------------------------
+$placeholderText:         $grayLight;
+
+
+// Hr border color
+// -------------------------
+$hrBorder:                $grayLighter;
+
+
+// Horizontal forms & lists
+// -------------------------
+$horizontalComponentOffset:       180px;
+
+
+// Wells
+// -------------------------
+$wellBackground:                  $grayLighter;
+
+
+// Navbar
+// -------------------------
+$navbarCollapseWidth:             979px;
+$navbarCollapseDesktopWidth:      $navbarCollapseWidth + 1;
+
+$navbarHeight:                    52px;
+$navbarBackgroundHighlight:       #f8f8f8;
+$navbarBackground:                #f8f8f8;
+$navbarBorder:                    1px solid $grafanaTargetBorder;
+
+$navbarText:                      #666;
+$navbarLinkColor:                 #666;
+$navbarLinkColorHover:            #333;
+$navbarLinkColorActive:           #555;
+$navbarLinkBackgroundHover:       transparent;
+$navbarLinkBackgroundActive:      darken($navbarBackground, 6.5%);
+$navbarDropdownShadow:            inset 0px 4px 7px -4px darken($bodyBackground, 20%);
+
+$navbarBrandColor:                $navbarLinkColor;
+
+$navbarButtonBackground:          lighten($navbarBackground, 3%);
+$navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
+
+
+// Pagination
+// -------------------------
+$paginationBackground:                $grayLight;
+$paginationBorder:                    transparent;
+$paginationActiveBackground:          $blue;
+
+
+// Hero unit
+// -------------------------
+$heroUnitBackground:              $grayLighter;
+$heroUnitHeadingColor:            inherit;
+$heroUnitLeadColor:               inherit;
+
+
+// Form states and alerts
+// -------------------------
+$warningText:             lighten($orange, 10%);
+$warningBackground:       $orange;
+$warningBorder:           transparent;
+
+$errorText:               lighten($red, 10%);
+$errorBackground:         $red;
+$errorBorder:             transparent;
+
+$successText:             lighten($green, 10%);
+$successBackground:       $green;
+$successBorder:           transparent;
+
+$infoText:                lighten($purple,10%);
+$infoBackground:          $purple;
+$infoBorder:              transparent;
+
+
+// Tooltips and popovers
+// -------------------------
+$tooltipColor:            $white;
+$tooltipBackground:       $grayDark;
+$tooltipArrowWidth:       5px;
+$tooltipArrowColor:       $tooltipBackground;
+$tooltipLinkColor:        darken($white,11%);
+
+$popoverBackground:       $white;
+$popoverArrowWidth:       15px;
+$popoverArrowColor:       $white;
+$popoverTitleBackground:  $white;
+
+// Special enhancement for popovers
+$popoverArrowOuterWidth:  $popoverArrowWidth + 1;
+$popoverArrowOuterColor:  rgba(0,0,0,.25);
+
+// images
+$checkboxImageUrl: '../img/checkbox_white.png';
+
+// GRID
+// --------------------------------------------------
+
+// Default 940px grid
+// -------------------------
+$gridColumns:             12;
+$gridColumnWidth:         60px;
+$gridGutterWidth:         20px;
+$gridRowWidth:            ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1));
+
+// 1200px min
+$gridColumnWidth1200:     70px;
+$gridGutterWidth1200:     30px;
+$gridRowWidth1200:        ($gridColumns * $gridColumnWidth1200) + ($gridGutterWidth1200 * ($gridColumns - 1));
+
+// 768px-979px
+$gridColumnWidth768:      42px;
+$gridGutterWidth768:      20px;
+$gridRowWidth768:         ($gridColumns * $gridColumnWidth768) + ($gridGutterWidth768 * ($gridColumns - 1));
+
+
+// Fluid grid
+// -------------------------
+$fluidGridColumnWidth:    percentage($gridColumnWidth/$gridRowWidth);
+$fluidGridGutterWidth:    percentage($gridGutterWidth/$gridRowWidth);
+
+// 1200px min
+$fluidGridColumnWidth1200:     percentage($gridColumnWidth1200/$gridRowWidth1200);
+$fluidGridGutterWidth1200:     percentage($gridGutterWidth1200/$gridRowWidth1200);
+
+// 768px-979px
+$fluidGridColumnWidth768:      percentage($gridColumnWidth768/$gridRowWidth768);
+$fluidGridGutterWidth768:      percentage($gridGutterWidth768/$gridRowWidth768);
diff --git a/tasks/options/concat.js b/tasks/options/concat.js
index eea68919253..521db4d9f39 100644
--- a/tasks/options/concat.js
+++ b/tasks/options/concat.js
@@ -7,7 +7,6 @@ module.exports = function(config) {
         '<%= genDir %>/vendor/css/timepicker.css',
         '<%= genDir %>/vendor/css/spectrum.css',
         '<%= genDir %>/css/bootstrap.dark.min.css',
-        '<%= genDir %>/css/bootstrap-responsive.min.css',
         '<%= genDir %>/vendor/css/font-awesome.min.css'
       ],
       dest: '<%= genDir %>/css/grafana.dark.min.css'
@@ -18,7 +17,6 @@ module.exports = function(config) {
         '<%= genDir %>/vendor/css/timepicker.css',
         '<%= genDir %>/vendor/css/spectrum.css',
         '<%= genDir %>/css/bootstrap.light.min.css',
-        '<%= genDir %>/css/bootstrap-responsive.min.css',
         '<%= genDir %>/vendor/css/font-awesome.min.css'
       ],
       dest: '<%= genDir %>/css/grafana.light.min.css'
diff --git a/tasks/options/sass.js b/tasks/options/sass.js
new file mode 100644
index 00000000000..38e72f28a98
--- /dev/null
+++ b/tasks/options/sass.js
@@ -0,0 +1,12 @@
+module.exports = function(config) {
+
+  return {
+    src:{
+      options: {},
+      files: {
+        "<%= genDir %>/css/grafana.dark.css": "<%= srcDir %>/less/grafana.dark.scss",
+        "<%= genDir %>/css/grafana.light.css": "<%= srcDir %>/less/grafana.light.scss",
+      }
+    }
+  };
+};
diff --git a/tasks/options/watch.js b/tasks/options/watch.js
index 187b07696c7..8e02bb2a509 100644
--- a/tasks/options/watch.js
+++ b/tasks/options/watch.js
@@ -21,9 +21,9 @@ module.exports = function(config, grunt) {
       grunt.task.run('jscs');
     }
 
-    if (/(\.less)$/.test(filepath)) {
+    if (/(\.scss)$/.test(filepath)) {
       grunt.task.run('clean:css');
-      grunt.task.run('css');
+      grunt.task.run('sass');
     }
 
     if (/(\.ts)$/.test(filepath)) {