diff --git a/src/components/AppBar.js b/src/components/AppBar.js
new file mode 100644
index 0000000..a070273
--- /dev/null
+++ b/src/components/AppBar.js
@@ -0,0 +1,51 @@
+import React from "react"
+import AppBar from "@material-ui/core/AppBar"
+import { Button } from "@material-ui/core"
+
+// import CameraIcon from '@material-ui/icons/PhotoCamera';
+import AccountCircleIcon from "@material-ui/icons/AccountCircle"
+
+import Card from "@material-ui/core/Card"
+import CardActions from "@material-ui/core/CardActions"
+import CardContent from "@material-ui/core/CardContent"
+import CardMedia from "@material-ui/core/CardMedia"
+import Link from "@material-ui/core/Link"
+
+import Typography from "@material-ui/core/Typography"
+import Toolbar from "@material-ui/core/Toolbar"
+
+import { makeStyles } from "@material-ui/core/styles"
+const useStyles = makeStyles(theme => ({
+  icon: {
+    marginRight: theme.spacing(2),
+  },
+  link: {
+    marginRight: theme.spacing(2),
+  },
+}))
+
+const QuotesUnit = () => {
+  const classes = useStyles()
+  const preventDefault = event => event.preventDefault()
+  return (
+    <div>
+      <AppBar position="relative">
+        <Toolbar>
+          <AccountCircleIcon className={classes.icon} />
+          <Typography variant="h6" color="inherit" noWrap>
+            <Link className={classes.link} href="/" color="inherit">
+              useAuth
+            </Link>
+            <Link className={classes.link} href="/docs/" color="inherit">
+              docs
+            </Link>
+          </Typography>
+        </Toolbar>
+      </AppBar>
+    </div>
+  )
+}
+
+export default QuotesUnit
+
+//onClick={preventDefault}
diff --git a/src/components/FooterUnit.js b/src/components/FooterUnit.js
new file mode 100644
index 0000000..f5e1823
--- /dev/null
+++ b/src/components/FooterUnit.js
@@ -0,0 +1,61 @@
+import React from "react"
+import AppBar from "@material-ui/core/AppBar"
+import { Button } from "@material-ui/core"
+
+// import CameraIcon from '@material-ui/icons/PhotoCamera';
+import AccountCircleIcon from "@material-ui/icons/AccountCircle"
+
+import Card from "@material-ui/core/Card"
+import CardActions from "@material-ui/core/CardActions"
+import CardContent from "@material-ui/core/CardContent"
+import CardMedia from "@material-ui/core/CardMedia"
+import Link from "@material-ui/core/Link"
+
+import Typography from "@material-ui/core/Typography"
+import Toolbar from "@material-ui/core/Toolbar"
+
+import { makeStyles } from "@material-ui/core/styles"
+
+function Copyright() {
+  return (
+    <Typography variant="body2" color="textSecondary" align="center">
+      {"Copyright © "}
+      <Link color="inherit" href="https://material-ui.com/">
+        useAuth Swizec
+      </Link>{" "}
+      {new Date().getFullYear()}
+      {"."}
+    </Typography>
+  )
+}
+
+const useStyles = makeStyles(theme => ({
+  icon: {
+    marginRight: theme.spacing(2),
+  },
+  link: {
+    marginRight: theme.spacing(2),
+  },
+}))
+
+const FooterUnit = () => {
+  const classes = useStyles()
+  const preventDefault = event => event.preventDefault()
+  return (
+    <div>
+      {" "}
+      <footer className={classes.footer}>
+        <Typography variant="h6" align="center" gutterBottom></Typography>
+        <Typography
+          variant="subtitle1"
+          align="center"
+          color="textSecondary"
+          component="p"
+        ></Typography>
+        <Copyright />
+      </footer>
+    </div>
+  )
+}
+
+export default FooterUnit
diff --git a/src/pages/docs.js b/src/pages/docs.js
index 1a8f3f4..68518be 100644
--- a/src/pages/docs.js
+++ b/src/pages/docs.js
@@ -1,12 +1,17 @@
 import React from "react"
 import { Link } from "gatsby"
-
+import AppBar from "../components/AppBar"
+import HowUnit from "../components/HowUnit"
+import FooterUnit from "../components/FooterUnit"
 const docs = () => {
   return (
     <div>
-      <div>How useAuth?</div>
       <div>
-        <Link to="/">Front Page</Link>
+        <AppBar />
+      </div>
+      <HowUnit />
+      <div>
+        <FooterUnit />
       </div>
     </div>
   )
diff --git a/src/pages/index.js b/src/pages/index.js
index 481d5f9..118a28e 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -3,10 +3,15 @@ import HeroUnit from "../components/HeroUnit"
 import AntiHeroUnit from "../components/AntiHeroUnit"
 import HowUnit from "../components/HowUnit"
 import QuotesUnit from "../components/QuotesUnit"
+import AppBar from "../components/AppBar"
+import FooterUnit from "../components/FooterUnit"
 
 const Index = () => {
   return (
     <div>
+      <div>
+        <AppBar />
+      </div>
       <div>
         <HeroUnit />
       </div>
@@ -19,6 +24,9 @@ const Index = () => {
       <div>
         <QuotesUnit />
       </div>
+      <div>
+        <FooterUnit />
+      </div>
     </div>
   )
 }