diff --git a/pages/chart/index.vue b/pages/chart/index.vue
index 2717d9e6..b77d13ed 100644
--- a/pages/chart/index.vue
+++ b/pages/chart/index.vue
@@ -1,5 +1,6 @@
 <template>
-  <enso-table class="box is-paddingless raises-on-hover" id="notes" />
+  <!-- <enso-table class="box is-paddingless raises-on-hover" id="notes" /> -->
+  <div id="webtrees-pedigree-chart-container"></div>
 </template>
 
 <router>
@@ -9,7 +10,7 @@
 </router>
 <script>
 import { EnsoTable } from "@enso-ui/tables/bulma";
-
+import { PedigreeChart } from "/assets/js/modules/index";
 export default {
   layout: "auth",
   meta: {
@@ -18,6 +19,33 @@ export default {
   },
 
   components: { EnsoTable },
+  methods: {
+    fetchData() {
+      this.$axios
+        .$get("/api/trees/show")
+        // .then((res) => res.json())
+        .then((res) => {
+          const pedigreeChart = new PedigreeChart(
+            "webtrees-pedigree-chart-container",
+            {
+              labels: ["zoom", "move"],
+              generations: 4,
+              defaultColor: "#0000FF",
+              fontColor: "#0000FF",
+              showEmptyBoxes: "up",
+              treeLayout: "right",
+              rtl: "rtl",
+            }
+          );
+          pedigreeChart.cssFile = "/assets/css/svg.css";
+          // Draw chart
+          pedigreeChart.draw(res.data);
+        });
+    },
+  },
+  mounted() {
+    this.fetchData();
+  },
 };
 </script>
 
diff --git a/pages/chart/show.vue b/pages/chart/show.vue
index c4ecc185..78316f40 100644
--- a/pages/chart/show.vue
+++ b/pages/chart/show.vue
@@ -1,11 +1,11 @@
 <template>
   <div>
-    <div id="tree"></div>
+    <div id="tree">dd</div>
   </div>
 </template>
 <router>
 {
-  name: 'charts.show'
+  name: 'tree.show'
 }
 </router>
 
@@ -22,7 +22,7 @@ export default {
         .then((res) => res.json())
         .then((res) => {
           const pedigreeChart = new WebtreesPedigreeChart.PedigreeChart(
-            "#webtrees-pedigree-chart-container",
+            "#tree",
             {
               labels: chartParams.labels,
               generations: optionGenerations,
@@ -33,9 +33,7 @@ export default {
               rtl: chartParams.rtl,
             }
           );
-
           pedigreeChart.cssFile = "/assets/css/svg.css";
-
           // Draw chart
           pedigreeChart.draw(res.data);
         });
diff --git a/rollup.config.js b/rollup.config.js
new file mode 100644
index 00000000..cc9ea283
--- /dev/null
+++ b/rollup.config.js
@@ -0,0 +1,76 @@
+import resolve from '@rollup/plugin-node-resolve';
+import { terser } from "rollup-plugin-terser";
+
+export default [
+    // pedigree-chart.js
+    {
+        input: "assets/js/modules/index.js",
+        output: [
+            {
+                name: "WebtreesPedigreeChart",
+                file: "assets/js/pedigree-chart.js",
+                format: "umd"
+            }
+        ],
+        plugins: [
+            resolve()
+        ]
+    },
+    {
+        input: "assets/js/modules/index.js",
+        output: [
+            {
+                name: "WebtreesPedigreeChart",
+                file: "assets/js/pedigree-chart.min.js",
+                format: "umd"
+            }
+        ],
+        plugins: [
+            resolve(),
+            terser({
+                mangle: true,
+                compress: true,
+                module: true,
+                output: {
+                    comments: false
+                }
+            })
+        ]
+    },
+
+    // pedigree-chart-storage.js
+    {
+        input: "assets/js/modules/storage.js",
+        output: [
+            {
+                name: "WebtreesPedigreeChart",
+                file: "assets/js/pedigree-chart-storage.js",
+                format: "umd"
+            }
+        ],
+        plugins: [
+            resolve()
+        ]
+    },
+    {
+        input: "assets/js/modules/storage.js",
+        output: [
+            {
+                name: "WebtreesPedigreeChart",
+                file: "assets/js/pedigree-chart-storage.min.js",
+                format: "umd"
+            }
+        ],
+        plugins: [
+            resolve(),
+            terser({
+                mangle: true,
+                compress: true,
+                module: true,
+                output: {
+                    comments: false
+                }
+            })
+        ]
+    }
+];