diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
new file mode 100644
index 00000000000..5290f8969fa
--- /dev/null
+++ b/.github/workflows/main.yml
@@ -0,0 +1,44 @@
+name: Build and Deploy
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 14
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Deploy to staging
+        uses: some-deployment-action@v1
+        with:
+          environment: staging
+          api-key: ${{ secrets.STAGING_API_KEY }}
+          region: us-west
+
+      - name: Deploy to production
+        uses: some-deployment-action@v1
+        with:
+          environment: production
+          api-key: ${{ secrets.PRODUCTION_API_KEY }}
+          region: us-east
diff --git a/documents/development-guidelines.md b/documents/development-guidelines.md
index 68f9f666ad6..64b809341e2 100644
--- a/documents/development-guidelines.md
+++ b/documents/development-guidelines.md
@@ -80,7 +80,7 @@ content: {
 // best practice
 content: {
     text: '_t_Our GitHub repositories: <0>github.com/binary-com</0>_t_',
-    components: [<br key={0} />],
+    components: [<Header key={0} type="br"/>],
 }
 
 <Header as="p">
diff --git a/src/pages/partners/_why-choose-us.tsx b/src/pages/partners/_why-choose-us.tsx
index c69da01d634..e28136d3ea0 100644
--- a/src/pages/partners/_why-choose-us.tsx
+++ b/src/pages/partners/_why-choose-us.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import styled from 'styled-components'
 import { Container, Flex, SectionContainer } from 'components/containers'
 import { Header, Text } from 'components/elements'
diff --git a/src/pages/partners/payment-agent/_who-can-apply.tsx b/src/pages/partners/payment-agent/_who-can-apply.tsx
index 62f8009e342..e6931a4f9f9 100644
--- a/src/pages/partners/payment-agent/_who-can-apply.tsx
+++ b/src/pages/partners/payment-agent/_who-can-apply.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import styled from 'styled-components'
 import {
     StyledSection,
@@ -33,7 +33,7 @@ type StyledLinkButtonProps = {
     id?: string
 }
 
-const StyledLinkButton = styled(LinkButton)<StyledLinkButtonProps>``
+const StyledLinkButton = styled(LinkButton)``
 
 const HeaderHowToApply = styled(SecondaryHeader)`
     @media ${device.tablet} {
diff --git a/src/pages/reset-password/index.tsx b/src/pages/reset-password/index.tsx
index 7edda039e55..aa9a45515cb 100644
--- a/src/pages/reset-password/index.tsx
+++ b/src/pages/reset-password/index.tsx
@@ -28,7 +28,19 @@ const ButtonContainer = styled.div`
     margin-top: 2rem;
 `
 
-const InputGroup = styled.div`
+const InputGroup = styled.div`width: 100%;
+    margin: 0 auto 3.4rem;
+    max-width: 40rem;
+    @media ${device.tabletL} {
+        width: 90%;
+    }
+  width: 100%;
+    margin: 0 auto 3.4rem;
+    max-width: 40rem;
+    @media ${device.tabletL} {
+        width: 90%;
+    }
+  
     width: 40rem;
     margin: 0 auto 3.4rem;
     @media ${device.tabletL} {
@@ -40,7 +52,53 @@ const StyledButton = styled(Button)`
     margin: 0.8rem 0.4rem;
 `
 
-const ResetPassword = () => {
+const ResetPassword = ({ children }) => {
+  const inputRef = React.useRef(null);
+  const [apiError, setApiError] = useState<string | null>('');
+  const initialValues: EmailType = { email: '' };
+
+  const resetSubmission = (values: EmailType, actions) => {
+    apiManager
+      .augmentedSend('verify_email', {
+        verify_email: trimSpaces(values.email),
+        type: 'reset_password',
+      })
+      .then((response) => {
+        actions.setSubmitting(false);
+
+        if (response.error) {
+          actions.setStatus({
+            error: response.error.message,
+          });
+          return;
+        }
+
+        actions.resetForm({ email: '' });
+        actions.setStatus({
+          success: localize(
+            '_t_Please check your email and click on the link provided to reset your password._t_',
+          ),
+        });
+      })
+      .catch((error) => {
+        if (error.msg_type === 'verify_email') {
+          const errorString = error.error.message.split(':');
+          setApiError(errorString[0]);
+        }
+      });
+  };
+
+  const resetValidation = (values: EmailType) => {
+    const errors: ErrorType = {};
+    const email = trimSpaces(values.email);
+    const email_error = validation.required(email) || validation.email(email);
+    setApiError('');
+    if (email_error) {
+      errors.email = email_error;
+    }
+
+    return errors;
+  };
     const [apiError, setApiError] = useState<string | null>('')
     const initialValues: EmailType = { email: '' }