diff --git a/client/src/pages/AccountSelection.tsx b/client/src/pages/AccountSelection.tsx
new file mode 100644
index 0000000..9f6fcc8
--- /dev/null
+++ b/client/src/pages/AccountSelection.tsx
@@ -0,0 +1,85 @@
+import { AddRounded } from '@mui/icons-material';
+import { Avatar, Card, CardHeader, Container, List } from '@mui/material';
+import { motion } from 'framer-motion';
+import { Fragment, useEffect, useState } from 'react';
+import { useNavigate } from 'react-router';
+
+import Account from '../../../model/Account';
+import authManager from '../AuthManager';
+import ConversationAvatar from '../components/ConversationAvatar';
+import Header from '../components/Header';
+import ListItemLink from '../components/ListItemLink';
+import LoadingPage from '../components/loading';
+
+const variants = {
+  enter: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: '-50px' },
+};
+
+const AccountSelection = () => {
+  const navigate = useNavigate();
+  const [loaded, setLoaded] = useState(false);
+  const [error, setError] = useState(false);
+  const [accounts, setAccounts] = useState<Account[]>([]);
+
+  useEffect(() => {
+    const controller = new AbortController();
+    authManager
+      .fetch(`/api/accounts`, { signal: controller.signal })
+      .then((res) => res.json())
+      .then(
+        (result: Account[]) => {
+          console.log(result);
+          if (result.length === 0) {
+            navigate('/newAccount');
+          } else {
+            setLoaded(true);
+            setAccounts(result.map((account) => Account.from(account)));
+          }
+        },
+        (error) => {
+          console.log(`get error ${error}`);
+          setLoaded(true);
+          setError(true);
+        }
+      )
+      .catch((e) => console.log(e));
+    // return () => controller.abort() // crash on React18
+  }, [navigate]);
+
+  if (!loaded) return <LoadingPage />;
+  return (
+    <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>
+              {accounts.map((account) => (
+                <ListItemLink
+                  key={account.getId()}
+                  icon={<ConversationAvatar displayName={account.getDisplayNameNoFallback()} />}
+                  to={`/account/${account.getId()}/settings`}
+                  primary={account.getDisplayName()}
+                  secondary={account.getDisplayUri()}
+                />
+              ))}
+              <ListItemLink
+                icon={
+                  <Avatar>
+                    <AddRounded />
+                  </Avatar>
+                }
+                to="/newAccount"
+                primary="Create new account"
+              />
+            </List>
+          </Card>
+        </motion.div>
+      </Container>
+    </Fragment>
+  );
+};
+
+export default AccountSelection;