diff --git a/src/components/Card/Title.tsx b/src/components/Card/Title.tsx
new file mode 100644
index 000000000..2a86035ab
--- /dev/null
+++ b/src/components/Card/Title.tsx
@@ -0,0 +1,19 @@
+import React, { FC } from 'react';
+import { Typography, TypographyProps } from '@mui/material';
+
+const CardTitle: FC<TypographyProps> = (props) => {
+    return (
+        <Typography
+            sx={{
+                fontSize: '32px',
+                fontWeight: '600',
+                textAlign: 'left',
+                mb: 8,
+            }}
+            {...props}>
+            {props.children}
+        </Typography>
+    );
+};
+
+export default CardTitle;
diff --git a/src/components/SignUp.tsx b/src/components/SignUp.tsx
index 8a2399f86..f99742ebb 100644
--- a/src/components/SignUp.tsx
+++ b/src/components/SignUp.tsx
@@ -1,25 +1,30 @@
 import React, { useState } from 'react';
-import Form from 'react-bootstrap/Form';
-import FormControl from 'react-bootstrap/FormControl';
 import constants from 'utils/strings/constants';
 import { Formik, FormikHelpers } from 'formik';
 import * as Yup from 'yup';
 import { getOtt } from 'services/userService';
-import Card from 'react-bootstrap/Card';
 import { setData, LS_KEYS } from 'utils/storage/localStorage';
 import { useRouter } from 'next/router';
 import SubmitButton from 'components/SubmitButton';
-import { Button } from 'react-bootstrap';
 import {
     generateAndSaveIntermediateKeyAttributes,
     generateKeyAttributes,
     SaveKeyInSessionStore,
 } from 'utils/crypto';
 import { setJustSignedUp } from 'utils/storage';
-import LogoImg from './LogoImg';
 import { logError } from 'utils/sentry';
 import { SESSION_KEYS } from 'utils/storage/sessionStorage';
 import { PAGES } from 'constants/pages';
