diff --git a/src/components/lists/PeopleList.vue b/src/components/lists/PeopleList.vue
index 565ceea12..5fb6bcacf 100644
--- a/src/components/lists/PeopleList.vue
+++ b/src/components/lists/PeopleList.vue
@@ -25,7 +25,7 @@
             <th scope="col" class="departments">
               {{ $t('people.list.departments') }}
             </th>
-            <th scope="col" class="studio">
+            <th scope="col" class="studio" v-if="!isBots">
               {{ $t('people.list.studio') }}
             </th>
             <th scope="col" class="actions"></th>
@@ -70,7 +70,7 @@
               :departments="person.departments"
             />
             <td class="studio" v-if="!isBots">
-              <studio-name :studio-id="person.studio_id" />
+              <studio-name :studio="person.studio" v-if="person.studio" />
             </td>
             <row-actions-cell
               v-if="isCurrentUserAdmin"
@@ -120,7 +120,7 @@
               :departments="person.departments"
             />
             <td class="studio" v-if="!isBots">
-              <studio-name :studio-id="person.studio_id" />
+              <studio-name :studio="person.studio" v-if="person.studio" />
             </td>
             <row-actions-cell
               v-if="isCurrentUserAdmin"
@@ -184,7 +184,7 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['isCurrentUserAdmin', 'studioMap']),
+    ...mapGetters(['isCurrentUserAdmin']),
 
     activePeople() {
       return this.entries.filter(person => person.active)
@@ -220,10 +220,6 @@ export default {
   },
 
   methods: {
-    getStudioName(person) {
-      return this.studioMap.get(person.studio_id)?.name
-    },
-
     isExpired(expirationDate) {
       return expirationDate < this.today
     },
diff --git a/src/components/lists/PeopleTimesheetList.vue b/src/components/lists/PeopleTimesheetList.vue
index 23b263a00..6c25deb4b 100644
--- a/src/components/lists/PeopleTimesheetList.vue
+++ b/src/components/lists/PeopleTimesheetList.vue
@@ -367,7 +367,8 @@ export default {
           year: year
         },
         query: {
-          productionId: this.$route.query.productionId
+          productionId: this.$route.query.productionId,
+          studioId: this.$route.query.studioId
         }
       }
     },
@@ -381,7 +382,8 @@ export default {
           month: month
         },
         query: {
-          productionId: this.$route.query.productionId
+          productionId: this.$route.query.productionId,
+          studioId: this.$route.query.studioId
         }
       }
     },
@@ -395,7 +397,8 @@ export default {
           week: week
         },
         query: {
-          productionId: this.$route.query.productionId
+          productionId: this.$route.query.productionId,
+          studioId: this.$route.query.studioId
         }
       }
     },
@@ -410,7 +413,8 @@ export default {
           day: day
         },
         query: {
-          productionId: this.$route.query.productionId
+          productionId: this.$route.query.productionId,
+          studioId: this.$route.query.studioId
         }
       }
     },
diff --git a/src/components/modals/EditPersonModal.vue b/src/components/modals/EditPersonModal.vue
index b3826dbd7..8c9be4481 100644
--- a/src/components/modals/EditPersonModal.vue
+++ b/src/components/modals/EditPersonModal.vue
@@ -95,9 +95,9 @@
             </button>
           </div>
         </div>
-        <combobox
+        <combobox-studio
+          class="field"
           :label="$t('people.fields.studio')"
-          :options="studioOptions"
           v-model="form.studio_id"
           v-if="!isBot"
         />
@@ -177,6 +177,7 @@ import { modalMixin } from '@/components/modals/base_modal'
 
 import Combobox from '@/components/widgets/Combobox.vue'
 import ComboboxDepartment from '@/components/widgets/ComboboxDepartment.vue'
+import ComboboxStudio from '@/components/widgets/ComboboxStudio.vue'
 import DateField from '@/components/widgets/DateField.vue'
 import DepartmentName from '@/components/widgets/DepartmentName.vue'
 import TextField from '@/components/widgets/TextField.vue'
@@ -189,6 +190,7 @@ export default {
   components: {
     Combobox,
     ComboboxDepartment,
+    ComboboxStudio,
     DateField,
     DepartmentName,
     TextField
@@ -282,7 +284,6 @@ export default {
       'departmentMap',
       'isCurrentUserAdmin',
       'people',
-      'studios',
       'user'
     ]),
 
@@ -292,16 +293,6 @@ export default {
       )
     },
 
