diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 8d9b24b7660db74473962b253db7d2b26d9b7b0a..892ef33779e6a216f3734aa8ce94ec7af618d2f9 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -21,8 +21,10 @@ publish:
   only:
     refs:
       - publish
+      - master
   script:
     - sudo npm install --global can-npm-publish
+    - yarn config set registry https://registry.npmjs.org/
     - yarn config set cache-folder "$CI_PROJECT_DIR/_yarn_cache"
     - yarn install
     - yarn run publish
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 0000000000000000000000000000000000000000..bd3327ab5a9da7959388dab26528073f912af07e
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1 @@
+//registry.npmjs.org/:_authToken=${NPM_TOKEN}
\ No newline at end of file
diff --git a/README.md b/README.md
index 57441c842a4a4a657287da16401a964d310445ed..e1bb85869f674722ce3580e407efb0c812e98f57 100644
--- a/README.md
+++ b/README.md
@@ -20,3 +20,10 @@ yarn install
 
 * `yarn run test` -  Run test for all packages
 * `yarn run clean` - Removes all `node_modules` directories.
+
+## Publishing packages to npmjs.com
+
+There is an automatic publishing process initiated for each package if code is pushed
+to the `master` branch, if the package isn't set to private in its `package.json` and
+the version number in its `package.json` is higher than the version number on npmjs.com.
+
diff --git a/packages/app-shell/.npmignore b/packages/app-shell/.npmignore
new file mode 100644
index 0000000000000000000000000000000000000000..bd8138ceb1b9d6026edec0d20ac4be9940d5cf73
--- /dev/null
+++ b/packages/app-shell/.npmignore
@@ -0,0 +1,5 @@
+node_modules
+.idea
+npm-debug.log
+package-lock.json
+index.html
diff --git a/packages/app-shell/.npmrc b/packages/app-shell/.npmrc
new file mode 100644
index 0000000000000000000000000000000000000000..bd3327ab5a9da7959388dab26528073f912af07e
--- /dev/null
+++ b/packages/app-shell/.npmrc
@@ -0,0 +1 @@
+//registry.npmjs.org/:_authToken=${NPM_TOKEN}
\ No newline at end of file
diff --git a/packages/app-shell/README.md b/packages/app-shell/README.md
index f70ee1d755ae3eb84f4c621c750b063f614884ca..7bfd807c0533dd702581de716b4010f9c2469ae7 100644
--- a/packages/app-shell/README.md
+++ b/packages/app-shell/README.md
@@ -3,10 +3,17 @@
 A web component for building SPAs consisting of one topic with multiple
 activities. Handles login, language selection, activity switching, menus etc.
 
+You can install this component via npm:
+
+```bash
+npm i @dbp-toolkit/app-shell
+```
+
 ## Usage
 
 ```html
 <dbp-app-shell src="/example.topic.metadata.json"></dbp-app-shell>
+<script type="module" src="node_modules/@dbp-toolkit/app-shell/dist/dbp-app-shell.js"></script>
 ```
 
 ## Attributes
@@ -83,6 +90,9 @@ yarn run watch
 
 # run tests
 yarn test
