diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
new file mode 100644
index 0000000..6bb9e72
--- /dev/null
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -0,0 +1,16 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="CssUnknownProperty" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myCustomPropertiesEnabled" value="true" />
+      <option name="myIgnoreVendorSpecificProperties" value="false" />
+      <option name="myCustomPropertiesList">
+        <value>
+          <list size="1">
+            <item index="0" class="java.lang.String" itemvalue="font-color" />
+          </list>
+        </value>
+      </option>
+    </inspection_tool>
+  </profile>
+</component>
\ No newline at end of file
diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml
new file mode 100644
index 0000000..d23208f
--- /dev/null
+++ b/.idea/jsLibraryMappings.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptLibraryMappings">
+    <includedPredefinedLibrary name="Node.js Core" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/anwendung/package-lock.json b/anwendung/package-lock.json
index 5a37061..7ca6cac 100644
--- a/anwendung/package-lock.json
+++ b/anwendung/package-lock.json
@@ -14,6 +14,9 @@
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "tailwindcss": "3.3.2"
+      },
+      "devDependencies": {
+        "daisyui": "^2.51.6"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -449,6 +452,47 @@
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
     },
+    "node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "node_modules/commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -462,6 +506,16 @@
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
     },
+    "node_modules/css-selector-tokenizer": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz",
+      "integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "fastparse": "^1.1.2"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -473,6 +527,26 @@
         "node": ">=4"
       }
     },
+    "node_modules/daisyui": {
+      "version": "2.51.6",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-2.51.6.tgz",
+      "integrity": "sha512-JRqOKayuFCmWe4X4k6Qvx1y7V/VNao8U5eTSOhusOKIzCsYqf56+TCSe4d7zmqGE0V6JiLDYAT8JeoWUeRKFCw==",
+      "dev": true,
+      "dependencies": {
+        "color": "^4.2",
+        "css-selector-tokenizer": "^0.8.0",
+        "postcss-js": "^4.0.0",
+        "tailwindcss": "^3"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/daisyui"
+      },
+      "peerDependencies": {
+        "autoprefixer": "^10.0.2",
+        "postcss": "^8.1.6"
+      }
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -522,6 +596,12 @@
         "node": ">= 6"
       }
     },
+    "node_modules/fastparse": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
+      "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
+      "dev": true
+    },
     "node_modules/fastq": {
       "version": "1.15.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
@@ -631,6 +711,12 @@
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
+    "node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+      "dev": true
+    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -1180,6 +1266,15 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dev": true,
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
diff --git a/anwendung/package.json b/anwendung/package.json
index 69dfa92..6712f8e 100644
--- a/anwendung/package.json
+++ b/anwendung/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "autoprefixer": "10.4.14",
+    "daisyui": "^2.51.6",
     "next": "13.3.4",
     "postcss": "8.4.23",
     "react": "18.2.0",
diff --git a/anwendung/src/Tests/login.jsx b/anwendung/src/Tests/login.jsx
new file mode 100644
index 0000000..9d23356
--- /dev/null
+++ b/anwendung/src/Tests/login.jsx
@@ -0,0 +1,18 @@
+import {useState} from "react";
+import Button from "@/components/Button";
+
+export default function Login(){
+    return(
+        <div className="artboard-demo phone-1">
+            <login className={"login-container"}>
+                <p className={"font-big"}>Login</p>
+                <p className={"font-middle placement"} align={"screenLeft"}>Username</p>
+                <input type="text" placeholder="Type here" className="input input-bordered w-full max-w-xs" />
+                <p className={"font-middle placement"} >Password</p>
+                <input type="text" placeholder="Type here" className="input input-bordered w-full max-w-xs" />
+                <br/>
+                <Button text={"Login"} color={"#808080"} width={"25px"}/>
+            </login>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/anwendung/src/pages/index.js b/anwendung/src/pages/index.js
index 7b7cbdf..c8afcd7 100644
--- a/anwendung/src/pages/index.js
+++ b/anwendung/src/pages/index.js
@@ -8,6 +8,7 @@ import PopUp from "@/components/PopUp";
 import CalenderView from "@/components/CalenderView";
 import DateElement from "@/components/DateElement";
 import InputForm from "@/components/InputForm";
+import Login from "@/Tests/login";
 
 
 
@@ -19,10 +20,15 @@ export default function Home(p) {
     return (
 
         <>
+
             <div className="container">
                 <PopUp/>
                 <InputForm/>
             </div>
+
+            <div style={{height: 50}}></div>
+            <Login/>
+
         </>
 
     )
diff --git a/anwendung/src/styles/globals.css b/anwendung/src/styles/globals.css
index 287514f..60cd88e 100644
--- a/anwendung/src/styles/globals.css
+++ b/anwendung/src/styles/globals.css
@@ -367,4 +367,56 @@ input {
 
 th {
   text-align: left;
-}
\ No newline at end of file
+}
+
+/*
+Login
+ */
+
+.login-container
+{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    width: 100%;
+    height: 100%;
+}
+
+.input-bordered
+{
+    border: 1px solid #000000;
+    border-radius: 5px;
+    padding: 5px;
+    width: 200px;
+}
+
+.input
+{
+    padding: 5px;
+    width: 200px;
+    background-color: aliceblue;
+    border-radius: 5px;
+    font-family: Arial, serif;
+    font-size: 16px;
+    font-color: white;
+}
+
+.phone-1{
+    width: 375px;
+    height: 350px;
+    background-color: #ffffff;
+    border-radius: 5px;
+    border-width: 3px;
+    border-color: #1e2428;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+}
+.placement{
+    text-align: left;
+}
+
diff --git a/anwendung/tailwind.config.js b/anwendung/tailwind.config.js
index d53b2ea..74da8f8 100644
--- a/anwendung/tailwind.config.js
+++ b/anwendung/tailwind.config.js
@@ -14,5 +14,5 @@ module.exports = {
       },
     },
   },
-  plugins: [],
+  plugins: [require("daisyui")],
 }