diff --git a/app/components/Settings/OptionsDropdown/OptionsDropdown.react.js b/app/components/Settings/OptionsDropdown/OptionsDropdown.react.js
index 558a22f68..1235e1729 100644
--- a/app/components/Settings/OptionsDropdown/OptionsDropdown.react.js
+++ b/app/components/Settings/OptionsDropdown/OptionsDropdown.react.js
@@ -1,20 +1,15 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {flatten, keys} from 'ramda';
-import Select from 'react-select';
+import SQLOptions from './sql-options';
+import ESIndicesOptions from './es-indices-options';
+import ESDocsOptions from './es-docs-options';
 
 export default class OptionsDropdown extends Component {
-    constructor(props) {
-        super(props);
-        this.renderSQLOptions = this.renderSQLOptions.bind(this);
-        this.renderElasticsearchIndecies = this.renderElasticsearchIndecies.bind(this);
-        this.renderElasticsearchDocs = this.renderElasticsearchDocs.bind(this);
-    }
 
     static propTypes = {
         // See type of react-select's Select `value` property
-        selectedTable: PropTypes.any,
-        selectedIndex: PropTypes.any,
+        selectedTable: PropTypes.string,
+        selectedIndex: PropTypes.string,
 
         tablesRequest: PropTypes.object,
         setTable: PropTypes.func,
@@ -22,121 +17,45 @@ export default class OptionsDropdown extends Component {
         setIndex: PropTypes.func
     }
 
-    renderSQLOptions() {
-        const {selectedTable, tablesRequest, setTable} = this.props;
-        if (!tablesRequest.status) {
-            return null;
-        } else if (tablesRequest.status === 'loading') {
-            return <div>{'Loading tables'}</div>;
-        } else if (tablesRequest.status > 300) {
-            // TODO - Make this prettier.
-            return (
-                <div>
-                    <div>{'Hm.. there was an error loading up your tables'}</div>
-                    <div style={{color: 'red'}}>{JSON.stringify(tablesRequest)}</div>
-                </div>
-            );
-        } else if (tablesRequest.status === 200) {
-            const tablesList = flatten(tablesRequest.content);
-            if (tablesList.length === 0) {
-                return <div>{'No tables found'}</div>;
-            }
-            return (
-                <div className={'dropdown'}
-                    id="test-table-dropdown"
-                >
-                    <Select
-                        options={tablesList.map(t => ({label: t, value: t}))}
-                        value={selectedTable}
-                        searchable={false}
-                        onChange={option => {
-                            setTable(option.value);
-                        }}
-                    />
-                </div>
-            );
-        }
+    /**
+     * Options Dropdown is an options drop down
+     * @param {object} props  - Component Properties
+     * @param {object} props.selectedTable - The selected table
+     * @param {object} props.tablesRequest - The Requested Table
+     * @param {function} props.setTable - The set table function
+     * @param {object} props.elasticsearchMappingsRequest - The ES Mapping Request
+     * @param {object} props.selectedTable - The selected table
+     * @param {object} props.selectedIndex - The Selected Index
+     * @param {function} props.setIndex - The Set the index
+     */
+    constructor(props) {
+        super(props);
     }
 
-    renderElasticsearchIndecies() {
+    render() {
         const {
+            selectedTable,
+            tablesRequest,
+            setTable,
             elasticsearchMappingsRequest: EMR,
             setIndex,
             selectedIndex
         } = this.props;
-        if (!EMR.status) {
-            return null;
-        } else if (EMR.status === 'loading') {
-            return <div>{'Loading docs'}</div>;
-        } else if (EMR.status > 300) {
-            // TODO - Make this prettier.
-            return (
-                <div>
-                    <div>{'There was an error loading up your docs'}</div>
-                    <div style={{color: 'red'}}>{JSON.stringify(EMR)}</div>
-                </div>
-            );
-        } else if (EMR.status === 200) {
-            const indeciesList = keys(EMR.content);
-            if (indeciesList.length === 0) {
-                return <div>{'No docs found'}</div>;
-            }
-            return (
-                <div className={'dropdown'}
-                    id="test-table-dropdown"
-                >
-                    <Select
-                        options={indeciesList.map(t => ({label: t, value: t}))}
-                        value={selectedIndex}
-                        searchable={false}
-                        onChange={option => {
-                            setIndex(option.value);
-                        }}
-                    />
-                </div>
-            );
-        }
-    }
-
-    renderElasticsearchDocs() {
-        const {
-            selectedTable,
-            selectedIndex,
-            elasticsearchMappingsRequest: EMR,
-            setTable
-        } = this.props;
-
-        if (!selectedIndex) {
-            return null;
-        }
-
-        const tablesList = keys(EMR.content[selectedIndex].mappings);
-        if (tablesList.length === 0) {
-            return <div>{'No docs found'}</div>;
-        }
-
-        return (
-            <div className={'dropdown'}
-                id="test-table-dropdown"
-            >
-                <Select
-                    options={tablesList.map(t => ({label: t, value: t}))}
-                    value={selectedTable}
-                    searchable={false}
-                    onChange={option => {
-                        setTable(option.value);
-                    }}
-                />
-            </div>
-        );
-    }
-
-    render() {
         return (
             <div style={{marginTop: '25px'}}>
-                {this.renderSQLOptions()}
-                {this.renderElasticsearchIndecies()}
-                {this.renderElasticsearchDocs()}
+                <SQLOptions selectedTable={selectedTable}
+                            tablesRequest={tablesRequest}
+                            setTable={setTable}
+                />
+                <ESIndicesOptions elasticsearchMappingsRequest={EMR}
+                                  setIndex={setIndex}
+                                  selectedIndex={selectedIndex}
+                />
+                <ESDocsOptions selectedTable={selectedTable}
+                                selectedIndex={selectedIndex}
+                                elasticsearchMappingsRequest={EMR}
+                                setTable={setTable}
+                />
             </div>
         );
     }
diff --git a/app/components/Settings/OptionsDropdown/es-docs-options.jsx b/app/components/Settings/OptionsDropdown/es-docs-options.jsx
new file mode 100644
index 000000000..2914178c3
--- /dev/null
+++ b/app/components/Settings/OptionsDropdown/es-docs-options.jsx
@@ -0,0 +1,58 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import {keys} from 'ramda';
+import Select from 'react-select';
+
+export default class ESDocsOptions extends Component {
+    static propTypes = {
+        selectedTable: PropTypes.string,
+        selectedIndex: PropTypes.string,
+        setTable: PropTypes.func,
+        elasticsearchMappingsRequest: PropTypes.object
+    }
+
+    /**
+     * ES Docs Options is an options drop down
+     * @param {object} props  - Component Properties
+     * @param {object} props.elasticsearchMappingsRequest - The ES Mapping Request
+     * @param {object} props.selectedTable - The selected table
+     * @param {object} props.selectedIndex - The Selected Index
+     * @param {object} props.setTable - The table
+     */
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        const {
+            selectedTable,
+            selectedIndex,
+            elasticsearchMappingsRequest: EMR,
+            setTable
+        } = this.props;
+
+        if (!selectedIndex) {
+            return null;
+        }
+
+        const tablesList = keys(EMR.content[selectedIndex].mappings);
+        if (tablesList.length === 0) {
+            return <div>{'No docs found'}</div>;
+        }
+
+        return (
+            <div className={'dropdown'}
+                id="test-table-dropdown"
+            >
+                <Select
+                    options={tablesList.map(t => ({label: t, value: t}))}
+                    value={selectedTable}
+                    searchable={false}
+                    onChange={option => {
+                        setTable(option.value);
+                    }}
+                />
+            </div>
+        );
+    }
+}
\ No newline at end of file
diff --git a/app/components/Settings/OptionsDropdown/es-indices-options.jsx b/app/components/Settings/OptionsDropdown/es-indices-options.jsx
new file mode 100644
index 000000000..543fe8b5f
--- /dev/null
+++ b/app/components/Settings/OptionsDropdown/es-indices-options.jsx
@@ -0,0 +1,63 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import {keys} from 'ramda';
+import Select from 'react-select';
+
+export default class ESIndicesOptions extends Component {
+    static propTypes = {
+        elasticsearchMappingsRequest: PropTypes.object,
+        setIndex: PropTypes.func,
+        selectedIndex: PropTypes.string
+    };
+
+    /**
+     * ES Indicies Options is an options drop down
+     * @param {object} props  - Component Properties
+     * @param {object} props.elasticsearchMappingsRequest - The ES Mapping Request
+     * @param {object} props.setIndex - The Set Index Function
+     * @param {object} props.selectedIndex - The Selected Index
+     */
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        const {
+            elasticsearchMappingsRequest: EMR,
+            setIndex,
+            selectedIndex
+        } = this.props;
+        if (!EMR.status) {
+            return null;
+        } else if (EMR.status === 'loading') {
+            return <div>{'Loading docs'}</div>;
+        } else if (EMR.status > 300) {
+            // TODO - Make this prettier.
+            return (
+                <div>
+                    <div>{'There was an error loading up your docs'}</div>
+                    <div style={{color: 'red'}}>{JSON.stringify(EMR)}</div>
+                </div>
+            );
+        } else if (EMR.status === 200) {
+            const indeciesList = keys(EMR.content);
+            if (indeciesList.length === 0) {
+                return <div>{'No docs found'}</div>;
+            }
+            return (
+                <div className={'dropdown'}
+                    id="test-table-dropdown"
+                >
+                    <Select
+                        options={indeciesList.map(t => ({label: t, value: t}))}
+                        value={selectedIndex}
+                        searchable={false}
+                        onChange={option => {
+                            setIndex(option.value);
+                        }}
+                    />
+                </div>
+            );
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/components/Settings/OptionsDropdown/sql-options.jsx b/app/components/Settings/OptionsDropdown/sql-options.jsx
new file mode 100644
index 000000000..9ed01a463
--- /dev/null
+++ b/app/components/Settings/OptionsDropdown/sql-options.jsx
@@ -0,0 +1,60 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import {flatten} from 'ramda';
+import Select from 'react-select';
+
+export default class SQLOptions extends Component {
+
+    static propTypes = {
+        selectedTable: PropTypes.string,
+        tablesRequest: PropTypes.object,
+        setTable: PropTypes.func
+    };
+
+    /**
+     * SQLOptions is an options drop down down
+     * @param {object} props  - Component Properties
+     * @param {object} props.selectedTable - The selected table
+     * @param {object} props.tablesRequest - The Requested Table
+     * @param {function} props.setTable - The set table function
+     */
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        const {selectedTable, tablesRequest, setTable} = this.props;
+        if (!tablesRequest.status) {
+            return null;
+        } else if (tablesRequest.status === 'loading') {
+            return <div>{'Loading tables'}</div>;
+        } else if (tablesRequest.status > 300) {
+            // TODO - Make this prettier.
+            return (
+                <div>
+                    <div>{'Hm.. there was an error loading up your tables'}</div>
+                    <div style={{color: 'red'}}>{JSON.stringify(tablesRequest)}</div>
+                </div>
+            );
+        } else if (tablesRequest.status === 200) {
+            const tablesList = flatten(tablesRequest.content);
+            if (tablesList.length === 0) {
+                return <div>{'No tables found'}</div>;
+            }
+            return (
+                <div className={'dropdown'}
+                    id="test-table-dropdown"
+                >
+                    <Select
+                        options={tablesList.map(t => ({label: t, value: t}))}
+                        value={selectedTable}
+                        searchable={false}
+                        onChange={option => {
+                            setTable(option.value);
+                        }}
+                    />
+                </div>
+            );
+        }
+    }
+}
\ No newline at end of file