diff --git a/api/config/type/schema.json b/api/config/type/schema.json
index 2e0edfe5..24b4f66d 100644
--- a/api/config/type/schema.json
+++ b/api/config/type/schema.json
@@ -53,6 +53,9 @@
     "publicUrl": {
       "type": "string"
     },
+    "homePage": {
+      "type": "string"
+    },
     "mongo": {
       "type": "object",
       "required": [
diff --git a/api/src/ui-config.ts b/api/src/ui-config.ts
index 6a59202f..2d9b71ab 100644
--- a/api/src/ui-config.ts
+++ b/api/src/ui-config.ts
@@ -1,9 +1,7 @@
-import config, { type ApiConfig } from './config.ts'
+import config from './config.ts'
 import { publicMessages } from '../i18n/index.ts'
 
-export type UiConfig = { publicMessages: any, readonly: boolean } & Pick<ApiConfig, 'publicUrl' | 'theme' | 'manageSites' | 'i18n' | 'tosUrl' | 'passwordless' | 'onlyCreateInvited' | 'maildev'>
-
-export const uiConfig: UiConfig = {
+export const uiConfig = {
   publicMessages,
   readonly: config.storage.type !== 'mongo',
   publicUrl: config.publicUrl,
@@ -13,6 +11,11 @@ export const uiConfig: UiConfig = {
   tosUrl: config.tosUrl,
   passwordless: config.passwordless,
   onlyCreateInvited: config.onlyCreateInvited,
-  maildev: config.maildev
+  maildev: config.maildev,
+  depAdminIsOrgAdmin: config.depAdminIsOrgAdmin,
+  anonymousContactForm: config.anonymousContactForm,
+  homePage: config.homePage,
+  alwaysAcceptInvitation: config.alwaysAcceptInvitation
 }
+export type UiConfig = typeof uiConfig
 export default uiConfig
diff --git a/api/src/utils/partners.ts b/api/src/utils/partners.ts
index 78f5d19d..41d445ae 100644
--- a/api/src/utils/partners.ts
+++ b/api/src/utils/partners.ts
@@ -1,6 +1,6 @@
-import { type Organization, type Partner } from '#types'
+import { type Organization, type Partner, type ShortenedPartnerInvitation } from '#types'
 
-export const shortenPartnerInvitation = (partner: Pick<Partner, 'name' | 'contactEmail'>, org: Organization, partnerId: string) => {
+export const shortenPartnerInvitation = (partner: Pick<Partner, 'name' | 'contactEmail'>, org: Organization, partnerId: string): ShortenedPartnerInvitation => {
   return {
     o: org.id,
     on: org.name,
@@ -10,7 +10,7 @@ export const shortenPartnerInvitation = (partner: Pick<Partner, 'name' | 'contac
   }
 }
 
-export const unshortenPartnerInvitation = (partnerPayload: ReturnType<typeof shortenPartnerInvitation>) => {
+export const unshortenPartnerInvitation = (partnerPayload: ShortenedPartnerInvitation) => {
   return {
     orgId: partnerPayload.o,
     partnerId: partnerPayload.p,
diff --git a/api/types/index.ts b/api/types/index.ts
index 75d1b2a2..22d50c9b 100644
--- a/api/types/index.ts
+++ b/api/types/index.ts
@@ -50,3 +50,11 @@ export type ActionPayload = {
   email: string,
   action: 'changePassword' | 'changeHost'
 }
+
+export type ShortenedPartnerInvitation = {
+  o: string,
+  on: string,
+  p: string,
+  n: string,
+  e: string
+}
diff --git a/package-lock.json b/package-lock.json
index 60eb4e75..a1814101 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -841,9 +841,9 @@
       "license": "MIT"
     },
     "node_modules/@data-fair/lib-vue": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/@data-fair/lib-vue/-/lib-vue-1.9.1.tgz",
-      "integrity": "sha512-MWrU+7wlVfrjtLewvXWY/6pjMANwAGgtGpxDe/FW3N0T1PpPE7cgHg5Ke0XbnCHE7HSYOYMUCnwRherL6/dPog==",
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@data-fair/lib-vue/-/lib-vue-1.9.2.tgz",
+      "integrity": "sha512-LBBgBa0JK/Upvh7UotXoR34HHY1iLwFtvwXQVy3yFl9Bje32jQfXKezyuD0Qezj9jFG+bAaG4gYWK3a7EWDEpA==",
       "license": "MIT",
       "dependencies": {
         "@data-fair/lib-common-types": "^1.1.0",
@@ -12104,7 +12104,7 @@
     "ui": {
       "version": "0.0.0",
       "dependencies": {
-        "@data-fair/lib-vue": "^1.9.1",
+        "@data-fair/lib-vue": "^1.9.2",
         "@data-fair/lib-vuetify": "^1.4.1",
         "@intlify/unplugin-vue-i18n": "^5.2.0",
         "@koumoul/v-iframe": "^2.4.4",
diff --git a/ui/dts/auto-imports.d.ts b/ui/dts/auto-imports.d.ts
index a1742c9a..deb7a2cf 100644
--- a/ui/dts/auto-imports.d.ts
+++ b/ui/dts/auto-imports.d.ts
@@ -13,10 +13,12 @@ declare global {
   const $siteUrl: typeof import('~/context')['$siteUrl']
   const $uiConfig: typeof import('~/context')['$uiConfig']
   const EffectScope: typeof import('vue')['EffectScope']
+  const Organization: typeof import('#api/types')['Organization']
   const addDepartmentMenu: typeof import('../src/components/add-department-menu.vue')['default']
   const addMemberMenu: typeof import('../src/components/add-member-menu.vue')['default']
   const addOrganizationMenu: typeof import('../src/components/add-organization-menu.vue')['default']
   const addPartnerMenu: typeof import('../src/components/add-partner-menu.vue')['default']
+  const authProvidersFetch: typeof import('../src/composables/use-store')['authProvidersFetch']
   const authProvidersLoginLinks: typeof import('../src/components/auth-providers-login-links.vue')['default']
   const cancelDeletion: typeof import('../src/components/cancel-deletion.vue')['default']
   const changeHost: typeof import('../src/components/change-host.vue')['default']
@@ -41,6 +43,7 @@ declare global {
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
   const h: typeof import('vue')['h']
+  const host: typeof import('../src/composables/use-store')['host']
   const inject: typeof import('vue')['inject']
   const injectHead: typeof import('@unhead/vue')['injectHead']
   const isProxy: typeof import('vue')['isProxy']
@@ -48,12 +51,15 @@ declare global {
   const isReadonly: typeof import('vue')['isReadonly']
   const isRef: typeof import('vue')['isRef']
   const loadAvatar: typeof import('../src/components/load-avatar.vue')['default']
+  const mainPublicUrl: typeof import('../src/composables/use-store')['mainPublicUrl']
+  const mainRedirect: typeof import('../src/composables/use-store')['mainRedirect']
   const markRaw: typeof import('vue')['markRaw']
   const mdiAlertCircle: typeof import('@mdi/js')['mdiAlertCircle']
   const mdiBell: typeof import('@mdi/js')['mdiBell']
   const mdiCalendarRange: typeof import('@mdi/js')['mdiCalendarRange']
   const mdiCancel: typeof import('@mdi/js')['mdiCancel']
   const mdiCellphone: typeof import('@mdi/js')['mdiCellphone']
+  const mdiCheck: typeof import('@mdi/js')['mdiCheck']
   const mdiCheckCircle: typeof import('@mdi/js')['mdiCheckCircle']
   const mdiDatabase: typeof import('@mdi/js')['mdiDatabase']
   const mdiDelete: typeof import('@mdi/js')['mdiDelete']
@@ -61,6 +67,7 @@ declare global {
   const mdiDotsVertical: typeof import('@mdi/js')['mdiDotsVertical']
   const mdiEmail: typeof import('@mdi/js')['mdiEmail']
   const mdiImageSizeSelectSmall: typeof import('@mdi/js')['mdiImageSizeSelectSmall']
+  const mdiPlus: typeof import('@mdi/js')['mdiPlus']
   const mdiRefresh: typeof import('@mdi/js')['mdiRefresh']
   const mdiRss: typeof import('@mdi/js')['mdiRss']
   const mdiSend: typeof import('@mdi/js')['mdiSend']
@@ -89,9 +96,14 @@ declare global {
   const organizationStorage: typeof import('../src/components/organization-storage.vue')['default']
   const parseSender: typeof import('../src/utils/sender-utils')['parseSender']
   const partnerInvitation: typeof import('../src/components/partner-invitation.vue')['default']
+  const patchOrganization: typeof import('../src/composables/use-store')['patchOrganization']
+  const patchSite: typeof import('../src/composables/use-store')['patchSite']
+  const postSite: typeof import('../src/composables/use-store')['postSite']
   const provide: typeof import('vue')['provide']
   const reactive: typeof import('vue')['reactive']
   const readonly: typeof import('vue')['readonly']
+  const redirect: typeof import('../src/composables/use-store')['redirect']
+  const redirects: typeof import('../src/composables/use-store')['redirects']
   const ref: typeof import('vue')['ref']
   const resendInvitation: typeof import('../src/components/resend-invitation.vue')['default']
   const resendPartnerInvitation: typeof import('../src/components/resend-partner-invitation.vue')['default']
@@ -103,6 +115,8 @@ declare global {
   const shallowRef: typeof import('vue')['shallowRef']
   const sitePatch: typeof import('../src/components/site-patch.vue')['default']
   const sitePost: typeof import('../src/components/site-post.vue')['default']
+  const sitePublic: typeof import('../src/composables/use-store')['sitePublic']
+  const sitesFetch: typeof import('../src/composables/use-store')['sitesFetch']
   const subscribeWebhook: typeof import('../src/components/subscribe-webhook.vue')['default']
   const toRaw: typeof import('vue')['toRaw']
   const toRef: typeof import('vue')['toRef']
@@ -135,12 +149,14 @@ declare global {
   const useSession: typeof import('@data-fair/lib-vue/session.js')['useSession']
   const useSessionAuthenticated: typeof import('@data-fair/lib-vue/session.js')['useSessionAuthenticated']
   const useSlots: typeof import('vue')['useSlots']
+  const useStore: typeof import('../src/composables/use-store')['default']
   const useStringSearchParam: typeof import('@data-fair/lib-vue/reactive-search-params.js')['useStringSearchParam']
   const useStringsArraySearchParam: typeof import('@data-fair/lib-vue/reactive-search-params.js')['useStringsArraySearchParam']
   const useSubscriptions: typeof import('../src/composables/use-subscriptions')['default']
   const useTemplateRef: typeof import('vue')['useTemplateRef']
   const useUiNotif: typeof import('@data-fair/lib-vue/ui-notif.js')['useUiNotif']
   const useWS: typeof import('@data-fair/lib-vue/ws.js')['useWS']
+  const userDetailsFetch: typeof import('../src/composables/use-store')['userDetailsFetch']
   const vJsf: typeof import('../src/components/v-jsf.vue')['default']
   const watch: typeof import('vue')['watch']
   const watchEffect: typeof import('vue')['watchEffect']
@@ -153,6 +169,9 @@ declare global {
   // @ts-ignore
   export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
+  // @ts-ignore
+  export type { Organization } from '#api/types'
+  import('#api/types')
 }
 // for vue template auto import
 import { UnwrapRef } from 'vue'
@@ -190,11 +209,13 @@ declare module 'vue' {
     readonly mdiBell: UnwrapRef<typeof import('@mdi/js')['mdiBell']>
     readonly mdiCancel: UnwrapRef<typeof import('@mdi/js')['mdiCancel']>
     readonly mdiCellphone: UnwrapRef<typeof import('@mdi/js')['mdiCellphone']>
+    readonly mdiCheck: UnwrapRef<typeof import('@mdi/js')['mdiCheck']>
     readonly mdiCheckCircle: UnwrapRef<typeof import('@mdi/js')['mdiCheckCircle']>
     readonly mdiDelete: UnwrapRef<typeof import('@mdi/js')['mdiDelete']>
     readonly mdiDevices: UnwrapRef<typeof import('@mdi/js')['mdiDevices']>
     readonly mdiDotsVertical: UnwrapRef<typeof import('@mdi/js')['mdiDotsVertical']>
     readonly mdiEmail: UnwrapRef<typeof import('@mdi/js')['mdiEmail']>
+    readonly mdiPlus: UnwrapRef<typeof import('@mdi/js')['mdiPlus']>
     readonly mdiRefresh: UnwrapRef<typeof import('@mdi/js')['mdiRefresh']>
     readonly mdiRss: UnwrapRef<typeof import('@mdi/js')['mdiRss']>
     readonly mdiSend: UnwrapRef<typeof import('@mdi/js')['mdiSend']>
@@ -254,6 +275,7 @@ declare module 'vue' {
     readonly useSession: UnwrapRef<typeof import('@data-fair/lib-vue/session.js')['useSession']>
     readonly useSessionAuthenticated: UnwrapRef<typeof import('@data-fair/lib-vue/session.js')['useSessionAuthenticated']>
     readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
+    readonly useStore: UnwrapRef<typeof import('../src/composables/use-store')['default']>
     readonly useStringSearchParam: UnwrapRef<typeof import('@data-fair/lib-vue/reactive-search-params.js')['useStringSearchParam']>
     readonly useStringsArraySearchParam: UnwrapRef<typeof import('@data-fair/lib-vue/reactive-search-params.js')['useStringsArraySearchParam']>
     readonly useTemplateRef: UnwrapRef<typeof import('vue')['useTemplateRef']>
diff --git a/ui/package.json b/ui/package.json
index 2615bd8a..28a75ada 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -12,7 +12,7 @@
     "lint-fix": "eslint --fix ."
   },
   "dependencies": {
-    "@data-fair/lib-vue": "^1.9.1",
+    "@data-fair/lib-vue": "^1.9.2",
     "@data-fair/lib-vuetify": "^1.4.1",
     "@intlify/unplugin-vue-i18n": "^5.2.0",
     "@koumoul/v-iframe": "^2.4.4",
diff --git a/ui/src/components/add-department-menu.vue b/ui/src/components/add-department-menu.vue
index 31ede6ff..cae15a67 100644
--- a/ui/src/components/add-department-menu.vue
+++ b/ui/src/components/add-department-menu.vue
@@ -2,19 +2,16 @@
   <v-menu
     v-model="menu"
     :close-on-content-click="false"
-    offset-y
   >
     <template #activator="{props}">
-      <v-btn
+      <v-fab
         :title="$t('pages.organization.addDepartment', {departmentLabel: departmentLabel.toLowerCase()})"
-        fab
         size="small"
         color="primary"
         class="mx-2"
+        :icon="mdiPlus"
         v-bind="props"
-      >
-        <v-icon>mdi-plus</v-icon>
-      </v-btn>
+      />
     </template>
 
     <v-card
@@ -62,32 +59,39 @@
   </v-menu>
 </template>
 
-<script>
+<script setup lang="ts">
+import type { VForm } from 'vuetify/components'
+import { Organization } from '#api/types'
 
-import { mapActions } from 'vuex'
+const i18n = useI18n()
+const { patchOrganization } = useStore()
 
-export default {
-  props: ['orga', 'departmentLabel'],
-  data: () => ({ menu: false, editDepartment: null }),
-  watch: {
-    menu () {
-      if (!this.menu) return
-      this.editDepartment = { id: '', name: '' }
-      if (this.$refs.createForm) this.$refs.createForm.reset()
-    }
-  },
-  methods: {
-    ...mapActions(['patchOrganization']),
-    async confirmCreate () {
-      if (this.$refs.createForm.validate()) {
-        this.menu = false
-        const departments = this.orga.departments.concat([this.editDepartment])
-        await this.patchOrganization({ id: this.orga.id, patch: { departments }, msg: this.$t('common.modificationOk') })
-        this.$emit('change')
-      }
-    }
+const { orga, departmentLabel } = defineProps({
+  orga: { type: Object as () => Organization, required: true },
+  departmentLabel: { type: String, required: true }
+})
+const emit = defineEmits(['change'])
+
+const menu = ref(false)
+const createForm = ref<InstanceType<typeof VForm>>()
+const emptyDepartment = { id: '', name: '' }
+const editDepartment = ref({ ...emptyDepartment })
+
+watch(menu, () => {
+  if (!menu.value) return
+  editDepartmentMenu.value = { ...emptyDepartment }
+  createForm.value?.reset()
+})
+
+const confirmCreate = async () => {
+  if (await createForm.value?.validate()) {
+    menu.value = false
+    const departments = (orga.departments ?? []).concat([editDepartment.value])
+    await patchOrganization(orga.id, { departments }, i18n.t('common.modificationOk'))
+    emit('change')
   }
 }
+
 </script>
 
 <style lang="css" scoped>
diff --git a/ui/src/components/add-member-menu.vue b/ui/src/components/add-member-menu.vue
index fd677a25..ad208a6d 100644
--- a/ui/src/components/add-member-menu.vue
+++ b/ui/src/components/add-member-menu.vue
@@ -3,19 +3,16 @@
     v-if="isAdminOrga && members && members.results"
     v-model="menu"
     :close-on-content-click="false"
-    offset-y
   >
     <template #activator="{props}">
-      <v-btn
+      <v-fab
         :title="$t('pages.organization.addMember')"
-        fab
         size="small"
         color="primary"
         class="mx-2"
+        :icon="mdiPlus"
         v-bind="props"
-      >
-        <v-icon>mdi-plus</v-icon>
-      </v-btn>
+      />
     </template>
     <v-card
       v-if="orga && menu"
@@ -120,73 +117,75 @@
   </v-menu>
 </template>
 
-<script>
-import { mapState, mapGetters } from 'vuex'
-import eventBus from '../event-bus'
+<script setup lang="ts">
+import type { VForm } from 'vuetify/components'
+import type { Organization, Member, Invitation } from '#api/types'
 
-export default {
-  props: ['orga', 'isAdminOrga', 'members', 'disableInvite', 'department'],
-  data: () => ({
-    menu: false,
-    invitation: null,
-    validInvitation: true,
-    link: null
-  }),
-  computed: {
-    ...mapState(['env']),
-    ...mapGetters(['redirects', 'host', 'mainHost']),
-    defaultRedirect () {
-      if (this.host === this.mainHost) {
-        return this.redirects && this.redirects[0]
-      } else {
-        return (this.redirects && this.redirects.find(r => r.value && new URL(r.value).host === this.host))
-      }
-    }
-  },
-  watch: {
-    async menu () {
-      if (!this.menu) {
-        this.invitation = null
-        return
-      }
-      if (this.$uiConfig.manageSites) await this.$store.dispatch('fetchSites')
-      this.invitation = {
-        id: this.orga.id,
-        name: this.orga.name,
-        email: '',
-        role: null,
-        department: this.department,
-        redirect: this.defaultRedirect && this.defaultRedirect.value
-      }
-      this.link = null
-      if (this.$refs.inviteForm) this.$refs.inviteForm.reset()
+const { host, mainPublicUrl, redirects, sitesFetch } = useStore()
+const { sendUiNotif } = useUiNotif()
+const i18n = useI18n()
+
+const { orga, department } = defineProps({
+  orga: { type: Object as () => Organization, required: true },
+  isAdminOrga: { type: Boolean, default: false },
+  members: { type: Array as () => (null | ({ results: Member[] })), default: null },
+  disableInvite: { type: Boolean, default: false },
+  department: { type: String, default: null }
+})
+const emit = defineEmits({
+  sent: (_invit: Invitation) => true
+})
+
+const defaultRedirect = computed(() => {
+  if (host === mainPublicUrl.host) {
+    return redirects.value?.[0]
+  } else {
+    return redirects.value?.find(r => r.value && new URL(r.value).host === host)
+  }
+})
+
+const inviteForm = ref<InstanceType<typeof VForm>>()
+const newInvitation = {
+  id: orga.id,
+  name: orga.name,
+  email: '',
+  role: null,
+  department,
+  redirect: defaultRedirect.value
+}
+const invitation = ref({ ...newInvitation })
+const validInvitation = ref(false)
+const link = ref('')
+
+const menu = ref(false)
+watch(menu, async () => {
+  if (!menu) return
+  invitation.value = { ...newInvitation }
+  link.value = ''
+  if ($uiConfig.manageSites) await sitesFetch.refresh()
+  inviteForm.value?.reset()
+})
+
+const confirmInvitation = withUiNotif(async () => {
+  if (link.value) {
+    menu.value = false
+    return
+  }
+  if (inviteForm.value?.validate()) {
+    const validInvitation = invitation.value as unknown as Invitation
+    const res = await $fetch('api/invitations/', { body: validInvitation, method: 'POST' })
+    if (res && res.link) {
+      link.value = res.link
+    } else {
+      menu.value = false
     }
-  },
-  methods: {
-    async confirmInvitation () {
-      if (this.link) {
-        this.menu = false
-        return
-      }
-      if (this.$refs.inviteForm.validate()) {
-        try {
-          const res = await this.$axios.$post('api/invitations/', this.invitation)
-          if (res && res.link) {
-            this.link = res.link
-          } else {
-            this.menu = false
-          }
-          this.$emit('sent', this.invitation)
-          if (!this.$uiConfig.alwaysAcceptInvitation) {
-            eventBus.$emit('notification', this.$t('pages.organization.inviteSuccess', { email: this.invitation.email }))
-          }
-        } catch (error) {
-          eventBus.$emit('notification', { error })
-        }
-      }
+    emit('sent', validInvitation)
+    if (!$uiConfig.alwaysAcceptInvitation) {
+      sendUiNotif({ type: 'success', msg: i18n.t('pages.organization.inviteSuccess', { email: validInvitation.email }) })
     }
   }
-}
+})
+
 </script>
 
 <style lang="css" scoped>
diff --git a/ui/src/components/add-organization-menu.vue b/ui/src/components/add-organization-menu.vue
index 1dca92ea..7d34a05f 100644
--- a/ui/src/components/add-organization-menu.vue
+++ b/ui/src/components/add-organization-menu.vue
@@ -65,35 +65,32 @@
   </v-menu>
 </template>
 
-<script>
+<script setup lang="ts">
+import type { VForm } from 'vuetify/components'
 
-import { mapActions } from 'vuex'
+const { switchOrganization } = useSession()
 
-export default {
-  props: [],
-  data: () => ({ menu: false, editOrganization: null }),
-  watch: {
-    menu () {
-      if (!this.menu) return
-      this.editOrganization = { name: '', description: '' }
-      if (this.$refs.createForm) this.$refs.createForm.reset()
-    }
-  },
-  methods: {
-    ...mapActions(['fetchUserDetails']),
-    ...mapActions('session', ['switchOrganization', 'keepalive']),
-    async confirmCreate () {
-      if (this.$refs.createForm.validate()) {
-        this.menu = false
-        const res = await this.$axios.$post('api/organizations', this.editOrganization, { params: { autoAdmin: true } })
-        await this.keepalive()
-        this.switchOrganization(res.id)
-        // reloading top page, so that limits are re-fetched, etc.
-        window.top.location.reload()
-      }
-    }
+const menu = ref(false)
+const newOrganization = { name: '', description: '' }
+
+const createForm = ref<InstanceType<typeof VForm>>()
+const editOrganization = ref({ ...newOrganization })
+
+watch(menu, () => {
+  if (!menu.value) return
+  editOrganization.value = { ...newOrganization }
+  createForm.value?.reset()
+})
+
+const confirmCreate = withUiNotif(async () => {
+  if (await createForm.value?.validate()) {
+    menu.value = false
+    const res = await $fetch('api/organizations', { method: 'POST', body: editOrganization.value, params: { autoAdmin: true } })
+    switchOrganization(res.id)
+    // reloading top page, so that limits are re-fetched, etc.
+    window.top?.location.reload()
   }
-}
+})
 </script>
 
 <style lang="css" scoped>
diff --git a/ui/src/components/add-partner-menu.vue b/ui/src/components/add-partner-menu.vue
index 42bc0b2e..9bad8f9b 100644
--- a/ui/src/components/add-partner-menu.vue
+++ b/ui/src/components/add-partner-menu.vue
@@ -2,19 +2,16 @@
   <v-menu
     v-model="menu"
     :close-on-content-click="false"
-    offset-y
   >
     <template #activator="{props}">
-      <v-btn
+      <v-fab
         :title="$t('pages.organization.addPartner')"
-        fab
         size="small"
         color="primary"
         class="mx-2"
+        :icon="mdiPlus"
         v-bind="props"
-      >
-        <v-icon>mdi-plus</v-icon>
-      </v-btn>
+      />
     </template>
 
     <v-card
@@ -83,47 +80,45 @@
   </v-menu>
 </template>
 
-<script>
-import { mapState, mapGetters } from 'vuex'
-import eventBus from '../event-bus'
+<script setup lang="ts">
+import type { VForm } from 'vuetify/components'
 
-export default {
-  props: ['orga'],
-  data: () => ({ menu: false, editPartner: null, redirect: null }),
-  computed: {
-    ...mapState(['env', 'sites']),
-    ...mapGetters(['redirects'])
-  },
-  watch: {
-    menu () {
-      if (!this.menu) return
-      if (this.$uiConfig.manageSites) this.$store.dispatch('fetchSites')
-      this.editPartner = { name: '', contactEmail: '', redirect: this.redirect }
-      if (this.$refs.createForm) this.$refs.createForm.reset()
-    },
-    redirects: {
-      immediate: true,
-      handler () {
-        this.redirect = this.$route.query.redirect || (this.redirects && this.redirects[0] && this.redirects[0].value) || ''
-        if (this.editPartner) this.editPartner.redirect = this.redirect
-      }
-    }
-  },
-  methods: {
-    async confirmCreate () {
-      if (this.$refs.createForm.validate()) {
-        try {
-          this.menu = false
-          await this.$axios.$post(`api/organizations/${this.orga.id}/partners`, this.editPartner)
-          eventBus.$emit('notification', this.$t('pages.organization.invitePartnerSuccess', { email: this.editPartner.contactEmail }))
-          this.$emit('change')
-        } catch (error) {
-          eventBus.$emit('notification', { error })
-        }
-      }
-    }
+const { redirects, sitesFetch } = useStore()
+const reactiveSearchParams = useReactiveSearchParams()
+const { sendUiNotif } = useUiNotif()
+const { t } = useI18n()
+
+const { orga } = defineProps({
+  orga: { type: Object as () => Organization, required: true }
+})
+const emit = defineEmits(['change'])
+
+const menu = ref(false)
+const redirect = ref('')
+const createForm = ref<InstanceType<typeof VForm>>()
+const newPartner = () => ({ name: '', contactEmail: '', redirect: redirect.value })
+const editPartner = ref(newPartner())
+
+watch(menu, () => {
+  if (!menu.value) return
+  if ($uiConfig.manageSites) sitesFetch.refresh()
+  editPartner.value = newPartner()
+  createForm.value?.reset()
+})
+
+watch(redirects, () => {
+  redirect.value = reactiveSearchParams.redirect || (redirects.value?.[0]?.value) || ''
+  editPartner.value.redirect = redirect.value
+}, { immediate: true })
+
+const confirmCreate = withUiNotif(async () => {
+  if (await createForm.value?.validate()) {
+    menu.value = false
+    await $fetch(`api/organizations/${orga.id}/partners`, { method: 'POST', body: editPartner })
+    sendUiNotif({ type: 'success', msg: t('pages.organization.invitePartnerSuccess', { email: editPartner.value.contactEmail }) })
+    emit('change')
   }
-}
+})
 </script>
 
 <style lang="css" scoped>
diff --git a/ui/src/components/auth-providers-login-links.vue b/ui/src/components/auth-providers-login-links.vue
index 52199efc..aa8bccd3 100644
--- a/ui/src/components/auth-providers-login-links.vue
+++ b/ui/src/components/auth-providers-login-links.vue
@@ -63,7 +63,8 @@
 
 <script lang="ts" setup>
 import { PublicAuthProvider } from '#api/types'
-import { authProvidersFetch, sitePublic, mainPublicUrl } from '~/store/index.js'
+
+const { authProvidersFetch, sitePublic, mainPublicUrl } = useStore()
 
 const { redirect, email, invitToken, adminMode } = defineProps({
   redirect: { type: String, required: true },
diff --git a/ui/src/components/cancel-deletion.vue b/ui/src/components/cancel-deletion.vue
index 802a1278..b031a7fb 100644
--- a/ui/src/components/cancel-deletion.vue
+++ b/ui/src/components/cancel-deletion.vue
@@ -1,11 +1,11 @@
 <template>
-  <div v-if="userDetails">
+  <div v-if="userDetailsFetch.data.value?.plannedDeletion">
     <v-alert
       :value="true"
       type="warning"
       variant="outlined"
     >
-      {{ $t('errors.plannedDeletion', {name: userDetails.name, plannedDeletion: $d(new Date(userDetails.plannedDeletion))}) }}
+      {{ $t('errors.plannedDeletion', {name: userDetailsFetch.data.value.name, plannedDeletion: $d(new Date(userDetailsFetch.data.value.plannedDeletion))}) }}
     </v-alert>
 
     <v-btn
@@ -18,19 +18,18 @@
   </div>
 </template>
 
-<script>
-import { mapState } from 'vuex'
-export default {
-  computed: {
-    ...mapState(['userDetails'])
-  },
-  methods: {
-    async cancelDeletion () {
-      await this.$axios.$delete('api/users/' + this.userDetails.id + '/plannedDeletion')
-      this.$emit('cancelled')
-    }
-  }
-}
+<script setup lang="ts">
+const emit = defineEmits(['cancelled'])
+
+const { userDetailsFetch } = useStore()
+
+if (!userDetailsFetch.initialized.value) userDetailsFetch.refresh()
+const cancelDeletion = withUiNotif(async () => {
+  if (!userDetailsFetch.data.value) return
+  await $fetch('api/users/' + userDetailsFetch.data.value.id + '/plannedDeletion')
+  emit('cancelled')
+})
+
 </script>
 
 <style>
diff --git a/ui/src/components/change-host.vue b/ui/src/components/change-host.vue
index 89e0dd0a..4e29909e 100644
--- a/ui/src/components/change-host.vue
+++ b/ui/src/components/change-host.vue
@@ -4,23 +4,23 @@
       color="warning"
       variant="outlined"
     >
-      Le compte {{ user.email }} n'existe pas sur {{ host }} mais il existe sur {{ mainHost }}.
+      Le compte {{ user.email }} n'existe pas sur {{ host }} mais il existe sur {{ mainPublicUrl.host }}.
     </v-alert>
-    <template v-if="sitePublic.authMode === 'ssoBackOffice'">
+    <template v-if="sitePublic?.authMode === 'ssoBackOffice'">
       <h3 class="subheader mb-2">
-        Solution : utiliser {{ mainHost }} pour se connecter
+        Solution : utiliser {{ mainPublicUrl.host }} pour se connecter
       </h3>
-      <p>La page de login propose un bouton pour se connecter depuis {{ mainHost }} que vous pouvez utiliser. Vous pouvez aussi utiliser <a :href="mainHostLogin">ce lien.</a>.</p>
+      <p>La page de login propose un bouton pour se connecter depuis {{ mainPublicUrl.host }} que vous pouvez utiliser. Vous pouvez aussi utiliser <a :href="mainHostLogin">ce lien.</a>.</p>
     </template>
     <h3 class="subheader mb-2">
       Solution : déplacer le compte vers {{ host }}
     </h3>
-    <p>Si vous choisissez cette solution vous perdrez la possibilité de vous connecter à {{ mainHost }}.</p>
+    <p>Si vous choisissez cette solution vous perdrez la possibilité de vous connecter à {{ mainPublicUrl.host }}.</p>
     <p>
       <v-checkbox
         v-model="confirmMigration"
         color="warning"
-        :label="`déplacer le compte vers ${ host } et perdre l'accès à ${ mainHost }`"
+        :label="`déplacer le compte vers ${ host } et perdre l'accès à ${ mainPublicUrl.host }`"
       />
     </p>
     <v-card-actions>
@@ -37,43 +37,44 @@
   </div>
 </template>
 
-<script>
-import { mapGetters, mapState } from 'vuex'
-
-export default {
-  props: ['user', 'actionToken'],
-  data () {
-    return {
-      confirmMigration: false
-    }
-  },
-  computed: {
-    ...mapState(['sitePublic']),
-    ...mapGetters(['host', 'mainHost']),
-    mainHostLogin () {
-      const url = new URL(`${this.mainHost.startsWith('localhost:') ? 'http' : 'https'}://${this.mainHost}/simple-directory/login`)
-      url.searchParams.append('redirect', `${this.host.startsWith('localhost:') ? 'http' : 'https'}://${this.host}`)
-      return url.href
-    }
+<script setup lang="ts">
+const { user, actionToken } = defineProps({
+  user: {
+    type: Object as () => ({ id: string, email: string }),
+    required: true
   },
-  methods: {
-    async confirmChangeHost () {
-      const changePasswordToken = await this.$axios.$post(
-        'api/users/' + this.user.id + '/host',
-        { host: this.host },
-        { params: { action_token: this.actionToken } }
-      )
-      console.log('changePasswordToken', changePasswordToken)
-      if (changePasswordToken) {
-        this.$emit('goTo', 'changePassword')
-        this.$router.replace({ query: { ...this.$route.query, action_token: changePasswordToken } })
-      } else {
-        this.$emit('goTo', 'login')
-        this.$router.replace({ query: { ...this.$route.query, action_token: undefined } })
-      }
-    }
+  actionToken: {
+    type: String,
+    required: true
+  }
+})
+const emit = defineEmits<{ goTo: [url: string] }>()
+const reactiveSearchParams = useReactiveSearchParams()
+
+const { sitePublic, host, mainPublicUrl } = useStore()
+
+const confirmMigration = ref(false)
+
+const mainHostLogin = computed(() => {
+  const url = new URL(`${mainPublicUrl.host.startsWith('localhost:') ? 'http' : 'https'}://${mainPublicUrl.host}/simple-directory/login`)
+  url.searchParams.append('redirect', `${host.startsWith('localhost:') ? 'http' : 'https'}://${host}`)
+  return url.href
+})
+
+const confirmChangeHost = withUiNotif(async () => {
+  const changeHostToken = await $fetch(
+    'api/users/' + user.id + '/host',
+    { method: 'POST', body: { host }, params: { action_token: actionToken } }
+  )
+  console.log('changePasswordToken', changeHostToken)
+  if (changeHostToken) {
+    emit('goTo', 'changePassword')
+    reactiveSearchParams.action_token = changeHostToken
+  } else {
+    emit('goTo', 'login')
+    delete reactiveSearchParams.action_token
   }
-}
+})
 </script>
 
 <style>
diff --git a/ui/src/components/confirm-menu.vue b/ui/src/components/confirm-menu.vue
index 714baf61..cc89b92b 100644
--- a/ui/src/components/confirm-menu.vue
+++ b/ui/src/components/confirm-menu.vue
@@ -3,7 +3,7 @@
     v-model="menu"
     :close-on-content-click="false"
     max-width="600"
-    offset-y
+    
     location="top"
   >
     <template #activator="{ props }">
@@ -74,7 +74,7 @@
   </v-menu>
 </template>
 
-<script>
+<script setup lang="ts">
 export default {
   props: {
     title: {
diff --git a/ui/src/components/delete-department-menu.vue b/ui/src/components/delete-department-menu.vue
index d26fe4ac..d86648d5 100644
--- a/ui/src/components/delete-department-menu.vue
+++ b/ui/src/components/delete-department-menu.vue
@@ -2,7 +2,7 @@
   <v-menu
     v-model="menu"
     :close-on-content-click="false"
-    offset-y
+    
   >
     <template #activator="{props}">
       <v-btn
@@ -61,7 +61,7 @@
   </v-menu>
 </template>
 
-<script>
+<script setup lang="ts">
 import { mapActions } from 'vuex'
 
 export default {
diff --git a/ui/src/components/delete-member-menu.vue b/ui/src/components/delete-member-menu.vue
index 8541a2a2..f198b4bb 100644
--- a/ui/src/components/delete-member-menu.vue
+++ b/ui/src/components/delete-member-menu.vue
@@ -2,7 +2,7 @@
   <v-menu
     v-model="menu"
     :close-on-content-click="false"
-    offset-y
+    
   >
     <template #activator="{props}">
       <v-btn
@@ -56,7 +56,7 @@
   </v-menu>
 </template>
 
-<script>
+<script setup lang="ts">
 export default {
   props: ['member', 'orga'],
   data: () => ({ menu: false })
diff --git a/ui/src/components/delete-partner-menu.vue b/ui/src/components/delete-partner-menu.vue
index c1b2abf9..e1235764 100644
--- a/ui/src/components/delete-partner-menu.vue
+++ b/ui/src/components/delete-partner-menu.vue
@@ -2,7 +2,7 @@
   <v-menu
     v-model="menu"
     :close-on-content-click="false"
-    offset-y
+    
   >
     <template #activator="{props}">
       <v-btn
@@ -50,7 +50,7 @@
   </v-menu>
 </template>
 
-<script>
+<script setup lang="ts">
 export default {
   props: ['orga', 'partner'],
   data: () => ({ menu: false, members: null }),
diff --git a/ui/src/components/edit-department-menu.vue b/ui/src/components/edit-department-menu.vue
index 01a8ed79..7a31c4af 100644
--- a/ui/src/components/edit-department-menu.vue
+++ b/ui/src/components/edit-department-menu.vue
@@ -2,7 +2,7 @@
   <v-menu
     v-model="menu"
     :close-on-content-click="false"
-    offset-y
+    
   >
     <template #activator="{props}">
       <v-btn
@@ -59,7 +59,7 @@
   </v-menu>
 </template>
 
-<script>
+<script setup lang="ts">
 import { mapActions, mapState } from 'vuex'
 
 export default {
diff --git a/ui/src/components/edit-departments-menu.vue b/ui/src/components/edit-departments-menu.vue
index a7004e8d..23deb982 100644
--- a/ui/src/components/edit-departments-menu.vue
+++ b/ui/src/components/edit-departments-menu.vue
@@ -3,19 +3,16 @@
     v-if="isAdminOrga"
     v-model="menu"
     :close-on-content-click="false"
-    offset-y
   >
     <template #activator="{props}">
-      <v-btn
+      <v-fab
         :title="$t('pages.organization.addDepartment', {departmentLabel: departmentLabel.toLowerCase()})"
-        fab
         size="small"
         color="primary"
         class="mx-2"
+        :icon="mdiPencil"
         v-bind="props"
-      >
-        <v-icon>mdi-pencil</v-icon>
-      </v-btn>
+      />
     </template>
 
     <v-card
@@ -70,7 +67,7 @@
   </v-menu>
 </template>
 
-<script>
+<script setup lang="ts">
 
 import { mapActions } from 'vuex'
 
diff --git a/ui/src/components/edit-member-menu.vue b/ui/src/components/edit-member-menu.vue
index b244233d..6da6dc7a 100644
--- a/ui/src/components/edit-member-menu.vue
+++ b/ui/src/components/edit-member-menu.vue
@@ -2,7 +2,7 @@
   <v-menu
     v-model="menu"
     :close-on-content-click="false"
-    offset-y
+    
   >
     <template #activator="{props}">
       <v-btn
@@ -75,7 +75,7 @@
   </v-menu>
 </template>
 
-<script>
+<script setup lang="ts">
 import { mapState } from 'vuex'
 
 export default {
diff --git a/ui/src/components/load-avatar.vue b/ui/src/components/load-avatar.vue
index fbbba031..8fcc2346 100644
--- a/ui/src/components/load-avatar.vue
+++ b/ui/src/components/load-avatar.vue
@@ -24,7 +24,6 @@
       <v-file-input
         v-if="!disabled"
         v-model="file"
-        type="file"
         class="pt-2"
         accept="image/png, image/jpeg"
         :placeholder="$t('pages.avatar.load')"
@@ -33,20 +32,16 @@
         prepend-icon=""
         @change="change"
       >
-        <template #append-outer>
-          <v-btn
+        <template #append>
+          <v-fab
             v-if="file && !hideValidate"
-            fab
             size="x-small"
             color="primary"
             :title="$t('common.validate')"
             style="position: relative; top: -4px;"
+            :icon="mdiCheck"
             @click="validate"
-          >
-            <v-icon>
-              mdi-check
-            </v-icon>
-          </v-btn>
+          />
         </template>
       </v-file-input>
     </v-row>
@@ -59,7 +54,7 @@
   </v-input>
 </template>
 
-<script>
+<script setup lang="ts">
 import { mapState } from 'vuex'
 import VueCropper from 'vue-cropperjs'
 import 'cropperjs/dist/cropper.css'
diff --git a/ui/src/components/notify-menu.vue b/ui/src/components/notify-menu.vue
index 9edca234..141767b8 100644
--- a/ui/src/components/notify-menu.vue
+++ b/ui/src/components/notify-menu.vue
@@ -1,7 +1,6 @@
 <template>
   <v-menu
     :close-on-content-click="false"
-    offset-y
   >
     <template #activator="{props}">
       <v-btn
@@ -20,7 +19,7 @@
   </v-menu>
 </template>
 
-<script>
+<script setup lang="ts">
 import 'iframe-resizer/js/iframeResizer'
 import VIframe from '@koumoul/v-iframe'
 
diff --git a/ui/src/components/organization-departments.vue b/ui/src/components/organization-departments.vue
index 9af823e5..e8704181 100644
--- a/ui/src/components/organization-departments.vue
+++ b/ui/src/components/organization-departments.vue
@@ -113,7 +113,7 @@
   </v-container>
 </template>
 
-<script>
+<script setup lang="ts">
 import { mapState } from 'vuex'
 import AddDepartmentMenu from '~/components/add-department-menu.vue'
 import EditDepartmentMenu from '~/components/edit-department-menu.vue'
diff --git a/ui/src/components/organization-members.vue b/ui/src/components/organization-members.vue
index 3a067f1f..9c5843e1 100644
--- a/ui/src/components/organization-members.vue
+++ b/ui/src/components/organization-members.vue
@@ -198,7 +198,7 @@
   </v-container>
 </template>
 
-<script>
+<script setup lang="ts">
 import { mapState, mapActions } from 'vuex'
 import eventBus from '../event-bus'
 
diff --git a/ui/src/components/organization-partners.vue b/ui/src/components/organization-partners.vue
index b8928eef..46a6dd93 100644
--- a/ui/src/components/organization-partners.vue
+++ b/ui/src/components/organization-partners.vue
@@ -109,7 +109,7 @@
   </v-container>
 </template>
 
-<script>
+<script setup lang="ts">
 import { mapState } from 'vuex'
 import AddPartnerMenu from '~/components/add-partner-menu.vue'
 import DeletePartnerMenu from '~/components/delete-partner-menu.vue'
diff --git a/ui/src/components/organization-storage.vue b/ui/src/components/organization-storage.vue
index 2d663720..6f2237e0 100644
--- a/ui/src/components/organization-storage.vue
+++ b/ui/src/components/organization-storage.vue
@@ -40,7 +40,7 @@
   </v-alert>
 </template>
 
-<script>
+<script setup lang="ts">
 import { mapState } from 'vuex'
 export default {
   props: ['orga'],
diff --git a/ui/src/components/partner-invitation.vue b/ui/src/components/partner-invitation.vue
index 8a5afb11..21a14240 100644
--- a/ui/src/components/partner-invitation.vue
+++ b/ui/src/components/partner-invitation.vue
@@ -1,6 +1,6 @@
 <template>
   <v-container
-    v-if="payload"
+    v-if="invit"
     fluid
     class="pa-0"
   >
@@ -11,22 +11,22 @@
       density="compact"
     >
       <p>
-        L'organisation {{ payload.on }} souhaite ajouter {{ payload.n }} comme partenaire avec {{ payload.e }} comme adresse de contact.
+        L'organisation {{ invit.on }} souhaite ajouter {{ invit.n }} comme partenaire avec {{ invit.e }} comme adresse de contact.
       </p>
 
       <p class="mb-0">
-        Le nom "{{ payload.n }}" est indicatif et ne correspond pas nécessairement au libellé exact de votre organisation.
+        Le nom "{{ invit.n }}" est indicatif et ne correspond pas nécessairement au libellé exact de votre organisation.
       </p>
     </v-alert>
 
-    <template v-if="user && user.email !== payload.e">
+    <template v-if="user && user.email !== invit.e">
       <p>
         Vous êtes connecté avec le compte utilisateur {{ user.name }} ({{ user.email }}). Vous pouvez vous connecter avec un autre compte ou créer un nouveau compte en cliquant sur le bouton ci-dessous.
       </p>
       <p>
         <v-btn
           v-t="'common.loginSignin'"
-          :href="loginUrl(null, true, {email: payload.e})"
+          :href="loginUrl(undefined, {email: invit.e})"
           variant="flat"
           color="primary"
         />
@@ -42,7 +42,7 @@
           v-t="'common.login'"
           variant="flat"
           color="primary"
-          :href="loginUrl(null, true, {email: payload.e})"
+          :href="loginUrl(undefined, {email: invit.e})"
         />
       </p>
       <p>
@@ -53,7 +53,7 @@
           v-t="'common.signin'"
           variant="flat"
           color="primary"
-          :href="loginUrl(null, true, {email: payload.e, step: 'createUser'})"
+          :href="loginUrl(undefined, {email: invit.e, step: 'createUser'})"
         />
       </p>
     </template>
@@ -75,7 +75,7 @@
           :label="userOrg.name"
           hide-details
           :disabled="userOrg.role !== 'admin'"
-          @update:model-value="v => toggleSelectedUserOrg(userOrg, v)"
+          @update:model-value="v => toggleSelectedUserOrg(userOrg, v as boolean)"
         />
         <v-checkbox
           v-model="createNewOrg"
@@ -101,7 +101,7 @@
           variant="outlined"
           label="nom de la nouvelle organisation"
         >
-          <template #append-outer>
+          <template #append>
             <v-btn
               variant="flat"
               color="primary"
@@ -116,82 +116,63 @@
   </v-container>
 </template>
 
-<script>
+<script setup lang="ts">
+import { type OrganizationMembership } from '@data-fair/lib-common-types/session/index.js'
+import { type Organization, type ShortenedPartnerInvitation } from '#api/types'
 import { jwtDecode } from 'jwt-decode'
-import { mapState, mapActions, mapGetters } from 'vuex'
-import eventBus from '../event-bus'
 
-export default {
-  data () {
-    return {
-      token: this.$route.query.partner_invit_token,
-      createOrganizationName: '',
-      selectedUserOrg: null,
-      createNewOrg: false
-    }
-  },
-  computed: {
-    ...mapState('session', ['user']),
-    ...mapGetters('session', ['loginUrl']),
-    ...mapGetters(['mainHost']),
-    payload () {
-      if (!this.token) return
-      return jwtDecode(this.token)
-    },
-    otherUserOrgs () {
-      if (!this.payload) return
-      return this.user.organizations.filter(o => this.payload.o !== o.id)
-    }
-  },
-  mounted () {
-    if (this.payload) {
-      this.createOrganizationName = this.payload.n
-      if (this.user && this.otherUserOrgs.length === 0) {
-        this.createNewOrg = true
-      }
-    }
-  },
-  methods: {
-    ...mapActions('session', ['login']),
-    async createOrga () {
-      if (!this.createOrganizationName) return
-      try {
-        const orga = await this.$axios.$post('api/organizations', { name: this.createOrganizationName })
-        // switch this orga to default user organization if it is their first org
-        if (!this.user.organizations.length) {
-          await this.$axios.$patch('api/users/' + this.user.id, { defaultOrg: orga.id, ignorePersonalAccount: true })
-        }
-        this.acceptPartnerInvitation(orga)
-      } catch (error) {
-        eventBus.$emit('notification', { error })
-      }
-    },
-    async acceptPartnerInvitation (org) {
-      try {
-        await this.$axios.$post(`/api/organizations/${this.payload.o}/partners/_accept`, { id: org.id, contactEmail: this.payload.e, token: this.token })
-        await this.goToRedirect(org.id)
-      } catch (error) {
-        eventBus.$emit('notification', { error })
-      }
-    },
-    toggleSelectedUserOrg (userOrg, toggle) {
-      if (toggle) this.selectedUserOrg = userOrg
-      else this.selectedUserOrg = null
-      this.createNewOrg = false
-    },
-    async goToRedirect (org) {
-      let redirect = this.$route.query.redirect
-      if (this.mainHost !== new URL(redirect).host) {
-        redirect = await this.$axios.$post('/api/auth/site_redirect', { redirect, org })
-      }
-      window.location.href = redirect
-    }
+const reactiveSearchParams = useReactiveSearchParams()
+const { user, loginUrl } = useSessionAuthenticated()
+const { mainPublicUrl } = useStore()
+
+const createOrganizationName = ref('')
+const selectedUserOrg = ref<OrganizationMembership | null>(null)
+const createNewOrg = ref(false)
+
+const token = reactiveSearchParams.partner_invit_token
+const invit = token ? jwtDecode(token) as ShortenedPartnerInvitation : undefined
+const otherUserOrgs = computed(() => {
+  if (!invit) return []
+  return user.value.organizations.filter(o => invit.o !== o.id)
+})
+if (invit) {
+  createOrganizationName.value = invit.n
+  if (otherUserOrgs.value.length === 0) createNewOrg.value = true
+}
+
+const createOrga = withUiNotif(async () => {
+  if (!createOrganizationName.value) return
+  const orga = await $fetch<Organization>('api/organizations', { method: 'POST', body: { name: createOrganizationName.value } })
+  if (!user.value.organizations.length) {
+    await $fetch('api/users/' + user.value.id, { body: { defaultOrg: orga.id, ignorePersonalAccount: true } })
   }
+  acceptPartnerInvitation(orga)
+})
+
+const acceptPartnerInvitation = withUiNotif(async (org: Organization) => {
+  if (!invit) return
+  await $fetch(`/api/organizations/${invit.o}/partners/_accept`, { method: 'POST', body: { id: org.id, contactEmail: invit.e, token } })
+  goToRedirect(org.id)
+})
+
+const toggleSelectedUserOrg = (userOrg: OrganizationMembership, toggle: boolean) => {
+  if (toggle) selectedUserOrg.value = userOrg
+  else selectedUserOrg.value = null
+  createNewOrg.value = false
 }
+
+const goToRedirect = withUiNotif(async (org: string) => {
+  let redirect = reactiveSearchParams.redirect
+  if (mainPublicUrl.host !== new URL(redirect).host) {
+    redirect = await $fetch('/api/auth/site_redirect', { method: 'POST', body: { redirect, org } })
+  }
+  window.location.href = redirect
+})
+
 </script>
 
 <style lang="css">
-.create-org-name .v-input__append-outer{
+.create-org-name .v-input__append{
   margin-top: 2px !important;
 }
 </style>
diff --git a/ui/src/components/resend-invitation.vue b/ui/src/components/resend-invitation.vue
index 4bf14902..888a5b53 100644
--- a/ui/src/components/resend-invitation.vue
+++ b/ui/src/components/resend-invitation.vue
@@ -2,7 +2,7 @@
   <v-menu
     v-model="menu"
     :close-on-content-click="false"
-    offset-y
+    
   >
     <template #activator="{props}">
       <v-btn
@@ -89,7 +89,7 @@
   </v-menu>
 </template>
 
-<script>
+<script setup lang="ts">
 import eventBus from '../event-bus'
 
 export default {
diff --git a/ui/src/components/resend-partner-invitation.vue b/ui/src/components/resend-partner-invitation.vue
index cce4d746..02f6f371 100644
--- a/ui/src/components/resend-partner-invitation.vue
+++ b/ui/src/components/resend-partner-invitation.vue
@@ -2,7 +2,7 @@
   <v-menu
     v-model="menu"
     :close-on-content-click="false"
-    offset-y
+    
   >
     <template #activator="{props}">
       <v-btn
@@ -76,7 +76,7 @@
   </v-menu>
 </template>
 
-<script>
+<script setup lang="ts">
 import { mapGetters, mapState } from 'vuex'
 import eventBus from '../event-bus'
 
diff --git a/ui/src/components/site-patch.vue b/ui/src/components/site-patch.vue
index f3d5f817..f2834786 100644
--- a/ui/src/components/site-patch.vue
+++ b/ui/src/components/site-patch.vue
@@ -3,7 +3,7 @@
     v-model="menu"
     fullscreen
     :close-on-content-click="false"
-    offset-y
+    
   >
     <template #activator="{props}">
       <v-btn
@@ -56,7 +56,7 @@
   </v-dialog>
 </template>
 
-<script>
+<script setup lang="ts">
 import resolvedSchema from '../../types/site-patch/.type/resolved-schema.json'
 import { mapActions, mapState } from 'vuex'
 
diff --git a/ui/src/components/site-post.vue b/ui/src/components/site-post.vue
index 6166e027..d98e0560 100644
--- a/ui/src/components/site-post.vue
+++ b/ui/src/components/site-post.vue
@@ -3,18 +3,15 @@
     v-model="menu"
     fullscreen
     :close-on-content-click="false"
-    offset-y
   >
     <template #activator="{props}">
-      <v-btn
+      <v-fab
         :title="$t('pages.admin.sites.createSite')"
-        fab
         size="small"
         color="primary"
+        :icon="mdiPlus"
         v-bind="props"
-      >
-        <v-icon>mdi-plus</v-icon>
-      </v-btn>
+      />
     </template>
 
     <v-card
@@ -67,7 +64,7 @@
   </v-dialog>
 </template>
 
-<script>
+<script setup lang="ts">
 import resolvedSchema from '../../types/site-post/.type/resolved-schema.json'
 import { mapActions, mapState } from 'vuex'
 
diff --git a/ui/src/components/v-jsf.vue b/ui/src/components/v-jsf.vue
index 0d463263..4aea7b73 100644
--- a/ui/src/components/v-jsf.vue
+++ b/ui/src/components/v-jsf.vue
@@ -8,7 +8,7 @@
   />
 </template>
 
-<script>
+<script setup lang="ts">
 import VJsfOriginal from '@koumoul/vjsf/lib/VJsf.js'
 import '@koumoul/vjsf/lib/deps/third-party.js'
 import '@koumoul/vjsf/dist/main.css'
diff --git a/ui/src/composables/use-store.ts b/ui/src/composables/use-store.ts
new file mode 100644
index 00000000..cc7a62d6
--- /dev/null
+++ b/ui/src/composables/use-store.ts
@@ -0,0 +1,71 @@
+import type { User, PublicAuthProvider, Organization, SitePublic } from '../../../api/types/index.ts'
+import { PostSiteReq } from '../../../api/doc/sites/post-req/index.ts'
+import { PatchSiteReq } from '../../../api/doc/sites/patch-req'
+
+function createStore () {
+  const { sendUiNotif } = useUiNotif()
+  const { user, site } = useSession()
+  const reactiveSearchParams = useReactiveSearchParams()
+
+  const sitePublic = computed(() => site.value as SitePublic | null)
+
+  const userDetailsFetch = useFetch<User>(() => `${$apiPath}/users/${user.value?.id}`, { watch: false })
+  const authProvidersFetch = useFetch<PublicAuthProvider[]>(`${$apiPath}/auth/providers`, { watch: false })
+  const sitesFetch = useFetch<{ count: number, results: SitePublic[] }>(`${$apiPath}/sites`, { watch: false })
+
+  const patchOrganization = withUiNotif(async (id: string, patch: Partial<Organization>, msg: string) => {
+    await $fetch(`organizations/${id}`, { method: 'PATCH', body: patch })
+    await userDetailsFetch.refresh()
+    sendUiNotif(msg)
+  })
+
+  const postSite = withUiNotif(async (site: PostSiteReq['body']) => {
+    await $fetch('sites', { method: 'POST', body: site })
+  })
+
+  const patchSite = withUiNotif(async (patch: PatchSiteReq['body']) => {
+    await $fetch('sites', { method: 'PATCH', body: patch })
+  })
+
+  const host = window.location.host
+  const mainPublicUrl = new URL($uiConfig.publicUrl)
+
+  const redirect = useStringSearchParam('redirect')
+  const mainRedirect = computed(() => {
+    const mainRedirect = reactiveSearchParams.main_redirect || reactiveSearchParams.mainRedirect
+    if (!mainRedirect && redirect.value?.startsWith(mainPublicUrl.origin)) return redirect.value
+    return mainRedirect
+  })
+
+  const redirects = computed(() => {
+    if (!sitesFetch.data.value) return
+    const redirects: { text: string, value: string }[] = [{ text: mainPublicUrl.host, value: mainRedirect.value }]
+      .concat(sitesFetch.data.value.results.map(site => ({ text: site.host, value: 'https://' + site.host + '/me/account' })))
+    if (mainPublicUrl.host !== host && !sitesFetch.data.value.results.find(site => site.host === host)) {
+      redirects.push({ text: host, value: 'https://' + host + '/me/account' })
+    }
+    return redirects
+  })
+
+  return {
+    sitePublic,
+    sitesFetch,
+    userDetailsFetch,
+    authProvidersFetch,
+    patchOrganization,
+    postSite,
+    patchSite,
+    host,
+    mainPublicUrl,
+    redirects
+  }
+}
+
+// module level singleton is ok as we are not in SSR context
+let storeSingleton: ReturnType<typeof createStore>
+
+export function useStore () {
+  storeSingleton = storeSingleton ?? createStore()
+  return storeSingleton
+}
+export default useStore
diff --git a/ui/src/layouts/default.vue b/ui/src/layouts/default.vue
index 29427866..c9c1d64d 100644
--- a/ui/src/layouts/default.vue
+++ b/ui/src/layouts/default.vue
@@ -169,7 +169,7 @@
   </v-app>
 </template>
 
-<script>
+<script setup lang="ts">
 import eventBus from '../event-bus'
 import logo from '../components/logo.vue'
 import PersonalMenu from '@data-fair/sd-vue/src/vuetify/personal-menu.vue'
diff --git a/ui/src/pages/admin/oauth-tokens.vue b/ui/src/pages/admin/oauth-tokens.vue
index 80f8d6ba..04781285 100644
--- a/ui/src/pages/admin/oauth-tokens.vue
+++ b/ui/src/pages/admin/oauth-tokens.vue
@@ -30,7 +30,7 @@
   </v-container>
 </template>
 
-<script>
+<script setup lang="ts">
 import { mapState, mapGetters } from 'vuex'
 import eventBus from '../../event-bus'
 export default {
diff --git a/ui/src/pages/admin/organizations.vue b/ui/src/pages/admin/organizations.vue
index 5121e2f5..a1b7b21b 100644
--- a/ui/src/pages/admin/organizations.vue
+++ b/ui/src/pages/admin/organizations.vue
@@ -165,7 +165,7 @@
   </v-container>
 </template>
 
-<script>
+<script setup lang="ts">
 import { mapState } from 'vuex'
 import eventBus from '../../event-bus'
 export default {
diff --git a/ui/src/pages/admin/sites.vue b/ui/src/pages/admin/sites.vue
index 0a4ee5d7..12c55e78 100644
--- a/ui/src/pages/admin/sites.vue
+++ b/ui/src/pages/admin/sites.vue
@@ -104,7 +104,7 @@
   </v-container>
 </template>
 
-<script>
+<script setup lang="ts">
 import { mapState, mapGetters, mapActions } from 'vuex'
 import eventBus from '../../event-bus'
 export default {
diff --git a/ui/src/pages/admin/users.vue b/ui/src/pages/admin/users.vue
index a3f418e3..de37e991 100644
--- a/ui/src/pages/admin/users.vue
+++ b/ui/src/pages/admin/users.vue
@@ -292,7 +292,7 @@
   </v-container>
 </template>
 
-<script>
+<script setup lang="ts">
 import { mapState, mapActions } from 'vuex'
 import eventBus from '../../event-bus'
 export default {
diff --git a/ui/src/pages/api-doc.vue b/ui/src/pages/api-doc.vue
index dc4dfaac..8cc86488 100644
--- a/ui/src/pages/api-doc.vue
+++ b/ui/src/pages/api-doc.vue
@@ -6,7 +6,7 @@
   />
 </template>
 
-<script>
+<script setup lang="ts">
 export default {
   props: ['url'],
   computed: {
diff --git a/ui/src/pages/contact.vue b/ui/src/pages/contact.vue
index 0eea72fe..aac104e7 100644
--- a/ui/src/pages/contact.vue
+++ b/ui/src/pages/contact.vue
@@ -52,7 +52,7 @@
   </v-container>
 </template>
 
-<script>
+<script setup lang="ts">
 import eventBus from '../event-bus'
 const newMessage = { from: '', subject: '', text: '' }
 export default {
diff --git a/ui/src/pages/create-organization.vue b/ui/src/pages/create-organization.vue
index f32bd7f2..5b9d537d 100644
--- a/ui/src/pages/create-organization.vue
+++ b/ui/src/pages/create-organization.vue
@@ -42,7 +42,7 @@
   </v-container>
 </template>
 
-<script>
+<script setup lang="ts">
 import { mapState, mapActions } from 'vuex'
 import eventBus from '../event-bus'
 export default {
diff --git a/ui/src/pages/invitation.vue b/ui/src/pages/invitation.vue
index 2278bea9..c1b198b3 100644
--- a/ui/src/pages/invitation.vue
+++ b/ui/src/pages/invitation.vue
@@ -28,7 +28,7 @@
   </v-jumbotron>
 </template>
 
-<script>
+<script setup lang="ts">
 const { mapState } = require('vuex')
 
 export default {
diff --git a/ui/src/pages/login.vue b/ui/src/pages/login.vue
index ee058e25..d31df7cb 100644
--- a/ui/src/pages/login.vue
+++ b/ui/src/pages/login.vue
@@ -734,7 +734,6 @@
 <script lang="ts" setup>
 import { ActionPayload, ShortenedInvitation } from '#api/types'
 import { jwtDecode } from 'jwt-decode'
-import { authProvidersFetch, sitePublic } from '~/store/index.js'
 import type { VForm } from 'vuetify/components'
 import type { PostUserReq } from '#api/doc/users/post-req/index.ts'
 import type { PatchUserReq } from '#api/doc/users/patch-req/index.ts'
@@ -747,6 +746,7 @@ const reactiveSearchParams = useReactiveSearchParams()
 const { t } = useI18n()
 const { user, switchOrganization } = useSession()
 const { sendUiNotif } = useUiNotif()
+const { authProvidersFetch, sitePublic } = useStore()
 
 const error = useStringSearchParam('error')
 const plannedDeletion = reactiveSearchParams.planned_deletion
@@ -786,7 +786,7 @@ const invitToken = reactiveSearchParams.invit_token
 const invitPayload = invitToken ? jwtDecode(invitToken) as ShortenedInvitation : null
 
 const actionToken = useStringSearchParam('action_token')
-const actionPayload = actionToken ? jwtDecode(actionToken.value) as ActionPayload : null
+const actionPayload = actionToken.value ? jwtDecode(actionToken.value) as ActionPayload : null
 
 const logoUrl = computed(() => {
   if (reactiveSearchParams.logo) return reactiveSearchParams.logo
diff --git a/ui/src/pages/me.vue b/ui/src/pages/me.vue
index b0114028..13e2a20c 100644
--- a/ui/src/pages/me.vue
+++ b/ui/src/pages/me.vue
@@ -68,7 +68,7 @@
             :close-on-content-click="false"
             :nudge-right="40"
             transition="scale-transition"
-            offset-y
+            
             max-width="290px"
             min-width="290px"
           >
@@ -246,7 +246,7 @@
   </v-container>
 </template>
 
-<script>
+<script setup lang="ts">
 import { mapState, mapActions, mapGetters } from 'vuex'
 import eventBus from '../event-bus'
 import LoadAvatar from '../components/load-avatar.vue'
diff --git a/ui/src/pages/organization/_id/department/_departmentId.vue b/ui/src/pages/organization/_id/department/_departmentId.vue
index d67a6f59..a31179ad 100644
--- a/ui/src/pages/organization/_id/department/_departmentId.vue
+++ b/ui/src/pages/organization/_id/department/_departmentId.vue
@@ -32,7 +32,7 @@
   </v-container>
 </template>
 
-<script>
+<script setup lang="ts">
 import { mapState } from 'vuex'
 
 export default {
diff --git a/ui/src/pages/organization/_id/index.vue b/ui/src/pages/organization/_id/index.vue
index 72025cd7..847e305f 100644
--- a/ui/src/pages/organization/_id/index.vue
+++ b/ui/src/pages/organization/_id/index.vue
@@ -56,7 +56,7 @@
         name="departmentLabel"
         autocomplete="off"
       >
-        <template #append-outer>
+        <template #append>
           <v-tooltip
 
             location="left"
@@ -129,7 +129,7 @@
   </v-container>
 </template>
 
-<script>
+<script setup lang="ts">
 import { mapActions, mapState, mapGetters } from 'vuex'
 import LoadAvatar from '~/components/load-avatar.vue'
 
@@ -160,7 +160,7 @@ export default {
         if (!this.userDetails) return
         // TODO: this is debatable, API allows to show all info on this page
         // but in term of functionality it doesn't make much sense
-        if (!this.isAdminOrga) uiNotif.sendUiNotif({error:this.$t('errors.permissionDenied') })
+        if (!this.isAdminOrga) uiNotif.sendUiNotif({ error: this.$t('errors.permissionDenied') })
       },
       immediate: true
     }
diff --git a/ui/src/store/index.ts b/ui/src/store/index.ts
deleted file mode 100644
index 4e259473..00000000
--- a/ui/src/store/index.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import type { User, PublicAuthProvider, Organization, SitePublic } from '../../../api/types/index.ts'
-import { PostSiteReq } from '../../../api/doc/sites/post-req/index.ts'
-import { PatchSiteReq } from '../../../api/doc/sites/patch-req'
-
-const { sendUiNotif } = useUiNotif()
-const { user, site } = useSession()
-const reactiveSearchParams = useReactiveSearchParams()
-
-export const sitePublic = computed(() => site.value as SitePublic | null)
-
-export const userDetailsFetch = useFetch<User>(() => `${$apiPath}/users/${user.value?.id}`, { watch: false })
-export const authProvidersFetch = useFetch<PublicAuthProvider[]>(`${$apiPath}/auth/providers`, { watch: false })
-export const sitesFetch = useFetch<{ count: number, results: SitePublic[] }>(`${$apiPath}/sites`, { watch: false })
-
-export const patchOrganization = withUiNotif(async (id: string, patch: Partial<Organization>, msg: string) => {
-  await $fetch(`organizations/${id}`, { method: 'PATCH', body: patch })
-  await userDetailsFetch.refresh()
-  sendUiNotif(msg)
-})
-
-export const postSite = withUiNotif(async (site: PostSiteReq['body']) => {
-  await $fetch('sites', { method: 'POST', body: site })
-})
-
-export const patchSite = withUiNotif(async (patch: PatchSiteReq['body']) => {
-  await $fetch('sites', { method: 'PATCH', body: patch })
-})
-
-export const host = window.location.host
-export const mainPublicUrl = new URL($uiConfig.publicUrl)
-
-export const redirect = useStringSearchParam('redirect')
-export const mainRedirect = computed(() => {
-  const mainRedirect = reactiveSearchParams.main_redirect || reactiveSearchParams.mainRedirect
-  if (!mainRedirect && redirect.value?.startsWith(mainPublicUrl.origin)) return redirect.value
-  return mainRedirect
-})
-
-export const redirects = computed(() => {
-  if (!sitesFetch.data.value) return
-  const redirects: { text: string, value: string }[] = [{ text: mainPublicUrl.host, value: mainRedirect.value }]
-    .concat(sitesFetch.data.value.results.map(site => ({ text: site.host, value: 'https://' + site.host + '/me/account' })))
-  if (mainPublicUrl.host !== host && !sitesFetch.data.value.results.find(site => site.host === host)) {
-    redirects.push({ text: host, value: 'https://' + host + '/me/account' })
-  }
-  return redirects
-})
diff --git a/ui/vite.config.ts b/ui/vite.config.ts
index 70e0ad74..e88ee722 100644
--- a/ui/vite.config.ts
+++ b/ui/vite.config.ts
@@ -35,9 +35,14 @@ export default defineConfig({
       imports: [
         ...(autoImports as any),
         unheadVueComposablesImports,
+        {
+          from: '#api/types',
+          imports: ['Organization'],
+          type: true,
+        },
         {
           '~/context': ['$uiConfig', '$sitePath', '$siteUrl', '$sdUrl', '$apiPath', '$fetch'],
-          '@mdi/js': ['mdiBell', 'mdiRefresh', 'mdiSend', 'mdiDelete', 'mdiDevices', 'mdiEmail', 'mdiRss', 'mdiDotsVertical', 'mdiCheckCircle', 'mdiCancel', 'mdiAlertCircle', 'mdiCellphone', 'mdiWeb']
+          '@mdi/js': ['mdiBell', 'mdiRefresh', 'mdiSend', 'mdiDelete', 'mdiDevices', 'mdiEmail', 'mdiRss', 'mdiDotsVertical', 'mdiCheckCircle', 'mdiCancel', 'mdiAlertCircle', 'mdiCellphone', 'mdiWeb', 'mdiPlus', 'mdiCheck']
         }
       ],
       dirs: [