diff --git a/src/App.tsx b/src/App.tsx
index ae6175da76..09c86c793e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -370,12 +370,7 @@ export default function App() {
                   />
                 </HeaderContainer>
 
-                <ParentContainer
-                  bg={
-                    darkMode ? themeDark.backgroundBG : !isActive ? themeLight.connectWalletBg : themeLight.backgroundBG
-                  }
-                  headerHeight={GLOBALS.CONSTANTS.HEADER_HEIGHT}
-                >
+                <ParentContainer headerHeight={GLOBALS.CONSTANTS.HEADER_HEIGHT}>
                   {!isSnapPage && (
                     <LeftBarContainer
                       leftBarWidth={
diff --git a/src/blocks/button/Button.constants.ts b/src/blocks/button/Button.constants.ts
index d89cb8e582..7a9e28e4ed 100644
--- a/src/blocks/button/Button.constants.ts
+++ b/src/blocks/button/Button.constants.ts
@@ -1,150 +1,165 @@
 import { FlattenSimpleInterpolation, css } from 'styled-components';
-import { ButtonSize, ButtonVariantStyles } from './Button.types';
-
-export const buttonVariantStyles: ButtonVariantStyles = {
-  primary: `
-    background-color: var(--pink-400);
-    color: var(--white);
-
-    &:hover {
-      background-color: var(--pink-400);
-    }
-
-    &:active {
-      background-color: var(--pink-800);
-    }
-
-    &:focus-visible {
-      border: 1px solid var(--pink-300);
-      outline: none;
-    }
-
-    &:disabled {
-      background-color: var(--gray-200);
-      color: var(--gray-300);
-    }
-  `,
-  secondary: `
-    background-color: var(--gray-100);
-    color: var(--gray-1000);
-
-    &:hover {
-      background-color: var(--gray-200);
-    }
-
-    &:active {
-      background-color: var(--gray-300);
-    }
-
-    &:focus-visible {
-      background-color: var(--pink-100);
-      border: 1px solid var(--pink-300);
-      outline: none;
-    }
-
-    &:disabled {
-      background-color: var(--gray-200);
-      color: var(--gray-300);
-    }
-  `,
-  tertiary: `
-    background-color: var(--gray-1000);
-    color: var(--white);
-
-    &:hover {
-      background-color: var(--gray-900);
-    }
-
-    &:active {
-      background-color: var(--gray-100);
-      color: var(--gray-1000);
+import { ButtonSize, ButtonVariant } from './Button.types';
+import { ThemeMode } from 'blocks/Blocks.types';
+import { getBlocksColor } from 'blocks/Blocks.utils';
+
+export const getButtonVariantStyles = (mode: ThemeMode, variant: ButtonVariant) => {
+  switch (variant) {
+    case 'primary': {
+      return `
+        background-color: var(--pink-500);
+        color: var(--white);
+
+        &:hover {
+          background-color: var(--pink-400);
+        }
+
+        &:active {
+          background-color: ${getBlocksColor(mode, { light: 'pink-800', dark: 'pink-600' })};
+        }
+
+        &:focus-visible {
+          background-color: ${getBlocksColor(mode, { light: 'pink-500', dark: 'pink-400' })};
+          border: 1px solid ${getBlocksColor(mode, { light: 'pink-700', dark: 'pink-200' })};
+          outline: none;
+        }
+
+        &:disabled {
+          background-color: ${getBlocksColor(mode, { light: 'gray-200', dark: 'gray-800' })};
+          color: ${getBlocksColor(mode, { light: 'gray-300', dark: 'gray-700' })};
+        }
+      `;
     }
-
-    &:focus-visible {
-      border: 1px solid var(--pink-300);
-      background-color: var(--pink-100);
-      color: var(--gray-1000);
-      outline: none;
-    }
-
-    &:disabled {
-      background-color: var(--gray-200);
-      color: var(--gray-300);
-    }
-  `,
-  danger: `
-    background-color: var(--red-600);
-    color: var(--white);
-
-    &:hover {
-      background-color: var(--red-500);
-    }
-
-    &:active {
-      background-color: var(--red-800);
-    }
-
-    &:focus-visible {
-      background-color: var(--red-500);
-      border: 1px solid var(--red-300);
-      outline: none;
-    }
-    
-    &:disabled {
-      background-color: var(--gray-200);
-      color: var(--gray-300);
+    case 'secondary': {
+      return `
+        background-color: ${getBlocksColor(mode, { light: 'gray-100', dark: 'gray-800' })};
+        color: ${getBlocksColor(mode, { light: 'gray-1000', dark: 'white' })};
+
+        &:hover {
+          background-color: ${getBlocksColor(mode, { light: 'gray-200', dark: 'gray-700' })};
+        }
+
+        &:active {
+          background-color: ${getBlocksColor(mode, { light: 'gray-300', dark: 'gray-1000' })};
+        }
+
+        &:focus-visible {
+          background-color: ${getBlocksColor(mode, { light: 'gray-100', dark: 'gray-800' })};
+          border: 1px solid ${getBlocksColor(mode, { light: 'pink-300', dark: 'pink-400' })};
+          outline: none;
+        }
+
+        &:disabled {
+          background-color: ${getBlocksColor(mode, { light: 'gray-200', dark: 'gray-800' })};
+          color: ${getBlocksColor(mode, { light: 'gray-300', dark: 'gray-700' })};
+        }
+      `;
     }
-  `,
-  dangerSecondary: `
-    background-color: var(--red-200);
-    color: var(--red-700);
-
-    &:hover {
-      background-color: var(--red-100);
-    }
-
-    &:active {
-      background-color: var(--red-500);
-      color: var(--red-700);
-    }
-
-    &:focus-visible {
-      background-color: var(--red-100);
-      border: 1px solid var(--red-300);
-      outline: none;
+    case 'tertiary': {
+      return `
+        background-color: ${getBlocksColor(mode, { light: 'gray-1000', dark: 'gray-700' })};
+        color: var(--white);
+
+        &:hover {
+          color: ${getBlocksColor(mode, { light: 'white', dark: 'gray-200' })};
+          background-color: ${getBlocksColor(mode, { light: 'gray-900', dark: 'gray-300' })};
+        }
+
+        &:active {
+          background-color: ${getBlocksColor(mode, { light: 'gray-100', dark: 'gray-1000' })};
+          color: ${getBlocksColor(mode, { light: 'gray-1000', dark: 'white' })};
+        }
+
+        &:focus-visible {
+          border: 1px solid ${getBlocksColor(mode, { light: 'pink-300', dark: 'pink-400' })};
+          background-color: ${getBlocksColor(mode, { light: 'gray-1000', dark: 'gray-700' })};
+          color: ${getBlocksColor(mode, { light: 'white', dark: 'gray-200' })};
+          outline: none;
+        }
+
+        &:disabled {
+          background-color: ${getBlocksColor(mode, { light: 'gray-200', dark: 'gray-800' })};
+          color: ${getBlocksColor(mode, { light: 'gray-300', dark: 'gray-700' })};
+        }
+      `;
     }
-    
-    &:disabled {
-      background-color: var(--gray-200);
-      color: var(--gray-300);
+    case 'danger': {
+      return `
+        background-color: ${getBlocksColor(mode, { light: 'red-600', dark: 'red-500' })};
+        color: var(--white);
+
+        &:hover {
+          background-color: ${getBlocksColor(mode, { light: 'red-500', dark: 'red-400' })};
+        }
+
+        &:active {
+          background-color: ${getBlocksColor(mode, { light: 'red-800', dark: 'red-700' })};
+        }
+
+        &:focus-visible {
+          background-color: ${getBlocksColor(mode, { light: 'red-500', dark: 'red-400' })};
+          border: 1px solid ${getBlocksColor(mode, { light: 'red-800', dark: 'red-600' })};
+          outline: none;
+        }
+        
+        &:disabled {
+          background-color: ${getBlocksColor(mode, { light: 'gray-200', dark: 'gray-800' })};
+          color: ${getBlocksColor(mode, { light: 'gray-300', dark: 'gray-700' })};
+        }
+      `;
     }
-  `,
-  outline: `
-    background-color: var(--white);
-    border: 1px solid var(--gray-300);
-    color: var(--gray-1000);
-
-    &:hover {
-      background-color: var(--white);
+    case 'dangerSecondary': {
+      return `
+        background-color: ${getBlocksColor(mode, { light: 'red-200', dark: 'red-800' })};
+        color: ${getBlocksColor(mode, { light: 'red-700', dark: 'white' })};
+
+        &:hover {
+          background-color: ${getBlocksColor(mode, { light: 'red-100', dark: 'red-700' })};
+        }
+
+        &:active {
+          background-color: ${getBlocksColor(mode, { light: 'red-500', dark: 'red-1000' })};
+        }
+
+        &:focus-visible {
+          background-color: ${getBlocksColor(mode, { light: 'red-100', dark: 'red-700' })};
+          border: 1px solid ${getBlocksColor(mode, { light: 'red-800', dark: 'red-400' })};
+          outline: none;
+        }
+        
+        &:disabled {
+          background-color: ${getBlocksColor(mode, { light: 'gray-200', dark: 'gray-800' })};
+          color: ${getBlocksColor(mode, { light: 'gray-300', dark: 'gray-700' })};
+        }
+      `;
     }
-
-    &:active {
-      background-color: var(--white);
-      border: 1px solid var(--gray-600);
-    }
-
-    &:focus-visible {
-      background-color: var(--white);
-      border: 1px solid var(--pink-300);
-      outline: none;
+    case 'outline': {
+      return `
+        background-color: transparent;
+        border: 1px solid ${getBlocksColor(mode, { light: 'gray-300', dark: 'gray-700' })};
+        color: ${getBlocksColor(mode, { light: 'gray-1000', dark: 'gray-100' })};
+        outline: none;
+
+        &:hover {
+          border: 1px solid ${getBlocksColor(mode, { light: 'pink-300', dark: 'gray-800' })};
+        }
+
+        &:active {
+          border: 1px solid ${getBlocksColor(mode, { light: 'gray-600', dark: 'gray-300' })};
+        }
+
+        &:focus-visible {
+          border: 1px solid ${getBlocksColor(mode, { light: 'pink-300', dark: 'pink-400' })};
+        }
+        
+        &:disabled {
+          border: none;
+          background-color: ${getBlocksColor(mode, { light: 'gray-200', dark: 'gray-800' })};
+          color: ${getBlocksColor(mode, { light: 'gray-300', dark: 'gray-700' })};
+        }
+      `;
     }
-    
-    &:disabled {
-      border: none;
-      background-color: var(--gray-200);
-      color: var(--gray-300);
-    }
-  `,
+  }
 };
 
 export const getButtonSizeStyles = ({
diff --git a/src/blocks/button/Button.tsx b/src/blocks/button/Button.tsx
index 81683bd3c8..c3f16cdd88 100644
--- a/src/blocks/button/Button.tsx
+++ b/src/blocks/button/Button.tsx
@@ -1,8 +1,9 @@
 import { ReactNode, forwardRef } from 'react';
 import styled, { FlattenSimpleInterpolation } from 'styled-components';
-import { getButtonSizeStyles, buttonVariantStyles } from './Button.constants';
-import { TransformedHTMLAttributes } from '../Blocks.types';
-import { ButtonSize, ButtonVariant } from './Button.types';
+import { getButtonSizeStyles, getButtonVariantStyles } from './Button.constants';
+import type { ModeProp, TransformedHTMLAttributes } from '../Blocks.types';
+import type { ButtonSize, ButtonVariant } from './Button.types';
+import { useBlocksTheme } from 'blocks/Blocks.hooks';
 
 export type ButtonProps = {
   /* Child react nodes rendered by Box */
@@ -25,7 +26,7 @@ export type ButtonProps = {
   variant?: ButtonVariant;
 } & TransformedHTMLAttributes<HTMLButtonElement>;
 
-const StyledButton = styled.button<ButtonProps>`
+const StyledButton = styled.button<ButtonProps & ModeProp>`
   /* Common Button CSS */
 
   align-items: center;
@@ -43,7 +44,7 @@ const StyledButton = styled.button<ButtonProps>`
   }
 
   /* Button variant CSS styles */
-  ${(props) => buttonVariantStyles[props.variant || 'primary']}
+  ${({ mode, variant }) => getButtonVariantStyles(mode, variant || 'primary')}
 
   /* Button and font size CSS styles */
   ${({ iconOnly, size }) => getButtonSizeStyles({ iconOnly: !!iconOnly, size: size || 'medium' })}
@@ -70,6 +71,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     },
     ref
   ) => {
+    const { mode } = useBlocksTheme();
     return (
       <StyledButton
         {...(disabled ? { 'aria-disabled': true } : {})}
@@ -80,6 +82,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         ref={ref}
         size={size}
         variant={variant}
+        mode={mode}
         {...props}
       >
         {leadingIcon && <span className="icon icon-text">{leadingIcon}</span>}
diff --git a/src/blocks/button/Button.types.ts b/src/blocks/button/Button.types.ts
index 2af18a29fd..8b9f7b8fba 100644
--- a/src/blocks/button/Button.types.ts
+++ b/src/blocks/button/Button.types.ts
@@ -1,5 +1,3 @@
 export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'dangerSecondary' | 'outline';
 
 export type ButtonSize = 'extraSmall' | 'small' | 'medium' | 'large';
-
-export type ButtonVariantStyles = Record<ButtonVariant, string>;
diff --git a/src/config/Themization.js b/src/config/Themization.js
index 96499e0a3b..460b4a5c80 100644
--- a/src/config/Themization.js
+++ b/src/config/Themization.js
@@ -313,7 +313,7 @@ const themeDark = {
 
   // Default Theme
   default: {
-    bg: '#2F3137',
+    bg: '#202124',
     secondaryBg: '#282A2E',
     border: '#4A4F67',
     color: '#FFF',
@@ -332,12 +332,12 @@ const themeDark = {
 
   // Header Theme
   header: {
-    bg: '#212228', // alt color to try - #F4F5FA, #FFF
+    bg: '#17181B', // alt color to try - #F4F5FA, #FFF
   },
 
   // Navigation Theme
   nav: {
-    bg: '#212228', // alt color to try - #212228, #2F3137
+    bg: '#17181B', // alt color to try - #212228, #2F3137
     hamburgerBg: '#00000066',
     color: '#B6BCD6',
     activeColor: '#404650',
diff --git a/src/structure/MasterInterfacePage.tsx b/src/structure/MasterInterfacePage.tsx
index 2a99e27389..34a55464a8 100644
--- a/src/structure/MasterInterfacePage.tsx
+++ b/src/structure/MasterInterfacePage.tsx
@@ -153,7 +153,6 @@ function MasterInterfacePage() {
           }
         >
           <Routes>
-
             <Route
               path={APP_PATHS.WelcomeDashboard}
               element={<Dashboard />}
@@ -168,7 +167,6 @@ function MasterInterfacePage() {
               element={<InboxPage />}
             />
 
-
             {/* <Route element={<ConnectedWalletRoute />}> */}
             <Route
               path={`${APP_PATHS.Chat}/:chatid`}
@@ -402,10 +400,6 @@ const Container = styled.div`
   /* padding: ${(props) => props.theme.interfaceTopPadding} 20px 20px 20px; */
   align-items: stretch;
 
-  background-image: url('${getPublicAssetPath('svg')}/${(props) =>
-    props.theme.scheme === 'dark' ? 'dark' : 'light'}bg.svg');
-  background-size: 100% 100%;
-
   position: relative;
 `;