diff --git a/app/assets/styles/dialog.css b/app/assets/styles/dialog.css
index 0f44254..7338d36 100644
--- a/app/assets/styles/dialog.css
+++ b/app/assets/styles/dialog.css
@@ -2,7 +2,7 @@
 dialog {
     top: 50%;
     left: 50%;
-    width: 100vw;
+    width: clamp(400px, 100vw, calc(var(--page-max-width) - var(--padding-xxl) * 2));
     translate: -50% -50%;
     border: none;
     border-radius: var(--radius-default);
diff --git a/app/assets/styles/landingpage.css b/app/assets/styles/landingpage.css
index 4aad055..9a6f3c6 100644
--- a/app/assets/styles/landingpage.css
+++ b/app/assets/styles/landingpage.css
@@ -26,6 +26,10 @@
 .home-text {
     padding: var(--padding-xxl) var(--padding-default);
     text-align: center;
+
+    & h3:has(+ .padding) {
+        margin-bottom: 0;
+    }
 }
 
 .timeline {
diff --git a/app/assets/styles/page.css b/app/assets/styles/page.css
index 7dd7b75..a255a75 100644
--- a/app/assets/styles/page.css
+++ b/app/assets/styles/page.css
@@ -77,4 +77,8 @@
 .Legal {
     padding: var(--padding-l) var(--padding-default);
     color: var(--color-darkest);
+
+    ul {
+        padding-left: var(--padding-default);
+    }
 }
\ No newline at end of file
diff --git a/app/assets/styles/priceCard.css b/app/assets/styles/priceCard.css
index 655f581..8052435 100755
--- a/app/assets/styles/priceCard.css
+++ b/app/assets/styles/priceCard.css
@@ -2,7 +2,7 @@
     position: relative;
     width: 100%;
     color: var(--color-darkest);
-    border-bottom: 1px solid var(--color-light);
+    border-bottom: 1px dashed var(--color-light);
 
     .bottom {
         position: absolute;
diff --git a/app/assets/styles/timelineCard.css b/app/assets/styles/timelineCard.css
index fcfd0d1..700261a 100644
--- a/app/assets/styles/timelineCard.css
+++ b/app/assets/styles/timelineCard.css
@@ -6,10 +6,9 @@
     border-radius: var(--radius-default);
     padding: var(--padding-xs);
 
-    & .icon {
+    & > .icon {
+        flex: 0 0 25%;
         font-size: var(--font-size-xxl);
-        min-width: 25%;
-        flex-shrink: 0;
         color: var(--color-main-dark);
     }
 
@@ -17,4 +16,13 @@
         text-align: left;
         flex-grow: 1;
     }
+
+    & .state {
+        --color: var(--color-darkest);
+        display: flex;
+        align-items: center;
+        gap: var(--padding-xxs);
+        margin-top: var(--padding-s);
+        color: var(--color);
+    }
 }
\ No newline at end of file
diff --git a/app/components/Pp/PriceCard.vue b/app/components/Pp/PriceCard.vue
index 72acf14..8f9280d 100755
--- a/app/components/Pp/PriceCard.vue
+++ b/app/components/Pp/PriceCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <article class="PriceCard roboto-condensed" v-ripple="{ color: 'rgba(0, 0, 0, 0.1)' }">
+  <article class="PriceCard roboto-condensed" v-ripple="$device.isMobile ? { color: 'rgba(0, 0, 0, 0.1)' } : { duration: 0, scale: 0 }">
     <div class="bottom">
       <div class="bg-edit">
         <Icon class="icon" name="uil:pen" mode="svg" />
@@ -13,7 +13,7 @@
       class="top flex-col"
       :class="{ 'animated' : !isSwiping }"
       :style="{ left }"
-      @click="update"
+      @click="cardClick"
     >
       <header>
         <div class="name-price">
@@ -58,11 +58,11 @@
 </template>
 
 <script setup lang="ts">
-import type { Card } from '../../../shared/Card'
+import type { PriceCard } from '../../../shared/PriceCard'
 
 type Props = {
   deletable: boolean
-  card: Card
+  card: PriceCard
 }
 
 const { card } = defineProps<Props>()
@@ -86,8 +86,10 @@ const { lengthX, direction, isSwiping } = useSwipe(top, {
   },
   onSwipeEnd() {
     if (['down', 'up'].includes(direction.value)) return
-    if (lengthX.value > 50) deleteCard()
-    vibrate(100)
+    if (lengthX.value > 50) {
+      vibrate(100)
+      deleteCard()
+    }
     left.value = '0'
   },
 })
@@ -97,6 +99,13 @@ const ppr = computed(() => priceClean.value / +card.roles)
 const pps = computed(() => (ppr.value / +card.sheets) * 100)
 const ppl = computed(() => (pps.value / +card.layers) * 10)
 
+const { isDesktop } = useDevice()
+
+const cardClick = () => {
+  if (isDesktop) return
+  emit('update')
+}
+
 const update = () => emit('update')
 const deleteCard = () => emit('remove')
 
diff --git a/app/components/Pp/PriceCardDialog.vue b/app/components/Pp/PriceCardDialog.vue
index 5e74207..bf0bf89 100644
--- a/app/components/Pp/PriceCardDialog.vue
+++ b/app/components/Pp/PriceCardDialog.vue
@@ -86,11 +86,11 @@
 </template>
 
 <script setup lang="ts">
-import type { Card } from '../../../shared/Card'
+import type { PriceCard } from '../../../shared/PriceCard'
 
 type Props = {
   currentCardIndex: number
-  currentCard?: Card
+  currentCard?: PriceCard
 }
 
 const { currentCardIndex, currentCard } = defineProps<Props>()
diff --git a/app/components/Pp/TimelineCard.vue b/app/components/Pp/TimelineCard.vue
index e62b390..e3c209d 100644
--- a/app/components/Pp/TimelineCard.vue
+++ b/app/components/Pp/TimelineCard.vue
@@ -4,16 +4,48 @@
     <div class="text">
       <strong>{{ title }}</strong>
       <p>{{ description }}</p>
+      <div class="state" :style="{
+        '--color': stateColor,
+      }">
+        <Icon :name="stateIcon" mode="svg" />
+        <span>{{ stateMessage }}</span>
+      </div>
     </div>
   </article>
 </template>
 
 <script setup lang="ts">
