diff --git a/ui/src/component/ConfirmDialog.tsx b/ui/src/component/ConfirmDialog.tsx
index 55611c7..73bc8b4 100644
--- a/ui/src/component/ConfirmDialog.tsx
+++ b/ui/src/component/ConfirmDialog.tsx
@@ -1,6 +1,6 @@
 import Button from 'material-ui/Button';
 import Dialog, {DialogActions, DialogContent, DialogContentText, DialogTitle} from 'material-ui/Dialog';
-import React, {Component} from 'react';
+import React from 'react';
 
 interface IProps {
     title: string
@@ -9,24 +9,21 @@ interface IProps {
     fOnSubmit: VoidFunction
 }
 
-export default class ConfirmDialog extends Component<IProps> {
-    public render() {
-        const {title, text, fClose, fOnSubmit} = this.props;
-        const submitAndClose = () => {
-            fOnSubmit();
-            fClose();
-        };
-        return (
-            <Dialog open={true} onClose={fClose} aria-labelledby="form-dialog-title">
-                <DialogTitle id="form-dialog-title">{title}</DialogTitle>
-                <DialogContent>
-                    <DialogContentText>{text}</DialogContentText>
-                </DialogContent>
-                <DialogActions>
-                    <Button onClick={fClose}>No</Button>
-                    <Button onClick={submitAndClose} color="primary" variant="raised">Yes</Button>
-                </DialogActions>
-            </Dialog>
-        );
-    }
-}
+export default function ConfirmDialog({title, text, fClose, fOnSubmit}: IProps) {
+    const submitAndClose = () => {
+        fOnSubmit();
+        fClose();
+    };
+    return (
+        <Dialog open={true} onClose={fClose} aria-labelledby="form-dialog-title">
+            <DialogTitle id="form-dialog-title">{title}</DialogTitle>
+            <DialogContent>
+                <DialogContentText>{text}</DialogContentText>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={fClose}>No</Button>
+                <Button onClick={submitAndClose} color="primary" variant="raised">Yes</Button>
+            </DialogActions>
+        </Dialog>
+    );
+}
\ No newline at end of file
diff --git a/ui/src/component/Container.tsx b/ui/src/component/Container.tsx
index 6ad4cd5..01d8d34 100644
--- a/ui/src/component/Container.tsx
+++ b/ui/src/component/Container.tsx
@@ -13,15 +13,12 @@ interface IProps {
     style?: object,
 }
 
-class Container extends React.Component<IProps & WithStyles<'paper'>, {}> {
-    public render() {
-        const {classes, children, style} = this.props;
-        return (
-            <Paper elevation={6} className={classes.paper} style={style}>
-                {children}
-            </Paper>
-        );
-    }
-}
+const Container: React.SFC<IProps & WithStyles<'paper'>> = ({classes, children, style}) => {
+    return (
+        <Paper elevation={6} className={classes.paper} style={style}>
+            {children}
+        </Paper>
+    );
+};
 
 export default withStyles(styles)<IProps>(Container);
diff --git a/ui/src/component/LoadingSpinner.tsx b/ui/src/component/LoadingSpinner.tsx
index 060b13e..bed8439 100644
--- a/ui/src/component/LoadingSpinner.tsx
+++ b/ui/src/component/LoadingSpinner.tsx
@@ -1,18 +1,14 @@
 import Grid from 'material-ui/Grid';
 import {CircularProgress} from 'material-ui/Progress';
-import React, {Component} from 'react';
+import React from 'react';
 import DefaultPage from './DefaultPage';
 
-class LoadingSpinner extends Component {
-    public render() {
-        return (
-            <DefaultPage title="" maxWidth={250} hideButton={true}>
-                <Grid item xs={12} style={{textAlign: 'center'}}>
-                    <CircularProgress size={150}/>
-                </Grid>
-            </DefaultPage>
-        );
-    }
-}
-
-export default LoadingSpinner;
+export default function LoadingSpinner() {
+    return (
+        <DefaultPage title="" maxWidth={250} hideButton={true}>
+            <Grid item xs={12} style={{textAlign: 'center'}}>
+                <CircularProgress size={150}/>
+            </Grid>
+        </DefaultPage>
+    );
+};
diff --git a/ui/src/component/Message.tsx b/ui/src/component/Message.tsx
index 0f6a156..9ca8ee9 100644
--- a/ui/src/component/Message.tsx
+++ b/ui/src/component/Message.tsx
@@ -3,7 +3,7 @@ import Delete from 'material-ui-icons/Delete';
 import IconButton from 'material-ui/IconButton';
 import {withStyles} from 'material-ui/styles';
 import Typography from 'material-ui/Typography';
-import React, {Component} from 'react';
+import React from 'react';
 import TimeAgo from 'react-timeago';
 import Container from './Container';
 
@@ -42,32 +42,28 @@ interface IProps {
     fDelete: VoidFunction
 }
 
-class Message extends Component<IProps & Style> {
-    public render() {
-        const {fDelete, classes, title, date, content, image} = this.props;
-
-        return (
-            <div className={classes.wrapperPadding}>
-                <Container style={{display: 'flex'}}>
-                    <div className={classes.imageWrapper}>
-                        <img src={image} alt="app logo" width="70" height="70" className={classes.image}/>
+function Message({fDelete, classes, title, date, content, image}: IProps & Style) {
+    return (
+        <div className={classes.wrapperPadding}>
+            <Container style={{display: 'flex'}}>
+                <div className={classes.imageWrapper}>
+                    <img src={image} alt="app logo" width="70" height="70" className={classes.image}/>
+                </div>
+                <div className={classes.messageContentWrapper}>
+                    <div className={classes.header}>
+                        <Typography className={classes.headerTitle} variant="headline">
+                            {title}
+                        </Typography>
+                        <Typography variant="body1">
+                            <TimeAgo date={date}/>
+                        </Typography>
+                        <IconButton onClick={fDelete} className={classes.trash}><Delete/></IconButton>
                     </div>
-                    <div className={classes.messageContentWrapper}>
-                        <div className={classes.header}>
-                            <Typography className={classes.headerTitle} variant="headline">
-                                {title}
-                            </Typography>
-                            <Typography variant="body1">
-                                <TimeAgo date={date}/>
-                            </Typography>
-                            <IconButton onClick={fDelete} className={classes.trash}><Delete/></IconButton>
-                        </div>
-                        <Typography component="p">{content}</Typography>
-                    </div>
-                </Container>
-            </div>
-        );
-    }
+                    <Typography component="p">{content}</Typography>
+                </div>
+            </Container>
+        </div>
+    );
 }
 
 export default withStyles(styles)<IProps>(Message);