diff --git a/packages/web-app-ocm/src/composables/useInvitationAcceptance.ts b/packages/web-app-ocm/src/composables/useInvitationAcceptance.ts
new file mode 100644
index 00000000000..07ef2e593e8
--- /dev/null
+++ b/packages/web-app-ocm/src/composables/useInvitationAcceptance.ts
@@ -0,0 +1,67 @@
+import { ref, unref } from 'vue'
+import { useClientService, useMessages, useRouter, useRoute } from '@ownclouders/web-pkg'
+import { useGettext } from 'vue3-gettext'
+
+export const useInvitationAcceptance = () => {
+  const { showErrorMessage } = useMessages()
+  const clientService = useClientService()
+  const router = useRouter()
+  const route = useRoute()
+  const { $gettext } = useGettext()
+
+  const isAccepting = ref(false)
+
+  const errorPopup = (error: Error) => {
+    console.error(error)
+    showErrorMessage({
+      title: $gettext('Error'),
+      desc: $gettext('An error occurred'),
+      errors: [error]
+    })
+  }
+
+  const validateParameters = (token: string, providerDomain: string) => {
+    if (!token || !providerDomain) {
+      const error = new Error($gettext('Missing required parameters: token and providerDomain'))
+      errorPopup(error)
+      return false
+    }
+    return true
+  }
+
+  const acceptInvitation = async (token: string, providerDomain: string): Promise<boolean> => {
+    if (!validateParameters(token, providerDomain)) {
+      return false
+    }
+
+    isAccepting.value = true
+
+    try {
+      await clientService.httpAuthenticated.post('/sciencemesh/accept-invite', {
+        token,
+        providerDomain
+      })
+
+      // Remove query params
+      const { token: currentToken, providerDomain: currentProvider, ...query } = unref(route).query
+      await router.replace({
+        name: 'open-cloud-mesh-invitations',
+        query
+      })
+
+      return true
+    } catch (error) {
+      errorPopup(error)
+      return false
+    } finally {
+      isAccepting.value = false
+    }
+  }
+
+  return {
+    isAccepting,
+    acceptInvitation,
+    errorPopup,
+    validateParameters
+  }
+}
diff --git a/packages/web-app-ocm/src/composables/useWayf.ts b/packages/web-app-ocm/src/composables/useWayf.ts
new file mode 100644
index 00000000000..6536962434f
--- /dev/null
+++ b/packages/web-app-ocm/src/composables/useWayf.ts
@@ -0,0 +1,182 @@
+import { ref } from 'vue'
+import { useClientService, useMessages } from '@ownclouders/web-pkg'
+import { useGettext } from 'vue3-gettext'
+import {
+  WayfFederation,
+  WayfProvider,
+  FederationsApiResponse,
+  DiscoverResponse
+} from '../types/wayf'
+
+export const useWayf = () => {
+  const { showErrorMessage } = useMessages()
+  const clientService = useClientService()
+  const { $gettext } = useGettext()
+
+  const federations = ref<WayfFederation>({})
+  const isLoadingFederations = ref(false)
+  const isDiscovering = ref(false)
+
+  const getCurrentHostname = (): string => {
+    return window.location.hostname
+  }
+
+  const stripProtocolAndPort = (domain: string): string => {
+    try {
+      const url = new URL(domain.startsWith('http') ? domain : `https://${domain}`)
+      return url.hostname
+    } catch {
+      return domain.replace(/^https?:\/\//, '').split(':')[0]
+    }
+  }
+
+  const isSelfDomain = (domain: string): boolean => {
+    const currentHost = stripProtocolAndPort(getCurrentHostname())
+    const checkHost = stripProtocolAndPort(domain)
+    return currentHost === checkHost
+  }
+
+  const loadFederations = async () => {
+    isLoadingFederations.value = true
+    try {
+      const { data } = await clientService.httpUnAuthenticated.get<FederationsApiResponse>(
+        '/sciencemesh/federations'
+      )
+
+      const federationMap: WayfFederation = {}
+
+      data.forEach((federation) => {
+        const providers = federation.servers
+          .filter((server) => !isSelfDomain(server.url))
+          .map((server) => ({
+            name: server.displayName,
+            fqdn: stripProtocolAndPort(server.url),
+            inviteAcceptDialog: server.inviteAcceptDialog || ''
+          }))
+
+        if (providers.length > 0) {
+          federationMap[federation.federation] = providers
+        }
+      })
+
+      federations.value = federationMap
+    } catch (error) {
+      console.error('Failed to load federations:', error)
+      showErrorMessage({
+        title: $gettext('Error'),
+        desc: $gettext('Failed to load federations'),
+        errors: [error]
+      })
+    } finally {
+      isLoadingFederations.value = false
+    }
+  }
+
+  const discoverProvider = async (domain: string): Promise<DiscoverResponse | null> => {
+    isDiscovering.value = true
+    try {
+      const { data } = await clientService.httpUnAuthenticated.post<DiscoverResponse>(
+        '/sciencemesh/discover',
+        { domain }
+      )
+      return data
+    } catch (error) {
+      console.error('Failed to discover provider:', error)
+      showErrorMessage({
+        title: $gettext('Error'),
+        desc: $gettext('Failed to discover provider'),
+        errors: [error]
+      })
+      return null
+    } finally {
+      isDiscovering.value = false
+    }
+  }
+
+  const navigateToProvider = (
+    provider: WayfProvider,
+    token: string,
+    providerDomain: string
+  ): void => {
+    if (isSelfDomain(provider.fqdn)) {
+      showErrorMessage({
+        title: $gettext('Error'),
+        desc: $gettext('You cannot select your own instance')
+      })
+      return
+    }
+
+    let targetUrl: string
+    const inviteDialogPath = provider.inviteAcceptDialog || '/open-cloud-mesh/accept-invite'
+
+    if (inviteDialogPath.startsWith('http://') || inviteDialogPath.startsWith('https://')) {
+      // Absolute URL
+      targetUrl = inviteDialogPath
+    } else {
+      // Relative path
+      const cleanPath = inviteDialogPath.startsWith('/') ? inviteDialogPath : `/${inviteDialogPath}`
+      targetUrl = `https://${provider.fqdn}${cleanPath}`
+    }
+
+    const url = new URL(targetUrl)
+    url.searchParams.set('token', token)
+    url.searchParams.set('providerDomain', providerDomain)
+
+    window.location.href = url.toString()
+  }
+
+  const navigateToManualProvider = async (
+    input: string,
+    token: string,
+    providerDomain: string
+  ): Promise<void> => {
+    const domain = stripProtocolAndPort(input)
+
+    if (isSelfDomain(domain)) {
+      showErrorMessage({
+        title: $gettext('Error'),
+        desc: $gettext('You cannot select your own instance')
+      })
+      return
+    }
+
+    const discoveryResult = await discoverProvider(domain)
+    if (!discoveryResult) {
+      return
+    }
+
+    const provider: WayfProvider = {
+      name: domain,
+      fqdn: domain,
+      inviteAcceptDialog: discoveryResult.inviteAcceptDialog || ''
+    }
+
+    navigateToProvider(provider, token, providerDomain)
+  }
+
+  const filterProviders = (providers: WayfProvider[], query: string): WayfProvider[] => {
+    if (!query) {
+      return providers
+    }
+
+    const lowerQuery = query.toLowerCase()
+    return providers.filter(
+      (provider) =>
+        provider.name.toLowerCase().includes(lowerQuery) ||
+        provider.fqdn.toLowerCase().includes(lowerQuery)
+    )
+  }
+
+  return {
+    federations,
+    isLoadingFederations,
+    isDiscovering,
+    loadFederations,
+    discoverProvider,
+    navigateToProvider,
+    navigateToManualProvider,
+    isSelfDomain,
+    filterProviders,
+    getCurrentHostname
+  }
+}
diff --git a/packages/web-app-ocm/src/index.ts b/packages/web-app-ocm/src/index.ts
index 09b67f182b6..7949ad2a18a 100644
--- a/packages/web-app-ocm/src/index.ts
+++ b/packages/web-app-ocm/src/index.ts
@@ -1,4 +1,5 @@
 import App from './views/App.vue'
+import Wayf from './views/Wayf.vue'
 import { ApplicationInformation, defineWebApplication, useRouter } from '@ownclouders/web-pkg'
 import translations from '../l10n/translations.json'
 import { extensions } from './extensions'
@@ -20,6 +21,25 @@ const routes: RouteRecordRaw[] = [
       patchCleanPath: true,
       title: 'Invitations'
     }
+  },
+  {
+    path: '/wayf',
+    name: 'open-cloud-mesh-wayf',
+    component: Wayf,
+    meta: {
+      patchCleanPath: true,
+      title: 'Where Are You From',
+      authContext: 'anonymous' // No authentication required
+    }
+  },
+  {
+    path: '/accept-invite',
+    name: 'open-cloud-mesh-accept-invite',
+    component: App,
+    meta: {
+      patchCleanPath: true,
+      title: 'Accept Invitation'
+    }
   }
 ]
 
