diff --git a/README.md b/README.md
index 6240dcb..89fa10b 100644
--- a/README.md
+++ b/README.md
@@ -18,9 +18,9 @@
 We want a way to:
 1. create web apps with vanilla custom elements
 1. write real .HTML files
-1. no frameworks or reactivity libraries on the browser
-1. server-side pre-rendering
-1. control on when and where JS is downloaded for interactive elements
+1. have no frameworks or reactivity libraries on the browser
+1. use server-side rendering
+1. control when and where JS is downloaded for interactive elements
 
 ## Special directories
 **1. `src/pages`**
diff --git a/src/components/awesome-header.html b/src/components/awesome-header.html
index dbbb2f2..5b69e62 100644
--- a/src/components/awesome-header.html
+++ b/src/components/awesome-header.html
@@ -7,39 +7,12 @@
 
 <style>
   header {
-    margin: 0.5em 0;
     border-radius: 5px;
     background: linear-gradient(45deg, #3054bf, #416fff);
     color: white;
+    margin-bottom: 1em;
   }
   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-head.html b/src/components/my-head.html
index 3252e36..b02d8d1 100644
--- a/src/components/my-head.html
+++ b/src/components/my-head.html
@@ -23,5 +23,28 @@
     property="og:description"
     content="McFly is a full-stack no-framework framework that assists developers in leveraging the web platform."
   />
+  <style>
+    body {
+      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+      max-width: 750px;
+      margin: 0 auto;
+      padding: 1em;
+    }
+    body > * {
+      padding: 0.5em 1em;
+    }
+
+    h1 {
+      padding: 0;
+      margin: 0;
+    }
+
+    h2,
+    p,
+    ul,
+    ol {
+      margin-bottom: 1em;
+    }
+  </style>
   <slot />
 </head>
diff --git a/src/components/vanilla-hello-world.js b/src/components/vanilla-hello-world.js
index 8501468..d0e0e23 100644
--- a/src/components/vanilla-hello-world.js
+++ b/src/components/vanilla-hello-world.js
@@ -8,17 +8,11 @@ class HelloWorld extends HTMLElement {
     this.onclick = () => {
       this.setAttribute("name", `Clicked ${++count}x`);
     };
-    this.setAttribute("title", "Click me please");
   }
 
   attributeChangedCallback(property, previousValue, currentValue) {
     if (previousValue !== currentValue) {
-      this[property] = currentValue;
-      this.render();
+      this.innerHTML = `<button style="cursor:pointer">Hello ${currentValue}!</button>`;
     }
   }
-
-  render() {
-    this.innerHTML = `<button style="cursor:pointer">Hello ${this.name}!</button>`;
-  }
 }
diff --git a/src/pages/index.html b/src/pages/index.html
index 1c3b99e..6da88bc 100644
--- a/src/pages/index.html
+++ b/src/pages/index.html
@@ -1,33 +1,117 @@
 <!DOCTYPE html>
 <html lang="en">
-  <my-head></my-head>
+  <my-head>
+    <link rel="stylesheet" href="/prism.css" />
+    <script src="/prism.js"></script>
+    <style>
+      @counter-style publish-icons {
+        system: cyclic;
+        symbols: "️✅";
+        suffix: " ";
+      }
+      ul {
+        list-style: publish-icons;
+      }
+      header,
+      footer,
+      main {
+        max-width: 35em;
+        margin: 0 auto;
+      }
+    </style>
+  </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.
-      </p>
-      <p>
-        Here's a sample interactive custom element:
-        <vanilla-hello-world name="McFly"></vanilla-hello-world>
-      </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.
-      </p>
-      <ul>
-        <li>HTML pages & fragments</li>
-        <li>Server-Side Rendering logic</li>
-        <li>Custom Elements</li>
-        <li>REST APIs</li>
-        <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>
+      <section>
+        <p>
+          <strong style="font-size: large">McFly</strong> is a full-stack
+          no-framework framework that assists developers in leveraging the web
+          platform.
+        </p>
+        <p>
+          Here's a sample interactive custom element:
+          <vanilla-hello-world name="McFly"></vanilla-hello-world>
+        </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.
+        </p>
+        <ul>
+          <li>Create web apps with vanilla custom elements</li>
+          <li>Write real .HTML files</li>
+          <li>Have no frameworks or reactivity libraries on the browser</li>
+          <li>Use server-side rendering</li>
+          <li>Deploy anywhere</li>
+        </ul>
+        <p>
+          Read more on
+          <a href="https://github.com/ayoayco/mcfly#readme">GitHub</a>.
+        </p>
+      </section>
+      <!--
+      <section>
+        <h2>HTML pages w/ server setup</h2>
+        <ul>
+          <li>
+            directly use custom elements & static fragments (no imports or
+            registry maintenance needed)
+          </li>
+          <li>
+            use
+            <code class="language-html">&lt;script server:setup&gt;</code>
+            to define logic that runs on the server, which then gets stripped
+            away
+          </li>
+        </ul>
+      </section>
+      <section>
+        <h2>Custom Elements & Static Fragments</h2>
+        <ul>
+          <li>
+            all components are automatically registered using their file names;
+            a
+            <code class="language-unknown">hello-world.js</code> component can
+            be used as
+            <code class="language-unknown">&lt;hello-world&gt;</code>
+          </li>
+          <li>
+            static <code class="language-unknown">.html</code> fragments; a
+            <code class="language-unknown">my-header.html</code> fragment can be
+            directly used as
+            <code class="language-unknown">&lt;my-header&gt;</code>
+          </li>
+        </ul>
+      </section>
+      <section>
+        <h2>Using the Browser's built-in reactivity</h2>
+        <p>
+          Here's a sample interactive custom element:
+          <vanilla-hello-world name="McFly"></vanilla-hello-world>
+        </p>
+        <code-block language="js" line-numbers="true">
+          <pre>
+class HelloWorld extends HTMLElement {
+  static get observedAttributes() {
+    return ["name"];
+  }
+
+  connectedCallback() {
+    let count = 0;
+    this.onclick = () => {
+      this.setAttribute("name", `Clicked ${++count}x`);
+    };
+  }
+
+  attributeChangedCallback(property, previousValue, currentValue) {
+    if (previousValue !== currentValue) {
+      this.innerHTML = `<button style="cursor:pointer">Hello ${currentValue}!</button>`;
+    }
+  }
+}</pre>
+        </code-block>
+      </section> -->
     </main>
     <my-footer></my-footer>
   </body>
