diff --git a/package-lock.json b/package-lock.json
index 77fef47..b97f2b8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,8 @@
       "name": "bewaesserung-frontend",
       "version": "0.0.0",
       "dependencies": {
+        "@headlessui/vue": "^1.7.15",
+        "@heroicons/vue": "^2.0.18",
         "pinia": "^2.1.4",
         "vue": "^3.3.4",
         "vue-router": "^4.2.4"
@@ -17,9 +19,12 @@
         "@vitejs/plugin-vue": "^4.2.3",
         "@vitejs/plugin-vue-jsx": "^3.0.1",
         "@vue/eslint-config-prettier": "^8.0.0",
+        "autoprefixer": "^10.4.14",
         "eslint": "^8.45.0",
         "eslint-plugin-vue": "^9.15.1",
+        "postcss": "^8.4.27",
         "prettier": "^3.0.0",
+        "tailwindcss": "^3.3.3",
         "vite": "^4.4.6"
       }
     },
@@ -32,6 +37,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
@@ -902,6 +919,25 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@headlessui/vue": {
+      "version": "1.7.15",
+      "resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.7.15.tgz",
+      "integrity": "sha512-3ozVEgQ8mw09nWvUPN+8S6C8l3SM0lVT1aEN/+oP5Y4LF0WNMM9UrVisVTN9LLQ06v/X3EFA0blyL/vg8XNZlg==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
+    "node_modules/@heroicons/vue": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-2.0.18.tgz",
+      "integrity": "sha512-BcTC9nq2TkwNSfQuqo96J7ehx4etezypc2YeTq7KsXWxrcrerhkgjLrxGRBnStN0wrXo0Gv4BInybqz5uBG6Cw==",
+      "peerDependencies": {
+        "vue": ">= 3"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",
@@ -1285,12 +1321,70 @@
         "node": ">=4"
       }
     },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true
+    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "dev": true
     },
+    "node_modules/autoprefixer": {
+      "version": "10.4.14",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",
+      "integrity": "sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        }
+      ],
+      "dependencies": {
+        "browserslist": "^4.21.5",
+        "caniuse-lite": "^1.0.30001464",
+        "fraction.js": "^4.2.0",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.0.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -1306,6 +1400,15 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/boolbase": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
@@ -1414,6 +1517,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001517",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001517.tgz",
@@ -1448,6 +1560,45 @@
         "node": ">=4"
       }
     },
+    "node_modules/chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://paulmillr.com/funding/"
+        }
+      ],
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -1463,6 +1614,15 @@
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
       "dev": true
     },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1575,6 +1735,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true
+    },
     "node_modules/doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -2129,6 +2301,19 @@
       "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
       "dev": true
     },
+    "node_modules/fraction.js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
+      "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://www.patreon.com/infusion"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -2149,6 +2334,12 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "dev": true
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -2217,6 +2408,18 @@
       "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
       "dev": true
     },
+    "node_modules/has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "dev": true,
+      "dependencies": {
+        "function-bind": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
     "node_modules/has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -2297,6 +2500,30 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "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",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.12.1.tgz",
+      "integrity": "sha512-Q4ZuBAe2FUsKtyQJoQHlvP8OvBERxO3jEmy1I7hcRXcJBGGHFh/aJBswbXuS9sgrDH2QUO8ilkwNPHvHMd8clg==",
+      "dev": true,
+      "dependencies": {
+        "has": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-docker": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-3.0.0.tgz",
@@ -2414,6 +2641,15 @@
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "dev": true
     },
+    "node_modules/jiti": {
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.19.1.tgz",
+      "integrity": "sha512-oVhqoRDaBXf7sjkll95LHVS6Myyyb1zaunVwk4Z0+WPSW4gjS0pl01zYKHScTuyEhQsFxV5L4DR5r+YqSyqyyg==",
+      "dev": true,
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -2481,6 +2717,21 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lilconfig": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -2586,6 +2837,17 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "dev": true
     },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
@@ -2615,6 +2877,24 @@
       "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==",
       "dev": true
     },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/npm-run-path": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.1.0.tgz",
