diff --git a/frontend/src/components/pages/home/HomeRoomCard.tsx b/frontend/src/components/pages/home/HomeRoomCard.tsx
new file mode 100644
index 00000000..8b29c76f
--- /dev/null
+++ b/frontend/src/components/pages/home/HomeRoomCard.tsx
@@ -0,0 +1,77 @@
+import React from "react";
+import { Flex, Heading, Text, Box, Circle } from "@chakra-ui/react";
+
+type Props = {
+ room: string | number;
+ residentId: number;
+};
+
+const RoomCard = ({ room, residentId }: Props): React.ReactElement => {
+ return (
+
+
+
+ Room {room} — ID{residentId}
+
+
+
+
+
+ 1
+
+
+
+ Pending Tasks
+
+
+
+
+
+ 2
+
+
+
+ Tasks Assigned
+
+
+
+
+
+ 2
+
+
+
+ Active Warnings
+
+
+
+
+
+ );
+};
+
+export default RoomCard;
diff --git a/frontend/src/components/pages/schedule/SchedulePage.tsx b/frontend/src/components/pages/schedule/SchedulePage.tsx
index cd1fcb7e..3e73bc95 100644
--- a/frontend/src/components/pages/schedule/SchedulePage.tsx
+++ b/frontend/src/components/pages/schedule/SchedulePage.tsx
@@ -1,10 +1,31 @@
import React from "react";
+import {
+ Flex,
+} from "@chakra-ui/react";
+
+import RoomCard from "../home/HomeRoomCard"
+import { residentsMockData } from "../../../mocks/residents";
+
+const renderRoomCards = residentsMockData.map(resident =>
+
+)
+
const SchedulePage = (): React.ReactElement => {
return (
-
+
Schedule Page
-
+
+ {renderRoomCards}
+
+
);
};