diff --git a/packages/web-app-ocm/docs/Where Are You From page.md b/packages/web-app-ocm/docs/Where Are You From page.md
new file mode 100644
index 0000000000..01c0d02d2e
--- /dev/null
+++ b/packages/web-app-ocm/docs/Where Are You From page.md	
@@ -0,0 +1,122 @@
+# Where Are You From
+
+## Overview
+
+The WAYF page allows users to select their cloud provider when accepting an invitation. It's accessible at the path `domain.tld/open-cloud-mesh/wayf?token=token`.
+
+## Usage
+
+### 1. Basic Functionality Test
+
+Navigate to: `http://localhost:3000/open-cloud-mesh/wayf?token=test-token-123`
+
+Expected behavior:
+
+- Page loads with "Where Are You From?" header
+- Shows loading state initially
+- Displays list of available providers grouped by federation
+- Search functionality works
+- Manual provider input is available
+
+### 2. URL Parameters Test
+
+Test with different URL parameters:
+
+- `?token=test-token-123` - Should show providers
+- No token - Should show "You need a token for this feature to work"
+
+**Note**: `providerDomain` is ALWAYS auto-detected from `window.location.hostname` and should NOT be passed in the URL for security reasons.
+
+### 3. Provider Selection Test
+
+- Click on any provider from the list
+- Should redirect to the provider's accept-invite page with token and domain parameters
+
+### 4. Manual Provider Test
+
+- Enter a domain in the manual provider field (e.g., "example.com")
+- Press Enter or click the input
+- Should attempt to discover the provider and redirect
+
+### 5. Search Functionality Test
+
+- Type in the search box to filter providers
+- Should filter by provider name or FQDN
+- Clear search should show all providers again
+
+### 6. Error Handling Test
+
+- Test with invalid provider domains
+- Should show appropriate error messages
+- Should not crash the application
+
+### 7. Self-Domain Prevention Test
+
+**Test that users cannot select their own instance:**
+
+- If `window.location.hostname` is `example.com`:
+  - Federation list should NOT include any provider with FQDN `example.com`
+  - Manual entry of `example.com` should show error
+  - Manual entry of `http://example.com` should show error
+  - Manual entry of `https://example.com:443` should show error
+- Error message should be: "Invalid Provider Selection - You cannot select your own instance as a provider..."
+
+### How It Works
+
+1. **Federation List Filtering**: When loading federations from the backend, any provider whose domain matches `window.location.hostname` is automatically filtered out
+2. **Provider Selection Validation**: If a user somehow selects their own domain from the list, an error message is shown
+3. **Manual Entry Validation**: If a user manually enters their own domain, an error message is shown
+
+### Error Message
+
+When attempting to select own instance:
+
+```
+Title: Invalid Provider Selection
+Message: You cannot select your own instance as a provider.
+         Please select a different provider to establish a federated connection.
+```
+
+### Implementation Details
+
+- Domain comparison is case-insensitive
+- Protocols (`http://`, `https://`) are stripped before comparison
+- Port numbers are stripped before comparison
+- If backend returns the current instance in federations, it's automatically dropped from the list
+
+## API Endpoints Used
+
+### Backend Endpoints
+
+- `GET /sciencemesh/federations` - Loads list of available federations (public endpoint)
+- `POST /sciencemesh/discover` - Discovers provider's OCM API endpoint for manual entry (public endpoint)
+
+### External OCM Discovery
+
+- `https://{provider-domain}/.well-known/ocm` - OCM discovery endpoint (called by backend, not frontend)
+- `https://{provider-domain}/ocm-provider` - Legacy OCM discovery endpoint (fallback)
+
+## Expected URL Structure
+
+When a provider is selected, the user is redirected to:
+
+```
+{provider-invite-accept-dialog}?token={token}&providerDomain={providerDomain}
+```
+
+**Important Clarification**:
+
+- `providerDomain` = The domain **where the WAYF page is hosted** (YOUR domain, the inviting party)
+- `provider-invite-accept-dialog` = The selected provider's invite acceptance URL
+
+**Example Flow**:
+
+1. User visits WAYF on: `your-domain.com/open-cloud-mesh/wayf?token=abc123`
+2. User selects provider: CERNBox
+3. User is redirected to: `qa.cernbox.cern.ch/accept?token=abc123&providerDomain=your-domain.com`
+   - Note: `providerDomain` is `your-domain.com` (NOT `qa.cernbox.cern.ch`)
+
+**How providerDomain is determined**:
+
+- **ALWAYS** automatically extracted from `window.location.hostname`
+- **NEVER** accepted from query string (security: prevents domain spoofing)
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 0000000000..9eded7b97c
--- /dev/null
+++ b/packages/web-app-ocm/src/composables/useInvitationAcceptance.ts
@@ -0,0 +1,56 @@
+import { ref, computed } from 'vue'
+import { useClientService, useMessages } from '@opencloud-eu/web-pkg'
+import { useGettext } from 'vue3-gettext'
+
+export function useInvitationAcceptance() {
+  const clientService = useClientService()
+  const { showErrorMessage } = useMessages()
+  const { $gettext } = useGettext()
+
+  const loading = ref(false)
+  const error = ref(false)
+
+  const errorPopup = (error: Error) => {
+    console.error(error)
+    showErrorMessage({
+      title: $gettext('Error'),
+      desc: $gettext('An error occurred'),
+      errors: [error]
+    })
+  }
+
+  const acceptInvitation = async (token: string, providerDomain: string) => {
+    loading.value = true
+    error.value = false
+
+    try {
+      const response = await clientService.httpAuthenticated.post('/sciencemesh/accept-invite', {
+        token,
+        providerDomain
+      })
+
+      return true
+    } catch (err) {
+      console.error('Error accepting invitation:', err)
+      error.value = true
+      errorPopup(err)
+      throw err
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const validateParameters = (token: string | undefined, providerDomain: string | undefined) => {
+    if (!token || !providerDomain) {
+      throw new Error($gettext('Missing required parameters: token and providerDomain'))
+    }
+  }
+
+  return {
+    loading: computed(() => loading.value),
+    error: computed(() => error.value),
+    acceptInvitation,
+    validateParameters,
+    errorPopup
+  }
+}
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 0000000000..b3a56a582f
--- /dev/null
+++ b/packages/web-app-ocm/src/composables/useWayf.ts
@@ -0,0 +1,195 @@
+import { ref, computed } from 'vue'
+import { useClientService, useMessages } from '@opencloud-eu/web-pkg'
+import { useGettext } from 'vue3-gettext'
+import type {
+  WayfProvider,
+  WayfFederation,
+  FederationsApiResponse,
+  DiscoverRequest,
+  DiscoverResponse
+} from '../types/wayf'
+
+export function useWayf() {
+  const clientService = useClientService()
+  const { showErrorMessage } = useMessages()
+  const { $gettext } = useGettext()
+
+  const loading = ref(false)
+  const error = ref(false)
+  const federations = ref<WayfFederation>({})
+
+  const isSelfDomain = (domain: string): boolean => {
+    const currentHost = window.location.hostname.toLowerCase()
+    const checkDomain = domain
+      .toLowerCase()
+      .replace(/^https?:\/\//, '')
+      .replace(/:\d+$/, '')
+    return currentHost === checkDomain
+  }
+
+  const discoverProvider = async (domain: string): Promise<string> => {
+    try {
+      loading.value = true
+      const response = await clientService.httpUnAuthenticated.post<DiscoverResponse>(
+        '/sciencemesh/discover',
+        { domain } as DiscoverRequest
+      )
+
+      if (!response.data || !response.data.inviteAcceptDialog) {
+        throw new Error('No invite accept dialog found in discovery response')
+      }
+
+      return response.data.inviteAcceptDialog
+    } catch (err) {
+      console.error('Provider discovery failed:', err)
+      showErrorMessage({
+        title: $gettext('Discovery Failed'),
+        desc: $gettext('Could not discover provider at %{domain}', { domain }),
+        errors: [err]
+      })
+      throw err
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const buildProviderUrl = (baseUrl: string, token: string, providerDomain?: string): string => {
+    const url = new URL(baseUrl)
+    if (providerDomain) url.searchParams.set('providerDomain', providerDomain)
+    if (token) url.searchParams.set('token', token)
+    return url.toString()
+  }
+
+  const navigateToProvider = async (
+    provider: WayfProvider,
+    token: string,
+    providerDomain?: string
+  ) => {
+    if (isSelfDomain(provider.fqdn)) {
+      showErrorMessage({
+        title: $gettext('Invalid Provider Selection'),
+        desc: $gettext(
+          'You cannot select your own instance as a provider. Please select a different provider to establish a federated connection.'
+        )
+      })
+      return
+    }
+
+    try {
+      loading.value = true
+      let inviteDialogUrl = provider.inviteAcceptDialog
+
+      // If inviteAcceptDialog is empty, call backend discovery
+      if (!inviteDialogUrl || inviteDialogUrl.trim() === '') {
+        inviteDialogUrl = await discoverProvider(provider.fqdn)
+      } else {
+        // If it's a relative path, make it absolute
+        if (inviteDialogUrl.startsWith('/')) {
+          const baseUrl = `https://${provider.fqdn}`
+          inviteDialogUrl = `${baseUrl}${inviteDialogUrl}`
+        }
+        // If it's already absolute, use as-is
+      }
+
+      // Build final URL with query parameters and redirect
+      const finalUrl = buildProviderUrl(inviteDialogUrl, token, providerDomain)
+      window.location.href = finalUrl
+    } catch (err) {
+      console.error('Failed to navigate to provider:', err)
+      // Error is already shown by discoverProvider, do not use showErrorMessage here
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const navigateToManualProvider = async (
+    input: string,
+    token: string,
+    providerDomain?: string
+  ) => {
+    const trimmedInput = input.trim()
+    if (!trimmedInput) return
+
+    if (isSelfDomain(trimmedInput)) {
+      showErrorMessage({
+        title: $gettext('Invalid Provider Selection'),
+        desc: $gettext(
+          'You cannot use your own instance as a provider. Please select a different provider to establish a federated connection.'
+        )
+      })
+      return
+    }
+
+    try {
+      loading.value = true
+      const inviteDialogUrl = await discoverProvider(trimmedInput)
+      const finalUrl = buildProviderUrl(inviteDialogUrl, token, providerDomain)
+      window.location.href = finalUrl
+    } catch (err) {
+      console.error('Failed to navigate to manual provider:', err)
+      // Error is already shown by discoverProvider, do not use showErrorMessage here
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const loadFederations = async () => {
+    try {
+      loading.value = true
+      error.value = false
+
+      const response = await clientService.httpUnAuthenticated.get<FederationsApiResponse>(
+        '/sciencemesh/federations'
+      )
+
+      const transformedFederations: WayfFederation = {}
+      response.data.forEach((fed) => {
+        const providers = fed.servers
+          .map((server) => ({
+            name: server.displayName,
+            fqdn: new URL(server.url).hostname,
+            // Keep empty if not provided by the server
+            inviteAcceptDialog: server.inviteAcceptDialog || ''
+          }))
+          .filter((provider) => !isSelfDomain(provider.fqdn))
+
+        if (providers.length > 0) {
+          transformedFederations[fed.federation] = providers
+        }
+      })
+
+      federations.value = transformedFederations
+    } catch (err) {
+      console.error('Failed to load federations:', err)
+      error.value = true
+      showErrorMessage({
+        title: $gettext('Failed to Load Providers'),
+        desc: $gettext('Could not load the list of available providers'),
+        errors: [err]
+      })
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const filterProviders = (providers: WayfProvider[], query: string): WayfProvider[] => {
+    const searchTerm = (query || '').toLowerCase()
+    return providers.filter(
+      (provider) =>
+        provider.name.toLowerCase().includes(searchTerm) ||
+        provider.fqdn.toLowerCase().includes(searchTerm)
+    )
+  }
+
+  return {
+    loading: computed(() => loading.value),
+    error: computed(() => error.value),
+    federations: computed(() => federations.value),
+    discoverProvider,
+    buildProviderUrl,
+    navigateToProvider,
+    navigateToManualProvider,
+    loadFederations,
+    filterProviders
+  }
+}
diff --git a/packages/web-app-ocm/src/index.ts b/packages/web-app-ocm/src/index.ts
index d79f38316a..c382051df1 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 '@opencloud-eu/web-pkg'
 import translations from '../l10n/translations.json'
 import { extensions } from './extensions'
@@ -20,6 +21,33 @@ const routes: RouteRecordRaw[] = [
       patchCleanPath: true,
       title: 'Invitations'
     }
+  },
+  {
+    path: '/accept-invite',
+    name: 'open-cloud-mesh-accept-invite',
+    component: App,
+    meta: {
+      patchCleanPath: true,
+      title: 'Accept Invitation'
+    }
+  },
+  {
+    path: '/wayf',
+    name: 'open-cloud-mesh-wayf',
+    component: Wayf,
+    meta: {
+      patchCleanPath: true,
+      title: 'Where Are You From',
+      /*
+      How authentication context works:
+      authContext: 'user'         requires full authentication (default)
+      authContext: 'anonymous'    no authentication required
+      authContext: 'hybrid'       works with or without authentication (didn't work without login for me)
+      authContext: 'idp'          requires IdP authentication only
+      authContext: 'publicLink'   for public link contexts
+      */
+      authContext: 'anonymous'
+    }
   }
 ]
 
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 0000000000..a208afd76c
--- /dev/null
+++ b/packages/web-app-ocm/src/types/wayf.ts
@@ -0,0 +1,35 @@
+// Frontend types
+export interface WayfProvider {
+  name: string
+  fqdn: string
+  // Can be empty, relative path, or absolute URL
+  inviteAcceptDialog: string
+}
+
+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 e5cdf748d5..03af706444 100644
--- a/packages/web-app-ocm/src/views/App.vue
+++ b/packages/web-app-ocm/src/views/App.vue
@@ -23,19 +23,31 @@
         />
       </div>
     </div>
+
+    <invitation-acceptance-modal
+      v-if="showInvitationModal"
+      :show-modal="showInvitationModal"
+      :token="invitationToken"
+      :provider="invitationProvider"
+      @highlight-new-connections="highlightNewConnections"
+      @close="closeInvitationModal"
+    />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, onUnmounted, ref, unref, Ref } from 'vue'
+import { defineComponent, onMounted, onUnmounted, ref, unref, Ref, computed, 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 '@opencloud-eu/web-pkg'
 import { useGettext } from 'vue3-gettext'
 import { buildConnection } from '../functions'
@@ -44,22 +56,62 @@ export default defineComponent({
   components: {
     IncomingInvitations,
     OutgoingInvitations,
-    ConnectionsPanel
+    ConnectionsPanel,
+    InvitationAcceptanceModal
   },
   setup() {
     const { showMessage } = useMessages()
     const { scrollToResource } = useScrollTo()
-    const clientSerivce = useClientService()
+    const clientService = useClientService()
     const { $gettext } = useGettext()
+    const route = useRoute()
+    const router = useRouter()
 
     const connections: Ref<FederatedConnection[]> = ref([])
     const highlightedConnections: Ref<FederatedConnection[]> = ref([])
     const highlightNewConnectionsInterval = ref<ReturnType<typeof setInterval>>()
     const loadingConnections = ref(true)
 
+    // Modal state for invitation acceptance
+    const showInvitationModal = ref(false)
+    const invitationToken = ref('')
+    const invitationProvider = ref('')
+
+    // Check if we're on the accept-invite route and show modal
+    const isAcceptInviteRoute = computed(() => {
+      return route.value.name === 'open-cloud-mesh-accept-invite'
+    })
+
+    // Watch for route changes to show modal
+    watch(
+      isAcceptInviteRoute,
+      (isAcceptRoute) => {
+        if (isAcceptRoute) {
+          const token = route.value.query.token as string
+          const provider = route.value.query.providerDomain as string
+
+          if (token && provider) {
+            invitationToken.value = token
+            invitationProvider.value = provider
+            showInvitationModal.value = true
+          }
+        }
+      },
+      { immediate: true }
+    )
+
+    const closeInvitationModal = () => {
+      showInvitationModal.value = false
+      invitationToken.value = ''
+      invitationProvider.value = ''
+
+      // Clear URL query parameters and navigate to invitations
+      router.replace({ name: 'open-cloud-mesh-invitations' })
+    }
+
     const findAcceptedUsers = async () => {
       try {
-        const { data: acceptedUsers } = await clientSerivce.httpAuthenticated.get<
+        const { data: acceptedUsers } = await clientService.httpAuthenticated.get<
           FederatedConnection[]
         >('/sciencemesh/find-accepted-users')
         loadingConnections.value = false
@@ -118,7 +170,11 @@ export default defineComponent({
       highlightNewConnections,
       connections,
       highlightedConnections,
-      loadingConnections
+      loadingConnections,
+      showInvitationModal,
+      invitationToken,
+      invitationProvider,
+      closeInvitationModal
     }
   }
 })
diff --git a/packages/web-app-ocm/src/views/ConnectionsPanel.vue b/packages/web-app-ocm/src/views/ConnectionsPanel.vue
index cbab51ac41..dd2fb6b932 100644
--- a/packages/web-app-ocm/src/views/ConnectionsPanel.vue
+++ b/packages/web-app-ocm/src/views/ConnectionsPanel.vue
@@ -61,6 +61,7 @@ import {
   AppLoadingSpinner,
   useRouter,
   useClientService,
+  useMessages,
   FederatedConnection
 } from '@opencloud-eu/web-pkg'
 import { useGettext } from 'vue3-gettext'
@@ -103,6 +104,7 @@ export default defineComponent({
     const router = useRouter()
     const { $gettext } = useGettext()
     const clientService = useClientService()
+    const { showErrorMessage } = useMessages()
 
     const fields = computed<FieldType[]>(() => {
       return [
@@ -135,7 +137,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')
       }
@@ -162,8 +164,13 @@ export default defineComponent({
         )
 
         emit('update:connections', updatedConnections)
-      } catch (e) {
-        console.error(e)
+      } catch (error) {
+        console.error('Failed to delete connection:', error)
+        showErrorMessage({
+          title: $gettext('Error'),
+          desc: $gettext('Failed to delete connection'),
+          errors: [error]
+        })
       }
     }
 
diff --git a/packages/web-app-ocm/src/views/IncomingInvitations.vue b/packages/web-app-ocm/src/views/IncomingInvitations.vue
index 0b8d2bb866..855d0babaa 100644
--- a/packages/web-app-ocm/src/views/IncomingInvitations.vue
+++ b/packages/web-app-ocm/src/views/IncomingInvitations.vue
@@ -43,18 +43,19 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref, unref } from 'vue'
-import { useClientService, useRoute, useRouter, useMessages } from '@opencloud-eu/web-pkg'
+import { useRoute, useRouter } from '@opencloud-eu/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 } = useInvitationAcceptance()
+
     const token = ref<string>(undefined)
     const decodedToken = ref<string>(undefined)
     const provider = ref<string>(undefined)
@@ -73,20 +74,11 @@ export default defineComponent({
       return !unref(decodedToken) || !unref(provider)
     })
 
-    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)
-        })
+        // Use shared invitation acceptance logic
+        await acceptInvitation(unref(decodedToken), unref(provider))
+
         token.value = undefined
         provider.value = undefined
 
@@ -98,21 +90,33 @@ export default defineComponent({
 
         emit('highlightNewConnections')
       } catch (error) {
-        errorPopup(error)
+        // Error handling is already done in the shared logic, do not use showErrorMessage here
       }
     }
 
     const decodeInviteToken = (value: string) => {
       try {
-        const decoded = atob(value)
+        let decoded = value.trim()
+
+        // If value doesn't contain '@', assume it's base64 encoded
+        if (!decoded.includes('@')) {
+          decoded = atob(decoded)
+        }
+
         if (!decoded.includes('@')) {
-          throw new Error()
+          throw new Error('Invalid token format')
         }
+
         const [token, serverUrl] = decoded.split('@')
+        if (!token || !serverUrl) {
+          throw new Error('Invalid token format')
+        }
+
         provider.value = serverUrl
         decodedToken.value = token
         providerError.value = false
-      } catch (e) {
+      } catch (error) {
+        console.error('Failed to decode invite token:', error)
         provider.value = ''
         decodedToken.value = ''
         providerError.value = true
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 0000000000..0f1f4db432
--- /dev/null
+++ b/packages/web-app-ocm/src/views/InvitationAcceptanceModal.vue
@@ -0,0 +1,113 @@
+<template>
+  <oc-modal
+    v-if="showModal"
+    :title="$gettext('Accept Invitation')"
+    :button-cancel-text="$gettext('Decline')"
+    :button-confirm-text="$gettext('Accept')"
+    :button-confirm-disabled="acceptButtonDisabled"
+    @cancel="declineInvitation"
+    @confirm="acceptInvitation"
+  >
+    <template #content>
+      <div class="invitation-acceptance-content">
+        <div v-if="loading" class="text-center p-4">
+          <app-loading-spinner />
+          <p class="mt-2" v-text="$gettext('Processing invitation...')" />
+        </div>
+
+        <div v-else class="p-4">
+          <div class="flex items-center mb-4">
+            <oc-icon name="user-received" size="large" class="mr-4" />
+            <div>
+              <h3 v-text="$gettext('You have received an invitation')" />
+              <p
+                class="text-muted"
+                v-text="$gettext('Accept this invitation to establish a federated connection.')"
+              />
+            </div>
+          </div>
+
+          <div class="invitation-details p-4 rounded-lg border bg-role-surface-container-highest">
+            <div class="mb-2">
+              <strong v-text="$gettext('From Institution:')" />
+              <span class="ml-2" v-text="provider" />
+            </div>
+            <div class="text-sm text-muted">
+              <span v-text="$gettext('Token:')" />
+              <span class="ml-2 font-mono" v-text="token" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </oc-modal>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue'
+import { AppLoadingSpinner } from '@opencloud-eu/web-pkg'
+import { useInvitationAcceptance } from '../composables/useInvitationAcceptance'
+
+export default defineComponent({
+  components: {
+    AppLoadingSpinner
+  },
+  props: {
+    showModal: {
+      type: Boolean,
+      required: true
+    },
+    token: {
+      type: String,
+      required: true
+    },
+    provider: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ['highlightNewConnections', 'close'],
+  setup(props, { emit }) {
+    const {
+      loading,
+      acceptInvitation: acceptInvitationAPI,
+      validateParameters
+    } = useInvitationAcceptance()
+
+    const acceptButtonDisabled = computed(() => {
+      return loading.value || !props.token || !props.provider
+    })
+
+    const acceptInvitation = async () => {
+      try {
+        validateParameters(props.token, props.provider)
+
+        await acceptInvitationAPI(props.token, props.provider)
+
+        emit('highlightNewConnections')
+        emit('close')
+      } catch (err) {
+        console.error('Error accepting invitation:', err)
+        emit('close')
+      }
+    }
+
+    const declineInvitation = () => {
+      emit('close')
+    }
+
+    return {
+      loading,
+      acceptButtonDisabled,
+      acceptInvitation,
+      declineInvitation
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.invitation-acceptance-content {
+  min-height: 200px;
+}
+</style>
diff --git a/packages/web-app-ocm/src/views/OutgoingInvitations.vue b/packages/web-app-ocm/src/views/OutgoingInvitations.vue
index dc2feaea6e..3f4dc64901 100644
--- a/packages/web-app-ocm/src/views/OutgoingInvitations.vue
+++ b/packages/web-app-ocm/src/views/OutgoingInvitations.vue
@@ -60,17 +60,37 @@
           <template #token="rowData">
             <div class="w-3xs flex">
               <div class="truncate max-w-full">
-                <span class="truncate">{{ encodeInviteToken(rowData.item.token) }}</span>
+                <span class="truncate">{{ rowData.item.token }}</span>
               </div>
               <oc-button
-                id="oc-sciencemesh-copy-token"
-                v-oc-tooltip="$gettext('Copy invite token')"
-                :aria-label="$gettext('Copy invite token')"
+                id="oc-sciencemesh-copy-plain"
+                v-oc-tooltip="$gettext('Copy plain token')"
+                :aria-label="$gettext('Copy plain token')"
                 appearance="raw"
-                class="ml-2"
+                class="ml-1"
+                @click="copyPlainToken(rowData)"
+              >
+                <oc-icon name="file-copy" size="small" />
+              </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="ml-1"
                 @click="copyToken(rowData)"
               >
-                <oc-icon name="file-copy" />
+                <oc-icon name="code" size="small" />
+              </oc-button>
+              <oc-button
+                id="oc-sciencemesh-copy-wayf"
+                v-oc-tooltip="$gettext('Copy Invite link')"
+                :aria-label="$gettext('Copy Invite link')"
+                appearance="raw"
+                class="ml-1"
+                @click="copyWayfLink(rowData)"
+              >
+                <oc-icon name="link" size="small" />
               </oc-button>
             </div>
           </template>
@@ -183,9 +203,18 @@ export default defineComponent({
       }
     })
 
+    const getTokenAtProvider = (token: string) => {
+      const url = new URL(configStore.serverUrl)
+      return `${token}@${url.host}`
+    }
+
     const encodeInviteToken = (token: string) => {
+      return btoa(getTokenAtProvider(token))
+    }
+
+    const generateWayfLink = (token: string) => {
       const url = new URL(configStore.serverUrl)
-      return btoa(`${token}@${url.host}`)
+      return `${url.origin}/open-cloud-mesh/wayf?token=${token}`
     }
 
     const generateToken = async () => {
@@ -228,7 +257,7 @@ export default defineComponent({
 
           const quickToken = encodeInviteToken(tokenInfo.token)
           lastCreatedToken.value = quickToken
-          navigator.clipboard.writeText(quickToken)
+          await navigator.clipboard.writeText(quickToken)
         }
       } catch (error) {
         lastCreatedToken.value = ''
@@ -267,17 +296,37 @@ export default defineComponent({
     const copyLink = (rowData: { item: { link: string; token: string } }) => {
       navigator.clipboard.writeText(rowData.item.link)
       showMessage({
-        title: $gettext('Invition link copied'),
+        title: $gettext('Invitation link copied'),
         desc: $gettext('Invitation link has been copied to your clipboard.')
       })
     }
+
+    const copyPlainToken = (rowData: { item: { token: string } }) => {
+      const tokenAtProvider = getTokenAtProvider(rowData.item.token)
+      navigator.clipboard.writeText(tokenAtProvider)
+      showMessage({
+        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))
       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: string } }) => {
+      const wayfLink = generateWayfLink(rowData.item.token)
+      navigator.clipboard.writeText(wayfLink)
+      showMessage({
+        title: $gettext('Invite link copied'),
+        desc: $gettext('Invite link has been copied to your clipboard.')
+      })
+    }
+
     const errorPopup = (error: Error) => {
       console.error(error)
       showErrorMessage({
@@ -327,6 +376,8 @@ export default defineComponent({
       sortedTokens,
       copyToken,
       copyLink,
+      copyPlainToken,
+      copyWayfLink,
       lastCreatedToken,
       fields,
       formatDate,
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 0000000000..2352985873
--- /dev/null
+++ b/packages/web-app-ocm/src/views/Wayf.vue
@@ -0,0 +1,304 @@
+<template>
+  <main id="wayf" class="flex flex-col h-screen overflow-auto bg-role-surface-container">
+    <div class="w-full h-full flex flex-col">
+      <div class="flex flex-col flex-1 min-h-0">
+        <!-- Header Section -->
+        <div class="flex items-center px-4 py-2 border-b shrink-0 min-h-[60px]">
+          <oc-icon name="cloud" size="large" class="mr-2" />
+          <h1 class="px-2 text-2xl font-semibold m-0" v-text="$gettext('Where Are You From?')" />
+          <oc-contextual-helper class="pl-1" v-bind="helperContent" />
+        </div>
+
+        <!-- No Token State -->
+        <no-content-message
+          v-if="!hasToken"
+          id="wayf-no-token"
+          icon="cloud"
+          class="text-center p-8"
+        >
+          <template #message>
+            <span v-text="$gettext('Token Required')" />
+          </template>
+          <template #callToAction>
+            <span
+              class="text-muted"
+              v-text="$gettext('You need a token for this feature to work.')"
+            />
+          </template>
+        </no-content-message>
+
+        <!-- Loading State -->
+        <div v-else-if="loading" class="text-center p-8">
+          <app-loading-spinner />
+          <p class="mt-2" v-text="$gettext('Loading providers...')" />
+        </div>
+
+        <!-- Error State -->
+        <no-content-message v-else-if="error" id="wayf-error" icon="alert-circle">
+          <template #message>
+            <span v-text="$gettext('Failed to load providers')" />
+          </template>
+          <template #callToAction>
+            <oc-button
+              appearance="filled"
+              variation="primary"
+              class="px-4 py-4"
+              @click="loadFederations"
+            >
+              <span v-text="$gettext('Retry')" />
+            </oc-button>
+          </template>
+        </no-content-message>
+
+        <!-- Main Content -->
+        <div v-else class="flex-1 grid grid-rows-[auto_1fr_auto] min-h-0">
+          <!-- Search Section -->
+          <div class="px-4 pb-2 border-b shrink-0 overflow-hidden min-h-[80px]">
+            <oc-text-input
+              v-model="query"
+              :label="$gettext('Search providers')"
+              type="text"
+              id="wayf-search"
+              name="search"
+              class="mb-2"
+            >
+              <template #icon>
+                <oc-icon name="magnify" size="medium" />
+              </template>
+            </oc-text-input>
+          </div>
+
+          <!-- Empty State (no federations or no matches) -->
+          <div
+            v-if="totalFilteredCount === 0"
+            class="flex items-center justify-center min-h-[300px] flex-1"
+          >
+            <no-content-message id="wayf-empty" class="mx-4 my-4" icon="magnify">
+              <template #message>
+                <span v-text="$gettext('No providers match your search')" />
+              </template>
+              <template #callToAction>
+                <span
+                  class="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="overflow-y-auto overflow-x-hidden min-h-[200px] p-2 grid gap-2 content-start"
+            :class="{
+              'grid-cols-1': totalFilteredCount > 0,
+              'md:grid-cols-1': totalFilteredCount > 0,
+              'lg:grid-cols-[repeat(auto-fill,minmax(280px,1fr))]': totalFilteredCount > 0
+            }"
+          >
+            <div
+              v-for="[federation, providers] in sortedFederationEntries"
+              :key="federation"
+              class="border rounded-xl overflow-hidden flex flex-col max-h-[280px] h-[280px]"
+            >
+              <div
+                class="flex items-center px-4 py-2 bg-role-surface-container-highest border-b min-h-[42px]"
+              >
+                <oc-icon name="shield-check" size="small" class="mr-2" />
+                <h2 class="text-lg font-semibold m-0 truncate flex-1" :title="federation">
+                  {{ federation }}
+                </h2>
+                <span
+                  class="ml-2 text-xs font-medium bg-role-surface-container px-2 py-0.5 rounded-xl whitespace-nowrap shrink-0"
+                >
+                  {{ providers.length }}
+                  {{ providers.length === 1 ? $gettext('provider') : $gettext('providers') }}
+                </span>
+              </div>
+              <div class="overflow-y-auto flex-1 min-h-0">
+                <oc-button
+                  v-for="p in providers"
+                  :key="p.fqdn"
+                  appearance="raw"
+                  class="w-full px-2 py-2 border-b last:border-b-0 text-left transition-colors hover:bg-role-surface-container-highest"
+                  :disabled="loading"
+                  :aria-label="$gettext('Select provider %{name}', { name: p.name })"
+                  @click="navigateToProvider(p, token, providerDomain)"
+                >
+                  <div class="flex items-center justify-center">
+                    <div class="flex flex-col flex-1 text-center">
+                      <div class="font-semibold mb-0.5 text-base">{{ p.name }}</div>
+                      <div class="text-sm text-muted font-mono">{{ p.fqdn }}</div>
+                    </div>
+                  </div>
+                </oc-button>
+              </div>
+            </div>
+          </div>
+
+          <!-- Manual Provider Section -->
+          <div
+            class="px-4 pt-4 border-t overflow-y-auto overflow-x-hidden min-h-[235px] max-h-[350px] flex flex-col"
+            style="
+              box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.04);
+              background-color: var(--oc-role-surface-container-highest);
+            "
+          >
+            <div class="flex items-center mb-2">
+              <oc-icon name="cloud" size="medium" class="mr-2" />
+              <h3 class="text-base font-semibold m-0" v-text="$gettext('Manual Provider Entry')" />
+            </div>
+            <oc-text-input
+              v-model="manualProvider"
+              :label="$gettext('Enter provider domain manually')"
+              type="text"
+              id="wayf-manual"
+              name="manual"
+              class="mb-2"
+              @keyup.enter="goToManualProvider"
+            >
+              <template #icon>
+                <oc-icon name="cloud" size="medium" />
+              </template>
+            </oc-text-input>
+            <oc-button
+              appearance="filled"
+              variation="primary"
+              class="mt-2 px-4 py-4 min-w-[120px]"
+              :disabled="!manualProvider.trim() || loading"
+              @click="goToManualProvider"
+            >
+              <span v-text="$gettext('Continue')" />
+            </oc-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script lang="ts">
+import { ref, computed, onMounted, defineComponent } from 'vue'
+import { useRoute } from 'vue-router'
+import { useGettext } from 'vue3-gettext'
+import { NoContentMessage, AppLoadingSpinner } from '@opencloud-eu/web-pkg'
+import { useWayf } from '../composables/useWayf'
+import type { WayfProvider } from '../types/wayf'
+
+export default defineComponent({
+  components: {
+    NoContentMessage,
+    AppLoadingSpinner
+  },
+  setup() {
+    const route = useRoute()
+    const { $gettext } = useGettext()
+
+    const token = computed(() => (route.query.token as string) || '')
+    const hasToken = computed(() => token.value.trim().length > 0)
+
+    // providerDomain is always domain, the domain where this WAYF page is hosted
+    const providerDomain = computed(() => {
+      return window.location.hostname
+    })
+
+    const query = ref('')
+    const manualProvider = ref('')
+
+    const {
+      loading,
+      error,
+      federations,
+      navigateToProvider,
+      navigateToManualProvider,
+      loadFederations,
+      filterProviders
+    } = useWayf()
+
+    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<Record<string, WayfProvider[]>>(() => {
+      const result: Record<string, WayfProvider[]> = {}
+      const currentFederations = federations.value || {}
+      Object.entries(currentFederations).forEach(([name, providers]) => {
+        const filtered = filterProviders(providers as WayfProvider[], query.value)
+        if (filtered.length > 0) {
+          result[name] = filtered
+        }
+      })
+      return result
+    })
+
+    const totalFilteredCount = computed(() => {
+      return Object.values(filteredFederations.value).reduce((sum, arr) => sum + arr.length, 0)
+    })
+
+    const sortedFederationEntries = computed(() => {
+      return Object.entries(filteredFederations.value).sort(([a], [b]) => a.localeCompare(b))
+    })
+
+    const goToManualProvider = async () => {
+      await navigateToManualProvider(manualProvider.value, token.value, providerDomain.value)
+    }
+
+    onMounted(() => {
+      loadFederations()
+    })
+
+    return {
+      token,
+      hasToken,
+      providerDomain,
+      query,
+      manualProvider,
+      loading,
+      error,
+      federations,
+      helperContent,
+      filteredFederations,
+      totalFilteredCount,
+      sortedFederationEntries,
+      navigateToProvider,
+      loadFederations,
+      goToManualProvider
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+@media (max-width: 960px) {
+  #wayf .grid {
+    grid-template-columns: 1fr !important;
+  }
+}
+
+@media (max-height: 600px) {
+  #wayf .min-h-\[200px\] {
+    min-height: 120px;
+  }
+
+  #wayf .max-h-\[280px\] {
+    max-height: 200px;
+  }
+
+  #wayf .h-\[280px\] {
+    height: 200px;
+  }
+
+  #wayf .min-h-\[220px\] {
+    min-height: 200px;
+  }
+
+  #wayf .max-h-\[330px\] {
+    max-height: 250px;
+  }
+}
+</style>