Version Bump (#5909)v5.2.0

* Adds new gas customization modal container (without content)

* Adds the content of the advanced tab - w/o chart or dynamic content - to gas customize modal.

* Use correct message key in gas-modal-page-container.component.js

* Use BEM for css in gas-modal-page-container

* Split advanced-tab-content.component.js  render() method into smaller pieces; add translations to the same file.

* Remove gas slider from advance-tab-content.component

* Add tests for advanced-tab-component.js and subcomponents.

* Improve styling of advanced-tab-content gasInput row

* Adds basic tab content to gas customizer, with styled button group (static, for now).

* Connect the gas-button-group component to redux and a live api.

* Improvements to propdefaults in button-group.component and basic-tab-content.component

* Styling fixes for gas customization advanced tab content.

* Adds gas-duck.test.js tests.

* Connects remained of the gas customization component to redux.

* Integrate gas buttons with the send screen.

* Test updates and additions for button integration with send screen.

* Adds redesign for the customize gas advanced tab.

* Adds not yet functional gas price chart.

* Gas price chart improvements, redesign, bug fixes, and set up to receive external data

* Read only connection of gas price chart to redux

* Clean up for advanced gas tab customization changes.

* Complete integration of gas chart with redux.

* Add control arrows to advanced gas tab inputs.

* Lint and unit test fixes.

* Clean up gas chart code.

* Update tests, plus some lint fixes, for gas-price-chart

* Improve data management and tests for gas-modal-page-container price estimates.

* Clean up for mmui-i11-custom-gas-price-chart branch

* Redesign of gas customization basic tab.

* Adds createSpeedUpTransaction to txController

* Connect gas price chart to gas station api.

* Adds speed up slide-in gas customization sidebar

* Update e2e tests for new gas customization modal.

* Fixes for components that break e2e gas customization tests, plus unit test updates.

* Remove gas customization integration tests (in favour of e2e tests)

* Add gas data to integration test json data set.

* Add c3 and d3 to the separate dependencies bundle.

* Make gas customization modal responsive.

* Fix "fastest" translation message; change to sentence case

* Uses more reliable api on main send screen; caches basic api results in modal

* Add loading spinners when waiting for APIs in the gas customization modal

* Modify results of API data to better fit gas chart: remove outliers, pad data

* Clear custom gas data on hiding of gas customization modal.

* Improve responsiveness of customize speed up slider.

* Final gas customization fixes

* Fix styling of send screen in extension view when hex data on.

* Replace height: 100% rule with workaround for flexbox quirks

* Fill in more Polish message translations

* Update lockfile to fix errors

npm has informed me that the lockfile has "errors":

    npm ERR! code ELOCKVERIFY
    npm ERR! Errors were found in your package-lock.json, run  npm install  to fix them.
    npm ERR!     Missing: c3@^0.6.7
    npm ERR!     Invalid: lock file's d3@3.5.17 does not satisfy d3@^5.7.0

* circleci: Disable npm audit when installing packages

Auditing packages when installing here doesn't help anyone as the summary
isn't visible and vulnerabilities don't produce a non-zero exit code. We
will have `npm audit` as an extra CI job.

* npm audit fix

* circleci: Replace nsp with npm audit

Refs #4751

* Remove beefy dependency and its usages

Refs #4768
Refs #5389

This changeset removes the beefy package that:

1. Was last published 2 yrs ago
2. Brought with it 1 moderate and 1 critical vulnerability
3. Was only used in scripts that no longer work

* npm uninstall open

* Update ganache-core to mitigate vuln

                       === npm audit security report ===

> # Run  npm install --save-dev ganache-core@2.3.1  to resolve 1 vulnerability
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Moderate      │ Memory Exposure                                              │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ bl                                                           │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ ganache-core [dev]                                           │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ ganache-core > level-sublevel > levelup > bl                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/596                       │
└───────────────┴──────────────────────────────────────────────────────────────┘

* Deduplicate package.json file

From `npm install`:

> npm WARN The package css-loader is included as both a dev and production dependency.
> npm WARN The package eslint-plugin-react is included as both a dev and production dependency.
> npm WARN The package file-loader is included as both a dev and production dependency.
> npm WARN The package gulp is included as both a dev and production dependency.

It's also worth noting that the Gulp version we were using was inconsistent and there is
a published v4 release on GitHub.

* Fix race condition in network controller lookup() method.

* Group transactions by nonce (#5886)

* fix formatting of 32-byte strings in personal_sign (#5878)

* Bump json-rpc-engine to v4.0.0

* Bump package lock, mostly to https links

* Improve ux for low gas price set (#5862)

* Show user warning if they set gas price below safelow minimum, error if 0.

* Properly cache basic price estimate data.

* Default retry price to recommended price if original price was 0x0

* Use mock fetch in send-new-ui integration tests.

* Show Failed transaction in the browser notification for on-chain failures (#5904)

* Changelog and version bump for 5.2.0

33 files changed, 3762 insertions, 0 deletions

diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
new file mode 100644
index 000000000..7c3142d0d
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
@@ -0,0 +1,207 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import Loading from '../../../loading-screen'
+import GasPriceChart from '../../gas-price-chart'
+import debounce from 'lodash.debounce'
+
+export default class AdvancedTabContent extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    updateCustomGasPrice: PropTypes.func,
+    updateCustomGasLimit: PropTypes.func,
+    customGasPrice: PropTypes.number,
+    customGasLimit: PropTypes.number,
+    gasEstimatesLoading: PropTypes.bool,
+    millisecondsRemaining: PropTypes.number,
+    totalFee: PropTypes.string,
+    timeRemaining: PropTypes.string,
+    gasChartProps: PropTypes.object,
+    insufficientBalance: PropTypes.bool,
+    customPriceIsSafe: PropTypes.bool,
+    isSpeedUp: PropTypes.bool,
+  }
+
+  constructor (props) {
+    super(props)
+
+    this.debouncedGasLimitReset = debounce((dVal) => {
+      if (dVal < 21000) {
+        props.updateCustomGasLimit(21000)
+      }
+    }, 1000, { trailing: true })
+    this.onChangeGasLimit = (val) => {
+      props.updateCustomGasLimit(val)
+      this.debouncedGasLimitReset(val)
+    }
+  }
+
+  gasInputError ({ labelKey, insufficientBalance, customPriceIsSafe, isSpeedUp, value }) {
+    let errorText
+    let errorType
+    let isInError = true
+
+
+    if (insufficientBalance) {
+      errorText = 'Insufficient Balance'
+      errorType = 'error'
+    } else if (labelKey === 'gasPrice' && isSpeedUp && value === 0) {
+      errorText = 'Zero gas price on speed up'
+      errorType = 'error'
+    } else if (labelKey === 'gasPrice' && !customPriceIsSafe) {
+      errorText = 'Gas Price Extremely Low'
+      errorType = 'warning'
+    } else {
+      isInError = false
+    }
+
+    return {
+      isInError,
+      errorText,
+      errorType,
+    }
+  }
+
+  gasInput ({ labelKey, value, onChange, insufficientBalance, showGWEI, customPriceIsSafe, isSpeedUp }) {
+    const {
+      isInError,
+      errorText,
+      errorType,
+    } = this.gasInputError({ labelKey, insufficientBalance, customPriceIsSafe, isSpeedUp, value })
+
+    return (
+      <div className="advanced-tab__gas-edit-row__input-wrapper">
+        <input
+          className={classnames('advanced-tab__gas-edit-row__input', {
+            'advanced-tab__gas-edit-row__input--error': isInError && errorType === 'error',
+            'advanced-tab__gas-edit-row__input--warning': isInError && errorType === 'warning',
+          })}
+          type="number"
+          value={value}
+          onChange={event => onChange(Number(event.target.value))}
+        />
+        <div className={classnames('advanced-tab__gas-edit-row__input-arrows', {
+          'advanced-tab__gas-edit-row__input--error': isInError && errorType === 'error',
+          'advanced-tab__gas-edit-row__input--warning': isInError && errorType === 'warning',
+        })}>
+          <div className="advanced-tab__gas-edit-row__input-arrows__i-wrap" onClick={() => onChange(value + 1)}><i className="fa fa-sm fa-angle-up" /></div>
+          <div className="advanced-tab__gas-edit-row__input-arrows__i-wrap" onClick={() => onChange(value - 1)}><i className="fa fa-sm fa-angle-down" /></div>
+        </div>
+        { isInError
+          ? <div className={`advanced-tab__gas-edit-row__${errorType}-text`}>
+              { errorText }
+            </div>
+          : null }
+      </div>
+    )
+  }
+
+  infoButton (onClick) {
+    return <i className="fa fa-info-circle" onClick={onClick} />
+  }
+
+  renderDataSummary (totalFee, timeRemaining) {
+    return (
+      <div className="advanced-tab__transaction-data-summary">
+        <div className="advanced-tab__transaction-data-summary__titles">
+          <span>{ this.context.t('newTransactionFee') }</span>
+          <span>~{ this.context.t('transactionTime') }</span>
+        </div>
+        <div className="advanced-tab__transaction-data-summary__container">
+          <div className="advanced-tab__transaction-data-summary__fee">
+            {totalFee}
+          </div>
+          <div className="time-remaining">{timeRemaining}</div>
+        </div>
+      </div>
+    )
+  }
+
+  renderGasEditRow (gasInputArgs) {
+    return (
+      <div className="advanced-tab__gas-edit-row">
+        <div className="advanced-tab__gas-edit-row__label">
+          { this.context.t(gasInputArgs.labelKey) }
+          { this.infoButton(() => {}) }
+        </div>
+        { this.gasInput(gasInputArgs) }
+      </div>
+    )
+  }
+
+  renderGasEditRows ({
+    customGasPrice,
+    updateCustomGasPrice,
+    customGasLimit,
+    updateCustomGasLimit,
+    insufficientBalance,
+    customPriceIsSafe,
+    isSpeedUp,
+  }) {
+    return (
+      <div className="advanced-tab__gas-edit-rows">
+        { this.renderGasEditRow({
+          labelKey: 'gasPrice',
+          value: customGasPrice,
+          onChange: updateCustomGasPrice,
+          insufficientBalance,
+          customPriceIsSafe,
+          showGWEI: true,
+          isSpeedUp,
+        }) }
+        { this.renderGasEditRow({
+          labelKey: 'gasLimit',
+          value: customGasLimit,
+          onChange: this.onChangeGasLimit,
+          insufficientBalance,
+          customPriceIsSafe,
+        }) }
+      </div>
+    )
+  }
+
+  render () {
+    const {
+      updateCustomGasPrice,
+      updateCustomGasLimit,
+      timeRemaining,
+      customGasPrice,
+      customGasLimit,
+      insufficientBalance,
+      totalFee,
+      gasChartProps,
+      gasEstimatesLoading,
+      customPriceIsSafe,
+      isSpeedUp,
+    } = this.props
+
+    return (
+      <div className="advanced-tab">
+        { this.renderDataSummary(totalFee, timeRemaining) }
+        <div className="advanced-tab__fee-chart">
+          { this.renderGasEditRows({
+            customGasPrice,
+            updateCustomGasPrice,
+            customGasLimit,
+            updateCustomGasLimit,
+            insufficientBalance,
+            customPriceIsSafe,
+            isSpeedUp,
+          }) }
+          <div className="advanced-tab__fee-chart__title">Live Gas Price Predictions</div>
+          {!gasEstimatesLoading
+            ? <GasPriceChart {...gasChartProps} updateCustomGasPrice={updateCustomGasPrice} />
+            : <Loading />
+          }
+          <div className="advanced-tab__fee-chart__speed-buttons">
+            <span>Slower</span>
+            <span>Faster</span>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.js
new file mode 100644
index 000000000..492037f25
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.js
@@ -0,0 +1 @@
+export { default } from './advanced-tab-content.component'
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
new file mode 100644
index 000000000..53cb84791
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
@@ -0,0 +1,203 @@
+@import './time-remaining/index';
+
+.advanced-tab {
+  display: flex;
+  flex-flow: column;
+
+  &__transaction-data-summary,
+  &__fee-chart-title {
+    padding-left: 24px;
+    padding-right: 24px;
+  }
+
+  &__transaction-data-summary {
+    display: flex;
+    flex-flow: column;
+    color: $mid-gray;
+    margin-top: 12px;
+    padding-left: 18px;
+    padding-right: 18px;
+
+    &__titles,
+    &__container {
+      display: flex;
+      flex-flow: row;
+      justify-content: space-between;
+      font-size: 12px;
+      color: #888EA3;
+    }
+
+    &__container {
+      font-size: 16px;
+      margin-top: 0px;
+    }
+
+    &__fee {
+      font-size: 16px;
+      color: #313A5E;
+    }
+  }
+
+  &__fee-chart {
+    margin-top: 8px;
+    height: 265px;
+    background: #F8F9FB;
+    border-bottom: 1px solid #d2d8dd;
+    border-top: 1px solid #d2d8dd;
+    position: relative;
+
+    &__title {
+      font-size: 12px;
+      color: #313A5E;
+      margin-left: 22px;
+    }
+
+    &__speed-buttons {
+      position: absolute;
+      bottom: 13px;
+      display: flex;
+      justify-content: space-between;
+      padding-left: 20px;
+      padding-right: 19px;
+      width: 100%;
+      font-size: 10px;
+      color: #888EA3;
+    }
+  }
+
+  &__slider-container {
+    padding-left: 27px;
+    padding-right: 27px;
+  }
+
+  &__gas-edit-rows {
+    height: 73px;
+    display: flex;
+    flex-flow: row;
+    justify-content: space-between;
+    margin-left: 20px;
+    margin-right: 10px;
+    margin-top: 9px;
+  }
+
+  &__gas-edit-row {
+    display: flex;
+    flex-flow: column;
+
+    &__label {
+      color: #313B5E;
+      font-size: 14px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      
+      .fa-info-circle {
+        color: $silver;
+        margin-left: 10px;
+        cursor: pointer;
+      }
+
+      .fa-info-circle:hover {
+        color: $mid-gray;
+      }
+    }
+
+    &__error-text {
+      font-size: 12px;
+      color: red;
+    }
+
+    &__warning-text {
+      font-size: 12px;
+      color: orange;
+    }
+
+    &__input-wrapper {
+      position: relative;
+    }
+
+    &__input {
+      border: 1px solid $dusty-gray;
+      border-radius: 4px;
+      color: $mid-gray;
+      font-size: 16px;
+      height: 24px;
+      width: 155px;
+      padding-left: 8px;
+      padding-top: 2px;
+      margin-top: 7px;
+    }
+
+    &__input--error {
+       border: 1px solid $red;
+    }
+
+    &__input--warning {
+       border: 1px solid $orange;
+    }
+
+    &__input-arrows {
+      position: absolute;
+      top: 7px;
+      right: 0px;
+      width: 17px;
+      height: 24px;
+      border: 1px solid #dadada;
+      border-top-right-radius: 4px;
+      display: flex;
+      flex-direction: column;
+      color: #9b9b9b;
+      font-size: .8em;
+      border-bottom-right-radius: 4px;
+      cursor: pointer;
+
+      &__i-wrap {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        cursor: pointer;
+      }
+
+      &__i-wrap:hover {
+        background: #4EADE7;
+        color: $white;
+      }
+
+      i:hover {
+        background: #4EADE7;
+      }
+
+      i {
+        font-size: 10px;
+      }
+    }
+
+    &__input-arrows--error {
+      border: 1px solid $red;
+    }
+
+    &__input-arrows--warning {
+      border: 1px solid $orange;
+    }
+
+    input[type="number"]::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      display: none;
+    }
+
+    input[type="number"]:hover::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      display: none;
+    }
+
+    &__gwei-symbol {
+      position: absolute;
+      top: 8px;
+      right: 10px;
+      color: $dusty-gray;
+    }
+  }
+}
\ No newline at end of file
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
new file mode 100644
index 000000000..00242e430
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
@@ -0,0 +1,364 @@
+import React from 'react'
+import assert from 'assert'
+import shallow from '../../../../../../lib/shallow-with-context'
+import sinon from 'sinon'
+import AdvancedTabContent from '../advanced-tab-content.component.js'
+
+import GasPriceChart from '../../../gas-price-chart'
+import Loading from '../../../../loading-screen'
+
+const propsMethodSpies = {
+  updateCustomGasPrice: sinon.spy(),
+  updateCustomGasLimit: sinon.spy(),
+}
+
+sinon.spy(AdvancedTabContent.prototype, 'renderGasEditRow')
+sinon.spy(AdvancedTabContent.prototype, 'gasInput')
+sinon.spy(AdvancedTabContent.prototype, 'renderGasEditRows')
+sinon.spy(AdvancedTabContent.prototype, 'renderDataSummary')
+sinon.spy(AdvancedTabContent.prototype, 'gasInputError')
+
+describe('AdvancedTabContent Component', function () {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<AdvancedTabContent
+      updateCustomGasPrice={propsMethodSpies.updateCustomGasPrice}
+      updateCustomGasLimit={propsMethodSpies.updateCustomGasLimit}
+      customGasPrice={11}
+      customGasLimit={23456}
+      timeRemaining={21500}
+      totalFee={'$0.25'}
+      insufficientBalance={false}
+      customPriceIsSafe={true}
+      isSpeedUp={false}
+    />, { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } })
+  })
+
+  afterEach(() => {
+    propsMethodSpies.updateCustomGasPrice.resetHistory()
+    propsMethodSpies.updateCustomGasLimit.resetHistory()
+    AdvancedTabContent.prototype.renderGasEditRow.resetHistory()
+    AdvancedTabContent.prototype.gasInput.resetHistory()
+    AdvancedTabContent.prototype.renderGasEditRows.resetHistory()
+    AdvancedTabContent.prototype.renderDataSummary.resetHistory()
+  })
+
+  describe('render()', () => {
+    it('should render the advanced-tab root node', () => {
+      assert(wrapper.hasClass('advanced-tab'))
+    })
+
+    it('should render the expected four children of the advanced-tab div', () => {
+      const advancedTabChildren = wrapper.children()
+      assert.equal(advancedTabChildren.length, 2)
+
+      assert(advancedTabChildren.at(0).hasClass('advanced-tab__transaction-data-summary'))
+      assert(advancedTabChildren.at(1).hasClass('advanced-tab__fee-chart'))
+
+      const feeChartDiv = advancedTabChildren.at(1)
+
+      assert(feeChartDiv.childAt(0).hasClass('advanced-tab__gas-edit-rows'))
+      assert(feeChartDiv.childAt(1).hasClass('advanced-tab__fee-chart__title'))
+      assert(feeChartDiv.childAt(2).is(GasPriceChart))
+      assert(feeChartDiv.childAt(3).hasClass('advanced-tab__fee-chart__speed-buttons'))
+    })
+
+    it('should render a loading component instead of the chart if gasEstimatesLoading is true', () => {
+      wrapper.setProps({ gasEstimatesLoading: true })
+      const advancedTabChildren = wrapper.children()
+      assert.equal(advancedTabChildren.length, 2)
+
+      assert(advancedTabChildren.at(0).hasClass('advanced-tab__transaction-data-summary'))
+      assert(advancedTabChildren.at(1).hasClass('advanced-tab__fee-chart'))
+
+      const feeChartDiv = advancedTabChildren.at(1)
+
+      assert(feeChartDiv.childAt(0).hasClass('advanced-tab__gas-edit-rows'))
+      assert(feeChartDiv.childAt(1).hasClass('advanced-tab__fee-chart__title'))
+      assert(feeChartDiv.childAt(2).is(Loading))
+      assert(feeChartDiv.childAt(3).hasClass('advanced-tab__fee-chart__speed-buttons'))
+    })
+
+    it('should call renderDataSummary with the expected params', () => {
+      assert.equal(AdvancedTabContent.prototype.renderGasEditRows.callCount, 1)
+      const renderDataSummaryArgs = AdvancedTabContent.prototype.renderDataSummary.getCall(0).args
+      assert.deepEqual(renderDataSummaryArgs, ['$0.25', 21500])
+    })
+
+    it('should call renderGasEditRows with the expected params', () => {
+      assert.equal(AdvancedTabContent.prototype.renderGasEditRows.callCount, 1)
+      const renderGasEditRowArgs = AdvancedTabContent.prototype.renderGasEditRows.getCall(0).args
+      assert.deepEqual(renderGasEditRowArgs, [{
+        customGasPrice: 11,
+        customGasLimit: 23456,
+        insufficientBalance: false,
+        customPriceIsSafe: true,
+        updateCustomGasPrice: propsMethodSpies.updateCustomGasPrice,
+        updateCustomGasLimit: propsMethodSpies.updateCustomGasLimit,
+        isSpeedUp: false,
+      }])
+    })
+  })
+
+  describe('renderDataSummary()', () => {
+    let dataSummary
+
+    beforeEach(() => {
+      dataSummary = shallow(wrapper.instance().renderDataSummary('mockTotalFee', 'mockMsRemaining'))
+    })
+
+    it('should render the transaction-data-summary root node', () => {
+      assert(dataSummary.hasClass('advanced-tab__transaction-data-summary'))
+    })
+
+    it('should render titles of the data', () => {
+      const titlesNode = dataSummary.children().at(0)
+      assert(titlesNode.hasClass('advanced-tab__transaction-data-summary__titles'))
+      assert.equal(titlesNode.children().at(0).text(), 'newTransactionFee')
+      assert.equal(titlesNode.children().at(1).text(), '~transactionTime')
+    })
+
+    it('should render the data', () => {
+      const dataNode = dataSummary.children().at(1)
+      assert(dataNode.hasClass('advanced-tab__transaction-data-summary__container'))
+      assert.equal(dataNode.children().at(0).text(), 'mockTotalFee')
+      assert(dataNode.children().at(1).hasClass('time-remaining'))
+      assert.equal(dataNode.children().at(1).text(), 'mockMsRemaining')
+    })
+  })
+
+  describe('renderGasEditRow()', () => {
+    let gasEditRow
+
+    beforeEach(() => {
+      AdvancedTabContent.prototype.gasInput.resetHistory()
+      gasEditRow = shallow(wrapper.instance().renderGasEditRow({
+        labelKey: 'mockLabelKey',
+        someArg: 'argA',
+      }))
+    })
+
+    it('should render the gas-edit-row root node', () => {
+      assert(gasEditRow.hasClass('advanced-tab__gas-edit-row'))
+    })
+
+    it('should render a label and an input', () => {
+      const gasEditRowChildren = gasEditRow.children()
+      assert.equal(gasEditRowChildren.length, 2)
+      assert(gasEditRowChildren.at(0).hasClass('advanced-tab__gas-edit-row__label'))
+      assert(gasEditRowChildren.at(1).hasClass('advanced-tab__gas-edit-row__input-wrapper'))
+    })
+
+    it('should render the label key and info button', () => {
+      const gasRowLabelChildren = gasEditRow.children().at(0).children()
+      assert.equal(gasRowLabelChildren.length, 2)
+      assert(gasRowLabelChildren.at(0), 'mockLabelKey')
+      assert(gasRowLabelChildren.at(1).hasClass('fa-info-circle'))
+    })
+
+    it('should call this.gasInput with the correct args', () => {
+      const gasInputSpyArgs = AdvancedTabContent.prototype.gasInput.args
+      assert.deepEqual(gasInputSpyArgs[0], [ { labelKey: 'mockLabelKey', someArg: 'argA' } ])
+    })
+  })
+
+  describe('renderGasEditRows()', () => {
+    let gasEditRows
+    let tempOnChangeGasLimit
+
+    beforeEach(() => {
+      tempOnChangeGasLimit = wrapper.instance().onChangeGasLimit
+      wrapper.instance().onChangeGasLimit = () => 'mockOnChangeGasLimit'
+      AdvancedTabContent.prototype.renderGasEditRow.resetHistory()
+      gasEditRows = shallow(wrapper.instance().renderGasEditRows(
+        'mockGasPrice',
+        () => 'mockUpdateCustomGasPriceReturn',
+        'mockGasLimit',
+        () => 'mockUpdateCustomGasLimitReturn',
+        false
+      ))
+    })
+
+    afterEach(() => {
+      wrapper.instance().onChangeGasLimit = tempOnChangeGasLimit
+    })
+
+    it('should render the gas-edit-rows root node', () => {
+      assert(gasEditRows.hasClass('advanced-tab__gas-edit-rows'))
+    })
+
+    it('should render two rows', () => {
+      const gasEditRowsChildren = gasEditRows.children()
+      assert.equal(gasEditRowsChildren.length, 2)
+      assert(gasEditRowsChildren.at(0).hasClass('advanced-tab__gas-edit-row'))
+      assert(gasEditRowsChildren.at(1).hasClass('advanced-tab__gas-edit-row'))
+    })
+
+    it('should call this.renderGasEditRow twice, with the expected args', () => {
+      const renderGasEditRowSpyArgs = AdvancedTabContent.prototype.renderGasEditRow.args
+      assert.equal(renderGasEditRowSpyArgs.length, 2)
+      assert.deepEqual(renderGasEditRowSpyArgs[0].map(String), [{
+        labelKey: 'gasPrice',
+        value: 'mockGasLimit',
+        onChange: () => 'mockOnChangeGasLimit',
+        insufficientBalance: false,
+        customPriceIsSafe: true,
+        showGWEI: true,
+      }].map(String))
+      assert.deepEqual(renderGasEditRowSpyArgs[1].map(String), [{
+        labelKey: 'gasPrice',
+        value: 'mockGasPrice',
+        onChange: () => 'mockUpdateCustomGasPriceReturn',
+        insufficientBalance: false,
+        customPriceIsSafe: true,
+        showGWEI: true,
+      }].map(String))
+    })
+  })
+
+  describe('infoButton()', () => {
+    let infoButton
+
+    beforeEach(() => {
+      AdvancedTabContent.prototype.renderGasEditRow.resetHistory()
+      infoButton = shallow(wrapper.instance().infoButton(() => 'mockOnClickReturn'))
+    })
+
+    it('should render the i element', () => {
+      assert(infoButton.hasClass('fa-info-circle'))
+    })
+
+    it('should pass the onClick argument to the i tag onClick prop', () => {
+      assert(infoButton.props().onClick(), 'mockOnClickReturn')
+    })
+  })
+
+  describe('gasInput()', () => {
+    let gasInput
+
+    beforeEach(() => {
+      AdvancedTabContent.prototype.renderGasEditRow.resetHistory()
+      AdvancedTabContent.prototype.gasInputError.resetHistory()
+      gasInput = shallow(wrapper.instance().gasInput({
+        labelKey: 'gasPrice',
+        value: 321,
+        onChange: value => value + 7,
+        insufficientBalance: false,
+        showGWEI: true,
+        customPriceIsSafe: true,
+        isSpeedUp: false,
+      }))
+    })
+
+    it('should render the input-wrapper root node', () => {
+      assert(gasInput.hasClass('advanced-tab__gas-edit-row__input-wrapper'))
+    })
+
+    it('should render two children, including an input', () => {
+      assert.equal(gasInput.children().length, 2)
+      assert(gasInput.children().at(0).hasClass('advanced-tab__gas-edit-row__input'))
+    })
+
+    it('should call the passed onChange method with the value of the input onChange event', () => {
+      const inputOnChange = gasInput.find('input').props().onChange
+      assert.equal(inputOnChange({ target: { value: 8} }), 15)
+    })
+
+    it('should have two input arrows', () => {
+      const upArrow = gasInput.find('.fa-angle-up')
+      assert.equal(upArrow.length, 1)
+      const downArrow = gasInput.find('.fa-angle-down')
+      assert.equal(downArrow.length, 1)
+    })
+
+    it('should call onChange with the value incremented decremented when its onchange method is called', () => {
+      const upArrow = gasInput.find('.advanced-tab__gas-edit-row__input-arrows__i-wrap').at(0)
+      assert.equal(upArrow.props().onClick(), 329)
+      const downArrow = gasInput.find('.advanced-tab__gas-edit-row__input-arrows__i-wrap').at(1)
+      assert.equal(downArrow.props().onClick(), 327)
+    })
+
+    it('should call gasInputError with the expected params', () => {
+      assert.equal(AdvancedTabContent.prototype.gasInputError.callCount, 1)
+      const gasInputErrorArgs = AdvancedTabContent.prototype.gasInputError.getCall(0).args
+      assert.deepEqual(gasInputErrorArgs, [{
+        labelKey: 'gasPrice',
+        insufficientBalance: false,
+        customPriceIsSafe: true,
+        value: 321,
+        isSpeedUp: false,
+      }])
+    })
+  })
+
+  describe('gasInputError()', () => {
+    let gasInputError
+
+    beforeEach(() => {
+      AdvancedTabContent.prototype.renderGasEditRow.resetHistory()
+      gasInputError = wrapper.instance().gasInputError({
+        labelKey: '',
+        insufficientBalance: false,
+        customPriceIsSafe: true,
+        isSpeedUp: false,
+      })
+    })
+
+    it('should return an insufficientBalance error', () => {
+      const gasInputError = wrapper.instance().gasInputError({
+        labelKey: 'gasPrice',
+        insufficientBalance: true,
+        customPriceIsSafe: true,
+        isSpeedUp: false,
+        value: 1,
+      })
+      assert.deepEqual(gasInputError, {
+        isInError: true,
+        errorText: 'Insufficient Balance',
+        errorType: 'error',
+      })
+    })
+
+    it('should return a zero gas on retry error', () => {
+      const gasInputError = wrapper.instance().gasInputError({
+        labelKey: 'gasPrice',
+        insufficientBalance: false,
+        customPriceIsSafe: false,
+        isSpeedUp: true,
+        value: 0,
+      })
+      assert.deepEqual(gasInputError, {
+        isInError: true,
+        errorText: 'Zero gas price on speed up',
+        errorType: 'error',
+      })
+    })
+
+    it('should return a low gas warning', () => {
+      const gasInputError = wrapper.instance().gasInputError({
+        labelKey: 'gasPrice',
+        insufficientBalance: false,
+        customPriceIsSafe: false,
+        isSpeedUp: false,
+        value: 1,
+      })
+      assert.deepEqual(gasInputError, {
+        isInError: true,
+        errorText: 'Gas Price Extremely Low',
+        errorType: 'warning',
+      })
+    })
+
+    it('should return isInError false if there is no error', () => {
+      gasInputError = wrapper.instance().gasInputError({
+        labelKey: 'gasPrice',
+        insufficientBalance: false,
+        customPriceIsSafe: true,
+        value: 1,
+      })
+      assert.equal(gasInputError.isInError, false)
+    })
+  })
+
+})
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/index.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/index.js
new file mode 100644
index 000000000..61b681e1a
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/index.js
@@ -0,0 +1 @@
+export { default } from './time-remaining.component'
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/index.scss b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/index.scss
new file mode 100644
index 000000000..e2115af7f
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/index.scss
@@ -0,0 +1,17 @@
+.time-remaining {
+  color: #313A5E;
+  font-size: 16px;
+
+  .minutes-num, .seconds-num {
+    font-size: 16px;
+  }
+
+  .seconds-num {
+    margin-left: 7px;
+    font-size: 16px;
+  }
+
+  .minutes-label, .seconds-label {
+    font-size: 16px;
+  }
+}
\ No newline at end of file
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/tests/time-remaining-component.test.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/tests/time-remaining-component.test.js
new file mode 100644
index 000000000..d8490272f
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/tests/time-remaining-component.test.js
@@ -0,0 +1,30 @@
+import React from 'react'
+import assert from 'assert'
+import shallow from '../../../../../../../lib/shallow-with-context'
+import TimeRemaining from '../time-remaining.component.js'
+
+describe('TimeRemaining Component', function () {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<TimeRemaining
+      milliseconds={495000}
+    />)
+  })
+
+  describe('render()', () => {
+    it('should render the time-remaining root node', () => {
+      assert(wrapper.hasClass('time-remaining'))
+    })
+
+    it('should render minutes and seconds numbers and labels', () => {
+      const timeRemainingChildren = wrapper.children()
+      assert.equal(timeRemainingChildren.length, 4)
+      assert.equal(timeRemainingChildren.at(0).text(), 8)
+      assert.equal(timeRemainingChildren.at(1).text(), 'minutesShorthand')
+      assert.equal(timeRemainingChildren.at(2).text(), 15)
+      assert.equal(timeRemainingChildren.at(3).text(), 'secondsShorthand')
+    })
+  })
+
+})
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/time-remaining.component.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/time-remaining.component.js
new file mode 100644
index 000000000..826d41f9c
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/time-remaining.component.js
@@ -0,0 +1,33 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { getTimeBreakdown } from './time-remaining.utils'
+
+export default class TimeRemaining extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    milliseconds: PropTypes.number,
+  }
+
+  render () {
+    const {
+      milliseconds,
+    } = this.props
+
+    const {
+      minutes,
+      seconds,
+    } = getTimeBreakdown(milliseconds)
+
+    return (
+      <div className="time-remaining">
+        <span className="minutes-num">{minutes}</span>
+        <span className="minutes-label">{this.context.t('minutesShorthand')}</span>
+        <span className="seconds-num">{seconds}</span>
+        <span className="seconds-label">{this.context.t('secondsShorthand')}</span>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/time-remaining.utils.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/time-remaining.utils.js
new file mode 100644
index 000000000..cf43e0acb
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/time-remaining.utils.js
@@ -0,0 +1,11 @@
+function getTimeBreakdown (milliseconds) {
+  return {
+    hours: Math.floor(milliseconds / 3600000),
+    minutes: Math.floor((milliseconds % 3600000) / 60000),
+    seconds: Math.floor((milliseconds % 60000) / 1000),
+  }
+}
+
+module.exports = {
+  getTimeBreakdown,
+}
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js
new file mode 100644
index 000000000..264d038da
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js
@@ -0,0 +1,34 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import Loading from '../../../loading-screen'
+import GasPriceButtonGroup from '../../gas-price-button-group'
+
+export default class BasicTabContent extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    gasPriceButtonGroupProps: PropTypes.object,
+  }
+
+  render () {
+    const { gasPriceButtonGroupProps } = this.props
+
+    return (
+      <div className="basic-tab-content">
+        <div className="basic-tab-content__title">Estimated Processing Times</div>
+        <div className="basic-tab-content__blurb">Select a higher gas fee to accelerate the processing of your transaction.*</div>
+        {!gasPriceButtonGroupProps.loading
+            ? <GasPriceButtonGroup
+              className="gas-price-button-group--alt"
+              showCheck={true}
+              {...gasPriceButtonGroupProps}
+            />
+            : <Loading />
+        }
+        <div className="basic-tab-content__footer-blurb">* Accelerating a transaction by using a higher gas price increases its chances of getting processed by the network faster, but it is not always guaranteed.</div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/index.js b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/index.js
new file mode 100644
index 000000000..078d50fce
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/index.js
@@ -0,0 +1 @@
+export { default } from './basic-tab-content.component'
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/index.scss b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/index.scss
new file mode 100644
index 000000000..e34e4e328
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/index.scss
@@ -0,0 +1,28 @@
+.basic-tab-content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding-left: 21px;
+  height: 324px;
+  background: #F5F7F8;
+  border-bottom: 1px solid #d2d8dd;
+
+  &__title {
+    margin-top: 19px;
+    font-size: 16px;
+    color: $black;
+  }
+
+  &__blurb {
+    font-size: 12px;
+    color: $black;
+    margin-top: 5px;
+    margin-bottom: 15px;
+  }
+
+  &__footer-blurb {
+    font-size: 12px;
+    color: #979797;
+    margin-top: 15px;
+  }
+}
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/tests/basic-tab-content-component.test.js b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/tests/basic-tab-content-component.test.js
new file mode 100644
index 000000000..25abdd997
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/tests/basic-tab-content-component.test.js
@@ -0,0 +1,82 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import BasicTabContent from '../basic-tab-content.component'
+
+import GasPriceButtonGroup from '../../../gas-price-button-group/'
+import Loading from '../../../../loading-screen'
+
+const mockGasPriceButtonGroupProps = {
+  buttonDataLoading: false,
+  className: 'gas-price-button-group',
+  gasButtonInfo: [
+    {
+      feeInPrimaryCurrency: '$0.52',
+      feeInSecondaryCurrency: '0.0048 ETH',
+      timeEstimate: '~ 1 min 0 sec',
+      priceInHexWei: '0xa1b2c3f',
+    },
+    {
+      feeInPrimaryCurrency: '$0.39',
+      feeInSecondaryCurrency: '0.004 ETH',
+      timeEstimate: '~ 1 min 30 sec',
+      priceInHexWei: '0xa1b2c39',
+    },
+    {
+      feeInPrimaryCurrency: '$0.30',
+      feeInSecondaryCurrency: '0.00354 ETH',
+      timeEstimate: '~ 2 min 1 sec',
+      priceInHexWei: '0xa1b2c30',
+    },
+  ],
+  handleGasPriceSelection: newPrice => console.log('NewPrice: ', newPrice),
+  noButtonActiveByDefault: true,
+  showCheck: true,
+}
+
+describe('BasicTabContent Component', function () {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<BasicTabContent
+      gasPriceButtonGroupProps={mockGasPriceButtonGroupProps}
+    />)
+  })
+
+  describe('render', () => {
+    it('should have a title', () => {
+      assert(wrapper.find('.basic-tab-content').childAt(0).hasClass('basic-tab-content__title'))
+    })
+
+    it('should render a GasPriceButtonGroup compenent', () => {
+      assert.equal(wrapper.find(GasPriceButtonGroup).length, 1)
+    })
+
+    it('should pass correct props to GasPriceButtonGroup', () => {
+      const {
+        buttonDataLoading,
+        className,
+        gasButtonInfo,
+        handleGasPriceSelection,
+        noButtonActiveByDefault,
+        showCheck,
+      } = wrapper.find(GasPriceButtonGroup).props()
+      assert.equal(wrapper.find(GasPriceButtonGroup).length, 1)
+      assert.equal(buttonDataLoading, mockGasPriceButtonGroupProps.buttonDataLoading)
+      assert.equal(className, mockGasPriceButtonGroupProps.className)
+      assert.equal(noButtonActiveByDefault, mockGasPriceButtonGroupProps.noButtonActiveByDefault)
+      assert.equal(showCheck, mockGasPriceButtonGroupProps.showCheck)
+      assert.deepEqual(gasButtonInfo, mockGasPriceButtonGroupProps.gasButtonInfo)
+      assert.equal(JSON.stringify(handleGasPriceSelection), JSON.stringify(mockGasPriceButtonGroupProps.handleGasPriceSelection))
+    })
+
+    it('should render a loading component instead of the GasPriceButtonGroup if gasPriceButtonGroupProps.loading is true', () => {
+      wrapper.setProps({
+        gasPriceButtonGroupProps: { ...mockGasPriceButtonGroupProps, loading: true },
+      })
+
+      assert.equal(wrapper.find(GasPriceButtonGroup).length, 0)
+      assert.equal(wrapper.find(Loading).length, 1)
+    })
+  })
+})
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js b/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js
new file mode 100644
index 000000000..64c2be353
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js
@@ -0,0 +1,186 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import PageContainer from '../../page-container'
+import { Tabs, Tab } from '../../tabs'
+import AdvancedTabContent from './advanced-tab-content'
+import BasicTabContent from './basic-tab-content'
+
+export default class GasModalPageContainer extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    hideModal: PropTypes.func,
+    hideBasic: PropTypes.bool,
+    updateCustomGasPrice: PropTypes.func,
+    updateCustomGasLimit: PropTypes.func,
+    customGasPrice: PropTypes.number,
+    customGasLimit: PropTypes.number,
+    fetchBasicGasAndTimeEstimates: PropTypes.func,
+    fetchGasEstimates: PropTypes.func,
+    gasPriceButtonGroupProps: PropTypes.object,
+    infoRowProps: PropTypes.shape({
+      originalTotalFiat: PropTypes.string,
+      originalTotalEth: PropTypes.string,
+      newTotalFiat: PropTypes.string,
+      newTotalEth: PropTypes.string,
+    }),
+    onSubmit: PropTypes.func,
+    customModalGasPriceInHex: PropTypes.string,
+    customModalGasLimitInHex: PropTypes.string,
+    cancelAndClose: PropTypes.func,
+    transactionFee: PropTypes.string,
+    blockTime: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]),
+    customPriceIsSafe: PropTypes.bool,
+    isSpeedUp: PropTypes.bool,
+    disableSave: PropTypes.bool,
+  }
+
+  state = {}
+
+  componentDidMount () {
+    const promise = this.props.hideBasic
+      ? Promise.resolve(this.props.blockTime)
+      : this.props.fetchBasicGasAndTimeEstimates()
+          .then(basicEstimates => basicEstimates.blockTime)
+
+    promise
+      .then(blockTime => {
+        this.props.fetchGasEstimates(blockTime)
+      })
+  }
+
+  renderBasicTabContent (gasPriceButtonGroupProps) {
+    return (
+      <BasicTabContent
+        gasPriceButtonGroupProps={gasPriceButtonGroupProps}
+      />
+    )
+  }
+
+  renderAdvancedTabContent ({
+    convertThenUpdateCustomGasPrice,
+    convertThenUpdateCustomGasLimit,
+    customGasPrice,
+    customGasLimit,
+    newTotalFiat,
+    gasChartProps,
+    currentTimeEstimate,
+    insufficientBalance,
+    gasEstimatesLoading,
+    customPriceIsSafe,
+    isSpeedUp,
+  }) {
+    const { transactionFee } = this.props
+    return (
+      <AdvancedTabContent
+        updateCustomGasPrice={convertThenUpdateCustomGasPrice}
+        updateCustomGasLimit={convertThenUpdateCustomGasLimit}
+        customGasPrice={customGasPrice}
+        customGasLimit={customGasLimit}
+        timeRemaining={currentTimeEstimate}
+        transactionFee={transactionFee}
+        totalFee={newTotalFiat}
+        gasChartProps={gasChartProps}
+        insufficientBalance={insufficientBalance}
+        gasEstimatesLoading={gasEstimatesLoading}
+        customPriceIsSafe={customPriceIsSafe}
+        isSpeedUp={isSpeedUp}
+      />
+    )
+  }
+
+  renderInfoRows (newTotalFiat, newTotalEth, sendAmount, transactionFee) {
+    return (
+      <div className="gas-modal-content__info-row-wrapper">
+        <div className="gas-modal-content__info-row">
+          <div className="gas-modal-content__info-row__send-info">
+            <span className="gas-modal-content__info-row__send-info__label">{this.context.t('sendAmount')}</span>
+            <span className="gas-modal-content__info-row__send-info__value">{sendAmount}</span>
+          </div>
+          <div className="gas-modal-content__info-row__transaction-info">
+            <span className={'gas-modal-content__info-row__transaction-info__label'}>{this.context.t('transactionFee')}</span>
+            <span className="gas-modal-content__info-row__transaction-info__value">{transactionFee}</span>
+          </div>
+          <div className="gas-modal-content__info-row__total-info">
+            <span className="gas-modal-content__info-row__total-info__label">{this.context.t('newTotal')}</span>
+            <span className="gas-modal-content__info-row__total-info__value">{newTotalEth}</span>
+          </div>
+          <div className="gas-modal-content__info-row__fiat-total-info">
+            <span className="gas-modal-content__info-row__fiat-total-info__value">{newTotalFiat}</span>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  renderTabs ({
+    originalTotalFiat,
+    originalTotalEth,
+    newTotalFiat,
+    newTotalEth,
+    sendAmount,
+    transactionFee,
+  },
+  {
+    gasPriceButtonGroupProps,
+    hideBasic,
+    ...advancedTabProps
+  }) {
+    let tabsToRender = [
+      { name: 'basic', content: this.renderBasicTabContent(gasPriceButtonGroupProps) },
+      { name: 'advanced', content: this.renderAdvancedTabContent(advancedTabProps) },
+    ]
+
+    if (hideBasic) {
+      tabsToRender = tabsToRender.slice(1)
+    }
+
+    return (
+      <Tabs>
+        {tabsToRender.map(({ name, content }, i) => <Tab name={this.context.t(name)} key={`gas-modal-tab-${i}`}>
+            <div className="gas-modal-content">
+              { content }
+              { this.renderInfoRows(newTotalFiat, newTotalEth, sendAmount, transactionFee) }
+            </div>
+          </Tab>
+        )}
+      </Tabs>
+    )
+  }
+
+  render () {
+    const {
+      cancelAndClose,
+      infoRowProps,
+      onSubmit,
+      customModalGasPriceInHex,
+      customModalGasLimitInHex,
+      disableSave,
+      ...tabProps
+    } = this.props
+
+    return (
+      <div className="gas-modal-page-container">
+        <PageContainer
+          title={this.context.t('customGas')}
+          subtitle={this.context.t('customGasSubTitle')}
+          tabsComponent={this.renderTabs(infoRowProps, tabProps)}
+          disabled={disableSave}
+          onCancel={() => cancelAndClose()}
+          onClose={() => cancelAndClose()}
+          onSubmit={() => {
+            onSubmit(customModalGasLimitInHex, customModalGasPriceInHex)
+          }}
+          submitText={this.context.t('save')}
+          headerCloseText={'Close'}
+          hideCancel={true}
+        />
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js b/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
new file mode 100644
index 000000000..dde0f2b94
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
@@ -0,0 +1,286 @@
+import { connect } from 'react-redux'
+import { pipe, partialRight } from 'ramda'
+import GasModalPageContainer from './gas-modal-page-container.component'
+import {
+  hideModal,
+  setGasLimit,
+  setGasPrice,
+  createSpeedUpTransaction,
+  hideSidebar,
+} from '../../../actions'
+import {
+  setCustomGasPrice,
+  setCustomGasLimit,
+  resetCustomData,
+  setCustomTimeEstimate,
+  fetchGasEstimates,
+  fetchBasicGasAndTimeEstimates,
+} from '../../../ducks/gas.duck'
+import {
+  hideGasButtonGroup,
+} from '../../../ducks/send.duck'
+import {
+  updateGasAndCalculate,
+} from '../../../ducks/confirm-transaction.duck'
+import {
+  getCurrentCurrency,
+  conversionRateSelector as getConversionRate,
+  getSelectedToken,
+  getCurrentEthBalance,
+} from '../../../selectors.js'
+import {
+  formatTimeEstimate,
+  getFastPriceEstimateInHexWEI,
+  getBasicGasEstimateLoadingStatus,
+  getGasEstimatesLoadingStatus,
+  getCustomGasLimit,
+  getCustomGasPrice,
+  getDefaultActiveButtonIndex,
+  getEstimatedGasPrices,
+  getEstimatedGasTimes,
+  getRenderableBasicEstimateData,
+  getBasicGasEstimateBlockTime,
+  isCustomPriceSafe,
+} from '../../../selectors/custom-gas'
+import {
+  submittedPendingTransactionsSelector,
+} from '../../../selectors/transactions'
+import {
+  formatCurrency,
+} from '../../../helpers/confirm-transaction/util'
+import {
+  addHexWEIsToDec,
+  decEthToConvertedCurrency as ethTotalToConvertedCurrency,
+  decGWEIToHexWEI,
+  hexWEIToDecGWEI,
+} from '../../../helpers/conversions.util'
+import {
+  formatETHFee,
+} from '../../../helpers/formatters'
+import {
+  calcGasTotal,
+  isBalanceSufficient,
+} from '../../send/send.utils'
+import { addHexPrefix } from 'ethereumjs-util'
+import { getAdjacentGasPrices, extrapolateY } from '../gas-price-chart/gas-price-chart.utils'
+
+const mapStateToProps = (state, ownProps) => {
+  const { transaction = {} } = ownProps
+  const buttonDataLoading = getBasicGasEstimateLoadingStatus(state)
+  const gasEstimatesLoading = getGasEstimatesLoadingStatus(state)
+
+  const { gasPrice: currentGasPrice, gas: currentGasLimit, value } = getTxParams(state, transaction.id)
+  const customModalGasPriceInHex = getCustomGasPrice(state) || currentGasPrice
+  const customModalGasLimitInHex = getCustomGasLimit(state) || currentGasLimit
+  const gasTotal = calcGasTotal(customModalGasLimitInHex, customModalGasPriceInHex)
+
+  const customGasTotal = calcGasTotal(customModalGasLimitInHex, customModalGasPriceInHex)
+
+  const gasButtonInfo = getRenderableBasicEstimateData(state)
+
+  const currentCurrency = getCurrentCurrency(state)
+  const conversionRate = getConversionRate(state)
+
+  const newTotalFiat = addHexWEIsToRenderableFiat(value, customGasTotal, currentCurrency, conversionRate)
+
+  const hideBasic = state.appState.modal.modalState.props.hideBasic
+
+  const customGasPrice = calcCustomGasPrice(customModalGasPriceInHex)
+
+  const gasPrices = getEstimatedGasPrices(state)
+  const estimatedTimes = getEstimatedGasTimes(state)
+  const balance = getCurrentEthBalance(state)
+
+  const insufficientBalance = !isBalanceSufficient({
+    amount: value,
+    gasTotal,
+    balance,
+    conversionRate,
+  })
+
+  return {
+    hideBasic,
+    isConfirm: isConfirm(state),
+    customModalGasPriceInHex,
+    customModalGasLimitInHex,
+    customGasPrice,
+    customGasLimit: calcCustomGasLimit(customModalGasLimitInHex),
+    newTotalFiat,
+    currentTimeEstimate: getRenderableTimeEstimate(customGasPrice, gasPrices, estimatedTimes),
+    blockTime: getBasicGasEstimateBlockTime(state),
+    customPriceIsSafe: isCustomPriceSafe(state),
+    gasPriceButtonGroupProps: {
+      buttonDataLoading,
+      defaultActiveButtonIndex: getDefaultActiveButtonIndex(gasButtonInfo, customModalGasPriceInHex),
+      gasButtonInfo,
+    },
+    gasChartProps: {
+      currentPrice: customGasPrice,
+      gasPrices,
+      estimatedTimes,
+      gasPricesMax: gasPrices[gasPrices.length - 1],
+      estimatedTimesMax: estimatedTimes[0],
+    },
+    infoRowProps: {
+      originalTotalFiat: addHexWEIsToRenderableFiat(value, gasTotal, currentCurrency, conversionRate),
+      originalTotalEth: addHexWEIsToRenderableEth(value, gasTotal),
+      newTotalFiat,
+      newTotalEth: addHexWEIsToRenderableEth(value, customGasTotal),
+      transactionFee: addHexWEIsToRenderableEth('0x0', customGasTotal),
+      sendAmount: addHexWEIsToRenderableEth(value, '0x0'),
+    },
+    isSpeedUp: transaction.status === 'submitted',
+    txId: transaction.id,
+    insufficientBalance,
+    gasEstimatesLoading,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  const updateCustomGasPrice = newPrice => dispatch(setCustomGasPrice(addHexPrefix(newPrice)))
+
+  return {
+    cancelAndClose: () => {
+      dispatch(resetCustomData())
+      dispatch(hideModal())
+    },
+    hideModal: () => dispatch(hideModal()),
+    updateCustomGasPrice,
+    convertThenUpdateCustomGasPrice: newPrice => updateCustomGasPrice(decGWEIToHexWEI(newPrice)),
+    convertThenUpdateCustomGasLimit: newLimit => dispatch(setCustomGasLimit(addHexPrefix(newLimit.toString(16)))),
+    setGasData: (newLimit, newPrice) => {
+      dispatch(setGasLimit(newLimit))
+      dispatch(setGasPrice(newPrice))
+    },
+    updateConfirmTxGasAndCalculate: (gasLimit, gasPrice) => {
+      updateCustomGasPrice(gasPrice)
+      dispatch(setCustomGasLimit(addHexPrefix(gasLimit.toString(16))))
+      return dispatch(updateGasAndCalculate({ gasLimit, gasPrice }))
+    },
+    createSpeedUpTransaction: (txId, gasPrice) => {
+      return dispatch(createSpeedUpTransaction(txId, gasPrice))
+    },
+    hideGasButtonGroup: () => dispatch(hideGasButtonGroup()),
+    setCustomTimeEstimate: (timeEstimateInSeconds) => dispatch(setCustomTimeEstimate(timeEstimateInSeconds)),
+    hideSidebar: () => dispatch(hideSidebar()),
+    fetchGasEstimates: (blockTime) => dispatch(fetchGasEstimates(blockTime)),
+    fetchBasicGasAndTimeEstimates: () => dispatch(fetchBasicGasAndTimeEstimates()),
+  }
+}
+
+const mergeProps = (stateProps, dispatchProps, ownProps) => {
+  const { gasPriceButtonGroupProps, isConfirm, txId, isSpeedUp, insufficientBalance, customGasPrice } = stateProps
+  const {
+    updateCustomGasPrice: dispatchUpdateCustomGasPrice,
+    hideGasButtonGroup: dispatchHideGasButtonGroup,
+    setGasData: dispatchSetGasData,
+    updateConfirmTxGasAndCalculate: dispatchUpdateConfirmTxGasAndCalculate,
+    createSpeedUpTransaction: dispatchCreateSpeedUpTransaction,
+    hideSidebar: dispatchHideSidebar,
+    cancelAndClose: dispatchCancelAndClose,
+    hideModal: dispatchHideModal,
+    ...otherDispatchProps
+  } = dispatchProps
+
+  return {
+    ...stateProps,
+    ...otherDispatchProps,
+    ...ownProps,
+    onSubmit: (gasLimit, gasPrice) => {
+      if (isConfirm) {
+        dispatchUpdateConfirmTxGasAndCalculate(gasLimit, gasPrice)
+        dispatchHideModal()
+      } else if (isSpeedUp) {
+        dispatchCreateSpeedUpTransaction(txId, gasPrice)
+        dispatchHideSidebar()
+        dispatchCancelAndClose()
+      } else {
+        dispatchSetGasData(gasLimit, gasPrice)
+        dispatchHideGasButtonGroup()
+        dispatchCancelAndClose()
+      }
+    },
+    gasPriceButtonGroupProps: {
+      ...gasPriceButtonGroupProps,
+      handleGasPriceSelection: dispatchUpdateCustomGasPrice,
+    },
+    cancelAndClose: () => {
+      dispatchCancelAndClose()
+      if (isSpeedUp) {
+        dispatchHideSidebar()
+      }
+    },
+    disableSave: insufficientBalance || (isSpeedUp && customGasPrice === 0),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(GasModalPageContainer)
+
+function isConfirm (state) {
+  return Boolean(Object.keys(state.confirmTransaction.txData).length)
+}
+
+function calcCustomGasPrice (customGasPriceInHex) {
+  return Number(hexWEIToDecGWEI(customGasPriceInHex))
+}
+
+function calcCustomGasLimit (customGasLimitInHex) {
+  return parseInt(customGasLimitInHex, 16)
+}
+
+function getTxParams (state, transactionId) {
+  const { confirmTransaction: { txData }, metamask: { send } } = state
+  const pendingTransactions = submittedPendingTransactionsSelector(state)
+  const pendingTransaction = pendingTransactions.find(({ id }) => id === transactionId)
+  const { txParams: pendingTxParams } = pendingTransaction || {}
+  return txData.txParams || pendingTxParams || {
+    from: send.from,
+    gas: send.gasLimit,
+    gasPrice: send.gasPrice || getFastPriceEstimateInHexWEI(state, true),
+    to: send.to,
+    value: getSelectedToken(state) ? '0x0' : send.amount,
+  }
+}
+
+function addHexWEIsToRenderableEth (aHexWEI, bHexWEI) {
+  return pipe(
+    addHexWEIsToDec,
+    formatETHFee
+  )(aHexWEI, bHexWEI)
+}
+
+function addHexWEIsToRenderableFiat (aHexWEI, bHexWEI, convertedCurrency, conversionRate) {
+  return pipe(
+    addHexWEIsToDec,
+    partialRight(ethTotalToConvertedCurrency, [convertedCurrency, conversionRate]),
+    partialRight(formatCurrency, [convertedCurrency]),
+  )(aHexWEI, bHexWEI)
+}
+
+function getRenderableTimeEstimate (currentGasPrice, gasPrices, estimatedTimes) {
+  const minGasPrice = gasPrices[0]
+  const maxGasPrice = gasPrices[gasPrices.length - 1]
+  let priceForEstimation = currentGasPrice
+  if (currentGasPrice < minGasPrice) {
+    priceForEstimation = minGasPrice
+  } else if (currentGasPrice > maxGasPrice) {
+    priceForEstimation = maxGasPrice
+  }
+
+  const {
+    closestLowerValueIndex,
+    closestHigherValueIndex,
+    closestHigherValue,
+    closestLowerValue,
+  } = getAdjacentGasPrices({ gasPrices, priceToPosition: priceForEstimation })
+
+  const newTimeEstimate = extrapolateY({
+    higherY: estimatedTimes[closestHigherValueIndex],
+    lowerY: estimatedTimes[closestLowerValueIndex],
+    higherX: closestHigherValue,
+    lowerX: closestLowerValue,
+    xForExtrapolation: priceForEstimation,
+  })
+
+  return formatTimeEstimate(newTimeEstimate, currentGasPrice > maxGasPrice, currentGasPrice < minGasPrice)
+}
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/index.js b/ui/app/components/gas-customization/gas-modal-page-container/index.js
new file mode 100644
index 000000000..ec0ebad22
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-modal-page-container/index.js
@@ -0,0 +1 @@
+export { default } from './gas-modal-page-container.container'
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/index.scss b/ui/app/components/gas-customization/gas-modal-page-container/index.scss
new file mode 100644
index 000000000..efba24e02
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-modal-page-container/index.scss
@@ -0,0 +1,148 @@
+@import './advanced-tab-content/index';
+@import './basic-tab-content/index';
+
+.gas-modal-page-container {
+  .page-container {
+    max-width: 391px;
+    min-height: 585px;
+    overflow-y: initial;
+
+    @media screen and (max-width: $break-small) {
+      max-width: 344px;
+
+      &__content {
+        display: flex;
+        overflow-y: initial;
+      }
+    }
+
+    &__header {
+      padding: 0px;
+      padding-top: 16px;
+
+      &--no-padding-bottom {
+        padding-bottom: 0;
+      }
+    }
+
+    &__footer {
+      header {
+        padding-top: 12px;
+        padding-bottom: 12px;
+      }
+    }
+
+    &__header-close-text {
+      font-size: 14px;
+      color: #4EADE7;
+      position: absolute;
+      top: 16px;
+      right: 16px;
+      cursor: pointer;
+      overflow: hidden;
+    }
+
+    &__title {
+      color: $black;
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 16px;
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+      margin-right: 0;
+    }
+
+    &__subtitle {
+      display: none;
+    }
+
+    &__tabs {
+      margin-top: 0px;
+    }
+
+    &__tab {
+      width: 100%;
+      font-size: 14px;
+
+      &:last-of-type {
+        margin-right: 0;
+      }
+
+      &--selected {
+        color: $curious-blue;
+        border-bottom: 2px solid $curious-blue;
+      }
+    }
+  }
+}
+
+.gas-modal-content {
+  @media screen and (max-width: $break-small) {
+    width: 100%;
+  }
+
+  &__basic-tab {
+    height: 219px;
+  }
+
+
+  &__info-row, &__info-row--fade {
+    width: 100%;
+    background: $polar;
+    padding: 15px 21px;
+    display: flex;
+    flex-flow: column;
+    color: $scorpion;
+    font-size: 12px;
+
+    @media screen and (max-width: $break-small) {
+      padding: 4px 21px;
+    }
+
+    &__send-info, &__transaction-info, &__total-info, &__fiat-total-info {
+      display: flex;
+      flex-flow: row;
+      justify-content: space-between;
+    }
+
+    &__fiat-total-info {
+      justify-content: flex-end;
+    }
+
+    &__total-info {
+      &__label {
+        font-size: 16px;
+
+        @media screen and (max-width: $break-small) {
+          font-size: 14px;
+        }
+      }
+
+      &__value {
+        font-size: 16px;
+        font-weight: bold;
+
+        @media screen and (max-width: $break-small) {
+          font-size: 14px;
+        }
+      }
+    }
+
+    &__transaction-info, &__send-info {
+      &__label {
+        font-size: 12px;
+      }
+
+      &__value {
+        font-size: 14px;
+      }
+    }
+  }
+
+  &__info-row--fade {
+    background: white;
+    color: $dusty-gray;
+    border-top: 1px solid $mischka;
+  }
+}
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-component.test.js b/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-component.test.js
new file mode 100644
index 000000000..f068c40d0
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-component.test.js
@@ -0,0 +1,274 @@
+import React from 'react'
+import assert from 'assert'
+import shallow from '../../../../../lib/shallow-with-context'
+import sinon from 'sinon'
+import GasModalPageContainer from '../gas-modal-page-container.component.js'
+import timeout from '../../../../../lib/test-timeout'
+
+import PageContainer from '../../../page-container'
+
+import { Tab } from '../../../tabs'
+
+const mockBasicGasEstimates = {
+  blockTime: 'mockBlockTime',
+}
+
+const propsMethodSpies = {
+  cancelAndClose: sinon.spy(),
+  onSubmit: sinon.spy(),
+  fetchBasicGasAndTimeEstimates: sinon.stub().returns(Promise.resolve(mockBasicGasEstimates)),
+  fetchGasEstimates: sinon.spy(),
+}
+
+const mockGasPriceButtonGroupProps = {
+  buttonDataLoading: false,
+  className: 'gas-price-button-group',
+  gasButtonInfo: [
+    {
+      feeInPrimaryCurrency: '$0.52',
+      feeInSecondaryCurrency: '0.0048 ETH',
+      timeEstimate: '~ 1 min 0 sec',
+      priceInHexWei: '0xa1b2c3f',
+    },
+    {
+      feeInPrimaryCurrency: '$0.39',
+      feeInSecondaryCurrency: '0.004 ETH',
+      timeEstimate: '~ 1 min 30 sec',
+      priceInHexWei: '0xa1b2c39',
+    },
+    {
+      feeInPrimaryCurrency: '$0.30',
+      feeInSecondaryCurrency: '0.00354 ETH',
+      timeEstimate: '~ 2 min 1 sec',
+      priceInHexWei: '0xa1b2c30',
+    },
+  ],
+  handleGasPriceSelection: 'mockSelectionFunction',
+  noButtonActiveByDefault: true,
+  showCheck: true,
+  newTotalFiat: 'mockNewTotalFiat',
+  newTotalEth: 'mockNewTotalEth',
+}
+const mockInfoRowProps = {
+  originalTotalFiat: 'mockOriginalTotalFiat',
+  originalTotalEth: 'mockOriginalTotalEth',
+  newTotalFiat: 'mockNewTotalFiat',
+  newTotalEth: 'mockNewTotalEth',
+  sendAmount: 'mockSendAmount',
+  transactionFee: 'mockTransactionFee',
+}
+
+const GP = GasModalPageContainer.prototype
+describe('GasModalPageContainer Component', function () {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<GasModalPageContainer
+      cancelAndClose={propsMethodSpies.cancelAndClose}
+      onSubmit={propsMethodSpies.onSubmit}
+      fetchBasicGasAndTimeEstimates={propsMethodSpies.fetchBasicGasAndTimeEstimates}
+      fetchGasEstimates={propsMethodSpies.fetchGasEstimates}
+      updateCustomGasPrice={() => 'mockupdateCustomGasPrice'}
+      updateCustomGasLimit={() => 'mockupdateCustomGasLimit'}
+      customGasPrice={21}
+      customGasLimit={54321}
+      gasPriceButtonGroupProps={mockGasPriceButtonGroupProps}
+      infoRowProps={mockInfoRowProps}
+      currentTimeEstimate={'1 min 31 sec'}
+      customGasPriceInHex={'mockCustomGasPriceInHex'}
+      customGasLimitInHex={'mockCustomGasLimitInHex'}
+      insufficientBalance={false}
+      disableSave={false}
+    />, { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } })
+  })
+
+  afterEach(() => {
+    propsMethodSpies.cancelAndClose.resetHistory()
+  })
+
+  describe('componentDidMount', () => {
+    it('should call props.fetchBasicGasAndTimeEstimates', () => {
+      propsMethodSpies.fetchBasicGasAndTimeEstimates.resetHistory()
+      assert.equal(propsMethodSpies.fetchBasicGasAndTimeEstimates.callCount, 0)
+      wrapper.instance().componentDidMount()
+      assert.equal(propsMethodSpies.fetchBasicGasAndTimeEstimates.callCount, 1)
+    })
+
+    it('should call props.fetchGasEstimates with the block time returned by fetchBasicGasAndTimeEstimates', async () => {
+      propsMethodSpies.fetchGasEstimates.resetHistory()
+      assert.equal(propsMethodSpies.fetchGasEstimates.callCount, 0)
+      wrapper.instance().componentDidMount()
+      await timeout(250)
+      assert.equal(propsMethodSpies.fetchGasEstimates.callCount, 1)
+      assert.equal(propsMethodSpies.fetchGasEstimates.getCall(0).args[0], 'mockBlockTime')
+    })
+  })
+
+  describe('render', () => {
+    it('should render a PageContainer compenent', () => {
+      assert.equal(wrapper.find(PageContainer).length, 1)
+    })
+
+    it('should pass correct props to PageContainer', () => {
+      const {
+        title,
+        subtitle,
+        disabled,
+      } = wrapper.find(PageContainer).props()
+      assert.equal(title, 'customGas')
+      assert.equal(subtitle, 'customGasSubTitle')
+      assert.equal(disabled, false)
+    })
+
+    it('should pass the correct onCancel and onClose methods to PageContainer', () => {
+      const {
+        onCancel,
+        onClose,
+      } = wrapper.find(PageContainer).props()
+      assert.equal(propsMethodSpies.cancelAndClose.callCount, 0)
+      onCancel()
+      assert.equal(propsMethodSpies.cancelAndClose.callCount, 1)
+      onClose()
+      assert.equal(propsMethodSpies.cancelAndClose.callCount, 2)
+    })
+
+    it('should pass the correct renderTabs property to PageContainer', () => {
+      sinon.stub(GP, 'renderTabs').returns('mockTabs')
+      const renderTabsWrapperTester = shallow(<GasModalPageContainer
+        fetchBasicGasAndTimeEstimates={propsMethodSpies.fetchBasicGasAndTimeEstimates}
+        fetchGasEstimates={propsMethodSpies.fetchGasEstimates}
+      />, { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } })
+      const { tabsComponent } = renderTabsWrapperTester.find(PageContainer).props()
+      assert.equal(tabsComponent, 'mockTabs')
+      GasModalPageContainer.prototype.renderTabs.restore()
+    })
+  })
+
+  describe('renderTabs', () => {
+    beforeEach(() => {
+      sinon.spy(GP, 'renderBasicTabContent')
+      sinon.spy(GP, 'renderAdvancedTabContent')
+      sinon.spy(GP, 'renderInfoRows')
+    })
+
+    afterEach(() => {
+      GP.renderBasicTabContent.restore()
+      GP.renderAdvancedTabContent.restore()
+      GP.renderInfoRows.restore()
+    })
+
+    it('should render a Tabs component with "Basic" and "Advanced" tabs', () => {
+      const renderTabsResult = wrapper.instance().renderTabs(mockInfoRowProps, {
+        gasPriceButtonGroupProps: mockGasPriceButtonGroupProps,
+        otherProps: 'mockAdvancedTabProps',
+      })
+      const renderedTabs = shallow(renderTabsResult)
+      assert.equal(renderedTabs.props().className, 'tabs')
+
+      const tabs = renderedTabs.find(Tab)
+      assert.equal(tabs.length, 2)
+
+      assert.equal(tabs.at(0).props().name, 'basic')
+      assert.equal(tabs.at(1).props().name, 'advanced')
+
+      assert.equal(tabs.at(0).childAt(0).props().className, 'gas-modal-content')
+      assert.equal(tabs.at(1).childAt(0).props().className, 'gas-modal-content')
+    })
+
+    it('should call renderBasicTabContent and renderAdvancedTabContent with the expected props', () => {
+      assert.equal(GP.renderBasicTabContent.callCount, 0)
+      assert.equal(GP.renderAdvancedTabContent.callCount, 0)
+
+      wrapper.instance().renderTabs(mockInfoRowProps, { gasPriceButtonGroupProps: mockGasPriceButtonGroupProps, otherProps: 'mockAdvancedTabProps' })
+
+      assert.equal(GP.renderBasicTabContent.callCount, 1)
+      assert.equal(GP.renderAdvancedTabContent.callCount, 1)
+
+      assert.deepEqual(GP.renderBasicTabContent.getCall(0).args[0], mockGasPriceButtonGroupProps)
+      assert.deepEqual(GP.renderAdvancedTabContent.getCall(0).args[0], { otherProps: 'mockAdvancedTabProps' })
+    })
+
+    it('should call renderInfoRows with the expected props', () => {
+      assert.equal(GP.renderInfoRows.callCount, 0)
+
+      wrapper.instance().renderTabs(mockInfoRowProps, { gasPriceButtonGroupProps: mockGasPriceButtonGroupProps, otherProps: 'mockAdvancedTabProps' })
+
+      assert.equal(GP.renderInfoRows.callCount, 2)
+
+      assert.deepEqual(GP.renderInfoRows.getCall(0).args, ['mockNewTotalFiat', 'mockNewTotalEth', 'mockSendAmount', 'mockTransactionFee'])
+      assert.deepEqual(GP.renderInfoRows.getCall(1).args, ['mockNewTotalFiat', 'mockNewTotalEth', 'mockSendAmount', 'mockTransactionFee'])
+    })
+
+    it('should not render the basic tab if hideBasic is true', () => {
+      const renderTabsResult = wrapper.instance().renderTabs(mockInfoRowProps, {
+        gasPriceButtonGroupProps: mockGasPriceButtonGroupProps,
+        otherProps: 'mockAdvancedTabProps',
+        hideBasic: true,
+      })
+
+      const renderedTabs = shallow(renderTabsResult)
+      const tabs = renderedTabs.find(Tab)
+      assert.equal(tabs.length, 1)
+      assert.equal(tabs.at(0).props().name, 'advanced')
+    })
+  })
+
+  describe('renderBasicTabContent', () => {
+    it('should render', () => {
+      const renderBasicTabContentResult = wrapper.instance().renderBasicTabContent(mockGasPriceButtonGroupProps)
+
+      assert.deepEqual(
+        renderBasicTabContentResult.props.gasPriceButtonGroupProps,
+        mockGasPriceButtonGroupProps
+      )
+    })
+  })
+
+  describe('renderAdvancedTabContent', () => {
+    it('should render with the correct props', () => {
+      const renderAdvancedTabContentResult = wrapper.instance().renderAdvancedTabContent({
+        convertThenUpdateCustomGasPrice: () => 'mockConvertThenUpdateCustomGasPrice',
+        convertThenUpdateCustomGasLimit: () => 'mockConvertThenUpdateCustomGasLimit',
+        customGasPrice: 123,
+        customGasLimit: 456,
+        newTotalFiat: '$0.30',
+        currentTimeEstimate: '1 min 31 sec',
+        gasEstimatesLoading: 'mockGasEstimatesLoading',
+      })
+      const advancedTabContentProps = renderAdvancedTabContentResult.props
+      assert.equal(advancedTabContentProps.updateCustomGasPrice(), 'mockConvertThenUpdateCustomGasPrice')
+      assert.equal(advancedTabContentProps.updateCustomGasLimit(), 'mockConvertThenUpdateCustomGasLimit')
+      assert.equal(advancedTabContentProps.customGasPrice, 123)
+      assert.equal(advancedTabContentProps.customGasLimit, 456)
+      assert.equal(advancedTabContentProps.timeRemaining, '1 min 31 sec')
+      assert.equal(advancedTabContentProps.totalFee, '$0.30')
+      assert.equal(advancedTabContentProps.gasEstimatesLoading, 'mockGasEstimatesLoading')
+    })
+  })
+
+  describe('renderInfoRows', () => {
+    it('should render the info rows with the passed data', () => {
+      const baseClassName = 'gas-modal-content__info-row'
+      const renderedInfoRowsContainer = shallow(wrapper.instance().renderInfoRows(
+        'mockNewTotalFiat',
+        ' mockNewTotalEth',
+        ' mockSendAmount',
+        ' mockTransactionFee'
+      ))
+
+      assert(renderedInfoRowsContainer.childAt(0).hasClass(baseClassName))
+
+      const renderedInfoRows = renderedInfoRowsContainer.childAt(0).children()
+      assert.equal(renderedInfoRows.length, 4)
+      assert(renderedInfoRows.at(0).hasClass(`${baseClassName}__send-info`))
+      assert(renderedInfoRows.at(1).hasClass(`${baseClassName}__transaction-info`))
+      assert(renderedInfoRows.at(2).hasClass(`${baseClassName}__total-info`))
+      assert(renderedInfoRows.at(3).hasClass(`${baseClassName}__fiat-total-info`))
+
+      assert.equal(renderedInfoRows.at(0).text(), 'sendAmount mockSendAmount')
+      assert.equal(renderedInfoRows.at(1).text(), 'transactionFee mockTransactionFee')
+      assert.equal(renderedInfoRows.at(2).text(), 'newTotal mockNewTotalEth')
+      assert.equal(renderedInfoRows.at(3).text(), 'mockNewTotalFiat')
+    })
+  })
+})
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js b/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js
new file mode 100644
index 000000000..077ec471d
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js
@@ -0,0 +1,362 @@
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+import sinon from 'sinon'
+
+let mapStateToProps
+let mapDispatchToProps
+let mergeProps
+
+const actionSpies = {
+  hideModal: sinon.spy(),
+  setGasLimit: sinon.spy(),
+  setGasPrice: sinon.spy(),
+}
+
+const gasActionSpies = {
+  setCustomGasPrice: sinon.spy(),
+  setCustomGasLimit: sinon.spy(),
+  resetCustomData: sinon.spy(),
+}
+
+const confirmTransactionActionSpies = {
+  updateGasAndCalculate: sinon.spy(),
+}
+
+const sendActionSpies = {
+  hideGasButtonGroup: sinon.spy(),
+}
+
+proxyquire('../gas-modal-page-container.container.js', {
+  'react-redux': {
+    connect: (ms, md, mp) => {
+      mapStateToProps = ms
+      mapDispatchToProps = md
+      mergeProps = mp
+      return () => ({})
+    },
+  },
+  '../../../selectors/custom-gas': {
+    getBasicGasEstimateLoadingStatus: (s) => `mockBasicGasEstimateLoadingStatus:${Object.keys(s).length}`,
+    getRenderableBasicEstimateData: (s) => `mockRenderableBasicEstimateData:${Object.keys(s).length}`,
+    getDefaultActiveButtonIndex: (a, b) => a + b,
+  },
+  '../../../actions': actionSpies,
+  '../../../ducks/gas.duck': gasActionSpies,
+  '../../../ducks/confirm-transaction.duck': confirmTransactionActionSpies,
+  '../../../ducks/send.duck': sendActionSpies,
+  '../../../selectors.js': {
+    getCurrentEthBalance: (state) => state.metamask.balance || '0x0',
+  },
+})
+
+describe('gas-modal-page-container container', () => {
+
+  describe('mapStateToProps()', () => {
+    it('should map the correct properties to props', () => {
+      const baseMockState = {
+        appState: {
+          modal: {
+            modalState: {
+              props: {
+                hideBasic: true,
+              },
+            },
+          },
+        },
+        metamask: {
+          send: {
+            gasLimit: '16',
+            gasPrice: '32',
+            amount: '64',
+          },
+          currentCurrency: 'abc',
+          conversionRate: 50,
+        },
+        gas: {
+          basicEstimates: {
+            blockTime: 12,
+            safeLow: 2,
+          },
+          customData: {
+            limit: 'aaaaaaaa',
+            price: 'ffffffff',
+          },
+          gasEstimatesLoading: false,
+          priceAndTimeEstimates: [
+            { gasprice: 3, expectedTime: 31 },
+            { gasprice: 4, expectedTime: 62 },
+            { gasprice: 5, expectedTime: 93 },
+            { gasprice: 6, expectedTime: 124 },
+          ],
+        },
+        confirmTransaction: {
+          txData: {
+            txParams: {
+              gas: '0x1600000',
+              gasPrice: '0x3200000',
+              value: '0x640000000000000',
+            },
+          },
+        },
+      }
+      const baseExpectedResult = {
+        isConfirm: true,
+        customGasPrice: 4.294967295,
+        customGasLimit: 2863311530,
+        currentTimeEstimate: '~1 min 11 sec',
+        newTotalFiat: '637.41',
+        blockTime: 12,
+        customModalGasLimitInHex: 'aaaaaaaa',
+        customModalGasPriceInHex: 'ffffffff',
+        customPriceIsSafe: true,
+        gasChartProps: {
+          'currentPrice': 4.294967295,
+          estimatedTimes: [31, 62, 93, 124],
+          estimatedTimesMax: '31',
+          gasPrices: [3, 4, 5, 6],
+          gasPricesMax: 6,
+        },
+        gasPriceButtonGroupProps: {
+          buttonDataLoading: 'mockBasicGasEstimateLoadingStatus:4',
+          defaultActiveButtonIndex: 'mockRenderableBasicEstimateData:4ffffffff',
+          gasButtonInfo: 'mockRenderableBasicEstimateData:4',
+        },
+        gasEstimatesLoading: false,
+        hideBasic: true,
+        infoRowProps: {
+          originalTotalFiat: '637.41',
+          originalTotalEth: '12.748189 ETH',
+          newTotalFiat: '637.41',
+          newTotalEth: '12.748189 ETH',
+          sendAmount: '0.45036 ETH',
+          transactionFee: '12.297829 ETH',
+        },
+        insufficientBalance: true,
+        isSpeedUp: false,
+        txId: 34,
+      }
+      const baseMockOwnProps = { transaction: { id: 34 } }
+      const tests = [
+        { mockState: baseMockState, expectedResult: baseExpectedResult, mockOwnProps: baseMockOwnProps },
+        {
+          mockState: Object.assign({}, baseMockState, {
+            metamask: { ...baseMockState.metamask, balance: '0xfffffffffffffffffffff' },
+          }),
+          expectedResult: Object.assign({}, baseExpectedResult, { insufficientBalance: false }),
+          mockOwnProps: baseMockOwnProps,
+        },
+        {
+          mockState: baseMockState,
+          mockOwnProps: Object.assign({}, baseMockOwnProps, {
+            transaction: { id: 34, status: 'submitted' },
+          }),
+          expectedResult: Object.assign({}, baseExpectedResult, { isSpeedUp: true }),
+        },
+      ]
+
+      let result
+      tests.forEach(({ mockState, mockOwnProps, expectedResult}) => {
+        result = mapStateToProps(mockState, mockOwnProps)
+        assert.deepEqual(result, expectedResult)
+      })
+    })
+
+  })
+
+  describe('mapDispatchToProps()', () => {
+    let dispatchSpy
+    let mapDispatchToPropsObject
+
+    beforeEach(() => {
+      dispatchSpy = sinon.spy()
+      mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy)
+    })
+
+    afterEach(() => {
+      actionSpies.hideModal.resetHistory()
+      gasActionSpies.setCustomGasPrice.resetHistory()
+      gasActionSpies.setCustomGasLimit.resetHistory()
+    })
+
+    describe('hideGasButtonGroup()', () => {
+      it('should dispatch a hideGasButtonGroup action', () => {
+        mapDispatchToPropsObject.hideGasButtonGroup()
+        assert(dispatchSpy.calledOnce)
+        assert(sendActionSpies.hideGasButtonGroup.calledOnce)
+      })
+    })
+
+    describe('cancelAndClose()', () => {
+      it('should dispatch a hideModal action', () => {
+        mapDispatchToPropsObject.cancelAndClose()
+        assert(dispatchSpy.calledTwice)
+        assert(actionSpies.hideModal.calledOnce)
+        assert(gasActionSpies.resetCustomData.calledOnce)
+      })
+    })
+
+    describe('updateCustomGasPrice()', () => {
+      it('should dispatch a setCustomGasPrice action with the arg passed to updateCustomGasPrice hex prefixed', () => {
+        mapDispatchToPropsObject.updateCustomGasPrice('ffff')
+        assert(dispatchSpy.calledOnce)
+        assert(gasActionSpies.setCustomGasPrice.calledOnce)
+        assert.equal(gasActionSpies.setCustomGasPrice.getCall(0).args[0], '0xffff')
+      })
+    })
+
+    describe('convertThenUpdateCustomGasPrice()', () => {
+      it('should dispatch a setCustomGasPrice action with the arg passed to convertThenUpdateCustomGasPrice converted to WEI', () => {
+        mapDispatchToPropsObject.convertThenUpdateCustomGasPrice('0xffff')
+        assert(dispatchSpy.calledOnce)
+        assert(gasActionSpies.setCustomGasPrice.calledOnce)
+        assert.equal(gasActionSpies.setCustomGasPrice.getCall(0).args[0], '0x3b9a8e653600')
+      })
+    })
+
+
+    describe('convertThenUpdateCustomGasLimit()', () => {
+      it('should dispatch a setCustomGasLimit action with the arg passed to convertThenUpdateCustomGasLimit converted to hex', () => {
+        mapDispatchToPropsObject.convertThenUpdateCustomGasLimit(16)
+        assert(dispatchSpy.calledOnce)
+        assert(gasActionSpies.setCustomGasLimit.calledOnce)
+        assert.equal(gasActionSpies.setCustomGasLimit.getCall(0).args[0], '0x10')
+      })
+    })
+
+    describe('setGasData()', () => {
+      it('should dispatch a setGasPrice and setGasLimit action with the correct props', () => {
+        mapDispatchToPropsObject.setGasData('ffff', 'aaaa')
+        assert(dispatchSpy.calledTwice)
+        assert(actionSpies.setGasPrice.calledOnce)
+        assert(actionSpies.setGasLimit.calledOnce)
+        assert.equal(actionSpies.setGasLimit.getCall(0).args[0], 'ffff')
+        assert.equal(actionSpies.setGasPrice.getCall(0).args[0], 'aaaa')
+      })
+    })
+
+    describe('updateConfirmTxGasAndCalculate()', () => {
+      it('should dispatch a updateGasAndCalculate action with the correct props', () => {
+        mapDispatchToPropsObject.updateConfirmTxGasAndCalculate('ffff', 'aaaa')
+        assert.equal(dispatchSpy.callCount, 3)
+        assert(confirmTransactionActionSpies.updateGasAndCalculate.calledOnce)
+        assert.deepEqual(confirmTransactionActionSpies.updateGasAndCalculate.getCall(0).args[0], { gasLimit: 'ffff', gasPrice: 'aaaa' })
+      })
+    })
+
+  })
+
+  describe('mergeProps', () => {
+      let stateProps
+      let dispatchProps
+      let ownProps
+
+      beforeEach(() => {
+        stateProps = {
+          gasPriceButtonGroupProps: {
+            someGasPriceButtonGroupProp: 'foo',
+            anotherGasPriceButtonGroupProp: 'bar',
+          },
+          isConfirm: true,
+          someOtherStateProp: 'baz',
+        }
+        dispatchProps = {
+          updateCustomGasPrice: sinon.spy(),
+          hideGasButtonGroup: sinon.spy(),
+          setGasData: sinon.spy(),
+          updateConfirmTxGasAndCalculate: sinon.spy(),
+          someOtherDispatchProp: sinon.spy(),
+          createSpeedUpTransaction: sinon.spy(),
+          hideSidebar: sinon.spy(),
+          hideModal: sinon.spy(),
+          cancelAndClose: sinon.spy(),
+        }
+        ownProps = { someOwnProp: 123 }
+      })
+
+      afterEach(() => {
+        dispatchProps.updateCustomGasPrice.resetHistory()
+        dispatchProps.hideGasButtonGroup.resetHistory()
+        dispatchProps.setGasData.resetHistory()
+        dispatchProps.updateConfirmTxGasAndCalculate.resetHistory()
+        dispatchProps.someOtherDispatchProp.resetHistory()
+        dispatchProps.createSpeedUpTransaction.resetHistory()
+        dispatchProps.hideSidebar.resetHistory()
+        dispatchProps.hideModal.resetHistory()
+      })
+    it('should return the expected props when isConfirm is true', () => {
+      const result = mergeProps(stateProps, dispatchProps, ownProps)
+
+      assert.equal(result.isConfirm, true)
+      assert.equal(result.someOtherStateProp, 'baz')
+      assert.equal(result.gasPriceButtonGroupProps.someGasPriceButtonGroupProp, 'foo')
+      assert.equal(result.gasPriceButtonGroupProps.anotherGasPriceButtonGroupProp, 'bar')
+      assert.equal(result.someOwnProp, 123)
+
+      assert.equal(dispatchProps.updateConfirmTxGasAndCalculate.callCount, 0)
+      assert.equal(dispatchProps.setGasData.callCount, 0)
+      assert.equal(dispatchProps.hideGasButtonGroup.callCount, 0)
+      assert.equal(dispatchProps.hideModal.callCount, 0)
+
+      result.onSubmit()
+
+      assert.equal(dispatchProps.updateConfirmTxGasAndCalculate.callCount, 1)
+      assert.equal(dispatchProps.setGasData.callCount, 0)
+      assert.equal(dispatchProps.hideGasButtonGroup.callCount, 0)
+      assert.equal(dispatchProps.hideModal.callCount, 1)
+
+      assert.equal(dispatchProps.updateCustomGasPrice.callCount, 0)
+      result.gasPriceButtonGroupProps.handleGasPriceSelection()
+      assert.equal(dispatchProps.updateCustomGasPrice.callCount, 1)
+
+      assert.equal(dispatchProps.someOtherDispatchProp.callCount, 0)
+      result.someOtherDispatchProp()
+      assert.equal(dispatchProps.someOtherDispatchProp.callCount, 1)
+    })
+
+    it('should return the expected props when isConfirm is false', () => {
+      const result = mergeProps(Object.assign({}, stateProps, { isConfirm: false }), dispatchProps, ownProps)
+
+      assert.equal(result.isConfirm, false)
+      assert.equal(result.someOtherStateProp, 'baz')
+      assert.equal(result.gasPriceButtonGroupProps.someGasPriceButtonGroupProp, 'foo')
+      assert.equal(result.gasPriceButtonGroupProps.anotherGasPriceButtonGroupProp, 'bar')
+      assert.equal(result.someOwnProp, 123)
+
+      assert.equal(dispatchProps.updateConfirmTxGasAndCalculate.callCount, 0)
+      assert.equal(dispatchProps.setGasData.callCount, 0)
+      assert.equal(dispatchProps.hideGasButtonGroup.callCount, 0)
+      assert.equal(dispatchProps.cancelAndClose.callCount, 0)
+
+      result.onSubmit('mockNewLimit', 'mockNewPrice')
+
+      assert.equal(dispatchProps.updateConfirmTxGasAndCalculate.callCount, 0)
+      assert.equal(dispatchProps.setGasData.callCount, 1)
+      assert.deepEqual(dispatchProps.setGasData.getCall(0).args, ['mockNewLimit', 'mockNewPrice'])
+      assert.equal(dispatchProps.hideGasButtonGroup.callCount, 1)
+      assert.equal(dispatchProps.cancelAndClose.callCount, 1)
+
+      assert.equal(dispatchProps.updateCustomGasPrice.callCount, 0)
+      result.gasPriceButtonGroupProps.handleGasPriceSelection()
+      assert.equal(dispatchProps.updateCustomGasPrice.callCount, 1)
+
+      assert.equal(dispatchProps.someOtherDispatchProp.callCount, 0)
+      result.someOtherDispatchProp()
+      assert.equal(dispatchProps.someOtherDispatchProp.callCount, 1)
+    })
+
+    it('should dispatch the expected actions from obSubmit when isConfirm is false and isSpeedUp is true', () => {
+      const result = mergeProps(Object.assign({}, stateProps, { isSpeedUp: true, isConfirm: false }), dispatchProps, ownProps)
+
+      result.onSubmit()
+
+      assert.equal(dispatchProps.updateConfirmTxGasAndCalculate.callCount, 0)
+      assert.equal(dispatchProps.setGasData.callCount, 0)
+      assert.equal(dispatchProps.hideGasButtonGroup.callCount, 0)
+      assert.equal(dispatchProps.cancelAndClose.callCount, 1)
+
+      assert.equal(dispatchProps.createSpeedUpTransaction.callCount, 1)
+      assert.equal(dispatchProps.hideSidebar.callCount, 1)
+    })
+  })
+
+})
diff --git a/ui/app/components/gas-customization/gas-price-button-group/gas-price-button-group.component.js b/ui/app/components/gas-customization/gas-price-button-group/gas-price-button-group.component.js
new file mode 100644
index 000000000..8ad063b21
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-price-button-group/gas-price-button-group.component.js
@@ -0,0 +1,89 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import ButtonGroup from '../../button-group'
+import Button from '../../button'
+
+const GAS_OBJECT_PROPTYPES_SHAPE = {
+  label: PropTypes.string,
+  feeInPrimaryCurrency: PropTypes.string,
+  feeInSecondaryCurrency: PropTypes.string,
+  timeEstimate: PropTypes.string,
+  priceInHexWei: PropTypes.string,
+}
+
+export default class GasPriceButtonGroup extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    buttonDataLoading: PropTypes.bool,
+    className: PropTypes.string,
+    defaultActiveButtonIndex: PropTypes.number,
+    gasButtonInfo: PropTypes.arrayOf(PropTypes.shape(GAS_OBJECT_PROPTYPES_SHAPE)),
+    handleGasPriceSelection: PropTypes.func,
+    newActiveButtonIndex: PropTypes.number,
+    noButtonActiveByDefault: PropTypes.bool,
+    showCheck: PropTypes.bool,
+  }
+
+  renderButtonContent ({
+    labelKey,
+    feeInPrimaryCurrency,
+    feeInSecondaryCurrency,
+    timeEstimate,
+  }, {
+    className,
+    showCheck,
+  }) {
+    return (<div>
+      { labelKey && <div className={`${className}__label`}>{ this.context.t(labelKey) }</div> }
+      { timeEstimate && <div className={`${className}__time-estimate`}>{ timeEstimate }</div> }
+      { feeInPrimaryCurrency && <div className={`${className}__primary-currency`}>{ feeInPrimaryCurrency }</div> }
+      { feeInSecondaryCurrency && <div className={`${className}__secondary-currency`}>{ feeInSecondaryCurrency }</div> }
+      { showCheck && <div className="button-check-wrapper"><i className="fa fa-check fa-sm" /></div> }
+    </div>)
+  }
+
+  renderButton ({
+    priceInHexWei,
+    ...renderableGasInfo
+  }, {
+    buttonDataLoading,
+    handleGasPriceSelection,
+    ...buttonContentPropsAndFlags
+  }, index) {
+    return (
+      <Button
+        onClick={() => handleGasPriceSelection(priceInHexWei)}
+        key={`gas-price-button-${index}`}
+      >
+        {this.renderButtonContent(renderableGasInfo, buttonContentPropsAndFlags)}
+      </Button>
+    )
+  }
+
+  render () {
+    const {
+      gasButtonInfo,
+      defaultActiveButtonIndex = 1,
+      newActiveButtonIndex,
+      noButtonActiveByDefault = false,
+      buttonDataLoading,
+      ...buttonPropsAndFlags
+    } = this.props
+
+    return (
+      !buttonDataLoading
+        ? <ButtonGroup
+          className={buttonPropsAndFlags.className}
+          defaultActiveButtonIndex={defaultActiveButtonIndex}
+          newActiveButtonIndex={newActiveButtonIndex}
+          noButtonActiveByDefault={noButtonActiveByDefault}
+        >
+          { gasButtonInfo.map((obj, index) => this.renderButton(obj, buttonPropsAndFlags, index)) }
+        </ButtonGroup>
+        : <div className={`${buttonPropsAndFlags.className}__loading-container`}>{ this.context.t('loading') }</div>
+    )
+  }
+}
diff --git a/ui/app/components/gas-customization/gas-price-button-group/index.js b/ui/app/components/gas-customization/gas-price-button-group/index.js
new file mode 100644
index 000000000..775648330
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-price-button-group/index.js
@@ -0,0 +1 @@
+export { default } from './gas-price-button-group.component'
diff --git a/ui/app/components/gas-customization/gas-price-button-group/index.scss b/ui/app/components/gas-customization/gas-price-button-group/index.scss
new file mode 100644
index 000000000..c8b31fc83
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-price-button-group/index.scss
@@ -0,0 +1,235 @@
+.gas-price-button-group {
+  margin-top: 22px;
+  display: flex;
+  justify-content: space-evenly;
+  width: 100%;
+  padding-left: 20px;
+  padding-right: 20px;
+
+  &__primary-currency {
+    font-size: 18px;
+    height: 20.5px;
+    margin-bottom: 7.5px;
+  }
+
+  &__time-estimate {
+    margin-top: 5.5px;
+    color: $silver-chalice;
+    height: 15.4px;
+  }
+
+  &__loading-container {
+    height: 130px;
+  }
+
+  .button-group__button, .button-group__button--active {
+    height: 130px;
+    max-width: 108px;
+    font-size: 12px;
+    flex-direction: column;
+    align-items: center;
+    display: flex;
+    padding-top: 17px;
+    border-radius: 4px;
+    border: 2px solid $spindle;
+    background: $white;
+    color: $scorpion;
+
+    div {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    i {
+      &:last-child {
+        display: none;
+      }
+    }
+  }
+
+  .button-group__button--active {
+    border: 2px solid $curious-blue;
+    color: $scorpion;
+
+    i {
+      &:last-child {
+        display: flex;
+        color: $curious-blue;
+        margin-top: 8px
+      }
+    }
+  }
+}
+
+.gas-price-button-group--small {
+  display: flex;
+  justify-content: stretch;
+  max-width: 260px;
+
+  &__button-fiat-price {
+    font-size: 13px;
+  }
+
+  &__button-label {
+    font-size: 16px;
+  }
+
+  &__label {
+    font-weight: 500;
+  }
+
+  &__primary-currency {
+    font-size: 12px;
+
+    @media screen and (max-width: 575px) {
+      font-size: 10px;
+    }
+  }
+
+  &__secondary-currency {
+    font-size: 12px;
+
+    @media screen and (max-width: 575px) {
+      font-size: 10px;
+    }
+  }
+
+  &__loading-container {
+    height: 78px;
+  }
+
+  .button-group__button, .button-group__button--active {
+    height: 78px;
+    background: white;
+    color: $scorpion;
+    padding-top: 9px;
+    padding-left: 8.5px;
+
+    @media screen and (max-width: $break-small) {
+      padding-left: 4px;
+    }
+
+    div {
+      display: flex;
+      flex-flow: column;
+      align-items: flex-start;
+      justify-content: flex-start;
+    }
+
+    i {
+      &:last-child {
+        display: none;
+      }
+    }
+  }
+
+  .button-group__button--active {
+    color: $white;
+    background: $dodger-blue;
+
+    i {
+      &:last-child {
+        display: flex;
+        color: $curious-blue;
+        margin-top: 10px
+      }
+    }
+  }
+}
+
+.gas-price-button-group--alt {
+  display: flex;
+  justify-content: stretch;
+  width: 95%;
+
+  &__button-fiat-price {
+    font-size: 13px;
+  }
+
+  &__button-label {
+    font-size: 16px;
+  }
+
+  &__label {
+    font-weight: 500;
+    font-size: 10px;
+    text-transform: capitalize;
+  }
+
+  &__primary-currency {
+    font-size: 11px;
+    margin-top: 3px;
+  }
+
+  &__secondary-currency {
+    font-size: 11px;
+  }
+
+  &__loading-container {
+    height: 78px;
+  }
+
+  &__time-estimate {
+    font-size: 14px;
+    font-weight: 500;
+    margin-top: 4px;
+    color: $black;
+  }
+
+  .button-group__button, .button-group__button--active {
+    height: 78px;
+    background: white;
+    color: #2A4055;
+    width: 108px;
+    height: 97px;
+    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.151579);
+    border-radius: 6px;
+    border: none;
+
+    div {
+      display: flex;
+      flex-flow: column;;
+      align-items: flex-start;
+      justify-content: flex-start;
+      position: relative;
+    }
+
+    .button-check-wrapper {
+      display: none;
+    }
+
+    &:first-child {
+      margin-right: 6px;
+    }
+
+    &:last-child {
+      margin-left: 6px;
+    }
+  }
+
+  .button-group__button--active {
+    background: #F7FCFF;
+    border: 2px solid #2C8BDC;
+
+    .button-check-wrapper {
+      height: 16px;
+      width: 16px;
+      border-radius: 8px;
+      position: absolute;
+      top: -11px;
+      right: -10px;
+      background: #D5ECFA;
+      display: flex;
+      flex-flow: row;
+      justify-content: center;
+      align-items: center;
+    }
+
+    i {
+      display: flex;
+      color: $curious-blue;
+      font-size: 12px;
+    }
+  }
+}
diff --git a/ui/app/components/gas-customization/gas-price-button-group/tests/gas-price-button-group-component.test.js b/ui/app/components/gas-customization/gas-price-button-group/tests/gas-price-button-group-component.test.js
new file mode 100644
index 000000000..79f74f8e4
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-price-button-group/tests/gas-price-button-group-component.test.js
@@ -0,0 +1,233 @@
+import React from 'react'
+import assert from 'assert'
+import shallow from '../../../../../lib/shallow-with-context'
+import sinon from 'sinon'
+import GasPriceButtonGroup from '../gas-price-button-group.component'
+
+import ButtonGroup from '../../../button-group/'
+
+const mockGasPriceButtonGroupProps = {
+  buttonDataLoading: false,
+  className: 'gas-price-button-group',
+  gasButtonInfo: [
+    {
+      feeInPrimaryCurrency: '$0.52',
+      feeInSecondaryCurrency: '0.0048 ETH',
+      timeEstimate: '~ 1 min 0 sec',
+      priceInHexWei: '0xa1b2c3f',
+    },
+    {
+      feeInPrimaryCurrency: '$0.39',
+      feeInSecondaryCurrency: '0.004 ETH',
+      timeEstimate: '~ 1 min 30 sec',
+      priceInHexWei: '0xa1b2c39',
+    },
+    {
+      feeInPrimaryCurrency: '$0.30',
+      feeInSecondaryCurrency: '0.00354 ETH',
+      timeEstimate: '~ 2 min 1 sec',
+      priceInHexWei: '0xa1b2c30',
+    },
+  ],
+  handleGasPriceSelection: sinon.spy(),
+  noButtonActiveByDefault: true,
+  defaultActiveButtonIndex: 2,
+  showCheck: true,
+}
+
+const mockButtonPropsAndFlags = Object.assign({}, {
+  className: mockGasPriceButtonGroupProps.className,
+  handleGasPriceSelection: mockGasPriceButtonGroupProps.handleGasPriceSelection,
+  showCheck: mockGasPriceButtonGroupProps.showCheck,
+})
+
+sinon.spy(GasPriceButtonGroup.prototype, 'renderButton')
+sinon.spy(GasPriceButtonGroup.prototype, 'renderButtonContent')
+
+describe('GasPriceButtonGroup Component', function () {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<GasPriceButtonGroup
+      {...mockGasPriceButtonGroupProps}
+    />)
+  })
+
+  afterEach(() => {
+    GasPriceButtonGroup.prototype.renderButton.resetHistory()
+    GasPriceButtonGroup.prototype.renderButtonContent.resetHistory()
+    mockGasPriceButtonGroupProps.handleGasPriceSelection.resetHistory()
+  })
+
+  describe('render', () => {
+    it('should render a ButtonGroup', () => {
+      assert(wrapper.is(ButtonGroup))
+    })
+
+    it('should render the correct props on the ButtonGroup', () => {
+      const {
+        className,
+        defaultActiveButtonIndex,
+        noButtonActiveByDefault,
+      } = wrapper.props()
+      assert.equal(className, 'gas-price-button-group')
+      assert.equal(defaultActiveButtonIndex, 2)
+      assert.equal(noButtonActiveByDefault, true)
+    })
+
+    function renderButtonArgsTest (i, mockButtonPropsAndFlags) {
+      assert.deepEqual(
+        GasPriceButtonGroup.prototype.renderButton.getCall(i).args,
+        [
+          Object.assign({}, mockGasPriceButtonGroupProps.gasButtonInfo[i]),
+          mockButtonPropsAndFlags,
+          i,
+        ]
+      )
+    }
+
+    it('should call this.renderButton 3 times, with the correct args', () => {
+      assert.equal(GasPriceButtonGroup.prototype.renderButton.callCount, 3)
+      renderButtonArgsTest(0, mockButtonPropsAndFlags)
+      renderButtonArgsTest(1, mockButtonPropsAndFlags)
+      renderButtonArgsTest(2, mockButtonPropsAndFlags)
+    })
+
+    it('should show loading if buttonDataLoading', () => {
+      wrapper.setProps({ buttonDataLoading: true })
+      assert(wrapper.is('div'))
+      assert(wrapper.hasClass('gas-price-button-group__loading-container'))
+      assert.equal(wrapper.text(), 'loading')
+    })
+  })
+
+  describe('renderButton', () => {
+    let wrappedRenderButtonResult
+
+    beforeEach(() => {
+      GasPriceButtonGroup.prototype.renderButtonContent.resetHistory()
+      const renderButtonResult = GasPriceButtonGroup.prototype.renderButton(
+        Object.assign({}, mockGasPriceButtonGroupProps.gasButtonInfo[0]),
+        mockButtonPropsAndFlags
+      )
+      wrappedRenderButtonResult = shallow(renderButtonResult)
+    })
+
+    it('should render a button', () => {
+      assert.equal(wrappedRenderButtonResult.type(), 'button')
+    })
+
+    it('should call the correct method when clicked', () => {
+      assert.equal(mockGasPriceButtonGroupProps.handleGasPriceSelection.callCount, 0)
+      wrappedRenderButtonResult.props().onClick()
+      assert.equal(mockGasPriceButtonGroupProps.handleGasPriceSelection.callCount, 1)
+      assert.deepEqual(
+        mockGasPriceButtonGroupProps.handleGasPriceSelection.getCall(0).args,
+        [mockGasPriceButtonGroupProps.gasButtonInfo[0].priceInHexWei]
+      )
+    })
+
+    it('should call this.renderButtonContent with the correct args', () => {
+      assert.equal(GasPriceButtonGroup.prototype.renderButtonContent.callCount, 1)
+      const {
+        feeInPrimaryCurrency,
+        feeInSecondaryCurrency,
+        timeEstimate,
+      } = mockGasPriceButtonGroupProps.gasButtonInfo[0]
+      const {
+        showCheck,
+        className,
+      } = mockGasPriceButtonGroupProps
+      assert.deepEqual(
+        GasPriceButtonGroup.prototype.renderButtonContent.getCall(0).args,
+        [
+          {
+            feeInPrimaryCurrency,
+            feeInSecondaryCurrency,
+            timeEstimate,
+          },
+          {
+            showCheck,
+            className,
+          },
+        ]
+      )
+    })
+  })
+
+  describe('renderButtonContent', () => {
+    it('should render a label if passed a labelKey', () => {
+      const renderButtonContentResult = wrapper.instance().renderButtonContent({
+        labelKey: 'mockLabelKey',
+      }, {
+        className: 'someClass',
+      })
+      const wrappedRenderButtonContentResult = shallow(renderButtonContentResult)
+      assert.equal(wrappedRenderButtonContentResult.childAt(0).children().length, 1)
+      assert.equal(wrappedRenderButtonContentResult.find('.someClass__label').text(), 'mockLabelKey')
+    })
+
+    it('should render a feeInPrimaryCurrency if passed a feeInPrimaryCurrency', () => {
+      const renderButtonContentResult = GasPriceButtonGroup.prototype.renderButtonContent({
+        feeInPrimaryCurrency: 'mockFeeInPrimaryCurrency',
+      }, {
+        className: 'someClass',
+      })
+      const wrappedRenderButtonContentResult = shallow(renderButtonContentResult)
+      assert.equal(wrappedRenderButtonContentResult.childAt(0).children().length, 1)
+      assert.equal(wrappedRenderButtonContentResult.find('.someClass__primary-currency').text(), 'mockFeeInPrimaryCurrency')
+    })
+
+    it('should render a feeInSecondaryCurrency if passed a feeInSecondaryCurrency', () => {
+      const renderButtonContentResult = GasPriceButtonGroup.prototype.renderButtonContent({
+        feeInSecondaryCurrency: 'mockFeeInSecondaryCurrency',
+      }, {
+        className: 'someClass',
+      })
+      const wrappedRenderButtonContentResult = shallow(renderButtonContentResult)
+      assert.equal(wrappedRenderButtonContentResult.childAt(0).children().length, 1)
+      assert.equal(wrappedRenderButtonContentResult.find('.someClass__secondary-currency').text(), 'mockFeeInSecondaryCurrency')
+    })
+
+    it('should render a timeEstimate if passed a timeEstimate', () => {
+      const renderButtonContentResult = GasPriceButtonGroup.prototype.renderButtonContent({
+        timeEstimate: 'mockTimeEstimate',
+      }, {
+        className: 'someClass',
+      })
+      const wrappedRenderButtonContentResult = shallow(renderButtonContentResult)
+      assert.equal(wrappedRenderButtonContentResult.childAt(0).children().length, 1)
+      assert.equal(wrappedRenderButtonContentResult.find('.someClass__time-estimate').text(), 'mockTimeEstimate')
+    })
+
+    it('should render a check if showCheck is true', () => {
+      const renderButtonContentResult = GasPriceButtonGroup.prototype.renderButtonContent({}, {
+        className: 'someClass',
+        showCheck: true,
+      })
+      const wrappedRenderButtonContentResult = shallow(renderButtonContentResult)
+      assert.equal(wrappedRenderButtonContentResult.find('.fa-check').length, 1)
+    })
+
+    it('should render all elements if all args passed', () => {
+      const renderButtonContentResult = wrapper.instance().renderButtonContent({
+        labelKey: 'mockLabel',
+        feeInPrimaryCurrency: 'mockFeeInPrimaryCurrency',
+        feeInSecondaryCurrency: 'mockFeeInSecondaryCurrency',
+        timeEstimate: 'mockTimeEstimate',
+      }, {
+        className: 'someClass',
+        showCheck: true,
+      })
+      const wrappedRenderButtonContentResult = shallow(renderButtonContentResult)
+      assert.equal(wrappedRenderButtonContentResult.children().length, 5)
+    })
+
+
+    it('should render no elements if all args passed', () => {
+      const renderButtonContentResult = GasPriceButtonGroup.prototype.renderButtonContent({}, {})
+      const wrappedRenderButtonContentResult = shallow(renderButtonContentResult)
+      assert.equal(wrappedRenderButtonContentResult.children().length, 0)
+    })
+  })
+})
diff --git a/ui/app/components/gas-customization/gas-price-chart/gas-price-chart.component.js b/ui/app/components/gas-customization/gas-price-chart/gas-price-chart.component.js
new file mode 100644
index 000000000..d4c67bbde
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-price-chart/gas-price-chart.component.js
@@ -0,0 +1,108 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import * as d3 from 'd3'
+import {
+  generateChart,
+  getCoordinateData,
+  handleChartUpdate,
+  hideDataUI,
+  setTickPosition,
+  handleMouseMove,
+} from './gas-price-chart.utils.js'
+
+export default class GasPriceChart extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    gasPrices: PropTypes.array,
+    estimatedTimes: PropTypes.array,
+    gasPricesMax: PropTypes.number,
+    estimatedTimesMax: PropTypes.number,
+    currentPrice: PropTypes.number,
+    updateCustomGasPrice: PropTypes.func,
+  }
+
+  renderChart ({
+    currentPrice,
+    gasPrices,
+    estimatedTimes,
+    gasPricesMax,
+    estimatedTimesMax,
+    updateCustomGasPrice,
+  }) {
+    const chart = generateChart(gasPrices, estimatedTimes, gasPricesMax, estimatedTimesMax)
+    setTimeout(function () {
+      setTickPosition('y', 0, -5, 8)
+      setTickPosition('y', 1, -3, -5)
+      setTickPosition('x', 0, 3)
+      setTickPosition('x', 1, 3, -8)
+
+      const { x: domainX } = getCoordinateData('.domain')
+      const { x: yAxisX } = getCoordinateData('.c3-axis-y-label')
+      const { x: tickX } = getCoordinateData('.c3-axis-x .tick')
+
+      d3.select('.c3-axis-x .tick').attr('transform', 'translate(' + (domainX - tickX) / 2 + ', 0)')
+      d3.select('.c3-axis-x-label').attr('transform', 'translate(0,-15)')
+      d3.select('.c3-axis-y-label').attr('transform', 'translate(' + (domainX - yAxisX - 12) + ', 2) rotate(-90)')
+      d3.select('.c3-xgrid-focus line').attr('y2', 98)
+
+      d3.select('.c3-chart').on('mouseout', () => {
+        hideDataUI(chart, '#overlayed-circle')
+      })
+
+      d3.select('.c3-chart').on('click', () => {
+        const { x: newGasPrice } = d3.select('#overlayed-circle').datum()
+        updateCustomGasPrice(newGasPrice)
+      })
+
+      const { x: chartXStart, width: chartWidth } = getCoordinateData('.c3-areas-data1')
+
+      handleChartUpdate({
+        chart,
+        gasPrices,
+        newPrice: currentPrice,
+        cssId: '#set-circle',
+      })
+
+      d3.select('.c3-chart').on('mousemove', function () {
+        handleMouseMove({
+          xMousePos: d3.event.clientX,
+          chartXStart,
+          chartWidth,
+          gasPrices,
+          estimatedTimes,
+          chart,
+        })
+      })
+    }, 0)
+
+    this.chart = chart
+  }
+
+  componentDidUpdate (prevProps) {
+    const { gasPrices, currentPrice: newPrice } = this.props
+
+    if (prevProps.currentPrice !== newPrice) {
+      handleChartUpdate({
+        chart: this.chart,
+        gasPrices,
+        newPrice,
+        cssId: '#set-circle',
+      })
+    }
+  }
+
+  componentDidMount () {
+    this.renderChart(this.props)
+  }
+
+  render () {
+    return (
+      <div className="gas-price-chart" id="container">
+        <div className="gas-price-chart__root" id="chart"></div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/gas-customization/gas-price-chart/gas-price-chart.utils.js b/ui/app/components/gas-customization/gas-price-chart/gas-price-chart.utils.js
new file mode 100644
index 000000000..f19dafcc1
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-price-chart/gas-price-chart.utils.js
@@ -0,0 +1,354 @@
+import * as d3 from 'd3'
+import c3 from 'c3'
+import BigNumber from 'bignumber.js'
+
+const newBigSigDig = n => (new BigNumber(n.toPrecision(15)))
+const createOp = (a, b, op) => (newBigSigDig(a))[op](newBigSigDig(b))
+const bigNumMinus = (a = 0, b = 0) => createOp(a, b, 'minus')
+const bigNumDiv = (a = 0, b = 1) => createOp(a, b, 'div')
+
+export function handleMouseMove ({ xMousePos, chartXStart, chartWidth, gasPrices, estimatedTimes, chart }) {
+  const { currentPosValue, newTimeEstimate } = getNewXandTimeEstimate({
+    xMousePos,
+    chartXStart,
+    chartWidth,
+    gasPrices,
+    estimatedTimes,
+  })
+
+  if (currentPosValue === null && newTimeEstimate === null) {
+    hideDataUI(chart, '#overlayed-circle')
+    return
+  }
+
+  const indexOfNewCircle = estimatedTimes.length + 1
+  const dataUIObj = generateDataUIObj(currentPosValue, indexOfNewCircle, newTimeEstimate)
+
+  chart.internal.overlayPoint(dataUIObj, indexOfNewCircle)
+  chart.internal.showTooltip([dataUIObj], d3.select('.c3-areas-data1')._groups[0])
+  chart.internal.showXGridFocus([dataUIObj])
+}
+
+export function getCoordinateData (selector) {
+  const node = d3.select(selector).node()
+  return node ? node.getBoundingClientRect() : {}
+}
+
+export function generateDataUIObj (x, index, value) {
+  return {
+    x,
+    value,
+    index,
+    id: 'data1',
+    name: 'data1',
+  }
+}
+
+export function handleChartUpdate ({ chart, gasPrices, newPrice, cssId }) {
+  const {
+    closestLowerValueIndex,
+    closestLowerValue,
+    closestHigherValueIndex,
+    closestHigherValue,
+  } = getAdjacentGasPrices({ gasPrices, priceToPosition: newPrice })
+
+  if (closestLowerValue && closestHigherValue) {
+    setSelectedCircle({
+      chart,
+      newPrice,
+      closestLowerValueIndex,
+      closestLowerValue,
+      closestHigherValueIndex,
+      closestHigherValue,
+    })
+  } else {
+    hideDataUI(chart, cssId)
+  }
+}
+
+export function getAdjacentGasPrices ({ gasPrices, priceToPosition }) {
+  const closestLowerValueIndex = gasPrices.findIndex((e, i, a) => e <= priceToPosition && a[i + 1] >= priceToPosition)
+  const closestHigherValueIndex = gasPrices.findIndex((e, i, a) => e > priceToPosition)
+  return {
+    closestLowerValueIndex,
+    closestHigherValueIndex,
+    closestHigherValue: gasPrices[closestHigherValueIndex],
+    closestLowerValue: gasPrices[closestLowerValueIndex],
+  }
+}
+
+export function extrapolateY ({ higherY = 0, lowerY = 0, higherX = 0, lowerX = 0, xForExtrapolation = 0 }) {
+  const slope = bigNumMinus(higherY, lowerY).div(bigNumMinus(higherX, lowerX))
+  const newTimeEstimate = slope.times(bigNumMinus(higherX, xForExtrapolation)).minus(newBigSigDig(higherY)).negated()
+
+  return newTimeEstimate.toNumber()
+}
+
+
+export function getNewXandTimeEstimate ({ xMousePos, chartXStart, chartWidth, gasPrices, estimatedTimes }) {
+  const chartMouseXPos = bigNumMinus(xMousePos, chartXStart)
+  const posPercentile = bigNumDiv(chartMouseXPos, chartWidth)
+
+  const currentPosValue = (bigNumMinus(gasPrices[gasPrices.length - 1], gasPrices[0]))
+    .times(newBigSigDig(posPercentile))
+    .plus(newBigSigDig(gasPrices[0]))
+    .toNumber()
+
+  const {
+    closestLowerValueIndex,
+    closestLowerValue,
+    closestHigherValueIndex,
+    closestHigherValue,
+  } = getAdjacentGasPrices({ gasPrices, priceToPosition: currentPosValue })
+
+  return !closestHigherValue || !closestLowerValue
+    ? {
+      currentPosValue: null,
+      newTimeEstimate: null,
+    }
+    : {
+      currentPosValue,
+      newTimeEstimate: extrapolateY({
+        higherY: estimatedTimes[closestHigherValueIndex],
+        lowerY: estimatedTimes[closestLowerValueIndex],
+        higherX: closestHigherValue,
+        lowerX: closestLowerValue,
+        xForExtrapolation: currentPosValue,
+      }),
+    }
+}
+
+export function hideDataUI (chart, dataNodeId) {
+  const overLayedCircle = d3.select(dataNodeId)
+  if (!overLayedCircle.empty()) {
+    overLayedCircle.remove()
+  }
+  d3.select('.c3-tooltip-container').style('display', 'none !important')
+  chart.internal.hideXGridFocus()
+}
+
+export function setTickPosition (axis, n, newPosition, secondNewPosition) {
+  const positionToShift = axis === 'y' ? 'x' : 'y'
+  const secondPositionToShift = axis === 'y' ? 'y' : 'x'
+  d3.select('#chart')
+    .select(`.c3-axis-${axis}`)
+    .selectAll('.tick')
+    .filter((d, i) => i === n)
+    .select('text')
+    .attr(positionToShift, 0)
+    .select('tspan')
+    .attr(positionToShift, newPosition)
+    .attr(secondPositionToShift, secondNewPosition || 0)
+    .style('visibility', 'visible')
+}
+
+export function appendOrUpdateCircle ({ data, itemIndex, cx, cy, cssId, appendOnly }) {
+  const circle = this.main
+    .select('.c3-selected-circles' + this.getTargetSelectorSuffix(data.id))
+    .selectAll(`.c3-selected-circle-${itemIndex}`)
+
+  if (appendOnly || circle.empty()) {
+    circle.data([data])
+      .enter().append('circle')
+      .attr('class', () => this.generateClass('c3-selected-circle', itemIndex))
+      .attr('id', cssId)
+      .attr('cx', cx)
+      .attr('cy', cy)
+      .attr('stroke', () => this.color(data))
+      .attr('r', 6)
+  } else {
+    circle.data([data])
+      .attr('cx', cx)
+      .attr('cy', cy)
+  }
+}
+
+export function setSelectedCircle ({
+  chart,
+  newPrice,
+  closestLowerValueIndex,
+  closestLowerValue,
+  closestHigherValueIndex,
+  closestHigherValue,
+}) {
+  const numberOfValues = chart.internal.data.xs.data1.length
+
+  const { x: lowerX, y: lowerY } = getCoordinateData(`.c3-circle-${closestLowerValueIndex}`)
+  let { x: higherX, y: higherY } = getCoordinateData(`.c3-circle-${closestHigherValueIndex}`)
+  let count = closestHigherValueIndex + 1
+
+  if (lowerX && higherX) {
+    while (lowerX === higherX) {
+      higherX = getCoordinateData(`.c3-circle-${count}`).x
+      higherY = getCoordinateData(`.c3-circle-${count}`).y
+      count++
+    }
+  }
+
+  const currentX = bigNumMinus(higherX, lowerX)
+    .times(bigNumMinus(newPrice, closestLowerValue))
+    .div(bigNumMinus(closestHigherValue, closestLowerValue))
+    .plus(newBigSigDig(lowerX))
+
+  const newTimeEstimate = extrapolateY({ higherY, lowerY, higherX, lowerX, xForExtrapolation: currentX })
+
+  chart.internal.selectPoint(
+    generateDataUIObj(currentX.toNumber(), numberOfValues, newTimeEstimate),
+    numberOfValues
+  )
+}
+
+
+export function generateChart (gasPrices, estimatedTimes, gasPricesMax, estimatedTimesMax) {
+  const gasPricesMaxPadded = gasPricesMax + 1
+  const chart = c3.generate({
+    size: {
+      height: 165,
+    },
+    transition: {
+      duration: 0,
+    },
+    padding: {left: 20, right: 15, top: 6, bottom: 10},
+    data: {
+        x: 'x',
+        columns: [
+            ['x', ...gasPrices],
+            ['data1', ...estimatedTimes],
+        ],
+        types: {
+          data1: 'area',
+        },
+        selection: {
+          enabled: false,
+        },
+    },
+    color: {
+      data1: '#259de5',
+    },
+    axis: {
+      x: {
+        min: gasPrices[0],
+        max: gasPricesMax,
+        tick: {
+          values: [Math.floor(gasPrices[0]), Math.ceil(gasPricesMax)],
+          outer: false,
+          format: function (val) { return val + ' GWEI' },
+        },
+        padding: {left: gasPricesMax / 50, right: gasPricesMax / 50},
+        label: {
+          text: 'Gas Price ($)',
+          position: 'outer-center',
+        },
+      },
+      y: {
+        padding: {top: 7, bottom: 7},
+        tick: {
+          values: [Math.floor(estimatedTimesMax * 0.05), Math.ceil(estimatedTimesMax * 0.97)],
+          outer: false,
+        },
+        label: {
+          text: 'Confirmation time (sec)',
+          position: 'outer-middle',
+        },
+        min: 0,
+      },
+    },
+    legend: {
+        show: false,
+    },
+    grid: {
+        x: {},
+        lines: {
+          front: false,
+        },
+    },
+    point: {
+      focus: {
+        expand: {
+          enabled: false,
+          r: 3.5,
+        },
+      },
+    },
+    tooltip: {
+      format: {
+        title: (v) => v.toPrecision(4),
+      },
+      contents: function (d) {
+        const titleFormat = this.config.tooltip_format_title
+        let text
+        d.forEach(el => {
+          if (el && (el.value || el.value === 0) && !text) {
+            text = "<table class='" + 'custom-tooltip' + "'>" + "<tr><th colspan='2'>" + titleFormat(el.x) + '</th></tr>'
+          }
+        })
+        return text + '</table>' + "<div class='tooltip-arrow'></div>"
+      },
+      position: function (data) {
+        if (d3.select('#overlayed-circle').empty()) {
+          return { top: -100, left: -100 }
+        }
+
+        const { x: circleX, y: circleY, width: circleWidth } = getCoordinateData('#overlayed-circle')
+        const { x: chartXStart, y: chartYStart } = getCoordinateData('.c3-chart')
+
+        // TODO: Confirm the below constants work with all data sets and screen sizes
+        const flipTooltip = circleY - circleWidth < chartYStart + 5
+
+        d3
+        .select('.tooltip-arrow')
+        .style('margin-top', flipTooltip ? '-16px' : '4px')
+
+        return {
+          top: bigNumMinus(circleY, chartYStart).minus(19).plus(flipTooltip ? circleWidth + 38 : 0).toNumber(),
+          left: bigNumMinus(circleX, chartXStart).plus(newBigSigDig(circleWidth)).minus(bigNumDiv(gasPricesMaxPadded, 50)).toNumber(),
+        }
+      },
+      show: true,
+    },
+  })
+
+  chart.internal.selectPoint = function (data, itemIndex = (data.index || 0)) {
+    const { x: chartXStart, y: chartYStart } = getCoordinateData('.c3-areas-data1')
+
+    d3.select('#set-circle').remove()
+
+    appendOrUpdateCircle.bind(this)({
+      data,
+      itemIndex,
+      cx: () => bigNumMinus(data.x, chartXStart).plus(11).toNumber(),
+      cy: () => bigNumMinus(data.value, chartYStart).plus(10).toNumber(),
+      cssId: 'set-circle',
+      appendOnly: true,
+    })
+  }
+
+  chart.internal.overlayPoint = function (data, itemIndex) {
+    appendOrUpdateCircle.bind(this)({
+      data,
+      itemIndex,
+      cx: this.circleX.bind(this),
+      cy: this.circleY.bind(this),
+      cssId: 'overlayed-circle',
+    })
+  }
+
+  chart.internal.showTooltip = function (selectedData, element) {
+    const dataToShow = selectedData.filter((d) => d && (d.value || d.value === 0))
+
+    if (dataToShow.length) {
+      this.tooltip.html(
+        this.config.tooltip_contents.call(this, selectedData, this.axis.getXAxisTickFormat(), this.getYFormat(), this.color)
+      ).style('display', 'flex')
+
+      // Get tooltip dimensions
+      const tWidth = this.tooltip.property('offsetWidth')
+      const tHeight = this.tooltip.property('offsetHeight')
+      const position = this.config.tooltip_position.call(this, dataToShow, tWidth, tHeight, element)
+      // Set tooltip
+      this.tooltip.style('top', position.top + 'px').style('left', position.left + 'px')
+    }
+  }
+
+  return chart
+}
diff --git a/ui/app/components/gas-customization/gas-price-chart/index.js b/ui/app/components/gas-customization/gas-price-chart/index.js
new file mode 100644
index 000000000..9895acb62
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-price-chart/index.js
@@ -0,0 +1 @@
+export { default } from './gas-price-chart.component'
diff --git a/ui/app/components/gas-customization/gas-price-chart/index.scss b/ui/app/components/gas-customization/gas-price-chart/index.scss
new file mode 100644
index 000000000..097543104
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-price-chart/index.scss
@@ -0,0 +1,132 @@
+.gas-price-chart {
+  display: flex;
+  position: relative;
+  justify-content: center;
+
+  &__root {
+    max-height: 154px;
+    max-width: 391px;
+    position: relative;
+    overflow: hidden;
+
+    @media screen and (max-width: $break-small) {
+      max-width: 326px;
+    }
+  }
+
+  .tick text, .c3-axis-x-label, .c3-axis-y-label {
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: bold;
+    line-height: normal;
+    font-size: 8px;
+    text-align: center;
+    fill: #9A9CA6 !important;
+  }
+
+  .c3-tooltip-container {
+    display: flex;
+    justify-content: center !important;
+    align-items: flex-end !important;
+  }
+
+  .custom-tooltip {
+    background: rgba(0, 0, 0, 1);
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    border-radius: 3px;
+    opacity: 1 !important;
+    height: 21px;
+    z-index: 1;
+  }
+
+  .tooltip-arrow {
+    background: black;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
+    -webkit-transform: rotate(45deg);
+    transform: rotate(45deg);
+    opacity: 1 !important;
+    width: 9px;
+    height: 9px;
+    margin-top: 4px;
+  }
+
+  .custom-tooltip th {
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    font-size: 10px;
+    text-align: center;
+    padding: 3px;
+    color: #FFFFFF;
+  }
+
+  .c3-circle {
+    visibility: hidden;
+  }
+
+  .c3-selected-circle, .c3-circle._expanded_ {
+    fill: #FFFFFF !important;
+    stroke-width: 2.4px !important;
+    stroke: #2d9fd9 !important;
+    /* visibility: visible; */
+  }
+
+  #set-circle {
+    fill: #313A5E !important;
+    stroke: #313A5E !important;
+  }
+
+  .c3-axis-x-label, .c3-axis-y-label {
+    font-weight: normal;
+  }
+
+  .tick text tspan {
+    visibility: hidden;
+  }
+
+  .c3-circle {
+    fill: #2d9fd9 !important;
+  }
+
+  .c3-line-data1 {
+    stroke: #2d9fd9 !important;
+    background: rgba(0,0,0,0) !important;
+    color: rgba(0,0,0,0) !important;
+  }
+
+  .c3 path {
+    fill: none;
+  }
+
+  .c3 path.c3-area-data1 {
+    opacity: 1;
+    fill: #e9edf1 !important;
+  }
+
+  .c3-xgrid-line line {
+    stroke: #B8B8B8 !important;
+  }
+
+  .c3-xgrid-focus {
+    stroke: #aaa;
+  }
+
+  .c3-axis-x .domain {
+    fill: none;
+    stroke: none;
+  }
+
+  .c3-axis-y .domain {
+    fill: none;
+    stroke: #C8CCD6;
+  }
+
+  .c3-event-rect {
+    cursor: pointer;
+  }
+}
+
+#chart {
+  background: #F8F9FB
+}
diff --git a/ui/app/components/gas-customization/gas-price-chart/tests/gas-price-chart.component.test.js b/ui/app/components/gas-customization/gas-price-chart/tests/gas-price-chart.component.test.js
new file mode 100644
index 000000000..74eddae42
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-price-chart/tests/gas-price-chart.component.test.js
@@ -0,0 +1,218 @@
+import React from 'react'
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+import sinon from 'sinon'
+import shallow from '../../../../../lib/shallow-with-context'
+import * as d3 from 'd3'
+
+function timeout (time) {
+  return new Promise((resolve, reject) => {
+    setTimeout(resolve, time)
+  })
+}
+
+const propsMethodSpies = {
+  updateCustomGasPrice: sinon.spy(),
+}
+
+const selectReturnSpies = {
+  empty: sinon.spy(),
+  remove: sinon.spy(),
+  style: sinon.spy(),
+  select: d3.select,
+  attr: sinon.spy(),
+  on: sinon.spy(),
+  datum: sinon.stub().returns({ x: 'mockX' }),
+}
+
+const mockSelectReturn = {
+  ...d3.select('div'),
+  node: () => ({
+    getBoundingClientRect: () => ({ x: 123, y: 321, width: 400 }),
+  }),
+  ...selectReturnSpies,
+}
+
+const gasPriceChartUtilsSpies = {
+  appendOrUpdateCircle: sinon.spy(),
+  generateChart: sinon.stub().returns({ mockChart: true }),
+  generateDataUIObj: sinon.spy(),
+  getAdjacentGasPrices: sinon.spy(),
+  getCoordinateData: sinon.stub().returns({ x: 'mockCoordinateX', width: 'mockWidth' }),
+  getNewXandTimeEstimate: sinon.spy(),
+  handleChartUpdate: sinon.spy(),
+  hideDataUI: sinon.spy(),
+  setSelectedCircle: sinon.spy(),
+  setTickPosition: sinon.spy(),
+  handleMouseMove: sinon.spy(),
+}
+
+const testProps = {
+  gasPrices: [1.5, 2.5, 4, 8],
+  estimatedTimes: [100, 80, 40, 10],
+  gasPricesMax: 9,
+  estimatedTimesMax: '100',
+  currentPrice: 6,
+  updateCustomGasPrice: propsMethodSpies.updateCustomGasPrice,
+}
+
+const GasPriceChart = proxyquire('../gas-price-chart.component.js', {
+  './gas-price-chart.utils.js': gasPriceChartUtilsSpies,
+  'd3': {
+    ...d3,
+    select: function (...args) {
+      const result = d3.select(...args)
+      return result.empty()
+        ? mockSelectReturn
+        : result
+    },
+    event: {
+      clientX: 'mockClientX',
+    },
+  },
+}).default
+
+sinon.spy(GasPriceChart.prototype, 'renderChart')
+
+describe('GasPriceChart Component', function () {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<GasPriceChart {...testProps} />)
+  })
+
+  describe('render()', () => {
+    it('should render', () => {
+      assert(wrapper.hasClass('gas-price-chart'))
+    })
+
+    it('should render the chart div', () => {
+      assert(wrapper.childAt(0).hasClass('gas-price-chart__root'))
+      assert.equal(wrapper.childAt(0).props().id, 'chart')
+    })
+  })
+
+  describe('componentDidMount', () => {
+    it('should call this.renderChart with the components props', () => {
+      assert(GasPriceChart.prototype.renderChart.callCount, 1)
+      wrapper.instance().componentDidMount()
+      assert(GasPriceChart.prototype.renderChart.callCount, 2)
+      assert.deepEqual(GasPriceChart.prototype.renderChart.getCall(1).args, [{...testProps}])
+    })
+  })
+
+  describe('componentDidUpdate', () => {
+    it('should call handleChartUpdate if props.currentPrice has changed', () => {
+      gasPriceChartUtilsSpies.handleChartUpdate.resetHistory()
+      wrapper.instance().componentDidUpdate({ currentPrice: 7 })
+      assert.equal(gasPriceChartUtilsSpies.handleChartUpdate.callCount, 1)
+    })
+
+    it('should call handleChartUpdate with the correct props', () => {
+      gasPriceChartUtilsSpies.handleChartUpdate.resetHistory()
+      wrapper.instance().componentDidUpdate({ currentPrice: 7 })
+      assert.deepEqual(gasPriceChartUtilsSpies.handleChartUpdate.getCall(0).args, [{
+        chart: { mockChart: true },
+        gasPrices: [1.5, 2.5, 4, 8],
+        newPrice: 6,
+        cssId: '#set-circle',
+      }])
+    })
+
+    it('should not call handleChartUpdate if props.currentPrice has not changed', () => {
+      gasPriceChartUtilsSpies.handleChartUpdate.resetHistory()
+      wrapper.instance().componentDidUpdate({ currentPrice: 6 })
+      assert.equal(gasPriceChartUtilsSpies.handleChartUpdate.callCount, 0)
+    })
+  })
+
+  describe('renderChart', () => {
+    it('should call setTickPosition 4 times, with the expected props', async () => {
+      await timeout(0)
+      gasPriceChartUtilsSpies.setTickPosition.resetHistory()
+      assert.equal(gasPriceChartUtilsSpies.setTickPosition.callCount, 0)
+      wrapper.instance().renderChart(testProps)
+      await timeout(0)
+      assert.equal(gasPriceChartUtilsSpies.setTickPosition.callCount, 4)
+      assert.deepEqual(gasPriceChartUtilsSpies.setTickPosition.getCall(0).args, ['y', 0, -5, 8])
+      assert.deepEqual(gasPriceChartUtilsSpies.setTickPosition.getCall(1).args, ['y', 1, -3, -5])
+      assert.deepEqual(gasPriceChartUtilsSpies.setTickPosition.getCall(2).args, ['x', 0, 3])
+      assert.deepEqual(gasPriceChartUtilsSpies.setTickPosition.getCall(3).args, ['x', 1, 3, -8])
+    })
+
+    it('should call handleChartUpdate with the correct props', async () => {
+      await timeout(0)
+      gasPriceChartUtilsSpies.handleChartUpdate.resetHistory()
+      wrapper.instance().renderChart(testProps)
+      await timeout(0)
+      assert.deepEqual(gasPriceChartUtilsSpies.handleChartUpdate.getCall(0).args, [{
+        chart: { mockChart: true },
+        gasPrices: [1.5, 2.5, 4, 8],
+        newPrice: 6,
+        cssId: '#set-circle',
+      }])
+    })
+
+    it('should add three events to the chart', async () => {
+      await timeout(0)
+      selectReturnSpies.on.resetHistory()
+      assert.equal(selectReturnSpies.on.callCount, 0)
+      wrapper.instance().renderChart(testProps)
+      await timeout(0)
+      assert.equal(selectReturnSpies.on.callCount, 3)
+
+      const firstOnEventArgs = selectReturnSpies.on.getCall(0).args
+      assert.equal(firstOnEventArgs[0], 'mouseout')
+      const secondOnEventArgs = selectReturnSpies.on.getCall(1).args
+      assert.equal(secondOnEventArgs[0], 'click')
+      const thirdOnEventArgs = selectReturnSpies.on.getCall(2).args
+      assert.equal(thirdOnEventArgs[0], 'mousemove')
+    })
+
+    it('should hide the data UI on mouseout', async () => {
+      await timeout(0)
+      selectReturnSpies.on.resetHistory()
+      wrapper.instance().renderChart(testProps)
+      gasPriceChartUtilsSpies.hideDataUI.resetHistory()
+      await timeout(0)
+      const mouseoutEventArgs = selectReturnSpies.on.getCall(0).args
+      assert.equal(gasPriceChartUtilsSpies.hideDataUI.callCount, 0)
+      mouseoutEventArgs[1]()
+      assert.equal(gasPriceChartUtilsSpies.hideDataUI.callCount, 1)
+      assert.deepEqual(gasPriceChartUtilsSpies.hideDataUI.getCall(0).args, [{ mockChart: true }, '#overlayed-circle'])
+    })
+
+    it('should updateCustomGasPrice on click', async () => {
+      await timeout(0)
+      selectReturnSpies.on.resetHistory()
+      wrapper.instance().renderChart(testProps)
+      propsMethodSpies.updateCustomGasPrice.resetHistory()
+      await timeout(0)
+      const mouseoutEventArgs = selectReturnSpies.on.getCall(1).args
+      assert.equal(propsMethodSpies.updateCustomGasPrice.callCount, 0)
+      mouseoutEventArgs[1]()
+      assert.equal(propsMethodSpies.updateCustomGasPrice.callCount, 1)
+      assert.equal(propsMethodSpies.updateCustomGasPrice.getCall(0).args[0], 'mockX')
+    })
+
+    it('should handle mousemove', async () => {
+      await timeout(0)
+      selectReturnSpies.on.resetHistory()
+      wrapper.instance().renderChart(testProps)
+      gasPriceChartUtilsSpies.handleMouseMove.resetHistory()
+      await timeout(0)
+      const mouseoutEventArgs = selectReturnSpies.on.getCall(2).args
+      assert.equal(gasPriceChartUtilsSpies.handleMouseMove.callCount, 0)
+      mouseoutEventArgs[1]()
+      assert.equal(gasPriceChartUtilsSpies.handleMouseMove.callCount, 1)
+      assert.deepEqual(gasPriceChartUtilsSpies.handleMouseMove.getCall(0).args, [{
+        xMousePos: 'mockClientX',
+        chartXStart: 'mockCoordinateX',
+        chartWidth: 'mockWidth',
+        gasPrices: testProps.gasPrices,
+        estimatedTimes: testProps.estimatedTimes,
+        chart: { mockChart: true },
+      }])
+    })
+  })
+})
diff --git a/ui/app/components/gas-customization/gas-slider/gas-slider.component.js b/ui/app/components/gas-customization/gas-slider/gas-slider.component.js
new file mode 100644
index 000000000..5836e7dfc
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-slider/gas-slider.component.js
@@ -0,0 +1,48 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+export default class AdvancedTabContent extends Component {
+  static propTypes = {
+    onChange: PropTypes.func,
+    lowLabel: PropTypes.string,
+    highLabel: PropTypes.string,
+    value: PropTypes.number,
+    step: PropTypes.number,
+    max: PropTypes.number,
+    min: PropTypes.number,
+  }
+
+  render () {
+    const {
+      onChange,
+      lowLabel,
+      highLabel,
+      value,
+      step,
+      max,
+      min,
+    } = this.props
+
+    return (
+      <div className="gas-slider">
+        <input
+          className="gas-slider__input"
+          type="range"
+          step={step}
+          max={max}
+          min={min}
+          value={value}
+          id="gasSlider"
+          onChange={event => onChange(event.target.value)}
+        />
+        <div className="gas-slider__bar">
+          <div className="gas-slider__colored"/>
+        </div>
+        <div className="gas-slider__labels">
+          <span>{lowLabel}</span>
+          <span>{highLabel}</span>
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/gas-customization/gas-slider/index.js b/ui/app/components/gas-customization/gas-slider/index.js
new file mode 100644
index 000000000..f1752c93f
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-slider/index.js
@@ -0,0 +1 @@
+export { default } from './gas-slider.component'
diff --git a/ui/app/components/gas-customization/gas-slider/index.scss b/ui/app/components/gas-customization/gas-slider/index.scss
new file mode 100644
index 000000000..e6c734367
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-slider/index.scss
@@ -0,0 +1,54 @@
+.gas-slider {
+  position: relative;
+  width: 322px;
+
+  &__input {
+    width: 322px;
+    margin-left: -2px;
+    z-index: 2;
+  }
+
+  input[type=range] {
+    -webkit-appearance: none !important;
+  }
+
+  input[type=range]::-webkit-slider-thumb {
+    -webkit-appearance: none !important;
+    height: 34px;
+    width: 34px;
+    background-color: $curious-blue;
+    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08);
+    border-radius: 50%;
+    position: relative;
+    z-index: 10;
+  }
+
+  &__bar {
+    height: 6px;
+    width: 322px;
+    background: $alto;
+    display: flex;
+    justify-content: space-between;
+    position: absolute;
+    top: 16px;
+    z-index: 0;
+    border-radius: 4px;
+  }
+
+  &__colored {
+    height: 6px;
+    border-radius: 4px;
+    margin-left: 102px; 
+    width: 322px;
+    z-index: 1;
+    background-color: $blizzard-blue;
+  }
+
+  &__labels {
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+    margin-top: -6px;
+    color: $mid-gray;
+  }
+}
\ No newline at end of file
diff --git a/ui/app/components/gas-customization/gas.selectors.js b/ui/app/components/gas-customization/gas.selectors.js
new file mode 100644
index 000000000..89374b5f1
--- /dev/null
+++ b/ui/app/components/gas-customization/gas.selectors.js
@@ -0,0 +1,14 @@
+const selectors = {
+  getCurrentBlockTime,
+  getBasicGasEstimateLoadingStatus,
+}
+
+module.exports = selectors
+
+function getCurrentBlockTime (state) {
+  return state.gas.currentBlockTime
+}
+
+function getBasicGasEstimateLoadingStatus (state) {
+  return state.gas.basicEstimateIsLoading
+}
diff --git a/ui/app/components/gas-customization/index.scss b/ui/app/components/gas-customization/index.scss
new file mode 100644
index 000000000..e99d4e57f
--- /dev/null
+++ b/ui/app/components/gas-customization/index.scss
@@ -0,0 +1,5 @@
+@import './gas-slider/index';
+
+@import './gas-modal-page-container/index';
+
+@import './gas-price-chart/index';