diff --git a/ui/package.json b/ui/package.json
index 19a8274f8..443db636a 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -140,6 +140,7 @@
     "react-resizable": "^1.7.5",
     "react-router": "^3.0.2",
     "react-router-redux": "^4.0.8",
+    "react-sortable-hoc": "^0.6.8",
     "react-tooltip": "^3.2.1",
     "react-virtualized": "^9.18.5",
     "redux": "^3.3.1",
diff --git a/ui/src/dashboards/components/GraphOptionsCustomizableField.tsx b/ui/src/dashboards/components/GraphOptionsCustomizableField.tsx
index 34e811d0c..b9d5155f1 100644
--- a/ui/src/dashboards/components/GraphOptionsCustomizableField.tsx
+++ b/ui/src/dashboards/components/GraphOptionsCustomizableField.tsx
@@ -12,7 +12,7 @@ interface Props {
   internalName: string
   displayName: string
   visible: boolean
-  onFieldUpdate: (field: Field) => void
+  onFieldUpdate?: (field: Field) => void
 }
 
 class GraphOptionsCustomizableField extends PureComponent<Props, {}> {
diff --git a/ui/src/dashboards/components/GraphOptionsCustomizeFields.tsx b/ui/src/dashboards/components/GraphOptionsCustomizeFields.tsx
index df93f063f..613cbef87 100644
--- a/ui/src/dashboards/components/GraphOptionsCustomizeFields.tsx
+++ b/ui/src/dashboards/components/GraphOptionsCustomizeFields.tsx
@@ -1,8 +1,9 @@
-import React, {SFC} from 'react'
+import React, {PureComponent} from 'react'
 
 import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 import GraphOptionsCustomizableField from 'src/dashboards/components/GraphOptionsCustomizableField'
 import uuid from 'uuid'
+import {SortableContainer, SortableElement, arrayMove} from 'react-sortable-hoc'
 
 interface Field {
   internalName: string
@@ -14,30 +15,77 @@ interface Props {
   fields: Field[]
   onFieldUpdate: (field: Field) => void
 }
-
-const GraphOptionsCustomizeFields: SFC<Props> = ({fields, onFieldUpdate}) => {
-  return (
-    <div className="graph-options-group">
-      <label className="form-label">Customize Fields</label>
-      <FancyScrollbar
-        className="customize-fields"
-        maxHeight={225}
-        autoHeight={true}
-      >
-        {fields.map(field => {
-          return (
-            <GraphOptionsCustomizableField
-              key={uuid.v4()}
-              internalName={field.internalName}
-              displayName={field.displayName}
-              visible={field.visible}
-              onFieldUpdate={onFieldUpdate}
-            />
-          )
-        })}
-      </FancyScrollbar>
-    </div>
-  )
+interface State {
+  items: Field[]
 }
 
-export default GraphOptionsCustomizeFields
+const SortableItem = SortableElement(({value, onFieldUpdate}) => (
+  <li>
+    <GraphOptionsCustomizableField
+      internalName={value.internalName}
+      displayName={value.displayName}
+      visible={value.visible}
+      onFieldUpdate={onFieldUpdate}
+    />
+  </li>
+))
+
+const SortableList = SortableContainer(({items, onFieldUpdate}) => {
+  return (
+    <ul>
+      {items.map((value, index) => (
+        <SortableItem
+          key={`item-${index}`}
+          index={index}
+          value={value}
+          onFieldUpdate={onFieldUpdate}
+        />
+      ))}
+    </ul>
+  )
+})
+
+export default class GraphOptionsCustomizeFields extends PureComponent<
+  Props,
+  State
+> {
+  constructor(props) {
+    super(props)
+    this.state = {
+      items: this.props.fields,
+    }
+  }
+  onSortEnd = ({oldIndex, newIndex}) => {
+    this.setState({
+      items: arrayMove(this.state.items, oldIndex, newIndex),
+    })
+  }
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.fields == this.props.fields) {
+      return
+    }
+    this.setState({items: nextProps.fields})
+  }
+
+  public render() {
+    const {items} = this.state
+    const {onFieldUpdate} = this.props
+    console.log('items', items)
+    return (
+      <div className="graph-options-group">
+        <label className="form-label">Customize Fields</label>
+        <SortableList
+          items={items}
+          onSortEnd={this.onSortEnd}
+          onFieldUpdate={onFieldUpdate}
+        />
+      </div>
+    )
+  }
+}
+// <FancyScrollbar
+//   className="customize-fields"
+//   maxHeight={225}
+//   autoHeight={true}
+// >
+// </FancyScrollbar>
diff --git a/ui/yarn.lock b/ui/yarn.lock
index cb262a2d7..cfd0c3726 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -1160,7 +1160,7 @@ babel-register@6.26.0, babel-register@^6.26.0:
     mkdirp "^0.5.1"
     source-map-support "^0.4.15"
 
-babel-runtime@^6.18.0, babel-runtime@^6.2.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0, babel-runtime@^6.5.0, babel-runtime@^6.9.2:
+babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.2.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0, babel-runtime@^6.5.0, babel-runtime@^6.9.2:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
   dependencies:
@@ -5349,7 +5349,7 @@ lodash@4.17.4:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
-lodash@^4.0.0, lodash@^4.1.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1, lodash@~4.17.4:
+lodash@^4.0.0, lodash@^4.1.0, lodash@^4.12.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1, lodash@~4.17.4:
   version "4.17.5"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"
 
@@ -6822,7 +6822,7 @@ prop-types@15.5.8:
   dependencies:
     fbjs "^0.8.9"
 
-prop-types@15.x, prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.6.0, prop-types@^15.6.1:
+prop-types@15.x, prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.6.0, prop-types@^15.6.1:
   version "15.6.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca"
   dependencies:
@@ -7090,6 +7090,15 @@ react-router@^3.0.2:
     prop-types "^15.5.6"
     warning "^3.0.0"
 
+react-sortable-hoc@^0.6.8:
+  version "0.6.8"
+  resolved "https://registry.yarnpkg.com/react-sortable-hoc/-/react-sortable-hoc-0.6.8.tgz#b08562f570d7c41f6e393fca52879d2ebb9118e9"
+  dependencies:
+    babel-runtime "^6.11.6"
+    invariant "^2.2.1"
+    lodash "^4.12.0"
+    prop-types "^15.5.7"
+
 react-test-renderer@^15.6.1:
   version "15.6.2"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-15.6.2.tgz#d0333434fc2c438092696ca770da5ed48037efa8"