diff --git a/src/components/baruser/BarFreedrinks.vue b/src/components/baruser/BarFreedrinks.vue
index 654e841..0358179 100644
--- a/src/components/baruser/BarFreedrinks.vue
+++ b/src/components/baruser/BarFreedrinks.vue
@@ -170,6 +170,7 @@
     <v-container v-if="loading">
       <AddAmountSkeleton />
     </v-container>
+    
   </div>
 </template>
 <script>
@@ -227,7 +228,9 @@ export default {
       this.messages.push({
         date: new Date(),
         storno: false,
-        amount: amount
+        amount: amount,
+        error: false,
+        visible: true,
       })
     },
     createMessage(message) {
@@ -241,7 +244,7 @@ export default {
         text =
           '' +
           (message.amount / 100).toFixed(2) +
-          '€ nicht zu den Dienstgetränken hinzugefügt.'
+          '€ zu den Dienstgetränken hinzugefügt.'
       }
       return text
     },
diff --git a/src/components/user/UserNavigation.vue b/src/components/user/UserNavigation.vue
index 5d0d574..951500c 100644
--- a/src/components/user/UserNavigation.vue
+++ b/src/components/user/UserNavigation.vue
@@ -4,9 +4,13 @@
       <v-list-item-icon>
         <v-icon>{{ account }}</v-icon>
       </v-list-item-icon>
-      <v-list-item-title>
-        Home
-      </v-list-item-title>
+      <v-list-item-title>Home</v-list-item-title>
+    </v-list-item>
+    <v-list-item link :to="{ name: 'freedrinkUser' }">
+      <v-list-item-icon>
+        <v-icon>{{ beer }}</v-icon>
+      </v-list-item-icon>
+      <v-list-item-title>Freigetränk buchen</v-list-item-title>
     </v-list-item>
     <v-list-item link :to="{ name: 'userOverview' }">
       <v-list-item-icon>
@@ -25,21 +29,14 @@
       }"
     >
       <v-list-item-icon>
-        <v-icon>
-          {{ briefcase }}
-        </v-icon>
+        <v-icon>{{ briefcase }}</v-icon>
       </v-list-item-icon>
       <v-list-item-title>Dienstübersicht</v-list-item-title>
     </v-list-item>
-    <v-list-item
-      link
-      :to="{ name: 'jobRequests', params: { kind: 'jobInvites' } }"
-    >
+    <v-list-item link :to="{ name: 'jobRequests', params: { kind: 'jobInvites' } }">
       <v-list-item-icon>
         <v-badge overlap color="red" :content="news" :value="news !== 0">
-          <v-icon>
-            {{ switchAccount }}
-          </v-icon>
+          <v-icon>{{ switchAccount }}</v-icon>
         </v-badge>
       </v-list-item-icon>
       <v-list-item-title>Dienstanfragen</v-list-item-title>
@@ -59,7 +56,8 @@ import {
   mdiHome,
   mdiBank,
   mdiBriefcase,
-  mdiAccountSwitch
+  mdiAccountSwitch,
+  mdiBeer
 } from '@mdi/js'
 
 import { mapGetters, mapActions } from 'vuex'
