diff --git a/public/index.html b/public/index.html
index 386993c..0b14e70 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">
+    <link rel="stylesheet" href="https://latest.datasette.io/-/static/app.css">
     <title>Datasette Vega</title>
   </head>
   <body>
diff --git a/src/DatasetteVega.css b/src/DatasetteVega.css
index 199ea14..72e246d 100644
--- a/src/DatasetteVega.css
+++ b/src/DatasetteVega.css
@@ -66,3 +66,35 @@
   background-color: #f7f7f9;
   color: #1b1e23;
 }
+
+.datasette-vega {
+  margin: 1em 0;
+  padding: 1em;
+  width: auto;
+  display: inline-block;
+  font-size: 0.8em;
+  box-shadow: 1px 2px 8px 2px rgba(0,0,0,0.08);
+}
+
+.datasette-vega .swap-x-y {
+  color: #fff;
+  background-color: #007bff;
+  border-color: #007bff;
+  font-weight: 400;
+  cursor: pointer;
+  text-align: center;
+  vertical-align: middle;
+  border: 1px solid blue;
+  padding: .5em 0.8em;
+  line-height: 1;
+  border-radius: .25rem;
+  -webkit-appearance: button;
+  font-size: 0.7em;
+}
+
+form.datasette-vega label {
+  font-weight: bold;
+  display: inline;
+  width: auto;
+  padding-right: 0.3em;
+}
diff --git a/src/DatasetteVega.js b/src/DatasetteVega.js
index 64ff774..1708921 100644
--- a/src/DatasetteVega.js
+++ b/src/DatasetteVega.js
@@ -35,17 +35,15 @@ class DatasetteVega extends Component {
   markOptions = [
     {"value": "bar", "name": "bar"},
     {"value": "line", "name": "line"},
-    {"value": "circle", "name": "circle"},
-    {"value": "square", "name": "square"},
-    {"value": "point", "name": "point"},
+    {"value": "circle", "name": "scatter"},
   ]
   typeOptions = [
-    {"value": "quantitative", "name": "Numbers (quantitative)"},
-    {"value": "quantitative-bin", "name": "Numbers (quantitative), binned"},
-    {"value": "temporal", "name": "Dates and times (temporal)"},
-    {"value": "temporal-bin", "name": "Dates and times (temporal), binned"},
-    {"value": "ordinal", "name": "Labels (ordinal)"},
-    {"value": "nominal", "name": "Categories (nominal)"},
+    {"value": "quantitative", "name": "Numeric"},
+    {"value": "quantitative-bin", "name": "Numeric, binned"},
+    {"value": "temporal", "name": "Date/time"},
+    {"value": "temporal-bin", "name": "Date/time, binned"},
+    {"value": "ordinal", "name": "Label"},
+    {"value": "nominal", "name": "Category"},
   ]
   onChangeSelect(name, ev) {
     ev.persist();
@@ -157,39 +155,39 @@ class DatasetteVega extends Component {
     const onChangeSelect = this.onChangeSelect.bind(this);
     const columns = this.state.columns;
     return (
-      (columns.length > 1) ? <form action="" method="GET" id="graphForm">
-        <div>
-          <label>Type of chart: <select name="mark" value={this.state.mark} onChange={ev => onChangeSelect("mark", ev)}>
+      (columns.length > 1) ? <form action="" method="GET" id="graphForm" className="datasette-vega">
+        <div className="filter-row">
+          <label>Chart type <div className="select-wrapper"><select name="mark" value={this.state.mark} onChange={ev => onChangeSelect("mark", ev)}>
             {this.markOptions.map(option => <option key={option.value} value={option.value}>{option.name}</option>)}
-          </select></label>
+          </select></div></label>
         </div>
-        <div>
-          <label>X <select name="x_column" value={this.state.x_column || ''} onChange={ev => onChangeSelect("x_column", ev)}>
+        <div className="filter-row">
+          <label>X column <div className="select-wrapper"><select name="x_column" value={this.state.x_column || ''} onChange={ev => onChangeSelect("x_column", ev)}>
             {columns.map(column => <option key={column} value={column}>{column}</option>)}
-          </select></label>
-          <label>X type: <select name="x_type" value={this.state.x_type} onChange={ev => onChangeSelect("x_type", ev)}>
+          </select></div></label>
+          <label>Type <div className="select-wrapper"><select name="x_type" value={this.state.x_type} onChange={ev => onChangeSelect("x_type", ev)}>
             {this.typeOptions.map(option => <option key={option.value} value={option.value}>{option.name}</option>)}
-          </select></label>
+          </select></div></label>
         </div>
-        <div>
-          <label>Y <select name="y_column" value={this.state.y_column || ''} onChange={ev => onChangeSelect("y_column", ev)}>
+        <div className="filter-row">
+          <label>Y column <div className="select-wrapper"><select name="y_column" value={this.state.y_column || ''} onChange={ev => onChangeSelect("y_column", ev)}>
             {columns.map(column => <option key={column} value={column}>{column}</option>)}
-          </select></label>
-          Y type: <select name="y_type" value={this.state.y_type} onChange={ev => onChangeSelect("y_type", ev)}>
+          </select></div></label>
+          <label>Type <div className="select-wrapper"><select name="y_type" value={this.state.y_type} onChange={ev => onChangeSelect("y_type", ev)}>
             {this.typeOptions.map(option => <option key={option.value} value={option.value}>{option.name}</option>)}
-          </select>
+          </select></div></label>
         </div>
-        <div>
-          <label>Color <select name="color_column" value={this.state.color_column} onChange={ev => onChangeSelect("color_column", ev)}>
+        <div className="filter-row">
+          <label>Color <div className="select-wrapper"><select name="color_column" value={this.state.color_column} onChange={ev => onChangeSelect("color_column", ev)}>
             <option value="">-- none --</option>
             {columns.map(column => <option key={column} value={column}>{column}</option>)}
-          </select></label>
-          <label>Size <select name="size_column" value={this.state.size_column} onChange={ev => onChangeSelect("size_column", ev)}>
+          </select></div></label>
+          <label>Size <div className="select-wrapper"><select name="size_column" value={this.state.size_column} onChange={ev => onChangeSelect("size_column", ev)}>
             <option value="">-- none --</option>
             {columns.map(column => <option key={column} value={column}>{column}</option>)}
-          </select></label>
+          </select></div></label>
         </div>
-        <div><button onClick={this.toggleAxis.bind(this)}>Swap X and Y</button></div>
+        <div><button className="swap-x-y" onClick={this.toggleAxis.bind(this)}>Swap X and Y</button></div>
       </form> : null
     );
   }