@@ -2654,6 +2934,24 @@
         "url": "https://github.com/fb55/nth-check?sponsor=1"
       }
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -2782,6 +3080,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true
+    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -2799,6 +3103,15 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/pinia": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.1.6.tgz",
@@ -2849,6 +3162,15 @@
         }
       }
     },
+    "node_modules/pirates": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
+      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.27",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.27.tgz",
@@ -2876,6 +3198,90 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "dev": true,
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz",
+      "integrity": "sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==",
+      "dev": true,
+      "dependencies": {
+        "lilconfig": "^2.0.5",
+        "yaml": "^2.1.1"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
+      "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
+      "dev": true,
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.11"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
     "node_modules/postcss-selector-parser": {
       "version": "6.0.13",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
@@ -2889,6 +3295,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -2954,6 +3366,44 @@
         }
       ]
     },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz",
+      "integrity": "sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==",
+      "dev": true,
+      "dependencies": {
+        "is-core-module": "^2.11.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -3211,6 +3661,48 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/sucrase": {
+      "version": "3.34.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz",
+      "integrity": "sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "7.1.6",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/sucrase/node_modules/glob": {
+      "version": "7.1.6",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+      "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -3223,6 +3715,18 @@
         "node": ">=4"
       }
     },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/svg-tags": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
@@ -3245,12 +3749,70 @@
         "url": "https://opencollective.com/unts"
       }
     },
+    "node_modules/tailwindcss": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz",
+      "integrity": "sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==",
+      "dev": true,
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.2.12",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.18.2",
+        "lilconfig": "^2.1.0",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.23",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.1",
+        "postcss-nested": "^6.0.1",
+        "postcss-selector-parser": "^6.0.11",
+        "resolve": "^1.22.2",
+        "sucrase": "^3.32.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/titleize": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/titleize/-/titleize-3.0.0.tgz",
@@ -3284,6 +3846,12 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true
+    },
     "node_modules/tslib": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.1.tgz",
@@ -3542,6 +4110,15 @@
       "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
       "dev": true
     },
+    "node_modules/yaml": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.1.tgz",
+      "integrity": "sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/package.json b/package.json
index 3670ed2..af34c27 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,8 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "@headlessui/vue": "^1.7.15",
+    "@heroicons/vue": "^2.0.18",
     "pinia": "^2.1.4",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4"
@@ -19,9 +21,12 @@
     "@vitejs/plugin-vue": "^4.2.3",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
     "@vue/eslint-config-prettier": "^8.0.0",
+    "autoprefixer": "^10.4.14",
     "eslint": "^8.45.0",
     "eslint-plugin-vue": "^9.15.1",
+    "postcss": "^8.4.27",
     "prettier": "^3.0.0",
+    "tailwindcss": "^3.3.3",
     "vite": "^4.4.6"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..33ad091
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/src/App.vue b/src/App.vue
index 95f63c5..6840a6e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,16 +2,12 @@
 import Footer from './components/siteElements/FixedFooter.vue'
 import TopBanner from './components/siteElements/TopBanner.vue'
 import Sidebar from './components/siteElements/SideBar.vue'
-import Nav from './components/siteElements/NavBar.vue'
 import { RouterView } from 'vue-router'
 </script>
 
 <template>
-  <header>
     <TopBanner>
-      <Nav />
     </TopBanner>
-  </header>
 
   <main>
     <div class="content">
