diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
index f821ac7..7507807 100644
Binary files a/.yarn/install-state.gz and b/.yarn/install-state.gz differ
diff --git a/api/collections/_article.yml b/api/collections/_article.yml
deleted file mode 100644
index c8a098b..0000000
--- a/api/collections/_article.yml
+++ /dev/null
@@ -1,364 +0,0 @@
-name: article
-type: tabs
-meta:
-    label:
-        de: Einstellungen zum Artikel
-        en: Article Setings
-    activeTab: 0
-subFields:
-    - name: general
-      type: object
-      meta:
-          label:
-              de: Allgemein
-              en: General
-          css:
-      subFields:
-          - name: public
-            type: boolean
-            meta:
-                label:
-                    de: Veröffentlicht
-                    en: Public
-                helperText:
-                    de: "Der Artikel wird auf der Seite angezeigt."
-                    en: "This article is displayed on the page."
-          - name: publish_date
-            type: object
-            meta:
-                label:
-                    de: Datum der Veröffentlichung
-                    en: Release Date
-                css: "grid grid-50"
-            subFields:
-                - name: public_from
-                  type: date
-                  meta:
-                      inputProps:
-                          type: "datetime-local"
-                      label:
-                          de: Datum (ab)
-                          en: Date (from)
-                - name: public_until
-                  type: date
-                  meta:
-                      inputProps:
-                          type: "datetime-local"
-                      label:
-                          de: Datum (bis)
-                          en: Date (until)
-          - name: position
-            type: string
-            meta:
-                widget: select
-                label:
-                    de: Position auf der Seite
-                    en: Position on page
-                defaultValue: []
-                choices:
-                    - { id: "content", name: "Inhaltsbereich" }
-                    - { id: "sidebar", name: "Sidebar" }
-          - name: sort
-            type: number
-            meta:
-                inputProps:
-                    type: number
-                    placeholder: 0
-                label: { de: "Sortierung", en: "Sorting" }
-                helperText:
-                    de: "1...5...10...100"
-                    en: "1...5...10...100"
-    - name: content
-      type: object
-      meta:
-          label:
-              de: Inhalt
-              en: Content
-          css:
-      subFields:
-          - name: slug
-            type: string
-            meta:
-                label: { de: "Permalink", en: "Permalink" }
-          - name: title
-            type: string
-            meta:
-                label: { de: "Titel", en: "Title" }
-          - name: subtitle
-            type: string
-            meta:
-                label: { de: "Untertitel", en: "Subtitle" }
-          - name: types
-            type: tabs
-            meta:
-                label:
-                    de: Inhalt dieses Artikel
-                    en: Article Content
-                activeTab: 0
-            subFields:
-                - name: teaser
-                  type: string
-                  meta:
-                      widget: richtext
-                      label: { de: "Teaser-Text des Artikel", en: "Article Teaser Text" }
-                - name: details
-                  type: string
-                  meta:
-                      widget: richtext
-                      label: { de: "Detail-Text des Artikel", en: "Article Detail Text" }
-                - name: contentMedia
-                  type: object
-                  meta:
-                      label:
-                          de: Medien
-                          en: Media
-                      css:
-                  subFields:
-                      - name: mediaFiles
-                        type: object[]
-                        meta:
-                            label: { de: "Bilder", en: "Images" }
-                        subFields:
-                            - name: title
-                              type: string
-                              meta:
-                                  label: { de: "Datei-Titel", en: "File Title" }
-                            - name: alternateText
-                              type: string
-                              meta:
-                                  label: { de: "Alternativer Text", en: "Alternate Text" }
-                            - name: id
-                              type: string
-                              meta:
-                                  label: { de: "Technischer Name / ID", en: "Technical name / ID" }
-                            - name: file
-                              type: file
-                              meta:
-                                  label: { de: "Datei", en: "File" }
-                            - name: caption
-                              type: string
-                              meta:
-                                  label: { de: "Bildunterschrift", en: "Caption" }
-                - name: contentAttachments
-                  type: object
-                  meta:
-                      label:
-                          de: Anhänge / Downloads
-                          en: Attachments / Downloads
-                      css:
-                  subFields:
-                      - name: attachments
-                        type: object[]
-                        meta:
-                            label: { de: "Anhänge", en: "Attachments" }
-                        subFields:
-                            - name: title
-                              type: string
-                              meta:
-                                  label: { de: "Datei-Titel", en: "File Title" }
-                            - name: id
-                              type: string
-                              meta:
-                                  label: { de: "Technischer Name / ID", en: "Technical name / ID" }
-                            - name: file
-                              type: file
-                              meta:
-                                  label: { de: "", en: "" }
-    - name: layout
-      type: tabs
-      meta:
-          label:
-              de: Layout
-              en: Layout
-          css:
-      subFields:
-          - name: variant
-            type: string
-            meta:
-                widget: select
-                label:
-                    de: Erscheinungsbild
-                    en: Appearance
-                defaultValue: ["_self"]
-                choices:
-                    - {
-                          id: "top",
-                          name: { de: "Artikelbild oben (volle Breite)", en: "Article picture top (full width)" },
-                      }
-                    - {
-                          id: "right",
-                          name: { de: "Artikelbild rechts (volle Höhe)", en: "Article picture right (full height)" },
-                      }
-                    - {
-                          id: "bottom",
-                          name: { de: "Artikelbild unten (volle Breite)", en: "Article picture left (full width)" },
-                      }
-                    - {
-                          id: "left",
-                          name: { de: "Artikelbild links (volle Höhe)", en: "Article picture left (full height)" },
-                      }
-                    - {
-                          id: "after-teaser",
-                          name:
-                              {
-                                  de: "Artikelbild unter Teaser (volle Breite)",
-                                  en: "Article picture under teaser (full width)",
-                              },
-                      }
-                    - { id: "top-left", name: { de: "Artikelbild oben links", en: "Article picture above left" } }
-                    - { id: "top-right", name: { de: "Artikelbild oben rechts", en: "Article picture above right" } }
-                    - { id: "bottom-left", name: { de: "Artikelbild unten links", en: "Article picture below left" } }
-                    - {
-                          id: "bottom-right",
-                          name: { de: "Artikelbild unten rechts", en: "Article picture below right" },
-                      }
-          - name: margin
-            type: object
-            meta:
-                label: { de: "Abstand nach außen (Margin)", en: "Distance to the outside (Margin)" }
-            subFields:
-                - name: top
-                  type: string
-                  meta:
-                      widget: select
-                      label:
-                          de: Oben
-                          en: Top
-                      choices:
-                          - { id: "", name: "Kein Abstand" }
-                          - { id: "mt-xs", name: "Sehr kleiner Abstand" }
-                          - { id: "mt-sm", name: "Kleiner Abstand" }
-                          - { id: "mt-md", name: "Normal" }
-                          - { id: "mt-lg", name: "Großer Abstand" }
-                          - { id: "mt-xl", name: "Sehr großer Abstand" }
-                - name: right
-                  type: string
-                  meta:
-                      widget: select
-                      label:
-                          de: Rechts
-                          en: Right
-                      choices:
-                          - { id: "", name: "Kein Abstand" }
-                          - { id: "mr-xs", name: "Sehr kleiner Abstand" }
-                          - { id: "mr-sm", name: "Kleiner Abstand" }
-                          - { id: "mr-md", name: "Normal" }
-                          - { id: "mr-lg", name: "Großer Abstand" }
-                          - { id: "mr-xl", name: "Sehr großer Abstand" }
-                - name: bottom
-                  type: string
-                  meta:
-                      widget: select
-                      label:
-                          de: Unten
-                          en: Bottom
-                      choices:
-                          - { id: "", name: "Kein Abstand" }
-                          - { id: "mb-xs", name: "Sehr kleiner Abstand" }
-                          - { id: "mb-sm", name: "Kleiner Abstand" }
-                          - { id: "mb-md", name: "Normal" }
-                          - { id: "mb-lg", name: "Großer Abstand" }
-                          - { id: "mb-xl", name: "Sehr großer Abstand" }
-                - name: left
-                  type: string
-                  meta:
-                      widget: select
-                      label:
-                          de: Links
-                          en: Left
-                      choices:
-                          - { id: "", name: "Kein Abstand" }
-                          - { id: "ml-xs", name: "Sehr kleiner Abstand" }
-                          - { id: "ml-sm", name: "Kleiner Abstand" }
-                          - { id: "ml-md", name: "Normal" }
-                          - { id: "ml-lg", name: "Großer Abstand" }
-                          - { id: "ml-xl", name: "Sehr großer Abstand" }
-          - name: padding
-            type: object
-            meta:
-                label: { de: "Abstand nach innen (Padding)", en: "Distance inside (Padding)" }
-            subFields:
-                - name: top
-                  type: string
-                  meta:
-                      widget: select
-                      label:
-                          de: Oben
-                          en: Top
-                      choices:
-                          - { id: "", name: "Kein Abstand" }
-                          - { id: "pt-xs", name: "Sehr kleiner Abstand" }
-                          - { id: "pt-sm", name: "Kleiner Abstand" }
-                          - { id: "pt-md", name: "Normal" }
-                          - { id: "pt-lg", name: "Großer Abstand" }
-                          - { id: "pt-xl", name: "Sehr großer Abstand" }
-                - name: right
-                  type: string
-                  meta:
-                      widget: select
-                      label:
-                          de: Rechts
-                          en: Right
-                      choices:
-                          - { id: "", name: "Kein Abstand" }
-                          - { id: "pr-xs", name: "Sehr kleiner Abstand" }
-                          - { id: "pr-sm", name: "Kleiner Abstand" }
-                          - { id: "pr-md", name: "Normal" }
-                          - { id: "pr-lg", name: "Großer Abstand" }
-                          - { id: "pr-xl", name: "Sehr großer Abstand" }
-                - name: bottom
-                  type: string
-                  meta:
-                      widget: select
-                      label:
-                          de: Unten
-                          en: Bottom
-                      choices:
-                          - { id: "", name: "Kein Abstand" }
-                          - { id: "pb-xs", name: "Sehr kleiner Abstand" }
-                          - { id: "pb-sm", name: "Kleiner Abstand" }
-                          - { id: "pb-md", name: "Normal" }
-                          - { id: "pb-lg", name: "Großer Abstand" }
-                          - { id: "pb-xl", name: "Sehr großer Abstand" }
-                - name: left
-                  type: string
-                  meta:
-                      widget: select
-                      label:
-                          de: Links
-                          en: Left
-                      choices:
-                          - { id: "", name: "Kein Abstand" }
-                          - { id: "pl-xs", name: "Sehr kleiner Abstand" }
-                          - { id: "pl-sm", name: "Kleiner Abstand" }
-                          - { id: "pl-md", name: "Normal" }
-                          - { id: "pl-lg", name: "Großer Abstand" }
-                          - { id: "pl-xl", name: "Sehr großer Abstand" }
-    - name: link
-      type: object
-      meta:
-          label:
-              de: Verlinkung
-              en: Link
-          css:
-      subFields:
-          - name: url
-            type: string
-            meta:
-                label: { de: "Ziel-URL", en: "Target URL" }
-          - name: text
-            type: string
-            meta:
-                label: { de: "Link-Beschriftung", en: "Link-Text" }
-          - name: target
-            type: string
-            meta:
-                widget: select
-                label:
-                    de: Zielfenster
-                    en: Target
-                defaultValue: ["_self"]
-                choices:
-                    - { id: "_self", name: "(Standardwert) gleicher Tab oder Seite" }
-                    - { id: "_blank", name: "Neuer Tab oder Fenster" }
-                    - { id: "_parent", name: "Elternfenster" }
diff --git a/api/collections/content.yml b/api/collections/content.yml
index 22a1884..93a9aa7 100644
--- a/api/collections/content.yml
+++ b/api/collections/content.yml
@@ -9,7 +9,7 @@ uploadPath: ../media/content
 # Metaangaben zur Kollektion welche in der Admin-UI verwendet werden können
 meta:
     # Navigationseintrag in der Admin-UI
-    label: { de: "Seiteninhalt", en: "Page Content" }
+    label: { de: "Seiten", en: "Pages" }
     # Icon (Material UI) für den Navigationseintrag
     muiIcon: web
     # Identifizierung eines Eintrags für z.B. Select-Boxen in der Admin-UI
@@ -24,11 +24,13 @@ meta:
           mediaQuery: "(max-width:599px)"
           primaryText: path
           columns:
+              - name
               - path
         # Desktop
         - type: table
           mediaQuery: "(min-width:600px)"
           columns:
+              - name
               - path
 
 imageFilter:
diff --git a/api/collections/email.yml b/api/collections/email.yml
new file mode 100644
index 0000000..60e3912
--- /dev/null
+++ b/api/collections/email.yml
@@ -0,0 +1,75 @@
+########################################################################
+# email
+########################################################################
+
+name: email
+uploadPath: ../media/email
+meta:
+    label: { de: "Kontaktformular", en: "Contact Form" }
+    muiIcon: email
+    rowIdentTpl: { twig: "{{ email }} - {{ subject }}" }
+    views:
+        - type: simpleList
+          mediaQuery: "(max-width: 600px)"
+          primaryText: email
+          secondaryText: subject
+          tertiaryText: insertTime
+        - type: table
+          columns:
+              - insertTime
+              - email
+              - subject
+
+# Zugriff auf diese Kollektion
+permissions:
+    # öffentlicher Zugriff
+    public:
+        methods:
+            # Liste und Einzeleinträge lesen
+            # checked via hook
+            get: false
+            # neuen Eintrag anlegen
+            post: true
+            # Eintrag editieren
+            put: false
+            # Eintrag löschen
+            delete: false
+    # zum Projekt zugeordneter Benutzer ohne Zusatzberechtigungen
+    user:
+        methods:
+            get: false
+            post: false
+            put: false
+            delete: false
+    # token als Zusatzsicherung gegen Spam, mehr siehe Hook
+    "token:${PUBLIC_TOKEN}":
+        methods:
+            get: false
+            post: true
+            put: false
+            delete: false
+
+hooks:
+    post:
+        create:
+            type: javascript
+            file: hooks/email/post_create.js
+
+fields:
+    - name: name
+      type: string
+      meta:
+          label: { de: "Name", en: "Name" }
+    - name: email
+      type: string
+      meta:
+          label: { de: "Email", en: "Email" }
+    - name: subject
+      type: string
+      meta:
+          label: { de: "Betreff", en: "Subject" }
+    - name: message
+      type: string
+      meta:
+          widget: richtext
+          label: { de: "Nachricht", en: "Message" }
diff --git a/api/collections/fields/_locale.yml b/api/collections/fields/_locale.yml
index 6e07688..c7b6929 100644
--- a/api/collections/fields/_locale.yml
+++ b/api/collections/fields/_locale.yml
@@ -9,7 +9,7 @@ meta:
             en: "Defines in which language the menu is available. The default language is 'de-DE'.",
         }
     filter: true
-    defaultValue: "de-DE"
+    defaultValue: "de"
     choices:
         - { id: af, name: { key: "labels.locales.af" } }
         - { id: af-ZA, name: { key: "labels.locales.af-ZA" } }
