Adjust ChoseRole not finished THO

src/components/Auth/ChoseRole/ChoseRole.tsx

 import React, { FC, useEffect, useState } from 'react';
 import Button from '@material-ui/core/Button';
+import { Grid, Typography, Hidden } from '@material-ui/core';
 import { getRoles } from 'api/getRoles';
 import { setRole } from 'api/setRole';
 import { useHistory } from 'react-router-dom';
 import { AuthRoutes } from 'api/routes';
+import { choseRoleStyle } from './ChoseRoleStyle.style';
 
 /**
  * Page that let's users decide role between available roles.
@@ -11,6 +13,8 @@ import { AuthRoutes } from 'api/routes';
  * @returns ChoseRole component.
  */
 export const ChoseRole: FC = () => {
+  const classes = choseRoleStyle();
+
   const history = useHistory();
   const [userRoles, setUserRoles] = useState<string[]>(['']);
 
@@ -26,20 +30,49 @@ export const ChoseRole: FC = () => {
 
   return (
     <div data-testid="ChoseRole">
-      {userRoles ? (
-        userRoles.map((role) => (
-          <Button
-            variant="outlined"
-            color="default"
-            key={role}
-            onClick={() => choseAndForward(role)}
-          >
-            {role}
-          </Button>
-        ))
-      ) : (
-        <h1>No roles were returned.</h1>
-      )}
+      <Grid container direction="column" className={classes.paddingBottom}>
+        <div className={classes.root}>
+          <header>
+            <Grid item container className={classes.paddingBottom}>
+              <Grid item xs={1} md={2} lg={2} />
+
+              <Grid item xs={10} md={6} lg={4}>
+                <Typography variant="h2" className={classes.whiteText}>
+                  Choose Your
+                </Typography>
+                <Typography variant="h2" className={classes.whiteText}>
+                  ROLE
+                </Typography>
+              </Grid>
+
+              <Grid item xs={1} />
+            </Grid>
+          </header>
+        </div>
+      </Grid>
+
+      <Grid container>
+        <Grid item xs={1} lg={2} />
+        <Grid item xs={10} lg={8}>
+          {userRoles ? (
+            userRoles.map((role) => (
+              <Button
+                variant="outlined"
+                fullWidth
+                color="default"
+                key={role}
+                onClick={() => choseAndForward(role)}
+                className={classes.paddingTopKlein}
+              >
+                {role}
+              </Button>
+            ))
+          ) : (
+            <h1>No roles were returned.</h1>
+          )}
+        </Grid>
+        <Grid item xs={1} lg={2} />
+      </Grid>
     </div>
   );
 };