diff --git a/packages/localize/stories/date.stories.js b/packages/localize/stories/date.stories.js
new file mode 100644
index 000000000..d88ed9580
--- /dev/null
+++ b/packages/localize/stories/date.stories.js
@@ -0,0 +1,72 @@
+import { storiesOf, html } from '@open-wc/demoing-storybook';
+import { css } from '@lion/core';
+import { formatDate } from '../index.js';
+
+const formatDateDemoStyle = css`
+  .demo-table {
+    border-collapse: collapse;
+    text-align: right;
+  }
+
+  .demo-table thead > tr {
+    border-bottom: 1px solid grey;
+  }
+
+  .demo-table thead > tr > :first-child,
+  .demo-table tbody > tr > :first-child,
+  .demo-table tfoot > tr > :first-child {
+    text-align: left;
+  }
+
+  .demo-table th,
+  .demo-table td {
+    padding: 8px;
+  }
+`;
+
+storiesOf('Localize System|Date', module).add(
+  'formatDate',
+  () => html`
+    <style>
+      ${formatDateDemoStyle}
+    </style>
+    <table class="demo-table">
+      <thead>
+        <tr>
+          <th>Options</th>
+          <th>Code</th>
+          <th>Output</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Default</td>
+          <td><code>formatDate(new Date())</code></td>
+          <td>${formatDate(new Date())}</td>
+        </tr>
+        <tr>
+          <td>Date display</td>
+          <td>
+            <code
+              >formatDate(new
+              Date(){weekday:'long',year:'numeric',month:'long',day:'2-digit'})</code
+            >
+          </td>
+          <td>
+            ${formatDate(new Date(), {
+              weekday: 'long',
+              year: 'numeric',
+              month: 'long',
+              day: '2-digit',
+            })}
+          </td>
+        </tr>
+        <tr>
+          <td>Locale</td>
+          <td><code>formatDate(new Date(){locale:'nl-NL'})</code></td>
+          <td>${formatDate(new Date(), { locale: 'nl-NL' })}</td>
+        </tr>
+      </tbody>
+    </table>
+  `,
+);
diff --git a/packages/localize/stories/index.stories.js b/packages/localize/stories/index.stories.js
index de703834c..2035ee423 100644
--- a/packages/localize/stories/index.stories.js
+++ b/packages/localize/stories/index.stories.js
@@ -1,201 +1,3 @@
-import { storiesOf, html } from '@open-wc/demoing-storybook';
-
-import { html as litHtml } from '@lion/core';
-import { LionLitElement } from '@lion/core/src/LionLitElement.js';
-import {
-  localize,
-  LocalizeMixin,
-  formatNumber,
-  formatNumberToParts,
-  getGroupSeparator,
-  getDecimalSeparator,
-  formatDate,
-  parseDate,
-  getDateFormatBasedOnLocale,
-} from '../index.js';
-
-storiesOf('Localize System|Localize', module).add('lit component', () => {
-  class LitHtmlExample extends LocalizeMixin(LionLitElement) {
-    static get localizeNamespaces() {
-      return [
-        { 'lit-html-example': locale => import(`./translations/${locale}.js`) },
-        ...super.localizeNamespaces,
-      ];
-    }
-
-    static get properties() {
-      return {
-        now: {
-          type: 'Date',
-        },
-      };
-    }
-
-    render() {
-      // this is as simple as localization can be in JavaScript
-      // the Promise is used to delay inserting of the content until data is loaded
-      // for the first time as soon as `now` is provided or changed, it will rerender
-      // with a new value if locale is changed, there is a preconfigured listener
-      // to rerender when new data is loaded all thanks to lit-html capabilities
-      const headerDate = this.msgLit('lit-html-example:headerDate');
-      const headerNumber = this.msgLit('lit-html-example:headerNumber');
-      const date = this.now ? this.msgLit('lit-html-example:date', { now: this.now }) : '';
-      const time = this.now ? this.msgLit('lit-html-example:time', { now: this.now }) : '';
-
-      // dateFormat
-      const options1 = {
-        weekday: 'long',
-        year: 'numeric',
-        month: 'long',
-        day: 'numeric',
-      };
-      options1.timeZone = 'UTC';
-      options1.timeZoneName = 'short';
-      const dateParse1 = parseDate('01-05-2012');
-      const dateParse2 = parseDate('12/05/2012');
-      const dateParse3 = parseDate('1-5-2017');
-      const dateFormat1 = formatDate(dateParse1, options1);
-      const dateFormat2 = formatDate(dateParse2, options1);
-      const dateFormat3 = formatDate(dateParse3, options1);
-      const dateFormat = getDateFormatBasedOnLocale();
-      const datum = new Date();
-      const options2 = {
-        weekday: 'long',
-        year: 'numeric',
-        month: 'long',
-        day: 'numeric',
-      };
-      options2.timeZone = 'UTC';
-      options2.timeZoneName = 'short';
-      options2.locale = 'ja-JP-u-ca-japanese';
-      const dateFormatted = formatDate(datum, options2);
-
-      // numberFormat
-      const number1 = formatNumber(123456.789, {
-        style: 'currency',
-        currency: 'EUR',
-        currencyDisplay: 'code',
-      });
-      const formatNumberToParts1 = formatNumberToParts(123456.789, {
-        style: 'currency',
-        currency: 'EUR',
-        currencyDisplay: 'code',
-      });
-      let printParts1 = '';
-      for (let i = 0; i < formatNumberToParts1.length; i += 1) {
-        printParts1 += `{ ${formatNumberToParts1[i].type}: ${formatNumberToParts1[i].value} }`;
-      }
-
-      const number2 = formatNumber(1234.5, { style: 'decimal' });
-      const formatNumberToParts2 = formatNumberToParts(1234.5, { style: 'decimal' });
-      let printParts2 = '';
-      for (let i = 0; i < formatNumberToParts2.length; i += 1) {
-        printParts2 += `{ ${formatNumberToParts2[i].type}: ${formatNumberToParts2[i].value} }`;
-      }
-
-      const number3 = formatNumber(-1234.5, {
-        style: 'currency',
-        currency: 'EUR',
-        currencyDisplay: 'code',
-      });
-      const formatNumberToParts3 = formatNumberToParts(-1234.5, {
-        style: 'currency',
-        currency: 'EUR',
-        currencyDisplay: 'code',
-      });
-      let printParts3 = '';
-      for (let i = 0; i < formatNumberToParts3.length; i += 1) {
-        printParts3 += `{ ${formatNumberToParts3[i].type}: ${formatNumberToParts3[i].value} }`;
-      }
-      const printGroupSeparator = getGroupSeparator();
-      const printDecimalSeparator = getDecimalSeparator();
-      return litHtml`
-          <h2>${headerDate}</h2>
-          <div>${date}</div>
-          <div>Order of date parts:      ${dateFormat}</div>
-          <div>Parsed date (01-05-2012): ${dateFormat1}</div>
-          <div>Parsed date (12/05/2012): ${dateFormat2}</div>
-          <div>Parsed date (1/5/2017)  : ${dateFormat3}</div>
-          <div>Japanese date:            ${dateFormatted}</div>
-          <div>${time}</div>
-          <h2>${headerNumber}</h2>
-          <div>${number1} ${printParts1}</div>
-          <div>${number2} ${printParts2}</div>
-          <div>${number3} ${printParts3}</div>
-          <div>getGroupSeparator(): "${printGroupSeparator}"</div>
-          <div>getDecimalSeparator(): "${printDecimalSeparator}"</div>
-        `;
-    }
-  }
-  if (!customElements.get('lit-html-example')) {
-    customElements.define('lit-html-example', LitHtmlExample);
-  }
-
-  return html`
-    <lit-html-example .now=${new Date()}></lit-html-example>
-    <button
-      @click=${() => {
-        localize.locale = 'en-GB';
-      }}
-    >
-      en-GB
-    </button>
-    <button
-      @click=${() => {
-        localize.locale = 'en-US';
-      }}
-    >
-      en-US
-    </button>
-    <button
-      @click=${() => {
-        localize.locale = 'en-AU';
-      }}
-    >
-      en-AU
-    </button>
-    <button
-      @click=${() => {
-        localize.locale = 'nl-NL';
-      }}
-    >
-      nl-NL
-    </button>
-    <button
-      @click=${() => {
-        localize.locale = 'nl-BE';
-      }}
-    >
-      nl-BE
-    </button>
-  `;
-});
-// .add('message', () => {
-//   const en = {
-//     bar: '[en] hello from bar',
-//     foo: '[en] hey there from foo',
-//   };
-//   const enGB = {
-//     ...en,
-//     foo: '[en-GB] hey there from foo',
-//   };
-//   try {
-//     localize.addData('en', 'demo', en);
-//     localize.addData('en-GB', 'demo', enGB);
-//   } catch (error) { /* demo will get executed multiple times */ }
-//
-//   return html`
-//     <p>try 'demo:bar' as well</p>
-//     <input type="text" value="demo:foo" id="keyInput">
-//
-//     <button @click=${() => console.log(localize.msg(keyInput.value))}>
-//       Translate to Action Logger
-//     </button>
-//     <br />
-//     <button @click=${() => { localize.locale = 'en'; }}>en</button>
-//     <button @click=${() => { localize.locale = 'en-GB'; }}>en-GB</button>
-//     <br /><br />
-//     <button @click=${() => console.log(localize.__storage)}>
-//       Log available Data to Action Logger
-//     </button>
-//   `;
+import './message.stories.js';
+import './number.stories.js';
+import './date.stories.js';
diff --git a/packages/localize/stories/message.stories.js b/packages/localize/stories/message.stories.js
new file mode 100644
index 000000000..44f821762
--- /dev/null
+++ b/packages/localize/stories/message.stories.js
@@ -0,0 +1,65 @@
+import { storiesOf, html } from '@open-wc/demoing-storybook';
+import { LionLitElement } from '@lion/core/src/LionLitElement.js';
+import { localize, LocalizeMixin } from '../index.js';
+
+storiesOf('Localize System|Message', module).add('locale', () => {
+  class messageExample extends LocalizeMixin(LionLitElement) {
+    static get localizeNamespaces() {
+      return [
+        { 'lit-html-example': locale => import(`./translations/${locale}.js`) },
+        ...super.localizeNamespaces,
+      ];
+    }
+
+    render() {
+      return html`
+        <div aria-live="polite">
+          <h1>${this.msgLit('lit-html-example:header', { locale: localize.locale })}</h1>
+          <p>${this.msgLit('lit-html-example:body')}</p>
+        </div>
+      `;
+    }
+  }
+  if (!customElements.get('message-example')) {
+    customElements.define('message-example', messageExample);
+  }
+
+  return html`
+    <button
+      @click=${() => {
+        localize.locale = 'en-GB';
+      }}
+    >
+      en-GB
+    </button>
+    <button
+      @click=${() => {
+        localize.locale = 'en-US';
+      }}
+    >
+      en-US
+    </button>
+    <button
+      @click=${() => {
+        localize.locale = 'en-AU';
+      }}
+    >
+      en-AU
+    </button>
+    <button
+      @click=${() => {
+        localize.locale = 'nl-NL';
+      }}
+    >
+      nl-NL
+    </button>
+    <button
+      @click=${() => {
+        localize.locale = 'nl-BE';
+      }}
+    >
+      nl-BE
+    </button>
+    <message-example></message-example>
+  `;
+});
diff --git a/packages/localize/stories/number.stories.js b/packages/localize/stories/number.stories.js
new file mode 100644
index 000000000..5858bea87
--- /dev/null
+++ b/packages/localize/stories/number.stories.js
@@ -0,0 +1,158 @@
+import { storiesOf, html } from '@open-wc/demoing-storybook';
+import { css } from '@lion/core';
+import { formatNumber, formatNumberToParts } from '../index.js';
+
+const formatNumberDemoStyle = css`
+  .demo-table {
+    border-collapse: collapse;
+    text-align: right;
+  }
+
+  .demo-table thead > tr {
+    border-bottom: 1px solid grey;
+  }
+
+  .demo-table thead > tr > :first-child,
+  .demo-table tbody > tr > :first-child,
+  .demo-table tfoot > tr > :first-child {
+    text-align: left;
+  }
+
+  .demo-table th,
+  .demo-table td {
+    padding: 8px;
+  }
+`;
+
+const value = 1234.56;
+
+storiesOf('Localize System|Number', module)
+  .add(
+    'formatNumber',
+    () => html`
+      <style>
+        ${formatNumberDemoStyle}
+      </style>
+      <p>Formatted value is ${value}</p>
+      <table class="demo-table">
+        <thead>
+          <tr>
+            <th>Options</th>
+            <th>Code</th>
+            <th>Output</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Default</td>
+            <td></td>
+            <td>${formatNumber(value)}</td>
+          </tr>
+          <tr>
+            <td>Currency symbol</td>
+            <td>
+              <code
+                >formatNumber({ style: 'currency', currencyDisplay: 'symbol', currency: 'EUR'
+                })</code
+              >
+            </td>
+            <td>
+              ${formatNumber(value, {
+                style: 'currency',
+                currencyDisplay: 'symbol',
+                currency: 'EUR',
+              })}
+            </td>
+          </tr>
+          <tr>
+            <td>Currency code</td>
+            <td>
+              <code
+                >formatNumber({ style: 'currency', currencyDisplay: 'code', currency: 'EUR' })</code
+              >
+            </td>
+            <td>
+              ${formatNumber(value, {
+                style: 'currency',
+                currencyDisplay: 'code',
+                currency: 'EUR',
+              })}
+            </td>
+          </tr>
+          <tr>
+            <td>Locale</td>
+            <td><code>formatNumber({ locale: 'nl-NL' })</code></td>
+            <td>${formatNumber(value, { locale: 'nl-NL' })}</td>
+          </tr>
+          <tr>
+            <td>No decimals</td>
+            <td>
+              <code>formatNumber({ minimumFractionDigits: 0, maximumFractionDigits: 0, })</code>
+            </td>
+            <td>
+              ${formatNumber(value, {
+                minimumFractionDigits: 0,
+                maximumFractionDigits: 0,
+              })}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    `,
+  )
+  .add(
+    'formatNumberToParts',
+    () => html`
+      <style>
+        ${formatNumberDemoStyle}
+      </style>
+      <p>Formatted value is ${value}</p>
+      <table class="demo-table">
+        <thead>
+          <tr>
+            <th>Part</th>
+            <th>Output</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${formatNumberToParts(value, { style: 'currency', currency: 'EUR' }).map(
+            part => html`
+              <tr>
+                <td>${part.type}</td>
+                <td>${part.value}</td>
+              </tr>
+            `,
+          )}
+        </tbody>
+      </table>
+    `,
+  )
+  .add(
+    'Common locales',
+    () => html`
+      <style>
+        ${formatNumberDemoStyle}
+      </style>
+      <p>Formatted value is ${value}</p>
+      <table class="demo-table">
+        <thead>
+          <tr>
+            <th>Locale</th>
+            <th>Output Euro</th>
+            <th>Output US Dollar</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${['en-GB', 'en-US', 'nl-NL', 'nl-BE', 'fr-FR', 'de-DE'].map(
+            locale => html`
+              <tr>
+                <td>${locale}</td>
+                <td>${formatNumber(value, { locale, style: 'currency', currency: 'EUR' })}</td>
+                <td>${formatNumber(value, { locale, style: 'currency', currency: 'USD' })}</td>
+              </tr>
+            `,
+          )}
+        </tbody>
+      </table>
+    `,
+  );
diff --git a/packages/localize/stories/translations/en-AU.js b/packages/localize/stories/translations/en-AU.js
index 0e19c3d57..9300e50da 100644
--- a/packages/localize/stories/translations/en-AU.js
+++ b/packages/localize/stories/translations/en-AU.js
@@ -2,6 +2,5 @@ import en from './en.js';
 
 export default {
   ...en,
-  headerDate: 'en-AU: Date & Time',
-  headerNumber: 'en-AU: Number formatting',
+  body: 'I am from Australia',
 };
