some cleanup

frontend/src/App.css

@@ -1,3 +1,7 @@
 body {
     background-color: lightgrey;
+}
+
+#root {
+    padding: 20px;
 }

frontend/src/pages/Dashboard/index.tsx

@@ -44,8 +44,9 @@ const Dashboard: FunctionComponent<DashboardProps> = () => {
             })
     }, [])
 
-    return <div style={{
-        marginTop: "40px"
+    return <Grid container style={{
+        marginTop: "40px",
+        boxSizing: "border-box",
     }}>
         { loading &&
             <CircularProgress />
@@ -57,11 +58,11 @@ const Dashboard: FunctionComponent<DashboardProps> = () => {
                 No accounts yet.
             </Typography>
         }
-        <Grid container xs={12} spacing={4}>
+        <Grid item container spacing={4}>
         {
             accounts.map((account) => {
-                return <>
-                    <Grid item xs={4}>
+                return (
+                    <Grid item xs={4} key={account.id}>
                         <Card>
                             <CardHeader
                                 avatar={
@@ -76,13 +77,13 @@ const Dashboard: FunctionComponent<DashboardProps> = () => {
                             />
                         </Card>
                     </Grid>
-                </>
+                )
             })
         }
         </Grid>
 
         <MessageBox {...message} />
-    </div>
+    </Grid>
 }
 
 export default Dashboard

frontend/src/pages/Login/index.tsx

@@ -37,7 +37,7 @@ const Login = () => {
     }
 
     return (
-        <Grid container xs={12} justifyContent="center">
+        <Grid container justifyContent="center">
             <Grid item container xs={4} spacing={2}>
                 <Formik<LoginFormProps>
                     initialValues={{