+
+# build local packages in dist directory
+yarn run build
 ```
 
 Jump to <http://localhost:8002> and you should get a Single Sign On login page.
diff --git a/packages/app-shell/package.json b/packages/app-shell/package.json
index 05a3426f1021e7a04cd8311a424b647c43d7ba02..eb22be76b96955bf21efc4245345ac45523b65d9 100644
--- a/packages/app-shell/package.json
+++ b/packages/app-shell/package.json
@@ -1,9 +1,9 @@
 {
   "name": "@dbp-toolkit/app-shell",
-  "version": "0.1.0",
+  "homepage": "https://gitlab.tugraz.at/dbp/web-components/toolkit/-/tree/master/packages/app-shell",
+  "version": "0.1.4",
   "main": "src/index.js",
   "license": "LGPL-2.1-or-later",
-  "private": true,
   "devDependencies": {
     "@rollup/plugin-commonjs": "^16.0.0",
     "@rollup/plugin-json": "^4.1.0",
@@ -45,7 +45,7 @@
     "watch": "npm run watch-local",
     "watch-local": "rollup -c --watch",
     "test": "npm run build-test && karma start --singleRun",
-    "publish": "can-npm-publish --verbose 2>&1 && npm run build && echo 'Todo: Publish' || true",
+    "publish": "can-npm-publish --verbose 2>&1 && npm run build && npm publish --access public 2>&1 || true",
     "lint": "eslint ."
   }
 }
diff --git a/packages/auth/.npmrc b/packages/auth/.npmrc
new file mode 100644
index 0000000000000000000000000000000000000000..bd3327ab5a9da7959388dab26528073f912af07e
--- /dev/null
+++ b/packages/auth/.npmrc
@@ -0,0 +1 @@
+//registry.npmjs.org/:_authToken=${NPM_TOKEN}
\ No newline at end of file
diff --git a/packages/auth/package.json b/packages/auth/package.json
index 29f4ca2c4140f5f33cc6b8bc74ce59ee3831a9a2..ed3a352ee50c55e19015536e875c876c18e3b4c6 100644
--- a/packages/auth/package.json
+++ b/packages/auth/package.json
@@ -1,5 +1,6 @@
 {
   "name": "@dbp-toolkit/auth",
+  "homepage": "https://gitlab.tugraz.at/dbp/web-components/toolkit/-/tree/master/packages/auth",
   "version": "0.1.0",
   "main": "src/index.js",
   "license": "LGPL-2.1-or-later",
diff --git a/packages/check-in-place-select/.npmrc b/packages/check-in-place-select/.npmrc
new file mode 100644
index 0000000000000000000000000000000000000000..bd3327ab5a9da7959388dab26528073f912af07e
--- /dev/null
+++ b/packages/check-in-place-select/.npmrc
@@ -0,0 +1 @@
+//registry.npmjs.org/:_authToken=${NPM_TOKEN}
\ No newline at end of file
diff --git a/packages/check-in-place-select/package.json b/packages/check-in-place-select/package.json
index 1dd6d56e48f91b8e4dae9a93d4be179c6a0fcbbe..8c132cc59cabe6bb8fbb6fabd259e487cfd7ac31 100644
--- a/packages/check-in-place-select/package.json
+++ b/packages/check-in-place-select/package.json
@@ -1,5 +1,6 @@
 {
   "name": "@dbp-toolkit/check-in-place-select",
+  "homepage": "https://gitlab.tugraz.at/dbp/web-components/toolkit/-/tree/master/packages/check-in-place-select",
   "version": "0.1.0",
   "main": "src/index.js",
   "license": "LGPL-2.1-or-later",
@@ -45,6 +46,6 @@
     "watch-local": "rollup -c --watch",
     "watch-dev": "rollup -c --watch --environment BUILD:development",
     "test": "npm run build-test && karma start --singleRun",
-    "publish": "can-npm-publish --verbose 2>&1 && npm run build && echo 'Todo: Publish' || true"
+    "publish": "can-npm-publish --verbose 2>&1 && npm run build && npm publish --access public 2>&1 || true"
   }
 }
diff --git a/packages/common/.npmrc b/packages/common/.npmrc
new file mode 100644
index 0000000000000000000000000000000000000000..bd3327ab5a9da7959388dab26528073f912af07e
--- /dev/null
+++ b/packages/common/.npmrc
@@ -0,0 +1 @@
+//registry.npmjs.org/:_authToken=${NPM_TOKEN}
\ No newline at end of file
diff --git a/packages/common/i18next.js b/packages/common/i18next.js
index 0ffa8e9702665dd9eabe09b4b008447cc4bebe0b..22f445cb18077b2ffdaf5e206095c9df985e9a5e 100644
--- a/packages/common/i18next.js
+++ b/packages/common/i18next.js
@@ -8,9 +8,9 @@ import i18next from 'i18next';
  * @param {i18next.i18n} i18n - The i18next instance
  * @param {Date} date - The date to format
  * @param {object} options - Options passed to Intl.DateTimeFormat
- * @returns {string} The formated datetime
+ * @returns {string} The formatted datetime
  */
-export function dateTimeFormat(i18n, date, options) {
+export function dateTimeFormat(i18n, date, options = {}) {
     return new Intl.DateTimeFormat(i18n.languages, options).format(date);
 }
 
@@ -22,9 +22,9 @@ export function dateTimeFormat(i18n, date, options) {
  * @param {i18next.i18n} i18n - The i18next instance
  * @param {number} number - The number to format
  * @param {object} options - Options passed to Intl.NumberFormat
- * @returns {string} The formated number
+ * @returns {string} The formatted number
  */
-export function numberFormat(i18n, number, options) {
+export function numberFormat(i18n, number, options = {}) {
     return new Intl.NumberFormat(i18n.languages, options).format(number);
 }
 
diff --git a/packages/common/package.json b/packages/common/package.json
index 8bdd51cda6f458dcb5626fa2f06492741779d0c8..51ea708e214bf53f0a88aa3549e750c19e93464c 100644
--- a/packages/common/package.json
+++ b/packages/common/package.json
@@ -1,5 +1,6 @@
 {
   "name": "@dbp-toolkit/common",
+  "homepage": "https://gitlab.tugraz.at/dbp/web-components/toolkit/-/tree/master/packages/common",
   "version": "0.1.0",
   "module": "index.js",
   "license": "LGPL-2.1-or-later",
@@ -29,7 +30,7 @@
     "test": "npm run build-test && karma start --singleRun",
     "watch": "rollup -c --watch",
     "lint": "eslint .",
-    "publish": "can-npm-publish --verbose 2>&1 && npm run build && echo 'Todo: Publish' || true"
+    "publish": "can-npm-publish --verbose 2>&1 && npm run build && npm publish --access public 2>&1 || true"
   },
   "dependencies": {
     "@open-wc/scoped-elements": "^1.3.2",
diff --git a/packages/data-table-view/.npmrc b/packages/data-table-view/.npmrc
new file mode 100644
index 0000000000000000000000000000000000000000..bd3327ab5a9da7959388dab26528073f912af07e
--- /dev/null
+++ b/packages/data-table-view/.npmrc
@@ -0,0 +1 @@
+//registry.npmjs.org/:_authToken=${NPM_TOKEN}
\ No newline at end of file
diff --git a/packages/data-table-view/package.json b/packages/data-table-view/package.json
index e290527a08f8eff97c14c532947de95506b89768..94444997de4fa14d5a850bd74c02ff9c2c4a90ef 100644
--- a/packages/data-table-view/package.json
+++ b/packages/data-table-view/package.json
@@ -1,5 +1,6 @@
 {
   "name": "@dbp-toolkit/data-table-view",
+  "homepage": "https://gitlab.tugraz.at/dbp/web-components/toolkit/-/tree/master/packages/data-table-view",
   "version": "0.1.0",
   "main": "src/index.js",
   "license": "LGPL-2.1-or-later",
@@ -51,6 +52,6 @@
     "watch-local": "rollup -c --watch",
     "watch-dev": "rollup -c --watch --environment BUILD:development",
     "test": "npm run build-test && karma start --singleRun",
-    "publish": "can-npm-publish --verbose 2>&1 && npm run build && echo 'Todo: Publish' || true"
+    "publish": "can-npm-publish --verbose 2>&1 && npm run build && npm publish --access public 2>&1 || true"
   }
 }
diff --git a/packages/file-handling/.npmrc b/packages/file-handling/.npmrc
new file mode 100644
index 0000000000000000000000000000000000000000..bd3327ab5a9da7959388dab26528073f912af07e
--- /dev/null
+++ b/packages/file-handling/.npmrc
@@ -0,0 +1 @@
+//registry.npmjs.org/:_authToken=${NPM_TOKEN}
\ No newline at end of file
diff --git a/packages/file-handling/package.json b/packages/file-handling/package.json
index d110b4721ac20b5f2c91321ad1d1e982c3e25a50..1ff19c9cf45b0df6c98e80468fdb4a206022e060 100644
--- a/packages/file-handling/package.json
+++ b/packages/file-handling/package.json
@@ -1,5 +1,6 @@
 {
   "name": "@dbp-toolkit/file-handling",
+  "homepage": "https://gitlab.tugraz.at/dbp/web-components/toolkit/-/tree/master/packages/file-handling",
   "version": "0.1.5",
   "main": "src/index.js",
   "license": "LGPL-2.1-or-later",
@@ -46,6 +47,6 @@
     "watch-local": "rollup -c --watch",
     "watch-dev": "rollup -c --watch --environment BUILD:development",
     "test": "npm run build-test && karma start --singleRun",
-    "publish": "can-npm-publish --verbose 2>&1 && npm run build && echo 'Todo: Publish' || true"
+    "publish": "can-npm-publish --verbose 2>&1 && npm run build && npm publish --access public 2>&1 || true"
   }
 }
diff --git a/packages/knowledge-base-web-page-element-view/.npmrc b/packages/knowledge-base-web-page-element-view/.npmrc
new file mode 100644
index 0000000000000000000000000000000000000000..bd3327ab5a9da7959388dab26528073f912af07e
--- /dev/null
+++ b/packages/knowledge-base-web-page-element-view/.npmrc
@@ -0,0 +1 @@
+//registry.npmjs.org/:_authToken=${NPM_TOKEN}
\ No newline at end of file
diff --git a/packages/knowledge-base-web-page-element-view/package.json b/packages/knowledge-base-web-page-element-view/package.json
index afa3acf156aa2cee93db2e8c3be35ce1cef0f396..4a2f6f4eed50dfc6ba3f9086936e00cb834155a4 100644
--- a/packages/knowledge-base-web-page-element-view/package.json
+++ b/packages/knowledge-base-web-page-element-view/package.json
@@ -1,5 +1,6 @@
 {
   "name": "@dbp-toolkit/knowledge-base-web-page-element-view",
+  "homepage": "https://gitlab.tugraz.at/dbp/web-components/toolkit/-/tree/master/packages/knowledge-base-web-page-element-view",
   "version": "0.1.0",
   "main": "src/index.js",
   "license": "LGPL-2.1-or-later",
@@ -44,6 +45,6 @@
     "watch-local": "rollup -c --watch",
     "watch-dev": "rollup -c --watch --environment BUILD:development",
     "test": "npm run build-test && karma start --singleRun",
-    "publish": "can-npm-publish --verbose 2>&1 && npm run build && echo 'Todo: Publish' || true"
+    "publish": "can-npm-publish --verbose 2>&1 && npm run build && npm publish --access public 2>&1 || true"
   }
 }
diff --git a/packages/language-select/.npmignore b/packages/language-select/.npmignore
new file mode 100644
index 0000000000000000000000000000000000000000..bd8138ceb1b9d6026edec0d20ac4be9940d5cf73
--- /dev/null
+++ b/packages/language-select/.npmignore
@@ -0,0 +1,5 @@
+node_modules
+.idea
+npm-debug.log
+package-lock.json
+index.html
diff --git a/packages/language-select/.npmrc b/packages/language-select/.npmrc
new file mode 100644
index 0000000000000000000000000000000000000000..bd3327ab5a9da7959388dab26528073f912af07e
--- /dev/null
+++ b/packages/language-select/.npmrc
@@ -0,0 +1 @@
+//registry.npmjs.org/:_authToken=${NPM_TOKEN}
\ No newline at end of file
diff --git a/packages/language-select/README.md b/packages/language-select/README.md
index 313cb1b48f207c70937aa02afcdb23f45e674702..087ba18284b02382b3adc77b6f571191aab95ec5 100644
--- a/packages/language-select/README.md
+++ b/packages/language-select/README.md
@@ -1,5 +1,18 @@
 # Language Select Web Component
 
+You can install this component via npm:
+
+```bash
+npm i @dbp-toolkit/language-select
+```
+
+## Usage
+
+```html
+<dbp-language-select></dbp-language-select>
+<script type="module" src="node_modules/@dbp-toolkit/app-shell/dist/dbp-language-select.js"></script>
+```
+
 ## Local development
 
 ```bash
