diff --git a/app/client/src/constants/DefaultTheme.tsx b/app/client/src/constants/DefaultTheme.tsx
index b4ccba00d9..2b346a780d 100644
--- a/app/client/src/constants/DefaultTheme.tsx
+++ b/app/client/src/constants/DefaultTheme.tsx
@@ -749,11 +749,12 @@ const auth: any = {
   btnPrimary: "#F86A2B",
   inputBackground: darkShades[1],
   headingText: "#FFF",
-  link: "#457AE6",
+  link: "#106ba3",
   text: darkShades[7],
   placeholder: darkShades[5],
   socialBtnText: darkShades[8],
   socialBtnBorder: darkShades[8],
+  socialBtnHighlight: darkShades[1],
 };
 
 const formMessage = {
@@ -1434,13 +1435,13 @@ export const theme: Theme = {
     authCardHeader: {
       fontStyle: "normal",
       fontWeight: 600,
-      fontSize: 24,
+      fontSize: 25,
       lineHeight: 20,
     },
     authCardSubheader: {
       fontStyle: "normal",
       fontWeight: "normal",
-      fontSize: 14,
+      fontSize: 15,
       lineHeight: 20,
     },
   },
@@ -1593,9 +1594,9 @@ export const theme: Theme = {
     },
   },
   authCard: {
-    width: 400,
+    width: 440,
     dividerSpacing: 32,
-    formMessageWidth: 352,
+    formMessageWidth: 370,
   },
   shadows: [
     /* 0. tab */
diff --git a/app/client/src/constants/forms.ts b/app/client/src/constants/forms.ts
index 35de679c5d..f172b65000 100644
--- a/app/client/src/constants/forms.ts
+++ b/app/client/src/constants/forms.ts
@@ -7,6 +7,7 @@ export const LOGIN_FORM_EMAIL_FIELD_NAME = "username";
 export const LOGIN_FORM_PASSWORD_FIELD_NAME = "password";
 
 export const SIGNUP_FORM_NAME = "SignupForm";
+export const SIGNUP_FORM_EMAIL_FIELD_NAME = "email";
 export const FORGOT_PASSWORD_FORM_NAME = "ForgotPasswordForm";
 export const RESET_PASSWORD_FORM_NAME = "ResetPasswordForm";
 export const CREATE_PASSWORD_FORM_NAME = "CreatePasswordForm";
diff --git a/app/client/src/pages/UserAuth/Login.tsx b/app/client/src/pages/UserAuth/Login.tsx
index b357127400..e8ce8f4e0b 100644
--- a/app/client/src/pages/UserAuth/Login.tsx
+++ b/app/client/src/pages/UserAuth/Login.tsx
@@ -14,7 +14,6 @@ import {
   LOGIN_PAGE_PASSWORD_INPUT_LABEL,
   LOGIN_PAGE_PASSWORD_INPUT_PLACEHOLDER,
   LOGIN_PAGE_EMAIL_INPUT_PLACEHOLDER,
-  FORM_VALIDATION_EMPTY_EMAIL,
   FORM_VALIDATION_EMPTY_PASSWORD,
   FORM_VALIDATION_INVALID_EMAIL,
   FORM_VALIDATION_INVALID_PASSWORD,
@@ -53,16 +52,14 @@ const { enableGithubOAuth, enableGoogleOAuth } = getAppsmithConfigs();
 
 const validate = (values: LoginFormValues) => {
   const errors: LoginFormValues = {};
-  const email = values[LOGIN_FORM_EMAIL_FIELD_NAME];
+  const email = values[LOGIN_FORM_EMAIL_FIELD_NAME] || "";
   const password = values[LOGIN_FORM_PASSWORD_FIELD_NAME];
   if (!password || isEmptyString(password)) {
     errors[LOGIN_FORM_PASSWORD_FIELD_NAME] = FORM_VALIDATION_EMPTY_PASSWORD;
   } else if (!isStrongPassword(password)) {
     errors[LOGIN_FORM_PASSWORD_FIELD_NAME] = FORM_VALIDATION_INVALID_PASSWORD;
   }
-  if (!email || isEmptyString(email)) {
-    errors[LOGIN_FORM_EMAIL_FIELD_NAME] = FORM_VALIDATION_EMPTY_EMAIL;
-  } else if (!isEmail(email)) {
+  if (!isEmptyString(email) && !isEmail(email)) {
     errors[LOGIN_FORM_EMAIL_FIELD_NAME] = FORM_VALIDATION_INVALID_EMAIL;
   }
 
@@ -81,7 +78,8 @@ if (enableGoogleOAuth) SocialLoginList.push(SocialLoginTypes.GOOGLE);
 if (enableGithubOAuth) SocialLoginList.push(SocialLoginTypes.GITHUB);
 
 export const Login = (props: LoginFormProps) => {
-  const { error, valid } = props;
+  const { error, valid, emailValue: email } = props;
+  const isFormValid = valid && email && !isEmptyString(email);
   const location = useLocation();
 
   const queryParams = new URLSearchParams(location.search);
@@ -160,7 +158,7 @@ export const Login = (props: LoginFormProps) => {
           <Button
             tag="button"
             type="submit"
-            disabled={!valid}
+            disabled={!isFormValid}
             text={LOGIN_PAGE_LOGIN_BUTTON_TEXT}
             fill
             size={Size.large}
diff --git a/app/client/src/pages/UserAuth/SignUp.tsx b/app/client/src/pages/UserAuth/SignUp.tsx
index 3665d88f19..11f3dab7b4 100644
--- a/app/client/src/pages/UserAuth/SignUp.tsx
+++ b/app/client/src/pages/UserAuth/SignUp.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { reduxForm, InjectedFormProps } from "redux-form";
+import { reduxForm, InjectedFormProps, formValueSelector } from "redux-form";
 import { AUTH_LOGIN_URL } from "constants/routes";
 import { SIGNUP_FORM_NAME } from "constants/forms";
 import { RouteComponentProps, useLocation, withRouter } from "react-router-dom";
@@ -17,7 +17,6 @@ import {
   SIGNUP_PAGE_PASSWORD_INPUT_LABEL,
   SIGNUP_PAGE_PASSWORD_INPUT_PLACEHOLDER,
   SIGNUP_PAGE_LOGIN_LINK_TEXT,
-  FORM_VALIDATION_EMPTY_EMAIL,
   FORM_VALIDATION_EMPTY_PASSWORD,
   FORM_VALIDATION_INVALID_EMAIL,
   FORM_VALIDATION_INVALID_PASSWORD,
@@ -43,6 +42,9 @@ import PerformanceTracker, {
   PerformanceTransactionName,
 } from "utils/PerformanceTracker";
 import { setOnboardingState } from "utils/storage";
+
+import { SIGNUP_FORM_EMAIL_FIELD_NAME } from "constants/forms";
+
 const { enableGithubOAuth, enableGoogleOAuth } = getAppsmithConfigs();
 const SocialLoginList: string[] = [];
 if (enableGithubOAuth) SocialLoginList.push(SocialLoginTypes.GITHUB);
@@ -58,19 +60,24 @@ const validate = (values: SignupFormValues) => {
   } else if (!isStrongPassword(values.password)) {
     errors.password = FORM_VALIDATION_INVALID_PASSWORD;
   }
-  if (!values.email || isEmptyString(values.email)) {
-    errors.email = FORM_VALIDATION_EMPTY_EMAIL;
-  } else if (!isEmail(values.email)) {
+
+  const email = values.email || "";
+  if (!isEmptyString(email) && !isEmail(email)) {
     errors.email = FORM_VALIDATION_INVALID_EMAIL;
   }
   return errors;
 };
 
-type SignUpFormProps = InjectedFormProps<SignupFormValues> &
-  RouteComponentProps<{ email: string }> & { theme: Theme };
+type SignUpFormProps = InjectedFormProps<
+  SignupFormValues,
+  { emailValue: string }
+> &
+  RouteComponentProps<{ email: string }> & { theme: Theme; emailValue: string };
 
 export const SignUp = (props: SignUpFormProps) => {
-  const { error, submitting, pristine, valid } = props;
+  const { error, submitting, pristine, valid, emailValue: email } = props;
+  const isFormValid = valid && email && !isEmptyString(email);
+
   const location = useLocation();
 
   let showError = false;
@@ -133,7 +140,7 @@ export const SignUp = (props: SignUpFormProps) => {
           <Button
             tag="button"
             type="submit"
-            disabled={pristine || !valid}
+            disabled={pristine || !isFormValid}
             isLoading={submitting}
             text={SIGNUP_PAGE_SUBMIT_BUTTON_TEXT}
             fill
@@ -154,15 +161,17 @@ export const SignUp = (props: SignUpFormProps) => {
   );
 };
 
+const selector = formValueSelector(SIGNUP_FORM_NAME);
 export default connect((state: AppState, props: SignUpFormProps) => {
   const queryParams = new URLSearchParams(props.location.search);
   return {
     initialValues: {
       email: queryParams.get("email"),
     },
+    emailValue: selector(state, SIGNUP_FORM_EMAIL_FIELD_NAME),
   };
 }, null)(
-  reduxForm<SignupFormValues>({
+  reduxForm<SignupFormValues, { emailValue: string }>({
     validate,
     form: SIGNUP_FORM_NAME,
     touchOnBlur: true,
diff --git a/app/client/src/pages/UserAuth/StyledComponents.tsx b/app/client/src/pages/UserAuth/StyledComponents.tsx
index f55e09aa80..a1a0818a96 100644
--- a/app/client/src/pages/UserAuth/StyledComponents.tsx
+++ b/app/client/src/pages/UserAuth/StyledComponents.tsx
@@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
 import Form from "components/editorComponents/Form";
 import { Card } from "@blueprintjs/core";
 import { getTypographyByKey } from "constants/DefaultTheme";
+import { Classes } from "@blueprintjs/core";
 
 export const AuthContainer = styled.section`
   position: absolute;
@@ -13,6 +14,10 @@ export const AuthContainer = styled.section`
   flex-direction: column;
   align-items: center;
   overflow: auto;
+
+  & .${Classes.FORM_GROUP} {
+    margin: 0 0 ${(props) => props.theme.spaces[2]}px;
+  }
 `;
 
 export const AuthCardContainer = styled.div`
@@ -67,7 +72,13 @@ export const AuthCardHeader = styled.header`
   }
 `;
 
-export const AuthCardNavLink = styled(Link)``;
+export const AuthCardNavLink = styled(Link)`
+  border-bottom: 1px solid transparent;
+  &:hover {
+    border-bottom: 1px solid ${(props) => props.theme.colors.auth.link};
+    text-decoration: none;
+  }
+`;
 
 export const AuthCardFooter = styled.footer`
   display: flex;
@@ -102,7 +113,7 @@ export const FormActions = styled.div`
   }
   justify-content: space-between;
   align-items: baseline;
-  margin-top: ${(props) => props.theme.spaces[2]}px;
+  margin-top: ${(props) => props.theme.spaces[5]}px;
   & > label {
     margin-right: ${(props) => props.theme.spaces[11]}px;
   }
diff --git a/app/client/src/pages/UserAuth/ThirdPartyAuth.tsx b/app/client/src/pages/UserAuth/ThirdPartyAuth.tsx
index cfb346dee9..a608d9e778 100644
--- a/app/client/src/pages/UserAuth/ThirdPartyAuth.tsx
+++ b/app/client/src/pages/UserAuth/ThirdPartyAuth.tsx
@@ -35,6 +35,7 @@ const StyledSocialLoginButton = styled.a`
 
   &:hover {
     text-decoration: none;
+    background-color: ${(props) => props.theme.colors.auth.socialBtnHighlight};
   }
 
   & .login-method {
diff --git a/app/client/src/pages/common/LoginHeader.tsx b/app/client/src/pages/common/LoginHeader.tsx
index 3e3e38d87a..36ac879ded 100644
--- a/app/client/src/pages/common/LoginHeader.tsx
+++ b/app/client/src/pages/common/LoginHeader.tsx
@@ -14,7 +14,7 @@ const StyledPageHeader = styled(StyledHeader)`
   height: 48px;
   background: ${Colors.BALTIC_SEA};
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
   padding: 0px ${(props) => props.theme.spaces[12]};
 `;