diff --git a/app.vue b/app.vue
deleted file mode 100644
index 09f935b..0000000
--- a/app.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<template>
-  <div>
-    <NuxtRouteAnnouncer />
-    <NuxtWelcome />
-  </div>
-</template>
diff --git a/app/app.vue b/app/app.vue
new file mode 100644
index 0000000..8f62b8b
--- /dev/null
+++ b/app/app.vue
@@ -0,0 +1,3 @@
+<template>
+  <NuxtPage />
+</template>
diff --git a/app/assets/css/currentMood.css b/app/assets/css/currentMood.css
new file mode 100644
index 0000000..4e1e13a
--- /dev/null
+++ b/app/assets/css/currentMood.css
@@ -0,0 +1,19 @@
+.CurrentMood {
+    background: var(--clr-current-light);
+    color: var(--clr-current-dark);
+    height: 60dvh;
+    padding: 2rem .5rem;
+    font-family: 'Delius', sans-serif;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    & .icon {
+        font-size: 14rem;
+    }
+
+    & h1 {
+        font-size: 1.5rem;
+    }
+}
\ No newline at end of file
diff --git a/app/assets/css/general.css b/app/assets/css/general.css
new file mode 100644
index 0000000..9be23fe
--- /dev/null
+++ b/app/assets/css/general.css
@@ -0,0 +1,34 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+:root {
+    --clr-happy-dark: #009933;
+    --clr-happy-light: #d1ffe8;
+
+    --clr-sad-dark: #252ed5;
+    --clr-sad-light: #e5ecfc;
+
+    --clr-disappointed-dark: #ab6b0e;
+    --clr-disappointed-light: #fffbd8;
+
+    --clr-angry-dark: #851919;
+    --clr-angry-light: #ffe5e5;
+
+    --clr-empty-dark: #595959;
+    --clr-empty-light: #f1f1f1;
+
+    --clr-dead-dark: #ffffff;
+    --clr-dead-light: #000000;
+
+    --clr-sick-dark: #87ad00;
+    --clr-sick-light: #edffd8;
+
+    --clr-pissed-dark: #7853ff;
+    --clr-pissed-light: #f1efff;
+
+    --clr-current-dark: var(--clr-happy-dark);
+    --clr-current-light: var(--clr-happy-light);
+}
\ No newline at end of file
diff --git a/app/assets/css/moodDropdown.css b/app/assets/css/moodDropdown.css
new file mode 100644
index 0000000..a46181f
--- /dev/null
+++ b/app/assets/css/moodDropdown.css
@@ -0,0 +1,27 @@
+.MoodDropdown {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-auto-rows: 4rem;
+
+    & > button {
+        all: unset;
+        --background: var(--clr-empty-light);
+        --color: var(--clr-empty-dark);
+
+        font-family: 'Delius', sans-serif;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        background: var(--background);
+        color: var(--color);
+
+        & span {
+            font-size: .8rem;
+        }
+
+        & .icon {
+            font-size: 2rem;
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/components/MoodDropdown.vue b/app/components/MoodDropdown.vue
new file mode 100644
index 0000000..22eb7dc
--- /dev/null
+++ b/app/components/MoodDropdown.vue
@@ -0,0 +1,28 @@
+<template>
+  <aside class="MoodDropdown">
+    <button
+      v-for="[moodName, mood] in availableMoods"
+      :key="mood.label"
+      :style="{
+        '--background': `var(--clr-${mood.color}-light)`,
+        '--color': `var(--clr-${mood.color}-dark)`,
+      }"
+      @click="changeMood(moodName)"
+    >
+      <Icon class="icon" :name="`mingcute:${mood.icon}`" mode="svg" />
+      <span>{{ mood.label }}</span>
+    </button>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { type Mood, moods, type PossibleMood } from '../../shared/moods'
+
+const availableMoods = computed<[PossibleMood, Mood][]>(() => Object.entries(moods))
+
+const emit = defineEmits(['changeMood'])
+
+const changeMood = (newMood : PossibleMood) => {
+  emit('changeMood', newMood)
+}
+</script>
\ No newline at end of file
diff --git a/app/components/Sections/CurrentMood.vue b/app/components/Sections/CurrentMood.vue
new file mode 100644
index 0000000..0e59059
--- /dev/null
+++ b/app/components/Sections/CurrentMood.vue
@@ -0,0 +1,25 @@
+<template>
+  <section class="CurrentMood">
+    <h1>Du bist derzeit</h1>
+    <span>{{ moods[currentMood].label }}</span>
+    <Icon class="icon" :name="`mingcute:${moods[currentMood].icon}`" mode="svg" />
+  </section>
+  <MoodDropdown
+    @change-mood="changeMood"
+  />
+</template>
+
+<script setup lang="ts">
+import { moods, type PossibleMood } from '../../../shared/moods'
+
+const currentMood = ref<PossibleMood>('happy')
+const changeMood = (newMood : PossibleMood) => {
+  currentMood.value = newMood
+  document.body.style.setProperty('--clr-current-dark', `var(--clr-${newMood}-dark)`)
+  document.body.style.setProperty('--clr-current-light', `var(--clr-${newMood}-light)`)
+}
+
+useSeoMeta({
+  title: () => `Du bist derzeit ${moods[currentMood.value].label}`
+})
+</script>
\ No newline at end of file
diff --git a/app/pages/index.vue b/app/pages/index.vue
new file mode 100644
index 0000000..ad8c313
--- /dev/null
+++ b/app/pages/index.vue
@@ -0,0 +1,7 @@
+<template>
+  <SectionsCurrentMood />
+</template>
+
+<script setup lang="ts">
+
+</script>
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index c7c5984..2d26692 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,6 +1,12 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   compatibilityDate: '2025-05-15',
-  devtools: { enabled: true },
-  modules: ['@nuxt/eslint', '@nuxt/fonts', '@nuxt/icon']
+  devtools: { enabled: false },
+  future: { compatibilityVersion : 4 },
+  modules: ['@nuxt/eslint', '@nuxt/fonts', '@nuxt/icon'],
+  css: [
+    '@/assets/css/general.css',
+    '@/assets/css/currentMood.css',
+    '@/assets/css/moodDropdown.css',
+  ]
 })
