diff --git a/src/components/PlacementCard.tsx b/src/components/PlacementCard.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..09b6fb86a108fb5057f1e2c5d4b6103ad9bbf71a
--- /dev/null
+++ b/src/components/PlacementCard.tsx
@@ -0,0 +1,31 @@
+import { Badge, HStack, Text, VStack } from "@chakra-ui/layout";
+import React, { ReactElement } from "react";
+import { Placement } from "../data/Placement";
+
+interface Props {
+  placement: Placement;
+}
+
+export default function PlacementCard({ placement }: Props): ReactElement {
+  return (
+    <VStack
+      cursor="pointer"
+      bg={placement.active ? "blue.200" : "gray.200"}
+      p={3}
+      borderRadius={4}
+      align="stretch"
+      onClick={() => {
+        console.log("placement clicked", placement);
+      }}
+    >
+      <Text fontWeight="bold" fontSize="2xl">
+        Fogas: {placement.placementNumber}
+      </Text>
+      <HStack p={1} wrap="wrap">
+        {placement.belongings.map((v) => (
+          <Badge>{v}</Badge>
+        ))}
+      </HStack>
+    </VStack>
+  );
+}
diff --git a/src/pages/Guest.tsx b/src/pages/Guest.tsx
index 1c06d196ced9643a22a0dd32e8024df5f30b6738..409426ef4b6df19e62d8cc35c461cd8dbeb01b8d 100644
--- a/src/pages/Guest.tsx
+++ b/src/pages/Guest.tsx
@@ -1,9 +1,10 @@
 import { Button } from "@chakra-ui/button";
-import { HStack, Text, VStack } from "@chakra-ui/layout";
+import { Grid, HStack, Text, VStack } from "@chakra-ui/layout";
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { ReactElement, useState } from "react";
 import { useHistory } from "react-router";
+import PlacementCard from "../components/PlacementCard";
 import { Person } from "../data/Person";
 import CreatePersonDialog from "../dialogs/CreatePersonDialog";
 import CreatePlacementDialog from "../dialogs/CreatePlacementDialog";
@@ -15,8 +16,8 @@ export default function Guest(): ReactElement {
   const history = useHistory();
 
   return (
-    <VStack align="stretch">
-      <Text fontSize="3xl">Vendég</Text>
+    <VStack align="stretch" spacing={4}>
+      <Text fontSize="3xl">Vendég ({person?.name})</Text>
       <CreatePersonDialog
         barcode=""
         onCreated={(person) => setPerson(person)}
@@ -41,6 +42,36 @@ export default function Guest(): ReactElement {
           Add placement
         </Button>
       </HStack>
+      <Grid templateColumns="repeat(3, 1fr)" gap={4}>
+        <PlacementCard
+          placement={{
+            active: true,
+            barcode: "",
+            person: "",
+            belongings: ["Kabát", "Piros táska"],
+            placementNumber: "123",
+          }}
+        />
+        <PlacementCard
+          placement={{
+            active: true,
+            barcode: "",
+            person: "",
+            belongings: ["Kabát", "Kék táska", "Síléc"],
+            placementNumber: "124",
+          }}
+        />
+
+        <PlacementCard
+          placement={{
+            active: false,
+            barcode: "",
+            person: "",
+            belongings: ["Kokain", "Aggregátor"],
+            placementNumber: "125",
+          }}
+        />
+      </Grid>
     </VStack>
   );
 }