diff --git a/src/components/mainButton/index.js b/src/components/mainButton/index.js
new file mode 100644
index 000000000..d7a48f861
--- /dev/null
+++ b/src/components/mainButton/index.js
@@ -0,0 +1,3 @@
+import MainButton from "./view/mainButtonView";
+
+export { MainButton };
diff --git a/src/components/mainButton/view/mainButtonStyles.js b/src/components/mainButton/view/mainButtonStyles.js
new file mode 100644
index 000000000..4d7541e72
--- /dev/null
+++ b/src/components/mainButton/view/mainButtonStyles.js
@@ -0,0 +1,36 @@
+import EStyleSheet from "react-native-extended-stylesheet";
+
+export default EStyleSheet.create({
+  wrapper: {},
+  touchable: {
+    width: 163,
+    height: 56,
+    borderRadius: 30,
+    backgroundColor: "#357ce6",
+    flexDirection: "row",
+    margin: 5,
+    shadowOffset: {
+      height: 5,
+    },
+    shadowColor: "#5f5f5fbf",
+    shadowOpacity: 0.3,
+  },
+  icon: {
+    alignSelf: "center",
+    fontSize: 25,
+    marginLeft: 20,
+  },
+  text: {
+    color: "white",
+    fontWeight: "400",
+    alignSelf: "center",
+    fontSize: 14,
+    paddingLeft: 10,
+    paddingRight: 20,
+  },
+  secondText: {
+    fontWeight: "bold",
+  },
+  activityIndicator: { alignSelf: "center", flex: 1 },
+  body: { flex: 1, flexDirection: "row" },
+});
diff --git a/src/components/mainButton/view/mainButtonView.js b/src/components/mainButton/view/mainButtonView.js
new file mode 100644
index 000000000..d1d46014e
--- /dev/null
+++ b/src/components/mainButton/view/mainButtonView.js
@@ -0,0 +1,76 @@
+import React, { Component, Fragment } from "react";
+import { View, Text, TouchableOpacity, ActivityIndicator } from "react-native";
+import Ionicons from "react-native-vector-icons/Ionicons";
+
+// Constants
+
+// Components
+
+// Styles
+import styles from "./mainButtonStyles";
+
+class MainButton extends Component {
+  /* Props
+    * ------------------------------------------------
+    *   @prop { string }     isLoading       - TODO:
+    *   @prop { string }     text              - TODO:
+    *   @prop { boolean }    secondText      - TODO:
+    *   @prop { boolean }    iconColor        - TODO:
+    *   @prop { boolean }    iconName           - TODO:
+    *   @prop { boolean }    isDisable   - TODO:
+    *
+    * 
+    */
+  constructor(props) {
+    super(props);
+
+    this.state = {};
+  }
+
+  // Component Life Cycles
+
+  // Component Functions
+  _handleOnPress = () => {
+    const { onPress, isDisable } = this.props;
+
+    onPress && !isDisable && onPress();
+  };
+
+  _getBody = () => {
+    const { isLoading, text, secondText, iconColor, iconName } = this.props;
+
+    if (isLoading) {
+      return (
+        <ActivityIndicator color="white" style={styles.activityIndicator} />
+      );
+    } else if (text) {
+      return (
+        <Fragment>
+          <Ionicons color={iconColor} name={iconName} style={styles.icon} />
+          <Text style={styles.text}>
+            {text}
+            {secondText && <Text style={styles.secondText}>{secondText}</Text>}
+          </Text>
+        </Fragment>
+      );
+    }
+    return <Ionicons color={iconColor} name={iconName} style={styles.icon} />;
+  };
+
+  render() {
+    const { wrapperStyle, isDisable } = this.props;
+
+    return (
+      <View style={wrapperStyle}>
+        <TouchableOpacity
+          onPress={() => this._handleOnPress()}
+          style={styles.touchable}
+        >
+          <View style={styles.body}>{this._getBody()}</View>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+}
+
+export default MainButton;
diff --git a/src/screens/login/screen/loginScreen.js b/src/screens/login/screen/loginScreen.js
index 45a5a6bbf..20a89cbf0 100644
--- a/src/screens/login/screen/loginScreen.js
+++ b/src/screens/login/screen/loginScreen.js
@@ -19,6 +19,7 @@ import { TabBar } from "../../../components/tabBar";
 import { LoginHeader } from "../../../components/loginHeader";
 import { FormInput } from "../../../components/formInput";
 import { InformationArea } from "../../../components/informationArea";
+import { MainButton } from "../../../components/mainButton";
 import ScrollableTabView from "@esteemapp/react-native-scrollable-tab-view";
 import { Login } from "../../../providers/steem/auth";
 
@@ -199,7 +200,7 @@ class LoginScreen extends Component {
                 removed upon logout!"
               iconName="ios-information-circle-outline"
             />
-            <View style={{ flexDirection: "row", margin: 30 }}>
+            <View style={{ flexDirection: "row" }}>
               <View style={{ flex: 0.6 }}>
                 <TouchableOpacity
                   onPress={goToAuthScreens}
@@ -219,101 +220,29 @@ class LoginScreen extends Component {
                   </Text>
                 </TouchableOpacity>
               </View>
-              <TouchableOpacity
-                onPress={this._handleOnPressLogin}
-                style={{
-                  flex: 0.4,
-                  width: 100,
-                  height: 50,
-                  borderRadius: 30,
-                  backgroundColor: "#357ce6",
-                  flexDirection: "row",
-                }}
-              >
-                {!this.state.isLoading ? (
-                  <View
-                    style={{
-                      flex: 1,
-                      flexDirection: "row",
-                    }}
-                  >
-                    <Ionicons
-                      color="white"
-                      name="md-person"
-                      style={{
-                        alignSelf: "center",
-                        fontSize: 25,
-                        flex: 0.4,
-                        left: 15,
-                      }}
-                    />
-                    <Text
-                      style={{
-                        color: "white",
-                        fontWeight: "600",
-                        alignSelf: "center",
-                        fontSize: 16,
-                        flex: 0.6,
-                      }}
-                    >
-                      LOGIN
-                    </Text>
-                  </View>
-                ) : (
-                  <ActivityIndicator
-                    color="white"
-                    style={{ alignSelf: "center", flex: 1 }}
-                  />
-                )}
-              </TouchableOpacity>
             </View>
+            <MainButton
+              wrapperStyle={styles.mainButtonWrapper}
+              onPress={this._handleOnPressLogin}
+              iconName="md-person"
+              iconColor="white"
+              text="LOGIN"
+              isLoading={this.state.isLoading}
+            />
           </View>
           <View tabLabel="SteemConnect" style={styles.steemConnectTab}>
             <InformationArea
               description="If you don't want to keep your password encrypted and saved on your device, you can use Steemconnect."
               iconName="ios-information-circle-outline"
             />
-            <View
-              style={{
-                alignItems: "flex-end",
-                backgroundColor: "#ffffff",
-              }}
-            >
-              <TouchableOpacity
-                onPress={this.loginwithSc2}
-                style={{
-                  width: 200,
-                  height: 50,
-                  borderRadius: 30,
-                  backgroundColor: "#357ce6",
-                  flexDirection: "row",
-                  margin: 20,
-                }}
-              >
-                <View style={{ flex: 1, flexDirection: "row" }}>
-                  <Ionicons
-                    color="white"
-                    name="md-person"
-                    style={{
-                      alignSelf: "center",
-                      fontSize: 25,
-                      marginHorizontal: 20,
-                    }}
-                  />
-                  <Text
-                    style={{
-                      color: "white",
-                      fontWeight: "400",
-                      alignSelf: "center",
-                      fontSize: 16,
-                    }}
-                  >
-                    steem
-                    <Text style={{ fontWeight: "800" }}>connect</Text>
-                  </Text>
-                </View>
-              </TouchableOpacity>
-            </View>
+            <MainButton
+              wrapperStyle={styles.mainButtonWrapper}
+              onPress={this.loginwithSc2}
+              iconName="md-person"
+              iconColor="white"
+              text="steem"
+              secondText="connect"
+            />
           </View>
         </ScrollableTabView>
       </View>
diff --git a/src/screens/login/screen/loginStyles.js b/src/screens/login/screen/loginStyles.js
index 5b10f1ea5..89e0c28b0 100644
--- a/src/screens/login/screen/loginStyles.js
+++ b/src/screens/login/screen/loginStyles.js
@@ -40,5 +40,13 @@ export default EStyleSheet.create({
   steemConnectTab: {
     backgroundColor: "#fff",
     minWidth: "$deviceWidth",
+    flex: 1,
+  },
+  mainButtonWrapper: {
+    position: "absolute",
+    flex: 0.1,
+    right: 24,
+    bottom: 24,
+    flexDirection: "row",
   },
 });