diff --git a/api/collections/general.yml b/api/collections/general.yml
index 3ed6ff2..47c8c9f 100644
--- a/api/collections/general.yml
+++ b/api/collections/general.yml
@@ -37,25 +37,219 @@ meta:
     entryViewFields:
         tabsSection:
             meta:
-                expand: general
+                expand: meta
             tabs:
                 - name: general
                   meta:
                       label: { de: "Allgemein", en: "General" }
-                      source: generalInformation
-                - name: general2
-                  meta:
-                      label: { de: "Allgemein2", en: "General2  " }
                   fields:
                       - name: public
                         type: boolean
                         meta:
+                            defaultValue: true
                             label:
                                 de: Veröffentlicht
                                 en: Public
                             helperText:
                                 de: "Alle allgemeinen Informationen werden auf der Seite angezeigt."
                                 en: "All general information are displayed on the page."
+                - name: meta
+                  meta:
+                      label: { de: "Meta", en: "Meta" }
+                  fields:
+                      - name: meta
+                        type: object
+                        subFields:
+                            - name: metaTitle
+                              type: string
+                              meta:
+                                  label: { de: "Titel der Webseite", en: "Page Title" }
+                            - name: metaDescription
+                              type: string
+                              meta:
+                                  label: { de: "Beschreibung der Webseite", en: "Page Description" }
+                            - name: metaTagRobots
+                              type: string[]
+                              meta:
+                                  widget: chipArray
+                                  label:
+                                      de: Robots
+                                      en: Robots
+                                  defaultValue: []
+                                  autocomplete: true
+                                  choices:
+                                      - { id: "noindex", name: "noindex" }
+                                      - { id: "index", name: "index" }
+                                      - { id: "follow", name: "follow" }
+                                      - { id: "nofollow", name: "nofollow" }
+                                      - { id: "noimageindex", name: "noimageindex" }
+                                      - { id: "none", name: "none" }
+                                      - { id: "noarchive", name: "noarchive" }
+                                      - { id: "nocache", name: "nocache" }
+                                      - { id: "nosnippet", name: "nosnippet" }
+                                      - { id: "nnavailable_after", name: "nnavailable_after" }
+                                  helperText:
+                                      de: "<strong>Noindex</strong>: Weist eine Suchmaschine an, eine Seite nicht zu indizieren.<br/><strong>index</strong>: Weist eine Suchmaschine an, eine Seite zu indizieren. Beachten Sie, dass Sie dieses Meta-Tag nicht hinzufügen müssen; es ist die Voreinstellung.<br/><strong>follow</strong>: Auch wenn die Seite nicht indexiert ist, sollte der Crawler allen Links auf einer Seite folgen und Eigenkapital an die verlinkten Seiten weitergeben.<br/><strong>nofollow</strong>: Weist einen Crawler an, keinen Links auf einer Seite zu folgen oder Link-Equity weiterzugeben.<br/><strong>noimageindex</strong>: Weist einen Crawler an, keine Bilder auf einer Seite zu indizieren.<br/><strong>none</strong>: Entspricht der gleichzeitigen Verwendung der noindex- und nofollow-Tags.<br/><strong>noarchive</strong>: Suchmaschinen sollten keinen zwischengespeicherten Link zu dieser Seite auf einem SERP anzeigen.<br/><strong>nocache</strong>: Wie noarchive, aber nur von Internet Explorer und Firefox verwendet.<br/><strong>nosnippet</strong>: Weist eine Suchmaschine an, kein Snippet dieser Seite (d. h. Meta-Beschreibung) dieser Seite auf einem SERP anzuzeigen.<br/><strong>nnavailable_after</strong>: Suchmaschinen sollen diese Seite nach einem bestimmten Datum nicht mehr indexieren.<br/>"
+                                      en: "<strong>Noindex</strong>: Tells a search engine not to index a page.<br/><strong>index</strong>: Tells a search engine to index a page. Note that you don’t need to add this meta tag; it’s the default.<br/><strong>follow</strong>: Even if the page isn’t indexed, the crawler should follow all the links on a page and pass equity to the linked pages.<br/><strong>nofollow</strong>: Tells a crawler not to follow any links on a page or pass along any link equity.<br/><strong>noimageindex</strong>: Tells a crawler not to index any images on a page.<br/><strong>none</strong>: Equivalent to using both the noindex and nofollow tags simultaneously.<br/><strong>noarchive</strong>: Search engines should not show a cached link to this page on a SERP.<br/><strong>nocache</strong>: Same as noarchive, but only used by Internet Explorer and Firefox.<br/><strong>nosnippet</strong>: Tells a search engine not to show a snippet of this page (i.e. meta description) of this page on a SERP.<br/><strong>nnavailable_after</strong>: Search engines should no longer index this page after a particular date.<br/>"
+                            - name: metaKeywords
+                              type: string
+                              meta:
+                                  label: { de: "SEO / Schlüsselwörter", en: "SEO / Keywords" }
+                                  helperText:
+                                      de: "Beispiel: Stichwort1, Stichwort2, Stichwort3"
+                                      en: "Example: keyword1, keyword2, keyword3"
+                - name: person
+                  meta:
+                      label: { de: "Person", en: "Person" }
+                  fields:
+                      - name: person
+                        type: object
+                        subFields:
+                            - name: salutation
+                              type: string
+                              meta:
+                                  label: { de: "Anrede", en: "Salutation" }
+                            - name: firstname
+                              type: string
+                              meta:
+                                  label: { de: "Vorname", en: "Firstname" }
+                            - name: lastname
+                              type: string
+                              meta:
+                                  label: { de: "Nachname", en: "Lastname" }
+                            - name: additional
+                              type: string
+                              meta:
+                                  label: { de: "Zusatz", en: "Additional" }
+                            - name: street
+                              type: string
+                              meta:
+                                  label: { de: "Straße", en: "Street" }
+                            - name: postcode
+                              type: string
+                              meta:
+                                  label: { de: "Postleitzahl", en: "Postcode" }
+                            - name: city
+                              type: string
+                              meta:
+                                  label: { de: "Ort", en: "City" }
+                            - name: tel
+                              type: string
+                              meta:
+                                  label: { de: "Telefonnummer", en: "Phone number" }
+                            - name: fax
+                              type: string
+                              meta:
+                                  label: { de: "Faxnummer", en: "Fax number" }
+                            - name: mobile
+                              type: string
+                              meta:
+                                  label: { de: "Handynummer", en: "Mobile number" }
+                            - name: email
+                              type: string
+                              meta:
+                                  label: { de: "E-Mail", en: "E-Mail" }
+                - name: company
+                  meta:
+                      label: { de: "Unternehmen", en: "Company" }
+                  fields:
+                      - name: person
+                        type: object
+                        subFields:
+                            - name: companyName
+                              type: string
+                              meta:
+                                  label: { de: "Name des Unternehmens", en: "Company Name" }
+                            - name: companyWebUrl
+                              type: string
+                              meta:
+                                  label: { de: "URL zur Webseite", en: "Website URL" }
+                            - name: companyAddresses
+                              type: object[]
+                              meta:
+                                  label:
+                                      de: Adresse
+                                      en: Adresse
+                                  css:
+                              subFields:
+                                  - name: street
+                                    type: string
+                                    meta:
+                                        label: { de: "Straße", en: "Street" }
+                                  - name: houseNr
+                                    type: string
+                                    meta:
+                                        label: { de: "Hausnummer", en: "House number" }
+                                  - name: postcode
+                                    type: string
+                                    meta:
+                                        label: { de: "PLZ", en: "ZIP" }
+                                  - name: city
+                                    type: string
+                                    meta:
+                                        label: { de: "Ort", en: "City" }
+                                  - name: tel
+                                    type: string
+                                    meta:
+                                        label: { de: "Telefon", en: "Phone number" }
+                                  - name: fax
+                                    type: string
+                                    meta:
+                                        label: { de: "Fax", en: "Fax" }
+                                  - name: email
+                                    type: string
+                                    meta:
+                                        label: { de: "E-Mail", en: "E-Mail" }
+                - name: media
+                  meta:
+                      label: { de: "Medien", en: "Media" }
+                  fields:
+                      - name: media
+                        type: object
+                        subFields:
+                            - name: favicon
+                              type: file
+                              meta:
+                                  label: { de: "Favicon", en: "Favicon" }
+                                  helperText:
+                                      de: "Ein Favicon ist ein kleines Icon, Symbol oder Logo, das von Webbrowsern verwendet wird, um eine Website auf wiedererkennbare Weise zu kennzeichnen."
+                                      en: "A favicon is a small icon, symbol, or logo used by web browsers to identify a website in a recognizable way."
+                            - name: brand
+                              type: file
+                              meta:
+                                  label: { de: "Logo / Brand", en: "Logo / Brand" }
+                                  helperText:
+                                      de: "Logo der Seite"
+                                      en: "Page Logo"
+                            - name: mediaFiles
+                              type: object[]
+                              meta:
+                                  label: { de: "Dateien", en: "Files" }
+                              subFields:
+                                  - name: title
+                                    type: string
+                                    meta:
+                                        label: { de: "Datei-Titel", en: "File Title" }
+                                  - name: alternateText
+                                    type: string
+                                    meta:
+                                        label: { de: "Alternativer Text", en: "Alternate Text" }
+                                  - name: id
+                                    type: string
+                                    meta:
+                                        label: { de: "Technischer Name / ID", en: "Technical name / ID" }
+                                  - name: file
+                                    type: file
+                                    meta:
+                                        label: { de: "", en: "" }
+                - name: copyright
+                  meta:
+                      label: { de: "Copyright", en: "Copyright" }
+                  fields:
+                      - name: copyrightText
+                        type: string
+                        meta:
+                            label: { de: "Copyright Text", en: "Copyright Text" }
 
 imageFilter:
     xs:
@@ -110,231 +304,4 @@ permissions:
             put: false
             delete: false
 
-fields:
-    - name: public
-      type: boolean
-      meta:
-          label:
-              de: Veröffentlicht
-              en: Public
-          helperText:
-              de: "Alle allgemeinen Informationen werden auf der Seite angezeigt."
-              en: "All general information are displayed on the page."
-    - name: generalInformation
-      type: tabs
-      meta:
-          label:
-              de: Allgemeine Information
-              en: General Information
-          activeTab: 0
-      subFields:
-          - name: types
-            type: object
-            meta:
-                label:
-                    de: Allgemein
-                    en: General
-                css:
-            subFields:
-                - name: public
-                  type: boolean
-                  meta:
-                      label:
-                          de: Veröffentlicht
-                          en: Public
-                      helperText:
-                          de: "Alle allgemeinen Informationen werden auf der Seite angezeigt."
-                          en: "All general information are displayed on the page."
-          - name: meta
-            type: object
-            meta:
-                label:
-                    de: Meta
-                    en: Meta
-                css:
-            subFields:
-                - name: metaTitle
-                  type: string
-                  meta:
-                      label: { de: "Titel der Webseite", en: "Page Title" }
-                - name: metaDescription
-                  type: string
-                  meta:
-                      label: { de: "Beschreibung der Webseite", en: "Page Description" }
-                - name: metaTagRobots
-                  type: string[]
-                  meta:
-                      widget: chipArray
-                      label:
-                          de: Robots
-                          en: Robots
-                      defaultValue: []
-                      autocomplete: true
-                      choices:
-                          - { id: "noindex", name: "noindex" }
-                          - { id: "index", name: "index" }
-                          - { id: "follow", name: "follow" }
-                          - { id: "nofollow", name: "nofollow" }
-                          - { id: "noimageindex", name: "noimageindex" }
-                          - { id: "none", name: "none" }
-                          - { id: "noarchive", name: "noarchive" }
-                          - { id: "nocache", name: "nocache" }
-                          - { id: "nosnippet", name: "nosnippet" }
-                          - { id: "nnavailable_after", name: "nnavailable_after" }
-                      helperText:
-                          de: "<strong>Noindex</strong>: Weist eine Suchmaschine an, eine Seite nicht zu indizieren.<br/><strong>index</strong>: Weist eine Suchmaschine an, eine Seite zu indizieren. Beachten Sie, dass Sie dieses Meta-Tag nicht hinzufügen müssen; es ist die Voreinstellung.<br/><strong>follow</strong>: Auch wenn die Seite nicht indexiert ist, sollte der Crawler allen Links auf einer Seite folgen und Eigenkapital an die verlinkten Seiten weitergeben.<br/><strong>nofollow</strong>: Weist einen Crawler an, keinen Links auf einer Seite zu folgen oder Link-Equity weiterzugeben.<br/><strong>noimageindex</strong>: Weist einen Crawler an, keine Bilder auf einer Seite zu indizieren.<br/><strong>none</strong>: Entspricht der gleichzeitigen Verwendung der noindex- und nofollow-Tags.<br/><strong>noarchive</strong>: Suchmaschinen sollten keinen zwischengespeicherten Link zu dieser Seite auf einem SERP anzeigen.<br/><strong>nocache</strong>: Wie noarchive, aber nur von Internet Explorer und Firefox verwendet.<br/><strong>nosnippet</strong>: Weist eine Suchmaschine an, kein Snippet dieser Seite (d. h. Meta-Beschreibung) dieser Seite auf einem SERP anzuzeigen.<br/><strong>nnavailable_after</strong>: Suchmaschinen sollen diese Seite nach einem bestimmten Datum nicht mehr indexieren.<br/>"
-                          en: "<strong>Noindex</strong>: Tells a search engine not to index a page.<br/><strong>index</strong>: Tells a search engine to index a page. Note that you don’t need to add this meta tag; it’s the default.<br/><strong>follow</strong>: Even if the page isn’t indexed, the crawler should follow all the links on a page and pass equity to the linked pages.<br/><strong>nofollow</strong>: Tells a crawler not to follow any links on a page or pass along any link equity.<br/><strong>noimageindex</strong>: Tells a crawler not to index any images on a page.<br/><strong>none</strong>: Equivalent to using both the noindex and nofollow tags simultaneously.<br/><strong>noarchive</strong>: Search engines should not show a cached link to this page on a SERP.<br/><strong>nocache</strong>: Same as noarchive, but only used by Internet Explorer and Firefox.<br/><strong>nosnippet</strong>: Tells a search engine not to show a snippet of this page (i.e. meta description) of this page on a SERP.<br/><strong>nnavailable_after</strong>: Search engines should no longer index this page after a particular date.<br/>"
-                - name: metaKeywords
-                  type: string
-                  meta:
-                      label: { de: "SEO / Schlüsselwörter", en: "SEO / Keywords" }
-                      helperText:
-                          de: "Beispiel: Stichwort1, Stichwort2, Stichwort3"
-                          en: "Example: keyword1, keyword2, keyword3"
-          - name: person
-            type: object
-            meta:
-                label:
-                    de: Personendaten
-                    en: Personal Data
-                css:
-            subFields:
-                - name: firstname
-                  type: string
-                  meta:
-                      label: { de: "Vorname", en: "Firstname" }
-                - name: lastname
-                  type: string
-                  meta:
-                      label: { de: "Nachname", en: "Lastname" }
-                - name: street
-                  type: string
-                  meta:
-                      label: { de: "Straße", en: "Street" }
-                - name: postcode
-                  type: string
-                  meta:
-                      label: { de: "Postleitzahl", en: "Postcode" }
-                - name: city
-                  type: string
-                  meta:
-                      label: { de: "Ort", en: "City" }
-                - name: tel
-                  type: string
-                  meta:
-                      label: { de: "Telefonnummer", en: "Phone number" }
-                - name: mobile
-                  type: string
-                  meta:
-                      label: { de: "Handynummer", en: "Mobile number" }
-                - name: email
-                  type: string
-                  meta:
-                      label: { de: "E-Mail", en: "E-Mail" }
-          - name: company
-            type: object
-            meta:
-                label:
-                    de: Unternehmensdaten
-                    en: Company Data
-                css:
-            subFields:
-                - name: companyName
-                  type: string
-                  meta:
-                      label: { de: "Name des Unternehmens", en: "Company Name" }
-                - name: companyWebUrl
-                  type: string
-                  meta:
-                      label: { de: "URL zur Webseite", en: "Website URL" }
-                - name: companyAddresses
-                  type: object[]
-                  meta:
-                      label:
-                          de: Adresse
-                          en: Adresse
-                      css:
-                  subFields:
-                      - name: street
-                        type: string
-                        meta:
-                            label: { de: "Straße", en: "Street" }
-                      - name: houseNr
-                        type: string
-                        meta:
-                            label: { de: "Hausnummer", en: "House number" }
-                      - name: postcode
-                        type: string
-                        meta:
-                            label: { de: "PLZ", en: "ZIP" }
-                      - name: city
-                        type: string
-                        meta:
-                            label: { de: "Ort", en: "City" }
-                      - name: tel
-                        type: string
-                        meta:
-                            label: { de: "Telefon", en: "Phone number" }
-                      - name: fax
-                        type: string
-                        meta:
-                            label: { de: "Fax", en: "Fax" }
-                      - name: email
-                        type: string
-                        meta:
-                            label: { de: "E-Mail", en: "E-Mail" }
-          - name: media
-            type: object
-            meta:
-                label:
-                    de: Media
-                    en: Media
-                css:
-            subFields:
-                - name: favicon
-                  type: file
-                  meta:
-                      label: { de: "Favicon", en: "Favicon" }
-                      helperText:
-                          de: "Ein Favicon ist ein kleines Icon, Symbol oder Logo, das von Webbrowsern verwendet wird, um eine Website auf wiedererkennbare Weise zu kennzeichnen."
-                          en: "A favicon is a small icon, symbol, or logo used by web browsers to identify a website in a recognizable way."
-                - name: brand
-                  type: file
-                  meta:
-                      label: { de: "Logo / Brand", en: "Logo / Brand" }
-                      helperText:
-                          de: "Logo der Seite"
-                          en: "Page Logo"
-                - name: mediaFiles
-                  type: object[]
-                  meta:
-                      label: { de: "Dateien", en: "Files" }
-                  subFields:
-                      - name: title
-                        type: string
-                        meta:
-                            label: { de: "Datei-Titel", en: "File Title" }
-                      - name: alternateText
-                        type: string
-                        meta:
-                            label: { de: "Alternativer Text", en: "Alternate Text" }
-                      - name: id
-                        type: string
-                        meta:
-                            label: { de: "Technischer Name / ID", en: "Technical name / ID" }
-                      - name: file
-                        type: file
-                        meta:
-                            label: { de: "", en: "" }
-          - name: copyright
-            type: object
-            meta:
-                label:
-                    de: Copyright
-                    en: Copyright
-                css:
-            subFields:
-                - name: copyrightText
-                  type: string
-                  meta:
-                      label: { de: "Copyright Text", en: "Copyright Text" }
+fields: []
diff --git a/api/collections/navigation.yml b/api/collections/navigation.yml
index ab6d371..bc69477 100644
--- a/api/collections/navigation.yml
+++ b/api/collections/navigation.yml
@@ -104,15 +104,15 @@ x-settings: &settings
 
 x-page: &page
     name: page