diff --git a/packages/language-select/package.json b/packages/language-select/package.json
index a8332ac2c0462a0b1ac937997aeeacf8d5846529..7be576643af541c7849bbc9e9ae4baac34e583c5 100644
--- a/packages/language-select/package.json
+++ b/packages/language-select/package.json
@@ -1,9 +1,9 @@
 {
   "name": "@dbp-toolkit/language-select",
-  "version": "0.1.0",
+  "homepage": "https://gitlab.tugraz.at/dbp/web-components/toolkit/-/tree/master/packages/language-select",
+  "version": "0.1.1",
   "main": "src/index.js",
   "license": "LGPL-2.1-or-later",
-  "private": true,
   "devDependencies": {
     "@rollup/plugin-commonjs": "^16.0.0",
     "@rollup/plugin-json": "^4.1.0",
@@ -40,6 +40,6 @@
     "watch-local": "rollup -c --watch",
     "watch-dev": "rollup -c --watch --environment BUILD:development",
     "test": "npm run build-test && karma start --singleRun",
-    "publish": "can-npm-publish --verbose 2>&1 && npm run build && echo 'Todo: Publish' || true"
+    "publish": "can-npm-publish --verbose 2>&1 && npm run build && npm publish --access public 2>&1 || true"
   }
 }