-type Props = {
-  icon: string
-  title: string
-  description: string
+import type { TimelineCard, TimelineState } from '../../../shared/TimelineCard'
+
+
+const { state } = defineProps<TimelineCard>()
+
+const icons : Record<TimelineState, string> = {
+  planned: 'uil:clock',
+  inProgress: 'uil:cog',
+  done: 'uil:check-circle'
 }
 
-defineProps<Props>()
+const colors : Record<TimelineState, string> = {
+  planned: 'var(--color-darkest)',
+  inProgress: 'var(--color-main-dark)',
+  done: 'var(--color-accent-darkest)',
+}
+
+const stateColor = computed(() => colors[state.value])
+const stateIcon = computed(() => icons[state.value])
+const stateMessage = computed(() => {
+  switch (state.value) {
+    case 'planned':
+      let planned = 'Geplant'
+      if (state.message) planned += ` für ${state.message}`
+      return planned
+    case 'inProgress':
+      return 'In Bearbeitung'
+    case 'done':
+      let done = 'Abgeschlossen'
+      if (state.message) done += ` am ${state.message}`
+      return done
+  }
+})
 </script>
\ No newline at end of file
diff --git a/app/pages/index.vue b/app/pages/index.vue
index acaf235..a99aa5f 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -3,7 +3,7 @@
     <div class="home-hero">
       <div class="text">
         <h1>
-          Du zahlst zuviel fürs Papier?
+          Du zahlst zuviel für's Papier?
         </h1>
         <NuxtLink to="/rechner">
           <PpButton class="cta">Preise vergleichen</PpButton>
@@ -13,15 +13,18 @@
         </h2>
       </div>
     </div>
-    <div class="home-text padding ">
+    <div class="home-text padding">
       <p>
         Mit <strong>ProPapier</strong> vergleichst du schnell & unkompliziert Preise für Klopapier und sparst so bares Geld.
       </p>
     </div>
-    <div class="home-text padding ">
+    <div class="home-text padding">
       <h3>
         Wir haben noch viel vor!
       </h3>
+      <p class="padding">
+        Für ProPapier sind über die nächste Zeit noch einige weitere Features geplant.
+      </p>
       <div class="timeline">
         <PpTimelineCard
           v-for="card in timeline"
@@ -33,46 +36,62 @@
 </template>
 
 <script setup lang="ts">
+import type { TimelineCard } from '../../shared/TimelineCard'
+
 definePageMeta({
   layout: 'landingpage'
 })
 
-type Card = {
-  icon: string
-  title: string
-  description: string
-}
-
-const timeline : Card[] = [
+const timeline : TimelineCard[] = [
   {
     icon: 'uil:chart-bar',
     title: 'Mehr Vergleiche',
     description: 'Zusätzliche Kategorien für Taschentücher und Küchenrolle',
+    state: {
+      value: 'inProgress',
+    }
   },
   {
     icon: 'uil:cloud-database-tree',
     title: 'Datenbank',
-    description: 'Eine von der Community gestützte Datenbank mit Preisen für alle Produkte'
+    description: 'Eine von der Community gestützte Datenbank mit Preisen für alle Produkte',
+    state: {
+      value: 'planned',
+      message: '2025',
+    }
   },
   {
     icon: 'uil:qrcode-scan',
     title: 'Barcode Scan',
-    description: 'Ganz einfach Barcode Scannen und Produkt direkt zum Rechner hinzufügen'
+    description: 'Ganz einfach Barcode Scannen und Produkt direkt zum Rechner hinzufügen',
+    state: {
+      value: 'planned',
+      message: '2025',
+    }
   },
   {
     icon: 'uil:user',
     title: 'Optionale Accounts',
-    description: 'Zur Synchronisierung auf mehreren Geräten'
+    description: 'Zur Synchronisierung auf mehreren Geräten',
+    state: {
+      value: 'planned',
+    }
   },
   {
     icon: 'uil:cog',
     title: 'Personalisierung',
-    description: 'Persönliche Präferenzen zur Wortwahl, Standardsortierung und mehr'
+    description: 'Persönliche Präferenzen zur Wortwahl, Standardsortierung und mehr',
+    state: {
+      value: 'planned',
+    }
   },
   {
     icon: 'uil:vector-square',
     title: 'm² Preise',
-    description: 'Quadratmeterpreise für noch genauere Vergleiche'
+    description: 'Quadratmeterpreise für noch genauere Vergleiche',
+    state: {
+      value: 'planned',
+    }
   },
 ]
 </script>
\ No newline at end of file
diff --git a/app/pages/privacy.vue b/app/pages/privacy.vue
index fc8b2b6..59949cc 100644
--- a/app/pages/privacy.vue
+++ b/app/pages/privacy.vue
@@ -1,14 +1,53 @@
 <template>
   <section class="Legal flex-col gap-default content full">
-    <h1>
-      Datenschutzerklärung
-    </h1>
-    <p>
-      Wir sammeln anonyme Daten zum Erstellen von Statistiken über die Anzahl der Besuche auf unserer Seite, um herauszufinden, wie viel Pflegeaufwand und Rechenleistung benötigt wird.
-    </p>
-    <p>
-      Alle persistierten Daten befinden sich ausschließlich auf Ihrem Endgerät im sogenannten "localStorage" und werden ausschließlich auf Ihrem Gerät verarbeitet.
-    </p>
+    <h2>1) Einleitung und Kontaktdaten des Verantwortlichen</h2>
+    <p><b>1.1</b>&nbsp;Wir freuen uns, dass du unsere Website besuchst und bedanken uns f&uuml;r dein Interesse. Im Folgenden informieren wir dich &uuml;ber den Umgang mit deinen personenbezogenen Daten bei der Nutzung unserer Website. Personenbezogene Daten sind hierbei alle Daten, mit denen du pers&ouml;nlich identifiziert werden kannst.</p>
+    <p><b>1.2</b>&nbsp;Verantwortlicher f&uuml;r die Datenverarbeitung auf dieser Website im Sinne der Datenschutz-Grundverordnung (DSGVO) ist Fiona Lena Urban, Teichäckerweg 39, 76297 Stutensee , Tel.: 017631640961, E-Mail: fiona@webfussel.de. Der f&uuml;r die Verarbeitung von personenbezogenen Daten Verantwortliche ist diejenige nat&uuml;rliche oder juristische Person, die allein oder gemeinsam mit anderen &uuml;ber die Zwecke und Mittel der Verarbeitung von personenbezogenen Daten entscheidet.</p>
+    <h2>2) Datenerfassung beim Besuch unserer Website</h2>
+    <p><b>2.1</b>&nbsp;Bei der blo&szlig; informatorischen Nutzung unserer Website, also wenn du dich nicht registrierst oder uns anderweitig Informationen &uuml;bermittelst, erheben wir nur solche Daten, die dein Browser an den Seitenserver &uuml;bermittelt (sog. &bdquo;Server-Logfiles&#8220;). Wenn du unsere Website aufrufst, erheben wir die folgenden Daten, die f&uuml;r uns technisch erforderlich sind, um dir die Website anzuzeigen:</p>
+    <ul>
+      <li>Unsere besuchte Website</li>
+      <li>Datum und Uhrzeit zum Zeitpunkt des Zugriffs</li>
+      <li>Menge der gesendeten Daten in Byte</li>
+      <li>Quelle/Verweis, von welchem du auf die Seite gelangtest</li>
+      <li>Verwendeter Browser</li>
+      <li>Verwendetes Betriebssystem</li>
+      <li>Verwendete IP-Adresse (ggf.: in anonymisierter Form)</li>
+    </ul>
+    <p>Die Verarbeitung erfolgt gem&auml;&szlig; Art. 6 Abs. 1 lit. f DSGVO auf Basis unseres berechtigten Interesses an der Verbesserung der Stabilit&auml;t und Funktionalit&auml;t unserer Website. Eine Weitergabe oder anderweitige Verwendung der Daten findet nicht statt. Wir behalten uns allerdings vor, die Server-Logfiles nachtr&auml;glich zu &uuml;berpr&uuml;fen, sollten konkrete Anhaltspunkte auf eine rechtswidrige Nutzung hinweisen.</p>
+    <p><b>2.2</b>&nbsp;Diese Website nutzt aus Sicherheitsgr&uuml;nden und zum Schutz der &Uuml;bertragung personenbezogener Daten und anderer vertraulicher Inhalte (z.B. Bestellungen oder Anfragen an uns) eine SSL-bzw. TLS-Verschl&uuml;sselung. Du kannst eine verschl&uuml;sselte Verbindung an der Zeichenfolge &bdquo;https://&#8220; und dem Schloss-Symbol in deiner Browserzeile erkennen.</p>
+    <h2>3) Kontaktaufnahme</h2>
+    <p>Im Rahmen der Kontaktaufnahme mit uns (z.B. per Kontaktformular oder E-Mail) werden &ndash; ausschlie&szlig;lich zum Zweck der Bearbeitung und Beantwortung deines Anliegens und nur im daf&uuml;r erforderlichen Umfang &ndash; personenbezogene Daten verarbeitet.</p>
+    <p>Rechtsgrundlage f&uuml;r die Verarbeitung dieser Daten ist unser berechtigtes Interesse an der Beantwortung deines Anliegens gem&auml;&szlig; Art. 6 Abs. 1 lit. f DSGVO. Zielt deine Kontaktierung auf einen Vertrag ab, so ist zus&auml;tzliche Rechtsgrundlage f&uuml;r die Verarbeitung Art. 6 Abs. 1 lit. b DSGVO. Deine Daten werden gel&ouml;scht, wenn sich aus den Umst&auml;nden entnehmen l&auml;sst, dass der betroffene Sachverhalt abschlie&szlig;end gekl&auml;rt ist und sofern keine gesetzlichen Aufbewahrungspflichten entgegenstehen.</p>
+    <h2>4) Webanalysedienste</h2>
+    <p>Plausible</p>
+    <p>Diese Website nutzt &bdquo;Plausible&#8220;, ein Webanalyse-Tool der Firma Plausible Insights O&Uuml; V&auml;striku tn 2, 50403, Tartu, Estland.</p>
+    <p>Es werden damit Interaktionen von zuf&auml;llig ausgew&auml;hlten, einzelnen Besuchern mit der Internetseite anonymisiert aufgezeichnet. So entsteht ein Protokoll von z.B. Mausbewegungen und -Klicks mit dem Ziel, Verbesserungsm&ouml;glichkeiten der jeweiligen Internetseite aufzuzeigen. Zu keinem Zeitpunkt werden personenbezogene Daten erhoben oder verarbeitet. Plausible erhebt bei der Nutzung dieser Internetseite ausschlie&szlig;lich nicht personenbezogene Daten wie Informationen zum Browser und zum User Agent. Diese werden in nicht personenbeziehbarer Form gespeichert und zu statistischen Zwecken ausgewertet. Eine L&ouml;schung findet statt, sobald die Daten f&uuml;r unsere Auswertungszwecke nicht mehr ben&ouml;tigt werden.</p>
+    <p>Sofern im Einzelfall doch personenbezogene Daten verarbeitet werden, erfolgt die Verarbeitung auf Basis unseres berechtigten Interesses an der statistischen Auswertung des Nutzungsverhaltens zu Optimierungszwecken gem&auml;&szlig; Art. 6 Abs. 1 lit. f DSGVO.</p>
+    <h2>5) Rechte des Betroffenen</h2>
+    <p><b>5.1</b>&nbsp;Das geltende Datenschutzrecht gew&auml;hrt dir gegen&uuml;ber uns als Verantwortlichen hinsichtlich der Verarbeitung deiner personenbezogenen Daten die nachstehenden Betroffenenrechte (Auskunfts- und Interventionsrechte), wobei f&uuml;r die jeweiligen Aus&uuml;bungsvoraussetzungen auf die angef&uuml;hrte Rechtsgrundlage verwiesen wird:</p>
+    <ul>
+      <li>Auskunftsrecht gem&auml;&szlig; Art. 15 DSGVO;</li>
+      <li>Recht auf Berichtigung gem&auml;&szlig; Art. 16 DSGVO;</li>
+      <li>Recht auf L&ouml;schung gem&auml;&szlig; Art. 17 DSGVO;</li>
+      <li>Recht auf Einschr&auml;nkung der Verarbeitung gem&auml;&szlig; Art. 18 DSGVO;</li>
+      <li>Recht auf Unterrichtung gem&auml;&szlig; Art. 19 DSGVO;</li>
+      <li>Recht auf Daten&uuml;bertragbarkeit gem&auml;&szlig; Art. 20 DSGVO;</li>
+      <li>Recht auf Widerruf erteilter Einwilligungen gem&auml;&szlig; Art. 7 Abs. 3 DSGVO;</li>
+      <li>Recht auf Beschwerde gem&auml;&szlig; Art. 77 DSGVO.</li>
+    </ul>
+    <p><b>5.2</b>&nbsp;WIDERSPRUCHSRECHT</p>
+    <p>WENN WIR IM RAHMEN EINER INTERESSENABW&Auml;GUNG DEINE PERSONENBEZOGENEN DATEN AUFGRUND UNSERES &Uuml;BERWIEGENDEN BERECHTIGTEN INTERESSES VERARBEITEN, HAST DU DAS JEDERZEITIGE RECHT, AUS GR&Uuml;NDEN, DIE SICH AUS DEINER BESONDEREN SITUATION ERGEBEN, GEGEN DIESE VERARBEITUNG WIDERSPRUCH MIT WIRKUNG F&Uuml;R DIE ZUKUNFT EINZULEGEN.</p>
+    <p>MACHST DU VON DEINEM WIDERSPRUCHSRECHT GEBRAUCH, BEENDEN WIR DIE VERARBEITUNG DER BETROFFENEN DATEN. EINE WEITERVERARBEITUNG BLEIBT ABER VORBEHALTEN, WENN WIR ZWINGENDE SCHUTZW&Uuml;RDIGE GR&Uuml;NDE F&Uuml;R DIE VERARBEITUNG NACHWEISEN K&Ouml;NNEN, DIE DEINE INTERESSEN, GRUNDRECHTE UND GRUNDFREIHEITEN &Uuml;BERWIEGEN, ODER WENN DIE VERARBEITUNG DER GELTENDMACHUNG, AUS&Uuml;BUNG ODER VERTEIDIGUNG VON RECHTSANSPR&Uuml;CHEN DIENT.</p>
+    <p>WERDEN DEINE PERSONENBEZOGENEN DATEN VON UNS VERARBEITET, UM DIREKTWERBUNG ZU BETREIBEN, HAST DU DAS RECHT, JEDERZEIT WIDERSPRUCH GEGEN DIE VERARBEITUNG DIR BETREFFENDER PERSONENBEZOGENER DATEN ZUM ZWECKE DERARTIGER WERBUNG EINZULEGEN. DU KANNST DEN WIDERSPRUCH WIE OBEN BESCHRIEBEN AUS&Uuml;BEN.</p>
+    <p>MACHST DU VON DEINEM WIDERSPRUCHSRECHT GEBRAUCH, BEENDEN WIR DIE VERARBEITUNG DER BETROFFENEN DATEN ZU DIREKTWERBEZWECKEN.</p>
+    <h2>6) Dauer der Speicherung personenbezogener Daten</h2>
+    <p>Die Dauer der Speicherung von personenbezogenen Daten bemisst sich anhand der jeweiligen Rechtsgrundlage, am Verarbeitungszweck und &ndash; sofern einschl&auml;gig &ndash; zus&auml;tzlich anhand der jeweiligen gesetzlichen Aufbewahrungsfrist (z.B. handels- und steuerrechtliche Aufbewahrungsfristen).</p>
+    <p>Bei der Verarbeitung von personenbezogenen Daten auf Grundlage einer ausdr&uuml;cklichen Einwilligung gem&auml;&szlig; Art. 6 Abs. 1 lit. a DSGVO werden die betroffenen Daten so lange gespeichert, bis du deine Einwilligung widerrufst.</p>
+    <p>Existieren gesetzliche Aufbewahrungsfristen f&uuml;r Daten, die im Rahmen rechtsgesch&auml;ftlicher bzw. rechtsgesch&auml;fts&auml;hnlicher Verpflichtungen auf der Grundlage von Art. 6 Abs. 1 lit. b DSGVO verarbeitet werden, werden diese Daten nach Ablauf der Aufbewahrungsfristen routinem&auml;&szlig;ig gel&ouml;scht, sofern sie nicht mehr zur Vertragserf&uuml;llung oder Vertragsanbahnung erforderlich sind und/oder unsererseits kein berechtigtes Interesse an der Weiterspeicherung fortbesteht.</p>
+    <p>Bei der Verarbeitung von personenbezogenen Daten auf Grundlage von Art. 6 Abs. 1 lit. f DSGVO werden diese Daten so lange gespeichert, bis du dein Widerspruchsrecht nach Art. 21 Abs. 1 DSGVO aus&uuml;bst, es sei denn, wir k&ouml;nnen zwingende schutzw&uuml;rdige Gr&uuml;nde f&uuml;r die Verarbeitung nachweisen, die deine Interessen, Rechte und Freiheiten &uuml;berwiegen, oder die Verarbeitung dient der Geltendmachung, Aus&uuml;bung oder Verteidigung von Rechtsanspr&uuml;chen.</p>
+    <p>Bei der Verarbeitung von personenbezogenen Daten zum Zwecke der Direktwerbung auf Grundlage von Art. 6 Abs. 1 lit. f DSGVO werden diese Daten so lange gespeichert, bis du dein Widerspruchsrecht nach Art. 21 Abs. 2 DSGVO aus&uuml;bst.</p>
+    <p>Sofern sich aus den sonstigen Informationen dieser Erkl&auml;rung &uuml;ber spezifische Verarbeitungssituationen nichts anderes ergibt, werden gespeicherte personenbezogene Daten im &Uuml;brigen dann gel&ouml;scht, wenn sie f&uuml;r die Zwecke, f&uuml;r die sie erhoben oder auf sonstige Weise verarbeitet wurden, nicht mehr notwendig sind.</p>
   </section>
 </template>
 
