diff --git a/README.md b/README.md
index 449cad1..2c15be1 100644
--- a/README.md
+++ b/README.md
@@ -2,9 +2,18 @@
 
 This is a base JavaScript class for creating Web Components easily.
 
+## Installation
+
+```bash
+npm i web-component-base
+```
+
+## Usage
+
 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.
 
 ```js
+// HelloWorld.mjs
 import { WebComponent } from "./WebComponent.mjs";
 
 export class HelloWorld extends WebComponent {
@@ -17,11 +26,7 @@ export class HelloWorld extends WebComponent {
 
   get template() {
     return `
-        <h1>Hello ${this.name}${
-            this.emotion === 'sad'
-                ? '. 😭'
-                : '! 🙌'
-        }</h1>`
+        <h1>Hello ${this.name}${this.emotion === "sad" ? ". 😭" : "! 🙌"}</h1>`;
   }
 }
 ```
@@ -29,13 +34,22 @@ export class HelloWorld extends WebComponent {
 Then changes in the attributes observed will cause the UI to render.
 
 ```html
-<hello-world name="Ayo" emotion="sad">
-<script>
-    const helloWorld = document.querySelector('hello-world');
-    setTimeout(() => {
+<head>
+  ...
+  <script type="module">
+    import {HelloWorld} from './HelloWorld.mjs';
+    customElements.define('hello-world', HelloWorld);
+  </script>
+</head>
+<body>
+  <hello-world name="Ayo" emotion="sad">
+  <script>
+      const helloWorld = document.querySelector('hello-world');
+      setTimeout(() => {
         helloWorld.setAttribute('emotion', 'excited');
-    }, 2500)
-</script>
+      }, 2500)
+  </script>
+</body>
 ```
 
 <img alt="UI showing feeling toward Web Components changing from SAD to EXCITED" src="./assets/wc-base-demo.gif" width="250" />
diff --git a/components/WebComponent.mjs b/WebComponent.mjs
similarity index 100%
rename from components/WebComponent.mjs
rename to WebComponent.mjs
diff --git a/components/HelloWorld.mjs b/demo/HelloWorld.mjs
similarity index 87%
rename from components/HelloWorld.mjs
rename to demo/HelloWorld.mjs
index 1c58310..e02eef2 100644
--- a/components/HelloWorld.mjs
+++ b/demo/HelloWorld.mjs
@@ -1,5 +1,5 @@
 // @ts-check
-import { WebComponent } from "./WebComponent.mjs";
+import WebComponent from "../index.mjs";
 
 export class HelloWorld extends WebComponent {
   name = "World";
diff --git a/index.html b/demo/index.html
similarity index 74%
rename from index.html
rename to demo/index.html
index 7d0d3bc..089c4c5 100644
--- a/index.html
+++ b/demo/index.html
@@ -4,7 +4,10 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Hello World WC</title>
-    <script type="module" src="./index.js"></script>
+    <script type="module">
+        import {HelloWorld} from './HelloWorld.mjs';
+        customElements.define('hello-world', HelloWorld);
+    </script>
 </head>
 <body>
     <hello-world name="Ayo" emotion="sad"  />
diff --git a/index.js b/index.js
deleted file mode 100644
index f3ba126..0000000
--- a/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// @ts-check
-
-import { HelloWorld } from './components/HelloWorld.mjs'
-
-customElements.define('hello-world', HelloWorld)
\ No newline at end of file
diff --git a/index.mjs b/index.mjs
new file mode 100644
index 0000000..fe0312e
--- /dev/null
+++ b/index.mjs
@@ -0,0 +1,3 @@
+import { WebComponent } from './WebComponent.mjs';
+
+export default WebComponent;
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..9467719
--- /dev/null
+++ b/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "web-component-base",
+  "version": "1.0.0",
+  "description": "JavaScript Web Component base class",
+  "main": "index.mjs",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://git.sr.ht/~ayoayco/web-component-base.git"
+  },
+  "keywords": [
+    "web components",
+    "web component",
+    "custom elements",
+    "custom element"
+  ],
+  "author": "Ayo Ayco",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://todo.sr.ht/~ayoayco/web-component-base"
+  },
+  "homepage": "https://git.sr.ht/~ayoayco/web-component-base#readme"
+}