diff --git a/src/assets/main.css b/src/assets/main.css
index f231fff..792a005 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,5 +1,9 @@
 /* @import './base.css'; */
 
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 body {
   margin: 0px;
   margin-bottom: 5em;
diff --git a/src/components/irrigation/irrigationAreaConfCard.vue b/src/components/irrigation/irrigationAreaConfCard.vue
index e3821db..c212c8c 100644
--- a/src/components/irrigation/irrigationAreaConfCard.vue
+++ b/src/components/irrigation/irrigationAreaConfCard.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="mainDiv">
+    <div class="rounded-lg border-2 border-solid border-black flex flex-wrap">
         <div class="areaDiv">
             <label for="name">
                 Name:
@@ -98,12 +98,11 @@ function confDeleted(id) {
 </script>
 
 <style scoped>
-.areaConfDiv{
+/* .areaConfDiv{
     width: 300px;
     overflow-y: scroll;
 }
 
-/* width */
 .areaConfDiv::-webkit-scrollbar {
   border: 0;
 }
@@ -156,5 +155,5 @@ label {
     display: flex;
     justify-content: space-between;
     margin: 0px 0px 8px 0px;
-}
+} */
 </style>
\ No newline at end of file
diff --git a/src/components/irrigation/irrigationAreaConfLine.vue b/src/components/irrigation/irrigationAreaConfLine.vue
index c3751f3..c966a2f 100644
--- a/src/components/irrigation/irrigationAreaConfLine.vue
+++ b/src/components/irrigation/irrigationAreaConfLine.vue
@@ -14,8 +14,11 @@
 
 <script setup>
 import IrrigationApi from '../../helper/irrigationApi';
-import { reactive } from 'vue';
+import { useRouter } from 'vue-router'
+import { areaConfigSelect } from '../../stores/configSelect.js';
 
+const store = areaConfigSelect();
+const router = useRouter()
 const props = defineProps(['areaConf']);
 const emit = defineEmits(['confDeleted']);
 const api = new IrrigationApi();
@@ -37,7 +40,9 @@ function deleteConf() {
 }
 
 function detailsConf() {
-
+    store.$state.areaConf = props.areaConf;
+    store.$state.areaConfId = props.areaConf.id;
+    router.push('/irrigationEventView');
 }
 </script>
 
diff --git a/src/components/irrigation/irrigationEventCard.vue b/src/components/irrigation/irrigationEventCard.vue
index 43603ba..c7779e8 100644
--- a/src/components/irrigation/irrigationEventCard.vue
+++ b/src/components/irrigation/irrigationEventCard.vue
@@ -1,11 +1,33 @@
 <template>
     <div>
-
+        <form>
+            <label for="">
+                <input type="checkbox" name="activ">
+                Aktiv
+            </label>
+            <select>
+                <option v-for="(day, index) in days" :key="day" :value="index">
+                    {{ day }}
+                </option>
+            </select>
+            <label for="time">
+                Startzeit: 
+                <input type="time" name="time">
+            </label>
+            <label for="duration">
+                Dauer:
+                <input type="number" name="duration" value="20">
+            </label>
+            <button><img src="../../assets/img/buttons/sync_icon.svg" alt="Aktualisieren"></button>
+            <button><img src="../../assets/img/buttons/delete_icon.svg" alt="Löschen"></button>
+        </form>
     </div>
 </template>
 
 <script setup>
 
+const props = defineProps(['eventId']);
+const days = ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag', 'Sonntag'];
 </script>
 
 <style scoped>
diff --git a/src/components/siteElements/TopBanner.vue b/src/components/siteElements/TopBanner.vue
index 53c1186..6230cf8 100644
--- a/src/components/siteElements/TopBanner.vue
+++ b/src/components/siteElements/TopBanner.vue
@@ -1,25 +1,153 @@
-<script setup></script>
-
 <template>
-  <div class="banner">
-    <h1>Lebennig Huus Bewässerung</h1>
-    <slot></slot>
-  </div>
+	<header class="bg-white">
+		<nav class="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8" aria-label="Global">
+			<div class="flex lg:flex-1">
+				<RouterLink to="/" class="-m-1.5 p-1.5">
+					<p class="text-2xl">
+						Lebennig Huus <br /> Bewässerung
+					</p>
+				</RouterLink>
+			</div>
+			<div class="flex lg:hidden">
+				<button type="button" class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
+					@click="mobileMenuOpen = true">
+					<span class="sr-only">Open main menu</span>
+					<Bars3Icon class="h-6 w-6" aria-hidden="true" />
+				</button>
+			</div>
+			<PopoverGroup class="hidden lg:flex lg:gap-x-12">
+
+				<RouterLink to="/" class="text-sm font-semibold leading-6 text-gray-900 flex">
+					<img src="../../assets/img/menuIcon/home.svg" /> Start
+				</RouterLink>
+				<RouterLink to="/quickControl" class="text-sm font-semibold leading-6 text-gray-900 flex">
+					<img src="../../assets/img/menuIcon/bolt.svg" /> Schnellzugriff
+				</RouterLink>
+
+				<Popover class="relative">
+					<PopoverButton class="flex items-center gap-x-1 text-sm font-semibold leading-6 text-gray-900">
+						<img src="../../assets/img/menuIcon/water_drop.svg" />
+						Bewässerung
+						<ChevronDownIcon class="h-5 w-5 flex-none text-gray-400" aria-hidden="true" />
+					</PopoverButton>
+
+					<transition enter-active-class="transition ease-out duration-200"
+						enter-from-class="opacity-0 translate-y-1" enter-to-class="opacity-100 translate-y-0"
+						leave-active-class="transition ease-in duration-150" leave-from-class="opacity-100 translate-y-0"
+						leave-to-class="opacity-0 translate-y-1">
+						<PopoverPanel
+							class="absolute -left-8 top-full z-10 mt-3 w-screen max-w-md overflow-hidden rounded-3xl bg-white shadow-lg ring-1 ring-gray-900/5">
+							<div class="p-4">
+								<div v-for="item in products" :key="item.name"
+									class="group relative flex items-center gap-x-6 rounded-lg p-4 text-sm leading-6 hover:bg-gray-50">
+									<div
+										class="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
+										<component :is="item.icon" class="h-6 w-6 text-gray-600 group-hover:text-indigo-600"
+											aria-hidden="true" />
+									</div>
+									<div class="flex-auto">
+										<RouterLink :to="item.href" class="block font-semibold text-gray-900">
+											{{ item.name }}
+											<span class="absolute inset-0" />
+										</RouterLink>
+										<p class="mt-1 text-gray-600">{{ item.description }}</p>
+									</div>
+								</div>
+							</div>
+						</PopoverPanel>
+					</transition>
+
+				</Popover>
+
+				<RouterLink to="/lighting" class="text-sm font-semibold leading-6 text-gray-900 flex">
+					<img src="../../assets/img/menuIcon/lightbulb.svg" /> Beleuchtung
+				</RouterLink>
+				<RouterLink to="/about" class="text-sm font-semibold leading-6 text-gray-900 flex">
+					<img src="../../assets/img/menuIcon/logs.svg" /> About
+				</RouterLink>
+
+			</PopoverGroup>
+			<div class="hidden lg:flex lg:flex-1 lg:justify-end">
+				<RouterLink to="/" class="text-sm font-semibold leading-6 text-gray-900">Log in <span
+						aria-hidden="true">&rarr;</span></RouterLink>
+			</div>
+		</nav>
+		<Dialog as="div" class="lg:hidden" @close="mobileMenuOpen = false" :open="mobileMenuOpen">
+			<div class="fixed inset-0 z-10" />
+			<DialogPanel
+				class="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
+				<div class="flex items-center justify-between">
+					<RouterLink to="/" class="-m-1.5 p-1.5">
+						<p class="text-xl">
+							Lebennig Huus <br /> Bewässerung
+						</p>
+					</RouterLink>
+					<button type="button" class="-m-2.5 rounded-md p-2.5 text-gray-700" @click="mobileMenuOpen = false">
+						<XMarkIcon class="h-6 w-6" aria-hidden="true" />
+					</button>
+				</div>
+				<div class="mt-6 flow-root">
+					<div class="-my-6 divide-y divide-gray-500/10">
+						<div class="space-y-2 py-6">
+							<RouterLink to="/"
+								class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">
+								Start</RouterLink>
+							<RouterLink to="/quickControl"
+								class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">
+								Schnellzugriff</RouterLink>
+
+							<Disclosure as="div" class="-mx-3" v-slot="{ open }">
+								<DisclosureButton
+									class="flex w-full items-center justify-between rounded-lg py-2 pl-3 pr-3.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">
+									Bewässerung
+									<ChevronDownIcon :class="[open ? 'rotate-180' : '', 'h-5 w-5 flex-none']"
+										aria-hidden="true" />
+								</DisclosureButton>
+								<DisclosurePanel class="mt-2 space-y-2">
+									<RouterLink v-for="item in products" :key="item.name"
+										:to="item.href"
+										class="block rounded-lg py-2 pl-6 pr-3 text-sm font-semibold leading-7 text-gray-900 hover:bg-gray-50">
+										{{ item.name }}
+									</RouterLink>
+								</DisclosurePanel>
+							</Disclosure>
+
+							<RouterLink to="/lighting"
+								class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">
+								Beleuchtung</RouterLink>
+							<RouterLink to="/about"
+								class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">
+								About</RouterLink>
+
+						</div>
+						<div class="py-6">
+							<RouterLink to="/"
+								class="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">
+								Log in
+							</RouterLink>
+						</div>
+					</div>
+				</div>
+			</DialogPanel>
+		</Dialog>
+	</header>
 </template>
 
-<style scoped>
-.banner {
-  display: flex;
-  width: 100%;
-  background-color: green;
-  height: 6em;
-  align-items: center;
-  justify-items: center;
-  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
-}
+<script setup>
+import { ref } from 'vue'
+import { RouterLink } from 'vue-router'
+import { Dialog, DialogPanel, Disclosure, DisclosureButton, DisclosurePanel, Popover, PopoverButton, PopoverGroup, PopoverPanel } from '@headlessui/vue'
+import { Bars3Icon, ChartPieIcon, SquaresPlusIcon, XMarkIcon, ClockIcon, InformationCircleIcon, Cog8ToothIcon } from '@heroicons/vue/24/outline'
+import { ChevronDownIcon, PhoneIcon, PlayCircleIcon } from '@heroicons/vue/20/solid'
 
-h1 {
-  margin: 0px;
-  margin-left: 16px;
-}
-</style>
+const products = [
+	{ name: 'Allgemein', description: 'Übersicht über die Bewässerung', href: '/', icon: InformationCircleIcon },
+	{ name: 'Bereiche', description: 'Bereiche und Konfigurationen bearbeiten', href: '/irrigation', icon: SquaresPlusIcon },
+	{ name: 'Zeiten', description: 'Zeiten in den einzelnen Konfigurationen bearbeiten', href: '/irrigationEventView', icon: ClockIcon },
+	{ name: 'Statistik', description: 'Comming soon', href: '/', icon: ChartPieIcon },
+	{ name: 'Pumpe', description: 'Schalten und walten', href: '/', icon: Cog8ToothIcon },
+];
+const mobileMenuOpen = ref(false)
+
+</script>
+  
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index e1f9436..8c875f1 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,6 +3,7 @@ import HomeView from '../views/HomeView.vue';
 import QuickAreaControlView from '../views/QuickAreaControlView.vue';
 import LightingView from '../views/LightingView.vue';
 import IrrigationView from '../views/IrrigationView.vue';
+import IrrigationEventView from '../views/IrrigationEventView.vue';
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -45,6 +46,11 @@ const router = createRouter({
       name: 'irrigation',
       component: IrrigationView
     },
+    {
+      path: '/irrigationEventView',
+      name: 'irrigationEventView',
+      component: IrrigationEventView
+    },
   ]
 })
 
