diff --git a/index.html b/index.html
index 031abb3..a4726de 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Stadtratmonitor</title>
   </head>
-  <body>
+  <body class="bg-background-50 dark:bg-background-950 text-text-950 dark:text-text-50">
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
diff --git a/src/App.vue b/src/App.vue
index 23a77ec..a1bc617 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -29,11 +29,11 @@ export default {
     }
   }
 }
-</script>search.value
+</script>
 
 <template>
-  <header class="w-screen flex flex-col place-content-center">
-    <div class="flex flex-row place-content-center bg-amber-300 text-sky-700">
+  <header class="w-screen flex flex-col place-content-center bg-background-100 dark:bg-background-900 text-text-900 dark:text-text-100">
+    <div class="flex flex-row place-content-center">
       <h1 class="p-2 text-xl">{{ applicationName }} {{ cityName }}</h1>
       <MainMenu />
     </div>
@@ -50,7 +50,7 @@ export default {
     />
     <Papers
       @papers="(p) => papers = p"
-      :filterValue="search.value"
+      :paperQuery="search"
       :paperFilter="paperFilter"
     />
   </main>
diff --git a/src/assets/base.css b/src/assets/base.css
index d3de42e..45405df 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -1,55 +1,3 @@
-/* color palette from <https://github.com/vuejs/theme> */
-:root {
-  --vt-c-white: #ffffff;
-  --vt-c-white-soft: #f8f8f8;
-  --vt-c-white-mute: #f2f2f2;
-
-  --vt-c-black: #181818;
-  --vt-c-black-soft: #222222;
-  --vt-c-black-mute: #282828;
-
-  --vt-c-indigo: #2c3e50;
-
-  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
-  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
-  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
-  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
-  --vt-c-text-light-1: var(--vt-c-indigo);
-  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
-  --vt-c-text-dark-1: var(--vt-c-white);
-  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-}
-
-/* semantic color variables for this project */
-:root {
-  --color-background: var(--vt-c-white);
-  --color-background-soft: var(--vt-c-white-soft);
-  --color-background-mute: var(--vt-c-white-mute);
-
-  --color-border: var(--vt-c-divider-light-2);
-  --color-border-hover: var(--vt-c-divider-light-1);
-
-  --color-heading: var(--vt-c-text-light-1);
-  --color-text: var(--vt-c-text-light-1);
-
-  --section-gap: 160px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-background: var(--vt-c-black);
-    --color-background-soft: var(--vt-c-black-soft);
-    --color-background-mute: var(--vt-c-black-mute);
-
-    --color-border: var(--vt-c-divider-dark-2);
-    --color-border-hover: var(--vt-c-divider-dark-1);
-
-    --color-heading: var(--vt-c-text-dark-1);
-    --color-text: var(--vt-c-text-dark-2);
-  }
-}
-
 *,
 *::before,
 *::after {
@@ -60,13 +8,7 @@
 
 body {
   min-height: 100vh;
-  color: var(--color-text);
-  background: var(--color-background);
   transition: color 0.5s, background-color 0.5s;
-  line-height: 1.6;
-  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
-    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  font-size: 15px;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
diff --git a/src/components/Filter.vue b/src/components/Filter.vue
index 35c9517..e93f173 100644
--- a/src/components/Filter.vue
+++ b/src/components/Filter.vue
@@ -1,26 +1,63 @@
 <script lang="ts">
-import { toValue } from 'vue'
-import { Papers } from './Papers.vue'
+import { type Papers } from './Papers.vue'
 
 export default {
   updated() {
     this.$emit('paperFilter', this.paperFilter)
-    /* this.paperFilter.type = this.paperTypes.key this.paperFilter.type. */
   },
   data() {
     return {
       paperTypes: [
         {
-          key: 'DS',
-          value: 'Beschlussvorlage',
+          value: 'Anfrage',
+          key: 'F',
+        },
+        {
+          value: 'Einwohneranfrage',
+          key: 'EF',
         },
         {
-          key: 'A',
           value: 'Antrag',
-        }
+          key: 'A',
+        },
+        {
+          value: 'Antwort zur Anfrage',
+          key: 'AW',
+        },
+        {
+          value: 'Änderungsantrag',
+          key: 'ÄA',
+        },
+        {
+          value: 'Beschlussvorlage',
+          key: 'DS',
+        },
+        {
+          value: 'Informationsvorlage',
+          key: 'Ifo',
+        },
+        {
+          value: 'Neufassung',
+          key: 'NF',
+        },
+        {
+          value: 'Petition',
+          key: 'P',
+        },
+        {
+          value: 'Verwaltungsstandpunkt',
+          key: 'VSP',
+        },
+        {
+          value: 'Wichtige Angelegenheit',
+          key: 'WA',
+        },
       ],
       paperFilter: {
-        type: '',
+        type: {
+          key: '',
+          value: '',
+        },
         originator: '',
       },
     }
@@ -44,19 +81,38 @@ export default {
 
 <template>
   <form class="mr-4 mt-4">
-    <select
-      class="w-40"
-      v-model="paperFilter.type">
-      <option
-        v-for="(type, i) of paperTypes"
-        :key="i"
-        >{{ type.value }}
-      </option>
-    </select>
-    <select 
-      class="w-40"
-      v-model="paperFilter.originator">
-      <option v-for="(originator, i) of paperOriginators" :key="i">{{ originator }}</option>
-    </select>
+    <fieldset class="flex flex-row mb-4">
+      <legend>Kategorie</legend>
+      <select
+        class="w-40 p-2 bg-background-100 rounded-lg"
+        v-model="paperFilter.type">
+        <option
+          v-for="(type, i) of paperTypes"
+          :key="i"
+          :value="type"
+          >{{ type.value }}
+        </option>
+      </select>
+      <button 
+        class="pl-2"
+        @click.prevent="paperFilter.type = { key: '', value: ''}"
+        title="zurücksetzen"
+        >✖
+      </button>
+    </fieldset>
+    <fieldset class="flex flex-row mb-4">
+      <legend>Einreicher</legend>
+      <select 
+        class="w-40 p-2 bg-background-100 rounded-lg"
+        v-model="paperFilter.originator">
+        <option v-for="(originator, i) of paperOriginators" :key="i">{{ originator }}</option>
+      </select>
+      <button 
+        class="pl-2"
+        @click.prevent="paperFilter.originator = ''"
+        title="zurücksetzen"
+        >✖
+      </button>
+    </fieldset>
   </form>
 </template>
\ No newline at end of file
diff --git a/src/components/Papers.vue b/src/components/Papers.vue
index 6d10764..1dd5a3d 100644
--- a/src/components/Papers.vue
+++ b/src/components/Papers.vue
@@ -25,21 +25,26 @@ export default {
     }
   }, 
   props: {
-    filterValue: String,
-    paperFilter: Array,
+    paperQuery: Object,
+    paperFilter: Object,
   },
   computed: {
     filteredData() {
-      const filterValue: String = this.filterValue
+      const paperQuery: String = this.paperQuery?.value
       let filteredPapers: Papers[] = this.papers
-      if (filterValue !== '') {
+      if (paperQuery !== '') {
         filteredPapers = this.papers.filter((paper) => {
-          return paper.name.toLowerCase().includes(filterValue.toLowerCase())
+          return paper.name.toLowerCase().includes(paperQuery.toLowerCase())
         })
       }
       if (this.paperFilter?.type !== '') {
         filteredPapers = filteredPapers.filter((paper) => {
-          return paper.reference.includes(this.paperFilter?.type)
+          return paper.reference.includes(this.paperFilter?.type.key) && paper.paper_type.includes(this.paperFilter?.type.value)
+        })
+      }
+      if (this.paperFilter?.originator !== '') {
+        filteredPapers = filteredPapers.filter((paper) => {
+          return paper.originator.includes(this.paperFilter?.originator)
         })
       }
       return filteredPapers
@@ -55,8 +60,10 @@ export default {
 </script>
 
 <template>
-  {{ paperFilter }}
-  <ul v-if="filteredData.length">
+  <ul
+    v-if="filteredData.length"
+    class="w-full"
+  >
     <li v-for="(paper, i) in filteredData" :key="i">
       <article
         class="my-4 p-2 border border-solid border-amber-300 rounded-md"
diff --git a/src/components/Search.vue b/src/components/Search.vue
index 6f2a754..604e50c 100644
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -21,29 +21,29 @@ export default {
 </script>
 
 <template>
-  <form class="sticky top-0 flex flex-row place-content-center bg-amber-200">
+  <form class="sticky top-0 flex flex-row place-content-center">
     <div class="flex flex-row w-full max-w-5xl">
       <input
-        class="p-6 grow bg-transparent placeholder:text-amber-400 text-sky-700 text-2xl text-center focus-visible:outline focus-visible:outline-current"
+        class="p-6 grow bg-transparent placeholder:text-text-200 text-2xl text-center focus-visible:outline focus-visible:outline-current"
         type="search"
-        placeholder="Suche z. B. nach XY"
+        placeholder="z. B. XY"
         v-model="search.value"
         @keyup.alt.enter.exact="submit('assist')"
         @keyup.enter.exact="submit('filter')"
         />
         <div class="flex flex-row p-4 place-content-center">
           <button
-          class="py-2 px-4 bg-amber-400 hover:bg-amber-500 rounded-l-lg border-r-2 border-amber-500 text-white"
+          class="py-2 px-4 bg-primary-button-500 hover:bg-primary-button-600 rounded-l-lg text-white"
           @click.prevent="submit('filter')"
           aria-keyshortcuts="Enter"
-          >Filter
+          >Suchen
         </button>
         <button
-          class="py-2 px-4 bg-amber-400 hover:bg-amber-500 rounded-r-lg text-white"
+          class="py-2 px-4 bg-secondary-button-500 hover:bg-secondary-button-600 rounded-r-lg text-white"
           @click.prevent="submit('assist')"
           aria-keyshortcuts="Alt+Enter"
           title="Tastenkürzel: Alt + Enter"
-          >Assistent
+          >Fragen
         </button>
       </div>
     </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index a28ce71..96daed7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,11 +1,83 @@
 /** @type {import('tailwindcss').Config} */
+
+const colors = require('tailwindcss/colors')
+
 export default {
   content: [
     "./index.html",
     "./src/**/*.{vue,js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        'text': { // hand-choosen
+          50: '#FDFDFD',
+          100: '#F3F3F6',
+          200: '#DCDCE7',
+          300: '#C0BFD9',
+          400: '#AAA8CF',
+          500: '#8A86BB',
+          600: '#6C68A1',
+          700: '#554F84',
+          800: '#403B67',
+          900: '#2C2849',
+          950: '#1A182C',
+        },
+        'background': { // hand-choosen
+          50: '#FDFDFD',
+          100: '#F3F3F6',
+          200: '#DCDCE7',
+          300: '#C0BFD9',
+          400: '#AAA8CF',
+          500: '#8A86BB',
+          600: '#6C68A1',
+          700: '#554F84',
+          800: '#403B67',
+          900: '#2C2849',
+          950: '#1A182C',
+        },
+        'primary-button': { // hand-choosen
+          DEFAULT: '#1550A3',
+          50: '#F7FBFF',
+          100: '#B2DBFF',
+          200: '#75B3F1',
+          300: '#4185D2',
+          400: '#2562B9',
+          500: '#1550A3',
+          600: '#0C428E',
+          700: '#043078',
+          800: '#012668',
+          900: '#001E58',
+          950: '#000C24',
+        },
+        'secondary-button': colors.slate,
+        'accent': colors.amber,
+/*      'secondary-button': {
+          DEFAULT: '#e2e5e9',
+          100: '#d8dade',
+          200: '#ced0d3',
+          300: '#c4c6c8',
+          400: '#babbbe',
+          500: '#b0b1b3',
+          600: '#a6a7a9',
+          700: '#9c9d9e',
+          800: '#939394',
+          900: '#898a8a',
+        },
+        'accent': {
+          DEFAULT: '#f8d841',
+          100: '#fdf8df',
+          200: '#fdf4cf',
+          300: '#fcf1bf',
+          400: '#fbedae',
+          500: '#fbe99c',
+          600: '#fae589',
+          700: '#f9e175',
+          800: '#f9dc5e',
+          900: '#f8d841',
+        }, */
+      }
+    }
   },
   plugins: [],
 }
