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