diff --git a/packages/files-ui/cypress/support/commands.ts b/packages/files-ui/cypress/support/commands.ts
index bf34f2f05c..3172db7022 100644
--- a/packages/files-ui/cypress/support/commands.ts
+++ b/packages/files-ui/cypress/support/commands.ts
@@ -28,9 +28,11 @@
 import { ethers, Wallet } from "ethers"
 import { testPrivateKey, testAccountPassword, localHost } from "../fixtures/loginData"
 import { CustomizedBridge } from "./utils/CustomBridge"
+import { FilesApiClient } from "@chainsafe/files-api-client"
 import "cypress-file-upload"
+import axios from "axios"
 
-export type Storage = Record<string, string>[]
+export type Storage = Record<string, string>[];
 
 export interface Web3LoginOptions {
   url?: string
@@ -45,28 +47,30 @@ const LOCAL_FILE = "cypress/fixtures/storage/localStorage.json"
 const REFRESH_TOKEN_KEY = "csf.refreshToken"
 
 Cypress.Commands.add("clearCsfBucket", (apiUrlBase: string) => {
+  const axiosInstance = axios.create({
+    // Disable the internal Axios JSON de serialization as this is handled by the client
+    transformResponse: []
+  })
+
+  const apiClient = new FilesApiClient({}, apiUrlBase, axiosInstance)
+
   cy.window().then((win) => {
-    cy.request("POST", `${apiUrlBase}/user/refresh`, { "refresh": win.sessionStorage.getItem(REFRESH_TOKEN_KEY) })
-      .then((res) => res.body.access_token.token)
-      .then((accessToken) => {
-        cy.request({
-          method: "POST",
-          url: `${apiUrlBase}/files/ls`,
-          body: { "path": "/", "source": { "type": "csf" } },
-          auth: { "bearer": accessToken }
-        }).then((res) => {
-          const toDelete = res.body.map(({ name }: { name: string }) => `/${name}`)
-          cy.log(`clearCsfBucket - Deleting ${JSON.stringify(toDelete)}`)
-          cy.request({
-            method: "POST",
-            url: `${apiUrlBase}/files/rm`,
-            body: { "paths": toDelete, "source": { "type": "csf" } },
-            auth: { "bearer": accessToken }
-          }).then(res => {
-            if(!res.isOkStatusCode){
-              throw new Error(`unexpected answer when deleting files: ${JSON.stringify(res, null, 2)}`)
-            }
-          })
+    apiClient
+      .getRefreshToken({
+        refresh: win.sessionStorage.getItem(REFRESH_TOKEN_KEY) || ""
+      })
+      .then((tokens) => {
+        apiClient.setToken(tokens.access_token.token)
+        apiClient.listBuckets("csf").then((buckets) => {
+          apiClient
+            .getBucketObjectChildrenList(buckets[0].id, { path: "/" })
+            .then((items) => {
+              const toDelete = items.map(
+                ({ name }: { name: string }) => `/${name}`
+              )
+              console.log(`clearCsfBucket - Deleting ${JSON.stringify(toDelete)}`)
+              apiClient.removeBucketObject(buckets[0].id, { paths: toDelete }).catch()
+            })
         })
       })
   })
@@ -94,85 +98,105 @@ Cypress.Commands.add("saveLocalAndSession", () => {
   })
 })
 
-Cypress.Commands.add("web3Login", ({
-  saveBrowser = false,
-  url = localHost,
-  apiUrlBase = "https://stage.imploy.site/api/v1",
-  useLocalAndSessionStorage = true,
-  clearCSFBucket = false
-}: Web3LoginOptions = {}) => {
-  let session: Storage = []
-  let local: Storage = []
-
-  cy.task<string | null>("readFileMaybe", SESSION_FILE)
-    .then((unparsedSession) => {
-      session = unparsedSession && JSON.parse(unparsedSession) || []
-    })
-
-  cy.task<string | null>("readFileMaybe", LOCAL_FILE)
-    .then((unparsedLocal) => {
-      local = unparsedLocal && JSON.parse(unparsedLocal) || []
-    })
+Cypress.Commands.add(
+  "web3Login",
+  ({
+    saveBrowser = false,
+    url = localHost,
+    apiUrlBase = "https://stage.imploy.site/api/v1",
+    useLocalAndSessionStorage = true,
+    clearCSFBucket = false
+  }: Web3LoginOptions = {}) => {
+    let session: Storage = []
+    let local: Storage = []
+
+    cy.task<string | null>("readFileMaybe", SESSION_FILE).then(
+      (unparsedSession) => {
+        session = (unparsedSession && JSON.parse(unparsedSession)) || []
+      }
+    )
 
-  cy.on("window:before:load", (win) => {
-    const provider = new ethers.providers.JsonRpcProvider("https://rinkeby.infura.io/v3/4bf032f2d38a4ed6bb975b80d6340847", 4)
-    const signer = new Wallet(testPrivateKey, provider)
-    // inject ethereum object in the global window
-    Object.defineProperty(win, "ethereum", {
-      get: () => new CustomizedBridge(signer as any, provider as any)
-    })
+    cy.task<string | null>("readFileMaybe", LOCAL_FILE).then(
+      (unparsedLocal) => {
+        local = (unparsedLocal && JSON.parse(unparsedLocal)) || []
+      }
+    )
+
+    cy.on("window:before:load", (win) => {
+      const provider = new ethers.providers.JsonRpcProvider(
+        "https://rinkeby.infura.io/v3/4bf032f2d38a4ed6bb975b80d6340847",
+        4
+      )
+      const signer = new Wallet(testPrivateKey, provider)
+      // inject ethereum object in the global window
+      Object.defineProperty(win, "ethereum", {
+        get: () => new CustomizedBridge(signer as any, provider as any)
+      })
 
-    // clear session storage in any case, if previous session storage should be
-    // kept will be decided after.
-    // Note that Cypress keep the session storage between test but clears localStorage
-    win.sessionStorage.clear()
-    win.localStorage.clear()
+      // clear session storage in any case, if previous session storage should be
+      // kept will be decided after.
+      // Note that Cypress keep the session storage between test but clears localStorage
+      win.sessionStorage.clear()
+      win.localStorage.clear()
 
-    if (useLocalAndSessionStorage) {
-      session.forEach(({ key, value }) => {
-        win.sessionStorage.setItem(key, value)
-      })
+      if (useLocalAndSessionStorage) {
+        session.forEach(({ key, value }) => {
+          win.sessionStorage.setItem(key, value)
+        })
 
-      local.forEach(({ key, value }) => {
-        win.localStorage.setItem(key, value)
-      })
-    }
-  })
+        local.forEach(({ key, value }) => {
+          win.localStorage.setItem(key, value)
+        })
+      }
+    })
 
-  cy.visit(url)
-
-  // with nothing in localstorage (and in session storage)
-  // the whole login flow should kick in
-  cy.then(() => {
-    cy.log("Logging in", local.length > 0 && "there is something in session storage ---> direct login")
-
-    if (local.length === 0) {
-      cy.log("nothing in session storage, --> click on web3 button")
-      cy.get("[data-cy=web3]").click()
-      cy.get(".bn-onboard-modal-select-wallets > :nth-child(1) > .bn-onboard-custom").click()
-      cy.get("[data-cy=sign-in-with-web3-button]").click()
-      cy.get("[data-cy=login-password-button]", { timeout: 20000 }).click()
-      cy.get("[data-cy=login-password-input]").type(`${testAccountPassword}{enter}`)
-
-      if (saveBrowser) {
-        // this is taking forever for test accounts
-        cy.get("[data-cy=save-browser-button]").click()
-      } else {
-        cy.get("[data-cy=do-not-save-browser-button]").click()
+    cy.visit(url)
+
+    // with nothing in localstorage (and in session storage)
+    // the whole login flow should kick in
+    cy.then(() => {
+      cy.log(
+        "Logging in",
+        local.length > 0 &&
+          "there is something in session storage ---> direct login"
+      )
+
+      if (local.length === 0) {
+        cy.log("nothing in session storage, --> click on web3 button")
+        cy.get("[data-cy=web3]").click()
+        cy.get(
+          ".bn-onboard-modal-select-wallets > :nth-child(1) > .bn-onboard-custom"
+        ).click()
+        cy.get("[data-cy=sign-in-with-web3-button]").click()
+        cy.get("[data-cy=login-password-button]", { timeout: 20000 }).click()
+        cy.get("[data-cy=login-password-input]").type(
+          `${testAccountPassword}{enter}`
+        )
+
+        if (saveBrowser) {
+          // this is taking forever for test accounts
+          cy.get("[data-cy=save-browser-button]").click()
+        } else {
+          cy.get("[data-cy=do-not-save-browser-button]").click()
+        }
       }
-    }
-  })
+    })
 
-  cy.get("[data-cy=files-app-header]", { timeout: 20000 }).should("be.visible")
+    cy.get("[data-cy=files-app-header]", { timeout: 20000 }).should(
+      "be.visible"
+    )
 
-  cy.saveLocalAndSession()
+    cy.saveLocalAndSession()
 
-  if (clearCSFBucket) {
-    cy.clearCsfBucket(apiUrlBase)
-    cy.reload()
-    cy.get("[data-cy=files-app-header]", { timeout: 20000 }).should("be.visible")
+    if (clearCSFBucket) {
+      cy.clearCsfBucket(apiUrlBase)
+      cy.reload()
+      cy.get("[data-cy=files-app-header]", { timeout: 20000 }).should(
+        "be.visible"
+      )
+    }
   }
-})
+)
 
 // Must be declared global to be detected by typescript (allows import/export)
 // eslint-disable @typescript/interface-name
@@ -180,31 +204,31 @@ declare global {
   namespace Cypress {
     interface Chainable {
       /**
-      * Login using Metamask to an instance of Files.
-      * @param {String} options.url - (default: "http://localhost:3000") - what url to visit.
-      * @param {String} apiUrlBase - (default: "https://stage.imploy.site/api/v1") - what url to call for the api.
-      * @param {Boolean} options.saveBrowser - (default: false) - save the browser to localstorage.
-      * @param {Boolean} options.useLocalAndSessionStorage - (default: true) - use what could have been stored before to speedup login
-      * @param {Boolean} options.clearCSFBucket - (default: false) - whether any file in the csf bucket should be deleted. 
-      * @example cy.web3Login({saveBrowser: true, url: 'http://localhost:8080'})
-      */
+       * Login using Metamask to an instance of Files.
+       * @param {String} options.url - (default: "http://localhost:3000") - what url to visit.
+       * @param {String} apiUrlBase - (default: "https://stage.imploy.site/api/v1") - what url to call for the api.
+       * @param {Boolean} options.saveBrowser - (default: false) - save the browser to localstorage.
+       * @param {Boolean} options.useLocalAndSessionStorage - (default: true) - use what could have been stored before to speedup login
+       * @param {Boolean} options.clearCSFBucket - (default: false) - whether any file in the csf bucket should be deleted.
+       * @example cy.web3Login({saveBrowser: true, url: 'http://localhost:8080'})
+       */
       web3Login: (options?: Web3LoginOptions) => Chainable
 
       /**
-      * Removed any file or folder at the root
-      * @param {String} apiUrlBase - what url to call for the api.
-      * @example cy.clearCsfBucket("https://stage.imploy.site/api/v1")
-      */
+       * Removed any file or folder at the root
+       * @param {String} apiUrlBase - what url to call for the api.
+       * @example cy.clearCsfBucket("https://stage.imploy.site/api/v1")
+       */
       clearCsfBucket: (apiUrlBase: string) => Chainable
 
       /**
-      * Save local and session storage to local files
-      * @example cy.saveLocalAndSession()
-      */
+       * Save local and session storage to local files
+       * @example cy.saveLocalAndSession()
+       */
       saveLocalAndSession: () => Chainable
     }
   }
 }
 
 // Convert this to a module instead of script (allows import/export)
-export { }
+export {}
diff --git a/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx b/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx
index 358ad4076e..07abf9088e 100644
--- a/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx
+++ b/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx
@@ -202,97 +202,6 @@ const InitialScreen = ({ className }: IInitialScreen) => {
     setIsConnecting(false)
   }
 
-  const LoginButtons = () => {
-    return (
-      <>
-        <section className={classes.buttonSection}>
-          {maintenanceMode && (
-            <Typography>
-              <Trans>The system is undergoing maintenance, thank you for being patient.</Trans>
-            </Typography>
-          )}
-          <Button
-            data-cy="web3"
-            onClick={() => {
-              setLoginMode("web3")
-              handleSelectWalletAndConnect()
-            }}
-            className={clsx(classes.button, classes.web3Button)}
-            variant="primary"
-            size="large"
-            disabled={maintenanceMode || isConnecting || status !== "initialized"}
-          >
-            <Trans>Continue with Web3 Wallet</Trans>
-          </Button>
-          <Button
-            className={classes.button}
-            size="large"
-            onClick={() => {
-              setLoginMode("email")
-            }}
-            variant="secondary"
-          >
-            <MailIcon className="icon"/>
-            <Trans>Continue with Email</Trans>
-          </Button>
-          <Button
-            className={classes.button}
-            size="large"
-            onClick={() => handleLogin("github")}
-            disabled={maintenanceMode || isConnecting || status !== "initialized"}
-            loading={isConnecting && loginMode === "github"}
-            variant="secondary"
-          >
-            <GithubLogoIcon className="icon"/>
-            <Trans>Continue with Github</Trans>
-          </Button>
-          <Button
-            className={classes.button}
-            size="large"
-            onClick={() => handleLogin("google")}
-            disabled={maintenanceMode || isConnecting || status !== "initialized"}
-            loading={isConnecting && loginMode === "google"}
-            variant="secondary"
-          >
-            <GoogleLogoIcon className="icon"/>
-            <Trans>Continue with Google</Trans>
-          </Button>
-          <Button
-            className={classes.button}
-            size="large"
-            onClick={() => handleLogin("facebook")}
-            disabled={maintenanceMode || isConnecting || status !== "initialized"}
-            loading={isConnecting && loginMode === "facebook"}
-            variant="secondary"
-          >
-            <FacebookLogoIcon className="icon"/>
-            <Trans>Continue with Facebook</Trans>
-          </Button>
-        </section>
-        <footer className={classes.footer}>
-          <a
-            href={ROUTE_LINKS.PrivacyPolicy}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Typography>
-              <Trans>Privacy Policy</Trans>
-            </Typography>
-          </a>
-          <a
-            href={ROUTE_LINKS.Terms}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Typography>
-              <Trans>Terms and Conditions</Trans>
-            </Typography>
-          </a>
-        </footer>
-      </>
-    )
-  }
-
   const ConnectWallet = () => {
     if (!wallet) {
       console.error("No wallet found")
@@ -417,7 +326,92 @@ const InitialScreen = ({ className }: IInitialScreen) => {
       )}
       {!error && (
         loginMode !== "web3" && loginMode !== "email"
-          ? <LoginButtons />
+          ? <>
+            <section className={classes.buttonSection}>
+              {maintenanceMode && (
+                <Typography>
+                  <Trans>The system is undergoing maintenance, thank you for being patient.</Trans>
+                </Typography>
+              )}
+              <Button
+                data-cy="web3"
+                onClick={() => {
+                  setLoginMode("web3")
+                  handleSelectWalletAndConnect()
+                }}
+                className={clsx(classes.button, classes.web3Button)}
+                variant="primary"
+                size="large"
+                disabled={maintenanceMode || isConnecting || status !== "initialized"}
+              >
+                <Trans>Continue with Web3 Wallet</Trans>
+              </Button>
+              <Button
+                className={classes.button}
+                size="large"
+                onClick={() => {
+                  setLoginMode("email")
+                }}
+                variant="secondary"
+              >
+                <MailIcon className="icon"/>
+                <Trans>Continue with Email</Trans>
+              </Button>
+              <Button
+                className={classes.button}
+                size="large"
+                onClick={() => handleLogin("github")}
+                disabled={maintenanceMode || isConnecting || status !== "initialized"}
+                loading={isConnecting && loginMode === "github"}
+                variant="secondary"
+              >
+                <GithubLogoIcon className="icon"/>
+                <Trans>Continue with Github</Trans>
+              </Button>
+              <Button
+                className={classes.button}
+                size="large"
+                onClick={() => handleLogin("google")}
+                disabled={maintenanceMode || isConnecting || status !== "initialized"}
+                loading={isConnecting && loginMode === "google"}
+                variant="secondary"
+              >
+                <GoogleLogoIcon className="icon"/>
+                <Trans>Continue with Google</Trans>
+              </Button>
+              <Button
+                className={classes.button}
+                size="large"
+                onClick={() => handleLogin("facebook")}
+                disabled={maintenanceMode || isConnecting || status !== "initialized"}
+                loading={isConnecting && loginMode === "facebook"}
+                variant="secondary"
+              >
+                <FacebookLogoIcon className="icon"/>
+                <Trans>Continue with Facebook</Trans>
+              </Button>
+            </section>
+            <footer className={classes.footer}>
+              <a
+                href={ROUTE_LINKS.PrivacyPolicy}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <Typography>
+                  <Trans>Privacy Policy</Trans>
+                </Typography>
+              </a>
+              <a
+                href={ROUTE_LINKS.Terms}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <Typography>
+                  <Trans>Terms and Conditions</Trans>
+                </Typography>
+              </a>
+            </footer>
+          </>
           : loginMode === "email"
             ? <PasswordlessEmail resetLogin={resetLogin} />
             : wallet
diff --git a/yarn.lock b/yarn.lock
index 5ae6419730..b0772a5481 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9000,7 +9000,7 @@ cypress-file-upload@^5.0.7:
   resolved "https://registry.yarnpkg.com/cypress-file-upload/-/cypress-file-upload-5.0.7.tgz#acf24fe08a92b2d0c892a58b56811fb933d34ea9"
   integrity sha512-cgWsWx7igxjyyVm9/VJ9ukdy69jL00I7z0lrwUWtXXLPvX4neO+8JAZ054Ax8Xf+mdV9OerenXzb9nqRoafjHA==
 
-cypress@^7.3.0, cypress@^7.4.0:
+cypress@^7.4.0:
   version "7.4.0"
   resolved "https://registry.yarnpkg.com/cypress/-/cypress-7.4.0.tgz#679bfe75335b9a4873d44f0d989e9f0367f00665"
   integrity sha512-+CmSoT5DS88e92YDfc6aDA3Zf3uCBRKVB92caWsjXMilz0tf6NpByFvIbLLVWXiYOwrhtWV0m/k93+rzodYwRQ==