diff --git a/packages/matomo/.npmrc b/packages/matomo/.npmrc
new file mode 100644
index 0000000000000000000000000000000000000000..bd3327ab5a9da7959388dab26528073f912af07e
--- /dev/null
+++ b/packages/matomo/.npmrc
@@ -0,0 +1 @@
+//registry.npmjs.org/:_authToken=${NPM_TOKEN}
\ No newline at end of file
diff --git a/packages/matomo/package.json b/packages/matomo/package.json
index cd8c2e1ba35b5ab62af59e116b0751450c4618ac..54636cbc2a515f60b1cef9a3fd2ef6d0812d30b8 100644
--- a/packages/matomo/package.json
+++ b/packages/matomo/package.json
@@ -1,5 +1,6 @@
 {
   "name": "@dbp-toolkit/matomo",
+  "homepage": "https://gitlab.tugraz.at/dbp/web-components/toolkit/-/tree/master/packages/matomo",
   "version": "0.1.0",
   "main": "src/index.js",
   "license": "LGPL-2.1-or-later",
diff --git a/packages/notification/.npmrc b/packages/notification/.npmrc
new file mode 100644
index 0000000000000000000000000000000000000000..bd3327ab5a9da7959388dab26528073f912af07e
--- /dev/null
+++ b/packages/notification/.npmrc
@@ -0,0 +1 @@
+//registry.npmjs.org/:_authToken=${NPM_TOKEN}
\ No newline at end of file
diff --git a/packages/notification/package.json b/packages/notification/package.json
index 364beaf6191f8185ce3ddb3401aa2a0407dfc0cc..01ca29485ed554c9a1763fbbe41dbe5109753c37 100644
--- a/packages/notification/package.json
+++ b/packages/notification/package.json
@@ -1,5 +1,6 @@
 {
   "name": "@dbp-toolkit/notification",
+  "homepage": "https://gitlab.tugraz.at/dbp/web-components/toolkit/-/tree/master/packages/notification",
   "version": "0.1.0",
   "main": "src/index.js",
   "license": "LGPL-2.1-or-later",
@@ -41,6 +42,6 @@
     "watch-local": "rollup -c --watch",
     "watch-dev": "rollup -c --watch --environment BUILD:development",
     "test": "npm run build-test && karma start --singleRun",
-    "publish": "can-npm-publish --verbose 2>&1 && npm run build && echo 'Todo: Publish' || true"
+    "publish": "can-npm-publish --verbose 2>&1 && npm run build && npm publish --access public 2>&1 || true"
   }
 }
