diff --git a/client/src/App.js b/client/src/App.js
index 6d2284c..3687dcc 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -10,7 +10,7 @@
 import './App.scss'
 
 import SignInPage from "./pages/loginDialog.jsx"
-import JamiMessenger from "./pages/messenger.jsx"
+import JamiMessenger from "./pages/JamiMessenger.jsx"
 import AccountSettings from "./pages/accountSettings.jsx"
 import AccountSelection from "./pages/accountSelection.jsx"
 import ServerSetup from "./pages/serverSetup.jsx"
@@ -18,6 +18,7 @@
 import NotFoundPage from "./pages/404.jsx"
 import LoadingPage from './components/loading'
 import JamiAccountDialog from './pages/jamiAccountCreation.jsx'
+import { AnimatePresence } from 'framer-motion'
 import WelcomeAnimation from './components/welcome'
 
 const App = (props) => {
@@ -29,7 +30,7 @@
 
     useEffect(() => {
       authManager.init(auth => {
-        setState({ loaded: true, auth })
+        setState({ loaded: false, auth })
       })
       return () => authManager.deinit()
     }, []);
@@ -44,18 +45,24 @@
         </Switch>
     }
     return <React.Fragment>
-        <Switch>
-          <Route exact path="/"><Redirect to="/account" /></Route>
-          <Route path="/account/:accountId/settings" component={AccountSettings} />
-          <Route path="/account/:accountId/addContact/:contactId" component={JamiMessenger} />
-          <Route path="/account/:accountId/conversation/:conversationId" component={JamiMessenger} />
-          <Route path="/account/:accountId" component={JamiMessenger} />
-          <Route path="/account" component={AccountSelection} />
-          <Route path="/newAccount/jami" component={JamiAccountDialog} />
-          <Route path="/newAccount" component={AccountCreationDialog} />
-          <Route component={NotFoundPage} />
-        </Switch>
-      {!state.auth.authenticated && <SignInPage open={!state.auth.authenticated}/>}
+          <Route
+      render={({ location }) => {
+        console.log("App render location")
+
+        return <AnimatePresence exitBeforeEnter initial={false}>
+          <Switch location={location} key={location.pathname}>
+            <Route exact path="/"><Redirect to="/account" /></Route>
+            <Route path="/account/:accountId/settings" component={AccountSettings} />
+            <Route path="/account/:accountId" component={JamiMessenger} />
+            <Route path="/account" component={AccountSelection} />
+            <Route path="/newAccount/jami" component={JamiAccountDialog} />
+            <Route path="/newAccount" component={AccountCreationDialog} />
+            <Route path="/setup"><Redirect to="/account" /></Route>
+            <Route component={NotFoundPage} />
+          </Switch>
+          {!state.auth.authenticated && <SignInPage open={!state.auth.authenticated}/>}
+        </AnimatePresence>}}
+      />
     </React.Fragment>
 }
 
diff --git a/client/src/components/AccountPreferences.js b/client/src/components/AccountPreferences.js
index 7c7298d..363df68 100644
--- a/client/src/components/AccountPreferences.js
+++ b/client/src/components/AccountPreferences.js
@@ -9,6 +9,7 @@
 import ConversationsOverviewCard from './ConversationsOverviewCard'
 
 import authManager from '../AuthManager'
+import { motion } from 'framer-motion'
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -31,6 +32,18 @@
   }
 }))
 
+const transition = { duration: 0.3, ease: [0.43, 0.13, 0.23, 0.96] }
+
+const thumbnailVariants = {
+  initial: { scale: 0.9, opacity: 0 },
+  enter: { scale: 1, opacity: 1, transition },
+  exit: {
+    scale: 0.5,
+    opacity: 0,
+    transition: { duration: 1.5, ...transition }
+  }
+}
+
 export default function AccountPreferences(props) {
   const classes = useStyles()
   const account = props.account
@@ -68,17 +81,28 @@
   }
 
   return (
-    <React.Fragment>
-      <Typography variant="h2" component="h2" gutterBottom>{alias}</Typography>
+    <motion.div
+        initial="initial"
+        animate="enter"
+        exit="exit"
+        variants={{
+          enter: { transition: { staggerChildren: 0.05 } },
+          exit: { transition: { staggerChildren: 0.02 } }
+        }}
+      >
+      <motion.div variants={thumbnailVariants}><Typography variant="h2" component="h2" gutterBottom>{alias}</Typography></motion.div>
       <Grid container spacing={3} style={{ marginBottom: 16 }}>
         {isJamiAccount &&
-          <Grid item xs={12}><JamiIdCard account={account} /></Grid>}
+          <Grid item xs={12}><motion.div variants={thumbnailVariants}><JamiIdCard account={account} /></motion.div></Grid>}
 
         <Grid item xs={12} sm={6}>
