diff --git a/src/components/BackBar/index.tsx b/src/components/BackBar/index.tsx
index 7f6c0b3..d13c224 100644
--- a/src/components/BackBar/index.tsx
+++ b/src/components/BackBar/index.tsx
@@ -6,7 +6,7 @@ import { TextLink } from '../../common/typography';
 const Container = styled.div(({ theme }) => ({
     width: '100%',
     height: 52,
-    background: theme.colors.offWhite,
+    background: theme.colors.lightOffWhite,
     color: theme.colors.purple,
     fontWeight: 300,
 
diff --git a/src/components/PortalContainer.tsx b/src/components/PortalContainer.tsx
index 40e5467..50337eb 100644
--- a/src/components/PortalContainer.tsx
+++ b/src/components/PortalContainer.tsx
@@ -3,7 +3,7 @@ import { BackBar } from './BackBar';
 import styled from '..';
 
 const Container = styled.div(({ theme }) => ({
-    backgroundColor: theme.colors.offWhite,
+    backgroundColor: theme.colors.lightOffWhite,
     display: 'flex',
 
     [theme.breakpoints.mobileAndLower]: {