diff --git a/client/app/scripts/components/app.js b/client/app/scripts/components/app.js
index eda6590c7..8a6ebd167 100644
--- a/client/app/scripts/components/app.js
+++ b/client/app/scripts/components/app.js
@@ -4,6 +4,9 @@ import classNames from 'classnames';
 import { connect } from 'react-redux';
 import { debounce } from 'lodash';
 
+import { ThemeProvider } from 'styled-components';
+import theme from 'weaveworks-ui-components/lib/theme';
+
 import Logo from './logo';
 import Footer from './footer';
 import Sidebar from './sidebar';
@@ -175,42 +178,44 @@ class App extends React.Component {
     const isIframe = window !== window.top;
 
     return (
-      <div className={className} ref={this.saveAppRef}>
-        {showingDebugToolbar() && <DebugToolbar />}
+      <ThemeProvider theme={theme}>
+        <div className={className} ref={this.saveAppRef}>
+          {showingDebugToolbar() && <DebugToolbar />}
 
-        {showingHelp && <HelpPanel />}
+          {showingHelp && <HelpPanel />}
 
-        {showingTroubleshootingMenu && <TroubleshootingMenu />}
+          {showingTroubleshootingMenu && <TroubleshootingMenu />}
 
-        {showingDetails && <Details />}
+          {showingDetails && <Details />}
 
-        <div className="header">
-          <TimeTravel />
-          <div className="selectors">
-            <div className="logo">
-              {!isIframe && <svg width="100%" height="100%" viewBox="0 0 1089 217">
-                <Logo />
-              </svg>}
+          <div className="header">
+            <TimeTravel />
+            <div className="selectors">
+              <div className="logo">
+                {!isIframe && <svg width="100%" height="100%" viewBox="0 0 1089 217">
+                  <Logo />
+                </svg>}
+              </div>
+              <Search />
+              <Topologies />
+              <ViewModeSelector />
+              <TimeControl />
             </div>
-            <Search />
-            <Topologies />
-            <ViewModeSelector />
-            <TimeControl />
           </div>
+
+          <Nodes />
+
+          <Sidebar classNames={isTableViewMode ? 'sidebar-gridmode' : ''}>
+            {showingNetworkSelector && isGraphViewMode && <NetworkSelector />}
+            {!isResourceViewMode && <Status />}
+            {!isResourceViewMode && <TopologyOptions />}
+          </Sidebar>
+
+          <Footer />
+
+          <Overlay faded={timeTravelTransitioning} />
         </div>
-
-        <Nodes />
-
-        <Sidebar classNames={isTableViewMode ? 'sidebar-gridmode' : ''}>
-          {showingNetworkSelector && isGraphViewMode && <NetworkSelector />}
-          {!isResourceViewMode && <Status />}
-          {!isResourceViewMode && <TopologyOptions />}
-        </Sidebar>
-
-        <Footer />
-
-        <Overlay faded={timeTravelTransitioning} />
-      </div>
+      </ThemeProvider>
     );
   }
 }
diff --git a/client/package.json b/client/package.json
index b6ebda8d5..1bfce232b 100644
--- a/client/package.json
+++ b/client/package.json
@@ -44,7 +44,7 @@
     "reselect": "3.0.0",
     "reselect-map": "1.0.1",
     "styled-components": "^2.2.1",
-    "weaveworks-ui-components": "git+https://github.com/weaveworks/ui-components.git#v0.1.28",
+    "weaveworks-ui-components": "git+https://github.com/weaveworks/ui-components.git#v0.1.45",
     "whatwg-fetch": "2.0.3",
     "xterm": "2.5.0"
   },
diff --git a/client/yarn.lock b/client/yarn.lock
index a9d4a1526..9074d831d 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -710,6 +710,13 @@ babel-plugin-transform-object-rest-spread@6.23.0:
     babel-plugin-syntax-object-rest-spread "^6.8.0"
     babel-runtime "^6.22.0"
 
+babel-plugin-transform-object-rest-spread@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz#0f36692d50fef6b7e2d4b3ac1478137a963b7b06"
+  dependencies:
+    babel-plugin-syntax-object-rest-spread "^6.8.0"
+    babel-runtime "^6.26.0"
+
 babel-plugin-transform-react-display-name@^6.23.0, babel-plugin-transform-react-display-name@^6.3.13:
   version "6.23.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-display-name/-/babel-plugin-transform-react-display-name-6.23.0.tgz#4398910c358441dc4cef18787264d0412ed36b37"