diff --git a/packages/localize/stories/translations/en-GB.js b/packages/localize/stories/translations/en-GB.js
index 052832e93..261ddad38 100644
--- a/packages/localize/stories/translations/en-GB.js
+++ b/packages/localize/stories/translations/en-GB.js
@@ -2,6 +2,5 @@ import en from './en.js';
 
 export default {
   ...en,
-  headerDate: 'en-GB: Date & Time',
-  headerNumber: 'en-GB: Number formatting',
+  body: 'I am from England',
 };
diff --git a/packages/localize/stories/translations/en-US.js b/packages/localize/stories/translations/en-US.js
index 39ba5f94b..0caa1a031 100644
--- a/packages/localize/stories/translations/en-US.js
+++ b/packages/localize/stories/translations/en-US.js
@@ -2,6 +2,5 @@ import en from './en.js';
 
 export default {
   ...en,
-  headerDate: 'en-US: Date & Time',
-  headerNumber: 'en-US: Number formatting',
+  body: 'I am from the USA',
 };
diff --git a/packages/localize/stories/translations/en.js b/packages/localize/stories/translations/en.js
index 6246e1657..c1ec9eb55 100644
--- a/packages/localize/stories/translations/en.js
+++ b/packages/localize/stories/translations/en.js
@@ -1,6 +1,4 @@
 export default {
-  headerDate: 'en: Date & Time',
-  headerNumber: 'en: Number formatting',
-  date: 'Today is {now, date, full}.',
-  time: 'Time is {now, time, full}.',
+  header: '{ locale }: Localize message example',
+  body: 'I am English',
 };
