diff --git a/package.json b/package.json
index b785c7d..110d256 100644
--- a/package.json
+++ b/package.json
@@ -17,12 +17,15 @@
     "date-fns": "^1.28.1",
     "flat": "^2.0.1",
     "flux": "^2.1.1",
+    "material-ui": "^0.18.1",
+    "normalize.css": "^7.0.0",
     "prop-types": "^15.5.10",
     "query-string": "^4.3.2",
     "ramda": "^0.23.0",
     "react": "^15.0.1",
     "react-dom": "^15.0.1",
     "react-syntax-highlighter": "^5.6.0",
+    "react-tap-event-plugin": "^2.0.1",
     "uuid": "^3.0.1"
   },
   "devDependencies": {
diff --git a/src/css/app.css b/src/css/app.css
index a9819f2..7a1b0f1 100644
--- a/src/css/app.css
+++ b/src/css/app.css
@@ -1,296 +1,35 @@
-* {
-  box-sizing: border-box;
-}
-
-html {
-  font-family: sans-serif;
-  font-size: 10px;
-}
-
 body {
-  margin: 0;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 14px;
   color: #333;
-  background-color: #fff;
-}
-
-p > code {
-  background: #eee;
-  border: 1px solid #ccc;
-  border-radius: 3px;
-  padding: 0 4px;
-  color: darkred;
-}
-
-pre {
-  margin: 0 0 10px;
-  border: 1px solid #ccc;
-  border-radius: 3px;
-}
-
-.container {
-  padding-right: 15px;
-  padding-left: 15px;
-  margin-right: auto;
-  margin-left: auto;
-  width: 760px;
-}
-
-.header {
-  display: flex;
-}
-
-.header h1 {
-  width: 50%;
-  margin-bottom: 0;
-}
-
-.header h1 a {
-  text-decoration: none;
-  color: #000;
-  cursor: pointer;
-}
-
-.header span {
-  text-align: right;
-  width: 50%;
-  margin-top: 5px;
-  font-size: 12px;
-}
-
-a {
-  color: #337ab7;
-  text-decoration: none;
-  background-color: transparent;
-}
-
-a:active,
-a:hover {
-  outline: 0;
-}
-
-a:hover {
-  color: #23527c;
-  text-decoration: underline;
-}
-
-a.site-link {
-  cursor: pointer;
+  line-height: 1.4;
 }
 
-table {
-  border-spacing: 0;
-  border-collapse: collapse;
-  background-color: transparent;
-}
-
-td,
-th {
-  padding: 0;
-}
-
-th {
-  text-align: left;
-}
-
-.table {
-  width: 100%;
-  max-width: 100%;
-  margin-bottom: 20px;
-}
-
-.table > thead > tr > th,
-.table > tbody > tr > th,
-.table > tfoot > tr > th,
-.table > thead > tr > td,
-.table > tbody > tr > td,
-.table > tfoot > tr > td {
-  padding: 8px;
-  line-height: 1.42857143;
-  vertical-align: top;
-  border-top: 1px solid #ddd;
-}
-
-.table > thead > tr > th {
-  vertical-align: bottom;
-  border-bottom: 2px solid #ddd;
-}
-
-.table > thead:first-child > tr:first-child > th {
-  border-top: 0;
-}
-.table-striped > tbody > tr:nth-of-type(odd) {
-  background-color: #f9f9f9;
+p {
+  margin-bottom: 1em;
+  margin-top: 0;
 }
 
 textarea {
-  width: 730px;
-  height: 350px;
-}
-
-ul.side-options {
-  display: flex;
-  flex-direction: row;
-  list-style-type: none;
-  padding: 0;
-  margin: 15px 0;
-}
-
-ul.side-options.right {
-  justify-content: flex-end;
-}
-
-ul.side-options li {
-  margin-right: 15px;
-}
-
-ul.side-options li.active {
-  font-weight: bold;
-}
-
-ul.side-options li:last-of-type {
-  margin-right: 0;
+  font-size: 13px;
+  font-family: monospace, monospace;
+  color: #333;
+  background-color: #f5f5f5;
+  border: 1px solid #ccc;
+  border-radius: 4px;
 }
 
-.checkbox-label {
-  margin-right: 10px;
-  cursor: pointer;
+pre {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 13px;
 }
 
 /* Home */
-
-.home-cont .drag-drop-area {
-  width: 730px;
+.drag-drop-area {
+  width: 100%;
   height: 200px;
   border: 3px dashed #AAA;
   display: flex;
   justify-content: center;
   align-items: center;
 }
-
-/* Filters */
-
-.filters {
-  margin: 10px 0 15px 0;
-}
-
-.filters tbody tr.inactive {
-  background: #cccccc;
-  opacity: 0.6;
-}
-
-.filter-controls {
-  display: flex;
-  align-items: flex-start;
-}
-
-.filter-controls select {
-  width: 170px;
-  margin-right: 10px;
-}
-
-.filter-controls .inputs {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-.filter-controls input {
-  width: 150px;
-  margin-bottom: 5px;
-}
-
-.filter-controls.number input {
-  width: 100px;
-}
-
-.filter-controls input:last-of-type {
-  margin-bottom: 0;
-}
-
-/* Controls */
-
-.input-control {
-  display: flex;
-  align-items: flex-start;
-  margin-bottom: 5px;
-}
-
-.input-control label {
-  width: 100px;
-}
-
-.input-control .body {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-.input-control .body .grouping,
-.input-control .body .sorter {
-  line-height: 22px;
-}
-
-.input-control .body .grouping a,
-.input-control .body .sorter a {
-  margin-left: 30px;
-}
-
-.input-control select {
-  min-width: 100px;
-  margin-right: 10px;
-}
-
-/* Results */
-
-.results-options {
-  display: flex;
-  justify-content: space-between;
-}
-
-/* Summary */
-
-h3.summary {
-  margin-bottom: 0;
-}
-
-.summary-stats {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  flex-wrap: wrap;
-  flex-flow: row wrap;
-  align-content: flex-end;
-}
-
-.summary-stats p {
-  width: 200px;
-  margin-bottom: 0;
-}
-
-/* From Url */
-
-.from-url-cont {
-  height: 300px;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-}
-
-.from-url-cont p {
-  text-align: center;
-}
-
-/* From Url */
-
-.schema-edit-cont .rows {
-  display: flex;
-  align-items: flex-start;
-}
-
-.schema-edit-cont .rows pre {
-  flex-basis: 20%;
-  flex-grow: 1;
-  margin-left: 15px;
-}
diff --git a/src/index.html b/src/index.html
index 39be152..2df75c0 100644
--- a/src/index.html
+++ b/src/index.html
@@ -23,7 +23,7 @@
   {% endif %}
 </head>
 <body>
-  <div class="container"></div>
+  <div class="main"/>
   <script src="bundle.js"></script>
 </body>
 </html>
diff --git a/src/js/components/code.jsx b/src/js/components/code.jsx
index c2971e0..3582a33 100644
--- a/src/js/components/code.jsx
+++ b/src/js/components/code.jsx
@@ -8,12 +8,18 @@ const resultsStyle = require("react-syntax-highlighter/dist/styles/github").defa
 SLH.registerLanguage("json", language)
 
 function Code(props) {
-  return (<SyntaxHighlighter language={props.language} style={resultsStyle}>
+  return (<SyntaxHighlighter
+    codeTagProps={{
+      style: props.inline ? {whiteSpace: "normal"} : undefined,
+    }}
+    language={props.language}
+    style={resultsStyle}>
     {props.children}
   </SyntaxHighlighter>)
 }
 
 Code.propTypes = {
+  inline: PropTypes.bool,
   children: PropTypes.node.isRequired,
   language: PropTypes.oneOf(["json"]),
 }
diff --git a/src/js/components/inset.jsx b/src/js/components/inset.jsx
new file mode 100644
index 0000000..cd013dd
--- /dev/null
+++ b/src/js/components/inset.jsx
@@ -0,0 +1,26 @@
+const React = require("react")
+const PropTypes = require("prop-types")
+
+const SIZE = 16
+
+function Inset({children, horizontal, vertical}) {
+  return <div style={{
+    paddingLeft: horizontal ? SIZE : 0,
+    paddingRight: horizontal ? SIZE : 0,
+    paddingTop: vertical ? SIZE : 0,
+    paddingBottom: vertical ? SIZE : 0,
+  }}>{children}</div>
+}
+
+Inset.defaultProps = {
+  horizontal: true,
+  vertical: true,
+}
+
+Inset.propTypes = {
+  children: PropTypes.node.isRequired,
+  horizontal: PropTypes.bool.isRequired,
+  vertical: PropTypes.bool.isRequired,
+}
+
+module.exports = Inset
diff --git a/src/js/components/layout.jsx b/src/js/components/layout.jsx
new file mode 100644
index 0000000..4b4745d
--- /dev/null
+++ b/src/js/components/layout.jsx
@@ -0,0 +1,45 @@
+const React = require("react")
+const PropTypes = require("prop-types")
+
+const {default: Card} = require("material-ui/Card")
+
+function Layout({left, right}) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "row",
+      }}
+    >
+      <div
+        style={{
+          margin: 16,
+          marginRight: 0,
+          flexGrow: 0,
+          flexShrink: 1,
+          flexBasis: 360,
+          maxWidth: 360,
+        }}
+      >
+        <Card>{left}</Card>
+      </div>
+      <div
+        style={{
+          flexGrow: 1,
+          flexShrink: 1,
+          margin: 16,
+          flexBasis: 800,
+        }}
+      >
+        <Card>{right}</Card>
+      </div>
+    </div>
+  )
+}
+
+Layout.propTypes = {
+  left: PropTypes.node.isRequired,
+  right: PropTypes.node.isRequired,
+}
+
+module.exports = Layout
diff --git a/src/js/components/space-after.jsx b/src/js/components/space-after.jsx
new file mode 100644
index 0000000..6ec0715
--- /dev/null
+++ b/src/js/components/space-after.jsx
@@ -0,0 +1,16 @@
+const React = require("react")
+const PropTypes = require("prop-types")
+
+const style = {
+  marginBottom: 16,
+}
+
+function SpaceAfter({children}) {
+  return <div style={style}>{children}</div>
+}
+
+SpaceAfter.propTypes = {
+  children: PropTypes.node.isRequired,
+}
+
+module.exports = SpaceAfter
diff --git a/src/js/home/index.jsx b/src/js/home/index.jsx
index 0dff4b5..41b635a 100644
--- a/src/js/home/index.jsx
+++ b/src/js/home/index.jsx
@@ -1,10 +1,14 @@
 const React = require("react")
 const PropTypes = require("prop-types")
-const classNames = require("classnames")
 
 const validator = require("../services/validator")
 const schemaGenerator = require("../services/schema-generator")
 
+const {CardText, CardTitle} = require("material-ui/Card")
+const {default: Tabs, Tab} = require("material-ui/Tabs")
+
+const Layout = require("../components/layout")
+
 const Paste = require("./paste")
 const Upload = require("./upload")
 const Url = require("./url")
@@ -56,41 +60,34 @@ const Home = React.createClass({
     this.props.actionCreator.saveJson("schema", schemaGenerator.generate(json[0]))
   },
 
-  getPasteComponent() {
-    if (this.state.selectedTab !== "paste") return null
-    return <Paste onAction={this.onAction} />
-  },
-
-  getUploadComponent() {
-    if (this.state.selectedTab !== "upload") return null
-    return <Upload onAction={this.onAction} errorDate={this.state.errorDate} />
-  },
-
-  getUrlComponent() {
-    if (this.state.selectedTab !== "url") return null
-    return <Url />
-  },
-
   render() {
-    const pasteActive = classNames({active: this.state.selectedTab === "paste"})
-    const uploadActive = classNames({active: this.state.selectedTab === "upload"})
-    const urlActive = classNames({active: this.state.selectedTab === "url"})
-
-    return (
-      <div className="home-cont">
-        <p>Online JSON Querying Tool. Query your JSON with ease.</p>
-        <p>Takes a JSON array and allows you to add multiple filters, groupings and sorting to manipulate the data in many ways. Use the inputs below to supply your data. We do not do anything with your data!</p>
-        <br />
-        <ul className="side-options">
-          <li className={pasteActive}><a className="site-link" onClick={this.selectTab.bind(this, "paste")}>By Pasting</a></li>
-          <li className={uploadActive}><a className="site-link" onClick={this.selectTab.bind(this, "upload")}>By Upload</a></li>
-          <li className={urlActive}><a className="site-link" onClick={this.selectTab.bind(this, "url")}>By Url</a></li>
-        </ul>
-        {this.getPasteComponent()}
-        {this.getUploadComponent()}
-        {this.getUrlComponent()}
-      </div>
-    )
+    return (<Layout
+      left = {<div>
+        <CardTitle
+          title="Online JSON Querying Tool"
+          subtitle="Query your JSON with ease"
+        />
+        <CardText>
+          <p>Takes a JSON array and allows you to add multiple filters, groupings and sorting to manipulate the data in many ways.</p>
+          <p>Use the inputs on the right to supply your data.</p>
+          <p>We do not do anything with your data!</p>
+        </CardText>
+      </div>}
+
+      right = {
+        <Tabs>
+          <Tab label="From clipboard">
+            <Paste onAction={this.onAction} />
+          </Tab>
+          <Tab label="From file">
+            <Upload onAction={this.onAction} errorDate={this.state.errorDate} />
+          </Tab>
+          <Tab label="From URL">
+            <Url/>
+          </Tab>
+        </Tabs>
+      }
+    />)
   },
 })
 
diff --git a/src/js/home/paste.jsx b/src/js/home/paste.jsx
index 458fd6b..2a7833f 100644
--- a/src/js/home/paste.jsx
+++ b/src/js/home/paste.jsx
@@ -3,6 +3,11 @@ const PropTypes = require("prop-types")
 
 const testData = require("../../test-data.json")
 
+const Inset = require("../components/inset")
+const SpaceAfter = require("../components/space-after")
+
+const {default: RaisedButton} = require("material-ui/RaisedButton")
+
 const Paste = React.createClass({
   displayName: "Paste",
 
@@ -28,10 +33,12 @@ const Paste = React.createClass({
 
   render() {
     return (
-      <div>
-        <textarea value={this.state.data} onChange={this.onChange} />
-        <button onClick={this.onGo}>Go</button>
-      </div>
+      <Inset>
+        <SpaceAfter>
+          <textarea style={{width: "100%", height: 512}} value={this.state.data} onChange={this.onChange} />
+        </SpaceAfter>
+        <RaisedButton secondary onTouchTap={this.onGo} label="Go"/>
+      </Inset>
     )
   },
 })
diff --git a/src/js/home/upload.jsx b/src/js/home/upload.jsx
index 4410105..f3854ca 100644
--- a/src/js/home/upload.jsx
+++ b/src/js/home/upload.jsx
@@ -1,6 +1,12 @@
 const React = require("react")
 const PropTypes = require("prop-types")
 
+const Inset = require("../components/inset")
+const SpaceAfter = require("../components/space-after")
+
+const {default: RaisedButton} = require("material-ui/RaisedButton")
+const {default: UploadIcon} = require("material-ui/svg-icons/file/file-upload")
+
 const Upload = React.createClass({
   displayName: "Upload",
 
@@ -56,14 +62,32 @@ const Upload = React.createClass({
     this.props.onAction(e.target.result)
   },
 
+  triggerUpload() {
+    this.input.click()
+  },
+
   render() {
     const style = {
       borderColor: this.state.isDragActive ? "#000" : "#AAA",
     }
 
     return (
-      <div>
-        <p><input type="file" key={this.props.errorDate} onChange={this.onFileUploadStart} /></p>
+      <Inset>
+        <SpaceAfter>
+          <RaisedButton
+            label="Upload"
+            labelPosition="before"
+            secondary
+            icon={<UploadIcon/>}
+            onTouchTap = {this.triggerUpload}/>
+          <input
+            style={{display: "none"}}
+            ref={(e) => this.input = e}
+            type="file"
+            key={this.props.errorDate}
+            onChange={this.onFileUploadStart}
+          />
+        </SpaceAfter>
         <div
           style={style}
           className="drag-drop-area"
@@ -74,7 +98,7 @@ const Upload = React.createClass({
         >
           <h3>Drop file here</h3>
         </div>
-      </div>
+      </Inset>
     )
   },
 })
diff --git a/src/js/home/url.jsx b/src/js/home/url.jsx
index ef74998..72d313c 100644
--- a/src/js/home/url.jsx
+++ b/src/js/home/url.jsx
@@ -1,6 +1,12 @@
 const React = require("react")
 const Code = require("../components/code")
 
+const SpaceAfter = require("../components/space-after")
+
+const {CardText} = require("material-ui/Card")
+const {default: Divider} = require("material-ui/Divider")
+const {default: RaisedButton} = require("material-ui/RaisedButton")
+
 const testSchema = {
   Album: "string",
   Artist: "string",
@@ -12,6 +18,12 @@ const testSchema = {
   Year: "date",
 }
 
+const wordWrap = {
+  whiteSpace: "normal",
+  wordWrap: "break-word",
+  wordBreak: "break-all",
+}
+
 const testUrl = "/?dataUrl=http://jsonquery.co.uk/test-data.json"
 const testUrlWithSchema = `/?dataUrl=http://jsonquery.co.uk/test-data.json&schema=${encodeURIComponent(JSON.stringify(testSchema))}`
 
@@ -25,12 +37,19 @@ const Url = React.createClass({
   render() {
     return (
       <div>
-        <p>You can also load in data via the url. Use the <code>dataUrl</code> parameter and point it to the url where your data is located. The data must be in JSON format and depending on the size of the data set, it may take a long time to load in.</p>
-        <Code>{testUrl}</Code>
-        <p><button onClick={this.goTo.bind(this, testUrl)}>Try it out</button></p>
-        <p>If you wanted to override the automatic schema generation you can also supply a schema using the <code>schema</code> parameter. This parameter must be URL encoded.</p>
-        <Code>{testUrlWithSchema}</Code>
-        <p><button onClick={this.goTo.bind(this, testUrlWithSchema)}>Try it out</button></p>
+        <CardText style={wordWrap}>
+          <p>You can also load in data via the url. Use the <code>dataUrl</code> parameter and point it to the url where your data is located. The data must be in JSON format and depending on the size of the data set, it may take a long time to load in.</p>
+          <SpaceAfter><Code inline>{testUrl}</Code></SpaceAfter>
+          <RaisedButton secondary onTouchTap={this.goTo.bind(this, testUrl)} label="Try it out"/>
+        </CardText>
+
+        <Divider/>
+
+        <CardText style={wordWrap}>
+          <p>If you wanted to override the automatic schema generation you can also supply a schema using the <code>schema</code> parameter. This parameter must be URL encoded.</p>
+          <SpaceAfter><Code inline>{testUrlWithSchema}</Code></SpaceAfter>
+          <RaisedButton secondary onTouchTap={this.goTo.bind(this, testUrlWithSchema)} label="Try it out"/>
+        </CardText>
       </div>
     )
   },
diff --git a/src/js/index.jsx b/src/js/index.jsx
index f0e1cf6..82e70f1 100644
--- a/src/js/index.jsx
+++ b/src/js/index.jsx
@@ -1,12 +1,25 @@
 /* global VERSION */
 
+require("normalize.css")
+
+const injectTapEventPlugin = require("react-tap-event-plugin")
+injectTapEventPlugin()
+
+const {default: MuiThemeProvider} = require("material-ui/styles/MuiThemeProvider")
+
 const React = require("react")
 const ReactDOM = require("react-dom")
 const Main = require("./main")
 
+function app(Main) {
+  return (<MuiThemeProvider>
+    <Main version={VERSION}/>
+  </MuiThemeProvider>)
+}
+
 ReactDOM.render(
-  <Main version={VERSION} />,
-  document.body.querySelector(".container")
+  app(Main),
+  document.body.querySelector(".main")
 )
 
 // Hot Module Replacement API
@@ -17,7 +30,7 @@ if (module.hot) {
 
     ReactDOM.render(
       <AppContainer>
-        <Main version={VERSION} />
+        {app(Main)}
       </AppContainer>,
       document.body.querySelector(".container")
     )
diff --git a/src/js/main.jsx b/src/js/main.jsx
index b2e63b6..09ff0b7 100644
--- a/src/js/main.jsx
+++ b/src/js/main.jsx
@@ -9,13 +9,17 @@ const Home = require("./home")
 const FromUrl = require("./from-url")
 const Query = require("./query")
 
+const AppBar = require("material-ui/AppBar").default
+const FlatButton = require("material-ui/FlatButton").default
+
+
 require("../css/app.css")
 
 const Main = React.createClass({
   displayName: "Main",
 
   propTypes: {
-    version: PropTypes.string.isRequired,
+    version: PropTypes.string,
   },
 
   getInitialState() {
@@ -65,15 +69,14 @@ const Main = React.createClass({
   },
 
   render() {
-    return (
-      <div>
-        <div className="header">
-          <h1><a href="/">JSONQuery</a></h1>
-          <span>v{this.props.version} - <a className="site-link" href="https://github.com/burt202/jsonquery">Github</a></span>
-        </div>
-        {this.getContent()}
-      </div>
-    )
+    return (<div>
+      <AppBar
+        title = {<span>JSONQuery <span style={{fontSize: 12}}>v{this.props.version}</span></span>}
+        iconElementRight = {<FlatButton href="https://github.com/burt202/jsonquery" label="Github" />}
+        showMenuIconButton = {false}
+      />
+      {this.getContent()}
+    </div>)
   },
 })
 
diff --git a/src/js/query/controls.jsx b/src/js/query/controls.jsx
index abce8f8..9cefa08 100644
--- a/src/js/query/controls.jsx
+++ b/src/js/query/controls.jsx
@@ -5,6 +5,15 @@ const R = require("ramda")
 const GroupingControl = require("./grouping-control")
 const SortingControl = require("./sorting-control")
 
+const Inset = require("../components/inset")
+
+const {default: Subheader} = require("material-ui/Subheader")
+const {default: SelectField} = require("material-ui/SelectField")
+const {default: MenuItem} = require("material-ui/MenuItem")
+const {default: Divider} = require("material-ui/Divider")
+
+const LIMITS = [1, 2, 3, 5, 10, 20, 50, 75, 100, 150, 200, 250, 500]
+
 const Controls = React.createClass({
   displayName: "Controls",
 
@@ -18,40 +27,19 @@ const Controls = React.createClass({
     analyse: PropTypes.string,
   },
 
-  onAnalyseChange(e) {
+  onAnalyseChange(e, index, value) {
     this.props.actionCreator.analyse(e.target.value)
   },
 
-  onLimitChange(e) {
-    this.props.actionCreator.limit(parseInt(e.target.value, 10))
+  onLimitChange(e, index, value) {
+    this.props.actionCreator.limit(parseInt(value, 10))
   },
 
   getLimitControl() {
-    return (
-      <div className="input-control">
-        <label>Limit:</label>
-        <div className="body">
-          <div className="row">
-            <select onChange={this.onLimitChange} value={this.props.limit || ""}>
-              <option>Show all</option>
-              <option value="1">1</option>
-              <option value="2">2</option>
-              <option value="3">3</option>
-              <option value="5">5</option>
-              <option value="10">10</option>
-              <option value="20">20</option>
-              <option value="50">50</option>
-              <option value="75">75</option>
-              <option value="100">100</option>
-              <option value="150">150</option>
-              <option value="200">200</option>
-              <option value="250">250</option>
-              <option value="500">500</option>
-            </select>
-          </div>
-        </div>
-      </div>
-    )
+    return (<SelectField fullWidth value={this.props.limit || 0} onChange={this.onLimitChange}>
+      <MenuItem key="all" primaryText="Show all" value={0}/>
+      {LIMITS.map((v) => <MenuItem key={v} value={v} primaryText={v}/>)}
+    </SelectField>)
   },
 
   getNumberOptions() {
@@ -63,25 +51,16 @@ const Controls = React.createClass({
 
     return numberOptions.map(function(value) {
       return (
-        <option value={value} key={value}>{value}</option>
+        <MenuItem value={value} key={value} primaryText={value}/>
       )
     })
   },
 
   getAnalyseControl() {
-    return (
-      <div className="input-control">
-        <label>Analyse:</label>
-        <div className="body">
-          <div className="row">
-            <select onChange={this.onAnalyseChange} value={this.props.analyse || ""}>
-              <option></option>
-              {this.getNumberOptions()}
-            </select>
-          </div>
-        </div>
-      </div>
-    )
+    return (<SelectField fullWidth value={this.props.analyse} floatingLabelText="Analyse" onChange={this.onAnalyseChange}>
+      <MenuItem value={null} primaryText=""/>
+      {this.getNumberOptions()}
+    </SelectField>)
   },
 
   getGroupByControl() {
@@ -115,12 +94,24 @@ const Controls = React.createClass({
   render() {
     return (
       <div>
-        <h3>Controls</h3>
+        <Subheader>Sort</Subheader>
         {this.getSortByControl()}
-        {this.getLimitControl()}
-        <br />
+        <Divider/>
+
+        <Subheader>Group</Subheader>
         {this.getGroupByControl()}
-        {this.getAnalyseControl()}
+        <Divider/>
+
+        <Subheader>Limit</Subheader>
+        <Inset vertical={false}>
+          {this.getLimitControl()}
+        </Inset>
+        <Divider/>
+
+        <Subheader>Analyse</Subheader>
+        <Inset vertical={false}>
+          {this.getAnalyseControl()}
+        </Inset>
       </div>
     )
   },
diff --git a/src/js/query/filter-row.jsx b/src/js/query/filter-row.jsx
index 1eab532..c952c84 100644
--- a/src/js/query/filter-row.jsx
+++ b/src/js/query/filter-row.jsx
@@ -1,7 +1,13 @@
 const React = require("react")
 const PropTypes = require("prop-types")
 const R = require("ramda")
-const classNames = require("classnames")
+
+const {default: SelectField} = require("material-ui/SelectField")
+const {default: MenuItem} = require("material-ui/MenuItem")
+const {default: TextField} = require("material-ui/TextField")
+const {default: Toggle} = require("material-ui/Toggle")
+const {default: IconButton} = require("material-ui/IconButton")
+const {default: RemoveIcon} = require("material-ui/svg-icons/content/remove-circle")
 
 const defaultInput = {}
 const dateInput = {placeholder: "YYYYMMDD", maxLength: 8}
@@ -75,7 +81,11 @@ const FilterRow = React.createClass({
     if (!filterConfig[this.props.type]) return "Invalid Type"
 
     const options = filterConfig[this.props.type].map(function(option) {
-      return <option key={option.value} value={option.value}>{option.text}</option>
+      return <MenuItem
+        key={option.value}
+        value={option.value}
+        primaryText={option.text}
+      />
     })
 
     let inputs = []
@@ -85,28 +95,38 @@ const FilterRow = React.createClass({
       inputs = selectedOperator.inputs.map(function(inputConfig, index) {
         const inc = (index) ? index : ""
 
-        return React.createElement("input", R.merge({
+        return React.createElement(TextField, R.merge({
+          fullWidth: true,
           key: this.props.filter.id + inc,
-          type: "text",
           name: this.props.filter.id + inc,
           value: this.props.filter[`value${inc}`] || "",
-          onChange: this.updateFilter.bind(this, `value${inc}`),
+          onChange: this.updateFilterText.bind(this, `value${inc}`),
         }, inputConfig))
       }.bind(this))
     }
 
-    const classnames = classNames("filter-controls", this.props.type)
-
     return (
-      <div className={classnames}>
-        <select
-          name={this.props.filter.id}
-          value={this.props.filter.operator}
-          onChange={this.updateFilter.bind(this, "operator")}
-        >
-          {options}
-        </select>
-        <div className="inputs">
+      <div style={{position: "relative"}}>
+        <div style={{opacity: this.props.filter.active ? 1 : 0.5}}>
+          <div style={{display: "flex", alignItems: "flex-end"}}>
+            <SelectField
+              fullWidth
+              name={this.props.filter.id}
+              value={this.props.filter.operator}
+              onChange={this.updateFilter.bind(this, "operator")}
+              floatingLabelText={this.props.filter.name}
+            >
+              {options}
+            </SelectField>
+            <Toggle
+              toggled={this.props.filter.active}
+              onToggle={this.toggleFilter}
+              style={{width: "initial", marginBottom: 12}}
+            />
+          <IconButton onTouchTap={this.deleteFilter} style={{padding: 0, width: 24, height: 24, marginLeft: 8, marginBottom: 12}}>
+              <RemoveIcon color="#aaa" hoverColor="#444"/>
+            </IconButton>
+          </div>
           {inputs}
         </div>
       </div>
@@ -121,23 +141,32 @@ const FilterRow = React.createClass({
     this.props.onDelete(this.props.filter.id)
   },
 
-  updateFilter(prop, e) {
+  updateFilter(prop, e, index, value) {
     const toUpdate = {}
-    toUpdate[prop] = e.target.value
+    toUpdate[prop] = value
     this.props.onUpdate(this.props.filter.id, toUpdate)
   },
 
-  render() {
-    const toggleClass = (this.props.filter.active) ? "active" : "inactive"
+  updateFilterText(prop, e, value) {
+    const toUpdate = {}
+    toUpdate[prop] = value
+    this.props.onUpdate(this.props.filter.id, toUpdate)
+  },
 
-    return (
-      <tr key={this.props.filter.id} className={toggleClass}>
-        <td>{this.props.filter.name}</td>
-        <td>{this.getInputControlByType()}</td>
-        <td><a className="site-link" onClick={this.toggleFilter}>Toggle</a></td>
-        <td><a className="site-link" onClick={this.deleteFilter}>Remove</a></td>
-      </tr>
-    )
+  render() {
+    // const toggleClass = (this.props.filter.active) ? "active" : "inactive"
+
+    return <div>
+      {this.getInputControlByType()}
+    </div>
+
+    // return (
+    //   <tr key={this.props.filter.id} className={toggleClass}>
+    //     <td>{this.getInputControlByType()}</td>
+    //     <td><a className="site-link" onClick={this.toggleFilter}>Toggle</a></td>
+    //     <td><a className="site-link" onClick={this.deleteFilter}>Remove</a></td>
+    //   </tr>
+    // )
   },
 })
 
diff --git a/src/js/query/filters.jsx b/src/js/query/filters.jsx
index 4bb6dfc..77900cd 100644
--- a/src/js/query/filters.jsx
+++ b/src/js/query/filters.jsx
@@ -2,6 +2,12 @@ const React = require("react")
 const PropTypes = require("prop-types")
 const FilterRow = require("./filter-row")
 
+const Inset = require("../components/inset")
+
+const {default: Subheader} = require("material-ui/Subheader")
+const {default: SelectField} = require("material-ui/SelectField")
+const {default: MenuItem} = require("material-ui/MenuItem")
+
 const Filters = React.createClass({
   displayName: "Filters",
 
@@ -17,39 +23,28 @@ const Filters = React.createClass({
     }
   },
 
-  onAddFilter(e) {
+  onAddFilter(e, index, value) {
     this.setState({lastFilteredAddedAt: Date.now()})
-    this.props.actionCreator.addFilter(e.target.value)
+    this.props.actionCreator.addFilter(value)
   },
 
   getFilterControl() {
     const options = Object.keys(this.props.schema).map(function(value) {
       return (
-        <option value={value} key={value}>{value}</option>
+        <MenuItem value={value} key={value} primaryText={value}/>
       )
     })
 
-    return (
-      <div className="input-control">
-        <label>Add Filter:</label>
-        <div className="body">
-          <div className="row">
-            <select onChange={this.onAddFilter} key={this.state.lastFilteredAddedAt}>
-              <option></option>
-              {options}
-            </select>
-          </div>
-        </div>
-      </div>
-    )
+    return (<SelectField
+      fullWidth
+      onChange={this.onAddFilter}
+      hintText={"Field"}
+    >
+      {options}
+    </SelectField>)
   },
 
   getFilterRows() {
-    if (!this.props.filters.length)
-      return (
-        <tr><td>No filters</td></tr>
-      )
-
     return this.props.filters.map(function(filter) {
       return <FilterRow
         key={filter.id}
@@ -65,21 +60,11 @@ const Filters = React.createClass({
   render() {
     return (
       <div>
-        <h3>Filters</h3>
-        <table className="table filters">
-          <thead>
-            <tr>
-              <th>Field</th>
-              <th>Value</th>
-              <th></th>
-              <th></th>
-            </tr>
-          </thead>
-          <tbody>
-            {this.getFilterRows()}
-          </tbody>
-        </table>
-        {this.getFilterControl()}
+        <Subheader>Filter</Subheader>
+        <Inset vertical={false}>
+          {this.getFilterRows()}
+          {this.getFilterControl()}
+        </Inset>
       </div>
     )
   },
diff --git a/src/js/query/grouping-control.jsx b/src/js/query/grouping-control.jsx
index a5454fa..0ca02f7 100644
--- a/src/js/query/grouping-control.jsx
+++ b/src/js/query/grouping-control.jsx
@@ -1,6 +1,15 @@
 const React = require("react")
 const PropTypes = require("prop-types")
 
+const Inset = require("../components/inset")
+const SpaceAfter = require("../components/space-after")
+
+const Removeable = require("./removeable")
+
+const {default: SelectField} = require("material-ui/SelectField")
+const {default: MenuItem} = require("material-ui/MenuItem")
+const {default: Checkbox} = require("material-ui/Checkbox")
+
 const GroupingControl = React.createClass({
   displayName: "GroupingControl",
 
@@ -13,8 +22,8 @@ const GroupingControl = React.createClass({
     onShowCountsChange: PropTypes.func.isRequired,
   },
 
-  onAdd(e) {
-    this.props.onAdd(e.target.value)
+  onAdd(e, index, value) {
+    this.props.onAdd(value)
   },
 
   onShowCountsChange() {
@@ -23,14 +32,11 @@ const GroupingControl = React.createClass({
 
   getRows() {
     return this.props.groupings.map(function(grouping) {
-      return (
-        <div className="row" key={grouping}>
-          <div className="grouping">
-            {grouping}
-            <a className="site-link" onClick={this.props.onRemove.bind(this, grouping)}>remove</a>
-          </div>
-        </div>
-      )
+      return <Removeable
+        key={grouping}
+        onRemove={this.props.onRemove.bind(this, grouping)}
+        primaryText={grouping}
+      />
     }.bind(this))
   },
 
@@ -39,34 +45,26 @@ const GroupingControl = React.createClass({
 
     const options = this.props.options.map(function(value) {
       return (
-        <option value={value} key={value}>{value}</option>
+        <MenuItem value={value} key={value} primaryText={value}/>
       )
     })
 
-    return (
-      <div className="input-control">
-        <label>Group By:</label>
-        <div className="body">
-          {this.getRows()}
-          <div className="row">
-            <select onChange={this.onAdd} value="">
-              <option></option>
-              {options}
-            </select>
-            <label className="checkbox-label">
-              <input
-                type="checkbox"
-                name="showCounts"
-                disabled={disabled}
-                checked={this.props.showCounts}
-                onChange={this.onShowCountsChange}
-              />
-              Show counts
-            </label>
-          </div>
-        </div>
-      </div>
-    )
+    return (<div>
+      {this.getRows()}
+      <Inset vertical={false}>
+        <SpaceAfter>
+          <SelectField fullWidth onChange={this.onAdd} hintText="Field" value="">
+            {options}
+          </SelectField>
+          <Checkbox
+            label="Show counts"
+            checked={this.props.showCounts}
+            disabled={disabled}
+            onCheck={this.onShowCountsChange}
+          />
+        </SpaceAfter>
+      </Inset>
+    </div>)
   },
 })
 
diff --git a/src/js/query/index.jsx b/src/js/query/index.jsx
index a4271b1..34656be 100644
--- a/src/js/query/index.jsx
+++ b/src/js/query/index.jsx
@@ -5,12 +5,17 @@ const R = require("ramda")
 const dataProcessor = require("../services/data-processor")
 const utils = require("../utils")
 
+const Layout = require("../components/layout")
+
 const Filters = require("./filters")
 const Controls = require("./controls")
 const Summary = require("./summary")
 const Results = require("./results")
 const SchemaEdit = require("./schema-edit")
 
+const {default: RaisedButton} = require("material-ui/FlatButton")
+const {default: Divider} = require("material-ui/Divider")
+
 const Query = React.createClass({
   displayName: "Query",
 
@@ -61,7 +66,7 @@ const Query = React.createClass({
     const values = R.pluck(this.props.analyse, data)
 
     return {
-      sum: utils.round(2, R.sum(values)),
+      analyse: utils.round(2, R.analyse(values)),
       average: utils.round(2, R.mean(values)),
       lowest: utils.getMin(values),
       highest: utils.getMax(values),
@@ -85,12 +90,16 @@ const Query = React.createClass({
   },
 
   getSideOptions() {
-    return (
-      <ul className="side-options right">
-        <li><a className="site-link" onClick={this.onSchemaEdit}>Edit Schema</a></li>
-        <li><a className="site-link" onClick={this.onReset}>Reset</a></li>
-      </ul>
-    )
+    const canReset = this.props.filters.length
+      || this.props.groupings.length
+      || this.props.sorters.length
+      || this.props.analyse
+      || this.props.limit
+
+    return <div style={{display: "flex", justifyContent: "space-between"}}>
+      <RaisedButton secondary label="Edit schema" onTouchTap={this.onSchemaEdit}/>
+      <RaisedButton disabled={!canReset} secondary label="Reset" onTouchTap={this.onReset}/>
+    </div>
   },
 
   onCancel() {
@@ -119,38 +128,50 @@ const Query = React.createClass({
     const results = this.formatData(filtered)
 
     return (
-      <div className="query-cont">
-        {this.getSideOptions()}
-        <Filters
-          actionCreator={this.props.actionCreator}
-          filters={this.props.filters}
-          schema={this.props.schema}
-        />
-        <Controls
-          actionCreator={this.props.actionCreator}
-          schema={this.props.schema}
-          groupings={this.props.groupings}
-          sorters={this.props.sorters}
-          showCounts={this.props.showCounts}
-          limit={this.props.limit}
-          analyse={this.props.analyse}
-        />
-        <Summary
-          rawDataLength={this.props.data.length}
-          results={filtered}
-          groupings={this.props.groupings}
-        />
-        <Results
-          results={results}
-          groupings={this.props.groupings}
-          resultFields={this.props.resultFields}
-          schema={this.props.schema}
-          actionCreator={this.props.actionCreator}
-          showCounts={this.props.showCounts}
-          filteredLength={filtered.length}
-          analyse={this.props.analyse}
-        />
-      </div>
+      <Layout
+        left = {<div>
+
+          {this.getSideOptions()}
+          <Divider/>
+
+          <Filters
+            actionCreator={this.props.actionCreator}
+            filters={this.props.filters}
+            schema={this.props.schema}
+          />
+
+          <Divider/>
+
+          <Controls
+            actionCreator={this.props.actionCreator}
+            schema={this.props.schema}
+            groupings={this.props.groupings}
+            sorters={this.props.sorters}
+            showCounts={this.props.showCounts}
+            limit={this.props.limit}
+            analyse={this.props.analyse}
+          />
+
+        </div>}
+        right = {<div>
+          <Summary
+            rawDataLength={this.props.data.length}
+            results={filtered}
+            groupings={this.props.groupings}
+          />
+          <Divider/>
+          <Results
+            results={results}
+            groupings={this.props.groupings}
+            resultFields={this.props.resultFields}
+            schema={this.props.schema}
+            actionCreator={this.props.actionCreator}
+            showCounts={this.props.showCounts}
+            filteredLength={filtered.length}
+            analyse={this.props.analyse}
+          />
+      </div>}
+      />
     )
   },
 })
diff --git a/src/js/query/removeable.jsx b/src/js/query/removeable.jsx
new file mode 100644
index 0000000..526fd64
--- /dev/null
+++ b/src/js/query/removeable.jsx
@@ -0,0 +1,28 @@
+const React = require("react")
+const PropTypes = require("prop-types")
+
+const {default: IconButton} = require("material-ui/IconButton")
+const {default: RemoveIcon} = require("material-ui/svg-icons/content/remove-circle")
+const {ListItem} = require("material-ui/List")
+
+function Removeable({primaryText, secondaryText, onRemove}) {
+  return (
+    <ListItem
+      primaryText={primaryText}
+      secondaryText={secondaryText}
+      rightIconButton={
+        <IconButton onTouchTap={onRemove}>
+          <RemoveIcon color="#aaa" hoverColor="#444"/>
+        </IconButton>
+      }
+    />
+  )
+}
+
+Removeable.propTypes = {
+  primaryText: PropTypes.node.isRequired,
+  secondaryText: PropTypes.node.isRequired,
+  onRemove: PropTypes.func.isRequired,
+}
+
+module.exports = Removeable
diff --git a/src/js/query/results.jsx b/src/js/query/results.jsx
index 7b2775f..465e0ca 100644
--- a/src/js/query/results.jsx
+++ b/src/js/query/results.jsx
@@ -2,18 +2,22 @@ const React = require("react")
 const PropTypes = require("prop-types")
 const R = require("ramda")
 const Clipboard = require("clipboard")
-const classNames = require("classnames")
+
+const Inset = require("../components/inset")
+
+const {default: Menu, MenuItem} = require("material-ui/menu")
+const {default: Popover} = require("material-ui/Popover")
+const {default: RaisedButton} = require("material-ui/RaisedButton")
+const {default: Subheader} = require("material-ui/Subheader")
+const {default: Chip} = require("material-ui/Chip")
+
+const {default: DownloadIcon} = require("material-ui/svg-icons/file/file-download")
 
 const downloadFormatter = require("../services/download-formatter")
 const Code = require("../components/code")
 
 const DISPLAY_THRESHOLD = 1000
 
-const TYPES = [
-  {name: "JSON", value: "json", mimetype: "application/json"},
-  {name: "CSV", value: "csv", mimetype: "text/csv"},
-]
-
 const Results = React.createClass({
   displayName: "Results",
 
@@ -38,28 +42,28 @@ const Results = React.createClass({
     this.setState({type})
   },
 
-  getViewTypes() {
-    return TYPES.map(function(type) {
-      const classnames = classNames({
-        "active": this.state.type === type.value,
-      })
+  downloadOpened(event) {
+    event.preventDefault()
 
-      return (
-        <li key={type.value} className={classnames}>
-          <a className="site-link" onClick={this.setType.bind(this, type.value)}>{type.name}</a>
-        </li>
-      )
-    }.bind(this))
+    this.setState({
+      downloadOpen: true,
+      anchorEl: event.currentTarget,
+    })
+  },
+
+  downloadClosed() {
+    this.setState({
+      downloadOpen: false,
+    })
   },
 
-  downloadResults() {
-    const type = R.find(R.propEq("value", this.state.type), TYPES)
+  downloadResults(type) {
     const formatted = downloadFormatter[this.state.type](this.props.groupings, this.props.showCounts, this.props.results)
 
     const dataStr = URL.createObjectURL(new Blob([formatted], {type: type.mimetype}))
     const downloadLink = document.getElementById("hidden-download-link")
     downloadLink.setAttribute("href", dataStr)
-    downloadLink.setAttribute("download", `${new Date().toISOString()}.${type.value}`)
+    downloadLink.setAttribute("download", `${new Date().toISOString()}.${type.extension}`)
     downloadLink.click()
     downloadLink.setAttribute("href", "")
   },
@@ -78,8 +82,7 @@ const Results = React.createClass({
     return downloadFormatter[this.state.type](this.props.groupings, this.props.showCounts, this.props.results)
   },
 
-  onChangeHandler(e) {
-    const field = e.target.name
+  onChangeHandler(field) {
     const isPresent = R.contains(field, this.props.resultFields)
     const updatedFields = (isPresent) ?
       R.without([field], this.props.resultFields) :
@@ -88,24 +91,61 @@ const Results = React.createClass({
     this.props.actionCreator.updateResultFields(updatedFields)
   },
 
+  getDownloadLinks() {
+    const sumedOrAveraged = !!(this.props.analyse)
+
+    const jsonFormatter = downloadFormatter.json(this.props.groupings, this.props.showCounts, sumedOrAveraged)
+    const csvFormatter = downloadFormatter.csv(this.props.groupings, this.props.showCounts, sumedOrAveraged)
+
+    const types = [
+      {name: "JSON", mimetype: "application/json", extension: "json", formatter: jsonFormatter},
+      {name: "CSV", mimetype: "text/csv", extension: "csv", formatter: csvFormatter},
+    ]
+
+    const links = types.map(function(type) {
+      const downloader = this.downloadResults.bind(this, type)
+      return (<MenuItem key={type.name} onTouchTap={downloader} primaryText={type.name}/>)
+    }.bind(this))
+
+    return <div>
+      <RaisedButton secondary
+        label="Download"
+        labelPosition="before"
+        onTouchTap={this.downloadOpened}
+        icon={<DownloadIcon/>}
+      />
+      <Popover
+        open={this.state.downloadOpen}
+        anchorEl={this.state.anchorEl}
+        anchorOrigin={{horizontal: "left", vertical: "bottom"}}
+        targetOrigin={{horizontal: "left", vertical: "top"}}
+        onRequestClose={this.downloadClosed}
+      >
+        <Menu width={128}>{links}</Menu>
+      </Popover>
+    </div>
+  },
+
   getResultFieldOptions() {
     const schemaKeys = R.sortBy(R.identity, R.keys(this.props.schema))
 
     return schemaKeys.map(function(field) {
       const checked = R.contains(field, this.props.resultFields)
-      const disabled = R.contains(field, this.props.groupings)
-
-      return (
-        <label className="checkbox-label" key={field}>
-          <input type="checkbox" name={field} disabled={disabled} checked={checked} onChange={this.onChangeHandler} />
-          {field}
-        </label>
-      )
+      const toggleable = !R.contains(field, this.props.groupings)
+
+      return <FieldToggle
+        key={field}
+        label={field}
+        value={checked}
+        onToggle={toggleable ? this.onChangeHandler.bind(null, field) : undefined}
+      />
     }.bind(this))
   },
 
   getCheckboxes() {
-    return (!this.isAggregateResult()) ? <p>Include: {this.getResultFieldOptions()}</p> : null
+    return (!this.isAggregateResult()) ? <div style={{display: "flex", flexWrap: "wrap"}}>
+      {this.getResultFieldOptions()}
+    </div> : null
   },
 
   canCopyResults() {
@@ -113,37 +153,44 @@ const Results = React.createClass({
   },
 
   getCopyLink() {
-    return (this.canCopyResults()) ? <li><a className="site-link" data-clipboard-action="copy" data-clipboard-target="#copy-cont">Copy To Clipboard</a></li> : null
+    return (this.canCopyResults()) ? <a className="site-link" data-clipboard-action="copy" data-clipboard-target="#copy-cont">Copy to clipboard</a> : null
   },
 
   render() {
-    new Clipboard("a.site-link[data-clipboard-action='copy']")
+    new Clipboard("a[data-clipboard-action='copy']")
 
     return (
       <div>
-        <h3>Results</h3>
-        {this.getCheckboxes()}
-        <br />
-
-        <div className="results-options">
-          <ul className="side-options">
-            {this.getViewTypes()}
-          </ul>
-          <ul className="side-options right">
-            {this.getCopyLink()}
-            <li><a className="site-link" onClick={this.downloadResults}>Download</a></li>
-          </ul>
-        </div>
-
-        <div id="copy-cont">
-          <Code language="json">
-            {this.getDisplayData()}
-          </Code>
-        </div>
+        <Subheader>Results</Subheader>
+        <Inset vertical={false}>
+          {this.getCheckboxes()}
+          {this.getDownloadLinks()}
+        </Inset>
+        <Inset>
+          {this.getCopyLink()}
+          <div id="copy-cont">
+            <Code language="json">
+              {this.getDisplayData()}
+            </Code>
+          </div>
+        </Inset>
         <a id="hidden-download-link" style={{display: "none"}}></a>
       </div>
     )
   },
 })
 
+const style = {marginRight: 8, marginBottom: 8}
+function FieldToggle({label, value, onToggle}) {
+  return <Chip onTouchTap={onToggle} style={Object.assign({}, style, {
+    opacity: value ? 1 : 0.5,
+  })}>{label}</Chip>
+}
+
+FieldToggle.propTypes = {
+  label: PropTypes.node.isRequired,
+  value: PropTypes.bool.isRequired,
+  onToggle: PropTypes.func,
+}
+
 module.exports = Results
diff --git a/src/js/query/schema-edit-row.jsx b/src/js/query/schema-edit-row.jsx
index c0d37fc..f2c4769 100644
--- a/src/js/query/schema-edit-row.jsx
+++ b/src/js/query/schema-edit-row.jsx
@@ -1,6 +1,9 @@
 const React = require("react")
 const PropTypes = require("prop-types")
 
+const {default: SelectField} = require("material-ui/SelectField")
+const {MenuItem} = require("material-ui/Menu")
+
 const SchemaEditRow = React.createClass({
   displayName: "SchemaEditRow",
 
@@ -10,25 +13,23 @@ const SchemaEditRow = React.createClass({
     onChange: PropTypes.func.isRequired,
   },
 
-  onChange(e) {
-    this.props.onChange(this.props.field, e.target.value)
+  onChange(e, index, value) {
+    this.props.onChange(this.props.field, value)
   },
 
   render() {
-    return (
-      <tr key={this.props.field}>
-        <td>{this.props.field}</td>
-        <td>
-          <select value={this.props.type} onChange={this.onChange}>
-            <option value="string">String</option>
-            <option value="number">Number</option>
-            <option value="bool">Bool</option>
-            <option value="date">Date</option>
-            <option value="array">Array</option>
-          </select>
-        </td>
-      </tr>
-    )
+    return <SelectField
+      fullWidth
+      floatingLabelText={this.props.field}
+      onChange={this.onChange}
+      value={this.props.type}
+    >
+      <MenuItem value="string" primaryText="String"/>
+      <MenuItem value="number" primaryText="Number"/>
+      <MenuItem value="bool" primaryText="Bool"/>
+      <MenuItem value="date" primaryText="Date"/>
+      <MenuItem value="array" primaryText="Array"/>
+    </SelectField>
   },
 })
 
diff --git a/src/js/query/schema-edit.jsx b/src/js/query/schema-edit.jsx
index 5dca767..8611f95 100644
--- a/src/js/query/schema-edit.jsx
+++ b/src/js/query/schema-edit.jsx
@@ -3,6 +3,15 @@ const PropTypes = require("prop-types")
 const R = require("ramda")
 
 const validator = require("../services/validator")
+const Layout = require("../components/layout")
+
+const SpaceAfter = require("../components/space-after")
+const Inset = require("../components/inset")
+
+const {default: UploadIcon} = require("material-ui/svg-icons/file/file-upload")
+const {default: RaisedButton} = require("material-ui/RaisedButton")
+const {default: FlatButton} = require("material-ui/FlatButton")
+const {default: Divider} = require("material-ui/Divider")
 
 const SchemaEditRow = require("./schema-edit-row")
 const Code = require("../components/code")
@@ -75,27 +84,38 @@ const SchemaEdit = React.createClass({
     }.bind(this))
   },
 
+  triggerUpload() {
+    this.upload.click()
+  },
+
   render() {
-    return (
-      <div className="schema-edit-cont">
-        <h3>Edit Schema</h3>
-        <div className="rows">
-          <table className="table" style={{width: "60%"}}>
-            <tbody>
-              {this.getSchemaRows()}
-            </tbody>
-          </table>
-          <Code language="json">
-            {JSON.stringify(this.state.schema, null, 2)}
-          </Code>
+    return (<Layout
+      left={<div>
+        <div style={{display: "flex", justifyContent: "space-between"}}>
+          <FlatButton secondary label="Cancel" onTouchTap={this.props.onCancel}/>
+          <FlatButton secondary label="Save" onTouchTap={this.onSave}/>
         </div>
-        <p><label>Upload: </label><input type="file" key={this.state.inputKey} onChange={this.onFileUploadStart} /></p>
-        <ul className="side-options right">
-          <li><a className="site-link" onClick={this.props.onCancel}>Cancel</a></li>
-          <li><a className="site-link" onClick={this.onSave}>Save</a></li>
-        </ul>
-      </div>
-    )
+        <Divider/>
+        <Inset vertical={false}>
+          {this.getSchemaRows()}
+        </Inset>
+      </div>}
+
+      right={<Inset>
+        <SpaceAfter>
+          <RaisedButton
+            label="Upload"
+            labelPosition="before"
+            secondary
+            icon={<UploadIcon/>}
+            onTouchTap = {this.triggerUpload}/>
+          <input style={{display: "none"}} ref={(r) => this.upload = r} type="file" key={this.state.inputKey} onChange={this.onFileUploadStart} />
+        </SpaceAfter>
+        <Code language="json">
+          {JSON.stringify(this.state.schema, null, 2)}
+        </Code>
+      </Inset>}
+    />)
   },
 })
 
diff --git a/src/js/query/sorting-control.jsx b/src/js/query/sorting-control.jsx
index 47c8392..1fce7c4 100644
--- a/src/js/query/sorting-control.jsx
+++ b/src/js/query/sorting-control.jsx
@@ -1,6 +1,12 @@
 const React = require("react")
 const PropTypes = require("prop-types")
 
+const Removeable = require("./removeable")
+const Inset = require("../components/inset")
+
+const {default: SelectField} = require("material-ui/SelectField")
+const {default: MenuItem} = require("material-ui/MenuItem")
+
 const SortingControl = React.createClass({
   displayName: "SortingControl",
 
@@ -18,9 +24,9 @@ const SortingControl = React.createClass({
     }
   },
 
-  onChange(prop, e) {
+  onChange(prop, e, index, value) {
     const toSet = {}
-    toSet[prop] = e.target.value
+    toSet[prop] = value
 
     this.setState(toSet, function() {
       if (this.state.field !== null && this.state.direction !== null) {
@@ -32,43 +38,34 @@ const SortingControl = React.createClass({
 
   getRows() {
     return this.props.sorters.map(function(sorter) {
-      return (
-        <div className="row" key={sorter.field}>
-          <div className="sorter">
-            {sorter.field} - {sorter.direction.toUpperCase()}
-            <a className="site-link" onClick={this.props.onRemove.bind(this, sorter.field)}>remove</a>
-          </div>
-        </div>
-      )
+      return <Removeable
+        key={sorter.field + sorter.direction}
+        onRemove={this.props.onRemove.bind(this, sorter.field)}
+        primaryText={sorter.field}
+        secondaryText={sorter.direction.toUpperCase()}
+      />
     }.bind(this))
   },
 
   render() {
     const options = this.props.options.map(function(value) {
       return (
-        <option value={value} key={value}>{value}</option>
+        <MenuItem value={value} key={value} primaryText={value}/>
       )
     })
 
-    return (
-      <div className="input-control">
-        <label>Sort By:</label>
-        <div className="body">
-          {this.getRows()}
-          <div className="row">
-            <select onChange={this.onChange.bind(this, "field")} value={this.state.field || ""}>
-              <option></option>
-              {options}
-            </select>
-            <select onChange={this.onChange.bind(this, "direction")} value={this.state.direction || ""}>
-              <option></option>
-              <option value="asc">ASC</option>
-              <option value="desc">DESC</option>
-            </select>
-          </div>
-        </div>
-      </div>
-    )
+    return (<div>
+      {this.getRows()}
+      <Inset vertical={false}>
+        <SelectField fullWidth hintText="Field" onChange={this.onChange.bind(this, "field")} value={this.state.field || ""}>
+          {options}
+        </SelectField>
+        <SelectField fullWidth hintText="Direction" onChange={this.onChange.bind(this, "direction")} value={this.state.direction || ""}>
+          <MenuItem value="asc" primaryText="ASC"/>
+          <MenuItem value="desc" primaryText="DESC"/>
+        </SelectField>
+      </Inset>
+    </div>)
   },
 })
 
diff --git a/src/js/query/summary.jsx b/src/js/query/summary.jsx
index 4889f7c..654f5d2 100644
--- a/src/js/query/summary.jsx
+++ b/src/js/query/summary.jsx
@@ -2,6 +2,12 @@ const React = require("react")
 const PropTypes = require("prop-types")
 const R = require("ramda")
 
+const Inset = require("../components/inset")
+const SpaceAfter = require("../components/space-after")
+
+const {default: Subheader} = require("material-ui/Subheader")
+const {default: Chip} = require("material-ui/Chip")
+
 const dataProcessor = require("../services/data-processor")
 const groupingAnalyser = require("../services/grouping-analyser")
 const utils = require("../utils")
@@ -18,9 +24,10 @@ const Summary = React.createClass({
   getGroupingBreakdown(grouping) {
     if (!grouping) return null
 
-    return R.map(function(obj) {
-      return (<p key={obj.name}>{`${obj.name}: ${obj.value}`}</p>)
-    }, groupingAnalyser.getAnalysis(grouping))
+    return R.map(
+      ({name, value}) => <Stat label={name} value={value} key={name}/>,
+      groupingAnalyser.getAnalysis(grouping)
+    )
   },
 
   getGrouping() {
@@ -38,14 +45,28 @@ const Summary = React.createClass({
 
     return (
       <div>
-        <h3 className="summary">Summary</h3>
-        <div className="summary-stats">
-          <p>Total: {this.props.results.length}{this.showRawDataLength()}</p>
-          {this.getGroupingBreakdown(grouping)}
-        </div>
+        <Subheader>Summary</Subheader>
+        <Inset vertical={false}>
+          <SpaceAfter>
+            <div style={{display: "flex", flexWrap: "wrap"}}>
+              <Stat label="Total" value={this.props.results.length + this.showRawDataLength()}/>
+              {this.getGroupingBreakdown(grouping)}
+            </div>
+          </SpaceAfter>
+        </Inset>
       </div>
     )
   },
 })
 
 module.exports = Summary
+
+const style = {marginRight: 8, marginBottom: 8}
+function Stat({label, value}) {
+  return <Chip style={style}>{label}: {value}</Chip>
+}
+
+Stat.propTypes = {
+  label: PropTypes.node.isRequired,
+  value: PropTypes.node.isRequired,
+}