diff --git a/src/components/dropdownButton/view/dropdownButtonStyles.js b/src/components/dropdownButton/view/dropdownButtonStyles.js
index 962cee9f7..9cb02920a 100644
--- a/src/components/dropdownButton/view/dropdownButtonStyles.js
+++ b/src/components/dropdownButton/view/dropdownButtonStyles.js
@@ -19,11 +19,11 @@ export default EStyleSheet.create({
     paddingTop: 10,
     paddingBottom: 10,
     minWidth: '$deviceWidth / 2',
-    borderColor: '$primaryGrayBackground',
+    borderColor: '$primaryWhiteLightBackground',
     borderRadius: 5,
     shadowOpacity: 0.3,
     shadowColor: '$shadowColor',
-    backgroundColor: '$primaryBackgroundColor',
+    backgroundColor: '$primaryLightBackground',
     maxHeight: '$deviceHeight / 2',
   },
   iconWrapper: {
diff --git a/src/components/numericKeyboard/views/numericKeyboardStyles.js b/src/components/numericKeyboard/views/numericKeyboardStyles.js
index b8f72582c..d8730f9b2 100644
--- a/src/components/numericKeyboard/views/numericKeyboardStyles.js
+++ b/src/components/numericKeyboard/views/numericKeyboardStyles.js
@@ -3,16 +3,16 @@ import EStyleSheet from 'react-native-extended-stylesheet';
 export default EStyleSheet.create({
   container: {
     flex: 1,
-    flexDirection: 'column',
+    justifyContent: 'center',
     alignItems: 'center',
-    justifyContent: 'space-between',
     width: '$deviceWidth / 1.8',
   },
   buttonGroup: {
-    width: '100%',
     flex: 1,
     flexDirection: 'row',
+    flexWrap: 'wrap',
     justifyContent: 'space-between',
+    marginBottom: 30,
   },
   lastButtonGroup: {
     width: '63%',
@@ -27,8 +27,10 @@ export default EStyleSheet.create({
   },
   buttonWithoutBorder: {
     borderWidth: 0,
+    backgroundColor: '$primaryWhiteLightBackground',
   },
   button: {
     borderColor: 'rgba(53, 124, 230, 0.2)',
+    marginBottom: 10,
   },
 });
diff --git a/src/components/numericKeyboard/views/numericKeyboardView.js b/src/components/numericKeyboard/views/numericKeyboardView.js
index 8cc4e07cc..9bc3d39fe 100644
--- a/src/components/numericKeyboard/views/numericKeyboardView.js
+++ b/src/components/numericKeyboard/views/numericKeyboardView.js
@@ -1,110 +1,39 @@
-import React, { PureComponent } from 'react';
+import React from 'react';
 import { View } from 'react-native';
-
+import times from 'lodash/times';
 import { CircularButton, IconButton } from '../../buttons';
 
 import styles from './numericKeyboardStyles';
 
-class NumericKeyboard extends PureComponent {
-  /* Props
-   *   @prop { func }    onPress            - Function will trigger when any button clicked.
-   */
-  constructor(props) {
-    super(props);
-    this.state = {};
-  }
-
-  // Component Life Cycles
-
-  // Component Functions
-
-  _handleOnPress = value => {
-    alert(value);
-  };
-
-  render() {
-    const { onPress } = this.props;
-
-    return (
-      <View style={styles.container}>
-        <View style={styles.buttonGroup}>
-          <CircularButton
-            style={styles.button}
-            text={1}
-            value={1}
-            onPress={value => onPress && onPress(value)}
-          />
-          <CircularButton
-            style={styles.button}
-            text={2}
-            value={2}
-            onPress={value => onPress && onPress(value)}
-          />
-          <CircularButton
-            style={styles.button}
-            text={3}
-            value={3}
-            onPress={value => onPress && onPress(value)}
-          />
-        </View>
-        <View style={styles.buttonGroup}>
-          <CircularButton
-            style={styles.button}
-            text={4}
-            value={4}
-            onPress={value => onPress && onPress(value)}
-          />
-          <CircularButton
-            style={styles.button}
-            text={5}
-            value={5}
-            onPress={value => onPress && onPress(value)}
-          />
-          <CircularButton
-            style={styles.button}
-            text={6}
-            value={6}
-            onPress={value => onPress && onPress(value)}
-          />
-        </View>
-        <View style={styles.buttonGroup}>
-          <CircularButton
-            style={styles.button}
-            text={7}
-            value={7}
-            onPress={value => onPress && onPress(value)}
-          />
-          <CircularButton
-            style={styles.button}
-            text={8}
-            value={8}
-            onPress={value => onPress && onPress(value)}
-          />
-          <CircularButton
-            style={styles.button}
-            text={9}
-            value={9}
-            onPress={value => onPress && onPress(value)}
-          />
-        </View>
-        <View style={styles.lastButtonGroup}>
-          <CircularButton
-            style={styles.button}
-            text={0}
-            value={0}
-            onPress={value => onPress && onPress(value)}
-          />
-          <IconButton
-            handleOnPress={() => onPress && onPress('clear')}
-            isCircle
-            buttonStyle={styles.buttonWithoutBorder}
-            style={styles.iconButton}
-            name="backspace"
-          />
-        </View>
-      </View>
-    );
-  }
-}
+const NumericKeyboard = ({ onPress }) => (
+  <View style={styles.container}>
+    <View style={styles.buttonGroup}>
+      {times(9, i => (
+        <CircularButton
+          key={i}
+          style={styles.button}
+          text={i + 1}
+          value={i + 1}
+          onPress={onPress}
+        />
+      ))}
+    </View>
+    <View style={styles.lastButtonGroup}>
+      <CircularButton
+        style={styles.button}
+        text={0}
+        value={0}
+        onPress={value => onPress && onPress(value)}
+      />
+      <IconButton
+        handleOnPress={() => onPress && onPress('clear')}
+        isCircle
+        buttonStyle={styles.buttonWithoutBorder}
+        style={styles.iconButton}
+        name="backspace"
+      />
+    </View>
+  </View>
+);
 
 export default NumericKeyboard;