diff --git a/package-lock.json b/package-lock.json
index b8717cbc..969d6696 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9872,9 +9872,9 @@
       "dev": true
     },
     "svelte-grid": {
-      "version": "1.10.1",
-      "resolved": "https://registry.npmjs.org/svelte-grid/-/svelte-grid-1.10.1.tgz",
-      "integrity": "sha512-37JQzsURkP2TF+RWGQWJAKXVCInP3lP7HcIYbjdMV2oAPg1+qJleiUcD/bV8wS8EoyDengkHvlxQvULt5cFlZA==",
+      "version": "1.10.4",
+      "resolved": "https://registry.npmjs.org/svelte-grid/-/svelte-grid-1.10.4.tgz",
+      "integrity": "sha512-1aWThTMqhRuxvWXpdYtFj0qr0j+cgD5jx0Q9n8qyXt1oqLFknz13dxi7x7AbIPrYdXcGfEQxtxCJ9MwAhOFRcg==",
       "dev": true
     },
     "svelte-loader": {
diff --git a/package.json b/package.json
index df655150..9ee71c98 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
 	"homepage": "https://github.com/MintyMods/MintySensorServer#readme",
 	"scripts": {
 		"build": "cross-env NODE_ENV=production webpack -p",
-		"dev": "webpack-dev-server --https --port 8081 --color true --content-base src/main/resources/templates/public --content-base src/main/resources/public --content-base src/main/resources/static"
+		"dev": "webpack-dev-server --https --port 8081 --color true --mode development --content-base src/main/resources/templates/public --content-base src/main/resources/public --content-base src/main/resources/static"
 	},
 	"browserslist": [
 		">1%",
@@ -26,29 +26,29 @@
 	"devDependencies": {
 		"@babel/core": "^7.6.2",
 		"@babel/preset-env": "^7.6.2",
+		"autoprefixer": "^9.6.2",
 		"babel-loader": "^8.0.6",
 		"clean-webpack-plugin": "^3.0.0",
+		"copy-webpack-plugin": "^5.0.4",
 		"cross-env": "^5.2.1",
 		"css-loader": "^2.1.1",
 		"file-loader": "^4.2.0",
+		"friendly-errors-webpack-plugin": "^1.7.0",
 		"html-webpack-plugin": "^3.2.0",
 		"mini-css-extract-plugin": "^0.6.0",
 		"node-sass": "^4.12.0",
 		"postcss-css-variables": "^0.13.0",
+		"postcss-flexbugs-fixes": "^4.1.0",
 		"postcss-loader": "^3.0.0",
 		"sass-loader": "^7.3.1",
 		"serve": "^11.2.0",
 		"style-loader": "^0.23.1",
 		"svelte": "^3.12.1",
-		"svelte-grid": "^1.10.1",
+		"svelte-grid": "^1.10.4",
 		"svelte-loader": "^2.13.6",
 		"svelte-material-ui": "^1.0.0-beta.15",
 		"svelte-spa-router": "^1.2.0",
 		"svelte-watch-resize": "^1.0.3",
-		"friendly-errors-webpack-plugin": "^1.7.0",
-		"postcss-flexbugs-fixes": "^4.1.0",
-		"copy-webpack-plugin": "^5.0.4",
-		"autoprefixer": "^9.6.2",
 		"webpack": "^4.41.0",
 		"webpack-cli": "^3.3.9",
 		"webpack-dev-server": "^3.8.1"
diff --git a/src/main/resources/templates/MintyClientApp.svelte b/src/main/resources/templates/MintyClientApp.svelte
index a13216af..34177ee3 100644
--- a/src/main/resources/templates/MintyClientApp.svelte
+++ b/src/main/resources/templates/MintyClientApp.svelte
@@ -55,7 +55,7 @@
   let readings = [];
   let sensors = [];
   let types = [];
-  let demoModeActive = false;
+  let demoModeActive = true;
   $: demoTickCount = $storeDemoCurrentJsonFile;
 
   onMount(() => {
diff --git a/src/main/resources/templates/_charts/JustGage.svelte b/src/main/resources/templates/_charts/JustGage.svelte
index 60587e2d..b324c954 100644
--- a/src/main/resources/templates/_charts/JustGage.svelte
+++ b/src/main/resources/templates/_charts/JustGage.svelte
@@ -8,7 +8,7 @@
   let readings;
   
   export function showConfig() {
-    PNotify.info("Just Guage Config " + data.id + '_' + data.index);
+    PNotify.info("Just Gauge Config " + data.id + '_' + data.index);
   }
 
 
diff --git a/src/main/resources/templates/_charts/canvas_gauges/LinearGauge.svelte b/src/main/resources/templates/_charts/canvas_gauges/LinearGauge.svelte
index b269a546..9b64ea5d 100644
--- a/src/main/resources/templates/_charts/canvas_gauges/LinearGauge.svelte
+++ b/src/main/resources/templates/_charts/canvas_gauges/LinearGauge.svelte
@@ -1,5 +1,5 @@
 <script>
-  //  Canvas Guages 2.1.5
+  //  Canvas Gauges 2.1.5
   // https://canvas-gauges.com
   import { onMount, beforeUpdate } from "svelte";
   export let data;
@@ -9,7 +9,7 @@
   const id = "linear-gauge";
 
   export function showConfig() {
-    PNotify.info("Linear Guage Config");
+    PNotify.info("Linear Gauge Config");
   }
 
   // onMount(() => {
diff --git a/src/main/resources/templates/_charts/canvas_gauges/RadialGauge.svelte b/src/main/resources/templates/_charts/canvas_gauges/RadialGauge.svelte
index 72b77bd9..86493248 100644
--- a/src/main/resources/templates/_charts/canvas_gauges/RadialGauge.svelte
+++ b/src/main/resources/templates/_charts/canvas_gauges/RadialGauge.svelte
@@ -1,5 +1,5 @@
 <script>
-  //  Canvas Guages 2.1.5
+  //  Canvas Gauges 2.1.5
   // https://canvas-gauges.com
   import { beforeUpdate } from "svelte";
   export let data;
@@ -7,7 +7,7 @@
   $: data = data;
 
   export function showConfig() {
-    PNotify.info("Radial Guage Config");
+    PNotify.info("Radial Gauge Config");
   }
 
   beforeUpdate(() => {
diff --git a/src/main/resources/templates/_charts/echarts/EchartsLiquidFill.svelte b/src/main/resources/templates/_charts/echarts/EchartsLiquidFill.svelte
index 28dae06d..dd32758a 100644
--- a/src/main/resources/templates/_charts/echarts/EchartsLiquidFill.svelte
+++ b/src/main/resources/templates/_charts/echarts/EchartsLiquidFill.svelte
@@ -4,7 +4,46 @@
   import { onDestroy, onMount } from "svelte";
   import { watchResize } from "svelte-watch-resize";
   import EchartsLiquidFillConfig from "./EchartsLiquidFillConfig.svelte";
-
+  import {
+    color,
+    center,
+    radius,
+    amplitude,
+    waveLength,
+    period,
+    direction,
+    shape,
+    waveAnimation,
+    animationEasing,
+    animationEasingUpdate,
+    animationDuration,
+    animationDurationUpdate,
+    outlineShow,
+    outlineBorderDistance,
+    outlineitemStyleColor,
+    outlineitemStyleBorderColor,
+    outlineitemStyleBorderWidth,
+    outlineitemStyleShadowBlur,
+    outlineitemStyleShadowColor,
+    backgroundStyleColor,
+    backgroundStyleBorderWidth,
+    backgroundStyleBorderColor,
+    backgroundStyleItemStyleShadowBlur,
+    backgroundStyleItemStyleShadowColor,
+    backgroundStyleItemStyleOpacity,
+    itemStyleOpacity,
+    itemStyleShadowBlur,
+    itemStyleShadowColor,
+    emphasisItemStyleOpacity,
+    labelShow,
+    labelColor,
+    labelInsideColor,
+    labelFontSize,
+    labelFontWeight,
+    labelAlign,
+    labelBaseline,
+    labelPosition
+  } from "./config/echarts-liquid-fill-store.js";
   export let data;
   export let options;
   const id =
@@ -125,50 +164,11 @@
     };
   }
 
-  import {
-    color,
-    center,
-    radius,
-    amplitude,
-    waveLength,
-    period,
-    direction,
-    shape,
-    waveAnimation,
-    animationEasing,
-    animationEasingUpdate,
-    animationDuration,
-    animationDurationUpdate,
-    outlineShow,
-    outlineBorderDistance,
-    outlineitemStyleColor,
-    outlineitemStyleBorderColor,
-    outlineitemStyleBorderWidth,
-    outlineitemStyleShadowBlur,
-    outlineitemStyleShadowColor,
-    backgroundStyleColor,
-    backgroundStyleBorderWidth,
-    backgroundStyleBorderColor,
-    backgroundStyleItemStyleShadowBlur,
-    backgroundStyleItemStyleShadowColor,
-    backgroundStyleItemStyleOpacity,
-    itemStyleOpacity,
-    itemStyleShadowBlur,
-    itemStyleShadowColor,
-    emphasisItemStyleOpacity,
-    labelShow,
-    labelColor,
-    labelInsideColor,
-    labelFontSize,
-    labelFontWeight,
-    labelAlign,
-    labelBaseline,
-    labelPosition
-  } from "../../_stores/echarts-liquid-fill-store.js";
+
 </script>
 
 <style>
-  .guage {
+  .gauge {
     display: block;
     width: 100%;
     height: 100%;
@@ -176,7 +176,7 @@
   }
 </style>
 
-<div {id} class="guage" use:watchResize={resizeChart} />
+<div {id} class="gauge" use:watchResize={resizeChart} />
 
 <EchartsLiquidFillConfig bind:this={config} {data} />
 
diff --git a/src/main/resources/templates/_charts/echarts/EchartsLiquidFillConfig.svelte b/src/main/resources/templates/_charts/echarts/EchartsLiquidFillConfig.svelte
index bbde6fa4..e4af94ea 100644
--- a/src/main/resources/templates/_charts/echarts/EchartsLiquidFillConfig.svelte
+++ b/src/main/resources/templates/_charts/echarts/EchartsLiquidFillConfig.svelte
@@ -2,174 +2,88 @@
   import { afterUpdate, onMount, tick } from "svelte";
   import Dialog, { Title, Content, Actions, InitialFocus } from "@smui/dialog";
   import Button from "@smui/button";
-  import Textfield, { Input, Textarea } from "@smui/textfield";
-  import HelperText from "@smui/textfield/helper-text";
-  //   import Slider from "@smui/slider";
-  import Select, { Option } from "@smui/select";
   import Tab, { Icon, Label } from "@smui/tab";
   import TabBar from "@smui/tab-bar";
-  import Switch from "@smui/switch";
-  import FormField from "@smui/form-field";
 
-  import {
-    color,
-    center,
-    radius,
-    amplitude,
-    waveLength,
-    period,
-    direction,
-    shape,
-    waveAnimation,
-    animationEasing,
-    animationEasingUpdate,
-    animationDuration,
-    animationDurationUpdate,
-    outlineShow,
-    outlineBorderDistance,
-    outlineitemStyleColor,
-    outlineitemStyleBorderColor,
-    outlineitemStyleBorderWidth,
-    outlineitemStyleShadowBlur,
-    outlineitemStyleShadowColor,
-    backgroundStyleColor,
-    backgroundStyleBorderWidth,
-    backgroundStyleBorderColor,
-    backgroundStyleItemStyleShadowBlur,
-    backgroundStyleItemStyleShadowColor,
-    backgroundStyleItemStyleOpacity,
-    itemStyleOpacity,
-    itemStyleShadowBlur,
-    itemStyleShadowColor,
-    emphasisItemStyleOpacity,
-    labelShow,
-    labelColor,
-    labelInsideColor,
-    labelFontSize,
-    labelFontWeight,
-    labelAlign,
-    labelBaseline,
-    labelPosition
-  } from "../../_stores/echarts-liquid-fill-store.js";
+  // Configuration Input Fields
+  import About from "./config/About";
+  import Shape from "./config/Shape";
+  import Color from "./config/Color";
+  import Direction from "./config/Direction";
+  import OutlineShow from "./config/OutlineShow";
+  import Center from "./config/Center";
+  import Radius from "./config/Radius";
+  import Amplitude from "./config/Amplitude";
+  import WaveLength from "./config/WaveLength";
+  import Period from "./config/Period";
+  import WaveAnimation from "./config/WaveAnimation";
+  import AnimationEasing from "./config/AnimationEasing";
+  import AnimationEasingUpdate from "./config/AnimationEasingUpdate";
+  import AnimationDuration from "./config/AnimationDuration";
+  import AnimationDurationUpdate from "./config/AnimationDurationUpdate";
+  import OutlineBorderDistance from "./config/OutlineBorderDistance";
+  import OutlineitemStyleColor from "./config/OutlineitemStyleColor";
+  import OutlineitemStyleBorderColor from "./config/OutlineitemStyleBorderColor";
+  import OutlineitemStyleBorderWidth from "./config/OutlineitemStyleBorderWidth";
+  import OutlineitemStyleShadowBlur from "./config/OutlineitemStyleShadowBlur";
+  import OutlineitemStyleShadowColor from "./config/OutlineitemStyleShadowColor";
+  import BackgroundStyleColor from "./config/BackgroundStyleColor";
+  import BackgroundStyleBorderWidth from "./config/BackgroundStyleBorderWidth";
+  import BackgroundStyleBorderColor from "./config/BackgroundStyleBorderColor";
+  import BackgroundStyleItemStyleShadowBlur from "./config/BackgroundStyleItemStyleShadowBlur";
+  import BackgroundStyleItemStyleShadowColor from "./config/BackgroundStyleItemStyleShadowColor";
+  import BackgroundStyleItemStyleOpacity from "./config/BackgroundStyleItemStyleOpacity";
+  import ItemStyleOpacity from "./config/ItemStyleOpacity";
+  import ItemStyleShadowBlur from "./config/ItemStyleShadowBlur";
+  import ItemStyleShadowColor from "./config/ItemStyleShadowColor";
+  import EmphasisItemStyleOpacity from "./config/EmphasisItemStyleOpacity";
+  import LabelShow from "./config/LabelShow";
+  import LabelColor from "./config/LabelColor";
+  import LabelInsideColor from "./config/LabelInsideColor";
+  import LabelFontSize from "./config/LabelFontSize";
+  import LabelFontWeight from "./config/LabelFontWeight";
+  import LabelAlign from "./config/LabelAlign";
+  import LabelBaseline from "./config/LabelBaseline";
+  import LabelPosition from "./config/LabelPosition";
 
-  const SHAPES = [
-    { type: "circle", desc: "Circle", icon: "fal fa-circle fa-fw" },
-    {
-      type: "rect",
-      desc: "Rectangle",
-      icon: "fal fa-rectangle-landscape fa-fw"
-    },
-    {
-      type: "roundRect",
-      desc: "Rounded Rectangle",
-      icon: "fad fa-rectangle-landscape fa-fw"
-    },
-    { type: "triangle", desc: "Triangle", icon: "fal fa-triangle fa-fw" },
-    { type: "diamond", desc: "Diamond", icon: "fal fa-diamond fa-fw" },
-    { type: "pin", desc: "Pin", icon: "fal fa-map-marker fa-fw" },
-    { type: "arrow", desc: "Arrow", icon: "fal fa-arrow-alt-up fa-fw" }
+  let iconTabs = [
+    { id: "data", icon: "fad fa-layer-plus", label: "Data" },
+    { id: "wave", icon: "fad fa-water", label: "Wave" },
+    { id: "outline", icon: "fad fa-border-all", label: "Outline" },
+    { id: "background", icon: "fal fa-chess-board", label: "Background" },
+    { id: "label", icon: "fad fa-text-size", label: "Label" },
+    { id: "layout", icon: "fad fa-arrows-alt", label: "Layout" },
+    { id: "animation", icon: "fad fa-camera-movie", label: "Animation" },
+    { id: "about", icon: "fad fa-info-circle", label: "About" }
   ];
-  const EASING = [
-    "linear",
-    "ease",
-    "ease-in",
-    "ease-out",
-    "ease-in-out",
-    "step-start",
-    "step-end"
-  ];
-  const ALIGN = ["left", "center", "right"];
-  const POSTITION = ["inside", "left", "right", "top", "bottom"];
-  const FONT_WEIGHT = ["normal", "bold", "bolder", "lighter"];
 
   export let data;
-  let dialog;
-
-  // afterUpdate(async () => {
-  //   await tick();
-  //   initPickr();
-  // });
-
-  function initPickr() {
-    let pickers = document.querySelectorAll(".color-picker");
-    pickers.forEach(picker => {
-      Pickr.create({
-        el: picker,
-        theme: "nano",
-        components: {
-          preview: true,
-          opacity: true,
-          hue: true,
-          interaction: {
-            rgba: false,
-            input: false,
-            save: true,
-            cancel: false
-          }
-        }
-      });
-    });
-  }
 
   export const openDialog = item => {
     data = data;
-    dialog.open();
-   // initDialog(item);
-    // initPickr();
+    dialog && dialog.open();
   };
 
-  function initDialog(item) {
-    let module = document.getElementById(item.id);
-    let items = module.querySelectorAll('.svlt-grid-item');
-    
-    debugger;
-    //svlt-grid-item svelte-sfqi95
-    module.classList.add("scrim");
-    module.style.width = "100vw";
-    module.style.height = "100vh";
-  }
-
   export const closeDialog = () => {
     dialog.close();
   };
 
-  function changeColour(ele) {
-    console.log(ele);
-  }
-
-  let directionChecked = true;
-  $: $direction = directionChecked ? "right" : "left";
-  let outlineShowChecked = true;
-  $: $outlineShow = outlineShowChecked;
-
+  let dialog;
   let shapeSelected;
-  $: $shape = shapeSelected;
+  let activeTab;
 
-  let colorText;
-  $: $color = colorText;
-  // $: console.log("COLOR:" + color);
+  $: dialog && dialog.open(); // @todo remove after issue seen
 </script>
 
 <style>
-  .scrim {
-    width: 100vw;
-    height: 100vh;
-  }
-  .dialog-wrapper {
-    width: 100vw !important;
-    height: 100vh !important;
+  .config-wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
   }
-  .current-value {
-    font-size: small;
-    color: lightgrey;
-  }
-  /* :global(dialog)::backdrop {
-    background: rgba(255, 0, 0, 0.5);
-  } */
 </style>
 
 {#if data !== undefined}
-  <!-- <div class="dialog-wrapper"> -->
   <Dialog bind:this={dialog} aria-labelledby="title" aria-describedby="content">
     <Title id="title">
       {#if Array.isArray(data)}
@@ -180,48 +94,69 @@
         </TabBar>
       {:else}{data.label.desc}{/if}
     </Title>
-    <Content id="content">
-      <!-- {#if config !== undefined} -->
-      <!-- WAVE COLOURS      -->
-      <!-- {#each $color as color, i} -->
-      <!-- <Textfield bind:value={colorText} label="Wave Colour" />
-      <div class="color-picker" /> -->
-      <!-- {/each} -->
+    <Content class="content" id="content">
+      <div class="config-wrapper">
+
+        <TabBar tabs={iconTabs} let:tab minWidth bind:active={activeTab}>
+          <Tab {tab}>
+            <Icon class={tab.icon} />
+            <Label>{tab.label}</Label>
+          </Tab>
+        </TabBar>
+
+        {#if activeTab && activeTab.id === 'data'}
+      <div></div>
+        {:else if activeTab && activeTab.id === 'layout'}
+          <Center />
+          <Amplitude />
+          <WaveLength />
+          <Radius />
+          <Shape />
+        {:else if activeTab && activeTab.id === 'wave'}
+          <Color />
+          <ItemStyleShadowColor />
+          <ItemStyleShadowBlur />
+          <ItemStyleOpacity />
+          <EmphasisItemStyleOpacity />
+        {:else if activeTab && activeTab.id === 'outline'}
+          <OutlineitemStyleColor />
+          <OutlineitemStyleBorderColor />
+          <OutlineitemStyleShadowColor />
+          <OutlineBorderDistance />
+          <OutlineitemStyleBorderWidth />
+          <OutlineitemStyleShadowBlur />
+          <OutlineShow />
+        {:else if activeTab && activeTab.id === 'background'}
+          <BackgroundStyleColor />
+          <BackgroundStyleBorderColor />
+          <BackgroundStyleItemStyleShadowColor />
+          <BackgroundStyleBorderWidth />
+          <BackgroundStyleItemStyleOpacity />
+          <BackgroundStyleItemStyleShadowBlur />
+        {:else if activeTab && activeTab.id === 'label'}
+          <LabelColor/>
+          <LabelInsideColor/>
+          <LabelFontSize/>
+          <LabelFontWeight/>
+          <LabelAlign/>
+          <LabelBaseline/>
+          <LabelPosition/>
+          <LabelShow/>
+        {:else if activeTab && activeTab.id === 'animation'}
+          <Period />
+          <AnimationDuration />
+          <AnimationDurationUpdate />
+          <AnimationEasing />
+          <AnimationEasingUpdate />
+          <WaveAnimation />
+          <Direction />
+        {:else if activeTab && activeTab.id === 'about'}
+          <About />
+        {:else}
+          <h1 class="error">Error - Please Report</h1>
+        {/if}
 
-      <!-- SHAPE -->
-      <Select
-        enhanced
-        bind:value={shapeSelected}
-        label="Guage shape "
-        class="shape"
-        menu$class="shape">
-        <Option value="" />
-        {#each SHAPES as item}
-          <Option value={item.type} selected={shapeSelected === item.type}>
-            <i class={item.icon} />
-            {item.desc}
-          </Option>
-        {/each}
-      </Select>
-      <br />
-      <!-- WAVE DIRECTION -->
-      <FormField>
-        <Switch bind:checked={directionChecked} />
-        <span slot="label">
-          Wave direction
-          <span class="current-value">{$direction}</span>
-        </span>
-      </FormField>
-      <br />
-      <!-- SHOW OUTLINE  -->
-      <FormField>
-        <Switch bind:checked={outlineShowChecked} />
-        <span slot="label">
-          Show Outline
-          <span class="current-value">{$outlineShow}</span>
-        </span>
-      </FormField>
-      <!-- {/if} -->
+      </div>
     </Content>
     <Actions>
       <Button action="save">
@@ -232,5 +167,4 @@
       </Button>
     </Actions>
   </Dialog>
-  <!-- </div> -->
 {/if}
diff --git a/src/main/resources/templates/_charts/echarts/config/About.svelte b/src/main/resources/templates/_charts/echarts/config/About.svelte
new file mode 100644
index 00000000..7101f709
--- /dev/null
+++ b/src/main/resources/templates/_charts/echarts/config/About.svelte
@@ -0,0 +1,74 @@
+<script>
+  import Card, {
+    Content,
+    PrimaryAction,
+    Media,
+    MediaContent,
+    Actions,
+    ActionButtons,
+    ActionIcons
+  } from "@smui/card";
+  import Button, { Label } from "@smui/button";
+  import IconButton, { Icon } from "@smui/icon-button";
+</script>
+
+<style>
+  .card-container {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    min-width: 480px;
+  }
+:global(.mdc-card__action--icon:not(:disabled)) {
+    color: var(--theme-on-surface) !important;
+    font-family: "Font Awesome 5 Pro";
+  }
+:global(mdc-card-container:first-child) {
+    border:2px red !important;
+}
+</style>
+
+<div class="mdc-card-container">
+  <Card>
+    <PrimaryAction
+      on:click={() => window.open('https://github.com/ecomfe/echarts-liquidfill')}>
+      <Content class="mdc-typography--body2">
+        <h2 class="mdc-typography--headline6" style="margin: 0;">
+          ECharts Liquid Fill Chart
+        </h2>
+        <h3
+          class="mdc-typography--subtitle2"
+          style="margin: 0 0 10px; color: #888;">
+          Baidu EFE team
+        </h3>
+        This component has been built using:-
+        <li>Apache ECharts</li>
+        <li>ecomfe/echarts-liquidfill</li>
+      </Content>
+    </PrimaryAction>
+    <Actions>
+      <ActionButtons>
+        <Button
+          on:click={() => window.open('https://github.com/ecomfe/echarts-liquidfill#api')}>
+          <Label>Docs / API</Label>
+        </Button>
+        <Button
+          on:click={() => window.open('https://github.com/ecomfe/echarts-liquidfill#examples')}>
+          <Label>Examples</Label>
+        </Button>
+      </ActionButtons>
+      <ActionIcons>
+        <IconButton
+         title="Apache ECharts GitHub page"
+          on:click={() => window.open('https://github.com/apache/incubator-echarts')}>
+          <i class="fab fa-github-square"/>
+        </IconButton>
+        <IconButton
+         title="ECharts Liquid Fill GitHub page"
+          on:click={() => window.open('https://github.com/ecomfe/echarts-liquidfill')}>
+          <i class="fab fa-github" />
+        </IconButton>
+      </ActionIcons>
+    </Actions>
+  </Card>
+</div>
diff --git a/src/main/resources/templates/_charts/echarts/config/Amplitude.svelte b/src/main/resources/templates/_charts/echarts/config/Amplitude.svelte
new file mode 100644
index 00000000..cb384221
--- /dev/null
+++ b/src/main/resources/templates/_charts/echarts/config/Amplitude.svelte
@@ -0,0 +1,22 @@
+<script>
+  import { amplitude } from "./echarts-liquid-fill-store.js";
+  import Textfield, { Input, Textarea } from "@smui/textfield";
+  import HelperText from "@smui/textfield/helper-text/index";
+  import FloatingLabel from "@smui/floating-label";
+  import LineRipple from "@smui/line-ripple";
+  import { onMount, tick } from "svelte";
+
+  let amplitudeText = "";
+
+  onMount(async () => {
+    await tick();
+    amplitudeText = $amplitude;
+  });
+
+  function update() {
+    $amplitude = amplitudeText;
+  }
+</script>
+
+<Textfield on:change={update} bind:value={amplitudeText} label="Amplitude of the wave" />
+<HelperText>Value in pixels 'px' or as a percentage '%'</HelperText>
\ No newline at end of file
diff --git a/src/main/resources/templates/_charts/echarts/config/AnimationDuration.svelte b/src/main/resources/templates/_charts/echarts/config/AnimationDuration.svelte
new file mode 100644
index 00000000..868b55e7
--- /dev/null
+++ b/src/main/resources/templates/_charts/echarts/config/AnimationDuration.svelte
@@ -0,0 +1,22 @@
+<script>
+  import { animationDuration } from "./echarts-liquid-fill-store.js";
+  import Textfield, { Input, Textarea } from "@smui/textfield";
+  import HelperText from "@smui/textfield/helper-text/index";
+  import FloatingLabel from "@smui/floating-label";
+  import LineRipple from "@smui/line-ripple";
+  import { onMount, tick } from "svelte";
+
+  let animationDurationText = "";
+
+  onMount(async () => {
+    await tick();
+    animationDurationText = $animationDuration;
+  });
+
+  function update() {
+    $animationDuration = animationDurationText;
+  }
+</script>
+
+<Textfield on:change={update} bind:value={animationDurationText} label="Initial Animation Duration" />
+<HelperText>Value in milliseconds</HelperText>
\ No newline at end of file
diff --git a/src/main/resources/templates/_charts/echarts/config/AnimationDurationUpdate.svelte b/src/main/resources/templates/_charts/echarts/config/AnimationDurationUpdate.svelte
new file mode 100644
index 00000000..b409e470
--- /dev/null
+++ b/src/main/resources/templates/_charts/echarts/config/AnimationDurationUpdate.svelte
@@ -0,0 +1,22 @@
+<script>
+  import { animationDurationUpdate } from "./echarts-liquid-fill-store.js";
+  import Textfield, { Input, Textarea } from "@smui/textfield";
+  import HelperText from "@smui/textfield/helper-text/index";
+  import FloatingLabel from "@smui/floating-label";
+  import LineRipple from "@smui/line-ripple";
+  import { onMount, tick } from "svelte";
+
+  let animationDurationUpdateText = "";
+
+  onMount(async () => {
+    await tick();
+    animationDurationUpdateText = $animationDurationUpdate;
+  });
+
+  function update() {
+    $animationDurationUpdate = animationDurationUpdateText;
+  }
+</script>
+
+<Textfield on:change={update} bind:value={animationDurationUpdateText} label="Update Animation Duration" />
+<HelperText>Value in milliseconds</HelperText>
\ No newline at end of file
diff --git a/src/main/resources/templates/_charts/echarts/config/AnimationEasing.svelte b/src/main/resources/templates/_charts/echarts/config/AnimationEasing.svelte
new file mode 100644
index 00000000..9a9cee76
--- /dev/null
+++ b/src/main/resources/templates/_charts/echarts/config/AnimationEasing.svelte
@@ -0,0 +1,41 @@
+<script>
+  import Select, { Option } from "@smui/select";
+  import { animationEasing } from "./echarts-liquid-fill-store.js";
+  import { onMount, tick } from "svelte";
+  import HelperText from "@smui/textfield/helper-text/index";
+
+  const EASING = [
+    "linear",
+    "ease",
+    "ease-in",
+    "ease-out",
+    "ease-in-out",
+    "step-start",
+    "step-end"
+  ];
+
+  let animationEasingSelected;
+
+  onMount(async () => {
+    await tick();
+    animationEasingSelected = $animationEasing;
+  });
+
+  $: if (animationEasingSelected) {
+    $animationEasing = animationEasingSelected;
+  }
+</script>
+<Select
+  enhanced
+  bind:value={animationEasingSelected}
+  label="Initial Animation Easing (waves raise from bottom)"
+  class="animationEasing"
+  menu$class="animationEasing">
+  <Option value="" />
+  {#each EASING as easing}
+    <Option value={easing} selected={animationEasingSelected === easing}>
+      {easing}
+    </Option>
+  {/each}
+</Select>
+  <HelperText>Start animation raising from bottom</HelperText>
diff --git a/src/main/resources/templates/_charts/echarts/config/AnimationEasingUpdate.svelte b/src/main/resources/templates/_charts/echarts/config/AnimationEasingUpdate.svelte
new file mode 100644
index 00000000..493f1e13
--- /dev/null
+++ b/src/main/resources/templates/_charts/echarts/config/AnimationEasingUpdate.svelte
@@ -0,0 +1,41 @@
+<script>
+  import Select, { Option } from "@smui/select";
+  import { animationEasingUpdate } from "./echarts-liquid-fill-store.js";
+  import { onMount, tick } from "svelte";
+  import HelperText from "@smui/textfield/helper-text/index";
+  const EASING = [
+    "linear",
+    "ease",
+    "ease-in",
+    "ease-out",
+    "ease-in-out",
+    "step-start",
+    "step-end"
+  ];
+
+  let animationEasingUpdateSelected;
+
+  onMount(async () => {
+    await tick();
+    animationEasingUpdateSelected = $animationEasingUpdate;
+  });
+
+  $: if (animationEasingUpdateSelected) {
+    $animationEasingUpdate = animationEasingUpdateSelected;
+  }
+</script>
+
+<Select
+  enhanced
+  bind:value={animationEasingUpdateSelected}
+  label="Animation Easing Update (value & position changes)"
+  class="animationEasingUpdate"
+  menu$class="animationEasingUpdate">
+  <Option value="" />
+  {#each EASING as easing}
+    <Option value={easing} selected={animationEasingUpdateSelected === easing}>
+      {easing}
+    </Option>
+  {/each}
+</Select>
+  <HelperText>Chart value & position changes</HelperText>
\ No newline at end of file
diff --git a/src/main/resources/templates/_charts/echarts/config/BackgroundStyleBorderColor.svelte b/src/main/resources/templates/_charts/echarts/config/BackgroundStyleBorderColor.svelte
new file mode 100644
index 00000000..a101552f
--- /dev/null
+++ b/src/main/resources/templates/_charts/echarts/config/BackgroundStyleBorderColor.svelte
@@ -0,0 +1,62 @@
+<script>
+  import { backgroundStyleBorderColor } from "./echarts-liquid-fill-store.js";
+  import { onMount, tick } from "svelte";
+  import Textfield, { Input, Textarea } from "@smui/textfield";
+  import FloatingLabel from "@smui/floating-label";
+  import LineRipple from "@smui/line-ripple";
+  import HelperText from "@smui/textfield/helper-text/index";
+  let pickr;
+  let backgroundStyleBorderColorText = "";
+
+  $: if ($backgroundStyleBorderColor !== undefined)
+    backgroundStyleBorderColorText = $backgroundStyleBorderColor;
+  $: pickr && pickr.setColor(backgroundStyleBorderColorText);
+
+  onMount(async () => {
+    await tick();
+    initPickr();
+  });
+
+  function initPickr() {
+    pickr = Pickr.create({
+      el: document.getElementById("backgroundStyleBorderColor-picker"),
+      theme: "nano",
+      default: backgroundStyleBorderColorText,
+      components: {
+        preview: true,
+        opacity: true,
+        hue: true
+      }
+    });
+    pickr.on("changestop", instance => {
+      backgroundStyleBorderColorText = instance
+        .getColor()
+        .toHEXA()
+        .toString();
+      updatebackgroundStyleBorderColor();
+    });
+  }
+
+  function updatebackgroundStyleBorderColor() {
+    pickr.setColor(backgroundStyleBorderColorText);
+    $backgroundStyleBorderColor = backgroundStyleBorderColorText;
+  }
+</script>
+
+<style>
+  .backgroundStyleBorderColor-picker-wrapper {
+    display: flex;
+    flex-flow: column;
+    position: relative;
+  }
+</style>
+
+<div class="backgroundStyleBorderColor-picker-wrapper">
+  <Textfield
+    withLeadingIcon
+    bind:value={backgroundStyleBorderColorText}
+    on:change={updatebackgroundStyleBorderColor}
+    label="Background Border Colour" />
+  <div id="backgroundStyleBorderColor-picker" />
+</div>
+<HelperText />
diff --git a/src/main/resources/templates/_charts/echarts/config/BackgroundStyleBorderWidth.svelte b/src/main/resources/templates/_charts/echarts/config/BackgroundStyleBorderWidth.svelte
new file mode 100644
index 00000000..9409b767
--- /dev/null
+++ b/src/main/resources/templates/_charts/echarts/config/BackgroundStyleBorderWidth.svelte
@@ -0,0 +1,46 @@
+<script>
+  import { backgroundStyleBorderWidth } from "./echarts-liquid-fill-store.js";
+  import { onMount, tick } from "svelte";
+  import Slider from "@smui/slider";
+  import FormField from "@smui/form-field";
+  import HelperText from "@smui/textfield/helper-text/index";
+  import { MDCSlider } from "@material/slider";
+  import { MDCDialog } from "@material/dialog";
+
+  onMount(async () => {
+    await tick();
+    backgroundStyleBorderWidthValue = $backgroundStyleBorderWidth;
+    const dialog = new MDCDialog(document.querySelector(".mdc-dialog"));
+    const slider = new MDCSlider(document.querySelector(".mdc-slider"));
+    dialog.listen("MDCDialog:opened", () => {
+      slider.layout();
+    });
+  });
+
+  let backgroundStyleBorderWidthValue = "";
+
+  function update() {
+    $backgroundStyleBorderWidth = backgroundStyleBorderWidthValue;
+  }
+</script>
+
+<div class="slider">
+
+  <FormField align="end" style="display: flex;">
+
+    <Slider
+      bind:value={backgroundStyleBorderWidthValue}
+      min={0}
+      max={25}
+      step={1}
+      discrete
+      displayMarkers />
+    <span
+      slot="label"
+      style="padding-right: 12px; width: max-content; display: block;">
+      Background Stroke Line Width
+    </span>
+  </FormField>
+
+</div>
+
diff --git a/src/main/resources/templates/_charts/echarts/config/BackgroundStyleColor.svelte b/src/main/resources/templates/_charts/echarts/config/BackgroundStyleColor.svelte
new file mode 100644
index 00000000..7a063de2
--- /dev/null
+++ b/src/main/resources/templates/_charts/echarts/config/BackgroundStyleColor.svelte
@@ -0,0 +1,62 @@
+<script>
+  import { backgroundStyleColor } from "./echarts-liquid-fill-store.js";
+  import { onMount, tick } from "svelte";
+  import Textfield, { Input, Textarea } from "@smui/textfield";
+  import FloatingLabel from "@smui/floating-label";
+  import LineRipple from "@smui/line-ripple";
+  import HelperText from "@smui/textfield/helper-text/index";
+  let pickr;
+  let backgroundStyleColorText = "";
+
+  $: if ($backgroundStyleColor !== undefined)
+    backgroundStyleColorText = $backgroundStyleColor;
+  $: pickr && pickr.setColor(backgroundStyleColorText);
+
+  onMount(async () => {
+    await tick();
+    initPickr();
+  });
+
+  function initPickr() {
+    pickr = Pickr.create({
+      el: document.getElementById("backgroundStyleColor-picker"),
+      theme: "nano",
+      default: backgroundStyleColorText,
+      components: {
+        preview: true,
+        opacity: true,
+        hue: true
+      }
+    });
+    pickr.on("changestop", instance => {
+      backgroundStyleColorText = instance
+        .getColor()
+        .toHEXA()
+        .toString();
+      updatebackgroundStyleColor();
+    });
+  }
+
+  function updatebackgroundStyleColor() {
+    pickr.setColor(backgroundStyleColorText);
+    $backgroundStyleColor = backgroundStyleColorText;
+  }
+</script>
+
+<style>
+  .backgroundStyleColor-picker-wrapper {
+    display: flex;
+    flex-flow: column;
+    position: relative;
+  }
+</style>
+
+<div class="backgroundStyleColor-picker-wrapper">
+  <Textfield
+    withLeadingIcon
+    bind:value={backgroundStyleColorText}
+    on:change={updatebackgroundStyleColor}
+    label="Background Fill Colour" />
+  <div id="backgroundStyleColor-picker" />
+</div>
+<HelperText />
diff --git a/src/main/resources/templates/_charts/echarts/config/BackgroundStyleItemStyleOpacity.svelte b/src/main/resources/templates/_charts/echarts/config/BackgroundStyleItemStyleOpacity.svelte
new file mode 100644
index 00000000..358b5d66
--- /dev/null
+++ b/src/main/resources/templates/_charts/echarts/config/BackgroundStyleItemStyleOpacity.svelte
@@ -0,0 +1,41 @@
+<script>
+  import { backgroundStyleItemStyleOpacity } from "./echarts-liquid-fill-store.js";
+  import { onMount, tick } from "svelte";
+  import Slider from "@smui/slider";
+  import FormField from "@smui/form-field";
+  import HelperText from "@smui/textfield/helper-text/index";
+  import { MDCSlider } from "@material/slider";
+  import { MDCDialog } from "@material/dialog";
+
+  onMount(async () => {
+    await tick();
+    backgroundStyleItemStyleOpacityValue = $backgroundStyleItemStyleOpacity;
+    const dialog = new MDCDialog(document.querySelector(".mdc-dialog"));
+    const slider = new MDCSlider(document.querySelector(".mdc-slider"));
+    dialog.listen("MDCDialog:opened", () => {
+      slider.layout();
+    });
+  });
+
+  let backgroundStyleItemStyleOpacityValue = "";
+
+  function update() {
+    $backgroundStyleItemStyleOpacity = backgroundStyleItemStyleOpacityValue;
+  }
+</script>
+
+<div class="slider">
+
+  <FormField align="end" style="display: flex;">
+
+    <Slider bind:value={backgroundStyleItemStyleOpacityValue} min={0} max={1} />
+    <span
+      slot="label"
+      title="
+      {backgroundStyleItemStyleOpacityValue}"
+      style="padding-right: 12px; width: max-content; display: block;">
+      Background Opacity
+    </span>
+  </FormField>
+
+</div>
diff --git a/src/main/resources/templates/_charts/echarts/config/BackgroundStyleItemStyleShadowBlur.svelte b/src/main/resources/templates/_charts/echarts/config/BackgroundStyleItemStyleShadowBlur.svelte
new file mode 100644
index 00000000..5eba35ac
--- /dev/null
+++ b/src/main/resources/templates/_charts/echarts/config/BackgroundStyleItemStyleShadowBlur.svelte
@@ -0,0 +1,45 @@
+<script>
+  import { backgroundStyleItemStyleShadowBlur } from "./echarts-liquid-fill-store.js";
+  import { onMount, tick } from "svelte";
+  import Slider from "@smui/slider";
+  import FormField from "@smui/form-field";
+  import HelperText from "@smui/textfield/helper-text/index";
+  import { MDCSlider } from "@material/slider";
+  import { MDCDialog } from "@material/dialog";
+
+  onMount(async () => {
+    await tick();
+    backgroundStyleItemStyleShadowBlurValue = $backgroundStyleItemStyleShadowBlur;
+    const dialog = new MDCDialog(document.querySelector(".mdc-dialog"));
+    const slider = new MDCSlider(document.querySelector(".mdc-slider"));
+    dialog.listen("MDCDialog:opened", () => {
+      slider.layout();
+    });
+  });
+
+  let backgroundStyleItemStyleShadowBlurValue = "";
+
+  function update() {
+    $backgroundStyleItemStyleShadowBlur = backgroundStyleItemStyleShadowBlurValue;
+  }
+</script>
+
+<div class="slider">
+
+  <FormField align="end" style="display: flex;">
+
+    <Slider
+      bind:value={backgroundStyleItemStyleShadowBlurValue}
+      min={0}
+      max={25}
+      step={1}
+      discrete
+      displayMarkers />
+    <span
+      slot="label"
+      style="padding-right: 12px; width: max-content; display: block;">
+      Background Shadow Blur Size
+    </span>
+  </FormField>
+
+</div>
diff --git a/src/main/resources/templates/_charts/echarts/config/BackgroundStyleItemStyleShadowColor.svelte b/src/main/resources/templates/_charts/echarts/config/BackgroundStyleItemStyleShadowColor.svelte
new file mode 100644
index 00000000..bbdcd0f9
--- /dev/null
+++ b/src/main/resources/templates/_charts/echarts/config/BackgroundStyleItemStyleShadowColor.svelte
@@ -0,0 +1,62 @@
+<script>
+  import { backgroundStyleItemStyleShadowColor } from "./echarts-liquid-fill-store.js";
+  import { onMount, tick } from "svelte";
+  import Textfield, { Input, Textarea } from "@smui/textfield";
+  import FloatingLabel from "@smui/floating-label";
+  import LineRipple from "@smui/line-ripple";
+  import HelperText from "@smui/textfield/helper-text/index";
+  let pickr;
+  let backgroundStyleItemStyleShadowColorText = "";
+
+  $: if ($backgroundStyleItemStyleShadowColor !== undefined)
+    backgroundStyleItemStyleShadowColorText = $backgroundStyleItemStyleShadowColor;
+  $: pickr && pickr.setColor(backgroundStyleItemStyleShadowColorText);
+
+  onMount(async () => {
+    await tick();
+    initPickr();
+  });
+
+  function initPickr() {
+    pickr = Pickr.create({
+      el: document.getElementById("backgroundStyleItemStyleShadowColor-picker"),
+      theme: "nano",
+      default: backgroundStyleItemStyleShadowColorText,
+      components: {
+        preview: true,
+        opacity: true,
+        hue: true
+      }
+    });
+    pickr.on("changestop", instance => {
+      backgroundStyleItemStyleShadowColorText = instance
+        .getColor()
+        .toHEXA()
+        .toString();
+      updatebackgroundStyleItemStyleShadowColor();
+    });
+  }
+
+  function updatebackgroundStyleItemStyleShadowColor() {
+    pickr.setColor(backgroundStyleItemStyleShadowColorText);
+    $backgroundStyleItemStyleShadowColor = backgroundStyleItemStyleShadowColorText;
+  }
+</script>
+
+<style>
+  .backgroundStyleItemStyleShadowColor-picker-wrapper {
+    display: flex;
+    flex-flow: column;
+    position: relative;
+  }
+</style>
+
+<div class="backgroundStyleItemStyleShadowColor-picker-wrapper">
+  <Textfield
+    withLeadingIcon
+    bind:value={backgroundStyleItemStyleShadowColorText}
+    on:change={updatebackgroundStyleItemStyleShadowColor}
+    label="Background Shadow Colour" />
+  <div id="backgroundStyleItemStyleShadowColor-picker" />
+</div>
+<HelperText />
\ No newline at end of file
diff --git a/src/main/resources/templates/_charts/echarts/config/Center.svelte b/src/main/resources/templates/_charts/echarts/config/Center.svelte
new file mode 100644
index 00000000..e798510d
--- /dev/null
+++ b/src/main/resources/templates/_charts/echarts/config/Center.svelte
@@ -0,0 +1,35 @@
+<script>
+  import { center } from "./echarts-liquid-fill-store.js";
+  import Textfield, { Input, Textarea } from "@smui/textfield";
+  import HelperText from "@smui/textfield/helper-text/index";
+  import FloatingLabel from "@smui/floating-label";
+  import LineRipple from "@smui/line-ripple";
+  import { onMount, tick } from "svelte";
+
+  let centerX = "";
+  let centerY = "";
+
+  onMount(async () => {
+    await tick();
+    centerX = $center[0];
+    centerY = $center[1];
+  });
+
+  function update() {
+    $center[0] = centerX;
+    $center[1] = centerY;
+  }
+</script>
+
+<Textfield
+  class="center"
+  on:change={update}
+  bind:value={centerX}
+  label="X Position of Chart" />
+<HelperText>Value in pixels 'px' or as a percentage '%'</HelperText>
+<Textfield
+  class="center"
+  on:change={update}
+  bind:value={centerY}
+  label="Y Position of Chart" />
+<HelperText>Value in pixels 'px' or as a percentage '%'</HelperText>
diff --git a/src/main/resources/templates/_charts/echarts/config/Color.svelte b/src/main/resources/templates/_charts/echarts/config/Color.svelte
new file mode 100644
index 00000000..a671a8ab
--- /dev/null
+++ b/src/main/resources/templates/_charts/echarts/config/Color.svelte
@@ -0,0 +1,61 @@
+<script>
+  import { color } from "./echarts-liquid-fill-store.js";
+  import { onMount, tick } from "svelte";
+  import Textfield, { Input, Textarea } from "@smui/textfield";
+  import FloatingLabel from "@smui/floating-label";
+  import LineRipple from "@smui/line-ripple";
+  import HelperText from "@smui/textfield/helper-text/index";
+  let pickr;
+  let colorText = "";
+
+  $: if ($color !== undefined) colorText = $color;
+  $: pickr && pickr.setColor(colorText);
+
+  onMount(async () => {
+    await tick();
+    initPickr();
+  });
+
+  function initPickr() {
+    pickr = Pickr.create({
+      el: document.getElementById("color-picker"),
+      theme: "nano",
+      default: colorText,
+      components: {
+        preview: true,
+        opacity: true,
+        hue: true
+      }
+    });
+    pickr.on("changestop", instance => {
+      colorText = instance
+        .getColor()
+        .toHEXA()
+        .toString();
+      updateColor();
+    });
+  }
+
+  function updateColor() {
+    pickr.setColor(colorText);
+    $color = colorText;
+  }
+</script>
+
+<style>
+  .color-picker-wrapper {
+    display: flex;
+    flex-flow: column;
+    position: relative;
+  }
+</style>
+
+<div class="color-picker-wrapper">
+  <Textfield
+    withLeadingIcon
+    bind:value={colorText}
+    on:change={updateColor}
+    label="Wave Colour" />
+  <div id="color-picker" />
+</div>
+<HelperText />
diff --git a/src/main/resources/templates/_charts/echarts/config/Direction.svelte b/src/main/resources/templates/_charts/echarts/config/Direction.svelte
new file mode 100644
index 00000000..51a512e8
--- /dev/null
+++ b/src/main/resources/templates/_charts/echarts/config/Direction.svelte
@@ -0,0 +1,16 @@
+<script>
+  import { direction } from "./echarts-liquid-fill-store.js";
+  import Switch from "@smui/switch";
+  import FormField from "@smui/form-field";
+
+  let directionChecked = true;
+  $: $direction = directionChecked ? "right" : "left";
+</script>
+
+<FormField>
+  <Switch bind:checked={directionChecked} />
+  <span slot="label">
+    Wave Direction
+    <span class="config-current-value">{$direction}</span>
+  </span>
+</FormField>
diff --git a/src/main/resources/templates/_charts/echarts/config/EmphasisItemStyleOpacity.svelte b/src/main/resources/templates/_charts/echarts/config/EmphasisItemStyleOpacity.svelte
new file mode 100644
index 00000000..959f2e8c
--- /dev/null
+++ b/src/main/resources/templates/_charts/echarts/config/EmphasisItemStyleOpacity.svelte
@@ -0,0 +1,41 @@
+<script>
+  import { itemStyleOpacity } from "./echarts-liquid-fill-store.js";
+  import { onMount, tick } from "svelte";
+  import Slider from "@smui/slider";
+  import FormField from "@smui/form-field";
+  import HelperText from "@smui/textfield/helper-text/index";
+  import { MDCSlider } from "@material/slider";
+  import { MDCDialog } from "@material/dialog";
+
+  onMount(async () => {
+    await tick();
+    itemStyleOpacityValue = $itemStyleOpacity;
+    const dialog = new MDCDialog(document.querySelector(".mdc-dialog"));
+    const slider = new MDCSlider(document.querySelector(".mdc-slider"));
+    dialog.listen("MDCDialog:opened", () => {
+      slider.layout();
+    });
+  });
+
+  let itemStyleOpacityValue = "";
+
+  function update() {
+    $itemStyleOpacity = itemStyleOpacityValue;
+  }
+</script>
+
+<div class="slider">
+
+  <FormField align="end" style="display: flex;">
+
+    <Slider bind:value={itemStyleOpacityValue} min={0} max={1} />
+    <span
+      slot="label"
+      title="
+      {itemStyleOpacityValue}"
+      style="padding-right: 12px; width: max-content; display: block;">
+       Wave Hover Opacity
+    </span>
+  </FormField>
+
+</div>
\ No newline at end of file
diff --git a/src/main/resources/templates/_charts/echarts/config/ItemStyleOpacity.svelte b/src/main/resources/templates/_charts/echarts/config/ItemStyleOpacity.svelte
new file mode 100644
index 00000000..a2cd9959
--- /dev/null
+++ b/src/main/resources/templates/_charts/echarts/config/ItemStyleOpacity.svelte
@@ -0,0 +1,41 @@
+<script>
+  import { itemStyleOpacity } from "./echarts-liquid-fill-store.js";
+  import { onMount, tick } from "svelte";
+  import Slider from "@smui/slider";
+  import FormField from "@smui/form-field";
+  import HelperText from "@smui/textfield/helper-text/index";
+  import { MDCSlider } from "@material/slider";
+  import { MDCDialog } from "@material/dialog";
+
+  onMount(async () => {
+    await tick();
+    itemStyleOpacityValue = $itemStyleOpacity;
+    const dialog = new MDCDialog(document.querySelector(".mdc-dialog"));
+    const slider = new MDCSlider(document.querySelector(".mdc-slider"));
+    dialog.listen("MDCDialog:opened", () => {
+      slider.layout();
+    });
+  });
+
+  let itemStyleOpacityValue = "";
+
+  function update() {
+    $itemStyleOpacity = itemStyleOpacityValue;
+  }
+</script>
+
+<div class="slider">
+
+  <FormField align="end" style="display: flex;">
+
+    <Slider bind:value={itemStyleOpacityValue} min={0} max={1} />
+    <span
+      slot="label"
+      title="
+      {itemStyleOpacityValue}"
+      style="padding-right: 12px; width: max-content; display: block;">
+        Wave Opacity
+    </span>
+  </FormField>
+
+</div>
\ No newline at end of file
diff --git a/src/main/resources/templates/_charts/echarts/config/ItemStyleShadowBlur.svelte b/src/main/resources/templates/_charts/echarts/config/ItemStyleShadowBlur.svelte
new file mode 100644
index 00000000..976469c0
--- /dev/null
+++ b/src/main/resources/templates/_charts/echarts/config/ItemStyleShadowBlur.svelte
@@ -0,0 +1,45 @@
+<script>
+  import { itemStyleShadowBlur } from "./echarts-liquid-fill-store.js";
+  import { onMount, tick } from "svelte";
+  import Slider from "@smui/slider";
+  import FormField from "@smui/form-field";
+  import HelperText from "@smui/textfield/helper-text/index";
+  import { MDCSlider } from "@material/slider";
+  import { MDCDialog } from "@material/dialog";
+
+  onMount(async () => {
+    await tick();
+    itemStyleShadowBlurValue = $itemStyleShadowBlur;
+    const dialog = new MDCDialog(document.querySelector(".mdc-dialog"));
+    const slider = new MDCSlider(document.querySelector(".mdc-slider"));
+    dialog.listen("MDCDialog:opened", () => {
+      slider.layout();
+    });
+  });
+
+  let itemStyleShadowBlurValue = "";
+
+  function update() {
+    $itemStyleShadowBlur = itemStyleShadowBlurValue;
+  }
+</script>
+
+<div class="slider">
+
+  <FormField align="end" style="display: flex;">
+
+    <Slider
+      bind:value={itemStyleShadowBlurValue}
+      min={0}
+      max={25}
+      step={1}
+      discrete
+      displayMarkers />
+    <span
+      slot="label"
+      style="padding-right: 12px; width: max-content; display: block;">
+      Wave Shadow Blur Size
+    </span>
+  </FormField>
+
+</div>
diff --git a/src/main/resources/templates/_charts/echarts/config/ItemStyleShadowColor.svelte b/src/main/resources/templates/_charts/echarts/config/ItemStyleShadowColor.svelte
new file mode 100644
index 00000000..205ab74f
--- /dev/null
+++ b/src/main/resources/templates/_charts/echarts/config/ItemStyleShadowColor.svelte
@@ -0,0 +1,62 @@
+<script>
+  import { itemStyleShadowColor } from "./echarts-liquid-fill-store.js";
+  import { onMount, tick } from "svelte";
+  import Textfield, { Input, Textarea } from "@smui/textfield";
+  import FloatingLabel from "@smui/floating-label";
+  import LineRipple from "@smui/line-ripple";
+  import HelperText from "@smui/textfield/helper-text/index";
+  let pickr;
+  let itemStyleShadowColorText = "";
+
+  $: if ($itemStyleShadowColor !== undefined)
+    itemStyleShadowColorText = $itemStyleShadowColor;
+  $: pickr && pickr.setColor(itemStyleShadowColorText);
+
+  onMount(async () => {
+    await tick();
+    initPickr();
+  });
+
+  function initPickr() {
+    pickr = Pickr.create({
+      el: document.getElementById("itemStyleShadowColor-picker"),
+      theme: "nano",
+      default: itemStyleShadowColorText,
+      components: {
+        preview: true,
+        opacity: true,
+        hue: true
+      }
+    });
+    pickr.on("changestop", instance => {
+      itemStyleShadowColorText = instance
+        .getColor()
+        .toHEXA()
+        .toString();
+      updateitemStyleShadowColor();
+    });
+  }
+
+  function updateitemStyleShadowColor() {
+    pickr.setColor(itemStyleShadowColorText);
+    $itemStyleShadowColor = itemStyleShadowColorText;
+  }
+</script>
+
+<style>
+  .itemStyleShadowColor-picker-wrapper {
+    display: flex;
+    flex-flow: column;
+    position: relative;
+  }
+</style>
+
+<div class="itemStyleShadowColor-picker-wrapper">
+  <Textfield
+    withLeadingIcon
+    bind:value={itemStyleShadowColorText}
+    on:change={updateitemStyleShadowColor}
+    label="Wave Shadow Colour" />
+  <div id="itemStyleShadowColor-picker" />
+</div>
+<HelperText />
diff --git a/src/main/resources/templates/_charts/echarts/config/LabelAlign.svelte b/src/main/resources/templates/_charts/echarts/config/LabelAlign.svelte
new file mode 100644
index 00000000..ea01ec84
--- /dev/null
+++ b/src/main/resources/templates/_charts/echarts/config/LabelAlign.svelte
@@ -0,0 +1,34 @@
+<script>
+  import Select, { Option } from "@smui/select";
+  import { labelAlign } from "./echarts-liquid-fill-store.js";
+  import { onMount, tick } from "svelte";
+  import HelperText from "@smui/textfield/helper-text/index";
+
+  const ALIGN = ["left", "center", "right"];
+  let labelAlignSelected;
+
+  onMount(async () => {
+    await tick();  
+    labelAlignSelected = $labelAlign;
+  });
+
+  $: if (labelAlignSelected) {
+    $labelAlign = labelAlignSelected;
+  }
+
+</script>
+
+<Select
+  enhanced
+  bind:value={labelAlignSelected}
+  label="Label Alignment"
+  class="labelAlign"
+  menu$class="labelAlign">
+  <Option value="" />
+  {#each ALIGN as align}
+    <Option value={align} selected={labelAlignSelected === align}>
+      {align}
+    </Option>
+  {/each}
+</Select>
+  <HelperText></HelperText>
\ No newline at end of file
diff --git a/src/main/resources/templates/_charts/echarts/config/LabelBaseline.svelte b/src/main/resources/templates/_charts/echarts/config/LabelBaseline.svelte
new file mode 100644
index 00000000..8dcad52a
--- /dev/null
+++ b/src/main/resources/templates/_charts/echarts/config/LabelBaseline.svelte
@@ -0,0 +1,34 @@
+<script>
+  import Select, { Option } from "@smui/select";
+  import { labelBaseline } from "./echarts-liquid-fill-store.js";
+  import { onMount, tick } from "svelte";
+  import HelperText from "@smui/textfield/helper-text/index";
+
+  const BASELINE = ["top", "middle", "bottom"];
+  let labelBaselineSelected;
+
+  onMount(async () => {
+    await tick();  
+    labelBaselineSelected = $labelBaseline;
+  });
+
+  $: if (labelBaselineSelected) {
+    $labelBaseline = labelBaselineSelected;
+  }
+
+</script>
+
+<Select
+  enhanced
+  bind:value={labelBaselineSelected}
+  label="Label Baseline"
+  class="labelBaseline"
+  menu$class="labelBaseline">
+  <Option value="" />
+  {#each BASELINE as align}
+    <Option value={align} selected={labelBaselineSelected === align}>
+      {align}
+    </Option>
+  {/each}
+</Select>
+  <HelperText></HelperText>
\ No newline at end of file
diff --git a/src/main/resources/templates/_charts/echarts/config/LabelColor.svelte b/src/main/resources/templates/_charts/echarts/config/LabelColor.svelte
new file mode 100644
index 00000000..f556deef
--- /dev/null
+++ b/src/main/resources/templates/_charts/echarts/config/LabelColor.svelte
@@ -0,0 +1,62 @@
+<script>
+  import { labelColor } from "./echarts-liquid-fill-store.js";
+  import { onMount, tick } from "svelte";
+  import Textfield, { Input, Textarea } from "@smui/textfield";
+  import FloatingLabel from "@smui/floating-label";
+  import LineRipple from "@smui/line-ripple";
+  import HelperText from "@smui/textfield/helper-text/index";
+  let pickr;
+  let labelColorText = "";
+
+  $: if ($labelColor !== undefined)
+    labelColorText = $labelColor;
+  $: pickr && pickr.setColor(labelColorText);
+
+  onMount(async () => {
+    await tick();
+    initPickr();
+  });
+
+  function initPickr() {
+    pickr = Pickr.create({
+      el: document.getElementById("labelColor-picker"),
+      theme: "nano",
+      default: labelColorText,
+      components: {
+        preview: true,
+        opacity: true,
+        hue: true
+      }
+    });
+    pickr.on("changestop", instance => {
+      labelColorText = instance
+        .getColor()
+        .toHEXA()
+        .toString();
+      updatelabelColor();
+    });
+  }
+
+  function updatelabelColor() {
+    pickr.setColor(labelColorText);
+    $labelColor = labelColorText;
+  }
+</script>
+
+<style>
+  .labelColor-picker-wrapper {
+    display: flex;
+    flex-flow: column;
+    position: relative;
+  }
+</style>
+
+<div class="labelColor-picker-wrapper">
+  <Textfield
+    withLeadingIcon
+    bind:value={labelColorText}
+    on:change={updatelabelColor}
+    label="Color of text when displayed on background" />
+  <div id="labelColor-picker" />
+</div>
+<HelperText />
diff --git a/src/main/resources/templates/_charts/echarts/config/LabelFontSize.svelte b/src/main/resources/templates/_charts/echarts/config/LabelFontSize.svelte
new file mode 100644
index 00000000..205c0904
--- /dev/null
+++ b/src/main/resources/templates/_charts/echarts/config/LabelFontSize.svelte
@@ -0,0 +1,22 @@
+<script>
+  import { labelFontSize } from "./echarts-liquid-fill-store.js";
+  import Textfield, { Input, Textarea } from "@smui/textfield";
+  import HelperText from "@smui/textfield/helper-text/index";
+  import FloatingLabel from "@smui/floating-label";
+  import LineRipple from "@smui/line-ripple";
+  import { onMount, tick } from "svelte";
+
+  let labelFontSizeText = "";
+
+  onMount(async () => {
+    await tick();
+    labelFontSizeText = $labelFontSize;
+  });
+
+  function update() {
+    $labelFontSize = labelFontSizeText;
+  }
+</script>
+
+<Textfield on:change={update} bind:value={labelFontSizeText} label="Label font size" />
+<HelperText>Value in pixels 'px', 'em', 'rem', '%', etc.</HelperText>
\ No newline at end of file
diff --git a/src/main/resources/templates/_charts/echarts/config/LabelFontWeight.svelte b/src/main/resources/templates/_charts/echarts/config/LabelFontWeight.svelte
new file mode 100644
index 00000000..d261f8fb
--- /dev/null
+++ b/src/main/resources/templates/_charts/echarts/config/LabelFontWeight.svelte
@@ -0,0 +1,35 @@
+<script>
+  import Select, { Option } from "@smui/select";
+  import { labelFontWeight } from "./echarts-liquid-fill-store.js";
+  import { onMount, tick } from "svelte";
+  import HelperText from "@smui/textfield/helper-text/index";
+
+  const FONT_WEIGHT = ["normal", "bold", "bolder", "lighter"];
+
+  let weightSelected;
+
+  onMount(async () => {
+    await tick();  
+    weightSelected = $labelFontWeight;
+  });
+
+  $: if (weightSelected) {
+    $labelFontWeight = weightSelected;
+  }
+
+</script>
+
+<Select
+  enhanced
+  bind:value={weightSelected}
+  label="Label Font Weight"
+  class="weight"
+  menu$class="weight">
+  <Option value="" />
+  {#each FONT_WEIGHT as weight}
+    <Option value={weight} selected={weightSelected === weight}>
+      {weight}
+    </Option>
+  {/each}
+</Select>
+  <HelperText></HelperText>
\ No newline at end of file
diff --git a/src/main/resources/templates/_charts/echarts/config/LabelInsideColor.svelte b/src/main/resources/templates/_charts/echarts/config/LabelInsideColor.svelte
new file mode 100644
index 00000000..8479e895
--- /dev/null
+++ b/src/main/resources/templates/_charts/echarts/config/LabelInsideColor.svelte
@@ -0,0 +1,62 @@
+<script>
+  import { labelInsideColor } from "./echarts-liquid-fill-store.js";
+  import { onMount, tick } from "svelte";
+  import Textfield, { Input, Textarea } from "@smui/textfield";
+  import FloatingLabel from "@smui/floating-label";
+  import LineRipple from "@smui/line-ripple";
+  import HelperText from "@smui/textfield/helper-text/index";
+  let pickr;
+  let labelInsideColorText = "";
+
+  $: if ($labelInsideColor !== undefined)
+    labelInsideColorText = $labelInsideColor;
+  $: pickr && pickr.setColor(labelInsideColorText);
+
+  onMount(async () => {
+    await tick();
+    initPickr();
+  });
+
+  function initPickr() {
+    pickr = Pickr.create({
+      el: document.getElementById("labelInsideColor-picker"),
+      theme: "nano",
+      default: labelInsideColorText,
+      components: {
+        preview: true,
+        opacity: true,
+        hue: true
+      }
+    });
+    pickr.on("changestop", instance => {
+      labelInsideColorText = instance
+        .getColor()
+        .toHEXA()
+        .toString();
+      updatelabelInsideColor();
+    });
+  }
+
+  function updatelabelInsideColor() {
+    pickr.setColor(labelInsideColorText);
+    $labelInsideColor = labelInsideColorText;
+  }
+</script>
+
+<style>
+  .labelInsideColor-picker-wrapper {
+    display: flex;
+    flex-flow: column;
+    position: relative;
+  }
+</style>
+
+<div class="labelInsideColor-picker-wrapper">
+  <Textfield
+    withLeadingIcon
+    bind:value={labelInsideColorText}
+    on:change={updatelabelInsideColor}
+    label="Color of text when displayed on wave" />
+  <div id="labelInsideColor-picker" />
+</div>
+<HelperText />
diff --git a/src/main/resources/templates/_charts/echarts/config/LabelPosition.svelte b/src/main/resources/templates/_charts/echarts/config/LabelPosition.svelte
new file mode 100644
index 00000000..73ea0478
--- /dev/null
+++ b/src/main/resources/templates/_charts/echarts/config/LabelPosition.svelte
@@ -0,0 +1,34 @@
+<script>
+  import Select, { Option } from "@smui/select";
+  import { labelPosition } from "./echarts-liquid-fill-store.js";
+  import { onMount, tick } from "svelte";
+  import HelperText from "@smui/textfield/helper-text/index";
+
+  const POSTITION = ["inside", "left", "right", "top", "bottom"];
+  let labelPositionSelected;
+
+  onMount(async () => {
+    await tick();  
+    labelPositionSelected = $labelPosition;
+  });
+
+  $: if (labelPositionSelected) {
+    $labelPosition = labelPositionSelected;
+  }
+
+</script>
+
+<Select
+  enhanced
+  bind:value={labelPositionSelected}
+  label="Label Position"
+  class="labelPosition"
+  menu$class="labelPosition">
+  <Option value="" />
+  {#each POSTITION as align}
+    <Option value={align} selected={labelPositionSelected === align}>
+      {align}
+    </Option>
+  {/each}
+</Select>
+  <HelperText></HelperText>
\ No newline at end of file
diff --git a/src/main/resources/templates/_charts/echarts/config/LabelShow.svelte b/src/main/resources/templates/_charts/echarts/config/LabelShow.svelte
new file mode 100644
index 00000000..ebfbe5f4
--- /dev/null
+++ b/src/main/resources/templates/_charts/echarts/config/LabelShow.svelte
@@ -0,0 +1,13 @@
+<script>
+  import { labelShow } from "./echarts-liquid-fill-store.js";
+  import Switch from "@smui/switch";
+  import FormField from "@smui/form-field";
+
+  let labelShowChecked = true;
+  $: $labelShow = labelShowChecked;
+</script>
+
+<FormField>
+  <Switch bind:checked={labelShowChecked} />
+  <span slot="label">Show Label</span>
+</FormField>
\ No newline at end of file
diff --git a/src/main/resources/templates/_charts/echarts/config/OutlineBorderDistance.svelte b/src/main/resources/templates/_charts/echarts/config/OutlineBorderDistance.svelte
new file mode 100644
index 00000000..16c559fa
--- /dev/null
+++ b/src/main/resources/templates/_charts/echarts/config/OutlineBorderDistance.svelte
@@ -0,0 +1,46 @@
+<script>
+  import { outlineBorderDistance } from "./echarts-liquid-fill-store.js";
+  import { onMount, tick } from "svelte";
+  import Slider from "@smui/slider";
+  import FormField from "@smui/form-field";
+  import HelperText from "@smui/textfield/helper-text/index";
+  import { MDCSlider } from "@material/slider";
+  import { MDCDialog } from "@material/dialog";
+
+  onMount(async () => {
+    await tick();
+    outlineBorderDistanceValue = $outlineBorderDistance;
+    const dialog = new MDCDialog(document.querySelector(".mdc-dialog"));
+    const slider = new MDCSlider(document.querySelector(".mdc-slider"));
+    dialog.listen("MDCDialog:opened", () => {
+      slider.layout();
+    });
+  });
+
+  let outlineBorderDistanceValue = "";
+
+  function update() {
+    $outlineBorderDistance = outlineBorderDistanceValue;
+  }
+</script>
+
+<div class="slider">
+
+  <FormField align="end" style="display: flex;">
+
+    <Slider
+      bind:value={outlineBorderDistanceValue}
+      min={0}
+      max={25}
+      step={1}
+      discrete
+      displayMarkers />
+    <span
+      slot="label"
+      style="padding-right: 12px; width: max-content; display: block;">
+      Outline Border Distance
+    </span>
+  </FormField>
+
+</div>
+
diff --git a/src/main/resources/templates/_charts/echarts/config/OutlineShow.svelte b/src/main/resources/templates/_charts/echarts/config/OutlineShow.svelte
new file mode 100644
index 00000000..33c163c0
--- /dev/null
+++ b/src/main/resources/templates/_charts/echarts/config/OutlineShow.svelte
@@ -0,0 +1,12 @@
+<script>
+  import { outlineShow } from "./echarts-liquid-fill-store.js";
+  import Switch from "@smui/switch";
+  import FormField from "@smui/form-field";
+  let outlineShowChecked = true;
+  $: $outlineShow = outlineShowChecked;
+</script>
+
+<FormField>
+  <Switch bind:checked={outlineShowChecked} />
+  <span slot="label">Show Outline</span>
+</FormField>
diff --git a/src/main/resources/templates/_charts/echarts/config/OutlineitemStyleBorderColor.svelte b/src/main/resources/templates/_charts/echarts/config/OutlineitemStyleBorderColor.svelte
new file mode 100644
index 00000000..a665ae26
--- /dev/null
+++ b/src/main/resources/templates/_charts/echarts/config/OutlineitemStyleBorderColor.svelte
@@ -0,0 +1,62 @@
+<script>
+  import { outlineitemStyleBorderColor } from "./echarts-liquid-fill-store.js";
+  import { onMount, tick } from "svelte";
+  import Textfield, { Input, Textarea } from "@smui/textfield";
+  import FloatingLabel from "@smui/floating-label";
+  import LineRipple from "@smui/line-ripple";
+  import HelperText from "@smui/textfield/helper-text/index";
+  let pickr;
+  let outlineitemStyleBorderColorText = "";
+
+  $: if ($outlineitemStyleBorderColor !== undefined)
+    outlineitemStyleBorderColorText = $outlineitemStyleBorderColor;
+  $: pickr && pickr.setColor(outlineitemStyleBorderColorText);
+
+  onMount(async () => {
+    await tick();
+    initPickr();
+  });
+
+  function initPickr() {
+    pickr = Pickr.create({
+      el: document.getElementById("outlineitemStyleBorderColor-picker"),
+      theme: "nano",
+      default: outlineitemStyleBorderColorText,
+      components: {
+        preview: true,
+        opacity: true,
+        hue: true
+      }
+    });
+    pickr.on("changestop", instance => {
+      outlineitemStyleBorderColorText = instance
+        .getColor()
+        .toHEXA()
+        .toString();
+      updateoutlineitemStyleBorderColor();
+    });
+  }
+
+  function updateoutlineitemStyleBorderColor() {
+    pickr.setColor(outlineitemStyleBorderColorText);
+    $outlineitemStyleBorderColor = outlineitemStyleBorderColorText;
+  }
+</script>
+
+<style>
+  .outlineitemStyleBorderColor-picker-wrapper {
+    display: flex;
+    flex-flow: column;
+    position: relative;
+  }
+</style>
+
+<div class="outlineitemStyleBorderColor-picker-wrapper">
+  <Textfield
+    withLeadingIcon
+    bind:value={outlineitemStyleBorderColorText}
+    on:change={updateoutlineitemStyleBorderColor}
+    label="Item Style Border Colour" />
+  <div id="outlineitemStyleBorderColor-picker" />
+</div>
+<HelperText />
diff --git a/src/main/resources/templates/_charts/echarts/config/OutlineitemStyleBorderWidth.svelte b/src/main/resources/templates/_charts/echarts/config/OutlineitemStyleBorderWidth.svelte
new file mode 100644
index 00000000..0b98bbf3
--- /dev/null
+++ b/src/main/resources/templates/_charts/echarts/config/OutlineitemStyleBorderWidth.svelte
@@ -0,0 +1,46 @@
+<script>
+  import { outlineitemStyleBorderWidth } from "./echarts-liquid-fill-store.js";
+  import { onMount, tick } from "svelte";
+  import Slider from "@smui/slider";
+  import FormField from "@smui/form-field";
+  import HelperText from "@smui/textfield/helper-text/index";
+  import { MDCSlider } from "@material/slider";
+  import { MDCDialog } from "@material/dialog";
+
+  onMount(async () => {
+    await tick();
+    outlineitemStyleBorderWidthValue = $outlineitemStyleBorderWidth;
+    const dialog = new MDCDialog(document.querySelector(".mdc-dialog"));
+    const slider = new MDCSlider(document.querySelector(".mdc-slider"));
+    dialog.listen("MDCDialog:opened", () => {
+      slider.layout();
+    });
+  });
+
+  let outlineitemStyleBorderWidthValue = "";
+
+  function update() {
+    $outlineitemStyleBorderWidth = outlineitemStyleBorderWidthValue;
+  }
+</script>
+
+<div class="slider">
+
+  <FormField align="end" style="display: flex;">
+
+    <Slider
+      bind:value={outlineitemStyleBorderWidthValue}
+      min={0}
+      max={25}
+      step={1}
+      discrete
+      displayMarkers />
+    <span
+      slot="label"
+      style="padding-right: 12px; width: max-content; display: block;">
+      Outline Border Width
+    </span>
+  </FormField>
+
+</div>
+
diff --git a/src/main/resources/templates/_charts/echarts/config/OutlineitemStyleColor.svelte b/src/main/resources/templates/_charts/echarts/config/OutlineitemStyleColor.svelte
new file mode 100644
index 00000000..50e6f974
--- /dev/null
+++ b/src/main/resources/templates/_charts/echarts/config/OutlineitemStyleColor.svelte
@@ -0,0 +1,62 @@
+<script>
+  import { outlineitemStyleColor } from "./echarts-liquid-fill-store.js";
+  import { onMount, tick } from "svelte";
+  import Textfield, { Input, Textarea } from "@smui/textfield";
+  import FloatingLabel from "@smui/floating-label";
+  import LineRipple from "@smui/line-ripple";
+  import HelperText from "@smui/textfield/helper-text/index";
+  let pickr;
+  let outlineitemStyleColorText = "";
+
+  $: if ($outlineitemStyleColor !== undefined)
+    outlineitemStyleColorText = $outlineitemStyleColor;
+  $: pickr && pickr.setColor(outlineitemStyleColorText);
+
+  onMount(async () => {
+    await tick();
+    initPickr();
+  });
+
+  function initPickr() {
+    pickr = Pickr.create({
+      el: document.getElementById("outlineitemStyleColor-picker"),
+      theme: "nano",
+      default: outlineitemStyleColorText,
+      components: {
+        preview: true,
+        opacity: true,
+        hue: true
+      }
+    });
+    pickr.on("changestop", instance => {
+      outlineitemStyleColorText = instance
+        .getColor()
+        .toHEXA()
+        .toString();
+      updateoutlineitemStyleColor();
+    });
+  }
+
+  function updateoutlineitemStyleColor() {
+    pickr.setColor(outlineitemStyleColorText);
+    $outlineitemStyleColor = outlineitemStyleColorText;
+  }
+</script>
+
+<style>
+  .outlineitemStyleColor-picker-wrapper {
+    display: flex;
+    flex-flow: column;
+    position: relative;
+  }
+</style>
+
+<div class="outlineitemStyleColor-picker-wrapper">
+  <Textfield
+    withLeadingIcon
+    bind:value={outlineitemStyleColorText}
+    on:change={updateoutlineitemStyleColor}
+    label="Item Style Colour" />
+  <div id="outlineitemStyleColor-picker" />
+</div>
+<HelperText />
diff --git a/src/main/resources/templates/_charts/echarts/config/OutlineitemStyleShadowBlur.svelte b/src/main/resources/templates/_charts/echarts/config/OutlineitemStyleShadowBlur.svelte
new file mode 100644
index 00000000..2a5969d9
--- /dev/null
+++ b/src/main/resources/templates/_charts/echarts/config/OutlineitemStyleShadowBlur.svelte
@@ -0,0 +1,45 @@
+<script>
+  import { outlineitemStyleShadowBlur } from "./echarts-liquid-fill-store.js";
+  import { onMount, tick } from "svelte";
+  import Slider from "@smui/slider";
+  import FormField from "@smui/form-field";
+  import HelperText from "@smui/textfield/helper-text/index";
+  import { MDCSlider } from "@material/slider";
+  import { MDCDialog } from "@material/dialog";
+
+  onMount(async () => {
+    await tick();
+    outlineitemStyleShadowBlurValue = $outlineitemStyleShadowBlur;
+    const dialog = new MDCDialog(document.querySelector(".mdc-dialog"));
+    const slider = new MDCSlider(document.querySelector(".mdc-slider"));
+    dialog.listen("MDCDialog:opened", () => {
+      slider.layout();
+    });
+  });
+
+  let outlineitemStyleShadowBlurValue = "";
+
+  function update() {
+    $outlineitemStyleShadowBlur = outlineitemStyleShadowBlurValue;
+  }
+</script>
+
+<div class="slider">
+
+  <FormField align="end" style="display: flex;">
+
+    <Slider
+      bind:value={outlineitemStyleShadowBlurValue}
+      min={0}
+      max={25}
+      step={1}
+      discrete
+      displayMarkers />
+    <span
+      slot="label"
+      style="padding-right: 12px; width: max-content; display: block;">
+      Outline Shadow Blur Size
+    </span>
+  </FormField>
+
+</div>
diff --git a/src/main/resources/templates/_charts/echarts/config/OutlineitemStyleShadowColor.svelte b/src/main/resources/templates/_charts/echarts/config/OutlineitemStyleShadowColor.svelte
new file mode 100644
index 00000000..5bea74d5
--- /dev/null
+++ b/src/main/resources/templates/_charts/echarts/config/OutlineitemStyleShadowColor.svelte
@@ -0,0 +1,62 @@
+<script>
+  import { outlineitemStyleShadowColor } from "./echarts-liquid-fill-store.js";
+  import { onMount, tick } from "svelte";
+  import Textfield, { Input, Textarea } from "@smui/textfield";
+  import FloatingLabel from "@smui/floating-label";
+  import LineRipple from "@smui/line-ripple";
+  import HelperText from "@smui/textfield/helper-text/index";
+  let pickr;
+  let outlineitemStyleShadowColorText = "";
+
+  $: if ($outlineitemStyleShadowColor !== undefined)
+    outlineitemStyleShadowColorText = $outlineitemStyleShadowColor;
+  $: pickr && pickr.setColor(outlineitemStyleShadowColorText);
+
+  onMount(async () => {
+    await tick();
+    initPickr();
+  });
+
+  function initPickr() {
+    pickr = Pickr.create({
+      el: document.getElementById("outlineitemStyleShadowColor-picker"),
+      theme: "nano",
+      default: outlineitemStyleShadowColorText,
+      components: {
+        preview: true,
+        opacity: true,
+        hue: true
+      }
+    });
+    pickr.on("changestop", instance => {
+      outlineitemStyleShadowColorText = instance
+        .getColor()
+        .toHEXA()
+        .toString();
+      updateoutlineitemStyleShadowColor();
+    });
+  }
+
+  function updateoutlineitemStyleShadowColor() {
+    pickr.setColor(outlineitemStyleShadowColorText);
+    $outlineitemStyleShadowColor = outlineitemStyleShadowColorText;
+  }
+</script>
+
+<style>
+  .outlineitemStyleShadowColor-picker-wrapper {
+    display: flex;
+    flex-flow: column;
+    position: relative;
+  }
+</style>
+
+<div class="outlineitemStyleShadowColor-picker-wrapper">
+  <Textfield
+    withLeadingIcon
+    bind:value={outlineitemStyleShadowColorText}
+    on:change={updateoutlineitemStyleShadowColor}
+    label="Outline Shadow Colour" />
+  <div id="outlineitemStyleShadowColor-picker" />
+</div>
+<HelperText />
\ No newline at end of file
diff --git a/src/main/resources/templates/_charts/echarts/config/Period.svelte b/src/main/resources/templates/_charts/echarts/config/Period.svelte
new file mode 100644
index 00000000..47089688
--- /dev/null
+++ b/src/main/resources/templates/_charts/echarts/config/Period.svelte
@@ -0,0 +1,22 @@
+<script>
+  import { period } from "./echarts-liquid-fill-store.js";
+  import Textfield, { Input, Textarea } from "@smui/textfield";
+  import HelperText from "@smui/textfield/helper-text/index";
+  import FloatingLabel from "@smui/floating-label";
+  import LineRipple from "@smui/line-ripple";
+  import { onMount, tick } from "svelte";
+
+  let periodText = "";
+
+  onMount(async () => {
+    await tick();
+    periodText = $period;
+  });
+
+  function update() {
+    $period = periodText;
+  }
+</script>
+
+<Textfield on:change={update} bind:value={periodText} label="Wave Forward Animation Period" />
+<HelperText>Milliseconds to move forward a wave-length or auto</HelperText>
\ No newline at end of file
diff --git a/src/main/resources/templates/_charts/echarts/config/Radius.svelte b/src/main/resources/templates/_charts/echarts/config/Radius.svelte
new file mode 100644
index 00000000..4153bde8
--- /dev/null
+++ b/src/main/resources/templates/_charts/echarts/config/Radius.svelte
@@ -0,0 +1,22 @@
+<script>
+  import { radius } from "./echarts-liquid-fill-store.js";
+  import Textfield, { Input, Textarea } from "@smui/textfield";
+  import HelperText from "@smui/textfield/helper-text/index";
+  import FloatingLabel from "@smui/floating-label";
+  import LineRipple from "@smui/line-ripple";
+  import { onMount, tick } from "svelte";
+
+  let radiusText = "";
+
+  onMount(async () => {
+    await tick();
+    radiusText = $radius;
+  });
+
+  function update() {
+    $radius = radiusText;
+  }
+</script>
+
+<Textfield on:change={update} bind:value={radiusText} label="Radius of the chart" />
+<HelperText>Value in pixels 'px' or as a percentage '%'</HelperText>
\ No newline at end of file
diff --git a/src/main/resources/templates/_charts/echarts/config/Shape.svelte b/src/main/resources/templates/_charts/echarts/config/Shape.svelte
new file mode 100644
index 00000000..e4bcaa50
--- /dev/null
+++ b/src/main/resources/templates/_charts/echarts/config/Shape.svelte
@@ -0,0 +1,53 @@
+<script>
+  import Select, { Option } from "@smui/select";
+  import { shape } from "./echarts-liquid-fill-store.js";
+  import { onMount, tick } from "svelte";
+  import HelperText from "@smui/textfield/helper-text/index";
+
+  const SHAPES = [
+    { type: "container", desc: "Fill Outter Container", icon: "fal fa-border-outer fa-fw" },
+    { type: "circle", desc: "Circle", icon: "fal fa-circle fa-fw" },
+    {
+      type: "rect",
+      desc: "Rectangle",
+      icon: "fal fa-rectangle-landscape fa-fw"
+    },
+    {
+      type: "roundRect",
+      desc: "Rounded Rectangle",
+      icon: "fad fa-rectangle-landscape fa-fw"
+    },
+    { type: "triangle", desc: "Triangle", icon: "fal fa-triangle fa-fw" },
+    { type: "diamond", desc: "Diamond", icon: "fal fa-diamond fa-fw" },
+    { type: "pin", desc: "Pin", icon: "fal fa-map-marker fa-fw" },
+    { type: "arrow", desc: "Arrow", icon: "fal fa-arrow-alt-up fa-fw" }
+  ];
+
+  let shapeSelected;
+
+  onMount(async () => {
+    await tick();  
+    shapeSelected = $shape;
+  });
+
+  $: if (shapeSelected) {
+    $shape = shapeSelected;
+  }
+
+</script>
+
+<Select
+  enhanced
+  bind:value={shapeSelected}
+  label="Gauge shape "
+  class="shape"
+  menu$class="shape">
+  <Option value="" />
+  {#each SHAPES as shape}
+    <Option value={shape.type} selected={shapeSelected === shape.type}>
+      <i class={shape.icon} />
+      {shape.desc}
+    </Option>
+  {/each}
+</Select>
+  <HelperText></HelperText>
\ No newline at end of file
diff --git a/src/main/resources/templates/_charts/echarts/config/WaveAnimation.svelte b/src/main/resources/templates/_charts/echarts/config/WaveAnimation.svelte
new file mode 100644
index 00000000..1271c086
--- /dev/null
+++ b/src/main/resources/templates/_charts/echarts/config/WaveAnimation.svelte
@@ -0,0 +1,13 @@
+<script>
+  import { waveAnimation } from "./echarts-liquid-fill-store.js";
+  import Switch from "@smui/switch";
+  import FormField from "@smui/form-field";
+
+  let waveAnimationChecked = true;
+  $: $waveAnimation = waveAnimationChecked;
+</script>
+
+<FormField>
+  <Switch bind:checked={waveAnimationChecked} />
+  <span slot="label">Show Wave Animation</span>
+</FormField>
\ No newline at end of file
diff --git a/src/main/resources/templates/_charts/echarts/config/WaveLength.svelte b/src/main/resources/templates/_charts/echarts/config/WaveLength.svelte
new file mode 100644
index 00000000..54340f80
--- /dev/null
+++ b/src/main/resources/templates/_charts/echarts/config/WaveLength.svelte
@@ -0,0 +1,22 @@
+<script>
+  import { waveLength } from "./echarts-liquid-fill-store.js";
+  import Textfield, { Input, Textarea } from "@smui/textfield";
+  import HelperText from "@smui/textfield/helper-text/index";
+  import FloatingLabel from "@smui/floating-label";
+  import LineRipple from "@smui/line-ripple";
+  import { onMount, tick } from "svelte";
+
+  let waveLengthText = "";
+
+  onMount(async () => {
+    await tick();
+    waveLengthText = $waveLength;
+  });
+
+  function update() {
+    $waveLength = waveLengthText;
+  }
+</script>
+
+<Textfield on:change={update} bind:value={waveLengthText} label="Wave length" />
+<HelperText>Value in pixels 'px' or as a percentage '%'</HelperText>
\ No newline at end of file
diff --git a/src/main/resources/templates/_charts/echarts/config/echarts-liquid-fill-store.js b/src/main/resources/templates/_charts/echarts/config/echarts-liquid-fill-store.js
new file mode 100644
index 00000000..6612cea6
--- /dev/null
+++ b/src/main/resources/templates/_charts/echarts/config/echarts-liquid-fill-store.js
@@ -0,0 +1,40 @@
+import { writable, readable } from 'svelte/store';
+
+export const color = writable( '#294D99' );
+export const center = writable([ '50%', '50%' ]);
+export const radius = writable('50%');
+export const amplitude = writable('8%');
+export const waveLength = writable('80%');
+export const period = writable('auto');
+export const direction = writable('right');
+export const shape = writable('roundRect');
+export const waveAnimation = writable(true);
+export const animationEasing = writable('linear');
+export const animationEasingUpdate = writable('linear');
+export const animationDuration = writable(2000);
+export const animationDurationUpdate = writable(1000);
+export const outlineShow = writable(true);
+export const outlineBorderDistance = writable(10);
+export const outlineitemStyleColor = writable('red');
+export const outlineitemStyleBorderColor = writable('rgba(21,137,200,0.5)');
+export const outlineitemStyleBorderWidth = writable(6);
+export const outlineitemStyleShadowBlur = writable(0);
+export const outlineitemStyleShadowColor = writable('rgba(0, 0, 0, 0.25)');
+export const backgroundStyleColor = writable('#E3F7FF');
+export const backgroundStyleBorderWidth = writable(1);
+export const backgroundStyleBorderColor = writable('#990');
+export const backgroundStyleItemStyleShadowBlur = writable(0.5);
+export const backgroundStyleItemStyleShadowColor = writable('#090');
+export const backgroundStyleItemStyleOpacity = writable(0.5);
+export const itemStyleOpacity = writable(0.7);
+export const itemStyleShadowBlur = writable(0);
+export const itemStyleShadowColor = writable('#000');
+export const emphasisItemStyleOpacity = writable(0.8);
+export const labelShow = writable(true);
+export const labelColor = writable('#000');
+export const labelInsideColor = writable('#0f0');
+export const labelFontSize = writable(12);
+export const labelFontWeight = writable('bold');
+export const labelAlign = writable('center');
+export const labelBaseline = writable('middle');
+export const labelPosition = writable('inside');
diff --git a/src/main/resources/templates/_components/ReadingsList.svelte b/src/main/resources/templates/_components/ReadingsList.svelte
index 0cb55c4e..1b9bce16 100644
--- a/src/main/resources/templates/_components/ReadingsList.svelte
+++ b/src/main/resources/templates/_components/ReadingsList.svelte
@@ -20,6 +20,10 @@
       return reading.type === index;
     });
   }
+
+  function getReadings(type) {
+    return readings.filter(reading => reading.type === type.type);
+  }
 </script>
 
 
@@ -32,11 +36,9 @@
           <Graphic class={type.icon} />
           <Text>{type.desc}</Text>
         </dt>
-      {/each}
-      {#if readings}
-        <dd>
+{#if readings}
           <List>
-            {#each readings as reading (reading.id + '_' + reading.index)}
+            {#each getReadings(type) as reading (reading.id + '_' + reading.index + '_' + type.type)}
               <Item>
                 <Graphic class={reading.icon} />
                 <Text>
@@ -48,14 +50,10 @@
                   {$storeTypes[reading.type].desc}
                 </Meta>
               </Item>
-            {:else}
-              <div>Loading...</div>
             {/each}
           </List>
-        </dd>
-      {:else}
-        <div />
-      {/if}
+        {/if}
+      {/each}
     </dl>
   </div>
 </div>
diff --git a/src/main/resources/templates/_components/_scss/_logo.scss b/src/main/resources/templates/_components/_scss/_logo.scss
index 8f5e88bc..f1d6cf28 100644
--- a/src/main/resources/templates/_components/_scss/_logo.scss
+++ b/src/main/resources/templates/_components/_scss/_logo.scss
@@ -7,9 +7,9 @@
   }
 
   .logo::before {
+      content: "\f126";
       position: absolute;
       font-family: 'Font Awesome 5 Pro';
-      content: "\f126";
       color: var(--theme-primary);
       transform: rotate(130deg);
       font-weight: 400;
diff --git a/src/main/resources/templates/_routes/_scss/_views.scss b/src/main/resources/templates/_routes/_scss/_views.scss
index cb4acd19..9afac860 100644
--- a/src/main/resources/templates/_routes/_scss/_views.scss
+++ b/src/main/resources/templates/_routes/_scss/_views.scss
@@ -1,23 +1,19 @@
-.content {
-	width: 100%;
-	height: 100%;
-	color: black;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	font-size: large;
-}
 .hide {
 	display: none;
 }
 
-.margin-b {
-	margin-bottom: 10px;
+.svlt-grid-item {
+	border: 1px solid rgba(187, 186, 186, 0.753);
 }
-.wrapper {
-	position: absolute;
-	display: inline-flex;
-	width: 100%;
+
+.svlt-grid-shadow {
+	background: rgba(228, 226, 226, 0.863) !important;
+	border: 1px dashed rgba(68, 68, 68, 0.514) !important;
+	transition: transform 0.2s;
+}
+
+.svlt-grid-transition > svlt-grid-item {
+	transition: transform 0.2s;
 }
 
 .toolbar {
@@ -111,16 +107,3 @@
 	}
 }
 
-// .card-container {
-// 	display: inline-flex;
-// 	justify-content: center;
-// 	align-items: center;
-// 	min-height: 500px;
-// 	min-width: 380px;
-// 	background-color:var(--theme-on-error);
-// 	margin-right: 20px;
-// 	margin-bottom: 20px;
-// }
-// .card-container.short {
-// 	min-height: 200px;
-// }
diff --git a/src/main/resources/templates/_routes/index.svelte b/src/main/resources/templates/_routes/index.svelte
index a9279295..aae914df 100644
--- a/src/main/resources/templates/_routes/index.svelte
+++ b/src/main/resources/templates/_routes/index.svelte
@@ -46,4 +46,4 @@
   </div>
 </div>
 
-<Notification type="success" text="success message" title="Great Success!" />
+<Notification type="success" text="Example notification message" title="Great Success!" />
diff --git a/src/main/resources/templates/_routes/settings copy.svelte b/src/main/resources/templates/_routes/settings copy.svelte
new file mode 100644
index 00000000..9646d9f7
--- /dev/null
+++ b/src/main/resources/templates/_routes/settings copy.svelte	
@@ -0,0 +1,113 @@
+<script>
+  import { onMount } from "svelte";
+  import Slider from "@smui/slider";
+  import Button from "@smui/button";
+  import Tab, { Icon, Label } from "@smui/tab";
+  import Dialog, { Title, Content, Actions, InitialFocus } from "@smui/dialog";
+  import Textfield, { Input, Textarea } from "@smui/textfield";
+  import HelperText from "@smui/textfield/helper-text/index";
+  import CharacterCounter from "@smui/textfield/character-counter/index";
+  import { Icon as CommonIcon } from "@smui/common";
+  import FloatingLabel from "@smui/floating-label";
+  import LineRipple from "@smui/line-ripple";
+  import NotchedOutline from "@smui/notched-outline";
+  let dialog;
+  let value = 100;
+
+  function openNative() {
+    let native = document.getElementById("native");
+    native.showModal();
+  }
+
+  // import { MDCSlider } from "@material/slider";
+  // import { MDCDialog } from "@material/dialog";
+  // onMount(() => {
+  //   const dialog = new MDCDialog(document.querySelector(".mdc-dialog"));
+  //   const slider = new MDCSlider(document.querySelector(".mdc-slider"));
+  //   dialog.listen("MDCDialog:opened", () => {
+  //     slider.layout();
+  //   });
+  // });
+  let valueManualC;
+  let valueStandardA;
+</script>
+
+<style>
+  .wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh !important;
+    width: 100%;
+  }
+  :global(.main-content) {
+    height: 100%;
+  }
+  .slider {
+    width: 300px;
+  }
+</style>
+
+<div class="wrapper">
+      <div>
+        <Textfield variant="outlined">
+          <Input bind:value={valueManualC} id="input-manual-c" aria-controls="helper-text-manual-c" aria-describedby="helper-text-manual-c" />
+          <NotchedOutline>
+            <FloatingLabel for="input-manual-c">Label</FloatingLabel>
+          </NotchedOutline>
+        </Textfield>
+        <HelperText id="helper-text-manual-c">Helper Text</HelperText>
+
+        <pre class="status">Value: {valueManualC}</pre>
+      </div>
+<br/>
+      <div>
+        <Textfield bind:value={valueStandardA} label="Label" input$aria-controls="helper-text-standard-a" input$aria-describedby="helper-text-standard-a" />
+        <HelperText id="helper-text-standard-a">Helper Text</HelperText>
+
+        <pre class="status">Value: {valueStandardA}</pre>
+      </div>
+
+</div>
+
+<!-- <Dialog class="mdc-dialog" bind:this={dialog}>
+  <div id="content">
+    <Content>
+      <p>Current Value : {value}</p>
+      <Slider
+        class="mdc-slider"
+        min={-500}
+        max={2500}
+        step={100}
+        discrete
+        displayMarkers />
+    </Content>
+  </div>
+</Dialog> -->
+
+<!-- 
+<div class="wrapper">
+  <Button
+    action="cancel"
+    use={[InitialFocus]}
+    on:click={() => dialog.open()}
+    variant="raised">
+    <Label>Show dialog</Label>
+  </Button>
+
+  <div class="slider">
+    <Slider
+      bind:value
+      min={-500}
+      max={2500}
+      step={100}
+      discrete
+      displayMarkers />
+  </div>
+</div> -->
+<!-- 
+<dialog id="native">
+  <h2>Native dialog content</h2>
+  <p>Current Value : {value}</p>
+  <Slider min={-500} max={2500} step={100} discrete displayMarkers />
+</dialog> -->
diff --git a/src/main/resources/templates/_routes/settings.svelte b/src/main/resources/templates/_routes/settings.svelte
index 0386f931..f7fd3650 100644
--- a/src/main/resources/templates/_routes/settings.svelte
+++ b/src/main/resources/templates/_routes/settings.svelte
@@ -1,8 +1,16 @@
 <script>
+  import { onMount } from "svelte";
   import Slider from "@smui/slider";
   import Button from "@smui/button";
   import Tab, { Icon, Label } from "@smui/tab";
   import Dialog, { Title, Content, Actions, InitialFocus } from "@smui/dialog";
+  import Textfield, { Input, Textarea } from "@smui/textfield";
+  import HelperText from "@smui/textfield/helper-text/index";
+  import CharacterCounter from "@smui/textfield/character-counter/index";
+  import { Icon as CommonIcon } from "@smui/common";
+  import FloatingLabel from "@smui/floating-label";
+  import LineRipple from "@smui/line-ripple";
+  import NotchedOutline from "@smui/notched-outline";
   let dialog;
   let value = 100;
 
@@ -10,6 +18,18 @@
     let native = document.getElementById("native");
     native.showModal();
   }
+
+  // import { MDCSlider } from "@material/slider";
+  // import { MDCDialog } from "@material/dialog";
+  // onMount(() => {
+  //   const dialog = new MDCDialog(document.querySelector(".mdc-dialog"));
+  //   const slider = new MDCSlider(document.querySelector(".mdc-slider"));
+  //   dialog.listen("MDCDialog:opened", () => {
+  //     slider.layout();
+  //   });
+  // });
+  let valueManualC;
+  let valueStandardA;
 </script>
 
 <style>
@@ -28,15 +48,44 @@
   }
 </style>
 
-<Dialog bind:this={dialog}>
+<div class="wrapper">
+      <div>
+        <Textfield variant="outlined">
+          <Input bind:value={valueManualC} id="input-manual-c" aria-controls="helper-text-manual-c" aria-describedby="helper-text-manual-c" />
+          <NotchedOutline>
+            <FloatingLabel for="input-manual-c">Label</FloatingLabel>
+          </NotchedOutline>
+        </Textfield>
+        <HelperText id="helper-text-manual-c">Helper Text</HelperText>
+
+        <pre class="status">Value: {valueManualC}</pre>
+      </div>
+<br/>
+      <div>
+        <Textfield bind:value={valueStandardA} label="Label" input$aria-controls="helper-text-standard-a" input$aria-describedby="helper-text-standard-a" />
+        <HelperText id="helper-text-standard-a">Helper Text</HelperText>
+
+        <pre class="status">Value: {valueStandardA}</pre>
+      </div>
+
+</div>
+
+<Dialog class="mdc-dialog" bind:this={dialog}>
   <div id="content">
     <Content>
       <p>Current Value : {value}</p>
-      <Slider min={-500} max={2500} step={100} discrete displayMarkers />
+      <Slider
+        class="mdc-slider"
+        min={-500}
+        max={2500}
+        step={100}
+        discrete
+        displayMarkers />
     </Content>
   </div>
 </Dialog>
 
+
 <div class="wrapper">
   <Button
     action="cancel"
@@ -45,13 +94,7 @@
     variant="raised">
     <Label>Show dialog</Label>
   </Button>
-  <!-- <Button
-    action="cancel"
-    use={[InitialFocus]}
-    on:click={() => openNative()}
-    variant="raised">
-    <Label>Show native dialog</Label>
-  </Button> -->
+
   <div class="slider">
     <Slider
       bind:value
diff --git a/src/main/resources/templates/_routes/views.svelte b/src/main/resources/templates/_routes/views.svelte
index 8d59efb1..7b76a9d8 100644
--- a/src/main/resources/templates/_routes/views.svelte
+++ b/src/main/resources/templates/_routes/views.svelte
@@ -20,8 +20,8 @@
   let adjustAfterRemove = true;
 
   let charts = [
-    EchartsLiquidFillSample,
     JustGageSample2,
+    EchartsLiquidFillSample,
     ClockSpeedsBarChart,
     TempsBarChart,
     JustGageSample1,
@@ -49,9 +49,9 @@
     if (ele !== null) {
       switch (i) {
         case 0:
-          return new EchartsLiquidFillSample({ target: ele });
-        case 1:
           return new JustGageSample2({ target: ele });
+        case 1:
+          return new EchartsLiquidFillSample({ target: ele });
         case 2:
           return new ClockSpeedsBarChart({ target: ele });
         case 3:
@@ -146,23 +146,9 @@
   function expandContainer(id) {
     let wrapper = document.getElementById(id);
   }
-
 </script>
-<style>
-/* @todo These styles dont work unless placed here!!  */
-:global(.svlt-grid-shadow) {
-  background: rgba(228, 226, 226, 0.863) !important;
-  border: 1px dashed rgba(68, 68, 68, 0.514) !important;
-  transition: transform 0.2s;
-}
-:global(.svlt-grid-item) {
-  border:1px solid rgba(187, 186, 186, 0.753) !important;
-}
-:global(.svlt-grid-transition > svlt-grid-item) {
-  transition: transform 0.2s;
-}
-</style>
-<div class="container margin-b">
+
+<div class="container">
   {#if items !== undefined}
     <Grid
       {breakpoints}
@@ -171,7 +157,7 @@
       gap={5}
       rowHeight={100}
       fillEmpty={true}
-      useTransform={true}
+      useTransform={false}
       static={true}
       bind:items
       let:item>
@@ -208,10 +194,6 @@
                   <i class="fal fa-thumbtack fa-fw" />
                 </IconButton>
               </div>
-                          </ActionIcons>
-          </Actions>
-                    <Actions>
-            <ActionIcons>
               <div id={'confirm-' + item.id} class:hover class="confirm">
                 <div>Remove</div>
                 <IconButton
diff --git a/src/main/resources/templates/_stores/echarts-liquid-fill-store.js b/src/main/resources/templates/_stores/echarts-liquid-fill-store.js
deleted file mode 100644
index f34e918e..00000000
--- a/src/main/resources/templates/_stores/echarts-liquid-fill-store.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import { writable, readable } from 'svelte/store';
-
-export const color = writable(readable([ '#294D99' ]));
-export const center = writable(readable([ '50%', '50%' ]));
-export const radius = writable(readable('50%'));
-export const amplitude = writable(readable('8%'));
-export const waveLength = writable(readable('80%'));
-export const period = writable(readable('auto'));
-export const direction = writable('right');
-export const shape = writable(readable('roundRect'));
-export const waveAnimation = writable(readable(true));
-export const animationEasing = writable(readable('linear'));
-export const animationEasingUpdate = writable(readable('linear'));
-export const animationDuration = writable(readable(2000));
-export const animationDurationUpdate = writable(readable(1000));
-export const outlineShow = writable(readable(true));
-export const outlineBorderDistance = writable(readable(1));
-export const outlineitemStyleColor = writable(readable('red'));
-export const outlineitemStyleBorderColor = writable(readable('rgba(21,137,200,0.5)'));
-export const outlineitemStyleBorderWidth = writable(readable(6));
-export const outlineitemStyleShadowBlur = writable(readable(0));
-export const outlineitemStyleShadowColor = writable(readable('rgba(0, 0, 0, 0.25)'));
-export const backgroundStyleColor = writable(readable('#E3F7FF'));
-export const backgroundStyleBorderWidth = writable(readable(1));
-export const backgroundStyleBorderColor = writable(readable('#000'));
-export const backgroundStyleItemStyleShadowBlur = writable(readable(0.5));
-export const backgroundStyleItemStyleShadowColor = writable(readable('#000'));
-export const backgroundStyleItemStyleOpacity = writable(readable(0.5));
-export const itemStyleOpacity = writable(readable(0.5));
-export const itemStyleShadowBlur = writable(readable(0));
-export const itemStyleShadowColor = writable(readable('#000'));
-export const emphasisItemStyleOpacity = writable(readable(0.8));
-export const labelShow = writable(readable(true));
-export const labelColor = writable(readable('#000'));
-export const labelInsideColor = writable(readable('#0f0'));
-export const labelFontSize = writable(readable(12));
-export const labelFontWeight = writable(readable('bold'));
-export const labelAlign = writable(readable('center'));
-export const labelBaseline = writable(readable('middle'));
-export const labelPosition = writable(readable('inside'));
diff --git a/src/main/resources/templates/minty-client-app.scss b/src/main/resources/templates/minty-client-app.scss
index 4386abd6..c4985769 100644
--- a/src/main/resources/templates/minty-client-app.scss
+++ b/src/main/resources/templates/minty-client-app.scss
@@ -1,35 +1,5 @@
 @import "_scss/include-media";
 
-* {
-	-webkit-box-sizing: border-box;
-	-moz-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-html {
-	height: 100%;
-}
-body {
-	color: var(--theme-on-background);
-	background-color: var(--theme-background);
-	font-family: var(--theme-font-family);
-	min-height: 100%;
-	margin: 0;
-	padding: 0;
-	font-weight: 400;
-	line-height: 1.58;
-	position: relative;
-}
-
-.clearfix:after {
-	content: "";
-	display: block;
-	clear: both;
-}
-
-.hidden {
-	display: none;
-}
 
 /* Pace Loader progress */
 .pace {
@@ -83,29 +53,29 @@ body {
 	opacity: .5 !important;
 }
 
-* :global(.app-content) {
-	all: unset;
-	flex: auto;
-	overflow: auto;
-	width: 100%;
-	position: relative;
-	flex-grow: 1;
-	height: 100vh;
-}
+// * :global(.app-content) {
+// 	all: unset;
+// 	flex: auto;
+// 	overflow: auto;
+// 	width: 100%;
+// 	position: relative;
+// 	flex-grow: 1;
+// 	height: 100vh;
+// }
 
-* :global(.mdc-dialog, .mdc-dialog__scrim) {
-	height: 100vh !important;
-	width: 100vw !important;
-	pointer-events: none;
-}
+// * :global(.mdc-dialog, .mdc-dialog__scrim) {
+// 	height: 100vh !important;
+// 	width: 100vw !important;
+// 	pointer-events: none;
+// }
 
-* global(.centre) {
-	position: absolute;
-	top: 50%;
-	right: auto;
-	bottom: auto;
-	left: 50%;
-	width: auto;
-	height: 100%;
-	transform: translate3d(-50%, -50%, 0);
-}
+// * :global(.centre) {
+// 	position: absolute;
+// 	top: 50%;
+// 	right: auto;
+// 	bottom: auto;
+// 	left: 50%;
+// 	width: auto;
+// 	height: 100%;
+// 	transform: translate3d(-50%, -50%, 0);
+// }
diff --git a/src/main/resources/templates/public/global.css b/src/main/resources/templates/public/global.css
index 8c230817..72ac22fe 100644
--- a/src/main/resources/templates/public/global.css
+++ b/src/main/resources/templates/public/global.css
@@ -1,7 +1,52 @@
-
-.mdc-dialog, .mdc-dialog__scrim) {
+.mdc-dialog,
+.mdc-dialog__scrim {
 	height: 100vh !important;
 	width: 100vw !important;
 	pointer-events: none;
-	background-color: aquamarine  !important;
-}
\ No newline at end of file
+}
+
+* {
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+html {
+	height: 100%;
+}
+
+body {
+	color: var(--theme-on-background);
+	background-color: var(--theme-background);
+	font-family: var(--theme-font-family);
+	min-height: 100%;
+	margin: 0;
+	padding: 0;
+	font-weight: 400;
+	line-height: 1.58;
+	position: relative;
+}
+
+.error {
+	color: var(--theme-on-error);
+	background-color: var(--theme-error);
+}
+.clearfix:after {
+	content: "";
+	display: block;
+	clear: both;
+}
+
+.hidden {
+	display: none;
+}
+.config-current-value {
+	font-size: small;
+	color: rgba(0, 0, 0, 0.6);
+	text-align: end;
+}
+.pickr {
+	position: absolute;
+	left: 0px;
+	bottom: 5px;
+}
diff --git a/src/main/resources/templates/public/index.html b/src/main/resources/templates/public/index.html
index de03878d..9f5a0281 100644
--- a/src/main/resources/templates/public/index.html
+++ b/src/main/resources/templates/public/index.html
@@ -4,7 +4,7 @@
 <head>
     <meta charset='utf-8'>
     <meta name='viewport' content='width=device-width,initial-scale=1.0'>
-    <meta name='theme-color' content='#00FF00'>
+    <meta name='theme-color' content='var(--theme-primary)'>
     <title>Minty Sensor Server</title>
     <link rel='manifest' href='fav-icon/manifest.json'>
     <link rel='stylesheet' href='assets/fontawesome-pro/css/all.min.css'>
@@ -34,7 +34,7 @@
     <script>
         Pace.options.ajax.trackWebSockets = true;
         
-        </script>
+    </script>
 </body>
 
 </html>