diff --git a/src/components/layout.js b/src/components/layout.js
index 9d5ce00..41fd635 100644
--- a/src/components/layout.js
+++ b/src/components/layout.js
@@ -1,35 +1,54 @@
 import * as React from "react"
-import { Link } from "gatsby"
+import { Link as GatsbyLink } from "gatsby"
+import { AppBar, Button, Container, Link, Toolbar } from "@mui/material"
 
 const Layout = ({ location, title, children }) => {
-  const rootPath = `${__PATH_PREFIX__}/`
-  const isRootPath = location.pathname === rootPath
-  let header
+  // const rootPath = `${__PATH_PREFIX__}/`
+  // const isRootPath = location.pathname === rootPath
+  // let header
 
-  if (isRootPath) {
-    header = (
-      <h1 className="main-heading">
-        <Link to="/">{title}</Link>
-      </h1>
-    )
-  } else {
-    header = (
-      <Link className="header-link-home" to="/">
-        {title}
-      </Link>
-    )
-  }
+  // if (isRootPath) {
+  //   header = (
+  //     <h1 className="main-heading">
+  //       <Link to="/">{title}</Link>
+  //     </h1>
+  //   )
+  // } else {
+  //   header = (
+  //     <Link className="header-link-home" to="/">
+  //       {title}
+  //     </Link>
+  //   )
+  // }
 
   return (
-    <div className="global-wrapper" data-is-root-path={isRootPath}>
-      <header className="global-header">{header}</header>
-      <main>{children}</main>
-      <footer>
-        © {new Date().getFullYear()}, Built with
-        {` `}
-        <a href="https://www.gatsbyjs.com">Gatsby</a>
-      </footer>
-    </div>
+    <>
+      <AppBar
+        component="header"
+        color="transparent"
+        position="relative"
+        elevation={0}
+      >
+        <Toolbar>
+          <Link
+            underline="hover"
+            component={GatsbyLink}
+            to="/"
+            sx={{ textTransform: "lowercase" }}
+          >
+            {title}
+          </Link>
+        </Toolbar>
+      </AppBar>
+      <Container>
+        <main>{children}</main>
+        <footer>
+          © {new Date().getFullYear()}, Built with
+          {` `}
+          <a href="https://www.gatsbyjs.com">Gatsby</a>
+        </footer>
+      </Container>
+    </>
   )
 }