Neues Login Design und Dashboard

2024-01-19 11:36:46 +07:00
parent fa9cfe3545
commit 933ef6d876
41 changed files with 1769 additions and 686 deletions
--- a/cypress/e2e/VerbrauchsausweisWohnen/erstellen.cy.ts
+++ b/cypress/e2e/VerbrauchsausweisWohnen/erstellen.cy.ts
@@ -223,7 +223,7 @@ describe("Verbrauchsausweis erstellen Schritt 1", () => {
 		cy.get("button[name='registrieren']").click();

 		const email = faker.internet.email();
-		const passwort = faker.internet.password();
+		const passwort = "test1234";
 		const vorname = faker.person.firstName();
 		const nachname = faker.person.lastName();

--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -14,6 +14,7 @@ services:
      - ./node_modules/@ibcornelsen/ui:/online-energieausweis/node_modules/@ibcornelsen/ui
      - ./node_modules/@ibcornelsen/database:/online-energieausweis/node_modules/@ibcornelsen/database
      - ./node_modules/@ibcornelsen/api:/online-energieausweis/node_modules/@ibcornelsen/api
+      - ./node_modules/radix-svelte-icons:/online-energieausweis/node_modules/radix-svelte-icons
      - ../api/persistent:/persistent
  ibcornelsen-api:
    extends:
--- a/package.json
+++ b/package.json
@@ -48,11 +48,13 @@
    "knex": "^2.4.2",
    "moment": "^2.29.4",
    "pg": "^8.11.0",
+    "radix-svelte-icons": "^1.0.0",
    "sass": "^1.62.1",
    "svelte": "^3.59.1",
    "svelte-dialogs": "^1.2.2",
    "svelte-preprocess": "^5.0.3",
    "svelte-ripple-action": "^1.0.5",
+    "svelte-tabs": "^1.1.0",
    "tailwindcss": "^3.3.2",
    "trpc-openapi": "^1.2.0",
    "uuid": "^9.0.0",
--- a/public/images/header/logo-big.svg
+++ b/public/images/header/logo-big.svg
@@ -0,0 +1,105 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="svg5659"
+   xml:space="preserve"
+   width="433.33334"
+   height="160"
+   viewBox="0 0 433.33334 160"
+   sodipodi:docname="Logo_IB-Cornelsen-Balken_04_07_2020_final.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"><metadata
+     id="metadata5665"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs5663"><clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath5675"><path
+         d="M 0,120 H 325 V 0 H 0 Z"
+         id="path5673"
+         inkscape:connector-curvature="0" /></clipPath></defs><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="995"
+     id="namedview5661"
+     showgrid="false"
+     inkscape:zoom="2"
+     inkscape:cx="216.66667"
+     inkscape:cy="80"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g5671" /><g
+     id="g5667"
+     inkscape:groupmode="layer"
+     inkscape:label="Logo_IB-Cornelsen-IO_24_07_2015_final"
+     transform="matrix(1.3333333,0,0,-1.3333333,0,160)"><g
+       clip-path="url(#clipPath5675)"
+       id="g5671"><path
+         inkscape:connector-curvature="0"
+         id="path5677"
+         style="fill:#848b91;fill-opacity:1;fill-rule:evenodd;stroke:none"
+         d="m 89.392,38.945 c 2.902,-0.732 5.754,-1.451 8.619,-2.174 -0.032,-2.896 -0.615,-5.55 -2.76,-7.626 -1.713,-1.657 -3.83,-2.317 -6.16,-2.327 -4.429,-0.021 -8.859,0 -13.289,-0.009 -5.25,-0.01 -8.256,3.843 -8.722,8.019 -0.071,0.631 -0.088,1.27 -0.088,1.906 -0.006,9.88 -0.02,19.763 0.005,29.647 0.006,2.682 0.809,5.105 2.702,7.086 1.601,1.676 3.629,2.375 5.886,2.392 4.534,0.036 9.069,0.061 13.6,-0.002 5.822,-0.082 8.199,-4.032 8.705,-8.099 0.078,-0.615 0.098,-1.237 0.147,-1.904 -2.889,-0.75 -5.747,-1.492 -8.651,-2.243 -0.031,0.259 -0.06,0.475 -0.08,0.692 -0.146,1.638 -1.18,2.701 -2.82,2.85 -0.617,0.06 -1.24,0.062 -1.862,0.064 -1.851,0.008 -3.705,0.008 -5.556,-0.002 -0.369,-0.002 -0.742,-0.024 -1.104,-0.095 -1.556,-0.302 -2.316,-1.307 -2.336,-3.084 -0.013,-1.11 -0.004,-2.834 -0.004,-2.834 0.001,-0.275 0.002,-0.725 0.002,-1 V 38.791 c 0,-2.326 2.812,-3.166 2.812,-3.166 0.263,-0.078 0.704,-0.143 0.979,-0.143 h 6.522 c 2.094,0 3.17,0.975 3.389,3.063 0.011,0.115 0.037,0.23 0.064,0.4" /><path
+         inkscape:connector-curvature="0"
+         id="path5679"
+         style="fill:#848b91;fill-opacity:1;fill-rule:evenodd;stroke:none"
+         d="m 172.946,60.832 c 0,0.275 0.225,0.5 0.5,0.5 h 5.06 c 0.275,0 0.5,-0.225 0.5,-0.5 V 27.291 c 0,-0.275 -0.225,-0.5 -0.5,-0.5 h -0.204 c -1.541,0 -3.082,0.004 -4.621,-0.006 -0.252,-0.002 -0.392,0.063 -0.513,0.303 -2.396,4.775 -4.801,9.547 -7.203,14.32 -0.819,1.625 -1.637,3.252 -2.457,4.877 l -0.043,0.088 c -0.098,0.157 -0.178,0.061 -0.178,-0.215 V 27.313 c 0,-0.276 -0.224,-0.5 -0.5,-0.5 h -5.067 c -0.275,0 -0.5,0.224 -0.5,0.5 v 33.543 c 0,0.275 0.225,0.5 0.5,0.5 h 0.39 c 1.468,0 2.935,-0.01 4.401,0.009 0.329,0.004 0.495,-0.103 0.64,-0.396 3.162,-6.313 6.334,-12.621 9.507,-18.928 0.064,-0.129 0.137,-0.254 0.288,-0.365 z" /><path
+         inkscape:connector-curvature="0"
+         id="path5681"
+         style="fill:#848b91;fill-opacity:1;fill-rule:evenodd;stroke:none"
+         d="m 312.242,27.291 c 0,-0.275 -0.224,-0.501 -0.5,-0.501 0,0 -2.943,-0.007 -4.645,0.013 -0.125,0.002 -0.296,0.164 -0.364,0.293 -0.981,1.925 -1.953,3.855 -2.923,5.785 -2.245,4.455 -4.489,8.91 -6.734,13.363 l -0.05,0.1 c -0.101,0.164 -0.184,0.074 -0.184,-0.201 V 27.324 c 0,-0.275 -0.225,-0.5 -0.5,-0.5 h -5.075 c -0.276,0 -0.5,0.225 -0.5,0.5 v 33.533 c 0,0.275 0.215,0.5 0.479,0.5 1.6,0 3.198,-0.011 4.799,0.008 0.351,0.006 0.517,-0.112 0.67,-0.42 3.188,-6.365 6.388,-12.724 9.586,-19.086 l 0.033,-0.064 c 0.072,-0.135 0.131,-0.02 0.131,0.256 v 18.771 c 0,0.275 0.224,0.5 0.5,0.5 h 4.777 c 0.276,0 0.5,-0.225 0.5,-0.5 z" /><path
+         inkscape:connector-curvature="0"
+         id="path5683"
+         style="fill:#848b91;fill-opacity:1;fill-rule:evenodd;stroke:none"
+         d="m 136.597,47.637 c 0,-0.276 0.14,-0.51 0.311,-0.522 h 0.13 c 2.355,-0.002 4.707,-0.006 7.062,0 1.321,0.003 2.104,0.764 2.127,2.087 0.018,1.319 0.022,2.638 -0.002,3.954 -0.026,1.401 -0.746,2.087 -2.146,2.089 -2.352,0.002 -6.559,0 -6.559,0 h -0.712 c -0.116,0 -0.211,-0.224 -0.211,-0.5 z m -0.016,-6.623 V 27.32 c 0,-0.275 -0.225,-0.5 -0.5,-0.5 h -5.08 c -0.275,0 -0.5,0.225 -0.5,0.5 v 33.991 c 0.078,0.013 0.16,0.043 0.244,0.043 5.11,10e-4 10.221,0 15.331,10e-4 4.017,0 6.187,-3.216 6.244,-6.283 0.05,-2.756 0.047,-5.511 0.004,-8.265 -0.043,-2.621 -1.959,-4.905 -4.538,-5.53 -0.225,-0.054 -0.457,-0.101 -0.746,-0.166 1.771,-4.783 5.12,-13.839 5.12,-13.839 0.095,-0.257 -0.052,-0.468 -0.327,-0.468 h -6.037 c -0.367,0.981 -0.74,1.975 -1.11,2.967 -1.357,3.633 -2.707,7.266 -4.073,10.893 -0.052,0.143 -0.237,0.332 -0.362,0.334 -1.199,0.025 -2.396,0.016 -3.67,0.016" /><path
+         inkscape:connector-curvature="0"
+         id="path5685"
+         style="fill:#848b91;fill-opacity:1;fill-rule:evenodd;stroke:none"
+         d="m 119.537,43.555 v 1 8.388 c -0.003,1.606 -0.697,2.3 -2.309,2.302 -1.644,0.002 -3.29,0.002 -4.933,0 -1.732,0 -2.441,-0.705 -2.442,-2.421 0,-5.851 0,-11.703 0.001,-17.554 0,-0.223 0.004,-0.448 0.038,-0.665 0.142,-0.953 0.685,-1.508 1.638,-1.673 0.246,-0.044 0.5,-0.065 0.75,-0.065 1.632,-0.006 3.261,-0.006 4.89,-0.002 1.664,0.002 2.364,0.699 2.367,2.346 z m -15.761,0.509 c 0,3.541 -0.002,7.081 0.002,10.622 0,1.218 0.238,2.388 0.806,3.47 1.062,2.024 2.762,3.128 5.034,3.169 3.392,0.062 6.785,0.084 10.175,-0.003 3.112,-0.082 5.258,-2.159 5.7,-5.312 0.072,-0.513 0.11,-1.033 0.11,-1.55 0.007,-6.976 0.005,-13.952 0.005,-20.929 0,-1.217 -0.211,-2.388 -0.748,-3.486 -1.02,-2.088 -2.737,-3.186 -5.026,-3.231 -3.42,-0.068 -6.843,-0.054 -10.265,-0.005 -2.886,0.038 -5.18,2.177 -5.657,5.177 -0.087,0.539 -0.128,1.09 -0.13,1.635 -0.011,3.483 -0.006,6.963 -0.006,10.443" /><path
+         inkscape:connector-curvature="0"
+         id="path5687"
+         style="fill:#848b91;fill-opacity:1;fill-rule:evenodd;stroke:none"
+         d="m 253.084,52.779 c -0.013,0.148 -0.019,0.266 -0.031,0.381 -0.16,1.267 -0.926,2.037 -2.205,2.066 -1.822,0.043 -3.646,0.041 -5.465,0 -1.195,-0.027 -1.869,-0.683 -1.935,-1.886 -0.061,-1.209 -0.061,-2.428 0.002,-3.639 0.064,-1.199 0.838,-1.977 2.015,-2.201 2.633,-0.502 5.268,-0.979 7.889,-1.524 1.65,-0.342 3.167,-0.984 4.301,-2.314 0.869,-1.019 1.365,-2.228 1.402,-3.531 0.074,-2.66 0.213,-5.344 -0.041,-7.983 -0.334,-3.498 -2.551,-5.306 -6.086,-5.345 -3.111,-0.033 -6.221,-0.018 -9.332,-0.01 -3.371,0.008 -5.717,2.074 -6.168,5.426 -0.058,0.424 -0.062,0.855 -0.107,1.281 -0.022,0.244 0.088,0.338 0.31,0.393 1.893,0.469 3.789,0.947 5.742,1.437 0.022,-0.15 0.051,-0.287 0.063,-0.427 0.133,-1.28 0.715,-1.958 1.998,-2.001 1.908,-0.066 3.822,-0.052 5.727,0.022 1.166,0.047 1.832,0.793 1.89,1.965 0.047,0.973 0.045,1.955 -0.002,2.931 -0.064,1.25 -0.83,2.045 -2.138,2.303 -2.438,0.481 -4.883,0.941 -7.317,1.445 -1.849,0.383 -3.523,1.114 -4.789,2.592 -1.036,1.205 -1.457,2.629 -1.473,4.182 -0.021,2.193 -0.046,4.386 0.004,6.578 0.057,2.552 1.114,4.57 3.407,5.828 0.82,0.449 1.734,0.597 2.66,0.601 3.201,0.01 6.402,0.014 9.601,-0.006 1.664,-0.009 3.153,-0.513 4.309,-1.769 1.297,-1.412 1.822,-3.123 1.844,-5.008 0.002,-0.121 -0.147,-0.326 -0.263,-0.357 -1.874,-0.493 -3.753,-0.963 -5.632,-1.438 -0.041,-0.01 -0.088,0.004 -0.18,0.008" /><path
+         inkscape:connector-curvature="0"
+         id="path5689"
+         style="fill:#848b91;fill-opacity:1;fill-rule:evenodd;stroke:none"
+         d="m 264.055,60.83 c 0,0.275 0.224,0.5 0.5,0.5 h 20.802 c 0.276,0 0.5,-0.225 0.5,-0.5 v -5.082 c 0,-0.275 -0.224,-0.5 -0.5,-0.5 h -14.703 c -0.275,0 -0.5,-0.225 -0.5,-0.5 v -7.129 c 0,-0.275 0.225,-0.5 0.5,-0.5 h 8.573 c 0.275,0 0.5,-0.224 0.5,-0.5 v -5.09 c 0,-0.275 -0.225,-0.5 -0.5,-0.5 h -8.566 c -0.275,0 -0.5,-0.224 -0.5,-0.5 v -7.162 c 0,-0.275 0.225,-0.5 0.5,-0.5 h 14.702 c 0.276,0 0.5,-0.224 0.5,-0.5 v -5.053 c 0,-0.275 -0.224,-0.5 -0.5,-0.5 h -20.808 c -0.276,0 -0.5,0.225 -0.5,0.5 z" /><path
+         inkscape:connector-curvature="0"
+         id="path5691"
+         style="fill:#848b91;fill-opacity:1;fill-rule:evenodd;stroke:none"
+         d="m 183.938,60.832 c 0,0.275 0.224,0.5 0.5,0.5 h 20.802 c 0.276,0 0.5,-0.225 0.5,-0.5 v -5.076 c 0,-0.276 -0.224,-0.5 -0.5,-0.5 h -14.723 c -0.276,0 -0.5,-0.225 -0.5,-0.5 v -7.148 c 0,-0.275 0.224,-0.5 0.5,-0.5 h 8.584 c 0.275,0 0.5,-0.224 0.5,-0.5 v -5.075 c 0,-0.275 -0.225,-0.5 -0.5,-0.5 h -8.578 c -0.275,0 -0.5,-0.224 -0.5,-0.5 v -7.159 c 0,-0.275 0.225,-0.5 0.5,-0.5 h 14.723 c 0.275,0 0.5,-0.225 0.5,-0.5 v -5.06 c 0,-0.275 -0.225,-0.5 -0.5,-0.5 h -20.808 c -0.276,0 -0.5,0.225 -0.5,0.5 z" /><path
+         inkscape:connector-curvature="0"
+         id="path5693"
+         style="fill:#848b91;fill-opacity:1;fill-rule:evenodd;stroke:none"
+         d="m 211.132,26.814 c -0.276,0 -0.5,0.225 -0.5,0.5 v 33.518 c 0,0.275 0.224,0.5 0.5,0.5 h 5.064 c 0.276,0 0.5,-0.225 0.5,-0.5 V 33.365 c 0,-0.275 0.225,-0.5 0.5,-0.5 h 14.745 c 0.276,0 0.5,-0.224 0.5,-0.5 v -5.051 c 0,-0.275 -0.224,-0.5 -0.5,-0.5 z" /><path
+         inkscape:connector-curvature="0"
+         id="path5695"
+         style="fill:#3d46a3;fill-opacity:1;fill-rule:evenodd;stroke:none"
+         d="m 41.157,56.284 c 0,-0.275 0.225,-0.5 0.5,-0.5 h 7.851 c 0.229,0 0.461,0 0.69,0.02 1.551,0.135 2.514,1.159 2.549,2.807 0.038,1.965 0.034,3.932 0,5.899 -0.024,1.504 -0.799,2.417 -2.214,2.698 -0.327,0.066 -0.662,0.103 -0.996,0.105 -2.593,0.008 -5.186,0.006 -7.782,0.003 -0.2,0 -0.398,-0.018 -0.598,-0.026 z m 0.01,-20.33 c 0,-0.275 0.123,-0.516 0.272,-0.537 h 0.121 c 2.759,-0.003 5.518,-0.023 8.278,0.006 1.839,0.015 2.892,1.099 2.914,2.96 0.024,1.858 0.012,3.721 0.004,5.58 -0.009,2.078 -1.062,3.123 -3.143,3.126 -2.593,0.002 -7.277,0 -7.277,0 h -0.835 c -0.184,0 -0.334,-0.225 -0.334,-0.5 z M 30.301,26.835 v 8.123 c 0,0.275 0.225,0.5 0.5,0.5 h 1.115 c 0.275,0 0.5,0.225 0.5,0.5 v 30.907 c 0,0.275 -0.225,0.5 -0.5,0.5 H 30.81 c -0.275,0 -0.5,0.225 -0.5,0.5 v 7.732 c 0,0.275 0.225,0.5 0.5,0.5 h 0.23 c 7.134,0 14.269,-0.003 21.403,0 5.89,0.003 8.559,-3.974 8.854,-8.2 0.243,-3.432 0.142,-6.897 0.017,-10.341 -0.09,-2.398 -1.181,-4.419 -3.224,-6.087 0.275,-0.196 0.541,-0.336 0.744,-0.543 1.878,-1.953 2.564,-4.387 2.6,-7.002 0.043,-2.949 0.086,-5.905 -0.12,-8.844 -0.222,-3.137 -1.55,-5.754 -4.462,-7.327 -1.141,-0.621 -2.388,-0.939 -3.673,-0.944 -7.555,-0.025 -15.109,-0.013 -22.66,-0.016 -0.061,0 -0.122,0.021 -0.218,0.042" /><path
+         inkscape:connector-curvature="0"
+         id="path5697"
+         style="fill:#3d46a3;fill-opacity:1;fill-rule:evenodd;stroke:none"
+         d="m 23.28,27.312 c 0,-0.276 -0.225,-0.5 -0.5,-0.5 h -7.597 c -0.275,0 -0.5,0.224 -0.5,0.5 v 48.23 c 0,0.275 0.225,0.5 0.5,0.5 h 7.597 c 0.275,0 0.5,-0.225 0.5,-0.5 z" /><path
+         inkscape:connector-curvature="0"
+         id="path5707"
+         style="fill:#3d46a3;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.43699038"
+         d="m 310.93953,20.926 c 0.56786,0 1.03247,-0.225 1.03247,-0.5 v -4 c 0,-0.276 -0.46461,-0.5 -1.03247,-0.5 H 15.607471 c -0.567859,0 -1.032471,0.224 -1.032471,0.5 v 4 c 0,0.275 0.464612,0.5 1.032471,0.5 z" /><path
+         inkscape:connector-curvature="0"
+         id="path5713"
+         style="fill:#3b459d;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         d="m 52.072,108.556 c -0.375,-0.003 -0.773,-0.154 -1.187,-0.437 C 39.04,100.002 27.2,91.905 15.322,83.838 14.571,83.33 14.339,82.819 14.604,81.963 h 9.531 c 8.95,6.096 17.911,12.191 26.844,18.312 0.827,0.567 1.505,0.555 2.312,0.031 9.397,-6.128 18.784,-12.23 28.188,-18.343 h 9.812 c 0.226,0.791 0.128,1.318 -0.625,1.812 -12.5,8.11 -24.955,16.235 -37.437,24.375 -0.404,0.262 -0.782,0.409 -1.157,0.406" /></g></g></svg>
--- a/src/components/Ausweis/PerformanceScore.svelte
+++ b/src/components/Ausweis/PerformanceScore.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { endEnergieVerbrauchVerbrauchsausweis_2016 } from "#lib/Berechnungen/VerbrauchsausweisWohnen/VerbrauchsausweisWohnen_2016";
+	import ThickArrowDown from "radix-svelte-icons/src/lib/icons/ThickArrowDown.svelte";
 	import { BedarfsausweisWohnenClient, GebaeudeClient, VerbrauchsausweisGewerbeClient, VerbrauchsausweisWohnenClient } from "./types";
+	import ThickArrowUp from "radix-svelte-icons/src/lib/icons/ThickArrowUp.svelte";

 	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbeClient | BedarfsausweisWohnenClient;
 	export let gebaeude: GebaeudeClient;
@@ -53,20 +55,10 @@

 </script>

-<div class="w-full rounded-lg border border-[#ffcc03] relative p-2">
+<div class="w-full rounded-lg border-[#ffcc03] border-2 relative p-2">
 	<img src="/images/SKALA-910.png" alt="Energieeffizienz Skala">
-	<img
-		class="absolute top-1 transition-left duration-1000 ease-in-out"
-		width="20px"
-		src="/images/pfeil2.png"
-		alt=""
-		style="left: {translation_1}%; transform: translateX({centerValueBetweenBoundaries(translation_1, 50, -150, 0, 100)}%)"
-	/>
-	<img
-	class="absolute bottom-1 transition-left duration-1000 ease-in-out"
-		width="20px"
-		src="/images/pfeil.png"
-		style="left: {translation_2}%; transform: translateX({centerValueBetweenBoundaries(translation_2, 50, -150, 0, 100)}%)"
-		alt=""
-	/>
+	<ThickArrowDown size={28} class="fill-base-content absolute top-1 transition-left duration-1000 ease-in-out"
+	style="left: {translation_1}%; transform: translateX({centerValueBetweenBoundaries(translation_1, 50, -150, 0, 100)}%)" />
+	<ThickArrowUp size={28} class="fill-base-content absolute bottom-1 transition-left duration-1000 ease-in-out"
+	style="left: {translation_2}%; transform: translateX({centerValueBetweenBoundaries(translation_2, 50, -150, 0, 100)}%)" />
 </div>
--- a/src/components/Dashboard/DashboardAusweis.svelte
+++ b/src/components/Dashboard/DashboardAusweis.svelte
@@ -0,0 +1,165 @@
+<script lang="ts">
+	import {
+		GebaeudeClient,
+		VerbrauchsausweisWohnenClient,
+	} from "#components/Ausweis/types";
+	import moment from "moment";
+	import { dialogs } from "svelte-dialogs";
+	import {
+		CrossCircled,
+		DotsVertical,
+		Download,
+		Pencil2,
+		QuestionMarkCircled,
+	} from "radix-svelte-icons";
+
+	export let ausweis: VerbrauchsausweisWohnenClient & {
+		gebaeude_stammdaten: GebaeudeClient;
+	};
+
+	async function ausweisStornieren() {
+		const result = dialogs.confirm({
+			title: "Ausweis Stornieren",
+			text: "Sind sie sich sicher, dass sie den Ausweis stornieren möchten? Diese Operation kann nicht rückgängig gemacht werden!",
+			confirmButtonText: "Ausweis Stornieren",
+			confirmButtonClass: "btn btn-primary",
+			declineButtonClass: "btn btn-bordered",
+			declineButtonText: "Abbrechen",
+			dialogClass: "modal-box",
+			headerClass: "bg-base-100 text-center",
+			titleClass: "text-base-content text-xl font-medium",
+			dividerClass: "hidden",
+			footerClass: "bg-base-100 justify-center gap-4 mt-4",
+		});
+
+		// TODO: Ausweis Stornieren falls result == true
+	}
+
+	let hilfeModal: HTMLDialogElement;
+</script>
+
+<div class="card lg:card-side bg-base-200 card-bordered border-base-300">
+	<figure class="lg:w-1/2">
+		<img
+			src="https://www.houseanddecors.com/wp-content/uploads/2019/01/modern-house-04.jpg"
+			class="object-cover w-full h-full"
+			alt="Album"
+		/>
+	</figure>
+	<div class="card-body lg:w-1/2">
+		<div class="flex justify-end mb-2 dropdown dropdown-bottom absolute top-4 right-4">
+			<button class="rounded-full p-2.5 hover:bg-base-100">
+				<DotsVertical size={15} />
+			</button>
+			<ul
+				tabindex="0"
+				class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-64 gap-2"
+			>
+				<li>
+					<button on:click={ausweisStornieren}
+						><CrossCircled size={15} />Ausweis Stornieren</button
+					>
+				</li>
+				<li>
+					<button><Pencil2 size={15} /> Als Vorlage benutzen</button>
+				</li>
+				<li>
+					<button on:click={() => hilfeModal.showModal()}
+						><QuestionMarkCircled size={15} /> Hilfe Erhalten</button
+					>
+				</li>
+			</ul>
+		</div>
+		<div class="flex flex-row flex-wrap gap-2">
+			<div class="badge badge-accent font-semibold">
+				Verbrauchsausweis
+			</div>
+			<div class="badge badge-success font-semibold">Ausgestellt</div>
+		</div>
+		<h2 class="card-title">{ausweis.gebaeude_stammdaten.adresse}</h2>
+		<div class="mb-4 flex flex-row items-center gap-4">
+			<progress class="progress w-full" value="54" max="100"></progress>
+			<span class="text-sm font-semibold text-base-content">54%</span>
+		</div>
+		<div class="flex flex-col gap-2">
+			<div class="flex flex-row justify-between">
+				<span>Energieverbrauch</span>
+				<span class="font-bold text-base-content">215kWh/A</span>
+			</div>
+			<div class="flex flex-row justify-between">
+				<span>CO2 Ausstoß</span>
+				<span class="font-bold text-base-content">N/A</span>
+			</div>
+			<div class="flex flex-row justify-between">
+				<span>Erstellungsdatum</span>
+				<span class="font-bold text-base-content"
+					>{moment(ausweis.erstellungsdatum).format(
+						"DD.MM.YYYY"
+					)}</span
+				>
+			</div>
+			<div class="flex flex-row justify-between">
+				<span>Baujahr</span>
+				<span
+					class="font-bold text-base-content"
+					title="Gebäude / Heizung"
+					>{ausweis.gebaeude_stammdaten.baujahr_gebaeude[0] || "N/A"} /
+					{ausweis.gebaeude_stammdaten.baujahr_heizung[0] ||
+						"N/A"}</span
+				>
+			</div>
+			<div class="flex flex-row justify-between">
+				<span>Wohnfläche</span>
+				<span class="font-bold text-base-content"
+					>{ausweis.gebaeude_stammdaten.flaeche
+						? `${ausweis.gebaeude_stammdaten.flaeche}m²`
+						: "N/A"}</span
+				>
+			</div>
+		</div>
+		<div class="card-actions justify-end mt-8">
+			<a class="btn btn-primary">Bearbeiten</a>
+			<button class="btn btn-ghost" title="PDF Herunterladen">
+				<Download size={22} />
+			</button>
+		</div>
+	</div>
+</div>
+
+<dialog bind:this={hilfeModal} class="modal">
+	<div class="modal-box">
+		<h3 class="font-bold text-xl mb-4">Hilfe Anfordern</h3>
+		<p>
+			Brauchen sie Hilfe bei der Erstellung oder Bearbeitung ihres
+			Ausweises?
+		</p>
+		<p>
+			In unserem <a href="/helpdesk">Helpdesk</a> finden sie antworten auf
+			häufig gestellte Fragen.
+		</p>
+		<p>
+			Falls sie dort nicht finden wonach sie suchen, rufen sie uns doch
+			unter <a href="tel:040-220-31-87">040 220 31 87</a> an oder
+			<a href="mailto:moritz.utcke@gmx.de">schreiben sie uns eine email</a
+			>.
+		</p>
+		<p>
+			Wenn wir telefonisch nicht erreichbar sind, können sie uns auch
+			direkt hier eine Nachricht hinterlassen.
+		</p>
+		<form class="my-4">
+			<textarea
+				class="textarea textarea-bordered"
+				placeholder="Ihre Nachricht..."
+				cols="10"
+				rows="5"
+			></textarea>
+			<button class="btn btn-primary">Nachricht Abschicken</button>
+		</form>
+		<div class="modal-action">
+			<form method="dialog">
+				<button class="btn">Schließen</button>
+			</form>
+		</div>
+	</div>
+</dialog>
--- a/src/components/Dashboard/DashboardNotification.svelte
+++ b/src/components/Dashboard/DashboardNotification.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { ripple } from "svelte-ripple-action";
+	import { deleteNotification, type Notification } from "../NotificationProvider/shared"
+	import type { RippleOptions } from "svelte-ripple-action/dist/constants";
+	import Cross1 from "radix-svelte-icons/src/lib/icons/Cross1.svelte";
+	import { fade } from "svelte/transition";
+
+	export let notification: Notification;
+
+	const rippleOptions: RippleOptions = {
+		center: false,
+		color: "rgba(113, 128, 150, 0.1)",
+	};
+</script>
+
+<div class="cursor-pointer hover:bg-base-100 h-auto w-full rounded-none no-animation focus:shadow-none text-left flex flex-row items-center" out:fade={{duration: 200, delay: 50}}>
+	<div title="Ansehen" use:ripple={rippleOptions} class="px-4 py-2">
+		<h4 class="text-base text-base-content font-semibold">{@html notification.title}</h4>
+		<span class="opacity-65 text-sm">{@html notification.description}</span>
+	</div>
+	<button title="Entfernen" on:click={() => {
+		deleteNotification(notification.uid);
+	}} class="h-24 px-4 hover:bg-base-100 flex items-center justify-center border-l border-l-base-300 no-animation" use:ripple={rippleOptions}>
+		<Cross1 size={22} />
+	</button>
+</div>
--- a/src/components/Dashboard/DashboardSidebar.svelte
+++ b/src/components/Dashboard/DashboardSidebar.svelte
@@ -1,152 +1,94 @@
 <script lang="ts">
 	import { ripple } from "svelte-ripple-action";
 	import type { RippleOptions } from "svelte-ripple-action/dist/constants";
+	import { Home, Reader, EnvelopeClosed, Cube, Sun, Moon, Bell, Gear } from "radix-svelte-icons"
+	import NotificationProvider from "#components/NotificationProvider/NotificationProvider.svelte";
+	import DashboardNotification from "./DashboardNotification.svelte";
+	import { onMount } from "svelte";
+	import { addNotification } from "#components/NotificationProvider/shared";
+	import { notifications } from "#components/NotificationProvider/shared";
+	import ThemeController from "#components/ThemeController.svelte";
+
+	export let lightTheme: boolean;

 	const rippleOptions: RippleOptions = {
 		center: false,
 		color: "rgba(113, 128, 150, 0.1)",
 	};

-	let darkTheme: boolean = false;
+	onMount(() => {
+		addNotification({
+			title: "Test",
+			type: "success",
+			dismissable: true,
+			timeout: 0,
+			description: "Dies ist ein sehr wissenschaftlicher Test...",
+		})
+	})
 </script>

 <aside class="hidden md:flex bg-base-100 border-r border-r-base-300 flex-col py-8">
-	<a href="/" class="px-8"
+	<a href="/dashboard" class="px-8"
 		><img
-			src="/images/header/logo-big.png"
+			src="/images/header/logo-big.svg"
 			class="w-36"
 			alt="IBCornelsen - Logo"
 		/></a
 	>

-	<div class="flex flex-col gap-2 mt-12">
+	<div class="menu flex flex-col gap-2 mt-12 px-0">
 		<button use:ripple={rippleOptions} class="button-tab">
-			<svg
-				width="22"
-				height="22"
-				viewBox="0 0 15 15"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					d="M7.07926 0.222253C7.31275 -0.007434 7.6873 -0.007434 7.92079 0.222253L14.6708 6.86227C14.907 7.09465 14.9101 7.47453 14.6778 7.71076C14.4454 7.947 14.0655 7.95012 13.8293 7.71773L13 6.90201V12.5C13 12.7761 12.7762 13 12.5 13H2.50002C2.22388 13 2.00002 12.7761 2.00002 12.5V6.90201L1.17079 7.71773C0.934558 7.95012 0.554672 7.947 0.32229 7.71076C0.0899079 7.47453 0.0930283 7.09465 0.32926 6.86227L7.07926 0.222253ZM7.50002 1.49163L12 5.91831V12H10V8.49999C10 8.22385 9.77617 7.99999 9.50002 7.99999H6.50002C6.22388 7.99999 6.00002 8.22385 6.00002 8.49999V12H3.00002V5.91831L7.50002 1.49163ZM7.00002 12H9.00002V8.99999H7.00002V12Z"
-					fill="currentColor"
-					fill-rule="evenodd"
-					clip-rule="evenodd"
-				></path></svg
-			>
+			<Home width={22} height={22} />
 			Home
 		</button>
-		<button use:ripple={rippleOptions} class="button-tab">
-			<svg
-				width="22"
-				height="22"
-				viewBox="0 0 15 15"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					d="M4.2 1H4.17741H4.1774C3.86936 0.999988 3.60368 0.999978 3.38609 1.02067C3.15576 1.04257 2.92825 1.09113 2.71625 1.22104C2.51442 1.34472 2.34473 1.51442 2.22104 1.71625C2.09113 1.92825 2.04257 2.15576 2.02067 2.38609C1.99998 2.60367 1.99999 2.86935 2 3.17738V3.1774V3.2V11.8V11.8226V11.8226C1.99999 12.1307 1.99998 12.3963 2.02067 12.6139C2.04257 12.8442 2.09113 13.0717 2.22104 13.2837C2.34473 13.4856 2.51442 13.6553 2.71625 13.779C2.92825 13.9089 3.15576 13.9574 3.38609 13.9793C3.60368 14 3.86937 14 4.17741 14H4.2H10.8H10.8226C11.1306 14 11.3963 14 11.6139 13.9793C11.8442 13.9574 12.0717 13.9089 12.2837 13.779C12.4856 13.6553 12.6553 13.4856 12.779 13.2837C12.9089 13.0717 12.9574 12.8442 12.9793 12.6139C13 12.3963 13 12.1306 13 11.8226V11.8V3.2V3.17741C13 2.86936 13 2.60368 12.9793 2.38609C12.9574 2.15576 12.9089 1.92825 12.779 1.71625C12.6553 1.51442 12.4856 1.34472 12.2837 1.22104C12.0717 1.09113 11.8442 1.04257 11.6139 1.02067C11.3963 0.999978 11.1306 0.999988 10.8226 1H10.8H4.2ZM3.23875 2.07368C3.26722 2.05623 3.32362 2.03112 3.48075 2.01618C3.64532 2.00053 3.86298 2 4.2 2H10.8C11.137 2 11.3547 2.00053 11.5193 2.01618C11.6764 2.03112 11.7328 2.05623 11.7613 2.07368C11.8285 2.11491 11.8851 2.17147 11.9263 2.23875C11.9438 2.26722 11.9689 2.32362 11.9838 2.48075C11.9995 2.64532 12 2.86298 12 3.2V11.8C12 12.137 11.9995 12.3547 11.9838 12.5193C11.9689 12.6764 11.9438 12.7328 11.9263 12.7613C11.8851 12.8285 11.8285 12.8851 11.7613 12.9263C11.7328 12.9438 11.6764 12.9689 11.5193 12.9838C11.3547 12.9995 11.137 13 10.8 13H4.2C3.86298 13 3.64532 12.9995 3.48075 12.9838C3.32362 12.9689 3.26722 12.9438 3.23875 12.9263C3.17147 12.8851 3.11491 12.8285 3.07368 12.7613C3.05624 12.7328 3.03112 12.6764 3.01618 12.5193C3.00053 12.3547 3 12.137 3 11.8V3.2C3 2.86298 3.00053 2.64532 3.01618 2.48075C3.03112 2.32362 3.05624 2.26722 3.07368 2.23875C3.11491 2.17147 3.17147 2.11491 3.23875 2.07368ZM5 10C4.72386 10 4.5 10.2239 4.5 10.5C4.5 10.7761 4.72386 11 5 11H8C8.27614 11 8.5 10.7761 8.5 10.5C8.5 10.2239 8.27614 10 8 10H5ZM4.5 7.5C4.5 7.22386 4.72386 7 5 7H10C10.2761 7 10.5 7.22386 10.5 7.5C10.5 7.77614 10.2761 8 10 8H5C4.72386 8 4.5 7.77614 4.5 7.5ZM5 4C4.72386 4 4.5 4.22386 4.5 4.5C4.5 4.77614 4.72386 5 5 5H10C10.2761 5 10.5 4.77614 10.5 4.5C10.5 4.22386 10.2761 4 10 4H5Z"
-					fill="currentColor"
-					fill-rule="evenodd"
-					clip-rule="evenodd"
-				></path></svg
-			>
+		<a use:ripple={rippleOptions} class="button-tab" href="/dashboard/ausweise">
+			<Reader width={22} height={22} />
 			Ausweise
-		</button>
+		</a>
 		<button use:ripple={rippleOptions} class="button-tab">
-			<svg
-				width="22"
-				height="22"
-				viewBox="0 0 15 15"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					d="M1 2C0.447715 2 0 2.44772 0 3V12C0 12.5523 0.447715 13 1 13H14C14.5523 13 15 12.5523 15 12V3C15 2.44772 14.5523 2 14 2H1ZM1 3L14 3V3.92494C13.9174 3.92486 13.8338 3.94751 13.7589 3.99505L7.5 7.96703L1.24112 3.99505C1.16621 3.94751 1.0826 3.92486 1 3.92494V3ZM1 4.90797V12H14V4.90797L7.74112 8.87995C7.59394 8.97335 7.40606 8.97335 7.25888 8.87995L1 4.90797Z"
-					fill="currentColor"
-					fill-rule="evenodd"
-					clip-rule="evenodd"
-				></path></svg
-			>
+			<EnvelopeClosed width={22} height={22} />
 			Kontakt
 		</button>
+		<li><details>
+			<summary class="button-tab w-full outline-0 hover:outline-0">
+				<Cube width={22} height={22} />
+			Services</summary>
+			<ul>
+				<li>
+					<button use:ripple={rippleOptions} class="button-tab">
+						Kontakt
+					</button>
+				</li>
+				<li>
+					<button use:ripple={rippleOptions} class="button-tab">
+						Kontakt
+					</button>
+				</li>
+			</ul>
+		</details></li>
 	</div>
 	<div class="mt-auto flex flex-col gap-4 px-8">
 		<div class="flex flex-row justify-between items-center">
-			<button class="btn btn-square btn-ghost hover:bg-gray-100">
-				<label class="swap swap-rotate">
-					<!-- this hidden checkbox controls the state -->
-					<input
-						type="checkbox"
-						class="theme-controller hidden"
-						value={darkTheme ? "dark" : "light"}
-					/>
-
-					<!-- sun icon -->
-					<svg
-						class="swap-on fill-current w-6 h-6"
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 24 24"
-						><path
-							d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"
-						/></svg
-					>
-
-					<!-- moon icon -->
-					<svg
-						class="swap-off fill-current w-6 h-6"
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 24 24"
-						><path
-							d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"
-						/></svg
-					>
-				</label>
-			</button>
+			<ThemeController {lightTheme}></ThemeController>
 			<div class="dropdown dropdown-top">
 				<div class="indicator">
-					<span class="indicator-item badge badge-accent text-xs">1</span>
-					<button tabindex="0" class="btn btn-square btn-ghost hover:bg-gray-100">
-						<svg
-							width="25"
-							height="25"
-							viewBox="0 0 15 15"
-							fill="none"
-							xmlns="http://www.w3.org/2000/svg"
-							><path
-								d="M8.60124 1.25086C8.60124 1.75459 8.26278 2.17927 7.80087 2.30989C10.1459 2.4647 12 4.41582 12 6.79999V10.25C12 11.0563 12.0329 11.7074 12.7236 12.0528C12.931 12.1565 13.0399 12.3892 12.9866 12.6149C12.9333 12.8406 12.7319 13 12.5 13H8.16144C8.36904 13.1832 8.49997 13.4513 8.49997 13.75C8.49997 14.3023 8.05226 14.75 7.49997 14.75C6.94769 14.75 6.49997 14.3023 6.49997 13.75C6.49997 13.4513 6.63091 13.1832 6.83851 13H2.49999C2.2681 13 2.06664 12.8406 2.01336 12.6149C1.96009 12.3892 2.06897 12.1565 2.27638 12.0528C2.96708 11.7074 2.99999 11.0563 2.99999 10.25V6.79999C2.99999 4.41537 4.85481 2.46396 7.20042 2.3098C6.73867 2.17908 6.40036 1.75448 6.40036 1.25086C6.40036 0.643104 6.89304 0.150421 7.5008 0.150421C8.10855 0.150421 8.60124 0.643104 8.60124 1.25086ZM7.49999 3.29999C5.56699 3.29999 3.99999 4.86699 3.99999 6.79999V10.25L4.00002 10.3009C4.0005 10.7463 4.00121 11.4084 3.69929 12H11.3007C10.9988 11.4084 10.9995 10.7463 11 10.3009L11 10.25V6.79999C11 4.86699 9.43299 3.29999 7.49999 3.29999Z"
-								fill="currentColor"
-								fill-rule="evenodd"
-								clip-rule="evenodd"
-							></path></svg
-						>
+					{#if Object.keys($notifications).length > 0}
+						<span class="indicator-item badge badge-accent text-xs">{Object.keys($notifications).length}</span>
+					{/if}
+					<button tabindex="0" class="btn btn-square btn-ghost hover:bg-base-200">
+						<Bell size={24} />
 					</button>
 				</div>
 				<ul tabindex="0" class="dropdown-content mb-2 border border-base-300 z-10 menu py-4 px-0 bg-base-200 rounded-box w-80">
-					<div class="cursor-pointer hover:bg-base-100 h-auto w-full rounded-none no-animation focus:shadow-none text-left flex flex-row items-center">
-						<p title="Ansehen" use:ripple={rippleOptions} class="px-4 py-2">Ein Ansprechpartner hat für ihr Gebäude eine Energieeffizienzberechnung angefordert.</p>
-						<div title="Entfernen" class="h-24 px-4 hover:bg-base-100 flex items-center justify-center border-l border-l-base-300" use:ripple={rippleOptions}>
-							<svg width="45" height="45" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.8536 2.85355C13.0488 2.65829 13.0488 2.34171 12.8536 2.14645C12.6583 1.95118 12.3417 1.95118 12.1464 2.14645L7.5 6.79289L2.85355 2.14645C2.65829 1.95118 2.34171 1.95118 2.14645 2.14645C1.95118 2.34171 1.95118 2.65829 2.14645 2.85355L6.79289 7.5L2.14645 12.1464C1.95118 12.3417 1.95118 12.6583 2.14645 12.8536C2.34171 13.0488 2.65829 13.0488 2.85355 12.8536L7.5 8.20711L12.1464 12.8536C12.3417 13.0488 12.6583 13.0488 12.8536 12.8536C13.0488 12.6583 13.0488 12.3417 12.8536 12.1464L8.20711 7.5L12.8536 2.85355Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
-						</div>
-					</div>
+					<NotificationProvider component={DashboardNotification} />
 				</ul>
 			</div>
 			
-			<button
-				class="btn btn-square btn-ghost hover:bg-gray-100 focus:shadow-none focus:bg-gray-200"
+			<a href="/dashboard/einstellungen"
+				class="btn btn-square btn-ghost hover:bg-base-200"
 			>
-				<svg
-					width="25"
-					height="25"
-					viewBox="0 0 15 15"
-					fill="none"
-					xmlns="http://www.w3.org/2000/svg"
-					><path
-						d="M7.07095 0.650238C6.67391 0.650238 6.32977 0.925096 6.24198 1.31231L6.0039 2.36247C5.6249 2.47269 5.26335 2.62363 4.92436 2.81013L4.01335 2.23585C3.67748 2.02413 3.23978 2.07312 2.95903 2.35386L2.35294 2.95996C2.0722 3.2407 2.0232 3.6784 2.23493 4.01427L2.80942 4.92561C2.62307 5.2645 2.47227 5.62594 2.36216 6.00481L1.31209 6.24287C0.924883 6.33065 0.650024 6.6748 0.650024 7.07183V7.92897C0.650024 8.32601 0.924883 8.67015 1.31209 8.75794L2.36228 8.99603C2.47246 9.375 2.62335 9.73652 2.80979 10.0755L2.2354 10.9867C2.02367 11.3225 2.07267 11.7602 2.35341 12.041L2.95951 12.6471C3.24025 12.9278 3.67795 12.9768 4.01382 12.7651L4.92506 12.1907C5.26384 12.377 5.62516 12.5278 6.0039 12.6379L6.24198 13.6881C6.32977 14.0753 6.67391 14.3502 7.07095 14.3502H7.92809C8.32512 14.3502 8.66927 14.0753 8.75705 13.6881L8.99505 12.6383C9.37411 12.5282 9.73573 12.3773 10.0748 12.1909L10.986 12.7653C11.3218 12.977 11.7595 12.928 12.0403 12.6473L12.6464 12.0412C12.9271 11.7604 12.9761 11.3227 12.7644 10.9869L12.1902 10.076C12.3768 9.73688 12.5278 9.37515 12.638 8.99596L13.6879 8.75794C14.0751 8.67015 14.35 8.32601 14.35 7.92897V7.07183C14.35 6.6748 14.0751 6.33065 13.6879 6.24287L12.6381 6.00488C12.528 5.62578 12.3771 5.26414 12.1906 4.92507L12.7648 4.01407C12.9766 3.6782 12.9276 3.2405 12.6468 2.95975L12.0407 2.35366C11.76 2.07292 11.3223 2.02392 10.9864 2.23565L10.0755 2.80989C9.73622 2.62328 9.37437 2.47229 8.99505 2.36209L8.75705 1.31231C8.66927 0.925096 8.32512 0.650238 7.92809 0.650238H7.07095ZM4.92053 3.81251C5.44724 3.44339 6.05665 3.18424 6.71543 3.06839L7.07095 1.50024H7.92809L8.28355 3.06816C8.94267 3.18387 9.5524 3.44302 10.0794 3.81224L11.4397 2.9547L12.0458 3.56079L11.1882 4.92117C11.5573 5.44798 11.8164 6.0575 11.9321 6.71638L13.5 7.07183V7.92897L11.932 8.28444C11.8162 8.94342 11.557 9.55301 11.1878 10.0798L12.0453 11.4402L11.4392 12.0462L10.0787 11.1886C9.55192 11.5576 8.94241 11.8166 8.28355 11.9323L7.92809 13.5002H7.07095L6.71543 11.932C6.0569 11.8162 5.44772 11.5572 4.92116 11.1883L3.56055 12.046L2.95445 11.4399L3.81213 10.0794C3.4431 9.55266 3.18403 8.94326 3.06825 8.2845L1.50002 7.92897V7.07183L3.06818 6.71632C3.18388 6.05765 3.44283 5.44833 3.81171 4.92165L2.95398 3.561L3.56008 2.95491L4.92053 3.81251ZM9.02496 7.50008C9.02496 8.34226 8.34223 9.02499 7.50005 9.02499C6.65786 9.02499 5.97513 8.34226 5.97513 7.50008C5.97513 6.65789 6.65786 5.97516 7.50005 5.97516C8.34223 5.97516 9.02496 6.65789 9.02496 7.50008ZM9.92496 7.50008C9.92496 8.83932 8.83929 9.92499 7.50005 9.92499C6.1608 9.92499 5.07513 8.83932 5.07513 7.50008C5.07513 6.16084 6.1608 5.07516 7.50005 5.07516C8.83929 5.07516 9.92496 6.16084 9.92496 7.50008Z"
-						fill="currentColor"
-						fill-rule="evenodd"
-						clip-rule="evenodd"
-					></path></svg
-				>
-			</button>
+				<Gear size={24} />
+			</a>
 		</div>
 	</div>
 	<div class="divider px-8"></div>
@@ -197,14 +139,18 @@
 	}

 	.button-tab {
-		@apply btn btn-primary btn-ghost rounded-none px-8 justify-start gap-4 items-center text-base font-normal text-base-content no-animation;
+		@apply btn btn-primary btn-ghost rounded-none px-8 justify-start outline-0 gap-4 items-center text-base font-normal text-base-content no-animation;
 	}

 	.button-tab:hover {
-		@apply bg-base-200;
+		@apply bg-base-200 outline-0;
 	}

 	.button-tab:focus {
 		@apply shadow-none;
 	}
+
+	summary.button-tab::after {
+		@apply ml-auto;
+	}
 </style>
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,19 +1,23 @@
 ---
+import { Moon, Sun } from "radix-svelte-icons";
 import { validateAccessTokenServer } from "src/server/lib/validateAccessToken";
+import ThemeController from "./ThemeController.svelte";

 const valid = await validateAccessTokenServer(Astro)
+
+const lightTheme = Astro.cookies.get("theme").value === "light";
 ---

 <header>
-	<div class="hidden md:block w-full h-48">
+	<a class="hidden md:block w-full h-48 bg-base-200" href="/">
 		<img
 			src="/images/header/header-bg.jpg"
 			class="w-full h-full object-cover"
 			alt="Hintergrund - Rollen Architektenpapier"
 		/>
 			<img
-				src="/images/header/logo-big.png"
-				class="absolute top-4 right-4"
+				src="/images/header/logo-big.svg"
+				class="absolute top-4 right-0 w-[464px]"
 				alt="IBCornelsen - Logo"
 			/>
 			<h2
@@ -26,9 +30,9 @@ const valid = await validateAccessTokenServer(Astro)
 			>
 				Energieausweise nach aktueller GEG
 			</h2>
-	</div>
+	</a>

-	<div class="px-4 flex flex-row w-full bg-primary md:justify-end items-center">
+	<div class="px-4 flex flex-row w-full md:justify-end items-center bg-primary">
 		<a
 			class="header-button hidden md:block"
 			href="/energieausweis-erstellen/verbrauchsausweis-erstellen"
@@ -40,7 +44,7 @@ const valid = await validateAccessTokenServer(Astro)
 		<a class="header-button hidden md:block" href="/agb">AGB</a>
 			{
 				valid ? (
-					<a class="header-button" href="/user">
+					<a class="header-button" href="/dashboard">
 						Profil
 					</a>
 				) : (
@@ -49,6 +53,7 @@ const valid = await validateAccessTokenServer(Astro)
 					</a>
 				)
 			}
+			<ThemeController lightTheme={lightTheme} client:load />
 			<a class="hamburger_menu"
 				><img src="/images/hamburger.png" width="22" alt="hamburger" /></a
 			>
--- a/src/components/HelpLabel.svelte
+++ b/src/components/HelpLabel.svelte
@@ -4,7 +4,7 @@
 </script>

 <div class="flex flex-row justify-between mb-2">
-	<label>{title}</label>
+	<label class="text-base-content">{title}</label>
 	<div data-tooltip={tooltip} class="relative tooltip-opener cursor-help">
 		<img
 			src="/images/question-mark.png"
--- a/src/components/NotificationProvider/Notification.svelte
+++ b/src/components/NotificationProvider/Notification.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { Notification } from "./shared";
+
+	export let notification: Partial<Notification> & { uid: string };
+</script>
+
+<div {...$$restProps}>
+	<slot {notification}></slot>
+</div>
--- a/src/components/NotificationProvider/NotificationProvider.svelte
+++ b/src/components/NotificationProvider/NotificationProvider.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { notifications } from "./shared"
+
+	export let component: ConstructorOfATypedSvelteComponent;
+</script>
+
+{#each Object.entries($notifications) as [key, notification]}
+	<svelte:component this={component} {notification}></svelte:component>
+{/each}
--- a/src/components/NotificationProvider/shared.ts
+++ b/src/components/NotificationProvider/shared.ts
@@ -0,0 +1,80 @@
+import { Writable, writable } from "svelte/store";
+import { v4 as uuid } from "uuid";
+
+export const notifications: Writable<Record<string, Notification>> = writable({});
+
+const defaults = {
+	title: "",
+	dismissable: false,
+	timeout: 4000,
+	description: "",
+	type: "error",
+	onUserDismiss: () => {}
+};
+
+export interface Notification {
+	title: string;
+	dismissable: boolean;
+	timeout: number;
+	description: string;
+	type: "error" | "success" | "info" | "warning";
+	onUserDismiss: () => any;
+	uid: string;
+}
+
+export function updateNotification(uid: string, updater: Partial<Notification>) {
+	notifications.update((value) => {
+		value[uid] = { ...defaults, ...value[uid], ...updater } as Notification;
+		return value;
+	})
+}
+
+export function addNotification(notification: Partial<Notification>): string {
+	let uid = uuid();
+
+	if (!notification.uid) {
+		notification.uid = uid;
+	}
+	
+	const object: Notification = { ...defaults, ...notification } as Notification;
+
+	notifications.update((value) => {
+		value[uid] = object;
+		return value;
+	})
+
+	if (object.timeout) {
+		setTimeout(() => {
+			deleteNotification(uid);
+		}, object.timeout);
+	}
+
+	return uid;
+}
+
+export function deleteNotification(uid: string) {
+	notifications.update((value) => {
+		delete value[uid];
+		return value;
+	})
+}
+
+export function showLinkedElement(query: string) {
+	const element = document.querySelector(query);
+
+	if (!element) {
+		return;
+	}
+
+	element.classList.add("linked");
+}
+
+export function hideLinkedElement(query: string) {
+	const element = document.querySelector(query);
+
+	if (!element) {
+		return;
+	}
+
+	element.classList.remove("linked");
+}
--- a/src/components/SidebarLeft.astro
+++ b/src/components/SidebarLeft.astro
@@ -160,16 +160,16 @@

 <style>
 	.nav-card {
-		@apply rounded-lg w-full flex flex-col shadow-md border;
+		@apply rounded-lg w-full flex flex-col shadow-md border border-base-300;
 	}

 	.infoCard {
-		@apply bg-white rounded-lg border p-4 shadow-md;
+		@apply bg-base-200 border-base-300 rounded-lg border p-4 shadow-md;
 	}

 	.dropdown-content > .card-menu-option,
 	.dropdown-content > a {
-		@apply block w-[350px] bg-gray-50 border text-lg px-4 py-2;
+		@apply block w-[350px] bg-base-200 border text-lg px-4 py-2 border-base-300;
 	}

 	.dropdown-content > a:first-child {
@@ -187,7 +187,7 @@
 	}

 	.dropdown-content {
-		@apply absolute bg-white left-full top-[-1px] shadow-md z-10 hidden rounded-lg;
+		@apply absolute bg-base-200 left-full top-[-1px] shadow-md z-10 hidden rounded-lg;
 	}

 	.dropdown:hover > .dropdown-content {
@@ -225,21 +225,7 @@
 	}

 	.card-menu-option {
-		padding: 10px 20px;
-		-webkit-user-select: none;
-		-moz-user-select: none;
-		-ms-user-select: none;
-		user-select: none;
-		text-decoration: none !important;
-		width: auto;
-		cursor: pointer;
-		border-bottom: 1px solid #fff;
-		font-weight: 400;
-		font-size: 1.1em;
-		color: #000;
-		background-color: #fff;
-		border-left: 0px solid #fff;
-		border-right: 0px solid #fff;
+		@apply bg-base-200 border-b border-base-300 text-base-content text-lg py-2.5 px-5 select-none no-underline w-auto cursor-pointer;
 	}

 	.nav-card .card-menu-option:first-child {
@@ -251,8 +237,8 @@
 	}

 	.nav-card .card-menu-option a {
+		@apply text-base-content;
 		text-decoration: none;
-		color: #000;
 	}

 	.nav-card .card-menu-option:hover > a {
--- a/src/components/SidebarRight.astro
+++ b/src/components/SidebarRight.astro
@@ -128,6 +128,6 @@

 <style>
 	.infoCard {
-		@apply bg-white rounded-lg border p-4 shadow-md;
+		@apply bg-base-200 rounded-lg border border-base-300 p-4 shadow-md;
 	}
 </style>
--- a/src/components/Tabs/Tab.svelte
+++ b/src/components/Tabs/Tab.svelte
@@ -0,0 +1,13 @@
+<script>
+	import { getContext } from 'svelte';
+	import { TABS } from './Tabs.svelte';
+
+	const tab = {};
+	const { registerTab, selectTab, selectedTab } = getContext(TABS);
+
+	registerTab(tab);
+</script>
+
+<button class="tab" class:selected="{$selectedTab === tab}" on:click="{() => selectTab(tab)}" {...$$restProps}>
+	<slot></slot>
+</button>
--- a/src/components/Tabs/TabList.svelte
+++ b/src/components/Tabs/TabList.svelte
@@ -0,0 +1,3 @@
+<div class="tab-list" {...$$restProps}>
+	<slot></slot>
+</div>
--- a/src/components/Tabs/TabPanel.svelte
+++ b/src/components/Tabs/TabPanel.svelte
@@ -0,0 +1,13 @@
+<script>
+	import { getContext } from 'svelte';
+	import { TABS } from './Tabs.svelte';
+
+	const panel = {};
+	const { registerPanel, selectedPanel } = getContext(TABS);
+
+	registerPanel(panel);
+</script>
+
+{#if $selectedPanel === panel}
+	<slot></slot>
+{/if}
--- a/src/components/Tabs/Tabs.svelte
+++ b/src/components/Tabs/Tabs.svelte
@@ -0,0 +1,50 @@
+<script context="module">
+	export const TABS = {};
+</script>
+
+<script>
+	import { setContext, onDestroy } from 'svelte';
+	import { writable } from 'svelte/store';
+
+	const tabs = [];
+	const panels = [];
+	const selectedTab = writable(null);
+	const selectedPanel = writable(null);
+
+	setContext(TABS, {
+		registerTab: tab => {
+			tabs.push(tab);
+			selectedTab.update(current => current || tab);
+			
+			onDestroy(() => {
+				const i = tabs.indexOf(tab);
+				tabs.splice(i, 1);
+				selectedTab.update(current => current === tab ? (tabs[i] || tabs[tabs.length - 1]) : current);
+			});
+		},
+
+		registerPanel: panel => {
+			panels.push(panel);
+			selectedPanel.update(current => current || panel);
+			
+			onDestroy(() => {
+				const i = panels.indexOf(panel);
+				panels.splice(i, 1);
+				selectedPanel.update(current => current === panel ? (panels[i] || panels[panels.length - 1]) : current);
+			});
+		},
+
+		selectTab: tab => {
+			const i = tabs.indexOf(tab);
+			selectedTab.set(tab);
+			selectedPanel.set(panels[i]);
+		},
+
+		selectedTab,
+		selectedPanel
+	});
+</script>
+
+<div class="tabs" {...$$restProps}>
+	<slot></slot>
+</div>
--- a/src/components/Tabs/index.ts
+++ b/src/components/Tabs/index.ts
@@ -0,0 +1,4 @@
+export { default as Tabs } from './Tabs.svelte';
+export { default as TabList } from './TabList.svelte';
+export { default as TabPanel } from './TabPanel.svelte';
+export { default as Tab } from './Tab.svelte';
--- a/src/components/ThemeController.svelte
+++ b/src/components/ThemeController.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import Cookies from "js-cookie";
+	import { Sun, Moon } from "radix-svelte-icons";
+
+	export let lightTheme: boolean = Cookies.get("theme") === "light" ? true : false;
+</script>
+
+<label class="swap swap-rotate btn btn-square btn-ghost hover:bg-base-200">
+	<input
+		type="checkbox"
+		class="theme-controller hidden"
+		value={"light"}
+		bind:checked={lightTheme}
+		on:change={() => {
+			Cookies.set("theme", lightTheme ? "light" : "dark");
+		}}
+	/>
+
+	<Sun class="swap-on fill-current" size={24} />
+	<Moon class="swap-off fill-current" size={24} />
+</label>
--- a/src/components/Widget.svelte
+++ b/src/components/Widget.svelte
--- a/src/layouts/AusweisLayout.astro
+++ b/src/layouts/AusweisLayout.astro
@@ -84,9 +84,9 @@ const schema = JSON.stringify({

 	<body>
 		<Header />
-		<main class="grid gap-6 p-6 grid-cols-[2fr,8fr] max-w-[1920px] w-full">
+		<main class="grid gap-6 p-6 grid-cols-[2fr,8fr] max-w-[1920px] w-full bg-base-100">
 			<SidebarLeft></SidebarLeft>
-			<article class="mainContent">
+			<article class="bg-base-200 rounded-lg border border-base-300">
 				<slot />
 			</article>
 		</main>
@@ -99,6 +99,42 @@ const schema = JSON.stringify({
 		min-height: 100vh;
 	}

+	article {
+		p, h1, h2, h3, h4, h5, h6 {
+			@apply text-base-content;
+		}
+	}
+
+	article h1 {
+	font-size: 1.7rem;
+	font-weight: 500;
+	line-height: 1.2rem;
+	width: 100%;
+	text-align: center;
+	margin: 1em 0em;
+}
+
+article a {
+	color: #3a4ab5;
+	text-decoration: none;
+	display: inline;
+}
+
+article a:hover {
+	text-decoration: underline;
+}
+
+article p {
+	line-height: 1.7em;
+	padding-right: 1em;
+	font-size: 1.1em;
+	text-transform: none;
+}
+
+article {
+	@apply relative w-full rounded-lg border shadow-md px-6 py-8 bg-white;
+}
+
 	.button {
 		@apply px-8 py-2 bg-secondary rounded-lg text-white font-medium hover:shadow-lg transition-all hover:underline active:bg-blue-900 text-center;
 		color: #fff !important;
@@ -121,43 +157,43 @@ const schema = JSON.stringify({
 	}

 	.GRB {
-		@apply border-2 border-[#ffcc03] p-4 flex flex-row rounded-lg justify-between w-full;
-		background: linear-gradient(
+		@apply border-2 border-[#ffcc03] p-4 flex flex-row rounded-lg justify-between w-full bg-[rgba(252,234,187,0.2)];
+		/* background: linear-gradient(
 			135deg,
 			rgba(252, 234, 187, 1) 0%,
 			rgba(253, 235, 189, 1) 52%,
 			rgba(251, 223, 147, 1) 100%
-		);
+		); */
 	}

 	.yellow-box {
-		@apply border-2 border-[#ffcc03] p-4 rounded-lg;
-		background: linear-gradient(
+		@apply border-2 border-[#ffcc03] p-4 rounded-lg bg-[rgba(252,234,187,0.2)];
+		/* background: linear-gradient(
 			135deg,
 			rgba(252, 234, 187, 1) 0%,
 			rgba(253, 235, 189, 1) 52%,
 			rgba(251, 223, 147, 1) 100%
-		);
+		); */
 	}

 	.GRB3 {
-		@apply flex flex-col border-2 border-[#ffcc03] p-4 rounded-lg;
-		background: linear-gradient(
+		@apply flex flex-col border-2 border-[#ffcc03] p-4 rounded-lg bg-base-200;
+		/* background: linear-gradient(
 			135deg,
 			rgba(252, 234, 187, 1) 0%,
 			rgba(253, 235, 189, 1) 52%,
 			rgba(251, 223, 147, 1) 100%
-		);
+		); */
 	}

 	.box {
-		@apply border-2 border-[#ffcc03] p-4 rounded-lg;
-		background: linear-gradient(
+		@apply border-2 border-[#ffcc03] p-4 rounded-lg bg-base-200;
+		/* background: linear-gradient(
 			135deg,
 			rgba(252, 234, 187, 1) 0%,
 			rgba(253, 235, 189, 1) 52%,
 			rgba(251, 223, 147, 1) 100%
-		);
+		); */
 	}

 	.headline {
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -93,10 +93,10 @@ const schema = JSON.stringify({
 	<body>
 		<Header />
 		<main
-			class="lg:grid gap-6 md:p-6 lg:grid-cols-[2fr,6fr,2fr] max-w-[1920px] w-full"
+			class="lg:grid gap-6 md:p-6 lg:grid-cols-[2fr,6fr,2fr] max-w-[1920px] w-full bg-base-100"
 		>
 			<SidebarLeft />
-			<article class="w-full max-w-full">
+			<article class="w-full max-w-full bg-base-200 border border-base-300">
 				<slot />
 			</article>
 			<div class="hidden lg:block">
@@ -108,12 +108,22 @@ const schema = JSON.stringify({
 	</body>
 </html>

-<style is:global>
+<style is:global lang="scss">
+
+	:root {
+		@apply bg-base-100 text-base-content;
+	}

 	article {
 		@apply rounded-lg w-full shadow-md border;
 	}

+	.mainContent {
+		p, h1, h2, h3, h4, h5, h6 {
+			@apply text-base-content;
+		}
+	}
+
 	body {
 		min-height: 100vh;
 	}
--- a/src/layouts/MinimalLayout.astro
+++ b/src/layouts/MinimalLayout.astro
@@ -0,0 +1,103 @@
+---
+import i18next from "i18next";
+
+import "../style/global.scss";
+import "../../svelte-dialogs.config"
+import "svelte-ripple-action/ripple.css"
+import { Sun, Moon } from "radix-svelte-icons";
+import ThemeController from "#components/ThemeController.svelte";
+
+export interface Props {
+	title: string;
+}
+
+const { title } = Astro.props;
+
+const schema = JSON.stringify({
+	"@context": "http://schema.org",
+	"@type": "Corporation",
+	name: "IB Cornelsen",
+	alternateName: "online-energieausweis.org",
+	url: "https://online-energieausweis.org",
+	logo: "https://online-energieausweis.org/ib-cornelsen.png",
+	address: {
+		"@type": "PostalAddress",
+		streetAddress: "Katendeich 5A",
+		addressLocality: "Hamburg",
+		postalCode: "21035",
+		addressCountry: "Deutschland",
+		email: "info@online-energieausweis.org",
+	},
+	contactPoint: {
+		"@type": "ContactPoint",
+		telephone: "+49-040-209339850",
+		faxNumber: "+49-040-209339859",
+		contactType: "customer service",
+		areaServed: "DE",
+		availableLanguage: "German",
+	},
+});
+
+const lightTheme = Astro.cookies.get("theme").value === "light";
+---
+
+<!DOCTYPE html>
+<html lang={i18next.language}>
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width" />
+		<script type="application/ld+json" set:html={schema}></script>
+		<link rel="icon" type="image/svg+xml" href="/favicon.jpg" />
+
+		<meta
+			name="description"
+			content="✅ Jetzt Ihren Energieausweis online erstellen. Erhalten Sie Ihren online Energieausweis rechtssicher und nach aktueller GEG (vormals EnEV) vom Diplom Ingenieur geprüft."
+		/>
+		<link rel="canonical" href="https://online-energieausweis.org/" />
+
+		<meta property="og:locale" content="de_DE" />
+		<meta property="og:type" content="website" />
+		<meta
+			property="og:title"
+			content="Energieausweis online erstellen - Online Energieausweis"
+		/>
+		<meta
+			property="og:description"
+			content="✅ Jetzt Ihren Energieausweis online erstellen. Erhalten Sie Ihren online Energieausweis rechtssicher und nach aktueller GEG (vormals EnEV) vom Diplom Ingenieur geprüft."
+		/>
+		<meta property="og:url" content="https://online-energieausweis.org/" />
+		<meta
+			property="og:site_name"
+			content="Energieausweis online erstellen"
+		/>
+
+		<meta name="twitter:card" content="summary_large_image" />
+		<meta
+			name="twitter:description"
+			content="✅ Jetzt Ihren Energieausweis online erstellen. Erhalten Sie Ihren online Energieausweis rechtssicher und nach aktueller GEG (vormals EnEV) vom Diplom Ingenieur geprüft."
+		/>
+		<meta
+			name="twitter:title"
+			content="Energieausweis online erstellen - Online Energieausweis"
+		/>
+		<meta
+			name="twitter:image"
+			content="https://online-energieausweis.org/images/energieausweis-online-erstellen.jpg"
+		/>
+		<title>
+			{title || "Energieausweis online erstellen - Online Energieausweis"}
+		</title>
+	</head>
+
+	<body class="min-h-screen">
+		<a href="/">
+			<img class="w-48 absolute top-4 left-4" src="/images/header/logo-big.svg" alt="IBCornelsen">
+		</a>
+		<main class="p-8 overflow-auto h-screen bg-base-100 flex items-center justify-center">
+			<slot />
+		</main>
+		<div class="absolute top-4 right-4">
+			<ThemeController lightTheme={lightTheme} client:load></ThemeController>
+		</div>
+	</body>
+</html>
--- a/src/layouts/UserLayout.astro
+++ b/src/layouts/UserLayout.astro
@@ -4,8 +4,6 @@ import i18next from "i18next";
 import "../style/global.scss";
 import "../../svelte-dialogs.config"
 import "svelte-ripple-action/ripple.css"
-import Footer from "../components/Footer.astro";
-import DashboardHeader from "../components/Dashboard/DashboardHeader.svelte"
 import DashboardSidebar from "../components/Dashboard/DashboardSidebar.svelte"
 import { NotificationWrapper } from "@ibcornelsen/ui";

@@ -40,6 +38,8 @@ const schema = JSON.stringify({
 		availableLanguage: "German",
 	},
 });
+
+let lightTheme = Astro.cookies.get("theme").value === "light";
 ---

 <!DOCTYPE html>
@@ -91,10 +91,9 @@ const schema = JSON.stringify({
 	</head>

 	<body class="min-h-screen grid md:grid-cols-[300px_1fr]">
-		<DashboardSidebar client:load></DashboardSidebar>
+		<DashboardSidebar lightTheme={lightTheme} client:load></DashboardSidebar>
 		<main class="p-8 overflow-auto h-screen bg-base-100">
 			<slot />
 		</main>
-		<NotificationWrapper client:load />
 	</body>
 </html>
--- a/src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte
+++ b/src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte
@@ -210,7 +210,7 @@

 <form on:submit={ausweisAbschicken} name="ausweis" data-test="ausweis">
 	<div
-		class="bg-[rgba(252,234,187,0.2)] border-2 p-4 rounded-lg border-[#ffcc03]"
+		class="yellow-box"
 	>
 		<div class="flex flex-row justify-between">
 			<button class="button" type="button" on:click={spaeterWeitermachen}>Später Weitermachen</button>
--- a/src/modules/Dashboard/DashboardAusweiseModule.svelte
+++ b/src/modules/Dashboard/DashboardAusweiseModule.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+	import { BenutzerClient, VerbrauchsausweisWohnenClient } from "#components/Ausweis/types";
+	import DashboardAusweis from "#components/Dashboard/DashboardAusweis.svelte";
+	import DashboardAusweisSkeleton from "#components/Dashboard/DashboardAusweisSkeleton.svelte";
+	import { client } from "src/trpc";
+	export let user: BenutzerClient;
+
+	let ausweisRequest = client.v1.benutzer.getAusweise.query({
+		limit: 10
+	});
+</script>
+
+<h1 class="text-4xl font-medium my-8">Wichtiges</h1>
+
+<div class="flex flex-row gap-4">
+	<div class="card w-96 card-bordered bg-base-200 border-base-300">
+		<div class="card-body">
+			<div class="badge badge-warning font-semibold">Warnung!</div>
+			<h2 class="card-title">Gebäudebilder</h2>
+			<p>Wir haben festgestellt, dass die Bilder für eines ihrer Gebäude nicht ganz den Anforderungen entsprechen, beheben sie das Problem, damit der Fehler so schnell wie möglich behoben werden kann.</p>
+			<div class="card-actions justify-end">
+				<a class="btn btn-primary">Beheben</a>
+			</div>
+		</div>
+	</div>
+	<div class="card w-96 card-bordered bg-base-200 border-base-300">
+		<div class="card-body">
+			<div class="badge badge-error font-semibold">Fehler!</div>
+			<h2 class="card-title">Daten</h2>
+			<p>Der Ausweis für <strong>Curslacker Deich 170</strong> hat unvollständige Daten oder die gegebenen Daten sind fehlerhaft, bitte beheben sie das Problem, damit der Ausweis so schnell wie möglich ausgestellt werden kann.</p>
+			<div class="card-actions justify-end">
+				<a class="btn btn-primary">Beheben</a>
+			</div>
+		</div>
+	</div>
+</div>
+
+<h1 class="text-4xl font-medium my-8">Ihre Ausweise</h1>
+	
+<div class="grid xl:grid-cols-2 grid-cols-1 gap-4">
+
+	{#await ausweisRequest}
+		<DashboardAusweisSkeleton></DashboardAusweisSkeleton>
+		<DashboardAusweisSkeleton></DashboardAusweisSkeleton>
+		
+	{:then ausweise}
+		{#if ausweise.length == 0}
+			<div class="">
+				<h1 class="text-2xl">Es konnten keine Ausweise gefunden werden.</h1>
+				<p>Erstellen sie einen Verbrauchsausweis für ihr Wohngebäude <a href="/energieausweis-erstellen/verbrauchsausweis-wohnen">hier</a></p>
+			</div>
+		{:else}
+			{#each ausweise as ausweis}
+				<DashboardAusweis {ausweis}></DashboardAusweis>
+			{/each}
+		{/if}
+	{/await}
+
+</div>
+
+<div class="flex items-center justify-center mt-12">
+	<div class="join">
+		<button class="join-item btn btn-ghost shadow-none">1</button>
+		<button class="join-item btn btn-ghost shadow-none">2</button>
+		<button class="join-item btn btn-ghost shadow-none">3</button>
+		<button class="join-item btn btn-ghost shadow-none">4</button>
+	</div>
+</div>
--- a/src/modules/Dashboard/DashboardEinstellungenModule.svelte
+++ b/src/modules/Dashboard/DashboardEinstellungenModule.svelte
@@ -0,0 +1,131 @@
+<script lang="ts">
+	import {
+		Reader,
+		EnvelopeClosed,
+		Cube,
+		Person,
+	} from "radix-svelte-icons";
+	import { Tabs, Tab, TabList, TabPanel } from "../../components/Tabs";
+	import { dialogs } from "../../../svelte-dialogs.config";
+
+	function profilSpeichern() {
+		dialogs.confirm({
+			title: "Profil speichern",
+			text: "Möchtest du deine Änderungen speichern?",
+			confirmButtonText: "Speichern",
+			declineButtonText: "Abbrechen",
+		})
+	}
+</script>
+
+<h1 class="text-4xl font-medium my-8">Einstellungen</h1>
+<Tabs class="h-full">
+	<div class="grid grid-cols-[1fr_3fr] h-full gap-8">
+		<TabList>
+			<Tab>
+				<Person size={22} />
+				Profil
+			</Tab>
+			<Tab>
+				<Reader width={22} height={22} />
+				Ausweise
+			</Tab>
+			<Tab>
+				<EnvelopeClosed width={22} height={22} />
+				Kontakt
+			</Tab>
+			<li>
+				<details>
+					<summary class="tab w-full outline-0 hover:outline-0">
+						<Cube width={22} height={22} />
+						Services</summary
+					>
+					<ul>
+						<li>
+							<Tab>
+								<EnvelopeClosed width={22} height={22} />
+								Kontakt
+							</Tab>
+						</li>
+						<li>
+							<Tab>
+								<EnvelopeClosed width={22} height={22} />
+								Kontakt
+							</Tab>
+						</li>
+					</ul>
+				</details>
+			</li>
+		</TabList>
+		<div
+			class="border border-base-300 w-full h-full rounded-lg bg-base-200 p-8"
+		>
+			<TabPanel>
+				<h2 class="text-2xl font-medium">Profil</h2>
+				<div class="flex flex-col gap-4 my-4 max-w-2xl">
+					<div class="flex flex-row gap-4">
+						<div class="flex flex-col">
+							<span class="whitespace-nowrap">Vorname</span>
+							<input type="password" class="input text-base-content font-medium" placeholder="Max">
+						</div>
+						<div class="flex flex-col">
+							<span class="whitespace-nowrap">Nachname</span>
+							<input type="password" class="input text-base-content font-medium" placeholder="Müller">
+						</div>
+					</div>
+					<div class="flex flex-col">
+						<span class="whitespace-nowrap">Email Adresse</span>
+						<input type="text" class="input text-base-content font-medium" placeholder="name@email.com" value="zobhusdi@wo.tk">
+					</div>
+					<div class="flex flex-row gap-4">
+						<div class="flex flex-col">
+							<span class="whitespace-nowrap">Passwort</span>
+							<input type="password" class="input text-base-content font-medium" placeholder="*********">
+						</div>
+						<div class="flex flex-col">
+							<span class="whitespace-nowrap">Passwort bestätigen</span>
+							<input type="password" class="input text-base-content font-medium" placeholder="*********">
+						</div>
+					</div>
+				</div>
+
+				<button class="btn btn-primary" on:click={profilSpeichern}>Speichern</button>
+			</TabPanel>
+			<TabPanel>
+				<h1>Panel Two</h1>
+			</TabPanel>
+		</div>
+	</div>
+</Tabs>
+
+<style>
+	:global(.tab-list) {
+		@apply menu flex flex-col gap-2 px-0 bg-base-200 rounded-lg border border-base-300;
+	}
+
+	@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,400&display=swap");
+
+	:global(*) {
+		font-family: Poppins !important;
+	}
+
+	:global(.tab.selected) {
+		@apply bg-base-300;
+	}
+
+	:global(.tab) {
+		@apply btn btn-primary btn-ghost rounded-none px-8 justify-start outline-0 gap-4 items-center text-base font-normal text-base-content no-animation;
+	}
+
+	:global(.tab:hover) {
+		@apply bg-base-300 outline-0;
+	}
+
+	:global(.tab:focus) {
+		@apply shadow-none;
+	}
+
+	:global(summary.tab::after) {
+		@apply ml-auto;
+	}
+</style>
--- a/src/modules/Dashboard/UserModule.svelte
+++ b/src/modules/Dashboard/UserModule.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { BenutzerClient, VerbrauchsausweisWohnenClient } from "#components/Ausweis/types";
+	import DashboardAusweis from "#components/Dashboard/DashboardAusweis.svelte";
+	import DashboardAusweisSkeleton from "#components/Dashboard/DashboardAusweisSkeleton.svelte";
+	export let user: BenutzerClient;
+	export let ausweise: VerbrauchsausweisWohnenClient[];
+
+	console.log(ausweise);
+	
+</script>
+
+<h1 class="text-4xl font-medium my-8">Wichtiges</h1>
+
+<div class="flex flex-row gap-4">
+	<div class="card w-96 card-bordered bg-base-200 border-base-300">
+		<div class="card-body">
+			<div class="badge badge-warning font-semibold">Warnung!</div>
+			<h2 class="card-title">Gebäudebilder</h2>
+			<p>Wir haben festgestellt, dass die Bilder für eines ihrer Gebäude nicht ganz den Anforderungen entsprechen, beheben sie das Problem, damit der Fehler so schnell wie möglich behoben werden kann.</p>
+			<div class="card-actions justify-end">
+				<a class="btn btn-primary">Beheben</a>
+			</div>
+		</div>
+	</div>
+	<div class="card w-96 card-bordered bg-base-200 border-base-300">
+		<div class="card-body">
+			<div class="badge badge-error font-semibold">Fehler!</div>
+			<h2 class="card-title">Daten</h2>
+			<p>Der Ausweis für <strong>Curslacker Deich 170</strong> hat unvollständige Daten oder die gegebenen Daten sind fehlerhaft, bitte beheben sie das Problem, damit der Ausweis so schnell wie möglich ausgestellt werden kann.</p>
+			<div class="card-actions justify-end">
+				<a class="btn btn-primary">Beheben</a>
+			</div>
+		</div>
+	</div>
+</div>
+
+<h1 class="text-4xl font-medium my-8">Ihre Ausweise</h1>
+	
+<div class="grid xl:grid-cols-2 grid-cols-1 gap-4">
+	
+	{#if ausweise.length == 0}
+		
+	{:else}
+		{#each ausweise as ausweis}
+			<DashboardAusweis {ausweis}></DashboardAusweis>
+		{/each}
+	{/if}
+
+	<DashboardAusweisSkeleton></DashboardAusweisSkeleton>
+
+</div>
+
+<div class="flex items-center justify-center mt-12">
+	<div class="join">
+		<button class="join-item btn btn-ghost shadow-none">1</button>
+		<button class="join-item btn btn-ghost shadow-none">2</button>
+		<button class="join-item btn btn-ghost shadow-none">3</button>
+		<button class="join-item btn btn-ghost shadow-none">4</button>
+	</div>
+</div>
--- a/src/modules/LoginModule.svelte
+++ b/src/modules/LoginModule.svelte
@@ -26,29 +26,29 @@
 				return;
 			}

-			window.location.href = "/user";
+			window.location.href = "/dashboard";
 		}
 	}
 </script>

-<div style="width:50%;margin: 0 auto">
-	<h1>Login</h1>
+<div class="mx-auto w-1/3 bg-base-200 p-8 border border-base-300 rounded-lg">
+	<h1 class="text-3xl mb-4">Login</h1>
 	<form class="flex flex-col gap-4" on:submit={login}>
-		<div>
-			<h4>Email</h4>
+		<div class="flex flex-col gap-2">
+			<h4 class="text-base">Email</h4>
 			<input
-				class="px-2.5 py-1.5 rounded-lg border bg-gray-50"
+				class="input input-bordered text-base text-base-content font-medium"
 				type="text"
-				placeholder="Email"
+				placeholder="nutzer@email.com"
 				name="email"
 				bind:value={email}
 				required
 			/>
 		</div>
-		<div>
+		<div class="flex flex-col gap-2">
 			<h4>Passwort</h4>
 			<input
-				class="px-2.5 py-1.5 rounded-lg border bg-gray-50"
+				class="input input-bordered text-base text-base-content font-medium"
 				type="password"
 				placeholder="********"
 				name="passwort"
@@ -56,10 +56,10 @@
 				required
 			/>
 		</div>
-		<button type="submit">Einloggen</button>
+		<button class="btn btn-primary" type="submit">Einloggen</button>
 		<div class="flex-row justify-between" style="margin-top: 10px">
-			<a href="/auth/signup?redirect={redirect}">Registrieren</a>
-			<a href="/user/passwort_vergessen?redirect={redirect}"
+			<a class="link link-hover" href="/auth/signup?redirect={redirect}">Registrieren</a>
+			<a class="link link-hover" href="/user/passwort_vergessen?redirect={redirect}"
 				>Passwort Vergessen?</a
 			>
 		</div>
--- a/src/modules/RegisterModule.svelte
+++ b/src/modules/RegisterModule.svelte
@@ -37,63 +37,63 @@
 	}
 </script>

-<div style="width:50%;margin: 0 auto">
-	<h1>Registrieren:</h1>
+<div class="mx-auto w-1/3 bg-base-200 p-8 border border-base-300 rounded-lg">
+	<h1 class="text-3xl mb-4">Registrieren</h1>
 	<form class="flex flex-col gap-4" on:submit={login}>
 		<div class="flex flex-row gap-4 w-full">
-			<div class="w-1/2">
+			<div class="w-1/2 flex flex-col gap-2">
 				<h4>Vorname</h4>
 				<input
 					type="text"
 					placeholder="Vorname"
 					name="vorname"
-					class="px-2.5 py-1.5 rounded-lg border bg-gray-50"
+					class="input input-bordered text-base text-base-content font-medium"
 					bind:value={vorname}
 					required
 				/>
 			</div>
-			<div class="w-1/2">
+			<div class="w-1/2 flex flex-col gap-2">
 				<h4>Nachname</h4>
 				<input
 					type="text"
 					placeholder="Nachname"
 					name="name"
-					class="px-2.5 py-1.5 rounded-lg border bg-gray-50"
+					class="input input-bordered text-base text-base-content font-medium"
 					bind:value={name}
 					required
 				/>
 			</div>
 		</div>
-		<div>
+		<div class="flex flex-col gap-2">
 			<h4>Email</h4>
 			<input
 				type="text"
 				placeholder="Email"
 				name="email"
-				class="px-2.5 py-1.5 rounded-lg border bg-gray-50"
+				class="input input-bordered text-base text-base-content font-medium"
 				bind:value={email}
 				required
 			/>
 		</div>
-		<div>
+		<div class="flex flex-col gap-2">
 			<h4>Passwort</h4>
 			<input
 				type="password"
 				placeholder="********"
 				name="passwort"
-				class="px-2.5 py-1.5 rounded-lg border bg-gray-50"
+				class="input input-bordered text-base text-base-content font-medium"
 				bind:value={passwort}
 				required
 			/>
 		</div>
-		<button type="submit" class="button" 
+		<button type="submit" class="btn btn-primary" 
 				>Registrieren</button
 			>
 		<div class="flex-row justify-between" style="margin-top: 10px">
-			<a
+			<a class="link link-hover"
 				href="/auth/login?redirect={redirect}">Einloggen</a
 			>
-			<a href="/user/passwort_vergessen?redirect={redirect}">Passwort Vergessen?</a>
+			<a class="link link-hover" href="/user/passwort_vergessen?redirect={redirect}">Passwort Vergessen?</a>
 		</div>
 	</form>
 </div>
--- a/src/modules/UserModule.svelte
+++ b/src/modules/UserModule.svelte
@@ -1,107 +0,0 @@
-<script lang="ts">
-	import { BenutzerClient } from "#components/Ausweis/types";
-	import DashboardAusweisSkeleton from "#components/Dashboard/DashboardAusweisSkeleton.svelte";
-	export let user: BenutzerClient;
-</script>
-
-<h1 class="text-4xl font-medium my-8">Wichtiges</h1>
-
-<div class="flex flex-row gap-4">
-	<div class="card w-96 card-bordered bg-base-200 border-base-300">
-		<div class="card-body">
-			<div class="badge badge-warning font-semibold">Warnung!</div>
-			<h2 class="card-title">Gebäudebilder</h2>
-			<p>Wir haben festgestellt, dass die Bilder für eines ihrer Gebäude nicht ganz den Anforderungen entsprechen, beheben sie das Problem, damit der Fehler so schnell wie möglich behoben werden kann.</p>
-			<div class="card-actions justify-end">
-				<a class="btn btn-primary">Beheben</a>
-			</div>
-		</div>
-	</div>
-	<div class="card w-96 card-bordered bg-base-200 border-base-300">
-		<div class="card-body">
-			<div class="badge badge-error font-semibold">Fehler!</div>
-			<h2 class="card-title">Daten</h2>
-			<p>Der Ausweis für <strong>Curslacker Deich 170</strong> hat unvollständige Daten oder die gegebenen Daten sind fehlerhaft, bitte beheben sie das Problem, damit der Ausweis so schnell wie möglich ausgestellt werden kann.</p>
-			<div class="card-actions justify-end">
-				<a class="btn btn-primary">Beheben</a>
-			</div>
-		</div>
-	</div>
-</div>
-
-<h1 class="text-4xl font-medium my-8">Ihre Ausweise</h1>
-	
-<div class="grid xl:grid-cols-2 grid-cols-1 gap-4">
-	<div class="card lg:card-side bg-base-200 card-bordered border-base-300">
-		<figure class="lg:w-1/2"><img src="https://www.houseanddecors.com/wp-content/uploads/2019/01/modern-house-04.jpg" class="object-cover w-full h-full" alt="Album"/></figure>
-		<div class="card-body lg:w-1/2">
-			<div class="flex flex-row flex-wrap gap-2">
-				<div class="badge badge-accent font-semibold">Verbrauchsausweis</div>
-			<div class="badge badge-success font-semibold">Ausgestellt</div>
-			</div>
-			<h2 class="card-title">Curslacker Deich 170, 21039</h2>
-			<div class="mb-4 flex flex-row items-center gap-4">
-				<progress class="progress w-full" value="54" max="100"></progress>
-				<span class="text-sm font-semibold text-base-content">54%</span>
-			</div>
-			<div class="flex flex-col gap-2">
-				<div class="flex flex-row justify-between">
-					<span>Energieverbrauch</span>
-					<span class="font-bold text-base-content">215kWh/A</span>
-				</div>
-				<div class="flex flex-row justify-between">
-					<span>CO2 Ausstoß</span>
-					<span class="font-bold text-base-content">N/A</span>
-				</div>
-				<div class="flex flex-row justify-between">
-					<span>Erstellungsdatum</span>
-					<span class="font-bold text-base-content">22.01.2023</span>
-				</div>
-				<div class="flex flex-row justify-between">
-					<span>Baujahr</span>
-					<span class="font-bold text-base-content">1962 / 1985</span>
-				</div>
-				<div class="flex flex-row justify-between">
-					<span>Wohnfläche</span>
-					<span class="font-bold text-base-content">112m²</span>
-				</div>
-			</div>
-			<div class="card-actions justify-end mt-auto">
-				<a class="btn btn-primary">Als Vorlage benutzen</a>
-				<a class="btn btn-primary">Bearbeiten</a>
-				<button class="btn btn-primary" on:click={() => hilfeModal.showModal()}>Hilfe Erhalten</button>
-				<dialog id="hilfeModal" class="modal">
-					<div class="modal-box">
-						<h3 class="font-bold text-xl mb-4">Hilfe Anfordern</h3>
-						<p>Brauchen sie Hilfe bei der Erstellung oder Bearbeitung ihres Ausweises?</p>
-						<p>In unserem <a href="/helpdesk">Helpdesk</a> finden sie antworten auf häufig gestellte Fragen.</p>
-						<p>Falls sie dort nicht finden wonach sie suchen, rufen sie uns doch unter <a href="tel:040-220-31-87">040 220 31 87</a> an oder <a href="mailto:moritz.utcke@gmx.de">schreiben sie uns eine email</a>.</p>
-						<p>Wenn wir telefonisch nicht erreichbar sind, können sie uns auch direkt hier eine Nachricht hinterlassen.</p>
-						<form class="my-4">
-							<textarea class="textarea textarea-bordered" placeholder="Ihre Nachricht..." cols="10" rows="5"></textarea>
-							<button class="btn btn-primary">Nachricht Abschicken</button>
-						</form>
-						<div class="modal-action">
-							<form method="dialog">
-								<button class="btn">Schließen</button>
-							</form>
-						</div>
-					</div>
-				</dialog>
-				<button class="btn btn-ghost" title="PDF Herunterladen"><svg width="22" height="22" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.50005 1.04999C7.74858 1.04999 7.95005 1.25146 7.95005 1.49999V8.41359L10.1819 6.18179C10.3576 6.00605 10.6425 6.00605 10.8182 6.18179C10.994 6.35753 10.994 6.64245 10.8182 6.81819L7.81825 9.81819C7.64251 9.99392 7.35759 9.99392 7.18185 9.81819L4.18185 6.81819C4.00611 6.64245 4.00611 6.35753 4.18185 6.18179C4.35759 6.00605 4.64251 6.00605 4.81825 6.18179L7.05005 8.41359V1.49999C7.05005 1.25146 7.25152 1.04999 7.50005 1.04999ZM2.5 10C2.77614 10 3 10.2239 3 10.5V12C3 12.5539 3.44565 13 3.99635 13H11.0012C11.5529 13 12 12.5528 12 12V10.5C12 10.2239 12.2239 10 12.5 10C12.7761 10 13 10.2239 13 10.5V12C13 13.1041 12.1062 14 11.0012 14H3.99635C2.89019 14 2 13.103 2 12V10.5C2 10.2239 2.22386 10 2.5 10Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button>
-			</div>
-		</div>
-	</div>
-
-	<DashboardAusweisSkeleton></DashboardAusweisSkeleton>
-
-</div>
-
-<div class="flex items-center justify-center mt-12">
-	<div class="join">
-		<button class="join-item btn btn-ghost shadow-none">1</button>
-		<button class="join-item btn btn-ghost shadow-none">2</button>
-		<button class="join-item btn btn-ghost shadow-none">3</button>
-		<button class="join-item btn btn-ghost shadow-none">4</button>
-	</div>
-</div>
--- a/src/pages/auth/login.astro
+++ b/src/pages/auth/login.astro
@@ -1,17 +1,17 @@
 ---
 import LoginModule from "../../modules/LoginModule.svelte";
-import Layout from "../../layouts/Layout.astro";
 import { validateAccessTokenServer } from "src/server/lib/validateAccessToken";
+import MinimalLayout from "#layouts/MinimalLayout.astro";

 const valid = await validateAccessTokenServer(Astro)

 if (valid) {
-	return Astro.redirect("/user")
+	return Astro.redirect("/dashboard")
 }

 const redirect = Astro.url.searchParams.get("redirect")
 ---

-<Layout title="Login">
+<MinimalLayout title="Login">
 	<LoginModule client:only redirect={redirect}></LoginModule>
-</Layout>
+</MinimalLayout>
--- a/src/pages/auth/signup.astro
+++ b/src/pages/auth/signup.astro
@@ -1,10 +1,19 @@
 ---
 import RegisterModule from "../../modules/RegisterModule.svelte";
-import Layout from "../../layouts/Layout.astro";
+import MinimalLayout from "#layouts/MinimalLayout.astro";
+import { validateAccessTokenServer } from "src/server/lib/validateAccessToken";
+
+const valid = await validateAccessTokenServer(Astro)
+
+if (valid) {
+	return Astro.redirect("/dashboard")
+}

 const redirect = Astro.url.searchParams.get("redirect");
+
+
 ---

-<Layout title="Registrieren - IBCornelsen">
+<MinimalLayout title="Registrieren - IBCornelsen">
 	<RegisterModule client:only redirect={redirect}></RegisterModule>
-</Layout>
+</MinimalLayout>
--- a/src/pages/dashboard/ausweise/index.astro
+++ b/src/pages/dashboard/ausweise/index.astro
@@ -0,0 +1,26 @@
+---
+import UserLayout from "../../../layouts/UserLayout.astro";
+import { API_UID_COOKIE_NAME } from "../../../lib/constants";
+import DashboardAusweiseModule from "#modules/Dashboard/DashboardAusweiseModule.svelte";
+import { prisma } from "@ibcornelsen/database/server";
+
+const uid = Astro.cookies.get(API_UID_COOKIE_NAME).value
+
+if (!uid) {
+	return Astro.redirect("/auth/login")
+}
+
+const user = await prisma.benutzer.findUnique({
+	where: {
+		uid
+	}
+})
+
+if (!user) {
+	return Astro.redirect("/auth/login")
+}
+---
+
+<UserLayout title="Dashboard">
+	<DashboardAusweiseModule user={user} client:load></DashboardAusweiseModule>
+</UserLayout>
--- a/src/pages/dashboard/einstellungen/index.astro
+++ b/src/pages/dashboard/einstellungen/index.astro
@@ -0,0 +1,10 @@
+---
+import UserLayout from "#layouts/UserLayout.astro";
+import DashboardEinstellungenModule from "#modules/Dashboard/DashboardEinstellungenModule.svelte";
+
+
+---
+
+<UserLayout title="Einstellungen">
+	<DashboardEinstellungenModule client:load />
+</UserLayout>
--- a/src/pages/dashboard/index.astro
+++ b/src/pages/dashboard/index.astro
@@ -1,18 +1,25 @@
 ---
-import UserLayout from "#layouts/UserLayout.astro";
-import { API_UID_COOKIE_NAME } from "#lib/constants";
+import UserLayout from "../../layouts/UserLayout.astro";
+import { API_UID_COOKIE_NAME } from "../../lib/constants";
 import UserModule from "#modules/UserModule.svelte";
 import { prisma } from "@ibcornelsen/database/server";

 const uid = Astro.cookies.get(API_UID_COOKIE_NAME).value

+if (!uid) {
+	return Astro.redirect("/auth/login")
+}
+
 const user = await prisma.benutzer.findUnique({
 	where: {
 		uid
 	}
 })
+
+if (!user) {
+	return Astro.redirect("/auth/login")
+}
 ---

 <UserLayout title="Dashboard">
-	<UserModule user={user} client:load></UserModule>
 </UserLayout>
--- a/src/style/576.scss
+++ b/src/style/576.scss
@@ -34,9 +34,7 @@ body {
 	grid-area: 1/1/1/4;
 }

-.mainContent {
-	@apply relative w-full rounded-lg border shadow-md px-6 py-8 bg-white;
-}
+

 .right-sidebar {
 	display: none;
@@ -46,31 +44,7 @@ body {
 	width: 100%;
 }

-.mainContent h1 {
-	font-size: 1.7rem;
-	font-weight: 500;
-	line-height: 1.2rem;
-	width: 100%;
-	text-align: center;
-	margin: 1em 0em;
-}

-.mainContent a {
-	color: #3a4ab5;
-	text-decoration: none;
-	display: inline;
-}
-
-.mainContent a:hover {
-	text-decoration: underline;
-}
-
-.mainContent p {
-	line-height: 1.7em;
-	padding-right: 1em;
-	font-size: 1.1em;
-	text-transform: none;
-}

 footer a {
 	display: inline;
--- a/src/style/global.scss
+++ b/src/style/global.scss
@@ -1,9 +1,10 @@
@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,400&display=swap");

 * {
 	font-weight: 400;
 	box-sizing: border-box;
-	font-family: "Abel", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+	font-family: "Abel", "Poppins", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }

@import './576';
--- a/svelte-dialogs.config.ts
+++ b/svelte-dialogs.config.ts
@@ -2,16 +2,13 @@ import { dialogs } from "svelte-dialogs";

 dialogs.config({
  global: {
-		inputClass: "px-2.5 py-1.5 rounded-lg border bg-white",
-		inputLabelClass: "text-gray-500 bg-white ml-2 w-fit",
-		bodyClass: "bg-white flex flex-col gap-4",
-		dialogClass: "bg-white rounded-md px-8 py-8",
-		cancelButtonClass: "button",
-		footerClass: "flex justify-end bg-white mt-4 gap-4",
-		resetButton: false,
-		submitButtonClass: "button",
-		titleClass: "text-2xl font-bold mb-4",
-		dividerClass: "border-b border-gray-200",
+		confirmButtonClass: "btn btn-primary",
+		declineButtonClass: "btn btn-bordered",
+		dialogClass: "modal-box",
+		headerClass: "bg-base-100 text-center",
+		titleClass: "text-base-content text-xl font-medium",
+		dividerClass: "hidden",
+		footerClass: "bg-base-100 justify-center gap-4 mt-4",
 		closeOnBg: true,
 		closeOnEsc: true
 	}