\ No newline at end of file
diff --git a/shared/moods.ts b/shared/moods.ts
new file mode 100644
index 0000000..ce1d568
--- /dev/null
+++ b/shared/moods.ts
@@ -0,0 +1,66 @@
+export type Mood = {
+  label: string,
+  color: string,
+  icon: string,
+}
+
+export type PossibleMood = 'happy' | 'sad' | 'angry' | 'disappointed' | 'empty' | 'sick' | 'dead' | 'pissed'
+
+const happy = {
+  label: 'Glücklich',
+  color: 'happy',
+  icon: 'happy-line',
+}
+
+const sad = {
+  label: 'Traurig',
+  color: 'sad',
+  icon: 'unhappy-line',
+}
+
+const angry = {
+  label: 'Wütend',
+  color: 'angry',
+  icon: 'angry-line',
+}
+
+const disappointed = {
+  label: 'Enttäuscht',
+  color: 'disappointed',
+  icon: 'confused-line',
+}
+
+const empty = {
+  label: 'Leer',
+  color: 'empty',
+  icon: 'look-down-line',
+}
+
+const sick = {
+  label: 'Krank',
+  color: 'sick',
+  icon: 'sick-line',
+}
+
+const dead = {
+  label: 'Tot',
+  color: 'dead',
+  icon: 'skull-line',
+}
+
+const pissed = {
+  label: 'Genervt',
+  color: 'pissed',
+  icon: 'sweats-line',
+}
+
+export const moods : Record<PossibleMood, Mood> = {
+  happy,
+  sad,
+  angry,
+  disappointed,
+  empty,
+  sick,
+  dead,
+  pissed,
+}
\ No newline at end of file