diff --git a/components/AppealCard.tsx b/components/AppealCard.tsx
new file mode 100644
index 0000000..b7ac2ad
--- /dev/null
+++ b/components/AppealCard.tsx
@@ -0,0 +1,56 @@
+import {
+  Box,
+  Card,
+  CardBody,
+  CardFooter,
+  CardHeader,
+  Heading,
+  Stack,
+  StackDivider,
+  Text,
+} from "@chakra-ui/react";
+
+export default function (props: {
+  ban_reason: string;
+  createdAt: number;
+  discriminator: string;
+  id: string;
+  learned: string;
+  reason_for_unban: string;
+  username: string;
+}) {
+  return (
+    <>
+      <Card>
+        <CardHeader>
+          <Heading size="md">
+            Appeal for {props.username}#{props.discriminator}
+          </Heading>
+        </CardHeader>
+        <CardBody>
+          <Stack divider={<StackDivider />}>
+            <Box>
+              <Heading size="xs">Response: Why were you banned?</Heading>
+              <Text>{props.ban_reason}</Text>
+            </Box>
+            <Box>
+              <Heading size="xs">Response: Why should we unban you?</Heading>
+              <Text>{props.reason_for_unban}</Text>
+            </Box>
+            <Box>
+              <Heading size="xs">
+                Response: What have you learned from your mistake?
+              </Heading>
+              <Text>{props.learned}</Text>
+            </Box>
+          </Stack>
+        </CardBody>
+        <CardFooter>
+          <Text fontSize="xs">
+            Submitted at: {new Date(props.createdAt).toLocaleString()}
+          </Text>
+        </CardFooter>
+      </Card>
+    </>
+  );
+}