diff --git a/packages/common-components/src/Button/Button.tsx b/packages/common-components/src/Button/Button.tsx
index 46d22b620c..0d5e02a831 100644
--- a/packages/common-components/src/Button/Button.tsx
+++ b/packages/common-components/src/Button/Button.tsx
@@ -19,7 +19,6 @@ const useStyles = makeStyles(
         border: "none",
         outline: "none",
         "& svg": {
-          transitionDuration: `${animation.transform}ms`,
           margin: `${0}px ${constants.generalUnit / 2}px 0`
         },
         "&.large": {
@@ -49,12 +48,10 @@ const useStyles = makeStyles(
         color: "inherit",
         textDecoration: "underline",
         cursor: "pointer",
-        transitionDuration: `${animation.transform}ms`,
         border: "none",
         background: "none",
         outline: "none",
         "& svg": {
-          transitionDuration: `${animation.transform}ms`,
           margin: `${0}px ${constants.generalUnit / 2}px 0`
         }
       },
@@ -94,7 +91,7 @@ const useStyles = makeStyles(
           fill: palette.common.white.main
         },
         "&:hover": {
-          backgroundColor: palette.primary.hover,
+          backgroundColor: palette.primary.main,
           color: palette.common.white.main,
           ...overrides?.Button?.variants?.secondary?.hover
         },
@@ -114,12 +111,15 @@ const useStyles = makeStyles(
         backgroundColor: "transparent",
         color: palette.additional["gray"][9],
         "&:hover": {
+          color: palette.primary.main,
           ...overrides?.Button?.variants?.text?.hover
         },
         "&:focus": {
+          color: palette.primary.main,
           ...overrides?.Button?.variants?.text?.focus
         },
         "&:active": {
+          color: palette.primary.main,
           ...overrides?.Button?.variants?.text?.active
         },
         ...overrides?.Button?.variants?.text?.root
diff --git a/packages/common-components/src/Icons/SvgIcon.tsx b/packages/common-components/src/Icons/SvgIcon.tsx
index 93f2256ace..3ce1e59832 100644
--- a/packages/common-components/src/Icons/SvgIcon.tsx
+++ b/packages/common-components/src/Icons/SvgIcon.tsx
@@ -4,7 +4,7 @@ import { capitalize } from "../utils/stringUtils"
 import { ITheme, makeStyles, createStyles } from "@chainsafe/common-theme"
 
 const useStyles = makeStyles(
-  ({ animation, palette, constants, overrides }: ITheme) =>
+  ({  palette, constants, overrides }: ITheme) =>
     createStyles({
       root: {
         userSelect: "none",
@@ -12,7 +12,6 @@ const useStyles = makeStyles(
         height: "1em",
         display: "inline-block",
         fontSize: "1.5em",
-        transition: `all ${animation.transform}ms`,
         ...overrides?.Icons?.root
       },
       colorPrimary: {
diff --git a/packages/files-ui/src/Components/Elements/Notifications/NotificationsDropdown.tsx b/packages/files-ui/src/Components/Elements/Notifications/NotificationsDropdown.tsx
index 92f3cf8d47..f9f3ba2bde 100644
--- a/packages/files-ui/src/Components/Elements/Notifications/NotificationsDropdown.tsx
+++ b/packages/files-ui/src/Components/Elements/Notifications/NotificationsDropdown.tsx
@@ -14,7 +14,7 @@ const useStyles = makeStyles(({ animation, palette, constants, breakpoints, over
       height: constants.generalUnit * 4,
       padding: `0 ${constants.generalUnit}px !important`,
       backgroundColor: palette.additional["gray"][3],
-      color: palette.common.black.main,
+      color: palette.additional["gray"][10],
       borderRadius: `${constants.generalUnit / 4}px`,
       display: "flex",
       justifyContent: "center",
diff --git a/packages/files-ui/src/Components/Elements/ShareTransferRequestModal.tsx b/packages/files-ui/src/Components/Elements/ShareTransferRequestModal.tsx
index 321d3d6d81..ef9ec57aa4 100644
--- a/packages/files-ui/src/Components/Elements/ShareTransferRequestModal.tsx
+++ b/packages/files-ui/src/Components/Elements/ShareTransferRequestModal.tsx
@@ -1,5 +1,5 @@
 import { Button, Loading, Typography } from "@chainsafe/common-components"
-import { createStyles, makeStyles, useThemeSwitcher } from "@chainsafe/common-theme"
+import { createStyles, makeStyles } from "@chainsafe/common-theme"
 import { Trans } from "@lingui/macro"
 import dayjs from "dayjs"
 import React, { useCallback, useEffect, useMemo, useState } from "react"
@@ -49,7 +49,6 @@ const useStyles = makeStyles(({ constants }: CSFTheme) =>
 
 const ShareTransferRequestModal = ({ requests }: Props) => {
   const { approveShareTransferRequest, rejectShareTransferRequest, clearShareTransferRequests } = useThresholdKey()
-  const { desktop } = useThemeSwitcher()
   const classes = useStyles()
   const [isLoadingApprove, setIsLoadingApprove] = useState(false)
   const [isLoadingReject, setIsLoadingReject] = useState(false)
@@ -103,7 +102,7 @@ const ShareTransferRequestModal = ({ requests }: Props) => {
         <div className={classes.buttonWrapper}>
           <Button
             className={classes.button}
-            variant={desktop ? "primary" : "outline"}
+            variant="primary"
             size="large"
             loading={isLoadingApprove}
             disabled={isLoadingReject || isLoadingApprove || isClearing}
@@ -112,7 +111,7 @@ const ShareTransferRequestModal = ({ requests }: Props) => {
           </Button>
           <Button
             className={classes.button}
-            variant={desktop ? "primary" : "outline"}
+            variant="outline"
             size="large"
             loading={isLoadingReject}
             disabled={isLoadingApprove || isLoadingReject || isClearing}
diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/CreateFolderModal.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/CreateFolderModal.tsx
index c754ae0000..2af1e773f7 100644
--- a/packages/files-ui/src/Components/Modules/FileBrowsers/CreateFolderModal.tsx
+++ b/packages/files-ui/src/Components/Modules/FileBrowsers/CreateFolderModal.tsx
@@ -162,7 +162,7 @@ const CreateFolderModal = ({ modalOpen, close }: ICreateFolderModalProps) => {
                 data-cy="button-cancel-create-folder"
                 onClick={onCancel}
                 size="medium"
-                variant={desktop ? "outline" : "gray"}
+                variant="outline"
                 type="button"
               >
                 <Trans>Cancel</Trans>
diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/FileInfoModal.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/FileInfoModal.tsx
index 8fad35483c..020d7e7e60 100644
--- a/packages/files-ui/src/Components/Modules/FileBrowsers/FileInfoModal.tsx
+++ b/packages/files-ui/src/Components/Modules/FileBrowsers/FileInfoModal.tsx
@@ -1,9 +1,4 @@
-import {
-  createStyles,
-  debounce,
-  makeStyles,
-  useThemeSwitcher
-} from "@chainsafe/common-theme"
+import { createStyles, debounce, makeStyles } from "@chainsafe/common-theme"
 import React, { useState, useEffect } from "react"
 import CustomModal from "../../Elements/CustomModal"
 import CustomButton from "../../Elements/CustomButton"
@@ -152,7 +147,6 @@ 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
@@ -425,7 +419,7 @@ const FileInfoModal = ({ filePath, close }: IFileInfoModuleProps) => {
             <CustomButton
               onClick={() => close()}
               size="large"
-              variant={desktop ? "outline" : "gray"}
+              variant="outline"
               type="button"
             >
               <Trans>Close</Trans>
diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/ManageSharedFolder.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/ManageSharedFolder.tsx
index b6bcbf4165..c8352861c8 100644
--- a/packages/files-ui/src/Components/Modules/FileBrowsers/ManageSharedFolder.tsx
+++ b/packages/files-ui/src/Components/Modules/FileBrowsers/ManageSharedFolder.tsx
@@ -1,5 +1,5 @@
 import { Button, ShareAltSvg, Typography, Grid, TextInput, CrossIcon } from "@chainsafe/common-components"
-import { createStyles, debounce, makeStyles, useOnClickOutside, useThemeSwitcher } from "@chainsafe/common-theme"
+import { createStyles, debounce, makeStyles, useOnClickOutside } from "@chainsafe/common-theme"
 import React, { useState, useCallback, useRef } from "react"
 import { CSFTheme } from "../../../Themes/types"
 import { BucketKeyPermission } from "../../../Contexts/FilesContext"
@@ -90,7 +90,7 @@ const useStyles = makeStyles(
       suggestionsDropDown: {
         position: "absolute",
         width: "100%",
-        backgroundColor: palette.common.white.main,
+        backgroundColor: palette.additional["gray"][1],
         border: `1px solid ${palette.additional["gray"][5]}`,
         zIndex: zIndex?.layer1
       },
@@ -178,7 +178,6 @@ interface ICreateOrManageSharedFolderProps {
 
 const CreateOrManageSharedFolder = ({ onClose, bucketToEdit }: ICreateOrManageSharedFolderProps) => {
   const classes = useStyles()
-  const { desktop } = useThemeSwitcher()
   const { handleEditSharedFolder, isEditingSharedFolder, isCreatingSharedFolder } = useCreateOrEditSharedFolder()
   const { sharedFolderReaders,
     sharedFolderWriters,
@@ -410,7 +409,7 @@ const CreateOrManageSharedFolder = ({ onClose, bucketToEdit }: ICreateOrManageSh
           <CustomButton
             onClick={handleClose}
             size="large"
-            variant={desktop ? "outline" : "gray"}
+            variant="outline"
             type="button"
             data-cy="button-cancel-create-shared-folder"
           >
diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/MoveFileModal.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/MoveFileModal.tsx
index b3d8dae63b..5c011b0e38 100644
--- a/packages/files-ui/src/Components/Modules/FileBrowsers/MoveFileModal.tsx
+++ b/packages/files-ui/src/Components/Modules/FileBrowsers/MoveFileModal.tsx
@@ -243,7 +243,7 @@ const MoveFileModule = ({ filesToMove, onClose, onCancel, mode }: IMoveFileModul
           <CustomButton
             onClick={onCancel}
             size="medium"
-            variant={desktop ? "outline" : "gray"}
+            variant="outline"
             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 6e5eaa1572..6f516f098c 100644
--- a/packages/files-ui/src/Components/Modules/FileBrowsers/ReportFileModal.tsx
+++ b/packages/files-ui/src/Components/Modules/FileBrowsers/ReportFileModal.tsx
@@ -1,9 +1,4 @@
-import {
-  createStyles,
-  debounce,
-  makeStyles,
-  useThemeSwitcher
-} from "@chainsafe/common-theme"
+import { createStyles, debounce, makeStyles } from "@chainsafe/common-theme"
 import React, { useState, useEffect } from "react"
 import CustomModal from "../../Elements/CustomModal"
 import CustomButton from "../../Elements/CustomButton"
@@ -183,7 +178,6 @@ const ReportFileModal = ({ filePath, close }: IReportFileModalProps) => {
   const { encryptForPublicKey } = useThresholdKey()
   const [copied, setCopied] = useState(false)
   const { filesApiClient } = useFilesApi()
-  const { desktop } = useThemeSwitcher()
 
   useEffect(() => {
     filesApiClient.abuseUser()
@@ -382,7 +376,7 @@ const ReportFileModal = ({ filePath, close }: IReportFileModalProps) => {
             onClick={() => close()}
             size="large"
             className={classes.closeButton}
-            variant={desktop ? "outline" : "gray"}
+            variant="outline"
             type="button"
           >
             <Trans>Close</Trans>
diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx
index 0ce0ef5013..e4ef0eac82 100644
--- a/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx
+++ b/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx
@@ -206,7 +206,7 @@ const SharedFolderOverview = () => {
           <div className={classes.loadingContainer}>
             <Loading
               size={24}
-              type="light"
+              type="initial"
             />
             <Typography
               variant="body2"
diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx
index dfd61a51c3..01a8e9c79d 100644
--- a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx
+++ b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx
@@ -214,7 +214,7 @@ const useStyles = makeStyles(
         zIndex: zIndex?.layer4,
         bottom: 0,
         transform: "translateX(-50%)",
-        backgroundColor: palette.common.black.main,
+        backgroundColor: palette.additional["gray"][10],
         color: constants.filesTable.uploadText,
         opacity: 0,
         visibility: "hidden",
diff --git a/packages/files-ui/src/Components/Modules/FilePreviewModal.tsx b/packages/files-ui/src/Components/Modules/FilePreviewModal.tsx
index 72074ed2d8..5589911985 100644
--- a/packages/files-ui/src/Components/Modules/FilePreviewModal.tsx
+++ b/packages/files-ui/src/Components/Modules/FilePreviewModal.tsx
@@ -80,13 +80,12 @@ const useStyles = makeStyles(
       },
       closePreviewButton: {
         marginRight: constants.generalUnit * 2,
-        cursor: "pointer",
-        "& > * > svg":{
-          stroke: constants.previewModal.closeButtonColor
+        "& svg":{
+          stroke: constants.previewModal.headerButtonColor
         }
       },
       downloadIcon: {
-        fill: constants.previewModal.closeButtonColor
+        fill: constants.previewModal.headerButtonColor
       },
       fileName: {
         width: "100%",
@@ -104,9 +103,32 @@ const useStyles = makeStyles(
         alignItems: "center"
       },
       prevNextButton: {
-        backgroundColor: palette.common.black.main,
+        backgroundColor: constants.previewModal.controlsBackgroundColor,
+        color: constants.previewModal.controlsButtonColor,
         padding: `${constants.generalUnit * 2}px !important`,
-        borderRadius: constants.generalUnit * 4
+        borderRadius: constants.generalUnit * 4,
+        border: "none",
+        "& svg": {
+          fill: constants.previewModal.controlsButtonColor
+        },
+        "&:hover": {
+          backgroundColor: constants.previewModal.controlsBackgroundHoverColor,
+          "& svg": {
+            fill: constants.previewModal.controlsButtonColor
+          }
+        },
+        "&:active": {
+          backgroundColor: constants.previewModal.controlsBackgroundHoverColor,
+          "& svg": {
+            fill: constants.previewModal.controlsButtonColor
+          }
+        },
+        "&:focus": {
+          backgroundColor: constants.previewModal.controlsBackgroundHoverColor,
+          "& svg": {
+            fill: constants.previewModal.controlsButtonColor
+          }
+        }
       },
       previewContent: {
         color: constants.previewModal.message,
@@ -277,8 +299,9 @@ const FilePreviewModal = ({ file, nextFile, previousFile, closePreview, filePath
           onClick={handleDownload}
           variant="text"
           data-cy="button-download-previewed-file"
+          className={classes.downloadIcon}
         >
-          <DownloadIcon className={classes.downloadIcon}/>
+          <DownloadIcon />
         </Button>
         <Button
           onClick={closePreview}
diff --git a/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx b/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx
index 78bd69b78c..a40a5c574d 100644
--- a/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx
+++ b/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx
@@ -44,7 +44,13 @@ const useStyles = makeStyles(
         borderRadius: 2
       },
       imageControlButton: {
-        borderRadius: 0
+        borderRadius: 0,
+        backgroundColor: "#262626",
+        color: "#D9D9D9",
+        border: "none",
+        "& svg": {
+          fill: "#D9D9D9"
+        }
       }
     })
 )
diff --git a/packages/files-ui/src/Components/Modules/PreviewRenderers/PDFPreview.tsx b/packages/files-ui/src/Components/Modules/PreviewRenderers/PDFPreview.tsx
index 542e6584bc..5b4715cf19 100644
--- a/packages/files-ui/src/Components/Modules/PreviewRenderers/PDFPreview.tsx
+++ b/packages/files-ui/src/Components/Modules/PreviewRenderers/PDFPreview.tsx
@@ -25,7 +25,11 @@ const useStyles = makeStyles(({ constants, zIndex }: ITheme) =>
     pageButton: {
       borderRadius: 0,
       backgroundColor: "#262626",
-      border: "none"
+      color: "#D9D9D9",
+      border: "none",
+      "& svg": {
+        fill: "#D9D9D9"
+      }
     },
     paginationInfo: {
       paddingLeft: constants.generalUnit * 2,
@@ -75,6 +79,7 @@ const PdfPreview: React.FC<IPreviewRendererProps> = ({ contents }) => {
         <Button
           onClick={prevPage}
           className={classes.pageButton}
+          variant="secondary"
         >
           <CaretCircleLeftIcon />
         </Button>
@@ -84,6 +89,7 @@ const PdfPreview: React.FC<IPreviewRendererProps> = ({ contents }) => {
         <Button
           onClick={nextPage}
           className={classes.pageButton}
+          variant="secondary"
         >
           <CaretCircleRightIcon />
         </Button>
diff --git a/packages/files-ui/src/Components/Modules/PreviewRenderers/TextPreview.tsx b/packages/files-ui/src/Components/Modules/PreviewRenderers/TextPreview.tsx
index b92a1311c5..7ee3882bd5 100644
--- a/packages/files-ui/src/Components/Modules/PreviewRenderers/TextPreview.tsx
+++ b/packages/files-ui/src/Components/Modules/PreviewRenderers/TextPreview.tsx
@@ -49,7 +49,13 @@ const useStyles = makeStyles(({ palette, constants, typography, zIndex }: CSFThe
       borderColor: palette.additional["gray"][8]
     },
     controlButton: {
-      borderRadius: 0
+      borderRadius: 0,
+      backgroundColor: "#262626",
+      color: "#D9D9D9",
+      border: "none",
+      "& svg": {
+        fill: "#D9D9D9"
+      }
     }
   })
 )
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 1a9fd7067e..7843a1075b 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,5 +1,5 @@
 import React, { useCallback, useState } from "react"
-import { makeStyles, createStyles, useThemeSwitcher } from "@chainsafe/common-theme"
+import { makeStyles, createStyles } from "@chainsafe/common-theme"
 import { CSFTheme } from "../../../../../Themes/types"
 import { Button, ExpansionPanel, Typography } from "@chainsafe/common-components"
 import clsx from "clsx"
@@ -105,7 +105,6 @@ 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)
@@ -211,7 +210,7 @@ const BrowserPanel = ({ dateAdded, shareIndex, browser, os }: BrowserShare) => {
                   </Typography>
                   <div className={classes.modalFooter}>
                     <CustomButton
-                      variant={desktop ? "outline" : "gray"}
+                      variant="outline"
                       onClick={() => setIsModalConfirmationOpen(false)}
                       className={classes.cancelButton}
                       disabled={loadingDeleteShare}
diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/Common/AddCard.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/Common/AddCard.tsx
index ea13e0d315..b209b256a8 100644
--- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/Common/AddCard.tsx
+++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/Common/AddCard.tsx
@@ -1,6 +1,6 @@
 import React, { FormEvent, useMemo, useState } from "react"
 import { Button, Typography, useToasts } from "@chainsafe/common-components"
-import { createStyles, makeStyles, useTheme, useThemeSwitcher } from "@chainsafe/common-theme"
+import { createStyles, makeStyles, useTheme } from "@chainsafe/common-theme"
 import { CSFTheme } from "../../../../../Themes/types"
 import CustomButton from "../../../../Elements/CustomButton"
 import { t, Trans } from "@lingui/macro"
@@ -95,7 +95,6 @@ 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,14 +231,14 @@ const AddCard = ({ onClose, onCardAdd, footerClassName, submitText, goBack }: IA
               variant="text"
               onClick={goBack}
             >
-              <Trans>Go  back</Trans>
+              <Trans>Go back</Trans>
             </Button>
           }
           {onClose &&
             <CustomButton
               onClick={onClose}
               size="medium"
-              variant={desktop ? "outline" : "gray"}
+              variant="outline"
               type="button"
               disabled={loadingPaymentMethodAdd}
               data-cy="button-cancel-add-card"
diff --git a/packages/files-ui/src/Themes/Constants.ts b/packages/files-ui/src/Themes/Constants.ts
index 39810ffd42..5ae9fd8019 100644
--- a/packages/files-ui/src/Themes/Constants.ts
+++ b/packages/files-ui/src/Themes/Constants.ts
@@ -74,7 +74,10 @@ export interface CsfColors extends IConstants {
   previewModal: {
     controlsBackground: string
     controlsColor: string
-    closeButtonColor: string
+    headerButtonColor: string
+    controlsButtonColor: string
+    controlsBackgroundColor: string
+    controlsBackgroundHoverColor: string
     fileOpsColor: string
     fileNameColor: string
     optionsBackground: string
diff --git a/packages/files-ui/src/Themes/DarkTheme.ts b/packages/files-ui/src/Themes/DarkTheme.ts
index 21ea2c9573..17f07a86e2 100644
--- a/packages/files-ui/src/Themes/DarkTheme.ts
+++ b/packages/files-ui/src/Themes/DarkTheme.ts
@@ -165,11 +165,6 @@ export const darkTheme = createTheme<CsfColors>({
         main: "var(--gray10)",
         hover: "#000"
       },
-      common: {
-        black: {
-          main: "var(--gray1)"
-        }
-      },
       additional: {
         blue: {
           1: "var(--blue1)",
@@ -394,7 +389,10 @@ export const darkTheme = createTheme<CsfColors>({
         previewModal: {
           controlsBackground: "var(--gray1)",
           controlsColor: "var(--gray10)",
-          closeButtonColor: "var(--gray9)",
+          headerButtonColor: "#DBDBDB",
+          controlsButtonColor: "#141414",
+          controlsBackgroundColor: "#DBDBDB",
+          controlsBackgroundHoverColor: "#FAFAFA",
           fileOpsColor: "var(--gray9)",
           fileNameColor: "var(--gray9)",
           optionsBackground: "var(--gray2)",
@@ -666,10 +664,33 @@ export const darkTheme = createTheme<CsfColors>({
               }
             },
             focus: {
-              color: "none",
-              backgroundColor: "none",
+              backgroundColor: "var(--gray7)",
+              color: "var(--gray9)",
               "& svg": {
-                fill: "none"
+                fill: "var(--gray9)"
+              }
+            }
+          },
+          secondary: {
+            active: {
+              backgroundColor: "var(--gray2)",
+              color: "var(--gray9)",
+              "& svg": {
+                fill: "var(--gray9)"
+              }
+            },
+            hover: {
+              backgroundColor: "var(--gray2)",
+              color: "var(--gray9)",
+              "& svg": {
+                fill: "var(--gray9)"
+              }
+            },
+            focus: {
+              backgroundColor: "var(--gray2)",
+              color: "var(--gray9)",
+              "& svg": {
+                fill: "var(--gray9)"
               }
             }
           },
@@ -696,10 +717,10 @@ export const darkTheme = createTheme<CsfColors>({
               }
             },
             focus: {
-              color: "none",
-              backgroundColor: "none",
+              backgroundColor: "var(--gray7)",
+              color: "var(--gray9)",
               "& svg": {
-                fill: "none"
+                fill: "var(--gray9)"
               }
             }
           },
diff --git a/packages/files-ui/src/Themes/LightTheme.ts b/packages/files-ui/src/Themes/LightTheme.ts
index 58891271e2..41acea571c 100644
--- a/packages/files-ui/src/Themes/LightTheme.ts
+++ b/packages/files-ui/src/Themes/LightTheme.ts
@@ -12,8 +12,6 @@ export const lightTheme = createTheme<CsfColors>({
       primary: {
         main: "var(--csf-primary)",
         background: "var(--csf-primary)"
-      },
-      secondary: {
       }
     },
     constants: {
@@ -81,7 +79,10 @@ export const lightTheme = createTheme<CsfColors>({
         previewModal: {
           controlsBackground: "var(--gray9)",
           controlsColor: "var(--gray8)",
-          closeButtonColor: "var(--gray2)",
+          headerButtonColor: "#DBDBDB",
+          controlsButtonColor: "#141414",
+          controlsBackgroundColor: "#DBDBDB",
+          controlsBackgroundHoverColor: "#FAFAFA",
           fileOpsColor: "var(--gray2)",
           fileNameColor: "var(--gray1)",
           optionsBackground: "var(--gray1)",
@@ -215,19 +216,6 @@ export const lightTheme = createTheme<CsfColors>({
           cursor: "pointer"
         }
       },
-      Button: {
-        variants: {
-          primary: {
-            focus: {
-              color: "none",
-              backgroundColor: "none",
-              "& svg": {
-                fill: "none"
-              }
-            }
-          }
-        }
-      },
       ToggleHiddenText: {
         icon: {
           stroke: "var(--gray9)"
diff --git a/packages/files-ui/src/locales/de/messages.po b/packages/files-ui/src/locales/de/messages.po
index 597fd34b6e..66c8ffa3c1 100644
--- a/packages/files-ui/src/locales/de/messages.po
+++ b/packages/files-ui/src/locales/de/messages.po
@@ -436,9 +436,6 @@ msgstr "Wird generiert …"
 msgid "Get Started"
 msgstr "Anfangen"
 
-msgid "Go  back"
-msgstr ""
-
 msgid "Go back"
 msgstr "Zurück"
 
diff --git a/packages/files-ui/src/locales/en/messages.po b/packages/files-ui/src/locales/en/messages.po
index d07dd9a1ab..923378ee46 100644
--- a/packages/files-ui/src/locales/en/messages.po
+++ b/packages/files-ui/src/locales/en/messages.po
@@ -439,9 +439,6 @@ msgstr "Generating…"
 msgid "Get Started"
 msgstr "Get Started"
 
-msgid "Go  back"
-msgstr "Go  back"
-
 msgid "Go back"
 msgstr "Go back"
 
diff --git a/packages/files-ui/src/locales/es/messages.po b/packages/files-ui/src/locales/es/messages.po
index e4ee3965ea..d84565c393 100644
--- a/packages/files-ui/src/locales/es/messages.po
+++ b/packages/files-ui/src/locales/es/messages.po
@@ -440,9 +440,6 @@ msgstr ""
 msgid "Get Started"
 msgstr "Empezar"
 
-msgid "Go  back"
-msgstr ""
-
 msgid "Go back"
 msgstr "Regresar"
 
diff --git a/packages/files-ui/src/locales/fr/messages.po b/packages/files-ui/src/locales/fr/messages.po
index 0ec828fbe0..824da41357 100644
--- a/packages/files-ui/src/locales/fr/messages.po
+++ b/packages/files-ui/src/locales/fr/messages.po
@@ -440,9 +440,6 @@ msgstr "Génération…"
 msgid "Get Started"
 msgstr "Commencer"
 
-msgid "Go  back"
-msgstr "Retour"
-
 msgid "Go back"
 msgstr "Retour"
 
diff --git a/packages/files-ui/src/locales/no/messages.po b/packages/files-ui/src/locales/no/messages.po
index 31f6f5e49f..2f7ac1cf30 100644
--- a/packages/files-ui/src/locales/no/messages.po
+++ b/packages/files-ui/src/locales/no/messages.po
@@ -436,9 +436,6 @@ msgstr ""
 msgid "Get Started"
 msgstr "Begynn"
 
-msgid "Go  back"
-msgstr ""
-
 msgid "Go back"
 msgstr "Tilbake"