diff --git a/app/app.vue b/app/app.vue
index 56302ca..86f6369 100755
--- a/app/app.vue
+++ b/app/app.vue
@@ -1,5 +1,7 @@
 <template>
   <PpHeader />
-  <NuxtPage />
+  <div class="page">
+    <NuxtPage />
+  </div>
   <PpFooter />
 </template>
diff --git a/app/assets/styles/button.css b/app/assets/styles/button.css
index 2373e67..11a6a95 100755
--- a/app/assets/styles/button.css
+++ b/app/assets/styles/button.css
@@ -93,6 +93,18 @@
         }
     }
 
+    &.search-button {
+        --background: var(--color-lightest);
+        --color: var(--color-main-darkest);
+        border-radius: 100%;
+        padding: var(--padding);
+        font-size: 1.1em;
+
+        &:hover {
+            scale: 1.2;
+        }
+    }
+
     &.mini-button {
         padding: .5rem 1.5rem;
         display: flex;
diff --git a/app/assets/styles/buttonGroup.css b/app/assets/styles/buttonGroup.css
index f36e007..4b46732 100644
--- a/app/assets/styles/buttonGroup.css
+++ b/app/assets/styles/buttonGroup.css
@@ -1,7 +1,6 @@
 .ButtonGroup {
     display: flex;
     background: var(--color-main);
-    box-shadow: var(--box-shadow-z2);
 
     & button {
         --color: var(--color-light);
diff --git a/app/assets/styles/fonts.css b/app/assets/styles/fonts.css
new file mode 100755
index 0000000..e4a4fec
--- /dev/null
+++ b/app/assets/styles/fonts.css
@@ -0,0 +1,24 @@
+@font-face {
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-stretch: 100%;
+    font-display: swap;
+    src: url('/fonts/opensans.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Roboto Condensed';
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url('/fonts/roboto_con_reg.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Roboto Condensed';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('/fonts/roboto_con_bold.woff2') format('woff2');
+}
diff --git a/app/assets/styles/formInput.css b/app/assets/styles/form/input.css
similarity index 100%
rename from app/assets/styles/formInput.css
rename to app/assets/styles/form/input.css
diff --git a/app/assets/styles/form/search.css b/app/assets/styles/form/search.css
new file mode 100644
index 0000000..5a30772
--- /dev/null
+++ b/app/assets/styles/form/search.css
@@ -0,0 +1,15 @@
+.Search {
+    border-radius: 9999px;
+    background: var(--color-lightest);
+    padding: 0 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+
+    & > input {
+        all: unset;
+        flex-grow: 1;
+        padding: .5rem 0;
+    }
+}
\ No newline at end of file
diff --git a/app/assets/styles/general.css b/app/assets/styles/general.css
index 5b917b1..5c77913 100755
--- a/app/assets/styles/general.css
+++ b/app/assets/styles/general.css
@@ -58,6 +58,7 @@ body {
     height: 100%;
     overflow-x: hidden;
     font-family: sans-serif;
+    background: var(--color-main-darkest);
 }
 
 .dot {
@@ -103,10 +104,6 @@ body {
     box-shadow: var(--box-shadow-z2);
 }
 
-.content {
-    min-height: 100dvh;
-}
-
 .flex-col {
     display: flex;
     flex-direction: column;
diff --git a/app/assets/styles/header.css b/app/assets/styles/header.css
index a59130e..43b0c3f 100755
--- a/app/assets/styles/header.css
+++ b/app/assets/styles/header.css
@@ -1,57 +1,67 @@
 .Header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: var(--padding-default);
-    background-color: rgba(255 255 255 / .8);
-    backdrop-filter: blur(10px);
-    box-shadow: var(--box-shadow-z2);
-    color: var(--color-darkest);
     position: sticky;
     top: 0;
     z-index: 100;
+    background: var(--color-main-darkest);
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: var(--padding-default);
 
-    & strong {
-        font-size: 2em;
-
-        & span {
-            color: var(--color-main-dark);
-        }
+    & .logo {
+        height: 40px;
     }
 
-    & input[type="checkbox"] {
-        display: none;
-    }
-
-    & input[type="checkbox"]:checked + nav {
-        translate: 0;
-    }
-
-    & nav,
-    & ul {
-        gap: 1em;
-    }
-
-    & nav {
-        position: fixed;
-        padding: var(--padding-default);
-        translate: 100% 0;
-        width: 100vw;
-        right: 0;
-        top: 0;
-        height: 100dvh;
-        transition: 150ms ease-in-out;
-        background: var(--color-lightest);
-        font-size: 2em;
-        align-items: end;
-        z-index: 100;
-    }
-
-    & ul {
-        width: 100%;
+    & header {
+        display: flex;
         align-items: center;
-        & li {
-            list-style: none;
+        justify-content: space-between;
+        font-family: 'Roboto', sans-serif;
+        font-weight: bold;
+
+        & a {
+            text-decoration: none;
+            color: var(--color-lightest);
+        }
+
+        & .header-text {
+            font-size: 1.5em;
+        }
+
+        & input[type="checkbox"] {
+            display: none;
+        }
+
+        & input[type="checkbox"]:checked + nav {
+            translate: 0;
+        }
+
+        & nav,
+        & ul {
+            gap: 1em;
+        }
+
+        & nav {
+            position: fixed;
+            padding: var(--padding-default);
+            translate: 100% 0;
+            width: 100vw;
+            right: 0;
+            top: 0;
+            height: 100dvh;
+            transition: 150ms ease-in-out;
+            background: var(--color-lightest);
+            font-size: 2em;
+            align-items: end;
+            z-index: 100;
+        }
+
+        & ul {
+            width: 100%;
+            align-items: center;
+            & li {
+                list-style: none;
+            }
         }
     }
 }
\ No newline at end of file
diff --git a/app/assets/styles/page.css b/app/assets/styles/page.css
new file mode 100644
index 0000000..eb9426d
--- /dev/null
+++ b/app/assets/styles/page.css
@@ -0,0 +1,40 @@
+.filter-bar {
+    background: var(--color-lightest);
+    display: flex;
+    justify-content: space-between;
+    padding: 1rem;
+
+    & > button {
+        all: unset;
+        cursor: pointer;
+        color: var(--color-main-darkest);
+        font-weight: bolder;
+        font-family: 'Roboto', sans-serif;
+
+        &.active {
+            color: var(--color-main-darkest);
+        }
+
+        &:not(.active) {
+            opacity: .5;
+        }
+    }
+}
+
+.search-bar {
+    z-index: 100;
+
+    & p {
+        font-family: 'Roboto Condensed', sans-serif;
+        font-weight: lighter;
+        color: var(--color-lightest);
+    }
+}
+
+.content {
+    min-height: 100dvh;
+    border-top-left-radius: 15px;
+    border-top-right-radius: 15px;
+    overflow: hidden;
+    background: var(--color-lightest);
+}
\ No newline at end of file
diff --git a/app/assets/styles/priceCard.css b/app/assets/styles/priceCard.css
index b108971..a922b25 100755
--- a/app/assets/styles/priceCard.css
+++ b/app/assets/styles/priceCard.css
@@ -3,6 +3,7 @@
     width: 100%;
     color: var(--color-darkest);
     border-bottom: 1px solid var(--color-light);
+    font-family: 'Roboto', sans-serif;
 
     .bottom {
         position: absolute;
@@ -78,6 +79,10 @@
                 margin-right: .5rem;
                 color: var(--color-middle);
             }
+
+            & > span:nth-child(2) {
+                font-family: 'Roboto Condensed', sans-serif;
+            }
         }
 
         & .wrapper {
@@ -86,6 +91,7 @@
             width: 100%;
             gap: 1rem;
             justify-content: space-between;
+            font-family: 'Roboto Condensed', sans-serif;
 
             & > .info {
                 flex-grow: 0;
@@ -104,7 +110,7 @@
                 }
 
                 & > .pro {
-                    font-size: .6rem;
+                    font-size: .5rem;
                     color: var(--color-middle);
                     font-weight: lighter;
                 }
diff --git a/app/components/Pp/FormInput.vue b/app/components/Pp/Form/Input.vue
similarity index 100%
rename from app/components/Pp/FormInput.vue
rename to app/components/Pp/Form/Input.vue
diff --git a/app/components/Pp/Form/Search.vue b/app/components/Pp/Form/Search.vue
new file mode 100755
index 0000000..db72ba8
--- /dev/null
+++ b/app/components/Pp/Form/Search.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="Search">
+    <input
+        v-model="text"
+        :id="id"
+        :placeholder="label"
+        @blur="emit('search', text)"
+    />
+    <PpButton class="search-button">
+      <Icon name="uil:search" mode="svg" />
+    </PpButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+type Props = {
+  label : string
+  id : string
+}
+
+defineProps<Props>()
+
+const emit = defineEmits(['search'])
+const text = defineModel()
+</script>
diff --git a/app/components/Pp/Header.vue b/app/components/Pp/Header.vue
index 63018c4..e64430a 100755
--- a/app/components/Pp/Header.vue
+++ b/app/components/Pp/Header.vue
@@ -1,31 +1,30 @@
 <template>
-  <header class="Header">
-    <NuxtLink to="/">
-      <strong><span>Pro</span>Papier</strong>
-    </NuxtLink>
-    <label for="burger_nav_toggle" v-if="available">
-      <Icon name="solar:hamburger-menu-broken" size="2em" />
-    </label>
-    <input type="checkbox" id="burger_nav_toggle" v-if="available" />
-    <nav class="flex-col" v-if="available">
-      <label for="burger_nav_toggle">
-        <Icon name="solar:close-circle-broken" />
-      </label>
-      <ul class="flex-col">
-        <li>Home</li>
-        <li>Übersicht</li>
-      </ul>
-    </nav>
-  </header>
+  <div class="Header">
+    <img class="logo" src="/img/propapier.svg" alt="ProPapier logo" />
+    <div>
+      <header>
+        <NuxtLink class="header-text" to="/">
+          ProPapier
+        </NuxtLink>
+        <label for="burger_nav_toggle" v-if="available">
+          <Icon name="solar:hamburger-menu-broken" size="2em" />
+        </label>
+        <input type="checkbox" id="burger_nav_toggle" v-if="available" />
+        <nav class="flex-col" v-if="available">
+          <label for="burger_nav_toggle">
+            <Icon name="solar:close-circle-broken" />
+          </label>
+          <ul class="flex-col">
+            <li>Home</li>
+            <li>Übersicht</li>
+          </ul>
+        </nav>
+      </header>
+      <div id="subheader" />
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
 const available = false
 </script>
-
-<style scoped>
-  header a {
-    text-decoration: none;
-    color: var(--color-black);
-  }
-</style>
\ No newline at end of file
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 4e386fc..1424bee 100755
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,51 +1,48 @@
 <template>
-  <ClientOnly>
-    <PpDeleteDialog
-      ref="deleteModal"
-      :current-card-index="currentCardIndex"
-      @delete="removeCard(currentCardIndex)"
-    />
-    <PpPriceCardDialog
-      ref="modal"
-      :current-card="currentCard"
-      :current-card-index="currentCardIndex"
-      @update="updateCard()"
-    />
-    <section class="content flex-col">
-      <aside class="filter-bar">
-        <PpButtonGroup
-          :buttons="filterButtons"
-          @click="sort"
-        />
-      </aside>
-      <div class="flex-col" role="list">
+  <div>
+    <ClientOnly>
+      <PpDeleteDialog
+        ref="deleteModal"
+        :current-card-index="currentCardIndex"
+        @delete="removeCard(currentCardIndex)"
+      />
+      <PpPriceCardDialog
+          ref="modal"
+          :current-card="currentCard"
+          :current-card-index="currentCardIndex"
+          @update="updateCard()"
+      />
+      <Teleport to="#subheader">
+        <div class="search-bar">
+          <p>Preisvergleich. Schnell. Unkompliziert.</p>
+        </div>
+      </Teleport>
+      <section class="content flex-col">
+        <aside class="filter-bar">
+          <button v-for="(button, index) in filterButtons" @click="() => sort(index)" :class="{ 'active': button.active }">
+            {{ button.label }}
+          </button>
+        </aside>
+        <div class="flex-col" role="list">
           <PpPriceCard
-            ref="priceCard"
-            v-for="(card, index) in cards"
-            :key="card.uuid"
-            :deletable="cards.length > 1"
-            :card="card"
-            @update="openModal(false, index)"
-            @remove="openDeleteModal()"
+              ref="priceCard"
+              v-for="(card, index) in cards"
+              :key="card.uuid"
+              :deletable="cards.length > 1"
+              :card="card"
+              @update="openModal(false, index)"
+              @remove="openDeleteModal()"
           />
-      </div>
-    </section>
-    <PpToolbar>
-      <PpButton class="mini-button text-white transparent" @click="sort(currentSort)">
-        <Icon class="icon" name="uil:refresh" mode="svg" />
-        <span>Neu sortieren</span>
-        <span
-          class="dot"
-          :class="{ visible : isDirty}"
-          aria-hidden="true"
-        />
-      </PpButton>
-      <PpButton class="mini-button text-white transparent" @click="openModal(true, -1)">
-        <Icon class="icon" name="uil:plus" mode="svg" />
-        <span>Hinzufügen</span>
-      </PpButton>
-    </PpToolbar>
-  </ClientOnly>
+        </div>
+      </section>
+      <PpToolbar>
+        <PpButton class="mini-button text-white transparent" @click="openModal(true, -1)">
+          <Icon class="icon" name="uil:plus" mode="svg" />
+          <span>Hinzufügen</span>
+        </PpButton>
+      </PpToolbar>
+    </ClientOnly>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -55,7 +52,6 @@ import { PpPriceCardDialog, PpDeleteDialog, PpPriceCard } from '#components'
 
 const cards = useLocalStorage<Card[]>('cards', [])
 const currentSort = useLocalStorage<number>('sort', 0)
-const isDirty = ref(false)
 const currentCard = ref<Card>()
 const currentCardIndex = ref<number>(-1)
 const modal = useTemplateRef<typeof PpPriceCardDialog>('modal')
@@ -74,12 +70,12 @@ const createCard = (uuid : string) : Card => ({
 
 const addCard = (card : Card) => {
   cards.value.unshift({ ...card })
-  isDirty.value = true
+  sort()
 }
 
 const removeCard = (index : number) => {
   cards.value.splice(index, 1)
-  isDirty.value = true
+  sort()
 }
 
 const updateCard = () => {
@@ -90,7 +86,7 @@ const updateCard = () => {
 
   const newCard = { ...currentCard.value! }
   cards.value.splice(currentCardIndex.value, 1, newCard)
-  isDirty.value = true
+  sort()
 }
 
 const openModal = (createNew : boolean, index : number) => {
@@ -139,23 +135,17 @@ const sortBy = (key : 'ppr' | 'pps' | 'ppl') => {
   })
 }
 
-const sort = (index : number) => {
+const sort = async (index : number = currentSort.value) => {
   currentSort.value = index
   filterButtons.value.forEach(button => { button.active = false })
   filterButtons.value[index]!.active = true
 
-  switch (index) {
-    case 0:
-      sortBy('ppr')
-      break
-    case 1:
-      sortBy('pps')
-      break
-    case 2:
-      sortBy('ppl')
-      break
-  }
+  await nextTick()
 
-  isDirty.value = false
+  switch (index) {
+    case 0: return sortBy('ppr')
+    case 1: return sortBy('pps')
+    case 2: return sortBy('ppl')
+  }
 }
 </script>
diff --git a/app/pages/other.vue b/app/pages/other.vue
new file mode 100644
index 0000000..bd60632
--- /dev/null
+++ b/app/pages/other.vue
@@ -0,0 +1,165 @@
+<template>
+  <div>
+    <ClientOnly>
+      <PpDeleteDialog
+          ref="deleteModal"
+          :current-card-index="currentCardIndex"
+          @delete="removeCard(currentCardIndex)"
+      />
+      <PpPriceCardDialog
+          ref="modal"
+          :current-card="currentCard"
+          :current-card-index="currentCardIndex"
+          @update="updateCard()"
+      />
+      <div class="search-bar">
+        <PpFormSearch
+            v-model="search"
+            label="Suche nach Klopapier!"
+            id="search_field"
+        />
+      </div>
+      <section class="content flex-col">
+        <aside class="filter-bar">
+          <button v-for="(button, index) in filterButtons" @click="() => sort(index)" :class="{ 'active': button.active }">
+            {{ button.label }}
+          </button>
+        </aside>
+        <div class="flex-col" role="list">
+          <PpPriceCard
+              ref="priceCard"
+              v-for="(card, index) in cards"
+              :key="card.uuid"
+              :deletable="cards.length > 1"
+              :card="card"
+              @update="openModal(false, index)"
+              @remove="openDeleteModal()"
+          />
+        </div>
+      </section>
+      <PpToolbar>
+        <PpButton class="mini-button text-white transparent" @click="sort(currentSort)">
+          <Icon class="icon" name="uil:refresh" mode="svg" />
+          <span>Neu sortieren</span>
+          <span
+              class="dot"
+              :class="{ visible : isDirty}"
+              aria-hidden="true"
+          />
+        </PpButton>
+        <PpButton class="mini-button text-white transparent" @click="openModal(true, -1)">
+          <Icon class="icon" name="uil:plus" mode="svg" />
+          <span>Hinzufügen</span>
+        </PpButton>
+      </PpToolbar>
+    </ClientOnly>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Card } from '../../shared/Card'
+import type { Button } from '../../shared/ButtonGroup'
+import { PpPriceCardDialog, PpDeleteDialog, PpPriceCard } from '#components'
+
+const cards = useLocalStorage<Card[]>('cards', [])
+const currentSort = useLocalStorage<number>('sort', 0)
+const isDirty = ref(false)
+const currentCard = ref<Card>()
+const currentCardIndex = ref<number>(-1)
+const modal = useTemplateRef<typeof PpPriceCardDialog>('modal')
+const deleteModal = useTemplateRef<typeof PpDeleteDialog>('deleteModal')
+const priceCards = useTemplateRef<(typeof PpPriceCard)[]>('priceCard')
+
+const search = ref('')
+
+const createCard = (uuid : string) : Card => ({
+  uuid,
+  name: '',
+  price: '',
+  roles: '',
+  sheets: '',
+  layers: '',
+})
+
+
+const addCard = (card : Card) => {
+  cards.value.unshift({ ...card })
+  isDirty.value = true
+}
+
+const removeCard = (index : number) => {
+  cards.value.splice(index, 1)
+  isDirty.value = true
+}
+
+const updateCard = () => {
+  if (currentCardIndex.value === -1) {
+    addCard(currentCard.value!)
+    return
+  }
+
+  const newCard = { ...currentCard.value! }
+  cards.value.splice(currentCardIndex.value, 1, newCard)
+  isDirty.value = true
+}
+
+const openModal = (createNew : boolean, index : number) => {
+  if (createNew) {
+    currentCardIndex.value = -1
+    currentCard.value = createCard(randomUUID())
+    modal.value?.$el.showModal()
+    return
+  }
+
+  currentCardIndex.value = index
+  currentCard.value = { ...cards.value[index]! }
+
+  modal.value?.$el.showModal()
+  return
+}
+
+const openDeleteModal = () => {
+  deleteModal.value?.$el.showModal()
+}
+
+const filterButtons = ref<Button[]>([
+  {
+    label: 'Rollen',
+    icon: 'uil:toilet-paper',
+    active: currentSort.value === 0,
+  },
+  {
+    label: 'Blatt',
+    icon: 'uil:file-landscape',
+    active: currentSort.value === 1,
+  },
+  {
+    label: 'Lagen',
+    icon: 'uil:layer-group',
+    active: currentSort.value === 2,
+  },
+])
+
+const sortBy = (key : 'ppr' | 'pps' | 'ppl') => {
+  cards.value.sort((a, b) => {
+    const aCard = priceCards.value?.find(card => card.uuid === a.uuid) || null
+    const bCard = priceCards.value?.find(card => card.uuid === b.uuid) || null
+    if (!aCard || !bCard) return 0
+    return aCard[key] - bCard[key]
+  })
+}
+
+const sort = (index : number) => {
+  currentSort.value = index
+  filterButtons.value.forEach(button => { button.active = false })
+  filterButtons.value[index]!.active = true
+
+  isDirty.value = false
+
+  switch (index) {
+    case 0: return sortBy('ppr')
+    case 1: return sortBy('pps')
+    case 2: return sortBy('ppl')
+  }
+}
+</script>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 68c0d99..846366a 100755
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -16,6 +16,23 @@ export default defineNuxtConfig({
     }
   },
 
+  app: {
+    pageTransition: {
+      name: 'page',
+      mode: 'out-in',
+    },
+    head: {
+      htmlAttrs: { lang: 'de' },
+      link: [
+        { rel: 'preload', as: 'image', href: '/img/propapier.svg', type: 'image/svg+xml' },
+        { rel: 'icon', type: 'image/x-icon', href: '/favicon.svg' },
+        { rel: 'preload', crossorigin: 'anonymous', as: 'font', href: '/fonts/opensans.woff2', type: 'font/woff2' },
+        { rel: 'preload', crossorigin: 'anonymous', as: 'font', href: '/fonts/roboto_con_bold.woff2', type: 'font/woff2' },
+        { rel: 'preload', crossorigin: 'anonymous', as: 'font', href: '/fonts/roboto_con_reg.woff2', type: 'font/woff2' },
+      ],
+    }
+  },
+
   routeRules: {
     '/': { prerender: true },
     '/imprint': { prerender: true },
@@ -31,7 +48,9 @@ export default defineNuxtConfig({
     './app/assets/styles/button.css',
     './app/assets/styles/buttonGroup.css',
     './app/assets/styles/priceCard.css',
-    './app/assets/styles/formInput.css',
+    './app/assets/styles/form/input.css',
+    './app/assets/styles/form/search.css',
     './app/assets/styles/toolbar.css',
+    './app/assets/styles/page.css',
   ]
 })
\ No newline at end of file
diff --git a/public/favicon.ico b/public/favicon.ico
deleted file mode 100755
index 18993ad..0000000
Binary files a/public/favicon.ico and /dev/null differ
diff --git a/public/favicon.svg b/public/favicon.svg
new file mode 100755
index 0000000..1446740
--- /dev/null
+++ b/public/favicon.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 1835 1957" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g><path d="M1567.66,18.116c145.891,-0 264.336,225.821 264.336,503.97c-0,278.149 -118.445,503.971 -264.336,503.971c-145.891,-0 -264.336,-225.822 -264.336,-503.971c0,-278.149 118.445,-503.97 264.336,-503.97Zm-0,224.151c-68.571,-0 -124.242,125.383 -124.242,279.819c0,154.437 55.671,279.82 124.242,279.82c68.571,0 124.241,-125.383 124.241,-279.82c0,-154.436 -55.67,-279.819 -124.241,-279.819Z" style="fill:#fff;"/><path d="M1303.43,755.105c13.811,85.466 89.537,243.344 171.549,272.195l-167.42,-1.213l-4.129,-270.982Z" style="fill:#fff;"/><path d="M9.052,1835.28l1.152,-1300.71c4.727,-203.082 60.44,-510.777 379.038,-525.353l1070.29,5.76c-106.16,85.364 -183.364,230.766 -179.726,543.787l0,1309.93c0,94.917 -24.936,111.898 -116.361,20.738c-67.285,-67.09 -128.514,-68.942 -195.856,-2.304c-80.33,79.49 -145.126,81.518 -216.593,2.304c-64.824,-71.852 -138.451,-64.497 -203.92,-0c-74.453,73.348 -133.367,79.706 -208.528,-4.609c-59.394,-66.627 -136.107,-49.149 -208.528,9.217c-95.361,76.853 -120.97,91.489 -120.97,-58.757Zm265.074,-1341.6c-0,-2.859 -2.321,-5.18 -5.18,-5.18l-132.364,0c-2.859,0 -5.181,2.321 -5.181,5.18c0,2.859 2.322,5.181 5.181,5.181l132.364,-0c2.859,-0 5.18,-2.322 5.18,-5.181Zm138.149,624.213l0,79.687l-84.961,0l0,72.657l85.037,-0c0.756,52.26 7.176,98.257 19.26,137.988c12.891,42.383 31.25,77.734 55.078,106.055c23.828,28.32 51.953,49.609 84.375,63.867c32.422,14.258 68.164,21.386 107.227,21.386c20.703,0 41.211,-1.562 61.523,-4.687c20.313,-3.125 39.844,-7.422 58.594,-12.891l-11.719,-93.75c-16.406,6.25 -33.691,11.133 -51.855,14.649c-18.164,3.515 -36.621,5.273 -55.371,5.273c-24.219,0 -46.094,-5.078 -65.625,-15.234c-19.532,-10.156 -36.328,-25.391 -50.391,-45.703c-14.062,-20.313 -24.805,-46.094 -32.227,-77.344c-6.796,-28.617 -10.481,-61.82 -11.053,-99.609l182.147,-0l0,-72.657l-182.226,0l-0,-79.687l182.226,-0l0,-73.242l-181.972,-0c0.952,-34.41 4.578,-64.879 10.878,-91.407c7.422,-31.25 17.969,-57.031 31.641,-77.343c13.672,-20.313 30.274,-35.547 49.805,-45.704c19.531,-10.156 41.601,-15.234 66.211,-15.234c19.14,0 37.793,1.856 55.957,5.567c18.164,3.71 35.449,8.691 51.855,14.941l11.719,-94.336c-20.313,-5.469 -40.234,-9.863 -59.766,-13.184c-19.531,-3.32 -39.843,-4.98 -60.937,-4.98c-39.063,-0 -74.903,7.129 -107.52,21.387c-32.617,14.257 -60.644,35.644 -84.082,64.16c-23.437,28.515 -41.601,64.062 -54.492,106.64c-11.367,37.545 -17.722,80.709 -19.066,129.493l-85.231,-0l0,73.242l84.961,-0Zm403.587,-624.213c0,-2.859 -2.321,-5.18 -5.18,-5.18l-132.364,0c-2.859,0 -5.18,2.321 -5.18,5.18c0,2.859 2.321,5.181 5.18,5.181l132.364,-0c2.859,-0 5.18,-2.322 5.18,-5.181Zm-272.284,0c0,-2.859 -2.321,-5.18 -5.18,-5.18l-132.364,0c-2.859,0 -5.18,2.321 -5.18,5.18c0,2.859 2.321,5.181 5.18,5.181l132.364,-0c2.859,-0 5.18,-2.322 5.18,-5.181Zm541.737,0c0,-2.859 -2.321,-5.18 -5.18,-5.18l-132.364,0c-2.859,0 -5.18,2.321 -5.18,5.18c-0,2.859 2.321,5.181 5.18,5.181l132.364,-0c2.859,-0 5.18,-2.322 5.18,-5.181Z" style="fill:#fff;"/></g></svg>
\ No newline at end of file
diff --git a/public/fonts/opensans.woff2 b/public/fonts/opensans.woff2
new file mode 100755
index 0000000..f143cd4
Binary files /dev/null and b/public/fonts/opensans.woff2 differ
diff --git a/public/fonts/roboto_con_bold.woff2 b/public/fonts/roboto_con_bold.woff2
new file mode 100755
index 0000000..a5ab9d8
Binary files /dev/null and b/public/fonts/roboto_con_bold.woff2 differ
diff --git a/public/fonts/roboto_con_reg.woff2 b/public/fonts/roboto_con_reg.woff2
new file mode 100755
index 0000000..e4c259c
Binary files /dev/null and b/public/fonts/roboto_con_reg.woff2 differ
diff --git a/public/img/propapier.svg b/public/img/propapier.svg
new file mode 100755
index 0000000..1446740
--- /dev/null
+++ b/public/img/propapier.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 1835 1957" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g><path d="M1567.66,18.116c145.891,-0 264.336,225.821 264.336,503.97c-0,278.149 -118.445,503.971 -264.336,503.971c-145.891,-0 -264.336,-225.822 -264.336,-503.971c0,-278.149 118.445,-503.97 264.336,-503.97Zm-0,224.151c-68.571,-0 -124.242,125.383 -124.242,279.819c0,154.437 55.671,279.82 124.242,279.82c68.571,0 124.241,-125.383 124.241,-279.82c0,-154.436 -55.67,-279.819 -124.241,-279.819Z" style="fill:#fff;"/><path d="M1303.43,755.105c13.811,85.466 89.537,243.344 171.549,272.195l-167.42,-1.213l-4.129,-270.982Z" style="fill:#fff;"/><path d="M9.052,1835.28l1.152,-1300.71c4.727,-203.082 60.44,-510.777 379.038,-525.353l1070.29,5.76c-106.16,85.364 -183.364,230.766 -179.726,543.787l0,1309.93c0,94.917 -24.936,111.898 -116.361,20.738c-67.285,-67.09 -128.514,-68.942 -195.856,-2.304c-80.33,79.49 -145.126,81.518 -216.593,2.304c-64.824,-71.852 -138.451,-64.497 -203.92,-0c-74.453,73.348 -133.367,79.706 -208.528,-4.609c-59.394,-66.627 -136.107,-49.149 -208.528,9.217c-95.361,76.853 -120.97,91.489 -120.97,-58.757Zm265.074,-1341.6c-0,-2.859 -2.321,-5.18 -5.18,-5.18l-132.364,0c-2.859,0 -5.181,2.321 -5.181,5.18c0,2.859 2.322,5.181 5.181,5.181l132.364,-0c2.859,-0 5.18,-2.322 5.18,-5.181Zm138.149,624.213l0,79.687l-84.961,0l0,72.657l85.037,-0c0.756,52.26 7.176,98.257 19.26,137.988c12.891,42.383 31.25,77.734 55.078,106.055c23.828,28.32 51.953,49.609 84.375,63.867c32.422,14.258 68.164,21.386 107.227,21.386c20.703,0 41.211,-1.562 61.523,-4.687c20.313,-3.125 39.844,-7.422 58.594,-12.891l-11.719,-93.75c-16.406,6.25 -33.691,11.133 -51.855,14.649c-18.164,3.515 -36.621,5.273 -55.371,5.273c-24.219,0 -46.094,-5.078 -65.625,-15.234c-19.532,-10.156 -36.328,-25.391 -50.391,-45.703c-14.062,-20.313 -24.805,-46.094 -32.227,-77.344c-6.796,-28.617 -10.481,-61.82 -11.053,-99.609l182.147,-0l0,-72.657l-182.226,0l-0,-79.687l182.226,-0l0,-73.242l-181.972,-0c0.952,-34.41 4.578,-64.879 10.878,-91.407c7.422,-31.25 17.969,-57.031 31.641,-77.343c13.672,-20.313 30.274,-35.547 49.805,-45.704c19.531,-10.156 41.601,-15.234 66.211,-15.234c19.14,0 37.793,1.856 55.957,5.567c18.164,3.71 35.449,8.691 51.855,14.941l11.719,-94.336c-20.313,-5.469 -40.234,-9.863 -59.766,-13.184c-19.531,-3.32 -39.843,-4.98 -60.937,-4.98c-39.063,-0 -74.903,7.129 -107.52,21.387c-32.617,14.257 -60.644,35.644 -84.082,64.16c-23.437,28.515 -41.601,64.062 -54.492,106.64c-11.367,37.545 -17.722,80.709 -19.066,129.493l-85.231,-0l0,73.242l84.961,-0Zm403.587,-624.213c0,-2.859 -2.321,-5.18 -5.18,-5.18l-132.364,0c-2.859,0 -5.18,2.321 -5.18,5.18c0,2.859 2.321,5.181 5.18,5.181l132.364,-0c2.859,-0 5.18,-2.322 5.18,-5.181Zm-272.284,0c0,-2.859 -2.321,-5.18 -5.18,-5.18l-132.364,0c-2.859,0 -5.18,2.321 -5.18,5.18c0,2.859 2.321,5.181 5.18,5.181l132.364,-0c2.859,-0 5.18,-2.322 5.18,-5.181Zm541.737,0c0,-2.859 -2.321,-5.18 -5.18,-5.18l-132.364,0c-2.859,0 -5.18,2.321 -5.18,5.18c-0,2.859 2.321,5.181 5.18,5.181l132.364,-0c2.859,-0 5.18,-2.322 5.18,-5.181Z" style="fill:#fff;"/></g></svg>
\ No newline at end of file