diff --git a/app/ClientLayout.tsx b/app/ClientLayout.tsx
index e65f7a34..4463edb6 100644
--- a/app/ClientLayout.tsx
+++ b/app/ClientLayout.tsx
@@ -9,6 +9,7 @@ import { usePathname } from 'next/navigation'
 import background from './Assets/Images/Background.svg'
 import Providers from './components/signing/Providers'
 import AppDidInitializer from './components/AppDidInitializer'
+import { AppDidProvider } from './contexts/AppDidContext'
 
 export default function ClientLayout({
   children
@@ -28,33 +29,35 @@ export default function ClientLayout({
       <ThemeProvider theme={Theme}>
         <CssBaseline />
         <Providers>
-          <StepProvider>
-            <NavBar />
-            <Box
-              component='main'
-              sx={{
-                flexGrow: 1,
-                minHeight: `calc(100vh - 315px)`,
-                backgroundImage: pathname === '/' ? `url(${background.src})` : 'none',
-                backgroundRepeat: 'no-repeat',
-                backgroundSize: 'cover',
-                backgroundPosition: 'center',
-                pb: '60px',
-                backgroundBlendMode: pathname === '/' ? 'overlay' : 'normal',
-                backgroundColor:
-                  pathname === '/'
-                    ? {
-                        xs: 'rgba(255, 255, 255, 0.8)',
-                        md: 'rgba(255, 255, 255, 0.85)'
-                      }
-                    : '#F0F4F8'
-              }}
-            >
-              <AppDidInitializer />
-              {children}
-            </Box>
-            <Footer />
-          </StepProvider>
+          <AppDidProvider>
+            <StepProvider>
+              <NavBar />
+              <Box
+                component='main'
+                sx={{
+                  flexGrow: 1,
+                  minHeight: `calc(100vh - 315px)`,
+                  backgroundImage: pathname === '/' ? `url(${background.src})` : 'none',
+                  backgroundRepeat: 'no-repeat',
+                  backgroundSize: 'cover',
+                  backgroundPosition: 'center',
+                  pb: '60px',
+                  backgroundBlendMode: pathname === '/' ? 'overlay' : 'normal',
+                  backgroundColor:
+                    pathname === '/'
+                      ? {
+                          xs: 'rgba(255, 255, 255, 0.8)',
+                          md: 'rgba(255, 255, 255, 0.85)'
+                        }
+                      : '#F0F4F8'
+                }}
+              >
+                <AppDidInitializer />
+                {children}
+              </Box>
+              <Footer />
+            </StepProvider>
+          </AppDidProvider>
         </Providers>
       </ThemeProvider>
     </body>
diff --git a/app/contexts/AppDidContext.tsx b/app/contexts/AppDidContext.tsx
new file mode 100644
index 00000000..3c845d59
--- /dev/null
+++ b/app/contexts/AppDidContext.tsx
@@ -0,0 +1,59 @@
+'use client'
+
+import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react'
+
+interface AppDidContextType {
+  appInstanceDid: any
+  hasZcap: boolean
+  zcapInfo: any
+}
+
+const AppDidContext = createContext<AppDidContextType | undefined>(undefined)
+
+interface AppDidProviderProps {
+  children: ReactNode
+}
+
+export function AppDidProvider({ children }: AppDidProviderProps) {
+  const [zcapInfo, setZcapInfo] = useState<any>(null)
+  const [appInstanceDid, setAppInstanceDid] = useState<any>(null)
+
+  useEffect(() => {
+    // Check for stored zCap on mount
+    const storedZcap = localStorage.getItem('delegatedWasZcap')
+    const storedAppInstanceDid = localStorage.getItem('AppInstanceDID')
+    if (storedZcap) {
+      setZcapInfo(storedZcap)
+    }
+    if (storedAppInstanceDid) {
+      try {
+        const appInstanceDidObject = JSON.parse(storedAppInstanceDid)
+        setAppInstanceDid(appInstanceDidObject)
+      } catch (error) {
+        console.error('Error parsing stored AppInstanceDID:', error)
+      }
+    }
+  }, [])
+
+  const hasZcap = !!zcapInfo
+
+  const value: AppDidContextType = {
+    appInstanceDid,
+    hasZcap,
+    zcapInfo,
+  }
+
+  return (
+    <AppDidContext.Provider value={value}>
+      {children}
+    </AppDidContext.Provider>
+  )
+}
+
+export function useAppDid() {
+  const context = useContext(AppDidContext)
+  if (context === undefined) {
+    throw new Error('useAppDid must be used within an AppDidProvider')
+  }
+  return context
+}
diff --git a/app/credentialForm/form/StepContext.tsx b/app/credentialForm/form/StepContext.tsx
index 06e16e92..3088b759 100644
--- a/app/credentialForm/form/StepContext.tsx
+++ b/app/credentialForm/form/StepContext.tsx
@@ -25,7 +25,7 @@ const StepContext = createContext<StepContextType>({
   handleNext: async () => {},
   handleBack: () => {},
   handleSkip: () => {},
-  setUploadImageFn: () => () => {}
+  setUploadImageFn: (_fn: () => Promise<void>) => {}
 })
 
 export const StepProvider = ({ children }: { children: React.ReactNode }) => {
@@ -116,17 +116,25 @@ export const StepProvider = ({ children }: { children: React.ReactNode }) => {
     setActiveStep(prevStep => prevStep + 1)
   }, [])
 
+  // Ensure passing function as value, not as state updater
+  const setUploadImageFnSafe = useCallback(
+    (fn: () => Promise<void>) => {
+      setUploadImageFn(() => fn)
+    },
+    []
+  )
+
   const contextValue = useMemo(
     () => ({
       activeStep,
       setActiveStep,
       handleNext,
       handleBack,
-      setUploadImageFn,
+      setUploadImageFn: setUploadImageFnSafe,
       loading,
       handleSkip
     }),
-    [activeStep, handleNext, handleBack, setUploadImageFn, loading, handleSkip]
+    [activeStep, handleNext, handleBack, setUploadImageFnSafe, loading, handleSkip]
   )
 
   return <StepContext.Provider value={contextValue}>{children}</StepContext.Provider>
diff --git a/app/credentialForm/form/Steps/Step3_uploadEvidence.tsx b/app/credentialForm/form/Steps/Step3_uploadEvidence.tsx
index 447e8ae2..346f167f 100644
--- a/app/credentialForm/form/Steps/Step3_uploadEvidence.tsx
+++ b/app/credentialForm/form/Steps/Step3_uploadEvidence.tsx
@@ -5,31 +5,36 @@ import { Box, Typography, styled, Card } from '@mui/material'
 import { useDropzone } from 'react-dropzone'
 
 import FileListDisplay from '../../../components/FileList'
-import { GoogleDriveStorage, uploadToGoogleDrive } from '@cooperation/vc-storage'
+import { GoogleDriveStorage } from '@cooperation/vc-storage'
 import useGoogleDrive from '../../../hooks/useGoogleDrive'
 import { useStepContext } from '../StepContext'
+import { useAppDid } from '../../../contexts/AppDidContext'
 import LoadingOverlay from '../../../components/Loading/LoadingOverlay'
 import { TasksVector, SVGUplaodLink, SVGUploadMedia } from '../../../Assets/SVGs'
 import { StepTrackShape } from '../fromTexts & stepTrack/StepTrackShape'
 import { FileItem } from '../types/Types'
 import LinkAdder from '../../../components/LinkAdder'
+import { useHandleUpload } from '../../../hooks/handleUpload'
+import { useStorageBackend } from '../../../hooks/useStorageBackend'
+import { uploadEvidenceWithStorage } from '../../../utils/uploadEvidence'
 
-interface TabPanelProps {
+export interface TabPanelProps {
   children?: React.ReactNode
   index: number
   value: number
 }
 
-interface LinkItem {
+export interface LinkItem {
   id: string
   name: string
   url: string
 }
 
-interface PortfolioItem {
+export interface PortfolioItem {
   name: string
   url: string
   googleId?: string
+  wasId?: string
 }
 
 interface FileUploadAndListProps {
@@ -63,6 +68,7 @@ const FileUploadAndList: React.FC<FileUploadAndListProps> = ({
   const [showLinkAdder, setShowLinkAdder] = useState(false)
   const [showMediaAdder, setShowMediaAdder] = useState(false)
   const { storage } = useGoogleDrive()
+  const { appInstanceDid, hasZcap } = useAppDid()
   const [files, setFiles] = useState<FileItem[]>([...selectedFiles])
   const [links, setLinks] = useState<LinkItem[]>([
     { id: crypto.randomUUID(), name: '', url: '' }
@@ -93,19 +99,22 @@ const FileUploadAndList: React.FC<FileUploadAndListProps> = ({
       // Update portfolio items order in form
       const currentPortfolio = watch<PortfolioItem[]>('portfolio') || []
       const newPortfolioOrder = reorderedFiles
-        .filter(file => file.googleId) // Only include uploaded files
+        .filter(file => file.googleId || file.wasId) // Only include uploaded files
         .map(file => ({
           name: file.name,
-          url: `https://drive.google.com/uc?export=view&id=${file.googleId}`,
-          googleId: file.googleId
+          url:
+            file.wasId || `https://drive.google.com/uc?export=view&id=${file.googleId}`,
+          googleId: file.googleId,
+          wasId: file.wasId
         }))
 
       // If there's a featured file (first in the list), update the evidenceLink
-      if (reorderedFiles[0]?.googleId) {
-        setValue(
-          'evidenceLink',
-          `https://drive.google.com/uc?export=view&id=${reorderedFiles[0].googleId}`
-        )
+      if (reorderedFiles[0]?.googleId || reorderedFiles[0]?.wasId) {
+        const featuredFile = reorderedFiles[0]
+        const evidenceUrl =
+          featuredFile.wasId ||
+          `https://drive.google.com/uc?export=view&id=${featuredFile.googleId}`
+        setValue('evidenceLink', evidenceUrl)
       }
 
       // Update the portfolio with the new order
@@ -114,56 +123,48 @@ const FileUploadAndList: React.FC<FileUploadAndListProps> = ({
     [setValue, watch, setSelectedFiles]
   )
 
-  const handleUpload = useCallback(async () => {
-    try {
-      if (selectedFiles.length === 0) return
-      const filesToUpload = selectedFiles.filter(
-        fileItem => !fileItem.uploaded && fileItem.file && fileItem.name
-      )
-      if (filesToUpload.length === 0) return
-      const uploadedFiles = await Promise.all(
-        filesToUpload.map(async (fileItem, index) => {
-          const newFile = new File([fileItem.file], fileItem.name, {
-            type: fileItem.file.type
-          })
-          const uploadedFile = await storage?.uploadBinaryFile({
-            file: newFile
-          })
-          const fileId = (uploadedFile as { id: string }).id
-          return {
-            ...fileItem,
-            googleId: fileId,
-            uploaded: true,
-            isFeatured: index === 0 && !watch<string>('evidenceLink')
-          }
-        })
-      )
-      const featuredFile = uploadedFiles.find(file => file.isFeatured)
-      if (featuredFile?.googleId) {
-        setValue(
-          'evidenceLink',
-          `https://drive.google.com/uc?export=view&id=${featuredFile.googleId}`
-        )
-      }
-      const currentPortfolio = watch<PortfolioItem[]>('portfolio') || []
-      const newPortfolioEntries: PortfolioItem[] = uploadedFiles.map(file => ({
-        name: file.name,
-        url: `https://drive.google.com/uc?export=view&id=${file.googleId}`,
-        googleId: file.googleId
-      }))
-      setValue('portfolio', [...currentPortfolio, ...newPortfolioEntries])
-      setSelectedFiles(prevFiles =>
-        prevFiles.map(file => {
-          const uploadedFile = uploadedFiles.find(f => f.name === file.name)
-          return uploadedFile
-            ? { ...file, googleId: uploadedFile.googleId, uploaded: true }
-            : file
-        })
-      )
-    } catch (error) {
-      console.error('Error uploading files:', error)
+  const handleUpload = useHandleUpload({
+    selectedFiles: selectedFiles as FileItem[],
+    setValue,
+    setSelectedFiles,
+    watch,
+    appInstanceDid,
+    hasZcap,
+    storage: storage as GoogleDriveStorage,
+    useWas: true
+  })
+
+  const { backend, storageClient, error: storageError } = useStorageBackend()
+
+  const handleUploadUnified = useCallback(async () => {
+    if (!storageClient) {
+      console.error('No storage backend available:', storageError)
+      alert(storageError || 'No storage backend available')
+      return
     }
-  }, [selectedFiles, setValue, setSelectedFiles, storage, watch])
+    await uploadEvidenceWithStorage({
+      selectedFiles: selectedFiles as FileItem[],
+      setValue,
+      setSelectedFiles,
+      watch,
+      backend: backend === 'was' ? 'was' : 'drive',
+      upload: storageClient.upload
+    })
+  }, [
+    storageClient,
+    storageError,
+    selectedFiles,
+    setValue,
+    setSelectedFiles,
+    watch,
+    backend
+  ])
+
+  // make handleUpload available in StepContext
+  useEffect(() => {
+    setUploadImageFn(handleUpload)
+  }, [handleUpload, setUploadImageFn])
+
   const handleAddLink = useCallback(() => {
     setLinks(prev => [...prev, { id: crypto.randomUUID(), name: '', url: '' }])
   }, [])
@@ -210,43 +211,51 @@ const FileUploadAndList: React.FC<FileUploadAndListProps> = ({
     },
     [setSelectedFiles]
   )
+  const matchesId = useCallback(
+    (file: FileItem, id: string) =>
+      file.googleId === id || file.wasId === id || file.id === id,
+    []
+  )
+  const withoutId = useCallback(
+    (list: FileItem[], id: string) => list.filter(file => !matchesId(file, id)),
+    [matchesId]
+  )
+  const wasFirstFile = useCallback(
+    (list: FileItem[], id: string) => (list[0] ? matchesId(list[0], id) : false),
+    [matchesId]
+  )
   const handleDelete = useCallback(
     (event: React.MouseEvent, id: string) => {
       event.stopPropagation()
-      let isFeaturedFileDeleted = false
-      setFiles(prevFiles => {
-        const updatedFiles = prevFiles.filter(
-          file => file.googleId !== id && file.id !== id
-        )
-        isFeaturedFileDeleted = prevFiles[0]?.googleId === id || prevFiles[0]?.id === id
-        if (isFeaturedFileDeleted && updatedFiles.length > 0) {
-          updatedFiles[0].isFeatured = true
+      let deletedFeatured = false
+      setFiles(prev => {
+        const updated = withoutId(prev, id)
+        deletedFeatured = wasFirstFile(prev, id)
+        if (deletedFeatured && updated.length > 0) {
+          updated[0].isFeatured = true
         }
-        return updatedFiles
+        return updated
       })
-      setSelectedFiles(prevFiles =>
-        prevFiles.filter(file => file.googleId !== id && file.id !== id)
-      )
+      setSelectedFiles(prev => withoutId(prev, id))
       const currentPortfolio = watch<PortfolioItem[]>('portfolio') || []
-      let updatedPortfolio = currentPortfolio.filter(file => file.googleId !== id)
+      let updatedPortfolio = currentPortfolio.filter(
+        p => p.googleId !== id && p.wasId !== id
+      )
       const newFeaturedFile = files[1]
-      if (isFeaturedFileDeleted && newFeaturedFile?.googleId) {
-        setValue(
-          'evidenceLink',
+      if (deletedFeatured && (newFeaturedFile?.googleId || newFeaturedFile?.wasId)) {
+        const evidenceUrl =
+          newFeaturedFile.wasId ||
           `https://drive.google.com/uc?export=view&id=${newFeaturedFile.googleId}`
-        )
+        setValue('evidenceLink', evidenceUrl)
         updatedPortfolio = updatedPortfolio.filter(
-          file => file.googleId !== newFeaturedFile.googleId
+          p =>
+            p.googleId !== newFeaturedFile.googleId && p.wasId !== newFeaturedFile.wasId
         )
       }
       setValue('portfolio', updatedPortfolio)
     },
-    [setValue, watch, files, setSelectedFiles]
+    [setValue, watch, files, setSelectedFiles, withoutId, wasFirstFile]
   )
-  useEffect(() => {
-    // @ts-ignore-next-line
-    setUploadImageFn(() => handleUpload)
-  }, [handleUpload, setUploadImageFn])
 
   // Drag and drop functionality
   const onDrop = useCallback(
diff --git a/app/credentialForm/form/types/Types.ts b/app/credentialForm/form/types/Types.ts
index 614b730a..267fa05e 100644
--- a/app/credentialForm/form/types/Types.ts
+++ b/app/credentialForm/form/types/Types.ts
@@ -43,6 +43,7 @@ interface Portfolio {
   name: string
   url: string
   googleId?: string
+  wasId?: string
 }
 
 // Interfaces for the form fields
@@ -84,4 +85,5 @@ export interface FileItem {
   uploaded: boolean
   fileExtension: string
   googleId?: string
+  wasId?: string
 }
diff --git a/app/global.d.ts b/app/global.d.ts
new file mode 100644
index 00000000..92190b61
--- /dev/null
+++ b/app/global.d.ts
@@ -0,0 +1,4 @@
+declare module '@digitalcredentials/ed25519-signature-2020';
+declare module '@digitalcredentials/ezcap';
+declare module '@digitalcredentials/jsonld-signatures';
+declare module '@digitalcredentials/http-client';
diff --git a/app/hooks/handleUpload.ts b/app/hooks/handleUpload.ts
new file mode 100644
index 00000000..fd84998e
--- /dev/null
+++ b/app/hooks/handleUpload.ts
@@ -0,0 +1,50 @@
+import { useCallback } from 'react'
+import { FileItem } from '../credentialForm/form/types/Types'
+import { GoogleDriveStorage } from '@cooperation/vc-storage'
+import { uploadEvidence } from '../utils/uploadEvidence'
+
+interface HandleUploadOptions {
+  selectedFiles: FileItem[]
+  setValue: (field: string, value: any, options?: any) => void
+  setSelectedFiles: React.Dispatch<React.SetStateAction<FileItem[]>>
+  watch: <T>(name: string) => T
+  appInstanceDid?: any
+  hasZcap?: boolean
+  storage?: GoogleDriveStorage
+  useWas?: boolean
+}
+
+export function useHandleUpload({
+  selectedFiles,
+  setValue,
+  setSelectedFiles,
+  watch,
+  appInstanceDid,
+  hasZcap,
+  storage,
+  useWas = true,
+}: HandleUploadOptions) {
+  return useCallback(async () => {
+    try {
+      if (selectedFiles.length === 0) return
+
+      const filesToUpload = selectedFiles.filter(
+        f => !f.uploaded && f.file && f.name
+      )
+      if (filesToUpload.length === 0) return
+
+      await uploadEvidence({
+        selectedFiles: filesToUpload,
+        setValue,
+        setSelectedFiles,
+        watch,
+        appInstanceDid,
+        hasZcap,
+        storage,
+        useWas,
+      })
+    } catch (error) {
+      console.error('❌ Error uploading files:', error)
+    }
+  }, [selectedFiles, setValue, setSelectedFiles, watch, appInstanceDid, hasZcap, storage, useWas])
+}
diff --git a/app/hooks/useStorageBackend.ts b/app/hooks/useStorageBackend.ts
new file mode 100644
index 00000000..4bf3ee0a
--- /dev/null
+++ b/app/hooks/useStorageBackend.ts
@@ -0,0 +1,64 @@
+import { useMemo } from 'react'
+import { getStoredZcap } from '../utils/zcapStorage'
+import { useAppDid } from '../contexts/AppDidContext'
+import useGoogleDrive from './useGoogleDrive'
+import { createStorage } from '@cooperation/vc-storage/dist/models/StorageContext'
+
+type BackendKind = 'was' | 'drive' | 'none'
+
+interface StorageClient {
+  kind: BackendKind
+  upload: (args: { key: string; file: Blob | File }) => Promise<string>
+  raw?: any
+}
+
+export function useStorageBackend(): {
+  backend: BackendKind
+  storageClient?: StorageClient
+  error?: string
+} {
+  const { appInstanceDid, hasZcap } = useAppDid()
+  const { storage: drive } = useGoogleDrive()
+
+  return useMemo(() => {
+    try {
+      const stored = getStoredZcap()
+      const capability =
+        typeof stored?.zcap === 'string' ? JSON.parse(stored.zcap) : stored?.zcap
+      const canUseWas = Boolean(hasZcap && appInstanceDid && capability)
+
+      if (canUseWas) {
+        const was = createStorage('wasZcap', { appInstance: appInstanceDid, capability })
+        const client: StorageClient = {
+          kind: 'was',
+          upload: async ({ key, file }) => was.upload({ key, file }),
+          raw: was
+        }
+        return { backend: 'was', storageClient: client }
+      }
+
+      if (drive) {
+        const client: StorageClient = {
+          kind: 'drive',
+          upload: async ({ key, file }) => {
+            const newFile = new File([file], key, {
+              type: (file as File).type || 'application/octet-stream'
+            })
+            const uploaded = await drive.uploadBinaryFile({ file: newFile })
+            if (!uploaded?.id) throw new Error('Drive upload failed: invalid response')
+            return uploaded.id
+          },
+          raw: drive
+        }
+        return { backend: 'drive', storageClient: client }
+      }
+
+      return { backend: 'none', error: 'No storage backend available' }
+    } catch (e: any) {
+      return {
+        backend: 'none',
+        error: e?.message || 'Failed to initialize storage backend'
+      }
+    }
+  }, [appInstanceDid, hasZcap, drive])
+}
diff --git a/app/lib/exchanges.ts b/app/lib/exchanges.ts
index 5be96a9f..d79e96f2 100644
--- a/app/lib/exchanges.ts
+++ b/app/lib/exchanges.ts
@@ -21,10 +21,9 @@ export async function pollExchange({
       try {
         const zcapStorage = {
           zcap: vp.zcap,
-          appInstanceDid: vp.appInstanceDid,
           timestamp: Date.now()
         };
-        localStorage.setItem('zcap', JSON.stringify(zcapStorage));
+        localStorage.setItem('delegatedWasZcap', JSON.stringify(zcapStorage));
         onFetchVP(vp)
         stopPolling()
       } catch (error) {
diff --git a/app/recommendations/[id]/RecommandationForm/Steps/Step3.tsx b/app/recommendations/[id]/RecommandationForm/Steps/Step3.tsx
index 341167fc..c929f888 100644
--- a/app/recommendations/[id]/RecommandationForm/Steps/Step3.tsx
+++ b/app/recommendations/[id]/RecommandationForm/Steps/Step3.tsx
@@ -8,11 +8,13 @@ import FileListDisplay from '../../../../components/FileList'
 import { GoogleDriveStorage, uploadToGoogleDrive } from '@cooperation/vc-storage'
 import useGoogleDrive from '../../../../hooks/useGoogleDrive'
 import { useStepContext } from '../../../../credentialForm/form/StepContext'
+import { useAppDid } from '../../../../contexts/AppDidContext'
 import LoadingOverlay from '../../../../components/Loading/LoadingOverlay'
 import { TasksVector, SVGUplaodLink, SVGUploadMedia } from '../../../../Assets/SVGs'
 import { FileItem } from '../../../../credentialForm/form/types/Types'
 import LinkAdder from '../../../../components/LinkAdder'
 import { formLabelStyles } from '../../../../components/Styles/appStyles'
+import { useHandleUpload } from '../../../../hooks/handleUpload'
 
 interface TabPanelProps {
   children?: React.ReactNode
@@ -60,6 +62,7 @@ const FileUploadAndList: React.FC<FileUploadAndListProps> = ({
   watch
 }) => {
   const { loading, setUploadImageFn } = useStepContext()
+  const { appInstanceDid, hasZcap } = useAppDid()
   const [showLinkAdder, setShowLinkAdder] = useState(false)
   const { storage } = useGoogleDrive()
   const [files, setFiles] = useState<FileItem[]>([...selectedFiles])
@@ -113,56 +116,16 @@ const FileUploadAndList: React.FC<FileUploadAndListProps> = ({
     [setValue, watch, setSelectedFiles]
   )
 
-  const handleUpload = useCallback(async () => {
-    try {
-      if (selectedFiles.length === 0) return
-      const filesToUpload = selectedFiles.filter(
-        fileItem => !fileItem.uploaded && fileItem.file && fileItem.name
-      )
-      if (filesToUpload.length === 0) return
-      const uploadedFiles = await Promise.all(
-        filesToUpload.map(async (fileItem, index) => {
-          const newFile = new File([fileItem.file], fileItem.name, {
-            type: fileItem.file.type
-          })
-          const uploadedFile = await storage?.uploadBinaryFile({
-            file: newFile
-          })
-          const fileId = (uploadedFile as { id: string }).id
-          return {
-            ...fileItem,
-            googleId: fileId,
-            uploaded: true,
-            isFeatured: index === 0 && !watch<string>('evidenceLink')
-          }
-        })
-      )
-      const featuredFile = uploadedFiles.find(file => file.isFeatured)
-      if (featuredFile?.googleId) {
-        setValue(
-          'evidenceLink',
-          `https://drive.google.com/uc?export=view&id=${featuredFile.googleId}`
-        )
-      }
-      const currentPortfolio = watch<PortfolioItem[]>('portfolio') || []
-      const newPortfolioEntries: PortfolioItem[] = uploadedFiles.map(file => ({
-        name: file.name,
-        url: `https://drive.google.com/uc?export=view&id=${file.googleId}`,
-        googleId: file.googleId
-      }))
-      setValue('portfolio', [...currentPortfolio, ...newPortfolioEntries])
-      setSelectedFiles(prevFiles =>
-        prevFiles.map(file => {
-          const uploadedFile = uploadedFiles.find(f => f.name === file.name)
-          return uploadedFile
-            ? { ...file, googleId: uploadedFile.googleId, uploaded: true }
-            : file
-        })
-      )
-    } catch (error) {
-      console.error('Error uploading files:', error)
-    }
-  }, [selectedFiles, setValue, setSelectedFiles, storage, watch])
+  const handleUpload = useHandleUpload({
+    selectedFiles: selectedFiles as FileItem[],
+    setValue,
+    setSelectedFiles,
+    watch,
+    appInstanceDid,
+    hasZcap,
+    storage: storage as GoogleDriveStorage,
+    useWas: true,
+  })
   const handleAddLink = useCallback(() => {
     setLinks(prev => [...prev, { id: crypto.randomUUID(), name: '', url: '' }])
   }, [])
@@ -243,8 +206,7 @@ const FileUploadAndList: React.FC<FileUploadAndListProps> = ({
     [setValue, watch, files, setSelectedFiles]
   )
   useEffect(() => {
-    // @ts-ignore-next-line
-    setUploadImageFn(() => handleUpload)
+    setUploadImageFn(handleUpload)
   }, [handleUpload, setUploadImageFn])
 
   // Drag and drop functionality
diff --git a/app/testWasUpload.js b/app/testWasUpload.js
new file mode 100644
index 00000000..1bf500c2
--- /dev/null
+++ b/app/testWasUpload.js
@@ -0,0 +1,90 @@
+import { Ed25519VerificationKey2020 } from '@digitalcredentials/ed25519-verification-key-2020'
+import { Ed25519Signature2020 } from '@digitalcredentials/ed25519-signature-2020'
+import { ZcapClient } from '@digitalcredentials/ezcap'
+
+// ---- Replace with your actual zcap + appInstanceDid ----
+const STORED = {
+  zcap: {
+    "@context": [
+      "https://w3id.org/zcap/v1",
+      "https://w3id.org/security/suites/ed25519-2020/v1"
+    ],
+    "id": "urn:uuid:2fdfc092-0dd9-4042-baf0-6a793c010b15",
+    "controller": "did:key:z6MknJ51X2G3VyzJ5VwxwESNJYKonotbLsXYjFR1oHnxYkHJ",
+    "parentCapability": "urn:zcap:root:https%3A%2F%2Fancient-log-copyrights-guardian.trycloudflare.com%2Fspace%2F64f5f687-ec3e-4a37-9f74-482f76cdf033",
+    "invocationTarget": "https://ancient-log-copyrights-guardian.trycloudflare.com/space/64f5f687-ec3e-4a37-9f74-482f76cdf033",
+    "expires": "2025-09-20T10:26:09.029Z",
+    "allowedAction": [
+      "GET",
+      "POST",
+      "PUT",
+      "DELETE"
+    ],
+    "proof": {
+      "type": "Ed25519Signature2020",
+      "created": "2025-09-10T10:29:31Z",
+      "verificationMethod": "did:key:z6Mkh5Ea5YT4GPeCf4scpRK2vYhuU7mnysT3vVTiKvAJarTU#z6Mkh5Ea5YT4GPeCf4scpRK2vYhuU7mnysT3vVTiKvAJarTU",
+      "proofPurpose": "capabilityDelegation",
+      "capabilityChain": [
+        "urn:zcap:root:https%3A%2F%2Fancient-log-copyrights-guardian.trycloudflare.com%2Fspace%2F64f5f687-ec3e-4a37-9f74-482f76cdf033"
+      ],
+      "proofValue": "z4UGdP7TcqCLdakK9RN4we1ZfkpQP7U7GHjbPyz77d7JzUwdTag9VqND8LN5SeFqzZPPR6sJQKJWt9pg5kRh4GTQd"
+    }
+  },
+  appInstance: {
+    "controller": "did:key:z6Mkt4T2Wr8qKHKbte2JL316vbuWg3ozN2oBWpVWqZVKNhYH",
+    "id": "did:key:z6Mkt4T2Wr8qKHKbte2JL316vbuWg3ozN2oBWpVWqZVKNhYH#z6Mkt4T2Wr8qKHKbte2JL316vbuWg3ozN2oBWpVWqZVKNhYH",
+    "publicKeyMultibase": "z6Mkt4T2Wr8qKHKbte2JL316vbuWg3ozN2oBWpVWqZVKNhYH",
+    "privateKeyMultibase": "zrv2yAMHgXxkGVmqmvwVJ4NxxeJUdZNY5jQupxBZXxY7ZhBnERr9CmCiZ2Mbx6ZaoKQBCJfLLVKMT2dypEzi314NmqP"
+  }
+}
+// ----------------------------------------------------------------
+
+async function main() {
+  console.log('Starting WAS upload (local test)...')
+
+  const { zcap, appInstance } = STORED
+  console.log('Using appInstance DID:', appInstance.id)
+
+  // signer
+  const key = await Ed25519VerificationKey2020.from(appInstance)
+  const invocationSigner = key.signer()
+
+  const zcapClient = new ZcapClient({
+    SuiteClass: Ed25519Signature2020,
+    invocationSigner,
+  })
+
+  const blob = new Blob(['Hello local WAS upload!'])
+
+  // base = /space/:uuid
+  const baseUrl = zcap.invocationTarget
+  console.log('Zcap target:', baseUrl)
+
+  // final URL = /space/:uuid/:name
+  const wasUrl = `${baseUrl}/${encodeURIComponent('test-local.txt')}`
+  console.log('Uploading to:', wasUrl)
+
+  try {
+    console.log('zcap:', zcap)
+    console.log('Attempting upload...')
+
+    const response = await zcapClient.request({
+      url: wasUrl,
+      capability: zcap,
+      method: 'PUT',
+      action: 'PUT',
+      blob,
+    })
+
+    console.log('Upload complete!')
+    console.log('Response:', response)
+  } catch (err) {
+    console.error('Upload failed:', err)
+  }
+}
+
+main().catch(err => {
+  console.error('Script crashed:', err)
+  process.exit(1)
+})
diff --git a/app/types/vc-storage.d.ts b/app/types/vc-storage.d.ts
new file mode 100644
index 00000000..8d99d65d
--- /dev/null
+++ b/app/types/vc-storage.d.ts
@@ -0,0 +1,12 @@
+declare module '@cooperation/vc-storage/dist/models/StorageContext' {
+  export type StorageKind = 'googleDrive' | 'was' | 'wasZcap'
+  export type GoogleDriveOptions = { accessToken: string }
+  export type WASOptions = { signer: any; spaceId: string }
+  export type WASZcapOptions = { appInstance: any; capability: any }
+
+  export function createStorage(kind: 'googleDrive', options: GoogleDriveOptions): any
+  export function createStorage(kind: 'was', options: WASOptions): any
+  export function createStorage(kind: 'wasZcap', options: WASZcapOptions): any
+}
+
+
diff --git a/app/utils/uploadEvidence.ts b/app/utils/uploadEvidence.ts
new file mode 100644
index 00000000..0ce1fe90
--- /dev/null
+++ b/app/utils/uploadEvidence.ts
@@ -0,0 +1,198 @@
+import { getStoredZcap } from './zcapStorage'
+import { FileItem } from '../credentialForm/form/types/Types'
+import { GoogleDriveStorage } from '@cooperation/vc-storage'
+import { createStorage } from '@cooperation/vc-storage'
+
+export interface PortfolioItem {
+  name: string
+  url: string
+  wasId?: string
+  googleId?: string
+}
+
+interface UploadEvidenceOptions {
+  selectedFiles: FileItem[]
+  setValue: (field: string, value: any, options?: any) => void
+  setSelectedFiles: React.Dispatch<React.SetStateAction<FileItem[]>>
+  watch: <T>(name: string) => T
+  appInstanceDid?: any
+  hasZcap?: boolean
+  storage?: GoogleDriveStorage
+  useWas?: boolean
+}
+
+export async function uploadEvidence({
+  selectedFiles,
+  setValue,
+  setSelectedFiles,
+  watch,
+  appInstanceDid,
+  hasZcap,
+  storage,
+  useWas = true
+}: UploadEvidenceOptions): Promise<void> {
+  try {
+    const filesToUpload = selectedFiles.filter(f => !f.uploaded && f.file && f.name)
+    if (filesToUpload.length === 0) return
+
+    if (useWas) {
+      if (!appInstanceDid || !hasZcap) {
+        throw new Error(
+          'WAS upload requested but missing appInstanceDid or zcap delegation.'
+        )
+      }
+      const stored = getStoredZcap()
+      const capability =
+        typeof stored?.zcap === 'string' ? JSON.parse(stored.zcap) : stored?.zcap
+      if (!capability) {
+        throw new Error('WAS upload requested but no zcap found in local storage.')
+      }
+
+      const was = createStorage('wasZcap', { appInstance: appInstanceDid, capability })
+      const uploadedFiles = await Promise.all(
+        filesToUpload.map(async (fileItem, index) => {
+          const wasId = await was.upload({
+            key: fileItem.name,
+            file: fileItem.file as any
+          })
+          return {
+            ...fileItem,
+            wasId,
+            uploaded: true,
+            isFeatured: index === 0 && !watch<string>('evidenceLink')
+          }
+        })
+      )
+
+      const featuredFile = uploadedFiles.find(f => f.isFeatured)
+      if (featuredFile?.wasId) setValue('evidenceLink', featuredFile.wasId)
+
+      const currentPortfolio = watch<PortfolioItem[]>('portfolio') || []
+      const newPortfolioEntries: PortfolioItem[] = uploadedFiles.map(f => ({
+        name: f.name,
+        url: f.wasId || '',
+        wasId: f.wasId
+      }))
+      setValue('portfolio', [...currentPortfolio, ...newPortfolioEntries])
+
+      setSelectedFiles(prev =>
+        prev.map(file => {
+          const uploaded = uploadedFiles.find(f => f.name === file.name)
+          return uploaded ? { ...file, wasId: uploaded.wasId, uploaded: true } : file
+        })
+      )
+      return
+    }
+
+    // Google Drive path (no fallback)
+    if (!storage) {
+      throw new Error(
+        'Google Drive storage is not available. Please log in to Google Drive first by clicking the Google Drive login button.'
+      )
+    }
+
+    const uploadedFiles = await Promise.all(
+      filesToUpload.map(async (fileItem, index) => {
+        const newFile = new File([fileItem.file], fileItem.name, {
+          type: fileItem.file.type
+        })
+        const uploadedFile = await storage.uploadBinaryFile({ file: newFile })
+        if (!uploadedFile?.id)
+          throw new Error(
+            `Failed to upload file ${fileItem.name} to Google Drive. Upload response was invalid.`
+          )
+        return {
+          ...fileItem,
+          googleId: uploadedFile.id,
+          uploaded: true,
+          isFeatured: index === 0 && !watch<string>('evidenceLink')
+        }
+      })
+    )
+
+    const featuredFile = uploadedFiles.find(f => f.isFeatured)
+    if (featuredFile?.googleId) {
+      setValue(
+        'evidenceLink',
+        `https://drive.google.com/uc?export=view&id=${featuredFile.googleId}`
+      )
+    }
+
+    const currentPortfolio = watch<PortfolioItem[]>('portfolio') || []
+    const newPortfolioEntries: PortfolioItem[] = uploadedFiles.map(f => ({
+      name: f.name,
+      url: `https://drive.google.com/uc?export=view&id=${f.googleId}`,
+      googleId: f.googleId
+    }))
+    setValue('portfolio', [...currentPortfolio, ...newPortfolioEntries])
+
+    setSelectedFiles(prev =>
+      prev.map(file => {
+        const uploaded = uploadedFiles.find(f => f.name === file.name)
+        return uploaded ? { ...file, ...uploaded } : file
+      })
+    )
+  } catch (error) {
+    console.error('❌ Error uploading files:', error)
+  }
+}
+
+// Facade-based uploader: expects a unified upload() and backend kind
+export async function uploadEvidenceWithStorage({
+  selectedFiles,
+  setValue,
+  setSelectedFiles,
+  watch,
+  backend,
+  upload
+}: {
+  selectedFiles: FileItem[]
+  setValue: (field: string, value: any, options?: any) => void
+  setSelectedFiles: React.Dispatch<React.SetStateAction<FileItem[]>>
+  watch: <T>(name: string) => T
+  backend: 'was' | 'drive'
+  upload: (args: { key: string; file: Blob | File }) => Promise<string>
+}) {
+  const filesToUpload = selectedFiles.filter(f => !f.uploaded && f.file && f.name)
+  if (filesToUpload.length === 0) return
+
+  const uploadedFiles = await Promise.all(
+    filesToUpload.map(async (fileItem, index) => {
+      const id = await upload({ key: fileItem.name, file: fileItem.file as any })
+      const base = {
+        ...fileItem,
+        uploaded: true,
+        isFeatured: index === 0 && !watch<string>('evidenceLink')
+      }
+      return backend === 'was' ? { ...base, wasId: id } : { ...base, googleId: id }
+    })
+  )
+
+  const featured = uploadedFiles.find(f => f.isFeatured)
+  if (featured) {
+    const url =
+      backend === 'was'
+        ? featured.wasId || ''
+        : `https://drive.google.com/uc?export=view&id=${featured.googleId}`
+    setValue('evidenceLink', url)
+  }
+
+  const currentPortfolio = watch<PortfolioItem[]>('portfolio') || []
+  const newEntries: PortfolioItem[] = uploadedFiles.map(f =>
+    backend === 'was'
+      ? { name: f.name, url: f.wasId || '', wasId: f.wasId }
+      : {
+          name: f.name,
+          url: `https://drive.google.com/uc?export=view&id=${f.googleId}`,
+          googleId: f.googleId
+        }
+  )
+  setValue('portfolio', [...currentPortfolio, ...newEntries])
+
+  setSelectedFiles(prev =>
+    prev.map(file => {
+      const up = uploadedFiles.find(f => f.name === file.name)
+      return up ? { ...file, ...up } : file
+    })
+  )
+}
diff --git a/app/utils/zcapStorage.ts b/app/utils/zcapStorage.ts
new file mode 100644
index 00000000..f9cdbcd3
--- /dev/null
+++ b/app/utils/zcapStorage.ts
@@ -0,0 +1,122 @@
+import { ZcapClient } from '@digitalcredentials/ezcap'
+import { Ed25519Signature2020 } from '@digitalcredentials/ed25519-signature-2020'
+
+export interface ZcapStorage {
+  zcap: string
+  appInstanceDid: string
+  timestamp: number
+}
+
+export interface ZcapClientConfig {
+  appDidSigner: any
+}
+
+/**
+ * Store zCap in localStorage for later use by file upload components
+ */
+export function storeZcap(zcap: string, appInstanceDid: string): void {
+  if (typeof window === 'undefined') return
+  
+  const zcapStorage: ZcapStorage = {
+    zcap,
+    appInstanceDid,
+    timestamp: Date.now()
+  }
+  
+  localStorage.setItem('delegatedWasZcap', JSON.stringify(zcapStorage))
+  console.log('✅ ZCap stored in localStorage:', zcapStorage)
+}
+
+/**
+ * Retrieve zCap from localStorage
+ */
+export function getStoredZcap(): ZcapStorage | null {
+  if (typeof window === 'undefined') return null
+  
+  try {
+    const stored = localStorage.getItem('delegatedWasZcap')
+    if (!stored) return null
+    
+    const zcapStorage: ZcapStorage = JSON.parse(stored)
+    
+    // Check if zCap is not too old (24 hours)
+    const maxAge = 24 * 60 * 60 * 1000 // 24 hours in milliseconds
+    if (Date.now() - zcapStorage.timestamp > maxAge) {
+      console.warn('⚠️ Stored zCap is too old, removing from localStorage')
+      localStorage.removeItem('delegatedWasZcap')
+      return null
+    }
+    
+    return zcapStorage
+  } catch (error) {
+    console.error('Error retrieving zCap from localStorage:', error)
+    return null
+  }
+}
+
+/**
+ * Clear zCap from localStorage
+ */
+export function clearStoredZcap(): void {
+  if (typeof window === 'undefined') return
+  localStorage.removeItem('delegatedWasZcap')
+  console.log('🗑️ ZCap cleared from localStorage')
+}
+
+/**
+ * Create a ZcapClient instance for WAS file operations
+ */
+export function createZcapClient(config: ZcapClientConfig): any {
+  try {
+    return new ZcapClient({
+      SuiteClass: Ed25519Signature2020,
+      invocationSigner: config.appDidSigner
+    })
+  } catch (error) {
+    console.error('Error creating ZcapClient:', error)
+    return null
+  }
+}
+
+/**
+ * Upload a file to WAS using zCap
+ */
+export async function uploadFileToWAS(
+  file: File,
+  zcapClient: any,
+  capability: any,
+  url: string
+): Promise<{ success: boolean; fileId?: string; error?: string }> {
+  try {
+    console.log('🚀 Uploading file to WAS:', file.name)
+    
+    const response = await zcapClient.request({
+      url,
+      capability,
+      method: 'PUT',
+      action: 'PUT',
+      blob: file
+    })
+    
+    console.log('✅ File uploaded to WAS successfully:', response)
+    
+    // Extract file ID from response or URL
+    // This might need adjustment based on the actual WAS response format
+    const fileId = response?.id || response?.fileId || 'unknown'
+    
+    return {
+      success: true,
+      fileId
+    }
+  } catch (error) {
+    console.error('❌ Error uploading file to WAS:', error)
+    // details log
+    console.error('❌ Error uploading file to WAS:', JSON.stringify(error, null, 2))
+    
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : 'Unknown error occurred'
+    }
+  }
+}
+
diff --git a/app/was-login/page.tsx b/app/was-login/page.tsx
index e8af60bb..c4114cad 100644
--- a/app/was-login/page.tsx
+++ b/app/was-login/page.tsx
@@ -22,8 +22,12 @@ export default function WasLoginPage() {
     ;(async () => {
       try {
         // Create / load appInstanceDid for this client
-        const { did: appInstanceDid } = await getOrCreateAppInstanceDid()
-
+        const appInstanceDid = localStorage.getItem('AppInstanceDID')
+        if (!appInstanceDid) {
+          setError('Failed to connect to the wallet: missing AppInstanceDID')
+          setIsLoading(false)
+          return
+        }
         // Initialize exchange session with appInstanceDid
         const res = await fetch(exchangeUrl, {
           method: 'POST',
diff --git a/package.json b/package.json
index dc1fe217..dd4b8930 100644
--- a/package.json
+++ b/package.json
@@ -1,58 +1,62 @@
-{
-  "name": "nextjs",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint",
-    "format": "prettier --write 'app/**/*.{js,ts,tsx,jsx,json}'",
-    "test:normalize": "node scripts/test-runner.js",
-    "test:workflow": "node app/utils/__tests__/e2e-workflow.test.ts"
-  },
-  "dependencies": {
-    "@cooperation/vc-storage": "^1.0.40",
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
-    "@mui/icons-material": "^5.15.14",
-    "@mui/material": "^5.15.18",
-    "@sendgrid/mail": "^8.1.3",
-    "@types/js-cookie": "^3.0.6",
-    "@types/qrcode": "^1.5.5",
-    "@types/react-beautiful-dnd": "^13.1.8",
-    "dompurify": "^3.1.7",
-    "ethers": "^6.13.2",
-    "firebase": "^11.3.1",
-    "googleapis": "^144.0.0",
-    "js-cookie": "^3.0.5",
-    "lru-cache": "^11.0.1",
-    "lucide-react": "^0.469.0",
-    "next": "^14.2.15",
-    "next-auth": "^4.24.11",
-    "nodemailer": "^6.9.14",
-    "pdfjs-dist": "4.8.69",
-    "qrcode": "^1.5.4",
-    "react": "^18",
-    "react-beautiful-dnd": "^13.1.1",
-    "react-dom": "^18",
-    "react-dropzone": "^14.2.9",
-    "react-hook-form": "^7.51.1",
-    "react-qr-code": "^2.0.18",
-    "react-quill": "^2.0.0",
-    "resend": "^4.4.1",
-    "sharp": "^0.33.5"
-  },
-  "devDependencies": {
-    "@types/dompurify": "^3.0.5",
-    "@types/node": "^20",
-    "@types/nodemailer": "^6.4.15",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "@types/uuid": "^10.0.0",
-    "eslint": "^8",
-    "eslint-config-next": "14.1.0",
-    "prettier": "^3.3.3",
-    "typescript": "^5"
-  }
-}
+{
+  "name": "nextjs",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "format": "prettier --write 'app/**/*.{js,ts,tsx,jsx,json}'",
+    "test:normalize": "node scripts/test-runner.js",
+    "test:workflow": "node app/utils/__tests__/e2e-workflow.test.ts"
+  },
+  "dependencies": {
+    "@cooperation/vc-storage": "^1.0.42",
+    "@digitalcredentials/ed25519-signature-2020": "^7.0.0",
+    "@digitalcredentials/ed25519-verification-key-2020": "^5.0.0-beta.1",
+    "@digitalcredentials/ezcap": "5.1.0",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/icons-material": "^5.15.14",
+    "@mui/material": "^5.15.18",
+    "@sendgrid/mail": "^8.1.3",
+    "@types/js-cookie": "^3.0.6",
+    "@types/qrcode": "^1.5.5",
+    "@types/react-beautiful-dnd": "^13.1.8",
+    "dompurify": "^3.1.7",
+    "ethers": "^6.13.2",
+    "firebase": "^11.3.1",
+    "googleapis": "^144.0.0",
+    "js-cookie": "^3.0.5",
+    "lru-cache": "^11.0.1",
+    "lucide-react": "^0.469.0",
+    "next": "^14.2.15",
+    "next-auth": "^4.24.11",
+    "nodemailer": "^6.9.14",
+    "pdfjs-dist": "4.8.69",
+    "qrcode": "^1.5.4",
+    "react": "^18",
+    "react-beautiful-dnd": "^13.1.1",
+    "react-dom": "^18",
+    "react-dropzone": "^14.2.9",
+    "react-hook-form": "^7.51.1",
+    "react-qr-code": "^2.0.18",
+    "react-quill": "^2.0.0",
+    "resend": "^4.4.1",
+    "sharp": "^0.33.5",
+    "uuid": "^12.0.0"
+  },
+  "devDependencies": {
+    "@types/dompurify": "^3.0.5",
+    "@types/node": "^20",
+    "@types/nodemailer": "^6.4.15",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@types/uuid": "^10.0.0",
+    "eslint": "^8",
+    "eslint-config-next": "14.1.0",
+    "prettier": "^3.3.3",
+    "typescript": "^5"
+  }
+}
diff --git a/tsconfig.json b/tsconfig.json
index e6e40046..ce7ed9f4 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -23,8 +23,9 @@
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
+    "**/*.d.ts",
     ".next/types/**/*.ts",
     "app/Assets/SVGs/index.jsx"
-  ],
+, "app/testWasUpload.js"  ],
   "exclude": ["node_modules"]
 }