diff --git a/src/components/finanzer/FinanzerNavigation.vue b/src/components/finanzer/FinanzerNavigation.vue
index 065e4f1..07ff246 100644
--- a/src/components/finanzer/FinanzerNavigation.vue
+++ b/src/components/finanzer/FinanzerNavigation.vue
@@ -11,6 +11,14 @@
         </v-list-item-icon>
         <v-list-item-title>Gesamtübersicht</v-list-item-title>
       </v-list-item>
+      <v-list-item link to="/main/finanzer/servicemanagement">
+        <v-list-item-icon>
+          <v-icon>work</v-icon>
+        </v-list-item-icon>
+        <v-list-item-title>
+          Dienstverwaltung
+        </v-list-item-title>
+      </v-list-item>
     </v-list>
     <v-divider />
     <v-list>
diff --git a/src/components/vorstand/ServiceManagement.vue b/src/components/vorstand/ServiceManagement.vue
new file mode 100644
index 0000000..276d364
--- /dev/null
+++ b/src/components/vorstand/ServiceManagement.vue
@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <v-content>
+      <v-toolbar>
+        <v-toolbar-title>
+          Dienstverwaltung
+        </v-toolbar-title>
+        <v-spacer />
+        <v-toolbar-items>
+          <v-btn text icon @click="changeMonth(-1)">
+            <v-icon>keyboard_arrow_left</v-icon>
+          </v-btn>
+          <v-list-item>
+            <v-list-item-title class="title"
+              >{{ monthArray[date.getMonth()] }}
+              {{ date.getFullYear() }}</v-list-item-title
+            >
+          </v-list-item>
+          <v-btn text icon @click="changeMonth(1)">
+            <v-icon>keyboard_arrow_right</v-icon>
+          </v-btn>
+        </v-toolbar-items>
+        <v-spacer />
+      </v-toolbar>
+      <v-card v-for="week in month" :key="month.indexOf(week)">
+        <v-card-title class="subtitle-1 font-weight-bold">
+          Woche vom {{ week.startDate.getDate() }}.{{
+            week.startDate.getMonth() + 1
+          }}.{{ week.startDate.getFullYear() }} bis
+          {{ week.endDate.getDate() }}.{{ week.endDate.getMonth() + 1 }}.{{
+            week.endDate.getFullYear()
+          }}
+        </v-card-title>
+        <v-card-text>
+          <v-row justify="start" align="start">
+            <div v-for="day in week.days" :key="day.id">
+              <v-col>
+                <Day v-bind:day="day"/>
+              </v-col>
+            </div>
+          </v-row>
+        </v-card-text>
+      </v-card>
+    </v-content>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex'
+import Day from './ServiceManagementComponents/Day'
+export default {
+  name: 'ServiceManagement',
+  components: { Day },
+  data() {
+    return {
+      id: 0,
+      date: new Date(),
+      monthArray: [
+        'Januar',
+        'Februar',
+        'März',
+        'April',
+        'Mai',
+        'Juni',
+        'Juli',
+        'August',
+        'September',
+        'Oktober',
+        'November',
+        'Dezember'
+      ]
+    }
+  },
+  created() {
+    this.createMonth(this.date)
+    this.getAllUsers()
+  },
+  methods: {
+    ...mapActions({
+      createMonth: 'sm/createMonth',
+      getAllUsers: 'sm/getAllUsers'
+    }),
+    changeMonth(value) {
+      if (value === -1) {
+        this.date = new Date(this.date.getFullYear(), this.date.getMonth() - 1)
+      } else {
+        this.date = new Date(this.date.getFullYear(), this.date.getMonth() + 1)
+      }
+      this.createMonth(this.date)
+    }
+  },
+  computed: {
+    ...mapGetters({
+      month: 'sm/month'
+    })
+  }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/components/vorstand/ServiceManagementComponents/Day.vue b/src/components/vorstand/ServiceManagementComponents/Day.vue
new file mode 100644
index 0000000..0b69f14
--- /dev/null
+++ b/src/components/vorstand/ServiceManagementComponents/Day.vue
@@ -0,0 +1,121 @@
+<template>
+  <div v-if="day">
+    <v-card :color="color(day)" max-width="300px" min-width="300px">
+      <v-card-title v-if="day.date" class="subtitle-1 font-weight-bold">
+        {{ day.name }} den {{ day.date.getDate() }}.{{
+          day.date.getMonth() + 1
+        }}.{{ day.date.getFullYear() }}
+      </v-card-title>
+      <v-card-text>
+        <v-autocomplete
+          chips
+          return-object
+          multiple
+          v-model="day.worker"
+          :items="allUsers"
+          item-text="fullName"
+          label="Dienste"
+          prepend-inner-icon="group_add"
+          filled
+          color="green"
+        >
+          <template v-slot:selection="data">
+            <v-chip
+              v-bind="data.attrs"
+              :input-value="data.selected"
+              close
+              @click="data.select"
+              @click:close="remove(data.item)"
+            >
+              {{ data.item.firstname }} {{ data.item.lastname }}
+            </v-chip>
+          </template>
+          <template v-slot:item="data">
+            <v-list-item-content>
+              <v-list-item-title>
+                {{ data.item.firstname }} {{ data.item.lastname }}
+              </v-list-item-title>
+            </v-list-item-content>
+          </template>
+        </v-autocomplete>
+      </v-card-text>
+    </v-card>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex'
+export default {
+  name: 'Day',
+  props: {
+    day: Object
+  },
+  data() {
+    return {}
+  },
+  created() {
+    this.getUser({date: this.day.date.getTime()/1000})
+  },
+  methods: {
+    ...mapActions({
+      addUser: 'sm/addUser',
+      getUser: 'sm/getUser',
+      deleteUser: 'sm/deleteUser'
+    }),
+    // eslint-disable-next-line no-unused-vars
+    remove(deletedUser) {
+      const obj = this.day.worker.find(a => {
+        return a.username === deletedUser.username
+      })
+      const index = this.day.worker.indexOf(obj)
+      if (index >= 0) this.day.worker.splice(index, 1)
+      this.deleteUser({startdatetime: this.day.date, date: this.day.date.getTime()/1000, user: deletedUser})
+    },
+    color: day => {
+      if (day) {
+        if (day.date.getDay() === 0 || day.date.getDay() === 1) {
+          return 'grey lighten-4'
+        } else {
+          if (day.worker.length < 2) {
+            return 'yellow'
+          } else {
+            return 'light-green'
+          }
+        }
+      } else {
+        return 'grey lighten-4'
+      }
+    }
+  },
+  computed: {
+    ...mapGetters({
+      allUsers: 'sm/allUsers'
+    }),
+    worker() {
+      return this.day.worker
+    }
+  },
+  watch: {
+    worker(newValue, oldValue) {
+      if (oldValue !== newValue) {
+        let addedUser = null
+        for (let user in newValue) {
+          if (!oldValue.includes(newValue[user])) {
+            addedUser = newValue[user]
+            this.addUser({date: this.day.date.getTime()/1000, user: addedUser})
+          }
+        }
+        let deletedUser = null
+        for (let user in oldValue) {
+          if (!newValue.includes(oldValue[user])) {
+            deletedUser = oldValue[user]
+            this.deleteUser({startdatetime: this.day.date, date: this.day.date.getTime()/1000, user: deletedUser})
+          }
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/plugins/routes.js b/src/plugins/routes.js
index 3861d98..0cbcb75 100644
--- a/src/plugins/routes.js
+++ b/src/plugins/routes.js
@@ -1,5 +1,6 @@
-//const main = 'http://192.168.5.118:5000/'
+//const main = 'https://192.168.5.128:5000/'
 const main = 'https://localhost:5000/'
+//const main = 'https://groeger-clan.duckdns.org:5000/'
 
 const url = {
   login: main + 'login',
@@ -17,7 +18,14 @@ const url = {
   finanzerSendAllMail: main + 'finanzerSendAllMail',
   finanzerSendOneMail: main + 'finanzerSendOneMail',
   userMain: main + 'user/main',
-  userAddAmount: main + 'user/addAmount'
+  userAddAmount: main + 'user/addAmount',
+  vorstand: {
+    sm: {
+      addUser: main + 'sm/addUser',
+      deleteUser: main + 'sm/deleteUser',
+      getUser: main + 'sm/getUser'
+    }
+  }
 }
 
 export default url
diff --git a/src/router/index.js b/src/router/index.js
index a816fab..8d6f02b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -14,6 +14,7 @@ import BarNavigation from '../components/baruser/BarNavigation'
 import FinanzerNavigation from '../components/finanzer/FinanzerNavigation'
 import Overview from '../components/finanzer/Overview'
 import User from '../components/finanzer/User'
+import ServiceManagement from '../components/vorstand/ServiceManagement'
 
 Vue.use(VueRouter)
 
@@ -71,6 +72,10 @@ const routes = [
             name: 'activeUser',
             props: true,
             component: User
+          },
+          {
+            path: 'servicemanagement',
+            component: ServiceManagement
           }
         ]
       }
diff --git a/src/store/index.js b/src/store/index.js
index 8687346..412ceef 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,6 +4,7 @@ import login from './modules/login'
 import finanzerUsers from './modules/finanzerUsers'
 import barUsers from '@/store/modules/barUsers'
 import user from '@/store/modules/user'
+import sm from '@/store/modules/serviceManagement'
 
 Vue.use(Vuex)
 
@@ -12,6 +13,7 @@ export default new Vuex.Store({
     login,
     finanzerUsers,
     barUsers,
-    user
+    user,
+    sm
   }
 })
diff --git a/src/store/modules/serviceManagement.js b/src/store/modules/serviceManagement.js
new file mode 100644
index 0000000..237da7c
--- /dev/null
+++ b/src/store/modules/serviceManagement.js
@@ -0,0 +1,244 @@
+import axios from 'axios'
+import url from '@/plugins/routes'
+
+const state = {
+  month: [],
+  allUsers: []
+}
+
+const mutations = {
+  setAllUsers: (state, users) => {
+    state.allUsers = []
+    state.allUsers = users
+    for (let i = 0; i < state.allUsers.length; i++) {
+      state.allUsers[i].fullName =
+        state.allUsers[i].firstname + ' ' + state.allUsers[i].lastname
+    }
+  },
+  createMonth: (state, date) => {
+    let month = []
+    let id = 0
+    const year = date.getFullYear()
+    const mon = date.getMonth()
+    let a = new Date(year, mon + 1, 0)
+    let days = a.getDate()
+    let startDate = 1
+    for (let intDay = 1; intDay <= days; intDay++) {
+      if (new Date(year, mon, intDay).getDay() === 3) {
+        startDate = intDay
+        break
+      }
+    }
+    let end = false
+    let week = { id: id, days: {} }
+    for (let intDay = startDate; intDay <= days + 7; intDay++) {
+      if (end) break
+      let currentDate = new Date(year, mon, intDay, 12)
+
+      switch (currentDate.getDay()) {
+        case 1:
+          mutations.setStartEndDate(week)
+          month.push(week)
+          id++
+          week = { id: id, days: {} }
+          week.days.monday = {
+            id: currentDate.getDay(),
+            date: currentDate,
+            name: 'Montag',
+            worker: []
+          }
+          break
+        case 2:
+          week.days.tuesday = {
+            id: currentDate.getDay(),
+            date: currentDate,
+            name: 'Dienstag',
+            worker: []
+          }
+          break
+        case 3:
+          if (currentDate.getMonth() === mon + 1) {
+            end = true
+            mutations.setStartEndDate(week)
+            month.push(week)
+          } else {
+            week.days.wednesday = {
+              id: currentDate.getDay(),
+              date: currentDate,
+              name: 'Mittwoch',
+              worker: []
+            }
+          }
+          break
+        case 4:
+          week.days.thursday = {
+            id: currentDate.getDay(),
+            date: currentDate,
+            name: 'Donnerstag',
+            worker: []
+          }
+          break
+        case 5:
+          week.days.friday = {
+            id: currentDate.getDay(),
+            date: currentDate,
+            name: 'Freitag',
+            worker: []
+          }
+          break
+        case 6:
+          week.days.satturday = {
+            id: currentDate.getDay(),
+            date: currentDate,
+            name: 'Samstag',
+            worker: []
+          }
+          break
+        case 0:
+          week.days.sunday = {
+            id: currentDate.getDay(),
+            date: currentDate,
+            name: 'Sontag',
+            worker: []
+          }
+          break
+      }
+    }
+    state.month = month
+  },
+  setStartEndDate: week => {
+    if (week.days.monday) {
+      week.startDate = week.days.monday.date
+    } else if (week.days.tuesday) {
+      week.startDate = week.days.tuesday.date
+    } else if (week.days.wednesday) {
+      week.startDate = week.days.wednesday.date
+    } else if (week.days.thursday) {
+      week.startDate = week.days.thursday.date
+    } else if (week.days.friday) {
+      week.startDate = week.days.friday.date
+    } else if (week.days.satturday) {
+      week.startDate = week.days.satturday.date
+    } else if (week.days.sunday) {
+      week.startDate = week.days.sunday.date
+    }
+
+    if (week.days.sunday) {
+      week.endDate = week.days.sunday.date
+    } else if (week.days.satturday) {
+      week.endDate = week.days.satturday.date
+    } else if (week.days.friday) {
+      week.endDate = week.days.friday.date
+    } else if (week.days.thursday) {
+      week.endDate = week.days.thursday.date
+    } else if (week.days.wednesday) {
+      week.endDate = week.days.wednesday.date
+    } else if (week.days.tuesday) {
+      week.endDate = week.days.tuesday.date
+    } else if (week.days.monday) {
+      week.endDate = week.days.monday.date
+    }
+  },
+  updateMonth: (state, data) => {
+    const date = new Date(data.startdatetime)
+    const user = data.user
+    for (let week = 0; week < state.month.length; week++) {
+      for (let day in state.month[week].days) {
+        if (state.month[week].days[day].date - date === 0) {
+          let worker = state.month[week].days[day].worker.find(a => {
+             return a.username === user.username
+          })
+          if (!worker && data.com === 'add') {
+            state.month[week].days[day].worker.push({
+              firstname: user.firstname,
+              lastname: user.lastname,
+              username: user.username,
+              fullName: user.firstname + ' ' + user.lastname
+            })
+          }
+        }
+      }
+    }
+  }
+}
+const actions = {
+  createMonth({ commit }, date) {
+    commit('createMonth', date)
+  },
+  async getAllUsers({ commit, rootState, dispatch }) {
+    try {
+      const response = await axios.post(
+        url.searchUser,
+        { searchString: '' },
+        { headers: { Token: rootState.login.user.accessToken } }
+      )
+      commit('setAllUsers', response.data)
+    } catch (e) {
+      if (e.response)
+        if (e.response.data === 401) dispatch('logout', null, { root: true })
+    }
+  },
+  // eslint-disable-next-line no-unused-vars
+  async addUser({ commit, rootState, dispatch }, data) {
+    try {
+      const response = await axios.post(
+        url.vorstand.sm.addUser,
+        { ...data },
+        {
+          headers: { Token: rootState.login.user.accessToken }
+        }
+      )
+      console.log(response.data)
+      commit('updateMonth', {...response.data[0], com: 'add'})
+    } catch (e) {
+      if (e.response)
+        if (e.response.status === 401) dispatch('logout', null, { root: true })
+    }
+  },
+  async getUser({ commit, rootState, dispatch }, data) {
+    try {
+      const response = await axios.post(
+        url.vorstand.sm.getUser,
+        { ...data },
+        { headers: { Token: rootState.login.user.accessToken } }
+      )
+      for (let item = 0; item < response.data.length; item++) {
+        commit('updateMonth', { ...response.data[item], com: 'add' })
+      }
+    } catch (e) {
+      if (e.response)
+        if (e.response.status === 401) dispatch('logout', null, { root: true })
+    }
+  },
+  // eslint-disable-next-line no-unused-vars
+  async deleteUser({ commit, rootState, dispatch }, data) {
+    try {
+      // eslint-disable-next-line no-unused-vars
+      const response = await axios.post(
+        url.vorstand.sm.deleteUser,
+        { ...data },
+        { headers: { Token: rootState.login.user.accessToken } }
+      )
+      commit('updateMonth', {...data, com: 'delete'})
+    } catch (e) {
+      if (e.response)
+        if (e.response.status === 401) dispatch('logout', null, { root: true })
+    }
+  }
+}
+const getters = {
+  month: state => {
+    return state.month
+  },
+  allUsers: state => {
+    return state.allUsers
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+  getters
+}
diff --git a/src/views/FinanzerView.vue b/src/views/FinanzerView.vue
index 2341ee9..9d27a1c 100644
--- a/src/views/FinanzerView.vue
+++ b/src/views/FinanzerView.vue
@@ -1,52 +1,10 @@
 <template>
   <div>
-    <v-navigation-drawer
-      mini-variant
-      expand-on-hover
-      app
-      clipped
-      permanent
-      overflow
-      right
-    >
-      <template v-slot:append>
-        <v-list>
-          <v-list-item>
-            <v-list-item-icon>
-              <v-icon>search</v-icon>
-            </v-list-item-icon>
-            <v-list-item-title>
-              <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-list-item-title>
-          </v-list-item>
-          <v-list-item>
-            <v-list-item-icon>
-              <v-icon>person_add</v-icon>
-            </v-list-item-icon>
-            <v-list-item-title>
-              <v-btn text block @click="addUser(user)">Hinzufügen</v-btn>
-            </v-list-item-title>
-          </v-list-item>
-        </v-list>
-      </template>
-    </v-navigation-drawer>
     <router-view />
   </div>
 </template>
 
 <script>
-// eslint-disable-next-line no-unused-vars
-import { mapGetters } from 'vuex'
 import { mapActions } from 'vuex'
 
 export default {
@@ -57,23 +15,11 @@ export default {
     this.getUsers()
     this.createYears()
   },
-  data() {
-    return {
-      user: null
-    }
-  },
   methods: mapActions({
     getAllUsers: 'finanzerUsers/getAllUsers',
-    setActiveUser: 'finanzerUsers/setActiveUser',
     getUsers: 'finanzerUsers/getUsers',
-    finanzerUsers: 'finanzerUsers/addUser',
     createYears: 'finanzerUsers/createYears',
     logout: 'logout'
-  }),
-  computed: mapGetters({
-    users: 'finanzerUsers/users',
-    activeUser: 'finanzerUsers/activeUser',
-    allUsers: 'finanzerUsers/allUsers'
   })
 }
 </script>
diff --git a/src/views/Home.vue b/src/views/Home.vue
deleted file mode 100644
index d076a9f..0000000
--- a/src/views/Home.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <div>
-    <TitleBar />
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-
-import TitleBar from '@/components/TitleBar'
-export default {
-  name: 'home',
-  components: {
-    TitleBar
-  }
-}
-</script>