diff --git a/packages/localize/stories/translations/nl-BE.js b/packages/localize/stories/translations/nl-BE.js
index ac8931873..2eb8bc771 100644
--- a/packages/localize/stories/translations/nl-BE.js
+++ b/packages/localize/stories/translations/nl-BE.js
@@ -2,6 +2,5 @@ import nl from './nl.js';
 
 export default {
   ...nl,
-  headerDate: 'nl-BE: Datum en tijd',
-  headerNumber: 'nl-BE: Nummer formatting',
+  body: 'Ik kom uit Belgie',
 };
diff --git a/packages/localize/stories/translations/nl-NL.js b/packages/localize/stories/translations/nl-NL.js
index 941bf999d..0969817f8 100644
--- a/packages/localize/stories/translations/nl-NL.js
+++ b/packages/localize/stories/translations/nl-NL.js
@@ -2,6 +2,5 @@ import nl from './nl.js';
 
 export default {
   ...nl,
-  headerDate: 'nl-NL: Datum en tijd',
-  headerNumber: 'nl-NL: Nummer formatting',
+  body: 'Ik kom uit Nederland',
 };
diff --git a/packages/localize/stories/translations/nl.js b/packages/localize/stories/translations/nl.js
index 595219dda..e2da5015d 100644
--- a/packages/localize/stories/translations/nl.js
+++ b/packages/localize/stories/translations/nl.js
@@ -1,6 +1,4 @@
 export default {
-  headerDate: 'nl: Datum en tijd',
-  headerNumber: 'nl: Nummer formatting',
-  date: 'Vandaag is {now, date, full}.',
-  time: 'Tijd is {now, time, full}.',
+  header: '{ locale }: Localize message voorbeeld',
+  body: 'Ik kom uit Nederland',
 };