diff --git a/packages/person-profile/.npmrc b/packages/person-profile/.npmrc
new file mode 100644
index 0000000000000000000000000000000000000000..bd3327ab5a9da7959388dab26528073f912af07e
--- /dev/null
+++ b/packages/person-profile/.npmrc
@@ -0,0 +1 @@
+//registry.npmjs.org/:_authToken=${NPM_TOKEN}
\ No newline at end of file
diff --git a/packages/person-profile/package.json b/packages/person-profile/package.json
index 2101c5716d4d1957dd901366835798a613d8570a..a77a0929189b2b2da06d097dd3cc8e54f99f8b05 100644
--- a/packages/person-profile/package.json
+++ b/packages/person-profile/package.json
@@ -1,5 +1,6 @@
 {
   "name": "@dbp-toolkit/person-profile",
+  "homepage": "https://gitlab.tugraz.at/dbp/web-components/toolkit/-/tree/master/packages/person-profile",
   "version": "0.1.0",
   "main": "src/index.js",
   "license": "LGPL-2.1-or-later",
@@ -44,6 +45,6 @@
     "watch-local": "rollup -c --watch",
     "watch-dev": "rollup -c --watch --environment BUILD:development",
     "test": "npm run build-test && karma start --singleRun",
-    "publish": "can-npm-publish --verbose 2>&1 && npm run build && echo 'Todo: Publish' || true"
+    "publish": "can-npm-publish --verbose 2>&1 && npm run build && npm publish --access public 2>&1 || true"
   }
 }
