diff --git a/twistter-frontend/src/pages/Login.js b/twistter-frontend/src/pages/Login.js
index 336255a..2585f2d 100644
--- a/twistter-frontend/src/pages/Login.js
+++ b/twistter-frontend/src/pages/Login.js
@@ -39,6 +39,9 @@ const styles = {
   },
   p: {
     fontFamily: "cursive",
+  },
+  div: {
+    backgroundColor: "lightgrey",
   }
 };
 
@@ -109,12 +112,14 @@ export class Login extends Component {
         <Grid item sm />
         <Grid item sm>
         <img src={logo} className="app-logo" alt="logo" />
+          <br></br>
           <br></br>
           <Typography variant="p" className={classes.pageTitle} fontFamily = "Georgia, serif">
-            <b>Log in to Twistter</b>
+            <b><font face="Segoe UI">Log in to Twistter</font></b>
             <br></br>
           </Typography>
           <br></br>
+          <div>
           <form noValidate onSubmit={this.handleSubmit}>
             <TextField
               id="email"
@@ -157,6 +162,7 @@ export class Login extends Component {
               <Typography color="error">Invalid username/email or password</Typography>
             )}
           </form>
+        </div>
         </Grid>
         <Grid item sm />
       </Grid>
diff --git a/twistter-frontend/src/pages/Signup.js b/twistter-frontend/src/pages/Signup.js
index 99afab3..bc2b3df 100644
--- a/twistter-frontend/src/pages/Signup.js
+++ b/twistter-frontend/src/pages/Signup.js
@@ -104,9 +104,10 @@ export class Signup extends Component {
         <Grid item sm />
         <Grid item sm>
         <img src={logo} className="app-logo" alt="logo" />
+          <br></br>
           <br></br>
           <Typography variant="p" className={classes.pageTitle}>
-            <b>Create a new account</b>
+            <b><font face="Segoe UI">Create a new account</font></b>
             <br></br>
           </Typography>
           <br></br>