diff --git a/src/components/task.module.scss b/src/components/task.module.scss
new file mode 100644
index 0000000..3360d89
--- /dev/null
+++ b/src/components/task.module.scss
@@ -0,0 +1,5 @@
+@reference "../index.scss";
+
+.task {
+  @apply flex h-24 w-[300px] flex-col items-center justify-center rounded-md border-2 text-xl md:w-[500px];
+}
diff --git a/src/components/task.tsx b/src/components/task.tsx
new file mode 100644
index 0000000..5db053b
--- /dev/null
+++ b/src/components/task.tsx
@@ -0,0 +1,12 @@
+import { FunctionComponent } from "preact";
+import classes from "./task.module.scss";
+
+interface TaskProps {
+  name: string;
+}
+
+const Task: FunctionComponent<TaskProps> = ({ name }: TaskProps) => {
+  return <div class={classes.task}>{name}</div>;
+};
+
+export default Task;