diff --git a/packages/person-select/.npmrc b/packages/person-select/.npmrc
new file mode 100644
index 0000000000000000000000000000000000000000..bd3327ab5a9da7959388dab26528073f912af07e
--- /dev/null
+++ b/packages/person-select/.npmrc
@@ -0,0 +1 @@
+//registry.npmjs.org/:_authToken=${NPM_TOKEN}
\ No newline at end of file
diff --git a/packages/person-select/package.json b/packages/person-select/package.json
index ab4ee3f9c02f62cb58d2e43287507701151f26c6..3a0f96a9bb7bed72ba4518908f59e946e1e5f01e 100644
--- a/packages/person-select/package.json
+++ b/packages/person-select/package.json
@@ -1,5 +1,6 @@
 {
   "name": "@dbp-toolkit/person-select",
+  "homepage": "https://gitlab.tugraz.at/dbp/web-components/toolkit/-/tree/master/packages/person-select",
   "version": "0.1.0",
   "main": "src/index.js",
   "license": "LGPL-2.1-or-later",
@@ -45,6 +46,6 @@
     "watch-local": "rollup -c --watch",
     "watch-dev": "rollup -c --watch --environment BUILD:development",
     "test": "npm run build-test && karma start --singleRun",
-    "publish": "can-npm-publish --verbose 2>&1 && npm run build && echo 'Todo: Publish' || true"
+    "publish": "can-npm-publish --verbose 2>&1 && npm run build && npm publish --access public 2>&1 || true"
   }
 }
diff --git a/packages/qr-code-scanner/.npmrc b/packages/qr-code-scanner/.npmrc
new file mode 100644
index 0000000000000000000000000000000000000000..bd3327ab5a9da7959388dab26528073f912af07e
--- /dev/null
+++ b/packages/qr-code-scanner/.npmrc
@@ -0,0 +1 @@
+//registry.npmjs.org/:_authToken=${NPM_TOKEN}
\ No newline at end of file
diff --git a/packages/qr-code-scanner/README.md b/packages/qr-code-scanner/README.md
index 29961b5f1bfffd4499bc2baa62026acfc77a8dc4..ad33771ed9786ef2aa5be93e80025ef40d430925 100644
--- a/packages/qr-code-scanner/README.md
+++ b/packages/qr-code-scanner/README.md
@@ -32,6 +32,10 @@ after loaded. This attribute is also used to stop the QR code reader or if you d
 - `'code-detected'`: Outgoing Event which is fired if a QR code is detected. The data of the detected QR code is in `event.detail`.
 - `'scan-started`: Fired after the first image is drawn. Can be used to scrolling or other layout dependent tasks.
 