diff --git a/src/stores/configSelect.js b/src/stores/configSelect.js
new file mode 100644
index 0000000..642af6e
--- /dev/null
+++ b/src/stores/configSelect.js
@@ -0,0 +1,16 @@
+import { defineStore } from 'pinia'
+
+export const areaConfigSelect = defineStore("areaConfigSelect", {
+    state: () => ({
+        areaConfId: "Test",
+        areaConf: {}
+    }),
+    actions: {
+        sayHello() {
+            console.log('Hello from a Store');
+        }
+    },
+    getters: {
+        giveId: (state) => state.areaConfId
+    }
+});
\ No newline at end of file
diff --git a/src/views/IrrigationView.vue b/src/views/IrrigationView.vue
index 3e10fc8..865c2b1 100644
--- a/src/views/IrrigationView.vue
+++ b/src/views/IrrigationView.vue
@@ -1,32 +1,37 @@
 <script setup>
-    import IrrigationAreaConfCard from '../components/irrigation/irrigationAreaConfCard.vue';
-    import IrrigationApi from '../helper/irrigationApi';
-    import { reactive } from 'vue'
+import IrrigationAreaConfCard from '../components/irrigation/irrigationAreaConfCard.vue';
+import IrrigationApi from '../helper/irrigationApi';
+import { reactive } from 'vue'
 
