diff --git a/components/InactivityNoticeCard.tsx b/components/InactivityNoticeCard.tsx
new file mode 100644
index 0000000..0656ec8
--- /dev/null
+++ b/components/InactivityNoticeCard.tsx
@@ -0,0 +1,47 @@
+import {
+  Box,
+  Button,
+  Card,
+  CardBody,
+  CardFooter,
+  CardHeader,
+  Heading,
+  Stack,
+  StackDivider,
+  Text,
+} from "@chakra-ui/react";
+
+export default function (props: InactivityNoticeProps) {
+  return (
+    <Card w="100%">
+      <CardHeader>
+        <Heading size="md">Inactivity Notice for {props.user.username}</Heading>
+        <Text fontSize="xs">ID: {props.user.id}</Text>
+      </CardHeader>
+      <CardBody>
+        <Stack divider={<StackDivider />}>
+          <Box>
+            <Heading size="xs">Reason for Inactivity</Heading>
+            <Text>{props.reason}</Text>
+          </Box>
+          <Box>
+            <Heading size="xs">Start Date</Heading>
+            <Text>{new Date(props.start).toLocaleDateString()}</Text>
+          </Box>
+          <Box>
+            <Heading size="xs">End Date</Heading>
+            <Text>{new Date(props.end).toLocaleDateString()}</Text>
+          </Box>
+        </Stack>
+      </CardBody>
+      <CardFooter pb="4px">
+        <Box>
+          <Button colorScheme="red">Deny</Button>
+          <Button colorScheme="blue" ml="8px">
+            Accept
+          </Button>
+        </Box>
+      </CardFooter>
+    </Card>
+  );
+}