diff --git a/src/App.vue b/src/App.vue
index c7f8c6a..82cdfcc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,11 @@
 <template>
   <v-app>
     <router-view/>
+    <v-footer
+            app
+    >
+      <span class="px-4">&copy; {{ new Date().getFullYear()}} Studentenclub Wu 5 e.v.</span>
+    </v-footer>
   </v-app>
 </template>
 
diff --git a/src/components/TitleBar.vue b/src/components/TitleBar.vue
index 8786ea9..4f42380 100644
--- a/src/components/TitleBar.vue
+++ b/src/components/TitleBar.vue
@@ -13,7 +13,10 @@
         </v-btn>
         <v-toolbar-title>WU5-Dashboard</v-toolbar-title>
         <v-spacer/>
-        <v-btn icon v-if="isFinanzer">
+        <v-btn icon v-if="isFinanzer" href="finanzer">
+            <v-icon>attach_money</v-icon>
+        </v-btn>
+        <v-btn icon v-if="isBar" href="bar">
             <v-icon>local_bar</v-icon>
         </v-btn>
         <v-btn v-if="isLoggedIn" @click="logout">Logout</v-btn>
@@ -26,8 +29,19 @@
     export default {
         name: "TitleBar",
         computed: {
+            isBar() {
+                try {
+                    return this.$store.getters.getGroup.includes('bar') ? true : false
+                } catch (e) {
+                    return false
+                }
+            },
             isFinanzer() {
-                return this.$store.getters.getGroup === 'moneymaster' ? true : false
+                try {
+                    return this.$store.getters.getGroup.includes('moneymaster') ? true : false
+                } catch (e) {
+                    return false
+                }
             },
             isLoggedIn() {
                 return this.$store.getters.getToken
diff --git a/src/components/baruser/CreditLists.vue b/src/components/baruser/CreditLists.vue
index 3c5bf21..4ddf330 100644
--- a/src/components/baruser/CreditLists.vue
+++ b/src/components/baruser/CreditLists.vue
@@ -1,72 +1,68 @@
 <template>
-    <v-content>
-        <v-container v-for="user in users" :key="user.id">
-            <v-card raised shaped>
-
-                <v-list-item three-line>
-                    <v-list-item-content>
+    <div>
+        <div v-for="user in users" :key="users.indexOf(user)">
+            <v-container>
+                <v-card>
+                    <v-list-item>
                         <v-list-item-title class="title">{{user.firstname}} {{user.lastname}}</v-list-item-title>
+                    </v-list-item>
+                    <v-card-text>
                         <v-row>
-                            <v-spacer/>
-                            <v-row>
-                                <v-col>
-                                    <v-container>
-                                        <v-row>
-                                            <v-container>
-                                                <v-btn @click="addAmount(user.username, 200)" :color="color">2 €</v-btn>
-                                            </v-container>
-                                        </v-row>
-                                        <v-row>
-                                            <v-container>
-                                                <v-btn @click="addAmount(user.username, 100)" :color="color">1 €</v-btn>
-                                            </v-container>
-                                        </v-row>
-                                    </v-container>
-                                </v-col>
-                                <v-col>
-                                    <v-container>
-                                        <v-row>
-                                            <v-container>
-                                                <v-btn @click="addAmount(user.username, 50)" :color="color">0,50 €</v-btn>
-                                            </v-container>
-                                        </v-row>
-                                        <v-row>
-                                            <v-container>
-                                                <v-btn @click="addAmount(user.username, 40)" :color="color">0,40 €</v-btn>
-                                            </v-container>
-                                        </v-row>
-                                    </v-container>
-                                </v-col>
-                                <v-col>
-                                    <v-container>
-                                        <v-row>
-                                            <v-container>
-                                                <v-btn @click="addAmount(user.username, 20)" :color="color">0,20 €</v-btn>
-                                            </v-container>
-                                        </v-row>
-                                        <v-row>
-                                            <v-container>
-                                                <v-btn @click="addAmount(user.username, 10)" :color="color">0,10 €</v-btn>
-                                            </v-container>
-                                        </v-row>
-                                    </v-container>
-                                </v-col>
-                            </v-row>
+                            <v-col cols="10">
+                                <v-row>
+                                    <v-col>
+                                        <v-btn class="creditBtn" block @click="addAmount(user.username, 200)"
+                                               :color="color">2 €
+                                        </v-btn>
+                                    </v-col>
+                                    <v-col>
+                                        <v-btn class="creditBtn" block @click="addAmount(user.username, 100)"
+                                               :color="color">1 €
+                                        </v-btn>
+                                    </v-col>
+                                    <v-col>
+                                        <v-btn class="creditBtn" block @click="addAmount(user.username, 50)"
+                                               :color="color">
+                                            0,50 €
+                                        </v-btn>
+                                    </v-col>
+                                </v-row>
+                                <v-row>
+                                    <v-col>
+                                        <v-btn class="creditBtn" block @click="addAmount(user.username, 40)"
+                                               :color="color">
+                                            0,40 €
+                                        </v-btn>
+                                    </v-col>
+                                    <v-col>
+                                        <v-btn class="creditBtn" block @click="addAmount(user.username, 20)"
+                                               :color="color">
+                                            0,20 €
+                                        </v-btn>
+                                    </v-col>
+                                    <v-col>
+                                        <v-btn class="creditBtn" block @click="addAmount(user.username, 10)"
+                                               :color="color">
+                                            0,10 €
+                                        </v-btn>
+                                    </v-col>
+                                </v-row>
+                            </v-col>
                             <v-col align-self="center">
-                                <v-container>
-                                    <v-row>
-                                        <v-container>
-                                            <v-list-item-action-text :class="getColor(user.type)">{{(user.amount/100).toFixed(2)}} €</v-list-item-action-text>
-                                        </v-container>
-                                    </v-row>
-                                </v-container>
+                                <v-row>
+                                    <v-list-item>
+                                        <v-list-item-action-text :class="getColor(user.type)">
+                                            {{(user.amount/100).toFixed(2)}} €
+                                        </v-list-item-action-text>
+                                    </v-list-item>
+                                </v-row>
                             </v-col>
                         </v-row>
-                    </v-list-item-content>
-                </v-list-item>
-            </v-card>
-        </v-container>
-    </v-content>
+                    </v-card-text>
+                </v-card>
+            </v-container>
+        </div>
+    </div>
 </template>
 
 <script>
@@ -97,5 +93,7 @@
 </script>
 
 <style scoped>
-
+    .creditBtn {
+        margin: 2px;
+    }
 </style>
diff --git a/src/components/baruser/SearchBar.vue b/src/components/baruser/SearchBar.vue
new file mode 100644
index 0000000..c5708ca
--- /dev/null
+++ b/src/components/baruser/SearchBar.vue
@@ -0,0 +1,68 @@
+<template>
+    <div>
+        <v-toolbar>
+            <v-spacer/>
+            <v-toolbar-items>
+                <v-autocomplete outlined return-object v-model="user" style="margin-top: 3px"
+                                placeholder="Suche Person" :items="allUsers" item-text="fullName"
+                                prepend-inner-icon="search" full-width/>
+                <v-btn text @click="addUser">Hinzufügen</v-btn>
+            </v-toolbar-items>
+        </v-toolbar>
+    </div>
+</template>
+
+<script>
+    import httpClient from "../../plugins/restService";
+
+    export default {
+        name: "SearchBar",
+        props: {
+
+        },
+        data () {
+            return {
+                hover: false,
+                focus: false,
+                item_size: 32,
+                searchString: '',
+                test: [],
+                allUsers: [],
+                user: null,
+            }
+        },
+        created() {
+            this.hasFocus()
+        },
+        methods : {
+            mop () {
+                // eslint-disable-next-line no-console
+                console.log("user: ", this.user)
+            },
+            hasFocus () {
+                httpClient.searchUser(this.$store.getters.getToken, {searchString: this.searchString})
+                    .then(response => {
+                        // eslint-disable-next-line no-console
+                        //console.log(response.data)
+                        this.allUsers = response.data
+
+                        for (let i = 0; i < this.allUsers.length; i++) {
+                            this.allUsers[i].fullName = this.allUsers[i].firstname + " " + this.allUsers[i].lastname
+                        }
+                        // eslint-disable-next-line no-console
+                        console.log("all users 2: ", this.allUsers)
+                    })
+            },
+            addUser() {
+                this.$emit("add:creditList", this.user)
+                this.user = null
+            }
+        },
+        computed: {
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/finanzer/Overview.vue b/src/components/finanzer/Overview.vue
index 11a1c8b..a853c77 100644
--- a/src/components/finanzer/Overview.vue
+++ b/src/components/finanzer/Overview.vue
@@ -1,16 +1,207 @@
 <template>
-    <v-data-table></v-data-table>
+    <div>
+        <v-toolbar tile>
+            <v-toolbar-title>Gesamtübersicht</v-toolbar-title>
+            <v-spacer></v-spacer>
+            <v-toolbar-items>
+                <v-btn text icon @click="year--"><v-icon>keyboard_arrow_left</v-icon></v-btn>
+                <v-list-item><v-list-item-title class="title">{{year}}</v-list-item-title></v-list-item>
+                <v-btn text icon @click="year++" :disabled="isActualYear"><v-icon>keyboard_arrow_right</v-icon></v-btn>
+            </v-toolbar-items>
+            <v-spacer></v-spacer>
+            <v-toolbar-items>
+                <v-text-field  v-model="filter" @input="filterUser" style="margin-top: 3px" append-icon="search" outlined></v-text-field>
+            </v-toolbar-items>
+        </v-toolbar>
+        <div v-for="user in filteredUsers" :key="filteredUsers.indexOf(user)">
+            <v-card v-if="user.creditList[year]"
+                    style="margin-top: 3px">
+                <v-card-title>{{user.lastname}}, {{user.firstname}}</v-card-title>
+                <Table v-bind:user="user" v-bind:year="year"/>
+                <v-container fluid>
+                    <v-row align="start" align-content="start">
+                        <v-col>
+                            <v-row>
+                                <v-col>
+                                    <v-label>Vorjahr:</v-label>
+                                </v-col>
+                                <v-col>
+                                    <v-chip outlined :text-color="getLastColor(user.creditList[year][1].last)">
+                                        {{(user.creditList[year][1].last / 100).toFixed(2)}}
+                                    </v-chip>
+                                </v-col>
+                            </v-row>
+                            <v-row>
+                                <v-col>
+                                    <v-label>Gesamt:</v-label>
+                                </v-col>
+                                <v-col>
+                                    <v-chip outlined x-large
+                                            :text-color="getLastColor(getAllSum(user.creditList[year][2].sum ,user.creditList[year][1].last))">
+                                        {{(getAllSum(user.creditList[year][2].sum ,user.creditList[year][1].last) /
+                                        100).toFixed(2)}}
+                                    </v-chip>
+                                </v-col>
+                            </v-row>
+                        </v-col>
+                        <v-col align-self="center">
+                            <v-card outlined>
+                                <v-row>
+                                    <v-card-title class="subtitle-2">Geld transferieren</v-card-title>
+                                    <v-spacer/>
+                                    <v-btn text icon style="margin-right: 5px" @click="setExpand(user)">
+                                        <v-icon :class="isExpand(user.expand)" dense>$expand</v-icon>
+                                    </v-btn>
+                                </v-row>
+                                <v-expand-transition>
+                                    <v-card-text v-show="user.expand">
+                                        <v-form style="margin-left: 15px; margin-right: 15px">
+                                            <v-row>
+                                                <v-col>
+                                                    <v-text-field :rules="[isNumber]" label="Betrag"
+                                                                  v-model="amount"></v-text-field>
+                                                </v-col>
+                                                <v-col>
+                                                    <v-select return-object v-model="type" label="Typ"
+                                                              :items="[{value: 'amount', text: 'Schulden'}, {value: 'credit', text: 'Guthaben'}]"
+                                                              item-text="text" item-value="value"></v-select>
+                                                </v-col>
+                                            </v-row>
+                                            <v-row>
+                                                <v-col>
+                                                    <v-select return-object v-model="selectedYear" label="Jahr"
+                                                              :items="years" item-text="text"
+                                                              item-value="value"></v-select>
+                                                </v-col>
+                                                <v-col>
+                                                    <v-select return-object v-model="selectedMonth" label="Monat"
+                                                              :items="months" item-text="text"
+                                                              item-value="value"></v-select>
+                                                </v-col>
+                                            </v-row>
+                                        </v-form>
+                                        <v-btn block @click="add(user)">Hinzufügen</v-btn>
+                                    </v-card-text>
+                                </v-expand-transition>
+                            </v-card>
+                        </v-col>
+                    </v-row>
+                </v-container>
+            </v-card>
+        </div>
+    </div>
 </template>
 
 <script>
+    import Table from "./Table";
     export default {
         name: "Overview",
+        components: {Table},
         props: {
-            year: null
+            users: Array,
+        },
+        data () {
+            return {
+
+                year:  new Date().getFullYear(),
+                filter: "",
+                filteredUsers: [],
+
+                amount: null,
+                isNumber: value => !isNaN(value) || 'Betrag muss eine Zahl sein.',
+                years: [],
+                months: [
+                        {value: 1, text: 'Januar'},
+                        {value: 2, text: 'Februar'},
+                        {value: 3, text: 'März'},
+                        {value: 4, text:'April'},
+                        {value: 5, text: 'Mai'},
+                        {value: 6, text: 'Juni'},
+                        {value: 7, text: 'Juli'},
+                        {value: 8, text: 'August'},
+                        {value: 9, text: 'September'},
+                        {value: 10, text: 'Oktober'},
+                        {value: 11, text: 'November'},
+                        {value: 12, text: 'Dezember'}
+                    ],
+                type: {value: 'credit', text: 'Guthaben'},
+                selectedYear: {value: new Date().getFullYear(), text: new Date().getFullYear()},
+                selectedMonth: {value: new Date().getMonth() + 1, text: ["Januar", "Februar", "März", "April", "Mai", "Juni",
+                        "Juli", "August", "September", "Oktober", "November", "Dezember"
+                    ][new Date().getMonth()]}
+            }
+        },
+        created() {
+            this.createYears();
+            this.filteredUsers = this.users
+
+        },
+        methods: {
+            getLastColor (value) {
+                return value < 0 ? 'red' : 'green'
+            },
+            getAllSum(sum, lastYear) {
+                // eslint-disable-next-line no-console
+                console.log(sum, lastYear)
+                return lastYear + sum
+            },
+            createYears() {
+                for (let year = 2000; year <= new Date().getFullYear(); year++) {
+                    this.years.push({value: year, text: year})
+                }
+            },
+            setExpand(user) {
+                user.expand ? user.expand=false : user.expand=true
+            },
+            isExpand(value) {
+                return value ? 'rotate' : ''
+            },
+            // eslint-disable-next-line no-unused-vars
+            add(user) {
+                // eslint-disable-next-line no-console
+                console.log(this.selectedYear.value, this.type.value, this.selectedMonth.value)
+                if (this.type.value === 'amount') {
+                    this.$emit("add:amount", {user: user, amount: this.amount, year: this.selectedYear, month: this.selectedMonth})
+                }
+                if (this.type.value === 'credit') {
+                    this.$emit("add:credit", {user: user, credit: this.amount, year: this.selectedYear.value, month: this.selectedMonth.value})
+                }
+
+                this.createDefault()
+
+            },
+            createDefault() {
+                // eslint-disable-next-line no-unused-vars
+                let year = new Date().getFullYear()
+                // eslint-disable-next-line no-unused-vars
+                let month = new Date().getMonth()
+                this.amount = null
+                this.type = {value: 'credit', text: 'Guthaben'}
+                this.selectedYear = {value: new Date().getFullYear(), text: new Date().getFullYear()}
+                this.selectedMonth = {value: new Date().getMonth() + 1, text: ["Januar", "Februar", "März", "April", "Mai", "Juni",
+                        "Juli", "August", "September", "Oktober", "November", "Dezember"
+                    ][new Date().getMonth()]}
+            },
+            filterUser() {
+                if (this.filter === "") {
+                    this.filteredUsers = this.users
+                }
+                this.filteredUsers = [...this.filteredUsers.filter(user => {
+                    return user.firstname.toLowerCase().includes(this.filter.toLowerCase()) || user.lastname.toLowerCase().includes(this.filter.toLowerCase())
+                })]
+            }
+        },
+        computed: {
+            isActualYear() {
+                return this.year === new Date().getFullYear()
+            }
         }
+
     }
 </script>
 
 <style scoped>
-
+    .rotate {
+        transform: rotate(180deg);
+    }
 </style>
diff --git a/src/components/finanzer/Table.vue b/src/components/finanzer/Table.vue
new file mode 100644
index 0000000..2890c27
--- /dev/null
+++ b/src/components/finanzer/Table.vue
@@ -0,0 +1,118 @@
+<template>
+    <v-data-table
+            dense
+            :headers="headers"
+            :items="user.creditList[year]"
+            :hide-default-footer="true">
+        <template v-slot:item.jan_amount="{ item }">
+            <v-chip outlined :text-color="getColor(item, item.jan_amount)">{{(item.jan_amount /
+                100).toFixed(2)}}
+            </v-chip>
+        </template>
+        <template v-slot:item.feb_amount="{ item }">
+            <v-chip outlined :text-color="getColor(item, item.feb_amount)">{{(item.feb_amount /
+                100).toFixed(2)}}
+            </v-chip>
+        </template>
+        <template v-slot:item.maer_amount="{ item }">
+            <v-chip outlined :text-color="getColor(item, item.maer_amount)">{{(item.maer_amount /
+                100).toFixed(2)}}
+            </v-chip>
+        </template>
+        <template v-slot:item.apr_amount="{ item }">
+            <v-chip outlined :text-color="getColor(item, item.apr_amount)">{{(item.apr_amount /
+                100).toFixed(2)}}
+            </v-chip>
+        </template>
+        <template v-slot:item.mai_amount="{ item }">
+            <v-chip outlined :text-color="getColor(item, item.mai_amount)">{{(item.mai_amount /
+                100).toFixed(2)}}
+            </v-chip>
+        </template>
+        <template v-slot:item.jun_amount="{ item }">
+            <v-chip outlined :text-color="getColor(item, item.jun_amount)">{{(item.jun_amount /
+                100).toFixed(2)}}
+            </v-chip>
+        </template>
+        <template v-slot:item.jul_amount="{ item }">
+            <v-chip outlined :text-color="getColor(item, item.jul_amount)">{{(item.jul_amount /
+                100).toFixed(2)}}
+            </v-chip>
+        </template>
+        <template v-slot:item.aug_amount="{ item }">
+            <v-chip outlined :text-color="getColor(item, item.aug_amount)">{{(item.aug_amount /
+                100).toFixed(2)}}
+            </v-chip>
+        </template>
+        <template v-slot:item.sep_amount="{ item }">
+            <v-chip outlined :text-color="getColor(item, item.sep_amount)">{{(item.sep_amount /
+                100).toFixed(2)}}
+            </v-chip>
+        </template>
+        <template v-slot:item.okt_amount="{ item }">
+            <v-chip outlined :text-color="getColor(item, item.okt_amount)">{{(item.okt_amount /
+                100).toFixed(2)}}
+            </v-chip>
+        </template>
+        <template v-slot:item.nov_amount="{ item }">
+            <v-chip outlined :text-color="getColor(item, item.nov_amount)">{{(item.nov_amount /
+                100).toFixed(2)}}
+            </v-chip>
+        </template>
+        <template v-slot:item.dez_amount="{ item }">
+            <v-chip outlined :text-color="getColor(item, item.dez_amount)">{{(item.dez_amount /
+                100).toFixed(2)}}
+            </v-chip>
+        </template>
+        <template v-slot:item.sum="{ item }">
+            <v-chip outlined :text-color="getColor(item, item.sum)">{{(item.sum / 100).toFixed(2)}}</v-chip>
+        </template>
+    </v-data-table>
+</template>
+
+<script>
+    export default {
+        name: "Table",
+        props: {
+            user: Object,
+            year: Number,
+        },
+        data () {
+            return {
+                headers: [
+                    {
+                        text: 'Schulden / Guthpaben',
+                        align: 'left',
+                        sortable: false,
+                        value: 'type'
+                    },
+                    {text: 'Januar in EUR', value: 'jan_amount'},
+                    {text: 'Februar in EUR', value: 'feb_amount'},
+                    {text: 'März in EUR', value: 'maer_amount'},
+                    {text: 'April in EUR', value: 'apr_amount'},
+                    {text: 'Mai in EUR', value: 'mai_amount'},
+                    {text: 'Juni in EUR', value: 'jun_amount'},
+                    {text: 'Juli in EUR', value: 'jul_amount'},
+                    {text: 'August in EUR', value: 'aug_amount'},
+                    {text: 'September in EUR', value: 'sep_amount'},
+                    {text: 'Oktober in EUR', value: 'okt_amount'},
+                    {text: 'November in EUR', value: 'nov_amount'},
+                    {text: 'Dezember in EUR', value: 'dez_amount'},
+                    {text: 'Summe in EUR', value: 'sum'}
+                ],
+            }
+        },
+        methods: {
+            getColor (item, value) {
+                if (item.type === 'Summe') {
+                    return value < 0 ? 'red' : 'green'
+                }
+                return item.type === 'Guthaben' ? 'green' : 'red'
+            },
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/finanzer/User.vue b/src/components/finanzer/User.vue
new file mode 100644
index 0000000..34c4b46
--- /dev/null
+++ b/src/components/finanzer/User.vue
@@ -0,0 +1,78 @@
+<template>
+    <div>
+        <v-toolbar tile>
+            <v-toolbar-title>{{user.lastname}}, {{user.firstname}}</v-toolbar-title>
+        </v-toolbar>
+        <div v-for="year in years" :key="years.indexOf(year)">
+            <v-card style="margin-top: 3px;">
+                <v-card-title>{{year}}</v-card-title>
+                <Table v-bind:user="user" v-bind:year="year"/>
+                <v-container fluid>
+                    <v-col>
+                        <v-row>
+                            <v-col>
+                                <v-label>Vorjahr:</v-label>
+                            </v-col>
+                            <v-col>
+                                <v-chip outlined :text-color="getLastColor(user.creditList[year][1].last)">
+                                    {{(user.creditList[year][1].last / 100).toFixed(2)}}
+                                </v-chip>
+                            </v-col>
+                            <v-col>
+                                <v-label>Gesamt:</v-label>
+                            </v-col>
+                            <v-col>
+                                <v-chip outlined x-large
+                                        :text-color="getLastColor(getAllSum(user.creditList[year][2].sum ,user.creditList[year][1].last))">
+                                    {{(getAllSum(user.creditList[year][2].sum ,user.creditList[year][1].last) /
+                                    100).toFixed(2)}}
+                                </v-chip>
+                            </v-col>
+                        </v-row>
+                    </v-col>
+                </v-container>
+            </v-card>
+        </div>
+    </div>
+</template>
+
+<script>
+    import Table from "./Table";
+    export default {
+        name: "User",
+        components: {Table},
+        props: {
+            user: Object,
+        },
+        data () {
+            return {
+                years: []
+            }
+        },
+        created() {
+            this.createYears()
+        },
+        methods: {
+            createYears() {
+                // eslint-disable-next-line no-console
+                console.log(this.user.creditList)
+                for (let year in this.user.creditList) {
+                    // eslint-disable-next-line no-console
+                    this.years.unshift(parseInt(year))
+                }
+            },
+            getLastColor (value) {
+                return value < 0 ? 'red' : 'green'
+            },
+            getAllSum(sum, lastYear) {
+                // eslint-disable-next-line no-console
+                console.log(sum, lastYear)
+                return lastYear + sum
+            },
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/plugins/restService.js b/src/plugins/restService.js
index 376f79b..8afa437 100644
--- a/src/plugins/restService.js
+++ b/src/plugins/restService.js
@@ -19,8 +19,22 @@ class Service {
         console.log("addAmountdata: ", data)
         return axios.post(this.url+'baradd', {...data}, {headers: {Token: token}})
     }
+    addAmountFinanzer(token, data) {
+        return axios.post(this.url+'finanzerAddAmount', {...data}, {headers: {Token: token}})
+    }
+    addCreditFinanzer(token, data) {
+        // eslint-disable-next-line no-console
+        console.log('data', data)
+        return axios.post(this.url+'finanzerAddCredit', {...data}, {headers: {Token: token}})
+    }
+    searchUser(token, data) {
+        return axios.post(this.url+'search', {...data}, {headers: {Token: token}})
+    }
+    getAllUser(token) {
+        return axios.get(this.url+'barGetUsers', {headers: {Token: token}})
+    }
 }
 
-const httpClient = new Service("http://192.168.5.118:5000/")
+const httpClient = new Service("http://localhost:5000/")
 
 export default httpClient
diff --git a/src/router/index.js b/src/router/index.js
index 62d9f01..7bea60f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -41,14 +41,30 @@ const router = new VueRouter({
 
 router.beforeEach((to, from, next) => {
   store.dispatch('fetchAccessToken');
-  if (to.fullPath === '/finanzer') {
+  let sites = ['/finanzer', '/bar']
+  if (sites.includes(to.fullPath)) {
+    if (to.fullPath === '/finanzer') {
+      if (!store.state.user.group.includes('moneymaster')) {
+        next('/login')
+      }
+    }
+    if (to.fullPath === '/bar') {
+      if (!store.state.user.group.includes('bar')) {
+        next('/login')
+      }
+    }
     if (!store.state.user.accessToken) {
       next('/login')
     }
   }
   if (to.fullPath === '/login') {
     if (store.state.user.accessToken) {
-      next('/finanzer')
+      if (store.state.user.group.includes('moneymaster')) {
+        next('/finanzer')
+      } else if (store.state.user.group.includes('bar')) {
+        next('/bar')
+      }
+
     }
   }
   next();
diff --git a/src/store/index.js b/src/store/index.js
index b4e0d3e..4c6153b 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -56,10 +56,10 @@ export default new Vuex.Store({
             localStorage.setItem('user', JSON.stringify({ username: response.data.username, accessToken: response.data.token, group: response.data.group}));
             commit('loginStop', null);
             commit('updateAccessToken', response.data)
-            if (this.state.user.group === 'moneymaster') {
+            if (this.state.user.group.includes('moneymaster')) {
               router.push('/finanzer');
             }
-            if (this.state.user.group === 'bar') {
+            else if (this.state.user.group.includes('bar')) {
               router.push('/bar')
             }
           })
diff --git a/src/views/BarView.vue b/src/views/BarView.vue
index cbdc99e..3b70549 100644
--- a/src/views/BarView.vue
+++ b/src/views/BarView.vue
@@ -1,7 +1,10 @@
 <template>
     <div>
         <TitleBar/>
-        <CreditLists v-bind:users="users" @add:amount="addAmount"></CreditLists>
+        <v-content>
+            <SearchBar @add:creditList="addCreditList"/>
+            <CreditLists v-bind:users="users" @add:amount="addAmount"></CreditLists>
+        </v-content>
     </div>
 </template>
 
@@ -11,9 +14,10 @@
     import httpClient from "../plugins/restService";
     // eslint-disable-next-line no-unused-vars
     import axios from "axios";
+    import SearchBar from "../components/baruser/SearchBar";
     export default {
         name: "BarView",
-        components: {CreditLists, TitleBar},
+        components: {SearchBar, CreditLists, TitleBar},
         created() {
             this.getUser()
         },
@@ -48,6 +52,11 @@
                     this.$store.dispatch("logout")
                     this.users = []
                 })
+                this.users = this.users.sort((a,b) => {
+                    if (a.username > b.username) return 1
+                    if (a.username < b.username) return -1
+                    return 0
+                })
             },
             // eslint-disable-next-line no-unused-vars
             addAmount(username, amount) {
@@ -64,6 +73,23 @@
                     })
                     user.amount = response.data.amount
                 })
+            },
+            addCreditList(user) {
+                // eslint-disable-next-line no-console
+                console.log('addCreditlist: ', user)
+                if (!this.users.find(user1 => {
+                    return user1.username === user.username
+                })) {
+                    const lastId = this.users.length > 0 ? this.users[this.users.length - 1].id : 0
+                    this.users.push({
+                        id: lastId + 1,
+                        username: user.username,
+                        firstname: user.firstname,
+                        lastname: user.lastname,
+                        amount: 0,
+                        type: null
+                    })
+                }
             }
         }
     }
diff --git a/src/views/FinanzerView.vue b/src/views/FinanzerView.vue
index 2a80ef1..05f0f9f 100644
--- a/src/views/FinanzerView.vue
+++ b/src/views/FinanzerView.vue
@@ -1,15 +1,30 @@
 <template>
         <div>
             <TitleBar/>
-            <v-navigation-drawer permanent width="auto" app clipped class="elevation-2">
-                <v-container>
-                <h1 v-for="user in users" v-bind:key="user.id">{{user.firstname}} {{user.lastname}}</h1>
-                </v-container>
-            </v-navigation-drawer>
-            <v-content>
-                <v-container>
+            <v-navigation-drawer mini-variant expand-on-hover app clipped permanent overflow>
+                <v-list>
+                    <v-list-item class="title" link @click="test(activeUser)">
+                        <v-list-item-icon>
+                            <v-icon>home</v-icon>
+                        </v-list-item-icon>
+                        <v-list-item-title>
+                            Gesamtübersicht
+                        </v-list-item-title>
 
-                </v-container>
+                    </v-list-item>
+                </v-list>
+                <v-divider/>
+                <v-list>
+                    <v-list-item v-for="user in users" v-bind:key="users.indexOf(user)" :class="user.username === activeUser.username ? 'v-list-item--highlighted' : ''" link @click="test(user)">
+                        <v-list-item-title>{{user.lastname}}, {{user.firstname}}</v-list-item-title>
+                    </v-list-item>
+                </v-list>
+            </v-navigation-drawer>
+            <v-content v-if="!activeUser.username">
+                <Overview v-bind:users="users" @add:amount="addAmount" @add:credit="addCredit"/>
+            </v-content>
+            <v-content v-else>
+                <User v-bind:user="activeUser"/>
             </v-content>
         </div>
 </template>
@@ -17,19 +32,33 @@
 <script>
     import TitleBar from "@/components/TitleBar";
     import httpClient from "../plugins/restService";
+    import Overview from "../components/finanzer/Overview";
+    import User from "../components/finanzer/User";
 
     export default {
         name: "FinanzerView",
-        components: {TitleBar},
+        components: {User, Overview, TitleBar},
         created() {
           this.getUser()
         },
         data () {
             return {
                 users: [],
+                activeUser: {
+                    username: null,
+                },
             }
         },
         methods: {
+            test (e) {
+                // eslint-disable-next-line no-console
+                console.log("event: ", e)
+                if (this.activeUser.username === e.username) {
+                    this.activeUser = {username: null}
+                } else {
+                    this.activeUser = {...e}
+                }
+            },
             getUser() {
                 httpClient.getFinanzerMain(this.$store.getters.getToken)
                 .then(response => {
@@ -39,11 +68,76 @@
                         // eslint-disable-next-line no-console
                         console.log("user: ", user)
                         const lastId = this.users.length > 0 ? this.users[this.users.length - 1].id : 0
+                        // eslint-disable-next-line no-unused-vars
+                        let list = {}
+                        for (let creditList in response.data[user]['creditList']) {
+                            // eslint-disable-next-line no-unused-vars
+                            // eslint-disable-next-line no-console
+                            console.log('creditList: ', creditList, response.data[user]['creditList'])
+                            let amount = {
+                                type:'Schulden',
+                                jan_amount: 0 - response.data[user]['creditList'][creditList].jan.depts,
+                                feb_amount: 0 - response.data[user]['creditList'][creditList].feb.depts,
+                                maer_amount: 0 - response.data[user]['creditList'][creditList].maer.depts,
+                                apr_amount:0 - response.data[user]['creditList'][creditList].apr.depts,
+                                mai_amount: 0 - response.data[user]['creditList'][creditList].mai.depts,
+                                jun_amount: 0 - response.data[user]['creditList'][creditList].jun.depts,
+                                jul_amount: 0 - response.data[user]['creditList'][creditList].jul.depts,
+                                aug_amount: 0 - response.data[user]['creditList'][creditList].aug.depts,
+                                sep_amount: 0 - response.data[user]['creditList'][creditList].sep.depts,
+                                okt_amount: 0 - response.data[user]['creditList'][creditList].okt.depts,
+                                nov_amount: 0 - response.data[user]['creditList'][creditList].nov.depts,
+                                dez_amount: 0 - response.data[user]['creditList'][creditList].dez.depts,
+                                last: 0 - response.data[user]['creditList'][creditList]['last']
+                            }
+
+                            amount.sum = amount.jan_amount + amount.feb_amount + amount.maer_amount + amount.apr_amount + amount.mai_amount + amount.jun_amount + amount.jul_amount + amount.aug_amount + amount.sep_amount + amount.okt_amount + amount.nov_amount + amount.dez_amount
+
+                            let credit = {
+                                type:'Guthaben',
+                                jan_amount: response.data[user]['creditList'][creditList].jan.credit,
+                                feb_amount: response.data[user]['creditList'][creditList].feb.credit,
+                                maer_amount: response.data[user]['creditList'][creditList].maer.credit,
+                                apr_amount:response.data[user]['creditList'][creditList].apr.credit,
+                                mai_amount:response.data[user]['creditList'][creditList].mai.credit,
+                                jun_amount:response.data[user]['creditList'][creditList].jun.credit,
+                                jul_amount:response.data[user]['creditList'][creditList].jul.credit,
+                                aug_amount:response.data[user]['creditList'][creditList].aug.credit,
+                                sep_amount:response.data[user]['creditList'][creditList].sep.credit,
+                                okt_amount:response.data[user]['creditList'][creditList].okt.credit,
+                                nov_amount:response.data[user]['creditList'][creditList].nov.credit,
+                                dez_amount:response.data[user]['creditList'][creditList].dez.credit
+                            }
+                            credit.sum = credit.jan_amount + credit.feb_amount + credit.maer_amount + credit.apr_amount + credit.mai_amount + credit.jun_amount + credit.jul_amount + credit.aug_amount + credit.sep_amount + credit.okt_amount + credit.nov_amount + credit.dez_amount
+                            let sum = {
+                                type:'Summe',
+                                jan_amount: credit.jan_amount + amount.jan_amount,
+                                feb_amount: credit.feb_amount + amount.feb_amount,
+                                maer_amount: credit.maer_amount + amount.maer_amount,
+                                apr_amount: credit.apr_amount + amount.apr_amount,
+                                mai_amount: credit.mai_amount + amount.mai_amount,
+                                jun_amount: credit.jun_amount + amount.jun_amount,
+                                jul_amount: credit.jul_amount + amount.jul_amount,
+                                aug_amount: credit.aug_amount + amount.aug_amount,
+                                sep_amount: credit.sep_amount + amount.sep_amount,
+                                okt_amount: credit.okt_amount + amount.okt_amount,
+                                nov_amount: credit.nov_amount + amount.nov_amount,
+                                dez_amount: credit.dez_amount + amount.dez_amount,
+                            }
+                            sum.sum = sum.jan_amount + sum.feb_amount + sum.maer_amount + sum.apr_amount + sum.mai_amount + sum.jun_amount + sum.jul_amount + sum.aug_amount + sum.sep_amount + sum.okt_amount + sum.nov_amount + sum.dez_amount
+
+                            list[creditList] = [{...credit}, {...amount}, {...sum}]
+                            // eslint-disable-next-line no-console
+                            console.log("creditList list:", creditList, list)
+                        }
                         this.users.push({
                             id: lastId + 1,
                             username: response.data[user].username,
                             firstname: response.data[user].firstname,
-                            lastname: response.data[user].lastname
+                            lastname: response.data[user].lastname,
+                            creditList: list,
+                            expand: false,
+                            active: false
                         })
                     }})
                 .catch(error => {
@@ -51,10 +145,29 @@
                     console.log("error: ", error.response.data.error)
                 })
 
+                this.users = this.users.sort((a, b) => {
+                    if (a.lastname > b.lastname) return 1
+                    if (a.lastname < b.lastname) return -1
+                    if (a.firstname > b.firstname) return 1
+                    if (a.firstname < b.firstname) return -1
+                    return 0
+                })
+
                 // eslint-disable-next-line no-console
                 console.log("this.users: ", this.users)
             },
+            addAmount(data) {
+                httpClient.addAmountFinanzer(this.$store.getters.getToken, {userId: data.user.username, amount: data.amount * 100, year: data.year, month: data.month})
+            },
+            addCredit(data) {
 
+                httpClient.addCreditFinanzer(this.$store.getters.getToken, {userId: data.user.username, credit: data.credit * 100, year: data.year, month: data.month})
+            },
+            deactivateAllUser() {
+                for (let user in this.users) {
+                    user.active = false
+                }
+            }
 
         }
     }