diff --git a/packages/web-app-ocm/src/types/wayf.ts b/packages/web-app-ocm/src/types/wayf.ts
new file mode 100644
index 00000000000..b4b864e0df8
--- /dev/null
+++ b/packages/web-app-ocm/src/types/wayf.ts
@@ -0,0 +1,34 @@
+// Frontend types
+export interface WayfProvider {
+  name: string
+  fqdn: string
+  inviteAcceptDialog: string // Can be empty, relative path, or absolute URL
+}
+
+export interface WayfFederation {
+  [federationName: string]: WayfProvider[]
+}
+
+// Backend API response types
+export interface FederationServerResponse {
+  displayName: string
+  url: string
+  inviteAcceptDialog: string
+}
+
+export interface FederationResponse {
+  federation: string
+  servers: FederationServerResponse[]
+}
+
+export type FederationsApiResponse = FederationResponse[]
+
+export interface DiscoverRequest {
+  domain: string
+}
+
+export interface DiscoverResponse {
+  inviteAcceptDialog: string
+  provider?: string
+  apiVersion?: string
+}
diff --git a/packages/web-app-ocm/src/views/App.vue b/packages/web-app-ocm/src/views/App.vue
index d18101e4373..2f35dc25bfc 100644
--- a/packages/web-app-ocm/src/views/App.vue
+++ b/packages/web-app-ocm/src/views/App.vue
@@ -17,19 +17,29 @@
         />
       </div>
     </div>
+    <invitation-acceptance-modal
+      v-if="showAcceptanceModal"
+      :token="invitationToken"
+      :provider-domain="invitationProviderDomain"
+      @cancel="closeAcceptanceModal"
+      @accepted="handleInvitationAccepted"
+    />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, onUnmounted, ref, unref, Ref } from 'vue'
+import { defineComponent, onMounted, onUnmounted, ref, unref, Ref, watch } from 'vue'
 import ConnectionsPanel from './ConnectionsPanel.vue'
 import IncomingInvitations from './IncomingInvitations.vue'
 import OutgoingInvitations from './OutgoingInvitations.vue'
+import InvitationAcceptanceModal from './InvitationAcceptanceModal.vue'
 import {
   useClientService,
   useScrollTo,
   FederatedConnection,
-  useMessages
+  useMessages,
+  useRoute,
+  useRouter
 } from '@ownclouders/web-pkg'
 import { useGettext } from 'vue3-gettext'
 import { buildConnection } from '../functions'
