diff --git a/src/components/ConfigError.tsx b/src/components/ConfigError.tsx
index 9b77063a87..2cec3ac85e 100644
--- a/src/components/ConfigError.tsx
+++ b/src/components/ConfigError.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import { Stack } from '@mui/material'
 import { Icon, Text } from '@mxenabled/mxui'
 import { Container } from 'src/components/Container'
 import styles from 'src/components/ConfigError.module.css'
@@ -16,7 +17,13 @@ interface ConfigErrorProps {
 export const ConfigError: React.FC<ConfigErrorProps> = ({ error }) => {
   return (
     <Container>
-      <div className={styles.container}>
+      <Stack
+        alignItems="center"
+        sx={{
+          marginTop: 4.5,
+          textAlign: 'center',
+        }}
+      >
         <Icon fill={true} name="error" size={32} sx={{ mb: 3 }} />
         <Text className={styles.errorTitle} component="h2" truncate={false} variant="H2">
           {error.title}
@@ -24,7 +31,7 @@ export const ConfigError: React.FC<ConfigErrorProps> = ({ error }) => {
         <Text component="p" truncate={false} variant="Paragraph">
           {error.message}
         </Text>
-      </div>
+      </Stack>
     </Container>
   )
 }
diff --git a/src/components/ConnectNavigationHeader.js b/src/components/ConnectNavigationHeader.js
index 6afe618fd0..bf058bd3bc 100644
--- a/src/components/ConnectNavigationHeader.js
+++ b/src/components/ConnectNavigationHeader.js
@@ -1,29 +1,20 @@
 import React, { useContext, useState, useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 import { useSelector } from 'react-redux'
-import { useTokens } from '@kyper/tokenprovider'
-
-import AppBar from '@mui/material/AppBar'
-import Box from '@mui/material/Box'
-import Toolbar from '@mui/material/Toolbar'
-import IconButton from '@mui/material/IconButton'
-import { Icon } from '@mxenabled/mxui'
-
 import { __ } from 'src/utilities/Intl'
 import { STEPS } from 'src/const/Connect'
 import { PostMessageContext } from 'src/ConnectWidget'
+import { GoBackButton } from 'src/components/GoBackButton'
 
 export const ConnectNavigationHeader = (props) => {
   const goBackButtonContainerRef = useRef()
   const postMessageFunctions = useContext(PostMessageContext)
-  const tokens = useTokens()
-  const sx = getStyles(tokens)
   const step = useSelector(
     (state) => state.connect.location[state.connect.location.length - 1]?.step ?? STEPS.SEARCH,
   )
-  const showMobileBackButton = useSelector(
-    (state) => state.config.show_back_button && state.connect.location.length === 1,
-  )
+  const showMobileBackButton =
+    useSelector((state) => state.config.show_back_button && state.connect.location.length === 1) ||
+    false
   const [shouldShowGlobalBackButton, setShouldShowGlobalBackButton] = useState(false)
 
   useEffect(() => {
@@ -65,24 +56,12 @@ export const ConnectNavigationHeader = (props) => {
   }
 
   return (
-    <Box data-test="navigation-header" sx={sx.container}>
-      <AppBar elevation={0} position="static" sx={sx.appBar}>
-        <Toolbar disableGutters={true} sx={sx.toolbar}>
-          {shouldShowGlobalBackButton || showMobileBackButton ? (
-            <IconButton
-              aria-label={__('Go Back')}
-              data-test="back-button"
-              name="connect-navigation-back-button"
-              onClick={backButtonNavigationHandler}
-              ref={goBackButtonContainerRef}
-              sx={sx.button}
-            >
-              <Icon name="arrow_back_ios_new" size={24} />
-            </IconButton>
-          ) : null}
-        </Toolbar>
-      </AppBar>
-    </Box>
+    <GoBackButton
+      handleGoBack={backButtonNavigationHandler}
+      ref={goBackButtonContainerRef}
+      shouldShowBackButton={shouldShowGlobalBackButton || showMobileBackButton}
+      toolbarSx={{ left: '50%', transform: 'translateX(-50%)' }}
+    />
   )
 }
 
@@ -90,15 +69,3 @@ ConnectNavigationHeader.propTypes = {
   connectGoBack: PropTypes.func.isRequired,
   stepComponentRef: PropTypes.object,
 }
-
-const getStyles = (tokens) => ({
-  container: { flexGrow: 1 },
-  appBar: { backgroundColor: tokens.BackgroundColor.Container, display: 'flex' },
-  toolbar: {
-    padding: `0 ${tokens.Spacing.Medium}px`,
-    maxWidth: '368px',
-    left: '50%',
-    transform: 'translateX(-50%)',
-  },
-  button: { color: tokens.TextColor.Default },
-})
diff --git a/src/components/DayOfMonthPicker.tsx b/src/components/DayOfMonthPicker.tsx
index 253a181e21..6e5ebd7eb0 100644
--- a/src/components/DayOfMonthPicker.tsx
+++ b/src/components/DayOfMonthPicker.tsx
@@ -38,7 +38,7 @@ export const DayOfMonthPicker = React.forwardRef<HTMLInputElement, DayOfMonthPic
           <Text
             component="h2"
             data-test="date-picker-header"
-            sx={{ marginBottom: tokens.Spacing.XSmall }}
+            sx={{ marginBottom: 1 }}
             truncate={false}
             variant="H2"
           >
@@ -47,7 +47,7 @@ export const DayOfMonthPicker = React.forwardRef<HTMLInputElement, DayOfMonthPic
           <Text
             component="p"
             data-test="date-picker-paragraph"
-            sx={{ marginBottom: tokens.Spacing.Large }}
+            sx={{ marginBottom: 3 }}
             truncate={false}
             variant="Paragraph"
           >
diff --git a/src/components/GoBackButton.module.css b/src/components/GoBackButton.module.css
new file mode 100644
index 0000000000..63aa79c998
--- /dev/null
+++ b/src/components/GoBackButton.module.css
@@ -0,0 +1,18 @@
+.container {
+  flex-grow: 1;
+}
+
+.appBar {
+  display: flex;
+}
+
+.toolbar {
+  padding: 0 var(--spacing-medium);
+  max-width: 368px;
+  left: 0;
+  transform: translateX(-5%);
+}
+
+.button {
+  color: var(--mui-palette-text-primary);
+}
diff --git a/src/components/GoBackButton.tsx b/src/components/GoBackButton.tsx
index 7ed18fa92d..e6cd3b7f88 100644
--- a/src/components/GoBackButton.tsx
+++ b/src/components/GoBackButton.tsx
@@ -1,48 +1,44 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { forwardRef, useRef } from 'react'
-import PropTypes from 'prop-types'
-import { useTokens } from '@kyper/tokenprovider'
-import { IconButton } from '@mui/material'
-import { ChevronLeft } from '@kyper/icon/ChevronLeft'
+import { AppBar, Box, IconButton, Toolbar, SxProps, Theme } from '@mui/material'
+import { Icon } from '@mxenabled/mxui'
 
 import { __ } from 'src/utilities/Intl'
+import styles from 'src/components/GoBackButton.module.css'
 
 interface GoBackButtonProps {
   handleGoBack: () => void
+  shouldShowBackButton?: boolean
+  toolbarSx?: SxProps<Theme>
 }
 
 export const GoBackButton = forwardRef<HTMLButtonElement, GoBackButtonProps>((props, ref) => {
   const defaultRef = useRef(null)
-  const { handleGoBack } = props
-  const tokens = useTokens()
-  const styles = getStyles(tokens)
+  const { handleGoBack, shouldShowBackButton = true, toolbarSx = {} } = props
 
   return (
-    <IconButton
-      aria-label={__('Go Back')}
-      data-test="back-button"
-      onClick={handleGoBack}
-      ref={ref ?? defaultRef}
-      style={styles}
-    >
-      <ChevronLeft
-        color={tokens.TextColor.Default}
-        height={tokens.Spacing.Large}
-        width={tokens.Spacing.Large}
-      />
-    </IconButton>
+    <Box className={styles.container} data-test="navigation-header">
+      <AppBar
+        className={styles.appBar}
+        elevation={0}
+        position="static"
+        sx={{ backgroundColor: 'common.white' }}
+      >
+        <Toolbar className={styles.toolbar} disableGutters={true} sx={toolbarSx}>
+          {shouldShowBackButton ? (
+            <IconButton
+              aria-label={__('Go Back')}
+              className={styles.button}
+              data-test="back-button"
+              name="connect-navigation-back-button"
+              onClick={handleGoBack}
+              ref={ref ?? defaultRef}
+            >
+              <Icon name="arrow_back_ios_new" size={24} />
+            </IconButton>
+          ) : null}
+        </Toolbar>
+      </AppBar>
+    </Box>
   )
 })
-
-const getStyles = (tokens: any) => ({
-  height: '44px',
-  margin: `0px ${tokens.Spacing.XSmall}px ${tokens.Spacing.XSmall}px -${tokens.Spacing.Medium}px`,
-  padding: `0px 8px`,
-  width: '44px',
-})
-
-GoBackButton.propTypes = {
-  handleGoBack: PropTypes.func.isRequired,
-}
-
 GoBackButton.displayName = 'GoBackButton'
diff --git a/src/components/__tests__/GoBackButton-test.tsx b/src/components/__tests__/GoBackButton-test.tsx
index 7c30c69efd..fdbc9a2157 100644
--- a/src/components/__tests__/GoBackButton-test.tsx
+++ b/src/components/__tests__/GoBackButton-test.tsx
@@ -3,24 +3,27 @@ import { render, screen, fireEvent } from 'src/utilities/testingLibrary'
 import { GoBackButton } from '../GoBackButton'
 
 describe('GoBackButton', () => {
-  const handleGoBack = vi.fn()
+  const defaultProps = {
+    handleGoBack: vi.fn(),
+    shouldShowBackButton: true,
+  }
 
   it('renders the go back button', () => {
-    render(<GoBackButton handleGoBack={handleGoBack} />)
+    render(<GoBackButton {...defaultProps} />)
     const button = screen.getByRole('button', { name: /back/i })
     expect(button).toBeInTheDocument()
   })
 
   it('navigates back when clicked', () => {
-    render(<GoBackButton handleGoBack={handleGoBack} />)
+    render(<GoBackButton {...defaultProps} />)
     const button = screen.getByRole('button', { name: /back/i })
 
     fireEvent.click(button)
-    expect(handleGoBack).toHaveBeenCalled()
+    expect(defaultProps.handleGoBack).toHaveBeenCalled()
   })
 
   it('is accessible', () => {
-    render(<GoBackButton handleGoBack={handleGoBack} />)
+    render(<GoBackButton {...defaultProps} />)
     const button = screen.getByRole('button', { name: /back/i })
     expect(button).toHaveAttribute('aria-label', 'Go Back')
   })
diff --git a/typings/kyper.d.ts b/typings/kyper.d.ts
index e9b6e8122a..70d635e1d7 100644
--- a/typings/kyper.d.ts
+++ b/typings/kyper.d.ts
@@ -17,7 +17,6 @@ declare module '@kyper/icon/Image'
 declare module '@kyper/icon/Health'
 declare module '@kyper/icon/Grid'
 declare module '@kyper/progressindicators'
-declare module '@kyper/icon/ChevronLeft'
 declare module '@kyper/icon/Lock'
 declare module '@kyper/utilityrow'
 declare module '@kyper/hooks'