diff --git a/lerna.json b/lerna.json
index 8de1c9513..ab9491f01 100644
--- a/lerna.json
+++ b/lerna.json
@@ -5,5 +5,5 @@
   "packages": [
     "packages/*"
   ],
-  "version": "1.0.2"
+  "version": "1.0.3-ssr-perf.1"
 }
diff --git a/packages/bumbag-addon-highlighted-code/package.json b/packages/bumbag-addon-highlighted-code/package.json
index 45c24f7c6..d664330e9 100644
--- a/packages/bumbag-addon-highlighted-code/package.json
+++ b/packages/bumbag-addon-highlighted-code/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bumbag-addon-highlighted-code",
-  "version": "1.0.2",
+  "version": "1.0.3-ssr-perf.1",
   "description": "An accessible, composable, and friendly React UI Kit",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -32,7 +32,7 @@
   "devDependencies": {
     "@testing-library/react": "8.0.7",
     "@testing-library/react-hooks": "1.1.0",
-    "bumbag": "^1.0.2",
+    "bumbag": "^1.0.3-ssr-perf.1",
     "react-test-renderer": "16.8.6"
   },
   "author": "Jake Moxey",
diff --git a/packages/bumbag-addon-markdown/package.json b/packages/bumbag-addon-markdown/package.json
index b203f38be..822d99070 100644
--- a/packages/bumbag-addon-markdown/package.json
+++ b/packages/bumbag-addon-markdown/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bumbag-addon-markdown",
-  "version": "1.0.2",
+  "version": "1.0.3-ssr-perf.1",
   "description": "An accessible, composable, and friendly React UI Kit",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -32,7 +32,7 @@
   "devDependencies": {
     "@testing-library/react": "8.0.7",
     "@testing-library/react-hooks": "1.1.0",
-    "bumbag": "^1.0.2",
+    "bumbag": "^1.0.3-ssr-perf.1",
     "react-test-renderer": "16.8.6"
   },
   "author": "Jake Moxey",
diff --git a/packages/bumbag-server/package.json b/packages/bumbag-server/package.json
index 4e77ebeaa..cd4328d78 100644
--- a/packages/bumbag-server/package.json
+++ b/packages/bumbag-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bumbag-server",
-  "version": "1.0.0",
+  "version": "1.0.3-ssr-perf.0",
   "main": "lib/index.js",
   "module": "es/index.js",
   "types": "ts/index.d.ts",
diff --git a/packages/bumbag-theme-medipass/package.json b/packages/bumbag-theme-medipass/package.json
index 8dc9acdbd..6752cef39 100644
--- a/packages/bumbag-theme-medipass/package.json
+++ b/packages/bumbag-theme-medipass/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bumbag-theme-medipass",
-  "version": "1.0.0",
+  "version": "1.0.3-ssr-perf.0",
   "main": "lib/index.js",
   "module": "es/index.js",
   "types": "ts/index.d.ts",
diff --git a/packages/bumbag/package.json b/packages/bumbag/package.json
index 977f75bf9..0644eda42 100644
--- a/packages/bumbag/package.json
+++ b/packages/bumbag/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bumbag",
-  "version": "1.0.2",
+  "version": "1.0.3-ssr-perf.1",
   "description": "An accessible, composable, and friendly React UI Kit",
   "main": "lib/index.js",
   "module": "es/index.js",
diff --git a/packages/bumbag/src/ColorMode/ColorModeContext.tsx b/packages/bumbag/src/ColorMode/ColorModeContext.tsx
index d515df6f6..70034cce7 100644
--- a/packages/bumbag/src/ColorMode/ColorModeContext.tsx
+++ b/packages/bumbag/src/ColorMode/ColorModeContext.tsx
@@ -9,10 +9,15 @@ export const ColorModeContext = React.createContext<any>({ setColorMode: () => {
 type Props = {
   children: React.ReactNode;
   mode: string;
+  isSSR?: boolean;
 };
 
+ColorModeProvider.defaultProps = {
+  isSSR: false
+}
+
 export function ColorModeProvider(props: Props) {
-  const { children, mode: _defaultMode } = props;
+  const { children, mode: _defaultMode, isSSR } = props;
 
   ////////////////////////////////////
 
@@ -62,16 +67,10 @@ export function ColorModeProvider(props: Props) {
 
   ////////////////////////////////////
 
-  if (!mounted) {
-    return (
-      <div style={{ visibility: 'hidden' }}>{children}</div>
-    )
+  if (isSSR && !mounted) {
+    return <div style={{ visibility: 'hidden' }}>{children}</div>;
   }
-  return (
-    <ColorModeContext.Provider value={value}>
-      {children}
-    </ColorModeContext.Provider>
-  );
+  return <ColorModeContext.Provider value={value}>{children}</ColorModeContext.Provider>;
 }
 
 export function useColorMode() {
diff --git a/packages/bumbag/src/Provider/Provider.tsx b/packages/bumbag/src/Provider/Provider.tsx
index e108925c6..3a7a5350c 100644
--- a/packages/bumbag/src/Provider/Provider.tsx
+++ b/packages/bumbag/src/Provider/Provider.tsx
@@ -17,6 +17,7 @@ export type ProviderProps = {
   isStandalone?: boolean;
   collapseBelow?: LayoutBreakpoint;
   colorMode?: string;
+  isSSR?: boolean;
   theme?: ThemeConfig;
 };
 
@@ -25,7 +26,7 @@ Provider.defaultProps = {
 };
 
 export function Provider(props: ProviderProps) {
-  const { children, colorMode, collapseBelow, isStandalone, theme: _theme } = props;
+  const { children, colorMode, collapseBelow, isSSR, isStandalone, theme: _theme } = props;
 
   ////////////////////////////////////////////////
 
@@ -52,7 +53,7 @@ export function Provider(props: ProviderProps) {
   return (
     <BumbagThemeContext.Provider value={themeContextValue}>
       <EmotionProvider theme={derivedTheme}>
-        <ColorModeProvider mode={colorMode}>
+        <ColorModeProvider isSSR={isSSR} mode={colorMode}>
           <IdProvider>
             <ToastProvider>
               <PageProvider collapseBelow={collapseBelow}>
diff --git a/packages/gatsby-plugin-bumbag/package.json b/packages/gatsby-plugin-bumbag/package.json
index 73d720182..101c0ea23 100644
--- a/packages/gatsby-plugin-bumbag/package.json
+++ b/packages/gatsby-plugin-bumbag/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gatsby-plugin-bumbag",
-  "version": "1.0.0",
+  "version": "1.0.3-ssr-perf.0",
   "main": "lib/index.js",
   "module": "es/index.js",
   "types": "ts/index.d.ts",
@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@emotion/babel-preset-css-prop": "10.0.27",
-    "bumbag-server": "^1.0.0"
+    "bumbag-server": "^1.0.3-ssr-perf.0"
   },
   "peerDependencies": {
     "@types/react": "16.x",
diff --git a/packages/website/package.json b/packages/website/package.json
index 1f24d972b..37a9c0166 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -1,23 +1,23 @@
 {
   "name": "bumbag-website",
   "private": true,
-  "version": "1.0.2",
+  "version": "1.0.3-ssr-perf.1",
   "dependencies": {
     "@fortawesome/free-brands-svg-icons": "5.14.0",
     "@fortawesome/free-solid-svg-icons": "5.13.1",
     "@mdx-js/mdx": "1.1.0",
     "@mdx-js/react": "1.0.27",
     "base64-url": "2.3.2",
-    "bumbag": "^1.0.2",
-    "bumbag-addon-highlighted-code": "^1.0.2",
-    "bumbag-addon-markdown": "^1.0.2",
-    "bumbag-server": "^1.0.0",
-    "bumbag-theme-medipass": "^1.0.0",
+    "bumbag": "^1.0.3-ssr-perf.1",
+    "bumbag-addon-highlighted-code": "^1.0.3-ssr-perf.1",
+    "bumbag-addon-markdown": "^1.0.3-ssr-perf.1",
+    "bumbag-server": "^1.0.3-ssr-perf.0",
+    "bumbag-theme-medipass": "^1.0.3-ssr-perf.0",
     "change-case": "3.1.0",
     "classnames": "2.2.6",
     "gatsby": "^2.21.33",
     "gatsby-image": "^2.4.3",
-    "gatsby-plugin-bumbag": "^1.0.0",
+    "gatsby-plugin-bumbag": "^1.0.3-ssr-perf.0",
     "gatsby-plugin-google-analytics": "2.3.11",
     "gatsby-plugin-manifest": "^2.4.3",
     "gatsby-plugin-mdx": "1.2.7",
diff --git a/packages/website/src/docs/getting-started.mdx b/packages/website/src/docs/getting-started.mdx
index 2e7832997..0cd30a005 100644
--- a/packages/website/src/docs/getting-started.mdx
+++ b/packages/website/src/docs/getting-started.mdx
@@ -132,6 +132,8 @@ export default class MyDocument extends Document {
 
 Then, open up your `_app.js` file, and add the `<BumbagProvider>`:
 
+**Make sure you add `isSSR` as a prop to `BumbagProvider`. This will help with color mode consistency.**
+
 
 ```jsx
 import NextApp from 'next/app';
@@ -141,7 +143,7 @@ export default class App extends NextApp {
   render() {
     const { Component, pageProps } = this.props;
     return (
-      <BumbagProvider>
+      <BumbagProvider isSSR>
         <Component {...pageProps} />
       </BumbagProvider>
     );