diff --git a/src/assets/svg/ToggleIcon.jsx b/src/assets/svg/ToggleIcon.jsx
new file mode 100644
index 0000000..1d286d2
--- /dev/null
+++ b/src/assets/svg/ToggleIcon.jsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+import themeColors from '../theme/default-colors.module.scss'
+
+const ToggleIcon = ({ linkColor }, props) => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    xmlSpace='preserve'
+    style={{
+      enableBackground: 'new 0 0 227 163.3',
+    }}
+    viewBox='0 0 227 163.3'
+    fill={themeColors[linkColor]}
+    width={25}
+    height={25}
+    {...props}
+  >
+    <path d='M113.1 33h-95C5.8 33-2.1 22.1 2.2 11.3 4.6 5.2 9.3 1.8 15.8 1.1c1.5-.2 3-.1 4.5-.1h185.5c2.2 0 4.4-.1 6.5.3 8.1 1.6 13.6 9.2 12.7 17.2-.8 8.1-7.5 14.3-15.9 14.3-21 .1-42 0-63 .1-11 .1-22 .1-33 .1zM113 65h95c12.7 0 20.7 11.7 15.6 22.6-3.1 6.6-8.5 9.4-15.7 9.4H18.4C5.8 97-2.2 86 2.2 75.1c2.6-6.4 8.3-10 16.3-10.1H113zM113.3 129c31.7 0 63.3-.1 95 0 13.2 0 21.1 13.3 14.5 24.1-3.5 5.8-9 7.9-15.7 7.9-45.8-.1-91.7 0-137.5 0H19.1c-10.7 0-17.9-6.4-18-15.9C1 135.5 8.3 129 19.3 129h94z' />
+  </svg>
+)
+
+export default ToggleIcon
diff --git a/src/assets/theme/bootstrap-preview.scss b/src/assets/theme/bootstrap-preview.scss
index 0668a23..912932d 100644
--- a/src/assets/theme/bootstrap-preview.scss
+++ b/src/assets/theme/bootstrap-preview.scss
@@ -1,17 +1,5 @@
-// these colors and variables match what is in the webstore's theme.module.scss file. this file enables us to see the preview of what these overrides will look like without actually importing these from here into the webstore project. In order to see a preview in storybook of how components will look with custom colors, these values must be updated.
-
-$primary: #333333;
-$secondary: #CCCCCC;
-$success: #666666;
-$info: #999999;
-$warning: #2A2A2A;
-$danger: #606060;
-$light: #F8F9FA;
-$dark: #212529;
-$white: #FFFFFF;
-$black: #000000;
-
-// these imports must be AFTER the theme color overrides above in order to properly override bootstrap's colors, but before the theme maps.
+@import './default-colors.module.scss';
+// these imports must be AFTER the theme colors override import above in order to properly override bootstrap's colors, but before the theme maps.
 @import '../../../node_modules/bootstrap/scss/functions';
 @import '../../../node_modules/bootstrap/scss/variables';
 @import '../../../node_modules/bootstrap/scss/mixins';
diff --git a/src/assets/theme/default-colors.module.scss b/src/assets/theme/default-colors.module.scss
new file mode 100644
index 0000000..5a20634
--- /dev/null
+++ b/src/assets/theme/default-colors.module.scss
@@ -0,0 +1,28 @@
+/**
+ * This file contains the color variables for the theme. Matching those in each webstore instance's "theme.module.scss" file.
+ *
+ * They exist in a "module.scss" file so that they can be imported into our ".scss" AND ".jsx" files.
+ */
+$primary: #614570;
+$secondary: #936AAA;
+$light: #F2F2F2;
+$dark: #070818;
+$success: #B0E298;
+$info: #8eb3fc;
+$warning: #E9DF00;
+$danger: #D20000;
+$black: #000000;
+$white: #FFFFFF;
+
+:export {
+  primary: $primary;
+  secondary: $secondary;
+  success: $success;
+  info: $info;
+  warning: $warning;
+  danger: $danger;
+  light: $light;
+  dark: $dark;
+  black: $black;
+  white: $white;
+}
diff --git a/src/compounds/Header/Header.jsx b/src/compounds/Header/Header.jsx
index 51b1838..7ce15ea 100644
--- a/src/compounds/Header/Header.jsx
+++ b/src/compounds/Header/Header.jsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Container, Nav, Navbar } from 'react-bootstrap'
+import ToggleIcon from '../../assets/svg/ToggleIcon'
 import Logo from '../Logo/Logo'
 import './styles.scss'
 
@@ -8,16 +9,20 @@ const Header = ({ auth, linkColor, logo, navLinks, userSession }) => {
   const { src, alt } = logo
 
   return (
-    <Navbar bg='primary' expand='lg'>
+    <Navbar bg='primary' expand='md'>
       <Container>
-        <Navbar.Brand className='w-75 custom-navbar-brand'>
+        <Navbar.Brand className='w-50 custom-navbar-brand'>
           <Logo src={src} alt={alt} height='auto' addClass='mw-100 mh-100' />
         </Navbar.Brand>
-        <Navbar.Toggle aria-controls='basic-navbar-nav' />
+        <Navbar.Toggle aria-controls='basic-navbar-nav'>
+          <ToggleIcon linkColor={linkColor} />
+        </Navbar.Toggle>
         <Navbar.Collapse id='basic-navbar-nav'>
           <Nav className='ms-auto'>
             {navLinks.map((nav) => (
               <Nav.Link
+              // ref https://github.com/twbs/bootstrap/blob/v5.2.3/scss/helpers/_colored-links.scss
+              // for how this className works
                 className={`link-${linkColor}`}
                 href={nav.path}
                 key={`${nav.label}-nav-link`}
@@ -43,7 +48,9 @@ Header.propTypes = {
     signIn: PropTypes.func.isRequired,
     signOut: PropTypes.func.isRequired,
   }).isRequired,
-  linkColor: PropTypes.string,
+  linkColor: PropTypes.oneOf([
+    'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark', 'black', 'white'
+  ]),
   logo: PropTypes.shape({
     src: PropTypes.string.isRequired,
     alt: PropTypes.string,
diff --git a/src/compounds/Header/styles.scss b/src/compounds/Header/styles.scss
index 7b5f2e8..2ba0520 100644
--- a/src/compounds/Header/styles.scss
+++ b/src/compounds/Header/styles.scss
@@ -1,3 +1,11 @@
 .custom-navbar-brand {
   height: 45px;
 }
+
+.navbar-toggler:focus {
+  text-decoration: none;
+  outline: 0;
+  // overriding the below to lessen the spread radius
+  // I would like to make it the same color as the icon, but that isn't possible dynamically with scss
+  box-shadow: 0 0 0 1px;
+}