diff --git a/frontend/src/app/components/Forms/Input.js b/frontend/src/app/components/Forms/Input.js
new file mode 100644
index 0000000..05bb29b
--- /dev/null
+++ b/frontend/src/app/components/Forms/Input.js
@@ -0,0 +1,7 @@
+export default function Input(props) {
+  return (
+    <>
+      <input {...props} />
+    </>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/Popover/Popover.module.css b/frontend/src/app/components/Popover/Popover.module.css
index 3f252d3..54dd1a1 100644
--- a/frontend/src/app/components/Popover/Popover.module.css
+++ b/frontend/src/app/components/Popover/Popover.module.css
@@ -21,8 +21,8 @@
   position: absolute;
   top: 1.5rem;
   right: 1.5rem;
-  width: 2rem;
-  height: 2rem;
+  width: 3rem;
+  height: 3rem;
   font-size: 1.5rem;
   color: var(--color_purple);
   cursor: pointer;
diff --git a/frontend/src/app/components/Tasks/AddTask.js b/frontend/src/app/components/Tasks/AddTask.js
new file mode 100644
index 0000000..f67d733
--- /dev/null
+++ b/frontend/src/app/components/Tasks/AddTask.js
@@ -0,0 +1,78 @@
+import { useState } from "react";
+import Input from "../Forms/Input";
+
+export default function AddTask() {
+
+  const [taskName, setTaskName] = useState("");
+  const [importance, setImportance] = useState(0);
+  const [urgency, setUrgency] = useState(0);
+  const [repeat, setRepeat] = useState(0);
+
+  const importanceOptions = [
+    {
+      weight: 1,
+      name: "Nice to have"
+    },
+    {
+      weight: 2,
+      name: "Quite important"
+    },
+    {
+      weight: 3,
+      name: "F*cking important"
+    }
+  ];
+
+  const urgencyOptions = [
+    {
+      weight: 1,
+      name: "Maybe one day"
+    },
+    {
+      weight: 2,
+      name: "To be done ASAP"
+    },
+    {
+      weight: 3,
+      name: "Right now!"
+    }
+  ];
+
+  const repeatOptions = [
+    {
+      weight: 1,
+      name: "Daily"
+    },
+    {
+      weight: 2,
+      name: "Weekly"
+    },
+    {
+      weight: 3,
+      name: "Monthly"
+    }
+  ];
+
+  const addTask = async (e) => {
+    e.preventDefault();
+
+  };
+
+  return (
+    <>
+      <h2>Add Task</h2>
+      <form onSubmit={addTask}></form>
+        <Input 
+          onChange={e => setTaskName(e.target.value)} 
+          type="text" 
+          value={taskName} 
+          name="taskName"
+          style={{width: "100%"}}
+         />
+
+        
+
+
+    </>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/page.js b/frontend/src/app/page.js
index 51416ee..bff725e 100644
--- a/frontend/src/app/page.js
+++ b/frontend/src/app/page.js
@@ -4,6 +4,9 @@ import { useState, useEffect } from "react";
 import styles from "./page.module.css";
 import TaskRow from "./components/TaskRow/TaskRow";
 import defaultTasks from "./testdata/tasks.js";
+import Popover from "./components/Popover/Popover";
+import AddCircleRoundedIcon from '@mui/icons-material/AddCircleRounded';
+import AddTask from "./components/Tasks/AddTask";
 
 export default function Home() {
   const [tasks, setTasks] = useState(defaultTasks);
@@ -30,6 +33,17 @@ export default function Home() {
 
   return (
     <>
+      <Popover
+        trigger={
+          <div className={styles.addTaskIcon}>
+            <AddCircleRoundedIcon
+              className={styles.icon__add}
+            />
+          </div>
+        }
+      >
+        <AddTask />
+      </Popover>
       {tasks.map(({ name, id }) => {
         return <TaskRow key={id} taskName={name} />;
       })}
diff --git a/frontend/src/app/page.module.css b/frontend/src/app/page.module.css
index 44c9a9e..297ff82 100644
--- a/frontend/src/app/page.module.css
+++ b/frontend/src/app/page.module.css
@@ -115,6 +115,36 @@
   position: relative;
 }
 
+.addTaskIcon:before {
+  content: "";
+  position: absolute;
+  top: 25%;
+  left: 25%;
+  width: 50%;
+  height: 50%;
+  border-radius: 50%;
+  background: var(--color_white);
+}
+
+.addTaskIcon {
+  position: absolute;
+  color: var(--color_purple);
+  width: 4.5rem;
+  height: 4.5rem;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  cursor: pointer;
+  z-index: 1;
+}
+
+.icon__add {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  color: var(--color_purple);
+  z-index: 5;
+}
+
 /* Enable hover only on non-touch devices */
 @media (hover: hover) and (pointer: fine) {
   .card:hover {