-    studioOptions() {
-      return [
-        { label: '', value: null },
-        ...this.studios.map(studio => ({
-          label: studio.name,
-          value: studio.id
-        }))
-      ]
-    },
-
     isEditing() {
       return Boolean(this.personToEdit?.id)
     },
diff --git a/src/components/pages/Bots.vue b/src/components/pages/Bots.vue
index 493006ad2..1ec046467 100644
--- a/src/components/pages/Bots.vue
+++ b/src/components/pages/Bots.vue
@@ -20,16 +20,15 @@
         placeholder="ex: gazu bot"
       />
       <combobox-department
-        class="combobox-department flexrow-item"
+        class="flexrow-item"
         :label="$t('main.department')"
         v-model="selectedDepartment"
       />
       <combobox-styled
         class="flexrow-item"
         :label="$t('people.fields.role')"
-        :options="roleOptions"
         locale-key-prefix="people.role."
-        no-margin
+        :options="roleOptions"
         v-model="role"
       />
     </div>
@@ -174,10 +173,10 @@ export default {
   mounted() {
     this.role = this.$route.query.role || 'all'
     this.selectedDepartment = this.$route.query.department || ''
+    this.setSearchFromUrl()
     this.loadPeople(() => {
-      this.setSearchFromUrl()
       this.onSearchChange()
-    }) // Needed to show department informations
+    })
   },
 
   watch: {
diff --git a/src/components/pages/MainSchedule.vue b/src/components/pages/MainSchedule.vue
index a781c18cf..6e1ceafbf 100644
--- a/src/components/pages/MainSchedule.vue
+++ b/src/components/pages/MainSchedule.vue
@@ -80,6 +80,7 @@ import Schedule from '@/components/widgets/Schedule.vue'
 
 export default {
   name: 'main-schedule',
+
   components: {
     ComboboxNumber,
     Datepicker,
@@ -110,7 +111,11 @@ export default {
   },
 
   mounted() {
-    this.reset()
+    let zoom = parseInt(this.$route.query.zoom)
+    zoom = isNaN(zoom) ? 1 : zoom
+    this.zoomLevel = Math.min(Math.max(zoom, 0), 3)
+
+    this.init()
   },
 
   computed: {
@@ -128,7 +133,7 @@ export default {
   methods: {
     ...mapActions(['editProduction', 'loadScheduleItems', 'saveScheduleItem']),
 
-    reset() {
+    init() {
       if (!this.openProductions.length) {
         return
       }
@@ -202,12 +207,28 @@ export default {
           end_date: item.endDate.format('YYYY-MM-DD')
         })
       }
+    },
+
+    updateRoute({ zoom }) {
+      const query = { ...this.$route.query }
+
+      if (zoom !== undefined) {
+        query.zoom = String(zoom)
+      }
+
+      if (JSON.stringify(query) !== JSON.stringify(this.$route.query)) {
+        this.$router.push({ query })
+      }
     }
   },
 
   socket: {},
 
-  watch: {},
+  watch: {
+    zoomLevel(value) {
+      this.updateRoute({ zoom: value })
+    }
+  },
 
   metaInfo() {
     return {
diff --git a/src/components/pages/People.vue b/src/components/pages/People.vue
index 973cac716..bde162aa9 100644
--- a/src/components/pages/People.vue
+++ b/src/components/pages/People.vue
@@ -37,16 +37,20 @@
         placeholder="ex: John Doe"
       />
       <combobox-department
-        class="combobox-department flexrow-item"
+        class="flexrow-item"
         :label="$t('main.department')"
         v-model="selectedDepartment"
       />
+      <combobox-studio
+        class="flexrow-item"
+        :label="$t('main.studio')"
+        v-model="selectedStudio"
+      />
       <combobox-styled
         class="flexrow-item"
         :label="$t('people.fields.role')"
-        :options="roleOptions"
         locale-key-prefix="people.role."
-        no-margin
+        :options="roleOptions"
         v-model="role"
       />
     </div>
@@ -149,31 +153,37 @@
 import { mapGetters, mapActions } from 'vuex'
 
 import csv from '@/lib/csv'
-import ButtonHrefLink from '@/components/widgets/ButtonHrefLink'
-import ButtonSimple from '@/components/widgets/ButtonSimple'
-import ChangePasswordModal from '@/components/modals/ChangePasswordModal'
-import ComboboxDepartment from '@/components/widgets/ComboboxDepartment'
-import ComboboxStyled from '@/components/widgets/ComboboxStyled'
-import EditAvatarModal from '@/components/modals/EditAvatarModal'
-import EditPersonModal from '@/components/modals/EditPersonModal'
-import HardDeleteModal from '@/components/modals/HardDeleteModal'
-import ImportModal from '@/components/modals/ImportModal'
-import ImportRenderModal from '@/components/modals/ImportRenderModal'
-import PeopleList from '@/components/lists/PeopleList'
-import PageTitle from '@/components/widgets/PageTitle'
-import SearchField from '@/components/widgets/SearchField'
-import SearchQueryList from '@/components/widgets/SearchQueryList'
+
 import { searchMixin } from '@/components/mixins/search'
 
+import ButtonHrefLink from '@/components/widgets/ButtonHrefLink.vue'
+import ButtonSimple from '@/components/widgets/ButtonSimple.vue'
+import ChangePasswordModal from '@/components/modals/ChangePasswordModal.vue'
+import ComboboxDepartment from '@/components/widgets/ComboboxDepartment.vue'
+import ComboboxStudio from '@/components/widgets/ComboboxStudio.vue'
+import ComboboxStyled from '@/components/widgets/ComboboxStyled.vue'
+import EditAvatarModal from '@/components/modals/EditAvatarModal.vue'
+import EditPersonModal from '@/components/modals/EditPersonModal.vue'
+import HardDeleteModal from '@/components/modals/HardDeleteModal.vue'
+import ImportModal from '@/components/modals/ImportModal.vue'
+import ImportRenderModal from '@/components/modals/ImportRenderModal.vue'
+import PeopleList from '@/components/lists/PeopleList.vue'
+import PageTitle from '@/components/widgets/PageTitle.vue'
+import SearchField from '@/components/widgets/SearchField.vue'
+import SearchQueryList from '@/components/widgets/SearchQueryList.vue'
+
 export default {
   name: 'people',
+
   mixins: [searchMixin],
+
   components: {
     ButtonHrefLink,
     ButtonSimple,
     ChangePasswordModal,
-    ComboboxStyled,
     ComboboxDepartment,
+    ComboboxStudio,
+    ComboboxStyled,
     EditAvatarModal,
     EditPersonModal,
     HardDeleteModal,
@@ -235,19 +245,21 @@ export default {
       personToEdit: { role: 'user' },
       personToChangePassword: {},
       selectedDepartment: '',
+      selectedStudio: '',
       success: {
         invite: false
       }
     }
   },
 
-  async mounted() {
+  mounted() {
     this.role = this.$route.query.role || 'all'
     this.selectedDepartment = this.$route.query.department || ''
-    await this.loadStudios()
-    await this.loadPeople()
+    this.selectedStudio = this.$route.query.studio || ''
     this.setSearchFromUrl()
-    this.onSearchChange()
+    this.loadPeople(() => {
+      this.onSearchChange()
+    })
   },
 
   watch: {
@@ -267,6 +279,10 @@ export default {
       this.updateRoute()
     },
 
+    selectedStudio() {
+      this.updateRoute()
+    },
+
     role() {
       this.updateRoute()
     }
@@ -281,7 +297,8 @@ export default {
       'isImportPeopleLoading',
       'isImportPeopleLoadingError',
       'peopleSearchQueries',
-      'personCsvFormData'
+      'personCsvFormData',
+      'studioMap'
     ]),
 
     currentPeople() {
@@ -294,7 +311,15 @@ export default {
           person.departments.includes(this.selectedDepartment)
         )
       }
-      return people
+      if (this.selectedStudio) {
+        people = people.filter(
+          person => person.studio_id === this.selectedStudio
+        )
+      }
+      return people.map(person => ({
+        ...person,
+        studio: this.studioMap.get(person.studio_id)
+      }))
     },
 
     deleteText() {
@@ -323,7 +348,6 @@ export default {
       'editPerson',
       'invitePerson',
       'loadPeople',
-      'loadStudios',
       'newPerson',
       'newPersonAndInvite',
       'removePeopleSearch',
@@ -558,8 +582,9 @@ export default {
     updateRoute() {
       const search = this.searchField.getValue()
       const department = this.selectedDepartment
+      const studio = this.selectedStudio
       const role = this.role
-      this.$router.push({ query: { search, department, role } })
+      this.$router.push({ query: { search, department, studio, role } })
     }
   },
 
diff --git a/src/components/pages/TeamSchedule.vue b/src/components/pages/TeamSchedule.vue
index 2d8b32fb5..4c74b1b33 100644
--- a/src/components/pages/TeamSchedule.vue
+++ b/src/components/pages/TeamSchedule.vue
@@ -43,6 +43,11 @@
           :label="$t('main.department')"
           v-model="selectedDepartment"
         />
+        <combobox-studio
+          class="flexrow-item"
+          :label="$t('main.studio')"
+          v-model="selectedStudio"
+        />
         <div class="flexrow-item people-filter">
           <label class="label">
             {{ $t('main.person') }}
@@ -215,6 +220,7 @@ import ButtonSimple from '@/components/widgets/ButtonSimple.vue'
 import ComboboxDepartment from '@/components/widgets/ComboboxDepartment.vue'
 import ComboboxNumber from '@/components/widgets/ComboboxNumber.vue'
 import ComboboxProduction from '@/components/widgets/ComboboxProduction.vue'
+import ComboboxStudio from '@/components/widgets/ComboboxStudio.vue'
 import ComboboxTaskType from '@/components/widgets/ComboboxTaskType.vue'
 import DepartmentName from '@/components/widgets/DepartmentName.vue'
 import EntityThumbnail from '@/components/widgets/EntityThumbnail.vue'
@@ -235,6 +241,7 @@ export default {
     ComboboxDepartment,
     ComboboxNumber,
     ComboboxProduction,
+    ComboboxStudio,
     ComboboxTaskType,
     Datepicker,
     DepartmentName,
@@ -258,6 +265,7 @@ export default {
       selectedEndDate: null,
       selectedPerson: null,
       selectedStartDate: null,
+      selectedStudio: null,
       startDate: moment(),
       unassignedTasks: [],
       totalUnassignedTasks: 0,
@@ -287,6 +295,11 @@ export default {
   },
 
   mounted() {
+    this.selectedDepartment = this.$route.query.department || undefined
+    this.selectedStudio = this.$route.query.studio || undefined
+    const zoom = parseInt(this.$route.query.zoom) || 1
+    this.zoomLevel = Math.min(Math.max(zoom, 1), 4)
+
     this.init()
   },
 
@@ -299,6 +312,7 @@ export default {
       'openProductions',
       'organisation',
       'productionMap',
+      'studios',
       'taskTypeMap',
       'user'
     ]),
@@ -322,15 +336,20 @@ export default {
     },
 
     selectablePeople() {
-      const displayedPeople = this.displayedPeople.filter(
+      let selectablePeople = this.displayedPeople.filter(
         person => !person.is_bot
       )
       if (this.selectedDepartment) {
-        return displayedPeople.filter(person =>
+        selectablePeople = selectablePeople.filter(person =>
           person.departments.includes(this.selectedDepartment)
         )
       }
-      return displayedPeople
+      if (this.selectedStudio) {
+        selectablePeople = selectablePeople.filter(
+          person => person.studio_id === this.selectedStudio
+        )
+      }
+      return selectablePeople
     },
 
     productionList() {
@@ -650,13 +669,32 @@ export default {
 
     onUpdateSelectedEndDate(date) {
       this.endDate = parseSimpleDate(date)
+    },
+
+    updateRoute({ department, studio, zoom }) {
+      const query = { ...this.$route.query }
+
+      if (department !== undefined) {
+        query.department = department || undefined
+      }
+      if (studio !== undefined) {
+        query.studio = studio || undefined
+      }
+      if (zoom !== undefined) {
+        query.zoom = String(zoom)
+      }
+
+      if (JSON.stringify(query) !== JSON.stringify(this.$route.query)) {
+        this.$router.push({ query })
+      }
     }
   },
 
   socket: {},
 
   watch: {
-    selectedDepartment() {
+    selectedDepartment(value) {
+      this.updateRoute({ department: value })
       if (
         this.selectedPerson &&
         !this.selectablePeople.includes(this.selectedPerson)
@@ -665,9 +703,26 @@ export default {
       }
       this.refreshSchedule()
     },
+
+    selectedStudio(value) {
+      this.updateRoute({ studio: value })
+      if (
+        this.selectedPerson &&
+        !this.selectablePeople.includes(this.selectedPerson)
+      ) {
+        this.$refs['people-field'].clear()
+      }
+      this.refreshSchedule()
+    },
+
     selectedPerson() {
       this.refreshSchedule()
     },
+
+    zoomLevel(value) {
+      this.updateRoute({ zoom: value })
+    },
+
     isTaskSidePanelOpen: {
       immediate: true,
       handler() {
diff --git a/src/components/pages/Timesheets.vue b/src/components/pages/Timesheets.vue
index d03acacfa..bc9191445 100644
--- a/src/components/pages/Timesheets.vue
+++ b/src/components/pages/Timesheets.vue
@@ -7,21 +7,23 @@
             class="flexrow-item title"
             :text="$t('timesheets.title')"
           />
-
           <combobox-production
             class="flexrow-item"
             :label="$t('main.production')"
             :production-list="productionList"
             v-model="productionIdString"
           />
-
+          <combobox-studio
+            class="flexrow-item field"
+            :label="$t('main.studio')"
+            v-model="studioIdString"
+          />
           <combobox
             class="flexrow-item"
             :label="$t('timesheets.detail_level')"
             :options="detailOptions"
             v-model="detailLevelString"
           />
-
           <combobox
             class="flexrow-item"
             :label="$t('timesheets.year')"
@@ -29,7 +31,6 @@
             v-model="yearString"
             v-if="detailLevelString !== 'year'"
           />
-
           <combobox
             class="flexrow-item"
             :label="$t('timesheets.month')"
@@ -37,14 +38,12 @@
             v-model="monthString"
             v-if="detailLevelString === 'day'"
           />
-
           <combobox
             class="flexrow-item"
             :label="$t('timesheets.unit')"
             :options="unitOptions"
             v-model="unit"
           />
-
           <div class="filler"></div>
           <button-simple
             class="flexrow-item"
@@ -102,21 +101,24 @@ import { monthToString, range } from '@/lib/time'
 import { sortByName } from '@/lib/sorting'
 import stringHelpers from '@/lib/string'
 
-import ButtonHrefLink from '@/components/widgets/ButtonHrefLink'
-import ButtonSimple from '@/components/widgets/ButtonSimple'
-import Combobox from '@/components/widgets/Combobox'
-import ComboboxProduction from '@/components/widgets/ComboboxProduction'
-import PeopleTimesheetList from '@/components/lists/PeopleTimesheetList'
-import PeopleTimesheetInfo from '@/components/sides/PeopleTimesheetInfo'
-import PageTitle from '@/components/widgets/PageTitle'
+import ButtonHrefLink from '@/components/widgets/ButtonHrefLink.vue'
+import ButtonSimple from '@/components/widgets/ButtonSimple.vue'
+import Combobox from '@/components/widgets/Combobox.vue'
+import ComboboxProduction from '@/components/widgets/ComboboxProduction.vue'
+import ComboboxStudio from '@/components/widgets/ComboboxStudio.vue'
+import PeopleTimesheetList from '@/components/lists/PeopleTimesheetList.vue'
+import PeopleTimesheetInfo from '@/components/sides/PeopleTimesheetInfo.vue'
+import PageTitle from '@/components/widgets/PageTitle.vue'
 
 export default {
   name: 'timesheets',
+
   components: {
     ButtonSimple,
     ButtonHrefLink,
     Combobox,
     ComboboxProduction,
+    ComboboxStudio,
     PageTitle,
     PeopleTimesheetList,
     PeopleTimesheetInfo
@@ -155,8 +157,10 @@ export default {
 
       detailLevelString: 'day',
       detailLevel: 'day',
-      productionIdString: '',
       productionId: '',
+      productionIdString: '',
+      studioId: '',
+      studioIdString: '',
       yearString: `${moment().year()}`,
       monthString: `${moment().month() + 1}`,
       unit: 'hour',
@@ -191,11 +195,15 @@ export default {
   },
 
   mounted() {
-    const productionId = this.$route.query.productionId
-    if (productionId) {
+    const productionId = this.$route.query.productionId || undefined
+    const studioId = this.$route.query.studioId || undefined
+
+    if (productionId || studioId) {
       this.silent = true
       this.productionId = productionId
       this.productionIdString = productionId
+      this.studioId = studioId
+      this.studioIdString = studioId
       this.reloadTimesheet().then(() => {
         this.silent = false
       })
@@ -288,7 +296,8 @@ export default {
         detailLevel: this.detailLevel,
         year: this.currentYear,
         month: this.currentMonth,
-        productionId: this.productionId
+        productionId: this.productionId,
+        studioId: this.studioId
       })
         .then(() => {
           this.isLoading = false
@@ -315,6 +324,7 @@ export default {
       this.$options.silent = true
       const { month, year, week, day } = this.$route.params
       const previousProduction = `${this.productionId}`
+      const previousStudio = `${this.studioId}`
       const previousDetailLevel = `${this.detailLevel}`
       const previousMonth = `${this.currentMonth}`
       const previousYear = `${this.currentYear}`
@@ -342,6 +352,7 @@ export default {
         this.currentDay = Number(day)
       }
       this.productionId = this.$route.query.productionId || ''
+      this.studioId = this.$route.query.studioId || ''
 
       const detailLevelHasChanged = previousDetailLevel !== this.detailLevel
       const monthHasChanged =
@@ -350,6 +361,8 @@ export default {
         previousYear.localeCompare(`${this.currentYear}`) !== 0
       const productionHasChanged =
         previousProduction.localeCompare(`${this.productionId}`) !== 0
+      const studioHasChanged =
+        previousStudio.localeCompare(`${this.studioId}`) !== 0
       this.$nextTick(() => {
         this.$options.silent = false
       })
@@ -366,7 +379,8 @@ export default {
         monthHasChanged ||
         yearHasChanged ||
         detailLevelHasChanged ||
-        productionHasChanged
+        productionHasChanged ||
+        studioHasChanged
       ) {
         this.reloadTimesheet()
       }
@@ -383,7 +397,8 @@ export default {
         month: this.$route.params.month,
         week: this.$route.params.week,
         day: this.$route.params.day,
-        productionId: this.productionId
+        productionId: this.productionId,
+        studioId: this.studioId
       })
         .then(tasks => {
           this.tasks = tasks.filter(task => task.duration > 0)
@@ -431,6 +446,21 @@ export default {
         moment().year(),
         moment().week()
       )
+    },
+
+    updateRoute({ productionId, studioId }) {
+      const query = { ...this.$route.query }
+
+      if (productionId !== undefined) {
+        query.productionId = productionId || undefined
+      }
+      if (studioId !== undefined) {
+        query.studioId = studioId || undefined
+      }
+
+      if (JSON.stringify(query) !== JSON.stringify(this.$route.query)) {
+        this.$router.push({ query })
+      }
     }
   },
 
@@ -519,13 +549,14 @@ export default {
       }
     },
 
-    productionIdString() {
+    productionIdString(value) {
       if (this.silent) return
-      this.$router.push({
-        query: {
-          productionId: this.productionIdString
-        }
-      })
+      this.updateRoute({ productionId: value })
+    },
+
+    studioIdString(value) {
+      if (this.silent) return
+      this.updateRoute({ studioId: value })
     },
 
     $route() {
diff --git a/src/components/sides/PeopleTimesheetInfo.vue b/src/components/sides/PeopleTimesheetInfo.vue
index 4914dbc8c..5c53ee714 100644
--- a/src/components/sides/PeopleTimesheetInfo.vue
+++ b/src/components/sides/PeopleTimesheetInfo.vue
@@ -142,30 +142,51 @@ export default {
     },
 
     closeRoute() {
-      if (this.isMonthInfo) {
+      const query = {
+        productionId: this.$route.query.productionId,
+        studioId: this.$route.query.studioId
+      }
+      if (this.isYearInfo) {
         return {
-          name: 'timesheets-month',
+          name: 'timesheets-year',
           params: {
             year: this.year
-          }
+          },
+          query
+        }
+      } else if (this.isMonthInfo) {
+        return {
+          name: 'timesheets-month',
+          params: {
+            year: this.year,
+            month: this.month
+          },
+          query
         }
       } else if (this.isWeekInfo) {
         return {
           name: 'timesheets-week',
           params: {
-            year: this.year
-          }
+            year: this.year,
+            week: this.week
+          },
+          query
         }
       } else if (this.isDayInfo) {
         return {
           name: 'timesheets-day',
           params: {
             year: this.year,
-            month: this.month
-          }
+            month: this.month,
+            day: this.day
+          },
+          query
         }
       } else {
-        return { name: 'timesheets' }
+        return {
+          name: 'timesheets',
+          query
+        }
       }
     }
   },
diff --git a/src/components/widgets/ComboboxStudio.vue b/src/components/widgets/ComboboxStudio.vue
new file mode 100644
index 000000000..3d770c9d6
--- /dev/null
+++ b/src/components/widgets/ComboboxStudio.vue
@@ -0,0 +1,234 @@
+<template>
+  <div>
+    <label class="label" v-if="label.length">
+      {{ label }}
+    </label>
+    <div
+      class="studio-combo"
+      :class="{
+        opened: showStudioList,
+        rounded
+      }"
+      :style="{ width: `${width}px` }"
+    >
+      <div class="flexrow" @click="toggleStudioList">
+        <div class="selected-studio-line flexrow-item">
+          <studio-name :studio="currentStudio" v-if="currentStudio" />
+        </div>
+        <chevron-down-icon class="down-icon flexrow-item" />
+      </div>
+      <div
+        class="select-input"
+        :style="{
+          'max-height': `${maxHeightSelectInput}px`,
+          width: `${width}px`,
+          top: rounded ? '30px' : '37px'
+        }"
+        v-if="showStudioList"
+      >
+        <div
+          class="studio-line"
+          :key="studio.id"
+          v-for="studio in studioList"
+          @click="selectStudio(studio)"
+        >
+          <studio-name :studio="studio" />
+        </div>
+      </div>
+    </div>
+    <combobox-mask :displayed="showStudioList" @click="toggleStudioList" />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { ChevronDownIcon } from 'vue-feather-icons'
+
+import ComboboxMask from '@/components/widgets/ComboboxMask.vue'
+import StudioName from '@/components/widgets/StudioName.vue'
+
+export default {
+  name: 'combobox-studio',
+
+  components: {
+    ChevronDownIcon,
+    ComboboxMask,
+    StudioName
+  },
+
+  data() {
+    return {
+      showStudioList: false
+    }
+  },
+
+  props: {
+    label: {
+      default: '',
+      type: String
+    },
+    maxHeightSelectInput: {
+      default: 200,
+      type: Number
+    },
+    rounded: {
+      default: false,
+      type: Boolean
+    },
+    selectableStudios: {
+      type: Array,
+      required: false
+    },
+    value: {
+      default: '',
+      type: String
+    },
+    width: {
+      default: 250,
+      type: Number
+    },
+    withEmptyChoice: {
+      default: true,
+      type: Boolean
+    }
+  },
+
+  computed: {
+    ...mapGetters([
+      'isCurrentUserManager',
+      'isCurrentUserSupervisor',
+      'studios',
+      'studioMap',
+      'user'
+    ]),
+
+    studioList() {
+      const studios = this.selectableStudio
+        ? [...this.selectableStudio]
+        : [...this.studios]
+
+      if (this.withEmptyChoice) {
+        return [
+          {
+            color: '#aaa',
+            id: null,
+            name: this.$t('studios.no_studio')
+          },
+          ...studios
+        ]
+      }
+      return studios
+    },
+
+    currentStudio() {
+      if (!this.value) {
+        return this.studioList[0]
+      }
+      return (
+        this.studioMap.get(this.value) ??
+        this.studioList.find(({ id }) => id === this.value)
+      )
+    }
+  },
+
+  methods: {
+    selectStudio(studio) {
+      this.$emit('input', studio.id)
+      this.showStudioList = false
+    },
+
+    toggleStudioList() {
+      this.showStudioList = !this.showStudioList
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dark {
+  .select-input,
+  .selected-studio-line,
+  .studio-line,
+  .studio-combo {
+    background: $dark-grey-light;
+    border-color: $dark-grey;
+  }
+
+  .studio-line:hover {
+    background: $dark-purple;
+  }
+}
+
+.studio-combo {
+  background: $white;
+  border: 1px solid $light-grey-light;
+  user-select: none;
+  cursor: pointer;
+  border-radius: 10px;
+  margin: 0;
+  padding: 0.15em;
+  position: relative;
+
+  &:hover {
+    border: 1px solid $green;
+  }
+}
+
+.selected-studio-line {
+  background: $white;
+  padding: 0.2em;
+  flex: 1;
+}
+
+.studio-line {
+  background: $white;
+  cursor: pointer;
+  padding: 0.2em;
+  margin: 0;
+
+  &:hover {
+    background: $purple;
+  }
+}
+
+.down-icon {
+  color: $green;
+  cursor: pointer;
+  width: 15px;
+  min-width: 15px;
+  margin-right: 0.4em;
+}
+
+.select-input {
+  background: $white;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+  position: absolute;
+  border: 1px solid $light-grey-light;
+  z-index: 300;
+  margin-left: -1px;
+  max-height: 200px;
+  overflow-y: auto;
+  left: 0;
+}
+
+.field .label {
+  padding-top: 5px;
+}
+
+.rounded {
+  border-radius: 10px;
+
+  &.opened {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .selected-studio-line {
+    padding-top: 0;
+
+    padding-bottom: 0;
+    border-radius: 50px;
+  }
+}
+</style>
diff --git a/src/components/widgets/StudioName.vue b/src/components/widgets/StudioName.vue
index 45617c0cb..ee37a32e7 100644
--- a/src/components/widgets/StudioName.vue
+++ b/src/components/widgets/StudioName.vue
@@ -1,43 +1,56 @@
 <template>
-  <div>
-    <span class="square" :style="{ backgroundColor: studio.color }"></span>
-    {{ studio.name }}
-  </div>
+  <span class="studio-name" :class="{ 'no-padding': noPadding }">
+    <span
+      class="square"
+      :style="{ backgroundColor: studio.color }"
+      :title="onlyDot ? studio.name : undefined"
+    ></span>
+    <span class="name" v-if="!onlyDot">
+      {{ studio.name }}
+    </span>
+  </span>
 </template>
 
 <script>
-import { mapGetters, mapActions } from 'vuex'
-
 export default {
   name: 'studio-name',
-  components: {},
 
   props: {
-    studioId: {
-      type: String,
-      default: null
-    }
-  },
-
-  computed: {
-    ...mapGetters(['studioMap']),
-
-    studio() {
-      return this.studioMap.get(this.studioId)
+    noPadding: {
+      type: Boolean,
+      default: false
+    },
+    onlyDot: {
+      type: Boolean,
+      default: false
+    },
+    studio: {
+      type: Object,
+      required: true
     }
-  },
-
-  methods: {
-    ...mapActions([])
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.studio-name {
+  display: inline-block;
+  color: var(--text);
+  padding: 0.2em 0.6em;
+  white-space: nowrap;
+
+  &.no-padding {
+    padding: 0;
+  }
+}
+
 .square {
   display: inline-block;
   width: 10px;
   height: 10px;
-  margin-right: 5px;
+}
+
+.name {
+  margin-left: 0.3em;
 }
 </style>
diff --git a/src/locales/en.js b/src/locales/en.js
index 4c4e74ab1..e6fbeb5a7 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -280,6 +280,7 @@ export default {
     delete_error: 'An error occurred while deleting this studio.',
     edit_title: 'Edit studio',
     new_studios: 'Add a studio',
+    no_studio: 'No studio',
     number: 'studio | studios',
     title: 'Studios',
     fields: {
diff --git a/src/store/modules/people.js b/src/store/modules/people.js
index 27363c77f..506f1e30f 100644
--- a/src/store/modules/people.js
+++ b/src/store/modules/people.js
@@ -843,7 +843,7 @@ const mutations = {
     state.organisation = { ...state.organisation, ...organisation }
   },
 
-  [RESET_ALL](state, people) {
+  [RESET_ALL](state) {
     Object.assign(state, { ...initialState })
     cache.peopleIndex = {}
     cache.personTasksIndex = {}
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index 0e541a9bb..434feec98 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -63,6 +63,7 @@ import {
   LOAD_PRODUCTION_STATUS_END,
   LOAD_BACKGROUNDS_END,
   LOAD_DEPARTMENTS_END,
+  LOAD_STUDIOS_END,
   LOAD_TASK_STATUSES_END,
   LOAD_TASK_TYPES_END,
   LOAD_PEOPLE_END,
@@ -370,6 +371,7 @@ const actions = {
       commit(LOAD_USER_FILTER_GROUPS_END, context.search_filter_groups)
       commit(LOAD_PRODUCTION_STATUS_END, context.project_status)
       commit(LOAD_DEPARTMENTS_END, context.departments)
+      commit(LOAD_STUDIOS_END, context.studios)
       commit(LOAD_BACKGROUNDS_END, context.preview_background_files)
       commit(LOAD_TASK_STATUSES_END, context.task_status)
       commit(LOAD_PEOPLE_END, {