diff --git a/package.json b/package.json
index a7e1a42..1fa4412 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
"@rollup/plugin-babel": "^5.2.2",
"@rollup/plugin-commonjs": "^17.0.0",
"@rollup/plugin-html": "^0.2.3",
+ "@rollup/plugin-json": "^4.1.0",
"@rollup/plugin-node-resolve": "^11.0.0",
"js-beautify": "^1.13.0",
"riot": "^5.3.1",
diff --git a/rollup.config.js b/rollup.config.js
index 3ab207d..3fb8cbe 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -8,12 +8,14 @@ import scss from 'rollup-plugin-scss';
import serve from 'rollup-plugin-serve';
import html from '@rollup/plugin-html';
import htmlUseref from './rollup/html-useref';
+import json from '@rollup/plugin-json';
const useServe = process.env.ROLLUP_SERVE === 'true';
const output = useServe ? '.serve' : 'dist';
const plugins = [
riot(),
+ json(),
nodeResolve(),
commonjs(),
scss({ output: `./${output}/docker-registry-ui.css`, outputStyle: 'compressed' }),
diff --git a/src/components/docker-registry-ui.riot b/src/components/docker-registry-ui.riot
index 2219008..514f9f6 100644
--- a/src/components/docker-registry-ui.riot
+++ b/src/components/docker-registry-ui.riot
@@ -16,13 +16,39 @@ along with this program. If not, see .
-->
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index d94c4a2..e265a20 100644
--- a/src/index.html
+++ b/src/index.html
@@ -34,7 +34,7 @@
-
+
diff --git a/src/index.js b/src/index.js
index 3429f97..da3db74 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,5 +6,11 @@ import './style.css';
import './roboto.css';
import './material-icons.css';
+import 'riot-mui/src/material-elements/material-navbar/material-navbar.scss';
+import 'riot-mui/src/material-elements/material-footer/material-footer.scss';
-component(DockerRegistryUI)(document.getElementsByTagName('body').item(0))
+const createApp = component(DockerRegistryUI);
+const tags = document.getElementsByTagName('docker-registry-ui');
+for (let i = 0; i < tags.length; i++) {
+ createApp(tags.item(i));
+}