-    const api = new IrrigationApi();
-    const areas = reactive([]);
+const api = new IrrigationApi();
+const areas = reactive([]);
 
-    api.getAreas((data) => {
-        data.forEach(area => {
-            areas.push(area);
-        });
+api.getAreas((data) => {
+    data.forEach(area => {
+        areas.push(area);
     });
+});
 
-    function removeArea(id) {
-        const index = areas.findIndex(area => area.id === id);
-        if (index >= 0) {
-            areas.splice(index, 1);
-        }
+function removeArea(id) {
+    const index = areas.findIndex(area => area.id === id);
+    if (index >= 0) {
+        areas.splice(index, 1);
     }
+}
 </script>
 
 <template>
     <h2>Bewässerung</h2>
-    <IrrigationAreaConfCard v-for="area in areas" :key="area.id" :areaId="area.id" @areaDeleted="removeArea">
-        
-    </IrrigationAreaConfCard>
+    <div class="rowMaking">
+        <IrrigationAreaConfCard v-for="area in areas" :key="area.id" :areaId="area.id" @areaDeleted="removeArea">
+
+        </IrrigationAreaConfCard>
+    </div>
 </template>
 
 <style scoped>
-
+.rowMaking{
+    display: flex;
+    flex-wrap: wrap;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/irrigationEventView.vue b/src/views/irrigationEventView.vue
new file mode 100644
index 0000000..3bfb7d7
--- /dev/null
+++ b/src/views/irrigationEventView.vue
@@ -0,0 +1,34 @@
+<template>
+    <h2>Konfiguration Auswählen</h2>
+    <div>
+        <label for="area">
+            Bereich:
+            <select name="area">
+                <option value="bla"> Hey </option>
+            </select>
+        </label>
+        <label for="areaConf">
+            Konfiguration:
+            <select name="areaConf">
+                <option value="blu"> Du </option>
+            </select>
+        </label>
+    </div>
+    <h2>Bewässerungs Zeiten</h2>
+    <div class="eventCards">
+        <EventCard v-for="event in store.$state.areaConf.irrigationEvents" :key="event.id" :eventId="event.id">
+            
+        </EventCard>
+    </div>
+</template>
+
+<script setup>
+import { areaConfigSelect } from '../stores/configSelect.js';
+import EventCard from '../components/irrigation/irrigationEventCard.vue'
+
+const store = areaConfigSelect();
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..59e3d38
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./index.html",
+    "./src/**/*.{vue,js,ts,jsx,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+