diff --git a/packages/files-ui/src/Contexts/PosthogContext.tsx b/packages/files-ui/src/Contexts/PosthogContext.tsx
index 90183b4fda..5e5e359bf6 100644
--- a/packages/files-ui/src/Contexts/PosthogContext.tsx
+++ b/packages/files-ui/src/Contexts/PosthogContext.tsx
@@ -1,9 +1,10 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react"
 import posthog from "posthog-js"
 import { Button, Typography, useLocation } from "@chainsafe/common-components"
-import { createStyles, ITheme, makeStyles } from "@chainsafe/common-theme"
+import { createStyles, makeStyles } from "@chainsafe/common-theme"
 import { Trans } from "@lingui/macro"
 import { useLocalStorage } from "@chainsafe/browser-storage-hooks"
+import { CSFTheme } from "../Themes/types"
 
 export type PosthogContext = {
   hasOptedIn: boolean
@@ -20,7 +21,7 @@ const PosthogContext = React.createContext<PosthogContext>({
 })
 
 const useStyles = makeStyles(
-  ({ palette, breakpoints }: ITheme) => {
+  ({ palette, breakpoints, constants }: CSFTheme) => {
     return createStyles({
       cookieBanner: {
         position: "fixed",
@@ -29,7 +30,7 @@ const useStyles = makeStyles(
         display: "flex",
         color: palette.common.white.main,
         flexDirection: "column",
-        backgroundColor: palette.primary.main,
+        backgroundColor: constants.cookieBanner.backgroundColor,
         padding: "16px 32px",
         [breakpoints.down("sm")]: {
           padding: "8px 16px"
@@ -137,7 +138,11 @@ const PosthogProvider = ({ children }: PosthogProviderProps) => {
             </Trans>
           </Typography>
           <div className={classes.buttonSection}>
-            <Button onClick={optOutCapturing}><Trans>Decline</Trans></Button>
+            <Button
+              onClick={optOutCapturing}
+              variant='secondary'
+            >
+              <Trans>Decline</Trans></Button>
             <Button
               onClick={optInCapturing}
               variant='outline'
diff --git a/packages/files-ui/src/Themes/Constants.ts b/packages/files-ui/src/Themes/Constants.ts
index 4ac1dd7752..11ddd93e5e 100644
--- a/packages/files-ui/src/Themes/Constants.ts
+++ b/packages/files-ui/src/Themes/Constants.ts
@@ -167,4 +167,7 @@ export interface CsfColors extends IConstants {
     color: string
     backgroundOptionHover: string
   }
+  cookieBanner: {
+    backgroundColor: string
+  }
 }
\ No newline at end of file
diff --git a/packages/files-ui/src/Themes/DarkTheme.ts b/packages/files-ui/src/Themes/DarkTheme.ts
index bbaa205aab..c78c07646b 100644
--- a/packages/files-ui/src/Themes/DarkTheme.ts
+++ b/packages/files-ui/src/Themes/DarkTheme.ts
@@ -480,6 +480,9 @@ export const darkTheme = createTheme<CsfColors>({
         },
         surveyBanner: {
           color: "var(--gray9)"
+        },
+        cookieBanner: {
+          backgroundColor: "var(--gray9)"
         }
       } as CsfColors)
     },
diff --git a/packages/files-ui/src/Themes/LightTheme.ts b/packages/files-ui/src/Themes/LightTheme.ts
index bd40c2a9b0..90f72c5dfa 100644
--- a/packages/files-ui/src/Themes/LightTheme.ts
+++ b/packages/files-ui/src/Themes/LightTheme.ts
@@ -167,6 +167,9 @@ export const lightTheme = createTheme<CsfColors>({
         },
         surveyBanner: {
           color: "var(--gray1)"
+        },
+        cookieBanner: {
+          backgroundColor: "var(--csf-primary)"
         }
       } as CsfColors)
     },