@@ -38,12 +48,15 @@ export default defineComponent({
   components: {
     IncomingInvitations,
     OutgoingInvitations,
-    ConnectionsPanel
+    ConnectionsPanel,
+    InvitationAcceptanceModal
   },
   setup() {
     const { showMessage } = useMessages()
     const { scrollToResource } = useScrollTo()
     const clientSerivce = useClientService()
+    const route = useRoute()
+    const router = useRouter()
     const { $gettext } = useGettext()
 
     const connections: Ref<FederatedConnection[]> = ref([])
@@ -51,6 +64,44 @@ export default defineComponent({
     const highlightNewConnectionsInterval = ref(null)
     const loadingConnections = ref(true)
 
+    // Modal state for invitation acceptance
+    const showAcceptanceModal = ref(false)
+    const invitationToken = ref('')
+    const invitationProviderDomain = ref('')
+
+    // Watch for /accept-invite route with token and providerDomain query params
+    watch(
+      () => unref(route).name,
+      (newRouteName) => {
+        if (newRouteName === 'open-cloud-mesh-accept-invite') {
+          const currentRoute = unref(route)
+          const token = currentRoute.query.token as string
+          const providerDomain = currentRoute.query.providerDomain as string
+
+          if (token && providerDomain) {
+            invitationToken.value = token
+            invitationProviderDomain.value = providerDomain
+            showAcceptanceModal.value = true
+          }
+        }
+      },
+      { immediate: true }
+    )
+
+    const closeAcceptanceModal = () => {
+      showAcceptanceModal.value = false
+      invitationToken.value = ''
+      invitationProviderDomain.value = ''
+      router.push({ name: 'open-cloud-mesh-invitations' })
+    }
+
+    const handleInvitationAccepted = async () => {
+      showAcceptanceModal.value = false
+      invitationToken.value = ''
+      invitationProviderDomain.value = ''
+      await highlightNewConnections()
+    }
+
     const findAcceptedUsers = async () => {
       try {
         const { data: acceptedUsers } = await clientSerivce.httpAuthenticated.get<
@@ -112,7 +163,12 @@ export default defineComponent({
       highlightNewConnections,
       connections,
       highlightedConnections,
-      loadingConnections
+      loadingConnections,
+      showAcceptanceModal,
+      invitationToken,
+      invitationProviderDomain,
+      closeAcceptanceModal,
+      handleInvitationAccepted
     }
   }
 })
@@ -123,9 +179,11 @@ export default defineComponent({
   background-color: var(--oc-color-background-hover);
   overflow: auto;
 }
+
 .sciencemesh-wrapper {
   height: 100%;
 }
+
 .sciencemesh-top {
   max-height: 360px;
   @media (max-width: $oc-breakpoint-large-default) {
@@ -134,11 +192,13 @@ export default defineComponent({
     max-height: unset;
   }
 }
+
 #sciencemesh-invite,
 #sciencemesh-accept-invites {
   margin: var(--oc-space-small);
   overflow: auto;
 }
+
 #sciencemesh-invite,
 #sciencemesh-accept-invites,
 #sciencemesh-connections {
@@ -150,9 +210,11 @@ export default defineComponent({
     width: auto;
   }
 }
+
 #sciencemesh-connections {
   flex: 1;
 }
+
 #sciencemesh-invite {
   overflow: auto;
   @media (max-width: $oc-breakpoint-large-default) {
diff --git a/packages/web-app-ocm/src/views/ConnectionsPanel.vue b/packages/web-app-ocm/src/views/ConnectionsPanel.vue
index 779075cbf35..02d550bbff9 100644
--- a/packages/web-app-ocm/src/views/ConnectionsPanel.vue
+++ b/packages/web-app-ocm/src/views/ConnectionsPanel.vue
@@ -49,8 +49,9 @@
               @click="deleteConnection(item)"
             >
               <oc-icon name="delete-bin-5" fill-type="line" size="medium" />
-              <span v-text="$gettext('Delete')" /></oc-button
-          ></template>
+              <span v-text="$gettext('Delete')"
+            /></oc-button>
+          </template>
         </oc-table>
       </template>
     </div>
@@ -64,7 +65,8 @@ import {
   AppLoadingSpinner,
   useRouter,
   useClientService,
-  FederatedConnection
+  FederatedConnection,
+  useMessages
 } from '@ownclouders/web-pkg'
 import { useGettext } from 'vue3-gettext'
 import { ShareTypes } from '@ownclouders/web-client'
@@ -105,6 +107,7 @@ export default defineComponent({
     const router = useRouter()
     const { $gettext } = useGettext()
     const clientService = useClientService()
+    const { showErrorMessage } = useMessages()
 
     const fields = computed(() => {
       return [
@@ -137,7 +140,7 @@ export default defineComponent({
     const helperContent = computed(() => {
       return {
         text: $gettext(
-          'Federated conections for mutual sharing. To share, go to "Files" app, select the resource click "Share" in the context menu and select account type "federated".'
+          'Federated connections for mutual sharing. To share, go to "Files" app, select the resource click "Share" in the context menu and select account type "federated".'
         ),
         title: $gettext('Federated connections')
       }
@@ -166,6 +169,11 @@ export default defineComponent({
         emit('update:connections', updatedConnections)
       } catch (e) {
         console.error(e)
+        showErrorMessage({
+          title: $gettext('Error'),
+          desc: $gettext('Failed to delete connection'),
+          errors: [e]
+        })
       }
     }
 
@@ -186,6 +194,7 @@ export default defineComponent({
       visibility: none;
     }
   }
+
   #accepted-invitations-empty {
     height: 100%;
   }
diff --git a/packages/web-app-ocm/src/views/IncomingInvitations.vue b/packages/web-app-ocm/src/views/IncomingInvitations.vue
index fba93748098..c5c58696395 100644
--- a/packages/web-app-ocm/src/views/IncomingInvitations.vue
+++ b/packages/web-app-ocm/src/views/IncomingInvitations.vue
@@ -43,17 +43,14 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref, unref } from 'vue'
-import { useClientService, useRoute, useRouter, useMessages } from '@ownclouders/web-pkg'
 import { useGettext } from 'vue3-gettext'
+import { useInvitationAcceptance } from '../composables/useInvitationAcceptance'
 
 export default defineComponent({
   emits: ['highlightNewConnections'],
   setup(props, { emit }) {
-    const { showErrorMessage } = useMessages()
-    const router = useRouter()
-    const route = useRoute()
-    const clientService = useClientService()
     const { $gettext } = useGettext()
+    const { acceptInvitation, isAccepting } = useInvitationAcceptance()
 
     const token = ref<string>(undefined)
     const decodedToken = ref<string>(undefined)
@@ -70,47 +67,35 @@ export default defineComponent({
     })
 
     const acceptInvitationButtonDisabled = computed(() => {
-      return !unref(decodedToken) || !unref(provider)
+      return !unref(decodedToken) || !unref(provider) || unref(isAccepting)
     })
 
-    const errorPopup = (error: Error) => {
-      console.error(error)
-      showErrorMessage({
-        title: $gettext('Error'),
-        desc: $gettext('An error occurred'),
-        errors: [error]
-      })
-    }
     const acceptInvite = async () => {
-      try {
-        await clientService.httpAuthenticated.post('/sciencemesh/accept-invite', {
-          token: unref(decodedToken),
-          providerDomain: unref(provider)
-        })
+      const success = await acceptInvitation(unref(decodedToken), unref(provider))
+      if (success) {
         token.value = undefined
         provider.value = undefined
-
-        const { token: currentToken, providerDomain, ...query } = unref(route).query
-        router.replace({
-          name: 'open-cloud-mesh-invitations',
-          query
-        })
-
+        decodedToken.value = undefined
         emit('highlightNewConnections')
-      } catch (error) {
-        errorPopup(error)
       }
     }
 
     const decodeInviteToken = (value: string) => {
       try {
-        const decoded = atob(value)
+        // Support both plain token@provider format and base64 encoded
+        let decoded = value.trim()
+        if (!decoded.includes('@')) {
+          // Try base64 decode
+          decoded = atob(decoded)
+        }
+
         if (!decoded.includes('@')) {
           throw new Error()
         }
-        const [token, serverUrl] = decoded.split('@')
+
+        const [tokenPart, serverUrl] = decoded.split('@')
         provider.value = serverUrl
-        decodedToken.value = token
+        decodedToken.value = tokenPart
         providerError.value = false
       } catch (e) {
         provider.value = ''
diff --git a/packages/web-app-ocm/src/views/InvitationAcceptanceModal.vue b/packages/web-app-ocm/src/views/InvitationAcceptanceModal.vue
new file mode 100644
index 00000000000..88ecbe0a485
--- /dev/null
+++ b/packages/web-app-ocm/src/views/InvitationAcceptanceModal.vue
@@ -0,0 +1,62 @@
+<template>
+  <oc-modal
+    :title="$gettext('Accept Invitation')"
+    :button-cancel-text="$gettext('Cancel')"
+    :button-confirm-text="$gettext('Accept')"
+    :button-confirm-disabled="isAccepting"
+    @cancel="$emit('cancel')"
+    @confirm="handleAccept"
+  >
+    <template #content>
+      <div class="oc-flex oc-flex-column">
+        <p v-text="$gettext('You are about to accept an invitation from:')" />
+        <div class="oc-my-s">
+          <strong v-text="$gettext('Provider:')" />
+          <span class="oc-ml-s" v-text="providerDomain" />
+        </div>
+        <div class="oc-mb-s">
+          <strong v-text="$gettext('Token:')" />
+          <span class="oc-ml-s oc-text-truncate" v-text="token" />
+        </div>
+        <p
+          v-text="$gettext('Once accepted, you will be able to share files with this provider.')"
+        />
+      </div>
+    </template>
+  </oc-modal>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { useInvitationAcceptance } from '../composables/useInvitationAcceptance'
+
+export default defineComponent({
+  name: 'InvitationAcceptanceModal',
+  props: {
+    token: {
+      type: String,
+      required: true
+    },
+    providerDomain: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ['cancel', 'accepted'],
+  setup(props, { emit }) {
+    const { isAccepting, acceptInvitation } = useInvitationAcceptance()
+
+    const handleAccept = async () => {
+      const success = await acceptInvitation(props.token, props.providerDomain)
+      if (success) {
+        emit('accepted')
+      }
+    }
+
+    return {
+      isAccepting,
+      handleAccept
+    }
+  }
+})
+</script>
diff --git a/packages/web-app-ocm/src/views/OutgoingInvitations.vue b/packages/web-app-ocm/src/views/OutgoingInvitations.vue
index 3f5a12babd4..4b21cecd769 100644
--- a/packages/web-app-ocm/src/views/OutgoingInvitations.vue
+++ b/packages/web-app-ocm/src/views/OutgoingInvitations.vue
@@ -3,7 +3,7 @@
     <div>
       <div class="oc-flex oc-flex-middle oc-px-m oc-pt-s">
         <oc-icon name="user-shared" />
-        <h2 class="oc-px-s" v-text="$gettext('Invite users')"></h2>
+        <h2 class="oc-px-s" v-text="$gettext('Invite users to federate')"></h2>
         <oc-contextual-helper class="oc-pl-xs" v-bind="helperContent" />
       </div>
       <div class="oc-flex oc-flex-middle oc-flex-center oc-p-m">
@@ -41,8 +41,9 @@
               "
             />
             <input type="submit" class="oc-hidden" />
-          </form> </template
-      ></oc-modal>
+          </form>
+        </template>
+      </oc-modal>
       <app-loading-spinner v-if="loading" />
       <template v-else>
         <no-content-message
@@ -57,34 +58,43 @@
         </no-content-message>
         <oc-table v-else :fields="fields" :data="sortedTokens" :highlighted="lastCreatedToken">
           <template #token="rowData">
-            <div class="invite-code-wrapper oc-flex">
-              <div class="oc-text-truncate">
-                <span class="oc-text-truncate">{{ encodeInviteToken(rowData.item.token) }}</span>
+            <div class="invite-code-wrapper oc-flex oc-flex-middle">
+              <div class="oc-text-truncate oc-mr-s">
+                <span class="oc-text-truncate">{{ rowData.item.token }}</span>
+              </div>
+              <div class="copy-buttons oc-flex oc-flex-middle">
+                <oc-button
+                  id="oc-sciencemesh-copy-plain"
+                  v-oc-tooltip="$gettext('Copy plain token')"
+                  :aria-label="$gettext('Copy plain token')"
+                  appearance="raw"
+                  class="oc-mr-xs"
+                  @click="copyPlainToken(rowData)"
+                >
+                  <oc-icon name="file-copy" />
+                </oc-button>
+                <oc-button
+                  id="oc-sciencemesh-copy-base64"
+                  v-oc-tooltip="$gettext('Copy base64 token')"
+                  :aria-label="$gettext('Copy base64 token')"
+                  appearance="raw"
+                  class="oc-mr-xs"
+                  @click="copyBase64Token(rowData)"
+                >
+                  <oc-icon name="code" />
+                </oc-button>
+                <oc-button
+                  id="oc-sciencemesh-copy-wayf"
+                  v-oc-tooltip="$gettext('Copy Invite link')"
+                  :aria-label="$gettext('Copy Invite link')"
+                  appearance="raw"
+                  @click="copyWayfLink(rowData)"
+                >
+                  <oc-icon name="link" />
+                </oc-button>
               </div>
-              <oc-button
-                id="oc-sciencemesh-copy-token"
-                v-oc-tooltip="$gettext('Copy invite token')"
-                :aria-label="$gettext('Copy invite token')"
-                appearance="raw"
-                class="oc-ml-s"
-                @click="copyToken(rowData)"
-              >
-                <oc-icon name="file-copy" />
-              </oc-button>
             </div>
           </template>
-          <template #link="rowData">
-            <a :href="rowData.item.link" v-text="$gettext('Link')" />
-            <oc-button
-              id="oc-sciencemesh-copy-token"
-              v-oc-tooltip="$gettext('Copy invitation link')"
-              :aria-label="$gettext('Copy invitation link')"
-              appearance="raw"
-              @click="copyLink(rowData)"
-            >
-              <oc-icon name="file-copy" />
-            </oc-button>
-          </template>
           <template #expiration="rowData">
             <span
               v-oc-tooltip="formatDate(rowData.item.expiration)"
@@ -116,6 +126,8 @@ type Token = {
   id: string
   token: string
   link?: string
+  tokenAtProvider?: string
+  wayfLink?: string
   expiration?: Date
   expirationSeconds?: number
   description?: string
@@ -141,19 +153,11 @@ export default defineComponent({
     const loading = ref(true)
     const descriptionErrorMessage = ref<string>()
     const fields = computed(() => {
-      const haveLinks = unref(sortedTokens)[0]?.link
-
       return [
-        haveLinks && {
-          name: 'link',
-          title: $gettext('Invitation link'),
-          alignH: 'left',
-          type: 'slot'
-        },
         {
           name: 'token',
           title: $gettext('Invite token'),
-          alignH: haveLinks ? 'right' : 'left',
+          alignH: 'left',
           type: 'slot'
         },
         {
@@ -167,7 +171,7 @@ export default defineComponent({
           alignH: 'right',
           type: 'slot'
         }
-      ].filter(Boolean)
+      ]
     })
     const sortedTokens = computed(() => {
       return [...unref(tokens)].sort((a, b) => (a.expirationSeconds < b.expirationSeconds ? 1 : -1))
@@ -182,8 +186,33 @@ export default defineComponent({
     })
 
     const encodeInviteToken = (token: string) => {
-      const url = new URL(configStore.serverUrl)
-      return btoa(`${token}@${url.host}`)
+      if (!configStore.serverUrl) return ''
+      try {
+        const url = new URL(configStore.serverUrl)
+        return btoa(`${token}@${url.host}`)
+      } catch {
+        return ''
+      }
+    }
+
+    const getTokenAtProvider = (token: string) => {
+      if (!configStore.serverUrl) return token
+      try {
+        const url = new URL(configStore.serverUrl)
+        return `${token}@${url.host}`
+      } catch {
+        return token
+      }
+    }
+
+    const generateWayfLink = (token: string) => {
+      if (!configStore.serverUrl) return ''
+      try {
+        const url = new URL(configStore.serverUrl)
+        return `${url.origin}/open-cloud-mesh/wayf?token=${token}`
+      } catch {
+        return ''
+      }
     }
 
     const generateToken = async () => {
@@ -208,6 +237,8 @@ export default defineComponent({
             id: tokenInfo.token,
             link: tokenInfo.invite_link,
             token: tokenInfo.token,
+            tokenAtProvider: getTokenAtProvider(tokenInfo.token),
+            wayfLink: generateWayfLink(tokenInfo.token),
             ...(tokenInfo.expiration && {
               expiration: toDateTime(tokenInfo.expiration)
             }),
@@ -224,7 +255,7 @@ export default defineComponent({
             )
           })
 
-          const quickToken = encodeInviteToken(tokenInfo.token)
+          const quickToken = getTokenAtProvider(tokenInfo.token)
           lastCreatedToken.value = quickToken
           navigator.clipboard.writeText(quickToken)
         }
@@ -246,6 +277,8 @@ export default defineComponent({
           tokens.value.push({
             id: t.token,
             token: t.token,
+            tokenAtProvider: getTokenAtProvider(t.token),
+            wayfLink: generateWayfLink(t.token),
             ...(t.expiration && {
               expiration: toDateTime(t.expiration)
             }),
@@ -262,18 +295,30 @@ export default defineComponent({
       }
     }
 
-    const copyLink = (rowData: { item: { link: string; token: string } }) => {
-      navigator.clipboard.writeText(rowData.item.link)
+    const copyPlainToken = (rowData: { item: Token }) => {
+      const plainToken = rowData.item.tokenAtProvider || getTokenAtProvider(rowData.item.token)
+      navigator.clipboard.writeText(plainToken)
       showMessage({
-        title: $gettext('Invition link copied'),
-        desc: $gettext('Invitation link has been copied to your clipboard.')
+        title: $gettext('Plain token copied'),
+        desc: $gettext('Plain token has been copied to your clipboard.')
       })
     }
-    const copyToken = (rowData: { item: { link: string; token: string } }) => {
-      navigator.clipboard.writeText(encodeInviteToken(rowData.item.token))
+
+    const copyBase64Token = (rowData: { item: Token }) => {
+      const base64Token = encodeInviteToken(rowData.item.token)
+      navigator.clipboard.writeText(base64Token)
       showMessage({
-        title: $gettext('Invite token copied'),
-        desc: $gettext('Invite token has been copied to your clipboard.')
+        title: $gettext('Base64 token copied'),
+        desc: $gettext('Base64 token has been copied to your clipboard.')
+      })
+    }
+
+    const copyWayfLink = (rowData: { item: Token }) => {
+      const wayfLink = rowData.item.wayfLink || generateWayfLink(rowData.item.token)
+      navigator.clipboard.writeText(wayfLink)
+      showMessage({
+        title: $gettext('WAYF link copied'),
+        desc: $gettext('WAYF link has been copied to your clipboard.')
       })
     }
     const errorPopup = (error: Error) => {
@@ -323,8 +368,9 @@ export default defineComponent({
       formInput,
       loading,
       sortedTokens,
-      copyToken,
-      copyLink,
+      copyPlainToken,
+      copyBase64Token,
+      copyWayfLink,
       lastCreatedToken,
       fields,
       formatDate,
@@ -339,7 +385,18 @@ export default defineComponent({
 .sciencemesh-app {
   .invite-code-wrapper {
     width: 200px;
+
+    .copy-buttons {
+      gap: 4px;
+
+      .oc-button {
+        padding: 4px;
+        min-width: 32px;
+        height: 32px;
+      }
+    }
   }
+
   #invite-tokens-empty {
     height: 100%;
   }
diff --git a/packages/web-app-ocm/src/views/Wayf.vue b/packages/web-app-ocm/src/views/Wayf.vue
new file mode 100644
index 00000000000..2d6540c9a32
--- /dev/null
+++ b/packages/web-app-ocm/src/views/Wayf.vue
@@ -0,0 +1,554 @@
+<template>
+  <main id="wayf" class="oc-flex oc-height-1-1">
+    <div class="wayf-wrapper oc-width-expand oc-height-1-1">
+    <div class="wayf-content">
+        <!-- Header Section -->
+        <div class="wayf-header oc-flex oc-flex-middle oc-px-m oc-py-s">
+          <oc-icon name="cloud" size="large" class="oc-mr-s" />
+          <h1 class="oc-px-s" v-text="$gettext('Where Are You From?')" />
+          <oc-contextual-helper class="oc-pl-xs" v-bind="helperContent" />
+      </div>
+
+        <!-- No Token State -->
+        <no-content-message
+          v-if="!hasToken"
+          id="wayf-no-token"
+          icon="cloud"
+          class="oc-text-center oc-p-l"
+        >
+          <template #message>
+            <span v-text="$gettext('Token Required')" />
+          </template>
+          <template #callToAction>
+            <span
+              class="oc-text-muted"
+              v-text="$gettext('You need a token for this feature to work.')"
+            />
+          </template>
+        </no-content-message>
+
+        <!-- Loading State -->
+        <div v-else-if="isLoadingFederations" class="oc-text-center oc-p-l">
+          <app-loading-spinner />
+          <p class="oc-mt-s" v-text="$gettext('Loading providers...')" />
+      </div>
+
+        <!-- Main Content -->
+        <div v-else class="wayf-main oc-flex oc-flex-column oc-height-1-1">
+          <!-- Self Domain Error (CERNBox enhancement) -->
+      <div
+        v-if="selfDomainError"
+            class="wayf-error oc-background-danger oc-p-m oc-mx-m oc-mt-m oc-border-radius-medium"
+      >
+        <oc-icon name="error-warning" size="small" />
+        <span class="oc-ml-s" v-text="$gettext('Invalid Selection')" />
+        <p class="oc-mt-s" v-text="$gettext('You cannot select your own instance.')" />
+      </div>
+
+          <!-- Search Section -->
+          <div class="wayf-search oc-px-m oc-pb-s">
+          <oc-text-input
+            v-model="searchQuery"
+            :label="$gettext('Search providers')"
+              type="search"
+              id="wayf-search"
+              name="search"
+              class="oc-mb-s"
+          >
+            <template #icon>
+              <oc-icon name="search" />
+            </template>
+          </oc-text-input>
+        </div>
+
+          <!-- Empty State (no federations or no matches) -->
+          <div v-if="totalFilteredCount === 0" class="wayf-empty-state">
+            <no-content-message id="wayf-empty" class="oc-mx-m oc-my-m" icon="search">
+              <template #message>
+                <span v-text="$gettext('No providers match your search')" />
+              </template>
+              <template #callToAction>
+                <span
+                  class="oc-text-muted"
+                  v-text="$gettext('Try a different search or enter a domain manually below.')"
+                />
+              </template>
+            </no-content-message>
+          </div>
+
+          <!-- Federation Sections -->
+          <div v-else class="wayf-federations oc-flex-1">
+            <div
+              v-for="[federationName, providers] in sortedFederationEntries"
+              :key="federationName"
+              class="wayf-federation"
+            >
+              <div class="wayf-federation-header oc-flex oc-flex-middle oc-px-m oc-py-s">
+                <oc-icon name="shield-check" :size="16" class="oc-mr-s" />
+                <h2 class="oc-text-truncate" :title="federationName">{{ federationName }}</h2>
+                <span class="wayf-provider-count oc-ml-s oc-text-muted oc-text-small">
+                  {{ providers.length }}
+                  {{ providers.length === 1 ? $gettext('provider') : $gettext('providers') }}
+                </span>
+              </div>
+              <div class="wayf-providers">
+                <oc-button
+                  v-for="provider in providers"
+                  :key="provider.fqdn"
+                  appearance="raw"
+                  class="wayf-provider-button oc-width-1-1 oc-px-s oc-py-s"
+                  :disabled="isLoadingFederations"
+                  :aria-label="$gettext('Select provider %{name}', { name: provider.name })"
+                  @click="handleProviderSelect(provider)"
+                >
+                  <div class="oc-flex oc-flex-middle oc-flex-center">
+                    <div class="oc-flex oc-flex-column oc-width-expand oc-text-center">
+                      <div class="wayf-provider-name oc-text-truncate">{{ provider.name }}</div>
+                      <div class="wayf-provider-fqdn oc-text-muted oc-text-small">
+                        {{ provider.fqdn }}
+                      </div>
+                    </div>
+                  </div>
+                </oc-button>
+                </div>
+              </div>
+            </div>
+
+          <!-- Manual Provider Section -->
+          <div class="wayf-manual oc-px-m oc-pt-m">
+            <div class="oc-flex oc-flex-middle oc-mb-s">
+              <oc-icon name="cloud" :size="20" class="oc-mr-s" />
+              <h3 v-text="$gettext('Manual Provider Entry')" />
+            </div>
+            <oc-text-input
+              v-model="manualProviderInput"
+              :label="$gettext('Enter provider domain manually')"
+              type="text"
+              id="wayf-manual"
+              name="manual"
+              class="oc-mb-s"
+              :disabled="isDiscovering"
+              @keyup.enter="handleManualProvider"
+            >
+              <template #icon>
+                <oc-icon name="cloud" :size="20" />
+              </template>
+            </oc-text-input>
+            <oc-button
+              appearance="filled"
+              variation="primary"
+              class="oc-mt-s oc-px-m oc-py-m wayf-continue-button"
+              :disabled="!manualProviderInput.trim() || isDiscovering"
+              @click="handleManualProvider"
+            >
+              <oc-icon v-if="isDiscovering" name="refresh" class="oc-mr-s" />
+              <span v-text="$gettext('Continue')" />
+            </oc-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed, onMounted, unref } from 'vue'
+import { useRoute } from 'vue-router'
+import { useGettext } from 'vue3-gettext'
+import { NoContentMessage, AppLoadingSpinner } from '@ownclouders/web-pkg'
+import { useWayf } from '../composables/useWayf'
+import { WayfProvider, WayfFederation } from '../types/wayf'
+
+export default defineComponent({
+  name: 'Wayf',
+  components: {
+    NoContentMessage,
+    AppLoadingSpinner
+  },
+  setup() {
+    const route = useRoute()
+    const { $gettext } = useGettext()
+    const {
+      federations,
+      isLoadingFederations,
+      isDiscovering,
+      loadFederations,
+      navigateToProvider,
+      navigateToManualProvider,
+      isSelfDomain,
+      filterProviders,
+      getCurrentHostname
+    } = useWayf()
+
+    // Local state
+    const searchQuery = ref('')
+    const manualProviderInput = ref('')
+    const selfDomainError = ref(false)
+
+    // Computed properties
+    const token = computed(() => {
+      return (route.query.token as string) || ''
+    })
+
+    const hasToken = computed(() => {
+      return !!unref(token).trim()
+    })
+
+    const providerDomain = computed(() => {
+      return getCurrentHostname()
+    })
+
+    const helperContent = computed(() => {
+      return {
+        text: $gettext(
+          'Select your cloud provider to continue with the invitation process. You can search for providers or enter a domain manually.'
+        ),
+        title: $gettext('Where Are You From?')
+      }
+    })
+
+    const filteredFederations = computed(() => {
+      if (!unref(searchQuery)) {
+        return unref(federations)
+      }
+
+      const filtered: WayfFederation = {}
+      Object.entries(unref(federations)).forEach(([federationName, providers]) => {
+        const filteredProviders = filterProviders(providers, unref(searchQuery))
+        if (filteredProviders.length > 0) {
+          filtered[federationName] = filteredProviders
+        }
+      })
+
+      return filtered
+    })
+
+    const totalFilteredCount = computed(() => {
+      return Object.values(unref(filteredFederations)).reduce(
+        (sum, arr) => sum + arr.length,
+        0
+      )
+    })
+
+    const sortedFederationEntries = computed(() => {
+      return Object.entries(unref(filteredFederations)).sort(([a], [b]) =>
+        a.localeCompare(b)
+      )
+    })
+
+    // Methods
+    const showSelfDomainError = () => {
+      selfDomainError.value = true
+      setTimeout(() => {
+        selfDomainError.value = false
+      }, 5000)
+    }
+
+    const handleProviderSelect = (provider: WayfProvider) => {
+      if (isSelfDomain(provider.fqdn)) {
+        showSelfDomainError()
+        return
+      }
+
+      navigateToProvider(provider, unref(token), unref(providerDomain))
+    }
+
+    const handleManualProvider = async () => {
+      const input = unref(manualProviderInput).trim()
+      if (!input) {
+        return
+      }
+
+      if (isSelfDomain(input)) {
+        showSelfDomainError()
+        return
+      }
+
+      await navigateToManualProvider(input, unref(token), unref(providerDomain))
+    }
+
+    // Lifecycle
+    onMounted(async () => {
+      if (unref(hasToken)) {
+        await loadFederations()
+      }
+    })
+
+    return {
+      // State
+      federations,
+      isLoadingFederations,
+      isDiscovering,
+      searchQuery,
+      manualProviderInput,
+      selfDomainError,
+      // Computed
+      hasToken,
+      helperContent,
+      filteredFederations,
+      totalFilteredCount,
+      sortedFederationEntries,
+      // Methods
+      handleProviderSelect,
+      handleManualProvider
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+#wayf {
+  background-color: var(--oc-color-background-hover);
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.wayf-wrapper {
+  width: 100%;
+  height: 100%;
+  background-color: var(--oc-color-background-default);
+  border-radius: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.wayf-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.wayf-header {
+  background-color: var(--oc-color-background-hover);
+  border-bottom: 1px solid var(--oc-color-border);
+  flex-shrink: 0;
+  min-height: 60px;
+
+  h1 {
+    color: var(--oc-color-text-default);
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin: 0;
+  }
+}
+
+.wayf-error {
+  flex-shrink: 0;
+}
+
+.wayf-main {
+  background-color: var(--oc-color-background-default);
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+}
+
+.wayf-search {
+  background-color: var(--oc-color-background-hover);
+  border-bottom: 1px solid var(--oc-color-border);
+  flex-shrink: 0;
+  overflow: hidden;
+  min-height: 80px;
+}
+
+.wayf-federations {
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex: 1;
+  min-height: 0;
+  padding: var(--oc-space-small);
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  grid-gap: var(--oc-space-small);
+  align-content: start;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--oc-color-border);
+    border-radius: 3px;
+
+    &:hover {
+      background: var(--oc-color-text-muted);
+    }
+  }
+}
+
+.wayf-federation {
+  border: 1px solid var(--oc-color-border);
+  border-radius: 10px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  max-height: 280px;
+  height: 280px;
+}
+
+.wayf-federation-header {
+  background-color: var(--oc-color-background-hover);
+  border-bottom: 1px solid var(--oc-color-border);
+  min-height: 42px;
+
+  h2 {
+    color: var(--oc-color-text-default);
+    font-size: 1.1rem;
+    font-weight: 600;
+    margin: 0;
+    min-width: 0;
+    flex: 1 1 auto;
+  }
+
+  .wayf-provider-count {
+    background-color: var(--oc-color-background-default);
+    padding: 2px 8px;
+    border-radius: 12px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    margin-left: auto;
+    min-width: fit-content;
+    text-align: right;
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+}
+
+.wayf-providers {
+  background-color: var(--oc-color-background-default);
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+}
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--oc-color-border);
+    border-radius: 3px;
+
+    &:hover {
+      background: var(--oc-color-text-muted);
+    }
+  }
+}
+
+.wayf-provider-button {
+  border: none;
+  border-bottom: 1px solid var(--oc-color-border);
+  border-radius: 0;
+  text-align: left;
+  transition: background-color 0.15s ease;
+  font-size: 0.9rem;
+  padding-top: var(--oc-space-2xsmall);
+  padding-bottom: var(--oc-space-2xsmall);
+
+  &:hover:not(:disabled) {
+    background-color: var(--oc-color-background-hover);
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+.wayf-provider-name {
+  font-weight: 600;
+  color: var(--oc-color-text-default);
+  margin-bottom: 2px;
+  font-size: 1rem;
+}
+
+.wayf-provider-fqdn {
+  color: var(--oc-color-text-muted);
+  font-family: monospace;
+  font-size: 0.8rem;
+}
+
+.wayf-manual {
+  background-color: var(--oc-color-background-hover);
+  border-top: 1px solid var(--oc-color-border);
+  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.04);
+  flex-shrink: 0;
+  padding-bottom: var(--oc-space-medium);
+  display: flex;
+  flex-direction: column;
+
+  h3 {
+    color: var(--oc-color-text-default);
+    font-size: 1rem;
+    font-weight: 600;
+    margin: 0;
+  }
+}
+
+.wayf-continue-button {
+  width: 100%;
+}
+
+.wayf-empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 300px;
+  flex: 1;
+}
+
+@media (max-width: $oc-breakpoint-large-default) {
+  .wayf-federations {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (max-width: $oc-breakpoint-medium-default) {
+  .wayf-header {
+    h1 {
+      font-size: 1.25rem;
+    }
+  }
+
+  .wayf-federation-header {
+    h2 {
+      font-size: 1rem;
+    }
+  }
+
+  .wayf-federations {
+    grid-template-columns: 1fr;
+  }
+
+  .wayf-federation {
+    max-height: 240px;
+    height: 240px;
+  }
+}
+
+@media (max-height: 600px) {
+  .wayf-federation {
+    max-height: 200px;
+    height: 200px;
+  }
+}
+</style>