diff --git a/agent/agentUiTs/src/AccessCard.tsx b/agent/agentUiTs/src/AccessCard.tsx
new file mode 100644
index 00000000..3d59ff36
--- /dev/null
+++ b/agent/agentUiTs/src/AccessCard.tsx
@@ -0,0 +1,44 @@
+import {AgentObject} from "./model/overview.ts";
+import {AppBar, Box, Button, Card, Chip, Grid2, Toolbar, Typography} from "@mui/material";
+import LanIcon from "@mui/icons-material/Lan";
+import {AccessDetail} from "./api";
+import DeleteIcon from "@mui/icons-material/Delete";
+
+interface AccessCardProps {
+    accessObject: AgentObject;
+}
+
+function AccessCard({ accessObject }: AccessCardProps) {
+    let access = (accessObject.v as AccessDetail);
+    return (
+        <Card>
+            <AppBar position="sticky">
+                <Toolbar variant="dense">
+                    <LanIcon />
+                    <Grid2 container sx={{ flexGrow: 1 }}>
+                        <Grid2 display="flex" justifyContent="center" size="grow">
+                            <Typography variant="h6" component="div">{access.frontendToken}</Typography>
+                        </Grid2>
+                    </Grid2>
+                    <Grid2 container>
+                        <Grid2 display="flex" justifyContent="right">
+                            <Chip label="private" size="small" color="warning" />
+                        </Grid2>
+                    </Grid2>
+                </Toolbar>
+            </AppBar>
+            <Box sx={{ p: 2, textAlign: "center" }}>
+                <Typography variant="h6" component="div">
+                    {access.token} &rarr; {access.bindAddress}
+                </Typography>
+            </Box>
+            <Grid2 container sx={{ flexGrow: 1 }}>
+                <Grid2 display="flex" justifyContent="right" size="grow">
+                    <Button variant="contained"><DeleteIcon /></Button>
+                </Grid2>
+            </Grid2>
+        </Card>
+    );
+}
+
+export default AccessCard;
\ No newline at end of file
diff --git a/agent/agentUiTs/src/Overview.tsx b/agent/agentUiTs/src/Overview.tsx
index b5003252..fef8fd80 100644
--- a/agent/agentUiTs/src/Overview.tsx
+++ b/agent/agentUiTs/src/Overview.tsx
@@ -3,6 +3,7 @@ import {Card, Grid2} from "@mui/material";
 import ShareIcon from "@mui/icons-material/Share";
 import LanIcon from "@mui/icons-material/Lan";
 import ShareCard from "./ShareCard.tsx";
+import AccessCard from "./AccessCard.tsx";
 
 interface OverviewProps {
     overview: Array<AgentObject>;
@@ -14,7 +15,7 @@ function Overview({ overview }: OverviewProps) {
         overview.forEach(row => {
             switch(row.type) {
                 case "access":
-                    cards.push(<Grid2 size={{ xs: 12, md: 6 }}><h6>{row.id}</h6></Grid2>);
+                    cards.push(<Grid2 size={{ xs: 12, md: 6 }}><AccessCard accessObject={row} /></Grid2>);
                     break;
 
                 case "share":
@@ -30,7 +31,7 @@ function Overview({ overview }: OverviewProps) {
         </Grid2>);
     }
     return (
-        <Grid2 container spacing="2">
+        <Grid2 container spacing={2}>
             {cards}
         </Grid2>
     );