diff --git a/src/components/awesome-header.html b/src/components/awesome-header.html
index 3ddffcb..dbbb2f2 100644
--- a/src/components/awesome-header.html
+++ b/src/components/awesome-header.html
@@ -1,6 +1,45 @@
 <header>
-  <a href="https://ayco.io/gh/mcfly">
+  <a href="/">
     <h1>McFly</h1>
   </a>
   <span>Back to the Basics. Into the Future.</span>
 </header>
+
+<style>
+  header {
+    margin: 0.5em 0;
+    border-radius: 5px;
+    background: linear-gradient(45deg, #3054bf, #416fff);
+    color: white;
+  }
+  header a {
+    color: white;
+  }
+  header,
+  main {
+    padding: 0.5em 1em;
+  }
+  body {
+    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+    max-width: 750px;
+    margin: 0 auto;
+    padding: 1em;
+  }
+
+  h1 {
+    padding: 0;
+    margin: 0;
+  }
+
+  h2,
+  p,
+  ul,
+  ol {
+    margin-bottom: 1em;
+  }
+
+  main {
+    max-width: 35em;
+    margin: 0 auto;
+  }
+</style>
diff --git a/src/components/my-footer.html b/src/components/my-footer.html
new file mode 100644
index 0000000..b918cdb
--- /dev/null
+++ b/src/components/my-footer.html
@@ -0,0 +1,15 @@
+<footer>
+  <p>
+    <small>A project by <a href="https://ayco.io">Ayo Ayco</a></small
+    ><br />
+    <small>See <a href="/demo">demo</a> pages</small>
+  </p>
+</footer>
+
+<style>
+  footer {
+    text-align: right;
+    font-style: italic;
+    padding: 0.5em 1em;
+  }
+</style>
diff --git a/src/components/my-head.html b/src/components/my-head.html
new file mode 100644
index 0000000..bac0c50
--- /dev/null
+++ b/src/components/my-head.html
@@ -0,0 +1,6 @@
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>McFly: Back to the Basics. Into the Future.</title>
+    <link rel="stylesheet" href="./reset.css"></style>
+  </head>
diff --git a/src/pages/demo/index.html b/src/pages/demo/index.html
index c4705ca..f26f469 100644
--- a/src/pages/demo/index.html
+++ b/src/pages/demo/index.html
@@ -1,9 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Hello {{name}} :)</title>
+  <my-head>
     <script server:setup>
       const name = "AYOs";
       let greeting = "hello";
@@ -17,15 +14,19 @@
         return x + y;
       }
     </script>
-  </head>
+  </my-head>
   <body>
-    <a href="/demo/about">{{ count }}</a>
-    <div>
-      <hello-world name="{{name }}"></hello-world>
-    </div>
-    <p>some text: {{greeting}}</p>
-    {{greeting}} hey<br />
-    <clickable-text></clickable-text>
+    <awesome-header></awesome-header>
+    <main>
+      <a href="/demo/about">{{ count }}</a>
+      <div>
+        <hello-world name="{{name }}"></hello-world>
+      </div>
+      <p>some text: {{greeting}}</p>
+      {{greeting}} hey<br />
+      <clickable-text></clickable-text>
+    </main>
+    <my-footer></my-footer>
     <script>
       const helloWorld = document.querySelector("hello-world");
       setTimeout(() => {
diff --git a/src/pages/index.html b/src/pages/index.html
index 51bf3ff..c079ca3 100644
--- a/src/pages/index.html
+++ b/src/pages/index.html
@@ -1,58 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>McFly: Back to the Basics. Into the Future.</title>
-    <link rel="stylesheet" href="./reset.css"></style>
-    <style>
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            max-width: 750px;
-            margin: 0 auto;
-            padding: 1em;
-        }
-
-        h1 {
-            padding: 0;
-            margin: 0;
-        }
-
-        h2, p, ul, ol {
-            margin-bottom: 1em;
-        }
-        footer {
-            text-align: right;
-            font-style: italic;
-        }
-        header {
-            margin: 0.5em 0;
-            border-radius: 5px;
-            background: linear-gradient(45deg, #3054bf, #416fff);
-            color: white;
-        }
-        header a {
-            color: white
-        }
-        header, main, footer {
-            padding: 0.5em 1em;
-        }
-        main {
-          max-width: 35em;
-          margin: 0 auto;
-        }
-    </style>
-  </head>
+  <my-head></my-head>
   <body>
     <awesome-header></awesome-header>
     <main>
       <p>
-        <strong>McFly</strong> is a full-stack no-framework framework that assists developers in leveraging the web platform.
+        <strong>McFly</strong> is a full-stack no-framework framework that
+        assists developers in leveraging the web platform.
       </p>
       <p>
-        Start at the very basic of
-        writing HTML files and enhance with standard web technologies or go
-        advanced as you like, at your own pace.
+        Start at the very basic of writing HTML files and enhance with standard
+        web technologies or go advanced as you like, at your own pace.
       </p>
       <ul>
         <li>HTML pages</li>
@@ -62,12 +20,11 @@
         <li>Deploy Anywhere</li>
       </ul>
       <p>...all in the same project.</p>
-      <p>Read more on <a href="https://github.com/ayoayco/mcfly#readme">GitHub</a>.</p>
-    </main>
-    <footer>
       <p>
-        <small>A project by <a href="https://ayco.io">Ayo Ayco</a></small>
+        Read more on
+        <a href="https://github.com/ayoayco/mcfly#readme">GitHub</a>.
       </p>
-    </footer>
+    </main>
+    <my-footer></my-footer>
   </body>
 </html>
