diff --git a/package-lock.json b/package-lock.json
index 766e45e0..19f24f04 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32676,7 +32676,7 @@
     },
     "packages/ngx-web-component": {
       "name": "@readalongs/ngx-web-component",
-      "version": "0.0.1",
+      "version": "0.2.0",
       "devDependencies": {
         "@angular-devkit/architect": "^0.1501.1",
         "@angular-devkit/build-angular": "^15.1.1",
@@ -32743,7 +32743,7 @@
     },
     "packages/web-component": {
       "name": "@readalongs/web-component",
-      "version": "0.2.0",
+      "version": "0.2.1",
       "license": "MIT",
       "dependencies": {
         "howler": "^2.2.3",
diff --git a/packages/studio-web/src/app/b64.service.ts b/packages/studio-web/src/app/b64.service.ts
index 0ac6b25a..0e1700d7 100644
--- a/packages/studio-web/src/app/b64.service.ts
+++ b/packages/studio-web/src/app/b64.service.ts
@@ -12,9 +12,9 @@ import { Segment } from "soundswallower";
 })
 export class B64Service {
   JS_BUNDLE_URL =
-    "https://unpkg.com/@roedoejet/readalong@^0.1.6/dist/bundle.js";
+    "https://unpkg.com/@readalongs/web-component@^0.2.1/dist/bundle.js";
   FONTS_BUNDLE_URL =
-    "https://unpkg.com/@roedoejet/readalong@^0.1.6/dist/fonts.b64.css";
+    "https://unpkg.com/@readalongs/web-component@^0.2.1/dist/fonts.b64.css";
   constructor(private http: HttpClient, private fileService: FileService) {}
   getBundle$(): Observable<any[]> {
     return forkJoin([
diff --git a/packages/web-component/package.json b/packages/web-component/package.json
index 3c218ed6..09b9a516 100644
--- a/packages/web-component/package.json
+++ b/packages/web-component/package.json
@@ -1,11 +1,11 @@
 {
     "name": "@readalongs/web-component",
-    "version": "0.2.0",
+    "version": "0.2.1",
     "description": "ReadAlong Web Component",
     "main": "dist/index.cjs.js",
     "module": "dist/index.js",
-    "es2015": "dist/esm/index.mjs",
-    "es2017": "dist/esm/index.mjs",
+    "es2015": "dist/esm/index.js",
+    "es2017": "dist/esm/index.js",
     "types": "dist/types/components.d.ts",
     "collection": "dist/collection/collection-manifest.json",
     "collection:main": "dist/collection/index.js",
diff --git a/packages/web-component/readme.md b/packages/web-component/readme.md
index 3a638a38..932d8e25 100644
--- a/packages/web-component/readme.md
+++ b/packages/web-component/readme.md
@@ -48,8 +48,8 @@ You can either modify the `/src/index.html` or after running `npm start` you can
 the following script import in your own `index.html` page:
 
 ```html 
-  <script type="module" src="https://unpkg.com/@roedoejet/readalong@^0.1.6/dist/read-along/web-component.esm.js"></script>
-  <script nomodule src="https://unpkg.com/@roedoejet/readalong@^0.1.6/dist/read-along/read-along.js"></script>
+  <script type="module" src="https://unpkg.com/@readalongs/web-component@^0.2.1/dist/read-along/web-component.esm.js"></script>
+  <script nomodule src="https://unpkg.com/@readalongs/web-component@^0.2.1/dist/read-along/read-along.js"></script>
 ```
 
 Then, you can add as many read-along components to your page as you like simply by adding `<read-along></read-along>`
@@ -63,7 +63,7 @@ using _________ service located here: ____________.
 
 ## Loading as a single file
 
-By default, Stencil (the tool used to build this web component) uses lazy loading. However, some use cases for this web component might involve running the component as a single file, without access to the internet. A single-file script of this web component is therefore made available at https://unpkg.com/@roedoejet/readalong@^0.1.6/dist/bundle.js although we recommend using the default imports using the unpkg content delivery network (cdn) described above.
+By default, Stencil (the tool used to build this web component) uses lazy loading. However, some use cases for this web component might involve running the component as a single file, without access to the internet. A single-file script of this web component is therefore made available at https://unpkg.com/@readalongs/web-component@^0.2.1/dist/bundle.js although we recommend using the default imports using the unpkg content delivery network (cdn) described above.
 
 ## Theming
 
diff --git a/packages/web-component/webpack.config.js b/packages/web-component/webpack.config.js
index a6b04f9b..b9ad99ae 100644
--- a/packages/web-component/webpack.config.js
+++ b/packages/web-component/webpack.config.js
@@ -4,7 +4,7 @@ const TerserPlugin = require("terser-webpack-plugin");
 const webpack = require('webpack');
 
 module.exports = {
-    entry: '../../dist/packages/web-component/dist/esm/index.js',
+    entry: '../../dist/packages/web-component/dist/esm/web-component.js',
     output: {
         filename: 'bundle.js',
         path: path.resolve('../../dist/packages/web-component/dist'),
@@ -24,4 +24,4 @@ module.exports = {
     plugins: [new webpack.optimize.LimitChunkCountPlugin({
         maxChunks: 1
     })]
-};
\ No newline at end of file
+};