diff --git a/app/src/__tests__/components/auth/AuthPage.spec.tsx b/app/src/__tests__/components/auth/AuthPage.spec.tsx
index d6d643352..a3ed94562 100644
--- a/app/src/__tests__/components/auth/AuthPage.spec.tsx
+++ b/app/src/__tests__/components/auth/AuthPage.spec.tsx
@@ -26,14 +26,9 @@ describe('AuthPage ', () => {
     expect(getByText('Terminal')).toBeInTheDocument();
   });
 
-  it('should display the password field', () => {
-    const { getByLabelText } = render();
-    expect(getByLabelText('Enter your password in the field above')).toBeInTheDocument();
-  });
-
-  it('should display the submit button', () => {
+  it('should display the login button', () => {
     const { getByText } = render();
-    expect(getByText('Submit')).toBeInTheDocument();
+    expect(getByText('Login')).toBeInTheDocument();
   });
 
   it('should display nothing when the store is not initialized', () => {
@@ -49,7 +44,7 @@ describe('AuthPage ', () => {
 
   it('should display an error when submitting an empty password', async () => {
     const { getByText, findByText } = render();
-    fireEvent.click(getByText('Submit'));
+    fireEvent.click(getByText('Login'));
     expect(await findByText('oops, password is required')).toBeInTheDocument();
   });
 
@@ -59,10 +54,8 @@ describe('AuthPage ', () => {
       return undefined as any;
     });
 
-    const { getByText, getByLabelText, findByText } = render();
-    const input = getByLabelText('Enter your password in the field above');
-    fireEvent.change(input, { target: { value: 'test-pw' } });
-    fireEvent.click(getByText('Submit'));
+    const { getByText, findByText } = render();
+    fireEvent.click(getByText('Login'));
     expect(await findByText('oops, that password is incorrect')).toBeInTheDocument();
   });
 });
diff --git a/app/src/components/auth/AuthPage.tsx b/app/src/components/auth/AuthPage.tsx
index f1782b330..20185acb8 100644
--- a/app/src/components/auth/AuthPage.tsx
+++ b/app/src/components/auth/AuthPage.tsx
@@ -4,7 +4,8 @@ import styled from '@emotion/styled';
 import { ReactComponent as LogoImage } from 'assets/images/logo.svg';
 import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
-import { Background, Button, HeaderOne, Input } from 'components/base';
+import { Background, HeaderOne, Input } from 'components/base';
+import PurpleButton from 'components/connect/PurpleButton';
 
 const Styled = {
   Wrapper: styled.div`
@@ -16,20 +17,24 @@ const Styled = {
     height: 100%;
   `,
   Logo: styled(LogoImage)`
-    color: ${props => props.theme.colors.offWhite};
-    width: 80px;
-    height: 156px;
-    margin-bottom: 30px;
+    color: ${props => props.theme.colors.white};
+    width: 60px;
+    height: 80px;
+    margin-bottom: 32px;
   `,
   Title: styled(HeaderOne)`
-    font-size: 75px;
-    margin-bottom: 30px;
+    color: ${props => props.theme.colors.white};
+    font-size: 48px;
+    line-height: 48px;
+    margin-bottom: 0px;
     text-transform: uppercase;
   `,
   Subtitle: styled.div`
+    color: ${props => props.theme.colors.gray};
     width: 100%;
-    max-width: 500px;
-    margin-bottom: 80px;
+    max-width: 400px;
+    margin-top: 24px;
+    margin-bottom: 24px;
     text-align: center;
   `,
   Form: styled.form`
@@ -37,19 +42,31 @@ const Styled = {
     flex-direction: column;
     align-items: center;
   `,
+  Input: styled(Input)`
+    font-size: ${props => props.theme.sizes.l};
+    width: 100%;
+    color: ${props => props.theme.colors.white};
+    padding: 8px 0px;
+    border-width: 0;
+    border-bottom: 2px solid ${props => props.theme.colors.gray};
+    min-width: 360px;
+    outline: none;
+  `,
   Label: styled.label`
     margin: 10px 0 80px;
   `,
   ErrMessage: styled.div`
     width: 100%;
-    margin: 0 0 80px;
-    padding: 5px 0;
-    background-color: ${props => props.theme.colors.pink};
-    color: ${props => props.theme.colors.offWhite};
-    text-align: center;
+    padding: 8px 0;
+    color: ${props => props.theme.colors.lightningRed};
+    text-align: left;
   `,
-  Submit: styled(Button)`
-    background-color: transparent;
+  PurpleButton: styled(PurpleButton)`
+    font-size: ${props => props.theme.sizes.s};
+    margin-top: 32px;
+    line-height: 24px;
+    padding: 12px 24px;
+    width: 100%;
   `,
 };
 
@@ -77,7 +94,16 @@ const AuthPage: React.FC = () => {
   // a UI flicker while validating credentials stored in session storage
   if (!store.initialized) return null;
 
-  const { Wrapper, Logo, Title, Subtitle, Form, Label, ErrMessage, Submit } = Styled;
+  const {
+    Wrapper,
+    Logo,
+    Title,
+    Subtitle,
+    Form,
+    Input,
+    ErrMessage,
+    PurpleButton,
+  } = Styled;
   return (
     <Background gradient>
       <Wrapper>
@@ -92,13 +118,10 @@ const AuthPage: React.FC = () => {
             autoFocus
             value={pass}
             onChange={handleChange}
+            placeholder="Password"
           />
-          {error ? (
-            <ErrMessage>{error}</ErrMessage>
-          ) : (
-            <Label htmlFor="auth">{l('passLabel')}</Label>
-          )}
-          <Submit>{l('submitBtn')}</Submit>
+          {error && <ErrMessage>{error}</ErrMessage>}
+          <PurpleButton>{l('loginBtn')}</PurpleButton>
         </Form>
       </Wrapper>
     </Background>
diff --git a/app/src/components/base/shared.tsx b/app/src/components/base/shared.tsx
index a7e607b93..3c1b034d7 100644
--- a/app/src/components/base/shared.tsx
+++ b/app/src/components/base/shared.tsx
@@ -8,8 +8,7 @@ import Chevrons from 'assets/icons/chevrons.svg';
 export const Background = styled.div<{ gradient?: boolean }>`
   height: 100%;
   color: ${props => props.theme.colors.white};
-  background: ${props =>
-    props.gradient ? props.theme.colors.gradient : props.theme.colors.blue};
+  background: radial-gradient(#1d273f, #101727);
   font-family: ${props => props.theme.fonts.open.regular};
   font-size: ${props => props.theme.sizes.m};
 `;
@@ -170,15 +169,20 @@ export const Button = styled.button<ButtonProps>`
 `;
 
 export const Input = styled.input`
-  font-family: ${props => props.theme.fonts.work.light};
-  font-weight: 300;
+  font-family: ${props => props.theme.fonts.open.regular};
+  font-weight: 500;
   font-size: ${props => props.theme.sizes.xxl};
   color: ${props => props.theme.colors.offWhite};
   background-color: transparent;
   border-width: 0;
-  border-bottom: 3px solid ${props => props.theme.colors.offWhite};
-  padding: 5px;
-  text-align: center;
+  border-bottom: 2px solid ${props => props.theme.colors.offWhite};
+  padding: 8px;
+  text-align: left;
+  transition: all 200ms;
+
+  &:hover {
+    border-bottom-color: ${props => props.theme.colors.white};
+  }
 
   &:active,
   &:focus {
@@ -193,13 +197,13 @@ export const Input = styled.input`
 `;
 
 export const TextArea = styled.textarea`
-  font-family: ${props => props.theme.fonts.work.light};
+  font-family: ${props => props.theme.fonts.open.regular};
   font-weight: 300;
   font-size: ${props => props.theme.sizes.m};
   color: ${props => props.theme.colors.offWhite};
   background-color: ${props => props.theme.colors.overlay};
   border-width: 0;
-  border-bottom: 3px solid ${props => props.theme.colors.offWhite};
+  border-bottom: 3px solid ${props => props.theme.colors.gray};
   padding: 5px;
 
   &:active,
diff --git a/app/src/i18n/locales/en-US.json b/app/src/i18n/locales/en-US.json
index a6bfb67e1..ab51efca9 100644
--- a/app/src/i18n/locales/en-US.json
+++ b/app/src/i18n/locales/en-US.json
@@ -26,7 +26,7 @@
   "cmps.auth.AuthPage.terminal": "Terminal",
   "cmps.auth.AuthPage.subtitle": "Efficiently manage Lightning node liquidity",
   "cmps.auth.AuthPage.passLabel": "Enter your password in the field above",
-  "cmps.auth.AuthPage.submitBtn": "Submit",
+  "cmps.auth.AuthPage.loginBtn": "Login",
   "cmps.common.Tile.maximizeTip": "Maximize",
   "cmps.common.PageHeader.exportTip": "Download CSV",
   "cmps.common.PageHeader.helpTip": "Take a Tour",