@@ -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;

@@ -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',
     },
   },
 });