diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..13566b81b018ad684f3a35fee301741b2734c8f4
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
diff --git a/.idea/misc.xml b/.idea/misc.xml
new file mode 100644
index 0000000000000000000000000000000000000000..31e1ebce6f2b58fc88c498dd5f8aeaeb3e69139c
--- /dev/null
+++ b/.idea/misc.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+ <component name="ProjectRootManager" version="2" languageLevel="JDK_23" default="true" project-jdk-name="openjdk-23" project-jdk-type="JavaSDK">
+ <output url="file://$PROJECT_DIR$/out" />
+ </component>
+</project>
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000000000000000000000000000000000000..020a015cb7211696a0e0d4b49e996c01b9d1922a
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+ <component name="ProjectModuleManager">
+ <modules>
+ <module fileurl="file://$PROJECT_DIR$/.idea/to-do-list-abbas.iml" filepath="$PROJECT_DIR$/.idea/to-do-list-abbas.iml" />
+ </modules>
+ </component>
+</project>
\ No newline at end of file
diff --git a/.idea/to-do-list-abbas.iml b/.idea/to-do-list-abbas.iml
new file mode 100644
index 0000000000000000000000000000000000000000..c90834f2d607afe55e6104d8aa2cdfffb713f688
--- /dev/null
+++ b/.idea/to-do-list-abbas.iml
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+ <component name="NewModuleRootManager" inherit-compiler-output="true">
+ <exclude-output />
+ <content url="file://$MODULE_DIR$">
+ <sourceFolder url="file://$MODULE_DIR$/src" isTestSource="false" />
+ </content>
+ <orderEntry type="inheritedJdk" />
+ <orderEntry type="sourceFolder" forTests="false" />
+ </component>
+</module>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000000000000000000000000000000000000..35eb1ddfbbc029bcab630581847471d7f238ec53
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+ <component name="VcsDirectoryMappings">
+ <mapping directory="" vcs="Git" />
+ </component>
+</project>
\ No newline at end of file
diff --git a/src/Controller.js b/src/Controller.js
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/Layout.html b/src/Layout.html
new file mode 100644
index 0000000000000000000000000000000000000000..c354fff2b1e629430c846624c263ee1a079ef2b5
--- /dev/null
+++ b/src/Layout.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <link rel="stylesheet" href="Stylesheet.css">
+ <script src="Controller.js" defer></script>
+ <title>To-Do-List</title>
+</head>
+<body>
+ <div id="container">
+ <div id="left-side">
+ <h1>TODO-Liste</h1>
+ <form>
+ <input id="txt-todo" type="text" placeholder="Aufgabe">
+ <button id="btn-add">Hinzufügen</button>
+ </form>
+ </div>
+ <div id="right-side">
+ <ul id="list-todo">
+ <li class="items-todo"></li>
+ </ul>
+ </div>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/Stylesheet.css b/src/Stylesheet.css
new file mode 100644
index 0000000000000000000000000000000000000000..d8a36baccf20c86e5b76ad249eae13b1a8288402
--- /dev/null
+++ b/src/Stylesheet.css
@@ -0,0 +1,142 @@
+:root{
+ --background: #33302B;
+ --primary-color: #332F29;
+ --secondary-color: #5C4E3A;
+ --accent-color: #DB8C1D;
+ --text-color: #000000;
+}
+
+*{
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+html{
+ font-family: "Consolas", Arial, sans-serif;
+ font-size: 16px;
+ color: var(--text-color);
+}
+
+body{
+ min-height: 100vh;
+ background-color: var(--background);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+#container{
+ display: flex;
+ width: 80%;
+ max-width: 1200px;
+}
+
+#left-side{
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 20px;
+}
+
+h1{
+ font-size: 3rem;
+ font-weight: bold;
+ text-transform: uppercase;
+ color: var(--accent-color);
+ margin-bottom: 20px;
+}
+
+form{
+ position: relative;
+ width: 100%;
+ max-width: 400px;
+}
+
+#txt-todo{
+ width: 100%;
+ padding: 12px 20px;
+ border: 2px solid var(--secondary-color);
+ border-radius: 1000px;
+ font: inherit;
+ color: var(--text-color);
+ caret-color: var(--accent-color);
+ background: none;
+}
+
+#txt-todo:focus{
+ outline: none;
+}
+
+#btn-add{
+ position: absolute;
+ top: 0;
+ right: 0;
+ height: 100%;
+ padding: 0 30px;
+ border: none;
+ border-radius: 1000px;
+ font: inherit;
+ color: var(--background);
+ background-color: var(--accent-color);
+ cursor: pointer;
+}
+
+#right-side{
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 20px;
+}
+
+#list-todo{
+ width: 100%;
+ max-width: 400px;
+ list-style: none;
+}
+
+.items-todo{
+ background-color: var(--primary-color);
+ padding: 15px;
+ margin-bottom: 10px;
+ border-radius: 15px;
+ display: flex;
+ align-items: center;
+}
+
+.items-todo .item-text{
+ flex-grow: 1;
+ padding-left: 10px;
+}
+
+.btn-delete{
+ background: none;
+ border: none;
+ cursor: pointer;
+}
+
+.custom-checkbox{
+ border: 2px solid var(--accent-color);
+ border-radius: 50%;
+ width: 20px;
+ height: 20px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+input[type="checkbox"]{
+ display: none;
+}
+
+input[type="checkbox"]:checked ~ .custom-checkbox{
+ background-color: var(--accent-color);
+}
+
+input[type="checkbox"]:checked ~ .item-text{
+ text-decoration: line-through;
+ color: var(--secondary-color);
+}