+        <motion.div variants={thumbnailVariants}>
           <ConversationsOverviewCard accountId={account.getId()} />
+          </motion.div>
         </Grid>
 
         <Grid item xs={12} sm={6}>
+        <motion.div variants={thumbnailVariants}>
           <Card>
             <CardContent>
               <Typography className={classes.title} color="textSecondary" gutterBottom>
@@ -89,10 +113,13 @@
               </Typography>
             </CardContent>
           </Card>
+          </motion.div>
         </Grid>
+
       </Grid>
 
-      <List subheader={<ListSubheader>Settings</ListSubheader>}>
+      <List subheader={<motion.div variants={thumbnailVariants}><ListSubheader>Settings</ListSubheader></motion.div>}>
+      <motion.div variants={thumbnailVariants}>
         <ListItem>
           <ListItemIcon>
             <GroupRounded />
@@ -107,6 +134,8 @@
             />
           </ListItemSecondaryAction>
         </ListItem>
+        </motion.div>
+        <motion.div variants={thumbnailVariants}>
         <ListItem>
           <ListItemIcon>
             <PhoneCallbackRounded />
@@ -121,7 +150,8 @@
             />
           </ListItemSecondaryAction>
         </ListItem>
-
+        </motion.div>
+        <motion.div variants={thumbnailVariants}>
         <Paper className={classes.paper}>
           <Toolbar>
             <Typography className={classes.title} variant="h6">
@@ -157,7 +187,8 @@
               ))}
           </List>
         </Paper>
+        </motion.div>
       </List>
 
-    </React.Fragment>)
+    </motion.div>)
 }
diff --git a/client/src/pages/JamiMessenger.jsx b/client/src/pages/JamiMessenger.jsx
new file mode 100644
index 0000000..13c8d48
--- /dev/null
+++ b/client/src/pages/JamiMessenger.jsx
@@ -0,0 +1,14 @@
+import { Route, Switch, useRouteMatch } from "react-router";
+import Messenger from "./messenger.jsx"
+
+export default function JamiMessenger(props) {
+    const { path, url } = useRouteMatch();
+
+    console.log("JamiMessenger render")
+
+    return <Switch>
+        <Route path={`${path}/addContact/:contactId`} component={Messenger} />
+        <Route path={`${path}/conversation/:conversationId`} component={Messenger} />
+        <Route path={`${path}`} component={Messenger} />
+    </Switch>
+}
\ No newline at end of file
diff --git a/client/src/pages/accountSelection.jsx b/client/src/pages/accountSelection.jsx
index c95b02b..6c52af4 100644
--- a/client/src/pages/accountSelection.jsx
+++ b/client/src/pages/accountSelection.jsx
@@ -8,6 +8,12 @@
 import ConversationAvatar from '../components/ConversationAvatar';
 import { AddRounded } from '@material-ui/icons';
 import { useHistory } from 'react-router';
+import { motion } from 'framer-motion';
+
+const variants = {
+  enter: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: "-50px" },
+}
 
 const AccountSelection = (props) => {
   const history = useHistory()
@@ -47,6 +53,7 @@
     <React.Fragment>
       <Header />
       <Container maxWidth="sm" style={{paddingBottom:32}}>
+        <motion.div drag="x" initial="exit" animate="enter" exit="exit" variants={variants}>
         <Card style={{marginTop:32, marginBottom:32}}>
           <CardHeader title="Choose an account" />
           <List>
@@ -61,6 +68,7 @@
               primary="Create new account" />
           </List>
         </Card>
+        </motion.div>
       </Container>
     </React.Fragment>
   )
diff --git a/client/src/pages/messenger.jsx b/client/src/pages/messenger.jsx
index 9b825f9..3833956 100644
--- a/client/src/pages/messenger.jsx
+++ b/client/src/pages/messenger.jsx
@@ -12,7 +12,7 @@
 import LoadingPage from '../components/loading';
 import { useParams } from 'react-router';
 
-const JamiMessenger = (props) => {
+const Messenger = (props) => {
   const [conversations, setConversations] = useState(undefined)
   const [searchQuery, setSearchQuery] = useState('')
   const [searchResult, setSearchResults] = useState(undefined)
@@ -55,6 +55,7 @@
     return () => controller.abort()
   }, [accountId, searchQuery])
 
+  console.log("Messenger render")
   return (
     <div className="app" >
       <Header />
@@ -68,4 +69,4 @@
   )
 }
 
-export default JamiMessenger
\ No newline at end of file
+export default Messenger
\ No newline at end of file