+import {
+    Checkbox,
+    Container,
+    Divider,
+    FormControlLabel,
+    FormGroup,
+    TextField,
+} from '@mui/material';
+import CardTitle from './Card/Title';
+import LinkButton from './pages/gallery/LinkButton';
 
 interface FormValues {
     email: string;
@@ -87,10 +92,7 @@ export default function SignUp(props: SignUpProps) {
 
     return (
         <>
-            <Card.Title style={{ marginBottom: '32px' }}>
-                <LogoImg src="/icon.svg" />
-                {constants.SIGN_UP}
-            </Card.Title>
+            <CardTitle> {constants.SIGN_UP}</CardTitle>
             <Formik<FormValues>
                 initialValues={{
                     email: '',
@@ -110,83 +112,87 @@ export default function SignUp(props: SignUpProps) {
                 {({
                     values,
                     errors,
-                    touched,
                     handleChange,
                     handleSubmit,
                 }): JSX.Element => (
-                    <Form noValidate onSubmit={handleSubmit}>
-                        <Form.Group controlId="registrationForm.email">
-                            <Form.Control
-                                type="email"
-                                placeholder={constants.ENTER_EMAIL}
-                                value={values.email}
-                                onChange={handleChange('email')}
-                                isInvalid={Boolean(
-                                    touched.email && errors.email
-                                )}
-                                autoFocus
-                                disabled={loading}
+                    <>
+                        <form noValidate onSubmit={handleSubmit}>
+                            <Container disableGutters sx={{ mb: 1 }}>
+                                <TextField
+                                    variant="filled"
+                                    fullWidth
+                                    margin="dense"
+                                    type="email"
+                                    label={constants.ENTER_EMAIL}
+                                    value={values.email}
+                                    onChange={handleChange('email')}
+                                    error={Boolean(errors.email)}
+                                    helperText={errors.email}
+                                    autoFocus
+                                    disabled={loading}
+                                />
+
+                                <TextField
+                                    fullWidth
+                                    variant="filled"
+                                    margin="dense"
+                                    type="password"
+                                    label={constants.PASSPHRASE_HINT}
+                                    value={values.passphrase}
+                                    onChange={handleChange('passphrase')}
+                                    error={Boolean(errors.passphrase)}
+                                    helperText={errors.passphrase}
+                                    disabled={loading}
+                                />
+
+                                <TextField
+                                    fullWidth
+                                    variant="filled"
+                                    margin="dense"
+                                    type="password"
+                                    label={constants.CONFIRM_PASSPHRASE}
+                                    value={values.confirm}
+                                    onChange={handleChange('confirm')}
+                                    error={Boolean(errors.confirm)}
+                                    helperText={errors.confirm}
+                                    disabled={loading}
+                                />
+                                <FormGroup>
+                                    <FormControlLabel
+                                        sx={{
+                                            color: 'text.secondary',
+                                            mt: 2,
+                                        }}
+                                        control={
+                                            <Checkbox
+                                                disabled={loading}
+                                                checked={acceptTerms}
+                                                onChange={(e) =>
+                                                    setAcceptTerms(
+                                                        e.target.checked
+                                                    )
+                                                }
+                                                color="success"
+                                            />
+                                        }
+                                        label={constants.TERMS_AND_CONDITIONS()}
+                                    />
+                                </FormGroup>
+                            </Container>
+                            <SubmitButton
+                                buttonText={constants.CREATE_ACCOUNT}
+                                loading={loading}
+                                disabled={!acceptTerms}
                             />
-                            <FormControl.Feedback type="invalid">
-                                {errors.email}
-                            </FormControl.Feedback>
-                        </Form.Group>
-                        <Form.Group>
-                            <Form.Control
-                                type="password"
-                                placeholder={constants.PASSPHRASE_HINT}
-                                value={values.passphrase}
-                                onChange={handleChange('passphrase')}
-                                isInvalid={Boolean(
-                                    touched.passphrase && errors.passphrase
-                                )}
-                                disabled={loading}
-                            />
-                            <Form.Control.Feedback type="invalid">
-                                {errors.passphrase}
-                            </Form.Control.Feedback>
-                        </Form.Group>
-                        <Form.Group>
-                            <Form.Control
-                                type="password"
-                                placeholder={constants.RE_ENTER_PASSPHRASE}
-                                value={values.confirm}
-                                onChange={handleChange('confirm')}
-                                isInvalid={Boolean(
-                                    touched.confirm && errors.confirm
-                                )}
-                                disabled={loading}
-                            />
-                            <Form.Control.Feedback type="invalid">
-                                {errors.confirm}
-                            </Form.Control.Feedback>
-                        </Form.Group>
-                        <Form.Group
-                            style={{
-                                marginBottom: '0',
-                                textAlign: 'left',
-                            }}
-                            controlId="formBasicCheckbox-1">
-                            <Form.Check
-                                checked={acceptTerms}
-                                onChange={(e) =>
-                                    setAcceptTerms(e.target.checked)
-                                }
-                                type="checkbox"
-                                label={constants.TERMS_AND_CONDITIONS()}
-                            />
-                        </Form.Group>
-                        <br />
-                        <SubmitButton
-                            buttonText={constants.SUBMIT}
-                            loading={loading}
-                            disabled={!acceptTerms}
-                        />
-                        <br />
-                        <Button block variant="link" onClick={props.login}>
+                        </form>
+                        <Divider />
+                        <LinkButton
+                            onClick={props.login}
+                            color={'text.secondary'}
+                            sx={{ mt: 3 }}>
                             {constants.ACCOUNT_EXISTS}
-                        </Button>
-                    </Form>
+                        </LinkButton>
+                    </>
                 )}
             </Formik>
         </>
diff --git a/src/components/SubmitButton.tsx b/src/components/SubmitButton.tsx
index c68c3cfdc..b7c9dd6e4 100644
--- a/src/components/SubmitButton.tsx
+++ b/src/components/SubmitButton.tsx
@@ -15,7 +15,8 @@ const SubmitButton: FC<ButtonProps<'button', Props>> = ({
 }: Props) => {
     return (
         <Button
-            sx={{ my: 2 }}
+            size="large"
+            sx={{ my: 4, p: '12.25px', fontSize: '18px' }}
             variant="contained"
             color="success"
             type="submit"
diff --git a/src/components/pages/gallery/LinkButton.tsx b/src/components/pages/gallery/LinkButton.tsx
index aebfea258..ee6339ec7 100644
--- a/src/components/pages/gallery/LinkButton.tsx
+++ b/src/components/pages/gallery/LinkButton.tsx
@@ -31,13 +31,20 @@ export function getVariantColor(variant: string) {
 
 const LinkButton: FC<LinkProps<'button', { color?: ButtonProps['color'] }>> = ({
     children,
+    sx,
     ...props
 }) => {
     return (
         <Link
             component="button"
-            {...props}
-            sx={{ color: props.color && `${props.color}.main` }}>
+            sx={{
+                color:
+                    props.color && typeof props.color === 'object'
+                        ? `${props.color}.main`
+                        : props.color,
+                ...sx,
+            }}
+            {...props}>
             {children}
         </Link>
     );
diff --git a/src/darkThemeOptions.tsx b/src/darkThemeOptions.tsx
index 4ba096612..e2f153677 100644
--- a/src/darkThemeOptions.tsx
+++ b/src/darkThemeOptions.tsx
@@ -34,7 +34,20 @@ const darkThemeOptions = createTheme({
     components: {
         MuiPaper: {
             styleOverrides: {
-                root: { borderRadius: '8px', backgroundColor: '#040404' },
+                root: { borderRadius: '8px', backgroundColor: '#0f0f0f' },
+            },
+        },
+        MuiLink: {
+            defaultProps: {
+                color: 'inherit',
+            },
+            styleOverrides: {
+                root: {
+                    textDecorationColor: 'inherit',
+                    '&:hover': {
+                        color: 'hsla(141, 66%, 50%, 1)',
+                    },
+                },
             },
         },
         MuiButton: {
diff --git a/src/pages/signup/index.tsx b/src/pages/signup/index.tsx
index 78d2e5e27..1b141096d 100644
--- a/src/pages/signup/index.tsx
+++ b/src/pages/signup/index.tsx
@@ -1,12 +1,13 @@
 import React, { useState, useEffect, useContext } from 'react';
 import { useRouter } from 'next/router';
-import Card from 'react-bootstrap/Card';
 import { AppContext } from 'pages/_app';
 import Container from 'components/Container';
 import EnteSpinner from 'components/EnteSpinner';
 import { getData, LS_KEYS } from 'utils/storage/localStorage';
 import SignUp from 'components/SignUp';
 import { PAGES } from 'constants/pages';
+import Card from '@mui/material/Card';
+import { CardContent } from '@mui/material';
 
 export default function SignUpPage() {
     const router = useRouter();
@@ -29,14 +30,14 @@ export default function SignUpPage() {
     };
 
     return (
-        <Container>
+        <Container style={{ alignItems: 'flex-end' }}>
             {loading ? (
                 <EnteSpinner />
             ) : (
-                <Card style={{ minWidth: '320px' }} className="text-center">
-                    <Card.Body style={{ padding: '40px 30px' }}>
+                <Card sx={{ maxWidth: '360px' }}>
+                    <CardContent sx={{ py: 4, px: 2 }}>
                         <SignUp login={login} />
-                    </Card.Body>
+                    </CardContent>
                 </Card>
             )}
         </Container>
diff --git a/src/styles/global.css b/src/styles/global.css
index 916e7c9ea..60d12dbfd 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -233,12 +233,8 @@ html, body {
     background-color: #44774d;
 }
 
-a {
-    color: #fff;
-}
-a:hover {
-    color: #51cd7c;
-}
+
+
 .btn-link {
     color: #fff;
 }
@@ -469,9 +465,7 @@ div.otp-input input:not(:placeholder-shown) , div.otp-input input:focus{
 .react-datepicker__day--disabled:hover {
     background-color: #202020;
 }
-.ente-form-group{
-    margin:0;
-}
+
 .form-check-input:hover, .form-check-label :hover{
     cursor:pointer;
 }
diff --git a/src/utils/strings/englishConstants.tsx b/src/utils/strings/englishConstants.tsx
index 502eb0fc8..7f188038d 100644
--- a/src/utils/strings/englishConstants.tsx
+++ b/src/utils/strings/englishConstants.tsx
@@ -1,3 +1,4 @@
+import Link from '@mui/material/Link';
 import React from 'react';
 import styled from 'styled-components';
 
@@ -49,7 +50,7 @@ const englishConstants = {
         'reliably replicated to a fallout shelter, designed to outlive',
     COMPANY_NAME: 'ente',
     LOGIN: 'log in',
-    SIGN_UP: 'sign up',
+    SIGN_UP: 'Signup',
     NAME: 'name',
     ENTER_NAME: 'your name',
     EMAIL: 'email',
@@ -89,8 +90,7 @@ const englishConstants = {
         </p>
     ),
     PASSPHRASE_HINT: 'password',
-    RE_ENTER_PASSPHRASE: 'password again',
-    CONFIRM_PASSPHRASE: 'confirm your password',
+    CONFIRM_PASSPHRASE: 'confirm password',
     PASSPHRASE_MATCH_ERROR: "passwords don't match",
     CONSOLE_WARNING_STOP: 'STOP!',
     CONSOLE_WARNING_DESC:
@@ -389,16 +389,19 @@ const englishConstants = {
         <span>try searching for New York, April 14, Christmas...</span>
     ),
     TERMS_AND_CONDITIONS: () => (
-        <p>
+        <>
             I agree to the{' '}
-            <a href="https://ente.io/terms" target="_blank" rel="noreferrer">
+            <Link href="https://ente.io/terms" target="_blank" rel="noreferrer">
                 terms
-            </a>{' '}
+            </Link>{' '}
             and{' '}
-            <a href="https://ente.io/privacy" target="_blank" rel="noreferrer">
+            <Link
+                href="https://ente.io/privacy"
+                target="_blank"
+                rel="noreferrer">
                 privacy policy
-            </a>{' '}
-        </p>
+            </Link>{' '}
+        </>
     ),
     CONFIRM_PASSWORD_NOT_SAVED: () => (
         <p>
@@ -722,6 +725,7 @@ const englishConstants = {
     ENDS: 'Ends',
     ENTER_TWO_FACTOR_OTP:
         ' enter the 6-digit code from your authenticator app.',
+    CREATE_ACCOUNT: 'Create Account',
 };
 
 export default englishConstants;