diff --git a/packages/files-ui/src/Components/Elements/CustomModal.tsx b/packages/files-ui/src/Components/Elements/CustomModal.tsx
index dbe5d76a25..4da3478686 100644
--- a/packages/files-ui/src/Components/Elements/CustomModal.tsx
+++ b/packages/files-ui/src/Components/Elements/CustomModal.tsx
@@ -18,15 +18,12 @@ const useStyles = makeStyles(({ constants, breakpoints }: CSFTheme) =>
     },
     mobileStickyBottom: {
       [breakpoints.down("md")]: {
+        position: "fixed",
         top: "unset",
         bottom: 0,
         left: 0,
         width: "100% !important",
-        transform: "unset",
-        borderRadiusLeftTop: `${constants.generalUnit * 1.5}px`,
-        borderRadiusRightTop: `${constants.generalUnit * 1.5}px`,
-        borderRadiusLeftBottom: 0,
-        borderRadiusRightBottom: 0
+        transform: "unset"
       }
     },
     closeIcon : {
diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/CreateFolderModal.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/CreateFolderModal.tsx
index 0bc8f9b0d4..c754ae0000 100644
--- a/packages/files-ui/src/Components/Modules/FileBrowsers/CreateFolderModal.tsx
+++ b/packages/files-ui/src/Components/Modules/FileBrowsers/CreateFolderModal.tsx
@@ -25,23 +25,19 @@ const useStyles = makeStyles(
   ({ breakpoints, constants, typography, zIndex }: CSFTheme) => {
     return createStyles({
       root: {
-        padding: constants.generalUnit * 4,
+        padding: constants.generalUnit * 3,
         flexDirection: "column"
       },
       modalRoot: {
         zIndex: zIndex?.blocker,
         [breakpoints.down("md")]: {
-          paddingBottom: Number(constants?.mobileButtonHeight) + constants.generalUnit
+          paddingBottom: Number(constants?.mobileButtonHeight)
         }
       },
       modalInner: {
         backgroundColor: constants.createFolder.backgroundColor,
         color: constants.createFolder.color,
         [breakpoints.down("md")]: {
-          bottom:
-          Number(constants?.mobileButtonHeight) + constants.generalUnit,
-          borderTopLeftRadius: `${constants.generalUnit * 1.5}px`,
-          borderTopRightRadius: `${constants.generalUnit * 1.5}px`,
           maxWidth: `${breakpoints.width("md")}px !important`
         }
       },
@@ -51,15 +47,6 @@ const useStyles = makeStyles(
       okButton: {
         marginLeft: constants.generalUnit
       },
-      cancelButton: {
-        [breakpoints.down("md")]: {
-          position: "fixed",
-          bottom: 0,
-          left: 0,
-          width: "100%",
-          height: constants?.mobileButtonHeight
-        }
-      },
       label: {
         fontSize: 14,
         lineHeight: "22px"
@@ -175,7 +162,6 @@ const CreateFolderModal = ({ modalOpen, close }: ICreateFolderModalProps) => {
                 data-cy="button-cancel-create-folder"
                 onClick={onCancel}
                 size="medium"
-                className={classes.cancelButton}
                 variant={desktop ? "outline" : "gray"}
                 type="button"
               >
diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/CreateOrEditSharedFolderModal.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/CreateOrEditSharedFolderModal.tsx
deleted file mode 100644
index 0424df0615..0000000000
--- a/packages/files-ui/src/Components/Modules/FileBrowsers/CreateOrEditSharedFolderModal.tsx
+++ /dev/null
@@ -1,367 +0,0 @@
-import { Button, ShareAltSvg, TagsInput, Typography, Grid, TextInput } from "@chainsafe/common-components"
-import { createStyles, makeStyles, useThemeSwitcher } from "@chainsafe/common-theme"
-import React, { useState, useCallback } from "react"
-import CustomModal from "../../Elements/CustomModal"
-import { CSFTheme } from "../../../Themes/types"
-import { BucketKeyPermission } from "../../../Contexts/FilesContext"
-import CustomButton from "../../Elements/CustomButton"
-import { t, Trans } from "@lingui/macro"
-import { useEffect } from "react"
-import { SharedFolderModalMode } from "./types"
-import { useCreateOrEditSharedFolder } from "./hooks/useCreateOrEditSharedFolder"
-import { useLookupSharedFolderUser } from "./hooks/useLookupUser"
-import { nameValidator } from "../../../Utils/validationSchema"
-import { getUserDisplayName } from "../../../Utils/getUserDisplayName"
-import LinkList from "./LinkSharing/LinkList"
-
-const useStyles = makeStyles(
-  ({ breakpoints, constants, typography, zIndex, palette }: CSFTheme) => {
-    return createStyles({
-      root: {
-        padding: constants.generalUnit * 4,
-        flexDirection: "column",
-        display: "flex",
-        alignItems: "center"
-      },
-      modalRoot: {
-        zIndex: zIndex?.blocker,
-        [breakpoints.down("md")]: {
-          paddingBottom: Number(constants?.mobileButtonHeight) + constants.generalUnit
-        }
-      },
-      modalInner: {
-        backgroundColor: constants.modalDefault.backgroundColor,
-        color: constants.modalDefault.color,
-        [breakpoints.down("md")]: {
-          bottom:
-          Number(constants?.mobileButtonHeight) + constants.generalUnit,
-          borderTopLeftRadius: `${constants.generalUnit * 1.5}px`,
-          borderTopRightRadius: `${constants.generalUnit * 1.5}px`,
-          maxWidth: `${breakpoints.width("md")}px !important`
-        }
-      },
-      okButton: {
-        marginLeft: constants.generalUnit
-      },
-      cancelButton: {
-        [breakpoints.down("md")]: {
-          position: "fixed",
-          bottom: 0,
-          left: 0,
-          width: "100%",
-          height: constants?.mobileButtonHeight
-        }
-      },
-      label: {
-        fontSize: 14,
-        lineHeight: "22px"
-      },
-      heading: {
-        color: constants.modalDefault.color,
-        fontWeight: typography.fontWeight.semibold,
-        marginBottom: 10
-      },
-      iconBacking: {
-        backgroundColor: constants.modalDefault.iconBackingColor,
-        width: 48,
-        height: 48,
-        borderRadius: 24,
-        marginBottom: 16,
-        "& > svg": {
-          width: 16,
-          height: 16,
-          fill: palette.primary.main,
-          position: "relative",
-          display: "block",
-          transform: "translate(-50%, -50%)",
-          top: "50%",
-          left: "50%"
-        }
-      },
-      modalFlexItem: {
-        width: "100%",
-        margin: 5
-      },
-      buttons: {
-        justifyContent: "flex-end",
-        display: "flex",
-        paddingRight: 5,
-        marginTop: 10
-      },
-      shareNameInput: {
-        display: "block"
-      },
-      inputLabel: {
-        fontSize: 16,
-        fontWeight: 600
-      },
-      shareFolderNameInput: {
-        margin: `0 ${constants.generalUnit * 1.5}px ${constants.generalUnit}px`,
-        display: "block"
-      },
-      footer: {
-        width: "100%",
-        padding: `${constants.generalUnit * 2}px ${constants.generalUnit}px`
-      },
-      errorText: {
-        marginLeft: constants.generalUnit * 1.5,
-        color: palette.error.main
-      },
-      sharingLink: {
-        padding: constants.generalUnit * 2,
-        margin: 0
-      }
-    })
-  }
-)
-
-interface ICreateOrEditSharedFolderModalProps {
-  mode?: SharedFolderModalMode
-  isModalOpen: boolean
-  onClose: () => void
-  bucketToEdit?: BucketKeyPermission
-}
-
-const CreateOrEditSharedFolderModal = ({ mode, isModalOpen, onClose, bucketToEdit }: ICreateOrEditSharedFolderModalProps) => {
-  const classes = useStyles()
-  const { desktop, tablet, mobile } = useThemeSwitcher()
-  const { handleCreateSharedFolder, handleEditSharedFolder, isEditingSharedFolder, isCreatingSharedFolder } = useCreateOrEditSharedFolder()
-  const [sharedFolderName, setSharedFolderName] = useState("")
-  const { sharedFolderReaders, sharedFolderWriters, onNewUsers, handleLookupUser, usersError, resetUsers } = useLookupSharedFolderUser()
-  const [hasPermissionsChanged, setHasPermissionsChanged] = useState(false)
-  const [nameError, setNameError] = useState("")
-
-  const onReset = useCallback(() => {
-    setSharedFolderName("")
-    setHasPermissionsChanged(false)
-    resetUsers()
-  }, [resetUsers])
-
-  useEffect(() => {
-    onReset()
-
-    if (!bucketToEdit) return
-
-    const newWriters = bucketToEdit.writers.map((writer) => ({
-      label: getUserDisplayName(writer),
-      value: writer.uuid || "",
-      data: writer
-    })
-    ) || []
-
-    const newReaders = bucketToEdit.readers.map((reader) => ({
-      label: getUserDisplayName(reader),
-      value: reader.uuid || "",
-      data: reader
-    })
-    ) || []
-
-    onNewUsers(newWriters, "write")
-    onNewUsers(newReaders, "read")
-  }, [bucketToEdit, onNewUsers, onReset])
-
-  const onNameChange = useCallback((value?: string | number) => {
-    if (value === undefined) return
-
-    const name = value.toString()
-    setSharedFolderName(name)
-
-    nameValidator
-      .validate({ name })
-      .then(() => {
-        setNameError("")
-      })
-      .catch((e: Error) => {
-        setNameError(e.message)
-      })
-  }, [])
-
-  const handleClose = useCallback(() => {
-    onReset()
-    onClose()
-  }, [onClose, onReset])
-
-  const onCreateSharedFolder = useCallback(() => {
-    handleCreateSharedFolder(sharedFolderName, sharedFolderReaders, sharedFolderWriters)
-      .catch(console.error)
-      .finally(handleClose)
-  }, [handleCreateSharedFolder, sharedFolderName, sharedFolderWriters, sharedFolderReaders, handleClose])
-
-  const onEditSharedFolder = useCallback(() => {
-    if (!bucketToEdit) return
-    handleEditSharedFolder(bucketToEdit, sharedFolderReaders, sharedFolderWriters)
-      .catch(console.error)
-      .finally(handleClose)
-  }, [handleEditSharedFolder, sharedFolderWriters, sharedFolderReaders, handleClose, bucketToEdit])
-
-  return (
-    <CustomModal
-      className={classes.modalRoot}
-      injectedClass={{
-        inner: classes.modalInner
-      }}
-      active={isModalOpen}
-      closePosition="none"
-      maxWidth="sm"
-      testId="create-or-edit-shared-folder"
-      subModal={mode === "edit" && !!bucketToEdit && (
-        <LinkList
-          bucketEncryptionKey={bucketToEdit.encryptionKey}
-          bucketId={bucketToEdit.id}
-        />
-      )}
-    >
-      <div className={classes.root}>
-        <div className={classes.iconBacking}>
-          <ShareAltSvg />
-        </div>
-        <div className={classes.heading}>
-          <Typography className={classes.inputLabel}>
-            {mode === "create"
-              ? <Trans>Create Shared Folder</Trans>
-              : <Trans>Update Shared Folder</Trans>
-            }
-
-          </Typography>
-        </div>
-        {mode === "create" &&
-          <div className={classes.modalFlexItem}>
-            <TextInput
-              className={classes.shareFolderNameInput}
-              labelClassName={classes.inputLabel}
-              label={t`Shared Folder Name`}
-              value={sharedFolderName}
-              onChange={onNameChange}
-              autoFocus
-              state={nameError ? "error" : "normal"}
-              data-cy="input-shared-folder-name"
-            />
-            {nameError && (
-              <Typography
-                component="p"
-                variant="body1"
-                className={classes.errorText}
-              >
-                {nameError}
-              </Typography>
-            )}
-          </div>
-        }
-        <div
-          className={classes.modalFlexItem}
-          data-cy="input-view-permission"
-        >
-          <TagsInput
-            onChange={(values) => {
-              setHasPermissionsChanged(true)
-              onNewUsers(values, "read")
-            }}
-            label={t`Give view-only permission to:`}
-            labelClassName={classes.inputLabel}
-            value={sharedFolderReaders}
-            fetchTags={(inputVal) => handleLookupUser(inputVal, "read")}
-            placeholder={t`Add by sharing address, username or wallet address`}
-            styles={{
-              control: (provided) => ({
-                ...provided,
-                minHeight: 90,
-                alignContent: "start"
-              }),
-              valueContainer: (provided) => mobile && !tablet ? ({
-                ...provided,
-                paddingBottom: 24
-              }) : ({
-                ...provided
-              })
-            }}
-            loadingMessage={t`Loading`}
-            noOptionsMessage={t`No user found for this query.`}
-            data-cy="tag-view-permission-user"
-          />
-        </div>
-        <div
-          className={classes.modalFlexItem}
-          data-cy="input-edit-permission"
-        >
-          <TagsInput
-            onChange={(values) => {
-              setHasPermissionsChanged(true)
-              onNewUsers(values, "write")
-            }}
-            label={t`Give edit permission to:`}
-            labelClassName={classes.inputLabel}
-            value={sharedFolderWriters}
-            fetchTags={(inputVal) => handleLookupUser(inputVal, "write")}
-            placeholder={t`Add by sharing address, username or wallet address`}
-            styles={{
-              control: (provided) => ({
-                ...provided,
-                minHeight: 90,
-                alignContent: "start"
-              }),
-              valueContainer: (provided) => mobile && !tablet ? ({
-                ...provided,
-                paddingBottom: 24
-              }) : ({
-                ...provided
-              })
-            }}
-            loadingMessage={t`Loading`}
-            noOptionsMessage={t`No user found for this query.`}
-            data-cy="tag-edit-permission-user"
-          />
-        </div>
-        <Grid
-          item
-          flexDirection="row"
-          justifyContent="space-between"
-          alignItems="center"
-          className={classes.footer}
-        >
-          {!!usersError && (
-            <Typography
-              component="p"
-              variant="body1"
-              className={classes.errorText}
-            >
-              {usersError}
-            </Typography>
-          )}
-          <Grid
-            item
-            flexDirection="row"
-            justifyContent="flex-end"
-          >
-            <CustomButton
-              onClick={handleClose}
-              size="medium"
-              className={classes.cancelButton}
-              variant={desktop ? "outline" : "gray"}
-              type="button"
-              data-cy="button-cancel-create-shared-folder"
-            >
-              <Trans>Cancel</Trans>
-            </CustomButton>
-            <Button
-              variant="primary"
-              size={desktop ? "medium" : "large"}
-              type="submit"
-              className={classes.okButton}
-              loading={isCreatingSharedFolder || isEditingSharedFolder}
-              onClick={mode === "create" ? onCreateSharedFolder : onEditSharedFolder}
-              disabled={mode === "create" ? (!!usersError || !!nameError) : !hasPermissionsChanged || !!usersError}
-              data-cy={mode === "create" ? "button-create-shared-folder" : "button-update-shared-folder"}
-            >
-              {mode === "create"
-                ? <Trans>Create</Trans>
-                : <Trans>Update</Trans>
-              }
-            </Button>
-          </Grid>
-        </Grid>
-      </div>
-    </CustomModal>
-  )
-}
-
-export default CreateOrEditSharedFolderModal
diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/CreateOrManageSharedFolder.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/CreateOrManageSharedFolder.tsx
index 489c4ccebd..db57cbd247 100644
--- a/packages/files-ui/src/Components/Modules/FileBrowsers/CreateOrManageSharedFolder.tsx
+++ b/packages/files-ui/src/Components/Modules/FileBrowsers/CreateOrManageSharedFolder.tsx
@@ -27,15 +27,6 @@ const useStyles = makeStyles(
       okButton: {
         marginLeft: constants.generalUnit
       },
-      cancelButton: {
-        [breakpoints.down("md")]: {
-          position: "fixed",
-          bottom: 0,
-          left: 0,
-          width: "100%",
-          height: constants?.mobileButtonHeight
-        }
-      },
       label: {
         fontSize: 14,
         lineHeight: "22px"
@@ -278,7 +269,6 @@ const CreateOrManageSharedFolder = ({ mode, onClose, bucketToEdit }: ICreateOrMa
           <CustomButton
             onClick={handleClose}
             size="medium"
-            className={classes.cancelButton}
             variant={desktop ? "outline" : "gray"}
             type="button"
             data-cy="button-cancel-create-shared-folder"
diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/CreateOrManageSharedFolderModal.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/CreateOrManageSharedFolderModal.tsx
index 94e3da4c65..3ab36a5845 100644
--- a/packages/files-ui/src/Components/Modules/FileBrowsers/CreateOrManageSharedFolderModal.tsx
+++ b/packages/files-ui/src/Components/Modules/FileBrowsers/CreateOrManageSharedFolderModal.tsx
@@ -13,17 +13,13 @@ const useStyles = makeStyles(
       modalRoot: {
         zIndex: zIndex?.blocker,
         [breakpoints.down("md")]: {
-          paddingBottom: Number(constants?.mobileButtonHeight) + constants.generalUnit
+          paddingBottom: Number(constants?.mobileButtonHeight)
         }
       },
       modalInner: {
         backgroundColor: constants.modalDefault.backgroundColor,
         color: constants.modalDefault.color,
         [breakpoints.down("md")]: {
-          bottom:
-          Number(constants?.mobileButtonHeight) + constants.generalUnit,
-          borderTopLeftRadius: `${constants.generalUnit * 1.5}px`,
-          borderTopRightRadius: `${constants.generalUnit * 1.5}px`,
           maxWidth: `${breakpoints.width("md")}px !important`
         }
       },
@@ -63,6 +59,7 @@ const CreateOrManageSharedFolderModal = (
           bucketId={bucketToEdit.id}
         />
       )}
+      mobileStickyBottom={false}
     >
       <CreateOrManageSharedFolder
         onClose={onClose}
diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/FileInfoModal.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/FileInfoModal.tsx
index 3a7d8582f9..8fad35483c 100644
--- a/packages/files-ui/src/Components/Modules/FileBrowsers/FileInfoModal.tsx
+++ b/packages/files-ui/src/Components/Modules/FileBrowsers/FileInfoModal.tsx
@@ -1,7 +1,8 @@
 import {
   createStyles,
   debounce,
-  makeStyles
+  makeStyles,
+  useThemeSwitcher
 } from "@chainsafe/common-theme"
 import React, { useState, useEffect } from "react"
 import CustomModal from "../../Elements/CustomModal"
@@ -28,31 +29,16 @@ const useStyles = makeStyles(
       modalRoot: {
         zIndex: zIndex?.blocker,
         [breakpoints.down("md")]: {
-          paddingBottom: Number(constants?.mobileButtonHeight) + constants.generalUnit
+          paddingBottom: Number(constants?.mobileButtonHeight)
         }
       },
       modalInner: {
         backgroundColor: constants.fileInfoModal.background,
         color: constants.fileInfoModal.color,
         [breakpoints.down("md")]: {
-          bottom:
-            Number(constants?.mobileButtonHeight) + constants.generalUnit,
-          borderTopLeftRadius: `${constants.generalUnit * 1.5}px`,
-          borderTopRightRadius: `${constants.generalUnit * 1.5}px`,
           maxWidth: `${breakpoints.width("md")}px !important`
         }
       },
-      closeButton: {
-        flex: 1,
-        [breakpoints.down("md")]: {
-          position: "fixed",
-          bottom: 0,
-          left: 0,
-          width: "100%",
-          height: constants?.mobileButtonHeight,
-          margin: 0
-        }
-      },
       title: {
         fontWeight: typography.fontWeight.semibold,
         textAlign: "left",
@@ -166,9 +152,9 @@ const FileInfoModal = ({ filePath, close }: IFileInfoModuleProps) => {
   const [loadingFileInfo, setLoadingInfo] = useState(false)
   const [fullFileInfo, setFullFullInfo] = useState<FileFullInfo | undefined>()
   const { bucket } = useFileBrowser()
+  const { desktop } = useThemeSwitcher()
 
   useEffect(() => {
-
     if (!bucket) return
 
     setLoadingInfo(true)
@@ -439,8 +425,7 @@ const FileInfoModal = ({ filePath, close }: IFileInfoModuleProps) => {
             <CustomButton
               onClick={() => close()}
               size="large"
-              className={classes.closeButton}
-              variant="outline"
+              variant={desktop ? "outline" : "gray"}
               type="button"
             >
               <Trans>Close</Trans>
diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/MoveFileModal.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/MoveFileModal.tsx
index 4e4715db66..b3d8dae63b 100644
--- a/packages/files-ui/src/Components/Modules/FileBrowsers/MoveFileModal.tsx
+++ b/packages/files-ui/src/Components/Modules/FileBrowsers/MoveFileModal.tsx
@@ -19,32 +19,19 @@ const useStyles = makeStyles(
       modalRoot: {
         zIndex: zIndex?.blocker,
         [breakpoints.down("md")]: {
-          paddingBottom: Number(constants?.mobileButtonHeight) + constants.generalUnit
+          paddingBottom: Number(constants?.mobileButtonHeight)
         }
       },
       modalInner: {
         backgroundColor: constants.moveFileModal.background,
         color: constants.moveFileModal.color,
         [breakpoints.down("md")]: {
-          bottom:
-            Number(constants?.mobileButtonHeight) + constants.generalUnit,
-          borderTopLeftRadius: `${constants.generalUnit * 1.5}px`,
-          borderTopRightRadius: `${constants.generalUnit * 1.5}px`,
           maxWidth: `${breakpoints.width("md")}px !important`
         }
       },
       okButton: {
         marginLeft: constants.generalUnit
       },
-      cancelButton: {
-        [breakpoints.down("md")]: {
-          position: "fixed",
-          bottom: 0,
-          left: 0,
-          width: "100%",
-          height: constants?.mobileButtonHeight
-        }
-      },
       heading: {
         fontWeight: typography.fontWeight.semibold,
         textAlign: "left",
@@ -256,7 +243,6 @@ const MoveFileModule = ({ filesToMove, onClose, onCancel, mode }: IMoveFileModul
           <CustomButton
             onClick={onCancel}
             size="medium"
-            className={classes.cancelButton}
             variant={desktop ? "outline" : "gray"}
             type="button"
             data-cy={isInBin ? "button-cancel-recovery" : "button-cancel-move"}
diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/ReportFileModal.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/ReportFileModal.tsx
index a0d8001258..6e5eaa1572 100644
--- a/packages/files-ui/src/Components/Modules/FileBrowsers/ReportFileModal.tsx
+++ b/packages/files-ui/src/Components/Modules/FileBrowsers/ReportFileModal.tsx
@@ -1,7 +1,8 @@
 import {
   createStyles,
   debounce,
-  makeStyles
+  makeStyles,
+  useThemeSwitcher
 } from "@chainsafe/common-theme"
 import React, { useState, useEffect } from "react"
 import CustomModal from "../../Elements/CustomModal"
@@ -27,31 +28,19 @@ const useStyles = makeStyles(
       modalRoot: {
         zIndex: zIndex?.blocker,
         [breakpoints.down("md")]: {
-          paddingBottom: Number(constants?.mobileButtonHeight) + constants.generalUnit
+          paddingBottom: Number(constants?.mobileButtonHeight)
         }
       },
       modalInner: {
         backgroundColor: constants.fileInfoModal.background,
         color: constants.fileInfoModal.color,
         [breakpoints.down("md")]: {
-          bottom:
-            Number(constants?.mobileButtonHeight) + constants.generalUnit,
-          borderTopLeftRadius: `${constants.generalUnit * 1.5}px`,
-          borderTopRightRadius: `${constants.generalUnit * 1.5}px`,
           maxWidth: `${breakpoints.width("md")}px !important`
         }
       },
       closeButton: {
         flex: 1,
-        marginLeft: constants.generalUnit * 2,
-        [breakpoints.down("md")]: {
-          position: "fixed",
-          bottom: 0,
-          left: 0,
-          width: "100%",
-          height: constants?.mobileButtonHeight,
-          margin: 0
-        }
+        marginLeft: constants.generalUnit * 2
       },
       title: {
         fontWeight: typography.fontWeight.semibold,
@@ -88,7 +77,10 @@ const useStyles = makeStyles(
       },
       buttonsContainer: {
         display: "flex",
-        padding: `0 ${constants.generalUnit * 4}px ${constants.generalUnit * 4}px`
+        paddingTop: constants.generalUnit * 2,
+        paddingLeft: constants.generalUnit * 4,
+        paddingBottom: constants.generalUnit * 4,
+        paddingRight: constants.generalUnit * 4
       },
       copiedFlag: {
         display: "flex",
@@ -131,11 +123,7 @@ const useStyles = makeStyles(
       copyContainer: {
         position: "relative",
         flexBasis: "75%",
-        color: palette.additional["gray"][9],
-        [breakpoints.down("md")]: {
-          flexBasis: "100%",
-          margin: constants.generalUnit * 2
-        }
+        color: palette.additional["gray"][9]
       },
       decryptionKey: {
         width: "100%",
@@ -195,6 +183,7 @@ const ReportFileModal = ({ filePath, close }: IReportFileModalProps) => {
   const { encryptForPublicKey } = useThresholdKey()
   const [copied, setCopied] = useState(false)
   const { filesApiClient } = useFilesApi()
+  const { desktop } = useThemeSwitcher()
 
   useEffect(() => {
     filesApiClient.abuseUser()
@@ -393,7 +382,7 @@ const ReportFileModal = ({ filePath, close }: IReportFileModalProps) => {
             onClick={() => close()}
             size="large"
             className={classes.closeButton}
-            variant="outline"
+            variant={desktop ? "outline" : "gray"}
             type="button"
           >
             <Trans>Close</Trans>
diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemItem.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemItem.tsx
index 60a34af3d3..57007b4475 100644
--- a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemItem.tsx
+++ b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemItem.tsx
@@ -36,6 +36,7 @@ import { getPathWithFile } from "../../../../../Utils/pathUtils"
 import { BucketUser } from "@chainsafe/files-api-client"
 import { useMemo } from "react"
 import { nameValidator } from "../../../../../Utils/validationSchema"
+import CustomButton from "../../../../Elements/CustomButton"
 
 const useStyles = makeStyles(({ breakpoints, constants }: CSFTheme) => {
   return createStyles({
@@ -47,17 +48,11 @@ const useStyles = makeStyles(({ breakpoints, constants }: CSFTheme) => {
     },
     modalRoot: {
       [breakpoints.down("md")]: {
-        paddingBottom: Number(constants?.mobileButtonHeight) + constants.generalUnit
+        paddingBottom: Number(constants?.mobileButtonHeight)
       }
     },
     modalInner: {
       [breakpoints.down("md")]: {
-        bottom:
-          Number(constants?.mobileButtonHeight) + constants.generalUnit,
-        borderTopLeftRadius: `${constants.generalUnit * 1.5}px`,
-        borderTopRightRadius: `${constants.generalUnit * 1.5}px`,
-        borderBottomLeftRadius: `${constants.generalUnit * 1.5}px`,
-        borderBottomRightRadius: `${constants.generalUnit * 1.5}px`,
         maxWidth: `${breakpoints.width("md")}px !important`
       }
     },
@@ -92,15 +87,6 @@ const useStyles = makeStyles(({ breakpoints, constants }: CSFTheme) => {
     okButton: {
       marginLeft: constants.generalUnit
     },
-    cancelButton: {
-      [breakpoints.down("md")]: {
-        position: "fixed",
-        bottom: 0,
-        left: 0,
-        width: "100%",
-        height: constants?.mobileButtonHeight
-      }
-    },
     menuIcon: {
       display: "flex",
       justifyContent: "center",
@@ -561,15 +547,14 @@ const FileSystemItem = ({
                     }
                   </div>
                   <footer className={classes.renameFooter}>
-                    <Button
+                    <CustomButton
                       onClick={() => setEditing("")}
                       size="medium"
-                      className={classes.cancelButton}
-                      variant="outline"
+                      variant={desktop ? "outline" : "gray"}
                       type="button"
                     >
                       <Trans>Cancel</Trans>
-                    </Button>
+                    </CustomButton>
                     <Button
                       variant="primary"
                       size="medium"
diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/SharedFolderRow.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/SharedFolderRow.tsx
index 144f62692e..e92b6511d2 100644
--- a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/SharedFolderRow.tsx
+++ b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/SharedFolderRow.tsx
@@ -27,6 +27,7 @@ import { nameValidator } from "../../../../../Utils/validationSchema"
 import Menu from "../../../../../UI-components/Menu"
 import { getUserDisplayName } from "../../../../../Utils/getUserDisplayName"
 import CustomModal from "../../../../Elements/CustomModal"
+import CustomButton from "../../../../Elements/CustomButton"
 
 const useStyles = makeStyles(({ breakpoints, constants, palette }: CSFTheme) => {
 
@@ -116,17 +117,11 @@ const useStyles = makeStyles(({ breakpoints, constants, palette }: CSFTheme) =>
     },
     modalRoot: {
       [breakpoints.down("md")]: {
-        paddingBottom: Number(constants?.mobileButtonHeight) + constants.generalUnit
+        paddingBottom: Number(constants?.mobileButtonHeight)
       }
     },
     modalInner: {
       [breakpoints.down("md")]: {
-        bottom:
-          Number(constants?.mobileButtonHeight) + constants.generalUnit,
-        borderTopLeftRadius: `${constants.generalUnit * 1.5}px`,
-        borderTopRightRadius: `${constants.generalUnit * 1.5}px`,
-        borderBottomLeftRadius: `${constants.generalUnit * 1.5}px`,
-        borderBottomRightRadius: `${constants.generalUnit * 1.5}px`,
         maxWidth: `${breakpoints.width("md")}px !important`
       }
     },
@@ -144,15 +139,6 @@ const useStyles = makeStyles(({ breakpoints, constants, palette }: CSFTheme) =>
     },
     okButton: {
       marginLeft: constants.generalUnit
-    },
-    cancelButton: {
-      [breakpoints.down("md")]: {
-        position: "fixed",
-        bottom: 0,
-        left: 0,
-        width: "100%",
-        height: constants?.mobileButtonHeight
-      }
     }
   })
 })
@@ -373,15 +359,14 @@ const SharedFolderRow = ({ bucket, handleRename, openSharedFolder, handleDeleteS
                     autoFocus={isRenaming}
                   />
                   <footer className={classes.renameFooter}>
-                    <Button
+                    <CustomButton
                       onClick={() => setIsRenaming(false)}
                       size="medium"
-                      className={classes.cancelButton}
-                      variant="outline"
+                      variant={desktop ? "outline" : "gray"}
                       type="button"
                     >
                       <Trans>Cancel</Trans>
-                    </Button>
+                    </CustomButton>
                     <Button
                       variant="primary"
                       size="medium"
diff --git a/packages/files-ui/src/Components/Modules/Settings/SecurityTab/SavedBrowsers/BrowserPanel.tsx b/packages/files-ui/src/Components/Modules/Settings/SecurityTab/SavedBrowsers/BrowserPanel.tsx
index 132fa85af1..b49108aa76 100644
--- a/packages/files-ui/src/Components/Modules/Settings/SecurityTab/SavedBrowsers/BrowserPanel.tsx
+++ b/packages/files-ui/src/Components/Modules/Settings/SecurityTab/SavedBrowsers/BrowserPanel.tsx
@@ -1,7 +1,8 @@
 import React, { useCallback, useState } from "react"
 import {
   makeStyles,
-  createStyles
+  createStyles,
+  useThemeSwitcher
 } from "@chainsafe/common-theme"
 import { CSFTheme } from "../../../../../Themes/types"
 import { Button, ExpansionPanel, Typography } from "@chainsafe/common-components"
@@ -10,6 +11,7 @@ import { Trans } from "@lingui/macro"
 import dayjs from "dayjs"
 import { BrowserShare, useThresholdKey } from "../../../../../Contexts/ThresholdKeyContext"
 import CustomModal from "../../../../Elements/CustomModal"
+import CustomButton from "../../../../Elements/CustomButton"
 
 const useStyles = makeStyles(({ palette, constants, animation, breakpoints }: CSFTheme) =>
   createStyles({
@@ -85,8 +87,6 @@ const useStyles = makeStyles(({ palette, constants, animation, breakpoints }: CS
       backgroundColor: constants.actionModal.backgroundColor,
       color: constants.actionModal.color,
       [breakpoints.down("md")]: {
-        borderTopLeftRadius: `${constants.generalUnit * 1.5}px`,
-        borderTopRightRadius: `${constants.generalUnit * 1.5}px`,
         maxWidth: `${breakpoints.width("md")}px !important`
       }
     }
@@ -110,6 +110,7 @@ const BrowserPanel = ({ dateAdded, shareIndex, browser, os }: BrowserShare) => {
   const [loadingDeleteShare, setLoadingDeleteShare] = useState(false)
   const [loadingDownloadKey, setLoadingDownloadKey] = useState(false)
   const [isModalConfirmationOpen, setIsModalConfirmationOpen] = useState(false)
+  const { desktop } = useThemeSwitcher()
 
   const onDeleteShare = useCallback(() => {
     setLoadingDeleteShare(true)
@@ -214,14 +215,14 @@ const BrowserPanel = ({ dateAdded, shareIndex, browser, os }: BrowserShare) => {
                     <Trans>By forgetting this browser, you will not be able to use its associated recovery key to sign-in.</Trans>
                   </Typography>
                   <div className={classes.modalFooter}>
-                    <Button
-                      variant="outline"
+                    <CustomButton
+                      variant={desktop ? "outline" : "gray"}
                       onClick={() => setIsModalConfirmationOpen(false)}
                       className={classes.cancelButton}
                       disabled={loadingDeleteShare}
                     >
                       <Trans>Cancel</Trans>
-                    </Button>
+                    </CustomButton>
                     <Button
                       variant="primary"
                       onClick={onDeleteShare}
diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCard/AddCard.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCard/AddCard.tsx
index a95e180708..d599365cc6 100644
--- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCard/AddCard.tsx
+++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCard/AddCard.tsx
@@ -1,6 +1,6 @@
 import React, { FormEvent, useMemo, useState } from "react"
 import { Button, Grid, Typography, useToasts } from "@chainsafe/common-components"
-import { createStyles, makeStyles, useTheme } from "@chainsafe/common-theme"
+import { createStyles, makeStyles, useTheme, useThemeSwitcher } from "@chainsafe/common-theme"
 import { CSFTheme } from "../../../../../Themes/types"
 import CustomButton from "../../../../Elements/CustomButton"
 import { t, Trans } from "@lingui/macro"
@@ -23,15 +23,6 @@ const useStyles = makeStyles(
       okButton: {
         marginLeft: constants.generalUnit
       },
-      cancelButton: {
-        [breakpoints.down("md")]: {
-          position: "fixed",
-          bottom: 0,
-          left: 0,
-          width: "100%",
-          height: constants?.mobileButtonHeight
-        }
-      },
       label: {
         fontSize: 14,
         lineHeight: "22px"
@@ -103,6 +94,7 @@ const AddCard = ({ onClose, onCardAdd, footerClassName, submitText, goBack }: IA
   const [cardAddError, setCardAddError] = useState<string | undefined>(undefined)
   const theme: CSFTheme = useTheme()
   const isUpdate = useMemo(() => !!defaultCard, [defaultCard])
+  const { desktop } = useThemeSwitcher()
 
   const [loadingPaymentMethodAdd, setLoadingPaymentMethodAdd] = useState(false)
 
@@ -232,8 +224,7 @@ const AddCard = ({ onClose, onCardAdd, footerClassName, submitText, goBack }: IA
               data-cy="button-cancel-create-folder"
               onClick={onClose}
               size="medium"
-              className={classes.cancelButton}
-              variant="outline"
+              variant={desktop ? "outline" : "gray"}
               type="button"
               disabled={loadingPaymentMethodAdd}
             >
diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCard/AddCardModal.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCard/AddCardModal.tsx
index 7c34316924..a2e264ff9f 100644
--- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCard/AddCardModal.tsx
+++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCard/AddCardModal.tsx
@@ -21,10 +21,6 @@ const useStyles = makeStyles(
         backgroundColor: constants.createFolder.backgroundColor,
         color: constants.createFolder.color,
         [breakpoints.down("md")]: {
-          bottom:
-          Number(constants?.mobileButtonHeight) + constants.generalUnit,
-          borderTopLeftRadius: `${constants.generalUnit * 1.5}px`,
-          borderTopRightRadius: `${constants.generalUnit * 1.5}px`,
           maxWidth: `${breakpoints.width("md")}px !important`
         }
       },
diff --git a/packages/files-ui/src/Components/SharingExplainerModal.tsx b/packages/files-ui/src/Components/SharingExplainerModal.tsx
index 3d206a7a20..9d79446399 100644
--- a/packages/files-ui/src/Components/SharingExplainerModal.tsx
+++ b/packages/files-ui/src/Components/SharingExplainerModal.tsx
@@ -162,7 +162,6 @@ const SharingExplainerModal = ({ showModal, onHide }: Props) => {
       closePosition="right"
       maxWidth="sm"
       onClose={onHide}
-      mobileStickyBottom={false}
       testId="sharing-explainer"
     >
       <div className={classes.root}>
diff --git a/packages/files-ui/src/locales/de/messages.po b/packages/files-ui/src/locales/de/messages.po
index 89bcd34d37..360e2f358e 100644
--- a/packages/files-ui/src/locales/de/messages.po
+++ b/packages/files-ui/src/locales/de/messages.po
@@ -997,9 +997,6 @@ msgstr "Aktualisieren"
 msgid "Update Card"
 msgstr ""
 
-msgid "Update Shared Folder"
-msgstr ""
-
 msgid "Update card"
 msgstr ""
 
diff --git a/packages/files-ui/src/locales/en/messages.po b/packages/files-ui/src/locales/en/messages.po
index 342347daee..e19a780d30 100644
--- a/packages/files-ui/src/locales/en/messages.po
+++ b/packages/files-ui/src/locales/en/messages.po
@@ -1000,9 +1000,6 @@ msgstr "Update"
 msgid "Update Card"
 msgstr "Update Card"
 
-msgid "Update Shared Folder"
-msgstr "Update Shared Folder"
-
 msgid "Update card"
 msgstr "Update card"
 
diff --git a/packages/files-ui/src/locales/es/messages.po b/packages/files-ui/src/locales/es/messages.po
index 23a93cd822..1a6e4e4a3c 100644
--- a/packages/files-ui/src/locales/es/messages.po
+++ b/packages/files-ui/src/locales/es/messages.po
@@ -1001,9 +1001,6 @@ msgstr "Actualizar"
 msgid "Update Card"
 msgstr ""
 
-msgid "Update Shared Folder"
-msgstr ""
-
 msgid "Update card"
 msgstr ""
 
diff --git a/packages/files-ui/src/locales/fr/messages.po b/packages/files-ui/src/locales/fr/messages.po
index eac45074fb..f12b053dc3 100644
--- a/packages/files-ui/src/locales/fr/messages.po
+++ b/packages/files-ui/src/locales/fr/messages.po
@@ -1001,9 +1001,6 @@ msgstr "Mettre à jour"
 msgid "Update Card"
 msgstr "Mettre à jour la carte"
 
-msgid "Update Shared Folder"
-msgstr "Mettre à jour le dossier partagé"
-
 msgid "Update card"
 msgstr "Mettre à jour la carte"
 
diff --git a/packages/files-ui/src/locales/no/messages.po b/packages/files-ui/src/locales/no/messages.po
index a31e6e0992..047bfde91c 100644
--- a/packages/files-ui/src/locales/no/messages.po
+++ b/packages/files-ui/src/locales/no/messages.po
@@ -997,9 +997,6 @@ msgstr "Oppdater"
 msgid "Update Card"
 msgstr ""
 
-msgid "Update Shared Folder"
-msgstr ""
-
 msgid "Update card"
 msgstr ""