diff --git a/packages/site/gatsby-browser.tsx b/packages/site/gatsby-browser.tsx
index 6ac1a27..4025bef 100644
--- a/packages/site/gatsby-browser.tsx
+++ b/packages/site/gatsby-browser.tsx
@@ -1 +1,7 @@
-export { default as wrapPageElement } from './src/components/AppLayout';
+/* eslint-disable @typescript-eslint/naming-convention */
+import LayoutComponent from './wrapPageElement';
+
+// tailwind css
+import './src/styles/global.css';
+
+export const wrapPageElement = LayoutComponent;
diff --git a/packages/site/gatsby-ssr.tsx b/packages/site/gatsby-ssr.tsx
index 6ac1a27..6800e44 100644
--- a/packages/site/gatsby-ssr.tsx
+++ b/packages/site/gatsby-ssr.tsx
@@ -1 +1,4 @@
-export { default as wrapPageElement } from './src/components/AppLayout';
+/* eslint-disable @typescript-eslint/naming-convention */
+import LayoutComponent from './wrapPageElement';
+
+export const wrapPageElement = LayoutComponent;
diff --git a/packages/site/src/components/AppLayout/index.tsx b/packages/site/src/components/AppLayout/index.tsx
index 65dec1c..a8494d3 100644
--- a/packages/site/src/components/AppLayout/index.tsx
+++ b/packages/site/src/components/AppLayout/index.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react';
+import React, { ReactNode } from 'react';
 import { MDXProvider } from '@mdx-js/react';
 
 import AppAside from '@components/AppAside';
@@ -7,10 +7,7 @@ import ThemeProvider from '../../providers/theme';
 import AppFooter from '@components/AppFooter';
 import { shortcodes } from '@components/AppShortCodes';
 
-// tailwind css
-import '../../styles/global.css';
-
-const AppLayout = ({ element }: { element: ReactElement }) => {
+const AppLayout = ({ children }: { children: ReactNode }) => {
   const [open, setOpen] = React.useState(false);
 
   const onOpen = () => {
@@ -33,7 +30,7 @@ const AppLayout = ({ element }: { element: ReactElement }) => {
           )}
           <section className="px-4 md:px-6 xl:px-19">
             <AppHeader onOpen={onOpen} />
-            <MDXProvider components={shortcodes}>{element}</MDXProvider>
+            <MDXProvider components={shortcodes}>{children}</MDXProvider>
             <AppFooter />
           </section>
         </section>
diff --git a/packages/site/wrapPageElement.tsx b/packages/site/wrapPageElement.tsx
new file mode 100644
index 0000000..ac21bc9
--- /dev/null
+++ b/packages/site/wrapPageElement.tsx
@@ -0,0 +1,7 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import React from 'react';
+import AppLayout from './src/components/AppLayout';
+
+const wrapPageElement = ({ element, props }) => <AppLayout {...props}>{element}</AppLayout>;
+
+export default wrapPageElement;