diff --git a/README.md b/README.md
index dd09ae0..5a407a3 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,8 @@
-# Web Component Base Class
+# Web Component Base
 
-This is a base JavaScript class for creating Web Components easily.
+This serves as a very minimal base class for creating custom elements.
+
+This does not aim to be an alternative to [Lit](https://lit.dev/). Lit is good; use it if you want.
 
 ## Installation
 
@@ -12,6 +14,8 @@ npm i web-component-base
 
 When you extend the `WebComponent` class for your component, you only have to define the `template()` and `observedAttributes()`, and the UI will be reactive on attribute changes.
 
+In your component class:
+
 ```js
 // HelloWorld.mjs
 import { WebComponent } from "./WebComponent.mjs";
@@ -29,22 +33,23 @@ export class HelloWorld extends WebComponent {
         <h1>Hello ${this.name}${this.emotion === "sad" ? ". 😭" : "! 🙌"}</h1>`;
   }
 }
+
+customElements.define('hello-world', HelloWorld);
 ```
 
 Then changes in the attributes observed will cause the UI to render.
 
+In your HTML page:
+
 ```html
 <head>
-  ...
-  <script type="module">
-    import {HelloWorld} from './HelloWorld.mjs';
-    customElements.define('hello-world', HelloWorld);
-  </script>
+  <script type="module" src="HelloWorld.mjs"></script>
 </head>
 <body>
   <hello-world name="Ayo" emotion="sad">
   <script>
       const helloWorld = document.querySelector('hello-world');
+
       setTimeout(() => {
         helloWorld.setAttribute('emotion', 'excited');
       }, 2500)
@@ -52,4 +57,6 @@ Then changes in the attributes observed will cause the UI to render.
 </body>
 ```
 
-<img alt="UI showing feeling toward Web Components changing from SAD to EXCITED" src="https://git.sr.ht/~ayoayco/web-component-base/blob/main/assets/wc-feeling.gif" width="500" />
+The result is a reactive UI that updates on attribute changes:
+
+<img alt="UI showing feeling toward Web Components changing from SAD to EXCITED" src="https://git.sr.ht/~ayoayco/web-component-base/blob/main/assets/wc-base-demo.gif" width="400" />
diff --git a/demo/HelloWorld.mjs b/demo/HelloWorld.mjs
index e02eef2..c32bc46 100644
--- a/demo/HelloWorld.mjs
+++ b/demo/HelloWorld.mjs
@@ -18,3 +18,5 @@ export class HelloWorld extends WebComponent {
         }</h1>`
   }
 }
+
+customElements.define('hello-world', HelloWorld);
\ No newline at end of file
diff --git a/demo/index.html b/demo/index.html
index 089c4c5..17b26bd 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -1,21 +1,12 @@
-<!DOCTYPE html>
-<html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Hello World WC</title>
-    <script type="module">
-        import {HelloWorld} from './HelloWorld.mjs';
-        customElements.define('hello-world', HelloWorld);
-    </script>
+  <script type="module" src="HelloWorld.mjs"></script>
 </head>
 <body>
-    <hello-world name="Ayo" emotion="sad"  />
-    <script>
-        const helloWorld = document.querySelector('hello-world');
-        setTimeout(() => {
-            helloWorld.setAttribute('emotion', 'excited');
-        }, 2500)
-    </script>
-</body>
-</html>
\ No newline at end of file
+  <hello-world name="Ayo" emotion="sad">
+  <script>
+      const helloWorld = document.querySelector('hello-world');
+      setTimeout(() => {
+        helloWorld.setAttribute('emotion', 'excited');
+      }, 2500)
+  </script>
+</body>
\ No newline at end of file
