1 files changed, 39 insertions, 6 deletions
diff --git a/modern/src/DevicePage.js b/modern/src/DevicePage.js
index e882de3..24a06d1 100644
--- a/modern/src/DevicePage.js
+++ b/modern/src/DevicePage.js
@@ -1,19 +1,52 @@
 import React from 'react';
 import MainToobar from './MainToolbar';
-import withStyles from '@material-ui/core/styles/withStyles';
-import withWidth from '@material-ui/core/withWidth';
 import { useHistory } from 'react-router-dom';
+import { makeStyles } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+import Container from '@material-ui/core/Container';
+import Button from '@material-ui/core/Button';
+import FormControl from '@material-ui/core/FormControl';
 
-const styles = theme => ({});
+import t from './common/localization';
+
+const useStyles = makeStyles(theme => ({
+  container: {
+    marginTop: theme.spacing(2),
+  },
+  buttons: {
+    display: 'flex',
+    justifyContent: 'space-evenly',
+    '& > *': {
+      flexBasis: '33%',
+    },
+  },
+}));
 
 const DevicePage = () => {
   const history = useHistory();
+  const classes = useStyles();
 
   return (
-    <div>
+    <>
       <MainToobar history={history} />
-    </div>
+      <Container maxWidth='xs' className={classes.container}>
+        <form>
+          <TextField margin="normal" fullWidth label={t('sharedName')} variant="filled" />
+          <TextField margin="normal" fullWidth label={t('deviceIdentifier')} variant="filled" />
+          <FormControl fullWidth margin="normal">
+            <div className={classes.buttons}>
+              <Button type="button" color="primary" variant="outlined">
+                {t('sharedCancel')}
+              </Button>
+              <Button type="button" color="primary" variant="contained">
+                {t('sharedSave')}
+              </Button>
+            </div>
+          </FormControl>
+        </form>
+      </Container>
+    </>
   );
 }
 
-export default withWidth()(withStyles(styles)(DevicePage));
+export default DevicePage;