@@ -71,7 +69,8 @@ export default {
       account: mdiHome,
       bank: mdiBank,
       briefcase: mdiBriefcase,
-      switchAccount: mdiAccountSwitch
+      switchAccount: mdiAccountSwitch,
+      beer: mdiBeer
     }
   },
   methods: {
@@ -93,7 +92,6 @@ export default {
   },
   created() {
     this.getUser()
-
   },
   watch: {
     loading(newValue) {
diff --git a/src/components/user/freedrink/freedrinkUserView.vue b/src/components/user/freedrink/freedrinkUserView.vue
new file mode 100644
index 0000000..4362dea
--- /dev/null
+++ b/src/components/user/freedrink/freedrinkUserView.vue
@@ -0,0 +1,407 @@
+<template>
+  <div>
+    <v-container>
+      <v-card class="mx-auto" outlined>
+        <v-card-title>
+          <div class="title">Freigetränk für Versammlungen/Arbeit</div>
+          <v-btn class="menuBtn" @click.stop="isMenuShow = !isMenuShow" icon>
+            <v-icon>{{ menuIcon }}</v-icon>
+          </v-btn>
+        </v-card-title>
+        <v-card-text>
+          <v-row v-if="!loading">
+            <v-col cols="12">
+              <v-row>
+                <v-col cols="6" xs="3" sm="4" class="drinkCol">
+                  <v-btn
+                    class="drinkBtn"
+                    :disabled="locked"
+                    :color="color"
+                    @click="addAmount(140, 'Bier')"
+                  >Bier</v-btn>
+                </v-col>
+                <v-col cols="6" xs="3" sm="4" class="drinkCol">
+                  <v-btn
+                    class="drinkBtn"
+                    block
+                    :disabled="locked"
+                    :color="color"
+                    @click="addAmount(200, 'Cuba')"
+                  >Cuba</v-btn>
+                </v-col>
+                <v-col cols="6" xs="3" sm="4" class="drinkCol">
+                  <v-btn
+                    class="drinkBtn"
+                    block
+                    :disabled="locked"
+                    :color="color"
+                    @click="addAmount(50, 'Schnaps')"
+                  >Schnaps</v-btn>
+                </v-col>
+                <v-col cols="6" xs="3" sm="4" class="drinkCol">
+                  <v-btn
+                    class="drinkBtn"
+                    block
+                    :disabled="locked"
+                    :color="color"
+                    @click="addAmount(200, 'Wein')"
+                  >Wein</v-btn>
+                </v-col>
+                <v-col cols="6" xs="3" sm="4" class="drinkCol">
+                  <v-btn
+                    class="drinkBtn"
+                    block
+                    :disabled="locked"
+                    :color="color"
+                    @click="addAmount(200, 'Gin Tonic')"
+                  >Gin Tonic</v-btn>
+                </v-col>
+                <v-col cols="6" xs="3" sm="4" class="drinkCol">
+                  <v-btn
+                    class="drinkBtn"
+                    block
+                    :disabled="locked"
+                    :color="color"
+                    @click="addAmount(100, 'Fritz')"
+                  >Fritz</v-btn>
+                </v-col>
+                <v-col cols="6" xs="3" sm="4" class="drinkCol">
+                  <v-btn
+                    class="drinkBtn"
+                    block
+                    :disabled="locked"
+                    :color="color"
+                    @click="addAmount(100, 'Saft')"
+                  >Saft</v-btn>
+                </v-col>
+                <v-col cols="6" xs="3" sm="4" class="drinkCol">
+                  <v-btn
+                    class="drinkBtn"
+                    block
+                    :disabled="locked"
+                    :color="color"
+                    @click="addAmount(30, 'Wasser')"
+                  >Wasser</v-btn>
+                </v-col>
+              </v-row>
+              <v-row v-if="!loading">
+                <v-col cols="8">
+                  <v-text-field
+                    outlined
+                    type="number"
+                    label="Benutzerdefinierter Betrag"
+                    :disabled="locked"
+                    v-model="customValue"
+                  ></v-text-field>
+                </v-col>
+                <v-col cols="2">
+                  <v-btn fab :color="color" :disabled="locked" @click="addAmount(customValue)">
+                    <v-icon>{{ plus }}</v-icon>
+                  </v-btn>
+                </v-col>
+              </v-row>
+            </v-col>
+          </v-row>
+        </v-card-text>
+      </v-card>
+    </v-container>
+
+    <v-navigation-drawer v-model="isMenuShow" right app clipped>
+      <v-list-item-group :key="componentRenderer">
+        <v-list-item inactive>
+          <v-list-item-title class="headline">Verlauf</v-list-item-title>
+        </v-list-item>
+        <v-divider />
+        <div
+          v-for="message in messages"
+          :key="messages.indexOf(message)"
+          class="history-item"
+        >
+          <!-- <v-list-item three-line inactive @click="stornoAmount(message)"> -->
+          <v-list-item inactive>
+            <v-list-item-content>
+              <v-list-item-title>{{ now(message.date) }}</v-list-item-title>
+              <v-list-item-action-text>
+                {{
+                createMessage(message)
+                }}
+              </v-list-item-action-text>
+              <!-- <v-list-item-subtitle class="red--text" v-if="message.storno">STORNIERT!!!</v-list-item-subtitle>
+              <v-list-item-action-text
+                v-if="isStronoEnabled(message.date) && !message.storno"
+              >Klicken um zu Stornieren</v-list-item-action-text>-->
+            </v-list-item-content>
+          </v-list-item>
+        </div>
+      </v-list-item-group>
+    </v-navigation-drawer>
+
+    <!-- <v-dialog v-model="showConfirmStornoDialog" max-width="290">
+      <v-card>
+        <v-card-title>Willst du wirklich??</v-card-title>
+        <v-card-text v-if="stornoMessage">
+          Willst du wirklich den Betrag
+          {{ (stornoMessage.amount / 100).toFixed(2) }}€ von
+          den Dienstgetränke stornieren?
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn text @click="cancelStorno">Abbrechen</v-btn>
+          <v-btn text @click="acceptStorno">Stornieren</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>-->
+
+    <v-dialog v-model="showReasonDialog" max-width="290">
+      <v-card>
+        <v-card-title>Willst du wirklich??</v-card-title>
+        <v-card-text>
+          <v-combobox v-model="selectedReason" :items="getReason()" label="Grund fürs Getränk"></v-combobox>
+          <v-textarea label="Beschreibung" v-model="reasonDescription"></v-textarea>
+          <v-text-field type="number" label="Anzahl der Getränke" v-model="drinkCount"></v-text-field>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn text @click="cancelFreedrink">Abbrechen</v-btn>
+          <v-btn text @click="confirmFreeDrink">Bestätigen</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-container v-if="loading">
+      <AddAmountSkeleton />
+    </v-container>
+  </div>
+</template>
+<script>
+// eslint-disable-next-line no-unused-vars
+import AddAmountSkeleton from '../Skeleton/AddAmountSkeleton'
+import { mapGetters } from 'vuex'
+import { mdiPlus, mdiMenu } from '@mdi/js'
+
+export default {
+  name: 'FreedrinkUserView',
+  components: { AddAmountSkeleton },
+  created() {
+    this.loading = false
+    // this.timer = setInterval(() => (this.componentRenderer += 1), 1000)
+  },
+  data() {
+    return {
+      plus: mdiPlus,
+      menuIcon: mdiMenu,
+      loading: true,
+      locked: false,
+      showConfirmStornoDialog: false,
+      showReasonDialog: false,
+      stornoMessage: null,
+      customValue: null,
+      color: 'green accent-4',
+      messages: [],
+      amount: 0,
+      selectedDrink: null,
+      drinkCount: 1,
+      timer: '',
+      componentRenderer: 0,
+      isMenuShow: false,
+      selectedReason: null,
+      reasonDescription: null,
+      snackbarTimeout: 3000
+    }
+  },
+  methods: {
+    getReason() {
+      const reasonArray = []
+      if (!this.user) {
+        return
+      }
+      if (this.user.group.includes('user')) {
+        reasonArray.push('AG-Besprechung')
+        reasonArray.push('AGDSN')
+      }
+      if (this.user.group.includes('bar')) {
+        reasonArray.push('Dienstantrittsschnaps')
+      }
+      if (this.user.group.includes('vorstand')) {
+        reasonArray.push('Vorstandssitzung')
+        reasonArray.push('Vermietungsgespräch')
+      }
+      if (this.user.group.includes('gastro')) {
+        reasonArray.push('Helmke-Fahrern')
+        reasonArray.push('Vertretergespräch')
+      }
+
+      return reasonArray
+    },
+    addAmount(amount, drink) {
+      if (amount) {
+        this.showReasonDialog = true
+        this.amount = amount
+        this.selectedDrink = drink
+        console.log(this.user)
+      }
+    },
+    stornoAmount(message) {
+      if (!this.isStronoEnabled(message.date) || message.storno) {
+        return
+      }
+
+      this.showConfirmStornoDialog = true
+      this.stornoMessage = message
+    },
+
+    cancelStorno() {
+      this.showConfirmStornoDialog = null
+      this.stornoMessage = null
+    },
+
+    confirmFreeDrink() {
+      if (this.drinkCount >= 0) {
+        console.log(this.selectedReason)
+        console.log(this.reasonDescription)
+        console.log(this.drinkCount)
+        this.generateMessage()
+      }
+      this.cancelFreedrink()
+    },
+
+    cancelFreedrink() {
+      this.showReasonDialog = false
+      this.amount = null
+      this.selectedReason = null
+      this.reasonDescription = null
+      this.drinkCount = 0
+    },
+    generateMessage() {
+      this.messages.push({
+        date: new Date(),
+        storno: false,
+        amount: this.amount,
+        reasonDescription: this.reasonDescription,
+        selectedReason: this.selectedReason,
+        drinkCount: this.drinkCount
+      })
+    },
+    createMessage(message) {
+      var text = ''
+      if (message.error) {
+        text = 'ERROR: Freigetränk konnt enicht genommen werden'
+      } else {
+        text =
+          this.user.firstname +
+          ' hat sich ' +
+          message.drinkCount +
+          ' ' +
+          this.selectedDrink +
+          ' als Freigetränk im Wert von ' +
+          (message.drinkCount * message.amount / 100).toFixed(2) +
+          '€ genommen weil ' +
+          message.selectedReason
+      }
+      return text
+    },
+    checkLocked() {
+      this.locked = this.limit - this.amount <= 0
+    },
+    getColor() {
+      return this.locked ? 'title red--text' : 'title'
+    },
+    acceptStorno() {
+      this.stornoMessage.storno = true
+      this.amount -= this.stornoMessage.amount
+      console.log(this.amount, this.stornoMessage)
+      this.cancelStorno()
+    }
+  },
+  computed: {
+    ...mapGetters({
+      user: 'user/user'
+    }),
+    now() {
+      return now => {
+        var actual = new Date()
+        var zero = new Date(0)
+        var date = new Date(actual - now)
+        if (date.getFullYear() === zero.getFullYear()) {
+          if (date.getMonth() === zero.getMonth()) {
+            if (date.getDate() === zero.getDate()) {
+              if (date.getHours() === zero.getDate()) {
+                if (date.getMinutes() < 1) {
+                  return 'vor ' + date.getSeconds() + ' Sekunden'
+                } else if (date.getMinutes() < 10) {
+                  return 'vor ' + date.getMinutes() + ' Minuten'
+                } else {
+                  return (
+                    (now.getHours() < 10 ? '0' : '') +
+                    now.getHours() +
+                    ':' +
+                    (now.getMinutes() < 10 ? '0' : '') +
+                    now.getMinutes()
+                  )
+                }
+              } else {
+                return (
+                  (now.getHours() < 10 ? '0' : '') +
+                  now.getHours() +
+                  ':' +
+                  (now.getMinutes() < 10 ? '0' : '') +
+                  now.getMinutes()
+                )
+              }
+            }
+          }
+        }
+        return (
+          now.getDate() +
+          '.' +
+          now.getMonth() +
+          '.' +
+          now.getFullYear() +
+          ' ' +
+          (now.getHours() < 10 ? '0' : '') +
+          now.getHours() +
+          ':' +
+          (now.getMinutes() < 10 ? '0' : '') +
+          now.getMinutes()
+        )
+      }
+    },
+    isStronoEnabled() {
+      return now => {
+        var actual = new Date()
+        return actual - now < 60000
+      }
+    }
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+  }
+}
+</script>
+
+<style scoped>
+.drinkBtn {
+  width: 100%;
+}
+.drinkCol {
+  padding: 6px !important;
+}
+
+.title {
+  width: calc(100% - 135px);
+  min-width: 150px;
+  font-size: 1.25rem !important;
+  font-weight: 500;
+  line-height: 2rem;
+  letter-spacing: 0.0125em !important;
+  font-family: 'Roboto', sans-serif !important;
+}
+.menuBtn {
+  right: 15px;
+  position: absolute;
+}
+.history-item {
+  cursor: pointer;
+}
+</style>
+
diff --git a/src/router/index.js b/src/router/index.js
index 2dc6732..9e2ba9d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -17,6 +17,7 @@ import Overview from '../components/finanzer/Overview'
 import User from '../components/finanzer/User'
 import ServiceManagement from '../components/vorstand/ServiceManagement'
 import Config from '@/components/user/Config'
+import FreedrinkUserView from '@/components/user/freedrink/freedrinkUserView'
 import Jobs from '@/components/user/Jobs'
 import PriceList from '@/components/pricelist/PriceList'
 import ManagementNavigation from '@/components/vorstand/ManagementNavigation'
@@ -94,6 +95,11 @@ const routes = [
             name: 'add',
             component: AddAmount
           },
+          {
+            path: 'freedrinkUser',
+            name: 'freedrinkUser',
+            component: FreedrinkUserView
+          },
           {
             path: 'overview',
             name: 'userOverview',