diff --git a/src/DatasetteVega.css b/src/DatasetteVega.css
index 72e246d..010b38f 100644
--- a/src/DatasetteVega.css
+++ b/src/DatasetteVega.css
@@ -75,16 +75,20 @@
   font-size: 0.8em;
   box-shadow: 1px 2px 8px 2px rgba(0,0,0,0.08);
 }
-
+.datasette-vega h3 {
+  margin-top: 0;
+}
 .datasette-vega .swap-x-y {
-  color: #fff;
-  background-color: #007bff;
-  border-color: #007bff;
+  text-align: center;
+  margin-bottom: 0.6em;
+}
+.datasette-vega .swap-x-y button {
+  background-color: #fafafa;
+  border: 1px solid #ccc;
   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;
@@ -98,3 +102,16 @@ form.datasette-vega label {
   width: auto;
   padding-right: 0.3em;
 }
+
+form.datasette-vega div {
+  margin-bottom: 0.3em;
+}
+
+.datasette-vega .radio-buttons label {
+  margin-right: 2em;
+  display: inline-block;
+}
+
+.datasette-vega .radio-buttons {
+  margin-bottom: 1em;
+}
diff --git a/src/DatasetteVega.js b/src/DatasetteVega.js
index 9d0d96c..d0340e4 100644
--- a/src/DatasetteVega.js
+++ b/src/DatasetteVega.js
@@ -33,9 +33,9 @@ class DatasetteVega extends Component {
     size_column: ""
   }
   markOptions = [
-    {"value": "bar", "name": "bar"},
-    {"value": "line", "name": "line"},
-    {"value": "circle", "name": "scatter"},
+    {"value": "bar", "name": "Bar"},
+    {"value": "line", "name": "Line"},
+    {"value": "circle", "name": "Scatter"},
   ]
   typeOptions = [
     {"value": "quantitative", "name": "Numeric"},
@@ -161,10 +161,17 @@ class DatasetteVega extends Component {
     const columns = this.state.columns;
     return (
       (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></div></label>
+        <h3>Charting options</h3>
+        <div className="filter-row radio-buttons">
+          {this.markOptions.map(option => (
+            <label key={option.value} value={option.value}><input
+              type="radio"
+              name="mark"
+              value={option.value}
+              checked={option.value === this.state.mark}
+              onChange={ev => onChangeSelect("mark", ev)}
+            /> {option.name}</label>
+          ))}
         </div>
         <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)}>
@@ -182,6 +189,9 @@ class DatasetteVega extends Component {
             {this.typeOptions.map(option => <option key={option.value} value={option.value}>{option.name}</option>)}
           </select></div></label>
         </div>
+        <div className="swap-x-y">
+          <button onClick={this.toggleAxis.bind(this)}>Swap X and Y</button>
+        </div>
         <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>
@@ -192,7 +202,6 @@ class DatasetteVega extends Component {
             {columns.map(column => <option key={column} value={column}>{column}</option>)}
           </select></div></label>
         </div>
-        <div><button className="swap-x-y" onClick={this.toggleAxis.bind(this)}>Swap X and Y</button></div>
       </form> : null
     );
   }