+## Assets
+
+- `qr-scanner/qr-scanner-worker.*` -> `dist/local/@dbp-toolkit/qr-code-scanner/`
+
 ## Local development
 
 ```bash
diff --git a/packages/qr-code-scanner/package.json b/packages/qr-code-scanner/package.json
index 0da40e15a6d58f965cb9c70cc13bbcab70ba5905..5e65f2a8b174b3e68df8cca942b33e4a18a5c9b6 100644
--- a/packages/qr-code-scanner/package.json
+++ b/packages/qr-code-scanner/package.json
@@ -1,5 +1,6 @@
 {
   "name": "@dbp-toolkit/qr-code-scanner",
+  "homepage": "https://gitlab.tugraz.at/dbp/web-components/toolkit/-/tree/master/packages/qr-code-scanner",
   "version": "0.1.0",
   "main": "src/index.js",
   "license": "LGPL-2.1-or-later",
@@ -47,6 +48,6 @@
     "watch-dev": "rollup -c --watch --environment BUILD:development",
     "test": "npm run build-test && karma start --singleRun",
     "lint": "eslint .",
-    "publish": "can-npm-publish --verbose 2>&1 && npm run build && echo 'Todo: Publish' || true"
+    "publish": "can-npm-publish --verbose 2>&1 && npm run build && npm publish --access public 2>&1 || true"
   }
 }
diff --git a/packages/qr-code-scanner/src/dbp-qr-code-scanner-demo.js b/packages/qr-code-scanner/src/dbp-qr-code-scanner-demo.js
index f397a1b340c468da2aa5c9bf5fab0f8003c21d5c..4b8bd63a9cd19c061033a41eda7c5e5246159706 100644
--- a/packages/qr-code-scanner/src/dbp-qr-code-scanner-demo.js
+++ b/packages/qr-code-scanner/src/dbp-qr-code-scanner-demo.js
@@ -57,7 +57,7 @@ export class QrCodeScannerDemo extends ScopedElementsMixin(LitElement) {
                 <div class="container">
                     <div class="columns is-centered">
                         <div class="column">
-                            <dbp-qr-code-scanner show-output lang="${this.lang}"></dbp-qr-code-scanner>
+                            <dbp-qr-code-scanner @code-detected="${(e) => console.log(e)}" @scan-started="${(e) => console.log(e)}" show-output lang="${this.lang}"></dbp-qr-code-scanner>
                         </div>
                     </div>
                 </div>
diff --git a/packages/qr-code-scanner/src/i18n/de/translation.json b/packages/qr-code-scanner/src/i18n/de/translation.json
index 4f39bf3a9987b918034f6cb9ea21f710c46d4fd3..da2f50d51d479a5681cf064b3728131613f33301 100644
--- a/packages/qr-code-scanner/src/i18n/de/translation.json
+++ b/packages/qr-code-scanner/src/i18n/de/translation.json
@@ -1,5 +1,6 @@
 {
-  "no-camera-access": "Zugriff auf Kamera nicht möglich (bitte stellen Sie sicher, dass eine Webcam aktiviert ist)",
+  "no-camera-access": "Zugriff auf Kamera nicht möglich.",
+  "check-access": "Bitte stellen Sie sicher, dass eine Webcam oder Kamera aktiviert ist und überprüfen Sie ob Ihr Browser die notwendigen Berechtigungen besitzt.",
   "finished-scan": "Scannen abgeschlossen.",
   "loading-video": "Video laden ...",
   "no-qr-detected": "Kein QR-Code erkannt.",
diff --git a/packages/qr-code-scanner/src/i18n/en/translation.json b/packages/qr-code-scanner/src/i18n/en/translation.json
index c0d342846cf3fd42394ae8e5e2cb9a63a960b97d..59ef87c97203b8b1506cf3c56cdae413a319c3bb 100644
--- a/packages/qr-code-scanner/src/i18n/en/translation.json
+++ b/packages/qr-code-scanner/src/i18n/en/translation.json
@@ -1,5 +1,6 @@
 {
-  "no-camera-access": "Unable to access video stream (please make sure you have a webcam enabled)",
+  "no-camera-access": "Unable to access video stream.",
+  "check-access": "Please make sure that a webcam or camera is activated and check whether your browser has the necessary authorizations.",
   "finished-scan": "Finished scanning.",
   "loading-video": "⌛ Loading video...",
   "no-qr-detected": "No QR code detected.",
diff --git a/packages/qr-code-scanner/src/qr-code-scanner.js b/packages/qr-code-scanner/src/qr-code-scanner.js
index f4f135a0e43a408d5bf2e417c0a1f27bb352e5d5..7e4aa7406bdf4153e68353a55c8735c544899ee4 100644
--- a/packages/qr-code-scanner/src/qr-code-scanner.js
+++ b/packages/qr-code-scanner/src/qr-code-scanner.js
@@ -241,7 +241,7 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
         let firstDrawDone = false;
 
         this._askPermission = true;
-        this._loadingMessage = i18n.t('no-camera-access');
+        this._loadingMessage = html` ${i18n.t('no-camera-access')} <br> ${i18n.t('check-access')}`;
         let video = await createVideoElement(this._activeCamera);
         if ( video !== null ) {
             targetvideo.appendChild(video);