diff --git a/client/src/components/welcome.js b/client/src/components/welcome.js
new file mode 100644
index 0000000..ff39c0b
--- /dev/null
+++ b/client/src/components/welcome.js
@@ -0,0 +1,41 @@
+import { Button, Container } from '@material-ui/core';
+import { AnimatePresence, motion } from 'framer-motion';
+import React, { useState } from 'react';
+import JamiLogo from '../../public/jami-logo-icon.svg'
+
+const list = {
+    hidden: { opacity: 0 },
+    visible: {opacity: 1,
+        transition: {
+            when: "beforeChildren",
+            staggerChildren: 0.3,
+          },
+      }
+}
+const item = {
+    visible: { opacity: 1, x: 0 },
+    hidden: { opacity: 0, x: 0 },
+}
+
+export default function WelcomeAnimation(props) {
+    const [visible, setVisible] = useState(true)
+
+    return <Container style={{ textAlign: "center", display:"flex", flexDirection:"column", alignItems:"center"  }}>
+        <AnimatePresence>
+        {visible && <motion.div initial="hidden" animate="visible" exit="hidden" variants={list} onAnimationComplete={a => {
+                if (a === "hidden") {
+                    props.onComplete()
+                } else if (!props.showSetup) {
+                    setVisible(false)
+                }
+            }}>
+            <motion.div variants={item}><JamiLogo size="32px" /></motion.div>
+            <motion.h1 variants={item}>Welcome to Jami</motion.h1>
+            {props.showSetup &&
+            <motion.div variants={item}>
+                <Button variant="outlined" onClick={() => setVisible(false)}>Start setup</Button>
+            </motion.div>}
+        </motion.div>}
+        </AnimatePresence>
+    </Container>
+}
\ No newline at end of file