diff --git a/app/pages/rechner.vue b/app/pages/rechner.vue
index 2ec0063..23b7153 100755
--- a/app/pages/rechner.vue
+++ b/app/pages/rechner.vue
@@ -46,19 +46,19 @@
 </template>
 
 <script setup lang="ts">
-import type { Card } from '../../shared/Card'
+import type { PriceCard } from '../../shared/PriceCard'
 import type { Button } from '../../shared/ButtonGroup'
 import { PpPriceCardDialog, PpDeleteDialog, PpPriceCard } from '#components'
 
-const cards = useLocalStorage<Card[]>('cards', [])
+const cards = useLocalStorage<PriceCard[]>('cards', [])
 const currentSort = useLocalStorage<number>('sort', 0)
-const currentCard = ref<Card>()
+const currentCard = ref<PriceCard>()
 const currentCardIndex = ref<number>(-1)
 const modal = useTemplateRef<typeof PpPriceCardDialog>('modal')
 const deleteModal = useTemplateRef<typeof PpDeleteDialog>('deleteModal')
 const priceCards = useTemplateRef<(typeof PpPriceCard)[]>('priceCard')
 
-const createCard = (uuid : string) : Card => ({
+const createCard = (uuid : string) : PriceCard => ({
   uuid,
   name: '',
   price: '',
@@ -68,7 +68,7 @@ const createCard = (uuid : string) : Card => ({
 })
 
 
-const addCard = (card : Card) => {
+const addCard = (card : PriceCard) => {
   cards.value.unshift({ ...card })
   sort()
 }
diff --git a/docker-compose.yaml b/docker-compose.yaml
new file mode 100644
index 0000000..92f7821
--- /dev/null
+++ b/docker-compose.yaml
@@ -0,0 +1,47 @@
+version: '3'
+
+services:
+  propapier:
+    image: oven/bun:latest
+    container_name: propapier
+    working_dir: /app
+    ports:
+      - "1338:3000"
+    volumes:
+      - propapier_data:/app
+    environment:
+      - NODE_ENV=production
+    command: >
+      sh -c "
+        # Install git and curl if not already installed
+        if ! command -v git &> /dev/null || ! command -v curl &> /dev/null; then
+          echo 'Installing required packages...'
+          apt-get update && apt-get install -y git curl
+        fi &&
+
+        # Clone repository if not already cloned
+        if [ ! -d /app/.git ]; then
+          echo 'Cloning repository...'
+          git clone https://git.webfussel.de/webfussel/propapier /tmp/propapier &&
+          cp -r /tmp/propapier/. /app/ &&
+          rm -rf /tmp/propapier
+        fi &&
+
+        # Install dependencies and start application
+        echo 'Installing dependencies...' &&
+        bun install &&
+        echo 'Building application...' &&
+        bun run build &&
+        echo 'Starting application...' &&
+        bun .output/server/index.mjs
+      "
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:1338"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 40s
+
+volumes:
+  propapier_data:
diff --git a/nuxt.config.ts b/nuxt.config.ts
index be7a85a..7aba57a 100755
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,4 +1,5 @@
-// https://nuxt.com/docs/api/configuration/nuxt-config
+const description = 'Du zahlst zuviel für\'s Papier? Vergleiche schnell und unkompliziert die Preise für Toiletten-, Küchen- und andere Papier hier.'
+
 export default defineNuxtConfig({
   compatibilityDate: '2024-11-01',
   devtools: { enabled: false },
@@ -73,7 +74,7 @@ export default defineNuxtConfig({
   seo: {
     meta: {
       title: 'ProPapier',
-      description: '"Bezahlt du zuviel fürs Papier? Vergleiche schnell und unkompliziert die Preise für Toiletten-, Küchen- und andere Papier hier."',
+      description,
       themeColor: [
         { content: '#18181b', media: '(prefers-color-scheme: dark)' },
         { content: 'white', media: '(prefers-color-scheme: light)' },
@@ -85,14 +86,15 @@ export default defineNuxtConfig({
       applicationName: 'ProPapier',
 
       // Nuxt SEO Utils already sets the below tags for you
-      ogSiteName: 'Propapier',
+      ogSiteName: 'ProPapier',
       ogLocale: 'de_DE',
       ogType: 'website',
       ogUrl: 'https://pro-papier.de',
       ogTitle: 'ProPapier',
+      ogDescription: description,
 
       // Other Nuxt SEO modules handles these
-      ogImage: 'https://example.com/my-og-image.png',
+      ogImage: '/img/og.png',
       robots: 'index, follow',
     }
   },
diff --git a/public/img/og.png b/public/img/og.png
new file mode 100755
index 0000000..ff58730
Binary files /dev/null and b/public/img/og.png differ
diff --git a/shared/Card.ts b/shared/PriceCard.ts
similarity index 80%
rename from shared/Card.ts
rename to shared/PriceCard.ts
index 9937a0d..4ad9249 100644
--- a/shared/Card.ts
+++ b/shared/PriceCard.ts
@@ -1,4 +1,4 @@
-export type Card = {
+export type PriceCard = {
   uuid : string
   name : string
   price : string
diff --git a/shared/TimelineCard.ts b/shared/TimelineCard.ts
new file mode 100644
index 0000000..63513fa
--- /dev/null
+++ b/shared/TimelineCard.ts
@@ -0,0 +1,11 @@
+export type TimelineState = 'planned' | 'inProgress' | 'done'
+
+export type TimelineCard = {
+  icon: string
+  title: string
+  description: string
+  state: {
+    value: TimelineState
+    message ?: string
+  }
+}
\ No newline at end of file