diff --git a/app/extensions/brave/img/caret_down_grey.svg b/app/extensions/brave/img/caret_down_grey.svg
new file mode 100644
index 00000000000..c3dd80fe5a5
--- /dev/null
+++ b/app/extensions/brave/img/caret_down_grey.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/app/renderer/components/dropdown.js b/app/renderer/components/dropdown.js
new file mode 100644
index 00000000000..9c8f4994996
--- /dev/null
+++ b/app/renderer/components/dropdown.js
@@ -0,0 +1,71 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const React = require('react')
+const ImmutableComponent = require('../../../js/components/immutableComponent')
+const {StyleSheet, css} = require('aphrodite')
+const globalStyles = require('./styles/global')
+const commonStyles = require('./styles/commonStyles')
+
+const caretDownGrey = require('../../extensions/brave/img/caret_down_grey.svg')
+
+class Dropdown extends ImmutableComponent {
+ render () {
+ const className = css(
+ this.props['data-isFormControl'] && commonStyles.formControl,
+ styles.dropdown,
+ this.props['data-isSettings'] && styles.settings
+ )
+
+ return
+ }
+}
+
+class FormDropdown extends ImmutableComponent {
+ render () {
+ return
+ const { '{Textbox}' } = require('../../app/renderer/components/textbox'){'\n'}
+ <Textbox />
+
+
+ const { '{FormTextbox}' } = require('../../app/renderer/components/textbox'){'\n'}
+ <FormTextbox />
+
+
+ const { '{SettingTextbox}' } = require('../../app/renderer/components/textbox'){'\n'}
+ <SettingTextbox />
+
+
- // require('less/forms.less'){'\n'}{'\n'}
- <input className='form-control' type='text' />
+ const { '{RecoveryKeyTextbox}' } = require('../../app/renderer/components/textbox'){'\n'}
+ <RecoveryKeyTextbox />
+ const { '{Dropdown}' } = require('../../app/renderer/components/dropdown'){'\n'}
+ <Dropdown>{'\n'}
+ <option>Select Box</option>{'\n'}
+ <option>Second Choice</option>{'\n'}
+ <option>Third Choice</option>{'\n'}
+ </Dropdown>
+
+
+ const { '{FormDropdown}' } = require('../../app/renderer/components/dropdown'){'\n'}
+ <FormDropdown>{'\n'}
+ <option>Select Box</option>{'\n'}
+ <option>Second Choice</option>{'\n'}
+ <option>Third Choice</option>{'\n'}
+ </FormDropdown>
+
+
- <select className='form-control'>{'\n'}
- <option>Select Box</option>{'\n'}
- <option>Second Choice</option>{'\n'}
- <option>Third Choice</option>{'\n'}
- </select>
+ const { '{SettingDropdown}' } = require('../../app/renderer/components/dropdown'){'\n'}
+ <SettingDropdown>{'\n'}
+ <option>Select Box</option>{'\n'}
+ <option>Second Choice</option>{'\n'}
+ <option>Third Choice</option>{'\n'}
+ </SettingDropdown>
<button data-l10n-id='done' className='browserButton'{'\n'}
diff --git a/js/components/braveryPanel.js b/js/components/braveryPanel.js
index 8f6aeb53e50..456b86f48f8 100644
--- a/js/components/braveryPanel.js
+++ b/js/components/braveryPanel.js
@@ -9,6 +9,7 @@ const ImmutableComponent = require('./immutableComponent')
const config = require('../constants/config')
const Dialog = require('./dialog')
const SwitchControl = require('./switchControl')
+const {FormDropdown} = require('../../app/renderer/components/dropdown')
const windowActions = require('../actions/windowActions')
const appActions = require('../actions/appActions')
const urlParse = require('url').parse
@@ -287,11 +288,11 @@ class BraveryPanel extends ImmutableComponent {
braverySelectTitle: true,
disabled: !shieldsUp
})} data-l10n-id='adControl' />
-
+