diff --git a/frontend/client/src/components/NavBar.js b/frontend/client/src/components/NavBar.js
index f82bdd99..99eb780a 100644
--- a/frontend/client/src/components/NavBar.js
+++ b/frontend/client/src/components/NavBar.js
@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
 import { Redirect, Link } from 'react-router-dom'
-import { makeStyles } from '@material-ui/core/styles'
 import IconButton from '@material-ui/core/IconButton'
 import MenuItem from '@material-ui/core/MenuItem'
 import Menu from '@material-ui/core/Menu'
@@ -11,30 +10,7 @@ import { withStore } from '../store'
 import { observer } from 'mobx-react'
 import menu from '../../assets/menu.svg'
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    flexGrow: 1,
-  },
-  menuButton: {
-    marginRight: theme.spacing(11),
-  },
-  title: {
-    flexGrow: 1,
-  },
-  link: {
-    marginTop: 14,
-    paddingLeft: 30,
-    paddingRight: 30,
-    fontFamily: 'Montserrat',
-    fontSize: 18,
-    fontWeight: 500,
-    color: '#2c58b1',
-  },
-}))
-
 const NavBarBase = observer((props) => {
-  const classes = useStyles()
-
   const [redirect, setRedirect] = useState(-1)
   const [anchorEl, setAnchorEl] = useState(null)
   const open = Boolean(anchorEl)
@@ -72,7 +48,7 @@ const NavBarBase = observer((props) => {
       </div>
       <div className="avatar_group separator" />
 
-      <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu" onClick={handleMenu}>
+      <IconButton edge="start" className="menu-btn" color="inherit" aria-label="menu" onClick={handleMenu}>
         <img src={menu} alt="Menu" />
       </IconButton>
       <Menu
@@ -90,23 +66,23 @@ const NavBarBase = observer((props) => {
         open={open}
         onClose={handleClose}
       >
-        <MenuItem className={classes.link} style={{ marginTop: 22 }} onClick={() => onClickMenuItem(0)}>
+        <MenuItem className="menu-link" style={{ marginTop: 22 }} onClick={() => onClickMenuItem(0)}>
           Diagnosis Verification Codes
         </MenuItem>
         {props.store.data.user.isAdmin && (
-          <MenuItem className={classes.link} onClick={() => onClickMenuItem(1)}>
+          <MenuItem className="menu-link" onClick={() => onClickMenuItem(1)}>
             Manage Members
           </MenuItem>
         )}
         {props.store.data.user.isAdmin && (
-          <MenuItem className={classes.link} onClick={() => onClickMenuItem(2)}>
+          <MenuItem className="menu-link" onClick={() => onClickMenuItem(2)}>
             Mobile App Settings
           </MenuItem>
         )}
-        <MenuItem className={classes.link} onClick={() => onClickMenuItem(3)}>
+        <MenuItem className="menu-link" onClick={() => onClickMenuItem(3)}>
           My Settings
         </MenuItem>
-        <MenuItem className={classes.link} style={{ marginBottom: 22 }} onClick={() => onClickMenuItem(4)}>
+        <MenuItem className="menu-link" style={{ marginBottom: 22 }} onClick={() => onClickMenuItem(4)}>
           Logout
         </MenuItem>
       </Menu>
diff --git a/frontend/client/src/screens/Settings.js b/frontend/client/src/screens/Settings.js
index 4ba7d3e4..4f2fa8c8 100644
--- a/frontend/client/src/screens/Settings.js
+++ b/frontend/client/src/screens/Settings.js
@@ -1,7 +1,6 @@
 import React, { useRef, Fragment, useState } from 'react'
 import Grid from '@material-ui/core/Grid'
 import Modal from '../components/Modal'
-import { makeStyles } from '@material-ui/core/styles'
 import * as ROLES from '../constants/roles'
 import Toast from '../components/Toast'
 import { Redirect } from 'react-router-dom'
@@ -15,31 +14,8 @@ import PendingOperationButton from '../components/PendingOperationButton'
 import ResetPasswordModal from '../components/ResetPasswordModal'
 import CircularProgress from '@material-ui/core/CircularProgress'
 
-const useStyles = makeStyles({
-  root: {
-    marginTop: 10,
-    padding: 40,
-    paddingLeft: 8,
-  },
-})
-
-const inputStyles = makeStyles({
-  root: {
-    lineHeight: '16px',
-    borderRadius: 4,
-    border: '2px solid #BDBDBD',
-    boxSizing: 'border-box',
-    width: '75%',
-    height: 40,
-    marginTop: 10,
-    marginBottom: 40,
-  },
-})
-
 const MAXFILESIZE = 10 * 1024 * 1024
 const SettingsBase = observer((props) => {
-  const classes = useStyles()
-  const input = inputStyles()
   const imgUploader = useRef()
 
   const [open, setOpen] = useState(false)
@@ -163,7 +139,12 @@ const SettingsBase = observer((props) => {
       containerClass="changeImageModalContainer"
     >
       <div>
-        <input type="file" ref={imgUploader} accepts="image/jpeg, image/png" />
+        <input
+          type="file"
+          ref={imgUploader}
+          accepts="image/jpeg, image/png"
+          style={{ border: 'none', marginTop: '25px', marginBottom: '15px' }}
+        />
         <PendingOperationButton operation={saveImage} className="save-button">
           Upload
         </PendingOperationButton>
@@ -174,7 +155,7 @@ const SettingsBase = observer((props) => {
   const settingsForm = () => (
     <Fragment>
       <form>
-        <Grid container className={classes.root} spacing={2} direction="row" justify="center">
+        <Grid container id="settings-grid" spacing={2} direction="row" justify="center">
           <Grid item xs={4} xl={2}>
             <Grid container spacing={2} direction="column">
               <label> Profile Photo </label>
@@ -218,7 +199,6 @@ const SettingsBase = observer((props) => {
                 type="text"
                 id="prefix"
                 name="prefix"
-                className={input.root}
                 onChange={onChange}
                 value={props.store.data.user.prefix}
               ></input>
@@ -229,7 +209,6 @@ const SettingsBase = observer((props) => {
                 name="firstName"
                 required
                 aria-required="true"
-                className={input.root}
                 onChange={onChange}
                 value={props.store.data.user.firstName}
               ></input>
@@ -241,7 +220,6 @@ const SettingsBase = observer((props) => {
                 required
                 disabled={true}
                 aria-required="true"
-                className={input.root}
                 style={{ backgroundColor: '#e0e0e0' }}
                 value={props.store.data.user.email}
               ></input>
@@ -259,7 +237,6 @@ const SettingsBase = observer((props) => {
                   disabled={true}
                   required
                   aria-required="true"
-                  className={input.root}
                   style={{ backgroundColor: '#e0e0e0' }}
                   value={props.store.data.user.isAdmin ? ROLES.ADMIN_LABEL : ROLES.NON_ADMIN_LABEL}
                 ></input>
@@ -272,7 +249,6 @@ const SettingsBase = observer((props) => {
                 required
                 aria-required="true"
                 onChange={onChange}
-                className={input.root}
                 defaultValue={props.store.data.user.lastName}
               ></input>
               <label htmlFor="password">Password</label>
@@ -284,7 +260,6 @@ const SettingsBase = observer((props) => {
                 disabled={true}
                 required
                 aria-required="true"
-                className={input.root}
                 defaultValue=" • • • • • • • •"
               ></input>
               <a
diff --git a/frontend/client/src/util/sample.js b/frontend/client/src/util/sample.js
deleted file mode 100644
index 16cda26f..00000000
--- a/frontend/client/src/util/sample.js
+++ /dev/null
@@ -1,108 +0,0 @@
-import React from 'react'
-import Avatar from '@material-ui/core/Avatar'
-import Button from '@material-ui/core/Button'
-import CssBaseline from '@material-ui/core/CssBaseline'
-import TextField from '@material-ui/core/TextField'
-import FormControlLabel from '@material-ui/core/FormControlLabel'
-import Checkbox from '@material-ui/core/Checkbox'
-import Link from '@material-ui/core/Link'
-import Grid from '@material-ui/core/Grid'
-import Box from '@material-ui/core/Box'
-import LockOutlinedIcon from '@material-ui/icons/LockOutlined'
-import Typography from '@material-ui/core/Typography'
-import { makeStyles } from '@material-ui/core/styles'
-import Container from '@material-ui/core/Container'
-
-function Copyright() {
-  return (
-    <Typography variant="body2" color="textSecondary" align="center">
-      {'Copyright © '}
-      <Link color="inherit" href="https://material-ui.com/">
-        Your Website
-      </Link>{' '}
-      {new Date().getFullYear()}
-      {'.'}
-    </Typography>
-  )
-}
-
-const useStyles = makeStyles((theme) => ({
-  paper: {
-    marginTop: theme.spacing(8),
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-  },
-  avatar: {
-    margin: theme.spacing(1),
-    backgroundColor: theme.palette.secondary.main,
-  },
-  form: {
-    width: '100%', // Fix IE 11 issue.
-    marginTop: theme.spacing(1),
-  },
-  submit: {
-    margin: theme.spacing(3, 0, 2),
-  },
-}))
-
-export default function SignIn() {
-  const classes = useStyles()
-
-  return (
-    <Container component="main" maxWidth="xs">
-      <CssBaseline />
-      <div className={classes.paper}>
-        <Avatar className={classes.avatar}>
-          <LockOutlinedIcon />
-        </Avatar>
-        <Typography component="h1" variant="h5">
-          Sign in
-        </Typography>
-        <form className={classes.form} noValidate>
-          <TextField
-            variant="outlined"
-            margin="normal"
-            required
-            fullWidth
-            id="email"
-            label="Email Address"
-            name="email"
-            autoComplete="email"
-            autoFocus
-          />
-          <TextField
-            variant="outlined"
-            margin="normal"
-            required
-            fullWidth
-            name="password"
-            label="Password"
-            type="password"
-            id="password"
-            autoComplete="current-password"
-          />
-          <FormControlLabel control={<Checkbox value="remember" color="primary" />} label="Remember me" />
-          <Button type="submit" fullWidth variant="contained" color="primary" className={classes.submit}>
-            Sign In
-          </Button>
-          <Grid container>
-            <Grid item xs>
-              <Link href="#" variant="body2">
-                Forgot password?
-              </Link>
-            </Grid>
-            <Grid item>
-              <Link href="#" variant="body2">
-                {"Don't have an account? Sign Up"}
-              </Link>
-            </Grid>
-          </Grid>
-        </form>
-      </div>
-      <Box mt={8}>
-        <Copyright />
-      </Box>
-    </Container>
-  )
-}
diff --git a/frontend/client/styles/components/navbar.scss b/frontend/client/styles/components/navbar.scss
index 928856ce..99df5dc1 100644
--- a/frontend/client/styles/components/navbar.scss
+++ b/frontend/client/styles/components/navbar.scss
@@ -11,6 +11,22 @@
   #orgLogo {
     height: 40px;
   }
+
+  .menu-btn {
+    margin-right: 88px;
+  }
+}
+
+#menu-appbar {
+  .menu-link {
+    font-family: 'Montserrat';
+    font-size: 18px;
+    font-weight: 500;
+    margin-top: 14px;
+    padding-left: 30px;
+    padding-right: 30px;
+    color: #2c58b1;
+  }
 }
 
 #logged-in-icons-container {
diff --git a/frontend/client/styles/index.scss b/frontend/client/styles/index.scss
index 639847af..141650a2 100644
--- a/frontend/client/styles/index.scss
+++ b/frontend/client/styles/index.scss
@@ -19,4 +19,4 @@
 @import './components/modal.scss';
 @import './components/modal_input.scss';
 @import './components/profile_photo.scss';
-@import './components/cancel_confirm_buttons.scss'
+@import './components/cancel_confirm_buttons.scss';
diff --git a/frontend/client/styles/screens/settings.scss b/frontend/client/styles/screens/settings.scss
index ca8e0860..d17bf9a8 100644
--- a/frontend/client/styles/screens/settings.scss
+++ b/frontend/client/styles/screens/settings.scss
@@ -1,14 +1,31 @@
 .changeImageModalContainer {
   height: 280px;
 
-    input {
-      margin-top: 25px;
-      margin-bottom: 15px;
-      border-width: 0px;
-    }
-
-    .save-image{
-        margin-left: 155px;
-        margin-top: 60px;
-    }
+  input {
+    margin-top: 25px;
+    margin-bottom: 15px;
+    border-width: 0px;
+  }
+
+  .save-image {
+    margin-left: 155px;
+    margin-top: 60px;
+  }
+}
+
+#settings-grid {
+  margin: 10px -8px -8px -8px;
+  padding: 40px;
+  padding-left: 8px;
+
+  input {
+    line-height: 16px;
+    border-radius: 4px;
+    border: 2px solid #bdbdbd;
+    box-sizing: border-box;
+    width: 75%;
+    height: 40px;
+    margin-top: 10px;
+    margin-bottom: 40px;
+  }
 }