@@ -871,6 +878,13 @@ babel-runtime@6.x, babel-runtime@^6.0.0, babel-runtime@^6.18.0, babel-runtime@^6
     core-js "^2.4.0"
     regenerator-runtime "^0.10.0"
 
+babel-runtime@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.11.0"
+
 babel-template@^6.16.0, babel-template@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.24.1.tgz#04ae514f1f93b3a2537f2a0f60a5a45fb8308333"
@@ -4235,9 +4249,9 @@ node-pre-gyp@^0.6.29:
     tar "^2.2.1"
     tar-pack "^3.4.0"
 
-node-sass@3.13.0:
-  version "3.13.0"
-  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-3.13.0.tgz#d08b95bdebf40941571bd2c16a9334b980f8924f"
+node-sass@4.5.2:
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.5.2.tgz#4012fa2bd129b1d6365117e88d9da0500d99da64"
   dependencies:
     async-foreach "^0.1.3"
     chalk "^1.1.1"
@@ -4248,17 +4262,19 @@ node-sass@3.13.0:
     in-publish "^2.0.0"
     lodash.assign "^4.2.0"
     lodash.clonedeep "^4.3.2"
+    lodash.mergewith "^4.6.0"
     meow "^3.7.0"
     mkdirp "^0.5.1"
     nan "^2.3.2"
     node-gyp "^3.3.1"
     npmlog "^4.0.0"
-    request "^2.61.0"
+    request "^2.79.0"
     sass-graph "^2.1.1"
+    stdout-stream "^1.4.0"
 
-node-sass@4.5.2:
-  version "4.5.2"
-  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.5.2.tgz#4012fa2bd129b1d6365117e88d9da0500d99da64"
+node-sass@4.5.3:
+  version "4.5.3"
+  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.5.3.tgz#d09c9d1179641239d1b97ffc6231fdcec53e1568"
   dependencies:
     async-foreach "^0.1.3"
     chalk "^1.1.1"
@@ -4630,6 +4646,10 @@ pluralize@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-1.2.1.tgz#d1a21483fd22bb41e58a12fa3421823140897c45"
 
+polished@^1.7.0:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/polished/-/polished-1.8.1.tgz#e50b9f789d37d98da64912f1be2bf759d8bfae6c"
+
 postcss-calc@^5.2.0:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-5.3.1.tgz#77bae7ca928ad85716e2fda42f261bf7c1d65b5e"
@@ -5323,6 +5343,10 @@ regenerator-runtime@^0.10.0:
   version "0.10.3"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.3.tgz#8c4367a904b51ea62a908ac310bf99ff90a82a3e"
 
+regenerator-runtime@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.0.tgz#7e54fe5b5ccd5d6624ea6255c3473be090b802e1"
+
 regenerator-transform@0.9.11:
   version "0.9.11"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.9.11.tgz#3a7d067520cb7b7176769eb5ff868691befe1283"
@@ -5392,7 +5416,7 @@ repeating@^2.0.0:
   dependencies:
     is-finite "^1.0.0"
 
-request@2, request@^2.53.0, request@^2.61.0, request@^2.65.0, request@^2.72.0, request@^2.79.0, request@^2.81.0:
+request@2, request@^2.53.0, request@^2.65.0, request@^2.72.0, request@^2.79.0, request@^2.81.0:
   version "2.81.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.81.0.tgz#c6928946a0e06c5f8d6f8a9333469ffda46298a0"
   dependencies:
@@ -6224,16 +6248,18 @@ wd@^0.4.0:
     underscore.string "~3.0.3"
     vargs "~0.1.0"
 
-"weaveworks-ui-components@git+https://github.com/weaveworks/ui-components.git#v0.1.28":
-  version "0.1.28"
-  resolved "git+https://github.com/weaveworks/ui-components.git#164a0d2770ee5c2318b2f1ab1948fb6046059909"
+"weaveworks-ui-components@git+https://github.com/weaveworks/ui-components.git#v0.1.45":
+  version "0.1.45"
+  resolved "git+https://github.com/weaveworks/ui-components.git#9b700e6231599d0f7b353d8e2bb5f466394dc081"
   dependencies:
     babel-cli "^6.18.0"
     babel-plugin-transform-export-extensions "6.8.0"
+    babel-plugin-transform-object-rest-spread "^6.26.0"
     babel-preset-es2015 "6.18.0"
     babel-preset-react "6.16.0"
     classnames "^2.2.5"
-    node-sass "3.13.0"
+    node-sass "4.5.3"
+    polished "^1.7.0"
     prop-types "^15.5.8"
 
 webidl-conversions@^3.0.0: