diff --git a/client/gatsby-browser.js b/client/gatsby-browser.js
index b7108a6f97..32aa254ac2 100644
--- a/client/gatsby-browser.js
+++ b/client/gatsby-browser.js
@@ -4,13 +4,7 @@ import { Provider } from 'react-redux';
 
 import { createStore } from './src/redux/createStore';
 import AppMountNotifier from './src/components/AppMountNotifier';
-
-import {
-  CertificationLayout,
-  DefaultLayout,
-  GuideLayout
-} from './src/components/layouts';
-import GuideNavMenu from './src/components/layouts/components/guide/NavMenu';
+import layoutSelector from './utils/gatsby/layoutSelector';
 
 const store = createStore();
 
@@ -26,33 +20,6 @@ wrapRootElement.propTypes = {
   element: PropTypes.any
 };
 
-export const wrapPageElement = ({ element, props }) => {
-  const {
-    location: { pathname }
-  } = props;
-  if (pathname === '/') {
-    return <DefaultLayout landingPage={true}>{element}</DefaultLayout>;
-  }
-  if (/^\/certification(\/.*)*/.test(pathname)) {
-    return <CertificationLayout>{element}</CertificationLayout>;
-  }
-  if (/^\/guide(\/.*)*/.test(pathname)) {
-    return (
-      <DefaultLayout navigationMenu={<GuideNavMenu />}>
-        <GuideLayout>{element}</GuideLayout>
-      </DefaultLayout>
-    );
-  }
-  if (/^\/learn(\/.*)*/.test(pathname)) {
-    return <DefaultLayout showFooter={false}>{element}</DefaultLayout>;
-  }
-  return <DefaultLayout>{element}</DefaultLayout>;
-};
-
-wrapPageElement.propTypes = {
-  element: PropTypes.any,
-  location: PropTypes.objectOf({ pathname: PropTypes.string }),
-  props: PropTypes.any
-};
+export const wrapPageElement = layoutSelector;
 
 export const disableCorePrefetching = () => true;
diff --git a/client/gatsby-ssr.js b/client/gatsby-ssr.js
index 312207d60e..0030345aa1 100644
--- a/client/gatsby-ssr.js
+++ b/client/gatsby-ssr.js
@@ -5,9 +5,8 @@ import { Provider } from 'react-redux';
 
 import headComponents from './src/head';
 import { createStore } from './src/redux/createStore';
-import { wrapPageElement } from './gatsby-browser';
 
-export { wrapPageElement };
+import layoutSelector from './utils/gatsby/layoutSelector';
 
 const store = createStore();
 
@@ -19,6 +18,8 @@ wrapRootElement.propTypes = {
   element: PropTypes.any
 };
 
+export const wrapPageElement = layoutSelector;
+
 export const onRenderBody = ({ setHeadComponents, setPostBodyComponents }) => {
   setHeadComponents([...headComponents]);
   setPostBodyComponents(
diff --git a/client/utils/gatsby/layoutSelector.js b/client/utils/gatsby/layoutSelector.js
new file mode 100644
index 0000000000..5e35c174dc
--- /dev/null
+++ b/client/utils/gatsby/layoutSelector.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  CertificationLayout,
+  DefaultLayout,
+  GuideLayout
+} from '../../src/components/layouts';
+// eslint-disable-next-line max-len
+import GuideNavMenu from '../../src/components/layouts/components/guide/NavMenu';
+
+export default function layoutSelector({ element, props }) {
+  const {
+    location: { pathname }
+  } = props;
+  if (pathname === '/') {
+    return (
+      <DefaultLayout landingPage={true} pathname={pathname}>
+        {element}
+      </DefaultLayout>
+    );
+  }
+  if (/^\/certification(\/.*)*/.test(pathname)) {
+    return <CertificationLayout>{element}</CertificationLayout>;
+  }
+  if (/^\/guide(\/.*)*/.test(pathname)) {
+    return (
+      <DefaultLayout navigationMenu={<GuideNavMenu />} pathname={pathname}>
+        <GuideLayout>{element}</GuideLayout>
+      </DefaultLayout>
+    );
+  }
+  if (/^\/learn(\/.*)*/.test(pathname)) {
+    return (
+      <DefaultLayout pathname={pathname} showFooter={false}>
+        {element}
+      </DefaultLayout>
+    );
+  }
+  return <DefaultLayout pathname={pathname}>{element}</DefaultLayout>;
+}
+
+layoutSelector.propTypes = {
+  element: PropTypes.any,
+  location: PropTypes.objectOf({ pathname: PropTypes.string }),
+  props: PropTypes.any
+};