diff --git a/client/src/components/JamiIdCard.tsx b/client/src/components/JamiIdCard.tsx
new file mode 100644
index 0000000..2f54d91
--- /dev/null
+++ b/client/src/components/JamiIdCard.tsx
@@ -0,0 +1,32 @@
+import { Box, Card, CardContent, Typography } from '@mui/material';
+
+import Account from '../../../model/Account';
+
+type JamiIdCardProps = {
+  account: Account;
+};
+
+export default function JamiIdCard(props: JamiIdCardProps) {
+  const account = props.account;
+  const registeredName = account.getRegisteredName();
+  return (
+    <Card style={{ marginBottom: 16 }}>
+      <CardContent>
+        <Box>
+          <Typography color="textSecondary">Jami ID</Typography>
+          <Typography variant="h5" component="h2" gutterBottom noWrap>
+            {account.getUri()}
+          </Typography>
+        </Box>
+        {registeredName && (
+          <Box>
+            <Typography color="textSecondary">Jami username</Typography>
+            <Typography variant="h5" component="h2" noWrap>
+              {registeredName}
+            </Typography>
+          </Box>
+        )}
+      </CardContent>
+    </Card>
+  );
+}