-    type: string
+    type: object
     meta:
         widget: select
         label: { de: Seite, en: "Page" }
         choices:
             endpoint: "content"
             mapping:
-                id: "id"
-                name: "path"
+                id: "path"
+                name: "name"
             params:
                 count: 1
                 sort: "ASC"
@@ -170,10 +170,10 @@ fields:
                 name:
                     de: Hauptnavigation
                     en: Main Navigation
-              - id: service
+              - id: footer
                 name:
-                    de: Servicenavigation
-                    en: Servicen Navigation
+                    de: Fußzeile
+                    en: Footer Navigation
 
     - !include fields/_locale.yml
 
diff --git a/package.json b/package.json
index 00d279c..895aa45 100644
--- a/package.json
+++ b/package.json
@@ -49,9 +49,11 @@
         "typescript": "^4.6.3"
     },
     "dependencies": {
+        "@mdi/js": "^6.7.96",
         "@sentry/browser": "^6.19.6",
         "@sentry/tracing": "^6.19.6",
-        "core-js": "3.22.2"
+        "core-js": "3.22.2",
+        "mdi-svelte": "^1.1.2"
     },
     "optionalDependencies": {
         "@cypress/code-coverage": "^3.9.12",
diff --git a/public/spa.html b/public/spa.html
index 1598de3..55c51ac 100644
--- a/public/spa.html
+++ b/public/spa.html
@@ -49,6 +49,17 @@
         <div id="appContainer"><!--HTML--></div>
         <script type="module" src="/_dist_/index.mjs?t=__TIMESTAMP__"></script>
         <script nomodule src="/_dist_/index.es5.js?t=__TIMESTAMP__"></script>
+
+        <!-- Webmakers - Cookie Bar -->
+        <script
+            src="//cc.webmakers.de/cc.js"
+            defer
+            id="ccScript"
+            data-cc-tags="googleMaps"
+            data-cc-privacy-policy-url="/datenschutz"
+            data-cc-secondary-color="#c4253e"
+            data-cc-necessary-cookies="likecmsSession"
+        ></script>
     </body>
 
     <!--SSR.ERROR-->
diff --git a/src/api.ts b/src/api.ts
index cde7833..977ef7f 100644
--- a/src/api.ts
+++ b/src/api.ts
@@ -1,6 +1,7 @@
 import { apiBaseURL } from "./config"
 import * as sentry from "./sentry"
 import * as SSR from "../api/hooks/lib/ssr.js"
+import config from "../api/hooks/config"
 
 // [MIT License](LICENSE.md) © [Jason Miller](https://jasonformat.com/)
 const _f = function (url, options): Promise<Response> {
@@ -74,9 +75,12 @@ export const api = async <T>(
         headers?: {
             [key: string]: string
         }
-        params?: {
-            [key: string]: string
-        }
+        params?: APIParams
+        body?: any
+        noToken?: boolean
+        signal?: AbortSignal
+        _groupBy?: string
+        showErrors?: boolean
     }
 ): Promise<{ data: T; count: number }> => {
     if (typeof window === "undefined") {
@@ -98,6 +102,7 @@ export const api = async <T>(
     }
 
     let method = "GET"
+    if (options?.method) method = options.method.toUpperCase()
 
     let query = "&count=1"
     if (options?.filter) query += "&filter=" + encodeURIComponent(JSON.stringify(options.filter))
@@ -105,6 +110,7 @@ export const api = async <T>(
     if (options?.limit) query += "&limit=" + options.limit
     if (options?.offset) query += "&offset=" + options.offset
     if (options?.projection) query += "&projection=" + options.projection
+    if (options?._groupBy) query += "&_groupBy=" + options._groupBy
 
     if (options?.params) {
         Object.keys(options.params).forEach((p) => {
@@ -116,9 +122,17 @@ export const api = async <T>(
         "Content-Type": "application/json",
     }
 
+    // send jwt
+    if (!options?.noToken) {
+        // try {
+        //     headers["Authorization"] =
+        //         "Bearer " + (await getLogin()).tokenString
+        // } catch (e) { }
+    }
+
     if (options?.headers) headers = { ...headers, ...options.headers }
 
-    let url = apiBaseURL + endpoint + (query ? "?" + query : "")
+    let url = apiBaseURL + endpoint + (query ? (endpoint.includes("?") ? query : "?" + query) : "")
 
     const span = sentry.currentTransaction()?.startChild({
         op: "fetch",
@@ -130,21 +144,46 @@ export const api = async <T>(
         headers["sentry-trace"] = trace_id
     }
 
-    const response = await _fetch(url, {
-        method,
-        mode: "cors",
-        headers,
+    try {
+        const response = await _fetch(url, {
+            method,
+            mode: "cors",
+            headers,
+            body: options?.body ? JSON.stringify(options.body) : null,
+            signal: options?.signal,
+        })
+
+        span?.finish()
+
+        // @ts-ignore
+        let data = (await response?.json()) || null
+
+        if (response?.status < 200 || response?.status >= 400) throw { response, data }
+
+        // @ts-ignore
+        return { data, count: response?.headers?.get("x-results-count") || 0 }
+    } catch (e) {
+        if (options?.showErrors && !(e instanceof DOMException)) {
+            // newNotification({
+            //     class: "error",
+            //     html: "Es ist ein Fehler aufgetreten! Bitte laden Sie die Seite neu und versuchen es später nocheinmal.",
+            //     timeout: 6000,
+            // })
+        }
+        throw e
+    }
+}
+
+export const sendEmail = async (type: string = "contactForm", data: any, noToken?: boolean) => {
+    await api("email?type=" + type, {
+        method: "post",
+        body: data,
+        noToken,
+        showErrors: true,
+        headers: {
+            token: config.publicToken,
+        },
     })
-
-    span?.finish()
-
-    // @ts-ignore
-    let data = (await response?.json()) || null
-
-    if (response?.status < 200 || response?.status >= 400) throw { response, data }
-
-    // @ts-ignore
-    return { data, count: response?.headers?.get("x-results-count") || 0 }
 }
 
 export const getContent = async (path: string): Promise<Content> => {
@@ -155,14 +194,14 @@ export const getContent = async (path: string): Promise<Content> => {
     return null
 }
 
-export const getGeneralInformation = async (): Promise<GeneralInformation[]> => {
+export const getGeneralInformation = async (): Promise<GeneralInfo[]> => {
     try {
-        let response = await api<GeneralInformation[]>("general", {
+        let response = await api<GeneralInfo[]>("general", {
             method: "get",
             offset: 0,
             limit: 1,
             filter: {
-                active: true,
+                public: true,
             },
         })
         return response.data
@@ -185,3 +224,38 @@ export const getArticles = async (): Promise<TibiArticle[]> => {
         return null
     }
 }
+
+export const getNavigations = async (l: Locale): Promise<Navigation[]> => {
+    try {
+        let response = await api<Navigation[]>("navigation", {
+            method: "get",
+            offset: 0,
+            filter: {
+                locale: l.key,
+            },
+        })
+        return response.data
+    } catch (e) {
+        return null
+    }
+}
+
+export const getGalleries = async (galIds: number[], params?: APIParams): Promise<Gallery[]> => {
+    try {
+        let response = await api<Gallery[]>("galleries", {
+            method: "get",
+            offset: 0,
+            params: {
+                sort: "title",
+                ...params,
+            },
+            filter: {
+                _id: { $in: galIds },
+            },
+        })
+
+        return response.data
+    } catch (e) {
+        return null
+    }
+}
diff --git a/src/components/App.svelte b/src/components/App.svelte
index 9d00d14..e21e0fb 100644
--- a/src/components/App.svelte
+++ b/src/components/App.svelte
@@ -1,9 +1,14 @@
 <script lang="ts">
-    import { Router, Route, links } from "svelte-routing"
+    import { Router, Route } from "svelte-routing"
     import { scrollToTop } from "svelte-scrollto"
     import { location } from "../store"
+
+    import Home from "./routes/Home.svelte"
     import Content from "./routes/Content.svelte"
 
+    import Header from "./widgets/Header.svelte"
+    import Footer from "./widgets/Footer.svelte"
+
     export let url = ""
     if (url) {
         // ssr
@@ -24,23 +29,21 @@
     if (typeof window !== "undefined") console.log("App initialized")
 </script>
 
-<style lang="less" global>
-    @import "./../css/main.less";
-    h1 {
-        color: red;
-    }
-</style>
+<Header />
 
-<h1>__PROJECT_TITLE__</h1>
-
-<div use:links>
-    <a href="/test1">1</a>
-    <a href="/test2">2</a>
-    <a href="/test3">3</a>
-    <a href="/test4">4</a>
+<div>
     <Router url="{url}">
+        <Route path="/" let:params>
+            <Home />
+        </Route>
         <Route path="/*path" let:params>
             <Content path="/{params.path}" />
         </Route>
     </Router>
 </div>
+
+<Footer />
+
+<style lang="less" global>
+    @import "./../css/main.less";
+</style>
diff --git a/src/components/ContentBlocks.svelte b/src/components/ContentBlocks.svelte
deleted file mode 100644
index 7f908db..0000000
--- a/src/components/ContentBlocks.svelte
+++ /dev/null
@@ -1,109 +0,0 @@
-<script lang="ts">
-    export let blocks: ContentBlock[]
-    export let imageBase: string
-
-    export let accordeon = false
-
-    let activeAccordeons: {
-        [key: number]: boolean
-    } = {}
-</script>
-
-<style lang="less">
-    .acc_trigger {
-        display: flex;
-        display: -webkit-flex;
-        align-items: center;
-        justify-content: space-between;
-        cursor: pointer;
-        border-bottom: solid 1px #ccc;
-        padding-bottom: 10px;
-        .icon {
-            display: flex;
-            display: -webkit-flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 30px;
-            transform: rotate(0deg);
-            transition: all 0.3s;
-        }
-        &.active {
-            .icon {
-                transform: rotate(180deg);
-            }
-        }
-    }
-
-    .hideText {
-        display: none;
-    }
-</style>
-
-{#if blocks?.length}
-    <section class="section_padding">
-        <div class="container">
-            {#each blocks as box, idx}
-                <!-- Teaserbox -->
-                <div class="row center_row">
-                    {#if box.images?.length && (box.layout == 1 || box.layout == 3)}
-                        <div class="col-md-{box.layout < 3 ? 6 : 12}">
-                            <img
-                                loading="lazy"
-                                src="{imageBase + box.images[0].file.src}"
-                                alt="{box.images[0].label || ''}"
-                            />
-                        </div>
-                    {/if}
-                    {#if box.text || box.title || (box.button_text && box.button_url)}
-                        <div class="col-md-{box.layout < 3 ? 6 : 12}">
-                            {#if box.subtitle}
-                                <div class="subline">{box.subtitle}</div>
-                            {/if}
-                            {#if box.title}
-                                {#if accordeon == true}
-                                    <h2
-                                        class="h2_nooffset acc_trigger"
-                                        class:active="{activeAccordeons[idx]}"
-                                        on:click="{() => {
-                                            activeAccordeons[idx] =
-                                                !activeAccordeons[idx]
-                                        }}"
-                                    >
-                                        {box.title}
-                                        <span class="icon">\/</span>
-                                    </h2>
-                                {:else}
-                                    <h2 class="h2_nooffset">{box.title}</h2>
-                                {/if}
-                            {/if}
-                            <div
-                                class="boxText"
-                                class:hideText="{accordeon &&
-                                    box.title &&
-                                    !activeAccordeons[idx]}"
-                            >
-                                {@html box.text}
-                                {#if box.button_text && box.button_url}
-                                    <a
-                                        href="{box.button_url}"
-                                        class="btn btn_blue"
-                                        >{box.button_text}</a
-                                    >
-                                {/if}
-                            </div>
-                        </div>
-                    {/if}
-                    {#if box.images?.length && (box.layout == 2 || box.layout == 4)}
-                        <div class="col-md-{box.layout < 3 ? 6 : 12}">
-                            <img
-                                loading="lazy"
-                                src="{imageBase + box.images[0].file.src}"
-                                alt="{box.images[0].label || ''}"
-                            />
-                        </div>
-                    {/if}
-                </div>
-            {/each}
-        </div>
-    </section>
-{/if}
diff --git a/src/components/PrototypeArticle.svelte b/src/components/PrototypeArticle.svelte
deleted file mode 100644
index eaf0886..0000000
--- a/src/components/PrototypeArticle.svelte
+++ /dev/null
@@ -1,95 +0,0 @@
-<script lang="ts">
-    import { generalInformation } from "../store"
-    import { apiBaseURL } from "../config"
-
-    export let article: PrototypeArticle
-    export let details: boolean = false
-
-    const a = article.article
-    let cssClasses: string = "p_article"
-
-    cssClasses += a.layout.variant ? " p_article-" + a.layout.variant : ""
-    cssClasses += " " + Object.values(a.layout.margin).join(" ")
-    cssClasses += " " + Object.values(a.layout.padding).join(" ")
-
-    const getImageAlt = (image): string => {
-        if (image.alternateText) {
-            return image.alternateText
-        }
-        if (image.title) {
-            return image.title
-        }
-
-        return a.content.title
-    }
-
-    const getImageSrc = (file) => {
-        const url = `${apiBaseURL}prototype_articles/${file.id}/${file.file.path}?filter=l`
-        console.log(url, file)
-        return url
-    }
-</script>
-
-{#if a.general.public}
-    <article class="{cssClasses}">
-        {#if !a.layout.variant || a.layout.variant === "top-left"}
-            {#if a.general.categories}
-                <div class="p_article-categories">
-                    {#each a.general.categories || [] as c}
-                        <span class="p_article-category">{c}</span>
-                    {/each}
-                </div>
-            {/if}
-            {#if a.content.types.contentMedia.mediaFiles}
-                <div class="p_article-images">
-                    {#each a.content.types.contentMedia.mediaFiles || [] as image}
-                        <!-- {JSON.stringify(image)} -->
-                        {#if image?.file?.path}
-                            {getImageSrc(image)}
-                            <!-- <img 
-                                src="{getImageSrc(image?.file)}" 
-                                id="{image?.id ? image?.id : ''}" 
-                                alt="{getImageAlt(image)}"
-                                class="p_article-image"
-                            /> -->
-                        {/if}
-                        {#if image?.caption}
-                            <div class="p_article-image-caption">{image?.caption}</div>
-                        {/if}
-                    {/each}
-                </div>
-            {/if}
-
-            {#if a.content.title}
-                <div class="p_article-title">{a.content.title}</div>
-            {/if}
-            {#if a.content.subtitle}
-                <div class="p_article-subtitle">{a.content.subtitle}</div>
-            {/if}
-            {#if a.content.types.teaser}
-                <div class="p_article-teaser">
-                    {@html a.content.types.teaser}
-                </div>
-            {/if}
-            {#if details && a.content.types.details}
-                <div class="p_article-details">
-                    {@html a.content.types.details}
-                </div>
-            {/if}
-            {#if a.link.url}
-                <a href="{a.link.url}" target="{a.link.target}">
-                    {a.link.text ? a.link.text : a.link.url}
-                </a>
-            {/if}
-            {#if a.content.types.contentAttachments.attachments}
-                <div class="p_article-attachments">
-                    {#each a.content.types.contentAttachments.attachments || [] as attachment}
-                        <a href="{attachment.file.src}" download="{attachment.file.path}" class="p_article-attachment">
-                            {attachment.title ? attachment.title : attachment.file.path}
-                        </a>
-                    {/each}
-                </div>
-            {/if}
-        {/if}
-    </article>
-{/if}
diff --git a/src/components/routes/Content.svelte b/src/components/routes/Content.svelte
index 238e183..e0645d9 100644
--- a/src/components/routes/Content.svelte
+++ b/src/components/routes/Content.svelte
@@ -1,7 +1,49 @@
 <script lang="ts">
+    import { getContent } from "../../api"
+    // import { apiBaseURL } from "../../config"
+    import { generalInfo } from "../../store"
+
     export let path: string
 
-    console.log("Content: ", path)
+    let loading = true
+    let content: Content
+
+    function load() {
+        loading = true
+        getContent(path)
+            .then((c) => {
+                content = c
+            })
+            .finally(() => {
+                loading = false
+            })
+    }
+
+    $: if (path) load()
 </script>
 
-<h2>{path}</h2>
+<svelte:head>
+    <title>{content?.name ? content?.name + " - " : ""}{$generalInfo?.meta?.metaTitle}</title>
+    <meta name="description" content="{$generalInfo?.meta?.metaDescription}" />
+    <meta name="keywords" content="{$generalInfo?.meta?.metaKeywords.replaceAll(' ', '')}" />
+    <meta name="author" content="{$generalInfo?.person?.firstname} {$generalInfo?.person?.lastname}" />
+    <meta name="robots" content="{$generalInfo?.meta?.metaTagRobots}" />
+</svelte:head>
+
+<div class="container">
+    <div class="row">
+        <div class="col-md-12">
+            {#if loading}
+                <!-- Loader -->
+            {:else if content}
+                {#each content.blocks || [] as b}
+                    <h2>{b.title}</h2>
+                    <div>{@html b.text}</div>
+                {/each}
+            {:else}
+                <h1>Seite nicht gefunden</h1>
+                <div>Pfad: {path}</div>
+            {/if}
+        </div>
+    </div>
+</div>
diff --git a/src/components/routes/Home.svelte b/src/components/routes/Home.svelte
new file mode 100644
index 0000000..162fda0
--- /dev/null
+++ b/src/components/routes/Home.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+    import * as animateScroll from "svelte-scrollto"
+
+    import { generalInfo } from "../../store"
+
+    import GoogleMaps from "../widgets/GoogleMaps.svelte"
+    import ScrollTo from "../widgets/ScrollTo.svelte"
+    import ContactForm from "../widgets/ContactForm.svelte"
+
+    let expandedForm: string = "recipe"
+</script>
+
+<svelte:head>
+    <title>{$generalInfo?.meta?.metaTitle}</title>
+    <meta name="description" content="{$generalInfo?.meta?.metaDescription}" />
+    <meta name="keywords" content="{$generalInfo?.meta?.metaKeywords.replaceAll(' ', '')}" />
+    <meta name="author" content="{$generalInfo?.person?.firstname} {$generalInfo?.person?.lastname}" />
+    <meta name="robots" content="{$generalInfo?.meta?.metaTagRobots}" />
+</svelte:head>
+
+<section class="contact">
+    <div class="container">
+        <div class="row nospace">
+            <div class="col-md-6">
+                <ContactForm type="recipe" collapsed="{expandedForm !== 'recipe'}" />
+            </div>
+            <div class="col-md-6">
+                <ContactForm type="contact" collapsed="{expandedForm !== 'contact'}" />
+            </div>
+        </div>
+    </div>
+</section>
+
+<section>
+    <GoogleMaps />
+</section>
+
+<ScrollTo
+    on:scrollTo="{(e) => {
+        expandedForm = null
+        animateScroll.scrollTo({
+            delay: 100,
+            element: '#' + e.detail.element,
+            offset: -200,
+            onDone: () => {
+                expandedForm = e.detail.element
+            },
+        })
+    }}"
+/>
diff --git a/src/components/routes/PrototypeArticles.svelte b/src/components/routes/PrototypeArticles.svelte
deleted file mode 100644
index b4ee197..0000000
--- a/src/components/routes/PrototypeArticles.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script lang="ts">
-    import { getPrototypeArticles } from "../../api"
-
-    import Sidebar from "../page/Sidebar.svelte"
-    import PrototypeArticle from "../page/PrototypeArticle.svelte"
-
-    let articles: PrototypeArticle[] | []
-
-    const getArticles = async () => {
-        articles = await getPrototypeArticles()
-    }
-    getArticles()
-    
-</script>
-
-<div class="container">
-    <div class="row">
-        <div class="col-md-10">
-            
-            <div>
-                {#each articles || [] as article}
-                    <PrototypeArticle article="{article}" />
-                {/each}
-            </div>
-
-        </div>
-        <div class="col-md-2">
-            <Sidebar />
-        </div>
-    </div>
-</div>
diff --git a/src/components/page/Article.svelte b/src/components/widgets/Article.svelte
similarity index 100%
rename from src/components/page/Article.svelte
rename to src/components/widgets/Article.svelte
diff --git a/src/components/widgets/ContactForm.svelte b/src/components/widgets/ContactForm.svelte
new file mode 100644
index 0000000..d1a69f4
--- /dev/null
+++ b/src/components/widgets/ContactForm.svelte
@@ -0,0 +1,160 @@
+<script lang="ts">
+    import { fade } from "svelte/transition"
+    import { mdiCheck, mdiChevronDown } from "@mdi/js"
+    import Icon from "mdi-svelte"
+
+    import { sendEmail } from "../../api"
+
+    export let type: string
+    export let collapsed: boolean = false
+
+    let formData: {
+        name: string
+        email: string
+        subject: string
+        message: string
+        privacy: boolean
+    } = {
+        name: null,
+        email: null,
+        subject: null,
+        message: null,
+        privacy: false,
+    }
+    let requestSucessfully: boolean = false
+    let requestPending: boolean = false
+
+    const submit = () => {
+        if (
+            formData["name"] &&
+            formData["email"] &&
+            formData["subject"] &&
+            formData["message"] &&
+            formData["privacy"]
+        ) {
+            requestPending = true
+            sendEmail(type + "Form", formData)
+                .then(() => {
+                    resetForm()
+                    requestSucessfully = true
+                    requestPending = false
+
+                    setTimeout(() => {
+                        requestSucessfully = false
+                    }, 10000)
+                })
+                .catch((e) => {
+                    console.error(e)
+                    requestPending = false
+                })
+                .finally(() => {
+                    requestPending = false
+                })
+        }
+    }
+
+    const resetForm = () => {
+        formData = {
+            name: null,
+            email: null,
+            subject: null,
+            message: null,
+            privacy: false,
+        }
+    }
+
+    $: isValid =
+        formData["name"] && formData["email"] && formData["subject"] && formData["message"] && formData["privacy"]
+</script>
+
+<div id="{type}">
+    <form on:submit|preventDefault="{submit}" class="mt-lg">
+        <div class="layout justify-content-space-between layout-gap-md">
+            <div class="hidden-sm icon {type}">
+                <!-- <img src="img/icon/{type}.svg" alt="" /> -->
+            </div>
+            <div class="titles" on:click="{() => (collapsed = !collapsed)}">
+                <h3 class="title">
+                    {type === "contact" ? "Kontakt" : ""}
+                    {type === "recipe" ? "Rezeptanfrage" : ""}
+                </h3>
+                <h4 class="subTitle">
+                    {type === "contact" ? "Schreiben Sie uns Ihr Anliegen" : ""}
+                    {type === "recipe" ? "Teilen Sie uns Ihren Rezeptwunsch mit" : ""}
+                </h4>
+            </div>
+            <div class="collapse-icon" class:collapsed="{!collapsed}" on:click="{() => (collapsed = !collapsed)}">
+                <Icon path="{mdiChevronDown}" size="2" />
+            </div>
+        </div>
+        {#if !collapsed}
+            <div>
+                <div class="row">
+                    <div class="col-md-6 mt-sm">
+                        <input
+                            type="text"
+                            bind:value="{formData['name']}"
+                            placeholder="Name"
+                            readonly="{requestPending}"
+                        />
+                    </div>
+                    <div class="col-md-6 mt-sm">
+                        <input
+                            type="text"
+                            bind:value="{formData['email']}"
+                            placeholder="E-Mail Adresse"
+                            readonly="{requestPending}"
+                        />
+                    </div>
+                </div>
+                <div class="row nospace">
+                    <div class="col-md-12 mt-sm">
+                        <input
+                            type="text"
+                            bind:value="{formData['subject']}"
+                            placeholder="Betreff"
+                            readonly="{requestPending}"
+                        />
+                    </div>
+                </div>
+                <div class="row nospace">
+                    <div class="col-md-12 mt-sm">
+                        <textarea bind:value="{formData['message']}" readonly="{requestPending}"></textarea>
+                    </div>
+                </div>
+                <div class="row nospace">
+                    <div class="col-md-12 mt-sm">
+                        <div class="layout layout-gap-md align-items-center">
+                            <div
+                                class="checkbox"
+                                on:click="{() => {
+                                    formData.privacy = !formData.privacy
+                                }}"
+                            >
+                                {#if formData.privacy}
+                                    <div class="icon">
+                                        <Icon path="{mdiCheck}" size="2" />
+                                    </div>
+                                {/if}
+                            </div>
+                            <div on:click="{() => (formData.privacy = !formData.privacy)}">
+                                <a href="/datenschutz"><strong>Datenschutz</strong></a> akzeptieren
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                {#if requestSucessfully}
+                    <div class="mt-sm" transition:fade>
+                        <div>
+                            <strong>Vielen Dank für Ihre Kontaktaufnahme!</strong>
+                        </div>
+                        <p>Wir werden uns zeitnah mit Ihnen in Verbindung setzen!</p>
+                    </div>
+                {/if}
+                <div class="layout justify-content-end mt-sm">
+                    <button type="submit" disabled="{!isValid || requestPending}">Absenden</button>
+                </div>
+            </div>
+        {/if}
+    </form>
+</div>
diff --git a/src/components/widgets/ContactInformation.svelte b/src/components/widgets/ContactInformation.svelte
new file mode 100644
index 0000000..6cfe000
--- /dev/null
+++ b/src/components/widgets/ContactInformation.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+    import { generalInfo } from "../../store"
+</script>
+
+<div class="contact-information" id="contact-information">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-12">...</div>
+        </div>
+    </div>
+</div>
diff --git a/src/components/widgets/Footer.svelte b/src/components/widgets/Footer.svelte
new file mode 100644
index 0000000..299d368
--- /dev/null
+++ b/src/components/widgets/Footer.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+    import { generalInfo } from "../../store"
+
+    import Navigation from "./Navigation.svelte"
+</script>
+
+<footer>
+    <div class="container">
+        <div class="row">
+            <div class="col-md-12">
+                <Navigation ident="footer" />
+            </div>
+        </div>
+        {#if $generalInfo?.copyrightText}
+            <div class="row">
+                <div class="col-md-12">
+                    <div class="copyright">
+                        {$generalInfo?.copyrightText}
+                    </div>
+                </div>
+            </div>
+        {/if}
+    </div>
+</footer>
diff --git a/src/components/page/Galleries.svelte b/src/components/widgets/Galleries.svelte
similarity index 89%
rename from src/components/page/Galleries.svelte
rename to src/components/widgets/Galleries.svelte
index 8fdf148..faad7a4 100644
--- a/src/components/page/Galleries.svelte
+++ b/src/components/widgets/Galleries.svelte
@@ -64,13 +64,9 @@
     {#each galleries || [] as gallery}
         <div class="gallery gallery-{gallery.variant}">
             {#each gallery.items || [] as image, index}
-                <div
-                    class="gallery-item"
-                    on:click="{() => showDetails(gallery, image)}"
-                >
+                <div class="gallery-item" on:click="{() => showDetails(gallery, image)}">
                     <img
-                        src="{apiBaseURL}galleries/{gallery.id}/{image.file
-                            .src}?filter=s"
+                        src="{apiBaseURL}galleries/{gallery.id}/{image.file.src}?filter=s"
                         alt="{image.alt ? image.alt : image.title}"
                     />
                     {#if gallery.variant === "simple-with-title"}
@@ -87,11 +83,8 @@
         <Modal show="{selectedGallery && selectedImage}">
             <div transition:fade class="gallery-image-details">
                 <img
-                    src="{apiBaseURL}galleries/{selectedGallery.id}/{selectedImage
-                        .file.src}?filter=l"
-                    alt="{selectedImage.alt
-                        ? selectedImage.alt
-                        : selectedImage.title}"
+                    src="{apiBaseURL}galleries/{selectedGallery.id}/{selectedImage.file.src}?filter=l"
+                    alt="{selectedImage.alt ? selectedImage.alt : selectedImage.title}"
                     on:click="{closeDetails}"
                 />
                 <div class="gallery-info">
diff --git a/src/components/widgets/GoogleMaps.svelte b/src/components/widgets/GoogleMaps.svelte
new file mode 100644
index 0000000..5d96342
--- /dev/null
+++ b/src/components/widgets/GoogleMaps.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+    import { generalInfo, ccTags } from "../../store"
+
+    $: iframeTitle =
+        $generalInfo?.person?.salutation +
+        " " +
+        $generalInfo?.person?.firstname +
+        " " +
+        $generalInfo?.person?.lastname +
+        " - " +
+        $generalInfo?.person?.additional
+</script>
+
+{#if $ccTags?.includes("googleMaps")}
+    <iframe
+        id="googleMaps"
+        title="{iframeTitle}"
+        src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1342.4197187151062!2d10.4164909278422!3d50.56856037791808!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x2a509772539d6c1b!2sDr.%20med.%20Christine%20Wedekind!5e0!3m2!1sde!2sde!4v1652861335963!5m2!1sde!2sde"
+        allowfullscreen
+        loading="lazy"
+        referrerpolicy="no-referrer-when-downgrade"></iframe>
+{/if}
diff --git a/src/components/widgets/Header.svelte b/src/components/widgets/Header.svelte
new file mode 100644
index 0000000..c4e734a
--- /dev/null
+++ b/src/components/widgets/Header.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+    import { link } from "svelte-routing"
+
+    import { generalInfo } from "../../store"
+
+    import Navigation from "./Navigation.svelte"
+    import Image from "./Image.svelte"
+</script>
+
+<header>
+    <div class="container">
+        <div class="row">
+            <div class="col-sm-12">
+                <div class="header-content">
+                    <a href="/" use:link>
+                        <Image
+                            file="{$generalInfo?.media?.brand}"
+                            alt="{$generalInfo?.meta?.metaTitle}"
+                            cssClass="brand"
+                        />
+                    </a>
+
+                    <div class="header-content-right">
+                        <Navigation />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</header>
diff --git a/src/components/widgets/Image.svelte b/src/components/widgets/Image.svelte
new file mode 100644
index 0000000..90a313c
--- /dev/null
+++ b/src/components/widgets/Image.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+    export let file: File = null
+    export let alt: string = ""
+    export let cssClass: string = ""
+</script>
+
+{#if file}
+    <img src="{file.src}" alt="{alt ? alt + ' - ' : ''}{file.path}" class="{cssClass}" />
+{/if}
diff --git a/src/components/page/Modal.svelte b/src/components/widgets/Modal.svelte
similarity index 100%
rename from src/components/page/Modal.svelte
rename to src/components/widgets/Modal.svelte
diff --git a/src/components/widgets/Navigation.svelte b/src/components/widgets/Navigation.svelte
new file mode 100644
index 0000000..12d9366
--- /dev/null
+++ b/src/components/widgets/Navigation.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+    import * as animateScroll from "svelte-scrollto"
+    import Icon from "mdi-svelte"
+    import { mdiMenu } from "@mdi/js"
+    // import { generalInfo } from "../../store"
+
+    import { links } from "svelte-routing"
+    import { navigations } from "../../store"
+
+    export let ident = "main"
+
+    let navigation: Navigation
+    let showMobileNav: boolean = false
+
+    $: {
+        $navigations?.map((nav) => {
+            if (nav.ident === ident) {
+                navigation = nav
+            }
+        })
+    }
+</script>
+
+{#if navigation}
+    <nav class="{ident}" use:links>
+        {#each navigation?.items || [] as item}
+            {#if item.settings.url.url}
+                <a
+                    href="{item.settings.url.url}"
+                    target="{item.settings.url.target}"
+                    on:click="{() => {
+                        animateScroll.scrollTo({ element: item.settings.url.url, offset: -200 })
+                        showMobileNav = false
+                    }}"
+                >
+                    {item.settings.title}
+                </a>
+            {:else}
+                <a href="{item.settings.page}">
+                    {item.settings.title}
+                </a>
+            {/if}
+        {/each}
+    </nav>
+
+    {#if ident === "main"}
+        <div class="nav-mobile-toggle" on:click="{() => (showMobileNav = !showMobileNav)}">
+            <Icon path="{mdiMenu}" size="2" />
+        </div>
+
+        <nav class="{ident}-mobile" class:show="{showMobileNav}" use:links>
+            <!-- <img src="img/body-image-left.svg" alt="" class="bg-image" /> -->
+
+            {#each navigation?.items || [] as item}
+                {#if item.settings.url.url}
+                    <div class="nav-item">
+                        <a
+                            href="{item.settings.url.url}"
+                            target="{item.settings.url.target}"
+                            on:click="{() => {
+                                animateScroll.scrollTo({ element: item.settings.url.url, offset: -200 })
+                                showMobileNav = false
+                            }}"
+                        >
+                            {item.settings.title}
+                        </a>
+                    </div>
+                {:else}
+                    <div class="nav-item">
+                        <a href="{item.settings.page}" on:click="{() => (showMobileNav = false)}">
+                            {item.settings.title}
+                        </a>
+                    </div>
+                {/if}
+            {/each}
+        </nav>
+    {/if}
+{/if}
diff --git a/src/components/widgets/News.svelte b/src/components/widgets/News.svelte
new file mode 100644
index 0000000..ad77d30
--- /dev/null
+++ b/src/components/widgets/News.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+    import { news } from "../../store"
+
+    const getNewsDate = (news) => {
+        const from = news?.from ? new Date(news?.from) : null
+        const until = news?.until ? new Date(news?.until) : null
+        const options = { year: "numeric", month: "2-digit", day: "2-digit" }
+        let d = ""
+        if (from) {
+            // @ts-ignore
+            d += from.toLocaleDateString("de-DE", options)
+        }
+        if (until) {
+            // @ts-ignore
+            d += " bis " + until.toLocaleDateString("de-DE", options)
+        }
+
+        if (news.title) {
+            d += " - "
+        }
+        return d
+    }
+</script>
+
+{#if $news?.length}
+    <section class="news" id="news">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-12">
+                    <h2>Neuigkeiten</h2>
+                </div>
+            </div>
+            <div class="row">
+                {#each $news as n}
+                    {#if n.title || n.from || n.until}
+                        <div class="col-md-6">
+                            <article>
+                                <div class="title">
+                                    {getNewsDate(n)}
+                                    {#if n.title}
+                                        {@html n.title}
+                                    {/if}
+                                </div>
+                                {#if n.content}
+                                    <div class="content">
+                                        {@html n.content}
+                                    </div>
+                                {/if}
+                            </article>
+                        </div>
+                    {/if}
+                {/each}
+            </div>
+        </div>
+    </section>
+{/if}
diff --git a/src/components/widgets/PromotionImage.svelte b/src/components/widgets/PromotionImage.svelte
new file mode 100644
index 0000000..d37ade4
--- /dev/null
+++ b/src/components/widgets/PromotionImage.svelte
@@ -0,0 +1,74 @@
+<svg
+    class="promotion-image-wave-top"
+    width="1920"
+    height="70"
+    viewBox="0 0 1920 70"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+>
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="m1920 70-80-12c-80-12-240-36-400-42s-320 6-480 18-320 24-480 18S160 22 80 10L0-2v-108h1920V70z"
+        fill="#fff"></path>
+</svg>
+
+<!-- <img src="img/promotion/promotion-image.png" alt="" class="promotion-image" /> -->
+
+<svg class="promotion-image-wave-bottom" viewBox="0 0 1920 137" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M0 30.708 80 24.7c80-6.008 240-18.024 400-6.008 160 12.016 320 48.065 480 42.057 160-6.009 320-54.073 480-60.082 160-6.008 320 30.041 400 48.065l80 18.025V137H0V30.708z"
+        fill="url(#plkj8d2oga)"></path>
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M0 30.708 80 24.7c80-6.008 240-18.024 400-6.008 160 12.016 320 48.065 480 42.057 160-6.009 320-54.073 480-60.082 160-6.008 320 30.041 400 48.065l80 18.025V137H0V30.708z"
+        fill="url(#iwnto70uxb)"></path>
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M0 30.708 80 24.7c80-6.008 240-18.024 400-6.008 160 12.016 320 48.065 480 42.057 160-6.009 320-54.073 480-60.082 160-6.008 320 30.041 400 48.065l80 18.025V137H0V30.708z"
+        fill="url(#aco1fmuv9c)"></path>
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M0 121.708 80 108.7c80-6.008 240-48.024 400-36.008 160 12.016 320 48.065 480 42.057 160-6.009 320-94.073 480-100.081 160-6.009 320 30.04 400 48.064l80 18.025V141H0v-19.292z"
+        fill="#fff"></path>
+    <defs>
+        <radialGradient
+            id="plkj8d2oga"
+            cx="0"
+            cy="0"
+            r="1"
+            gradientUnits="userSpaceOnUse"
+            gradientTransform="matrix(960 0 0 41.5089 960 95.491)"
+        >
+            <stop stop-color="#FFFEFF"></stop>
+            <stop offset="1" stop-color="#D7FFFE"></stop>
+        </radialGradient>
+        <radialGradient
+            id="iwnto70uxb"
+            cx="0"
+            cy="0"
+            r="1"
+            gradientUnits="userSpaceOnUse"
+            gradientTransform="matrix(-652.99956 -34.96514 36.02623 -672.81617 1033.5 102.034)"
+        >
+            <stop stop-color="#BCFFFD"></stop>
+            <stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
+        </radialGradient>
+        <radialGradient
+            id="aco1fmuv9c"
+            cx="0"
+            cy="0"
+            r="1"
+            gradientUnits="userSpaceOnUse"
+            gradientTransform="rotate(8.473 63.69 3351.307) scale(825.005 723.955)"
+        >
+            <stop stop-color="#fff"></stop>
+            <stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
+        </radialGradient>
+    </defs>
+</svg>
diff --git a/src/components/widgets/ScrollTo.svelte b/src/components/widgets/ScrollTo.svelte
new file mode 100644
index 0000000..a73fd01
--- /dev/null
+++ b/src/components/widgets/ScrollTo.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+    import { createEventDispatcher } from "svelte"
+
+    const dispatch = createEventDispatcher()
+</script>
+
+<div class="scroll-to-top">
+    <div class="circle-email">
+        <a
+            href="/#"
+            on:click="{() => {
+                dispatch('scrollTo', {
+                    element: 'contact',
+                })
+            }}"
+        >
+            <!-- <img src="img/icon/contact.svg" alt="" /> -->
+        </a>
+    </div>
+    <div class="circle-contact">
+        <a
+            href="/#"
+            on:click="{() => {
+                dispatch('scrollTo', {
+                    element: 'recipe',
+                })
+            }}"
+        >
+            <!-- <img src="img/icon/recipe.svg" alt="" /> -->
+        </a>
+    </div>
+    <div class="circle-top">
+        <a href="/#">
+            <!-- <img src="img/icon/chevron-up.svg" alt="" /> -->
+        </a>
+    </div>
+</div>
diff --git a/src/css/main.less b/src/css/main.less
index ce00254..21a7003 100644
--- a/src/css/main.less
+++ b/src/css/main.less
@@ -1,3 +1 @@
-body {
-    background-color: #eee;
-}
+@import "theme-2022/main";
diff --git a/src/css/prototype-article.less b/src/css/prototype-article.less
deleted file mode 100644
index fe2a19b..0000000
--- a/src/css/prototype-article.less
+++ /dev/null
@@ -1,5 +0,0 @@
-.p_article {
-    font-size: 14px;
-    border: 1px solid #000;
-    padding: 20px;
-}
diff --git a/src/css/theme/components/article.less b/src/css/theme-2022/components/article.less
similarity index 100%
rename from src/css/theme/components/article.less
rename to src/css/theme-2022/components/article.less
diff --git a/src/css/theme/components/audio.less b/src/css/theme-2022/components/audio.less
similarity index 100%
rename from src/css/theme/components/audio.less
rename to src/css/theme-2022/components/audio.less
diff --git a/src/css/theme/components/carousel.less b/src/css/theme-2022/components/carousel.less
similarity index 100%
rename from src/css/theme/components/carousel.less
rename to src/css/theme-2022/components/carousel.less
diff --git a/src/css/theme/components/cc-bar.less b/src/css/theme-2022/components/cc-bar.less
similarity index 100%
rename from src/css/theme/components/cc-bar.less
rename to src/css/theme-2022/components/cc-bar.less
diff --git a/src/css/theme-2022/components/contact-information.less b/src/css/theme-2022/components/contact-information.less
new file mode 100644
index 0000000..7e9c24a
--- /dev/null
+++ b/src/css/theme-2022/components/contact-information.less
@@ -0,0 +1,59 @@
+.contact-information {
+    margin-top: -120px;
+    min-height: 1060px;
+    background: url("../css/theme-2022/components/img/union.svg") top no-repeat;
+    background-size: cover;
+
+    & > .container {
+        padding-top: 10rem;
+    }
+
+    .appointmentOfficeHour {
+        @media (max-width: 768px) {
+            font-size: 0.87em;
+            margin-bottom: @space-sm;
+        }
+
+        strong {
+            display: inline-block;
+            min-width: 120px;
+        }
+    }
+
+    .meeting-information {
+        margin-top: @space-xl;
+    }
+
+    ul {
+        list-style-type: none;
+        padding-left: 40px;
+        width: 100%;
+
+        li {
+            line-height: 30px;
+            padding-left: 0px;
+            font-weight: 400;
+            width: 50%;
+            display: inline-block;
+
+            @media (max-width: 768px) {
+                width: 100%;
+            }
+
+            &:before {
+                content: url("../css/theme-2022/components/img/check-bold.svg");
+                font-weight: 400;
+                top: 1px;
+                left: -30px;
+            }
+        }
+    }
+
+    @media (max-width: 1050px) {
+        padding-bottom: 10rem;
+    }
+
+    @media (max-width: 768px) {
+        margin-bottom: -90px;
+    }
+}
diff --git a/src/css/theme/components/content.less b/src/css/theme-2022/components/content.less
similarity index 100%
rename from src/css/theme/components/content.less
rename to src/css/theme-2022/components/content.less
diff --git a/src/css/theme/components/event.less b/src/css/theme-2022/components/event.less
similarity index 100%
rename from src/css/theme/components/event.less
rename to src/css/theme-2022/components/event.less
diff --git a/src/css/theme-2022/components/footer.less b/src/css/theme-2022/components/footer.less
new file mode 100644
index 0000000..0e7f81a
--- /dev/null
+++ b/src/css/theme-2022/components/footer.less
@@ -0,0 +1,23 @@
+footer {
+    min-height: 70px;
+    margin-top: @space-md;
+
+    .copyright {
+        text-align: center;
+        margin: @space-md 0;
+    }
+
+    nav.footer {
+        display: flex;
+        justify-content: center;
+        gap: @space-md;
+
+        a {
+            color: @on-background;
+
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+    }
+}
diff --git a/src/css/theme-2022/components/forms.less b/src/css/theme-2022/components/forms.less
new file mode 100644
index 0000000..dc09382
--- /dev/null
+++ b/src/css/theme-2022/components/forms.less
@@ -0,0 +1,139 @@
+form {
+    background: @surface;
+    color: @on-surface;
+    padding: @space-md;
+    border-radius: 10px;
+    box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1);
+
+    strong {
+        color: @secondary;
+        font-weight: 700;
+    }
+
+    .titles {
+        flex-grow: 1;
+
+        .title,
+        .subTitle {
+            text-align: left;
+            color: @on-surface;
+            margin: 0;
+        }
+    }
+
+    .icon {
+        width: 80px;
+        height: 80px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-shrink: 0;
+        border-radius: 100%;
+
+        &.contact {
+            background-color: @secondary-light-green;
+        }
+        &.recipe {
+            background-color: @secondary-light;
+        }
+
+        img {
+            width: 50%;
+        }
+    }
+
+    .collapse-icon {
+        cursor: pointer;
+
+        svg {
+            transition: @transition-default;
+        }
+
+        &.collapsed svg {
+            transform: rotate(-90deg);
+        }
+    }
+
+    input,
+    textarea,
+    .checkbox {
+        border: 1px solid transparent;
+        border-radius: 10px;
+        box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.1);
+        background: @surface;
+        color: @on-background;
+        padding: @space-sm @space-md;
+        width: 100%;
+        max-width: 100%;
+        transition: all 0.2s ease-in-out;
+        outline: none;
+
+        ::placeholder {
+            color: @on-surface;
+            font-weight: 400;
+        }
+        :-ms-input-placeholder {
+            color: @on-surface;
+            font-weight: 400;
+        }
+        ::-ms-input-placeholder {
+            color: @on-surface;
+            font-weight: 400;
+        }
+
+        &:focus {
+            border: 1px solid @secondary;
+            color: @primary;
+        }
+
+        &[readonly] {
+            opacity: 0.5;
+        }
+    }
+
+    .checkbox {
+        padding: 0;
+        width: 60px;
+        height: 60px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: @secondary;
+
+        &:hover {
+            box-shadow: inset 0 0 10px 0 @secondary;
+        }
+    }
+
+    textarea {
+        height: 200px;
+    }
+
+    button {
+        width: 100%;
+        background: @secondary;
+        color: @on-secondary;
+        padding: @space-xs @space-md;
+        border-radius: 10px;
+        border: 1px solid transparent;
+        transition: @transition-default;
+        font-weight: 700;
+        cursor: pointer;
+
+        &:hover {
+            border-color: @on-secondary;
+            background-color: @primary;
+            color: @on-primary;
+        }
+
+        &[disabled] {
+            opacity: 0.5;
+        }
+    }
+
+    .error {
+        background: @error;
+        color: @on-error;
+        padding: @space-md;
+    }
+}
diff --git a/src/css/theme-2022/components/general.less b/src/css/theme-2022/components/general.less
new file mode 100755
index 0000000..c336783
--- /dev/null
+++ b/src/css/theme-2022/components/general.less
@@ -0,0 +1,108 @@
+html,
+body {
+    background: @background;
+    color: @on-background;
+    font-size: @font-size-default;
+    font-weight: @font-weight-default;
+    line-height: @font-line-height-default;
+    font-family: "Montserrat", sans-serif;
+    width: 100%;
+    height: 100%;
+}
+
+body {
+    overflow-x: hidden;
+    padding: @header-height + 60px 0 0 0;
+
+    @media (max-width: 768px) {
+        padding: @header-height-max-768 0 0 0;
+    }
+}
+
+// Body Images
+
+.body-image-left {
+    position: absolute;
+    left: 0;
+    top: 80rem;
+
+    @media (max-width: 900px) {
+        top: 90rem;
+    }
+}
+
+// Lists
+
+ul {
+    list-style-type: none;
+    padding-left: 15px;
+
+    li {
+        line-height: 30px;
+        padding-left: 0;
+        font-weight: 700;
+
+        &:before {
+            content: "\203A";
+            font-weight: 700;
+            position: absolute;
+            top: -1px;
+            left: -12px;
+        }
+    }
+}
+
+// Scroll To Top
+
+.scroll-to-top {
+    position: fixed;
+    z-index: 9999;
+    right: 5rem;
+    bottom: 5rem;
+
+    @media (max-width: 768px) {
+        right: 4rem;
+        bottom: 1rem;
+    }
+
+    .circle-top,
+    .circle-email,
+    .circle-contact {
+        width: 80px;
+        height: 80px;
+        border-radius: 100%;
+        background-color: @secondary;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+    }
+
+    .circle-email {
+        width: 60px;
+        height: 60px;
+        background-color: @secondary-light;
+        position: absolute;
+        top: -20px;
+        right: -39px;
+    }
+
+    .circle-contact {
+        width: 60px;
+        height: 60px;
+        background-color: @secondary-light-green;
+        position: absolute;
+        top: 23px;
+        right: -53px;
+    }
+}
+
+// Promotion
+
+.promotion-image-wave-top {
+    height: 70px;
+}
+
+.promotion-image-wave-bottom {
+    height: 137px;
+}
diff --git a/src/css/theme/components/grid.less b/src/css/theme-2022/components/grid.less
similarity index 95%
rename from src/css/theme/components/grid.less
rename to src/css/theme-2022/components/grid.less
index f34424e..4773fd0 100755
--- a/src/css/theme/components/grid.less
+++ b/src/css/theme-2022/components/grid.less
@@ -2,7 +2,7 @@
 
 @container_width: 1200px;
 @columns: 12;
-@main_padding: 15px;
+@main_padding: 20px;
 
 // Grid
 
@@ -23,8 +23,8 @@
     @media (min-width: 992px) {
         width: 960px;
     }
-    @media (min-width: 1200px) {
-        width: 1140px;
+    @media (min-width: 1240px) {
+        width: 1200px;
     }
     @media (min-width: 1400px) {
         width: 1320px;
@@ -67,6 +67,10 @@
             justify-content: flex-end;
         }
     }
+
+    & ~ .row:not(.nospace) {
+        margin-top: @space-lg;
+    }
 }
 
 each(range(@columns), {
diff --git a/src/css/theme-2022/components/header.less b/src/css/theme-2022/components/header.less
new file mode 100755
index 0000000..ec3aa4e
--- /dev/null
+++ b/src/css/theme-2022/components/header.less
@@ -0,0 +1,162 @@
+header {
+    position: fixed;
+    width: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    transition: all 1s ease-in-out;
+    height: @header-height;
+    background: rgba(255, 255, 255, 0.9);
+    z-index: 9999;
+
+    @media (max-width: 992px) {
+        background-color: @surface;
+    }
+
+    @media (max-width: 768px) {
+        height: @header-height-max-768;
+    }
+
+    .header-content {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+
+        .header-content-right {
+            text-align: right;
+        }
+    }
+
+    .brand {
+        display: block;
+        margin: @space-md 0;
+
+        @media (max-width: 992px) {
+            width: 80%;
+        }
+    }
+
+    .tel-box {
+        display: inline-flex;
+        align-items: center;
+        gap: @space-sm;
+        background: @secondary;
+        color: @on-secondary;
+        font-weight: 700;
+        border-radius: 50px;
+        height: 40px;
+        padding-right: @space-md;
+        margin: @space-md 0 0 auto;
+        text-decoration: none;
+        white-space: nowrap;
+
+        .icon {
+            background: @secondary-light;
+            width: 40px;
+            height: 40px;
+            border-radius: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        @media (max-width: 992px) {
+            & {
+                display: none;
+            }
+            &.mobile {
+                display: inline-flex;
+                justify-content: center;
+            }
+        }
+    }
+
+    nav {
+        list-style-type: none;
+        margin-top: @space-md;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        gap: @space-md;
+
+        @media (max-width: 992px) {
+            display: none;
+        }
+
+        & > * {
+            text-decoration: none;
+            color: @primary;
+            transition: @transition-default;
+            font-weight: 500;
+
+            &:hover {
+                color: @on-background;
+            }
+        }
+    }
+
+    .nav-mobile-toggle {
+        display: none;
+        cursor: pointer;
+        margin: @space-md 0 0 auto;
+
+        @media (max-width: 992px) {
+            display: block;
+        }
+    }
+
+    nav.main-mobile {
+        display: none;
+        position: fixed;
+        top: @header-height;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: @surface;
+        z-index: 9999;
+        margin: 0;
+        overflow-y: auto;
+
+        @media (max-width: 768px) {
+            top: @header-height-max-768;
+        }
+
+        &.show {
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+            align-items: center;
+        }
+
+        .bg-image {
+            position: absolute;
+            left: 0;
+            top: 0;
+        }
+
+        .nav-item {
+            align-self: center;
+            display: block;
+            text-align: center;
+            color: @primary;
+            font-size: 18px;
+            font-weight: 700;
+
+            a {
+                transition: @transition-default;
+                padding: @space-xs;
+
+                &:hover {
+                    color: @secondary;
+                }
+
+                &.tel-box {
+                    padding: 0 @space-md 0 0;
+                    margin-bottom: @space-md;
+                    color: @primary;
+                }
+            }
+        }
+    }
+}
diff --git a/src/css/theme-2022/components/history.less b/src/css/theme-2022/components/history.less
new file mode 100644
index 0000000..548cb7a
--- /dev/null
+++ b/src/css/theme-2022/components/history.less
@@ -0,0 +1,50 @@
+.history {
+    font-size: 24px;
+    font-weight: 700;
+
+    .history-item {
+        min-height: 80px;
+
+        .date {
+            width: 80px;
+            height: 80px;
+            border-radius: 100%;
+            background-color: @secondary;
+            color: @on-secondary;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-shrink: 0;
+            position: absolute;
+            top: -21px;
+            left: calc(50% - 40px);
+        }
+        .text {
+            width: 41%;
+        }
+
+        &:nth-child(odd) {
+            .text {
+                margin-left: auto;
+            }
+        }
+
+        & ~ .history-item {
+            margin-top: @space-md;
+        }
+
+        @media (max-width: 900px) {
+            .date {
+                left: 0;
+            }
+            &:nth-child(odd),
+            &:nth-child(even) {
+                .text {
+                    width: 100%;
+                    padding-left: 100px;
+                    font-size: 0.7em;
+                }
+            }
+        }
+    }
+}
diff --git a/src/css/theme-2022/components/iframes.less b/src/css/theme-2022/components/iframes.less
new file mode 100644
index 0000000..1fd9287
--- /dev/null
+++ b/src/css/theme-2022/components/iframes.less
@@ -0,0 +1,9 @@
+iframe {
+    width: 100%;
+    max-width: 100%;
+    border: 0;
+
+    &#googleMaps {
+        height: 720px;
+    }
+}
diff --git a/src/css/theme-2022/components/img/check-bold.svg b/src/css/theme-2022/components/img/check-bold.svg
new file mode 100644
index 0000000..2746b48
--- /dev/null
+++ b/src/css/theme-2022/components/img/check-bold.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="m9 20.92-6.21-6.21 2.83-2.83L9 15.27l9.88-9.89 2.83 2.83L9 20.92z" fill="#72EFDD"/>
+</svg>
diff --git a/src/css/theme/components/img/arrow-right-3.png b/src/css/theme-2022/components/img/list-arrow-right.png
similarity index 100%
rename from src/css/theme/components/img/arrow-right-3.png
rename to src/css/theme-2022/components/img/list-arrow-right.png
diff --git a/src/css/theme-2022/components/img/top-bg.svg b/src/css/theme-2022/components/img/top-bg.svg
new file mode 100644
index 0000000..740d97c
--- /dev/null
+++ b/src/css/theme-2022/components/img/top-bg.svg
@@ -0,0 +1,39 @@
+<svg width="1920" height="1003" viewBox="0 0 1920 1003" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g opacity=".5" clip-rule="evenodd">
+        <path fill-rule="evenodd" d="M0 631.5s14.5 8.71 80 18.5 240 9.424 400-9.79 320-45.531 480-16.71c160 28.821 320 88.786 480 108s320-88.465 400-136.5l80-72.432V28H0v603.5z" fill="url(#s8guwl92ja)"/>
+        <path fill-rule="evenodd" d="M0 631.5s14.5 8.71 80 18.5 240 9.424 400-9.79 320-45.531 480-16.71c160 28.821 320 88.786 480 108s320-88.465 400-136.5l80-72.432V28H0v603.5z" fill="url(#d44dn5xirb)"/>
+    </g>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="m0 553.568 80 19.214c80 19.214 240 57.642 400 38.428 160-19.214 320-28.821 480 0s320 36.07 480 55.284 320-76.856 400-124.891l80-48.035V-1H0v554.568z" fill="url(#dzvpq96n6c)"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="m0 553.568 80 19.214c80 19.214 240 57.642 400 38.428 160-19.214 320-28.821 480 0s320 36.07 480 55.284 320-76.856 400-124.891l80-48.035V-1H0v554.568z" fill="url(#qmmqrfmedd)"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="m0 553.568 80 19.214c80 19.214 240 57.642 400 38.428 160-19.214 320-28.821 480 0s320 36.07 480 55.284 320-76.856 400-124.891l80-48.035V-1H0v554.568z" fill="url(#m8la3ielte)"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="m0 553.568 80 19.214c80 19.214 240 57.642 400 38.428 160-19.214 320-28.821 480 0s320 36.07 480 55.284 320-76.856 400-124.891l80-48.035V-1H0v554.568z" fill="url(#eyw4yzjlhf)"/>
+        <g opacity=".7" stroke="#72EFDD" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="0.3 0.3">
+        <path opacity=".7" d="m1135.97 730.546 423.2-439.715M1139.36 766.411l449.79-468.108M1152.96 791.375l462.52-481.691M1172.07 810.457l472.86-492.746M1186.97 834.023l487.67-508.552M1204.48 854.829l501.7-523.534M1221.84 875.77l508.48-530.757M1239.24 896.672l520.62-543.709M1257.19 917l526.69-550.204M1273.01 939.569l530.9-554.668M1290.99 959.877l535.48-559.572M1310.07 978.979l538.63-562.925M1326.14 1001.32l519.61-542.638"/>
+    </g>
+    <defs>
+        <radialGradient id="s8guwl92ja" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(960 0 0 203 960 495)">
+            <stop stop-color="#FFFEFF"/>
+            <stop offset="1" stop-color="#D7FFFE"/>
+        </radialGradient>
+        <radialGradient id="d44dn5xirb" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="rotate(-165.326 550.678 196.962) scale(675.018 3192.21)">
+            <stop stop-color="#BCFFFD"/>
+            <stop offset="1" stop-color="#fff" stop-opacity="0"/>
+        </radialGradient>
+        <radialGradient id="dzvpq96n6c" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(960 0 0 203 960 466)">
+            <stop stop-color="#FFFEFF"/>
+            <stop offset="1" stop-color="#D7FFFE"/>
+        </radialGradient>
+        <radialGradient id="qmmqrfmedd" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="rotate(-165.326 548.81 182.462) scale(675.018 3192.21)">
+            <stop stop-color="#BCFFFD"/>
+            <stop offset="1" stop-color="#fff" stop-opacity="0"/>
+        </radialGradient>
+        <radialGradient id="m8la3ielte" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(816.00191 594.50235 -1703.6414 2338.38377 494.5 132)">
+            <stop stop-color="#fff"/>
+            <stop offset="1" stop-color="#fff" stop-opacity="0"/>
+        </radialGradient>
+        <linearGradient id="eyw4yzjlhf" x1="960" y1="-1" x2="960" y2="669" gradientUnits="userSpaceOnUse">
+            <stop offset=".083" stop-color="#fff"/>
+            <stop offset=".333" stop-color="#fff" stop-opacity="0"/>
+        </linearGradient>
+    </defs>
+</svg>
diff --git a/src/css/theme-2022/components/img/union.svg b/src/css/theme-2022/components/img/union.svg
new file mode 100644
index 0000000..52a4ad8
--- /dev/null
+++ b/src/css/theme-2022/components/img/union.svg
@@ -0,0 +1,19 @@
+<svg viewBox="0 0 1920 1060" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M80 20.91 0 0v1017.38h80c80 0 240 0 400-6.97 53.333-2.32 106.667-5.42 160-8.52 106.667-6.195 213.333-12.39 320-12.39 160 0 320 13.94 480 27.88l480 41.82V62.728l-80 6.97c-80 6.97-240 20.909-400 13.94-64-2.789-128-8.922-192-15.055-96-9.2-192-18.4-288-16.31-72 1.569-144 9.488-216 17.407-88 9.68-176 19.359-264 17.442C320 83.637 160 41.82 80 20.91z" fill="url(#9fz5hy4h1a)"/>
+    <path d="M80 20.91 0 0v1017.38h80c80 0 240 0 400-6.97 53.333-2.32 106.667-5.42 160-8.52 106.667-6.195 213.333-12.39 320-12.39 160 0 320 13.94 480 27.88l480 41.82V62.728l-80 6.97c-80 6.97-240 20.909-400 13.94-64-2.789-128-8.922-192-15.055-96-9.2-192-18.4-288-16.31-72 1.569-144 9.488-216 17.407-88 9.68-176 19.359-264 17.442C320 83.637 160 41.82 80 20.91z" fill="url(#e1z5hwatsb)"/>
+    <path d="M80 20.91 0 0v1017.38h80c80 0 240 0 400-6.97 53.333-2.32 106.667-5.42 160-8.52 106.667-6.195 213.333-12.39 320-12.39 160 0 320 13.94 480 27.88l480 41.82V62.728l-80 6.97c-80 6.97-240 20.909-400 13.94-64-2.789-128-8.922-192-15.055-96-9.2-192-18.4-288-16.31-72 1.569-144 9.488-216 17.407-88 9.68-176 19.359-264 17.442C320 83.637 160 41.82 80 20.91z" fill="url(#nign7co5vc)"/>
+    <defs>
+        <radialGradient id="9fz5hy4h1a" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(960 0 0 212.392 960 488.607)">
+            <stop stop-color="#FFFEFF"/>
+            <stop offset="1" stop-color="#D7FFFE"/>
+        </radialGradient>
+        <radialGradient id="e1z5hwatsb" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-653.00038 -178.91022 879.8803 -3211.45532 1033.5 522.084)">
+            <stop stop-color="#BCFFFD"/>
+            <stop offset="1" stop-color="#fff" stop-opacity="0"/>
+        </radialGradient>
+        <radialGradient id="nign7co5vc" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(816.0031 622.01048 -1805.66361 2368.81393 494.5 139.154)">
+            <stop stop-color="#fff"/>
+            <stop offset="1" stop-color="#fff" stop-opacity="0"/>
+        </radialGradient>
+    </defs>
+</svg>
diff --git a/src/css/theme/components/layout.less b/src/css/theme-2022/components/layout.less
similarity index 97%
rename from src/css/theme/components/layout.less
rename to src/css/theme-2022/components/layout.less
index 7a6cfb1..41ceb43 100755
--- a/src/css/theme/components/layout.less
+++ b/src/css/theme-2022/components/layout.less
@@ -1,8 +1,8 @@
-@space-xs: 0.25rem;
-@space-sm: 0.5rem;
-@space-md: 1rem;
-@space-lg: 2rem;
-@space-xl: 3rem;
+@space-xs: 0.6rem;
+@space-sm: 1rem;
+@space-md: 1.6rem;
+@space-lg: 2.5rem;
+@space-xl: 4rem;
 
 .layout {
     display: flex;
diff --git a/src/css/theme/components/navigation.less b/src/css/theme-2022/components/navigation.less
similarity index 100%
rename from src/css/theme/components/navigation.less
rename to src/css/theme-2022/components/navigation.less
diff --git a/src/css/theme-2022/components/news.less b/src/css/theme-2022/components/news.less
new file mode 100644
index 0000000..606216a
--- /dev/null
+++ b/src/css/theme-2022/components/news.less
@@ -0,0 +1,19 @@
+.news {
+    article {
+        background: @surface;
+        color: @on-surface;
+        padding: @space-sm @space-md;
+        border-radius: 10px;
+        box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1);
+        margin-bottom: @space-lg;
+
+        @media (max-width: 768px) {
+            text-align: center;
+        }
+
+        .title {
+            font-weight: 700;
+            margin-bottom: @space-xs;
+        }
+    }
+}
diff --git a/src/css/theme-2022/components/promotion-image.less b/src/css/theme-2022/components/promotion-image.less
new file mode 100644
index 0000000..66d4b4e
--- /dev/null
+++ b/src/css/theme-2022/components/promotion-image.less
@@ -0,0 +1,12 @@
+.promotion-image-wave-top,
+.promotion-image-wave-bottom {
+    z-index: 2;
+    width: 100%;
+}
+
+.promotion-image {
+    z-index: 0;
+    margin-top: -56px;
+    margin-bottom: -68px;
+    width: 100%;
+}
diff --git a/src/css/theme-2022/components/section.less b/src/css/theme-2022/components/section.less
new file mode 100644
index 0000000..93d7f10
--- /dev/null
+++ b/src/css/theme-2022/components/section.less
@@ -0,0 +1,7 @@
+section,
+.section {
+    & ~ section,
+    & ~ .section {
+        margin-top: 4rem;
+    }
+}
diff --git a/src/css/theme-2022/components/services.less b/src/css/theme-2022/components/services.less
new file mode 100644
index 0000000..1f136b1
--- /dev/null
+++ b/src/css/theme-2022/components/services.less
@@ -0,0 +1,52 @@
+.services {
+    article {
+        font-weight: 700;
+        display: flex;
+        align-items: flex-start;
+        gap: @space-sm;
+        margin-bottom: @space-xs;
+        padding: @space-sm @space-md;
+        border-radius: 10px;
+        cursor: pointer;
+
+        &:hover {
+            background: @surface;
+            color: @on-surface;
+            box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1);
+        }
+
+        .icon {
+            width: 50px;
+            height: 50px;
+            border-radius: 100%;
+            background-color: @secondary-light;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-shrink: 0;
+
+            img {
+                height: 32px;
+                margin-top: 2px;
+            }
+        }
+
+        .title {
+            font-size: 24px;
+            font-weight: 700;
+
+            @media (max-width: 768px) {
+                font-size: 20px;
+            }
+        }
+
+        @media (max-width: 768px) {
+            padding: 0;
+
+            &:hover {
+                background: transparent;
+                box-shadow: none;
+            }
+        }
+    }
+}
diff --git a/src/css/theme/components/sidebar.less b/src/css/theme-2022/components/sidebar.less
similarity index 100%
rename from src/css/theme/components/sidebar.less
rename to src/css/theme-2022/components/sidebar.less
diff --git a/src/css/theme-2022/components/specials.less b/src/css/theme-2022/components/specials.less
new file mode 100644
index 0000000..39cced2
--- /dev/null
+++ b/src/css/theme-2022/components/specials.less
@@ -0,0 +1,79 @@
+.specials {
+    article {
+        background: @surface;
+        color: @on-surface;
+        padding: @space-md;
+        border-radius: 10px;
+        box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1);
+        margin-bottom: @space-lg;
+        font-weight: 700;
+
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        gap: @space-md;
+
+        @media (max-width: 768px) {
+            flex-direction: column;
+            text-align: center;
+        }
+
+        .icon {
+            width: 80px;
+            height: 80px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-shrink: 0;
+
+            @media (max-width: 768px) {
+                width: 50px;
+                height: 50px;
+            }
+
+            img {
+                width: 100%;
+            }
+        }
+
+        .title {
+            margin-bottom: @space-xs;
+            font-size: 24px;
+            line-height: 1.3;
+
+            @media (max-width: 768px) {
+                font-size: 20px;
+            }
+        }
+
+        &.hovered {
+            display: none;
+
+            @media (min-width: 768px) {
+                display: flex;
+                position: fixed;
+                top: 40%;
+                left: 30%;
+                right: 30%;
+                z-index: 999;
+                box-shadow: inset 0 0 2px 1px white, 0 10px 40px 0 rgba(0, 0, 0, 0.1), 0 10px 40px 0 rgba(0, 0, 0, 0.1);
+                background: linear-gradient(
+                        90deg,
+                        rgba(238, 254, 255, 1) 0%,
+                        rgba(255, 254, 255, 1) 35%,
+                        rgba(215, 255, 254, 1) 100%
+                    ),
+                    radial-gradient(88.73% 230.98% at 25.76% 13.14%, #ffffff 0%, rgba(255, 255, 255, 0) 100%),
+                    radial-gradient(50% 20.05% at 50% 46.13%, #fffeff 0%, #d7fffe 100%);
+            }
+        }
+    }
+
+    .row:nth-child(2) > *:nth-child(2) > article:first-child {
+        margin-top: @space-xl;
+
+        @media (max-width: 1050px) {
+            margin-top: 0;
+        }
+    }
+}
diff --git a/src/css/theme-2022/components/top-section.less b/src/css/theme-2022/components/top-section.less
new file mode 100644
index 0000000..ae34d48
--- /dev/null
+++ b/src/css/theme-2022/components/top-section.less
@@ -0,0 +1,50 @@
+.top-section {
+    height: 1003px;
+    margin-bottom: -28rem;
+
+    @media (max-width: 1050px) {
+        margin-bottom: 0rem;
+    }
+
+    .text {
+        margin-top: @space-xl;
+
+        strong {
+            color: @secondary;
+        }
+    }
+
+    .top-section-bg {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+
+        @media (max-width: 768px) {
+            height: 64rem;
+            object-fit: cover;
+        }
+    }
+
+    .circles {
+        position: absolute;
+        top: -151px;
+        left: -97px;
+        min-width: 986px;
+
+        @media (max-width: 1049px) {
+            top: -151px;
+            left: -97px;
+        }
+    }
+    .circles-image {
+        position: absolute;
+        top: 0;
+        left: 70px;
+        min-width: 550px;
+
+        @media (max-width: 1240px) {
+            min-width: 652px;
+        }
+    }
+}
diff --git a/src/css/theme-2022/components/typo.less b/src/css/theme-2022/components/typo.less
new file mode 100644
index 0000000..f9589fc
--- /dev/null
+++ b/src/css/theme-2022/components/typo.less
@@ -0,0 +1,51 @@
+// Headlines
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: @primary;
+    font-weight: 700;
+
+    @media (max-width: 768px) {
+        text-align: center;
+    }
+}
+
+h1 {
+    font-size: 48px;
+    margin-bottom: @space-md;
+    line-height: @space-xl;
+
+    @media (max-width: 768px) {
+        font-size: 32px;
+    }
+}
+
+h2 {
+    font-size: 48px;
+    margin-bottom: @space-md;
+    line-height: @space-xl;
+
+    @media (max-width: 768px) {
+        font-size: 28px;
+    }
+}
+
+h3 {
+    font-size: 24px;
+    margin-bottom: @space-sm;
+
+    @media (max-width: 768px) {
+        font-size: 18px;
+    }
+}
+
+// Link
+
+a {
+    text-decoration: none;
+    color: @on-background;
+}
diff --git a/src/css/theme/fonts.less b/src/css/theme-2022/fonts.less
similarity index 100%
rename from src/css/theme/fonts.less
rename to src/css/theme-2022/fonts.less
diff --git a/src/css/theme-2022/main.less b/src/css/theme-2022/main.less
new file mode 100644
index 0000000..e16e29b
--- /dev/null
+++ b/src/css/theme-2022/main.less
@@ -0,0 +1,57 @@
+// Variables
+
+@background: #fff;
+@on-background: #575756;
+
+@primary: #2d8e91;
+@on-primary: #fff;
+
+@secondary: #72efdd;
+@on-secondary: #2d8e91;
+@secondary-light: #dafbf7;
+@on-secondary-light: @on-secondary;
+@secondary-light-green: #e2fbf0;
+@on-secondary-light-green: @on-secondary;
+
+@surface: #fff;
+@on-surface: #575756;
+
+@error: #fff0e9;
+@on-error: #eb5757;
+
+@font-size-default: 16px;
+@font-weight-default: 400;
+@font-line-height-default: 1.6;
+
+@radius-default: 50px;
+
+@transition-default: all 0.2s ease-in-out;
+
+// Header
+
+@header-height: 140px;
+@header-height-max-768: 100px;
+
+// CSS Definitions
+
+@import "fonts";
+@import "reset";
+
+@import "components/general";
+@import "components/grid";
+@import "components/typo";
+@import "components/layout";
+@import "components/section";
+@import "components/header";
+@import "components/footer";
+@import "components/news";
+@import "components/services";
+@import "components/specials";
+@import "components/iframes";
+@import "components/contact-information";
+@import "components/promotion-image";
+@import "components/history";
+@import "components/top-section";
+@import "components/forms";
+
+@import "components/cc-bar";
diff --git a/src/css/theme/reset.less b/src/css/theme-2022/reset.less
similarity index 100%
rename from src/css/theme/reset.less
rename to src/css/theme-2022/reset.less
diff --git a/src/css/theme/components/appointment.less b/src/css/theme/components/appointment.less
deleted file mode 100644
index da8f4d6..0000000
--- a/src/css/theme/components/appointment.less
+++ /dev/null
@@ -1,8 +0,0 @@
-.appointment {
-    background: @secondary;
-    color: @on-secondary;
-    border-radius: 50px;
-    font-size: 18px;
-    text-align: center;
-    padding: @space-xs @space-sm;
-}
diff --git a/src/css/theme/components/footer.less b/src/css/theme/components/footer.less
deleted file mode 100644
index 7e91461..0000000
--- a/src/css/theme/components/footer.less
+++ /dev/null
@@ -1,14 +0,0 @@
-footer {
-    padding: 20px 0;
-    color: @secondary;
-
-    a {
-        color: @secondary;
-    }
-
-    .wave {
-        height: 54px;
-        background-repeat: repeat-x;
-        background-image: url("../css/theme/components/img/wave_footer_top.png");
-    }
-}
diff --git a/src/css/theme/components/forms.less b/src/css/theme/components/forms.less
deleted file mode 100644
index 614275f..0000000
--- a/src/css/theme/components/forms.less
+++ /dev/null
@@ -1,46 +0,0 @@
-form {
-    input,
-    textarea {
-        border: 1px solid @secondary;
-        background: #fff;
-        color: @on-background;
-        padding: @space-md;
-        width: 100%;
-        max-width: 100%;
-        border-radius: @space-sm;
-        transition: all 0.2s ease-in-out;
-
-        &[readonly] {
-            opacity: 0.5;
-        }
-    }
-
-    textarea {
-        height: 200px;
-    }
-
-    button {
-        background: @primary;
-        color: @on-primary;
-        padding: @space-md @space-lg;
-        border: 1px solid @primary;
-        border-radius: @space-sm;
-        transition: all 0.2s ease-in-out;
-        cursor: pointer;
-
-        &:hover {
-            border: 1px solid #fff;
-            box-shadow: 0 0 0.4rem 0 rgba(0, 0, 0, 0.5);
-        }
-
-        &[disabled] {
-            opacity: 0.5;
-        }
-    }
-
-    .error {
-        background: @error;
-        color: @on-error;
-        padding: @space-md;
-    }
-}
diff --git a/src/css/theme/components/general.less b/src/css/theme/components/general.less
deleted file mode 100755
index 1a12937..0000000
--- a/src/css/theme/components/general.less
+++ /dev/null
@@ -1,16 +0,0 @@
-html,
-body {
-    background: @background;
-    color: @on-background;
-    font-size: @font-size-default;
-    font-weight: @font-weight-default;
-    font-family: "Nunito", sans-serif;
-    width: 100%;
-    height: 100%;
-}
-
-img {
-    &.rounded {
-        border-radius: @radius-half;
-    }
-}
diff --git a/src/css/theme/components/header.less b/src/css/theme/components/header.less
deleted file mode 100755
index 007ddb9..0000000
--- a/src/css/theme/components/header.less
+++ /dev/null
@@ -1,127 +0,0 @@
-header {
-    position: fixed;
-    width: 100%;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 1000;
-    transition: all 1s ease-in-out;
-
-    .brand {
-        margin-top: -@space-md;
-
-        @media (max-width: 992px) {
-            display: block;
-            height: 100px;
-            margin: @space-md 0;
-        }
-
-        @media (max-width: 768px) {
-            display: block;
-            height: 60px;
-            margin: @space-md 0;
-        }
-
-        img {
-            width: auto;
-            height: 100%;
-        }
-    }
-
-    .service-bar {
-        background-color: @primary;
-        color: @on-primary;
-        border-bottom-left-radius: @radius-default;
-        border-bottom-right-radius: @radius-default;
-        height: 29px;
-        line-height: 29px;
-        padding: 0 20px;
-
-        @media (max-width: 992px) {
-            display: none;
-        }
-    }
-
-    nav {
-        ul {
-            padding: 0 20px;
-            margin-top: 50px;
-            list-style: none;
-            transition: all 1s ease-in-out;
-
-            li {
-                a {
-                    font-size: 20px;
-                    color: #fff;
-                    font-weight: 700;
-                    text-decoration: none;
-
-                    &:hover {
-                        color: @primary;
-                        text-decoration: none;
-                    }
-
-                    &.active {
-                        color: @primary;
-                    }
-                }
-            }
-        }
-
-        &.show {
-            display: block;
-        }
-    }
-
-    &.scroll {
-        background: rgba(0, 0, 0, 0.7);
-        padding-bottom: @space-lg;
-
-        @media (max-width: 992px) {
-            padding-bottom: 0;
-        }
-    }
-
-    @media (max-width: 992px) {
-        background: rgba(0, 0, 0, 0.7);
-    }
-}
-
-.top-article {
-    .wave-bottom {
-        height: 200px;
-        margin-top: -33px;
-        background-image: url("../css/theme/components/img/wave_header_bottom.png");
-        background-repeat: repeat-x;
-    }
-
-    & > .articles {
-        z-index: 1;
-        margin-right: 120px;
-        margin-left: 120px;
-        display: flex;
-        justify-content: space-around;
-        align-items: stretch;
-        gap: @space-lg;
-        margin-top: -80px;
-        margin-bottom: -120px;
-
-        article {
-            width: 33%;
-        }
-
-        @media (max-width: 1200px) {
-            flex-direction: column;
-            margin-right: @space-xl;
-            margin-left: @space-xl;
-
-            article {
-                width: 100%;
-            }
-        }
-    }
-
-    *[class^="col"] {
-        margin-top: @space-md;
-    }
-}
diff --git a/src/css/theme/components/img/wave_footer_top.png b/src/css/theme/components/img/wave_footer_top.png
deleted file mode 100644
index 51aa439..0000000
Binary files a/src/css/theme/components/img/wave_footer_top.png and /dev/null differ
diff --git a/src/css/theme/components/img/wave_header_bottom.png b/src/css/theme/components/img/wave_header_bottom.png
deleted file mode 100644
index f288bff..0000000
Binary files a/src/css/theme/components/img/wave_header_bottom.png and /dev/null differ
diff --git a/src/css/theme/components/img/wave_header_top.png b/src/css/theme/components/img/wave_header_top.png
deleted file mode 100644
index e48a459..0000000
Binary files a/src/css/theme/components/img/wave_header_top.png and /dev/null differ
diff --git a/src/css/theme/components/typo.less b/src/css/theme/components/typo.less
deleted file mode 100644
index e7a1e44..0000000
--- a/src/css/theme/components/typo.less
+++ /dev/null
@@ -1,46 +0,0 @@
-a {
-    color: @on-background;
-    text-decoration: none;
-    transition: @transition-default;
-
-    &:hover {
-        color: @primary;
-        text-decoration: underline;
-    }
-}
-
-a {
-    color: @primary;
-}
-
-h1,
-.h1,
-h2,
-.h2,
-h3,
-.h3,
-h4,
-.h4,
-h5,
-.h5,
-h6,
-.h6 {
-    color: @primary;
-    font-weight: 700;
-    line-height: 1.2;
-}
-
-h1,
-.h1 {
-    font-size: 32px;
-}
-
-h2,
-.h2 {
-    font-size: 24px;
-}
-
-h3,
-.h3 {
-    font-size: 24px;
-}
diff --git a/src/css/theme/main.less b/src/css/theme/main.less
deleted file mode 100644
index 3ec2756..0000000
--- a/src/css/theme/main.less
+++ /dev/null
@@ -1,46 +0,0 @@
-// Variables
-
-@background: #f1ebe4;
-@on-background: #352a1c;
-
-@primary: #c4253e;
-@on-primary: #fff;
-
-@secondary: #bda082;
-@on-secondary: #fff;
-
-@surface: #fff;
-@on-surface: #352a1c;
-
-@error: @primary;
-@on-error: #fff;
-
-@font-size-default: 14px;
-@font-weight-default: 400;
-
-@radius-default: 25px;
-@radius-half: 12px;
-
-@transition-default: all 0.2s ease-in-out;
-
-// CSS Definitions
-
-@import "fonts";
-@import "reset";
-
-@import "components/general";
-@import "components/typo";
-@import "components/layout";
-@import "components/grid";
-@import "components/content";
-@import "components/sidebar";
-@import "components/article";
-@import "components/event";
-@import "components/header";
-@import "components/footer";
-@import "components/carousel";
-@import "components/navigation";
-@import "components/appointment";
-@import "components/cc-bar";
-@import "components/audio";
-@import "components/forms";
diff --git a/src/store.ts b/src/store.ts
index 3558e73..19880f5 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -1,5 +1,5 @@
 import { writable, get } from "svelte/store"
-import { getGeneralInformation, getArticles } from "./api"
+import { getGeneralInformation, getArticles, getNavigations } from "./api"
 
 const initLoc = {
     path: (typeof window !== "undefined" && window.location?.pathname) || "/",
@@ -10,25 +10,40 @@ const initLoc = {
 
 export const location = writable(initLoc)
 
+const locale = {
+    key: "de",
+    title: "Deutsch",
+}
+export const currentLocale = writable(locale)
+
 // General Information
 
-export const generalInformation = writable<GeneralInformation>()
+export const generalInfo = writable<GeneralInfo>()
 const getGeneralProjectInformation = async () => {
     const infos = await getGeneralInformation()
     if (infos && infos.length) {
-        generalInformation.set(infos[0])
+        generalInfo.set(infos[0])
     }
 }
 getGeneralProjectInformation()
 
 // Articles
 
-export const articles = writable<TibiArticle[]>()
-const getAllArticles = async () => {
-    const list = await getArticles()
-    articles.set(list)
+// export const articles = writable<TibiArticle[]>()
+// const getAllArticles = async () => {
+//     const list = await getArticles()
+//     articles.set(list)
+// }
+// getAllArticles()
+
+// Navigations
+
+export const navigations = writable<Navigation[]>([])
+const getAllNavigations = async (locale: Locale) => {
+    const list = await getNavigations(locale)
+    navigations.set(list)
 }
-getAllArticles()
+getAllNavigations(locale)
 
 // Cookies - Webmakers Cookie Bar
 
diff --git a/types/global.d.ts b/types/global.d.ts
index d1b8ece..e65939e 100644
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -1,3 +1,12 @@
+interface APIParams {
+    offset?: number
+    limit?: number
+    sort?: string | "ASC" | "DESC"
+    filter?: {
+        [key: string]: any
+    }
+    count?: 1
+}
 interface ContentBlock {
     layout: 1 | 2 | 3 | 4
     title?: string
@@ -10,31 +19,46 @@ interface ContentBlock {
 
 interface Content {
     id: string
+    name: string
     path: string
     blocks: ContentBlock[]
 }
 
-interface GeneralInformation {
+interface GeneralInfo {
     id: string
-    active: boolean
-    firstname: string
-    lastname: string
-    street: string
-    postcode: number
-    city: string
-    tel: string
-    mobile: string
-    email: string
-    images: GeneralImage[]
+    public: boolean
+    meta: {
+        metaTitle: string
+        metaDescription: string
+        metaTagRobots: string
+        metaKeywords: string
+    }
+    person: {
+        salutation: string
+        firstname: string
+        lastname: string
+        additional: string
+        street: string
+        postcode: number
+        city: string
+        tel: string
+        fax: string
+        mobile: string
+        email: string
+    }
+    media: {
+        favicon: File
+        brand: File
+        mediaFiles: {
+            title: string
+            alternateText: string
+            id: string
+            file: File
+        }[]
+    }
+    copyrightText: string
     insertTime: string
     updateTime: string
-    lastPageUpdate: string
-}
-
-interface GeneralImage {
-    file: File[]
-    id: string
-    label: string
 }
 
 interface TibiArticle {
@@ -57,3 +81,47 @@ interface File {
     src: string
     type: string
 }
+
+interface Gallery {
+    id: string
+    title: string
+    variant: string
+    items: {
+        file: File
+        title: string
+        descrition: string
+        alt: string
+    }[]
+}
+
+interface Navigation {
+    id: string
+    ident: string
+    locale: string
+    items: NavigationItem[]
+    insertTime: string
+    updateTime: string
+}
+
+interface NavigationItem {
+    settings: {
+        title: string
+        page: string
+        items: NavigationItem[]
+        url: {
+            url: string
+            target: string
+        }
+    }
+}
+
+interface Locale {
+    key: string
+    title: string
+}
+
+interface GeneralImage {
+    file: File[]
+    id: string
+    label: string
+}
diff --git a/yarn.lock b/yarn.lock
index 263874a..94f06b1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2621,6 +2621,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mdi/js@npm:^6.7.96":
+  version: 6.7.96
+  resolution: "@mdi/js@npm:6.7.96"
+  checksum: 8c8f6acb8fd3f856a92ffe2405e258ee5aa84cf541fda1c0a564c9c8bbf935cf2b6a6100cf97d41e9ada1ccb59e4b138d4c712e075f759d7595e21ef1cff84b5
+  languageName: node
+  linkType: hard
+
 "@nicolo-ribaudo/chokidar-2@npm:2.1.8-no-fsevents.3":
   version: 2.1.8-no-fsevents.3
   resolution: "@nicolo-ribaudo/chokidar-2@npm:2.1.8-no-fsevents.3"
@@ -7650,6 +7657,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mdi-svelte@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "mdi-svelte@npm:1.1.2"
+  checksum: ee86a87e31cd8f7f376e79f5ea40cb9382ff79a2aa57540133d3da96ad8b876258ab30fee27645cc9e3220e53de0d087c65278cc453d09455c3eb03fb79a4a8b
+  languageName: node
+  linkType: hard
+
 "memory-pager@npm:^1.0.2":
   version: 1.5.0
   resolution: "memory-pager@npm:1.5.0"
@@ -10324,6 +10338,7 @@ send@latest:
     "@babel/plugin-transform-spread": ^7.16.7
     "@babel/preset-env": ^7.16.11
     "@cypress/code-coverage": ^3.9.12
+    "@mdi/js": ^6.7.96
     "@sentry/browser": ^6.19.6
     "@sentry/tracing": ^6.19.6
     "@tsconfig/svelte": ^3.0.0
@@ -10341,6 +10356,7 @@ send@latest:
     http-proxy-middleware: ^2.0.6
     less: ^4.1.2
     live-server: ^1.2.1
+    mdi-svelte: ^1.1.2
     mongodb: ^4.5.0
     morgan: ^1.10.0
     postcss: ^8.4.12