diff --git a/lists-cond-assignment-problem/app.js b/lists-cond-assignment-problem/app.js
new file mode 100644
index 0000000..e69de29
diff --git a/lists-cond-assignment-problem/index.html b/lists-cond-assignment-problem/index.html
new file mode 100644
index 0000000..13ed827
--- /dev/null
+++ b/lists-cond-assignment-problem/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vue Basics</title>
+    <link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap" rel="stylesheet" />
+    <link rel="stylesheet" href="styles.css" />
+    <script src="https://unpkg.com/vue@next" defer></script>
+    <script src="app.js" defer></script>
+</head>
+
+<body>
+    <header>
+        <h1>Vue Lists and Conditional Content</h1>
+    </header>
+    <section id="assignment">
+        <h2>Assignment</h2>
+        <!-- 1) Add code to manage a list of tasks in a Vue app -->
+        <!-- When clicking "Add Task" a new task with the entered text should be added -->
+        <input type="text">
+        <button>Add Task</button>
+        <ul>
+            <!-- 2) Output the list of tasks here -->
+        </ul>
+        <!-- 3) When the below button is pressed, the list should be shown or hidden -->
+        <!-- BONUS: Also update the button caption -->
+        <button>Hide / Show List</button>
+    </section>
+</body>
+
+</html>
diff --git a/lists-cond-assignment-problem/styles.css b/lists-cond-assignment-problem/styles.css
new file mode 100644
index 0000000..23845b7
--- /dev/null
+++ b/lists-cond-assignment-problem/styles.css
@@ -0,0 +1,80 @@
+* {
+    box-sizing: border-box;
+}
+
+html {
+    font-family: "Jost", sans-serif;
+}
+
+body {
+    margin: 0;
+}
+
+header {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+    margin: 3rem;
+    border-radius: 10px;
+    padding: 1rem;
+    background-color: #1b995e;
+    color: white;
+    text-align: center;
+}
+
+#assignment {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+    margin: 3rem;
+    border-radius: 10px;
+    padding: 1rem;
+    text-align: center;
+}
+
+#assignment h2 {
+    font-size: 2rem;
+    border-bottom: 4px solid #ccc;
+    color: #1b995e;
+    margin: 0 0 1rem 0;
+}
+
+#assignment ul {
+    list-style: none;
+    margin: 1rem 0;
+    padding: 0;
+}
+
+#assignment li {
+    margin: 1rem 0;
+    font-size: 1.25rem;
+    font-weight: bold;
+    background-color: #8ddba4;
+    padding: 0.5rem;
+    color: #1f1f1f;
+    border-radius: 25px;
+}
+
+#assignment input {
+    font: inherit;
+    border: 1px solid #ccc;
+}
+
+#assignment input:focus {
+    outline: none;
+    border-color: #1b995e;
+    background-color: #d7fdeb;
+}
+
+#assignment button {
+    font: inherit;
+    cursor: pointer;
+    border: 1px solid #ff0077;
+    background-color: #ff0077;
+    color: white;
+    padding: 0.05rem 1rem;
+    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26);
+}
+
+#assignment button:hover,
+#assignment button:active {
+    background-color: #ec3169;
+    border-color: #ec3169;
+    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
+}
