@@ -0,0 +1,16 @@ 
+import React from 'react';
+import {makeStyles} from '@material-ui/core/styles';
+
+import LogoUrl from '../../assets/logo.png';
+
+const Logo = () => {
+  const classes = useStyles();
+  return <img src={LogoUrl} alt="Caroster" className={classes.logo} />;
+};
+
+const useStyles = makeStyles(theme => ({
+  logo: {
+    width: '100%',
+  },
+}));
+export default Logo;

@@ -41,9 +41,11 @@ useEffect(() => {
     setEmailIsValid(isValidEmail(debouncedEmail));
   }, [debouncedEmail]);
 
-  const onNext = () => {
+  const onNext = event => {
+    if (event.preventDefault) event.preventDefault();
     addToEvent({name, email});
     nextStep();
+    return false;
   };
 
   return (

@@ -1,72 +1,76 @@ 
-import React, { useState } from "react";
-import { makeStyles } from "@material-ui/core/styles";
-import TextField from "@material-ui/core/TextField";
-import Button from "@material-ui/core/Button";
-import { useTranslation } from "react-i18next";
-import { DatePicker } from "@material-ui/pickers";
-import moment from "moment";
-import { useHistory } from "react-router-dom";
-import { useToast } from "../../contexts/Toast";
-import Paper from "../../components/Paper";
+import React, {useState} from 'react';
+import {makeStyles} from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+import Button from '@material-ui/core/Button';
+import {useTranslation} from 'react-i18next';
+import {DatePicker} from '@material-ui/pickers';
+import moment from 'moment';
+import {useHistory} from 'react-router-dom';
+import {useToast} from '../../contexts/Toast';
+import Paper from '../../components/Paper';
 
-const Step2 = ({ event, addToEvent, createEvent, ...props }) => {
+const Step2 = ({event, addToEvent, createEvent, ...props}) => {
   const classes = useStyles();
-  const { t } = useTranslation();
+  const {t} = useTranslation();
   const history = useHistory();
-  const { addToast } = useToast();
+  const {addToast} = useToast();
 
   // States
   const [date, setDate] = useState(!!event.date ? moment(event.date) : null);
-  const [address, setAddress] = useState(event.address ?? "");
+  const [address, setAddress] = useState(event.address ?? '');
 
-  const onCreate = async () => {
-    const eventData = { date: date?.toISOString(), address };
+  const onCreate = async evt => {
+    if (evt.preventDefault) evt.preventDefault();
+    const eventData = {date: date?.toISOString(), address};
     addToEvent(eventData);
     const result = await createEvent(eventData);
-    if (!result) addToast(t("event.errors.cant_create"));
+    if (!result) addToast(t('event.errors.cant_create'));
     else history.push(`/e/${result.id}`);
+    return false;
   };
 
   return (
     <Paper {...props}>
-      <DatePicker
-        label={t("event.creation.date")}
-        value={date}
-        onChange={setDate}
-        className={classes.textField}
-        fullWidth
-        format="DD.MM.YYYY"
-        disablePast
-        id="NewEventDate"
-        name="date"
-      />
-      <TextField
-        className={classes.textField}
-        label={t("event.creation.address")}
-        fullWidth
-        margin="dense"
-        multiline
-        rows={4}
-        value={address}
-        onChange={(e) => setAddress(e.target.value)}
-        id="NewEventAddress"
-        name="address"
-      />
-      <Button
-        className={classes.button}
-        variant="contained"
-        color="secondary"
-        fullWidth
-        onClick={onCreate}
-        id="NewEventSubmit"
-      >
-        {t("generic.create")}
-      </Button>
+      <form onSubmit={onCreate}>
+        <DatePicker
+          label={t('event.creation.date')}
+          value={date}
+          onChange={setDate}
+          className={classes.textField}
+          fullWidth
+          format="DD.MM.YYYY"
+          disablePast
+          id="NewEventDate"
+          name="date"
+        />
+        <TextField
+          className={classes.textField}
+          label={t('event.creation.address')}
+          fullWidth
+          margin="dense"
+          multiline
+          rows={4}
+          value={address}
+          onChange={e => setAddress(e.target.value)}
+          id="NewEventAddress"
+          name="address"
+        />
+        <Button
+          className={classes.button}
+          variant="contained"
+          color="secondary"
+          fullWidth
+          type="submit"
+          id="NewEventSubmit"
+        >
+          {t('generic.create')}
+        </Button>
+      </form>
     </Paper>
   );
 };
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(theme => ({
   textField: {},
   button: {
     marginTop: theme.spacing(2),

@@ -1,17 +1,17 @@ 
-import React, { useReducer } from "react";
-import Icon from "@material-ui/core/Icon";
-import Fab from "@material-ui/core/Fab";
-import { makeStyles } from "@material-ui/core/styles";
-import { useTranslation } from "react-i18next";
-import { useEvent } from "../../contexts/Event";
-import { useToast } from "../../contexts/Toast";
+import React, {useReducer} from 'react';
+import Icon from '@material-ui/core/Icon';
+import Fab from '@material-ui/core/Fab';
+import {makeStyles} from '@material-ui/core/styles';
+import {useTranslation} from 'react-i18next';
+import {useEvent} from '../../contexts/Event';
+import {useToast} from '../../contexts/Toast';
 
-const EventFab = ({ toggleNewCar }) => {
-  const { t } = useTranslation();
-  const [open, toggleOpen] = useReducer((i) => !i, false);
-  const classes = useStyles({ open });
-  const { event } = useEvent();
-  const { addToast } = useToast();
+const EventFab = ({toggleNewCar}) => {
+  const {t} = useTranslation();
+  const [open, toggleOpen] = useReducer(i => !i, false);
+  const classes = useStyles({open});
+  const {event} = useEvent();
+  const {addToast} = useToast();
 
   const onShare = async () => {
     if (!event) return null;
@@ -26,7 +26,7 @@ }
     // Else copy URL in clipboard
     else if (!!navigator.clipboard) {
       await navigator.clipboard.writeText(window.location.href);
-      addToast(t("event.actions.copied"));
+      addToast(t('event.actions.copied'));
       return true;
     }
   };
@@ -34,7 +34,7 @@ 
   return (
     <>
       <div className={classes.fabContainer}>
-        <Fab color="primary" aria-label="more" onClick={toggleOpen}>
+        <Fab aria-label="more" onClick={toggleOpen}>
           <Icon>add</Icon>
         </Fab>
       </div>
@@ -64,33 +64,36 @@ </>
   );
 };
 
-const useStyles = makeStyles((theme) => ({
-  fabContainer: ({ open }) => ({
-    position: "fixed",
-    bottom: open ? "-4rem" : theme.spacing(2),
+const useStyles = makeStyles(theme => ({
+  fabContainer: ({open}) => ({
+    position: 'fixed',
+    bottom: open ? '-4rem' : theme.spacing(2),
     right: theme.spacing(2),
-    transition: "all 0.3s ease",
-    transform: open ? "rotate(45deg)" : "",
+    transition: 'all 0.3s ease',
+    transform: open ? 'rotate(45deg)' : '',
     zIndex: theme.zIndex.speedDial,
+    '& .MuiFab-root': {
+      backgroundColor: theme.palette.accent.yellow,
+    },
   }),
-  actionContainer: ({ open }) => ({
-    position: "fixed",
-    bottom: open ? 0 : "-100vh",
+  actionContainer: ({open}) => ({
+    position: 'fixed',
+    bottom: open ? 0 : '-100vh',
     left: 0,
     right: 0,
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "flex-end",
-    transition: "all 0.3s ease",
-    height: "100vh",
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'flex-end',
+    transition: 'all 0.3s ease',
+    height: '100vh',
   }),
   extendedIcon: {
     marginRight: theme.spacing(2),
   },
   extendedFab: {
-    width: "11rem",
-    marginLeft: "auto",
-    marginRight: "auto",
+    width: '11rem',
+    marginLeft: 'auto',
+    marginRight: 'auto',
     marginBottom: theme.spacing(2),
   },
 }));

@@ -43,8 +43,8 @@ const [details, setDetails] = useState('');
 
   const canCreate = !!name && !!seats;
 
-  const onCreate = async event => {
-    if (event.preventDefault) event.preventDefault();
+  const onCreate = async e => {
+    if (e.preventDefault) e.preventDefault();
     try {
       await strapi.services.cars.create({
         name,

@@ -1,10 +1,12 @@ 
-import React from "react";
-import Layout from "../layouts/Centered";
-import CreateEvent from "../containers/CreateEvent";
+import React from 'react';
+import Layout from '../layouts/Centered';
+import Logo from '../components/Logo';
+import CreateEvent from '../containers/CreateEvent';
 
 const Home = () => {
   return (
     <Layout>
+      <Logo />
       <CreateEvent />
     </Layout>
   );

@@ -1,13 +1,24 @@ 
 import {createMuiTheme} from '@material-ui/core/styles';
-import grey from '@material-ui/core/colors/grey';
-import blue from '@material-ui/core/colors/blue';
 
 export default createMuiTheme({
   palette: {
-    primary: grey,
-    secondary: blue,
+    primary: {
+      main: 'rgba(0,0,0,0.78)',
+    },
+    secondary: {
+      main: '#007CE7',
+    },
+    accent: {
+      yellow: '#FFD11D',
+      blue: '#0A12FF',
+      red: '#FF2200',
+      purple: '#251479',
+    },
     background: {
-      default: grey[50],
+      default: '#f4f4ff',
+    },
+    text: {
+      primary: '#006C6B',
     },
   },
 });