diff --git a/app/components/UI/CustomGas/index.js b/app/components/UI/CustomGas/index.js
index 3f80ca9a778..71d3ba81bd8 100644
--- a/app/components/UI/CustomGas/index.js
+++ b/app/components/UI/CustomGas/index.js
@@ -8,26 +8,33 @@ import {
 	getRenderableEthGasFee,
 	getRenderableFiatGasFee,
 	apiEstimateModifiedToWEI,
-	fetchBasicGasEstimates,
-	convertApiValueToGWEI
+	getBasicGasEstimates
 } from '../../../util/custom-gas';
 import { BN } from 'ethereumjs-util';
 import { fromWei, renderWei, hexToBN } from '../../../util/number';
-import Logger from '../../../util/Logger';
 import { getTicker } from '../../../util/transactions';
-import Device from '../../../util/Device';
-import TransactionTypes from '../../../core/TransactionTypes';
-
-const {
-	CUSTOM_GAS: { AVERAGE_GAS, FAST_GAS, LOW_GAS }
-} = TransactionTypes;
+import Radio from '../Radio';
 
 const styles = StyleSheet.create({
+	labelText: {
+		...fontStyles.bold,
+		color: colors.grey400,
+		fontSize: 16
+	},
+	titleContainer: {
+		flex: 1,
+		width: '100%',
+		flexDirection: 'row',
+		justifyContent: 'space-between'
+	},
+	titleMargin: {
+		marginBottom: 10,
+		alignItems: 'flex-end'
+	},
+	radio: {
+		marginLeft: 'auto'
+	},
 	selectors: {
-		backgroundColor: colors.white,
-		borderColor: colors.grey100,
-		borderRadius: 4,
-		borderWidth: 1,
 		flex: 1,
 		position: 'relative',
 		flexDirection: 'row',
@@ -37,41 +44,53 @@ const styles = StyleSheet.create({
 		alignSelf: 'stretch',
 		textAlign: 'center',
 		alignItems: 'flex-start',
-		width: '33%',
-		paddingVertical: 8,
-		paddingHorizontal: 10
+		width: '33.333333333%',
+		paddingVertical: 10,
+		paddingHorizontal: 12,
+		borderWidth: 1,
+		borderColor: colors.grey100,
+		marginLeft: -2
+	},
+	selectorSelected: {
+		backgroundColor: colors.blue000,
+		borderColor: colors.blue,
+		zIndex: 1
 	},
 	advancedOptions: {
 		textAlign: 'right',
-		alignItems: 'flex-end',
-		marginTop: 10
-	},
-	average: {
-		borderColor: colors.grey100,
-		borderRightWidth: 1,
-		borderLeftWidth: 1
+		alignItems: 'flex-end'
 	},
 	slow: {
-		borderBottomStartRadius: 4,
-		borderTopStartRadius: 4
+		borderBottomStartRadius: 6,
+		borderTopStartRadius: 6
 	},
 	fast: {
-		borderBottomEndRadius: 4,
-		borderTopEndRadius: 4
+		borderBottomEndRadius: 6,
+		borderTopEndRadius: 6
 	},
 	text: {
 		...fontStyles.normal,
-		fontSize: Device.isSmallDevice() ? 10 : 12
+		fontSize: 10,
+		color: colors.black
 	},
 	textTitle: {
 		...fontStyles.bold,
-		fontSize: Device.isSmallDevice() ? 10 : 14
+		fontSize: 10,
+		color: colors.black
 	},
 	textTotalGas: {
 		...fontStyles.bold
 	},
+	textTime: {
+		...fontStyles.bold,
+		color: colors.black,
+		marginVertical: 4,
+		fontSize: 18,
+		textTransform: 'none'
+	},
 	textAdvancedOptions: {
-		color: colors.blue
+		color: colors.blue,
+		fontSize: 14
 	},
 	gasInput: {
 		...fontStyles.bold,
@@ -125,7 +144,11 @@ class CustomGas extends PureComponent {
 		/**
 		 * Current provider ticker
 		 */
-		ticker: PropTypes.string
+		ticker: PropTypes.string,
+		/**
+		 * Displayed when there is a gas station error
+		 */
+		gasError: PropTypes.string
 	};
 
 	state = {
@@ -134,8 +157,11 @@ class CustomGas extends PureComponent {
 		gasAverageSelected: true,
 		gasSlowSelected: false,
 		averageGwei: 0,
+		averageWait: undefined,
 		fastGwei: 0,
+		fastWait: undefined,
 		safeLowGwei: 0,
+		safeLowWait: undefined,
 		selected: 'average',
 		ready: false,
 		advancedCustomGas: false,
@@ -233,28 +259,8 @@ class CustomGas extends PureComponent {
 
 	handleFetchBasicEstimates = async () => {
 		this.setState({ ready: false });
-		let basicGasEstimates;
-		try {
-			basicGasEstimates = await fetchBasicGasEstimates();
-		} catch (error) {
-			Logger.log('Error while trying to get gas limit estimates', error);
-			basicGasEstimates = { average: AVERAGE_GAS, safeLow: LOW_GAS, fast: FAST_GAS };
-		}
-
-		// Handle api failure returning same gas prices
-		let { average, fast, safeLow } = basicGasEstimates;
-		if (average === fast && average === safeLow) {
-			average = AVERAGE_GAS;
-			safeLow = LOW_GAS;
-			fast = FAST_GAS;
-		}
-
-		this.setState({
-			averageGwei: convertApiValueToGWEI(average),
-			fastGwei: convertApiValueToGWEI(fast),
-			safeLowGwei: convertApiValueToGWEI(safeLow),
-			ready: true
-		});
+		const basicGasEstimates = await getBasicGasEstimates();
+		this.setState({ ...basicGasEstimates, ready: true });
 	};
 
 	onGasLimitChange = value => {
@@ -271,7 +277,17 @@ class CustomGas extends PureComponent {
 	};
 
 	renderCustomGasSelector = () => {
-		const { averageGwei, fastGwei, safeLowGwei } = this.state;
+		const {
+			averageGwei,
+			fastGwei,
+			safeLowGwei,
+			averageWait,
+			safeLowWait,
+			fastWait,
+			gasSlowSelected,
+			gasAverageSelected,
+			gasFastSelected
+		} = this.state;
 		const { conversionRate, currentCurrency, gas } = this.props;
 		const ticker = getTicker(this.props.ticker);
 		return (
@@ -279,59 +295,57 @@ class CustomGas extends PureComponent {
 				<TouchableOpacity
 					key={'safeLow'}
 					onPress={this.onPressGasSlow}
-					style={[
-						styles.selector,
-						styles.slow,
-						{ backgroundColor: this.state.gasSlowSelected ? colors.blue : colors.white }
-					]}
+					style={[styles.selector, styles.slow, gasSlowSelected && styles.selectorSelected]}
 				>
-					<Text style={[styles.textTitle, { color: this.state.gasSlowSelected ? colors.white : undefined }]}>
-						{strings('transaction.gas_fee_slow')}
-					</Text>
-					<Text style={[styles.text, { color: this.state.gasSlowSelected ? colors.white : undefined }]}>
+					<View style={styles.titleContainer}>
+						<Text style={styles.textTitle}>{strings('transaction.gas_fee_slow')}</Text>
+						<View style={styles.radio}>
+							<Radio selected={gasSlowSelected} />
+						</View>
+					</View>
+					<Text style={styles.textTime}>{safeLowWait}</Text>
+					<Text style={styles.text}>
 						{getRenderableEthGasFee(safeLowGwei, gas)} {ticker}
 					</Text>
-					<Text style={[styles.text, { color: this.state.gasSlowSelected ? colors.white : undefined }]}>
+					<Text style={styles.text}>
 						{getRenderableFiatGasFee(safeLowGwei, conversionRate, currentCurrency, gas)}
 					</Text>
 				</TouchableOpacity>
 				<TouchableOpacity
 					key={'average'}
 					onPress={this.onPressGasAverage}
-					style={[
-						styles.selector,
-						styles.average,
-						{ backgroundColor: this.state.gasAverageSelected ? colors.blue : colors.white }
-					]}
+					style={[styles.selector, gasAverageSelected && styles.selectorSelected]}
 				>
-					<Text
-						style={[styles.textTitle, { color: this.state.gasAverageSelected ? colors.white : undefined }]}
-					>
-						{strings('transaction.gas_fee_average')}
-					</Text>
-					<Text style={[styles.text, { color: this.state.gasAverageSelected ? colors.white : undefined }]}>
+					<View style={styles.titleContainer}>
+						<Text style={styles.textTitle}>{strings('transaction.gas_fee_average')}</Text>
+						<View style={styles.radio}>
+							<Radio selected={gasAverageSelected} />
+						</View>
+					</View>
+					<Text style={styles.textTime}>{averageWait}</Text>
+					<Text style={styles.text}>
 						{getRenderableEthGasFee(averageGwei, gas)} {ticker}
 					</Text>
-					<Text style={[styles.text, { color: this.state.gasAverageSelected ? colors.white : undefined }]}>
+					<Text style={styles.text}>
 						{getRenderableFiatGasFee(averageGwei, conversionRate, currentCurrency, gas)}
 					</Text>
 				</TouchableOpacity>
 				<TouchableOpacity
 					key={'fast'}
 					onPress={this.onPressGasFast}
-					style={[
-						styles.selector,
-						styles.fast,
-						{ backgroundColor: this.state.gasFastSelected ? colors.blue : colors.white }
-					]}
+					style={[styles.selector, styles.fast, gasFastSelected && styles.selectorSelected]}
 				>
-					<Text style={[styles.textTitle, { color: this.state.gasFastSelected ? colors.white : undefined }]}>
-						{strings('transaction.gas_fee_fast')}
-					</Text>
-					<Text style={[styles.text, { color: this.state.gasFastSelected ? colors.white : undefined }]}>
+					<View style={styles.titleContainer}>
+						<Text style={styles.textTitle}>{strings('transaction.gas_fee_fast')}</Text>
+						<View style={styles.radio}>
+							<Radio selected={gasFastSelected} />
+						</View>
+					</View>
+					<Text style={styles.textTime}>{fastWait}</Text>
+					<Text style={styles.text}>
 						{getRenderableEthGasFee(fastGwei, gas)} {ticker}
 					</Text>
-					<Text style={[styles.text, { color: this.state.gasFastSelected ? colors.white : undefined }]}>
+					<Text style={styles.text}>
 						{getRenderableFiatGasFee(fastGwei, conversionRate, currentCurrency, gas)}
 					</Text>
 				</TouchableOpacity>
@@ -371,18 +385,25 @@ class CustomGas extends PureComponent {
 	render = () => {
 		if (this.state.ready) {
 			const { advancedCustomGas } = this.state;
+			const { gasError } = this.props;
 			return (
 				<View style={baseStyles.flexGrow}>
-					{advancedCustomGas ? this.renderCustomGasInput() : this.renderCustomGasSelector()}
-					<View style={styles.advancedOptions}>
-						<TouchableOpacity onPress={this.onAdvancedOptions}>
-							<Text style={styles.textAdvancedOptions}>
-								{advancedCustomGas
-									? strings('custom_gas.hide_advanced_options')
-									: strings('custom_gas.advanced_options')}
-							</Text>
-						</TouchableOpacity>
+					<View style={[styles.titleContainer, styles.titleMargin]}>
+						<View>
+							<Text style={styles.labelText}>{strings('transaction.gas_fee')}:</Text>
+							{gasError ? <Text style={styles.error}>{gasError}</Text> : null}
+						</View>
+						<View style={styles.advancedOptions}>
+							<TouchableOpacity onPress={this.onAdvancedOptions}>
+								<Text style={styles.textAdvancedOptions}>
+									{advancedCustomGas
+										? strings('custom_gas.hide_advanced_options')
+										: strings('custom_gas.advanced_options')}
+								</Text>
+							</TouchableOpacity>
+						</View>
 					</View>
+					{advancedCustomGas ? this.renderCustomGasInput() : this.renderCustomGasSelector()}
 				</View>
 			);
 		}
diff --git a/app/components/UI/TransactionEdit/__snapshots__/index.test.js.snap b/app/components/UI/TransactionEdit/__snapshots__/index.test.js.snap
index 4bcc4049776..34dda7ba23a 100644
--- a/app/components/UI/TransactionEdit/__snapshots__/index.test.js.snap
+++ b/app/components/UI/TransactionEdit/__snapshots__/index.test.js.snap
@@ -224,38 +224,10 @@ exports[`TransactionEdit should render correctly 1`] = `
             },
           ]
         }
-      >
-        <View>
-          <Text
-            style={
-              Object {
-                "color": "#848c96",
-                "fontFamily": "CircularStd-Medium",
-                "fontSize": 16,
-                "fontWeight": "600",
-              }
-            }
-          >
-            Transaction Fee
-            :
-          </Text>
-        </View>
-      </View>
-      <View
-        style={
-          Array [
-            Object {
-              "flexDirection": "row",
-            },
-            Object {
-              "marginTop": 18,
-              "zIndex": 3,
-            },
-          ]
-        }
       >
         <Connect(CustomGas)
           gas=""
+          gasError=""
           gasPrice=""
           handleGasFeeSelection={[Function]}
           onPress={[Function]}
diff --git a/app/components/UI/TransactionEdit/index.js b/app/components/UI/TransactionEdit/index.js
index eeae46c2881..21df18fec6c 100644
--- a/app/components/UI/TransactionEdit/index.js
+++ b/app/components/UI/TransactionEdit/index.js
@@ -429,17 +429,12 @@ class TransactionEdit extends PureComponent {
 						{!paymentChannelTransaction && (
 							<>
 								<View style={[styles.formRow, styles.row, styles.notAbsolute]}>
-									<View>
-										<Text style={styles.labelText}>{strings('transaction.gas_fee')}:</Text>
-										{gasError ? <Text style={styles.error}>{gasError}</Text> : null}
-									</View>
-								</View>
-								<View style={[styles.formRow, styles.row]}>
 									<CustomGas
 										handleGasFeeSelection={this.updateGas}
 										totalGas={totalGas}
 										gas={gas}
 										gasPrice={gasPrice}
+										gasError={gasError}
 										onPress={this.closeDropdowns}
 									/>
 								</View>
diff --git a/app/components/Views/SendFlow/CustomGas/index.js b/app/components/Views/SendFlow/CustomGas/index.js
index d80cd090339..96cb42bd5a7 100644
--- a/app/components/Views/SendFlow/CustomGas/index.js
+++ b/app/components/Views/SendFlow/CustomGas/index.js
@@ -8,21 +8,13 @@ import {
 	getRenderableEthGasFee,
 	getRenderableFiatGasFee,
 	apiEstimateModifiedToWEI,
-	fetchBasicGasEstimates,
-	convertApiValueToGWEI,
-	parseWaitTime
+	getBasicGasEstimates
 } from '../../../../util/custom-gas';
 import { BN } from 'ethereumjs-util';
 import { fromWei, renderWei, hexToBN, renderFromWei, isBN, isDecimal } from '../../../../util/number';
-import Logger from '../../../../util/Logger';
 import { getTicker } from '../../../../util/transactions';
-import TransactionTypes from '../../../../core/TransactionTypes';
 import Radio from '../../../UI/Radio';
 
-const {
-	CUSTOM_GAS: { AVERAGE_GAS, FAST_GAS, LOW_GAS }
-} = TransactionTypes;
-
 const styles = StyleSheet.create({
 	root: {
 		margin: 16
@@ -304,40 +296,8 @@ class CustomGas extends PureComponent {
 
 	handleFetchBasicEstimates = async () => {
 		this.setState({ ready: false });
-		let basicGasEstimates;
-		try {
-			basicGasEstimates = await fetchBasicGasEstimates();
-		} catch (error) {
-			Logger.log('Error while trying to get gas limit estimates', error);
-			basicGasEstimates = {
-				average: AVERAGE_GAS,
-				averageWait: 2,
-				safeLow: LOW_GAS,
-				safeLowWait: 4,
-				fast: FAST_GAS,
-				fastWait: 1
-			};
-		}
-
-		// Handle api failure returning same gas prices
-		let { average, fast, safeLow } = basicGasEstimates;
-		const { averageWait, fastWait, safeLowWait } = basicGasEstimates;
-
-		if (average === fast && average === safeLow) {
-			average = AVERAGE_GAS;
-			safeLow = LOW_GAS;
-			fast = FAST_GAS;
-		}
-
-		this.setState({
-			averageGwei: convertApiValueToGWEI(average),
-			fastGwei: convertApiValueToGWEI(fast),
-			safeLowGwei: convertApiValueToGWEI(safeLow),
-			averageWait: parseWaitTime(averageWait),
-			fastWait: parseWaitTime(fastWait),
-			safeLowWait: parseWaitTime(safeLowWait),
-			ready: true
-		});
+		const basicGasEstimates = await getBasicGasEstimates();
+		this.setState({ ...basicGasEstimates, ready: true });
 	};
 
 	onGasLimitChange = value => {
diff --git a/app/util/custom-gas.js b/app/util/custom-gas.js
index a31f83fdca6..583dfd9e31f 100644
--- a/app/util/custom-gas.js
+++ b/app/util/custom-gas.js
@@ -1,6 +1,8 @@
 import { BN } from 'ethereumjs-util';
 import { renderFromWei, weiToFiat, toWei } from './number';
 import { strings } from '../../locales/i18n';
+import Logger from '../util/Logger';
+import TransactionTypes from '../core/TransactionTypes';
 
 /**
  * Calculates wei value of estimate gas price in gwei
@@ -141,3 +143,48 @@ export async function fetchBasicGasEstimates() {
 			}
 		);
 }
+
+/**
+ * Sanitize gas estimates into formatted wait times
+ *
+ * @returns {Object} - Object containing formatted wait times
+ */
+export async function getBasicGasEstimates() {
+	const {
+		CUSTOM_GAS: { AVERAGE_GAS, FAST_GAS, LOW_GAS }
+	} = TransactionTypes;
+
+	let basicGasEstimates;
+	try {
+		basicGasEstimates = await fetchBasicGasEstimates();
+	} catch (error) {
+		Logger.log('Error while trying to get gas limit estimates', error);
+		basicGasEstimates = {
+			average: AVERAGE_GAS,
+			averageWait: 2,
+			safeLow: LOW_GAS,
+			safeLowWait: 4,
+			fast: FAST_GAS,
+			fastWait: 1
+		};
+	}
+
+	// Handle api failure returning same gas prices
+	let { average, fast, safeLow } = basicGasEstimates;
+	const { averageWait, fastWait, safeLowWait } = basicGasEstimates;
+
+	if (average === fast && average === safeLow) {
+		average = AVERAGE_GAS;
+		safeLow = LOW_GAS;
+		fast = FAST_GAS;
+	}
+
+	return {
+		averageGwei: convertApiValueToGWEI(average),
+		fastGwei: convertApiValueToGWEI(fast),
+		safeLowGwei: convertApiValueToGWEI(safeLow),
+		averageWait: parseWaitTime(averageWait),
+		fastWait: parseWaitTime(fastWait),
+		safeLowWait: parseWaitTime(safeLowWait)
+	};
+}
diff --git a/locales/en.json b/locales/en.json
index be00e4a143b..662e6256cb6 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -511,8 +511,8 @@
 		"not_enough_for_gas": "You have 0 ETH in your account to pay for transaction fees. Buy some ETH or deposit from another account."
 	},
 	"custom_gas": {
-		"advanced_options": "Show advanced options",
-		"hide_advanced_options": "Hide advanced options",
+		"advanced_options": "Advanced",
+		"hide_advanced_options": "Hide advanced",
 		"gas_limit": "Gas Limit:",
 		"gas_price": "Gas Price: (GWEI)",
 		"warning_gas_limit": "Gas limit must be greater than 20999 and less than 7920027",