repo: integrate packages from former merchant-backoffice.git

401 files changed, 64208 insertions, 0 deletions

diff --git a/packages/demobank-ui/.gitignore b/packages/demobank-ui/.gitignore
new file mode 100644
index 000000000..32d0a5057
--- /dev/null
+++ b/packages/demobank-ui/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+/build
+/*.log
+/size-plugin.json
+/storybook-static/
diff --git a/packages/demobank-ui/.storybook/.babelrc b/packages/demobank-ui/.storybook/.babelrc
new file mode 100644
index 000000000..610b6f339
--- /dev/null
+++ b/packages/demobank-ui/.storybook/.babelrc
@@ -0,0 +1,25 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+ /**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+{
+    "presets": [
+        "preact-cli/babel"
+    ]
+}
\ No newline at end of file
diff --git a/packages/demobank-ui/.storybook/main.js b/packages/demobank-ui/.storybook/main.js
new file mode 100644
index 000000000..f8e4bbcc7
--- /dev/null
+++ b/packages/demobank-ui/.storybook/main.js
@@ -0,0 +1,57 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/preset-scss",
+    "@storybook/addon-a11y",
+    "@storybook/addon-essentials" //docs, control, actions, viewpot, toolbar, background
+  ],
+  // sb does not yet support new jsx transform by default
+  // https://github.com/storybookjs/storybook/issues/12881
+  // https://github.com/storybookjs/storybook/issues/12952
+  babel: async (options) => ({
+    ...options,
+    presets: [
+      ...options.presets,
+      [
+        '@babel/preset-react', {
+          runtime: 'automatic',
+        },
+        'preset-react-jsx-transform' 
+      ],
+    ],
+  }),
+  webpackFinal: (config) => {
+    // should be removed after storybook 6.3
+    // https://github.com/storybookjs/storybook/issues/12853#issuecomment-821576113
+    config.resolve.alias = {
+      react: "preact/compat",
+      "react-dom": "preact/compat",
+    };
+    return config;
+  },
+}
\ No newline at end of file
diff --git a/packages/demobank-ui/.storybook/preview.js b/packages/demobank-ui/.storybook/preview.js
new file mode 100644
index 000000000..9ab4d9404
--- /dev/null
+++ b/packages/demobank-ui/.storybook/preview.js
@@ -0,0 +1,55 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import "../src/scss/main.scss"
+import { TranslationProvider } from '../src/context/translation'
+import { h } from 'preact';
+
+
+export const parameters = {
+  controls: { expanded: true },
+  options: {
+    storySort: (a, b) => {
+      return (a[1].args.order ?? 0) - (b[1].args.order ?? 0)
+      // return a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true })
+    }
+  },
+}
+
+export const globalTypes = {
+  locale: {
+    name: 'Locale',
+    description: 'Internationalization locale',
+    defaultValue: 'en',
+    toolbar: {
+      icon: 'globe',
+      items: [
+        { value: 'en', right: '🇺🇸', title: 'English' },
+        { value: 'es', right: '🇪🇸', title: 'Spanish' },
+      ],
+    },
+  },
+};
+
+export const decorators = [
+  (Story, { globals }) => {
+    document.body.parentElement.classList = "has-aside-left has-aside-mobile-transition has-navbar-fixed-top has-aside-expanded"
+    return <Story />
+  },
+  (Story, { globals }) => <TranslationProvider initial='en' forceLang={globals.locale}>
+    <Story />
+  </TranslationProvider>,
+];
diff --git a/packages/demobank-ui/README.md b/packages/demobank-ui/README.md
new file mode 100644
index 000000000..c014929ce
--- /dev/null
+++ b/packages/demobank-ui/README.md
@@ -0,0 +1,19 @@
+# bank web
+
+## CLI Commands
+
+- `npm install`: Installs dependencies
+
+- `npm run dev`: Run a development, HMR server
+
+- `npm run serve`: Run a production-like server
+
+- `npm run build`: Production-ready build
+
+- `npm run lint`: Pass TypeScript files using ESLint
+
+- `npm run test`: Run Jest and Enzyme with
+  [`enzyme-adapter-preact-pure`](https://github.com/preactjs/enzyme-adapter-preact-pure) for
+  your tests
+
+For detailed explanation on how things work, checkout the [CLI Readme](https://github.com/developit/preact-cli/blob/master/README.md).
diff --git a/packages/demobank-ui/TODO b/packages/demobank-ui/TODO
new file mode 100644
index 000000000..a399ada58
--- /dev/null
+++ b/packages/demobank-ui/TODO
@@ -0,0 +1,45 @@
+Urgent TODOs:
+
+- General:
+  * not only Nora dark-theme, but default light! (CSS)
+  * auto-focus on input fields is not working well
+  * buttons should be visibly insensitive
+    as long as required input fields are not
+    working
+  * next required invalid/missing input field is
+    not properly highlighted in red
+  * Logout button needs more padding to the right (CSS)
+
+- Error bar:
+  * shows JSON, should only show good error message
+    and numeric code, not JSON syntax
+  * should auto-hide after next action, no need for
+    "clear"!
+  * need variant "status bar" in green (or blue)
+    which shows status of last operation
+
+* H1-Titles:
+  * Center more (currently way on the left) (CSS)
+
+- Assets:
+  * Numeric amount needs to be shown MUCH bigger (CSS)
+  * Center more? (CSS)
+
+- Payments:
+  * Amount to withdraw currently shown in white-on-white (CSS)
+  * Big frame drawn around notebook-tabs is not nice (CSS)
+  * Center more? (CSS)
+  * "Wire to bank account"
+    - maybe split two types (payto and IBAN) into
+      two tabs?
+    - currently cannot switch back from payto to IBAN
+
+- Withdraw:
+  * Should use new 'status' bar at the end, instead
+    of extra dialog with "close" button
+  * ditto for bank-wire-transfer final stage
+
+- Footer:
+  * overlaps with transaction history or other
+    content, needs to consistently show at the
+    end! => change rendering logic!? (CSS?)
diff --git a/packages/demobank-ui/build-bank-translations.sh b/packages/demobank-ui/build-bank-translations.sh
new file mode 100755
index 000000000..85c8ad0c1
--- /dev/null
+++ b/packages/demobank-ui/build-bank-translations.sh
@@ -0,0 +1,32 @@
+#!/bin/bash
+
+set -eu
+
+# NOTE: the <Translate> node somehow didn't get
+# the strings extracted.  Only i18n`` did
+
+function build {
+  POTGEN=node_modules/@gnu-taler/pogen/bin/pogen
+  PACKAGE_NAME=$1
+
+  find src/ \( -type f -name "*.ts" -or -name "*.tsx" \) ! -name "*.d.ts" \
+      | xargs node $POTGEN \
+      | msguniq \
+      | msgmerge src/i18n/poheader - \
+      > src/i18n/$PACKAGE_NAME.pot
+  
+  # merge existing translations: fails when NO .po-files were found.
+  for pofile in $(ls src/i18n/*.po 2> /dev/null || true); do 
+    echo merging $pofile; 
+    msgmerge -o $pofile $pofile src/i18n/$PACKAGE_NAME.pot; 
+  done;
+  
+  # generate .ts file containing all translations
+  cat src/i18n/strings-prelude > src/i18n/strings.ts
+  for pofile in $(ls src/i18n/*.po 2> /dev/null || true); do \
+    echo appending $pofile; \
+    ./contrib/po2ts $pofile >> src/i18n/strings.ts; \
+  done; 
+}
+
+build bank
diff --git a/packages/demobank-ui/contrib/po2ts b/packages/demobank-ui/contrib/po2ts
new file mode 100755
index 000000000..a135da61b
--- /dev/null
+++ b/packages/demobank-ui/contrib/po2ts
@@ -0,0 +1,42 @@
+#!/usr/bin/env node
+/*
+ This file is part of GNU Taler
+ (C) 2020 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ * Convert a <lang>.po file into a JavaScript / TypeScript expression.
+ */
+
+const po2json = require("po2json");
+
+const filename = process.argv[2];
+
+if (!filename) {
+  console.error("error: missing filename");
+  process.exit(1);
+}
+
+const m = filename.match(/([a-zA-Z0-9-_]+).po/);
+
+if (!m) {
+  console.error("error: unexpected filename (expected <lang>.po)");
+  process.exit(1);
+}
+
+const lang = m[1];
+const pojson = po2json.parseFileSync(filename, { format: "jed1.x", fuzzy: true });
+const s =
+  "strings['" + lang + "'] = " + JSON.stringify(pojson, null, "  ") + ";\n";
+console.log(s);
diff --git a/packages/demobank-ui/mocks/json-server/db.json b/packages/demobank-ui/mocks/json-server/db.json
new file mode 100644
index 000000000..44d3ccab2
--- /dev/null
+++ b/packages/demobank-ui/mocks/json-server/db.json
@@ -0,0 +1,4 @@
+{
+  "register": {},
+  "transactions": {}
+}
diff --git a/packages/demobank-ui/mocks/window.js b/packages/demobank-ui/mocks/window.js
new file mode 100644
index 000000000..f396ff9e3
--- /dev/null
+++ b/packages/demobank-ui/mocks/window.js
@@ -0,0 +1,27 @@
+Object.defineProperty(window, 'requestAnimationFrame', {
+  value: function(cb) {} // Silence the browser.
+})
+
+Object.defineProperty(window, 'localStorage', {
+  value: {
+    store: {},
+    getItem: function(key) {
+      return this.store[key];
+    },
+    setItem: function(key, value) {
+      return this.store[key] = value;
+    },
+    clear: function() {
+      this.store = {};
+    }
+  }
+});
+Object.defineProperty(window, 'location', {
+  value: {
+    origin: "http://localhost:8080", /* where taler-local rev proxy listens to */
+    search: "",
+    pathname: "/sandbox/demobanks/default",
+  }
+})
+
+export default window;
diff --git a/packages/demobank-ui/package.json b/packages/demobank-ui/package.json
new file mode 100644
index 000000000..bd686365b
--- /dev/null
+++ b/packages/demobank-ui/package.json
@@ -0,0 +1,100 @@
+{
+  "private": true,
+  "name": "bank",
+  "version": "0.1.0",
+  "license": "AGPL-3.0-OR-LATER",
+  "scripts": {
+    "dev": "preact watch --port ${PORT:=9090} --no-sw --no-esm -c preact.mock.js",
+    "build": "preact build --no-sw --no-esm -c preact.single-config.js --dest build && sh remove-link-stylesheet.sh",
+    "serve": "sirv build --port ${PORT:=8080} --cors --single",
+    "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
+    "test": "jest ./tests",
+    "build-storybook": "build-storybook",
+    "serve-single": "sirv single --port ${PORT:=8080} --cors --single",
+    "pretty": "prettier --write src",
+    "storybook": "start-storybook -p 6006"
+  },
+  "eslintConfig": {
+    "parser": "@typescript-eslint/parser",
+    "extends": [
+      "preact",
+      "plugin:@typescript-eslint/recommended"
+    ],
+    "ignorePatterns": [
+      "build/"
+    ],
+    "rules": {
+      "@typescript-eslint/no-explicit-any": [0],
+      "@typescript-eslint/ban-ts-comment": [1],
+      "quotes": [2, "single", {"allowTemplateLiterals": true,"avoidEscape": false}],
+      "indent": [2,2],
+      "prefer-arrow-callback": [2, {"allowNamedFunctions": false, "allowUnboundThis": true}],
+      "curly": [2,"multi"],
+      "prefer-template": [1]
+    }
+  },
+  "dependencies": {
+    "base64-inline-loader": "1.1.1",
+    "date-fns": "2.25.0",
+    "jed": "1.1.1",
+    "preact": "^10.5.15",
+    "preact-render-to-string": "^5.1.19",
+    "preact-router": "^3.2.1",
+    "qrcode-generator": "^1.4.4",
+    "swr": "1.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.13.16",
+    "@babel/plugin-transform-react-jsx": "^7.12.13",
+    "@babel/plugin-transform-react-jsx-source": "^7.12.13",
+    "@babel/preset-env": "^7.16.7",
+    "@creativebulma/bulma-tooltip": "^1.2.0",
+    "@gnu-taler/pogen": "^0.0.5",
+    "@storybook/addon-a11y": "6.2.9",
+    "@storybook/addon-actions": "6.2.9",
+    "@storybook/addon-essentials": "6.2.9",
+    "@storybook/addon-links": "6.2.9",
+    "@storybook/preact": "6.2.9",
+    "@storybook/preset-scss": "^1.0.3",
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/preact": "^2.0.1",
+    "@testing-library/preact-hooks": "^1.1.0",
+    "@types/enzyme": "^3.10.10",
+    "@types/jest": "^27.0.2",
+    "@typescript-eslint/eslint-plugin": "^5.3.0",
+    "@typescript-eslint/parser": "^5.3.0",
+    "babel-loader": "^8.2.2",
+    "base64-inline-loader": "^1.1.1",
+    "bulma": "^0.9.3",
+    "bulma-checkbox": "^1.1.1",
+    "bulma-radio": "^1.1.1",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-preact-pure": "^3.2.0",
+    "eslint": "^8.1.0",
+    "eslint-config-preact": "^1.2.0",
+    "html-webpack-inline-chunk-plugin": "^1.1.1",
+    "html-webpack-inline-source-plugin": "0.0.10",
+    "html-webpack-skip-assets-plugin": "^1.0.1",
+    "inline-chunk-html-plugin": "^1.1.1",
+    "jest": "^27.3.1",
+    "jest-fetch-mock": "^3.0.3",
+    "jest-preset-preact": "^4.0.5",
+    "jest-watch-typeahead": "^1.0.0",
+    "jest-environment-jsdom": "^27.4.6",
+    "jssha": "^3.2.0",
+    "po2json": "^0.4.5",
+    "preact-cli": "3.0.5",
+    "sass": "1.32.13",
+    "sass-loader": "^10",
+    "script-ext-html-webpack-plugin": "^2.1.5",
+    "sirv-cli": "^1.0.14",
+    "typescript": "^4.4.4"
+  },
+  "jest": {
+    "preset": "jest-preset-preact",
+    "setupFiles": [
+      "<rootDir>/tests/__mocks__/browserMocks.ts",
+      "<rootDir>/tests/__mocks__/setupTests.ts"
+    ]
+  }
+}
diff --git a/packages/demobank-ui/preact.config.js b/packages/demobank-ui/preact.config.js
new file mode 100644
index 000000000..8e640f3ff
--- /dev/null
+++ b/packages/demobank-ui/preact.config.js
@@ -0,0 +1,70 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { DefinePlugin } from 'webpack';
+
+import pack from './package.json';
+import * as cp from 'child_process';
+
+const commitHash = cp.execSync('git rev-parse --short HEAD').toString();
+
+export default {
+  webpack(config, env, helpers) {
+    // ensure that process.env will not be undefined on runtime
+    config.node.process = 'mock'
+
+    // add __VERSION__ to be use in the html
+    config.plugins.push(
+      new DefinePlugin({
+        'process.env.__VERSION__': JSON.stringify(env.isProd ? pack.version : `dev-${commitHash}`) ,
+      }),
+    );
+
+    // suddenly getting out of memory error from build process, error below [1]
+    // FIXME: remove preact-cli, use rollup
+    let { index } = helpers.getPluginsByName(config, 'WebpackFixStyleOnlyEntriesPlugin')[0]
+    config.plugins.splice(index, 1)   
+  }
+}
+
+
+
+/* [1] from this error decided to remove plugin 'webpack-fix-style-only-entries
+   leaving this error for future reference
+
+
+<--- Last few GCs --->
+
+[32479:0x2e01870]    19969 ms: Mark-sweep 1869.4 (1950.2) -> 1443.1 (1504.1) MB, 497.5 / 0.0 ms  (average mu = 0.631, current mu = 0.455) allocation failure scavenge might not succeed
+[32479:0x2e01870]    21907 ms: Mark-sweep 2016.9 (2077.9) -> 1628.6 (1681.4) MB, 1596.0 / 0.0 ms  (average mu = 0.354, current mu = 0.176) allocation failure scavenge might not succeed
+
+<--- JS stacktrace --->
+
+==== JS stack trace =========================================
+
+    0: ExitFrame [pc: 0x13cf099]
+Security context: 0x2f4ca66c08d1 <JSObject>
+    1: /* anonymous * / [0x35d05555b4b9] [...path/merchant-backoffice/node_modules/.pnpm/webpack-fix-style-only-entries@0.5.2/node_modules/webpack-fix-style-only-entries/index.js:~80] [pc=0x2145e699d1a4](this=0x1149465410e9 <GlobalObject Object map = 0xff481b5b5f9>,0x047e52e36a49 <Dependency map = 0x1ed1fe41cd19>)
+    2: arguments adaptor frame: 3...
+
+FATAL ERROR: invalid array length Allocation failed - JavaScript heap out of memory
+ 
+*/
\ No newline at end of file
diff --git a/packages/demobank-ui/preact.mock.js b/packages/demobank-ui/preact.mock.js
new file mode 100644
index 000000000..dc3ceb66d
--- /dev/null
+++ b/packages/demobank-ui/preact.mock.js
@@ -0,0 +1,55 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { DefinePlugin, ProvidePlugin } from 'webpack';
+
+import pack from './package.json';
+import * as cp from 'child_process';
+
+const commitHash = cp.execSync('git rev-parse --short HEAD').toString();
+import path from 'path';
+
+export default {
+  webpack(config, env, helpers) {
+    // Ensure that process.env will not be undefined at runtime.
+    config.node.process = 'mock'
+    let DEMO_SITES = {
+      "Blog": process.env.TALER_ENV_URL_MERCHANT_BLOG,
+      "Donations": process.env.TALER_ENV_URL_MERCHANT_DONATIONS,
+      "Survey": process.env.TALER_ENV_URL_MERCHANT_SURVEY,
+      "Landing": process.env.TALER_ENV_URL_INTRO,
+      "Bank": process.env.TALER_ENV_URL_BANK,
+    }
+    console.log("demo links found", DEMO_SITES);
+    // Add __VERSION__ to be use in the html.
+    config.plugins.push(
+      new DefinePlugin({
+        'process.env.__VERSION__': JSON.stringify(env.isProd ? pack.version : `dev-${commitHash}`) ,
+      }),
+      // 'window' gets mocked to point at a running euFin instance.
+      new ProvidePlugin({window: path.resolve("mocks/window")}),
+      new DefinePlugin({"DEMO_SITES": JSON.stringify(DEMO_SITES)})
+    );
+
+    let { index } = helpers.getPluginsByName(config, 'WebpackFixStyleOnlyEntriesPlugin')[0]
+    config.plugins.splice(index, 1)   
+  }
+}
diff --git a/packages/demobank-ui/preact.single-config.js b/packages/demobank-ui/preact.single-config.js
new file mode 100644
index 000000000..0fb6f1d0e
--- /dev/null
+++ b/packages/demobank-ui/preact.single-config.js
@@ -0,0 +1,60 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import defaultConfig from './preact.config'
+
+export default {
+  webpack(config, env, helpers, options) {
+    defaultConfig.webpack(config, env, helpers, options)
+
+    //1. check no file is under /routers or /component/{routers,async} to prevent async components
+    // https://github.com/preactjs/preact-cli#route-based-code-splitting
+
+    //2. remove devtools to prevent sourcemaps
+    config.devtool = false
+
+    //3. change assetLoader to load assets inline
+    const loaders = helpers.getLoaders(config)
+    const assetsLoader = loaders.find(lo => lo.rule.test.test('something.woff'))
+    if (assetsLoader) {
+      assetsLoader.rule.use = 'base64-inline-loader'
+      assetsLoader.rule.loader = undefined
+    }
+
+    //4. remove critters
+    //critters remove the css bundle from htmlWebpackPlugin.files.css
+    //for now, pushing all the content into the html is enough
+    const crittersWrapper = helpers.getPluginsByName(config, 'Critters')
+    if (crittersWrapper && crittersWrapper.length > 0) {
+      const [{ index }] = crittersWrapper
+      config.plugins.splice(index, 1)
+    }
+
+    //5. remove favicon from src/assets
+
+    //6. remove performance hints since we now that this is going to be big
+    if (config.performance) {
+      config.performance.hints = false
+    }
+
+    //7. template.html should have a favicon and add js/css content
+  }
+}
diff --git a/packages/demobank-ui/remove-link-stylesheet.sh b/packages/demobank-ui/remove-link-stylesheet.sh
new file mode 100755
index 000000000..d3376b8e6
--- /dev/null
+++ b/packages/demobank-ui/remove-link-stylesheet.sh
@@ -0,0 +1,8 @@
+# This script has been placed in the public domain.
+
+FILE=$(ls build/bundle.*.css)
+BUNDLE=${FILE#build}
+grep -q '<link href="'$BUNDLE'" rel="stylesheet">' build/index.html || { echo bundle $BUNDLE not found in index.html; exit 1; }
+echo -n Removing link from index.html ...
+sed 's_<link href="'$BUNDLE'" rel="stylesheet">__' -i build/index.html
+echo done
diff --git a/packages/demobank-ui/src/.babelrc b/packages/demobank-ui/src/.babelrc
new file mode 100644
index 000000000..05f4dcc81
--- /dev/null
+++ b/packages/demobank-ui/src/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["preact-cli/babel"]
+}
diff --git a/packages/demobank-ui/src/assets/empty.png b/packages/demobank-ui/src/assets/empty.png
new file mode 100644
index 000000000..5120d3138
--- /dev/null
+++ b/packages/demobank-ui/src/assets/empty.png
diff --git a/packages/demobank-ui/src/assets/example/id1.jpg b/packages/demobank-ui/src/assets/example/id1.jpg
new file mode 100644
index 000000000..5d022a379
--- /dev/null
+++ b/packages/demobank-ui/src/assets/example/id1.jpg
diff --git a/packages/demobank-ui/src/assets/favicon.ico b/packages/demobank-ui/src/assets/favicon.ico
new file mode 100644
index 000000000..07419145b
--- /dev/null
+++ b/packages/demobank-ui/src/assets/favicon.ico
diff --git a/packages/demobank-ui/src/assets/icons/android-chrome-192x192.png b/packages/demobank-ui/src/assets/icons/android-chrome-192x192.png
new file mode 100644
index 000000000..93ebe2e2c
--- /dev/null
+++ b/packages/demobank-ui/src/assets/icons/android-chrome-192x192.png
diff --git a/packages/demobank-ui/src/assets/icons/android-chrome-512x512.png b/packages/demobank-ui/src/assets/icons/android-chrome-512x512.png
new file mode 100644
index 000000000..52d1623ea
--- /dev/null
+++ b/packages/demobank-ui/src/assets/icons/android-chrome-512x512.png
diff --git a/packages/demobank-ui/src/assets/icons/apple-touch-icon.png b/packages/demobank-ui/src/assets/icons/apple-touch-icon.png
new file mode 100644
index 000000000..254e4bb4d
--- /dev/null
+++ b/packages/demobank-ui/src/assets/icons/apple-touch-icon.png
diff --git a/packages/demobank-ui/src/assets/icons/auth_method/email.svg b/packages/demobank-ui/src/assets/icons/auth_method/email.svg
new file mode 100644
index 000000000..3e44b8779
--- /dev/null
+++ b/packages/demobank-ui/src/assets/icons/auth_method/email.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6zm-2 0l-8 5-8-5h16zm0 12H4V8l8 5 8-5v10z"/></svg>
\ No newline at end of file
diff --git a/packages/demobank-ui/src/assets/icons/auth_method/postal.svg b/packages/demobank-ui/src/assets/icons/auth_method/postal.svg
new file mode 100644
index 000000000..3787b8350
--- /dev/null
+++ b/packages/demobank-ui/src/assets/icons/auth_method/postal.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M17 15h2v2h-2zM17 11h2v2h-2zM17 7h2v2h-2zM13.74 7l1.26.84V7z"/><path d="M10 3v1.51l2 1.33V5h9v14h-4v2h6V3z"/><path d="M8.17 5.7L15 10.25V21H1V10.48L8.17 5.7zM10 19h3v-7.84L8.17 8.09 3 11.38V19h3v-6h4v6z"/></svg>
\ No newline at end of file
diff --git a/packages/demobank-ui/src/assets/icons/auth_method/question.svg b/packages/demobank-ui/src/assets/icons/auth_method/question.svg
new file mode 100644
index 000000000..a346556b2
--- /dev/null
+++ b/packages/demobank-ui/src/assets/icons/auth_method/question.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11 23.59v-3.6c-5.01-.26-9-4.42-9-9.49C2 5.26 6.26 1 11.5 1S21 5.26 21 10.5c0 4.95-3.44 9.93-8.57 12.4l-1.43.69zM11.5 3C7.36 3 4 6.36 4 10.5S7.36 18 11.5 18H13v2.3c3.64-2.3 6-6.08 6-9.8C19 6.36 15.64 3 11.5 3zm-1 11.5h2v2h-2zm2-1.5h-2c0-3.25 3-3 3-5 0-1.1-.9-2-2-2s-2 .9-2 2h-2c0-2.21 1.79-4 4-4s4 1.79 4 4c0 2.5-3 2.75-3 5z"/></svg>
\ No newline at end of file
diff --git a/packages/demobank-ui/src/assets/icons/auth_method/sms.svg b/packages/demobank-ui/src/assets/icons/auth_method/sms.svg
new file mode 100644
index 000000000..ed15679bf
--- /dev/null
+++ b/packages/demobank-ui/src/assets/icons/auth_method/sms.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M17 1.01L7 1c-1.1 0-1.99.9-1.99 2v18c0 1.1.89 2 1.99 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z"/></svg>
\ No newline at end of file
diff --git a/packages/demobank-ui/src/assets/icons/auth_method/video.svg b/packages/demobank-ui/src/assets/icons/auth_method/video.svg
new file mode 100644
index 000000000..69de5e0b4
--- /dev/null
+++ b/packages/demobank-ui/src/assets/icons/auth_method/video.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M18,10.48V6c0-1.1-0.9-2-2-2H4C2.9,4,2,4.9,2,6v12c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-4.48l4,3.98v-11L18,10.48z M16,9.69V18H4V6h12V9.69z"/><circle cx="10" cy="10" r="2"/><path d="M14,15.43c0-0.81-0.48-1.53-1.22-1.85C11.93,13.21,10.99,13,10,13c-0.99,0-1.93,0.21-2.78,0.58C6.48,13.9,6,14.62,6,15.43 V16h8V15.43z"/></g></g></svg>
\ No newline at end of file
diff --git a/packages/demobank-ui/src/assets/icons/favicon-16x16.png b/packages/demobank-ui/src/assets/icons/favicon-16x16.png
new file mode 100644
index 000000000..e81177dcb
--- /dev/null
+++ b/packages/demobank-ui/src/assets/icons/favicon-16x16.png
diff --git a/packages/demobank-ui/src/assets/icons/favicon-32x32.png b/packages/demobank-ui/src/assets/icons/favicon-32x32.png
new file mode 100644
index 000000000..40e9b5b47
--- /dev/null
+++ b/packages/demobank-ui/src/assets/icons/favicon-32x32.png
diff --git a/packages/demobank-ui/src/assets/icons/languageicon.svg b/packages/demobank-ui/src/assets/icons/languageicon.svg
new file mode 100644
index 000000000..22d58da65
--- /dev/null
+++ b/packages/demobank-ui/src/assets/icons/languageicon.svg
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>

+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

+	 viewBox="0 0 2411.2 2794" style="enable-background:new 0 0 2411.2 2794;" xml:space="preserve">

+<style type="text/css">

+	.st0{fill:#FFFFFF;}

+	.st1{fill-rule:evenodd;clip-rule:evenodd;}

+	.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}

+</style>

+<g id="Layer_2">

+</g>

+<g id="Layer_x5F_1_x5F_1">

+	<g>

+		<polygon points="1204.6,359.2 271.8,30 271.8,2060.1 1204.6,1758.3 		"/>

+		<polygon class="st0" points="1182.2,358.1 2150.6,29 2150.6,2059 1182.2,1757.3 		"/>

+		<polygon class="st0" points="30,2415.4 1182.2,2031.4 1182.2,357.9 30,742 		"/>

+		<polygon points="1707.2,2440.7 1870.5,2709.4 1956.6,2459.8 		"/>

+		<g>

+			<path d="M421.7,934.8c-6.1-6,8,49.1,27.6,68.9c34.8,35.1,61.9,39.6,76.4,40.2c32,1.3,71.5-8,94.9-17.8

+				c22.7-9.7,62.4-30,77.5-59.6c3.2-6.3,11.9-17,6.4-43.2c-4.2-20.2-17-27.3-32.7-26.2c-15.7,1.1-63.2,13.7-86.1,20.8

+				c-23,7-70.3,21.4-90.9,25.8C474.3,948.2,429,941.7,421.7,934.8z"/>

+			<path d="M1003.1,1593.7c-9.1-3.3-196.9-81.1-223.6-93.9c-21.8-10.5-75.2-33.1-100.4-43.3c70.8-109.2,115.5-191.6,121.5-204.1

+				c11-23,86-169.6,87.7-178.7c1.7-9.1,3.8-42.9,2.2-51c-1.7-8.2-29.1,7.6-66.4,20.2c-37.4,12.6-108.4,58.8-135.8,64.6

+				c-27.5,5.7-115.5,39.1-160.5,54c-45,14.9-130.2,40.9-165.2,50.4c-35.1,9.5-65.7,10.2-85.3,16.2c0,0,2.6,27.5,7.8,35.7

+				c5.2,8.2,23.7,28.4,45.3,34.1c21.6,5.7,57.3,3.4,73.6-0.3c16.3-3.8,44.4-17.5,48.2-23.6c3.8-6.1-2-24.9,4.5-30.6

+				c6.5-5.6,92.2-25.7,124.6-35.4c32.4-10,156.3-52.6,173.1-50.5c-5.3,17.7-105,215.1-137.1,274c-32.1,58.9-218.6,318-258.3,363.6

+				c-30.1,34.7-103.2,123.5-128.5,143.6c6.4,1.8,51.6-2.1,59.9-7.2c51.3-31.6,136.9-138.1,164.4-170.5

+				c81.9-96,153.8-196.8,210.8-283.4h0.1c11.1,4.6,100.9,77.8,124.4,94c23.4,16.2,115.9,67.8,136,76.4c20,8.7,97.1,44.2,100.3,32.2

+				C1029.4,1668,1012.2,1597.1,1003.1,1593.7z"/>

+		</g>

+		<path class="st1" d="M569,2572c18,11,35,20,54,29c38,19,81,39,122,54c56,21,112,38,168,51c31,7,65,13,98,18c3,0,92,11,110,11h90

+			c35-3,68-5,103-10c28-4,59-9,89-16c22-5,45-10,67-17c21-6,45-14,68-22c15-5,31-12,47-18c13-6,29-13,44-19c18-8,39-19,59-29

+			c16-8,34-18,51-28c13-7,43-30,59-30c18,0,30,16,30,30c0,29-39,38-57,51c-19,13-42,23-62,34c-40,21-81,39-120,54

+			c-51,19-107,37-157,49c-19,4-38,9-57,12c-10,2-114,18-143,18h-132c-35-3-72-7-107-12c-31-5-64-11-95-18c-24-5-50-12-73-19

+			c-40-11-79-25-117-40c-69-26-141-60-209-105c-12-8-13-16-13-25c0-15,11-29,29-29C531,2546,563,2569,569,2572z"/>

+		<path class="st1" d="M1151,2009L61,2372V764l1090-363V2009z M1212,354v1680c-1,5-3,10-7,15c-2,3-6,7-9,8c-25,10-1151,388-1166,388

+			c-12,0-23-8-29-21c0-1-1-2-1-4V739c2-5,3-12,7-16c8-11,22-13,31-16c17-6,1126-378,1142-378C1190,329,1212,336,1212,354z"/>

+		<path class="st1" d="M2120,2017l-907-282V380l907-308V2017z M2181,32v2023c-1,23-17,33-32,33c-13,0-107-32-123-37

+			c-126-39-253-78-378-117c-28-9-57-18-84-27c-24-7-50-15-74-23c-107-33-216-66-323-102c-4-1-14-15-14-18V351c2-5,4-11,9-15

+			c8-9,351-123,486-168c36-13,487-168,501-168C2167,0,2181,13,2181,32z"/>

+		<polygon points="2411.2,2440.7 1199.5,2054.5 1204.6,373.2 2411.2,757.2 		"/>

+		<g>

+			<path class="st2" d="M1800.3,1124.6L1681.4,1412l218.6,66.3L1800.3,1124.6z M1729,853.2l156.1,47.3l284.4,1025l-160.3-48.7

+				l-57.6-210.4L1620.2,1566l-71.3,171.4l-160.4-48.7L1729,853.2z"/>

+		</g>

+	</g>

+</g>

+</svg>

diff --git a/packages/demobank-ui/src/assets/icons/mstile-150x150.png b/packages/demobank-ui/src/assets/icons/mstile-150x150.png
new file mode 100644
index 000000000..9cfb889be
--- /dev/null
+++ b/packages/demobank-ui/src/assets/icons/mstile-150x150.png
diff --git a/packages/demobank-ui/src/assets/logo-white.svg b/packages/demobank-ui/src/assets/logo-white.svg
new file mode 100644
index 000000000..cb1f023c5
--- /dev/null
+++ b/packages/demobank-ui/src/assets/logo-white.svg
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="670"
+   height="300"
+   viewBox="0 0 201 90"
+   version="1.1"
+   id="svg8">
+  <g
+     id="logo">
+    <g
+       id="circles"
+       style="fill:#FFF;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.327943">
+      <path
+         d="m 86.662153,1.1211936 c 15.589697,0 29.129227,9.4011664 35.961027,23.2018054 h -5.81736 C 110.4866,13.623304 99.349002,6.5180852 86.662153,6.5180852 c -19.690571,0 -35.652876,17.1120008 -35.652876,38.2205688 0,10.331797 3.825597,19.704678 10.03957,26.582945 -1.342357,1.120912 -2.771532,2.127905 -4.275488,3.006754 C 50.071485,66.553412 45.974857,56.15992 45.974857,44.738654 c 0,-24.089211 18.216325,-43.6174604 40.687296,-43.6174604 z M 122.51416,65.375898 c -6.86645,13.680134 -20.34561,22.980218 -35.852007,22.980218 -1.052702,0 -2.096093,-0.04291 -3.128683,-0.127026 3.052192,-1.561167 5.913582,-3.480387 8.538307,-5.707305 10.320963,-1.684389 19.185983,-8.113638 24.601813,-17.145887 z"
+         id="path2350" />
+      <path
+         d="m 64.212372,1.1211936 c 1.052607,0 2.095998,0.042919 3.128684,0.1270583 C 64.288864,2.8094199 61.427378,4.728606 58.802653,6.9555572 41.679542,9.7498571 28.559494,25.601563 28.559494,44.738654 c 0,14.264563 7.29059,26.702023 18.093843,33.268925 -1.593656,0.26719 -3.226966,0.406948 -4.890748,0.406948 -1.239545,0 -2.46151,-0.07952 -3.663522,-0.229364 C 29.191129,70.184015 23.525076,58.171633 23.525076,44.738654 23.525076,20.649443 41.7414,1.1211936 64.212372,1.1211936 Z M 69.62209,82.521785 C 79.943207,80.837396 88.808164,74.407841 94.224059,65.375422 h 5.840511 c -6.866354,13.680305 -20.345548,22.980694 -35.852198,22.980694 -1.052703,0 -2.095999,-0.04291 -3.128684,-0.127026 3.052002,-1.561371 5.913836,-3.480218 8.538402,-5.707305 z M 94.355885,24.322999 c -3.13939,-5.314721 -7.467551,-9.74275 -12.584511,-12.853269 1.593656,-0.26719 3.226904,-0.406948 4.890779,-0.406948 1.239451,0 2.461512,0.07952 3.663524,0.229364 4.016018,3.607242 7.373195,8.030111 9.849053,13.030853 z"
+         id="path2352" />
+      <path
+         d="m 41.762589,1.1211936 c 1.064296,0 2.118804,0.044379 3.162607,0.1302161 -3.046523,1.558961 -5.903162,3.4745139 -8.52358,5.6968133 C 19.254624,9.7205882 6.1097128,25.583465 6.1097128,44.738654 c 0,21.108568 15.9624012,38.22057 35.6528762,38.22057 12.599746,0 23.672446,-7.007056 30.013748,-17.583802 h 5.838515 C 70.748498,79.055727 57.26924,88.356116 41.762589,88.356116 c -22.470907,0 -40.6871998,-19.52825 -40.6871998,-43.617462 0,-24.089211 18.2162928,-43.6174604 40.6871998,-43.6174604 z M 71.905375,24.322999 c -1.31192,-2.220567 -2.830984,-4.287049 -4.528877,-6.166508 1.342452,-1.120945 2.771374,-2.128381 4.275139,-3.00723 2.372984,2.753011 4.418875,5.834636 6.072489,9.173738 z"
+         id="path2354" />
+    </g>
+    <g
+       id="letters"
+       style="fill:#FFF">
+      <path
+         d="m 76.135411,34.409066 h 9.161042 V 29.36588 H 61.857537 v 5.043186 h 9.161137 v 25.92317 h 5.116737 z"
+         id="path2346" />
+      <path
+         d="m 92.647571,52.856334 h 13.659009 l 2.93009,7.476072 h 5.36461 L 101.89122,29.144903 H 97.187186 L 84.477089,60.332406 h 5.199533 z m 11.802109,-4.822276 h -9.944771 l 4.951718,-12.386462 z"
+         id="path2362" />
+      <path
+         d="m 123.80641,29.366084 h -4.58038 v 30.966322 h 20.54728 v -4.910253 c -5.32227,0 -10.64463,0 -15.9669,0 z"
+         id="path2356" />
+      <path
+         d="m 166.4722,29.366084 h -21.37564 v 30.966322 h 21.58203 v -4.910253 h -16.54771 v -8.27275 h 14.48439 V 42.23925 h -14.48439 v -7.962811 h 16.34132 z"
+         id="path2360" />
+      <path
+         d="m 191.19035,39.474593 c 0,1.59947 -0.53646,2.87535 -1.61628,3.818883 -1.07281,0.95124 -2.52409,1.422837 -4.34678,1.422837 h -7.44851 V 34.276439 h 7.4073 c 1.9051,0 3.38376,0.435027 4.42939,1.312178 1.05226,0.870258 1.57488,2.167734 1.57488,3.885976 z m 6.06602,20.857813 -7.79911,-11.723191 c 1.01771,-0.294794 1.94631,-0.714813 2.78553,-1.260566 0.83885,-0.545619 1.56122,-1.209263 2.16629,-1.990627 0.60541,-0.781738 1.07981,-1.681096 1.42369,-2.698345 0.34378,-1.017553 0.51561,-2.175238 0.51561,-3.472883 0,-1.50409 -0.24743,-2.867948 -0.74267,-4.092048 -0.49515,-1.223794 -1.20344,-2.256186 -2.12499,-3.096734 -0.92173,-0.840446 -2.04957,-1.489252 -3.38375,-1.946452 -1.33447,-0.457267 -2.82692,-0.685476 -4.4774,-0.685476 h -12.87512 v 30.966322 h 5.03433 V 49.538522 h 6.37569 l 7.11829,10.793884 z"
+         id="path2358" />
+    </g>
+  </g>
+</svg>
diff --git a/packages/demobank-ui/src/assets/logo.jpeg b/packages/demobank-ui/src/assets/logo.jpeg
new file mode 100644
index 000000000..489832f7c
--- /dev/null
+++ b/packages/demobank-ui/src/assets/logo.jpeg
diff --git a/packages/demobank-ui/src/components/AsyncButton.tsx b/packages/demobank-ui/src/components/AsyncButton.tsx
new file mode 100644
index 000000000..0c4305668
--- /dev/null
+++ b/packages/demobank-ui/src/components/AsyncButton.tsx
@@ -0,0 +1,66 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { ComponentChildren, h, VNode } from 'preact';
+import { useLayoutEffect, useRef } from 'preact/hooks';
+// import { LoadingModal } from "../modal";
+import { useAsync } from '../hooks/async';
+// import { Translate } from "../../i18n";
+
+type Props = {
+  children: ComponentChildren;
+  disabled?: boolean;
+  onClick?: () => Promise<void>;
+  grabFocus?: boolean;
+  [rest: string]: any;
+};
+
+export function AsyncButton({
+  onClick,
+  grabFocus,
+  disabled,
+  children,
+  ...rest
+}: Props): VNode {
+  const { isLoading, request } = useAsync(onClick);
+
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  useLayoutEffect(() => {
+    if (grabFocus) 
+      buttonRef.current?.focus();
+    
+  }, [grabFocus]);
+
+  // if (isSlow) {
+  //   return <LoadingModal onCancel={cancel} />;
+  // }
+  if (isLoading) 
+    return <button class="button">Loading...</button>;
+  
+
+  return (
+    <span data-tooltip={rest['data-tooltip']} style={{ marginLeft: 5 }}>
+      <button {...rest} ref={buttonRef} onClick={request} disabled={disabled}>
+        {children}
+      </button>
+    </span>
+  );
+}
diff --git a/packages/demobank-ui/src/components/FileButton.tsx b/packages/demobank-ui/src/components/FileButton.tsx
new file mode 100644
index 000000000..dba86ccbf
--- /dev/null
+++ b/packages/demobank-ui/src/components/FileButton.tsx
@@ -0,0 +1,57 @@
+import { h, VNode } from 'preact';
+import { useRef, useState } from 'preact/hooks';
+
+const MAX_IMAGE_UPLOAD_SIZE = 1024 * 1024;
+
+export interface FileTypeContent {
+  content: string;
+  type: string;
+  name: string;
+}
+
+interface Props {
+  label: string;
+  onChange: (v: FileTypeContent | undefined) => void;
+}
+export function FileButton(props: Props): VNode {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [sizeError, setSizeError] = useState(false);
+  return (
+    <div>
+      <button class="button" onClick={(e) => fileInputRef.current?.click()}>
+        <span>{props.label}</span>
+      </button>
+      <input
+        ref={fileInputRef}
+        style={{ display: 'none' }}
+        type="file"
+        onChange={(e) => {
+          const f: FileList | null = e.currentTarget.files;
+          if (!f || f.length != 1) 
+            return props.onChange(undefined);
+          
+          console.log(f);
+          if (f[0].size > MAX_IMAGE_UPLOAD_SIZE) {
+            setSizeError(true);
+            return props.onChange(undefined);
+          }
+          setSizeError(false);
+          return f[0].arrayBuffer().then((b) => {
+            const content = new Uint8Array(b).reduce(
+              (data, byte) => data + String.fromCharCode(byte),
+              '',
+            );
+            return props.onChange({
+              content,
+              name: f[0].name,
+              type: f[0].type,
+            });
+          });
+        }}
+      />
+      {sizeError && (
+        <p class="help is-danger">File should be smaller than 1 MB</p>
+      )}
+    </div>
+  );
+}
diff --git a/packages/demobank-ui/src/components/Notifications.tsx b/packages/demobank-ui/src/components/Notifications.tsx
new file mode 100644
index 000000000..09329442a
--- /dev/null
+++ b/packages/demobank-ui/src/components/Notifications.tsx
@@ -0,0 +1,74 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { h, VNode } from 'preact';
+
+export interface Notification {
+  message: string;
+  description?: string | VNode;
+  type: MessageType;
+}
+
+export type MessageType = 'INFO' | 'WARN' | 'ERROR' | 'SUCCESS';
+
+interface Props {
+  notifications: Notification[];
+  removeNotification?: (n: Notification) => void;
+}
+
+function messageStyle(type: MessageType): string {
+  switch (type) {
+  case 'INFO':
+    return 'message is-info';
+  case 'WARN':
+    return 'message is-warning';
+  case 'ERROR':
+    return 'message is-danger';
+  case 'SUCCESS':
+    return 'message is-success';
+  default:
+    return 'message';
+  }
+}
+
+export function Notifications({
+  notifications,
+  removeNotification,
+}: Props): VNode {
+  return (
+    <div class="block">
+      {notifications.map((n, i) => (
+        <article key={i} class={messageStyle(n.type)}>
+          <div class="message-header">
+            <p>{n.message}</p>
+            {removeNotification && (
+              <button
+                class="delete"
+                onClick={() => removeNotification && removeNotification(n)}
+              />
+            )}
+          </div>
+          {n.description && <div class="message-body">{n.description}</div>}
+        </article>
+      ))}
+    </div>
+  );
+}
diff --git a/packages/demobank-ui/src/components/QR.tsx b/packages/demobank-ui/src/components/QR.tsx
new file mode 100644
index 000000000..ee5b73c69
--- /dev/null
+++ b/packages/demobank-ui/src/components/QR.tsx
@@ -0,0 +1,48 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import { h, VNode } from 'preact';
+import { useEffect, useRef } from 'preact/hooks';
+import qrcode from 'qrcode-generator';
+
+export function QR({ text }: { text: string }): VNode {
+  const divRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const qr = qrcode(0, 'L');
+    qr.addData(text);
+    qr.make();
+    if (divRef.current)
+      divRef.current.innerHTML = qr.createSvgTag({
+        scalable: true,
+      });
+  });
+
+  return (
+    <div
+      style={{
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'left',
+      }}
+    >
+      <div
+        style={{ width: '50%', minWidth: 200, maxWidth: 300 }}
+        ref={divRef}
+      />
+    </div>
+  );
+}
diff --git a/packages/demobank-ui/src/components/app.tsx b/packages/demobank-ui/src/components/app.tsx
new file mode 100644
index 000000000..5338c548e
--- /dev/null
+++ b/packages/demobank-ui/src/components/app.tsx
@@ -0,0 +1,14 @@
+import { FunctionalComponent, h } from 'preact';
+import { TranslationProvider } from '../context/translation';
+import { BankHome } from '../pages/home/index';
+import { Menu } from './menu';
+
+const App: FunctionalComponent = () => {
+  return (
+    <TranslationProvider>
+      <BankHome />
+    </TranslationProvider>
+  );
+};
+
+export default App;
diff --git a/packages/demobank-ui/src/components/fields/DateInput.tsx b/packages/demobank-ui/src/components/fields/DateInput.tsx
new file mode 100644
index 000000000..06ec4b6a7
--- /dev/null
+++ b/packages/demobank-ui/src/components/fields/DateInput.tsx
@@ -0,0 +1,90 @@
+import { format, subYears } from 'date-fns';
+import { h, VNode } from 'preact';
+import { useLayoutEffect, useRef, useState } from 'preact/hooks';
+import { DatePicker } from '../picker/DatePicker';
+
+export interface DateInputProps {
+  label: string;
+  grabFocus?: boolean;
+  tooltip?: string;
+  error?: string;
+  years?: Array<number>;
+  onConfirm?: () => void;
+  bind: [string, (x: string) => void];
+}
+
+export function DateInput(props: DateInputProps): VNode {
+  const inputRef = useRef<HTMLInputElement>(null);
+  useLayoutEffect(() => {
+    if (props.grabFocus) 
+      inputRef.current?.focus();
+    
+  }, [props.grabFocus]);
+  const [opened, setOpened] = useState(false);
+
+  const value = props.bind[0] || '';
+  const [dirty, setDirty] = useState(false);
+  const showError = dirty && props.error;
+
+  const calendar = subYears(new Date(), 30);
+
+  return (
+    <div class="field">
+      <label class="label">
+        {props.label}
+        {props.tooltip && (
+          <span class="icon has-tooltip-right" data-tooltip={props.tooltip}>
+            <i class="mdi mdi-information" />
+          </span>
+        )}
+      </label>
+      <div class="control">
+        <div class="field has-addons">
+          <p class="control">
+            <input
+              type="text"
+              class={showError ? 'input is-danger' : 'input'}
+              value={value}
+              onKeyPress={(e) => {
+                if (e.key === 'Enter' && props.onConfirm) 
+                  props.onConfirm()
+                
+              }}
+              onInput={(e) => {
+                const text = e.currentTarget.value;
+                setDirty(true);
+                props.bind[1](text);
+              }}
+              ref={inputRef}
+            />
+          </p>
+          <p class="control">
+            <a
+              class="button"
+              onClick={() => {
+                setOpened(true);
+              }}
+            >
+              <span class="icon">
+                <i class="mdi mdi-calendar" />
+              </span>
+            </a>
+          </p>
+        </div>
+      </div>
+      <p class="help">Using the format yyyy-mm-dd</p>
+      {showError && <p class="help is-danger">{props.error}</p>}
+      <DatePicker
+        opened={opened}
+        initialDate={calendar}
+        years={props.years}
+        closeFunction={() => setOpened(false)}
+        dateReceiver={(d) => {
+          setDirty(true);
+          const v = format(d, 'yyyy-MM-dd');
+          props.bind[1](v);
+        }}
+      />
+    </div>
+  );
+}
diff --git a/packages/demobank-ui/src/components/fields/EmailInput.tsx b/packages/demobank-ui/src/components/fields/EmailInput.tsx
new file mode 100644
index 000000000..8b64264ed
--- /dev/null
+++ b/packages/demobank-ui/src/components/fields/EmailInput.tsx
@@ -0,0 +1,57 @@
+import { h, VNode } from 'preact';
+import { useLayoutEffect, useRef, useState } from 'preact/hooks';
+
+export interface TextInputProps {
+  label: string;
+  grabFocus?: boolean;
+  error?: string;
+  placeholder?: string;
+  tooltip?: string;
+  onConfirm?: () => void;
+  bind: [string, (x: string) => void];
+}
+
+export function EmailInput(props: TextInputProps): VNode {
+  const inputRef = useRef<HTMLInputElement>(null);
+  useLayoutEffect(() => {
+    if (props.grabFocus) 
+      inputRef.current?.focus();
+    
+  }, [props.grabFocus]);
+  const value = props.bind[0];
+  const [dirty, setDirty] = useState(false);
+  const showError = dirty && props.error;
+  return (
+    <div class="field">
+      <label class="label">
+        {props.label}
+        {props.tooltip && (
+          <span class="icon has-tooltip-right" data-tooltip={props.tooltip}>
+            <i class="mdi mdi-information" />
+          </span>
+        )}
+      </label>
+      <div class="control has-icons-right">
+        <input
+          value={value}
+          required
+          placeholder={props.placeholder}
+          type="email"
+          class={showError ? 'input is-danger' : 'input'}
+          onKeyPress={(e) => {
+            if (e.key === 'Enter' && props.onConfirm) 
+              props.onConfirm()
+            
+          }}
+          onInput={(e) => {
+            setDirty(true);
+            props.bind[1]((e.target as HTMLInputElement).value);
+          }}
+          ref={inputRef}
+          style={{ display: 'block' }}
+        />
+      </div>
+      {showError && <p class="help is-danger">{props.error}</p>}
+    </div>
+  );
+}
diff --git a/packages/demobank-ui/src/components/fields/FileInput.tsx b/packages/demobank-ui/src/components/fields/FileInput.tsx
new file mode 100644
index 000000000..17413b907
--- /dev/null
+++ b/packages/demobank-ui/src/components/fields/FileInput.tsx
@@ -0,0 +1,104 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+import { h, VNode } from 'preact';
+import { useLayoutEffect, useRef, useState } from 'preact/hooks';
+
+const MAX_IMAGE_UPLOAD_SIZE = 1024 * 1024;
+
+export interface FileTypeContent {
+  content: string;
+  type: string;
+  name: string;
+}
+
+export interface FileInputProps {
+  label: string;
+  grabFocus?: boolean;
+  disabled?: boolean;
+  error?: string;
+  placeholder?: string;
+  tooltip?: string;
+  onChange: (v: FileTypeContent | undefined) => void;
+}
+
+export function FileInput(props: FileInputProps): VNode {
+  const inputRef = useRef<HTMLInputElement>(null);
+  useLayoutEffect(() => {
+    if (props.grabFocus) 
+      inputRef.current?.focus();
+    
+  }, [props.grabFocus]);
+
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [sizeError, setSizeError] = useState(false);
+  return (
+    <div class="field">
+      <label class="label">
+        <a class="button" onClick={(e) => fileInputRef.current?.click()}>
+          <div class="icon is-small ">
+            <i class="mdi mdi-folder" />
+          </div>
+          <span>
+            {props.label}
+          </span>
+        </a>
+        {props.tooltip && (
+          <span class="icon has-tooltip-right" data-tooltip={props.tooltip}>
+            <i class="mdi mdi-information" />
+          </span>
+        )}
+      </label>
+      <div class="control">
+        <input
+          ref={fileInputRef}
+          style={{ display: 'none' }}
+          type="file"
+          // name={String(name)}
+          onChange={(e) => {
+            const f: FileList | null = e.currentTarget.files;
+            if (!f || f.length != 1) 
+              return props.onChange(undefined);
+            
+            console.log(f)
+            if (f[0].size > MAX_IMAGE_UPLOAD_SIZE) {
+              setSizeError(true);
+              return props.onChange(undefined);
+            }
+            setSizeError(false);
+            return f[0].arrayBuffer().then((b) => {
+              const b64 = btoa(
+                new Uint8Array(b).reduce(
+                  (data, byte) => data + String.fromCharCode(byte),
+                  '',
+                ),
+              );
+              return props.onChange({content: `data:${f[0].type};base64,${b64}`, name: f[0].name, type: f[0].type});
+            });
+          }}
+        />
+        {props.error && <p class="help is-danger">{props.error}</p>}
+        {sizeError && (
+          <p class="help is-danger">File should be smaller than 1 MB</p>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/packages/demobank-ui/src/components/fields/ImageInput.tsx b/packages/demobank-ui/src/components/fields/ImageInput.tsx
new file mode 100644
index 000000000..98457af21
--- /dev/null
+++ b/packages/demobank-ui/src/components/fields/ImageInput.tsx
@@ -0,0 +1,93 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+import { h, VNode } from 'preact';
+import { useLayoutEffect, useRef, useState } from 'preact/hooks';
+import emptyImage from '../../assets/empty.png';
+import { TextInputProps } from './TextInput';
+
+const MAX_IMAGE_UPLOAD_SIZE = 1024 * 1024;
+
+export function ImageInput(props: TextInputProps): VNode {
+  const inputRef = useRef<HTMLInputElement>(null);
+  useLayoutEffect(() => {
+    if (props.grabFocus) 
+      inputRef.current?.focus();
+    
+  }, [props.grabFocus]);
+
+  const value = props.bind[0];
+  // const [dirty, setDirty] = useState(false)
+  const image = useRef<HTMLInputElement>(null);
+  const [sizeError, setSizeError] = useState(false);
+  function onChange(v: string): void {
+    // setDirty(true);
+    props.bind[1](v);
+  }
+  return (
+    <div class="field">
+      <label class="label">
+        {props.label}
+        {props.tooltip && (
+          <span class="icon has-tooltip-right" data-tooltip={props.tooltip}>
+            <i class="mdi mdi-information" />
+          </span>
+        )}
+      </label>
+      <div class="control">
+        <img
+          src={!value ? emptyImage : value}
+          style={{ width: 200, height: 200 }}
+          onClick={() => image.current?.click()}
+        />
+        <input
+          ref={image}
+          style={{ display: 'none' }}
+          type="file"
+          name={String(name)}
+          onChange={(e) => {
+            const f: FileList | null = e.currentTarget.files;
+            if (!f || f.length != 1) 
+              return onChange(emptyImage);
+            
+            if (f[0].size > MAX_IMAGE_UPLOAD_SIZE) {
+              setSizeError(true);
+              return onChange(emptyImage);
+            }
+            setSizeError(false);
+            return f[0].arrayBuffer().then((b) => {
+              const b64 = btoa(
+                new Uint8Array(b).reduce(
+                  (data, byte) => data + String.fromCharCode(byte),
+                  '',
+                ),
+              );
+              return onChange(`data:${f[0].type};base64,${b64}` as any);
+            });
+          }}
+        />
+        {props.error && <p class="help is-danger">{props.error}</p>}
+        {sizeError && (
+          <p class="help is-danger">Image should be smaller than 1 MB</p>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/packages/demobank-ui/src/components/fields/NumberInput.tsx b/packages/demobank-ui/src/components/fields/NumberInput.tsx
new file mode 100644
index 000000000..881c61c57
--- /dev/null
+++ b/packages/demobank-ui/src/components/fields/NumberInput.tsx
@@ -0,0 +1,56 @@
+import { h, VNode } from 'preact';
+import { useLayoutEffect, useRef, useState } from 'preact/hooks';
+
+export interface TextInputProps {
+  label: string;
+  grabFocus?: boolean;
+  error?: string;
+  placeholder?: string;
+  tooltip?: string;
+  onConfirm?: () => void;
+  bind: [string, (x: string) => void];
+}
+
+export function PhoneNumberInput(props: TextInputProps): VNode {
+  const inputRef = useRef<HTMLInputElement>(null);
+  useLayoutEffect(() => {
+    if (props.grabFocus) 
+      inputRef.current?.focus();
+    
+  }, [props.grabFocus]);
+  const value = props.bind[0];
+  const [dirty, setDirty] = useState(false);
+  const showError = dirty && props.error;
+  return (
+    <div class="field">
+      <label class="label">
+        {props.label}
+        {props.tooltip && (
+          <span class="icon has-tooltip-right" data-tooltip={props.tooltip}>
+            <i class="mdi mdi-information" />
+          </span>
+        )}
+      </label>
+      <div class="control has-icons-right">
+        <input
+          value={value}
+          type="tel"
+          placeholder={props.placeholder}
+          class={showError ? 'input is-danger' : 'input'}
+          onKeyPress={(e) => {
+            if (e.key === 'Enter' && props.onConfirm) 
+              props.onConfirm()
+            
+          }}
+          onInput={(e) => {
+            setDirty(true);
+            props.bind[1]((e.target as HTMLInputElement).value);
+          }}
+          ref={inputRef}
+          style={{ display: 'block' }}
+        />
+      </div>
+      {showError && <p class="help is-danger">{props.error}</p>}
+    </div>
+  );
+}
diff --git a/packages/demobank-ui/src/components/fields/TextInput.tsx b/packages/demobank-ui/src/components/fields/TextInput.tsx
new file mode 100644
index 000000000..5cc9f32ad
--- /dev/null
+++ b/packages/demobank-ui/src/components/fields/TextInput.tsx
@@ -0,0 +1,68 @@
+import { h, VNode } from 'preact';
+import { useLayoutEffect, useRef, useState } from 'preact/hooks';
+
+export interface TextInputProps {
+  inputType?: 'text' | 'number' | 'multiline' | 'password';
+  label: string;
+  grabFocus?: boolean;
+  disabled?: boolean;
+  error?: string;
+  placeholder?: string;
+  tooltip?: string;
+  onConfirm?: () => void;
+  bind: [string, (x: string) => void];
+}
+
+const TextInputType = function ({ inputType, grabFocus, ...rest }: any): VNode {
+  const inputRef = useRef<HTMLInputElement>(null);
+  useLayoutEffect(() => {
+    if (grabFocus) 
+      inputRef.current?.focus();
+    
+  }, [grabFocus]);
+
+  return inputType === 'multiline' ? (
+    <textarea {...rest} rows={5} ref={inputRef} style={{ height: 'unset' }} />
+  ) : (
+    <input {...rest} type={inputType} ref={inputRef} />
+  );
+};
+
+export function TextInput(props: TextInputProps): VNode {
+  const value = props.bind[0];
+  const [dirty, setDirty] = useState(false);
+  const showError = dirty && props.error;
+  return (
+    <div class="field">
+      <label class="label">
+        {props.label}
+        {props.tooltip && (
+          <span class="icon has-tooltip-right" data-tooltip={props.tooltip}>
+            <i class="mdi mdi-information" />
+          </span>
+        )}
+      </label>
+      <div class="control has-icons-right">
+        <TextInputType
+          inputType={props.inputType}
+          value={value}
+          grabFocus={props.grabFocus}
+          disabled={props.disabled}
+          placeholder={props.placeholder}
+          class={showError ? 'input is-danger' : 'input'}
+          onKeyPress={(e: any) => {
+            if (e.key === 'Enter' && props.onConfirm) 
+              props.onConfirm();
+            
+          }}
+          onInput={(e: any) => {
+            setDirty(true);
+            props.bind[1]((e.target as HTMLInputElement).value);
+          }}
+          style={{ display: 'block' }}
+        />
+      </div>
+      {showError && <p class="help is-danger">{props.error}</p>}
+    </div>
+  );
+}
diff --git a/packages/demobank-ui/src/components/menu/LangSelector.tsx b/packages/demobank-ui/src/components/menu/LangSelector.tsx
new file mode 100644
index 000000000..221237a5b
--- /dev/null
+++ b/packages/demobank-ui/src/components/menu/LangSelector.tsx
@@ -0,0 +1,101 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { h, VNode, Fragment } from 'preact';
+import { useCallback, useEffect, useState } from 'preact/hooks';
+import langIcon from '../../assets/icons/languageicon.svg';
+import { useTranslationContext } from '../../context/translation';
+import { strings as messages } from '../../i18n/strings';
+
+type LangsNames = {
+  [P in keyof typeof messages]: string;
+};
+
+const names: LangsNames = {
+  es: 'Español [es]',
+  en: 'English [en]',
+  fr: 'Français [fr]',
+  de: 'Deutsch [de]',
+  sv: 'Svenska [sv]',
+  it: 'Italiano [it]',
+};
+
+function getLangName(s: keyof LangsNames | string): string {
+  if (names[s]) return names[s];
+  return String(s);
+}
+
+// FIXME: explain "like py".
+export function LangSelectorLikePy(): VNode {
+  const [updatingLang, setUpdatingLang] = useState(false);
+  const { lang, changeLanguage } = useTranslationContext();
+  const [hidden, setHidden] = useState(true)
+  useEffect(() => {
+    function bodyKeyPress(event:KeyboardEvent) {
+      if (event.code === 'Escape') 
+        setHidden(true);
+      
+    }
+    function bodyOnClick(event:Event) {
+      setHidden(true);
+    }
+    document.body.addEventListener('click', bodyOnClick)
+    document.body.addEventListener('keydown', bodyKeyPress as any)
+    return () => {
+      document.body.removeEventListener('keydown', bodyKeyPress as any)
+      document.body.removeEventListener('click', bodyOnClick)
+    }
+  },[])
+  return (
+    <Fragment>
+      <button name="language" onClick={(ev) => {
+        setHidden(h => !h);
+        ev.stopPropagation();
+      }}>
+        {getLangName(lang)}
+      </button>
+      <div id="lang" class={hidden ? 'hide' : ''}>
+        <div style="position: relative; overflow: visible;">
+          <div
+            class="nav"
+            style="position: absolute; max-height: 60vh; overflow-y: scroll">
+            {Object.keys(messages)
+              .filter((l) => l !== lang)
+              .map((l) => (
+                <a
+                  key={l}
+                  href="#"
+                  class="navbtn langbtn"
+                  value={l}
+                  onClick={() => {
+                    changeLanguage(l);
+                    setUpdatingLang(false);
+                  }}>
+                  {getLangName(l)}
+                </a>
+              ))}
+            <br />
+          </div>
+        </div>
+      </div>
+    </Fragment>
+  );
+}
diff --git a/packages/demobank-ui/src/components/menu/NavigationBar.tsx b/packages/demobank-ui/src/components/menu/NavigationBar.tsx
new file mode 100644
index 000000000..9e540213d
--- /dev/null
+++ b/packages/demobank-ui/src/components/menu/NavigationBar.tsx
@@ -0,0 +1,53 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { h, VNode } from 'preact';
+import logo from '../../assets/logo.jpeg';
+import { LangSelectorLikePy as LangSelector } from './LangSelector';
+
+interface Props {
+  onMobileMenu: () => void;
+  title: string;
+}
+
+export function NavigationBar({ onMobileMenu, title }: Props): VNode {
+  return (
+    <nav
+      class="navbar is-fixed-top"
+      role="navigation"
+      aria-label="main navigation"
+    >
+      <div class="navbar-brand">
+        <span class="navbar-item" style={{ fontSize: 24, fontWeight: 900 }}>
+          {title}
+        </span>
+      </div>
+
+      <div class="navbar-menu ">
+        <div class="navbar-end">
+          <div class="navbar-item" style={{ paddingTop: 4, paddingBottom: 4 }}>
+            {/* <LangSelector /> */}
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+}
diff --git a/packages/demobank-ui/src/components/menu/SideBar.tsx b/packages/demobank-ui/src/components/menu/SideBar.tsx
new file mode 100644
index 000000000..7f9981a1c
--- /dev/null
+++ b/packages/demobank-ui/src/components/menu/SideBar.tsx
@@ -0,0 +1,73 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { h, VNode } from 'preact';
+import { Translate } from '../../i18n';
+
+interface Props {
+  mobile?: boolean;
+}
+
+export function Sidebar({ mobile }: Props): VNode {
+  // const config = useConfigContext();
+  const config = { version: 'none' };
+  // FIXME: add replacement for __VERSION__ with the current version
+  const process = { env: { __VERSION__: '0.0.0' } };
+
+  return (
+    <aside class="aside is-placed-left is-expanded">
+      <div class="aside-tools">
+        <div class="aside-tools-label">
+          <div>
+            <b>euFin bank</b>
+          </div>
+          <div
+            class="is-size-7 has-text-right"
+            style={{ lineHeight: 0, marginTop: -10 }}
+          >
+            Version {process.env.__VERSION__} ({config.version})
+          </div>
+        </div>
+      </div>
+      <div class="menu is-menu-main">
+        <p class="menu-label">
+          <Translate>Bank menu</Translate>
+        </p>
+        <ul class="menu-list">
+          <li>
+            <div class="ml-4">
+              <span class="menu-item-label">
+                <Translate>Select option1</Translate>
+              </span>
+            </div>
+          </li>
+          <li>
+            <div class="ml-4">
+              <span class="menu-item-label">
+                <Translate>Select option2</Translate>
+              </span>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </aside>
+  );
+}
diff --git a/packages/demobank-ui/src/components/menu/index.tsx b/packages/demobank-ui/src/components/menu/index.tsx
new file mode 100644
index 000000000..07e1c5265
--- /dev/null
+++ b/packages/demobank-ui/src/components/menu/index.tsx
@@ -0,0 +1,135 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import { ComponentChildren, Fragment, h, VNode } from 'preact';
+import Match from 'preact-router/match';
+import { useEffect, useState } from 'preact/hooks';
+import { NavigationBar } from './NavigationBar';
+import { Sidebar } from './SideBar';
+
+interface MenuProps {
+  title: string;
+}
+
+function WithTitle({
+  title,
+  children,
+}: {
+  title: string;
+  children: ComponentChildren;
+}): VNode {
+  useEffect(() => {
+    document.title = `${title}`;
+  }, [title]);
+  return <Fragment>{children}</Fragment>;
+}
+
+export function Menu({ title }: MenuProps): VNode {
+  const [mobileOpen, setMobileOpen] = useState(false);
+
+  return (
+    <Match>
+      {({ path }: { path: string }) => {
+        const titleWithSubtitle = title; // title ? title : (!admin ? getInstanceTitle(path, instance) : getAdminTitle(path, instance))
+        return (
+          <WithTitle title={titleWithSubtitle}>
+            <div
+              class={mobileOpen ? 'has-aside-mobile-expanded' : ''}
+              onClick={() => setMobileOpen(false)}
+            >
+              <NavigationBar
+                onMobileMenu={() => setMobileOpen(!mobileOpen)}
+                title={titleWithSubtitle}
+              />
+
+              <Sidebar mobile={mobileOpen} />
+            </div>
+          </WithTitle>
+        );
+      }}
+    </Match>
+  );
+}
+
+interface NotYetReadyAppMenuProps {
+  title: string;
+  onLogout?: () => void;
+}
+
+interface NotifProps {
+  notification?: Notification;
+}
+export function NotificationCard({
+  notification: n,
+}: NotifProps): VNode | null {
+  if (!n) return null;
+  return (
+    <div class="notification">
+      <div class="columns is-vcentered">
+        <div class="column is-12">
+          <article
+            class={
+              n.type === 'ERROR'
+                ? 'message is-danger'
+                : n.type === 'WARN'
+                  ? 'message is-warning'
+                  : 'message is-info'
+            }
+          >
+            <div class="message-header">
+              <p>{n.message}</p>
+            </div>
+            {n.description && <div class="message-body">{n.description}</div>}
+          </article>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function NotYetReadyAppMenu({
+  onLogout,
+  title,
+}: NotYetReadyAppMenuProps): VNode {
+  const [mobileOpen, setMobileOpen] = useState(false);
+
+  useEffect(() => {
+    document.title = `Taler Backoffice: ${title}`;
+  }, [title]);
+
+  return (
+    <div
+      class="has-aside-mobile-expanded"
+      // class={mobileOpen ? "has-aside-mobile-expanded" : ""}
+      onClick={() => setMobileOpen(false)}
+    >
+      <NavigationBar
+        onMobileMenu={() => setMobileOpen(!mobileOpen)}
+        title={title}
+      />
+      {onLogout && <Sidebar mobile={mobileOpen} />}
+    </div>
+  );
+}
+
+export interface Notification {
+  message: string;
+  description?: string | VNode;
+  type: MessageType;
+}
+
+export type ValueOrFunction<T> = T | ((p: T) => T);
+export type MessageType = 'INFO' | 'WARN' | 'ERROR' | 'SUCCESS';
diff --git a/packages/demobank-ui/src/components/picker/DatePicker.tsx b/packages/demobank-ui/src/components/picker/DatePicker.tsx
new file mode 100644
index 000000000..94dbc9458
--- /dev/null
+++ b/packages/demobank-ui/src/components/picker/DatePicker.tsx
@@ -0,0 +1,356 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { h, Component } from 'preact';
+
+interface Props {
+  closeFunction?: () => void;
+  dateReceiver?: (d: Date) => void;
+  initialDate?: Date;
+  years?: Array<number>;
+  opened?: boolean;
+}
+interface State {
+  displayedMonth: number;
+  displayedYear: number;
+  selectYearMode: boolean;
+  currentDate: Date;
+}
+const now = new Date();
+
+const monthArrShortFull = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+];
+
+const monthArrShort = [
+  'Jan',
+  'Feb',
+  'Mar',
+  'Apr',
+  'May',
+  'Jun',
+  'Jul',
+  'Aug',
+  'Sep',
+  'Oct',
+  'Nov',
+  'Dec',
+];
+
+const dayArr = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+
+const yearArr: number[] = [];
+
+// inspired by https://codepen.io/m4r1vs/pen/MOOxyE
+export class DatePicker extends Component<Props, State> {
+  closeDatePicker() {
+    this.props.closeFunction && this.props.closeFunction(); // Function gets passed by parent
+  }
+
+  /**
+   * Gets fired when a day gets clicked.
+   * @param {object} e The event thrown by the <span /> element clicked
+   */
+  dayClicked(e: any) {
+    const element = e.target; // the actual element clicked
+
+    if (element.innerHTML === '') return false; // don't continue if <span /> empty
+
+    // get date from clicked element (gets attached when rendered)
+    const date = new Date(element.getAttribute('data-value'));
+
+    // update the state
+    this.setState({ currentDate: date });
+    this.passDateToParent(date);
+  }
+
+  /**
+   * returns days in month as array
+   * @param {number} month the month to display
+   * @param {number} year the year to display
+   */
+  getDaysByMonth(month: number, year: number) {
+    const calendar = [];
+
+    const date = new Date(year, month, 1); // month to display
+
+    const firstDay = new Date(year, month, 1).getDay(); // first weekday of month
+    const lastDate = new Date(year, month + 1, 0).getDate(); // last date of month
+
+    let day: number | null = 0;
+
+    // the calendar is 7*6 fields big, so 42 loops
+    for (let i = 0; i < 42; i++) {
+      if (i >= firstDay && day !== null) day = day + 1;
+      if (day !== null && day > lastDate) day = null;
+
+      // append the calendar Array
+      calendar.push({
+        day: day === 0 || day === null ? null : day, // null or number
+        date: day === 0 || day === null ? null : new Date(year, month, day), // null or Date()
+        today:
+          day === now.getDate() &&
+          month === now.getMonth() &&
+          year === now.getFullYear(), // boolean
+      });
+    }
+
+    return calendar;
+  }
+
+  /**
+   * Display previous month by updating state
+   */
+  displayPrevMonth() {
+    if (this.state.displayedMonth <= 0) 
+      this.setState({
+        displayedMonth: 11,
+        displayedYear: this.state.displayedYear - 1,
+      });
+    else 
+      this.setState({
+        displayedMonth: this.state.displayedMonth - 1,
+      });
+    
+  }
+
+  /**
+   * Display next month by updating state
+   */
+  displayNextMonth() {
+    if (this.state.displayedMonth >= 11) 
+      this.setState({
+        displayedMonth: 0,
+        displayedYear: this.state.displayedYear + 1,
+      });
+    else 
+      this.setState({
+        displayedMonth: this.state.displayedMonth + 1,
+      });
+    
+  }
+
+  /**
+   * Display the selected month (gets fired when clicking on the date string)
+   */
+  displaySelectedMonth() {
+    if (this.state.selectYearMode) 
+      this.toggleYearSelector();
+    else {
+      if (!this.state.currentDate) return false;
+      this.setState({
+        displayedMonth: this.state.currentDate.getMonth(),
+        displayedYear: this.state.currentDate.getFullYear(),
+      });
+    }
+  }
+
+  toggleYearSelector() {
+    this.setState({ selectYearMode: !this.state.selectYearMode });
+  }
+
+  changeDisplayedYear(e: any) {
+    const element = e.target;
+    this.toggleYearSelector();
+    this.setState({
+      displayedYear: parseInt(element.innerHTML, 10),
+      displayedMonth: 0,
+    });
+  }
+
+  /**
+   * Pass the selected date to parent when 'OK' is clicked
+   */
+  passSavedDateDateToParent() {
+    this.passDateToParent(this.state.currentDate);
+  }
+  passDateToParent(date: Date) {
+    if (typeof this.props.dateReceiver === 'function')
+      this.props.dateReceiver(date);
+    this.closeDatePicker();
+  }
+
+  componentDidUpdate() {
+    // if (this.state.selectYearMode) {
+    //   document.getElementsByClassName('selected')[0].scrollIntoView(); // works in every browser incl. IE, replace with scrollIntoViewIfNeeded when browsers support it
+    // }
+  }
+
+  constructor(props: any) {
+    super(props);
+
+    this.closeDatePicker = this.closeDatePicker.bind(this);
+    this.dayClicked = this.dayClicked.bind(this);
+    this.displayNextMonth = this.displayNextMonth.bind(this);
+    this.displayPrevMonth = this.displayPrevMonth.bind(this);
+    this.getDaysByMonth = this.getDaysByMonth.bind(this);
+    this.changeDisplayedYear = this.changeDisplayedYear.bind(this);
+    this.passDateToParent = this.passDateToParent.bind(this);
+    this.toggleYearSelector = this.toggleYearSelector.bind(this);
+    this.displaySelectedMonth = this.displaySelectedMonth.bind(this);
+
+    const initial = props.initialDate || now;
+
+    this.state = {
+      currentDate: initial,
+      displayedMonth: initial.getMonth(),
+      displayedYear: initial.getFullYear(),
+      selectYearMode: false,
+    };
+  }
+
+  render() {
+    const {
+      currentDate,
+      displayedMonth,
+      displayedYear,
+      selectYearMode,
+    } = this.state;
+
+    return (
+      <div>
+        <div class={`datePicker ${this.props.opened && 'datePicker--opened'}`}>
+          <div class="datePicker--titles">
+            <h3
+              style={{
+                color: selectYearMode
+                  ? 'rgba(255,255,255,.87)'
+                  : 'rgba(255,255,255,.57)',
+              }}
+              onClick={this.toggleYearSelector}
+            >
+              {currentDate.getFullYear()}
+            </h3>
+            <h2
+              style={{
+                color: !selectYearMode
+                  ? 'rgba(255,255,255,.87)'
+                  : 'rgba(255,255,255,.57)',
+              }}
+              onClick={this.displaySelectedMonth}
+            >
+              {dayArr[currentDate.getDay()]},{' '}
+              {monthArrShort[currentDate.getMonth()]} {currentDate.getDate()}
+            </h2>
+          </div>
+
+          {!selectYearMode && (
+            <nav>
+              <span onClick={this.displayPrevMonth} class="icon">
+                <i
+                  style={{ transform: 'rotate(180deg)' }}
+                  class="mdi mdi-forward"
+                />
+              </span>
+              <h4>
+                {monthArrShortFull[displayedMonth]} {displayedYear}
+              </h4>
+              <span onClick={this.displayNextMonth} class="icon">
+                <i class="mdi mdi-forward" />
+              </span>
+            </nav>
+          )}
+
+          <div class="datePicker--scroll">
+            {!selectYearMode && (
+              <div class="datePicker--calendar">
+                <div class="datePicker--dayNames">
+                  {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((day, i) => (
+                    <span key={i}>{day}</span>
+                  ))}
+                </div>
+
+                <div onClick={this.dayClicked} class="datePicker--days">
+                  {/*
+                  Loop through the calendar object returned by getDaysByMonth().
+                */}
+
+                  {this.getDaysByMonth(
+                    this.state.displayedMonth,
+                    this.state.displayedYear,
+                  ).map((day) => {
+                    let selected = false;
+
+                    if (currentDate && day.date)
+                      selected =
+                        currentDate.toLocaleDateString() ===
+                        day.date.toLocaleDateString();
+
+                    return (
+                      <span
+                        key={day.day}
+                        class={
+                          (day.today ? 'datePicker--today ' : '') +
+                          (selected ? 'datePicker--selected' : '')
+                        }
+                        disabled={!day.date}
+                        data-value={day.date}
+                      >
+                        {day.day}
+                      </span>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+
+            {selectYearMode && (
+              <div class="datePicker--selectYear">
+                {(this.props.years || yearArr).map((year) => (
+                  <span
+                    key={year}
+                    class={year === displayedYear ? 'selected' : ''}
+                    onClick={this.changeDisplayedYear}
+                  >
+                    {year}
+                  </span>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div
+          class="datePicker--background"
+          onClick={this.closeDatePicker}
+          style={{
+            display: this.props.opened ? 'block' : 'none',
+          }}
+        />
+      </div>
+    );
+  }
+}
+
+for (let i = 2010; i <= now.getFullYear() + 10; i++) 
+  yearArr.push(i);
+
diff --git a/packages/demobank-ui/src/components/picker/DurationPicker.stories.tsx b/packages/demobank-ui/src/components/picker/DurationPicker.stories.tsx
new file mode 100644
index 000000000..5e9930522
--- /dev/null
+++ b/packages/demobank-ui/src/components/picker/DurationPicker.stories.tsx
@@ -0,0 +1,55 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { h, FunctionalComponent } from 'preact';
+import { useState } from 'preact/hooks';
+import { DurationPicker as TestedComponent } from './DurationPicker';
+
+export default {
+  title: 'Components/Picker/Duration',
+  component: TestedComponent,
+  argTypes: {
+    onCreate: { action: 'onCreate' },
+    goBack: { action: 'goBack' },
+  },
+};
+
+function createExample<Props>(
+  Component: FunctionalComponent<Props>,
+  props: Partial<Props>,
+) {
+  const r = (args: any) => <Component {...args} />;
+  r.args = props;
+  return r;
+}
+
+export const Example = createExample(TestedComponent, {
+  days: true,
+  minutes: true,
+  hours: true,
+  seconds: true,
+  value: 10000000,
+});
+
+export const WithState = () => {
+  const [v, s] = useState<number>(1000000);
+  return <TestedComponent value={v} onChange={s} days minutes hours seconds />;
+};
diff --git a/packages/demobank-ui/src/components/picker/DurationPicker.tsx b/packages/demobank-ui/src/components/picker/DurationPicker.tsx
new file mode 100644
index 000000000..542ff2f01
--- /dev/null
+++ b/packages/demobank-ui/src/components/picker/DurationPicker.tsx
@@ -0,0 +1,211 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { h, VNode } from 'preact';
+import { useState } from 'preact/hooks';
+import { useTranslator } from '../../i18n';
+import '../../scss/DurationPicker.scss';
+
+export interface Props {
+  hours?: boolean;
+  minutes?: boolean;
+  seconds?: boolean;
+  days?: boolean;
+  onChange: (value: number) => void;
+  value: number;
+}
+
+// inspiration taken from https://github.com/flurmbo/react-duration-picker
+export function DurationPicker({
+  days,
+  hours,
+  minutes,
+  seconds,
+  onChange,
+  value,
+}: Props): VNode {
+  const ss = 1000;
+  const ms = ss * 60;
+  const hs = ms * 60;
+  const ds = hs * 24;
+  const i18n = useTranslator();
+
+  return (
+    <div class="rdp-picker">
+      {days && (
+        <DurationColumn
+          unit={i18n`days`}
+          max={99}
+          value={Math.floor(value / ds)}
+          onDecrease={value >= ds ? () => onChange(value - ds) : undefined}
+          onIncrease={value < 99 * ds ? () => onChange(value + ds) : undefined}
+          onChange={(diff) => onChange(value + diff * ds)}
+        />
+      )}
+      {hours && (
+        <DurationColumn
+          unit={i18n`hours`}
+          max={23}
+          min={1}
+          value={Math.floor(value / hs) % 24}
+          onDecrease={value >= hs ? () => onChange(value - hs) : undefined}
+          onIncrease={value < 99 * ds ? () => onChange(value + hs) : undefined}
+          onChange={(diff) => onChange(value + diff * hs)}
+        />
+      )}
+      {minutes && (
+        <DurationColumn
+          unit={i18n`minutes`}
+          max={59}
+          min={1}
+          value={Math.floor(value / ms) % 60}
+          onDecrease={value >= ms ? () => onChange(value - ms) : undefined}
+          onIncrease={value < 99 * ds ? () => onChange(value + ms) : undefined}
+          onChange={(diff) => onChange(value + diff * ms)}
+        />
+      )}
+      {seconds && (
+        <DurationColumn
+          unit={i18n`seconds`}
+          max={59}
+          value={Math.floor(value / ss) % 60}
+          onDecrease={value >= ss ? () => onChange(value - ss) : undefined}
+          onIncrease={value < 99 * ds ? () => onChange(value + ss) : undefined}
+          onChange={(diff) => onChange(value + diff * ss)}
+        />
+      )}
+    </div>
+  );
+}
+
+interface ColProps {
+  unit: string;
+  min?: number;
+  max: number;
+  value: number;
+  onIncrease?: () => void;
+  onDecrease?: () => void;
+  onChange?: (diff: number) => void;
+}
+
+function InputNumber({
+  initial,
+  onChange,
+}: {
+  initial: number;
+  onChange: (n: number) => void;
+}) {
+  const [value, handler] = useState<{ v: string }>({
+    v: toTwoDigitString(initial),
+  });
+
+  return (
+    <input
+      value={value.v}
+      onBlur={(e) => onChange(parseInt(value.v, 10))}
+      onInput={(e) => {
+        e.preventDefault();
+        const n = Number.parseInt(e.currentTarget.value, 10);
+        if (isNaN(n)) return handler({ v: toTwoDigitString(initial) });
+        return handler({ v: toTwoDigitString(n) });
+      }}
+      style={{
+        width: 50,
+        border: 'none',
+        fontSize: 'inherit',
+        background: 'inherit',
+      }}
+    />
+  );
+}
+
+function DurationColumn({
+  unit,
+  min = 0,
+  max,
+  value,
+  onIncrease,
+  onDecrease,
+  onChange,
+}: ColProps): VNode {
+  const cellHeight = 35;
+  return (
+    <div class="rdp-column-container">
+      <div class="rdp-masked-div">
+        <hr class="rdp-reticule" style={{ top: cellHeight * 2 - 1 }} />
+        <hr class="rdp-reticule" style={{ top: cellHeight * 3 - 1 }} />
+
+        <div class="rdp-column" style={{ top: 0 }}>
+          <div class="rdp-cell" key={value - 2}>
+            {onDecrease && (
+              <button
+                style={{ width: '100%', textAlign: 'center', margin: 5 }}
+                onClick={onDecrease}
+              >
+                <span class="icon">
+                  <i class="mdi mdi-chevron-up" />
+                </span>
+              </button>
+            )}
+          </div>
+          <div class="rdp-cell" key={value - 1}>
+            {value > min ? toTwoDigitString(value - 1) : ''}
+          </div>
+          <div class="rdp-cell rdp-center" key={value}>
+            {onChange ? (
+              <InputNumber
+                initial={value}
+                onChange={(n) => onChange(n - value)}
+              />
+            ) : (
+              toTwoDigitString(value)
+            )}
+            <div>{unit}</div>
+          </div>
+
+          <div class="rdp-cell" key={value + 1}>
+            {value < max ? toTwoDigitString(value + 1) : ''}
+          </div>
+
+          <div class="rdp-cell" key={value + 2}>
+            {onIncrease && (
+              <button
+                style={{ width: '100%', textAlign: 'center', margin: 5 }}
+                onClick={onIncrease}
+              >
+                <span class="icon">
+                  <i class="mdi mdi-chevron-down" />
+                </span>
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function toTwoDigitString(n: number) {
+  if (n < 10) 
+    return `0${n}`;
+  
+  return `${n}`;
+}
diff --git a/packages/demobank-ui/src/context/translation.ts b/packages/demobank-ui/src/context/translation.ts
new file mode 100644
index 000000000..1879fe43e
--- /dev/null
+++ b/packages/demobank-ui/src/context/translation.ts
@@ -0,0 +1,73 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { createContext, h, VNode } from 'preact';
+import { useContext, useEffect } from 'preact/hooks';
+import { useLang } from '../hooks';
+import * as jedLib from 'jed';
+import { strings } from '../i18n/strings';
+
+interface Type {
+  lang: string;
+  handler: any;
+  changeLanguage: (l: string) => void;
+}
+const initial = {
+  lang: 'en',
+  handler: null,
+  changeLanguage: () => {
+    /**
+     * This function will be replaced by one with
+     * the same signature _but_ coming from the state.
+     * FIXME: clarify this design.
+     */
+  },
+};
+const Context = createContext<Type>(initial);
+
+interface Props {
+  initial?: string;
+  children: any;
+  forceLang?: string;
+}
+
+// Outmost UI wrapper.
+export const TranslationProvider = ({
+  initial,
+  children,
+  forceLang,
+}: Props): VNode => {
+
+  const [lang, changeLanguage] = useLang(initial);
+  useEffect(() => {
+    if (forceLang) 
+      changeLanguage(forceLang);
+    
+  });
+  console.log('lang store', strings);
+  const handler = new jedLib.Jed(strings[lang] || strings['en']);
+  return h(Context.Provider, {
+    value: { lang, handler, changeLanguage },
+    children,
+  });
+};
+
+export const useTranslationContext = (): Type => useContext(Context);
diff --git a/packages/demobank-ui/src/declaration.d.ts b/packages/demobank-ui/src/declaration.d.ts
new file mode 100644
index 000000000..73bccac71
--- /dev/null
+++ b/packages/demobank-ui/src/declaration.d.ts
@@ -0,0 +1,20 @@
+declare module '*.css' {
+  const mapping: Record<string, string>;
+  export default mapping;
+}
+declare module '*.svg' {
+  const content: any;
+  export default content;
+}
+declare module '*.jpeg' {
+  const content: any;
+  export default content;
+}
+declare module '*.png' {
+  const content: any;
+  export default content;
+}
+declare module 'jed' {
+  const x: any;
+  export = x;
+}
diff --git a/packages/demobank-ui/src/hooks/async.ts b/packages/demobank-ui/src/hooks/async.ts
new file mode 100644
index 000000000..be41b4e07
--- /dev/null
+++ b/packages/demobank-ui/src/hooks/async.ts
@@ -0,0 +1,80 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+import { useState } from 'preact/hooks';
+// import { cancelPendingRequest } from "./backend";
+
+export interface Options {
+  slowTolerance: number;
+}
+
+export interface AsyncOperationApi<T> {
+  request: (...a: any) => void;
+  cancel: () => void;
+  data: T | undefined;
+  isSlow: boolean;
+  isLoading: boolean;
+  error: string | undefined;
+}
+
+export function useAsync<T>(
+  fn?: (...args: any) => Promise<T>,
+  { slowTolerance: tooLong }: Options = { slowTolerance: 1000 },
+): AsyncOperationApi<T> {
+  const [data, setData] = useState<T | undefined>(undefined);
+  const [isLoading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<any>(undefined);
+  const [isSlow, setSlow] = useState(false);
+
+  const request = async (...args: any) => {
+    if (!fn) return;
+    setLoading(true);
+    const handler = setTimeout(() => {
+      setSlow(true);
+    }, tooLong);
+
+    try {
+      console.log('calling async', args);
+      const result = await fn(...args);
+      console.log('async back', result);
+      setData(result);
+    } catch (error) {
+      setError(error);
+    }
+    setLoading(false);
+    setSlow(false);
+    clearTimeout(handler);
+  };
+
+  function cancel() {
+    // cancelPendingRequest()
+    setLoading(false);
+    setSlow(false);
+  }
+
+  return {
+    request,
+    cancel,
+    data,
+    isSlow,
+    isLoading,
+    error,
+  };
+}
diff --git a/packages/demobank-ui/src/hooks/index.ts b/packages/demobank-ui/src/hooks/index.ts
new file mode 100644
index 000000000..795df909d
--- /dev/null
+++ b/packages/demobank-ui/src/hooks/index.ts
@@ -0,0 +1,151 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { StateUpdater, useState } from 'preact/hooks';
+export type ValueOrFunction<T> = T | ((p: T) => T);
+
+const calculateRootPath = () => {
+  const rootPath =
+    typeof window !== undefined
+      ? window.location.origin + window.location.pathname
+      : '/';
+  return rootPath;
+};
+
+export function useBackendURL(
+  url?: string,
+): [string, boolean, StateUpdater<string>, () => void] {
+  const [value, setter] = useNotNullLocalStorage(
+    'backend-url',
+    url || calculateRootPath(),
+  );
+  const [triedToLog, setTriedToLog] = useLocalStorage('tried-login');
+
+  const checkedSetter = (v: ValueOrFunction<string>) => {
+    setTriedToLog('yes');
+    return setter((p) => (v instanceof Function ? v(p) : v).replace(/\/$/, ''));
+  };
+
+  const resetBackend = () => {
+    setTriedToLog(undefined);
+  };
+  return [value, !!triedToLog, checkedSetter, resetBackend];
+}
+
+export function useBackendDefaultToken(): [
+  string | undefined,
+  StateUpdater<string | undefined>,
+  ] {
+  return useLocalStorage('backend-token');
+}
+
+export function useBackendInstanceToken(
+  id: string,
+): [string | undefined, StateUpdater<string | undefined>] {
+  const [token, setToken] = useLocalStorage(`backend-token-${id}`);
+  const [defaultToken, defaultSetToken] = useBackendDefaultToken();
+
+  // instance named 'default' use the default token
+  if (id === 'default')
+    return [defaultToken, defaultSetToken];
+
+  return [token, setToken];
+}
+
+export function useLang(initial?: string): [string, StateUpdater<string>] {
+  const browserLang =
+    typeof window !== 'undefined'
+      ? navigator.language || (navigator as any).userLanguage
+      : undefined;
+  const defaultLang = (browserLang || initial || 'en').substring(0, 2);
+  const [value, setValue] = useNotNullLocalStorage('lang-preference', defaultLang);
+  function updateValue(newValue: (string | ((v: string) => string))) {
+    if (document.body.parentElement) {
+      const htmlElement = document.body.parentElement
+      if (typeof newValue === 'string') {
+        htmlElement.lang = newValue;
+        setValue(newValue)
+      } else if (typeof newValue === 'function')
+        setValue((old) => {
+          const nv = newValue(old)
+          htmlElement.lang = nv;
+          return nv
+        })
+    } else setValue(newValue)
+  }
+  return [value, updateValue]
+}
+
+export function useLocalStorage(
+  key: string,
+  initialValue?: string,
+): [string | undefined, StateUpdater<string | undefined>] {
+  const [storedValue, setStoredValue] = useState<string | undefined>(():
+    | string
+    | undefined => {
+    return typeof window !== 'undefined'
+      ? window.localStorage.getItem(key) || initialValue
+      : initialValue;
+  });
+
+  const setValue = (
+    value?: string | ((val?: string) => string | undefined),
+  ) => {
+    setStoredValue((p) => {
+      const toStore = value instanceof Function ? value(p) : value;
+      if (typeof window !== 'undefined')
+        if (!toStore)
+          window.localStorage.removeItem(key);
+        else
+          window.localStorage.setItem(key, toStore);
+
+
+      return toStore;
+    });
+  };
+
+  return [storedValue, setValue];
+}
+
+export function useNotNullLocalStorage(
+  key: string,
+  initialValue: string,
+): [string, StateUpdater<string>] {
+  const [storedValue, setStoredValue] = useState<string>((): string => {
+    return typeof window !== 'undefined'
+      ? window.localStorage.getItem(key) || initialValue
+      : initialValue;
+  });
+
+  const setValue = (value: string | ((val: string) => string)) => {
+    const valueToStore = value instanceof Function ? value(storedValue) : value;
+    setStoredValue(valueToStore);
+    if (typeof window !== 'undefined')
+      if (!valueToStore)
+        window.localStorage.removeItem(key);
+      else
+        window.localStorage.setItem(key, valueToStore);
+
+
+  };
+
+  return [storedValue, setValue];
+}
diff --git a/packages/demobank-ui/src/i18n/bank.pot b/packages/demobank-ui/src/i18n/bank.pot
new file mode 100644
index 000000000..dcaba009d
--- /dev/null
+++ b/packages/demobank-ui/src/i18n/bank.pot
@@ -0,0 +1,258 @@
+#: /home/job/backoffice/packages/bank/src/components/picker/DurationPicker.tsx:55
+#, c-format
+msgid "days"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/components/picker/DurationPicker.tsx:65
+#, c-format
+msgid "hours"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/components/picker/DurationPicker.tsx:76
+#, c-format
+msgid "minutes"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/components/picker/DurationPicker.tsx:87
+#, c-format
+msgid "seconds"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:734
+#, c-format
+msgid "Clear"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:761
+#, c-format
+msgid "Logout"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:782
+#, c-format
+msgid "Demo Bank"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:837
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:840
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1189
+#, c-format
+msgid "Go back"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:845
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:906
+#, c-format
+msgid "Wire transfer"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:846
+#, c-format
+msgid "Transfer money to another account of this bank:"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:897
+#, c-format
+msgid "Want to try the raw payto://-format?"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:907
+#, c-format
+msgid "Transfer money via the Payto system:"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:916
+#, c-format
+msgid "payto address"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:926
+#, c-format
+msgid "Confirm"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:956
+#, c-format
+msgid "Confirm Withdrawal"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1026
+#, c-format
+msgid "Waiting the bank to create the operaion..."
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1044
+#, c-format
+msgid "This withdrawal was aborted!"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1051
+#, c-format
+msgid "Withdraw to a Taler Wallet"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1052
+#, c-format
+msgid "You can use this QR code to withdraw to your mobile wallet:"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1054
+#, c-format
+msgid "this link"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1060
+#, c-format
+msgid "Abort"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1084
+#, c-format
+msgid "Start withdrawal"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1101
+#, c-format
+msgid "Withdraw Money into a Taler wallet"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1105
+#, c-format
+msgid "Amount to withdraw"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1137
+#, c-format
+msgid "Please login!"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1169
+#, c-format
+msgid "Login"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1184
+#, c-format
+msgid "Register to the euFin bank!"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1194
+#, c-format
+msgid "Registration form"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1232
+#, c-format
+msgid "Register"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1272
+#, c-format
+msgid "Date"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1273
+#, c-format
+msgid "Amount"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1274
+#, c-format
+msgid "Counterpart"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1275
+#, c-format
+msgid "Subject"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1343
+#, c-format
+msgid "Username or account label '%1$s' not found.  Won't login."
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1365
+#, c-format
+msgid "Wrong credentials given."
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1374
+#, c-format
+msgid "Account information could not be retrieved."
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1394
+#, c-format
+msgid "Close wire transfer"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1412
+#, c-format
+msgid "Close Taler withdrawal"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1457
+#, c-format
+msgid "Bank account balance:"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1469
+#, c-format
+msgid "Latest transactions:"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1474
+#, c-format
+msgid "Transfer money manually"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1543
+#, c-format
+msgid "List of public accounts was not found."
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1552
+#, c-format
+msgid "List of public accounts could not be retrieved."
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1584
+#, c-format
+msgid "History of public accounts"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1643
+#, c-format
+msgid "Page has a problem: logged in but backend state is lost."
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1667
+#, c-format
+msgid "Welcome to the euFin bank!"
+msgstr ""
+
+#  This file is part of GNU Taler
+#  (C) 2021 Taler Systems S.A.
+#  GNU Taler is free software; you can redistribute it and/or modify it under the
+#  terms of the GNU General Public License as published by the Free Software
+#  Foundation; either version 3, or (at your option) any later version.
+#  GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+#  WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+#  A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+#  You should have received a copy of the GNU General Public License along with
+#  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+#
+#, fuzzy
+msgid ""
+msgstr ""
+"Project-Id-Version: Taler Wallet\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2016-11-23 00:00+0100\n"
+"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
+"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
+"Language-Team: LANGUAGE <LL@li.org>\n"
+"Language: \n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
diff --git a/packages/demobank-ui/src/i18n/de.po b/packages/demobank-ui/src/i18n/de.po
new file mode 100644
index 000000000..bd4158037
--- /dev/null
+++ b/packages/demobank-ui/src/i18n/de.po
@@ -0,0 +1,257 @@
+#: /home/job/backoffice/packages/bank/src/components/picker/DurationPicker.tsx:55
+#, c-format
+msgid "days"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/components/picker/DurationPicker.tsx:65
+#, c-format
+msgid "hours"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/components/picker/DurationPicker.tsx:76
+#, c-format
+msgid "minutes"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/components/picker/DurationPicker.tsx:87
+#, c-format
+msgid "seconds"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:734
+#, c-format
+msgid "Clear"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:761
+#, c-format
+msgid "Logout"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:782
+#, c-format
+msgid "Demo Bank"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:837
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:840
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1189
+#, c-format
+msgid "Go back"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:845
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:906
+#, c-format
+msgid "Wire transfer"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:846
+#, c-format
+msgid "Transfer money to another account of this bank:"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:897
+#, c-format
+msgid "Want to try the raw payto://-format?"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:907
+#, c-format
+msgid "Transfer money via the Payto system:"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:916
+#, c-format
+msgid "payto address"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:926
+#, c-format
+msgid "Confirm"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:956
+#, c-format
+msgid "Confirm Withdrawal"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1026
+#, c-format
+msgid "Waiting the bank to create the operaion..."
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1044
+#, c-format
+msgid "This withdrawal was aborted!"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1051
+#, c-format
+msgid "Withdraw to a Taler Wallet"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1052
+#, c-format
+msgid "You can use this QR code to withdraw to your mobile wallet:"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1054
+#, c-format
+msgid "this link"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1060
+#, c-format
+msgid "Abort"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1084
+#, c-format
+msgid "Start withdrawal"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1101
+#, c-format
+msgid "Withdraw Money into a Taler wallet"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1105
+#, c-format
+msgid "Amount to withdraw"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1137
+#, c-format
+msgid "Please login!"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1169
+#, c-format
+msgid "Login"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1184
+#, c-format
+msgid "Register to the euFin bank!"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1194
+#, c-format
+msgid "Registration form"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1232
+#, c-format
+msgid "Register"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1272
+#, c-format
+msgid "Date"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1273
+#, c-format
+msgid "Amount"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1274
+#, c-format
+msgid "Counterpart"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1275
+#, c-format
+msgid "Subject"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1343
+#, c-format
+msgid "Username or account label '%1$s' not found.  Won't login."
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1365
+#, c-format
+msgid "Wrong credentials given."
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1374
+#, c-format
+msgid "Account information could not be retrieved."
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1394
+#, c-format
+msgid "Close wire transfer"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1412
+#, c-format
+msgid "Close Taler withdrawal"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1457
+#, c-format
+msgid "Bank account balance:"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1469
+#, c-format
+msgid "Latest transactions:"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1474
+#, c-format
+msgid "Transfer money manually"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1543
+#, c-format
+msgid "List of public accounts was not found."
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1552
+#, c-format
+msgid "List of public accounts could not be retrieved."
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1584
+#, c-format
+msgid "History of public accounts"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1643
+#, c-format
+msgid "Page has a problem: logged in but backend state is lost."
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1667
+#, c-format
+msgid "Welcome to the euFin bank!"
+msgstr ""
+
+#  This file is part of GNU Taler
+#  (C) 2021 Taler Systems S.A.
+#  GNU Taler is free software; you can redistribute it and/or modify it under the
+#  terms of the GNU General Public License as published by the Free Software
+#  Foundation; either version 3, or (at your option) any later version.
+#  GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+#  WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+#  A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+#  You should have received a copy of the GNU General Public License along with
+#  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+#
+msgid ""
+msgstr ""
+"Project-Id-Version: Taler Wallet\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2016-11-23 00:00+0100\n"
+"PO-Revision-Date: 2022-01-08 09:57+0100\n"
+"Last-Translator:  <translate@taler.net>\n"
+"Language-Team: German\n"
+"Language: de\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
diff --git a/packages/demobank-ui/src/i18n/en.po b/packages/demobank-ui/src/i18n/en.po
new file mode 100644
index 000000000..4cbc9e74c
--- /dev/null
+++ b/packages/demobank-ui/src/i18n/en.po
@@ -0,0 +1,266 @@
+#: /home/job/backoffice/packages/bank/src/components/picker/DurationPicker.tsx:55
+#, c-format
+msgid "days"
+msgstr "days"
+
+#: /home/job/backoffice/packages/bank/src/components/picker/DurationPicker.tsx:65
+#, c-format
+msgid "hours"
+msgstr "hours"
+
+#: /home/job/backoffice/packages/bank/src/components/picker/DurationPicker.tsx:76
+#, c-format
+msgid "minutes"
+msgstr "minutes"
+
+#: /home/job/backoffice/packages/bank/src/components/picker/DurationPicker.tsx:87
+#, c-format
+msgid "seconds"
+msgstr "seconds"
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:734
+#, c-format
+msgid "Clear"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:761
+#, c-format
+msgid "Logout"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:782
+#, c-format
+msgid "Demo Bank"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:837
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:840
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1189
+#, c-format
+msgid "Go back"
+msgstr "Go back"
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:845
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:906
+#, c-format
+msgid "Wire transfer"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:846
+#, c-format
+msgid "Transfer money to another account of this bank:"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:897
+#, c-format
+msgid "Want to try the raw payto://-format?"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:907
+#, c-format
+msgid "Transfer money via the Payto system:"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:916
+#, c-format
+msgid "payto address"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:926
+#, c-format
+msgid "Confirm"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:956
+#, fuzzy, c-format
+msgid "Confirm Withdrawal"
+msgstr "Confirm withdrawal"
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1026
+#, c-format
+msgid "Waiting the bank to create the operaion..."
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1044
+#, c-format
+msgid "This withdrawal was aborted!"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1051
+#, fuzzy, c-format
+msgid "Withdraw to a Taler Wallet"
+msgstr "Charge Taler wallet"
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1052
+#, c-format
+msgid "You can use this QR code to withdraw to your mobile wallet:"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1054
+#, c-format
+msgid "this link"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1060
+#, c-format
+msgid "Abort"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1084
+#, fuzzy, c-format
+msgid "Start withdrawal"
+msgstr "Start withdrawal"
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1101
+#, fuzzy, c-format
+msgid "Withdraw Money into a Taler wallet"
+msgstr "Charge Taler wallet"
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1105
+#, fuzzy, c-format
+msgid "Amount to withdraw"
+msgstr "Amount to withdraw"
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1137
+#, c-format
+msgid "Please login!"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1169
+#, c-format
+msgid "Login"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1184
+#, c-format
+msgid "Register to the euFin bank!"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1194
+#, c-format
+msgid "Registration form"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1232
+#, c-format
+msgid "Register"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1272
+#, c-format
+msgid "Date"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1273
+#, c-format
+msgid "Amount"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1274
+#, c-format
+msgid "Counterpart"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1275
+#, c-format
+msgid "Subject"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1343
+#, c-format
+msgid "Username or account label '%1$s' not found.  Won't login."
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1365
+#, c-format
+msgid "Wrong credentials given."
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1374
+#, c-format
+msgid "Account information could not be retrieved."
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1394
+#, c-format
+msgid "Close wire transfer"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1412
+#, fuzzy, c-format
+msgid "Close Taler withdrawal"
+msgstr "Close Taler withdrawal"
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1457
+#, c-format
+msgid "Bank account balance:"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1469
+#, c-format
+msgid "Latest transactions:"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1474
+#, c-format
+msgid "Transfer money manually"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1543
+#, c-format
+msgid "List of public accounts was not found."
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1552
+#, c-format
+msgid "List of public accounts could not be retrieved."
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1584
+#, c-format
+msgid "History of public accounts"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1643
+#, c-format
+msgid "Page has a problem: logged in but backend state is lost."
+msgstr "Page has a problem: logged in but backend state is lost."
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1667
+#, fuzzy, c-format
+msgid "Welcome to the euFin bank!"
+msgstr "Welcome to euFin bank: Taler+IBAN now possible!"
+
+#  This file is part of GNU Taler
+#  (C) 2021 Taler Systems S.A.
+#  GNU Taler is free software; you can redistribute it and/or modify it under the
+#  terms of the GNU General Public License as published by the Free Software
+#  Foundation; either version 3, or (at your option) any later version.
+#  GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+#  WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+#  A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+#  You should have received a copy of the GNU General Public License along with
+#  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+#
+msgid ""
+msgstr ""
+"Project-Id-Version: Taler Wallet\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2016-11-23 00:00+0100\n"
+"PO-Revision-Date: 2022-01-08 09:57+0100\n"
+"Last-Translator:  <translate@taler.net>\n"
+"Language-Team: English\n"
+"Language: en\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+#~ msgid "Page has a problem:"
+#~ msgstr "Page has a problem:"
+
+#~ msgid "Close"
+#~ msgstr "Close"
+
+#~ msgid "Sign in"
+#~ msgstr "Sign in"
diff --git a/packages/demobank-ui/src/i18n/index.tsx b/packages/demobank-ui/src/i18n/index.tsx
new file mode 100644
index 000000000..9882525a1
--- /dev/null
+++ b/packages/demobank-ui/src/i18n/index.tsx
@@ -0,0 +1,211 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ * Translation helpers for React components and template literals.
+ */
+
+/**
+ * Imports
+ */
+import { ComponentChild, ComponentChildren, h, Fragment, VNode } from 'preact';
+
+import { useTranslationContext } from '../context/translation';
+
+export function useTranslator() {
+  const ctx = useTranslationContext();
+  const jed = ctx.handler;
+  return function str(
+    stringSeq: TemplateStringsArray,
+    ...values: any[]
+  ): string {
+    const s = toI18nString(stringSeq);
+    if (!s) return s;
+    const tr = jed
+      .translate(s)
+      .ifPlural(1, s)
+      .fetch(...values);
+    return tr;
+  };
+}
+
+/**
+ * Convert template strings to a msgid
+ */
+function toI18nString(stringSeq: ReadonlyArray<string>): string {
+  let s = '';
+  for (let i = 0; i < stringSeq.length; i++) {
+    s += stringSeq[i];
+    if (i < stringSeq.length - 1) 
+      s += `%${i + 1}$s`;
+    
+  }
+  return s;
+}
+
+interface TranslateSwitchProps {
+  target: number;
+  children: ComponentChildren;
+}
+
+function stringifyChildren(children: ComponentChildren): string {
+  let n = 1;
+  const ss = (children instanceof Array ? children : [children]).map((c) => {
+    if (typeof c === 'string') 
+      return c;
+    
+    return `%${n++}$s`;
+  });
+  const s = ss.join('').replace(/ +/g, ' ').trim();
+  return s;
+}
+
+interface TranslateProps {
+  children: ComponentChildren;
+  /**
+   * Component that the translated element should be wrapped in.
+   * Defaults to "div".
+   */
+  wrap?: any;
+
+  /**
+   * Props to give to the wrapped component.
+   */
+  wrapProps?: any;
+}
+
+function getTranslatedChildren(
+  translation: string,
+  children: ComponentChildren,
+): ComponentChild[] {
+  const tr = translation.split(/%(\d+)\$s/);
+  const childArray = children instanceof Array ? children : [children];
+  // Merge consecutive string children.
+  const placeholderChildren = Array<ComponentChild>();
+  for (let i = 0; i < childArray.length; i++) {
+    const x = childArray[i];
+    if (x === undefined) 
+      continue;
+    else if (typeof x === 'string') 
+      continue;
+    else 
+      placeholderChildren.push(x);
+    
+  }
+  const result = Array<ComponentChild>();
+  for (let i = 0; i < tr.length; i++) 
+    if (i % 2 == 0) 
+      // Text
+      result.push(tr[i]);
+    else {
+      const childIdx = Number.parseInt(tr[i], 10) - 1;
+      result.push(placeholderChildren[childIdx]);
+    }
+  
+  return result;
+}
+
+/**
+ * Translate text node children of this component.
+ * If a child component might produce a text node, it must be wrapped
+ * in a another non-text element.
+ *
+ * Example:
+ * ```
+ * <Translate>
+ * Hello.  Your score is <span><PlayerScore player={player} /></span>
+ * </Translate>
+ * ```
+ */
+export function Translate({ children }: TranslateProps): VNode {
+  const s = stringifyChildren(children);
+  const ctx = useTranslationContext();
+  const translation: string = ctx.handler.ngettext(s, s, 1);
+  const result = getTranslatedChildren(translation, children);
+  return <Fragment>{result}</Fragment>;
+}
+
+/**
+ * Switch translation based on singular or plural based on the target prop.
+ * Should only contain TranslateSingular and TransplatePlural as children.
+ *
+ * Example:
+ * ```
+ * <TranslateSwitch target={n}>
+ *  <TranslateSingular>I have {n} apple.</TranslateSingular>
+ *  <TranslatePlural>I have {n} apples.</TranslatePlural>
+ * </TranslateSwitch>
+ * ```
+ */
+export function TranslateSwitch({ children, target }: TranslateSwitchProps) {
+  let singular: VNode<TranslationPluralProps> | undefined;
+  let plural: VNode<TranslationPluralProps> | undefined;
+  // const children = this.props.children;
+  if (children) 
+    (children instanceof Array ? children : [children]).forEach(
+      (child: any) => {
+        if (child.type === TranslatePlural) 
+          plural = child;
+        
+        if (child.type === TranslateSingular) 
+          singular = child;
+        
+      },
+    );
+  
+  if (!singular || !plural) {
+    console.error('translation not found');
+    return h('span', {}, ['translation not found']);
+  }
+  singular.props.target = target;
+  plural.props.target = target;
+  // We're looking up the translation based on the
+  // singular, even if we must use the plural form.
+  return singular;
+}
+
+interface TranslationPluralProps {
+  children: ComponentChildren;
+  target: number;
+}
+
+/**
+ * See [[TranslateSwitch]].
+ */
+export function TranslatePlural({
+  children,
+  target,
+}: TranslationPluralProps): VNode {
+  const s = stringifyChildren(children);
+  const ctx = useTranslationContext();
+  const translation = ctx.handler.ngettext(s, s, 1);
+  const result = getTranslatedChildren(translation, children);
+  return <Fragment>{result}</Fragment>;
+}
+
+/**
+ * See [[TranslateSwitch]].
+ */
+export function TranslateSingular({
+  children,
+  target,
+}: TranslationPluralProps): VNode {
+  const s = stringifyChildren(children);
+  const ctx = useTranslationContext();
+  const translation = ctx.handler.ngettext(s, s, target);
+  const result = getTranslatedChildren(translation, children);
+  return <Fragment>{result}</Fragment>;
+}
diff --git a/packages/demobank-ui/src/i18n/it.po b/packages/demobank-ui/src/i18n/it.po
new file mode 100644
index 000000000..91a30b947
--- /dev/null
+++ b/packages/demobank-ui/src/i18n/it.po
@@ -0,0 +1,258 @@
+#: /home/job/backoffice/packages/bank/src/components/picker/DurationPicker.tsx:55
+#, c-format
+msgid "days"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/components/picker/DurationPicker.tsx:65
+#, c-format
+msgid "hours"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/components/picker/DurationPicker.tsx:76
+#, c-format
+msgid "minutes"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/components/picker/DurationPicker.tsx:87
+#, c-format
+msgid "seconds"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:734
+#, c-format
+msgid "Clear"
+msgstr "Cancella"
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:761
+#, c-format
+msgid "Logout"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:782
+#, c-format
+msgid "Demo Bank"
+msgstr "Banca 'demo'"
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:837
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:840
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1189
+#, c-format
+msgid "Go back"
+msgstr "Indietro"
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:845
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:906
+#, c-format
+msgid "Wire transfer"
+msgstr "Bonifico"
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:846
+#, c-format
+msgid "Transfer money to another account of this bank:"
+msgstr "Trasferisci fondi a un altro conto di questa banca:"
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:897
+#, c-format
+msgid "Want to try the raw payto://-format?"
+msgstr "Prova il trasferimento tramite il formato Payto!"
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:907
+#, c-format
+msgid "Transfer money via the Payto system:"
+msgstr "Effettua un bonifico tramite il sistema Payto:"
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:916
+#, c-format
+msgid "payto address"
+msgstr "indirizzo Payto"
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:926
+#, c-format
+msgid "Confirm"
+msgstr "Conferma"
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:956
+#, c-format
+msgid "Confirm Withdrawal"
+msgstr "Conferma il ritiro"
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1026
+#, c-format
+msgid "Waiting the bank to create the operaion..."
+msgstr "La banca sta creando l'operazione..."
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1044
+#, c-format
+msgid "This withdrawal was aborted!"
+msgstr "Questo ritiro è stato annullato!"
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1051
+#, c-format
+msgid "Withdraw to a Taler Wallet"
+msgstr "Ritira contante nel portafoglio Taler"
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1052
+#, c-format
+msgid "You can use this QR code to withdraw to your mobile wallet:"
+msgstr "Usa questo codice QR per ritirare contante nel tuo wallet:"
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1054
+#, c-format
+msgid "this link"
+msgstr "questo link"
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1060
+#, c-format
+msgid "Abort"
+msgstr "Annulla"
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1084
+#, c-format
+msgid "Start withdrawal"
+msgstr "Ritira contante"
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1101
+#, c-format
+msgid "Withdraw Money into a Taler wallet"
+msgstr "Ritira contante nel portafoglio Taler"
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1105
+#, c-format
+msgid "Amount to withdraw"
+msgstr "Somma da ritirare"
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1137
+#, c-format
+msgid "Please login!"
+msgstr "Accedi!"
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1169
+#, c-format
+msgid "Login"
+msgstr "Accedi"
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1184
+#, c-format
+msgid "Register to the euFin bank!"
+msgstr "Apri un conto in banca euFin!"
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1194
+#, c-format
+msgid "Registration form"
+msgstr "Registrazione"
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1232
+#, c-format
+msgid "Register"
+msgstr "Registrati"
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1272
+#, c-format
+msgid "Date"
+msgstr ""
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1273
+#, c-format
+msgid "Amount"
+msgstr "Somma"
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1274
+#, c-format
+msgid "Counterpart"
+msgstr "Controparte"
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1275
+#, c-format
+msgid "Subject"
+msgstr "Causale"
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1343
+#, c-format
+msgid "Username or account label '%1$s' not found.  Won't login."
+msgstr "L'utente '%1$s' non esiste.  Login impossibile"
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1365
+#, c-format
+msgid "Wrong credentials given."
+msgstr "Credenziali invalide."
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1374
+#, c-format
+msgid "Account information could not be retrieved."
+msgstr "Impossibile ricevere le informazioni relative al conto."
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1394
+#, c-format
+msgid "Close wire transfer"
+msgstr "Chiudi il bonifico"
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1412
+#, c-format
+msgid "Close Taler withdrawal"
+msgstr "Chiudi il ritiro Taler"
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1457
+#, c-format
+msgid "Bank account balance:"
+msgstr "Bilancio:"
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1469
+#, c-format
+msgid "Latest transactions:"
+msgstr "Ultime transazioni:"
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1474
+#, c-format
+msgid "Transfer money manually"
+msgstr "Effettua un bonifico"
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1543
+#, c-format
+msgid "List of public accounts was not found."
+msgstr "Lista conti pubblici non trovata."
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1552
+#, c-format
+msgid "List of public accounts could not be retrieved."
+msgstr "Lista conti pubblici non pervenuta."
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1584
+#, c-format
+msgid "History of public accounts"
+msgstr "Storico dei conti pubblici"
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1643
+#, c-format
+msgid "Page has a problem: logged in but backend state is lost."
+msgstr ""
+"Stato inconsistente: accesso utente effettuato ma stato con server perso."
+
+#: /home/job/backoffice/packages/bank/src/pages/home/index.tsx:1667
+#, fuzzy, c-format
+msgid "Welcome to the euFin bank!"
+msgstr "Benvenuti in banca euFin!"
+
+#  This file is part of GNU Taler
+#  (C) 2021 Taler Systems S.A.
+#  GNU Taler is free software; you can redistribute it and/or modify it under the
+#  terms of the GNU General Public License as published by the Free Software
+#  Foundation; either version 3, or (at your option) any later version.
+#  GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+#  WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+#  A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+#  You should have received a copy of the GNU General Public License along with
+#  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+#
+msgid ""
+msgstr ""
+"Project-Id-Version: Taler Wallet\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2016-11-23 00:00+0100\n"
+"PO-Revision-Date: 2022-01-08 10:05+0100\n"
+"Last-Translator:  <translate@taler.net>\n"
+"Language-Team: Italian\n"
+"Language: it\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
diff --git a/packages/demobank-ui/src/i18n/poheader b/packages/demobank-ui/src/i18n/poheader
new file mode 100644
index 000000000..ee3fcd7be
--- /dev/null
+++ b/packages/demobank-ui/src/i18n/poheader
@@ -0,0 +1,27 @@
+#  This file is part of GNU Taler
+#  (C) 2021 Taler Systems S.A.
+
+#  GNU Taler is free software; you can redistribute it and/or modify it under the
+#  terms of the GNU General Public License as published by the Free Software
+#  Foundation; either version 3, or (at your option) any later version.
+
+#  GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+#  WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+#  A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+#  You should have received a copy of the GNU General Public License along with
+#  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+
+#
+#, fuzzy
+msgid ""
+msgstr ""
+"Project-Id-Version: Taler Wallet\n"
+"Report-Msgid-Bugs-To: taler@gnu.org\n"
+"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
+"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
+"Language-Team: LANGUAGE <LL@li.org>\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
diff --git a/packages/demobank-ui/src/i18n/strings-prelude b/packages/demobank-ui/src/i18n/strings-prelude
new file mode 100644
index 000000000..cca13afad
--- /dev/null
+++ b/packages/demobank-ui/src/i18n/strings-prelude
@@ -0,0 +1,19 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/*eslint quote-props: ["error", "consistent"]*/
+export const strings: {[s: string]: any} = {};
+
diff --git a/packages/demobank-ui/src/i18n/strings.ts b/packages/demobank-ui/src/i18n/strings.ts
new file mode 100644
index 000000000..1a3c72f85
--- /dev/null
+++ b/packages/demobank-ui/src/i18n/strings.ts
@@ -0,0 +1,472 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/*eslint quote-props: ["error", "consistent"]*/
+export const strings: {[s: string]: any} = {};
+
+strings['de'] = {
+  'domain': 'messages',
+  'locale_data': {
+    'messages': {
+      'days': [
+        ''
+      ],
+      'hours': [
+        ''
+      ],
+      'minutes': [
+        ''
+      ],
+      'seconds': [
+        ''
+      ],
+      'Clear': [
+        ''
+      ],
+      'Logout': [
+        ''
+      ],
+      'Demo Bank': [
+        ''
+      ],
+      'Go back': [
+        ''
+      ],
+      'Wire transfer': [
+        ''
+      ],
+      'Transfer money to another account of this bank:': [
+        ''
+      ],
+      'Want to try the raw payto://-format?': [
+        ''
+      ],
+      'Transfer money via the Payto system:': [
+        ''
+      ],
+      'payto address': [
+        ''
+      ],
+      'Confirm': [
+        ''
+      ],
+      'Confirm Withdrawal': [
+        ''
+      ],
+      'Waiting the bank to create the operaion...': [
+        ''
+      ],
+      'This withdrawal was aborted!': [
+        ''
+      ],
+      'Withdraw to a Taler Wallet': [
+        ''
+      ],
+      'You can use this QR code to withdraw to your mobile wallet:': [
+        ''
+      ],
+      'this link': [
+        ''
+      ],
+      'Abort': [
+        ''
+      ],
+      'Start withdrawal': [
+        ''
+      ],
+      'Withdraw Money into a Taler wallet': [
+        ''
+      ],
+      'Amount to withdraw': [
+        ''
+      ],
+      'Please login!': [
+        ''
+      ],
+      'Login': [
+        ''
+      ],
+      'Register to the euFin bank!': [
+        ''
+      ],
+      'Registration form': [
+        ''
+      ],
+      'Register': [
+        ''
+      ],
+      'Date': [
+        ''
+      ],
+      'Amount': [
+        ''
+      ],
+      'Counterpart': [
+        ''
+      ],
+      'Subject': [
+        ''
+      ],
+      'Username or account label \'%1$s\' not found.  Won\'t login.': [
+        ''
+      ],
+      'Wrong credentials given.': [
+        ''
+      ],
+      'Account information could not be retrieved.': [
+        ''
+      ],
+      'Close wire transfer': [
+        ''
+      ],
+      'Close Taler withdrawal': [
+        ''
+      ],
+      'Bank account balance:': [
+        ''
+      ],
+      'Latest transactions:': [
+        ''
+      ],
+      'Transfer money manually': [
+        ''
+      ],
+      'List of public accounts was not found.': [
+        ''
+      ],
+      'List of public accounts could not be retrieved.': [
+        ''
+      ],
+      'History of public accounts': [
+        ''
+      ],
+      'Page has a problem: logged in but backend state is lost.': [
+        ''
+      ],
+      'Welcome to the euFin bank!': [
+        ''
+      ],
+      '': {
+        'domain': 'messages',
+        'plural_forms': 'nplurals=2; plural=(n != 1);',
+        'lang': 'de'
+      }
+    }
+  }
+};
+
+strings['en'] = {
+  'domain': 'messages',
+  'locale_data': {
+    'messages': {
+      'days': [
+        'days'
+      ],
+      'hours': [
+        'hours'
+      ],
+      'minutes': [
+        'minutes'
+      ],
+      'seconds': [
+        'seconds'
+      ],
+      'Clear': [
+        ''
+      ],
+      'Logout': [
+        ''
+      ],
+      'Demo Bank': [
+        ''
+      ],
+      'Go back': [
+        'Go back'
+      ],
+      'Wire transfer': [
+        ''
+      ],
+      'Transfer money to another account of this bank:': [
+        ''
+      ],
+      'Want to try the raw payto://-format?': [
+        ''
+      ],
+      'Transfer money via the Payto system:': [
+        ''
+      ],
+      'payto address': [
+        ''
+      ],
+      'Confirm': [
+        ''
+      ],
+      'Confirm Withdrawal': [
+        'Confirm withdrawal'
+      ],
+      'Waiting the bank to create the operaion...': [
+        ''
+      ],
+      'This withdrawal was aborted!': [
+        ''
+      ],
+      'Withdraw to a Taler Wallet': [
+        'Charge Taler wallet'
+      ],
+      'You can use this QR code to withdraw to your mobile wallet:': [
+        ''
+      ],
+      'this link': [
+        ''
+      ],
+      'Abort': [
+        ''
+      ],
+      'Start withdrawal': [
+        'Start withdrawal'
+      ],
+      'Withdraw Money into a Taler wallet': [
+        'Charge Taler wallet'
+      ],
+      'Amount to withdraw': [
+        'Amount to withdraw'
+      ],
+      'Please login!': [
+        ''
+      ],
+      'Login': [
+        ''
+      ],
+      'Register to the euFin bank!': [
+        ''
+      ],
+      'Registration form': [
+        ''
+      ],
+      'Register': [
+        ''
+      ],
+      'Date': [
+        ''
+      ],
+      'Amount': [
+        ''
+      ],
+      'Counterpart': [
+        ''
+      ],
+      'Subject': [
+        ''
+      ],
+      'Username or account label \'%1$s\' not found.  Won\'t login.': [
+        ''
+      ],
+      'Wrong credentials given.': [
+        ''
+      ],
+      'Account information could not be retrieved.': [
+        ''
+      ],
+      'Close wire transfer': [
+        ''
+      ],
+      'Close Taler withdrawal': [
+        'Close Taler withdrawal'
+      ],
+      'Bank account balance:': [
+        ''
+      ],
+      'Latest transactions:': [
+        ''
+      ],
+      'Transfer money manually': [
+        ''
+      ],
+      'List of public accounts was not found.': [
+        ''
+      ],
+      'List of public accounts could not be retrieved.': [
+        ''
+      ],
+      'History of public accounts': [
+        ''
+      ],
+      'Page has a problem: logged in but backend state is lost.': [
+        'Page has a problem: logged in but backend state is lost.'
+      ],
+      'Welcome to the euFin bank!': [
+        'Welcome to euFin bank: Taler+IBAN now possible!'
+      ],
+      '': {
+        'domain': 'messages',
+        'plural_forms': 'nplurals=2; plural=(n != 1);',
+        'lang': 'en'
+      }
+    }
+  }
+};
+
+strings['it'] = {
+  'domain': 'messages',
+  'locale_data': {
+    'messages': {
+      'days': [
+        ''
+      ],
+      'hours': [
+        ''
+      ],
+      'minutes': [
+        ''
+      ],
+      'seconds': [
+        ''
+      ],
+      'Clear': [
+        'Cancella'
+      ],
+      'Logout': [
+        ''
+      ],
+      'Demo Bank': [
+        'Banca \'demo\''
+      ],
+      'Go back': [
+        'Indietro'
+      ],
+      'Wire transfer': [
+        'Bonifico'
+      ],
+      'Transfer money to another account of this bank:': [
+        'Trasferisci fondi a un altro conto di questa banca:'
+      ],
+      'Want to try the raw payto://-format?': [
+        'Prova il trasferimento tramite il formato Payto!'
+      ],
+      'Transfer money via the Payto system:': [
+        'Effettua un bonifico tramite il sistema Payto:'
+      ],
+      'payto address': [
+        'indirizzo Payto'
+      ],
+      'Confirm': [
+        'Conferma'
+      ],
+      'Confirm Withdrawal': [
+        'Conferma il ritiro'
+      ],
+      'Waiting the bank to create the operaion...': [
+        'La banca sta creando l\'operazione...'
+      ],
+      'This withdrawal was aborted!': [
+        'Questo ritiro è stato annullato!'
+      ],
+      'Withdraw to a Taler Wallet': [
+        'Ritira contante nel portafoglio Taler'
+      ],
+      'You can use this QR code to withdraw to your mobile wallet:': [
+        'Usa questo codice QR per ritirare contante nel tuo wallet:'
+      ],
+      'this link': [
+        'questo link'
+      ],
+      'Abort': [
+        'Annulla'
+      ],
+      'Start withdrawal': [
+        'Ritira contante'
+      ],
+      'Withdraw Money into a Taler wallet': [
+        'Ritira contante nel portafoglio Taler'
+      ],
+      'Amount to withdraw': [
+        'Somma da ritirare'
+      ],
+      'Please login!': [
+        'Accedi!'
+      ],
+      'Login': [
+        'Accedi'
+      ],
+      'Register to the euFin bank!': [
+        'Apri un conto in banca euFin!'
+      ],
+      'Registration form': [
+        'Registrazione'
+      ],
+      'Register': [
+        'Registrati'
+      ],
+      'Date': [
+        ''
+      ],
+      'Amount': [
+        'Somma'
+      ],
+      'Counterpart': [
+        'Controparte'
+      ],
+      'Subject': [
+        'Causale'
+      ],
+      'Username or account label \'%1$s\' not found.  Won\'t login.': [
+        'L\'utente \'%1$s\' non esiste.  Login impossibile'
+      ],
+      'Wrong credentials given.': [
+        'Credenziali invalide.'
+      ],
+      'Account information could not be retrieved.': [
+        'Impossibile ricevere le informazioni relative al conto.'
+      ],
+      'Close wire transfer': [
+        'Chiudi il bonifico'
+      ],
+      'Close Taler withdrawal': [
+        'Chiudi il ritiro Taler'
+      ],
+      'Bank account balance:': [
+        'Bilancio:'
+      ],
+      'Latest transactions:': [
+        'Ultime transazioni:'
+      ],
+      'Transfer money manually': [
+        'Effettua un bonifico'
+      ],
+      'List of public accounts was not found.': [
+        'Lista conti pubblici non trovata.'
+      ],
+      'List of public accounts could not be retrieved.': [
+        'Lista conti pubblici non pervenuta.'
+      ],
+      'History of public accounts': [
+        'Storico dei conti pubblici'
+      ],
+      'Page has a problem: logged in but backend state is lost.': [
+        'Stato inconsistente: accesso utente effettuato ma stato con server perso.'
+      ],
+      'Welcome to the euFin bank!': [
+        'Benvenuti in banca euFin!'
+      ],
+      '': {
+        'domain': 'messages',
+        'plural_forms': 'nplurals=2; plural=(n != 1);',
+        'lang': 'it'
+      }
+    }
+  }
+};
+
diff --git a/packages/demobank-ui/src/index.tsx b/packages/demobank-ui/src/index.tsx
new file mode 100644
index 000000000..a2f7b30f8
--- /dev/null
+++ b/packages/demobank-ui/src/index.tsx
@@ -0,0 +1,3 @@
+import App from './components/app';
+
+export default App;
diff --git a/packages/demobank-ui/src/manifest.json b/packages/demobank-ui/src/manifest.json
new file mode 100644
index 000000000..feca12a0e
--- /dev/null
+++ b/packages/demobank-ui/src/manifest.json
@@ -0,0 +1,21 @@
+{
+  "name": "taler-bank",
+  "short_name": "taler-bank",
+  "start_url": "/",
+  "display": "standalone",
+  "orientation": "portrait",
+  "background_color": "#fff",
+  "theme_color": "#673ab8",
+  "icons": [
+    {
+      "src": "/assets/icons/android-chrome-192x192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "/assets/icons/android-chrome-512x512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/packages/demobank-ui/src/pages/home/index.tsx b/packages/demobank-ui/src/pages/home/index.tsx
new file mode 100644
index 000000000..bf9764b78
--- /dev/null
+++ b/packages/demobank-ui/src/pages/home/index.tsx
@@ -0,0 +1,2018 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import useSWR, { SWRConfig as _SWRConfig, useSWRConfig } from 'swr';
+import { h, Fragment, VNode, createContext } from 'preact';
+import { useRef, useState, useEffect, StateUpdater, useContext } from 'preact/hooks';
+import { Buffer } from 'buffer';
+import { useTranslator, Translate } from '../../i18n';
+import { QR } from '../../components/QR';
+import { useNotNullLocalStorage, useLocalStorage } from '../../hooks';
+import '../../scss/main.scss';
+import talerLogo from '../../assets/logo-white.svg';
+import { LangSelectorLikePy as LangSelector } from '../../components/menu/LangSelector';
+
+// FIXME: Fix usages of SWRConfig, doing this isn't the best practice (but hey, it works for now)
+const SWRConfig = _SWRConfig as any;
+
+const UI_ALLOW_REGISTRATIONS = ('__LIBEUFIN_UI_ALLOW_REGISTRATIONS__') ?? 1;
+const UI_IS_DEMO = ('__LIBEUFIN_UI_IS_DEMO__') ?? 0;
+const UI_BANK_NAME = ('__LIBEUFIN_UI_BANK_NAME__') ?? 'Taler Bank';
+
+/**
+ * FIXME:
+ *
+ * - INPUT elements have their 'required' attribute ignored.
+ *
+ * - the page needs a "home" button that either redirects to
+ *   the profile page (when the user is logged in), or to
+ *   the very initial home page.
+ *
+ * - histories 'pages' are grouped in UL elements that cause
+ *   the rendering to visually separate each UL.  History elements
+ *   should instead line up without any separation caused by
+ *   a implementation detail.
+ *
+ * - Many strings need to be i18n-wrapped.
+ */
+
+/***********
+ * Globals *
+ **********/
+
+/************
+ * Contexts *
+ ***********/
+const CurrencyContext = createContext<any>(null);
+const PageContext = createContext<any>(null);
+
+/**********************************************
+ * Type definitions for states and API calls. *
+ *********************************************/
+
+/**
+ * Has the information to reach and
+ * authenticate at the bank's backend.
+ */
+interface BackendStateType {
+  url: string;
+  username: string;
+  password: string;
+}
+
+/**
+ * Request body of POST /transactions.
+ *
+ * If the amount appears twice: both as a Payto parameter and
+ * in the JSON dedicate field, the one on the Payto URI takes
+ * precedence.
+ */
+interface TransactionRequestType {
+  paytoUri: string;
+  amount?: string; // with currency.
+}
+
+/**
+ * Request body of /register.
+ */
+interface CredentialsRequestType {
+  username: string;
+  password: string;
+}
+
+/**
+ * Request body of /register.
+ */
+interface LoginRequestType {
+  username: string;
+  password: string;
+}
+
+interface WireTransferRequestType {
+  iban: string;
+  subject: string;
+  amount: string;
+}
+
+interface Amount {
+  value: string;
+  currency: string;
+}
+
+/**
+ * Track page state.
+ */
+interface PageStateType {
+  isLoggedIn: boolean;
+  isRawPayto: boolean;
+  tryRegister: boolean;
+  showPublicHistories: boolean;
+  hasError: boolean;
+  hasInfo: boolean;
+  withdrawalInProgress: boolean;
+  error?: string;
+  info?: string;
+  talerWithdrawUri?: string;
+  /**
+   * Not strictly a presentational value, could
+   * be moved in a future "withdrawal state" object.
+   */
+  withdrawalId?: string;
+}
+
+/**
+ * Bank account specific information.
+ */
+interface AccountStateType {
+  balance: string;
+  /* FIXME: Need history here.  */
+}
+
+/************
+ * Helpers. *
+ ***********/
+
+function maybeDemoContent(content: VNode) {
+  if (UI_IS_DEMO) return content;
+}
+
+async function fetcher(url: string) {
+  return fetch(url).then((r) => (r.json()));
+}
+
+function genCaptchaNumbers(): string {
+  return `${Math.floor(Math.random() * 10)} + ${Math.floor(Math.random() * 10)}`;
+}
+/**
+ * Bring the state to show the public accounts page.
+ */
+function goPublicAccounts(pageStateSetter: StateUpdater<PageStateType>) {
+  return () => pageStateSetter((prevState) => ({ ...prevState, showPublicHistories: true }))
+}
+
+/**
+ * Validate (the number part of) an amount.  If needed,
+ * replace comma with a dot.  Returns 'false' whenever
+ * the input is invalid, the valid amount otherwise.
+ */
+function validateAmount(maybeAmount: string): any {
+  const amountRegex = '^[0-9]+(\.[0-9]+)?$';
+  if (!maybeAmount) {
+    console.log(`Entered amount (${maybeAmount}) mismatched <input> pattern.`);
+    return;
+  }
+  if (typeof maybeAmount !== 'undefined' || maybeAmount !== '') {
+    console.log(`Maybe valid amount: ${maybeAmount}`);
+    // tolerating comma instead of point.
+    const re = RegExp(amountRegex)
+    if (!re.test(maybeAmount)) {
+      console.log(`Not using invalid amount '${maybeAmount}'.`);
+      return false;
+    }
+  }
+  return maybeAmount;
+}
+
+/**
+ * Extract IBAN from a Payto URI.
+ */
+function getIbanFromPayto(url: string): string {
+  const pathSplit = new URL(url).pathname.split('/');
+  let lastIndex = pathSplit.length - 1;
+  // Happens if the path ends with "/".
+  if (pathSplit[lastIndex] === '') lastIndex--;
+  const iban = pathSplit[lastIndex];
+  return iban;
+}
+
+/**
+ * Extract value and currency from a $currency:x.y amount.
+ */
+function parseAmount(val: string): Amount {
+  const format = /^[A-Z]+:[0-9]+(\.[0-9]+)?$/;
+  if (!format.test(val))
+    throw Error(`Backend gave invalid amount: ${val}.`)
+  const amountSplit = val.split(':');
+  return { value: amountSplit[1], currency: amountSplit[0] }
+}
+
+/**
+ * Get username from the backend state, and throw
+ * exception if not found.
+ */
+function getUsername(backendState: BackendStateTypeOpt): string {
+  if (typeof backendState === 'undefined')
+    throw Error('Username can\'t be found in a undefined backend state.')
+
+  return backendState.username;
+}
+
+/**
+ * Helps extracting the credentials from the state
+ * and wraps the actual call to 'fetch'.  Should be
+ * enclosed in a try-catch block by the caller.
+ */
+async function postToBackend(
+  uri: string,
+  backendState: BackendStateTypeOpt,
+  body: string
+): Promise<any> {
+  if (typeof backendState === 'undefined')
+    throw Error('Credentials can\'t be found in a undefined backend state.')
+
+  const { username, password } = backendState;
+  const headers = prepareHeaders(username, password);
+  // Backend URL must have been stored _with_ a final slash.
+  const url = new URL(uri, backendState.url)
+  return await fetch(url.href, {
+    method: 'POST',
+    headers,
+    body,
+  }
+  );
+}
+
+function useTransactionPageNumber(): [number, StateUpdater<number>] {
+  const ret = useNotNullLocalStorage('transaction-page', '0');
+  const retObj = JSON.parse(ret[0]);
+  const retSetter: StateUpdater<number> = function (val) {
+    const newVal = val instanceof Function ? JSON.stringify(val(retObj)) : JSON.stringify(val)
+    ret[1](newVal)
+  }
+  return [retObj, retSetter];
+}
+
+/**
+ * Craft headers with Authorization and Content-Type.
+ */
+function prepareHeaders(username: string, password: string) {
+  const headers = new Headers();
+  headers.append(
+    'Authorization',
+    `Basic ${Buffer.from(`${username}:${password}`).toString('base64')}`
+  );
+  headers.append(
+    'Content-Type',
+    'application/json'
+  )
+  return headers;
+}
+
+// Window can be mocked this way:
+// https://gist.github.com/theKashey/07090691c0a4680ed773375d8dbeebc1#file-webpack-conf-js
+// That allows the app to be pointed to a arbitrary
+// euFin backend when launched via "pnpm dev".
+const getRootPath = () => {
+  const maybeRootPath = typeof window !== undefined
+    ? window.location.origin + window.location.pathname
+    : '/';
+  if (!maybeRootPath.endsWith('/')) return `${maybeRootPath}/`;
+  return maybeRootPath;
+};
+
+/*******************
+ * State managers. *
+ ******************/
+
+/**
+ * Stores in the state a object containing a 'username'
+ * and 'password' field, in order to avoid losing the
+ * handle of the data entered by the user in <input> fields.
+ */
+function useShowPublicAccount(
+  state?: string
+): [string | undefined, StateUpdater<string | undefined>] {
+
+  const ret = useLocalStorage('show-public-account', JSON.stringify(state));
+  const retObj: string | undefined = ret[0] ? JSON.parse(ret[0]) : ret[0];
+  const retSetter: StateUpdater<string | undefined> = function (val) {
+    const newVal = val instanceof Function ? JSON.stringify(val(retObj)) : JSON.stringify(val)
+    ret[1](newVal)
+  }
+  return [retObj, retSetter]
+}
+
+/**
+ * Stores the raw Payto value entered by the user in the state.
+ */
+type RawPaytoInputType = string;
+type RawPaytoInputTypeOpt = RawPaytoInputType | undefined;
+function useRawPaytoInputType(
+  state?: RawPaytoInputType
+): [RawPaytoInputTypeOpt, StateUpdater<RawPaytoInputTypeOpt>] {
+
+  const ret = useLocalStorage('raw-payto-input-state', state);
+  const retObj: RawPaytoInputTypeOpt = ret[0];
+  const retSetter: StateUpdater<RawPaytoInputTypeOpt> = function (val) {
+    const newVal = val instanceof Function ? val(retObj) : val
+    ret[1](newVal)
+  }
+  return [retObj, retSetter]
+}
+
+/**
+ * Stores in the state a object representing a wire transfer,
+ * in order to avoid losing the handle of the data entered by
+ * the user in <input> fields.  FIXME: name not matching the
+ * purpose, as this is not a HTTP request body but rather the
+ * state of the <input>-elements.
+ */
+type WireTransferRequestTypeOpt = WireTransferRequestType | undefined;
+function useWireTransferRequestType(
+  state?: WireTransferRequestType
+): [WireTransferRequestTypeOpt, StateUpdater<WireTransferRequestTypeOpt>] {
+
+  const ret = useLocalStorage('wire-transfer-request-state', JSON.stringify(state));
+  const retObj: WireTransferRequestTypeOpt = ret[0] ? JSON.parse(ret[0]) : ret[0];
+  const retSetter: StateUpdater<WireTransferRequestTypeOpt> = function (val) {
+    const newVal = val instanceof Function ? JSON.stringify(val(retObj)) : JSON.stringify(val)
+    ret[1](newVal)
+  }
+  return [retObj, retSetter]
+}
+
+/**
+ * Stores in the state a object containing a 'username'
+ * and 'password' field, in order to avoid losing the
+ * handle of the data entered by the user in <input> fields.
+ */
+type CredentialsRequestTypeOpt = CredentialsRequestType | undefined;
+function useCredentialsRequestType(
+  state?: CredentialsRequestType
+): [CredentialsRequestTypeOpt, StateUpdater<CredentialsRequestTypeOpt>] {
+
+  const ret = useLocalStorage('credentials-request-state', JSON.stringify(state));
+  const retObj: CredentialsRequestTypeOpt = ret[0] ? JSON.parse(ret[0]) : ret[0];
+  const retSetter: StateUpdater<CredentialsRequestTypeOpt> = function (val) {
+    const newVal = val instanceof Function ? JSON.stringify(val(retObj)) : JSON.stringify(val)
+    ret[1](newVal)
+  }
+  return [retObj, retSetter]
+}
+
+/**
+ * Return getters and setters for
+ * login credentials and backend's
+ * base URL.
+ */
+type BackendStateTypeOpt = BackendStateType | undefined;
+function useBackendState(
+  state?: BackendStateType
+): [BackendStateTypeOpt, StateUpdater<BackendStateTypeOpt>] {
+
+  const ret = useLocalStorage('backend-state', JSON.stringify(state));
+  const retObj: BackendStateTypeOpt = ret[0] ? JSON.parse(ret[0]) : ret[0];
+  const retSetter: StateUpdater<BackendStateTypeOpt> = function (val) {
+    const newVal = val instanceof Function ? JSON.stringify(val(retObj)) : JSON.stringify(val)
+    ret[1](newVal)
+  }
+  return [retObj, retSetter]
+}
+
+/**
+ * Keep mere business information, like account balance or
+ * transactions history.
+ */
+type AccountStateTypeOpt = AccountStateType | undefined;
+function useAccountState(
+  state?: AccountStateType
+): [AccountStateTypeOpt, StateUpdater<AccountStateTypeOpt>] {
+
+  const ret = useLocalStorage('account-state', JSON.stringify(state));
+  const retObj: AccountStateTypeOpt = ret[0] ? JSON.parse(ret[0]) : ret[0];
+  const retSetter: StateUpdater<AccountStateTypeOpt> = function (val) {
+    const newVal = val instanceof Function ? JSON.stringify(val(retObj)) : JSON.stringify(val)
+    ret[1](newVal)
+  }
+  return [retObj, retSetter]
+}
+
+/**
+ * Wrapper providing defaults.
+ */
+function usePageState(
+  state: PageStateType = {
+    isLoggedIn: false,
+    isRawPayto: false,
+    tryRegister: false,
+    showPublicHistories: false,
+    hasError: false,
+    hasInfo: false,
+    withdrawalInProgress: false,
+  }
+): [PageStateType, StateUpdater<PageStateType>] {
+  const ret = useNotNullLocalStorage('page-state', JSON.stringify(state));
+  const retObj: PageStateType = JSON.parse(ret[0]);
+  console.log('Current page state', retObj);
+  const retSetter: StateUpdater<PageStateType> = function (val) {
+    const newVal = val instanceof Function ? JSON.stringify(val(retObj)) : JSON.stringify(val)
+    console.log('Setting new page state', newVal)
+    ret[1](newVal)
+  }
+  return [retObj, retSetter];
+}
+
+/**
+ * Request preparators.
+ *
+ * These functions aim at sanitizing the input received
+ * from users - for example via a HTML form - and create
+ * a HTTP request object out of that.
+ */
+
+/******************
+ * HTTP wrappers. *
+ *****************/
+
+/**
+ * A 'wrapper' is typically a function that prepares one
+ * particular API call and updates the state accordingly.  */
+
+/**
+ * Abort a withdrawal operation via the Access API's /abort.
+ */
+async function abortWithdrawalCall(
+  backendState: BackendStateTypeOpt,
+  withdrawalId: string | undefined,
+  pageStateSetter: StateUpdater<PageStateType>
+) {
+  if (typeof backendState === 'undefined') {
+    console.log('No credentials found.');
+    pageStateSetter((prevState) => ({ ...prevState, hasError: true, error: 'No credentials found.' }))
+    return;
+  }
+  if (typeof withdrawalId === 'undefined') {
+    console.log('No withdrawal ID found.');
+    pageStateSetter((prevState) => ({ ...prevState, hasError: true, error: 'No withdrawal ID found.' }))
+    return;
+  }
+  let res:any;
+  try {
+    const { username, password } = backendState;
+    const headers = prepareHeaders(username, password);
+    /**
+     * NOTE: tests show that when a same object is being
+     * POSTed, caching might prevent same requests from being
+     * made.  Hence, trying to POST twice the same amount might
+     * get silently ignored.  Needs more observation!
+     *
+     * headers.append("cache-control", "no-store");
+     * headers.append("cache-control", "no-cache");
+     * headers.append("pragma", "no-cache");
+     * */
+
+    // Backend URL must have been stored _with_ a final slash.
+    const url = new URL(
+      `access-api/accounts/${backendState.username}/withdrawals/${withdrawalId}/abort`,
+      backendState.url
+    )
+    res = await fetch(url.href, { method: 'POST', headers })
+  } catch (error) {
+    console.log('Could not abort the withdrawal', error);
+    pageStateSetter((prevState) => ({
+      ...prevState,
+      hasError: true,
+      error: `Could not abort the withdrawal: ${error}`
+    }))
+    return;
+  }
+  if (!res.ok) {
+    console.log(`Withdrawal abort gave response error (${res.status})`, res.statusText);
+    pageStateSetter((prevState) => ({
+      ...prevState,
+      hasError: true,
+      error: `Withdrawal abortion gave response error (${res.status})`
+    }))
+    return;
+  }
+  console.log('Withdrawal operation aborted!');
+  pageStateSetter((prevState) => {
+    const { ...rest } = prevState;
+    return {
+      ...rest,
+      info: 'Withdrawal aborted!'
+    }
+  })
+
+}
+
+/**
+ * This function confirms a withdrawal operation AFTER
+ * the wallet has given the exchange's payment details
+ * to the bank (via the Integration API).  Such details
+ * can be given by scanning a QR code or by passing the
+ * raw taler://withdraw-URI to the CLI wallet.
+ *
+ * This function will set the confirmation status in the
+ * 'page state' and let the related components refresh.
+ */
+async function confirmWithdrawalCall(
+  backendState: BackendStateTypeOpt,
+  withdrawalId: string | undefined,
+  pageStateSetter: StateUpdater<PageStateType>
+) {
+
+  if (typeof backendState === 'undefined') {
+    console.log('No credentials found.');
+    pageStateSetter((prevState) => ({ ...prevState, hasError: true, error: 'No credentials found.' }))
+    return;
+  }
+  if (typeof withdrawalId === 'undefined') {
+    console.log('No withdrawal ID found.');
+    pageStateSetter((prevState) => ({ ...prevState, hasError: true, error: 'No withdrawal ID found.' }))
+    return;
+  }
+  let res: Response;
+  try {
+    const { username, password } = backendState;
+    const headers = prepareHeaders(username, password);
+    /**
+     * NOTE: tests show that when a same object is being
+     * POSTed, caching might prevent same requests from being
+     * made.  Hence, trying to POST twice the same amount might
+     * get silently ignored.
+     *
+     * headers.append("cache-control", "no-store");
+     * headers.append("cache-control", "no-cache");
+     * headers.append("pragma", "no-cache");
+     * */
+
+    // Backend URL must have been stored _with_ a final slash.
+    const url = new URL(
+      `access-api/accounts/${backendState.username}/withdrawals/${withdrawalId}/confirm`,
+      backendState.url
+    )
+    res = await fetch(url.href, {
+      method: 'POST',
+      headers
+    })
+  } catch (error) {
+    console.log('Could not POST withdrawal confirmation to the bank', error);
+    pageStateSetter((prevState) => ({
+      ...prevState,
+      hasError: true,
+      error: `Could not confirm the withdrawal: ${error}`
+    }))
+    return;
+  }
+  if (res ? !res.ok : true) { // assume not ok if res is null
+    console.log(`Withdrawal confirmation gave response error (${res.status})`, res.statusText);
+    pageStateSetter((prevState) => ({
+      ...prevState,
+      hasError: true,
+      error: `Withdrawal confirmation gave response error (${res.status})`
+    }))
+    return;
+  }
+  console.log('Withdrawal operation confirmed!');
+  pageStateSetter((prevState) => {
+    const { talerWithdrawUri, ...rest } = prevState;
+    return {
+      ...rest,
+      info: 'Withdrawal confirmed!'
+    }
+  })
+
+}
+
+/**
+ * This function creates a new transaction.  It reads a Payto
+ * address entered by the user and POSTs it to the bank.  No
+ * sanity-check of the input happens before the POST as this is
+ * already conducted by the backend.
+ */
+async function createTransactionCall(
+  req: TransactionRequestType,
+  backendState: BackendStateTypeOpt,
+  pageStateSetter: StateUpdater<PageStateType>,
+  /**
+   * Optional since the raw payto form doesn't have
+   * a stateful management of the input data yet.
+   */
+  cleanUpForm: () => void
+) {
+  let res:any;
+  try {
+    res = await postToBackend(
+      `access-api/accounts/${getUsername(backendState)}/transactions`,
+      backendState,
+      JSON.stringify(req)
+    )
+  }
+  catch (error) {
+    console.log('Could not POST transaction request to the bank', error);
+    pageStateSetter((prevState) => ({
+      ...prevState,
+      hasError: true,
+      error: `Could not create the wire transfer: ${error}`
+    }))
+    return;
+  }
+  // POST happened, status not sure yet.
+  if (!res.ok) {
+    const responseText = JSON.stringify(await res.json());
+    console.log(`Transfer creation gave response error: ${responseText} (${res.status})`);
+    pageStateSetter((prevState) => ({
+      ...prevState,
+      hasError: true,
+      error: `Transfer creation gave response error: ${responseText} (${res.status})`
+    }))
+    return;
+  }
+  // status is 200 OK here, tell the user.
+  console.log('Wire transfer created!');
+  pageStateSetter((prevState) => ({
+    ...prevState,
+    hasInfo: true,
+    info: 'Wire transfer created!'
+  }))
+
+  // Only at this point the input data can
+  // be discarded.
+  cleanUpForm();
+}
+
+/**
+ * This function creates a withdrawal operation via the Access API.
+ *
+ * After having successfully created the withdrawal operation, the
+ * user should receive a QR code of the "taler://withdraw/" type and
+ * supposed to scan it with their phone.
+ *
+ * TODO: (1) after the scan, the page should refresh itself and inform
+ * the user about the operation's outcome.  (2) use POST helper.  */
+async function createWithdrawalCall(
+  amount: string,
+  backendState: BackendStateTypeOpt,
+  pageStateSetter: StateUpdater<PageStateType>
+) {
+  if (typeof backendState === 'undefined') {
+    console.log('Page has a problem: no credentials found in the state.');
+    pageStateSetter((prevState) => ({ ...prevState, hasError: true, error: 'No credentials given.' }))
+    return;
+  }
+
+  let res:any;
+  try {
+    const { username, password } = backendState;
+    const headers = prepareHeaders(username, password);
+
+    // Let bank generate withdraw URI:
+    const url = new URL(
+      `access-api/accounts/${backendState.username}/withdrawals`,
+      backendState.url
+    )
+    res = await fetch(url.href, {
+      method: 'POST',
+      headers,
+      body: JSON.stringify({ amount }),
+    }
+    );
+  } catch (error) {
+    console.log('Could not POST withdrawal request to the bank', error);
+    pageStateSetter((prevState) => ({
+      ...prevState,
+      hasError: true,
+      error: `Could not create withdrawal operation: ${error}`
+    }))
+    return;
+  }
+  if (!res.ok) {
+    const responseText = await res.text();
+    console.log(`Withdrawal creation gave response error: ${responseText} (${res.status})`);
+    pageStateSetter((prevState) => ({
+      ...prevState,
+      hasError: true,
+      error: `Withdrawal creation gave response error: ${responseText} (${res.status})`
+    }))
+    return;
+  }
+
+  console.log('Withdrawal operation created!');
+  const resp = await res.json();
+  pageStateSetter((prevState: PageStateType) => ({
+    ...prevState,
+    withdrawalInProgress: true,
+    talerWithdrawUri: resp.taler_withdraw_uri,
+    withdrawalId: resp.withdrawal_id
+  }))
+}
+
+async function loginCall(
+  req: CredentialsRequestType,
+  /**
+   * FIXME: figure out if the two following
+   * functions can be retrieved from the state.
+   */
+  backendStateSetter: StateUpdater<BackendStateTypeOpt>,
+  pageStateSetter: StateUpdater<PageStateType>
+) {
+
+  /**
+   * Optimistically setting the state as 'logged in', and
+   * let the Account component request the balance to check
+   * whether the credentials are valid.  */
+  pageStateSetter((prevState) => ({ ...prevState, isLoggedIn: true }));
+  let baseUrl = getRootPath();
+  if (!baseUrl.endsWith('/'))
+    baseUrl += '/';
+
+  backendStateSetter((prevState) => ({
+    ...prevState,
+    url: baseUrl,
+    username: req.username,
+    password: req.password,
+  }));
+}
+
+
+/**
+ * This function requests /register.
+ *
+ * This function is responsible to change two states:
+ * the backend's (to store the login credentials) and
+ * the page's (to indicate a successful login or a problem).
+ */
+async function registrationCall(
+  req: CredentialsRequestType,
+  /**
+   * FIXME: figure out if the two following
+   * functions can be retrieved somewhat from
+   * the state.
+   */
+  backendStateSetter: StateUpdater<BackendStateTypeOpt>,
+  pageStateSetter: StateUpdater<PageStateType>
+) {
+
+  let baseUrl = getRootPath();
+  /**
+   * If the base URL doesn't end with slash and the path
+   * is not empty, then the concatenation made by URL()
+   * drops the last path element.
+   */
+  if (!baseUrl.endsWith('/'))
+    baseUrl += '/'
+
+  const headers = new Headers();
+  headers.append(
+    'Content-Type',
+    'application/json'
+  )
+  const url = new URL('access-api/testing/register', baseUrl)
+  let res:any;
+  try {
+    res = await fetch(url.href, {
+      method: 'POST',
+      body: JSON.stringify(req),
+      headers
+    });
+  } catch (error) {
+    console.log(`Could not POST new registration to the bank (${url.href})`, error);
+    pageStateSetter((prevState) => ({
+      ...prevState, hasError: true, error: 'Registration failed, please report.'
+    }));
+    return;
+  }
+  if (!res.ok) {
+    const errorRaw = await res.text();
+    console.log(`New registration gave response error (${res.status})`, errorRaw);
+    pageStateSetter((prevState) => ({
+      ...prevState,
+      hasError: true,
+      error: errorRaw
+    }));
+  } else {
+    pageStateSetter((prevState) => ({
+      ...prevState,
+      isLoggedIn: true,
+      tryRegister: false
+    }));
+    backendStateSetter((prevState) => ({
+      ...prevState,
+      url: baseUrl,
+      username: req.username,
+      password: req.password,
+    }));
+  }
+}
+
+/**************************
+ * Functional components. *
+ *************************/
+
+function Currency(): VNode {
+  const { data, error } = useSWR(`${getRootPath()}integration-api/config`, fetcher);
+  if (typeof error !== 'undefined')
+    return <b>error: currency could not be retrieved</b>;
+
+  if (typeof data === 'undefined') return <Fragment>"..."</Fragment>;
+  console.log('found bank config', data);
+  return data.currency;
+}
+
+function ErrorBanner(Props: any): VNode | null {
+  const [pageState, pageStateSetter] = Props.pageState;
+  const i18n = useTranslator();
+  if (!pageState.hasError) return null;
+
+  const rval = (
+    <p class="informational informational-fail">{pageState.error}
+    </p>);
+  delete pageState.error;
+  pageState.hasError = false;
+  return rval;
+}
+
+function StatusBanner(Props: any): VNode | null {
+  const [pageState, pageStateSetter] = Props.pageState;
+  const i18n = useTranslator();
+  if (!pageState.hasInfo) return null;
+
+  const rval = (
+    <p class="informational">{pageState.error}
+    </p>);
+  delete pageState.info_msg;
+  pageState.hasInfo = false;
+  return rval;
+}
+
+function BankFrame(Props: any): VNode {
+  const i18n = useTranslator();
+  const [pageState, pageStateSetter] = useContext(PageContext);
+  console.log('BankFrame state', pageState);
+  const logOut = (
+    <div class="logout">
+      <a
+        href="#"
+        class="pure-button logout-button"
+        onClick={() => {
+          pageStateSetter((prevState: PageStateType) => {
+            const {
+              talerWithdrawUri,
+              withdrawalId, ...rest } = prevState;
+            return {
+              ...rest,
+              isLoggedIn: false,
+              withdrawalInProgress: false,
+              hasInfo: false,
+              hasError: false,
+              isRawPayto: false
+            };
+          });
+        }}>{i18n`Logout`}</a></div>);
+
+  // Prepare demo sites links.
+  const DEMO_SITES = [
+    ['Landing', '__DEMO_SITE_LANDING_URL__'],
+    ['Bank', '__DEMO_SITE_BANK_URL__'],
+    ['Essay Shop', '__DEMO_SITE_BLOG_URL__'],
+    ['Donations', '__DEMO_SITE_DONATIONS_URL__'],
+    ['Survey', '__DEMO_SITE_SURVEY_URL__'],
+  ];
+  const demo_sites = [];
+  for (const i in DEMO_SITES)
+    demo_sites.push(<a href={DEMO_SITES[i][1]}>{DEMO_SITES[i][0]}</a>)
+
+  return (
+    <Fragment>
+      <header class="demobar" style="display: flex; flex-direction: row; justify-content: space-between;">
+        <a href="#main" class="skip">{i18n`Skip to main content`}</a>
+        <div style="max-width: 50em; margin-left: 2em;">
+          <h1>
+            <span class="it">
+              <a href="/">{
+                UI_BANK_NAME
+              }
+              </a>
+            </span>
+          </h1>{
+            maybeDemoContent(<p><Translate>
+              This part of the demo shows how a bank that supports
+              Taler directly would work. In addition to using your own
+              bank account, you can also see the transaction history of
+              some <a href="#" onClick={goPublicAccounts(pageStateSetter)}>Public Accounts</a>.
+            </Translate></p>
+            )
+          }
+        </div>
+        <a href="https://taler.net/">
+          <img
+            src={talerLogo}
+            alt="{i18n`Taler logo`}"
+            height="100"
+            width="224"
+            style="margin: 2em 2em" />
+        </a>
+      </header>
+      <div style="display:flex; flex-direction: column;" class="navcontainer">
+        <nav class="demolist">
+          {maybeDemoContent(<Fragment>{demo_sites}</Fragment>)}
+          <div class="right">
+            <LangSelector />
+          </div>
+        </nav>
+      </div>
+      <section id="main" class="content">
+        <ErrorBanner pageState={[pageState, pageStateSetter]} />
+        <StatusBanner pageState={[pageState, pageStateSetter]} />
+        {pageState.isLoggedIn ? logOut : null}
+        {Props.children}
+      </section>
+      <section id="footer" class="footer">
+        <div class="footer">
+          <hr />
+          <div>
+            <p>You can learn more about GNU Taler on our <a href="https://taler.net">main website</a>.</p>
+          </div>
+          <div style="flex-grow:1" />
+          <p>Copyright &copy; 2014&mdash;2022 Taler Systems SA</p>
+        </div>
+      </section>
+    </Fragment>);
+}
+
+
+function PaytoWireTransfer(Props: any): VNode {
+  const currency = useContext(CurrencyContext);
+  const [pageState, pageStateSetter] = useContext(PageContext); // NOTE: used for go-back button?
+  const [submitData, submitDataSetter] = useWireTransferRequestType();
+  const [rawPaytoInput, rawPaytoInputSetter] = useRawPaytoInputType();
+  const i18n = useTranslator();
+  const { focus, backendState } = Props
+  const amountRegex = '^[0-9]+(\.[0-9]+)?$';
+  const ibanRegex = '^[A-Z][A-Z][0-9]+$';
+  const receiverInput = '';
+  const subjectInput = '';
+  let transactionData: TransactionRequestType;
+  const ref = useRef<HTMLInputElement>(null)
+  useEffect(() => {
+    if (focus) ref.current?.focus();
+  }, [focus, pageState.isRawPayto]);
+
+  if (!pageState.isRawPayto)
+    return (
+      <div>
+        <div class="pure-form"
+          name="wire-transfer-form">
+          <p>
+            <label for="iban">{i18n`Receiver IBAN:`}</label>&nbsp;
+            <input
+              ref={ref}
+              type="text"
+              id="iban"
+              name="iban"
+              value={submitData?.iban}
+              placeholder="CC0123456789"
+              required
+              pattern={ibanRegex}
+              onInput={(e): void => {
+                submitDataSetter((submitData: any) => ({
+                  ...submitData,
+                  iban: e.currentTarget.value,
+                }))
+              }} /><br /><br />
+            <label for="subject">{i18n`Transfer subject:`}</label>&nbsp;
+            <input
+              type="text"
+              name="subject"
+              id="subject"
+              placeholder="subject"
+              value={submitData?.subject}
+              required
+              onInput={(e): void => {
+                submitDataSetter((submitData: any) => ({
+                  ...submitData,
+                  subject: e.currentTarget.value,
+                }))
+              }} /><br /><br />
+            <label for="amount">{i18n`Amount:`}</label>&nbsp;
+            <input
+              type="number"
+              name="amount"
+              id="amount"
+              placeholder="amount"
+              required
+              value={submitData?.amount}
+              pattern={amountRegex}
+              onInput={(e): void => {
+                submitDataSetter((submitData: any) => ({
+                  ...submitData,
+                  amount: e.currentTarget.value.replace(',', '.'),
+                }))
+              }} />
+            &nbsp;
+            <input
+              type="text"
+              readonly
+              class="currency-indicator"
+              size={currency.length}
+              maxLength={currency.length}
+              tabIndex={-1} value={currency} />
+          </p>
+          <p>
+            <input
+              type="submit"
+              class="pure-button pure-button-primary"
+              value="Send"
+              onClick={async () => {
+                if (
+                  typeof submitData === 'undefined'
+                  || (typeof submitData.iban === 'undefined'
+                    || submitData.iban === '')
+                  || (typeof submitData.subject === 'undefined'
+                    || submitData.subject === '')
+                  || (typeof submitData.amount === 'undefined'
+                    || submitData.amount === '')
+                ) {
+                  console.log('Not all the fields were given.');
+                  pageStateSetter((prevState: PageStateType) =>
+                    ({ ...prevState, hasError: true, error: i18n`Field(s) missing.` }))
+                  return;
+                }
+                transactionData = {
+                  paytoUri: `payto://iban/${submitData.iban}?message=${encodeURIComponent(submitData.subject)}`,
+                  amount: `${currency}:${submitData.amount}`
+                };
+                return await createTransactionCall(
+                  transactionData,
+                  backendState,
+                  pageStateSetter,
+                  () => submitDataSetter(p => ({
+                    amount: '',
+                    iban: '',
+                    subject: ''
+                  }))
+                );
+              }} />
+          </p>
+        </div>
+        <p><a
+          href="#"
+          onClick={() => {
+            console.log('switch to raw payto form');
+            pageStateSetter((prevState: any) => ({ ...prevState, isRawPayto: true }));
+          }}>{i18n`Want to try the raw payto://-format?`}
+        </a></p>
+      </div>
+    );
+
+  return (
+    <div>
+      <p>
+        {i18n`Transfer money to account identified by payto:// URI:`}
+      </p>
+      <div class="pure-form"
+        name="payto-form">
+        <p>
+          <label for="address">{i18n`payto URI:`}</label>&nbsp;
+          <input
+            name="address"
+            type="text"
+            size={90}
+            ref={ref}
+            id="address"
+            value={rawPaytoInput}
+            required
+            placeholder={i18n`payto address`}
+            pattern={`payto://iban/[A-Z][A-Z][0-9]+\?message=[a-zA-Z0-9 ]+&amount=${currency}:[0-9]+(\.[0-9]+)?`}
+            onInput={(e): void => {
+              rawPaytoInputSetter(e.currentTarget.value)
+            }} />
+          <br />
+          <div class="hint">
+            Hint:
+            <code>
+              payto://iban/[receiver-iban]?message=[subject]&amount=[{currency}:X.Y]
+            </code>
+          </div>
+        </p>
+        <p>
+          <input class="pure-button pure-button-primary"
+            type="submit"
+            value={i18n`Send`}
+            onClick={async () => {
+              // empty string evaluates to false.
+              if (!rawPaytoInput) {
+                console.log('Didn\'t get any raw Payto string!');
+                return;
+              }
+              transactionData = { paytoUri: rawPaytoInput };
+              if (typeof transactionData.paytoUri === 'undefined' ||
+                transactionData.paytoUri.length === 0) return;
+
+              return await createTransactionCall(
+                transactionData,
+                backendState,
+                pageStateSetter,
+                () => rawPaytoInputSetter(p => '')
+              );
+            }} />
+        </p>
+        <p><a
+          href="#"
+          onClick={() => {
+            console.log('switch to wire-transfer-form');
+            pageStateSetter((prevState: any) => ({ ...prevState, isRawPayto: false }));
+          }}>{i18n`Use wire-transfer form?`}
+        </a></p>
+      </div>
+    </div>);
+}
+
+/**
+ * Additional authentication required to complete the operation.
+ * Not providing a back button, only abort.
+ */
+function TalerWithdrawalConfirmationQuestion(Props: any): VNode {
+  const [pageState, pageStateSetter] = useContext(PageContext);
+  const { backendState } = Props;
+  const i18n = useTranslator();
+  const captchaNumbers = {
+    a: Math.floor(Math.random() * 10),
+    b: Math.floor(Math.random() * 10)
+  }
+  let captchaAnswer = '';
+
+  return (<Fragment>
+    <h1 class="nav">{i18n`Confirm Withdrawal`}</h1>
+    <article>
+      <div class="challenge-div">
+        <form class="challenge-form">
+          <div class="pure-form"
+            id="captcha"
+            name="capcha-form">
+            <h2>{i18n`Authorize withdrawal by solving challenge`}</h2>
+            <p>
+              <label for="answer">{i18n`What is`}&nbsp;<em>{captchaNumbers.a}&nbsp;+&nbsp;{captchaNumbers.b}</em>?&nbsp;</label>&nbsp;
+              <input
+                name="answer"
+                id="answer"
+                type="text"
+                required
+                onInput={(e): void => {
+                  captchaAnswer = e.currentTarget.value;
+                }} />
+            </p>
+            <p>
+              <button
+                class="pure-button pure-button-primary btn-confirm"
+                onClick={() => {
+                  if (captchaAnswer == (captchaNumbers.a + captchaNumbers.b).toString()) {
+                    confirmWithdrawalCall(
+                      backendState,
+                      pageState.withdrawalId,
+                      pageStateSetter)
+                    return;
+                  }
+                  pageStateSetter((prevState: PageStateType) =>
+                    ({ ...prevState, hasError: true, error: i18n`Answer is wrong.` }))
+                }}>
+                {i18n`Confirm`}
+              </button>
+              &nbsp;
+              <button
+                class="pure-button pure-button-secondary btn-cancel"
+                onClick={() =>
+                  abortWithdrawalCall(
+                    backendState,
+                    pageState.withdrawalId,
+                    pageStateSetter
+                  )}>
+                {i18n`Cancel`}
+              </button>
+            </p>
+          </div>
+        </form>
+        <div class="hint">
+          <p><Translate>
+            A this point, a <b>real</b> bank would ask for an additional
+            authentication proof (PIN/TAN, one time password, ..), instead
+            of a simple calculation.
+          </Translate></p>
+        </div>
+      </div>
+    </article>
+  </Fragment>);
+}
+
+function QrCodeSection({ talerWithdrawUri, abortButton }: { talerWithdrawUri: string, abortButton: h.JSX.Element }) {
+  const i18n = useTranslator();
+  useEffect(() => {
+    //Taler Wallet WebExtension is listening to headers response and tab updates.
+    //In the SPA there is no header response with the Taler URI so
+    //this hack manually triggers the tab update after the QR is in the DOM.
+    window.location.href = `${window.location.href.split('#')[0]}#`
+  }, [])
+
+  return <section id="main" class="content">
+    <h1 class="nav">{i18n`Charge Taler Wallet`}</h1>
+    <p>{i18n`You can use this QR code to withdraw to your mobile wallet:`}</p>
+    {QR({ text: talerWithdrawUri })}
+    <p>Click <a id="linkqr" href={talerWithdrawUri}>{i18n`this link`}</a> to open your Taler wallet!</p>
+    <br />
+    {abortButton}
+  </section>
+}
+
+/**
+ * Offer the QR code (and a clickable taler://-link) to
+ * permit the passing of exchange and reserve details to
+ * the bank.  Poll the backend until such operation is done.
+ */
+function TalerWithdrawalQRCode(Props: any): VNode {
+  // turns true when the wallet POSTed the reserve details:
+  const [pageState, pageStateSetter] = useContext(PageContext);
+  const {
+    withdrawalId,
+    talerWithdrawUri,
+    accountLabel,
+    backendState } = Props;
+  const i18n = useTranslator();
+  const abortButton = <a class="pure-button" onClick={() => {
+    pageStateSetter((prevState: PageStateType) => {
+      const { withdrawalId, talerWithdrawUri, ...rest } = prevState;
+      return { ...rest, withdrawalInProgress: false };
+    })
+  }}>{i18n`Abort`}</a>
+
+  console.log(`Showing withdraw URI: ${talerWithdrawUri}`);
+  // waiting for the wallet:
+
+  const { data, error, mutate } = useSWR(`integration-api/withdrawal-operation/${withdrawalId}`);
+
+  if (typeof error !== 'undefined') {
+    console.log(`withdrawal (${withdrawalId}) was never (correctly) created at the bank...`, error);
+    pageStateSetter((prevState: PageStateType) => ({
+      ...prevState,
+      hasError: true,
+      error: i18n`withdrawal (${withdrawalId}) was never (correctly) created at the bank...`
+    }))
+    return (<Fragment><br /><br />{abortButton}</Fragment>);
+  }
+
+  // data didn't arrive yet and wallet didn't communicate:
+  if (typeof data === 'undefined')
+    return <p>{i18n`Waiting the bank to create the operaion...`}</p>
+
+
+  /**
+   * Wallet didn't communicate withdrawal details yet:
+   */
+  console.log('withdrawal status', data);
+  if (data.aborted)
+    pageStateSetter((prevState: PageStateType) => {
+      const {
+        withdrawalId,
+        talerWithdrawUri,
+        ...rest } = prevState;
+      return {
+        ...rest,
+        withdrawalInProgress: false,
+        hasError: true,
+        error: i18n`This withdrawal was aborted!`
+      };
+    })
+
+
+  if (!data.selection_done) {
+    setTimeout(() => mutate(), 1000); // check again after 1 second.
+    return (<QrCodeSection talerWithdrawUri={talerWithdrawUri} abortButton={abortButton} />);
+  }
+  /**
+   * Wallet POSTed the withdrawal details!  Ask the
+   * user to authorize the operation (here CAPTCHA).
+   */
+  return (<TalerWithdrawalConfirmationQuestion backendState={backendState} />);
+}
+
+
+
+function WalletWithdraw(Props: any): VNode {
+  const { backendState, pageStateSetter, focus } = Props;
+  const currency = useContext(CurrencyContext);
+  const i18n = useTranslator();
+  let submitAmount = '5.00';
+  const amountRegex = '^[0-9]+(\.[0-9]+)?$';
+
+  const ref = useRef<HTMLInputElement>(null)
+  useEffect(() => {
+    if (focus) ref.current?.focus();
+  }, [focus]);
+  return (
+    <div id="reserve-form"
+      class="pure-form"
+      name="tform">
+      <p>
+        <label for="withdraw-amount">{i18n`Amount to withdraw:`}</label>&nbsp;
+        <input
+          type="number"
+          ref={ref}
+          id="withdraw-amount"
+          name="withdraw-amount"
+          value={submitAmount}
+          pattern={amountRegex}
+          class="amount"
+          onChange={(e): void => {
+            // FIXME: validate using 'parseAmount()',
+            // deactivate submit button as long as
+            // amount is not valid
+            submitAmount = e.currentTarget.value;
+          }} />
+        &nbsp;
+        <input
+          type="text"
+          readonly
+          class="currency-indicator"
+          size={currency.length}
+          maxLength={currency.length}
+          tabIndex={-1} value={currency} />
+      </p>
+      <p>
+        <div>
+          <input
+            id="select-exchange"
+            class="pure-button pure-button-primary"
+            type="submit"
+            value={i18n`Withdraw`}
+            onClick={() => {
+              submitAmount = validateAmount(submitAmount);
+              /**
+               * By invalid amounts, the validator prints error messages
+               * on the console, and the browser colourizes the amount input
+               * box to indicate a error.
+               */
+              if (!submitAmount) return;
+              createWithdrawalCall(
+                `${currency}:${submitAmount}`,
+                backendState,
+                pageStateSetter
+              )
+            }} />
+        </div>
+      </p>
+    </div>
+  )
+}
+
+
+/**
+ * Let the user choose a payment option,
+ * then specify the details trigger the action.
+ */
+function PaymentOptions(Props: any): VNode {
+  const { backendState, pageStateSetter, focus } = Props;
+  const currency = useContext(CurrencyContext);
+  const i18n = useTranslator();
+
+  const [tab, setTab] = useState<'charge-wallet' | 'wire-transfer'>('charge-wallet')
+
+
+  return (<article>
+    <div class="payments">
+      <div class="tab">
+        <button class={tab === 'charge-wallet' ? 'tablinks active' : 'tablinks'}
+          onClick={(): void => { setTab('charge-wallet') }}>
+          {i18n`Charge Taler wallet`}
+        </button>
+        <button class={tab === 'wire-transfer' ? 'tablinks active' : 'tablinks'}
+          onClick={(): void => { setTab('wire-transfer') }}>
+          {i18n`Wire to bank account`}
+        </button>
+      </div>
+      {tab === 'charge-wallet' &&
+        <div id='charge-wallet' class='tabcontent active'>
+          <h3>{i18n`Charge Taler wallet`}</h3>
+          <WalletWithdraw
+            backendState={backendState}
+            focus
+            pageStateSetter={pageStateSetter} />
+        </div>
+      }
+      {tab === 'wire-transfer' &&
+        <div id='wire-transfer' class='tabcontent active'>
+          <h3>{i18n`Wire to bank account`}</h3>
+          <PaytoWireTransfer
+            backendState={backendState}
+            focus
+            pageStateSetter={pageStateSetter} />
+        </div>
+      }
+    </div>
+  </article>);
+}
+
+function RegistrationButton(Props: any): VNode {
+  const { backendStateSetter, pageStateSetter } = Props;
+  const i18n = useTranslator();
+  if (UI_ALLOW_REGISTRATIONS) 
+    return (<button
+      class="pure-button pure-button-secondary btn-cancel"
+      onClick={() => {
+        pageStateSetter((prevState: PageStateType) => ({ ...prevState, tryRegister: true }))
+      }}>
+      {i18n`Register`}
+    </button>);
+  
+  
+  return (<span />);
+  
+}
+
+/**
+ * Collect and submit login data.
+ */
+function LoginForm(Props: any): VNode {
+  const { backendStateSetter, pageStateSetter } = Props;
+  const [submitData, submitDataSetter] = useCredentialsRequestType();
+  const i18n = useTranslator();
+  const ref = useRef<HTMLInputElement>(null)
+  useEffect(() => {
+    ref.current?.focus();
+  }, []);
+  return (<div class="login-div">
+    <form action="javascript:void(0);" class="login-form">
+      <div class="pure-form">
+        <h2>{i18n`Please login!`}</h2>
+        <p class="unameFieldLabel loginFieldLabel formFieldLabel"><label for="username">{i18n`Username:`}</label></p>
+        <input
+          ref={ref}
+          autoFocus
+          type="text"
+          name="username"
+          id="username"
+          value={submitData && submitData.username}
+          placeholder="Username"
+          required
+          onInput={(e): void => {
+            submitDataSetter((submitData: any) => ({
+              ...submitData,
+              username: e.currentTarget.value,
+            }))
+          }}
+        />
+        <p class="passFieldLabel loginFieldLabel formFieldLabel"><label for="password">{i18n`Password:`}</label></p>
+        <input
+          type="password"
+          name="password"
+          id="password"
+          value={submitData && submitData.password}
+          placeholder="Password"
+          required
+          onInput={(e): void => {
+            submitDataSetter((submitData: any) => ({
+              ...submitData,
+              password: e.currentTarget.value,
+            }))
+          }} />
+        <br />
+        <button
+          type="submit"
+          class="pure-button pure-button-primary"
+          onClick={() => {
+            if (typeof submitData === 'undefined') {
+              console.log('login data is undefined', submitData);
+              return;
+            }
+            if (submitData.password.length == 0 || submitData.username.length == 0) {
+              console.log('username or password is the empty string', submitData);
+              return;
+            }
+            loginCall(
+              // Deep copy, to avoid the cleanup
+              // below make data disappear.
+              { ...submitData },
+              backendStateSetter,
+              pageStateSetter
+            );
+            submitDataSetter(undefined);
+          }}>{i18n`Login`}
+        </button>
+        {RegistrationButton(Props)}
+      </div>
+    </form>
+  </div>);
+}
+
+/**
+ * Collect and submit registration data.
+ */
+function RegistrationForm(Props: any): VNode {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [pageState, pageStateSetter] = useContext(PageContext);
+  const [submitData, submitDataSetter] = useCredentialsRequestType();
+  const i18n = useTranslator();
+  // https://stackoverflow.com/questions/36683770/how-to-get-the-value-of-an-input-field-using-reactjs
+  return (
+    <Fragment>
+      <h1 class="nav">
+        {
+          i18n`Welcome to ${UI_BANK_NAME}!`
+        }
+      </h1>
+      <article>
+        <div class="register-div">
+          <form action="javascript:void(0);" class="register-form">
+            <div class="pure-form">
+              <h2>{i18n`Please register!`}</h2>
+              <p class="unameFieldLabel registerFieldLabel formFieldLabel"><label for="register-un">{i18n`Username:`}</label></p>
+              <input
+                id="register-un"
+                name="register-un"
+                type="text"
+                placeholder="Username"
+                value={submitData && submitData.username}
+                required
+                onInput={(e): void => {
+                  submitDataSetter((submitData: any) => ({
+                    ...submitData,
+                    username: e.currentTarget.value,
+                  }))
+                }} />
+              <br />
+              <p class="unameFieldLabel registerFieldLabel formFieldLabel"><label for="register-pw">{i18n`Password:`}</label></p>
+              <input
+                type="password"
+                name="register-pw"
+                id="register-pw"
+                placeholder="Password"
+                value={submitData && submitData.password}
+                required
+                onInput={(e): void => {
+                  submitDataSetter((submitData: any) => ({
+                    ...submitData,
+                    password: e.currentTarget.value,
+                  }))
+                }} />
+              <br />
+              {/*
+              <label for="phone">{i18n`Phone number:`}</label>
+              // FIXME: add input validation (must start with +, otherwise only numbers)
+              <input
+                name="phone"
+                id="phone"
+                type="phone"
+                placeholder="+CC-123456789"
+                value={submitData && submitData.phone}
+                required
+                onInput={(e): void => {
+		  submitDataSetter((submitData: any) => ({
+                    ...submitData,
+                    phone: e.currentTarget.value,
+                  }))}} />
+              <br />
+              */}
+              <button
+                class="pure-button pure-button-primary btn-register"
+                onClick={() => {
+                  console.log('maybe submitting the registration..');
+                  console.log(submitData);
+                  if (typeof submitData === 'undefined') {
+                    console.log(`submit data ${submitData} is undefined`);
+                    return;
+                  }
+                  if ((typeof submitData.password === 'undefined') ||
+                    (typeof submitData.username === 'undefined')) {
+                    console.log('username or password is undefined');
+                    return;
+                  }
+                  if (submitData.password.length === 0 ||
+                    submitData.username.length === 0) {
+                    console.log('username or password are the empty string');
+                    return;
+                  }
+                  console.log('submitting the registration..');
+                  registrationCall(
+                    { ...submitData },
+                    Props.backendStateSetter, // will store BE URL, if OK.
+                    pageStateSetter
+                  );
+                  console.log('Clearing the input data');
+                  /**
+                     * FIXME: clearing the data should be done by setting
+                     * it to undefined, instead of the empty strings, just
+                     * like done in the login function.  Now set to the empty
+                     * strings due to a non lively update of the <input> fields
+                     * after setting to undefined.
+                     */
+                  submitDataSetter({ username: '', password: '' })
+                }}>
+                {i18n`Register`}
+              </button>
+              {/* FIXME: should use a different color */}
+              <button
+                class="pure-button pure-button-secondary btn-cancel"
+                onClick={() => {
+                  pageStateSetter((prevState: PageStateType) => ({ ...prevState, tryRegister: false }))
+                }}>
+                {i18n`Cancel`}
+              </button>
+            </div>
+          </form>
+        </div>
+      </article>
+    </Fragment>
+  )
+}
+
+/**
+ * Show one page of transactions.
+ */
+function Transactions(Props: any): VNode {
+  const { pageNumber, accountLabel } = Props;
+  const i18n = useTranslator();
+  const { data, error } = useSWR(
+    `access-api/accounts/${accountLabel}/transactions?page=${pageNumber}`
+  );
+  if (typeof error !== 'undefined') {
+    console.log('transactions not found error', error);
+    switch (error.status) {
+    case 404: {
+      return <p>Transactions page {pageNumber} was not found.</p>
+    }
+    case 401: {
+      return <p>Wrong credentials given.</p>
+    }
+    default: {
+      return <p>Transaction page {pageNumber} could not be retrieved.</p>
+    }
+    }
+  }
+  if (!data) {
+    console.log(`History data of ${accountLabel} not arrived`);
+    return <p>"Transactions page loading..."</p>;
+  }
+  console.log(`History data of ${accountLabel}`, data);
+  return (<div class="results">
+    <table class="pure-table pure-table-striped">
+      <thead>
+        <tr>
+          <th>{i18n`Date`}</th>
+          <th>{i18n`Amount`}</th>
+          <th>{i18n`Counterpart`}</th>
+          <th>{i18n`Subject`}</th>
+        </tr>
+      </thead>
+      <tbody>
+        {data.transactions.map((item: any, idx: number) => {
+          const sign = item.direction == 'DBIT' ? '-' : '';
+          const counterpart = item.direction == 'DBIT' ? item.creditorIban : item.debtorIban;
+          // Pattern:
+          //
+          // DD/MM YYYY subject -5 EUR
+          // DD/MM YYYY subject 5 EUR
+          const dateRegex = /^([0-9]{4})-([0-9]{2})-([0-9]{1,2})/
+          const dateParse = dateRegex.exec(item.date)
+          const date = dateParse !== null ? `${dateParse[3]}/${dateParse[2]} ${dateParse[1]}` : 'date not found'
+          return (<tr key={idx}>
+            <td>{date}</td>
+            <td>{sign}{item.amount} {item.currency}</td>
+            <td>{counterpart}</td>
+            <td>{item.subject}</td>
+          </tr>);
+        })}
+      </tbody>
+    </table>
+  </div>);
+}
+
+/**
+ * Show only the account's balance.  NOTE: the backend state
+ * is mostly needed to provide the user's credentials to POST
+ * to the bank.
+ */
+function Account(Props: any): VNode {
+  const { cache } = useSWRConfig();
+  const { accountLabel, backendState } = Props;
+  // Getting the bank account balance:
+  const endpoint = `access-api/accounts/${accountLabel}`;
+  const { data, error } = useSWR(endpoint);
+  const [pageState, pageStateSetter] = useContext(PageContext);
+  const {
+    withdrawalInProgress,
+    withdrawalId,
+    isLoggedIn,
+    talerWithdrawUri } = pageState;
+  const i18n = useTranslator();
+  /**
+   * This part shows a list of transactions: with 5 elements by
+   * default and offers a "load more" button.
+   */
+  const [txPageNumber, setTxPageNumber] = useTransactionPageNumber()
+  const txsPages = []
+  for (let i = 0; i <= txPageNumber; i++)
+    txsPages.push(<Transactions accountLabel={accountLabel} pageNumber={i} />)
+
+  if (typeof error !== 'undefined') {
+    console.log('account error', error);
+    /**
+     * FIXME: to minimize the code, try only one invocation
+     * of pageStateSetter, after having decided the error
+     * message in the case-branch.
+     */
+    switch (error.status) {
+    case 404: {
+      pageStateSetter((prevState: PageStateType) => ({
+        ...prevState,
+        hasError: true,
+        isLoggedIn: false,
+        error: i18n`Username or account label '${accountLabel}' not found.  Won't login.`
+      }));
+
+      /**
+         * 404 should never stick to the cache, because they
+         * taint successful future registrations.  How?  After
+         * registering, the user gets navigated to this page,
+         * therefore a previous 404 on this SWR key (the requested
+         * resource) would still appear as valid and cause this
+         * page not to be shown! A typical case is an attempted
+         * login of a unregistered user X, and then a registration
+         * attempt of the same user X: in this case, the failed
+         * login would cache a 404 error to X's profile, resulting
+         * in the legitimate request after the registration to still
+         * be flagged as 404.  Clearing the cache should prevent
+         * this.  */
+      (cache as any).clear();
+      return <p>Profile not found...</p>;
+    }
+    case 401: {
+      pageStateSetter((prevState: PageStateType) => ({
+        ...prevState,
+        hasError: true,
+        isLoggedIn: false,
+        error: i18n`Wrong credentials given.`
+      }));
+      return <p>Wrong credentials...</p>;
+    }
+    default: {
+      pageStateSetter((prevState: PageStateType) => ({
+        ...prevState,
+        hasError: true,
+        isLoggedIn: false,
+        error: i18n`Account information could not be retrieved.`
+      }));
+      return <p>Unknown problem...</p>;
+    }
+    }
+  }
+  if (!data) return <p>Retrieving the profile page...</p>;
+
+  /**
+   * This block shows the withdrawal QR code.
+   *
+   * A withdrawal operation replaces everything in the page and
+   * (ToDo:) starts polling the backend until either the wallet
+   * selected a exchange and reserve public key, or a error / abort
+   * happened.
+   *
+   * After reaching one of the above states, the user should be
+   * brought to this ("Account") page where they get informed about
+   * the outcome.
+   */
+  console.log(`maybe new withdrawal ${talerWithdrawUri}`);
+  if (talerWithdrawUri) {
+    console.log('Bank created a new Taler withdrawal');
+    return (
+      <BankFrame>
+        <TalerWithdrawalQRCode
+          accountLabel={accountLabel}
+          backendState={backendState}
+          withdrawalId={withdrawalId}
+          talerWithdrawUri={talerWithdrawUri} />
+      </BankFrame>
+    );
+  }
+  const balance = parseAmount(data.balance.amount)
+
+  return (<BankFrame>
+    <div>
+      <h1 class="nav welcome-text">
+        <Translate>Welcome, {accountLabel} ({getIbanFromPayto(data.paytoUri)})!</Translate>
+      </h1>
+    </div>
+    <section id="assets">
+      <div class="asset-summary">
+        <h2>{i18n`Bank account balance`}</h2>
+        {data.balance.credit_debit_indicator == 'debit' ? (<b>-</b>) : null}
+        <div class="large-amount amount"><span class="value">{`${balance.value}`}</span>&nbsp;<span class="currency">{`${balance.currency}`}</span></div>
+      </div>
+    </section>
+    <section id="payments">
+      <div class="payments">
+        <h2>{i18n`Payments`}</h2>
+        {/* FIXME: turn into button! */}
+        <CurrencyContext.Provider value={balance.currency}>
+          {Props.children}
+          <PaymentOptions
+            backendState={backendState}
+            pageStateSetter={pageStateSetter} />
+        </CurrencyContext.Provider>
+      </div>
+    </section>
+    <section id="main">
+      <article>
+        <h2>{i18n`Latest transactions:`}</h2>
+        <Transactions pageNumber="0" accountLabel={accountLabel} />
+      </article>
+    </section>
+  </BankFrame>);
+}
+
+/**
+ * Factor out login credentials.
+ */
+function SWRWithCredentials(props: any): VNode {
+  const { username, password, backendUrl } = props;
+  const headers = new Headers();
+  headers.append(
+    'Authorization',
+    `Basic ${Buffer.from(`${username}:${password}`).toString('base64')}`
+  );
+  console.log('Likely backend base URL', backendUrl);
+  return (
+    <SWRConfig
+      value={{
+        fetcher: (url: string) =>
+          fetch(backendUrl + url || '', { headers }).then(
+            (r) => {
+              if (!r.ok)
+                throw { status: r.status, json: r.json() };
+
+              return r.json()
+            }
+          ),
+      }}>{props.children}</SWRConfig>
+  );
+}
+
+function SWRWithoutCredentials(Props: any): VNode {
+  const { baseUrl } = Props;
+  console.log('Base URL', baseUrl);
+  return (
+    <SWRConfig
+      value={{
+        fetcher: (url: string) =>
+          fetch(baseUrl + url || '').then(
+            (r) => {
+              if (!r.ok)
+                throw { status: r.status, json: r.json() };
+
+              return r.json()
+            }
+          ),
+      }}>{Props.children}</SWRConfig>
+  );
+}
+
+/**
+ * Show histories of public accounts.
+ */
+function PublicHistories(Props: any): VNode {
+  const [showAccount, setShowAccount] = useShowPublicAccount();
+  const { data, error } = useSWR('access-api/public-accounts');
+  const i18n = useTranslator();
+
+  if (typeof error !== 'undefined') {
+    console.log('account error', error);
+    switch (error.status) {
+    case 404:
+      console.log('public accounts: 404', error);
+      Props.pageStateSetter((prevState: PageStateType) => ({
+        ...prevState,
+        hasError: true,
+        showPublicHistories: false,
+        error: i18n`List of public accounts was not found.`
+      }));
+      break;
+    default:
+      console.log('public accounts: non-404 error', error);
+      Props.pageStateSetter((prevState: PageStateType) => ({
+        ...prevState,
+        hasError: true,
+        showPublicHistories: false,
+        error: i18n`List of public accounts could not be retrieved.`
+      }));
+      break;
+    }
+  }
+  if (!data)
+    return (<p>Waiting public accounts list...</p>)
+  const txs: any = {};
+  const accountsBar = [];
+
+  /**
+   * Show the account specified in the props, or just one
+   * from the list if that's not given.
+   */
+  if (typeof showAccount === 'undefined' && data.publicAccounts.length > 0)
+    setShowAccount(data.publicAccounts[1].accountLabel);
+  console.log(`Public history tab: ${showAccount}`);
+
+  // Ask story of all the public accounts.
+  for (const account of data.publicAccounts) {
+    console.log('Asking transactions for', account.accountLabel)
+    const isSelected = account.accountLabel == showAccount;
+    accountsBar.push(
+      <li class={isSelected ? 'pure-menu-selected pure-menu-item' : 'pure-menu-item pure-menu'}>
+        <a href="#"
+          class="pure-menu-link"
+          onClick={() => setShowAccount(account.accountLabel)}>{account.accountLabel}</a>
+      </li>
+    );
+    txs[account.accountLabel] = <Transactions accountLabel={account.accountLabel} pageNumber={0} />
+  }
+
+  return (<Fragment>
+    <h1 class="nav">{i18n`History of public accounts`}</h1>
+    <section id="main">
+      <article>
+        <div class="pure-menu pure-menu-horizontal" name="accountMenu">
+          <ul class="pure-menu-list">{accountsBar}</ul>
+          {typeof showAccount !== 'undefined' ? txs[showAccount] : <p>No public transactions found.</p>}
+          {Props.children}
+        </div>
+      </article>
+    </section>
+  </Fragment>);
+}
+
+/**
+ * If the user is logged in, it displays
+ * the balance, otherwise it offers to login.
+ */
+export function BankHome(): VNode {
+  const [backendState, backendStateSetter] = useBackendState();
+  const [pageState, pageStateSetter] = usePageState();
+  const [accountState, accountStateSetter] = useAccountState();
+  const setTxPageNumber = useTransactionPageNumber()[1];
+  const i18n = useTranslator();
+
+  if (pageState.showPublicHistories)
+    return (<SWRWithoutCredentials baseUrl={getRootPath()}>
+      <PageContext.Provider value={[pageState, pageStateSetter]}>
+        <BankFrame>
+          <PublicHistories pageStateSetter={pageStateSetter}>
+            <br />
+            <a class="pure-button" onClick={() => {
+              pageStateSetter((prevState: PageStateType) =>
+                ({ ...prevState, showPublicHistories: false }))
+            }}>Go back</a>
+          </PublicHistories>
+        </BankFrame>
+      </PageContext.Provider>
+    </SWRWithoutCredentials>);
+
+  if (pageState.tryRegister) {
+    console.log('allow registrations?', UI_ALLOW_REGISTRATIONS);
+    if (UI_ALLOW_REGISTRATIONS)
+      return (
+        <PageContext.Provider value={[pageState, pageStateSetter]}>
+          <BankFrame>
+            <RegistrationForm backendStateSetter={backendStateSetter} />
+          </BankFrame>
+        </PageContext.Provider>
+      );
+
+    return (
+      <PageContext.Provider value={[pageState, pageStateSetter]}>
+        <BankFrame>
+          <p>{i18n`Currently, the bank is not accepting new registrations!`}</p>
+        </BankFrame>
+      </PageContext.Provider>
+    );
+  }
+  if (pageState.isLoggedIn) {
+    if (typeof backendState === 'undefined') {
+      pageStateSetter((prevState) => ({
+        ...prevState,
+        hasError: true,
+        isLoggedIn: false,
+        error: i18n`Page has a problem: logged in but backend state is lost.`
+      }));
+      return (<p>Error: waiting for details...</p>);
+    }
+    console.log('Showing the profile page..');
+    return (
+      <SWRWithCredentials
+        username={backendState.username}
+        password={backendState.password}
+        backendUrl={backendState.url}>
+        <PageContext.Provider value={[pageState, pageStateSetter]}>
+          <Account accountLabel={backendState.username} backendState={backendState} />
+        </PageContext.Provider>
+      </SWRWithCredentials>
+    );
+  } // end of logged-in state.
+
+  return (
+    <PageContext.Provider value={[pageState, pageStateSetter]}>
+      <BankFrame>
+        <h1 class="nav">
+          {
+            i18n`Welcome to ${UI_BANK_NAME}!`
+          }
+        </h1>
+        <LoginForm
+          pageStateSetter={pageStateSetter}
+          backendStateSetter={backendStateSetter} />
+      </BankFrame>
+    </PageContext.Provider>
+  );
+}
diff --git a/packages/demobank-ui/src/pages/notfound/index.tsx b/packages/demobank-ui/src/pages/notfound/index.tsx
new file mode 100644
index 000000000..fd99259a1
--- /dev/null
+++ b/packages/demobank-ui/src/pages/notfound/index.tsx
@@ -0,0 +1,16 @@
+import { FunctionalComponent, h } from 'preact';
+import { Link } from 'preact-router/match';
+
+const Notfound: FunctionalComponent = () => {
+  return (
+    <div>
+      <h1>Error 404</h1>
+      <p>That page doesn&apos;t exist.</p>
+      <Link href="/">
+        <h4>Back to Home</h4>
+      </Link>
+    </div>
+  );
+};
+
+export default Notfound;
diff --git a/packages/demobank-ui/src/pages/notfound/style.css b/packages/demobank-ui/src/pages/notfound/style.css
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/packages/demobank-ui/src/pages/notfound/style.css
diff --git a/packages/demobank-ui/src/pages/profile/index.stories.tsx b/packages/demobank-ui/src/pages/profile/index.stories.tsx
new file mode 100644
index 000000000..15fd7c7e5
--- /dev/null
+++ b/packages/demobank-ui/src/pages/profile/index.stories.tsx
@@ -0,0 +1,38 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { h } from 'preact';
+import Profile from './index';
+
+
+export default {
+  title: 'Profile/View',
+  component: Profile,
+  argTypes: {
+    onSelect: { action: 'onSelect' },
+  },
+};
+
+export const Empty = (a: any) => <Profile {...a} />;
+Empty.args = {
+  instances: []
+}
+
diff --git a/packages/demobank-ui/src/pages/profile/index.tsx b/packages/demobank-ui/src/pages/profile/index.tsx
new file mode 100644
index 000000000..3b9824488
--- /dev/null
+++ b/packages/demobank-ui/src/pages/profile/index.tsx
@@ -0,0 +1,42 @@
+import { FunctionalComponent, h } from 'preact';
+import { useEffect, useState } from 'preact/hooks';
+
+interface Props {
+  user: string;
+}
+
+const Profile: FunctionalComponent<Props> = (props: Props) => {
+  const { user } = props;
+  const [time, setTime] = useState<number>(Date.now());
+  const [count, setCount] = useState<number>(0);
+
+  // gets called when this route is navigated to
+  useEffect(() => {
+    const timer = window.setInterval(() => setTime(Date.now()), 1000);
+
+    // gets called just before navigating away from the route
+    return (): void => {
+      clearInterval(timer);
+    };
+  }, []);
+
+  // update the current time
+  const increment = (): void => {
+    setCount(count + 1);
+  };
+
+  return (
+    <div>
+      <h1>Profile: {user}</h1>
+      <p>This is the user profile for a user named {user}.</p>
+
+      <div>Current time: {new Date(time).toLocaleString()}</div>
+
+      <p>
+        <button onClick={increment}>Click Me</button> Clicked {count} times.
+      </p>
+    </div>
+  );
+};
+
+export default Profile;
diff --git a/packages/demobank-ui/src/pages/profile/style.css b/packages/demobank-ui/src/pages/profile/style.css
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/packages/demobank-ui/src/pages/profile/style.css
diff --git a/packages/demobank-ui/src/scss/DurationPicker.scss b/packages/demobank-ui/src/scss/DurationPicker.scss
new file mode 100644
index 000000000..aa75b9916
--- /dev/null
+++ b/packages/demobank-ui/src/scss/DurationPicker.scss
@@ -0,0 +1,70 @@
+.rdp-picker {
+  display: flex;
+  height: 175px;
+}
+
+@media (max-width: 400px) {
+  .rdp-picker {
+    width: 250px;
+  }
+}
+
+.rdp-masked-div {
+  overflow: hidden;
+  height: 175px;
+  position: relative;
+}
+
+.rdp-column-container {
+  flex-grow: 1;
+  display: inline-block;
+}
+
+.rdp-column {
+  position: absolute;
+  z-index: 0;
+  width: 100%;
+}
+
+.rdp-reticule {
+  border: 0;
+  border-top: 2px solid rgba(109, 202, 236, 1);
+  height: 2px;
+  position: absolute;
+  width: 80%;
+  margin: 0;
+  z-index: 100;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  transform: translateX(-50%);
+}
+
+.rdp-text-overlay {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 35px;
+  font-size: 20px;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  transform: translateX(-50%);
+}
+
+.rdp-cell div {
+  font-size: 17px;
+  color: gray;
+  font-style: italic;
+}
+
+.rdp-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 35px;
+  font-size: 18px;
+}
+
+.rdp-center {
+  font-size: 25px;
+}
diff --git a/packages/demobank-ui/src/scss/_aside.scss b/packages/demobank-ui/src/scss/_aside.scss
new file mode 100644
index 000000000..11809990b
--- /dev/null
+++ b/packages/demobank-ui/src/scss/_aside.scss
@@ -0,0 +1,128 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+html {
+  &.has-aside-left {
+    &.has-aside-expanded {
+      nav.navbar,
+      body {
+        padding-left: $aside-width;
+      }
+    }
+    aside.is-placed-left {
+      display: block;
+    }
+  }
+}
+
+aside.aside.is-expanded {
+  width: $aside-width;
+
+  .menu-list {
+    @include icon-with-update-mark($aside-icon-width);
+
+    span.menu-item-label {
+      display: inline-block;
+    }
+
+    li.is-active {
+      ul {
+        display: block;
+      }
+      background-color: $body-background-color;
+    }
+  }
+}
+
+aside.aside {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 40;
+  height: 100vh;
+  padding: 0;
+  box-shadow: $aside-box-shadow;
+  background: $aside-background-color;
+
+  .aside-tools {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    background-color: $aside-tools-background-color;
+    color: $aside-tools-color;
+    line-height: $navbar-height;
+    height: $navbar-height;
+    padding-left: $default-padding * 0.5;
+    flex: 1;
+
+    .icon {
+      margin-right: $default-padding * 0.5;
+    }
+  }
+
+  .menu-list {
+    li {
+      a {
+        &.has-dropdown-icon {
+          position: relative;
+          padding-right: $aside-icon-width;
+
+          .dropdown-icon {
+            position: absolute;
+            top: $size-base * 0.5;
+            right: 0;
+          }
+        }
+      }
+      ul {
+        display: none;
+        border-left: 0;
+        background-color: darken($base-color, 2.5%);
+        padding-left: 0;
+        margin: 0 0 $default-padding * 0.5;
+
+        li {
+          a {
+            padding: $default-padding * 0.5 0 $default-padding * 0.5
+              $default-padding * 0.5;
+            font-size: $aside-submenu-font-size;
+
+            &.has-icon {
+              padding-left: 0;
+            }
+            &.is-active {
+              &:not(:hover) {
+                background: transparent;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .menu-label {
+    padding: 0 $default-padding * 0.5;
+    margin-top: $default-padding * 0.5;
+    margin-bottom: $default-padding * 0.5;
+  }
+}
diff --git a/packages/demobank-ui/src/scss/_card.scss b/packages/demobank-ui/src/scss/_card.scss
new file mode 100644
index 000000000..3f71aeb6a
--- /dev/null
+++ b/packages/demobank-ui/src/scss/_card.scss
@@ -0,0 +1,69 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+.card:not(:last-child) {
+  margin-bottom: $default-padding;
+}
+
+.card {
+  border-radius: $radius-large;
+  border: $card-border;
+
+  &.has-table {
+    .card-content {
+      padding: 0;
+    }
+    .b-table {
+      border-radius: $radius-large;
+      overflow: hidden;
+    }
+  }
+
+  &.is-card-widget {
+    .card-content {
+      padding: $default-padding * 0.5;
+    }
+  }
+
+  .card-header {
+    border-bottom: 1px solid $base-color-light;
+  }
+
+  .card-content {
+    hr {
+      margin-left: $card-content-padding * -1;
+      margin-right: $card-content-padding * -1;
+    }
+  }
+
+  .is-widget-icon {
+    .icon {
+      width: 5rem;
+      height: 5rem;
+    }
+  }
+
+  .is-widget-label {
+    .subtitle {
+      color: $grey;
+    }
+  }
+}
diff --git a/packages/demobank-ui/src/scss/_custom-calendar.scss b/packages/demobank-ui/src/scss/_custom-calendar.scss
new file mode 100644
index 000000000..e0334b62d
--- /dev/null
+++ b/packages/demobank-ui/src/scss/_custom-calendar.scss
@@ -0,0 +1,263 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+:root {
+  --primary-color: #3298dc;
+
+  --primary-text-color-dark: rgba(0, 0, 0, 0.87);
+  --secondary-text-color-dark: rgba(0, 0, 0, 0.57);
+  --disabled-text-color-dark: rgba(0, 0, 0, 0.13);
+
+  --primary-text-color-light: rgba(255, 255, 255, 0.87);
+  --secondary-text-color-light: rgba(255, 255, 255, 0.57);
+  --disabled-text-color-light: rgba(255, 255, 255, 0.13);
+
+  --font-stack: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
+
+  --primary-card-color: #fff;
+  --primary-background-color: #f2f2f2;
+
+  --box-shadow-lvl-1: 0 1px 3px rgba(0, 0, 0, 0.12),
+    0 1px 2px rgba(0, 0, 0, 0.24);
+  --box-shadow-lvl-2: 0 3px 6px rgba(0, 0, 0, 0.16),
+    0 3px 6px rgba(0, 0, 0, 0.23);
+  --box-shadow-lvl-3: 0 10px 20px rgba(0, 0, 0, 0.19),
+    0 6px 6px rgba(0, 0, 0, 0.23);
+  --box-shadow-lvl-4: 0 14px 28px rgba(0, 0, 0, 0.25),
+    0 10px 10px rgba(0, 0, 0, 0.22);
+}
+
+.home .datePicker div {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+.datePicker {
+  text-align: left;
+  background: var(--primary-card-color);
+  border-radius: 3px;
+  z-index: 200;
+  position: fixed;
+  height: auto;
+  max-height: 90vh;
+  width: 90vw;
+  max-width: 448px;
+  transform-origin: top left;
+  transition: transform 0.22s ease-in-out, opacity 0.22s ease-in-out;
+  top: 50%;
+  left: 50%;
+  opacity: 0;
+  transform: scale(0) translate(-50%, -50%);
+  user-select: none;
+
+  &.datePicker--opened {
+    opacity: 1;
+    transform: scale(1) translate(-50%, -50%);
+  }
+
+  .datePicker--titles {
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+    padding: 24px;
+    height: 100px;
+    background: var(--primary-color);
+
+    h2,
+    h3 {
+      cursor: pointer;
+      color: #fff;
+      line-height: 1;
+      padding: 0;
+      margin: 0;
+      font-size: 32px;
+    }
+
+    h3 {
+      color: rgba(255, 255, 255, 0.57);
+      font-size: 18px;
+      padding-bottom: 2px;
+    }
+  }
+
+  nav {
+    padding: 20px;
+    height: 56px;
+
+    h4 {
+      width: calc(100% - 60px);
+      text-align: center;
+      display: inline-block;
+      padding: 0;
+      font-size: 14px;
+      line-height: 24px;
+      margin: 0;
+      position: relative;
+      top: -9px;
+      color: var(--primary-text-color);
+    }
+
+    i {
+      cursor: pointer;
+      color: var(--secondary-text-color);
+      font-size: 26px;
+      user-select: none;
+      border-radius: 50%;
+
+      &:hover {
+        background: var(--disabled-text-color-dark);
+      }
+    }
+  }
+
+  .datePicker--scroll {
+    overflow-y: auto;
+    max-height: calc(90vh - 56px - 100px);
+  }
+
+  .datePicker--calendar {
+    padding: 0 20px;
+
+    .datePicker--dayNames {
+      width: 100%;
+      display: grid;
+      text-align: center;
+
+      // there's probably a better way to do this, but wanted to try out CSS grid
+      grid-template-columns: calc(100% / 7) calc(100% / 7) calc(100% / 7) calc(
+          100% / 7
+        ) calc(100% / 7) calc(100% / 7) calc(100% / 7);
+
+      span {
+        color: var(--secondary-text-color-dark);
+        font-size: 14px;
+        line-height: 42px;
+        display: inline-grid;
+      }
+    }
+
+    .datePicker--days {
+      width: 100%;
+      display: grid;
+      text-align: center;
+      grid-template-columns: calc(100% / 7) calc(100% / 7) calc(100% / 7) calc(
+          100% / 7
+        ) calc(100% / 7) calc(100% / 7) calc(100% / 7);
+
+      span {
+        color: var(--primary-text-color-dark);
+        line-height: 42px;
+        font-size: 14px;
+        display: inline-grid;
+        transition: color 0.22s;
+        height: 42px;
+        position: relative;
+        cursor: pointer;
+        user-select: none;
+        border-radius: 50%;
+
+        &::before {
+          content: "";
+          position: absolute;
+          z-index: -1;
+          height: 42px;
+          width: 42px;
+          left: calc(50% - 21px);
+          background: var(--primary-color);
+          border-radius: 50%;
+          transition: transform 0.22s, opacity 0.22s;
+          transform: scale(0);
+          opacity: 0;
+        }
+
+        &[disabled="true"] {
+          cursor: unset;
+        }
+
+        &.datePicker--today {
+          font-weight: 700;
+        }
+
+        &.datePicker--selected {
+          color: rgba(255, 255, 255, 0.87);
+
+          &:before {
+            transform: scale(1);
+            opacity: 1;
+          }
+        }
+      }
+    }
+  }
+
+  .datePicker--selectYear {
+    padding: 0 20px;
+    display: block;
+    width: 100%;
+    text-align: center;
+    max-height: 362px;
+
+    span {
+      display: block;
+      width: 100%;
+      font-size: 24px;
+      margin: 20px auto;
+      cursor: pointer;
+
+      &.selected {
+        font-size: 42px;
+        color: var(--primary-color);
+      }
+    }
+  }
+
+  div.datePicker--actions {
+    width: 100%;
+    padding: 8px;
+    text-align: right;
+
+    button {
+      margin-bottom: 0;
+      font-size: 15px;
+      cursor: pointer;
+      color: var(--primary-text-color);
+      border: none;
+      margin-left: 8px;
+      min-width: 64px;
+      line-height: 36px;
+      background-color: transparent;
+      appearance: none;
+      padding: 0 16px;
+      border-radius: 3px;
+      transition: background-color 0.13s;
+
+      &:hover,
+      &:focus {
+        outline: none;
+        background-color: var(--disabled-text-color-dark);
+      }
+    }
+  }
+}
+
+.datePicker--background {
+  z-index: 199;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.52);
+  animation: fadeIn 0.22s forwards;
+}
diff --git a/packages/demobank-ui/src/scss/_footer.scss b/packages/demobank-ui/src/scss/_footer.scss
new file mode 100644
index 000000000..112522ed8
--- /dev/null
+++ b/packages/demobank-ui/src/scss/_footer.scss
@@ -0,0 +1,35 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+footer.footer {
+  .logo {
+    img {
+      width: auto;
+      height: $footer-logo-height;
+    }
+  }
+}
+
+@include mobile {
+  .footer-copyright {
+    text-align: center;
+  }
+}
diff --git a/packages/demobank-ui/src/scss/_form.scss b/packages/demobank-ui/src/scss/_form.scss
new file mode 100644
index 000000000..786044eff
--- /dev/null
+++ b/packages/demobank-ui/src/scss/_form.scss
@@ -0,0 +1,71 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+.field {
+  &.has-check {
+    .field-body {
+      margin-top: $default-padding * 0.125;
+    }
+  }
+  .control {
+    .mdi-24px.mdi-set,
+    .mdi-24px.mdi:before {
+      font-size: inherit;
+    }
+  }
+}
+.upload {
+  .upload-draggable {
+    display: block;
+  }
+}
+
+.input,
+.textarea,
+select {
+  box-shadow: none;
+
+  &:focus,
+  &:active {
+    box-shadow: none !important;
+  }
+}
+
+.switch input[type="checkbox"] + .check:before {
+  box-shadow: none;
+}
+
+.switch,
+.b-checkbox.checkbox {
+  input[type="checkbox"] {
+    &:focus + .check,
+    &:focus:checked + .check {
+      box-shadow: none !important;
+    }
+  }
+}
+
+.b-checkbox.checkbox input[type="checkbox"],
+.b-radio.radio input[type="radio"] {
+  & + .check {
+    border: $checkbox-border;
+  }
+}
diff --git a/packages/demobank-ui/src/scss/_hero-bar.scss b/packages/demobank-ui/src/scss/_hero-bar.scss
new file mode 100644
index 000000000..31b7e623e
--- /dev/null
+++ b/packages/demobank-ui/src/scss/_hero-bar.scss
@@ -0,0 +1,55 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+section.hero.is-hero-bar {
+  background-color: $hero-bar-background;
+  border-bottom: $light-border;
+
+  .hero-body {
+    padding: $default-padding;
+
+    .level-item {
+      &.is-hero-avatar-item {
+        margin-right: $default-padding;
+      }
+
+      > div > .level {
+        margin-bottom: $default-padding * 0.5;
+      }
+
+      .subtitle + p {
+        margin-top: $default-padding * 0.5;
+      }
+    }
+
+    .button {
+      &.is-hero-button {
+        background-color: rgba($white, 0.5);
+        font-weight: 300;
+        @include transition(background-color);
+
+        &:hover {
+          background-color: $white;
+        }
+      }
+    }
+  }
+}
diff --git a/packages/demobank-ui/src/scss/_loading.scss b/packages/demobank-ui/src/scss/_loading.scss
new file mode 100644
index 000000000..d25bf8048
--- /dev/null
+++ b/packages/demobank-ui/src/scss/_loading.scss
@@ -0,0 +1,51 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+.lds-ring {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+.lds-ring div {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  width: 64px;
+  height: 64px;
+  margin: 8px;
+  border: 8px solid black;
+  border-radius: 50%;
+  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: black transparent transparent transparent;
+}
+.lds-ring div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+.lds-ring div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+.lds-ring div:nth-child(3) {
+  animation-delay: -0.15s;
+}
+@keyframes lds-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/packages/demobank-ui/src/scss/_main-section.scss b/packages/demobank-ui/src/scss/_main-section.scss
new file mode 100644
index 000000000..01edc24bf
--- /dev/null
+++ b/packages/demobank-ui/src/scss/_main-section.scss
@@ -0,0 +1,24 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+section.section.is-main-section {
+  padding-top: $default-padding;
+}
diff --git a/packages/demobank-ui/src/scss/_misc.scss b/packages/demobank-ui/src/scss/_misc.scss
new file mode 100644
index 000000000..65bd28dbd
--- /dev/null
+++ b/packages/demobank-ui/src/scss/_misc.scss
@@ -0,0 +1,50 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+.is-user-avatar {
+  &.has-max-width {
+    max-width: $size-base * 7;
+  }
+
+  &.is-aligned-center {
+    margin: 0 auto;
+  }
+
+  img {
+    margin: 0 auto;
+    border-radius: $radius-rounded;
+  }
+}
+
+.icon.has-update-mark {
+  position: relative;
+
+  &:after {
+    content: "";
+    width: $icon-update-mark-size;
+    height: $icon-update-mark-size;
+    position: absolute;
+    top: 1px;
+    right: 1px;
+    background-color: $icon-update-mark-color;
+    border-radius: $radius-rounded;
+  }
+}
diff --git a/packages/demobank-ui/src/scss/_mixins.scss b/packages/demobank-ui/src/scss/_mixins.scss
new file mode 100644
index 000000000..b52e590e3
--- /dev/null
+++ b/packages/demobank-ui/src/scss/_mixins.scss
@@ -0,0 +1,34 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+@mixin transition($t) {
+  transition: $t 250ms ease-in-out 50ms;
+}
+
+@mixin icon-with-update-mark($icon-base-width) {
+  .icon {
+    width: $icon-base-width;
+
+    &.has-update-mark:after {
+      right: ($icon-base-width / 2) - 0.85;
+    }
+  }
+}
diff --git a/packages/demobank-ui/src/scss/_modal.scss b/packages/demobank-ui/src/scss/_modal.scss
new file mode 100644
index 000000000..b3a31ebf1
--- /dev/null
+++ b/packages/demobank-ui/src/scss/_modal.scss
@@ -0,0 +1,35 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+.modal-card {
+  width: $modal-card-width;
+}
+
+.modal-card-foot {
+  background-color: $modal-card-foot-background-color;
+}
+
+@include mobile {
+  .modal .animation-content .modal-card {
+    width: $modal-card-width-mobile;
+    margin: 0 auto;
+  }
+}
diff --git a/packages/demobank-ui/src/scss/_nav-bar.scss b/packages/demobank-ui/src/scss/_nav-bar.scss
new file mode 100644
index 000000000..c6dd04263
--- /dev/null
+++ b/packages/demobank-ui/src/scss/_nav-bar.scss
@@ -0,0 +1,144 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+nav.navbar {
+  box-shadow: $navbar-box-shadow;
+
+  .navbar-item {
+    &.has-user-avatar {
+      .is-user-avatar {
+        margin-right: $default-padding * 0.5;
+        display: inline-flex;
+        width: $navbar-avatar-size;
+        height: $navbar-avatar-size;
+      }
+    }
+
+    &.has-divider {
+      border-right: $navbar-divider-border;
+    }
+
+    &.no-left-space {
+      padding-left: 0;
+    }
+
+    &.has-dropdown {
+      padding-right: 0;
+      padding-left: 0;
+
+      .navbar-link {
+        padding-right: $navbar-item-h-padding;
+        padding-left: $navbar-item-h-padding;
+      }
+    }
+
+    &.has-control {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    .control {
+      .input {
+        color: $navbar-input-color;
+        border: 0;
+        box-shadow: none;
+        background: transparent;
+
+        &::placeholder {
+          color: $navbar-input-placeholder-color;
+        }
+      }
+    }
+  }
+}
+
+@include touch {
+  nav.navbar {
+    display: flex;
+    padding-right: 0;
+
+    .navbar-brand {
+      flex: 1;
+
+      &.is-right {
+        flex: none;
+      }
+    }
+
+    .navbar-item {
+      &.no-left-space-touch {
+        padding-left: 0;
+      }
+    }
+
+    .navbar-menu {
+      position: absolute;
+      width: 100vw;
+      padding-top: 0;
+      top: $navbar-height;
+      left: 0;
+
+      .navbar-item {
+        .icon:first-child {
+          margin-right: $default-padding * 0.5;
+        }
+
+        &.has-dropdown {
+          > .navbar-link {
+            background-color: $white-ter;
+            .icon:last-child {
+              display: none;
+            }
+          }
+        }
+
+        &.has-user-avatar {
+          > .navbar-link {
+            display: flex;
+            align-items: center;
+            padding-top: $default-padding * 0.5;
+            padding-bottom: $default-padding * 0.5;
+          }
+        }
+      }
+    }
+  }
+}
+
+@include desktop {
+  nav.navbar {
+    .navbar-item {
+      padding-right: $navbar-item-h-padding;
+      padding-left: $navbar-item-h-padding;
+
+      &:not(.is-desktop-icon-only) {
+        .icon:first-child {
+          margin-right: $default-padding * 0.5;
+        }
+      }
+      &.is-desktop-icon-only {
+        span:not(.icon) {
+          display: none;
+        }
+      }
+    }
+  }
+}
diff --git a/packages/demobank-ui/src/scss/_table.scss b/packages/demobank-ui/src/scss/_table.scss
new file mode 100644
index 000000000..b68d50e4f
--- /dev/null
+++ b/packages/demobank-ui/src/scss/_table.scss
@@ -0,0 +1,179 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+table.table {
+  thead {
+    th {
+      border-bottom-width: 1px;
+    }
+  }
+
+  td,
+  th {
+    &.checkbox-cell {
+      .b-checkbox.checkbox:not(.button) {
+        margin-right: 0;
+        width: 20px;
+
+        .control-label {
+          display: none;
+          padding: 0;
+        }
+      }
+    }
+  }
+
+  td {
+    .image {
+      margin: 0 auto;
+      width: $table-avatar-size;
+      height: $table-avatar-size;
+    }
+
+    &.is-progress-col {
+      min-width: 5rem;
+      vertical-align: middle;
+    }
+  }
+}
+
+.b-table {
+  .table {
+    border: 0;
+    border-radius: 0;
+  }
+
+  /* This stylizes buefy's pagination */
+  .table-wrapper {
+    margin-bottom: 0;
+  }
+
+  .table-wrapper + .level {
+    padding: $notification-padding;
+    padding-left: $card-content-padding;
+    padding-right: $card-content-padding;
+    margin: 0;
+    border-top: $base-color-light;
+    background: $notification-background-color;
+
+    .pagination-link {
+      background: $button-background-color;
+      color: $button-color;
+      border-color: $button-border-color;
+
+      &.is-current {
+        border-color: $button-active-border-color;
+      }
+    }
+
+    .pagination-previous,
+    .pagination-next,
+    .pagination-link {
+      border-color: $button-border-color;
+      color: $base-color;
+
+      &[disabled] {
+        background-color: transparent;
+      }
+    }
+  }
+}
+
+@include mobile {
+  .card {
+    &.has-table {
+      .b-table {
+        .table-wrapper + .level {
+          .level-left + .level-right {
+            margin-top: 0;
+          }
+        }
+      }
+    }
+    &.has-mobile-sort-spaced {
+      .b-table {
+        .field.table-mobile-sort {
+          padding-top: $default-padding * 0.5;
+        }
+      }
+    }
+  }
+  .b-table {
+    .field.table-mobile-sort {
+      padding: 0 $default-padding * 0.5;
+    }
+
+    .table-wrapper.has-mobile-cards {
+      tr {
+        box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1);
+        margin-bottom: 3px !important;
+      }
+      td {
+        &.is-progress-col {
+          span,
+          progress {
+            display: flex;
+            width: 45%;
+            align-items: center;
+            align-self: center;
+          }
+        }
+
+        &.checkbox-cell,
+        &.is-image-cell {
+          border-bottom: 0 !important;
+        }
+
+        &.checkbox-cell,
+        &.is-actions-cell {
+          &:before {
+            display: none;
+          }
+        }
+
+        &.has-no-head-mobile {
+          &:before {
+            display: none;
+          }
+
+          span {
+            display: block;
+            width: 100%;
+          }
+
+          &.is-progress-col {
+            progress {
+              width: 100%;
+            }
+          }
+
+          &.is-image-cell {
+            .image {
+              width: $table-avatar-size-mobile;
+              height: auto;
+              margin: 0 auto $default-padding * 0.25;
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/demobank-ui/src/scss/_theme-default.scss b/packages/demobank-ui/src/scss/_theme-default.scss
new file mode 100644
index 000000000..538dfd4da
--- /dev/null
+++ b/packages/demobank-ui/src/scss/_theme-default.scss
@@ -0,0 +1,136 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+/* We'll need some initial vars to use here */
+@import "node_modules/bulma/sass/utilities/initial-variables";
+
+/* Base: Size  */
+$size-base: 1rem;
+$default-padding: $size-base * 1.5;
+
+/* Default font */
+$family-sans-serif: "Nunito", sans-serif;
+
+/* Base color */
+$base-color: #2e323a;
+$base-color-light: rgba(24, 28, 33, 0.06);
+
+/* General overrides */
+$primary: $turquoise;
+$body-background-color: #f8f8f8;
+$link: $blue;
+$link-visited: $purple;
+$light-border: 1px solid $base-color-light;
+$hr-height: 1px;
+
+/* NavBar: specifics */
+$navbar-input-color: $grey-darker;
+$navbar-input-placeholder-color: $grey-lighter;
+$navbar-box-shadow: 0 1px 0 rgba(24, 28, 33, 0.04);
+$navbar-divider-border: 1px solid rgba($grey-lighter, 0.25);
+$navbar-item-h-padding: $default-padding * 0.75;
+$navbar-avatar-size: 1.75rem;
+
+/* Aside: Bulma override */
+$menu-item-radius: 0;
+$menu-list-link-padding: $size-base * 0.5 0;
+$menu-label-color: lighten($base-color, 25%);
+$menu-item-color: lighten($base-color, 30%);
+$menu-item-hover-color: $white;
+$menu-item-hover-background-color: darken($base-color, 3.5%);
+$menu-item-active-color: $white;
+$menu-item-active-background-color: darken($base-color, 2.5%);
+
+/* Aside: specifics */
+$aside-width: $size-base * 14;
+$aside-mobile-width: $size-base * 15;
+$aside-icon-width: $size-base * 3;
+$aside-submenu-font-size: $size-base * 0.95;
+$aside-box-shadow: none;
+$aside-background-color: $base-color;
+$aside-tools-background-color: darken($aside-background-color, 10%);
+$aside-tools-color: $white;
+
+/* Title Bar: specifics */
+$title-bar-color: $grey;
+$title-bar-active-color: $black-ter;
+
+/* Hero Bar: specifics */
+$hero-bar-background: $white;
+
+/* Card: Bulma override */
+$card-shadow: none;
+$card-header-shadow: none;
+
+/* Card: specifics */
+$card-border: 1px solid $base-color-light;
+$card-header-border-bottom-color: $base-color-light;
+
+/* Table: Bulma override */
+$table-cell-border: 1px solid $white-bis;
+
+/* Table: specifics */
+$table-avatar-size: $size-base * 1.5;
+$table-avatar-size-mobile: 25vw;
+
+/* Form */
+$checkbox-border: 1px solid $base-color;
+
+/* Modal card: Bulma override */
+$modal-card-head-background-color: $white-ter;
+$modal-card-title-size: $size-base;
+$modal-card-body-padding: $default-padding 20px;
+$modal-card-head-border-bottom: 1px solid $white-ter;
+$modal-card-foot-border-top: 0;
+
+/* Modal card: specifics */
+$modal-card-width: 80vw;
+$modal-card-width-mobile: 90vw;
+$modal-card-foot-background-color: $white-ter;
+
+/* Notification: Bulma override */
+$notification-padding: $default-padding * 0.75 $default-padding;
+
+/* Footer: Bulma override */
+$footer-background-color: $white;
+$footer-padding: $default-padding * 0.33 $default-padding;
+
+/* Footer: specifics */
+$footer-logo-height: $size-base * 2;
+
+/* Progress: Bulma override */
+$progress-bar-background-color: $grey-lighter;
+
+/* Icon: specifics */
+$icon-update-mark-size: $size-base * 0.5;
+$icon-update-mark-color: $yellow;
+
+$input-disabled-border-color: $grey-lighter;
+$table-row-hover-background-color: hsl(0, 0%, 80%);
+
+.menu-list {
+  div {
+    border-radius: $menu-item-radius;
+    color: $menu-item-color;
+    display: block;
+    padding: $menu-list-link-padding;
+  }
+}
diff --git a/packages/demobank-ui/src/scss/_tiles.scss b/packages/demobank-ui/src/scss/_tiles.scss
new file mode 100644
index 000000000..e69d995f0
--- /dev/null
+++ b/packages/demobank-ui/src/scss/_tiles.scss
@@ -0,0 +1,24 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+.is-tiles-wrapper {
+  margin-bottom: $default-padding;
+}
diff --git a/packages/demobank-ui/src/scss/_title-bar.scss b/packages/demobank-ui/src/scss/_title-bar.scss
new file mode 100644
index 000000000..932f8e65d
--- /dev/null
+++ b/packages/demobank-ui/src/scss/_title-bar.scss
@@ -0,0 +1,50 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+section.section.is-title-bar {
+  padding: $default-padding;
+  border-bottom: $light-border;
+
+  ul {
+    li {
+      display: inline-block;
+      padding: 0 $default-padding * 0.5 0 0;
+      font-size: $default-padding;
+      color: $title-bar-color;
+
+      &:after {
+        display: inline-block;
+        content: "/";
+        padding-left: $default-padding * 0.5;
+      }
+
+      &:last-child {
+        padding-right: 0;
+        font-weight: 900;
+        color: $title-bar-active-color;
+
+        &:after {
+          display: none;
+        }
+      }
+    }
+  }
+}
diff --git a/packages/demobank-ui/src/scss/bank.scss b/packages/demobank-ui/src/scss/bank.scss
new file mode 100644
index 000000000..b524cfe29
--- /dev/null
+++ b/packages/demobank-ui/src/scss/bank.scss
@@ -0,0 +1,264 @@
+.navcontainer:not(.default-navcontainer) {
+    margin-bottom: 0 !important;
+}
+
+.abort-button {
+  margin-left: 2px;
+  border: 2px solid rgb(0, 120, 231);
+  color: rgb(0, 120, 231);
+  font-size: 87%;
+  margin-top: 1px;
+  background: white;
+}
+
+div.pages-list {
+  margin-top: 15px;
+}
+
+.login-div,
+.register-div {
+    display: block;
+    text-align: center;
+}
+
+a.page-number {
+  color: blue;
+}
+
+a.current-page-number {
+  color: inherit;
+  background-color: inherit;
+}
+
+.cancelled {
+  text-decoration: line-through;
+}
+
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* This CSS code styles the tab */
+.tab {
+    overflow: hidden;
+}
+
+.logout {
+    float: right;
+    border: 20px;
+    margin-right: 15px;
+    margin-top: 15px;
+}
+
+.tab button {
+    background-color: lightgray;
+    color: black;
+    float: left;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    padding: 18px 19px;
+    border: 2px solid #c1c1c1;
+    transition: 0.5s;
+    font-weight: bold;
+}
+
+.tab button:hover {
+    background-color: yellow;
+    border: 2px solid #c1c1c1;
+    color: black;
+}
+
+.tab button.active {
+    background-color: orange;
+    border: 2px solid #c1c1c1;
+    color: black;
+    font-weight: bold;
+}
+
+.tabcontent {
+    display: none;
+    padding: 8px 16px;
+    border: 2px solid #c1c1c1;
+    width: max-content;
+}
+
+.tabcontent.active {
+    display: block;
+}
+
+input[type="number"] {
+    -moz-appearance: textfield;
+}
+
+#transfer-fields {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+#id_amount {
+  width: 6em;
+  display: inline-block;
+  border-radius: 4px 0px 0px 4px;
+}
+
+/**
+ * Amount without the currency,
+ * placed left to a .currency-indicator.
+ */
+#main .amount {
+  width: 6em;
+  display: inline-block;
+  border-radius: 4px 0px 0px 4px;
+}
+
+input {
+    background-color: inherit;
+}
+
+.large-amount {
+    font-weight: bold;
+    font-size: x-large;
+}
+
+.currency {
+    font-style: oblique;
+}
+
+/*
+ * Currency indicator to the right of input fields,
+ * with non-rounded corners to the left.
+ */
+#main .currency-indicator {
+  color: black;
+  border-radius: 0px 4px 4px 0px;
+  position: relative;
+}
+
+#main .fieldlabel {
+  display: block;
+  padding-bottom: 0.5em;
+}
+
+#main .fieldbox {
+  margin-right: 1em;
+  margin-bottom: 0.5em;
+}
+
+#logout-button {
+  display: block;
+  width: fit-content;
+}
+
+.register-form > .pure-form,
+.login-form > .pure-form {
+    background: #4a4a4a;
+    color: #ffffff;
+    display: inline-block;
+    text-align: left;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 16px 16px;
+    border-radius: 8px;
+    width: max-content;
+    .formFieldLabel {
+        margin: 2px 2px;
+    }
+    input[type="text"],
+    input[type="password"] {
+        border: none;
+        border-radius: 4px;
+        background: #6a6a6a;
+        color: #fefefe;
+        box-shadow: none;
+    }
+    input[placeholder="Password"][type="password"] {
+        margin-bottom: 8px;
+    }
+    .btn-register,
+    .btn-login {
+        float: left;
+    }
+    .btn-cancel {
+        float: right;
+    }
+    h2 {
+        margin-top: 0;
+        margin-bottom: 10px;
+    }
+}
+
+
+.challenge-div {
+    display: block;
+    text-align: center;
+}
+
+.challenge-form > .pure-form {
+    background: #4a4a4a;
+    color: #ffffff;
+    display: inline-block;
+    text-align: left;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 16px 16px;
+    border-radius: 8px;
+    width: max-content;
+    .formFieldLabel {
+        margin: 2px 2px;
+    }
+    input[type="text"] {
+        border: none;
+        border-radius: 4px;
+        background: #6a6a6a;
+        color: #fefefe;
+        box-shadow: none;
+    }
+    .btn-confirm {
+        float: left;
+    }
+    .btn-cancel {
+        float: right;
+    }
+    h2 {
+        margin-top: 0;
+        margin-bottom: 10px;
+    }
+}
+
+
+.wire-transfer-form > .pure-form,
+.payto-form > .pure-form,
+.reserve-form > .pure-form {
+    background: #4a4a4a;
+    color: #ffffff;
+    display: inline-block;
+    text-align: left;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 16px 16px;
+    border-radius: 8px;
+    width: max-content;
+    .formFieldLabel {
+        margin: 2px 2px;
+    }
+    input[type="text"] {
+        border: none;
+        border-radius: 4px;
+        background: #6a6a6a;
+        color: #fefefe;
+        box-shadow: none;
+    }
+}
+
+
+html {
+    background: #ffffff;
+    color: #2a2a2a;
+}
+
+.hint {
+    scale: 0.7;
+}
diff --git a/packages/demobank-ui/src/scss/colors-bank.scss b/packages/demobank-ui/src/scss/colors-bank.scss
new file mode 100644
index 000000000..c34610948
--- /dev/null
+++ b/packages/demobank-ui/src/scss/colors-bank.scss
@@ -0,0 +1,31 @@
+nav,
+nav a,
+nav span,
+.navcontainer,
+nav button,
+.demobar,
+.navbtn {
+  color: white;
+  background: #a00000;
+}
+
+nav a.active,
+nav button,
+nav span.active,
+.navbtn.active {
+  background-color: #7a0606;
+}
+
+nav a.active:hover,
+nav span.active:hover,
+.navbtn.active:hover,
+nav button:hover,
+nav a:hover,
+nav span:hover,
+.navbtn:hover {
+  background: #df3d3d;
+}
+
+nav a.navbtn.langbtn:focus {
+  background-color: #df3d3d;
+}
\ No newline at end of file
diff --git a/packages/demobank-ui/src/scss/demo.scss b/packages/demobank-ui/src/scss/demo.scss
new file mode 100644
index 000000000..71db4b41e
--- /dev/null
+++ b/packages/demobank-ui/src/scss/demo.scss
@@ -0,0 +1,157 @@
+@charset "UTF-8";
+/*
+Style common to all demo pages.
+
+Colors:
+- #1e2739 (dark blue)
+- #0042b2 (default blue)
+- #3daee9 (highlight blue)
+*/
+
+.demobar h1 {
+  text-align: center;
+}
+
+.demobar > p {
+  padding: 0.5em;
+}
+
+.demobar a,
+.demobar a:visited {
+  color: inherit;
+  background-color: inherit;
+}
+
+.tt {
+  font-family: "Lucida Console", Monaco, monospace;
+}
+
+.informational-ok {
+  background: lightgreen;
+  border-radius: 1em;
+  padding: 0.5em;
+}
+
+.informational-fail {
+  background: lightpink;
+  border-radius: 1em;
+  padding: 0.5em;
+}
+
+.content {
+  margin-left: 2em;
+  overflow-x: auto;
+}
+
+.demobar {
+  overflow-x: auto;
+  background-color: #0042b2;
+  color: white;
+}
+
+body {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.navcontainer {
+  background: #0042b2;
+  margin-bottom: 50px;
+  width: 100%;
+  color: white;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0px;
+  width: 100vw;
+  backdrop-filter: blur(10px);
+  opacity: 1;
+  z-index: 10000;
+}
+
+nav {
+  left: 1vw;
+  position: relative;
+  background: #0042b2;
+  z-index: 10000;
+}
+
+nav a,
+nav button,
+nav span,
+.navbtn {
+  border: none;
+  color: white;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  background: #0042b2;
+  height: inherit;
+}
+
+nav a,
+nav button,
+nav span,
+.navbtn {
+  padding: 15px 32px;
+}
+
+nav a:hover,
+nav span:hover,
+.navbtn:hover {
+  background: #3daee9;
+}
+
+nav a.active,
+nav span.active,
+.navbtn.active {
+  background-color: #1e2739;
+}
+
+nav a.active:hover,
+nav button.active:hover,
+nav span.active:hover,
+.navbtn.active:hover {
+  background: #3daee9;
+}
+
+nav a,
+nav span,
+.navbtn {
+  cursor: pointer;
+}
+
+nav .right {
+  float: right;
+  margin-right: 5vw;
+}
+nav .hide div.nav {
+  display: none;
+}
+// nav .right div.nav:hover {
+//   display: block;
+// }
+
+// nav .right:hover div.nav {
+//   display: block;
+// }
+
+.langbtn {
+  width: 100%;
+  text-align: left;
+}
+
+.skip {
+  position: absolute;
+  left: -10000px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+.skip:focus {
+  position: static;
+  width: auto;
+  height: auto;
+}
diff --git a/packages/demobank-ui/src/scss/fonts/XRXV3I6Li01BKofINeaE.ttf b/packages/demobank-ui/src/scss/fonts/XRXV3I6Li01BKofINeaE.ttf
new file mode 100644
index 000000000..7665ee336
--- /dev/null
+++ b/packages/demobank-ui/src/scss/fonts/XRXV3I6Li01BKofINeaE.ttf
diff --git a/packages/demobank-ui/src/scss/fonts/nunito.css b/packages/demobank-ui/src/scss/fonts/nunito.css
new file mode 100644
index 000000000..ab30db36b
--- /dev/null
+++ b/packages/demobank-ui/src/scss/fonts/nunito.css
@@ -0,0 +1,22 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+@font-face {
+  font-family: 'Nunito';
+  font-style: normal;
+  font-weight: 400;
+  src: url(./XRXV3I6Li01BKofINeaE.ttf) format('truetype');
+}
diff --git a/packages/demobank-ui/src/scss/icons/fonts/materialdesignicons-webfont-4.9.95.eot b/packages/demobank-ui/src/scss/icons/fonts/materialdesignicons-webfont-4.9.95.eot
new file mode 100644
index 000000000..ab6b25ded
--- /dev/null
+++ b/packages/demobank-ui/src/scss/icons/fonts/materialdesignicons-webfont-4.9.95.eot
diff --git a/packages/demobank-ui/src/scss/icons/fonts/materialdesignicons-webfont-4.9.95.ttf b/packages/demobank-ui/src/scss/icons/fonts/materialdesignicons-webfont-4.9.95.ttf
new file mode 100644
index 000000000..824be10fa
--- /dev/null
+++ b/packages/demobank-ui/src/scss/icons/fonts/materialdesignicons-webfont-4.9.95.ttf
diff --git a/packages/demobank-ui/src/scss/icons/fonts/materialdesignicons-webfont-4.9.95.woff b/packages/demobank-ui/src/scss/icons/fonts/materialdesignicons-webfont-4.9.95.woff
new file mode 100644
index 000000000..7e087c1de
--- /dev/null
+++ b/packages/demobank-ui/src/scss/icons/fonts/materialdesignicons-webfont-4.9.95.woff
diff --git a/packages/demobank-ui/src/scss/icons/fonts/materialdesignicons-webfont-4.9.95.woff2 b/packages/demobank-ui/src/scss/icons/fonts/materialdesignicons-webfont-4.9.95.woff2
new file mode 100644
index 000000000..b5caa4ddc
--- /dev/null
+++ b/packages/demobank-ui/src/scss/icons/fonts/materialdesignicons-webfont-4.9.95.woff2
diff --git a/packages/demobank-ui/src/scss/icons/materialdesignicons-4.9.95.min.css b/packages/demobank-ui/src/scss/icons/materialdesignicons-4.9.95.min.css
new file mode 100644
index 000000000..24a89d639
--- /dev/null
+++ b/packages/demobank-ui/src/scss/icons/materialdesignicons-4.9.95.min.css
@@ -0,0 +1,3 @@
+@font-face{font-family:"Material Design Icons";src:url("./fonts/materialdesignicons-webfont-4.9.95.eot");src:url("./fonts/materialdesignicons-webfont-4.9.95.woff2") format("woff2"),url("./fonts/materialdesignicons-webfont-4.9.95.woff") format("woff"),url("./fonts/materialdesignicons-webfont-4.9.95.ttf") format("truetype");font-weight:normal;font-style:normal}.mdi:before,.mdi-set{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.mdi-ab-testing::before{content:"\F001C"}.mdi-abjad-arabic::before{content:"\F0353"}.mdi-abjad-hebrew::before{content:"\F0354"}.mdi-abugida-devanagari::before{content:"\F0355"}.mdi-abugida-thai::before{content:"\F0356"}.mdi-access-point::before{content:"\F002"}.mdi-access-point-network::before{content:"\F003"}.mdi-access-point-network-off::before{content:"\FBBD"}.mdi-account::before{content:"\F004"}.mdi-account-alert::before{content:"\F005"}.mdi-account-alert-outline::before{content:"\FB2C"}.mdi-account-arrow-left::before{content:"\FB2D"}.mdi-account-arrow-left-outline::before{content:"\FB2E"}.mdi-account-arrow-right::before{content:"\FB2F"}.mdi-account-arrow-right-outline::before{content:"\FB30"}.mdi-account-badge::before{content:"\FD83"}.mdi-account-badge-alert::before{content:"\FD84"}.mdi-account-badge-alert-outline::before{content:"\FD85"}.mdi-account-badge-horizontal::before{content:"\FDF0"}.mdi-account-badge-horizontal-outline::before{content:"\FDF1"}.mdi-account-badge-outline::before{content:"\FD86"}.mdi-account-box::before{content:"\F006"}.mdi-account-box-multiple::before{content:"\F933"}.mdi-account-box-multiple-outline::before{content:"\F002C"}.mdi-account-box-outline::before{content:"\F007"}.mdi-account-cancel::before{content:"\F030A"}.mdi-account-cancel-outline::before{content:"\F030B"}.mdi-account-card-details::before{content:"\F5D2"}.mdi-account-card-details-outline::before{content:"\FD87"}.mdi-account-cash::before{content:"\F00C2"}.mdi-account-cash-outline::before{content:"\F00C3"}.mdi-account-check::before{content:"\F008"}.mdi-account-check-outline::before{content:"\FBBE"}.mdi-account-child::before{content:"\FA88"}.mdi-account-child-circle::before{content:"\FA89"}.mdi-account-child-outline::before{content:"\F00F3"}.mdi-account-circle::before{content:"\F009"}.mdi-account-circle-outline::before{content:"\FB31"}.mdi-account-clock::before{content:"\FB32"}.mdi-account-clock-outline::before{content:"\FB33"}.mdi-account-cog::before{content:"\F039B"}.mdi-account-cog-outline::before{content:"\F039C"}.mdi-account-convert::before{content:"\F00A"}.mdi-account-convert-outline::before{content:"\F032C"}.mdi-account-details::before{content:"\F631"}.mdi-account-details-outline::before{content:"\F039D"}.mdi-account-edit::before{content:"\F6BB"}.mdi-account-edit-outline::before{content:"\F001D"}.mdi-account-group::before{content:"\F848"}.mdi-account-group-outline::before{content:"\FB34"}.mdi-account-heart::before{content:"\F898"}.mdi-account-heart-outline::before{content:"\FBBF"}.mdi-account-key::before{content:"\F00B"}.mdi-account-key-outline::before{content:"\FBC0"}.mdi-account-lock::before{content:"\F0189"}.mdi-account-lock-outline::before{content:"\F018A"}.mdi-account-minus::before{content:"\F00D"}.mdi-account-minus-outline::before{content:"\FAEB"}.mdi-account-multiple::before{content:"\F00E"}.mdi-account-multiple-check::before{content:"\F8C4"}.mdi-account-multiple-check-outline::before{content:"\F0229"}.mdi-account-multiple-minus::before{content:"\F5D3"}.mdi-account-multiple-minus-outline::before{content:"\FBC1"}.mdi-account-multiple-outline::before{content:"\F00F"}.mdi-account-multiple-plus::before{content:"\F010"}.mdi-account-multiple-plus-outline::before{content:"\F7FF"}.mdi-account-multiple-remove::before{content:"\F0235"}.mdi-account-multiple-remove-outline::before{content:"\F0236"}.mdi-account-network::before{content:"\F011"}.mdi-account-network-outline::before{content:"\FBC2"}.mdi-account-off::before{content:"\F012"}.mdi-account-off-outline::before{content:"\FBC3"}.mdi-account-outline::before{content:"\F013"}.mdi-account-plus::before{content:"\F014"}.mdi-account-plus-outline::before{content:"\F800"}.mdi-account-question::before{content:"\FB35"}.mdi-account-question-outline::before{content:"\FB36"}.mdi-account-remove::before{content:"\F015"}.mdi-account-remove-outline::before{content:"\FAEC"}.mdi-account-search::before{content:"\F016"}.mdi-account-search-outline::before{content:"\F934"}.mdi-account-settings::before{content:"\F630"}.mdi-account-settings-outline::before{content:"\F00F4"}.mdi-account-star::before{content:"\F017"}.mdi-account-star-outline::before{content:"\FBC4"}.mdi-account-supervisor::before{content:"\FA8A"}.mdi-account-supervisor-circle::before{content:"\FA8B"}.mdi-account-supervisor-outline::before{content:"\F0158"}.mdi-account-switch::before{content:"\F019"}.mdi-account-tie::before{content:"\FCBF"}.mdi-account-tie-outline::before{content:"\F00F5"}.mdi-account-tie-voice::before{content:"\F0333"}.mdi-account-tie-voice-off::before{content:"\F0335"}.mdi-account-tie-voice-off-outline::before{content:"\F0336"}.mdi-account-tie-voice-outline::before{content:"\F0334"}.mdi-accusoft::before{content:"\F849"}.mdi-adjust::before{content:"\F01A"}.mdi-adobe::before{content:"\F935"}.mdi-adobe-acrobat::before{content:"\FFBD"}.mdi-air-conditioner::before{content:"\F01B"}.mdi-air-filter::before{content:"\FD1F"}.mdi-air-horn::before{content:"\FD88"}.mdi-air-humidifier::before{content:"\F00C4"}.mdi-air-purifier::before{content:"\FD20"}.mdi-airbag::before{content:"\FBC5"}.mdi-airballoon::before{content:"\F01C"}.mdi-airballoon-outline::before{content:"\F002D"}.mdi-airplane::before{content:"\F01D"}.mdi-airplane-landing::before{content:"\F5D4"}.mdi-airplane-off::before{content:"\F01E"}.mdi-airplane-takeoff::before{content:"\F5D5"}.mdi-airplay::before{content:"\F01F"}.mdi-airport::before{content:"\F84A"}.mdi-alarm::before{content:"\F020"}.mdi-alarm-bell::before{content:"\F78D"}.mdi-alarm-check::before{content:"\F021"}.mdi-alarm-light::before{content:"\F78E"}.mdi-alarm-light-outline::before{content:"\FBC6"}.mdi-alarm-multiple::before{content:"\F022"}.mdi-alarm-note::before{content:"\FE8E"}.mdi-alarm-note-off::before{content:"\FE8F"}.mdi-alarm-off::before{content:"\F023"}.mdi-alarm-plus::before{content:"\F024"}.mdi-alarm-snooze::before{content:"\F68D"}.mdi-album::before{content:"\F025"}.mdi-alert::before{content:"\F026"}.mdi-alert-box::before{content:"\F027"}.mdi-alert-box-outline::before{content:"\FCC0"}.mdi-alert-circle::before{content:"\F028"}.mdi-alert-circle-check::before{content:"\F0218"}.mdi-alert-circle-check-outline::before{content:"\F0219"}.mdi-alert-circle-outline::before{content:"\F5D6"}.mdi-alert-decagram::before{content:"\F6BC"}.mdi-alert-decagram-outline::before{content:"\FCC1"}.mdi-alert-octagon::before{content:"\F029"}.mdi-alert-octagon-outline::before{content:"\FCC2"}.mdi-alert-octagram::before{content:"\F766"}.mdi-alert-octagram-outline::before{content:"\FCC3"}.mdi-alert-outline::before{content:"\F02A"}.mdi-alert-rhombus::before{content:"\F01F9"}.mdi-alert-rhombus-outline::before{content:"\F01FA"}.mdi-alien::before{content:"\F899"}.mdi-alien-outline::before{content:"\F00F6"}.mdi-align-horizontal-center::before{content:"\F01EE"}.mdi-align-horizontal-left::before{content:"\F01ED"}.mdi-align-horizontal-right::before{content:"\F01EF"}.mdi-align-vertical-bottom::before{content:"\F01F0"}.mdi-align-vertical-center::before{content:"\F01F1"}.mdi-align-vertical-top::before{content:"\F01F2"}.mdi-all-inclusive::before{content:"\F6BD"}.mdi-allergy::before{content:"\F0283"}.mdi-alpha::before{content:"\F02B"}.mdi-alpha-a::before{content:"\41"}.mdi-alpha-a-box::before{content:"\FAED"}.mdi-alpha-a-box-outline::before{content:"\FBC7"}.mdi-alpha-a-circle::before{content:"\FBC8"}.mdi-alpha-a-circle-outline::before{content:"\FBC9"}.mdi-alpha-b::before{content:"\42"}.mdi-alpha-b-box::before{content:"\FAEE"}.mdi-alpha-b-box-outline::before{content:"\FBCA"}.mdi-alpha-b-circle::before{content:"\FBCB"}.mdi-alpha-b-circle-outline::before{content:"\FBCC"}.mdi-alpha-c::before{content:"\43"}.mdi-alpha-c-box::before{content:"\FAEF"}.mdi-alpha-c-box-outline::before{content:"\FBCD"}.mdi-alpha-c-circle::before{content:"\FBCE"}.mdi-alpha-c-circle-outline::before{content:"\FBCF"}.mdi-alpha-d::before{content:"\44"}.mdi-alpha-d-box::before{content:"\FAF0"}.mdi-alpha-d-box-outline::before{content:"\FBD0"}.mdi-alpha-d-circle::before{content:"\FBD1"}.mdi-alpha-d-circle-outline::before{content:"\FBD2"}.mdi-alpha-e::before{content:"\45"}.mdi-alpha-e-box::before{content:"\FAF1"}.mdi-alpha-e-box-outline::before{content:"\FBD3"}.mdi-alpha-e-circle::before{content:"\FBD4"}.mdi-alpha-e-circle-outline::before{content:"\FBD5"}.mdi-alpha-f::before{content:"\46"}.mdi-alpha-f-box::before{content:"\FAF2"}.mdi-alpha-f-box-outline::before{content:"\FBD6"}.mdi-alpha-f-circle::before{content:"\FBD7"}.mdi-alpha-f-circle-outline::before{content:"\FBD8"}.mdi-alpha-g::before{content:"\47"}.mdi-alpha-g-box::before{content:"\FAF3"}.mdi-alpha-g-box-outline::before{content:"\FBD9"}.mdi-alpha-g-circle::before{content:"\FBDA"}.mdi-alpha-g-circle-outline::before{content:"\FBDB"}.mdi-alpha-h::before{content:"\48"}.mdi-alpha-h-box::before{content:"\FAF4"}.mdi-alpha-h-box-outline::before{content:"\FBDC"}.mdi-alpha-h-circle::before{content:"\FBDD"}.mdi-alpha-h-circle-outline::before{content:"\FBDE"}.mdi-alpha-i::before{content:"\49"}.mdi-alpha-i-box::before{content:"\FAF5"}.mdi-alpha-i-box-outline::before{content:"\FBDF"}.mdi-alpha-i-circle::before{content:"\FBE0"}.mdi-alpha-i-circle-outline::before{content:"\FBE1"}.mdi-alpha-j::before{content:"\4A"}.mdi-alpha-j-box::before{content:"\FAF6"}.mdi-alpha-j-box-outline::before{content:"\FBE2"}.mdi-alpha-j-circle::before{content:"\FBE3"}.mdi-alpha-j-circle-outline::before{content:"\FBE4"}.mdi-alpha-k::before{content:"\4B"}.mdi-alpha-k-box::before{content:"\FAF7"}.mdi-alpha-k-box-outline::before{content:"\FBE5"}.mdi-alpha-k-circle::before{content:"\FBE6"}.mdi-alpha-k-circle-outline::before{content:"\FBE7"}.mdi-alpha-l::before{content:"\4C"}.mdi-alpha-l-box::before{content:"\FAF8"}.mdi-alpha-l-box-outline::before{content:"\FBE8"}.mdi-alpha-l-circle::before{content:"\FBE9"}.mdi-alpha-l-circle-outline::before{content:"\FBEA"}.mdi-alpha-m::before{content:"\4D"}.mdi-alpha-m-box::before{content:"\FAF9"}.mdi-alpha-m-box-outline::before{content:"\FBEB"}.mdi-alpha-m-circle::before{content:"\FBEC"}.mdi-alpha-m-circle-outline::before{content:"\FBED"}.mdi-alpha-n::before{content:"\4E"}.mdi-alpha-n-box::before{content:"\FAFA"}.mdi-alpha-n-box-outline::before{content:"\FBEE"}.mdi-alpha-n-circle::before{content:"\FBEF"}.mdi-alpha-n-circle-outline::before{content:"\FBF0"}.mdi-alpha-o::before{content:"\4F"}.mdi-alpha-o-box::before{content:"\FAFB"}.mdi-alpha-o-box-outline::before{content:"\FBF1"}.mdi-alpha-o-circle::before{content:"\FBF2"}.mdi-alpha-o-circle-outline::before{content:"\FBF3"}.mdi-alpha-p::before{content:"\50"}.mdi-alpha-p-box::before{content:"\FAFC"}.mdi-alpha-p-box-outline::before{content:"\FBF4"}.mdi-alpha-p-circle::before{content:"\FBF5"}.mdi-alpha-p-circle-outline::before{content:"\FBF6"}.mdi-alpha-q::before{content:"\51"}.mdi-alpha-q-box::before{content:"\FAFD"}.mdi-alpha-q-box-outline::before{content:"\FBF7"}.mdi-alpha-q-circle::before{content:"\FBF8"}.mdi-alpha-q-circle-outline::before{content:"\FBF9"}.mdi-alpha-r::before{content:"\52"}.mdi-alpha-r-box::before{content:"\FAFE"}.mdi-alpha-r-box-outline::before{content:"\FBFA"}.mdi-alpha-r-circle::before{content:"\FBFB"}.mdi-alpha-r-circle-outline::before{content:"\FBFC"}.mdi-alpha-s::before{content:"\53"}.mdi-alpha-s-box::before{content:"\FAFF"}.mdi-alpha-s-box-outline::before{content:"\FBFD"}.mdi-alpha-s-circle::before{content:"\FBFE"}.mdi-alpha-s-circle-outline::before{content:"\FBFF"}.mdi-alpha-t::before{content:"\54"}.mdi-alpha-t-box::before{content:"\FB00"}.mdi-alpha-t-box-outline::before{content:"\FC00"}.mdi-alpha-t-circle::before{content:"\FC01"}.mdi-alpha-t-circle-outline::before{content:"\FC02"}.mdi-alpha-u::before{content:"\55"}.mdi-alpha-u-box::before{content:"\FB01"}.mdi-alpha-u-box-outline::before{content:"\FC03"}.mdi-alpha-u-circle::before{content:"\FC04"}.mdi-alpha-u-circle-outline::before{content:"\FC05"}.mdi-alpha-v::before{content:"\56"}.mdi-alpha-v-box::before{content:"\FB02"}.mdi-alpha-v-box-outline::before{content:"\FC06"}.mdi-alpha-v-circle::before{content:"\FC07"}.mdi-alpha-v-circle-outline::before{content:"\FC08"}.mdi-alpha-w::before{content:"\57"}.mdi-alpha-w-box::before{content:"\FB03"}.mdi-alpha-w-box-outline::before{content:"\FC09"}.mdi-alpha-w-circle::before{content:"\FC0A"}.mdi-alpha-w-circle-outline::before{content:"\FC0B"}.mdi-alpha-x::before{content:"\58"}.mdi-alpha-x-box::before{content:"\FB04"}.mdi-alpha-x-box-outline::before{content:"\FC0C"}.mdi-alpha-x-circle::before{content:"\FC0D"}.mdi-alpha-x-circle-outline::before{content:"\FC0E"}.mdi-alpha-y::before{content:"\59"}.mdi-alpha-y-box::before{content:"\FB05"}.mdi-alpha-y-box-outline::before{content:"\FC0F"}.mdi-alpha-y-circle::before{content:"\FC10"}.mdi-alpha-y-circle-outline::before{content:"\FC11"}.mdi-alpha-z::before{content:"\5A"}.mdi-alpha-z-box::before{content:"\FB06"}.mdi-alpha-z-box-outline::before{content:"\FC12"}.mdi-alpha-z-circle::before{content:"\FC13"}.mdi-alpha-z-circle-outline::before{content:"\FC14"}.mdi-alphabet-aurebesh::before{content:"\F0357"}.mdi-alphabet-cyrillic::before{content:"\F0358"}.mdi-alphabet-greek::before{content:"\F0359"}.mdi-alphabet-latin::before{content:"\F035A"}.mdi-alphabet-piqad::before{content:"\F035B"}.mdi-alphabet-tengwar::before{content:"\F0362"}.mdi-alphabetical::before{content:"\F02C"}.mdi-alphabetical-off::before{content:"\F002E"}.mdi-alphabetical-variant::before{content:"\F002F"}.mdi-alphabetical-variant-off::before{content:"\F0030"}.mdi-altimeter::before{content:"\F5D7"}.mdi-amazon::before{content:"\F02D"}.mdi-amazon-alexa::before{content:"\F8C5"}.mdi-amazon-drive::before{content:"\F02E"}.mdi-ambulance::before{content:"\F02F"}.mdi-ammunition::before{content:"\FCC4"}.mdi-ampersand::before{content:"\FA8C"}.mdi-amplifier::before{content:"\F030"}.mdi-amplifier-off::before{content:"\F01E0"}.mdi-anchor::before{content:"\F031"}.mdi-android::before{content:"\F032"}.mdi-android-auto::before{content:"\FA8D"}.mdi-android-debug-bridge::before{content:"\F033"}.mdi-android-head::before{content:"\F78F"}.mdi-android-messages::before{content:"\FD21"}.mdi-android-studio::before{content:"\F034"}.mdi-angle-acute::before{content:"\F936"}.mdi-angle-obtuse::before{content:"\F937"}.mdi-angle-right::before{content:"\F938"}.mdi-angular::before{content:"\F6B1"}.mdi-angularjs::before{content:"\F6BE"}.mdi-animation::before{content:"\F5D8"}.mdi-animation-outline::before{content:"\FA8E"}.mdi-animation-play::before{content:"\F939"}.mdi-animation-play-outline::before{content:"\FA8F"}.mdi-ansible::before{content:"\F00C5"}.mdi-antenna::before{content:"\F0144"}.mdi-anvil::before{content:"\F89A"}.mdi-apache-kafka::before{content:"\F0031"}.mdi-api::before{content:"\F00C6"}.mdi-api-off::before{content:"\F0282"}.mdi-apple::before{content:"\F035"}.mdi-apple-finder::before{content:"\F036"}.mdi-apple-icloud::before{content:"\F038"}.mdi-apple-ios::before{content:"\F037"}.mdi-apple-keyboard-caps::before{content:"\F632"}.mdi-apple-keyboard-command::before{content:"\F633"}.mdi-apple-keyboard-control::before{content:"\F634"}.mdi-apple-keyboard-option::before{content:"\F635"}.mdi-apple-keyboard-shift::before{content:"\F636"}.mdi-apple-safari::before{content:"\F039"}.mdi-application::before{content:"\F614"}.mdi-application-export::before{content:"\FD89"}.mdi-application-import::before{content:"\FD8A"}.mdi-approximately-equal::before{content:"\FFBE"}.mdi-approximately-equal-box::before{content:"\FFBF"}.mdi-apps::before{content:"\F03B"}.mdi-apps-box::before{content:"\FD22"}.mdi-arch::before{content:"\F8C6"}.mdi-archive::before{content:"\F03C"}.mdi-archive-arrow-down::before{content:"\F0284"}.mdi-archive-arrow-down-outline::before{content:"\F0285"}.mdi-archive-arrow-up::before{content:"\F0286"}.mdi-archive-arrow-up-outline::before{content:"\F0287"}.mdi-archive-outline::before{content:"\F0239"}.mdi-arm-flex::before{content:"\F008F"}.mdi-arm-flex-outline::before{content:"\F0090"}.mdi-arrange-bring-forward::before{content:"\F03D"}.mdi-arrange-bring-to-front::before{content:"\F03E"}.mdi-arrange-send-backward::before{content:"\F03F"}.mdi-arrange-send-to-back::before{content:"\F040"}.mdi-arrow-all::before{content:"\F041"}.mdi-arrow-bottom-left::before{content:"\F042"}.mdi-arrow-bottom-left-bold-outline::before{content:"\F9B6"}.mdi-arrow-bottom-left-thick::before{content:"\F9B7"}.mdi-arrow-bottom-right::before{content:"\F043"}.mdi-arrow-bottom-right-bold-outline::before{content:"\F9B8"}.mdi-arrow-bottom-right-thick::before{content:"\F9B9"}.mdi-arrow-collapse::before{content:"\F615"}.mdi-arrow-collapse-all::before{content:"\F044"}.mdi-arrow-collapse-down::before{content:"\F791"}.mdi-arrow-collapse-horizontal::before{content:"\F84B"}.mdi-arrow-collapse-left::before{content:"\F792"}.mdi-arrow-collapse-right::before{content:"\F793"}.mdi-arrow-collapse-up::before{content:"\F794"}.mdi-arrow-collapse-vertical::before{content:"\F84C"}.mdi-arrow-decision::before{content:"\F9BA"}.mdi-arrow-decision-auto::before{content:"\F9BB"}.mdi-arrow-decision-auto-outline::before{content:"\F9BC"}.mdi-arrow-decision-outline::before{content:"\F9BD"}.mdi-arrow-down::before{content:"\F045"}.mdi-arrow-down-bold::before{content:"\F72D"}.mdi-arrow-down-bold-box::before{content:"\F72E"}.mdi-arrow-down-bold-box-outline::before{content:"\F72F"}.mdi-arrow-down-bold-circle::before{content:"\F047"}.mdi-arrow-down-bold-circle-outline::before{content:"\F048"}.mdi-arrow-down-bold-hexagon-outline::before{content:"\F049"}.mdi-arrow-down-bold-outline::before{content:"\F9BE"}.mdi-arrow-down-box::before{content:"\F6BF"}.mdi-arrow-down-circle::before{content:"\FCB7"}.mdi-arrow-down-circle-outline::before{content:"\FCB8"}.mdi-arrow-down-drop-circle::before{content:"\F04A"}.mdi-arrow-down-drop-circle-outline::before{content:"\F04B"}.mdi-arrow-down-thick::before{content:"\F046"}.mdi-arrow-expand::before{content:"\F616"}.mdi-arrow-expand-all::before{content:"\F04C"}.mdi-arrow-expand-down::before{content:"\F795"}.mdi-arrow-expand-horizontal::before{content:"\F84D"}.mdi-arrow-expand-left::before{content:"\F796"}.mdi-arrow-expand-right::before{content:"\F797"}.mdi-arrow-expand-up::before{content:"\F798"}.mdi-arrow-expand-vertical::before{content:"\F84E"}.mdi-arrow-horizontal-lock::before{content:"\F0186"}.mdi-arrow-left::before{content:"\F04D"}.mdi-arrow-left-bold::before{content:"\F730"}.mdi-arrow-left-bold-box::before{content:"\F731"}.mdi-arrow-left-bold-box-outline::before{content:"\F732"}.mdi-arrow-left-bold-circle::before{content:"\F04F"}.mdi-arrow-left-bold-circle-outline::before{content:"\F050"}.mdi-arrow-left-bold-hexagon-outline::before{content:"\F051"}.mdi-arrow-left-bold-outline::before{content:"\F9BF"}.mdi-arrow-left-box::before{content:"\F6C0"}.mdi-arrow-left-circle::before{content:"\FCB9"}.mdi-arrow-left-circle-outline::before{content:"\FCBA"}.mdi-arrow-left-drop-circle::before{content:"\F052"}.mdi-arrow-left-drop-circle-outline::before{content:"\F053"}.mdi-arrow-left-right::before{content:"\FE90"}.mdi-arrow-left-right-bold::before{content:"\FE91"}.mdi-arrow-left-right-bold-outline::before{content:"\F9C0"}.mdi-arrow-left-thick::before{content:"\F04E"}.mdi-arrow-right::before{content:"\F054"}.mdi-arrow-right-bold::before{content:"\F733"}.mdi-arrow-right-bold-box::before{content:"\F734"}.mdi-arrow-right-bold-box-outline::before{content:"\F735"}.mdi-arrow-right-bold-circle::before{content:"\F056"}.mdi-arrow-right-bold-circle-outline::before{content:"\F057"}.mdi-arrow-right-bold-hexagon-outline::before{content:"\F058"}.mdi-arrow-right-bold-outline::before{content:"\F9C1"}.mdi-arrow-right-box::before{content:"\F6C1"}.mdi-arrow-right-circle::before{content:"\FCBB"}.mdi-arrow-right-circle-outline::before{content:"\FCBC"}.mdi-arrow-right-drop-circle::before{content:"\F059"}.mdi-arrow-right-drop-circle-outline::before{content:"\F05A"}.mdi-arrow-right-thick::before{content:"\F055"}.mdi-arrow-split-horizontal::before{content:"\F93A"}.mdi-arrow-split-vertical::before{content:"\F93B"}.mdi-arrow-top-left::before{content:"\F05B"}.mdi-arrow-top-left-bold-outline::before{content:"\F9C2"}.mdi-arrow-top-left-bottom-right::before{content:"\FE92"}.mdi-arrow-top-left-bottom-right-bold::before{content:"\FE93"}.mdi-arrow-top-left-thick::before{content:"\F9C3"}.mdi-arrow-top-right::before{content:"\F05C"}.mdi-arrow-top-right-bold-outline::before{content:"\F9C4"}.mdi-arrow-top-right-bottom-left::before{content:"\FE94"}.mdi-arrow-top-right-bottom-left-bold::before{content:"\FE95"}.mdi-arrow-top-right-thick::before{content:"\F9C5"}.mdi-arrow-up::before{content:"\F05D"}.mdi-arrow-up-bold::before{content:"\F736"}.mdi-arrow-up-bold-box::before{content:"\F737"}.mdi-arrow-up-bold-box-outline::before{content:"\F738"}.mdi-arrow-up-bold-circle::before{content:"\F05F"}.mdi-arrow-up-bold-circle-outline::before{content:"\F060"}.mdi-arrow-up-bold-hexagon-outline::before{content:"\F061"}.mdi-arrow-up-bold-outline::before{content:"\F9C6"}.mdi-arrow-up-box::before{content:"\F6C2"}.mdi-arrow-up-circle::before{content:"\FCBD"}.mdi-arrow-up-circle-outline::before{content:"\FCBE"}.mdi-arrow-up-down::before{content:"\FE96"}.mdi-arrow-up-down-bold::before{content:"\FE97"}.mdi-arrow-up-down-bold-outline::before{content:"\F9C7"}.mdi-arrow-up-drop-circle::before{content:"\F062"}.mdi-arrow-up-drop-circle-outline::before{content:"\F063"}.mdi-arrow-up-thick::before{content:"\F05E"}.mdi-arrow-vertical-lock::before{content:"\F0187"}.mdi-artist::before{content:"\F802"}.mdi-artist-outline::before{content:"\FCC5"}.mdi-artstation::before{content:"\FB37"}.mdi-aspect-ratio::before{content:"\FA23"}.mdi-assistant::before{content:"\F064"}.mdi-asterisk::before{content:"\F6C3"}.mdi-at::before{content:"\F065"}.mdi-atlassian::before{content:"\F803"}.mdi-atm::before{content:"\FD23"}.mdi-atom::before{content:"\F767"}.mdi-atom-variant::before{content:"\FE98"}.mdi-attachment::before{content:"\F066"}.mdi-audio-video::before{content:"\F93C"}.mdi-audio-video-off::before{content:"\F01E1"}.mdi-audiobook::before{content:"\F067"}.mdi-augmented-reality::before{content:"\F84F"}.mdi-auto-download::before{content:"\F03A9"}.mdi-auto-fix::before{content:"\F068"}.mdi-auto-upload::before{content:"\F069"}.mdi-autorenew::before{content:"\F06A"}.mdi-av-timer::before{content:"\F06B"}.mdi-aws::before{content:"\FDF2"}.mdi-axe::before{content:"\F8C7"}.mdi-axis::before{content:"\FD24"}.mdi-axis-arrow::before{content:"\FD25"}.mdi-axis-arrow-lock::before{content:"\FD26"}.mdi-axis-lock::before{content:"\FD27"}.mdi-axis-x-arrow::before{content:"\FD28"}.mdi-axis-x-arrow-lock::before{content:"\FD29"}.mdi-axis-x-rotate-clockwise::before{content:"\FD2A"}.mdi-axis-x-rotate-counterclockwise::before{content:"\FD2B"}.mdi-axis-x-y-arrow-lock::before{content:"\FD2C"}.mdi-axis-y-arrow::before{content:"\FD2D"}.mdi-axis-y-arrow-lock::before{content:"\FD2E"}.mdi-axis-y-rotate-clockwise::before{content:"\FD2F"}.mdi-axis-y-rotate-counterclockwise::before{content:"\FD30"}.mdi-axis-z-arrow::before{content:"\FD31"}.mdi-axis-z-arrow-lock::before{content:"\FD32"}.mdi-axis-z-rotate-clockwise::before{content:"\FD33"}.mdi-axis-z-rotate-counterclockwise::before{content:"\FD34"}.mdi-azure::before{content:"\F804"}.mdi-azure-devops::before{content:"\F0091"}.mdi-babel::before{content:"\FA24"}.mdi-baby::before{content:"\F06C"}.mdi-baby-bottle::before{content:"\FF56"}.mdi-baby-bottle-outline::before{content:"\FF57"}.mdi-baby-carriage::before{content:"\F68E"}.mdi-baby-carriage-off::before{content:"\FFC0"}.mdi-baby-face::before{content:"\FE99"}.mdi-baby-face-outline::before{content:"\FE9A"}.mdi-backburger::before{content:"\F06D"}.mdi-backspace::before{content:"\F06E"}.mdi-backspace-outline::before{content:"\FB38"}.mdi-backspace-reverse::before{content:"\FE9B"}.mdi-backspace-reverse-outline::before{content:"\FE9C"}.mdi-backup-restore::before{content:"\F06F"}.mdi-bacteria::before{content:"\FEF2"}.mdi-bacteria-outline::before{content:"\FEF3"}.mdi-badminton::before{content:"\F850"}.mdi-bag-carry-on::before{content:"\FF58"}.mdi-bag-carry-on-check::before{content:"\FD41"}.mdi-bag-carry-on-off::before{content:"\FF59"}.mdi-bag-checked::before{content:"\FF5A"}.mdi-bag-personal::before{content:"\FDF3"}.mdi-bag-personal-off::before{content:"\FDF4"}.mdi-bag-personal-off-outline::before{content:"\FDF5"}.mdi-bag-personal-outline::before{content:"\FDF6"}.mdi-baguette::before{content:"\FF5B"}.mdi-balloon::before{content:"\FA25"}.mdi-ballot::before{content:"\F9C8"}.mdi-ballot-outline::before{content:"\F9C9"}.mdi-ballot-recount::before{content:"\FC15"}.mdi-ballot-recount-outline::before{content:"\FC16"}.mdi-bandage::before{content:"\FD8B"}.mdi-bandcamp::before{content:"\F674"}.mdi-bank::before{content:"\F070"}.mdi-bank-minus::before{content:"\FD8C"}.mdi-bank-outline::before{content:"\FE9D"}.mdi-bank-plus::before{content:"\FD8D"}.mdi-bank-remove::before{content:"\FD8E"}.mdi-bank-transfer::before{content:"\FA26"}.mdi-bank-transfer-in::before{content:"\FA27"}.mdi-bank-transfer-out::before{content:"\FA28"}.mdi-barcode::before{content:"\F071"}.mdi-barcode-off::before{content:"\F0261"}.mdi-barcode-scan::before{content:"\F072"}.mdi-barley::before{content:"\F073"}.mdi-barley-off::before{content:"\FB39"}.mdi-barn::before{content:"\FB3A"}.mdi-barrel::before{content:"\F074"}.mdi-baseball::before{content:"\F851"}.mdi-baseball-bat::before{content:"\F852"}.mdi-basecamp::before{content:"\F075"}.mdi-bash::before{content:"\F01AE"}.mdi-basket::before{content:"\F076"}.mdi-basket-fill::before{content:"\F077"}.mdi-basket-outline::before{content:"\F01AC"}.mdi-basket-unfill::before{content:"\F078"}.mdi-basketball::before{content:"\F805"}.mdi-basketball-hoop::before{content:"\FC17"}.mdi-basketball-hoop-outline::before{content:"\FC18"}.mdi-bat::before{content:"\FB3B"}.mdi-battery::before{content:"\F079"}.mdi-battery-10::before{content:"\F07A"}.mdi-battery-10-bluetooth::before{content:"\F93D"}.mdi-battery-20::before{content:"\F07B"}.mdi-battery-20-bluetooth::before{content:"\F93E"}.mdi-battery-30::before{content:"\F07C"}.mdi-battery-30-bluetooth::before{content:"\F93F"}.mdi-battery-40::before{content:"\F07D"}.mdi-battery-40-bluetooth::before{content:"\F940"}.mdi-battery-50::before{content:"\F07E"}.mdi-battery-50-bluetooth::before{content:"\F941"}.mdi-battery-60::before{content:"\F07F"}.mdi-battery-60-bluetooth::before{content:"\F942"}.mdi-battery-70::before{content:"\F080"}.mdi-battery-70-bluetooth::before{content:"\F943"}.mdi-battery-80::before{content:"\F081"}.mdi-battery-80-bluetooth::before{content:"\F944"}.mdi-battery-90::before{content:"\F082"}.mdi-battery-90-bluetooth::before{content:"\F945"}.mdi-battery-alert::before{content:"\F083"}.mdi-battery-alert-bluetooth::before{content:"\F946"}.mdi-battery-alert-variant::before{content:"\F00F7"}.mdi-battery-alert-variant-outline::before{content:"\F00F8"}.mdi-battery-bluetooth::before{content:"\F947"}.mdi-battery-bluetooth-variant::before{content:"\F948"}.mdi-battery-charging::before{content:"\F084"}.mdi-battery-charging-10::before{content:"\F89B"}.mdi-battery-charging-100::before{content:"\F085"}.mdi-battery-charging-20::before{content:"\F086"}.mdi-battery-charging-30::before{content:"\F087"}.mdi-battery-charging-40::before{content:"\F088"}.mdi-battery-charging-50::before{content:"\F89C"}.mdi-battery-charging-60::before{content:"\F089"}.mdi-battery-charging-70::before{content:"\F89D"}.mdi-battery-charging-80::before{content:"\F08A"}.mdi-battery-charging-90::before{content:"\F08B"}.mdi-battery-charging-high::before{content:"\F02D1"}.mdi-battery-charging-low::before{content:"\F02CF"}.mdi-battery-charging-medium::before{content:"\F02D0"}.mdi-battery-charging-outline::before{content:"\F89E"}.mdi-battery-charging-wireless::before{content:"\F806"}.mdi-battery-charging-wireless-10::before{content:"\F807"}.mdi-battery-charging-wireless-20::before{content:"\F808"}.mdi-battery-charging-wireless-30::before{content:"\F809"}.mdi-battery-charging-wireless-40::before{content:"\F80A"}.mdi-battery-charging-wireless-50::before{content:"\F80B"}.mdi-battery-charging-wireless-60::before{content:"\F80C"}.mdi-battery-charging-wireless-70::before{content:"\F80D"}.mdi-battery-charging-wireless-80::before{content:"\F80E"}.mdi-battery-charging-wireless-90::before{content:"\F80F"}.mdi-battery-charging-wireless-alert::before{content:"\F810"}.mdi-battery-charging-wireless-outline::before{content:"\F811"}.mdi-battery-heart::before{content:"\F023A"}.mdi-battery-heart-outline::before{content:"\F023B"}.mdi-battery-heart-variant::before{content:"\F023C"}.mdi-battery-high::before{content:"\F02CE"}.mdi-battery-low::before{content:"\F02CC"}.mdi-battery-medium::before{content:"\F02CD"}.mdi-battery-minus::before{content:"\F08C"}.mdi-battery-negative::before{content:"\F08D"}.mdi-battery-off::before{content:"\F0288"}.mdi-battery-off-outline::before{content:"\F0289"}.mdi-battery-outline::before{content:"\F08E"}.mdi-battery-plus::before{content:"\F08F"}.mdi-battery-positive::before{content:"\F090"}.mdi-battery-unknown::before{content:"\F091"}.mdi-battery-unknown-bluetooth::before{content:"\F949"}.mdi-battlenet::before{content:"\FB3C"}.mdi-beach::before{content:"\F092"}.mdi-beaker::before{content:"\FCC6"}.mdi-beaker-alert::before{content:"\F0254"}.mdi-beaker-alert-outline::before{content:"\F0255"}.mdi-beaker-check::before{content:"\F0256"}.mdi-beaker-check-outline::before{content:"\F0257"}.mdi-beaker-minus::before{content:"\F0258"}.mdi-beaker-minus-outline::before{content:"\F0259"}.mdi-beaker-outline::before{content:"\F68F"}.mdi-beaker-plus::before{content:"\F025A"}.mdi-beaker-plus-outline::before{content:"\F025B"}.mdi-beaker-question::before{content:"\F025C"}.mdi-beaker-question-outline::before{content:"\F025D"}.mdi-beaker-remove::before{content:"\F025E"}.mdi-beaker-remove-outline::before{content:"\F025F"}.mdi-beats::before{content:"\F097"}.mdi-bed-double::before{content:"\F0092"}.mdi-bed-double-outline::before{content:"\F0093"}.mdi-bed-empty::before{content:"\F89F"}.mdi-bed-king::before{content:"\F0094"}.mdi-bed-king-outline::before{content:"\F0095"}.mdi-bed-queen::before{content:"\F0096"}.mdi-bed-queen-outline::before{content:"\F0097"}.mdi-bed-single::before{content:"\F0098"}.mdi-bed-single-outline::before{content:"\F0099"}.mdi-bee::before{content:"\FFC1"}.mdi-bee-flower::before{content:"\FFC2"}.mdi-beehive-outline::before{content:"\F00F9"}.mdi-beer::before{content:"\F098"}.mdi-beer-outline::before{content:"\F0337"}.mdi-behance::before{content:"\F099"}.mdi-bell::before{content:"\F09A"}.mdi-bell-alert::before{content:"\FD35"}.mdi-bell-alert-outline::before{content:"\FE9E"}.mdi-bell-check::before{content:"\F0210"}.mdi-bell-check-outline::before{content:"\F0211"}.mdi-bell-circle::before{content:"\FD36"}.mdi-bell-circle-outline::before{content:"\FD37"}.mdi-bell-off::before{content:"\F09B"}.mdi-bell-off-outline::before{content:"\FA90"}.mdi-bell-outline::before{content:"\F09C"}.mdi-bell-plus::before{content:"\F09D"}.mdi-bell-plus-outline::before{content:"\FA91"}.mdi-bell-ring::before{content:"\F09E"}.mdi-bell-ring-outline::before{content:"\F09F"}.mdi-bell-sleep::before{content:"\F0A0"}.mdi-bell-sleep-outline::before{content:"\FA92"}.mdi-beta::before{content:"\F0A1"}.mdi-betamax::before{content:"\F9CA"}.mdi-biathlon::before{content:"\FDF7"}.mdi-bible::before{content:"\F0A2"}.mdi-bicycle::before{content:"\F00C7"}.mdi-bicycle-basket::before{content:"\F0260"}.mdi-bike::before{content:"\F0A3"}.mdi-bike-fast::before{content:"\F014A"}.mdi-billboard::before{content:"\F0032"}.mdi-billiards::before{content:"\FB3D"}.mdi-billiards-rack::before{content:"\FB3E"}.mdi-bing::before{content:"\F0A4"}.mdi-binoculars::before{content:"\F0A5"}.mdi-bio::before{content:"\F0A6"}.mdi-biohazard::before{content:"\F0A7"}.mdi-bitbucket::before{content:"\F0A8"}.mdi-bitcoin::before{content:"\F812"}.mdi-black-mesa::before{content:"\F0A9"}.mdi-blackberry::before{content:"\F0AA"}.mdi-blender::before{content:"\FCC7"}.mdi-blender-software::before{content:"\F0AB"}.mdi-blinds::before{content:"\F0AC"}.mdi-blinds-open::before{content:"\F0033"}.mdi-block-helper::before{content:"\F0AD"}.mdi-blogger::before{content:"\F0AE"}.mdi-blood-bag::before{content:"\FCC8"}.mdi-bluetooth::before{content:"\F0AF"}.mdi-bluetooth-audio::before{content:"\F0B0"}.mdi-bluetooth-connect::before{content:"\F0B1"}.mdi-bluetooth-off::before{content:"\F0B2"}.mdi-bluetooth-settings::before{content:"\F0B3"}.mdi-bluetooth-transfer::before{content:"\F0B4"}.mdi-blur::before{content:"\F0B5"}.mdi-blur-linear::before{content:"\F0B6"}.mdi-blur-off::before{content:"\F0B7"}.mdi-blur-radial::before{content:"\F0B8"}.mdi-bolnisi-cross::before{content:"\FCC9"}.mdi-bolt::before{content:"\FD8F"}.mdi-bomb::before{content:"\F690"}.mdi-bomb-off::before{content:"\F6C4"}.mdi-bone::before{content:"\F0B9"}.mdi-book::before{content:"\F0BA"}.mdi-book-information-variant::before{content:"\F009A"}.mdi-book-lock::before{content:"\F799"}.mdi-book-lock-open::before{content:"\F79A"}.mdi-book-minus::before{content:"\F5D9"}.mdi-book-minus-multiple::before{content:"\FA93"}.mdi-book-multiple::before{content:"\F0BB"}.mdi-book-open::before{content:"\F0BD"}.mdi-book-open-outline::before{content:"\FB3F"}.mdi-book-open-page-variant::before{content:"\F5DA"}.mdi-book-open-variant::before{content:"\F0BE"}.mdi-book-outline::before{content:"\FB40"}.mdi-book-play::before{content:"\FE9F"}.mdi-book-play-outline::before{content:"\FEA0"}.mdi-book-plus::before{content:"\F5DB"}.mdi-book-plus-multiple::before{content:"\FA94"}.mdi-book-remove::before{content:"\FA96"}.mdi-book-remove-multiple::before{content:"\FA95"}.mdi-book-search::before{content:"\FEA1"}.mdi-book-search-outline::before{content:"\FEA2"}.mdi-book-variant::before{content:"\F0BF"}.mdi-book-variant-multiple::before{content:"\F0BC"}.mdi-bookmark::before{content:"\F0C0"}.mdi-bookmark-check::before{content:"\F0C1"}.mdi-bookmark-check-outline::before{content:"\F03A6"}.mdi-bookmark-minus::before{content:"\F9CB"}.mdi-bookmark-minus-outline::before{content:"\F9CC"}.mdi-bookmark-multiple::before{content:"\FDF8"}.mdi-bookmark-multiple-outline::before{content:"\FDF9"}.mdi-bookmark-music::before{content:"\F0C2"}.mdi-bookmark-music-outline::before{content:"\F03A4"}.mdi-bookmark-off::before{content:"\F9CD"}.mdi-bookmark-off-outline::before{content:"\F9CE"}.mdi-bookmark-outline::before{content:"\F0C3"}.mdi-bookmark-plus::before{content:"\F0C5"}.mdi-bookmark-plus-outline::before{content:"\F0C4"}.mdi-bookmark-remove::before{content:"\F0C6"}.mdi-bookmark-remove-outline::before{content:"\F03A5"}.mdi-bookshelf::before{content:"\F028A"}.mdi-boom-gate::before{content:"\FEA3"}.mdi-boom-gate-alert::before{content:"\FEA4"}.mdi-boom-gate-alert-outline::before{content:"\FEA5"}.mdi-boom-gate-down::before{content:"\FEA6"}.mdi-boom-gate-down-outline::before{content:"\FEA7"}.mdi-boom-gate-outline::before{content:"\FEA8"}.mdi-boom-gate-up::before{content:"\FEA9"}.mdi-boom-gate-up-outline::before{content:"\FEAA"}.mdi-boombox::before{content:"\F5DC"}.mdi-boomerang::before{content:"\F00FA"}.mdi-bootstrap::before{content:"\F6C5"}.mdi-border-all::before{content:"\F0C7"}.mdi-border-all-variant::before{content:"\F8A0"}.mdi-border-bottom::before{content:"\F0C8"}.mdi-border-bottom-variant::before{content:"\F8A1"}.mdi-border-color::before{content:"\F0C9"}.mdi-border-horizontal::before{content:"\F0CA"}.mdi-border-inside::before{content:"\F0CB"}.mdi-border-left::before{content:"\F0CC"}.mdi-border-left-variant::before{content:"\F8A2"}.mdi-border-none::before{content:"\F0CD"}.mdi-border-none-variant::before{content:"\F8A3"}.mdi-border-outside::before{content:"\F0CE"}.mdi-border-right::before{content:"\F0CF"}.mdi-border-right-variant::before{content:"\F8A4"}.mdi-border-style::before{content:"\F0D0"}.mdi-border-top::before{content:"\F0D1"}.mdi-border-top-variant::before{content:"\F8A5"}.mdi-border-vertical::before{content:"\F0D2"}.mdi-bottle-soda::before{content:"\F009B"}.mdi-bottle-soda-classic::before{content:"\F009C"}.mdi-bottle-soda-classic-outline::before{content:"\F038E"}.mdi-bottle-soda-outline::before{content:"\F009D"}.mdi-bottle-tonic::before{content:"\F0159"}.mdi-bottle-tonic-outline::before{content:"\F015A"}.mdi-bottle-tonic-plus::before{content:"\F015B"}.mdi-bottle-tonic-plus-outline::before{content:"\F015C"}.mdi-bottle-tonic-skull::before{content:"\F015D"}.mdi-bottle-tonic-skull-outline::before{content:"\F015E"}.mdi-bottle-wine::before{content:"\F853"}.mdi-bottle-wine-outline::before{content:"\F033B"}.mdi-bow-tie::before{content:"\F677"}.mdi-bowl::before{content:"\F617"}.mdi-bowling::before{content:"\F0D3"}.mdi-box::before{content:"\F0D4"}.mdi-box-cutter::before{content:"\F0D5"}.mdi-box-shadow::before{content:"\F637"}.mdi-boxing-glove::before{content:"\FB41"}.mdi-braille::before{content:"\F9CF"}.mdi-brain::before{content:"\F9D0"}.mdi-bread-slice::before{content:"\FCCA"}.mdi-bread-slice-outline::before{content:"\FCCB"}.mdi-bridge::before{content:"\F618"}.mdi-briefcase::before{content:"\F0D6"}.mdi-briefcase-account::before{content:"\FCCC"}.mdi-briefcase-account-outline::before{content:"\FCCD"}.mdi-briefcase-check::before{content:"\F0D7"}.mdi-briefcase-check-outline::before{content:"\F0349"}.mdi-briefcase-clock::before{content:"\F00FB"}.mdi-briefcase-clock-outline::before{content:"\F00FC"}.mdi-briefcase-download::before{content:"\F0D8"}.mdi-briefcase-download-outline::before{content:"\FC19"}.mdi-briefcase-edit::before{content:"\FA97"}.mdi-briefcase-edit-outline::before{content:"\FC1A"}.mdi-briefcase-minus::before{content:"\FA29"}.mdi-briefcase-minus-outline::before{content:"\FC1B"}.mdi-briefcase-outline::before{content:"\F813"}.mdi-briefcase-plus::before{content:"\FA2A"}.mdi-briefcase-plus-outline::before{content:"\FC1C"}.mdi-briefcase-remove::before{content:"\FA2B"}.mdi-briefcase-remove-outline::before{content:"\FC1D"}.mdi-briefcase-search::before{content:"\FA2C"}.mdi-briefcase-search-outline::before{content:"\FC1E"}.mdi-briefcase-upload::before{content:"\F0D9"}.mdi-briefcase-upload-outline::before{content:"\FC1F"}.mdi-brightness-1::before{content:"\F0DA"}.mdi-brightness-2::before{content:"\F0DB"}.mdi-brightness-3::before{content:"\F0DC"}.mdi-brightness-4::before{content:"\F0DD"}.mdi-brightness-5::before{content:"\F0DE"}.mdi-brightness-6::before{content:"\F0DF"}.mdi-brightness-7::before{content:"\F0E0"}.mdi-brightness-auto::before{content:"\F0E1"}.mdi-brightness-percent::before{content:"\FCCE"}.mdi-broom::before{content:"\F0E2"}.mdi-brush::before{content:"\F0E3"}.mdi-buddhism::before{content:"\F94A"}.mdi-buffer::before{content:"\F619"}.mdi-bug::before{content:"\F0E4"}.mdi-bug-check::before{content:"\FA2D"}.mdi-bug-check-outline::before{content:"\FA2E"}.mdi-bug-outline::before{content:"\FA2F"}.mdi-bugle::before{content:"\FD90"}.mdi-bulldozer::before{content:"\FB07"}.mdi-bullet::before{content:"\FCCF"}.mdi-bulletin-board::before{content:"\F0E5"}.mdi-bullhorn::before{content:"\F0E6"}.mdi-bullhorn-outline::before{content:"\FB08"}.mdi-bullseye::before{content:"\F5DD"}.mdi-bullseye-arrow::before{content:"\F8C8"}.mdi-bulma::before{content:"\F0312"}.mdi-bunk-bed::before{content:"\F032D"}.mdi-bus::before{content:"\F0E7"}.mdi-bus-alert::before{content:"\FA98"}.mdi-bus-articulated-end::before{content:"\F79B"}.mdi-bus-articulated-front::before{content:"\F79C"}.mdi-bus-clock::before{content:"\F8C9"}.mdi-bus-double-decker::before{content:"\F79D"}.mdi-bus-marker::before{content:"\F023D"}.mdi-bus-multiple::before{content:"\FF5C"}.mdi-bus-school::before{content:"\F79E"}.mdi-bus-side::before{content:"\F79F"}.mdi-bus-stop::before{content:"\F0034"}.mdi-bus-stop-covered::before{content:"\F0035"}.mdi-bus-stop-uncovered::before{content:"\F0036"}.mdi-cached::before{content:"\F0E8"}.mdi-cactus::before{content:"\FD91"}.mdi-cake::before{content:"\F0E9"}.mdi-cake-layered::before{content:"\F0EA"}.mdi-cake-variant::before{content:"\F0EB"}.mdi-calculator::before{content:"\F0EC"}.mdi-calculator-variant::before{content:"\FA99"}.mdi-calendar::before{content:"\F0ED"}.mdi-calendar-account::before{content:"\FEF4"}.mdi-calendar-account-outline::before{content:"\FEF5"}.mdi-calendar-alert::before{content:"\FA30"}.mdi-calendar-arrow-left::before{content:"\F015F"}.mdi-calendar-arrow-right::before{content:"\F0160"}.mdi-calendar-blank::before{content:"\F0EE"}.mdi-calendar-blank-multiple::before{content:"\F009E"}.mdi-calendar-blank-outline::before{content:"\FB42"}.mdi-calendar-check::before{content:"\F0EF"}.mdi-calendar-check-outline::before{content:"\FC20"}.mdi-calendar-clock::before{content:"\F0F0"}.mdi-calendar-edit::before{content:"\F8A6"}.mdi-calendar-export::before{content:"\FB09"}.mdi-calendar-heart::before{content:"\F9D1"}.mdi-calendar-import::before{content:"\FB0A"}.mdi-calendar-minus::before{content:"\FD38"}.mdi-calendar-month::before{content:"\FDFA"}.mdi-calendar-month-outline::before{content:"\FDFB"}.mdi-calendar-multiple::before{content:"\F0F1"}.mdi-calendar-multiple-check::before{content:"\F0F2"}.mdi-calendar-multiselect::before{content:"\FA31"}.mdi-calendar-outline::before{content:"\FB43"}.mdi-calendar-plus::before{content:"\F0F3"}.mdi-calendar-question::before{content:"\F691"}.mdi-calendar-range::before{content:"\F678"}.mdi-calendar-range-outline::before{content:"\FB44"}.mdi-calendar-remove::before{content:"\F0F4"}.mdi-calendar-remove-outline::before{content:"\FC21"}.mdi-calendar-repeat::before{content:"\FEAB"}.mdi-calendar-repeat-outline::before{content:"\FEAC"}.mdi-calendar-search::before{content:"\F94B"}.mdi-calendar-star::before{content:"\F9D2"}.mdi-calendar-text::before{content:"\F0F5"}.mdi-calendar-text-outline::before{content:"\FC22"}.mdi-calendar-today::before{content:"\F0F6"}.mdi-calendar-week::before{content:"\FA32"}.mdi-calendar-week-begin::before{content:"\FA33"}.mdi-calendar-weekend::before{content:"\FEF6"}.mdi-calendar-weekend-outline::before{content:"\FEF7"}.mdi-call-made::before{content:"\F0F7"}.mdi-call-merge::before{content:"\F0F8"}.mdi-call-missed::before{content:"\F0F9"}.mdi-call-received::before{content:"\F0FA"}.mdi-call-split::before{content:"\F0FB"}.mdi-camcorder::before{content:"\F0FC"}.mdi-camcorder-box::before{content:"\F0FD"}.mdi-camcorder-box-off::before{content:"\F0FE"}.mdi-camcorder-off::before{content:"\F0FF"}.mdi-camera::before{content:"\F100"}.mdi-camera-account::before{content:"\F8CA"}.mdi-camera-burst::before{content:"\F692"}.mdi-camera-control::before{content:"\FB45"}.mdi-camera-enhance::before{content:"\F101"}.mdi-camera-enhance-outline::before{content:"\FB46"}.mdi-camera-front::before{content:"\F102"}.mdi-camera-front-variant::before{content:"\F103"}.mdi-camera-gopro::before{content:"\F7A0"}.mdi-camera-image::before{content:"\F8CB"}.mdi-camera-iris::before{content:"\F104"}.mdi-camera-metering-center::before{content:"\F7A1"}.mdi-camera-metering-matrix::before{content:"\F7A2"}.mdi-camera-metering-partial::before{content:"\F7A3"}.mdi-camera-metering-spot::before{content:"\F7A4"}.mdi-camera-off::before{content:"\F5DF"}.mdi-camera-outline::before{content:"\FD39"}.mdi-camera-party-mode::before{content:"\F105"}.mdi-camera-plus::before{content:"\FEF8"}.mdi-camera-plus-outline::before{content:"\FEF9"}.mdi-camera-rear::before{content:"\F106"}.mdi-camera-rear-variant::before{content:"\F107"}.mdi-camera-retake::before{content:"\FDFC"}.mdi-camera-retake-outline::before{content:"\FDFD"}.mdi-camera-switch::before{content:"\F108"}.mdi-camera-timer::before{content:"\F109"}.mdi-camera-wireless::before{content:"\FD92"}.mdi-camera-wireless-outline::before{content:"\FD93"}.mdi-campfire::before{content:"\FEFA"}.mdi-cancel::before{content:"\F739"}.mdi-candle::before{content:"\F5E2"}.mdi-candycane::before{content:"\F10A"}.mdi-cannabis::before{content:"\F7A5"}.mdi-caps-lock::before{content:"\FA9A"}.mdi-car::before{content:"\F10B"}.mdi-car-2-plus::before{content:"\F0037"}.mdi-car-3-plus::before{content:"\F0038"}.mdi-car-back::before{content:"\FDFE"}.mdi-car-battery::before{content:"\F10C"}.mdi-car-brake-abs::before{content:"\FC23"}.mdi-car-brake-alert::before{content:"\FC24"}.mdi-car-brake-hold::before{content:"\FD3A"}.mdi-car-brake-parking::before{content:"\FD3B"}.mdi-car-brake-retarder::before{content:"\F0039"}.mdi-car-child-seat::before{content:"\FFC3"}.mdi-car-clutch::before{content:"\F003A"}.mdi-car-connected::before{content:"\F10D"}.mdi-car-convertible::before{content:"\F7A6"}.mdi-car-coolant-level::before{content:"\F003B"}.mdi-car-cruise-control::before{content:"\FD3C"}.mdi-car-defrost-front::before{content:"\FD3D"}.mdi-car-defrost-rear::before{content:"\FD3E"}.mdi-car-door::before{content:"\FB47"}.mdi-car-door-lock::before{content:"\F00C8"}.mdi-car-electric::before{content:"\FB48"}.mdi-car-esp::before{content:"\FC25"}.mdi-car-estate::before{content:"\F7A7"}.mdi-car-hatchback::before{content:"\F7A8"}.mdi-car-info::before{content:"\F01E9"}.mdi-car-key::before{content:"\FB49"}.mdi-car-light-dimmed::before{content:"\FC26"}.mdi-car-light-fog::before{content:"\FC27"}.mdi-car-light-high::before{content:"\FC28"}.mdi-car-limousine::before{content:"\F8CC"}.mdi-car-multiple::before{content:"\FB4A"}.mdi-car-off::before{content:"\FDFF"}.mdi-car-parking-lights::before{content:"\FD3F"}.mdi-car-pickup::before{content:"\F7A9"}.mdi-car-seat::before{content:"\FFC4"}.mdi-car-seat-cooler::before{content:"\FFC5"}.mdi-car-seat-heater::before{content:"\FFC6"}.mdi-car-shift-pattern::before{content:"\FF5D"}.mdi-car-side::before{content:"\F7AA"}.mdi-car-sports::before{content:"\F7AB"}.mdi-car-tire-alert::before{content:"\FC29"}.mdi-car-traction-control::before{content:"\FD40"}.mdi-car-turbocharger::before{content:"\F003C"}.mdi-car-wash::before{content:"\F10E"}.mdi-car-windshield::before{content:"\F003D"}.mdi-car-windshield-outline::before{content:"\F003E"}.mdi-caravan::before{content:"\F7AC"}.mdi-card::before{content:"\FB4B"}.mdi-card-bulleted::before{content:"\FB4C"}.mdi-card-bulleted-off::before{content:"\FB4D"}.mdi-card-bulleted-off-outline::before{content:"\FB4E"}.mdi-card-bulleted-outline::before{content:"\FB4F"}.mdi-card-bulleted-settings::before{content:"\FB50"}.mdi-card-bulleted-settings-outline::before{content:"\FB51"}.mdi-card-outline::before{content:"\FB52"}.mdi-card-plus::before{content:"\F022A"}.mdi-card-plus-outline::before{content:"\F022B"}.mdi-card-search::before{content:"\F009F"}.mdi-card-search-outline::before{content:"\F00A0"}.mdi-card-text::before{content:"\FB53"}.mdi-card-text-outline::before{content:"\FB54"}.mdi-cards::before{content:"\F638"}.mdi-cards-club::before{content:"\F8CD"}.mdi-cards-diamond::before{content:"\F8CE"}.mdi-cards-diamond-outline::before{content:"\F003F"}.mdi-cards-heart::before{content:"\F8CF"}.mdi-cards-outline::before{content:"\F639"}.mdi-cards-playing-outline::before{content:"\F63A"}.mdi-cards-spade::before{content:"\F8D0"}.mdi-cards-variant::before{content:"\F6C6"}.mdi-carrot::before{content:"\F10F"}.mdi-cart::before{content:"\F110"}.mdi-cart-arrow-down::before{content:"\FD42"}.mdi-cart-arrow-right::before{content:"\FC2A"}.mdi-cart-arrow-up::before{content:"\FD43"}.mdi-cart-minus::before{content:"\FD44"}.mdi-cart-off::before{content:"\F66B"}.mdi-cart-outline::before{content:"\F111"}.mdi-cart-plus::before{content:"\F112"}.mdi-cart-remove::before{content:"\FD45"}.mdi-case-sensitive-alt::before{content:"\F113"}.mdi-cash::before{content:"\F114"}.mdi-cash-100::before{content:"\F115"}.mdi-cash-marker::before{content:"\FD94"}.mdi-cash-minus::before{content:"\F028B"}.mdi-cash-multiple::before{content:"\F116"}.mdi-cash-plus::before{content:"\F028C"}.mdi-cash-refund::before{content:"\FA9B"}.mdi-cash-register::before{content:"\FCD0"}.mdi-cash-remove::before{content:"\F028D"}.mdi-cash-usd::before{content:"\F01A1"}.mdi-cash-usd-outline::before{content:"\F117"}.mdi-cassette::before{content:"\F9D3"}.mdi-cast::before{content:"\F118"}.mdi-cast-audio::before{content:"\F0040"}.mdi-cast-connected::before{content:"\F119"}.mdi-cast-education::before{content:"\FE6D"}.mdi-cast-off::before{content:"\F789"}.mdi-castle::before{content:"\F11A"}.mdi-cat::before{content:"\F11B"}.mdi-cctv::before{content:"\F7AD"}.mdi-ceiling-light::before{content:"\F768"}.mdi-cellphone::before{content:"\F11C"}.mdi-cellphone-android::before{content:"\F11D"}.mdi-cellphone-arrow-down::before{content:"\F9D4"}.mdi-cellphone-basic::before{content:"\F11E"}.mdi-cellphone-dock::before{content:"\F11F"}.mdi-cellphone-erase::before{content:"\F94C"}.mdi-cellphone-information::before{content:"\FF5E"}.mdi-cellphone-iphone::before{content:"\F120"}.mdi-cellphone-key::before{content:"\F94D"}.mdi-cellphone-link::before{content:"\F121"}.mdi-cellphone-link-off::before{content:"\F122"}.mdi-cellphone-lock::before{content:"\F94E"}.mdi-cellphone-message::before{content:"\F8D2"}.mdi-cellphone-message-off::before{content:"\F00FD"}.mdi-cellphone-nfc::before{content:"\FEAD"}.mdi-cellphone-nfc-off::before{content:"\F0303"}.mdi-cellphone-off::before{content:"\F94F"}.mdi-cellphone-play::before{content:"\F0041"}.mdi-cellphone-screenshot::before{content:"\FA34"}.mdi-cellphone-settings::before{content:"\F123"}.mdi-cellphone-settings-variant::before{content:"\F950"}.mdi-cellphone-sound::before{content:"\F951"}.mdi-cellphone-text::before{content:"\F8D1"}.mdi-cellphone-wireless::before{content:"\F814"}.mdi-celtic-cross::before{content:"\FCD1"}.mdi-centos::before{content:"\F0145"}.mdi-certificate::before{content:"\F124"}.mdi-certificate-outline::before{content:"\F01B3"}.mdi-chair-rolling::before{content:"\FFBA"}.mdi-chair-school::before{content:"\F125"}.mdi-charity::before{content:"\FC2B"}.mdi-chart-arc::before{content:"\F126"}.mdi-chart-areaspline::before{content:"\F127"}.mdi-chart-areaspline-variant::before{content:"\FEAE"}.mdi-chart-bar::before{content:"\F128"}.mdi-chart-bar-stacked::before{content:"\F769"}.mdi-chart-bell-curve::before{content:"\FC2C"}.mdi-chart-bell-curve-cumulative::before{content:"\FFC7"}.mdi-chart-bubble::before{content:"\F5E3"}.mdi-chart-donut::before{content:"\F7AE"}.mdi-chart-donut-variant::before{content:"\F7AF"}.mdi-chart-gantt::before{content:"\F66C"}.mdi-chart-histogram::before{content:"\F129"}.mdi-chart-line::before{content:"\F12A"}.mdi-chart-line-stacked::before{content:"\F76A"}.mdi-chart-line-variant::before{content:"\F7B0"}.mdi-chart-multiline::before{content:"\F8D3"}.mdi-chart-multiple::before{content:"\F023E"}.mdi-chart-pie::before{content:"\F12B"}.mdi-chart-ppf::before{content:"\F03AB"}.mdi-chart-scatter-plot::before{content:"\FEAF"}.mdi-chart-scatter-plot-hexbin::before{content:"\F66D"}.mdi-chart-snakey::before{content:"\F020A"}.mdi-chart-snakey-variant::before{content:"\F020B"}.mdi-chart-timeline::before{content:"\F66E"}.mdi-chart-timeline-variant::before{content:"\FEB0"}.mdi-chart-tree::before{content:"\FEB1"}.mdi-chat::before{content:"\FB55"}.mdi-chat-alert::before{content:"\FB56"}.mdi-chat-alert-outline::before{content:"\F02F4"}.mdi-chat-outline::before{content:"\FEFB"}.mdi-chat-processing::before{content:"\FB57"}.mdi-chat-processing-outline::before{content:"\F02F5"}.mdi-chat-sleep::before{content:"\F02FC"}.mdi-chat-sleep-outline::before{content:"\F02FD"}.mdi-check::before{content:"\F12C"}.mdi-check-all::before{content:"\F12D"}.mdi-check-bold::before{content:"\FE6E"}.mdi-check-box-multiple-outline::before{content:"\FC2D"}.mdi-check-box-outline::before{content:"\FC2E"}.mdi-check-circle::before{content:"\F5E0"}.mdi-check-circle-outline::before{content:"\F5E1"}.mdi-check-decagram::before{content:"\F790"}.mdi-check-network::before{content:"\FC2F"}.mdi-check-network-outline::before{content:"\FC30"}.mdi-check-outline::before{content:"\F854"}.mdi-check-underline::before{content:"\FE70"}.mdi-check-underline-circle::before{content:"\FE71"}.mdi-check-underline-circle-outline::before{content:"\FE72"}.mdi-checkbook::before{content:"\FA9C"}.mdi-checkbox-blank::before{content:"\F12E"}.mdi-checkbox-blank-circle::before{content:"\F12F"}.mdi-checkbox-blank-circle-outline::before{content:"\F130"}.mdi-checkbox-blank-off::before{content:"\F0317"}.mdi-checkbox-blank-off-outline::before{content:"\F0318"}.mdi-checkbox-blank-outline::before{content:"\F131"}.mdi-checkbox-intermediate::before{content:"\F855"}.mdi-checkbox-marked::before{content:"\F132"}.mdi-checkbox-marked-circle::before{content:"\F133"}.mdi-checkbox-marked-circle-outline::before{content:"\F134"}.mdi-checkbox-marked-outline::before{content:"\F135"}.mdi-checkbox-multiple-blank::before{content:"\F136"}.mdi-checkbox-multiple-blank-circle::before{content:"\F63B"}.mdi-checkbox-multiple-blank-circle-outline::before{content:"\F63C"}.mdi-checkbox-multiple-blank-outline::before{content:"\F137"}.mdi-checkbox-multiple-marked::before{content:"\F138"}.mdi-checkbox-multiple-marked-circle::before{content:"\F63D"}.mdi-checkbox-multiple-marked-circle-outline::before{content:"\F63E"}.mdi-checkbox-multiple-marked-outline::before{content:"\F139"}.mdi-checkerboard::before{content:"\F13A"}.mdi-checkerboard-minus::before{content:"\F022D"}.mdi-checkerboard-plus::before{content:"\F022C"}.mdi-checkerboard-remove::before{content:"\F022E"}.mdi-cheese::before{content:"\F02E4"}.mdi-chef-hat::before{content:"\FB58"}.mdi-chemical-weapon::before{content:"\F13B"}.mdi-chess-bishop::before{content:"\F85B"}.mdi-chess-king::before{content:"\F856"}.mdi-chess-knight::before{content:"\F857"}.mdi-chess-pawn::before{content:"\F858"}.mdi-chess-queen::before{content:"\F859"}.mdi-chess-rook::before{content:"\F85A"}.mdi-chevron-double-down::before{content:"\F13C"}.mdi-chevron-double-left::before{content:"\F13D"}.mdi-chevron-double-right::before{content:"\F13E"}.mdi-chevron-double-up::before{content:"\F13F"}.mdi-chevron-down::before{content:"\F140"}.mdi-chevron-down-box::before{content:"\F9D5"}.mdi-chevron-down-box-outline::before{content:"\F9D6"}.mdi-chevron-down-circle::before{content:"\FB0B"}.mdi-chevron-down-circle-outline::before{content:"\FB0C"}.mdi-chevron-left::before{content:"\F141"}.mdi-chevron-left-box::before{content:"\F9D7"}.mdi-chevron-left-box-outline::before{content:"\F9D8"}.mdi-chevron-left-circle::before{content:"\FB0D"}.mdi-chevron-left-circle-outline::before{content:"\FB0E"}.mdi-chevron-right::before{content:"\F142"}.mdi-chevron-right-box::before{content:"\F9D9"}.mdi-chevron-right-box-outline::before{content:"\F9DA"}.mdi-chevron-right-circle::before{content:"\FB0F"}.mdi-chevron-right-circle-outline::before{content:"\FB10"}.mdi-chevron-triple-down::before{content:"\FD95"}.mdi-chevron-triple-left::before{content:"\FD96"}.mdi-chevron-triple-right::before{content:"\FD97"}.mdi-chevron-triple-up::before{content:"\FD98"}.mdi-chevron-up::before{content:"\F143"}.mdi-chevron-up-box::before{content:"\F9DB"}.mdi-chevron-up-box-outline::before{content:"\F9DC"}.mdi-chevron-up-circle::before{content:"\FB11"}.mdi-chevron-up-circle-outline::before{content:"\FB12"}.mdi-chili-hot::before{content:"\F7B1"}.mdi-chili-medium::before{content:"\F7B2"}.mdi-chili-mild::before{content:"\F7B3"}.mdi-chip::before{content:"\F61A"}.mdi-christianity::before{content:"\F952"}.mdi-christianity-outline::before{content:"\FCD2"}.mdi-church::before{content:"\F144"}.mdi-cigar::before{content:"\F01B4"}.mdi-circle::before{content:"\F764"}.mdi-circle-double::before{content:"\FEB2"}.mdi-circle-edit-outline::before{content:"\F8D4"}.mdi-circle-expand::before{content:"\FEB3"}.mdi-circle-medium::before{content:"\F9DD"}.mdi-circle-off-outline::before{content:"\F00FE"}.mdi-circle-outline::before{content:"\F765"}.mdi-circle-slice-1::before{content:"\FA9D"}.mdi-circle-slice-2::before{content:"\FA9E"}.mdi-circle-slice-3::before{content:"\FA9F"}.mdi-circle-slice-4::before{content:"\FAA0"}.mdi-circle-slice-5::before{content:"\FAA1"}.mdi-circle-slice-6::before{content:"\FAA2"}.mdi-circle-slice-7::before{content:"\FAA3"}.mdi-circle-slice-8::before{content:"\FAA4"}.mdi-circle-small::before{content:"\F9DE"}.mdi-circular-saw::before{content:"\FE73"}.mdi-cisco-webex::before{content:"\F145"}.mdi-city::before{content:"\F146"}.mdi-city-variant::before{content:"\FA35"}.mdi-city-variant-outline::before{content:"\FA36"}.mdi-clipboard::before{content:"\F147"}.mdi-clipboard-account::before{content:"\F148"}.mdi-clipboard-account-outline::before{content:"\FC31"}.mdi-clipboard-alert::before{content:"\F149"}.mdi-clipboard-alert-outline::before{content:"\FCD3"}.mdi-clipboard-arrow-down::before{content:"\F14A"}.mdi-clipboard-arrow-down-outline::before{content:"\FC32"}.mdi-clipboard-arrow-left::before{content:"\F14B"}.mdi-clipboard-arrow-left-outline::before{content:"\FCD4"}.mdi-clipboard-arrow-right::before{content:"\FCD5"}.mdi-clipboard-arrow-right-outline::before{content:"\FCD6"}.mdi-clipboard-arrow-up::before{content:"\FC33"}.mdi-clipboard-arrow-up-outline::before{content:"\FC34"}.mdi-clipboard-check::before{content:"\F14C"}.mdi-clipboard-check-multiple::before{content:"\F028E"}.mdi-clipboard-check-multiple-outline::before{content:"\F028F"}.mdi-clipboard-check-outline::before{content:"\F8A7"}.mdi-clipboard-file::before{content:"\F0290"}.mdi-clipboard-file-outline::before{content:"\F0291"}.mdi-clipboard-flow::before{content:"\F6C7"}.mdi-clipboard-flow-outline::before{content:"\F0142"}.mdi-clipboard-list::before{content:"\F00FF"}.mdi-clipboard-list-outline::before{content:"\F0100"}.mdi-clipboard-multiple::before{content:"\F0292"}.mdi-clipboard-multiple-outline::before{content:"\F0293"}.mdi-clipboard-outline::before{content:"\F14D"}.mdi-clipboard-play::before{content:"\FC35"}.mdi-clipboard-play-multiple::before{content:"\F0294"}.mdi-clipboard-play-multiple-outline::before{content:"\F0295"}.mdi-clipboard-play-outline::before{content:"\FC36"}.mdi-clipboard-plus::before{content:"\F750"}.mdi-clipboard-plus-outline::before{content:"\F034A"}.mdi-clipboard-pulse::before{content:"\F85C"}.mdi-clipboard-pulse-outline::before{content:"\F85D"}.mdi-clipboard-text::before{content:"\F14E"}.mdi-clipboard-text-multiple::before{content:"\F0296"}.mdi-clipboard-text-multiple-outline::before{content:"\F0297"}.mdi-clipboard-text-outline::before{content:"\FA37"}.mdi-clipboard-text-play::before{content:"\FC37"}.mdi-clipboard-text-play-outline::before{content:"\FC38"}.mdi-clippy::before{content:"\F14F"}.mdi-clock::before{content:"\F953"}.mdi-clock-alert::before{content:"\F954"}.mdi-clock-alert-outline::before{content:"\F5CE"}.mdi-clock-check::before{content:"\FFC8"}.mdi-clock-check-outline::before{content:"\FFC9"}.mdi-clock-digital::before{content:"\FEB4"}.mdi-clock-end::before{content:"\F151"}.mdi-clock-fast::before{content:"\F152"}.mdi-clock-in::before{content:"\F153"}.mdi-clock-out::before{content:"\F154"}.mdi-clock-outline::before{content:"\F150"}.mdi-clock-start::before{content:"\F155"}.mdi-close::before{content:"\F156"}.mdi-close-box::before{content:"\F157"}.mdi-close-box-multiple::before{content:"\FC39"}.mdi-close-box-multiple-outline::before{content:"\FC3A"}.mdi-close-box-outline::before{content:"\F158"}.mdi-close-circle::before{content:"\F159"}.mdi-close-circle-outline::before{content:"\F15A"}.mdi-close-network::before{content:"\F15B"}.mdi-close-network-outline::before{content:"\FC3B"}.mdi-close-octagon::before{content:"\F15C"}.mdi-close-octagon-outline::before{content:"\F15D"}.mdi-close-outline::before{content:"\F6C8"}.mdi-closed-caption::before{content:"\F15E"}.mdi-closed-caption-outline::before{content:"\FD99"}.mdi-cloud::before{content:"\F15F"}.mdi-cloud-alert::before{content:"\F9DF"}.mdi-cloud-braces::before{content:"\F7B4"}.mdi-cloud-check::before{content:"\F160"}.mdi-cloud-check-outline::before{content:"\F02F7"}.mdi-cloud-circle::before{content:"\F161"}.mdi-cloud-download::before{content:"\F162"}.mdi-cloud-download-outline::before{content:"\FB59"}.mdi-cloud-lock::before{content:"\F021C"}.mdi-cloud-lock-outline::before{content:"\F021D"}.mdi-cloud-off-outline::before{content:"\F164"}.mdi-cloud-outline::before{content:"\F163"}.mdi-cloud-print::before{content:"\F165"}.mdi-cloud-print-outline::before{content:"\F166"}.mdi-cloud-question::before{content:"\FA38"}.mdi-cloud-search::before{content:"\F955"}.mdi-cloud-search-outline::before{content:"\F956"}.mdi-cloud-sync::before{content:"\F63F"}.mdi-cloud-sync-outline::before{content:"\F0301"}.mdi-cloud-tags::before{content:"\F7B5"}.mdi-cloud-upload::before{content:"\F167"}.mdi-cloud-upload-outline::before{content:"\FB5A"}.mdi-clover::before{content:"\F815"}.mdi-coach-lamp::before{content:"\F0042"}.mdi-coat-rack::before{content:"\F00C9"}.mdi-code-array::before{content:"\F168"}.mdi-code-braces::before{content:"\F169"}.mdi-code-braces-box::before{content:"\F0101"}.mdi-code-brackets::before{content:"\F16A"}.mdi-code-equal::before{content:"\F16B"}.mdi-code-greater-than::before{content:"\F16C"}.mdi-code-greater-than-or-equal::before{content:"\F16D"}.mdi-code-less-than::before{content:"\F16E"}.mdi-code-less-than-or-equal::before{content:"\F16F"}.mdi-code-not-equal::before{content:"\F170"}.mdi-code-not-equal-variant::before{content:"\F171"}.mdi-code-parentheses::before{content:"\F172"}.mdi-code-parentheses-box::before{content:"\F0102"}.mdi-code-string::before{content:"\F173"}.mdi-code-tags::before{content:"\F174"}.mdi-code-tags-check::before{content:"\F693"}.mdi-codepen::before{content:"\F175"}.mdi-coffee::before{content:"\F176"}.mdi-coffee-maker::before{content:"\F00CA"}.mdi-coffee-off::before{content:"\FFCA"}.mdi-coffee-off-outline::before{content:"\FFCB"}.mdi-coffee-outline::before{content:"\F6C9"}.mdi-coffee-to-go::before{content:"\F177"}.mdi-coffee-to-go-outline::before{content:"\F0339"}.mdi-coffin::before{content:"\FB5B"}.mdi-cog-clockwise::before{content:"\F0208"}.mdi-cog-counterclockwise::before{content:"\F0209"}.mdi-cogs::before{content:"\F8D5"}.mdi-coin::before{content:"\F0196"}.mdi-coin-outline::before{content:"\F178"}.mdi-coins::before{content:"\F694"}.mdi-collage::before{content:"\F640"}.mdi-collapse-all::before{content:"\FAA5"}.mdi-collapse-all-outline::before{content:"\FAA6"}.mdi-color-helper::before{content:"\F179"}.mdi-comma::before{content:"\FE74"}.mdi-comma-box::before{content:"\FE75"}.mdi-comma-box-outline::before{content:"\FE76"}.mdi-comma-circle::before{content:"\FE77"}.mdi-comma-circle-outline::before{content:"\FE78"}.mdi-comment::before{content:"\F17A"}.mdi-comment-account::before{content:"\F17B"}.mdi-comment-account-outline::before{content:"\F17C"}.mdi-comment-alert::before{content:"\F17D"}.mdi-comment-alert-outline::before{content:"\F17E"}.mdi-comment-arrow-left::before{content:"\F9E0"}.mdi-comment-arrow-left-outline::before{content:"\F9E1"}.mdi-comment-arrow-right::before{content:"\F9E2"}.mdi-comment-arrow-right-outline::before{content:"\F9E3"}.mdi-comment-check::before{content:"\F17F"}.mdi-comment-check-outline::before{content:"\F180"}.mdi-comment-edit::before{content:"\F01EA"}.mdi-comment-edit-outline::before{content:"\F02EF"}.mdi-comment-eye::before{content:"\FA39"}.mdi-comment-eye-outline::before{content:"\FA3A"}.mdi-comment-multiple::before{content:"\F85E"}.mdi-comment-multiple-outline::before{content:"\F181"}.mdi-comment-outline::before{content:"\F182"}.mdi-comment-plus::before{content:"\F9E4"}.mdi-comment-plus-outline::before{content:"\F183"}.mdi-comment-processing::before{content:"\F184"}.mdi-comment-processing-outline::before{content:"\F185"}.mdi-comment-question::before{content:"\F816"}.mdi-comment-question-outline::before{content:"\F186"}.mdi-comment-quote::before{content:"\F0043"}.mdi-comment-quote-outline::before{content:"\F0044"}.mdi-comment-remove::before{content:"\F5DE"}.mdi-comment-remove-outline::before{content:"\F187"}.mdi-comment-search::before{content:"\FA3B"}.mdi-comment-search-outline::before{content:"\FA3C"}.mdi-comment-text::before{content:"\F188"}.mdi-comment-text-multiple::before{content:"\F85F"}.mdi-comment-text-multiple-outline::before{content:"\F860"}.mdi-comment-text-outline::before{content:"\F189"}.mdi-compare::before{content:"\F18A"}.mdi-compass::before{content:"\F18B"}.mdi-compass-off::before{content:"\FB5C"}.mdi-compass-off-outline::before{content:"\FB5D"}.mdi-compass-outline::before{content:"\F18C"}.mdi-compass-rose::before{content:"\F03AD"}.mdi-concourse-ci::before{content:"\F00CB"}.mdi-console::before{content:"\F18D"}.mdi-console-line::before{content:"\F7B6"}.mdi-console-network::before{content:"\F8A8"}.mdi-console-network-outline::before{content:"\FC3C"}.mdi-consolidate::before{content:"\F0103"}.mdi-contact-mail::before{content:"\F18E"}.mdi-contact-mail-outline::before{content:"\FEB5"}.mdi-contact-phone::before{content:"\FEB6"}.mdi-contact-phone-outline::before{content:"\FEB7"}.mdi-contactless-payment::before{content:"\FD46"}.mdi-contacts::before{content:"\F6CA"}.mdi-contain::before{content:"\FA3D"}.mdi-contain-end::before{content:"\FA3E"}.mdi-contain-start::before{content:"\FA3F"}.mdi-content-copy::before{content:"\F18F"}.mdi-content-cut::before{content:"\F190"}.mdi-content-duplicate::before{content:"\F191"}.mdi-content-paste::before{content:"\F192"}.mdi-content-save::before{content:"\F193"}.mdi-content-save-alert::before{content:"\FF5F"}.mdi-content-save-alert-outline::before{content:"\FF60"}.mdi-content-save-all::before{content:"\F194"}.mdi-content-save-all-outline::before{content:"\FF61"}.mdi-content-save-edit::before{content:"\FCD7"}.mdi-content-save-edit-outline::before{content:"\FCD8"}.mdi-content-save-move::before{content:"\FE79"}.mdi-content-save-move-outline::before{content:"\FE7A"}.mdi-content-save-outline::before{content:"\F817"}.mdi-content-save-settings::before{content:"\F61B"}.mdi-content-save-settings-outline::before{content:"\FB13"}.mdi-contrast::before{content:"\F195"}.mdi-contrast-box::before{content:"\F196"}.mdi-contrast-circle::before{content:"\F197"}.mdi-controller-classic::before{content:"\FB5E"}.mdi-controller-classic-outline::before{content:"\FB5F"}.mdi-cookie::before{content:"\F198"}.mdi-coolant-temperature::before{content:"\F3C8"}.mdi-copyright::before{content:"\F5E6"}.mdi-cordova::before{content:"\F957"}.mdi-corn::before{content:"\F7B7"}.mdi-counter::before{content:"\F199"}.mdi-cow::before{content:"\F19A"}.mdi-cowboy::before{content:"\FEB8"}.mdi-cpu-32-bit::before{content:"\FEFC"}.mdi-cpu-64-bit::before{content:"\FEFD"}.mdi-crane::before{content:"\F861"}.mdi-creation::before{content:"\F1C9"}.mdi-creative-commons::before{content:"\FD47"}.mdi-credit-card::before{content:"\F0010"}.mdi-credit-card-clock::before{content:"\FEFE"}.mdi-credit-card-clock-outline::before{content:"\FFBC"}.mdi-credit-card-marker::before{content:"\F6A7"}.mdi-credit-card-marker-outline::before{content:"\FD9A"}.mdi-credit-card-minus::before{content:"\FFCC"}.mdi-credit-card-minus-outline::before{content:"\FFCD"}.mdi-credit-card-multiple::before{content:"\F0011"}.mdi-credit-card-multiple-outline::before{content:"\F19C"}.mdi-credit-card-off::before{content:"\F0012"}.mdi-credit-card-off-outline::before{content:"\F5E4"}.mdi-credit-card-outline::before{content:"\F19B"}.mdi-credit-card-plus::before{content:"\F0013"}.mdi-credit-card-plus-outline::before{content:"\F675"}.mdi-credit-card-refund::before{content:"\F0014"}.mdi-credit-card-refund-outline::before{content:"\FAA7"}.mdi-credit-card-remove::before{content:"\FFCE"}.mdi-credit-card-remove-outline::before{content:"\FFCF"}.mdi-credit-card-scan::before{content:"\F0015"}.mdi-credit-card-scan-outline::before{content:"\F19D"}.mdi-credit-card-settings::before{content:"\F0016"}.mdi-credit-card-settings-outline::before{content:"\F8D6"}.mdi-credit-card-wireless::before{content:"\F801"}.mdi-credit-card-wireless-outline::before{content:"\FD48"}.mdi-cricket::before{content:"\FD49"}.mdi-crop::before{content:"\F19E"}.mdi-crop-free::before{content:"\F19F"}.mdi-crop-landscape::before{content:"\F1A0"}.mdi-crop-portrait::before{content:"\F1A1"}.mdi-crop-rotate::before{content:"\F695"}.mdi-crop-square::before{content:"\F1A2"}.mdi-crosshairs::before{content:"\F1A3"}.mdi-crosshairs-gps::before{content:"\F1A4"}.mdi-crosshairs-off::before{content:"\FF62"}.mdi-crosshairs-question::before{content:"\F0161"}.mdi-crown::before{content:"\F1A5"}.mdi-crown-outline::before{content:"\F01FB"}.mdi-cryengine::before{content:"\F958"}.mdi-crystal-ball::before{content:"\FB14"}.mdi-cube::before{content:"\F1A6"}.mdi-cube-outline::before{content:"\F1A7"}.mdi-cube-scan::before{content:"\FB60"}.mdi-cube-send::before{content:"\F1A8"}.mdi-cube-unfolded::before{content:"\F1A9"}.mdi-cup::before{content:"\F1AA"}.mdi-cup-off::before{content:"\F5E5"}.mdi-cup-off-outline::before{content:"\F03A8"}.mdi-cup-outline::before{content:"\F033A"}.mdi-cup-water::before{content:"\F1AB"}.mdi-cupboard::before{content:"\FF63"}.mdi-cupboard-outline::before{content:"\FF64"}.mdi-cupcake::before{content:"\F959"}.mdi-curling::before{content:"\F862"}.mdi-currency-bdt::before{content:"\F863"}.mdi-currency-brl::before{content:"\FB61"}.mdi-currency-btc::before{content:"\F1AC"}.mdi-currency-cny::before{content:"\F7B9"}.mdi-currency-eth::before{content:"\F7BA"}.mdi-currency-eur::before{content:"\F1AD"}.mdi-currency-eur-off::before{content:"\F0340"}.mdi-currency-gbp::before{content:"\F1AE"}.mdi-currency-ils::before{content:"\FC3D"}.mdi-currency-inr::before{content:"\F1AF"}.mdi-currency-jpy::before{content:"\F7BB"}.mdi-currency-krw::before{content:"\F7BC"}.mdi-currency-kzt::before{content:"\F864"}.mdi-currency-ngn::before{content:"\F1B0"}.mdi-currency-php::before{content:"\F9E5"}.mdi-currency-rial::before{content:"\FEB9"}.mdi-currency-rub::before{content:"\F1B1"}.mdi-currency-sign::before{content:"\F7BD"}.mdi-currency-try::before{content:"\F1B2"}.mdi-currency-twd::before{content:"\F7BE"}.mdi-currency-usd::before{content:"\F1B3"}.mdi-currency-usd-off::before{content:"\F679"}.mdi-current-ac::before{content:"\F95A"}.mdi-current-dc::before{content:"\F95B"}.mdi-cursor-default::before{content:"\F1B4"}.mdi-cursor-default-click::before{content:"\FCD9"}.mdi-cursor-default-click-outline::before{content:"\FCDA"}.mdi-cursor-default-gesture::before{content:"\F0152"}.mdi-cursor-default-gesture-outline::before{content:"\F0153"}.mdi-cursor-default-outline::before{content:"\F1B5"}.mdi-cursor-move::before{content:"\F1B6"}.mdi-cursor-pointer::before{content:"\F1B7"}.mdi-cursor-text::before{content:"\F5E7"}.mdi-database::before{content:"\F1B8"}.mdi-database-check::before{content:"\FAA8"}.mdi-database-edit::before{content:"\FB62"}.mdi-database-export::before{content:"\F95D"}.mdi-database-import::before{content:"\F95C"}.mdi-database-lock::before{content:"\FAA9"}.mdi-database-marker::before{content:"\F0321"}.mdi-database-minus::before{content:"\F1B9"}.mdi-database-plus::before{content:"\F1BA"}.mdi-database-refresh::before{content:"\FCDB"}.mdi-database-remove::before{content:"\FCDC"}.mdi-database-search::before{content:"\F865"}.mdi-database-settings::before{content:"\FCDD"}.mdi-death-star::before{content:"\F8D7"}.mdi-death-star-variant::before{content:"\F8D8"}.mdi-deathly-hallows::before{content:"\FB63"}.mdi-debian::before{content:"\F8D9"}.mdi-debug-step-into::before{content:"\F1BB"}.mdi-debug-step-out::before{content:"\F1BC"}.mdi-debug-step-over::before{content:"\F1BD"}.mdi-decagram::before{content:"\F76B"}.mdi-decagram-outline::before{content:"\F76C"}.mdi-decimal::before{content:"\F00CC"}.mdi-decimal-comma::before{content:"\F00CD"}.mdi-decimal-comma-decrease::before{content:"\F00CE"}.mdi-decimal-comma-increase::before{content:"\F00CF"}.mdi-decimal-decrease::before{content:"\F1BE"}.mdi-decimal-increase::before{content:"\F1BF"}.mdi-delete::before{content:"\F1C0"}.mdi-delete-alert::before{content:"\F00D0"}.mdi-delete-alert-outline::before{content:"\F00D1"}.mdi-delete-circle::before{content:"\F682"}.mdi-delete-circle-outline::before{content:"\FB64"}.mdi-delete-empty::before{content:"\F6CB"}.mdi-delete-empty-outline::before{content:"\FEBA"}.mdi-delete-forever::before{content:"\F5E8"}.mdi-delete-forever-outline::before{content:"\FB65"}.mdi-delete-off::before{content:"\F00D2"}.mdi-delete-off-outline::before{content:"\F00D3"}.mdi-delete-outline::before{content:"\F9E6"}.mdi-delete-restore::before{content:"\F818"}.mdi-delete-sweep::before{content:"\F5E9"}.mdi-delete-sweep-outline::before{content:"\FC3E"}.mdi-delete-variant::before{content:"\F1C1"}.mdi-delta::before{content:"\F1C2"}.mdi-desk::before{content:"\F0264"}.mdi-desk-lamp::before{content:"\F95E"}.mdi-deskphone::before{content:"\F1C3"}.mdi-desktop-classic::before{content:"\F7BF"}.mdi-desktop-mac::before{content:"\F1C4"}.mdi-desktop-mac-dashboard::before{content:"\F9E7"}.mdi-desktop-tower::before{content:"\F1C5"}.mdi-desktop-tower-monitor::before{content:"\FAAA"}.mdi-details::before{content:"\F1C6"}.mdi-dev-to::before{content:"\FD4A"}.mdi-developer-board::before{content:"\F696"}.mdi-deviantart::before{content:"\F1C7"}.mdi-devices::before{content:"\FFD0"}.mdi-diabetes::before{content:"\F0151"}.mdi-dialpad::before{content:"\F61C"}.mdi-diameter::before{content:"\FC3F"}.mdi-diameter-outline::before{content:"\FC40"}.mdi-diameter-variant::before{content:"\FC41"}.mdi-diamond::before{content:"\FB66"}.mdi-diamond-outline::before{content:"\FB67"}.mdi-diamond-stone::before{content:"\F1C8"}.mdi-dice-1::before{content:"\F1CA"}.mdi-dice-1-outline::before{content:"\F0175"}.mdi-dice-2::before{content:"\F1CB"}.mdi-dice-2-outline::before{content:"\F0176"}.mdi-dice-3::before{content:"\F1CC"}.mdi-dice-3-outline::before{content:"\F0177"}.mdi-dice-4::before{content:"\F1CD"}.mdi-dice-4-outline::before{content:"\F0178"}.mdi-dice-5::before{content:"\F1CE"}.mdi-dice-5-outline::before{content:"\F0179"}.mdi-dice-6::before{content:"\F1CF"}.mdi-dice-6-outline::before{content:"\F017A"}.mdi-dice-d10::before{content:"\F017E"}.mdi-dice-d10-outline::before{content:"\F76E"}.mdi-dice-d12::before{content:"\F017F"}.mdi-dice-d12-outline::before{content:"\F866"}.mdi-dice-d20::before{content:"\F0180"}.mdi-dice-d20-outline::before{content:"\F5EA"}.mdi-dice-d4::before{content:"\F017B"}.mdi-dice-d4-outline::before{content:"\F5EB"}.mdi-dice-d6::before{content:"\F017C"}.mdi-dice-d6-outline::before{content:"\F5EC"}.mdi-dice-d8::before{content:"\F017D"}.mdi-dice-d8-outline::before{content:"\F5ED"}.mdi-dice-multiple::before{content:"\F76D"}.mdi-dice-multiple-outline::before{content:"\F0181"}.mdi-dictionary::before{content:"\F61D"}.mdi-digital-ocean::before{content:"\F0262"}.mdi-dip-switch::before{content:"\F7C0"}.mdi-directions::before{content:"\F1D0"}.mdi-directions-fork::before{content:"\F641"}.mdi-disc::before{content:"\F5EE"}.mdi-disc-alert::before{content:"\F1D1"}.mdi-disc-player::before{content:"\F95F"}.mdi-discord::before{content:"\F66F"}.mdi-dishwasher::before{content:"\FAAB"}.mdi-dishwasher-alert::before{content:"\F01E3"}.mdi-dishwasher-off::before{content:"\F01E4"}.mdi-disqus::before{content:"\F1D2"}.mdi-disqus-outline::before{content:"\F1D3"}.mdi-distribute-horizontal-center::before{content:"\F01F4"}.mdi-distribute-horizontal-left::before{content:"\F01F3"}.mdi-distribute-horizontal-right::before{content:"\F01F5"}.mdi-distribute-vertical-bottom::before{content:"\F01F6"}.mdi-distribute-vertical-center::before{content:"\F01F7"}.mdi-distribute-vertical-top::before{content:"\F01F8"}.mdi-diving-flippers::before{content:"\FD9B"}.mdi-diving-helmet::before{content:"\FD9C"}.mdi-diving-scuba::before{content:"\FD9D"}.mdi-diving-scuba-flag::before{content:"\FD9E"}.mdi-diving-scuba-tank::before{content:"\FD9F"}.mdi-diving-scuba-tank-multiple::before{content:"\FDA0"}.mdi-diving-snorkel::before{content:"\FDA1"}.mdi-division::before{content:"\F1D4"}.mdi-division-box::before{content:"\F1D5"}.mdi-dlna::before{content:"\FA40"}.mdi-dna::before{content:"\F683"}.mdi-dns::before{content:"\F1D6"}.mdi-dns-outline::before{content:"\FB68"}.mdi-do-not-disturb::before{content:"\F697"}.mdi-do-not-disturb-off::before{content:"\F698"}.mdi-dock-bottom::before{content:"\F00D4"}.mdi-dock-left::before{content:"\F00D5"}.mdi-dock-right::before{content:"\F00D6"}.mdi-dock-window::before{content:"\F00D7"}.mdi-docker::before{content:"\F867"}.mdi-doctor::before{content:"\FA41"}.mdi-dog::before{content:"\FA42"}.mdi-dog-service::before{content:"\FAAC"}.mdi-dog-side::before{content:"\FA43"}.mdi-dolby::before{content:"\F6B2"}.mdi-dolly::before{content:"\FEBB"}.mdi-domain::before{content:"\F1D7"}.mdi-domain-off::before{content:"\FD4B"}.mdi-domain-plus::before{content:"\F00D8"}.mdi-domain-remove::before{content:"\F00D9"}.mdi-domino-mask::before{content:"\F0045"}.mdi-donkey::before{content:"\F7C1"}.mdi-door::before{content:"\F819"}.mdi-door-closed::before{content:"\F81A"}.mdi-door-closed-lock::before{content:"\F00DA"}.mdi-door-open::before{content:"\F81B"}.mdi-doorbell::before{content:"\F0311"}.mdi-doorbell-video::before{content:"\F868"}.mdi-dot-net::before{content:"\FAAD"}.mdi-dots-horizontal::before{content:"\F1D8"}.mdi-dots-horizontal-circle::before{content:"\F7C2"}.mdi-dots-horizontal-circle-outline::before{content:"\FB69"}.mdi-dots-vertical::before{content:"\F1D9"}.mdi-dots-vertical-circle::before{content:"\F7C3"}.mdi-dots-vertical-circle-outline::before{content:"\FB6A"}.mdi-douban::before{content:"\F699"}.mdi-download::before{content:"\F1DA"}.mdi-download-lock::before{content:"\F034B"}.mdi-download-lock-outline::before{content:"\F034C"}.mdi-download-multiple::before{content:"\F9E8"}.mdi-download-network::before{content:"\F6F3"}.mdi-download-network-outline::before{content:"\FC42"}.mdi-download-off::before{content:"\F00DB"}.mdi-download-off-outline::before{content:"\F00DC"}.mdi-download-outline::before{content:"\FB6B"}.mdi-drag::before{content:"\F1DB"}.mdi-drag-horizontal::before{content:"\F1DC"}.mdi-drag-horizontal-variant::before{content:"\F031B"}.mdi-drag-variant::before{content:"\FB6C"}.mdi-drag-vertical::before{content:"\F1DD"}.mdi-drag-vertical-variant::before{content:"\F031C"}.mdi-drama-masks::before{content:"\FCDE"}.mdi-draw::before{content:"\FF66"}.mdi-drawing::before{content:"\F1DE"}.mdi-drawing-box::before{content:"\F1DF"}.mdi-dresser::before{content:"\FF67"}.mdi-dresser-outline::before{content:"\FF68"}.mdi-dribbble::before{content:"\F1E0"}.mdi-dribbble-box::before{content:"\F1E1"}.mdi-drone::before{content:"\F1E2"}.mdi-dropbox::before{content:"\F1E3"}.mdi-drupal::before{content:"\F1E4"}.mdi-duck::before{content:"\F1E5"}.mdi-dumbbell::before{content:"\F1E6"}.mdi-dump-truck::before{content:"\FC43"}.mdi-ear-hearing::before{content:"\F7C4"}.mdi-ear-hearing-off::before{content:"\FA44"}.mdi-earth::before{content:"\F1E7"}.mdi-earth-arrow-right::before{content:"\F033C"}.mdi-earth-box::before{content:"\F6CC"}.mdi-earth-box-off::before{content:"\F6CD"}.mdi-earth-off::before{content:"\F1E8"}.mdi-edge::before{content:"\F1E9"}.mdi-edge-legacy::before{content:"\F027B"}.mdi-egg::before{content:"\FAAE"}.mdi-egg-easter::before{content:"\FAAF"}.mdi-eight-track::before{content:"\F9E9"}.mdi-eject::before{content:"\F1EA"}.mdi-eject-outline::before{content:"\FB6D"}.mdi-electric-switch::before{content:"\FEBC"}.mdi-electric-switch-closed::before{content:"\F0104"}.mdi-electron-framework::before{content:"\F0046"}.mdi-elephant::before{content:"\F7C5"}.mdi-elevation-decline::before{content:"\F1EB"}.mdi-elevation-rise::before{content:"\F1EC"}.mdi-elevator::before{content:"\F1ED"}.mdi-elevator-down::before{content:"\F02ED"}.mdi-elevator-passenger::before{content:"\F03AC"}.mdi-elevator-up::before{content:"\F02EC"}.mdi-ellipse::before{content:"\FEBD"}.mdi-ellipse-outline::before{content:"\FEBE"}.mdi-email::before{content:"\F1EE"}.mdi-email-alert::before{content:"\F6CE"}.mdi-email-alert-outline::before{content:"\FD1E"}.mdi-email-box::before{content:"\FCDF"}.mdi-email-check::before{content:"\FAB0"}.mdi-email-check-outline::before{content:"\FAB1"}.mdi-email-edit::before{content:"\FF00"}.mdi-email-edit-outline::before{content:"\FF01"}.mdi-email-lock::before{content:"\F1F1"}.mdi-email-mark-as-unread::before{content:"\FB6E"}.mdi-email-minus::before{content:"\FF02"}.mdi-email-minus-outline::before{content:"\FF03"}.mdi-email-multiple::before{content:"\FF04"}.mdi-email-multiple-outline::before{content:"\FF05"}.mdi-email-newsletter::before{content:"\FFD1"}.mdi-email-open::before{content:"\F1EF"}.mdi-email-open-multiple::before{content:"\FF06"}.mdi-email-open-multiple-outline::before{content:"\FF07"}.mdi-email-open-outline::before{content:"\F5EF"}.mdi-email-outline::before{content:"\F1F0"}.mdi-email-plus::before{content:"\F9EA"}.mdi-email-plus-outline::before{content:"\F9EB"}.mdi-email-receive::before{content:"\F0105"}.mdi-email-receive-outline::before{content:"\F0106"}.mdi-email-search::before{content:"\F960"}.mdi-email-search-outline::before{content:"\F961"}.mdi-email-send::before{content:"\F0107"}.mdi-email-send-outline::before{content:"\F0108"}.mdi-email-sync::before{content:"\F02F2"}.mdi-email-sync-outline::before{content:"\F02F3"}.mdi-email-variant::before{content:"\F5F0"}.mdi-ember::before{content:"\FB15"}.mdi-emby::before{content:"\F6B3"}.mdi-emoticon::before{content:"\FC44"}.mdi-emoticon-angry::before{content:"\FC45"}.mdi-emoticon-angry-outline::before{content:"\FC46"}.mdi-emoticon-confused::before{content:"\F0109"}.mdi-emoticon-confused-outline::before{content:"\F010A"}.mdi-emoticon-cool::before{content:"\FC47"}.mdi-emoticon-cool-outline::before{content:"\F1F3"}.mdi-emoticon-cry::before{content:"\FC48"}.mdi-emoticon-cry-outline::before{content:"\FC49"}.mdi-emoticon-dead::before{content:"\FC4A"}.mdi-emoticon-dead-outline::before{content:"\F69A"}.mdi-emoticon-devil::before{content:"\FC4B"}.mdi-emoticon-devil-outline::before{content:"\F1F4"}.mdi-emoticon-excited::before{content:"\FC4C"}.mdi-emoticon-excited-outline::before{content:"\F69B"}.mdi-emoticon-frown::before{content:"\FF69"}.mdi-emoticon-frown-outline::before{content:"\FF6A"}.mdi-emoticon-happy::before{content:"\FC4D"}.mdi-emoticon-happy-outline::before{content:"\F1F5"}.mdi-emoticon-kiss::before{content:"\FC4E"}.mdi-emoticon-kiss-outline::before{content:"\FC4F"}.mdi-emoticon-lol::before{content:"\F023F"}.mdi-emoticon-lol-outline::before{content:"\F0240"}.mdi-emoticon-neutral::before{content:"\FC50"}.mdi-emoticon-neutral-outline::before{content:"\F1F6"}.mdi-emoticon-outline::before{content:"\F1F2"}.mdi-emoticon-poop::before{content:"\F1F7"}.mdi-emoticon-poop-outline::before{content:"\FC51"}.mdi-emoticon-sad::before{content:"\FC52"}.mdi-emoticon-sad-outline::before{content:"\F1F8"}.mdi-emoticon-tongue::before{content:"\F1F9"}.mdi-emoticon-tongue-outline::before{content:"\FC53"}.mdi-emoticon-wink::before{content:"\FC54"}.mdi-emoticon-wink-outline::before{content:"\FC55"}.mdi-engine::before{content:"\F1FA"}.mdi-engine-off::before{content:"\FA45"}.mdi-engine-off-outline::before{content:"\FA46"}.mdi-engine-outline::before{content:"\F1FB"}.mdi-epsilon::before{content:"\F010B"}.mdi-equal::before{content:"\F1FC"}.mdi-equal-box::before{content:"\F1FD"}.mdi-equalizer::before{content:"\FEBF"}.mdi-equalizer-outline::before{content:"\FEC0"}.mdi-eraser::before{content:"\F1FE"}.mdi-eraser-variant::before{content:"\F642"}.mdi-escalator::before{content:"\F1FF"}.mdi-escalator-down::before{content:"\F02EB"}.mdi-escalator-up::before{content:"\F02EA"}.mdi-eslint::before{content:"\FC56"}.mdi-et::before{content:"\FAB2"}.mdi-ethereum::before{content:"\F869"}.mdi-ethernet::before{content:"\F200"}.mdi-ethernet-cable::before{content:"\F201"}.mdi-ethernet-cable-off::before{content:"\F202"}.mdi-etsy::before{content:"\F203"}.mdi-ev-station::before{content:"\F5F1"}.mdi-eventbrite::before{content:"\F7C6"}.mdi-evernote::before{content:"\F204"}.mdi-excavator::before{content:"\F0047"}.mdi-exclamation::before{content:"\F205"}.mdi-exclamation-thick::before{content:"\F0263"}.mdi-exit-run::before{content:"\FA47"}.mdi-exit-to-app::before{content:"\F206"}.mdi-expand-all::before{content:"\FAB3"}.mdi-expand-all-outline::before{content:"\FAB4"}.mdi-expansion-card::before{content:"\F8AD"}.mdi-expansion-card-variant::before{content:"\FFD2"}.mdi-exponent::before{content:"\F962"}.mdi-exponent-box::before{content:"\F963"}.mdi-export::before{content:"\F207"}.mdi-export-variant::before{content:"\FB6F"}.mdi-eye::before{content:"\F208"}.mdi-eye-check::before{content:"\FCE0"}.mdi-eye-check-outline::before{content:"\FCE1"}.mdi-eye-circle::before{content:"\FB70"}.mdi-eye-circle-outline::before{content:"\FB71"}.mdi-eye-minus::before{content:"\F0048"}.mdi-eye-minus-outline::before{content:"\F0049"}.mdi-eye-off::before{content:"\F209"}.mdi-eye-off-outline::before{content:"\F6D0"}.mdi-eye-outline::before{content:"\F6CF"}.mdi-eye-plus::before{content:"\F86A"}.mdi-eye-plus-outline::before{content:"\F86B"}.mdi-eye-settings::before{content:"\F86C"}.mdi-eye-settings-outline::before{content:"\F86D"}.mdi-eyedropper::before{content:"\F20A"}.mdi-eyedropper-variant::before{content:"\F20B"}.mdi-face::before{content:"\F643"}.mdi-face-agent::before{content:"\FD4C"}.mdi-face-outline::before{content:"\FB72"}.mdi-face-profile::before{content:"\F644"}.mdi-face-profile-woman::before{content:"\F00A1"}.mdi-face-recognition::before{content:"\FC57"}.mdi-face-woman::before{content:"\F00A2"}.mdi-face-woman-outline::before{content:"\F00A3"}.mdi-facebook::before{content:"\F20C"}.mdi-facebook-box::before{content:"\F20D"}.mdi-facebook-messenger::before{content:"\F20E"}.mdi-facebook-workplace::before{content:"\FB16"}.mdi-factory::before{content:"\F20F"}.mdi-fan::before{content:"\F210"}.mdi-fan-off::before{content:"\F81C"}.mdi-fast-forward::before{content:"\F211"}.mdi-fast-forward-10::before{content:"\FD4D"}.mdi-fast-forward-30::before{content:"\FCE2"}.mdi-fast-forward-5::before{content:"\F0223"}.mdi-fast-forward-outline::before{content:"\F6D1"}.mdi-fax::before{content:"\F212"}.mdi-feather::before{content:"\F6D2"}.mdi-feature-search::before{content:"\FA48"}.mdi-feature-search-outline::before{content:"\FA49"}.mdi-fedora::before{content:"\F8DA"}.mdi-ferris-wheel::before{content:"\FEC1"}.mdi-ferry::before{content:"\F213"}.mdi-file::before{content:"\F214"}.mdi-file-account::before{content:"\F73A"}.mdi-file-account-outline::before{content:"\F004A"}.mdi-file-alert::before{content:"\FA4A"}.mdi-file-alert-outline::before{content:"\FA4B"}.mdi-file-cabinet::before{content:"\FAB5"}.mdi-file-cad::before{content:"\FF08"}.mdi-file-cad-box::before{content:"\FF09"}.mdi-file-cancel::before{content:"\FDA2"}.mdi-file-cancel-outline::before{content:"\FDA3"}.mdi-file-certificate::before{content:"\F01B1"}.mdi-file-certificate-outline::before{content:"\F01B2"}.mdi-file-chart::before{content:"\F215"}.mdi-file-chart-outline::before{content:"\F004B"}.mdi-file-check::before{content:"\F216"}.mdi-file-check-outline::before{content:"\FE7B"}.mdi-file-clock::before{content:"\F030C"}.mdi-file-clock-outline::before{content:"\F030D"}.mdi-file-cloud::before{content:"\F217"}.mdi-file-cloud-outline::before{content:"\F004C"}.mdi-file-code::before{content:"\F22E"}.mdi-file-code-outline::before{content:"\F004D"}.mdi-file-compare::before{content:"\F8A9"}.mdi-file-delimited::before{content:"\F218"}.mdi-file-delimited-outline::before{content:"\FEC2"}.mdi-file-document::before{content:"\F219"}.mdi-file-document-box::before{content:"\F21A"}.mdi-file-document-box-check::before{content:"\FEC3"}.mdi-file-document-box-check-outline::before{content:"\FEC4"}.mdi-file-document-box-minus::before{content:"\FEC5"}.mdi-file-document-box-minus-outline::before{content:"\FEC6"}.mdi-file-document-box-multiple::before{content:"\FAB6"}.mdi-file-document-box-multiple-outline::before{content:"\FAB7"}.mdi-file-document-box-outline::before{content:"\F9EC"}.mdi-file-document-box-plus::before{content:"\FEC7"}.mdi-file-document-box-plus-outline::before{content:"\FEC8"}.mdi-file-document-box-remove::before{content:"\FEC9"}.mdi-file-document-box-remove-outline::before{content:"\FECA"}.mdi-file-document-box-search::before{content:"\FECB"}.mdi-file-document-box-search-outline::before{content:"\FECC"}.mdi-file-document-edit::before{content:"\FDA4"}.mdi-file-document-edit-outline::before{content:"\FDA5"}.mdi-file-document-outline::before{content:"\F9ED"}.mdi-file-download::before{content:"\F964"}.mdi-file-download-outline::before{content:"\F965"}.mdi-file-edit::before{content:"\F0212"}.mdi-file-edit-outline::before{content:"\F0213"}.mdi-file-excel::before{content:"\F21B"}.mdi-file-excel-box::before{content:"\F21C"}.mdi-file-excel-box-outline::before{content:"\F004E"}.mdi-file-excel-outline::before{content:"\F004F"}.mdi-file-export::before{content:"\F21D"}.mdi-file-export-outline::before{content:"\F0050"}.mdi-file-eye::before{content:"\FDA6"}.mdi-file-eye-outline::before{content:"\FDA7"}.mdi-file-find::before{content:"\F21E"}.mdi-file-find-outline::before{content:"\FB73"}.mdi-file-hidden::before{content:"\F613"}.mdi-file-image::before{content:"\F21F"}.mdi-file-image-outline::before{content:"\FECD"}.mdi-file-import::before{content:"\F220"}.mdi-file-import-outline::before{content:"\F0051"}.mdi-file-key::before{content:"\F01AF"}.mdi-file-key-outline::before{content:"\F01B0"}.mdi-file-link::before{content:"\F01A2"}.mdi-file-link-outline::before{content:"\F01A3"}.mdi-file-lock::before{content:"\F221"}.mdi-file-lock-outline::before{content:"\F0052"}.mdi-file-move::before{content:"\FAB8"}.mdi-file-move-outline::before{content:"\F0053"}.mdi-file-multiple::before{content:"\F222"}.mdi-file-multiple-outline::before{content:"\F0054"}.mdi-file-music::before{content:"\F223"}.mdi-file-music-outline::before{content:"\FE7C"}.mdi-file-outline::before{content:"\F224"}.mdi-file-pdf::before{content:"\F225"}.mdi-file-pdf-box::before{content:"\F226"}.mdi-file-pdf-box-outline::before{content:"\FFD3"}.mdi-file-pdf-outline::before{content:"\FE7D"}.mdi-file-percent::before{content:"\F81D"}.mdi-file-percent-outline::before{content:"\F0055"}.mdi-file-phone::before{content:"\F01A4"}.mdi-file-phone-outline::before{content:"\F01A5"}.mdi-file-plus::before{content:"\F751"}.mdi-file-plus-outline::before{content:"\FF0A"}.mdi-file-powerpoint::before{content:"\F227"}.mdi-file-powerpoint-box::before{content:"\F228"}.mdi-file-powerpoint-box-outline::before{content:"\F0056"}.mdi-file-powerpoint-outline::before{content:"\F0057"}.mdi-file-presentation-box::before{content:"\F229"}.mdi-file-question::before{content:"\F86E"}.mdi-file-question-outline::before{content:"\F0058"}.mdi-file-remove::before{content:"\FB74"}.mdi-file-remove-outline::before{content:"\F0059"}.mdi-file-replace::before{content:"\FB17"}.mdi-file-replace-outline::before{content:"\FB18"}.mdi-file-restore::before{content:"\F670"}.mdi-file-restore-outline::before{content:"\F005A"}.mdi-file-search::before{content:"\FC58"}.mdi-file-search-outline::before{content:"\FC59"}.mdi-file-send::before{content:"\F22A"}.mdi-file-send-outline::before{content:"\F005B"}.mdi-file-settings::before{content:"\F00A4"}.mdi-file-settings-outline::before{content:"\F00A5"}.mdi-file-settings-variant::before{content:"\F00A6"}.mdi-file-settings-variant-outline::before{content:"\F00A7"}.mdi-file-star::before{content:"\F005C"}.mdi-file-star-outline::before{content:"\F005D"}.mdi-file-swap::before{content:"\FFD4"}.mdi-file-swap-outline::before{content:"\FFD5"}.mdi-file-sync::before{content:"\F0241"}.mdi-file-sync-outline::before{content:"\F0242"}.mdi-file-table::before{content:"\FC5A"}.mdi-file-table-box::before{content:"\F010C"}.mdi-file-table-box-multiple::before{content:"\F010D"}.mdi-file-table-box-multiple-outline::before{content:"\F010E"}.mdi-file-table-box-outline::before{content:"\F010F"}.mdi-file-table-outline::before{content:"\FC5B"}.mdi-file-tree::before{content:"\F645"}.mdi-file-undo::before{content:"\F8DB"}.mdi-file-undo-outline::before{content:"\F005E"}.mdi-file-upload::before{content:"\FA4C"}.mdi-file-upload-outline::before{content:"\FA4D"}.mdi-file-video::before{content:"\F22B"}.mdi-file-video-outline::before{content:"\FE10"}.mdi-file-word::before{content:"\F22C"}.mdi-file-word-box::before{content:"\F22D"}.mdi-file-word-box-outline::before{content:"\F005F"}.mdi-file-word-outline::before{content:"\F0060"}.mdi-film::before{content:"\F22F"}.mdi-filmstrip::before{content:"\F230"}.mdi-filmstrip-off::before{content:"\F231"}.mdi-filter::before{content:"\F232"}.mdi-filter-menu::before{content:"\F0110"}.mdi-filter-menu-outline::before{content:"\F0111"}.mdi-filter-minus::before{content:"\FF0B"}.mdi-filter-minus-outline::before{content:"\FF0C"}.mdi-filter-outline::before{content:"\F233"}.mdi-filter-plus::before{content:"\FF0D"}.mdi-filter-plus-outline::before{content:"\FF0E"}.mdi-filter-remove::before{content:"\F234"}.mdi-filter-remove-outline::before{content:"\F235"}.mdi-filter-variant::before{content:"\F236"}.mdi-filter-variant-minus::before{content:"\F013D"}.mdi-filter-variant-plus::before{content:"\F013E"}.mdi-filter-variant-remove::before{content:"\F0061"}.mdi-finance::before{content:"\F81E"}.mdi-find-replace::before{content:"\F6D3"}.mdi-fingerprint::before{content:"\F237"}.mdi-fingerprint-off::before{content:"\FECE"}.mdi-fire::before{content:"\F238"}.mdi-fire-extinguisher::before{content:"\FF0F"}.mdi-fire-hydrant::before{content:"\F0162"}.mdi-fire-hydrant-alert::before{content:"\F0163"}.mdi-fire-hydrant-off::before{content:"\F0164"}.mdi-fire-truck::before{content:"\F8AA"}.mdi-firebase::before{content:"\F966"}.mdi-firefox::before{content:"\F239"}.mdi-fireplace::before{content:"\FE11"}.mdi-fireplace-off::before{content:"\FE12"}.mdi-firework::before{content:"\FE13"}.mdi-fish::before{content:"\F23A"}.mdi-fishbowl::before{content:"\FF10"}.mdi-fishbowl-outline::before{content:"\FF11"}.mdi-fit-to-page::before{content:"\FF12"}.mdi-fit-to-page-outline::before{content:"\FF13"}.mdi-flag::before{content:"\F23B"}.mdi-flag-checkered::before{content:"\F23C"}.mdi-flag-minus::before{content:"\FB75"}.mdi-flag-minus-outline::before{content:"\F00DD"}.mdi-flag-outline::before{content:"\F23D"}.mdi-flag-plus::before{content:"\FB76"}.mdi-flag-plus-outline::before{content:"\F00DE"}.mdi-flag-remove::before{content:"\FB77"}.mdi-flag-remove-outline::before{content:"\F00DF"}.mdi-flag-triangle::before{content:"\F23F"}.mdi-flag-variant::before{content:"\F240"}.mdi-flag-variant-outline::before{content:"\F23E"}.mdi-flare::before{content:"\FD4E"}.mdi-flash::before{content:"\F241"}.mdi-flash-alert::before{content:"\FF14"}.mdi-flash-alert-outline::before{content:"\FF15"}.mdi-flash-auto::before{content:"\F242"}.mdi-flash-circle::before{content:"\F81F"}.mdi-flash-off::before{content:"\F243"}.mdi-flash-outline::before{content:"\F6D4"}.mdi-flash-red-eye::before{content:"\F67A"}.mdi-flashlight::before{content:"\F244"}.mdi-flashlight-off::before{content:"\F245"}.mdi-flask::before{content:"\F093"}.mdi-flask-empty::before{content:"\F094"}.mdi-flask-empty-minus::before{content:"\F0265"}.mdi-flask-empty-minus-outline::before{content:"\F0266"}.mdi-flask-empty-outline::before{content:"\F095"}.mdi-flask-empty-plus::before{content:"\F0267"}.mdi-flask-empty-plus-outline::before{content:"\F0268"}.mdi-flask-empty-remove::before{content:"\F0269"}.mdi-flask-empty-remove-outline::before{content:"\F026A"}.mdi-flask-minus::before{content:"\F026B"}.mdi-flask-minus-outline::before{content:"\F026C"}.mdi-flask-outline::before{content:"\F096"}.mdi-flask-plus::before{content:"\F026D"}.mdi-flask-plus-outline::before{content:"\F026E"}.mdi-flask-remove::before{content:"\F026F"}.mdi-flask-remove-outline::before{content:"\F0270"}.mdi-flask-round-bottom::before{content:"\F0276"}.mdi-flask-round-bottom-empty::before{content:"\F0277"}.mdi-flask-round-bottom-empty-outline::before{content:"\F0278"}.mdi-flask-round-bottom-outline::before{content:"\F0279"}.mdi-flattr::before{content:"\F246"}.mdi-fleur-de-lis::before{content:"\F032E"}.mdi-flickr::before{content:"\FCE3"}.mdi-flip-horizontal::before{content:"\F0112"}.mdi-flip-to-back::before{content:"\F247"}.mdi-flip-to-front::before{content:"\F248"}.mdi-flip-vertical::before{content:"\F0113"}.mdi-floor-lamp::before{content:"\F8DC"}.mdi-floor-lamp-dual::before{content:"\F0062"}.mdi-floor-lamp-variant::before{content:"\F0063"}.mdi-floor-plan::before{content:"\F820"}.mdi-floppy::before{content:"\F249"}.mdi-floppy-variant::before{content:"\F9EE"}.mdi-flower::before{content:"\F24A"}.mdi-flower-outline::before{content:"\F9EF"}.mdi-flower-poppy::before{content:"\FCE4"}.mdi-flower-tulip::before{content:"\F9F0"}.mdi-flower-tulip-outline::before{content:"\F9F1"}.mdi-focus-auto::before{content:"\FF6B"}.mdi-focus-field::before{content:"\FF6C"}.mdi-focus-field-horizontal::before{content:"\FF6D"}.mdi-focus-field-vertical::before{content:"\FF6E"}.mdi-folder::before{content:"\F24B"}.mdi-folder-account::before{content:"\F24C"}.mdi-folder-account-outline::before{content:"\FB78"}.mdi-folder-alert::before{content:"\FDA8"}.mdi-folder-alert-outline::before{content:"\FDA9"}.mdi-folder-clock::before{content:"\FAB9"}.mdi-folder-clock-outline::before{content:"\FABA"}.mdi-folder-download::before{content:"\F24D"}.mdi-folder-download-outline::before{content:"\F0114"}.mdi-folder-edit::before{content:"\F8DD"}.mdi-folder-edit-outline::before{content:"\FDAA"}.mdi-folder-google-drive::before{content:"\F24E"}.mdi-folder-heart::before{content:"\F0115"}.mdi-folder-heart-outline::before{content:"\F0116"}.mdi-folder-home::before{content:"\F00E0"}.mdi-folder-home-outline::before{content:"\F00E1"}.mdi-folder-image::before{content:"\F24F"}.mdi-folder-information::before{content:"\F00E2"}.mdi-folder-information-outline::before{content:"\F00E3"}.mdi-folder-key::before{content:"\F8AB"}.mdi-folder-key-network::before{content:"\F8AC"}.mdi-folder-key-network-outline::before{content:"\FC5C"}.mdi-folder-key-outline::before{content:"\F0117"}.mdi-folder-lock::before{content:"\F250"}.mdi-folder-lock-open::before{content:"\F251"}.mdi-folder-marker::before{content:"\F0298"}.mdi-folder-marker-outline::before{content:"\F0299"}.mdi-folder-move::before{content:"\F252"}.mdi-folder-move-outline::before{content:"\F0271"}.mdi-folder-multiple::before{content:"\F253"}.mdi-folder-multiple-image::before{content:"\F254"}.mdi-folder-multiple-outline::before{content:"\F255"}.mdi-folder-music::before{content:"\F0384"}.mdi-folder-music-outline::before{content:"\F0385"}.mdi-folder-network::before{content:"\F86F"}.mdi-folder-network-outline::before{content:"\FC5D"}.mdi-folder-open::before{content:"\F76F"}.mdi-folder-open-outline::before{content:"\FDAB"}.mdi-folder-outline::before{content:"\F256"}.mdi-folder-plus::before{content:"\F257"}.mdi-folder-plus-outline::before{content:"\FB79"}.mdi-folder-pound::before{content:"\FCE5"}.mdi-folder-pound-outline::before{content:"\FCE6"}.mdi-folder-remove::before{content:"\F258"}.mdi-folder-remove-outline::before{content:"\FB7A"}.mdi-folder-search::before{content:"\F967"}.mdi-folder-search-outline::before{content:"\F968"}.mdi-folder-settings::before{content:"\F00A8"}.mdi-folder-settings-outline::before{content:"\F00A9"}.mdi-folder-settings-variant::before{content:"\F00AA"}.mdi-folder-settings-variant-outline::before{content:"\F00AB"}.mdi-folder-star::before{content:"\F69C"}.mdi-folder-star-outline::before{content:"\FB7B"}.mdi-folder-swap::before{content:"\FFD6"}.mdi-folder-swap-outline::before{content:"\FFD7"}.mdi-folder-sync::before{content:"\FCE7"}.mdi-folder-sync-outline::before{content:"\FCE8"}.mdi-folder-table::before{content:"\F030E"}.mdi-folder-table-outline::before{content:"\F030F"}.mdi-folder-text::before{content:"\FC5E"}.mdi-folder-text-outline::before{content:"\FC5F"}.mdi-folder-upload::before{content:"\F259"}.mdi-folder-upload-outline::before{content:"\F0118"}.mdi-folder-zip::before{content:"\F6EA"}.mdi-folder-zip-outline::before{content:"\F7B8"}.mdi-font-awesome::before{content:"\F03A"}.mdi-food::before{content:"\F25A"}.mdi-food-apple::before{content:"\F25B"}.mdi-food-apple-outline::before{content:"\FC60"}.mdi-food-croissant::before{content:"\F7C7"}.mdi-food-fork-drink::before{content:"\F5F2"}.mdi-food-off::before{content:"\F5F3"}.mdi-food-variant::before{content:"\F25C"}.mdi-foot-print::before{content:"\FF6F"}.mdi-football::before{content:"\F25D"}.mdi-football-australian::before{content:"\F25E"}.mdi-football-helmet::before{content:"\F25F"}.mdi-forklift::before{content:"\F7C8"}.mdi-format-align-bottom::before{content:"\F752"}.mdi-format-align-center::before{content:"\F260"}.mdi-format-align-justify::before{content:"\F261"}.mdi-format-align-left::before{content:"\F262"}.mdi-format-align-middle::before{content:"\F753"}.mdi-format-align-right::before{content:"\F263"}.mdi-format-align-top::before{content:"\F754"}.mdi-format-annotation-minus::before{content:"\FABB"}.mdi-format-annotation-plus::before{content:"\F646"}.mdi-format-bold::before{content:"\F264"}.mdi-format-clear::before{content:"\F265"}.mdi-format-color-fill::before{content:"\F266"}.mdi-format-color-highlight::before{content:"\FE14"}.mdi-format-color-marker-cancel::before{content:"\F033E"}.mdi-format-color-text::before{content:"\F69D"}.mdi-format-columns::before{content:"\F8DE"}.mdi-format-float-center::before{content:"\F267"}.mdi-format-float-left::before{content:"\F268"}.mdi-format-float-none::before{content:"\F269"}.mdi-format-float-right::before{content:"\F26A"}.mdi-format-font::before{content:"\F6D5"}.mdi-format-font-size-decrease::before{content:"\F9F2"}.mdi-format-font-size-increase::before{content:"\F9F3"}.mdi-format-header-1::before{content:"\F26B"}.mdi-format-header-2::before{content:"\F26C"}.mdi-format-header-3::before{content:"\F26D"}.mdi-format-header-4::before{content:"\F26E"}.mdi-format-header-5::before{content:"\F26F"}.mdi-format-header-6::before{content:"\F270"}.mdi-format-header-decrease::before{content:"\F271"}.mdi-format-header-equal::before{content:"\F272"}.mdi-format-header-increase::before{content:"\F273"}.mdi-format-header-pound::before{content:"\F274"}.mdi-format-horizontal-align-center::before{content:"\F61E"}.mdi-format-horizontal-align-left::before{content:"\F61F"}.mdi-format-horizontal-align-right::before{content:"\F620"}.mdi-format-indent-decrease::before{content:"\F275"}.mdi-format-indent-increase::before{content:"\F276"}.mdi-format-italic::before{content:"\F277"}.mdi-format-letter-case::before{content:"\FB19"}.mdi-format-letter-case-lower::before{content:"\FB1A"}.mdi-format-letter-case-upper::before{content:"\FB1B"}.mdi-format-letter-ends-with::before{content:"\FFD8"}.mdi-format-letter-matches::before{content:"\FFD9"}.mdi-format-letter-starts-with::before{content:"\FFDA"}.mdi-format-line-spacing::before{content:"\F278"}.mdi-format-line-style::before{content:"\F5C8"}.mdi-format-line-weight::before{content:"\F5C9"}.mdi-format-list-bulleted::before{content:"\F279"}.mdi-format-list-bulleted-square::before{content:"\FDAC"}.mdi-format-list-bulleted-triangle::before{content:"\FECF"}.mdi-format-list-bulleted-type::before{content:"\F27A"}.mdi-format-list-checkbox::before{content:"\F969"}.mdi-format-list-checks::before{content:"\F755"}.mdi-format-list-numbered::before{content:"\F27B"}.mdi-format-list-numbered-rtl::before{content:"\FCE9"}.mdi-format-list-text::before{content:"\F029A"}.mdi-format-overline::before{content:"\FED0"}.mdi-format-page-break::before{content:"\F6D6"}.mdi-format-paint::before{content:"\F27C"}.mdi-format-paragraph::before{content:"\F27D"}.mdi-format-pilcrow::before{content:"\F6D7"}.mdi-format-quote-close::before{content:"\F27E"}.mdi-format-quote-close-outline::before{content:"\F01D3"}.mdi-format-quote-open::before{content:"\F756"}.mdi-format-quote-open-outline::before{content:"\F01D2"}.mdi-format-rotate-90::before{content:"\F6A9"}.mdi-format-section::before{content:"\F69E"}.mdi-format-size::before{content:"\F27F"}.mdi-format-strikethrough::before{content:"\F280"}.mdi-format-strikethrough-variant::before{content:"\F281"}.mdi-format-subscript::before{content:"\F282"}.mdi-format-superscript::before{content:"\F283"}.mdi-format-text::before{content:"\F284"}.mdi-format-text-rotation-angle-down::before{content:"\FFDB"}.mdi-format-text-rotation-angle-up::before{content:"\FFDC"}.mdi-format-text-rotation-down::before{content:"\FD4F"}.mdi-format-text-rotation-down-vertical::before{content:"\FFDD"}.mdi-format-text-rotation-none::before{content:"\FD50"}.mdi-format-text-rotation-up::before{content:"\FFDE"}.mdi-format-text-rotation-vertical::before{content:"\FFDF"}.mdi-format-text-variant::before{content:"\FE15"}.mdi-format-text-wrapping-clip::before{content:"\FCEA"}.mdi-format-text-wrapping-overflow::before{content:"\FCEB"}.mdi-format-text-wrapping-wrap::before{content:"\FCEC"}.mdi-format-textbox::before{content:"\FCED"}.mdi-format-textdirection-l-to-r::before{content:"\F285"}.mdi-format-textdirection-r-to-l::before{content:"\F286"}.mdi-format-title::before{content:"\F5F4"}.mdi-format-underline::before{content:"\F287"}.mdi-format-vertical-align-bottom::before{content:"\F621"}.mdi-format-vertical-align-center::before{content:"\F622"}.mdi-format-vertical-align-top::before{content:"\F623"}.mdi-format-wrap-inline::before{content:"\F288"}.mdi-format-wrap-square::before{content:"\F289"}.mdi-format-wrap-tight::before{content:"\F28A"}.mdi-format-wrap-top-bottom::before{content:"\F28B"}.mdi-forum::before{content:"\F28C"}.mdi-forum-outline::before{content:"\F821"}.mdi-forward::before{content:"\F28D"}.mdi-forwardburger::before{content:"\FD51"}.mdi-fountain::before{content:"\F96A"}.mdi-fountain-pen::before{content:"\FCEE"}.mdi-fountain-pen-tip::before{content:"\FCEF"}.mdi-foursquare::before{content:"\F28E"}.mdi-freebsd::before{content:"\F8DF"}.mdi-frequently-asked-questions::before{content:"\FED1"}.mdi-fridge::before{content:"\F290"}.mdi-fridge-alert::before{content:"\F01DC"}.mdi-fridge-alert-outline::before{content:"\F01DD"}.mdi-fridge-bottom::before{content:"\F292"}.mdi-fridge-off::before{content:"\F01DA"}.mdi-fridge-off-outline::before{content:"\F01DB"}.mdi-fridge-outline::before{content:"\F28F"}.mdi-fridge-top::before{content:"\F291"}.mdi-fruit-cherries::before{content:"\F0064"}.mdi-fruit-citrus::before{content:"\F0065"}.mdi-fruit-grapes::before{content:"\F0066"}.mdi-fruit-grapes-outline::before{content:"\F0067"}.mdi-fruit-pineapple::before{content:"\F0068"}.mdi-fruit-watermelon::before{content:"\F0069"}.mdi-fuel::before{content:"\F7C9"}.mdi-fullscreen::before{content:"\F293"}.mdi-fullscreen-exit::before{content:"\F294"}.mdi-function::before{content:"\F295"}.mdi-function-variant::before{content:"\F870"}.mdi-furigana-horizontal::before{content:"\F00AC"}.mdi-furigana-vertical::before{content:"\F00AD"}.mdi-fuse::before{content:"\FC61"}.mdi-fuse-blade::before{content:"\FC62"}.mdi-gamepad::before{content:"\F296"}.mdi-gamepad-circle::before{content:"\FE16"}.mdi-gamepad-circle-down::before{content:"\FE17"}.mdi-gamepad-circle-left::before{content:"\FE18"}.mdi-gamepad-circle-outline::before{content:"\FE19"}.mdi-gamepad-circle-right::before{content:"\FE1A"}.mdi-gamepad-circle-up::before{content:"\FE1B"}.mdi-gamepad-down::before{content:"\FE1C"}.mdi-gamepad-left::before{content:"\FE1D"}.mdi-gamepad-right::before{content:"\FE1E"}.mdi-gamepad-round::before{content:"\FE1F"}.mdi-gamepad-round-down::before{content:"\FE7E"}.mdi-gamepad-round-left::before{content:"\FE7F"}.mdi-gamepad-round-outline::before{content:"\FE80"}.mdi-gamepad-round-right::before{content:"\FE81"}.mdi-gamepad-round-up::before{content:"\FE82"}.mdi-gamepad-square::before{content:"\FED2"}.mdi-gamepad-square-outline::before{content:"\FED3"}.mdi-gamepad-up::before{content:"\FE83"}.mdi-gamepad-variant::before{content:"\F297"}.mdi-gamepad-variant-outline::before{content:"\FED4"}.mdi-gamma::before{content:"\F0119"}.mdi-gantry-crane::before{content:"\FDAD"}.mdi-garage::before{content:"\F6D8"}.mdi-garage-alert::before{content:"\F871"}.mdi-garage-alert-variant::before{content:"\F0300"}.mdi-garage-open::before{content:"\F6D9"}.mdi-garage-open-variant::before{content:"\F02FF"}.mdi-garage-variant::before{content:"\F02FE"}.mdi-gas-cylinder::before{content:"\F647"}.mdi-gas-station::before{content:"\F298"}.mdi-gas-station-outline::before{content:"\FED5"}.mdi-gate::before{content:"\F299"}.mdi-gate-and::before{content:"\F8E0"}.mdi-gate-arrow-right::before{content:"\F0194"}.mdi-gate-nand::before{content:"\F8E1"}.mdi-gate-nor::before{content:"\F8E2"}.mdi-gate-not::before{content:"\F8E3"}.mdi-gate-open::before{content:"\F0195"}.mdi-gate-or::before{content:"\F8E4"}.mdi-gate-xnor::before{content:"\F8E5"}.mdi-gate-xor::before{content:"\F8E6"}.mdi-gatsby::before{content:"\FE84"}.mdi-gauge::before{content:"\F29A"}.mdi-gauge-empty::before{content:"\F872"}.mdi-gauge-full::before{content:"\F873"}.mdi-gauge-low::before{content:"\F874"}.mdi-gavel::before{content:"\F29B"}.mdi-gender-female::before{content:"\F29C"}.mdi-gender-male::before{content:"\F29D"}.mdi-gender-male-female::before{content:"\F29E"}.mdi-gender-male-female-variant::before{content:"\F016A"}.mdi-gender-non-binary::before{content:"\F016B"}.mdi-gender-transgender::before{content:"\F29F"}.mdi-gentoo::before{content:"\F8E7"}.mdi-gesture::before{content:"\F7CA"}.mdi-gesture-double-tap::before{content:"\F73B"}.mdi-gesture-pinch::before{content:"\FABC"}.mdi-gesture-spread::before{content:"\FABD"}.mdi-gesture-swipe::before{content:"\FD52"}.mdi-gesture-swipe-down::before{content:"\F73C"}.mdi-gesture-swipe-horizontal::before{content:"\FABE"}.mdi-gesture-swipe-left::before{content:"\F73D"}.mdi-gesture-swipe-right::before{content:"\F73E"}.mdi-gesture-swipe-up::before{content:"\F73F"}.mdi-gesture-swipe-vertical::before{content:"\FABF"}.mdi-gesture-tap::before{content:"\F740"}.mdi-gesture-tap-box::before{content:"\F02D4"}.mdi-gesture-tap-button::before{content:"\F02D3"}.mdi-gesture-tap-hold::before{content:"\FD53"}.mdi-gesture-two-double-tap::before{content:"\F741"}.mdi-gesture-two-tap::before{content:"\F742"}.mdi-ghost::before{content:"\F2A0"}.mdi-ghost-off::before{content:"\F9F4"}.mdi-gif::before{content:"\FD54"}.mdi-gift::before{content:"\FE85"}.mdi-gift-outline::before{content:"\F2A1"}.mdi-git::before{content:"\F2A2"}.mdi-github-box::before{content:"\F2A3"}.mdi-github-circle::before{content:"\F2A4"}.mdi-github-face::before{content:"\F6DA"}.mdi-gitlab::before{content:"\FB7C"}.mdi-glass-cocktail::before{content:"\F356"}.mdi-glass-flute::before{content:"\F2A5"}.mdi-glass-mug::before{content:"\F2A6"}.mdi-glass-mug-variant::before{content:"\F0141"}.mdi-glass-pint-outline::before{content:"\F0338"}.mdi-glass-stange::before{content:"\F2A7"}.mdi-glass-tulip::before{content:"\F2A8"}.mdi-glass-wine::before{content:"\F875"}.mdi-glassdoor::before{content:"\F2A9"}.mdi-glasses::before{content:"\F2AA"}.mdi-globe-light::before{content:"\F0302"}.mdi-globe-model::before{content:"\F8E8"}.mdi-gmail::before{content:"\F2AB"}.mdi-gnome::before{content:"\F2AC"}.mdi-go-kart::before{content:"\FD55"}.mdi-go-kart-track::before{content:"\FD56"}.mdi-gog::before{content:"\FB7D"}.mdi-gold::before{content:"\F027A"}.mdi-golf::before{content:"\F822"}.mdi-golf-cart::before{content:"\F01CF"}.mdi-golf-tee::before{content:"\F00AE"}.mdi-gondola::before{content:"\F685"}.mdi-goodreads::before{content:"\FD57"}.mdi-google::before{content:"\F2AD"}.mdi-google-adwords::before{content:"\FC63"}.mdi-google-analytics::before{content:"\F7CB"}.mdi-google-assistant::before{content:"\F7CC"}.mdi-google-cardboard::before{content:"\F2AE"}.mdi-google-chrome::before{content:"\F2AF"}.mdi-google-circles::before{content:"\F2B0"}.mdi-google-circles-communities::before{content:"\F2B1"}.mdi-google-circles-extended::before{content:"\F2B2"}.mdi-google-circles-group::before{content:"\F2B3"}.mdi-google-classroom::before{content:"\F2C0"}.mdi-google-cloud::before{content:"\F0221"}.mdi-google-controller::before{content:"\F2B4"}.mdi-google-controller-off::before{content:"\F2B5"}.mdi-google-downasaur::before{content:"\F038D"}.mdi-google-drive::before{content:"\F2B6"}.mdi-google-earth::before{content:"\F2B7"}.mdi-google-fit::before{content:"\F96B"}.mdi-google-glass::before{content:"\F2B8"}.mdi-google-hangouts::before{content:"\F2C9"}.mdi-google-home::before{content:"\F823"}.mdi-google-keep::before{content:"\F6DB"}.mdi-google-lens::before{content:"\F9F5"}.mdi-google-maps::before{content:"\F5F5"}.mdi-google-my-business::before{content:"\F006A"}.mdi-google-nearby::before{content:"\F2B9"}.mdi-google-pages::before{content:"\F2BA"}.mdi-google-photos::before{content:"\F6DC"}.mdi-google-physical-web::before{content:"\F2BB"}.mdi-google-play::before{content:"\F2BC"}.mdi-google-plus::before{content:"\F2BD"}.mdi-google-plus-box::before{content:"\F2BE"}.mdi-google-podcast::before{content:"\FED6"}.mdi-google-spreadsheet::before{content:"\F9F6"}.mdi-google-street-view::before{content:"\FC64"}.mdi-google-translate::before{content:"\F2BF"}.mdi-gradient::before{content:"\F69F"}.mdi-grain::before{content:"\FD58"}.mdi-graph::before{content:"\F006B"}.mdi-graph-outline::before{content:"\F006C"}.mdi-graphql::before{content:"\F876"}.mdi-grave-stone::before{content:"\FB7E"}.mdi-grease-pencil::before{content:"\F648"}.mdi-greater-than::before{content:"\F96C"}.mdi-greater-than-or-equal::before{content:"\F96D"}.mdi-grid::before{content:"\F2C1"}.mdi-grid-large::before{content:"\F757"}.mdi-grid-off::before{content:"\F2C2"}.mdi-grill::before{content:"\FE86"}.mdi-grill-outline::before{content:"\F01B5"}.mdi-group::before{content:"\F2C3"}.mdi-guitar-acoustic::before{content:"\F770"}.mdi-guitar-electric::before{content:"\F2C4"}.mdi-guitar-pick::before{content:"\F2C5"}.mdi-guitar-pick-outline::before{content:"\F2C6"}.mdi-guy-fawkes-mask::before{content:"\F824"}.mdi-hackernews::before{content:"\F624"}.mdi-hail::before{content:"\FAC0"}.mdi-hair-dryer::before{content:"\F011A"}.mdi-hair-dryer-outline::before{content:"\F011B"}.mdi-halloween::before{content:"\FB7F"}.mdi-hamburger::before{content:"\F684"}.mdi-hammer::before{content:"\F8E9"}.mdi-hammer-screwdriver::before{content:"\F034D"}.mdi-hammer-wrench::before{content:"\F034E"}.mdi-hand::before{content:"\FA4E"}.mdi-hand-heart::before{content:"\F011C"}.mdi-hand-left::before{content:"\FE87"}.mdi-hand-okay::before{content:"\FA4F"}.mdi-hand-peace::before{content:"\FA50"}.mdi-hand-peace-variant::before{content:"\FA51"}.mdi-hand-pointing-down::before{content:"\FA52"}.mdi-hand-pointing-left::before{content:"\FA53"}.mdi-hand-pointing-right::before{content:"\F2C7"}.mdi-hand-pointing-up::before{content:"\FA54"}.mdi-hand-right::before{content:"\FE88"}.mdi-hand-saw::before{content:"\FE89"}.mdi-handball::before{content:"\FF70"}.mdi-handcuffs::before{content:"\F0169"}.mdi-handshake::before{content:"\F0243"}.mdi-hanger::before{content:"\F2C8"}.mdi-hard-hat::before{content:"\F96E"}.mdi-harddisk::before{content:"\F2CA"}.mdi-harddisk-plus::before{content:"\F006D"}.mdi-harddisk-remove::before{content:"\F006E"}.mdi-hat-fedora::before{content:"\FB80"}.mdi-hazard-lights::before{content:"\FC65"}.mdi-hdr::before{content:"\FD59"}.mdi-hdr-off::before{content:"\FD5A"}.mdi-head::before{content:"\F0389"}.mdi-head-alert::before{content:"\F0363"}.mdi-head-alert-outline::before{content:"\F0364"}.mdi-head-check::before{content:"\F0365"}.mdi-head-check-outline::before{content:"\F0366"}.mdi-head-cog::before{content:"\F0367"}.mdi-head-cog-outline::before{content:"\F0368"}.mdi-head-dots-horizontal::before{content:"\F0369"}.mdi-head-dots-horizontal-outline::before{content:"\F036A"}.mdi-head-flash::before{content:"\F036B"}.mdi-head-flash-outline::before{content:"\F036C"}.mdi-head-heart::before{content:"\F036D"}.mdi-head-heart-outline::before{content:"\F036E"}.mdi-head-lightbulb::before{content:"\F036F"}.mdi-head-lightbulb-outline::before{content:"\F0370"}.mdi-head-minus::before{content:"\F0371"}.mdi-head-minus-outline::before{content:"\F0372"}.mdi-head-outline::before{content:"\F038A"}.mdi-head-plus::before{content:"\F0373"}.mdi-head-plus-outline::before{content:"\F0374"}.mdi-head-question::before{content:"\F0375"}.mdi-head-question-outline::before{content:"\F0376"}.mdi-head-remove::before{content:"\F0377"}.mdi-head-remove-outline::before{content:"\F0378"}.mdi-head-snowflake::before{content:"\F0379"}.mdi-head-snowflake-outline::before{content:"\F037A"}.mdi-head-sync::before{content:"\F037B"}.mdi-head-sync-outline::before{content:"\F037C"}.mdi-headphones::before{content:"\F2CB"}.mdi-headphones-bluetooth::before{content:"\F96F"}.mdi-headphones-box::before{content:"\F2CC"}.mdi-headphones-off::before{content:"\F7CD"}.mdi-headphones-settings::before{content:"\F2CD"}.mdi-headset::before{content:"\F2CE"}.mdi-headset-dock::before{content:"\F2CF"}.mdi-headset-off::before{content:"\F2D0"}.mdi-heart::before{content:"\F2D1"}.mdi-heart-box::before{content:"\F2D2"}.mdi-heart-box-outline::before{content:"\F2D3"}.mdi-heart-broken::before{content:"\F2D4"}.mdi-heart-broken-outline::before{content:"\FCF0"}.mdi-heart-circle::before{content:"\F970"}.mdi-heart-circle-outline::before{content:"\F971"}.mdi-heart-flash::before{content:"\FF16"}.mdi-heart-half::before{content:"\F6DE"}.mdi-heart-half-full::before{content:"\F6DD"}.mdi-heart-half-outline::before{content:"\F6DF"}.mdi-heart-multiple::before{content:"\FA55"}.mdi-heart-multiple-outline::before{content:"\FA56"}.mdi-heart-off::before{content:"\F758"}.mdi-heart-outline::before{content:"\F2D5"}.mdi-heart-pulse::before{content:"\F5F6"}.mdi-helicopter::before{content:"\FAC1"}.mdi-help::before{content:"\F2D6"}.mdi-help-box::before{content:"\F78A"}.mdi-help-circle::before{content:"\F2D7"}.mdi-help-circle-outline::before{content:"\F625"}.mdi-help-network::before{content:"\F6F4"}.mdi-help-network-outline::before{content:"\FC66"}.mdi-help-rhombus::before{content:"\FB81"}.mdi-help-rhombus-outline::before{content:"\FB82"}.mdi-hexadecimal::before{content:"\F02D2"}.mdi-hexagon::before{content:"\F2D8"}.mdi-hexagon-multiple::before{content:"\F6E0"}.mdi-hexagon-multiple-outline::before{content:"\F011D"}.mdi-hexagon-outline::before{content:"\F2D9"}.mdi-hexagon-slice-1::before{content:"\FAC2"}.mdi-hexagon-slice-2::before{content:"\FAC3"}.mdi-hexagon-slice-3::before{content:"\FAC4"}.mdi-hexagon-slice-4::before{content:"\FAC5"}.mdi-hexagon-slice-5::before{content:"\FAC6"}.mdi-hexagon-slice-6::before{content:"\FAC7"}.mdi-hexagram::before{content:"\FAC8"}.mdi-hexagram-outline::before{content:"\FAC9"}.mdi-high-definition::before{content:"\F7CE"}.mdi-high-definition-box::before{content:"\F877"}.mdi-highway::before{content:"\F5F7"}.mdi-hiking::before{content:"\FD5B"}.mdi-hinduism::before{content:"\F972"}.mdi-history::before{content:"\F2DA"}.mdi-hockey-puck::before{content:"\F878"}.mdi-hockey-sticks::before{content:"\F879"}.mdi-hololens::before{content:"\F2DB"}.mdi-home::before{content:"\F2DC"}.mdi-home-account::before{content:"\F825"}.mdi-home-alert::before{content:"\F87A"}.mdi-home-analytics::before{content:"\FED7"}.mdi-home-assistant::before{content:"\F7CF"}.mdi-home-automation::before{content:"\F7D0"}.mdi-home-circle::before{content:"\F7D1"}.mdi-home-circle-outline::before{content:"\F006F"}.mdi-home-city::before{content:"\FCF1"}.mdi-home-city-outline::before{content:"\FCF2"}.mdi-home-currency-usd::before{content:"\F8AE"}.mdi-home-edit::before{content:"\F0184"}.mdi-home-edit-outline::before{content:"\F0185"}.mdi-home-export-outline::before{content:"\FFB8"}.mdi-home-flood::before{content:"\FF17"}.mdi-home-floor-0::before{content:"\FDAE"}.mdi-home-floor-1::before{content:"\FD5C"}.mdi-home-floor-2::before{content:"\FD5D"}.mdi-home-floor-3::before{content:"\FD5E"}.mdi-home-floor-a::before{content:"\FD5F"}.mdi-home-floor-b::before{content:"\FD60"}.mdi-home-floor-g::before{content:"\FD61"}.mdi-home-floor-l::before{content:"\FD62"}.mdi-home-floor-negative-1::before{content:"\FDAF"}.mdi-home-group::before{content:"\FDB0"}.mdi-home-heart::before{content:"\F826"}.mdi-home-import-outline::before{content:"\FFB9"}.mdi-home-lightbulb::before{content:"\F027C"}.mdi-home-lightbulb-outline::before{content:"\F027D"}.mdi-home-lock::before{content:"\F8EA"}.mdi-home-lock-open::before{content:"\F8EB"}.mdi-home-map-marker::before{content:"\F5F8"}.mdi-home-minus::before{content:"\F973"}.mdi-home-modern::before{content:"\F2DD"}.mdi-home-outline::before{content:"\F6A0"}.mdi-home-plus::before{content:"\F974"}.mdi-home-remove::before{content:"\F0272"}.mdi-home-roof::before{content:"\F0156"}.mdi-home-thermometer::before{content:"\FF71"}.mdi-home-thermometer-outline::before{content:"\FF72"}.mdi-home-variant::before{content:"\F2DE"}.mdi-home-variant-outline::before{content:"\FB83"}.mdi-hook::before{content:"\F6E1"}.mdi-hook-off::before{content:"\F6E2"}.mdi-hops::before{content:"\F2DF"}.mdi-horizontal-rotate-clockwise::before{content:"\F011E"}.mdi-horizontal-rotate-counterclockwise::before{content:"\F011F"}.mdi-horseshoe::before{content:"\FA57"}.mdi-hospital::before{content:"\F0017"}.mdi-hospital-box::before{content:"\F2E0"}.mdi-hospital-box-outline::before{content:"\F0018"}.mdi-hospital-building::before{content:"\F2E1"}.mdi-hospital-marker::before{content:"\F2E2"}.mdi-hot-tub::before{content:"\F827"}.mdi-hotel::before{content:"\F2E3"}.mdi-houzz::before{content:"\F2E4"}.mdi-houzz-box::before{content:"\F2E5"}.mdi-hubspot::before{content:"\FCF3"}.mdi-hulu::before{content:"\F828"}.mdi-human::before{content:"\F2E6"}.mdi-human-child::before{content:"\F2E7"}.mdi-human-female::before{content:"\F649"}.mdi-human-female-boy::before{content:"\FA58"}.mdi-human-female-female::before{content:"\FA59"}.mdi-human-female-girl::before{content:"\FA5A"}.mdi-human-greeting::before{content:"\F64A"}.mdi-human-handsdown::before{content:"\F64B"}.mdi-human-handsup::before{content:"\F64C"}.mdi-human-male::before{content:"\F64D"}.mdi-human-male-boy::before{content:"\FA5B"}.mdi-human-male-female::before{content:"\F2E8"}.mdi-human-male-girl::before{content:"\FA5C"}.mdi-human-male-height::before{content:"\FF18"}.mdi-human-male-height-variant::before{content:"\FF19"}.mdi-human-male-male::before{content:"\FA5D"}.mdi-human-pregnant::before{content:"\F5CF"}.mdi-humble-bundle::before{content:"\F743"}.mdi-hvac::before{content:"\F037D"}.mdi-hydraulic-oil-level::before{content:"\F034F"}.mdi-hydraulic-oil-temperature::before{content:"\F0350"}.mdi-hydro-power::before{content:"\F0310"}.mdi-ice-cream::before{content:"\F829"}.mdi-ice-pop::before{content:"\FF1A"}.mdi-id-card::before{content:"\FFE0"}.mdi-identifier::before{content:"\FF1B"}.mdi-ideogram-cjk::before{content:"\F035C"}.mdi-ideogram-cjk-variant::before{content:"\F035D"}.mdi-iframe::before{content:"\FC67"}.mdi-iframe-array::before{content:"\F0120"}.mdi-iframe-array-outline::before{content:"\F0121"}.mdi-iframe-braces::before{content:"\F0122"}.mdi-iframe-braces-outline::before{content:"\F0123"}.mdi-iframe-outline::before{content:"\FC68"}.mdi-iframe-parentheses::before{content:"\F0124"}.mdi-iframe-parentheses-outline::before{content:"\F0125"}.mdi-iframe-variable::before{content:"\F0126"}.mdi-iframe-variable-outline::before{content:"\F0127"}.mdi-image::before{content:"\F2E9"}.mdi-image-album::before{content:"\F2EA"}.mdi-image-area::before{content:"\F2EB"}.mdi-image-area-close::before{content:"\F2EC"}.mdi-image-auto-adjust::before{content:"\FFE1"}.mdi-image-broken::before{content:"\F2ED"}.mdi-image-broken-variant::before{content:"\F2EE"}.mdi-image-edit::before{content:"\F020E"}.mdi-image-edit-outline::before{content:"\F020F"}.mdi-image-filter::before{content:"\F2EF"}.mdi-image-filter-black-white::before{content:"\F2F0"}.mdi-image-filter-center-focus::before{content:"\F2F1"}.mdi-image-filter-center-focus-strong::before{content:"\FF1C"}.mdi-image-filter-center-focus-strong-outline::before{content:"\FF1D"}.mdi-image-filter-center-focus-weak::before{content:"\F2F2"}.mdi-image-filter-drama::before{content:"\F2F3"}.mdi-image-filter-frames::before{content:"\F2F4"}.mdi-image-filter-hdr::before{content:"\F2F5"}.mdi-image-filter-none::before{content:"\F2F6"}.mdi-image-filter-tilt-shift::before{content:"\F2F7"}.mdi-image-filter-vintage::before{content:"\F2F8"}.mdi-image-frame::before{content:"\FE8A"}.mdi-image-move::before{content:"\F9F7"}.mdi-image-multiple::before{content:"\F2F9"}.mdi-image-off::before{content:"\F82A"}.mdi-image-off-outline::before{content:"\F01FC"}.mdi-image-outline::before{content:"\F975"}.mdi-image-plus::before{content:"\F87B"}.mdi-image-search::before{content:"\F976"}.mdi-image-search-outline::before{content:"\F977"}.mdi-image-size-select-actual::before{content:"\FC69"}.mdi-image-size-select-large::before{content:"\FC6A"}.mdi-image-size-select-small::before{content:"\FC6B"}.mdi-import::before{content:"\F2FA"}.mdi-inbox::before{content:"\F686"}.mdi-inbox-arrow-down::before{content:"\F2FB"}.mdi-inbox-arrow-down-outline::before{content:"\F029B"}.mdi-inbox-arrow-up::before{content:"\F3D1"}.mdi-inbox-arrow-up-outline::before{content:"\F029C"}.mdi-inbox-full::before{content:"\F029D"}.mdi-inbox-full-outline::before{content:"\F029E"}.mdi-inbox-multiple::before{content:"\F8AF"}.mdi-inbox-multiple-outline::before{content:"\FB84"}.mdi-inbox-outline::before{content:"\F029F"}.mdi-incognito::before{content:"\F5F9"}.mdi-infinity::before{content:"\F6E3"}.mdi-information::before{content:"\F2FC"}.mdi-information-outline::before{content:"\F2FD"}.mdi-information-variant::before{content:"\F64E"}.mdi-instagram::before{content:"\F2FE"}.mdi-instapaper::before{content:"\F2FF"}.mdi-instrument-triangle::before{content:"\F0070"}.mdi-internet-explorer::before{content:"\F300"}.mdi-invert-colors::before{content:"\F301"}.mdi-invert-colors-off::before{content:"\FE8B"}.mdi-iobroker::before{content:"\F0313"}.mdi-ip::before{content:"\FA5E"}.mdi-ip-network::before{content:"\FA5F"}.mdi-ip-network-outline::before{content:"\FC6C"}.mdi-ipod::before{content:"\FC6D"}.mdi-islam::before{content:"\F978"}.mdi-island::before{content:"\F0071"}.mdi-itunes::before{content:"\F676"}.mdi-iv-bag::before{content:"\F00E4"}.mdi-jabber::before{content:"\FDB1"}.mdi-jeepney::before{content:"\F302"}.mdi-jellyfish::before{content:"\FF1E"}.mdi-jellyfish-outline::before{content:"\FF1F"}.mdi-jira::before{content:"\F303"}.mdi-jquery::before{content:"\F87C"}.mdi-jsfiddle::before{content:"\F304"}.mdi-json::before{content:"\F626"}.mdi-judaism::before{content:"\F979"}.mdi-jump-rope::before{content:"\F032A"}.mdi-kabaddi::before{content:"\FD63"}.mdi-karate::before{content:"\F82B"}.mdi-keg::before{content:"\F305"}.mdi-kettle::before{content:"\F5FA"}.mdi-kettle-alert::before{content:"\F0342"}.mdi-kettle-alert-outline::before{content:"\F0343"}.mdi-kettle-off::before{content:"\F0346"}.mdi-kettle-off-outline::before{content:"\F0347"}.mdi-kettle-outline::before{content:"\FF73"}.mdi-kettle-steam::before{content:"\F0344"}.mdi-kettle-steam-outline::before{content:"\F0345"}.mdi-kettlebell::before{content:"\F032B"}.mdi-key::before{content:"\F306"}.mdi-key-arrow-right::before{content:"\F033D"}.mdi-key-change::before{content:"\F307"}.mdi-key-link::before{content:"\F01CA"}.mdi-key-minus::before{content:"\F308"}.mdi-key-outline::before{content:"\FDB2"}.mdi-key-plus::before{content:"\F309"}.mdi-key-remove::before{content:"\F30A"}.mdi-key-star::before{content:"\F01C9"}.mdi-key-variant::before{content:"\F30B"}.mdi-key-wireless::before{content:"\FFE2"}.mdi-keyboard::before{content:"\F30C"}.mdi-keyboard-backspace::before{content:"\F30D"}.mdi-keyboard-caps::before{content:"\F30E"}.mdi-keyboard-close::before{content:"\F30F"}.mdi-keyboard-esc::before{content:"\F02E2"}.mdi-keyboard-f1::before{content:"\F02D6"}.mdi-keyboard-f10::before{content:"\F02DF"}.mdi-keyboard-f11::before{content:"\F02E0"}.mdi-keyboard-f12::before{content:"\F02E1"}.mdi-keyboard-f2::before{content:"\F02D7"}.mdi-keyboard-f3::before{content:"\F02D8"}.mdi-keyboard-f4::before{content:"\F02D9"}.mdi-keyboard-f5::before{content:"\F02DA"}.mdi-keyboard-f6::before{content:"\F02DB"}.mdi-keyboard-f7::before{content:"\F02DC"}.mdi-keyboard-f8::before{content:"\F02DD"}.mdi-keyboard-f9::before{content:"\F02DE"}.mdi-keyboard-off::before{content:"\F310"}.mdi-keyboard-off-outline::before{content:"\FE8C"}.mdi-keyboard-outline::before{content:"\F97A"}.mdi-keyboard-return::before{content:"\F311"}.mdi-keyboard-settings::before{content:"\F9F8"}.mdi-keyboard-settings-outline::before{content:"\F9F9"}.mdi-keyboard-space::before{content:"\F0072"}.mdi-keyboard-tab::before{content:"\F312"}.mdi-keyboard-variant::before{content:"\F313"}.mdi-khanda::before{content:"\F0128"}.mdi-kickstarter::before{content:"\F744"}.mdi-klingon::before{content:"\F0386"}.mdi-knife::before{content:"\F9FA"}.mdi-knife-military::before{content:"\F9FB"}.mdi-kodi::before{content:"\F314"}.mdi-kotlin::before{content:"\F0244"}.mdi-kubernetes::before{content:"\F0129"}.mdi-label::before{content:"\F315"}.mdi-label-multiple::before{content:"\F03A0"}.mdi-label-multiple-outline::before{content:"\F03A1"}.mdi-label-off::before{content:"\FACA"}.mdi-label-off-outline::before{content:"\FACB"}.mdi-label-outline::before{content:"\F316"}.mdi-label-percent::before{content:"\F0315"}.mdi-label-percent-outline::before{content:"\F0316"}.mdi-label-variant::before{content:"\FACC"}.mdi-label-variant-outline::before{content:"\FACD"}.mdi-ladybug::before{content:"\F82C"}.mdi-lambda::before{content:"\F627"}.mdi-lamp::before{content:"\F6B4"}.mdi-lan::before{content:"\F317"}.mdi-lan-check::before{content:"\F02D5"}.mdi-lan-connect::before{content:"\F318"}.mdi-lan-disconnect::before{content:"\F319"}.mdi-lan-pending::before{content:"\F31A"}.mdi-language-c::before{content:"\F671"}.mdi-language-cpp::before{content:"\F672"}.mdi-language-csharp::before{content:"\F31B"}.mdi-language-css3::before{content:"\F31C"}.mdi-language-fortran::before{content:"\F0245"}.mdi-language-go::before{content:"\F7D2"}.mdi-language-haskell::before{content:"\FC6E"}.mdi-language-html5::before{content:"\F31D"}.mdi-language-java::before{content:"\FB1C"}.mdi-language-javascript::before{content:"\F31E"}.mdi-language-lua::before{content:"\F8B0"}.mdi-language-php::before{content:"\F31F"}.mdi-language-python::before{content:"\F320"}.mdi-language-python-text::before{content:"\F321"}.mdi-language-r::before{content:"\F7D3"}.mdi-language-ruby-on-rails::before{content:"\FACE"}.mdi-language-swift::before{content:"\F6E4"}.mdi-language-typescript::before{content:"\F6E5"}.mdi-laptop::before{content:"\F322"}.mdi-laptop-chromebook::before{content:"\F323"}.mdi-laptop-mac::before{content:"\F324"}.mdi-laptop-off::before{content:"\F6E6"}.mdi-laptop-windows::before{content:"\F325"}.mdi-laravel::before{content:"\FACF"}.mdi-lasso::before{content:"\FF20"}.mdi-lastfm::before{content:"\F326"}.mdi-lastpass::before{content:"\F446"}.mdi-latitude::before{content:"\FF74"}.mdi-launch::before{content:"\F327"}.mdi-lava-lamp::before{content:"\F7D4"}.mdi-layers::before{content:"\F328"}.mdi-layers-minus::before{content:"\FE8D"}.mdi-layers-off::before{content:"\F329"}.mdi-layers-off-outline::before{content:"\F9FC"}.mdi-layers-outline::before{content:"\F9FD"}.mdi-layers-plus::before{content:"\FE30"}.mdi-layers-remove::before{content:"\FE31"}.mdi-layers-search::before{content:"\F0231"}.mdi-layers-search-outline::before{content:"\F0232"}.mdi-layers-triple::before{content:"\FF75"}.mdi-layers-triple-outline::before{content:"\FF76"}.mdi-lead-pencil::before{content:"\F64F"}.mdi-leaf::before{content:"\F32A"}.mdi-leaf-maple::before{content:"\FC6F"}.mdi-leaf-maple-off::before{content:"\F0305"}.mdi-leaf-off::before{content:"\F0304"}.mdi-leak::before{content:"\FDB3"}.mdi-leak-off::before{content:"\FDB4"}.mdi-led-off::before{content:"\F32B"}.mdi-led-on::before{content:"\F32C"}.mdi-led-outline::before{content:"\F32D"}.mdi-led-strip::before{content:"\F7D5"}.mdi-led-strip-variant::before{content:"\F0073"}.mdi-led-variant-off::before{content:"\F32E"}.mdi-led-variant-on::before{content:"\F32F"}.mdi-led-variant-outline::before{content:"\F330"}.mdi-leek::before{content:"\F01A8"}.mdi-less-than::before{content:"\F97B"}.mdi-less-than-or-equal::before{content:"\F97C"}.mdi-library::before{content:"\F331"}.mdi-library-books::before{content:"\F332"}.mdi-library-movie::before{content:"\FCF4"}.mdi-library-music::before{content:"\F333"}.mdi-library-music-outline::before{content:"\FF21"}.mdi-library-shelves::before{content:"\FB85"}.mdi-library-video::before{content:"\FCF5"}.mdi-license::before{content:"\FFE3"}.mdi-lifebuoy::before{content:"\F87D"}.mdi-light-switch::before{content:"\F97D"}.mdi-lightbulb::before{content:"\F335"}.mdi-lightbulb-cfl::before{content:"\F0233"}.mdi-lightbulb-cfl-off::before{content:"\F0234"}.mdi-lightbulb-cfl-spiral::before{content:"\F02A0"}.mdi-lightbulb-cfl-spiral-off::before{content:"\F02EE"}.mdi-lightbulb-group::before{content:"\F027E"}.mdi-lightbulb-group-off::before{content:"\F02F8"}.mdi-lightbulb-group-off-outline::before{content:"\F02F9"}.mdi-lightbulb-group-outline::before{content:"\F027F"}.mdi-lightbulb-multiple::before{content:"\F0280"}.mdi-lightbulb-multiple-off::before{content:"\F02FA"}.mdi-lightbulb-multiple-off-outline::before{content:"\F02FB"}.mdi-lightbulb-multiple-outline::before{content:"\F0281"}.mdi-lightbulb-off::before{content:"\FE32"}.mdi-lightbulb-off-outline::before{content:"\FE33"}.mdi-lightbulb-on::before{content:"\F6E7"}.mdi-lightbulb-on-outline::before{content:"\F6E8"}.mdi-lightbulb-outline::before{content:"\F336"}.mdi-lighthouse::before{content:"\F9FE"}.mdi-lighthouse-on::before{content:"\F9FF"}.mdi-link::before{content:"\F337"}.mdi-link-box::before{content:"\FCF6"}.mdi-link-box-outline::before{content:"\FCF7"}.mdi-link-box-variant::before{content:"\FCF8"}.mdi-link-box-variant-outline::before{content:"\FCF9"}.mdi-link-lock::before{content:"\F00E5"}.mdi-link-off::before{content:"\F338"}.mdi-link-plus::before{content:"\FC70"}.mdi-link-variant::before{content:"\F339"}.mdi-link-variant-minus::before{content:"\F012A"}.mdi-link-variant-off::before{content:"\F33A"}.mdi-link-variant-plus::before{content:"\F012B"}.mdi-link-variant-remove::before{content:"\F012C"}.mdi-linkedin::before{content:"\F33B"}.mdi-linkedin-box::before{content:"\F33C"}.mdi-linux::before{content:"\F33D"}.mdi-linux-mint::before{content:"\F8EC"}.mdi-litecoin::before{content:"\FA60"}.mdi-loading::before{content:"\F771"}.mdi-location-enter::before{content:"\FFE4"}.mdi-location-exit::before{content:"\FFE5"}.mdi-lock::before{content:"\F33E"}.mdi-lock-alert::before{content:"\F8ED"}.mdi-lock-clock::before{content:"\F97E"}.mdi-lock-open::before{content:"\F33F"}.mdi-lock-open-outline::before{content:"\F340"}.mdi-lock-open-variant::before{content:"\FFE6"}.mdi-lock-open-variant-outline::before{content:"\FFE7"}.mdi-lock-outline::before{content:"\F341"}.mdi-lock-pattern::before{content:"\F6E9"}.mdi-lock-plus::before{content:"\F5FB"}.mdi-lock-question::before{content:"\F8EE"}.mdi-lock-reset::before{content:"\F772"}.mdi-lock-smart::before{content:"\F8B1"}.mdi-locker::before{content:"\F7D6"}.mdi-locker-multiple::before{content:"\F7D7"}.mdi-login::before{content:"\F342"}.mdi-login-variant::before{content:"\F5FC"}.mdi-logout::before{content:"\F343"}.mdi-logout-variant::before{content:"\F5FD"}.mdi-longitude::before{content:"\FF77"}.mdi-looks::before{content:"\F344"}.mdi-loupe::before{content:"\F345"}.mdi-lumx::before{content:"\F346"}.mdi-lungs::before{content:"\F00AF"}.mdi-lyft::before{content:"\FB1D"}.mdi-magnet::before{content:"\F347"}.mdi-magnet-on::before{content:"\F348"}.mdi-magnify::before{content:"\F349"}.mdi-magnify-close::before{content:"\F97F"}.mdi-magnify-minus::before{content:"\F34A"}.mdi-magnify-minus-cursor::before{content:"\FA61"}.mdi-magnify-minus-outline::before{content:"\F6EB"}.mdi-magnify-plus::before{content:"\F34B"}.mdi-magnify-plus-cursor::before{content:"\FA62"}.mdi-magnify-plus-outline::before{content:"\F6EC"}.mdi-magnify-remove-cursor::before{content:"\F0237"}.mdi-magnify-remove-outline::before{content:"\F0238"}.mdi-magnify-scan::before{content:"\F02A1"}.mdi-mail::before{content:"\FED8"}.mdi-mail-ru::before{content:"\F34C"}.mdi-mailbox::before{content:"\F6ED"}.mdi-mailbox-open::before{content:"\FD64"}.mdi-mailbox-open-outline::before{content:"\FD65"}.mdi-mailbox-open-up::before{content:"\FD66"}.mdi-mailbox-open-up-outline::before{content:"\FD67"}.mdi-mailbox-outline::before{content:"\FD68"}.mdi-mailbox-up::before{content:"\FD69"}.mdi-mailbox-up-outline::before{content:"\FD6A"}.mdi-map::before{content:"\F34D"}.mdi-map-check::before{content:"\FED9"}.mdi-map-check-outline::before{content:"\FEDA"}.mdi-map-clock::before{content:"\FCFA"}.mdi-map-clock-outline::before{content:"\FCFB"}.mdi-map-legend::before{content:"\FA00"}.mdi-map-marker::before{content:"\F34E"}.mdi-map-marker-alert::before{content:"\FF22"}.mdi-map-marker-alert-outline::before{content:"\FF23"}.mdi-map-marker-check::before{content:"\FC71"}.mdi-map-marker-check-outline::before{content:"\F0326"}.mdi-map-marker-circle::before{content:"\F34F"}.mdi-map-marker-distance::before{content:"\F8EF"}.mdi-map-marker-down::before{content:"\F012D"}.mdi-map-marker-left::before{content:"\F0306"}.mdi-map-marker-left-outline::before{content:"\F0308"}.mdi-map-marker-minus::before{content:"\F650"}.mdi-map-marker-minus-outline::before{content:"\F0324"}.mdi-map-marker-multiple::before{content:"\F350"}.mdi-map-marker-multiple-outline::before{content:"\F02A2"}.mdi-map-marker-off::before{content:"\F351"}.mdi-map-marker-off-outline::before{content:"\F0328"}.mdi-map-marker-outline::before{content:"\F7D8"}.mdi-map-marker-path::before{content:"\FCFC"}.mdi-map-marker-plus::before{content:"\F651"}.mdi-map-marker-plus-outline::before{content:"\F0323"}.mdi-map-marker-question::before{content:"\FF24"}.mdi-map-marker-question-outline::before{content:"\FF25"}.mdi-map-marker-radius::before{content:"\F352"}.mdi-map-marker-radius-outline::before{content:"\F0327"}.mdi-map-marker-remove::before{content:"\FF26"}.mdi-map-marker-remove-outline::before{content:"\F0325"}.mdi-map-marker-remove-variant::before{content:"\FF27"}.mdi-map-marker-right::before{content:"\F0307"}.mdi-map-marker-right-outline::before{content:"\F0309"}.mdi-map-marker-up::before{content:"\F012E"}.mdi-map-minus::before{content:"\F980"}.mdi-map-outline::before{content:"\F981"}.mdi-map-plus::before{content:"\F982"}.mdi-map-search::before{content:"\F983"}.mdi-map-search-outline::before{content:"\F984"}.mdi-mapbox::before{content:"\FB86"}.mdi-margin::before{content:"\F353"}.mdi-markdown::before{content:"\F354"}.mdi-markdown-outline::before{content:"\FF78"}.mdi-marker::before{content:"\F652"}.mdi-marker-cancel::before{content:"\FDB5"}.mdi-marker-check::before{content:"\F355"}.mdi-mastodon::before{content:"\FAD0"}.mdi-mastodon-variant::before{content:"\FAD1"}.mdi-material-design::before{content:"\F985"}.mdi-material-ui::before{content:"\F357"}.mdi-math-compass::before{content:"\F358"}.mdi-math-cos::before{content:"\FC72"}.mdi-math-integral::before{content:"\FFE8"}.mdi-math-integral-box::before{content:"\FFE9"}.mdi-math-log::before{content:"\F00B0"}.mdi-math-norm::before{content:"\FFEA"}.mdi-math-norm-box::before{content:"\FFEB"}.mdi-math-sin::before{content:"\FC73"}.mdi-math-tan::before{content:"\FC74"}.mdi-matrix::before{content:"\F628"}.mdi-medal::before{content:"\F986"}.mdi-medal-outline::before{content:"\F0351"}.mdi-medical-bag::before{content:"\F6EE"}.mdi-meditation::before{content:"\F01A6"}.mdi-medium::before{content:"\F35A"}.mdi-meetup::before{content:"\FAD2"}.mdi-memory::before{content:"\F35B"}.mdi-menu::before{content:"\F35C"}.mdi-menu-down::before{content:"\F35D"}.mdi-menu-down-outline::before{content:"\F6B5"}.mdi-menu-left::before{content:"\F35E"}.mdi-menu-left-outline::before{content:"\FA01"}.mdi-menu-open::before{content:"\FB87"}.mdi-menu-right::before{content:"\F35F"}.mdi-menu-right-outline::before{content:"\FA02"}.mdi-menu-swap::before{content:"\FA63"}.mdi-menu-swap-outline::before{content:"\FA64"}.mdi-menu-up::before{content:"\F360"}.mdi-menu-up-outline::before{content:"\F6B6"}.mdi-merge::before{content:"\FF79"}.mdi-message::before{content:"\F361"}.mdi-message-alert::before{content:"\F362"}.mdi-message-alert-outline::before{content:"\FA03"}.mdi-message-arrow-left::before{content:"\F031D"}.mdi-message-arrow-left-outline::before{content:"\F031E"}.mdi-message-arrow-right::before{content:"\F031F"}.mdi-message-arrow-right-outline::before{content:"\F0320"}.mdi-message-bulleted::before{content:"\F6A1"}.mdi-message-bulleted-off::before{content:"\F6A2"}.mdi-message-draw::before{content:"\F363"}.mdi-message-image::before{content:"\F364"}.mdi-message-image-outline::before{content:"\F0197"}.mdi-message-lock::before{content:"\FFEC"}.mdi-message-lock-outline::before{content:"\F0198"}.mdi-message-minus::before{content:"\F0199"}.mdi-message-minus-outline::before{content:"\F019A"}.mdi-message-outline::before{content:"\F365"}.mdi-message-plus::before{content:"\F653"}.mdi-message-plus-outline::before{content:"\F00E6"}.mdi-message-processing::before{content:"\F366"}.mdi-message-processing-outline::before{content:"\F019B"}.mdi-message-reply::before{content:"\F367"}.mdi-message-reply-text::before{content:"\F368"}.mdi-message-settings::before{content:"\F6EF"}.mdi-message-settings-outline::before{content:"\F019C"}.mdi-message-settings-variant::before{content:"\F6F0"}.mdi-message-settings-variant-outline::before{content:"\F019D"}.mdi-message-text::before{content:"\F369"}.mdi-message-text-clock::before{content:"\F019E"}.mdi-message-text-clock-outline::before{content:"\F019F"}.mdi-message-text-lock::before{content:"\FFED"}.mdi-message-text-lock-outline::before{content:"\F01A0"}.mdi-message-text-outline::before{content:"\F36A"}.mdi-message-video::before{content:"\F36B"}.mdi-meteor::before{content:"\F629"}.mdi-metronome::before{content:"\F7D9"}.mdi-metronome-tick::before{content:"\F7DA"}.mdi-micro-sd::before{content:"\F7DB"}.mdi-microphone::before{content:"\F36C"}.mdi-microphone-minus::before{content:"\F8B2"}.mdi-microphone-off::before{content:"\F36D"}.mdi-microphone-outline::before{content:"\F36E"}.mdi-microphone-plus::before{content:"\F8B3"}.mdi-microphone-settings::before{content:"\F36F"}.mdi-microphone-variant::before{content:"\F370"}.mdi-microphone-variant-off::before{content:"\F371"}.mdi-microscope::before{content:"\F654"}.mdi-microsoft::before{content:"\F372"}.mdi-microsoft-dynamics::before{content:"\F987"}.mdi-microwave::before{content:"\FC75"}.mdi-middleware::before{content:"\FF7A"}.mdi-middleware-outline::before{content:"\FF7B"}.mdi-midi::before{content:"\F8F0"}.mdi-midi-port::before{content:"\F8F1"}.mdi-mine::before{content:"\FDB6"}.mdi-minecraft::before{content:"\F373"}.mdi-mini-sd::before{content:"\FA04"}.mdi-minidisc::before{content:"\FA05"}.mdi-minus::before{content:"\F374"}.mdi-minus-box::before{content:"\F375"}.mdi-minus-box-multiple::before{content:"\F016C"}.mdi-minus-box-multiple-outline::before{content:"\F016D"}.mdi-minus-box-outline::before{content:"\F6F1"}.mdi-minus-circle::before{content:"\F376"}.mdi-minus-circle-outline::before{content:"\F377"}.mdi-minus-network::before{content:"\F378"}.mdi-minus-network-outline::before{content:"\FC76"}.mdi-mirror::before{content:"\F0228"}.mdi-mixcloud::before{content:"\F62A"}.mdi-mixed-martial-arts::before{content:"\FD6B"}.mdi-mixed-reality::before{content:"\F87E"}.mdi-mixer::before{content:"\F7DC"}.mdi-molecule::before{content:"\FB88"}.mdi-monitor::before{content:"\F379"}.mdi-monitor-cellphone::before{content:"\F988"}.mdi-monitor-cellphone-star::before{content:"\F989"}.mdi-monitor-clean::before{content:"\F012F"}.mdi-monitor-dashboard::before{content:"\FA06"}.mdi-monitor-edit::before{content:"\F02F1"}.mdi-monitor-lock::before{content:"\FDB7"}.mdi-monitor-multiple::before{content:"\F37A"}.mdi-monitor-off::before{content:"\FD6C"}.mdi-monitor-screenshot::before{content:"\FE34"}.mdi-monitor-speaker::before{content:"\FF7C"}.mdi-monitor-speaker-off::before{content:"\FF7D"}.mdi-monitor-star::before{content:"\FDB8"}.mdi-moon-first-quarter::before{content:"\FF7E"}.mdi-moon-full::before{content:"\FF7F"}.mdi-moon-last-quarter::before{content:"\FF80"}.mdi-moon-new::before{content:"\FF81"}.mdi-moon-waning-crescent::before{content:"\FF82"}.mdi-moon-waning-gibbous::before{content:"\FF83"}.mdi-moon-waxing-crescent::before{content:"\FF84"}.mdi-moon-waxing-gibbous::before{content:"\FF85"}.mdi-moped::before{content:"\F00B1"}.mdi-more::before{content:"\F37B"}.mdi-mother-heart::before{content:"\F033F"}.mdi-mother-nurse::before{content:"\FCFD"}.mdi-motion-sensor::before{content:"\FD6D"}.mdi-motorbike::before{content:"\F37C"}.mdi-mouse::before{content:"\F37D"}.mdi-mouse-bluetooth::before{content:"\F98A"}.mdi-mouse-off::before{content:"\F37E"}.mdi-mouse-variant::before{content:"\F37F"}.mdi-mouse-variant-off::before{content:"\F380"}.mdi-move-resize::before{content:"\F655"}.mdi-move-resize-variant::before{content:"\F656"}.mdi-movie::before{content:"\F381"}.mdi-movie-edit::before{content:"\F014D"}.mdi-movie-edit-outline::before{content:"\F014E"}.mdi-movie-filter::before{content:"\F014F"}.mdi-movie-filter-outline::before{content:"\F0150"}.mdi-movie-open::before{content:"\FFEE"}.mdi-movie-open-outline::before{content:"\FFEF"}.mdi-movie-outline::before{content:"\FDB9"}.mdi-movie-roll::before{content:"\F7DD"}.mdi-movie-search::before{content:"\F01FD"}.mdi-movie-search-outline::before{content:"\F01FE"}.mdi-muffin::before{content:"\F98B"}.mdi-multiplication::before{content:"\F382"}.mdi-multiplication-box::before{content:"\F383"}.mdi-mushroom::before{content:"\F7DE"}.mdi-mushroom-outline::before{content:"\F7DF"}.mdi-music::before{content:"\F759"}.mdi-music-accidental-double-flat::before{content:"\FF86"}.mdi-music-accidental-double-sharp::before{content:"\FF87"}.mdi-music-accidental-flat::before{content:"\FF88"}.mdi-music-accidental-natural::before{content:"\FF89"}.mdi-music-accidental-sharp::before{content:"\FF8A"}.mdi-music-box::before{content:"\F384"}.mdi-music-box-outline::before{content:"\F385"}.mdi-music-circle::before{content:"\F386"}.mdi-music-circle-outline::before{content:"\FAD3"}.mdi-music-clef-alto::before{content:"\FF8B"}.mdi-music-clef-bass::before{content:"\FF8C"}.mdi-music-clef-treble::before{content:"\FF8D"}.mdi-music-note::before{content:"\F387"}.mdi-music-note-bluetooth::before{content:"\F5FE"}.mdi-music-note-bluetooth-off::before{content:"\F5FF"}.mdi-music-note-eighth::before{content:"\F388"}.mdi-music-note-eighth-dotted::before{content:"\FF8E"}.mdi-music-note-half::before{content:"\F389"}.mdi-music-note-half-dotted::before{content:"\FF8F"}.mdi-music-note-off::before{content:"\F38A"}.mdi-music-note-off-outline::before{content:"\FF90"}.mdi-music-note-outline::before{content:"\FF91"}.mdi-music-note-plus::before{content:"\FDBA"}.mdi-music-note-quarter::before{content:"\F38B"}.mdi-music-note-quarter-dotted::before{content:"\FF92"}.mdi-music-note-sixteenth::before{content:"\F38C"}.mdi-music-note-sixteenth-dotted::before{content:"\FF93"}.mdi-music-note-whole::before{content:"\F38D"}.mdi-music-note-whole-dotted::before{content:"\FF94"}.mdi-music-off::before{content:"\F75A"}.mdi-music-rest-eighth::before{content:"\FF95"}.mdi-music-rest-half::before{content:"\FF96"}.mdi-music-rest-quarter::before{content:"\FF97"}.mdi-music-rest-sixteenth::before{content:"\FF98"}.mdi-music-rest-whole::before{content:"\FF99"}.mdi-nail::before{content:"\FDBB"}.mdi-nas::before{content:"\F8F2"}.mdi-nativescript::before{content:"\F87F"}.mdi-nature::before{content:"\F38E"}.mdi-nature-people::before{content:"\F38F"}.mdi-navigation::before{content:"\F390"}.mdi-near-me::before{content:"\F5CD"}.mdi-necklace::before{content:"\FF28"}.mdi-needle::before{content:"\F391"}.mdi-netflix::before{content:"\F745"}.mdi-network::before{content:"\F6F2"}.mdi-network-off::before{content:"\FC77"}.mdi-network-off-outline::before{content:"\FC78"}.mdi-network-outline::before{content:"\FC79"}.mdi-network-router::before{content:"\F00B2"}.mdi-network-strength-1::before{content:"\F8F3"}.mdi-network-strength-1-alert::before{content:"\F8F4"}.mdi-network-strength-2::before{content:"\F8F5"}.mdi-network-strength-2-alert::before{content:"\F8F6"}.mdi-network-strength-3::before{content:"\F8F7"}.mdi-network-strength-3-alert::before{content:"\F8F8"}.mdi-network-strength-4::before{content:"\F8F9"}.mdi-network-strength-4-alert::before{content:"\F8FA"}.mdi-network-strength-off::before{content:"\F8FB"}.mdi-network-strength-off-outline::before{content:"\F8FC"}.mdi-network-strength-outline::before{content:"\F8FD"}.mdi-new-box::before{content:"\F394"}.mdi-newspaper::before{content:"\F395"}.mdi-newspaper-minus::before{content:"\FF29"}.mdi-newspaper-plus::before{content:"\FF2A"}.mdi-newspaper-variant::before{content:"\F0023"}.mdi-newspaper-variant-multiple::before{content:"\F0024"}.mdi-newspaper-variant-multiple-outline::before{content:"\F0025"}.mdi-newspaper-variant-outline::before{content:"\F0026"}.mdi-nfc::before{content:"\F396"}.mdi-nfc-off::before{content:"\FE35"}.mdi-nfc-search-variant::before{content:"\FE36"}.mdi-nfc-tap::before{content:"\F397"}.mdi-nfc-variant::before{content:"\F398"}.mdi-nfc-variant-off::before{content:"\FE37"}.mdi-ninja::before{content:"\F773"}.mdi-nintendo-switch::before{content:"\F7E0"}.mdi-nix::before{content:"\F0130"}.mdi-nodejs::before{content:"\F399"}.mdi-noodles::before{content:"\F01A9"}.mdi-not-equal::before{content:"\F98C"}.mdi-not-equal-variant::before{content:"\F98D"}.mdi-note::before{content:"\F39A"}.mdi-note-multiple::before{content:"\F6B7"}.mdi-note-multiple-outline::before{content:"\F6B8"}.mdi-note-outline::before{content:"\F39B"}.mdi-note-plus::before{content:"\F39C"}.mdi-note-plus-outline::before{content:"\F39D"}.mdi-note-text::before{content:"\F39E"}.mdi-note-text-outline::before{content:"\F0202"}.mdi-notebook::before{content:"\F82D"}.mdi-notebook-multiple::before{content:"\FE38"}.mdi-notebook-outline::before{content:"\FEDC"}.mdi-notification-clear-all::before{content:"\F39F"}.mdi-npm::before{content:"\F6F6"}.mdi-npm-variant::before{content:"\F98E"}.mdi-npm-variant-outline::before{content:"\F98F"}.mdi-nuke::before{content:"\F6A3"}.mdi-null::before{content:"\F7E1"}.mdi-numeric::before{content:"\F3A0"}.mdi-numeric-0::before{content:"\30"}.mdi-numeric-0-box::before{content:"\F3A1"}.mdi-numeric-0-box-multiple::before{content:"\FF2B"}.mdi-numeric-0-box-multiple-outline::before{content:"\F3A2"}.mdi-numeric-0-box-outline::before{content:"\F3A3"}.mdi-numeric-0-circle::before{content:"\FC7A"}.mdi-numeric-0-circle-outline::before{content:"\FC7B"}.mdi-numeric-1::before{content:"\31"}.mdi-numeric-1-box::before{content:"\F3A4"}.mdi-numeric-1-box-multiple::before{content:"\FF2C"}.mdi-numeric-1-box-multiple-outline::before{content:"\F3A5"}.mdi-numeric-1-box-outline::before{content:"\F3A6"}.mdi-numeric-1-circle::before{content:"\FC7C"}.mdi-numeric-1-circle-outline::before{content:"\FC7D"}.mdi-numeric-10::before{content:"\F000A"}.mdi-numeric-10-box::before{content:"\FF9A"}.mdi-numeric-10-box-multiple::before{content:"\F000B"}.mdi-numeric-10-box-multiple-outline::before{content:"\F000C"}.mdi-numeric-10-box-outline::before{content:"\FF9B"}.mdi-numeric-10-circle::before{content:"\F000D"}.mdi-numeric-10-circle-outline::before{content:"\F000E"}.mdi-numeric-2::before{content:"\32"}.mdi-numeric-2-box::before{content:"\F3A7"}.mdi-numeric-2-box-multiple::before{content:"\FF2D"}.mdi-numeric-2-box-multiple-outline::before{content:"\F3A8"}.mdi-numeric-2-box-outline::before{content:"\F3A9"}.mdi-numeric-2-circle::before{content:"\FC7E"}.mdi-numeric-2-circle-outline::before{content:"\FC7F"}.mdi-numeric-3::before{content:"\33"}.mdi-numeric-3-box::before{content:"\F3AA"}.mdi-numeric-3-box-multiple::before{content:"\FF2E"}.mdi-numeric-3-box-multiple-outline::before{content:"\F3AB"}.mdi-numeric-3-box-outline::before{content:"\F3AC"}.mdi-numeric-3-circle::before{content:"\FC80"}.mdi-numeric-3-circle-outline::before{content:"\FC81"}.mdi-numeric-4::before{content:"\34"}.mdi-numeric-4-box::before{content:"\F3AD"}.mdi-numeric-4-box-multiple::before{content:"\FF2F"}.mdi-numeric-4-box-multiple-outline::before{content:"\F3AE"}.mdi-numeric-4-box-outline::before{content:"\F3AF"}.mdi-numeric-4-circle::before{content:"\FC82"}.mdi-numeric-4-circle-outline::before{content:"\FC83"}.mdi-numeric-5::before{content:"\35"}.mdi-numeric-5-box::before{content:"\F3B0"}.mdi-numeric-5-box-multiple::before{content:"\FF30"}.mdi-numeric-5-box-multiple-outline::before{content:"\F3B1"}.mdi-numeric-5-box-outline::before{content:"\F3B2"}.mdi-numeric-5-circle::before{content:"\FC84"}.mdi-numeric-5-circle-outline::before{content:"\FC85"}.mdi-numeric-6::before{content:"\36"}.mdi-numeric-6-box::before{content:"\F3B3"}.mdi-numeric-6-box-multiple::before{content:"\FF31"}.mdi-numeric-6-box-multiple-outline::before{content:"\F3B4"}.mdi-numeric-6-box-outline::before{content:"\F3B5"}.mdi-numeric-6-circle::before{content:"\FC86"}.mdi-numeric-6-circle-outline::before{content:"\FC87"}.mdi-numeric-7::before{content:"\37"}.mdi-numeric-7-box::before{content:"\F3B6"}.mdi-numeric-7-box-multiple::before{content:"\FF32"}.mdi-numeric-7-box-multiple-outline::before{content:"\F3B7"}.mdi-numeric-7-box-outline::before{content:"\F3B8"}.mdi-numeric-7-circle::before{content:"\FC88"}.mdi-numeric-7-circle-outline::before{content:"\FC89"}.mdi-numeric-8::before{content:"\38"}.mdi-numeric-8-box::before{content:"\F3B9"}.mdi-numeric-8-box-multiple::before{content:"\FF33"}.mdi-numeric-8-box-multiple-outline::before{content:"\F3BA"}.mdi-numeric-8-box-outline::before{content:"\F3BB"}.mdi-numeric-8-circle::before{content:"\FC8A"}.mdi-numeric-8-circle-outline::before{content:"\FC8B"}.mdi-numeric-9::before{content:"\39"}.mdi-numeric-9-box::before{content:"\F3BC"}.mdi-numeric-9-box-multiple::before{content:"\FF34"}.mdi-numeric-9-box-multiple-outline::before{content:"\F3BD"}.mdi-numeric-9-box-outline::before{content:"\F3BE"}.mdi-numeric-9-circle::before{content:"\FC8C"}.mdi-numeric-9-circle-outline::before{content:"\FC8D"}.mdi-numeric-9-plus::before{content:"\F000F"}.mdi-numeric-9-plus-box::before{content:"\F3BF"}.mdi-numeric-9-plus-box-multiple::before{content:"\FF35"}.mdi-numeric-9-plus-box-multiple-outline::before{content:"\F3C0"}.mdi-numeric-9-plus-box-outline::before{content:"\F3C1"}.mdi-numeric-9-plus-circle::before{content:"\FC8E"}.mdi-numeric-9-plus-circle-outline::before{content:"\FC8F"}.mdi-numeric-negative-1::before{content:"\F0074"}.mdi-nut::before{content:"\F6F7"}.mdi-nutrition::before{content:"\F3C2"}.mdi-nuxt::before{content:"\F0131"}.mdi-oar::before{content:"\F67B"}.mdi-ocarina::before{content:"\FDBC"}.mdi-oci::before{content:"\F0314"}.mdi-ocr::before{content:"\F0165"}.mdi-octagon::before{content:"\F3C3"}.mdi-octagon-outline::before{content:"\F3C4"}.mdi-octagram::before{content:"\F6F8"}.mdi-octagram-outline::before{content:"\F774"}.mdi-odnoklassniki::before{content:"\F3C5"}.mdi-offer::before{content:"\F0246"}.mdi-office::before{content:"\F3C6"}.mdi-office-building::before{content:"\F990"}.mdi-oil::before{content:"\F3C7"}.mdi-oil-lamp::before{content:"\FF36"}.mdi-oil-level::before{content:"\F0075"}.mdi-oil-temperature::before{content:"\F0019"}.mdi-omega::before{content:"\F3C9"}.mdi-one-up::before{content:"\FB89"}.mdi-onedrive::before{content:"\F3CA"}.mdi-onenote::before{content:"\F746"}.mdi-onepassword::before{content:"\F880"}.mdi-opacity::before{content:"\F5CC"}.mdi-open-in-app::before{content:"\F3CB"}.mdi-open-in-new::before{content:"\F3CC"}.mdi-open-source-initiative::before{content:"\FB8A"}.mdi-openid::before{content:"\F3CD"}.mdi-opera::before{content:"\F3CE"}.mdi-orbit::before{content:"\F018"}.mdi-origin::before{content:"\FB2B"}.mdi-ornament::before{content:"\F3CF"}.mdi-ornament-variant::before{content:"\F3D0"}.mdi-outdoor-lamp::before{content:"\F0076"}.mdi-outlook::before{content:"\FCFE"}.mdi-overscan::before{content:"\F0027"}.mdi-owl::before{content:"\F3D2"}.mdi-pac-man::before{content:"\FB8B"}.mdi-package::before{content:"\F3D3"}.mdi-package-down::before{content:"\F3D4"}.mdi-package-up::before{content:"\F3D5"}.mdi-package-variant::before{content:"\F3D6"}.mdi-package-variant-closed::before{content:"\F3D7"}.mdi-page-first::before{content:"\F600"}.mdi-page-last::before{content:"\F601"}.mdi-page-layout-body::before{content:"\F6F9"}.mdi-page-layout-footer::before{content:"\F6FA"}.mdi-page-layout-header::before{content:"\F6FB"}.mdi-page-layout-header-footer::before{content:"\FF9C"}.mdi-page-layout-sidebar-left::before{content:"\F6FC"}.mdi-page-layout-sidebar-right::before{content:"\F6FD"}.mdi-page-next::before{content:"\FB8C"}.mdi-page-next-outline::before{content:"\FB8D"}.mdi-page-previous::before{content:"\FB8E"}.mdi-page-previous-outline::before{content:"\FB8F"}.mdi-palette::before{content:"\F3D8"}.mdi-palette-advanced::before{content:"\F3D9"}.mdi-palette-outline::before{content:"\FE6C"}.mdi-palette-swatch::before{content:"\F8B4"}.mdi-palette-swatch-outline::before{content:"\F0387"}.mdi-palm-tree::before{content:"\F0077"}.mdi-pan::before{content:"\FB90"}.mdi-pan-bottom-left::before{content:"\FB91"}.mdi-pan-bottom-right::before{content:"\FB92"}.mdi-pan-down::before{content:"\FB93"}.mdi-pan-horizontal::before{content:"\FB94"}.mdi-pan-left::before{content:"\FB95"}.mdi-pan-right::before{content:"\FB96"}.mdi-pan-top-left::before{content:"\FB97"}.mdi-pan-top-right::before{content:"\FB98"}.mdi-pan-up::before{content:"\FB99"}.mdi-pan-vertical::before{content:"\FB9A"}.mdi-panda::before{content:"\F3DA"}.mdi-pandora::before{content:"\F3DB"}.mdi-panorama::before{content:"\F3DC"}.mdi-panorama-fisheye::before{content:"\F3DD"}.mdi-panorama-horizontal::before{content:"\F3DE"}.mdi-panorama-vertical::before{content:"\F3DF"}.mdi-panorama-wide-angle::before{content:"\F3E0"}.mdi-paper-cut-vertical::before{content:"\F3E1"}.mdi-paper-roll::before{content:"\F0182"}.mdi-paper-roll-outline::before{content:"\F0183"}.mdi-paperclip::before{content:"\F3E2"}.mdi-parachute::before{content:"\FC90"}.mdi-parachute-outline::before{content:"\FC91"}.mdi-parking::before{content:"\F3E3"}.mdi-party-popper::before{content:"\F0078"}.mdi-passport::before{content:"\F7E2"}.mdi-passport-biometric::before{content:"\FDBD"}.mdi-pasta::before{content:"\F018B"}.mdi-patio-heater::before{content:"\FF9D"}.mdi-patreon::before{content:"\F881"}.mdi-pause::before{content:"\F3E4"}.mdi-pause-circle::before{content:"\F3E5"}.mdi-pause-circle-outline::before{content:"\F3E6"}.mdi-pause-octagon::before{content:"\F3E7"}.mdi-pause-octagon-outline::before{content:"\F3E8"}.mdi-paw::before{content:"\F3E9"}.mdi-paw-off::before{content:"\F657"}.mdi-paypal::before{content:"\F882"}.mdi-pdf-box::before{content:"\FE39"}.mdi-peace::before{content:"\F883"}.mdi-peanut::before{content:"\F001E"}.mdi-peanut-off::before{content:"\F001F"}.mdi-peanut-off-outline::before{content:"\F0021"}.mdi-peanut-outline::before{content:"\F0020"}.mdi-pen::before{content:"\F3EA"}.mdi-pen-lock::before{content:"\FDBE"}.mdi-pen-minus::before{content:"\FDBF"}.mdi-pen-off::before{content:"\FDC0"}.mdi-pen-plus::before{content:"\FDC1"}.mdi-pen-remove::before{content:"\FDC2"}.mdi-pencil::before{content:"\F3EB"}.mdi-pencil-box::before{content:"\F3EC"}.mdi-pencil-box-multiple::before{content:"\F016F"}.mdi-pencil-box-multiple-outline::before{content:"\F0170"}.mdi-pencil-box-outline::before{content:"\F3ED"}.mdi-pencil-circle::before{content:"\F6FE"}.mdi-pencil-circle-outline::before{content:"\F775"}.mdi-pencil-lock::before{content:"\F3EE"}.mdi-pencil-lock-outline::before{content:"\FDC3"}.mdi-pencil-minus::before{content:"\FDC4"}.mdi-pencil-minus-outline::before{content:"\FDC5"}.mdi-pencil-off::before{content:"\F3EF"}.mdi-pencil-off-outline::before{content:"\FDC6"}.mdi-pencil-outline::before{content:"\FC92"}.mdi-pencil-plus::before{content:"\FDC7"}.mdi-pencil-plus-outline::before{content:"\FDC8"}.mdi-pencil-remove::before{content:"\FDC9"}.mdi-pencil-remove-outline::before{content:"\FDCA"}.mdi-pencil-ruler::before{content:"\F037E"}.mdi-penguin::before{content:"\FEDD"}.mdi-pentagon::before{content:"\F6FF"}.mdi-pentagon-outline::before{content:"\F700"}.mdi-percent::before{content:"\F3F0"}.mdi-percent-outline::before{content:"\F02A3"}.mdi-periodic-table::before{content:"\F8B5"}.mdi-periodic-table-co::before{content:"\F0329"}.mdi-periodic-table-co2::before{content:"\F7E3"}.mdi-periscope::before{content:"\F747"}.mdi-perspective-less::before{content:"\FCFF"}.mdi-perspective-more::before{content:"\FD00"}.mdi-pharmacy::before{content:"\F3F1"}.mdi-phone::before{content:"\F3F2"}.mdi-phone-alert::before{content:"\FF37"}.mdi-phone-alert-outline::before{content:"\F01B9"}.mdi-phone-bluetooth::before{content:"\F3F3"}.mdi-phone-bluetooth-outline::before{content:"\F01BA"}.mdi-phone-cancel::before{content:"\F00E7"}.mdi-phone-cancel-outline::before{content:"\F01BB"}.mdi-phone-check::before{content:"\F01D4"}.mdi-phone-check-outline::before{content:"\F01D5"}.mdi-phone-classic::before{content:"\F602"}.mdi-phone-classic-off::before{content:"\F02A4"}.mdi-phone-forward::before{content:"\F3F4"}.mdi-phone-forward-outline::before{content:"\F01BC"}.mdi-phone-hangup::before{content:"\F3F5"}.mdi-phone-hangup-outline::before{content:"\F01BD"}.mdi-phone-in-talk::before{content:"\F3F6"}.mdi-phone-in-talk-outline::before{content:"\F01AD"}.mdi-phone-incoming::before{content:"\F3F7"}.mdi-phone-incoming-outline::before{content:"\F01BE"}.mdi-phone-lock::before{content:"\F3F8"}.mdi-phone-lock-outline::before{content:"\F01BF"}.mdi-phone-log::before{content:"\F3F9"}.mdi-phone-log-outline::before{content:"\F01C0"}.mdi-phone-message::before{content:"\F01C1"}.mdi-phone-message-outline::before{content:"\F01C2"}.mdi-phone-minus::before{content:"\F658"}.mdi-phone-minus-outline::before{content:"\F01C3"}.mdi-phone-missed::before{content:"\F3FA"}.mdi-phone-missed-outline::before{content:"\F01D0"}.mdi-phone-off::before{content:"\FDCB"}.mdi-phone-off-outline::before{content:"\F01D1"}.mdi-phone-outgoing::before{content:"\F3FB"}.mdi-phone-outgoing-outline::before{content:"\F01C4"}.mdi-phone-outline::before{content:"\FDCC"}.mdi-phone-paused::before{content:"\F3FC"}.mdi-phone-paused-outline::before{content:"\F01C5"}.mdi-phone-plus::before{content:"\F659"}.mdi-phone-plus-outline::before{content:"\F01C6"}.mdi-phone-return::before{content:"\F82E"}.mdi-phone-return-outline::before{content:"\F01C7"}.mdi-phone-ring::before{content:"\F01D6"}.mdi-phone-ring-outline::before{content:"\F01D7"}.mdi-phone-rotate-landscape::before{content:"\F884"}.mdi-phone-rotate-portrait::before{content:"\F885"}.mdi-phone-settings::before{content:"\F3FD"}.mdi-phone-settings-outline::before{content:"\F01C8"}.mdi-phone-voip::before{content:"\F3FE"}.mdi-pi::before{content:"\F3FF"}.mdi-pi-box::before{content:"\F400"}.mdi-pi-hole::before{content:"\FDCD"}.mdi-piano::before{content:"\F67C"}.mdi-pickaxe::before{content:"\F8B6"}.mdi-picture-in-picture-bottom-right::before{content:"\FE3A"}.mdi-picture-in-picture-bottom-right-outline::before{content:"\FE3B"}.mdi-picture-in-picture-top-right::before{content:"\FE3C"}.mdi-picture-in-picture-top-right-outline::before{content:"\FE3D"}.mdi-pier::before{content:"\F886"}.mdi-pier-crane::before{content:"\F887"}.mdi-pig::before{content:"\F401"}.mdi-pig-variant::before{content:"\F0028"}.mdi-piggy-bank::before{content:"\F0029"}.mdi-pill::before{content:"\F402"}.mdi-pillar::before{content:"\F701"}.mdi-pin::before{content:"\F403"}.mdi-pin-off::before{content:"\F404"}.mdi-pin-off-outline::before{content:"\F92F"}.mdi-pin-outline::before{content:"\F930"}.mdi-pine-tree::before{content:"\F405"}.mdi-pine-tree-box::before{content:"\F406"}.mdi-pinterest::before{content:"\F407"}.mdi-pinterest-box::before{content:"\F408"}.mdi-pinwheel::before{content:"\FAD4"}.mdi-pinwheel-outline::before{content:"\FAD5"}.mdi-pipe::before{content:"\F7E4"}.mdi-pipe-disconnected::before{content:"\F7E5"}.mdi-pipe-leak::before{content:"\F888"}.mdi-pipe-wrench::before{content:"\F037F"}.mdi-pirate::before{content:"\FA07"}.mdi-pistol::before{content:"\F702"}.mdi-piston::before{content:"\F889"}.mdi-pizza::before{content:"\F409"}.mdi-play::before{content:"\F40A"}.mdi-play-box::before{content:"\F02A5"}.mdi-play-box-outline::before{content:"\F40B"}.mdi-play-circle::before{content:"\F40C"}.mdi-play-circle-outline::before{content:"\F40D"}.mdi-play-network::before{content:"\F88A"}.mdi-play-network-outline::before{content:"\FC93"}.mdi-play-outline::before{content:"\FF38"}.mdi-play-pause::before{content:"\F40E"}.mdi-play-protected-content::before{content:"\F40F"}.mdi-play-speed::before{content:"\F8FE"}.mdi-playlist-check::before{content:"\F5C7"}.mdi-playlist-edit::before{content:"\F8FF"}.mdi-playlist-minus::before{content:"\F410"}.mdi-playlist-music::before{content:"\FC94"}.mdi-playlist-music-outline::before{content:"\FC95"}.mdi-playlist-play::before{content:"\F411"}.mdi-playlist-plus::before{content:"\F412"}.mdi-playlist-remove::before{content:"\F413"}.mdi-playlist-star::before{content:"\FDCE"}.mdi-playstation::before{content:"\F414"}.mdi-plex::before{content:"\F6B9"}.mdi-plus::before{content:"\F415"}.mdi-plus-box::before{content:"\F416"}.mdi-plus-box-multiple::before{content:"\F334"}.mdi-plus-box-multiple-outline::before{content:"\F016E"}.mdi-plus-box-outline::before{content:"\F703"}.mdi-plus-circle::before{content:"\F417"}.mdi-plus-circle-multiple-outline::before{content:"\F418"}.mdi-plus-circle-outline::before{content:"\F419"}.mdi-plus-minus::before{content:"\F991"}.mdi-plus-minus-box::before{content:"\F992"}.mdi-plus-network::before{content:"\F41A"}.mdi-plus-network-outline::before{content:"\FC96"}.mdi-plus-one::before{content:"\F41B"}.mdi-plus-outline::before{content:"\F704"}.mdi-plus-thick::before{content:"\F0217"}.mdi-pocket::before{content:"\F41C"}.mdi-podcast::before{content:"\F993"}.mdi-podium::before{content:"\FD01"}.mdi-podium-bronze::before{content:"\FD02"}.mdi-podium-gold::before{content:"\FD03"}.mdi-podium-silver::before{content:"\FD04"}.mdi-point-of-sale::before{content:"\FD6E"}.mdi-pokeball::before{content:"\F41D"}.mdi-pokemon-go::before{content:"\FA08"}.mdi-poker-chip::before{content:"\F82F"}.mdi-polaroid::before{content:"\F41E"}.mdi-police-badge::before{content:"\F0192"}.mdi-police-badge-outline::before{content:"\F0193"}.mdi-poll::before{content:"\F41F"}.mdi-poll-box::before{content:"\F420"}.mdi-poll-box-outline::before{content:"\F02A6"}.mdi-polymer::before{content:"\F421"}.mdi-pool::before{content:"\F606"}.mdi-popcorn::before{content:"\F422"}.mdi-post::before{content:"\F002A"}.mdi-post-outline::before{content:"\F002B"}.mdi-postage-stamp::before{content:"\FC97"}.mdi-pot::before{content:"\F65A"}.mdi-pot-mix::before{content:"\F65B"}.mdi-pound::before{content:"\F423"}.mdi-pound-box::before{content:"\F424"}.mdi-pound-box-outline::before{content:"\F01AA"}.mdi-power::before{content:"\F425"}.mdi-power-cycle::before{content:"\F900"}.mdi-power-off::before{content:"\F901"}.mdi-power-on::before{content:"\F902"}.mdi-power-plug::before{content:"\F6A4"}.mdi-power-plug-off::before{content:"\F6A5"}.mdi-power-settings::before{content:"\F426"}.mdi-power-sleep::before{content:"\F903"}.mdi-power-socket::before{content:"\F427"}.mdi-power-socket-au::before{content:"\F904"}.mdi-power-socket-de::before{content:"\F0132"}.mdi-power-socket-eu::before{content:"\F7E6"}.mdi-power-socket-fr::before{content:"\F0133"}.mdi-power-socket-jp::before{content:"\F0134"}.mdi-power-socket-uk::before{content:"\F7E7"}.mdi-power-socket-us::before{content:"\F7E8"}.mdi-power-standby::before{content:"\F905"}.mdi-powershell::before{content:"\FA09"}.mdi-prescription::before{content:"\F705"}.mdi-presentation::before{content:"\F428"}.mdi-presentation-play::before{content:"\F429"}.mdi-printer::before{content:"\F42A"}.mdi-printer-3d::before{content:"\F42B"}.mdi-printer-3d-nozzle::before{content:"\FE3E"}.mdi-printer-3d-nozzle-alert::before{content:"\F01EB"}.mdi-printer-3d-nozzle-alert-outline::before{content:"\F01EC"}.mdi-printer-3d-nozzle-outline::before{content:"\FE3F"}.mdi-printer-alert::before{content:"\F42C"}.mdi-printer-check::before{content:"\F0171"}.mdi-printer-off::before{content:"\FE40"}.mdi-printer-pos::before{content:"\F0079"}.mdi-printer-settings::before{content:"\F706"}.mdi-printer-wireless::before{content:"\FA0A"}.mdi-priority-high::before{content:"\F603"}.mdi-priority-low::before{content:"\F604"}.mdi-professional-hexagon::before{content:"\F42D"}.mdi-progress-alert::before{content:"\FC98"}.mdi-progress-check::before{content:"\F994"}.mdi-progress-clock::before{content:"\F995"}.mdi-progress-close::before{content:"\F0135"}.mdi-progress-download::before{content:"\F996"}.mdi-progress-upload::before{content:"\F997"}.mdi-progress-wrench::before{content:"\FC99"}.mdi-projector::before{content:"\F42E"}.mdi-projector-screen::before{content:"\F42F"}.mdi-propane-tank::before{content:"\F0382"}.mdi-propane-tank-outline::before{content:"\F0383"}.mdi-protocol::before{content:"\FFF9"}.mdi-publish::before{content:"\F6A6"}.mdi-pulse::before{content:"\F430"}.mdi-pumpkin::before{content:"\FB9B"}.mdi-purse::before{content:"\FF39"}.mdi-purse-outline::before{content:"\FF3A"}.mdi-puzzle::before{content:"\F431"}.mdi-puzzle-outline::before{content:"\FA65"}.mdi-qi::before{content:"\F998"}.mdi-qqchat::before{content:"\F605"}.mdi-qrcode::before{content:"\F432"}.mdi-qrcode-edit::before{content:"\F8B7"}.mdi-qrcode-minus::before{content:"\F01B7"}.mdi-qrcode-plus::before{content:"\F01B6"}.mdi-qrcode-remove::before{content:"\F01B8"}.mdi-qrcode-scan::before{content:"\F433"}.mdi-quadcopter::before{content:"\F434"}.mdi-quality-high::before{content:"\F435"}.mdi-quality-low::before{content:"\FA0B"}.mdi-quality-medium::before{content:"\FA0C"}.mdi-quicktime::before{content:"\F436"}.mdi-quora::before{content:"\FD05"}.mdi-rabbit::before{content:"\F906"}.mdi-racing-helmet::before{content:"\FD6F"}.mdi-racquetball::before{content:"\FD70"}.mdi-radar::before{content:"\F437"}.mdi-radiator::before{content:"\F438"}.mdi-radiator-disabled::before{content:"\FAD6"}.mdi-radiator-off::before{content:"\FAD7"}.mdi-radio::before{content:"\F439"}.mdi-radio-am::before{content:"\FC9A"}.mdi-radio-fm::before{content:"\FC9B"}.mdi-radio-handheld::before{content:"\F43A"}.mdi-radio-off::before{content:"\F0247"}.mdi-radio-tower::before{content:"\F43B"}.mdi-radioactive::before{content:"\F43C"}.mdi-radioactive-off::before{content:"\FEDE"}.mdi-radiobox-blank::before{content:"\F43D"}.mdi-radiobox-marked::before{content:"\F43E"}.mdi-radius::before{content:"\FC9C"}.mdi-radius-outline::before{content:"\FC9D"}.mdi-railroad-light::before{content:"\FF3B"}.mdi-raspberry-pi::before{content:"\F43F"}.mdi-ray-end::before{content:"\F440"}.mdi-ray-end-arrow::before{content:"\F441"}.mdi-ray-start::before{content:"\F442"}.mdi-ray-start-arrow::before{content:"\F443"}.mdi-ray-start-end::before{content:"\F444"}.mdi-ray-vertex::before{content:"\F445"}.mdi-react::before{content:"\F707"}.mdi-read::before{content:"\F447"}.mdi-receipt::before{content:"\F449"}.mdi-record::before{content:"\F44A"}.mdi-record-circle::before{content:"\FEDF"}.mdi-record-circle-outline::before{content:"\FEE0"}.mdi-record-player::before{content:"\F999"}.mdi-record-rec::before{content:"\F44B"}.mdi-rectangle::before{content:"\FE41"}.mdi-rectangle-outline::before{content:"\FE42"}.mdi-recycle::before{content:"\F44C"}.mdi-reddit::before{content:"\F44D"}.mdi-redhat::before{content:"\F0146"}.mdi-redo::before{content:"\F44E"}.mdi-redo-variant::before{content:"\F44F"}.mdi-reflect-horizontal::before{content:"\FA0D"}.mdi-reflect-vertical::before{content:"\FA0E"}.mdi-refresh::before{content:"\F450"}.mdi-refresh-circle::before{content:"\F03A2"}.mdi-regex::before{content:"\F451"}.mdi-registered-trademark::before{content:"\FA66"}.mdi-relative-scale::before{content:"\F452"}.mdi-reload::before{content:"\F453"}.mdi-reload-alert::before{content:"\F0136"}.mdi-reminder::before{content:"\F88B"}.mdi-remote::before{content:"\F454"}.mdi-remote-desktop::before{content:"\F8B8"}.mdi-remote-off::before{content:"\FEE1"}.mdi-remote-tv::before{content:"\FEE2"}.mdi-remote-tv-off::before{content:"\FEE3"}.mdi-rename-box::before{content:"\F455"}.mdi-reorder-horizontal::before{content:"\F687"}.mdi-reorder-vertical::before{content:"\F688"}.mdi-repeat::before{content:"\F456"}.mdi-repeat-off::before{content:"\F457"}.mdi-repeat-once::before{content:"\F458"}.mdi-replay::before{content:"\F459"}.mdi-reply::before{content:"\F45A"}.mdi-reply-all::before{content:"\F45B"}.mdi-reply-all-outline::before{content:"\FF3C"}.mdi-reply-circle::before{content:"\F01D9"}.mdi-reply-outline::before{content:"\FF3D"}.mdi-reproduction::before{content:"\F45C"}.mdi-resistor::before{content:"\FB1F"}.mdi-resistor-nodes::before{content:"\FB20"}.mdi-resize::before{content:"\FA67"}.mdi-resize-bottom-right::before{content:"\F45D"}.mdi-responsive::before{content:"\F45E"}.mdi-restart::before{content:"\F708"}.mdi-restart-alert::before{content:"\F0137"}.mdi-restart-off::before{content:"\FD71"}.mdi-restore::before{content:"\F99A"}.mdi-restore-alert::before{content:"\F0138"}.mdi-rewind::before{content:"\F45F"}.mdi-rewind-10::before{content:"\FD06"}.mdi-rewind-30::before{content:"\FD72"}.mdi-rewind-5::before{content:"\F0224"}.mdi-rewind-outline::before{content:"\F709"}.mdi-rhombus::before{content:"\F70A"}.mdi-rhombus-medium::before{content:"\FA0F"}.mdi-rhombus-outline::before{content:"\F70B"}.mdi-rhombus-split::before{content:"\FA10"}.mdi-ribbon::before{content:"\F460"}.mdi-rice::before{content:"\F7E9"}.mdi-ring::before{content:"\F7EA"}.mdi-rivet::before{content:"\FE43"}.mdi-road::before{content:"\F461"}.mdi-road-variant::before{content:"\F462"}.mdi-robber::before{content:"\F007A"}.mdi-robot::before{content:"\F6A8"}.mdi-robot-industrial::before{content:"\FB21"}.mdi-robot-mower::before{content:"\F0222"}.mdi-robot-mower-outline::before{content:"\F021E"}.mdi-robot-vacuum::before{content:"\F70C"}.mdi-robot-vacuum-variant::before{content:"\F907"}.mdi-rocket::before{content:"\F463"}.mdi-rodent::before{content:"\F0352"}.mdi-roller-skate::before{content:"\FD07"}.mdi-rollerblade::before{content:"\FD08"}.mdi-rollupjs::before{content:"\FB9C"}.mdi-roman-numeral-1::before{content:"\F00B3"}.mdi-roman-numeral-10::before{content:"\F00BC"}.mdi-roman-numeral-2::before{content:"\F00B4"}.mdi-roman-numeral-3::before{content:"\F00B5"}.mdi-roman-numeral-4::before{content:"\F00B6"}.mdi-roman-numeral-5::before{content:"\F00B7"}.mdi-roman-numeral-6::before{content:"\F00B8"}.mdi-roman-numeral-7::before{content:"\F00B9"}.mdi-roman-numeral-8::before{content:"\F00BA"}.mdi-roman-numeral-9::before{content:"\F00BB"}.mdi-room-service::before{content:"\F88C"}.mdi-room-service-outline::before{content:"\FD73"}.mdi-rotate-3d::before{content:"\FEE4"}.mdi-rotate-3d-variant::before{content:"\F464"}.mdi-rotate-left::before{content:"\F465"}.mdi-rotate-left-variant::before{content:"\F466"}.mdi-rotate-orbit::before{content:"\FD74"}.mdi-rotate-right::before{content:"\F467"}.mdi-rotate-right-variant::before{content:"\F468"}.mdi-rounded-corner::before{content:"\F607"}.mdi-router::before{content:"\F020D"}.mdi-router-wireless::before{content:"\F469"}.mdi-router-wireless-settings::before{content:"\FA68"}.mdi-routes::before{content:"\F46A"}.mdi-routes-clock::before{content:"\F007B"}.mdi-rowing::before{content:"\F608"}.mdi-rss::before{content:"\F46B"}.mdi-rss-box::before{content:"\F46C"}.mdi-rss-off::before{content:"\FF3E"}.mdi-ruby::before{content:"\FD09"}.mdi-rugby::before{content:"\FD75"}.mdi-ruler::before{content:"\F46D"}.mdi-ruler-square::before{content:"\FC9E"}.mdi-ruler-square-compass::before{content:"\FEDB"}.mdi-run::before{content:"\F70D"}.mdi-run-fast::before{content:"\F46E"}.mdi-rv-truck::before{content:"\F01FF"}.mdi-sack::before{content:"\FD0A"}.mdi-sack-percent::before{content:"\FD0B"}.mdi-safe::before{content:"\FA69"}.mdi-safe-square::before{content:"\F02A7"}.mdi-safe-square-outline::before{content:"\F02A8"}.mdi-safety-goggles::before{content:"\FD0C"}.mdi-sailing::before{content:"\FEE5"}.mdi-sale::before{content:"\F46F"}.mdi-salesforce::before{content:"\F88D"}.mdi-sass::before{content:"\F7EB"}.mdi-satellite::before{content:"\F470"}.mdi-satellite-uplink::before{content:"\F908"}.mdi-satellite-variant::before{content:"\F471"}.mdi-sausage::before{content:"\F8B9"}.mdi-saw-blade::before{content:"\FE44"}.mdi-saxophone::before{content:"\F609"}.mdi-scale::before{content:"\F472"}.mdi-scale-balance::before{content:"\F5D1"}.mdi-scale-bathroom::before{content:"\F473"}.mdi-scale-off::before{content:"\F007C"}.mdi-scanner::before{content:"\F6AA"}.mdi-scanner-off::before{content:"\F909"}.mdi-scatter-plot::before{content:"\FEE6"}.mdi-scatter-plot-outline::before{content:"\FEE7"}.mdi-school::before{content:"\F474"}.mdi-school-outline::before{content:"\F01AB"}.mdi-scissors-cutting::before{content:"\FA6A"}.mdi-scooter::before{content:"\F0214"}.mdi-scoreboard::before{content:"\F02A9"}.mdi-scoreboard-outline::before{content:"\F02AA"}.mdi-screen-rotation::before{content:"\F475"}.mdi-screen-rotation-lock::before{content:"\F476"}.mdi-screw-flat-top::before{content:"\FDCF"}.mdi-screw-lag::before{content:"\FE54"}.mdi-screw-machine-flat-top::before{content:"\FE55"}.mdi-screw-machine-round-top::before{content:"\FE56"}.mdi-screw-round-top::before{content:"\FE57"}.mdi-screwdriver::before{content:"\F477"}.mdi-script::before{content:"\FB9D"}.mdi-script-outline::before{content:"\F478"}.mdi-script-text::before{content:"\FB9E"}.mdi-script-text-outline::before{content:"\FB9F"}.mdi-sd::before{content:"\F479"}.mdi-seal::before{content:"\F47A"}.mdi-seal-variant::before{content:"\FFFA"}.mdi-search-web::before{content:"\F70E"}.mdi-seat::before{content:"\FC9F"}.mdi-seat-flat::before{content:"\F47B"}.mdi-seat-flat-angled::before{content:"\F47C"}.mdi-seat-individual-suite::before{content:"\F47D"}.mdi-seat-legroom-extra::before{content:"\F47E"}.mdi-seat-legroom-normal::before{content:"\F47F"}.mdi-seat-legroom-reduced::before{content:"\F480"}.mdi-seat-outline::before{content:"\FCA0"}.mdi-seat-passenger::before{content:"\F0274"}.mdi-seat-recline-extra::before{content:"\F481"}.mdi-seat-recline-normal::before{content:"\F482"}.mdi-seatbelt::before{content:"\FCA1"}.mdi-security::before{content:"\F483"}.mdi-security-network::before{content:"\F484"}.mdi-seed::before{content:"\FE45"}.mdi-seed-outline::before{content:"\FE46"}.mdi-segment::before{content:"\FEE8"}.mdi-select::before{content:"\F485"}.mdi-select-all::before{content:"\F486"}.mdi-select-color::before{content:"\FD0D"}.mdi-select-compare::before{content:"\FAD8"}.mdi-select-drag::before{content:"\FA6B"}.mdi-select-group::before{content:"\FF9F"}.mdi-select-inverse::before{content:"\F487"}.mdi-select-marker::before{content:"\F02AB"}.mdi-select-multiple::before{content:"\F02AC"}.mdi-select-multiple-marker::before{content:"\F02AD"}.mdi-select-off::before{content:"\F488"}.mdi-select-place::before{content:"\FFFB"}.mdi-select-search::before{content:"\F022F"}.mdi-selection::before{content:"\F489"}.mdi-selection-drag::before{content:"\FA6C"}.mdi-selection-ellipse::before{content:"\FD0E"}.mdi-selection-ellipse-arrow-inside::before{content:"\FF3F"}.mdi-selection-marker::before{content:"\F02AE"}.mdi-selection-multiple-marker::before{content:"\F02AF"}.mdi-selection-mutliple::before{content:"\F02B0"}.mdi-selection-off::before{content:"\F776"}.mdi-selection-search::before{content:"\F0230"}.mdi-semantic-web::before{content:"\F0341"}.mdi-send::before{content:"\F48A"}.mdi-send-check::before{content:"\F018C"}.mdi-send-check-outline::before{content:"\F018D"}.mdi-send-circle::before{content:"\FE58"}.mdi-send-circle-outline::before{content:"\FE59"}.mdi-send-clock::before{content:"\F018E"}.mdi-send-clock-outline::before{content:"\F018F"}.mdi-send-lock::before{content:"\F7EC"}.mdi-send-lock-outline::before{content:"\F0191"}.mdi-send-outline::before{content:"\F0190"}.mdi-serial-port::before{content:"\F65C"}.mdi-server::before{content:"\F48B"}.mdi-server-minus::before{content:"\F48C"}.mdi-server-network::before{content:"\F48D"}.mdi-server-network-off::before{content:"\F48E"}.mdi-server-off::before{content:"\F48F"}.mdi-server-plus::before{content:"\F490"}.mdi-server-remove::before{content:"\F491"}.mdi-server-security::before{content:"\F492"}.mdi-set-all::before{content:"\F777"}.mdi-set-center::before{content:"\F778"}.mdi-set-center-right::before{content:"\F779"}.mdi-set-left::before{content:"\F77A"}.mdi-set-left-center::before{content:"\F77B"}.mdi-set-left-right::before{content:"\F77C"}.mdi-set-none::before{content:"\F77D"}.mdi-set-right::before{content:"\F77E"}.mdi-set-top-box::before{content:"\F99E"}.mdi-settings::before{content:"\F493"}.mdi-settings-box::before{content:"\F494"}.mdi-settings-helper::before{content:"\FA6D"}.mdi-settings-outline::before{content:"\F8BA"}.mdi-settings-transfer::before{content:"\F007D"}.mdi-settings-transfer-outline::before{content:"\F007E"}.mdi-shaker::before{content:"\F0139"}.mdi-shaker-outline::before{content:"\F013A"}.mdi-shape::before{content:"\F830"}.mdi-shape-circle-plus::before{content:"\F65D"}.mdi-shape-outline::before{content:"\F831"}.mdi-shape-oval-plus::before{content:"\F0225"}.mdi-shape-plus::before{content:"\F495"}.mdi-shape-polygon-plus::before{content:"\F65E"}.mdi-shape-rectangle-plus::before{content:"\F65F"}.mdi-shape-square-plus::before{content:"\F660"}.mdi-share::before{content:"\F496"}.mdi-share-all::before{content:"\F021F"}.mdi-share-all-outline::before{content:"\F0220"}.mdi-share-circle::before{content:"\F01D8"}.mdi-share-off::before{content:"\FF40"}.mdi-share-off-outline::before{content:"\FF41"}.mdi-share-outline::before{content:"\F931"}.mdi-share-variant::before{content:"\F497"}.mdi-sheep::before{content:"\FCA2"}.mdi-shield::before{content:"\F498"}.mdi-shield-account::before{content:"\F88E"}.mdi-shield-account-outline::before{content:"\FA11"}.mdi-shield-airplane::before{content:"\F6BA"}.mdi-shield-airplane-outline::before{content:"\FCA3"}.mdi-shield-alert::before{content:"\FEE9"}.mdi-shield-alert-outline::before{content:"\FEEA"}.mdi-shield-car::before{content:"\FFA0"}.mdi-shield-check::before{content:"\F565"}.mdi-shield-check-outline::before{content:"\FCA4"}.mdi-shield-cross::before{content:"\FCA5"}.mdi-shield-cross-outline::before{content:"\FCA6"}.mdi-shield-edit::before{content:"\F01CB"}.mdi-shield-edit-outline::before{content:"\F01CC"}.mdi-shield-half::before{content:"\F038B"}.mdi-shield-half-full::before{content:"\F77F"}.mdi-shield-home::before{content:"\F689"}.mdi-shield-home-outline::before{content:"\FCA7"}.mdi-shield-key::before{content:"\FBA0"}.mdi-shield-key-outline::before{content:"\FBA1"}.mdi-shield-link-variant::before{content:"\FD0F"}.mdi-shield-link-variant-outline::before{content:"\FD10"}.mdi-shield-lock::before{content:"\F99C"}.mdi-shield-lock-outline::before{content:"\FCA8"}.mdi-shield-off::before{content:"\F99D"}.mdi-shield-off-outline::before{content:"\F99B"}.mdi-shield-outline::before{content:"\F499"}.mdi-shield-plus::before{content:"\FAD9"}.mdi-shield-plus-outline::before{content:"\FADA"}.mdi-shield-refresh::before{content:"\F01CD"}.mdi-shield-refresh-outline::before{content:"\F01CE"}.mdi-shield-remove::before{content:"\FADB"}.mdi-shield-remove-outline::before{content:"\FADC"}.mdi-shield-search::before{content:"\FD76"}.mdi-shield-star::before{content:"\F0166"}.mdi-shield-star-outline::before{content:"\F0167"}.mdi-shield-sun::before{content:"\F007F"}.mdi-shield-sun-outline::before{content:"\F0080"}.mdi-ship-wheel::before{content:"\F832"}.mdi-shoe-formal::before{content:"\FB22"}.mdi-shoe-heel::before{content:"\FB23"}.mdi-shoe-print::before{content:"\FE5A"}.mdi-shopify::before{content:"\FADD"}.mdi-shopping::before{content:"\F49A"}.mdi-shopping-music::before{content:"\F49B"}.mdi-shopping-outline::before{content:"\F0200"}.mdi-shopping-search::before{content:"\FFA1"}.mdi-shovel::before{content:"\F70F"}.mdi-shovel-off::before{content:"\F710"}.mdi-shower::before{content:"\F99F"}.mdi-shower-head::before{content:"\F9A0"}.mdi-shredder::before{content:"\F49C"}.mdi-shuffle::before{content:"\F49D"}.mdi-shuffle-disabled::before{content:"\F49E"}.mdi-shuffle-variant::before{content:"\F49F"}.mdi-shuriken::before{content:"\F03AA"}.mdi-sigma::before{content:"\F4A0"}.mdi-sigma-lower::before{content:"\F62B"}.mdi-sign-caution::before{content:"\F4A1"}.mdi-sign-direction::before{content:"\F780"}.mdi-sign-direction-minus::before{content:"\F0022"}.mdi-sign-direction-plus::before{content:"\FFFD"}.mdi-sign-direction-remove::before{content:"\FFFE"}.mdi-sign-real-estate::before{content:"\F0143"}.mdi-sign-text::before{content:"\F781"}.mdi-signal::before{content:"\F4A2"}.mdi-signal-2g::before{content:"\F711"}.mdi-signal-3g::before{content:"\F712"}.mdi-signal-4g::before{content:"\F713"}.mdi-signal-5g::before{content:"\FA6E"}.mdi-signal-cellular-1::before{content:"\F8BB"}.mdi-signal-cellular-2::before{content:"\F8BC"}.mdi-signal-cellular-3::before{content:"\F8BD"}.mdi-signal-cellular-outline::before{content:"\F8BE"}.mdi-signal-distance-variant::before{content:"\FE47"}.mdi-signal-hspa::before{content:"\F714"}.mdi-signal-hspa-plus::before{content:"\F715"}.mdi-signal-off::before{content:"\F782"}.mdi-signal-variant::before{content:"\F60A"}.mdi-signature::before{content:"\FE5B"}.mdi-signature-freehand::before{content:"\FE5C"}.mdi-signature-image::before{content:"\FE5D"}.mdi-signature-text::before{content:"\FE5E"}.mdi-silo::before{content:"\FB24"}.mdi-silverware::before{content:"\F4A3"}.mdi-silverware-clean::before{content:"\FFFF"}.mdi-silverware-fork::before{content:"\F4A4"}.mdi-silverware-fork-knife::before{content:"\FA6F"}.mdi-silverware-spoon::before{content:"\F4A5"}.mdi-silverware-variant::before{content:"\F4A6"}.mdi-sim::before{content:"\F4A7"}.mdi-sim-alert::before{content:"\F4A8"}.mdi-sim-off::before{content:"\F4A9"}.mdi-simple-icons::before{content:"\F0348"}.mdi-sina-weibo::before{content:"\FADE"}.mdi-sitemap::before{content:"\F4AA"}.mdi-skate::before{content:"\FD11"}.mdi-skew-less::before{content:"\FD12"}.mdi-skew-more::before{content:"\FD13"}.mdi-ski::before{content:"\F032F"}.mdi-ski-cross-country::before{content:"\F0330"}.mdi-ski-water::before{content:"\F0331"}.mdi-skip-backward::before{content:"\F4AB"}.mdi-skip-backward-outline::before{content:"\FF42"}.mdi-skip-forward::before{content:"\F4AC"}.mdi-skip-forward-outline::before{content:"\FF43"}.mdi-skip-next::before{content:"\F4AD"}.mdi-skip-next-circle::before{content:"\F661"}.mdi-skip-next-circle-outline::before{content:"\F662"}.mdi-skip-next-outline::before{content:"\FF44"}.mdi-skip-previous::before{content:"\F4AE"}.mdi-skip-previous-circle::before{content:"\F663"}.mdi-skip-previous-circle-outline::before{content:"\F664"}.mdi-skip-previous-outline::before{content:"\FF45"}.mdi-skull::before{content:"\F68B"}.mdi-skull-crossbones::before{content:"\FBA2"}.mdi-skull-crossbones-outline::before{content:"\FBA3"}.mdi-skull-outline::before{content:"\FBA4"}.mdi-skype::before{content:"\F4AF"}.mdi-skype-business::before{content:"\F4B0"}.mdi-slack::before{content:"\F4B1"}.mdi-slackware::before{content:"\F90A"}.mdi-slash-forward::before{content:"\F0000"}.mdi-slash-forward-box::before{content:"\F0001"}.mdi-sleep::before{content:"\F4B2"}.mdi-sleep-off::before{content:"\F4B3"}.mdi-slope-downhill::before{content:"\FE5F"}.mdi-slope-uphill::before{content:"\FE60"}.mdi-slot-machine::before{content:"\F013F"}.mdi-slot-machine-outline::before{content:"\F0140"}.mdi-smart-card::before{content:"\F00E8"}.mdi-smart-card-outline::before{content:"\F00E9"}.mdi-smart-card-reader::before{content:"\F00EA"}.mdi-smart-card-reader-outline::before{content:"\F00EB"}.mdi-smog::before{content:"\FA70"}.mdi-smoke-detector::before{content:"\F392"}.mdi-smoking::before{content:"\F4B4"}.mdi-smoking-off::before{content:"\F4B5"}.mdi-snapchat::before{content:"\F4B6"}.mdi-snowboard::before{content:"\F0332"}.mdi-snowflake::before{content:"\F716"}.mdi-snowflake-alert::before{content:"\FF46"}.mdi-snowflake-melt::before{content:"\F02F6"}.mdi-snowflake-variant::before{content:"\FF47"}.mdi-snowman::before{content:"\F4B7"}.mdi-soccer::before{content:"\F4B8"}.mdi-soccer-field::before{content:"\F833"}.mdi-sofa::before{content:"\F4B9"}.mdi-solar-panel::before{content:"\FD77"}.mdi-solar-panel-large::before{content:"\FD78"}.mdi-solar-power::before{content:"\FA71"}.mdi-soldering-iron::before{content:"\F00BD"}.mdi-solid::before{content:"\F68C"}.mdi-sort::before{content:"\F4BA"}.mdi-sort-alphabetical::before{content:"\F4BB"}.mdi-sort-alphabetical-ascending::before{content:"\F0173"}.mdi-sort-alphabetical-descending::before{content:"\F0174"}.mdi-sort-ascending::before{content:"\F4BC"}.mdi-sort-descending::before{content:"\F4BD"}.mdi-sort-numeric::before{content:"\F4BE"}.mdi-sort-variant::before{content:"\F4BF"}.mdi-sort-variant-lock::before{content:"\FCA9"}.mdi-sort-variant-lock-open::before{content:"\FCAA"}.mdi-sort-variant-remove::before{content:"\F0172"}.mdi-soundcloud::before{content:"\F4C0"}.mdi-source-branch::before{content:"\F62C"}.mdi-source-commit::before{content:"\F717"}.mdi-source-commit-end::before{content:"\F718"}.mdi-source-commit-end-local::before{content:"\F719"}.mdi-source-commit-local::before{content:"\F71A"}.mdi-source-commit-next-local::before{content:"\F71B"}.mdi-source-commit-start::before{content:"\F71C"}.mdi-source-commit-start-next-local::before{content:"\F71D"}.mdi-source-fork::before{content:"\F4C1"}.mdi-source-merge::before{content:"\F62D"}.mdi-source-pull::before{content:"\F4C2"}.mdi-source-repository::before{content:"\FCAB"}.mdi-source-repository-multiple::before{content:"\FCAC"}.mdi-soy-sauce::before{content:"\F7ED"}.mdi-spa::before{content:"\FCAD"}.mdi-spa-outline::before{content:"\FCAE"}.mdi-space-invaders::before{content:"\FBA5"}.mdi-space-station::before{content:"\F03AE"}.mdi-spade::before{content:"\FE48"}.mdi-speaker::before{content:"\F4C3"}.mdi-speaker-bluetooth::before{content:"\F9A1"}.mdi-speaker-multiple::before{content:"\FD14"}.mdi-speaker-off::before{content:"\F4C4"}.mdi-speaker-wireless::before{content:"\F71E"}.mdi-speedometer::before{content:"\F4C5"}.mdi-speedometer-medium::before{content:"\FFA2"}.mdi-speedometer-slow::before{content:"\FFA3"}.mdi-spellcheck::before{content:"\F4C6"}.mdi-spider::before{content:"\F0215"}.mdi-spider-thread::before{content:"\F0216"}.mdi-spider-web::before{content:"\FBA6"}.mdi-spotify::before{content:"\F4C7"}.mdi-spotlight::before{content:"\F4C8"}.mdi-spotlight-beam::before{content:"\F4C9"}.mdi-spray::before{content:"\F665"}.mdi-spray-bottle::before{content:"\FADF"}.mdi-sprinkler::before{content:"\F0081"}.mdi-sprinkler-variant::before{content:"\F0082"}.mdi-sprout::before{content:"\FE49"}.mdi-sprout-outline::before{content:"\FE4A"}.mdi-square::before{content:"\F763"}.mdi-square-edit-outline::before{content:"\F90B"}.mdi-square-inc::before{content:"\F4CA"}.mdi-square-inc-cash::before{content:"\F4CB"}.mdi-square-medium::before{content:"\FA12"}.mdi-square-medium-outline::before{content:"\FA13"}.mdi-square-off::before{content:"\F0319"}.mdi-square-off-outline::before{content:"\F031A"}.mdi-square-outline::before{content:"\F762"}.mdi-square-root::before{content:"\F783"}.mdi-square-root-box::before{content:"\F9A2"}.mdi-square-small::before{content:"\FA14"}.mdi-squeegee::before{content:"\FAE0"}.mdi-ssh::before{content:"\F8BF"}.mdi-stack-exchange::before{content:"\F60B"}.mdi-stack-overflow::before{content:"\F4CC"}.mdi-stackpath::before{content:"\F359"}.mdi-stadium::before{content:"\F001A"}.mdi-stadium-variant::before{content:"\F71F"}.mdi-stairs::before{content:"\F4CD"}.mdi-stairs-down::before{content:"\F02E9"}.mdi-stairs-up::before{content:"\F02E8"}.mdi-stamper::before{content:"\FD15"}.mdi-standard-definition::before{content:"\F7EE"}.mdi-star::before{content:"\F4CE"}.mdi-star-box::before{content:"\FA72"}.mdi-star-box-multiple::before{content:"\F02B1"}.mdi-star-box-multiple-outline::before{content:"\F02B2"}.mdi-star-box-outline::before{content:"\FA73"}.mdi-star-circle::before{content:"\F4CF"}.mdi-star-circle-outline::before{content:"\F9A3"}.mdi-star-face::before{content:"\F9A4"}.mdi-star-four-points::before{content:"\FAE1"}.mdi-star-four-points-outline::before{content:"\FAE2"}.mdi-star-half::before{content:"\F4D0"}.mdi-star-off::before{content:"\F4D1"}.mdi-star-outline::before{content:"\F4D2"}.mdi-star-three-points::before{content:"\FAE3"}.mdi-star-three-points-outline::before{content:"\FAE4"}.mdi-state-machine::before{content:"\F021A"}.mdi-steam::before{content:"\F4D3"}.mdi-steam-box::before{content:"\F90C"}.mdi-steering::before{content:"\F4D4"}.mdi-steering-off::before{content:"\F90D"}.mdi-step-backward::before{content:"\F4D5"}.mdi-step-backward-2::before{content:"\F4D6"}.mdi-step-forward::before{content:"\F4D7"}.mdi-step-forward-2::before{content:"\F4D8"}.mdi-stethoscope::before{content:"\F4D9"}.mdi-sticker::before{content:"\F038F"}.mdi-sticker-alert::before{content:"\F0390"}.mdi-sticker-alert-outline::before{content:"\F0391"}.mdi-sticker-check::before{content:"\F0392"}.mdi-sticker-check-outline::before{content:"\F0393"}.mdi-sticker-circle-outline::before{content:"\F5D0"}.mdi-sticker-emoji::before{content:"\F784"}.mdi-sticker-minus::before{content:"\F0394"}.mdi-sticker-minus-outline::before{content:"\F0395"}.mdi-sticker-outline::before{content:"\F0396"}.mdi-sticker-plus::before{content:"\F0397"}.mdi-sticker-plus-outline::before{content:"\F0398"}.mdi-sticker-remove::before{content:"\F0399"}.mdi-sticker-remove-outline::before{content:"\F039A"}.mdi-stocking::before{content:"\F4DA"}.mdi-stomach::before{content:"\F00BE"}.mdi-stop::before{content:"\F4DB"}.mdi-stop-circle::before{content:"\F666"}.mdi-stop-circle-outline::before{content:"\F667"}.mdi-store::before{content:"\F4DC"}.mdi-store-24-hour::before{content:"\F4DD"}.mdi-store-outline::before{content:"\F038C"}.mdi-storefront::before{content:"\F00EC"}.mdi-stove::before{content:"\F4DE"}.mdi-strategy::before{content:"\F0201"}.mdi-strava::before{content:"\FB25"}.mdi-stretch-to-page::before{content:"\FF48"}.mdi-stretch-to-page-outline::before{content:"\FF49"}.mdi-string-lights::before{content:"\F02E5"}.mdi-string-lights-off::before{content:"\F02E6"}.mdi-subdirectory-arrow-left::before{content:"\F60C"}.mdi-subdirectory-arrow-right::before{content:"\F60D"}.mdi-subtitles::before{content:"\FA15"}.mdi-subtitles-outline::before{content:"\FA16"}.mdi-subway::before{content:"\F6AB"}.mdi-subway-alert-variant::before{content:"\FD79"}.mdi-subway-variant::before{content:"\F4DF"}.mdi-summit::before{content:"\F785"}.mdi-sunglasses::before{content:"\F4E0"}.mdi-surround-sound::before{content:"\F5C5"}.mdi-surround-sound-2-0::before{content:"\F7EF"}.mdi-surround-sound-3-1::before{content:"\F7F0"}.mdi-surround-sound-5-1::before{content:"\F7F1"}.mdi-surround-sound-7-1::before{content:"\F7F2"}.mdi-svg::before{content:"\F720"}.mdi-swap-horizontal::before{content:"\F4E1"}.mdi-swap-horizontal-bold::before{content:"\FBA9"}.mdi-swap-horizontal-circle::before{content:"\F0002"}.mdi-swap-horizontal-circle-outline::before{content:"\F0003"}.mdi-swap-horizontal-variant::before{content:"\F8C0"}.mdi-swap-vertical::before{content:"\F4E2"}.mdi-swap-vertical-bold::before{content:"\FBAA"}.mdi-swap-vertical-circle::before{content:"\F0004"}.mdi-swap-vertical-circle-outline::before{content:"\F0005"}.mdi-swap-vertical-variant::before{content:"\F8C1"}.mdi-swim::before{content:"\F4E3"}.mdi-switch::before{content:"\F4E4"}.mdi-sword::before{content:"\F4E5"}.mdi-sword-cross::before{content:"\F786"}.mdi-syllabary-hangul::before{content:"\F035E"}.mdi-syllabary-hiragana::before{content:"\F035F"}.mdi-syllabary-katakana::before{content:"\F0360"}.mdi-syllabary-katakana-half-width::before{content:"\F0361"}.mdi-symfony::before{content:"\FAE5"}.mdi-sync::before{content:"\F4E6"}.mdi-sync-alert::before{content:"\F4E7"}.mdi-sync-circle::before{content:"\F03A3"}.mdi-sync-off::before{content:"\F4E8"}.mdi-tab::before{content:"\F4E9"}.mdi-tab-minus::before{content:"\FB26"}.mdi-tab-plus::before{content:"\F75B"}.mdi-tab-remove::before{content:"\FB27"}.mdi-tab-unselected::before{content:"\F4EA"}.mdi-table::before{content:"\F4EB"}.mdi-table-border::before{content:"\FA17"}.mdi-table-chair::before{content:"\F0083"}.mdi-table-column::before{content:"\F834"}.mdi-table-column-plus-after::before{content:"\F4EC"}.mdi-table-column-plus-before::before{content:"\F4ED"}.mdi-table-column-remove::before{content:"\F4EE"}.mdi-table-column-width::before{content:"\F4EF"}.mdi-table-edit::before{content:"\F4F0"}.mdi-table-eye::before{content:"\F00BF"}.mdi-table-headers-eye::before{content:"\F0248"}.mdi-table-headers-eye-off::before{content:"\F0249"}.mdi-table-large::before{content:"\F4F1"}.mdi-table-large-plus::before{content:"\FFA4"}.mdi-table-large-remove::before{content:"\FFA5"}.mdi-table-merge-cells::before{content:"\F9A5"}.mdi-table-of-contents::before{content:"\F835"}.mdi-table-plus::before{content:"\FA74"}.mdi-table-remove::before{content:"\FA75"}.mdi-table-row::before{content:"\F836"}.mdi-table-row-height::before{content:"\F4F2"}.mdi-table-row-plus-after::before{content:"\F4F3"}.mdi-table-row-plus-before::before{content:"\F4F4"}.mdi-table-row-remove::before{content:"\F4F5"}.mdi-table-search::before{content:"\F90E"}.mdi-table-settings::before{content:"\F837"}.mdi-table-tennis::before{content:"\FE4B"}.mdi-tablet::before{content:"\F4F6"}.mdi-tablet-android::before{content:"\F4F7"}.mdi-tablet-cellphone::before{content:"\F9A6"}.mdi-tablet-dashboard::before{content:"\FEEB"}.mdi-tablet-ipad::before{content:"\F4F8"}.mdi-taco::before{content:"\F761"}.mdi-tag::before{content:"\F4F9"}.mdi-tag-faces::before{content:"\F4FA"}.mdi-tag-heart::before{content:"\F68A"}.mdi-tag-heart-outline::before{content:"\FBAB"}.mdi-tag-minus::before{content:"\F90F"}.mdi-tag-minus-outline::before{content:"\F024A"}.mdi-tag-multiple::before{content:"\F4FB"}.mdi-tag-multiple-outline::before{content:"\F0322"}.mdi-tag-off::before{content:"\F024B"}.mdi-tag-off-outline::before{content:"\F024C"}.mdi-tag-outline::before{content:"\F4FC"}.mdi-tag-plus::before{content:"\F721"}.mdi-tag-plus-outline::before{content:"\F024D"}.mdi-tag-remove::before{content:"\F722"}.mdi-tag-remove-outline::before{content:"\F024E"}.mdi-tag-text::before{content:"\F024F"}.mdi-tag-text-outline::before{content:"\F4FD"}.mdi-tank::before{content:"\FD16"}.mdi-tanker-truck::before{content:"\F0006"}.mdi-tape-measure::before{content:"\FB28"}.mdi-target::before{content:"\F4FE"}.mdi-target-account::before{content:"\FBAC"}.mdi-target-variant::before{content:"\FA76"}.mdi-taxi::before{content:"\F4FF"}.mdi-tea::before{content:"\FD7A"}.mdi-tea-outline::before{content:"\FD7B"}.mdi-teach::before{content:"\F88F"}.mdi-teamviewer::before{content:"\F500"}.mdi-telegram::before{content:"\F501"}.mdi-telescope::before{content:"\FB29"}.mdi-television::before{content:"\F502"}.mdi-television-ambient-light::before{content:"\F0381"}.mdi-television-box::before{content:"\F838"}.mdi-television-classic::before{content:"\F7F3"}.mdi-television-classic-off::before{content:"\F839"}.mdi-television-clean::before{content:"\F013B"}.mdi-television-guide::before{content:"\F503"}.mdi-television-off::before{content:"\F83A"}.mdi-television-pause::before{content:"\FFA6"}.mdi-television-play::before{content:"\FEEC"}.mdi-television-stop::before{content:"\FFA7"}.mdi-temperature-celsius::before{content:"\F504"}.mdi-temperature-fahrenheit::before{content:"\F505"}.mdi-temperature-kelvin::before{content:"\F506"}.mdi-tennis::before{content:"\FD7C"}.mdi-tennis-ball::before{content:"\F507"}.mdi-tent::before{content:"\F508"}.mdi-terraform::before{content:"\F0084"}.mdi-terrain::before{content:"\F509"}.mdi-test-tube::before{content:"\F668"}.mdi-test-tube-empty::before{content:"\F910"}.mdi-test-tube-off::before{content:"\F911"}.mdi-text::before{content:"\F9A7"}.mdi-text-recognition::before{content:"\F0168"}.mdi-text-shadow::before{content:"\F669"}.mdi-text-short::before{content:"\F9A8"}.mdi-text-subject::before{content:"\F9A9"}.mdi-text-to-speech::before{content:"\F50A"}.mdi-text-to-speech-off::before{content:"\F50B"}.mdi-textarea::before{content:"\F00C0"}.mdi-textbox::before{content:"\F60E"}.mdi-textbox-lock::before{content:"\F0388"}.mdi-textbox-password::before{content:"\F7F4"}.mdi-texture::before{content:"\F50C"}.mdi-texture-box::before{content:"\F0007"}.mdi-theater::before{content:"\F50D"}.mdi-theme-light-dark::before{content:"\F50E"}.mdi-thermometer::before{content:"\F50F"}.mdi-thermometer-alert::before{content:"\FE61"}.mdi-thermometer-chevron-down::before{content:"\FE62"}.mdi-thermometer-chevron-up::before{content:"\FE63"}.mdi-thermometer-high::before{content:"\F00ED"}.mdi-thermometer-lines::before{content:"\F510"}.mdi-thermometer-low::before{content:"\F00EE"}.mdi-thermometer-minus::before{content:"\FE64"}.mdi-thermometer-plus::before{content:"\FE65"}.mdi-thermostat::before{content:"\F393"}.mdi-thermostat-box::before{content:"\F890"}.mdi-thought-bubble::before{content:"\F7F5"}.mdi-thought-bubble-outline::before{content:"\F7F6"}.mdi-thumb-down::before{content:"\F511"}.mdi-thumb-down-outline::before{content:"\F512"}.mdi-thumb-up::before{content:"\F513"}.mdi-thumb-up-outline::before{content:"\F514"}.mdi-thumbs-up-down::before{content:"\F515"}.mdi-ticket::before{content:"\F516"}.mdi-ticket-account::before{content:"\F517"}.mdi-ticket-confirmation::before{content:"\F518"}.mdi-ticket-outline::before{content:"\F912"}.mdi-ticket-percent::before{content:"\F723"}.mdi-tie::before{content:"\F519"}.mdi-tilde::before{content:"\F724"}.mdi-timelapse::before{content:"\F51A"}.mdi-timeline::before{content:"\FBAD"}.mdi-timeline-alert::before{content:"\FFB2"}.mdi-timeline-alert-outline::before{content:"\FFB5"}.mdi-timeline-clock::before{content:"\F0226"}.mdi-timeline-clock-outline::before{content:"\F0227"}.mdi-timeline-help::before{content:"\FFB6"}.mdi-timeline-help-outline::before{content:"\FFB7"}.mdi-timeline-outline::before{content:"\FBAE"}.mdi-timeline-plus::before{content:"\FFB3"}.mdi-timeline-plus-outline::before{content:"\FFB4"}.mdi-timeline-text::before{content:"\FBAF"}.mdi-timeline-text-outline::before{content:"\FBB0"}.mdi-timer::before{content:"\F51B"}.mdi-timer-10::before{content:"\F51C"}.mdi-timer-3::before{content:"\F51D"}.mdi-timer-off::before{content:"\F51E"}.mdi-timer-sand::before{content:"\F51F"}.mdi-timer-sand-empty::before{content:"\F6AC"}.mdi-timer-sand-full::before{content:"\F78B"}.mdi-timetable::before{content:"\F520"}.mdi-toaster::before{content:"\F0085"}.mdi-toaster-off::before{content:"\F01E2"}.mdi-toaster-oven::before{content:"\FCAF"}.mdi-toggle-switch::before{content:"\F521"}.mdi-toggle-switch-off::before{content:"\F522"}.mdi-toggle-switch-off-outline::before{content:"\FA18"}.mdi-toggle-switch-outline::before{content:"\FA19"}.mdi-toilet::before{content:"\F9AA"}.mdi-toolbox::before{content:"\F9AB"}.mdi-toolbox-outline::before{content:"\F9AC"}.mdi-tools::before{content:"\F0086"}.mdi-tooltip::before{content:"\F523"}.mdi-tooltip-account::before{content:"\F00C"}.mdi-tooltip-edit::before{content:"\F524"}.mdi-tooltip-edit-outline::before{content:"\F02F0"}.mdi-tooltip-image::before{content:"\F525"}.mdi-tooltip-image-outline::before{content:"\FBB1"}.mdi-tooltip-outline::before{content:"\F526"}.mdi-tooltip-plus::before{content:"\FBB2"}.mdi-tooltip-plus-outline::before{content:"\F527"}.mdi-tooltip-text::before{content:"\F528"}.mdi-tooltip-text-outline::before{content:"\FBB3"}.mdi-tooth::before{content:"\F8C2"}.mdi-tooth-outline::before{content:"\F529"}.mdi-toothbrush::before{content:"\F0154"}.mdi-toothbrush-electric::before{content:"\F0157"}.mdi-toothbrush-paste::before{content:"\F0155"}.mdi-tor::before{content:"\F52A"}.mdi-tortoise::before{content:"\FD17"}.mdi-toslink::before{content:"\F02E3"}.mdi-tournament::before{content:"\F9AD"}.mdi-tower-beach::before{content:"\F680"}.mdi-tower-fire::before{content:"\F681"}.mdi-towing::before{content:"\F83B"}.mdi-toy-brick::before{content:"\F02B3"}.mdi-toy-brick-marker::before{content:"\F02B4"}.mdi-toy-brick-marker-outline::before{content:"\F02B5"}.mdi-toy-brick-minus::before{content:"\F02B6"}.mdi-toy-brick-minus-outline::before{content:"\F02B7"}.mdi-toy-brick-outline::before{content:"\F02B8"}.mdi-toy-brick-plus::before{content:"\F02B9"}.mdi-toy-brick-plus-outline::before{content:"\F02BA"}.mdi-toy-brick-remove::before{content:"\F02BB"}.mdi-toy-brick-remove-outline::before{content:"\F02BC"}.mdi-toy-brick-search::before{content:"\F02BD"}.mdi-toy-brick-search-outline::before{content:"\F02BE"}.mdi-track-light::before{content:"\F913"}.mdi-trackpad::before{content:"\F7F7"}.mdi-trackpad-lock::before{content:"\F932"}.mdi-tractor::before{content:"\F891"}.mdi-trademark::before{content:"\FA77"}.mdi-traffic-cone::before{content:"\F03A7"}.mdi-traffic-light::before{content:"\F52B"}.mdi-train::before{content:"\F52C"}.mdi-train-car::before{content:"\FBB4"}.mdi-train-variant::before{content:"\F8C3"}.mdi-tram::before{content:"\F52D"}.mdi-tram-side::before{content:"\F0008"}.mdi-transcribe::before{content:"\F52E"}.mdi-transcribe-close::before{content:"\F52F"}.mdi-transfer::before{content:"\F0087"}.mdi-transfer-down::before{content:"\FD7D"}.mdi-transfer-left::before{content:"\FD7E"}.mdi-transfer-right::before{content:"\F530"}.mdi-transfer-up::before{content:"\FD7F"}.mdi-transit-connection::before{content:"\FD18"}.mdi-transit-connection-variant::before{content:"\FD19"}.mdi-transit-detour::before{content:"\FFA8"}.mdi-transit-transfer::before{content:"\F6AD"}.mdi-transition::before{content:"\F914"}.mdi-transition-masked::before{content:"\F915"}.mdi-translate::before{content:"\F5CA"}.mdi-translate-off::before{content:"\FE66"}.mdi-transmission-tower::before{content:"\FD1A"}.mdi-trash-can::before{content:"\FA78"}.mdi-trash-can-outline::before{content:"\FA79"}.mdi-tray::before{content:"\F02BF"}.mdi-tray-alert::before{content:"\F02C0"}.mdi-tray-full::before{content:"\F02C1"}.mdi-tray-minus::before{content:"\F02C2"}.mdi-tray-plus::before{content:"\F02C3"}.mdi-tray-remove::before{content:"\F02C4"}.mdi-treasure-chest::before{content:"\F725"}.mdi-tree::before{content:"\F531"}.mdi-tree-outline::before{content:"\FE4C"}.mdi-trello::before{content:"\F532"}.mdi-trending-down::before{content:"\F533"}.mdi-trending-neutral::before{content:"\F534"}.mdi-trending-up::before{content:"\F535"}.mdi-triangle::before{content:"\F536"}.mdi-triangle-outline::before{content:"\F537"}.mdi-triforce::before{content:"\FBB5"}.mdi-trophy::before{content:"\F538"}.mdi-trophy-award::before{content:"\F539"}.mdi-trophy-broken::before{content:"\FD80"}.mdi-trophy-outline::before{content:"\F53A"}.mdi-trophy-variant::before{content:"\F53B"}.mdi-trophy-variant-outline::before{content:"\F53C"}.mdi-truck::before{content:"\F53D"}.mdi-truck-check::before{content:"\FCB0"}.mdi-truck-check-outline::before{content:"\F02C5"}.mdi-truck-delivery::before{content:"\F53E"}.mdi-truck-delivery-outline::before{content:"\F02C6"}.mdi-truck-fast::before{content:"\F787"}.mdi-truck-fast-outline::before{content:"\F02C7"}.mdi-truck-outline::before{content:"\F02C8"}.mdi-truck-trailer::before{content:"\F726"}.mdi-trumpet::before{content:"\F00C1"}.mdi-tshirt-crew::before{content:"\FA7A"}.mdi-tshirt-crew-outline::before{content:"\F53F"}.mdi-tshirt-v::before{content:"\FA7B"}.mdi-tshirt-v-outline::before{content:"\F540"}.mdi-tumble-dryer::before{content:"\F916"}.mdi-tumble-dryer-alert::before{content:"\F01E5"}.mdi-tumble-dryer-off::before{content:"\F01E6"}.mdi-tumblr::before{content:"\F541"}.mdi-tumblr-box::before{content:"\F917"}.mdi-tumblr-reblog::before{content:"\F542"}.mdi-tune::before{content:"\F62E"}.mdi-tune-vertical::before{content:"\F66A"}.mdi-turnstile::before{content:"\FCB1"}.mdi-turnstile-outline::before{content:"\FCB2"}.mdi-turtle::before{content:"\FCB3"}.mdi-twitch::before{content:"\F543"}.mdi-twitter::before{content:"\F544"}.mdi-twitter-box::before{content:"\F545"}.mdi-twitter-circle::before{content:"\F546"}.mdi-twitter-retweet::before{content:"\F547"}.mdi-two-factor-authentication::before{content:"\F9AE"}.mdi-typewriter::before{content:"\FF4A"}.mdi-uber::before{content:"\F748"}.mdi-ubisoft::before{content:"\FBB6"}.mdi-ubuntu::before{content:"\F548"}.mdi-ufo::before{content:"\F00EF"}.mdi-ufo-outline::before{content:"\F00F0"}.mdi-ultra-high-definition::before{content:"\F7F8"}.mdi-umbraco::before{content:"\F549"}.mdi-umbrella::before{content:"\F54A"}.mdi-umbrella-closed::before{content:"\F9AF"}.mdi-umbrella-outline::before{content:"\F54B"}.mdi-undo::before{content:"\F54C"}.mdi-undo-variant::before{content:"\F54D"}.mdi-unfold-less-horizontal::before{content:"\F54E"}.mdi-unfold-less-vertical::before{content:"\F75F"}.mdi-unfold-more-horizontal::before{content:"\F54F"}.mdi-unfold-more-vertical::before{content:"\F760"}.mdi-ungroup::before{content:"\F550"}.mdi-unicode::before{content:"\FEED"}.mdi-unity::before{content:"\F6AE"}.mdi-unreal::before{content:"\F9B0"}.mdi-untappd::before{content:"\F551"}.mdi-update::before{content:"\F6AF"}.mdi-upload::before{content:"\F552"}.mdi-upload-lock::before{content:"\F039E"}.mdi-upload-lock-outline::before{content:"\F039F"}.mdi-upload-multiple::before{content:"\F83C"}.mdi-upload-network::before{content:"\F6F5"}.mdi-upload-network-outline::before{content:"\FCB4"}.mdi-upload-off::before{content:"\F00F1"}.mdi-upload-off-outline::before{content:"\F00F2"}.mdi-upload-outline::before{content:"\FE67"}.mdi-usb::before{content:"\F553"}.mdi-usb-flash-drive::before{content:"\F02C9"}.mdi-usb-flash-drive-outline::before{content:"\F02CA"}.mdi-usb-port::before{content:"\F021B"}.mdi-valve::before{content:"\F0088"}.mdi-valve-closed::before{content:"\F0089"}.mdi-valve-open::before{content:"\F008A"}.mdi-van-passenger::before{content:"\F7F9"}.mdi-van-utility::before{content:"\F7FA"}.mdi-vanish::before{content:"\F7FB"}.mdi-vanity-light::before{content:"\F020C"}.mdi-variable::before{content:"\FAE6"}.mdi-variable-box::before{content:"\F013C"}.mdi-vector-arrange-above::before{content:"\F554"}.mdi-vector-arrange-below::before{content:"\F555"}.mdi-vector-bezier::before{content:"\FAE7"}.mdi-vector-circle::before{content:"\F556"}.mdi-vector-circle-variant::before{content:"\F557"}.mdi-vector-combine::before{content:"\F558"}.mdi-vector-curve::before{content:"\F559"}.mdi-vector-difference::before{content:"\F55A"}.mdi-vector-difference-ab::before{content:"\F55B"}.mdi-vector-difference-ba::before{content:"\F55C"}.mdi-vector-ellipse::before{content:"\F892"}.mdi-vector-intersection::before{content:"\F55D"}.mdi-vector-line::before{content:"\F55E"}.mdi-vector-link::before{content:"\F0009"}.mdi-vector-point::before{content:"\F55F"}.mdi-vector-polygon::before{content:"\F560"}.mdi-vector-polyline::before{content:"\F561"}.mdi-vector-polyline-edit::before{content:"\F0250"}.mdi-vector-polyline-minus::before{content:"\F0251"}.mdi-vector-polyline-plus::before{content:"\F0252"}.mdi-vector-polyline-remove::before{content:"\F0253"}.mdi-vector-radius::before{content:"\F749"}.mdi-vector-rectangle::before{content:"\F5C6"}.mdi-vector-selection::before{content:"\F562"}.mdi-vector-square::before{content:"\F001"}.mdi-vector-triangle::before{content:"\F563"}.mdi-vector-union::before{content:"\F564"}.mdi-venmo::before{content:"\F578"}.mdi-vhs::before{content:"\FA1A"}.mdi-vibrate::before{content:"\F566"}.mdi-vibrate-off::before{content:"\FCB5"}.mdi-video::before{content:"\F567"}.mdi-video-3d::before{content:"\F7FC"}.mdi-video-3d-variant::before{content:"\FEEE"}.mdi-video-4k-box::before{content:"\F83D"}.mdi-video-account::before{content:"\F918"}.mdi-video-check::before{content:"\F008B"}.mdi-video-check-outline::before{content:"\F008C"}.mdi-video-image::before{content:"\F919"}.mdi-video-input-antenna::before{content:"\F83E"}.mdi-video-input-component::before{content:"\F83F"}.mdi-video-input-hdmi::before{content:"\F840"}.mdi-video-input-scart::before{content:"\FFA9"}.mdi-video-input-svideo::before{content:"\F841"}.mdi-video-minus::before{content:"\F9B1"}.mdi-video-off::before{content:"\F568"}.mdi-video-off-outline::before{content:"\FBB7"}.mdi-video-outline::before{content:"\FBB8"}.mdi-video-plus::before{content:"\F9B2"}.mdi-video-stabilization::before{content:"\F91A"}.mdi-video-switch::before{content:"\F569"}.mdi-video-vintage::before{content:"\FA1B"}.mdi-video-wireless::before{content:"\FEEF"}.mdi-video-wireless-outline::before{content:"\FEF0"}.mdi-view-agenda::before{content:"\F56A"}.mdi-view-agenda-outline::before{content:"\F0203"}.mdi-view-array::before{content:"\F56B"}.mdi-view-carousel::before{content:"\F56C"}.mdi-view-column::before{content:"\F56D"}.mdi-view-comfy::before{content:"\FE4D"}.mdi-view-compact::before{content:"\FE4E"}.mdi-view-compact-outline::before{content:"\FE4F"}.mdi-view-dashboard::before{content:"\F56E"}.mdi-view-dashboard-outline::before{content:"\FA1C"}.mdi-view-dashboard-variant::before{content:"\F842"}.mdi-view-day::before{content:"\F56F"}.mdi-view-grid::before{content:"\F570"}.mdi-view-grid-outline::before{content:"\F0204"}.mdi-view-grid-plus::before{content:"\FFAA"}.mdi-view-grid-plus-outline::before{content:"\F0205"}.mdi-view-headline::before{content:"\F571"}.mdi-view-list::before{content:"\F572"}.mdi-view-module::before{content:"\F573"}.mdi-view-parallel::before{content:"\F727"}.mdi-view-quilt::before{content:"\F574"}.mdi-view-sequential::before{content:"\F728"}.mdi-view-split-horizontal::before{content:"\FBA7"}.mdi-view-split-vertical::before{content:"\FBA8"}.mdi-view-stream::before{content:"\F575"}.mdi-view-week::before{content:"\F576"}.mdi-vimeo::before{content:"\F577"}.mdi-violin::before{content:"\F60F"}.mdi-virtual-reality::before{content:"\F893"}.mdi-visual-studio::before{content:"\F610"}.mdi-visual-studio-code::before{content:"\FA1D"}.mdi-vk::before{content:"\F579"}.mdi-vk-box::before{content:"\F57A"}.mdi-vk-circle::before{content:"\F57B"}.mdi-vlc::before{content:"\F57C"}.mdi-voice::before{content:"\F5CB"}.mdi-voice-off::before{content:"\FEF1"}.mdi-voicemail::before{content:"\F57D"}.mdi-volleyball::before{content:"\F9B3"}.mdi-volume-high::before{content:"\F57E"}.mdi-volume-low::before{content:"\F57F"}.mdi-volume-medium::before{content:"\F580"}.mdi-volume-minus::before{content:"\F75D"}.mdi-volume-mute::before{content:"\F75E"}.mdi-volume-off::before{content:"\F581"}.mdi-volume-plus::before{content:"\F75C"}.mdi-volume-source::before{content:"\F014B"}.mdi-volume-variant-off::before{content:"\FE68"}.mdi-volume-vibrate::before{content:"\F014C"}.mdi-vote::before{content:"\FA1E"}.mdi-vote-outline::before{content:"\FA1F"}.mdi-vpn::before{content:"\F582"}.mdi-vuejs::before{content:"\F843"}.mdi-vuetify::before{content:"\FE50"}.mdi-walk::before{content:"\F583"}.mdi-wall::before{content:"\F7FD"}.mdi-wall-sconce::before{content:"\F91B"}.mdi-wall-sconce-flat::before{content:"\F91C"}.mdi-wall-sconce-variant::before{content:"\F91D"}.mdi-wallet::before{content:"\F584"}.mdi-wallet-giftcard::before{content:"\F585"}.mdi-wallet-membership::before{content:"\F586"}.mdi-wallet-outline::before{content:"\FBB9"}.mdi-wallet-plus::before{content:"\FFAB"}.mdi-wallet-plus-outline::before{content:"\FFAC"}.mdi-wallet-travel::before{content:"\F587"}.mdi-wallpaper::before{content:"\FE69"}.mdi-wan::before{content:"\F588"}.mdi-wardrobe::before{content:"\FFAD"}.mdi-wardrobe-outline::before{content:"\FFAE"}.mdi-warehouse::before{content:"\FFBB"}.mdi-washing-machine::before{content:"\F729"}.mdi-washing-machine-alert::before{content:"\F01E7"}.mdi-washing-machine-off::before{content:"\F01E8"}.mdi-watch::before{content:"\F589"}.mdi-watch-export::before{content:"\F58A"}.mdi-watch-export-variant::before{content:"\F894"}.mdi-watch-import::before{content:"\F58B"}.mdi-watch-import-variant::before{content:"\F895"}.mdi-watch-variant::before{content:"\F896"}.mdi-watch-vibrate::before{content:"\F6B0"}.mdi-watch-vibrate-off::before{content:"\FCB6"}.mdi-water::before{content:"\F58C"}.mdi-water-boiler::before{content:"\FFAF"}.mdi-water-boiler-alert::before{content:"\F01DE"}.mdi-water-boiler-off::before{content:"\F01DF"}.mdi-water-off::before{content:"\F58D"}.mdi-water-outline::before{content:"\FE6A"}.mdi-water-percent::before{content:"\F58E"}.mdi-water-polo::before{content:"\F02CB"}.mdi-water-pump::before{content:"\F58F"}.mdi-water-pump-off::before{content:"\FFB0"}.mdi-water-well::before{content:"\F008D"}.mdi-water-well-outline::before{content:"\F008E"}.mdi-watermark::before{content:"\F612"}.mdi-wave::before{content:"\FF4B"}.mdi-waves::before{content:"\F78C"}.mdi-waze::before{content:"\FBBA"}.mdi-weather-cloudy::before{content:"\F590"}.mdi-weather-cloudy-alert::before{content:"\FF4C"}.mdi-weather-cloudy-arrow-right::before{content:"\FE51"}.mdi-weather-fog::before{content:"\F591"}.mdi-weather-hail::before{content:"\F592"}.mdi-weather-hazy::before{content:"\FF4D"}.mdi-weather-hurricane::before{content:"\F897"}.mdi-weather-lightning::before{content:"\F593"}.mdi-weather-lightning-rainy::before{content:"\F67D"}.mdi-weather-night::before{content:"\F594"}.mdi-weather-night-partly-cloudy::before{content:"\FF4E"}.mdi-weather-partly-cloudy::before{content:"\F595"}.mdi-weather-partly-lightning::before{content:"\FF4F"}.mdi-weather-partly-rainy::before{content:"\FF50"}.mdi-weather-partly-snowy::before{content:"\FF51"}.mdi-weather-partly-snowy-rainy::before{content:"\FF52"}.mdi-weather-pouring::before{content:"\F596"}.mdi-weather-rainy::before{content:"\F597"}.mdi-weather-snowy::before{content:"\F598"}.mdi-weather-snowy-heavy::before{content:"\FF53"}.mdi-weather-snowy-rainy::before{content:"\F67E"}.mdi-weather-sunny::before{content:"\F599"}.mdi-weather-sunny-alert::before{content:"\FF54"}.mdi-weather-sunset::before{content:"\F59A"}.mdi-weather-sunset-down::before{content:"\F59B"}.mdi-weather-sunset-up::before{content:"\F59C"}.mdi-weather-tornado::before{content:"\FF55"}.mdi-weather-windy::before{content:"\F59D"}.mdi-weather-windy-variant::before{content:"\F59E"}.mdi-web::before{content:"\F59F"}.mdi-web-box::before{content:"\FFB1"}.mdi-web-clock::before{content:"\F0275"}.mdi-webcam::before{content:"\F5A0"}.mdi-webhook::before{content:"\F62F"}.mdi-webpack::before{content:"\F72A"}.mdi-webrtc::before{content:"\F0273"}.mdi-wechat::before{content:"\F611"}.mdi-weight::before{content:"\F5A1"}.mdi-weight-gram::before{content:"\FD1B"}.mdi-weight-kilogram::before{content:"\F5A2"}.mdi-weight-lifter::before{content:"\F0188"}.mdi-weight-pound::before{content:"\F9B4"}.mdi-whatsapp::before{content:"\F5A3"}.mdi-wheelchair-accessibility::before{content:"\F5A4"}.mdi-whistle::before{content:"\F9B5"}.mdi-whistle-outline::before{content:"\F02E7"}.mdi-white-balance-auto::before{content:"\F5A5"}.mdi-white-balance-incandescent::before{content:"\F5A6"}.mdi-white-balance-iridescent::before{content:"\F5A7"}.mdi-white-balance-sunny::before{content:"\F5A8"}.mdi-widgets::before{content:"\F72B"}.mdi-widgets-outline::before{content:"\F0380"}.mdi-wifi::before{content:"\F5A9"}.mdi-wifi-off::before{content:"\F5AA"}.mdi-wifi-star::before{content:"\FE6B"}.mdi-wifi-strength-1::before{content:"\F91E"}.mdi-wifi-strength-1-alert::before{content:"\F91F"}.mdi-wifi-strength-1-lock::before{content:"\F920"}.mdi-wifi-strength-2::before{content:"\F921"}.mdi-wifi-strength-2-alert::before{content:"\F922"}.mdi-wifi-strength-2-lock::before{content:"\F923"}.mdi-wifi-strength-3::before{content:"\F924"}.mdi-wifi-strength-3-alert::before{content:"\F925"}.mdi-wifi-strength-3-lock::before{content:"\F926"}.mdi-wifi-strength-4::before{content:"\F927"}.mdi-wifi-strength-4-alert::before{content:"\F928"}.mdi-wifi-strength-4-lock::before{content:"\F929"}.mdi-wifi-strength-alert-outline::before{content:"\F92A"}.mdi-wifi-strength-lock-outline::before{content:"\F92B"}.mdi-wifi-strength-off::before{content:"\F92C"}.mdi-wifi-strength-off-outline::before{content:"\F92D"}.mdi-wifi-strength-outline::before{content:"\F92E"}.mdi-wii::before{content:"\F5AB"}.mdi-wiiu::before{content:"\F72C"}.mdi-wikipedia::before{content:"\F5AC"}.mdi-wind-turbine::before{content:"\FD81"}.mdi-window-close::before{content:"\F5AD"}.mdi-window-closed::before{content:"\F5AE"}.mdi-window-closed-variant::before{content:"\F0206"}.mdi-window-maximize::before{content:"\F5AF"}.mdi-window-minimize::before{content:"\F5B0"}.mdi-window-open::before{content:"\F5B1"}.mdi-window-open-variant::before{content:"\F0207"}.mdi-window-restore::before{content:"\F5B2"}.mdi-window-shutter::before{content:"\F0147"}.mdi-window-shutter-alert::before{content:"\F0148"}.mdi-window-shutter-open::before{content:"\F0149"}.mdi-windows::before{content:"\F5B3"}.mdi-windows-classic::before{content:"\FA20"}.mdi-wiper::before{content:"\FAE8"}.mdi-wiper-wash::before{content:"\FD82"}.mdi-wordpress::before{content:"\F5B4"}.mdi-worker::before{content:"\F5B5"}.mdi-wrap::before{content:"\F5B6"}.mdi-wrap-disabled::before{content:"\FBBB"}.mdi-wrench::before{content:"\F5B7"}.mdi-wrench-outline::before{content:"\FBBC"}.mdi-wunderlist::before{content:"\F5B8"}.mdi-xamarin::before{content:"\F844"}.mdi-xamarin-outline::before{content:"\F845"}.mdi-xaml::before{content:"\F673"}.mdi-xbox::before{content:"\F5B9"}.mdi-xbox-controller::before{content:"\F5BA"}.mdi-xbox-controller-battery-alert::before{content:"\F74A"}.mdi-xbox-controller-battery-charging::before{content:"\FA21"}.mdi-xbox-controller-battery-empty::before{content:"\F74B"}.mdi-xbox-controller-battery-full::before{content:"\F74C"}.mdi-xbox-controller-battery-low::before{content:"\F74D"}.mdi-xbox-controller-battery-medium::before{content:"\F74E"}.mdi-xbox-controller-battery-unknown::before{content:"\F74F"}.mdi-xbox-controller-menu::before{content:"\FE52"}.mdi-xbox-controller-off::before{content:"\F5BB"}.mdi-xbox-controller-view::before{content:"\FE53"}.mdi-xda::before{content:"\F5BC"}.mdi-xing::before{content:"\F5BD"}.mdi-xing-box::before{content:"\F5BE"}.mdi-xing-circle::before{content:"\F5BF"}.mdi-xml::before{content:"\F5C0"}.mdi-xmpp::before{content:"\F7FE"}.mdi-yahoo::before{content:"\FB2A"}.mdi-yammer::before{content:"\F788"}.mdi-yeast::before{content:"\F5C1"}.mdi-yelp::before{content:"\F5C2"}.mdi-yin-yang::before{content:"\F67F"}.mdi-yoga::before{content:"\F01A7"}.mdi-youtube::before{content:"\F5C3"}.mdi-youtube-creator-studio::before{content:"\F846"}.mdi-youtube-gaming::before{content:"\F847"}.mdi-youtube-subscription::before{content:"\FD1C"}.mdi-youtube-tv::before{content:"\F448"}.mdi-z-wave::before{content:"\FAE9"}.mdi-zend::before{content:"\FAEA"}.mdi-zigbee::before{content:"\FD1D"}.mdi-zip-box::before{content:"\F5C4"}.mdi-zip-box-outline::before{content:"\F001B"}.mdi-zip-disk::before{content:"\FA22"}.mdi-zodiac-aquarius::before{content:"\FA7C"}.mdi-zodiac-aries::before{content:"\FA7D"}.mdi-zodiac-cancer::before{content:"\FA7E"}.mdi-zodiac-capricorn::before{content:"\FA7F"}.mdi-zodiac-gemini::before{content:"\FA80"}.mdi-zodiac-leo::before{content:"\FA81"}.mdi-zodiac-libra::before{content:"\FA82"}.mdi-zodiac-pisces::before{content:"\FA83"}.mdi-zodiac-sagittarius::before{content:"\FA84"}.mdi-zodiac-scorpio::before{content:"\FA85"}.mdi-zodiac-taurus::before{content:"\FA86"}.mdi-zodiac-virgo::before{content:"\FA87"}.mdi-blank::before{content:"\F68C";visibility:hidden}.mdi-18px.mdi-set,.mdi-18px.mdi:before{font-size:18px}.mdi-24px.mdi-set,.mdi-24px.mdi:before{font-size:24px}.mdi-36px.mdi-set,.mdi-36px.mdi:before{font-size:36px}.mdi-48px.mdi-set,.mdi-48px.mdi:before{font-size:48px}.mdi-dark:before{color:rgba(0,0,0,0.54)}.mdi-dark.mdi-inactive:before{color:rgba(0,0,0,0.26)}.mdi-light:before{color:#fff}.mdi-light.mdi-inactive:before{color:rgba(255,255,255,0.3)}.mdi-rotate-45:before{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.mdi-rotate-90:before{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.mdi-rotate-135:before{-webkit-transform:rotate(135deg);-ms-transform:rotate(135deg);transform:rotate(135deg)}.mdi-rotate-180:before{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.mdi-rotate-225:before{-webkit-transform:rotate(225deg);-ms-transform:rotate(225deg);transform:rotate(225deg)}.mdi-rotate-270:before{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.mdi-rotate-315:before{-webkit-transform:rotate(315deg);-ms-transform:rotate(315deg);transform:rotate(315deg)}.mdi-flip-h:before{-webkit-transform:scaleX(-1);transform:scaleX(-1);filter:FlipH;-ms-filter:"FlipH"}.mdi-flip-v:before{-webkit-transform:scaleY(-1);transform:scaleY(-1);filter:FlipV;-ms-filter:"FlipV"}.mdi-spin:before{-webkit-animation:mdi-spin 2s infinite linear;animation:mdi-spin 2s infinite linear}@-webkit-keyframes mdi-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes mdi-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}
+
+/*# sourceMappingURL=materialdesignicons.css.map */
diff --git a/packages/demobank-ui/src/scss/libs/_all.scss b/packages/demobank-ui/src/scss/libs/_all.scss
new file mode 100644
index 000000000..08bd76cd1
--- /dev/null
+++ b/packages/demobank-ui/src/scss/libs/_all.scss
@@ -0,0 +1,29 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+ /**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+@import "node_modules/bulma-radio/bulma-radio";
+// @import "node_modules/bulma-responsive-tables/bulma-responsive-tables";
+@import "node_modules/bulma-checkbox/bulma-checkbox";
+// @import "node_modules/bulma-switch-control/bulma-switch-control";
+// @import "node_modules/bulma-upload-control/bulma-upload-control";
+
+/* Bulma */
+@import "node_modules/bulma/bulma";
diff --git a/packages/demobank-ui/src/scss/main.scss b/packages/demobank-ui/src/scss/main.scss
new file mode 100644
index 000000000..ebe36b9b4
--- /dev/null
+++ b/packages/demobank-ui/src/scss/main.scss
@@ -0,0 +1,4 @@
+@import "pure";
+@import "bank";
+@import "demo";
+@import "colors-bank";
diff --git a/packages/demobank-ui/src/scss/pure.scss b/packages/demobank-ui/src/scss/pure.scss
new file mode 100644
index 000000000..0d804d6bd
--- /dev/null
+++ b/packages/demobank-ui/src/scss/pure.scss
@@ -0,0 +1,1328 @@
+/*!
+Pure v0.6.2
+Copyright 2013 Yahoo!
+Licensed under the BSD License.
+https://github.com/yahoo/pure/blob/master/LICENSE.md
+*/
+/*!
+normalize.css v^3.0 | MIT License | git.io/normalize
+Copyright (c) Nicolas Gallagher and Jonathan Neal
+*/
+/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS and IE text size adjust after device orientation change,
+ *    without disabling user zoom.
+ */
+html {
+  font-family: sans-serif;
+  /* 1 */
+  -ms-text-size-adjust: 100%;
+  /* 2 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */ }
+
+/**
+ * Remove default margin.
+ */
+body {
+  margin: 0; }
+
+/* HTML5 display definitions
+   ========================================================================== */
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block; }
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+audio,
+canvas,
+progress,
+video {
+  display: inline-block;
+  /* 1 */
+  vertical-align: baseline;
+  /* 2 */ }
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+audio:not([controls]) {
+  display: none;
+  height: 0; }
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
+ */
+[hidden],
+template {
+  display: none; }
+
+/* Links
+   ========================================================================== */
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+a {
+  background-color: transparent; }
+
+/**
+ * Improve readability of focused elements when they are also in an
+ * active/hover state.
+ */
+a:active,
+a:hover {
+  outline: 0; }
+
+/* Text-level semantics
+   ========================================================================== */
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+abbr[title] {
+  border-bottom: 1px dotted; }
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+b,
+strong {
+  font-weight: bold; }
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+dfn {
+  font-style: italic; }
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0; }
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+mark {
+  background: #ff0;
+  color: #000; }
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+small {
+  font-size: 80%; }
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline; }
+
+sup {
+  top: -0.5em; }
+
+sub {
+  bottom: -0.25em; }
+
+/* Embedded content
+   ========================================================================== */
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+img {
+  border: 0; }
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+svg:not(:root) {
+  overflow: hidden; }
+
+/* Grouping content
+   ========================================================================== */
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+figure {
+  margin: 1em 40px; }
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+hr {
+  box-sizing: content-box;
+  height: 0; }
+
+/**
+ * Contain overflow in all browsers.
+ */
+pre {
+  overflow: auto; }
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em; }
+
+/* Forms
+   ========================================================================== */
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+  margin: 0;
+  /* 3 */ }
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+button {
+  overflow: visible; }
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+button,
+select {
+  text-transform: none; }
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+button,
+html input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button;
+  /* 2 */
+  cursor: pointer;
+  /* 3 */ }
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+button[disabled],
+html input[disabled] {
+  cursor: default; }
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0; }
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+input {
+  line-height: normal; }
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box;
+  /* 1 */
+  padding: 0;
+  /* 2 */ }
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto; }
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
+ */
+input[type="search"] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  box-sizing: content-box;
+  /* 2 */ }
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none; }
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em; }
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+legend {
+  border: 0;
+  /* 1 */
+  padding: 0;
+  /* 2 */ }
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+textarea {
+  overflow: auto; }
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+optgroup {
+  font-weight: bold; }
+
+/* Tables
+   ========================================================================== */
+/**
+ * Remove most spacing between table cells.
+ */
+table {
+  border-collapse: collapse;
+  border-spacing: 0; }
+
+td,
+th {
+  padding: 0; }
+
+/*csslint important:false*/
+/* ==========================================================================
+   Pure Base Extras
+   ========================================================================== */
+/**
+ * Extra rules that Pure adds on top of Normalize.css
+ */
+/**
+ * Always hide an element when it has the `hidden` HTML attribute.
+ */
+.hidden,
+[hidden] {
+  display: none !important; }
+
+/**
+ * Add this class to an image to make it fit within it's fluid parent wrapper while maintaining
+ * aspect ratio.
+ */
+.pure-img {
+  max-width: 100%;
+  height: auto;
+  display: block; }
+
+/*csslint regex-selectors:false, known-properties:false, duplicate-properties:false*/
+.pure-g {
+  letter-spacing: -0.31em;
+  /* Webkit: collapse white-space between units */
+  *letter-spacing: normal;
+  /* reset IE < 8 */
+  *word-spacing: -0.43em;
+  /* IE < 8: collapse white-space between units */
+  text-rendering: optimizespeed;
+  /* Webkit: fixes text-rendering: optimizeLegibility */
+    /*
+    Sets the font stack to fonts known to work properly with the above letter
+    and word spacings. See: https://github.com/yahoo/pure/issues/41/
+
+    The following font stack makes Pure Grids work on all known environments.
+
+    * FreeSans: Ships with many Linux distros, including Ubuntu
+
+    * Arimo: Ships with Chrome OS. Arimo has to be defined before Helvetica and
+      Arial to get picked up by the browser, even though neither is available
+      in Chrome OS.
+
+    * Droid Sans: Ships with all versions of Android.
+
+    * Helvetica, Arial, sans-serif: Common font stack on OS X and Windows.
+    */
+  font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
+  /* Use flexbox when possible to avoid `letter-spacing` side-effects. */
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-flow: row wrap;
+  -ms-flex-flow: row wrap;
+  flex-flow: row wrap;
+  /* Prevents distributing space between rows */
+  -webkit-align-content: flex-start;
+  -ms-flex-line-pack: start;
+  align-content: flex-start; }
+
+/* IE10 display: -ms-flexbox (and display: flex in IE 11) does not work inside a table; fall back to block and rely on font hack */
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  table .pure-g {
+    display: block; } }
+/* Opera as of 12 on Windows needs word-spacing.
+   The ".opera-only" selector is used to prevent actual prefocus styling
+   and is not required in markup.
+*/
+.opera-only :-o-prefocus,
+.pure-g {
+  word-spacing: -0.43em; }
+
+.pure-u {
+  display: inline-block;
+  *display: inline;
+  /* IE < 8: fake inline-block */
+  zoom: 1;
+  letter-spacing: normal;
+  word-spacing: normal;
+  vertical-align: top;
+  text-rendering: auto; }
+
+/*
+Resets the font family back to the OS/browser's default sans-serif font,
+this the same font stack that Normalize.css sets for the `body`.
+*/
+.pure-g [class*="pure-u"] {
+  font-family: sans-serif; }
+
+.pure-u-1,
+.pure-u-1-1,
+.pure-u-1-2,
+.pure-u-1-3,
+.pure-u-2-3,
+.pure-u-1-4,
+.pure-u-3-4,
+.pure-u-1-5,
+.pure-u-2-5,
+.pure-u-3-5,
+.pure-u-4-5,
+.pure-u-5-5,
+.pure-u-1-6,
+.pure-u-5-6,
+.pure-u-1-8,
+.pure-u-3-8,
+.pure-u-5-8,
+.pure-u-7-8,
+.pure-u-1-12,
+.pure-u-5-12,
+.pure-u-7-12,
+.pure-u-11-12,
+.pure-u-1-24,
+.pure-u-2-24,
+.pure-u-3-24,
+.pure-u-4-24,
+.pure-u-5-24,
+.pure-u-6-24,
+.pure-u-7-24,
+.pure-u-8-24,
+.pure-u-9-24,
+.pure-u-10-24,
+.pure-u-11-24,
+.pure-u-12-24,
+.pure-u-13-24,
+.pure-u-14-24,
+.pure-u-15-24,
+.pure-u-16-24,
+.pure-u-17-24,
+.pure-u-18-24,
+.pure-u-19-24,
+.pure-u-20-24,
+.pure-u-21-24,
+.pure-u-22-24,
+.pure-u-23-24,
+.pure-u-24-24 {
+  display: inline-block;
+  *display: inline;
+  zoom: 1;
+  letter-spacing: normal;
+  word-spacing: normal;
+  vertical-align: top;
+  text-rendering: auto; }
+
+.pure-u-1-24 {
+  width: 4.1667%;
+  *width: 4.1357%; }
+
+.pure-u-1-12,
+.pure-u-2-24 {
+  width: 8.3333%;
+  *width: 8.3023%; }
+
+.pure-u-1-8,
+.pure-u-3-24 {
+  width: 12.5000%;
+  *width: 12.4690%; }
+
+.pure-u-1-6,
+.pure-u-4-24 {
+  width: 16.6667%;
+  *width: 16.6357%; }
+
+.pure-u-1-5 {
+  width: 20%;
+  *width: 19.9690%; }
+
+.pure-u-5-24 {
+  width: 20.8333%;
+  *width: 20.8023%; }
+
+.pure-u-1-4,
+.pure-u-6-24 {
+  width: 25%;
+  *width: 24.9690%; }
+
+.pure-u-7-24 {
+  width: 29.1667%;
+  *width: 29.1357%; }
+
+.pure-u-1-3,
+.pure-u-8-24 {
+  width: 33.3333%;
+  *width: 33.3023%; }
+
+.pure-u-3-8,
+.pure-u-9-24 {
+  width: 37.5000%;
+  *width: 37.4690%; }
+
+.pure-u-2-5 {
+  width: 40%;
+  *width: 39.9690%; }
+
+.pure-u-5-12,
+.pure-u-10-24 {
+  width: 41.6667%;
+  *width: 41.6357%; }
+
+.pure-u-11-24 {
+  width: 45.8333%;
+  *width: 45.8023%; }
+
+.pure-u-1-2,
+.pure-u-12-24 {
+  width: 50%;
+  *width: 49.9690%; }
+
+.pure-u-13-24 {
+  width: 54.1667%;
+  *width: 54.1357%; }
+
+.pure-u-7-12,
+.pure-u-14-24 {
+  width: 58.3333%;
+  *width: 58.3023%; }
+
+.pure-u-3-5 {
+  width: 60%;
+  *width: 59.9690%; }
+
+.pure-u-5-8,
+.pure-u-15-24 {
+  width: 62.5000%;
+  *width: 62.4690%; }
+
+.pure-u-2-3,
+.pure-u-16-24 {
+  width: 66.6667%;
+  *width: 66.6357%; }
+
+.pure-u-17-24 {
+  width: 70.8333%;
+  *width: 70.8023%; }
+
+.pure-u-3-4,
+.pure-u-18-24 {
+  width: 75%;
+  *width: 74.9690%; }
+
+.pure-u-19-24 {
+  width: 79.1667%;
+  *width: 79.1357%; }
+
+.pure-u-4-5 {
+  width: 80%;
+  *width: 79.9690%; }
+
+.pure-u-5-6,
+.pure-u-20-24 {
+  width: 83.3333%;
+  *width: 83.3023%; }
+
+.pure-u-7-8,
+.pure-u-21-24 {
+  width: 87.5000%;
+  *width: 87.4690%; }
+
+.pure-u-11-12,
+.pure-u-22-24 {
+  width: 91.6667%;
+  *width: 91.6357%; }
+
+.pure-u-23-24 {
+  width: 95.8333%;
+  *width: 95.8023%; }
+
+.pure-u-1,
+.pure-u-1-1,
+.pure-u-5-5,
+.pure-u-24-24 {
+  width: 100%; }
+
+.pure-button {
+  /* Structure */
+  display: inline-block;
+  zoom: 1;
+  line-height: normal;
+  white-space: nowrap;
+  vertical-align: middle;
+  text-align: center;
+  cursor: pointer;
+  -webkit-user-drag: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  box-sizing: border-box; }
+
+/* Firefox: Get rid of the inner focus border */
+.pure-button::-moz-focus-inner {
+  padding: 0;
+  border: 0; }
+
+/* Inherit .pure-g styles */
+.pure-button-group {
+  letter-spacing: -0.31em;
+  /* Webkit: collapse white-space between units */
+  *letter-spacing: normal;
+  /* reset IE < 8 */
+  *word-spacing: -0.43em;
+  /* IE < 8: collapse white-space between units */
+  text-rendering: optimizespeed;
+  /* Webkit: fixes text-rendering: optimizeLegibility */ }
+
+.opera-only :-o-prefocus,
+.pure-button-group {
+  word-spacing: -0.43em; }
+
+.pure-button-group .pure-button {
+  letter-spacing: normal;
+  word-spacing: normal;
+  vertical-align: top;
+  text-rendering: auto; }
+
+/*csslint outline-none:false*/
+.pure-button {
+  font-family: inherit;
+  font-size: 100%;
+  padding: 0.5em 1em;
+  color: #444;
+  /* rgba not supported (IE 8) */
+  color: rgba(0, 0, 0, 0.8);
+  /* rgba supported */
+  border: 1px solid #999;
+  /*IE 6/7/8*/
+  border: none rgba(0, 0, 0, 0);
+  /*IE9 + everything else*/
+  background-color: #E6E6E6;
+  text-decoration: none;
+  border-radius: 2px; }
+
+.pure-button-hover,
+.pure-button:hover,
+.pure-button:focus {
+  /* csslint ignore:start */
+  filter: alpha(opacity=90);
+  /* csslint ignore:end */
+  background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
+  background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1)); }
+
+.pure-button:focus {
+  outline: 0; }
+
+.pure-button-active,
+.pure-button:active {
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 0 6px rgba(0, 0, 0, 0.2) inset;
+  border-color: #000; }
+
+.pure-button[disabled],
+.pure-button-disabled,
+.pure-button-disabled:hover,
+.pure-button-disabled:focus,
+.pure-button-disabled:active {
+  border: none;
+  background-image: none;
+  /* csslint ignore:start */
+  filter: alpha(opacity=40);
+  /* csslint ignore:end */
+  opacity: 0.40;
+  cursor: not-allowed;
+  box-shadow: none;
+  pointer-events: none; }
+
+.pure-button-hidden {
+  display: none; }
+
+.pure-button-primary,
+.pure-button-selected,
+a.pure-button-primary,
+a.pure-button-selected {
+  background-color: #00509b;
+  color: #fff; }
+
+/* Button Groups */
+.pure-button-group .pure-button {
+  margin: 0;
+  border-radius: 0;
+  border-right: 1px solid #111;
+  /* fallback color for rgba() for IE7/8 */
+  border-right: 1px solid rgba(0, 0, 0, 0.2); }
+
+.pure-button-group .pure-button:first-child {
+  border-top-left-radius: 2px;
+  border-bottom-left-radius: 2px; }
+
+.pure-button-group .pure-button:last-child {
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
+  border-right: none; }
+
+/*csslint box-model:false*/
+/*
+Box-model set to false because we're setting a height on select elements, which
+also have border and padding. This is done because some browsers don't render
+the padding. We explicitly set the box-model for select elements to border-box,
+so we can ignore the csslint warning.
+*/
+.pure-form input[type="text"],
+.pure-form input[type="password"],
+.pure-form input[type="email"],
+.pure-form input[type="url"],
+.pure-form input[type="date"],
+.pure-form input[type="month"],
+.pure-form input[type="time"],
+.pure-form input[type="datetime"],
+.pure-form input[type="datetime-local"],
+.pure-form input[type="week"],
+.pure-form input[type="number"],
+.pure-form input[type="search"],
+.pure-form input[type="tel"],
+.pure-form input[type="color"],
+.pure-form select,
+.pure-form textarea {
+  padding: 0.5em 0.6em;
+  display: inline-block;
+  border: 1px solid #ccc;
+  box-shadow: inset 0 1px 3px #ddd;
+  border-radius: 4px;
+  vertical-align: middle;
+  box-sizing: border-box; }
+
+/*
+Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
+since IE8 won't execute CSS that contains a CSS3 selector.
+*/
+.pure-form input:not([type]) {
+  padding: 0.5em 0.6em;
+  display: inline-block;
+  border: 1px solid #ccc;
+  box-shadow: inset 0 1px 3px #ddd;
+  border-radius: 4px;
+  box-sizing: border-box; }
+
+/* Chrome (as of v.32/34 on OS X) needs additional room for color to display. */
+/* May be able to remove this tweak as color inputs become more standardized across browsers. */
+.pure-form input[type="color"] {
+  padding: 0.2em 0.5em; }
+
+.pure-form input[type="text"]:focus,
+.pure-form input[type="password"]:focus,
+.pure-form input[type="email"]:focus,
+.pure-form input[type="url"]:focus,
+.pure-form input[type="date"]:focus,
+.pure-form input[type="month"]:focus,
+.pure-form input[type="time"]:focus,
+.pure-form input[type="datetime"]:focus,
+.pure-form input[type="datetime-local"]:focus,
+.pure-form input[type="week"]:focus,
+.pure-form input[type="number"]:focus,
+.pure-form input[type="search"]:focus,
+.pure-form input[type="tel"]:focus,
+.pure-form input[type="color"]:focus,
+.pure-form select:focus,
+.pure-form textarea:focus {
+  outline: 0;
+  border-color: #129FEA; }
+
+/*
+Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
+since IE8 won't execute CSS that contains a CSS3 selector.
+*/
+.pure-form input:not([type]):focus {
+  outline: 0;
+  border-color: #129FEA; }
+
+.pure-form input[type="file"]:focus,
+.pure-form input[type="radio"]:focus,
+.pure-form input[type="checkbox"]:focus {
+  outline: thin solid #129FEA;
+  outline: 1px auto #129FEA; }
+
+.pure-form .pure-checkbox,
+.pure-form .pure-radio {
+  margin: 0.5em 0;
+  display: block; }
+
+.pure-form input[type="text"][disabled],
+.pure-form input[type="password"][disabled],
+.pure-form input[type="email"][disabled],
+.pure-form input[type="url"][disabled],
+.pure-form input[type="date"][disabled],
+.pure-form input[type="month"][disabled],
+.pure-form input[type="time"][disabled],
+.pure-form input[type="datetime"][disabled],
+.pure-form input[type="datetime-local"][disabled],
+.pure-form input[type="week"][disabled],
+.pure-form input[type="number"][disabled],
+.pure-form input[type="search"][disabled],
+.pure-form input[type="tel"][disabled],
+.pure-form input[type="color"][disabled],
+.pure-form select[disabled],
+.pure-form textarea[disabled] {
+  cursor: not-allowed;
+  background-color: #eaeded;
+  color: #cad2d3; }
+
+/*
+Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
+since IE8 won't execute CSS that contains a CSS3 selector.
+*/
+.pure-form input:not([type])[disabled] {
+  cursor: not-allowed;
+  background-color: #eaeded;
+  color: #cad2d3; }
+
+.pure-form input[readonly],
+.pure-form select[readonly],
+.pure-form textarea[readonly] {
+  background-color: #eee;
+  /* menu hover bg color */
+  color: #777;
+  /* menu text color */
+  border-color: #ccc; }
+
+.pure-form input:focus:invalid,
+.pure-form textarea:focus:invalid,
+.pure-form select:focus:invalid {
+  color: #b94a48;
+  border-color: #e9322d; }
+
+.pure-form input[type="file"]:focus:invalid:focus,
+.pure-form input[type="radio"]:focus:invalid:focus,
+.pure-form input[type="checkbox"]:focus:invalid:focus {
+  outline-color: #e9322d; }
+
+.pure-form select {
+  /* Normalizes the height; padding is not sufficient. */
+  height: 2.25em;
+  border: 1px solid #ccc;
+  background-color: white; }
+
+.pure-form select[multiple] {
+  height: auto; }
+
+.pure-form label {
+  margin: 0.5em 0 0.2em; }
+
+.pure-form fieldset {
+  margin: 0;
+  padding: 0.35em 0 0.75em;
+  border: 0; }
+
+.pure-form legend {
+  display: block;
+  width: 100%;
+  padding: 0.3em 0;
+  margin-bottom: 0.3em;
+  color: #333;
+  border-bottom: 1px solid #e5e5e5; }
+
+.pure-form-stacked input[type="text"],
+.pure-form-stacked input[type="password"],
+.pure-form-stacked input[type="email"],
+.pure-form-stacked input[type="url"],
+.pure-form-stacked input[type="date"],
+.pure-form-stacked input[type="month"],
+.pure-form-stacked input[type="time"],
+.pure-form-stacked input[type="datetime"],
+.pure-form-stacked input[type="datetime-local"],
+.pure-form-stacked input[type="week"],
+.pure-form-stacked input[type="number"],
+.pure-form-stacked input[type="search"],
+.pure-form-stacked input[type="tel"],
+.pure-form-stacked input[type="color"],
+.pure-form-stacked input[type="file"],
+.pure-form-stacked select,
+.pure-form-stacked label,
+.pure-form-stacked textarea {
+  display: block;
+  margin: 0.25em 0; }
+
+/*
+Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
+since IE8 won't execute CSS that contains a CSS3 selector.
+*/
+.pure-form-stacked input:not([type]) {
+  display: block;
+  margin: 0.25em 0; }
+
+.pure-form-aligned input,
+.pure-form-aligned textarea,
+.pure-form-aligned select,
+.pure-form-aligned .pure-help-inline,
+.pure-form-message-inline {
+  display: inline-block;
+  *display: inline;
+  *zoom: 1;
+  vertical-align: middle; }
+
+.pure-form-aligned textarea {
+  vertical-align: top; }
+
+/* Aligned Forms */
+.pure-form-aligned .pure-control-group {
+  margin-bottom: 0.5em; }
+
+.pure-form-aligned .pure-control-group label {
+  text-align: right;
+  display: inline-block;
+  vertical-align: middle;
+  width: 10em;
+  margin: 0 1em 0 0; }
+
+.pure-form-aligned .pure-controls {
+  margin: 1.5em 0 0 11em; }
+
+/* Rounded Inputs */
+.pure-form input.pure-input-rounded,
+.pure-form .pure-input-rounded {
+  border-radius: 2em;
+  padding: 0.5em 1em; }
+
+/* Grouped Inputs */
+.pure-form .pure-group fieldset {
+  margin-bottom: 10px; }
+
+.pure-form .pure-group input,
+.pure-form .pure-group textarea {
+  display: block;
+  padding: 10px;
+  margin: 0 0 -1px;
+  border-radius: 0;
+  position: relative;
+  top: -1px; }
+
+.pure-form .pure-group input:focus,
+.pure-form .pure-group textarea:focus {
+  z-index: 3; }
+
+.pure-form .pure-group input:first-child,
+.pure-form .pure-group textarea:first-child {
+  top: 1px;
+  border-radius: 4px 4px 0 0;
+  margin: 0; }
+
+.pure-form .pure-group input:first-child:last-child,
+.pure-form .pure-group textarea:first-child:last-child {
+  top: 1px;
+  border-radius: 4px;
+  margin: 0; }
+
+.pure-form .pure-group input:last-child,
+.pure-form .pure-group textarea:last-child {
+  top: -2px;
+  border-radius: 0 0 4px 4px;
+  margin: 0; }
+
+.pure-form .pure-group button {
+  margin: 0.35em 0; }
+
+.pure-form .pure-input-1 {
+  width: 100%; }
+
+.pure-form .pure-input-3-4 {
+  width: 75%; }
+
+.pure-form .pure-input-2-3 {
+  width: 66%; }
+
+.pure-form .pure-input-1-2 {
+  width: 50%; }
+
+.pure-form .pure-input-1-3 {
+  width: 33%; }
+
+.pure-form .pure-input-1-4 {
+  width: 25%; }
+
+/* Inline help for forms */
+/* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */
+.pure-form .pure-help-inline,
+.pure-form-message-inline {
+  display: inline-block;
+  padding-left: 0.3em;
+  color: #666;
+  vertical-align: middle;
+  font-size: 0.875em; }
+
+/* Block help for forms */
+.pure-form-message {
+  display: block;
+  color: #666;
+  font-size: 0.875em; }
+
+@media only screen and (max-width: 480px) {
+  .pure-form button[type="submit"] {
+    margin: 0.7em 0 0; }
+
+  .pure-form input:not([type]),
+  .pure-form input[type="text"],
+  .pure-form input[type="password"],
+  .pure-form input[type="email"],
+  .pure-form input[type="url"],
+  .pure-form input[type="date"],
+  .pure-form input[type="month"],
+  .pure-form input[type="time"],
+  .pure-form input[type="datetime"],
+  .pure-form input[type="datetime-local"],
+  .pure-form input[type="week"],
+  .pure-form input[type="number"],
+  .pure-form input[type="search"],
+  .pure-form input[type="tel"],
+  .pure-form input[type="color"],
+  .pure-form label {
+    margin-bottom: 0.3em;
+    display: block; }
+
+  .pure-group input:not([type]),
+  .pure-group input[type="text"],
+  .pure-group input[type="password"],
+  .pure-group input[type="email"],
+  .pure-group input[type="url"],
+  .pure-group input[type="date"],
+  .pure-group input[type="month"],
+  .pure-group input[type="time"],
+  .pure-group input[type="datetime"],
+  .pure-group input[type="datetime-local"],
+  .pure-group input[type="week"],
+  .pure-group input[type="number"],
+  .pure-group input[type="search"],
+  .pure-group input[type="tel"],
+  .pure-group input[type="color"] {
+    margin-bottom: 0; }
+
+  .pure-form-aligned .pure-control-group label {
+    margin-bottom: 0.3em;
+    text-align: left;
+    display: block;
+    width: 100%; }
+
+  .pure-form-aligned .pure-controls {
+    margin: 1.5em 0 0 0; }
+
+  /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */
+  .pure-form .pure-help-inline,
+  .pure-form-message-inline,
+  .pure-form-message {
+    display: block;
+    font-size: 0.75em;
+    /* Increased bottom padding to make it group with its related input element. */
+    padding: 0.2em 0 0.8em; } }
+/*csslint adjoining-classes: false, box-model:false*/
+.pure-menu {
+  box-sizing: border-box; }
+
+.pure-menu-fixed {
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 3; }
+
+.pure-menu-list,
+.pure-menu-item {
+  position: relative; }
+
+.pure-menu-list {
+  list-style: none;
+  margin: 0;
+  padding: 0; }
+
+.pure-menu-item {
+  padding: 0;
+  margin: 0;
+  height: 100%; }
+
+.pure-menu-link,
+.pure-menu-heading {
+  display: block;
+  text-decoration: none;
+  white-space: nowrap; }
+
+/* HORIZONTAL MENU */
+.pure-menu-horizontal {
+  width: 100%;
+  white-space: nowrap; }
+
+.pure-menu-horizontal .pure-menu-list {
+  display: inline-block; }
+
+/* Initial menus should be inline-block so that they are horizontal */
+.pure-menu-horizontal .pure-menu-item,
+.pure-menu-horizontal .pure-menu-heading,
+.pure-menu-horizontal .pure-menu-separator {
+  display: inline-block;
+  *display: inline;
+  zoom: 1;
+  vertical-align: middle; }
+
+/* Submenus should still be display: block; */
+.pure-menu-item .pure-menu-item {
+  display: block; }
+
+.pure-menu-children {
+  display: none;
+  position: absolute;
+  left: 100%;
+  top: 0;
+  margin: 0;
+  padding: 0;
+  z-index: 3; }
+
+.pure-menu-horizontal .pure-menu-children {
+  left: 0;
+  top: auto;
+  width: inherit; }
+
+.pure-menu-allow-hover:hover > .pure-menu-children,
+.pure-menu-active > .pure-menu-children {
+  display: block;
+  position: absolute; }
+
+/* Vertical Menus - show the dropdown arrow */
+.pure-menu-has-children > .pure-menu-link:after {
+  padding-left: 0.5em;
+  content: "\25B8";
+  font-size: small; }
+
+/* Horizontal Menus - show the dropdown arrow */
+.pure-menu-horizontal .pure-menu-has-children > .pure-menu-link:after {
+  content: "\25BE"; }
+
+/* scrollable menus */
+.pure-menu-scrollable {
+  overflow-y: scroll;
+  overflow-x: hidden; }
+
+.pure-menu-scrollable .pure-menu-list {
+  display: block; }
+
+.pure-menu-horizontal.pure-menu-scrollable .pure-menu-list {
+  display: inline-block; }
+
+.pure-menu-horizontal.pure-menu-scrollable {
+  white-space: nowrap;
+  overflow-y: hidden;
+  overflow-x: auto;
+  -ms-overflow-style: none;
+  -webkit-overflow-scrolling: touch;
+  /* a little extra padding for this style to allow for scrollbars */
+  padding: .5em 0; }
+
+.pure-menu-horizontal.pure-menu-scrollable::-webkit-scrollbar {
+  display: none; }
+
+/* misc default styling */
+.pure-menu-separator,
+.pure-menu-horizontal .pure-menu-children .pure-menu-separator {
+  background-color: #ccc;
+  height: 1px;
+  margin: .3em 0; }
+
+.pure-menu-horizontal .pure-menu-separator {
+  width: 1px;
+  height: 1.3em;
+  margin: 0 0.3em; }
+
+/* Need to reset the separator since submenu is vertical */
+.pure-menu-horizontal .pure-menu-children .pure-menu-separator {
+  display: block;
+  width: auto; }
+
+.pure-menu-heading {
+  text-transform: uppercase;
+  color: #565d64; }
+
+.pure-menu-link {
+  color: #777; }
+
+.pure-menu-children {
+  background-color: #fff; }
+
+.pure-menu-link,
+.pure-menu-disabled,
+.pure-menu-heading {
+  padding: .5em 1em; }
+
+.pure-menu-disabled {
+  opacity: .5; }
+
+.pure-menu-disabled .pure-menu-link:hover {
+  background-color: transparent; }
+
+.pure-menu-active > .pure-menu-link,
+.pure-menu-link:hover,
+.pure-menu-link:focus {
+  background-color: #eee; }
+
+.pure-menu-selected .pure-menu-link,
+.pure-menu-selected .pure-menu-link:visited {
+  color: #000; }
+
+.pure-table {
+  /* Remove spacing between table cells (from Normalize.css) */
+  border-collapse: collapse;
+  border-spacing: 0;
+  empty-cells: show;
+  border: 1px solid #cbcbcb; }
+
+.pure-table caption {
+  color: #000;
+  font: italic 85%/1 arial, sans-serif;
+  padding: 1em 0;
+  text-align: center; }
+
+.pure-table td,
+.pure-table th {
+  border-left: 1px solid #cbcbcb;
+  /*  inner column border */
+  border-width: 0 0 0 1px;
+  font-size: inherit;
+  margin: 0;
+  overflow: visible;
+  /*to make ths where the title is really long work*/
+  padding: 0.5em 1em;
+  /* cell padding */ }
+
+/* Consider removing this next declaration block, as it causes problems when
+there's a rowspan on the first cell. Case added to the tests. issue#432 */
+.pure-table td:first-child,
+.pure-table th:first-child {
+  border-left-width: 0; }
+
+.pure-table thead {
+  background-color: #e0e0e0;
+  color: #000;
+  text-align: left;
+  vertical-align: bottom; }
+
+/*
+striping:
+   even - #fff (white)
+   odd  - #f2f2f2 (light gray)
+*/
+.pure-table td {
+  background-color: transparent; }
+
+.pure-table-odd td {
+  background-color: #f2f2f2; }
+
+/* nth-child selector for modern browsers */
+.pure-table-striped tr:nth-child(2n-1) td {
+  background-color: #f2f2f2; }
+
+/* BORDERED TABLES */
+.pure-table-bordered td {
+  border-bottom: 1px solid #cbcbcb; }
+
+.pure-table-bordered tbody > tr:last-child > td {
+  border-bottom-width: 0; }
+
+/* HORIZONTAL BORDERED TABLES */
+.pure-table-horizontal td,
+.pure-table-horizontal th {
+  border-width: 0 0 1px 0;
+  border-bottom: 1px solid #cbcbcb; }
+
+.pure-table-horizontal tbody > tr:last-child > td {
+  border-bottom-width: 0; }
+
+/*# sourceMappingURL=pure.css.map */
diff --git a/packages/demobank-ui/src/style/index.css b/packages/demobank-ui/src/style/index.css
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/packages/demobank-ui/src/style/index.css
diff --git a/packages/demobank-ui/src/template.html b/packages/demobank-ui/src/template.html
new file mode 100644
index 000000000..6d8443130
--- /dev/null
+++ b/packages/demobank-ui/src/template.html
@@ -0,0 +1,52 @@
+<!--
+ This file is part of GNU Taler
+ (C) 2021--2022 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+
+ @author Sebastian Javier Marchano
+-->
+<!DOCTYPE html>
+<html lang="en" class="has-aside-left has-aside-mobile-transition has-navbar-fixed-top has-aside-expanded">
+	<head>
+		<meta charset="utf-8">
+		<title><%= htmlWebpackPlugin.options.title %></title>
+		<meta name="viewport" content="width=device-width,initial-scale=1">
+		<meta name="mobile-web-app-capable" content="yes">
+		<meta name="apple-mobile-web-app-capable" content="yes">
+
+		<link rel="icon" href="data:;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAABILAAASCwAAAAAAAAAAAAD///////////////////////////////////////////////////////////////////////////////////////////////////7//v38//78/P/+/fz//vz7///+/v/+/f3//vz7///+/v/+/fz//v38///////////////////////+/v3///7+/////////////////////////////////////////////////////////v3//v79///////+/v3///////r28v/ct5//06SG/9Gffv/Xqo7/7N/V/9e2nf/bsJb/6uDW/9Sskf/euKH/+/j2///////+/v3//////+3azv+/eE3/2rWd/9Kkhv/Vr5T/48i2/8J+VP/Qn3//3ryn/795Tf/WrpP/2LCW/8B6T//w4Nb///////Pn4P+/d0v/9u3n/+7d0v/EhV7//v///+HDr//fxLD/zph2/+TJt//8/Pv/woBX//Lm3f/y5dz/v3hN//bu6f/JjGn/4sW0///////Df1j/8OLZ//v6+P+/elH/+vj1//jy7f+/elL//////+zYzP/Eg13//////967p//MlHT/wn5X///////v4Nb/yY1s///////jw7H/06KG////////////z5t9/+fNvf//////x4pn//Pp4v/8+vn/w39X/8WEX///////5s/A/9CbfP//////27Oc/9y2n////////////9itlf/gu6f//////86Vdf/r2Mz//////8SCXP/Df1j//////+7d0v/KkG7//////+HBrf/VpYr////////////RnoH/5sq6///////Ii2n/8ubf//39/P/Cf1j/xohk/+bNvv//////wn5W//Tq4//58/D/wHxV//7+/f/59fH/v3xU//39/P/w4Nf/xIFb///////hw7H/yo9t/+/f1f/AeU3/+/n2/+nSxP/FhmD//////9qzm//Upon/4MSx/96+qf//////xINc/+3bz//48e3/v3hN//Pn3///////6M+//752S//gw6//06aK/8J+VP/kzLr/zZd1/8OCWv/q18r/17KZ/9Ooi//fv6r/v3dK/+vWyP///////v39///////27un/1aeK/9Opjv/m1cf/1KCC/9a0nP/n08T/0Jx8/82YdP/QnHz/16yR//jx7P///////v39///////+/f3///7+///////+//7//v7+///////+/v7//v/+/////////////////////////v7//v79///////////////////+/v/+/Pv//v39///+/v/+/Pv///7+//7+/f/+/Pv//v39//79/P/+/Pv///7+////////////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==" />
+		<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon" />
+
+		<% if (htmlWebpackPlugin.options.manifest.theme_color) { %>
+			<meta name="theme-color" content="<%= htmlWebpackPlugin.options.manifest.theme_color %>">
+		<% } %>
+
+		<% for (const index in htmlWebpackPlugin.files.css) { %>
+			<% const file = htmlWebpackPlugin.files.css[index] %>
+			<style data-href='<%= file %>' >
+				<%= compilation.assets[file.substr(htmlWebpackPlugin.files.publicPath.length)].source() %>
+			</style>
+		<% } %>
+
+	</head>
+	<body>
+
+		<script>
+			<%= compilation.assets[htmlWebpackPlugin.files.chunks["polyfills"].entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %>
+		</script>
+		<script>
+			<%= compilation.assets[htmlWebpackPlugin.files.chunks["bundle"].entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %>
+		</script>
+
+	</body>
+</html>
diff --git a/packages/demobank-ui/tests/__mocks__/browserMocks.ts b/packages/demobank-ui/tests/__mocks__/browserMocks.ts
new file mode 100644
index 000000000..5be8c3ce6
--- /dev/null
+++ b/packages/demobank-ui/tests/__mocks__/browserMocks.ts
@@ -0,0 +1,21 @@
+// Mock Browser API's which are not supported by JSDOM, e.g. ServiceWorker, LocalStorage
+/**
+ * An example how to mock localStorage is given below 👇
+ */
+
+/* 
+// Mocks localStorage
+const localStorageMock = (function() {
+	let store = {};
+
+	return {
+		getItem: (key) => store[key] || null,
+		setItem: (key, value) => store[key] = value.toString(),
+		clear: () => store = {}
+	};
+
+})();
+
+Object.defineProperty(window, 'localStorage', {
+	value: localStorageMock
+}); */
diff --git a/packages/demobank-ui/tests/__mocks__/fileMocks.ts b/packages/demobank-ui/tests/__mocks__/fileMocks.ts
new file mode 100644
index 000000000..87109e355
--- /dev/null
+++ b/packages/demobank-ui/tests/__mocks__/fileMocks.ts
@@ -0,0 +1,3 @@
+// This fixed an error related to the CSS and loading gif breaking my Jest test
+// See https://facebook.github.io/jest/docs/en/webpack.html#handling-static-assets
+export default 'test-file-stub';
diff --git a/packages/demobank-ui/tests/__mocks__/setupTests.ts b/packages/demobank-ui/tests/__mocks__/setupTests.ts
new file mode 100644
index 000000000..b0bebb589
--- /dev/null
+++ b/packages/demobank-ui/tests/__mocks__/setupTests.ts
@@ -0,0 +1,6 @@
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-preact-pure';
+
+configure({
+  adapter: new Adapter() as any
+});
diff --git a/packages/demobank-ui/tests/__tests__/homepage.js b/packages/demobank-ui/tests/__tests__/homepage.js
new file mode 100644
index 000000000..9ea0ed410
--- /dev/null
+++ b/packages/demobank-ui/tests/__tests__/homepage.js
@@ -0,0 +1,466 @@
+import "core-js/stable";
+import "regenerator-runtime/runtime";
+import "@testing-library/jest-dom";
+import { BankHome } from '../../src/pages/home';
+import { h } from 'preact';
+import { waitFor, cleanup, render, fireEvent, screen } from '@testing-library/preact';
+import expect from 'expect';
+import fetchMock from "jest-fetch-mock";
+
+/**
+ * This mock makes the translator always return the
+ * english string.  It didn't work within the 'beforeAll'
+ * function...
+ */
+jest.mock("../../src/i18n")
+const i18n = require("../../src/i18n")
+i18n.useTranslator.mockImplementation(() => function(arg) {return arg})
+
+beforeAll(() => {
+  Object.defineProperty(window, 'location', {
+    value: {
+      origin: "http://localhost",
+      pathname: "/demobanks/default"
+    }
+  })
+  global.Storage.prototype.setItem = jest.fn((key, value) => {})
+})
+
+function fillCredentialsForm() {
+  const username = Math.random().toString().substring(2);
+  const u = screen.getByPlaceholderText("username");
+  const p = screen.getByPlaceholderText("password");
+  fireEvent.input(u, {target: {value: username}})
+  fireEvent.input(p, {target: {value: "bar"}})
+  const signinButton = screen.getByText("Login");
+  return {
+    username: username,
+    signinButton: signinButton
+  };
+}
+fetchMock.enableMocks();
+
+function mockSuccessLoginOrRegistration() {
+  fetch.once("{}", {
+    status: 200
+  }).once(JSON.stringify({
+    balance: {
+      amount: "EUR:10",
+      credit_debit_indicator: "credit"
+    },
+    paytoUri: "payto://iban/123/ABC"
+  }))
+}
+
+/**
+ * Render homepage -> navigate to register page -> submit registration.
+ * 'webMock' is called before submission to mock the server response
+ */
+function signUp(context, webMock) {
+  render(<BankHome />);
+  const registerPage = screen.getByText("Register!");
+  fireEvent.click(registerPage);
+  const username = Math.random().toString().substring(2);
+  const u = screen.getByPlaceholderText("username");
+  const p = screen.getByPlaceholderText("password");
+  fireEvent.input(u, {target: {value: username}})
+  fireEvent.input(p, {target: {value: "bar"}})
+  const registerButton = screen.getByText("Register");
+  webMock();
+  fireEvent.click(registerButton);
+  context.username = username;
+  return context;
+}
+
+describe("wire transfer", () => {
+  beforeEach(() => {
+    signUp({}, mockSuccessLoginOrRegistration); // context unused
+  })
+  test("Wire transfer success", async () => {
+    const transferButton = screen.getByText("Create wire transfer");
+    const payto = screen.getByPlaceholderText("payto address");
+    fireEvent.input(payto, {target: {value: "payto://only-checked-by-the-backend!"}})
+    fetch.once("{}"); // 200 OK
+    fireEvent.click(transferButton);
+    await screen.findByText("wire transfer created", {exact: false})
+  })
+  test("Wire transfer fail", async () => {
+    const transferButton = screen.getByText("Create wire transfer");
+    const payto = screen.getByPlaceholderText("payto address");
+    fireEvent.input(payto, {target: {value: "payto://only-checked-by-the-backend!"}})
+    fetch.once("{}", {status: 400});
+    fireEvent.click(transferButton);
+    // assert this below does NOT appear.
+    await waitFor(() => expect(
+      screen.queryByText("wire transfer created", {exact: false})).not.toBeInTheDocument());
+  })
+})
+
+describe("withdraw", () => {
+  afterEach(() => {
+    fetch.resetMocks();
+    cleanup();
+  })
+
+
+  let context = {};
+  // Register and land on the profile page.
+  beforeEach(() => {
+    context = signUp(context, mockSuccessLoginOrRegistration); 
+  })
+
+  test("network failure before withdrawal creation", async () => {
+    const a = screen.getAllByPlaceholderText("amount")[0];
+    fireEvent.input(a, {target: {value: "10"}});
+    let withdrawButton = screen.getByText("Charge Taler wallet");
+    // mock network failure.
+    fetch.mockReject("API is down");
+    fireEvent.click(withdrawButton);
+    await screen.findByText("could not create withdrawal operation", {exact: false})
+  })
+
+  test("HTTP response error upon withdrawal creation", async () => {
+    const a = screen.getAllByPlaceholderText("amount")[0];
+    fireEvent.input(a, {target: {value: "10,0"}});
+    let withdrawButton = screen.getByText("Charge Taler wallet");
+    fetch.once("{}", {status: 404});
+    fireEvent.click(withdrawButton);
+    await screen.findByText("gave response error", {exact: false})
+  })
+
+  test("Abort withdrawal", async () => {
+    const a = screen.getAllByPlaceholderText("amount")[0];
+    fireEvent.input(a, {target: {value: "10,0"}});
+    let withdrawButton = screen.getByText("Charge Taler wallet");
+    fetch.once(JSON.stringify({
+      taler_withdraw_uri: "taler://withdraw/foo",
+      withdrawal_id: "foo"
+    }));
+    /**
+     * After triggering a withdrawal, check if the taler://withdraw URI
+     * rendered, and confirm if so.  Lastly, check that a success message
+     * appeared on the screen.
+     */
+    fireEvent.click(withdrawButton);
+    const abortButton = await screen.findByText("abort withdrawal", {exact: false})
+    fireEvent.click(abortButton);
+    expect(fetch).toHaveBeenLastCalledWith(
+    `http://localhost/demobanks/default/access-api/accounts/${context.username}/withdrawals/foo/abort`,
+    expect.anything()
+    )
+    await waitFor(() => expect(
+      screen.queryByText("abort withdrawal", {exact: false})).not.toBeInTheDocument());
+  })
+
+  test("Successful withdrawal creation and confirmation", async () => {
+    const a = screen.getAllByPlaceholderText("amount")[0];
+    fireEvent.input(a, {target: {value: "10,0"}});
+    let withdrawButton = await screen.findByText("Charge Taler wallet");
+    fetch.once(JSON.stringify({
+      taler_withdraw_uri: "taler://withdraw/foo",
+      withdrawal_id: "foo"
+    }));
+    /**
+     * After triggering a withdrawal, check if the taler://withdraw URI
+     * rendered, and confirm if so.  Lastly, check that a success message
+     * appeared on the screen.  */
+    fireEvent.click(withdrawButton);
+    expect(fetch).toHaveBeenCalledWith(
+      `http://localhost/demobanks/default/access-api/accounts/${context.username}/withdrawals`,
+      expect.objectContaining({body: JSON.stringify({amount: "EUR:10.0"})})
+    )
+    // assume wallet POSTed the payment details.
+    const confirmButton = await screen.findByText("confirm withdrawal", {exact: false})
+    /**
+     * Not expecting a new withdrawal possibility while one is being processed.
+     */
+    await waitFor(() => expect(
+      screen.queryByText("charge taler wallet", {exact: false})).not.toBeInTheDocument());
+    fetch.once("{}")
+    // Confirm currently processed withdrawal.
+    fireEvent.click(confirmButton);
+    /**
+     * After having confirmed above, wait that the
+     * pre-withdrawal elements disappears and a success
+     * message appears.
+     */
+    await waitFor(() => expect(
+      screen.queryByText(
+        "confirm withdrawal",
+	{exact: false})).not.toBeInTheDocument()
+    );
+    await waitFor(() => expect(
+      screen.queryByText(
+        "give this address to the taler wallet",
+        {exact: false})).not.toBeInTheDocument()
+    );
+    expect(fetch).toHaveBeenLastCalledWith(
+    `http://localhost/demobanks/default/access-api/accounts/${context.username}/withdrawals/foo/confirm`,
+    expect.anything())
+    // success message
+    await screen.findByText("withdrawal confirmed", {exact: false})
+
+    /**
+     * Click on a "return to homepage / close" button, and
+     * check that the withdrawal confirmation is gone, and
+     * the option to withdraw again reappeared.
+     */
+    const closeButton = await screen.findByText("close", {exact: false})
+    fireEvent.click(closeButton);
+
+    /**
+     * After closing the operation, the confirmation message is not expected.
+     */
+    await waitFor(() => expect(
+      screen.queryByText("withdrawal confirmed", {exact: false})).not.toBeInTheDocument()
+    );
+
+    /**
+     * After closing the operation, the possibility to withdraw again should be offered.
+     */
+    await waitFor(() => expect(
+      screen.queryByText(
+        "charge taler wallet",
+        {exact: false})).toBeInTheDocument()
+    );
+  })
+})
+
+describe("home page", () => {
+  afterEach(() => {
+    fetch.resetMocks();
+    cleanup();
+  })
+  test("public histories", async () => {
+    render(<BankHome />);
+    /**
+     * Mock list of public accounts.  'bar' is
+     * the shown account, since it occupies the last
+     * position (and SPA picks it via the 'pop()' method) */
+    fetch.once(JSON.stringify({
+      "publicAccounts" : [ {
+        "balance" : "EUR:1",
+        "iban" : "XXX",
+        "accountLabel" : "foo"
+      }, {
+        "balance" : "EUR:2",
+        "iban" : "YYY",
+        "accountLabel" : "bar"
+      }]
+    })).once(JSON.stringify({
+      transactions: [{
+        debtorIban: "XXX",
+        debtorBic: "YYY",
+        debtorName: "Foo",
+        creditorIban: "AAA",
+        creditorBic: "BBB",
+        creditorName: "Bar",
+	direction: "DBIT",
+        amount: "EUR:5",
+	subject: "Reimbursement",
+	date: "1970-01-01"
+      }, {
+        debtorIban: "XXX",
+        debtorBic: "YYY",
+        debtorName: "Foo",
+        creditorIban: "AAA",
+        creditorBic: "BBB",
+        creditorName: "Bar",
+	direction: "CRDT",
+        amount: "EUR:5",
+	subject: "Bonus",
+	date: "2000-01-01"
+      }]
+    })).once(JSON.stringify({ 
+      transactions: [{
+        debtorIban: "XXX",
+        debtorBic: "YYY",
+        debtorName: "Foo",
+        creditorIban: "AAA",
+        creditorBic: "BBB",
+        creditorName: "Bar",
+	direction: "DBIT",
+        amount: "EUR:5",
+	subject: "Donation",
+	date: "1970-01-01"
+      }, {
+        debtorIban: "XXX",
+        debtorBic: "YYY",
+        debtorName: "Foo",
+        creditorIban: "AAA",
+        creditorBic: "BBB",
+        creditorName: "Bar",
+	direction: "CRDT",
+        amount: "EUR:5",
+	subject: "Refund",
+	date: "2000-01-01"
+      }]
+    }))
+
+    // Navigate to dedicate public histories page.
+    const publicTxsPage = screen.getByText("transactions");
+    fireEvent.click(publicTxsPage);
+
+    /**
+     * Check that transactions data appears on the page.
+     */
+    await screen.findByText("reimbursement", {exact: false});
+    await screen.findByText("bonus", {exact: false});
+    /**
+     * The transactions below should not appear, because only
+     * one public account renders.
+     */
+    await waitFor(() => expect(
+      screen.queryByText("refund", {exact: false})).not.toBeInTheDocument());
+    await waitFor(() => expect(
+      screen.queryByText("donation", {exact: false})).not.toBeInTheDocument());
+    /**
+     * First HTTP mock:
+     */
+    await expect(fetch).toHaveBeenCalledWith(
+      "http://localhost/demobanks/default/access-api/public-accounts"
+    )
+    /**
+     * Only expecting this request (second mock), as SWR doesn't let
+     * the unshown history request to the backend:
+     */
+    await expect(fetch).toHaveBeenCalledWith(
+      "http://localhost/demobanks/default/access-api/accounts/bar/transactions?page=0"
+    )
+    /**
+     * Switch tab:
+     */
+    let fooTab = await screen.findByText("foo", {exact: false});
+    fireEvent.click(fooTab);
+    /**
+     * Last two HTTP mocks should render now:
+     */
+    await screen.findByText("refund", {exact: false});
+    await screen.findByText("donation", {exact: false});
+
+    // Expect SWR to have requested 'foo' history
+    // (consuming the last HTTP mock):
+    await expect(fetch).toHaveBeenCalledWith(
+      "http://localhost/demobanks/default/access-api/accounts/foo/transactions?page=0"
+    )
+    let backButton = await screen.findByText("Go back", {exact: false});
+    fireEvent.click(backButton);
+    await waitFor(() => expect(
+      screen.queryByText("donation", {exact: false})).not.toBeInTheDocument());
+    await screen.findByText("welcome to eufin bank", {exact: false})
+  })
+
+  // check page informs about the current balance
+  // after a successful registration.
+
+  test("new registration response error 404", async () => {
+    var context = signUp({}, () => fetch.mockResponseOnce("Not found", {status: 404}));
+    await screen.findByText("has a problem", {exact: false});
+    expect(fetch).toHaveBeenCalledWith(
+      "http://localhost/demobanks/default/access-api/testing/register",
+      expect.objectContaining(
+        {body: JSON.stringify({username: context.username, password: "bar"}), method: "POST"},
+    ))
+  })
+
+  test("registration network failure", async () => {
+    let context = signUp({}, ()=>fetch.mockReject("API is down"));
+    await screen.findByText("has a problem", {exact: false});
+    expect(fetch).toHaveBeenCalledWith(
+      "http://localhost/demobanks/default/access-api/testing/register",
+      expect.objectContaining(
+        {body: JSON.stringify({username: context.username, password: "bar"}), method: "POST"}
+      ))
+  })
+  
+  test("login non existent user", async () => {
+    render(<BankHome />);
+    const { username, signinButton } = fillCredentialsForm();
+    fetch.once("{}", {status: 404});
+    fireEvent.click(signinButton);
+    await screen.findByText("username or account label not found", {exact: false})
+  })
+  test("login wrong credentials", async () => {
+    render(<BankHome />);
+    const { username, signinButton } = fillCredentialsForm();
+    fetch.once("{}", {status: 401});
+    fireEvent.click(signinButton);
+    await screen.findByText("wrong credentials given", {exact: false})
+  })
+
+  /**
+   * Test that balance and last transactions get shown
+   * after a successful login.
+   */
+  test("login success", async () => {
+    render(<BankHome />);
+    const { username, signinButton } = fillCredentialsForm();
+    
+    // Response to balance request.
+    fetch.once(JSON.stringify({
+      balance: {
+        amount: "EUR:10",
+	credit_debit_indicator: "credit"
+      },
+      paytoUri: "payto://iban/123/ABC"
+    })).once(JSON.stringify({ // Response to history request.
+      transactions: [{
+        debtorIban: "XXX",
+        debtorBic: "YYY",
+        debtorName: "Foo",
+        creditorIban: "AAA",
+        creditorBic: "BBB",
+        creditorName: "Bar",
+	direction: "DBIT",
+        amount: "EUR:5",
+	subject: "Donation",
+	date: "01-01-1970"
+      }, {
+        debtorIban: "XXX",
+        debtorBic: "YYY",
+        debtorName: "Foo",
+        creditorIban: "AAA",
+        creditorBic: "BBB",
+        creditorName: "Bar",
+	direction: "CRDT",
+        amount: "EUR:5",
+	subject: "Refund",
+	date: "01-01-2000"
+      }]
+    }))
+    fireEvent.click(signinButton);
+    expect(fetch).toHaveBeenCalledWith(
+      `http://localhost/demobanks/default/access-api/accounts/${username}`,
+      expect.anything()
+    )
+    await screen.findByText("balance is 10 EUR", {exact: false})
+    // The two transactions in the history mocked above.
+    await screen.findByText("refund", {exact: false})
+    await screen.findByText("donation", {exact: false})
+    expect(fetch).toHaveBeenCalledWith(
+      `http://localhost/demobanks/default/access-api/accounts/${username}/transactions?page=0`,
+      expect.anything()
+    )
+  })
+
+  test("registration success", async () => {
+    let context = signUp({}, mockSuccessLoginOrRegistration);
+    /**
+     * Tests that a balance is shown after the successful
+     * registration.
+     */
+    await screen.findByText("balance is 10 EUR", {exact: false})
+    /**
+     * The expectation below tests whether the account
+     * balance was requested after the successful registration.
+     */
+    expect(fetch).toHaveBeenCalledWith(
+      "http://localhost/demobanks/default/access-api/testing/register",
+      expect.anything() // no need to match auth headers.
+    )
+    expect(fetch).toHaveBeenCalledWith(
+      `http://localhost/demobanks/default/access-api/accounts/${context.username}`,
+      expect.anything() // no need to match auth headers.
+    )
+  })
+})
diff --git a/packages/demobank-ui/tests/declarations.d.ts b/packages/demobank-ui/tests/declarations.d.ts
new file mode 100644
index 000000000..67e940277
--- /dev/null
+++ b/packages/demobank-ui/tests/declarations.d.ts
@@ -0,0 +1,3 @@
+// Enable enzyme adapter's integration with TypeScript
+// See: https://github.com/preactjs/enzyme-adapter-preact-pure#usage-with-typescript
+/// <reference types="enzyme-adapter-preact-pure" />
diff --git a/packages/demobank-ui/tsconfig.json b/packages/demobank-ui/tsconfig.json
new file mode 100644
index 000000000..d04c5b964
--- /dev/null
+++ b/packages/demobank-ui/tsconfig.json
@@ -0,0 +1,60 @@
+{
+  "compilerOptions": {
+    /* Basic Options */
+    "target": "ES5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */,
+    "module": "ESNext" /* Specify module code generation: 'none', commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
+    // "lib": [],                             /* Specify library files to be included in the compilation:  */
+    "allowJs": true /* Allow javascript files to be compiled. */,
+    // "checkJs": true,                       /* Report errors in .js files. */
+    "jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
+    "jsxFactory": "h" /* Specify the JSX factory function to use when targeting react JSX emit, e.g. React.createElement or h. */,
+    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
+    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
+    // "outFile": "./",                       /* Concatenate and emit output to single file. */
+    // "outDir": "./",                        /* Redirect output structure to the directory. */
+    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    // "removeComments": true,                /* Do not emit comments to output. */
+    "noEmit": true /* Do not emit outputs. */,
+    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
+    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+
+    /* Strict Type-Checking Options */
+    "strict": true /* Enable all strict type-checking options. */,
+    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,              /* Enable strict null checks. */
+    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
+    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
+
+    /* Additional Checks */
+    // "noUnusedLocals": true,                /* Report errors on unused locals. */
+    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
+    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
+    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
+
+    /* Module Resolution Options */
+    "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
+    "esModuleInterop": true /* */,
+    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
+    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
+    // "typeRoots": [],                       /* List of folders to include type definitions from. */
+    // "types": [],                           /* Type declaration files to be included in compilation. */
+    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+
+    /* Source Map Options */
+    // "sourceRoot": "./",                    /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+    // "mapRoot": "./",                       /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+
+    /* Experimental Options */
+    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
+    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+
+    /* Advanced Options */
+    "skipLibCheck": true /* Skip type checking of declaration files. */
+  },
+  "include": ["src/**/*", "tests/**/*"]
+}
diff --git a/packages/merchant-backend-ui/.gitignore b/packages/merchant-backend-ui/.gitignore
new file mode 100644
index 000000000..a6ee22df2
--- /dev/null
+++ b/packages/merchant-backend-ui/.gitignore
@@ -0,0 +1,9 @@
+/build
+/size-plugin.json
+/storybook-static
+/docs
+/single
+/coverage
+/dist
+/.rollup.cache
+/.linaria-cache
diff --git a/packages/merchant-backend-ui/.storybook/.babelrc b/packages/merchant-backend-ui/.storybook/.babelrc
new file mode 100644
index 000000000..610b6f339
--- /dev/null
+++ b/packages/merchant-backend-ui/.storybook/.babelrc
@@ -0,0 +1,25 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+ /**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+{
+    "presets": [
+        "preact-cli/babel"
+    ]
+}
\ No newline at end of file
diff --git a/packages/merchant-backend-ui/.storybook/main.js b/packages/merchant-backend-ui/.storybook/main.js
new file mode 100644
index 000000000..5497a6510
--- /dev/null
+++ b/packages/merchant-backend-ui/.storybook/main.js
@@ -0,0 +1,82 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/preset-scss",
+    "@storybook/addon-a11y",
+    "@storybook/addon-essentials" //docs, control, actions, viewpot, toolbar, background
+  ],
+  // sb does not yet support new jsx transform by default
+  // https://github.com/storybookjs/storybook/issues/12881
+  // https://github.com/storybookjs/storybook/issues/12952
+  babel: async (options) => ({
+    ...options,
+    presets: [
+      ...options.presets,
+      [
+        '@babel/preset-react', {
+          runtime: 'automatic',
+        },
+        'preset-react-jsx-transform' 
+      ],
+      "@linaria",
+    ],
+  }),
+  webpackFinal: (config) => {
+    // should be removed after storybook 6.3
+    // https://github.com/storybookjs/storybook/issues/12853#issuecomment-821576113
+    config.resolve.alias = {
+      react: "preact/compat",
+      "react-dom": "preact/compat",
+    };
+
+    // we need to add @linaria loader AFTER the babel-loader
+    // https://github.com/callstack/linaria/blob/master/docs/BUNDLERS_INTEGRATION.md#webpack  
+    config.module.rules[0] = {
+      ...(config.module.rules[0]),
+      loader: undefined, // Disable the predefined babel-loader on the rule
+      use: [
+        {
+          ...(config.module.rules[0].use[0]),
+          loader: 'babel-loader',          
+        },
+        {
+          loader: '@linaria/webpack-loader',
+          options: {
+            sourceMap: true, //always true since this is dev
+            babelOptions: {
+              presets: config.module.rules[0].use[0].options.presets,
+            }
+             // Pass the current babel options to linaria's babel instance
+          }
+        }
+      ]
+    };
+
+    return config;
+  },
+}
\ No newline at end of file
diff --git a/packages/merchant-backend-ui/.storybook/preview.js b/packages/merchant-backend-ui/.storybook/preview.js
new file mode 100644
index 000000000..a9cc4c39a
--- /dev/null
+++ b/packages/merchant-backend-ui/.storybook/preview.js
@@ -0,0 +1,73 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import { ConfigContextProvider } from '../src/context/config'
+import { InstanceContextProvider } from '../src/context/instance'
+import { TranslationProvider } from '../src/context/translation'
+import { BackendContextProvider } from '../src/context/backend'
+import { h } from 'preact';
+
+const mockConfig = {
+  backendURL: 'http://demo.taler.net',
+  currency: 'TESTKUDOS'
+}
+
+const mockInstance = {
+  id: 'instance-id',
+  token: 'instance-token',
+  admin: false,
+}
+
+const mockBackend = {
+  url: 'http://merchant.url',
+  token: 'default-token',
+  triedToLog: false,
+}
+
+export const parameters = {
+  controls: { expanded: true },
+  // actions: { argTypesRegex: "^on.*" },
+}
+
+export const globalTypes = {
+  locale: {
+    name: 'Locale',
+    description: 'Internationalization locale',
+    defaultValue: 'en',
+    toolbar: {
+      icon: 'globe',
+      items: [
+        { value: 'en', right: '🇺🇸', title: 'English' },
+        { value: 'es', right: '🇪🇸', title: 'Spanish' },
+      ],
+    },
+  },
+};
+
+export const decorators = [
+  (Story, { globals }) => <TranslationProvider initial='en' forceLang={globals.locale}>
+    <Story />
+  </TranslationProvider>,
+  (Story) => <ConfigContextProvider value={mockConfig}>
+    <Story />
+  </ConfigContextProvider>,
+  (Story) => <InstanceContextProvider value={mockInstance}>
+    <Story />
+  </InstanceContextProvider>,
+  (Story) => <BackendContextProvider defaultUrl={mockBackend.url}>
+    <Story />
+  </BackendContextProvider>,
+];
diff --git a/packages/merchant-backend-ui/README.md b/packages/merchant-backend-ui/README.md
new file mode 100644
index 000000000..16cbd0b9a
--- /dev/null
+++ b/packages/merchant-backend-ui/README.md
@@ -0,0 +1,30 @@
+Merchant Backend pages
+
+# Description
+
+This project generate 5 templates for the merchant backend:
+
+ * DepletedTip
+ * OfferRefund
+ * OfferTip
+ * RequestPayment
+ * ShowOrderDetails
+
+This pages are to be serve from the merchant-backend service and will be queried for browser that may or may not have javascript enabled, so we are going to do server side rendering.
+The merchant-backend service is currently supporting mustache library for server side rendering. 
+We also want the be able to create a more interactive design if the browser have javascript enabled, so the pages will be serve with all the infromation in the html but also in javascript.
+
+In this scenario, we are using jsx to build the template of the page that will be build-time rendered into the mustache template. This template can the be deployed into a merchant-backend that will complete the information before send it to the browser.
+
+# Building
+
+The building process can be executed with `pnpm build`
+
+# Testing
+
+This project is using a javascript implementation of mustache that can be executed with the command `pnpm render-examples`.
+This script will take the pages previously built in `dist/pages` directory and the examples definition in the `src/pages/[exampleName].examples.ts` files and render a to-be-sent-to-the-user page like the merchant would do.
+This examples will be saved invidivualy into directory `dist/examples` and should be opened with your testing browser.
+Testing should be done with javascript enabled and javascript disabled, both should look ok. 
+
+
diff --git a/packages/merchant-backend-ui/contrib/po2ts b/packages/merchant-backend-ui/contrib/po2ts
new file mode 100755
index 000000000..a135da61b
--- /dev/null
+++ b/packages/merchant-backend-ui/contrib/po2ts
@@ -0,0 +1,42 @@
+#!/usr/bin/env node
+/*
+ This file is part of GNU Taler
+ (C) 2020 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ * Convert a <lang>.po file into a JavaScript / TypeScript expression.
+ */
+
+const po2json = require("po2json");
+
+const filename = process.argv[2];
+
+if (!filename) {
+  console.error("error: missing filename");
+  process.exit(1);
+}
+
+const m = filename.match(/([a-zA-Z0-9-_]+).po/);
+
+if (!m) {
+  console.error("error: unexpected filename (expected <lang>.po)");
+  process.exit(1);
+}
+
+const lang = m[1];
+const pojson = po2json.parseFileSync(filename, { format: "jed1.x", fuzzy: true });
+const s =
+  "strings['" + lang + "'] = " + JSON.stringify(pojson, null, "  ") + ";\n";
+console.log(s);
diff --git a/packages/merchant-backend-ui/copyleft-header.js b/packages/merchant-backend-ui/copyleft-header.js
new file mode 100644
index 000000000..0794cb839
--- /dev/null
+++ b/packages/merchant-backend-ui/copyleft-header.js
@@ -0,0 +1,15 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
diff --git a/packages/merchant-backend-ui/package.json b/packages/merchant-backend-ui/package.json
new file mode 100644
index 000000000..4a30def96
--- /dev/null
+++ b/packages/merchant-backend-ui/package.json
@@ -0,0 +1,144 @@
+{
+  "private": true,
+  "name": "merchant-backend",
+  "version": "0.0.4",
+  "license": "MIT",
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "render-examples": "ts-node -O '{\"module\": \"commonjs\"}' -T render-examples.ts dist/pages dist/examples",
+    "lint-check": "eslint '{src,tests}/**/*.{js,jsx,ts,tsx}'",
+    "lint-fix": "eslint --fix '{src,tests}/**/*.{js,jsx,ts,tsx}'",
+    "test": "jest ./tests",
+    "dev-test": "jest ./tests --watch",
+    "typedoc": "typedoc src",
+    "clean": "rimraf build storybook-static docs single dist",
+    "serve-dist": "sirv --port ${PORT:=8080} --cors --single dist",
+    "build-storybook": "build-storybook",
+    "storybook": "start-storybook -p 6006"
+  },
+  "engines": {
+    "node": ">=12",
+    "pnpm": ">=5"
+  },
+  "eslintConfig": {
+    "parser": "@typescript-eslint/parser",
+    "extends": [
+      "preact",
+      "plugin:@typescript-eslint/recommended"
+    ],
+    "plugins": [
+      "header"
+    ],
+    "rules": {
+      "header/header": [
+        2,
+        "copyleft-header.js"
+      ]
+    },
+    "ignorePatterns": [
+      "build/"
+    ]
+  },
+  "dependencies": {
+    "@gnu-taler/taler-util": "workspace:*",
+    "axios": "^0.21.1",
+    "date-fns": "^2.21.1",
+    "history": "4.10.1",
+    "jed": "^1.1.1",
+    "preact": "^10.5.13",
+    "preact-router": "^3.2.1",
+    "qrcode-generator": "^1.4.4",
+    "swr": "^0.5.5",
+    "yup": "^0.32.9"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.13.16",
+    "@babel/plugin-transform-react-jsx-source": "^7.12.13",
+    "@creativebulma/bulma-tooltip": "^1.2.0",
+    "@gnu-taler/pogen": "^0.0.5",
+    "@linaria/babel-preset": "^3.0.0-beta.4",
+    "@linaria/core": "^3.0.0-beta.4",
+    "@linaria/react": "^3.0.0-beta.7",
+    "@linaria/rollup": "^3.0.0-beta.7",
+    "@linaria/shaker": "^3.0.0-beta.7",
+    "@linaria/webpack-loader": "^3.0.0-beta.7",
+    "@rollup/plugin-alias": "^3.1.5",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^20.0.0",
+    "@rollup/plugin-html": "^0.2.3",
+    "@rollup/plugin-image": "^2.1.1",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-replace": "^3.0.0",
+    "@rollup/plugin-typescript": "^8.2.5",
+    "@storybook/addon-a11y": "^6.2.9",
+    "@storybook/addon-actions": "^6.2.9",
+    "@storybook/addon-essentials": "^6.2.9",
+    "@storybook/addon-links": "^6.2.9",
+    "@storybook/preact": "^6.2.9",
+    "@storybook/preset-scss": "^1.0.3",
+    "@testing-library/preact": "^2.0.1",
+    "@testing-library/preact-hooks": "^1.1.0",
+    "@types/enzyme": "^3.10.8",
+    "@types/history": "^4.7.8",
+    "@types/jest": "^26.0.23",
+    "@types/mocha": "^8.2.2",
+    "@types/mustache": "^4.1.2",
+    "@typescript-eslint/eslint-plugin": "^4.22.0",
+    "@typescript-eslint/parser": "^4.22.0",
+    "babel-loader": "^8.2.2",
+    "base64-inline-loader": "^1.1.1",
+    "bulma": "^0.9.2",
+    "bulma-checkbox": "^1.1.1",
+    "bulma-radio": "^1.1.1",
+    "bulma-responsive-tables": "^1.2.3",
+    "bulma-switch-control": "^1.1.1",
+    "bulma-timeline": "^3.0.4",
+    "bulma-upload-control": "^1.2.0",
+    "dotenv": "^8.2.0",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-preact-pure": "^3.1.0",
+    "eslint": "^7.25.0",
+    "eslint-config-preact": "^1.1.4",
+    "eslint-plugin-header": "^3.1.1",
+    "html-webpack-inline-chunk-plugin": "^1.1.1",
+    "html-webpack-inline-source-plugin": "0.0.10",
+    "html-webpack-skip-assets-plugin": "^1.0.1",
+    "inline-chunk-html-plugin": "^1.1.1",
+    "jest": "^26.6.3",
+    "jest-preset-preact": "^4.0.2",
+    "mustache": "^4.2.0",
+    "po2json": "^0.4.5",
+    "preact-cli": "^3.0.5",
+    "preact-render-to-json": "^3.6.6",
+    "preact-render-to-string": "^5.1.19",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.56.3",
+    "rollup-plugin-bundle-html": "^0.2.2",
+    "rollup-plugin-css-only": "^3.1.0",
+    "sass": "^1.32.13",
+    "sass-loader": "10.1.1",
+    "script-ext-html-webpack-plugin": "^2.1.5",
+    "sirv-cli": "^1.0.11",
+    "tslib": "^2.3.1",
+    "typedoc": "^0.20.36",
+    "typescript": "^4.2.4"
+  },
+  "jest": {
+    "preset": "jest-preset-preact",
+    "transformIgnorePatterns": [
+      "node_modules/.pnpm/(?!(@gnu-taler\\+taler-util))",
+      "\\.pnp\\.[^\\/]+$"
+    ],
+    "setupFiles": [
+      "<rootDir>/tests/__mocks__/browserMocks.ts",
+      "<rootDir>/tests/__mocks__/setupTests.ts"
+    ],
+    "moduleNameMapper": {
+      "\\.(css|less)$": "identity-obj-proxy"
+    },
+    "transform": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|po)$": "<rootDir>/tests/__mocks__/fileTransformer.js"
+    }
+  }
+}
diff --git a/packages/merchant-backend-ui/render-examples.ts b/packages/merchant-backend-ui/render-examples.ts
new file mode 100644
index 000000000..47300ab8f
--- /dev/null
+++ b/packages/merchant-backend-ui/render-examples.ts
@@ -0,0 +1,83 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import mustache from "mustache";
+import fs from "fs";
+import { format, formatDuration, intervalToDuration } from "date-fns";
+
+/**
+ * This script will emulate what the merchant backend will do when being requested
+ * 
+*/
+
+const sourceDirectory = process.argv[2]
+const destDirectory = process.argv[3]
+
+if (!sourceDirectory || !destDirectory) {
+	console.log('usage: render-mustache <source-directory> <dest-directory>')
+	process.exit(1);
+}
+
+if (!fs.existsSync(destDirectory)) {
+	fs.mkdirSync(destDirectory);
+}
+
+/**
+ * Load all the html files
+ */
+const files = fs.readdirSync(sourceDirectory).filter(f => /.html/.test(f))
+
+files.forEach(file => {
+	const html = fs.readFileSync(`${sourceDirectory}/${file}`, 'utf8')
+
+	const testName = file.replace('.html', '')
+	if (testName !== 'ShowOrderDetails') return;
+	// eslint-disable-next-line @typescript-eslint/no-var-requires
+	const { exampleData } = require(`./src/pages/${testName}.examples`)
+
+	Object.keys(exampleData).forEach(exampleName => {
+		const example = exampleData[exampleName]
+
+		//enhance the example with more information
+		example.contract_terms_json = () => JSON.stringify(example.contract_terms);
+		example.contract_terms.timestamp_str = () => example.contract_terms.timestamp && format(example.contract_terms.timestamp.t_s, 'dd MMM yyyy HH:mm:ss');
+
+		example.contract_terms.hasProducts = () => example.contract_terms.products?.length > 0;
+		example.contract_terms.hasAuditors = () => example.contract_terms.auditors?.length > 0;
+		example.contract_terms.hasExchanges = () => example.contract_terms.exchanges?.length > 0;
+
+		example.contract_terms.products.forEach(p => {
+			p.delivery_date_str = () => p.delivery_date && format(p.delivery_date.t_s, 'dd MM yyyy HH:mm:ss')
+			p.hasTaxes = () => p.taxes?.length > 0
+		})
+		example.contract_terms.has_delivery_info = () => example.contract_terms.delivery_date || example.contract_terms.delivery_location
+
+		example.contract_terms.delivery_date_str = () => example.contract_terms.delivery_date && format(example.contract_terms.delivery_date.t_s, 'dd MM yyyy HH:mm:ss')
+		example.contract_terms.pay_deadline_str = () => example.contract_terms.pay_deadline && format(example.contract_terms.pay_deadline.t_s, 'dd MM yyyy HH:mm:ss')
+		example.contract_terms.wire_transfer_deadline_str = () => example.contract_terms.wire_transfer_deadline && format(example.contract_terms.wire_transfer_deadline.t_s, 'dd MM yyyy HH:mm:ss')
+		example.contract_terms.refund_deadline_str = () => example.contract_terms.refund_deadline && format(example.contract_terms.refund_deadline.t_s, 'dd MM yyyy HH:mm:ss')
+		example.contract_terms.auto_refund_str = () => example.contract_terms.auto_refund && formatDuration(intervalToDuration({ start: 0, end: example.contract_terms.auto_refund.d_us }))
+
+		const output = mustache.render(html, example);
+
+		fs.writeFileSync(`${destDirectory}/${testName}.${exampleName}.html`, output)
+	})
+})
diff --git a/packages/merchant-backend-ui/rollup.config.js b/packages/merchant-backend-ui/rollup.config.js
new file mode 100644
index 000000000..f5227ba74
--- /dev/null
+++ b/packages/merchant-backend-ui/rollup.config.js
@@ -0,0 +1,112 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+// rollup.config.js
+import linaria from '@linaria/rollup';
+import nodeResolve from "@rollup/plugin-node-resolve";
+import alias from "@rollup/plugin-alias";
+import image from '@rollup/plugin-image';
+import json from "@rollup/plugin-json";
+import ts from "@rollup/plugin-typescript";
+import replace from "@rollup/plugin-replace";
+import css from 'rollup-plugin-css-only';
+import html from '@rollup/plugin-html';
+import commonjs from "@rollup/plugin-commonjs";
+
+
+
+const template = async ({
+  files,
+}) => {
+  const scripts = (files.js || []).map(({ code }) => `<script>${code}</script>`).join('\n');
+  const css = (files.css || []).map(({ source }) => `<style>${source}</style>`).join('\n');
+  const ssr = (files.js || []).map(({ code }) => code).join('\n');
+  const page = new Function(`${ssr}; return page.buildTimeRendering();`)()
+  return `
+<!doctype html>
+<html>
+  <head>
+    ${page.head}
+    ${css}
+  </head>
+  <script id="built_time_data">
+  </script>
+  <body>
+    ${page.body}
+    ${scripts}
+    <script>page.mount()</script>
+  </body>
+</html>`;
+};
+
+const makePlugins = (name) => [
+  alias({
+    entries: [
+      { find: 'react', replacement: 'preact/compat' },
+      { find: 'react-dom', replacement: 'preact/compat' }
+    ]
+  }),
+
+  replace({
+    "process.env.NODE_ENV": JSON.stringify("production"),
+    preventAssignment: true,
+  }),
+
+  commonjs({
+    include: [/node_modules/, /dist/],
+    extensions: [".js"],
+    ignoreGlobal: true,
+    sourceMap: true,
+  }),
+
+  nodeResolve({
+    browser: true,
+    preferBuiltins: true,
+  }),
+
+  json(),
+  image(),
+
+  linaria({
+    sourceMap: process.env.NODE_ENV !== 'production',
+  }),
+  css(),
+  ts({
+    sourceMap: false,
+    outputToFilesystem: false,
+  }),
+  html({ template, fileName: name }),
+];
+
+
+const pageDefinition = (name) => ({
+  input: `src/pages/${name}.tsx`,
+  output: {
+    file: `dist/pages/${name}.js`,
+    format: "iife",
+    exports: 'named',
+    name: 'page',
+  },
+  plugins: makePlugins(`${name}.html`),
+});
+
+export default [
+  pageDefinition("OfferTip"),
+  pageDefinition("OfferRefund"),
+  pageDefinition("DepletedTip"),
+  pageDefinition("RequestPayment"),
+  pageDefinition("ShowOrderDetails"),
+]
diff --git a/packages/merchant-backend-ui/src/assets/empty.png b/packages/merchant-backend-ui/src/assets/empty.png
new file mode 100644
index 000000000..5120d3138
--- /dev/null
+++ b/packages/merchant-backend-ui/src/assets/empty.png
diff --git a/packages/merchant-backend-ui/src/assets/icons/android-chrome-192x192.png b/packages/merchant-backend-ui/src/assets/icons/android-chrome-192x192.png
new file mode 100644
index 000000000..93ebe2e2c
--- /dev/null
+++ b/packages/merchant-backend-ui/src/assets/icons/android-chrome-192x192.png
diff --git a/packages/merchant-backend-ui/src/assets/icons/android-chrome-512x512.png b/packages/merchant-backend-ui/src/assets/icons/android-chrome-512x512.png
new file mode 100644
index 000000000..52d1623ea
--- /dev/null
+++ b/packages/merchant-backend-ui/src/assets/icons/android-chrome-512x512.png
diff --git a/packages/merchant-backend-ui/src/assets/icons/apple-touch-icon.png b/packages/merchant-backend-ui/src/assets/icons/apple-touch-icon.png
new file mode 100644
index 000000000..254e4bb4d
--- /dev/null
+++ b/packages/merchant-backend-ui/src/assets/icons/apple-touch-icon.png
diff --git a/packages/merchant-backend-ui/src/assets/icons/favicon-16x16.png b/packages/merchant-backend-ui/src/assets/icons/favicon-16x16.png
new file mode 100644
index 000000000..e81177dcb
--- /dev/null
+++ b/packages/merchant-backend-ui/src/assets/icons/favicon-16x16.png
diff --git a/packages/merchant-backend-ui/src/assets/icons/favicon-32x32.png b/packages/merchant-backend-ui/src/assets/icons/favicon-32x32.png
new file mode 100644
index 000000000..40e9b5b47
--- /dev/null
+++ b/packages/merchant-backend-ui/src/assets/icons/favicon-32x32.png
diff --git a/packages/merchant-backend-ui/src/assets/icons/languageicon.svg b/packages/merchant-backend-ui/src/assets/icons/languageicon.svg
new file mode 100644
index 000000000..22d58da65
--- /dev/null
+++ b/packages/merchant-backend-ui/src/assets/icons/languageicon.svg
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>

+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

+	 viewBox="0 0 2411.2 2794" style="enable-background:new 0 0 2411.2 2794;" xml:space="preserve">

+<style type="text/css">

+	.st0{fill:#FFFFFF;}

+	.st1{fill-rule:evenodd;clip-rule:evenodd;}

+	.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}

+</style>

+<g id="Layer_2">

+</g>

+<g id="Layer_x5F_1_x5F_1">

+	<g>

+		<polygon points="1204.6,359.2 271.8,30 271.8,2060.1 1204.6,1758.3 		"/>

+		<polygon class="st0" points="1182.2,358.1 2150.6,29 2150.6,2059 1182.2,1757.3 		"/>

+		<polygon class="st0" points="30,2415.4 1182.2,2031.4 1182.2,357.9 30,742 		"/>

+		<polygon points="1707.2,2440.7 1870.5,2709.4 1956.6,2459.8 		"/>

+		<g>

+			<path d="M421.7,934.8c-6.1-6,8,49.1,27.6,68.9c34.8,35.1,61.9,39.6,76.4,40.2c32,1.3,71.5-8,94.9-17.8

+				c22.7-9.7,62.4-30,77.5-59.6c3.2-6.3,11.9-17,6.4-43.2c-4.2-20.2-17-27.3-32.7-26.2c-15.7,1.1-63.2,13.7-86.1,20.8

+				c-23,7-70.3,21.4-90.9,25.8C474.3,948.2,429,941.7,421.7,934.8z"/>

+			<path d="M1003.1,1593.7c-9.1-3.3-196.9-81.1-223.6-93.9c-21.8-10.5-75.2-33.1-100.4-43.3c70.8-109.2,115.5-191.6,121.5-204.1

+				c11-23,86-169.6,87.7-178.7c1.7-9.1,3.8-42.9,2.2-51c-1.7-8.2-29.1,7.6-66.4,20.2c-37.4,12.6-108.4,58.8-135.8,64.6

+				c-27.5,5.7-115.5,39.1-160.5,54c-45,14.9-130.2,40.9-165.2,50.4c-35.1,9.5-65.7,10.2-85.3,16.2c0,0,2.6,27.5,7.8,35.7

+				c5.2,8.2,23.7,28.4,45.3,34.1c21.6,5.7,57.3,3.4,73.6-0.3c16.3-3.8,44.4-17.5,48.2-23.6c3.8-6.1-2-24.9,4.5-30.6

+				c6.5-5.6,92.2-25.7,124.6-35.4c32.4-10,156.3-52.6,173.1-50.5c-5.3,17.7-105,215.1-137.1,274c-32.1,58.9-218.6,318-258.3,363.6

+				c-30.1,34.7-103.2,123.5-128.5,143.6c6.4,1.8,51.6-2.1,59.9-7.2c51.3-31.6,136.9-138.1,164.4-170.5

+				c81.9-96,153.8-196.8,210.8-283.4h0.1c11.1,4.6,100.9,77.8,124.4,94c23.4,16.2,115.9,67.8,136,76.4c20,8.7,97.1,44.2,100.3,32.2

+				C1029.4,1668,1012.2,1597.1,1003.1,1593.7z"/>

+		</g>

+		<path class="st1" d="M569,2572c18,11,35,20,54,29c38,19,81,39,122,54c56,21,112,38,168,51c31,7,65,13,98,18c3,0,92,11,110,11h90

+			c35-3,68-5,103-10c28-4,59-9,89-16c22-5,45-10,67-17c21-6,45-14,68-22c15-5,31-12,47-18c13-6,29-13,44-19c18-8,39-19,59-29

+			c16-8,34-18,51-28c13-7,43-30,59-30c18,0,30,16,30,30c0,29-39,38-57,51c-19,13-42,23-62,34c-40,21-81,39-120,54

+			c-51,19-107,37-157,49c-19,4-38,9-57,12c-10,2-114,18-143,18h-132c-35-3-72-7-107-12c-31-5-64-11-95-18c-24-5-50-12-73-19

+			c-40-11-79-25-117-40c-69-26-141-60-209-105c-12-8-13-16-13-25c0-15,11-29,29-29C531,2546,563,2569,569,2572z"/>

+		<path class="st1" d="M1151,2009L61,2372V764l1090-363V2009z M1212,354v1680c-1,5-3,10-7,15c-2,3-6,7-9,8c-25,10-1151,388-1166,388

+			c-12,0-23-8-29-21c0-1-1-2-1-4V739c2-5,3-12,7-16c8-11,22-13,31-16c17-6,1126-378,1142-378C1190,329,1212,336,1212,354z"/>

+		<path class="st1" d="M2120,2017l-907-282V380l907-308V2017z M2181,32v2023c-1,23-17,33-32,33c-13,0-107-32-123-37

+			c-126-39-253-78-378-117c-28-9-57-18-84-27c-24-7-50-15-74-23c-107-33-216-66-323-102c-4-1-14-15-14-18V351c2-5,4-11,9-15

+			c8-9,351-123,486-168c36-13,487-168,501-168C2167,0,2181,13,2181,32z"/>

+		<polygon points="2411.2,2440.7 1199.5,2054.5 1204.6,373.2 2411.2,757.2 		"/>

+		<g>

+			<path class="st2" d="M1800.3,1124.6L1681.4,1412l218.6,66.3L1800.3,1124.6z M1729,853.2l156.1,47.3l284.4,1025l-160.3-48.7

+				l-57.6-210.4L1620.2,1566l-71.3,171.4l-160.4-48.7L1729,853.2z"/>

+		</g>

+	</g>

+</g>

+</svg>

diff --git a/packages/merchant-backend-ui/src/assets/icons/mstile-150x150.png b/packages/merchant-backend-ui/src/assets/icons/mstile-150x150.png
new file mode 100644
index 000000000..9cfb889be
--- /dev/null
+++ b/packages/merchant-backend-ui/src/assets/icons/mstile-150x150.png
diff --git a/packages/merchant-backend-ui/src/components/Footer.tsx b/packages/merchant-backend-ui/src/components/Footer.tsx
new file mode 100644
index 000000000..5f2957800
--- /dev/null
+++ b/packages/merchant-backend-ui/src/components/Footer.tsx
@@ -0,0 +1,32 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+import { h, VNode } from 'preact';
+import { FooterBar } from '../styled';
+
+export function Footer(): VNode {
+  return <FooterBar>
+    <p>
+      <a href="https://taler.net/">Learn more about GNU Taler on our website.</a>
+      <p>Copyright &copy; 2014&mdash;2021 Taler Systems SA</p>
+    </p>
+  </FooterBar>
+}
+
diff --git a/packages/merchant-backend-ui/src/components/QR.tsx b/packages/merchant-backend-ui/src/components/QR.tsx
new file mode 100644
index 000000000..29c9920bf
--- /dev/null
+++ b/packages/merchant-backend-ui/src/components/QR.tsx
@@ -0,0 +1,41 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+ import { h, VNode } from "preact";
+ import { useEffect, useRef } from "preact/hooks";
+ import qrcode from "qrcode-generator";
+ 
+export function createSVG(text:string):string {
+  const qr = qrcode(0, 'L');
+  qr.addData(text);
+  qr.make();
+  return qr.createSvgTag({
+    scalable: true,
+    margin: 0
+  });
+}
+
+ export function QR({ text }: { text: string; }):VNode {
+   const divRef = useRef<HTMLDivElement>(null);
+   useEffect(() => {
+     divRef.current.innerHTML = createSVG(text)
+   });
+ 
+   return <div style={{ width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+     <div style={{ width: '50%', minWidth: 200, maxWidth: 300 }} ref={divRef} />
+   </div>;
+ }
+ 
\ No newline at end of file
diff --git a/packages/merchant-backend-ui/src/context/backend.ts b/packages/merchant-backend-ui/src/context/backend.ts
new file mode 100644
index 000000000..a920d6ffc
--- /dev/null
+++ b/packages/merchant-backend-ui/src/context/backend.ts
@@ -0,0 +1,82 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { createContext, h, VNode } from 'preact'
+import { useCallback, useContext, useState } from 'preact/hooks'
+import { useBackendDefaultToken, useBackendURL } from '../hooks';
+
+interface BackendContextType {
+  url: string;
+  token?: string;
+  triedToLog: boolean;
+  resetBackend: () => void;
+  clearAllTokens: () => void;
+  addTokenCleaner: (c: () => void) => void;
+  updateLoginStatus: (url: string, token?: string) => void;
+}
+
+const BackendContext = createContext<BackendContextType>({
+  url: '',
+  token: undefined,
+  triedToLog: false,
+  resetBackend: () => null,
+  clearAllTokens: () => null,
+  addTokenCleaner: () => null,
+  updateLoginStatus: () => null,
+})
+
+function useBackendContextState(defaultUrl?: string): BackendContextType {
+  const [url, triedToLog, changeBackend, resetBackend] = useBackendURL(defaultUrl);
+  const [token, _updateToken] = useBackendDefaultToken();
+  const updateToken = (t?: string) => {
+    _updateToken(t)
+  }
+
+  const tokenCleaner = useCallback(() => { updateToken(undefined) }, [])
+  const [cleaners, setCleaners] = useState([tokenCleaner])
+  const addTokenCleaner = (c: () => void) => setCleaners(cs => [...cs, c])
+  const addTokenCleanerMemo = useCallback((c: () => void) => { addTokenCleaner(c) }, [tokenCleaner])
+
+  const clearAllTokens = () => {
+    cleaners.forEach(c => c())
+    for (let i = 0; i < localStorage.length; i++) {
+      const k = localStorage.key(i)
+      if (k && /^backend-token/.test(k)) localStorage.removeItem(k)
+    }
+    resetBackend()
+  }
+
+  const updateLoginStatus = (url: string, token?: string) => {
+    changeBackend(url);
+    if (token) updateToken(token);
+  };
+
+
+  return { url, token, triedToLog, updateLoginStatus, resetBackend, clearAllTokens, addTokenCleaner: addTokenCleanerMemo }
+}
+
+export const BackendContextProvider = ({ children, defaultUrl }: { children: any, defaultUrl?: string }): VNode => {
+  const value = useBackendContextState(defaultUrl)
+
+  return h(BackendContext.Provider, { value, children });
+}
+
+export const useBackendContext = (): BackendContextType => useContext(BackendContext);
diff --git a/packages/merchant-backend-ui/src/context/config.ts b/packages/merchant-backend-ui/src/context/config.ts
new file mode 100644
index 000000000..5cd772380
--- /dev/null
+++ b/packages/merchant-backend-ui/src/context/config.ts
@@ -0,0 +1,32 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { createContext } from 'preact'
+import { useContext } from 'preact/hooks'
+
+interface Type {
+  currency: string;
+  version: string;
+}
+const Context = createContext<Type>(null!)
+
+export const ConfigContextProvider = Context.Provider
+export const useConfigContext = (): Type => useContext(Context);
diff --git a/packages/merchant-backend-ui/src/context/fetch.ts b/packages/merchant-backend-ui/src/context/fetch.ts
new file mode 100644
index 000000000..52a4f9c8d
--- /dev/null
+++ b/packages/merchant-backend-ui/src/context/fetch.ts
@@ -0,0 +1,40 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { h, createContext, VNode, ComponentChildren } from 'preact'
+import { useContext } from 'preact/hooks'
+import useSWR, { trigger, useSWRInfinite, cache, mutate } from 'swr';
+
+interface Type {
+  useSWR: typeof useSWR,
+  useSWRInfinite: typeof useSWRInfinite,
+}
+
+const Context = createContext<Type>({} as any)
+
+export const useFetchContext = (): Type => useContext(Context);
+export const FetchContextProvider = ({ children }: { children: ComponentChildren }): VNode => {
+  return h(Context.Provider, { value: { useSWR, useSWRInfinite }, children });
+}
+
+export const FetchContextProviderTesting = ({ children, data }: { children: ComponentChildren, data:any }): VNode => {
+  return h(Context.Provider, { value: { useSWR: () => data, useSWRInfinite }, children });
+}
diff --git a/packages/merchant-backend-ui/src/context/instance.ts b/packages/merchant-backend-ui/src/context/instance.ts
new file mode 100644
index 000000000..fecf36426
--- /dev/null
+++ b/packages/merchant-backend-ui/src/context/instance.ts
@@ -0,0 +1,35 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { createContext } from 'preact'
+import { useContext } from 'preact/hooks'
+
+interface Type {
+  id: string;
+  token?: string;
+  admin?: boolean;
+  changeToken: (t?:string) => void;
+}
+
+const Context = createContext<Type>({} as any)
+
+export const InstanceContextProvider = Context.Provider
+export const useInstanceContext = (): Type => useContext(Context);
diff --git a/packages/merchant-backend-ui/src/context/listener.ts b/packages/merchant-backend-ui/src/context/listener.ts
new file mode 100644
index 000000000..659db0a03
--- /dev/null
+++ b/packages/merchant-backend-ui/src/context/listener.ts
@@ -0,0 +1,35 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { createContext } from 'preact'
+import { useContext } from 'preact/hooks'
+
+interface Type {
+  id: string;
+  token?: string;
+  admin?: boolean;
+  changeToken: (t?:string) => void;
+}
+
+const Context = createContext<Type>({} as any)
+
+export const ListenerContextProvider = Context.Provider
+export const useListenerContext = (): Type => useContext(Context);
diff --git a/packages/merchant-backend-ui/src/context/translation.ts b/packages/merchant-backend-ui/src/context/translation.ts
new file mode 100644
index 000000000..952a1e325
--- /dev/null
+++ b/packages/merchant-backend-ui/src/context/translation.ts
@@ -0,0 +1,59 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { createContext, h, VNode } from 'preact'
+import { useContext, useEffect } from 'preact/hooks'
+import { useLang } from '../hooks'
+import * as jedLib from "jed";
+import { strings } from "../i18n/strings";
+
+interface Type {
+  lang: string;
+  handler: any;
+  changeLanguage: (l: string) => void;
+}
+const initial = {
+  lang: 'en',
+  handler: null,
+  changeLanguage: () => {
+    // do not change anything
+  }
+}
+const Context = createContext<Type>(initial)
+
+interface Props {
+  initial?: string,
+  children: any,
+  forceLang?: string
+}
+
+export const TranslationProvider = ({ initial, children, forceLang }: Props): VNode => {
+  const [lang, changeLanguage] = useLang(initial)
+  useEffect(() => {
+    if (forceLang) {
+      changeLanguage(forceLang)
+    }
+  })
+  const handler = new jedLib.Jed(strings[lang]);
+  return h(Context.Provider, { value: { lang, handler, changeLanguage }, children });
+}
+
+export const useTranslationContext = (): Type => useContext(Context);
\ No newline at end of file
diff --git a/packages/merchant-backend-ui/src/css/pure-min.css b/packages/merchant-backend-ui/src/css/pure-min.css
new file mode 100644
index 000000000..77217b520
--- /dev/null
+++ b/packages/merchant-backend-ui/src/css/pure-min.css
@@ -0,0 +1,973 @@
+/*!
+  Pure v2.0.3
+  Copyright 2013 Yahoo!
+  Licensed under the BSD License.
+  https://github.com/pure-cs s/pure/blob/master/LICENSE.md
+*/
+/*!
+  normalize.cs s v | MIT License | git.io/normalize
+  Copyright (c) Nicolas Gallagher and Jonathan Neal
+*/
+/*! normalize.cs s v8.0.1 | MIT License | github.com/necolas/normalize.cs s */
+
+.talerbar {
+  text-align: center;
+}
+
+html {
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%;
+}
+body {
+  margin: 0;
+}
+main {
+  display: block;
+}
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+hr {
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}
+pre {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+a {
+  background-color: transparent;
+}
+abbr[title] {
+  border-bottom: none;
+  text-decoration: underline;
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
+}
+b,
+strong {
+  font-weight: bolder;
+}
+code,
+kbd,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+small {
+  font-size: 80%;
+}
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+sub {
+  bottom: -0.25em;
+}
+sup {
+  top: -0.5em;
+}
+img {
+  border-style: none;
+}
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+}
+button,
+input {
+  overflow: visible;
+}
+button,
+select {
+  text-transform: none;
+}
+[type="button"],
+[type="reset"],
+[type="submit"],
+button {
+  -webkit-appearance: button;
+}
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner,
+button::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring,
+button:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+legend {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  color: inherit;
+  display: table;
+  max-width: 100%;
+  padding: 0;
+  white-space: normal;
+}
+progress {
+  vertical-align: baseline;
+}
+textarea {
+  overflow: auto;
+}
+[type="checkbox"],
+[type="radio"] {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0;
+}
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+[type="search"] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+details {
+  display: block;
+}
+summary {
+  display: list-item;
+}
+template {
+  display: none;
+}
+[hidden] {
+  display: none;
+}
+html {
+  font-family: sans-serif;
+}
+.hidden,
+[hidden] {
+  display: none !important;
+}
+.pure-img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+.pure-g {
+  letter-spacing: -0.31em;
+  text-rendering: optimizespeed;
+  font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -ms-flex-flow: row wrap;
+  flex-flow: row wrap;
+  -ms-flex-line-pack: start;
+  align-content: flex-start;
+}
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  table .pure-g {
+    display: block;
+  }
+}
+.opera-only :-o-prefocus,
+.pure-g {
+  word-spacing: -0.43em;
+}
+.pure-u {
+  display: inline-block;
+  letter-spacing: normal;
+  word-spacing: normal;
+  vertical-align: top;
+  text-rendering: auto;
+}
+.pure-g [class*="pure-u"] {
+  font-family: sans-serif;
+}
+.pure-u-1,
+.pure-u-1-1,
+.pure-u-1-12,
+.pure-u-1-2,
+.pure-u-1-24,
+.pure-u-1-3,
+.pure-u-1-4,
+.pure-u-1-5,
+.pure-u-1-6,
+.pure-u-1-8,
+.pure-u-10-24,
+.pure-u-11-12,
+.pure-u-11-24,
+.pure-u-12-24,
+.pure-u-13-24,
+.pure-u-14-24,
+.pure-u-15-24,
+.pure-u-16-24,
+.pure-u-17-24,
+.pure-u-18-24,
+.pure-u-19-24,
+.pure-u-2-24,
+.pure-u-2-3,
+.pure-u-2-5,
+.pure-u-20-24,
+.pure-u-21-24,
+.pure-u-22-24,
+.pure-u-23-24,
+.pure-u-24-24,
+.pure-u-3-24,
+.pure-u-3-4,
+.pure-u-3-5,
+.pure-u-3-8,
+.pure-u-4-24,
+.pure-u-4-5,
+.pure-u-5-12,
+.pure-u-5-24,
+.pure-u-5-5,
+.pure-u-5-6,
+.pure-u-5-8,
+.pure-u-6-24,
+.pure-u-7-12,
+.pure-u-7-24,
+.pure-u-7-8,
+.pure-u-8-24,
+.pure-u-9-24 {
+  display: inline-block;
+  letter-spacing: normal;
+  word-spacing: normal;
+  vertical-align: top;
+  text-rendering: auto;
+}
+.pure-u-1-24 {
+  width: 4.1667%;
+}
+.pure-u-1-12,
+.pure-u-2-24 {
+  width: 8.3333%;
+}
+.pure-u-1-8,
+.pure-u-3-24 {
+  width: 12.5%;
+}
+.pure-u-1-6,
+.pure-u-4-24 {
+  width: 16.6667%;
+}
+.pure-u-1-5 {
+  width: 20%;
+}
+.pure-u-5-24 {
+  width: 20.8333%;
+}
+.pure-u-1-4,
+.pure-u-6-24 {
+  width: 25%;
+}
+.pure-u-7-24 {
+  width: 29.1667%;
+}
+.pure-u-1-3,
+.pure-u-8-24 {
+  width: 33.3333%;
+}
+.pure-u-3-8,
+.pure-u-9-24 {
+  width: 37.5%;
+}
+.pure-u-2-5 {
+  width: 40%;
+}
+.pure-u-10-24,
+.pure-u-5-12 {
+  width: 41.6667%;
+}
+.pure-u-11-24 {
+  width: 45.8333%;
+}
+.pure-u-1-2,
+.pure-u-12-24 {
+  width: 50%;
+}
+.pure-u-13-24 {
+  width: 54.1667%;
+}
+.pure-u-14-24,
+.pure-u-7-12 {
+  width: 58.3333%;
+}
+.pure-u-3-5 {
+  width: 60%;
+}
+.pure-u-15-24,
+.pure-u-5-8 {
+  width: 62.5%;
+}
+.pure-u-16-24,
+.pure-u-2-3 {
+  width: 66.6667%;
+}
+.pure-u-17-24 {
+  width: 70.8333%;
+}
+.pure-u-18-24,
+.pure-u-3-4 {
+  width: 75%;
+}
+.pure-u-19-24 {
+  width: 79.1667%;
+}
+.pure-u-4-5 {
+  width: 80%;
+}
+.pure-u-20-24,
+.pure-u-5-6 {
+  width: 83.3333%;
+}
+.pure-u-21-24,
+.pure-u-7-8 {
+  width: 87.5%;
+}
+.pure-u-11-12,
+.pure-u-22-24 {
+  width: 91.6667%;
+}
+.pure-u-23-24 {
+  width: 95.8333%;
+}
+.pure-u-1,
+.pure-u-1-1,
+.pure-u-24-24,
+.pure-u-5-5 {
+  width: 100%;
+}
+.pure-button {
+  display: inline-block;
+  line-height: normal;
+  white-space: nowrap;
+  vertical-align: middle;
+  text-align: center;
+  cursor: pointer;
+  -webkit-user-drag: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.pure-button::-moz-focus-inner {
+  padding: 0;
+  border: 0;
+}
+.pure-button-group {
+  letter-spacing: -0.31em;
+  text-rendering: optimizespeed;
+}
+.opera-only :-o-prefocus,
+.pure-button-group {
+  word-spacing: -0.43em;
+}
+.pure-button-group .pure-button {
+  letter-spacing: normal;
+  word-spacing: normal;
+  vertical-align: top;
+  text-rendering: auto;
+}
+.pure-button {
+  font-family: inherit;
+  font-size: 100%;
+  padding: 0.5em 1em;
+  color: rgba(0, 0, 0, 0.8);
+  border: none transparent;
+  background-color: #e6e6e6;
+  text-decoration: none;
+  border-radius: 2px;
+}
+.pure-button-hover,
+.pure-button:focus,
+.pure-button:hover {
+  background-image: -webkit-gradient(
+    linear,
+    left top,
+    left bottom,
+    from(transparent),
+    color-stop(40%, rgba(0, 0, 0, 0.05)),
+    to(rgba(0, 0, 0, 0.1))
+  );
+  background-image: linear-gradient(
+    transparent,
+    rgba(0, 0, 0, 0.05) 40%,
+    rgba(0, 0, 0, 0.1)
+  );
+}
+.pure-button:focus {
+  outline: 0;
+}
+.pure-button-active,
+.pure-button:active {
+  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset,
+    0 0 6px rgba(0, 0, 0, 0.2) inset;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset,
+    0 0 6px rgba(0, 0, 0, 0.2) inset;
+  border-color: #000;
+}
+.pure-button-disabled,
+.pure-button-disabled:active,
+.pure-button-disabled:focus,
+.pure-button-disabled:hover,
+.pure-button[disabled] {
+  border: none;
+  background-image: none;
+  opacity: 0.4;
+  cursor: not-allowed;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  pointer-events: none;
+}
+.pure-button-hidden {
+  display: none;
+}
+.pure-button-primary,
+.pure-button-selected,
+a.pure-button-primary,
+a.pure-button-selected {
+  background-color: #0078e7;
+  color: #fff;
+}
+.pure-button-group .pure-button {
+  margin: 0;
+  border-radius: 0;
+  border-right: 1px solid rgba(0, 0, 0, 0.2);
+}
+.pure-button-group .pure-button:first-child {
+  border-top-left-radius: 2px;
+  border-bottom-left-radius: 2px;
+}
+.pure-button-group .pure-button:last-child {
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
+  border-right: none;
+}
+.pure-form input[type="color"],
+.pure-form input[type="date"],
+.pure-form input[type="datetime-local"],
+.pure-form input[type="datetime"],
+.pure-form input[type="email"],
+.pure-form input[type="month"],
+.pure-form input[type="number"],
+.pure-form input[type="password"],
+.pure-form input[type="search"],
+.pure-form input[type="tel"],
+.pure-form input[type="text"],
+.pure-form input[type="time"],
+.pure-form input[type="url"],
+.pure-form input[type="week"],
+.pure-form select,
+.pure-form textarea {
+  padding: 0.5em 0.6em;
+  display: inline-block;
+  border: 1px solid #ccc;
+  -webkit-box-shadow: inset 0 1px 3px #ddd;
+  box-shadow: inset 0 1px 3px #ddd;
+  border-radius: 4px;
+  vertical-align: middle;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.pure-form input:not([type]) {
+  padding: 0.5em 0.6em;
+  display: inline-block;
+  border: 1px solid #ccc;
+  -webkit-box-shadow: inset 0 1px 3px #ddd;
+  box-shadow: inset 0 1px 3px #ddd;
+  border-radius: 4px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.pure-form input[type="color"] {
+  padding: 0.2em 0.5em;
+}
+.pure-form input[type="color"]:focus,
+.pure-form input[type="date"]:focus,
+.pure-form input[type="datetime-local"]:focus,
+.pure-form input[type="datetime"]:focus,
+.pure-form input[type="email"]:focus,
+.pure-form input[type="month"]:focus,
+.pure-form input[type="number"]:focus,
+.pure-form input[type="password"]:focus,
+.pure-form input[type="search"]:focus,
+.pure-form input[type="tel"]:focus,
+.pure-form input[type="text"]:focus,
+.pure-form input[type="time"]:focus,
+.pure-form input[type="url"]:focus,
+.pure-form input[type="week"]:focus,
+.pure-form select:focus,
+.pure-form textarea:focus {
+  outline: 0;
+  border-color: #129fea;
+}
+.pure-form input:not([type]):focus {
+  outline: 0;
+  border-color: #129fea;
+}
+.pure-form input[type="checkbox"]:focus,
+.pure-form input[type="file"]:focus,
+.pure-form input[type="radio"]:focus {
+  outline: thin solid #129fea;
+  outline: 1px auto #129fea;
+}
+.pure-form .pure-checkbox,
+.pure-form .pure-radio {
+  margin: 0.5em 0;
+  display: block;
+}
+.pure-form input[type="color"][disabled],
+.pure-form input[type="date"][disabled],
+.pure-form input[type="datetime-local"][disabled],
+.pure-form input[type="datetime"][disabled],
+.pure-form input[type="email"][disabled],
+.pure-form input[type="month"][disabled],
+.pure-form input[type="number"][disabled],
+.pure-form input[type="password"][disabled],
+.pure-form input[type="search"][disabled],
+.pure-form input[type="tel"][disabled],
+.pure-form input[type="text"][disabled],
+.pure-form input[type="time"][disabled],
+.pure-form input[type="url"][disabled],
+.pure-form input[type="week"][disabled],
+.pure-form select[disabled],
+.pure-form textarea[disabled] {
+  cursor: not-allowed;
+  background-color: #eaeded;
+  color: #cad2d3;
+}
+.pure-form input:not([type])[disabled] {
+  cursor: not-allowed;
+  background-color: #eaeded;
+  color: #cad2d3;
+}
+.pure-form input[readonly],
+.pure-form select[readonly],
+.pure-form textarea[readonly] {
+  background-color: #eee;
+  color: #777;
+  border-color: #ccc;
+}
+.pure-form input:focus:invalid,
+.pure-form select:focus:invalid,
+.pure-form textarea:focus:invalid {
+  color: #b94a48;
+  border-color: #e9322d;
+}
+.pure-form input[type="checkbox"]:focus:invalid:focus,
+.pure-form input[type="file"]:focus:invalid:focus,
+.pure-form input[type="radio"]:focus:invalid:focus {
+  outline-color: #e9322d;
+}
+.pure-form select {
+  height: 2.25em;
+  border: 1px solid #ccc;
+  background-color: #fff;
+}
+.pure-form select[multiple] {
+  height: auto;
+}
+.pure-form label {
+  margin: 0.5em 0 0.2em;
+}
+.pure-form fieldset {
+  margin: 0;
+  padding: 0.35em 0 0.75em;
+  border: 0;
+}
+.pure-form legend {
+  display: block;
+  width: 100%;
+  padding: 0.3em 0;
+  margin-bottom: 0.3em;
+  color: #333;
+  border-bottom: 1px solid #e5e5e5;
+}
+.pure-form-stacked input[type="color"],
+.pure-form-stacked input[type="date"],
+.pure-form-stacked input[type="datetime-local"],
+.pure-form-stacked input[type="datetime"],
+.pure-form-stacked input[type="email"],
+.pure-form-stacked input[type="file"],
+.pure-form-stacked input[type="month"],
+.pure-form-stacked input[type="number"],
+.pure-form-stacked input[type="password"],
+.pure-form-stacked input[type="search"],
+.pure-form-stacked input[type="tel"],
+.pure-form-stacked input[type="text"],
+.pure-form-stacked input[type="time"],
+.pure-form-stacked input[type="url"],
+.pure-form-stacked input[type="week"],
+.pure-form-stacked label,
+.pure-form-stacked select,
+.pure-form-stacked textarea {
+  display: block;
+  margin: 0.25em 0;
+}
+.pure-form-stacked input:not([type]) {
+  display: block;
+  margin: 0.25em 0;
+}
+.pure-form-aligned input,
+.pure-form-aligned select,
+.pure-form-aligned textarea,
+.pure-form-message-inline {
+  display: inline-block;
+  vertical-align: middle;
+}
+.pure-form-aligned textarea {
+  vertical-align: top;
+}
+.pure-form-aligned .pure-control-group {
+  margin-bottom: 0.5em;
+}
+.pure-form-aligned .pure-control-group label {
+  text-align: right;
+  display: inline-block;
+  vertical-align: middle;
+  width: 10em;
+  margin: 0 1em 0 0;
+}
+.pure-form-aligned .pure-controls {
+  margin: 1.5em 0 0 11em;
+}
+.pure-form .pure-input-rounded,
+.pure-form input.pure-input-rounded {
+  border-radius: 2em;
+  padding: 0.5em 1em;
+}
+.pure-form .pure-group fieldset {
+  margin-bottom: 10px;
+}
+.pure-form .pure-group input,
+.pure-form .pure-group textarea {
+  display: block;
+  padding: 10px;
+  margin: 0 0 -1px;
+  border-radius: 0;
+  position: relative;
+  top: -1px;
+}
+.pure-form .pure-group input:focus,
+.pure-form .pure-group textarea:focus {
+  z-index: 3;
+}
+.pure-form .pure-group input:first-child,
+.pure-form .pure-group textarea:first-child {
+  top: 1px;
+  border-radius: 4px 4px 0 0;
+  margin: 0;
+}
+.pure-form .pure-group input:first-child:last-child,
+.pure-form .pure-group textarea:first-child:last-child {
+  top: 1px;
+  border-radius: 4px;
+  margin: 0;
+}
+.pure-form .pure-group input:last-child,
+.pure-form .pure-group textarea:last-child {
+  top: -2px;
+  border-radius: 0 0 4px 4px;
+  margin: 0;
+}
+.pure-form .pure-group button {
+  margin: 0.35em 0;
+}
+.pure-form .pure-input-1 {
+  width: 100%;
+}
+.pure-form .pure-input-3-4 {
+  width: 75%;
+}
+.pure-form .pure-input-2-3 {
+  width: 66%;
+}
+.pure-form .pure-input-1-2 {
+  width: 50%;
+}
+.pure-form .pure-input-1-3 {
+  width: 33%;
+}
+.pure-form .pure-input-1-4 {
+  width: 25%;
+}
+.pure-form-message-inline {
+  display: inline-block;
+  padding-left: 0.3em;
+  color: #666;
+  vertical-align: middle;
+  font-size: 0.875em;
+}
+.pure-form-message {
+  display: block;
+  color: #666;
+  font-size: 0.875em;
+}
+@media only screen and (max-width: 480px) {
+  .pure-form button[type="submit"] {
+    margin: 0.7em 0 0;
+  }
+  .pure-form input:not([type]),
+  .pure-form input[type="color"],
+  .pure-form input[type="date"],
+  .pure-form input[type="datetime-local"],
+  .pure-form input[type="datetime"],
+  .pure-form input[type="email"],
+  .pure-form input[type="month"],
+  .pure-form input[type="number"],
+  .pure-form input[type="password"],
+  .pure-form input[type="search"],
+  .pure-form input[type="tel"],
+  .pure-form input[type="text"],
+  .pure-form input[type="time"],
+  .pure-form input[type="url"],
+  .pure-form input[type="week"],
+  .pure-form label {
+    margin-bottom: 0.3em;
+    display: block;
+  }
+  .pure-group input:not([type]),
+  .pure-group input[type="color"],
+  .pure-group input[type="date"],
+  .pure-group input[type="datetime-local"],
+  .pure-group input[type="datetime"],
+  .pure-group input[type="email"],
+  .pure-group input[type="month"],
+  .pure-group input[type="number"],
+  .pure-group input[type="password"],
+  .pure-group input[type="search"],
+  .pure-group input[type="tel"],
+  .pure-group input[type="text"],
+  .pure-group input[type="time"],
+  .pure-group input[type="url"],
+  .pure-group input[type="week"] {
+    margin-bottom: 0;
+  }
+  .pure-form-aligned .pure-control-group label {
+    margin-bottom: 0.3em;
+    text-align: left;
+    display: block;
+    width: 100%;
+  }
+  .pure-form-aligned .pure-controls {
+    margin: 1.5em 0 0 0;
+  }
+  .pure-form-message,
+  .pure-form-message-inline {
+    display: block;
+    font-size: 0.75em;
+    padding: 0.2em 0 0.8em;
+  }
+}
+.pure-menu {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.pure-menu-fixed {
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 3;
+}
+.pure-menu-item,
+.pure-menu-list {
+  position: relative;
+}
+.pure-menu-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.pure-menu-item {
+  padding: 0;
+  margin: 0;
+  height: 100%;
+}
+.pure-menu-heading,
+.pure-menu-link {
+  display: block;
+  text-decoration: none;
+  white-space: nowrap;
+}
+.pure-menu-horizontal {
+  width: 100%;
+  white-space: nowrap;
+}
+.pure-menu-horizontal .pure-menu-list {
+  display: inline-block;
+}
+.pure-menu-horizontal .pure-menu-heading,
+.pure-menu-horizontal .pure-menu-item,
+.pure-menu-horizontal .pure-menu-separator {
+  display: inline-block;
+  vertical-align: middle;
+}
+.pure-menu-item .pure-menu-item {
+  display: block;
+}
+.pure-menu-children {
+  display: none;
+  position: absolute;
+  left: 100%;
+  top: 0;
+  margin: 0;
+  padding: 0;
+  z-index: 3;
+}
+.pure-menu-horizontal .pure-menu-children {
+  left: 0;
+  top: auto;
+  width: inherit;
+}
+.pure-menu-active > .pure-menu-children,
+.pure-menu-allow-hover:hover > .pure-menu-children {
+  display: block;
+  position: absolute;
+}
+.pure-menu-has-children > .pure-menu-link:after {
+  padding-left: 0.5em;
+  content: "\25B8";
+  font-size: small;
+}
+.pure-menu-horizontal .pure-menu-has-children > .pure-menu-link:after {
+  content: "\25BE";
+}
+.pure-menu-scrollable {
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+.pure-menu-scrollable .pure-menu-list {
+  display: block;
+}
+.pure-menu-horizontal.pure-menu-scrollable .pure-menu-list {
+  display: inline-block;
+}
+.pure-menu-horizontal.pure-menu-scrollable {
+  white-space: nowrap;
+  overflow-y: hidden;
+  overflow-x: auto;
+  padding: 0.5em 0;
+}
+.pure-menu-horizontal .pure-menu-children .pure-menu-separator,
+.pure-menu-separator {
+  background-color: #ccc;
+  height: 1px;
+  margin: 0.3em 0;
+}
+.pure-menu-horizontal .pure-menu-separator {
+  width: 1px;
+  height: 1.3em;
+  margin: 0 0.3em;
+}
+.pure-menu-horizontal .pure-menu-children .pure-menu-separator {
+  display: block;
+  width: auto;
+}
+.pure-menu-heading {
+  text-transform: uppercase;
+  color: #565d64;
+}
+.pure-menu-link {
+  color: #777;
+}
+.pure-menu-children {
+  background-color: #fff;
+}
+.pure-menu-disabled,
+.pure-menu-heading,
+.pure-menu-link {
+  padding: 0.5em 1em;
+}
+.pure-menu-disabled {
+  opacity: 0.5;
+}
+.pure-menu-disabled .pure-menu-link:hover {
+  background-color: transparent;
+}
+.pure-menu-active > .pure-menu-link,
+.pure-menu-link:focus,
+.pure-menu-link:hover {
+  background-color: #eee;
+}
+.pure-menu-selected > .pure-menu-link,
+.pure-menu-selected > .pure-menu-link:visited {
+  color: #000;
+}
+.pure-table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  empty-cells: show;
+  border: 1px solid #cbcbcb;
+}
+.pure-table caption {
+  color: #000;
+  font: italic 85%/1 arial, sans-serif;
+  padding: 1em 0;
+  text-align: center;
+}
+.pure-table td,
+.pure-table th {
+  border-left: 1px solid #cbcbcb;
+  border-width: 0 0 0 1px;
+  font-size: inherit;
+  margin: 0;
+  overflow: visible;
+  padding: 0.5em 1em;
+}
+.pure-table thead {
+  background-color: #e0e0e0;
+  color: #000;
+  text-align: left;
+  vertical-align: bottom;
+}
+.pure-table td {
+  background-color: transparent;
+}
+.pure-table-odd td {
+  background-color: #f2f2f2;
+}
+.pure-table-striped tr:nth-child(2n-1) td {
+  background-color: #f2f2f2;
+}
+.pure-table-bordered td {
+  border-bottom: 1px solid #cbcbcb;
+}
+.pure-table-bordered tbody > tr:last-child > td {
+  border-bottom-width: 0;
+}
+.pure-table-horizontal td,
+.pure-table-horizontal th {
+  border-width: 0 0 1px 0;
+  border-bottom: 1px solid #cbcbcb;
+}
+.pure-table-horizontal tbody > tr:last-child > td {
+  border-bottom-width: 0;
+}
diff --git a/packages/merchant-backend-ui/src/css/style.css b/packages/merchant-backend-ui/src/css/style.css
new file mode 100644
index 000000000..f24dbaa87
--- /dev/null
+++ b/packages/merchant-backend-ui/src/css/style.css
@@ -0,0 +1,61 @@
+/*!
+  Pure v2.0.3
+  Copyright 2013 Yahoo!
+  Licensed under the BSD License.
+  https://github.com/pure-ss/pure/blob/master/LICENSE.md
+*/
+/*!
+  normalize.cs v | MIT License | git.io/normalize
+  Copyright (c) Nicolas Gallagher and Jonathan Neal
+*/
+/*! normalize.ss v8.0.1 | MIT License | github.com/necolas/normalize.cs */
+
+.talerbar {
+  text-align: center;
+}
+.tt {
+  font-family: "Lucida Console", Monaco, monospace;
+}
+.content {
+  overflow-x: auto;
+  padding-left: 15%;
+  padding-right: 15%;
+}
+.qr {
+  margin: auto;
+  text-align: center;
+}
+.qrtext {
+  width: max-content;
+  margin: auto;
+  transition: font-size 0.2s;
+  font-family: "Lucida Console", Monaco, monospace;
+  font-size: 0.5em;
+}
+.qrtext:hover {
+  font-size: 1em;
+}
+.talerbar {
+  margin: 0;
+  bottom: 0;
+  background-color: #033;
+  color: white;
+  width: 100%;
+  padding: 1em;
+  overflow: auto;
+}
+body {
+  overflow-y: scroll;
+}
+@media (min-width: 500px) {
+  .content {
+    padding-bottom: 2em;
+    overflow-y: auto;
+  }
+}
+#main a:link,
+#main a:visited,
+#main a:hover,
+#main a:active {
+  color: black;
+}
\ No newline at end of file
diff --git a/packages/merchant-backend-ui/src/custom.d.ts b/packages/merchant-backend-ui/src/custom.d.ts
new file mode 100644
index 000000000..d2705003b
--- /dev/null
+++ b/packages/merchant-backend-ui/src/custom.d.ts
@@ -0,0 +1,40 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+declare module '*.po' {
+  const content: any;
+  export default content;
+}
+declare module 'jed' {
+  const x: any;
+  export = x;
+}
+declare module "*.jpeg" {
+  const content: any;
+  export default content;
+}
+declare module "*.png" {
+  const content: any;
+  export default content;
+}
+declare module '*.svg' {
+  const content: any;
+  export default content;
+}
+
+declare module '*.scss' {
+  const content: Record<string, string>;
+  export default content;
+}
diff --git a/packages/merchant-backend-ui/src/declaration.d.ts b/packages/merchant-backend-ui/src/declaration.d.ts
new file mode 100644
index 000000000..74b0a5011
--- /dev/null
+++ b/packages/merchant-backend-ui/src/declaration.d.ts
@@ -0,0 +1,1384 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+
+type HashCode = string;
+type EddsaPublicKey = string;
+type EddsaSignature = string;
+type WireTransferIdentifierRawP = string;
+type RelativeTime = Duration;
+type ImageDataUrl = string;
+
+export interface WithId {
+    id: string
+}
+
+interface Timestamp {
+    // Milliseconds since epoch, or the special
+    // value "forever" to represent an event that will
+    // never happen.
+    t_s: number | "never";
+}
+interface Duration {
+    // Duration in milliseconds or "forever"
+    // to represent an infinite duration.
+    d_us: number | "forever";
+}
+
+interface WithId {
+    id: string;
+}
+
+type Amount = string;
+type UUID = string;
+type Integer = number;
+
+export namespace ExchangeBackend {
+    interface WireResponse {
+
+        // Master public key of the exchange, must match the key returned in /keys.
+        master_public_key: EddsaPublicKey;
+
+        // Array of wire accounts operated by the exchange for
+        // incoming wire transfers.
+        accounts: WireAccount[];
+
+        // Object mapping names of wire methods (i.e. "sepa" or "x-taler-bank")
+        // to wire fees.
+        fees: { method: AggregateTransferFee };
+    }
+    interface WireAccount {
+        // payto:// URI identifying the account and wire method
+        payto_uri: string;
+
+        // Signature using the exchange's offline key
+        // with purpose TALER_SIGNATURE_MASTER_WIRE_DETAILS.
+        master_sig: EddsaSignature;
+    }
+    interface AggregateTransferFee {
+        // Per transfer wire transfer fee.
+        wire_fee: Amount;
+
+        // Per transfer closing fee.
+        closing_fee: Amount;
+
+        // What date (inclusive) does this fee go into effect?
+        // The different fees must cover the full time period in which
+        // any of the denomination keys are valid without overlap.
+        start_date: TalerProtocolTimestamp;
+
+        // What date (exclusive) does this fee stop going into effect?
+        // The different fees must cover the full time period in which
+        // any of the denomination keys are valid without overlap.
+        end_date: TalerProtocolTimestamp;
+
+        // Signature of TALER_MasterWireFeePS with
+        // purpose TALER_SIGNATURE_MASTER_WIRE_FEES.
+        sig: EddsaSignature;
+    }
+
+}
+export namespace MerchantBackend {
+    interface ErrorDetail {
+
+        // Numeric error code unique to the condition.
+        // The other arguments are specific to the error value reported here.
+        code: number;
+
+        // Human-readable description of the error, i.e. "missing parameter", "commitment violation", ...
+        // Should give a human-readable hint about the error's nature. Optional, may change without notice!
+        hint?: string;
+
+        // Optional detail about the specific input value that failed. May change without notice!
+        detail?: string;
+
+        // Name of the parameter that was bogus (if applicable).
+        parameter?: string;
+
+        // Path to the argument that was bogus (if applicable).
+        path?: string;
+
+        // Offset of the argument that was bogus (if applicable).
+        offset?: string;
+
+        // Index of the argument that was bogus (if applicable).
+        index?: string;
+
+        // Name of the object that was bogus (if applicable).
+        object?: string;
+
+        // Name of the currency than was problematic (if applicable).
+        currency?: string;
+
+        // Expected type (if applicable).
+        type_expected?: string;
+
+        // Type that was provided instead (if applicable).
+        type_actual?: string;
+    }
+
+
+    // Delivery location, loosely modeled as a subset of
+    // ISO20022's PostalAddress25.
+    interface Tax {
+        // the name of the tax
+        name: string;
+
+        // amount paid in tax
+        tax: Amount;
+    }
+
+    interface Auditor {
+        // official name
+        name: string;
+
+        // Auditor's public key
+        auditor_pub: EddsaPublicKey;
+
+        // Base URL of the auditor
+        url: string;
+    }
+    interface Exchange {
+        // the exchange's base URL
+        url: string;
+
+        // master public key of the exchange
+        master_pub: EddsaPublicKey;
+    }
+
+    interface Product {
+        // merchant-internal identifier for the product.
+        product_id?: string;
+
+        // Human-readable product description.
+        description: string;
+
+        // Map from IETF BCP 47 language tags to localized descriptions
+        description_i18n?: { [lang_tag: string]: string };
+
+        // The number of units of the product to deliver to the customer.
+        quantity: Integer;
+
+        // The unit in which the product is measured (liters, kilograms, packages, etc.)
+        unit: string;
+
+        // The price of the product; this is the total price for quantity times unit of this product.
+        price: Amount;
+
+        // An optional base64-encoded product image
+        image: ImageDataUrl;
+
+        // a list of taxes paid by the merchant for this product. Can be empty.
+        taxes: Tax[];
+
+        // time indicating when this product should be delivered
+        delivery_date?: Timestamp;
+    }
+    interface Merchant {
+        // label for a location with the business address of the merchant
+        address: Location;
+
+        // the merchant's legal name of business
+        name: string;
+
+        // label for a location that denotes the jurisdiction for disputes.
+        // Some of the typical fields for a location (such as a street address) may be absent.
+        jurisdiction: Location;
+    }
+
+    interface VersionResponse {
+        // libtool-style representation of the Merchant protocol version, see
+        // https://www.gnu.org/software/libtool/manual/html_node/Versioning.html#Versioning
+        // The format is "current:revision:age".
+        version: string;
+
+        // Name of the protocol.
+        name: "taler-merchant";
+
+        // Currency supported by this backend.
+        currency: string;
+
+    }
+    interface Location {
+        // Nation with its own government.
+        country?: string;
+
+        // Identifies a subdivision of a country such as state, region, county.
+        country_subdivision?: string;
+
+        // Identifies a subdivision within a country sub-division.
+        district?: string;
+
+        // Name of a built-up area, with defined boundaries, and a local government.
+        town?: string;
+
+        // Specific location name within the town.
+        town_location?: string;
+
+        // Identifier consisting of a group of letters and/or numbers that
+        // is added to a postal address to assist the sorting of mail.
+        post_code?: string;
+
+        // Name of a street or thoroughfare.
+        street?: string;
+
+        // Name of the building or house.
+        building_name?: string;
+
+        // Number that identifies the position of a building on a street.
+        building_number?: string;
+
+        // Free-form address lines, should not exceed 7 elements.
+        address_lines?: string[];
+    }
+    namespace Instances {
+
+        //POST /private/instances/$INSTANCE/auth
+        interface InstanceAuthConfigurationMessage {
+            // Type of authentication.
+            // "external":  The mechant backend does not do
+            //   any authentication checks.  Instead an API
+            //   gateway must do the authentication.
+            // "token": The merchant checks an auth token.
+            //   See "token" for details.
+            method: "external" | "token";
+
+            // For method "external", this field is mandatory.
+            // The token MUST begin with the string "secret-token:".
+            // After the auth token has been set (with method "token"),
+            // the value must be provided in a "Authorization: Bearer $token"
+            // header.
+            token?: string;
+
+        }
+        //POST /private/instances
+        interface InstanceConfigurationMessage {
+            // The URI where the wallet will send coins.  A merchant may have
+            // multiple accounts, thus this is an array.  Note that by
+            // removing URIs from this list the respective account is set to
+            // inactive and thus unavailable for new contracts, but preserved
+            // in the database as existing offers and contracts may still refer
+            // to it.
+            payto_uris: string[];
+
+            // Name of the merchant instance to create (will become $INSTANCE).
+            id: string;
+
+            // Merchant name corresponding to this instance.
+            name: string;
+
+            // "Authentication" header required to authorize management access the instance.
+            // Optional, if not given authentication will be disabled for
+            // this instance (hopefully authentication checks are still
+            // done by some reverse proxy).
+            auth: InstanceAuthConfigurationMessage;
+
+            // The merchant's physical address (to be put into contracts).
+            address: Location;
+
+            // The jurisdiction under which the merchant conducts its business
+            // (to be put into contracts).
+            jurisdiction: Location;
+
+            // Maximum wire fee this instance is willing to pay.
+            // Can be overridden by the frontend on a per-order basis.
+            default_max_wire_fee: Amount;
+
+            // Default factor for wire fee amortization calculations.
+            // Can be overridden by the frontend on a per-order basis.
+            default_wire_fee_amortization: Integer;
+
+            // Maximum deposit fee (sum over all coins) this instance is willing to pay.
+            // Can be overridden by the frontend on a per-order basis.
+            default_max_deposit_fee: Amount;
+
+            //  If the frontend does NOT specify an execution date, how long should
+            // we tell the exchange to wait to aggregate transactions before
+            // executing the wire transfer?  This delay is added to the current
+            // time when we generate the advisory execution time for the exchange.
+            default_wire_transfer_delay: RelativeTime;
+
+            // If the frontend does NOT specify a payment deadline, how long should
+            // offers we make be valid by default?
+            default_pay_delay: RelativeTime;
+
+        }
+
+        // PATCH /private/instances/$INSTANCE
+        interface InstanceReconfigurationMessage {
+            // The URI where the wallet will send coins.  A merchant may have
+            // multiple accounts, thus this is an array.  Note that by
+            // removing URIs from this list
+            payto_uris: string[];
+
+            // Merchant name corresponding to this instance.
+            name: string;
+
+            // The merchant's physical address (to be put into contracts).
+            address: Location;
+
+            // The jurisdiction under which the merchant conducts its business
+            // (to be put into contracts).
+            jurisdiction: Location;
+
+            // Maximum wire fee this instance is willing to pay.
+            // Can be overridden by the frontend on a per-order basis.
+            default_max_wire_fee: Amount;
+
+            // Default factor for wire fee amortization calculations.
+            // Can be overridden by the frontend on a per-order basis.
+            default_wire_fee_amortization: Integer;
+
+            // Maximum deposit fee (sum over all coins) this instance is willing to pay.
+            // Can be overridden by the frontend on a per-order basis.
+            default_max_deposit_fee: Amount;
+
+            //  If the frontend does NOT specify an execution date, how long should
+            // we tell the exchange to wait to aggregate transactions before
+            // executing the wire transfer?  This delay is added to the current
+            // time when we generate the advisory execution time for the exchange.
+            default_wire_transfer_delay: RelativeTime;
+
+            // If the frontend does NOT specify a payment deadline, how long should
+            // offers we make be valid by default?
+            default_pay_delay: RelativeTime;
+
+        }
+
+        //   GET /private/instances
+        interface InstancesResponse {
+            // List of instances that are present in the backend (see Instance)
+            instances: Instance[];
+        }
+
+        interface Instance {
+            // Merchant name corresponding to this instance.
+            name: string;
+
+            deleted?: boolean;
+
+            // Merchant instance this response is about ($INSTANCE)
+            id: string;
+
+            // Public key of the merchant/instance, in Crockford Base32 encoding.
+            merchant_pub: EddsaPublicKey;
+
+            // List of the payment targets supported by this instance. Clients can
+            // specify the desired payment target in /order requests.  Note that
+            // front-ends do not have to support wallets selecting payment targets.
+            payment_targets: string[];
+
+        }
+
+        //GET /private/instances/$INSTANCE
+        interface QueryInstancesResponse {
+            // The URI where the wallet will send coins.  A merchant may have
+            // multiple accounts, thus this is an array.
+            accounts: MerchantAccount[];
+
+            // Merchant name corresponding to this instance.
+            name: string;
+
+            // Public key of the merchant/instance, in Crockford Base32 encoding.
+            merchant_pub: EddsaPublicKey;
+
+            // The merchant's physical address (to be put into contracts).
+            address: Location;
+
+            // The jurisdiction under which the merchant conducts its business
+            // (to be put into contracts).
+            jurisdiction: Location;
+
+            // Maximum wire fee this instance is willing to pay.
+            // Can be overridden by the frontend on a per-order basis.
+            default_max_wire_fee: Amount;
+
+            // Default factor for wire fee amortization calculations.
+            // Can be overridden by the frontend on a per-order basis.
+            default_wire_fee_amortization: Integer;
+
+            // Maximum deposit fee (sum over all coins) this instance is willing to pay.
+            // Can be overridden by the frontend on a per-order basis.
+            default_max_deposit_fee: Amount;
+
+            //  If the frontend does NOT specify an execution date, how long should
+            // we tell the exchange to wait to aggregate transactions before
+            // executing the wire transfer?  This delay is added to the current
+            // time when we generate the advisory execution time for the exchange.
+            default_wire_transfer_delay: RelativeTime;
+
+            // If the frontend does NOT specify a payment deadline, how long should
+            // offers we make be valid by default?
+            default_pay_delay: RelativeTime;
+
+            // Authentication configuration.
+            // Does not contain the token when token auth is configured.
+            auth: {
+                method: "external" | "token";
+            };
+        }
+
+        interface MerchantAccount {
+
+            // payto:// URI of the account.
+            payto_uri: string;
+
+            // Hash over the wire details (including over the salt)
+            h_wire: HashCode;
+
+            // salt used to compute h_wire
+            salt: HashCode;
+
+            // true if this account is active,
+            // false if it is historic.
+            active: boolean;
+        }
+
+        //   DELETE /private/instances/$INSTANCE
+
+
+    }
+
+    namespace Products {
+        // POST /private/products
+        interface ProductAddDetail {
+
+            // product ID to use.
+            product_id: string;
+
+            // Human-readable product description.
+            description: string;
+
+            // Map from IETF BCP 47 language tags to localized descriptions
+            description_i18n: { [lang_tag: string]: string };
+
+            // unit in which the product is measured (liters, kilograms, packages, etc.)
+            unit: string;
+
+            // The price for one unit of the product. Zero is used
+            // to imply that this product is not sold separately, or
+            // that the price is not fixed, and must be supplied by the
+            // front-end.  If non-zero, this price MUST include applicable
+            // taxes.
+            price: Amount;
+
+            // An optional base64-encoded product image
+            image: ImageDataUrl;
+
+            // a list of taxes paid by the merchant for one unit of this product
+            taxes: Tax[];
+
+            // Number of units of the product in stock in sum in total,
+            // including all existing sales ever. Given in product-specific
+            // units.
+            // A value of -1 indicates "infinite" (i.e. for "electronic" books).
+            total_stock: Integer;
+
+            // Identifies where the product is in stock.
+            address: Location;
+
+            // Identifies when we expect the next restocking to happen.
+            next_restock?: Timestamp;
+
+        }
+        //   PATCH /private/products/$PRODUCT_ID
+        interface ProductPatchDetail {
+
+            // Human-readable product description.
+            description: string;
+
+            // Map from IETF BCP 47 language tags to localized descriptions
+            description_i18n: { [lang_tag: string]: string };
+
+            // unit in which the product is measured (liters, kilograms, packages, etc.)
+            unit: string;
+
+            // The price for one unit of the product. Zero is used
+            // to imply that this product is not sold separately, or
+            // that the price is not fixed, and must be supplied by the
+            // front-end.  If non-zero, this price MUST include applicable
+            // taxes.
+            price: Amount;
+
+            // An optional base64-encoded product image
+            image: ImageDataUrl;
+
+            // a list of taxes paid by the merchant for one unit of this product
+            taxes: Tax[];
+
+            // Number of units of the product in stock in sum in total,
+            // including all existing sales ever. Given in product-specific
+            // units.
+            // A value of -1 indicates "infinite" (i.e. for "electronic" books).
+            total_stock: Integer;
+
+            // Number of units of the product that were lost (spoiled, stolen, etc.)
+            total_lost: Integer;
+
+            // Identifies where the product is in stock.
+            address: Location;
+
+            // Identifies when we expect the next restocking to happen.
+            next_restock?: Timestamp;
+
+        }
+
+        // GET /private/products
+        interface InventorySummaryResponse {
+            // List of products that are present in the inventory
+            products: InventoryEntry[];
+        }
+        interface InventoryEntry {
+            // Product identifier, as found in the product.
+            product_id: string;
+
+        }
+
+        // GET /private/products/$PRODUCT_ID
+        interface ProductDetail {
+
+            // Human-readable product description.
+            description: string;
+
+            // Map from IETF BCP 47 language tags to localized descriptions
+            description_i18n: { [lang_tag: string]: string };
+
+            // unit in which the product is measured (liters, kilograms, packages, etc.)
+            unit: string;
+
+            // The price for one unit of the product. Zero is used
+            // to imply that this product is not sold separately, or
+            // that the price is not fixed, and must be supplied by the
+            // front-end.  If non-zero, this price MUST include applicable
+            // taxes.
+            price: Amount;
+
+            // An optional base64-encoded product image
+            image: ImageDataUrl;
+
+            // a list of taxes paid by the merchant for one unit of this product
+            taxes: Tax[];
+
+            // Number of units of the product in stock in sum in total,
+            // including all existing sales ever. Given in product-specific
+            // units.
+            // A value of -1 indicates "infinite" (i.e. for "electronic" books).
+            total_stock: Integer;
+
+            // Number of units of the product that have already been sold.
+            total_sold: Integer;
+
+            // Number of units of the product that were lost (spoiled, stolen, etc.)
+            total_lost: Integer;
+
+            // Identifies where the product is in stock.
+            address: Location;
+
+            // Identifies when we expect the next restocking to happen.
+            next_restock?: Timestamp;
+
+        }
+
+        // POST /private/products/$PRODUCT_ID/lock
+        interface LockRequest {
+
+            // UUID that identifies the frontend performing the lock
+            // It is suggested that clients use a timeflake for this,
+            // see https://github.com/anthonynsimon/timeflake
+            lock_uuid: UUID;
+
+            // How long does the frontend intend to hold the lock
+            duration: RelativeTime;
+
+            // How many units should be locked?
+            quantity: Integer;
+
+        }
+
+        //   DELETE /private/products/$PRODUCT_ID
+
+    }
+
+    namespace Orders {
+
+        type MerchantOrderStatusResponse = CheckPaymentPaidResponse |
+            CheckPaymentClaimedResponse |
+            CheckPaymentUnpaidResponse;
+        interface CheckPaymentPaidResponse {
+            // The customer paid for this contract.
+            order_status: "paid";
+
+            // Was the payment refunded (even partially)?
+            refunded: boolean;
+
+            // True if there are any approved refunds that the wallet has
+            // not yet obtained.
+            refund_pending: boolean;
+
+            // Did the exchange wire us the funds?
+            wired: boolean;
+
+            // Total amount the exchange deposited into our bank account
+            // for this contract, excluding fees.
+            deposit_total: Amount;
+
+            // Numeric error code indicating errors the exchange
+            // encountered tracking the wire transfer for this purchase (before
+            // we even got to specific coin issues).
+            // 0 if there were no issues.
+            exchange_ec: number;
+
+            // HTTP status code returned by the exchange when we asked for
+            // information to track the wire transfer for this purchase.
+            // 0 if there were no issues.
+            exchange_hc: number;
+
+            // Total amount that was refunded, 0 if refunded is false.
+            refund_amount: Amount;
+
+            // Contract terms.
+            contract_terms: ContractTerms;
+
+            // The wire transfer status from the exchange for this order if
+            // available, otherwise empty array.
+            wire_details: TransactionWireTransfer[];
+
+            // Reports about trouble obtaining wire transfer details,
+            // empty array if no trouble were encountered.
+            wire_reports: TransactionWireReport[];
+
+            // The refund details for this order.  One entry per
+            // refunded coin; empty array if there are no refunds.
+            refund_details: RefundDetails[];
+
+            // Status URL, can be used as a redirect target for the browser
+            // to show the order QR code / trigger the wallet.
+            order_status_url: string;
+        }
+        interface CheckPaymentClaimedResponse {
+            // A wallet claimed the order, but did not yet pay for the contract.
+            order_status: "claimed";
+
+            // Contract terms.
+            contract_terms: ContractTerms;
+
+        }
+        interface CheckPaymentUnpaidResponse {
+            // The order was neither claimed nor paid.
+            order_status: "unpaid";
+
+            // when was the order created
+            creation_time: Timestamp;
+
+            // Order summary text.
+            summary: string;
+
+            // Total amount of the order (to be paid by the customer).
+            total_amount: Amount;
+
+            // URI that the wallet must process to complete the payment.
+            taler_pay_uri: string;
+
+            // Alternative order ID which was paid for already in the same session.
+            // Only given if the same product was purchased before in the same session.
+            already_paid_order_id?: string;
+
+            // Fulfillment URL of an already paid order. Only given if under this
+            // session an already paid order with a fulfillment URL exists.
+            already_paid_fulfillment_url?: string;
+
+            // Status URL, can be used as a redirect target for the browser
+            // to show the order QR code / trigger the wallet.
+            order_status_url: string;
+
+            // We do we NOT return the contract terms here because they may not
+            // exist in case the wallet did not yet claim them.
+        }
+        interface RefundDetails {
+            // Reason given for the refund.
+            reason: string;
+
+            // When was the refund approved.
+            timestamp: Timestamp;
+
+            // Total amount that was refunded (minus a refund fee).
+            amount: Amount;
+        }
+        interface TransactionWireTransfer {
+            // Responsible exchange.
+            exchange_url: string;
+
+            // 32-byte wire transfer identifier.
+            wtid: Base32;
+
+            // Execution time of the wire transfer.
+            execution_time: Timestamp;
+
+            // Total amount that has been wire transferred
+            // to the merchant.
+            amount: Amount;
+
+            // Was this transfer confirmed by the merchant via the
+            // POST /transfers API, or is it merely claimed by the exchange?
+            confirmed: boolean;
+        }
+        interface TransactionWireReport {
+            // Numerical error code.
+            code: number;
+
+            // Human-readable error description.
+            hint: string;
+
+            // Numerical error code from the exchange.
+            exchange_ec: number;
+
+            // HTTP status code received from the exchange.
+            exchange_hc: number;
+
+            // Public key of the coin for which we got the exchange error.
+            coin_pub: CoinPublicKey;
+        }
+
+        interface OrderHistory {
+            // timestamp-sorted array of all orders matching the query.
+            // The order of the sorting depends on the sign of delta.
+            orders: OrderHistoryEntry[];
+        }
+        interface OrderHistoryEntry {
+
+            // order ID of the transaction related to this entry.
+            order_id: string;
+
+            // row ID of the order in the database
+            row_id: number;
+
+            // when the order was created
+            timestamp: Timestamp;
+
+            // the amount of money the order is for
+            amount: Amount;
+
+            // the summary of the order
+            summary: string;
+
+            // whether some part of the order is refundable,
+            // that is the refund deadline has not yet expired
+            // and the total amount refunded so far is below
+            // the value of the original transaction.
+            refundable: boolean;
+
+            // whether the order has been paid or not
+            paid: boolean;
+        }
+
+        interface PostOrderRequest {
+            // The order must at least contain the minimal
+            // order detail, but can override all
+            order: Order;
+
+            // if set, the backend will then set the refund deadline to the current
+            // time plus the specified delay.  If it's not set, refunds will not be
+            // possible.
+            refund_delay?: RelativeTime;
+
+            // specifies the payment target preferred by the client. Can be used
+            // to select among the various (active) wire methods supported by the instance.
+            payment_target?: string;
+
+            // specifies that some products are to be included in the
+            // order from the inventory.  For these inventory management
+            // is performed (so the products must be in stock) and
+            // details are completed from the product data of the backend.
+            inventory_products?: MinimalInventoryProduct[];
+
+            // Specifies a lock identifier that was used to
+            // lock a product in the inventory.  Only useful if
+            // manage_inventory is set.  Used in case a frontend
+            // reserved quantities of the individual products while
+            // the shopping card was being built.  Multiple UUIDs can
+            // be used in case different UUIDs were used for different
+            // products (i.e. in case the user started with multiple
+            // shopping sessions that were combined during checkout).
+            lock_uuids?: UUID[];
+
+            // Should a token for claiming the order be generated?
+            // False can make sense if the ORDER_ID is sufficiently
+            // high entropy to prevent adversarial claims (like it is
+            // if the backend auto-generates one). Default is 'true'.
+            create_token?: boolean;
+
+        }
+        type Order = MinimalOrderDetail | ContractTerms;
+
+        interface MinimalOrderDetail {
+            // Amount to be paid by the customer
+            amount: Amount;
+
+            // Short summary of the order
+            summary: string;
+
+            // URL that will show that the order was successful after
+            // it has been paid for.  Optional. When POSTing to the
+            // merchant, the placeholder "${ORDER_ID}" will be
+            // replaced with the actual order ID (useful if the
+            // order ID is generated server-side and needs to be
+            // in the URL).
+            fulfillment_url?: string;
+        }
+
+        interface MinimalInventoryProduct {
+            // Which product is requested (here mandatory!)
+            product_id: string;
+
+            // How many units of the product are requested
+            quantity: Integer;
+        }
+        interface PostOrderResponse {
+            // Order ID of the response that was just created
+            order_id: string;
+
+            // Token that authorizes the wallet to claim the order.
+            // Provided only if "create_token" was set to 'true'
+            // in the request.
+            token?: ClaimToken;
+        }
+        interface OutOfStockResponse {
+
+            // Product ID of an out-of-stock item
+            product_id: string;
+
+            // Requested quantity
+            requested_quantity: Integer;
+
+            // Available quantity (must be below requested_quanitity)
+            available_quantity: Integer;
+
+            // When do we expect the product to be again in stock?
+            // Optional, not given if unknown.
+            restock_expected?: Timestamp;
+        }
+
+        interface ForgetRequest {
+
+            // Array of valid JSON paths to forgettable fields in the order's
+            // contract terms.
+            fields: string[];
+        }
+        interface RefundRequest {
+            // Amount to be refunded
+            refund: Amount;
+
+            // Human-readable refund justification
+            reason: string;
+        }
+        interface MerchantRefundResponse {
+
+            // URL (handled by the backend) that the wallet should access to
+            // trigger refund processing.
+            // taler://refund/...
+            taler_refund_uri: string;
+
+            // Contract hash that a client may need to authenticate an
+            // HTTP request to obtain the above URI in a wallet-friendly way.
+            h_contract: HashCode;
+        }
+
+    }
+
+    namespace Tips {
+
+        // GET /private/reserves
+        interface TippingReserveStatus {
+            // Array of all known reserves (possibly empty!)
+            reserves: ReserveStatusEntry[];
+        }
+        interface ReserveStatusEntry {
+            // Public key of the reserve
+            reserve_pub: EddsaPublicKey;
+
+            // Timestamp when it was established
+            creation_time: Timestamp;
+
+            // Timestamp when it expires
+            expiration_time: Timestamp;
+
+            // Initial amount as per reserve creation call
+            merchant_initial_amount: Amount;
+
+            // Initial amount as per exchange, 0 if exchange did
+            // not confirm reserve creation yet.
+            exchange_initial_amount: Amount;
+
+            // Amount picked up so far.
+            pickup_amount: Amount;
+
+            // Amount approved for tips that exceeds the pickup_amount.
+            committed_amount: Amount;
+
+            // Is this reserve active (false if it was deleted but not purged)
+            active: boolean;
+        }
+
+        interface ReserveCreateRequest {
+            // Amount that the merchant promises to put into the reserve
+            initial_balance: Amount;
+
+            // Exchange the merchant intends to use for tipping
+            exchange_url: string;
+
+            // Desired wire method, for example "iban" or "x-taler-bank"
+            wire_method: string;
+        }
+        interface ReserveCreateConfirmation {
+            // Public key identifying the reserve
+            reserve_pub: EddsaPublicKey;
+
+            // Wire account of the exchange where to transfer the funds
+            payto_uri: string;
+        }
+        interface TipCreateRequest {
+            // Amount that the customer should be tipped
+            amount: Amount;
+
+            // Justification for giving the tip
+            justification: string;
+
+            // URL that the user should be directed to after tipping,
+            // will be included in the tip_token.
+            next_url: string;
+        }
+        interface TipCreateConfirmation {
+            // Unique tip identifier for the tip that was created.
+            tip_id: HashCode;
+
+            // taler://tip URI for the tip
+            taler_tip_uri: string;
+
+            // URL that will directly trigger processing
+            // the tip when the browser is redirected to it
+            tip_status_url: string;
+
+            // when does the tip expire
+            tip_expiration: Timestamp;
+        }
+
+        interface ReserveDetail {
+            // Timestamp when it was established.
+            creation_time: Timestamp;
+
+            // Timestamp when it expires.
+            expiration_time: Timestamp;
+
+            // Initial amount as per reserve creation call.
+            merchant_initial_amount: Amount;
+
+            // Initial amount as per exchange, 0 if exchange did
+            // not confirm reserve creation yet.
+            exchange_initial_amount: Amount;
+
+            // Amount picked up so far.
+            pickup_amount: Amount;
+
+            // Amount approved for tips that exceeds the pickup_amount.
+            committed_amount: Amount;
+
+            // Array of all tips created by this reserves (possibly empty!).
+            // Only present if asked for explicitly.
+            tips?: TipStatusEntry[];
+
+            // Is this reserve active (false if it was deleted but not purged)?
+            active: boolean;
+
+            // URI to use to fill the reserve, can be NULL
+            // if the reserve is inactive or was already filled
+            payto_uri: string;
+
+            // URL of the exchange hosting the reserve,
+            // NULL if the reserve is inactive
+            exchange_url: string;
+
+        }
+
+        interface TipStatusEntry {
+
+            // Unique identifier for the tip.
+            tip_id: HashCode;
+
+            // Total amount of the tip that can be withdrawn.
+            total_amount: Amount;
+
+            // Human-readable reason for why the tip was granted.
+            reason: string;
+        }
+
+        interface TipDetails {
+            // Amount that we authorized for this tip.
+            total_authorized: Amount;
+
+            // Amount that was picked up by the user already.
+            total_picked_up: Amount;
+
+            // Human-readable reason given when authorizing the tip.
+            reason: string;
+
+            // Timestamp indicating when the tip is set to expire (may be in the past).
+            expiration: TalerProtocolTimestamp;
+
+            // Reserve public key from which the tip is funded.
+            reserve_pub: EddsaPublicKey;
+
+            // Array showing the pickup operations of the wallet (possibly empty!).
+            // Only present if asked for explicitly.
+            pickups?: PickupDetail[];
+        }
+        interface PickupDetail {
+            // Unique identifier for the pickup operation.
+            pickup_id: HashCode;
+
+            // Number of planchets involved.
+            num_planchets: Integer;
+
+            // Total amount requested for this pickup_id.
+            requested_amount: Amount;
+        }
+
+    }
+
+    namespace Transfers {
+
+        interface TransferList {
+            // list of all the transfers that fit the filter that we know
+            transfers: TransferDetails[];
+        }
+        interface TransferDetails {
+            // how much was wired to the merchant (minus fees)
+            credit_amount: Amount;
+
+            // raw wire transfer identifier identifying the wire transfer (a base32-encoded value)
+            wtid: string;
+
+            // target account that received the wire transfer
+            payto_uri: string;
+
+            // base URL of the exchange that made the wire transfer
+            exchange_url: string;
+
+            // Serial number identifying the transfer in the merchant backend.
+            // Used for filgering via offset.
+            transfer_serial_id: number;
+
+            // Time of the execution of the wire transfer by the exchange, according to the exchange
+            // Only provided if we did get an answer from the exchange.
+            execution_time?: Timestamp;
+
+            // True if we checked the exchange's answer and are happy with it.
+            // False if we have an answer and are unhappy, missing if we
+            // do not have an answer from the exchange.
+            verified?: boolean;
+
+            // True if the merchant uses the POST /transfers API to confirm
+            // that this wire transfer took place (and it is thus not
+            // something merely claimed by the exchange).
+            confirmed?: boolean;
+        }
+
+        interface TransferInformation {
+            // how much was wired to the merchant (minus fees)
+            credit_amount: Amount;
+
+            // raw wire transfer identifier identifying the wire transfer (a base32-encoded value)
+            wtid: WireTransferIdentifierRawP;
+
+            // target account that received the wire transfer
+            payto_uri: string;
+
+            // base URL of the exchange that made the wire transfer
+            exchange_url: string;
+        }
+        interface MerchantTrackTransferResponse {
+            // Total amount transferred
+            total: Amount;
+
+            // Applicable wire fee that was charged
+            wire_fee: Amount;
+
+            // Time of the execution of the wire transfer by the exchange, according to the exchange
+            execution_time: Timestamp;
+
+            // details about the deposits
+            deposits_sums: MerchantTrackTransferDetail[];
+        }
+        interface MerchantTrackTransferDetail {
+            // Business activity associated with the wire transferred amount
+            // deposit_value.
+            order_id: string;
+
+            // The total amount the exchange paid back for order_id.
+            deposit_value: Amount;
+
+            // applicable fees for the deposit
+            deposit_fee: Amount;
+        }
+
+        type ExchangeConflictDetails = WireFeeConflictDetails | TrackTransferConflictDetails
+        // Note: this is not the full 'proof' of missbehavior, as
+        // the bogus message from the exchange with a signature
+        // over the 'different' wire fee is missing.
+        //
+        // This information is NOT provided by the current implementation,
+        // because this would be quite expensive to generate and is
+        // hardly needed _here_. Once we add automated reports for
+        // the Taler auditor, we need to generate this data anyway
+        // and should probably return it here as well.
+        interface WireFeeConflictDetails {
+            // Numerical error code:
+            code: "TALER_EC_MERCHANT_PRIVATE_POST_TRANSFERS_BAD_WIRE_FEE";
+
+            // Text describing the issue for humans.
+            hint: string;
+
+
+            // Wire fee (wrongly) charged by the exchange, breaking the
+            // contract affirmed by the exchange_sig.
+            wire_fee: Amount;
+
+            // Timestamp of the wire transfer
+            execution_time: Timestamp;
+
+            // The expected wire fee (as signed by the exchange)
+            expected_wire_fee: Amount;
+
+            // Expected closing fee (needed to verify signature)
+            expected_closing_fee: Amount;
+
+            // Start date of the expected fee structure
+            start_date: Timestamp;
+
+            // End date of the expected fee structure
+            end_date: Timestamp;
+
+            // Signature of the exchange affirming the expected fee structure
+            master_sig: EddsaSignature;
+
+            // Master public key of the exchange
+            master_pub: EddsaPublicKey;
+        }
+        interface TrackTransferConflictDetails {
+            // Numerical error code
+            code: "TALER_EC_MERCHANT_PRIVATE_POST_TRANSFERS_CONFLICTING_REPORTS";
+
+            // Text describing the issue for humans.
+            hint: string;
+
+            // Offset in the exchange_transfer where the
+            // exchange's response fails to match the exchange_deposit_proof.
+            conflict_offset: number;
+
+            // The response from the exchange which tells us when the
+            // coin was returned to us, except that it does not match
+            // the expected value of the coin.
+            //
+            // This field is NOT provided by the current implementation,
+            // because this would be quite expensive to generate and is
+            // hardly needed _here_. Once we add automated reports for
+            // the Taler auditor, we need to generate this data anyway
+            // and should probably return it here as well.
+            // exchange_transfer?: TrackTransferResponse;
+
+            // Public key of the exchange used to sign the response to
+            // our deposit request.
+            deposit_exchange_pub: EddsaPublicKey;
+
+            // Signature of the exchange signing the (conflicting) response.
+            // Signs over a struct TALER_DepositConfirmationPS.
+            deposit_exchange_sig: EddsaSignature;
+
+            // Hash of the merchant's bank account the wire transfer went to
+            h_wire: HashCode;
+
+            // Hash of the contract terms with the conflicting deposit.
+            h_contract_terms: HashCode;
+
+            // At what time the exchange received the deposit.  Needed
+            // to verify the \exchange_sig\.
+            deposit_timestamp: Timestamp;
+
+            // At what time the refund possibility expired (needed to verify exchange_sig).
+            refund_deadline: Timestamp;
+
+            // Public key of the coin for which we have conflicting information.
+            coin_pub: EddsaPublicKey;
+
+            // Amount the exchange counted the coin for in the transfer.
+            amount_with_fee: Amount;
+
+            // Expected value of the coin.
+            coin_value: Amount;
+
+            // Expected deposit fee of the coin.
+            coin_fee: Amount;
+
+            // Expected deposit fee of the coin.
+            deposit_fee: Amount;
+
+        }
+
+        // interface TrackTransferProof {
+        //     // signature from the exchange made with purpose
+        //     // TALER_SIGNATURE_EXCHANGE_CONFIRM_WIRE_DEPOSIT
+        //     exchange_sig: EddsaSignature;
+
+        //     // public EdDSA key of the exchange that was used to generate the signature.
+        //     // Should match one of the exchange's signing keys from /keys.  Again given
+        //     // explicitly as the client might otherwise be confused by clock skew as to
+        //     // which signing key was used.
+        //     exchange_pub: EddsaSignature;
+
+        //     // hash of the wire details (identical for all deposits)
+        //     // Needed to check the exchange_sig
+        //     h_wire: HashCode;
+        // }
+
+    }
+
+
+    interface ContractTerms {
+        // Human-readable description of the whole purchase
+        summary: string;
+
+        // Map from IETF BCP 47 language tags to localized summaries
+        summary_i18n?: { [lang_tag: string]: string };
+
+        // Unique, free-form identifier for the proposal.
+        // Must be unique within a merchant instance.
+        // For merchants that do not store proposals in their DB
+        // before the customer paid for them, the order_id can be used
+        // by the frontend to restore a proposal from the information
+        // encoded in it (such as a short product identifier and timestamp).
+        order_id: string;
+
+        // Total price for the transaction.
+        // The exchange will subtract deposit fees from that amount
+        // before transferring it to the merchant.
+        amount: Amount;
+
+        // The URL for this purchase.  Every time is is visited, the merchant
+        // will send back to the customer the same proposal.  Clearly, this URL
+        // can be bookmarked and shared by users.
+        fulfillment_url?: string;
+
+        // Maximum total deposit fee accepted by the merchant for this contract
+        max_fee: Amount;
+
+        // Maximum wire fee accepted by the merchant (customer share to be
+        // divided by the 'wire_fee_amortization' factor, and further reduced
+        // if deposit fees are below 'max_fee').  Default if missing is zero.
+        max_wire_fee: Amount;
+
+        // Over how many customer transactions does the merchant expect to
+        // amortize wire fees on average?  If the exchange's wire fee is
+        // above 'max_wire_fee', the difference is divided by this number
+        // to compute the expected customer's contribution to the wire fee.
+        // The customer's contribution may further be reduced by the difference
+        // between the 'max_fee' and the sum of the actual deposit fees.
+        // Optional, default value if missing is 1.  0 and negative values are
+        // invalid and also interpreted as 1.
+        wire_fee_amortization: number;
+
+        // List of products that are part of the purchase (see Product).
+        products: Product[];
+
+        // Time when this contract was generated
+        timestamp: TalerProtocolTimestamp;
+
+        // After this deadline has passed, no refunds will be accepted.
+        refund_deadline: TalerProtocolTimestamp;
+
+        // After this deadline, the merchant won't accept payments for the contact
+        pay_deadline: TalerProtocolTimestamp;
+
+        // Transfer deadline for the exchange.  Must be in the
+        // deposit permissions of coins used to pay for this order.
+        wire_transfer_deadline: TalerProtocolTimestamp;
+
+        // Merchant's public key used to sign this proposal; this information
+        // is typically added by the backend Note that this can be an ephemeral key.
+        merchant_pub: EddsaPublicKey;
+
+        // Base URL of the (public!) merchant backend API.
+        // Must be an absolute URL that ends with a slash.
+        merchant_base_url: string;
+
+        // More info about the merchant, see below
+        merchant: Merchant;
+
+        // The hash of the merchant instance's wire details.
+        h_wire: HashCode;
+
+        // Wire transfer method identifier for the wire method associated with h_wire.
+        // The wallet may only select exchanges via a matching auditor if the
+        // exchange also supports this wire method.
+        // The wire transfer fees must be added based on this wire transfer method.
+        wire_method: string;
+
+        // Any exchanges audited by these auditors are accepted by the merchant.
+        auditors: Auditor[];
+
+        // Exchanges that the merchant accepts even if it does not accept any auditors that audit them.
+        exchanges: Exchange[];
+
+        // Delivery location for (all!) products.
+        delivery_location?: Location;
+
+        // Time indicating when the order should be delivered.
+        // May be overwritten by individual products.
+        delivery_date?: TalerProtocolTimestamp;
+
+        // Nonce generated by the wallet and echoed by the merchant
+        // in this field when the proposal is generated.
+        nonce: string;
+
+        // Specifies for how long the wallet should try to get an
+        // automatic refund for the purchase. If this field is
+        // present, the wallet should wait for a few seconds after
+        // the purchase and then automatically attempt to obtain
+        // a refund.  The wallet should probe until "delay"
+        // after the payment was successful (i.e. via long polling
+        // or via explicit requests with exponential back-off).
+        //
+        // In particular, if the wallet is offline
+        // at that time, it MUST repeat the request until it gets
+        // one response from the merchant after the delay has expired.
+        // If the refund is granted, the wallet MUST automatically
+        // recover the payment.  This is used in case a merchant
+        // knows that it might be unable to satisfy the contract and
+        // desires for the wallet to attempt to get the refund without any
+        // customer interaction.  Note that it is NOT an error if the
+        // merchant does not grant a refund.
+        auto_refund?: RelativeTime;
+
+        // Extra data that is only interpreted by the merchant frontend.
+        // Useful when the merchant needs to store extra information on a
+        // contract without storing it separately in their database.
+        extra?: any;
+    }
+
+}
diff --git a/packages/merchant-backend-ui/src/hooks/async.ts b/packages/merchant-backend-ui/src/hooks/async.ts
new file mode 100644
index 000000000..fd550043b
--- /dev/null
+++ b/packages/merchant-backend-ui/src/hooks/async.ts
@@ -0,0 +1,76 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+import { useState } from "preact/hooks";
+import { cancelPendingRequest } from "./backend";
+
+export interface Options {
+  slowTolerance: number,
+}
+
+export interface AsyncOperationApi<T> {
+  request: (...a: any) => void,
+  cancel: () => void,
+  data: T | undefined,
+  isSlow: boolean,
+  isLoading: boolean,
+  error: string | undefined
+}
+
+export function useAsync<T>(fn?: (...args: any) => Promise<T>, { slowTolerance: tooLong }: Options = { slowTolerance: 1000 }): AsyncOperationApi<T> {
+  const [data, setData] = useState<T | undefined>(undefined);
+  const [isLoading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<any>(undefined);
+  const [isSlow, setSlow] = useState(false)
+
+  const request = async (...args: any) => {
+    if (!fn) return;
+    setLoading(true);
+
+    const handler = setTimeout(() => {
+      setSlow(true)
+    }, tooLong)
+
+    try {
+      const result = await fn(...args);
+      setData(result);
+    } catch (error) {
+      setError(error);
+    }
+    setLoading(false);
+    setSlow(false)
+    clearTimeout(handler)
+  };
+
+  function cancel() {
+    cancelPendingRequest()
+    setLoading(false);
+    setSlow(false)
+  }
+
+  return {
+    request,
+    cancel,
+    data,
+    isSlow,
+    isLoading,
+    error
+  };
+}
diff --git a/packages/merchant-backend-ui/src/hooks/backend.ts b/packages/merchant-backend-ui/src/hooks/backend.ts
new file mode 100644
index 000000000..96b8f7139
--- /dev/null
+++ b/packages/merchant-backend-ui/src/hooks/backend.ts
@@ -0,0 +1,262 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { mutate, cache } from 'swr';
+import axios, { AxiosError, AxiosResponse } from 'axios'
+import { MerchantBackend } from '../declaration';
+import { useBackendContext } from '../context/backend';
+import { useEffect, useState } from 'preact/hooks';
+import { DEFAULT_REQUEST_TIMEOUT } from '../utils/constants';
+
+export function mutateAll(re: RegExp, value?: unknown): Array<Promise<any>> {
+  return cache.keys().filter(key => {
+    return re.test(key)
+  }).map(key => {
+    return mutate(key, value)
+  })
+}
+
+export type HttpResponse<T> = HttpResponseOk<T> | HttpResponseLoading<T> | HttpError;
+export type HttpResponsePaginated<T> = HttpResponseOkPaginated<T> | HttpResponseLoading<T> | HttpError;
+
+export interface RequestInfo {
+  url: string;
+  hasToken: boolean;
+  params: unknown;
+  data: unknown;
+}
+
+interface HttpResponseLoading<T> {
+  ok?: false;
+  loading: true;
+  clientError?: false;
+  serverError?: false;
+
+  data?: T;
+}
+export interface HttpResponseOk<T> {
+  ok: true;
+  loading?: false;
+  clientError?: false;
+  serverError?: false;
+
+  data: T;
+  info?: RequestInfo;
+}
+
+export type HttpResponseOkPaginated<T> = HttpResponseOk<T> & WithPagination
+
+export interface WithPagination {
+  loadMore: () => void;
+  loadMorePrev: () => void;
+  isReachingEnd?: boolean;
+  isReachingStart?: boolean;
+}
+
+export type HttpError = HttpResponseClientError | HttpResponseServerError | HttpResponseUnexpectedError;
+export interface SwrError {
+  info: unknown,
+  status: number,
+  message: string,
+}
+export interface HttpResponseServerError {
+  ok?: false;
+  loading?: false;
+  clientError?: false;
+  serverError: true;
+
+  error?: MerchantBackend.ErrorDetail;
+  status: number;
+  message: string;
+  info?: RequestInfo;
+}
+interface HttpResponseClientError {
+  ok?: false;
+  loading?: false;
+  clientError: true;
+  serverError?: false;
+
+  info?: RequestInfo;
+  isUnauthorized: boolean;
+  isNotfound: boolean;
+  status: number;
+  error?: MerchantBackend.ErrorDetail;
+  message: string;
+
+}
+
+interface HttpResponseUnexpectedError {
+  ok?: false;
+  loading?: false;
+  clientError?: false;
+  serverError?: false;
+
+  info?: RequestInfo;
+  status?: number;
+  error: unknown;
+  message: string;
+}
+
+type Methods = 'get' | 'post' | 'patch' | 'delete' | 'put';
+
+interface RequestOptions {
+  method?: Methods;
+  token?: string;
+  data?: unknown;
+  params?: unknown;
+}
+
+function buildRequestOk<T>(res: AxiosResponse<T>, url: string, hasToken: boolean): HttpResponseOk<T> {
+  return {
+    ok: true, data: res.data, info: {
+      params: res.config.params,
+      data: res.config.data,
+      url,
+      hasToken,
+    }
+  }
+}
+
+// function buildResponse<T>(data?: T, error?: MerchantBackend.ErrorDetail, isValidating?: boolean): HttpResponse<T> {
+//   if (isValidating) return {loading: true}
+//   if (error) return buildRequestFailed()
+// }
+
+function buildRequestFailed(ex: AxiosError<MerchantBackend.ErrorDetail>, url: string, hasToken: boolean): HttpResponseClientError | HttpResponseServerError | HttpResponseUnexpectedError {
+  const status = ex.response?.status
+
+  const info: RequestInfo = {
+    data: ex.request?.data,
+    params: ex.request?.params,
+    url,
+    hasToken,
+  };
+
+  if (status && status >= 400 && status < 500) {
+    const error: HttpResponseClientError = {
+      clientError: true,
+      isNotfound: status === 404,
+      isUnauthorized: status === 401,
+      status,
+      info,
+      message: ex.response?.data?.hint || ex.message,
+      error: ex.response?.data
+    }
+    return error
+  }
+  if (status && status >= 500 && status < 600) {
+    const error: HttpResponseServerError = {
+      serverError: true,
+      status,
+      info,
+      message: `${ex.response?.data?.hint} (code ${ex.response?.data?.code})` || ex.message,
+      error: ex.response?.data
+    }
+    return error;
+  }
+
+  const error: HttpResponseUnexpectedError = {
+    info,
+    status,
+    error: ex,
+    message: ex.message
+  }
+
+  return error
+}
+
+
+const CancelToken = axios.CancelToken;
+let source = CancelToken.source();
+
+export function cancelPendingRequest() {
+  source.cancel('canceled by the user')
+  source = CancelToken.source()
+}
+
+let removeAxiosCancelToken = false
+/**
+ * Jest mocking seems to break when using the cancelToken property.
+ * Using this workaround when testing while finding the correct solution
+ */
+export function setAxiosRequestAsTestingEnvironment() {
+  removeAxiosCancelToken = true
+}
+
+export async function request<T>(url: string, options: RequestOptions = {}): Promise<HttpResponseOk<T>> {
+  const headers = options.token ? { Authorization: `Bearer ${options.token}` } : undefined
+
+  try {
+    const res = await axios({
+      url,
+      responseType: 'json',
+      headers,
+      cancelToken: !removeAxiosCancelToken? source.token : undefined,
+      method: options.method || 'get',
+      data: options.data,
+      params: options.params,
+      timeout: DEFAULT_REQUEST_TIMEOUT * 1000,
+    })
+    return buildRequestOk<T>(res, url, !!options.token)
+  } catch (e) {
+    const error = buildRequestFailed(e, url, !!options.token)
+    throw error
+  }
+
+}
+
+export function fetcher<T>(url: string, token: string, backend: string): Promise<HttpResponseOk<T>> {
+  return request<T>(`${backend}${url}`, { token })
+}
+
+export function useBackendInstancesTestForAdmin(): HttpResponse<MerchantBackend.Instances.InstancesResponse> {
+  const { url, token } = useBackendContext()
+
+  type Type = MerchantBackend.Instances.InstancesResponse;
+
+  const [result, setResult] = useState<HttpResponse<Type>>({ loading: true })
+
+  useEffect(() => {
+    request<Type>(`${url}/management/instances`, { token })
+      .then(data => setResult(data))
+      .catch(error => setResult(error))
+  }, [url, token])
+
+
+  return result
+}
+
+
+export function useBackendConfig(): HttpResponse<MerchantBackend.VersionResponse> {
+  const { url, token } = useBackendContext()
+
+  type Type = MerchantBackend.VersionResponse;
+
+  const [result, setResult] = useState<HttpResponse<Type>>({ loading: true })
+
+  useEffect(() => {
+    request<Type>(`${url}/config`, { token })
+      .then(data => setResult(data))
+      .catch(error => setResult(error))
+  }, [url, token])
+
+  return result
+}
diff --git a/packages/merchant-backend-ui/src/hooks/index.ts b/packages/merchant-backend-ui/src/hooks/index.ts
new file mode 100644
index 000000000..19d672ad3
--- /dev/null
+++ b/packages/merchant-backend-ui/src/hooks/index.ts
@@ -0,0 +1,110 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { StateUpdater, useCallback, useState } from "preact/hooks";
+import { ValueOrFunction } from '../utils/types';
+
+
+const calculateRootPath = () => {
+  const rootPath = typeof window !== undefined ? window.location.origin + window.location.pathname : '/'
+  return rootPath
+}
+
+export function useBackendURL(url?: string): [string, boolean, StateUpdater<string>, () => void] {
+  const [value, setter] = useNotNullLocalStorage('backend-url', url || calculateRootPath())
+  const [triedToLog, setTriedToLog] = useLocalStorage('tried-login')
+
+  const checkedSetter = (v: ValueOrFunction<string>) => {
+    setTriedToLog('yes')
+    return setter(p => (v instanceof Function ? v(p) : v).replace(/\/$/, ''))
+  }
+
+  const resetBackend = () => {
+    setTriedToLog(undefined)
+  }
+  return [value, !!triedToLog, checkedSetter, resetBackend]
+}
+
+export function useBackendDefaultToken(): [string | undefined, StateUpdater<string | undefined>] {
+  return useLocalStorage('backend-token')
+}
+
+export function useBackendInstanceToken(id: string): [string | undefined, StateUpdater<string | undefined>] {
+  const [token, setToken] = useLocalStorage(`backend-token-${id}`)
+  const [defaultToken, defaultSetToken] = useBackendDefaultToken()
+
+  // instance named 'default' use the default token
+  if (id === 'default') {
+    return [defaultToken, defaultSetToken]
+  }
+
+  return [token, setToken]
+}
+
+export function useLang(initial?: string): [string, StateUpdater<string>] {
+  const browserLang = typeof window !== "undefined" ? navigator.language || (navigator as any).userLanguage : undefined;
+  const defaultLang = (browserLang || initial || 'en').substring(0, 2)
+  return useNotNullLocalStorage('lang-preference', defaultLang)
+}
+
+export function useLocalStorage(key: string, initialValue?: string): [string | undefined, StateUpdater<string | undefined>] {
+  const [storedValue, setStoredValue] = useState<string | undefined>((): string | undefined => {
+    return typeof window !== "undefined" ? window.localStorage.getItem(key) || initialValue : initialValue;
+  });
+
+  const setValue = (value?: string | ((val?: string) => string | undefined)) => {
+    setStoredValue(p => {
+      const toStore = value instanceof Function ? value(p) : value
+      if (typeof window !== "undefined") {
+        if (!toStore) {
+          window.localStorage.removeItem(key)
+        } else {
+          window.localStorage.setItem(key, toStore);
+        }
+      }
+      return toStore
+    })
+  };
+
+  return [storedValue, setValue];
+}
+
+export function useNotNullLocalStorage(key: string, initialValue: string): [string, StateUpdater<string>] {
+  const [storedValue, setStoredValue] = useState<string>((): string => {
+    return typeof window !== "undefined" ? window.localStorage.getItem(key) || initialValue : initialValue;
+  });
+
+  const setValue = (value: string | ((val: string) => string)) => {
+    const valueToStore = value instanceof Function ? value(storedValue) : value;
+    setStoredValue(valueToStore);
+    if (typeof window !== "undefined") {
+      if (!valueToStore) {
+        window.localStorage.removeItem(key)
+      } else {
+        window.localStorage.setItem(key, valueToStore);
+      }
+    }
+  };
+
+  return [storedValue, setValue];
+}
+
+
diff --git a/packages/merchant-backend-ui/src/hooks/instance.ts b/packages/merchant-backend-ui/src/hooks/instance.ts
new file mode 100644
index 000000000..14ab8de9c
--- /dev/null
+++ b/packages/merchant-backend-ui/src/hooks/instance.ts
@@ -0,0 +1,187 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+import { MerchantBackend } from '../declaration';
+import { useBackendContext } from '../context/backend';
+import { fetcher, HttpError, HttpResponse, HttpResponseOk, request, SwrError } from './backend';
+import useSWR, { mutate } from 'swr';
+import { useInstanceContext } from '../context/instance';
+
+
+interface InstanceAPI {
+  updateInstance: (data: MerchantBackend.Instances.InstanceReconfigurationMessage) => Promise<void>;
+  deleteInstance: () => Promise<void>;
+  clearToken: () => Promise<void>;
+  setNewToken: (token: string) => Promise<void>;
+}
+
+export function useManagementAPI(instanceId: string) : InstanceAPI {
+  const { url, token } = useBackendContext()
+
+  const updateInstance = async (instance: MerchantBackend.Instances.InstanceReconfigurationMessage): Promise<void> => {
+    await request(`${url}/management/instances/${instanceId}`, {
+      method: 'patch',
+      token,
+      data: instance
+    })
+
+    mutate([`/private/`, token, url], null)
+  };
+
+  const deleteInstance = async (): Promise<void> => {
+    await request(`${url}/management/instances/${instanceId}`, {
+      method: 'delete',
+      token,
+    })
+
+    mutate([`/private/`, token, url], null)
+  }
+
+  const clearToken = async (): Promise<void> => {
+    await request(`${url}/management/instances/${instanceId}/auth`, {
+      method: 'post',
+      token,
+      data: { method: 'external' }
+    })
+
+    mutate([`/private/`, token, url], null)
+  }
+
+  const setNewToken = async (newToken: string): Promise<void> => {
+    await request(`${url}/management/instances/${instanceId}/auth`, {
+      method: 'post',
+      token,
+      data: { method: 'token', token: newToken }
+    })
+
+    mutate([`/private/`, token, url], null)
+  }
+
+  return { updateInstance, deleteInstance, setNewToken, clearToken }
+}
+
+export function useInstanceAPI(): InstanceAPI {
+  const { url: baseUrl, token: adminToken } = useBackendContext()
+  const { token: instanceToken, id, admin } = useInstanceContext()
+
+  const { url, token } = !admin ? {
+    url: baseUrl, token: adminToken
+  } : {
+    url: `${baseUrl}/instances/${id}`, token: instanceToken
+  };
+
+  const updateInstance = async (instance: MerchantBackend.Instances.InstanceReconfigurationMessage): Promise<void> => {
+    await request(`${url}/private/`, {
+      method: 'patch',
+      token,
+      data: instance
+    })
+
+    if (adminToken) mutate(['/private/instances', adminToken, baseUrl], null)
+    mutate([`/private/`, token, url], null)
+  };
+
+  const deleteInstance = async (): Promise<void> => {
+    await request(`${url}/private/`, {
+      method: 'delete',
+      token: adminToken,
+    })
+
+    if (adminToken) mutate(['/private/instances', adminToken, baseUrl], null)
+    mutate([`/private/`, token, url], null)
+  }
+
+  const clearToken = async (): Promise<void> => {
+    await request(`${url}/private/auth`, {
+      method: 'post',
+      token,
+      data: { method: 'external' }
+    })
+
+    mutate([`/private/`, token, url], null)
+  }
+
+  const setNewToken = async (newToken: string): Promise<void> => {
+    await request(`${url}/private/auth`, {
+      method: 'post',
+      token,
+      data: { method: 'token', token: newToken }
+    })
+
+    mutate([`/private/`, token, url], null)
+  }
+
+  return { updateInstance, deleteInstance, setNewToken, clearToken }
+}
+
+
+export function useInstanceDetails(): HttpResponse<MerchantBackend.Instances.QueryInstancesResponse> {
+  const { url: baseUrl, token: baseToken } = useBackendContext();
+  const { token: instanceToken, id, admin } = useInstanceContext();
+
+  const { url, token } = !admin ? {
+    url: baseUrl, token: baseToken
+  } : {
+    url: `${baseUrl}/instances/${id}`, token: instanceToken
+  }
+
+  const { data, error, isValidating } = useSWR<HttpResponseOk<MerchantBackend.Instances.QueryInstancesResponse>, HttpError>([`/private/`, token, url], fetcher, {
+    refreshInterval:0,
+    refreshWhenHidden: false,
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false,
+    refreshWhenOffline: false,
+    errorRetryCount: 0,
+    errorRetryInterval: 1,
+    shouldRetryOnError: false,
+  })
+
+  if (isValidating) return {loading:true, data: data?.data}
+  if (data) return data
+  if (error) return error
+  return {loading: true}
+}
+
+export function useManagedInstanceDetails(instanceId: string): HttpResponse<MerchantBackend.Instances.QueryInstancesResponse> {
+  const { url, token } = useBackendContext();
+
+  const { data, error, isValidating } = useSWR<HttpResponseOk<MerchantBackend.Instances.QueryInstancesResponse>, HttpError>([`/management/instances/${instanceId}`, token, url], fetcher, {
+    refreshInterval:0,
+    refreshWhenHidden: false,
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false,
+    refreshWhenOffline: false,
+    errorRetryCount: 0,
+    errorRetryInterval: 1,
+    shouldRetryOnError: false,
+  })
+
+  if (isValidating) return {loading:true, data: data?.data}
+  if (data) return data
+  if (error) return error
+  return {loading: true}
+}
+
+export function useBackendInstances(): HttpResponse<MerchantBackend.Instances.InstancesResponse> {
+  const { url } = useBackendContext()
+  const { token } = useInstanceContext();
+
+  const { data, error, isValidating } = useSWR<HttpResponseOk<MerchantBackend.Instances.InstancesResponse>, HttpError>(['/management/instances', token, url], fetcher)
+
+  if (isValidating) return {loading:true, data: data?.data}
+  if (data) return data
+  if (error) return error
+  return {loading: true}
+}
diff --git a/packages/merchant-backend-ui/src/hooks/listener.ts b/packages/merchant-backend-ui/src/hooks/listener.ts
new file mode 100644
index 000000000..231ed6c87
--- /dev/null
+++ b/packages/merchant-backend-ui/src/hooks/listener.ts
@@ -0,0 +1,68 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { useState } from "preact/hooks";
+
+/**
+ * returns subscriber and activator
+ * subscriber will receive a method (listener) that will be call when the activator runs.
+ * the result of calling the listener will be sent to @action
+ *
+ * @param action from <T> to <R>
+ * @returns activator and subscriber, undefined activator means that there is not subscriber
+ */
+
+export function useListener<T, R = any>(action: (r: T) => Promise<R>): [undefined | (() => Promise<R>), (listener?: () => T) => void] {
+  type RunnerHandler = { toBeRan?: () => Promise<R>; };
+  const [state, setState] = useState<RunnerHandler>({});
+
+  /**
+   * subscriber will receive a method that will be call when the activator runs
+   *
+   * @param listener function to be run when the activator runs
+   */
+  const subscriber = (listener?: () => T) => {
+    if (listener) {
+      setState({
+        toBeRan: () => {
+          const whatWeGetFromTheListener = listener();
+          return action(whatWeGetFromTheListener);
+        }
+      });
+    } else {
+      setState({
+        toBeRan: undefined
+      })
+    }
+  };
+
+  /**
+   * activator will call runner if there is someone subscribed
+   */
+  const activator = state.toBeRan ? async () => {
+    if (state.toBeRan) {
+      return state.toBeRan();
+    }
+    return Promise.reject();
+  } : undefined;
+
+  return [activator, subscriber];
+}
diff --git a/packages/merchant-backend-ui/src/hooks/notification.ts b/packages/merchant-backend-ui/src/hooks/notification.ts
new file mode 100644
index 000000000..d1dfbff2c
--- /dev/null
+++ b/packages/merchant-backend-ui/src/hooks/notification.ts
@@ -0,0 +1,43 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { useCallback, useState } from "preact/hooks";
+import { Notification } from '../utils/types';
+
+interface Result {
+  notification?: Notification;
+  pushNotification: (n: Notification) => void;
+  removeNotification: () => void;
+}
+
+export function useNotification(): Result {
+  const [notification, setNotifications] = useState<Notification|undefined>(undefined)
+
+  const pushNotification = useCallback((n: Notification): void => {
+    setNotifications(n)
+  },[])
+
+  const removeNotification = useCallback(() => {
+    setNotifications(undefined)
+  },[])
+
+  return { notification, pushNotification, removeNotification }
+}
diff --git a/packages/merchant-backend-ui/src/hooks/notifications.ts b/packages/merchant-backend-ui/src/hooks/notifications.ts
new file mode 100644
index 000000000..1c0c37308
--- /dev/null
+++ b/packages/merchant-backend-ui/src/hooks/notifications.ts
@@ -0,0 +1,48 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { useState } from "preact/hooks";
+import { Notification } from '../utils/types';
+
+interface Result {
+  notifications: Notification[];
+  pushNotification: (n: Notification) => void;
+  removeNotification: (n: Notification) => void;
+}
+
+type NotificationWithDate = Notification & { since: Date }
+
+export function useNotifications(initial: Notification[] = [], timeout = 3000): Result {
+  const [notifications, setNotifications] = useState<(NotificationWithDate)[]>(initial.map(i => ({...i, since: new Date() })))
+
+  const pushNotification = (n: Notification): void => {
+    const entry = { ...n, since: new Date() }
+    setNotifications(ns => [...ns, entry])
+    if (n.type !== 'ERROR') setTimeout(() => {
+      setNotifications(ns => ns.filter(x => x.since !== entry.since))
+    }, timeout)
+  }
+
+  const removeNotification = (notif: Notification) => {
+    setNotifications((ns: NotificationWithDate[]) => ns.filter(n => n !== notif))
+  }
+  return { notifications, pushNotification, removeNotification }
+}
diff --git a/packages/merchant-backend-ui/src/hooks/order.ts b/packages/merchant-backend-ui/src/hooks/order.ts
new file mode 100644
index 000000000..4a17eac30
--- /dev/null
+++ b/packages/merchant-backend-ui/src/hooks/order.ts
@@ -0,0 +1,217 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+import { useEffect, useState } from 'preact/hooks';
+import useSWR from 'swr';
+import { useBackendContext } from '../context/backend';
+import { useInstanceContext } from '../context/instance';
+import { MerchantBackend } from '../declaration';
+import { MAX_RESULT_SIZE, PAGE_SIZE } from '../utils/constants';
+import { fetcher, HttpError, HttpResponse, HttpResponseOk, HttpResponsePaginated, mutateAll, request } from './backend';
+
+export interface OrderAPI {
+  //FIXME: add OutOfStockResponse on 410
+  createOrder: (data: MerchantBackend.Orders.PostOrderRequest) => Promise<HttpResponseOk<MerchantBackend.Orders.PostOrderResponse>>;
+  forgetOrder: (id: string, data: MerchantBackend.Orders.ForgetRequest) => Promise<HttpResponseOk<void>>;
+  refundOrder: (id: string, data: MerchantBackend.Orders.RefundRequest) => Promise<HttpResponseOk<MerchantBackend.Orders.MerchantRefundResponse>>;
+  deleteOrder: (id: string) => Promise<HttpResponseOk<void>>;
+  getPaymentURL: (id: string) => Promise<HttpResponseOk<string>>;
+}
+
+type YesOrNo = 'yes' | 'no';
+
+
+export function orderFetcher<T>(url: string, token: string, backend: string, paid?: YesOrNo, refunded?: YesOrNo, wired?: YesOrNo, searchDate?: Date, delta?: number): Promise<HttpResponseOk<T>> {
+  const date_ms = delta && delta < 0 && searchDate ? searchDate.getTime() + 1 : searchDate?.getTime()
+  const params: any = {}
+  if (paid !== undefined) params.paid = paid
+  if (delta !== undefined) params.delta = delta
+  if (refunded !== undefined) params.refunded = refunded
+  if (wired !== undefined) params.wired = wired
+  if (date_ms !== undefined) params.date_ms = date_ms
+  return request<T>(`${backend}${url}`, { token, params })
+}
+
+
+export function useOrderAPI(): OrderAPI {
+  const { url: baseUrl, token: adminToken } = useBackendContext()
+  const { token: instanceToken, id, admin } = useInstanceContext()
+
+  const { url, token } = !admin ? {
+    url: baseUrl, token: adminToken
+  } : {
+    url: `${baseUrl}/instances/${id}`, token: instanceToken
+  }
+
+  const createOrder = async (data: MerchantBackend.Orders.PostOrderRequest): Promise<HttpResponseOk<MerchantBackend.Orders.PostOrderResponse>> => {
+    const res = await request<MerchantBackend.Orders.PostOrderResponse>(`${url}/private/orders`, {
+      method: 'post',
+      token,
+      data
+    })
+    await mutateAll(/@"\/private\/orders"@/)
+    return res
+  }
+  const refundOrder = async (orderId: string, data: MerchantBackend.Orders.RefundRequest): Promise<HttpResponseOk<MerchantBackend.Orders.MerchantRefundResponse>> => {
+    mutateAll(/@"\/private\/orders"@/)
+    return request<MerchantBackend.Orders.MerchantRefundResponse>(`${url}/private/orders/${orderId}/refund`, {
+      method: 'post',
+      token,
+      data
+    })
+
+    // return res
+  }
+
+  const forgetOrder = async (orderId: string, data: MerchantBackend.Orders.ForgetRequest): Promise<HttpResponseOk<void>> => {
+    mutateAll(/@"\/private\/orders"@/)
+    return request(`${url}/private/orders/${orderId}/forget`, {
+      method: 'patch',
+      token,
+      data
+    })
+
+  }
+  const deleteOrder = async (orderId: string): Promise<HttpResponseOk<void>> => {
+    mutateAll(/@"\/private\/orders"@/)
+    return request(`${url}/private/orders/${orderId}`, {
+      method: 'delete',
+      token
+    })
+  }
+
+  const getPaymentURL = async (orderId: string): Promise<HttpResponseOk<string>> => {
+    return request<MerchantBackend.Orders.MerchantOrderStatusResponse>(`${url}/private/orders/${orderId}`, {
+      method: 'get',
+      token
+    }).then((res) => {
+      const url = res.data.order_status === "unpaid" ? res.data.taler_pay_uri : res.data.contract_terms.fulfillment_url
+      const response: HttpResponseOk<string> = res as any
+      response.data = url || ''
+      return response
+    })
+  }
+
+  return { createOrder, forgetOrder, deleteOrder, refundOrder, getPaymentURL }
+}
+
+export function useOrderDetails(oderId: string): HttpResponse<MerchantBackend.Orders.MerchantOrderStatusResponse> {
+  const { url: baseUrl, token: baseToken } = useBackendContext();
+  const { token: instanceToken, id, admin } = useInstanceContext();
+
+  const { url, token } = !admin ? {
+    url: baseUrl, token: baseToken
+  } : {
+    url: `${baseUrl}/instances/${id}`, token: instanceToken
+  };
+
+  const { data, error, isValidating } = useSWR<HttpResponseOk<MerchantBackend.Orders.MerchantOrderStatusResponse>, HttpError>([`/private/orders/${oderId}`, token, url], fetcher, {
+    refreshInterval: 0,
+    refreshWhenHidden: false,
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false,
+    refreshWhenOffline: false,
+  })
+
+  if (isValidating) return { loading: true, data: data?.data }
+  if (data) return data
+  if (error) return error
+  return { loading: true }
+}
+
+export interface InstanceOrderFilter {
+  paid?: YesOrNo;
+  refunded?: YesOrNo;
+  wired?: YesOrNo;
+  date?: Date;
+}
+
+export function useInstanceOrders(args?: InstanceOrderFilter, updateFilter?: (d: Date) => void): HttpResponsePaginated<MerchantBackend.Orders.OrderHistory> {
+  const { url: baseUrl, token: baseToken } = useBackendContext();
+  const { token: instanceToken, id, admin } = useInstanceContext();
+
+  const { url, token } = !admin ? {
+    url: baseUrl, token: baseToken
+  } : {
+    url: `${baseUrl}/instances/${id}`, token: instanceToken
+  }
+
+  const [pageBefore, setPageBefore] = useState(1)
+  const [pageAfter, setPageAfter] = useState(1)
+
+  const totalAfter = pageAfter * PAGE_SIZE;
+  const totalBefore = args?.date ? pageBefore * PAGE_SIZE : 0;
+
+  /**
+   * FIXME: this can be cleaned up a little
+   * 
+   * the logic of double query should be inside the orderFetch so from the hook perspective and cache
+   * is just one query and one error status
+   */
+  const { data: beforeData, error: beforeError, isValidating: loadingBefore } = useSWR<HttpResponseOk<MerchantBackend.Orders.OrderHistory>, HttpError>(
+    [`/private/orders`, token, url, args?.paid, args?.refunded, args?.wired, args?.date, totalBefore],
+    orderFetcher,
+  )
+  const { data: afterData, error: afterError, isValidating: loadingAfter } = useSWR<HttpResponseOk<MerchantBackend.Orders.OrderHistory>, HttpError>(
+    [`/private/orders`, token, url, args?.paid, args?.refunded, args?.wired, args?.date, -totalAfter],
+    orderFetcher,
+  )
+
+  //this will save last result
+  const [lastBefore, setLastBefore] = useState<HttpResponse<MerchantBackend.Orders.OrderHistory>>({ loading: true })
+  const [lastAfter, setLastAfter] = useState<HttpResponse<MerchantBackend.Orders.OrderHistory>>({ loading: true })
+  useEffect(() => {
+    if (afterData) setLastAfter(afterData)
+    if (beforeData) setLastBefore(beforeData)
+  }, [afterData, beforeData])
+
+  // this has problems when there are some ids missing
+
+  if (beforeError) return beforeError
+  if (afterError) return afterError
+
+
+  const pagination = {
+    isReachingEnd: afterData && afterData.data.orders.length < totalAfter,
+    isReachingStart: (!args?.date) || (beforeData && beforeData.data.orders.length < totalBefore),
+    loadMore: () => {
+      if (!afterData) return
+      if (afterData.data.orders.length < MAX_RESULT_SIZE) {
+        setPageAfter(pageAfter + 1)
+      } else {
+        const from = afterData.data.orders[afterData.data.orders.length - 1].timestamp.t_s
+        if (from && updateFilter) updateFilter(new Date(from))
+      }
+    },
+    loadMorePrev: () => {
+      if (!beforeData) return
+      if (beforeData.data.orders.length < MAX_RESULT_SIZE) {
+        setPageBefore(pageBefore + 1)
+      } else if (beforeData) {
+        const from = beforeData.data.orders[beforeData.data.orders.length - 1].timestamp.t_s
+        if (from && updateFilter) updateFilter(new Date(from))
+      }
+    },
+  }
+
+  const orders = !beforeData || !afterData ? [] : (beforeData || lastBefore).data.orders.slice().reverse().concat((afterData || lastAfter).data.orders)
+  if (loadingAfter || loadingBefore) return { loading: true, data: { orders } }
+  if (beforeData && afterData) {
+    return { ok: true, data: { orders }, ...pagination }
+  }
+  return { loading: true }
+
+}
+
diff --git a/packages/merchant-backend-ui/src/hooks/product.ts b/packages/merchant-backend-ui/src/hooks/product.ts
new file mode 100644
index 000000000..4fc8bccb7
--- /dev/null
+++ b/packages/merchant-backend-ui/src/hooks/product.ts
@@ -0,0 +1,223 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+import { useEffect } from "preact/hooks";
+import useSWR, { trigger, useSWRInfinite, cache, mutate } from "swr";
+import { useBackendContext } from "../context/backend";
+// import { useFetchContext } from '../context/fetch';
+import { useInstanceContext } from "../context/instance";
+import { MerchantBackend, WithId } from "../declaration";
+import {
+  fetcher,
+  HttpError,
+  HttpResponse,
+  HttpResponseOk,
+  mutateAll,
+  request,
+} from "./backend";
+
+export interface ProductAPI {
+  createProduct: (
+    data: MerchantBackend.Products.ProductAddDetail
+  ) => Promise<void>;
+  updateProduct: (
+    id: string,
+    data: MerchantBackend.Products.ProductPatchDetail
+  ) => Promise<void>;
+  deleteProduct: (id: string) => Promise<void>;
+  lockProduct: (
+    id: string,
+    data: MerchantBackend.Products.LockRequest
+  ) => Promise<void>;
+}
+
+export function useProductAPI(): ProductAPI {
+  const { url: baseUrl, token: adminToken } = useBackendContext();
+  const { token: instanceToken, id, admin } = useInstanceContext();
+
+  const { url, token } = !admin
+    ? {
+        url: baseUrl,
+        token: adminToken,
+      }
+    : {
+        url: `${baseUrl}/instances/${id}`,
+        token: instanceToken,
+      };
+
+  const createProduct = async (
+    data: MerchantBackend.Products.ProductAddDetail
+  ): Promise<void> => {
+    await request(`${url}/private/products`, {
+      method: "post",
+      token,
+      data,
+    });
+
+    await mutateAll(/@"\/private\/products"@/, null);
+  };
+
+  const updateProduct = async (
+    productId: string,
+    data: MerchantBackend.Products.ProductPatchDetail
+  ): Promise<void> => {
+    const r = await request(`${url}/private/products/${productId}`, {
+      method: "patch",
+      token,
+      data,
+    });
+
+    await mutateAll(/@"\/private\/products\/.*"@/);
+    return Promise.resolve();
+  };
+
+  const deleteProduct = async (productId: string): Promise<void> => {
+    await request(`${url}/private/products/${productId}`, {
+      method: "delete",
+      token,
+    });
+
+    await mutateAll(/@"\/private\/products"@/);
+  };
+
+  const lockProduct = async (
+    productId: string,
+    data: MerchantBackend.Products.LockRequest
+  ): Promise<void> => {
+    await request(`${url}/private/products/${productId}/lock`, {
+      method: "post",
+      token,
+      data,
+    });
+
+    await mutateAll(/@"\/private\/products"@/);
+  };
+
+  return { createProduct, updateProduct, deleteProduct, lockProduct };
+}
+
+export function useInstanceProducts(): HttpResponse<
+  (MerchantBackend.Products.ProductDetail & WithId)[]
+> {
+  const { url: baseUrl, token: baseToken } = useBackendContext();
+  const { token: instanceToken, id, admin } = useInstanceContext();
+  // const { useSWR, useSWRInfinite } = useFetchContext();
+
+  const { url, token } = !admin
+    ? {
+        url: baseUrl,
+        token: baseToken,
+      }
+    : {
+        url: `${baseUrl}/instances/${id}`,
+        token: instanceToken,
+      };
+
+  const {
+    data: list,
+    error: listError,
+    isValidating: listLoading,
+  } = useSWR<
+    HttpResponseOk<MerchantBackend.Products.InventorySummaryResponse>,
+    HttpError
+  >([`/private/products`, token, url], fetcher, {
+    refreshInterval: 0,
+    refreshWhenHidden: false,
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false,
+    refreshWhenOffline: false,
+  });
+
+  const {
+    data: products,
+    error: productError,
+    setSize,
+    size,
+  } = useSWRInfinite<
+    HttpResponseOk<MerchantBackend.Products.ProductDetail>,
+    HttpError
+  >(
+    (pageIndex: number) => {
+      if (!list?.data || !list.data.products.length || listError || listLoading)
+        return null;
+      return [
+        `/private/products/${list.data.products[pageIndex].product_id}`,
+        token,
+        url,
+      ];
+    },
+    fetcher,
+    {
+      revalidateAll: true,
+    }
+  );
+
+  useEffect(() => {
+    if (list?.data && list.data.products.length > 0) {
+      setSize(list.data.products.length);
+    }
+  }, [list?.data.products.length, listLoading]);
+
+  if (listLoading) return { loading: true, data: [] };
+  if (listError) return listError;
+  if (productError) return productError;
+  if (list?.data && list.data.products.length === 0) {
+    return { ok: true, data: [] };
+  }
+  if (products) {
+    const dataWithId = products.map((d) => {
+      //take the id from the queried url
+      return {
+        ...d.data,
+        id: d.info?.url.replace(/.*\/private\/products\//, "") || "",
+      };
+    });
+    return { ok: true, data: dataWithId };
+  }
+  return { loading: true };
+}
+
+export function useProductDetails(
+  productId: string
+): HttpResponse<MerchantBackend.Products.ProductDetail> {
+  const { url: baseUrl, token: baseToken } = useBackendContext();
+  const { token: instanceToken, id, admin } = useInstanceContext();
+
+  const { url, token } = !admin
+    ? {
+        url: baseUrl,
+        token: baseToken,
+      }
+    : {
+        url: `${baseUrl}/instances/${id}`,
+        token: instanceToken,
+      };
+
+  const { data, error, isValidating } = useSWR<
+    HttpResponseOk<MerchantBackend.Products.ProductDetail>,
+    HttpError
+  >([`/private/products/${productId}`, token, url], fetcher, {
+    refreshInterval: 0,
+    refreshWhenHidden: false,
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false,
+    refreshWhenOffline: false,
+  });
+
+  if (isValidating) return { loading: true, data: data?.data };
+  if (data) return data;
+  if (error) return error;
+  return { loading: true };
+}
diff --git a/packages/merchant-backend-ui/src/hooks/tips.ts b/packages/merchant-backend-ui/src/hooks/tips.ts
new file mode 100644
index 000000000..345e1faa5
--- /dev/null
+++ b/packages/merchant-backend-ui/src/hooks/tips.ts
@@ -0,0 +1,159 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+import useSWR from 'swr';
+import { useBackendContext } from '../context/backend';
+import { useInstanceContext } from '../context/instance';
+import { MerchantBackend } from '../declaration';
+import { fetcher, HttpError, HttpResponse, HttpResponseOk, mutateAll, request } from './backend';
+
+
+export function useReservesAPI(): ReserveMutateAPI {
+  const { url: baseUrl, token: adminToken } = useBackendContext();
+  const { token: instanceToken, id, admin } = useInstanceContext();
+
+  const { url, token } = !admin ? {
+    url: baseUrl, token: adminToken
+  } : {
+    url: `${baseUrl}/instances/${id}`, token: instanceToken
+  };
+
+  const createReserve = async (data: MerchantBackend.Tips.ReserveCreateRequest): Promise<HttpResponseOk<MerchantBackend.Tips.ReserveCreateConfirmation>> => {
+    const res = await request<MerchantBackend.Tips.ReserveCreateConfirmation>(`${url}/private/reserves`, {
+      method: 'post',
+      token,
+      data
+    });
+
+    await mutateAll(/@"\/private\/reserves"@/);
+
+    return res
+  };
+
+  const authorizeTipReserve = async (pub: string, data: MerchantBackend.Tips.TipCreateRequest): Promise<HttpResponseOk<MerchantBackend.Tips.TipCreateConfirmation>> => {
+    const res = await request<MerchantBackend.Tips.TipCreateConfirmation>(`${url}/private/reserves/${pub}/authorize-tip`, {
+      method: 'post',
+      token,
+      data
+    });
+    await mutateAll(/@"\/private\/reserves"@/);
+
+    return res
+  };
+
+  const authorizeTip = async (data: MerchantBackend.Tips.TipCreateRequest): Promise<HttpResponseOk<MerchantBackend.Tips.TipCreateConfirmation>> => {
+    const res = await request<MerchantBackend.Tips.TipCreateConfirmation>(`${url}/private/tips`, {
+      method: 'post',
+      token,
+      data
+    });
+
+    await mutateAll(/@"\/private\/reserves"@/);
+
+    return res
+  };
+
+  const deleteReserve = async (pub: string): Promise<HttpResponse<void>> => {
+    const res = await request<void>(`${url}/private/reserves/${pub}`, {
+      method: 'delete',
+      token,
+    });
+
+    await mutateAll(/@"\/private\/reserves"@/);
+
+    return res
+  };
+
+
+  return { createReserve, authorizeTip, authorizeTipReserve, deleteReserve };
+}
+
+export interface ReserveMutateAPI {
+  createReserve: (data: MerchantBackend.Tips.ReserveCreateRequest) => Promise<HttpResponseOk<MerchantBackend.Tips.ReserveCreateConfirmation>>;
+  authorizeTipReserve: (id: string, data: MerchantBackend.Tips.TipCreateRequest) => Promise<HttpResponseOk<MerchantBackend.Tips.TipCreateConfirmation>>;
+  authorizeTip: (data: MerchantBackend.Tips.TipCreateRequest) => Promise<HttpResponseOk<MerchantBackend.Tips.TipCreateConfirmation>>;
+  deleteReserve: (id: string) => Promise<HttpResponse<void>>;
+}
+
+export function useInstanceTips(): HttpResponse<MerchantBackend.Tips.TippingReserveStatus> {
+  const { url: baseUrl, token: baseToken } = useBackendContext();
+  const { token: instanceToken, id, admin } = useInstanceContext();
+
+  const { url, token } = !admin ? {
+    url: baseUrl, token: baseToken
+  } : {
+    url: `${baseUrl}/instances/${id}`, token: instanceToken
+  }
+
+  const { data, error, isValidating } = useSWR<HttpResponseOk<MerchantBackend.Tips.TippingReserveStatus>, HttpError>([`/private/reserves`, token, url], fetcher)
+
+  if (isValidating) return { loading: true, data: data?.data }
+  if (data) return data
+  if (error) return error
+  return { loading: true }
+}
+
+
+export function useReserveDetails(reserveId: string): HttpResponse<MerchantBackend.Tips.ReserveDetail> {
+  const { url: baseUrl } = useBackendContext();
+  const { token, id: instanceId, admin } = useInstanceContext();
+
+  const url = !admin ? baseUrl : `${baseUrl}/instances/${instanceId}`
+
+  const { data, error, isValidating } = useSWR<HttpResponseOk<MerchantBackend.Tips.ReserveDetail>, HttpError>([`/private/reserves/${reserveId}`, token, url], reserveDetailFetcher, {
+    refreshInterval:0,
+    refreshWhenHidden: false,
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false,
+    refreshWhenOffline: false,
+  })
+
+  if (isValidating) return { loading: true, data: data?.data }
+  if (data) return data
+  if (error) return error
+  return { loading: true }
+}
+
+export function useTipDetails(tipId: string): HttpResponse<MerchantBackend.Tips.TipDetails> {
+  const { url: baseUrl } = useBackendContext();
+  const { token, id: instanceId, admin } = useInstanceContext();
+
+  const url = !admin ? baseUrl : `${baseUrl}/instances/${instanceId}`
+
+  const { data, error, isValidating } = useSWR<HttpResponseOk<MerchantBackend.Tips.TipDetails>, HttpError>([`/private/tips/${tipId}`, token, url], tipsDetailFetcher, {
+    refreshInterval:0,
+    refreshWhenHidden: false,
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false,
+    refreshWhenOffline: false,
+  })
+
+  if (isValidating) return { loading: true, data: data?.data }
+  if (data) return data
+  if (error) return error
+  return { loading: true }
+}
+
+export function reserveDetailFetcher<T>(url: string, token: string, backend: string): Promise<HttpResponseOk<T>> {
+  return request<T>(`${backend}${url}`, { token, params: {
+    tips: 'yes'
+  } })
+}
+
+export function tipsDetailFetcher<T>(url: string, token: string, backend: string): Promise<HttpResponseOk<T>> {
+  return request<T>(`${backend}${url}`, { token, params: {
+    pickups: 'yes'
+  } })
+}
diff --git a/packages/merchant-backend-ui/src/hooks/transfer.ts b/packages/merchant-backend-ui/src/hooks/transfer.ts
new file mode 100644
index 000000000..482f00dc5
--- /dev/null
+++ b/packages/merchant-backend-ui/src/hooks/transfer.ts
@@ -0,0 +1,150 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+import { MerchantBackend } from '../declaration';
+import { useBackendContext } from '../context/backend';
+import { request, mutateAll, HttpResponse, HttpError, HttpResponseOk, HttpResponsePaginated } from './backend';
+import useSWR from 'swr';
+import { useInstanceContext } from '../context/instance';
+import { MAX_RESULT_SIZE, PAGE_SIZE } from '../utils/constants';
+import { useEffect, useState } from 'preact/hooks';
+
+async function transferFetcher<T>(url: string, token: string, backend: string, payto_uri?: string, verified?: string, position?: string, delta?: number): Promise<HttpResponseOk<T>> {
+  const params: any = {}
+  if (payto_uri !== undefined) params.payto_uri = payto_uri
+  if (verified !== undefined) params.verified = verified
+  if (delta !== undefined) {
+    // if (delta > 0) {
+    //   params.after = searchDate?.getTime()
+    // } else {
+    //   params.before = searchDate?.getTime()
+    // }
+    params.limit = delta
+  }
+  if (position !== undefined) params.offset = position
+
+  return request<T>(`${backend}${url}`, { token, params })
+}
+
+export function useTransferAPI(): TransferAPI {
+  const { url: baseUrl, token: adminToken } = useBackendContext();
+  const { token: instanceToken, id, admin } = useInstanceContext();
+
+  const { url, token } = !admin ? {
+    url: baseUrl, token: adminToken
+  } : {
+    url: `${baseUrl}/instances/${id}`, token: instanceToken
+  };
+
+  const informTransfer = async (data: MerchantBackend.Transfers.TransferInformation): Promise<HttpResponseOk<MerchantBackend.Transfers.MerchantTrackTransferResponse>> => {
+    mutateAll(/@"\/private\/transfers"@/);
+
+    return request<MerchantBackend.Transfers.MerchantTrackTransferResponse>(`${url}/private/transfers`, {
+      method: 'post',
+      token,
+      data
+    });
+  };
+
+  return { informTransfer };
+}
+
+export interface TransferAPI {
+  informTransfer: (data: MerchantBackend.Transfers.TransferInformation) => Promise<HttpResponseOk<MerchantBackend.Transfers.MerchantTrackTransferResponse>>;
+}
+
+export interface InstanceTransferFilter {
+  payto_uri?: string;
+  verified?: 'yes' | 'no';
+  position?: string;
+}
+
+
+export function useInstanceTransfers(args?: InstanceTransferFilter, updatePosition?: (id: string) => void): HttpResponsePaginated<MerchantBackend.Transfers.TransferList> {
+  const { url: baseUrl, token: baseToken } = useBackendContext();
+  const { token: instanceToken, id, admin } = useInstanceContext();
+
+  const { url, token } = !admin ? {
+    url: baseUrl, token: baseToken
+  } : {
+    url: `${baseUrl}/instances/${id}`, token: instanceToken
+  }
+
+  const [pageBefore, setPageBefore] = useState(1)
+  const [pageAfter, setPageAfter] = useState(1)
+
+  const totalAfter = pageAfter * PAGE_SIZE;
+  const totalBefore = args?.position !== undefined ? pageBefore * PAGE_SIZE : 0;
+
+  /**
+   * FIXME: this can be cleaned up a little
+   * 
+   * the logic of double query should be inside the orderFetch so from the hook perspective and cache
+   * is just one query and one error status
+   */
+  const { data: beforeData, error: beforeError, isValidating: loadingBefore } = useSWR<HttpResponseOk<MerchantBackend.Transfers.TransferList>, HttpError>(
+    [`/private/transfers`, token, url, args?.payto_uri, args?.verified, args?.position, totalBefore],
+    transferFetcher,
+  )
+  const { data: afterData, error: afterError, isValidating: loadingAfter } = useSWR<HttpResponseOk<MerchantBackend.Transfers.TransferList>, HttpError>(
+    [`/private/transfers`, token, url, args?.payto_uri, args?.verified, args?.position, -totalAfter],
+    transferFetcher,
+  )
+
+  //this will save last result
+  const [lastBefore, setLastBefore] = useState<HttpResponse<MerchantBackend.Transfers.TransferList>>({ loading: true })
+  const [lastAfter, setLastAfter] = useState<HttpResponse<MerchantBackend.Transfers.TransferList>>({ loading: true })
+  useEffect(() => {
+    if (afterData) setLastAfter(afterData)
+    if (beforeData) setLastBefore(beforeData)
+  }, [afterData, beforeData])
+
+  // this has problems when there are some ids missing
+
+  if (beforeError) return beforeError
+  if (afterError) return afterError
+
+  const pagination = {
+    isReachingEnd: afterData && afterData.data.transfers.length < totalAfter,
+    isReachingStart: (!args?.position) || (beforeData && beforeData.data.transfers.length < totalBefore),
+    loadMore: () => {
+      if (!afterData) return
+      if (afterData.data.transfers.length < MAX_RESULT_SIZE) {
+        setPageAfter(pageAfter + 1)
+      } else {
+        const from = `${afterData.data.transfers[afterData.data.transfers.length - 1].transfer_serial_id}`
+        if (from && updatePosition) updatePosition(from)
+      }
+    },
+    loadMorePrev: () => {
+      if (!beforeData) return
+      if (beforeData.data.transfers.length < MAX_RESULT_SIZE) {
+        setPageBefore(pageBefore + 1)
+      } else if (beforeData) {
+        const from = `${beforeData.data.transfers[beforeData.data.transfers.length - 1].transfer_serial_id}`
+        if (from && updatePosition) updatePosition(from)
+      }
+    },
+  }
+
+  const transfers = !beforeData || !afterData ? [] : (beforeData || lastBefore).data.transfers.slice().reverse().concat((afterData || lastAfter).data.transfers)
+  if (loadingAfter || loadingBefore) return { loading: true, data: { transfers } }
+  if (beforeData && afterData) {
+    return { ok: true, data: { transfers }, ...pagination }
+  }
+  return { loading: true }
+}
+
+
diff --git a/packages/merchant-backend-ui/src/i18n/de.po b/packages/merchant-backend-ui/src/i18n/de.po
new file mode 100644
index 000000000..6b35bd0ce
--- /dev/null
+++ b/packages/merchant-backend-ui/src/i18n/de.po
@@ -0,0 +1,1057 @@
+# This file is part of TALER
+# (C) 2016 GNUnet e.V.
+#
+# TALER is free software; you can redistribute it and/or modify it under the
+# terms of the GNU General Public License as published by the Free Software
+# Foundation; either version 3, or (at your option) any later version.
+#
+# TALER is distributed in the hope that it will be useful, but WITHOUT ANY
+# WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+# A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License along with
+# TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+#
+#, fuzzy
+msgid ""
+msgstr ""
+"Project-Id-Version: Taler Wallet\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2016-11-23 00:00+0100\n"
+"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
+"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
+"Language-Team: LANGUAGE <LL@li.org>\n"
+"Language: \n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+#: src/ApplicationReadyRoutes.tsx:50 src/InstanceRoutes.tsx:118
+#: src/InstanceRoutes.tsx:299
+#, c-format
+msgid "Access denied"
+msgstr ""
+
+#: src/ApplicationReadyRoutes.tsx:51 src/InstanceRoutes.tsx:118
+#: src/InstanceRoutes.tsx:300
+#, c-format
+msgid "Check your token is valid"
+msgstr ""
+
+#: src/ApplicationReadyRoutes.tsx:72
+#, c-format
+msgid "Couldn't access the server."
+msgstr ""
+
+#: src/ApplicationReadyRoutes.tsx:73
+#, c-format
+msgid "Could not infer instance id from url %1$s"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:109
+#, c-format
+msgid "HTTP status #%1$s: Server reported a problem"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:110
+#, c-format
+msgid "Got message: \"%1$s\" from: %2$s"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:127
+#, c-format
+msgid "No default instance"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:128
+#, c-format
+msgid ""
+"in order to use merchant backoffice, you should create the default instance"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:288
+#, c-format
+msgid "Server reported a problem: HTTP status #%1$s"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:289
+#, c-format
+msgid "Got message: %1$s from: %2$s"
+msgstr ""
+
+#: src/components/exception/login.tsx:46
+#, c-format
+msgid "Login required"
+msgstr ""
+
+#: src/components/exception/login.tsx:49
+#, c-format
+msgid ""
+"Please enter your auth token. Token should have \"secret-token:\" and start "
+"with Bearer or ApiKey"
+msgstr ""
+
+#: src/components/exception/login.tsx:86 src/components/modal/index.tsx:53
+#: src/components/modal/index.tsx:75 src/paths/admin/create/CreatePage.tsx:115
+#: src/paths/instance/orders/create/CreatePage.tsx:325
+#: src/paths/instance/products/create/CreatePage.tsx:51
+#: src/paths/instance/products/list/Table.tsx:174
+#: src/paths/instance/products/list/Table.tsx:228
+#: src/paths/instance/products/update/UpdatePage.tsx:55
+#: src/paths/instance/transfers/create/CreatePage.tsx:89
+#: src/paths/instance/update/UpdatePage.tsx:134
+#, c-format
+msgid "Confirm"
+msgstr ""
+
+#: src/components/form/InputArray.tsx:72
+#, c-format
+msgid "The value %1$s is invalid for a payment url"
+msgstr ""
+
+#: src/components/form/InputDate.tsx:67
+#: src/paths/instance/orders/list/index.tsx:123
+#, c-format
+msgid "pick a date"
+msgstr ""
+
+#: src/components/form/InputDate.tsx:81
+#, c-format
+msgid "clear"
+msgstr ""
+
+#: src/components/form/InputDate.tsx:83
+#: src/paths/instance/transfers/list/Table.tsx:140
+#, c-format
+msgid "never"
+msgstr ""
+
+#: src/components/form/InputImage.tsx:80
+#, c-format
+msgid "Image should be smaller than 1 MB"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:28
+#, c-format
+msgid "Country"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:30
+#: src/paths/admin/create/CreatePage.tsx:99
+#: src/paths/instance/transfers/list/Table.tsx:124
+#: src/paths/instance/update/UpdatePage.tsx:118
+#, c-format
+msgid "Address"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:34
+#, c-format
+msgid "Building number"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:35
+#, c-format
+msgid "Building name"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:36
+#, c-format
+msgid "Street"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:37
+#, c-format
+msgid "Post code"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:38
+#, c-format
+msgid "Town location"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:39
+#, c-format
+msgid "Town"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:40
+#, c-format
+msgid "District"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:41
+#, c-format
+msgid "Country subdivision"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:59
+#, c-format
+msgid "Product id"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:60
+#: src/components/product/ProductForm.tsx:99
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:122
+#: src/paths/instance/orders/list/Table.tsx:227
+#: src/paths/instance/products/list/Table.tsx:86
+#, c-format
+msgid "Description"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:73
+#: src/components/form/InputTaxes.tsx:81
+#: src/paths/admin/create/CreatePage.tsx:87 src/paths/admin/list/Table.tsx:110
+#: src/paths/instance/details/DetailPage.tsx:76
+#: src/paths/instance/update/UpdatePage.tsx:106
+#, c-format
+msgid "Name"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:102
+#, c-format
+msgid "loading..."
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:108
+#, c-format
+msgid "no products found"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:116
+#, c-format
+msgid "no results"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:33
+#, c-format
+msgid "Deleting"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:34
+#, c-format
+msgid "Changing"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:60
+#, c-format
+msgid "Manage token"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:83
+#, c-format
+msgid "Update"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:100
+#: src/paths/instance/orders/create/CreatePage.tsx:252
+#: src/paths/instance/orders/create/CreatePage.tsx:273
+#, c-format
+msgid "Remove"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:106 src/components/modal/index.tsx:52
+#: src/components/modal/index.tsx:73 src/paths/admin/create/CreatePage.tsx:114
+#: src/paths/instance/orders/create/CreatePage.tsx:324
+#: src/paths/instance/products/create/CreatePage.tsx:50
+#: src/paths/instance/products/list/Table.tsx:166
+#: src/paths/instance/products/list/Table.tsx:218
+#: src/paths/instance/products/update/UpdatePage.tsx:54
+#: src/paths/instance/transfers/create/CreatePage.tsx:88
+#: src/paths/instance/update/UpdatePage.tsx:133
+#, c-format
+msgid "Cancel"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:91
+#, c-format
+msgid "Manage stock"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:93
+#, c-format
+msgid "Infinite"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:105
+#, c-format
+msgid "lost cannot be greater that current + incoming (max %1$s)"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:111
+#, c-format
+msgid "current stock will change from %1$s to %2$s"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:112
+#, c-format
+msgid "current stock will stay at %1$s"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:129
+#: src/paths/instance/products/list/Table.tsx:204
+#, c-format
+msgid "Incoming"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:130
+#: src/paths/instance/products/list/Table.tsx:205
+#, c-format
+msgid "Lost"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:142
+#, c-format
+msgid "Current"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:145
+#, c-format
+msgid "without stock"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:150
+#, c-format
+msgid "Next restock"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:152
+#, c-format
+msgid "Delivery address"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:73
+#, c-format
+msgid "this product has no taxes"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:77
+#: src/paths/instance/orders/details/DetailPage.tsx:145
+#: src/paths/instance/orders/details/DetailPage.tsx:296
+#: src/paths/instance/orders/list/Table.tsx:116
+#: src/paths/instance/transfers/create/CreatePage.tsx:84
+#, c-format
+msgid "Amount"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:78
+#, c-format
+msgid "currency and value separated with colon"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:84
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:78
+#, c-format
+msgid "Add"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:53
+#, c-format
+msgid "Instance"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:59
+#, c-format
+msgid "Settings"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:65
+#: src/paths/instance/orders/list/Table.tsx:60
+#, c-format
+msgid "Orders"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:71
+#: src/paths/instance/orders/create/CreatePage.tsx:258
+#: src/paths/instance/products/list/Table.tsx:48
+#, c-format
+msgid "Products"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:77
+#: src/paths/instance/transfers/list/Table.tsx:65
+#, c-format
+msgid "Transfers"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:87
+#, c-format
+msgid "Connection"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:112 src/paths/admin/list/Table.tsx:57
+#, c-format
+msgid "Instances"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:116
+#, c-format
+msgid "New"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:122
+#, c-format
+msgid "List"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:129
+#, c-format
+msgid "Log out"
+msgstr ""
+
+#: src/components/modal/index.tsx:74
+#, c-format
+msgid "Clear"
+msgstr ""
+
+#: src/components/modal/index.tsx:110 src/components/modal/index.tsx:111
+#, c-format
+msgid "should be the same"
+msgstr ""
+
+#: src/components/modal/index.tsx:111
+#, c-format
+msgid "cannot be the same as before"
+msgstr ""
+
+#: src/components/modal/index.tsx:114
+#, c-format
+msgid ""
+"You are updating the authorization token from instance %1$s with id %2$s"
+msgstr ""
+
+#: src/components/modal/index.tsx:124
+#, c-format
+msgid "Old token"
+msgstr ""
+
+#: src/components/modal/index.tsx:125
+#, c-format
+msgid "New token"
+msgstr ""
+
+#: src/components/modal/index.tsx:127
+#, c-format
+msgid "Clearing the auth token will mean public access to the instance"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:96
+#: src/paths/admin/create/CreatePage.tsx:85 src/paths/admin/list/Table.tsx:109
+#: src/paths/instance/transfers/list/Table.tsx:122
+#, c-format
+msgid "ID"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:98
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:121
+#: src/paths/instance/products/list/Table.tsx:85
+#, c-format
+msgid "Image"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:100
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:123
+#, c-format
+msgid "Unit"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:101
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:124
+#: src/paths/instance/products/list/Table.tsx:162
+#: src/paths/instance/products/list/Table.tsx:214
+#, c-format
+msgid "Price"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:103
+#: src/paths/instance/products/list/Table.tsx:90
+#, c-format
+msgid "Stock"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:105
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:128
+#: src/paths/instance/products/list/Table.tsx:88
+#, c-format
+msgid "Taxes"
+msgstr ""
+
+#: src/index.tsx:75
+#, c-format
+msgid "Server not found"
+msgstr ""
+
+#: src/index.tsx:85
+#, c-format
+msgid "Couldn't access the server"
+msgstr ""
+
+#: src/index.tsx:87 src/index.tsx:99
+#, c-format
+msgid "Got message %1$s from %2$s"
+msgstr ""
+
+#: src/index.tsx:97
+#, c-format
+msgid "Unexpected Error"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:89
+#: src/paths/instance/update/UpdatePage.tsx:108
+#, c-format
+msgid "Auth token"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:91
+#: src/paths/instance/details/DetailPage.tsx:77
+#: src/paths/instance/update/UpdatePage.tsx:110
+#, c-format
+msgid "Account address"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:93
+#: src/paths/instance/update/UpdatePage.tsx:112
+#, c-format
+msgid "Default max deposit fee"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:95
+#: src/paths/instance/update/UpdatePage.tsx:114
+#, c-format
+msgid "Default max wire fee"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:97
+#: src/paths/instance/update/UpdatePage.tsx:116
+#, c-format
+msgid "Default wire fee amortization"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:103
+#: src/paths/instance/update/UpdatePage.tsx:122
+#, c-format
+msgid "Jurisdiction"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:107
+#: src/paths/instance/update/UpdatePage.tsx:126
+#, c-format
+msgid "Default pay delay"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:109
+#: src/paths/instance/update/UpdatePage.tsx:128
+#, c-format
+msgid "Default wire transfer delay"
+msgstr ""
+
+#: src/paths/admin/create/index.tsx:58
+#, c-format
+msgid "could not create instance"
+msgstr ""
+
+#: src/paths/admin/list/Table.tsx:63 src/paths/admin/list/Table.tsx:131
+#: src/paths/instance/transfers/list/Table.tsx:71
+#, c-format
+msgid "Delete"
+msgstr ""
+
+#: src/paths/admin/list/Table.tsx:128
+#, c-format
+msgid "Edit"
+msgstr ""
+
+#: src/paths/admin/list/Table.tsx:149
+#: src/paths/instance/products/list/Table.tsx:245
+#, c-format
+msgid "There is no instances yet, add more pressing the + sign"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:237
+#, c-format
+msgid "Inventory products"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:286
+#, c-format
+msgid "Total price"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:287
+#, c-format
+msgid "Total tax"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:289
+#: src/paths/instance/orders/create/CreatePage.tsx:297
+#, c-format
+msgid "Order price"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:295
+#, c-format
+msgid "Net"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:300
+#: src/paths/instance/orders/details/DetailPage.tsx:144
+#: src/paths/instance/orders/details/DetailPage.tsx:295
+#: src/paths/instance/orders/list/Table.tsx:117
+#, c-format
+msgid "Summary"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:302
+#, c-format
+msgid "Payments options"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:303
+#, c-format
+msgid "Auto refund deadline"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:304
+#, c-format
+msgid "Refund deadline"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:305
+#, c-format
+msgid "Pay deadline"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:307
+#, c-format
+msgid "Delivery date"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:308
+#, c-format
+msgid "Location"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:312
+#, c-format
+msgid "Max fee"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:313
+#, c-format
+msgid "Max wire fee"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:314
+#, c-format
+msgid "Wire fee amortization"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:315
+#, c-format
+msgid "Fullfilment url"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:318
+#, c-format
+msgid "Extra information"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:44
+#, c-format
+msgid "select a product first"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:51
+#, c-format
+msgid "should be greater than 0"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:58
+#, c-format
+msgid ""
+"cannot be greater than current stock and quantity previously added. max: %1$s"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:64
+#, c-format
+msgid "cannot be greater than current stock %1$s"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:76
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:126
+#, c-format
+msgid "Quantity"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:92
+#: src/paths/instance/orders/details/DetailPage.tsx:235
+#: src/paths/instance/orders/details/DetailPage.tsx:333
+#, c-format
+msgid "Order"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:93
+#, c-format
+msgid "claimed"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:110
+#: src/paths/instance/orders/details/DetailPage.tsx:261
+#: src/paths/instance/orders/list/Table.tsx:136
+#, c-format
+msgid "copy url"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:126
+#: src/paths/instance/orders/details/DetailPage.tsx:349
+#, c-format
+msgid "pay at"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:127
+#: src/paths/instance/orders/details/DetailPage.tsx:350
+#, c-format
+msgid "created at"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:138
+#: src/paths/instance/orders/details/DetailPage.tsx:289
+#, c-format
+msgid "Timeline"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:142
+#: src/paths/instance/orders/details/DetailPage.tsx:293
+#, c-format
+msgid "Payment details"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:146
+#: src/paths/instance/orders/details/DetailPage.tsx:299
+#: src/paths/instance/orders/details/DetailPage.tsx:363
+#, c-format
+msgid "Order status"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:156
+#: src/paths/instance/orders/details/DetailPage.tsx:308
+#, c-format
+msgid "Product list"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:236
+#, c-format
+msgid "paid"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:238
+#, c-format
+msgid "wired"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:241
+#, c-format
+msgid "refunded"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:258
+#, c-format
+msgid "refund"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:297
+#, c-format
+msgid "Refunded amount"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:298
+#, c-format
+msgid "Deposit total"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:336
+#, c-format
+msgid "unpaid"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:364
+#, c-format
+msgid "Order status URL"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:365
+#, c-format
+msgid "Pay URI"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:383
+#, c-format
+msgid ""
+"Unknown order status. This is an error, please contact the administrator."
+msgstr ""
+
+#: src/paths/instance/orders/details/index.tsx:56
+#: src/paths/instance/orders/list/index.tsx:147
+#, c-format
+msgid "refund created successfully"
+msgstr ""
+
+#: src/paths/instance/orders/details/index.tsx:59
+#: src/paths/instance/orders/list/index.tsx:150
+#, c-format
+msgid "could not create the refund"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:111
+#, c-format
+msgid "load newer orders"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:115
+#, c-format
+msgid "Date"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:131
+#: src/paths/instance/orders/list/Table.tsx:223
+#, c-format
+msgid "Refund"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:145
+#, c-format
+msgid "load older orders"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:154
+#, c-format
+msgid "No orders has been found"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:202
+#, c-format
+msgid "date"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:203
+#, c-format
+msgid "amount"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:204
+#, c-format
+msgid "reason"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:224
+#, c-format
+msgid "Max refundable:"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "Reason"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "duplicated"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "requested by the customer"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "other"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:91
+#, c-format
+msgid "go to order id"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:107
+#, c-format
+msgid "Paid"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:108
+#, c-format
+msgid "Refunded"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:109
+#, c-format
+msgid "Not wired"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:110
+#, c-format
+msgid "All"
+msgstr ""
+
+#: src/paths/instance/products/create/index.tsx:48
+#: src/paths/instance/products/update/index.tsx:64
+#, c-format
+msgid "could not create product"
+msgstr ""
+
+#: src/paths/instance/products/list/Table.tsx:87
+#, c-format
+msgid "Sell"
+msgstr ""
+
+#: src/paths/instance/products/list/Table.tsx:89
+#, c-format
+msgid "Profit"
+msgstr ""
+
+#: src/paths/instance/products/list/Table.tsx:91
+#, c-format
+msgid "Sold"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:59
+#, c-format
+msgid "product updated successfully"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:62
+#, c-format
+msgid "could not update the product"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:70
+#, c-format
+msgid "product delete successfully"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:73
+#, c-format
+msgid "could not delete the product"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:59
+#, c-format
+msgid "Tips"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:111
+#, c-format
+msgid "Committed amount"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:112
+#, c-format
+msgid "Exchange initial amount"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:113
+#, c-format
+msgid "Merchant initial amount"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:148
+#, c-format
+msgid "There is no tips yet, add more pressing the + sign"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:50
+#: src/paths/instance/transfers/create/CreatePage.tsx:54
+#: src/paths/instance/transfers/create/CreatePage.tsx:55
+#: src/paths/instance/transfers/create/CreatePage.tsx:56
+#, c-format
+msgid "cannot be empty"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:51
+#, c-format
+msgid "check the id, doest look valid"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:52
+#, c-format
+msgid "should have 52 characters, current %1$s"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:57
+#, c-format
+msgid "URL doesn't have the right format"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:74
+#, c-format
+msgid "Transfer ID"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:76
+#, c-format
+msgid "Account Address"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:82
+#: src/paths/instance/transfers/list/Table.tsx:125
+#, c-format
+msgid "Exchange URL"
+msgstr ""
+
+#: src/paths/instance/transfers/create/index.tsx:49
+#, c-format
+msgid "could not inform transfer"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:118
+#, c-format
+msgid "load newer transfers"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:123
+#, c-format
+msgid "Credit"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:126
+#, c-format
+msgid "Confirmed"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:127
+#: src/paths/instance/transfers/list/index.tsx:60
+#, c-format
+msgid "Verified"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:128
+#, c-format
+msgid "Executed at"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:138
+#: src/paths/instance/transfers/list/Table.tsx:139
+#, c-format
+msgid "yes"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:138
+#: src/paths/instance/transfers/list/Table.tsx:139
+#, c-format
+msgid "no"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:140
+#, c-format
+msgid "unknown"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:145
+#, c-format
+msgid "load older transfers"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:154
+#, c-format
+msgid "There is no transfer yet, add more pressing the + sign"
+msgstr ""
diff --git a/packages/merchant-backend-ui/src/i18n/en.po b/packages/merchant-backend-ui/src/i18n/en.po
new file mode 100644
index 000000000..6b35bd0ce
--- /dev/null
+++ b/packages/merchant-backend-ui/src/i18n/en.po
@@ -0,0 +1,1057 @@
+# This file is part of TALER
+# (C) 2016 GNUnet e.V.
+#
+# TALER is free software; you can redistribute it and/or modify it under the
+# terms of the GNU General Public License as published by the Free Software
+# Foundation; either version 3, or (at your option) any later version.
+#
+# TALER is distributed in the hope that it will be useful, but WITHOUT ANY
+# WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+# A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License along with
+# TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+#
+#, fuzzy
+msgid ""
+msgstr ""
+"Project-Id-Version: Taler Wallet\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2016-11-23 00:00+0100\n"
+"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
+"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
+"Language-Team: LANGUAGE <LL@li.org>\n"
+"Language: \n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+#: src/ApplicationReadyRoutes.tsx:50 src/InstanceRoutes.tsx:118
+#: src/InstanceRoutes.tsx:299
+#, c-format
+msgid "Access denied"
+msgstr ""
+
+#: src/ApplicationReadyRoutes.tsx:51 src/InstanceRoutes.tsx:118
+#: src/InstanceRoutes.tsx:300
+#, c-format
+msgid "Check your token is valid"
+msgstr ""
+
+#: src/ApplicationReadyRoutes.tsx:72
+#, c-format
+msgid "Couldn't access the server."
+msgstr ""
+
+#: src/ApplicationReadyRoutes.tsx:73
+#, c-format
+msgid "Could not infer instance id from url %1$s"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:109
+#, c-format
+msgid "HTTP status #%1$s: Server reported a problem"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:110
+#, c-format
+msgid "Got message: \"%1$s\" from: %2$s"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:127
+#, c-format
+msgid "No default instance"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:128
+#, c-format
+msgid ""
+"in order to use merchant backoffice, you should create the default instance"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:288
+#, c-format
+msgid "Server reported a problem: HTTP status #%1$s"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:289
+#, c-format
+msgid "Got message: %1$s from: %2$s"
+msgstr ""
+
+#: src/components/exception/login.tsx:46
+#, c-format
+msgid "Login required"
+msgstr ""
+
+#: src/components/exception/login.tsx:49
+#, c-format
+msgid ""
+"Please enter your auth token. Token should have \"secret-token:\" and start "
+"with Bearer or ApiKey"
+msgstr ""
+
+#: src/components/exception/login.tsx:86 src/components/modal/index.tsx:53
+#: src/components/modal/index.tsx:75 src/paths/admin/create/CreatePage.tsx:115
+#: src/paths/instance/orders/create/CreatePage.tsx:325
+#: src/paths/instance/products/create/CreatePage.tsx:51
+#: src/paths/instance/products/list/Table.tsx:174
+#: src/paths/instance/products/list/Table.tsx:228
+#: src/paths/instance/products/update/UpdatePage.tsx:55
+#: src/paths/instance/transfers/create/CreatePage.tsx:89
+#: src/paths/instance/update/UpdatePage.tsx:134
+#, c-format
+msgid "Confirm"
+msgstr ""
+
+#: src/components/form/InputArray.tsx:72
+#, c-format
+msgid "The value %1$s is invalid for a payment url"
+msgstr ""
+
+#: src/components/form/InputDate.tsx:67
+#: src/paths/instance/orders/list/index.tsx:123
+#, c-format
+msgid "pick a date"
+msgstr ""
+
+#: src/components/form/InputDate.tsx:81
+#, c-format
+msgid "clear"
+msgstr ""
+
+#: src/components/form/InputDate.tsx:83
+#: src/paths/instance/transfers/list/Table.tsx:140
+#, c-format
+msgid "never"
+msgstr ""
+
+#: src/components/form/InputImage.tsx:80
+#, c-format
+msgid "Image should be smaller than 1 MB"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:28
+#, c-format
+msgid "Country"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:30
+#: src/paths/admin/create/CreatePage.tsx:99
+#: src/paths/instance/transfers/list/Table.tsx:124
+#: src/paths/instance/update/UpdatePage.tsx:118
+#, c-format
+msgid "Address"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:34
+#, c-format
+msgid "Building number"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:35
+#, c-format
+msgid "Building name"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:36
+#, c-format
+msgid "Street"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:37
+#, c-format
+msgid "Post code"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:38
+#, c-format
+msgid "Town location"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:39
+#, c-format
+msgid "Town"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:40
+#, c-format
+msgid "District"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:41
+#, c-format
+msgid "Country subdivision"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:59
+#, c-format
+msgid "Product id"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:60
+#: src/components/product/ProductForm.tsx:99
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:122
+#: src/paths/instance/orders/list/Table.tsx:227
+#: src/paths/instance/products/list/Table.tsx:86
+#, c-format
+msgid "Description"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:73
+#: src/components/form/InputTaxes.tsx:81
+#: src/paths/admin/create/CreatePage.tsx:87 src/paths/admin/list/Table.tsx:110
+#: src/paths/instance/details/DetailPage.tsx:76
+#: src/paths/instance/update/UpdatePage.tsx:106
+#, c-format
+msgid "Name"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:102
+#, c-format
+msgid "loading..."
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:108
+#, c-format
+msgid "no products found"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:116
+#, c-format
+msgid "no results"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:33
+#, c-format
+msgid "Deleting"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:34
+#, c-format
+msgid "Changing"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:60
+#, c-format
+msgid "Manage token"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:83
+#, c-format
+msgid "Update"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:100
+#: src/paths/instance/orders/create/CreatePage.tsx:252
+#: src/paths/instance/orders/create/CreatePage.tsx:273
+#, c-format
+msgid "Remove"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:106 src/components/modal/index.tsx:52
+#: src/components/modal/index.tsx:73 src/paths/admin/create/CreatePage.tsx:114
+#: src/paths/instance/orders/create/CreatePage.tsx:324
+#: src/paths/instance/products/create/CreatePage.tsx:50
+#: src/paths/instance/products/list/Table.tsx:166
+#: src/paths/instance/products/list/Table.tsx:218
+#: src/paths/instance/products/update/UpdatePage.tsx:54
+#: src/paths/instance/transfers/create/CreatePage.tsx:88
+#: src/paths/instance/update/UpdatePage.tsx:133
+#, c-format
+msgid "Cancel"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:91
+#, c-format
+msgid "Manage stock"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:93
+#, c-format
+msgid "Infinite"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:105
+#, c-format
+msgid "lost cannot be greater that current + incoming (max %1$s)"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:111
+#, c-format
+msgid "current stock will change from %1$s to %2$s"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:112
+#, c-format
+msgid "current stock will stay at %1$s"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:129
+#: src/paths/instance/products/list/Table.tsx:204
+#, c-format
+msgid "Incoming"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:130
+#: src/paths/instance/products/list/Table.tsx:205
+#, c-format
+msgid "Lost"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:142
+#, c-format
+msgid "Current"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:145
+#, c-format
+msgid "without stock"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:150
+#, c-format
+msgid "Next restock"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:152
+#, c-format
+msgid "Delivery address"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:73
+#, c-format
+msgid "this product has no taxes"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:77
+#: src/paths/instance/orders/details/DetailPage.tsx:145
+#: src/paths/instance/orders/details/DetailPage.tsx:296
+#: src/paths/instance/orders/list/Table.tsx:116
+#: src/paths/instance/transfers/create/CreatePage.tsx:84
+#, c-format
+msgid "Amount"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:78
+#, c-format
+msgid "currency and value separated with colon"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:84
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:78
+#, c-format
+msgid "Add"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:53
+#, c-format
+msgid "Instance"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:59
+#, c-format
+msgid "Settings"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:65
+#: src/paths/instance/orders/list/Table.tsx:60
+#, c-format
+msgid "Orders"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:71
+#: src/paths/instance/orders/create/CreatePage.tsx:258
+#: src/paths/instance/products/list/Table.tsx:48
+#, c-format
+msgid "Products"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:77
+#: src/paths/instance/transfers/list/Table.tsx:65
+#, c-format
+msgid "Transfers"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:87
+#, c-format
+msgid "Connection"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:112 src/paths/admin/list/Table.tsx:57
+#, c-format
+msgid "Instances"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:116
+#, c-format
+msgid "New"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:122
+#, c-format
+msgid "List"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:129
+#, c-format
+msgid "Log out"
+msgstr ""
+
+#: src/components/modal/index.tsx:74
+#, c-format
+msgid "Clear"
+msgstr ""
+
+#: src/components/modal/index.tsx:110 src/components/modal/index.tsx:111
+#, c-format
+msgid "should be the same"
+msgstr ""
+
+#: src/components/modal/index.tsx:111
+#, c-format
+msgid "cannot be the same as before"
+msgstr ""
+
+#: src/components/modal/index.tsx:114
+#, c-format
+msgid ""
+"You are updating the authorization token from instance %1$s with id %2$s"
+msgstr ""
+
+#: src/components/modal/index.tsx:124
+#, c-format
+msgid "Old token"
+msgstr ""
+
+#: src/components/modal/index.tsx:125
+#, c-format
+msgid "New token"
+msgstr ""
+
+#: src/components/modal/index.tsx:127
+#, c-format
+msgid "Clearing the auth token will mean public access to the instance"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:96
+#: src/paths/admin/create/CreatePage.tsx:85 src/paths/admin/list/Table.tsx:109
+#: src/paths/instance/transfers/list/Table.tsx:122
+#, c-format
+msgid "ID"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:98
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:121
+#: src/paths/instance/products/list/Table.tsx:85
+#, c-format
+msgid "Image"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:100
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:123
+#, c-format
+msgid "Unit"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:101
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:124
+#: src/paths/instance/products/list/Table.tsx:162
+#: src/paths/instance/products/list/Table.tsx:214
+#, c-format
+msgid "Price"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:103
+#: src/paths/instance/products/list/Table.tsx:90
+#, c-format
+msgid "Stock"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:105
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:128
+#: src/paths/instance/products/list/Table.tsx:88
+#, c-format
+msgid "Taxes"
+msgstr ""
+
+#: src/index.tsx:75
+#, c-format
+msgid "Server not found"
+msgstr ""
+
+#: src/index.tsx:85
+#, c-format
+msgid "Couldn't access the server"
+msgstr ""
+
+#: src/index.tsx:87 src/index.tsx:99
+#, c-format
+msgid "Got message %1$s from %2$s"
+msgstr ""
+
+#: src/index.tsx:97
+#, c-format
+msgid "Unexpected Error"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:89
+#: src/paths/instance/update/UpdatePage.tsx:108
+#, c-format
+msgid "Auth token"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:91
+#: src/paths/instance/details/DetailPage.tsx:77
+#: src/paths/instance/update/UpdatePage.tsx:110
+#, c-format
+msgid "Account address"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:93
+#: src/paths/instance/update/UpdatePage.tsx:112
+#, c-format
+msgid "Default max deposit fee"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:95
+#: src/paths/instance/update/UpdatePage.tsx:114
+#, c-format
+msgid "Default max wire fee"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:97
+#: src/paths/instance/update/UpdatePage.tsx:116
+#, c-format
+msgid "Default wire fee amortization"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:103
+#: src/paths/instance/update/UpdatePage.tsx:122
+#, c-format
+msgid "Jurisdiction"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:107
+#: src/paths/instance/update/UpdatePage.tsx:126
+#, c-format
+msgid "Default pay delay"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:109
+#: src/paths/instance/update/UpdatePage.tsx:128
+#, c-format
+msgid "Default wire transfer delay"
+msgstr ""
+
+#: src/paths/admin/create/index.tsx:58
+#, c-format
+msgid "could not create instance"
+msgstr ""
+
+#: src/paths/admin/list/Table.tsx:63 src/paths/admin/list/Table.tsx:131
+#: src/paths/instance/transfers/list/Table.tsx:71
+#, c-format
+msgid "Delete"
+msgstr ""
+
+#: src/paths/admin/list/Table.tsx:128
+#, c-format
+msgid "Edit"
+msgstr ""
+
+#: src/paths/admin/list/Table.tsx:149
+#: src/paths/instance/products/list/Table.tsx:245
+#, c-format
+msgid "There is no instances yet, add more pressing the + sign"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:237
+#, c-format
+msgid "Inventory products"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:286
+#, c-format
+msgid "Total price"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:287
+#, c-format
+msgid "Total tax"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:289
+#: src/paths/instance/orders/create/CreatePage.tsx:297
+#, c-format
+msgid "Order price"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:295
+#, c-format
+msgid "Net"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:300
+#: src/paths/instance/orders/details/DetailPage.tsx:144
+#: src/paths/instance/orders/details/DetailPage.tsx:295
+#: src/paths/instance/orders/list/Table.tsx:117
+#, c-format
+msgid "Summary"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:302
+#, c-format
+msgid "Payments options"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:303
+#, c-format
+msgid "Auto refund deadline"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:304
+#, c-format
+msgid "Refund deadline"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:305
+#, c-format
+msgid "Pay deadline"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:307
+#, c-format
+msgid "Delivery date"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:308
+#, c-format
+msgid "Location"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:312
+#, c-format
+msgid "Max fee"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:313
+#, c-format
+msgid "Max wire fee"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:314
+#, c-format
+msgid "Wire fee amortization"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:315
+#, c-format
+msgid "Fullfilment url"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:318
+#, c-format
+msgid "Extra information"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:44
+#, c-format
+msgid "select a product first"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:51
+#, c-format
+msgid "should be greater than 0"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:58
+#, c-format
+msgid ""
+"cannot be greater than current stock and quantity previously added. max: %1$s"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:64
+#, c-format
+msgid "cannot be greater than current stock %1$s"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:76
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:126
+#, c-format
+msgid "Quantity"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:92
+#: src/paths/instance/orders/details/DetailPage.tsx:235
+#: src/paths/instance/orders/details/DetailPage.tsx:333
+#, c-format
+msgid "Order"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:93
+#, c-format
+msgid "claimed"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:110
+#: src/paths/instance/orders/details/DetailPage.tsx:261
+#: src/paths/instance/orders/list/Table.tsx:136
+#, c-format
+msgid "copy url"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:126
+#: src/paths/instance/orders/details/DetailPage.tsx:349
+#, c-format
+msgid "pay at"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:127
+#: src/paths/instance/orders/details/DetailPage.tsx:350
+#, c-format
+msgid "created at"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:138
+#: src/paths/instance/orders/details/DetailPage.tsx:289
+#, c-format
+msgid "Timeline"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:142
+#: src/paths/instance/orders/details/DetailPage.tsx:293
+#, c-format
+msgid "Payment details"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:146
+#: src/paths/instance/orders/details/DetailPage.tsx:299
+#: src/paths/instance/orders/details/DetailPage.tsx:363
+#, c-format
+msgid "Order status"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:156
+#: src/paths/instance/orders/details/DetailPage.tsx:308
+#, c-format
+msgid "Product list"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:236
+#, c-format
+msgid "paid"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:238
+#, c-format
+msgid "wired"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:241
+#, c-format
+msgid "refunded"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:258
+#, c-format
+msgid "refund"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:297
+#, c-format
+msgid "Refunded amount"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:298
+#, c-format
+msgid "Deposit total"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:336
+#, c-format
+msgid "unpaid"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:364
+#, c-format
+msgid "Order status URL"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:365
+#, c-format
+msgid "Pay URI"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:383
+#, c-format
+msgid ""
+"Unknown order status. This is an error, please contact the administrator."
+msgstr ""
+
+#: src/paths/instance/orders/details/index.tsx:56
+#: src/paths/instance/orders/list/index.tsx:147
+#, c-format
+msgid "refund created successfully"
+msgstr ""
+
+#: src/paths/instance/orders/details/index.tsx:59
+#: src/paths/instance/orders/list/index.tsx:150
+#, c-format
+msgid "could not create the refund"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:111
+#, c-format
+msgid "load newer orders"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:115
+#, c-format
+msgid "Date"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:131
+#: src/paths/instance/orders/list/Table.tsx:223
+#, c-format
+msgid "Refund"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:145
+#, c-format
+msgid "load older orders"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:154
+#, c-format
+msgid "No orders has been found"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:202
+#, c-format
+msgid "date"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:203
+#, c-format
+msgid "amount"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:204
+#, c-format
+msgid "reason"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:224
+#, c-format
+msgid "Max refundable:"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "Reason"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "duplicated"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "requested by the customer"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "other"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:91
+#, c-format
+msgid "go to order id"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:107
+#, c-format
+msgid "Paid"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:108
+#, c-format
+msgid "Refunded"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:109
+#, c-format
+msgid "Not wired"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:110
+#, c-format
+msgid "All"
+msgstr ""
+
+#: src/paths/instance/products/create/index.tsx:48
+#: src/paths/instance/products/update/index.tsx:64
+#, c-format
+msgid "could not create product"
+msgstr ""
+
+#: src/paths/instance/products/list/Table.tsx:87
+#, c-format
+msgid "Sell"
+msgstr ""
+
+#: src/paths/instance/products/list/Table.tsx:89
+#, c-format
+msgid "Profit"
+msgstr ""
+
+#: src/paths/instance/products/list/Table.tsx:91
+#, c-format
+msgid "Sold"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:59
+#, c-format
+msgid "product updated successfully"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:62
+#, c-format
+msgid "could not update the product"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:70
+#, c-format
+msgid "product delete successfully"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:73
+#, c-format
+msgid "could not delete the product"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:59
+#, c-format
+msgid "Tips"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:111
+#, c-format
+msgid "Committed amount"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:112
+#, c-format
+msgid "Exchange initial amount"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:113
+#, c-format
+msgid "Merchant initial amount"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:148
+#, c-format
+msgid "There is no tips yet, add more pressing the + sign"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:50
+#: src/paths/instance/transfers/create/CreatePage.tsx:54
+#: src/paths/instance/transfers/create/CreatePage.tsx:55
+#: src/paths/instance/transfers/create/CreatePage.tsx:56
+#, c-format
+msgid "cannot be empty"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:51
+#, c-format
+msgid "check the id, doest look valid"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:52
+#, c-format
+msgid "should have 52 characters, current %1$s"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:57
+#, c-format
+msgid "URL doesn't have the right format"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:74
+#, c-format
+msgid "Transfer ID"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:76
+#, c-format
+msgid "Account Address"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:82
+#: src/paths/instance/transfers/list/Table.tsx:125
+#, c-format
+msgid "Exchange URL"
+msgstr ""
+
+#: src/paths/instance/transfers/create/index.tsx:49
+#, c-format
+msgid "could not inform transfer"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:118
+#, c-format
+msgid "load newer transfers"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:123
+#, c-format
+msgid "Credit"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:126
+#, c-format
+msgid "Confirmed"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:127
+#: src/paths/instance/transfers/list/index.tsx:60
+#, c-format
+msgid "Verified"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:128
+#, c-format
+msgid "Executed at"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:138
+#: src/paths/instance/transfers/list/Table.tsx:139
+#, c-format
+msgid "yes"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:138
+#: src/paths/instance/transfers/list/Table.tsx:139
+#, c-format
+msgid "no"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:140
+#, c-format
+msgid "unknown"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:145
+#, c-format
+msgid "load older transfers"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:154
+#, c-format
+msgid "There is no transfer yet, add more pressing the + sign"
+msgstr ""
diff --git a/packages/merchant-backend-ui/src/i18n/es.po b/packages/merchant-backend-ui/src/i18n/es.po
new file mode 100644
index 000000000..9075d4656
--- /dev/null
+++ b/packages/merchant-backend-ui/src/i18n/es.po
@@ -0,0 +1,1065 @@
+# This file is part of TALER
+# (C) 2016 GNUnet e.V.
+#
+# TALER is free software; you can redistribute it and/or modify it under the
+# terms of the GNU General Public License as published by the Free Software
+# Foundation; either version 3, or (at your option) any later version.
+#
+# TALER is distributed in the hope that it will be useful, but WITHOUT ANY
+# WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+# A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License along with
+# TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+#
+#, fuzzy
+msgid ""
+msgstr ""
+"Project-Id-Version: Taler Wallet\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2016-11-23 00:00+0100\n"
+"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
+"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
+"Language-Team: LANGUAGE <LL@li.org>\n"
+"Language: \n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+#: src/ApplicationReadyRoutes.tsx:50 src/InstanceRoutes.tsx:118
+#: src/InstanceRoutes.tsx:299
+#, c-format
+msgid "Access denied"
+msgstr "Acceso denegado"
+
+#: src/ApplicationReadyRoutes.tsx:51 src/InstanceRoutes.tsx:118
+#: src/InstanceRoutes.tsx:300
+#, c-format
+msgid "Check your token is valid"
+msgstr "Verifica que el token sea valido"
+
+#: src/ApplicationReadyRoutes.tsx:72
+#, c-format
+msgid "Couldn't access the server."
+msgstr "No se pudo acceder al servidor"
+
+#: src/ApplicationReadyRoutes.tsx:73
+#, c-format
+msgid "Could not infer instance id from url %1$s"
+msgstr "No se pudo inferir el id de la instancia con la url %1$s"
+
+#: src/InstanceRoutes.tsx:109
+#, c-format
+msgid "HTTP status #%1$s: Server reported a problem"
+msgstr "HTTP status #%1$s: Servidor reporto un problema"
+
+#: src/InstanceRoutes.tsx:110
+#, fuzzy, c-format
+msgid "Got message: \"%1$s\" from: %2$s"
+msgstr "Recivimos el mensaje %1$s desde %2$s"
+
+#: src/InstanceRoutes.tsx:127
+#, c-format
+msgid "No default instance"
+msgstr "Sin instancia default"
+
+#: src/InstanceRoutes.tsx:128
+#, c-format
+msgid ""
+"in order to use merchant backoffice, you should create the default instance"
+msgstr "para usar el merchant backoffice, debería crear la instancia default"
+
+#: src/InstanceRoutes.tsx:288
+#, c-format
+msgid "Server reported a problem: HTTP status #%1$s"
+msgstr "Servidir reporto un problema: HTTP status #%1$s"
+
+#: src/InstanceRoutes.tsx:289
+#, fuzzy, c-format
+msgid "Got message: %1$s from: %2$s"
+msgstr "Recivimos el mensaje %1$s desde %2$s"
+
+#: src/components/exception/login.tsx:46
+#, c-format
+msgid "Login required"
+msgstr "Login necesario"
+
+#: src/components/exception/login.tsx:49
+#, c-format
+msgid ""
+"Please enter your auth token. Token should have \"secret-token:\" and start "
+"with Bearer or ApiKey"
+msgstr ""
+"Por favor ingrese su token de autorización. El token debe tener \"secret-"
+"token\" y comenzar con Bearer o ApiKey"
+
+#: src/components/exception/login.tsx:86 src/components/modal/index.tsx:53
+#: src/components/modal/index.tsx:75 src/paths/admin/create/CreatePage.tsx:115
+#: src/paths/instance/orders/create/CreatePage.tsx:325
+#: src/paths/instance/products/create/CreatePage.tsx:51
+#: src/paths/instance/products/list/Table.tsx:174
+#: src/paths/instance/products/list/Table.tsx:228
+#: src/paths/instance/products/update/UpdatePage.tsx:55
+#: src/paths/instance/transfers/create/CreatePage.tsx:89
+#: src/paths/instance/update/UpdatePage.tsx:134
+#, c-format
+msgid "Confirm"
+msgstr "Confirmar"
+
+#: src/components/form/InputArray.tsx:72
+#, c-format
+msgid "The value %1$s is invalid for a payment url"
+msgstr "El valor %1$s es invalido para una URL de pago"
+
+#: src/components/form/InputDate.tsx:67
+#: src/paths/instance/orders/list/index.tsx:123
+#, c-format
+msgid "pick a date"
+msgstr "elegir una fecha"
+
+#: src/components/form/InputDate.tsx:81
+#, fuzzy, c-format
+msgid "clear"
+msgstr "Limpiar"
+
+#: src/components/form/InputDate.tsx:83
+#: src/paths/instance/transfers/list/Table.tsx:140
+#, c-format
+msgid "never"
+msgstr "nunca"
+
+#: src/components/form/InputImage.tsx:80
+#, c-format
+msgid "Image should be smaller than 1 MB"
+msgstr "La imagen debe ser mas chica que 1 MB"
+
+#: src/components/form/InputLocation.tsx:28
+#, c-format
+msgid "Country"
+msgstr "País"
+
+#: src/components/form/InputLocation.tsx:30
+#: src/paths/admin/create/CreatePage.tsx:99
+#: src/paths/instance/transfers/list/Table.tsx:124
+#: src/paths/instance/update/UpdatePage.tsx:118
+#, c-format
+msgid "Address"
+msgstr "Dirección"
+
+#: src/components/form/InputLocation.tsx:34
+#, c-format
+msgid "Building number"
+msgstr "Número de edificio"
+
+#: src/components/form/InputLocation.tsx:35
+#, c-format
+msgid "Building name"
+msgstr "Nombre de edificio"
+
+#: src/components/form/InputLocation.tsx:36
+#, c-format
+msgid "Street"
+msgstr "Calle"
+
+#: src/components/form/InputLocation.tsx:37
+#, c-format
+msgid "Post code"
+msgstr "Código postal"
+
+#: src/components/form/InputLocation.tsx:38
+#, fuzzy, c-format
+msgid "Town location"
+msgstr "Ubicación de ciudad"
+
+#: src/components/form/InputLocation.tsx:39
+#, c-format
+msgid "Town"
+msgstr "Ciudad"
+
+#: src/components/form/InputLocation.tsx:40
+#, c-format
+msgid "District"
+msgstr "Distrito"
+
+#: src/components/form/InputLocation.tsx:41
+#, c-format
+msgid "Country subdivision"
+msgstr "Provincia"
+
+#: src/components/form/InputSearchProduct.tsx:59
+#, fuzzy, c-format
+msgid "Product id"
+msgstr "Id de producto"
+
+#: src/components/form/InputSearchProduct.tsx:60
+#: src/components/product/ProductForm.tsx:99
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:122
+#: src/paths/instance/orders/list/Table.tsx:227
+#: src/paths/instance/products/list/Table.tsx:86
+#, c-format
+msgid "Description"
+msgstr "Descripcion"
+
+#: src/components/form/InputSearchProduct.tsx:73
+#: src/components/form/InputTaxes.tsx:81
+#: src/paths/admin/create/CreatePage.tsx:87 src/paths/admin/list/Table.tsx:110
+#: src/paths/instance/details/DetailPage.tsx:76
+#: src/paths/instance/update/UpdatePage.tsx:106
+#, c-format
+msgid "Name"
+msgstr "Nombre"
+
+#: src/components/form/InputSearchProduct.tsx:102
+#, c-format
+msgid "loading..."
+msgstr "Cargando..."
+
+#: src/components/form/InputSearchProduct.tsx:108
+#, c-format
+msgid "no products found"
+msgstr "No se encontraron productos"
+
+#: src/components/form/InputSearchProduct.tsx:116
+#, c-format
+msgid "no results"
+msgstr "Sin resultados"
+
+#: src/components/form/InputSecured.tsx:33
+#, c-format
+msgid "Deleting"
+msgstr "Borrando"
+
+#: src/components/form/InputSecured.tsx:34
+#, c-format
+msgid "Changing"
+msgstr "Cambiando"
+
+#: src/components/form/InputSecured.tsx:60
+#, c-format
+msgid "Manage token"
+msgstr "Administrar token"
+
+#: src/components/form/InputSecured.tsx:83
+#, c-format
+msgid "Update"
+msgstr "Actualizar"
+
+#: src/components/form/InputSecured.tsx:100
+#: src/paths/instance/orders/create/CreatePage.tsx:252
+#: src/paths/instance/orders/create/CreatePage.tsx:273
+#, c-format
+msgid "Remove"
+msgstr "Eliminar"
+
+#: src/components/form/InputSecured.tsx:106 src/components/modal/index.tsx:52
+#: src/components/modal/index.tsx:73 src/paths/admin/create/CreatePage.tsx:114
+#: src/paths/instance/orders/create/CreatePage.tsx:324
+#: src/paths/instance/products/create/CreatePage.tsx:50
+#: src/paths/instance/products/list/Table.tsx:166
+#: src/paths/instance/products/list/Table.tsx:218
+#: src/paths/instance/products/update/UpdatePage.tsx:54
+#: src/paths/instance/transfers/create/CreatePage.tsx:88
+#: src/paths/instance/update/UpdatePage.tsx:133
+#, c-format
+msgid "Cancel"
+msgstr "Cancelar"
+
+#: src/components/form/InputStock.tsx:91
+#, c-format
+msgid "Manage stock"
+msgstr "Administrar stock"
+
+#: src/components/form/InputStock.tsx:93
+#, c-format
+msgid "Infinite"
+msgstr "Inifinito"
+
+#: src/components/form/InputStock.tsx:105
+#, fuzzy, c-format
+msgid "lost cannot be greater that current + incoming (max %1$s)"
+msgstr "no puede ser mayor al stock actual %1$s"
+
+#: src/components/form/InputStock.tsx:111
+#, c-format
+msgid "current stock will change from %1$s to %2$s"
+msgstr "stock actual cambiará desde %1$s a %2$s"
+
+#: src/components/form/InputStock.tsx:112
+#, c-format
+msgid "current stock will stay at %1$s"
+msgstr "stock actual seguirá en %1$s"
+
+#: src/components/form/InputStock.tsx:129
+#: src/paths/instance/products/list/Table.tsx:204
+#, c-format
+msgid "Incoming"
+msgstr "Ingresando"
+
+#: src/components/form/InputStock.tsx:130
+#: src/paths/instance/products/list/Table.tsx:205
+#, c-format
+msgid "Lost"
+msgstr "Perdido"
+
+#: src/components/form/InputStock.tsx:142
+#, c-format
+msgid "Current"
+msgstr "Actual"
+
+#: src/components/form/InputStock.tsx:145
+#, c-format
+msgid "without stock"
+msgstr "sin stock"
+
+#: src/components/form/InputStock.tsx:150
+#, c-format
+msgid "Next restock"
+msgstr "Próximo reabastecimiento"
+
+#: src/components/form/InputStock.tsx:152
+#, c-format
+msgid "Delivery address"
+msgstr "Dirección de entrega"
+
+#: src/components/form/InputTaxes.tsx:73
+#, c-format
+msgid "this product has no taxes"
+msgstr "este producto no tiene impuestos"
+
+#: src/components/form/InputTaxes.tsx:77
+#: src/paths/instance/orders/details/DetailPage.tsx:145
+#: src/paths/instance/orders/details/DetailPage.tsx:296
+#: src/paths/instance/orders/list/Table.tsx:116
+#: src/paths/instance/transfers/create/CreatePage.tsx:84
+#, c-format
+msgid "Amount"
+msgstr "Monto"
+
+#: src/components/form/InputTaxes.tsx:78
+#, c-format
+msgid "currency and value separated with colon"
+msgstr "Moneda y valor separado por dos puntos"
+
+#: src/components/form/InputTaxes.tsx:84
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:78
+#, c-format
+msgid "Add"
+msgstr "Agregar"
+
+#: src/components/menu/SideBar.tsx:53
+#, c-format
+msgid "Instance"
+msgstr "Instancia"
+
+#: src/components/menu/SideBar.tsx:59
+#, c-format
+msgid "Settings"
+msgstr "Configuración"
+
+#: src/components/menu/SideBar.tsx:65
+#: src/paths/instance/orders/list/Table.tsx:60
+#, fuzzy, c-format
+msgid "Orders"
+msgstr "Ordenes"
+
+#: src/components/menu/SideBar.tsx:71
+#: src/paths/instance/orders/create/CreatePage.tsx:258
+#: src/paths/instance/products/list/Table.tsx:48
+#, c-format
+msgid "Products"
+msgstr "Productos"
+
+#: src/components/menu/SideBar.tsx:77
+#: src/paths/instance/transfers/list/Table.tsx:65
+#, c-format
+msgid "Transfers"
+msgstr "Transferencias"
+
+#: src/components/menu/SideBar.tsx:87
+#, fuzzy, c-format
+msgid "Connection"
+msgstr "Conexión"
+
+#: src/components/menu/SideBar.tsx:112 src/paths/admin/list/Table.tsx:57
+#, c-format
+msgid "Instances"
+msgstr "Instancias"
+
+#: src/components/menu/SideBar.tsx:116
+#, fuzzy, c-format
+msgid "New"
+msgstr "Nuevo"
+
+#: src/components/menu/SideBar.tsx:122
+#, c-format
+msgid "List"
+msgstr "Lista"
+
+#: src/components/menu/SideBar.tsx:129
+#, c-format
+msgid "Log out"
+msgstr "Salir"
+
+#: src/components/modal/index.tsx:74
+#, c-format
+msgid "Clear"
+msgstr "Limpiar"
+
+#: src/components/modal/index.tsx:110 src/components/modal/index.tsx:111
+#, c-format
+msgid "should be the same"
+msgstr "deberían ser iguales"
+
+#: src/components/modal/index.tsx:111
+#, c-format
+msgid "cannot be the same as before"
+msgstr "no puede ser igual al anterior"
+
+#: src/components/modal/index.tsx:114
+#, c-format
+msgid ""
+"You are updating the authorization token from instance %1$s with id %2$s"
+msgstr ""
+"Está actualizando el token de autorización para la instancia %1$s con id %2$s"
+
+#: src/components/modal/index.tsx:124
+#, c-format
+msgid "Old token"
+msgstr "Viejo token"
+
+#: src/components/modal/index.tsx:125
+#, c-format
+msgid "New token"
+msgstr "Nuevo token"
+
+#: src/components/modal/index.tsx:127
+#, c-format
+msgid "Clearing the auth token will mean public access to the instance"
+msgstr ""
+"Limpiar el token de autorización significa acceso publico a la instancia"
+
+#: src/components/product/ProductForm.tsx:96
+#: src/paths/admin/create/CreatePage.tsx:85 src/paths/admin/list/Table.tsx:109
+#: src/paths/instance/transfers/list/Table.tsx:122
+#, c-format
+msgid "ID"
+msgstr "ID"
+
+#: src/components/product/ProductForm.tsx:98
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:121
+#: src/paths/instance/products/list/Table.tsx:85
+#, c-format
+msgid "Image"
+msgstr "Imagen"
+
+#: src/components/product/ProductForm.tsx:100
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:123
+#, c-format
+msgid "Unit"
+msgstr "Unidad"
+
+#: src/components/product/ProductForm.tsx:101
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:124
+#: src/paths/instance/products/list/Table.tsx:162
+#: src/paths/instance/products/list/Table.tsx:214
+#, c-format
+msgid "Price"
+msgstr "Precio"
+
+#: src/components/product/ProductForm.tsx:103
+#: src/paths/instance/products/list/Table.tsx:90
+#, c-format
+msgid "Stock"
+msgstr "Stock"
+
+#: src/components/product/ProductForm.tsx:105
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:128
+#: src/paths/instance/products/list/Table.tsx:88
+#, c-format
+msgid "Taxes"
+msgstr "Impuesto"
+
+#: src/index.tsx:75
+#, c-format
+msgid "Server not found"
+msgstr "Servidor no encontrado"
+
+#: src/index.tsx:85
+#, c-format
+msgid "Couldn't access the server"
+msgstr "No se pudo aceder al servidor"
+
+#: src/index.tsx:87 src/index.tsx:99
+#, c-format
+msgid "Got message %1$s from %2$s"
+msgstr "Recivimos el mensaje %1$s desde %2$s"
+
+#: src/index.tsx:97
+#, c-format
+msgid "Unexpected Error"
+msgstr "Error inesperado"
+
+#: src/paths/admin/create/CreatePage.tsx:89
+#: src/paths/instance/update/UpdatePage.tsx:108
+#, c-format
+msgid "Auth token"
+msgstr "Token de autorización"
+
+#: src/paths/admin/create/CreatePage.tsx:91
+#: src/paths/instance/details/DetailPage.tsx:77
+#: src/paths/instance/update/UpdatePage.tsx:110
+#, c-format
+msgid "Account address"
+msgstr "Dirección de cuenta"
+
+#: src/paths/admin/create/CreatePage.tsx:93
+#: src/paths/instance/update/UpdatePage.tsx:112
+#, c-format
+msgid "Default max deposit fee"
+msgstr "Impuesto máximo de deposito por omisión"
+
+#: src/paths/admin/create/CreatePage.tsx:95
+#: src/paths/instance/update/UpdatePage.tsx:114
+#, c-format
+msgid "Default max wire fee"
+msgstr "Impuesto máximo de transferencia por omisión"
+
+#: src/paths/admin/create/CreatePage.tsx:97
+#: src/paths/instance/update/UpdatePage.tsx:116
+#, c-format
+msgid "Default wire fee amortization"
+msgstr "Amortización de impuesto de transferencia por omisión"
+
+#: src/paths/admin/create/CreatePage.tsx:103
+#: src/paths/instance/update/UpdatePage.tsx:122
+#, c-format
+msgid "Jurisdiction"
+msgstr "Jurisdicción"
+
+#: src/paths/admin/create/CreatePage.tsx:107
+#: src/paths/instance/update/UpdatePage.tsx:126
+#, c-format
+msgid "Default pay delay"
+msgstr "Retrazo de pago por omisión"
+
+#: src/paths/admin/create/CreatePage.tsx:109
+#: src/paths/instance/update/UpdatePage.tsx:128
+#, c-format
+msgid "Default wire transfer delay"
+msgstr "Retrazo de transferencia por omisión"
+
+#: src/paths/admin/create/index.tsx:58
+#, c-format
+msgid "could not create instance"
+msgstr "no se pudo crear la instancia"
+
+#: src/paths/admin/list/Table.tsx:63 src/paths/admin/list/Table.tsx:131
+#: src/paths/instance/transfers/list/Table.tsx:71
+#, fuzzy, c-format
+msgid "Delete"
+msgstr "Borrando"
+
+#: src/paths/admin/list/Table.tsx:128
+#, c-format
+msgid "Edit"
+msgstr ""
+
+#: src/paths/admin/list/Table.tsx:149
+#: src/paths/instance/products/list/Table.tsx:245
+#, c-format
+msgid "There is no instances yet, add more pressing the + sign"
+msgstr "No hay instancias todavían, agregue mas presionando el signo +"
+
+#: src/paths/instance/orders/create/CreatePage.tsx:237
+#, c-format
+msgid "Inventory products"
+msgstr "Productos de inventario"
+
+#: src/paths/instance/orders/create/CreatePage.tsx:286
+#, c-format
+msgid "Total price"
+msgstr "Precio total"
+
+#: src/paths/instance/orders/create/CreatePage.tsx:287
+#, c-format
+msgid "Total tax"
+msgstr "Impuesto total"
+
+#: src/paths/instance/orders/create/CreatePage.tsx:289
+#: src/paths/instance/orders/create/CreatePage.tsx:297
+#, c-format
+msgid "Order price"
+msgstr "Precio de la orden"
+
+#: src/paths/instance/orders/create/CreatePage.tsx:295
+#, fuzzy, c-format
+msgid "Net"
+msgstr "Neto"
+
+#: src/paths/instance/orders/create/CreatePage.tsx:300
+#: src/paths/instance/orders/details/DetailPage.tsx:144
+#: src/paths/instance/orders/details/DetailPage.tsx:295
+#: src/paths/instance/orders/list/Table.tsx:117
+#, c-format
+msgid "Summary"
+msgstr "Resumen"
+
+#: src/paths/instance/orders/create/CreatePage.tsx:302
+#, c-format
+msgid "Payments options"
+msgstr "Opciones de pago"
+
+#: src/paths/instance/orders/create/CreatePage.tsx:303
+#, c-format
+msgid "Auto refund deadline"
+msgstr "Plazo de reembolso automático"
+
+#: src/paths/instance/orders/create/CreatePage.tsx:304
+#, c-format
+msgid "Refund deadline"
+msgstr "Plazo de reembolso"
+
+#: src/paths/instance/orders/create/CreatePage.tsx:305
+#, c-format
+msgid "Pay deadline"
+msgstr "Plazo de pago"
+
+#: src/paths/instance/orders/create/CreatePage.tsx:307
+#, c-format
+msgid "Delivery date"
+msgstr "Fecha de entrega"
+
+#: src/paths/instance/orders/create/CreatePage.tsx:308
+#, fuzzy, c-format
+msgid "Location"
+msgstr "Ubicación"
+
+#: src/paths/instance/orders/create/CreatePage.tsx:312
+#, c-format
+msgid "Max fee"
+msgstr "Impuesto máximo"
+
+#: src/paths/instance/orders/create/CreatePage.tsx:313
+#, c-format
+msgid "Max wire fee"
+msgstr "Impuesto de transferencia máximo"
+
+#: src/paths/instance/orders/create/CreatePage.tsx:314
+#, c-format
+msgid "Wire fee amortization"
+msgstr "Amortización de impuesto de transferencia"
+
+#: src/paths/instance/orders/create/CreatePage.tsx:315
+#, c-format
+msgid "Fullfilment url"
+msgstr "URL de completitud"
+
+#: src/paths/instance/orders/create/CreatePage.tsx:318
+#, c-format
+msgid "Extra information"
+msgstr "Información extra"
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:44
+#, c-format
+msgid "select a product first"
+msgstr "seleccione un producto primero"
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:51
+#, fuzzy, c-format
+msgid "should be greater than 0"
+msgstr "La imagen debe ser mas chica que 1 MB"
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:58
+#, c-format
+msgid ""
+"cannot be greater than current stock and quantity previously added. max: %1$s"
+msgstr ""
+"no puede ser mayor al stock actual y la cantidad previamente agregada. "
+"máximo: %1$s"
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:64
+#, c-format
+msgid "cannot be greater than current stock %1$s"
+msgstr "no puede ser mayor al stock actual %1$s"
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:76
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:126
+#, c-format
+msgid "Quantity"
+msgstr "Cantidad"
+
+#: src/paths/instance/orders/details/DetailPage.tsx:92
+#: src/paths/instance/orders/details/DetailPage.tsx:235
+#: src/paths/instance/orders/details/DetailPage.tsx:333
+#, c-format
+msgid "Order"
+msgstr "Orden"
+
+#: src/paths/instance/orders/details/DetailPage.tsx:93
+#, c-format
+msgid "claimed"
+msgstr "reclamado"
+
+#: src/paths/instance/orders/details/DetailPage.tsx:110
+#: src/paths/instance/orders/details/DetailPage.tsx:261
+#: src/paths/instance/orders/list/Table.tsx:136
+#, c-format
+msgid "copy url"
+msgstr "copiar url"
+
+#: src/paths/instance/orders/details/DetailPage.tsx:126
+#: src/paths/instance/orders/details/DetailPage.tsx:349
+#, c-format
+msgid "pay at"
+msgstr "pagar en"
+
+#: src/paths/instance/orders/details/DetailPage.tsx:127
+#: src/paths/instance/orders/details/DetailPage.tsx:350
+#, c-format
+msgid "created at"
+msgstr "creado"
+
+#: src/paths/instance/orders/details/DetailPage.tsx:138
+#: src/paths/instance/orders/details/DetailPage.tsx:289
+#, c-format
+msgid "Timeline"
+msgstr "Cronología"
+
+#: src/paths/instance/orders/details/DetailPage.tsx:142
+#: src/paths/instance/orders/details/DetailPage.tsx:293
+#, c-format
+msgid "Payment details"
+msgstr "Detalles de pago"
+
+#: src/paths/instance/orders/details/DetailPage.tsx:146
+#: src/paths/instance/orders/details/DetailPage.tsx:299
+#: src/paths/instance/orders/details/DetailPage.tsx:363
+#, fuzzy, c-format
+msgid "Order status"
+msgstr "Estado de orden"
+
+#: src/paths/instance/orders/details/DetailPage.tsx:156
+#: src/paths/instance/orders/details/DetailPage.tsx:308
+#, fuzzy, c-format
+msgid "Product list"
+msgstr "Lista de producto"
+
+#: src/paths/instance/orders/details/DetailPage.tsx:236
+#, c-format
+msgid "paid"
+msgstr "pagados"
+
+#: src/paths/instance/orders/details/DetailPage.tsx:238
+#, c-format
+msgid "wired"
+msgstr "transferido"
+
+#: src/paths/instance/orders/details/DetailPage.tsx:241
+#, c-format
+msgid "refunded"
+msgstr "reembolzado"
+
+#: src/paths/instance/orders/details/DetailPage.tsx:258
+#, c-format
+msgid "refund"
+msgstr "reembolzar"
+
+#: src/paths/instance/orders/details/DetailPage.tsx:297
+#, c-format
+msgid "Refunded amount"
+msgstr "Monto reembolzado"
+
+#: src/paths/instance/orders/details/DetailPage.tsx:298
+#, c-format
+msgid "Deposit total"
+msgstr "Total depositado"
+
+#: src/paths/instance/orders/details/DetailPage.tsx:336
+#, c-format
+msgid "unpaid"
+msgstr "impago"
+
+#: src/paths/instance/orders/details/DetailPage.tsx:364
+#, c-format
+msgid "Order status URL"
+msgstr "URL de estado de orden"
+
+#: src/paths/instance/orders/details/DetailPage.tsx:365
+#, c-format
+msgid "Pay URI"
+msgstr "URI de pago"
+
+#: src/paths/instance/orders/details/DetailPage.tsx:383
+#, c-format
+msgid ""
+"Unknown order status. This is an error, please contact the administrator."
+msgstr ""
+"Estado de orden desconocido. Esto es un error, por favor contacte a su "
+"administrador"
+
+#: src/paths/instance/orders/details/index.tsx:56
+#: src/paths/instance/orders/list/index.tsx:147
+#, c-format
+msgid "refund created successfully"
+msgstr "reembolzo creado satisfactoriamente"
+
+#: src/paths/instance/orders/details/index.tsx:59
+#: src/paths/instance/orders/list/index.tsx:150
+#, fuzzy, c-format
+msgid "could not create the refund"
+msgstr "No se pudo aceder al servidor"
+
+#: src/paths/instance/orders/list/Table.tsx:111
+#, c-format
+msgid "load newer orders"
+msgstr "cargar nuevas ordenes"
+
+#: src/paths/instance/orders/list/Table.tsx:115
+#, c-format
+msgid "Date"
+msgstr "Fecha"
+
+#: src/paths/instance/orders/list/Table.tsx:131
+#: src/paths/instance/orders/list/Table.tsx:223
+#, c-format
+msgid "Refund"
+msgstr "Reembolzar"
+
+#: src/paths/instance/orders/list/Table.tsx:145
+#, c-format
+msgid "load older orders"
+msgstr "cargar viejas ordenes"
+
+#: src/paths/instance/orders/list/Table.tsx:154
+#, c-format
+msgid "No orders has been found"
+msgstr "No se enconraron ordenes"
+
+#: src/paths/instance/orders/list/Table.tsx:202
+#, c-format
+msgid "date"
+msgstr "fecha"
+
+#: src/paths/instance/orders/list/Table.tsx:203
+#, c-format
+msgid "amount"
+msgstr "monto"
+
+#: src/paths/instance/orders/list/Table.tsx:204
+#, c-format
+msgid "reason"
+msgstr "razón"
+
+#: src/paths/instance/orders/list/Table.tsx:224
+#, c-format
+msgid "Max refundable:"
+msgstr "Máximo reembolzable:"
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "Reason"
+msgstr "Razón"
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "duplicated"
+msgstr "duplicado"
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "requested by the customer"
+msgstr "pedido por el consumidor"
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "other"
+msgstr "otro"
+
+#: src/paths/instance/orders/list/index.tsx:91
+#, c-format
+msgid "go to order id"
+msgstr "ir a id de orden"
+
+#: src/paths/instance/orders/list/index.tsx:107
+#, c-format
+msgid "Paid"
+msgstr "Pagado"
+
+#: src/paths/instance/orders/list/index.tsx:108
+#, fuzzy, c-format
+msgid "Refunded"
+msgstr "Reembolzado"
+
+#: src/paths/instance/orders/list/index.tsx:109
+#, fuzzy, c-format
+msgid "Not wired"
+msgstr "No transferido"
+
+#: src/paths/instance/orders/list/index.tsx:110
+#, c-format
+msgid "All"
+msgstr "Todo"
+
+#: src/paths/instance/products/create/index.tsx:48
+#: src/paths/instance/products/update/index.tsx:64
+#, c-format
+msgid "could not create product"
+msgstr "no se pudo crear el producto"
+
+#: src/paths/instance/products/list/Table.tsx:87
+#, c-format
+msgid "Sell"
+msgstr "Venta"
+
+#: src/paths/instance/products/list/Table.tsx:89
+#, c-format
+msgid "Profit"
+msgstr "Ganancia"
+
+#: src/paths/instance/products/list/Table.tsx:91
+#, c-format
+msgid "Sold"
+msgstr "Vendido"
+
+#: src/paths/instance/products/list/index.tsx:59
+#, c-format
+msgid "product updated successfully"
+msgstr "producto actualizado correctamente"
+
+#: src/paths/instance/products/list/index.tsx:62
+#, c-format
+msgid "could not update the product"
+msgstr "no se pudo actualizar el producto"
+
+#: src/paths/instance/products/list/index.tsx:70
+#, c-format
+msgid "product delete successfully"
+msgstr "producto fue eliminado correctamente"
+
+#: src/paths/instance/products/list/index.tsx:73
+#, c-format
+msgid "could not delete the product"
+msgstr "no se pudo eliminar el producto"
+
+#: src/paths/instance/tips/list/Table.tsx:59
+#, c-format
+msgid "Tips"
+msgstr "Propinas"
+
+#: src/paths/instance/tips/list/Table.tsx:111
+#, c-format
+msgid "Committed amount"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:112
+#, c-format
+msgid "Exchange initial amount"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:113
+#, c-format
+msgid "Merchant initial amount"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:148
+#, c-format
+msgid "There is no tips yet, add more pressing the + sign"
+msgstr "No hay propinas todavía, agregar mas presionando el signo +"
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:50
+#: src/paths/instance/transfers/create/CreatePage.tsx:54
+#: src/paths/instance/transfers/create/CreatePage.tsx:55
+#: src/paths/instance/transfers/create/CreatePage.tsx:56
+#, c-format
+msgid "cannot be empty"
+msgstr "no puede ser vacío"
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:51
+#, c-format
+msgid "check the id, doest look valid"
+msgstr "verificar el id, no parece válido"
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:52
+#, c-format
+msgid "should have 52 characters, current %1$s"
+msgstr "debería tener 52 caracteres, actualmente %1$s"
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:57
+#, c-format
+msgid "URL doesn't have the right format"
+msgstr "La URL no tiene el formato correcto"
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:74
+#, fuzzy, c-format
+msgid "Transfer ID"
+msgstr "Transferencias"
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:76
+#, fuzzy, c-format
+msgid "Account Address"
+msgstr "Dirección de cuenta"
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:82
+#: src/paths/instance/transfers/list/Table.tsx:125
+#, c-format
+msgid "Exchange URL"
+msgstr "URL del Exchange"
+
+#: src/paths/instance/transfers/create/index.tsx:49
+#, fuzzy, c-format
+msgid "could not inform transfer"
+msgstr "no se pudo crear la instancia"
+
+#: src/paths/instance/transfers/list/Table.tsx:118
+#, fuzzy, c-format
+msgid "load newer transfers"
+msgstr "cargar nuevas ordenes"
+
+#: src/paths/instance/transfers/list/Table.tsx:123
+#, c-format
+msgid "Credit"
+msgstr "Crédito"
+
+#: src/paths/instance/transfers/list/Table.tsx:126
+#, fuzzy, c-format
+msgid "Confirmed"
+msgstr "Confirmar"
+
+#: src/paths/instance/transfers/list/Table.tsx:127
+#: src/paths/instance/transfers/list/index.tsx:60
+#, c-format
+msgid "Verified"
+msgstr "Verificado"
+
+#: src/paths/instance/transfers/list/Table.tsx:128
+#, fuzzy, c-format
+msgid "Executed at"
+msgstr "creado"
+
+#: src/paths/instance/transfers/list/Table.tsx:138
+#: src/paths/instance/transfers/list/Table.tsx:139
+#, c-format
+msgid "yes"
+msgstr "si"
+
+#: src/paths/instance/transfers/list/Table.tsx:138
+#: src/paths/instance/transfers/list/Table.tsx:139
+#, c-format
+msgid "no"
+msgstr "no"
+
+#: src/paths/instance/transfers/list/Table.tsx:140
+#, c-format
+msgid "unknown"
+msgstr "desconocido"
+
+#: src/paths/instance/transfers/list/Table.tsx:145
+#, fuzzy, c-format
+msgid "load older transfers"
+msgstr "cargar viejas transferencias"
+
+#: src/paths/instance/transfers/list/Table.tsx:154
+#, c-format
+msgid "There is no transfer yet, add more pressing the + sign"
+msgstr "No hay transferencias todavía, agregar mas presionando el signo +"
diff --git a/packages/merchant-backend-ui/src/i18n/fr.po b/packages/merchant-backend-ui/src/i18n/fr.po
new file mode 100644
index 000000000..6b35bd0ce
--- /dev/null
+++ b/packages/merchant-backend-ui/src/i18n/fr.po
@@ -0,0 +1,1057 @@
+# This file is part of TALER
+# (C) 2016 GNUnet e.V.
+#
+# TALER is free software; you can redistribute it and/or modify it under the
+# terms of the GNU General Public License as published by the Free Software
+# Foundation; either version 3, or (at your option) any later version.
+#
+# TALER is distributed in the hope that it will be useful, but WITHOUT ANY
+# WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+# A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License along with
+# TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+#
+#, fuzzy
+msgid ""
+msgstr ""
+"Project-Id-Version: Taler Wallet\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2016-11-23 00:00+0100\n"
+"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
+"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
+"Language-Team: LANGUAGE <LL@li.org>\n"
+"Language: \n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+#: src/ApplicationReadyRoutes.tsx:50 src/InstanceRoutes.tsx:118
+#: src/InstanceRoutes.tsx:299
+#, c-format
+msgid "Access denied"
+msgstr ""
+
+#: src/ApplicationReadyRoutes.tsx:51 src/InstanceRoutes.tsx:118
+#: src/InstanceRoutes.tsx:300
+#, c-format
+msgid "Check your token is valid"
+msgstr ""
+
+#: src/ApplicationReadyRoutes.tsx:72
+#, c-format
+msgid "Couldn't access the server."
+msgstr ""
+
+#: src/ApplicationReadyRoutes.tsx:73
+#, c-format
+msgid "Could not infer instance id from url %1$s"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:109
+#, c-format
+msgid "HTTP status #%1$s: Server reported a problem"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:110
+#, c-format
+msgid "Got message: \"%1$s\" from: %2$s"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:127
+#, c-format
+msgid "No default instance"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:128
+#, c-format
+msgid ""
+"in order to use merchant backoffice, you should create the default instance"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:288
+#, c-format
+msgid "Server reported a problem: HTTP status #%1$s"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:289
+#, c-format
+msgid "Got message: %1$s from: %2$s"
+msgstr ""
+
+#: src/components/exception/login.tsx:46
+#, c-format
+msgid "Login required"
+msgstr ""
+
+#: src/components/exception/login.tsx:49
+#, c-format
+msgid ""
+"Please enter your auth token. Token should have \"secret-token:\" and start "
+"with Bearer or ApiKey"
+msgstr ""
+
+#: src/components/exception/login.tsx:86 src/components/modal/index.tsx:53
+#: src/components/modal/index.tsx:75 src/paths/admin/create/CreatePage.tsx:115
+#: src/paths/instance/orders/create/CreatePage.tsx:325
+#: src/paths/instance/products/create/CreatePage.tsx:51
+#: src/paths/instance/products/list/Table.tsx:174
+#: src/paths/instance/products/list/Table.tsx:228
+#: src/paths/instance/products/update/UpdatePage.tsx:55
+#: src/paths/instance/transfers/create/CreatePage.tsx:89
+#: src/paths/instance/update/UpdatePage.tsx:134
+#, c-format
+msgid "Confirm"
+msgstr ""
+
+#: src/components/form/InputArray.tsx:72
+#, c-format
+msgid "The value %1$s is invalid for a payment url"
+msgstr ""
+
+#: src/components/form/InputDate.tsx:67
+#: src/paths/instance/orders/list/index.tsx:123
+#, c-format
+msgid "pick a date"
+msgstr ""
+
+#: src/components/form/InputDate.tsx:81
+#, c-format
+msgid "clear"
+msgstr ""
+
+#: src/components/form/InputDate.tsx:83
+#: src/paths/instance/transfers/list/Table.tsx:140
+#, c-format
+msgid "never"
+msgstr ""
+
+#: src/components/form/InputImage.tsx:80
+#, c-format
+msgid "Image should be smaller than 1 MB"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:28
+#, c-format
+msgid "Country"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:30
+#: src/paths/admin/create/CreatePage.tsx:99
+#: src/paths/instance/transfers/list/Table.tsx:124
+#: src/paths/instance/update/UpdatePage.tsx:118
+#, c-format
+msgid "Address"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:34
+#, c-format
+msgid "Building number"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:35
+#, c-format
+msgid "Building name"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:36
+#, c-format
+msgid "Street"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:37
+#, c-format
+msgid "Post code"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:38
+#, c-format
+msgid "Town location"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:39
+#, c-format
+msgid "Town"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:40
+#, c-format
+msgid "District"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:41
+#, c-format
+msgid "Country subdivision"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:59
+#, c-format
+msgid "Product id"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:60
+#: src/components/product/ProductForm.tsx:99
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:122
+#: src/paths/instance/orders/list/Table.tsx:227
+#: src/paths/instance/products/list/Table.tsx:86
+#, c-format
+msgid "Description"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:73
+#: src/components/form/InputTaxes.tsx:81
+#: src/paths/admin/create/CreatePage.tsx:87 src/paths/admin/list/Table.tsx:110
+#: src/paths/instance/details/DetailPage.tsx:76
+#: src/paths/instance/update/UpdatePage.tsx:106
+#, c-format
+msgid "Name"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:102
+#, c-format
+msgid "loading..."
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:108
+#, c-format
+msgid "no products found"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:116
+#, c-format
+msgid "no results"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:33
+#, c-format
+msgid "Deleting"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:34
+#, c-format
+msgid "Changing"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:60
+#, c-format
+msgid "Manage token"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:83
+#, c-format
+msgid "Update"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:100
+#: src/paths/instance/orders/create/CreatePage.tsx:252
+#: src/paths/instance/orders/create/CreatePage.tsx:273
+#, c-format
+msgid "Remove"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:106 src/components/modal/index.tsx:52
+#: src/components/modal/index.tsx:73 src/paths/admin/create/CreatePage.tsx:114
+#: src/paths/instance/orders/create/CreatePage.tsx:324
+#: src/paths/instance/products/create/CreatePage.tsx:50
+#: src/paths/instance/products/list/Table.tsx:166
+#: src/paths/instance/products/list/Table.tsx:218
+#: src/paths/instance/products/update/UpdatePage.tsx:54
+#: src/paths/instance/transfers/create/CreatePage.tsx:88
+#: src/paths/instance/update/UpdatePage.tsx:133
+#, c-format
+msgid "Cancel"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:91
+#, c-format
+msgid "Manage stock"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:93
+#, c-format
+msgid "Infinite"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:105
+#, c-format
+msgid "lost cannot be greater that current + incoming (max %1$s)"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:111
+#, c-format
+msgid "current stock will change from %1$s to %2$s"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:112
+#, c-format
+msgid "current stock will stay at %1$s"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:129
+#: src/paths/instance/products/list/Table.tsx:204
+#, c-format
+msgid "Incoming"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:130
+#: src/paths/instance/products/list/Table.tsx:205
+#, c-format
+msgid "Lost"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:142
+#, c-format
+msgid "Current"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:145
+#, c-format
+msgid "without stock"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:150
+#, c-format
+msgid "Next restock"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:152
+#, c-format
+msgid "Delivery address"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:73
+#, c-format
+msgid "this product has no taxes"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:77
+#: src/paths/instance/orders/details/DetailPage.tsx:145
+#: src/paths/instance/orders/details/DetailPage.tsx:296
+#: src/paths/instance/orders/list/Table.tsx:116
+#: src/paths/instance/transfers/create/CreatePage.tsx:84
+#, c-format
+msgid "Amount"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:78
+#, c-format
+msgid "currency and value separated with colon"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:84
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:78
+#, c-format
+msgid "Add"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:53
+#, c-format
+msgid "Instance"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:59
+#, c-format
+msgid "Settings"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:65
+#: src/paths/instance/orders/list/Table.tsx:60
+#, c-format
+msgid "Orders"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:71
+#: src/paths/instance/orders/create/CreatePage.tsx:258
+#: src/paths/instance/products/list/Table.tsx:48
+#, c-format
+msgid "Products"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:77
+#: src/paths/instance/transfers/list/Table.tsx:65
+#, c-format
+msgid "Transfers"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:87
+#, c-format
+msgid "Connection"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:112 src/paths/admin/list/Table.tsx:57
+#, c-format
+msgid "Instances"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:116
+#, c-format
+msgid "New"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:122
+#, c-format
+msgid "List"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:129
+#, c-format
+msgid "Log out"
+msgstr ""
+
+#: src/components/modal/index.tsx:74
+#, c-format
+msgid "Clear"
+msgstr ""
+
+#: src/components/modal/index.tsx:110 src/components/modal/index.tsx:111
+#, c-format
+msgid "should be the same"
+msgstr ""
+
+#: src/components/modal/index.tsx:111
+#, c-format
+msgid "cannot be the same as before"
+msgstr ""
+
+#: src/components/modal/index.tsx:114
+#, c-format
+msgid ""
+"You are updating the authorization token from instance %1$s with id %2$s"
+msgstr ""
+
+#: src/components/modal/index.tsx:124
+#, c-format
+msgid "Old token"
+msgstr ""
+
+#: src/components/modal/index.tsx:125
+#, c-format
+msgid "New token"
+msgstr ""
+
+#: src/components/modal/index.tsx:127
+#, c-format
+msgid "Clearing the auth token will mean public access to the instance"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:96
+#: src/paths/admin/create/CreatePage.tsx:85 src/paths/admin/list/Table.tsx:109
+#: src/paths/instance/transfers/list/Table.tsx:122
+#, c-format
+msgid "ID"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:98
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:121
+#: src/paths/instance/products/list/Table.tsx:85
+#, c-format
+msgid "Image"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:100
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:123
+#, c-format
+msgid "Unit"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:101
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:124
+#: src/paths/instance/products/list/Table.tsx:162
+#: src/paths/instance/products/list/Table.tsx:214
+#, c-format
+msgid "Price"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:103
+#: src/paths/instance/products/list/Table.tsx:90
+#, c-format
+msgid "Stock"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:105
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:128
+#: src/paths/instance/products/list/Table.tsx:88
+#, c-format
+msgid "Taxes"
+msgstr ""
+
+#: src/index.tsx:75
+#, c-format
+msgid "Server not found"
+msgstr ""
+
+#: src/index.tsx:85
+#, c-format
+msgid "Couldn't access the server"
+msgstr ""
+
+#: src/index.tsx:87 src/index.tsx:99
+#, c-format
+msgid "Got message %1$s from %2$s"
+msgstr ""
+
+#: src/index.tsx:97
+#, c-format
+msgid "Unexpected Error"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:89
+#: src/paths/instance/update/UpdatePage.tsx:108
+#, c-format
+msgid "Auth token"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:91
+#: src/paths/instance/details/DetailPage.tsx:77
+#: src/paths/instance/update/UpdatePage.tsx:110
+#, c-format
+msgid "Account address"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:93
+#: src/paths/instance/update/UpdatePage.tsx:112
+#, c-format
+msgid "Default max deposit fee"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:95
+#: src/paths/instance/update/UpdatePage.tsx:114
+#, c-format
+msgid "Default max wire fee"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:97
+#: src/paths/instance/update/UpdatePage.tsx:116
+#, c-format
+msgid "Default wire fee amortization"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:103
+#: src/paths/instance/update/UpdatePage.tsx:122
+#, c-format
+msgid "Jurisdiction"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:107
+#: src/paths/instance/update/UpdatePage.tsx:126
+#, c-format
+msgid "Default pay delay"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:109
+#: src/paths/instance/update/UpdatePage.tsx:128
+#, c-format
+msgid "Default wire transfer delay"
+msgstr ""
+
+#: src/paths/admin/create/index.tsx:58
+#, c-format
+msgid "could not create instance"
+msgstr ""
+
+#: src/paths/admin/list/Table.tsx:63 src/paths/admin/list/Table.tsx:131
+#: src/paths/instance/transfers/list/Table.tsx:71
+#, c-format
+msgid "Delete"
+msgstr ""
+
+#: src/paths/admin/list/Table.tsx:128
+#, c-format
+msgid "Edit"
+msgstr ""
+
+#: src/paths/admin/list/Table.tsx:149
+#: src/paths/instance/products/list/Table.tsx:245
+#, c-format
+msgid "There is no instances yet, add more pressing the + sign"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:237
+#, c-format
+msgid "Inventory products"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:286
+#, c-format
+msgid "Total price"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:287
+#, c-format
+msgid "Total tax"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:289
+#: src/paths/instance/orders/create/CreatePage.tsx:297
+#, c-format
+msgid "Order price"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:295
+#, c-format
+msgid "Net"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:300
+#: src/paths/instance/orders/details/DetailPage.tsx:144
+#: src/paths/instance/orders/details/DetailPage.tsx:295
+#: src/paths/instance/orders/list/Table.tsx:117
+#, c-format
+msgid "Summary"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:302
+#, c-format
+msgid "Payments options"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:303
+#, c-format
+msgid "Auto refund deadline"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:304
+#, c-format
+msgid "Refund deadline"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:305
+#, c-format
+msgid "Pay deadline"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:307
+#, c-format
+msgid "Delivery date"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:308
+#, c-format
+msgid "Location"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:312
+#, c-format
+msgid "Max fee"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:313
+#, c-format
+msgid "Max wire fee"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:314
+#, c-format
+msgid "Wire fee amortization"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:315
+#, c-format
+msgid "Fullfilment url"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:318
+#, c-format
+msgid "Extra information"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:44
+#, c-format
+msgid "select a product first"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:51
+#, c-format
+msgid "should be greater than 0"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:58
+#, c-format
+msgid ""
+"cannot be greater than current stock and quantity previously added. max: %1$s"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:64
+#, c-format
+msgid "cannot be greater than current stock %1$s"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:76
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:126
+#, c-format
+msgid "Quantity"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:92
+#: src/paths/instance/orders/details/DetailPage.tsx:235
+#: src/paths/instance/orders/details/DetailPage.tsx:333
+#, c-format
+msgid "Order"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:93
+#, c-format
+msgid "claimed"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:110
+#: src/paths/instance/orders/details/DetailPage.tsx:261
+#: src/paths/instance/orders/list/Table.tsx:136
+#, c-format
+msgid "copy url"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:126
+#: src/paths/instance/orders/details/DetailPage.tsx:349
+#, c-format
+msgid "pay at"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:127
+#: src/paths/instance/orders/details/DetailPage.tsx:350
+#, c-format
+msgid "created at"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:138
+#: src/paths/instance/orders/details/DetailPage.tsx:289
+#, c-format
+msgid "Timeline"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:142
+#: src/paths/instance/orders/details/DetailPage.tsx:293
+#, c-format
+msgid "Payment details"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:146
+#: src/paths/instance/orders/details/DetailPage.tsx:299
+#: src/paths/instance/orders/details/DetailPage.tsx:363
+#, c-format
+msgid "Order status"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:156
+#: src/paths/instance/orders/details/DetailPage.tsx:308
+#, c-format
+msgid "Product list"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:236
+#, c-format
+msgid "paid"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:238
+#, c-format
+msgid "wired"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:241
+#, c-format
+msgid "refunded"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:258
+#, c-format
+msgid "refund"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:297
+#, c-format
+msgid "Refunded amount"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:298
+#, c-format
+msgid "Deposit total"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:336
+#, c-format
+msgid "unpaid"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:364
+#, c-format
+msgid "Order status URL"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:365
+#, c-format
+msgid "Pay URI"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:383
+#, c-format
+msgid ""
+"Unknown order status. This is an error, please contact the administrator."
+msgstr ""
+
+#: src/paths/instance/orders/details/index.tsx:56
+#: src/paths/instance/orders/list/index.tsx:147
+#, c-format
+msgid "refund created successfully"
+msgstr ""
+
+#: src/paths/instance/orders/details/index.tsx:59
+#: src/paths/instance/orders/list/index.tsx:150
+#, c-format
+msgid "could not create the refund"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:111
+#, c-format
+msgid "load newer orders"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:115
+#, c-format
+msgid "Date"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:131
+#: src/paths/instance/orders/list/Table.tsx:223
+#, c-format
+msgid "Refund"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:145
+#, c-format
+msgid "load older orders"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:154
+#, c-format
+msgid "No orders has been found"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:202
+#, c-format
+msgid "date"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:203
+#, c-format
+msgid "amount"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:204
+#, c-format
+msgid "reason"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:224
+#, c-format
+msgid "Max refundable:"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "Reason"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "duplicated"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "requested by the customer"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "other"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:91
+#, c-format
+msgid "go to order id"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:107
+#, c-format
+msgid "Paid"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:108
+#, c-format
+msgid "Refunded"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:109
+#, c-format
+msgid "Not wired"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:110
+#, c-format
+msgid "All"
+msgstr ""
+
+#: src/paths/instance/products/create/index.tsx:48
+#: src/paths/instance/products/update/index.tsx:64
+#, c-format
+msgid "could not create product"
+msgstr ""
+
+#: src/paths/instance/products/list/Table.tsx:87
+#, c-format
+msgid "Sell"
+msgstr ""
+
+#: src/paths/instance/products/list/Table.tsx:89
+#, c-format
+msgid "Profit"
+msgstr ""
+
+#: src/paths/instance/products/list/Table.tsx:91
+#, c-format
+msgid "Sold"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:59
+#, c-format
+msgid "product updated successfully"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:62
+#, c-format
+msgid "could not update the product"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:70
+#, c-format
+msgid "product delete successfully"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:73
+#, c-format
+msgid "could not delete the product"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:59
+#, c-format
+msgid "Tips"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:111
+#, c-format
+msgid "Committed amount"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:112
+#, c-format
+msgid "Exchange initial amount"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:113
+#, c-format
+msgid "Merchant initial amount"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:148
+#, c-format
+msgid "There is no tips yet, add more pressing the + sign"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:50
+#: src/paths/instance/transfers/create/CreatePage.tsx:54
+#: src/paths/instance/transfers/create/CreatePage.tsx:55
+#: src/paths/instance/transfers/create/CreatePage.tsx:56
+#, c-format
+msgid "cannot be empty"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:51
+#, c-format
+msgid "check the id, doest look valid"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:52
+#, c-format
+msgid "should have 52 characters, current %1$s"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:57
+#, c-format
+msgid "URL doesn't have the right format"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:74
+#, c-format
+msgid "Transfer ID"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:76
+#, c-format
+msgid "Account Address"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:82
+#: src/paths/instance/transfers/list/Table.tsx:125
+#, c-format
+msgid "Exchange URL"
+msgstr ""
+
+#: src/paths/instance/transfers/create/index.tsx:49
+#, c-format
+msgid "could not inform transfer"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:118
+#, c-format
+msgid "load newer transfers"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:123
+#, c-format
+msgid "Credit"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:126
+#, c-format
+msgid "Confirmed"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:127
+#: src/paths/instance/transfers/list/index.tsx:60
+#, c-format
+msgid "Verified"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:128
+#, c-format
+msgid "Executed at"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:138
+#: src/paths/instance/transfers/list/Table.tsx:139
+#, c-format
+msgid "yes"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:138
+#: src/paths/instance/transfers/list/Table.tsx:139
+#, c-format
+msgid "no"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:140
+#, c-format
+msgid "unknown"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:145
+#, c-format
+msgid "load older transfers"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:154
+#, c-format
+msgid "There is no transfer yet, add more pressing the + sign"
+msgstr ""
diff --git a/packages/merchant-backend-ui/src/i18n/index.tsx b/packages/merchant-backend-ui/src/i18n/index.tsx
new file mode 100644
index 000000000..63c8e1934
--- /dev/null
+++ b/packages/merchant-backend-ui/src/i18n/index.tsx
@@ -0,0 +1,203 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ * Translation helpers for React components and template literals.
+ */
+
+/**
+ * Imports
+ */
+import { ComponentChild, ComponentChildren, h, Fragment, VNode } from "preact";
+
+import { useTranslationContext } from "../context/translation";
+
+export function useTranslator() {
+  const ctx = useTranslationContext();
+  const jed = ctx.handler
+  return function str(stringSeq: TemplateStringsArray, ...values: any[]): string {
+    const s = toI18nString(stringSeq);
+    if (!s) return s
+    const tr = jed
+      .translate(s)
+      .ifPlural(1, s)
+      .fetch(...values);
+    return tr;
+  }
+}
+
+
+/**
+ * Convert template strings to a msgid
+ */
+ function toI18nString(stringSeq: ReadonlyArray<string>): string {
+  let s = "";
+  for (let i = 0; i < stringSeq.length; i++) {
+    s += stringSeq[i];
+    if (i < stringSeq.length - 1) {
+      s += `%${i + 1}$s`;
+    }
+  }
+  return s;
+}
+
+
+interface TranslateSwitchProps {
+  target: number;
+  children: ComponentChildren;
+}
+
+function stringifyChildren(children: ComponentChildren): string {
+  let n = 1;
+  const ss = (children instanceof Array ? children : [children]).map((c) => {
+    if (typeof c === "string") {
+      return c;
+    }
+    return `%${n++}$s`;
+  });
+  const s = ss.join("").replace(/ +/g, " ").trim();
+  return s;
+}
+
+interface TranslateProps {
+  children: ComponentChildren;
+  /**
+   * Component that the translated element should be wrapped in.
+   * Defaults to "div".
+   */
+  wrap?: any;
+
+  /**
+   * Props to give to the wrapped component.
+   */
+  wrapProps?: any;
+}
+
+function getTranslatedChildren(
+  translation: string,
+  children: ComponentChildren,
+): ComponentChild[] {
+  const tr = translation.split(/%(\d+)\$s/);
+  const childArray = children instanceof Array ? children : [children];
+  // Merge consecutive string children.
+  const placeholderChildren = Array<ComponentChild>();
+  for (let i = 0; i < childArray.length; i++) {
+    const x = childArray[i];
+    if (x === undefined) {
+      continue;
+    } else if (typeof x === "string") {
+      continue;
+    } else {
+      placeholderChildren.push(x);
+    }
+  }
+  const result = Array<ComponentChild>();
+  for (let i = 0; i < tr.length; i++) {
+    if (i % 2 == 0) {
+      // Text
+      result.push(tr[i]);
+    } else {
+      const childIdx = Number.parseInt(tr[i],10) - 1;
+      result.push(placeholderChildren[childIdx]);
+    }
+  }
+  return result;
+}
+
+/**
+ * Translate text node children of this component.
+ * If a child component might produce a text node, it must be wrapped
+ * in a another non-text element.
+ *
+ * Example:
+ * ```
+ * <Translate>
+ * Hello.  Your score is <span><PlayerScore player={player} /></span>
+ * </Translate>
+ * ```
+ */
+export function Translate({ children }: TranslateProps): VNode {
+  const s = stringifyChildren(children);
+  const ctx = useTranslationContext()
+  const translation: string = ctx.handler.ngettext(s, s, 1);
+  const result = getTranslatedChildren(translation, children)
+  return <Fragment>{result}</Fragment>;
+}
+
+/**
+ * Switch translation based on singular or plural based on the target prop.
+ * Should only contain TranslateSingular and TransplatePlural as children.
+ *
+ * Example:
+ * ```
+ * <TranslateSwitch target={n}>
+ *  <TranslateSingular>I have {n} apple.</TranslateSingular>
+ *  <TranslatePlural>I have {n} apples.</TranslatePlural>
+ * </TranslateSwitch>
+ * ```
+ */
+export function TranslateSwitch({ children, target }: TranslateSwitchProps) {
+  let singular: VNode<TranslationPluralProps> | undefined;
+  let plural: VNode<TranslationPluralProps> | undefined;
+  // const children = this.props.children;
+  if (children) {
+    (children instanceof Array ? children : [children]).forEach((child: any) => {
+      if (child.type === TranslatePlural) {
+        plural = child;
+      }
+      if (child.type === TranslateSingular) {
+        singular = child;
+      }
+    });
+  }
+  if (!singular || !plural) {
+    console.error("translation not found");
+    return h("span", {}, ["translation not found"]);
+  }
+  singular.props.target = target;
+  plural.props.target = target;
+  // We're looking up the translation based on the
+  // singular, even if we must use the plural form.
+  return singular;
+}
+
+interface TranslationPluralProps {
+  children: ComponentChildren;
+  target: number;
+}
+
+/**
+ * See [[TranslateSwitch]].
+ */
+export function TranslatePlural({ children, target }: TranslationPluralProps): VNode {
+  const s = stringifyChildren(children);
+  const ctx = useTranslationContext()
+  const translation = ctx.handler.ngettext(s, s, 1);
+  const result = getTranslatedChildren(translation, children);
+  return <Fragment>{result}</Fragment>;
+}
+
+/**
+ * See [[TranslateSwitch]].
+ */
+export function TranslateSingular({ children, target }: TranslationPluralProps): VNode {
+  const s = stringifyChildren(children);
+  const ctx = useTranslationContext()
+  const translation = ctx.handler.ngettext(s, s, target);
+  const result = getTranslatedChildren(translation, children);
+  return <Fragment>{result}</Fragment>;
+
+}
diff --git a/packages/merchant-backend-ui/src/i18n/it.po b/packages/merchant-backend-ui/src/i18n/it.po
new file mode 100644
index 000000000..6b35bd0ce
--- /dev/null
+++ b/packages/merchant-backend-ui/src/i18n/it.po
@@ -0,0 +1,1057 @@
+# This file is part of TALER
+# (C) 2016 GNUnet e.V.
+#
+# TALER is free software; you can redistribute it and/or modify it under the
+# terms of the GNU General Public License as published by the Free Software
+# Foundation; either version 3, or (at your option) any later version.
+#
+# TALER is distributed in the hope that it will be useful, but WITHOUT ANY
+# WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+# A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License along with
+# TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+#
+#, fuzzy
+msgid ""
+msgstr ""
+"Project-Id-Version: Taler Wallet\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2016-11-23 00:00+0100\n"
+"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
+"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
+"Language-Team: LANGUAGE <LL@li.org>\n"
+"Language: \n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+#: src/ApplicationReadyRoutes.tsx:50 src/InstanceRoutes.tsx:118
+#: src/InstanceRoutes.tsx:299
+#, c-format
+msgid "Access denied"
+msgstr ""
+
+#: src/ApplicationReadyRoutes.tsx:51 src/InstanceRoutes.tsx:118
+#: src/InstanceRoutes.tsx:300
+#, c-format
+msgid "Check your token is valid"
+msgstr ""
+
+#: src/ApplicationReadyRoutes.tsx:72
+#, c-format
+msgid "Couldn't access the server."
+msgstr ""
+
+#: src/ApplicationReadyRoutes.tsx:73
+#, c-format
+msgid "Could not infer instance id from url %1$s"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:109
+#, c-format
+msgid "HTTP status #%1$s: Server reported a problem"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:110
+#, c-format
+msgid "Got message: \"%1$s\" from: %2$s"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:127
+#, c-format
+msgid "No default instance"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:128
+#, c-format
+msgid ""
+"in order to use merchant backoffice, you should create the default instance"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:288
+#, c-format
+msgid "Server reported a problem: HTTP status #%1$s"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:289
+#, c-format
+msgid "Got message: %1$s from: %2$s"
+msgstr ""
+
+#: src/components/exception/login.tsx:46
+#, c-format
+msgid "Login required"
+msgstr ""
+
+#: src/components/exception/login.tsx:49
+#, c-format
+msgid ""
+"Please enter your auth token. Token should have \"secret-token:\" and start "
+"with Bearer or ApiKey"
+msgstr ""
+
+#: src/components/exception/login.tsx:86 src/components/modal/index.tsx:53
+#: src/components/modal/index.tsx:75 src/paths/admin/create/CreatePage.tsx:115
+#: src/paths/instance/orders/create/CreatePage.tsx:325
+#: src/paths/instance/products/create/CreatePage.tsx:51
+#: src/paths/instance/products/list/Table.tsx:174
+#: src/paths/instance/products/list/Table.tsx:228
+#: src/paths/instance/products/update/UpdatePage.tsx:55
+#: src/paths/instance/transfers/create/CreatePage.tsx:89
+#: src/paths/instance/update/UpdatePage.tsx:134
+#, c-format
+msgid "Confirm"
+msgstr ""
+
+#: src/components/form/InputArray.tsx:72
+#, c-format
+msgid "The value %1$s is invalid for a payment url"
+msgstr ""
+
+#: src/components/form/InputDate.tsx:67
+#: src/paths/instance/orders/list/index.tsx:123
+#, c-format
+msgid "pick a date"
+msgstr ""
+
+#: src/components/form/InputDate.tsx:81
+#, c-format
+msgid "clear"
+msgstr ""
+
+#: src/components/form/InputDate.tsx:83
+#: src/paths/instance/transfers/list/Table.tsx:140
+#, c-format
+msgid "never"
+msgstr ""
+
+#: src/components/form/InputImage.tsx:80
+#, c-format
+msgid "Image should be smaller than 1 MB"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:28
+#, c-format
+msgid "Country"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:30
+#: src/paths/admin/create/CreatePage.tsx:99
+#: src/paths/instance/transfers/list/Table.tsx:124
+#: src/paths/instance/update/UpdatePage.tsx:118
+#, c-format
+msgid "Address"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:34
+#, c-format
+msgid "Building number"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:35
+#, c-format
+msgid "Building name"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:36
+#, c-format
+msgid "Street"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:37
+#, c-format
+msgid "Post code"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:38
+#, c-format
+msgid "Town location"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:39
+#, c-format
+msgid "Town"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:40
+#, c-format
+msgid "District"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:41
+#, c-format
+msgid "Country subdivision"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:59
+#, c-format
+msgid "Product id"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:60
+#: src/components/product/ProductForm.tsx:99
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:122
+#: src/paths/instance/orders/list/Table.tsx:227
+#: src/paths/instance/products/list/Table.tsx:86
+#, c-format
+msgid "Description"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:73
+#: src/components/form/InputTaxes.tsx:81
+#: src/paths/admin/create/CreatePage.tsx:87 src/paths/admin/list/Table.tsx:110
+#: src/paths/instance/details/DetailPage.tsx:76
+#: src/paths/instance/update/UpdatePage.tsx:106
+#, c-format
+msgid "Name"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:102
+#, c-format
+msgid "loading..."
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:108
+#, c-format
+msgid "no products found"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:116
+#, c-format
+msgid "no results"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:33
+#, c-format
+msgid "Deleting"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:34
+#, c-format
+msgid "Changing"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:60
+#, c-format
+msgid "Manage token"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:83
+#, c-format
+msgid "Update"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:100
+#: src/paths/instance/orders/create/CreatePage.tsx:252
+#: src/paths/instance/orders/create/CreatePage.tsx:273
+#, c-format
+msgid "Remove"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:106 src/components/modal/index.tsx:52
+#: src/components/modal/index.tsx:73 src/paths/admin/create/CreatePage.tsx:114
+#: src/paths/instance/orders/create/CreatePage.tsx:324
+#: src/paths/instance/products/create/CreatePage.tsx:50
+#: src/paths/instance/products/list/Table.tsx:166
+#: src/paths/instance/products/list/Table.tsx:218
+#: src/paths/instance/products/update/UpdatePage.tsx:54
+#: src/paths/instance/transfers/create/CreatePage.tsx:88
+#: src/paths/instance/update/UpdatePage.tsx:133
+#, c-format
+msgid "Cancel"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:91
+#, c-format
+msgid "Manage stock"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:93
+#, c-format
+msgid "Infinite"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:105
+#, c-format
+msgid "lost cannot be greater that current + incoming (max %1$s)"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:111
+#, c-format
+msgid "current stock will change from %1$s to %2$s"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:112
+#, c-format
+msgid "current stock will stay at %1$s"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:129
+#: src/paths/instance/products/list/Table.tsx:204
+#, c-format
+msgid "Incoming"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:130
+#: src/paths/instance/products/list/Table.tsx:205
+#, c-format
+msgid "Lost"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:142
+#, c-format
+msgid "Current"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:145
+#, c-format
+msgid "without stock"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:150
+#, c-format
+msgid "Next restock"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:152
+#, c-format
+msgid "Delivery address"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:73
+#, c-format
+msgid "this product has no taxes"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:77
+#: src/paths/instance/orders/details/DetailPage.tsx:145
+#: src/paths/instance/orders/details/DetailPage.tsx:296
+#: src/paths/instance/orders/list/Table.tsx:116
+#: src/paths/instance/transfers/create/CreatePage.tsx:84
+#, c-format
+msgid "Amount"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:78
+#, c-format
+msgid "currency and value separated with colon"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:84
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:78
+#, c-format
+msgid "Add"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:53
+#, c-format
+msgid "Instance"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:59
+#, c-format
+msgid "Settings"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:65
+#: src/paths/instance/orders/list/Table.tsx:60
+#, c-format
+msgid "Orders"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:71
+#: src/paths/instance/orders/create/CreatePage.tsx:258
+#: src/paths/instance/products/list/Table.tsx:48
+#, c-format
+msgid "Products"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:77
+#: src/paths/instance/transfers/list/Table.tsx:65
+#, c-format
+msgid "Transfers"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:87
+#, c-format
+msgid "Connection"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:112 src/paths/admin/list/Table.tsx:57
+#, c-format
+msgid "Instances"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:116
+#, c-format
+msgid "New"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:122
+#, c-format
+msgid "List"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:129
+#, c-format
+msgid "Log out"
+msgstr ""
+
+#: src/components/modal/index.tsx:74
+#, c-format
+msgid "Clear"
+msgstr ""
+
+#: src/components/modal/index.tsx:110 src/components/modal/index.tsx:111
+#, c-format
+msgid "should be the same"
+msgstr ""
+
+#: src/components/modal/index.tsx:111
+#, c-format
+msgid "cannot be the same as before"
+msgstr ""
+
+#: src/components/modal/index.tsx:114
+#, c-format
+msgid ""
+"You are updating the authorization token from instance %1$s with id %2$s"
+msgstr ""
+
+#: src/components/modal/index.tsx:124
+#, c-format
+msgid "Old token"
+msgstr ""
+
+#: src/components/modal/index.tsx:125
+#, c-format
+msgid "New token"
+msgstr ""
+
+#: src/components/modal/index.tsx:127
+#, c-format
+msgid "Clearing the auth token will mean public access to the instance"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:96
+#: src/paths/admin/create/CreatePage.tsx:85 src/paths/admin/list/Table.tsx:109
+#: src/paths/instance/transfers/list/Table.tsx:122
+#, c-format
+msgid "ID"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:98
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:121
+#: src/paths/instance/products/list/Table.tsx:85
+#, c-format
+msgid "Image"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:100
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:123
+#, c-format
+msgid "Unit"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:101
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:124
+#: src/paths/instance/products/list/Table.tsx:162
+#: src/paths/instance/products/list/Table.tsx:214
+#, c-format
+msgid "Price"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:103
+#: src/paths/instance/products/list/Table.tsx:90
+#, c-format
+msgid "Stock"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:105
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:128
+#: src/paths/instance/products/list/Table.tsx:88
+#, c-format
+msgid "Taxes"
+msgstr ""
+
+#: src/index.tsx:75
+#, c-format
+msgid "Server not found"
+msgstr ""
+
+#: src/index.tsx:85
+#, c-format
+msgid "Couldn't access the server"
+msgstr ""
+
+#: src/index.tsx:87 src/index.tsx:99
+#, c-format
+msgid "Got message %1$s from %2$s"
+msgstr ""
+
+#: src/index.tsx:97
+#, c-format
+msgid "Unexpected Error"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:89
+#: src/paths/instance/update/UpdatePage.tsx:108
+#, c-format
+msgid "Auth token"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:91
+#: src/paths/instance/details/DetailPage.tsx:77
+#: src/paths/instance/update/UpdatePage.tsx:110
+#, c-format
+msgid "Account address"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:93
+#: src/paths/instance/update/UpdatePage.tsx:112
+#, c-format
+msgid "Default max deposit fee"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:95
+#: src/paths/instance/update/UpdatePage.tsx:114
+#, c-format
+msgid "Default max wire fee"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:97
+#: src/paths/instance/update/UpdatePage.tsx:116
+#, c-format
+msgid "Default wire fee amortization"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:103
+#: src/paths/instance/update/UpdatePage.tsx:122
+#, c-format
+msgid "Jurisdiction"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:107
+#: src/paths/instance/update/UpdatePage.tsx:126
+#, c-format
+msgid "Default pay delay"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:109
+#: src/paths/instance/update/UpdatePage.tsx:128
+#, c-format
+msgid "Default wire transfer delay"
+msgstr ""
+
+#: src/paths/admin/create/index.tsx:58
+#, c-format
+msgid "could not create instance"
+msgstr ""
+
+#: src/paths/admin/list/Table.tsx:63 src/paths/admin/list/Table.tsx:131
+#: src/paths/instance/transfers/list/Table.tsx:71
+#, c-format
+msgid "Delete"
+msgstr ""
+
+#: src/paths/admin/list/Table.tsx:128
+#, c-format
+msgid "Edit"
+msgstr ""
+
+#: src/paths/admin/list/Table.tsx:149
+#: src/paths/instance/products/list/Table.tsx:245
+#, c-format
+msgid "There is no instances yet, add more pressing the + sign"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:237
+#, c-format
+msgid "Inventory products"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:286
+#, c-format
+msgid "Total price"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:287
+#, c-format
+msgid "Total tax"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:289
+#: src/paths/instance/orders/create/CreatePage.tsx:297
+#, c-format
+msgid "Order price"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:295
+#, c-format
+msgid "Net"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:300
+#: src/paths/instance/orders/details/DetailPage.tsx:144
+#: src/paths/instance/orders/details/DetailPage.tsx:295
+#: src/paths/instance/orders/list/Table.tsx:117
+#, c-format
+msgid "Summary"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:302
+#, c-format
+msgid "Payments options"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:303
+#, c-format
+msgid "Auto refund deadline"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:304
+#, c-format
+msgid "Refund deadline"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:305
+#, c-format
+msgid "Pay deadline"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:307
+#, c-format
+msgid "Delivery date"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:308
+#, c-format
+msgid "Location"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:312
+#, c-format
+msgid "Max fee"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:313
+#, c-format
+msgid "Max wire fee"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:314
+#, c-format
+msgid "Wire fee amortization"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:315
+#, c-format
+msgid "Fullfilment url"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:318
+#, c-format
+msgid "Extra information"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:44
+#, c-format
+msgid "select a product first"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:51
+#, c-format
+msgid "should be greater than 0"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:58
+#, c-format
+msgid ""
+"cannot be greater than current stock and quantity previously added. max: %1$s"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:64
+#, c-format
+msgid "cannot be greater than current stock %1$s"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:76
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:126
+#, c-format
+msgid "Quantity"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:92
+#: src/paths/instance/orders/details/DetailPage.tsx:235
+#: src/paths/instance/orders/details/DetailPage.tsx:333
+#, c-format
+msgid "Order"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:93
+#, c-format
+msgid "claimed"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:110
+#: src/paths/instance/orders/details/DetailPage.tsx:261
+#: src/paths/instance/orders/list/Table.tsx:136
+#, c-format
+msgid "copy url"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:126
+#: src/paths/instance/orders/details/DetailPage.tsx:349
+#, c-format
+msgid "pay at"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:127
+#: src/paths/instance/orders/details/DetailPage.tsx:350
+#, c-format
+msgid "created at"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:138
+#: src/paths/instance/orders/details/DetailPage.tsx:289
+#, c-format
+msgid "Timeline"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:142
+#: src/paths/instance/orders/details/DetailPage.tsx:293
+#, c-format
+msgid "Payment details"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:146
+#: src/paths/instance/orders/details/DetailPage.tsx:299
+#: src/paths/instance/orders/details/DetailPage.tsx:363
+#, c-format
+msgid "Order status"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:156
+#: src/paths/instance/orders/details/DetailPage.tsx:308
+#, c-format
+msgid "Product list"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:236
+#, c-format
+msgid "paid"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:238
+#, c-format
+msgid "wired"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:241
+#, c-format
+msgid "refunded"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:258
+#, c-format
+msgid "refund"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:297
+#, c-format
+msgid "Refunded amount"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:298
+#, c-format
+msgid "Deposit total"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:336
+#, c-format
+msgid "unpaid"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:364
+#, c-format
+msgid "Order status URL"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:365
+#, c-format
+msgid "Pay URI"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:383
+#, c-format
+msgid ""
+"Unknown order status. This is an error, please contact the administrator."
+msgstr ""
+
+#: src/paths/instance/orders/details/index.tsx:56
+#: src/paths/instance/orders/list/index.tsx:147
+#, c-format
+msgid "refund created successfully"
+msgstr ""
+
+#: src/paths/instance/orders/details/index.tsx:59
+#: src/paths/instance/orders/list/index.tsx:150
+#, c-format
+msgid "could not create the refund"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:111
+#, c-format
+msgid "load newer orders"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:115
+#, c-format
+msgid "Date"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:131
+#: src/paths/instance/orders/list/Table.tsx:223
+#, c-format
+msgid "Refund"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:145
+#, c-format
+msgid "load older orders"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:154
+#, c-format
+msgid "No orders has been found"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:202
+#, c-format
+msgid "date"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:203
+#, c-format
+msgid "amount"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:204
+#, c-format
+msgid "reason"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:224
+#, c-format
+msgid "Max refundable:"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "Reason"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "duplicated"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "requested by the customer"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "other"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:91
+#, c-format
+msgid "go to order id"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:107
+#, c-format
+msgid "Paid"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:108
+#, c-format
+msgid "Refunded"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:109
+#, c-format
+msgid "Not wired"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:110
+#, c-format
+msgid "All"
+msgstr ""
+
+#: src/paths/instance/products/create/index.tsx:48
+#: src/paths/instance/products/update/index.tsx:64
+#, c-format
+msgid "could not create product"
+msgstr ""
+
+#: src/paths/instance/products/list/Table.tsx:87
+#, c-format
+msgid "Sell"
+msgstr ""
+
+#: src/paths/instance/products/list/Table.tsx:89
+#, c-format
+msgid "Profit"
+msgstr ""
+
+#: src/paths/instance/products/list/Table.tsx:91
+#, c-format
+msgid "Sold"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:59
+#, c-format
+msgid "product updated successfully"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:62
+#, c-format
+msgid "could not update the product"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:70
+#, c-format
+msgid "product delete successfully"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:73
+#, c-format
+msgid "could not delete the product"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:59
+#, c-format
+msgid "Tips"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:111
+#, c-format
+msgid "Committed amount"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:112
+#, c-format
+msgid "Exchange initial amount"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:113
+#, c-format
+msgid "Merchant initial amount"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:148
+#, c-format
+msgid "There is no tips yet, add more pressing the + sign"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:50
+#: src/paths/instance/transfers/create/CreatePage.tsx:54
+#: src/paths/instance/transfers/create/CreatePage.tsx:55
+#: src/paths/instance/transfers/create/CreatePage.tsx:56
+#, c-format
+msgid "cannot be empty"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:51
+#, c-format
+msgid "check the id, doest look valid"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:52
+#, c-format
+msgid "should have 52 characters, current %1$s"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:57
+#, c-format
+msgid "URL doesn't have the right format"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:74
+#, c-format
+msgid "Transfer ID"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:76
+#, c-format
+msgid "Account Address"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:82
+#: src/paths/instance/transfers/list/Table.tsx:125
+#, c-format
+msgid "Exchange URL"
+msgstr ""
+
+#: src/paths/instance/transfers/create/index.tsx:49
+#, c-format
+msgid "could not inform transfer"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:118
+#, c-format
+msgid "load newer transfers"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:123
+#, c-format
+msgid "Credit"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:126
+#, c-format
+msgid "Confirmed"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:127
+#: src/paths/instance/transfers/list/index.tsx:60
+#, c-format
+msgid "Verified"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:128
+#, c-format
+msgid "Executed at"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:138
+#: src/paths/instance/transfers/list/Table.tsx:139
+#, c-format
+msgid "yes"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:138
+#: src/paths/instance/transfers/list/Table.tsx:139
+#, c-format
+msgid "no"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:140
+#, c-format
+msgid "unknown"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:145
+#, c-format
+msgid "load older transfers"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:154
+#, c-format
+msgid "There is no transfer yet, add more pressing the + sign"
+msgstr ""
diff --git a/packages/merchant-backend-ui/src/i18n/poheader b/packages/merchant-backend-ui/src/i18n/poheader
new file mode 100644
index 000000000..ee3fcd7be
--- /dev/null
+++ b/packages/merchant-backend-ui/src/i18n/poheader
@@ -0,0 +1,27 @@
+#  This file is part of GNU Taler
+#  (C) 2021 Taler Systems S.A.
+
+#  GNU Taler is free software; you can redistribute it and/or modify it under the
+#  terms of the GNU General Public License as published by the Free Software
+#  Foundation; either version 3, or (at your option) any later version.
+
+#  GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+#  WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+#  A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+#  You should have received a copy of the GNU General Public License along with
+#  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+
+#
+#, fuzzy
+msgid ""
+msgstr ""
+"Project-Id-Version: Taler Wallet\n"
+"Report-Msgid-Bugs-To: taler@gnu.org\n"
+"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
+"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
+"Language-Team: LANGUAGE <LL@li.org>\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
diff --git a/packages/merchant-backend-ui/src/i18n/strings-prelude b/packages/merchant-backend-ui/src/i18n/strings-prelude
new file mode 100644
index 000000000..cca13afad
--- /dev/null
+++ b/packages/merchant-backend-ui/src/i18n/strings-prelude
@@ -0,0 +1,19 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/*eslint quote-props: ["error", "consistent"]*/
+export const strings: {[s: string]: any} = {};
+
diff --git a/packages/merchant-backend-ui/src/i18n/strings.ts b/packages/merchant-backend-ui/src/i18n/strings.ts
new file mode 100644
index 000000000..63e96949a
--- /dev/null
+++ b/packages/merchant-backend-ui/src/i18n/strings.ts
@@ -0,0 +1,3445 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/*eslint quote-props: ["error", "consistent"]*/
+export const strings: {[s: string]: any} = {};
+
+strings['de'] = {
+  "domain": "messages",
+  "locale_data": {
+    "messages": {
+      "": {
+        "domain": "messages",
+        "plural_forms": "nplurals=2; plural=(n != 1);",
+        "lang": ""
+      },
+      "Access denied": [
+        ""
+      ],
+      "Check your token is valid": [
+        ""
+      ],
+      "Couldn't access the server.": [
+        ""
+      ],
+      "Could not infer instance id from url %1$s": [
+        ""
+      ],
+      "HTTP status #%1$s: Server reported a problem": [
+        ""
+      ],
+      "Got message: \"%1$s\" from: %2$s": [
+        ""
+      ],
+      "No default instance": [
+        ""
+      ],
+      "in order to use merchant backoffice, you should create the default instance": [
+        ""
+      ],
+      "Server reported a problem: HTTP status #%1$s": [
+        ""
+      ],
+      "Got message: %1$s from: %2$s": [
+        ""
+      ],
+      "Login required": [
+        ""
+      ],
+      "Please enter your auth token. Token should have \"secret-token:\" and start with Bearer or ApiKey": [
+        ""
+      ],
+      "Confirm": [
+        ""
+      ],
+      "The value %1$s is invalid for a payment url": [
+        ""
+      ],
+      "pick a date": [
+        ""
+      ],
+      "clear": [
+        ""
+      ],
+      "never": [
+        ""
+      ],
+      "Image should be smaller than 1 MB": [
+        ""
+      ],
+      "Country": [
+        ""
+      ],
+      "Address": [
+        ""
+      ],
+      "Building number": [
+        ""
+      ],
+      "Building name": [
+        ""
+      ],
+      "Street": [
+        ""
+      ],
+      "Post code": [
+        ""
+      ],
+      "Town location": [
+        ""
+      ],
+      "Town": [
+        ""
+      ],
+      "District": [
+        ""
+      ],
+      "Country subdivision": [
+        ""
+      ],
+      "Product id": [
+        ""
+      ],
+      "Description": [
+        ""
+      ],
+      "Name": [
+        ""
+      ],
+      "loading...": [
+        ""
+      ],
+      "no products found": [
+        ""
+      ],
+      "no results": [
+        ""
+      ],
+      "Deleting": [
+        ""
+      ],
+      "Changing": [
+        ""
+      ],
+      "Manage token": [
+        ""
+      ],
+      "Update": [
+        ""
+      ],
+      "Remove": [
+        ""
+      ],
+      "Cancel": [
+        ""
+      ],
+      "Manage stock": [
+        ""
+      ],
+      "Infinite": [
+        ""
+      ],
+      "lost cannot be greater that current + incoming (max %1$s)": [
+        ""
+      ],
+      "current stock will change from %1$s to %2$s": [
+        ""
+      ],
+      "current stock will stay at %1$s": [
+        ""
+      ],
+      "Incoming": [
+        ""
+      ],
+      "Lost": [
+        ""
+      ],
+      "Current": [
+        ""
+      ],
+      "without stock": [
+        ""
+      ],
+      "Next restock": [
+        ""
+      ],
+      "Delivery address": [
+        ""
+      ],
+      "this product has no taxes": [
+        ""
+      ],
+      "Amount": [
+        ""
+      ],
+      "currency and value separated with colon": [
+        ""
+      ],
+      "Add": [
+        ""
+      ],
+      "Instance": [
+        ""
+      ],
+      "Settings": [
+        ""
+      ],
+      "Orders": [
+        ""
+      ],
+      "Products": [
+        ""
+      ],
+      "Transfers": [
+        ""
+      ],
+      "Connection": [
+        ""
+      ],
+      "Instances": [
+        ""
+      ],
+      "New": [
+        ""
+      ],
+      "List": [
+        ""
+      ],
+      "Log out": [
+        ""
+      ],
+      "Clear": [
+        ""
+      ],
+      "should be the same": [
+        ""
+      ],
+      "cannot be the same as before": [
+        ""
+      ],
+      "You are updating the authorization token from instance %1$s with id %2$s": [
+        ""
+      ],
+      "Old token": [
+        ""
+      ],
+      "New token": [
+        ""
+      ],
+      "Clearing the auth token will mean public access to the instance": [
+        ""
+      ],
+      "ID": [
+        ""
+      ],
+      "Image": [
+        ""
+      ],
+      "Unit": [
+        ""
+      ],
+      "Price": [
+        ""
+      ],
+      "Stock": [
+        ""
+      ],
+      "Taxes": [
+        ""
+      ],
+      "Server not found": [
+        ""
+      ],
+      "Couldn't access the server": [
+        ""
+      ],
+      "Got message %1$s from %2$s": [
+        ""
+      ],
+      "Unexpected Error": [
+        ""
+      ],
+      "Auth token": [
+        ""
+      ],
+      "Account address": [
+        ""
+      ],
+      "Default max deposit fee": [
+        ""
+      ],
+      "Default max wire fee": [
+        ""
+      ],
+      "Default wire fee amortization": [
+        ""
+      ],
+      "Jurisdiction": [
+        ""
+      ],
+      "Default pay delay": [
+        ""
+      ],
+      "Default wire transfer delay": [
+        ""
+      ],
+      "could not create instance": [
+        ""
+      ],
+      "Delete": [
+        ""
+      ],
+      "Edit": [
+        ""
+      ],
+      "There is no instances yet, add more pressing the + sign": [
+        ""
+      ],
+      "Inventory products": [
+        ""
+      ],
+      "Total price": [
+        ""
+      ],
+      "Total tax": [
+        ""
+      ],
+      "Order price": [
+        ""
+      ],
+      "Net": [
+        ""
+      ],
+      "Summary": [
+        ""
+      ],
+      "Payments options": [
+        ""
+      ],
+      "Auto refund deadline": [
+        ""
+      ],
+      "Refund deadline": [
+        ""
+      ],
+      "Pay deadline": [
+        ""
+      ],
+      "Delivery date": [
+        ""
+      ],
+      "Location": [
+        ""
+      ],
+      "Max fee": [
+        ""
+      ],
+      "Max wire fee": [
+        ""
+      ],
+      "Wire fee amortization": [
+        ""
+      ],
+      "Fullfilment url": [
+        ""
+      ],
+      "Extra information": [
+        ""
+      ],
+      "select a product first": [
+        ""
+      ],
+      "should be greater than 0": [
+        ""
+      ],
+      "cannot be greater than current stock and quantity previously added. max: %1$s": [
+        ""
+      ],
+      "cannot be greater than current stock %1$s": [
+        ""
+      ],
+      "Quantity": [
+        ""
+      ],
+      "Order": [
+        ""
+      ],
+      "claimed": [
+        ""
+      ],
+      "copy url": [
+        ""
+      ],
+      "pay at": [
+        ""
+      ],
+      "created at": [
+        ""
+      ],
+      "Timeline": [
+        ""
+      ],
+      "Payment details": [
+        ""
+      ],
+      "Order status": [
+        ""
+      ],
+      "Product list": [
+        ""
+      ],
+      "paid": [
+        ""
+      ],
+      "wired": [
+        ""
+      ],
+      "refunded": [
+        ""
+      ],
+      "refund": [
+        ""
+      ],
+      "Refunded amount": [
+        ""
+      ],
+      "Deposit total": [
+        ""
+      ],
+      "unpaid": [
+        ""
+      ],
+      "Order status URL": [
+        ""
+      ],
+      "Pay URI": [
+        ""
+      ],
+      "Unknown order status. This is an error, please contact the administrator.": [
+        ""
+      ],
+      "refund created successfully": [
+        ""
+      ],
+      "could not create the refund": [
+        ""
+      ],
+      "load newer orders": [
+        ""
+      ],
+      "Date": [
+        ""
+      ],
+      "Refund": [
+        ""
+      ],
+      "load older orders": [
+        ""
+      ],
+      "No orders has been found": [
+        ""
+      ],
+      "date": [
+        ""
+      ],
+      "amount": [
+        ""
+      ],
+      "reason": [
+        ""
+      ],
+      "Max refundable:": [
+        ""
+      ],
+      "Reason": [
+        ""
+      ],
+      "duplicated": [
+        ""
+      ],
+      "requested by the customer": [
+        ""
+      ],
+      "other": [
+        ""
+      ],
+      "go to order id": [
+        ""
+      ],
+      "Paid": [
+        ""
+      ],
+      "Refunded": [
+        ""
+      ],
+      "Not wired": [
+        ""
+      ],
+      "All": [
+        ""
+      ],
+      "could not create product": [
+        ""
+      ],
+      "Sell": [
+        ""
+      ],
+      "Profit": [
+        ""
+      ],
+      "Sold": [
+        ""
+      ],
+      "product updated successfully": [
+        ""
+      ],
+      "could not update the product": [
+        ""
+      ],
+      "product delete successfully": [
+        ""
+      ],
+      "could not delete the product": [
+        ""
+      ],
+      "Tips": [
+        ""
+      ],
+      "Committed amount": [
+        ""
+      ],
+      "Exchange initial amount": [
+        ""
+      ],
+      "Merchant initial amount": [
+        ""
+      ],
+      "There is no tips yet, add more pressing the + sign": [
+        ""
+      ],
+      "cannot be empty": [
+        ""
+      ],
+      "check the id, doest look valid": [
+        ""
+      ],
+      "should have 52 characters, current %1$s": [
+        ""
+      ],
+      "URL doesn't have the right format": [
+        ""
+      ],
+      "Transfer ID": [
+        ""
+      ],
+      "Account Address": [
+        ""
+      ],
+      "Exchange URL": [
+        ""
+      ],
+      "could not inform transfer": [
+        ""
+      ],
+      "load newer transfers": [
+        ""
+      ],
+      "Credit": [
+        ""
+      ],
+      "Confirmed": [
+        ""
+      ],
+      "Verified": [
+        ""
+      ],
+      "Executed at": [
+        ""
+      ],
+      "yes": [
+        ""
+      ],
+      "no": [
+        ""
+      ],
+      "unknown": [
+        ""
+      ],
+      "load older transfers": [
+        ""
+      ],
+      "There is no transfer yet, add more pressing the + sign": [
+        ""
+      ]
+    }
+  }
+};
+
+strings['en'] = {
+  "domain": "messages",
+  "locale_data": {
+    "messages": {
+      "": {
+        "domain": "messages",
+        "plural_forms": "nplurals=2; plural=(n != 1);",
+        "lang": ""
+      },
+      "Access denied": [
+        ""
+      ],
+      "Check your token is valid": [
+        ""
+      ],
+      "Couldn't access the server.": [
+        ""
+      ],
+      "Could not infer instance id from url %1$s": [
+        ""
+      ],
+      "HTTP status #%1$s: Server reported a problem": [
+        ""
+      ],
+      "Got message: \"%1$s\" from: %2$s": [
+        ""
+      ],
+      "No default instance": [
+        ""
+      ],
+      "in order to use merchant backoffice, you should create the default instance": [
+        ""
+      ],
+      "Server reported a problem: HTTP status #%1$s": [
+        ""
+      ],
+      "Got message: %1$s from: %2$s": [
+        ""
+      ],
+      "Login required": [
+        ""
+      ],
+      "Please enter your auth token. Token should have \"secret-token:\" and start with Bearer or ApiKey": [
+        ""
+      ],
+      "Confirm": [
+        ""
+      ],
+      "The value %1$s is invalid for a payment url": [
+        ""
+      ],
+      "pick a date": [
+        ""
+      ],
+      "clear": [
+        ""
+      ],
+      "never": [
+        ""
+      ],
+      "Image should be smaller than 1 MB": [
+        ""
+      ],
+      "Country": [
+        ""
+      ],
+      "Address": [
+        ""
+      ],
+      "Building number": [
+        ""
+      ],
+      "Building name": [
+        ""
+      ],
+      "Street": [
+        ""
+      ],
+      "Post code": [
+        ""
+      ],
+      "Town location": [
+        ""
+      ],
+      "Town": [
+        ""
+      ],
+      "District": [
+        ""
+      ],
+      "Country subdivision": [
+        ""
+      ],
+      "Product id": [
+        ""
+      ],
+      "Description": [
+        ""
+      ],
+      "Name": [
+        ""
+      ],
+      "loading...": [
+        ""
+      ],
+      "no products found": [
+        ""
+      ],
+      "no results": [
+        ""
+      ],
+      "Deleting": [
+        ""
+      ],
+      "Changing": [
+        ""
+      ],
+      "Manage token": [
+        ""
+      ],
+      "Update": [
+        ""
+      ],
+      "Remove": [
+        ""
+      ],
+      "Cancel": [
+        ""
+      ],
+      "Manage stock": [
+        ""
+      ],
+      "Infinite": [
+        ""
+      ],
+      "lost cannot be greater that current + incoming (max %1$s)": [
+        ""
+      ],
+      "current stock will change from %1$s to %2$s": [
+        ""
+      ],
+      "current stock will stay at %1$s": [
+        ""
+      ],
+      "Incoming": [
+        ""
+      ],
+      "Lost": [
+        ""
+      ],
+      "Current": [
+        ""
+      ],
+      "without stock": [
+        ""
+      ],
+      "Next restock": [
+        ""
+      ],
+      "Delivery address": [
+        ""
+      ],
+      "this product has no taxes": [
+        ""
+      ],
+      "Amount": [
+        ""
+      ],
+      "currency and value separated with colon": [
+        ""
+      ],
+      "Add": [
+        ""
+      ],
+      "Instance": [
+        ""
+      ],
+      "Settings": [
+        ""
+      ],
+      "Orders": [
+        ""
+      ],
+      "Products": [
+        ""
+      ],
+      "Transfers": [
+        ""
+      ],
+      "Connection": [
+        ""
+      ],
+      "Instances": [
+        ""
+      ],
+      "New": [
+        ""
+      ],
+      "List": [
+        ""
+      ],
+      "Log out": [
+        ""
+      ],
+      "Clear": [
+        ""
+      ],
+      "should be the same": [
+        ""
+      ],
+      "cannot be the same as before": [
+        ""
+      ],
+      "You are updating the authorization token from instance %1$s with id %2$s": [
+        ""
+      ],
+      "Old token": [
+        ""
+      ],
+      "New token": [
+        ""
+      ],
+      "Clearing the auth token will mean public access to the instance": [
+        ""
+      ],
+      "ID": [
+        ""
+      ],
+      "Image": [
+        ""
+      ],
+      "Unit": [
+        ""
+      ],
+      "Price": [
+        ""
+      ],
+      "Stock": [
+        ""
+      ],
+      "Taxes": [
+        ""
+      ],
+      "Server not found": [
+        ""
+      ],
+      "Couldn't access the server": [
+        ""
+      ],
+      "Got message %1$s from %2$s": [
+        ""
+      ],
+      "Unexpected Error": [
+        ""
+      ],
+      "Auth token": [
+        ""
+      ],
+      "Account address": [
+        ""
+      ],
+      "Default max deposit fee": [
+        ""
+      ],
+      "Default max wire fee": [
+        ""
+      ],
+      "Default wire fee amortization": [
+        ""
+      ],
+      "Jurisdiction": [
+        ""
+      ],
+      "Default pay delay": [
+        ""
+      ],
+      "Default wire transfer delay": [
+        ""
+      ],
+      "could not create instance": [
+        ""
+      ],
+      "Delete": [
+        ""
+      ],
+      "Edit": [
+        ""
+      ],
+      "There is no instances yet, add more pressing the + sign": [
+        ""
+      ],
+      "Inventory products": [
+        ""
+      ],
+      "Total price": [
+        ""
+      ],
+      "Total tax": [
+        ""
+      ],
+      "Order price": [
+        ""
+      ],
+      "Net": [
+        ""
+      ],
+      "Summary": [
+        ""
+      ],
+      "Payments options": [
+        ""
+      ],
+      "Auto refund deadline": [
+        ""
+      ],
+      "Refund deadline": [
+        ""
+      ],
+      "Pay deadline": [
+        ""
+      ],
+      "Delivery date": [
+        ""
+      ],
+      "Location": [
+        ""
+      ],
+      "Max fee": [
+        ""
+      ],
+      "Max wire fee": [
+        ""
+      ],
+      "Wire fee amortization": [
+        ""
+      ],
+      "Fullfilment url": [
+        ""
+      ],
+      "Extra information": [
+        ""
+      ],
+      "select a product first": [
+        ""
+      ],
+      "should be greater than 0": [
+        ""
+      ],
+      "cannot be greater than current stock and quantity previously added. max: %1$s": [
+        ""
+      ],
+      "cannot be greater than current stock %1$s": [
+        ""
+      ],
+      "Quantity": [
+        ""
+      ],
+      "Order": [
+        ""
+      ],
+      "claimed": [
+        ""
+      ],
+      "copy url": [
+        ""
+      ],
+      "pay at": [
+        ""
+      ],
+      "created at": [
+        ""
+      ],
+      "Timeline": [
+        ""
+      ],
+      "Payment details": [
+        ""
+      ],
+      "Order status": [
+        ""
+      ],
+      "Product list": [
+        ""
+      ],
+      "paid": [
+        ""
+      ],
+      "wired": [
+        ""
+      ],
+      "refunded": [
+        ""
+      ],
+      "refund": [
+        ""
+      ],
+      "Refunded amount": [
+        ""
+      ],
+      "Deposit total": [
+        ""
+      ],
+      "unpaid": [
+        ""
+      ],
+      "Order status URL": [
+        ""
+      ],
+      "Pay URI": [
+        ""
+      ],
+      "Unknown order status. This is an error, please contact the administrator.": [
+        ""
+      ],
+      "refund created successfully": [
+        ""
+      ],
+      "could not create the refund": [
+        ""
+      ],
+      "load newer orders": [
+        ""
+      ],
+      "Date": [
+        ""
+      ],
+      "Refund": [
+        ""
+      ],
+      "load older orders": [
+        ""
+      ],
+      "No orders has been found": [
+        ""
+      ],
+      "date": [
+        ""
+      ],
+      "amount": [
+        ""
+      ],
+      "reason": [
+        ""
+      ],
+      "Max refundable:": [
+        ""
+      ],
+      "Reason": [
+        ""
+      ],
+      "duplicated": [
+        ""
+      ],
+      "requested by the customer": [
+        ""
+      ],
+      "other": [
+        ""
+      ],
+      "go to order id": [
+        ""
+      ],
+      "Paid": [
+        ""
+      ],
+      "Refunded": [
+        ""
+      ],
+      "Not wired": [
+        ""
+      ],
+      "All": [
+        ""
+      ],
+      "could not create product": [
+        ""
+      ],
+      "Sell": [
+        ""
+      ],
+      "Profit": [
+        ""
+      ],
+      "Sold": [
+        ""
+      ],
+      "product updated successfully": [
+        ""
+      ],
+      "could not update the product": [
+        ""
+      ],
+      "product delete successfully": [
+        ""
+      ],
+      "could not delete the product": [
+        ""
+      ],
+      "Tips": [
+        ""
+      ],
+      "Committed amount": [
+        ""
+      ],
+      "Exchange initial amount": [
+        ""
+      ],
+      "Merchant initial amount": [
+        ""
+      ],
+      "There is no tips yet, add more pressing the + sign": [
+        ""
+      ],
+      "cannot be empty": [
+        ""
+      ],
+      "check the id, doest look valid": [
+        ""
+      ],
+      "should have 52 characters, current %1$s": [
+        ""
+      ],
+      "URL doesn't have the right format": [
+        ""
+      ],
+      "Transfer ID": [
+        ""
+      ],
+      "Account Address": [
+        ""
+      ],
+      "Exchange URL": [
+        ""
+      ],
+      "could not inform transfer": [
+        ""
+      ],
+      "load newer transfers": [
+        ""
+      ],
+      "Credit": [
+        ""
+      ],
+      "Confirmed": [
+        ""
+      ],
+      "Verified": [
+        ""
+      ],
+      "Executed at": [
+        ""
+      ],
+      "yes": [
+        ""
+      ],
+      "no": [
+        ""
+      ],
+      "unknown": [
+        ""
+      ],
+      "load older transfers": [
+        ""
+      ],
+      "There is no transfer yet, add more pressing the + sign": [
+        ""
+      ]
+    }
+  }
+};
+
+strings['es'] = {
+  "domain": "messages",
+  "locale_data": {
+    "messages": {
+      "": {
+        "domain": "messages",
+        "plural_forms": "nplurals=2; plural=(n != 1);",
+        "lang": ""
+      },
+      "Access denied": [
+        "Acceso denegado"
+      ],
+      "Check your token is valid": [
+        "Verifica que el token sea valido"
+      ],
+      "Couldn't access the server.": [
+        "No se pudo acceder al servidor"
+      ],
+      "Could not infer instance id from url %1$s": [
+        "No se pudo inferir el id de la instancia con la url %1$s"
+      ],
+      "HTTP status #%1$s: Server reported a problem": [
+        "HTTP status #%1$s: Servidor reporto un problema"
+      ],
+      "Got message: \"%1$s\" from: %2$s": [
+        "Recivimos el mensaje %1$s desde %2$s"
+      ],
+      "No default instance": [
+        "Sin instancia default"
+      ],
+      "in order to use merchant backoffice, you should create the default instance": [
+        "para usar el merchant backoffice, debería crear la instancia default"
+      ],
+      "Server reported a problem: HTTP status #%1$s": [
+        "Servidir reporto un problema: HTTP status #%1$s"
+      ],
+      "Got message: %1$s from: %2$s": [
+        "Recivimos el mensaje %1$s desde %2$s"
+      ],
+      "Login required": [
+        "Login necesario"
+      ],
+      "Please enter your auth token. Token should have \"secret-token:\" and start with Bearer or ApiKey": [
+        "Por favor ingrese su token de autorización. El token debe tener \"secret-token\" y comenzar con Bearer o ApiKey"
+      ],
+      "Confirm": [
+        "Confirmar"
+      ],
+      "The value %1$s is invalid for a payment url": [
+        "El valor %1$s es invalido para una URL de pago"
+      ],
+      "pick a date": [
+        "elegir una fecha"
+      ],
+      "clear": [
+        "Limpiar"
+      ],
+      "never": [
+        "nunca"
+      ],
+      "Image should be smaller than 1 MB": [
+        "La imagen debe ser mas chica que 1 MB"
+      ],
+      "Country": [
+        "País"
+      ],
+      "Address": [
+        "Dirección"
+      ],
+      "Building number": [
+        "Número de edificio"
+      ],
+      "Building name": [
+        "Nombre de edificio"
+      ],
+      "Street": [
+        "Calle"
+      ],
+      "Post code": [
+        "Código postal"
+      ],
+      "Town location": [
+        "Ubicación de ciudad"
+      ],
+      "Town": [
+        "Ciudad"
+      ],
+      "District": [
+        "Distrito"
+      ],
+      "Country subdivision": [
+        "Provincia"
+      ],
+      "Product id": [
+        "Id de producto"
+      ],
+      "Description": [
+        "Descripcion"
+      ],
+      "Name": [
+        "Nombre"
+      ],
+      "loading...": [
+        "Cargando..."
+      ],
+      "no products found": [
+        "No se encontraron productos"
+      ],
+      "no results": [
+        "Sin resultados"
+      ],
+      "Deleting": [
+        "Borrando"
+      ],
+      "Changing": [
+        "Cambiando"
+      ],
+      "Manage token": [
+        "Administrar token"
+      ],
+      "Update": [
+        "Actualizar"
+      ],
+      "Remove": [
+        "Eliminar"
+      ],
+      "Cancel": [
+        "Cancelar"
+      ],
+      "Manage stock": [
+        "Administrar stock"
+      ],
+      "Infinite": [
+        "Inifinito"
+      ],
+      "lost cannot be greater that current + incoming (max %1$s)": [
+        "no puede ser mayor al stock actual %1$s"
+      ],
+      "current stock will change from %1$s to %2$s": [
+        "stock actual cambiará desde %1$s a %2$s"
+      ],
+      "current stock will stay at %1$s": [
+        "stock actual seguirá en %1$s"
+      ],
+      "Incoming": [
+        "Ingresando"
+      ],
+      "Lost": [
+        "Perdido"
+      ],
+      "Current": [
+        "Actual"
+      ],
+      "without stock": [
+        "sin stock"
+      ],
+      "Next restock": [
+        "Próximo reabastecimiento"
+      ],
+      "Delivery address": [
+        "Dirección de entrega"
+      ],
+      "this product has no taxes": [
+        "este producto no tiene impuestos"
+      ],
+      "Amount": [
+        "Monto"
+      ],
+      "currency and value separated with colon": [
+        "Moneda y valor separado por dos puntos"
+      ],
+      "Add": [
+        "Agregar"
+      ],
+      "Instance": [
+        "Instancia"
+      ],
+      "Settings": [
+        "Configuración"
+      ],
+      "Orders": [
+        "Ordenes"
+      ],
+      "Products": [
+        "Productos"
+      ],
+      "Transfers": [
+        "Transferencias"
+      ],
+      "Connection": [
+        "Conexión"
+      ],
+      "Instances": [
+        "Instancias"
+      ],
+      "New": [
+        "Nuevo"
+      ],
+      "List": [
+        "Lista"
+      ],
+      "Log out": [
+        "Salir"
+      ],
+      "Clear": [
+        "Limpiar"
+      ],
+      "should be the same": [
+        "deberían ser iguales"
+      ],
+      "cannot be the same as before": [
+        "no puede ser igual al anterior"
+      ],
+      "You are updating the authorization token from instance %1$s with id %2$s": [
+        "Está actualizando el token de autorización para la instancia %1$s con id %2$s"
+      ],
+      "Old token": [
+        "Viejo token"
+      ],
+      "New token": [
+        "Nuevo token"
+      ],
+      "Clearing the auth token will mean public access to the instance": [
+        "Limpiar el token de autorización significa acceso publico a la instancia"
+      ],
+      "ID": [
+        "ID"
+      ],
+      "Image": [
+        "Imagen"
+      ],
+      "Unit": [
+        "Unidad"
+      ],
+      "Price": [
+        "Precio"
+      ],
+      "Stock": [
+        "Stock"
+      ],
+      "Taxes": [
+        "Impuesto"
+      ],
+      "Server not found": [
+        "Servidor no encontrado"
+      ],
+      "Couldn't access the server": [
+        "No se pudo aceder al servidor"
+      ],
+      "Got message %1$s from %2$s": [
+        "Recivimos el mensaje %1$s desde %2$s"
+      ],
+      "Unexpected Error": [
+        "Error inesperado"
+      ],
+      "Auth token": [
+        "Token de autorización"
+      ],
+      "Account address": [
+        "Dirección de cuenta"
+      ],
+      "Default max deposit fee": [
+        "Impuesto máximo de deposito por omisión"
+      ],
+      "Default max wire fee": [
+        "Impuesto máximo de transferencia por omisión"
+      ],
+      "Default wire fee amortization": [
+        "Amortización de impuesto de transferencia por omisión"
+      ],
+      "Jurisdiction": [
+        "Jurisdicción"
+      ],
+      "Default pay delay": [
+        "Retrazo de pago por omisión"
+      ],
+      "Default wire transfer delay": [
+        "Retrazo de transferencia por omisión"
+      ],
+      "could not create instance": [
+        "no se pudo crear la instancia"
+      ],
+      "Delete": [
+        "Borrando"
+      ],
+      "Edit": [
+        ""
+      ],
+      "There is no instances yet, add more pressing the + sign": [
+        "No hay instancias todavían, agregue mas presionando el signo +"
+      ],
+      "Inventory products": [
+        "Productos de inventario"
+      ],
+      "Total price": [
+        "Precio total"
+      ],
+      "Total tax": [
+        "Impuesto total"
+      ],
+      "Order price": [
+        "Precio de la orden"
+      ],
+      "Net": [
+        "Neto"
+      ],
+      "Summary": [
+        "Resumen"
+      ],
+      "Payments options": [
+        "Opciones de pago"
+      ],
+      "Auto refund deadline": [
+        "Plazo de reembolso automático"
+      ],
+      "Refund deadline": [
+        "Plazo de reembolso"
+      ],
+      "Pay deadline": [
+        "Plazo de pago"
+      ],
+      "Delivery date": [
+        "Fecha de entrega"
+      ],
+      "Location": [
+        "Ubicación"
+      ],
+      "Max fee": [
+        "Impuesto máximo"
+      ],
+      "Max wire fee": [
+        "Impuesto de transferencia máximo"
+      ],
+      "Wire fee amortization": [
+        "Amortización de impuesto de transferencia"
+      ],
+      "Fullfilment url": [
+        "URL de completitud"
+      ],
+      "Extra information": [
+        "Información extra"
+      ],
+      "select a product first": [
+        "seleccione un producto primero"
+      ],
+      "should be greater than 0": [
+        "La imagen debe ser mas chica que 1 MB"
+      ],
+      "cannot be greater than current stock and quantity previously added. max: %1$s": [
+        "no puede ser mayor al stock actual y la cantidad previamente agregada. máximo: %1$s"
+      ],
+      "cannot be greater than current stock %1$s": [
+        "no puede ser mayor al stock actual %1$s"
+      ],
+      "Quantity": [
+        "Cantidad"
+      ],
+      "Order": [
+        "Orden"
+      ],
+      "claimed": [
+        "reclamado"
+      ],
+      "copy url": [
+        "copiar url"
+      ],
+      "pay at": [
+        "pagar en"
+      ],
+      "created at": [
+        "creado"
+      ],
+      "Timeline": [
+        "Cronología"
+      ],
+      "Payment details": [
+        "Detalles de pago"
+      ],
+      "Order status": [
+        "Estado de orden"
+      ],
+      "Product list": [
+        "Lista de producto"
+      ],
+      "paid": [
+        "pagados"
+      ],
+      "wired": [
+        "transferido"
+      ],
+      "refunded": [
+        "reembolzado"
+      ],
+      "refund": [
+        "reembolzar"
+      ],
+      "Refunded amount": [
+        "Monto reembolzado"
+      ],
+      "Deposit total": [
+        "Total depositado"
+      ],
+      "unpaid": [
+        "impago"
+      ],
+      "Order status URL": [
+        "URL de estado de orden"
+      ],
+      "Pay URI": [
+        "URI de pago"
+      ],
+      "Unknown order status. This is an error, please contact the administrator.": [
+        "Estado de orden desconocido. Esto es un error, por favor contacte a su administrador"
+      ],
+      "refund created successfully": [
+        "reembolzo creado satisfactoriamente"
+      ],
+      "could not create the refund": [
+        "No se pudo aceder al servidor"
+      ],
+      "load newer orders": [
+        "cargar nuevas ordenes"
+      ],
+      "Date": [
+        "Fecha"
+      ],
+      "Refund": [
+        "Reembolzar"
+      ],
+      "load older orders": [
+        "cargar viejas ordenes"
+      ],
+      "No orders has been found": [
+        "No se enconraron ordenes"
+      ],
+      "date": [
+        "fecha"
+      ],
+      "amount": [
+        "monto"
+      ],
+      "reason": [
+        "razón"
+      ],
+      "Max refundable:": [
+        "Máximo reembolzable:"
+      ],
+      "Reason": [
+        "Razón"
+      ],
+      "duplicated": [
+        "duplicado"
+      ],
+      "requested by the customer": [
+        "pedido por el consumidor"
+      ],
+      "other": [
+        "otro"
+      ],
+      "go to order id": [
+        "ir a id de orden"
+      ],
+      "Paid": [
+        "Pagado"
+      ],
+      "Refunded": [
+        "Reembolzado"
+      ],
+      "Not wired": [
+        "No transferido"
+      ],
+      "All": [
+        "Todo"
+      ],
+      "could not create product": [
+        "no se pudo crear el producto"
+      ],
+      "Sell": [
+        "Venta"
+      ],
+      "Profit": [
+        "Ganancia"
+      ],
+      "Sold": [
+        "Vendido"
+      ],
+      "product updated successfully": [
+        "producto actualizado correctamente"
+      ],
+      "could not update the product": [
+        "no se pudo actualizar el producto"
+      ],
+      "product delete successfully": [
+        "producto fue eliminado correctamente"
+      ],
+      "could not delete the product": [
+        "no se pudo eliminar el producto"
+      ],
+      "Tips": [
+        "Propinas"
+      ],
+      "Committed amount": [
+        ""
+      ],
+      "Exchange initial amount": [
+        ""
+      ],
+      "Merchant initial amount": [
+        ""
+      ],
+      "There is no tips yet, add more pressing the + sign": [
+        "No hay propinas todavía, agregar mas presionando el signo +"
+      ],
+      "cannot be empty": [
+        "no puede ser vacío"
+      ],
+      "check the id, doest look valid": [
+        "verificar el id, no parece válido"
+      ],
+      "should have 52 characters, current %1$s": [
+        "debería tener 52 caracteres, actualmente %1$s"
+      ],
+      "URL doesn't have the right format": [
+        "La URL no tiene el formato correcto"
+      ],
+      "Transfer ID": [
+        "Transferencias"
+      ],
+      "Account Address": [
+        "Dirección de cuenta"
+      ],
+      "Exchange URL": [
+        "URL del Exchange"
+      ],
+      "could not inform transfer": [
+        "no se pudo crear la instancia"
+      ],
+      "load newer transfers": [
+        "cargar nuevas ordenes"
+      ],
+      "Credit": [
+        "Crédito"
+      ],
+      "Confirmed": [
+        "Confirmar"
+      ],
+      "Verified": [
+        "Verificado"
+      ],
+      "Executed at": [
+        "creado"
+      ],
+      "yes": [
+        "si"
+      ],
+      "no": [
+        "no"
+      ],
+      "unknown": [
+        "desconocido"
+      ],
+      "load older transfers": [
+        "cargar viejas transferencias"
+      ],
+      "There is no transfer yet, add more pressing the + sign": [
+        "No hay transferencias todavía, agregar mas presionando el signo +"
+      ]
+    }
+  }
+};
+
+strings['fr'] = {
+  "domain": "messages",
+  "locale_data": {
+    "messages": {
+      "": {
+        "domain": "messages",
+        "plural_forms": "nplurals=2; plural=(n != 1);",
+        "lang": ""
+      },
+      "Access denied": [
+        ""
+      ],
+      "Check your token is valid": [
+        ""
+      ],
+      "Couldn't access the server.": [
+        ""
+      ],
+      "Could not infer instance id from url %1$s": [
+        ""
+      ],
+      "HTTP status #%1$s: Server reported a problem": [
+        ""
+      ],
+      "Got message: \"%1$s\" from: %2$s": [
+        ""
+      ],
+      "No default instance": [
+        ""
+      ],
+      "in order to use merchant backoffice, you should create the default instance": [
+        ""
+      ],
+      "Server reported a problem: HTTP status #%1$s": [
+        ""
+      ],
+      "Got message: %1$s from: %2$s": [
+        ""
+      ],
+      "Login required": [
+        ""
+      ],
+      "Please enter your auth token. Token should have \"secret-token:\" and start with Bearer or ApiKey": [
+        ""
+      ],
+      "Confirm": [
+        ""
+      ],
+      "The value %1$s is invalid for a payment url": [
+        ""
+      ],
+      "pick a date": [
+        ""
+      ],
+      "clear": [
+        ""
+      ],
+      "never": [
+        ""
+      ],
+      "Image should be smaller than 1 MB": [
+        ""
+      ],
+      "Country": [
+        ""
+      ],
+      "Address": [
+        ""
+      ],
+      "Building number": [
+        ""
+      ],
+      "Building name": [
+        ""
+      ],
+      "Street": [
+        ""
+      ],
+      "Post code": [
+        ""
+      ],
+      "Town location": [
+        ""
+      ],
+      "Town": [
+        ""
+      ],
+      "District": [
+        ""
+      ],
+      "Country subdivision": [
+        ""
+      ],
+      "Product id": [
+        ""
+      ],
+      "Description": [
+        ""
+      ],
+      "Name": [
+        ""
+      ],
+      "loading...": [
+        ""
+      ],
+      "no products found": [
+        ""
+      ],
+      "no results": [
+        ""
+      ],
+      "Deleting": [
+        ""
+      ],
+      "Changing": [
+        ""
+      ],
+      "Manage token": [
+        ""
+      ],
+      "Update": [
+        ""
+      ],
+      "Remove": [
+        ""
+      ],
+      "Cancel": [
+        ""
+      ],
+      "Manage stock": [
+        ""
+      ],
+      "Infinite": [
+        ""
+      ],
+      "lost cannot be greater that current + incoming (max %1$s)": [
+        ""
+      ],
+      "current stock will change from %1$s to %2$s": [
+        ""
+      ],
+      "current stock will stay at %1$s": [
+        ""
+      ],
+      "Incoming": [
+        ""
+      ],
+      "Lost": [
+        ""
+      ],
+      "Current": [
+        ""
+      ],
+      "without stock": [
+        ""
+      ],
+      "Next restock": [
+        ""
+      ],
+      "Delivery address": [
+        ""
+      ],
+      "this product has no taxes": [
+        ""
+      ],
+      "Amount": [
+        ""
+      ],
+      "currency and value separated with colon": [
+        ""
+      ],
+      "Add": [
+        ""
+      ],
+      "Instance": [
+        ""
+      ],
+      "Settings": [
+        ""
+      ],
+      "Orders": [
+        ""
+      ],
+      "Products": [
+        ""
+      ],
+      "Transfers": [
+        ""
+      ],
+      "Connection": [
+        ""
+      ],
+      "Instances": [
+        ""
+      ],
+      "New": [
+        ""
+      ],
+      "List": [
+        ""
+      ],
+      "Log out": [
+        ""
+      ],
+      "Clear": [
+        ""
+      ],
+      "should be the same": [
+        ""
+      ],
+      "cannot be the same as before": [
+        ""
+      ],
+      "You are updating the authorization token from instance %1$s with id %2$s": [
+        ""
+      ],
+      "Old token": [
+        ""
+      ],
+      "New token": [
+        ""
+      ],
+      "Clearing the auth token will mean public access to the instance": [
+        ""
+      ],
+      "ID": [
+        ""
+      ],
+      "Image": [
+        ""
+      ],
+      "Unit": [
+        ""
+      ],
+      "Price": [
+        ""
+      ],
+      "Stock": [
+        ""
+      ],
+      "Taxes": [
+        ""
+      ],
+      "Server not found": [
+        ""
+      ],
+      "Couldn't access the server": [
+        ""
+      ],
+      "Got message %1$s from %2$s": [
+        ""
+      ],
+      "Unexpected Error": [
+        ""
+      ],
+      "Auth token": [
+        ""
+      ],
+      "Account address": [
+        ""
+      ],
+      "Default max deposit fee": [
+        ""
+      ],
+      "Default max wire fee": [
+        ""
+      ],
+      "Default wire fee amortization": [
+        ""
+      ],
+      "Jurisdiction": [
+        ""
+      ],
+      "Default pay delay": [
+        ""
+      ],
+      "Default wire transfer delay": [
+        ""
+      ],
+      "could not create instance": [
+        ""
+      ],
+      "Delete": [
+        ""
+      ],
+      "Edit": [
+        ""
+      ],
+      "There is no instances yet, add more pressing the + sign": [
+        ""
+      ],
+      "Inventory products": [
+        ""
+      ],
+      "Total price": [
+        ""
+      ],
+      "Total tax": [
+        ""
+      ],
+      "Order price": [
+        ""
+      ],
+      "Net": [
+        ""
+      ],
+      "Summary": [
+        ""
+      ],
+      "Payments options": [
+        ""
+      ],
+      "Auto refund deadline": [
+        ""
+      ],
+      "Refund deadline": [
+        ""
+      ],
+      "Pay deadline": [
+        ""
+      ],
+      "Delivery date": [
+        ""
+      ],
+      "Location": [
+        ""
+      ],
+      "Max fee": [
+        ""
+      ],
+      "Max wire fee": [
+        ""
+      ],
+      "Wire fee amortization": [
+        ""
+      ],
+      "Fullfilment url": [
+        ""
+      ],
+      "Extra information": [
+        ""
+      ],
+      "select a product first": [
+        ""
+      ],
+      "should be greater than 0": [
+        ""
+      ],
+      "cannot be greater than current stock and quantity previously added. max: %1$s": [
+        ""
+      ],
+      "cannot be greater than current stock %1$s": [
+        ""
+      ],
+      "Quantity": [
+        ""
+      ],
+      "Order": [
+        ""
+      ],
+      "claimed": [
+        ""
+      ],
+      "copy url": [
+        ""
+      ],
+      "pay at": [
+        ""
+      ],
+      "created at": [
+        ""
+      ],
+      "Timeline": [
+        ""
+      ],
+      "Payment details": [
+        ""
+      ],
+      "Order status": [
+        ""
+      ],
+      "Product list": [
+        ""
+      ],
+      "paid": [
+        ""
+      ],
+      "wired": [
+        ""
+      ],
+      "refunded": [
+        ""
+      ],
+      "refund": [
+        ""
+      ],
+      "Refunded amount": [
+        ""
+      ],
+      "Deposit total": [
+        ""
+      ],
+      "unpaid": [
+        ""
+      ],
+      "Order status URL": [
+        ""
+      ],
+      "Pay URI": [
+        ""
+      ],
+      "Unknown order status. This is an error, please contact the administrator.": [
+        ""
+      ],
+      "refund created successfully": [
+        ""
+      ],
+      "could not create the refund": [
+        ""
+      ],
+      "load newer orders": [
+        ""
+      ],
+      "Date": [
+        ""
+      ],
+      "Refund": [
+        ""
+      ],
+      "load older orders": [
+        ""
+      ],
+      "No orders has been found": [
+        ""
+      ],
+      "date": [
+        ""
+      ],
+      "amount": [
+        ""
+      ],
+      "reason": [
+        ""
+      ],
+      "Max refundable:": [
+        ""
+      ],
+      "Reason": [
+        ""
+      ],
+      "duplicated": [
+        ""
+      ],
+      "requested by the customer": [
+        ""
+      ],
+      "other": [
+        ""
+      ],
+      "go to order id": [
+        ""
+      ],
+      "Paid": [
+        ""
+      ],
+      "Refunded": [
+        ""
+      ],
+      "Not wired": [
+        ""
+      ],
+      "All": [
+        ""
+      ],
+      "could not create product": [
+        ""
+      ],
+      "Sell": [
+        ""
+      ],
+      "Profit": [
+        ""
+      ],
+      "Sold": [
+        ""
+      ],
+      "product updated successfully": [
+        ""
+      ],
+      "could not update the product": [
+        ""
+      ],
+      "product delete successfully": [
+        ""
+      ],
+      "could not delete the product": [
+        ""
+      ],
+      "Tips": [
+        ""
+      ],
+      "Committed amount": [
+        ""
+      ],
+      "Exchange initial amount": [
+        ""
+      ],
+      "Merchant initial amount": [
+        ""
+      ],
+      "There is no tips yet, add more pressing the + sign": [
+        ""
+      ],
+      "cannot be empty": [
+        ""
+      ],
+      "check the id, doest look valid": [
+        ""
+      ],
+      "should have 52 characters, current %1$s": [
+        ""
+      ],
+      "URL doesn't have the right format": [
+        ""
+      ],
+      "Transfer ID": [
+        ""
+      ],
+      "Account Address": [
+        ""
+      ],
+      "Exchange URL": [
+        ""
+      ],
+      "could not inform transfer": [
+        ""
+      ],
+      "load newer transfers": [
+        ""
+      ],
+      "Credit": [
+        ""
+      ],
+      "Confirmed": [
+        ""
+      ],
+      "Verified": [
+        ""
+      ],
+      "Executed at": [
+        ""
+      ],
+      "yes": [
+        ""
+      ],
+      "no": [
+        ""
+      ],
+      "unknown": [
+        ""
+      ],
+      "load older transfers": [
+        ""
+      ],
+      "There is no transfer yet, add more pressing the + sign": [
+        ""
+      ]
+    }
+  }
+};
+
+strings['it'] = {
+  "domain": "messages",
+  "locale_data": {
+    "messages": {
+      "": {
+        "domain": "messages",
+        "plural_forms": "nplurals=2; plural=(n != 1);",
+        "lang": ""
+      },
+      "Access denied": [
+        ""
+      ],
+      "Check your token is valid": [
+        ""
+      ],
+      "Couldn't access the server.": [
+        ""
+      ],
+      "Could not infer instance id from url %1$s": [
+        ""
+      ],
+      "HTTP status #%1$s: Server reported a problem": [
+        ""
+      ],
+      "Got message: \"%1$s\" from: %2$s": [
+        ""
+      ],
+      "No default instance": [
+        ""
+      ],
+      "in order to use merchant backoffice, you should create the default instance": [
+        ""
+      ],
+      "Server reported a problem: HTTP status #%1$s": [
+        ""
+      ],
+      "Got message: %1$s from: %2$s": [
+        ""
+      ],
+      "Login required": [
+        ""
+      ],
+      "Please enter your auth token. Token should have \"secret-token:\" and start with Bearer or ApiKey": [
+        ""
+      ],
+      "Confirm": [
+        ""
+      ],
+      "The value %1$s is invalid for a payment url": [
+        ""
+      ],
+      "pick a date": [
+        ""
+      ],
+      "clear": [
+        ""
+      ],
+      "never": [
+        ""
+      ],
+      "Image should be smaller than 1 MB": [
+        ""
+      ],
+      "Country": [
+        ""
+      ],
+      "Address": [
+        ""
+      ],
+      "Building number": [
+        ""
+      ],
+      "Building name": [
+        ""
+      ],
+      "Street": [
+        ""
+      ],
+      "Post code": [
+        ""
+      ],
+      "Town location": [
+        ""
+      ],
+      "Town": [
+        ""
+      ],
+      "District": [
+        ""
+      ],
+      "Country subdivision": [
+        ""
+      ],
+      "Product id": [
+        ""
+      ],
+      "Description": [
+        ""
+      ],
+      "Name": [
+        ""
+      ],
+      "loading...": [
+        ""
+      ],
+      "no products found": [
+        ""
+      ],
+      "no results": [
+        ""
+      ],
+      "Deleting": [
+        ""
+      ],
+      "Changing": [
+        ""
+      ],
+      "Manage token": [
+        ""
+      ],
+      "Update": [
+        ""
+      ],
+      "Remove": [
+        ""
+      ],
+      "Cancel": [
+        ""
+      ],
+      "Manage stock": [
+        ""
+      ],
+      "Infinite": [
+        ""
+      ],
+      "lost cannot be greater that current + incoming (max %1$s)": [
+        ""
+      ],
+      "current stock will change from %1$s to %2$s": [
+        ""
+      ],
+      "current stock will stay at %1$s": [
+        ""
+      ],
+      "Incoming": [
+        ""
+      ],
+      "Lost": [
+        ""
+      ],
+      "Current": [
+        ""
+      ],
+      "without stock": [
+        ""
+      ],
+      "Next restock": [
+        ""
+      ],
+      "Delivery address": [
+        ""
+      ],
+      "this product has no taxes": [
+        ""
+      ],
+      "Amount": [
+        ""
+      ],
+      "currency and value separated with colon": [
+        ""
+      ],
+      "Add": [
+        ""
+      ],
+      "Instance": [
+        ""
+      ],
+      "Settings": [
+        ""
+      ],
+      "Orders": [
+        ""
+      ],
+      "Products": [
+        ""
+      ],
+      "Transfers": [
+        ""
+      ],
+      "Connection": [
+        ""
+      ],
+      "Instances": [
+        ""
+      ],
+      "New": [
+        ""
+      ],
+      "List": [
+        ""
+      ],
+      "Log out": [
+        ""
+      ],
+      "Clear": [
+        ""
+      ],
+      "should be the same": [
+        ""
+      ],
+      "cannot be the same as before": [
+        ""
+      ],
+      "You are updating the authorization token from instance %1$s with id %2$s": [
+        ""
+      ],
+      "Old token": [
+        ""
+      ],
+      "New token": [
+        ""
+      ],
+      "Clearing the auth token will mean public access to the instance": [
+        ""
+      ],
+      "ID": [
+        ""
+      ],
+      "Image": [
+        ""
+      ],
+      "Unit": [
+        ""
+      ],
+      "Price": [
+        ""
+      ],
+      "Stock": [
+        ""
+      ],
+      "Taxes": [
+        ""
+      ],
+      "Server not found": [
+        ""
+      ],
+      "Couldn't access the server": [
+        ""
+      ],
+      "Got message %1$s from %2$s": [
+        ""
+      ],
+      "Unexpected Error": [
+        ""
+      ],
+      "Auth token": [
+        ""
+      ],
+      "Account address": [
+        ""
+      ],
+      "Default max deposit fee": [
+        ""
+      ],
+      "Default max wire fee": [
+        ""
+      ],
+      "Default wire fee amortization": [
+        ""
+      ],
+      "Jurisdiction": [
+        ""
+      ],
+      "Default pay delay": [
+        ""
+      ],
+      "Default wire transfer delay": [
+        ""
+      ],
+      "could not create instance": [
+        ""
+      ],
+      "Delete": [
+        ""
+      ],
+      "Edit": [
+        ""
+      ],
+      "There is no instances yet, add more pressing the + sign": [
+        ""
+      ],
+      "Inventory products": [
+        ""
+      ],
+      "Total price": [
+        ""
+      ],
+      "Total tax": [
+        ""
+      ],
+      "Order price": [
+        ""
+      ],
+      "Net": [
+        ""
+      ],
+      "Summary": [
+        ""
+      ],
+      "Payments options": [
+        ""
+      ],
+      "Auto refund deadline": [
+        ""
+      ],
+      "Refund deadline": [
+        ""
+      ],
+      "Pay deadline": [
+        ""
+      ],
+      "Delivery date": [
+        ""
+      ],
+      "Location": [
+        ""
+      ],
+      "Max fee": [
+        ""
+      ],
+      "Max wire fee": [
+        ""
+      ],
+      "Wire fee amortization": [
+        ""
+      ],
+      "Fullfilment url": [
+        ""
+      ],
+      "Extra information": [
+        ""
+      ],
+      "select a product first": [
+        ""
+      ],
+      "should be greater than 0": [
+        ""
+      ],
+      "cannot be greater than current stock and quantity previously added. max: %1$s": [
+        ""
+      ],
+      "cannot be greater than current stock %1$s": [
+        ""
+      ],
+      "Quantity": [
+        ""
+      ],
+      "Order": [
+        ""
+      ],
+      "claimed": [
+        ""
+      ],
+      "copy url": [
+        ""
+      ],
+      "pay at": [
+        ""
+      ],
+      "created at": [
+        ""
+      ],
+      "Timeline": [
+        ""
+      ],
+      "Payment details": [
+        ""
+      ],
+      "Order status": [
+        ""
+      ],
+      "Product list": [
+        ""
+      ],
+      "paid": [
+        ""
+      ],
+      "wired": [
+        ""
+      ],
+      "refunded": [
+        ""
+      ],
+      "refund": [
+        ""
+      ],
+      "Refunded amount": [
+        ""
+      ],
+      "Deposit total": [
+        ""
+      ],
+      "unpaid": [
+        ""
+      ],
+      "Order status URL": [
+        ""
+      ],
+      "Pay URI": [
+        ""
+      ],
+      "Unknown order status. This is an error, please contact the administrator.": [
+        ""
+      ],
+      "refund created successfully": [
+        ""
+      ],
+      "could not create the refund": [
+        ""
+      ],
+      "load newer orders": [
+        ""
+      ],
+      "Date": [
+        ""
+      ],
+      "Refund": [
+        ""
+      ],
+      "load older orders": [
+        ""
+      ],
+      "No orders has been found": [
+        ""
+      ],
+      "date": [
+        ""
+      ],
+      "amount": [
+        ""
+      ],
+      "reason": [
+        ""
+      ],
+      "Max refundable:": [
+        ""
+      ],
+      "Reason": [
+        ""
+      ],
+      "duplicated": [
+        ""
+      ],
+      "requested by the customer": [
+        ""
+      ],
+      "other": [
+        ""
+      ],
+      "go to order id": [
+        ""
+      ],
+      "Paid": [
+        ""
+      ],
+      "Refunded": [
+        ""
+      ],
+      "Not wired": [
+        ""
+      ],
+      "All": [
+        ""
+      ],
+      "could not create product": [
+        ""
+      ],
+      "Sell": [
+        ""
+      ],
+      "Profit": [
+        ""
+      ],
+      "Sold": [
+        ""
+      ],
+      "product updated successfully": [
+        ""
+      ],
+      "could not update the product": [
+        ""
+      ],
+      "product delete successfully": [
+        ""
+      ],
+      "could not delete the product": [
+        ""
+      ],
+      "Tips": [
+        ""
+      ],
+      "Committed amount": [
+        ""
+      ],
+      "Exchange initial amount": [
+        ""
+      ],
+      "Merchant initial amount": [
+        ""
+      ],
+      "There is no tips yet, add more pressing the + sign": [
+        ""
+      ],
+      "cannot be empty": [
+        ""
+      ],
+      "check the id, doest look valid": [
+        ""
+      ],
+      "should have 52 characters, current %1$s": [
+        ""
+      ],
+      "URL doesn't have the right format": [
+        ""
+      ],
+      "Transfer ID": [
+        ""
+      ],
+      "Account Address": [
+        ""
+      ],
+      "Exchange URL": [
+        ""
+      ],
+      "could not inform transfer": [
+        ""
+      ],
+      "load newer transfers": [
+        ""
+      ],
+      "Credit": [
+        ""
+      ],
+      "Confirmed": [
+        ""
+      ],
+      "Verified": [
+        ""
+      ],
+      "Executed at": [
+        ""
+      ],
+      "yes": [
+        ""
+      ],
+      "no": [
+        ""
+      ],
+      "unknown": [
+        ""
+      ],
+      "load older transfers": [
+        ""
+      ],
+      "There is no transfer yet, add more pressing the + sign": [
+        ""
+      ]
+    }
+  }
+};
+
+strings['sv'] = {
+  "domain": "messages",
+  "locale_data": {
+    "messages": {
+      "": {
+        "domain": "messages",
+        "plural_forms": "nplurals=2; plural=(n != 1);",
+        "lang": ""
+      },
+      "Access denied": [
+        ""
+      ],
+      "Check your token is valid": [
+        ""
+      ],
+      "Couldn't access the server.": [
+        ""
+      ],
+      "Could not infer instance id from url %1$s": [
+        ""
+      ],
+      "HTTP status #%1$s: Server reported a problem": [
+        ""
+      ],
+      "Got message: \"%1$s\" from: %2$s": [
+        ""
+      ],
+      "No default instance": [
+        ""
+      ],
+      "in order to use merchant backoffice, you should create the default instance": [
+        ""
+      ],
+      "Server reported a problem: HTTP status #%1$s": [
+        ""
+      ],
+      "Got message: %1$s from: %2$s": [
+        ""
+      ],
+      "Login required": [
+        ""
+      ],
+      "Please enter your auth token. Token should have \"secret-token:\" and start with Bearer or ApiKey": [
+        ""
+      ],
+      "Confirm": [
+        ""
+      ],
+      "The value %1$s is invalid for a payment url": [
+        ""
+      ],
+      "pick a date": [
+        ""
+      ],
+      "clear": [
+        ""
+      ],
+      "never": [
+        ""
+      ],
+      "Image should be smaller than 1 MB": [
+        ""
+      ],
+      "Country": [
+        ""
+      ],
+      "Address": [
+        ""
+      ],
+      "Building number": [
+        ""
+      ],
+      "Building name": [
+        ""
+      ],
+      "Street": [
+        ""
+      ],
+      "Post code": [
+        ""
+      ],
+      "Town location": [
+        ""
+      ],
+      "Town": [
+        ""
+      ],
+      "District": [
+        ""
+      ],
+      "Country subdivision": [
+        ""
+      ],
+      "Product id": [
+        ""
+      ],
+      "Description": [
+        ""
+      ],
+      "Name": [
+        ""
+      ],
+      "loading...": [
+        ""
+      ],
+      "no products found": [
+        ""
+      ],
+      "no results": [
+        ""
+      ],
+      "Deleting": [
+        ""
+      ],
+      "Changing": [
+        ""
+      ],
+      "Manage token": [
+        ""
+      ],
+      "Update": [
+        ""
+      ],
+      "Remove": [
+        ""
+      ],
+      "Cancel": [
+        ""
+      ],
+      "Manage stock": [
+        ""
+      ],
+      "Infinite": [
+        ""
+      ],
+      "lost cannot be greater that current + incoming (max %1$s)": [
+        ""
+      ],
+      "current stock will change from %1$s to %2$s": [
+        ""
+      ],
+      "current stock will stay at %1$s": [
+        ""
+      ],
+      "Incoming": [
+        ""
+      ],
+      "Lost": [
+        ""
+      ],
+      "Current": [
+        ""
+      ],
+      "without stock": [
+        ""
+      ],
+      "Next restock": [
+        ""
+      ],
+      "Delivery address": [
+        ""
+      ],
+      "this product has no taxes": [
+        ""
+      ],
+      "Amount": [
+        ""
+      ],
+      "currency and value separated with colon": [
+        ""
+      ],
+      "Add": [
+        ""
+      ],
+      "Instance": [
+        ""
+      ],
+      "Settings": [
+        ""
+      ],
+      "Orders": [
+        ""
+      ],
+      "Products": [
+        ""
+      ],
+      "Transfers": [
+        ""
+      ],
+      "Connection": [
+        ""
+      ],
+      "Instances": [
+        ""
+      ],
+      "New": [
+        ""
+      ],
+      "List": [
+        ""
+      ],
+      "Log out": [
+        ""
+      ],
+      "Clear": [
+        ""
+      ],
+      "should be the same": [
+        ""
+      ],
+      "cannot be the same as before": [
+        ""
+      ],
+      "You are updating the authorization token from instance %1$s with id %2$s": [
+        ""
+      ],
+      "Old token": [
+        ""
+      ],
+      "New token": [
+        ""
+      ],
+      "Clearing the auth token will mean public access to the instance": [
+        ""
+      ],
+      "ID": [
+        ""
+      ],
+      "Image": [
+        ""
+      ],
+      "Unit": [
+        ""
+      ],
+      "Price": [
+        ""
+      ],
+      "Stock": [
+        ""
+      ],
+      "Taxes": [
+        ""
+      ],
+      "Server not found": [
+        ""
+      ],
+      "Couldn't access the server": [
+        ""
+      ],
+      "Got message %1$s from %2$s": [
+        ""
+      ],
+      "Unexpected Error": [
+        ""
+      ],
+      "Auth token": [
+        ""
+      ],
+      "Account address": [
+        ""
+      ],
+      "Default max deposit fee": [
+        ""
+      ],
+      "Default max wire fee": [
+        ""
+      ],
+      "Default wire fee amortization": [
+        ""
+      ],
+      "Jurisdiction": [
+        ""
+      ],
+      "Default pay delay": [
+        ""
+      ],
+      "Default wire transfer delay": [
+        ""
+      ],
+      "could not create instance": [
+        ""
+      ],
+      "Delete": [
+        ""
+      ],
+      "Edit": [
+        ""
+      ],
+      "There is no instances yet, add more pressing the + sign": [
+        ""
+      ],
+      "Inventory products": [
+        ""
+      ],
+      "Total price": [
+        ""
+      ],
+      "Total tax": [
+        ""
+      ],
+      "Order price": [
+        ""
+      ],
+      "Net": [
+        ""
+      ],
+      "Summary": [
+        ""
+      ],
+      "Payments options": [
+        ""
+      ],
+      "Auto refund deadline": [
+        ""
+      ],
+      "Refund deadline": [
+        ""
+      ],
+      "Pay deadline": [
+        ""
+      ],
+      "Delivery date": [
+        ""
+      ],
+      "Location": [
+        ""
+      ],
+      "Max fee": [
+        ""
+      ],
+      "Max wire fee": [
+        ""
+      ],
+      "Wire fee amortization": [
+        ""
+      ],
+      "Fullfilment url": [
+        ""
+      ],
+      "Extra information": [
+        ""
+      ],
+      "select a product first": [
+        ""
+      ],
+      "should be greater than 0": [
+        ""
+      ],
+      "cannot be greater than current stock and quantity previously added. max: %1$s": [
+        ""
+      ],
+      "cannot be greater than current stock %1$s": [
+        ""
+      ],
+      "Quantity": [
+        ""
+      ],
+      "Order": [
+        ""
+      ],
+      "claimed": [
+        ""
+      ],
+      "copy url": [
+        ""
+      ],
+      "pay at": [
+        ""
+      ],
+      "created at": [
+        ""
+      ],
+      "Timeline": [
+        ""
+      ],
+      "Payment details": [
+        ""
+      ],
+      "Order status": [
+        ""
+      ],
+      "Product list": [
+        ""
+      ],
+      "paid": [
+        ""
+      ],
+      "wired": [
+        ""
+      ],
+      "refunded": [
+        ""
+      ],
+      "refund": [
+        ""
+      ],
+      "Refunded amount": [
+        ""
+      ],
+      "Deposit total": [
+        ""
+      ],
+      "unpaid": [
+        ""
+      ],
+      "Order status URL": [
+        ""
+      ],
+      "Pay URI": [
+        ""
+      ],
+      "Unknown order status. This is an error, please contact the administrator.": [
+        ""
+      ],
+      "refund created successfully": [
+        ""
+      ],
+      "could not create the refund": [
+        ""
+      ],
+      "load newer orders": [
+        ""
+      ],
+      "Date": [
+        ""
+      ],
+      "Refund": [
+        ""
+      ],
+      "load older orders": [
+        ""
+      ],
+      "No orders has been found": [
+        ""
+      ],
+      "date": [
+        ""
+      ],
+      "amount": [
+        ""
+      ],
+      "reason": [
+        ""
+      ],
+      "Max refundable:": [
+        ""
+      ],
+      "Reason": [
+        ""
+      ],
+      "duplicated": [
+        ""
+      ],
+      "requested by the customer": [
+        ""
+      ],
+      "other": [
+        ""
+      ],
+      "go to order id": [
+        ""
+      ],
+      "Paid": [
+        ""
+      ],
+      "Refunded": [
+        ""
+      ],
+      "Not wired": [
+        ""
+      ],
+      "All": [
+        ""
+      ],
+      "could not create product": [
+        ""
+      ],
+      "Sell": [
+        ""
+      ],
+      "Profit": [
+        ""
+      ],
+      "Sold": [
+        ""
+      ],
+      "product updated successfully": [
+        ""
+      ],
+      "could not update the product": [
+        ""
+      ],
+      "product delete successfully": [
+        ""
+      ],
+      "could not delete the product": [
+        ""
+      ],
+      "Tips": [
+        ""
+      ],
+      "Committed amount": [
+        ""
+      ],
+      "Exchange initial amount": [
+        ""
+      ],
+      "Merchant initial amount": [
+        ""
+      ],
+      "There is no tips yet, add more pressing the + sign": [
+        ""
+      ],
+      "cannot be empty": [
+        ""
+      ],
+      "check the id, doest look valid": [
+        ""
+      ],
+      "should have 52 characters, current %1$s": [
+        ""
+      ],
+      "URL doesn't have the right format": [
+        ""
+      ],
+      "Transfer ID": [
+        ""
+      ],
+      "Account Address": [
+        ""
+      ],
+      "Exchange URL": [
+        ""
+      ],
+      "could not inform transfer": [
+        ""
+      ],
+      "load newer transfers": [
+        ""
+      ],
+      "Credit": [
+        ""
+      ],
+      "Confirmed": [
+        ""
+      ],
+      "Verified": [
+        ""
+      ],
+      "Executed at": [
+        ""
+      ],
+      "yes": [
+        ""
+      ],
+      "no": [
+        ""
+      ],
+      "unknown": [
+        ""
+      ],
+      "load older transfers": [
+        ""
+      ],
+      "There is no transfer yet, add more pressing the + sign": [
+        ""
+      ]
+    }
+  }
+};
+
diff --git a/packages/merchant-backend-ui/src/i18n/sv.po b/packages/merchant-backend-ui/src/i18n/sv.po
new file mode 100644
index 000000000..6b35bd0ce
--- /dev/null
+++ b/packages/merchant-backend-ui/src/i18n/sv.po
@@ -0,0 +1,1057 @@
+# This file is part of TALER
+# (C) 2016 GNUnet e.V.
+#
+# TALER is free software; you can redistribute it and/or modify it under the
+# terms of the GNU General Public License as published by the Free Software
+# Foundation; either version 3, or (at your option) any later version.
+#
+# TALER is distributed in the hope that it will be useful, but WITHOUT ANY
+# WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+# A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License along with
+# TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+#
+#, fuzzy
+msgid ""
+msgstr ""
+"Project-Id-Version: Taler Wallet\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2016-11-23 00:00+0100\n"
+"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
+"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
+"Language-Team: LANGUAGE <LL@li.org>\n"
+"Language: \n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+#: src/ApplicationReadyRoutes.tsx:50 src/InstanceRoutes.tsx:118
+#: src/InstanceRoutes.tsx:299
+#, c-format
+msgid "Access denied"
+msgstr ""
+
+#: src/ApplicationReadyRoutes.tsx:51 src/InstanceRoutes.tsx:118
+#: src/InstanceRoutes.tsx:300
+#, c-format
+msgid "Check your token is valid"
+msgstr ""
+
+#: src/ApplicationReadyRoutes.tsx:72
+#, c-format
+msgid "Couldn't access the server."
+msgstr ""
+
+#: src/ApplicationReadyRoutes.tsx:73
+#, c-format
+msgid "Could not infer instance id from url %1$s"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:109
+#, c-format
+msgid "HTTP status #%1$s: Server reported a problem"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:110
+#, c-format
+msgid "Got message: \"%1$s\" from: %2$s"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:127
+#, c-format
+msgid "No default instance"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:128
+#, c-format
+msgid ""
+"in order to use merchant backoffice, you should create the default instance"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:288
+#, c-format
+msgid "Server reported a problem: HTTP status #%1$s"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:289
+#, c-format
+msgid "Got message: %1$s from: %2$s"
+msgstr ""
+
+#: src/components/exception/login.tsx:46
+#, c-format
+msgid "Login required"
+msgstr ""
+
+#: src/components/exception/login.tsx:49
+#, c-format
+msgid ""
+"Please enter your auth token. Token should have \"secret-token:\" and start "
+"with Bearer or ApiKey"
+msgstr ""
+
+#: src/components/exception/login.tsx:86 src/components/modal/index.tsx:53
+#: src/components/modal/index.tsx:75 src/paths/admin/create/CreatePage.tsx:115
+#: src/paths/instance/orders/create/CreatePage.tsx:325
+#: src/paths/instance/products/create/CreatePage.tsx:51
+#: src/paths/instance/products/list/Table.tsx:174
+#: src/paths/instance/products/list/Table.tsx:228
+#: src/paths/instance/products/update/UpdatePage.tsx:55
+#: src/paths/instance/transfers/create/CreatePage.tsx:89
+#: src/paths/instance/update/UpdatePage.tsx:134
+#, c-format
+msgid "Confirm"
+msgstr ""
+
+#: src/components/form/InputArray.tsx:72
+#, c-format
+msgid "The value %1$s is invalid for a payment url"
+msgstr ""
+
+#: src/components/form/InputDate.tsx:67
+#: src/paths/instance/orders/list/index.tsx:123
+#, c-format
+msgid "pick a date"
+msgstr ""
+
+#: src/components/form/InputDate.tsx:81
+#, c-format
+msgid "clear"
+msgstr ""
+
+#: src/components/form/InputDate.tsx:83
+#: src/paths/instance/transfers/list/Table.tsx:140
+#, c-format
+msgid "never"
+msgstr ""
+
+#: src/components/form/InputImage.tsx:80
+#, c-format
+msgid "Image should be smaller than 1 MB"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:28
+#, c-format
+msgid "Country"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:30
+#: src/paths/admin/create/CreatePage.tsx:99
+#: src/paths/instance/transfers/list/Table.tsx:124
+#: src/paths/instance/update/UpdatePage.tsx:118
+#, c-format
+msgid "Address"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:34
+#, c-format
+msgid "Building number"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:35
+#, c-format
+msgid "Building name"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:36
+#, c-format
+msgid "Street"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:37
+#, c-format
+msgid "Post code"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:38
+#, c-format
+msgid "Town location"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:39
+#, c-format
+msgid "Town"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:40
+#, c-format
+msgid "District"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:41
+#, c-format
+msgid "Country subdivision"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:59
+#, c-format
+msgid "Product id"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:60
+#: src/components/product/ProductForm.tsx:99
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:122
+#: src/paths/instance/orders/list/Table.tsx:227
+#: src/paths/instance/products/list/Table.tsx:86
+#, c-format
+msgid "Description"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:73
+#: src/components/form/InputTaxes.tsx:81
+#: src/paths/admin/create/CreatePage.tsx:87 src/paths/admin/list/Table.tsx:110
+#: src/paths/instance/details/DetailPage.tsx:76
+#: src/paths/instance/update/UpdatePage.tsx:106
+#, c-format
+msgid "Name"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:102
+#, c-format
+msgid "loading..."
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:108
+#, c-format
+msgid "no products found"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:116
+#, c-format
+msgid "no results"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:33
+#, c-format
+msgid "Deleting"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:34
+#, c-format
+msgid "Changing"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:60
+#, c-format
+msgid "Manage token"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:83
+#, c-format
+msgid "Update"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:100
+#: src/paths/instance/orders/create/CreatePage.tsx:252
+#: src/paths/instance/orders/create/CreatePage.tsx:273
+#, c-format
+msgid "Remove"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:106 src/components/modal/index.tsx:52
+#: src/components/modal/index.tsx:73 src/paths/admin/create/CreatePage.tsx:114
+#: src/paths/instance/orders/create/CreatePage.tsx:324
+#: src/paths/instance/products/create/CreatePage.tsx:50
+#: src/paths/instance/products/list/Table.tsx:166
+#: src/paths/instance/products/list/Table.tsx:218
+#: src/paths/instance/products/update/UpdatePage.tsx:54
+#: src/paths/instance/transfers/create/CreatePage.tsx:88
+#: src/paths/instance/update/UpdatePage.tsx:133
+#, c-format
+msgid "Cancel"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:91
+#, c-format
+msgid "Manage stock"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:93
+#, c-format
+msgid "Infinite"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:105
+#, c-format
+msgid "lost cannot be greater that current + incoming (max %1$s)"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:111
+#, c-format
+msgid "current stock will change from %1$s to %2$s"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:112
+#, c-format
+msgid "current stock will stay at %1$s"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:129
+#: src/paths/instance/products/list/Table.tsx:204
+#, c-format
+msgid "Incoming"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:130
+#: src/paths/instance/products/list/Table.tsx:205
+#, c-format
+msgid "Lost"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:142
+#, c-format
+msgid "Current"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:145
+#, c-format
+msgid "without stock"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:150
+#, c-format
+msgid "Next restock"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:152
+#, c-format
+msgid "Delivery address"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:73
+#, c-format
+msgid "this product has no taxes"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:77
+#: src/paths/instance/orders/details/DetailPage.tsx:145
+#: src/paths/instance/orders/details/DetailPage.tsx:296
+#: src/paths/instance/orders/list/Table.tsx:116
+#: src/paths/instance/transfers/create/CreatePage.tsx:84
+#, c-format
+msgid "Amount"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:78
+#, c-format
+msgid "currency and value separated with colon"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:84
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:78
+#, c-format
+msgid "Add"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:53
+#, c-format
+msgid "Instance"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:59
+#, c-format
+msgid "Settings"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:65
+#: src/paths/instance/orders/list/Table.tsx:60
+#, c-format
+msgid "Orders"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:71
+#: src/paths/instance/orders/create/CreatePage.tsx:258
+#: src/paths/instance/products/list/Table.tsx:48
+#, c-format
+msgid "Products"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:77
+#: src/paths/instance/transfers/list/Table.tsx:65
+#, c-format
+msgid "Transfers"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:87
+#, c-format
+msgid "Connection"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:112 src/paths/admin/list/Table.tsx:57
+#, c-format
+msgid "Instances"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:116
+#, c-format
+msgid "New"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:122
+#, c-format
+msgid "List"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:129
+#, c-format
+msgid "Log out"
+msgstr ""
+
+#: src/components/modal/index.tsx:74
+#, c-format
+msgid "Clear"
+msgstr ""
+
+#: src/components/modal/index.tsx:110 src/components/modal/index.tsx:111
+#, c-format
+msgid "should be the same"
+msgstr ""
+
+#: src/components/modal/index.tsx:111
+#, c-format
+msgid "cannot be the same as before"
+msgstr ""
+
+#: src/components/modal/index.tsx:114
+#, c-format
+msgid ""
+"You are updating the authorization token from instance %1$s with id %2$s"
+msgstr ""
+
+#: src/components/modal/index.tsx:124
+#, c-format
+msgid "Old token"
+msgstr ""
+
+#: src/components/modal/index.tsx:125
+#, c-format
+msgid "New token"
+msgstr ""
+
+#: src/components/modal/index.tsx:127
+#, c-format
+msgid "Clearing the auth token will mean public access to the instance"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:96
+#: src/paths/admin/create/CreatePage.tsx:85 src/paths/admin/list/Table.tsx:109
+#: src/paths/instance/transfers/list/Table.tsx:122
+#, c-format
+msgid "ID"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:98
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:121
+#: src/paths/instance/products/list/Table.tsx:85
+#, c-format
+msgid "Image"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:100
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:123
+#, c-format
+msgid "Unit"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:101
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:124
+#: src/paths/instance/products/list/Table.tsx:162
+#: src/paths/instance/products/list/Table.tsx:214
+#, c-format
+msgid "Price"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:103
+#: src/paths/instance/products/list/Table.tsx:90
+#, c-format
+msgid "Stock"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:105
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:128
+#: src/paths/instance/products/list/Table.tsx:88
+#, c-format
+msgid "Taxes"
+msgstr ""
+
+#: src/index.tsx:75
+#, c-format
+msgid "Server not found"
+msgstr ""
+
+#: src/index.tsx:85
+#, c-format
+msgid "Couldn't access the server"
+msgstr ""
+
+#: src/index.tsx:87 src/index.tsx:99
+#, c-format
+msgid "Got message %1$s from %2$s"
+msgstr ""
+
+#: src/index.tsx:97
+#, c-format
+msgid "Unexpected Error"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:89
+#: src/paths/instance/update/UpdatePage.tsx:108
+#, c-format
+msgid "Auth token"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:91
+#: src/paths/instance/details/DetailPage.tsx:77
+#: src/paths/instance/update/UpdatePage.tsx:110
+#, c-format
+msgid "Account address"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:93
+#: src/paths/instance/update/UpdatePage.tsx:112
+#, c-format
+msgid "Default max deposit fee"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:95
+#: src/paths/instance/update/UpdatePage.tsx:114
+#, c-format
+msgid "Default max wire fee"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:97
+#: src/paths/instance/update/UpdatePage.tsx:116
+#, c-format
+msgid "Default wire fee amortization"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:103
+#: src/paths/instance/update/UpdatePage.tsx:122
+#, c-format
+msgid "Jurisdiction"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:107
+#: src/paths/instance/update/UpdatePage.tsx:126
+#, c-format
+msgid "Default pay delay"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:109
+#: src/paths/instance/update/UpdatePage.tsx:128
+#, c-format
+msgid "Default wire transfer delay"
+msgstr ""
+
+#: src/paths/admin/create/index.tsx:58
+#, c-format
+msgid "could not create instance"
+msgstr ""
+
+#: src/paths/admin/list/Table.tsx:63 src/paths/admin/list/Table.tsx:131
+#: src/paths/instance/transfers/list/Table.tsx:71
+#, c-format
+msgid "Delete"
+msgstr ""
+
+#: src/paths/admin/list/Table.tsx:128
+#, c-format
+msgid "Edit"
+msgstr ""
+
+#: src/paths/admin/list/Table.tsx:149
+#: src/paths/instance/products/list/Table.tsx:245
+#, c-format
+msgid "There is no instances yet, add more pressing the + sign"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:237
+#, c-format
+msgid "Inventory products"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:286
+#, c-format
+msgid "Total price"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:287
+#, c-format
+msgid "Total tax"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:289
+#: src/paths/instance/orders/create/CreatePage.tsx:297
+#, c-format
+msgid "Order price"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:295
+#, c-format
+msgid "Net"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:300
+#: src/paths/instance/orders/details/DetailPage.tsx:144
+#: src/paths/instance/orders/details/DetailPage.tsx:295
+#: src/paths/instance/orders/list/Table.tsx:117
+#, c-format
+msgid "Summary"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:302
+#, c-format
+msgid "Payments options"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:303
+#, c-format
+msgid "Auto refund deadline"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:304
+#, c-format
+msgid "Refund deadline"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:305
+#, c-format
+msgid "Pay deadline"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:307
+#, c-format
+msgid "Delivery date"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:308
+#, c-format
+msgid "Location"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:312
+#, c-format
+msgid "Max fee"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:313
+#, c-format
+msgid "Max wire fee"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:314
+#, c-format
+msgid "Wire fee amortization"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:315
+#, c-format
+msgid "Fullfilment url"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:318
+#, c-format
+msgid "Extra information"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:44
+#, c-format
+msgid "select a product first"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:51
+#, c-format
+msgid "should be greater than 0"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:58
+#, c-format
+msgid ""
+"cannot be greater than current stock and quantity previously added. max: %1$s"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:64
+#, c-format
+msgid "cannot be greater than current stock %1$s"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:76
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:126
+#, c-format
+msgid "Quantity"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:92
+#: src/paths/instance/orders/details/DetailPage.tsx:235
+#: src/paths/instance/orders/details/DetailPage.tsx:333
+#, c-format
+msgid "Order"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:93
+#, c-format
+msgid "claimed"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:110
+#: src/paths/instance/orders/details/DetailPage.tsx:261
+#: src/paths/instance/orders/list/Table.tsx:136
+#, c-format
+msgid "copy url"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:126
+#: src/paths/instance/orders/details/DetailPage.tsx:349
+#, c-format
+msgid "pay at"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:127
+#: src/paths/instance/orders/details/DetailPage.tsx:350
+#, c-format
+msgid "created at"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:138
+#: src/paths/instance/orders/details/DetailPage.tsx:289
+#, c-format
+msgid "Timeline"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:142
+#: src/paths/instance/orders/details/DetailPage.tsx:293
+#, c-format
+msgid "Payment details"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:146
+#: src/paths/instance/orders/details/DetailPage.tsx:299
+#: src/paths/instance/orders/details/DetailPage.tsx:363
+#, c-format
+msgid "Order status"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:156
+#: src/paths/instance/orders/details/DetailPage.tsx:308
+#, c-format
+msgid "Product list"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:236
+#, c-format
+msgid "paid"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:238
+#, c-format
+msgid "wired"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:241
+#, c-format
+msgid "refunded"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:258
+#, c-format
+msgid "refund"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:297
+#, c-format
+msgid "Refunded amount"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:298
+#, c-format
+msgid "Deposit total"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:336
+#, c-format
+msgid "unpaid"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:364
+#, c-format
+msgid "Order status URL"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:365
+#, c-format
+msgid "Pay URI"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:383
+#, c-format
+msgid ""
+"Unknown order status. This is an error, please contact the administrator."
+msgstr ""
+
+#: src/paths/instance/orders/details/index.tsx:56
+#: src/paths/instance/orders/list/index.tsx:147
+#, c-format
+msgid "refund created successfully"
+msgstr ""
+
+#: src/paths/instance/orders/details/index.tsx:59
+#: src/paths/instance/orders/list/index.tsx:150
+#, c-format
+msgid "could not create the refund"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:111
+#, c-format
+msgid "load newer orders"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:115
+#, c-format
+msgid "Date"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:131
+#: src/paths/instance/orders/list/Table.tsx:223
+#, c-format
+msgid "Refund"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:145
+#, c-format
+msgid "load older orders"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:154
+#, c-format
+msgid "No orders has been found"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:202
+#, c-format
+msgid "date"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:203
+#, c-format
+msgid "amount"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:204
+#, c-format
+msgid "reason"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:224
+#, c-format
+msgid "Max refundable:"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "Reason"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "duplicated"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "requested by the customer"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "other"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:91
+#, c-format
+msgid "go to order id"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:107
+#, c-format
+msgid "Paid"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:108
+#, c-format
+msgid "Refunded"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:109
+#, c-format
+msgid "Not wired"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:110
+#, c-format
+msgid "All"
+msgstr ""
+
+#: src/paths/instance/products/create/index.tsx:48
+#: src/paths/instance/products/update/index.tsx:64
+#, c-format
+msgid "could not create product"
+msgstr ""
+
+#: src/paths/instance/products/list/Table.tsx:87
+#, c-format
+msgid "Sell"
+msgstr ""
+
+#: src/paths/instance/products/list/Table.tsx:89
+#, c-format
+msgid "Profit"
+msgstr ""
+
+#: src/paths/instance/products/list/Table.tsx:91
+#, c-format
+msgid "Sold"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:59
+#, c-format
+msgid "product updated successfully"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:62
+#, c-format
+msgid "could not update the product"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:70
+#, c-format
+msgid "product delete successfully"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:73
+#, c-format
+msgid "could not delete the product"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:59
+#, c-format
+msgid "Tips"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:111
+#, c-format
+msgid "Committed amount"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:112
+#, c-format
+msgid "Exchange initial amount"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:113
+#, c-format
+msgid "Merchant initial amount"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:148
+#, c-format
+msgid "There is no tips yet, add more pressing the + sign"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:50
+#: src/paths/instance/transfers/create/CreatePage.tsx:54
+#: src/paths/instance/transfers/create/CreatePage.tsx:55
+#: src/paths/instance/transfers/create/CreatePage.tsx:56
+#, c-format
+msgid "cannot be empty"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:51
+#, c-format
+msgid "check the id, doest look valid"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:52
+#, c-format
+msgid "should have 52 characters, current %1$s"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:57
+#, c-format
+msgid "URL doesn't have the right format"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:74
+#, c-format
+msgid "Transfer ID"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:76
+#, c-format
+msgid "Account Address"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:82
+#: src/paths/instance/transfers/list/Table.tsx:125
+#, c-format
+msgid "Exchange URL"
+msgstr ""
+
+#: src/paths/instance/transfers/create/index.tsx:49
+#, c-format
+msgid "could not inform transfer"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:118
+#, c-format
+msgid "load newer transfers"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:123
+#, c-format
+msgid "Credit"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:126
+#, c-format
+msgid "Confirmed"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:127
+#: src/paths/instance/transfers/list/index.tsx:60
+#, c-format
+msgid "Verified"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:128
+#, c-format
+msgid "Executed at"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:138
+#: src/paths/instance/transfers/list/Table.tsx:139
+#, c-format
+msgid "yes"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:138
+#: src/paths/instance/transfers/list/Table.tsx:139
+#, c-format
+msgid "no"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:140
+#, c-format
+msgid "unknown"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:145
+#, c-format
+msgid "load older transfers"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:154
+#, c-format
+msgid "There is no transfer yet, add more pressing the + sign"
+msgstr ""
diff --git a/packages/merchant-backend-ui/src/i18n/taler-merchant-backoffice.pot b/packages/merchant-backend-ui/src/i18n/taler-merchant-backoffice.pot
new file mode 100644
index 000000000..21fd863b0
--- /dev/null
+++ b/packages/merchant-backend-ui/src/i18n/taler-merchant-backoffice.pot
@@ -0,0 +1,1054 @@
+#  This file is part of GNU Taler
+#  (C) 2021 Taler Systems S.A.
+#  GNU Taler is free software; you can redistribute it and/or modify it under the
+#  terms of the GNU General Public License as published by the Free Software
+#  Foundation; either version 3, or (at your option) any later version.
+#  GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+#  WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+#  A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+#  You should have received a copy of the GNU General Public License along with
+#  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+#
+#, fuzzy
+msgid ""
+msgstr ""
+"Project-Id-Version: Taler Wallet\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2016-11-23 00:00+0100\n"
+"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
+"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
+"Language-Team: LANGUAGE <LL@li.org>\n"
+"Language: \n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+#: src/ApplicationReadyRoutes.tsx:50 src/InstanceRoutes.tsx:118
+#: src/InstanceRoutes.tsx:299
+#, c-format
+msgid "Access denied"
+msgstr ""
+
+#: src/ApplicationReadyRoutes.tsx:51 src/InstanceRoutes.tsx:118
+#: src/InstanceRoutes.tsx:300
+#, c-format
+msgid "Check your token is valid"
+msgstr ""
+
+#: src/ApplicationReadyRoutes.tsx:72
+#, c-format
+msgid "Couldn't access the server."
+msgstr ""
+
+#: src/ApplicationReadyRoutes.tsx:73
+#, c-format
+msgid "Could not infer instance id from url %1$s"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:109
+#, c-format
+msgid "HTTP status #%1$s: Server reported a problem"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:110
+#, c-format
+msgid "Got message: \"%1$s\" from: %2$s"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:127
+#, c-format
+msgid "No default instance"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:128
+#, c-format
+msgid ""
+"in order to use merchant backoffice, you should create the default instance"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:288
+#, c-format
+msgid "Server reported a problem: HTTP status #%1$s"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:289
+#, c-format
+msgid "Got message: %1$s from: %2$s"
+msgstr ""
+
+#: src/components/exception/login.tsx:46
+#, c-format
+msgid "Login required"
+msgstr ""
+
+#: src/components/exception/login.tsx:49
+#, c-format
+msgid ""
+"Please enter your auth token. Token should have \"secret-token:\" and start "
+"with Bearer or ApiKey"
+msgstr ""
+
+#: src/components/exception/login.tsx:86 src/components/modal/index.tsx:53
+#: src/components/modal/index.tsx:75 src/paths/admin/create/CreatePage.tsx:115
+#: src/paths/instance/orders/create/CreatePage.tsx:325
+#: src/paths/instance/products/create/CreatePage.tsx:51
+#: src/paths/instance/products/list/Table.tsx:174
+#: src/paths/instance/products/list/Table.tsx:228
+#: src/paths/instance/products/update/UpdatePage.tsx:55
+#: src/paths/instance/transfers/create/CreatePage.tsx:89
+#: src/paths/instance/update/UpdatePage.tsx:134
+#, c-format
+msgid "Confirm"
+msgstr ""
+
+#: src/components/form/InputArray.tsx:72
+#, c-format
+msgid "The value %1$s is invalid for a payment url"
+msgstr ""
+
+#: src/components/form/InputDate.tsx:67
+#: src/paths/instance/orders/list/index.tsx:123
+#, c-format
+msgid "pick a date"
+msgstr ""
+
+#: src/components/form/InputDate.tsx:81
+#, c-format
+msgid "clear"
+msgstr ""
+
+#: src/components/form/InputDate.tsx:83
+#: src/paths/instance/transfers/list/Table.tsx:140
+#, c-format
+msgid "never"
+msgstr ""
+
+#: src/components/form/InputImage.tsx:80
+#, c-format
+msgid "Image should be smaller than 1 MB"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:28
+#, c-format
+msgid "Country"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:30
+#: src/paths/admin/create/CreatePage.tsx:99
+#: src/paths/instance/transfers/list/Table.tsx:124
+#: src/paths/instance/update/UpdatePage.tsx:118
+#, c-format
+msgid "Address"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:34
+#, c-format
+msgid "Building number"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:35
+#, c-format
+msgid "Building name"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:36
+#, c-format
+msgid "Street"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:37
+#, c-format
+msgid "Post code"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:38
+#, c-format
+msgid "Town location"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:39
+#, c-format
+msgid "Town"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:40
+#, c-format
+msgid "District"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:41
+#, c-format
+msgid "Country subdivision"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:59
+#, c-format
+msgid "Product id"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:60
+#: src/components/product/ProductForm.tsx:99
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:122
+#: src/paths/instance/orders/list/Table.tsx:227
+#: src/paths/instance/products/list/Table.tsx:86
+#, c-format
+msgid "Description"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:73
+#: src/components/form/InputTaxes.tsx:81
+#: src/paths/admin/create/CreatePage.tsx:87 src/paths/admin/list/Table.tsx:110
+#: src/paths/instance/details/DetailPage.tsx:76
+#: src/paths/instance/update/UpdatePage.tsx:106
+#, c-format
+msgid "Name"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:102
+#, c-format
+msgid "loading..."
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:108
+#, c-format
+msgid "no products found"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:116
+#, c-format
+msgid "no results"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:33
+#, c-format
+msgid "Deleting"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:34
+#, c-format
+msgid "Changing"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:60
+#, c-format
+msgid "Manage token"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:83
+#, c-format
+msgid "Update"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:100
+#: src/paths/instance/orders/create/CreatePage.tsx:252
+#: src/paths/instance/orders/create/CreatePage.tsx:273
+#, c-format
+msgid "Remove"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:106 src/components/modal/index.tsx:52
+#: src/components/modal/index.tsx:73 src/paths/admin/create/CreatePage.tsx:114
+#: src/paths/instance/orders/create/CreatePage.tsx:324
+#: src/paths/instance/products/create/CreatePage.tsx:50
+#: src/paths/instance/products/list/Table.tsx:166
+#: src/paths/instance/products/list/Table.tsx:218
+#: src/paths/instance/products/update/UpdatePage.tsx:54
+#: src/paths/instance/transfers/create/CreatePage.tsx:88
+#: src/paths/instance/update/UpdatePage.tsx:133
+#, c-format
+msgid "Cancel"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:91
+#, c-format
+msgid "Manage stock"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:93
+#, c-format
+msgid "Infinite"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:105
+#, c-format
+msgid "lost cannot be greater that current + incoming (max %1$s)"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:111
+#, c-format
+msgid "current stock will change from %1$s to %2$s"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:112
+#, c-format
+msgid "current stock will stay at %1$s"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:129
+#: src/paths/instance/products/list/Table.tsx:204
+#, c-format
+msgid "Incoming"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:130
+#: src/paths/instance/products/list/Table.tsx:205
+#, c-format
+msgid "Lost"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:142
+#, c-format
+msgid "Current"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:145
+#, c-format
+msgid "without stock"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:150
+#, c-format
+msgid "Next restock"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:152
+#, c-format
+msgid "Delivery address"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:73
+#, c-format
+msgid "this product has no taxes"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:77
+#: src/paths/instance/orders/details/DetailPage.tsx:145
+#: src/paths/instance/orders/details/DetailPage.tsx:296
+#: src/paths/instance/orders/list/Table.tsx:116
+#: src/paths/instance/transfers/create/CreatePage.tsx:84
+#, c-format
+msgid "Amount"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:78
+#, c-format
+msgid "currency and value separated with colon"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:84
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:78
+#, c-format
+msgid "Add"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:53
+#, c-format
+msgid "Instance"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:59
+#, c-format
+msgid "Settings"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:65
+#: src/paths/instance/orders/list/Table.tsx:60
+#, c-format
+msgid "Orders"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:71
+#: src/paths/instance/orders/create/CreatePage.tsx:258
+#: src/paths/instance/products/list/Table.tsx:48
+#, c-format
+msgid "Products"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:77
+#: src/paths/instance/transfers/list/Table.tsx:65
+#, c-format
+msgid "Transfers"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:87
+#, c-format
+msgid "Connection"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:112 src/paths/admin/list/Table.tsx:57
+#, c-format
+msgid "Instances"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:116
+#, c-format
+msgid "New"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:122
+#, c-format
+msgid "List"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:129
+#, c-format
+msgid "Log out"
+msgstr ""
+
+#: src/components/modal/index.tsx:74
+#, c-format
+msgid "Clear"
+msgstr ""
+
+#: src/components/modal/index.tsx:110 src/components/modal/index.tsx:111
+#, c-format
+msgid "should be the same"
+msgstr ""
+
+#: src/components/modal/index.tsx:111
+#, c-format
+msgid "cannot be the same as before"
+msgstr ""
+
+#: src/components/modal/index.tsx:114
+#, c-format
+msgid ""
+"You are updating the authorization token from instance %1$s with id %2$s"
+msgstr ""
+
+#: src/components/modal/index.tsx:124
+#, c-format
+msgid "Old token"
+msgstr ""
+
+#: src/components/modal/index.tsx:125
+#, c-format
+msgid "New token"
+msgstr ""
+
+#: src/components/modal/index.tsx:127
+#, c-format
+msgid "Clearing the auth token will mean public access to the instance"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:96
+#: src/paths/admin/create/CreatePage.tsx:85 src/paths/admin/list/Table.tsx:109
+#: src/paths/instance/transfers/list/Table.tsx:122
+#, c-format
+msgid "ID"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:98
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:121
+#: src/paths/instance/products/list/Table.tsx:85
+#, c-format
+msgid "Image"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:100
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:123
+#, c-format
+msgid "Unit"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:101
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:124
+#: src/paths/instance/products/list/Table.tsx:162
+#: src/paths/instance/products/list/Table.tsx:214
+#, c-format
+msgid "Price"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:103
+#: src/paths/instance/products/list/Table.tsx:90
+#, c-format
+msgid "Stock"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:105
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:128
+#: src/paths/instance/products/list/Table.tsx:88
+#, c-format
+msgid "Taxes"
+msgstr ""
+
+#: src/index.tsx:75
+#, c-format
+msgid "Server not found"
+msgstr ""
+
+#: src/index.tsx:85
+#, c-format
+msgid "Couldn't access the server"
+msgstr ""
+
+#: src/index.tsx:87 src/index.tsx:99
+#, c-format
+msgid "Got message %1$s from %2$s"
+msgstr ""
+
+#: src/index.tsx:97
+#, c-format
+msgid "Unexpected Error"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:89
+#: src/paths/instance/update/UpdatePage.tsx:108
+#, c-format
+msgid "Auth token"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:91
+#: src/paths/instance/details/DetailPage.tsx:77
+#: src/paths/instance/update/UpdatePage.tsx:110
+#, c-format
+msgid "Account address"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:93
+#: src/paths/instance/update/UpdatePage.tsx:112
+#, c-format
+msgid "Default max deposit fee"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:95
+#: src/paths/instance/update/UpdatePage.tsx:114
+#, c-format
+msgid "Default max wire fee"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:97
+#: src/paths/instance/update/UpdatePage.tsx:116
+#, c-format
+msgid "Default wire fee amortization"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:103
+#: src/paths/instance/update/UpdatePage.tsx:122
+#, c-format
+msgid "Jurisdiction"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:107
+#: src/paths/instance/update/UpdatePage.tsx:126
+#, c-format
+msgid "Default pay delay"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:109
+#: src/paths/instance/update/UpdatePage.tsx:128
+#, c-format
+msgid "Default wire transfer delay"
+msgstr ""
+
+#: src/paths/admin/create/index.tsx:58
+#, c-format
+msgid "could not create instance"
+msgstr ""
+
+#: src/paths/admin/list/Table.tsx:63 src/paths/admin/list/Table.tsx:131
+#: src/paths/instance/transfers/list/Table.tsx:71
+#, c-format
+msgid "Delete"
+msgstr ""
+
+#: src/paths/admin/list/Table.tsx:128
+#, c-format
+msgid "Edit"
+msgstr ""
+
+#: src/paths/admin/list/Table.tsx:149
+#: src/paths/instance/products/list/Table.tsx:245
+#, c-format
+msgid "There is no instances yet, add more pressing the + sign"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:237
+#, c-format
+msgid "Inventory products"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:286
+#, c-format
+msgid "Total price"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:287
+#, c-format
+msgid "Total tax"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:289
+#: src/paths/instance/orders/create/CreatePage.tsx:297
+#, c-format
+msgid "Order price"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:295
+#, c-format
+msgid "Net"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:300
+#: src/paths/instance/orders/details/DetailPage.tsx:144
+#: src/paths/instance/orders/details/DetailPage.tsx:295
+#: src/paths/instance/orders/list/Table.tsx:117
+#, c-format
+msgid "Summary"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:302
+#, c-format
+msgid "Payments options"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:303
+#, c-format
+msgid "Auto refund deadline"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:304
+#, c-format
+msgid "Refund deadline"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:305
+#, c-format
+msgid "Pay deadline"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:307
+#, c-format
+msgid "Delivery date"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:308
+#, c-format
+msgid "Location"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:312
+#, c-format
+msgid "Max fee"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:313
+#, c-format
+msgid "Max wire fee"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:314
+#, c-format
+msgid "Wire fee amortization"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:315
+#, c-format
+msgid "Fullfilment url"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:318
+#, c-format
+msgid "Extra information"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:44
+#, c-format
+msgid "select a product first"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:51
+#, c-format
+msgid "should be greater than 0"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:58
+#, c-format
+msgid ""
+"cannot be greater than current stock and quantity previously added. max: %1$s"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:64
+#, c-format
+msgid "cannot be greater than current stock %1$s"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:76
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:126
+#, c-format
+msgid "Quantity"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:92
+#: src/paths/instance/orders/details/DetailPage.tsx:235
+#: src/paths/instance/orders/details/DetailPage.tsx:333
+#, c-format
+msgid "Order"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:93
+#, c-format
+msgid "claimed"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:110
+#: src/paths/instance/orders/details/DetailPage.tsx:261
+#: src/paths/instance/orders/list/Table.tsx:136
+#, c-format
+msgid "copy url"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:126
+#: src/paths/instance/orders/details/DetailPage.tsx:349
+#, c-format
+msgid "pay at"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:127
+#: src/paths/instance/orders/details/DetailPage.tsx:350
+#, c-format
+msgid "created at"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:138
+#: src/paths/instance/orders/details/DetailPage.tsx:289
+#, c-format
+msgid "Timeline"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:142
+#: src/paths/instance/orders/details/DetailPage.tsx:293
+#, c-format
+msgid "Payment details"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:146
+#: src/paths/instance/orders/details/DetailPage.tsx:299
+#: src/paths/instance/orders/details/DetailPage.tsx:363
+#, c-format
+msgid "Order status"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:156
+#: src/paths/instance/orders/details/DetailPage.tsx:308
+#, c-format
+msgid "Product list"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:236
+#, c-format
+msgid "paid"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:238
+#, c-format
+msgid "wired"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:241
+#, c-format
+msgid "refunded"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:258
+#, c-format
+msgid "refund"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:297
+#, c-format
+msgid "Refunded amount"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:298
+#, c-format
+msgid "Deposit total"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:336
+#, c-format
+msgid "unpaid"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:364
+#, c-format
+msgid "Order status URL"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:365
+#, c-format
+msgid "Pay URI"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:383
+#, c-format
+msgid ""
+"Unknown order status. This is an error, please contact the administrator."
+msgstr ""
+
+#: src/paths/instance/orders/details/index.tsx:56
+#: src/paths/instance/orders/list/index.tsx:147
+#, c-format
+msgid "refund created successfully"
+msgstr ""
+
+#: src/paths/instance/orders/details/index.tsx:59
+#: src/paths/instance/orders/list/index.tsx:150
+#, c-format
+msgid "could not create the refund"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:111
+#, c-format
+msgid "load newer orders"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:115
+#, c-format
+msgid "Date"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:131
+#: src/paths/instance/orders/list/Table.tsx:223
+#, c-format
+msgid "Refund"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:145
+#, c-format
+msgid "load older orders"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:154
+#, c-format
+msgid "No orders has been found"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:202
+#, c-format
+msgid "date"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:203
+#, c-format
+msgid "amount"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:204
+#, c-format
+msgid "reason"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:224
+#, c-format
+msgid "Max refundable:"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "Reason"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "duplicated"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "requested by the customer"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "other"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:91
+#, c-format
+msgid "go to order id"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:107
+#, c-format
+msgid "Paid"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:108
+#, c-format
+msgid "Refunded"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:109
+#, c-format
+msgid "Not wired"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:110
+#, c-format
+msgid "All"
+msgstr ""
+
+#: src/paths/instance/products/create/index.tsx:48
+#: src/paths/instance/products/update/index.tsx:64
+#, c-format
+msgid "could not create product"
+msgstr ""
+
+#: src/paths/instance/products/list/Table.tsx:87
+#, c-format
+msgid "Sell"
+msgstr ""
+
+#: src/paths/instance/products/list/Table.tsx:89
+#, c-format
+msgid "Profit"
+msgstr ""
+
+#: src/paths/instance/products/list/Table.tsx:91
+#, c-format
+msgid "Sold"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:59
+#, c-format
+msgid "product updated successfully"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:62
+#, c-format
+msgid "could not update the product"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:70
+#, c-format
+msgid "product delete successfully"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:73
+#, c-format
+msgid "could not delete the product"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:59
+#, c-format
+msgid "Tips"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:111
+#, c-format
+msgid "Committed amount"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:112
+#, c-format
+msgid "Exchange initial amount"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:113
+#, c-format
+msgid "Merchant initial amount"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:148
+#, c-format
+msgid "There is no tips yet, add more pressing the + sign"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:50
+#: src/paths/instance/transfers/create/CreatePage.tsx:54
+#: src/paths/instance/transfers/create/CreatePage.tsx:55
+#: src/paths/instance/transfers/create/CreatePage.tsx:56
+#, c-format
+msgid "cannot be empty"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:51
+#, c-format
+msgid "check the id, doest look valid"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:52
+#, c-format
+msgid "should have 52 characters, current %1$s"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:57
+#, c-format
+msgid "URL doesn't have the right format"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:74
+#, c-format
+msgid "Transfer ID"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:76
+#, c-format
+msgid "Account Address"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:82
+#: src/paths/instance/transfers/list/Table.tsx:125
+#, c-format
+msgid "Exchange URL"
+msgstr ""
+
+#: src/paths/instance/transfers/create/index.tsx:49
+#, c-format
+msgid "could not inform transfer"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:118
+#, c-format
+msgid "load newer transfers"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:123
+#, c-format
+msgid "Credit"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:126
+#, c-format
+msgid "Confirmed"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:127
+#: src/paths/instance/transfers/list/index.tsx:60
+#, c-format
+msgid "Verified"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:128
+#, c-format
+msgid "Executed at"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:138
+#: src/paths/instance/transfers/list/Table.tsx:139
+#, c-format
+msgid "yes"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:138
+#: src/paths/instance/transfers/list/Table.tsx:139
+#, c-format
+msgid "no"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:140
+#, c-format
+msgid "unknown"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:145
+#, c-format
+msgid "load older transfers"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:154
+#, c-format
+msgid "There is no transfer yet, add more pressing the + sign"
+msgstr ""
diff --git a/packages/merchant-backend-ui/src/index.tsx b/packages/merchant-backend-ui/src/index.tsx
new file mode 100644
index 000000000..275f63371
--- /dev/null
+++ b/packages/merchant-backend-ui/src/index.tsx
@@ -0,0 +1,61 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { h, VNode, Fragment } from 'preact';
+import { BackendContextProvider } from './context/backend';
+import { TranslationProvider } from './context/translation';
+// import { Page as RequestPayment } from './RequestPayment';
+import "./css/pure-min.css"
+import { Route, Router } from 'preact-router';
+import { Footer } from './components/Footer';
+// import OfferTip from './pages/OfferTip';
+// import {OfferRefund} from './pages/OfferRefund';
+// import DepletedTip from './pages/DepletedTip';
+// import RequestPayment from './pages/RequestPayment';
+// import ShowOrderDetails from './pages/ShowOrderDetails';
+
+export default function Application(): VNode {
+  return (
+    // <FetchContextProvider>
+    <BackendContextProvider>
+      <TranslationProvider>
+        <ApplicationStatusRoutes />
+      </TranslationProvider>
+    </BackendContextProvider>
+    // </FetchContextProvider>
+  );
+}
+
+function ApplicationStatusRoutes(): VNode {
+  return <Fragment>
+    <Router>
+      {/* <Route path="offer_tip" component={OfferTip} />
+      <Route path="offer_refund" component={OfferRefund} />
+      <Route path="depleted_tip" component={DepletedTip} />
+      <Route path="request_payment" component={RequestPayment} />
+      <Route path="show_order_details" component={ShowOrderDetails} /> */}
+      <Route default component={() => <div>
+        hello!
+      </div>} />
+    </Router>
+    <Footer />
+  </Fragment>
+}
diff --git a/packages/merchant-backend-ui/src/pages/DepletedTip.stories.tsx b/packages/merchant-backend-ui/src/pages/DepletedTip.stories.tsx
new file mode 100644
index 000000000..c20f6dc18
--- /dev/null
+++ b/packages/merchant-backend-ui/src/pages/DepletedTip.stories.tsx
@@ -0,0 +1,40 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { h, VNode, FunctionalComponent } from 'preact';
+import { DepletedTip as TestedComponent } from './DepletedTip';
+
+
+export default {
+  title: 'DepletedTip',
+  component: TestedComponent,
+  argTypes: {
+  },
+};
+
+function createExample<Props>(Component: FunctionalComponent<Props>, props: Partial<Props>) {
+  const r = (args: any) => <Component {...args} />
+  r.args = props
+  return r
+}
+
+export const Example = createExample(TestedComponent, {
+});
diff --git a/packages/merchant-backend-ui/src/pages/DepletedTip.tsx b/packages/merchant-backend-ui/src/pages/DepletedTip.tsx
new file mode 100644
index 000000000..756b08d6a
--- /dev/null
+++ b/packages/merchant-backend-ui/src/pages/DepletedTip.tsx
@@ -0,0 +1,60 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+import { Fragment, h, render, VNode } from 'preact';
+import { render as renderToString } from 'preact-render-to-string';
+import { Footer } from '../components/Footer';
+import "../css/pure-min.css";
+import "../css/style.css";
+import { Page } from '../styled';
+
+function Head(): VNode {
+  return <title>Status of your tip</title>
+}
+
+export function DepletedTip(): VNode {
+  return <Page>
+    <section>
+      <h1>Tip already collected</h1>
+      <div>
+        You have already collected this tip.
+      </div>
+    </section>
+    <Footer />
+  </Page>
+}
+
+export function mount(): void {
+  try {
+    render(<DepletedTip />, document.body);
+  } catch (e) {
+    console.error("got error", e);
+    if (e instanceof Error) {
+      document.body.innerText = `Fatal error: "${e.message}".  Please report this bug at https://bugs.gnunet.org/.`;
+    }
+  }
+}
+
+export function buildTimeRendering(): { head: string, body: string } {
+  return {
+    head: renderToString(<Head />),
+    body: renderToString(<DepletedTip />)
+  }
+}
diff --git a/packages/merchant-backend-ui/src/pages/OfferRefund.stories.tsx b/packages/merchant-backend-ui/src/pages/OfferRefund.stories.tsx
new file mode 100644
index 000000000..92694f867
--- /dev/null
+++ b/packages/merchant-backend-ui/src/pages/OfferRefund.stories.tsx
@@ -0,0 +1,45 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { h, VNode, FunctionalComponent } from 'preact';
+import { createSVG } from '../components/QR';
+import { OfferRefund as TestedComponent } from './OfferRefund';
+
+
+export default {
+  title: 'OfferRefund',
+  component: TestedComponent,
+  argTypes: {
+  },
+};
+
+function createExample<Props>(Component: FunctionalComponent<Props>, props: Partial<Props>) {
+  const r = (args: any) => <Component {...args} />
+  r.args = props
+  return r
+}
+
+const REFUND_URI_EXAMPLE = 'taler://pay/backend.demo.taler.net/instances/blog/2021.249-022NW2KG88QGA/def537eb-00c2-4a8b-8a17-0be034d118d3?c=2Y4N4PMST7KYAPS83428GTPCD4'
+
+export const Example = createExample(TestedComponent, {
+  refundURI: REFUND_URI_EXAMPLE,
+  qr_code: createSVG(REFUND_URI_EXAMPLE)
+});
diff --git a/packages/merchant-backend-ui/src/pages/OfferRefund.tsx b/packages/merchant-backend-ui/src/pages/OfferRefund.tsx
new file mode 100644
index 000000000..14c9372c2
--- /dev/null
+++ b/packages/merchant-backend-ui/src/pages/OfferRefund.tsx
@@ -0,0 +1,154 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+import { Fragment, h, render, VNode } from 'preact';
+import { render as renderToString } from 'preact-render-to-string';
+import { useEffect } from 'preact/hooks';
+import { Footer } from '../components/Footer';
+import { QR } from '../components/QR';
+import "../css/pure-min.css";
+import "../css/style.css";
+import { Page, QRPlaceholder, WalletLink } from '../styled';
+
+/**
+ * This page creates a refund offer QR code
+ * 
+ * It will build into a mustache html template for server side rendering
+ * 
+ * server side rendering params:
+ *  - order_status_url
+ *  - taler_refund_qrcode_svg
+ *  - taler_refund_uri
+ * 
+ * request params:
+ *  - refund_uri
+ *  - order_status_url
+ */
+
+interface Props {
+  refundURI?: string;
+  order_status_url?: string;
+  qr_code?: string;
+}
+
+function Head({ order_summary }: { order_summary?: string }): VNode {
+  return <Fragment>
+    <meta charSet="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <noscript>
+      <meta http-equiv="refresh" content="1" />
+    </noscript>
+    <title>Refund available for {order_summary ? order_summary : `{{ order_summary }}`}</title>
+  </Fragment>
+}
+
+export function OfferRefund({ refundURI, qr_code, order_status_url }: Props): VNode {
+  useEffect(() => {
+    let checkUrl: URL;
+    try {
+      checkUrl = new URL(order_status_url ? order_status_url : "{{& order_status_url }}");
+    } catch (e) {
+      return;
+    }
+    checkUrl.searchParams.set("await_refund_obtained", "yes");
+    const delayMs = 500;
+    function check() {
+      let retried = false;
+      function retryOnce() {
+        if (!retried) {
+          retried = true;
+          check();
+        }
+      }
+      const req = new XMLHttpRequest();
+      req.onreadystatechange = function () {
+        if (req.readyState === XMLHttpRequest.DONE) {
+          if (req.status === 200) {
+            try {
+              const resp = JSON.parse(req.responseText);
+              if (!resp.refund_pending) {
+                window.location.reload();
+              }
+            } catch (e) {
+              console.error("could not parse response:", e);
+            }
+          }
+          setTimeout(retryOnce, delayMs);
+        }
+      };
+      req.onerror = function () {
+        setTimeout(retryOnce, delayMs);
+      }
+      req.open("GET", checkUrl.href);
+      req.send();
+    }
+
+    setTimeout(check, delayMs);
+  })
+  return <Page>
+    <section>
+      <h1>Collect Taler refund</h1>
+      <p>
+        Scan this QR code with your Taler mobile wallet:
+      </p>
+      <QRPlaceholder dangerouslySetInnerHTML={{ __html: qr_code ? qr_code : `{{{ taler_refund_qrcode_svg }}}` }} />
+      <p>
+        <WalletLink href={refundURI ? refundURI : `{{ taler_refund_uri }}`}>
+          Or open your Taller wallet
+        </WalletLink>
+      </p>
+      <p>
+        <a href="https://wallet.taler.net/">Don't have a Taler wallet yet? Install it!</a>
+      </p>
+    </section>
+    <Footer />
+  </Page>
+}
+
+export function mount(): void {
+  try {
+    const fromLocation = new URL(window.location.href).searchParams
+    const os = fromLocation.get('order_summary') || undefined;
+    if (os) {
+      render(<Head order_summary={os} />, document.head);
+    }
+
+    const uri = fromLocation.get('refund_uri') || undefined;
+    const osu = fromLocation.get('order_status_url') || undefined;
+    const qr_code = uri ? renderToString(<QR text={uri} />) : undefined;
+
+    render(<OfferRefund
+      refundURI={uri} order_status_url={osu}
+      qr_code={qr_code}
+    />, document.body);
+  } catch (e) {
+    console.error("got error", e);
+    if (e instanceof Error) {
+      document.body.innerText = `Fatal error: "${e.message}".  Please report this bug at https://bugs.gnunet.org/.`;
+    }
+  }
+}
+
+export function buildTimeRendering(): { head: string, body: string } {
+  return {
+    head: renderToString(<Head />),
+    body: renderToString(<OfferRefund />)
+  }
+}
diff --git a/packages/merchant-backend-ui/src/pages/OfferTip.stories.tsx b/packages/merchant-backend-ui/src/pages/OfferTip.stories.tsx
new file mode 100644
index 000000000..dfbf71fff
--- /dev/null
+++ b/packages/merchant-backend-ui/src/pages/OfferTip.stories.tsx
@@ -0,0 +1,45 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { h, VNode, FunctionalComponent } from 'preact';
+import { createSVG } from '../components/QR';
+import { OfferTip as TestedComponent } from './OfferTip';
+
+
+export default {
+  title: 'OfferTip',
+  component: TestedComponent,
+  argTypes: {
+  },
+};
+
+function createExample<Props>(Component: FunctionalComponent<Props>, props: Partial<Props>) {
+  const r = (args: any) => <Component {...args} />
+  r.args = props
+  return r
+}
+
+const TIP_URI_EXAMPLE = 'taler+http://tip/merchant-backend.taler/2021.242-01G2X4275RBWG/?c=66BE594PDZR24744J6EQK52XM0'
+
+export const Example = createExample(TestedComponent, {
+  tipURI: TIP_URI_EXAMPLE,
+  qr_code: createSVG(TIP_URI_EXAMPLE)
+});
diff --git a/packages/merchant-backend-ui/src/pages/OfferTip.tsx b/packages/merchant-backend-ui/src/pages/OfferTip.tsx
new file mode 100644
index 000000000..ace1059ca
--- /dev/null
+++ b/packages/merchant-backend-ui/src/pages/OfferTip.tsx
@@ -0,0 +1,141 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+import { Fragment, h, render, VNode } from 'preact';
+import { render as renderToString } from 'preact-render-to-string';
+import { useEffect } from 'preact/hooks';
+import { Footer } from '../components/Footer';
+import { QR } from '../components/QR';
+import "../css/pure-min.css";
+import "../css/style.css";
+import { Page, QRPlaceholder, WalletLink } from '../styled';
+import { ShowOrderDetails } from './ShowOrderDetails';
+
+
+/**
+ * This page creates a tip offer QR code
+ * 
+ * It will build into a mustache html template for server side rendering
+ * 
+ * server side rendering params:
+ *  - tip_status_url
+ *  - taler_tip_qrcode_svg
+ *  - taler_tip_uri
+ * 
+ * request params:
+ *  - tip_uri
+ *  - tip_status_url
+ */
+
+interface Props {
+  tipURI?: string,
+  tip_status_url?: string,
+  qr_code?: string,
+}
+
+export function Head(): VNode {
+  return <Fragment>
+    <meta charSet="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <noscript>
+      <meta http-equiv="refresh" content="1" />
+    </noscript>
+    <title>Tip available</title>
+  </Fragment>
+}
+
+export function OfferTip({ tipURI, qr_code, tip_status_url }: Props): VNode {
+  useEffect(() => {
+    let checkUrl: URL;
+    try {
+      checkUrl = new URL(tip_status_url ? tip_status_url : "{{& tip_status_url }}");
+    } catch (e) {
+      return;
+    }
+
+    const delayMs = 500;
+    function check() {
+      let retried = false;
+      function retryOnce() {
+        if (!retried) {
+          retried = true;
+          check();
+        }
+      }
+      const req = new XMLHttpRequest();
+      req.onreadystatechange = function () {
+        if (req.readyState === XMLHttpRequest.DONE) {
+          if (req.status === 410) {
+            window.location.reload();
+          }
+          setTimeout(retryOnce, delayMs);
+        }
+      };
+      req.onerror = function () {
+        setTimeout(retryOnce, delayMs);
+      }
+      req.open("GET", checkUrl.href);
+      req.send();
+    }
+
+    setTimeout(check, delayMs);
+  })
+  return <Page>
+    <section>
+      <h1 >Collect Taler tip</h1>
+      <p>
+        Scan this QR code with your Taler mobile wallet:
+      </p>
+      <QRPlaceholder dangerouslySetInnerHTML={{ __html: qr_code ? qr_code : `{{{ taler_tip_qrcode_svg }}}` }} />
+      <p>
+        <WalletLink href={tipURI ? tipURI : `{{ taler_tip_uri }}`}>
+          Or open your Taller wallet
+        </WalletLink>
+      </p>
+      <p>
+        <a href="https://wallet.taler.net/">Don't have a Taler wallet yet? Install it!</a>
+      </p>
+    </section>
+    <Footer />
+  </Page>
+}
+
+export function mount(): void {
+  try {
+    const fromLocation = new URL(window.location.href).searchParams
+
+    const uri = fromLocation.get('tip_uri') || undefined
+    const tsu = fromLocation.get('tip_status_url') || undefined
+
+    render(<OfferTip tipURI={uri} tip_status_url={tsu} />, document.body);
+  } catch (e) {
+    console.error("got error", e);
+    if (e instanceof Error) {
+      document.body.innerText = `Fatal error: "${e.message}".  Please report this bug at https://bugs.gnunet.org/.`;
+    }
+  }
+}
+
+export function buildTimeRendering(): { head: string, body: string } {
+  return {
+    head: renderToString(<Head />),
+    body: renderToString(<ShowOrderDetails />)
+  }
+}
diff --git a/packages/merchant-backend-ui/src/pages/RequestPayment.stories.tsx b/packages/merchant-backend-ui/src/pages/RequestPayment.stories.tsx
new file mode 100644
index 000000000..5d6d79adf
--- /dev/null
+++ b/packages/merchant-backend-ui/src/pages/RequestPayment.stories.tsx
@@ -0,0 +1,45 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { FunctionalComponent, h } from 'preact';
+import { createSVG } from '../components/QR';
+import { RequestPayment as TestedComponent } from './RequestPayment';
+
+
+export default {
+  title: 'RequestPayment',
+  component: TestedComponent,
+  argTypes: {
+  },
+};
+
+function createExample<Props>(Component: FunctionalComponent<Props>, props: Partial<Props>) {
+  const r = (args: any) => <Component {...args} />
+  r.args = props
+  return r
+}
+
+const PAYTO_URI_EXAMPLE = 'taler+http://pay/merchant-backend.taler/2021.242-01G2X4275RBWG/?c=66BE594PDZR24744J6EQK52XM0'
+
+export const Example = createExample(TestedComponent, {
+  payURI: 'taler+http://pay/merchant-backend.taler/2021.242-01G2X4275RBWG/?c=66BE594PDZR24744J6EQK52XM0',
+  qr_code: createSVG(PAYTO_URI_EXAMPLE)
+});
diff --git a/packages/merchant-backend-ui/src/pages/RequestPayment.tsx b/packages/merchant-backend-ui/src/pages/RequestPayment.tsx
new file mode 100644
index 000000000..050755dfb
--- /dev/null
+++ b/packages/merchant-backend-ui/src/pages/RequestPayment.tsx
@@ -0,0 +1,196 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+import { Fragment, h, render, VNode } from "preact";
+import { render as renderToString } from "preact-render-to-string";
+import { useEffect } from "preact/hooks";
+import { Footer } from "../components/Footer";
+import "../css/pure-min.css";
+import "../css/style.css";
+import { QR } from "../components/QR";
+import { Page, QRPlaceholder, WalletLink } from "../styled";
+
+/**
+ * This page creates a payment request QR code
+ *
+ * It will build into a mustache html template for server side rendering
+ *
+ * server side rendering params:
+ *  - order_status_url
+ *  - taler_pay_qrcode_svg
+ *  - taler_pay_uri
+ *  - order_summary
+ *
+ * request params:
+ *  - pay_uri
+ *  - order_summary
+ *  - order_status_url
+ */
+
+interface Props {
+  payURI?: string;
+  order_status_url?: string;
+  qr_code?: string;
+}
+
+function Head({ order_summary }: { order_summary?: string }): VNode {
+  return (
+    <Fragment>
+      <meta charSet="UTF-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <noscript>
+        <meta http-equiv="refresh" content="1" />
+      </noscript>
+      <title>
+        Payment requested for{" "}
+        {order_summary ? order_summary : `{{ order_summary }}`}
+      </title>
+    </Fragment>
+  );
+}
+
+export function RequestPayment({
+  payURI,
+  qr_code,
+  order_status_url,
+}: Props): VNode {
+  useEffect(() => {
+    const longpollDelayMs = 60 * 1000;
+    let checkUrl: URL;
+    try {
+      checkUrl = new URL(
+        order_status_url ? order_status_url : "{{& order_status_url }}"
+      );
+    } catch (e) {
+      return;
+    }
+    checkUrl.searchParams.set("timeout_s", longpollDelayMs.toString());
+    function check() {
+      let retried = false;
+      function retryOnce() {
+        if (!retried) {
+          retried = true;
+          check();
+        }
+      }
+      const req = new XMLHttpRequest();
+      req.onreadystatechange = function () {
+        if (req.readyState === XMLHttpRequest.DONE) {
+          if (req.status === 200) {
+            try {
+              const resp = JSON.parse(req.responseText);
+              if (resp.fulfillment_url) {
+                window.location.replace(resp.fulfillment_url);
+              }
+            } catch (e) {
+              console.error("could not parse response:", e);
+            }
+          }
+          if (req.status === 202) {
+            try {
+              const resp = JSON.parse(req.responseText);
+              if (resp.fulfillment_url) {
+                window.location.replace(resp.fulfillment_url);
+              }
+            } catch (e) {
+              console.error("could not parse response:", e);
+            }
+          }
+          if (req.status === 402) {
+            try {
+              const resp = JSON.parse(req.responseText);
+              if (resp.already_paid_order_id && resp.fulfillment_url) {
+                window.location.replace(resp.fulfillment_url);
+              }
+            } catch (e) {
+              console.error("could not parse response:", e);
+            }
+          }
+          setTimeout(retryOnce, 500);
+        }
+      };
+      req.onerror = function () {
+        setTimeout(retryOnce, 500);
+      };
+      req.ontimeout = function () {
+        setTimeout(retryOnce, 500);
+      };
+      req.timeout = longpollDelayMs;
+      req.open("GET", checkUrl.href);
+      req.send();
+    }
+    setTimeout(check, 500);
+  });
+  return (
+    <Page>
+      <section>
+        <h1>Pay with Taler</h1>
+        <p>Scan this QR code with your mobile wallet:</p>
+        <QRPlaceholder
+          dangerouslySetInnerHTML={{
+            __html: qr_code ? qr_code : `{{{ taler_pay_qrcode_svg }}}`,
+          }}
+        />
+        <p>
+          <WalletLink href={payURI ? payURI : `{{ taler_pay_uri }}`}>
+            Or open your Taller wallet
+          </WalletLink>
+        </p>
+        <p>
+          <a href="https://wallet.taler.net/">
+            Don't have a Taler wallet yet? Install it!
+          </a>
+        </p>
+      </section>
+      <Footer />
+    </Page>
+  );
+}
+
+export function mount(): void {
+  try {
+    const fromLocation = new URL(window.location.href).searchParams;
+    const os = fromLocation.get("order_summary") || undefined;
+    if (os) {
+      render(<Head order_summary={os} />, document.head);
+    }
+
+    const uri = fromLocation.get("pay_uri") || undefined;
+    const osu = fromLocation.get("order_status_url") || undefined;
+    const qr_code = uri ? renderToString(<QR text={uri} />) : undefined;
+
+    render(
+      <RequestPayment payURI={uri} order_status_url={osu} qr_code={qr_code} />,
+      document.body
+    );
+  } catch (e) {
+    console.error("got error", e);
+    if (e instanceof Error) {
+      document.body.innerText = `Fatal error: "${e.message}".  Please report this bug at https://bugs.gnunet.org/.`;
+    }
+  }
+}
+
+export function buildTimeRendering(): { head: string; body: string } {
+  return {
+    head: renderToString(<Head />),
+    body: renderToString(<RequestPayment />),
+  };
+}
diff --git a/packages/merchant-backend-ui/src/pages/ShowOrderDetails.examples.ts b/packages/merchant-backend-ui/src/pages/ShowOrderDetails.examples.ts
new file mode 100644
index 000000000..ba68397ee
--- /dev/null
+++ b/packages/merchant-backend-ui/src/pages/ShowOrderDetails.examples.ts
@@ -0,0 +1,219 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { MerchantBackend } from '../declaration';
+import { Props } from './ShowOrderDetails';
+
+
+const defaultContractTerms: MerchantBackend.ContractTerms = {
+  order_id: 'XRS8876388373',
+  amount: 'USD:10',
+  summary: 'this is a short summary',
+  pay_deadline: {
+    t_s: new Date().getTime() + 6 * 24 * 60 * 60 * 1000
+  },
+  merchant: {
+    name: 'the merchant (inc)',
+    address: {
+      country_subdivision: 'Buenos Aires',
+      town: 'CABA',
+      country: 'Argentina'
+    },
+    jurisdiction: {
+      country_subdivision: 'Cordoba',
+      town: 'Capital',
+      country: 'Argentina'
+    },
+  },
+  max_fee: 'USD:0.1',
+  max_wire_fee: 'USD:0.2',
+  wire_fee_amortization: 1,
+  products: [],
+  timestamp: {
+    t_s: new Date().getTime()
+  },
+  auditors: [],
+  exchanges: [],
+  h_wire: '',
+  merchant_base_url: 'http://merchant.base.url/',
+  merchant_pub: 'QWEASDQWEASD',
+  nonce: 'NONCE',
+  refund_deadline: {
+    t_s: new Date().getTime() + 6 * 24 * 60 * 60 * 1000
+  },
+  wire_method: 'x-taler-bank',
+  wire_transfer_deadline: {
+    t_s: new Date().getTime() + 3 * 24 * 60 * 60 * 1000
+  },
+};
+
+const inSixDays = new Date().getTime() + 6 * 24 * 60 * 60 * 1000
+const in10Minutes = new Date().getTime() + 10 * 60 * 1000
+const in15Minutes = new Date().getTime() + 15 * 60 * 1000
+const in20Minutes = new Date().getTime() + 20 * 60 * 1000
+
+export const exampleData: { [name: string]: Props } = {
+  Simplest: {
+    order_summary: 'here goes the order summary',
+    contract_terms: defaultContractTerms,
+  },
+  WithRefundAmount: {
+    order_summary: 'here goes the order summary',
+    refund_amount: 'USD:10',
+    contract_terms: defaultContractTerms,
+  },
+  WithDeliveryDate: {
+    order_summary: 'here goes the order summary',
+    contract_terms: {
+      ...defaultContractTerms,
+      delivery_date: {
+        t_s: inSixDays
+      },
+    },
+  },
+  WithDeliveryLocation: {
+    order_summary: 'here goes the order summary',
+    contract_terms: {
+      ...defaultContractTerms,
+      delivery_location: {
+        address_lines: ['addr line 1', 'addr line 2', 'addr line 3', 'addr line 4', 'addr line 5', 'addr line 6', 'addr line 7'],
+        building_name: 'building-name',
+        building_number: 'building-number',
+        country: 'country',
+        country_subdivision: 'country sub',
+        district: 'district',
+        post_code: 'post-code',
+        street: 'street',
+        town: 'town',
+        town_location: 'town loc',
+      },
+    },
+  },
+  WithDeliveryLocationAndDate: {
+    order_summary: 'here goes the order summary',
+    contract_terms: {
+      ...defaultContractTerms,
+      delivery_location: {
+        address_lines: ['addr1', 'addr2', 'addr3', 'addr4', 'addr5', 'addr6', 'addr7'],
+        building_name: 'building-name',
+        building_number: 'building-number',
+        country: 'country',
+        country_subdivision: 'country sub',
+        district: 'district',
+        post_code: 'post-code',
+        street: 'street',
+        town: 'town',
+        town_location: 'town loc',
+      },
+      delivery_date: {
+        t_s: inSixDays
+      },
+    },
+  },
+  WithThreeProducts: {
+    order_summary: 'here goes the order summary',
+    contract_terms: {
+      ...defaultContractTerms,
+      products: [{
+        description: 'description of the first product',
+        price: '5:USD',
+        quantity: 1,
+        delivery_date: { t_s: in10Minutes },
+        product_id: '12333',
+      }, {
+        description: 'another description',
+        price: '10:USD',
+        quantity: 5,
+        unit: 't-shirt',
+      }, {
+        description: 'one last description',
+        price: '10:USD',
+        quantity: 5
+      }]
+    } as MerchantBackend.ContractTerms
+  },
+  WithProductWithTaxes: {
+    order_summary: 'here goes the order summary',
+    contract_terms: {
+      ...defaultContractTerms,
+      products: [{
+        description: 'description of the first product',
+        price: '5:USD',
+        quantity: 1,
+        unit: 'beer',
+        delivery_date: { t_s: in10Minutes },
+        product_id: '456',
+        taxes: [{
+          name: 'VAT', tax: 'USD:1'
+        }],
+      }, {
+        description: 'one last description',
+        price: '10:USD',
+        quantity: 5,
+        product_id: '123',
+        unit: 'beer',
+        taxes: [{
+          name: 'VAT', tax: 'USD:1'
+        }],
+      }]
+    } as MerchantBackend.ContractTerms
+  },
+  WithExchangeList: {
+    order_summary: 'here goes the order summary',
+    contract_terms: {
+      ...defaultContractTerms,
+      exchanges: [{
+        master_pub: 'ABCDEFGHIJKLMNO',
+        url: 'http://exchange0.taler.net'
+      }, {
+        master_pub: 'AAAAAAAAAAAAAAA',
+        url: 'http://exchange1.taler.net'
+      }, {
+        master_pub: 'BBBBBBBBBBBBBBB',
+        url: 'http://exchange2.taler.net'
+      }]
+    },
+  },
+  WithAuditorList: {
+    order_summary: 'here goes the order summary',
+    contract_terms: {
+      ...defaultContractTerms,
+      auditors: [{
+        auditor_pub: 'ABCDEFGHIJKLMNO',
+        name: 'the USD auditor',
+        url: 'http://auditor-usd.taler.net'
+      }, {
+        auditor_pub: 'OPQRSTUVWXYZABCD',
+        name: 'the EUR auditor',
+        url: 'http://auditor-eur.taler.net'
+      }]
+    },
+  },
+  WithAutoRefund: {
+    order_summary: 'here goes the order summary',
+    contract_terms: {
+      ...defaultContractTerms,
+      auto_refund: {
+        d_us: 1000 * 60 * 60 * 26 + 1000 * 60 * 30
+      }
+    },
+  },
+}
diff --git a/packages/merchant-backend-ui/src/pages/ShowOrderDetails.stories.tsx b/packages/merchant-backend-ui/src/pages/ShowOrderDetails.stories.tsx
new file mode 100644
index 000000000..6a902cc9e
--- /dev/null
+++ b/packages/merchant-backend-ui/src/pages/ShowOrderDetails.stories.tsx
@@ -0,0 +1,49 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { FunctionalComponent, h } from 'preact';
+import { ShowOrderDetails as TestedComponent } from './ShowOrderDetails';
+import { exampleData } from './ShowOrderDetails.examples';
+
+export default {
+  title: 'ShowOrderDetails',
+  component: TestedComponent,
+  argTypes: {
+  },
+  excludeStories: /.*Data$/,
+};
+
+function createExample<Props>(Component: FunctionalComponent<Props>, props: Partial<Props>) {
+  const r = (args: any) => <Component {...args} />
+  r.args = props
+  return r
+}
+
+export const Simplest = createExample(TestedComponent, exampleData.Simplest);
+export const WithRefundAmount = createExample(TestedComponent, exampleData.WithRefundAmount);
+export const WithDeliveryDate = createExample(TestedComponent, exampleData.WithDeliveryDate);
+export const WithDeliveryLocation = createExample(TestedComponent, exampleData.WithDeliveryLocation);
+export const WithDeliveryLocationAndDate = createExample(TestedComponent, exampleData.WithDeliveryLocationAndDate);
+export const WithThreeProducts = createExample(TestedComponent, exampleData.WithThreeProducts);
+export const WithAuditorList = createExample(TestedComponent, exampleData.WithAuditorList);
+export const WithExchangeList = createExample(TestedComponent, exampleData.WithExchangeList);
+export const WithAutoRefund = createExample(TestedComponent, exampleData.WithAutoRefund);
+export const WithProductWithTaxes = createExample(TestedComponent, exampleData.WithProductWithTaxes);
diff --git a/packages/merchant-backend-ui/src/pages/ShowOrderDetails.tsx b/packages/merchant-backend-ui/src/pages/ShowOrderDetails.tsx
new file mode 100644
index 000000000..aa62c2932
--- /dev/null
+++ b/packages/merchant-backend-ui/src/pages/ShowOrderDetails.tsx
@@ -0,0 +1,551 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+import { format, formatDuration } from "date-fns";
+import { intervalToDuration } from "date-fns/esm";
+import { Fragment, h, render, VNode } from "preact";
+import { render as renderToString } from "preact-render-to-string";
+import { Footer } from "../components/Footer";
+import "../css/pure-min.css";
+import "../css/style.css";
+import { MerchantBackend } from "../declaration";
+import { Page, InfoBox, TableExpanded, TableSimple } from "../styled";
+
+/**
+ * This page creates a payment request QR code
+ *
+ * It will build into a mustache html template for server side rendering
+ *
+ * server side rendering params:
+ *  - order_summary
+ *  - contract_terms
+ *  - refund_amount
+ *
+ * request params:
+ *  - refund_amount
+ *  - contract_terms
+ *  - order_summary
+ */
+
+export interface Props {
+  btr?: boolean; // build time rendering flag
+  order_summary?: string;
+  refund_amount?: string;
+  contract_terms?: MerchantBackend.ContractTerms;
+}
+
+function Head({ order_summary }: { order_summary?: string }): VNode {
+  return (
+    <Fragment>
+      <meta charSet="UTF-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <noscript>
+        <meta http-equiv="refresh" content="1" />
+      </noscript>
+      <title>
+        Status of your order for{" "}
+        {order_summary ? order_summary : `{{ order_summary }}`}
+      </title>
+      <script>{`
+      var contractTermsStr = '{{{contract_terms_json}}}';
+    `}</script>
+    </Fragment>
+  );
+}
+
+function Location({
+  templateName,
+  location,
+  btr,
+}: {
+  templateName: string;
+  location: MerchantBackend.Location | undefined;
+  btr?: boolean;
+}) {
+  //FIXME: mustache strings show be constructed in a way that ends in the final output of the html but is not present in the
+  // javascript code, otherwise when mustache render engine run over the html it will also replace string in the javascript code
+  // that is made to run when the browser has javascript enable leading into undefined behavior.
+  // that's why in the next fields we are using concatenations to build the mustache placeholder.
+  return (
+    <Fragment>
+      {btr && `{{` + `#${templateName}.building_name}}`}
+      <dd>
+        {location?.building_name ||
+          (btr && `{{ ${templateName}.building_name }}`)}{" "}
+        {location?.building_number ||
+          (btr && `{{ ${templateName}.building_number }}`)}
+      </dd>
+      {btr && `{{` + `/${templateName}.building_name}}`}
+
+      {btr && `{{` + `#${templateName}.country}}`}
+      <dd>
+        {location?.country || (btr && `{{ ${templateName}.country }}`)}{" "}
+        {location?.country_subdivision ||
+          (btr && `{{ ${templateName}.country_subdivision }}`)}
+      </dd>
+      {btr && `{{` + `/${templateName}.country}}`}
+
+      {btr && `{{` + `#${templateName}.district}}`}
+      <dd>{location?.district || (btr && `{{ ${templateName}.district }}`)}</dd>
+      {btr && `{{` + `/${templateName}.district}}`}
+
+      {btr && `{{` + `#${templateName}.post_code}}`}
+      <dd>
+        {location?.post_code || (btr && `{{ ${templateName}.post_code }}`)}
+      </dd>
+      {btr && `{{` + `/${templateName}.post_code}}`}
+
+      {btr && `{{` + `#${templateName}.street}}`}
+      <dd>{location?.street || (btr && `{{ ${templateName}.street }}`)}</dd>
+      {btr && `{{` + `/${templateName}.street}}`}
+
+      {btr && `{{` + `#${templateName}.town}}`}
+      <dd>{location?.town || (btr && `{{ ${templateName}.town }}`)}</dd>
+      {btr && `{{` + `/${templateName}.town}}`}
+
+      {btr && `{{` + `#${templateName}.town_location}}`}
+      <dd>
+        {location?.town_location ||
+          (btr && `{{ ${templateName}.town_location }}`)}
+      </dd>
+      {btr && `{{` + `/${templateName}.town_location}}`}
+    </Fragment>
+  );
+}
+
+export function ShowOrderDetails({
+  order_summary,
+  refund_amount,
+  contract_terms,
+  btr,
+}: Props): VNode {
+  const productList = btr
+    ? [{} as MerchantBackend.Product]
+    : contract_terms?.products || [];
+  const auditorsList = btr
+    ? [{} as MerchantBackend.Auditor]
+    : contract_terms?.auditors || [];
+  const exchangesList = btr
+    ? [{} as MerchantBackend.Exchange]
+    : contract_terms?.exchanges || [];
+  const hasDeliveryInfo =
+    btr ||
+    !!contract_terms?.delivery_date ||
+    !!contract_terms?.delivery_location;
+
+  return (
+    <Page>
+      <header>
+        <h1>
+          Details of order{" "}
+          {contract_terms?.order_id || `{{ contract_terms.order_id }}`}
+        </h1>
+      </header>
+
+      <section>
+        {btr && `{{#refund_amount}}`}
+        {(btr || refund_amount) && (
+          <section>
+            <InfoBox>
+              <b>Refunded:</b> The merchant refunded you{" "}
+              <b>{refund_amount || `{{ refund_amount }}`}</b>.
+            </InfoBox>
+          </section>
+        )}
+        {btr && `{{/refund_amount}}`}
+
+        <section>
+          <TableExpanded>
+            <dt>Order summary:</dt>
+            <dd>{contract_terms?.summary || `{{ contract_terms.summary }}`}</dd>
+            <dt>Amount paid:</dt>
+            <dd>{contract_terms?.amount || `{{ contract_terms.amount }}`}</dd>
+            <dt>Order date:</dt>
+            <dd>
+              {contract_terms?.timestamp
+                ? contract_terms?.timestamp.t_s != "never"
+                  ? format(
+                      contract_terms?.timestamp.t_s,
+                      "dd MMM yyyy HH:mm:ss"
+                    )
+                  : "never"
+                : `{{ contract_terms.timestamp_str }}`}{" "}
+            </dd>
+            <dt>Merchant name:</dt>
+            <dd>
+              {contract_terms?.merchant.name ||
+                `{{ contract_terms.merchant.name }}`}
+            </dd>
+          </TableExpanded>
+        </section>
+
+        {btr && `{{#contract_terms.hasProducts}}`}
+        {!productList.length ? null : (
+          <section>
+            <h2>Products purchased</h2>
+            <TableSimple>
+              {btr && "{{" + "#contract_terms.products" + "}}"}
+              {productList.map((p, i) => {
+                const taxList = btr
+                  ? [{} as MerchantBackend.Tax]
+                  : p.taxes || [];
+
+                return (
+                  <Fragment key={i}>
+                    <p>{p.description || `{{description}}`}</p>
+                    <dl>
+                      <dt>Quantity:</dt>
+                      <dd>{p.quantity || `{{quantity}}`}</dd>
+
+                      <dt>Price:</dt>
+                      <dd>{p.price || `{{price}}`}</dd>
+
+                      {btr && `{{#hasTaxes}}`}
+                      {!taxList.length ? null : (
+                        <Fragment>
+                          {btr && "{{" + "#taxes" + "}}"}
+                          {taxList.map((t, i) => {
+                            return (
+                              <Fragment key={i}>
+                                <dt>{t.name || `{{name}}`}</dt>
+                                <dd>{t.tax || `{{tax}}`}</dd>
+                              </Fragment>
+                            );
+                          })}
+                          {btr && "{{" + "/taxes" + "}}"}
+                        </Fragment>
+                      )}
+                      {btr && `{{/hasTaxes}}`}
+
+                      {btr && `{{#delivery_date}}`}
+                      {(btr || p.delivery_date) && (
+                        <Fragment>
+                          <dt>Delivered on:</dt>
+                          <dd>
+                            {p.delivery_date
+                              ? p.delivery_date.t_s != "never"
+                                ? format(
+                                    p.delivery_date.t_s,
+                                    "dd MMM yyyy HH:mm:ss"
+                                  )
+                                : "never"
+                              : `{{ delivery_date_str }}`}{" "}
+                          </dd>
+                        </Fragment>
+                      )}
+                      {btr && `{{/delivery_date}}`}
+
+                      {btr && `{{#unit}}`}
+                      {(btr || p.unit) && (
+                        <Fragment>
+                          <dt>Product unit:</dt>
+                          <dd>{p.unit || `{{.}}`}</dd>
+                        </Fragment>
+                      )}
+                      {btr && `{{/unit}}`}
+
+                      {btr && `{{#product_id}}`}
+                      {(btr || p.product_id) && (
+                        <Fragment>
+                          <dt>Product ID:</dt>
+                          <dd>{p.product_id || `{{.}}`}</dd>
+                        </Fragment>
+                      )}
+                      {btr && `{{/product_id}}`}
+                    </dl>
+                  </Fragment>
+                );
+              })}
+              {btr && "{{" + "/contract_terms.products" + "}}"}
+            </TableSimple>
+          </section>
+        )}
+        {btr && `{{/contract_terms.hasProducts}}`}
+
+        {btr && `{{#contract_terms.has_delivery_info}}`}
+        {!hasDeliveryInfo ? null : (
+          <section>
+            <h2>Delivery information</h2>
+            <TableExpanded>
+              {btr && `{{#contract_terms.delivery_date}}`}
+              {(btr || contract_terms?.delivery_date) && (
+                <Fragment>
+                  <dt>Delivery date:</dt>
+                  <dd>
+                    {contract_terms?.delivery_date
+                      ? contract_terms?.delivery_date.t_s != "never"
+                        ? format(
+                            contract_terms?.delivery_date.t_s,
+                            "dd MMM yyyy HH:mm:ss"
+                          )
+                        : "never"
+                      : `{{ contract_terms.delivery_date_str }}`}{" "}
+                  </dd>
+                </Fragment>
+              )}
+              {btr && `{{/contract_terms.delivery_date}}`}
+
+              {btr && `{{#contract_terms.delivery_location}}`}
+              {(btr || contract_terms?.delivery_location) && (
+                <Fragment>
+                  <dt>Delivery address:</dt>
+                  <Location
+                    btr={btr}
+                    location={contract_terms?.delivery_location}
+                    templateName="contract_terms.delivery_location"
+                  />
+                </Fragment>
+              )}
+              {btr && `{{/contract_terms.delivery_location}}`}
+            </TableExpanded>
+          </section>
+        )}
+        {btr && `{{/contract_terms.has_delivery_info}}`}
+
+        <section>
+          <h2>Full payment information</h2>
+          <TableExpanded>
+            <dt>Amount paid:</dt>
+            <dd>{contract_terms?.amount || `{{ contract_terms.amount }}`}</dd>
+            <dt>Wire transfer method:</dt>
+            <dd>
+              {contract_terms?.wire_method ||
+                `{{ contract_terms.wire_method }}`}
+            </dd>
+            <dt>Payment deadline:</dt>
+            <dd>
+              {contract_terms?.pay_deadline
+                ? contract_terms?.pay_deadline.t_s != "never"
+                  ? format(
+                      contract_terms?.pay_deadline.t_s,
+                      "dd MMM yyyy HH:mm:ss"
+                    )
+                  : "never"
+                : `{{ contract_terms.pay_deadline_str }}`}{" "}
+            </dd>
+            <dt>Exchange transfer deadline:</dt>
+            <dd>
+              {contract_terms?.wire_transfer_deadline
+                ? contract_terms?.wire_transfer_deadline.t_s != "never"
+                  ? format(
+                      contract_terms?.wire_transfer_deadline.t_s,
+                      "dd MMM yyyy HH:mm:ss"
+                    )
+                  : "never"
+                : `{{ contract_terms.wire_transfer_deadline_str }}`}{" "}
+            </dd>
+            <dt>Maximum deposit fee:</dt>
+            <dd>{contract_terms?.max_fee || `{{ contract_terms.max_fee }}`}</dd>
+            <dt>Maximum wire fee:</dt>
+            <dd>
+              {contract_terms?.max_wire_fee ||
+                `{{ contract_terms.max_wire_fee }}`}
+            </dd>
+            <dt>Wire fee amortization:</dt>
+            <dd>
+              {contract_terms?.wire_fee_amortization ||
+                `{{ contract_terms.wire_fee_amortization }}`}{" "}
+              transactions
+            </dd>
+          </TableExpanded>
+        </section>
+
+        <section>
+          <h2>Refund information</h2>
+          <TableExpanded>
+            <dt>Refund deadline:</dt>
+            <dd>
+              {contract_terms?.refund_deadline
+                ? contract_terms?.refund_deadline.t_s != "never"
+                  ? format(
+                      contract_terms?.refund_deadline.t_s,
+                      "dd MMM yyyy HH:mm:ss"
+                    )
+                  : "never"
+                : `{{ contract_terms.refund_deadline_str }}`}{" "}
+            </dd>
+
+            {btr && `{{#contract_terms.auto_refund}}`}
+            {(btr || contract_terms?.auto_refund) && (
+              <Fragment>
+                <dt>Attempt autorefund for:</dt>
+                <dd>
+                  {contract_terms?.auto_refund
+                    ? contract_terms?.auto_refund.d_us != "forever"
+                      ? formatDuration(
+                          intervalToDuration({
+                            start: 0,
+                            end: contract_terms?.auto_refund.d_us,
+                          })
+                        )
+                      : "forever"
+                    : `{{ contract_terms.auto_refund_str }}`}{" "}
+                </dd>
+              </Fragment>
+            )}
+            {btr && `{{/contract_terms.auto_refund}}`}
+          </TableExpanded>
+        </section>
+
+        <section>
+          <h2>Additional order details</h2>
+          <TableExpanded>
+            <dt>Public reorder URL:</dt>
+            <dd> -- not defined yet -- </dd>
+            {btr && `{{#contract_terms.fulfillment_url}}`}
+            {(btr || contract_terms?.fulfillment_url) && (
+              <Fragment>
+                <dt>Fulfillment URL:</dt>
+                <dd>
+                  {contract_terms?.fulfillment_url ||
+                    (btr && `{{ contract_terms.fulfillment_url }}`)}
+                </dd>
+              </Fragment>
+            )}
+            {btr && `{{/contract_terms.fulfillment_url}}`}
+            {/* <dt>Fulfillment message:</dt>
+          <dd> -- not defined yet -- </dd> */}
+          </TableExpanded>
+        </section>
+
+        <section>
+          <h2>Full merchant information</h2>
+          <TableExpanded>
+            <dt>Merchant name:</dt>
+            <dd>
+              {contract_terms?.merchant.name ||
+                `{{ contract_terms.merchant.name }}`}
+            </dd>
+            <dt>Merchant address:</dt>
+            <Location
+              btr={btr}
+              location={contract_terms?.merchant.address}
+              templateName="contract_terms.merchant.address"
+            />
+            <dt>Merchant's jurisdiction:</dt>
+            <Location
+              btr={btr}
+              location={contract_terms?.merchant.jurisdiction}
+              templateName="contract_terms.merchant.jurisdiction"
+            />
+            <dt>Merchant URI:</dt>
+            <dd>
+              {contract_terms?.merchant_base_url ||
+                `{{ contract_terms.merchant_base_url }}`}
+            </dd>
+            <dt>Merchant's public key:</dt>
+            <dd>
+              {contract_terms?.merchant_pub ||
+                `{{ contract_terms.merchant_pub }}`}
+            </dd>
+            {/* <dt>Merchant's hash:</dt>
+          <dd> -- not defined yet -- </dd> */}
+          </TableExpanded>
+        </section>
+
+        {btr && `{{#contract_terms.hasAuditors}}`}
+        {!auditorsList.length ? null : (
+          <section>
+            <h2>Auditors accepted by the merchant</h2>
+            <TableExpanded>
+              {btr && "{{" + "#contract_terms.auditors" + "}}"}
+              {auditorsList.map((p, i) => {
+                return (
+                  <Fragment key={i}>
+                    <p>{p.name || `{{name}}`}</p>
+                    <dt>Auditor's public key:</dt>
+                    <dd>{p.auditor_pub || `{{auditor_pub}}`}</dd>
+                    <dt>Auditor's URL:</dt>
+                    <dd>{p.url || `{{url}}`}</dd>
+                  </Fragment>
+                );
+              })}
+              {btr && "{{" + "/contract_terms.auditors" + "}}"}
+            </TableExpanded>
+          </section>
+        )}
+        {btr && `{{/contract_terms.hasAuditors}}`}
+
+        {btr && `{{#contract_terms.hasExchanges}}`}
+        {!exchangesList.length ? null : (
+          <section>
+            <h2>Exchanges accepted by the merchant</h2>
+            <TableExpanded>
+              {btr && "{{" + "#contract_terms.exchanges" + "}}"}
+              {exchangesList.map((p, i) => {
+                return (
+                  <Fragment key={i}>
+                    <dt>Exchange's URL:</dt>
+                    <dd>{p.url || `{{url}}`}</dd>
+                    <dt>Public key:</dt>
+                    <dd>{p.master_pub || `{{master_pub}}`}</dd>
+                  </Fragment>
+                );
+              })}
+              {btr && "{{" + "/contract_terms.exchanges" + "}}"}
+            </TableExpanded>
+          </section>
+        )}
+        {btr && `{{/contract_terms.hasExchanges}}`}
+      </section>
+
+      <Footer />
+    </Page>
+  );
+}
+
+export function mount(): void {
+  try {
+    const fromLocation = new URL(window.location.href).searchParams;
+    const os = fromLocation.get("order_summary") || undefined;
+    if (os) {
+      render(<Head order_summary={os} />, document.head);
+    }
+
+    const ra = fromLocation.get("refund_amount") || undefined;
+    const ct = fromLocation.get("contract_terms") || undefined;
+
+    let contractTerms: MerchantBackend.ContractTerms | undefined;
+    try {
+      contractTerms = JSON.parse((window as any).contractTermsStr);
+    } catch {}
+
+    render(
+      <ShowOrderDetails
+        contract_terms={contractTerms}
+        order_summary={os}
+        refund_amount={ra}
+      />,
+      document.body
+    );
+  } catch (e) {
+    console.error("got error", e);
+    if (e instanceof Error) {
+      document.body.innerText = `Fatal error: "${e.message}".  Please report this bug at https://bugs.gnunet.org/.`;
+    }
+  }
+}
+
+export function buildTimeRendering(): { head: string; body: string } {
+  return {
+    head: renderToString(<Head />),
+    body: renderToString(<ShowOrderDetails btr />),
+  };
+}
diff --git a/packages/merchant-backend-ui/src/styled/index.tsx b/packages/merchant-backend-ui/src/styled/index.tsx
new file mode 100644
index 000000000..55803b9cd
--- /dev/null
+++ b/packages/merchant-backend-ui/src/styled/index.tsx
@@ -0,0 +1,178 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+import { styled } from '@linaria/react'
+
+export const QRPlaceholder = styled.div`
+  margin: auto;
+  text-align: center;
+  width: 340px; 
+`
+
+export const FooterBar = styled.footer`
+  text-align: center;
+  background-color: #033;
+  color: white;
+  padding: 1em;
+  overflow: auto;
+
+  & > p > a:link,
+  & > p > a:visited,
+  & > p > a:hover,
+  & > p > a:active {
+    color: white;
+  }
+`
+
+export const Page = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 100vh;
+  align-items: center;
+  
+  a:link,
+  a:visited,
+  a:hover,
+  a:active {
+    color: black;
+  }
+  
+  section {
+    text-align: center;
+    width: 600px;
+    /* margin: auto; */
+    /* margin-top: 0px; */
+    margin-bottom: auto;
+    /* overflow: auto; */
+  }
+  section:not(:first-of-type) {
+    margin-top: 2em;
+  }
+  & > header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    text-align: center;
+  }
+  & > footer {
+    display: flex;    
+    flex-direction: row;
+    justify-content: space-around;
+    width: 100%;
+    margin-bottom: 0px;
+  }
+`
+export const Center = styled.div`
+  display: flex;
+  justify-content: center;
+`
+
+export const WalletLink = styled.a<{ upperCased?: boolean }>`
+  display: inline-block;
+  zoom: 1;
+  line-height: normal;
+  white-space: nowrap;
+  vertical-align: middle;
+  text-align: center;
+  cursor: pointer;
+  user-select: none;
+  box-sizing: border-box;
+  text-transform: ${({ upperCased }) => upperCased ? 'uppercase' : 'none'};
+
+  font-family: inherit;
+  font-size: 100%;
+  padding: 0.5em 1em;
+  color: #444; /* rgba not supported (IE 8) */
+  color: rgba(0, 0, 0, 0.8); /* rgba supported */
+  border: 1px solid #999; /*IE 6/7/8*/
+  border: none rgba(0, 0, 0, 0); /*IE9 + everything else*/
+  background-color: '#e6e6e6';
+  text-decoration: none;
+  border-radius: 2px;
+
+  :focus {
+    outline: 0;
+  }
+
+  &:disabled {
+    border: none;
+    background-image: none;
+    /* csslint ignore:start */
+    filter: alpha(opacity=40);
+    /* csslint ignore:end */
+    opacity: 0.4;
+    cursor: not-allowed;
+    box-shadow: none;
+    pointer-events: none;
+  }
+
+  :hover {
+    filter: alpha(opacity=90);
+    background-image: linear-gradient(
+      transparent,
+      rgba(0, 0, 0, 0.05) 40%,
+      rgba(0, 0, 0, 0.1)
+    );
+  }
+
+  background-color: #e6e6e6;
+  border-radius: 4px;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset,
+    0 0 6px rgba(0, 0, 0, 0.2) inset;
+  border-color: #000;
+`;
+
+export const InfoBox = styled.div`
+  border-radius: 0.25em;
+  flex-direction: column;
+  /* margin: 0.5em; */
+  padding: 1em;
+  /* width: 100%; */
+  border:solid 1px #b8daff;
+  background-color:#cce5ff;
+  color:#004085;
+`
+
+export const TableExpanded = styled.dl`
+  text-align: left;
+  dt {
+    font-weight: bold;
+    margin-top: 1em;
+  }
+  dd {
+    margin-inline-start: 0px;
+  }
+`
+
+export const TableSimple = styled.dl`
+  text-align: left;
+  dt {
+    font-weight: bold;
+    display: inline-block;
+    width:30%;
+  }
+  dd {
+    margin-inline-start: 0px;
+    display: inline-block;
+    width:70%;
+  }
+`
\ No newline at end of file
diff --git a/packages/merchant-backend-ui/src/utils/amount.ts b/packages/merchant-backend-ui/src/utils/amount.ts
new file mode 100644
index 000000000..85f230427
--- /dev/null
+++ b/packages/merchant-backend-ui/src/utils/amount.ts
@@ -0,0 +1,69 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+import { amountFractionalBase, AmountJson, Amounts } from "@gnu-taler/taler-util";
+import { MerchantBackend } from "../declaration";
+
+/**
+ * sums two prices, 
+ * @param one 
+ * @param two 
+ * @returns 
+ */
+const sumPrices = (one: string, two: string) => {
+  const [currency, valueOne] = one.split(':')
+  const [, valueTwo] = two.split(':')
+  return `${currency}:${parseInt(valueOne, 10) + parseInt(valueTwo, 10)}`
+}
+
+/**
+ * merge refund with the same description and a difference less than one minute
+ * @param prev list of refunds that will hold the merged refunds 
+ * @param cur new refund to add to the list
+ * @returns list with the new refund, may be merged with the last
+ */
+export function mergeRefunds(prev: MerchantBackend.Orders.RefundDetails[], cur: MerchantBackend.Orders.RefundDetails) {
+  let tail;
+
+  if (prev.length === 0 ||  //empty list
+    cur.timestamp.t_s === 'never' || //current doesnt have timestamp
+    (tail = prev[prev.length - 1]).timestamp.t_s === 'never' || // last doesnt have timestamp
+    cur.reason !== tail.reason || //different reason
+    Math.abs(cur.timestamp.t_s - tail.timestamp.t_s) > 1000 * 60) {//more than 1 minute difference
+
+    prev.push(cur)
+    return prev
+  }
+
+  prev[prev.length - 1] = {
+    ...tail,
+    amount: sumPrices(tail.amount, cur.amount)
+  }
+
+  return prev
+}
+
+export const rate = (one: string, two: string) => {
+  const a = Amounts.parseOrThrow(one)
+  const b = Amounts.parseOrThrow(two)
+  const af = toFloat(a)
+  const bf = toFloat(b)
+  if (bf === 0) return 0
+  return af / bf
+}
+
+function toFloat(amount: AmountJson) {
+  return amount.value + (amount.fraction / amountFractionalBase);
+}
diff --git a/packages/merchant-backend-ui/src/utils/constants.ts b/packages/merchant-backend-ui/src/utils/constants.ts
new file mode 100644
index 000000000..37c46e4c2
--- /dev/null
+++ b/packages/merchant-backend-ui/src/utils/constants.ts
@@ -0,0 +1,47 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+//https://tools.ietf.org/html/rfc8905
+export const PAYTO_REGEX = /^payto:\/\/[a-zA-Z][a-zA-Z0-9-.]+(\/[a-zA-Z0-9\-\.\~\(\)@_%:!$&'*+,;=]*)*\??((amount|receiver-name|sender-name|instruction|message)=[a-zA-Z0-9\-\.\~\(\)@_%:!$'*+,;=]*&?)*$/
+export const PAYTO_WIRE_METHOD_LOOKUP = /payto:\/\/([a-zA-Z][a-zA-Z0-9-.]+)\/.*/
+
+export const AMOUNT_REGEX = /^[a-zA-Z][a-zA-Z]*:[0-9][0-9,]*\.?[0-9,]*$/
+
+export const INSTANCE_ID_LOOKUP = /^\/instances\/([^/]*)\/?$/
+
+export const AMOUNT_ZERO_REGEX = /^[a-zA-Z][a-zA-Z]*:0$/
+
+export const CROCKFORD_BASE32_REGEX = /^[0123456789ABCDEFGHJKMNPQRSTVWXYZ]+[*~$=U]*$/
+
+export const URL_REGEX = /^((https?:)(\/\/\/?)([\w]*(?::[\w]*)?@)?([\d\w\.-]+)(?::(\d+))?)\/$/
+
+// how much rows we add every time user hit load more
+export const PAGE_SIZE = 20
+// how bigger can be the result set
+// after this threshold, load more with move the cursor
+export const MAX_RESULT_SIZE = PAGE_SIZE * 2 - 1;
+
+// how much we will wait for all request, in seconds
+export const DEFAULT_REQUEST_TIMEOUT = 10;
+
+export const MAX_IMAGE_SIZE = 1024 * 1024;
+
+export const INSTANCE_ID_REGEX = /^[a-zA-Z0-9][a-zA-Z0-9_.@-]+$/
diff --git a/packages/merchant-backend-ui/src/utils/table.ts b/packages/merchant-backend-ui/src/utils/table.ts
new file mode 100644
index 000000000..3d713a6f7
--- /dev/null
+++ b/packages/merchant-backend-ui/src/utils/table.ts
@@ -0,0 +1,37 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import { WithId } from "../declaration";
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+export interface Actions<T extends WithId> {
+  element: T;
+  type: 'DELETE' | 'UPDATE';
+}
+
+function notEmpty<TValue>(value: TValue | null | undefined): value is TValue {
+  return value !== null && value !== undefined;
+}
+
+export function buildActions<T extends WithId>(intances: T[], selected: string[], action: 'DELETE'): Actions<T>[] {
+  return selected.map(id => intances.find(i => i.id === id))
+    .filter(notEmpty)
+    .map(id => ({ element: id, type: action }))
+}
diff --git a/packages/merchant-backend-ui/src/utils/types.ts b/packages/merchant-backend-ui/src/utils/types.ts
new file mode 100644
index 000000000..9e49d39e1
--- /dev/null
+++ b/packages/merchant-backend-ui/src/utils/types.ts
@@ -0,0 +1,31 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import { VNode } from "preact"
+
+export interface KeyValue {
+  [key: string]: string;
+}
+
+export interface Notification {
+  message: string;
+  description?: string | VNode;
+  type: MessageType;
+}
+
+export type ValueOrFunction<T> = T | ((p: T) => T)
+export type MessageType = 'INFO' | 'WARN' | 'ERROR' | 'SUCCESS'
+
diff --git a/packages/merchant-backend-ui/tests/__mocks__/browserMocks.ts b/packages/merchant-backend-ui/tests/__mocks__/browserMocks.ts
new file mode 100644
index 000000000..ee6bba505
--- /dev/null
+++ b/packages/merchant-backend-ui/tests/__mocks__/browserMocks.ts
@@ -0,0 +1,42 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+ /**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+// Mock Browser API's which are not supported by JSDOM, e.g. ServiceWorker, LocalStorage
+/**
+ * An example how to mock localStorage is given below 👇
+ */
+
+/* 
+// Mocks localStorage
+const localStorageMock = (function() {
+	let store = {};
+
+	return {
+		getItem: (key) => store[key] || null,
+		setItem: (key, value) => store[key] = value.toString(),
+		clear: () => store = {}
+	};
+
+})();
+
+Object.defineProperty(window, 'localStorage', {
+	value: localStorageMock
+}); */
diff --git a/packages/merchant-backend-ui/tests/__mocks__/fileMocks.ts b/packages/merchant-backend-ui/tests/__mocks__/fileMocks.ts
new file mode 100644
index 000000000..0c045e9d1
--- /dev/null
+++ b/packages/merchant-backend-ui/tests/__mocks__/fileMocks.ts
@@ -0,0 +1,24 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+ /**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+// This fixed an error related to the CSS and loading gif breaking my Jest test
+// See https://facebook.github.io/jest/docs/en/webpack.html#handling-static-assets
+export default 'test-file-stub';
diff --git a/packages/merchant-backend-ui/tests/__mocks__/fileTransformer.js b/packages/merchant-backend-ui/tests/__mocks__/fileTransformer.js
new file mode 100644
index 000000000..51ebbfa62
--- /dev/null
+++ b/packages/merchant-backend-ui/tests/__mocks__/fileTransformer.js
@@ -0,0 +1,31 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+// fileTransformer.js
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const path = require('path');
+
+module.exports = {
+    process(src, filename, config, options) {
+        return `module.exports = ${  JSON.stringify(path.basename(filename))  };`;
+    },
+};
+
diff --git a/packages/merchant-backend-ui/tests/__mocks__/setupTests.ts b/packages/merchant-backend-ui/tests/__mocks__/setupTests.ts
new file mode 100644
index 000000000..ab0f08b2f
--- /dev/null
+++ b/packages/merchant-backend-ui/tests/__mocks__/setupTests.ts
@@ -0,0 +1,28 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+ /**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import 'regenerator-runtime/runtime'
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-preact-pure';
+
+configure({
+    adapter: new Adapter()
+});
diff --git a/packages/merchant-backend-ui/tests/funcitons/regex.test.ts b/packages/merchant-backend-ui/tests/funcitons/regex.test.ts
new file mode 100644
index 000000000..fc8a6a42f
--- /dev/null
+++ b/packages/merchant-backend-ui/tests/funcitons/regex.test.ts
@@ -0,0 +1,87 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+ /**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { AMOUNT_REGEX, PAYTO_REGEX } from "../../src/utils/constants";
+
+describe('payto uri format', () => {
+  const valids = [
+    'payto://iban/DE75512108001245126199?amount=EUR:200.0&message=hello',
+    'payto://ach/122000661/1234',
+    'payto://upi/alice@example.com?receiver-name=Alice&amount=INR:200',
+    'payto://void/?amount=EUR:10.5',
+    'payto://ilp/g.acme.bob'
+  ]
+  
+  test('should be valid', () => {
+    valids.forEach(v => expect(v).toMatch(PAYTO_REGEX))
+  });
+  
+  const invalids = [
+    // has two question marks
+    'payto://iban/DE75?512108001245126199?amount=EUR:200.0&message=hello',
+    // has a space
+    'payto://ach /122000661/1234',
+    // has a space
+    'payto://upi/alice@ example.com?receiver-name=Alice&amount=INR:200',
+    // invalid field name (mount instead of amount)
+    'payto://void/?mount=EUR:10.5',
+    // payto:// is incomplete
+    'payto: //ilp/g.acme.bob'
+  ]
+  
+  test('should not be valid', () => {
+    invalids.forEach(v => expect(v).not.toMatch(PAYTO_REGEX))
+  });  
+})
+
+describe('amount format', () => {
+  const valids = [
+    'ARS:10',
+    'COL:10.2',
+    'UY:1,000.2',
+    'ARS:10.123,123',
+    'ARS:1,000,000',
+    'ARSCOL:10',
+    'THISISTHEMOTHERCOIN:1,000,000.123,123',
+  ]
+  
+  test('should be valid', () => {
+    valids.forEach(v => expect(v).toMatch(AMOUNT_REGEX))
+  });
+  
+  const invalids = [
+    //no currency name
+    ':10',
+    //use . instead of ,
+    'ARS:1.000.000',
+    //currency name with numbers
+    '1ARS:10',
+    //currency name with numbers
+    'AR5:10',
+    //missing value
+    'USD:',
+  ]
+  
+  test('should not be valid', () => {
+    invalids.forEach(v => expect(v).not.toMatch(AMOUNT_REGEX))
+  });  
+
+})
\ No newline at end of file
diff --git a/packages/merchant-backend-ui/tests/util.ts b/packages/merchant-backend-ui/tests/util.ts
new file mode 100644
index 000000000..14b82b51c
--- /dev/null
+++ b/packages/merchant-backend-ui/tests/util.ts
@@ -0,0 +1,62 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+import * as axios from 'axios';
+
+type Query<Req, Res> = (GetQuery | PostQuery | DeleteQuery | PatchQuery) & RequestResponse<Req, Res>
+
+interface RequestResponse<Req, Res> {
+  request?: Req,
+  params?: any,
+  response?: Res,
+}
+interface GetQuery { get: string }
+interface PostQuery { post: string }
+interface DeleteQuery { delete: string }
+interface PatchQuery { patch: string }
+
+export function simulateBackendResponse<R, T>(query: Query<R, T>): void {
+  (axios.default as jest.MockedFunction<axios.AxiosStatic>).mockImplementationOnce(function (opt?: axios.AxiosRequestConfig): axios.AxiosPromise {
+      // console.log(opt, JSON.stringify(query,undefined,2))
+      expect(opt).toBeDefined();
+      if (!opt)
+        return Promise.reject();
+
+      // expect(query.request).toStrictEqual(opt.data);
+      // expect(query.params).toStrictEqual(opt.params);
+      if ('get' in query) {
+        expect(opt.method).toBe('get');
+        expect(opt.url).toBe(query.get);
+      }
+      if ('post' in query) {
+        expect(opt.method).toBe('post');
+        expect(opt.url).toBe(query.post);
+      }
+      if ('delete' in query) {
+        expect(opt.method).toBe('delete');
+        expect(opt.url).toBe(query.delete);
+      }
+      if ('patch' in query) {
+        expect(opt.method).toBe('patch');
+        expect(opt.url).toBe(query.patch);
+      }
+      return ({ data: query.response, config: {} } as any);
+    } as any)
+}
diff --git a/packages/merchant-backend-ui/tsconfig.back.json b/packages/merchant-backend-ui/tsconfig.back.json
new file mode 100644
index 000000000..9ac5a3c25
--- /dev/null
+++ b/packages/merchant-backend-ui/tsconfig.back.json
@@ -0,0 +1,23 @@
+{
+    "compilerOptions": {
+      "composite": true,
+      "lib": ["es6", "DOM"],
+      "jsx": "react",
+      "jsxFactory": "h",
+      "jsxFragmentFactory": "Fragment",
+      "moduleResolution": "Node",
+      "module": "ESNext",
+      "target": "ES6",
+      "noImplicitAny": true,
+      "noEmitOnError": true,
+      "strict": true,
+      "incremental": true,
+      "sourceMap": true,
+      "esModuleInterop": true,
+      "importHelpers": true,
+      "rootDir": "./src",
+      "typeRoots": ["./node_modules/@types"]
+    },
+    "include": ["src/**/*"]
+  }
+  
\ No newline at end of file
diff --git a/packages/merchant-backend-ui/tsconfig.json b/packages/merchant-backend-ui/tsconfig.json
new file mode 100644
index 000000000..7a4d70a17
--- /dev/null
+++ b/packages/merchant-backend-ui/tsconfig.json
@@ -0,0 +1,61 @@
+{
+  "compilerOptions": {
+      /* Basic Options */
+      "target": "ES6",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
+      "module": "ESNext",                       /* Specify module code generation: 'none', commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+      // "lib": [],                             /* Specify library files to be included in the compilation:  */
+      "allowJs": true,                          /* Allow javascript files to be compiled. */
+      // "checkJs": true,                       /* Report errors in .js files. */
+      "jsx": "react",                           /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+      "jsxFactory": "h",                        /* Specify the JSX factory function to use when targeting react JSX emit, e.g. React.createElement or h. */
+      "jsxFragmentFactory": "Fragment",         // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-0.html#custom-jsx-factories
+      // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
+      // "sourceMap": true,                     /* Generates corresponding '.map' file. */
+      // "outFile": "./",                       /* Concatenate and emit output to single file. */
+      // "outDir": "./",                        /* Redirect output structure to the directory. */
+      // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+      // "removeComments": true,                /* Do not emit comments to output. */
+      "noEmit": true,                           /* Do not emit outputs. */
+      // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
+      // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+      // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+
+      /* Strict Type-Checking Options */
+      "strict": true,                           /* Enable all strict type-checking options. */
+      // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+      // "strictNullChecks": true,              /* Enable strict null checks. */
+      // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
+      // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
+
+      /* Additional Checks */
+      // "noUnusedLocals": true,                /* Report errors on unused locals. */
+      // "noUnusedParameters": true,            /* Report errors on unused parameters. */
+      // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
+      // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
+
+      /* Module Resolution Options */
+      "moduleResolution": "node",               /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+      "esModuleInterop": true,                  /* */
+      // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
+      // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+      // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
+      // "typeRoots": [],                       /* List of folders to include type definitions from. */
+      // "types": [],                           /* Type declaration files to be included in compilation. */
+      // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+      // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+
+      /* Source Map Options */
+      // "sourceRoot": "./",                    /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+      // "mapRoot": "./",                       /* Specify the location where debugger should locate map files instead of generated locations. */
+      // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+      // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+
+      /* Experimental Options */
+      // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
+      // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+
+      /* Advanced Options */
+      "skipLibCheck": true                      /* Skip type checking of declaration files. */
+  },
+  "include": ["src/**/*", "tests/**/*"]
+}
diff --git a/packages/merchant-backoffice-ui/.gitignore b/packages/merchant-backoffice-ui/.gitignore
new file mode 100644
index 000000000..df149101c
--- /dev/null
+++ b/packages/merchant-backoffice-ui/.gitignore
@@ -0,0 +1,6 @@
+/build
+/size-plugin.json
+/storybook-static
+/docs
+/single
+/coverage
diff --git a/packages/merchant-backoffice-ui/.storybook/.babelrc b/packages/merchant-backoffice-ui/.storybook/.babelrc
new file mode 100644
index 000000000..610b6f339
--- /dev/null
+++ b/packages/merchant-backoffice-ui/.storybook/.babelrc
@@ -0,0 +1,25 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+ /**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+{
+    "presets": [
+        "preact-cli/babel"
+    ]
+}
\ No newline at end of file
diff --git a/packages/merchant-backoffice-ui/.storybook/main.js b/packages/merchant-backoffice-ui/.storybook/main.js
new file mode 100644
index 000000000..f8e4bbcc7
--- /dev/null
+++ b/packages/merchant-backoffice-ui/.storybook/main.js
@@ -0,0 +1,57 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/preset-scss",
+    "@storybook/addon-a11y",
+    "@storybook/addon-essentials" //docs, control, actions, viewpot, toolbar, background
+  ],
+  // sb does not yet support new jsx transform by default
+  // https://github.com/storybookjs/storybook/issues/12881
+  // https://github.com/storybookjs/storybook/issues/12952
+  babel: async (options) => ({
+    ...options,
+    presets: [
+      ...options.presets,
+      [
+        '@babel/preset-react', {
+          runtime: 'automatic',
+        },
+        'preset-react-jsx-transform' 
+      ],
+    ],
+  }),
+  webpackFinal: (config) => {
+    // should be removed after storybook 6.3
+    // https://github.com/storybookjs/storybook/issues/12853#issuecomment-821576113
+    config.resolve.alias = {
+      react: "preact/compat",
+      "react-dom": "preact/compat",
+    };
+    return config;
+  },
+}
\ No newline at end of file
diff --git a/packages/merchant-backoffice-ui/.storybook/preview.js b/packages/merchant-backoffice-ui/.storybook/preview.js
new file mode 100644
index 000000000..d13103ac9
--- /dev/null
+++ b/packages/merchant-backoffice-ui/.storybook/preview.js
@@ -0,0 +1,74 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import "../src/scss/main.scss"
+import { ConfigContextProvider } from '../src/context/config'
+import { InstanceContextProvider } from '../src/context/instance'
+import { TranslationProvider } from '../src/context/translation'
+import { BackendContextProvider } from '../src/context/backend'
+import { h } from 'preact';
+
+const mockConfig = {
+  backendURL: 'http://demo.taler.net',
+  currency: 'TESTKUDOS'
+}
+
+const mockInstance = {
+  id: 'instance-id',
+  token: 'instance-token',
+  admin: false,
+}
+
+const mockBackend = {
+  url: 'http://merchant.url',
+  token: 'default-token',
+  triedToLog: false,
+}
+
+export const parameters = {
+  controls: { expanded: true },
+  // actions: { argTypesRegex: "^on.*" },
+}
+
+export const globalTypes = {
+  locale: {
+    name: 'Locale',
+    description: 'Internationalization locale',
+    defaultValue: 'en',
+    toolbar: {
+      icon: 'globe',
+      items: [
+        { value: 'en', right: '🇺🇸', title: 'English' },
+        { value: 'es', right: '🇪🇸', title: 'Spanish' },
+      ],
+    },
+  },
+};
+
+export const decorators = [
+  (Story, { globals }) => <TranslationProvider initial='en' forceLang={globals.locale}>
+    <Story />
+  </TranslationProvider>,
+  (Story) => <ConfigContextProvider value={mockConfig}>
+    <Story />
+  </ConfigContextProvider>,
+  (Story) => <InstanceContextProvider value={mockInstance}>
+    <Story />
+  </InstanceContextProvider>,
+  (Story) => <BackendContextProvider defaultUrl={mockBackend.url}>
+    <Story />
+  </BackendContextProvider>,
+];
diff --git a/packages/merchant-backoffice-ui/contrib/po2ts b/packages/merchant-backoffice-ui/contrib/po2ts
new file mode 100755
index 000000000..a135da61b
--- /dev/null
+++ b/packages/merchant-backoffice-ui/contrib/po2ts
@@ -0,0 +1,42 @@
+#!/usr/bin/env node
+/*
+ This file is part of GNU Taler
+ (C) 2020 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ * Convert a <lang>.po file into a JavaScript / TypeScript expression.
+ */
+
+const po2json = require("po2json");
+
+const filename = process.argv[2];
+
+if (!filename) {
+  console.error("error: missing filename");
+  process.exit(1);
+}
+
+const m = filename.match(/([a-zA-Z0-9-_]+).po/);
+
+if (!m) {
+  console.error("error: unexpected filename (expected <lang>.po)");
+  process.exit(1);
+}
+
+const lang = m[1];
+const pojson = po2json.parseFileSync(filename, { format: "jed1.x", fuzzy: true });
+const s =
+  "strings['" + lang + "'] = " + JSON.stringify(pojson, null, "  ") + ";\n";
+console.log(s);
diff --git a/packages/merchant-backoffice-ui/copyleft-header.js b/packages/merchant-backoffice-ui/copyleft-header.js
new file mode 100644
index 000000000..0794cb839
--- /dev/null
+++ b/packages/merchant-backoffice-ui/copyleft-header.js
@@ -0,0 +1,15 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
diff --git a/packages/merchant-backoffice-ui/package.json b/packages/merchant-backoffice-ui/package.json
new file mode 100644
index 000000000..ac90dd5cb
--- /dev/null
+++ b/packages/merchant-backoffice-ui/package.json
@@ -0,0 +1,123 @@
+{
+  "private": true,
+  "name": "merchant-backoffice",
+  "version": "0.0.4",
+  "license": "MIT",
+  "scripts": {
+    "build": "preact build --no-sw --no-esm",
+    "compile": "tsc",
+    "serve": "sirv build --port ${PORT:=8080} --cors --single",
+    "dev": "preact watch --port ${PORT:=8080} --no-sw --no-esm",
+    "lint-check": "eslint '{src,tests}/**/*.{js,jsx,ts,tsx}'",
+    "lint-fix": "eslint --fix '{src,tests}/**/*.{js,jsx,ts,tsx}'",
+    "test": "jest ./tests",
+    "dev-test": "jest ./tests --watch",
+    "typedoc": "typedoc src",
+    "clean": "rimraf build storybook-static docs single",
+    "build-single": "preact build --no-sw --no-esm -c preact.single-config.js --dest single && sh remove-link-stylesheet.sh",
+    "serve-single": "sirv single --port ${PORT:=8080} --cors --single",
+    "build-storybook": "build-storybook",
+    "storybook": "start-storybook -p 6006"
+  },
+  "engines": {
+    "node": ">=12",
+    "pnpm": ">=5"
+  },
+  "eslintConfig": {
+    "parser": "@typescript-eslint/parser",
+    "extends": [
+      "preact",
+      "plugin:@typescript-eslint/recommended"
+    ],
+    "plugins": [
+      "header"
+    ],
+    "rules": {
+      "header/header": [
+        2,
+        "copyleft-header.js"
+      ]
+    },
+    "ignorePatterns": [
+      "build/"
+    ]
+  },
+  "dependencies": {
+    "@gnu-taler/taler-util": "workspace:*",
+    "axios": "^0.21.1",
+    "date-fns": "^2.21.1",
+    "history": "4.10.1",
+    "jed": "^1.1.1",
+    "preact": "10.6.1",
+    "preact-router": "^3.2.1",
+    "qrcode-generator": "^1.4.4",
+    "swr": "1.1.0",
+    "yup": "^0.32.9"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.13.16",
+    "@babel/plugin-transform-react-jsx-source": "^7.12.13",
+    "@creativebulma/bulma-tooltip": "^1.2.0",
+    "@gnu-taler/pogen": "^0.0.5",
+    "@storybook/addon-a11y": "^6.2.9",
+    "@storybook/addon-actions": "^6.2.9",
+    "@storybook/addon-essentials": "^6.2.9",
+    "@storybook/addon-links": "^6.2.9",
+    "@storybook/preact": "^6.2.9",
+    "@storybook/preset-scss": "^1.0.3",
+    "@testing-library/preact": "^2.0.1",
+    "@testing-library/preact-hooks": "^1.1.0",
+    "@types/history": "^4.7.8",
+    "@types/jest": "^26.0.23",
+    "@types/mocha": "^8.2.2",
+    "@typescript-eslint/eslint-plugin": "^4.22.0",
+    "@typescript-eslint/parser": "^4.22.0",
+    "babel-loader": "^8.2.2",
+    "base64-inline-loader": "^1.1.1",
+    "bulma": "^0.9.2",
+    "bulma-checkbox": "^1.1.1",
+    "bulma-radio": "^1.1.1",
+    "bulma-responsive-tables": "^1.2.3",
+    "bulma-switch-control": "^1.1.1",
+    "bulma-timeline": "^3.0.4",
+    "bulma-upload-control": "^1.2.0",
+    "dotenv": "^8.2.0",
+    "eslint": "^7.25.0",
+    "eslint-config-preact": "^1.1.4",
+    "eslint-plugin-header": "^3.1.1",
+    "html-webpack-inline-chunk-plugin": "^1.1.1",
+    "html-webpack-inline-source-plugin": "0.0.10",
+    "html-webpack-skip-assets-plugin": "^1.0.1",
+    "inline-chunk-html-plugin": "^1.1.1",
+    "jest": "^26.6.3",
+    "jest-preset-preact": "^4.0.2",
+    "po2json": "^0.4.5",
+    "preact-cli": "^3.0.5",
+    "preact-render-to-json": "^3.6.6",
+    "preact-render-to-string": "^5.1.19",
+    "rimraf": "^3.0.2",
+    "sass": "^1.32.13",
+    "sass-loader": "10.1.1",
+    "script-ext-html-webpack-plugin": "^2.1.5",
+    "sirv-cli": "^1.0.11",
+    "typedoc": "^0.20.36",
+    "typescript": "^4.2.4"
+  },
+  "jest": {
+    "preset": "jest-preset-preact",
+    "transformIgnorePatterns": [
+      "node_modules/.pnpm/(?!(@gnu-taler\\+taler-util))",
+      "\\.pnp\\.[^\\/]+$"
+    ],
+    "setupFiles": [
+      "<rootDir>/tests/__mocks__/browserMocks.ts",
+      "<rootDir>/tests/__mocks__/setupTests.ts"
+    ],
+    "moduleNameMapper": {
+      "\\.(css|less)$": "identity-obj-proxy"
+    },
+    "transform": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|po)$": "<rootDir>/tests/__mocks__/fileTransformer.js"
+    }
+  }
+}
diff --git a/packages/merchant-backoffice-ui/preact.config.js b/packages/merchant-backoffice-ui/preact.config.js
new file mode 100644
index 000000000..8e640f3ff
--- /dev/null
+++ b/packages/merchant-backoffice-ui/preact.config.js
@@ -0,0 +1,70 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { DefinePlugin } from 'webpack';
+
+import pack from './package.json';
+import * as cp from 'child_process';
+
+const commitHash = cp.execSync('git rev-parse --short HEAD').toString();
+
+export default {
+  webpack(config, env, helpers) {
+    // ensure that process.env will not be undefined on runtime
+    config.node.process = 'mock'
+
+    // add __VERSION__ to be use in the html
+    config.plugins.push(
+      new DefinePlugin({
+        'process.env.__VERSION__': JSON.stringify(env.isProd ? pack.version : `dev-${commitHash}`) ,
+      }),
+    );
+
+    // suddenly getting out of memory error from build process, error below [1]
+    // FIXME: remove preact-cli, use rollup
+    let { index } = helpers.getPluginsByName(config, 'WebpackFixStyleOnlyEntriesPlugin')[0]
+    config.plugins.splice(index, 1)   
+  }
+}
+
+
+
+/* [1] from this error decided to remove plugin 'webpack-fix-style-only-entries
+   leaving this error for future reference
+
+
+<--- Last few GCs --->
+
+[32479:0x2e01870]    19969 ms: Mark-sweep 1869.4 (1950.2) -> 1443.1 (1504.1) MB, 497.5 / 0.0 ms  (average mu = 0.631, current mu = 0.455) allocation failure scavenge might not succeed
+[32479:0x2e01870]    21907 ms: Mark-sweep 2016.9 (2077.9) -> 1628.6 (1681.4) MB, 1596.0 / 0.0 ms  (average mu = 0.354, current mu = 0.176) allocation failure scavenge might not succeed
+
+<--- JS stacktrace --->
+
+==== JS stack trace =========================================
+
+    0: ExitFrame [pc: 0x13cf099]
+Security context: 0x2f4ca66c08d1 <JSObject>
+    1: /* anonymous * / [0x35d05555b4b9] [...path/merchant-backoffice/node_modules/.pnpm/webpack-fix-style-only-entries@0.5.2/node_modules/webpack-fix-style-only-entries/index.js:~80] [pc=0x2145e699d1a4](this=0x1149465410e9 <GlobalObject Object map = 0xff481b5b5f9>,0x047e52e36a49 <Dependency map = 0x1ed1fe41cd19>)
+    2: arguments adaptor frame: 3...
+
+FATAL ERROR: invalid array length Allocation failed - JavaScript heap out of memory
+ 
+*/
\ No newline at end of file
diff --git a/packages/merchant-backoffice-ui/preact.single-config.js b/packages/merchant-backoffice-ui/preact.single-config.js
new file mode 100644
index 000000000..61a79bb8a
--- /dev/null
+++ b/packages/merchant-backoffice-ui/preact.single-config.js
@@ -0,0 +1,62 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import defaultConfig from './preact.config'
+
+export default {
+  webpack(config, env, helpers, options) {
+    defaultConfig.webpack(config, env, helpers, options)
+
+    //1. check no file is under /routers or /component/{routers,async} to prevent async components
+    // https://github.com/preactjs/preact-cli#route-based-code-splitting
+
+    //2. remove devtools to prevent sourcemaps
+    config.devtool = false
+
+    //3. change assetLoader to load assets inline
+    const loaders = helpers.getLoaders(config)
+    const assetsLoader = loaders.find(lo => lo.rule.test.test('something.woff'))
+    if (assetsLoader) {
+      assetsLoader.rule.use = 'base64-inline-loader'
+      assetsLoader.rule.loader = undefined
+    }
+
+    //4. remove critters
+    //critters remove the css bundle from htmlWebpackPlugin.files.css
+    //for now, pushing all the content into the html is enough
+    const crittersWrapper = helpers.getPluginsByName(config, 'Critters')
+    if (crittersWrapper && crittersWrapper.length > 0) {
+      const [{ index }] = crittersWrapper
+      config.plugins.splice(index, 1)
+    }
+
+    //5. remove favicon from src/assets
+
+    //6. remove performance hints since we now that this is going to be big
+    if (config.performance) {
+      config.performance.hints = false
+    }
+
+    //7. template.html should have a favicon and add js/css content
+
+    //last, after building remove the mysterious link to stylesheet with remove-link-stylesheet.sh
+  }
+}
diff --git a/packages/merchant-backoffice-ui/remove-link-stylesheet.sh b/packages/merchant-backoffice-ui/remove-link-stylesheet.sh
new file mode 100644
index 000000000..fdf8f241c
--- /dev/null
+++ b/packages/merchant-backoffice-ui/remove-link-stylesheet.sh
@@ -0,0 +1,8 @@
+# This script has been placed in the public domain.
+
+FILE=$(ls single/bundle.*.css)
+BUNDLE=${FILE#single}
+grep -q '<link href="'$BUNDLE'" rel="stylesheet">' single/index.html || { echo bundle $BUNDLE not found in index.html; exit 1; }
+echo -n Removing link from index.html ...
+sed 's_<link href="'$BUNDLE'" rel="stylesheet">__' -i single/index.html
+echo done
diff --git a/packages/merchant-backoffice-ui/src/.babelrc b/packages/merchant-backoffice-ui/src/.babelrc
new file mode 100644
index 000000000..3ec8a6291
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/.babelrc
@@ -0,0 +1,26 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+ /**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+{
+    "presets": [ 
+        "preact-cli/babel"
+    ]
+}
diff --git a/packages/merchant-backoffice-ui/src/AdminRoutes.tsx b/packages/merchant-backoffice-ui/src/AdminRoutes.tsx
new file mode 100644
index 000000000..a3ffbe2e6
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/AdminRoutes.tsx
@@ -0,0 +1,58 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+import { h, VNode } from "preact";
+import Router, { route, Route } from "preact-router";
+import InstanceCreatePage from "./paths/admin/create";
+import InstanceListPage from './paths/admin/list';
+
+
+export enum AdminPaths {
+  list_instances = '/instances',
+  new_instance = '/instance/new',
+}
+
+export function AdminRoutes(): VNode {
+  
+  return <Router>
+
+    <Route path={AdminPaths.list_instances} component={InstanceListPage}
+
+      onCreate={() => {
+        route(AdminPaths.new_instance);
+      }}
+
+      onUpdate={(id: string): void => {
+        route(`/instance/${id}/update`);
+      }}
+
+    />
+
+    <Route path={AdminPaths.new_instance} component={InstanceCreatePage}
+
+      onBack={() => route(AdminPaths.list_instances)}
+
+      onConfirm={() => {
+        // route(AdminPaths.list_instances);
+      }}
+
+      // onError={(error: any) => {
+      // }}
+      
+    />
+
+
+  </Router>
+}
\ No newline at end of file
diff --git a/packages/merchant-backoffice-ui/src/ApplicationReadyRoutes.tsx b/packages/merchant-backoffice-ui/src/ApplicationReadyRoutes.tsx
new file mode 100644
index 000000000..ebc3d1d95
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/ApplicationReadyRoutes.tsx
@@ -0,0 +1,120 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+import { Fragment, h, VNode } from "preact";
+import Router, { Route, route } from "preact-router";
+import { useBackendContext } from "./context/backend";
+import { useBackendInstancesTestForAdmin } from "./hooks/backend";
+import { InstanceRoutes } from "./InstanceRoutes";
+import LoginPage from "./paths/login";
+import { INSTANCE_ID_LOOKUP } from "./utils/constants";
+import { NotYetReadyAppMenu, Menu, NotificationCard } from "./components/menu";
+import { useTranslator } from "./i18n";
+import { createHashHistory } from "history";
+import { useState } from "preact/hooks";
+
+export function ApplicationReadyRoutes(): VNode {
+  const i18n = useTranslator();
+  const {
+    url: backendURL,
+    updateLoginStatus,
+    clearAllTokens,
+  } = useBackendContext();
+
+  const result = useBackendInstancesTestForAdmin();
+
+  const clearTokenAndGoToRoot = () => {
+    clearAllTokens();
+    route("/");
+  };
+
+  if (result.clientError && result.isUnauthorized) {
+    return (
+      <Fragment>
+        <NotYetReadyAppMenu title="Login" onLogout={clearTokenAndGoToRoot} />
+        <NotificationCard
+          notification={{
+            message: i18n`Access denied`,
+            description: i18n`Check your token is valid`,
+            type: "ERROR",
+          }}
+        />
+        <LoginPage onConfirm={updateLoginStatus} />
+      </Fragment>
+    );
+  }
+
+  if (result.loading) return <NotYetReadyAppMenu title="Loading..." />;
+
+  let admin = true;
+  let instanceNameByBackendURL;
+
+  if (!result.ok) {
+    const path = new URL(backendURL).pathname;
+    const match = INSTANCE_ID_LOOKUP.exec(path);
+    if (!match || !match[1]) {
+      // this should be rare because
+      // query to /config is ok but the URL
+      // does not match our pattern
+      return (
+        <Fragment>
+          <NotYetReadyAppMenu title="Error" onLogout={clearTokenAndGoToRoot} />
+          <NotificationCard
+            notification={{
+              message: i18n`Couldn't access the server.`,
+              description: i18n`Could not infer instance id from url ${backendURL}`,
+              type: "ERROR",
+            }}
+          />
+          <LoginPage onConfirm={updateLoginStatus} />
+        </Fragment>
+      );
+    }
+
+    admin = false;
+    instanceNameByBackendURL = match[1];
+  }
+
+  const history = createHashHistory();
+  return (
+    <Router history={history}>
+      <Route
+        default
+        component={DefaultMainRoute}
+        admin={admin}
+        instanceNameByBackendURL={instanceNameByBackendURL}
+      />
+    </Router>
+  );
+}
+
+function DefaultMainRoute({ instance, admin, instanceNameByBackendURL }: any) {
+  const [instanceName, setInstanceName] = useState(
+    instanceNameByBackendURL || instance || "default"
+  );
+
+  return (
+    <InstanceRoutes
+      admin={admin}
+      id={instanceName}
+      setInstanceName={setInstanceName}
+    />
+  );
+}
diff --git a/packages/merchant-backoffice-ui/src/InstanceRoutes.tsx b/packages/merchant-backoffice-ui/src/InstanceRoutes.tsx
new file mode 100644
index 000000000..06f1db17c
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/InstanceRoutes.tsx
@@ -0,0 +1,528 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { Fragment, FunctionComponent, h, VNode } from "preact";
+import { Route, route, Router } from "preact-router";
+import { useCallback, useEffect, useMemo, useState } from "preact/hooks";
+import { Loading } from "./components/exception/loading";
+import { Menu, NotificationCard } from "./components/menu";
+import { useBackendContext } from "./context/backend";
+import { InstanceContextProvider } from "./context/instance";
+import {
+  useBackendDefaultToken,
+  useBackendInstanceToken,
+  useLocalStorage,
+} from "./hooks";
+import { HttpError } from "./hooks/backend";
+import { Translate, useTranslator } from "./i18n";
+import InstanceCreatePage from "./paths/admin/create";
+import InstanceListPage from "./paths/admin/list";
+import OrderCreatePage from "./paths/instance/orders/create";
+import OrderDetailsPage from "./paths/instance/orders/details";
+import OrderListPage from "./paths/instance/orders/list";
+import ProductCreatePage from "./paths/instance/products/create";
+import ProductListPage from "./paths/instance/products/list";
+import ProductUpdatePage from "./paths/instance/products/update";
+import TransferListPage from "./paths/instance/transfers/list";
+import TransferCreatePage from "./paths/instance/transfers/create";
+import ReservesCreatePage from "./paths/instance/reserves/create";
+import ReservesDetailsPage from "./paths/instance/reserves/details";
+import ReservesListPage from "./paths/instance/reserves/list";
+import ListKYCPage from "./paths/instance/kyc/list";
+import InstanceUpdatePage, {
+  Props as InstanceUpdatePageProps,
+  AdminUpdate as InstanceAdminUpdatePage,
+} from "./paths/instance/update";
+import LoginPage from "./paths/login";
+import NotFoundPage from "./paths/notfound";
+import { Notification } from "./utils/types";
+import { useInstanceKYCDetails } from "./hooks/instance";
+import { format } from "date-fns";
+
+export enum InstancePaths {
+  // details = '/',
+  error = "/error",
+  update = "/update",
+
+  product_list = "/products",
+  product_update = "/product/:pid/update",
+  product_new = "/product/new",
+
+  order_list = "/orders",
+  order_new = "/order/new",
+  order_details = "/order/:oid/details",
+
+  reserves_list = "/reserves",
+  reserves_details = "/reserves/:rid/details",
+  reserves_new = "/reserves/new",
+
+  kyc = "/kyc",
+
+  transfers_list = "/transfers",
+  transfers_new = "/transfer/new",
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop = () => {};
+
+export enum AdminPaths {
+  list_instances = "/instances",
+  new_instance = "/instance/new",
+  update_instance = "/instance/:id/update",
+}
+
+export interface Props {
+  id: string;
+  admin?: boolean;
+  setInstanceName: (s: string) => void;
+}
+
+export function InstanceRoutes({ id, admin, setInstanceName }: Props): VNode {
+  const [_, updateDefaultToken] = useBackendDefaultToken();
+  const [token, updateToken] = useBackendInstanceToken(id);
+  const {
+    updateLoginStatus: changeBackend,
+    addTokenCleaner,
+    clearAllTokens,
+  } = useBackendContext();
+  const cleaner = useCallback(() => {
+    updateToken(undefined);
+  }, [id]);
+  const i18n = useTranslator();
+
+  type GlobalNotifState = (Notification & { to: string }) | undefined;
+  const [globalNotification, setGlobalNotification] =
+    useState<GlobalNotifState>(undefined);
+
+  useEffect(() => {
+    addTokenCleaner(cleaner);
+  }, [addTokenCleaner, cleaner]);
+
+  const changeToken = (token?: string) => {
+    if (admin) {
+      updateToken(token);
+    } else {
+      updateDefaultToken(token);
+    }
+  };
+  const updateLoginStatus = (url: string, token?: string) => {
+    changeBackend(url);
+    if (!token) return;
+    changeToken(token);
+  };
+
+  const value = useMemo(
+    () => ({ id, token, admin, changeToken }),
+    [id, token, admin]
+  );
+
+  function ServerErrorRedirectTo(to: InstancePaths | AdminPaths) {
+    return function ServerErrorRedirectToImpl(error: HttpError) {
+      setGlobalNotification({
+        message: i18n`The backend reported a problem: HTTP status #${error.status}`,
+        description: i18n`Diagnostic from ${error.info?.url} is "${error.message}"`,
+        details:
+          error.clientError || error.serverError
+            ? error.error?.detail
+            : undefined,
+        type: "ERROR",
+        to,
+      });
+      return <Redirect to={to} />;
+    };
+  }
+
+  const LoginPageAccessDenied = () => (
+    <Fragment>
+      <NotificationCard
+        notification={{
+          message: i18n`Access denied`,
+          description: i18n`The access token provided is invalid.`,
+          type: "ERROR",
+        }}
+      />
+      <LoginPage onConfirm={updateLoginStatus} />
+    </Fragment>
+  );
+
+  function IfAdminCreateDefaultOr<T>(Next: FunctionComponent<any>) {
+    return function IfAdminCreateDefaultOrImpl(props?: T) {
+      if (admin && id === "default") {
+        return (
+          <Fragment>
+            <NotificationCard
+              notification={{
+                message: i18n`No 'default' instance configured yet.`,
+                description: i18n`Create a 'default' instance to begin using the merchant backoffice.`,
+                type: "INFO",
+              }}
+            />
+            <InstanceCreatePage
+              forceId="default"
+              onConfirm={() => {
+                route(AdminPaths.list_instances);
+              }}
+            />
+          </Fragment>
+        );
+      }
+      if (props) {
+        return <Next {...props} />;
+      }
+      return <Next />;
+    };
+  }
+
+  const clearTokenAndGoToRoot = () => {
+    clearAllTokens();
+    route("/");
+  };
+
+  return (
+    <InstanceContextProvider value={value}>
+      <Menu
+        instance={id}
+        admin={admin}
+        onLogout={clearTokenAndGoToRoot}
+        setInstanceName={setInstanceName}
+      />
+      <KycBanner />
+      <NotificationCard notification={globalNotification} />
+
+      <Router
+        onChange={(e) => {
+          const movingOutFromNotification =
+            globalNotification && e.url !== globalNotification.to;
+          if (movingOutFromNotification) {
+            setGlobalNotification(undefined);
+          }
+        }}
+      >
+        <Route path="/" component={Redirect} to={InstancePaths.order_list} />
+
+        {/**
+         * Admin pages
+         */}
+        {admin && (
+          <Route
+            path={AdminPaths.list_instances}
+            component={InstanceListPage}
+            onCreate={() => {
+              route(AdminPaths.new_instance);
+            }}
+            onUpdate={(id: string): void => {
+              route(`/instance/${id}/update`);
+            }}
+            setInstanceName={setInstanceName}
+            onUnauthorized={LoginPageAccessDenied}
+            onLoadError={ServerErrorRedirectTo(InstancePaths.error)}
+          />
+        )}
+
+        {admin && (
+          <Route
+            path={AdminPaths.new_instance}
+            component={InstanceCreatePage}
+            onBack={() => route(AdminPaths.list_instances)}
+            onConfirm={() => {
+              route(AdminPaths.list_instances);
+            }}
+          />
+        )}
+
+        {admin && (
+          <Route
+            path={AdminPaths.update_instance}
+            component={AdminInstanceUpdatePage}
+            onBack={() => route(AdminPaths.list_instances)}
+            onConfirm={() => {
+              route(AdminPaths.list_instances);
+            }}
+            onUpdateError={ServerErrorRedirectTo(AdminPaths.list_instances)}
+            onLoadError={ServerErrorRedirectTo(AdminPaths.list_instances)}
+            onNotFound={NotFoundPage}
+          />
+        )}
+
+        {/**
+         * Update instance page
+         */}
+        <Route
+          path={InstancePaths.update}
+          component={InstanceUpdatePage}
+          onBack={() => {
+            route(`/`);
+          }}
+          onConfirm={() => {
+            route(`/`);
+          }}
+          onUpdateError={noop}
+          onNotFound={IfAdminCreateDefaultOr(NotFoundPage)}
+          onUnauthorized={LoginPageAccessDenied}
+          onLoadError={ServerErrorRedirectTo(InstancePaths.error)}
+        />
+
+        {/**
+         * Product pages
+         */}
+        <Route
+          path={InstancePaths.product_list}
+          component={ProductListPage}
+          onUnauthorized={LoginPageAccessDenied}
+          onLoadError={ServerErrorRedirectTo(InstancePaths.update)}
+          onCreate={() => {
+            route(InstancePaths.product_new);
+          }}
+          onSelect={(id: string) => {
+            route(InstancePaths.product_update.replace(":pid", id));
+          }}
+          onNotFound={IfAdminCreateDefaultOr(NotFoundPage)}
+        />
+        <Route
+          path={InstancePaths.product_update}
+          component={ProductUpdatePage}
+          onUnauthorized={LoginPageAccessDenied}
+          onLoadError={ServerErrorRedirectTo(InstancePaths.product_list)}
+          onConfirm={() => {
+            route(InstancePaths.product_list);
+          }}
+          onBack={() => {
+            route(InstancePaths.product_list);
+          }}
+          onNotFound={IfAdminCreateDefaultOr(NotFoundPage)}
+        />
+        <Route
+          path={InstancePaths.product_new}
+          component={ProductCreatePage}
+          onConfirm={() => {
+            route(InstancePaths.product_list);
+          }}
+          onBack={() => {
+            route(InstancePaths.product_list);
+          }}
+        />
+
+        {/**
+         * Order pages
+         */}
+        <Route
+          path={InstancePaths.order_list}
+          component={OrderListPage}
+          onCreate={() => {
+            route(InstancePaths.order_new);
+          }}
+          onSelect={(id: string) => {
+            route(InstancePaths.order_details.replace(":oid", id));
+          }}
+          onUnauthorized={LoginPageAccessDenied}
+          onLoadError={ServerErrorRedirectTo(InstancePaths.update)}
+          onNotFound={IfAdminCreateDefaultOr(NotFoundPage)}
+        />
+        <Route
+          path={InstancePaths.order_details}
+          component={OrderDetailsPage}
+          onUnauthorized={LoginPageAccessDenied}
+          onLoadError={ServerErrorRedirectTo(InstancePaths.order_list)}
+          onNotFound={IfAdminCreateDefaultOr(NotFoundPage)}
+          onBack={() => {
+            route(InstancePaths.order_list);
+          }}
+        />
+        <Route
+          path={InstancePaths.order_new}
+          component={OrderCreatePage}
+          onConfirm={() => {
+            route(InstancePaths.order_list);
+          }}
+          onBack={() => {
+            route(InstancePaths.order_list);
+          }}
+        />
+
+        {/**
+         * Transfer pages
+         */}
+        <Route
+          path={InstancePaths.transfers_list}
+          component={TransferListPage}
+          onUnauthorized={LoginPageAccessDenied}
+          onNotFound={IfAdminCreateDefaultOr(NotFoundPage)}
+          onLoadError={ServerErrorRedirectTo(InstancePaths.update)}
+          onCreate={() => {
+            route(InstancePaths.transfers_new);
+          }}
+        />
+
+        <Route
+          path={InstancePaths.transfers_new}
+          component={TransferCreatePage}
+          onConfirm={() => {
+            route(InstancePaths.transfers_list);
+          }}
+          onBack={() => {
+            route(InstancePaths.transfers_list);
+          }}
+        />
+
+        {/**
+         * reserves pages
+         */}
+        <Route
+          path={InstancePaths.reserves_list}
+          component={ReservesListPage}
+          onUnauthorized={LoginPageAccessDenied}
+          onNotFound={IfAdminCreateDefaultOr(NotFoundPage)}
+          onLoadError={ServerErrorRedirectTo(InstancePaths.update)}
+          onSelect={(id: string) => {
+            route(InstancePaths.reserves_details.replace(":rid", id));
+          }}
+          onCreate={() => {
+            route(InstancePaths.reserves_new);
+          }}
+        />
+
+        <Route
+          path={InstancePaths.reserves_details}
+          component={ReservesDetailsPage}
+          onUnauthorized={LoginPageAccessDenied}
+          onLoadError={ServerErrorRedirectTo(InstancePaths.reserves_list)}
+          onNotFound={IfAdminCreateDefaultOr(NotFoundPage)}
+          onBack={() => {
+            route(InstancePaths.reserves_list);
+          }}
+        />
+
+        <Route
+          path={InstancePaths.reserves_new}
+          component={ReservesCreatePage}
+          onConfirm={() => {
+            route(InstancePaths.reserves_list);
+          }}
+          onBack={() => {
+            route(InstancePaths.reserves_list);
+          }}
+        />
+
+        <Route path={InstancePaths.kyc} component={ListKYCPage} />
+        {/**
+         * Example pages
+         */}
+        <Route path="/loading" component={Loading} />
+        <Route default component={NotFoundPage} />
+      </Router>
+    </InstanceContextProvider>
+  );
+}
+
+export function Redirect({ to }: { to: string }): null {
+  useEffect(() => {
+    route(to, true);
+  });
+  return null;
+}
+
+function AdminInstanceUpdatePage({
+  id,
+  ...rest
+}: { id: string } & InstanceUpdatePageProps) {
+  const [token, changeToken] = useBackendInstanceToken(id);
+  const { updateLoginStatus: changeBackend } = useBackendContext();
+  const updateLoginStatus = (url: string, token?: string) => {
+    changeBackend(url);
+    if (token) changeToken(token);
+  };
+  const value = useMemo(
+    () => ({ id, token, admin: true, changeToken }),
+    [id, token]
+  );
+  const i18n = useTranslator();
+
+  return (
+    <InstanceContextProvider value={value}>
+      <InstanceAdminUpdatePage
+        {...rest}
+        instanceId={id}
+        onLoadError={(error: HttpError) => {
+          return (
+            <Fragment>
+              <NotificationCard
+                notification={{
+                  message: i18n`The backend reported a problem: HTTP status #${error.status}`,
+                  description: i18n`Diagnostic from ${error.info?.url} is "${error.message}"`,
+                  details:
+                    error.clientError || error.serverError
+                      ? error.error?.detail
+                      : undefined,
+                  type: "ERROR",
+                }}
+              />
+              <LoginPage onConfirm={updateLoginStatus} />
+            </Fragment>
+          );
+        }}
+        onUnauthorized={() => {
+          return (
+            <Fragment>
+              <NotificationCard
+                notification={{
+                  message: i18n`Access denied`,
+                  description: i18n`The access token provided is invalid`,
+                  type: "ERROR",
+                }}
+              />
+              <LoginPage onConfirm={updateLoginStatus} />
+            </Fragment>
+          );
+        }}
+      />
+    </InstanceContextProvider>
+  );
+}
+
+function KycBanner(): VNode {
+  const kycStatus = useInstanceKYCDetails();
+  const today = format(new Date(), "yyyy-MM-dd");
+  const [lastHide, setLastHide] = useLocalStorage("kyc-last-hide");
+  const hasBeenHidden = today === lastHide;
+  const needsToBeShown = kycStatus.ok && kycStatus.data.type === "redirect";
+  if (hasBeenHidden || !needsToBeShown) return <Fragment />;
+  return (
+    <NotificationCard
+      notification={{
+        type: "WARN",
+        message: "KYC verification needed",
+        description: (
+          <div>
+            <p>
+              Some transfer are on hold until a KYC process is completed. Go to
+              the KYC section in the left panel for more information
+            </p>
+            <div class="buttons is-right">
+              <button class="button" onClick={() => setLastHide(today)}>
+                <Translate>Hide for today</Translate>
+              </button>
+            </div>
+          </div>
+        ),
+      }}
+    />
+  );
+}
diff --git a/packages/merchant-backoffice-ui/src/assets/empty.png b/packages/merchant-backoffice-ui/src/assets/empty.png
new file mode 100644
index 000000000..5120d3138
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/assets/empty.png
diff --git a/packages/merchant-backoffice-ui/src/assets/icons/android-chrome-192x192.png b/packages/merchant-backoffice-ui/src/assets/icons/android-chrome-192x192.png
new file mode 100644
index 000000000..93ebe2e2c
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/assets/icons/android-chrome-192x192.png
diff --git a/packages/merchant-backoffice-ui/src/assets/icons/android-chrome-512x512.png b/packages/merchant-backoffice-ui/src/assets/icons/android-chrome-512x512.png
new file mode 100644
index 000000000..52d1623ea
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/assets/icons/android-chrome-512x512.png
diff --git a/packages/merchant-backoffice-ui/src/assets/icons/apple-touch-icon.png b/packages/merchant-backoffice-ui/src/assets/icons/apple-touch-icon.png
new file mode 100644
index 000000000..254e4bb4d
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/assets/icons/apple-touch-icon.png
diff --git a/packages/merchant-backoffice-ui/src/assets/icons/favicon-16x16.png b/packages/merchant-backoffice-ui/src/assets/icons/favicon-16x16.png
new file mode 100644
index 000000000..e81177dcb
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/assets/icons/favicon-16x16.png
diff --git a/packages/merchant-backoffice-ui/src/assets/icons/favicon-32x32.png b/packages/merchant-backoffice-ui/src/assets/icons/favicon-32x32.png
new file mode 100644
index 000000000..40e9b5b47
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/assets/icons/favicon-32x32.png
diff --git a/packages/merchant-backoffice-ui/src/assets/icons/languageicon.svg b/packages/merchant-backoffice-ui/src/assets/icons/languageicon.svg
new file mode 100644
index 000000000..22d58da65
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/assets/icons/languageicon.svg
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>

+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

+	 viewBox="0 0 2411.2 2794" style="enable-background:new 0 0 2411.2 2794;" xml:space="preserve">

+<style type="text/css">

+	.st0{fill:#FFFFFF;}

+	.st1{fill-rule:evenodd;clip-rule:evenodd;}

+	.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}

+</style>

+<g id="Layer_2">

+</g>

+<g id="Layer_x5F_1_x5F_1">

+	<g>

+		<polygon points="1204.6,359.2 271.8,30 271.8,2060.1 1204.6,1758.3 		"/>

+		<polygon class="st0" points="1182.2,358.1 2150.6,29 2150.6,2059 1182.2,1757.3 		"/>

+		<polygon class="st0" points="30,2415.4 1182.2,2031.4 1182.2,357.9 30,742 		"/>

+		<polygon points="1707.2,2440.7 1870.5,2709.4 1956.6,2459.8 		"/>

+		<g>

+			<path d="M421.7,934.8c-6.1-6,8,49.1,27.6,68.9c34.8,35.1,61.9,39.6,76.4,40.2c32,1.3,71.5-8,94.9-17.8

+				c22.7-9.7,62.4-30,77.5-59.6c3.2-6.3,11.9-17,6.4-43.2c-4.2-20.2-17-27.3-32.7-26.2c-15.7,1.1-63.2,13.7-86.1,20.8

+				c-23,7-70.3,21.4-90.9,25.8C474.3,948.2,429,941.7,421.7,934.8z"/>

+			<path d="M1003.1,1593.7c-9.1-3.3-196.9-81.1-223.6-93.9c-21.8-10.5-75.2-33.1-100.4-43.3c70.8-109.2,115.5-191.6,121.5-204.1

+				c11-23,86-169.6,87.7-178.7c1.7-9.1,3.8-42.9,2.2-51c-1.7-8.2-29.1,7.6-66.4,20.2c-37.4,12.6-108.4,58.8-135.8,64.6

+				c-27.5,5.7-115.5,39.1-160.5,54c-45,14.9-130.2,40.9-165.2,50.4c-35.1,9.5-65.7,10.2-85.3,16.2c0,0,2.6,27.5,7.8,35.7

+				c5.2,8.2,23.7,28.4,45.3,34.1c21.6,5.7,57.3,3.4,73.6-0.3c16.3-3.8,44.4-17.5,48.2-23.6c3.8-6.1-2-24.9,4.5-30.6

+				c6.5-5.6,92.2-25.7,124.6-35.4c32.4-10,156.3-52.6,173.1-50.5c-5.3,17.7-105,215.1-137.1,274c-32.1,58.9-218.6,318-258.3,363.6

+				c-30.1,34.7-103.2,123.5-128.5,143.6c6.4,1.8,51.6-2.1,59.9-7.2c51.3-31.6,136.9-138.1,164.4-170.5

+				c81.9-96,153.8-196.8,210.8-283.4h0.1c11.1,4.6,100.9,77.8,124.4,94c23.4,16.2,115.9,67.8,136,76.4c20,8.7,97.1,44.2,100.3,32.2

+				C1029.4,1668,1012.2,1597.1,1003.1,1593.7z"/>

+		</g>

+		<path class="st1" d="M569,2572c18,11,35,20,54,29c38,19,81,39,122,54c56,21,112,38,168,51c31,7,65,13,98,18c3,0,92,11,110,11h90

+			c35-3,68-5,103-10c28-4,59-9,89-16c22-5,45-10,67-17c21-6,45-14,68-22c15-5,31-12,47-18c13-6,29-13,44-19c18-8,39-19,59-29

+			c16-8,34-18,51-28c13-7,43-30,59-30c18,0,30,16,30,30c0,29-39,38-57,51c-19,13-42,23-62,34c-40,21-81,39-120,54

+			c-51,19-107,37-157,49c-19,4-38,9-57,12c-10,2-114,18-143,18h-132c-35-3-72-7-107-12c-31-5-64-11-95-18c-24-5-50-12-73-19

+			c-40-11-79-25-117-40c-69-26-141-60-209-105c-12-8-13-16-13-25c0-15,11-29,29-29C531,2546,563,2569,569,2572z"/>

+		<path class="st1" d="M1151,2009L61,2372V764l1090-363V2009z M1212,354v1680c-1,5-3,10-7,15c-2,3-6,7-9,8c-25,10-1151,388-1166,388

+			c-12,0-23-8-29-21c0-1-1-2-1-4V739c2-5,3-12,7-16c8-11,22-13,31-16c17-6,1126-378,1142-378C1190,329,1212,336,1212,354z"/>

+		<path class="st1" d="M2120,2017l-907-282V380l907-308V2017z M2181,32v2023c-1,23-17,33-32,33c-13,0-107-32-123-37

+			c-126-39-253-78-378-117c-28-9-57-18-84-27c-24-7-50-15-74-23c-107-33-216-66-323-102c-4-1-14-15-14-18V351c2-5,4-11,9-15

+			c8-9,351-123,486-168c36-13,487-168,501-168C2167,0,2181,13,2181,32z"/>

+		<polygon points="2411.2,2440.7 1199.5,2054.5 1204.6,373.2 2411.2,757.2 		"/>

+		<g>

+			<path class="st2" d="M1800.3,1124.6L1681.4,1412l218.6,66.3L1800.3,1124.6z M1729,853.2l156.1,47.3l284.4,1025l-160.3-48.7

+				l-57.6-210.4L1620.2,1566l-71.3,171.4l-160.4-48.7L1729,853.2z"/>

+		</g>

+	</g>

+</g>

+</svg>

diff --git a/packages/merchant-backoffice-ui/src/assets/icons/mstile-150x150.png b/packages/merchant-backoffice-ui/src/assets/icons/mstile-150x150.png
new file mode 100644
index 000000000..9cfb889be
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/assets/icons/mstile-150x150.png
diff --git a/packages/merchant-backoffice-ui/src/assets/logo.jpeg b/packages/merchant-backoffice-ui/src/assets/logo.jpeg
new file mode 100644
index 000000000..489832f7c
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/assets/logo.jpeg
diff --git a/packages/merchant-backoffice-ui/src/components/exception/AsyncButton.tsx b/packages/merchant-backoffice-ui/src/components/exception/AsyncButton.tsx
new file mode 100644
index 000000000..92bab4bfb
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/exception/AsyncButton.tsx
@@ -0,0 +1,49 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { ComponentChildren, h } from "preact";
+import { LoadingModal } from "../modal";
+import { useAsync } from "../../hooks/async";
+import { Translate } from "../../i18n";
+
+type Props = {
+  children: ComponentChildren,
+  disabled: boolean;
+  onClick?: () => Promise<void>;
+  [rest:string]: any,
+};
+
+export function AsyncButton({ onClick, disabled, children, ...rest }: Props) {
+  const { isSlow, isLoading, request, cancel } = useAsync(onClick);
+
+  if (isSlow) {
+    return <LoadingModal onCancel={cancel} />;
+  }
+  if (isLoading) {
+    return <button class="button"><Translate>Loading...</Translate></button>;
+  }
+
+  return <span {...rest}>
+    <button class="button is-success" onClick={request} disabled={disabled}>
+      {children}
+    </button>
+  </span>;
+}
diff --git a/packages/merchant-backoffice-ui/src/components/exception/QR.tsx b/packages/merchant-backoffice-ui/src/components/exception/QR.tsx
new file mode 100644
index 000000000..bcb9964a5
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/exception/QR.tsx
@@ -0,0 +1,49 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import { h, VNode } from "preact";
+import { useEffect, useRef } from "preact/hooks";
+import qrcode from "qrcode-generator";
+
+export function QR({ text }: { text: string }): VNode {
+  const divRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const qr = qrcode(0, "L");
+    qr.addData(text);
+    qr.make();
+    if (divRef.current) {
+      divRef.current.innerHTML = qr.createSvgTag({
+        scalable: true,
+      });
+    }
+  });
+
+  return (
+    <div
+      style={{
+        width: "100%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+      }}
+    >
+      <div
+        style={{ width: "50%", minWidth: 200, maxWidth: 300 }}
+        ref={divRef}
+      />
+    </div>
+  );
+}
diff --git a/packages/merchant-backoffice-ui/src/components/exception/loading.tsx b/packages/merchant-backoffice-ui/src/components/exception/loading.tsx
new file mode 100644
index 000000000..f2139a17e
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/exception/loading.tsx
@@ -0,0 +1,32 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { h, VNode } from "preact";
+
+export function Loading(): VNode {
+  return <div class="columns is-centered is-vcentered" style={{ height: 'calc(100% - 3rem)', position: 'absolute', width: '100%' }}>
+    <Spinner />
+  </div>
+}
+
+export function Spinner(): VNode {
+  return <div class="lds-ring"><div /><div /><div /><div /></div>
+}
\ No newline at end of file
diff --git a/packages/merchant-backoffice-ui/src/components/exception/login.tsx b/packages/merchant-backoffice-ui/src/components/exception/login.tsx
new file mode 100644
index 000000000..498d994ed
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/exception/login.tsx
@@ -0,0 +1,143 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import { useBackendContext } from "../../context/backend";
+import { useInstanceContext } from "../../context/instance";
+import { Translate, useTranslator } from "../../i18n";
+import { Notification } from "../../utils/types";
+
+interface Props {
+  withMessage?: Notification;
+  onConfirm: (backend: string, token?: string) => void;
+}
+
+function getTokenValuePart(t?: string): string | undefined {
+  if (!t) return t;
+  const match = /secret-token:(.*)/.exec(t);
+  if (!match || !match[1]) return undefined;
+  return match[1];
+}
+
+function normalizeToken(r: string | undefined): string | undefined {
+  return r ? `secret-token:${encodeURIComponent(r)}` : undefined;
+}
+
+export function LoginModal({ onConfirm, withMessage }: Props): VNode {
+  const { url: backendUrl, token: baseToken } = useBackendContext();
+  const { admin, token: instanceToken } = useInstanceContext();
+  const currentToken = getTokenValuePart(
+    !admin ? baseToken : instanceToken || ""
+  );
+  const [token, setToken] = useState(currentToken);
+
+  const [url, setURL] = useState(backendUrl);
+  const i18n = useTranslator();
+
+  return (
+    <div class="columns is-centered">
+      <div class="column is-two-thirds ">
+        <div class="modal-card" style={{ width: "100%", margin: 0 }}>
+          <header
+            class="modal-card-head"
+            style={{ border: "1px solid", borderBottom: 0 }}
+          >
+            <p class="modal-card-title">{i18n`Login required`}</p>
+          </header>
+          <section
+            class="modal-card-body"
+            style={{ border: "1px solid", borderTop: 0, borderBottom: 0 }}
+          >
+            <Translate>Please enter your access token.</Translate>
+            <div class="field is-horizontal">
+              <div class="field-label is-normal">
+                <label class="label">URL</label>
+              </div>
+              <div class="field-body">
+                <div class="field">
+                  <p class="control is-expanded">
+                    <input
+                      class="input"
+                      type="text"
+                      placeholder="set new url"
+                      name="id"
+                      value={url}
+                      onKeyPress={(e) =>
+                        e.keyCode === 13
+                          ? onConfirm(url, normalizeToken(token))
+                          : null
+                      }
+                      onInput={(e): void => setURL(e?.currentTarget.value)}
+                    />
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div class="field is-horizontal">
+              <div class="field-label is-normal">
+                <label class="label">
+                  <Translate>Access Token</Translate>
+                </label>
+              </div>
+              <div class="field-body">
+                <div class="field">
+                  <p class="control is-expanded">
+                    <input
+                      class="input"
+                      type="password"
+                      placeholder={"set new access token"}
+                      name="token"
+                      onKeyPress={(e) =>
+                        e.keyCode === 13
+                          ? onConfirm(url, normalizeToken(token))
+                          : null
+                      }
+                      value={token}
+                      onInput={(e): void => setToken(e?.currentTarget.value)}
+                    />
+                  </p>
+                </div>
+              </div>
+            </div>
+          </section>
+          <footer
+            class="modal-card-foot "
+            style={{
+              justifyContent: "flex-end",
+              border: "1px solid",
+              borderTop: 0,
+            }}
+          >
+            <button
+              class="button is-info"
+              onClick={(): void => {
+                onConfirm(url, normalizeToken(token));
+              }}
+            >
+              <Translate>Confirm</Translate>
+            </button>
+          </footer>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/merchant-backoffice-ui/src/components/form/FormProvider.tsx b/packages/merchant-backoffice-ui/src/components/form/FormProvider.tsx
new file mode 100644
index 000000000..aef410ce7
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/form/FormProvider.tsx
@@ -0,0 +1,81 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { ComponentChildren, createContext, h, VNode } from "preact";
+import { useContext, useMemo } from "preact/hooks";
+
+type Updater<S> = (value: ((prevState: S) => S) ) => void;
+
+export interface Props<T> {
+  object?: Partial<T>;
+  errors?: FormErrors<T>;
+  name?: string;
+  valueHandler: Updater<Partial<T>> | null;
+  children: ComponentChildren
+}
+
+const noUpdater: Updater<Partial<unknown>> = () => (s: unknown) => s
+
+export function FormProvider<T>({ object = {}, errors = {}, name = '', valueHandler, children }: Props<T>): VNode {
+  const initialObject = useMemo(() => object, []);
+  const value = useMemo<FormType<T>>(() => ({ errors, object, initialObject, valueHandler: valueHandler ? valueHandler : noUpdater, name, toStr: {}, fromStr: {} }), [errors, object, valueHandler]);
+
+  return <FormContext.Provider value={value}>
+    <form class="field" onSubmit={(e) => {
+      e.preventDefault();
+      // if (valueHandler) valueHandler(object);
+    }}>
+      {children}
+    </form>
+  </FormContext.Provider>;
+}
+
+export interface FormType<T> {
+  object: Partial<T>;
+  initialObject: Partial<T>;
+  errors: FormErrors<T>;
+  toStr: FormtoStr<T>;
+  name: string;
+  fromStr: FormfromStr<T>;
+  valueHandler: Updater<Partial<T>>;
+}
+
+const FormContext = createContext<FormType<unknown>>(null!)
+
+export function useFormContext<T>() {
+  return useContext<FormType<T>>(FormContext)
+}
+
+export type FormErrors<T> = {
+  [P in keyof T]?: string | FormErrors<T[P]>
+}
+
+export type FormtoStr<T> = {
+  [P in keyof T]?: ((f?: T[P]) => string)
+}
+
+export type FormfromStr<T> = {
+  [P in keyof T]?: ((f: string) => T[P])
+}
+
+export type FormUpdater<T> = {
+  [P in keyof T]?: (f: keyof T) => (v: T[P]) => void
+}
diff --git a/packages/merchant-backoffice-ui/src/components/form/Input.tsx b/packages/merchant-backoffice-ui/src/components/form/Input.tsx
new file mode 100644
index 000000000..9a9691e9b
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/form/Input.tsx
@@ -0,0 +1,71 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+import { ComponentChildren, h, VNode } from "preact";
+import { useField, InputProps } from "./useField";
+
+interface Props<T> extends InputProps<T> {
+  inputType?: 'text' | 'number' | 'multiline' | 'password';
+  expand?: boolean;
+  toStr?: (v?: any) => string;
+  fromStr?: (s: string) => any;
+  inputExtra?: any,
+  side?: ComponentChildren;
+  children?: ComponentChildren;
+}
+
+const defaultToString = (f?: any): string => f || ''
+const defaultFromString = (v: string): any => v as any
+
+const TextInput = ({ inputType, error, ...rest }: any) => inputType === 'multiline' ?
+  <textarea {...rest} class={error ? "textarea is-danger" : "textarea"} rows="3" /> :
+  <input {...rest} class={error ? "input is-danger" : "input"} type={inputType} />;
+
+export function Input<T>({ name, readonly, placeholder, tooltip, label, expand, help, children, inputType, inputExtra, side, fromStr = defaultFromString, toStr = defaultToString }: Props<keyof T>): VNode {
+  const { error, value, onChange, required } = useField<T>(name);
+  return <div class="field is-horizontal">
+    <div class="field-label is-normal">
+      <label class="label">
+        {label}
+        {tooltip && <span class="icon has-tooltip-right" data-tooltip={tooltip}>
+          <i class="mdi mdi-information" />
+        </span>}
+      </label>
+    </div>
+    <div class="field-body is-flex-grow-3">
+      <div class="field">
+        <p class={expand ? "control is-expanded has-icons-right" : "control has-icons-right"}>
+          <TextInput error={error} {...inputExtra}
+            inputType={inputType}
+            placeholder={placeholder} readonly={readonly}
+            name={String(name)} value={toStr(value)}
+            onChange={(e: h.JSX.TargetedEvent<HTMLInputElement>): void => onChange(fromStr(e.currentTarget.value))} />
+          {help}
+          {children}
+          { required && <span class="icon has-text-danger is-right">
+            <i class="mdi mdi-alert" />
+          </span> }
+        </p>
+        {error && <p class="help is-danger">{error}</p>}
+      </div>
+      {side}
+    </div>
+  </div>;
+}
diff --git a/packages/merchant-backoffice-ui/src/components/form/InputArray.tsx b/packages/merchant-backoffice-ui/src/components/form/InputArray.tsx
new file mode 100644
index 000000000..984c6dc49
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/form/InputArray.tsx
@@ -0,0 +1,97 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+import { h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import { Translate, useTranslator } from "../../i18n";
+import { InputProps, useField } from "./useField";
+
+export interface Props<T> extends InputProps<T> {
+  isValid?: (e: any) => boolean;
+  addonBefore?: string;
+  toStr?: (v?: any) => string;
+  fromStr?: (s: string) => any;
+}
+
+const defaultToString = (f?: any): string => f || ''
+const defaultFromString = (v: string): any => v as any
+
+export function InputArray<T>({ name, readonly, placeholder, tooltip, label, help, addonBefore, isValid = () => true, fromStr = defaultFromString, toStr = defaultToString }: Props<keyof T>): VNode {
+  const { error: formError, value, onChange, required } = useField<T>(name);
+  const [localError, setLocalError] = useState<string | null>(null)
+
+  const error = localError || formError
+
+  const array: any[] = (value ? value! : []) as any;
+  const [currentValue, setCurrentValue] = useState('');
+  const i18n = useTranslator();
+
+  return <div class="field is-horizontal">
+    <div class="field-label is-normal">
+      <label class="label">
+        {label}
+        {tooltip && <span class="icon has-tooltip-right" data-tooltip={tooltip}>
+          <i class="mdi mdi-information" />
+        </span>}
+      </label>
+    </div>
+    <div class="field-body is-flex-grow-3">
+      <div class="field">
+        <div class="field has-addons">
+          {addonBefore && <div class="control">
+            <a class="button is-static">{addonBefore}</a>
+          </div>}
+          <p class="control is-expanded has-icons-right">
+            <input class={error ? "input is-danger" : "input"} type="text"
+              placeholder={placeholder} readonly={readonly} disabled={readonly}
+              name={String(name)} value={currentValue}
+              onChange={(e): void => setCurrentValue(e.currentTarget.value)} />
+            {required && <span class="icon has-text-danger is-right">
+              <i class="mdi mdi-alert" />
+            </span>}
+          </p>
+          <p class="control">
+            <button class="button is-info has-tooltip-left" disabled={!currentValue} onClick={(): void => {
+              const v = fromStr(currentValue)
+              if (!isValid(v)) {
+                setLocalError(i18n`The value ${v} is invalid for a payment url`)
+                return;
+              }
+              setLocalError(null)
+              onChange([v, ...array] as any);
+              setCurrentValue('');
+            }} data-tooltip={i18n`add element to the list`}><Translate>add</Translate></button>
+          </p>
+        </div>
+        {help}
+        {error && <p class="help is-danger"> {error} </p>}
+        {array.map((v, i) => <div key={i} class="tags has-addons mt-3 mb-0">
+          <span class="tag is-medium is-info mb-0" style={{ maxWidth: '90%' }}>{v}</span>
+          <a class="tag is-medium is-danger is-delete mb-0" onClick={() => {
+            onChange(array.filter(f => f !== v) as any);
+            setCurrentValue(toStr(v));
+          }} />
+        </div>
+        )}
+      </div>
+
+    </div>
+  </div>;
+}
diff --git a/packages/merchant-backoffice-ui/src/components/form/InputBoolean.tsx b/packages/merchant-backoffice-ui/src/components/form/InputBoolean.tsx
new file mode 100644
index 000000000..2771fe483
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/form/InputBoolean.tsx
@@ -0,0 +1,72 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+import { h, VNode } from "preact";
+import { InputProps, useField } from "./useField";
+
+interface Props<T> extends InputProps<T> {
+  name: T;
+  readonly?: boolean;
+  expand?: boolean;
+  threeState?: boolean;
+  toBoolean?: (v?: any) => boolean | undefined;
+  fromBoolean?: (s: boolean | undefined) => any;
+}
+
+const defaultToBoolean = (f?: any): boolean | undefined => f || ''
+const defaultFromBoolean = (v: boolean | undefined): any => v as any
+
+
+export function InputBoolean<T>({ name, readonly, placeholder, tooltip, label, help, threeState, expand, fromBoolean = defaultFromBoolean, toBoolean = defaultToBoolean }: Props<keyof T>): VNode {
+  const { error, value, onChange } = useField<T>(name);
+
+  const onCheckboxClick = (): void => {
+    const c = toBoolean(value)
+    if (c === false && threeState) return onChange(undefined as any)
+    return onChange(fromBoolean(!c))
+  }
+
+  return <div class="field is-horizontal">
+    <div class="field-label is-normal">
+      <label class="label">
+        {label}
+        {tooltip && <span class="icon has-tooltip-right" data-tooltip={tooltip}>
+          <i class="mdi mdi-information" />
+        </span>}
+      </label>
+    </div>
+    <div class="field-body is-flex-grow-3">
+      <div class="field">
+        <p class={expand ? "control is-expanded" : "control"}>
+          <label class="b-checkbox checkbox">
+            <input type="checkbox" class={toBoolean(value) === undefined ? "is-indeterminate" : ""}
+              checked={toBoolean(value)}
+              placeholder={placeholder} readonly={readonly}
+              name={String(name)} disabled={readonly}
+              onChange={onCheckboxClick} />
+            <span class="check" />
+          </label>
+          {help}
+        </p>
+        {error && <p class="help is-danger">{error}</p>}
+      </div>
+    </div>
+  </div>;
+}
diff --git a/packages/merchant-backoffice-ui/src/components/form/InputCurrency.tsx b/packages/merchant-backoffice-ui/src/components/form/InputCurrency.tsx
new file mode 100644
index 000000000..d3a46f483
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/form/InputCurrency.tsx
@@ -0,0 +1,47 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+import { ComponentChildren, h } from "preact";
+import { useConfigContext } from "../../context/config";
+import { Amount } from "../../declaration";
+import { InputWithAddon } from "./InputWithAddon";
+import { InputProps } from "./useField";
+
+export interface Props<T> extends InputProps<T> {
+  expand?: boolean;
+  addonAfter?: ComponentChildren;
+  children?: ComponentChildren;
+  side?: ComponentChildren;
+}
+
+export function InputCurrency<T>({ name, readonly, label, placeholder, help, tooltip, expand, addonAfter, children, side }: Props<keyof T>) {
+  const config = useConfigContext()
+  return <InputWithAddon<T> name={name} readonly={readonly} addonBefore={config.currency}
+    side={side}
+    label={label} placeholder={placeholder} help={help} tooltip={tooltip}
+    addonAfter={addonAfter}
+    inputType='number' expand={expand}
+    toStr={(v?: Amount) => v?.split(':')[1] || ''}
+    fromStr={(v: string) => !v ? '' : `${config.currency}:${v}`}
+    inputExtra={{ min: 0 }}
+    children={children}
+  />
+}
+
diff --git a/packages/merchant-backoffice-ui/src/components/form/InputDate.tsx b/packages/merchant-backoffice-ui/src/components/form/InputDate.tsx
new file mode 100644
index 000000000..77199527f
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/form/InputDate.tsx
@@ -0,0 +1,159 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+import { format } from "date-fns";
+import { h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import { Translate, useTranslator } from "../../i18n";
+import { DatePicker } from "../picker/DatePicker";
+import { InputProps, useField } from "./useField";
+
+export interface Props<T> extends InputProps<T> {
+  readonly?: boolean;
+  expand?: boolean;
+  //FIXME: create separated components InputDate and InputTimestamp
+  withTimestampSupport?: boolean;
+}
+
+export function InputDate<T>({
+  name,
+  readonly,
+  label,
+  placeholder,
+  help,
+  tooltip,
+  expand,
+  withTimestampSupport,
+}: Props<keyof T>): VNode {
+  const [opened, setOpened] = useState(false);
+  const i18n = useTranslator();
+
+  const { error, required, value, onChange } = useField<T>(name);
+
+  let strValue = "";
+  if (!value) {
+    strValue = withTimestampSupport ? "unknown" : "";
+  } else if (value instanceof Date) {
+    strValue = format(value, "yyyy/MM/dd");
+  } else if (value.t_s) {
+    strValue =
+      value.t_s === "never"
+        ? withTimestampSupport
+          ? "never"
+          : ""
+        : format(new Date(value.t_s * 1000), "yyyy/MM/dd");
+  }
+
+  return (
+    <div class="field is-horizontal">
+      <div class="field-label is-normal">
+        <label class="label">
+          {label}
+          {tooltip && (
+            <span class="icon has-tooltip-right" data-tooltip={tooltip}>
+              <i class="mdi mdi-information" />
+            </span>
+          )}
+        </label>
+      </div>
+      <div class="field-body is-flex-grow-3">
+        <div class="field">
+          <div class="field has-addons">
+            <p
+              class={
+                expand
+                  ? "control is-expanded has-icons-right"
+                  : "control has-icons-right"
+              }
+            >
+              <input
+                class="input"
+                type="text"
+                readonly
+                value={strValue}
+                placeholder={placeholder}
+                onClick={() => {
+                  if (!readonly) setOpened(true);
+                }}
+              />
+              {required && (
+                <span class="icon has-text-danger is-right">
+                  <i class="mdi mdi-alert" />
+                </span>
+              )}
+              {help}
+            </p>
+            <div
+              class="control"
+              onClick={() => {
+                if (!readonly) setOpened(true);
+              }}
+            >
+              <a class="button is-static">
+                <span class="icon">
+                  <i class="mdi mdi-calendar" />
+                </span>
+              </a>
+            </div>
+          </div>
+          {error && <p class="help is-danger">{error}</p>}
+        </div>
+
+        {!readonly && (
+          <span
+            data-tooltip={
+              withTimestampSupport
+                ? i18n`change value to unknown date`
+                : i18n`change value to empty`
+            }
+          >
+            <button
+              class="button is-info mr-3"
+              onClick={() => onChange(undefined as any)}
+            >
+              <Translate>clear</Translate>
+            </button>
+          </span>
+        )}
+        {withTimestampSupport && (
+          <span data-tooltip={i18n`change value to never`}>
+            <button
+              class="button is-info"
+              onClick={() => onChange({ t_s: "never" } as any)}
+            >
+              <Translate>never</Translate>
+            </button>
+          </span>
+        )}
+      </div>
+      <DatePicker
+        opened={opened}
+        closeFunction={() => setOpened(false)}
+        dateReceiver={(d) => {
+          if (withTimestampSupport) {
+            onChange({ t_s: d.getTime() / 1000 } as any);
+          } else {
+            onChange(d as any);
+          }
+        }}
+      />
+    </div>
+  );
+}
diff --git a/packages/merchant-backoffice-ui/src/components/form/InputDuration.tsx b/packages/merchant-backoffice-ui/src/components/form/InputDuration.tsx
new file mode 100644
index 000000000..d5c208e25
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/form/InputDuration.tsx
@@ -0,0 +1,172 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+import { intervalToDuration, formatDuration } from "date-fns";
+import { h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import { Translate, useTranslator } from "../../i18n";
+import { SimpleModal } from "../modal";
+import { DurationPicker } from "../picker/DurationPicker";
+import { InputProps, useField } from "./useField";
+
+export interface Props<T> extends InputProps<T> {
+  expand?: boolean;
+  readonly?: boolean;
+  withForever?: boolean;
+}
+
+export function InputDuration<T>({
+  name,
+  expand,
+  placeholder,
+  tooltip,
+  label,
+  help,
+  readonly,
+  withForever,
+}: Props<keyof T>): VNode {
+  const [opened, setOpened] = useState(false);
+  const i18n = useTranslator();
+
+  const { error, required, value, onChange } = useField<T>(name);
+  let strValue = "";
+  if (!value) {
+    strValue = "";
+  } else if (value.d_us === "forever") {
+    strValue = i18n`forever`;
+  } else {
+    strValue = formatDuration(
+      intervalToDuration({ start: 0, end: value.d_us / 1000 }),
+      {
+        locale: {
+          formatDistance: (name, value) => {
+            switch (name) {
+              case "xMonths":
+                return i18n`${value}M`;
+              case "xYears":
+                return i18n`${value}Y`;
+              case "xDays":
+                return i18n`${value}d`;
+              case "xHours":
+                return i18n`${value}h`;
+              case "xMinutes":
+                return i18n`${value}min`;
+              case "xSeconds":
+                return i18n`${value}sec`;
+            }
+          },
+          localize: {
+            day: () => "s",
+            month: () => "m",
+            ordinalNumber: () => "th",
+            dayPeriod: () => "p",
+            quarter: () => "w",
+            era: () => "e",
+          },
+        },
+      }
+    );
+  }
+
+  return (
+    <div class="field is-horizontal">
+      <div class="field-label is-normal">
+        <label class="label">
+          {label}
+          {tooltip && (
+            <span class="icon" data-tooltip={tooltip}>
+              <i class="mdi mdi-information" />
+            </span>
+          )}
+        </label>
+      </div>
+      <div class="field-body is-flex-grow-3">
+        <div class="field">
+          <div class="field has-addons">
+            <p class={expand ? "control is-expanded " : "control "}>
+              <input
+                class="input"
+                type="text"
+                readonly
+                value={strValue}
+                placeholder={placeholder}
+                onClick={() => {
+                  if (!readonly) setOpened(true);
+                }}
+              />
+              {required && (
+                <span class="icon has-text-danger is-right">
+                  <i class="mdi mdi-alert" />
+                </span>
+              )}
+              {help}
+            </p>
+            <div
+              class="control"
+              onClick={() => {
+                if (!readonly) setOpened(true);
+              }}
+            >
+              <a class="button is-static">
+                <span class="icon">
+                  <i class="mdi mdi-clock" />
+                </span>
+              </a>
+            </div>
+          </div>
+          {error && <p class="help is-danger">{error}</p>}
+        </div>
+        {withForever && (
+          <span data-tooltip={i18n`change value to never`}>
+            <button
+              class="button is-info mr-3"
+              onClick={() => onChange({ d_us: "forever" } as any)}
+            >
+              <Translate>forever</Translate>
+            </button>
+          </span>
+        )}
+        {!readonly && (
+          <span data-tooltip={i18n`change value to empty`}>
+            <button
+              class="button is-info "
+              onClick={() => onChange(undefined as any)}
+            >
+              <Translate>clear</Translate>
+            </button>
+          </span>
+        )}
+      </div>
+      {opened && (
+        <SimpleModal onCancel={() => setOpened(false)}>
+          <DurationPicker
+            days
+            hours
+            minutes
+            value={!value || value.d_us === "forever" ? 0 : value.d_us}
+            onChange={(v) => {
+              onChange({ d_us: v } as any);
+            }}
+          />
+        </SimpleModal>
+      )}
+    </div>
+  );
+}
diff --git a/packages/merchant-backoffice-ui/src/components/form/InputGroup.tsx b/packages/merchant-backoffice-ui/src/components/form/InputGroup.tsx
new file mode 100644
index 000000000..8af9c7d96
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/form/InputGroup.tsx
@@ -0,0 +1,66 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+import { ComponentChildren, h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import { useGroupField } from "./useGroupField";
+
+export interface Props<T> {
+  name: T;
+  children: ComponentChildren;
+  label: ComponentChildren;
+  tooltip?: ComponentChildren;
+  alternative?: ComponentChildren;
+  fixed?: boolean;
+  initialActive?: boolean;
+}
+
+export function InputGroup<T>({ name, label, children, tooltip, alternative, fixed, initialActive }: Props<keyof T>): VNode {
+  const [active, setActive] = useState(initialActive || fixed);
+  const group = useGroupField<T>(name);
+
+  return <div class="card">
+    <header class="card-header">
+      <p class="card-header-title">
+        {label}
+        {tooltip && <span class="icon has-tooltip-right" data-tooltip={tooltip}>
+          <i class="mdi mdi-information" />
+        </span>}
+        {group?.hasError && <span class="icon has-text-danger" data-tooltip={tooltip}>
+          <i class="mdi mdi-alert" />
+        </span>}
+      </p>
+      { !fixed && <button class="card-header-icon" aria-label="more options" onClick={(): void => setActive(!active)}>
+        <span class="icon">
+          {active ?
+            <i class="mdi mdi-arrow-up" /> :
+            <i class="mdi mdi-arrow-down" />}
+        </span>
+      </button> }
+    </header>
+    {active ? <div class="card-content">
+        {children}
+    </div> : (
+      alternative ? <div class="card-content">
+          {alternative}
+      </div> : undefined
+    )}
+  </div>;
+}
diff --git a/packages/merchant-backoffice-ui/src/components/form/InputImage.tsx b/packages/merchant-backoffice-ui/src/components/form/InputImage.tsx
new file mode 100644
index 000000000..6cc9b9dcc
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/form/InputImage.tsx
@@ -0,0 +1,95 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+import { ComponentChildren, h, VNode } from "preact";
+import { useRef, useState } from "preact/hooks";
+import emptyImage from "../../assets/empty.png";
+import { Translate } from "../../i18n";
+import { MAX_IMAGE_SIZE as MAX_IMAGE_UPLOAD_SIZE } from "../../utils/constants";
+import { InputProps, useField } from "./useField";
+
+export interface Props<T> extends InputProps<T> {
+  expand?: boolean;
+  addonAfter?: ComponentChildren;
+  children?: ComponentChildren;
+}
+
+export function InputImage<T>({ name, readonly, placeholder, tooltip, label, help, children, expand }: Props<keyof T>): VNode {
+  const { error, value, onChange } = useField<T>(name);
+
+  const image = useRef<HTMLInputElement>(null)
+
+  const [sizeError, setSizeError] = useState(false)
+
+  return <div class="field is-horizontal">
+    <div class="field-label is-normal">
+      <label class="label">
+        {label}
+        {tooltip && <span class="icon has-tooltip-right" data-tooltip={tooltip}>
+          <i class="mdi mdi-information" />
+        </span>}
+      </label>
+    </div>
+    <div class="field-body is-flex-grow-3">
+      <div class="field">
+        <p class={expand ? "control is-expanded" : "control"}>
+          {value &&
+            <img src={value} style={{ width: 200, height: 200 }} onClick={() => image.current?.click()} />
+          }
+          <input
+            ref={image} style={{ display: 'none' }}
+            type="file" name={String(name)}
+            placeholder={placeholder} readonly={readonly}
+            onChange={e => {
+              const f: FileList | null = e.currentTarget.files
+              if (!f || f.length != 1) {
+                return onChange(undefined!)
+              }
+              if (f[0].size > MAX_IMAGE_UPLOAD_SIZE) {
+                setSizeError(true)
+                return onChange(undefined!)
+              }
+              setSizeError(false)
+              return f[0].arrayBuffer().then(b => {
+                const b64 = btoa(
+                  new Uint8Array(b)
+                    .reduce((data, byte) => data + String.fromCharCode(byte), '')
+                )
+                return onChange(`data:${f[0].type};base64,${b64}` as any)
+              })
+            }} />
+          {help}
+          {children}
+        </p>
+        {error && <p class="help is-danger">{error}</p>}
+        {sizeError && <p class="help is-danger">
+          <Translate>Image should be smaller than 1 MB</Translate>
+        </p>}
+        {!value &&
+          <button class="button" onClick={() => image.current?.click()} ><Translate>Add</Translate></button>
+        }
+        {value &&
+          <button class="button" onClick={() => onChange(undefined!)} ><Translate>Remove</Translate></button>
+        }
+      </div>
+    </div>
+  </div>
+}
+
diff --git a/packages/merchant-backoffice-ui/src/components/form/InputLocation.tsx b/packages/merchant-backoffice-ui/src/components/form/InputLocation.tsx
new file mode 100644
index 000000000..12755f47a
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/form/InputLocation.tsx
@@ -0,0 +1,43 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+import { Fragment, h } from "preact";
+import { useTranslator } from "../../i18n";
+import { Input } from "./Input";
+
+export function InputLocation({name}:{name:string}) {
+  const i18n = useTranslator()
+  return <>
+    <Input name={`${name}.country`} label={i18n`Country`} />
+    <Input name={`${name}.address_lines`} inputType="multiline"
+      label={i18n`Address`}
+      toStr={(v: string[] | undefined) => !v ? '' : v.join('\n')}
+      fromStr={(v: string) => v.split('\n')}
+    />
+    <Input name={`${name}.building_number`} label={i18n`Building number`} />
+    <Input name={`${name}.building_name`} label={i18n`Building name`} />
+    <Input name={`${name}.street`} label={i18n`Street`} />
+    <Input name={`${name}.post_code`} label={i18n`Post code`} />
+    <Input name={`${name}.town_location`} label={i18n`Town location`} />
+    <Input name={`${name}.town`} label={i18n`Town`} />
+    <Input name={`${name}.district`} label={i18n`District`} />
+    <Input name={`${name}.country_subdivision`} label={i18n`Country subdivision`} />
+  </>
+}
\ No newline at end of file
diff --git a/packages/merchant-backoffice-ui/src/components/form/InputNumber.tsx b/packages/merchant-backoffice-ui/src/components/form/InputNumber.tsx
new file mode 100644
index 000000000..046cda59e
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/form/InputNumber.tsx
@@ -0,0 +1,42 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+import { ComponentChildren, h } from "preact";
+import { InputWithAddon } from "./InputWithAddon";
+import { InputProps } from "./useField";
+
+export interface Props<T> extends InputProps<T> {
+  readonly?: boolean;
+  expand?: boolean;
+  side?: ComponentChildren;
+  children?: ComponentChildren;
+}
+
+export function InputNumber<T>({ name, readonly, placeholder, tooltip, label, help, expand, children, side }: Props<keyof T>) {
+  return <InputWithAddon<T> name={name} readonly={readonly} 
+    fromStr={(v) => !v ? undefined : parseInt(v, 10) } toStr={(v) => `${v}`}
+    inputType='number' expand={expand}
+    label={label} placeholder={placeholder} help={help} tooltip={tooltip}
+    inputExtra={{ min: 0 }}
+    children={children}
+    side={side}
+  />
+}
+
diff --git a/packages/merchant-backoffice-ui/src/components/form/InputPayto.tsx b/packages/merchant-backoffice-ui/src/components/form/InputPayto.tsx
new file mode 100644
index 000000000..44252317e
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/form/InputPayto.tsx
@@ -0,0 +1,39 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+import { h, VNode } from "preact";
+import { InputArray } from "./InputArray";
+import { PAYTO_REGEX } from "../../utils/constants";
+import { InputProps } from "./useField";
+
+export type Props<T> = InputProps<T>;
+
+const PAYTO_START_REGEX = /^payto:\/\//
+
+export function InputPayto<T>({ name, readonly, placeholder, tooltip, label, help }: Props<keyof T>): VNode {
+  return <InputArray<T> name={name} readonly={readonly} 
+    addonBefore="payto://" 
+    label={label} placeholder={placeholder} help={help} tooltip={tooltip}
+    isValid={(v) => v && PAYTO_REGEX.test(v) }
+    toStr={(v?: string) => !v ? '': v.replace(PAYTO_START_REGEX, '')}
+    fromStr={(v: string) => `payto://${v}` }
+  />
+}
+
diff --git a/packages/merchant-backoffice-ui/src/components/form/InputPaytoForm.tsx b/packages/merchant-backoffice-ui/src/components/form/InputPaytoForm.tsx
new file mode 100644
index 000000000..9cfef07cf
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/form/InputPaytoForm.tsx
@@ -0,0 +1,392 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+import { h, VNode, Fragment } from "preact";
+import { useCallback, useState } from "preact/hooks";
+import { Translate, Translator, useTranslator } from "../../i18n";
+import { COUNTRY_TABLE } from "../../utils/constants";
+import { FormErrors, FormProvider } from "./FormProvider";
+import { Input } from "./Input";
+import { InputGroup } from "./InputGroup";
+import { InputSelector } from "./InputSelector";
+import { InputProps, useField } from "./useField";
+
+export interface Props<T> extends InputProps<T> {
+  isValid?: (e: any) => boolean;
+}
+
+// https://datatracker.ietf.org/doc/html/rfc8905
+type Entity = {
+  // iban, bitcoin, x-taler-bank. it defined the format
+  target: string;
+  // path1 if the first field to be used
+  path1: string;
+  // path2 if the second field to be used, optional
+  path2?: string;
+  // options of the payto uri
+  options: {
+    "receiver-name"?: string;
+    sender?: string;
+    message?: string;
+    amount?: string;
+    instruction?: string;
+    [name: string]: string | undefined;
+  };
+};
+
+function isEthereumAddress(address: string) {
+  if (!/^(0x)?[0-9a-f]{40}$/i.test(address)) {
+    return false;
+  } else if (
+    /^(0x|0X)?[0-9a-f]{40}$/.test(address) ||
+    /^(0x|0X)?[0-9A-F]{40}$/.test(address)
+  ) {
+    return true;
+  }
+  return checkAddressChecksum(address);
+}
+
+function checkAddressChecksum(address: string) {
+  //TODO implement ethereum checksum
+  return true;
+}
+
+function validateBitcoin(addr: string, i18n: Translator): string | undefined {
+  try {
+    const valid = /^(bc1|[13])[a-zA-HJ-NP-Z0-9]{25,39}$/.test(addr);
+    if (valid) return undefined;
+  } catch (e) {
+    console.log(e);
+  }
+  return i18n`This is not a valid bitcoin address.`;
+}
+
+function validateEthereum(addr: string, i18n: Translator): string | undefined {
+  try {
+    const valid = isEthereumAddress(addr);
+    if (valid) return undefined;
+  } catch (e) {
+    console.log(e);
+  }
+  return i18n`This is not a valid Ethereum address.`;
+}
+
+/**
+ * An IBAN is validated by converting it into an integer and performing a
+ * basic mod-97 operation (as described in ISO 7064) on it.
+ * If the IBAN is valid, the remainder equals 1.
+ *
+ * The algorithm of IBAN validation is as follows:
+ * 1.- Check that the total IBAN length is correct as per the country. If not, the IBAN is invalid
+ * 2.- Move the four initial characters to the end of the string
+ * 3.- Replace each letter in the string with two digits, thereby expanding the string, where A = 10, B = 11, ..., Z = 35
+ * 4.- Interpret the string as a decimal integer and compute the remainder of that number on division by 97
+ *
+ * If the remainder is 1, the check digit test is passed and the IBAN might be valid.
+ *
+ */
+function validateIBAN(iban: string, i18n: Translator): string | undefined {
+  // Check total length
+  if (iban.length < 4)
+    return i18n`IBAN numbers usually have more that 4 digits`;
+  if (iban.length > 34)
+    return i18n`IBAN numbers usually have less that 34 digits`;
+
+  const A_code = "A".charCodeAt(0);
+  const Z_code = "Z".charCodeAt(0);
+  const IBAN = iban.toUpperCase();
+  // check supported country
+  const code = IBAN.substr(0, 2);
+  const found = code in COUNTRY_TABLE;
+  if (!found) return i18n`IBAN country code not found`;
+
+  // 2.- Move the four initial characters to the end of the string
+  const step2 = IBAN.substr(4) + iban.substr(0, 4);
+  const step3 = Array.from(step2)
+    .map((letter) => {
+      const code = letter.charCodeAt(0);
+      if (code < A_code || code > Z_code) return letter;
+      return `${letter.charCodeAt(0) - "A".charCodeAt(0) + 10}`;
+    })
+    .join("");
+
+  function calculate_iban_checksum(str: string): number {
+    const numberStr = str.substr(0, 5);
+    const rest = str.substr(5);
+    const number = parseInt(numberStr, 10);
+    const result = number % 97;
+    if (rest.length > 0) {
+      return calculate_iban_checksum(`${result}${rest}`);
+    }
+    return result;
+  }
+
+  const checksum = calculate_iban_checksum(step3);
+  if (checksum !== 1) return i18n`IBAN number is not valid, checksum is wrong`;
+  return undefined;
+}
+
+// const targets = ['ach', 'bic', 'iban', 'upi', 'bitcoin', 'ilp', 'void', 'x-taler-bank']
+const targets = [
+  "Choose one...",
+  "iban",
+  "x-taler-bank",
+  "bitcoin",
+  "ethereum",
+];
+const noTargetValue = targets[0];
+const defaultTarget = { target: noTargetValue, options: {} };
+
+function undefinedIfEmpty<T>(obj: T): T | undefined {
+  return Object.keys(obj).some((k) => (obj as any)[k] !== undefined)
+    ? obj
+    : undefined;
+}
+
+export function InputPaytoForm<T>({
+  name,
+  readonly,
+  label,
+  tooltip,
+}: Props<keyof T>): VNode {
+  const { value: paytos, onChange } = useField<T>(name);
+
+  const [value, valueHandler] = useState<Partial<Entity>>(defaultTarget);
+
+  let payToPath;
+  if (value.target === "iban" && value.path1) {
+    payToPath = `/${value.path1.toUpperCase()}`;
+  } else if (value.path1) {
+    if (value.path2) {
+      payToPath = `/${value.path1}/${value.path2}`;
+    } else {
+      payToPath = `/${value.path1}`;
+    }
+  }
+  const i18n = useTranslator();
+
+  const ops = value.options!;
+  const url = tryUrl(`payto://${value.target}${payToPath}`);
+  if (url) {
+    Object.keys(ops).forEach((opt_key) => {
+      const opt_value = ops[opt_key];
+      if (opt_value) url.searchParams.set(opt_key, opt_value);
+    });
+  }
+  const paytoURL = !url ? "" : url.toString();
+
+  const errors: FormErrors<Entity> = {
+    target: value.target === noTargetValue ? i18n`required` : undefined,
+    path1: !value.path1
+      ? i18n`required`
+      : value.target === "iban"
+      ? validateIBAN(value.path1, i18n)
+      : value.target === "bitcoin"
+      ? validateBitcoin(value.path1, i18n)
+      : value.target === "ethereum"
+      ? validateEthereum(value.path1, i18n)
+      : undefined,
+    path2:
+      value.target === "x-taler-bank"
+        ? !value.path2
+          ? i18n`required`
+          : undefined
+        : undefined,
+    options: undefinedIfEmpty({
+      "receiver-name": !value.options?.["receiver-name"]
+        ? i18n`required`
+        : undefined,
+    }),
+  };
+
+  const hasErrors = Object.keys(errors).some(
+    (k) => (errors as any)[k] !== undefined
+  );
+
+  const submit = useCallback((): void => {
+    const alreadyExists =
+      paytos.findIndex((x: string) => x === paytoURL) !== -1;
+    if (!alreadyExists) {
+      onChange([paytoURL, ...paytos] as any);
+    }
+    valueHandler(defaultTarget);
+  }, [value]);
+
+  //FIXME: translating plural singular
+  return (
+    <InputGroup name="payto" label={label} fixed tooltip={tooltip}>
+      <FormProvider<Entity>
+        name="tax"
+        errors={errors}
+        object={value}
+        valueHandler={valueHandler}
+      >
+        <InputSelector<Entity>
+          name="target"
+          label={i18n`Target type`}
+          tooltip={i18n`Method to use for wire transfer`}
+          values={targets}
+          toStr={(v) => (v === noTargetValue ? i18n`Choose one...` : v)}
+        />
+
+        {value.target === "ach" && (
+          <Fragment>
+            <Input<Entity>
+              name="path1"
+              label={i18n`Routing`}
+              tooltip={i18n`Routing number.`}
+            />
+            <Input<Entity>
+              name="path2"
+              label={i18n`Account`}
+              tooltip={i18n`Account number.`}
+            />
+          </Fragment>
+        )}
+        {value.target === "bic" && (
+          <Fragment>
+            <Input<Entity>
+              name="path1"
+              label={i18n`Code`}
+              tooltip={i18n`Business Identifier Code.`}
+            />
+          </Fragment>
+        )}
+        {value.target === "iban" && (
+          <Fragment>
+            <Input<Entity>
+              name="path1"
+              label={i18n`Account`}
+              tooltip={i18n`Bank Account Number.`}
+              inputExtra={{ style: { textTransform: "uppercase" } }}
+            />
+          </Fragment>
+        )}
+        {value.target === "upi" && (
+          <Fragment>
+            <Input<Entity>
+              name="path1"
+              label={i18n`Account`}
+              tooltip={i18n`Unified Payment Interface.`}
+            />
+          </Fragment>
+        )}
+        {value.target === "bitcoin" && (
+          <Fragment>
+            <Input<Entity>
+              name="path1"
+              label={i18n`Address`}
+              tooltip={i18n`Bitcoin protocol.`}
+            />
+          </Fragment>
+        )}
+        {value.target === "ethereum" && (
+          <Fragment>
+            <Input<Entity>
+              name="path1"
+              label={i18n`Address`}
+              tooltip={i18n`Ethereum protocol.`}
+            />
+          </Fragment>
+        )}
+        {value.target === "ilp" && (
+          <Fragment>
+            <Input<Entity>
+              name="path1"
+              label={i18n`Address`}
+              tooltip={i18n`Interledger protocol.`}
+            />
+          </Fragment>
+        )}
+        {value.target === "void" && <Fragment />}
+        {value.target === "x-taler-bank" && (
+          <Fragment>
+            <Input<Entity>
+              name="path1"
+              label={i18n`Host`}
+              tooltip={i18n`Bank host.`}
+            />
+            <Input<Entity>
+              name="path2"
+              label={i18n`Account`}
+              tooltip={i18n`Bank account.`}
+            />
+          </Fragment>
+        )}
+
+        {value.target !== noTargetValue && (
+          <Input
+            name="options.receiver-name"
+            label={i18n`Name`}
+            tooltip={i18n`Bank account owner's name.`}
+          />
+        )}
+
+        <div class="field is-horizontal">
+          <div class="field-label is-normal" />
+          <div class="field-body" style={{ display: "block" }}>
+            {paytos.map((v: any, i: number) => (
+              <div
+                key={i}
+                class="tags has-addons mt-3 mb-0 mr-3"
+                style={{ flexWrap: "nowrap" }}
+              >
+                <span
+                  class="tag is-medium is-info mb-0"
+                  style={{ maxWidth: "90%" }}
+                >
+                  {v}
+                </span>
+                <a
+                  class="tag is-medium is-danger is-delete mb-0"
+                  onClick={() => {
+                    onChange(paytos.filter((f: any) => f !== v) as any);
+                  }}
+                />
+              </div>
+            ))}
+            {!paytos.length && i18n`No accounts yet.`}
+          </div>
+        </div>
+
+        {value.target !== noTargetValue && (
+          <div class="buttons is-right mt-5">
+            <button
+              class="button is-info"
+              data-tooltip={i18n`add tax to the tax list`}
+              disabled={hasErrors}
+              onClick={submit}
+            >
+              <Translate>Add</Translate>
+            </button>
+          </div>
+        )}
+      </FormProvider>
+    </InputGroup>
+  );
+}
+
+function tryUrl(s: string): URL | undefined {
+  try {
+    return new URL(s);
+  } catch (e) {
+    return undefined;
+  }
+}
diff --git a/packages/merchant-backoffice-ui/src/components/form/InputSearchProduct.tsx b/packages/merchant-backoffice-ui/src/components/form/InputSearchProduct.tsx
new file mode 100644
index 000000000..51f84fd12
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/form/InputSearchProduct.tsx
@@ -0,0 +1,139 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+import { h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import emptyImage from "../../assets/empty.png";
+import { MerchantBackend, WithId } from "../../declaration";
+import { useInstanceProducts } from "../../hooks/product";
+import { Translate, useTranslator } from "../../i18n";
+import { FormErrors, FormProvider } from "./FormProvider";
+import { InputWithAddon } from "./InputWithAddon";
+
+type Entity = MerchantBackend.Products.ProductDetail & WithId
+
+export interface Props {
+  selected?: Entity;
+  onChange: (p?: Entity) => void;
+  products: (MerchantBackend.Products.ProductDetail & WithId)[],
+}
+
+interface ProductSearch {
+  name: string;
+}
+
+export function InputSearchProduct({ selected, onChange, products }: Props): VNode {
+  const [prodForm, setProdName] = useState<Partial<ProductSearch>>({ name: '' })
+
+  const errors: FormErrors<ProductSearch> = {
+    name: undefined
+  }
+  const i18n = useTranslator()
+
+
+  if (selected) {
+    return <article class="media">
+      <figure class="media-left">
+        <p class="image is-128x128">
+          <img src={selected.image ? selected.image : emptyImage} />
+        </p>
+      </figure>
+      <div class="media-content">
+        <div class="content">
+          <p class="media-meta"><Translate>Product id</Translate>: <b>{selected.id}</b></p>
+          <p><Translate>Description</Translate>: {selected.description}</p>
+          <div class="buttons is-right mt-5">
+            <button class="button is-info" onClick={() => onChange(undefined)}>clear</button>
+          </div>
+        </div>
+      </div>
+    </article>
+  }
+
+  return <FormProvider<ProductSearch> errors={errors} object={prodForm} valueHandler={setProdName} >
+
+    <InputWithAddon<ProductSearch>
+      name="name"
+      label={i18n`Product`}
+      tooltip={i18n`search products by it's description or id`}
+      addonAfter={<span class="icon" ><i class="mdi mdi-magnify" /></span>}
+    >
+      <div>
+        <ProductList
+          name={prodForm.name}
+          list={products}
+          onSelect={(p) => {
+            setProdName({ name: '' })
+            onChange(p)
+          }}
+        />
+      </div>
+    </InputWithAddon>
+
+  </FormProvider>
+
+}
+
+interface ProductListProps {
+  name?: string;
+  onSelect: (p: MerchantBackend.Products.ProductDetail & WithId) => void;
+  list: (MerchantBackend.Products.ProductDetail & WithId)[]
+}
+
+function ProductList({ name, onSelect, list }: ProductListProps) {
+  if (!name) {
+    /* FIXME
+      this BR is added to occupy the space that will be added when the 
+      dropdown appears
+    */
+    return <div ><br /></div>
+  }
+  const filtered = list.filter(p => p.id.includes(name) || p.description.includes(name))
+
+  return <div class="dropdown is-active">
+    <div class="dropdown-menu" id="dropdown-menu" role="menu" style={{ minWidth: '20rem' }}>
+      <div class="dropdown-content">
+        {!filtered.length ?
+          <div class="dropdown-item" >
+            <Translate>no products found with that description</Translate>
+          </div> :
+          filtered.map(p => (
+            <div key={p.id} class="dropdown-item" onClick={() => onSelect(p)} style={{ cursor: 'pointer' }}>
+              <article class="media">
+                <div class="media-left">
+                  <div class="image" style={{ minWidth: 64 }}><img src={p.image ? p.image : emptyImage} style={{ width: 64, height: 64 }} /></div>
+                </div>
+                <div class="media-content">
+                  <div class="content">
+                    <p>
+                      <strong>{p.id}</strong> <small>{p.price}</small>
+                      <br />
+                      {p.description}
+                    </p>
+                  </div>
+                </div>
+              </article>
+            </div>
+          ))
+        }
+      </div>
+    </div>
+  </div>
+}
diff --git a/packages/merchant-backoffice-ui/src/components/form/InputSecured.stories.tsx b/packages/merchant-backoffice-ui/src/components/form/InputSecured.stories.tsx
new file mode 100644
index 000000000..1990eeeae
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/form/InputSecured.stories.tsx
@@ -0,0 +1,55 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { h, VNode } from 'preact';
+import { useState } from 'preact/hooks';
+import { FormProvider } from "./FormProvider";
+import { InputSecured } from './InputSecured';
+
+export default {
+  title: 'Components/Form/InputSecured',
+  component: InputSecured,
+};
+
+type T = { auth_token: string | null }
+
+export const InitialValueEmpty = (): VNode => {
+  const [state, setState] = useState<Partial<T>>({ auth_token: '' })
+  return <FormProvider<T> object={state} errors={{}} valueHandler={setState}>
+    Initial value: ''
+    <InputSecured<T> name="auth_token" label="Access token" />
+  </FormProvider>
+}
+
+export const InitialValueToken = (): VNode => {
+  const [state, setState] = useState<Partial<T>>({ auth_token: 'token' })
+  return <FormProvider<T> object={state} errors={{}} valueHandler={setState}>
+    <InputSecured<T> name="auth_token" label="Access token" />
+  </FormProvider>
+}
+
+export const InitialValueNull = (): VNode => {
+  const [state, setState] = useState<Partial<T>>({ auth_token: null })
+  return <FormProvider<T> object={state} errors={{}} valueHandler={setState}>
+    Initial value: ''
+    <InputSecured<T> name="auth_token" label="Access token" />
+  </FormProvider>
+}
diff --git a/packages/merchant-backoffice-ui/src/components/form/InputSecured.tsx b/packages/merchant-backoffice-ui/src/components/form/InputSecured.tsx
new file mode 100644
index 000000000..c9b0f43b9
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/form/InputSecured.tsx
@@ -0,0 +1,119 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+import { Fragment, h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import { Translate, useTranslator } from "../../i18n";
+import { InputProps, useField } from "./useField";
+
+export type Props<T> = InputProps<T>;
+
+const TokenStatus = ({ prev, post }: any) => {
+  if ((prev === undefined || prev === null) && (post === undefined || post === null))
+    return null
+  return (prev === post) ? null : (
+    post === null ?
+      <span class="tag is-danger is-align-self-center ml-2"><Translate>Deleting</Translate></span> :
+      <span class="tag is-warning is-align-self-center ml-2"><Translate>Changing</Translate></span>
+  )
+}
+
+export function InputSecured<T>({ name, readonly, placeholder, tooltip, label, help }: Props<keyof T>): VNode {
+  const { error, value, initial, onChange, toStr, fromStr } = useField<T>(name);
+
+  const [active, setActive] = useState(false);
+  const [newValue, setNuewValue] = useState("")
+
+  const i18n = useTranslator()
+
+  return <Fragment>
+    <div class="field is-horizontal">
+      <div class="field-label is-normal">
+        <label class="label">
+          {label}
+          {tooltip && <span class="icon has-tooltip-right" data-tooltip={tooltip}>
+            <i class="mdi mdi-information" />
+          </span>}
+        </label>
+      </div>
+      <div class="field-body is-flex-grow-3">
+        {!active ?
+          <Fragment>
+            <div class="field has-addons">
+              <button class="button" 
+                onClick={(): void => { setActive(!active); }} >
+                <div class="icon is-left"><i class="mdi mdi-lock-reset" /></div>
+                <span><Translate>Manage access token</Translate></span>
+              </button>
+              <TokenStatus prev={initial} post={value} />
+            </div>
+          </Fragment> :
+          <Fragment>
+            <div class="field has-addons">
+              <div class="control">
+                <a class="button is-static">secret-token:</a>
+              </div>
+              <div class="control is-expanded">
+                <input class="input" type="text"
+                  placeholder={placeholder} readonly={readonly || !active}
+                  disabled={readonly || !active}
+                  name={String(name)} value={newValue}
+                  onInput={(e): void => {
+                    setNuewValue(e.currentTarget.value)
+                  }} />
+                {help}
+              </div>
+              <div class="control">
+                <button class="button is-info" disabled={fromStr(newValue) === value} onClick={(): void => { onChange(fromStr(newValue)); setActive(!active); setNuewValue(""); }} >
+                  <div class="icon is-left"><i class="mdi mdi-lock-outline" /></div>
+                  <span><Translate>Update</Translate></span>
+                </button>
+              </div>
+            </div>
+          </Fragment>
+        }
+        {error ? <p class="help is-danger">{error}</p> : null}
+      </div>
+    </div>
+    {active &&
+      <div class="field is-horizontal">
+        <div class="field-body is-flex-grow-3">
+          <div class="level" style={{ width: '100%' }}>
+            <div class="level-right is-flex-grow-1">
+              <div class="level-item">
+                <button class="button is-danger" disabled={null === value || undefined === value} onClick={(): void => { onChange(null!); setActive(!active); setNuewValue(""); }} >
+                  <div class="icon is-left"><i class="mdi mdi-lock-open-variant" /></div>
+                  <span><Translate>Remove</Translate></span>
+                </button>
+              </div>
+              <div class="level-item">
+                <button class="button " onClick={(): void => { onChange(initial!); setActive(!active); setNuewValue(""); }} >
+                  <div class="icon is-left"><i class="mdi mdi-lock-open-variant" /></div>
+                  <span><Translate>Cancel</Translate></span>
+                </button>
+              </div>
+            </div>
+
+          </div>
+        </div>
+      </div>
+    }
+  </Fragment >;
+}
diff --git a/packages/merchant-backoffice-ui/src/components/form/InputSelector.tsx b/packages/merchant-backoffice-ui/src/components/form/InputSelector.tsx
new file mode 100644
index 000000000..86f4de756
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/form/InputSelector.tsx
@@ -0,0 +1,86 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+import { h, VNode } from "preact";
+import { InputProps, useField } from "./useField";
+
+interface Props<T> extends InputProps<T> {
+  readonly?: boolean;
+  expand?: boolean;
+  values: string[];
+  toStr?: (v?: any) => string;
+  fromStr?: (s: string) => any;
+}
+
+const defaultToString = (f?: any): string => f || "";
+const defaultFromString = (v: string): any => v as any;
+
+export function InputSelector<T>({
+  name,
+  readonly,
+  expand,
+  placeholder,
+  tooltip,
+  label,
+  help,
+  values,
+  toStr = defaultToString,
+}: Props<keyof T>): VNode {
+  const { error, value, onChange } = useField<T>(name);
+
+  return (
+    <div class="field is-horizontal">
+      <div class="field-label is-normal">
+        <label class="label">
+          {label}
+          {tooltip && (
+            <span class="icon has-tooltip-right" data-tooltip={tooltip}>
+              <i class="mdi mdi-information" />
+            </span>
+          )}
+        </label>
+      </div>
+      <div class="field-body is-flex-grow-3">
+        <div class="field">
+          <p class={expand ? "control is-expanded select" : "control select"}>
+            <select
+              class={error ? "select is-danger" : "select"}
+              name={String(name)}
+              disabled={readonly}
+              readonly={readonly}
+              onChange={(e) => {
+                onChange(e.currentTarget.value as any);
+              }}
+            >
+              {placeholder && <option>{placeholder}</option>}
+              {values.map((v, i) => (
+                <option key={i} value={v} selected={value === v}>
+                  {toStr(v)}
+                </option>
+              ))}
+            </select>
+            {help}
+          </p>
+          {error && <p class="help is-danger">{error}</p>}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/merchant-backoffice-ui/src/components/form/InputStock.stories.tsx b/packages/merchant-backoffice-ui/src/components/form/InputStock.stories.tsx
new file mode 100644
index 000000000..63c7e4131
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/form/InputStock.stories.tsx
@@ -0,0 +1,162 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { addDays } from "date-fns";
+import { h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import { FormProvider } from "./FormProvider";
+import { InputStock, Stock } from "./InputStock";
+
+export default {
+  title: "Components/Form/InputStock",
+  component: InputStock,
+};
+
+type T = { stock?: Stock };
+
+export const CreateStockEmpty = () => {
+  const [state, setState] = useState<Partial<T>>({});
+  return (
+    <FormProvider<T>
+      name="product"
+      object={state}
+      errors={{}}
+      valueHandler={setState}
+    >
+      <InputStock<T> name="stock" label="Stock" />
+      <div>
+        <pre>{JSON.stringify(state, undefined, 2)}</pre>
+      </div>
+    </FormProvider>
+  );
+};
+
+export const CreateStockUnknownRestock = () => {
+  const [state, setState] = useState<Partial<T>>({
+    stock: {
+      current: 10,
+      lost: 0,
+      sold: 0,
+    },
+  });
+  return (
+    <FormProvider<T>
+      name="product"
+      object={state}
+      errors={{}}
+      valueHandler={setState}
+    >
+      <InputStock<T> name="stock" label="Stock" />
+      <div>
+        <pre>{JSON.stringify(state, undefined, 2)}</pre>
+      </div>
+    </FormProvider>
+  );
+};
+
+export const CreateStockNoRestock = () => {
+  const [state, setState] = useState<Partial<T>>({
+    stock: {
+      current: 10,
+      lost: 0,
+      sold: 0,
+      nextRestock: { t_s: "never" },
+    },
+  });
+  return (
+    <FormProvider<T>
+      name="product"
+      object={state}
+      errors={{}}
+      valueHandler={setState}
+    >
+      <InputStock<T> name="stock" label="Stock" />
+      <div>
+        <pre>{JSON.stringify(state, undefined, 2)}</pre>
+      </div>
+    </FormProvider>
+  );
+};
+
+export const CreateStockWithRestock = () => {
+  const [state, setState] = useState<Partial<T>>({
+    stock: {
+      current: 15,
+      lost: 0,
+      sold: 0,
+      nextRestock: { t_s: addDays(new Date(), 1).getTime() / 1000 },
+    },
+  });
+  return (
+    <FormProvider<T>
+      name="product"
+      object={state}
+      errors={{}}
+      valueHandler={setState}
+    >
+      <InputStock<T> name="stock" label="Stock" />
+      <div>
+        <pre>{JSON.stringify(state, undefined, 2)}</pre>
+      </div>
+    </FormProvider>
+  );
+};
+
+export const UpdatingProductWithManagedStock = () => {
+  const [state, setState] = useState<Partial<T>>({
+    stock: {
+      current: 100,
+      lost: 0,
+      sold: 0,
+      nextRestock: { t_s: addDays(new Date(), 1).getTime() / 1000 },
+    },
+  });
+  return (
+    <FormProvider<T>
+      name="product"
+      object={state}
+      errors={{}}
+      valueHandler={setState}
+    >
+      <InputStock<T> name="stock" label="Stock" alreadyExist />
+      <div>
+        <pre>{JSON.stringify(state, undefined, 2)}</pre>
+      </div>
+    </FormProvider>
+  );
+};
+
+export const UpdatingProductWithInfiniteStock = () => {
+  const [state, setState] = useState<Partial<T>>({});
+  return (
+    <FormProvider<T>
+      name="product"
+      object={state}
+      errors={{}}
+      valueHandler={setState}
+    >
+      <InputStock<T> name="stock" label="Stock" alreadyExist />
+      <div>
+        <pre>{JSON.stringify(state, undefined, 2)}</pre>
+      </div>
+    </FormProvider>
+  );
+};
diff --git a/packages/merchant-backoffice-ui/src/components/form/InputStock.tsx b/packages/merchant-backoffice-ui/src/components/form/InputStock.tsx
new file mode 100644
index 000000000..158f44192
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/form/InputStock.tsx
@@ -0,0 +1,171 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+import { Fragment, h } from "preact";
+import { MerchantBackend, Timestamp } from "../../declaration";
+import { InputProps, useField } from "./useField";
+import { FormProvider, FormErrors } from "./FormProvider";
+import { useLayoutEffect, useState } from "preact/hooks";
+import { Input } from "./Input";
+import { InputGroup } from "./InputGroup";
+import { InputNumber } from "./InputNumber";
+import { InputDate } from "./InputDate";
+import { Translate, useTranslator } from "../../i18n";
+import { InputLocation } from "./InputLocation";
+
+export interface Props<T> extends InputProps<T> {
+  alreadyExist?: boolean;
+}
+
+
+type Entity = Stock
+
+export interface Stock {
+  current: number;
+  lost: number;
+  sold: number;
+  address?: MerchantBackend.Location;
+  nextRestock?: Timestamp;
+}
+
+interface StockDelta {
+  incoming: number;
+  lost: number;
+}
+
+
+export function InputStock<T>({ name, tooltip, label, alreadyExist }: Props<keyof T>) {
+  const { error, value, onChange } = useField<T>(name);
+
+  const [errors, setErrors] = useState<FormErrors<Entity>>({})
+
+  const [formValue, valueHandler] = useState<Partial<Entity>>(value)
+  const [addedStock, setAddedStock] = useState<StockDelta>({ incoming: 0, lost: 0 })
+  const i18n = useTranslator()
+
+
+  useLayoutEffect(() => {
+    if (!formValue) {
+      onChange(undefined as any)
+    } else {
+      onChange({
+        ...formValue,
+        current: (formValue?.current || 0) + addedStock.incoming,
+        lost: (formValue?.lost || 0) + addedStock.lost
+      } as any)
+    }
+  }, [formValue, addedStock])
+
+  if (!formValue) {
+    return <Fragment>
+      <div class="field is-horizontal">
+        <div class="field-label is-normal">
+          <label class="label">
+            {label}
+            {tooltip && <span class="icon has-tooltip-right" data-tooltip={tooltip}>
+              <i class="mdi mdi-information" />
+            </span>}
+          </label>
+        </div>
+        <div class="field-body is-flex-grow-3">
+          <div class="field has-addons">
+            {!alreadyExist ?
+              <button class="button" 
+                data-tooltip={i18n`click here to configure the stock of the product, leave it as is and the backend will not control stock`}
+                onClick={(): void => { valueHandler({ current: 0, lost: 0, sold: 0 } as Stock as any); }} >
+                <span><Translate>Manage stock</Translate></span>
+              </button> : <button class="button" 
+                data-tooltip={i18n`this product has been configured without stock control`}
+                disabled >
+                <span><Translate>Infinite</Translate></span>
+              </button>
+            }
+          </div>
+        </div>
+      </div>
+    </Fragment >
+  }
+
+  const currentStock = (formValue.current || 0) - (formValue.lost || 0) - (formValue.sold || 0)
+
+  const stockAddedErrors: FormErrors<typeof addedStock> = {
+    lost: currentStock + addedStock.incoming < addedStock.lost ?
+      i18n`lost cannot be greater than current and incoming (max ${currentStock + addedStock.incoming})`
+      : undefined
+  }
+
+  // const stockUpdateDescription = stockAddedErrors.lost ? '' : (
+  //   !!addedStock.incoming || !!addedStock.lost ?
+  //     i18n`current stock will change from ${currentStock} to ${currentStock + addedStock.incoming - addedStock.lost}` :
+  //     i18n`current stock will stay at ${currentStock}`
+  // )
+
+  return <Fragment>
+    <div class="card">
+      <header class="card-header">
+        <p class="card-header-title">
+          {label}
+          {tooltip && <span class="icon" data-tooltip={tooltip}>
+            <i class="mdi mdi-information" />
+          </span>}
+        </p>
+      </header>
+      <div class="card-content">
+        <FormProvider<Entity> name="stock" errors={errors} object={formValue} valueHandler={valueHandler}>
+          {alreadyExist ? <Fragment>
+
+            <FormProvider name="added" errors={stockAddedErrors} object={addedStock} valueHandler={setAddedStock as any}>
+              <InputNumber name="incoming" label={i18n`Incoming`} />
+              <InputNumber name="lost" label={i18n`Lost`} />
+            </FormProvider>
+
+            {/* <div class="field is-horizontal">
+              <div class="field-label is-normal" />
+              <div class="field-body is-flex-grow-3">
+                <div class="field">
+                  {stockUpdateDescription}
+                </div>
+              </div>
+            </div> */}
+
+          </Fragment> : <InputNumber<Entity> name="current"
+            label={i18n`Current`}
+            side={
+              <button class="button is-danger" 
+                data-tooltip={i18n`remove stock control for this product`}
+                onClick={(): void => { valueHandler(undefined as any) }} >
+                <span><Translate>without stock</Translate></span>
+              </button>
+            }
+          />}
+
+          <InputDate<Entity> name="nextRestock" label={i18n`Next restock`} withTimestampSupport />
+
+          <InputGroup<Entity> name="address" label={i18n`Delivery address`}>
+            <InputLocation name="address" />
+          </InputGroup>
+        </FormProvider>
+      </div>
+    </div>
+  </Fragment>
+}
+  // (
+
+
diff --git a/packages/merchant-backoffice-ui/src/components/form/InputTaxes.tsx b/packages/merchant-backoffice-ui/src/components/form/InputTaxes.tsx
new file mode 100644
index 000000000..507a61242
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/form/InputTaxes.tsx
@@ -0,0 +1,97 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+import { h, VNode } from "preact";
+import { useCallback, useState } from "preact/hooks";
+import * as yup from 'yup';
+import { MerchantBackend } from "../../declaration";
+import { Translate, useTranslator } from "../../i18n";
+import { TaxSchema as schema } from '../../schemas';
+import { FormErrors, FormProvider } from "./FormProvider";
+import { Input } from "./Input";
+import { InputGroup } from "./InputGroup";
+import { InputProps, useField } from "./useField";
+
+export interface Props<T> extends InputProps<T> {
+  isValid?: (e: any) => boolean;
+}
+
+type Entity = MerchantBackend.Tax
+export function InputTaxes<T>({ name, readonly, label }: Props<keyof T>): VNode {
+  const { value: taxes, onChange, } = useField<T>(name);
+
+  const [value, valueHandler] = useState<Partial<Entity>>({})
+  // const [errors, setErrors] = useState<FormErrors<Entity>>({})
+
+  let errors: FormErrors<Entity> = {}
+
+  try {
+    schema.validateSync(value, { abortEarly: false })
+  } catch (err) {
+    if (err instanceof yup.ValidationError) {
+      const yupErrors = err.inner as yup.ValidationError[]
+      errors = yupErrors.reduce((prev, cur) => !cur.path ? prev : ({ ...prev, [cur.path]: cur.message }), {})      
+    }
+  }
+  const hasErrors = Object.keys(errors).some(k => (errors as any)[k] !== undefined)
+
+  const submit = useCallback((): void => {
+    onChange([value as any, ...taxes] as any)
+    valueHandler({})
+  }, [value])
+
+  const i18n = useTranslator()
+
+  //FIXME: translating plural singular
+  return (
+    <InputGroup name="tax" label={label} alternative={taxes.length > 0 && <p>This product has {taxes.length} applicable taxes configured.</p>}>
+      <FormProvider<Entity> name="tax" errors={errors} object={value} valueHandler={valueHandler} >
+
+        <div class="field is-horizontal">
+          <div class="field-label is-normal" />
+          <div class="field-body" style={{ display: 'block' }}>
+            {taxes.map((v: any, i: number) => <div key={i} class="tags has-addons mt-3 mb-0 mr-3" style={{ flexWrap: 'nowrap' }}>
+              <span class="tag is-medium is-info mb-0" style={{ maxWidth: '90%' }}><b>{v.tax}</b>: {v.name}</span>
+              <a class="tag is-medium is-danger is-delete mb-0" onClick={() => {
+                onChange(taxes.filter((f: any) => f !== v) as any);
+                valueHandler(v);
+              }} />
+            </div>
+            )}
+            {!taxes.length && i18n`No taxes configured for this product.`}
+          </div>
+        </div>
+
+        <Input<Entity> name="tax" label={i18n`Amount`} tooltip={i18n`Taxes can be in currencies that differ from the main currency used by the merchant.`}>
+          <Translate>Enter currency and value separated with a colon, e.g. "USD:2.3".</Translate>
+        </Input>
+
+        <Input<Entity> name="name" label={i18n`Description`} tooltip={i18n`Legal name of the tax, e.g. VAT or import duties.`} />
+
+        <div class="buttons is-right mt-5">
+          <button class="button is-info"
+            data-tooltip={i18n`add tax to the tax list`}
+            disabled={hasErrors}
+            onClick={submit}><Translate>Add</Translate></button>
+        </div>
+      </FormProvider>
+    </InputGroup>
+  )
+}
diff --git a/packages/merchant-backoffice-ui/src/components/form/InputWithAddon.tsx b/packages/merchant-backoffice-ui/src/components/form/InputWithAddon.tsx
new file mode 100644
index 000000000..a16ebc2e9
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/form/InputWithAddon.tsx
@@ -0,0 +1,77 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+import { ComponentChildren, h, VNode } from "preact";
+import { InputProps, useField } from "./useField";
+
+export interface Props<T> extends InputProps<T> {
+  expand?: boolean;
+  inputType?: 'text' | 'number';
+  addonBefore?: ComponentChildren;
+  addonAfter?: ComponentChildren;
+  toStr?: (v?: any) => string;
+  fromStr?: (s: string) => any;
+  inputExtra?: any,
+  children?: ComponentChildren,
+  side?: ComponentChildren;
+}
+
+const defaultToString = (f?: any): string => f || ''
+const defaultFromString = (v: string): any => v as any
+
+export function InputWithAddon<T>({ name, readonly, addonBefore, children, expand, label, placeholder, help, tooltip, inputType, inputExtra, side, addonAfter, toStr = defaultToString, fromStr = defaultFromString }: Props<keyof T>): VNode {
+  const { error, value, onChange, required } = useField<T>(name);
+
+  return <div class="field is-horizontal">
+    <div class="field-label is-normal">
+      <label class="label">
+        {label}
+        {tooltip && <span class="icon has-tooltip-right" data-tooltip={tooltip}>
+          <i class="mdi mdi-information" />
+        </span>}
+      </label>
+    </div>
+    <div class="field-body is-flex-grow-3">
+      <div class="field">
+        <div class="field has-addons">
+          {addonBefore && <div class="control">
+            <a class="button is-static">{addonBefore}</a>
+          </div>}
+          <p class={`control${expand ? " is-expanded" :""}${required ? " has-icons-right" : ''}`}>
+            <input {...(inputExtra || {})} class={error ? "input is-danger" : "input"} type={inputType}
+              placeholder={placeholder} readonly={readonly}
+              name={String(name)} value={toStr(value)}
+              onChange={(e): void => onChange(fromStr(e.currentTarget.value))} />
+            {required && <span class="icon has-text-danger is-right">
+              <i class="mdi mdi-alert" />
+            </span>}
+            {help}
+            {children}
+          </p>
+          {addonAfter && <div class="control">
+            <a class="button is-static">{addonAfter}</a>
+          </div>}
+        </div>
+        {error && <p class="help is-danger">{error}</p>}
+      </div>
+      {side}
+    </div>
+  </div>;
+}
diff --git a/packages/merchant-backoffice-ui/src/components/form/TextField.tsx b/packages/merchant-backoffice-ui/src/components/form/TextField.tsx
new file mode 100644
index 000000000..2579a27b2
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/form/TextField.tsx
@@ -0,0 +1,53 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+import { ComponentChildren, h, VNode } from "preact";
+import { useField, InputProps } from "./useField";
+
+interface Props<T> extends InputProps<T> {
+  inputType?: 'text' | 'number' | 'multiline' | 'password';
+  expand?: boolean;
+  side?: ComponentChildren;
+  children: ComponentChildren;
+}
+
+export function TextField<T>({ name, tooltip, label, expand, help, children, side}: Props<keyof T>): VNode {
+  const { error } = useField<T>(name);
+  return <div class="field is-horizontal">
+    <div class="field-label is-normal">
+      <label class="label">
+        {label}
+        {tooltip && <span class="icon has-tooltip-right" data-tooltip={tooltip}>
+          <i class="mdi mdi-information" />
+        </span>}
+      </label>
+    </div>
+    <div class="field-body is-flex-grow-3">
+      <div class="field">
+        <p class={expand ? "control is-expanded has-icons-right" : "control has-icons-right"}>
+          {children}          
+          {help}
+        </p>
+        {error && <p class="help is-danger">{error}</p>}
+      </div>
+      {side}
+    </div>
+  </div>;
+}
diff --git a/packages/merchant-backoffice-ui/src/components/form/useField.tsx b/packages/merchant-backoffice-ui/src/components/form/useField.tsx
new file mode 100644
index 000000000..8479d7ad8
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/form/useField.tsx
@@ -0,0 +1,86 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { ComponentChildren, VNode } from "preact";
+import { useFormContext } from "./FormProvider";
+
+interface Use<V> {
+  error?: string;
+  required: boolean;
+  value: any;
+  initial: any;
+  onChange: (v: V) => void;
+  toStr: (f: V | undefined) => string;
+  fromStr: (v: string) => V
+}
+
+export function useField<T>(name: keyof T): Use<T[typeof name]> {
+  const { errors, object, initialObject, toStr, fromStr, valueHandler } = useFormContext<T>()
+  type P = typeof name
+  type V = T[P]
+
+  const updateField = (field: P) => (value: V): void => {
+    return valueHandler((prev) => {
+      return setValueDeeper(prev, String(field).split('.'), value)
+    })
+  }
+
+  const defaultToString = ((f?: V): string => String(!f ? '' : f))
+  const defaultFromString = ((v: string): V => v as any)
+  const value = readField(object, String(name))
+  const initial = readField(initialObject, String(name))
+  const isDirty = value !== initial
+  const hasError = readField(errors, String(name))
+  return {
+    error: isDirty ? hasError : undefined,
+    required: !isDirty && hasError,
+    value,
+    initial,
+    onChange: updateField(name) as any,
+    toStr: toStr[name] ? toStr[name]! : defaultToString,
+    fromStr: fromStr[name] ? fromStr[name]! : defaultFromString,
+  }
+}
+/**
+ * read the field of an object an support accessing it using '.'
+ * 
+ * @param object 
+ * @param name 
+ * @returns 
+ */
+const readField = (object: any, name: string) => {
+  return name.split('.').reduce((prev, current) => prev && prev[current], object)
+}
+
+const setValueDeeper = (object: any, names: string[], value: any): any => {
+  if (names.length === 0) return value
+  const [head, ...rest] = names
+  return { ...object, [head]: setValueDeeper(object[head] || {}, rest, value) }
+}
+
+export interface InputProps<T> {
+  name: T;
+  label: ComponentChildren;
+  placeholder?: string;
+  tooltip?: ComponentChildren;
+  readonly?: boolean;
+  help?: ComponentChildren;
+}
\ No newline at end of file
diff --git a/packages/merchant-backoffice-ui/src/components/form/useGroupField.tsx b/packages/merchant-backoffice-ui/src/components/form/useGroupField.tsx
new file mode 100644
index 000000000..a73f464a1
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/form/useGroupField.tsx
@@ -0,0 +1,40 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { useFormContext } from "./FormProvider";
+
+interface Use {
+  hasError?: boolean;
+}
+
+export function useGroupField<T>(name: keyof T): Use {
+  const f = useFormContext<T>();
+  if (!f)
+    return {};
+
+  return {
+    hasError: readField(f.errors, String(name))
+  };
+}
+
+const readField = (object: any, name: string) => {
+  return name.split('.').reduce((prev, current) => prev && prev[current], object)
+}
diff --git a/packages/merchant-backoffice-ui/src/components/instance/DefaultInstanceFormFields.tsx b/packages/merchant-backoffice-ui/src/components/instance/DefaultInstanceFormFields.tsx
new file mode 100644
index 000000000..d80c65cc2
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/instance/DefaultInstanceFormFields.tsx
@@ -0,0 +1,135 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { Fragment, h, VNode } from "preact";
+import { useBackendContext } from "../../context/backend";
+import { useTranslator } from "../../i18n";
+import { Entity } from "../../paths/admin/create/CreatePage";
+import { Input } from "../form/Input";
+import { InputCurrency } from "../form/InputCurrency";
+import { InputDuration } from "../form/InputDuration";
+import { InputGroup } from "../form/InputGroup";
+import { InputImage } from "../form/InputImage";
+import { InputLocation } from "../form/InputLocation";
+import { InputPaytoForm } from "../form/InputPaytoForm";
+import { InputWithAddon } from "../form/InputWithAddon";
+
+export function DefaultInstanceFormFields({
+  readonlyId,
+  showId,
+}: {
+  readonlyId?: boolean;
+  showId: boolean;
+}): VNode {
+  const i18n = useTranslator();
+  const backend = useBackendContext();
+  return (
+    <Fragment>
+      {showId && (
+        <InputWithAddon<Entity>
+          name="id"
+          addonBefore={`${backend.url}/instances/`}
+          readonly={readonlyId}
+          label={i18n`Identifier`}
+          tooltip={i18n`Name of the instance in URLs. The 'default' instance is special in that it is used to administer other instances.`}
+        />
+      )}
+
+      <Input<Entity>
+        name="name"
+        label={i18n`Business name`}
+        tooltip={i18n`Legal name of the business represented by this instance.`}
+      />
+
+      <Input<Entity>
+        name="email"
+        label={i18n`Email`}
+        tooltip={i18n`Contact email`}
+      />
+
+      <Input<Entity>
+        name="website"
+        label={i18n`Website URL`}
+        tooltip={i18n`URL.`}
+      />
+
+      <InputImage<Entity>
+        name="logo"
+        label={i18n`Logo`}
+        tooltip={i18n`Logo image.`}
+      />
+
+      <InputPaytoForm<Entity>
+        name="payto_uris"
+        label={i18n`Bank account`}
+        tooltip={i18n`URI specifying bank account for crediting revenue.`}
+      />
+
+      <InputCurrency<Entity>
+        name="default_max_deposit_fee"
+        label={i18n`Default max deposit fee`}
+        tooltip={i18n`Maximum deposit fees this merchant is willing to pay per order by default.`}
+      />
+
+      <InputCurrency<Entity>
+        name="default_max_wire_fee"
+        label={i18n`Default max wire fee`}
+        tooltip={i18n`Maximum wire fees this merchant is willing to pay per wire transfer by default.`}
+      />
+
+      <Input<Entity>
+        name="default_wire_fee_amortization"
+        label={i18n`Default wire fee amortization`}
+        tooltip={i18n`Number of orders excess wire transfer fees will be divided by to compute per order surcharge.`}
+      />
+
+      <InputGroup
+        name="address"
+        label={i18n`Address`}
+        tooltip={i18n`Physical location of the merchant.`}
+      >
+        <InputLocation name="address" />
+      </InputGroup>
+
+      <InputGroup
+        name="jurisdiction"
+        label={i18n`Jurisdiction`}
+        tooltip={i18n`Jurisdiction for legal disputes with the merchant.`}
+      >
+        <InputLocation name="jurisdiction" />
+      </InputGroup>
+
+      <InputDuration<Entity>
+        name="default_pay_delay"
+        label={i18n`Default payment delay`}
+        withForever
+        tooltip={i18n`Time customers have to pay an order before the offer expires by default.`}
+      />
+
+      <InputDuration<Entity>
+        name="default_wire_transfer_delay"
+        label={i18n`Default wire transfer delay`}
+        tooltip={i18n`Maximum time an exchange is allowed to delay wiring funds to the merchant, enabling it to aggregate smaller payments into larger wire transfers and reducing wire fees.`}
+        withForever
+      />
+    </Fragment>
+  );
+}
diff --git a/packages/merchant-backoffice-ui/src/components/menu/LangSelector.tsx b/packages/merchant-backoffice-ui/src/components/menu/LangSelector.tsx
new file mode 100644
index 000000000..41d08a58b
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/menu/LangSelector.tsx
@@ -0,0 +1,73 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import langIcon from '../../assets/icons/languageicon.svg';
+import { useTranslationContext } from "../../context/translation";
+import { strings as messages } from '../../i18n/strings'
+
+type LangsNames = {
+  [P in keyof typeof messages]: string
+}
+
+const names: LangsNames = {
+  es: 'Español [es]',
+  en: 'English [en]',
+  fr: 'Français [fr]',
+  de: 'Deutsch [de]',
+  sv: 'Svenska [sv]',
+  it: 'Italiano [it]',
+}
+
+function getLangName(s: keyof LangsNames | string) {
+  if (names[s]) return names[s]
+  return s
+}
+
+export function LangSelector(): VNode {
+  const [updatingLang, setUpdatingLang] = useState(false)
+  const { lang, changeLanguage } = useTranslationContext()
+
+  return <div class="dropdown is-active ">
+    <div class="dropdown-trigger">
+      <button class="button has-tooltip-left" 
+        data-tooltip="change language selection"
+        aria-haspopup="true" 
+        aria-controls="dropdown-menu" onClick={() => setUpdatingLang(!updatingLang)}>
+        <div class="icon is-small is-left">
+          <img src={langIcon} />
+        </div>
+        <span>{getLangName(lang)}</span>
+        <div class="icon is-right">
+          <i class="mdi mdi-chevron-down" />
+        </div>
+      </button>
+    </div>
+    {updatingLang && <div class="dropdown-menu" id="dropdown-menu" role="menu">
+      <div class="dropdown-content">
+        {Object.keys(messages)
+          .filter((l) => l !== lang)
+          .map(l => <a key={l} class="dropdown-item" value={l} onClick={() => { changeLanguage(l); setUpdatingLang(false) }}>{getLangName(l)}</a>)}
+      </div>
+    </div>}
+  </div>
+}
\ No newline at end of file
diff --git a/packages/merchant-backoffice-ui/src/components/menu/NavigationBar.tsx b/packages/merchant-backoffice-ui/src/components/menu/NavigationBar.tsx
new file mode 100644
index 000000000..e1bb4c7c0
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/menu/NavigationBar.tsx
@@ -0,0 +1,58 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { h, VNode } from 'preact';
+import logo from '../../assets/logo.jpeg';
+import { LangSelector } from './LangSelector';
+
+interface Props {
+  onMobileMenu: () => void;
+  title: string;
+}
+
+export function NavigationBar({ onMobileMenu, title }: Props): VNode {
+  return (<nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation">
+    <div class="navbar-brand">
+      <span class="navbar-item" style={{ fontSize: 24, fontWeight: 900 }}>{title}</span>
+
+      <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" onClick={(e) => {
+        onMobileMenu()
+        e.stopPropagation()
+      }}>
+        <span aria-hidden="true" />
+        <span aria-hidden="true" />
+        <span aria-hidden="true" />
+      </a>
+    </div>
+
+    <div class="navbar-menu ">
+      <a class="navbar-start is-justify-content-center is-flex-grow-1" href="https://taler.net">
+        <img src={logo} style={{ height: 50, maxHeight: 50 }} />
+      </a>
+      <div class="navbar-end">
+        <div class="navbar-item" style={{ paddingTop: 4, paddingBottom: 4 }}>
+          <LangSelector />
+        </div>
+      </div>
+    </div>
+  </nav>
+  );
+}
\ No newline at end of file
diff --git a/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx b/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx
new file mode 100644
index 000000000..e9c5ef8ae
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx
@@ -0,0 +1,227 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { Fragment, h, VNode } from "preact";
+import { useCallback } from "preact/hooks";
+import { useBackendContext } from "../../context/backend";
+import { useConfigContext } from "../../context/config";
+import { useInstanceContext } from "../../context/instance";
+import { useInstanceKYCDetails } from "../../hooks/instance";
+import { Translate } from "../../i18n";
+import { LangSelector } from "./LangSelector";
+
+interface Props {
+  onLogout: () => void;
+  mobile?: boolean;
+  instance: string;
+  admin?: boolean;
+  mimic?: boolean;
+}
+
+export function Sidebar({
+  mobile,
+  instance,
+  onLogout,
+  admin,
+  mimic,
+}: Props): VNode {
+  const config = useConfigContext();
+  const backend = useBackendContext();
+
+  const kycStatus = useInstanceKYCDetails();
+  const needKYC = kycStatus.ok && kycStatus.data.type === "redirect";
+  // const withInstanceIdIfNeeded = useCallback(function (path: string) {
+  //   if (mimic) {
+  //     return path + '?instance=' + instance
+  //   }
+  //   return path
+  // },[instance])
+
+  return (
+    <aside class="aside is-placed-left is-expanded">
+      {mobile && (
+        <div
+          class="footer"
+          onClick={(e) => {
+            return e.stopImmediatePropagation();
+          }}
+        >
+          <LangSelector />
+        </div>
+      )}
+      <div class="aside-tools">
+        <div class="aside-tools-label">
+          <div>
+            <b>Taler</b> Backoffice
+          </div>
+          <div
+            class="is-size-7 has-text-right"
+            style={{ lineHeight: 0, marginTop: -10 }}
+          >
+            {process.env.__VERSION__} ({config.version})
+          </div>
+        </div>
+      </div>
+      <div class="menu is-menu-main">
+        {instance ? (
+          <Fragment>
+            <p class="menu-label">
+              <Translate>Instance</Translate>
+            </p>
+            <ul class="menu-list">
+              <li>
+                <a href={"/update"} class="has-icon">
+                  <span class="icon">
+                    <i class="mdi mdi-square-edit-outline" />
+                  </span>
+                  <span class="menu-item-label">
+                    <Translate>Settings</Translate>
+                  </span>
+                </a>
+              </li>
+              <li>
+                <a href={"/orders"} class="has-icon">
+                  <span class="icon">
+                    <i class="mdi mdi-cash-register" />
+                  </span>
+                  <span class="menu-item-label">
+                    <Translate>Orders</Translate>
+                  </span>
+                </a>
+              </li>
+              <li>
+                <a href={"/products"} class="has-icon">
+                  <span class="icon">
+                    <i class="mdi mdi-shopping" />
+                  </span>
+                  <span class="menu-item-label">
+                    <Translate>Products</Translate>
+                  </span>
+                </a>
+              </li>
+              <li>
+                <a href={"/transfers"} class="has-icon">
+                  <span class="icon">
+                    <i class="mdi mdi-bank" />
+                  </span>
+                  <span class="menu-item-label">
+                    <Translate>Transfers</Translate>
+                  </span>
+                </a>
+              </li>
+              <li>
+                <a href={"/reserves"} class="has-icon">
+                  <span class="icon">
+                    <i class="mdi mdi-cash" />
+                  </span>
+                  <span class="menu-item-label">Reserves</span>
+                </a>
+              </li>
+              {needKYC && (
+                <li>
+                  <a href={"/kyc"} class="has-icon">
+                    <span class="icon">
+                      <i class="mdi mdi-account-check" />
+                    </span>
+                    <span class="menu-item-label">KYC Status</span>
+                  </a>
+                </li>
+              )}
+            </ul>
+          </Fragment>
+        ) : undefined}
+        <p class="menu-label">
+          <Translate>Connection</Translate>
+        </p>
+        <ul class="menu-list">
+          <li>
+            <div>
+              <span style={{ width: "3rem" }} class="icon">
+                <i class="mdi mdi-currency-eur" />
+              </span>
+              <span class="menu-item-label">{config.currency}</span>
+            </div>
+          </li>
+          <li>
+            <div>
+              <span style={{ width: "3rem" }} class="icon">
+                <i class="mdi mdi-web" />
+              </span>
+              <span class="menu-item-label">
+                {new URL(backend.url).hostname}
+              </span>
+            </div>
+          </li>
+          <li>
+            <div>
+              <span style={{ width: "3rem" }} class="icon">
+                ID
+              </span>
+              <span class="menu-item-label">
+                {!instance ? "default" : instance}
+              </span>
+            </div>
+          </li>
+          {admin && !mimic && (
+            <Fragment>
+              <p class="menu-label">
+                <Translate>Instances</Translate>
+              </p>
+              <li>
+                <a href={"/instance/new"} class="has-icon">
+                  <span class="icon">
+                    <i class="mdi mdi-plus" />
+                  </span>
+                  <span class="menu-item-label">
+                    <Translate>New</Translate>
+                  </span>
+                </a>
+              </li>
+              <li>
+                <a href={"/instances"} class="has-icon">
+                  <span class="icon">
+                    <i class="mdi mdi-format-list-bulleted" />
+                  </span>
+                  <span class="menu-item-label">
+                    <Translate>List</Translate>
+                  </span>
+                </a>
+              </li>
+            </Fragment>
+          )}
+          <li>
+            <a
+              class="has-icon is-state-info is-hoverable"
+              onClick={(): void => onLogout()}
+            >
+              <span class="icon">
+                <i class="mdi mdi-logout default" />
+              </span>
+              <span class="menu-item-label">
+                <Translate>Log out</Translate>
+              </span>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </aside>
+  );
+}
diff --git a/packages/merchant-backoffice-ui/src/components/menu/index.tsx b/packages/merchant-backoffice-ui/src/components/menu/index.tsx
new file mode 100644
index 000000000..0a621af56
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/menu/index.tsx
@@ -0,0 +1,210 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import { ComponentChildren, Fragment, h, VNode } from "preact";
+import Match from "preact-router/match";
+import { useEffect, useState } from "preact/hooks";
+import { AdminPaths } from "../../AdminRoutes";
+import { InstancePaths } from "../../InstanceRoutes";
+import { Notification } from "../../utils/types";
+import { NavigationBar } from "./NavigationBar";
+import { Sidebar } from "./SideBar";
+
+function getInstanceTitle(path: string, id: string): string {
+  switch (path) {
+    case InstancePaths.update:
+      return `${id}: Settings`;
+    case InstancePaths.order_list:
+      return `${id}: Orders`;
+    case InstancePaths.order_new:
+      return `${id}: New order`;
+    case InstancePaths.product_list:
+      return `${id}: Products`;
+    case InstancePaths.product_new:
+      return `${id}: New product`;
+    case InstancePaths.product_update:
+      return `${id}: Update product`;
+    case InstancePaths.reserves_new:
+      return `${id}: New reserve`;
+    case InstancePaths.reserves_list:
+      return `${id}: Reserves`;
+    case InstancePaths.transfers_list:
+      return `${id}: Transfers`;
+    case InstancePaths.transfers_new:
+      return `${id}: New transfer`;
+    default:
+      return "";
+  }
+}
+
+function getAdminTitle(path: string, instance: string) {
+  if (path === AdminPaths.new_instance) return `New instance`;
+  if (path === AdminPaths.list_instances) return `Instances`;
+  return getInstanceTitle(path, instance);
+}
+
+interface MenuProps {
+  title?: string;
+  instance: string;
+  admin?: boolean;
+  onLogout?: () => void;
+  setInstanceName: (s: string) => void;
+}
+
+function WithTitle({
+  title,
+  children,
+}: {
+  title: string;
+  children: ComponentChildren;
+}): VNode {
+  useEffect(() => {
+    document.title = `Taler Backoffice: ${title}`;
+  }, [title]);
+  return <Fragment>{children}</Fragment>;
+}
+
+export function Menu({
+  onLogout,
+  title,
+  instance,
+  admin,
+  setInstanceName,
+}: MenuProps): VNode {
+  const [mobileOpen, setMobileOpen] = useState(false);
+
+  return (
+    <Match>
+      {({ path }: any) => {
+        const titleWithSubtitle = title
+          ? title
+          : !admin
+          ? getInstanceTitle(path, instance)
+          : getAdminTitle(path, instance);
+        const adminInstance = instance === "default";
+        const mimic = admin && !adminInstance;
+        return (
+          <WithTitle title={titleWithSubtitle}>
+            <div
+              class={mobileOpen ? "has-aside-mobile-expanded" : ""}
+              onClick={() => setMobileOpen(false)}
+            >
+              <NavigationBar
+                onMobileMenu={() => setMobileOpen(!mobileOpen)}
+                title={titleWithSubtitle}
+              />
+
+              {onLogout && (
+                <Sidebar
+                  onLogout={onLogout}
+                  admin={admin}
+                  mimic={mimic}
+                  instance={instance}
+                  mobile={mobileOpen}
+                />
+              )}
+
+              {mimic && (
+                <nav class="level">
+                  <div class="level-item has-text-centered has-background-warning">
+                    <p class="is-size-5">
+                      You are viewing the instance <b>"{instance}"</b>.{" "}
+                      <a
+                        href="#/instances"
+                        onClick={(e) => {
+                          setInstanceName("default");
+                        }}
+                      >
+                        go back
+                      </a>
+                    </p>
+                  </div>
+                </nav>
+              )}
+            </div>
+          </WithTitle>
+        );
+      }}
+    </Match>
+  );
+}
+
+interface NotYetReadyAppMenuProps {
+  title: string;
+  onLogout?: () => void;
+}
+
+interface NotifProps {
+  notification?: Notification;
+}
+export function NotificationCard({
+  notification: n,
+}: NotifProps): VNode | null {
+  if (!n) return null;
+  return (
+    <div class="notification">
+      <div class="columns is-vcentered">
+        <div class="column is-12">
+          <article
+            class={
+              n.type === "ERROR"
+                ? "message is-danger"
+                : n.type === "WARN"
+                ? "message is-warning"
+                : "message is-info"
+            }
+          >
+            <div class="message-header">
+              <p>{n.message}</p>
+            </div>
+            {n.description && (
+              <div class="message-body">
+                <div>{n.description}</div>
+                {n.details && <pre>{n.details}</pre>}
+              </div>
+            )}
+          </article>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function NotYetReadyAppMenu({
+  onLogout,
+  title,
+}: NotYetReadyAppMenuProps): VNode {
+  const [mobileOpen, setMobileOpen] = useState(false);
+
+  useEffect(() => {
+    document.title = `Taler Backoffice: ${title}`;
+  }, [title]);
+
+  return (
+    <div
+      class={mobileOpen ? "has-aside-mobile-expanded" : ""}
+      onClick={() => setMobileOpen(false)}
+    >
+      <NavigationBar
+        onMobileMenu={() => setMobileOpen(!mobileOpen)}
+        title={title}
+      />
+      {onLogout && (
+        <Sidebar onLogout={onLogout} instance="" mobile={mobileOpen} />
+      )}
+    </div>
+  );
+}
diff --git a/packages/merchant-backoffice-ui/src/components/modal/index.tsx b/packages/merchant-backoffice-ui/src/components/modal/index.tsx
new file mode 100644
index 000000000..a7edb9e48
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/modal/index.tsx
@@ -0,0 +1,262 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+
+import { ComponentChildren, h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import { useInstanceContext } from "../../context/instance";
+import { Translate, useTranslator } from "../../i18n";
+import { DEFAULT_REQUEST_TIMEOUT } from "../../utils/constants";
+import { Loading, Spinner } from "../exception/loading";
+import { FormProvider } from "../form/FormProvider";
+import { Input } from "../form/Input";
+
+interface Props {
+  active?: boolean;
+  description?: string;
+  onCancel?: () => void;
+  onConfirm?: () => void;
+  label?: string;
+  children?: ComponentChildren;
+  danger?: boolean;
+  disabled?: boolean;
+}
+
+export function ConfirmModal({ active, description, onCancel, onConfirm, children, danger, disabled, label = 'Confirm' }: Props): VNode {
+  return <div class={active ? "modal is-active" : "modal"}>
+    <div class="modal-background " onClick={onCancel} />
+    <div class="modal-card" style={{maxWidth: 700}}>
+      <header class="modal-card-head">
+        {!description ? null : <p class="modal-card-title"><b>{description}</b></p>}
+        <button class="delete " aria-label="close" onClick={onCancel} />
+      </header>
+      <section class="modal-card-body">
+        {children}
+      </section>
+      <footer class="modal-card-foot">
+        <div class="buttons is-right" style={{ width: '100%' }}>
+          <button class="button " onClick={onCancel} ><Translate>Cancel</Translate></button>
+          <button class={danger ? "button is-danger " : "button is-info "} disabled={disabled} onClick={onConfirm} ><Translate>{label}</Translate></button>
+        </div>
+      </footer>
+    </div>
+    <button class="modal-close is-large " aria-label="close" onClick={onCancel} />
+  </div>
+}
+
+export function ContinueModal({ active, description, onCancel, onConfirm, children, disabled }: Props): VNode {
+  return <div class={active ? "modal is-active" : "modal"}>
+    <div class="modal-background " onClick={onCancel} />
+    <div class="modal-card">
+      <header class="modal-card-head has-background-success">
+        {!description ? null : <p class="modal-card-title">{description}</p>}
+        <button class="delete " aria-label="close" onClick={onCancel} />
+      </header>
+      <section class="modal-card-body">
+        {children}
+      </section>
+      <footer class="modal-card-foot">
+        <div class="buttons is-right" style={{ width: '100%' }}>
+          <button class="button is-success " disabled={disabled} onClick={onConfirm} ><Translate>Continue</Translate></button>
+        </div>
+      </footer>
+    </div>
+    <button class="modal-close is-large " aria-label="close" onClick={onCancel} />
+  </div>
+}
+
+export function SimpleModal({ onCancel, children }: any): VNode {
+  return <div class="modal is-active">
+    <div class="modal-background " onClick={onCancel} />
+    <div class="modal-card">
+      <section class="modal-card-body is-main-section">
+        {children}
+      </section>
+    </div>
+    <button class="modal-close is-large " aria-label="close" onClick={onCancel} />
+  </div>
+}
+
+export function ClearConfirmModal({ description, onCancel, onClear, onConfirm, children }: Props & { onClear?: () => void }): VNode {
+  return <div class="modal is-active">
+    <div class="modal-background " onClick={onCancel} />
+    <div class="modal-card">
+      <header class="modal-card-head">
+        {!description ? null : <p class="modal-card-title">{description}</p>}
+        <button class="delete " aria-label="close" onClick={onCancel} />
+      </header>
+      <section class="modal-card-body is-main-section">
+        {children}
+      </section>
+      <footer class="modal-card-foot">
+        {onClear && <button class="button is-danger" onClick={onClear} disabled={onClear === undefined} ><Translate>Clear</Translate></button>}
+        <div class="buttons is-right" style={{ width: '100%' }}>
+          <button class="button " onClick={onCancel} ><Translate>Cancel</Translate></button>
+          <button class="button is-info" onClick={onConfirm} disabled={onConfirm === undefined} ><Translate>Confirm</Translate></button>
+        </div>
+      </footer>
+    </div>
+    <button class="modal-close is-large " aria-label="close" onClick={onCancel} />
+  </div>
+}
+
+interface DeleteModalProps {
+  element: { id: string, name: string };
+  onCancel: () => void;
+  onConfirm: (id: string) => void;
+}
+
+export function DeleteModal({ element, onCancel, onConfirm }: DeleteModalProps): VNode {
+  return <ConfirmModal label={`Delete instance`} description={`Delete the instance "${element.name}"`} danger active onCancel={onCancel} onConfirm={() => onConfirm(element.id)}>
+    <p>If you delete the instance named <b>"{element.name}"</b> (ID: <b>{element.id}</b>), the merchant will no longer be able to process orders or refunds</p>
+    <p>This action deletes the instance private key, but preserves all transaction data. You can still access that data after deleting the instance.</p>
+    <p class="warning">Deleting an instance <b>cannot be undone</b>.</p>
+  </ConfirmModal>
+}
+
+export function PurgeModal({ element, onCancel, onConfirm }: DeleteModalProps): VNode {
+  return <ConfirmModal label={`Purge the instance`} description={`Purge the instance "${element.name}"`} danger active onCancel={onCancel} onConfirm={() => onConfirm(element.id)}>
+    <p>If you purge the instance named <b>"{element.name}"</b> (ID: <b>{element.id}</b>), you will also delete all it's transaction data.</p>
+    <p>The instance will disappear from your list, and you will no longer be able to access it's data.</p>
+    <p class="warning">Purging an instance <b>cannot be undone</b>.</p>
+  </ConfirmModal>
+}
+
+interface UpdateTokenModalProps {
+  oldToken?: string;
+  onCancel: () => void;
+  onConfirm: (value: string) => void;
+  onClear: () => void;
+}
+
+//FIXME: merge UpdateTokenModal with SetTokenNewInstanceModal
+export function UpdateTokenModal({ onCancel, onClear, onConfirm, oldToken }: UpdateTokenModalProps): VNode {
+  type State = { old_token: string, new_token: string, repeat_token: string }
+  const [form, setValue] = useState<Partial<State>>({
+    old_token: '', new_token: '', repeat_token: '',
+  })
+  const i18n = useTranslator()
+
+  const hasInputTheCorrectOldToken = oldToken && oldToken !== form.old_token
+  const errors = {
+    old_token: hasInputTheCorrectOldToken ? i18n`is not the same as the current access token` : undefined,
+    new_token: !form.new_token ? i18n`cannot be empty` : (form.new_token === form.old_token ? i18n`cannot be the same as the old token` : undefined),
+    repeat_token: form.new_token !== form.repeat_token ? i18n`is not the same` : undefined
+  }
+
+  const hasErrors = Object.keys(errors).some(k => (errors as any)[k] !== undefined)
+
+  const instance = useInstanceContext()
+
+  const text = i18n`You are updating the access token from instance with id ${instance.id}`
+
+  return <ClearConfirmModal description={text}
+    onCancel={onCancel}
+    onConfirm={!hasErrors ? () => onConfirm(form.new_token!) : undefined}
+    onClear={!hasInputTheCorrectOldToken && oldToken ? onClear : undefined}
+  >
+    <div class="columns">
+      <div class="column" />
+      <div class="column is-four-fifths" >
+        <FormProvider errors={errors} object={form} valueHandler={setValue}>
+          {oldToken && <Input<State> name="old_token" label={i18n`Old access token`} tooltip={i18n`access token currently in use`} inputType="password" />}
+          <Input<State> name="new_token" label={i18n`New access token`} tooltip={i18n`next access token to be used`} inputType="password" />
+          <Input<State> name="repeat_token" label={i18n`Repeat access token`} tooltip={i18n`confirm the same access token`} inputType="password" />
+        </FormProvider>
+        <p><Translate>Clearing the access token will mean public access to the instance</Translate></p>
+      </div>
+      <div class="column" />
+    </div>
+  </ClearConfirmModal>
+}
+
+export function SetTokenNewInstanceModal({ onCancel, onClear, onConfirm }: UpdateTokenModalProps): VNode {
+  type State = { old_token: string, new_token: string, repeat_token: string }
+  const [form, setValue] = useState<Partial<State>>({
+    new_token: '', repeat_token: '',
+  })
+  const i18n = useTranslator()
+
+  const errors = {
+    new_token: !form.new_token ? i18n`cannot be empty` : (form.new_token === form.old_token ? i18n`cannot be the same as the old access token` : undefined),
+    repeat_token: form.new_token !== form.repeat_token ? i18n`is not the same` : undefined
+  }
+
+  const hasErrors = Object.keys(errors).some(k => (errors as any)[k] !== undefined)
+
+
+  return <div class="modal is-active">
+    <div class="modal-background " onClick={onCancel} />
+    <div class="modal-card">
+      <header class="modal-card-head">
+        <p class="modal-card-title">{i18n`You are setting the access token for the new instance`}</p>
+        <button class="delete " aria-label="close" onClick={onCancel} />
+      </header>
+      <section class="modal-card-body is-main-section">
+        <div class="columns">
+          <div class="column" />
+          <div class="column is-four-fifths" >
+            <FormProvider errors={errors} object={form} valueHandler={setValue}>
+              <Input<State> name="new_token" label={i18n`New access token`} tooltip={i18n`next access token to be used`} inputType="password" />
+              <Input<State> name="repeat_token" label={i18n`Repeat access token`} tooltip={i18n`confirm the same access token`} inputType="password" />
+            </FormProvider>
+            <p><Translate>With external authorization method no check will be done by the merchant backend</Translate></p>
+          </div>
+          <div class="column" />
+        </div>
+      </section>
+      <footer class="modal-card-foot">
+        {onClear && <button class="button is-danger" onClick={onClear} disabled={onClear === undefined} ><Translate>Set external authorization</Translate></button>}
+        <div class="buttons is-right" style={{ width: '100%' }}>
+          <button class="button " onClick={onCancel} ><Translate>Cancel</Translate></button>
+          <button class="button is-info" onClick={() => onConfirm(form.new_token!)} disabled={hasErrors} ><Translate>Set access token</Translate></button>
+        </div>
+      </footer>
+    </div>
+    <button class="modal-close is-large " aria-label="close" onClick={onCancel} />
+  </div>
+}
+
+export function LoadingModal({ onCancel }: { onCancel: () => void }): VNode {
+  const i18n = useTranslator()
+  return <div class="modal is-active">
+    <div class="modal-background " onClick={onCancel} />
+    <div class="modal-card">
+      <header class="modal-card-head">
+        <p class="modal-card-title"><Translate>Operation in progress...</Translate></p>
+      </header>
+      <section class="modal-card-body">
+        <div class="columns">
+          <div class="column" />
+          <Spinner />
+          <div class="column" />
+        </div>
+        <p>{i18n`The operation will be automatically canceled after ${DEFAULT_REQUEST_TIMEOUT} seconds`}</p>
+      </section>
+      <footer class="modal-card-foot">
+        <div class="buttons is-right" style={{ width: '100%' }}>
+          <button class="button " onClick={onCancel} ><Translate>Cancel</Translate></button>
+        </div>
+      </footer>
+    </div>
+    <button class="modal-close is-large " aria-label="close" onClick={onCancel} />
+  </div>
+}
diff --git a/packages/merchant-backoffice-ui/src/components/notifications/CreatedSuccessfully.tsx b/packages/merchant-backoffice-ui/src/components/notifications/CreatedSuccessfully.tsx
new file mode 100644
index 000000000..e0b355c2e
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/notifications/CreatedSuccessfully.tsx
@@ -0,0 +1,49 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+import { ComponentChildren, h, VNode } from "preact";
+
+interface Props {
+  onCreateAnother?: () => void;
+  onConfirm: () => void;
+  children: ComponentChildren;
+}
+
+export function CreatedSuccessfully({ children, onConfirm, onCreateAnother }: Props): VNode {
+  return <div class="columns is-fullwidth is-vcentered mt-3">
+    <div class="column" />
+    <div class="column is-four-fifths">
+      <div class="card">
+        <header class="card-header has-background-success">
+          <p class="card-header-title has-text-white-ter">
+            Success.
+          </p>
+        </header>
+        <div class="card-content">
+          {children}
+        </div>
+      </div>
+        <div class="buttons is-right">
+          {onCreateAnother && <button class="button is-info" onClick={onCreateAnother}>Create another</button>}
+          <button class="button is-info" onClick={onConfirm}>Continue</button>
+        </div>
+    </div>
+    <div class="column" />
+  </div>
+}
diff --git a/packages/merchant-backoffice-ui/src/components/notifications/Notifications.stories.tsx b/packages/merchant-backoffice-ui/src/components/notifications/Notifications.stories.tsx
new file mode 100644
index 000000000..3b95295fe
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/notifications/Notifications.stories.tsx
@@ -0,0 +1,57 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { h } from 'preact';
+import { Notifications } from './index';
+
+
+export default {
+  title: 'Components/Notification',
+  component: Notifications,
+  argTypes: {
+    removeNotification: { action: 'removeNotification' },
+  },
+};
+
+export const Info = (a: any) => <Notifications {...a} />;
+Info.args = {
+  notifications: [{
+    message: 'Title',
+    description: 'Some large description',
+    type: 'INFO',
+  }]
+}
+export const Warn = (a: any) => <Notifications {...a} />;
+Warn.args = {
+  notifications: [{
+    message: 'Title',
+    description: 'Some large description',
+    type: 'WARN',
+  }]
+}
+export const Error = (a: any) => <Notifications {...a} />;
+Error.args = {
+  notifications: [{
+    message: 'Title',
+    description: 'Some large description',
+    type: 'ERROR',
+  }]
+}
diff --git a/packages/merchant-backoffice-ui/src/components/notifications/index.tsx b/packages/merchant-backoffice-ui/src/components/notifications/index.tsx
new file mode 100644
index 000000000..34bd40ec6
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/notifications/index.tsx
@@ -0,0 +1,52 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { h, VNode } from "preact";
+import { MessageType, Notification } from "../../utils/types";
+
+interface Props {
+  notifications: Notification[];
+  removeNotification?: (n: Notification) => void;
+}
+
+function messageStyle(type: MessageType): string {
+  switch (type) {
+    case "INFO": return "message is-info";
+    case "WARN": return "message is-warning";
+    case "ERROR": return "message is-danger";
+    case "SUCCESS": return "message is-success";
+    default: return "message"
+  }
+}
+
+export function Notifications({ notifications, removeNotification }: Props): VNode {
+  return <div class="toast">
+    {notifications.map((n,i) => <article key={i} class={messageStyle(n.type)}>
+      <div class="message-header">
+        <p>{n.message}</p>
+        <button class="delete" onClick={() => removeNotification && removeNotification(n)} />
+      </div>
+      {n.description && <div class="message-body">
+        {n.description}
+      </div>}
+    </article>)}
+  </div>
+}
\ No newline at end of file
diff --git a/packages/merchant-backoffice-ui/src/components/picker/DatePicker.tsx b/packages/merchant-backoffice-ui/src/components/picker/DatePicker.tsx
new file mode 100644
index 000000000..084b7b00a
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/picker/DatePicker.tsx
@@ -0,0 +1,324 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { h, Component } from "preact";
+
+interface Props {
+  closeFunction?: () => void;
+  dateReceiver?: (d: Date) => void;
+  opened?: boolean;
+}
+interface State {
+  displayedMonth: number;
+  displayedYear: number;
+  selectYearMode: boolean;
+  currentDate: Date;
+}
+
+// inspired by https://codepen.io/m4r1vs/pen/MOOxyE
+export class DatePicker extends Component<Props, State> {
+
+  closeDatePicker() {
+    this.props.closeFunction && this.props.closeFunction(); // Function gets passed by parent
+  }
+
+  /**
+  * Gets fired when a day gets clicked.
+  * @param {object} e The event thrown by the <span /> element clicked
+  */
+  dayClicked(e: any) {
+
+    const element = e.target; // the actual element clicked
+
+    if (element.innerHTML === '') return false; // don't continue if <span /> empty
+
+    // get date from clicked element (gets attached when rendered)
+    const date = new Date(element.getAttribute('data-value'));
+
+    // update the state
+    this.setState({ currentDate: date });
+    this.passDateToParent(date)
+  }
+
+  /**
+  * returns days in month as array
+  * @param {number} month the month to display
+  * @param {number} year the year to display
+  */
+  getDaysByMonth(month: number, year: number) {
+
+    const calendar = [];
+
+    const date = new Date(year, month, 1); // month to display
+
+    const firstDay = new Date(year, month, 1).getDay(); // first weekday of month
+    const lastDate = new Date(year, month + 1, 0).getDate(); // last date of month
+
+    let day: number | null = 0;
+
+    // the calendar is 7*6 fields big, so 42 loops
+    for (let i = 0; i < 42; i++) {
+
+      if (i >= firstDay && day !== null) day = day + 1;
+      if (day !== null && day > lastDate) day = null;
+
+      // append the calendar Array
+      calendar.push({
+        day: (day === 0 || day === null) ? null : day, // null or number
+        date: (day === 0 || day === null) ? null : new Date(year, month, day), // null or Date()
+        today: (day === now.getDate() && month === now.getMonth() && year === now.getFullYear()) // boolean
+      });
+    }
+
+    return calendar;
+  }
+
+  /**
+  * Display previous month by updating state
+  */
+  displayPrevMonth() {
+    if (this.state.displayedMonth <= 0) {
+      this.setState({
+        displayedMonth: 11,
+        displayedYear: this.state.displayedYear - 1
+      });
+    }
+    else {
+      this.setState({
+        displayedMonth: this.state.displayedMonth - 1
+      });
+    }
+  }
+
+  /**
+  * Display next month by updating state
+  */
+  displayNextMonth() {
+    if (this.state.displayedMonth >= 11) {
+      this.setState({
+        displayedMonth: 0,
+        displayedYear: this.state.displayedYear + 1
+      });
+    }
+    else {
+      this.setState({
+        displayedMonth: this.state.displayedMonth + 1
+      });
+    }
+  }
+
+  /**
+  * Display the selected month (gets fired when clicking on the date string)
+  */
+  displaySelectedMonth() {
+    if (this.state.selectYearMode) {
+      this.toggleYearSelector();
+    }
+    else {
+      if (!this.state.currentDate) return false;
+      this.setState({
+        displayedMonth: this.state.currentDate.getMonth(),
+        displayedYear: this.state.currentDate.getFullYear()
+      });
+    }
+  }
+
+  toggleYearSelector() {
+    this.setState({ selectYearMode: !this.state.selectYearMode });
+  }
+
+  changeDisplayedYear(e: any) {
+    const element = e.target;
+    this.toggleYearSelector();
+    this.setState({ displayedYear: parseInt(element.innerHTML, 10), displayedMonth: 0 });
+  }
+
+  /**
+  * Pass the selected date to parent when 'OK' is clicked
+  */
+  passSavedDateDateToParent() {
+    this.passDateToParent(this.state.currentDate)
+  }
+  passDateToParent(date: Date) {
+    if (typeof this.props.dateReceiver === 'function') this.props.dateReceiver(date);
+    this.closeDatePicker();
+  }
+
+  componentDidUpdate() {
+    if (this.state.selectYearMode) {
+      document.getElementsByClassName('selected')[0].scrollIntoView(); // works in every browser incl. IE, replace with scrollIntoViewIfNeeded when browsers support it
+    }
+  }
+
+  constructor() {
+    super();
+
+    this.closeDatePicker = this.closeDatePicker.bind(this);
+    this.dayClicked = this.dayClicked.bind(this);
+    this.displayNextMonth = this.displayNextMonth.bind(this);
+    this.displayPrevMonth = this.displayPrevMonth.bind(this);
+    this.getDaysByMonth = this.getDaysByMonth.bind(this);
+    this.changeDisplayedYear = this.changeDisplayedYear.bind(this);
+    this.passDateToParent = this.passDateToParent.bind(this);
+    this.toggleYearSelector = this.toggleYearSelector.bind(this);
+    this.displaySelectedMonth = this.displaySelectedMonth.bind(this);
+
+
+    this.state = {
+      currentDate: now,
+      displayedMonth: now.getMonth(),
+      displayedYear: now.getFullYear(),
+      selectYearMode: false
+    }
+  }
+
+  render() {
+
+    const { currentDate, displayedMonth, displayedYear, selectYearMode } = this.state;
+
+    return (
+      <div>
+        <div class={`datePicker ${  this.props.opened && "datePicker--opened"}`} >
+
+          <div class="datePicker--titles">
+            <h3 style={{
+              color: selectYearMode ? 'rgba(255,255,255,.87)' : 'rgba(255,255,255,.57)'
+            }} onClick={this.toggleYearSelector}>{currentDate.getFullYear()}</h3>
+            <h2 style={{
+              color: !selectYearMode ? 'rgba(255,255,255,.87)' : 'rgba(255,255,255,.57)'
+            }} onClick={this.displaySelectedMonth}>
+              {dayArr[currentDate.getDay()]}, {monthArrShort[currentDate.getMonth()]} {currentDate.getDate()}
+            </h2>
+          </div>
+
+          {!selectYearMode && <nav>
+            <span onClick={this.displayPrevMonth} class="icon"><i style={{ transform: 'rotate(180deg)' }} class="mdi mdi-forward" /></span>
+            <h4>{monthArrShortFull[displayedMonth]} {displayedYear}</h4>
+            <span onClick={this.displayNextMonth} class="icon"><i class="mdi mdi-forward" /></span>
+          </nav>}
+
+          <div class="datePicker--scroll">
+
+            {!selectYearMode && <div class="datePicker--calendar" >
+
+              <div class="datePicker--dayNames">
+                {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((day,i) => <span key={i}>{day}</span>)}
+              </div>
+
+              <div onClick={this.dayClicked} class="datePicker--days">
+
+                {/*
+                  Loop through the calendar object returned by getDaysByMonth().
+                */}
+
+                {this.getDaysByMonth(this.state.displayedMonth, this.state.displayedYear)
+                  .map(
+                    day => {
+                      let selected = false;
+
+                      if (currentDate && day.date) selected = (currentDate.toLocaleDateString() === day.date.toLocaleDateString());
+
+                      return (<span key={day.day}
+                        class={(day.today ? 'datePicker--today ' : '') + (selected ? 'datePicker--selected' : '')}
+                        disabled={!day.date}
+                        data-value={day.date}
+                      >
+                        {day.day}
+                      </span>)
+                    }
+                  )
+                }
+
+              </div>
+
+            </div>}
+
+            {selectYearMode && <div class="datePicker--selectYear">
+
+              {yearArr.map(year => (
+                <span key={year} class={(year === displayedYear) ? 'selected' : ''} onClick={this.changeDisplayedYear}>
+                  {year}
+                </span>
+              ))}
+
+            </div>}
+
+          </div>
+        </div>
+
+        <div class="datePicker--background" onClick={this.closeDatePicker} style={{
+          display: this.props.opened ? 'block' : 'none'
+        }}
+        />
+
+      </div>
+    )
+  }
+}
+
+
+const monthArrShortFull = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December'
+]
+
+const monthArrShort = [
+  'Jan',
+  'Feb',
+  'Mar',
+  'Apr',
+  'May',
+  'Jun',
+  'Jul',
+  'Aug',
+  'Sep',
+  'Oct',
+  'Nov',
+  'Dec'
+]
+
+const dayArr = [
+  'Sun',
+  'Mon',
+  'Tue',
+  'Wed',
+  'Thu',
+  'Fri',
+  'Sat'
+]
+
+const now = new Date()
+
+const yearArr: number[] = []
+
+for (let i = 2010; i <= now.getFullYear() + 10; i++) {
+  yearArr.push(i);
+}
diff --git a/packages/merchant-backoffice-ui/src/components/picker/DurationPicker.stories.tsx b/packages/merchant-backoffice-ui/src/components/picker/DurationPicker.stories.tsx
new file mode 100644
index 000000000..275c80fa6
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/picker/DurationPicker.stories.tsx
@@ -0,0 +1,50 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { h, FunctionalComponent } from 'preact';
+import { useState } from 'preact/hooks';
+import { DurationPicker as TestedComponent } from './DurationPicker';
+
+
+export default {
+  title: 'Components/Picker/Duration',
+  component: TestedComponent,
+  argTypes: {
+    onCreate: { action: 'onCreate' },
+    goBack: { action: 'goBack' },
+  }
+};
+
+function createExample<Props>(Component: FunctionalComponent<Props>, props: Partial<Props>) {
+  const r = (args: any) => <Component {...args} />
+  r.args = props
+  return r
+}
+
+export const Example = createExample(TestedComponent, {
+  days: true, minutes: true, hours: true, seconds: true,
+  value: 10000000
+});
+
+export const WithState = () => {
+  const [v,s] = useState<number>(1000000)
+  return <TestedComponent value={v} onChange={s} days minutes hours seconds />
+}
diff --git a/packages/merchant-backoffice-ui/src/components/picker/DurationPicker.tsx b/packages/merchant-backoffice-ui/src/components/picker/DurationPicker.tsx
new file mode 100644
index 000000000..f32a48fd4
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/picker/DurationPicker.tsx
@@ -0,0 +1,211 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import { useTranslator } from "../../i18n";
+import "../../scss/DurationPicker.scss";
+
+export interface Props {
+  hours?: boolean;
+  minutes?: boolean;
+  seconds?: boolean;
+  days?: boolean;
+  onChange: (value: number) => void;
+  value: number;
+}
+
+// inspiration taken from https://github.com/flurmbo/react-duration-picker
+export function DurationPicker({
+  days,
+  hours,
+  minutes,
+  seconds,
+  onChange,
+  value,
+}: Props): VNode {
+  const ss = 1000 * 1000;
+  const ms = ss * 60;
+  const hs = ms * 60;
+  const ds = hs * 24;
+  const i18n = useTranslator();
+
+  return (
+    <div class="rdp-picker">
+      {days && (
+        <DurationColumn
+          unit={i18n`days`}
+          max={99}
+          value={Math.floor(value / ds)}
+          onDecrease={value >= ds ? () => onChange(value - ds) : undefined}
+          onIncrease={value < 99 * ds ? () => onChange(value + ds) : undefined}
+          onChange={(diff) => onChange(value + diff * ds)}
+        />
+      )}
+      {hours && (
+        <DurationColumn
+          unit={i18n`hours`}
+          max={23}
+          min={1}
+          value={Math.floor(value / hs) % 24}
+          onDecrease={value >= hs ? () => onChange(value - hs) : undefined}
+          onIncrease={value < 99 * ds ? () => onChange(value + hs) : undefined}
+          onChange={(diff) => onChange(value + diff * hs)}
+        />
+      )}
+      {minutes && (
+        <DurationColumn
+          unit={i18n`minutes`}
+          max={59}
+          min={1}
+          value={Math.floor(value / ms) % 60}
+          onDecrease={value >= ms ? () => onChange(value - ms) : undefined}
+          onIncrease={value < 99 * ds ? () => onChange(value + ms) : undefined}
+          onChange={(diff) => onChange(value + diff * ms)}
+        />
+      )}
+      {seconds && (
+        <DurationColumn
+          unit={i18n`seconds`}
+          max={59}
+          value={Math.floor(value / ss) % 60}
+          onDecrease={value >= ss ? () => onChange(value - ss) : undefined}
+          onIncrease={value < 99 * ds ? () => onChange(value + ss) : undefined}
+          onChange={(diff) => onChange(value + diff * ss)}
+        />
+      )}
+    </div>
+  );
+}
+
+interface ColProps {
+  unit: string;
+  min?: number;
+  max: number;
+  value: number;
+  onIncrease?: () => void;
+  onDecrease?: () => void;
+  onChange?: (diff: number) => void;
+}
+
+function InputNumber({
+  initial,
+  onChange,
+}: {
+  initial: number;
+  onChange: (n: number) => void;
+}) {
+  const [value, handler] = useState<{ v: string }>({
+    v: toTwoDigitString(initial),
+  });
+
+  return (
+    <input
+      value={value.v}
+      onBlur={(e) => onChange(parseInt(value.v, 10))}
+      onInput={(e) => {
+        e.preventDefault();
+        const n = Number.parseInt(e.currentTarget.value, 10);
+        if (isNaN(n)) return handler({ v: toTwoDigitString(initial) });
+        return handler({ v: toTwoDigitString(n) });
+      }}
+      style={{
+        width: 50,
+        border: "none",
+        fontSize: "inherit",
+        background: "inherit",
+      }}
+    />
+  );
+}
+
+function DurationColumn({
+  unit,
+  min = 0,
+  max,
+  value,
+  onIncrease,
+  onDecrease,
+  onChange,
+}: ColProps): VNode {
+  const cellHeight = 35;
+  return (
+    <div class="rdp-column-container">
+      <div class="rdp-masked-div">
+        <hr class="rdp-reticule" style={{ top: cellHeight * 2 - 1 }} />
+        <hr class="rdp-reticule" style={{ top: cellHeight * 3 - 1 }} />
+
+        <div class="rdp-column" style={{ top: 0 }}>
+          <div class="rdp-cell" key={value - 2}>
+            {onDecrease && (
+              <button
+                style={{ width: "100%", textAlign: "center", margin: 5 }}
+                onClick={onDecrease}
+              >
+                <span class="icon">
+                  <i class="mdi mdi-chevron-up" />
+                </span>
+              </button>
+            )}
+          </div>
+          <div class="rdp-cell" key={value - 1}>
+            {value > min ? toTwoDigitString(value - 1) : ""}
+          </div>
+          <div class="rdp-cell rdp-center" key={value}>
+            {onChange ? (
+              <InputNumber
+                initial={value}
+                onChange={(n) => onChange(n - value)}
+              />
+            ) : (
+              toTwoDigitString(value)
+            )}
+            <div>{unit}</div>
+          </div>
+
+          <div class="rdp-cell" key={value + 1}>
+            {value < max ? toTwoDigitString(value + 1) : ""}
+          </div>
+
+          <div class="rdp-cell" key={value + 2}>
+            {onIncrease && (
+              <button
+                style={{ width: "100%", textAlign: "center", margin: 5 }}
+                onClick={onIncrease}
+              >
+                <span class="icon">
+                  <i class="mdi mdi-chevron-down" />
+                </span>
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function toTwoDigitString(n: number) {
+  if (n < 10) {
+    return `0${n}`;
+  }
+  return `${n}`;
+}
diff --git a/packages/merchant-backoffice-ui/src/components/product/InventoryProductForm.stories.tsx b/packages/merchant-backoffice-ui/src/components/product/InventoryProductForm.stories.tsx
new file mode 100644
index 000000000..6504d85ba
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/product/InventoryProductForm.stories.tsx
@@ -0,0 +1,58 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { h, VNode, FunctionalComponent } from 'preact';
+import { InventoryProductForm as TestedComponent } from './InventoryProductForm';
+
+
+export default {
+  title: 'Components/Product/Add',
+  component: TestedComponent,
+  argTypes: {
+    onAddProduct: { action: 'onAddProduct' },
+  },
+};
+
+function createExample<Props>(Component: FunctionalComponent<Props>, props: Partial<Props>) {
+  const r = (args: any) => <Component {...args} />
+  r.args = props
+  return r
+}
+
+export const WithASimpleList = createExample(TestedComponent, {
+  inventory:[{
+    id: 'this id',
+    description: 'this is the description',
+  } as any]
+});
+
+export const WithAProductSelected = createExample(TestedComponent, {
+  inventory:[],
+  currentProducts: {
+    thisid: {
+      quantity: 1,
+      product: {
+        id: 'asd',
+        description: 'asdsadsad',
+      } as any
+    }
+  }
+});
diff --git a/packages/merchant-backoffice-ui/src/components/product/InventoryProductForm.tsx b/packages/merchant-backoffice-ui/src/components/product/InventoryProductForm.tsx
new file mode 100644
index 000000000..8f05c9736
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/product/InventoryProductForm.tsx
@@ -0,0 +1,95 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+import { h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import { FormProvider, FormErrors } from "../form/FormProvider";
+import { InputNumber } from "../form/InputNumber";
+import { InputSearchProduct } from "../form/InputSearchProduct";
+import { MerchantBackend, WithId } from "../../declaration";
+import { Translate, useTranslator } from "../../i18n";
+import { ProductMap } from "../../paths/instance/orders/create/CreatePage";
+
+type Form = {
+  product: MerchantBackend.Products.ProductDetail & WithId,
+  quantity: number;
+}
+
+interface Props {
+  currentProducts: ProductMap,
+  onAddProduct: (product: MerchantBackend.Products.ProductDetail & WithId, quantity: number) => void,
+  inventory: (MerchantBackend.Products.ProductDetail & WithId)[],
+}
+
+export function InventoryProductForm({ currentProducts, onAddProduct, inventory }: Props): VNode {
+  const initialState = { quantity: 1 }
+  const [state, setState] = useState<Partial<Form>>(initialState)
+  const [errors, setErrors] = useState<FormErrors<Form>>({})
+
+  const i18n = useTranslator()
+
+  const productWithInfiniteStock = state.product && state.product.total_stock === -1
+
+  const submit = (): void => {
+    if (!state.product) {
+      setErrors({ product: i18n`You must enter a valid product identifier.` });
+      return;
+    }
+    if (productWithInfiniteStock) {
+      onAddProduct(state.product, 1)
+    } else {
+      if (!state.quantity || state.quantity <= 0) {
+        setErrors({ quantity: i18n`Quantity must be greater than 0!` });
+        return;
+      }
+      const currentStock = state.product.total_stock - state.product.total_lost - state.product.total_sold
+      const p = currentProducts[state.product.id]
+      if (p) {
+        if (state.quantity + p.quantity > currentStock) {
+          const left = currentStock - p.quantity;
+          setErrors({ quantity: i18n`This quantity exceeds remaining stock. Currently, only ${left} units remain unreserved in stock.` });
+          return;
+        }
+        onAddProduct(state.product, state.quantity + p.quantity)
+      } else {
+        if (state.quantity > currentStock) {
+          const left = currentStock;
+          setErrors({ quantity: i18n`This quantity exceeds remaining stock. Currently, only ${left} units remain unreserved in stock.` });
+          return;
+        }
+        onAddProduct(state.product, state.quantity)
+      }
+    }
+
+    setState(initialState)
+  }
+
+  return <FormProvider<Form> errors={errors} object={state} valueHandler={setState}>
+    <InputSearchProduct selected={state.product} onChange={(p) => setState(v => ({ ...v, product: p }))} products={inventory} />
+    { state.product && <div class="columns mt-5">
+      <div class="column is-two-thirds">
+        {!productWithInfiniteStock &&
+          <InputNumber<Form> name="quantity" label={i18n`Quantity`} tooltip={i18n`how many products will be added`} />
+        }
+      </div>
+      <div class="column">
+        <div class="buttons is-right">
+          <button class="button is-success" onClick={submit}><Translate>Add from inventory</Translate></button>
+        </div>
+      </div>
+    </div> }
+
+  </FormProvider>
+}
diff --git a/packages/merchant-backoffice-ui/src/components/product/NonInventoryProductForm.tsx b/packages/merchant-backoffice-ui/src/components/product/NonInventoryProductForm.tsx
new file mode 100644
index 000000000..397efe616
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/product/NonInventoryProductForm.tsx
@@ -0,0 +1,146 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+import { Fragment, h, VNode } from "preact";
+import { useCallback, useEffect, useState } from "preact/hooks";
+import * as yup from 'yup';
+import { FormErrors, FormProvider } from "../form/FormProvider";
+import { Input } from "../form/Input";
+import { InputCurrency } from "../form/InputCurrency";
+import { InputImage } from "../form/InputImage";
+import { InputNumber } from "../form/InputNumber";
+import { InputTaxes } from "../form/InputTaxes";
+import { MerchantBackend } from "../../declaration";
+import { useListener } from "../../hooks/listener";
+import { Translate, useTranslator } from "../../i18n";
+import {
+  NonInventoryProductSchema as schema
+} from '../../schemas';
+
+
+type Entity = MerchantBackend.Product
+
+interface Props {
+  onAddProduct: (p: Entity) => Promise<void>;
+  productToEdit?: Entity;
+}
+export function NonInventoryProductFrom({ productToEdit, onAddProduct }: Props): VNode {
+  const [showCreateProduct, setShowCreateProduct] = useState(false)
+
+  const isEditing = !!productToEdit
+
+  useEffect(() => {
+    setShowCreateProduct(isEditing)
+  }, [isEditing])
+
+  const [submitForm, addFormSubmitter] = useListener<Partial<MerchantBackend.Product> | undefined>((result) => {
+    if (result) {
+      setShowCreateProduct(false)
+      return onAddProduct({
+        quantity: result.quantity || 0,
+        taxes: result.taxes || [],
+        description: result.description || '',
+        image: result.image || '',
+        price: result.price || '',
+        unit: result.unit || ''
+      })
+    }
+    return Promise.resolve()
+  })
+
+  const i18n = useTranslator()
+
+  return <Fragment>
+    <div class="buttons">
+      <button class="button is-success" data-tooltip={i18n`describe and add a product that is not in the inventory list`} onClick={() => setShowCreateProduct(true)} ><Translate>Add custom product</Translate></button>
+    </div>
+    {showCreateProduct && <div class="modal is-active">
+      <div class="modal-background " onClick={() => setShowCreateProduct(false)} />
+      <div class="modal-card">
+        <header class="modal-card-head">
+          <p class="modal-card-title">{i18n`Complete information of the product`}</p>
+          <button class="delete " aria-label="close" onClick={() => setShowCreateProduct(false)} />
+        </header>
+        <section class="modal-card-body">
+          <ProductForm initial={productToEdit} onSubscribe={addFormSubmitter} />
+        </section>
+        <footer class="modal-card-foot">
+          <div class="buttons is-right" style={{ width: '100%' }}>
+            <button class="button " onClick={() => setShowCreateProduct(false)} ><Translate>Cancel</Translate></button>
+            <button class="button is-info " disabled={!submitForm} onClick={submitForm} ><Translate>Confirm</Translate></button>
+          </div>
+        </footer>
+      </div>
+      <button class="modal-close is-large " aria-label="close" onClick={() => setShowCreateProduct(false)} />
+    </div>}
+  </Fragment>
+}
+
+interface ProductProps {
+  onSubscribe: (c?: () => Entity | undefined) => void;
+  initial?: Partial<Entity>;
+}
+
+interface NonInventoryProduct {
+  quantity: number;
+  description: string;
+  unit: string;
+  price: string;
+  image: string;
+  taxes: MerchantBackend.Tax[];
+}
+
+export function ProductForm({ onSubscribe, initial }: ProductProps): VNode {
+  const [value, valueHandler] = useState<Partial<NonInventoryProduct>>({
+    taxes: [],
+    ...initial,
+  })
+  let errors: FormErrors<Entity> = {}
+  try {
+    schema.validateSync(value, { abortEarly: false })
+  } catch (err) {
+    if (err instanceof yup.ValidationError) {
+      const yupErrors = err.inner as yup.ValidationError[]
+      errors = yupErrors.reduce((prev, cur) => !cur.path ? prev : ({ ...prev, [cur.path]: cur.message }), {})
+    }
+  }
+
+  const submit = useCallback((): Entity | undefined => {
+    return value as MerchantBackend.Product
+  }, [value])
+
+  const hasErrors = Object.keys(errors).some(k => (errors as any)[k] !== undefined)
+
+  useEffect(() => {
+    onSubscribe(hasErrors ? undefined : submit)
+  }, [submit, hasErrors])
+
+  const i18n = useTranslator()
+
+  return <div>
+    <FormProvider<NonInventoryProduct> name="product" errors={errors} object={value} valueHandler={valueHandler} >
+
+      <InputImage<NonInventoryProduct> name="image" label={i18n`Image`} tooltip={i18n`photo of the product`} />
+      <Input<NonInventoryProduct> name="description" inputType="multiline" label={i18n`Description`} tooltip={i18n`full product description`} />
+      <Input<NonInventoryProduct> name="unit" label={i18n`Unit`} tooltip={i18n`name of the product unit`} />
+      <InputCurrency<NonInventoryProduct> name="price" label={i18n`Price`} tooltip={i18n`amount in the current currency`} />
+
+      <InputNumber<NonInventoryProduct> name="quantity" label={i18n`Quantity`} tooltip={i18n`how many products will be added`} />
+
+      <InputTaxes<NonInventoryProduct> name="taxes" label={i18n`Taxes`} />
+
+    </FormProvider>
+  </div>
+}
diff --git a/packages/merchant-backoffice-ui/src/components/product/ProductForm.tsx b/packages/merchant-backoffice-ui/src/components/product/ProductForm.tsx
new file mode 100644
index 000000000..9434d3de8
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/product/ProductForm.tsx
@@ -0,0 +1,176 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { h } from "preact";
+import { useCallback, useEffect, useState } from "preact/hooks";
+import * as yup from "yup";
+import { useBackendContext } from "../../context/backend";
+import { MerchantBackend } from "../../declaration";
+import { useTranslator } from "../../i18n";
+import {
+  ProductCreateSchema as createSchema,
+  ProductUpdateSchema as updateSchema,
+} from "../../schemas";
+import { FormProvider, FormErrors } from "../form/FormProvider";
+import { Input } from "../form/Input";
+import { InputCurrency } from "../form/InputCurrency";
+import { InputImage } from "../form/InputImage";
+import { InputNumber } from "../form/InputNumber";
+import { InputStock, Stock } from "../form/InputStock";
+import { InputTaxes } from "../form/InputTaxes";
+import { InputWithAddon } from "../form/InputWithAddon";
+
+type Entity = MerchantBackend.Products.ProductDetail & { product_id: string };
+
+interface Props {
+  onSubscribe: (c?: () => Entity | undefined) => void;
+  initial?: Partial<Entity>;
+  alreadyExist?: boolean;
+}
+
+export function ProductForm({ onSubscribe, initial, alreadyExist }: Props) {
+  const [value, valueHandler] = useState<Partial<Entity & { stock: Stock }>>({
+    address: {},
+    description_i18n: {},
+    taxes: [],
+    next_restock: { t_s: "never" },
+    price: ":0",
+    ...initial,
+    stock:
+      !initial || initial.total_stock === -1
+        ? undefined
+        : {
+            current: initial.total_stock || 0,
+            lost: initial.total_lost || 0,
+            sold: initial.total_sold || 0,
+            address: initial.address,
+            nextRestock: initial.next_restock,
+          },
+  });
+  let errors: FormErrors<Entity> = {};
+
+  try {
+    (alreadyExist ? updateSchema : createSchema).validateSync(value, {
+      abortEarly: false,
+    });
+  } catch (err) {
+    if (err instanceof yup.ValidationError) {
+      const yupErrors = err.inner as yup.ValidationError[];
+      errors = yupErrors.reduce(
+        (prev, cur) =>
+          !cur.path ? prev : { ...prev, [cur.path]: cur.message },
+        {}
+      );
+    }
+  }
+  const hasErrors = Object.keys(errors).some(
+    (k) => (errors as any)[k] !== undefined
+  );
+
+  const submit = useCallback((): Entity | undefined => {
+    const stock: Stock = (value as any).stock;
+
+    if (!stock) {
+      value.total_stock = -1;
+    } else {
+      value.total_stock = stock.current;
+      value.total_lost = stock.lost;
+      value.next_restock =
+        stock.nextRestock instanceof Date
+          ? { t_s: stock.nextRestock.getTime() / 1000 }
+          : stock.nextRestock;
+      value.address = stock.address;
+    }
+    delete (value as any).stock;
+
+    if (typeof value.minimum_age !== "undefined" && value.minimum_age < 1) {
+      delete value.minimum_age;
+    }
+
+    return value as MerchantBackend.Products.ProductDetail & {
+      product_id: string;
+    };
+  }, [value]);
+
+  useEffect(() => {
+    onSubscribe(hasErrors ? undefined : submit);
+  }, [submit, hasErrors]);
+
+  const backend = useBackendContext();
+  const i18n = useTranslator();
+
+  return (
+    <div>
+      <FormProvider<Entity>
+        name="product"
+        errors={errors}
+        object={value}
+        valueHandler={valueHandler}
+      >
+        {alreadyExist ? undefined : (
+          <InputWithAddon<Entity>
+            name="product_id"
+            addonBefore={`${backend.url}/product/`}
+            label={i18n`ID`}
+            tooltip={i18n`product identification to use in URLs (for internal use only)`}
+          />
+        )}
+        <InputImage<Entity>
+          name="image"
+          label={i18n`Image`}
+          tooltip={i18n`illustration of the product for customers`}
+        />
+        <Input<Entity>
+          name="description"
+          inputType="multiline"
+          label={i18n`Description`}
+          tooltip={i18n`product description for customers`}
+        />
+        <InputNumber<Entity>
+          name="minimum_age"
+          label={i18n`Age restricted`}
+          tooltip={i18n`is this product restricted for customer below certain age?`}
+        />
+        <Input<Entity>
+          name="unit"
+          label={i18n`Unit`}
+          tooltip={i18n`unit describing quantity of product sold (e.g. 2 kilograms, 5 liters, 3 items, 5 meters) for customers`}
+        />
+        <InputCurrency<Entity>
+          name="price"
+          label={i18n`Price`}
+          tooltip={i18n`sale price for customers, including taxes, for above units of the product`}
+        />
+        <InputStock
+          name="stock"
+          label={i18n`Stock`}
+          alreadyExist={alreadyExist}
+          tooltip={i18n`product inventory for products with finite supply (for internal use only)`}
+        />
+        <InputTaxes<Entity>
+          name="taxes"
+          label={i18n`Taxes`}
+          tooltip={i18n`taxes included in the product price, exposed to customers`}
+        />
+      </FormProvider>
+    </div>
+  );
+}
diff --git a/packages/merchant-backoffice-ui/src/components/product/ProductList.tsx b/packages/merchant-backoffice-ui/src/components/product/ProductList.tsx
new file mode 100644
index 000000000..ff141bb39
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/components/product/ProductList.tsx
@@ -0,0 +1,105 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+import { Amounts } from "@gnu-taler/taler-util";
+import { h, VNode } from "preact";
+import emptyImage from "../../assets/empty.png";
+import { MerchantBackend } from "../../declaration";
+import { Translate } from "../../i18n";
+
+interface Props {
+  list: MerchantBackend.Product[];
+  actions?: {
+    name: string;
+    tooltip: string;
+    handler: (d: MerchantBackend.Product, index: number) => void;
+  }[];
+}
+export function ProductList({ list, actions = [] }: Props): VNode {
+  return (
+    <div class="table-container">
+      <table class="table is-fullwidth is-striped is-hoverable is-fullwidth">
+        <thead>
+          <tr>
+            <th>
+              <Translate>image</Translate>
+            </th>
+            <th>
+              <Translate>description</Translate>
+            </th>
+            <th>
+              <Translate>quantity</Translate>
+            </th>
+            <th>
+              <Translate>unit price</Translate>
+            </th>
+            <th>
+              <Translate>total price</Translate>
+            </th>
+            <th />
+          </tr>
+        </thead>
+        <tbody>
+          {list.map((entry, index) => {
+            const unitPrice = !entry.price ? "0" : entry.price;
+            const totalPrice = !entry.price
+              ? "0"
+              : Amounts.stringify(
+                  Amounts.mult(
+                    Amounts.parseOrThrow(entry.price),
+                    entry.quantity
+                  ).amount
+                );
+
+            return (
+              <tr key={index}>
+                <td>
+                  <img
+                    style={{ height: 32, width: 32 }}
+                    src={entry.image ? entry.image : emptyImage}
+                  />
+                </td>
+                <td>{entry.description}</td>
+                <td>
+                  {entry.quantity === 0
+                    ? "--"
+                    : `${entry.quantity} ${entry.unit}`}
+                </td>
+                <td>{unitPrice}</td>
+                <td>{totalPrice}</td>
+                <td class="is-actions-cell right-sticky">
+                  {actions.map((a, i) => {
+                    return (
+                      <div key={i} class="buttons is-right">
+                        <button
+                          class="button is-small is-danger has-tooltip-left"
+                          data-tooltip={a.tooltip}
+                          type="button"
+                          onClick={() => a.handler(entry, index)}
+                        >
+                          {a.name}
+                        </button>
+                      </div>
+                    );
+                  })}
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}
diff --git a/packages/merchant-backoffice-ui/src/context/backend.ts b/packages/merchant-backoffice-ui/src/context/backend.ts
new file mode 100644
index 000000000..9ef7bfdea
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/context/backend.ts
@@ -0,0 +1,82 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { createContext, h, VNode } from 'preact'
+import { useCallback, useContext, useState } from 'preact/hooks'
+import { useBackendDefaultToken, useBackendURL } from '../hooks';
+
+interface BackendContextType {
+  url: string;
+  token?: string;
+  triedToLog: boolean;
+  resetBackend: () => void;
+  clearAllTokens: () => void;
+  addTokenCleaner: (c: () => void) => void;
+  updateLoginStatus: (url: string, token?: string) => void;
+}
+
+const BackendContext = createContext<BackendContextType>({
+  url: '',
+  token: undefined,
+  triedToLog: false,
+  resetBackend: () => null,
+  clearAllTokens: () => null,
+  addTokenCleaner: () => null,
+  updateLoginStatus: () => null,
+})
+
+function useBackendContextState(defaultUrl?: string, initialToken?: string): BackendContextType {
+  const [url, triedToLog, changeBackend, resetBackend] = useBackendURL(defaultUrl);
+  const [token, _updateToken] = useBackendDefaultToken(initialToken);
+  const updateToken = (t?: string) => {
+    _updateToken(t)
+  }
+
+  const tokenCleaner = useCallback(() => { updateToken(undefined) }, [])
+  const [cleaners, setCleaners] = useState([tokenCleaner])
+  const addTokenCleaner = (c: () => void) => setCleaners(cs => [...cs, c])
+  const addTokenCleanerMemo = useCallback((c: () => void) => { addTokenCleaner(c) }, [tokenCleaner])
+
+  const clearAllTokens = () => {
+    cleaners.forEach(c => c())
+    for (let i = 0; i < localStorage.length; i++) {
+      const k = localStorage.key(i)
+      if (k && /^backend-token/.test(k)) localStorage.removeItem(k)
+    }
+    resetBackend()
+  }
+
+  const updateLoginStatus = (url: string, token?: string) => {
+    changeBackend(url);
+    if (token) updateToken(token);
+  };
+
+
+  return { url, token, triedToLog, updateLoginStatus, resetBackend, clearAllTokens, addTokenCleaner: addTokenCleanerMemo }
+}
+
+export const BackendContextProvider = ({ children, defaultUrl, initialToken }: { children: any, defaultUrl?: string, initialToken?: string }): VNode => {
+  const value = useBackendContextState(defaultUrl, initialToken)
+
+  return h(BackendContext.Provider, { value, children });
+}
+
+export const useBackendContext = (): BackendContextType => useContext(BackendContext);
diff --git a/packages/merchant-backoffice-ui/src/context/config.ts b/packages/merchant-backoffice-ui/src/context/config.ts
new file mode 100644
index 000000000..5cd772380
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/context/config.ts
@@ -0,0 +1,32 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { createContext } from 'preact'
+import { useContext } from 'preact/hooks'
+
+interface Type {
+  currency: string;
+  version: string;
+}
+const Context = createContext<Type>(null!)
+
+export const ConfigContextProvider = Context.Provider
+export const useConfigContext = (): Type => useContext(Context);
diff --git a/packages/merchant-backoffice-ui/src/context/fetch.ts b/packages/merchant-backoffice-ui/src/context/fetch.ts
new file mode 100644
index 000000000..ef4dfb7ae
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/context/fetch.ts
@@ -0,0 +1,54 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { h, createContext, VNode, ComponentChildren } from "preact";
+import { useContext } from "preact/hooks";
+import useSWR from "swr";
+import useSWRInfinite from "swr/infinite";
+
+interface Type {
+  useSWR: typeof useSWR;
+  useSWRInfinite: typeof useSWRInfinite;
+}
+
+const Context = createContext<Type>({} as any);
+
+export const useFetchContext = (): Type => useContext(Context);
+export const FetchContextProvider = ({
+  children,
+}: {
+  children: ComponentChildren;
+}): VNode => {
+  return h(Context.Provider, { value: { useSWR, useSWRInfinite }, children });
+};
+
+export const FetchContextProviderTesting = ({
+  children,
+  data,
+}: {
+  children: ComponentChildren;
+  data: any;
+}): VNode => {
+  return h(Context.Provider, {
+    value: { useSWR: () => data, useSWRInfinite },
+    children,
+  });
+};
diff --git a/packages/merchant-backoffice-ui/src/context/instance.ts b/packages/merchant-backoffice-ui/src/context/instance.ts
new file mode 100644
index 000000000..fecf36426
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/context/instance.ts
@@ -0,0 +1,35 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { createContext } from 'preact'
+import { useContext } from 'preact/hooks'
+
+interface Type {
+  id: string;
+  token?: string;
+  admin?: boolean;
+  changeToken: (t?:string) => void;
+}
+
+const Context = createContext<Type>({} as any)
+
+export const InstanceContextProvider = Context.Provider
+export const useInstanceContext = (): Type => useContext(Context);
diff --git a/packages/merchant-backoffice-ui/src/context/listener.ts b/packages/merchant-backoffice-ui/src/context/listener.ts
new file mode 100644
index 000000000..659db0a03
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/context/listener.ts
@@ -0,0 +1,35 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { createContext } from 'preact'
+import { useContext } from 'preact/hooks'
+
+interface Type {
+  id: string;
+  token?: string;
+  admin?: boolean;
+  changeToken: (t?:string) => void;
+}
+
+const Context = createContext<Type>({} as any)
+
+export const ListenerContextProvider = Context.Provider
+export const useListenerContext = (): Type => useContext(Context);
diff --git a/packages/merchant-backoffice-ui/src/context/translation.ts b/packages/merchant-backoffice-ui/src/context/translation.ts
new file mode 100644
index 000000000..952a1e325
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/context/translation.ts
@@ -0,0 +1,59 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { createContext, h, VNode } from 'preact'
+import { useContext, useEffect } from 'preact/hooks'
+import { useLang } from '../hooks'
+import * as jedLib from "jed";
+import { strings } from "../i18n/strings";
+
+interface Type {
+  lang: string;
+  handler: any;
+  changeLanguage: (l: string) => void;
+}
+const initial = {
+  lang: 'en',
+  handler: null,
+  changeLanguage: () => {
+    // do not change anything
+  }
+}
+const Context = createContext<Type>(initial)
+
+interface Props {
+  initial?: string,
+  children: any,
+  forceLang?: string
+}
+
+export const TranslationProvider = ({ initial, children, forceLang }: Props): VNode => {
+  const [lang, changeLanguage] = useLang(initial)
+  useEffect(() => {
+    if (forceLang) {
+      changeLanguage(forceLang)
+    }
+  })
+  const handler = new jedLib.Jed(strings[lang]);
+  return h(Context.Provider, { value: { lang, handler, changeLanguage }, children });
+}
+
+export const useTranslationContext = (): Type => useContext(Context);
\ No newline at end of file
diff --git a/packages/merchant-backoffice-ui/src/custom.d.ts b/packages/merchant-backoffice-ui/src/custom.d.ts
new file mode 100644
index 000000000..d2705003b
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/custom.d.ts
@@ -0,0 +1,40 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+declare module '*.po' {
+  const content: any;
+  export default content;
+}
+declare module 'jed' {
+  const x: any;
+  export = x;
+}
+declare module "*.jpeg" {
+  const content: any;
+  export default content;
+}
+declare module "*.png" {
+  const content: any;
+  export default content;
+}
+declare module '*.svg' {
+  const content: any;
+  export default content;
+}
+
+declare module '*.scss' {
+  const content: Record<string, string>;
+  export default content;
+}
diff --git a/packages/merchant-backoffice-ui/src/declaration.d.ts b/packages/merchant-backoffice-ui/src/declaration.d.ts
new file mode 100644
index 000000000..f0d257d3c
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/declaration.d.ts
@@ -0,0 +1,1443 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+
+type HashCode = string;
+type EddsaPublicKey = string;
+type EddsaSignature = string;
+type WireTransferIdentifierRawP = string;
+type RelativeTime = Duration;
+type ImageDataUrl = string;
+
+export interface WithId {
+    id: string
+}
+
+interface Timestamp {
+    // Milliseconds since epoch, or the special
+    // value "forever" to represent an event that will
+    // never happen.
+    t_s: number | "never";
+}
+interface Duration {
+    d_us: number | "forever";
+}
+
+interface WithId {
+    id: string;
+}
+
+type Amount = string;
+type UUID = string;
+type Integer = number;
+
+export namespace ExchangeBackend {
+    interface WireResponse {
+
+        // Master public key of the exchange, must match the key returned in /keys.
+        master_public_key: EddsaPublicKey;
+
+        // Array of wire accounts operated by the exchange for
+        // incoming wire transfers.
+        accounts: WireAccount[];
+
+        // Object mapping names of wire methods (i.e. "sepa" or "x-taler-bank")
+        // to wire fees.
+        fees: { method: AggregateTransferFee };
+    }
+    interface WireAccount {
+        // payto:// URI identifying the account and wire method
+        payto_uri: string;
+
+        // Signature using the exchange's offline key
+        // with purpose TALER_SIGNATURE_MASTER_WIRE_DETAILS.
+        master_sig: EddsaSignature;
+    }
+    interface AggregateTransferFee {
+        // Per transfer wire transfer fee.
+        wire_fee: Amount;
+
+        // Per transfer closing fee.
+        closing_fee: Amount;
+
+        // What date (inclusive) does this fee go into effect?
+        // The different fees must cover the full time period in which
+        // any of the denomination keys are valid without overlap.
+        start_date: Timestamp;
+
+        // What date (exclusive) does this fee stop going into effect?
+        // The different fees must cover the full time period in which
+        // any of the denomination keys are valid without overlap.
+        end_date: Timestamp;
+
+        // Signature of TALER_MasterWireFeePS with
+        // purpose TALER_SIGNATURE_MASTER_WIRE_FEES.
+        sig: EddsaSignature;
+    }
+
+}
+export namespace MerchantBackend {
+    interface ErrorDetail {
+
+        // Numeric error code unique to the condition.
+        // The other arguments are specific to the error value reported here.
+        code: number;
+
+        // Human-readable description of the error, i.e. "missing parameter", "commitment violation", ...
+        // Should give a human-readable hint about the error's nature. Optional, may change without notice!
+        hint?: string;
+
+        // Optional detail about the specific input value that failed. May change without notice!
+        detail?: string;
+
+        // Name of the parameter that was bogus (if applicable).
+        parameter?: string;
+
+        // Path to the argument that was bogus (if applicable).
+        path?: string;
+
+        // Offset of the argument that was bogus (if applicable).
+        offset?: string;
+
+        // Index of the argument that was bogus (if applicable).
+        index?: string;
+
+        // Name of the object that was bogus (if applicable).
+        object?: string;
+
+        // Name of the currency than was problematic (if applicable).
+        currency?: string;
+
+        // Expected type (if applicable).
+        type_expected?: string;
+
+        // Type that was provided instead (if applicable).
+        type_actual?: string;
+    }
+
+
+    // Delivery location, loosely modeled as a subset of
+    // ISO20022's PostalAddress25.
+    interface Tax {
+        // the name of the tax
+        name: string;
+
+        // amount paid in tax
+        tax: Amount;
+    }
+
+    interface Auditor {
+        // official name
+        name: string;
+
+        // Auditor's public key
+        auditor_pub: EddsaPublicKey;
+
+        // Base URL of the auditor
+        url: string;
+    }
+    interface Exchange {
+        // the exchange's base URL
+        url: string;
+
+        // master public key of the exchange
+        master_pub: EddsaPublicKey;
+    }
+
+    interface Product {
+        // merchant-internal identifier for the product.
+        product_id?: string;
+
+        // Human-readable product description.
+        description: string;
+
+        // Map from IETF BCP 47 language tags to localized descriptions
+        description_i18n?: { [lang_tag: string]: string };
+
+        // The number of units of the product to deliver to the customer.
+        quantity: Integer;
+
+        // The unit in which the product is measured (liters, kilograms, packages, etc.)
+        unit: string;
+
+        // The price of the product; this is the total price for quantity times unit of this product.
+        price?: Amount;
+
+        // An optional base64-encoded product image
+        image: ImageDataUrl;
+
+        // a list of taxes paid by the merchant for this product. Can be empty.
+        taxes: Tax[];
+
+        // time indicating when this product should be delivered
+        delivery_date?: TalerProtocolTimestamp;
+
+        // Minimum age buyer must have (in years). Default is 0.
+        minimum_age?: Integer;
+    }
+    interface Merchant {
+        // label for a location with the business address of the merchant
+        address: Location;
+
+        // the merchant's legal name of business
+        name: string;
+
+        // label for a location that denotes the jurisdiction for disputes.
+        // Some of the typical fields for a location (such as a street address) may be absent.
+        jurisdiction: Location;
+    }
+
+    interface VersionResponse {
+        // libtool-style representation of the Merchant protocol version, see
+        // https://www.gnu.org/software/libtool/manual/html_node/Versioning.html#Versioning
+        // The format is "current:revision:age".
+        version: string;
+
+        // Name of the protocol.
+        name: "taler-merchant";
+
+        // Currency supported by this backend.
+        currency: string;
+
+    }
+    interface Location {
+        // Nation with its own government.
+        country?: string;
+
+        // Identifies a subdivision of a country such as state, region, county.
+        country_subdivision?: string;
+
+        // Identifies a subdivision within a country sub-division.
+        district?: string;
+
+        // Name of a built-up area, with defined boundaries, and a local government.
+        town?: string;
+
+        // Specific location name within the town.
+        town_location?: string;
+
+        // Identifier consisting of a group of letters and/or numbers that
+        // is added to a postal address to assist the sorting of mail.
+        post_code?: string;
+
+        // Name of a street or thoroughfare.
+        street?: string;
+
+        // Name of the building or house.
+        building_name?: string;
+
+        // Number that identifies the position of a building on a street.
+        building_number?: string;
+
+        // Free-form address lines, should not exceed 7 elements.
+        address_lines?: string[];
+    }
+    namespace Instances {
+
+        //POST /private/instances/$INSTANCE/auth
+        interface InstanceAuthConfigurationMessage {
+            // Type of authentication.
+            // "external":  The mechant backend does not do
+            //   any authentication checks.  Instead an API
+            //   gateway must do the authentication.
+            // "token": The merchant checks an auth token.
+            //   See "token" for details.
+            method: "external" | "token";
+
+            // For method "external", this field is mandatory.
+            // The token MUST begin with the string "secret-token:".
+            // After the auth token has been set (with method "token"),
+            // the value must be provided in a "Authorization: Bearer $token"
+            // header.
+            token?: string;
+
+        }
+        //POST /private/instances
+        interface InstanceConfigurationMessage {
+            // The URI where the wallet will send coins.  A merchant may have
+            // multiple accounts, thus this is an array.  Note that by
+            // removing URIs from this list the respective account is set to
+            // inactive and thus unavailable for new contracts, but preserved
+            // in the database as existing offers and contracts may still refer
+            // to it.
+            payto_uris: string[];
+
+            // Name of the merchant instance to create (will become $INSTANCE).
+            id: string;
+
+            // Merchant name corresponding to this instance.
+            name: string;
+
+            email: string;
+            website: string;
+            // An optional base64-encoded logo image
+            logo: ImageDataUrl;
+
+
+            // "Authentication" header required to authorize management access the instance.
+            // Optional, if not given authentication will be disabled for
+            // this instance (hopefully authentication checks are still
+            // done by some reverse proxy).
+            auth: InstanceAuthConfigurationMessage;
+
+            // The merchant's physical address (to be put into contracts).
+            address: Location;
+
+            // The jurisdiction under which the merchant conducts its business
+            // (to be put into contracts).
+            jurisdiction: Location;
+
+            // Maximum wire fee this instance is willing to pay.
+            // Can be overridden by the frontend on a per-order basis.
+            default_max_wire_fee: Amount;
+
+            // Default factor for wire fee amortization calculations.
+            // Can be overridden by the frontend on a per-order basis.
+            default_wire_fee_amortization: Integer;
+
+            // Maximum deposit fee (sum over all coins) this instance is willing to pay.
+            // Can be overridden by the frontend on a per-order basis.
+            default_max_deposit_fee: Amount;
+
+            //  If the frontend does NOT specify an execution date, how long should
+            // we tell the exchange to wait to aggregate transactions before
+            // executing the wire transfer?  This delay is added to the current
+            // time when we generate the advisory execution time for the exchange.
+            default_wire_transfer_delay: RelativeTime;
+
+            // If the frontend does NOT specify a payment deadline, how long should
+            // offers we make be valid by default?
+            default_pay_delay: RelativeTime;
+
+        }
+
+        // PATCH /private/instances/$INSTANCE
+        interface InstanceReconfigurationMessage {
+            // The URI where the wallet will send coins.  A merchant may have
+            // multiple accounts, thus this is an array.  Note that by
+            // removing URIs from this list
+            payto_uris: string[];
+
+            // Merchant name corresponding to this instance.
+            name: string;
+
+            // The merchant's physical address (to be put into contracts).
+            address: Location;
+
+            // The jurisdiction under which the merchant conducts its business
+            // (to be put into contracts).
+            jurisdiction: Location;
+
+            // Maximum wire fee this instance is willing to pay.
+            // Can be overridden by the frontend on a per-order basis.
+            default_max_wire_fee: Amount;
+
+            // Default factor for wire fee amortization calculations.
+            // Can be overridden by the frontend on a per-order basis.
+            default_wire_fee_amortization: Integer;
+
+            // Maximum deposit fee (sum over all coins) this instance is willing to pay.
+            // Can be overridden by the frontend on a per-order basis.
+            default_max_deposit_fee: Amount;
+
+            //  If the frontend does NOT specify an execution date, how long should
+            // we tell the exchange to wait to aggregate transactions before
+            // executing the wire transfer?  This delay is added to the current
+            // time when we generate the advisory execution time for the exchange.
+            default_wire_transfer_delay: RelativeTime;
+
+            // If the frontend does NOT specify a payment deadline, how long should
+            // offers we make be valid by default?
+            default_pay_delay: RelativeTime;
+
+        }
+
+        //   GET /private/instances
+        interface InstancesResponse {
+            // List of instances that are present in the backend (see Instance)
+            instances: Instance[];
+        }
+
+        interface Instance {
+            // Merchant name corresponding to this instance.
+            name: string;
+
+            deleted?: boolean;
+
+            // Merchant instance this response is about ($INSTANCE)
+            id: string;
+
+            // Public key of the merchant/instance, in Crockford Base32 encoding.
+            merchant_pub: EddsaPublicKey;
+
+            // List of the payment targets supported by this instance. Clients can
+            // specify the desired payment target in /order requests.  Note that
+            // front-ends do not have to support wallets selecting payment targets.
+            payment_targets: string[];
+
+        }
+
+        //GET /private/instances/$INSTANCE/kyc
+        interface AccountKycRedirects {
+            // Array of pending KYCs.
+            pending_kycs: MerchantAccountKycRedirect[];
+
+            // Array of exchanges with no reply.
+            timeout_kycs: ExchangeKycTimeout[];
+
+        }
+        interface MerchantAccountKycRedirect {
+
+            // URL that the user should open in a browser to
+            // proceed with the KYC process (as returned
+            // by the exchange's /kyc-check/ endpoint).
+            kyc_url: string;
+
+            // Base URL of the exchange this is about.
+            exchange_url: string;
+
+            // Our bank wire account this is about.
+            payto_uri: string;
+
+        }
+        interface ExchangeKycTimeout {
+
+            // Base URL of the exchange this is about.
+            exchange_url: string;
+
+            // Numeric error code indicating errors the exchange
+            // returned, or TALER_EC_INVALID for none.
+            exchange_code: number;
+
+            // HTTP status code returned by the exchange when we asked for
+            // information about the KYC status.
+            // 0 if there was no response at all.
+            exchange_http_status: number;
+
+        }
+
+        //GET /private/instances/$INSTANCE
+        interface QueryInstancesResponse {
+            // The URI where the wallet will send coins.  A merchant may have
+            // multiple accounts, thus this is an array.
+            accounts: MerchantAccount[];
+
+            // Merchant name corresponding to this instance.
+            name: string;
+
+            // Public key of the merchant/instance, in Crockford Base32 encoding.
+            merchant_pub: EddsaPublicKey;
+
+            // The merchant's physical address (to be put into contracts).
+            address: Location;
+
+            // The jurisdiction under which the merchant conducts its business
+            // (to be put into contracts).
+            jurisdiction: Location;
+
+            // Maximum wire fee this instance is willing to pay.
+            // Can be overridden by the frontend on a per-order basis.
+            default_max_wire_fee: Amount;
+
+            // Default factor for wire fee amortization calculations.
+            // Can be overridden by the frontend on a per-order basis.
+            default_wire_fee_amortization: Integer;
+
+            // Maximum deposit fee (sum over all coins) this instance is willing to pay.
+            // Can be overridden by the frontend on a per-order basis.
+            default_max_deposit_fee: Amount;
+
+            //  If the frontend does NOT specify an execution date, how long should
+            // we tell the exchange to wait to aggregate transactions before
+            // executing the wire transfer?  This delay is added to the current
+            // time when we generate the advisory execution time for the exchange.
+            default_wire_transfer_delay: RelativeTime;
+
+            // If the frontend does NOT specify a payment deadline, how long should
+            // offers we make be valid by default?
+            default_pay_delay: RelativeTime;
+
+            // Authentication configuration.
+            // Does not contain the token when token auth is configured.
+            auth: {
+                method: "external" | "token";
+                token?: string;
+            };
+        }
+
+        interface MerchantAccount {
+
+            // payto:// URI of the account.
+            payto_uri: string;
+
+            // Hash over the wire details (including over the salt)
+            h_wire: HashCode;
+
+            // salt used to compute h_wire
+            salt: HashCode;
+
+            // true if this account is active,
+            // false if it is historic.
+            active: boolean;
+        }
+
+        //   DELETE /private/instances/$INSTANCE
+
+
+    }
+
+    namespace Products {
+        // POST /private/products
+        interface ProductAddDetail {
+
+            // product ID to use.
+            product_id: string;
+
+            // Human-readable product description.
+            description: string;
+
+            // Map from IETF BCP 47 language tags to localized descriptions
+            description_i18n: { [lang_tag: string]: string };
+
+            // unit in which the product is measured (liters, kilograms, packages, etc.)
+            unit: string;
+
+            // The price for one unit of the product. Zero is used
+            // to imply that this product is not sold separately, or
+            // that the price is not fixed, and must be supplied by the
+            // front-end.  If non-zero, this price MUST include applicable
+            // taxes.
+            price: Amount;
+
+            // An optional base64-encoded product image
+            image: ImageDataUrl;
+
+            // a list of taxes paid by the merchant for one unit of this product
+            taxes: Tax[];
+
+            // Number of units of the product in stock in sum in total,
+            // including all existing sales ever. Given in product-specific
+            // units.
+            // A value of -1 indicates "infinite" (i.e. for "electronic" books).
+            total_stock: Integer;
+
+            // Identifies where the product is in stock.
+            address: Location;
+
+            // Identifies when we expect the next restocking to happen.
+            next_restock?: Timestamp;
+
+            // Minimum age buyer must have (in years). Default is 0.
+            minimum_age?: Integer;
+        }
+        //   PATCH /private/products/$PRODUCT_ID
+        interface ProductPatchDetail {
+
+            // Human-readable product description.
+            description: string;
+
+            // Map from IETF BCP 47 language tags to localized descriptions
+            description_i18n: { [lang_tag: string]: string };
+
+            // unit in which the product is measured (liters, kilograms, packages, etc.)
+            unit: string;
+
+            // The price for one unit of the product. Zero is used
+            // to imply that this product is not sold separately, or
+            // that the price is not fixed, and must be supplied by the
+            // front-end.  If non-zero, this price MUST include applicable
+            // taxes.
+            price: Amount;
+
+            // An optional base64-encoded product image
+            image: ImageDataUrl;
+
+            // a list of taxes paid by the merchant for one unit of this product
+            taxes: Tax[];
+
+            // Number of units of the product in stock in sum in total,
+            // including all existing sales ever. Given in product-specific
+            // units.
+            // A value of -1 indicates "infinite" (i.e. for "electronic" books).
+            total_stock: Integer;
+
+            // Number of units of the product that were lost (spoiled, stolen, etc.)
+            total_lost: Integer;
+
+            // Identifies where the product is in stock.
+            address: Location;
+
+            // Identifies when we expect the next restocking to happen.
+            next_restock?: Timestamp;
+
+            // Minimum age buyer must have (in years). Default is 0.
+            minimum_age?: Integer;
+        }
+
+        // GET /private/products
+        interface InventorySummaryResponse {
+            // List of products that are present in the inventory
+            products: InventoryEntry[];
+        }
+        interface InventoryEntry {
+            // Product identifier, as found in the product.
+            product_id: string;
+
+        }
+
+        // GET /private/products/$PRODUCT_ID
+        interface ProductDetail {
+
+            // Human-readable product description.
+            description: string;
+
+            // Map from IETF BCP 47 language tags to localized descriptions
+            description_i18n: { [lang_tag: string]: string };
+
+            // unit in which the product is measured (liters, kilograms, packages, etc.)
+            unit: string;
+
+            // The price for one unit of the product. Zero is used
+            // to imply that this product is not sold separately, or
+            // that the price is not fixed, and must be supplied by the
+            // front-end.  If non-zero, this price MUST include applicable
+            // taxes.
+            price: Amount;
+
+            // An optional base64-encoded product image
+            image: ImageDataUrl;
+
+            // a list of taxes paid by the merchant for one unit of this product
+            taxes: Tax[];
+
+            // Number of units of the product in stock in sum in total,
+            // including all existing sales ever. Given in product-specific
+            // units.
+            // A value of -1 indicates "infinite" (i.e. for "electronic" books).
+            total_stock: Integer;
+
+            // Number of units of the product that have already been sold.
+            total_sold: Integer;
+
+            // Number of units of the product that were lost (spoiled, stolen, etc.)
+            total_lost: Integer;
+
+            // Identifies where the product is in stock.
+            address: Location;
+
+            // Identifies when we expect the next restocking to happen.
+            next_restock?: Timestamp;
+
+            // Minimum age buyer must have (in years). Default is 0.
+            minimum_age?: Integer;
+        }
+
+        // POST /private/products/$PRODUCT_ID/lock
+        interface LockRequest {
+
+            // UUID that identifies the frontend performing the lock
+            // It is suggested that clients use a timeflake for this,
+            // see https://github.com/anthonynsimon/timeflake
+            lock_uuid: UUID;
+
+            // How long does the frontend intend to hold the lock
+            duration: RelativeTime;
+
+            // How many units should be locked?
+            quantity: Integer;
+
+        }
+
+        //   DELETE /private/products/$PRODUCT_ID
+
+    }
+
+    namespace Orders {
+
+        type MerchantOrderStatusResponse = CheckPaymentPaidResponse |
+            CheckPaymentClaimedResponse |
+            CheckPaymentUnpaidResponse;
+        interface CheckPaymentPaidResponse {
+            // The customer paid for this contract.
+            order_status: "paid";
+
+            // Was the payment refunded (even partially)?
+            refunded: boolean;
+
+            // True if there are any approved refunds that the wallet has
+            // not yet obtained.
+            refund_pending: boolean;
+
+            // Did the exchange wire us the funds?
+            wired: boolean;
+
+            // Total amount the exchange deposited into our bank account
+            // for this contract, excluding fees.
+            deposit_total: Amount;
+
+            // Numeric error code indicating errors the exchange
+            // encountered tracking the wire transfer for this purchase (before
+            // we even got to specific coin issues).
+            // 0 if there were no issues.
+            exchange_ec: number;
+
+            // HTTP status code returned by the exchange when we asked for
+            // information to track the wire transfer for this purchase.
+            // 0 if there were no issues.
+            exchange_hc: number;
+
+            // Total amount that was refunded, 0 if refunded is false.
+            refund_amount: Amount;
+
+            // Contract terms.
+            contract_terms: ContractTerms;
+
+            // The wire transfer status from the exchange for this order if
+            // available, otherwise empty array.
+            wire_details: TransactionWireTransfer[];
+
+            // Reports about trouble obtaining wire transfer details,
+            // empty array if no trouble were encountered.
+            wire_reports: TransactionWireReport[];
+
+            // The refund details for this order.  One entry per
+            // refunded coin; empty array if there are no refunds.
+            refund_details: RefundDetails[];
+
+            // Status URL, can be used as a redirect target for the browser
+            // to show the order QR code / trigger the wallet.
+            order_status_url: string;
+        }
+        interface CheckPaymentClaimedResponse {
+            // A wallet claimed the order, but did not yet pay for the contract.
+            order_status: "claimed";
+
+            // Contract terms.
+            contract_terms: ContractTerms;
+
+        }
+        interface CheckPaymentUnpaidResponse {
+            // The order was neither claimed nor paid.
+            order_status: "unpaid";
+
+            // when was the order created
+            creation_time: Timestamp;
+
+            // Order summary text.
+            summary: string;
+
+            // Total amount of the order (to be paid by the customer).
+            total_amount: Amount;
+
+            // URI that the wallet must process to complete the payment.
+            taler_pay_uri: string;
+
+            // Alternative order ID which was paid for already in the same session.
+            // Only given if the same product was purchased before in the same session.
+            already_paid_order_id?: string;
+
+            // Fulfillment URL of an already paid order. Only given if under this
+            // session an already paid order with a fulfillment URL exists.
+            already_paid_fulfillment_url?: string;
+
+            // Status URL, can be used as a redirect target for the browser
+            // to show the order QR code / trigger the wallet.
+            order_status_url: string;
+
+            // We do we NOT return the contract terms here because they may not
+            // exist in case the wallet did not yet claim them.
+        }
+        interface RefundDetails {
+            // Reason given for the refund.
+            reason: string;
+
+            // When was the refund approved.
+            timestamp: Timestamp;
+
+            // Set to true if a refund is still available for the wallet for this payment.
+            pending: boolean;
+
+            // Total amount that was refunded (minus a refund fee).
+            amount: Amount;
+        }
+        interface TransactionWireTransfer {
+            // Responsible exchange.
+            exchange_url: string;
+
+            // 32-byte wire transfer identifier.
+            wtid: Base32;
+
+            // Execution time of the wire transfer.
+            execution_time: Timestamp;
+
+            // Total amount that has been wire transferred
+            // to the merchant.
+            amount: Amount;
+
+            // Was this transfer confirmed by the merchant via the
+            // POST /transfers API, or is it merely claimed by the exchange?
+            confirmed: boolean;
+        }
+        interface TransactionWireReport {
+            // Numerical error code.
+            code: number;
+
+            // Human-readable error description.
+            hint: string;
+
+            // Numerical error code from the exchange.
+            exchange_ec: number;
+
+            // HTTP status code received from the exchange.
+            exchange_hc: number;
+
+            // Public key of the coin for which we got the exchange error.
+            coin_pub: CoinPublicKey;
+        }
+
+        interface OrderHistory {
+            // timestamp-sorted array of all orders matching the query.
+            // The order of the sorting depends on the sign of delta.
+            orders: OrderHistoryEntry[];
+        }
+        interface OrderHistoryEntry {
+
+            // order ID of the transaction related to this entry.
+            order_id: string;
+
+            // row ID of the order in the database
+            row_id: number;
+
+            // when the order was created
+            timestamp: Timestamp;
+
+            // the amount of money the order is for
+            amount: Amount;
+
+            // the summary of the order
+            summary: string;
+
+            // whether some part of the order is refundable,
+            // that is the refund deadline has not yet expired
+            // and the total amount refunded so far is below
+            // the value of the original transaction.
+            refundable: boolean;
+
+            // whether the order has been paid or not
+            paid: boolean;
+        }
+
+        interface PostOrderRequest {
+            // The order must at least contain the minimal
+            // order detail, but can override all
+            order: Order;
+
+            // if set, the backend will then set the refund deadline to the current
+            // time plus the specified delay.  If it's not set, refunds will not be
+            // possible.
+            refund_delay?: RelativeTime;
+
+            // specifies the payment target preferred by the client. Can be used
+            // to select among the various (active) wire methods supported by the instance.
+            payment_target?: string;
+
+            // specifies that some products are to be included in the
+            // order from the inventory.  For these inventory management
+            // is performed (so the products must be in stock) and
+            // details are completed from the product data of the backend.
+            inventory_products?: MinimalInventoryProduct[];
+
+            // Specifies a lock identifier that was used to
+            // lock a product in the inventory.  Only useful if
+            // manage_inventory is set.  Used in case a frontend
+            // reserved quantities of the individual products while
+            // the shopping card was being built.  Multiple UUIDs can
+            // be used in case different UUIDs were used for different
+            // products (i.e. in case the user started with multiple
+            // shopping sessions that were combined during checkout).
+            lock_uuids?: UUID[];
+
+            // Should a token for claiming the order be generated?
+            // False can make sense if the ORDER_ID is sufficiently
+            // high entropy to prevent adversarial claims (like it is
+            // if the backend auto-generates one). Default is 'true'.
+            create_token?: boolean;
+
+        }
+        type Order = MinimalOrderDetail | ContractTerms;
+
+        interface MinimalOrderDetail {
+            // Amount to be paid by the customer
+            amount: Amount;
+
+            // Short summary of the order
+            summary: string;
+
+            // URL that will show that the order was successful after
+            // it has been paid for.  Optional. When POSTing to the
+            // merchant, the placeholder "${ORDER_ID}" will be
+            // replaced with the actual order ID (useful if the
+            // order ID is generated server-side and needs to be
+            // in the URL).
+            fulfillment_url?: string;
+        }
+
+        interface MinimalInventoryProduct {
+            // Which product is requested (here mandatory!)
+            product_id: string;
+
+            // How many units of the product are requested
+            quantity: Integer;
+        }
+        interface PostOrderResponse {
+            // Order ID of the response that was just created
+            order_id: string;
+
+            // Token that authorizes the wallet to claim the order.
+            // Provided only if "create_token" was set to 'true'
+            // in the request.
+            token?: ClaimToken;
+        }
+        interface OutOfStockResponse {
+
+            // Product ID of an out-of-stock item
+            product_id: string;
+
+            // Requested quantity
+            requested_quantity: Integer;
+
+            // Available quantity (must be below requested_quanitity)
+            available_quantity: Integer;
+
+            // When do we expect the product to be again in stock?
+            // Optional, not given if unknown.
+            restock_expected?: Timestamp;
+        }
+
+        interface ForgetRequest {
+
+            // Array of valid JSON paths to forgettable fields in the order's
+            // contract terms.
+            fields: string[];
+        }
+        interface RefundRequest {
+            // Amount to be refunded
+            refund: Amount;
+
+            // Human-readable refund justification
+            reason: string;
+        }
+        interface MerchantRefundResponse {
+
+            // URL (handled by the backend) that the wallet should access to
+            // trigger refund processing.
+            // taler://refund/...
+            taler_refund_uri: string;
+
+            // Contract hash that a client may need to authenticate an
+            // HTTP request to obtain the above URI in a wallet-friendly way.
+            h_contract: HashCode;
+        }
+
+    }
+
+    namespace Tips {
+
+        // GET /private/reserves
+        interface TippingReserveStatus {
+            // Array of all known reserves (possibly empty!)
+            reserves: ReserveStatusEntry[];
+        }
+        interface ReserveStatusEntry {
+            // Public key of the reserve
+            reserve_pub: EddsaPublicKey;
+
+            // Timestamp when it was established
+            creation_time: Timestamp;
+
+            // Timestamp when it expires
+            expiration_time: Timestamp;
+
+            // Initial amount as per reserve creation call
+            merchant_initial_amount: Amount;
+
+            // Initial amount as per exchange, 0 if exchange did
+            // not confirm reserve creation yet.
+            exchange_initial_amount: Amount;
+
+            // Amount picked up so far.
+            pickup_amount: Amount;
+
+            // Amount approved for tips that exceeds the pickup_amount.
+            committed_amount: Amount;
+
+            // Is this reserve active (false if it was deleted but not purged)
+            active: boolean;
+        }
+
+        interface ReserveCreateRequest {
+            // Amount that the merchant promises to put into the reserve
+            initial_balance: Amount;
+
+            // Exchange the merchant intends to use for tipping
+            exchange_url: string;
+
+            // Desired wire method, for example "iban" or "x-taler-bank"
+            wire_method: string;
+        }
+        interface ReserveCreateConfirmation {
+            // Public key identifying the reserve
+            reserve_pub: EddsaPublicKey;
+
+            // Wire account of the exchange where to transfer the funds
+            payto_uri: string;
+        }
+        interface TipCreateRequest {
+            // Amount that the customer should be tipped
+            amount: Amount;
+
+            // Justification for giving the tip
+            justification: string;
+
+            // URL that the user should be directed to after tipping,
+            // will be included in the tip_token.
+            next_url: string;
+        }
+        interface TipCreateConfirmation {
+            // Unique tip identifier for the tip that was created.
+            tip_id: HashCode;
+
+            // taler://tip URI for the tip
+            taler_tip_uri: string;
+
+            // URL that will directly trigger processing
+            // the tip when the browser is redirected to it
+            tip_status_url: string;
+
+            // when does the tip expire
+            tip_expiration: Timestamp;
+        }
+
+        interface ReserveDetail {
+            // Timestamp when it was established.
+            creation_time: Timestamp;
+
+            // Timestamp when it expires.
+            expiration_time: Timestamp;
+
+            // Initial amount as per reserve creation call.
+            merchant_initial_amount: Amount;
+
+            // Initial amount as per exchange, 0 if exchange did
+            // not confirm reserve creation yet.
+            exchange_initial_amount: Amount;
+
+            // Amount picked up so far.
+            pickup_amount: Amount;
+
+            // Amount approved for tips that exceeds the pickup_amount.
+            committed_amount: Amount;
+
+            // Array of all tips created by this reserves (possibly empty!).
+            // Only present if asked for explicitly.
+            tips?: TipStatusEntry[];
+
+            // Is this reserve active (false if it was deleted but not purged)?
+            active: boolean;
+
+            // URI to use to fill the reserve, can be NULL
+            // if the reserve is inactive or was already filled
+            payto_uri: string;
+
+            // URL of the exchange hosting the reserve,
+            // NULL if the reserve is inactive
+            exchange_url: string;
+
+        }
+
+        interface TipStatusEntry {
+
+            // Unique identifier for the tip.
+            tip_id: HashCode;
+
+            // Total amount of the tip that can be withdrawn.
+            total_amount: Amount;
+
+            // Human-readable reason for why the tip was granted.
+            reason: string;
+        }
+
+        interface TipDetails {
+            // Amount that we authorized for this tip.
+            total_authorized: Amount;
+
+            // Amount that was picked up by the user already.
+            total_picked_up: Amount;
+
+            // Human-readable reason given when authorizing the tip.
+            reason: string;
+
+            // Timestamp indicating when the tip is set to expire (may be in the past).
+            expiration: Timestamp;
+
+            // Reserve public key from which the tip is funded.
+            reserve_pub: EddsaPublicKey;
+
+            // Array showing the pickup operations of the wallet (possibly empty!).
+            // Only present if asked for explicitly.
+            pickups?: PickupDetail[];
+        }
+        interface PickupDetail {
+            // Unique identifier for the pickup operation.
+            pickup_id: HashCode;
+
+            // Number of planchets involved.
+            num_planchets: Integer;
+
+            // Total amount requested for this pickup_id.
+            requested_amount: Amount;
+        }
+
+    }
+
+    namespace Transfers {
+
+        interface TransferList {
+            // list of all the transfers that fit the filter that we know
+            transfers: TransferDetails[];
+        }
+        interface TransferDetails {
+            // how much was wired to the merchant (minus fees)
+            credit_amount: Amount;
+
+            // raw wire transfer identifier identifying the wire transfer (a base32-encoded value)
+            wtid: string;
+
+            // target account that received the wire transfer
+            payto_uri: string;
+
+            // base URL of the exchange that made the wire transfer
+            exchange_url: string;
+
+            // Serial number identifying the transfer in the merchant backend.
+            // Used for filgering via offset.
+            transfer_serial_id: number;
+
+            // Time of the execution of the wire transfer by the exchange, according to the exchange
+            // Only provided if we did get an answer from the exchange.
+            execution_time?: Timestamp;
+
+            // True if we checked the exchange's answer and are happy with it.
+            // False if we have an answer and are unhappy, missing if we
+            // do not have an answer from the exchange.
+            verified?: boolean;
+
+            // True if the merchant uses the POST /transfers API to confirm
+            // that this wire transfer took place (and it is thus not
+            // something merely claimed by the exchange).
+            confirmed?: boolean;
+        }
+
+        interface TransferInformation {
+            // how much was wired to the merchant (minus fees)
+            credit_amount: Amount;
+
+            // raw wire transfer identifier identifying the wire transfer (a base32-encoded value)
+            wtid: WireTransferIdentifierRawP;
+
+            // target account that received the wire transfer
+            payto_uri: string;
+
+            // base URL of the exchange that made the wire transfer
+            exchange_url: string;
+        }
+        interface MerchantTrackTransferResponse {
+            // Total amount transferred
+            total: Amount;
+
+            // Applicable wire fee that was charged
+            wire_fee: Amount;
+
+            // Time of the execution of the wire transfer by the exchange, according to the exchange
+            execution_time: Timestamp;
+
+            // details about the deposits
+            deposits_sums: MerchantTrackTransferDetail[];
+        }
+        interface MerchantTrackTransferDetail {
+            // Business activity associated with the wire transferred amount
+            // deposit_value.
+            order_id: string;
+
+            // The total amount the exchange paid back for order_id.
+            deposit_value: Amount;
+
+            // applicable fees for the deposit
+            deposit_fee: Amount;
+        }
+
+        type ExchangeConflictDetails = WireFeeConflictDetails | TrackTransferConflictDetails
+        // Note: this is not the full 'proof' of missbehavior, as
+        // the bogus message from the exchange with a signature
+        // over the 'different' wire fee is missing.
+        //
+        // This information is NOT provided by the current implementation,
+        // because this would be quite expensive to generate and is
+        // hardly needed _here_. Once we add automated reports for
+        // the Taler auditor, we need to generate this data anyway
+        // and should probably return it here as well.
+        interface WireFeeConflictDetails {
+            // Numerical error code:
+            code: "TALER_EC_MERCHANT_PRIVATE_POST_TRANSFERS_BAD_WIRE_FEE";
+
+            // Text describing the issue for humans.
+            hint: string;
+
+
+            // Wire fee (wrongly) charged by the exchange, breaking the
+            // contract affirmed by the exchange_sig.
+            wire_fee: Amount;
+
+            // Timestamp of the wire transfer
+            execution_time: Timestamp;
+
+            // The expected wire fee (as signed by the exchange)
+            expected_wire_fee: Amount;
+
+            // Expected closing fee (needed to verify signature)
+            expected_closing_fee: Amount;
+
+            // Start date of the expected fee structure
+            start_date: Timestamp;
+
+            // End date of the expected fee structure
+            end_date: Timestamp;
+
+            // Signature of the exchange affirming the expected fee structure
+            master_sig: EddsaSignature;
+
+            // Master public key of the exchange
+            master_pub: EddsaPublicKey;
+        }
+        interface TrackTransferConflictDetails {
+            // Numerical error code
+            code: "TALER_EC_MERCHANT_PRIVATE_POST_TRANSFERS_CONFLICTING_REPORTS";
+
+            // Text describing the issue for humans.
+            hint: string;
+
+            // Offset in the exchange_transfer where the
+            // exchange's response fails to match the exchange_deposit_proof.
+            conflict_offset: number;
+
+            // The response from the exchange which tells us when the
+            // coin was returned to us, except that it does not match
+            // the expected value of the coin.
+            //
+            // This field is NOT provided by the current implementation,
+            // because this would be quite expensive to generate and is
+            // hardly needed _here_. Once we add automated reports for
+            // the Taler auditor, we need to generate this data anyway
+            // and should probably return it here as well.
+            // exchange_transfer?: TrackTransferResponse;
+
+            // Public key of the exchange used to sign the response to
+            // our deposit request.
+            deposit_exchange_pub: EddsaPublicKey;
+
+            // Signature of the exchange signing the (conflicting) response.
+            // Signs over a struct TALER_DepositConfirmationPS.
+            deposit_exchange_sig: EddsaSignature;
+
+            // Hash of the merchant's bank account the wire transfer went to
+            h_wire: HashCode;
+
+            // Hash of the contract terms with the conflicting deposit.
+            h_contract_terms: HashCode;
+
+            // At what time the exchange received the deposit.  Needed
+            // to verify the \exchange_sig\.
+            deposit_timestamp: Timestamp;
+
+            // At what time the refund possibility expired (needed to verify exchange_sig).
+            refund_deadline: Timestamp;
+
+            // Public key of the coin for which we have conflicting information.
+            coin_pub: EddsaPublicKey;
+
+            // Amount the exchange counted the coin for in the transfer.
+            amount_with_fee: Amount;
+
+            // Expected value of the coin.
+            coin_value: Amount;
+
+            // Expected deposit fee of the coin.
+            coin_fee: Amount;
+
+            // Expected deposit fee of the coin.
+            deposit_fee: Amount;
+
+        }
+
+        // interface TrackTransferProof {
+        //     // signature from the exchange made with purpose
+        //     // TALER_SIGNATURE_EXCHANGE_CONFIRM_WIRE_DEPOSIT
+        //     exchange_sig: EddsaSignature;
+
+        //     // public EdDSA key of the exchange that was used to generate the signature.
+        //     // Should match one of the exchange's signing keys from /keys.  Again given
+        //     // explicitly as the client might otherwise be confused by clock skew as to
+        //     // which signing key was used.
+        //     exchange_pub: EddsaSignature;
+
+        //     // hash of the wire details (identical for all deposits)
+        //     // Needed to check the exchange_sig
+        //     h_wire: HashCode;
+        // }
+
+    }
+
+
+    interface ContractTerms {
+        // Human-readable description of the whole purchase
+        summary: string;
+
+        // Map from IETF BCP 47 language tags to localized summaries
+        summary_i18n?: { [lang_tag: string]: string };
+
+        // Unique, free-form identifier for the proposal.
+        // Must be unique within a merchant instance.
+        // For merchants that do not store proposals in their DB
+        // before the customer paid for them, the order_id can be used
+        // by the frontend to restore a proposal from the information
+        // encoded in it (such as a short product identifier and timestamp).
+        order_id: string;
+
+        // Total price for the transaction.
+        // The exchange will subtract deposit fees from that amount
+        // before transferring it to the merchant.
+        amount: Amount;
+
+        // The URL for this purchase.  Every time is is visited, the merchant
+        // will send back to the customer the same proposal.  Clearly, this URL
+        // can be bookmarked and shared by users.
+        fulfillment_url?: string;
+
+        // Maximum total deposit fee accepted by the merchant for this contract
+        max_fee: Amount;
+
+        // Maximum wire fee accepted by the merchant (customer share to be
+        // divided by the 'wire_fee_amortization' factor, and further reduced
+        // if deposit fees are below 'max_fee').  Default if missing is zero.
+        max_wire_fee: Amount;
+
+        // Over how many customer transactions does the merchant expect to
+        // amortize wire fees on average?  If the exchange's wire fee is
+        // above 'max_wire_fee', the difference is divided by this number
+        // to compute the expected customer's contribution to the wire fee.
+        // The customer's contribution may further be reduced by the difference
+        // between the 'max_fee' and the sum of the actual deposit fees.
+        // Optional, default value if missing is 1.  0 and negative values are
+        // invalid and also interpreted as 1.
+        wire_fee_amortization: number;
+
+        // List of products that are part of the purchase (see Product).
+        products: Product[];
+
+        // Time when this contract was generated
+        timestamp: TalerProtocolTimestamp;
+
+        // After this deadline has passed, no refunds will be accepted.
+        refund_deadline: TalerProtocolTimestamp;
+
+        // After this deadline, the merchant won't accept payments for the contact
+        pay_deadline: TalerProtocolTimestamp;
+
+        // Transfer deadline for the exchange.  Must be in the
+        // deposit permissions of coins used to pay for this order.
+        wire_transfer_deadline: TalerProtocolTimestamp;
+
+        // Merchant's public key used to sign this proposal; this information
+        // is typically added by the backend Note that this can be an ephemeral key.
+        merchant_pub: EddsaPublicKey;
+
+        // Base URL of the (public!) merchant backend API.
+        // Must be an absolute URL that ends with a slash.
+        merchant_base_url: string;
+
+        // More info about the merchant, see below
+        merchant: Merchant;
+
+        // The hash of the merchant instance's wire details.
+        h_wire: HashCode;
+
+        // Wire transfer method identifier for the wire method associated with h_wire.
+        // The wallet may only select exchanges via a matching auditor if the
+        // exchange also supports this wire method.
+        // The wire transfer fees must be added based on this wire transfer method.
+        wire_method: string;
+
+        // Any exchanges audited by these auditors are accepted by the merchant.
+        auditors: Auditor[];
+
+        // Exchanges that the merchant accepts even if it does not accept any auditors that audit them.
+        exchanges: Exchange[];
+
+        // Delivery location for (all!) products.
+        delivery_location?: Location;
+
+        // Time indicating when the order should be delivered.
+        // May be overwritten by individual products.
+        delivery_date?: TalerProtocolTimestamp;
+
+        // Nonce generated by the wallet and echoed by the merchant
+        // in this field when the proposal is generated.
+        nonce: string;
+
+        // Specifies for how long the wallet should try to get an
+        // automatic refund for the purchase. If this field is
+        // present, the wallet should wait for a few seconds after
+        // the purchase and then automatically attempt to obtain
+        // a refund.  The wallet should probe until "delay"
+        // after the payment was successful (i.e. via long polling
+        // or via explicit requests with exponential back-off).
+        //
+        // In particular, if the wallet is offline
+        // at that time, it MUST repeat the request until it gets
+        // one response from the merchant after the delay has expired.
+        // If the refund is granted, the wallet MUST automatically
+        // recover the payment.  This is used in case a merchant
+        // knows that it might be unable to satisfy the contract and
+        // desires for the wallet to attempt to get the refund without any
+        // customer interaction.  Note that it is NOT an error if the
+        // merchant does not grant a refund.
+        auto_refund?: RelativeTime;
+
+        // Extra data that is only interpreted by the merchant frontend.
+        // Useful when the merchant needs to store extra information on a
+        // contract without storing it separately in their database.
+        extra?: any;
+
+        // Minimum age buyer must have (in years). Default is 0.
+        minimum_age?: Integer;
+    }
+
+}
diff --git a/packages/merchant-backoffice-ui/src/hooks/async.ts b/packages/merchant-backoffice-ui/src/hooks/async.ts
new file mode 100644
index 000000000..fd550043b
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/hooks/async.ts
@@ -0,0 +1,76 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+import { useState } from "preact/hooks";
+import { cancelPendingRequest } from "./backend";
+
+export interface Options {
+  slowTolerance: number,
+}
+
+export interface AsyncOperationApi<T> {
+  request: (...a: any) => void,
+  cancel: () => void,
+  data: T | undefined,
+  isSlow: boolean,
+  isLoading: boolean,
+  error: string | undefined
+}
+
+export function useAsync<T>(fn?: (...args: any) => Promise<T>, { slowTolerance: tooLong }: Options = { slowTolerance: 1000 }): AsyncOperationApi<T> {
+  const [data, setData] = useState<T | undefined>(undefined);
+  const [isLoading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<any>(undefined);
+  const [isSlow, setSlow] = useState(false)
+
+  const request = async (...args: any) => {
+    if (!fn) return;
+    setLoading(true);
+
+    const handler = setTimeout(() => {
+      setSlow(true)
+    }, tooLong)
+
+    try {
+      const result = await fn(...args);
+      setData(result);
+    } catch (error) {
+      setError(error);
+    }
+    setLoading(false);
+    setSlow(false)
+    clearTimeout(handler)
+  };
+
+  function cancel() {
+    cancelPendingRequest()
+    setLoading(false);
+    setSlow(false)
+  }
+
+  return {
+    request,
+    cancel,
+    data,
+    isSlow,
+    isLoading,
+    error
+  };
+}
diff --git a/packages/merchant-backoffice-ui/src/hooks/backend.ts b/packages/merchant-backoffice-ui/src/hooks/backend.ts
new file mode 100644
index 000000000..789cfc81c
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/hooks/backend.ts
@@ -0,0 +1,319 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { useSWRConfig } from "swr";
+import axios, { AxiosError, AxiosResponse } from "axios";
+import { MerchantBackend } from "../declaration";
+import { useBackendContext } from "../context/backend";
+import { useEffect, useState } from "preact/hooks";
+import { DEFAULT_REQUEST_TIMEOUT } from "../utils/constants";
+import { axiosHandler, removeAxiosCancelToken } from "../utils/switchableAxios";
+
+export function useMatchMutate(): (
+  re: RegExp,
+  value?: unknown
+) => Promise<any> {
+  const { cache, mutate } = useSWRConfig();
+
+  if (!(cache instanceof Map)) {
+    throw new Error(
+      "matchMutate requires the cache provider to be a Map instance"
+    );
+  }
+
+  return function matchRegexMutate(re: RegExp, value?: unknown) {
+    const allKeys = Array.from(cache.keys());
+    // console.log(allKeys)
+    const keys = allKeys.filter((key) => re.test(key));
+    // console.log(allKeys.length, keys.length)
+    const mutations = keys.map((key) => {
+      // console.log(key)
+      mutate(key, value, true);
+    });
+    return Promise.all(mutations);
+  };
+}
+
+export type HttpResponse<T> =
+  | HttpResponseOk<T>
+  | HttpResponseLoading<T>
+  | HttpError;
+export type HttpResponsePaginated<T> =
+  | HttpResponseOkPaginated<T>
+  | HttpResponseLoading<T>
+  | HttpError;
+
+export interface RequestInfo {
+  url: string;
+  hasToken: boolean;
+  params: unknown;
+  data: unknown;
+  status: number;
+}
+
+interface HttpResponseLoading<T> {
+  ok?: false;
+  loading: true;
+  clientError?: false;
+  serverError?: false;
+
+  data?: T;
+}
+export interface HttpResponseOk<T> {
+  ok: true;
+  loading?: false;
+  clientError?: false;
+  serverError?: false;
+
+  data: T;
+  info?: RequestInfo;
+}
+
+export type HttpResponseOkPaginated<T> = HttpResponseOk<T> & WithPagination;
+
+export interface WithPagination {
+  loadMore: () => void;
+  loadMorePrev: () => void;
+  isReachingEnd?: boolean;
+  isReachingStart?: boolean;
+}
+
+export type HttpError =
+  | HttpResponseClientError
+  | HttpResponseServerError
+  | HttpResponseUnexpectedError;
+export interface SwrError {
+  info: unknown;
+  status: number;
+  message: string;
+}
+export interface HttpResponseServerError {
+  ok?: false;
+  loading?: false;
+  clientError?: false;
+  serverError: true;
+
+  error?: MerchantBackend.ErrorDetail;
+  status: number;
+  message: string;
+  info?: RequestInfo;
+}
+interface HttpResponseClientError {
+  ok?: false;
+  loading?: false;
+  clientError: true;
+  serverError?: false;
+
+  info?: RequestInfo;
+  isUnauthorized: boolean;
+  isNotfound: boolean;
+  status: number;
+  error?: MerchantBackend.ErrorDetail;
+  message: string;
+}
+
+interface HttpResponseUnexpectedError {
+  ok?: false;
+  loading?: false;
+  clientError?: false;
+  serverError?: false;
+
+  info?: RequestInfo;
+  status?: number;
+  error: unknown;
+  message: string;
+}
+
+type Methods = "get" | "post" | "patch" | "delete" | "put";
+
+interface RequestOptions {
+  method?: Methods;
+  token?: string;
+  data?: unknown;
+  params?: unknown;
+}
+
+function buildRequestOk<T>(
+  res: AxiosResponse<T>,
+  url: string,
+  hasToken: boolean
+): HttpResponseOk<T> {
+  return {
+    ok: true,
+    data: res.data,
+    info: {
+      params: res.config.params,
+      data: res.config.data,
+      url,
+      hasToken,
+      status: res.status,
+    },
+  };
+}
+
+// function buildResponse<T>(data?: T, error?: MerchantBackend.ErrorDetail, isValidating?: boolean): HttpResponse<T> {
+//   if (isValidating) return {loading: true}
+//   if (error) return buildRequestFailed()
+// }
+
+function buildRequestFailed(
+  ex: AxiosError<MerchantBackend.ErrorDetail>,
+  url: string,
+  hasToken: boolean
+):
+  | HttpResponseClientError
+  | HttpResponseServerError
+  | HttpResponseUnexpectedError {
+  const status = ex.response?.status;
+
+  const info: RequestInfo = {
+    data: ex.request?.data,
+    params: ex.request?.params,
+    url,
+    hasToken,
+    status: status || 0,
+  };
+
+  if (status && status >= 400 && status < 500) {
+    const error: HttpResponseClientError = {
+      clientError: true,
+      isNotfound: status === 404,
+      isUnauthorized: status === 401,
+      status,
+      info,
+      message: ex.response?.data?.hint || ex.message,
+      error: ex.response?.data,
+    };
+    return error;
+  }
+  if (status && status >= 500 && status < 600) {
+    const error: HttpResponseServerError = {
+      serverError: true,
+      status,
+      info,
+      message:
+        `${ex.response?.data?.hint} (code ${ex.response?.data?.code})` ||
+        ex.message,
+      error: ex.response?.data,
+    };
+    return error;
+  }
+
+  const error: HttpResponseUnexpectedError = {
+    info,
+    status,
+    error: ex,
+    message: ex.message,
+  };
+
+  return error;
+}
+
+const CancelToken = axios.CancelToken;
+let source = CancelToken.source();
+
+export function cancelPendingRequest(): void {
+  source.cancel("canceled by the user");
+  source = CancelToken.source();
+}
+
+export function isAxiosError<T>(
+  error: AxiosError | any
+): error is AxiosError<T> {
+  return error && error.isAxiosError;
+}
+
+export async function request<T>(
+  url: string,
+  options: RequestOptions = {}
+): Promise<HttpResponseOk<T>> {
+  const headers = options.token
+    ? { Authorization: `Bearer ${options.token}` }
+    : undefined;
+
+  try {
+    const res = await axiosHandler({
+      url,
+      responseType: "json",
+      headers,
+      cancelToken: !removeAxiosCancelToken ? source.token : undefined,
+      method: options.method || "get",
+      data: options.data,
+      params: options.params,
+      timeout: DEFAULT_REQUEST_TIMEOUT * 1000,
+    });
+    return buildRequestOk<T>(res, url, !!options.token);
+  } catch (e) {
+    if (isAxiosError<MerchantBackend.ErrorDetail>(e)) {
+      const error = buildRequestFailed(e, url, !!options.token);
+      throw error;
+    }
+    throw e;
+  }
+}
+
+export function multiFetcher<T>(
+  urls: string[],
+  token: string,
+  backend: string
+): Promise<HttpResponseOk<T>[]> {
+  return Promise.all(urls.map((url) => fetcher<T>(url, token, backend)));
+}
+
+export function fetcher<T>(
+  url: string,
+  token: string,
+  backend: string
+): Promise<HttpResponseOk<T>> {
+  return request<T>(`${backend}${url}`, { token });
+}
+
+export function useBackendInstancesTestForAdmin(): HttpResponse<MerchantBackend.Instances.InstancesResponse> {
+  const { url, token } = useBackendContext();
+
+  type Type = MerchantBackend.Instances.InstancesResponse;
+
+  const [result, setResult] = useState<HttpResponse<Type>>({ loading: true });
+
+  useEffect(() => {
+    request<Type>(`${url}/management/instances`, { token })
+      .then((data) => setResult(data))
+      .catch((error) => setResult(error));
+  }, [url, token]);
+
+  return result;
+}
+
+export function useBackendConfig(): HttpResponse<MerchantBackend.VersionResponse> {
+  const { url, token } = useBackendContext();
+
+  type Type = MerchantBackend.VersionResponse;
+
+  const [result, setResult] = useState<HttpResponse<Type>>({ loading: true });
+
+  useEffect(() => {
+    request<Type>(`${url}/config`, { token })
+      .then((data) => setResult(data))
+      .catch((error) => setResult(error));
+  }, [url, token]);
+
+  return result;
+}
diff --git a/packages/merchant-backoffice-ui/src/hooks/index.ts b/packages/merchant-backoffice-ui/src/hooks/index.ts
new file mode 100644
index 000000000..a647e3e6c
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/hooks/index.ts
@@ -0,0 +1,110 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { StateUpdater, useCallback, useState } from "preact/hooks";
+import { ValueOrFunction } from '../utils/types';
+
+
+const calculateRootPath = () => {
+  const rootPath = typeof window !== undefined ? window.location.origin + window.location.pathname : '/'
+  return rootPath
+}
+
+export function useBackendURL(url?: string): [string, boolean, StateUpdater<string>, () => void] {
+  const [value, setter] = useNotNullLocalStorage('backend-url', url || calculateRootPath())
+  const [triedToLog, setTriedToLog] = useLocalStorage('tried-login')
+
+  const checkedSetter = (v: ValueOrFunction<string>) => {
+    setTriedToLog('yes')
+    return setter(p => (v instanceof Function ? v(p) : v).replace(/\/$/, ''))
+  }
+
+  const resetBackend = () => {
+    setTriedToLog(undefined)
+  }
+  return [value, !!triedToLog, checkedSetter, resetBackend]
+}
+
+export function useBackendDefaultToken(initialValue?: string): [string | undefined, StateUpdater<string | undefined>] {
+  return useLocalStorage('backend-token', initialValue)
+}
+
+export function useBackendInstanceToken(id: string): [string | undefined, StateUpdater<string | undefined>] {
+  const [token, setToken] = useLocalStorage(`backend-token-${id}`)
+  const [defaultToken, defaultSetToken] = useBackendDefaultToken()
+
+  // instance named 'default' use the default token
+  if (id === 'default') {
+    return [defaultToken, defaultSetToken]
+  }
+
+  return [token, setToken]
+}
+
+export function useLang(initial?: string): [string, StateUpdater<string>] {
+  const browserLang = typeof window !== "undefined" ? navigator.language || (navigator as any).userLanguage : undefined;
+  const defaultLang = (browserLang || initial || 'en').substring(0, 2)
+  return useNotNullLocalStorage('lang-preference', defaultLang)
+}
+
+export function useLocalStorage(key: string, initialValue?: string): [string | undefined, StateUpdater<string | undefined>] {
+  const [storedValue, setStoredValue] = useState<string | undefined>((): string | undefined => {
+    return typeof window !== "undefined" ? window.localStorage.getItem(key) || initialValue : initialValue;
+  });
+
+  const setValue = (value?: string | ((val?: string) => string | undefined)) => {
+    setStoredValue(p => {
+      const toStore = value instanceof Function ? value(p) : value
+      if (typeof window !== "undefined") {
+        if (!toStore) {
+          window.localStorage.removeItem(key)
+        } else {
+          window.localStorage.setItem(key, toStore);
+        }
+      }
+      return toStore
+    })
+  };
+
+  return [storedValue, setValue];
+}
+
+export function useNotNullLocalStorage(key: string, initialValue: string): [string, StateUpdater<string>] {
+  const [storedValue, setStoredValue] = useState<string>((): string => {
+    return typeof window !== "undefined" ? window.localStorage.getItem(key) || initialValue : initialValue;
+  });
+
+  const setValue = (value: string | ((val: string) => string)) => {
+    const valueToStore = value instanceof Function ? value(storedValue) : value;
+    setStoredValue(valueToStore);
+    if (typeof window !== "undefined") {
+      if (!valueToStore) {
+        window.localStorage.removeItem(key)
+      } else {
+        window.localStorage.setItem(key, valueToStore);
+      }
+    }
+  };
+
+  return [storedValue, setValue];
+}
+
+
diff --git a/packages/merchant-backoffice-ui/src/hooks/instance.ts b/packages/merchant-backoffice-ui/src/hooks/instance.ts
new file mode 100644
index 000000000..748bb82af
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/hooks/instance.ts
@@ -0,0 +1,292 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+import useSWR, { useSWRConfig } from "swr";
+import { useBackendContext } from "../context/backend";
+import { useInstanceContext } from "../context/instance";
+import { MerchantBackend } from "../declaration";
+import {
+  fetcher,
+  HttpError,
+  HttpResponse,
+  HttpResponseOk,
+  request,
+  useMatchMutate,
+} from "./backend";
+
+interface InstanceAPI {
+  updateInstance: (
+    data: MerchantBackend.Instances.InstanceReconfigurationMessage
+  ) => Promise<void>;
+  deleteInstance: () => Promise<void>;
+  clearToken: () => Promise<void>;
+  setNewToken: (token: string) => Promise<void>;
+}
+
+export function useAdminAPI(): AdminAPI {
+  const { url, token } = useBackendContext();
+  const mutateAll = useMatchMutate();
+
+  const createInstance = async (
+    instance: MerchantBackend.Instances.InstanceConfigurationMessage
+  ): Promise<void> => {
+    await request(`${url}/management/instances`, {
+      method: "post",
+      token,
+      data: instance,
+    });
+
+    mutateAll(/\/management\/instances/);
+  };
+
+  const deleteInstance = async (id: string): Promise<void> => {
+    await request(`${url}/management/instances/${id}`, {
+      method: "delete",
+      token,
+    });
+
+    mutateAll(/\/management\/instances/);
+  };
+
+  const purgeInstance = async (id: string): Promise<void> => {
+    await request(`${url}/management/instances/${id}`, {
+      method: "delete",
+      token,
+      params: {
+        purge: "YES",
+      },
+    });
+
+    mutateAll(/\/management\/instances/);
+  };
+
+  return { createInstance, deleteInstance, purgeInstance };
+}
+
+export interface AdminAPI {
+  createInstance: (
+    data: MerchantBackend.Instances.InstanceConfigurationMessage
+  ) => Promise<void>;
+  deleteInstance: (id: string) => Promise<void>;
+  purgeInstance: (id: string) => Promise<void>;
+}
+
+export function useManagementAPI(instanceId: string): InstanceAPI {
+  const mutateAll = useMatchMutate();
+  const { url, token, updateLoginStatus } = useBackendContext();
+
+  const updateInstance = async (
+    instance: MerchantBackend.Instances.InstanceReconfigurationMessage
+  ): Promise<void> => {
+    await request(`${url}/management/instances/${instanceId}`, {
+      method: "patch",
+      token,
+      data: instance,
+    });
+
+    mutateAll(/\/management\/instances/);
+  };
+
+  const deleteInstance = async (): Promise<void> => {
+    await request(`${url}/management/instances/${instanceId}`, {
+      method: "delete",
+      token,
+    });
+
+    mutateAll(/\/management\/instances/);
+  };
+
+  const clearToken = async (): Promise<void> => {
+    await request(`${url}/management/instances/${instanceId}/auth`, {
+      method: "post",
+      token,
+      data: { method: "external" },
+    });
+
+    mutateAll(/\/management\/instances/);
+  };
+
+  const setNewToken = async (newToken: string): Promise<void> => {
+    await request(`${url}/management/instances/${instanceId}/auth`, {
+      method: "post",
+      token,
+      data: { method: "token", token: newToken },
+    });
+
+    updateLoginStatus(url, newToken)
+    mutateAll(/\/management\/instances/);
+  };
+
+  return { updateInstance, deleteInstance, setNewToken, clearToken };
+}
+
+export function useInstanceAPI(): InstanceAPI {
+  const { mutate } = useSWRConfig();
+  const { url: baseUrl, token: adminToken, updateLoginStatus } = useBackendContext();
+  const { token: instanceToken, id, admin } = useInstanceContext();
+
+  const { url, token } = !admin
+    ? { url: baseUrl, token: adminToken }
+    : { url: `${baseUrl}/instances/${id}`, token: instanceToken };
+
+  const updateInstance = async (
+    instance: MerchantBackend.Instances.InstanceReconfigurationMessage
+  ): Promise<void> => {
+    await request(`${url}/private/`, {
+      method: "patch",
+      token,
+      data: instance,
+    });
+
+    if (adminToken) mutate(["/private/instances", adminToken, baseUrl], null);
+    mutate([`/private/`, token, url], null);
+  };
+
+  const deleteInstance = async (): Promise<void> => {
+    await request(`${url}/private/`, {
+      method: "delete",
+      token: adminToken,
+    });
+
+    if (adminToken) mutate(["/private/instances", adminToken, baseUrl], null);
+    mutate([`/private/`, token, url], null);
+  };
+
+  const clearToken = async (): Promise<void> => {
+    await request(`${url}/private/auth`, {
+      method: "post",
+      token,
+      data: { method: "external" },
+    });
+
+    mutate([`/private/`, token, url], null);
+  };
+
+  const setNewToken = async (newToken: string): Promise<void> => {
+    await request(`${url}/private/auth`, {
+      method: "post",
+      token,
+      data: { method: "token", token: newToken },
+    });
+
+    updateLoginStatus(baseUrl, newToken)
+    mutate([`/private/`, token, url], null);
+  };
+
+  return { updateInstance, deleteInstance, setNewToken, clearToken };
+}
+
+export function useInstanceDetails(): HttpResponse<MerchantBackend.Instances.QueryInstancesResponse> {
+  const { url: baseUrl, token: baseToken } = useBackendContext();
+  const { token: instanceToken, id, admin } = useInstanceContext();
+
+  const { url, token } = !admin
+    ? { url: baseUrl, token: baseToken }
+    : { url: `${baseUrl}/instances/${id}`, token: instanceToken };
+
+  const { data, error, isValidating } = useSWR<
+    HttpResponseOk<MerchantBackend.Instances.QueryInstancesResponse>,
+    HttpError
+  >([`/private/`, token, url], fetcher, {
+    refreshInterval: 0,
+    refreshWhenHidden: false,
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false,
+    refreshWhenOffline: false,
+    errorRetryCount: 0,
+    errorRetryInterval: 1,
+    shouldRetryOnError: false,
+  });
+
+  if (isValidating) return { loading: true, data: data?.data };
+  if (data) return data;
+  if (error) return error;
+  return { loading: true };
+}
+
+type KYCStatus =
+  | { type: "ok" }
+  | { type: "redirect"; status: MerchantBackend.Instances.AccountKycRedirects };
+
+export function useInstanceKYCDetails(): HttpResponse<KYCStatus> {
+  const { url: baseUrl, token: baseToken } = useBackendContext();
+  const { token: instanceToken, id, admin } = useInstanceContext();
+
+  const { url, token } = !admin
+    ? { url: baseUrl, token: baseToken }
+    : { url: `${baseUrl}/instances/${id}`, token: instanceToken };
+
+  const { data, error } = useSWR<
+    HttpResponseOk<MerchantBackend.Instances.AccountKycRedirects>,
+    HttpError
+  >([`/private/kyc`, token, url], fetcher, {
+    refreshInterval: 5000,
+    refreshWhenHidden: false,
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false,
+    refreshWhenOffline: false,
+    errorRetryCount: 0,
+    errorRetryInterval: 1,
+    shouldRetryOnError: false,
+  });
+
+  if (data) {
+    if (data.info?.status === 202)
+      return { ok: true, data: { type: "redirect", status: data.data } };
+    return { ok: true, data: { type: "ok" } };
+  }
+  if (error) return error;
+  return { loading: true };
+}
+
+export function useManagedInstanceDetails(
+  instanceId: string
+): HttpResponse<MerchantBackend.Instances.QueryInstancesResponse> {
+  const { url, token } = useBackendContext();
+
+  const { data, error, isValidating } = useSWR<
+    HttpResponseOk<MerchantBackend.Instances.QueryInstancesResponse>,
+    HttpError
+  >([`/management/instances/${instanceId}`, token, url], fetcher, {
+    refreshInterval: 0,
+    refreshWhenHidden: false,
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false,
+    refreshWhenOffline: false,
+    errorRetryCount: 0,
+    errorRetryInterval: 1,
+    shouldRetryOnError: false,
+  });
+
+  if (isValidating) return { loading: true, data: data?.data };
+  if (data) return data;
+  if (error) return error;
+  return { loading: true };
+}
+
+export function useBackendInstances(): HttpResponse<MerchantBackend.Instances.InstancesResponse> {
+  const { url } = useBackendContext();
+  const { token } = useInstanceContext();
+
+  const { data, error, isValidating } = useSWR<
+    HttpResponseOk<MerchantBackend.Instances.InstancesResponse>,
+    HttpError
+  >(["/management/instances", token, url], fetcher);
+
+  if (isValidating) return { loading: true, data: data?.data };
+  if (data) return data;
+  if (error) return error;
+  return { loading: true };
+}
diff --git a/packages/merchant-backoffice-ui/src/hooks/listener.ts b/packages/merchant-backoffice-ui/src/hooks/listener.ts
new file mode 100644
index 000000000..e7e3327b7
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/hooks/listener.ts
@@ -0,0 +1,81 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { useState } from "preact/hooks";
+
+/**
+ * This component is used when a component wants one child to have a trigger for
+ * an action (a button) and other child have the action implemented (like
+ * gathering information with a form). The difference with other approaches is
+ * that in this case the parent component is not holding the state.
+ * 
+ * It will return a subscriber and activator. 
+ * 
+ * The activator may be undefined, if it is undefined it is indicating that the
+ * subscriber is not ready to be called.
+ *
+ * The subscriber will receive a function (the listener) that will be call when the
+ * activator runs. The listener must return the collected information.
+ * 
+ * As a result, when the activator is triggered by a child component, the
+ * @action function is called receives the information from the listener defined by other
+ * child component 
+ *
+ * @param action from <T> to <R>
+ * @returns activator and subscriber, undefined activator means that there is not subscriber
+ */
+
+export function useListener<T, R = any>(action: (r: T) => Promise<R>): [undefined | (() => Promise<R>), (listener?: () => T) => void] {
+  type RunnerHandler = { toBeRan?: () => Promise<R>; };
+  const [state, setState] = useState<RunnerHandler>({});
+
+  /**
+   * subscriber will receive a method that will be call when the activator runs
+   *
+   * @param listener function to be run when the activator runs
+   */
+  const subscriber = (listener?: () => T) => {
+    if (listener) {
+      setState({
+        toBeRan: () => {
+          const whatWeGetFromTheListener = listener();
+          return action(whatWeGetFromTheListener);
+        }
+      });
+    } else {
+      setState({
+        toBeRan: undefined
+      })
+    }
+  };
+
+  /**
+   * activator will call runner if there is someone subscribed
+   */
+  const activator = state.toBeRan ? async () => {
+    if (state.toBeRan) {
+      return state.toBeRan();
+    }
+    return Promise.reject();
+  } : undefined;
+
+  return [activator, subscriber];
+}
diff --git a/packages/merchant-backoffice-ui/src/hooks/notifications.ts b/packages/merchant-backoffice-ui/src/hooks/notifications.ts
new file mode 100644
index 000000000..1c0c37308
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/hooks/notifications.ts
@@ -0,0 +1,48 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { useState } from "preact/hooks";
+import { Notification } from '../utils/types';
+
+interface Result {
+  notifications: Notification[];
+  pushNotification: (n: Notification) => void;
+  removeNotification: (n: Notification) => void;
+}
+
+type NotificationWithDate = Notification & { since: Date }
+
+export function useNotifications(initial: Notification[] = [], timeout = 3000): Result {
+  const [notifications, setNotifications] = useState<(NotificationWithDate)[]>(initial.map(i => ({...i, since: new Date() })))
+
+  const pushNotification = (n: Notification): void => {
+    const entry = { ...n, since: new Date() }
+    setNotifications(ns => [...ns, entry])
+    if (n.type !== 'ERROR') setTimeout(() => {
+      setNotifications(ns => ns.filter(x => x.since !== entry.since))
+    }, timeout)
+  }
+
+  const removeNotification = (notif: Notification) => {
+    setNotifications((ns: NotificationWithDate[]) => ns.filter(n => n !== notif))
+  }
+  return { notifications, pushNotification, removeNotification }
+}
diff --git a/packages/merchant-backoffice-ui/src/hooks/order.ts b/packages/merchant-backoffice-ui/src/hooks/order.ts
new file mode 100644
index 000000000..d0829683d
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/hooks/order.ts
@@ -0,0 +1,323 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+import { useEffect, useState } from "preact/hooks";
+import useSWR, { useSWRConfig } from "swr";
+import { useBackendContext } from "../context/backend";
+import { useInstanceContext } from "../context/instance";
+import { MerchantBackend } from "../declaration";
+import { MAX_RESULT_SIZE, PAGE_SIZE } from "../utils/constants";
+import {
+  fetcher,
+  HttpError,
+  HttpResponse,
+  HttpResponseOk,
+  HttpResponsePaginated,
+  request,
+  useMatchMutate,
+} from "./backend";
+
+export interface OrderAPI {
+  //FIXME: add OutOfStockResponse on 410
+  createOrder: (
+    data: MerchantBackend.Orders.PostOrderRequest
+  ) => Promise<HttpResponseOk<MerchantBackend.Orders.PostOrderResponse>>;
+  forgetOrder: (
+    id: string,
+    data: MerchantBackend.Orders.ForgetRequest
+  ) => Promise<HttpResponseOk<void>>;
+  refundOrder: (
+    id: string,
+    data: MerchantBackend.Orders.RefundRequest
+  ) => Promise<HttpResponseOk<MerchantBackend.Orders.MerchantRefundResponse>>;
+  deleteOrder: (id: string) => Promise<HttpResponseOk<void>>;
+  getPaymentURL: (id: string) => Promise<HttpResponseOk<string>>;
+}
+
+type YesOrNo = "yes" | "no";
+
+export function orderFetcher<T>(
+  url: string,
+  token: string,
+  backend: string,
+  paid?: YesOrNo,
+  refunded?: YesOrNo,
+  wired?: YesOrNo,
+  searchDate?: Date,
+  delta?: number
+): Promise<HttpResponseOk<T>> {
+  const date_ms =
+    delta && delta < 0 && searchDate
+      ? searchDate.getTime() + 1
+      : searchDate?.getTime();
+  const params: any = {};
+  if (paid !== undefined) params.paid = paid;
+  if (delta !== undefined) params.delta = delta;
+  if (refunded !== undefined) params.refunded = refunded;
+  if (wired !== undefined) params.wired = wired;
+  if (date_ms !== undefined) params.date_ms = date_ms;
+  return request<T>(`${backend}${url}`, { token, params });
+}
+
+export function useOrderAPI(): OrderAPI {
+  const mutateAll = useMatchMutate();
+  const { url: baseUrl, token: adminToken } = useBackendContext();
+  const { token: instanceToken, id, admin } = useInstanceContext();
+
+  const { url, token } = !admin
+    ? {
+      url: baseUrl,
+      token: adminToken,
+    }
+    : {
+      url: `${baseUrl}/instances/${id}`,
+      token: instanceToken,
+    };
+
+  const createOrder = async (
+    data: MerchantBackend.Orders.PostOrderRequest
+  ): Promise<HttpResponseOk<MerchantBackend.Orders.PostOrderResponse>> => {
+    const res = await request<MerchantBackend.Orders.PostOrderResponse>(
+      `${url}/private/orders`,
+      {
+        method: "post",
+        token,
+        data,
+      }
+    );
+    await mutateAll(/.*private\/orders.*/);
+    // mutate('')
+    return res;
+  };
+  const refundOrder = async (
+    orderId: string,
+    data: MerchantBackend.Orders.RefundRequest
+  ): Promise<HttpResponseOk<MerchantBackend.Orders.MerchantRefundResponse>> => {
+    mutateAll(/@"\/private\/orders"@/);
+    const res = request<MerchantBackend.Orders.MerchantRefundResponse>(
+      `${url}/private/orders/${orderId}/refund`,
+      {
+        method: "post",
+        token,
+        data,
+      }
+    );
+
+    // order list returns refundable information, so we must evict everything
+    await mutateAll(/.*private\/orders.*/);
+    return res
+  };
+
+  const forgetOrder = async (
+    orderId: string,
+    data: MerchantBackend.Orders.ForgetRequest
+  ): Promise<HttpResponseOk<void>> => {
+    mutateAll(/@"\/private\/orders"@/);
+    const res = request<void>(`${url}/private/orders/${orderId}/forget`, {
+      method: "patch",
+      token,
+      data,
+    });
+    // we may be forgetting some fields that are pare of the listing, so we must evict everything
+    await mutateAll(/.*private\/orders.*/);
+    return res
+  };
+  const deleteOrder = async (
+    orderId: string
+  ): Promise<HttpResponseOk<void>> => {
+    mutateAll(/@"\/private\/orders"@/);
+    const res = request<void>(`${url}/private/orders/${orderId}`, {
+      method: "delete",
+      token,
+    });
+    await mutateAll(/.*private\/orders.*/);
+    return res
+  };
+
+  const getPaymentURL = async (
+    orderId: string
+  ): Promise<HttpResponseOk<string>> => {
+    return request<MerchantBackend.Orders.MerchantOrderStatusResponse>(
+      `${url}/private/orders/${orderId}`,
+      {
+        method: "get",
+        token,
+      }
+    ).then((res) => {
+      const url =
+        res.data.order_status === "unpaid"
+          ? res.data.taler_pay_uri
+          : res.data.contract_terms.fulfillment_url;
+      const response: HttpResponseOk<string> = res as any;
+      response.data = url || "";
+      return response;
+    });
+  };
+
+  return { createOrder, forgetOrder, deleteOrder, refundOrder, getPaymentURL };
+}
+
+export function useOrderDetails(
+  oderId: string
+): HttpResponse<MerchantBackend.Orders.MerchantOrderStatusResponse> {
+  const { url: baseUrl, token: baseToken } = useBackendContext();
+  const { token: instanceToken, id, admin } = useInstanceContext();
+
+  const { url, token } = !admin
+    ? { url: baseUrl, token: baseToken, }
+    : { url: `${baseUrl}/instances/${id}`, token: instanceToken, };
+
+  const { data, error, isValidating } = useSWR<
+    HttpResponseOk<MerchantBackend.Orders.MerchantOrderStatusResponse>,
+    HttpError
+  >([`/private/orders/${oderId}`, token, url], fetcher, {
+    refreshInterval: 0,
+    refreshWhenHidden: false,
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false,
+    refreshWhenOffline: false,
+  });
+
+  if (isValidating) return { loading: true, data: data?.data };
+  if (data) return data;
+  if (error) return error;
+  return { loading: true };
+}
+
+export interface InstanceOrderFilter {
+  paid?: YesOrNo;
+  refunded?: YesOrNo;
+  wired?: YesOrNo;
+  date?: Date;
+}
+
+export function useInstanceOrders(
+  args?: InstanceOrderFilter,
+  updateFilter?: (d: Date) => void
+): HttpResponsePaginated<MerchantBackend.Orders.OrderHistory> {
+  const { url: baseUrl, token: baseToken } = useBackendContext();
+  const { token: instanceToken, id, admin } = useInstanceContext();
+
+  const { url, token } = !admin
+    ? { url: baseUrl, token: baseToken, }
+    : { url: `${baseUrl}/instances/${id}`, token: instanceToken, };
+
+  const [pageBefore, setPageBefore] = useState(1);
+  const [pageAfter, setPageAfter] = useState(1);
+
+  const totalAfter = pageAfter * PAGE_SIZE;
+  const totalBefore = args?.date ? pageBefore * PAGE_SIZE : 0;
+
+  /**
+   * FIXME: this can be cleaned up a little
+   *
+   * the logic of double query should be inside the orderFetch so from the hook perspective and cache
+   * is just one query and one error status
+   */
+  const {
+    data: beforeData,
+    error: beforeError,
+    isValidating: loadingBefore,
+  } = useSWR<HttpResponseOk<MerchantBackend.Orders.OrderHistory>, HttpError>(
+    [
+      `/private/orders`,
+      token,
+      url,
+      args?.paid,
+      args?.refunded,
+      args?.wired,
+      args?.date,
+      totalBefore,
+    ],
+    orderFetcher
+  );
+  const {
+    data: afterData,
+    error: afterError,
+    isValidating: loadingAfter,
+  } = useSWR<HttpResponseOk<MerchantBackend.Orders.OrderHistory>, HttpError>(
+    [
+      `/private/orders`,
+      token,
+      url,
+      args?.paid,
+      args?.refunded,
+      args?.wired,
+      args?.date,
+      -totalAfter,
+    ],
+    orderFetcher
+  );
+
+  //this will save last result
+  const [lastBefore, setLastBefore] = useState<
+    HttpResponse<MerchantBackend.Orders.OrderHistory>
+  >({ loading: true });
+  const [lastAfter, setLastAfter] = useState<
+    HttpResponse<MerchantBackend.Orders.OrderHistory>
+  >({ loading: true });
+  useEffect(() => {
+    if (afterData) setLastAfter(afterData);
+    if (beforeData) setLastBefore(beforeData);
+  }, [afterData, beforeData]);
+
+  if (beforeError) return beforeError;
+  if (afterError) return afterError;
+
+  // if the query returns less that we ask, then we have reach the end or beginning
+  const isReachingEnd = afterData && afterData.data.orders.length < totalAfter;
+  const isReachingStart = args?.date === undefined ||
+    (beforeData && beforeData.data.orders.length < totalBefore);
+
+  const pagination = {
+    isReachingEnd,
+    isReachingStart,
+    loadMore: () => {
+      if (!afterData || isReachingEnd) return;
+      if (afterData.data.orders.length < MAX_RESULT_SIZE) {
+        setPageAfter(pageAfter + 1);
+      } else {
+        const from =
+          afterData.data.orders[afterData.data.orders.length - 1].timestamp
+            .t_s;
+        if (from && from !== "never" && updateFilter) updateFilter(new Date(from * 1000));
+      }
+    },
+    loadMorePrev: () => {
+      if (!beforeData || isReachingStart) return;
+      if (beforeData.data.orders.length < MAX_RESULT_SIZE) {
+        setPageBefore(pageBefore + 1);
+      } else if (beforeData) {
+        const from =
+          beforeData.data.orders[beforeData.data.orders.length - 1].timestamp
+            .t_s;
+        if (from && from !== "never" && updateFilter) updateFilter(new Date(from * 1000));
+      }
+    },
+  };
+
+  const orders =
+    !beforeData || !afterData
+      ? []
+      : (beforeData || lastBefore).data.orders
+        .slice()
+        .reverse()
+        .concat((afterData || lastAfter).data.orders);
+  if (loadingAfter || loadingBefore) return { loading: true, data: { orders } };
+  if (beforeData && afterData) {
+    return { ok: true, data: { orders }, ...pagination };
+  }
+  return { loading: true };
+}
diff --git a/packages/merchant-backoffice-ui/src/hooks/product.ts b/packages/merchant-backoffice-ui/src/hooks/product.ts
new file mode 100644
index 000000000..c99542bc9
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/hooks/product.ts
@@ -0,0 +1,187 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+import useSWR, { useSWRConfig } from "swr";
+import { useBackendContext } from "../context/backend";
+import { useInstanceContext } from "../context/instance";
+import { MerchantBackend, WithId } from "../declaration";
+import {
+  fetcher,
+  HttpError,
+  HttpResponse,
+  HttpResponseOk,
+  multiFetcher,
+  request,
+  useMatchMutate
+} from "./backend";
+
+export interface ProductAPI {
+  createProduct: (
+    data: MerchantBackend.Products.ProductAddDetail
+  ) => Promise<void>;
+  updateProduct: (
+    id: string,
+    data: MerchantBackend.Products.ProductPatchDetail
+  ) => Promise<void>;
+  deleteProduct: (id: string) => Promise<void>;
+  lockProduct: (
+    id: string,
+    data: MerchantBackend.Products.LockRequest
+  ) => Promise<void>;
+}
+
+export function useProductAPI(): ProductAPI {
+  const mutateAll = useMatchMutate();
+  const { mutate } = useSWRConfig();
+  const { url: baseUrl, token: adminToken } = useBackendContext();
+  const { token: instanceToken, id, admin } = useInstanceContext();
+
+  const { url, token } = !admin
+    ? { url: baseUrl, token: adminToken, }
+    : { url: `${baseUrl}/instances/${id}`, token: instanceToken, };
+
+  const createProduct = async (
+    data: MerchantBackend.Products.ProductAddDetail
+  ): Promise<void> => {
+    const res = await request(`${url}/private/products`, {
+      method: "post",
+      token,
+      data,
+    });
+
+    return await mutateAll(/.*"\/private\/products.*/);
+  };
+
+  const updateProduct = async (
+    productId: string,
+    data: MerchantBackend.Products.ProductPatchDetail
+  ): Promise<void> => {
+    const r = await request(`${url}/private/products/${productId}`, {
+      method: "patch",
+      token,
+      data,
+    });
+
+    return await mutateAll(/.*"\/private\/products.*/);
+  };
+
+  const deleteProduct = async (productId: string): Promise<void> => {
+    await request(`${url}/private/products/${productId}`, {
+      method: "delete",
+      token,
+    });
+    await mutate([`/private/products`, token, url]);
+  };
+
+  const lockProduct = async (
+    productId: string,
+    data: MerchantBackend.Products.LockRequest
+  ): Promise<void> => {
+    await request(`${url}/private/products/${productId}/lock`, {
+      method: "post",
+      token,
+      data,
+    });
+
+    return await mutateAll(/.*"\/private\/products.*/);
+  };
+
+  return { createProduct, updateProduct, deleteProduct, lockProduct };
+}
+
+export function useInstanceProducts(): HttpResponse<
+  (MerchantBackend.Products.ProductDetail & WithId)[]
+> {
+  const { url: baseUrl, token: baseToken } = useBackendContext();
+  const { token: instanceToken, id, admin } = useInstanceContext();
+
+  const { url, token } = !admin
+    ? { url: baseUrl, token: baseToken, }
+    : { url: `${baseUrl}/instances/${id}`, token: instanceToken, };
+
+  const { data: list, error: listError } = useSWR<
+    HttpResponseOk<MerchantBackend.Products.InventorySummaryResponse>,
+    HttpError
+  >([`/private/products`, token, url], fetcher, {
+    refreshInterval: 0,
+    refreshWhenHidden: false,
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false,
+    refreshWhenOffline: false,
+  });
+
+  const paths = (list?.data.products || []).map(
+    (p) => `/private/products/${p.product_id}`
+  );
+  const { data: products, error: productError } = useSWR<
+    HttpResponseOk<MerchantBackend.Products.ProductDetail>[],
+    HttpError
+  >([paths, token, url], multiFetcher, {
+    refreshInterval: 0,
+    refreshWhenHidden: false,
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false,
+    refreshWhenOffline: false,
+  });
+
+
+  if (listError) return listError;
+  if (productError) return productError;
+
+  if (products) {
+    const dataWithId = products.map((d) => {
+      //take the id from the queried url
+      return {
+        ...d.data,
+        id: d.info?.url.replace(/.*\/private\/products\//, "") || "",
+      };
+    });
+    return { ok: true, data: dataWithId };
+  }
+  return { loading: true };
+}
+
+export function useProductDetails(
+  productId: string
+): HttpResponse<MerchantBackend.Products.ProductDetail> {
+  const { url: baseUrl, token: baseToken } = useBackendContext();
+  const { token: instanceToken, id, admin } = useInstanceContext();
+
+  const { url, token } = !admin
+    ? {
+      url: baseUrl,
+      token: baseToken,
+    }
+    : {
+      url: `${baseUrl}/instances/${id}`,
+      token: instanceToken,
+    };
+
+  const { data, error, isValidating } = useSWR<
+    HttpResponseOk<MerchantBackend.Products.ProductDetail>,
+    HttpError
+  >([`/private/products/${productId}`, token, url], fetcher, {
+    refreshInterval: 0,
+    refreshWhenHidden: false,
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false,
+    refreshWhenOffline: false,
+  });
+
+  if (isValidating) return { loading: true, data: data?.data };
+  if (data) return data;
+  if (error) return error;
+  return { loading: true };
+}
diff --git a/packages/merchant-backoffice-ui/src/hooks/reserves.ts b/packages/merchant-backoffice-ui/src/hooks/reserves.ts
new file mode 100644
index 000000000..7a662dfbc
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/hooks/reserves.ts
@@ -0,0 +1,218 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+import useSWR, { useSWRConfig } from "swr";
+import { useBackendContext } from "../context/backend";
+import { useInstanceContext } from "../context/instance";
+import { MerchantBackend } from "../declaration";
+import {
+  fetcher,
+  HttpError,
+  HttpResponse,
+  HttpResponseOk,
+  request,
+  useMatchMutate,
+} from "./backend";
+
+export function useReservesAPI(): ReserveMutateAPI {
+  const mutateAll = useMatchMutate();
+  const { mutate } = useSWRConfig();
+  const { url: baseUrl, token: adminToken } = useBackendContext();
+  const { token: instanceToken, id, admin } = useInstanceContext();
+
+  const { url, token } = !admin
+    ? { url: baseUrl, token: adminToken, }
+    : { url: `${baseUrl}/instances/${id}`, token: instanceToken, };
+
+  const createReserve = async (
+    data: MerchantBackend.Tips.ReserveCreateRequest
+  ): Promise<
+    HttpResponseOk<MerchantBackend.Tips.ReserveCreateConfirmation>
+  > => {
+    const res = await request<MerchantBackend.Tips.ReserveCreateConfirmation>(
+      `${url}/private/reserves`,
+      {
+        method: "post",
+        token,
+        data,
+      }
+    );
+
+    //evict reserve list query
+    await mutateAll(/.*private\/reserves.*/);
+
+    return res;
+  };
+
+  const authorizeTipReserve = async (
+    pub: string,
+    data: MerchantBackend.Tips.TipCreateRequest
+  ): Promise<HttpResponseOk<MerchantBackend.Tips.TipCreateConfirmation>> => {
+    const res = await request<MerchantBackend.Tips.TipCreateConfirmation>(
+      `${url}/private/reserves/${pub}/authorize-tip`,
+      {
+        method: "post",
+        token,
+        data,
+      }
+    );
+
+    //evict reserve details query
+    await mutate([`/private/reserves/${pub}`, token, url]);
+
+    return res;
+  };
+
+  const authorizeTip = async (
+    data: MerchantBackend.Tips.TipCreateRequest
+  ): Promise<HttpResponseOk<MerchantBackend.Tips.TipCreateConfirmation>> => {
+    const res = await request<MerchantBackend.Tips.TipCreateConfirmation>(
+      `${url}/private/tips`,
+      {
+        method: "post",
+        token,
+        data,
+      }
+    );
+
+    //evict all details query
+    await mutateAll(/.*private\/reserves\/.*/);
+
+    return res;
+  };
+
+  const deleteReserve = async (pub: string): Promise<HttpResponse<void>> => {
+    const res = await request<void>(`${url}/private/reserves/${pub}`, {
+      method: "delete",
+      token,
+    });
+
+    //evict reserve list query
+    await mutateAll(/.*private\/reserves.*/);
+
+    return res;
+  };
+
+  return { createReserve, authorizeTip, authorizeTipReserve, deleteReserve };
+}
+
+export interface ReserveMutateAPI {
+  createReserve: (
+    data: MerchantBackend.Tips.ReserveCreateRequest
+  ) => Promise<HttpResponseOk<MerchantBackend.Tips.ReserveCreateConfirmation>>;
+  authorizeTipReserve: (
+    id: string,
+    data: MerchantBackend.Tips.TipCreateRequest
+  ) => Promise<HttpResponseOk<MerchantBackend.Tips.TipCreateConfirmation>>;
+  authorizeTip: (
+    data: MerchantBackend.Tips.TipCreateRequest
+  ) => Promise<HttpResponseOk<MerchantBackend.Tips.TipCreateConfirmation>>;
+  deleteReserve: (id: string) => Promise<HttpResponse<void>>;
+}
+
+export function useInstanceReserves(): HttpResponse<MerchantBackend.Tips.TippingReserveStatus> {
+  const { url: baseUrl, token: baseToken } = useBackendContext();
+  const { token: instanceToken, id, admin } = useInstanceContext();
+
+  const { url, token } = !admin
+    ? { url: baseUrl, token: baseToken, }
+    : { url: `${baseUrl}/instances/${id}`, token: instanceToken, };
+
+  const { data, error, isValidating } = useSWR<
+    HttpResponseOk<MerchantBackend.Tips.TippingReserveStatus>,
+    HttpError
+  >([`/private/reserves`, token, url], fetcher);
+
+  if (isValidating) return { loading: true, data: data?.data };
+  if (data) return data;
+  if (error) return error;
+  return { loading: true };
+}
+
+export function useReserveDetails(
+  reserveId: string
+): HttpResponse<MerchantBackend.Tips.ReserveDetail> {
+  const { url: baseUrl } = useBackendContext();
+  const { token, id: instanceId, admin } = useInstanceContext();
+
+  const url = !admin ? baseUrl : `${baseUrl}/instances/${instanceId}`;
+
+  const { data, error, isValidating } = useSWR<
+    HttpResponseOk<MerchantBackend.Tips.ReserveDetail>,
+    HttpError
+  >([`/private/reserves/${reserveId}`, token, url], reserveDetailFetcher, {
+    refreshInterval: 0,
+    refreshWhenHidden: false,
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false,
+    refreshWhenOffline: false,
+  });
+
+  if (isValidating) return { loading: true, data: data?.data };
+  if (data) return data;
+  if (error) return error;
+  return { loading: true };
+}
+
+export function useTipDetails(
+  tipId: string
+): HttpResponse<MerchantBackend.Tips.TipDetails> {
+  const { url: baseUrl } = useBackendContext();
+  const { token, id: instanceId, admin } = useInstanceContext();
+
+  const url = !admin ? baseUrl : `${baseUrl}/instances/${instanceId}`;
+
+  const { data, error, isValidating } = useSWR<
+    HttpResponseOk<MerchantBackend.Tips.TipDetails>,
+    HttpError
+  >([`/private/tips/${tipId}`, token, url], tipsDetailFetcher, {
+    refreshInterval: 0,
+    refreshWhenHidden: false,
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false,
+    refreshWhenOffline: false,
+  });
+
+  if (isValidating) return { loading: true, data: data?.data };
+  if (data) return data;
+  if (error) return error;
+  return { loading: true };
+}
+
+function reserveDetailFetcher<T>(
+  url: string,
+  token: string,
+  backend: string
+): Promise<HttpResponseOk<T>> {
+  return request<T>(`${backend}${url}`, {
+    token,
+    params: {
+      tips: "yes",
+    },
+  });
+}
+
+function tipsDetailFetcher<T>(
+  url: string,
+  token: string,
+  backend: string
+): Promise<HttpResponseOk<T>> {
+  return request<T>(`${backend}${url}`, {
+    token,
+    params: {
+      pickups: "yes",
+    },
+  });
+}
diff --git a/packages/merchant-backoffice-ui/src/hooks/transfer.ts b/packages/merchant-backoffice-ui/src/hooks/transfer.ts
new file mode 100644
index 000000000..0c12d6d4d
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/hooks/transfer.ts
@@ -0,0 +1,217 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+import { MerchantBackend } from "../declaration";
+import { useBackendContext } from "../context/backend";
+import {
+  request,
+  HttpResponse,
+  HttpError,
+  HttpResponseOk,
+  HttpResponsePaginated,
+  useMatchMutate,
+} from "./backend";
+import useSWR from "swr";
+import { useInstanceContext } from "../context/instance";
+import { MAX_RESULT_SIZE, PAGE_SIZE } from "../utils/constants";
+import { useEffect, useState } from "preact/hooks";
+
+async function transferFetcher<T>(
+  url: string,
+  token: string,
+  backend: string,
+  payto_uri?: string,
+  verified?: string,
+  position?: string,
+  delta?: number
+): Promise<HttpResponseOk<T>> {
+  const params: any = {};
+  if (payto_uri !== undefined) params.payto_uri = payto_uri;
+  if (verified !== undefined) params.verified = verified;
+  if (delta !== undefined) {
+    params.limit = delta;
+  }
+  if (position !== undefined) params.offset = position;
+
+  return request<T>(`${backend}${url}`, { token, params });
+}
+
+export function useTransferAPI(): TransferAPI {
+  const mutateAll = useMatchMutate();
+  const { url: baseUrl, token: adminToken } = useBackendContext();
+  const { token: instanceToken, id, admin } = useInstanceContext();
+
+  const { url, token } = !admin
+    ? {
+      url: baseUrl,
+      token: adminToken,
+    }
+    : {
+      url: `${baseUrl}/instances/${id}`,
+      token: instanceToken,
+    };
+
+  const informTransfer = async (
+    data: MerchantBackend.Transfers.TransferInformation
+  ): Promise<
+    HttpResponseOk<MerchantBackend.Transfers.MerchantTrackTransferResponse>
+  > => {
+    const res = await request<MerchantBackend.Transfers.MerchantTrackTransferResponse>(
+      `${url}/private/transfers`, {
+      method: "post",
+      token,
+      data,
+    });
+
+    await mutateAll(/.*private\/transfers.*/);
+    return res
+  };
+
+  return { informTransfer };
+}
+
+export interface TransferAPI {
+  informTransfer: (
+    data: MerchantBackend.Transfers.TransferInformation
+  ) => Promise<
+    HttpResponseOk<MerchantBackend.Transfers.MerchantTrackTransferResponse>
+  >;
+}
+
+export interface InstanceTransferFilter {
+  payto_uri?: string;
+  verified?: "yes" | "no";
+  position?: string;
+}
+
+export function useInstanceTransfers(
+  args?: InstanceTransferFilter,
+  updatePosition?: (id: string) => void
+): HttpResponsePaginated<MerchantBackend.Transfers.TransferList> {
+  const { url: baseUrl, token: baseToken } = useBackendContext();
+  const { token: instanceToken, id, admin } = useInstanceContext();
+
+  const { url, token } = !admin
+    ? { url: baseUrl, token: baseToken }
+    : { url: `${baseUrl}/instances/${id}`, token: instanceToken };
+
+  const [pageBefore, setPageBefore] = useState(1);
+  const [pageAfter, setPageAfter] = useState(1);
+
+  const totalAfter = pageAfter * PAGE_SIZE;
+  const totalBefore = args?.position !== undefined ? pageBefore * PAGE_SIZE : 0;
+
+  /**
+   * FIXME: this can be cleaned up a little
+   *
+   * the logic of double query should be inside the orderFetch so from the hook perspective and cache
+   * is just one query and one error status
+   */
+  const {
+    data: beforeData,
+    error: beforeError,
+    isValidating: loadingBefore,
+  } = useSWR<HttpResponseOk<MerchantBackend.Transfers.TransferList>, HttpError>(
+    [
+      `/private/transfers`,
+      token,
+      url,
+      args?.payto_uri,
+      args?.verified,
+      args?.position,
+      totalBefore,
+    ],
+    transferFetcher
+  );
+  const {
+    data: afterData,
+    error: afterError,
+    isValidating: loadingAfter,
+  } = useSWR<HttpResponseOk<MerchantBackend.Transfers.TransferList>, HttpError>(
+    [
+      `/private/transfers`,
+      token,
+      url,
+      args?.payto_uri,
+      args?.verified,
+      args?.position,
+      -totalAfter,
+    ],
+    transferFetcher
+  );
+
+  //this will save last result
+  const [lastBefore, setLastBefore] = useState<
+    HttpResponse<MerchantBackend.Transfers.TransferList>
+  >({ loading: true });
+  const [lastAfter, setLastAfter] = useState<
+    HttpResponse<MerchantBackend.Transfers.TransferList>
+  >({ loading: true });
+  useEffect(() => {
+    if (afterData) setLastAfter(afterData);
+    if (beforeData) setLastBefore(beforeData);
+  }, [afterData, beforeData]);
+
+  if (beforeError) return beforeError;
+  if (afterError) return afterError;
+
+  // if the query returns less that we ask, then we have reach the end or beginning
+  const isReachingEnd = afterData && afterData.data.transfers.length < totalAfter;
+  const isReachingStart = args?.position === undefined ||
+    (beforeData && beforeData.data.transfers.length < totalBefore);
+
+  const pagination = {
+    isReachingEnd,
+    isReachingStart,
+    loadMore: () => {
+      if (!afterData || isReachingEnd) return;
+      if (afterData.data.transfers.length < MAX_RESULT_SIZE) {
+        setPageAfter(pageAfter + 1);
+      } else {
+        const from =
+          `${afterData.data
+            .transfers[afterData.data.transfers.length - 1]
+            .transfer_serial_id}`;
+        if (from && updatePosition) updatePosition(from);
+      }
+    },
+    loadMorePrev: () => {
+      if (!beforeData || isReachingStart) return;
+      if (beforeData.data.transfers.length < MAX_RESULT_SIZE) {
+        setPageBefore(pageBefore + 1);
+      } else if (beforeData) {
+        const from =
+          `${beforeData.data
+            .transfers[beforeData.data.transfers.length - 1]
+            .transfer_serial_id}`;
+        if (from && updatePosition) updatePosition(from);
+      }
+    },
+  };
+
+  const transfers =
+    !beforeData || !afterData
+      ? []
+      : (beforeData || lastBefore).data.transfers
+        .slice()
+        .reverse()
+        .concat((afterData || lastAfter).data.transfers);
+  if (loadingAfter || loadingBefore)
+    return { loading: true, data: { transfers } };
+  if (beforeData && afterData) {
+    return { ok: true, data: { transfers }, ...pagination };
+  }
+  return { loading: true };
+}
diff --git a/packages/merchant-backoffice-ui/src/i18n/de.po b/packages/merchant-backoffice-ui/src/i18n/de.po
new file mode 100644
index 000000000..6b35bd0ce
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/i18n/de.po
@@ -0,0 +1,1057 @@
+# This file is part of TALER
+# (C) 2016 GNUnet e.V.
+#
+# TALER is free software; you can redistribute it and/or modify it under the
+# terms of the GNU General Public License as published by the Free Software
+# Foundation; either version 3, or (at your option) any later version.
+#
+# TALER is distributed in the hope that it will be useful, but WITHOUT ANY
+# WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+# A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License along with
+# TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+#
+#, fuzzy
+msgid ""
+msgstr ""
+"Project-Id-Version: Taler Wallet\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2016-11-23 00:00+0100\n"
+"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
+"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
+"Language-Team: LANGUAGE <LL@li.org>\n"
+"Language: \n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+#: src/ApplicationReadyRoutes.tsx:50 src/InstanceRoutes.tsx:118
+#: src/InstanceRoutes.tsx:299
+#, c-format
+msgid "Access denied"
+msgstr ""
+
+#: src/ApplicationReadyRoutes.tsx:51 src/InstanceRoutes.tsx:118
+#: src/InstanceRoutes.tsx:300
+#, c-format
+msgid "Check your token is valid"
+msgstr ""
+
+#: src/ApplicationReadyRoutes.tsx:72
+#, c-format
+msgid "Couldn't access the server."
+msgstr ""
+
+#: src/ApplicationReadyRoutes.tsx:73
+#, c-format
+msgid "Could not infer instance id from url %1$s"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:109
+#, c-format
+msgid "HTTP status #%1$s: Server reported a problem"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:110
+#, c-format
+msgid "Got message: \"%1$s\" from: %2$s"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:127
+#, c-format
+msgid "No default instance"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:128
+#, c-format
+msgid ""
+"in order to use merchant backoffice, you should create the default instance"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:288
+#, c-format
+msgid "Server reported a problem: HTTP status #%1$s"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:289
+#, c-format
+msgid "Got message: %1$s from: %2$s"
+msgstr ""
+
+#: src/components/exception/login.tsx:46
+#, c-format
+msgid "Login required"
+msgstr ""
+
+#: src/components/exception/login.tsx:49
+#, c-format
+msgid ""
+"Please enter your auth token. Token should have \"secret-token:\" and start "
+"with Bearer or ApiKey"
+msgstr ""
+
+#: src/components/exception/login.tsx:86 src/components/modal/index.tsx:53
+#: src/components/modal/index.tsx:75 src/paths/admin/create/CreatePage.tsx:115
+#: src/paths/instance/orders/create/CreatePage.tsx:325
+#: src/paths/instance/products/create/CreatePage.tsx:51
+#: src/paths/instance/products/list/Table.tsx:174
+#: src/paths/instance/products/list/Table.tsx:228
+#: src/paths/instance/products/update/UpdatePage.tsx:55
+#: src/paths/instance/transfers/create/CreatePage.tsx:89
+#: src/paths/instance/update/UpdatePage.tsx:134
+#, c-format
+msgid "Confirm"
+msgstr ""
+
+#: src/components/form/InputArray.tsx:72
+#, c-format
+msgid "The value %1$s is invalid for a payment url"
+msgstr ""
+
+#: src/components/form/InputDate.tsx:67
+#: src/paths/instance/orders/list/index.tsx:123
+#, c-format
+msgid "pick a date"
+msgstr ""
+
+#: src/components/form/InputDate.tsx:81
+#, c-format
+msgid "clear"
+msgstr ""
+
+#: src/components/form/InputDate.tsx:83
+#: src/paths/instance/transfers/list/Table.tsx:140
+#, c-format
+msgid "never"
+msgstr ""
+
+#: src/components/form/InputImage.tsx:80
+#, c-format
+msgid "Image should be smaller than 1 MB"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:28
+#, c-format
+msgid "Country"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:30
+#: src/paths/admin/create/CreatePage.tsx:99
+#: src/paths/instance/transfers/list/Table.tsx:124
+#: src/paths/instance/update/UpdatePage.tsx:118
+#, c-format
+msgid "Address"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:34
+#, c-format
+msgid "Building number"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:35
+#, c-format
+msgid "Building name"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:36
+#, c-format
+msgid "Street"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:37
+#, c-format
+msgid "Post code"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:38
+#, c-format
+msgid "Town location"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:39
+#, c-format
+msgid "Town"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:40
+#, c-format
+msgid "District"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:41
+#, c-format
+msgid "Country subdivision"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:59
+#, c-format
+msgid "Product id"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:60
+#: src/components/product/ProductForm.tsx:99
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:122
+#: src/paths/instance/orders/list/Table.tsx:227
+#: src/paths/instance/products/list/Table.tsx:86
+#, c-format
+msgid "Description"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:73
+#: src/components/form/InputTaxes.tsx:81
+#: src/paths/admin/create/CreatePage.tsx:87 src/paths/admin/list/Table.tsx:110
+#: src/paths/instance/details/DetailPage.tsx:76
+#: src/paths/instance/update/UpdatePage.tsx:106
+#, c-format
+msgid "Name"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:102
+#, c-format
+msgid "loading..."
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:108
+#, c-format
+msgid "no products found"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:116
+#, c-format
+msgid "no results"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:33
+#, c-format
+msgid "Deleting"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:34
+#, c-format
+msgid "Changing"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:60
+#, c-format
+msgid "Manage token"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:83
+#, c-format
+msgid "Update"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:100
+#: src/paths/instance/orders/create/CreatePage.tsx:252
+#: src/paths/instance/orders/create/CreatePage.tsx:273
+#, c-format
+msgid "Remove"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:106 src/components/modal/index.tsx:52
+#: src/components/modal/index.tsx:73 src/paths/admin/create/CreatePage.tsx:114
+#: src/paths/instance/orders/create/CreatePage.tsx:324
+#: src/paths/instance/products/create/CreatePage.tsx:50
+#: src/paths/instance/products/list/Table.tsx:166
+#: src/paths/instance/products/list/Table.tsx:218
+#: src/paths/instance/products/update/UpdatePage.tsx:54
+#: src/paths/instance/transfers/create/CreatePage.tsx:88
+#: src/paths/instance/update/UpdatePage.tsx:133
+#, c-format
+msgid "Cancel"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:91
+#, c-format
+msgid "Manage stock"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:93
+#, c-format
+msgid "Infinite"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:105
+#, c-format
+msgid "lost cannot be greater that current + incoming (max %1$s)"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:111
+#, c-format
+msgid "current stock will change from %1$s to %2$s"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:112
+#, c-format
+msgid "current stock will stay at %1$s"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:129
+#: src/paths/instance/products/list/Table.tsx:204
+#, c-format
+msgid "Incoming"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:130
+#: src/paths/instance/products/list/Table.tsx:205
+#, c-format
+msgid "Lost"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:142
+#, c-format
+msgid "Current"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:145
+#, c-format
+msgid "without stock"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:150
+#, c-format
+msgid "Next restock"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:152
+#, c-format
+msgid "Delivery address"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:73
+#, c-format
+msgid "this product has no taxes"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:77
+#: src/paths/instance/orders/details/DetailPage.tsx:145
+#: src/paths/instance/orders/details/DetailPage.tsx:296
+#: src/paths/instance/orders/list/Table.tsx:116
+#: src/paths/instance/transfers/create/CreatePage.tsx:84
+#, c-format
+msgid "Amount"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:78
+#, c-format
+msgid "currency and value separated with colon"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:84
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:78
+#, c-format
+msgid "Add"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:53
+#, c-format
+msgid "Instance"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:59
+#, c-format
+msgid "Settings"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:65
+#: src/paths/instance/orders/list/Table.tsx:60
+#, c-format
+msgid "Orders"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:71
+#: src/paths/instance/orders/create/CreatePage.tsx:258
+#: src/paths/instance/products/list/Table.tsx:48
+#, c-format
+msgid "Products"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:77
+#: src/paths/instance/transfers/list/Table.tsx:65
+#, c-format
+msgid "Transfers"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:87
+#, c-format
+msgid "Connection"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:112 src/paths/admin/list/Table.tsx:57
+#, c-format
+msgid "Instances"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:116
+#, c-format
+msgid "New"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:122
+#, c-format
+msgid "List"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:129
+#, c-format
+msgid "Log out"
+msgstr ""
+
+#: src/components/modal/index.tsx:74
+#, c-format
+msgid "Clear"
+msgstr ""
+
+#: src/components/modal/index.tsx:110 src/components/modal/index.tsx:111
+#, c-format
+msgid "should be the same"
+msgstr ""
+
+#: src/components/modal/index.tsx:111
+#, c-format
+msgid "cannot be the same as before"
+msgstr ""
+
+#: src/components/modal/index.tsx:114
+#, c-format
+msgid ""
+"You are updating the authorization token from instance %1$s with id %2$s"
+msgstr ""
+
+#: src/components/modal/index.tsx:124
+#, c-format
+msgid "Old token"
+msgstr ""
+
+#: src/components/modal/index.tsx:125
+#, c-format
+msgid "New token"
+msgstr ""
+
+#: src/components/modal/index.tsx:127
+#, c-format
+msgid "Clearing the auth token will mean public access to the instance"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:96
+#: src/paths/admin/create/CreatePage.tsx:85 src/paths/admin/list/Table.tsx:109
+#: src/paths/instance/transfers/list/Table.tsx:122
+#, c-format
+msgid "ID"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:98
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:121
+#: src/paths/instance/products/list/Table.tsx:85
+#, c-format
+msgid "Image"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:100
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:123
+#, c-format
+msgid "Unit"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:101
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:124
+#: src/paths/instance/products/list/Table.tsx:162
+#: src/paths/instance/products/list/Table.tsx:214
+#, c-format
+msgid "Price"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:103
+#: src/paths/instance/products/list/Table.tsx:90
+#, c-format
+msgid "Stock"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:105
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:128
+#: src/paths/instance/products/list/Table.tsx:88
+#, c-format
+msgid "Taxes"
+msgstr ""
+
+#: src/index.tsx:75
+#, c-format
+msgid "Server not found"
+msgstr ""
+
+#: src/index.tsx:85
+#, c-format
+msgid "Couldn't access the server"
+msgstr ""
+
+#: src/index.tsx:87 src/index.tsx:99
+#, c-format
+msgid "Got message %1$s from %2$s"
+msgstr ""
+
+#: src/index.tsx:97
+#, c-format
+msgid "Unexpected Error"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:89
+#: src/paths/instance/update/UpdatePage.tsx:108
+#, c-format
+msgid "Auth token"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:91
+#: src/paths/instance/details/DetailPage.tsx:77
+#: src/paths/instance/update/UpdatePage.tsx:110
+#, c-format
+msgid "Account address"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:93
+#: src/paths/instance/update/UpdatePage.tsx:112
+#, c-format
+msgid "Default max deposit fee"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:95
+#: src/paths/instance/update/UpdatePage.tsx:114
+#, c-format
+msgid "Default max wire fee"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:97
+#: src/paths/instance/update/UpdatePage.tsx:116
+#, c-format
+msgid "Default wire fee amortization"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:103
+#: src/paths/instance/update/UpdatePage.tsx:122
+#, c-format
+msgid "Jurisdiction"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:107
+#: src/paths/instance/update/UpdatePage.tsx:126
+#, c-format
+msgid "Default pay delay"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:109
+#: src/paths/instance/update/UpdatePage.tsx:128
+#, c-format
+msgid "Default wire transfer delay"
+msgstr ""
+
+#: src/paths/admin/create/index.tsx:58
+#, c-format
+msgid "could not create instance"
+msgstr ""
+
+#: src/paths/admin/list/Table.tsx:63 src/paths/admin/list/Table.tsx:131
+#: src/paths/instance/transfers/list/Table.tsx:71
+#, c-format
+msgid "Delete"
+msgstr ""
+
+#: src/paths/admin/list/Table.tsx:128
+#, c-format
+msgid "Edit"
+msgstr ""
+
+#: src/paths/admin/list/Table.tsx:149
+#: src/paths/instance/products/list/Table.tsx:245
+#, c-format
+msgid "There is no instances yet, add more pressing the + sign"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:237
+#, c-format
+msgid "Inventory products"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:286
+#, c-format
+msgid "Total price"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:287
+#, c-format
+msgid "Total tax"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:289
+#: src/paths/instance/orders/create/CreatePage.tsx:297
+#, c-format
+msgid "Order price"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:295
+#, c-format
+msgid "Net"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:300
+#: src/paths/instance/orders/details/DetailPage.tsx:144
+#: src/paths/instance/orders/details/DetailPage.tsx:295
+#: src/paths/instance/orders/list/Table.tsx:117
+#, c-format
+msgid "Summary"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:302
+#, c-format
+msgid "Payments options"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:303
+#, c-format
+msgid "Auto refund deadline"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:304
+#, c-format
+msgid "Refund deadline"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:305
+#, c-format
+msgid "Pay deadline"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:307
+#, c-format
+msgid "Delivery date"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:308
+#, c-format
+msgid "Location"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:312
+#, c-format
+msgid "Max fee"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:313
+#, c-format
+msgid "Max wire fee"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:314
+#, c-format
+msgid "Wire fee amortization"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:315
+#, c-format
+msgid "Fullfilment url"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:318
+#, c-format
+msgid "Extra information"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:44
+#, c-format
+msgid "select a product first"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:51
+#, c-format
+msgid "should be greater than 0"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:58
+#, c-format
+msgid ""
+"cannot be greater than current stock and quantity previously added. max: %1$s"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:64
+#, c-format
+msgid "cannot be greater than current stock %1$s"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:76
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:126
+#, c-format
+msgid "Quantity"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:92
+#: src/paths/instance/orders/details/DetailPage.tsx:235
+#: src/paths/instance/orders/details/DetailPage.tsx:333
+#, c-format
+msgid "Order"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:93
+#, c-format
+msgid "claimed"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:110
+#: src/paths/instance/orders/details/DetailPage.tsx:261
+#: src/paths/instance/orders/list/Table.tsx:136
+#, c-format
+msgid "copy url"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:126
+#: src/paths/instance/orders/details/DetailPage.tsx:349
+#, c-format
+msgid "pay at"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:127
+#: src/paths/instance/orders/details/DetailPage.tsx:350
+#, c-format
+msgid "created at"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:138
+#: src/paths/instance/orders/details/DetailPage.tsx:289
+#, c-format
+msgid "Timeline"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:142
+#: src/paths/instance/orders/details/DetailPage.tsx:293
+#, c-format
+msgid "Payment details"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:146
+#: src/paths/instance/orders/details/DetailPage.tsx:299
+#: src/paths/instance/orders/details/DetailPage.tsx:363
+#, c-format
+msgid "Order status"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:156
+#: src/paths/instance/orders/details/DetailPage.tsx:308
+#, c-format
+msgid "Product list"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:236
+#, c-format
+msgid "paid"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:238
+#, c-format
+msgid "wired"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:241
+#, c-format
+msgid "refunded"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:258
+#, c-format
+msgid "refund"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:297
+#, c-format
+msgid "Refunded amount"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:298
+#, c-format
+msgid "Deposit total"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:336
+#, c-format
+msgid "unpaid"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:364
+#, c-format
+msgid "Order status URL"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:365
+#, c-format
+msgid "Pay URI"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:383
+#, c-format
+msgid ""
+"Unknown order status. This is an error, please contact the administrator."
+msgstr ""
+
+#: src/paths/instance/orders/details/index.tsx:56
+#: src/paths/instance/orders/list/index.tsx:147
+#, c-format
+msgid "refund created successfully"
+msgstr ""
+
+#: src/paths/instance/orders/details/index.tsx:59
+#: src/paths/instance/orders/list/index.tsx:150
+#, c-format
+msgid "could not create the refund"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:111
+#, c-format
+msgid "load newer orders"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:115
+#, c-format
+msgid "Date"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:131
+#: src/paths/instance/orders/list/Table.tsx:223
+#, c-format
+msgid "Refund"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:145
+#, c-format
+msgid "load older orders"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:154
+#, c-format
+msgid "No orders has been found"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:202
+#, c-format
+msgid "date"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:203
+#, c-format
+msgid "amount"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:204
+#, c-format
+msgid "reason"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:224
+#, c-format
+msgid "Max refundable:"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "Reason"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "duplicated"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "requested by the customer"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "other"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:91
+#, c-format
+msgid "go to order id"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:107
+#, c-format
+msgid "Paid"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:108
+#, c-format
+msgid "Refunded"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:109
+#, c-format
+msgid "Not wired"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:110
+#, c-format
+msgid "All"
+msgstr ""
+
+#: src/paths/instance/products/create/index.tsx:48
+#: src/paths/instance/products/update/index.tsx:64
+#, c-format
+msgid "could not create product"
+msgstr ""
+
+#: src/paths/instance/products/list/Table.tsx:87
+#, c-format
+msgid "Sell"
+msgstr ""
+
+#: src/paths/instance/products/list/Table.tsx:89
+#, c-format
+msgid "Profit"
+msgstr ""
+
+#: src/paths/instance/products/list/Table.tsx:91
+#, c-format
+msgid "Sold"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:59
+#, c-format
+msgid "product updated successfully"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:62
+#, c-format
+msgid "could not update the product"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:70
+#, c-format
+msgid "product delete successfully"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:73
+#, c-format
+msgid "could not delete the product"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:59
+#, c-format
+msgid "Tips"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:111
+#, c-format
+msgid "Committed amount"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:112
+#, c-format
+msgid "Exchange initial amount"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:113
+#, c-format
+msgid "Merchant initial amount"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:148
+#, c-format
+msgid "There is no tips yet, add more pressing the + sign"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:50
+#: src/paths/instance/transfers/create/CreatePage.tsx:54
+#: src/paths/instance/transfers/create/CreatePage.tsx:55
+#: src/paths/instance/transfers/create/CreatePage.tsx:56
+#, c-format
+msgid "cannot be empty"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:51
+#, c-format
+msgid "check the id, doest look valid"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:52
+#, c-format
+msgid "should have 52 characters, current %1$s"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:57
+#, c-format
+msgid "URL doesn't have the right format"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:74
+#, c-format
+msgid "Transfer ID"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:76
+#, c-format
+msgid "Account Address"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:82
+#: src/paths/instance/transfers/list/Table.tsx:125
+#, c-format
+msgid "Exchange URL"
+msgstr ""
+
+#: src/paths/instance/transfers/create/index.tsx:49
+#, c-format
+msgid "could not inform transfer"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:118
+#, c-format
+msgid "load newer transfers"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:123
+#, c-format
+msgid "Credit"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:126
+#, c-format
+msgid "Confirmed"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:127
+#: src/paths/instance/transfers/list/index.tsx:60
+#, c-format
+msgid "Verified"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:128
+#, c-format
+msgid "Executed at"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:138
+#: src/paths/instance/transfers/list/Table.tsx:139
+#, c-format
+msgid "yes"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:138
+#: src/paths/instance/transfers/list/Table.tsx:139
+#, c-format
+msgid "no"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:140
+#, c-format
+msgid "unknown"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:145
+#, c-format
+msgid "load older transfers"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:154
+#, c-format
+msgid "There is no transfer yet, add more pressing the + sign"
+msgstr ""
diff --git a/packages/merchant-backoffice-ui/src/i18n/en.po b/packages/merchant-backoffice-ui/src/i18n/en.po
new file mode 100644
index 000000000..6b35bd0ce
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/i18n/en.po
@@ -0,0 +1,1057 @@
+# This file is part of TALER
+# (C) 2016 GNUnet e.V.
+#
+# TALER is free software; you can redistribute it and/or modify it under the
+# terms of the GNU General Public License as published by the Free Software
+# Foundation; either version 3, or (at your option) any later version.
+#
+# TALER is distributed in the hope that it will be useful, but WITHOUT ANY
+# WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+# A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License along with
+# TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+#
+#, fuzzy
+msgid ""
+msgstr ""
+"Project-Id-Version: Taler Wallet\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2016-11-23 00:00+0100\n"
+"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
+"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
+"Language-Team: LANGUAGE <LL@li.org>\n"
+"Language: \n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+#: src/ApplicationReadyRoutes.tsx:50 src/InstanceRoutes.tsx:118
+#: src/InstanceRoutes.tsx:299
+#, c-format
+msgid "Access denied"
+msgstr ""
+
+#: src/ApplicationReadyRoutes.tsx:51 src/InstanceRoutes.tsx:118
+#: src/InstanceRoutes.tsx:300
+#, c-format
+msgid "Check your token is valid"
+msgstr ""
+
+#: src/ApplicationReadyRoutes.tsx:72
+#, c-format
+msgid "Couldn't access the server."
+msgstr ""
+
+#: src/ApplicationReadyRoutes.tsx:73
+#, c-format
+msgid "Could not infer instance id from url %1$s"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:109
+#, c-format
+msgid "HTTP status #%1$s: Server reported a problem"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:110
+#, c-format
+msgid "Got message: \"%1$s\" from: %2$s"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:127
+#, c-format
+msgid "No default instance"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:128
+#, c-format
+msgid ""
+"in order to use merchant backoffice, you should create the default instance"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:288
+#, c-format
+msgid "Server reported a problem: HTTP status #%1$s"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:289
+#, c-format
+msgid "Got message: %1$s from: %2$s"
+msgstr ""
+
+#: src/components/exception/login.tsx:46
+#, c-format
+msgid "Login required"
+msgstr ""
+
+#: src/components/exception/login.tsx:49
+#, c-format
+msgid ""
+"Please enter your auth token. Token should have \"secret-token:\" and start "
+"with Bearer or ApiKey"
+msgstr ""
+
+#: src/components/exception/login.tsx:86 src/components/modal/index.tsx:53
+#: src/components/modal/index.tsx:75 src/paths/admin/create/CreatePage.tsx:115
+#: src/paths/instance/orders/create/CreatePage.tsx:325
+#: src/paths/instance/products/create/CreatePage.tsx:51
+#: src/paths/instance/products/list/Table.tsx:174
+#: src/paths/instance/products/list/Table.tsx:228
+#: src/paths/instance/products/update/UpdatePage.tsx:55
+#: src/paths/instance/transfers/create/CreatePage.tsx:89
+#: src/paths/instance/update/UpdatePage.tsx:134
+#, c-format
+msgid "Confirm"
+msgstr ""
+
+#: src/components/form/InputArray.tsx:72
+#, c-format
+msgid "The value %1$s is invalid for a payment url"
+msgstr ""
+
+#: src/components/form/InputDate.tsx:67
+#: src/paths/instance/orders/list/index.tsx:123
+#, c-format
+msgid "pick a date"
+msgstr ""
+
+#: src/components/form/InputDate.tsx:81
+#, c-format
+msgid "clear"
+msgstr ""
+
+#: src/components/form/InputDate.tsx:83
+#: src/paths/instance/transfers/list/Table.tsx:140
+#, c-format
+msgid "never"
+msgstr ""
+
+#: src/components/form/InputImage.tsx:80
+#, c-format
+msgid "Image should be smaller than 1 MB"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:28
+#, c-format
+msgid "Country"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:30
+#: src/paths/admin/create/CreatePage.tsx:99
+#: src/paths/instance/transfers/list/Table.tsx:124
+#: src/paths/instance/update/UpdatePage.tsx:118
+#, c-format
+msgid "Address"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:34
+#, c-format
+msgid "Building number"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:35
+#, c-format
+msgid "Building name"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:36
+#, c-format
+msgid "Street"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:37
+#, c-format
+msgid "Post code"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:38
+#, c-format
+msgid "Town location"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:39
+#, c-format
+msgid "Town"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:40
+#, c-format
+msgid "District"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:41
+#, c-format
+msgid "Country subdivision"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:59
+#, c-format
+msgid "Product id"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:60
+#: src/components/product/ProductForm.tsx:99
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:122
+#: src/paths/instance/orders/list/Table.tsx:227
+#: src/paths/instance/products/list/Table.tsx:86
+#, c-format
+msgid "Description"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:73
+#: src/components/form/InputTaxes.tsx:81
+#: src/paths/admin/create/CreatePage.tsx:87 src/paths/admin/list/Table.tsx:110
+#: src/paths/instance/details/DetailPage.tsx:76
+#: src/paths/instance/update/UpdatePage.tsx:106
+#, c-format
+msgid "Name"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:102
+#, c-format
+msgid "loading..."
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:108
+#, c-format
+msgid "no products found"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:116
+#, c-format
+msgid "no results"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:33
+#, c-format
+msgid "Deleting"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:34
+#, c-format
+msgid "Changing"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:60
+#, c-format
+msgid "Manage token"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:83
+#, c-format
+msgid "Update"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:100
+#: src/paths/instance/orders/create/CreatePage.tsx:252
+#: src/paths/instance/orders/create/CreatePage.tsx:273
+#, c-format
+msgid "Remove"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:106 src/components/modal/index.tsx:52
+#: src/components/modal/index.tsx:73 src/paths/admin/create/CreatePage.tsx:114
+#: src/paths/instance/orders/create/CreatePage.tsx:324
+#: src/paths/instance/products/create/CreatePage.tsx:50
+#: src/paths/instance/products/list/Table.tsx:166
+#: src/paths/instance/products/list/Table.tsx:218
+#: src/paths/instance/products/update/UpdatePage.tsx:54
+#: src/paths/instance/transfers/create/CreatePage.tsx:88
+#: src/paths/instance/update/UpdatePage.tsx:133
+#, c-format
+msgid "Cancel"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:91
+#, c-format
+msgid "Manage stock"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:93
+#, c-format
+msgid "Infinite"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:105
+#, c-format
+msgid "lost cannot be greater that current + incoming (max %1$s)"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:111
+#, c-format
+msgid "current stock will change from %1$s to %2$s"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:112
+#, c-format
+msgid "current stock will stay at %1$s"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:129
+#: src/paths/instance/products/list/Table.tsx:204
+#, c-format
+msgid "Incoming"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:130
+#: src/paths/instance/products/list/Table.tsx:205
+#, c-format
+msgid "Lost"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:142
+#, c-format
+msgid "Current"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:145
+#, c-format
+msgid "without stock"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:150
+#, c-format
+msgid "Next restock"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:152
+#, c-format
+msgid "Delivery address"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:73
+#, c-format
+msgid "this product has no taxes"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:77
+#: src/paths/instance/orders/details/DetailPage.tsx:145
+#: src/paths/instance/orders/details/DetailPage.tsx:296
+#: src/paths/instance/orders/list/Table.tsx:116
+#: src/paths/instance/transfers/create/CreatePage.tsx:84
+#, c-format
+msgid "Amount"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:78
+#, c-format
+msgid "currency and value separated with colon"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:84
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:78
+#, c-format
+msgid "Add"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:53
+#, c-format
+msgid "Instance"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:59
+#, c-format
+msgid "Settings"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:65
+#: src/paths/instance/orders/list/Table.tsx:60
+#, c-format
+msgid "Orders"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:71
+#: src/paths/instance/orders/create/CreatePage.tsx:258
+#: src/paths/instance/products/list/Table.tsx:48
+#, c-format
+msgid "Products"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:77
+#: src/paths/instance/transfers/list/Table.tsx:65
+#, c-format
+msgid "Transfers"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:87
+#, c-format
+msgid "Connection"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:112 src/paths/admin/list/Table.tsx:57
+#, c-format
+msgid "Instances"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:116
+#, c-format
+msgid "New"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:122
+#, c-format
+msgid "List"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:129
+#, c-format
+msgid "Log out"
+msgstr ""
+
+#: src/components/modal/index.tsx:74
+#, c-format
+msgid "Clear"
+msgstr ""
+
+#: src/components/modal/index.tsx:110 src/components/modal/index.tsx:111
+#, c-format
+msgid "should be the same"
+msgstr ""
+
+#: src/components/modal/index.tsx:111
+#, c-format
+msgid "cannot be the same as before"
+msgstr ""
+
+#: src/components/modal/index.tsx:114
+#, c-format
+msgid ""
+"You are updating the authorization token from instance %1$s with id %2$s"
+msgstr ""
+
+#: src/components/modal/index.tsx:124
+#, c-format
+msgid "Old token"
+msgstr ""
+
+#: src/components/modal/index.tsx:125
+#, c-format
+msgid "New token"
+msgstr ""
+
+#: src/components/modal/index.tsx:127
+#, c-format
+msgid "Clearing the auth token will mean public access to the instance"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:96
+#: src/paths/admin/create/CreatePage.tsx:85 src/paths/admin/list/Table.tsx:109
+#: src/paths/instance/transfers/list/Table.tsx:122
+#, c-format
+msgid "ID"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:98
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:121
+#: src/paths/instance/products/list/Table.tsx:85
+#, c-format
+msgid "Image"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:100
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:123
+#, c-format
+msgid "Unit"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:101
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:124
+#: src/paths/instance/products/list/Table.tsx:162
+#: src/paths/instance/products/list/Table.tsx:214
+#, c-format
+msgid "Price"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:103
+#: src/paths/instance/products/list/Table.tsx:90
+#, c-format
+msgid "Stock"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:105
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:128
+#: src/paths/instance/products/list/Table.tsx:88
+#, c-format
+msgid "Taxes"
+msgstr ""
+
+#: src/index.tsx:75
+#, c-format
+msgid "Server not found"
+msgstr ""
+
+#: src/index.tsx:85
+#, c-format
+msgid "Couldn't access the server"
+msgstr ""
+
+#: src/index.tsx:87 src/index.tsx:99
+#, c-format
+msgid "Got message %1$s from %2$s"
+msgstr ""
+
+#: src/index.tsx:97
+#, c-format
+msgid "Unexpected Error"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:89
+#: src/paths/instance/update/UpdatePage.tsx:108
+#, c-format
+msgid "Auth token"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:91
+#: src/paths/instance/details/DetailPage.tsx:77
+#: src/paths/instance/update/UpdatePage.tsx:110
+#, c-format
+msgid "Account address"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:93
+#: src/paths/instance/update/UpdatePage.tsx:112
+#, c-format
+msgid "Default max deposit fee"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:95
+#: src/paths/instance/update/UpdatePage.tsx:114
+#, c-format
+msgid "Default max wire fee"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:97
+#: src/paths/instance/update/UpdatePage.tsx:116
+#, c-format
+msgid "Default wire fee amortization"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:103
+#: src/paths/instance/update/UpdatePage.tsx:122
+#, c-format
+msgid "Jurisdiction"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:107
+#: src/paths/instance/update/UpdatePage.tsx:126
+#, c-format
+msgid "Default pay delay"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:109
+#: src/paths/instance/update/UpdatePage.tsx:128
+#, c-format
+msgid "Default wire transfer delay"
+msgstr ""
+
+#: src/paths/admin/create/index.tsx:58
+#, c-format
+msgid "could not create instance"
+msgstr ""
+
+#: src/paths/admin/list/Table.tsx:63 src/paths/admin/list/Table.tsx:131
+#: src/paths/instance/transfers/list/Table.tsx:71
+#, c-format
+msgid "Delete"
+msgstr ""
+
+#: src/paths/admin/list/Table.tsx:128
+#, c-format
+msgid "Edit"
+msgstr ""
+
+#: src/paths/admin/list/Table.tsx:149
+#: src/paths/instance/products/list/Table.tsx:245
+#, c-format
+msgid "There is no instances yet, add more pressing the + sign"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:237
+#, c-format
+msgid "Inventory products"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:286
+#, c-format
+msgid "Total price"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:287
+#, c-format
+msgid "Total tax"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:289
+#: src/paths/instance/orders/create/CreatePage.tsx:297
+#, c-format
+msgid "Order price"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:295
+#, c-format
+msgid "Net"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:300
+#: src/paths/instance/orders/details/DetailPage.tsx:144
+#: src/paths/instance/orders/details/DetailPage.tsx:295
+#: src/paths/instance/orders/list/Table.tsx:117
+#, c-format
+msgid "Summary"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:302
+#, c-format
+msgid "Payments options"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:303
+#, c-format
+msgid "Auto refund deadline"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:304
+#, c-format
+msgid "Refund deadline"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:305
+#, c-format
+msgid "Pay deadline"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:307
+#, c-format
+msgid "Delivery date"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:308
+#, c-format
+msgid "Location"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:312
+#, c-format
+msgid "Max fee"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:313
+#, c-format
+msgid "Max wire fee"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:314
+#, c-format
+msgid "Wire fee amortization"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:315
+#, c-format
+msgid "Fullfilment url"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:318
+#, c-format
+msgid "Extra information"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:44
+#, c-format
+msgid "select a product first"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:51
+#, c-format
+msgid "should be greater than 0"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:58
+#, c-format
+msgid ""
+"cannot be greater than current stock and quantity previously added. max: %1$s"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:64
+#, c-format
+msgid "cannot be greater than current stock %1$s"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:76
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:126
+#, c-format
+msgid "Quantity"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:92
+#: src/paths/instance/orders/details/DetailPage.tsx:235
+#: src/paths/instance/orders/details/DetailPage.tsx:333
+#, c-format
+msgid "Order"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:93
+#, c-format
+msgid "claimed"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:110
+#: src/paths/instance/orders/details/DetailPage.tsx:261
+#: src/paths/instance/orders/list/Table.tsx:136
+#, c-format
+msgid "copy url"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:126
+#: src/paths/instance/orders/details/DetailPage.tsx:349
+#, c-format
+msgid "pay at"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:127
+#: src/paths/instance/orders/details/DetailPage.tsx:350
+#, c-format
+msgid "created at"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:138
+#: src/paths/instance/orders/details/DetailPage.tsx:289
+#, c-format
+msgid "Timeline"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:142
+#: src/paths/instance/orders/details/DetailPage.tsx:293
+#, c-format
+msgid "Payment details"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:146
+#: src/paths/instance/orders/details/DetailPage.tsx:299
+#: src/paths/instance/orders/details/DetailPage.tsx:363
+#, c-format
+msgid "Order status"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:156
+#: src/paths/instance/orders/details/DetailPage.tsx:308
+#, c-format
+msgid "Product list"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:236
+#, c-format
+msgid "paid"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:238
+#, c-format
+msgid "wired"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:241
+#, c-format
+msgid "refunded"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:258
+#, c-format
+msgid "refund"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:297
+#, c-format
+msgid "Refunded amount"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:298
+#, c-format
+msgid "Deposit total"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:336
+#, c-format
+msgid "unpaid"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:364
+#, c-format
+msgid "Order status URL"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:365
+#, c-format
+msgid "Pay URI"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:383
+#, c-format
+msgid ""
+"Unknown order status. This is an error, please contact the administrator."
+msgstr ""
+
+#: src/paths/instance/orders/details/index.tsx:56
+#: src/paths/instance/orders/list/index.tsx:147
+#, c-format
+msgid "refund created successfully"
+msgstr ""
+
+#: src/paths/instance/orders/details/index.tsx:59
+#: src/paths/instance/orders/list/index.tsx:150
+#, c-format
+msgid "could not create the refund"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:111
+#, c-format
+msgid "load newer orders"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:115
+#, c-format
+msgid "Date"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:131
+#: src/paths/instance/orders/list/Table.tsx:223
+#, c-format
+msgid "Refund"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:145
+#, c-format
+msgid "load older orders"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:154
+#, c-format
+msgid "No orders has been found"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:202
+#, c-format
+msgid "date"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:203
+#, c-format
+msgid "amount"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:204
+#, c-format
+msgid "reason"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:224
+#, c-format
+msgid "Max refundable:"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "Reason"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "duplicated"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "requested by the customer"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "other"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:91
+#, c-format
+msgid "go to order id"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:107
+#, c-format
+msgid "Paid"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:108
+#, c-format
+msgid "Refunded"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:109
+#, c-format
+msgid "Not wired"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:110
+#, c-format
+msgid "All"
+msgstr ""
+
+#: src/paths/instance/products/create/index.tsx:48
+#: src/paths/instance/products/update/index.tsx:64
+#, c-format
+msgid "could not create product"
+msgstr ""
+
+#: src/paths/instance/products/list/Table.tsx:87
+#, c-format
+msgid "Sell"
+msgstr ""
+
+#: src/paths/instance/products/list/Table.tsx:89
+#, c-format
+msgid "Profit"
+msgstr ""
+
+#: src/paths/instance/products/list/Table.tsx:91
+#, c-format
+msgid "Sold"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:59
+#, c-format
+msgid "product updated successfully"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:62
+#, c-format
+msgid "could not update the product"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:70
+#, c-format
+msgid "product delete successfully"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:73
+#, c-format
+msgid "could not delete the product"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:59
+#, c-format
+msgid "Tips"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:111
+#, c-format
+msgid "Committed amount"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:112
+#, c-format
+msgid "Exchange initial amount"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:113
+#, c-format
+msgid "Merchant initial amount"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:148
+#, c-format
+msgid "There is no tips yet, add more pressing the + sign"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:50
+#: src/paths/instance/transfers/create/CreatePage.tsx:54
+#: src/paths/instance/transfers/create/CreatePage.tsx:55
+#: src/paths/instance/transfers/create/CreatePage.tsx:56
+#, c-format
+msgid "cannot be empty"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:51
+#, c-format
+msgid "check the id, doest look valid"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:52
+#, c-format
+msgid "should have 52 characters, current %1$s"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:57
+#, c-format
+msgid "URL doesn't have the right format"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:74
+#, c-format
+msgid "Transfer ID"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:76
+#, c-format
+msgid "Account Address"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:82
+#: src/paths/instance/transfers/list/Table.tsx:125
+#, c-format
+msgid "Exchange URL"
+msgstr ""
+
+#: src/paths/instance/transfers/create/index.tsx:49
+#, c-format
+msgid "could not inform transfer"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:118
+#, c-format
+msgid "load newer transfers"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:123
+#, c-format
+msgid "Credit"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:126
+#, c-format
+msgid "Confirmed"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:127
+#: src/paths/instance/transfers/list/index.tsx:60
+#, c-format
+msgid "Verified"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:128
+#, c-format
+msgid "Executed at"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:138
+#: src/paths/instance/transfers/list/Table.tsx:139
+#, c-format
+msgid "yes"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:138
+#: src/paths/instance/transfers/list/Table.tsx:139
+#, c-format
+msgid "no"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:140
+#, c-format
+msgid "unknown"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:145
+#, c-format
+msgid "load older transfers"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:154
+#, c-format
+msgid "There is no transfer yet, add more pressing the + sign"
+msgstr ""
diff --git a/packages/merchant-backoffice-ui/src/i18n/es.po b/packages/merchant-backoffice-ui/src/i18n/es.po
new file mode 100644
index 000000000..9075d4656
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/i18n/es.po
@@ -0,0 +1,1065 @@
+# This file is part of TALER
+# (C) 2016 GNUnet e.V.
+#
+# TALER is free software; you can redistribute it and/or modify it under the
+# terms of the GNU General Public License as published by the Free Software
+# Foundation; either version 3, or (at your option) any later version.
+#
+# TALER is distributed in the hope that it will be useful, but WITHOUT ANY
+# WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+# A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License along with
+# TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+#
+#, fuzzy
+msgid ""
+msgstr ""
+"Project-Id-Version: Taler Wallet\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2016-11-23 00:00+0100\n"
+"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
+"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
+"Language-Team: LANGUAGE <LL@li.org>\n"
+"Language: \n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+#: src/ApplicationReadyRoutes.tsx:50 src/InstanceRoutes.tsx:118
+#: src/InstanceRoutes.tsx:299
+#, c-format
+msgid "Access denied"
+msgstr "Acceso denegado"
+
+#: src/ApplicationReadyRoutes.tsx:51 src/InstanceRoutes.tsx:118
+#: src/InstanceRoutes.tsx:300
+#, c-format
+msgid "Check your token is valid"
+msgstr "Verifica que el token sea valido"
+
+#: src/ApplicationReadyRoutes.tsx:72
+#, c-format
+msgid "Couldn't access the server."
+msgstr "No se pudo acceder al servidor"
+
+#: src/ApplicationReadyRoutes.tsx:73
+#, c-format
+msgid "Could not infer instance id from url %1$s"
+msgstr "No se pudo inferir el id de la instancia con la url %1$s"
+
+#: src/InstanceRoutes.tsx:109
+#, c-format
+msgid "HTTP status #%1$s: Server reported a problem"
+msgstr "HTTP status #%1$s: Servidor reporto un problema"
+
+#: src/InstanceRoutes.tsx:110
+#, fuzzy, c-format
+msgid "Got message: \"%1$s\" from: %2$s"
+msgstr "Recivimos el mensaje %1$s desde %2$s"
+
+#: src/InstanceRoutes.tsx:127
+#, c-format
+msgid "No default instance"
+msgstr "Sin instancia default"
+
+#: src/InstanceRoutes.tsx:128
+#, c-format
+msgid ""
+"in order to use merchant backoffice, you should create the default instance"
+msgstr "para usar el merchant backoffice, debería crear la instancia default"
+
+#: src/InstanceRoutes.tsx:288
+#, c-format
+msgid "Server reported a problem: HTTP status #%1$s"
+msgstr "Servidir reporto un problema: HTTP status #%1$s"
+
+#: src/InstanceRoutes.tsx:289
+#, fuzzy, c-format
+msgid "Got message: %1$s from: %2$s"
+msgstr "Recivimos el mensaje %1$s desde %2$s"
+
+#: src/components/exception/login.tsx:46
+#, c-format
+msgid "Login required"
+msgstr "Login necesario"
+
+#: src/components/exception/login.tsx:49
+#, c-format
+msgid ""
+"Please enter your auth token. Token should have \"secret-token:\" and start "
+"with Bearer or ApiKey"
+msgstr ""
+"Por favor ingrese su token de autorización. El token debe tener \"secret-"
+"token\" y comenzar con Bearer o ApiKey"
+
+#: src/components/exception/login.tsx:86 src/components/modal/index.tsx:53
+#: src/components/modal/index.tsx:75 src/paths/admin/create/CreatePage.tsx:115
+#: src/paths/instance/orders/create/CreatePage.tsx:325
+#: src/paths/instance/products/create/CreatePage.tsx:51
+#: src/paths/instance/products/list/Table.tsx:174
+#: src/paths/instance/products/list/Table.tsx:228
+#: src/paths/instance/products/update/UpdatePage.tsx:55
+#: src/paths/instance/transfers/create/CreatePage.tsx:89
+#: src/paths/instance/update/UpdatePage.tsx:134
+#, c-format
+msgid "Confirm"
+msgstr "Confirmar"
+
+#: src/components/form/InputArray.tsx:72
+#, c-format
+msgid "The value %1$s is invalid for a payment url"
+msgstr "El valor %1$s es invalido para una URL de pago"
+
+#: src/components/form/InputDate.tsx:67
+#: src/paths/instance/orders/list/index.tsx:123
+#, c-format
+msgid "pick a date"
+msgstr "elegir una fecha"
+
+#: src/components/form/InputDate.tsx:81
+#, fuzzy, c-format
+msgid "clear"
+msgstr "Limpiar"
+
+#: src/components/form/InputDate.tsx:83
+#: src/paths/instance/transfers/list/Table.tsx:140
+#, c-format
+msgid "never"
+msgstr "nunca"
+
+#: src/components/form/InputImage.tsx:80
+#, c-format
+msgid "Image should be smaller than 1 MB"
+msgstr "La imagen debe ser mas chica que 1 MB"
+
+#: src/components/form/InputLocation.tsx:28
+#, c-format
+msgid "Country"
+msgstr "País"
+
+#: src/components/form/InputLocation.tsx:30
+#: src/paths/admin/create/CreatePage.tsx:99
+#: src/paths/instance/transfers/list/Table.tsx:124
+#: src/paths/instance/update/UpdatePage.tsx:118
+#, c-format
+msgid "Address"
+msgstr "Dirección"
+
+#: src/components/form/InputLocation.tsx:34
+#, c-format
+msgid "Building number"
+msgstr "Número de edificio"
+
+#: src/components/form/InputLocation.tsx:35
+#, c-format
+msgid "Building name"
+msgstr "Nombre de edificio"
+
+#: src/components/form/InputLocation.tsx:36
+#, c-format
+msgid "Street"
+msgstr "Calle"
+
+#: src/components/form/InputLocation.tsx:37
+#, c-format
+msgid "Post code"
+msgstr "Código postal"
+
+#: src/components/form/InputLocation.tsx:38
+#, fuzzy, c-format
+msgid "Town location"
+msgstr "Ubicación de ciudad"
+
+#: src/components/form/InputLocation.tsx:39
+#, c-format
+msgid "Town"
+msgstr "Ciudad"
+
+#: src/components/form/InputLocation.tsx:40
+#, c-format
+msgid "District"
+msgstr "Distrito"
+
+#: src/components/form/InputLocation.tsx:41
+#, c-format
+msgid "Country subdivision"
+msgstr "Provincia"
+
+#: src/components/form/InputSearchProduct.tsx:59
+#, fuzzy, c-format
+msgid "Product id"
+msgstr "Id de producto"
+
+#: src/components/form/InputSearchProduct.tsx:60
+#: src/components/product/ProductForm.tsx:99
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:122
+#: src/paths/instance/orders/list/Table.tsx:227
+#: src/paths/instance/products/list/Table.tsx:86
+#, c-format
+msgid "Description"
+msgstr "Descripcion"
+
+#: src/components/form/InputSearchProduct.tsx:73
+#: src/components/form/InputTaxes.tsx:81
+#: src/paths/admin/create/CreatePage.tsx:87 src/paths/admin/list/Table.tsx:110
+#: src/paths/instance/details/DetailPage.tsx:76
+#: src/paths/instance/update/UpdatePage.tsx:106
+#, c-format
+msgid "Name"
+msgstr "Nombre"
+
+#: src/components/form/InputSearchProduct.tsx:102
+#, c-format
+msgid "loading..."
+msgstr "Cargando..."
+
+#: src/components/form/InputSearchProduct.tsx:108
+#, c-format
+msgid "no products found"
+msgstr "No se encontraron productos"
+
+#: src/components/form/InputSearchProduct.tsx:116
+#, c-format
+msgid "no results"
+msgstr "Sin resultados"
+
+#: src/components/form/InputSecured.tsx:33
+#, c-format
+msgid "Deleting"
+msgstr "Borrando"
+
+#: src/components/form/InputSecured.tsx:34
+#, c-format
+msgid "Changing"
+msgstr "Cambiando"
+
+#: src/components/form/InputSecured.tsx:60
+#, c-format
+msgid "Manage token"
+msgstr "Administrar token"
+
+#: src/components/form/InputSecured.tsx:83
+#, c-format
+msgid "Update"
+msgstr "Actualizar"
+
+#: src/components/form/InputSecured.tsx:100
+#: src/paths/instance/orders/create/CreatePage.tsx:252
+#: src/paths/instance/orders/create/CreatePage.tsx:273
+#, c-format
+msgid "Remove"
+msgstr "Eliminar"
+
+#: src/components/form/InputSecured.tsx:106 src/components/modal/index.tsx:52
+#: src/components/modal/index.tsx:73 src/paths/admin/create/CreatePage.tsx:114
+#: src/paths/instance/orders/create/CreatePage.tsx:324
+#: src/paths/instance/products/create/CreatePage.tsx:50
+#: src/paths/instance/products/list/Table.tsx:166
+#: src/paths/instance/products/list/Table.tsx:218
+#: src/paths/instance/products/update/UpdatePage.tsx:54
+#: src/paths/instance/transfers/create/CreatePage.tsx:88
+#: src/paths/instance/update/UpdatePage.tsx:133
+#, c-format
+msgid "Cancel"
+msgstr "Cancelar"
+
+#: src/components/form/InputStock.tsx:91
+#, c-format
+msgid "Manage stock"
+msgstr "Administrar stock"
+
+#: src/components/form/InputStock.tsx:93
+#, c-format
+msgid "Infinite"
+msgstr "Inifinito"
+
+#: src/components/form/InputStock.tsx:105
+#, fuzzy, c-format
+msgid "lost cannot be greater that current + incoming (max %1$s)"
+msgstr "no puede ser mayor al stock actual %1$s"
+
+#: src/components/form/InputStock.tsx:111
+#, c-format
+msgid "current stock will change from %1$s to %2$s"
+msgstr "stock actual cambiará desde %1$s a %2$s"
+
+#: src/components/form/InputStock.tsx:112
+#, c-format
+msgid "current stock will stay at %1$s"
+msgstr "stock actual seguirá en %1$s"
+
+#: src/components/form/InputStock.tsx:129
+#: src/paths/instance/products/list/Table.tsx:204
+#, c-format
+msgid "Incoming"
+msgstr "Ingresando"
+
+#: src/components/form/InputStock.tsx:130
+#: src/paths/instance/products/list/Table.tsx:205
+#, c-format
+msgid "Lost"
+msgstr "Perdido"
+
+#: src/components/form/InputStock.tsx:142
+#, c-format
+msgid "Current"
+msgstr "Actual"
+
+#: src/components/form/InputStock.tsx:145
+#, c-format
+msgid "without stock"
+msgstr "sin stock"
+
+#: src/components/form/InputStock.tsx:150
+#, c-format
+msgid "Next restock"
+msgstr "Próximo reabastecimiento"
+
+#: src/components/form/InputStock.tsx:152
+#, c-format
+msgid "Delivery address"
+msgstr "Dirección de entrega"
+
+#: src/components/form/InputTaxes.tsx:73
+#, c-format
+msgid "this product has no taxes"
+msgstr "este producto no tiene impuestos"
+
+#: src/components/form/InputTaxes.tsx:77
+#: src/paths/instance/orders/details/DetailPage.tsx:145
+#: src/paths/instance/orders/details/DetailPage.tsx:296
+#: src/paths/instance/orders/list/Table.tsx:116
+#: src/paths/instance/transfers/create/CreatePage.tsx:84
+#, c-format
+msgid "Amount"
+msgstr "Monto"
+
+#: src/components/form/InputTaxes.tsx:78
+#, c-format
+msgid "currency and value separated with colon"
+msgstr "Moneda y valor separado por dos puntos"
+
+#: src/components/form/InputTaxes.tsx:84
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:78
+#, c-format
+msgid "Add"
+msgstr "Agregar"
+
+#: src/components/menu/SideBar.tsx:53
+#, c-format
+msgid "Instance"
+msgstr "Instancia"
+
+#: src/components/menu/SideBar.tsx:59
+#, c-format
+msgid "Settings"
+msgstr "Configuración"
+
+#: src/components/menu/SideBar.tsx:65
+#: src/paths/instance/orders/list/Table.tsx:60
+#, fuzzy, c-format
+msgid "Orders"
+msgstr "Ordenes"
+
+#: src/components/menu/SideBar.tsx:71
+#: src/paths/instance/orders/create/CreatePage.tsx:258
+#: src/paths/instance/products/list/Table.tsx:48
+#, c-format
+msgid "Products"
+msgstr "Productos"
+
+#: src/components/menu/SideBar.tsx:77
+#: src/paths/instance/transfers/list/Table.tsx:65
+#, c-format
+msgid "Transfers"
+msgstr "Transferencias"
+
+#: src/components/menu/SideBar.tsx:87
+#, fuzzy, c-format
+msgid "Connection"
+msgstr "Conexión"
+
+#: src/components/menu/SideBar.tsx:112 src/paths/admin/list/Table.tsx:57
+#, c-format
+msgid "Instances"
+msgstr "Instancias"
+
+#: src/components/menu/SideBar.tsx:116
+#, fuzzy, c-format
+msgid "New"
+msgstr "Nuevo"
+
+#: src/components/menu/SideBar.tsx:122
+#, c-format
+msgid "List"
+msgstr "Lista"
+
+#: src/components/menu/SideBar.tsx:129
+#, c-format
+msgid "Log out"
+msgstr "Salir"
+
+#: src/components/modal/index.tsx:74
+#, c-format
+msgid "Clear"
+msgstr "Limpiar"
+
+#: src/components/modal/index.tsx:110 src/components/modal/index.tsx:111
+#, c-format
+msgid "should be the same"
+msgstr "deberían ser iguales"
+
+#: src/components/modal/index.tsx:111
+#, c-format
+msgid "cannot be the same as before"
+msgstr "no puede ser igual al anterior"
+
+#: src/components/modal/index.tsx:114
+#, c-format
+msgid ""
+"You are updating the authorization token from instance %1$s with id %2$s"
+msgstr ""
+"Está actualizando el token de autorización para la instancia %1$s con id %2$s"
+
+#: src/components/modal/index.tsx:124
+#, c-format
+msgid "Old token"
+msgstr "Viejo token"
+
+#: src/components/modal/index.tsx:125
+#, c-format
+msgid "New token"
+msgstr "Nuevo token"
+
+#: src/components/modal/index.tsx:127
+#, c-format
+msgid "Clearing the auth token will mean public access to the instance"
+msgstr ""
+"Limpiar el token de autorización significa acceso publico a la instancia"
+
+#: src/components/product/ProductForm.tsx:96
+#: src/paths/admin/create/CreatePage.tsx:85 src/paths/admin/list/Table.tsx:109
+#: src/paths/instance/transfers/list/Table.tsx:122
+#, c-format
+msgid "ID"
+msgstr "ID"
+
+#: src/components/product/ProductForm.tsx:98
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:121
+#: src/paths/instance/products/list/Table.tsx:85
+#, c-format
+msgid "Image"
+msgstr "Imagen"
+
+#: src/components/product/ProductForm.tsx:100
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:123
+#, c-format
+msgid "Unit"
+msgstr "Unidad"
+
+#: src/components/product/ProductForm.tsx:101
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:124
+#: src/paths/instance/products/list/Table.tsx:162
+#: src/paths/instance/products/list/Table.tsx:214
+#, c-format
+msgid "Price"
+msgstr "Precio"
+
+#: src/components/product/ProductForm.tsx:103
+#: src/paths/instance/products/list/Table.tsx:90
+#, c-format
+msgid "Stock"
+msgstr "Stock"
+
+#: src/components/product/ProductForm.tsx:105
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:128
+#: src/paths/instance/products/list/Table.tsx:88
+#, c-format
+msgid "Taxes"
+msgstr "Impuesto"
+
+#: src/index.tsx:75
+#, c-format
+msgid "Server not found"
+msgstr "Servidor no encontrado"
+
+#: src/index.tsx:85
+#, c-format
+msgid "Couldn't access the server"
+msgstr "No se pudo aceder al servidor"
+
+#: src/index.tsx:87 src/index.tsx:99
+#, c-format
+msgid "Got message %1$s from %2$s"
+msgstr "Recivimos el mensaje %1$s desde %2$s"
+
+#: src/index.tsx:97
+#, c-format
+msgid "Unexpected Error"
+msgstr "Error inesperado"
+
+#: src/paths/admin/create/CreatePage.tsx:89
+#: src/paths/instance/update/UpdatePage.tsx:108
+#, c-format
+msgid "Auth token"
+msgstr "Token de autorización"
+
+#: src/paths/admin/create/CreatePage.tsx:91
+#: src/paths/instance/details/DetailPage.tsx:77
+#: src/paths/instance/update/UpdatePage.tsx:110
+#, c-format
+msgid "Account address"
+msgstr "Dirección de cuenta"
+
+#: src/paths/admin/create/CreatePage.tsx:93
+#: src/paths/instance/update/UpdatePage.tsx:112
+#, c-format
+msgid "Default max deposit fee"
+msgstr "Impuesto máximo de deposito por omisión"
+
+#: src/paths/admin/create/CreatePage.tsx:95
+#: src/paths/instance/update/UpdatePage.tsx:114
+#, c-format
+msgid "Default max wire fee"
+msgstr "Impuesto máximo de transferencia por omisión"
+
+#: src/paths/admin/create/CreatePage.tsx:97
+#: src/paths/instance/update/UpdatePage.tsx:116
+#, c-format
+msgid "Default wire fee amortization"
+msgstr "Amortización de impuesto de transferencia por omisión"
+
+#: src/paths/admin/create/CreatePage.tsx:103
+#: src/paths/instance/update/UpdatePage.tsx:122
+#, c-format
+msgid "Jurisdiction"
+msgstr "Jurisdicción"
+
+#: src/paths/admin/create/CreatePage.tsx:107
+#: src/paths/instance/update/UpdatePage.tsx:126
+#, c-format
+msgid "Default pay delay"
+msgstr "Retrazo de pago por omisión"
+
+#: src/paths/admin/create/CreatePage.tsx:109
+#: src/paths/instance/update/UpdatePage.tsx:128
+#, c-format
+msgid "Default wire transfer delay"
+msgstr "Retrazo de transferencia por omisión"
+
+#: src/paths/admin/create/index.tsx:58
+#, c-format
+msgid "could not create instance"
+msgstr "no se pudo crear la instancia"
+
+#: src/paths/admin/list/Table.tsx:63 src/paths/admin/list/Table.tsx:131
+#: src/paths/instance/transfers/list/Table.tsx:71
+#, fuzzy, c-format
+msgid "Delete"
+msgstr "Borrando"
+
+#: src/paths/admin/list/Table.tsx:128
+#, c-format
+msgid "Edit"
+msgstr ""
+
+#: src/paths/admin/list/Table.tsx:149
+#: src/paths/instance/products/list/Table.tsx:245
+#, c-format
+msgid "There is no instances yet, add more pressing the + sign"
+msgstr "No hay instancias todavían, agregue mas presionando el signo +"
+
+#: src/paths/instance/orders/create/CreatePage.tsx:237
+#, c-format
+msgid "Inventory products"
+msgstr "Productos de inventario"
+
+#: src/paths/instance/orders/create/CreatePage.tsx:286
+#, c-format
+msgid "Total price"
+msgstr "Precio total"
+
+#: src/paths/instance/orders/create/CreatePage.tsx:287
+#, c-format
+msgid "Total tax"
+msgstr "Impuesto total"
+
+#: src/paths/instance/orders/create/CreatePage.tsx:289
+#: src/paths/instance/orders/create/CreatePage.tsx:297
+#, c-format
+msgid "Order price"
+msgstr "Precio de la orden"
+
+#: src/paths/instance/orders/create/CreatePage.tsx:295
+#, fuzzy, c-format
+msgid "Net"
+msgstr "Neto"
+
+#: src/paths/instance/orders/create/CreatePage.tsx:300
+#: src/paths/instance/orders/details/DetailPage.tsx:144
+#: src/paths/instance/orders/details/DetailPage.tsx:295
+#: src/paths/instance/orders/list/Table.tsx:117
+#, c-format
+msgid "Summary"
+msgstr "Resumen"
+
+#: src/paths/instance/orders/create/CreatePage.tsx:302
+#, c-format
+msgid "Payments options"
+msgstr "Opciones de pago"
+
+#: src/paths/instance/orders/create/CreatePage.tsx:303
+#, c-format
+msgid "Auto refund deadline"
+msgstr "Plazo de reembolso automático"
+
+#: src/paths/instance/orders/create/CreatePage.tsx:304
+#, c-format
+msgid "Refund deadline"
+msgstr "Plazo de reembolso"
+
+#: src/paths/instance/orders/create/CreatePage.tsx:305
+#, c-format
+msgid "Pay deadline"
+msgstr "Plazo de pago"
+
+#: src/paths/instance/orders/create/CreatePage.tsx:307
+#, c-format
+msgid "Delivery date"
+msgstr "Fecha de entrega"
+
+#: src/paths/instance/orders/create/CreatePage.tsx:308
+#, fuzzy, c-format
+msgid "Location"
+msgstr "Ubicación"
+
+#: src/paths/instance/orders/create/CreatePage.tsx:312
+#, c-format
+msgid "Max fee"
+msgstr "Impuesto máximo"
+
+#: src/paths/instance/orders/create/CreatePage.tsx:313
+#, c-format
+msgid "Max wire fee"
+msgstr "Impuesto de transferencia máximo"
+
+#: src/paths/instance/orders/create/CreatePage.tsx:314
+#, c-format
+msgid "Wire fee amortization"
+msgstr "Amortización de impuesto de transferencia"
+
+#: src/paths/instance/orders/create/CreatePage.tsx:315
+#, c-format
+msgid "Fullfilment url"
+msgstr "URL de completitud"
+
+#: src/paths/instance/orders/create/CreatePage.tsx:318
+#, c-format
+msgid "Extra information"
+msgstr "Información extra"
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:44
+#, c-format
+msgid "select a product first"
+msgstr "seleccione un producto primero"
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:51
+#, fuzzy, c-format
+msgid "should be greater than 0"
+msgstr "La imagen debe ser mas chica que 1 MB"
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:58
+#, c-format
+msgid ""
+"cannot be greater than current stock and quantity previously added. max: %1$s"
+msgstr ""
+"no puede ser mayor al stock actual y la cantidad previamente agregada. "
+"máximo: %1$s"
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:64
+#, c-format
+msgid "cannot be greater than current stock %1$s"
+msgstr "no puede ser mayor al stock actual %1$s"
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:76
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:126
+#, c-format
+msgid "Quantity"
+msgstr "Cantidad"
+
+#: src/paths/instance/orders/details/DetailPage.tsx:92
+#: src/paths/instance/orders/details/DetailPage.tsx:235
+#: src/paths/instance/orders/details/DetailPage.tsx:333
+#, c-format
+msgid "Order"
+msgstr "Orden"
+
+#: src/paths/instance/orders/details/DetailPage.tsx:93
+#, c-format
+msgid "claimed"
+msgstr "reclamado"
+
+#: src/paths/instance/orders/details/DetailPage.tsx:110
+#: src/paths/instance/orders/details/DetailPage.tsx:261
+#: src/paths/instance/orders/list/Table.tsx:136
+#, c-format
+msgid "copy url"
+msgstr "copiar url"
+
+#: src/paths/instance/orders/details/DetailPage.tsx:126
+#: src/paths/instance/orders/details/DetailPage.tsx:349
+#, c-format
+msgid "pay at"
+msgstr "pagar en"
+
+#: src/paths/instance/orders/details/DetailPage.tsx:127
+#: src/paths/instance/orders/details/DetailPage.tsx:350
+#, c-format
+msgid "created at"
+msgstr "creado"
+
+#: src/paths/instance/orders/details/DetailPage.tsx:138
+#: src/paths/instance/orders/details/DetailPage.tsx:289
+#, c-format
+msgid "Timeline"
+msgstr "Cronología"
+
+#: src/paths/instance/orders/details/DetailPage.tsx:142
+#: src/paths/instance/orders/details/DetailPage.tsx:293
+#, c-format
+msgid "Payment details"
+msgstr "Detalles de pago"
+
+#: src/paths/instance/orders/details/DetailPage.tsx:146
+#: src/paths/instance/orders/details/DetailPage.tsx:299
+#: src/paths/instance/orders/details/DetailPage.tsx:363
+#, fuzzy, c-format
+msgid "Order status"
+msgstr "Estado de orden"
+
+#: src/paths/instance/orders/details/DetailPage.tsx:156
+#: src/paths/instance/orders/details/DetailPage.tsx:308
+#, fuzzy, c-format
+msgid "Product list"
+msgstr "Lista de producto"
+
+#: src/paths/instance/orders/details/DetailPage.tsx:236
+#, c-format
+msgid "paid"
+msgstr "pagados"
+
+#: src/paths/instance/orders/details/DetailPage.tsx:238
+#, c-format
+msgid "wired"
+msgstr "transferido"
+
+#: src/paths/instance/orders/details/DetailPage.tsx:241
+#, c-format
+msgid "refunded"
+msgstr "reembolzado"
+
+#: src/paths/instance/orders/details/DetailPage.tsx:258
+#, c-format
+msgid "refund"
+msgstr "reembolzar"
+
+#: src/paths/instance/orders/details/DetailPage.tsx:297
+#, c-format
+msgid "Refunded amount"
+msgstr "Monto reembolzado"
+
+#: src/paths/instance/orders/details/DetailPage.tsx:298
+#, c-format
+msgid "Deposit total"
+msgstr "Total depositado"
+
+#: src/paths/instance/orders/details/DetailPage.tsx:336
+#, c-format
+msgid "unpaid"
+msgstr "impago"
+
+#: src/paths/instance/orders/details/DetailPage.tsx:364
+#, c-format
+msgid "Order status URL"
+msgstr "URL de estado de orden"
+
+#: src/paths/instance/orders/details/DetailPage.tsx:365
+#, c-format
+msgid "Pay URI"
+msgstr "URI de pago"
+
+#: src/paths/instance/orders/details/DetailPage.tsx:383
+#, c-format
+msgid ""
+"Unknown order status. This is an error, please contact the administrator."
+msgstr ""
+"Estado de orden desconocido. Esto es un error, por favor contacte a su "
+"administrador"
+
+#: src/paths/instance/orders/details/index.tsx:56
+#: src/paths/instance/orders/list/index.tsx:147
+#, c-format
+msgid "refund created successfully"
+msgstr "reembolzo creado satisfactoriamente"
+
+#: src/paths/instance/orders/details/index.tsx:59
+#: src/paths/instance/orders/list/index.tsx:150
+#, fuzzy, c-format
+msgid "could not create the refund"
+msgstr "No se pudo aceder al servidor"
+
+#: src/paths/instance/orders/list/Table.tsx:111
+#, c-format
+msgid "load newer orders"
+msgstr "cargar nuevas ordenes"
+
+#: src/paths/instance/orders/list/Table.tsx:115
+#, c-format
+msgid "Date"
+msgstr "Fecha"
+
+#: src/paths/instance/orders/list/Table.tsx:131
+#: src/paths/instance/orders/list/Table.tsx:223
+#, c-format
+msgid "Refund"
+msgstr "Reembolzar"
+
+#: src/paths/instance/orders/list/Table.tsx:145
+#, c-format
+msgid "load older orders"
+msgstr "cargar viejas ordenes"
+
+#: src/paths/instance/orders/list/Table.tsx:154
+#, c-format
+msgid "No orders has been found"
+msgstr "No se enconraron ordenes"
+
+#: src/paths/instance/orders/list/Table.tsx:202
+#, c-format
+msgid "date"
+msgstr "fecha"
+
+#: src/paths/instance/orders/list/Table.tsx:203
+#, c-format
+msgid "amount"
+msgstr "monto"
+
+#: src/paths/instance/orders/list/Table.tsx:204
+#, c-format
+msgid "reason"
+msgstr "razón"
+
+#: src/paths/instance/orders/list/Table.tsx:224
+#, c-format
+msgid "Max refundable:"
+msgstr "Máximo reembolzable:"
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "Reason"
+msgstr "Razón"
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "duplicated"
+msgstr "duplicado"
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "requested by the customer"
+msgstr "pedido por el consumidor"
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "other"
+msgstr "otro"
+
+#: src/paths/instance/orders/list/index.tsx:91
+#, c-format
+msgid "go to order id"
+msgstr "ir a id de orden"
+
+#: src/paths/instance/orders/list/index.tsx:107
+#, c-format
+msgid "Paid"
+msgstr "Pagado"
+
+#: src/paths/instance/orders/list/index.tsx:108
+#, fuzzy, c-format
+msgid "Refunded"
+msgstr "Reembolzado"
+
+#: src/paths/instance/orders/list/index.tsx:109
+#, fuzzy, c-format
+msgid "Not wired"
+msgstr "No transferido"
+
+#: src/paths/instance/orders/list/index.tsx:110
+#, c-format
+msgid "All"
+msgstr "Todo"
+
+#: src/paths/instance/products/create/index.tsx:48
+#: src/paths/instance/products/update/index.tsx:64
+#, c-format
+msgid "could not create product"
+msgstr "no se pudo crear el producto"
+
+#: src/paths/instance/products/list/Table.tsx:87
+#, c-format
+msgid "Sell"
+msgstr "Venta"
+
+#: src/paths/instance/products/list/Table.tsx:89
+#, c-format
+msgid "Profit"
+msgstr "Ganancia"
+
+#: src/paths/instance/products/list/Table.tsx:91
+#, c-format
+msgid "Sold"
+msgstr "Vendido"
+
+#: src/paths/instance/products/list/index.tsx:59
+#, c-format
+msgid "product updated successfully"
+msgstr "producto actualizado correctamente"
+
+#: src/paths/instance/products/list/index.tsx:62
+#, c-format
+msgid "could not update the product"
+msgstr "no se pudo actualizar el producto"
+
+#: src/paths/instance/products/list/index.tsx:70
+#, c-format
+msgid "product delete successfully"
+msgstr "producto fue eliminado correctamente"
+
+#: src/paths/instance/products/list/index.tsx:73
+#, c-format
+msgid "could not delete the product"
+msgstr "no se pudo eliminar el producto"
+
+#: src/paths/instance/tips/list/Table.tsx:59
+#, c-format
+msgid "Tips"
+msgstr "Propinas"
+
+#: src/paths/instance/tips/list/Table.tsx:111
+#, c-format
+msgid "Committed amount"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:112
+#, c-format
+msgid "Exchange initial amount"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:113
+#, c-format
+msgid "Merchant initial amount"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:148
+#, c-format
+msgid "There is no tips yet, add more pressing the + sign"
+msgstr "No hay propinas todavía, agregar mas presionando el signo +"
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:50
+#: src/paths/instance/transfers/create/CreatePage.tsx:54
+#: src/paths/instance/transfers/create/CreatePage.tsx:55
+#: src/paths/instance/transfers/create/CreatePage.tsx:56
+#, c-format
+msgid "cannot be empty"
+msgstr "no puede ser vacío"
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:51
+#, c-format
+msgid "check the id, doest look valid"
+msgstr "verificar el id, no parece válido"
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:52
+#, c-format
+msgid "should have 52 characters, current %1$s"
+msgstr "debería tener 52 caracteres, actualmente %1$s"
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:57
+#, c-format
+msgid "URL doesn't have the right format"
+msgstr "La URL no tiene el formato correcto"
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:74
+#, fuzzy, c-format
+msgid "Transfer ID"
+msgstr "Transferencias"
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:76
+#, fuzzy, c-format
+msgid "Account Address"
+msgstr "Dirección de cuenta"
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:82
+#: src/paths/instance/transfers/list/Table.tsx:125
+#, c-format
+msgid "Exchange URL"
+msgstr "URL del Exchange"
+
+#: src/paths/instance/transfers/create/index.tsx:49
+#, fuzzy, c-format
+msgid "could not inform transfer"
+msgstr "no se pudo crear la instancia"
+
+#: src/paths/instance/transfers/list/Table.tsx:118
+#, fuzzy, c-format
+msgid "load newer transfers"
+msgstr "cargar nuevas ordenes"
+
+#: src/paths/instance/transfers/list/Table.tsx:123
+#, c-format
+msgid "Credit"
+msgstr "Crédito"
+
+#: src/paths/instance/transfers/list/Table.tsx:126
+#, fuzzy, c-format
+msgid "Confirmed"
+msgstr "Confirmar"
+
+#: src/paths/instance/transfers/list/Table.tsx:127
+#: src/paths/instance/transfers/list/index.tsx:60
+#, c-format
+msgid "Verified"
+msgstr "Verificado"
+
+#: src/paths/instance/transfers/list/Table.tsx:128
+#, fuzzy, c-format
+msgid "Executed at"
+msgstr "creado"
+
+#: src/paths/instance/transfers/list/Table.tsx:138
+#: src/paths/instance/transfers/list/Table.tsx:139
+#, c-format
+msgid "yes"
+msgstr "si"
+
+#: src/paths/instance/transfers/list/Table.tsx:138
+#: src/paths/instance/transfers/list/Table.tsx:139
+#, c-format
+msgid "no"
+msgstr "no"
+
+#: src/paths/instance/transfers/list/Table.tsx:140
+#, c-format
+msgid "unknown"
+msgstr "desconocido"
+
+#: src/paths/instance/transfers/list/Table.tsx:145
+#, fuzzy, c-format
+msgid "load older transfers"
+msgstr "cargar viejas transferencias"
+
+#: src/paths/instance/transfers/list/Table.tsx:154
+#, c-format
+msgid "There is no transfer yet, add more pressing the + sign"
+msgstr "No hay transferencias todavía, agregar mas presionando el signo +"
diff --git a/packages/merchant-backoffice-ui/src/i18n/fr.po b/packages/merchant-backoffice-ui/src/i18n/fr.po
new file mode 100644
index 000000000..6b35bd0ce
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/i18n/fr.po
@@ -0,0 +1,1057 @@
+# This file is part of TALER
+# (C) 2016 GNUnet e.V.
+#
+# TALER is free software; you can redistribute it and/or modify it under the
+# terms of the GNU General Public License as published by the Free Software
+# Foundation; either version 3, or (at your option) any later version.
+#
+# TALER is distributed in the hope that it will be useful, but WITHOUT ANY
+# WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+# A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License along with
+# TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+#
+#, fuzzy
+msgid ""
+msgstr ""
+"Project-Id-Version: Taler Wallet\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2016-11-23 00:00+0100\n"
+"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
+"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
+"Language-Team: LANGUAGE <LL@li.org>\n"
+"Language: \n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+#: src/ApplicationReadyRoutes.tsx:50 src/InstanceRoutes.tsx:118
+#: src/InstanceRoutes.tsx:299
+#, c-format
+msgid "Access denied"
+msgstr ""
+
+#: src/ApplicationReadyRoutes.tsx:51 src/InstanceRoutes.tsx:118
+#: src/InstanceRoutes.tsx:300
+#, c-format
+msgid "Check your token is valid"
+msgstr ""
+
+#: src/ApplicationReadyRoutes.tsx:72
+#, c-format
+msgid "Couldn't access the server."
+msgstr ""
+
+#: src/ApplicationReadyRoutes.tsx:73
+#, c-format
+msgid "Could not infer instance id from url %1$s"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:109
+#, c-format
+msgid "HTTP status #%1$s: Server reported a problem"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:110
+#, c-format
+msgid "Got message: \"%1$s\" from: %2$s"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:127
+#, c-format
+msgid "No default instance"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:128
+#, c-format
+msgid ""
+"in order to use merchant backoffice, you should create the default instance"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:288
+#, c-format
+msgid "Server reported a problem: HTTP status #%1$s"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:289
+#, c-format
+msgid "Got message: %1$s from: %2$s"
+msgstr ""
+
+#: src/components/exception/login.tsx:46
+#, c-format
+msgid "Login required"
+msgstr ""
+
+#: src/components/exception/login.tsx:49
+#, c-format
+msgid ""
+"Please enter your auth token. Token should have \"secret-token:\" and start "
+"with Bearer or ApiKey"
+msgstr ""
+
+#: src/components/exception/login.tsx:86 src/components/modal/index.tsx:53
+#: src/components/modal/index.tsx:75 src/paths/admin/create/CreatePage.tsx:115
+#: src/paths/instance/orders/create/CreatePage.tsx:325
+#: src/paths/instance/products/create/CreatePage.tsx:51
+#: src/paths/instance/products/list/Table.tsx:174
+#: src/paths/instance/products/list/Table.tsx:228
+#: src/paths/instance/products/update/UpdatePage.tsx:55
+#: src/paths/instance/transfers/create/CreatePage.tsx:89
+#: src/paths/instance/update/UpdatePage.tsx:134
+#, c-format
+msgid "Confirm"
+msgstr ""
+
+#: src/components/form/InputArray.tsx:72
+#, c-format
+msgid "The value %1$s is invalid for a payment url"
+msgstr ""
+
+#: src/components/form/InputDate.tsx:67
+#: src/paths/instance/orders/list/index.tsx:123
+#, c-format
+msgid "pick a date"
+msgstr ""
+
+#: src/components/form/InputDate.tsx:81
+#, c-format
+msgid "clear"
+msgstr ""
+
+#: src/components/form/InputDate.tsx:83
+#: src/paths/instance/transfers/list/Table.tsx:140
+#, c-format
+msgid "never"
+msgstr ""
+
+#: src/components/form/InputImage.tsx:80
+#, c-format
+msgid "Image should be smaller than 1 MB"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:28
+#, c-format
+msgid "Country"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:30
+#: src/paths/admin/create/CreatePage.tsx:99
+#: src/paths/instance/transfers/list/Table.tsx:124
+#: src/paths/instance/update/UpdatePage.tsx:118
+#, c-format
+msgid "Address"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:34
+#, c-format
+msgid "Building number"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:35
+#, c-format
+msgid "Building name"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:36
+#, c-format
+msgid "Street"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:37
+#, c-format
+msgid "Post code"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:38
+#, c-format
+msgid "Town location"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:39
+#, c-format
+msgid "Town"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:40
+#, c-format
+msgid "District"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:41
+#, c-format
+msgid "Country subdivision"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:59
+#, c-format
+msgid "Product id"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:60
+#: src/components/product/ProductForm.tsx:99
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:122
+#: src/paths/instance/orders/list/Table.tsx:227
+#: src/paths/instance/products/list/Table.tsx:86
+#, c-format
+msgid "Description"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:73
+#: src/components/form/InputTaxes.tsx:81
+#: src/paths/admin/create/CreatePage.tsx:87 src/paths/admin/list/Table.tsx:110
+#: src/paths/instance/details/DetailPage.tsx:76
+#: src/paths/instance/update/UpdatePage.tsx:106
+#, c-format
+msgid "Name"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:102
+#, c-format
+msgid "loading..."
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:108
+#, c-format
+msgid "no products found"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:116
+#, c-format
+msgid "no results"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:33
+#, c-format
+msgid "Deleting"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:34
+#, c-format
+msgid "Changing"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:60
+#, c-format
+msgid "Manage token"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:83
+#, c-format
+msgid "Update"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:100
+#: src/paths/instance/orders/create/CreatePage.tsx:252
+#: src/paths/instance/orders/create/CreatePage.tsx:273
+#, c-format
+msgid "Remove"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:106 src/components/modal/index.tsx:52
+#: src/components/modal/index.tsx:73 src/paths/admin/create/CreatePage.tsx:114
+#: src/paths/instance/orders/create/CreatePage.tsx:324
+#: src/paths/instance/products/create/CreatePage.tsx:50
+#: src/paths/instance/products/list/Table.tsx:166
+#: src/paths/instance/products/list/Table.tsx:218
+#: src/paths/instance/products/update/UpdatePage.tsx:54
+#: src/paths/instance/transfers/create/CreatePage.tsx:88
+#: src/paths/instance/update/UpdatePage.tsx:133
+#, c-format
+msgid "Cancel"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:91
+#, c-format
+msgid "Manage stock"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:93
+#, c-format
+msgid "Infinite"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:105
+#, c-format
+msgid "lost cannot be greater that current + incoming (max %1$s)"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:111
+#, c-format
+msgid "current stock will change from %1$s to %2$s"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:112
+#, c-format
+msgid "current stock will stay at %1$s"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:129
+#: src/paths/instance/products/list/Table.tsx:204
+#, c-format
+msgid "Incoming"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:130
+#: src/paths/instance/products/list/Table.tsx:205
+#, c-format
+msgid "Lost"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:142
+#, c-format
+msgid "Current"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:145
+#, c-format
+msgid "without stock"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:150
+#, c-format
+msgid "Next restock"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:152
+#, c-format
+msgid "Delivery address"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:73
+#, c-format
+msgid "this product has no taxes"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:77
+#: src/paths/instance/orders/details/DetailPage.tsx:145
+#: src/paths/instance/orders/details/DetailPage.tsx:296
+#: src/paths/instance/orders/list/Table.tsx:116
+#: src/paths/instance/transfers/create/CreatePage.tsx:84
+#, c-format
+msgid "Amount"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:78
+#, c-format
+msgid "currency and value separated with colon"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:84
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:78
+#, c-format
+msgid "Add"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:53
+#, c-format
+msgid "Instance"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:59
+#, c-format
+msgid "Settings"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:65
+#: src/paths/instance/orders/list/Table.tsx:60
+#, c-format
+msgid "Orders"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:71
+#: src/paths/instance/orders/create/CreatePage.tsx:258
+#: src/paths/instance/products/list/Table.tsx:48
+#, c-format
+msgid "Products"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:77
+#: src/paths/instance/transfers/list/Table.tsx:65
+#, c-format
+msgid "Transfers"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:87
+#, c-format
+msgid "Connection"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:112 src/paths/admin/list/Table.tsx:57
+#, c-format
+msgid "Instances"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:116
+#, c-format
+msgid "New"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:122
+#, c-format
+msgid "List"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:129
+#, c-format
+msgid "Log out"
+msgstr ""
+
+#: src/components/modal/index.tsx:74
+#, c-format
+msgid "Clear"
+msgstr ""
+
+#: src/components/modal/index.tsx:110 src/components/modal/index.tsx:111
+#, c-format
+msgid "should be the same"
+msgstr ""
+
+#: src/components/modal/index.tsx:111
+#, c-format
+msgid "cannot be the same as before"
+msgstr ""
+
+#: src/components/modal/index.tsx:114
+#, c-format
+msgid ""
+"You are updating the authorization token from instance %1$s with id %2$s"
+msgstr ""
+
+#: src/components/modal/index.tsx:124
+#, c-format
+msgid "Old token"
+msgstr ""
+
+#: src/components/modal/index.tsx:125
+#, c-format
+msgid "New token"
+msgstr ""
+
+#: src/components/modal/index.tsx:127
+#, c-format
+msgid "Clearing the auth token will mean public access to the instance"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:96
+#: src/paths/admin/create/CreatePage.tsx:85 src/paths/admin/list/Table.tsx:109
+#: src/paths/instance/transfers/list/Table.tsx:122
+#, c-format
+msgid "ID"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:98
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:121
+#: src/paths/instance/products/list/Table.tsx:85
+#, c-format
+msgid "Image"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:100
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:123
+#, c-format
+msgid "Unit"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:101
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:124
+#: src/paths/instance/products/list/Table.tsx:162
+#: src/paths/instance/products/list/Table.tsx:214
+#, c-format
+msgid "Price"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:103
+#: src/paths/instance/products/list/Table.tsx:90
+#, c-format
+msgid "Stock"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:105
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:128
+#: src/paths/instance/products/list/Table.tsx:88
+#, c-format
+msgid "Taxes"
+msgstr ""
+
+#: src/index.tsx:75
+#, c-format
+msgid "Server not found"
+msgstr ""
+
+#: src/index.tsx:85
+#, c-format
+msgid "Couldn't access the server"
+msgstr ""
+
+#: src/index.tsx:87 src/index.tsx:99
+#, c-format
+msgid "Got message %1$s from %2$s"
+msgstr ""
+
+#: src/index.tsx:97
+#, c-format
+msgid "Unexpected Error"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:89
+#: src/paths/instance/update/UpdatePage.tsx:108
+#, c-format
+msgid "Auth token"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:91
+#: src/paths/instance/details/DetailPage.tsx:77
+#: src/paths/instance/update/UpdatePage.tsx:110
+#, c-format
+msgid "Account address"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:93
+#: src/paths/instance/update/UpdatePage.tsx:112
+#, c-format
+msgid "Default max deposit fee"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:95
+#: src/paths/instance/update/UpdatePage.tsx:114
+#, c-format
+msgid "Default max wire fee"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:97
+#: src/paths/instance/update/UpdatePage.tsx:116
+#, c-format
+msgid "Default wire fee amortization"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:103
+#: src/paths/instance/update/UpdatePage.tsx:122
+#, c-format
+msgid "Jurisdiction"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:107
+#: src/paths/instance/update/UpdatePage.tsx:126
+#, c-format
+msgid "Default pay delay"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:109
+#: src/paths/instance/update/UpdatePage.tsx:128
+#, c-format
+msgid "Default wire transfer delay"
+msgstr ""
+
+#: src/paths/admin/create/index.tsx:58
+#, c-format
+msgid "could not create instance"
+msgstr ""
+
+#: src/paths/admin/list/Table.tsx:63 src/paths/admin/list/Table.tsx:131
+#: src/paths/instance/transfers/list/Table.tsx:71
+#, c-format
+msgid "Delete"
+msgstr ""
+
+#: src/paths/admin/list/Table.tsx:128
+#, c-format
+msgid "Edit"
+msgstr ""
+
+#: src/paths/admin/list/Table.tsx:149
+#: src/paths/instance/products/list/Table.tsx:245
+#, c-format
+msgid "There is no instances yet, add more pressing the + sign"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:237
+#, c-format
+msgid "Inventory products"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:286
+#, c-format
+msgid "Total price"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:287
+#, c-format
+msgid "Total tax"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:289
+#: src/paths/instance/orders/create/CreatePage.tsx:297
+#, c-format
+msgid "Order price"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:295
+#, c-format
+msgid "Net"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:300
+#: src/paths/instance/orders/details/DetailPage.tsx:144
+#: src/paths/instance/orders/details/DetailPage.tsx:295
+#: src/paths/instance/orders/list/Table.tsx:117
+#, c-format
+msgid "Summary"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:302
+#, c-format
+msgid "Payments options"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:303
+#, c-format
+msgid "Auto refund deadline"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:304
+#, c-format
+msgid "Refund deadline"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:305
+#, c-format
+msgid "Pay deadline"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:307
+#, c-format
+msgid "Delivery date"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:308
+#, c-format
+msgid "Location"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:312
+#, c-format
+msgid "Max fee"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:313
+#, c-format
+msgid "Max wire fee"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:314
+#, c-format
+msgid "Wire fee amortization"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:315
+#, c-format
+msgid "Fullfilment url"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:318
+#, c-format
+msgid "Extra information"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:44
+#, c-format
+msgid "select a product first"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:51
+#, c-format
+msgid "should be greater than 0"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:58
+#, c-format
+msgid ""
+"cannot be greater than current stock and quantity previously added. max: %1$s"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:64
+#, c-format
+msgid "cannot be greater than current stock %1$s"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:76
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:126
+#, c-format
+msgid "Quantity"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:92
+#: src/paths/instance/orders/details/DetailPage.tsx:235
+#: src/paths/instance/orders/details/DetailPage.tsx:333
+#, c-format
+msgid "Order"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:93
+#, c-format
+msgid "claimed"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:110
+#: src/paths/instance/orders/details/DetailPage.tsx:261
+#: src/paths/instance/orders/list/Table.tsx:136
+#, c-format
+msgid "copy url"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:126
+#: src/paths/instance/orders/details/DetailPage.tsx:349
+#, c-format
+msgid "pay at"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:127
+#: src/paths/instance/orders/details/DetailPage.tsx:350
+#, c-format
+msgid "created at"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:138
+#: src/paths/instance/orders/details/DetailPage.tsx:289
+#, c-format
+msgid "Timeline"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:142
+#: src/paths/instance/orders/details/DetailPage.tsx:293
+#, c-format
+msgid "Payment details"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:146
+#: src/paths/instance/orders/details/DetailPage.tsx:299
+#: src/paths/instance/orders/details/DetailPage.tsx:363
+#, c-format
+msgid "Order status"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:156
+#: src/paths/instance/orders/details/DetailPage.tsx:308
+#, c-format
+msgid "Product list"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:236
+#, c-format
+msgid "paid"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:238
+#, c-format
+msgid "wired"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:241
+#, c-format
+msgid "refunded"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:258
+#, c-format
+msgid "refund"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:297
+#, c-format
+msgid "Refunded amount"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:298
+#, c-format
+msgid "Deposit total"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:336
+#, c-format
+msgid "unpaid"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:364
+#, c-format
+msgid "Order status URL"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:365
+#, c-format
+msgid "Pay URI"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:383
+#, c-format
+msgid ""
+"Unknown order status. This is an error, please contact the administrator."
+msgstr ""
+
+#: src/paths/instance/orders/details/index.tsx:56
+#: src/paths/instance/orders/list/index.tsx:147
+#, c-format
+msgid "refund created successfully"
+msgstr ""
+
+#: src/paths/instance/orders/details/index.tsx:59
+#: src/paths/instance/orders/list/index.tsx:150
+#, c-format
+msgid "could not create the refund"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:111
+#, c-format
+msgid "load newer orders"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:115
+#, c-format
+msgid "Date"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:131
+#: src/paths/instance/orders/list/Table.tsx:223
+#, c-format
+msgid "Refund"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:145
+#, c-format
+msgid "load older orders"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:154
+#, c-format
+msgid "No orders has been found"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:202
+#, c-format
+msgid "date"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:203
+#, c-format
+msgid "amount"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:204
+#, c-format
+msgid "reason"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:224
+#, c-format
+msgid "Max refundable:"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "Reason"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "duplicated"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "requested by the customer"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "other"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:91
+#, c-format
+msgid "go to order id"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:107
+#, c-format
+msgid "Paid"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:108
+#, c-format
+msgid "Refunded"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:109
+#, c-format
+msgid "Not wired"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:110
+#, c-format
+msgid "All"
+msgstr ""
+
+#: src/paths/instance/products/create/index.tsx:48
+#: src/paths/instance/products/update/index.tsx:64
+#, c-format
+msgid "could not create product"
+msgstr ""
+
+#: src/paths/instance/products/list/Table.tsx:87
+#, c-format
+msgid "Sell"
+msgstr ""
+
+#: src/paths/instance/products/list/Table.tsx:89
+#, c-format
+msgid "Profit"
+msgstr ""
+
+#: src/paths/instance/products/list/Table.tsx:91
+#, c-format
+msgid "Sold"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:59
+#, c-format
+msgid "product updated successfully"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:62
+#, c-format
+msgid "could not update the product"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:70
+#, c-format
+msgid "product delete successfully"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:73
+#, c-format
+msgid "could not delete the product"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:59
+#, c-format
+msgid "Tips"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:111
+#, c-format
+msgid "Committed amount"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:112
+#, c-format
+msgid "Exchange initial amount"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:113
+#, c-format
+msgid "Merchant initial amount"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:148
+#, c-format
+msgid "There is no tips yet, add more pressing the + sign"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:50
+#: src/paths/instance/transfers/create/CreatePage.tsx:54
+#: src/paths/instance/transfers/create/CreatePage.tsx:55
+#: src/paths/instance/transfers/create/CreatePage.tsx:56
+#, c-format
+msgid "cannot be empty"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:51
+#, c-format
+msgid "check the id, doest look valid"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:52
+#, c-format
+msgid "should have 52 characters, current %1$s"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:57
+#, c-format
+msgid "URL doesn't have the right format"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:74
+#, c-format
+msgid "Transfer ID"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:76
+#, c-format
+msgid "Account Address"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:82
+#: src/paths/instance/transfers/list/Table.tsx:125
+#, c-format
+msgid "Exchange URL"
+msgstr ""
+
+#: src/paths/instance/transfers/create/index.tsx:49
+#, c-format
+msgid "could not inform transfer"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:118
+#, c-format
+msgid "load newer transfers"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:123
+#, c-format
+msgid "Credit"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:126
+#, c-format
+msgid "Confirmed"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:127
+#: src/paths/instance/transfers/list/index.tsx:60
+#, c-format
+msgid "Verified"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:128
+#, c-format
+msgid "Executed at"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:138
+#: src/paths/instance/transfers/list/Table.tsx:139
+#, c-format
+msgid "yes"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:138
+#: src/paths/instance/transfers/list/Table.tsx:139
+#, c-format
+msgid "no"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:140
+#, c-format
+msgid "unknown"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:145
+#, c-format
+msgid "load older transfers"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:154
+#, c-format
+msgid "There is no transfer yet, add more pressing the + sign"
+msgstr ""
diff --git a/packages/merchant-backoffice-ui/src/i18n/index.tsx b/packages/merchant-backoffice-ui/src/i18n/index.tsx
new file mode 100644
index 000000000..9403de1f5
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/i18n/index.tsx
@@ -0,0 +1,215 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ * Translation helpers for React components and template literals.
+ */
+
+/**
+ * Imports
+ */
+import { ComponentChild, ComponentChildren, h, Fragment, VNode } from "preact";
+
+import { useTranslationContext } from "../context/translation";
+
+export type Translator = (
+  stringSeq: TemplateStringsArray,
+  ...values: any[]
+) => string;
+export function useTranslator(): Translator {
+  const ctx = useTranslationContext();
+  const jed = ctx.handler;
+  return function str(
+    stringSeq: TemplateStringsArray,
+    ...values: any[]
+  ): string {
+    const s = toI18nString(stringSeq);
+    if (!s) return s;
+    const tr = jed
+      .translate(s)
+      .ifPlural(1, s)
+      .fetch(...values);
+    return tr;
+  };
+}
+
+/**
+ * Convert template strings to a msgid
+ */
+function toI18nString(stringSeq: ReadonlyArray<string>): string {
+  let s = "";
+  for (let i = 0; i < stringSeq.length; i++) {
+    s += stringSeq[i];
+    if (i < stringSeq.length - 1) {
+      s += `%${i + 1}$s`;
+    }
+  }
+  return s;
+}
+
+interface TranslateSwitchProps {
+  target: number;
+  children: ComponentChildren;
+}
+
+function stringifyChildren(children: ComponentChildren): string {
+  let n = 1;
+  const ss = (children instanceof Array ? children : [children]).map((c) => {
+    if (typeof c === "string") {
+      return c;
+    }
+    return `%${n++}$s`;
+  });
+  const s = ss.join("").replace(/ +/g, " ").trim();
+  return s;
+}
+
+interface TranslateProps {
+  children: ComponentChildren;
+  /**
+   * Component that the translated element should be wrapped in.
+   * Defaults to "div".
+   */
+  wrap?: any;
+
+  /**
+   * Props to give to the wrapped component.
+   */
+  wrapProps?: any;
+}
+
+function getTranslatedChildren(
+  translation: string,
+  children: ComponentChildren
+): ComponentChild[] {
+  const tr = translation.split(/%(\d+)\$s/);
+  const childArray = children instanceof Array ? children : [children];
+  // Merge consecutive string children.
+  const placeholderChildren = Array<ComponentChild>();
+  for (let i = 0; i < childArray.length; i++) {
+    const x = childArray[i];
+    if (x === undefined) {
+      continue;
+    } else if (typeof x === "string") {
+      continue;
+    } else {
+      placeholderChildren.push(x);
+    }
+  }
+  const result = Array<ComponentChild>();
+  for (let i = 0; i < tr.length; i++) {
+    if (i % 2 == 0) {
+      // Text
+      result.push(tr[i]);
+    } else {
+      const childIdx = Number.parseInt(tr[i], 10) - 1;
+      result.push(placeholderChildren[childIdx]);
+    }
+  }
+  return result;
+}
+
+/**
+ * Translate text node children of this component.
+ * If a child component might produce a text node, it must be wrapped
+ * in a another non-text element.
+ *
+ * Example:
+ * ```
+ * <Translate>
+ * Hello.  Your score is <span><PlayerScore player={player} /></span>
+ * </Translate>
+ * ```
+ */
+export function Translate({ children }: TranslateProps): VNode {
+  const s = stringifyChildren(children);
+  const ctx = useTranslationContext();
+  const translation: string = ctx.handler.ngettext(s, s, 1);
+  const result = getTranslatedChildren(translation, children);
+  return <Fragment>{result}</Fragment>;
+}
+
+/**
+ * Switch translation based on singular or plural based on the target prop.
+ * Should only contain TranslateSingular and TransplatePlural as children.
+ *
+ * Example:
+ * ```
+ * <TranslateSwitch target={n}>
+ *  <TranslateSingular>I have {n} apple.</TranslateSingular>
+ *  <TranslatePlural>I have {n} apples.</TranslatePlural>
+ * </TranslateSwitch>
+ * ```
+ */
+export function TranslateSwitch({ children, target }: TranslateSwitchProps) {
+  let singular: VNode<TranslationPluralProps> | undefined;
+  let plural: VNode<TranslationPluralProps> | undefined;
+  // const children = this.props.children;
+  if (children) {
+    (children instanceof Array ? children : [children]).forEach(
+      (child: any) => {
+        if (child.type === TranslatePlural) {
+          plural = child;
+        }
+        if (child.type === TranslateSingular) {
+          singular = child;
+        }
+      }
+    );
+  }
+  if (!singular || !plural) {
+    console.error("translation not found");
+    return h("span", {}, ["translation not found"]);
+  }
+  singular.props.target = target;
+  plural.props.target = target;
+  // We're looking up the translation based on the
+  // singular, even if we must use the plural form.
+  return singular;
+}
+
+interface TranslationPluralProps {
+  children: ComponentChildren;
+  target: number;
+}
+
+/**
+ * See [[TranslateSwitch]].
+ */
+export function TranslatePlural({
+  children,
+  target,
+}: TranslationPluralProps): VNode {
+  const s = stringifyChildren(children);
+  const ctx = useTranslationContext();
+  const translation = ctx.handler.ngettext(s, s, 1);
+  const result = getTranslatedChildren(translation, children);
+  return <Fragment>{result}</Fragment>;
+}
+
+/**
+ * See [[TranslateSwitch]].
+ */
+export function TranslateSingular({
+  children,
+  target,
+}: TranslationPluralProps): VNode {
+  const s = stringifyChildren(children);
+  const ctx = useTranslationContext();
+  const translation = ctx.handler.ngettext(s, s, target);
+  const result = getTranslatedChildren(translation, children);
+  return <Fragment>{result}</Fragment>;
+}
diff --git a/packages/merchant-backoffice-ui/src/i18n/it.po b/packages/merchant-backoffice-ui/src/i18n/it.po
new file mode 100644
index 000000000..6b35bd0ce
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/i18n/it.po
@@ -0,0 +1,1057 @@
+# This file is part of TALER
+# (C) 2016 GNUnet e.V.
+#
+# TALER is free software; you can redistribute it and/or modify it under the
+# terms of the GNU General Public License as published by the Free Software
+# Foundation; either version 3, or (at your option) any later version.
+#
+# TALER is distributed in the hope that it will be useful, but WITHOUT ANY
+# WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+# A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License along with
+# TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+#
+#, fuzzy
+msgid ""
+msgstr ""
+"Project-Id-Version: Taler Wallet\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2016-11-23 00:00+0100\n"
+"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
+"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
+"Language-Team: LANGUAGE <LL@li.org>\n"
+"Language: \n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+#: src/ApplicationReadyRoutes.tsx:50 src/InstanceRoutes.tsx:118
+#: src/InstanceRoutes.tsx:299
+#, c-format
+msgid "Access denied"
+msgstr ""
+
+#: src/ApplicationReadyRoutes.tsx:51 src/InstanceRoutes.tsx:118
+#: src/InstanceRoutes.tsx:300
+#, c-format
+msgid "Check your token is valid"
+msgstr ""
+
+#: src/ApplicationReadyRoutes.tsx:72
+#, c-format
+msgid "Couldn't access the server."
+msgstr ""
+
+#: src/ApplicationReadyRoutes.tsx:73
+#, c-format
+msgid "Could not infer instance id from url %1$s"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:109
+#, c-format
+msgid "HTTP status #%1$s: Server reported a problem"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:110
+#, c-format
+msgid "Got message: \"%1$s\" from: %2$s"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:127
+#, c-format
+msgid "No default instance"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:128
+#, c-format
+msgid ""
+"in order to use merchant backoffice, you should create the default instance"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:288
+#, c-format
+msgid "Server reported a problem: HTTP status #%1$s"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:289
+#, c-format
+msgid "Got message: %1$s from: %2$s"
+msgstr ""
+
+#: src/components/exception/login.tsx:46
+#, c-format
+msgid "Login required"
+msgstr ""
+
+#: src/components/exception/login.tsx:49
+#, c-format
+msgid ""
+"Please enter your auth token. Token should have \"secret-token:\" and start "
+"with Bearer or ApiKey"
+msgstr ""
+
+#: src/components/exception/login.tsx:86 src/components/modal/index.tsx:53
+#: src/components/modal/index.tsx:75 src/paths/admin/create/CreatePage.tsx:115
+#: src/paths/instance/orders/create/CreatePage.tsx:325
+#: src/paths/instance/products/create/CreatePage.tsx:51
+#: src/paths/instance/products/list/Table.tsx:174
+#: src/paths/instance/products/list/Table.tsx:228
+#: src/paths/instance/products/update/UpdatePage.tsx:55
+#: src/paths/instance/transfers/create/CreatePage.tsx:89
+#: src/paths/instance/update/UpdatePage.tsx:134
+#, c-format
+msgid "Confirm"
+msgstr ""
+
+#: src/components/form/InputArray.tsx:72
+#, c-format
+msgid "The value %1$s is invalid for a payment url"
+msgstr ""
+
+#: src/components/form/InputDate.tsx:67
+#: src/paths/instance/orders/list/index.tsx:123
+#, c-format
+msgid "pick a date"
+msgstr ""
+
+#: src/components/form/InputDate.tsx:81
+#, c-format
+msgid "clear"
+msgstr ""
+
+#: src/components/form/InputDate.tsx:83
+#: src/paths/instance/transfers/list/Table.tsx:140
+#, c-format
+msgid "never"
+msgstr ""
+
+#: src/components/form/InputImage.tsx:80
+#, c-format
+msgid "Image should be smaller than 1 MB"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:28
+#, c-format
+msgid "Country"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:30
+#: src/paths/admin/create/CreatePage.tsx:99
+#: src/paths/instance/transfers/list/Table.tsx:124
+#: src/paths/instance/update/UpdatePage.tsx:118
+#, c-format
+msgid "Address"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:34
+#, c-format
+msgid "Building number"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:35
+#, c-format
+msgid "Building name"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:36
+#, c-format
+msgid "Street"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:37
+#, c-format
+msgid "Post code"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:38
+#, c-format
+msgid "Town location"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:39
+#, c-format
+msgid "Town"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:40
+#, c-format
+msgid "District"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:41
+#, c-format
+msgid "Country subdivision"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:59
+#, c-format
+msgid "Product id"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:60
+#: src/components/product/ProductForm.tsx:99
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:122
+#: src/paths/instance/orders/list/Table.tsx:227
+#: src/paths/instance/products/list/Table.tsx:86
+#, c-format
+msgid "Description"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:73
+#: src/components/form/InputTaxes.tsx:81
+#: src/paths/admin/create/CreatePage.tsx:87 src/paths/admin/list/Table.tsx:110
+#: src/paths/instance/details/DetailPage.tsx:76
+#: src/paths/instance/update/UpdatePage.tsx:106
+#, c-format
+msgid "Name"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:102
+#, c-format
+msgid "loading..."
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:108
+#, c-format
+msgid "no products found"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:116
+#, c-format
+msgid "no results"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:33
+#, c-format
+msgid "Deleting"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:34
+#, c-format
+msgid "Changing"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:60
+#, c-format
+msgid "Manage token"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:83
+#, c-format
+msgid "Update"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:100
+#: src/paths/instance/orders/create/CreatePage.tsx:252
+#: src/paths/instance/orders/create/CreatePage.tsx:273
+#, c-format
+msgid "Remove"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:106 src/components/modal/index.tsx:52
+#: src/components/modal/index.tsx:73 src/paths/admin/create/CreatePage.tsx:114
+#: src/paths/instance/orders/create/CreatePage.tsx:324
+#: src/paths/instance/products/create/CreatePage.tsx:50
+#: src/paths/instance/products/list/Table.tsx:166
+#: src/paths/instance/products/list/Table.tsx:218
+#: src/paths/instance/products/update/UpdatePage.tsx:54
+#: src/paths/instance/transfers/create/CreatePage.tsx:88
+#: src/paths/instance/update/UpdatePage.tsx:133
+#, c-format
+msgid "Cancel"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:91
+#, c-format
+msgid "Manage stock"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:93
+#, c-format
+msgid "Infinite"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:105
+#, c-format
+msgid "lost cannot be greater that current + incoming (max %1$s)"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:111
+#, c-format
+msgid "current stock will change from %1$s to %2$s"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:112
+#, c-format
+msgid "current stock will stay at %1$s"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:129
+#: src/paths/instance/products/list/Table.tsx:204
+#, c-format
+msgid "Incoming"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:130
+#: src/paths/instance/products/list/Table.tsx:205
+#, c-format
+msgid "Lost"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:142
+#, c-format
+msgid "Current"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:145
+#, c-format
+msgid "without stock"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:150
+#, c-format
+msgid "Next restock"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:152
+#, c-format
+msgid "Delivery address"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:73
+#, c-format
+msgid "this product has no taxes"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:77
+#: src/paths/instance/orders/details/DetailPage.tsx:145
+#: src/paths/instance/orders/details/DetailPage.tsx:296
+#: src/paths/instance/orders/list/Table.tsx:116
+#: src/paths/instance/transfers/create/CreatePage.tsx:84
+#, c-format
+msgid "Amount"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:78
+#, c-format
+msgid "currency and value separated with colon"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:84
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:78
+#, c-format
+msgid "Add"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:53
+#, c-format
+msgid "Instance"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:59
+#, c-format
+msgid "Settings"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:65
+#: src/paths/instance/orders/list/Table.tsx:60
+#, c-format
+msgid "Orders"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:71
+#: src/paths/instance/orders/create/CreatePage.tsx:258
+#: src/paths/instance/products/list/Table.tsx:48
+#, c-format
+msgid "Products"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:77
+#: src/paths/instance/transfers/list/Table.tsx:65
+#, c-format
+msgid "Transfers"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:87
+#, c-format
+msgid "Connection"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:112 src/paths/admin/list/Table.tsx:57
+#, c-format
+msgid "Instances"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:116
+#, c-format
+msgid "New"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:122
+#, c-format
+msgid "List"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:129
+#, c-format
+msgid "Log out"
+msgstr ""
+
+#: src/components/modal/index.tsx:74
+#, c-format
+msgid "Clear"
+msgstr ""
+
+#: src/components/modal/index.tsx:110 src/components/modal/index.tsx:111
+#, c-format
+msgid "should be the same"
+msgstr ""
+
+#: src/components/modal/index.tsx:111
+#, c-format
+msgid "cannot be the same as before"
+msgstr ""
+
+#: src/components/modal/index.tsx:114
+#, c-format
+msgid ""
+"You are updating the authorization token from instance %1$s with id %2$s"
+msgstr ""
+
+#: src/components/modal/index.tsx:124
+#, c-format
+msgid "Old token"
+msgstr ""
+
+#: src/components/modal/index.tsx:125
+#, c-format
+msgid "New token"
+msgstr ""
+
+#: src/components/modal/index.tsx:127
+#, c-format
+msgid "Clearing the auth token will mean public access to the instance"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:96
+#: src/paths/admin/create/CreatePage.tsx:85 src/paths/admin/list/Table.tsx:109
+#: src/paths/instance/transfers/list/Table.tsx:122
+#, c-format
+msgid "ID"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:98
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:121
+#: src/paths/instance/products/list/Table.tsx:85
+#, c-format
+msgid "Image"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:100
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:123
+#, c-format
+msgid "Unit"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:101
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:124
+#: src/paths/instance/products/list/Table.tsx:162
+#: src/paths/instance/products/list/Table.tsx:214
+#, c-format
+msgid "Price"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:103
+#: src/paths/instance/products/list/Table.tsx:90
+#, c-format
+msgid "Stock"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:105
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:128
+#: src/paths/instance/products/list/Table.tsx:88
+#, c-format
+msgid "Taxes"
+msgstr ""
+
+#: src/index.tsx:75
+#, c-format
+msgid "Server not found"
+msgstr ""
+
+#: src/index.tsx:85
+#, c-format
+msgid "Couldn't access the server"
+msgstr ""
+
+#: src/index.tsx:87 src/index.tsx:99
+#, c-format
+msgid "Got message %1$s from %2$s"
+msgstr ""
+
+#: src/index.tsx:97
+#, c-format
+msgid "Unexpected Error"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:89
+#: src/paths/instance/update/UpdatePage.tsx:108
+#, c-format
+msgid "Auth token"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:91
+#: src/paths/instance/details/DetailPage.tsx:77
+#: src/paths/instance/update/UpdatePage.tsx:110
+#, c-format
+msgid "Account address"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:93
+#: src/paths/instance/update/UpdatePage.tsx:112
+#, c-format
+msgid "Default max deposit fee"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:95
+#: src/paths/instance/update/UpdatePage.tsx:114
+#, c-format
+msgid "Default max wire fee"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:97
+#: src/paths/instance/update/UpdatePage.tsx:116
+#, c-format
+msgid "Default wire fee amortization"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:103
+#: src/paths/instance/update/UpdatePage.tsx:122
+#, c-format
+msgid "Jurisdiction"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:107
+#: src/paths/instance/update/UpdatePage.tsx:126
+#, c-format
+msgid "Default pay delay"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:109
+#: src/paths/instance/update/UpdatePage.tsx:128
+#, c-format
+msgid "Default wire transfer delay"
+msgstr ""
+
+#: src/paths/admin/create/index.tsx:58
+#, c-format
+msgid "could not create instance"
+msgstr ""
+
+#: src/paths/admin/list/Table.tsx:63 src/paths/admin/list/Table.tsx:131
+#: src/paths/instance/transfers/list/Table.tsx:71
+#, c-format
+msgid "Delete"
+msgstr ""
+
+#: src/paths/admin/list/Table.tsx:128
+#, c-format
+msgid "Edit"
+msgstr ""
+
+#: src/paths/admin/list/Table.tsx:149
+#: src/paths/instance/products/list/Table.tsx:245
+#, c-format
+msgid "There is no instances yet, add more pressing the + sign"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:237
+#, c-format
+msgid "Inventory products"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:286
+#, c-format
+msgid "Total price"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:287
+#, c-format
+msgid "Total tax"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:289
+#: src/paths/instance/orders/create/CreatePage.tsx:297
+#, c-format
+msgid "Order price"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:295
+#, c-format
+msgid "Net"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:300
+#: src/paths/instance/orders/details/DetailPage.tsx:144
+#: src/paths/instance/orders/details/DetailPage.tsx:295
+#: src/paths/instance/orders/list/Table.tsx:117
+#, c-format
+msgid "Summary"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:302
+#, c-format
+msgid "Payments options"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:303
+#, c-format
+msgid "Auto refund deadline"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:304
+#, c-format
+msgid "Refund deadline"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:305
+#, c-format
+msgid "Pay deadline"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:307
+#, c-format
+msgid "Delivery date"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:308
+#, c-format
+msgid "Location"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:312
+#, c-format
+msgid "Max fee"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:313
+#, c-format
+msgid "Max wire fee"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:314
+#, c-format
+msgid "Wire fee amortization"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:315
+#, c-format
+msgid "Fullfilment url"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:318
+#, c-format
+msgid "Extra information"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:44
+#, c-format
+msgid "select a product first"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:51
+#, c-format
+msgid "should be greater than 0"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:58
+#, c-format
+msgid ""
+"cannot be greater than current stock and quantity previously added. max: %1$s"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:64
+#, c-format
+msgid "cannot be greater than current stock %1$s"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:76
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:126
+#, c-format
+msgid "Quantity"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:92
+#: src/paths/instance/orders/details/DetailPage.tsx:235
+#: src/paths/instance/orders/details/DetailPage.tsx:333
+#, c-format
+msgid "Order"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:93
+#, c-format
+msgid "claimed"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:110
+#: src/paths/instance/orders/details/DetailPage.tsx:261
+#: src/paths/instance/orders/list/Table.tsx:136
+#, c-format
+msgid "copy url"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:126
+#: src/paths/instance/orders/details/DetailPage.tsx:349
+#, c-format
+msgid "pay at"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:127
+#: src/paths/instance/orders/details/DetailPage.tsx:350
+#, c-format
+msgid "created at"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:138
+#: src/paths/instance/orders/details/DetailPage.tsx:289
+#, c-format
+msgid "Timeline"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:142
+#: src/paths/instance/orders/details/DetailPage.tsx:293
+#, c-format
+msgid "Payment details"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:146
+#: src/paths/instance/orders/details/DetailPage.tsx:299
+#: src/paths/instance/orders/details/DetailPage.tsx:363
+#, c-format
+msgid "Order status"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:156
+#: src/paths/instance/orders/details/DetailPage.tsx:308
+#, c-format
+msgid "Product list"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:236
+#, c-format
+msgid "paid"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:238
+#, c-format
+msgid "wired"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:241
+#, c-format
+msgid "refunded"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:258
+#, c-format
+msgid "refund"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:297
+#, c-format
+msgid "Refunded amount"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:298
+#, c-format
+msgid "Deposit total"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:336
+#, c-format
+msgid "unpaid"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:364
+#, c-format
+msgid "Order status URL"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:365
+#, c-format
+msgid "Pay URI"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:383
+#, c-format
+msgid ""
+"Unknown order status. This is an error, please contact the administrator."
+msgstr ""
+
+#: src/paths/instance/orders/details/index.tsx:56
+#: src/paths/instance/orders/list/index.tsx:147
+#, c-format
+msgid "refund created successfully"
+msgstr ""
+
+#: src/paths/instance/orders/details/index.tsx:59
+#: src/paths/instance/orders/list/index.tsx:150
+#, c-format
+msgid "could not create the refund"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:111
+#, c-format
+msgid "load newer orders"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:115
+#, c-format
+msgid "Date"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:131
+#: src/paths/instance/orders/list/Table.tsx:223
+#, c-format
+msgid "Refund"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:145
+#, c-format
+msgid "load older orders"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:154
+#, c-format
+msgid "No orders has been found"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:202
+#, c-format
+msgid "date"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:203
+#, c-format
+msgid "amount"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:204
+#, c-format
+msgid "reason"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:224
+#, c-format
+msgid "Max refundable:"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "Reason"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "duplicated"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "requested by the customer"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "other"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:91
+#, c-format
+msgid "go to order id"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:107
+#, c-format
+msgid "Paid"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:108
+#, c-format
+msgid "Refunded"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:109
+#, c-format
+msgid "Not wired"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:110
+#, c-format
+msgid "All"
+msgstr ""
+
+#: src/paths/instance/products/create/index.tsx:48
+#: src/paths/instance/products/update/index.tsx:64
+#, c-format
+msgid "could not create product"
+msgstr ""
+
+#: src/paths/instance/products/list/Table.tsx:87
+#, c-format
+msgid "Sell"
+msgstr ""
+
+#: src/paths/instance/products/list/Table.tsx:89
+#, c-format
+msgid "Profit"
+msgstr ""
+
+#: src/paths/instance/products/list/Table.tsx:91
+#, c-format
+msgid "Sold"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:59
+#, c-format
+msgid "product updated successfully"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:62
+#, c-format
+msgid "could not update the product"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:70
+#, c-format
+msgid "product delete successfully"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:73
+#, c-format
+msgid "could not delete the product"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:59
+#, c-format
+msgid "Tips"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:111
+#, c-format
+msgid "Committed amount"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:112
+#, c-format
+msgid "Exchange initial amount"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:113
+#, c-format
+msgid "Merchant initial amount"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:148
+#, c-format
+msgid "There is no tips yet, add more pressing the + sign"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:50
+#: src/paths/instance/transfers/create/CreatePage.tsx:54
+#: src/paths/instance/transfers/create/CreatePage.tsx:55
+#: src/paths/instance/transfers/create/CreatePage.tsx:56
+#, c-format
+msgid "cannot be empty"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:51
+#, c-format
+msgid "check the id, doest look valid"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:52
+#, c-format
+msgid "should have 52 characters, current %1$s"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:57
+#, c-format
+msgid "URL doesn't have the right format"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:74
+#, c-format
+msgid "Transfer ID"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:76
+#, c-format
+msgid "Account Address"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:82
+#: src/paths/instance/transfers/list/Table.tsx:125
+#, c-format
+msgid "Exchange URL"
+msgstr ""
+
+#: src/paths/instance/transfers/create/index.tsx:49
+#, c-format
+msgid "could not inform transfer"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:118
+#, c-format
+msgid "load newer transfers"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:123
+#, c-format
+msgid "Credit"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:126
+#, c-format
+msgid "Confirmed"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:127
+#: src/paths/instance/transfers/list/index.tsx:60
+#, c-format
+msgid "Verified"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:128
+#, c-format
+msgid "Executed at"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:138
+#: src/paths/instance/transfers/list/Table.tsx:139
+#, c-format
+msgid "yes"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:138
+#: src/paths/instance/transfers/list/Table.tsx:139
+#, c-format
+msgid "no"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:140
+#, c-format
+msgid "unknown"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:145
+#, c-format
+msgid "load older transfers"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:154
+#, c-format
+msgid "There is no transfer yet, add more pressing the + sign"
+msgstr ""
diff --git a/packages/merchant-backoffice-ui/src/i18n/poheader b/packages/merchant-backoffice-ui/src/i18n/poheader
new file mode 100644
index 000000000..ee3fcd7be
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/i18n/poheader
@@ -0,0 +1,27 @@
+#  This file is part of GNU Taler
+#  (C) 2021 Taler Systems S.A.
+
+#  GNU Taler is free software; you can redistribute it and/or modify it under the
+#  terms of the GNU General Public License as published by the Free Software
+#  Foundation; either version 3, or (at your option) any later version.
+
+#  GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+#  WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+#  A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+#  You should have received a copy of the GNU General Public License along with
+#  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+
+#
+#, fuzzy
+msgid ""
+msgstr ""
+"Project-Id-Version: Taler Wallet\n"
+"Report-Msgid-Bugs-To: taler@gnu.org\n"
+"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
+"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
+"Language-Team: LANGUAGE <LL@li.org>\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
diff --git a/packages/merchant-backoffice-ui/src/i18n/strings-prelude b/packages/merchant-backoffice-ui/src/i18n/strings-prelude
new file mode 100644
index 000000000..cca13afad
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/i18n/strings-prelude
@@ -0,0 +1,19 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/*eslint quote-props: ["error", "consistent"]*/
+export const strings: {[s: string]: any} = {};
+
diff --git a/packages/merchant-backoffice-ui/src/i18n/strings.ts b/packages/merchant-backoffice-ui/src/i18n/strings.ts
new file mode 100644
index 000000000..63e96949a
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/i18n/strings.ts
@@ -0,0 +1,3445 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/*eslint quote-props: ["error", "consistent"]*/
+export const strings: {[s: string]: any} = {};
+
+strings['de'] = {
+  "domain": "messages",
+  "locale_data": {
+    "messages": {
+      "": {
+        "domain": "messages",
+        "plural_forms": "nplurals=2; plural=(n != 1);",
+        "lang": ""
+      },
+      "Access denied": [
+        ""
+      ],
+      "Check your token is valid": [
+        ""
+      ],
+      "Couldn't access the server.": [
+        ""
+      ],
+      "Could not infer instance id from url %1$s": [
+        ""
+      ],
+      "HTTP status #%1$s: Server reported a problem": [
+        ""
+      ],
+      "Got message: \"%1$s\" from: %2$s": [
+        ""
+      ],
+      "No default instance": [
+        ""
+      ],
+      "in order to use merchant backoffice, you should create the default instance": [
+        ""
+      ],
+      "Server reported a problem: HTTP status #%1$s": [
+        ""
+      ],
+      "Got message: %1$s from: %2$s": [
+        ""
+      ],
+      "Login required": [
+        ""
+      ],
+      "Please enter your auth token. Token should have \"secret-token:\" and start with Bearer or ApiKey": [
+        ""
+      ],
+      "Confirm": [
+        ""
+      ],
+      "The value %1$s is invalid for a payment url": [
+        ""
+      ],
+      "pick a date": [
+        ""
+      ],
+      "clear": [
+        ""
+      ],
+      "never": [
+        ""
+      ],
+      "Image should be smaller than 1 MB": [
+        ""
+      ],
+      "Country": [
+        ""
+      ],
+      "Address": [
+        ""
+      ],
+      "Building number": [
+        ""
+      ],
+      "Building name": [
+        ""
+      ],
+      "Street": [
+        ""
+      ],
+      "Post code": [
+        ""
+      ],
+      "Town location": [
+        ""
+      ],
+      "Town": [
+        ""
+      ],
+      "District": [
+        ""
+      ],
+      "Country subdivision": [
+        ""
+      ],
+      "Product id": [
+        ""
+      ],
+      "Description": [
+        ""
+      ],
+      "Name": [
+        ""
+      ],
+      "loading...": [
+        ""
+      ],
+      "no products found": [
+        ""
+      ],
+      "no results": [
+        ""
+      ],
+      "Deleting": [
+        ""
+      ],
+      "Changing": [
+        ""
+      ],
+      "Manage token": [
+        ""
+      ],
+      "Update": [
+        ""
+      ],
+      "Remove": [
+        ""
+      ],
+      "Cancel": [
+        ""
+      ],
+      "Manage stock": [
+        ""
+      ],
+      "Infinite": [
+        ""
+      ],
+      "lost cannot be greater that current + incoming (max %1$s)": [
+        ""
+      ],
+      "current stock will change from %1$s to %2$s": [
+        ""
+      ],
+      "current stock will stay at %1$s": [
+        ""
+      ],
+      "Incoming": [
+        ""
+      ],
+      "Lost": [
+        ""
+      ],
+      "Current": [
+        ""
+      ],
+      "without stock": [
+        ""
+      ],
+      "Next restock": [
+        ""
+      ],
+      "Delivery address": [
+        ""
+      ],
+      "this product has no taxes": [
+        ""
+      ],
+      "Amount": [
+        ""
+      ],
+      "currency and value separated with colon": [
+        ""
+      ],
+      "Add": [
+        ""
+      ],
+      "Instance": [
+        ""
+      ],
+      "Settings": [
+        ""
+      ],
+      "Orders": [
+        ""
+      ],
+      "Products": [
+        ""
+      ],
+      "Transfers": [
+        ""
+      ],
+      "Connection": [
+        ""
+      ],
+      "Instances": [
+        ""
+      ],
+      "New": [
+        ""
+      ],
+      "List": [
+        ""
+      ],
+      "Log out": [
+        ""
+      ],
+      "Clear": [
+        ""
+      ],
+      "should be the same": [
+        ""
+      ],
+      "cannot be the same as before": [
+        ""
+      ],
+      "You are updating the authorization token from instance %1$s with id %2$s": [
+        ""
+      ],
+      "Old token": [
+        ""
+      ],
+      "New token": [
+        ""
+      ],
+      "Clearing the auth token will mean public access to the instance": [
+        ""
+      ],
+      "ID": [
+        ""
+      ],
+      "Image": [
+        ""
+      ],
+      "Unit": [
+        ""
+      ],
+      "Price": [
+        ""
+      ],
+      "Stock": [
+        ""
+      ],
+      "Taxes": [
+        ""
+      ],
+      "Server not found": [
+        ""
+      ],
+      "Couldn't access the server": [
+        ""
+      ],
+      "Got message %1$s from %2$s": [
+        ""
+      ],
+      "Unexpected Error": [
+        ""
+      ],
+      "Auth token": [
+        ""
+      ],
+      "Account address": [
+        ""
+      ],
+      "Default max deposit fee": [
+        ""
+      ],
+      "Default max wire fee": [
+        ""
+      ],
+      "Default wire fee amortization": [
+        ""
+      ],
+      "Jurisdiction": [
+        ""
+      ],
+      "Default pay delay": [
+        ""
+      ],
+      "Default wire transfer delay": [
+        ""
+      ],
+      "could not create instance": [
+        ""
+      ],
+      "Delete": [
+        ""
+      ],
+      "Edit": [
+        ""
+      ],
+      "There is no instances yet, add more pressing the + sign": [
+        ""
+      ],
+      "Inventory products": [
+        ""
+      ],
+      "Total price": [
+        ""
+      ],
+      "Total tax": [
+        ""
+      ],
+      "Order price": [
+        ""
+      ],
+      "Net": [
+        ""
+      ],
+      "Summary": [
+        ""
+      ],
+      "Payments options": [
+        ""
+      ],
+      "Auto refund deadline": [
+        ""
+      ],
+      "Refund deadline": [
+        ""
+      ],
+      "Pay deadline": [
+        ""
+      ],
+      "Delivery date": [
+        ""
+      ],
+      "Location": [
+        ""
+      ],
+      "Max fee": [
+        ""
+      ],
+      "Max wire fee": [
+        ""
+      ],
+      "Wire fee amortization": [
+        ""
+      ],
+      "Fullfilment url": [
+        ""
+      ],
+      "Extra information": [
+        ""
+      ],
+      "select a product first": [
+        ""
+      ],
+      "should be greater than 0": [
+        ""
+      ],
+      "cannot be greater than current stock and quantity previously added. max: %1$s": [
+        ""
+      ],
+      "cannot be greater than current stock %1$s": [
+        ""
+      ],
+      "Quantity": [
+        ""
+      ],
+      "Order": [
+        ""
+      ],
+      "claimed": [
+        ""
+      ],
+      "copy url": [
+        ""
+      ],
+      "pay at": [
+        ""
+      ],
+      "created at": [
+        ""
+      ],
+      "Timeline": [
+        ""
+      ],
+      "Payment details": [
+        ""
+      ],
+      "Order status": [
+        ""
+      ],
+      "Product list": [
+        ""
+      ],
+      "paid": [
+        ""
+      ],
+      "wired": [
+        ""
+      ],
+      "refunded": [
+        ""
+      ],
+      "refund": [
+        ""
+      ],
+      "Refunded amount": [
+        ""
+      ],
+      "Deposit total": [
+        ""
+      ],
+      "unpaid": [
+        ""
+      ],
+      "Order status URL": [
+        ""
+      ],
+      "Pay URI": [
+        ""
+      ],
+      "Unknown order status. This is an error, please contact the administrator.": [
+        ""
+      ],
+      "refund created successfully": [
+        ""
+      ],
+      "could not create the refund": [
+        ""
+      ],
+      "load newer orders": [
+        ""
+      ],
+      "Date": [
+        ""
+      ],
+      "Refund": [
+        ""
+      ],
+      "load older orders": [
+        ""
+      ],
+      "No orders has been found": [
+        ""
+      ],
+      "date": [
+        ""
+      ],
+      "amount": [
+        ""
+      ],
+      "reason": [
+        ""
+      ],
+      "Max refundable:": [
+        ""
+      ],
+      "Reason": [
+        ""
+      ],
+      "duplicated": [
+        ""
+      ],
+      "requested by the customer": [
+        ""
+      ],
+      "other": [
+        ""
+      ],
+      "go to order id": [
+        ""
+      ],
+      "Paid": [
+        ""
+      ],
+      "Refunded": [
+        ""
+      ],
+      "Not wired": [
+        ""
+      ],
+      "All": [
+        ""
+      ],
+      "could not create product": [
+        ""
+      ],
+      "Sell": [
+        ""
+      ],
+      "Profit": [
+        ""
+      ],
+      "Sold": [
+        ""
+      ],
+      "product updated successfully": [
+        ""
+      ],
+      "could not update the product": [
+        ""
+      ],
+      "product delete successfully": [
+        ""
+      ],
+      "could not delete the product": [
+        ""
+      ],
+      "Tips": [
+        ""
+      ],
+      "Committed amount": [
+        ""
+      ],
+      "Exchange initial amount": [
+        ""
+      ],
+      "Merchant initial amount": [
+        ""
+      ],
+      "There is no tips yet, add more pressing the + sign": [
+        ""
+      ],
+      "cannot be empty": [
+        ""
+      ],
+      "check the id, doest look valid": [
+        ""
+      ],
+      "should have 52 characters, current %1$s": [
+        ""
+      ],
+      "URL doesn't have the right format": [
+        ""
+      ],
+      "Transfer ID": [
+        ""
+      ],
+      "Account Address": [
+        ""
+      ],
+      "Exchange URL": [
+        ""
+      ],
+      "could not inform transfer": [
+        ""
+      ],
+      "load newer transfers": [
+        ""
+      ],
+      "Credit": [
+        ""
+      ],
+      "Confirmed": [
+        ""
+      ],
+      "Verified": [
+        ""
+      ],
+      "Executed at": [
+        ""
+      ],
+      "yes": [
+        ""
+      ],
+      "no": [
+        ""
+      ],
+      "unknown": [
+        ""
+      ],
+      "load older transfers": [
+        ""
+      ],
+      "There is no transfer yet, add more pressing the + sign": [
+        ""
+      ]
+    }
+  }
+};
+
+strings['en'] = {
+  "domain": "messages",
+  "locale_data": {
+    "messages": {
+      "": {
+        "domain": "messages",
+        "plural_forms": "nplurals=2; plural=(n != 1);",
+        "lang": ""
+      },
+      "Access denied": [
+        ""
+      ],
+      "Check your token is valid": [
+        ""
+      ],
+      "Couldn't access the server.": [
+        ""
+      ],
+      "Could not infer instance id from url %1$s": [
+        ""
+      ],
+      "HTTP status #%1$s: Server reported a problem": [
+        ""
+      ],
+      "Got message: \"%1$s\" from: %2$s": [
+        ""
+      ],
+      "No default instance": [
+        ""
+      ],
+      "in order to use merchant backoffice, you should create the default instance": [
+        ""
+      ],
+      "Server reported a problem: HTTP status #%1$s": [
+        ""
+      ],
+      "Got message: %1$s from: %2$s": [
+        ""
+      ],
+      "Login required": [
+        ""
+      ],
+      "Please enter your auth token. Token should have \"secret-token:\" and start with Bearer or ApiKey": [
+        ""
+      ],
+      "Confirm": [
+        ""
+      ],
+      "The value %1$s is invalid for a payment url": [
+        ""
+      ],
+      "pick a date": [
+        ""
+      ],
+      "clear": [
+        ""
+      ],
+      "never": [
+        ""
+      ],
+      "Image should be smaller than 1 MB": [
+        ""
+      ],
+      "Country": [
+        ""
+      ],
+      "Address": [
+        ""
+      ],
+      "Building number": [
+        ""
+      ],
+      "Building name": [
+        ""
+      ],
+      "Street": [
+        ""
+      ],
+      "Post code": [
+        ""
+      ],
+      "Town location": [
+        ""
+      ],
+      "Town": [
+        ""
+      ],
+      "District": [
+        ""
+      ],
+      "Country subdivision": [
+        ""
+      ],
+      "Product id": [
+        ""
+      ],
+      "Description": [
+        ""
+      ],
+      "Name": [
+        ""
+      ],
+      "loading...": [
+        ""
+      ],
+      "no products found": [
+        ""
+      ],
+      "no results": [
+        ""
+      ],
+      "Deleting": [
+        ""
+      ],
+      "Changing": [
+        ""
+      ],
+      "Manage token": [
+        ""
+      ],
+      "Update": [
+        ""
+      ],
+      "Remove": [
+        ""
+      ],
+      "Cancel": [
+        ""
+      ],
+      "Manage stock": [
+        ""
+      ],
+      "Infinite": [
+        ""
+      ],
+      "lost cannot be greater that current + incoming (max %1$s)": [
+        ""
+      ],
+      "current stock will change from %1$s to %2$s": [
+        ""
+      ],
+      "current stock will stay at %1$s": [
+        ""
+      ],
+      "Incoming": [
+        ""
+      ],
+      "Lost": [
+        ""
+      ],
+      "Current": [
+        ""
+      ],
+      "without stock": [
+        ""
+      ],
+      "Next restock": [
+        ""
+      ],
+      "Delivery address": [
+        ""
+      ],
+      "this product has no taxes": [
+        ""
+      ],
+      "Amount": [
+        ""
+      ],
+      "currency and value separated with colon": [
+        ""
+      ],
+      "Add": [
+        ""
+      ],
+      "Instance": [
+        ""
+      ],
+      "Settings": [
+        ""
+      ],
+      "Orders": [
+        ""
+      ],
+      "Products": [
+        ""
+      ],
+      "Transfers": [
+        ""
+      ],
+      "Connection": [
+        ""
+      ],
+      "Instances": [
+        ""
+      ],
+      "New": [
+        ""
+      ],
+      "List": [
+        ""
+      ],
+      "Log out": [
+        ""
+      ],
+      "Clear": [
+        ""
+      ],
+      "should be the same": [
+        ""
+      ],
+      "cannot be the same as before": [
+        ""
+      ],
+      "You are updating the authorization token from instance %1$s with id %2$s": [
+        ""
+      ],
+      "Old token": [
+        ""
+      ],
+      "New token": [
+        ""
+      ],
+      "Clearing the auth token will mean public access to the instance": [
+        ""
+      ],
+      "ID": [
+        ""
+      ],
+      "Image": [
+        ""
+      ],
+      "Unit": [
+        ""
+      ],
+      "Price": [
+        ""
+      ],
+      "Stock": [
+        ""
+      ],
+      "Taxes": [
+        ""
+      ],
+      "Server not found": [
+        ""
+      ],
+      "Couldn't access the server": [
+        ""
+      ],
+      "Got message %1$s from %2$s": [
+        ""
+      ],
+      "Unexpected Error": [
+        ""
+      ],
+      "Auth token": [
+        ""
+      ],
+      "Account address": [
+        ""
+      ],
+      "Default max deposit fee": [
+        ""
+      ],
+      "Default max wire fee": [
+        ""
+      ],
+      "Default wire fee amortization": [
+        ""
+      ],
+      "Jurisdiction": [
+        ""
+      ],
+      "Default pay delay": [
+        ""
+      ],
+      "Default wire transfer delay": [
+        ""
+      ],
+      "could not create instance": [
+        ""
+      ],
+      "Delete": [
+        ""
+      ],
+      "Edit": [
+        ""
+      ],
+      "There is no instances yet, add more pressing the + sign": [
+        ""
+      ],
+      "Inventory products": [
+        ""
+      ],
+      "Total price": [
+        ""
+      ],
+      "Total tax": [
+        ""
+      ],
+      "Order price": [
+        ""
+      ],
+      "Net": [
+        ""
+      ],
+      "Summary": [
+        ""
+      ],
+      "Payments options": [
+        ""
+      ],
+      "Auto refund deadline": [
+        ""
+      ],
+      "Refund deadline": [
+        ""
+      ],
+      "Pay deadline": [
+        ""
+      ],
+      "Delivery date": [
+        ""
+      ],
+      "Location": [
+        ""
+      ],
+      "Max fee": [
+        ""
+      ],
+      "Max wire fee": [
+        ""
+      ],
+      "Wire fee amortization": [
+        ""
+      ],
+      "Fullfilment url": [
+        ""
+      ],
+      "Extra information": [
+        ""
+      ],
+      "select a product first": [
+        ""
+      ],
+      "should be greater than 0": [
+        ""
+      ],
+      "cannot be greater than current stock and quantity previously added. max: %1$s": [
+        ""
+      ],
+      "cannot be greater than current stock %1$s": [
+        ""
+      ],
+      "Quantity": [
+        ""
+      ],
+      "Order": [
+        ""
+      ],
+      "claimed": [
+        ""
+      ],
+      "copy url": [
+        ""
+      ],
+      "pay at": [
+        ""
+      ],
+      "created at": [
+        ""
+      ],
+      "Timeline": [
+        ""
+      ],
+      "Payment details": [
+        ""
+      ],
+      "Order status": [
+        ""
+      ],
+      "Product list": [
+        ""
+      ],
+      "paid": [
+        ""
+      ],
+      "wired": [
+        ""
+      ],
+      "refunded": [
+        ""
+      ],
+      "refund": [
+        ""
+      ],
+      "Refunded amount": [
+        ""
+      ],
+      "Deposit total": [
+        ""
+      ],
+      "unpaid": [
+        ""
+      ],
+      "Order status URL": [
+        ""
+      ],
+      "Pay URI": [
+        ""
+      ],
+      "Unknown order status. This is an error, please contact the administrator.": [
+        ""
+      ],
+      "refund created successfully": [
+        ""
+      ],
+      "could not create the refund": [
+        ""
+      ],
+      "load newer orders": [
+        ""
+      ],
+      "Date": [
+        ""
+      ],
+      "Refund": [
+        ""
+      ],
+      "load older orders": [
+        ""
+      ],
+      "No orders has been found": [
+        ""
+      ],
+      "date": [
+        ""
+      ],
+      "amount": [
+        ""
+      ],
+      "reason": [
+        ""
+      ],
+      "Max refundable:": [
+        ""
+      ],
+      "Reason": [
+        ""
+      ],
+      "duplicated": [
+        ""
+      ],
+      "requested by the customer": [
+        ""
+      ],
+      "other": [
+        ""
+      ],
+      "go to order id": [
+        ""
+      ],
+      "Paid": [
+        ""
+      ],
+      "Refunded": [
+        ""
+      ],
+      "Not wired": [
+        ""
+      ],
+      "All": [
+        ""
+      ],
+      "could not create product": [
+        ""
+      ],
+      "Sell": [
+        ""
+      ],
+      "Profit": [
+        ""
+      ],
+      "Sold": [
+        ""
+      ],
+      "product updated successfully": [
+        ""
+      ],
+      "could not update the product": [
+        ""
+      ],
+      "product delete successfully": [
+        ""
+      ],
+      "could not delete the product": [
+        ""
+      ],
+      "Tips": [
+        ""
+      ],
+      "Committed amount": [
+        ""
+      ],
+      "Exchange initial amount": [
+        ""
+      ],
+      "Merchant initial amount": [
+        ""
+      ],
+      "There is no tips yet, add more pressing the + sign": [
+        ""
+      ],
+      "cannot be empty": [
+        ""
+      ],
+      "check the id, doest look valid": [
+        ""
+      ],
+      "should have 52 characters, current %1$s": [
+        ""
+      ],
+      "URL doesn't have the right format": [
+        ""
+      ],
+      "Transfer ID": [
+        ""
+      ],
+      "Account Address": [
+        ""
+      ],
+      "Exchange URL": [
+        ""
+      ],
+      "could not inform transfer": [
+        ""
+      ],
+      "load newer transfers": [
+        ""
+      ],
+      "Credit": [
+        ""
+      ],
+      "Confirmed": [
+        ""
+      ],
+      "Verified": [
+        ""
+      ],
+      "Executed at": [
+        ""
+      ],
+      "yes": [
+        ""
+      ],
+      "no": [
+        ""
+      ],
+      "unknown": [
+        ""
+      ],
+      "load older transfers": [
+        ""
+      ],
+      "There is no transfer yet, add more pressing the + sign": [
+        ""
+      ]
+    }
+  }
+};
+
+strings['es'] = {
+  "domain": "messages",
+  "locale_data": {
+    "messages": {
+      "": {
+        "domain": "messages",
+        "plural_forms": "nplurals=2; plural=(n != 1);",
+        "lang": ""
+      },
+      "Access denied": [
+        "Acceso denegado"
+      ],
+      "Check your token is valid": [
+        "Verifica que el token sea valido"
+      ],
+      "Couldn't access the server.": [
+        "No se pudo acceder al servidor"
+      ],
+      "Could not infer instance id from url %1$s": [
+        "No se pudo inferir el id de la instancia con la url %1$s"
+      ],
+      "HTTP status #%1$s: Server reported a problem": [
+        "HTTP status #%1$s: Servidor reporto un problema"
+      ],
+      "Got message: \"%1$s\" from: %2$s": [
+        "Recivimos el mensaje %1$s desde %2$s"
+      ],
+      "No default instance": [
+        "Sin instancia default"
+      ],
+      "in order to use merchant backoffice, you should create the default instance": [
+        "para usar el merchant backoffice, debería crear la instancia default"
+      ],
+      "Server reported a problem: HTTP status #%1$s": [
+        "Servidir reporto un problema: HTTP status #%1$s"
+      ],
+      "Got message: %1$s from: %2$s": [
+        "Recivimos el mensaje %1$s desde %2$s"
+      ],
+      "Login required": [
+        "Login necesario"
+      ],
+      "Please enter your auth token. Token should have \"secret-token:\" and start with Bearer or ApiKey": [
+        "Por favor ingrese su token de autorización. El token debe tener \"secret-token\" y comenzar con Bearer o ApiKey"
+      ],
+      "Confirm": [
+        "Confirmar"
+      ],
+      "The value %1$s is invalid for a payment url": [
+        "El valor %1$s es invalido para una URL de pago"
+      ],
+      "pick a date": [
+        "elegir una fecha"
+      ],
+      "clear": [
+        "Limpiar"
+      ],
+      "never": [
+        "nunca"
+      ],
+      "Image should be smaller than 1 MB": [
+        "La imagen debe ser mas chica que 1 MB"
+      ],
+      "Country": [
+        "País"
+      ],
+      "Address": [
+        "Dirección"
+      ],
+      "Building number": [
+        "Número de edificio"
+      ],
+      "Building name": [
+        "Nombre de edificio"
+      ],
+      "Street": [
+        "Calle"
+      ],
+      "Post code": [
+        "Código postal"
+      ],
+      "Town location": [
+        "Ubicación de ciudad"
+      ],
+      "Town": [
+        "Ciudad"
+      ],
+      "District": [
+        "Distrito"
+      ],
+      "Country subdivision": [
+        "Provincia"
+      ],
+      "Product id": [
+        "Id de producto"
+      ],
+      "Description": [
+        "Descripcion"
+      ],
+      "Name": [
+        "Nombre"
+      ],
+      "loading...": [
+        "Cargando..."
+      ],
+      "no products found": [
+        "No se encontraron productos"
+      ],
+      "no results": [
+        "Sin resultados"
+      ],
+      "Deleting": [
+        "Borrando"
+      ],
+      "Changing": [
+        "Cambiando"
+      ],
+      "Manage token": [
+        "Administrar token"
+      ],
+      "Update": [
+        "Actualizar"
+      ],
+      "Remove": [
+        "Eliminar"
+      ],
+      "Cancel": [
+        "Cancelar"
+      ],
+      "Manage stock": [
+        "Administrar stock"
+      ],
+      "Infinite": [
+        "Inifinito"
+      ],
+      "lost cannot be greater that current + incoming (max %1$s)": [
+        "no puede ser mayor al stock actual %1$s"
+      ],
+      "current stock will change from %1$s to %2$s": [
+        "stock actual cambiará desde %1$s a %2$s"
+      ],
+      "current stock will stay at %1$s": [
+        "stock actual seguirá en %1$s"
+      ],
+      "Incoming": [
+        "Ingresando"
+      ],
+      "Lost": [
+        "Perdido"
+      ],
+      "Current": [
+        "Actual"
+      ],
+      "without stock": [
+        "sin stock"
+      ],
+      "Next restock": [
+        "Próximo reabastecimiento"
+      ],
+      "Delivery address": [
+        "Dirección de entrega"
+      ],
+      "this product has no taxes": [
+        "este producto no tiene impuestos"
+      ],
+      "Amount": [
+        "Monto"
+      ],
+      "currency and value separated with colon": [
+        "Moneda y valor separado por dos puntos"
+      ],
+      "Add": [
+        "Agregar"
+      ],
+      "Instance": [
+        "Instancia"
+      ],
+      "Settings": [
+        "Configuración"
+      ],
+      "Orders": [
+        "Ordenes"
+      ],
+      "Products": [
+        "Productos"
+      ],
+      "Transfers": [
+        "Transferencias"
+      ],
+      "Connection": [
+        "Conexión"
+      ],
+      "Instances": [
+        "Instancias"
+      ],
+      "New": [
+        "Nuevo"
+      ],
+      "List": [
+        "Lista"
+      ],
+      "Log out": [
+        "Salir"
+      ],
+      "Clear": [
+        "Limpiar"
+      ],
+      "should be the same": [
+        "deberían ser iguales"
+      ],
+      "cannot be the same as before": [
+        "no puede ser igual al anterior"
+      ],
+      "You are updating the authorization token from instance %1$s with id %2$s": [
+        "Está actualizando el token de autorización para la instancia %1$s con id %2$s"
+      ],
+      "Old token": [
+        "Viejo token"
+      ],
+      "New token": [
+        "Nuevo token"
+      ],
+      "Clearing the auth token will mean public access to the instance": [
+        "Limpiar el token de autorización significa acceso publico a la instancia"
+      ],
+      "ID": [
+        "ID"
+      ],
+      "Image": [
+        "Imagen"
+      ],
+      "Unit": [
+        "Unidad"
+      ],
+      "Price": [
+        "Precio"
+      ],
+      "Stock": [
+        "Stock"
+      ],
+      "Taxes": [
+        "Impuesto"
+      ],
+      "Server not found": [
+        "Servidor no encontrado"
+      ],
+      "Couldn't access the server": [
+        "No se pudo aceder al servidor"
+      ],
+      "Got message %1$s from %2$s": [
+        "Recivimos el mensaje %1$s desde %2$s"
+      ],
+      "Unexpected Error": [
+        "Error inesperado"
+      ],
+      "Auth token": [
+        "Token de autorización"
+      ],
+      "Account address": [
+        "Dirección de cuenta"
+      ],
+      "Default max deposit fee": [
+        "Impuesto máximo de deposito por omisión"
+      ],
+      "Default max wire fee": [
+        "Impuesto máximo de transferencia por omisión"
+      ],
+      "Default wire fee amortization": [
+        "Amortización de impuesto de transferencia por omisión"
+      ],
+      "Jurisdiction": [
+        "Jurisdicción"
+      ],
+      "Default pay delay": [
+        "Retrazo de pago por omisión"
+      ],
+      "Default wire transfer delay": [
+        "Retrazo de transferencia por omisión"
+      ],
+      "could not create instance": [
+        "no se pudo crear la instancia"
+      ],
+      "Delete": [
+        "Borrando"
+      ],
+      "Edit": [
+        ""
+      ],
+      "There is no instances yet, add more pressing the + sign": [
+        "No hay instancias todavían, agregue mas presionando el signo +"
+      ],
+      "Inventory products": [
+        "Productos de inventario"
+      ],
+      "Total price": [
+        "Precio total"
+      ],
+      "Total tax": [
+        "Impuesto total"
+      ],
+      "Order price": [
+        "Precio de la orden"
+      ],
+      "Net": [
+        "Neto"
+      ],
+      "Summary": [
+        "Resumen"
+      ],
+      "Payments options": [
+        "Opciones de pago"
+      ],
+      "Auto refund deadline": [
+        "Plazo de reembolso automático"
+      ],
+      "Refund deadline": [
+        "Plazo de reembolso"
+      ],
+      "Pay deadline": [
+        "Plazo de pago"
+      ],
+      "Delivery date": [
+        "Fecha de entrega"
+      ],
+      "Location": [
+        "Ubicación"
+      ],
+      "Max fee": [
+        "Impuesto máximo"
+      ],
+      "Max wire fee": [
+        "Impuesto de transferencia máximo"
+      ],
+      "Wire fee amortization": [
+        "Amortización de impuesto de transferencia"
+      ],
+      "Fullfilment url": [
+        "URL de completitud"
+      ],
+      "Extra information": [
+        "Información extra"
+      ],
+      "select a product first": [
+        "seleccione un producto primero"
+      ],
+      "should be greater than 0": [
+        "La imagen debe ser mas chica que 1 MB"
+      ],
+      "cannot be greater than current stock and quantity previously added. max: %1$s": [
+        "no puede ser mayor al stock actual y la cantidad previamente agregada. máximo: %1$s"
+      ],
+      "cannot be greater than current stock %1$s": [
+        "no puede ser mayor al stock actual %1$s"
+      ],
+      "Quantity": [
+        "Cantidad"
+      ],
+      "Order": [
+        "Orden"
+      ],
+      "claimed": [
+        "reclamado"
+      ],
+      "copy url": [
+        "copiar url"
+      ],
+      "pay at": [
+        "pagar en"
+      ],
+      "created at": [
+        "creado"
+      ],
+      "Timeline": [
+        "Cronología"
+      ],
+      "Payment details": [
+        "Detalles de pago"
+      ],
+      "Order status": [
+        "Estado de orden"
+      ],
+      "Product list": [
+        "Lista de producto"
+      ],
+      "paid": [
+        "pagados"
+      ],
+      "wired": [
+        "transferido"
+      ],
+      "refunded": [
+        "reembolzado"
+      ],
+      "refund": [
+        "reembolzar"
+      ],
+      "Refunded amount": [
+        "Monto reembolzado"
+      ],
+      "Deposit total": [
+        "Total depositado"
+      ],
+      "unpaid": [
+        "impago"
+      ],
+      "Order status URL": [
+        "URL de estado de orden"
+      ],
+      "Pay URI": [
+        "URI de pago"
+      ],
+      "Unknown order status. This is an error, please contact the administrator.": [
+        "Estado de orden desconocido. Esto es un error, por favor contacte a su administrador"
+      ],
+      "refund created successfully": [
+        "reembolzo creado satisfactoriamente"
+      ],
+      "could not create the refund": [
+        "No se pudo aceder al servidor"
+      ],
+      "load newer orders": [
+        "cargar nuevas ordenes"
+      ],
+      "Date": [
+        "Fecha"
+      ],
+      "Refund": [
+        "Reembolzar"
+      ],
+      "load older orders": [
+        "cargar viejas ordenes"
+      ],
+      "No orders has been found": [
+        "No se enconraron ordenes"
+      ],
+      "date": [
+        "fecha"
+      ],
+      "amount": [
+        "monto"
+      ],
+      "reason": [
+        "razón"
+      ],
+      "Max refundable:": [
+        "Máximo reembolzable:"
+      ],
+      "Reason": [
+        "Razón"
+      ],
+      "duplicated": [
+        "duplicado"
+      ],
+      "requested by the customer": [
+        "pedido por el consumidor"
+      ],
+      "other": [
+        "otro"
+      ],
+      "go to order id": [
+        "ir a id de orden"
+      ],
+      "Paid": [
+        "Pagado"
+      ],
+      "Refunded": [
+        "Reembolzado"
+      ],
+      "Not wired": [
+        "No transferido"
+      ],
+      "All": [
+        "Todo"
+      ],
+      "could not create product": [
+        "no se pudo crear el producto"
+      ],
+      "Sell": [
+        "Venta"
+      ],
+      "Profit": [
+        "Ganancia"
+      ],
+      "Sold": [
+        "Vendido"
+      ],
+      "product updated successfully": [
+        "producto actualizado correctamente"
+      ],
+      "could not update the product": [
+        "no se pudo actualizar el producto"
+      ],
+      "product delete successfully": [
+        "producto fue eliminado correctamente"
+      ],
+      "could not delete the product": [
+        "no se pudo eliminar el producto"
+      ],
+      "Tips": [
+        "Propinas"
+      ],
+      "Committed amount": [
+        ""
+      ],
+      "Exchange initial amount": [
+        ""
+      ],
+      "Merchant initial amount": [
+        ""
+      ],
+      "There is no tips yet, add more pressing the + sign": [
+        "No hay propinas todavía, agregar mas presionando el signo +"
+      ],
+      "cannot be empty": [
+        "no puede ser vacío"
+      ],
+      "check the id, doest look valid": [
+        "verificar el id, no parece válido"
+      ],
+      "should have 52 characters, current %1$s": [
+        "debería tener 52 caracteres, actualmente %1$s"
+      ],
+      "URL doesn't have the right format": [
+        "La URL no tiene el formato correcto"
+      ],
+      "Transfer ID": [
+        "Transferencias"
+      ],
+      "Account Address": [
+        "Dirección de cuenta"
+      ],
+      "Exchange URL": [
+        "URL del Exchange"
+      ],
+      "could not inform transfer": [
+        "no se pudo crear la instancia"
+      ],
+      "load newer transfers": [
+        "cargar nuevas ordenes"
+      ],
+      "Credit": [
+        "Crédito"
+      ],
+      "Confirmed": [
+        "Confirmar"
+      ],
+      "Verified": [
+        "Verificado"
+      ],
+      "Executed at": [
+        "creado"
+      ],
+      "yes": [
+        "si"
+      ],
+      "no": [
+        "no"
+      ],
+      "unknown": [
+        "desconocido"
+      ],
+      "load older transfers": [
+        "cargar viejas transferencias"
+      ],
+      "There is no transfer yet, add more pressing the + sign": [
+        "No hay transferencias todavía, agregar mas presionando el signo +"
+      ]
+    }
+  }
+};
+
+strings['fr'] = {
+  "domain": "messages",
+  "locale_data": {
+    "messages": {
+      "": {
+        "domain": "messages",
+        "plural_forms": "nplurals=2; plural=(n != 1);",
+        "lang": ""
+      },
+      "Access denied": [
+        ""
+      ],
+      "Check your token is valid": [
+        ""
+      ],
+      "Couldn't access the server.": [
+        ""
+      ],
+      "Could not infer instance id from url %1$s": [
+        ""
+      ],
+      "HTTP status #%1$s: Server reported a problem": [
+        ""
+      ],
+      "Got message: \"%1$s\" from: %2$s": [
+        ""
+      ],
+      "No default instance": [
+        ""
+      ],
+      "in order to use merchant backoffice, you should create the default instance": [
+        ""
+      ],
+      "Server reported a problem: HTTP status #%1$s": [
+        ""
+      ],
+      "Got message: %1$s from: %2$s": [
+        ""
+      ],
+      "Login required": [
+        ""
+      ],
+      "Please enter your auth token. Token should have \"secret-token:\" and start with Bearer or ApiKey": [
+        ""
+      ],
+      "Confirm": [
+        ""
+      ],
+      "The value %1$s is invalid for a payment url": [
+        ""
+      ],
+      "pick a date": [
+        ""
+      ],
+      "clear": [
+        ""
+      ],
+      "never": [
+        ""
+      ],
+      "Image should be smaller than 1 MB": [
+        ""
+      ],
+      "Country": [
+        ""
+      ],
+      "Address": [
+        ""
+      ],
+      "Building number": [
+        ""
+      ],
+      "Building name": [
+        ""
+      ],
+      "Street": [
+        ""
+      ],
+      "Post code": [
+        ""
+      ],
+      "Town location": [
+        ""
+      ],
+      "Town": [
+        ""
+      ],
+      "District": [
+        ""
+      ],
+      "Country subdivision": [
+        ""
+      ],
+      "Product id": [
+        ""
+      ],
+      "Description": [
+        ""
+      ],
+      "Name": [
+        ""
+      ],
+      "loading...": [
+        ""
+      ],
+      "no products found": [
+        ""
+      ],
+      "no results": [
+        ""
+      ],
+      "Deleting": [
+        ""
+      ],
+      "Changing": [
+        ""
+      ],
+      "Manage token": [
+        ""
+      ],
+      "Update": [
+        ""
+      ],
+      "Remove": [
+        ""
+      ],
+      "Cancel": [
+        ""
+      ],
+      "Manage stock": [
+        ""
+      ],
+      "Infinite": [
+        ""
+      ],
+      "lost cannot be greater that current + incoming (max %1$s)": [
+        ""
+      ],
+      "current stock will change from %1$s to %2$s": [
+        ""
+      ],
+      "current stock will stay at %1$s": [
+        ""
+      ],
+      "Incoming": [
+        ""
+      ],
+      "Lost": [
+        ""
+      ],
+      "Current": [
+        ""
+      ],
+      "without stock": [
+        ""
+      ],
+      "Next restock": [
+        ""
+      ],
+      "Delivery address": [
+        ""
+      ],
+      "this product has no taxes": [
+        ""
+      ],
+      "Amount": [
+        ""
+      ],
+      "currency and value separated with colon": [
+        ""
+      ],
+      "Add": [
+        ""
+      ],
+      "Instance": [
+        ""
+      ],
+      "Settings": [
+        ""
+      ],
+      "Orders": [
+        ""
+      ],
+      "Products": [
+        ""
+      ],
+      "Transfers": [
+        ""
+      ],
+      "Connection": [
+        ""
+      ],
+      "Instances": [
+        ""
+      ],
+      "New": [
+        ""
+      ],
+      "List": [
+        ""
+      ],
+      "Log out": [
+        ""
+      ],
+      "Clear": [
+        ""
+      ],
+      "should be the same": [
+        ""
+      ],
+      "cannot be the same as before": [
+        ""
+      ],
+      "You are updating the authorization token from instance %1$s with id %2$s": [
+        ""
+      ],
+      "Old token": [
+        ""
+      ],
+      "New token": [
+        ""
+      ],
+      "Clearing the auth token will mean public access to the instance": [
+        ""
+      ],
+      "ID": [
+        ""
+      ],
+      "Image": [
+        ""
+      ],
+      "Unit": [
+        ""
+      ],
+      "Price": [
+        ""
+      ],
+      "Stock": [
+        ""
+      ],
+      "Taxes": [
+        ""
+      ],
+      "Server not found": [
+        ""
+      ],
+      "Couldn't access the server": [
+        ""
+      ],
+      "Got message %1$s from %2$s": [
+        ""
+      ],
+      "Unexpected Error": [
+        ""
+      ],
+      "Auth token": [
+        ""
+      ],
+      "Account address": [
+        ""
+      ],
+      "Default max deposit fee": [
+        ""
+      ],
+      "Default max wire fee": [
+        ""
+      ],
+      "Default wire fee amortization": [
+        ""
+      ],
+      "Jurisdiction": [
+        ""
+      ],
+      "Default pay delay": [
+        ""
+      ],
+      "Default wire transfer delay": [
+        ""
+      ],
+      "could not create instance": [
+        ""
+      ],
+      "Delete": [
+        ""
+      ],
+      "Edit": [
+        ""
+      ],
+      "There is no instances yet, add more pressing the + sign": [
+        ""
+      ],
+      "Inventory products": [
+        ""
+      ],
+      "Total price": [
+        ""
+      ],
+      "Total tax": [
+        ""
+      ],
+      "Order price": [
+        ""
+      ],
+      "Net": [
+        ""
+      ],
+      "Summary": [
+        ""
+      ],
+      "Payments options": [
+        ""
+      ],
+      "Auto refund deadline": [
+        ""
+      ],
+      "Refund deadline": [
+        ""
+      ],
+      "Pay deadline": [
+        ""
+      ],
+      "Delivery date": [
+        ""
+      ],
+      "Location": [
+        ""
+      ],
+      "Max fee": [
+        ""
+      ],
+      "Max wire fee": [
+        ""
+      ],
+      "Wire fee amortization": [
+        ""
+      ],
+      "Fullfilment url": [
+        ""
+      ],
+      "Extra information": [
+        ""
+      ],
+      "select a product first": [
+        ""
+      ],
+      "should be greater than 0": [
+        ""
+      ],
+      "cannot be greater than current stock and quantity previously added. max: %1$s": [
+        ""
+      ],
+      "cannot be greater than current stock %1$s": [
+        ""
+      ],
+      "Quantity": [
+        ""
+      ],
+      "Order": [
+        ""
+      ],
+      "claimed": [
+        ""
+      ],
+      "copy url": [
+        ""
+      ],
+      "pay at": [
+        ""
+      ],
+      "created at": [
+        ""
+      ],
+      "Timeline": [
+        ""
+      ],
+      "Payment details": [
+        ""
+      ],
+      "Order status": [
+        ""
+      ],
+      "Product list": [
+        ""
+      ],
+      "paid": [
+        ""
+      ],
+      "wired": [
+        ""
+      ],
+      "refunded": [
+        ""
+      ],
+      "refund": [
+        ""
+      ],
+      "Refunded amount": [
+        ""
+      ],
+      "Deposit total": [
+        ""
+      ],
+      "unpaid": [
+        ""
+      ],
+      "Order status URL": [
+        ""
+      ],
+      "Pay URI": [
+        ""
+      ],
+      "Unknown order status. This is an error, please contact the administrator.": [
+        ""
+      ],
+      "refund created successfully": [
+        ""
+      ],
+      "could not create the refund": [
+        ""
+      ],
+      "load newer orders": [
+        ""
+      ],
+      "Date": [
+        ""
+      ],
+      "Refund": [
+        ""
+      ],
+      "load older orders": [
+        ""
+      ],
+      "No orders has been found": [
+        ""
+      ],
+      "date": [
+        ""
+      ],
+      "amount": [
+        ""
+      ],
+      "reason": [
+        ""
+      ],
+      "Max refundable:": [
+        ""
+      ],
+      "Reason": [
+        ""
+      ],
+      "duplicated": [
+        ""
+      ],
+      "requested by the customer": [
+        ""
+      ],
+      "other": [
+        ""
+      ],
+      "go to order id": [
+        ""
+      ],
+      "Paid": [
+        ""
+      ],
+      "Refunded": [
+        ""
+      ],
+      "Not wired": [
+        ""
+      ],
+      "All": [
+        ""
+      ],
+      "could not create product": [
+        ""
+      ],
+      "Sell": [
+        ""
+      ],
+      "Profit": [
+        ""
+      ],
+      "Sold": [
+        ""
+      ],
+      "product updated successfully": [
+        ""
+      ],
+      "could not update the product": [
+        ""
+      ],
+      "product delete successfully": [
+        ""
+      ],
+      "could not delete the product": [
+        ""
+      ],
+      "Tips": [
+        ""
+      ],
+      "Committed amount": [
+        ""
+      ],
+      "Exchange initial amount": [
+        ""
+      ],
+      "Merchant initial amount": [
+        ""
+      ],
+      "There is no tips yet, add more pressing the + sign": [
+        ""
+      ],
+      "cannot be empty": [
+        ""
+      ],
+      "check the id, doest look valid": [
+        ""
+      ],
+      "should have 52 characters, current %1$s": [
+        ""
+      ],
+      "URL doesn't have the right format": [
+        ""
+      ],
+      "Transfer ID": [
+        ""
+      ],
+      "Account Address": [
+        ""
+      ],
+      "Exchange URL": [
+        ""
+      ],
+      "could not inform transfer": [
+        ""
+      ],
+      "load newer transfers": [
+        ""
+      ],
+      "Credit": [
+        ""
+      ],
+      "Confirmed": [
+        ""
+      ],
+      "Verified": [
+        ""
+      ],
+      "Executed at": [
+        ""
+      ],
+      "yes": [
+        ""
+      ],
+      "no": [
+        ""
+      ],
+      "unknown": [
+        ""
+      ],
+      "load older transfers": [
+        ""
+      ],
+      "There is no transfer yet, add more pressing the + sign": [
+        ""
+      ]
+    }
+  }
+};
+
+strings['it'] = {
+  "domain": "messages",
+  "locale_data": {
+    "messages": {
+      "": {
+        "domain": "messages",
+        "plural_forms": "nplurals=2; plural=(n != 1);",
+        "lang": ""
+      },
+      "Access denied": [
+        ""
+      ],
+      "Check your token is valid": [
+        ""
+      ],
+      "Couldn't access the server.": [
+        ""
+      ],
+      "Could not infer instance id from url %1$s": [
+        ""
+      ],
+      "HTTP status #%1$s: Server reported a problem": [
+        ""
+      ],
+      "Got message: \"%1$s\" from: %2$s": [
+        ""
+      ],
+      "No default instance": [
+        ""
+      ],
+      "in order to use merchant backoffice, you should create the default instance": [
+        ""
+      ],
+      "Server reported a problem: HTTP status #%1$s": [
+        ""
+      ],
+      "Got message: %1$s from: %2$s": [
+        ""
+      ],
+      "Login required": [
+        ""
+      ],
+      "Please enter your auth token. Token should have \"secret-token:\" and start with Bearer or ApiKey": [
+        ""
+      ],
+      "Confirm": [
+        ""
+      ],
+      "The value %1$s is invalid for a payment url": [
+        ""
+      ],
+      "pick a date": [
+        ""
+      ],
+      "clear": [
+        ""
+      ],
+      "never": [
+        ""
+      ],
+      "Image should be smaller than 1 MB": [
+        ""
+      ],
+      "Country": [
+        ""
+      ],
+      "Address": [
+        ""
+      ],
+      "Building number": [
+        ""
+      ],
+      "Building name": [
+        ""
+      ],
+      "Street": [
+        ""
+      ],
+      "Post code": [
+        ""
+      ],
+      "Town location": [
+        ""
+      ],
+      "Town": [
+        ""
+      ],
+      "District": [
+        ""
+      ],
+      "Country subdivision": [
+        ""
+      ],
+      "Product id": [
+        ""
+      ],
+      "Description": [
+        ""
+      ],
+      "Name": [
+        ""
+      ],
+      "loading...": [
+        ""
+      ],
+      "no products found": [
+        ""
+      ],
+      "no results": [
+        ""
+      ],
+      "Deleting": [
+        ""
+      ],
+      "Changing": [
+        ""
+      ],
+      "Manage token": [
+        ""
+      ],
+      "Update": [
+        ""
+      ],
+      "Remove": [
+        ""
+      ],
+      "Cancel": [
+        ""
+      ],
+      "Manage stock": [
+        ""
+      ],
+      "Infinite": [
+        ""
+      ],
+      "lost cannot be greater that current + incoming (max %1$s)": [
+        ""
+      ],
+      "current stock will change from %1$s to %2$s": [
+        ""
+      ],
+      "current stock will stay at %1$s": [
+        ""
+      ],
+      "Incoming": [
+        ""
+      ],
+      "Lost": [
+        ""
+      ],
+      "Current": [
+        ""
+      ],
+      "without stock": [
+        ""
+      ],
+      "Next restock": [
+        ""
+      ],
+      "Delivery address": [
+        ""
+      ],
+      "this product has no taxes": [
+        ""
+      ],
+      "Amount": [
+        ""
+      ],
+      "currency and value separated with colon": [
+        ""
+      ],
+      "Add": [
+        ""
+      ],
+      "Instance": [
+        ""
+      ],
+      "Settings": [
+        ""
+      ],
+      "Orders": [
+        ""
+      ],
+      "Products": [
+        ""
+      ],
+      "Transfers": [
+        ""
+      ],
+      "Connection": [
+        ""
+      ],
+      "Instances": [
+        ""
+      ],
+      "New": [
+        ""
+      ],
+      "List": [
+        ""
+      ],
+      "Log out": [
+        ""
+      ],
+      "Clear": [
+        ""
+      ],
+      "should be the same": [
+        ""
+      ],
+      "cannot be the same as before": [
+        ""
+      ],
+      "You are updating the authorization token from instance %1$s with id %2$s": [
+        ""
+      ],
+      "Old token": [
+        ""
+      ],
+      "New token": [
+        ""
+      ],
+      "Clearing the auth token will mean public access to the instance": [
+        ""
+      ],
+      "ID": [
+        ""
+      ],
+      "Image": [
+        ""
+      ],
+      "Unit": [
+        ""
+      ],
+      "Price": [
+        ""
+      ],
+      "Stock": [
+        ""
+      ],
+      "Taxes": [
+        ""
+      ],
+      "Server not found": [
+        ""
+      ],
+      "Couldn't access the server": [
+        ""
+      ],
+      "Got message %1$s from %2$s": [
+        ""
+      ],
+      "Unexpected Error": [
+        ""
+      ],
+      "Auth token": [
+        ""
+      ],
+      "Account address": [
+        ""
+      ],
+      "Default max deposit fee": [
+        ""
+      ],
+      "Default max wire fee": [
+        ""
+      ],
+      "Default wire fee amortization": [
+        ""
+      ],
+      "Jurisdiction": [
+        ""
+      ],
+      "Default pay delay": [
+        ""
+      ],
+      "Default wire transfer delay": [
+        ""
+      ],
+      "could not create instance": [
+        ""
+      ],
+      "Delete": [
+        ""
+      ],
+      "Edit": [
+        ""
+      ],
+      "There is no instances yet, add more pressing the + sign": [
+        ""
+      ],
+      "Inventory products": [
+        ""
+      ],
+      "Total price": [
+        ""
+      ],
+      "Total tax": [
+        ""
+      ],
+      "Order price": [
+        ""
+      ],
+      "Net": [
+        ""
+      ],
+      "Summary": [
+        ""
+      ],
+      "Payments options": [
+        ""
+      ],
+      "Auto refund deadline": [
+        ""
+      ],
+      "Refund deadline": [
+        ""
+      ],
+      "Pay deadline": [
+        ""
+      ],
+      "Delivery date": [
+        ""
+      ],
+      "Location": [
+        ""
+      ],
+      "Max fee": [
+        ""
+      ],
+      "Max wire fee": [
+        ""
+      ],
+      "Wire fee amortization": [
+        ""
+      ],
+      "Fullfilment url": [
+        ""
+      ],
+      "Extra information": [
+        ""
+      ],
+      "select a product first": [
+        ""
+      ],
+      "should be greater than 0": [
+        ""
+      ],
+      "cannot be greater than current stock and quantity previously added. max: %1$s": [
+        ""
+      ],
+      "cannot be greater than current stock %1$s": [
+        ""
+      ],
+      "Quantity": [
+        ""
+      ],
+      "Order": [
+        ""
+      ],
+      "claimed": [
+        ""
+      ],
+      "copy url": [
+        ""
+      ],
+      "pay at": [
+        ""
+      ],
+      "created at": [
+        ""
+      ],
+      "Timeline": [
+        ""
+      ],
+      "Payment details": [
+        ""
+      ],
+      "Order status": [
+        ""
+      ],
+      "Product list": [
+        ""
+      ],
+      "paid": [
+        ""
+      ],
+      "wired": [
+        ""
+      ],
+      "refunded": [
+        ""
+      ],
+      "refund": [
+        ""
+      ],
+      "Refunded amount": [
+        ""
+      ],
+      "Deposit total": [
+        ""
+      ],
+      "unpaid": [
+        ""
+      ],
+      "Order status URL": [
+        ""
+      ],
+      "Pay URI": [
+        ""
+      ],
+      "Unknown order status. This is an error, please contact the administrator.": [
+        ""
+      ],
+      "refund created successfully": [
+        ""
+      ],
+      "could not create the refund": [
+        ""
+      ],
+      "load newer orders": [
+        ""
+      ],
+      "Date": [
+        ""
+      ],
+      "Refund": [
+        ""
+      ],
+      "load older orders": [
+        ""
+      ],
+      "No orders has been found": [
+        ""
+      ],
+      "date": [
+        ""
+      ],
+      "amount": [
+        ""
+      ],
+      "reason": [
+        ""
+      ],
+      "Max refundable:": [
+        ""
+      ],
+      "Reason": [
+        ""
+      ],
+      "duplicated": [
+        ""
+      ],
+      "requested by the customer": [
+        ""
+      ],
+      "other": [
+        ""
+      ],
+      "go to order id": [
+        ""
+      ],
+      "Paid": [
+        ""
+      ],
+      "Refunded": [
+        ""
+      ],
+      "Not wired": [
+        ""
+      ],
+      "All": [
+        ""
+      ],
+      "could not create product": [
+        ""
+      ],
+      "Sell": [
+        ""
+      ],
+      "Profit": [
+        ""
+      ],
+      "Sold": [
+        ""
+      ],
+      "product updated successfully": [
+        ""
+      ],
+      "could not update the product": [
+        ""
+      ],
+      "product delete successfully": [
+        ""
+      ],
+      "could not delete the product": [
+        ""
+      ],
+      "Tips": [
+        ""
+      ],
+      "Committed amount": [
+        ""
+      ],
+      "Exchange initial amount": [
+        ""
+      ],
+      "Merchant initial amount": [
+        ""
+      ],
+      "There is no tips yet, add more pressing the + sign": [
+        ""
+      ],
+      "cannot be empty": [
+        ""
+      ],
+      "check the id, doest look valid": [
+        ""
+      ],
+      "should have 52 characters, current %1$s": [
+        ""
+      ],
+      "URL doesn't have the right format": [
+        ""
+      ],
+      "Transfer ID": [
+        ""
+      ],
+      "Account Address": [
+        ""
+      ],
+      "Exchange URL": [
+        ""
+      ],
+      "could not inform transfer": [
+        ""
+      ],
+      "load newer transfers": [
+        ""
+      ],
+      "Credit": [
+        ""
+      ],
+      "Confirmed": [
+        ""
+      ],
+      "Verified": [
+        ""
+      ],
+      "Executed at": [
+        ""
+      ],
+      "yes": [
+        ""
+      ],
+      "no": [
+        ""
+      ],
+      "unknown": [
+        ""
+      ],
+      "load older transfers": [
+        ""
+      ],
+      "There is no transfer yet, add more pressing the + sign": [
+        ""
+      ]
+    }
+  }
+};
+
+strings['sv'] = {
+  "domain": "messages",
+  "locale_data": {
+    "messages": {
+      "": {
+        "domain": "messages",
+        "plural_forms": "nplurals=2; plural=(n != 1);",
+        "lang": ""
+      },
+      "Access denied": [
+        ""
+      ],
+      "Check your token is valid": [
+        ""
+      ],
+      "Couldn't access the server.": [
+        ""
+      ],
+      "Could not infer instance id from url %1$s": [
+        ""
+      ],
+      "HTTP status #%1$s: Server reported a problem": [
+        ""
+      ],
+      "Got message: \"%1$s\" from: %2$s": [
+        ""
+      ],
+      "No default instance": [
+        ""
+      ],
+      "in order to use merchant backoffice, you should create the default instance": [
+        ""
+      ],
+      "Server reported a problem: HTTP status #%1$s": [
+        ""
+      ],
+      "Got message: %1$s from: %2$s": [
+        ""
+      ],
+      "Login required": [
+        ""
+      ],
+      "Please enter your auth token. Token should have \"secret-token:\" and start with Bearer or ApiKey": [
+        ""
+      ],
+      "Confirm": [
+        ""
+      ],
+      "The value %1$s is invalid for a payment url": [
+        ""
+      ],
+      "pick a date": [
+        ""
+      ],
+      "clear": [
+        ""
+      ],
+      "never": [
+        ""
+      ],
+      "Image should be smaller than 1 MB": [
+        ""
+      ],
+      "Country": [
+        ""
+      ],
+      "Address": [
+        ""
+      ],
+      "Building number": [
+        ""
+      ],
+      "Building name": [
+        ""
+      ],
+      "Street": [
+        ""
+      ],
+      "Post code": [
+        ""
+      ],
+      "Town location": [
+        ""
+      ],
+      "Town": [
+        ""
+      ],
+      "District": [
+        ""
+      ],
+      "Country subdivision": [
+        ""
+      ],
+      "Product id": [
+        ""
+      ],
+      "Description": [
+        ""
+      ],
+      "Name": [
+        ""
+      ],
+      "loading...": [
+        ""
+      ],
+      "no products found": [
+        ""
+      ],
+      "no results": [
+        ""
+      ],
+      "Deleting": [
+        ""
+      ],
+      "Changing": [
+        ""
+      ],
+      "Manage token": [
+        ""
+      ],
+      "Update": [
+        ""
+      ],
+      "Remove": [
+        ""
+      ],
+      "Cancel": [
+        ""
+      ],
+      "Manage stock": [
+        ""
+      ],
+      "Infinite": [
+        ""
+      ],
+      "lost cannot be greater that current + incoming (max %1$s)": [
+        ""
+      ],
+      "current stock will change from %1$s to %2$s": [
+        ""
+      ],
+      "current stock will stay at %1$s": [
+        ""
+      ],
+      "Incoming": [
+        ""
+      ],
+      "Lost": [
+        ""
+      ],
+      "Current": [
+        ""
+      ],
+      "without stock": [
+        ""
+      ],
+      "Next restock": [
+        ""
+      ],
+      "Delivery address": [
+        ""
+      ],
+      "this product has no taxes": [
+        ""
+      ],
+      "Amount": [
+        ""
+      ],
+      "currency and value separated with colon": [
+        ""
+      ],
+      "Add": [
+        ""
+      ],
+      "Instance": [
+        ""
+      ],
+      "Settings": [
+        ""
+      ],
+      "Orders": [
+        ""
+      ],
+      "Products": [
+        ""
+      ],
+      "Transfers": [
+        ""
+      ],
+      "Connection": [
+        ""
+      ],
+      "Instances": [
+        ""
+      ],
+      "New": [
+        ""
+      ],
+      "List": [
+        ""
+      ],
+      "Log out": [
+        ""
+      ],
+      "Clear": [
+        ""
+      ],
+      "should be the same": [
+        ""
+      ],
+      "cannot be the same as before": [
+        ""
+      ],
+      "You are updating the authorization token from instance %1$s with id %2$s": [
+        ""
+      ],
+      "Old token": [
+        ""
+      ],
+      "New token": [
+        ""
+      ],
+      "Clearing the auth token will mean public access to the instance": [
+        ""
+      ],
+      "ID": [
+        ""
+      ],
+      "Image": [
+        ""
+      ],
+      "Unit": [
+        ""
+      ],
+      "Price": [
+        ""
+      ],
+      "Stock": [
+        ""
+      ],
+      "Taxes": [
+        ""
+      ],
+      "Server not found": [
+        ""
+      ],
+      "Couldn't access the server": [
+        ""
+      ],
+      "Got message %1$s from %2$s": [
+        ""
+      ],
+      "Unexpected Error": [
+        ""
+      ],
+      "Auth token": [
+        ""
+      ],
+      "Account address": [
+        ""
+      ],
+      "Default max deposit fee": [
+        ""
+      ],
+      "Default max wire fee": [
+        ""
+      ],
+      "Default wire fee amortization": [
+        ""
+      ],
+      "Jurisdiction": [
+        ""
+      ],
+      "Default pay delay": [
+        ""
+      ],
+      "Default wire transfer delay": [
+        ""
+      ],
+      "could not create instance": [
+        ""
+      ],
+      "Delete": [
+        ""
+      ],
+      "Edit": [
+        ""
+      ],
+      "There is no instances yet, add more pressing the + sign": [
+        ""
+      ],
+      "Inventory products": [
+        ""
+      ],
+      "Total price": [
+        ""
+      ],
+      "Total tax": [
+        ""
+      ],
+      "Order price": [
+        ""
+      ],
+      "Net": [
+        ""
+      ],
+      "Summary": [
+        ""
+      ],
+      "Payments options": [
+        ""
+      ],
+      "Auto refund deadline": [
+        ""
+      ],
+      "Refund deadline": [
+        ""
+      ],
+      "Pay deadline": [
+        ""
+      ],
+      "Delivery date": [
+        ""
+      ],
+      "Location": [
+        ""
+      ],
+      "Max fee": [
+        ""
+      ],
+      "Max wire fee": [
+        ""
+      ],
+      "Wire fee amortization": [
+        ""
+      ],
+      "Fullfilment url": [
+        ""
+      ],
+      "Extra information": [
+        ""
+      ],
+      "select a product first": [
+        ""
+      ],
+      "should be greater than 0": [
+        ""
+      ],
+      "cannot be greater than current stock and quantity previously added. max: %1$s": [
+        ""
+      ],
+      "cannot be greater than current stock %1$s": [
+        ""
+      ],
+      "Quantity": [
+        ""
+      ],
+      "Order": [
+        ""
+      ],
+      "claimed": [
+        ""
+      ],
+      "copy url": [
+        ""
+      ],
+      "pay at": [
+        ""
+      ],
+      "created at": [
+        ""
+      ],
+      "Timeline": [
+        ""
+      ],
+      "Payment details": [
+        ""
+      ],
+      "Order status": [
+        ""
+      ],
+      "Product list": [
+        ""
+      ],
+      "paid": [
+        ""
+      ],
+      "wired": [
+        ""
+      ],
+      "refunded": [
+        ""
+      ],
+      "refund": [
+        ""
+      ],
+      "Refunded amount": [
+        ""
+      ],
+      "Deposit total": [
+        ""
+      ],
+      "unpaid": [
+        ""
+      ],
+      "Order status URL": [
+        ""
+      ],
+      "Pay URI": [
+        ""
+      ],
+      "Unknown order status. This is an error, please contact the administrator.": [
+        ""
+      ],
+      "refund created successfully": [
+        ""
+      ],
+      "could not create the refund": [
+        ""
+      ],
+      "load newer orders": [
+        ""
+      ],
+      "Date": [
+        ""
+      ],
+      "Refund": [
+        ""
+      ],
+      "load older orders": [
+        ""
+      ],
+      "No orders has been found": [
+        ""
+      ],
+      "date": [
+        ""
+      ],
+      "amount": [
+        ""
+      ],
+      "reason": [
+        ""
+      ],
+      "Max refundable:": [
+        ""
+      ],
+      "Reason": [
+        ""
+      ],
+      "duplicated": [
+        ""
+      ],
+      "requested by the customer": [
+        ""
+      ],
+      "other": [
+        ""
+      ],
+      "go to order id": [
+        ""
+      ],
+      "Paid": [
+        ""
+      ],
+      "Refunded": [
+        ""
+      ],
+      "Not wired": [
+        ""
+      ],
+      "All": [
+        ""
+      ],
+      "could not create product": [
+        ""
+      ],
+      "Sell": [
+        ""
+      ],
+      "Profit": [
+        ""
+      ],
+      "Sold": [
+        ""
+      ],
+      "product updated successfully": [
+        ""
+      ],
+      "could not update the product": [
+        ""
+      ],
+      "product delete successfully": [
+        ""
+      ],
+      "could not delete the product": [
+        ""
+      ],
+      "Tips": [
+        ""
+      ],
+      "Committed amount": [
+        ""
+      ],
+      "Exchange initial amount": [
+        ""
+      ],
+      "Merchant initial amount": [
+        ""
+      ],
+      "There is no tips yet, add more pressing the + sign": [
+        ""
+      ],
+      "cannot be empty": [
+        ""
+      ],
+      "check the id, doest look valid": [
+        ""
+      ],
+      "should have 52 characters, current %1$s": [
+        ""
+      ],
+      "URL doesn't have the right format": [
+        ""
+      ],
+      "Transfer ID": [
+        ""
+      ],
+      "Account Address": [
+        ""
+      ],
+      "Exchange URL": [
+        ""
+      ],
+      "could not inform transfer": [
+        ""
+      ],
+      "load newer transfers": [
+        ""
+      ],
+      "Credit": [
+        ""
+      ],
+      "Confirmed": [
+        ""
+      ],
+      "Verified": [
+        ""
+      ],
+      "Executed at": [
+        ""
+      ],
+      "yes": [
+        ""
+      ],
+      "no": [
+        ""
+      ],
+      "unknown": [
+        ""
+      ],
+      "load older transfers": [
+        ""
+      ],
+      "There is no transfer yet, add more pressing the + sign": [
+        ""
+      ]
+    }
+  }
+};
+
diff --git a/packages/merchant-backoffice-ui/src/i18n/sv.po b/packages/merchant-backoffice-ui/src/i18n/sv.po
new file mode 100644
index 000000000..6b35bd0ce
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/i18n/sv.po
@@ -0,0 +1,1057 @@
+# This file is part of TALER
+# (C) 2016 GNUnet e.V.
+#
+# TALER is free software; you can redistribute it and/or modify it under the
+# terms of the GNU General Public License as published by the Free Software
+# Foundation; either version 3, or (at your option) any later version.
+#
+# TALER is distributed in the hope that it will be useful, but WITHOUT ANY
+# WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+# A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License along with
+# TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+#
+#, fuzzy
+msgid ""
+msgstr ""
+"Project-Id-Version: Taler Wallet\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2016-11-23 00:00+0100\n"
+"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
+"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
+"Language-Team: LANGUAGE <LL@li.org>\n"
+"Language: \n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+#: src/ApplicationReadyRoutes.tsx:50 src/InstanceRoutes.tsx:118
+#: src/InstanceRoutes.tsx:299
+#, c-format
+msgid "Access denied"
+msgstr ""
+
+#: src/ApplicationReadyRoutes.tsx:51 src/InstanceRoutes.tsx:118
+#: src/InstanceRoutes.tsx:300
+#, c-format
+msgid "Check your token is valid"
+msgstr ""
+
+#: src/ApplicationReadyRoutes.tsx:72
+#, c-format
+msgid "Couldn't access the server."
+msgstr ""
+
+#: src/ApplicationReadyRoutes.tsx:73
+#, c-format
+msgid "Could not infer instance id from url %1$s"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:109
+#, c-format
+msgid "HTTP status #%1$s: Server reported a problem"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:110
+#, c-format
+msgid "Got message: \"%1$s\" from: %2$s"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:127
+#, c-format
+msgid "No default instance"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:128
+#, c-format
+msgid ""
+"in order to use merchant backoffice, you should create the default instance"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:288
+#, c-format
+msgid "Server reported a problem: HTTP status #%1$s"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:289
+#, c-format
+msgid "Got message: %1$s from: %2$s"
+msgstr ""
+
+#: src/components/exception/login.tsx:46
+#, c-format
+msgid "Login required"
+msgstr ""
+
+#: src/components/exception/login.tsx:49
+#, c-format
+msgid ""
+"Please enter your auth token. Token should have \"secret-token:\" and start "
+"with Bearer or ApiKey"
+msgstr ""
+
+#: src/components/exception/login.tsx:86 src/components/modal/index.tsx:53
+#: src/components/modal/index.tsx:75 src/paths/admin/create/CreatePage.tsx:115
+#: src/paths/instance/orders/create/CreatePage.tsx:325
+#: src/paths/instance/products/create/CreatePage.tsx:51
+#: src/paths/instance/products/list/Table.tsx:174
+#: src/paths/instance/products/list/Table.tsx:228
+#: src/paths/instance/products/update/UpdatePage.tsx:55
+#: src/paths/instance/transfers/create/CreatePage.tsx:89
+#: src/paths/instance/update/UpdatePage.tsx:134
+#, c-format
+msgid "Confirm"
+msgstr ""
+
+#: src/components/form/InputArray.tsx:72
+#, c-format
+msgid "The value %1$s is invalid for a payment url"
+msgstr ""
+
+#: src/components/form/InputDate.tsx:67
+#: src/paths/instance/orders/list/index.tsx:123
+#, c-format
+msgid "pick a date"
+msgstr ""
+
+#: src/components/form/InputDate.tsx:81
+#, c-format
+msgid "clear"
+msgstr ""
+
+#: src/components/form/InputDate.tsx:83
+#: src/paths/instance/transfers/list/Table.tsx:140
+#, c-format
+msgid "never"
+msgstr ""
+
+#: src/components/form/InputImage.tsx:80
+#, c-format
+msgid "Image should be smaller than 1 MB"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:28
+#, c-format
+msgid "Country"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:30
+#: src/paths/admin/create/CreatePage.tsx:99
+#: src/paths/instance/transfers/list/Table.tsx:124
+#: src/paths/instance/update/UpdatePage.tsx:118
+#, c-format
+msgid "Address"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:34
+#, c-format
+msgid "Building number"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:35
+#, c-format
+msgid "Building name"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:36
+#, c-format
+msgid "Street"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:37
+#, c-format
+msgid "Post code"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:38
+#, c-format
+msgid "Town location"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:39
+#, c-format
+msgid "Town"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:40
+#, c-format
+msgid "District"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:41
+#, c-format
+msgid "Country subdivision"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:59
+#, c-format
+msgid "Product id"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:60
+#: src/components/product/ProductForm.tsx:99
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:122
+#: src/paths/instance/orders/list/Table.tsx:227
+#: src/paths/instance/products/list/Table.tsx:86
+#, c-format
+msgid "Description"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:73
+#: src/components/form/InputTaxes.tsx:81
+#: src/paths/admin/create/CreatePage.tsx:87 src/paths/admin/list/Table.tsx:110
+#: src/paths/instance/details/DetailPage.tsx:76
+#: src/paths/instance/update/UpdatePage.tsx:106
+#, c-format
+msgid "Name"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:102
+#, c-format
+msgid "loading..."
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:108
+#, c-format
+msgid "no products found"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:116
+#, c-format
+msgid "no results"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:33
+#, c-format
+msgid "Deleting"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:34
+#, c-format
+msgid "Changing"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:60
+#, c-format
+msgid "Manage token"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:83
+#, c-format
+msgid "Update"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:100
+#: src/paths/instance/orders/create/CreatePage.tsx:252
+#: src/paths/instance/orders/create/CreatePage.tsx:273
+#, c-format
+msgid "Remove"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:106 src/components/modal/index.tsx:52
+#: src/components/modal/index.tsx:73 src/paths/admin/create/CreatePage.tsx:114
+#: src/paths/instance/orders/create/CreatePage.tsx:324
+#: src/paths/instance/products/create/CreatePage.tsx:50
+#: src/paths/instance/products/list/Table.tsx:166
+#: src/paths/instance/products/list/Table.tsx:218
+#: src/paths/instance/products/update/UpdatePage.tsx:54
+#: src/paths/instance/transfers/create/CreatePage.tsx:88
+#: src/paths/instance/update/UpdatePage.tsx:133
+#, c-format
+msgid "Cancel"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:91
+#, c-format
+msgid "Manage stock"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:93
+#, c-format
+msgid "Infinite"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:105
+#, c-format
+msgid "lost cannot be greater that current + incoming (max %1$s)"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:111
+#, c-format
+msgid "current stock will change from %1$s to %2$s"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:112
+#, c-format
+msgid "current stock will stay at %1$s"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:129
+#: src/paths/instance/products/list/Table.tsx:204
+#, c-format
+msgid "Incoming"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:130
+#: src/paths/instance/products/list/Table.tsx:205
+#, c-format
+msgid "Lost"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:142
+#, c-format
+msgid "Current"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:145
+#, c-format
+msgid "without stock"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:150
+#, c-format
+msgid "Next restock"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:152
+#, c-format
+msgid "Delivery address"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:73
+#, c-format
+msgid "this product has no taxes"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:77
+#: src/paths/instance/orders/details/DetailPage.tsx:145
+#: src/paths/instance/orders/details/DetailPage.tsx:296
+#: src/paths/instance/orders/list/Table.tsx:116
+#: src/paths/instance/transfers/create/CreatePage.tsx:84
+#, c-format
+msgid "Amount"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:78
+#, c-format
+msgid "currency and value separated with colon"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:84
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:78
+#, c-format
+msgid "Add"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:53
+#, c-format
+msgid "Instance"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:59
+#, c-format
+msgid "Settings"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:65
+#: src/paths/instance/orders/list/Table.tsx:60
+#, c-format
+msgid "Orders"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:71
+#: src/paths/instance/orders/create/CreatePage.tsx:258
+#: src/paths/instance/products/list/Table.tsx:48
+#, c-format
+msgid "Products"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:77
+#: src/paths/instance/transfers/list/Table.tsx:65
+#, c-format
+msgid "Transfers"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:87
+#, c-format
+msgid "Connection"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:112 src/paths/admin/list/Table.tsx:57
+#, c-format
+msgid "Instances"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:116
+#, c-format
+msgid "New"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:122
+#, c-format
+msgid "List"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:129
+#, c-format
+msgid "Log out"
+msgstr ""
+
+#: src/components/modal/index.tsx:74
+#, c-format
+msgid "Clear"
+msgstr ""
+
+#: src/components/modal/index.tsx:110 src/components/modal/index.tsx:111
+#, c-format
+msgid "should be the same"
+msgstr ""
+
+#: src/components/modal/index.tsx:111
+#, c-format
+msgid "cannot be the same as before"
+msgstr ""
+
+#: src/components/modal/index.tsx:114
+#, c-format
+msgid ""
+"You are updating the authorization token from instance %1$s with id %2$s"
+msgstr ""
+
+#: src/components/modal/index.tsx:124
+#, c-format
+msgid "Old token"
+msgstr ""
+
+#: src/components/modal/index.tsx:125
+#, c-format
+msgid "New token"
+msgstr ""
+
+#: src/components/modal/index.tsx:127
+#, c-format
+msgid "Clearing the auth token will mean public access to the instance"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:96
+#: src/paths/admin/create/CreatePage.tsx:85 src/paths/admin/list/Table.tsx:109
+#: src/paths/instance/transfers/list/Table.tsx:122
+#, c-format
+msgid "ID"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:98
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:121
+#: src/paths/instance/products/list/Table.tsx:85
+#, c-format
+msgid "Image"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:100
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:123
+#, c-format
+msgid "Unit"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:101
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:124
+#: src/paths/instance/products/list/Table.tsx:162
+#: src/paths/instance/products/list/Table.tsx:214
+#, c-format
+msgid "Price"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:103
+#: src/paths/instance/products/list/Table.tsx:90
+#, c-format
+msgid "Stock"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:105
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:128
+#: src/paths/instance/products/list/Table.tsx:88
+#, c-format
+msgid "Taxes"
+msgstr ""
+
+#: src/index.tsx:75
+#, c-format
+msgid "Server not found"
+msgstr ""
+
+#: src/index.tsx:85
+#, c-format
+msgid "Couldn't access the server"
+msgstr ""
+
+#: src/index.tsx:87 src/index.tsx:99
+#, c-format
+msgid "Got message %1$s from %2$s"
+msgstr ""
+
+#: src/index.tsx:97
+#, c-format
+msgid "Unexpected Error"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:89
+#: src/paths/instance/update/UpdatePage.tsx:108
+#, c-format
+msgid "Auth token"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:91
+#: src/paths/instance/details/DetailPage.tsx:77
+#: src/paths/instance/update/UpdatePage.tsx:110
+#, c-format
+msgid "Account address"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:93
+#: src/paths/instance/update/UpdatePage.tsx:112
+#, c-format
+msgid "Default max deposit fee"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:95
+#: src/paths/instance/update/UpdatePage.tsx:114
+#, c-format
+msgid "Default max wire fee"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:97
+#: src/paths/instance/update/UpdatePage.tsx:116
+#, c-format
+msgid "Default wire fee amortization"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:103
+#: src/paths/instance/update/UpdatePage.tsx:122
+#, c-format
+msgid "Jurisdiction"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:107
+#: src/paths/instance/update/UpdatePage.tsx:126
+#, c-format
+msgid "Default pay delay"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:109
+#: src/paths/instance/update/UpdatePage.tsx:128
+#, c-format
+msgid "Default wire transfer delay"
+msgstr ""
+
+#: src/paths/admin/create/index.tsx:58
+#, c-format
+msgid "could not create instance"
+msgstr ""
+
+#: src/paths/admin/list/Table.tsx:63 src/paths/admin/list/Table.tsx:131
+#: src/paths/instance/transfers/list/Table.tsx:71
+#, c-format
+msgid "Delete"
+msgstr ""
+
+#: src/paths/admin/list/Table.tsx:128
+#, c-format
+msgid "Edit"
+msgstr ""
+
+#: src/paths/admin/list/Table.tsx:149
+#: src/paths/instance/products/list/Table.tsx:245
+#, c-format
+msgid "There is no instances yet, add more pressing the + sign"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:237
+#, c-format
+msgid "Inventory products"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:286
+#, c-format
+msgid "Total price"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:287
+#, c-format
+msgid "Total tax"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:289
+#: src/paths/instance/orders/create/CreatePage.tsx:297
+#, c-format
+msgid "Order price"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:295
+#, c-format
+msgid "Net"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:300
+#: src/paths/instance/orders/details/DetailPage.tsx:144
+#: src/paths/instance/orders/details/DetailPage.tsx:295
+#: src/paths/instance/orders/list/Table.tsx:117
+#, c-format
+msgid "Summary"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:302
+#, c-format
+msgid "Payments options"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:303
+#, c-format
+msgid "Auto refund deadline"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:304
+#, c-format
+msgid "Refund deadline"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:305
+#, c-format
+msgid "Pay deadline"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:307
+#, c-format
+msgid "Delivery date"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:308
+#, c-format
+msgid "Location"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:312
+#, c-format
+msgid "Max fee"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:313
+#, c-format
+msgid "Max wire fee"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:314
+#, c-format
+msgid "Wire fee amortization"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:315
+#, c-format
+msgid "Fullfilment url"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:318
+#, c-format
+msgid "Extra information"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:44
+#, c-format
+msgid "select a product first"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:51
+#, c-format
+msgid "should be greater than 0"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:58
+#, c-format
+msgid ""
+"cannot be greater than current stock and quantity previously added. max: %1$s"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:64
+#, c-format
+msgid "cannot be greater than current stock %1$s"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:76
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:126
+#, c-format
+msgid "Quantity"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:92
+#: src/paths/instance/orders/details/DetailPage.tsx:235
+#: src/paths/instance/orders/details/DetailPage.tsx:333
+#, c-format
+msgid "Order"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:93
+#, c-format
+msgid "claimed"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:110
+#: src/paths/instance/orders/details/DetailPage.tsx:261
+#: src/paths/instance/orders/list/Table.tsx:136
+#, c-format
+msgid "copy url"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:126
+#: src/paths/instance/orders/details/DetailPage.tsx:349
+#, c-format
+msgid "pay at"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:127
+#: src/paths/instance/orders/details/DetailPage.tsx:350
+#, c-format
+msgid "created at"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:138
+#: src/paths/instance/orders/details/DetailPage.tsx:289
+#, c-format
+msgid "Timeline"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:142
+#: src/paths/instance/orders/details/DetailPage.tsx:293
+#, c-format
+msgid "Payment details"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:146
+#: src/paths/instance/orders/details/DetailPage.tsx:299
+#: src/paths/instance/orders/details/DetailPage.tsx:363
+#, c-format
+msgid "Order status"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:156
+#: src/paths/instance/orders/details/DetailPage.tsx:308
+#, c-format
+msgid "Product list"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:236
+#, c-format
+msgid "paid"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:238
+#, c-format
+msgid "wired"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:241
+#, c-format
+msgid "refunded"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:258
+#, c-format
+msgid "refund"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:297
+#, c-format
+msgid "Refunded amount"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:298
+#, c-format
+msgid "Deposit total"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:336
+#, c-format
+msgid "unpaid"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:364
+#, c-format
+msgid "Order status URL"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:365
+#, c-format
+msgid "Pay URI"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:383
+#, c-format
+msgid ""
+"Unknown order status. This is an error, please contact the administrator."
+msgstr ""
+
+#: src/paths/instance/orders/details/index.tsx:56
+#: src/paths/instance/orders/list/index.tsx:147
+#, c-format
+msgid "refund created successfully"
+msgstr ""
+
+#: src/paths/instance/orders/details/index.tsx:59
+#: src/paths/instance/orders/list/index.tsx:150
+#, c-format
+msgid "could not create the refund"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:111
+#, c-format
+msgid "load newer orders"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:115
+#, c-format
+msgid "Date"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:131
+#: src/paths/instance/orders/list/Table.tsx:223
+#, c-format
+msgid "Refund"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:145
+#, c-format
+msgid "load older orders"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:154
+#, c-format
+msgid "No orders has been found"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:202
+#, c-format
+msgid "date"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:203
+#, c-format
+msgid "amount"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:204
+#, c-format
+msgid "reason"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:224
+#, c-format
+msgid "Max refundable:"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "Reason"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "duplicated"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "requested by the customer"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "other"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:91
+#, c-format
+msgid "go to order id"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:107
+#, c-format
+msgid "Paid"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:108
+#, c-format
+msgid "Refunded"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:109
+#, c-format
+msgid "Not wired"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:110
+#, c-format
+msgid "All"
+msgstr ""
+
+#: src/paths/instance/products/create/index.tsx:48
+#: src/paths/instance/products/update/index.tsx:64
+#, c-format
+msgid "could not create product"
+msgstr ""
+
+#: src/paths/instance/products/list/Table.tsx:87
+#, c-format
+msgid "Sell"
+msgstr ""
+
+#: src/paths/instance/products/list/Table.tsx:89
+#, c-format
+msgid "Profit"
+msgstr ""
+
+#: src/paths/instance/products/list/Table.tsx:91
+#, c-format
+msgid "Sold"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:59
+#, c-format
+msgid "product updated successfully"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:62
+#, c-format
+msgid "could not update the product"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:70
+#, c-format
+msgid "product delete successfully"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:73
+#, c-format
+msgid "could not delete the product"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:59
+#, c-format
+msgid "Tips"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:111
+#, c-format
+msgid "Committed amount"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:112
+#, c-format
+msgid "Exchange initial amount"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:113
+#, c-format
+msgid "Merchant initial amount"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:148
+#, c-format
+msgid "There is no tips yet, add more pressing the + sign"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:50
+#: src/paths/instance/transfers/create/CreatePage.tsx:54
+#: src/paths/instance/transfers/create/CreatePage.tsx:55
+#: src/paths/instance/transfers/create/CreatePage.tsx:56
+#, c-format
+msgid "cannot be empty"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:51
+#, c-format
+msgid "check the id, doest look valid"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:52
+#, c-format
+msgid "should have 52 characters, current %1$s"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:57
+#, c-format
+msgid "URL doesn't have the right format"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:74
+#, c-format
+msgid "Transfer ID"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:76
+#, c-format
+msgid "Account Address"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:82
+#: src/paths/instance/transfers/list/Table.tsx:125
+#, c-format
+msgid "Exchange URL"
+msgstr ""
+
+#: src/paths/instance/transfers/create/index.tsx:49
+#, c-format
+msgid "could not inform transfer"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:118
+#, c-format
+msgid "load newer transfers"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:123
+#, c-format
+msgid "Credit"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:126
+#, c-format
+msgid "Confirmed"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:127
+#: src/paths/instance/transfers/list/index.tsx:60
+#, c-format
+msgid "Verified"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:128
+#, c-format
+msgid "Executed at"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:138
+#: src/paths/instance/transfers/list/Table.tsx:139
+#, c-format
+msgid "yes"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:138
+#: src/paths/instance/transfers/list/Table.tsx:139
+#, c-format
+msgid "no"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:140
+#, c-format
+msgid "unknown"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:145
+#, c-format
+msgid "load older transfers"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:154
+#, c-format
+msgid "There is no transfer yet, add more pressing the + sign"
+msgstr ""
diff --git a/packages/merchant-backoffice-ui/src/i18n/taler-merchant-backoffice.pot b/packages/merchant-backoffice-ui/src/i18n/taler-merchant-backoffice.pot
new file mode 100644
index 000000000..21fd863b0
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/i18n/taler-merchant-backoffice.pot
@@ -0,0 +1,1054 @@
+#  This file is part of GNU Taler
+#  (C) 2021 Taler Systems S.A.
+#  GNU Taler is free software; you can redistribute it and/or modify it under the
+#  terms of the GNU General Public License as published by the Free Software
+#  Foundation; either version 3, or (at your option) any later version.
+#  GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+#  WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+#  A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+#  You should have received a copy of the GNU General Public License along with
+#  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+#
+#, fuzzy
+msgid ""
+msgstr ""
+"Project-Id-Version: Taler Wallet\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2016-11-23 00:00+0100\n"
+"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
+"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
+"Language-Team: LANGUAGE <LL@li.org>\n"
+"Language: \n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+#: src/ApplicationReadyRoutes.tsx:50 src/InstanceRoutes.tsx:118
+#: src/InstanceRoutes.tsx:299
+#, c-format
+msgid "Access denied"
+msgstr ""
+
+#: src/ApplicationReadyRoutes.tsx:51 src/InstanceRoutes.tsx:118
+#: src/InstanceRoutes.tsx:300
+#, c-format
+msgid "Check your token is valid"
+msgstr ""
+
+#: src/ApplicationReadyRoutes.tsx:72
+#, c-format
+msgid "Couldn't access the server."
+msgstr ""
+
+#: src/ApplicationReadyRoutes.tsx:73
+#, c-format
+msgid "Could not infer instance id from url %1$s"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:109
+#, c-format
+msgid "HTTP status #%1$s: Server reported a problem"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:110
+#, c-format
+msgid "Got message: \"%1$s\" from: %2$s"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:127
+#, c-format
+msgid "No default instance"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:128
+#, c-format
+msgid ""
+"in order to use merchant backoffice, you should create the default instance"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:288
+#, c-format
+msgid "Server reported a problem: HTTP status #%1$s"
+msgstr ""
+
+#: src/InstanceRoutes.tsx:289
+#, c-format
+msgid "Got message: %1$s from: %2$s"
+msgstr ""
+
+#: src/components/exception/login.tsx:46
+#, c-format
+msgid "Login required"
+msgstr ""
+
+#: src/components/exception/login.tsx:49
+#, c-format
+msgid ""
+"Please enter your auth token. Token should have \"secret-token:\" and start "
+"with Bearer or ApiKey"
+msgstr ""
+
+#: src/components/exception/login.tsx:86 src/components/modal/index.tsx:53
+#: src/components/modal/index.tsx:75 src/paths/admin/create/CreatePage.tsx:115
+#: src/paths/instance/orders/create/CreatePage.tsx:325
+#: src/paths/instance/products/create/CreatePage.tsx:51
+#: src/paths/instance/products/list/Table.tsx:174
+#: src/paths/instance/products/list/Table.tsx:228
+#: src/paths/instance/products/update/UpdatePage.tsx:55
+#: src/paths/instance/transfers/create/CreatePage.tsx:89
+#: src/paths/instance/update/UpdatePage.tsx:134
+#, c-format
+msgid "Confirm"
+msgstr ""
+
+#: src/components/form/InputArray.tsx:72
+#, c-format
+msgid "The value %1$s is invalid for a payment url"
+msgstr ""
+
+#: src/components/form/InputDate.tsx:67
+#: src/paths/instance/orders/list/index.tsx:123
+#, c-format
+msgid "pick a date"
+msgstr ""
+
+#: src/components/form/InputDate.tsx:81
+#, c-format
+msgid "clear"
+msgstr ""
+
+#: src/components/form/InputDate.tsx:83
+#: src/paths/instance/transfers/list/Table.tsx:140
+#, c-format
+msgid "never"
+msgstr ""
+
+#: src/components/form/InputImage.tsx:80
+#, c-format
+msgid "Image should be smaller than 1 MB"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:28
+#, c-format
+msgid "Country"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:30
+#: src/paths/admin/create/CreatePage.tsx:99
+#: src/paths/instance/transfers/list/Table.tsx:124
+#: src/paths/instance/update/UpdatePage.tsx:118
+#, c-format
+msgid "Address"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:34
+#, c-format
+msgid "Building number"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:35
+#, c-format
+msgid "Building name"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:36
+#, c-format
+msgid "Street"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:37
+#, c-format
+msgid "Post code"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:38
+#, c-format
+msgid "Town location"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:39
+#, c-format
+msgid "Town"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:40
+#, c-format
+msgid "District"
+msgstr ""
+
+#: src/components/form/InputLocation.tsx:41
+#, c-format
+msgid "Country subdivision"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:59
+#, c-format
+msgid "Product id"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:60
+#: src/components/product/ProductForm.tsx:99
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:122
+#: src/paths/instance/orders/list/Table.tsx:227
+#: src/paths/instance/products/list/Table.tsx:86
+#, c-format
+msgid "Description"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:73
+#: src/components/form/InputTaxes.tsx:81
+#: src/paths/admin/create/CreatePage.tsx:87 src/paths/admin/list/Table.tsx:110
+#: src/paths/instance/details/DetailPage.tsx:76
+#: src/paths/instance/update/UpdatePage.tsx:106
+#, c-format
+msgid "Name"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:102
+#, c-format
+msgid "loading..."
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:108
+#, c-format
+msgid "no products found"
+msgstr ""
+
+#: src/components/form/InputSearchProduct.tsx:116
+#, c-format
+msgid "no results"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:33
+#, c-format
+msgid "Deleting"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:34
+#, c-format
+msgid "Changing"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:60
+#, c-format
+msgid "Manage token"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:83
+#, c-format
+msgid "Update"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:100
+#: src/paths/instance/orders/create/CreatePage.tsx:252
+#: src/paths/instance/orders/create/CreatePage.tsx:273
+#, c-format
+msgid "Remove"
+msgstr ""
+
+#: src/components/form/InputSecured.tsx:106 src/components/modal/index.tsx:52
+#: src/components/modal/index.tsx:73 src/paths/admin/create/CreatePage.tsx:114
+#: src/paths/instance/orders/create/CreatePage.tsx:324
+#: src/paths/instance/products/create/CreatePage.tsx:50
+#: src/paths/instance/products/list/Table.tsx:166
+#: src/paths/instance/products/list/Table.tsx:218
+#: src/paths/instance/products/update/UpdatePage.tsx:54
+#: src/paths/instance/transfers/create/CreatePage.tsx:88
+#: src/paths/instance/update/UpdatePage.tsx:133
+#, c-format
+msgid "Cancel"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:91
+#, c-format
+msgid "Manage stock"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:93
+#, c-format
+msgid "Infinite"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:105
+#, c-format
+msgid "lost cannot be greater that current + incoming (max %1$s)"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:111
+#, c-format
+msgid "current stock will change from %1$s to %2$s"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:112
+#, c-format
+msgid "current stock will stay at %1$s"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:129
+#: src/paths/instance/products/list/Table.tsx:204
+#, c-format
+msgid "Incoming"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:130
+#: src/paths/instance/products/list/Table.tsx:205
+#, c-format
+msgid "Lost"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:142
+#, c-format
+msgid "Current"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:145
+#, c-format
+msgid "without stock"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:150
+#, c-format
+msgid "Next restock"
+msgstr ""
+
+#: src/components/form/InputStock.tsx:152
+#, c-format
+msgid "Delivery address"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:73
+#, c-format
+msgid "this product has no taxes"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:77
+#: src/paths/instance/orders/details/DetailPage.tsx:145
+#: src/paths/instance/orders/details/DetailPage.tsx:296
+#: src/paths/instance/orders/list/Table.tsx:116
+#: src/paths/instance/transfers/create/CreatePage.tsx:84
+#, c-format
+msgid "Amount"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:78
+#, c-format
+msgid "currency and value separated with colon"
+msgstr ""
+
+#: src/components/form/InputTaxes.tsx:84
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:78
+#, c-format
+msgid "Add"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:53
+#, c-format
+msgid "Instance"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:59
+#, c-format
+msgid "Settings"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:65
+#: src/paths/instance/orders/list/Table.tsx:60
+#, c-format
+msgid "Orders"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:71
+#: src/paths/instance/orders/create/CreatePage.tsx:258
+#: src/paths/instance/products/list/Table.tsx:48
+#, c-format
+msgid "Products"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:77
+#: src/paths/instance/transfers/list/Table.tsx:65
+#, c-format
+msgid "Transfers"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:87
+#, c-format
+msgid "Connection"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:112 src/paths/admin/list/Table.tsx:57
+#, c-format
+msgid "Instances"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:116
+#, c-format
+msgid "New"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:122
+#, c-format
+msgid "List"
+msgstr ""
+
+#: src/components/menu/SideBar.tsx:129
+#, c-format
+msgid "Log out"
+msgstr ""
+
+#: src/components/modal/index.tsx:74
+#, c-format
+msgid "Clear"
+msgstr ""
+
+#: src/components/modal/index.tsx:110 src/components/modal/index.tsx:111
+#, c-format
+msgid "should be the same"
+msgstr ""
+
+#: src/components/modal/index.tsx:111
+#, c-format
+msgid "cannot be the same as before"
+msgstr ""
+
+#: src/components/modal/index.tsx:114
+#, c-format
+msgid ""
+"You are updating the authorization token from instance %1$s with id %2$s"
+msgstr ""
+
+#: src/components/modal/index.tsx:124
+#, c-format
+msgid "Old token"
+msgstr ""
+
+#: src/components/modal/index.tsx:125
+#, c-format
+msgid "New token"
+msgstr ""
+
+#: src/components/modal/index.tsx:127
+#, c-format
+msgid "Clearing the auth token will mean public access to the instance"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:96
+#: src/paths/admin/create/CreatePage.tsx:85 src/paths/admin/list/Table.tsx:109
+#: src/paths/instance/transfers/list/Table.tsx:122
+#, c-format
+msgid "ID"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:98
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:121
+#: src/paths/instance/products/list/Table.tsx:85
+#, c-format
+msgid "Image"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:100
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:123
+#, c-format
+msgid "Unit"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:101
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:124
+#: src/paths/instance/products/list/Table.tsx:162
+#: src/paths/instance/products/list/Table.tsx:214
+#, c-format
+msgid "Price"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:103
+#: src/paths/instance/products/list/Table.tsx:90
+#, c-format
+msgid "Stock"
+msgstr ""
+
+#: src/components/product/ProductForm.tsx:105
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:128
+#: src/paths/instance/products/list/Table.tsx:88
+#, c-format
+msgid "Taxes"
+msgstr ""
+
+#: src/index.tsx:75
+#, c-format
+msgid "Server not found"
+msgstr ""
+
+#: src/index.tsx:85
+#, c-format
+msgid "Couldn't access the server"
+msgstr ""
+
+#: src/index.tsx:87 src/index.tsx:99
+#, c-format
+msgid "Got message %1$s from %2$s"
+msgstr ""
+
+#: src/index.tsx:97
+#, c-format
+msgid "Unexpected Error"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:89
+#: src/paths/instance/update/UpdatePage.tsx:108
+#, c-format
+msgid "Auth token"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:91
+#: src/paths/instance/details/DetailPage.tsx:77
+#: src/paths/instance/update/UpdatePage.tsx:110
+#, c-format
+msgid "Account address"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:93
+#: src/paths/instance/update/UpdatePage.tsx:112
+#, c-format
+msgid "Default max deposit fee"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:95
+#: src/paths/instance/update/UpdatePage.tsx:114
+#, c-format
+msgid "Default max wire fee"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:97
+#: src/paths/instance/update/UpdatePage.tsx:116
+#, c-format
+msgid "Default wire fee amortization"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:103
+#: src/paths/instance/update/UpdatePage.tsx:122
+#, c-format
+msgid "Jurisdiction"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:107
+#: src/paths/instance/update/UpdatePage.tsx:126
+#, c-format
+msgid "Default pay delay"
+msgstr ""
+
+#: src/paths/admin/create/CreatePage.tsx:109
+#: src/paths/instance/update/UpdatePage.tsx:128
+#, c-format
+msgid "Default wire transfer delay"
+msgstr ""
+
+#: src/paths/admin/create/index.tsx:58
+#, c-format
+msgid "could not create instance"
+msgstr ""
+
+#: src/paths/admin/list/Table.tsx:63 src/paths/admin/list/Table.tsx:131
+#: src/paths/instance/transfers/list/Table.tsx:71
+#, c-format
+msgid "Delete"
+msgstr ""
+
+#: src/paths/admin/list/Table.tsx:128
+#, c-format
+msgid "Edit"
+msgstr ""
+
+#: src/paths/admin/list/Table.tsx:149
+#: src/paths/instance/products/list/Table.tsx:245
+#, c-format
+msgid "There is no instances yet, add more pressing the + sign"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:237
+#, c-format
+msgid "Inventory products"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:286
+#, c-format
+msgid "Total price"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:287
+#, c-format
+msgid "Total tax"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:289
+#: src/paths/instance/orders/create/CreatePage.tsx:297
+#, c-format
+msgid "Order price"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:295
+#, c-format
+msgid "Net"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:300
+#: src/paths/instance/orders/details/DetailPage.tsx:144
+#: src/paths/instance/orders/details/DetailPage.tsx:295
+#: src/paths/instance/orders/list/Table.tsx:117
+#, c-format
+msgid "Summary"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:302
+#, c-format
+msgid "Payments options"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:303
+#, c-format
+msgid "Auto refund deadline"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:304
+#, c-format
+msgid "Refund deadline"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:305
+#, c-format
+msgid "Pay deadline"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:307
+#, c-format
+msgid "Delivery date"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:308
+#, c-format
+msgid "Location"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:312
+#, c-format
+msgid "Max fee"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:313
+#, c-format
+msgid "Max wire fee"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:314
+#, c-format
+msgid "Wire fee amortization"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:315
+#, c-format
+msgid "Fullfilment url"
+msgstr ""
+
+#: src/paths/instance/orders/create/CreatePage.tsx:318
+#, c-format
+msgid "Extra information"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:44
+#, c-format
+msgid "select a product first"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:51
+#, c-format
+msgid "should be greater than 0"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:58
+#, c-format
+msgid ""
+"cannot be greater than current stock and quantity previously added. max: %1$s"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:64
+#, c-format
+msgid "cannot be greater than current stock %1$s"
+msgstr ""
+
+#: src/paths/instance/orders/create/InventoryProductForm.tsx:76
+#: src/paths/instance/orders/create/NonInventoryProductForm.tsx:126
+#, c-format
+msgid "Quantity"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:92
+#: src/paths/instance/orders/details/DetailPage.tsx:235
+#: src/paths/instance/orders/details/DetailPage.tsx:333
+#, c-format
+msgid "Order"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:93
+#, c-format
+msgid "claimed"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:110
+#: src/paths/instance/orders/details/DetailPage.tsx:261
+#: src/paths/instance/orders/list/Table.tsx:136
+#, c-format
+msgid "copy url"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:126
+#: src/paths/instance/orders/details/DetailPage.tsx:349
+#, c-format
+msgid "pay at"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:127
+#: src/paths/instance/orders/details/DetailPage.tsx:350
+#, c-format
+msgid "created at"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:138
+#: src/paths/instance/orders/details/DetailPage.tsx:289
+#, c-format
+msgid "Timeline"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:142
+#: src/paths/instance/orders/details/DetailPage.tsx:293
+#, c-format
+msgid "Payment details"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:146
+#: src/paths/instance/orders/details/DetailPage.tsx:299
+#: src/paths/instance/orders/details/DetailPage.tsx:363
+#, c-format
+msgid "Order status"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:156
+#: src/paths/instance/orders/details/DetailPage.tsx:308
+#, c-format
+msgid "Product list"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:236
+#, c-format
+msgid "paid"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:238
+#, c-format
+msgid "wired"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:241
+#, c-format
+msgid "refunded"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:258
+#, c-format
+msgid "refund"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:297
+#, c-format
+msgid "Refunded amount"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:298
+#, c-format
+msgid "Deposit total"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:336
+#, c-format
+msgid "unpaid"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:364
+#, c-format
+msgid "Order status URL"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:365
+#, c-format
+msgid "Pay URI"
+msgstr ""
+
+#: src/paths/instance/orders/details/DetailPage.tsx:383
+#, c-format
+msgid ""
+"Unknown order status. This is an error, please contact the administrator."
+msgstr ""
+
+#: src/paths/instance/orders/details/index.tsx:56
+#: src/paths/instance/orders/list/index.tsx:147
+#, c-format
+msgid "refund created successfully"
+msgstr ""
+
+#: src/paths/instance/orders/details/index.tsx:59
+#: src/paths/instance/orders/list/index.tsx:150
+#, c-format
+msgid "could not create the refund"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:111
+#, c-format
+msgid "load newer orders"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:115
+#, c-format
+msgid "Date"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:131
+#: src/paths/instance/orders/list/Table.tsx:223
+#, c-format
+msgid "Refund"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:145
+#, c-format
+msgid "load older orders"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:154
+#, c-format
+msgid "No orders has been found"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:202
+#, c-format
+msgid "date"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:203
+#, c-format
+msgid "amount"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:204
+#, c-format
+msgid "reason"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:224
+#, c-format
+msgid "Max refundable:"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "Reason"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "duplicated"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "requested by the customer"
+msgstr ""
+
+#: src/paths/instance/orders/list/Table.tsx:226
+#, c-format
+msgid "other"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:91
+#, c-format
+msgid "go to order id"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:107
+#, c-format
+msgid "Paid"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:108
+#, c-format
+msgid "Refunded"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:109
+#, c-format
+msgid "Not wired"
+msgstr ""
+
+#: src/paths/instance/orders/list/index.tsx:110
+#, c-format
+msgid "All"
+msgstr ""
+
+#: src/paths/instance/products/create/index.tsx:48
+#: src/paths/instance/products/update/index.tsx:64
+#, c-format
+msgid "could not create product"
+msgstr ""
+
+#: src/paths/instance/products/list/Table.tsx:87
+#, c-format
+msgid "Sell"
+msgstr ""
+
+#: src/paths/instance/products/list/Table.tsx:89
+#, c-format
+msgid "Profit"
+msgstr ""
+
+#: src/paths/instance/products/list/Table.tsx:91
+#, c-format
+msgid "Sold"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:59
+#, c-format
+msgid "product updated successfully"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:62
+#, c-format
+msgid "could not update the product"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:70
+#, c-format
+msgid "product delete successfully"
+msgstr ""
+
+#: src/paths/instance/products/list/index.tsx:73
+#, c-format
+msgid "could not delete the product"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:59
+#, c-format
+msgid "Tips"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:111
+#, c-format
+msgid "Committed amount"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:112
+#, c-format
+msgid "Exchange initial amount"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:113
+#, c-format
+msgid "Merchant initial amount"
+msgstr ""
+
+#: src/paths/instance/tips/list/Table.tsx:148
+#, c-format
+msgid "There is no tips yet, add more pressing the + sign"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:50
+#: src/paths/instance/transfers/create/CreatePage.tsx:54
+#: src/paths/instance/transfers/create/CreatePage.tsx:55
+#: src/paths/instance/transfers/create/CreatePage.tsx:56
+#, c-format
+msgid "cannot be empty"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:51
+#, c-format
+msgid "check the id, doest look valid"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:52
+#, c-format
+msgid "should have 52 characters, current %1$s"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:57
+#, c-format
+msgid "URL doesn't have the right format"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:74
+#, c-format
+msgid "Transfer ID"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:76
+#, c-format
+msgid "Account Address"
+msgstr ""
+
+#: src/paths/instance/transfers/create/CreatePage.tsx:82
+#: src/paths/instance/transfers/list/Table.tsx:125
+#, c-format
+msgid "Exchange URL"
+msgstr ""
+
+#: src/paths/instance/transfers/create/index.tsx:49
+#, c-format
+msgid "could not inform transfer"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:118
+#, c-format
+msgid "load newer transfers"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:123
+#, c-format
+msgid "Credit"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:126
+#, c-format
+msgid "Confirmed"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:127
+#: src/paths/instance/transfers/list/index.tsx:60
+#, c-format
+msgid "Verified"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:128
+#, c-format
+msgid "Executed at"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:138
+#: src/paths/instance/transfers/list/Table.tsx:139
+#, c-format
+msgid "yes"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:138
+#: src/paths/instance/transfers/list/Table.tsx:139
+#, c-format
+msgid "no"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:140
+#, c-format
+msgid "unknown"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:145
+#, c-format
+msgid "load older transfers"
+msgstr ""
+
+#: src/paths/instance/transfers/list/Table.tsx:154
+#, c-format
+msgid "There is no transfer yet, add more pressing the + sign"
+msgstr ""
diff --git a/packages/merchant-backoffice-ui/src/index.tsx b/packages/merchant-backoffice-ui/src/index.tsx
new file mode 100644
index 000000000..26dcc3eb8
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/index.tsx
@@ -0,0 +1,111 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { h, VNode } from 'preact';
+import { route } from 'preact-router';
+import { useMemo } from "preact/hooks";
+import { ApplicationReadyRoutes } from "./ApplicationReadyRoutes";
+import { Loading } from "./components/exception/loading";
+import { NotificationCard, NotYetReadyAppMenu } from "./components/menu";
+import { BackendContextProvider, useBackendContext } from './context/backend';
+import { ConfigContextProvider } from './context/config';
+import { FetchContextProvider } from './context/fetch';
+import { TranslationProvider } from './context/translation';
+import { useBackendConfig } from "./hooks/backend";
+import { useTranslator } from './i18n';
+import LoginPage from './paths/login';
+import "./scss/main.scss";
+
+export default function Application(): VNode {
+  return (
+    // <FetchContextProvider>
+      <BackendContextProvider>
+        <TranslationProvider>
+          <ApplicationStatusRoutes />
+        </TranslationProvider>
+      </BackendContextProvider>
+    // </FetchContextProvider>
+  );
+}
+
+function ApplicationStatusRoutes(): VNode {
+  const { updateLoginStatus, triedToLog } = useBackendContext()
+  const result = useBackendConfig();
+  const i18n = useTranslator()
+
+  const updateLoginInfoAndGoToRoot = (url: string, token?: string) => {
+    updateLoginStatus(url, token)
+    route('/')
+  }
+
+  const { currency, version } = result.ok ? result.data : { currency: 'unknown', version: 'unknown' }
+  const ctx = useMemo(() => ({ currency, version }), [currency, version])
+
+  if (!triedToLog) {
+    return <div id="app">
+      <NotYetReadyAppMenu title="Welcome!" />
+      <LoginPage onConfirm={updateLoginInfoAndGoToRoot} />
+    </div>
+  }
+
+  if (result.clientError && result.isUnauthorized) return <div id="app">
+    <NotYetReadyAppMenu title="Login" />
+    <LoginPage onConfirm={updateLoginInfoAndGoToRoot} />
+  </div>
+
+  if (result.clientError && result.isNotfound) return <div id="app">
+    <NotYetReadyAppMenu title="Error" />
+    <NotificationCard notification={{
+      message: i18n`Server not found`,
+      type: 'ERROR',
+      description: `Check your url`,
+    }} />
+    <LoginPage onConfirm={updateLoginInfoAndGoToRoot} />
+  </div>
+
+  if (result.serverError) return <div id="app">
+    <NotYetReadyAppMenu title="Error" />
+    <NotificationCard notification={{
+      message: i18n`Couldn't access the server`,
+      type: 'ERROR',
+      description: i18n`Got message ${result.message} from ${result.info?.url}`,
+    }} />
+    <LoginPage onConfirm={updateLoginInfoAndGoToRoot} />
+  </div>
+
+  if (result.loading) return <Loading />
+
+  if (!result.ok) return <div id="app">
+    <NotYetReadyAppMenu title="Error" />
+    <NotificationCard notification={{
+      message: i18n`Unexpected Error`,
+      type: 'ERROR',
+      description: i18n`Got message ${result.message} from ${result.info?.url}`,
+    }} />
+    <LoginPage onConfirm={updateLoginInfoAndGoToRoot} />
+  </div>
+
+  return <div id="app" class="has-navbar-fixed-top">
+    <ConfigContextProvider value={ctx}>
+      <ApplicationReadyRoutes />
+    </ConfigContextProvider>
+  </div>
+}
diff --git a/packages/merchant-backoffice-ui/src/manifest.json b/packages/merchant-backoffice-ui/src/manifest.json
new file mode 100644
index 000000000..d0d3ea463
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/manifest.json
@@ -0,0 +1,21 @@
+{
+  "name": "backoffice-preact",
+  "short_name": "backoffice-preact",
+  "start_url": "/",
+  "display": "standalone",
+  "orientation": "portrait",
+  "background_color": "#fff",
+  "theme_color": "#673ab8",
+  "icons": [
+    {
+      "src": "/assets/icons/android-chrome-192x192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "/assets/icons/android-chrome-512x512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/packages/merchant-backoffice-ui/src/paths/admin/create/Create.stories.tsx b/packages/merchant-backoffice-ui/src/paths/admin/create/Create.stories.tsx
new file mode 100644
index 000000000..c1287557d
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/admin/create/Create.stories.tsx
@@ -0,0 +1,46 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { h, VNode, FunctionalComponent } from 'preact';
+import { CreatePage as TestedComponent } from './CreatePage';
+
+
+export default {
+  title: 'Pages/Instance/Create',
+  component: TestedComponent,
+  argTypes: {
+    onCreate: { action: 'onCreate' },
+    goBack: { action: 'goBack' },
+  }
+};
+
+function createExample<Props>(Component: FunctionalComponent<Props>, props: Partial<Props>) {
+  const r = (args: any) => <Component {...args} />
+  r.args = props
+  return r
+}
+
+export const Example = createExample(TestedComponent, {
+});
+// export const Example = (a: any): VNode => <CreatePage {...a} />;
+// Example.args = {
+//   isLoading: false
+// }
diff --git a/packages/merchant-backoffice-ui/src/paths/admin/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/admin/create/CreatePage.tsx
new file mode 100644
index 000000000..1851e52f1
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/admin/create/CreatePage.tsx
@@ -0,0 +1,234 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import * as yup from "yup";
+import { AsyncButton } from "../../../components/exception/AsyncButton";
+import {
+  FormErrors,
+  FormProvider,
+} from "../../../components/form/FormProvider";
+import { SetTokenNewInstanceModal } from "../../../components/modal";
+import { MerchantBackend } from "../../../declaration";
+import { Translate, useTranslator } from "../../../i18n";
+import { DefaultInstanceFormFields } from "../../../components/instance/DefaultInstanceFormFields";
+import { INSTANCE_ID_REGEX, PAYTO_REGEX } from "../../../utils/constants";
+import { Amounts } from "@gnu-taler/taler-util";
+
+export type Entity = MerchantBackend.Instances.InstanceConfigurationMessage & {
+  auth_token?: string;
+};
+
+interface Props {
+  onCreate: (d: Entity) => Promise<void>;
+  onBack?: () => void;
+  forceId?: string;
+}
+
+function with_defaults(id?: string): Partial<Entity> {
+  return {
+    id,
+    payto_uris: [],
+    default_pay_delay: { d_us: 2 * 1000 * 60 * 60 * 1000 }, // two hours
+    default_wire_fee_amortization: 1,
+    default_wire_transfer_delay: { d_us: 1000 * 2 * 60 * 60 * 24 * 1000 }, // two days
+  };
+}
+
+function undefinedIfEmpty<T>(obj: T): T | undefined {
+  return Object.keys(obj).some((k) => (obj as any)[k] !== undefined)
+    ? obj
+    : undefined;
+}
+
+export function CreatePage({ onCreate, onBack, forceId }: Props): VNode {
+  const [value, valueHandler] = useState(with_defaults(forceId));
+  const [isTokenSet, updateIsTokenSet] = useState<boolean>(false);
+  const [isTokenDialogActive, updateIsTokenDialogActive] =
+    useState<boolean>(false);
+
+  const i18n = useTranslator();
+
+  const errors: FormErrors<Entity> = {
+    id: !value.id
+      ? i18n`required`
+      : !INSTANCE_ID_REGEX.test(value.id)
+      ? i18n`is not valid`
+      : undefined,
+    name: !value.name ? i18n`required` : undefined,
+    payto_uris:
+      !value.payto_uris || !value.payto_uris.length
+        ? i18n`required`
+        : undefinedIfEmpty(
+            value.payto_uris.map((p) => {
+              return !PAYTO_REGEX.test(p) ? i18n`is not valid` : undefined;
+            })
+          ),
+    default_max_deposit_fee: !value.default_max_deposit_fee
+      ? i18n`required`
+      : !Amounts.parse(value.default_max_deposit_fee)
+      ? i18n`invalid format`
+      : undefined,
+    default_max_wire_fee: !value.default_max_wire_fee
+      ? i18n`required`
+      : !Amounts.parse(value.default_max_wire_fee)
+      ? i18n`invalid format`
+      : undefined,
+    default_wire_fee_amortization:
+      value.default_wire_fee_amortization === undefined
+        ? i18n`required`
+        : isNaN(value.default_wire_fee_amortization)
+        ? i18n`is not a number`
+        : value.default_wire_fee_amortization < 1
+        ? i18n`must be 1 or greater`
+        : undefined,
+    default_pay_delay: !value.default_pay_delay ? i18n`required` : undefined,
+    default_wire_transfer_delay: !value.default_wire_transfer_delay
+      ? i18n`required`
+      : undefined,
+    address: undefinedIfEmpty({
+      address_lines:
+        value.address?.address_lines && value.address?.address_lines.length > 7
+          ? i18n`max 7 lines`
+          : undefined,
+    }),
+    jurisdiction: undefinedIfEmpty({
+      address_lines:
+        value.address?.address_lines && value.address?.address_lines.length > 7
+          ? i18n`max 7 lines`
+          : undefined,
+    }),
+  };
+
+  const hasErrors = Object.keys(errors).some(
+    (k) => (errors as any)[k] !== undefined
+  );
+
+  const submit = (): Promise<void> => {
+    // use conversion instead of this
+    const newToken = value.auth_token;
+    value.auth_token = undefined;
+    value.auth =
+      newToken === null || newToken === undefined
+        ? { method: "external" }
+        : { method: "token", token: `secret-token:${newToken}` };
+    if (!value.address) value.address = {};
+    if (!value.jurisdiction) value.jurisdiction = {};
+    // remove above use conversion
+    // schema.validateSync(value, { abortEarly: false })
+    return onCreate(value as Entity);
+  };
+
+  function updateToken(token: string | null) {
+    valueHandler((old) => ({
+      ...old,
+      auth_token: token === null ? undefined : token,
+    }));
+  }
+
+  return (
+    <div>
+      <div class="columns">
+        <div class="column" />
+        <div class="column is-four-fifths">
+          {isTokenDialogActive && (
+            <SetTokenNewInstanceModal
+              onCancel={() => {
+                updateIsTokenDialogActive(false);
+                updateIsTokenSet(false);
+              }}
+              onClear={() => {
+                updateToken(null);
+                updateIsTokenDialogActive(false);
+                updateIsTokenSet(true);
+              }}
+              onConfirm={(newToken) => {
+                updateToken(newToken);
+                updateIsTokenDialogActive(false);
+                updateIsTokenSet(true);
+              }}
+            />
+          )}
+        </div>
+        <div class="column" />
+      </div>
+
+      <section class="hero is-hero-bar">
+        <div class="hero-body">
+          <div class="level">
+            <div class="level-item has-text-centered">
+              <h1 class="title">
+                <button
+                  class="button is-danger has-tooltip-bottom"
+                  data-tooltip={i18n`change authorization configuration`}
+                  onClick={() => updateIsTokenDialogActive(true)}
+                >
+                  <div class="icon is-centered">
+                    <i class="mdi mdi-lock-reset" />
+                  </div>
+                  <span>
+                    <Translate>Set access token</Translate>
+                  </span>
+                </button>
+              </h1>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="section is-main-section">
+        <div class="columns">
+          <div class="column" />
+          <div class="column is-four-fifths">
+            <FormProvider<Entity>
+              errors={errors}
+              object={value}
+              valueHandler={valueHandler}
+            >
+              <DefaultInstanceFormFields readonlyId={!!forceId} showId={true} />
+            </FormProvider>
+
+            <div class="buttons is-right mt-5">
+              {onBack && (
+                <button class="button" onClick={onBack}>
+                  <Translate>Cancel</Translate>
+                </button>
+              )}
+              <AsyncButton
+                onClick={submit}
+                disabled={!isTokenSet || hasErrors}
+                data-tooltip={
+                  hasErrors
+                    ? i18n`Need to complete marked fields and choose authorization method`
+                    : "confirm operation"
+                }
+              >
+                <Translate>Confirm</Translate>
+              </AsyncButton>
+            </div>
+          </div>
+          <div class="column" />
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/packages/merchant-backoffice-ui/src/paths/admin/create/InstanceCreatedSuccessfully.tsx b/packages/merchant-backoffice-ui/src/paths/admin/create/InstanceCreatedSuccessfully.tsx
new file mode 100644
index 000000000..00b3f20fc
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/admin/create/InstanceCreatedSuccessfully.tsx
@@ -0,0 +1,65 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+import { h, VNode } from "preact";
+import { CreatedSuccessfully } from "../../../components/notifications/CreatedSuccessfully";
+import { Entity } from "./index";
+
+export function InstanceCreatedSuccessfully({ entity, onConfirm }: { entity: Entity; onConfirm: () => void; }): VNode {
+  return <CreatedSuccessfully onConfirm={onConfirm}>
+    <div class="field is-horizontal">
+      <div class="field-label is-normal">
+        <label class="label">ID</label>
+      </div>
+      <div class="field-body is-flex-grow-3">
+        <div class="field">
+          <p class="control">
+            <input class="input" readonly value={entity.id} />
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="field is-horizontal">
+      <div class="field-label is-normal">
+        <label class="label">Business Name</label>
+      </div>
+      <div class="field-body is-flex-grow-3">
+        <div class="field">
+          <p class="control">
+            <input class="input" readonly value={entity.name} />
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="field is-horizontal">
+      <div class="field-label is-normal">
+        <label class="label">Access token</label>
+      </div>
+      <div class="field-body is-flex-grow-3">
+        <div class="field">
+          <p class="control">
+            {entity.auth.method === 'external' && 'external'}
+            {entity.auth.method === 'token' &&
+              <input class="input" readonly value={entity.auth.token} />}
+          </p>
+        </div>
+      </div>
+    </div>
+  </CreatedSuccessfully>;
+}
diff --git a/packages/merchant-backoffice-ui/src/paths/admin/create/index.tsx b/packages/merchant-backoffice-ui/src/paths/admin/create/index.tsx
new file mode 100644
index 000000000..aaed6d666
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/admin/create/index.tsx
@@ -0,0 +1,74 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+import { Fragment, h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import { NotificationCard } from "../../../components/menu";
+import { MerchantBackend } from "../../../declaration";
+import { useAdminAPI } from "../../../hooks/instance";
+import { useTranslator } from "../../../i18n";
+import { Notification } from "../../../utils/types";
+import { CreatePage } from "./CreatePage";
+import { InstanceCreatedSuccessfully } from "./InstanceCreatedSuccessfully";
+
+interface Props {
+  onBack?: () => void;
+  onConfirm: () => void;
+  forceId?: string;
+}
+export type Entity = MerchantBackend.Instances.InstanceConfigurationMessage;
+
+export default function Create({ onBack, onConfirm, forceId }: Props): VNode {
+  const { createInstance } = useAdminAPI();
+  const [notif, setNotif] = useState<Notification | undefined>(undefined);
+  const [createdOk, setCreatedOk] = useState<Entity | undefined>(undefined);
+  const i18n = useTranslator();
+
+  if (createdOk) {
+    return (
+      <InstanceCreatedSuccessfully entity={createdOk} onConfirm={onConfirm} />
+    );
+  }
+
+  return (
+    <Fragment>
+      <NotificationCard notification={notif} />
+
+      <CreatePage
+        onBack={onBack}
+        forceId={forceId}
+        onCreate={(
+          d: MerchantBackend.Instances.InstanceConfigurationMessage
+        ) => {
+          return createInstance(d)
+            .then(() => {
+              setCreatedOk(d);
+            })
+            .catch((error) => {
+              setNotif({
+                message: i18n`Failed to create instance`,
+                type: "ERROR",
+                description: error.message,
+              });
+            });
+        }}
+      />
+    </Fragment>
+  );
+}
diff --git a/packages/merchant-backoffice-ui/src/paths/admin/list/TableActive.tsx b/packages/merchant-backoffice-ui/src/paths/admin/list/TableActive.tsx
new file mode 100644
index 000000000..928658910
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/admin/list/TableActive.tsx
@@ -0,0 +1,184 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { h, VNode } from "preact";
+import { StateUpdater, useEffect, useState } from "preact/hooks";
+import { MerchantBackend } from "../../../declaration";
+import { Translate, useTranslator } from "../../../i18n";
+
+interface Props {
+  instances: MerchantBackend.Instances.Instance[];
+  onUpdate: (id: string) => void;
+  onDelete: (id: MerchantBackend.Instances.Instance) => void;
+  onPurge: (id: MerchantBackend.Instances.Instance) => void;
+  onCreate: () => void;
+  selected?: boolean;
+  setInstanceName: (s: string) => void;
+}
+
+export function CardTable({ instances, onCreate, onUpdate, onPurge, setInstanceName, onDelete, selected }: Props): VNode {
+  const [actionQueue, actionQueueHandler] = useState<Actions[]>([]);
+  const [rowSelection, rowSelectionHandler] = useState<string[]>([])
+
+  useEffect(() => {
+    if (actionQueue.length > 0 && !selected && actionQueue[0].type == 'DELETE') {
+      onDelete(actionQueue[0].element)
+      actionQueueHandler(actionQueue.slice(1))
+    }
+  }, [actionQueue, selected, onDelete])
+
+  useEffect(() => {
+    if (actionQueue.length > 0 && !selected && actionQueue[0].type == 'UPDATE') {
+      onUpdate(actionQueue[0].element.id)
+      actionQueueHandler(actionQueue.slice(1))
+    }
+  }, [actionQueue, selected, onUpdate])
+
+  const i18n = useTranslator()
+
+  return <div class="card has-table">
+    <header class="card-header">
+      <p class="card-header-title"><span class="icon"><i class="mdi mdi-desktop-mac" /></span><Translate>Instances</Translate></p>
+
+      <div class="card-header-icon" aria-label="more options">
+
+        <button class={rowSelection.length > 0 ? "button is-danger" : "is-hidden"}
+          type="button" onClick={(): void => actionQueueHandler(buildActions(instances, rowSelection, 'DELETE'))} >
+          <Translate>Delete</Translate>
+        </button>
+      </div>
+      <div class="card-header-icon" aria-label="more options">
+        <span class="has-tooltip-left" data-tooltip={i18n`add new instance`}>
+          <button class="button is-info" type="button" onClick={onCreate}>
+            <span class="icon is-small" ><i class="mdi mdi-plus mdi-36px" /></span>
+          </button>
+        </span>
+      </div>
+
+    </header>
+    <div class="card-content">
+      <div class="b-table has-pagination">
+        <div class="table-wrapper has-mobile-cards">
+          {instances.length > 0 ?
+            <Table instances={instances} onPurge={onPurge} onUpdate={onUpdate} setInstanceName={setInstanceName} onDelete={onDelete} rowSelection={rowSelection} rowSelectionHandler={rowSelectionHandler} /> :
+            <EmptyTable />
+          }
+        </div>
+      </div>
+    </div>
+  </div>
+}
+interface TableProps {
+  rowSelection: string[];
+  instances: MerchantBackend.Instances.Instance[];
+  onUpdate: (id: string) => void;
+  onDelete: (id: MerchantBackend.Instances.Instance) => void;
+  onPurge: (id: MerchantBackend.Instances.Instance) => void;
+  rowSelectionHandler: StateUpdater<string[]>;
+  setInstanceName: (s:string) => void;
+}
+
+function toggleSelected<T>(id: T): (prev: T[]) => T[] {
+  return (prev: T[]): T[] => prev.indexOf(id) == -1 ? [...prev, id] : prev.filter(e => e != id)
+}
+
+function Table({ rowSelection, rowSelectionHandler, setInstanceName, instances, onUpdate, onDelete, onPurge }: TableProps): VNode {
+  return (
+    <div class="table-container">
+      <table class="table is-fullwidth is-striped is-hoverable is-fullwidth">
+        <thead>
+          <tr>
+            <th class="is-checkbox-cell">
+              <label class="b-checkbox checkbox">
+                <input type="checkbox" checked={rowSelection.length === instances.length} onClick={(): void => rowSelectionHandler(rowSelection.length === instances.length ? [] : instances.map(i => i.id))} />
+                <span class="check" />
+              </label>
+            </th>
+            <th><Translate>ID</Translate></th>
+            <th><Translate>Name</Translate></th>
+            <th />
+          </tr>
+        </thead>
+        <tbody>
+          {instances.map(i => {
+            return <tr key={i.id}>
+              <td class="is-checkbox-cell">
+                <label class="b-checkbox checkbox">
+                  <input type="checkbox" checked={rowSelection.indexOf(i.id) != -1} onClick={(): void => rowSelectionHandler(toggleSelected(i.id))} />
+                  <span class="check" />
+                </label>
+              </td>
+              <td><a href={`#/orders?instance=${i.id}`} onClick={(e) => {
+                setInstanceName(i.id);
+              }}>{i.id}</a></td>
+              <td >{i.name}</td>
+              <td class="is-actions-cell right-sticky">
+                <div class="buttons is-right">
+                  <button class="button is-small is-success jb-modal" type="button" onClick={(): void => onUpdate(i.id)}>
+                    <Translate>Edit</Translate>
+                  </button>
+                  {!i.deleted &&
+                  <button class="button is-small is-danger jb-modal is-outlined" type="button" onClick={(): void => onDelete(i)}>
+                    <Translate>Delete</Translate>
+                  </button>
+                  }
+                  {i.deleted &&
+                  <button class="button is-small is-danger jb-modal" type="button" onClick={(): void => onPurge(i)}>
+                    <Translate>Purge</Translate>
+                  </button>
+                  }
+                </div>
+              </td>
+            </tr>
+          })}
+
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+function EmptyTable(): VNode {
+  return <div class="content has-text-grey has-text-centered">
+    <p>
+      <span class="icon is-large"><i class="mdi mdi-emoticon-sad mdi-48px" /></span>
+    </p>
+    <p><Translate>There is no instances yet, add more pressing the + sign</Translate></p>
+  </div>
+}
+
+
+interface Actions {
+  element: MerchantBackend.Instances.Instance;
+  type: 'DELETE' | 'UPDATE';
+}
+
+function notEmpty<TValue>(value: TValue | null | undefined): value is TValue {
+  return value !== null && value !== undefined;
+}
+
+function buildActions(intances: MerchantBackend.Instances.Instance[], selected: string[], action: 'DELETE'): Actions[] {
+  return selected.map(id => intances.find(i => i.id === id))
+    .filter(notEmpty)
+    .map(id => ({ element: id, type: action }))
+}
+
+
diff --git a/packages/merchant-backoffice-ui/src/paths/admin/list/View.stories.tsx b/packages/merchant-backoffice-ui/src/paths/admin/list/View.stories.tsx
new file mode 100644
index 000000000..3da8c2e50
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/admin/list/View.stories.tsx
@@ -0,0 +1,82 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { h } from 'preact';
+import { View } from './View';
+
+
+export default {
+  title: 'Pages/Instance/List',
+  component: View,
+  argTypes: {
+    onSelect: { action: 'onSelect' },
+  },
+};
+
+export const Empty = (a: any) => <View {...a} />;
+Empty.args = {
+  instances: []
+}
+
+export const WithDefaultInstance = (a: any) => <View {...a} />;
+WithDefaultInstance.args = {
+  instances: [{
+    id: 'default',
+    name: 'the default instance',
+    merchant_pub: 'abcdef',
+    payment_targets: []
+  }]
+}
+
+export const WithFiveInstance = (a: any) => <View {...a} />;
+WithFiveInstance.args = {
+  instances: [{
+    id: 'first',
+    name: 'the first instance',
+    merchant_pub: 'abcdefgh',
+    payment_targets: ['asd']
+  }, {
+    id: 'second',
+    name: 'the second instance',
+    merchant_pub: 'zxczxcz',
+    payment_targets: ['asd']
+  }, {
+    id: 'third',
+    name: 'the third instance',
+    merchant_pub: 'QWEQWEWQE',
+    payment_targets: ['asd']
+  }, {
+    id: 'other',
+    name: 'the other instance',
+    merchant_pub: 'FHJHGJGHJ',
+    payment_targets: ['asd']
+  }, {
+    id: 'another',
+    name: 'the another instance',
+    merchant_pub: 'abcd3423423efgh',
+    payment_targets: ['asd']
+  }, {
+    id: 'last',
+    name: 'last instance',
+    merchant_pub: 'zxcvvbnm',
+    payment_targets: ['pay-to', 'asd']
+  }]
+}
diff --git a/packages/merchant-backoffice-ui/src/paths/admin/list/View.tsx b/packages/merchant-backoffice-ui/src/paths/admin/list/View.tsx
new file mode 100644
index 000000000..a77a5a1bf
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/admin/list/View.tsx
@@ -0,0 +1,80 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { h, VNode } from "preact";
+import { MerchantBackend } from "../../../declaration";
+import { CardTable as CardTableActive } from './TableActive';
+import { useState } from 'preact/hooks';
+import { Translate, useTranslator } from "../../../i18n";
+
+interface Props {
+  instances: MerchantBackend.Instances.Instance[];
+  onCreate: () => void;
+  onUpdate: (id: string) => void;
+  onDelete: (id: MerchantBackend.Instances.Instance) => void;
+  onPurge: (id: MerchantBackend.Instances.Instance) => void;
+  selected?: boolean;
+  setInstanceName: (s: string) => void;
+}
+
+export function View({ instances, onCreate, onDelete, onPurge, onUpdate, setInstanceName, selected }: Props): VNode {
+  const [show, setShow] = useState<"active" | "deleted" | null>("active");
+  const showIsActive = show === 'active' ? "is-active" : ''
+  const showIsDeleted = show === 'deleted' ? "is-active" : ''
+  const showAll = show === null ? "is-active" : ''
+  const i18n = useTranslator()
+
+  const showingInstances = showIsDeleted ? 
+    instances.filter(i => i.deleted) : (showIsActive ?
+      instances.filter(i => !i.deleted) :
+      instances)
+  
+  return <div id="app">
+
+    <section class="section is-main-section">
+      <div class="columns">
+        <div class="column is-two-thirds">
+          <div class="tabs" style={{ overflow: 'inherit' }}>
+            <ul>
+              <li class={showIsActive}>
+                <div class="has-tooltip-right" data-tooltip={i18n`Only show active instances`}>
+                  <a onClick={() => setShow("active")}><Translate>Active</Translate></a>
+                </div>
+              </li>
+              <li class={showIsDeleted}>
+                <div class="has-tooltip-right" data-tooltip={i18n`Only show deleted instances`}>
+                  <a onClick={() => setShow("deleted")}><Translate>Deleted</Translate></a>
+                </div>
+              </li>
+              <li class={showAll}>
+                <div class="has-tooltip-right" data-tooltip={i18n`Show all instances`}>
+                  <a onClick={() => setShow(null)}><Translate>All</Translate></a>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <CardTableActive instances={showingInstances} onDelete={onDelete} onPurge={onPurge} setInstanceName={setInstanceName} onUpdate={onUpdate} selected={selected} onCreate={onCreate} />
+    </section>
+
+  </div >
+}
diff --git a/packages/merchant-backoffice-ui/src/paths/admin/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/admin/list/index.tsx
new file mode 100644
index 000000000..c5609fd10
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/admin/list/index.tsx
@@ -0,0 +1,126 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { Fragment, h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import { Loading } from "../../../components/exception/loading";
+import { NotificationCard } from "../../../components/menu";
+import { DeleteModal, PurgeModal } from "../../../components/modal";
+import { MerchantBackend } from "../../../declaration";
+import { HttpError } from "../../../hooks/backend";
+import { useAdminAPI, useBackendInstances } from "../../../hooks/instance";
+import { useTranslator } from "../../../i18n";
+import { Notification } from "../../../utils/types";
+import { View } from "./View";
+
+interface Props {
+  onCreate: () => void;
+  onUpdate: (id: string) => void;
+  instances: MerchantBackend.Instances.Instance[];
+  onUnauthorized: () => VNode;
+  onNotFound: () => VNode;
+  onLoadError: (error: HttpError) => VNode;
+  setInstanceName: (s: string) => void;
+}
+
+export default function Instances({
+  onUnauthorized,
+  onLoadError,
+  onNotFound,
+  onCreate,
+  onUpdate,
+  setInstanceName,
+}: Props): VNode {
+  const result = useBackendInstances();
+  const [deleting, setDeleting] =
+    useState<MerchantBackend.Instances.Instance | null>(null);
+  const [purging, setPurging] =
+    useState<MerchantBackend.Instances.Instance | null>(null);
+  const { deleteInstance, purgeInstance } = useAdminAPI();
+  const [notif, setNotif] = useState<Notification | undefined>(undefined);
+  const i18n = useTranslator();
+
+  if (result.clientError && result.isUnauthorized) return onUnauthorized();
+  if (result.clientError && result.isNotfound) return onNotFound();
+  if (result.loading) return <Loading />;
+  if (!result.ok) return onLoadError(result);
+
+  return (
+    <Fragment>
+      <NotificationCard notification={notif} />
+      <View
+        instances={result.data.instances}
+        onDelete={setDeleting}
+        onCreate={onCreate}
+        onPurge={setPurging}
+        onUpdate={onUpdate}
+        setInstanceName={setInstanceName}
+        selected={!!deleting}
+      />
+      {deleting && (
+        <DeleteModal
+          element={deleting}
+          onCancel={() => setDeleting(null)}
+          onConfirm={async (): Promise<void> => {
+            try {
+              await deleteInstance(deleting.id);
+              // pushNotification({ message: 'delete_success', type: 'SUCCESS' })
+              setNotif({
+                message: i18n`Instance "${deleting.name}" (ID: ${deleting.id}) has been deleted`,
+                type: "SUCCESS",
+              });
+            } catch (error) {
+              setNotif({
+                message: i18n`Failed to delete instance`,
+                type: "ERROR",
+                description: error instanceof Error ? error.message : undefined,
+              });
+              // pushNotification({ message: 'delete_error', type: 'ERROR' })
+            }
+            setDeleting(null);
+          }}
+        />
+      )}
+      {purging && (
+        <PurgeModal
+          element={purging}
+          onCancel={() => setPurging(null)}
+          onConfirm={async (): Promise<void> => {
+            try {
+              await purgeInstance(purging.id);
+              setNotif({
+                message: i18n`Instance "${purging.name}" (ID: ${purging.id}) has been disabled`,
+                type: "SUCCESS",
+              });
+            } catch (error) {
+              setNotif({
+                message: i18n`Failed to purge instance`,
+                type: "ERROR",
+                description: error instanceof Error ? error.message : undefined,
+              });
+            }
+            setPurging(null);
+          }}
+        />
+      )}
+    </Fragment>
+  );
+}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/details/DetailPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/details/DetailPage.tsx
new file mode 100644
index 000000000..2561f5842
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/details/DetailPage.tsx
@@ -0,0 +1,87 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import { FormProvider } from "../../../components/form/FormProvider";
+import { Input } from "../../../components/form/Input";
+import { MerchantBackend } from "../../../declaration";
+import { useTranslator } from "../../../i18n";
+
+type Entity = MerchantBackend.Instances.InstanceReconfigurationMessage;
+interface Props {
+  onUpdate: () => void;
+  onDelete: () => void;
+  selected: MerchantBackend.Instances.QueryInstancesResponse;
+}
+
+function convert(from: MerchantBackend.Instances.QueryInstancesResponse): Entity {
+  const { accounts, ...rest } = from
+  const payto_uris = accounts.filter(a => a.active).map(a => a.payto_uri)
+  const defaults = {
+    default_wire_fee_amortization: 1,
+    default_pay_delay: { d_us: 1000 * 60 * 60 }, //one hour
+    default_wire_transfer_delay: { d_us: 1000 * 60 * 60 * 2 }, //two hours
+  }
+  return { ...defaults, ...rest, payto_uris };
+}
+
+export function DetailPage({ selected }: Props): VNode {
+  const [value, valueHandler] = useState<Partial<Entity>>(convert(selected))
+
+  const i18n = useTranslator()
+  
+  return <div>
+    <section class="hero is-hero-bar">
+      <div class="hero-body">
+        <div class="level">
+          <div class="level-left">
+            <div class="level-item">
+              <h1 class="title">
+                Here goes the instance description
+              </h1>
+            </div>
+          </div>
+          <div class="level-right" style="display: none;">
+            <div class="level-item" />
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="section is-main-section">
+      <div class="columns">
+        <div class="column" />
+        <div class="column is-6">
+          <FormProvider<Entity> object={value} valueHandler={valueHandler} >
+
+            <Input<Entity> name="name" readonly label={i18n`Name`} />
+            <Input<Entity> name="payto_uris" readonly label={i18n`Account address`} />
+
+          </FormProvider>
+        </div>
+        <div class="column" />
+      </div>
+    </section>
+
+  </div>
+
+}
\ No newline at end of file
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/details/Details.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/details/Details.stories.tsx
new file mode 100644
index 000000000..fb7c9144c
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/details/Details.stories.tsx
@@ -0,0 +1,61 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { h, VNode, FunctionalComponent } from "preact";
+import { DetailPage as TestedComponent } from "./DetailPage";
+
+export default {
+  title: "Pages/Instance/Detail",
+  component: TestedComponent,
+  argTypes: {
+    onUpdate: { action: "onUpdate" },
+    onBack: { action: "onBack" },
+  },
+};
+
+function createExample<Props>(
+  Component: FunctionalComponent<Props>,
+  props: Partial<Props>
+) {
+  const r = (args: any) => <Component {...args} />;
+  r.args = props;
+  return r;
+}
+
+export const Example = createExample(TestedComponent, {
+  selected: {
+    accounts: [],
+    name: "name",
+    auth: { method: "external" },
+    address: {},
+    jurisdiction: {},
+    default_max_deposit_fee: "TESTKUDOS:2",
+    default_max_wire_fee: "TESTKUDOS:1",
+    default_pay_delay: {
+      d_us: 1000000,
+    },
+    default_wire_fee_amortization: 1,
+    default_wire_transfer_delay: {
+      d_us: 100000,
+    },
+    merchant_pub: "ASDWQEKASJDKSADJ",
+  },
+});
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/details/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/details/index.tsx
new file mode 100644
index 000000000..15675891e
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/details/index.tsx
@@ -0,0 +1,65 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+import { Fragment, h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import { Loading } from "../../../components/exception/loading";
+import { DeleteModal } from "../../../components/modal";
+import { useInstanceContext } from "../../../context/instance";
+import { HttpError } from "../../../hooks/backend";
+import { useInstanceAPI, useInstanceDetails } from "../../../hooks/instance";
+import { DetailPage } from "./DetailPage";
+
+interface Props {
+  onUnauthorized: () => VNode;
+  onLoadError: (error: HttpError) => VNode;
+  onUpdate: () => void;
+  onNotFound: () => VNode;
+  onDelete: () => void;
+}
+
+export default function Detail({ onUpdate, onLoadError, onUnauthorized, onDelete, onNotFound }: Props): VNode {
+  const { id } = useInstanceContext()
+  const result = useInstanceDetails()
+  const [deleting, setDeleting] = useState<boolean>(false)
+
+  const { deleteInstance } = useInstanceAPI()
+
+  if (result.clientError && result.isUnauthorized) return onUnauthorized()
+  if (result.clientError && result.isNotfound) return onNotFound()
+  if (result.loading) return <Loading />
+  if (!result.ok) return onLoadError(result)
+
+  return <Fragment>
+    <DetailPage
+      selected={result.data}
+      onUpdate={onUpdate}
+      onDelete={() => setDeleting(true)}
+    />
+    {deleting && <DeleteModal
+      element={{ name: result.data.name, id }}
+      onCancel={() => setDeleting(false)}
+      onConfirm={async (): Promise<void> => {
+        try {
+          await deleteInstance()
+          onDelete()
+        } catch (error) {
+        }
+        setDeleting(false)
+      }}
+    />}
+
+  </Fragment>
+}
\ No newline at end of file
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/kyc/list/ListPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/kyc/list/ListPage.tsx
new file mode 100644
index 000000000..52363d3cd
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/kyc/list/ListPage.tsx
@@ -0,0 +1,178 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { h, VNode } from "preact";
+import { MerchantBackend } from "../../../../declaration";
+import { Translate, useTranslator } from "../../../../i18n";
+
+export interface Props {
+  status: MerchantBackend.Instances.AccountKycRedirects;
+}
+
+export function ListPage({ status }: Props): VNode {
+  const i18n = useTranslator();
+
+  return (
+    <section class="section is-main-section">
+      <div class="card has-table">
+        <header class="card-header">
+          <p class="card-header-title">
+            <span class="icon">
+              <i class="mdi mdi-clock" />
+            </span>
+            <Translate>Pending KYC verification</Translate>
+          </p>
+
+          <div class="card-header-icon" aria-label="more options" />
+        </header>
+        <div class="card-content">
+          <div class="b-table has-pagination">
+            <div class="table-wrapper has-mobile-cards">
+              {status.pending_kycs.length > 0 ? (
+                <PendingTable entries={status.pending_kycs} />
+              ) : (
+                <EmptyTable />
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {status.timeout_kycs.length > 0 ? (
+        <div class="card has-table">
+          <header class="card-header">
+            <p class="card-header-title">
+              <span class="icon">
+                <i class="mdi mdi-clock" />
+              </span>
+              <Translate>Timed out</Translate>
+            </p>
+
+            <div class="card-header-icon" aria-label="more options" />
+          </header>
+          <div class="card-content">
+            <div class="b-table has-pagination">
+              <div class="table-wrapper has-mobile-cards">
+                {status.timeout_kycs.length > 0 ? (
+                  <TimedOutTable entries={status.timeout_kycs} />
+                ) : (
+                  <EmptyTable />
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : undefined}
+    </section>
+  );
+}
+interface PendingTableProps {
+  entries: MerchantBackend.Instances.MerchantAccountKycRedirect[];
+}
+
+interface TimedOutTableProps {
+  entries: MerchantBackend.Instances.ExchangeKycTimeout[];
+}
+
+function PendingTable({ entries }: PendingTableProps): VNode {
+  return (
+    <div class="table-container">
+      <table class="table is-striped is-hoverable is-fullwidth">
+        <thead>
+          <tr>
+            <th>
+              <Translate>Exchange</Translate>
+            </th>
+            <th>
+              <Translate>Target account</Translate>
+            </th>
+            <th>
+              <Translate>KYC URL</Translate>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {entries.map((e, i) => {
+            return (
+              <tr key={i}>
+                <td>{e.exchange_url}</td>
+                <td>{e.payto_uri}</td>
+                <td>
+                  <a href={e.kyc_url} target="_black" rel="noreferrer">
+                    {e.kyc_url}
+                  </a>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function TimedOutTable({ entries }: TimedOutTableProps): VNode {
+  return (
+    <div class="table-container">
+      <table class="table is-striped is-hoverable is-fullwidth">
+        <thead>
+          <tr>
+            <th>
+              <Translate>Exchange</Translate>
+            </th>
+            <th>
+              <Translate>Code</Translate>
+            </th>
+            <th>
+              <Translate>Http Status</Translate>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {entries.map((e, i) => {
+            return (
+              <tr key={i}>
+                <td>{e.exchange_url}</td>
+                <td>{e.exchange_code}</td>
+                <td>{e.exchange_http_status}</td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function EmptyTable(): VNode {
+  return (
+    <div class="content has-text-grey has-text-centered">
+      <p>
+        <span class="icon is-large">
+          <i class="mdi mdi-emoticon-happy mdi-48px" />
+        </span>
+      </p>
+      <p>
+        <Translate>No pending kyc verification!</Translate>
+      </p>
+    </div>
+  );
+}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/kyc/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/kyc/list/index.tsx
new file mode 100644
index 000000000..5dff01994
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/kyc/list/index.tsx
@@ -0,0 +1,51 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { h, VNode } from "preact";
+import { Loading } from "../../../../components/exception/loading";
+import { HttpError } from "../../../../hooks/backend";
+import { useInstanceKYCDetails } from "../../../../hooks/instance";
+import { ListPage } from "./ListPage";
+
+interface Props {
+  onUnauthorized: () => VNode;
+  onLoadError: (error: HttpError) => VNode;
+  onNotFound: () => VNode;
+}
+
+export default function ListKYC({
+  onUnauthorized,
+  onLoadError,
+  onNotFound,
+}: Props): VNode {
+  const result = useInstanceKYCDetails();
+  if (result.clientError && result.isUnauthorized) return onUnauthorized();
+  if (result.clientError && result.isNotfound) return onNotFound();
+  if (result.loading) return <Loading />;
+  if (!result.ok) return onLoadError(result);
+
+  const status = result.data.type === "ok" ? undefined : result.data.status;
+
+  if (!status) {
+    return <div>no kyc required</div>;
+  }
+  return <ListPage status={status} />;
+}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/create/Create.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/Create.stories.tsx
new file mode 100644
index 000000000..43df8484a
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/Create.stories.tsx
@@ -0,0 +1,70 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { h, VNode, FunctionalComponent } from "preact";
+import { CreatePage as TestedComponent } from "./CreatePage";
+
+export default {
+  title: "Pages/Order/Create",
+  component: TestedComponent,
+  argTypes: {
+    onCreate: { action: "onCreate" },
+    goBack: { action: "goBack" },
+  },
+};
+
+function createExample<Props>(
+  Component: FunctionalComponent<Props>,
+  props: Partial<Props>
+) {
+  const r = (args: any) => <Component {...args} />;
+  r.args = props;
+  return r;
+}
+
+export const Example = createExample(TestedComponent, {
+  instanceConfig: {
+    default_max_deposit_fee: "",
+    default_max_wire_fee: "",
+    default_pay_delay: {
+      d_us: 1000 * 60 * 60,
+    },
+    default_wire_fee_amortization: 1,
+  },
+  instanceInventory: [
+    {
+      id: "t-shirt-1",
+      description: "a m size t-shirt",
+      price: "TESTKUDOS:1",
+      total_stock: -1,
+    },
+    {
+      id: "t-shirt-2",
+      price: "TESTKUDOS:1",
+      description: "a xl size t-shirt",
+    } as any,
+    {
+      id: "t-shirt-3",
+      price: "TESTKUDOS:1",
+      description: "a s size t-shirt",
+    } as any,
+  ],
+});
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/CreatePage.tsx
new file mode 100644
index 000000000..c08d8ee1d
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/CreatePage.tsx
@@ -0,0 +1,576 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { add, isAfter, isBefore, isFuture } from "date-fns";
+import { Amounts } from "@gnu-taler/taler-util";
+import { Fragment, h, VNode } from "preact";
+import { useEffect, useState } from "preact/hooks";
+import {
+  FormProvider,
+  FormErrors,
+} from "../../../../components/form/FormProvider";
+import { Input } from "../../../../components/form/Input";
+import { InputCurrency } from "../../../../components/form/InputCurrency";
+import { InputDate } from "../../../../components/form/InputDate";
+import { InputGroup } from "../../../../components/form/InputGroup";
+import { InputLocation } from "../../../../components/form/InputLocation";
+import { ProductList } from "../../../../components/product/ProductList";
+import { useConfigContext } from "../../../../context/config";
+import { Duration, MerchantBackend, WithId } from "../../../../declaration";
+import { Translate, useTranslator } from "../../../../i18n";
+import { OrderCreateSchema as schema } from "../../../../schemas/index";
+import { rate } from "../../../../utils/amount";
+import { InventoryProductForm } from "../../../../components/product/InventoryProductForm";
+import { NonInventoryProductFrom } from "../../../../components/product/NonInventoryProductForm";
+import { InputNumber } from "../../../../components/form/InputNumber";
+import { InputBoolean } from "../../../../components/form/InputBoolean";
+
+interface Props {
+  onCreate: (d: MerchantBackend.Orders.PostOrderRequest) => void;
+  onBack?: () => void;
+  instanceConfig: InstanceConfig;
+  instanceInventory: (MerchantBackend.Products.ProductDetail & WithId)[];
+}
+interface InstanceConfig {
+  default_max_wire_fee: string;
+  default_max_deposit_fee: string;
+  default_wire_fee_amortization: number;
+  default_pay_delay: Duration;
+}
+
+function with_defaults(config: InstanceConfig): Partial<Entity> {
+  const defaultPayDeadline =
+    !config.default_pay_delay || config.default_pay_delay.d_us === "forever"
+      ? undefined
+      : add(new Date(), { seconds: config.default_pay_delay.d_us / 1000 });
+
+  return {
+    inventoryProducts: {},
+    products: [],
+    pricing: {},
+    payments: {
+      max_wire_fee: config.default_max_wire_fee,
+      max_fee: config.default_max_deposit_fee,
+      wire_fee_amortization: config.default_wire_fee_amortization,
+      pay_deadline: defaultPayDeadline,
+      refund_deadline: defaultPayDeadline,
+      createToken: true,
+    },
+    shipping: {},
+    extra: "",
+  };
+}
+
+interface ProductAndQuantity {
+  product: MerchantBackend.Products.ProductDetail & WithId;
+  quantity: number;
+}
+export interface ProductMap {
+  [id: string]: ProductAndQuantity;
+}
+
+interface Pricing {
+  products_price: string;
+  order_price: string;
+  summary: string;
+}
+interface Shipping {
+  delivery_date?: Date;
+  delivery_location?: MerchantBackend.Location;
+  fullfilment_url?: string;
+}
+interface Payments {
+  refund_deadline?: Date;
+  pay_deadline?: Date;
+  wire_transfer_deadline?: Date;
+  auto_refund_deadline?: Date;
+  max_fee?: string;
+  max_wire_fee?: string;
+  wire_fee_amortization?: number;
+  createToken: boolean;
+  minimum_age?: number;
+}
+interface Entity {
+  inventoryProducts: ProductMap;
+  products: MerchantBackend.Product[];
+  pricing: Partial<Pricing>;
+  payments: Partial<Payments>;
+  shipping: Partial<Shipping>;
+  extra: string;
+}
+
+const stringIsValidJSON = (value: string) => {
+  try {
+    JSON.parse(value.trim());
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+function undefinedIfEmpty<T>(obj: T): T | undefined {
+  return Object.keys(obj).some((k) => (obj as any)[k] !== undefined)
+    ? obj
+    : undefined;
+}
+
+export function CreatePage({
+  onCreate,
+  onBack,
+  instanceConfig,
+  instanceInventory,
+}: Props): VNode {
+  const [value, valueHandler] = useState(with_defaults(instanceConfig));
+  const config = useConfigContext();
+  const zero = Amounts.getZero(config.currency);
+
+  const inventoryList = Object.values(value.inventoryProducts || {});
+  const productList = Object.values(value.products || {});
+
+  const i18n = useTranslator();
+
+  const errors: FormErrors<Entity> = {
+    pricing: undefinedIfEmpty({
+      summary: !value.pricing?.summary ? i18n`required` : undefined,
+      order_price: !value.pricing?.order_price
+        ? i18n`required`
+        : Amounts.isZero(value.pricing.order_price)
+        ? i18n`must be greater than 0`
+        : undefined,
+    }),
+    extra:
+      value.extra && !stringIsValidJSON(value.extra)
+        ? i18n`not a valid json`
+        : undefined,
+    payments: undefinedIfEmpty({
+      refund_deadline: !value.payments?.refund_deadline
+        ? undefined
+        : !isFuture(value.payments.refund_deadline)
+        ? i18n`should be in the future`
+        : value.payments.pay_deadline &&
+          isBefore(value.payments.refund_deadline, value.payments.pay_deadline)
+        ? i18n`refund deadline cannot be before pay deadline`
+        : value.payments.wire_transfer_deadline &&
+          isBefore(
+            value.payments.wire_transfer_deadline,
+            value.payments.refund_deadline
+          )
+        ? i18n`wire transfer deadline cannot be before refund deadline`
+        : undefined,
+      pay_deadline: !value.payments?.pay_deadline
+        ? undefined
+        : !isFuture(value.payments.pay_deadline)
+        ? i18n`should be in the future`
+        : value.payments.wire_transfer_deadline &&
+          isBefore(
+            value.payments.wire_transfer_deadline,
+            value.payments.pay_deadline
+          )
+        ? i18n`wire transfer deadline cannot be before pay deadline`
+        : undefined,
+      auto_refund_deadline: !value.payments?.auto_refund_deadline
+        ? undefined
+        : !isFuture(value.payments.auto_refund_deadline)
+        ? i18n`should be in the future`
+        : !value.payments?.refund_deadline
+        ? i18n`should have a refund deadline`
+        : !isAfter(
+            value.payments.refund_deadline,
+            value.payments.auto_refund_deadline
+          )
+        ? i18n`auto refund cannot be after refund deadline`
+        : undefined,
+    }),
+    shipping: undefinedIfEmpty({
+      delivery_date: !value.shipping?.delivery_date
+        ? undefined
+        : !isFuture(value.shipping.delivery_date)
+        ? i18n`should be in the future`
+        : undefined,
+    }),
+  };
+  const hasErrors = Object.keys(errors).some(
+    (k) => (errors as any)[k] !== undefined
+  );
+
+  const submit = (): void => {
+    const order = schema.cast(value);
+    if (!value.payments) return;
+    if (!value.shipping) return;
+
+    const request: MerchantBackend.Orders.PostOrderRequest = {
+      order: {
+        amount: order.pricing.order_price,
+        summary: order.pricing.summary,
+        products: productList,
+        extra: value.extra,
+        pay_deadline: value.payments.pay_deadline
+          ? {
+              t_s: Math.floor(value.payments.pay_deadline.getTime() / 1000),
+            }
+          : undefined,
+        wire_transfer_deadline: value.payments.wire_transfer_deadline
+          ? {
+              t_s: Math.floor(
+                value.payments.wire_transfer_deadline.getTime() / 1000
+              ),
+            }
+          : undefined,
+        refund_deadline: value.payments.refund_deadline
+          ? {
+              t_s: Math.floor(value.payments.refund_deadline.getTime() / 1000),
+            }
+          : undefined,
+        auto_refund: value.payments.auto_refund_deadline
+          ? {
+              d_us: Math.floor(
+                value.payments.auto_refund_deadline.getTime() * 1000
+              ),
+            }
+          : undefined,
+        wire_fee_amortization: value.payments.wire_fee_amortization as number,
+        max_fee: value.payments.max_fee as string,
+        max_wire_fee: value.payments.max_wire_fee as string,
+
+        delivery_date: value.shipping.delivery_date
+          ? { t_s: value.shipping.delivery_date.getTime() / 1000 }
+          : undefined,
+        delivery_location: value.shipping.delivery_location,
+        fulfillment_url: value.shipping.fullfilment_url,
+        minimum_age: value.payments.minimum_age,
+      },
+      inventory_products: inventoryList.map((p) => ({
+        product_id: p.product.id,
+        quantity: p.quantity,
+      })),
+      create_token: value.payments.createToken,
+    };
+
+    onCreate(request);
+  };
+
+  const addProductToTheInventoryList = (
+    product: MerchantBackend.Products.ProductDetail & WithId,
+    quantity: number
+  ) => {
+    valueHandler((v) => {
+      const inventoryProducts = { ...v.inventoryProducts };
+      inventoryProducts[product.id] = { product, quantity };
+      return { ...v, inventoryProducts };
+    });
+  };
+
+  const removeProductFromTheInventoryList = (id: string) => {
+    valueHandler((v) => {
+      const inventoryProducts = { ...v.inventoryProducts };
+      delete inventoryProducts[id];
+      return { ...v, inventoryProducts };
+    });
+  };
+
+  const addNewProduct = async (product: MerchantBackend.Product) => {
+    return valueHandler((v) => {
+      const products = v.products ? [...v.products, product] : [];
+      return { ...v, products };
+    });
+  };
+
+  const removeFromNewProduct = (index: number) => {
+    valueHandler((v) => {
+      const products = v.products ? [...v.products] : [];
+      products.splice(index, 1);
+      return { ...v, products };
+    });
+  };
+
+  const [editingProduct, setEditingProduct] = useState<
+    MerchantBackend.Product | undefined
+  >(undefined);
+
+  const totalPriceInventory = inventoryList.reduce((prev, cur) => {
+    const p = Amounts.parseOrThrow(cur.product.price);
+    return Amounts.add(prev, Amounts.mult(p, cur.quantity).amount).amount;
+  }, zero);
+
+  const totalPriceProducts = productList.reduce((prev, cur) => {
+    if (!cur.price) return zero;
+    const p = Amounts.parseOrThrow(cur.price);
+    return Amounts.add(prev, Amounts.mult(p, cur.quantity).amount).amount;
+  }, zero);
+
+  const hasProducts = inventoryList.length > 0 || productList.length > 0;
+  const totalPrice = Amounts.add(totalPriceInventory, totalPriceProducts);
+
+  const totalAsString = Amounts.stringify(totalPrice.amount);
+  const allProducts = productList.concat(inventoryList.map(asProduct));
+
+  useEffect(() => {
+    valueHandler((v) => {
+      return {
+        ...v,
+        pricing: {
+          ...v.pricing,
+          products_price: hasProducts ? totalAsString : undefined,
+          order_price: hasProducts ? totalAsString : undefined,
+        },
+      };
+    });
+  }, [hasProducts, totalAsString]);
+
+  const discountOrRise = rate(
+    value.pricing?.order_price || `${config.currency}:0`,
+    totalAsString
+  );
+
+  const minAgeByProducts = allProducts.reduce(
+    (cur, prev) =>
+      !prev.minimum_age || cur > prev.minimum_age ? cur : prev.minimum_age,
+    0
+  );
+  return (
+    <div>
+      <section class="section is-main-section">
+        <div class="columns">
+          <div class="column" />
+          <div class="column is-four-fifths">
+            {/* // FIXME: translating plural singular */}
+            <InputGroup
+              name="inventory_products"
+              label={i18n`Manage products in order`}
+              alternative={
+                allProducts.length > 0 && (
+                  <p>
+                    {allProducts.length} products with a total price of{" "}
+                    {totalAsString}.
+                  </p>
+                )
+              }
+              tooltip={i18n`Manage list of products in the order.`}
+            >
+              <InventoryProductForm
+                currentProducts={value.inventoryProducts || {}}
+                onAddProduct={addProductToTheInventoryList}
+                inventory={instanceInventory}
+              />
+
+              <NonInventoryProductFrom
+                productToEdit={editingProduct}
+                onAddProduct={(p) => {
+                  setEditingProduct(undefined);
+                  return addNewProduct(p);
+                }}
+              />
+
+              {allProducts.length > 0 && (
+                <ProductList
+                  list={allProducts}
+                  actions={[
+                    {
+                      name: i18n`Remove`,
+                      tooltip: i18n`Remove this product from the order.`,
+                      handler: (e, index) => {
+                        if (e.product_id) {
+                          removeProductFromTheInventoryList(e.product_id);
+                        } else {
+                          removeFromNewProduct(index);
+                          setEditingProduct(e);
+                        }
+                      },
+                    },
+                  ]}
+                />
+              )}
+            </InputGroup>
+
+            <FormProvider<Entity>
+              errors={errors}
+              object={value}
+              valueHandler={valueHandler as any}
+            >
+              {hasProducts ? (
+                <Fragment>
+                  <InputCurrency
+                    name="pricing.products_price"
+                    label={i18n`Total price`}
+                    readonly
+                    tooltip={i18n`total product price added up`}
+                  />
+                  <InputCurrency
+                    name="pricing.order_price"
+                    label={i18n`Total price`}
+                    addonAfter={
+                      discountOrRise > 0 &&
+                      (discountOrRise < 1
+                        ? `discount of %${Math.round(
+                            (1 - discountOrRise) * 100
+                          )}`
+                        : `rise of %${Math.round((discountOrRise - 1) * 100)}`)
+                    }
+                    tooltip={i18n`Amount to be paid by the customer`}
+                  />
+                </Fragment>
+              ) : (
+                <InputCurrency
+                  name="pricing.order_price"
+                  label={i18n`Order price`}
+                  tooltip={i18n`final order price`}
+                />
+              )}
+
+              <Input
+                name="pricing.summary"
+                inputType="multiline"
+                label={i18n`Summary`}
+                tooltip={i18n`Title of the order to be shown to the customer`}
+              />
+
+              <InputGroup
+                name="shipping"
+                label={i18n`Shipping and Fulfillment`}
+                initialActive
+              >
+                <InputDate
+                  name="shipping.delivery_date"
+                  label={i18n`Delivery date`}
+                  tooltip={i18n`Deadline for physical delivery assured by the merchant.`}
+                />
+                {value.shipping?.delivery_date && (
+                  <InputGroup
+                    name="shipping.delivery_location"
+                    label={i18n`Location`}
+                    tooltip={i18n`address where the products will be delivered`}
+                  >
+                    <InputLocation name="shipping.delivery_location" />
+                  </InputGroup>
+                )}
+                <Input
+                  name="shipping.fullfilment_url"
+                  label={i18n`Fulfillment URL`}
+                  tooltip={i18n`URL to which the user will be redirected after successful payment.`}
+                />
+              </InputGroup>
+
+              <InputGroup
+                name="payments"
+                label={i18n`Taler payment options`}
+                tooltip={i18n`Override default Taler payment settings for this order`}
+              >
+                <InputDate
+                  name="payments.pay_deadline"
+                  label={i18n`Payment deadline`}
+                  tooltip={i18n`Deadline for the customer to pay for the offer before it expires. Inventory products will be reserved until this deadline.`}
+                />
+                <InputDate
+                  name="payments.refund_deadline"
+                  label={i18n`Refund deadline`}
+                  tooltip={i18n`Time until which the order can be refunded by the merchant.`}
+                />
+                <InputDate
+                  name="payments.wire_transfer_deadline"
+                  label={i18n`Wire transfer deadline`}
+                  tooltip={i18n`Deadline for the exchange to make the wire transfer.`}
+                />
+                <InputDate
+                  name="payments.auto_refund_deadline"
+                  label={i18n`Auto-refund deadline`}
+                  tooltip={i18n`Time until which the wallet will automatically check for refunds without user interaction.`}
+                />
+
+                <InputCurrency
+                  name="payments.max_fee"
+                  label={i18n`Maximum deposit fee`}
+                  tooltip={i18n`Maximum deposit fees the merchant is willing to cover for this order. Higher deposit fees must be covered in full by the consumer.`}
+                />
+                <InputCurrency
+                  name="payments.max_wire_fee"
+                  label={i18n`Maximum wire fee`}
+                  tooltip={i18n`Maximum aggregate wire fees the merchant is willing to cover for this order. Wire fees exceeding this amount are to be covered by the customers.`}
+                />
+                <InputNumber
+                  name="payments.wire_fee_amortization"
+                  label={i18n`Wire fee amortization`}
+                  tooltip={i18n`Factor by which wire fees exceeding the above threshold are divided to determine the share of excess wire fees to be paid explicitly by the consumer.`}
+                />
+                <InputBoolean
+                  name="payments.createToken"
+                  label={i18n`Create token`}
+                  tooltip={i18n`Uncheck this option if the merchant backend generated an order ID with enough entropy to prevent adversarial claims.`}
+                />
+                <InputNumber
+                  name="payments.minimum_age"
+                  label={i18n`Minimum age required`}
+                  tooltip={i18n`Any value greater than 0 will limit the coins able be used to pay this contract. If empty the age restriction will be defined by the products`}
+                  help={
+                    minAgeByProducts > 0
+                      ? i18n`Min age defined by the producs is ${minAgeByProducts}`
+                      : undefined
+                  }
+                />
+              </InputGroup>
+
+              <InputGroup
+                name="extra"
+                label={i18n`Additional information`}
+                tooltip={i18n`Custom information to be included in the contract for this order.`}
+              >
+                <Input
+                  name="extra"
+                  inputType="multiline"
+                  label={`Value`}
+                  tooltip={i18n`You must enter a value in JavaScript Object Notation (JSON).`}
+                />
+              </InputGroup>
+            </FormProvider>
+
+            <div class="buttons is-right mt-5">
+              {onBack && (
+                <button class="button" onClick={onBack}>
+                  <Translate>Cancel</Translate>
+                </button>
+              )}
+              <button
+                class="button is-success"
+                onClick={submit}
+                disabled={hasErrors}
+              >
+                <Translate>Confirm</Translate>
+              </button>
+            </div>
+          </div>
+          <div class="column" />
+        </div>
+      </section>
+    </div>
+  );
+}
+
+function asProduct(p: ProductAndQuantity): MerchantBackend.Product {
+  return {
+    product_id: p.product.id,
+    image: p.product.image,
+    price: p.product.price,
+    unit: p.product.unit,
+    quantity: p.quantity,
+    description: p.product.description,
+    taxes: p.product.taxes,
+    minimum_age: p.product.minimum_age,
+  };
+}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/create/OrderCreatedSuccessfully.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/OrderCreatedSuccessfully.tsx
new file mode 100644
index 000000000..14c5d68c3
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/OrderCreatedSuccessfully.tsx
@@ -0,0 +1,89 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+import { h, VNode } from "preact";
+import { useEffect, useState } from "preact/hooks";
+import { CreatedSuccessfully } from "../../../../components/notifications/CreatedSuccessfully";
+import { useOrderAPI } from "../../../../hooks/order";
+import { Translate } from "../../../../i18n";
+import { Entity } from "./index";
+
+interface Props {
+  entity: Entity;
+  onConfirm: () => void;
+  onCreateAnother?: () => void;
+}
+
+export function OrderCreatedSuccessfully({ entity, onConfirm, onCreateAnother }: Props): VNode {
+  const { getPaymentURL } = useOrderAPI()
+  const [url, setURL] = useState<string | undefined>(undefined)
+
+  useEffect(() => {
+    getPaymentURL(entity.response.order_id).then(response => {
+      setURL(response.data)
+    })
+  }, [getPaymentURL, entity.response.order_id])
+
+  return <CreatedSuccessfully onConfirm={onConfirm} onCreateAnother={onCreateAnother}>
+    <div class="field is-horizontal">
+      <div class="field-label is-normal">
+        <label class="label"><Translate>Amount</Translate></label>
+      </div>
+      <div class="field-body is-flex-grow-3">
+        <div class="field">
+          <p class="control">
+            <input class="input" readonly value={entity.request.order.amount} />
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="field is-horizontal">
+      <div class="field-label is-normal">
+        <label class="label"><Translate>Summary</Translate></label>
+      </div>
+      <div class="field-body is-flex-grow-3">
+        <div class="field">
+          <p class="control">
+            <input class="input" readonly value={entity.request.order.summary} />
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="field is-horizontal">
+      <div class="field-label is-normal">
+        <label class="label"><Translate>Order ID</Translate></label>
+      </div>
+      <div class="field-body is-flex-grow-3">
+        <div class="field">
+          <p class="control">
+            <input class="input" readonly value={entity.response.order_id} />
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="field is-horizontal">
+      <div class="field-label is-normal">
+        <label class="label"><Translate>Payment URL</Translate></label>
+      </div>
+      <div class="field-body is-flex-grow-3">
+        <div class="field">
+          <p class="control">
+            <input class="input" readonly value={url} />
+          </p>
+        </div>
+      </div>
+    </div>
+  </CreatedSuccessfully>;
+}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/create/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/index.tsx
new file mode 100644
index 000000000..c447c4b04
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/index.tsx
@@ -0,0 +1,82 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { Fragment, h, VNode } from 'preact';
+import { useState } from 'preact/hooks';
+import { Loading } from '../../../../components/exception/loading';
+import { NotificationCard } from '../../../../components/menu';
+import { MerchantBackend } from '../../../../declaration';
+import { HttpError } from '../../../../hooks/backend';
+import { useInstanceDetails } from '../../../../hooks/instance';
+import { useOrderAPI } from '../../../../hooks/order';
+import { useInstanceProducts } from '../../../../hooks/product';
+import { Notification } from '../../../../utils/types';
+import { CreatePage } from './CreatePage';
+import { OrderCreatedSuccessfully } from './OrderCreatedSuccessfully';
+
+export type Entity = {
+  request: MerchantBackend.Orders.PostOrderRequest,
+  response: MerchantBackend.Orders.PostOrderResponse
+}
+interface Props {
+  onBack?: () => void;
+  onConfirm: () => void;
+  onUnauthorized: () => VNode;
+  onNotFound: () => VNode;
+  onLoadError: (error: HttpError) => VNode;
+}
+export default function OrderCreate({ onConfirm, onBack, onLoadError, onNotFound, onUnauthorized }: Props): VNode {
+  const { createOrder } = useOrderAPI()
+  const [notif, setNotif] = useState<Notification | undefined>(undefined)
+
+  const detailsResult = useInstanceDetails()
+  const inventoryResult = useInstanceProducts()
+
+  if (detailsResult.clientError && detailsResult.isUnauthorized) return onUnauthorized()
+  if (detailsResult.clientError && detailsResult.isNotfound) return onNotFound()
+  if (detailsResult.loading) return <Loading />
+  if (!detailsResult.ok) return onLoadError(detailsResult)
+
+  if (inventoryResult.clientError && inventoryResult.isUnauthorized) return onUnauthorized()
+  if (inventoryResult.clientError && inventoryResult.isNotfound) return onNotFound()
+  if (inventoryResult.loading) return <Loading />
+  if (!inventoryResult.ok) return onLoadError(inventoryResult)
+
+  return <Fragment>
+    
+    <NotificationCard notification={notif} />
+
+    <CreatePage
+      onBack={onBack}
+      onCreate={(request: MerchantBackend.Orders.PostOrderRequest) => {
+        createOrder(request).then(onConfirm).catch((error) => {
+          setNotif({
+            message: 'could not create order',
+            type: "ERROR",
+            description: error.message
+          })
+        })
+      }} 
+      instanceConfig={detailsResult.data}
+      instanceInventory={inventoryResult.data}
+      />
+  </Fragment>
+}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/Detail.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/Detail.stories.tsx
new file mode 100644
index 000000000..812b11a76
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/Detail.stories.tsx
@@ -0,0 +1,137 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { addDays } from "date-fns";
+import { h, VNode, FunctionalComponent } from "preact";
+import { MerchantBackend } from "../../../../declaration";
+import { DetailPage as TestedComponent } from "./DetailPage";
+
+export default {
+  title: "Pages/Order/Detail",
+  component: TestedComponent,
+  argTypes: {
+    onRefund: { action: "onRefund" },
+    onBack: { action: "onBack" },
+  },
+};
+
+function createExample<Props>(
+  Component: FunctionalComponent<Props>,
+  props: Partial<Props>
+) {
+  const r = (args: any) => <Component {...args} />;
+  r.args = props;
+  return r;
+}
+
+const defaultContractTerm = {
+  amount: "TESTKUDOS:10",
+  timestamp: {
+    t_s: new Date().getTime() / 1000,
+  },
+  auditors: [],
+  exchanges: [],
+  max_fee: "TESTKUDOS:1",
+  max_wire_fee: "TESTKUDOS:1",
+  merchant: {} as any,
+  merchant_base_url: "http://merchant.url/",
+  order_id: "2021.165-03GDFC26Y1NNG",
+  products: [],
+  summary: "text summary",
+  wire_fee_amortization: 1,
+  wire_transfer_deadline: {
+    t_s: "never",
+  },
+  refund_deadline: { t_s: "never" },
+  merchant_pub: "ASDASDASDSd",
+  nonce: "QWEQWEQWE",
+  pay_deadline: {
+    t_s: "never",
+  },
+  wire_method: "x-taler-bank",
+  h_wire: "asd",
+} as MerchantBackend.ContractTerms;
+
+// contract_terms: defaultContracTerm,
+export const Claimed = createExample(TestedComponent, {
+  id: "2021.165-03GDFC26Y1NNG",
+  selected: {
+    order_status: "claimed",
+    contract_terms: defaultContractTerm,
+  },
+});
+
+export const PaidNotRefundable = createExample(TestedComponent, {
+  id: "2021.165-03GDFC26Y1NNG",
+  selected: {
+    order_status: "paid",
+    contract_terms: defaultContractTerm,
+    refunded: false,
+    deposit_total: "TESTKUDOS:10",
+    exchange_ec: 0,
+    order_status_url: "http://merchant.backend/status",
+    exchange_hc: 0,
+    refund_amount: "TESTKUDOS:0",
+    refund_details: [],
+    refund_pending: false,
+    wire_details: [],
+    wire_reports: [],
+    wired: false,
+  },
+});
+
+export const PaidRefundable = createExample(TestedComponent, {
+  id: "2021.165-03GDFC26Y1NNG",
+  selected: {
+    order_status: "paid",
+    contract_terms: {
+      ...defaultContractTerm,
+      refund_deadline: {
+        t_s: addDays(new Date(), 2).getTime() / 1000,
+      },
+    },
+    refunded: false,
+    deposit_total: "TESTKUDOS:10",
+    exchange_ec: 0,
+    order_status_url: "http://merchant.backend/status",
+    exchange_hc: 0,
+    refund_amount: "TESTKUDOS:0",
+    refund_details: [],
+    refund_pending: false,
+    wire_details: [],
+    wire_reports: [],
+    wired: false,
+  },
+});
+
+export const Unpaid = createExample(TestedComponent, {
+  id: "2021.165-03GDFC26Y1NNG",
+  selected: {
+    order_status: "unpaid",
+    order_status_url: "http://merchant.backend/status",
+    creation_time: {
+      t_s: new Date().getTime() / 1000,
+    },
+    summary: "text summary",
+    taler_pay_uri: "pay uri",
+    total_amount: "TESTKUDOS:10",
+  },
+});
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx
new file mode 100644
index 000000000..4bb7051d6
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx
@@ -0,0 +1,776 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { AmountJson, Amounts } from "@gnu-taler/taler-util";
+import { format } from "date-fns";
+import { Fragment, h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import { FormProvider } from "../../../../components/form/FormProvider";
+import { Input } from "../../../../components/form/Input";
+import { InputCurrency } from "../../../../components/form/InputCurrency";
+import { InputDate } from "../../../../components/form/InputDate";
+import { InputDuration } from "../../../../components/form/InputDuration";
+import { InputGroup } from "../../../../components/form/InputGroup";
+import { InputLocation } from "../../../../components/form/InputLocation";
+import { TextField } from "../../../../components/form/TextField";
+import { ProductList } from "../../../../components/product/ProductList";
+import { useBackendContext } from "../../../../context/backend";
+import { MerchantBackend } from "../../../../declaration";
+import { Translate, useTranslator } from "../../../../i18n";
+import { mergeRefunds } from "../../../../utils/amount";
+import { RefundModal } from "../list/Table";
+import { Event, Timeline } from "./Timeline";
+
+type Entity = MerchantBackend.Orders.MerchantOrderStatusResponse;
+type CT = MerchantBackend.ContractTerms;
+
+interface Props {
+  onBack: () => void;
+  selected: Entity;
+  id: string;
+  onRefund: (id: string, value: MerchantBackend.Orders.RefundRequest) => void;
+}
+
+type Paid = MerchantBackend.Orders.CheckPaymentPaidResponse & {
+  refund_taken: string;
+};
+type Unpaid = MerchantBackend.Orders.CheckPaymentUnpaidResponse;
+type Claimed = MerchantBackend.Orders.CheckPaymentClaimedResponse;
+
+function ContractTerms({ value }: { value: CT }) {
+  const i18n = useTranslator();
+
+  return (
+    <InputGroup name="contract_terms" label={i18n`Contract Terms`}>
+      <FormProvider<CT> object={value} valueHandler={null}>
+        <Input<CT>
+          readonly
+          name="summary"
+          label={i18n`Summary`}
+          tooltip={i18n`human-readable description of the whole purchase`}
+        />
+        <InputCurrency<CT>
+          readonly
+          name="amount"
+          label={i18n`Amount`}
+          tooltip={i18n`total price for the transaction`}
+        />
+        {value.fulfillment_url && (
+          <Input<CT>
+            readonly
+            name="fulfillment_url"
+            label={i18n`Fulfillment URL`}
+            tooltip={i18n`URL for this purchase`}
+          />
+        )}
+        <Input<CT>
+          readonly
+          name="max_fee"
+          label={i18n`Max fee`}
+          tooltip={i18n`maximum total deposit fee accepted by the merchant for this contract`}
+        />
+        <Input<CT>
+          readonly
+          name="max_wire_fee"
+          label={i18n`Max wire fee`}
+          tooltip={i18n`maximum wire fee accepted by the merchant`}
+        />
+        <Input<CT>
+          readonly
+          name="wire_fee_amortization"
+          label={i18n`Wire fee amortization`}
+          tooltip={i18n`over how many customer transactions does the merchant expect to amortize wire fees on average`}
+        />
+        <InputDate<CT>
+          readonly
+          name="timestamp"
+          label={i18n`Created at`}
+          tooltip={i18n`time when this contract was generated`}
+        />
+        <InputDate<CT>
+          readonly
+          name="refund_deadline"
+          label={i18n`Refund deadline`}
+          tooltip={i18n`after this deadline has passed no refunds will be accepted`}
+        />
+        <InputDate<CT>
+          readonly
+          name="pay_deadline"
+          label={i18n`Payment deadline`}
+          tooltip={i18n`after this deadline, the merchant won't accept payments for the contract`}
+        />
+        <InputDate<CT>
+          readonly
+          name="wire_transfer_deadline"
+          label={i18n`Wire transfer deadline`}
+          tooltip={i18n`transfer deadline for the exchange`}
+        />
+        <InputDate<CT>
+          readonly
+          name="delivery_date"
+          label={i18n`Delivery date`}
+          tooltip={i18n`time indicating when the order should be delivered`}
+        />
+        {value.delivery_date && (
+          <InputGroup
+            name="delivery_location"
+            label={i18n`Location`}
+            tooltip={i18n`where the order will be delivered`}
+          >
+            <InputLocation name="payments.delivery_location" />
+          </InputGroup>
+        )}
+        <InputDuration<CT>
+          readonly
+          name="auto_refund"
+          label={i18n`Auto-refund delay`}
+          tooltip={i18n`how long the wallet should try to get an automatic refund for the purchase`}
+        />
+        <Input<CT>
+          readonly
+          name="extra"
+          label={i18n`Extra info`}
+          tooltip={i18n`extra data that is only interpreted by the merchant frontend`}
+        />
+      </FormProvider>
+    </InputGroup>
+  );
+}
+
+function ClaimedPage({
+  id,
+  order,
+}: {
+  id: string;
+  order: MerchantBackend.Orders.CheckPaymentClaimedResponse;
+}) {
+  const events: Event[] = [];
+  if (order.contract_terms.timestamp.t_s !== "never") {
+    events.push({
+      when: new Date(order.contract_terms.timestamp.t_s * 1000),
+      description: "order created",
+      type: "start",
+    });
+  }
+  if (order.contract_terms.pay_deadline.t_s !== "never") {
+    events.push({
+      when: new Date(order.contract_terms.pay_deadline.t_s * 1000),
+      description: "pay deadline",
+      type: "deadline",
+    });
+  }
+  if (order.contract_terms.refund_deadline.t_s !== "never") {
+    events.push({
+      when: new Date(order.contract_terms.refund_deadline.t_s * 1000),
+      description: "refund deadline",
+      type: "deadline",
+    });
+  }
+  if (order.contract_terms.wire_transfer_deadline.t_s !== "never") {
+    events.push({
+      when: new Date(order.contract_terms.wire_transfer_deadline.t_s * 1000),
+      description: "wire deadline",
+      type: "deadline",
+    });
+  }
+  if (
+    order.contract_terms.delivery_date &&
+    order.contract_terms.delivery_date.t_s !== "never"
+  ) {
+    events.push({
+      when: new Date(order.contract_terms.delivery_date?.t_s * 1000),
+      description: "delivery",
+      type: "delivery",
+    });
+  }
+
+  const [value, valueHandler] = useState<Partial<Claimed>>(order);
+  const i18n = useTranslator();
+
+  return (
+    <div>
+      <section class="section">
+        <div class="columns">
+          <div class="column" />
+          <div class="column is-10">
+            <section class="hero is-hero-bar">
+              <div class="hero-body">
+                <div class="level">
+                  <div class="level-left">
+                    <div class="level-item">
+                      <Translate>Order</Translate> #{id}
+                      <div class="tag is-info ml-4">
+                        <Translate>claimed</Translate>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="level">
+                  <div class="level-left">
+                    <div class="level-item">
+                      <h1 class="title">{order.contract_terms.amount}</h1>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="level">
+                  <div class="level-left" style={{ maxWidth: "100%" }}>
+                    <div class="level-item" style={{ maxWidth: "100%" }}>
+                      <div
+                        class="content"
+                        style={{
+                          whiteSpace: "nowrap",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                        }}
+                      >
+                        <p>
+                          <b>
+                            <Translate>claimed at</Translate>:
+                          </b>{" "}
+                          {format(
+                            new Date(order.contract_terms.timestamp.t_s * 1000),
+                            "yyyy-MM-dd HH:mm:ss"
+                          )}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            <section class="section">
+              <div class="columns">
+                <div class="column is-4">
+                  <div class="title">
+                    <Translate>Timeline</Translate>
+                  </div>
+                  <Timeline events={events} />
+                </div>
+                <div class="column is-8">
+                  <div class="title">
+                    <Translate>Payment details</Translate>
+                  </div>
+                  <FormProvider<Claimed>
+                    object={value}
+                    valueHandler={valueHandler}
+                  >
+                    <Input
+                      name="contract_terms.summary"
+                      readonly
+                      inputType="multiline"
+                      label={i18n`Summary`}
+                    />
+                    <InputCurrency
+                      name="contract_terms.amount"
+                      readonly
+                      label={i18n`Amount`}
+                    />
+                    <Input<Claimed>
+                      name="order_status"
+                      readonly
+                      label={i18n`Order status`}
+                    />
+                  </FormProvider>
+                </div>
+              </div>
+            </section>
+
+            {order.contract_terms.products.length ? (
+              <Fragment>
+                <div class="title">
+                  <Translate>Product list</Translate>
+                </div>
+                <ProductList list={order.contract_terms.products} />
+              </Fragment>
+            ) : undefined}
+
+            {value.contract_terms && (
+              <ContractTerms value={value.contract_terms} />
+            )}
+          </div>
+          <div class="column" />
+        </div>
+      </section>
+    </div>
+  );
+}
+function PaidPage({
+  id,
+  order,
+  onRefund,
+}: {
+  id: string;
+  order: MerchantBackend.Orders.CheckPaymentPaidResponse;
+  onRefund: (id: string) => void;
+}) {
+  const events: Event[] = [];
+  if (order.contract_terms.timestamp.t_s !== "never") {
+    events.push({
+      when: new Date(order.contract_terms.timestamp.t_s * 1000),
+      description: "order created",
+      type: "start",
+    });
+  }
+  if (order.contract_terms.pay_deadline.t_s !== "never") {
+    events.push({
+      when: new Date(order.contract_terms.pay_deadline.t_s * 1000),
+      description: "pay deadline",
+      type: "deadline",
+    });
+  }
+  if (order.contract_terms.refund_deadline.t_s !== "never") {
+    events.push({
+      when: new Date(order.contract_terms.refund_deadline.t_s * 1000),
+      description: "refund deadline",
+      type: "deadline",
+    });
+  }
+  if (order.contract_terms.wire_transfer_deadline.t_s !== "never") {
+    events.push({
+      when: new Date(order.contract_terms.wire_transfer_deadline.t_s * 1000),
+      description: "wire deadline",
+      type: "deadline",
+    });
+  }
+  if (
+    order.contract_terms.delivery_date &&
+    order.contract_terms.delivery_date.t_s !== "never"
+  ) {
+    if (order.contract_terms.delivery_date)
+      events.push({
+        when: new Date(order.contract_terms.delivery_date?.t_s * 1000),
+        description: "delivery",
+        type: "delivery",
+      });
+  }
+  order.refund_details.reduce(mergeRefunds, []).forEach((e) => {
+    if (e.timestamp.t_s !== "never") {
+      events.push({
+        when: new Date(e.timestamp.t_s * 1000),
+        description: `refund: ${e.amount}: ${e.reason}`,
+        type: e.pending ? "refund" : "refund-taken",
+      });
+    }
+  });
+  if (order.wire_details && order.wire_details.length) {
+    if (order.wire_details.length > 1) {
+      let last: MerchantBackend.Orders.TransactionWireTransfer | null = null;
+      let first: MerchantBackend.Orders.TransactionWireTransfer | null = null;
+      let total: AmountJson | null = null;
+
+      order.wire_details.forEach((w) => {
+        if (last === null || last.execution_time.t_s < w.execution_time.t_s) {
+          last = w;
+        }
+        if (first === null || first.execution_time.t_s > w.execution_time.t_s) {
+          first = w;
+        }
+        total =
+          total === null
+            ? Amounts.parseOrThrow(w.amount)
+            : Amounts.add(total, Amounts.parseOrThrow(w.amount)).amount;
+      });
+      const last_time = last!.execution_time.t_s;
+      if (last_time !== "never") {
+        events.push({
+          when: new Date(last_time * 1000),
+          description: `wired ${Amounts.stringify(total!)}`,
+          type: "wired-range",
+        });
+      }
+      const first_time = first!.execution_time.t_s;
+      if (first_time !== "never") {
+        events.push({
+          when: new Date(first_time * 1000),
+          description: `wire transfer started...`,
+          type: "wired-range",
+        });
+      }
+    } else {
+      order.wire_details.forEach((e) => {
+        if (e.execution_time.t_s !== "never") {
+          events.push({
+            when: new Date(e.execution_time.t_s * 1000),
+            description: `wired ${e.amount}`,
+            type: "wired",
+          });
+        }
+      });
+    }
+  }
+
+  const [value, valueHandler] = useState<Partial<Paid>>(order);
+  const { url } = useBackendContext();
+  const refundHost = url.replace(/.*:\/\//, ""); // remove protocol part
+  const proto = url.startsWith("http://") ? "taler+http" : "taler";
+  const refundurl = `${proto}://refund/${refundHost}/${order.contract_terms.order_id}/`;
+  const refundable =
+    new Date().getTime() < order.contract_terms.refund_deadline.t_s * 1000;
+  const i18n = useTranslator();
+
+  const amount = Amounts.parseOrThrow(order.contract_terms.amount);
+  const refund_taken = order.refund_details.reduce((prev, cur) => {
+    if (cur.pending) return prev;
+    return Amounts.add(prev, Amounts.parseOrThrow(cur.amount)).amount;
+  }, Amounts.getZero(amount.currency));
+  value.refund_taken = Amounts.stringify(refund_taken);
+
+  return (
+    <div>
+      <section class="section">
+        <div class="columns">
+          <div class="column" />
+          <div class="column is-10">
+            <section class="hero is-hero-bar">
+              <div class="hero-body">
+                <div class="level">
+                  <div class="level-left">
+                    <div class="level-item">
+                      <Translate>Order</Translate> #{id}
+                      <div class="tag is-success ml-4">
+                        <Translate>paid</Translate>
+                      </div>
+                      {order.wired ? (
+                        <div class="tag is-success ml-4">
+                          <Translate>wired</Translate>
+                        </div>
+                      ) : null}
+                      {order.refunded ? (
+                        <div class="tag is-danger ml-4">
+                          <Translate>refunded</Translate>
+                        </div>
+                      ) : null}
+                    </div>
+                  </div>
+                </div>
+                <div class="level">
+                  <div class="level-left">
+                    <div class="level-item">
+                      <h1 class="title">{order.contract_terms.amount}</h1>
+                    </div>
+                  </div>
+                  <div class="level-right">
+                    <div class="level-item">
+                      <h1 class="title">
+                        <div class="buttons">
+                          <span
+                            class="has-tooltip-left"
+                            data-tooltip={
+                              refundable
+                                ? i18n`refund order`
+                                : i18n`not refundable`
+                            }
+                          >
+                            <button
+                              class="button is-danger"
+                              disabled={!refundable}
+                              onClick={() => onRefund(id)}
+                            >
+                              <Translate>refund</Translate>
+                            </button>
+                          </span>
+                        </div>
+                      </h1>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="level">
+                  <div class="level-left" style={{ maxWidth: "100%" }}>
+                    <div class="level-item" style={{ maxWidth: "100%" }}>
+                      <div
+                        class="content"
+                        style={{
+                          whiteSpace: "nowrap",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          // maxWidth: '100%',
+                        }}
+                      >
+                        <p>
+                          <a
+                            href={order.contract_terms.fulfillment_url}
+                            rel="nofollow"
+                            target="new"
+                          >
+                            {order.contract_terms.fulfillment_url}
+                          </a>
+                        </p>
+                        <p>
+                          {format(
+                            new Date(order.contract_terms.timestamp.t_s * 1000),
+                            "yyyy/MM/dd HH:mm:ss"
+                          )}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            <section class="section">
+              <div class="columns">
+                <div class="column is-4">
+                  <div class="title">
+                    <Translate>Timeline</Translate>
+                  </div>
+                  <Timeline events={events} />
+                </div>
+                <div class="column is-8">
+                  <div class="title">
+                    <Translate>Payment details</Translate>
+                  </div>
+                  <FormProvider<Paid>
+                    object={value}
+                    valueHandler={valueHandler}
+                  >
+                    {/* <InputCurrency<Paid> name="deposit_total" readonly label={i18n`Deposit total`} /> */}
+                    {order.refunded && (
+                      <InputCurrency<Paid>
+                        name="refund_amount"
+                        readonly
+                        label={i18n`Refunded amount`}
+                      />
+                    )}
+                    {order.refunded && (
+                      <InputCurrency<Paid>
+                        name="refund_taken"
+                        readonly
+                        label={i18n`Refund taken`}
+                      />
+                    )}
+                    <Input<Paid>
+                      name="order_status"
+                      readonly
+                      label={i18n`Order status`}
+                    />
+                    <TextField<Paid>
+                      name="order_status_url"
+                      label={i18n`Status URL`}
+                    >
+                      <a
+                        target="_blank"
+                        rel="noreferrer"
+                        href={order.order_status_url}
+                      >
+                        {order.order_status_url}
+                      </a>
+                    </TextField>
+                    {order.refunded && (
+                      <TextField<Paid>
+                        name="order_status_url"
+                        label={i18n`Refund URI`}
+                      >
+                        <a target="_blank" rel="noreferrer" href={refundurl}>
+                          {refundurl}
+                        </a>
+                      </TextField>
+                    )}
+                  </FormProvider>
+                </div>
+              </div>
+            </section>
+
+            {order.contract_terms.products.length ? (
+              <Fragment>
+                <div class="title">
+                  <Translate>Product list</Translate>
+                </div>
+                <ProductList list={order.contract_terms.products} />
+              </Fragment>
+            ) : undefined}
+
+            {value.contract_terms && (
+              <ContractTerms value={value.contract_terms} />
+            )}
+          </div>
+          <div class="column" />
+        </div>
+      </section>
+    </div>
+  );
+}
+
+function UnpaidPage({
+  id,
+  order,
+}: {
+  id: string;
+  order: MerchantBackend.Orders.CheckPaymentUnpaidResponse;
+}) {
+  const [value, valueHandler] = useState<Partial<Unpaid>>(order);
+  const i18n = useTranslator();
+  return (
+    <div>
+      <section class="hero is-hero-bar">
+        <div class="hero-body">
+          <div class="level">
+            <div class="level-left">
+              <div class="level-item">
+                <h1 class="title">
+                  <Translate>Order</Translate> #{id}
+                </h1>
+              </div>
+              <div class="tag is-dark">
+                <Translate>unpaid</Translate>
+              </div>
+            </div>
+          </div>
+
+          <div class="level">
+            <div class="level-left" style={{ maxWidth: "100%" }}>
+              <div class="level-item" style={{ maxWidth: "100%" }}>
+                <div
+                  class="content"
+                  style={{
+                    whiteSpace: "nowrap",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                  }}
+                >
+                  <p>
+                    <b>
+                      <Translate>pay at</Translate>:
+                    </b>{" "}
+                    <a
+                      href={order.order_status_url}
+                      rel="nofollow"
+                      target="new"
+                    >
+                      {order.order_status_url}
+                    </a>
+                  </p>
+                  <p>
+                    <b>
+                      <Translate>created at</Translate>:
+                    </b>{" "}
+                    {order.creation_time.t_s === "never"
+                      ? "never"
+                      : format(
+                          new Date(order.creation_time.t_s * 1000),
+                          "yyyy-MM-dd HH:mm:ss"
+                        )}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="section is-main-section">
+        <div class="columns">
+          <div class="column" />
+          <div class="column is-four-fifths">
+            <FormProvider<Unpaid> object={value} valueHandler={valueHandler}>
+              <Input<Unpaid>
+                readonly
+                name="summary"
+                label={i18n`Summary`}
+                tooltip={i18n`human-readable description of the whole purchase`}
+              />
+              <InputCurrency<Unpaid>
+                readonly
+                name="total_amount"
+                label={i18n`Amount`}
+                tooltip={i18n`total price for the transaction`}
+              />
+              <Input<Unpaid>
+                name="order_status"
+                readonly
+                label={i18n`Order status`}
+              />
+              <Input<Unpaid>
+                name="order_status_url"
+                readonly
+                label={i18n`Order status URL`}
+              />
+              <TextField<Unpaid> name="taler_pay_uri" label={i18n`Payment URI`}>
+                <a target="_blank" rel="noreferrer" href={value.taler_pay_uri}>
+                  {value.taler_pay_uri}
+                </a>
+              </TextField>
+            </FormProvider>
+          </div>
+          <div class="column" />
+        </div>
+      </section>
+    </div>
+  );
+}
+
+export function DetailPage({ id, selected, onRefund, onBack }: Props): VNode {
+  const [showRefund, setShowRefund] = useState<string | undefined>(undefined);
+
+  const DetailByStatus = function () {
+    switch (selected.order_status) {
+      case "claimed":
+        return <ClaimedPage id={id} order={selected} />;
+      case "paid":
+        return <PaidPage id={id} order={selected} onRefund={setShowRefund} />;
+      case "unpaid":
+        return <UnpaidPage id={id} order={selected} />;
+      default:
+        return (
+          <div>
+            <Translate>
+              Unknown order status. This is an error, please contact the
+              administrator.
+            </Translate>
+          </div>
+        );
+    }
+  };
+
+  return (
+    <Fragment>
+      {DetailByStatus()}
+      {showRefund && (
+        <RefundModal
+          order={selected}
+          onCancel={() => setShowRefund(undefined)}
+          onConfirm={(value) => {
+            onRefund(showRefund, value);
+            setShowRefund(undefined);
+          }}
+        />
+      )}
+      <div class="columns">
+        <div class="column" />
+        <div class="column is-four-fifths">
+          <div class="buttons is-right mt-5">
+            <button class="button" onClick={onBack}>
+              <Translate>Back</Translate>
+            </button>
+          </div>
+        </div>
+        <div class="column" />
+      </div>
+    </Fragment>
+  );
+}
+
+async function copyToClipboard(text: string) {
+  return navigator.clipboard.writeText(text);
+}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/Timeline.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/Timeline.tsx
new file mode 100644
index 000000000..bea65607a
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/Timeline.tsx
@@ -0,0 +1,128 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+import { format } from "date-fns";
+import { h } from "preact";
+import { useEffect, useState } from "preact/hooks";
+
+interface Props {
+  events: Event[];
+}
+
+export function Timeline({ events: e }: Props) {
+  const events = [...e];
+  events.push({
+    when: new Date(),
+    description: "now",
+    type: "now",
+  });
+
+  events.sort((a, b) => a.when.getTime() - b.when.getTime());
+
+  const [state, setState] = useState(events);
+  useEffect(() => {
+    const handle = setTimeout(() => {
+      const eventsWithoutNow = state.filter((e) => e.type !== "now");
+      eventsWithoutNow.push({
+        when: new Date(),
+        description: "now",
+        type: "now",
+      });
+      setState(eventsWithoutNow);
+    }, 1000);
+    return () => {
+      clearTimeout(handle);
+    };
+  });
+  return (
+    <div class="timeline">
+      {events.map((e, i) => {
+        return (
+          <div key={i} class="timeline-item">
+            {(() => {
+              switch (e.type) {
+                case "deadline":
+                  return (
+                    <div class="timeline-marker is-icon ">
+                      <i class="mdi mdi-flag" />
+                    </div>
+                  );
+                case "delivery":
+                  return (
+                    <div class="timeline-marker is-icon ">
+                      <i class="mdi mdi-delivery" />
+                    </div>
+                  );
+                case "start":
+                  return (
+                    <div class="timeline-marker is-icon is-success">
+                      <i class="mdi mdi-flag " />
+                    </div>
+                  );
+                case "wired":
+                  return (
+                    <div class="timeline-marker is-icon is-success">
+                      <i class="mdi mdi-cash" />
+                    </div>
+                  );
+                case "wired-range":
+                  return (
+                    <div class="timeline-marker is-icon is-success">
+                      <i class="mdi mdi-cash" />
+                    </div>
+                  );
+                case "refund":
+                  return (
+                    <div class="timeline-marker is-icon is-danger">
+                      <i class="mdi mdi-cash" />
+                    </div>
+                  );
+                case "refund-taken":
+                  return (
+                    <div class="timeline-marker is-icon is-success">
+                      <i class="mdi mdi-cash" />
+                    </div>
+                  );
+                case "now":
+                  return (
+                    <div class="timeline-marker is-icon is-info">
+                      <i class="mdi mdi-clock" />
+                    </div>
+                  );
+              }
+            })()}
+            <div class="timeline-content">
+              <p class="heading">{format(e.when, "yyyy/MM/dd HH:mm:ss")}</p>
+              <p>{e.description}</p>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+export interface Event {
+  when: Date;
+  description: string;
+  type:
+    | "start"
+    | "refund"
+    | "refund-taken"
+    | "wired"
+    | "wired-range"
+    | "deadline"
+    | "delivery"
+    | "now";
+}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/index.tsx
new file mode 100644
index 000000000..cd4e163eb
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/index.tsx
@@ -0,0 +1,67 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+import { Fragment, h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import { Loading } from "../../../../components/exception/loading";
+import { NotificationCard } from "../../../../components/menu";
+import { HttpError } from "../../../../hooks/backend";
+import { useOrderDetails, useOrderAPI } from "../../../../hooks/order";
+import { useTranslator } from "../../../../i18n";
+import { Notification } from "../../../../utils/types";
+import { DetailPage } from "./DetailPage";
+
+export interface Props {
+  oid: string;
+
+  onBack: () => void;
+  onUnauthorized: () => VNode;
+  onNotFound: () => VNode;
+  onLoadError: (error: HttpError) => VNode;
+}
+
+export default function Update({ oid, onBack, onLoadError, onNotFound, onUnauthorized }: Props): VNode {
+  const { refundOrder } = useOrderAPI();
+  const result = useOrderDetails(oid)
+  const [notif, setNotif] = useState<Notification | undefined>(undefined)
+
+  const i18n = useTranslator()
+
+  if (result.clientError && result.isUnauthorized) return onUnauthorized()
+  if (result.clientError && result.isNotfound) return onNotFound()
+  if (result.loading) return <Loading />
+  if (!result.ok) return onLoadError(result)
+
+  return <Fragment>
+
+    <NotificationCard notification={notif} />
+
+    <DetailPage
+      onBack={onBack}
+      id={oid}
+      onRefund={(id, value) => refundOrder(id, value)
+        .then(() => setNotif({
+          message: i18n`refund created successfully`,
+          type: "SUCCESS"
+        })).catch((error) => setNotif({
+          message: i18n`could not create the refund`,
+          type: "ERROR",
+          description: error.message
+        }))
+      }
+      selected={result.data}
+    />
+  </Fragment>
+}
\ No newline at end of file
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/List.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/List.stories.tsx
new file mode 100644
index 000000000..1dbb3f20d
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/List.stories.tsx
@@ -0,0 +1,107 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { h, VNode, FunctionalComponent } from "preact";
+import { ListPage as TestedComponent } from "./ListPage";
+
+export default {
+  title: "Pages/Order/List",
+  component: TestedComponent,
+  argTypes: {
+    onShowAll: { action: "onShowAll" },
+    onShowPaid: { action: "onShowPaid" },
+    onShowRefunded: { action: "onShowRefunded" },
+    onShowNotWired: { action: "onShowNotWired" },
+    onCopyURL: { action: "onCopyURL" },
+    onSelectDate: { action: "onSelectDate" },
+    onLoadMoreBefore: { action: "onLoadMoreBefore" },
+    onLoadMoreAfter: { action: "onLoadMoreAfter" },
+    onSelectOrder: { action: "onSelectOrder" },
+    onRefundOrder: { action: "onRefundOrder" },
+    onSearchOrderById: { action: "onSearchOrderById" },
+    onCreate: { action: "onCreate" },
+  },
+};
+
+function createExample<Props>(
+  Component: FunctionalComponent<Props>,
+  props: Partial<Props>
+) {
+  const r = (args: any) => <Component {...args} />;
+  r.args = props;
+  return r;
+}
+
+export const Example = createExample(TestedComponent, {
+  orders: [
+    {
+      id: "123",
+      amount: "TESTKUDOS:10",
+      paid: false,
+      refundable: true,
+      row_id: 1,
+      summary: "summary",
+      timestamp: {
+        t_s: new Date().getTime() / 1000,
+      },
+      order_id: "123",
+    },
+    {
+      id: "234",
+      amount: "TESTKUDOS:12",
+      paid: true,
+      refundable: true,
+      row_id: 2,
+      summary:
+        "summary with long text, very very long text that someone want to add as a description of the order",
+      timestamp: {
+        t_s: new Date().getTime() / 1000,
+      },
+      order_id: "234",
+    },
+    {
+      id: "456",
+      amount: "TESTKUDOS:1",
+      paid: false,
+      refundable: false,
+      row_id: 3,
+      summary:
+        "summary with long text, very very long text that someone want to add as a description of the order",
+      timestamp: {
+        t_s: new Date().getTime() / 1000,
+      },
+      order_id: "456",
+    },
+    {
+      id: "234",
+      amount: "TESTKUDOS:12",
+      paid: false,
+      refundable: false,
+      row_id: 4,
+      summary:
+        "summary with long text, very very long text that someone want to add as a description of the order",
+      timestamp: {
+        t_s: new Date().getTime() / 1000,
+      },
+      order_id: "234",
+    },
+  ],
+});
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/ListPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/ListPage.tsx
new file mode 100644
index 000000000..032801bde
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/ListPage.tsx
@@ -0,0 +1,146 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { format } from 'date-fns';
+import { h, VNode } from 'preact';
+import { useState } from 'preact/hooks';
+import { DatePicker } from '../../../../components/picker/DatePicker';
+import { MerchantBackend, WithId } from '../../../../declaration';
+import { Translate, useTranslator } from '../../../../i18n';
+import { CardTable } from './Table';
+
+export interface ListPageProps {
+  errorOrderId: string | undefined,
+
+  onShowAll: () => void,
+  onShowPaid: () => void,
+  onShowRefunded: () => void,
+  onShowNotWired: () => void,
+  onCopyURL: (id: string) => void;
+  isAllActive: string,
+  isPaidActive: string,
+  isRefundedActive: string,
+  isNotWiredActive: string,
+
+  jumpToDate?: Date,
+  onSelectDate: (date?: Date) => void,
+
+  orders: (MerchantBackend.Orders.OrderHistoryEntry & WithId)[];
+  onLoadMoreBefore?: () => void;
+  hasMoreBefore?: boolean;
+  hasMoreAfter?: boolean;
+  onLoadMoreAfter?: () => void;
+
+  onSelectOrder: (o: MerchantBackend.Orders.OrderHistoryEntry & WithId) => void;
+  onRefundOrder: (o: MerchantBackend.Orders.OrderHistoryEntry & WithId) => void;
+  onSearchOrderById: (id: string) => void;
+  onCreate: () => void;
+}
+
+export function ListPage({ orders, errorOrderId, isAllActive, onSelectOrder, onRefundOrder, onSearchOrderById, jumpToDate, onCopyURL, onShowAll, onShowPaid, onShowRefunded, onShowNotWired, onSelectDate, isPaidActive, isRefundedActive, isNotWiredActive, onCreate }: ListPageProps): VNode {
+  const i18n = useTranslator();
+  const dateTooltip = i18n`select date to show nearby orders`;
+  const [pickDate, setPickDate] = useState(false);
+  const [orderId, setOrderId] = useState<string>('');
+
+  return <section class="section is-main-section">
+
+    <div class="level">
+      <div class="level-left">
+        <div class="level-item">
+          <div class="field has-addons">
+            <div class="control">
+              <input class={errorOrderId ? "input is-danger" : "input"} type="text" value={orderId} onChange={e => setOrderId(e.currentTarget.value)} placeholder={i18n`order id`} />
+              {errorOrderId && <p class="help is-danger">{errorOrderId}</p>}
+            </div>
+            <span class="has-tooltip-bottom" data-tooltip={i18n`jump to order with the given order ID`}>
+              <button class="button" onClick={(e) => onSearchOrderById(orderId)}>
+                <span class="icon"><i class="mdi mdi-arrow-right" /></span>
+              </button>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column is-two-thirds">
+        <div class="tabs" style={{overflow:'inherit'}}>
+          <ul>
+            <li class={isAllActive}>
+              <div class="has-tooltip-right" data-tooltip={i18n`remove all filters`}>
+                <a onClick={onShowAll}><Translate>All</Translate></a>
+              </div>
+            </li>
+            <li class={isPaidActive}>
+              <div class="has-tooltip-right" data-tooltip={i18n`only show paid orders`}>
+                <a onClick={onShowPaid}><Translate>Paid</Translate></a>
+              </div>
+            </li>
+            <li class={isRefundedActive}>
+              <div class="has-tooltip-right" data-tooltip={i18n`only show orders with refunds`}>
+                <a onClick={onShowRefunded}><Translate>Refunded</Translate></a>
+              </div>
+            </li>
+            <li class={isNotWiredActive}>
+              <div class="has-tooltip-left" data-tooltip={i18n`only show orders where customers paid, but wire payments from payment provider are still pending`}>
+                <a onClick={onShowNotWired}><Translate>Not wired</Translate></a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="column ">
+        <div class="buttons is-right">
+          <div class="field has-addons">
+            {jumpToDate && <div class="control">
+              <a class="button" onClick={() => onSelectDate(undefined)}>
+                <span class="icon" data-tooltip={i18n`clear date filter`}><i class="mdi mdi-close" /></span>
+              </a>
+            </div>}
+            <div class="control">
+              <span class="has-tooltip-top" data-tooltip={dateTooltip}>
+                <input class="input" type="text" readonly value={!jumpToDate ? '' : format(jumpToDate, 'yyyy/MM/dd')} placeholder={i18n`date (YYYY/MM/DD)`} onClick={() => { setPickDate(true); }} />
+              </span>
+            </div>
+            <div class="control">
+              <span class="has-tooltip-left" data-tooltip={dateTooltip}>
+                <a class="button" onClick={() => { setPickDate(true); }}>
+                  <span class="icon"><i class="mdi mdi-calendar" /></span>
+                </a>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <DatePicker
+      opened={pickDate}
+      closeFunction={() => setPickDate(false)}
+      dateReceiver={onSelectDate} />
+
+    <CardTable orders={orders}
+      onCreate={onCreate}
+      onCopyURL={onCopyURL}
+      onSelect={onSelectOrder}
+      onRefund={onRefundOrder} />
+  </section>;
+}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/Table.tsx
new file mode 100644
index 000000000..60d5fae59
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/Table.tsx
@@ -0,0 +1,412 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { Amounts } from "@gnu-taler/taler-util";
+import { format } from "date-fns";
+import { h, VNode } from "preact";
+import { StateUpdater, useState } from "preact/hooks";
+import {
+  FormErrors,
+  FormProvider,
+} from "../../../../components/form/FormProvider";
+import { Input } from "../../../../components/form/Input";
+import { InputCurrency } from "../../../../components/form/InputCurrency";
+import { InputGroup } from "../../../../components/form/InputGroup";
+import { InputSelector } from "../../../../components/form/InputSelector";
+import { ConfirmModal } from "../../../../components/modal";
+import { useConfigContext } from "../../../../context/config";
+import { MerchantBackend, WithId } from "../../../../declaration";
+import { Translate, useTranslator } from "../../../../i18n";
+import { mergeRefunds } from "../../../../utils/amount";
+
+type Entity = MerchantBackend.Orders.OrderHistoryEntry & WithId;
+interface Props {
+  orders: Entity[];
+  onRefund: (value: Entity) => void;
+  onCopyURL: (id: string) => void;
+  onCreate: () => void;
+  onSelect: (order: Entity) => void;
+  onLoadMoreBefore?: () => void;
+  hasMoreBefore?: boolean;
+  hasMoreAfter?: boolean;
+  onLoadMoreAfter?: () => void;
+}
+
+export function CardTable({
+  orders,
+  onCreate,
+  onRefund,
+  onCopyURL,
+  onSelect,
+  onLoadMoreAfter,
+  onLoadMoreBefore,
+  hasMoreAfter,
+  hasMoreBefore,
+}: Props): VNode {
+  const [rowSelection, rowSelectionHandler] = useState<string[]>([]);
+
+  const i18n = useTranslator();
+
+  return (
+    <div class="card has-table">
+      <header class="card-header">
+        <p class="card-header-title">
+          <span class="icon">
+            <i class="mdi mdi-cash-register" />
+          </span>
+          <Translate>Orders</Translate>
+        </p>
+
+        <div class="card-header-icon" aria-label="more options" />
+
+        <div class="card-header-icon" aria-label="more options">
+          <span class="has-tooltip-left" data-tooltip={i18n`create order`}>
+            <button class="button is-info" type="button" onClick={onCreate}>
+              <span class="icon is-small">
+                <i class="mdi mdi-plus mdi-36px" />
+              </span>
+            </button>
+          </span>
+        </div>
+      </header>
+      <div class="card-content">
+        <div class="b-table has-pagination">
+          <div class="table-wrapper has-mobile-cards">
+            {orders.length > 0 ? (
+              <Table
+                instances={orders}
+                onSelect={onSelect}
+                onRefund={onRefund}
+                onCopyURL={(o) => onCopyURL(o.id)}
+                rowSelection={rowSelection}
+                rowSelectionHandler={rowSelectionHandler}
+                onLoadMoreAfter={onLoadMoreAfter}
+                onLoadMoreBefore={onLoadMoreBefore}
+                hasMoreAfter={hasMoreAfter}
+                hasMoreBefore={hasMoreBefore}
+              />
+            ) : (
+              <EmptyTable />
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+interface TableProps {
+  rowSelection: string[];
+  instances: Entity[];
+  onRefund: (id: Entity) => void;
+  onCopyURL: (id: Entity) => void;
+  onSelect: (id: Entity) => void;
+  rowSelectionHandler: StateUpdater<string[]>;
+  onLoadMoreBefore?: () => void;
+  hasMoreBefore?: boolean;
+  hasMoreAfter?: boolean;
+  onLoadMoreAfter?: () => void;
+}
+
+function Table({
+  instances,
+  onSelect,
+  onRefund,
+  onCopyURL,
+  onLoadMoreAfter,
+  onLoadMoreBefore,
+  hasMoreAfter,
+  hasMoreBefore,
+}: TableProps): VNode {
+  return (
+    <div class="table-container">
+      {onLoadMoreBefore && (
+        <button
+          class="button is-fullwidth"
+          disabled={!hasMoreBefore}
+          onClick={onLoadMoreBefore}
+        >
+          <Translate>load newer orders</Translate>
+        </button>
+      )}
+      <table class="table is-striped is-hoverable is-fullwidth">
+        <thead>
+          <tr>
+            <th style={{ minWidth: 100 }}>
+              <Translate>Date</Translate>
+            </th>
+            <th style={{ minWidth: 100 }}>
+              <Translate>Amount</Translate>
+            </th>
+            <th style={{ minWidth: 400 }}>
+              <Translate>Summary</Translate>
+            </th>
+            <th style={{ minWidth: 50 }} />
+          </tr>
+        </thead>
+        <tbody>
+          {instances.map((i) => {
+            return (
+              <tr key={i.id}>
+                <td
+                  onClick={(): void => onSelect(i)}
+                  style={{ cursor: "pointer" }}
+                >
+                  {i.timestamp.t_s === "never"
+                    ? "never"
+                    : format(
+                        new Date(i.timestamp.t_s * 1000),
+                        "yyyy/MM/dd HH:mm:ss"
+                      )}
+                </td>
+                <td
+                  onClick={(): void => onSelect(i)}
+                  style={{ cursor: "pointer" }}
+                >
+                  {i.amount}
+                </td>
+                <td
+                  onClick={(): void => onSelect(i)}
+                  style={{ cursor: "pointer" }}
+                >
+                  {i.summary}
+                </td>
+                <td class="is-actions-cell right-sticky">
+                  <div class="buttons is-right">
+                    {i.refundable && (
+                      <button
+                        class="button is-small is-danger jb-modal"
+                        type="button"
+                        onClick={(): void => onRefund(i)}
+                      >
+                        <Translate>Refund</Translate>
+                      </button>
+                    )}
+                    {!i.paid && (
+                      <button
+                        class="button is-small is-info jb-modal"
+                        type="button"
+                        onClick={(): void => onCopyURL(i)}
+                      >
+                        <Translate>copy url</Translate>
+                      </button>
+                    )}
+                  </div>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+      {onLoadMoreAfter && (
+        <button
+          class="button is-fullwidth"
+          disabled={!hasMoreAfter}
+          onClick={onLoadMoreAfter}
+        >
+          <Translate>load older orders</Translate>
+        </button>
+      )}
+    </div>
+  );
+}
+
+function EmptyTable(): VNode {
+  return (
+    <div class="content has-text-grey has-text-centered">
+      <p>
+        <span class="icon is-large">
+          <i class="mdi mdi-emoticon-sad mdi-48px" />
+        </span>
+      </p>
+      <p>
+        <Translate>No orders have been found matching your query!</Translate>
+      </p>
+    </div>
+  );
+}
+
+interface RefundModalProps {
+  onCancel: () => void;
+  onConfirm: (value: MerchantBackend.Orders.RefundRequest) => void;
+  order: MerchantBackend.Orders.MerchantOrderStatusResponse;
+}
+
+export function RefundModal({
+  order,
+  onCancel,
+  onConfirm,
+}: RefundModalProps): VNode {
+  type State = { mainReason?: string; description?: string; refund?: string };
+  const [form, setValue] = useState<State>({});
+  const i18n = useTranslator();
+  // const [errors, setErrors] = useState<FormErrors<State>>({});
+
+  const refunds = (
+    order.order_status === "paid" ? order.refund_details : []
+  ).reduce(mergeRefunds, []);
+
+  const config = useConfigContext();
+  const totalRefunded = refunds
+    .map((r) => r.amount)
+    .reduce(
+      (p, c) => Amounts.add(p, Amounts.parseOrThrow(c)).amount,
+      Amounts.getZero(config.currency)
+    );
+  const orderPrice =
+    order.order_status === "paid"
+      ? Amounts.parseOrThrow(order.contract_terms.amount)
+      : undefined;
+  const totalRefundable = !orderPrice
+    ? Amounts.getZero(totalRefunded.currency)
+    : refunds.length
+    ? Amounts.sub(orderPrice, totalRefunded).amount
+    : orderPrice;
+
+  const isRefundable = Amounts.isNonZero(totalRefundable);
+  const duplicatedText = i18n`duplicated`;
+
+  const errors: FormErrors<State> = {
+    mainReason: !form.mainReason ? i18n`required` : undefined,
+    description:
+      !form.description && form.mainReason !== duplicatedText
+        ? i18n`required`
+        : undefined,
+    refund: !form.refund
+      ? i18n`required`
+      : !Amounts.parse(form.refund)
+      ? i18n`invalid format`
+      : Amounts.cmp(totalRefundable, Amounts.parse(form.refund)!) === -1
+      ? i18n`this value exceed the refundable amount`
+      : undefined,
+  };
+  const hasErrors = Object.keys(errors).some(
+    (k) => (errors as any)[k] !== undefined
+  );
+
+  const validateAndConfirm = () => {
+    try {
+      if (!form.refund) return;
+      onConfirm({
+        refund: Amounts.stringify(
+          Amounts.add(Amounts.parse(form.refund)!, totalRefunded).amount
+        ),
+        reason:
+          form.description === undefined
+            ? form.mainReason || ""
+            : `${form.mainReason}: ${form.description}`,
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  //FIXME: parameters in the translation
+  return (
+    <ConfirmModal
+      description="refund"
+      danger
+      active
+      disabled={!isRefundable || hasErrors}
+      onCancel={onCancel}
+      onConfirm={validateAndConfirm}
+    >
+      {refunds.length > 0 && (
+        <div class="columns">
+          <div class="column is-12">
+            <InputGroup
+              name="asd"
+              label={`${Amounts.stringify(totalRefunded)} was already refunded`}
+            >
+              <table class="table is-fullwidth">
+                <thead>
+                  <tr>
+                    <th>
+                      <Translate>date</Translate>
+                    </th>
+                    <th>
+                      <Translate>amount</Translate>
+                    </th>
+                    <th>
+                      <Translate>reason</Translate>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {refunds.map((r) => {
+                    return (
+                      <tr key={r.timestamp.t_s}>
+                        <td>
+                          {r.timestamp.t_s === "never"
+                            ? "never"
+                            : format(
+                                new Date(r.timestamp.t_s * 1000),
+                                "yyyy-MM-dd HH:mm:ss"
+                              )}
+                        </td>
+                        <td>{r.amount}</td>
+                        <td>{r.reason}</td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </InputGroup>
+          </div>
+        </div>
+      )}
+
+      {isRefundable && (
+        <FormProvider<State>
+          errors={errors}
+          object={form}
+          valueHandler={(d) => setValue(d as any)}
+        >
+          <InputCurrency<State>
+            name="refund"
+            label={i18n`Refund`}
+            tooltip={i18n`amount to be refunded`}
+          >
+            <Translate>Max refundable:</Translate>{" "}
+            {Amounts.stringify(totalRefundable)}
+          </InputCurrency>
+          <InputSelector
+            name="mainReason"
+            label={i18n`Reason`}
+            values={[
+              i18n`Choose one...`,
+              duplicatedText,
+              i18n`requested by the customer`,
+              i18n`other`,
+            ]}
+            tooltip={i18n`why this order is being refunded`}
+          />
+          {form.mainReason && form.mainReason !== duplicatedText ? (
+            <Input<State>
+              label={i18n`Description`}
+              name="description"
+              tooltip={i18n`more information to give context`}
+            />
+          ) : undefined}
+        </FormProvider>
+      )}
+    </ConfirmModal>
+  );
+}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/index.tsx
new file mode 100644
index 000000000..47e143fb7
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/index.tsx
@@ -0,0 +1,171 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { h, VNode, Fragment } from 'preact';
+import { useState } from 'preact/hooks';
+import { Loading } from '../../../../components/exception/loading';
+import { NotificationCard } from '../../../../components/menu';
+import { MerchantBackend, WithId } from '../../../../declaration';
+import { HttpError } from '../../../../hooks/backend';
+import { InstanceOrderFilter, useInstanceOrders, useOrderAPI, useOrderDetails } from '../../../../hooks/order';
+import { useTranslator } from '../../../../i18n';
+import { Notification } from '../../../../utils/types';
+import { RefundModal } from './Table';
+import { ListPage } from './ListPage';
+
+interface Props {
+  onUnauthorized: () => VNode;
+  onLoadError: (error: HttpError) => VNode;
+  onNotFound: () => VNode;
+  onSelect: (id: string) => void;
+  onCreate: () => void;
+}
+
+export default function ({ onUnauthorized, onLoadError, onCreate, onSelect, onNotFound }: Props): VNode {
+  const [filter, setFilter] = useState<InstanceOrderFilter>({})
+  const [orderToBeRefunded, setOrderToBeRefunded] = useState<MerchantBackend.Orders.OrderHistoryEntry | undefined>(undefined)
+
+  const setNewDate = (date?: Date) => setFilter(prev => ({ ...prev, date }))
+
+  const result = useInstanceOrders(filter, setNewDate)
+  const { refundOrder, getPaymentURL } = useOrderAPI()
+
+  const [notif, setNotif] = useState<Notification | undefined>(undefined)
+
+  if (result.clientError && result.isUnauthorized) return onUnauthorized()
+  if (result.clientError && result.isNotfound) return onNotFound()
+  if (result.loading) return <Loading />
+  if (!result.ok) return onLoadError(result)
+
+  const isPaidActive = filter.paid === 'yes' ? "is-active" : ''
+  const isRefundedActive = filter.refunded === 'yes' ? "is-active" : ''
+  const isNotWiredActive = filter.wired === 'no' ? "is-active" : ''
+  const isAllActive = filter.paid === undefined && filter.refunded === undefined && filter.wired === undefined ? 'is-active' : ''
+
+  const i18n = useTranslator()
+  const [errorOrderId, setErrorOrderId] = useState<string | undefined>(undefined)
+
+  async function testIfOrderExistAndSelect(orderId: string) {
+    if (!orderId) {
+      setErrorOrderId(i18n`Enter an order id`)
+      return;
+    }
+    try {
+      await getPaymentURL(orderId)
+      onSelect(orderId)
+      setErrorOrderId(undefined)
+    } catch {
+      setErrorOrderId(i18n`order not found`)
+    }
+  }
+
+  return <Fragment>
+    <NotificationCard notification={notif} />
+
+    <ListPage
+      orders={result.data.orders.map(o => ({ ...o, id: o.order_id }))}
+      onLoadMoreBefore={result.loadMorePrev} hasMoreBefore={!result.isReachingStart}
+      onLoadMoreAfter={result.loadMore} hasMoreAfter={!result.isReachingEnd}
+
+      onSelectOrder={(order) => onSelect(order.id)}
+      onRefundOrder={(value) => setOrderToBeRefunded(value)}
+
+      errorOrderId={errorOrderId}
+      isAllActive={isAllActive}
+      isNotWiredActive={isNotWiredActive}
+      isPaidActive={isPaidActive}
+      isRefundedActive={isRefundedActive}
+      jumpToDate={filter.date}
+      onCopyURL={(id) => getPaymentURL(id).then((resp) => copyToClipboard(resp.data))}
+
+      onCreate={onCreate}
+      onSearchOrderById={testIfOrderExistAndSelect}
+      onSelectDate={setNewDate}
+      onShowAll={() => setFilter({})}
+      onShowPaid={() => setFilter({ paid: 'yes' })}
+      onShowRefunded={() => setFilter({ refunded: 'yes' })}
+      onShowNotWired={() => setFilter({ wired: 'no' })}
+
+    />
+
+    {orderToBeRefunded && <RefundModalForTable
+      id={orderToBeRefunded.order_id}
+      onCancel={() => setOrderToBeRefunded(undefined)}
+      onConfirm={(value) => refundOrder(orderToBeRefunded.order_id, value)
+        .then(() => setNotif({
+          message: i18n`refund created successfully`,
+          type: "SUCCESS"
+        }))
+        .catch((error) => setNotif({
+          message: i18n`could not create the refund`,
+          type: "ERROR",
+          description: error.message
+        }))
+        .then(() => setOrderToBeRefunded(undefined))}
+      onLoadError={(error) => {
+        setNotif({
+          message: i18n`could not create the refund`,
+          type: "ERROR",
+          description: error.message
+        });
+        setOrderToBeRefunded(undefined);
+        return <div />;
+      }}
+      onUnauthorized={onUnauthorized}
+      onNotFound={() => {
+        setNotif({
+          message: i18n`could not get the order to refund`,
+          type: "ERROR",
+          // description: error.message
+        });
+        setOrderToBeRefunded(undefined);
+        return <div />;
+      }} />}
+  </Fragment>
+}
+
+interface RefundProps {
+  id: string;
+  onUnauthorized: () => VNode;
+  onLoadError: (error: HttpError) => VNode;
+  onNotFound: () => VNode;
+  onCancel: () => void;
+  onConfirm: (m: MerchantBackend.Orders.RefundRequest) => void;
+}
+
+function RefundModalForTable({ id, onUnauthorized, onLoadError, onNotFound, onConfirm, onCancel }: RefundProps) {
+  const result = useOrderDetails(id);
+
+  if (result.clientError && result.isUnauthorized) return onUnauthorized()
+  if (result.clientError && result.isNotfound) return onNotFound()
+  if (result.loading) return <Loading />
+  if (!result.ok) return onLoadError(result)
+
+  return <RefundModal
+    order={result.data}
+    onCancel={onCancel}
+    onConfirm={onConfirm}
+  />
+}
+
+async function copyToClipboard(text: string) {
+  return navigator.clipboard.writeText(text)
+}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/create/Create.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/create/Create.stories.tsx
new file mode 100644
index 000000000..1d9ea53f6
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/products/create/Create.stories.tsx
@@ -0,0 +1,42 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { h, VNode, FunctionalComponent } from 'preact';
+import { CreatePage as TestedComponent } from './CreatePage';
+
+
+export default {
+  title: 'Pages/Product/Create',
+  component: TestedComponent,
+  argTypes: {
+    onCreate: { action: 'onCreate' },
+    onBack: { action: 'onBack' },
+  },
+};
+
+function createExample<Props>(Component: FunctionalComponent<Props>, props: Partial<Props>) {
+  const r = (args: any) => <Component {...args} />
+  r.args = props
+  return r
+}
+
+export const Example = createExample(TestedComponent, {
+});
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/create/CreatePage.tsx
new file mode 100644
index 000000000..ed669f67f
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/products/create/CreatePage.tsx
@@ -0,0 +1,65 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { h, VNode } from "preact";
+import { AsyncButton } from "../../../../components/exception/AsyncButton";
+import { ProductForm } from "../../../../components/product/ProductForm";
+import { MerchantBackend } from "../../../../declaration";
+import { useListener } from "../../../../hooks/listener";
+import { Translate, useTranslator } from "../../../../i18n";
+
+type Entity = MerchantBackend.Products.ProductAddDetail & { product_id: string}
+
+interface Props {
+  onCreate: (d: Entity) => Promise<void>;
+  onBack?: () => void;
+}
+
+
+export function CreatePage({ onCreate, onBack }: Props): VNode {
+
+  const [submitForm, addFormSubmitter] = useListener<Entity | undefined>((result) => {
+    if (result) return onCreate(result)
+    return Promise.reject()
+  })
+
+  const i18n = useTranslator()
+
+  return <div>
+    <section class="section is-main-section">
+      <div class="columns">
+        <div class="column" />
+        <div class="column is-four-fifths">
+          <ProductForm onSubscribe={addFormSubmitter} />
+
+          <div class="buttons is-right mt-5">
+            {onBack && <button class="button" onClick={onBack} ><Translate>Cancel</Translate></button>}
+            <AsyncButton onClick={submitForm} data-tooltip={
+              !submitForm ? i18n`Need to complete marked fields` : 'confirm operation'
+            } disabled={!submitForm}><Translate>Confirm</Translate></AsyncButton>
+          </div>
+
+        </div>
+        <div class="column" />
+      </div>
+    </section>
+  </div>
+}
\ No newline at end of file
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/create/CreatedSuccessfully.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/create/CreatedSuccessfully.tsx
new file mode 100644
index 000000000..b56750405
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/products/create/CreatedSuccessfully.tsx
@@ -0,0 +1,67 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+import { h, VNode } from "preact";
+import { CreatedSuccessfully as Template } from "../../../../components/notifications/CreatedSuccessfully";
+import { Entity } from "./index";
+import emptyImage from "../../assets/empty.png";
+
+interface Props {
+  entity: Entity;
+  onConfirm: () => void;
+  onCreateAnother?: () => void;
+}
+
+export function CreatedSuccessfully({ entity, onConfirm, onCreateAnother }: Props): VNode {
+
+  return <Template onConfirm={onConfirm} onCreateAnother={onCreateAnother}>
+    <div class="field is-horizontal">
+      <div class="field-label is-normal">
+        <label class="label">Image</label>
+      </div>
+      <div class="field-body is-flex-grow-3">
+        <div class="field">
+          <p class="control">
+            <img src={entity.image} style={{ width: 200, height: 200 }} />
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="field is-horizontal">
+      <div class="field-label is-normal">
+        <label class="label">Description</label>
+      </div>
+      <div class="field-body is-flex-grow-3">
+        <div class="field">
+          <p class="control">
+            <textarea class="input" readonly value={entity.description} />
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="field is-horizontal">
+      <div class="field-label is-normal">
+        <label class="label">Price</label>
+      </div>
+      <div class="field-body is-flex-grow-3">
+        <div class="field">
+          <p class="control">
+            <input class="input" readonly value={entity.price} />
+          </p>
+        </div>
+      </div>
+    </div>
+  </Template>;
+}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/create/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/create/index.tsx
new file mode 100644
index 000000000..46454582a
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/products/create/index.tsx
@@ -0,0 +1,55 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { Fragment, h, VNode } from 'preact';
+import { useState } from 'preact/hooks';
+import { NotificationCard } from '../../../../components/menu';
+import { MerchantBackend } from '../../../../declaration';
+import { useProductAPI } from '../../../../hooks/product';
+import { useTranslator } from '../../../../i18n';
+import { Notification } from '../../../../utils/types';
+import { CreatePage } from './CreatePage';
+
+export type Entity = MerchantBackend.Products.ProductAddDetail
+interface Props {
+  onBack?: () => void;
+  onConfirm: () => void;
+}
+export default function CreateProduct({ onConfirm, onBack }: Props): VNode {
+  const { createProduct } = useProductAPI()
+  const [notif, setNotif] = useState<Notification | undefined>(undefined)
+  const i18n = useTranslator()
+  
+  return <Fragment>
+    <NotificationCard notification={notif} />
+    <CreatePage
+      onBack={onBack}
+      onCreate={(request: MerchantBackend.Products.ProductAddDetail) => {
+        return createProduct(request).then(() => onConfirm()).catch((error) => {
+          setNotif({
+            message: i18n`could not create product`,
+            type: "ERROR",
+            description: error.message
+          })
+        })
+      }} />
+  </Fragment>
+}
\ No newline at end of file
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/list/List.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/list/List.stories.tsx
new file mode 100644
index 000000000..beae83b15
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/products/list/List.stories.tsx
@@ -0,0 +1,58 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { h, VNode, FunctionalComponent } from 'preact';
+import { CardTable as TestedComponent } from './Table';
+
+
+export default {
+  title: 'Pages/Product/List',
+  component: TestedComponent,
+  argTypes: {
+    onCreate: { action: 'onCreate' },
+    onSelect: { action: 'onSelect' },
+    onDelete: { action: 'onDelete' },
+    onUpdate: { action: 'onUpdate' },
+  },
+};
+
+function createExample<Props>(Component: FunctionalComponent<Props>, props: Partial<Props>) {
+  const r = (args: any) => <Component {...args} />
+  r.args = props
+  return r
+}
+
+
+export const Example = createExample(TestedComponent, {
+  instances: [{
+    id: 'orderid',
+    description: 'description1',
+    description_i18n: {} as any,
+    image: '',
+    price: 'TESTKUDOS:10',
+    taxes: [],
+    total_lost: 10,
+    total_sold: 5,
+    total_stock: 15,
+    unit: 'bar',
+    address: {}
+  }]
+});
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx
new file mode 100644
index 000000000..9c85d976e
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx
@@ -0,0 +1,479 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { format } from "date-fns";
+import { ComponentChildren, Fragment, h, VNode } from "preact";
+import { StateUpdater, useState } from "preact/hooks";
+import {
+  FormProvider,
+  FormErrors,
+} from "../../../../components/form/FormProvider";
+import { InputCurrency } from "../../../../components/form/InputCurrency";
+import { InputNumber } from "../../../../components/form/InputNumber";
+import { MerchantBackend, WithId } from "../../../../declaration";
+import emptyImage from "../../../../assets/empty.png";
+import { Translate, useTranslator } from "../../../../i18n";
+import { Amounts } from "@gnu-taler/taler-util";
+
+type Entity = MerchantBackend.Products.ProductDetail & WithId;
+
+interface Props {
+  instances: Entity[];
+  onDelete: (id: Entity) => void;
+  onSelect: (product: Entity) => void;
+  onUpdate: (
+    id: string,
+    data: MerchantBackend.Products.ProductPatchDetail
+  ) => Promise<void>;
+  onCreate: () => void;
+  selected?: boolean;
+}
+
+export function CardTable({
+  instances,
+  onCreate,
+  onSelect,
+  onUpdate,
+  onDelete,
+}: Props): VNode {
+  const [rowSelection, rowSelectionHandler] = useState<string | undefined>(
+    undefined
+  );
+  const i18n = useTranslator();
+  return (
+    <div class="card has-table">
+      <header class="card-header">
+        <p class="card-header-title">
+          <span class="icon">
+            <i class="mdi mdi-shopping" />
+          </span>
+          <Translate>Products</Translate>
+        </p>
+        <div class="card-header-icon" aria-label="more options">
+          <span
+            class="has-tooltip-left"
+            data-tooltip={i18n`add product to inventory`}
+          >
+            <button class="button is-info" type="button" onClick={onCreate}>
+              <span class="icon is-small">
+                <i class="mdi mdi-plus mdi-36px" />
+              </span>
+            </button>
+          </span>
+        </div>
+      </header>
+      <div class="card-content">
+        <div class="b-table has-pagination">
+          <div class="table-wrapper has-mobile-cards">
+            {instances.length > 0 ? (
+              <Table
+                instances={instances}
+                onSelect={onSelect}
+                onDelete={onDelete}
+                onUpdate={onUpdate}
+                rowSelection={rowSelection}
+                rowSelectionHandler={rowSelectionHandler}
+              />
+            ) : (
+              <EmptyTable />
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+interface TableProps {
+  rowSelection: string | undefined;
+  instances: Entity[];
+  onSelect: (id: Entity) => void;
+  onUpdate: (
+    id: string,
+    data: MerchantBackend.Products.ProductPatchDetail
+  ) => Promise<void>;
+  onDelete: (id: Entity) => void;
+  rowSelectionHandler: StateUpdater<string | undefined>;
+}
+
+function Table({
+  rowSelection,
+  rowSelectionHandler,
+  instances,
+  onSelect,
+  onUpdate,
+  onDelete,
+}: TableProps): VNode {
+  const i18n = useTranslator();
+  return (
+    <div class="table-container">
+      <table class="table is-fullwidth is-striped is-hoverable is-fullwidth">
+        <thead>
+          <tr>
+            <th>
+              <Translate>Image</Translate>
+            </th>
+            <th>
+              <Translate>Description</Translate>
+            </th>
+            <th>
+              <Translate>Sell</Translate>
+            </th>
+            <th>
+              <Translate>Taxes</Translate>
+            </th>
+            <th>
+              <Translate>Profit</Translate>
+            </th>
+            <th>
+              <Translate>Stock</Translate>
+            </th>
+            <th>
+              <Translate>Sold</Translate>
+            </th>
+            <th />
+          </tr>
+        </thead>
+        <tbody>
+          {instances.map((i) => {
+            const restStockInfo = !i.next_restock
+              ? ""
+              : i.next_restock.t_s === "never"
+              ? "never"
+              : `restock at ${format(
+                  new Date(i.next_restock.t_s * 1000),
+                  "yyyy/MM/dd"
+                )}`;
+            let stockInfo: ComponentChildren = "";
+            if (i.total_stock < 0) {
+              stockInfo = "infinite";
+            } else {
+              const totalStock = i.total_stock - i.total_lost - i.total_sold;
+              stockInfo = (
+                <label title={restStockInfo}>
+                  {totalStock} {i.unit}
+                </label>
+              );
+            }
+
+            const isFree = Amounts.isZero(Amounts.parseOrThrow(i.price));
+
+            return (
+              <Fragment key={i.id}>
+                <tr key="info">
+                  <td
+                    onClick={() =>
+                      rowSelection !== i.id && rowSelectionHandler(i.id)
+                    }
+                    style={{ cursor: "pointer" }}
+                  >
+                    <img
+                      src={i.image ? i.image : emptyImage}
+                      style={{
+                        border: "solid black 1px",
+                        width: 100,
+                        height: 100,
+                      }}
+                    />
+                  </td>
+                  <td
+                    onClick={() =>
+                      rowSelection !== i.id && rowSelectionHandler(i.id)
+                    }
+                    style={{ cursor: "pointer" }}
+                  >
+                    {i.description}
+                  </td>
+                  <td
+                    onClick={() =>
+                      rowSelection !== i.id && rowSelectionHandler(i.id)
+                    }
+                    style={{ cursor: "pointer" }}
+                  >
+                    {isFree ? i18n`free` : `${i.price} / ${i.unit}`}
+                  </td>
+                  <td
+                    onClick={() =>
+                      rowSelection !== i.id && rowSelectionHandler(i.id)
+                    }
+                    style={{ cursor: "pointer" }}
+                  >
+                    {sum(i.taxes)}
+                  </td>
+                  <td
+                    onClick={() =>
+                      rowSelection !== i.id && rowSelectionHandler(i.id)
+                    }
+                    style={{ cursor: "pointer" }}
+                  >
+                    {difference(i.price, sum(i.taxes))}
+                  </td>
+                  <td
+                    onClick={() =>
+                      rowSelection !== i.id && rowSelectionHandler(i.id)
+                    }
+                    style={{ cursor: "pointer" }}
+                  >
+                    {stockInfo}
+                  </td>
+                  <td
+                    onClick={() =>
+                      rowSelection !== i.id && rowSelectionHandler(i.id)
+                    }
+                    style={{ cursor: "pointer" }}
+                  >
+                    {i.total_sold} {i.unit}
+                  </td>
+                  <td class="is-actions-cell right-sticky">
+                    <div class="buttons is-right">
+                      <span
+                        class="has-tooltip-bottom"
+                        data-tooltip={i18n`go to product update page`}
+                      >
+                        <button
+                          class="button is-small is-success "
+                          type="button"
+                          onClick={(): void => onSelect(i)}
+                        >
+                          <Translate>Update</Translate>
+                        </button>
+                      </span>
+                      <span
+                        class="has-tooltip-left"
+                        data-tooltip={i18n`remove this product from the database`}
+                      >
+                        <button
+                          class="button is-small is-danger"
+                          type="button"
+                          onClick={(): void => onDelete(i)}
+                        >
+                          <Translate>Delete</Translate>
+                        </button>
+                      </span>
+                    </div>
+                  </td>
+                </tr>
+                {rowSelection === i.id && (
+                  <tr key="form">
+                    <td colSpan={10}>
+                      <FastProductUpdateForm
+                        product={i}
+                        onUpdate={(prod) =>
+                          onUpdate(i.id, prod).then((r) =>
+                            rowSelectionHandler(undefined)
+                          )
+                        }
+                        onCancel={() => rowSelectionHandler(undefined)}
+                      />
+                    </td>
+                  </tr>
+                )}
+              </Fragment>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+interface FastProductUpdateFormProps {
+  product: Entity;
+  onUpdate: (
+    data: MerchantBackend.Products.ProductPatchDetail
+  ) => Promise<void>;
+  onCancel: () => void;
+}
+interface FastProductUpdate {
+  incoming: number;
+  lost: number;
+  price: string;
+}
+interface UpdatePrice {
+  price: string;
+}
+
+function FastProductWithInfiniteStockUpdateForm({
+  product,
+  onUpdate,
+  onCancel,
+}: FastProductUpdateFormProps) {
+  const [value, valueHandler] = useState<UpdatePrice>({ price: product.price });
+  const i18n = useTranslator();
+
+  return (
+    <Fragment>
+      <FormProvider<FastProductUpdate>
+        name="added"
+        object={value}
+        valueHandler={valueHandler as any}
+      >
+        <InputCurrency<FastProductUpdate>
+          name="price"
+          label={i18n`Price`}
+          tooltip={i18n`update the product with new price`}
+        />
+      </FormProvider>
+
+      <div class="buttons is-right mt-5">
+        <button class="button" onClick={onCancel}>
+          <Translate>Cancel</Translate>
+        </button>
+        <span
+          class="has-tooltip-left"
+          data-tooltip={i18n`update product with new price`}
+        >
+          <button
+            class="button is-info"
+            onClick={() =>
+              onUpdate({
+                ...product,
+                price: value.price,
+              })
+            }
+          >
+            <Translate>Confirm</Translate>
+          </button>
+        </span>
+      </div>
+    </Fragment>
+  );
+}
+
+function FastProductWithManagedStockUpdateForm({
+  product,
+  onUpdate,
+  onCancel,
+}: FastProductUpdateFormProps) {
+  const [value, valueHandler] = useState<FastProductUpdate>({
+    incoming: 0,
+    lost: 0,
+    price: product.price,
+  });
+
+  const currentStock =
+    product.total_stock - product.total_sold - product.total_lost;
+
+  const errors: FormErrors<FastProductUpdate> = {
+    lost:
+      currentStock + value.incoming < value.lost
+        ? `lost cannot be greater that current + incoming (max ${
+            currentStock + value.incoming
+          })`
+        : undefined,
+  };
+
+  const hasErrors = Object.keys(errors).some(
+    (k) => (errors as any)[k] !== undefined
+  );
+  const i18n = useTranslator();
+
+  return (
+    <Fragment>
+      <FormProvider<FastProductUpdate>
+        name="added"
+        errors={errors}
+        object={value}
+        valueHandler={valueHandler as any}
+      >
+        <InputNumber<FastProductUpdate>
+          name="incoming"
+          label={i18n`Incoming`}
+          tooltip={i18n`add more elements to the inventory`}
+        />
+        <InputNumber<FastProductUpdate>
+          name="lost"
+          label={i18n`Lost`}
+          tooltip={i18n`report elements lost in the inventory`}
+        />
+        <InputCurrency<FastProductUpdate>
+          name="price"
+          label={i18n`Price`}
+          tooltip={i18n`new price for the product`}
+        />
+      </FormProvider>
+
+      <div class="buttons is-right mt-5">
+        <button class="button" onClick={onCancel}>
+          <Translate>Cancel</Translate>
+        </button>
+        <span
+          class="has-tooltip-left"
+          data-tooltip={
+            hasErrors
+              ? i18n`the are value with errors`
+              : i18n`update product with new stock and price`
+          }
+        >
+          <button
+            class="button is-info"
+            disabled={hasErrors}
+            onClick={() =>
+              onUpdate({
+                ...product,
+                total_stock: product.total_stock + value.incoming,
+                total_lost: product.total_lost + value.lost,
+                price: value.price,
+              })
+            }
+          >
+            <Translate>Confirm</Translate>
+          </button>
+        </span>
+      </div>
+    </Fragment>
+  );
+}
+
+function FastProductUpdateForm(props: FastProductUpdateFormProps) {
+  return props.product.total_stock === -1 ? (
+    <FastProductWithInfiniteStockUpdateForm {...props} />
+  ) : (
+    <FastProductWithManagedStockUpdateForm {...props} />
+  );
+}
+
+function EmptyTable(): VNode {
+  return (
+    <div class="content has-text-grey has-text-centered">
+      <p>
+        <span class="icon is-large">
+          <i class="mdi mdi-emoticon-sad mdi-48px" />
+        </span>
+      </p>
+      <p>
+        <Translate>
+          There is no products yet, add more pressing the + sign
+        </Translate>
+      </p>
+    </div>
+  );
+}
+
+function difference(price: string, tax: number) {
+  if (!tax) return price;
+  const ps = price.split(":");
+  const p = parseInt(ps[1], 10);
+  ps[1] = `${p - tax}`;
+  return ps.join(":");
+}
+function sum(taxes: MerchantBackend.Tax[]) {
+  return taxes.reduce((p, c) => p + parseInt(c.tax.split(":")[1], 10), 0);
+}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/list/index.tsx
new file mode 100644
index 000000000..63e440df5
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/products/list/index.tsx
@@ -0,0 +1,80 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { h, VNode } from 'preact';
+import { useState } from 'preact/hooks';
+import { Loading } from '../../../../components/exception/loading';
+import { NotificationCard } from '../../../../components/menu';
+import { MerchantBackend, WithId } from '../../../../declaration';
+import { HttpError } from '../../../../hooks/backend';
+import { useInstanceProducts, useProductAPI } from "../../../../hooks/product";
+import { useTranslator } from '../../../../i18n';
+import { Notification } from '../../../../utils/types';
+import { CardTable } from './Table';
+
+interface Props {
+  onUnauthorized: () => VNode;
+  onNotFound: () => VNode;
+  onCreate: () => void;
+  onSelect: (id: string) => void;
+  onLoadError: (e: HttpError) => VNode;
+}
+export default function ProductList({ onUnauthorized, onLoadError, onCreate, onSelect, onNotFound }: Props): VNode {
+  const result = useInstanceProducts()
+  const { deleteProduct, updateProduct } = useProductAPI()
+  const [notif, setNotif] = useState<Notification | undefined>(undefined)
+
+  const i18n = useTranslator()
+
+  if (result.clientError && result.isUnauthorized) return onUnauthorized()
+  if (result.clientError && result.isNotfound) return onNotFound()
+  if (result.loading) return <Loading />
+  if (!result.ok) return onLoadError(result)
+
+  return <section class="section is-main-section">
+    <NotificationCard notification={notif} />
+
+    <CardTable instances={result.data}
+      onCreate={onCreate}
+      onUpdate={(id, prod) => updateProduct(id, prod)
+        .then(() => setNotif({
+          message: i18n`product updated successfully`,
+          type: "SUCCESS"
+        })).catch((error) => setNotif({
+          message: i18n`could not update the product`,
+          type: "ERROR",
+          description: error.message
+        }))
+      }
+      onSelect={(product) => onSelect(product.id)}
+      onDelete={(prod: (MerchantBackend.Products.ProductDetail & WithId)) => deleteProduct(prod.id)
+        .then(() => setNotif({
+          message: i18n`product delete successfully`,
+          type: "SUCCESS"
+        })).catch((error) => setNotif({
+          message: i18n`could not delete the product`,
+          type: "ERROR",
+          description: error.message
+        }))
+      }
+    />
+  </section>
+}
\ No newline at end of file
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/update/Update.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/update/Update.stories.tsx
new file mode 100644
index 000000000..3a57f7fac
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/products/update/Update.stories.tsx
@@ -0,0 +1,71 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { h, VNode, FunctionalComponent } from 'preact';
+import { UpdatePage as TestedComponent } from './UpdatePage';
+
+
+export default {
+  title: 'Pages/Product/Update',
+  component: TestedComponent,
+  argTypes: {
+    onUpdate: { action: 'onUpdate' },
+    onBack: { action: 'onBack' },
+  },
+};
+
+function createExample<Props>(Component: FunctionalComponent<Props>, props: Partial<Props>) {
+  const r = (args: any) => <Component {...args} />
+  r.args = props
+  return r
+}
+
+export const WithManagedStock = createExample(TestedComponent, {
+  product: {
+    product_id: '20102-ASDAS-QWE',
+    description: 'description1',
+    description_i18n: {} as any,
+    image: '',
+    price: 'TESTKUDOS:10',
+    taxes: [],
+    total_lost: 10,
+    total_sold: 5,
+    total_stock: 15,
+    unit: 'bar',
+    address: {}
+  }
+});
+
+export const WithInfiniteStock = createExample(TestedComponent, {
+  product: {
+    product_id: '20102-ASDAS-QWE',
+    description: 'description1',
+    description_i18n: {} as any,
+    image: '',
+    price: 'TESTKUDOS:10',
+    taxes: [],
+    total_lost: 10,
+    total_sold: 5,
+    total_stock: -1,
+    unit: 'bar',
+    address: {}
+  }
+});
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/update/UpdatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/update/UpdatePage.tsx
new file mode 100644
index 000000000..d7eb3d162
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/products/update/UpdatePage.tsx
@@ -0,0 +1,77 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { h, VNode } from "preact";
+import { AsyncButton } from "../../../../components/exception/AsyncButton";
+import { ProductForm } from "../../../../components/product/ProductForm";
+import { MerchantBackend, WithId } from "../../../../declaration";
+import { useListener } from "../../../../hooks/listener";
+import { Translate, useTranslator } from "../../../../i18n";
+
+type Entity = MerchantBackend.Products.ProductDetail & { product_id: string }
+
+interface Props {
+  onUpdate: (d: Entity) => Promise<void>;
+  onBack?: () => void;
+  product: Entity;
+}
+
+export function UpdatePage({ product, onUpdate, onBack }: Props): VNode {
+  const [submitForm, addFormSubmitter] = useListener<Entity | undefined>((result) => {
+    if (result) return onUpdate(result)
+    return Promise.resolve()
+  })
+
+  const i18n = useTranslator()
+
+  return <div>
+    <section class="section">
+      <section class="hero is-hero-bar">
+        <div class="hero-body">
+
+          <div class="level">
+            <div class="level-left">
+              <div class="level-item">
+                <span class="is-size-4"><Translate>Product id:</Translate><b>{product.product_id}</b></span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <hr />
+
+      <div class="columns">
+        <div class="column" />
+        <div class="column is-four-fifths">
+          <ProductForm initial={product} onSubscribe={addFormSubmitter} alreadyExist />
+
+          <div class="buttons is-right mt-5">
+            {onBack && <button class="button" onClick={onBack} ><Translate>Cancel</Translate></button>}
+            <AsyncButton onClick={submitForm} data-tooltip={
+              !submitForm ? i18n`Need to complete marked fields` : 'confirm operation'
+            } disabled={!submitForm}><Translate>Confirm</Translate></AsyncButton>
+          </div>
+        </div>
+        <div class="column" />
+      </div>
+    </section>
+  </div>
+}
\ No newline at end of file
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/update/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/update/index.tsx
new file mode 100644
index 000000000..a6a61c815
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/products/update/index.tsx
@@ -0,0 +1,71 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { Fragment, h, VNode } from 'preact';
+import { useState } from 'preact/hooks';
+import { Loading } from '../../../../components/exception/loading';
+import { NotificationCard } from '../../../../components/menu';
+import { MerchantBackend } from '../../../../declaration';
+import { HttpError } from '../../../../hooks/backend';
+import { useProductAPI, useProductDetails } from '../../../../hooks/product';
+import { useTranslator } from '../../../../i18n';
+import { Notification } from '../../../../utils/types';
+import { UpdatePage } from './UpdatePage';
+
+export type Entity = MerchantBackend.Products.ProductAddDetail
+interface Props {
+  onBack?: () => void;
+  onConfirm: () => void;
+  onUnauthorized: () => VNode;
+  onNotFound: () => VNode;
+  onLoadError: (e: HttpError) => VNode;
+  pid: string;
+}
+export default function UpdateProduct({ pid, onConfirm, onBack, onUnauthorized, onNotFound, onLoadError }: Props): VNode {
+  const { updateProduct } = useProductAPI()
+  const result = useProductDetails(pid)
+  const [notif, setNotif] = useState<Notification | undefined>(undefined)
+
+  const i18n = useTranslator()
+
+  if (result.clientError && result.isUnauthorized) return onUnauthorized()
+  if (result.clientError && result.isNotfound) return onNotFound()
+  if (result.loading) return <Loading />
+  if (!result.ok) return onLoadError(result)
+
+  return <Fragment>
+    <NotificationCard notification={notif} />
+    <UpdatePage
+      product={{ ...result.data, product_id: pid }}
+      onBack={onBack}
+      onUpdate={(data) => {
+        return updateProduct(pid, data)
+          .then(onConfirm)
+          .catch((error) => {
+            setNotif({
+              message: i18n`could not create product`,
+              type: "ERROR",
+              description: error.message
+            })
+          })
+      }} />
+  </Fragment>
+}
\ No newline at end of file
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/Create.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/Create.stories.tsx
new file mode 100644
index 000000000..e138770a8
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/Create.stories.tsx
@@ -0,0 +1,42 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { h, VNode, FunctionalComponent } from 'preact';
+import { CreatePage as TestedComponent } from './CreatePage';
+
+
+export default {
+  title: 'Pages/Reserve/Create',
+  component: TestedComponent,
+  argTypes: {
+    onCreate: { action: 'onCreate' },
+    onBack: { action: 'onBack' },
+  },
+};
+
+function createExample<Props>(Component: FunctionalComponent<Props>, props: Partial<Props>) {
+  const r = (args: any) => <Component {...args} />
+  r.args = props
+  return r
+}
+
+export const Example = createExample(TestedComponent, {
+});
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatePage.tsx
new file mode 100644
index 000000000..2e85cf9c8
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatePage.tsx
@@ -0,0 +1,168 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { Fragment, h, VNode } from "preact";
+import { StateUpdater, useEffect, useState } from "preact/hooks";
+import { FormErrors, FormProvider } from "../../../../components/form/FormProvider";
+import { Input } from "../../../../components/form/Input";
+import { InputCurrency } from "../../../../components/form/InputCurrency";
+import { ExchangeBackend, MerchantBackend } from "../../../../declaration";
+import { Translate, useTranslator } from "../../../../i18n";
+import { AsyncButton } from "../../../../components/exception/AsyncButton";
+import { canonicalizeBaseUrl, ExchangeKeysJson } from "@gnu-taler/taler-util"
+import { PAYTO_WIRE_METHOD_LOOKUP, URL_REGEX } from "../../../../utils/constants";
+import { request } from "../../../../hooks/backend";
+import { InputSelector } from "../../../../components/form/InputSelector";
+
+type Entity = MerchantBackend.Tips.ReserveCreateRequest
+
+interface Props {
+  onCreate: (d: Entity) => Promise<void>;
+  onBack?: () => void;
+}
+
+
+enum Steps {
+  EXCHANGE,
+  WIRE_METHOD,
+}
+
+interface ViewProps {
+  step: Steps,
+  setCurrentStep: (s: Steps) => void;
+  reserve: Partial<Entity>;
+  onBack?: () => void;
+  submitForm: () => Promise<void>;
+  setReserve: StateUpdater<Partial<Entity>>;
+}
+function ViewStep({ step, setCurrentStep, reserve, onBack, submitForm, setReserve }: ViewProps): VNode {
+  const i18n = useTranslator()
+  const [wireMethods, setWireMethods] = useState<Array<string>>([])
+  const [exchangeQueryError, setExchangeQueryError] = useState<string | undefined>(undefined)
+
+  useEffect(() => {
+    setExchangeQueryError(undefined)
+  }, [reserve.exchange_url])
+
+  switch (step) {
+    case Steps.EXCHANGE: {
+      const errors: FormErrors<Entity> = {
+        initial_balance: !reserve.initial_balance ? 'cannot be empty' : !(parseInt(reserve.initial_balance.split(':')[1], 10) > 0) ? i18n`it should be greater than 0` : undefined,
+        exchange_url: !reserve.exchange_url ? i18n`cannot be empty` : !URL_REGEX.test(reserve.exchange_url) ? i18n`must be a valid URL` : !exchangeQueryError ? undefined : exchangeQueryError,
+      }
+
+      const hasErrors = Object.keys(errors).some(k => (errors as any)[k] !== undefined)
+
+      return <Fragment>
+        <FormProvider<Entity> object={reserve} errors={errors} valueHandler={setReserve}>
+          <InputCurrency<Entity> name="initial_balance" label={i18n`Initial balance`} tooltip={i18n`balance prior to deposit`} />
+          <Input<Entity> name="exchange_url" label={i18n`Exchange URL`} tooltip={i18n`URL of exchange`} />
+        </FormProvider>
+
+        <div class="buttons is-right mt-5">
+          {onBack && <button class="button" onClick={onBack} ><Translate>Cancel</Translate></button>}
+          <AsyncButton class="has-tooltip-left" onClick={() => {
+            return request<ExchangeBackend.WireResponse>(`${reserve.exchange_url}wire`).then(r => {
+              const wireMethods = r.data.accounts.map(a => {
+                const match = PAYTO_WIRE_METHOD_LOOKUP.exec(a.payto_uri)
+                return match && match[1] || ''
+              })
+              setWireMethods(wireMethods)
+              setCurrentStep(Steps.WIRE_METHOD)
+              return
+            }).catch((r: any) => {
+              setExchangeQueryError(r.message)
+            })
+          }} data-tooltip={
+            hasErrors ? i18n`Need to complete marked fields` : 'confirm operation'
+          } disabled={hasErrors} ><Translate>Next</Translate></AsyncButton>
+        </div>
+      </Fragment>
+    }
+
+    case Steps.WIRE_METHOD: {
+      const errors: FormErrors<Entity> = {
+        wire_method: !reserve.wire_method ? i18n`cannot be empty` : undefined,
+      }
+
+      const hasErrors = Object.keys(errors).some(k => (errors as any)[k] !== undefined)
+      return <Fragment>
+        <FormProvider<Entity> object={reserve} errors={errors} valueHandler={setReserve}>
+          <InputCurrency<Entity> name="initial_balance" label={i18n`Initial balance`} tooltip={i18n`balance prior to deposit`} readonly />
+          <Input<Entity> name="exchange_url" label={i18n`Exchange URL`} tooltip={i18n`URL of exchange`} readonly />
+          <InputSelector<Entity> name="wire_method" label={i18n`Wire method`} tooltip={i18n`method to use for wire transfer`} values={wireMethods} placeholder={i18n`Select one wire method`} />
+        </FormProvider>
+        <div class="buttons is-right mt-5">
+          {onBack && <button class="button" onClick={() => setCurrentStep(Steps.EXCHANGE)} ><Translate>Back</Translate></button>}
+          <AsyncButton onClick={submitForm} data-tooltip={
+              hasErrors ? i18n`Need to complete marked fields` : 'confirm operation'
+            } disabled={hasErrors} ><Translate>Confirm</Translate></AsyncButton>
+        </div>
+      </Fragment>
+
+    }
+  }
+}
+
+export function CreatePage({ onCreate, onBack }: Props): VNode {
+  const [reserve, setReserve] = useState<Partial<Entity>>({})
+
+
+  const submitForm = () => {
+    return onCreate(reserve as Entity)
+  }
+
+  const [currentStep, setCurrentStep] = useState(Steps.EXCHANGE)
+
+
+  return <div>
+    <section class="section is-main-section">
+      <div class="columns">
+        <div class="column" />
+        <div class="column is-four-fifths">
+
+          <div class="tabs is-toggle is-fullwidth is-small">
+            <ul>
+              <li class={currentStep === Steps.EXCHANGE ? "is-active" : ""}>
+                <a style={{ cursor: 'initial' }}>
+                  <span>Step 1: Specify exchange</span>
+                </a>
+              </li>
+              <li class={currentStep === Steps.WIRE_METHOD ? "is-active" : ""}>
+                <a style={{ cursor: 'initial' }}>
+                  <span>Step 2: Select wire method</span>
+                </a>
+              </li>
+            </ul>
+          </div>
+
+          <ViewStep step={currentStep} reserve={reserve}
+            setCurrentStep={setCurrentStep}
+            setReserve={setReserve}
+            submitForm={submitForm}
+            onBack={onBack}
+          />
+        </div>
+        <div class="column" />
+      </div>
+    </section>
+  </div>
+}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatedSuccessfully.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatedSuccessfully.stories.tsx
new file mode 100644
index 000000000..f013040ff
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatedSuccessfully.stories.tsx
@@ -0,0 +1,53 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { h, VNode, FunctionalComponent } from 'preact';
+import { CreatedSuccessfully as TestedComponent } from './CreatedSuccessfully';
+
+
+export default {
+  title: 'Pages/Reserve/CreatedSuccessfully',
+  component: TestedComponent,
+  argTypes: {
+    onCreate: { action: 'onCreate' },
+    onBack: { action: 'onBack' },
+  },
+};
+
+function createExample<Props>(Component: FunctionalComponent<Props>, props: Partial<Props>) {
+  const r = (args: any) => <Component {...args} />
+  r.args = props
+  return r
+}
+
+export const Example = createExample(TestedComponent, {
+  entity: {
+    request: {
+      exchange_url: 'http://exchange.taler/',
+      initial_balance: 'TESTKUDOS:1',
+      wire_method: 'x-taler-bank',
+    },
+    response: {
+      payto_uri: 'payto://x-taler-bank/bank.taler:8080/exchange_account',
+      reserve_pub: 'WEQWDASDQWEASDADASDQWEQWEASDAS'
+    }
+  }
+});
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatedSuccessfully.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatedSuccessfully.tsx
new file mode 100644
index 000000000..255486d22
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatedSuccessfully.tsx
@@ -0,0 +1,79 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import { h, VNode } from "preact";
+import { CreatedSuccessfully as Template } from "../../../../components/notifications/CreatedSuccessfully";
+import { MerchantBackend } from "../../../../declaration";
+import { Translate } from "../../../../i18n";
+import { QR } from "../../../../components/exception/QR";
+
+type Entity = { request: MerchantBackend.Tips.ReserveCreateRequest, response: MerchantBackend.Tips.ReserveCreateConfirmation };
+
+interface Props {
+  entity: Entity;
+  onConfirm: () => void;
+  onCreateAnother?: () => void;
+}
+
+export function CreatedSuccessfully({ entity, onConfirm, onCreateAnother }: Props): VNode {
+  const link = `${entity.response.payto_uri}?message=${entity.response.reserve_pub}&amount=${entity.request.initial_balance}`
+
+  return <Template onConfirm={onConfirm} onCreateAnother={onCreateAnother}>
+    <div class="field is-horizontal">
+      <div class="field-label is-normal">
+        <label class="label">Amount</label>
+      </div>
+      <div class="field-body is-flex-grow-3">
+        <div class="field">
+          <p class="control">
+            <input readonly class="input" value={entity.request.initial_balance} />
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="field is-horizontal">
+      <div class="field-label is-normal">
+        <label class="label">Exchange bank account</label>
+      </div>
+      <div class="field-body is-flex-grow-3">
+        <div class="field">
+          <p class="control">
+            <input readonly class="input" value={entity.response.payto_uri} />
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="field is-horizontal">
+      <div class="field-label is-normal">
+        <label class="label">Wire transfer subject</label>
+      </div>
+      <div class="field-body is-flex-grow-3">
+        <div class="field">
+          <p class="control">
+            <input class="input" readonly value={entity.response.reserve_pub} />
+          </p>
+        </div>
+      </div>
+    </div>
+    <p class="is-size-5"><Translate>To complete the setup of the reserve, you must now initiate a wire transfer using the given wire transfer subject and crediting the specified amount to the indicated account of the exchange.</Translate></p>
+    <p class="is-size-5"><Translate>If your system supports RFC 8905, you can do this by opening this URI:</Translate></p>
+    <pre>
+      <a target="_blank" rel="noreferrer" href={link}>{link}</a>
+    </pre>
+    <QR text={link} />
+  </Template>;
+}
+
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/index.tsx
new file mode 100644
index 000000000..5c2fdaf4b
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/index.tsx
@@ -0,0 +1,71 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { Fragment, h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import { NotificationCard } from "../../../../components/menu";
+import { MerchantBackend } from "../../../../declaration";
+import { useReservesAPI } from "../../../../hooks/reserves";
+import { useTranslator } from "../../../../i18n";
+import { Notification } from "../../../../utils/types";
+import { CreatedSuccessfully } from "./CreatedSuccessfully";
+import { CreatePage } from "./CreatePage";
+interface Props {
+  onBack: () => void;
+  onConfirm: () => void;
+}
+export default function CreateReserve({ onBack, onConfirm }: Props): VNode {
+  const { createReserve } = useReservesAPI();
+  const [notif, setNotif] = useState<Notification | undefined>(undefined);
+  const i18n = useTranslator();
+
+  const [createdOk, setCreatedOk] = useState<
+    | {
+        request: MerchantBackend.Tips.ReserveCreateRequest;
+        response: MerchantBackend.Tips.ReserveCreateConfirmation;
+      }
+    | undefined
+  >(undefined);
+
+  if (createdOk) {
+    return <CreatedSuccessfully entity={createdOk} onConfirm={onConfirm} />;
+  }
+
+  return (
+    <Fragment>
+      <NotificationCard notification={notif} />
+      <CreatePage
+        onBack={onBack}
+        onCreate={(request: MerchantBackend.Tips.ReserveCreateRequest) => {
+          return createReserve(request)
+            .then((r) => setCreatedOk({ request, response: r.data }))
+            .catch((error) => {
+              setNotif({
+                message: i18n`could not create reserve`,
+                type: "ERROR",
+                description: error.message,
+              });
+            });
+        }}
+      />
+    </Fragment>
+  );
+}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/DetailPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/DetailPage.tsx
new file mode 100644
index 000000000..cbc70179b
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/DetailPage.tsx
@@ -0,0 +1,278 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { Amounts } from "@gnu-taler/taler-util";
+import { format } from "date-fns";
+import { Fragment, h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import { QR } from "../../../../components/exception/QR";
+import { FormProvider } from "../../../../components/form/FormProvider";
+import { Input } from "../../../../components/form/Input";
+import { InputCurrency } from "../../../../components/form/InputCurrency";
+import { InputDate } from "../../../../components/form/InputDate";
+import { TextField } from "../../../../components/form/TextField";
+import { ContinueModal, SimpleModal } from "../../../../components/modal";
+import { MerchantBackend } from "../../../../declaration";
+import { useTipDetails } from "../../../../hooks/reserves";
+import { Translate, useTranslator } from "../../../../i18n";
+import { TipInfo } from "./TipInfo";
+
+type Entity = MerchantBackend.Tips.ReserveDetail;
+type CT = MerchantBackend.ContractTerms;
+
+interface Props {
+  onBack: () => void;
+  selected: Entity;
+  id: string;
+}
+
+export function DetailPage({ id, selected, onBack }: Props): VNode {
+  const i18n = useTranslator();
+  const didExchangeAckTransfer = Amounts.isNonZero(
+    Amounts.parseOrThrow(selected.exchange_initial_amount)
+  );
+  const link = `${selected.payto_uri}?message=${id}&amount=${selected.merchant_initial_amount}`;
+
+  return (
+    <div class="columns">
+      <div class="column" />
+      <div class="column is-four-fifths">
+        <div class="section main-section">
+          <FormProvider object={{ ...selected, id }} valueHandler={null}>
+            <InputDate<Entity>
+              name="creation_time"
+              label={i18n`Created at`}
+              readonly
+            />
+            <InputDate<Entity>
+              name="expiration_time"
+              label={i18n`Valid until`}
+              readonly
+            />
+            <InputCurrency<Entity>
+              name="merchant_initial_amount"
+              label={i18n`Created balance`}
+              readonly
+            />
+            <TextField<Entity>
+              name="exchange_url"
+              label={i18n`Exchange URL`}
+              readonly
+            >
+              <a target="_blank" rel="noreferrer" href={selected.exchange_url}>
+                {selected.exchange_url}
+              </a>
+            </TextField>
+
+            {didExchangeAckTransfer && (
+              <Fragment>
+                <InputCurrency<Entity>
+                  name="exchange_initial_amount"
+                  label={i18n`Exchange balance`}
+                  readonly
+                />
+                <InputCurrency<Entity>
+                  name="pickup_amount"
+                  label={i18n`Picked up`}
+                  readonly
+                />
+                <InputCurrency<Entity>
+                  name="committed_amount"
+                  label={i18n`Committed`}
+                  readonly
+                />
+              </Fragment>
+            )}
+            <Input<Entity>
+              name="payto_uri"
+              label={i18n`Account address`}
+              readonly
+            />
+            <Input name="id" label={i18n`Subject`} readonly />
+          </FormProvider>
+
+          {didExchangeAckTransfer ? (
+            <Fragment>
+              <div class="card has-table">
+                <header class="card-header">
+                  <p class="card-header-title">
+                    <span class="icon">
+                      <i class="mdi mdi-cash-register" />
+                    </span>
+                    <Translate>Tips</Translate>
+                  </p>
+                </header>
+                <div class="card-content">
+                  <div class="b-table has-pagination">
+                    <div class="table-wrapper has-mobile-cards">
+                      {selected.tips && selected.tips.length > 0 ? (
+                        <Table tips={selected.tips} />
+                      ) : (
+                        <EmptyTable />
+                      )}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </Fragment>
+          ) : (
+            <Fragment>
+              <p class="is-size-5">
+                <Translate>
+                  To complete the setup of the reserve, you must now initiate a
+                  wire transfer using the given wire transfer subject and
+                  crediting the specified amount to the indicated account of the
+                  exchange.
+                </Translate>
+              </p>
+              <p class="is-size-5">
+                <Translate>
+                  If your system supports RFC 8905, you can do this by opening
+                  this URI:
+                </Translate>
+              </p>
+              <pre>
+                <a target="_blank" rel="noreferrer" href={link}>
+                  {link}
+                </a>
+              </pre>
+              <QR text={link} />
+            </Fragment>
+          )}
+
+          <div class="buttons is-right mt-5">
+            <button class="button" onClick={onBack}>
+              <Translate>Back</Translate>
+            </button>
+          </div>
+        </div>
+      </div>
+      <div class="column" />
+    </div>
+  );
+}
+
+function EmptyTable(): VNode {
+  return (
+    <div class="content has-text-grey has-text-centered">
+      <p>
+        <span class="icon is-large">
+          <i class="mdi mdi-emoticon-sad mdi-48px" />
+        </span>
+      </p>
+      <p>
+        <Translate>No tips has been authorized from this reserve</Translate>
+      </p>
+    </div>
+  );
+}
+
+interface TableProps {
+  tips: MerchantBackend.Tips.TipStatusEntry[];
+}
+
+function Table({ tips }: TableProps): VNode {
+  return (
+    <div class="table-container">
+      <table class="table is-fullwidth is-striped is-hoverable is-fullwidth">
+        <thead>
+          <tr>
+            <th>
+              <Translate>Authorized</Translate>
+            </th>
+            <th>
+              <Translate>Picked up</Translate>
+            </th>
+            <th>
+              <Translate>Reason</Translate>
+            </th>
+            <th>
+              <Translate>Expiration</Translate>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {tips.map((t, i) => {
+            return <TipRow id={t.tip_id} key={i} entry={t} />;
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function TipRow({
+  id,
+  entry,
+}: {
+  id: string;
+  entry: MerchantBackend.Tips.TipStatusEntry;
+}) {
+  const [selected, setSelected] = useState(false);
+  const result = useTipDetails(id);
+  if (result.loading) {
+    return (
+      <tr>
+        <td>...</td>
+        <td>...</td>
+        <td>...</td>
+        <td>...</td>
+      </tr>
+    );
+  }
+  if (!result.ok) {
+    return (
+      <tr>
+        <td>...</td> {/* authorized */}
+        <td>{entry.total_amount}</td>
+        <td>{entry.reason}</td>
+        <td>...</td> {/* expired */}
+      </tr>
+    );
+  }
+  const info = result.data;
+  function onSelect() {
+    setSelected(true);
+  }
+  return (
+    <Fragment>
+      {selected && (
+        <SimpleModal
+          description="tip"
+          active
+          onCancel={() => setSelected(false)}
+        >
+          <TipInfo id={id} amount={info.total_authorized} entity={info} />
+        </SimpleModal>
+      )}
+      <tr>
+        <td onClick={onSelect}>{info.total_authorized}</td>
+        <td onClick={onSelect}>{info.total_picked_up}</td>
+        <td onClick={onSelect}>{info.reason}</td>
+        <td onClick={onSelect}>
+          {info.expiration.t_s === "never"
+            ? "never"
+            : format(info.expiration.t_s * 1000, "yyyy/MM/dd HH:mm:ss")}
+        </td>
+      </tr>
+    </Fragment>
+  );
+}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/Details.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/Details.stories.tsx
new file mode 100644
index 000000000..98c1fa72e
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/Details.stories.tsx
@@ -0,0 +1,105 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { h, VNode, FunctionalComponent } from "preact";
+import { DetailPage as TestedComponent } from "./DetailPage";
+
+export default {
+  title: "Pages/Reserve/Detail",
+  component: TestedComponent,
+  argTypes: {
+    onUpdate: { action: "onUpdate" },
+    onBack: { action: "onBack" },
+  },
+};
+
+function createExample<Props>(
+  Component: FunctionalComponent<Props>,
+  props: Partial<Props>
+) {
+  const r = (args: any) => <Component {...args} />;
+  r.args = props;
+  return r;
+}
+
+export const Funded = createExample(TestedComponent, {
+  id: "THISISTHERESERVEID",
+  selected: {
+    active: true,
+    committed_amount: "TESTKUDOS:10",
+    creation_time: {
+      t_s: new Date().getTime() / 1000,
+    },
+    exchange_initial_amount: "TESTKUDOS:10",
+    expiration_time: {
+      t_s: new Date().getTime() / 1000,
+    },
+    merchant_initial_amount: "TESTKUDOS:10",
+    pickup_amount: "TESTKUDOS:10",
+    payto_uri: "payto://x-taler-bank/bank.taler:8080/account",
+    exchange_url: "http://exchange.taler/",
+  },
+});
+
+export const NotYetFunded = createExample(TestedComponent, {
+  id: "THISISTHERESERVEID",
+  selected: {
+    active: true,
+    committed_amount: "TESTKUDOS:10",
+    creation_time: {
+      t_s: new Date().getTime() / 1000,
+    },
+    exchange_initial_amount: "TESTKUDOS:0",
+    expiration_time: {
+      t_s: new Date().getTime() / 1000,
+    },
+    merchant_initial_amount: "TESTKUDOS:10",
+    pickup_amount: "TESTKUDOS:10",
+    payto_uri: "payto://x-taler-bank/bank.taler:8080/account",
+    exchange_url: "http://exchange.taler/",
+  },
+});
+
+export const FundedWithEmptyTips = createExample(TestedComponent, {
+  id: "THISISTHERESERVEID",
+  selected: {
+    active: true,
+    committed_amount: "TESTKUDOS:10",
+    creation_time: {
+      t_s: new Date().getTime() / 1000,
+    },
+    exchange_initial_amount: "TESTKUDOS:10",
+    expiration_time: {
+      t_s: new Date().getTime() / 1000,
+    },
+    merchant_initial_amount: "TESTKUDOS:10",
+    pickup_amount: "TESTKUDOS:10",
+    payto_uri: "payto://x-taler-bank/bank.taler:8080/account",
+    exchange_url: "http://exchange.taler/",
+    tips: [
+      {
+        reason: "asdasd",
+        tip_id: "123",
+        total_amount: "TESTKUDOS:1",
+      },
+    ],
+  },
+});
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/TipInfo.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/TipInfo.tsx
new file mode 100644
index 000000000..3f384966b
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/TipInfo.tsx
@@ -0,0 +1,87 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+import { format } from "date-fns";
+import { Fragment, h, VNode } from "preact";
+import { useBackendContext } from "../../../../context/backend";
+import { MerchantBackend } from "../../../../declaration";
+
+type Entity = MerchantBackend.Tips.TipDetails;
+
+interface Props {
+  id: string;
+  entity: Entity;
+  amount: string;
+}
+
+export function TipInfo({ id, amount, entity }: Props): VNode {
+  const { url } = useBackendContext();
+  const tipHost = url.replace(/.*:\/\//, ""); // remove protocol part
+  const proto = url.startsWith("http://") ? "taler+http" : "taler";
+  const tipURL = `${proto}://tip/${tipHost}/${id}`;
+  return (
+    <Fragment>
+      <div class="field is-horizontal">
+        <div class="field-label is-normal">
+          <label class="label">Amount</label>
+        </div>
+        <div class="field-body is-flex-grow-3">
+          <div class="field">
+            <p class="control">
+              <input readonly class="input" value={amount} />
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="field is-horizontal">
+        <div class="field-label is-normal">
+          <label class="label">URL</label>
+        </div>
+        <div class="field-body is-flex-grow-3">
+          <div class="field" style={{ overflowWrap: "anywhere" }}>
+            <p class="control">
+              <a target="_blank" rel="noreferrer" href={tipURL}>
+                {tipURL}
+              </a>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="field is-horizontal">
+        <div class="field-label is-normal">
+          <label class="label">Valid until</label>
+        </div>
+        <div class="field-body is-flex-grow-3">
+          <div class="field">
+            <p class="control">
+              <input
+                class="input"
+                readonly
+                value={
+                  !entity.expiration || entity.expiration.t_s === "never"
+                    ? "never"
+                    : format(
+                        entity.expiration.t_s * 1000,
+                        "yyyy/MM/dd HH:mm:ss"
+                      )
+                }
+              />
+            </p>
+          </div>
+        </div>
+      </div>
+    </Fragment>
+  );
+}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/index.tsx
new file mode 100644
index 000000000..c2483f053
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/index.tsx
@@ -0,0 +1,56 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { Fragment, h, VNode } from "preact";
+import { Loading } from "../../../../components/exception/loading";
+import { HttpError } from "../../../../hooks/backend";
+import { useReserveDetails } from "../../../../hooks/reserves";
+import { DetailPage } from "./DetailPage";
+
+interface Props {
+  rid: string;
+
+  onUnauthorized: () => VNode;
+  onLoadError: (error: HttpError) => VNode;
+  onNotFound: () => VNode;
+  onDelete: () => void;
+  onBack: () => void;
+}
+export default function DetailReserve({
+  rid,
+  onUnauthorized,
+  onLoadError,
+  onNotFound,
+  onBack,
+  onDelete,
+}: Props): VNode {
+  const result = useReserveDetails(rid);
+
+  if (result.clientError && result.isUnauthorized) return onUnauthorized();
+  if (result.clientError && result.isNotfound) return onNotFound();
+  if (result.loading) return <Loading />;
+  if (!result.ok) return onLoadError(result);
+  return (
+    <Fragment>
+      <DetailPage selected={result.data} onBack={onBack} id={rid} />
+    </Fragment>
+  );
+}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/AutorizeTipModal.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/AutorizeTipModal.tsx
new file mode 100644
index 000000000..ec468b2e9
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/AutorizeTipModal.tsx
@@ -0,0 +1,85 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import { FormErrors, FormProvider } from "../../../../components/form/FormProvider";
+import { Input } from "../../../../components/form/Input";
+import { InputCurrency } from "../../../../components/form/InputCurrency";
+import { ConfirmModal, ContinueModal } from "../../../../components/modal";
+import { MerchantBackend } from "../../../../declaration";
+import { useTranslator } from "../../../../i18n";
+import { AuthorizeTipSchema } from "../../../../schemas";
+import { CreatedSuccessfully } from "./CreatedSuccessfully";
+import * as yup from 'yup';
+
+interface AuthorizeTipModalProps {
+  onCancel: () => void;
+  onConfirm: (value: MerchantBackend.Tips.TipCreateRequest) => void;
+  tipAuthorized?: {
+    response: MerchantBackend.Tips.TipCreateConfirmation;
+    request: MerchantBackend.Tips.TipCreateRequest;
+  };
+}
+
+export function AuthorizeTipModal({ onCancel, onConfirm, tipAuthorized }: AuthorizeTipModalProps): VNode {
+  // const result = useOrderDetails(id)
+  type State = MerchantBackend.Tips.TipCreateRequest
+  const [form, setValue] = useState<Partial<State>>({})
+  const i18n = useTranslator();
+
+  // const [errors, setErrors] = useState<FormErrors<State>>({})
+  let errors: FormErrors<State> = {}
+  try {
+    AuthorizeTipSchema.validateSync(form, { abortEarly: false })
+  } catch (err) {
+    if (err instanceof yup.ValidationError) {
+      const yupErrors = err.inner as any[]
+      errors = yupErrors.reduce((prev, cur) => !cur.path ? prev : ({ ...prev, [cur.path]: cur.message }), {})
+    }
+  }
+  const hasErrors = Object.keys(errors).some(k => (errors as any)[k] !== undefined)
+
+  const validateAndConfirm = () => {
+    onConfirm(form as State)
+  }
+  if (tipAuthorized) {
+    return <ContinueModal description="tip" active onConfirm={onCancel}>
+      <CreatedSuccessfully
+        entity={tipAuthorized.response}
+        request={tipAuthorized.request}
+        onConfirm={onCancel}
+      />
+    </ContinueModal>
+  }
+
+  return <ConfirmModal description="tip" active onCancel={onCancel} disabled={hasErrors} onConfirm={validateAndConfirm}>
+
+    <FormProvider<State> errors={errors} object={form} valueHandler={setValue} >
+      <InputCurrency<State> name="amount" label={i18n`Amount`} tooltip={i18n`amount of tip`} />
+      <Input<State> name="justification" label={i18n`Justification`} inputType="multiline" tooltip={i18n`reason for the tip`} />
+      <Input<State> name="next_url" label={i18n`URL after tip`} tooltip={i18n`URL to visit after tip payment`} />
+    </FormProvider>
+
+  </ConfirmModal>
+}
+
+
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/CreatedSuccessfully.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/CreatedSuccessfully.tsx
new file mode 100644
index 000000000..1e5f0758f
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/CreatedSuccessfully.tsx
@@ -0,0 +1,100 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+import { format } from "date-fns";
+import { Fragment, h, VNode } from "preact";
+import { CreatedSuccessfully as Template } from "../../../../components/notifications/CreatedSuccessfully";
+import { MerchantBackend } from "../../../../declaration";
+
+type Entity = MerchantBackend.Tips.TipCreateConfirmation;
+
+interface Props {
+  entity: Entity;
+  request: MerchantBackend.Tips.TipCreateRequest;
+  onConfirm: () => void;
+  onCreateAnother?: () => void;
+}
+
+export function CreatedSuccessfully({
+  request,
+  entity,
+  onConfirm,
+  onCreateAnother,
+}: Props): VNode {
+  return (
+    <Fragment>
+      <div class="field is-horizontal">
+        <div class="field-label is-normal">
+          <label class="label">Amount</label>
+        </div>
+        <div class="field-body is-flex-grow-3">
+          <div class="field">
+            <p class="control">
+              <input readonly class="input" value={request.amount} />
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="field is-horizontal">
+        <div class="field-label is-normal">
+          <label class="label">Justification</label>
+        </div>
+        <div class="field-body is-flex-grow-3">
+          <div class="field">
+            <p class="control">
+              <input readonly class="input" value={request.justification} />
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="field is-horizontal">
+        <div class="field-label is-normal">
+          <label class="label">URL</label>
+        </div>
+        <div class="field-body is-flex-grow-3">
+          <div class="field">
+            <p class="control">
+              <input readonly class="input" value={entity.tip_status_url} />
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="field is-horizontal">
+        <div class="field-label is-normal">
+          <label class="label">Valid until</label>
+        </div>
+        <div class="field-body is-flex-grow-3">
+          <div class="field">
+            <p class="control">
+              <input
+                class="input"
+                readonly
+                value={
+                  !entity.tip_expiration ||
+                  entity.tip_expiration.t_s === "never"
+                    ? "never"
+                    : format(
+                        entity.tip_expiration.t_s * 1000,
+                        "yyyy/MM/dd HH:mm:ss"
+                      )
+                }
+              />
+            </p>
+          </div>
+        </div>
+      </div>
+    </Fragment>
+  );
+}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/List.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/List.stories.tsx
new file mode 100644
index 000000000..1cb9e748c
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/List.stories.tsx
@@ -0,0 +1,102 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { h, VNode, FunctionalComponent } from "preact";
+import { CardTable as TestedComponent } from "./Table";
+
+export default {
+  title: "Pages/Reserve/List",
+  component: TestedComponent,
+  argTypes: {
+    onCreate: { action: "onCreate" },
+    onDelete: { action: "onDelete" },
+    onNewTip: { action: "onNewTip" },
+    onSelect: { action: "onSelect" },
+  },
+};
+
+function createExample<Props>(
+  Component: FunctionalComponent<Props>,
+  props: Partial<Props>
+) {
+  const r = (args: any) => <Component {...args} />;
+  r.args = props;
+  return r;
+}
+
+export const AllFunded = createExample(TestedComponent, {
+  instances: [
+    {
+      id: "reseverId",
+      active: true,
+      committed_amount: "TESTKUDOS:10",
+      creation_time: {
+        t_s: new Date().getTime() / 1000,
+      },
+      exchange_initial_amount: "TESTKUDOS:10",
+      expiration_time: {
+        t_s: new Date().getTime() / 1000,
+      },
+      merchant_initial_amount: "TESTKUDOS:10",
+      pickup_amount: "TESTKUDOS:10",
+      reserve_pub: "WEQWDASDQWEASDADASDQWEQWEASDAS",
+    },
+    {
+      id: "reseverId2",
+      active: true,
+      committed_amount: "TESTKUDOS:13",
+      creation_time: {
+        t_s: new Date().getTime() / 1000,
+      },
+      exchange_initial_amount: "TESTKUDOS:10",
+      expiration_time: {
+        t_s: new Date().getTime() / 1000,
+      },
+      merchant_initial_amount: "TESTKUDOS:10",
+      pickup_amount: "TESTKUDOS:10",
+      reserve_pub: "WEQWDASDQWEASDADASDQWEQWEASDAS",
+    },
+  ],
+});
+
+export const Empty = createExample(TestedComponent, {
+  instances: [],
+});
+
+export const OneNotYetFunded = createExample(TestedComponent, {
+  instances: [
+    {
+      id: "reseverId",
+      active: true,
+      committed_amount: "TESTKUDOS:0",
+      creation_time: {
+        t_s: new Date().getTime() / 1000,
+      },
+      exchange_initial_amount: "TESTKUDOS:0",
+      expiration_time: {
+        t_s: new Date().getTime() / 1000,
+      },
+      merchant_initial_amount: "TESTKUDOS:10",
+      pickup_amount: "TESTKUDOS:10",
+      reserve_pub: "WEQWDASDQWEASDADASDQWEQWEASDAS",
+    },
+  ],
+});
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/Table.tsx
new file mode 100644
index 000000000..b3bb7b020
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/Table.tsx
@@ -0,0 +1,313 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { format } from "date-fns";
+import { Fragment, h, VNode } from "preact";
+import { MerchantBackend, WithId } from "../../../../declaration";
+import { Translate, useTranslator } from "../../../../i18n";
+
+type Entity = MerchantBackend.Tips.ReserveStatusEntry & WithId;
+
+interface Props {
+  instances: Entity[];
+  onNewTip: (id: Entity) => void;
+  onSelect: (id: Entity) => void;
+  onDelete: (id: Entity) => void;
+  onCreate: () => void;
+}
+
+export function CardTable({
+  instances,
+  onCreate,
+  onSelect,
+  onNewTip,
+  onDelete,
+}: Props): VNode {
+  const [withoutFunds, withFunds] = instances.reduce((prev, current) => {
+    const amount = current.exchange_initial_amount;
+    if (amount.endsWith(":0")) {
+      prev[0] = prev[0].concat(current);
+    } else {
+      prev[1] = prev[1].concat(current);
+    }
+    return prev;
+  }, new Array<Array<Entity>>([], []));
+
+  const i18n = useTranslator();
+
+  return (
+    <Fragment>
+      {withoutFunds.length > 0 && (
+        <div class="card has-table">
+          <header class="card-header">
+            <p class="card-header-title">
+              <span class="icon">
+                <i class="mdi mdi-cash" />
+              </span>
+              <Translate>Reserves not yet funded</Translate>
+            </p>
+          </header>
+          <div class="card-content">
+            <div class="b-table has-pagination">
+              <div class="table-wrapper has-mobile-cards">
+                <TableWithoutFund
+                  instances={withoutFunds}
+                  onNewTip={onNewTip}
+                  onSelect={onSelect}
+                  onDelete={onDelete}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div class="card has-table">
+        <header class="card-header">
+          <p class="card-header-title">
+            <span class="icon">
+              <i class="mdi mdi-cash" />
+            </span>
+            <Translate>Reserves ready</Translate>
+          </p>
+          <div class="card-header-icon" aria-label="more options" />
+          <div class="card-header-icon" aria-label="more options">
+            <span class="has-tooltip-left" data-tooltip={i18n`add new reserve`}>
+              <button class="button is-info" type="button" onClick={onCreate}>
+                <span class="icon is-small">
+                  <i class="mdi mdi-plus mdi-36px" />
+                </span>
+              </button>
+            </span>
+          </div>
+        </header>
+        <div class="card-content">
+          <div class="b-table has-pagination">
+            <div class="table-wrapper has-mobile-cards">
+              {withFunds.length > 0 ? (
+                <Table
+                  instances={withFunds}
+                  onNewTip={onNewTip}
+                  onSelect={onSelect}
+                  onDelete={onDelete}
+                />
+              ) : (
+                <EmptyTable />
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </Fragment>
+  );
+}
+interface TableProps {
+  instances: Entity[];
+  onNewTip: (id: Entity) => void;
+  onDelete: (id: Entity) => void;
+  onSelect: (id: Entity) => void;
+}
+
+function Table({ instances, onNewTip, onSelect, onDelete }: TableProps): VNode {
+  const i18n = useTranslator();
+  return (
+    <div class="table-container">
+      <table class="table is-fullwidth is-striped is-hoverable is-fullwidth">
+        <thead>
+          <tr>
+            <th>
+              <Translate>Created at</Translate>
+            </th>
+            <th>
+              <Translate>Expires at</Translate>
+            </th>
+            <th>
+              <Translate>Initial</Translate>
+            </th>
+            <th>
+              <Translate>Picked up</Translate>
+            </th>
+            <th>
+              <Translate>Committed</Translate>
+            </th>
+            <th />
+          </tr>
+        </thead>
+        <tbody>
+          {instances.map((i) => {
+            return (
+              <tr key={i.id}>
+                <td
+                  onClick={(): void => onSelect(i)}
+                  style={{ cursor: "pointer" }}
+                >
+                  {i.creation_time.t_s === "never"
+                    ? "never"
+                    : format(i.creation_time.t_s * 1000, "yyyy/MM/dd HH:mm:ss")}
+                </td>
+                <td
+                  onClick={(): void => onSelect(i)}
+                  style={{ cursor: "pointer" }}
+                >
+                  {i.expiration_time.t_s === "never"
+                    ? "never"
+                    : format(
+                        i.expiration_time.t_s * 1000,
+                        "yyyy/MM/dd HH:mm:ss"
+                      )}
+                </td>
+                <td
+                  onClick={(): void => onSelect(i)}
+                  style={{ cursor: "pointer" }}
+                >
+                  {i.exchange_initial_amount}
+                </td>
+                <td
+                  onClick={(): void => onSelect(i)}
+                  style={{ cursor: "pointer" }}
+                >
+                  {i.pickup_amount}
+                </td>
+                <td
+                  onClick={(): void => onSelect(i)}
+                  style={{ cursor: "pointer" }}
+                >
+                  {i.committed_amount}
+                </td>
+                <td class="is-actions-cell right-sticky">
+                  <div class="buttons is-right">
+                    <button
+                      class="button is-small is-danger has-tooltip-left"
+                      data-tooltip={i18n`delete selected reserve from the database`}
+                      type="button"
+                      onClick={(): void => onDelete(i)}
+                    >
+                      Delete
+                    </button>
+                    <button
+                      class="button is-small is-info has-tooltip-left"
+                      data-tooltip={i18n`authorize new tip from selected reserve`}
+                      type="button"
+                      onClick={(): void => onNewTip(i)}
+                    >
+                      New Tip
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function EmptyTable(): VNode {
+  return (
+    <div class="content has-text-grey has-text-centered">
+      <p>
+        <span class="icon is-large">
+          <i class="mdi mdi-emoticon-sad mdi-48px" />
+        </span>
+      </p>
+      <p>
+        <Translate>
+          There is no ready reserves yet, add more pressing the + sign or fund
+          them
+        </Translate>
+      </p>
+    </div>
+  );
+}
+
+function TableWithoutFund({
+  instances,
+  onSelect,
+  onDelete,
+}: TableProps): VNode {
+  const i18n = useTranslator();
+  return (
+    <div class="table-container">
+      <table class="table is-fullwidth is-striped is-hoverable is-fullwidth">
+        <thead>
+          <tr>
+            <th>
+              <Translate>Created at</Translate>
+            </th>
+            <th>
+              <Translate>Expires at</Translate>
+            </th>
+            <th>
+              <Translate>Expected Balance</Translate>
+            </th>
+            <th />
+          </tr>
+        </thead>
+        <tbody>
+          {instances.map((i) => {
+            return (
+              <tr key={i.id}>
+                <td
+                  onClick={(): void => onSelect(i)}
+                  style={{ cursor: "pointer" }}
+                >
+                  {i.creation_time.t_s === "never"
+                    ? "never"
+                    : format(i.creation_time.t_s * 1000, "yyyy/MM/dd HH:mm:ss")}
+                </td>
+                <td
+                  onClick={(): void => onSelect(i)}
+                  style={{ cursor: "pointer" }}
+                >
+                  {i.expiration_time.t_s === "never"
+                    ? "never"
+                    : format(
+                        i.expiration_time.t_s * 1000,
+                        "yyyy/MM/dd HH:mm:ss"
+                      )}
+                </td>
+                <td
+                  onClick={(): void => onSelect(i)}
+                  style={{ cursor: "pointer" }}
+                >
+                  {i.merchant_initial_amount}
+                </td>
+                <td class="is-actions-cell right-sticky">
+                  <div class="buttons is-right">
+                    <button
+                      class="button is-small is-danger jb-modal has-tooltip-left"
+                      type="button"
+                      data-tooltip={i18n`delete selected reserve from the database`}
+                      onClick={(): void => onDelete(i)}
+                    >
+                      Delete
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/index.tsx
new file mode 100644
index 000000000..f071b5635
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/index.tsx
@@ -0,0 +1,117 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import { Loading } from "../../../../components/exception/loading";
+import { NotificationCard } from "../../../../components/menu";
+import { MerchantBackend } from "../../../../declaration";
+import { HttpError } from "../../../../hooks/backend";
+import {
+  useInstanceReserves,
+  useReservesAPI,
+} from "../../../../hooks/reserves";
+import { useTranslator } from "../../../../i18n";
+import { Notification } from "../../../../utils/types";
+import { CardTable } from "./Table";
+import { AuthorizeTipModal } from "./AutorizeTipModal";
+
+interface Props {
+  onUnauthorized: () => VNode;
+  onLoadError: (e: HttpError) => VNode;
+  onSelect: (id: string) => void;
+  onNotFound: () => VNode;
+  onCreate: () => void;
+}
+
+interface TipConfirmation {
+  response: MerchantBackend.Tips.TipCreateConfirmation;
+  request: MerchantBackend.Tips.TipCreateRequest;
+}
+
+export default function ListTips({
+  onUnauthorized,
+  onLoadError,
+  onNotFound,
+  onSelect,
+  onCreate,
+}: Props): VNode {
+  const result = useInstanceReserves();
+  const { deleteReserve, authorizeTipReserve } = useReservesAPI();
+  const [notif, setNotif] = useState<Notification | undefined>(undefined);
+  const i18n = useTranslator();
+  const [reserveForTip, setReserveForTip] = useState<string | undefined>(
+    undefined
+  );
+  const [tipAuthorized, setTipAuthorized] = useState<
+    TipConfirmation | undefined
+  >(undefined);
+
+  if (result.clientError && result.isUnauthorized) return onUnauthorized();
+  if (result.clientError && result.isNotfound) return onNotFound();
+  if (result.loading) return <Loading />;
+  if (!result.ok) return onLoadError(result);
+
+  return (
+    <section class="section is-main-section">
+      <NotificationCard notification={notif} />
+
+      {reserveForTip && (
+        <AuthorizeTipModal
+          onCancel={() => {
+            setReserveForTip(undefined);
+            setTipAuthorized(undefined);
+          }}
+          tipAuthorized={tipAuthorized}
+          onConfirm={async (request) => {
+            try {
+              const response = await authorizeTipReserve(
+                reserveForTip,
+                request
+              );
+              setTipAuthorized({
+                request,
+                response: response.data,
+              });
+            } catch (error) {
+              setNotif({
+                message: i18n`could not create the tip`,
+                type: "ERROR",
+                description: error instanceof Error ? error.message : undefined,
+              });
+              setReserveForTip(undefined);
+            }
+          }}
+        />
+      )}
+
+      <CardTable
+        instances={result.data.reserves
+          .filter((r) => r.active)
+          .map((o) => ({ ...o, id: o.reserve_pub }))}
+        onCreate={onCreate}
+        onDelete={(reserve) => deleteReserve(reserve.reserve_pub)}
+        onSelect={(reserve) => onSelect(reserve.id)}
+        onNewTip={(reserve) => setReserveForTip(reserve.id)}
+      />
+    </section>
+  );
+}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/Create.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/Create.stories.tsx
new file mode 100644
index 000000000..535cb1e37
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/Create.stories.tsx
@@ -0,0 +1,43 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { h, VNode, FunctionalComponent } from 'preact';
+import { CreatePage as TestedComponent } from './CreatePage';
+
+
+export default {
+  title: 'Pages/Transfer/Create',
+  component: TestedComponent,
+  argTypes: {
+    onUpdate: { action: 'onUpdate' },
+    onBack: { action: 'onBack' },
+  },
+};
+
+function createExample<Props>(Component: FunctionalComponent<Props>, props: Partial<Props>) {
+  const r = (args: any) => <Component {...args} />
+  r.args = props
+  return r
+}
+
+export const Example = createExample(TestedComponent, {
+  accounts: ['payto://x-taler-bank/account1','payto://x-taler-bank/account2']
+});
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/CreatePage.tsx
new file mode 100644
index 000000000..d0f5c5e95
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/CreatePage.tsx
@@ -0,0 +1,104 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import { AsyncButton } from "../../../../components/exception/AsyncButton";
+import { FormErrors, FormProvider } from "../../../../components/form/FormProvider";
+import { Input } from "../../../../components/form/Input";
+import { InputCurrency } from "../../../../components/form/InputCurrency";
+import { InputSelector } from "../../../../components/form/InputSelector";
+import { useConfigContext } from "../../../../context/config";
+import { MerchantBackend } from "../../../../declaration";
+import { Translate, useTranslator } from "../../../../i18n";
+import { CROCKFORD_BASE32_REGEX, URL_REGEX } from "../../../../utils/constants";
+
+type Entity = MerchantBackend.Transfers.TransferInformation
+
+interface Props {
+  onCreate: (d: Entity) => Promise<void>;
+  onBack?: () => void;
+  accounts: string[],
+}
+
+export function CreatePage({ accounts, onCreate, onBack }: Props): VNode {
+  const i18n = useTranslator()
+  const { currency } = useConfigContext()
+
+  const [state, setState] = useState<Partial<Entity>>({
+    wtid: '',
+    // payto_uri: ,
+    // exchange_url: 'http://exchange.taler:8081/',
+    credit_amount: ``,
+  });
+
+  const errors: FormErrors<Entity> = {
+    wtid: !state.wtid ? i18n`cannot be empty` :
+      (!CROCKFORD_BASE32_REGEX.test(state.wtid) ? i18n`check the id, does not look valid` :
+        (state.wtid.length !== 52 ? i18n`should have 52 characters, current ${state.wtid.length}` :
+          undefined)),
+    payto_uri: !state.payto_uri ? i18n`cannot be empty` : undefined,
+    credit_amount: !state.credit_amount ? i18n`cannot be empty` : undefined,
+    exchange_url: !state.exchange_url ? i18n`cannot be empty` :
+      (!URL_REGEX.test(state.exchange_url) ? i18n`URL doesn't have the right format` : undefined),
+  }
+
+  const hasErrors = Object.keys(errors).some(k => (errors as any)[k] !== undefined)
+
+  const submitForm = () => {
+    if (hasErrors) return Promise.reject()
+    return onCreate(state as any)
+  }
+
+  return <div>
+    <section class="section is-main-section">
+      <div class="columns">
+        <div class="column" />
+        <div class="column is-four-fifths">
+
+          <FormProvider object={state} valueHandler={setState} errors={errors}>
+            <InputSelector name="payto_uri" label={i18n`Credited bank account`}
+              values={accounts}
+              placeholder={i18n`Select one account`}
+              tooltip={i18n`Bank account of the merchant where the payment was received`}
+            />
+            <Input<Entity> name="wtid" label={i18n`Wire transfer ID`} help="" tooltip={i18n`unique identifier of the wire transfer used by the exchange, must be 52 characters long`} />
+            <Input<Entity> name="exchange_url"
+              label={i18n`Exchange URL`}
+              tooltip={i18n`Base URL of the exchange that made the transfer, should have been in the wire transfer subject`}
+              help="http://exchange.taler:8081/" />
+            <InputCurrency<Entity> name="credit_amount" label={i18n`Amount credited`} tooltip={i18n`Actual amount that was wired to the merchant's bank account`} />
+
+          </FormProvider>
+
+          <div class="buttons is-right mt-5">
+            {onBack && <button class="button" onClick={onBack} ><Translate>Cancel</Translate></button>}
+            <AsyncButton disabled={hasErrors} data-tooltip={
+              hasErrors ? i18n`Need to complete marked fields` : 'confirm operation'
+            } onClick={submitForm} ><Translate>Confirm</Translate></AsyncButton>
+          </div>
+
+        </div>
+        <div class="column" />
+      </div>
+    </section>
+  </div>
+}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/index.tsx
new file mode 100644
index 000000000..d95929a0e
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/index.tsx
@@ -0,0 +1,60 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { Fragment, h, VNode } from 'preact';
+import { useState } from 'preact/hooks';
+import { NotificationCard } from '../../../../components/menu';
+import { MerchantBackend } from '../../../../declaration';
+import { useInstanceDetails } from '../../../../hooks/instance';
+import { useTransferAPI } from '../../../../hooks/transfer';
+import { useTranslator } from '../../../../i18n';
+import { Notification } from '../../../../utils/types';
+import { CreatePage } from './CreatePage';
+
+export type Entity = MerchantBackend.Transfers.TransferInformation
+interface Props {
+  onBack?: () => void;
+  onConfirm: () => void;
+}
+
+export default function CreateTransfer({onConfirm, onBack}:Props): VNode {
+  const { informTransfer } = useTransferAPI()
+  const [notif, setNotif] = useState<Notification | undefined>(undefined)
+  const i18n = useTranslator()
+  const instance = useInstanceDetails()
+  const accounts = !instance.ok ? [] : instance.data.accounts.map(a => a.payto_uri)
+
+  return <>
+    <NotificationCard notification={notif} />
+    <CreatePage
+      onBack={onBack}
+      accounts={accounts}
+      onCreate={(request: MerchantBackend.Transfers.TransferInformation) => {
+        return informTransfer(request).then(() => onConfirm()).catch((error) => {
+          setNotif({
+            message: i18n`could not inform transfer`,
+            type: "ERROR",
+            description: error.message
+          })
+        })
+      }} />
+  </>
+}
\ No newline at end of file
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/List.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/List.stories.tsx
new file mode 100644
index 000000000..24a791187
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/List.stories.tsx
@@ -0,0 +1,93 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { h, VNode, FunctionalComponent } from "preact";
+import { ListPage as TestedComponent } from "./ListPage";
+
+export default {
+  title: "Pages/Transfer/List",
+  component: TestedComponent,
+  argTypes: {
+    onCreate: { action: "onCreate" },
+    onDelete: { action: "onDelete" },
+    onLoadMoreBefore: { action: "onLoadMoreBefore" },
+    onLoadMoreAfter: { action: "onLoadMoreAfter" },
+    onShowAll: { action: "onShowAll" },
+    onShowVerified: { action: "onShowVerified" },
+    onShowUnverified: { action: "onShowUnverified" },
+    onChangePayTo: { action: "onChangePayTo" },
+  },
+};
+
+function createExample<Props>(
+  Component: FunctionalComponent<Props>,
+  props: Partial<Props>
+) {
+  const r = (args: any) => <Component {...args} />;
+  r.args = props;
+  return r;
+}
+
+export const Example = createExample(TestedComponent, {
+  transfers: [
+    {
+      exchange_url: "http://exchange.url/",
+      credit_amount: "TESTKUDOS:10",
+      payto_uri: "payto//x-taler-bank/bank:8080/account",
+      transfer_serial_id: 123123123,
+      wtid: "!@KJELQKWEJ!L@K#!J@",
+      confirmed: true,
+      execution_time: {
+        t_s: new Date().getTime() / 1000,
+      },
+      verified: false,
+    },
+    {
+      exchange_url: "http://exchange.url/",
+      credit_amount: "TESTKUDOS:10",
+      payto_uri: "payto//x-taler-bank/bank:8080/account",
+      transfer_serial_id: 123123123,
+      wtid: "!@KJELQKWEJ!L@K#!J@",
+      confirmed: true,
+      execution_time: {
+        t_s: new Date().getTime() / 1000,
+      },
+      verified: false,
+    },
+    {
+      exchange_url: "http://exchange.url/",
+      credit_amount: "TESTKUDOS:10",
+      payto_uri: "payto//x-taler-bank/bank:8080/account",
+      transfer_serial_id: 123123123,
+      wtid: "!@KJELQKWEJ!L@K#!J@",
+      confirmed: true,
+      execution_time: {
+        t_s: new Date().getTime() / 1000,
+      },
+      verified: false,
+    },
+  ],
+  accounts: ["payto://x-taler-bank/bank/some_account"],
+});
+export const Empty = createExample(TestedComponent, {
+  transfers: [],
+  accounts: [],
+});
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/ListPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/ListPage.tsx
new file mode 100644
index 000000000..544a720b8
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/ListPage.tsx
@@ -0,0 +1,89 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { h, VNode } from 'preact';
+import { FormProvider } from '../../../../components/form/FormProvider';
+import { InputSelector } from '../../../../components/form/InputSelector';
+import { MerchantBackend } from '../../../../declaration';
+import { Translate, useTranslator } from '../../../../i18n';
+import { CardTable } from './Table';
+
+export interface Props {
+  transfers: MerchantBackend.Transfers.TransferDetails[];
+  onLoadMoreBefore?: () => void;
+  onLoadMoreAfter?: () => void;
+  onShowAll: () => void;
+  onShowVerified: () => void;
+  onShowUnverified: () => void;
+  isVerifiedTransfers?: boolean;
+  isNonVerifiedTransfers?: boolean;
+  isAllTransfers?: boolean;
+  accounts: string[];
+  onChangePayTo: (p?: string) => void;
+  payTo?: string;
+  onCreate: () => void;
+  onDelete: () => void;
+}
+
+export function ListPage({ payTo, onChangePayTo, transfers, onCreate, onDelete, accounts, onLoadMoreBefore, onLoadMoreAfter, isAllTransfers, isNonVerifiedTransfers, isVerifiedTransfers, onShowAll, onShowUnverified, onShowVerified }: Props): VNode {
+  const form = { payto_uri: payTo }
+
+  const i18n = useTranslator();
+  return <section class="section is-main-section">
+    <div class="columns">
+      <div class="column" />
+      <div class="column is-10">
+        <FormProvider object={form} valueHandler={(updater) => onChangePayTo(updater(form).payto_uri)}>
+          <InputSelector name="payto_uri" label={i18n`Address`}
+            values={accounts}
+            placeholder={i18n`Select one account`}
+            tooltip={i18n`filter by account address`} />
+        </FormProvider>
+      </div>
+      <div class="column" />
+    </div>
+    <div class="tabs">
+      <ul>
+        <li class={isAllTransfers ? 'is-active' : ''}>
+          <div class="has-tooltip-right" data-tooltip={i18n`remove all filters`}>
+            <a onClick={onShowAll}><Translate>All</Translate></a>
+          </div>
+        </li>
+        <li class={isVerifiedTransfers ? 'is-active' : ''}>
+          <div class="has-tooltip-right" data-tooltip={i18n`only show wire transfers confirmed by the merchant`}>
+            <a onClick={onShowVerified}><Translate>Verified</Translate></a>
+          </div>
+        </li>
+        <li class={isNonVerifiedTransfers ? 'is-active' : ''}>
+          <div class="has-tooltip-right" data-tooltip={i18n`only show wire transfers claimed by the exchange`}>
+            <a onClick={onShowUnverified}><Translate>Unverified</Translate></a>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <CardTable transfers={transfers.map(o => ({ ...o, id: String(o.transfer_serial_id) }))}
+      accounts={accounts}
+      onCreate={onCreate}
+      onDelete={onDelete}
+      onLoadMoreBefore={onLoadMoreBefore} hasMoreBefore={!onLoadMoreBefore}
+      onLoadMoreAfter={onLoadMoreAfter} hasMoreAfter={!onLoadMoreAfter} />
+  </section>;
+}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/Table.tsx
new file mode 100644
index 000000000..4cb04694d
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/Table.tsx
@@ -0,0 +1,225 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { format } from "date-fns";
+import { h, VNode } from "preact";
+import { StateUpdater, useState } from "preact/hooks";
+import { MerchantBackend, WithId } from "../../../../declaration";
+import { Translate, useTranslator } from "../../../../i18n";
+
+type Entity = MerchantBackend.Transfers.TransferDetails & WithId;
+
+interface Props {
+  transfers: Entity[];
+  onDelete: (id: Entity) => void;
+  onCreate: () => void;
+  accounts: string[];
+  onLoadMoreBefore?: () => void;
+  hasMoreBefore?: boolean;
+  hasMoreAfter?: boolean;
+  onLoadMoreAfter?: () => void;
+}
+
+export function CardTable({
+  transfers,
+  onCreate,
+  onDelete,
+  onLoadMoreAfter,
+  onLoadMoreBefore,
+  hasMoreAfter,
+  hasMoreBefore,
+}: Props): VNode {
+  const [rowSelection, rowSelectionHandler] = useState<string[]>([]);
+
+  const i18n = useTranslator();
+
+  return (
+    <div class="card has-table">
+      <header class="card-header">
+        <p class="card-header-title">
+          <span class="icon">
+            <i class="mdi mdi-bank" />
+          </span>
+          <Translate>Transfers</Translate>
+        </p>
+        <div class="card-header-icon" aria-label="more options">
+          <span class="has-tooltip-left" data-tooltip={i18n`add new transfer`}>
+            <button class="button is-info" type="button" onClick={onCreate}>
+              <span class="icon is-small">
+                <i class="mdi mdi-plus mdi-36px" />
+              </span>
+            </button>
+          </span>
+        </div>
+      </header>
+      <div class="card-content">
+        <div class="b-table has-pagination">
+          <div class="table-wrapper has-mobile-cards">
+            {transfers.length > 0 ? (
+              <Table
+                instances={transfers}
+                onDelete={onDelete}
+                rowSelection={rowSelection}
+                rowSelectionHandler={rowSelectionHandler}
+                onLoadMoreAfter={onLoadMoreAfter}
+                onLoadMoreBefore={onLoadMoreBefore}
+                hasMoreAfter={hasMoreAfter}
+                hasMoreBefore={hasMoreBefore}
+              />
+            ) : (
+              <EmptyTable />
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+interface TableProps {
+  rowSelection: string[];
+  instances: Entity[];
+  onDelete: (id: Entity) => void;
+  rowSelectionHandler: StateUpdater<string[]>;
+  onLoadMoreBefore?: () => void;
+  hasMoreBefore?: boolean;
+  hasMoreAfter?: boolean;
+  onLoadMoreAfter?: () => void;
+}
+
+function toggleSelected<T>(id: T): (prev: T[]) => T[] {
+  return (prev: T[]): T[] =>
+    prev.indexOf(id) == -1 ? [...prev, id] : prev.filter((e) => e != id);
+}
+
+function Table({
+  instances,
+  onLoadMoreAfter,
+  onDelete,
+  onLoadMoreBefore,
+  hasMoreAfter,
+  hasMoreBefore,
+}: TableProps): VNode {
+  const i18n = useTranslator();
+  return (
+    <div class="table-container">
+      {onLoadMoreBefore && (
+        <button
+          class="button is-fullwidth"
+          data-tooltip={i18n`load more transfers before the first one`}
+          disabled={!hasMoreBefore}
+          onClick={onLoadMoreBefore}
+        >
+          <Translate>load newer transfers</Translate>
+        </button>
+      )}
+      <table class="table is-fullwidth is-striped is-hoverable is-fullwidth">
+        <thead>
+          <tr>
+            <th>
+              <Translate>ID</Translate>
+            </th>
+            <th>
+              <Translate>Credit</Translate>
+            </th>
+            <th>
+              <Translate>Address</Translate>
+            </th>
+            <th>
+              <Translate>Exchange URL</Translate>
+            </th>
+            <th>
+              <Translate>Confirmed</Translate>
+            </th>
+            <th>
+              <Translate>Verified</Translate>
+            </th>
+            <th>
+              <Translate>Executed at</Translate>
+            </th>
+            <th />
+          </tr>
+        </thead>
+        <tbody>
+          {instances.map((i) => {
+            return (
+              <tr key={i.id}>
+                <td>{i.id}</td>
+                <td>{i.credit_amount}</td>
+                <td>{i.payto_uri}</td>
+                <td>{i.exchange_url}</td>
+                <td>{i.confirmed ? i18n`yes` : i18n`no`}</td>
+                <td>{i.verified ? i18n`yes` : i18n`no`}</td>
+                <td>
+                  {i.execution_time
+                    ? i.execution_time.t_s == "never"
+                      ? i18n`never`
+                      : format(
+                          i.execution_time.t_s * 1000,
+                          "yyyy/MM/dd HH:mm:ss"
+                        )
+                    : i18n`unknown`}
+                </td>
+                <td>
+                  {i.verified === undefined ? (
+                    <button
+                      class="button is-danger is-small has-tooltip-left"
+                      data-tooltip={i18n`delete selected transfer from the database`}
+                      onClick={() => onDelete(i)}
+                    >
+                      Delete
+                    </button>
+                  ) : undefined}
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+      {onLoadMoreAfter && (
+        <button
+          class="button is-fullwidth"
+          data-tooltip={i18n`load more transfer after the last one`}
+          disabled={!hasMoreAfter}
+          onClick={onLoadMoreAfter}
+        >
+          <Translate>load older transfers</Translate>
+        </button>
+      )}
+    </div>
+  );
+}
+
+function EmptyTable(): VNode {
+  return (
+    <div class="content has-text-grey has-text-centered">
+      <p>
+        <span class="icon is-large">
+          <i class="mdi mdi-emoticon-sad mdi-48px" />
+        </span>
+      </p>
+      <p>
+        <Translate>
+          There is no transfer yet, add more pressing the + sign
+        </Translate>
+      </p>
+    </div>
+  );
+}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/index.tsx
new file mode 100644
index 000000000..d8e2f60e9
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/index.tsx
@@ -0,0 +1,85 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { h, VNode } from 'preact';
+import { useState } from 'preact/hooks';
+import { Loading } from '../../../../components/exception/loading';
+import { MerchantBackend } from '../../../../declaration';
+import { HttpError } from '../../../../hooks/backend';
+import { useInstanceDetails } from '../../../../hooks/instance';
+import { useInstanceTransfers } from "../../../../hooks/transfer";
+import { ListPage } from './ListPage';
+
+interface Props {
+  onUnauthorized: () => VNode;
+  onLoadError: (error: HttpError) => VNode;
+  onNotFound: () => VNode;
+  onCreate: () => void;
+}
+interface Form {
+  verified?: 'yes' | 'no';
+  payto_uri?: string;
+}
+
+export default function ListTransfer({ onUnauthorized, onLoadError, onCreate, onNotFound }: Props): VNode {
+  const [form, setForm] = useState<Form>({ payto_uri: '' })
+  const setFilter = (s?: 'yes' | 'no') => setForm({ ...form, verified: s })
+
+  const [position, setPosition] = useState<string | undefined>(undefined)
+
+  const instance = useInstanceDetails()
+  const accounts = !instance.ok ? [] : instance.data.accounts.map(a => a.payto_uri)
+
+  const isVerifiedTransfers = form.verified === 'yes'
+  const isNonVerifiedTransfers = form.verified === 'no'
+  const isAllTransfers = form.verified === undefined
+
+  const result = useInstanceTransfers({
+    position,
+    payto_uri: form.payto_uri === '' ? undefined : form.payto_uri,
+    verified: form.verified,
+  }, (id) => setPosition(id))
+
+  if (result.clientError && result.isUnauthorized) return onUnauthorized()
+  if (result.clientError && result.isNotfound) return onNotFound()
+  if (result.loading) return <Loading />
+  if (!result.ok) return onLoadError(result)
+
+  return <ListPage
+    accounts={accounts}
+    transfers={result.data.transfers}
+    onLoadMoreBefore={result.isReachingStart ? result.loadMorePrev : undefined}
+    onLoadMoreAfter={result.isReachingEnd ? result.loadMore : undefined}
+    onCreate={onCreate} 
+    onDelete={() => {null}}
+    // position={position} setPosition={setPosition}
+    onShowAll={() => setFilter(undefined)}
+    onShowUnverified={() => setFilter('no')}
+    onShowVerified={() => setFilter('yes')}
+    isAllTransfers={isAllTransfers}
+    isVerifiedTransfers={isVerifiedTransfers}
+    isNonVerifiedTransfers={isNonVerifiedTransfers}
+    payTo={form.payto_uri}
+    onChangePayTo={(p) => setForm(v => ({ ...v, payto_uri: p }))}
+  />
+
+}
+
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/transfers/update/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/transfers/update/index.tsx
new file mode 100644
index 000000000..caa808693
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/transfers/update/index.tsx
@@ -0,0 +1,26 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { h, VNode } from 'preact';
+
+export default function UpdateTransfer():VNode {
+  return <div>order transfer page</div>
+}
\ No newline at end of file
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/update/Update.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/update/Update.stories.tsx
new file mode 100644
index 000000000..3239d9c5c
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/update/Update.stories.tsx
@@ -0,0 +1,61 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { h, VNode, FunctionalComponent } from "preact";
+import { UpdatePage as TestedComponent } from "./UpdatePage";
+
+export default {
+  title: "Pages/Instance/Update",
+  component: TestedComponent,
+  argTypes: {
+    onUpdate: { action: "onUpdate" },
+    onBack: { action: "onBack" },
+  },
+};
+
+function createExample<Props>(
+  Component: FunctionalComponent<Props>,
+  props: Partial<Props>
+) {
+  const r = (args: any) => <Component {...args} />;
+  r.args = props;
+  return r;
+}
+
+export const Example = createExample(TestedComponent, {
+  selected: {
+    accounts: [],
+    name: "name",
+    auth: { method: "external" },
+    address: {},
+    jurisdiction: {},
+    default_max_deposit_fee: "TESTKUDOS:2",
+    default_max_wire_fee: "TESTKUDOS:1",
+    default_pay_delay: {
+      d_us: 1000000,
+    },
+    default_wire_fee_amortization: 1,
+    default_wire_transfer_delay: {
+      d_us: 100000,
+    },
+    merchant_pub: "ASDWQEKASJDKSADJ",
+  },
+});
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/update/UpdatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/update/UpdatePage.tsx
new file mode 100644
index 000000000..4c7a51121
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/update/UpdatePage.tsx
@@ -0,0 +1,259 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import * as yup from "yup";
+import { AsyncButton } from "../../../components/exception/AsyncButton";
+import {
+  FormProvider,
+  FormErrors,
+} from "../../../components/form/FormProvider";
+import { UpdateTokenModal } from "../../../components/modal";
+import { useInstanceContext } from "../../../context/instance";
+import { MerchantBackend } from "../../../declaration";
+import { Translate, useTranslator } from "../../../i18n";
+import { InstanceUpdateSchema as schema } from "../../../schemas";
+import { DefaultInstanceFormFields } from "../../../components/instance/DefaultInstanceFormFields";
+import { PAYTO_REGEX } from "../../../utils/constants";
+import { Amounts } from "@gnu-taler/taler-util";
+
+type Entity = MerchantBackend.Instances.InstanceReconfigurationMessage & {
+  auth_token?: string;
+};
+
+//MerchantBackend.Instances.InstanceAuthConfigurationMessage
+interface Props {
+  onUpdate: (d: Entity) => void;
+  onChangeAuth: (
+    d: MerchantBackend.Instances.InstanceAuthConfigurationMessage
+  ) => Promise<void>;
+  selected: MerchantBackend.Instances.QueryInstancesResponse;
+  isLoading: boolean;
+  onBack: () => void;
+}
+
+function convert(
+  from: MerchantBackend.Instances.QueryInstancesResponse
+): Entity {
+  const { accounts, ...rest } = from;
+  const payto_uris = accounts.filter((a) => a.active).map((a) => a.payto_uri);
+  const defaults = {
+    default_wire_fee_amortization: 1,
+    default_pay_delay: { d_us: 2 * 1000 * 1000 * 60 * 60 }, //two hours
+    default_wire_transfer_delay: { d_us: 2 * 1000 * 1000 * 60 * 60 * 2 }, //two hours
+  };
+  return { ...defaults, ...rest, payto_uris };
+}
+
+function getTokenValuePart(t?: string): string | undefined {
+  if (!t) return t;
+  const match = /secret-token:(.*)/.exec(t);
+  if (!match || !match[1]) return undefined;
+  return match[1];
+}
+
+function undefinedIfEmpty<T>(obj: T): T | undefined {
+  return Object.keys(obj).some((k) => (obj as any)[k] !== undefined)
+    ? obj
+    : undefined;
+}
+
+export function UpdatePage({
+  onUpdate,
+  onChangeAuth,
+  selected,
+  onBack,
+}: Props): VNode {
+  const { id, token } = useInstanceContext();
+  const currentTokenValue = getTokenValuePart(token);
+
+  function updateToken(token: string | undefined | null) {
+    const value =
+      token && token.startsWith("secret-token:")
+        ? token.substring("secret-token:".length)
+        : token;
+
+    if (!token) {
+      onChangeAuth({ method: "external" });
+    } else {
+      onChangeAuth({ method: "token", token: `secret-token:${value}` });
+    }
+  }
+
+  const [value, valueHandler] = useState<Partial<Entity>>(convert(selected));
+
+  const i18n = useTranslator();
+
+  const errors: FormErrors<Entity> = {
+    name: !value.name ? i18n`required` : undefined,
+    payto_uris:
+      !value.payto_uris || !value.payto_uris.length
+        ? i18n`required`
+        : undefinedIfEmpty(
+            value.payto_uris.map((p) => {
+              return !PAYTO_REGEX.test(p) ? i18n`is not valid` : undefined;
+            })
+          ),
+    default_max_deposit_fee: !value.default_max_deposit_fee
+      ? i18n`required`
+      : !Amounts.parse(value.default_max_deposit_fee)
+      ? i18n`invalid format`
+      : undefined,
+    default_max_wire_fee: !value.default_max_wire_fee
+      ? i18n`required`
+      : !Amounts.parse(value.default_max_wire_fee)
+      ? i18n`invalid format`
+      : undefined,
+    default_wire_fee_amortization:
+      value.default_wire_fee_amortization === undefined
+        ? i18n`required`
+        : isNaN(value.default_wire_fee_amortization)
+        ? i18n`is not a number`
+        : value.default_wire_fee_amortization < 1
+        ? i18n`must be 1 or greater`
+        : undefined,
+    default_pay_delay: !value.default_pay_delay ? i18n`required` : undefined,
+    default_wire_transfer_delay: !value.default_wire_transfer_delay
+      ? i18n`required`
+      : undefined,
+    address: undefinedIfEmpty({
+      address_lines:
+        value.address?.address_lines && value.address?.address_lines.length > 7
+          ? i18n`max 7 lines`
+          : undefined,
+    }),
+    jurisdiction: undefinedIfEmpty({
+      address_lines:
+        value.address?.address_lines && value.address?.address_lines.length > 7
+          ? i18n`max 7 lines`
+          : undefined,
+    }),
+  };
+
+  const hasErrors = Object.keys(errors).some(
+    (k) => (errors as any)[k] !== undefined
+  );
+  const submit = async (): Promise<void> => {
+    await onUpdate(value as Entity);
+  };
+  const [active, setActive] = useState(false);
+
+  return (
+    <div>
+      <section class="section">
+        <section class="hero is-hero-bar">
+          <div class="hero-body">
+            <div class="level">
+              <div class="level-left">
+                <div class="level-item">
+                  <span class="is-size-4">
+                    <Translate>Instance id</Translate>: <b>{id}</b>
+                  </span>
+                </div>
+              </div>
+              <div class="level-right">
+                <div class="level-item">
+                  <h1 class="title">
+                    <button
+                      class="button is-danger"
+                      data-tooltip={i18n`Change the authorization method use for this instance.`}
+                      onClick={(): void => {
+                        setActive(!active);
+                      }}
+                    >
+                      <div class="icon is-left">
+                        <i class="mdi mdi-lock-reset" />
+                      </div>
+                      <span>
+                        <Translate>Manage access token</Translate>
+                      </span>
+                    </button>
+                  </h1>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <div class="columns">
+          <div class="column" />
+          <div class="column is-four-fifths">
+            {active && (
+              <UpdateTokenModal
+                oldToken={currentTokenValue}
+                onCancel={() => {
+                  setActive(false);
+                }}
+                onClear={() => {
+                  updateToken(null);
+                  setActive(false);
+                }}
+                onConfirm={(newToken) => {
+                  updateToken(newToken);
+                  setActive(false);
+                }}
+              />
+            )}
+          </div>
+          <div class="column" />
+        </div>
+        <hr />
+
+        <div class="columns">
+          <div class="column" />
+          <div class="column is-four-fifths">
+            <FormProvider<Entity>
+              errors={errors}
+              object={value}
+              valueHandler={valueHandler}
+            >
+              <DefaultInstanceFormFields showId={false} />
+            </FormProvider>
+
+            <div class="buttons is-right mt-4">
+              <button
+                class="button"
+                onClick={onBack}
+                data-tooltip="cancel operation"
+              >
+                <Translate>Cancel</Translate>
+              </button>
+
+              <AsyncButton
+                onClick={submit}
+                data-tooltip={
+                  hasErrors
+                    ? i18n`Need to complete marked fields`
+                    : "confirm operation"
+                }
+                disabled={hasErrors}
+              >
+                <Translate>Confirm</Translate>
+              </AsyncButton>
+            </div>
+          </div>
+          <div class="column" />
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/update/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/update/index.tsx
new file mode 100644
index 000000000..bd5f4c727
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/update/index.tsx
@@ -0,0 +1,113 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+import { Fragment, h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import { Loading } from "../../../components/exception/loading";
+import { NotificationCard } from "../../../components/menu";
+import { useInstanceContext } from "../../../context/instance";
+import { MerchantBackend } from "../../../declaration";
+import { HttpError, HttpResponse } from "../../../hooks/backend";
+import {
+  useInstanceAPI,
+  useInstanceDetails,
+  useManagedInstanceDetails,
+  useManagementAPI,
+} from "../../../hooks/instance";
+import { useTranslator } from "../../../i18n";
+import { Notification } from "../../../utils/types";
+import { UpdatePage } from "./UpdatePage";
+
+export interface Props {
+  onBack: () => void;
+  onConfirm: () => void;
+
+  onUnauthorized: () => VNode;
+  onNotFound: () => VNode;
+  onLoadError: (e: HttpError) => VNode;
+  onUpdateError: (e: HttpError) => void;
+}
+
+export default function Update(props: Props): VNode {
+  const { updateInstance, clearToken, setNewToken } = useInstanceAPI();
+  const result = useInstanceDetails();
+  return CommonUpdate(props, result, updateInstance, clearToken, setNewToken);
+}
+
+export function AdminUpdate(props: Props & { instanceId: string }): VNode {
+  const { updateInstance, clearToken, setNewToken } = useManagementAPI(
+    props.instanceId
+  );
+  const result = useManagedInstanceDetails(props.instanceId);
+  return CommonUpdate(props, result, updateInstance, clearToken, setNewToken);
+}
+
+function CommonUpdate(
+  {
+    onBack,
+    onConfirm,
+    onLoadError,
+    onNotFound,
+    onUpdateError,
+    onUnauthorized,
+  }: Props,
+  result: HttpResponse<MerchantBackend.Instances.QueryInstancesResponse>,
+  updateInstance: any,
+  clearToken: any,
+  setNewToken: any
+): VNode {
+  const { changeToken } = useInstanceContext();
+  const [notif, setNotif] = useState<Notification | undefined>(undefined);
+  const i18n = useTranslator();
+
+  if (result.clientError && result.isUnauthorized) return onUnauthorized();
+  if (result.clientError && result.isNotfound) return onNotFound();
+  if (result.loading) return <Loading />;
+  if (!result.ok) return onLoadError(result);
+
+  return (
+    <Fragment>
+      <NotificationCard notification={notif} />
+      <UpdatePage
+        onBack={onBack}
+        isLoading={false}
+        selected={result.data}
+        onUpdate={(
+          d: MerchantBackend.Instances.InstanceReconfigurationMessage
+        ): Promise<void> => {
+          return updateInstance(d)
+            .then(onConfirm)
+            .catch((error: Error) =>
+              setNotif({
+                message: i18n`Failed to create instance`,
+                type: "ERROR",
+                description: error.message,
+              })
+            );
+        }}
+        onChangeAuth={(
+          d: MerchantBackend.Instances.InstanceAuthConfigurationMessage
+        ): Promise<void> => {
+          const apiCall =
+            d.method === "external" ? clearToken() : setNewToken(d.token!);
+          return apiCall
+            .then(() => changeToken(d.token))
+            .then(onConfirm)
+            .catch(onUpdateError);
+        }}
+      />
+    </Fragment>
+  );
+}
diff --git a/packages/merchant-backoffice-ui/src/paths/login/index.tsx b/packages/merchant-backoffice-ui/src/paths/login/index.tsx
new file mode 100644
index 000000000..acad7fe0b
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/login/index.tsx
@@ -0,0 +1,29 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+ /**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+import { h, VNode } from "preact";
+import { LoginModal } from '../../components/exception/login';
+
+interface Props {
+  onConfirm: (url: string, token?: string) => void;
+}
+export default function LoginPage({ onConfirm }: Props): VNode {
+  return <LoginModal onConfirm={onConfirm} />
+} 
\ No newline at end of file
diff --git a/packages/merchant-backoffice-ui/src/paths/notfound/index.tsx b/packages/merchant-backoffice-ui/src/paths/notfound/index.tsx
new file mode 100644
index 000000000..10c3fac25
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/notfound/index.tsx
@@ -0,0 +1,36 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+ /**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { h, VNode } from 'preact';
+import { Link } from 'preact-router/match';
+
+export default function NotFoundPage(): VNode {
+    return (
+        <div>
+            <h1>Error 404</h1>
+            <p>That page doesn&apos;t exist.</p>
+            <Link href="/">
+                <h4>Back to Home</h4>
+            </Link>
+        </div>
+    );
+}
+
diff --git a/packages/merchant-backoffice-ui/src/schemas/index.ts b/packages/merchant-backoffice-ui/src/schemas/index.ts
new file mode 100644
index 000000000..00e80199a
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/schemas/index.ts
@@ -0,0 +1,202 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { isAfter, isFuture } from 'date-fns';
+import * as yup from 'yup';
+import { AMOUNT_REGEX, PAYTO_REGEX } from "../utils/constants";
+
+yup.setLocale({
+  mixed: {
+    default: 'field_invalid',
+  },
+  number: {
+    min: ({ min }: any) => ({ key: 'field_too_short', values: { min } }),
+    max: ({ max }: any) => ({ key: 'field_too_big', values: { max } }),
+  },
+});
+
+function listOfPayToUrisAreValid(values?: (string | undefined)[]): boolean {
+  return !!values && values.every(v => v && PAYTO_REGEX.test(v));
+}
+
+function currencyWithAmountIsValid(value?: string): boolean {
+  return !!value && AMOUNT_REGEX.test(value)
+}
+function currencyGreaterThan0(value?: string) {
+  if (value) {
+    try {
+      const [, amount] = value.split(':')
+      const intAmount = parseInt(amount, 10)
+      return intAmount > 0
+    } catch {
+      return false
+    }
+  }
+  return true
+}
+
+export const InstanceSchema = yup.object().shape({
+  id: yup.string().required().meta({ type: 'url' }),
+  name: yup.string().required(),
+  auth: yup.object().shape({
+    method: yup.string().matches(/^(external|token)$/),
+    token: yup.string().optional().nullable(),
+  }),
+  payto_uris: yup.array().of(yup.string())
+    .min(1)
+    .meta({ type: 'array' })
+    .test('payto', '{path} is not valid', listOfPayToUrisAreValid),
+  default_max_deposit_fee: yup.string()
+    .required()
+    .test('amount', 'the amount is not valid', currencyWithAmountIsValid)
+    .meta({ type: 'amount' }),
+  default_max_wire_fee: yup.string()
+    .required()
+    .test('amount', '{path} is not valid', currencyWithAmountIsValid)
+    .meta({ type: 'amount' }),
+  default_wire_fee_amortization: yup.number()
+    .required(),
+  address: yup.object().shape({
+    country: yup.string().optional(),
+    address_lines: yup.array().of(yup.string()).max(7).optional(),
+    building_number: yup.string().optional(),
+    building_name: yup.string().optional(),
+    street: yup.string().optional(),
+    post_code: yup.string().optional(),
+    town_location: yup.string().optional(),
+    town: yup.string(),
+    district: yup.string().optional(),
+    country_subdivision: yup.string().optional(),
+  }).meta({ type: 'group' }),
+  jurisdiction: yup.object().shape({
+    country: yup.string().optional(),
+    address_lines: yup.array().of(yup.string()).max(7).optional(),
+    building_number: yup.string().optional(),
+    building_name: yup.string().optional(),
+    street: yup.string().optional(),
+    post_code: yup.string().optional(),
+    town_location: yup.string().optional(),
+    town: yup.string(),
+    district: yup.string().optional(),
+    country_subdivision: yup.string().optional(),
+  }).meta({ type: 'group' }),
+  // default_pay_delay: yup.object()
+  //   .shape({ d_us: yup.number() })
+  //   .required()
+  //   .meta({ type: 'duration' }),
+  // .transform(numberToDuration),
+  default_wire_transfer_delay: yup.object()
+    .shape({ d_us: yup.number() })
+    .required()
+    .meta({ type: 'duration' }),
+  // .transform(numberToDuration),
+})
+
+export const InstanceUpdateSchema = InstanceSchema.clone().omit(['id']);
+export const InstanceCreateSchema = InstanceSchema.clone();
+
+export const AuthorizeTipSchema = yup.object().shape({
+  justification: yup.string().required(),
+  amount: yup.string()
+    .required()
+    .test('amount', 'the amount is not valid', currencyWithAmountIsValid)
+    .test('amount_positive', 'the amount is not valid', currencyGreaterThan0),
+  next_url: yup.string().required(),
+})
+
+const stringIsValidJSON = (value?: string) => {
+  const p = value?.trim()
+  if (!p) return true;
+  try {
+    JSON.parse(p)
+    return true
+  } catch {
+    return false
+  }
+}
+
+export const OrderCreateSchema = yup.object().shape({
+  pricing: yup.object().required().shape({
+    summary: yup.string().ensure().required(),
+    order_price: yup.string()
+      .ensure()
+      .required()
+      .test('amount', 'the amount is not valid', currencyWithAmountIsValid)
+      .test('amount_positive', 'the amount should be greater than 0', currencyGreaterThan0),
+  }),
+  extra: yup.string().test('extra', 'is not a JSON format', stringIsValidJSON),
+  payments: yup.object().required().shape({
+    refund_deadline: yup.date()
+      .test('future', 'should be in the future', (d) => d ? isFuture(d) : true),
+    pay_deadline: yup.date()
+      .test('future', 'should be in the future', (d) => d ? isFuture(d) : true),
+    auto_refund_deadline: yup.date()
+      .test('future', 'should be in the future', (d) => d ? isFuture(d) : true),
+    delivery_date: yup.date()
+      .test('future', 'should be in the future', (d) => d ? isFuture(d) : true),
+  }).test('payment', 'dates', (d) => {
+    if (d.pay_deadline && d.refund_deadline && isAfter(d.refund_deadline, d.pay_deadline)) {
+      return new yup.ValidationError('pay deadline should be greater than refund', 'asd', 'payments.pay_deadline')
+    }
+    return true
+  })
+})
+
+export const ProductCreateSchema = yup.object().shape({
+  product_id: yup.string().ensure().required(),
+  description: yup.string().required(),
+  unit: yup.string().ensure().required(),
+  price: yup.string()
+    .required()
+    .test('amount', 'the amount is not valid', currencyWithAmountIsValid),
+  stock: yup.object({
+
+  }).optional(),
+  minimum_age: yup.number().optional().min(0),
+})
+
+export const ProductUpdateSchema = yup.object().shape({
+  description: yup.string().required(),
+  price: yup.string()
+    .required()
+    .test('amount', 'the amount is not valid', currencyWithAmountIsValid),
+  stock: yup.object({
+
+  }).optional(),
+  minimum_age: yup.number().optional().min(0),
+})
+
+
+export const TaxSchema = yup.object().shape({
+  name: yup.string().required().ensure(),
+  tax: yup.string()
+    .required()
+    .test('amount', 'the amount is not valid', currencyWithAmountIsValid),
+})
+
+export const NonInventoryProductSchema = yup.object().shape({
+  quantity: yup.number().required().positive(),
+  description: yup.string().required(),
+  unit: yup.string().ensure().required(),
+  price: yup.string()
+    .required()
+    .test('amount', 'the amount is not valid', currencyWithAmountIsValid),
+})
diff --git a/packages/merchant-backoffice-ui/src/scss/DurationPicker.scss b/packages/merchant-backoffice-ui/src/scss/DurationPicker.scss
new file mode 100644
index 000000000..a35575324
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/scss/DurationPicker.scss
@@ -0,0 +1,71 @@
+
+.rdp-picker {
+  display: flex;
+  height: 175px;
+}
+
+@media (max-width: 400px) {
+  .rdp-picker {
+    width: 250px;
+  }
+}
+
+.rdp-masked-div {
+  overflow: hidden;
+  height: 175px;
+  position: relative;
+}
+
+.rdp-column-container {
+  flex-grow: 1;
+  display: inline-block;
+}
+
+.rdp-column {
+  position: absolute;
+  z-index: 0;
+  width: 100%;
+}
+
+.rdp-reticule {
+  border: 0;
+  border-top: 2px solid rgba(109, 202, 236, 1);
+  height: 2px;
+  position: absolute;
+  width: 80%;
+  margin: 0;
+  z-index: 100;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  transform: translateX(-50%);
+}
+
+.rdp-text-overlay {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 35px;
+  font-size: 20px;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  transform: translateX(-50%);
+}
+
+.rdp-cell div {
+  font-size: 17px;
+  color: gray;
+  font-style: italic;
+}
+
+.rdp-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 35px;
+  font-size: 18px;
+}
+
+.rdp-center {
+  font-size: 25px;
+}
diff --git a/packages/merchant-backoffice-ui/src/scss/_aside.scss b/packages/merchant-backoffice-ui/src/scss/_aside.scss
new file mode 100644
index 000000000..22258acf8
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/scss/_aside.scss
@@ -0,0 +1,179 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+ /**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+@include desktop {
+  html {
+    &.has-aside-left {
+      &.has-aside-expanded {
+        nav.navbar, body {
+          padding-left: $aside-width;
+        }
+      }
+      aside.is-placed-left {
+        display: block;
+      }
+    }
+  }
+
+  aside.aside.is-expanded {
+    width: $aside-width;
+
+    .menu-list {
+      @include icon-with-update-mark($aside-icon-width);
+
+      span.menu-item-label {
+        display: inline-block;
+      }
+
+      li.is-active {
+        ul {
+          display: block;
+        }
+      }
+    }
+  }
+}
+
+aside.aside {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 40;
+  height: 100vh;
+  padding: 0;
+  box-shadow: $aside-box-shadow;
+  background: $aside-background-color;
+
+  .aside-tools {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    background-color: $aside-tools-background-color;
+    color: $aside-tools-color;
+    line-height: $navbar-height;
+    height: $navbar-height;
+    padding-left: $default-padding * .5;
+    flex: 1;
+
+    .icon {
+      margin-right: $default-padding * .5;
+    }
+  }
+
+  .menu-list {
+    li {
+      a {
+        &.has-dropdown-icon {
+          position: relative;
+          padding-right: $aside-icon-width;
+
+          .dropdown-icon {
+            position: absolute;
+            top: $size-base * .5;
+            right: 0;
+          }
+        }
+      }
+      ul {
+        display: none;
+        border-left: 0;
+        background-color: darken($base-color, 2.5%);
+        padding-left: 0;
+        margin: 0 0 $default-padding * .5;
+
+        li {
+          a {
+            padding: $default-padding * .5 0 $default-padding * .5 $default-padding * .5;
+            font-size: $aside-submenu-font-size;
+
+            &.has-icon {
+              padding-left: 0;
+            }
+            &.is-active {
+              &:not(:hover) {
+                background: transparent;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .menu-label {
+    padding: 0 $default-padding * .5;
+    margin-top: $default-padding * .5;
+    margin-bottom: $default-padding * .5;
+  }
+
+}
+
+@include touch {
+   nav.navbar {
+    @include transition(margin-left);
+  }
+  aside.aside {
+    @include transition(left);
+  }
+  html.has-aside-mobile-transition {
+    body {
+      overflow-x: hidden;
+    }
+    body,  nav.navbar {
+      width: 100vw;
+    }
+    aside.aside {
+      width: $aside-mobile-width;
+      display: block;
+      left: $aside-mobile-width * -1;
+
+      .image {
+        img {
+          max-width: $aside-mobile-width * .33;
+        }
+      }
+
+      .menu-list {
+        li.is-active {
+          ul {
+            display: block;
+          }
+        }
+        a {
+          @include icon-with-update-mark($aside-icon-width);
+
+          span.menu-item-label {
+            display: inline-block;
+          }
+        }
+      }
+    }
+  }
+  div.has-aside-mobile-expanded {
+    nav.navbar {
+      margin-left: $aside-mobile-width;
+    }
+    aside.aside {
+      left: 0;
+    }
+  }
+}
diff --git a/packages/merchant-backoffice-ui/src/scss/_card.scss b/packages/merchant-backoffice-ui/src/scss/_card.scss
new file mode 100644
index 000000000..b2eec27a1
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/scss/_card.scss
@@ -0,0 +1,69 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+ /**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+.card:not(:last-child) {
+  margin-bottom: $default-padding;
+}
+
+.card {
+  border-radius: $radius-large;
+  border: $card-border;
+
+  &.has-table {
+    .card-content {
+      padding: 0;
+    }
+    .b-table {
+      border-radius: $radius-large;
+      overflow: hidden;
+    }
+  }
+
+  &.is-card-widget {
+    .card-content {
+      padding: $default-padding * .5;
+    }
+  }
+
+  .card-header {
+    border-bottom: 1px solid $base-color-light;
+  }
+
+  .card-content {
+    hr {
+      margin-left: $card-content-padding * -1;
+      margin-right: $card-content-padding * -1;
+    }
+  }
+
+  .is-widget-icon {
+    .icon {
+      width: 5rem;
+      height: 5rem;
+    }
+  }
+
+  .is-widget-label {
+    .subtitle {
+      color: $grey;
+    }
+  }
+}
diff --git a/packages/merchant-backoffice-ui/src/scss/_custom-calendar.scss b/packages/merchant-backoffice-ui/src/scss/_custom-calendar.scss
new file mode 100644
index 000000000..9ac877ce0
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/scss/_custom-calendar.scss
@@ -0,0 +1,254 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+:root {
+  --primary-color: #3298dc;
+  
+  --primary-text-color-dark: rgba(0,0,0,.87);
+  --secondary-text-color-dark: rgba(0,0,0,.57);
+  --disabled-text-color-dark: rgba(0,0,0,.13);
+  
+  --primary-text-color-light: rgba(255,255,255,.87);
+  --secondary-text-color-light: rgba(255,255,255,.57);
+  --disabled-text-color-light: rgba(255,255,255,.13);
+  
+  --font-stack: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  
+  --primary-card-color: #fff;
+  --primary-background-color: #f2f2f2;
+  
+  --box-shadow-lvl-1: 0 1px 3px rgba(0, 0, 0, 0.12),
+                      0 1px 2px rgba(0, 0, 0, 0.24);
+  --box-shadow-lvl-2: 0 3px 6px rgba(0, 0, 0, 0.16),
+                      0 3px 6px rgba(0, 0, 0, 0.23);
+  --box-shadow-lvl-3: 0 10px 20px rgba(0, 0, 0, 0.19),
+                      0 6px 6px rgba(0, 0, 0, 0.23);
+  --box-shadow-lvl-4: 0 14px 28px rgba(0, 0, 0, 0.25),
+                      0 10px 10px rgba(0, 0, 0, 0.22);
+}
+
+
+.datePicker {
+  text-align: left;
+  background: var(--primary-card-color);
+  border-radius: 3px;
+  z-index: 200;
+  position: fixed;
+  height: auto;
+  max-height: 90vh;
+  width: 90vw;
+  max-width: 448px;
+  transform-origin: top left;
+  transition: transform .22s ease-in-out, opacity .22s ease-in-out;
+  top: 50%;
+  left: 50%;
+  opacity: 0;
+  transform: scale(0) translate(-50%, -50%);
+  user-select: none;
+
+  &.datePicker--opened {
+    opacity: 1;
+    transform: scale(1) translate(-50%, -50%);
+  }
+  
+  .datePicker--titles {
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+    padding: 24px;
+    height: 100px;
+    background: var(--primary-color);
+
+    h2, h3 {
+      cursor: pointer;
+      color: #fff;
+      line-height: 1;
+      padding: 0;
+      margin: 0;
+      font-size: 32px;
+    }
+
+    h3 {
+      color: rgba(255,255,255,.57);
+      font-size: 18px;
+      padding-bottom: 2px;
+    }
+  }
+
+  nav {
+    padding: 20px;
+    height: 56px;
+
+    h4 {
+      width: calc(100% - 60px);
+      text-align: center;
+      display: inline-block;
+      padding: 0;
+      font-size: 14px;
+      line-height: 24px;
+      margin: 0;
+      position: relative;
+      top: -9px;
+      color: var(--primary-text-color);
+    }
+
+    i {
+      cursor: pointer;
+      color: var(--secondary-text-color);
+      font-size: 26px;
+      user-select: none;
+      border-radius: 50%;
+      
+      &:hover {
+        background: var(--disabled-text-color-dark);
+      }
+    }
+  }
+  
+  .datePicker--scroll {
+    overflow-y: auto;
+    max-height: calc(90vh - 56px - 100px);
+  }
+
+  .datePicker--calendar {
+    padding: 0 20px;
+
+    .datePicker--dayNames {
+      width: 100%;
+      display: grid;
+      text-align: center;
+      
+      // there's probably a better way to do this, but wanted to try out CSS grid
+      grid-template-columns: calc(100% / 7) calc(100% / 7) calc(100% / 7) calc(100% / 7) calc(100% / 7) calc(100% / 7) calc(100% / 7);
+
+      span {
+        color: var(--secondary-text-color-dark);
+        font-size: 14px;
+        line-height: 42px;
+        display: inline-grid;
+      }
+    }
+
+    .datePicker--days {
+      width: 100%;
+      display: grid;
+      text-align: center;
+      grid-template-columns: calc(100% / 7) calc(100% / 7) calc(100% / 7) calc(100% / 7) calc(100% / 7) calc(100% / 7) calc(100% / 7);
+
+      span {
+        color: var(--primary-text-color-dark);
+        line-height: 42px;
+        font-size: 14px;
+        display: inline-grid;
+        transition: color .22s;
+        height: 42px;
+        position: relative;
+        cursor: pointer;
+        user-select: none;
+        border-radius: 50%;
+
+        &::before {
+          content: '';
+          position: absolute;
+          z-index: -1;
+          height: 42px;
+          width: 42px;
+          left: calc(50% - 21px);
+          background: var(--primary-color);
+          border-radius: 50%;
+          transition: transform .22s, opacity .22s;
+          transform: scale(0);
+          opacity: 0;
+        }
+        
+        &[disabled=true] {
+          cursor: unset;
+        }
+
+        &.datePicker--today {
+          font-weight: 700;
+        }
+
+        &.datePicker--selected {
+          color: rgba(255,255,255,.87);
+
+          &:before {
+            transform: scale(1);
+            opacity: 1;
+          }
+        }
+      }
+    }
+  }
+  
+  .datePicker--selectYear {
+    padding: 0 20px;
+    display: block;
+    width: 100%;
+    text-align: center;
+    max-height: 362px;
+    
+    span {
+      display: block;
+      width: 100%;
+      font-size: 24px;
+      margin: 20px auto;
+      cursor: pointer;
+      
+      &.selected {
+        font-size: 42px;
+        color: var(--primary-color);
+      }
+    }
+  }
+
+  div.datePicker--actions {
+    width: 100%;
+    padding: 8px;
+    text-align: right;
+
+    button {
+      margin-bottom: 0;
+      font-size: 15px;
+      cursor: pointer;
+      color: var(--primary-text-color);
+      border: none;
+      margin-left: 8px;
+      min-width: 64px;
+      line-height: 36px;
+      background-color: transparent;
+      appearance: none;
+      padding: 0 16px;
+      border-radius: 3px;
+      transition: background-color .13s;
+
+      &:hover, &:focus {
+        outline: none;
+        background-color: var(--disabled-text-color-dark);
+      }
+    }
+  }
+}
+
+.datePicker--background {
+  z-index: 199;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(0,0,0,.52);
+  animation: fadeIn .22s forwards;
+}
diff --git a/packages/merchant-backoffice-ui/src/scss/_footer.scss b/packages/merchant-backoffice-ui/src/scss/_footer.scss
new file mode 100644
index 000000000..027a5ca8b
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/scss/_footer.scss
@@ -0,0 +1,35 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+ /**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+footer.footer {
+  .logo {
+    img {
+      width: auto;
+      height: $footer-logo-height;
+    }
+  }
+}
+
+@include mobile {
+  .footer-copyright {
+    text-align: center;
+  }
+}
diff --git a/packages/merchant-backoffice-ui/src/scss/_form.scss b/packages/merchant-backoffice-ui/src/scss/_form.scss
new file mode 100644
index 000000000..71f0d4da4
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/scss/_form.scss
@@ -0,0 +1,64 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+ /**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+.field {
+  &.has-check {
+    .field-body {
+      margin-top: $default-padding * .125;
+    }
+  }
+  .control {
+    .mdi-24px.mdi-set, .mdi-24px.mdi:before {
+      font-size: inherit;
+    }
+  }
+}
+.upload {
+  .upload-draggable {
+    display: block;
+  }
+}
+
+.input, .textarea, select {
+  box-shadow: none;
+
+  &:focus, &:active {
+    box-shadow: none!important;
+  }
+}
+
+.switch input[type=checkbox]+.check:before {
+  box-shadow: none;
+}
+
+.switch, .b-checkbox.checkbox {
+  input[type=checkbox] {
+    &:focus + .check, &:focus:checked + .check {
+      box-shadow: none!important;
+    }
+  }
+}
+
+.b-checkbox.checkbox input[type=checkbox], .b-radio.radio input[type=radio] {
+  &+.check {
+    border: $checkbox-border;
+  }
+}
diff --git a/packages/merchant-backoffice-ui/src/scss/_hero-bar.scss b/packages/merchant-backoffice-ui/src/scss/_hero-bar.scss
new file mode 100644
index 000000000..90b67a2ed
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/scss/_hero-bar.scss
@@ -0,0 +1,55 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+ /**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+section.hero.is-hero-bar {
+  background-color: $hero-bar-background;
+  border-bottom: $light-border;
+
+  .hero-body {
+    padding: $default-padding;
+
+    .level-item {
+      &.is-hero-avatar-item {
+        margin-right: $default-padding;
+      }
+
+      > div > .level {
+        margin-bottom: $default-padding * .5;
+      }
+
+      .subtitle + p {
+        margin-top: $default-padding * .5;
+      }
+    }
+
+    .button {
+      &.is-hero-button {
+        background-color: rgba($white, .5);
+        font-weight: 300;
+        @include transition(background-color);
+
+        &:hover {
+          background-color: $white;
+        }
+      }
+    }
+  }
+}
diff --git a/packages/merchant-backoffice-ui/src/scss/_loading.scss b/packages/merchant-backoffice-ui/src/scss/_loading.scss
new file mode 100644
index 000000000..d25bf8048
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/scss/_loading.scss
@@ -0,0 +1,51 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+.lds-ring {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+.lds-ring div {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  width: 64px;
+  height: 64px;
+  margin: 8px;
+  border: 8px solid black;
+  border-radius: 50%;
+  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: black transparent transparent transparent;
+}
+.lds-ring div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+.lds-ring div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+.lds-ring div:nth-child(3) {
+  animation-delay: -0.15s;
+}
+@keyframes lds-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/packages/merchant-backoffice-ui/src/scss/_main-section.scss b/packages/merchant-backoffice-ui/src/scss/_main-section.scss
new file mode 100644
index 000000000..1a4fad81d
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/scss/_main-section.scss
@@ -0,0 +1,24 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+ /**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+section.section.is-main-section {
+  padding-top: $default-padding;
+}
diff --git a/packages/merchant-backoffice-ui/src/scss/_misc.scss b/packages/merchant-backoffice-ui/src/scss/_misc.scss
new file mode 100644
index 000000000..65bd28dbd
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/scss/_misc.scss
@@ -0,0 +1,50 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+.is-user-avatar {
+  &.has-max-width {
+    max-width: $size-base * 7;
+  }
+
+  &.is-aligned-center {
+    margin: 0 auto;
+  }
+
+  img {
+    margin: 0 auto;
+    border-radius: $radius-rounded;
+  }
+}
+
+.icon.has-update-mark {
+  position: relative;
+
+  &:after {
+    content: "";
+    width: $icon-update-mark-size;
+    height: $icon-update-mark-size;
+    position: absolute;
+    top: 1px;
+    right: 1px;
+    background-color: $icon-update-mark-color;
+    border-radius: $radius-rounded;
+  }
+}
diff --git a/packages/merchant-backoffice-ui/src/scss/_mixins.scss b/packages/merchant-backoffice-ui/src/scss/_mixins.scss
new file mode 100644
index 000000000..0809033ed
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/scss/_mixins.scss
@@ -0,0 +1,34 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+ /**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+@mixin transition($t) {
+  transition: $t 250ms ease-in-out 50ms;
+}
+
+@mixin icon-with-update-mark ($icon-base-width) {
+  .icon {
+    width: $icon-base-width;
+
+    &.has-update-mark:after {
+      right: ($icon-base-width / 2) - .85;
+    }
+  }
+}
diff --git a/packages/merchant-backoffice-ui/src/scss/_modal.scss b/packages/merchant-backoffice-ui/src/scss/_modal.scss
new file mode 100644
index 000000000..3edbb8d3a
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/scss/_modal.scss
@@ -0,0 +1,35 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+ /**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+.modal-card {
+  width: $modal-card-width;
+}
+
+.modal-card-foot {
+  background-color: $modal-card-foot-background-color;
+}
+
+@include mobile {
+  .modal .animation-content .modal-card {
+    width: $modal-card-width-mobile;
+    margin: 0 auto;
+  }
+}
diff --git a/packages/merchant-backoffice-ui/src/scss/_nav-bar.scss b/packages/merchant-backoffice-ui/src/scss/_nav-bar.scss
new file mode 100644
index 000000000..09f1e2326
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/scss/_nav-bar.scss
@@ -0,0 +1,144 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+ /**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+nav.navbar {
+  box-shadow: $navbar-box-shadow;
+
+  .navbar-item {
+    &.has-user-avatar {
+      .is-user-avatar {
+        margin-right: $default-padding * .5;
+        display: inline-flex;
+        width: $navbar-avatar-size;
+        height: $navbar-avatar-size;
+      }
+    }
+
+    &.has-divider {
+      border-right: $navbar-divider-border;
+    }
+
+    &.no-left-space {
+      padding-left: 0;
+    }
+
+    &.has-dropdown {
+      padding-right: 0;
+      padding-left: 0;
+
+      .navbar-link {
+        padding-right: $navbar-item-h-padding;
+        padding-left: $navbar-item-h-padding;
+      }
+    }
+
+    &.has-control {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    .control {
+      .input {
+        color: $navbar-input-color;
+        border: 0;
+        box-shadow: none;
+        background: transparent;
+
+        &::placeholder {
+          color: $navbar-input-placeholder-color;
+        }
+      }
+    }
+  }
+}
+
+@include touch {
+  nav.navbar {
+    display: flex;
+    padding-right: 0;
+
+    .navbar-brand {
+      flex: 1;
+
+      &.is-right {
+        flex: none;
+      }
+    }
+
+    .navbar-item {
+      &.no-left-space-touch {
+        padding-left: 0;
+      }
+    }
+
+    .navbar-menu {
+      position: absolute;
+      width: 100vw;
+      padding-top: 0;
+      top: $navbar-height;
+      left: 0;
+
+      .navbar-item {
+        .icon:first-child {
+          margin-right: $default-padding * .5;
+        }
+
+        &.has-dropdown {
+          >.navbar-link {
+            background-color: $white-ter;
+            .icon:last-child {
+              display: none;
+            }
+          }
+        }
+
+        &.has-user-avatar {
+          >.navbar-link {
+            display: flex;
+            align-items: center;
+            padding-top: $default-padding * .5;
+            padding-bottom: $default-padding * .5;
+          }
+        }
+      }
+    }
+  }
+}
+
+@include desktop {
+  nav.navbar {
+    .navbar-item {
+      padding-right: $navbar-item-h-padding;
+      padding-left: $navbar-item-h-padding;
+
+      &:not(.is-desktop-icon-only) {
+        .icon:first-child {
+          margin-right: $default-padding * .5;
+        }
+      }
+      &.is-desktop-icon-only {
+        span:not(.icon) {
+          display: none;
+        }
+      }
+    }
+  }
+}
diff --git a/packages/merchant-backoffice-ui/src/scss/_table.scss b/packages/merchant-backoffice-ui/src/scss/_table.scss
new file mode 100644
index 000000000..9cf6f4dcd
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/scss/_table.scss
@@ -0,0 +1,173 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+ /**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+table.table {
+  thead {
+    th {
+      border-bottom-width: 1px;
+    }
+  }
+
+  td, th {
+    &.checkbox-cell {
+      .b-checkbox.checkbox:not(.button) {
+        margin-right: 0;
+        width: 20px;
+
+        .control-label {
+          display: none;
+          padding: 0;
+        }
+      }
+    }
+  }
+
+  td {
+    .image {
+      margin: 0 auto;
+      width: $table-avatar-size;
+      height: $table-avatar-size;
+    }
+
+    &.is-progress-col {
+      min-width: 5rem;
+      vertical-align: middle;
+    }
+  }
+}
+
+.b-table {
+  .table {
+    border: 0;
+    border-radius: 0;
+  }
+
+  /* This stylizes buefy's pagination */
+  .table-wrapper {
+    margin-bottom: 0;
+  }
+
+  .table-wrapper + .level {
+    padding: $notification-padding;
+    padding-left: $card-content-padding;
+    padding-right: $card-content-padding;
+    margin: 0;
+    border-top: $base-color-light;
+    background: $notification-background-color;
+
+    .pagination-link {
+      background: $button-background-color;
+      color: $button-color;
+      border-color: $button-border-color;
+
+      &.is-current {
+        border-color: $button-active-border-color;
+      }
+    }
+
+    .pagination-previous, .pagination-next, .pagination-link {
+      border-color: $button-border-color;
+      color: $base-color;
+
+      &[disabled] {
+        background-color: transparent;
+      }
+    }
+  }
+}
+
+@include mobile {
+  .card {
+    &.has-table {
+      .b-table {
+        .table-wrapper + .level {
+          .level-left + .level-right {
+            margin-top: 0;
+          }
+        }
+      }
+    }
+    &.has-mobile-sort-spaced {
+      .b-table {
+        .field.table-mobile-sort {
+          padding-top: $default-padding * .5;
+        }
+      }
+    }
+  }
+  .b-table {
+    .field.table-mobile-sort {
+      padding: 0 $default-padding * .5;
+    }
+
+    .table-wrapper.has-mobile-cards {
+      tr {
+        box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1);
+        margin-bottom: 3px!important;
+      }
+      td {
+        &.is-progress-col {
+          span, progress {
+            display: flex;
+            width: 45%;
+            align-items: center;
+            align-self: center;
+          }
+        }
+
+        &.checkbox-cell, &.is-image-cell {
+          border-bottom: 0!important;
+        }
+
+        &.checkbox-cell, &.is-actions-cell {
+          &:before {
+            display: none;
+          }
+        }
+
+        &.has-no-head-mobile {
+          &:before {
+            display: none;
+          }
+
+          span {
+            display: block;
+            width: 100%;
+          }
+
+          &.is-progress-col {
+            progress {
+              width: 100%;
+            }
+          }
+
+          &.is-image-cell {
+            .image {
+              width: $table-avatar-size-mobile;
+              height: auto;
+              margin: 0 auto $default-padding * .25;
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/merchant-backoffice-ui/src/scss/_theme-default.scss b/packages/merchant-backoffice-ui/src/scss/_theme-default.scss
new file mode 100644
index 000000000..538dfd4da
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/scss/_theme-default.scss
@@ -0,0 +1,136 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+/* We'll need some initial vars to use here */
+@import "node_modules/bulma/sass/utilities/initial-variables";
+
+/* Base: Size  */
+$size-base: 1rem;
+$default-padding: $size-base * 1.5;
+
+/* Default font */
+$family-sans-serif: "Nunito", sans-serif;
+
+/* Base color */
+$base-color: #2e323a;
+$base-color-light: rgba(24, 28, 33, 0.06);
+
+/* General overrides */
+$primary: $turquoise;
+$body-background-color: #f8f8f8;
+$link: $blue;
+$link-visited: $purple;
+$light-border: 1px solid $base-color-light;
+$hr-height: 1px;
+
+/* NavBar: specifics */
+$navbar-input-color: $grey-darker;
+$navbar-input-placeholder-color: $grey-lighter;
+$navbar-box-shadow: 0 1px 0 rgba(24, 28, 33, 0.04);
+$navbar-divider-border: 1px solid rgba($grey-lighter, 0.25);
+$navbar-item-h-padding: $default-padding * 0.75;
+$navbar-avatar-size: 1.75rem;
+
+/* Aside: Bulma override */
+$menu-item-radius: 0;
+$menu-list-link-padding: $size-base * 0.5 0;
+$menu-label-color: lighten($base-color, 25%);
+$menu-item-color: lighten($base-color, 30%);
+$menu-item-hover-color: $white;
+$menu-item-hover-background-color: darken($base-color, 3.5%);
+$menu-item-active-color: $white;
+$menu-item-active-background-color: darken($base-color, 2.5%);
+
+/* Aside: specifics */
+$aside-width: $size-base * 14;
+$aside-mobile-width: $size-base * 15;
+$aside-icon-width: $size-base * 3;
+$aside-submenu-font-size: $size-base * 0.95;
+$aside-box-shadow: none;
+$aside-background-color: $base-color;
+$aside-tools-background-color: darken($aside-background-color, 10%);
+$aside-tools-color: $white;
+
+/* Title Bar: specifics */
+$title-bar-color: $grey;
+$title-bar-active-color: $black-ter;
+
+/* Hero Bar: specifics */
+$hero-bar-background: $white;
+
+/* Card: Bulma override */
+$card-shadow: none;
+$card-header-shadow: none;
+
+/* Card: specifics */
+$card-border: 1px solid $base-color-light;
+$card-header-border-bottom-color: $base-color-light;
+
+/* Table: Bulma override */
+$table-cell-border: 1px solid $white-bis;
+
+/* Table: specifics */
+$table-avatar-size: $size-base * 1.5;
+$table-avatar-size-mobile: 25vw;
+
+/* Form */
+$checkbox-border: 1px solid $base-color;
+
+/* Modal card: Bulma override */
+$modal-card-head-background-color: $white-ter;
+$modal-card-title-size: $size-base;
+$modal-card-body-padding: $default-padding 20px;
+$modal-card-head-border-bottom: 1px solid $white-ter;
+$modal-card-foot-border-top: 0;
+
+/* Modal card: specifics */
+$modal-card-width: 80vw;
+$modal-card-width-mobile: 90vw;
+$modal-card-foot-background-color: $white-ter;
+
+/* Notification: Bulma override */
+$notification-padding: $default-padding * 0.75 $default-padding;
+
+/* Footer: Bulma override */
+$footer-background-color: $white;
+$footer-padding: $default-padding * 0.33 $default-padding;
+
+/* Footer: specifics */
+$footer-logo-height: $size-base * 2;
+
+/* Progress: Bulma override */
+$progress-bar-background-color: $grey-lighter;
+
+/* Icon: specifics */
+$icon-update-mark-size: $size-base * 0.5;
+$icon-update-mark-color: $yellow;
+
+$input-disabled-border-color: $grey-lighter;
+$table-row-hover-background-color: hsl(0, 0%, 80%);
+
+.menu-list {
+  div {
+    border-radius: $menu-item-radius;
+    color: $menu-item-color;
+    display: block;
+    padding: $menu-list-link-padding;
+  }
+}
diff --git a/packages/merchant-backoffice-ui/src/scss/_tiles.scss b/packages/merchant-backoffice-ui/src/scss/_tiles.scss
new file mode 100644
index 000000000..94fc04e70
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/scss/_tiles.scss
@@ -0,0 +1,25 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+ /**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+
+.is-tiles-wrapper {
+  margin-bottom: $default-padding;
+}
diff --git a/packages/merchant-backoffice-ui/src/scss/_title-bar.scss b/packages/merchant-backoffice-ui/src/scss/_title-bar.scss
new file mode 100644
index 000000000..736f26cbd
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/scss/_title-bar.scss
@@ -0,0 +1,50 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+ /**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+section.section.is-title-bar {
+  padding: $default-padding;
+  border-bottom: $light-border;
+
+  ul {
+    li {
+      display: inline-block;
+      padding: 0 $default-padding * .5 0 0;
+      font-size: $default-padding;
+      color: $title-bar-color;
+
+      &:after {
+        display: inline-block;
+        content: '/';
+        padding-left: $default-padding * .5;
+      }
+
+      &:last-child {
+        padding-right: 0;
+        font-weight: 900;
+        color: $title-bar-active-color;
+
+        &:after {
+          display: none;
+        }
+      }
+    }
+  }
+}
diff --git a/packages/merchant-backoffice-ui/src/scss/fonts/XRXV3I6Li01BKofINeaE.ttf b/packages/merchant-backoffice-ui/src/scss/fonts/XRXV3I6Li01BKofINeaE.ttf
new file mode 100644
index 000000000..7665ee336
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/scss/fonts/XRXV3I6Li01BKofINeaE.ttf
diff --git a/packages/merchant-backoffice-ui/src/scss/fonts/nunito.css b/packages/merchant-backoffice-ui/src/scss/fonts/nunito.css
new file mode 100644
index 000000000..ab30db36b
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/scss/fonts/nunito.css
@@ -0,0 +1,22 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+@font-face {
+  font-family: 'Nunito';
+  font-style: normal;
+  font-weight: 400;
+  src: url(./XRXV3I6Li01BKofINeaE.ttf) format('truetype');
+}
diff --git a/packages/merchant-backoffice-ui/src/scss/icons/fonts/materialdesignicons-webfont-4.9.95.eot b/packages/merchant-backoffice-ui/src/scss/icons/fonts/materialdesignicons-webfont-4.9.95.eot
new file mode 100644
index 000000000..ab6b25ded
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/scss/icons/fonts/materialdesignicons-webfont-4.9.95.eot
diff --git a/packages/merchant-backoffice-ui/src/scss/icons/fonts/materialdesignicons-webfont-4.9.95.ttf b/packages/merchant-backoffice-ui/src/scss/icons/fonts/materialdesignicons-webfont-4.9.95.ttf
new file mode 100644
index 000000000..824be10fa
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/scss/icons/fonts/materialdesignicons-webfont-4.9.95.ttf
diff --git a/packages/merchant-backoffice-ui/src/scss/icons/fonts/materialdesignicons-webfont-4.9.95.woff b/packages/merchant-backoffice-ui/src/scss/icons/fonts/materialdesignicons-webfont-4.9.95.woff
new file mode 100644
index 000000000..7e087c1de
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/scss/icons/fonts/materialdesignicons-webfont-4.9.95.woff
diff --git a/packages/merchant-backoffice-ui/src/scss/icons/fonts/materialdesignicons-webfont-4.9.95.woff2 b/packages/merchant-backoffice-ui/src/scss/icons/fonts/materialdesignicons-webfont-4.9.95.woff2
new file mode 100644
index 000000000..b5caa4ddc
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/scss/icons/fonts/materialdesignicons-webfont-4.9.95.woff2
diff --git a/packages/merchant-backoffice-ui/src/scss/icons/materialdesignicons-4.9.95.min.css b/packages/merchant-backoffice-ui/src/scss/icons/materialdesignicons-4.9.95.min.css
new file mode 100644
index 000000000..24a89d639
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/scss/icons/materialdesignicons-4.9.95.min.css
@@ -0,0 +1,3 @@
+@font-face{font-family:"Material Design Icons";src:url("./fonts/materialdesignicons-webfont-4.9.95.eot");src:url("./fonts/materialdesignicons-webfont-4.9.95.woff2") format("woff2"),url("./fonts/materialdesignicons-webfont-4.9.95.woff") format("woff"),url("./fonts/materialdesignicons-webfont-4.9.95.ttf") format("truetype");font-weight:normal;font-style:normal}.mdi:before,.mdi-set{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.mdi-ab-testing::before{content:"\F001C"}.mdi-abjad-arabic::before{content:"\F0353"}.mdi-abjad-hebrew::before{content:"\F0354"}.mdi-abugida-devanagari::before{content:"\F0355"}.mdi-abugida-thai::before{content:"\F0356"}.mdi-access-point::before{content:"\F002"}.mdi-access-point-network::before{content:"\F003"}.mdi-access-point-network-off::before{content:"\FBBD"}.mdi-account::before{content:"\F004"}.mdi-account-alert::before{content:"\F005"}.mdi-account-alert-outline::before{content:"\FB2C"}.mdi-account-arrow-left::before{content:"\FB2D"}.mdi-account-arrow-left-outline::before{content:"\FB2E"}.mdi-account-arrow-right::before{content:"\FB2F"}.mdi-account-arrow-right-outline::before{content:"\FB30"}.mdi-account-badge::before{content:"\FD83"}.mdi-account-badge-alert::before{content:"\FD84"}.mdi-account-badge-alert-outline::before{content:"\FD85"}.mdi-account-badge-horizontal::before{content:"\FDF0"}.mdi-account-badge-horizontal-outline::before{content:"\FDF1"}.mdi-account-badge-outline::before{content:"\FD86"}.mdi-account-box::before{content:"\F006"}.mdi-account-box-multiple::before{content:"\F933"}.mdi-account-box-multiple-outline::before{content:"\F002C"}.mdi-account-box-outline::before{content:"\F007"}.mdi-account-cancel::before{content:"\F030A"}.mdi-account-cancel-outline::before{content:"\F030B"}.mdi-account-card-details::before{content:"\F5D2"}.mdi-account-card-details-outline::before{content:"\FD87"}.mdi-account-cash::before{content:"\F00C2"}.mdi-account-cash-outline::before{content:"\F00C3"}.mdi-account-check::before{content:"\F008"}.mdi-account-check-outline::before{content:"\FBBE"}.mdi-account-child::before{content:"\FA88"}.mdi-account-child-circle::before{content:"\FA89"}.mdi-account-child-outline::before{content:"\F00F3"}.mdi-account-circle::before{content:"\F009"}.mdi-account-circle-outline::before{content:"\FB31"}.mdi-account-clock::before{content:"\FB32"}.mdi-account-clock-outline::before{content:"\FB33"}.mdi-account-cog::before{content:"\F039B"}.mdi-account-cog-outline::before{content:"\F039C"}.mdi-account-convert::before{content:"\F00A"}.mdi-account-convert-outline::before{content:"\F032C"}.mdi-account-details::before{content:"\F631"}.mdi-account-details-outline::before{content:"\F039D"}.mdi-account-edit::before{content:"\F6BB"}.mdi-account-edit-outline::before{content:"\F001D"}.mdi-account-group::before{content:"\F848"}.mdi-account-group-outline::before{content:"\FB34"}.mdi-account-heart::before{content:"\F898"}.mdi-account-heart-outline::before{content:"\FBBF"}.mdi-account-key::before{content:"\F00B"}.mdi-account-key-outline::before{content:"\FBC0"}.mdi-account-lock::before{content:"\F0189"}.mdi-account-lock-outline::before{content:"\F018A"}.mdi-account-minus::before{content:"\F00D"}.mdi-account-minus-outline::before{content:"\FAEB"}.mdi-account-multiple::before{content:"\F00E"}.mdi-account-multiple-check::before{content:"\F8C4"}.mdi-account-multiple-check-outline::before{content:"\F0229"}.mdi-account-multiple-minus::before{content:"\F5D3"}.mdi-account-multiple-minus-outline::before{content:"\FBC1"}.mdi-account-multiple-outline::before{content:"\F00F"}.mdi-account-multiple-plus::before{content:"\F010"}.mdi-account-multiple-plus-outline::before{content:"\F7FF"}.mdi-account-multiple-remove::before{content:"\F0235"}.mdi-account-multiple-remove-outline::before{content:"\F0236"}.mdi-account-network::before{content:"\F011"}.mdi-account-network-outline::before{content:"\FBC2"}.mdi-account-off::before{content:"\F012"}.mdi-account-off-outline::before{content:"\FBC3"}.mdi-account-outline::before{content:"\F013"}.mdi-account-plus::before{content:"\F014"}.mdi-account-plus-outline::before{content:"\F800"}.mdi-account-question::before{content:"\FB35"}.mdi-account-question-outline::before{content:"\FB36"}.mdi-account-remove::before{content:"\F015"}.mdi-account-remove-outline::before{content:"\FAEC"}.mdi-account-search::before{content:"\F016"}.mdi-account-search-outline::before{content:"\F934"}.mdi-account-settings::before{content:"\F630"}.mdi-account-settings-outline::before{content:"\F00F4"}.mdi-account-star::before{content:"\F017"}.mdi-account-star-outline::before{content:"\FBC4"}.mdi-account-supervisor::before{content:"\FA8A"}.mdi-account-supervisor-circle::before{content:"\FA8B"}.mdi-account-supervisor-outline::before{content:"\F0158"}.mdi-account-switch::before{content:"\F019"}.mdi-account-tie::before{content:"\FCBF"}.mdi-account-tie-outline::before{content:"\F00F5"}.mdi-account-tie-voice::before{content:"\F0333"}.mdi-account-tie-voice-off::before{content:"\F0335"}.mdi-account-tie-voice-off-outline::before{content:"\F0336"}.mdi-account-tie-voice-outline::before{content:"\F0334"}.mdi-accusoft::before{content:"\F849"}.mdi-adjust::before{content:"\F01A"}.mdi-adobe::before{content:"\F935"}.mdi-adobe-acrobat::before{content:"\FFBD"}.mdi-air-conditioner::before{content:"\F01B"}.mdi-air-filter::before{content:"\FD1F"}.mdi-air-horn::before{content:"\FD88"}.mdi-air-humidifier::before{content:"\F00C4"}.mdi-air-purifier::before{content:"\FD20"}.mdi-airbag::before{content:"\FBC5"}.mdi-airballoon::before{content:"\F01C"}.mdi-airballoon-outline::before{content:"\F002D"}.mdi-airplane::before{content:"\F01D"}.mdi-airplane-landing::before{content:"\F5D4"}.mdi-airplane-off::before{content:"\F01E"}.mdi-airplane-takeoff::before{content:"\F5D5"}.mdi-airplay::before{content:"\F01F"}.mdi-airport::before{content:"\F84A"}.mdi-alarm::before{content:"\F020"}.mdi-alarm-bell::before{content:"\F78D"}.mdi-alarm-check::before{content:"\F021"}.mdi-alarm-light::before{content:"\F78E"}.mdi-alarm-light-outline::before{content:"\FBC6"}.mdi-alarm-multiple::before{content:"\F022"}.mdi-alarm-note::before{content:"\FE8E"}.mdi-alarm-note-off::before{content:"\FE8F"}.mdi-alarm-off::before{content:"\F023"}.mdi-alarm-plus::before{content:"\F024"}.mdi-alarm-snooze::before{content:"\F68D"}.mdi-album::before{content:"\F025"}.mdi-alert::before{content:"\F026"}.mdi-alert-box::before{content:"\F027"}.mdi-alert-box-outline::before{content:"\FCC0"}.mdi-alert-circle::before{content:"\F028"}.mdi-alert-circle-check::before{content:"\F0218"}.mdi-alert-circle-check-outline::before{content:"\F0219"}.mdi-alert-circle-outline::before{content:"\F5D6"}.mdi-alert-decagram::before{content:"\F6BC"}.mdi-alert-decagram-outline::before{content:"\FCC1"}.mdi-alert-octagon::before{content:"\F029"}.mdi-alert-octagon-outline::before{content:"\FCC2"}.mdi-alert-octagram::before{content:"\F766"}.mdi-alert-octagram-outline::before{content:"\FCC3"}.mdi-alert-outline::before{content:"\F02A"}.mdi-alert-rhombus::before{content:"\F01F9"}.mdi-alert-rhombus-outline::before{content:"\F01FA"}.mdi-alien::before{content:"\F899"}.mdi-alien-outline::before{content:"\F00F6"}.mdi-align-horizontal-center::before{content:"\F01EE"}.mdi-align-horizontal-left::before{content:"\F01ED"}.mdi-align-horizontal-right::before{content:"\F01EF"}.mdi-align-vertical-bottom::before{content:"\F01F0"}.mdi-align-vertical-center::before{content:"\F01F1"}.mdi-align-vertical-top::before{content:"\F01F2"}.mdi-all-inclusive::before{content:"\F6BD"}.mdi-allergy::before{content:"\F0283"}.mdi-alpha::before{content:"\F02B"}.mdi-alpha-a::before{content:"\41"}.mdi-alpha-a-box::before{content:"\FAED"}.mdi-alpha-a-box-outline::before{content:"\FBC7"}.mdi-alpha-a-circle::before{content:"\FBC8"}.mdi-alpha-a-circle-outline::before{content:"\FBC9"}.mdi-alpha-b::before{content:"\42"}.mdi-alpha-b-box::before{content:"\FAEE"}.mdi-alpha-b-box-outline::before{content:"\FBCA"}.mdi-alpha-b-circle::before{content:"\FBCB"}.mdi-alpha-b-circle-outline::before{content:"\FBCC"}.mdi-alpha-c::before{content:"\43"}.mdi-alpha-c-box::before{content:"\FAEF"}.mdi-alpha-c-box-outline::before{content:"\FBCD"}.mdi-alpha-c-circle::before{content:"\FBCE"}.mdi-alpha-c-circle-outline::before{content:"\FBCF"}.mdi-alpha-d::before{content:"\44"}.mdi-alpha-d-box::before{content:"\FAF0"}.mdi-alpha-d-box-outline::before{content:"\FBD0"}.mdi-alpha-d-circle::before{content:"\FBD1"}.mdi-alpha-d-circle-outline::before{content:"\FBD2"}.mdi-alpha-e::before{content:"\45"}.mdi-alpha-e-box::before{content:"\FAF1"}.mdi-alpha-e-box-outline::before{content:"\FBD3"}.mdi-alpha-e-circle::before{content:"\FBD4"}.mdi-alpha-e-circle-outline::before{content:"\FBD5"}.mdi-alpha-f::before{content:"\46"}.mdi-alpha-f-box::before{content:"\FAF2"}.mdi-alpha-f-box-outline::before{content:"\FBD6"}.mdi-alpha-f-circle::before{content:"\FBD7"}.mdi-alpha-f-circle-outline::before{content:"\FBD8"}.mdi-alpha-g::before{content:"\47"}.mdi-alpha-g-box::before{content:"\FAF3"}.mdi-alpha-g-box-outline::before{content:"\FBD9"}.mdi-alpha-g-circle::before{content:"\FBDA"}.mdi-alpha-g-circle-outline::before{content:"\FBDB"}.mdi-alpha-h::before{content:"\48"}.mdi-alpha-h-box::before{content:"\FAF4"}.mdi-alpha-h-box-outline::before{content:"\FBDC"}.mdi-alpha-h-circle::before{content:"\FBDD"}.mdi-alpha-h-circle-outline::before{content:"\FBDE"}.mdi-alpha-i::before{content:"\49"}.mdi-alpha-i-box::before{content:"\FAF5"}.mdi-alpha-i-box-outline::before{content:"\FBDF"}.mdi-alpha-i-circle::before{content:"\FBE0"}.mdi-alpha-i-circle-outline::before{content:"\FBE1"}.mdi-alpha-j::before{content:"\4A"}.mdi-alpha-j-box::before{content:"\FAF6"}.mdi-alpha-j-box-outline::before{content:"\FBE2"}.mdi-alpha-j-circle::before{content:"\FBE3"}.mdi-alpha-j-circle-outline::before{content:"\FBE4"}.mdi-alpha-k::before{content:"\4B"}.mdi-alpha-k-box::before{content:"\FAF7"}.mdi-alpha-k-box-outline::before{content:"\FBE5"}.mdi-alpha-k-circle::before{content:"\FBE6"}.mdi-alpha-k-circle-outline::before{content:"\FBE7"}.mdi-alpha-l::before{content:"\4C"}.mdi-alpha-l-box::before{content:"\FAF8"}.mdi-alpha-l-box-outline::before{content:"\FBE8"}.mdi-alpha-l-circle::before{content:"\FBE9"}.mdi-alpha-l-circle-outline::before{content:"\FBEA"}.mdi-alpha-m::before{content:"\4D"}.mdi-alpha-m-box::before{content:"\FAF9"}.mdi-alpha-m-box-outline::before{content:"\FBEB"}.mdi-alpha-m-circle::before{content:"\FBEC"}.mdi-alpha-m-circle-outline::before{content:"\FBED"}.mdi-alpha-n::before{content:"\4E"}.mdi-alpha-n-box::before{content:"\FAFA"}.mdi-alpha-n-box-outline::before{content:"\FBEE"}.mdi-alpha-n-circle::before{content:"\FBEF"}.mdi-alpha-n-circle-outline::before{content:"\FBF0"}.mdi-alpha-o::before{content:"\4F"}.mdi-alpha-o-box::before{content:"\FAFB"}.mdi-alpha-o-box-outline::before{content:"\FBF1"}.mdi-alpha-o-circle::before{content:"\FBF2"}.mdi-alpha-o-circle-outline::before{content:"\FBF3"}.mdi-alpha-p::before{content:"\50"}.mdi-alpha-p-box::before{content:"\FAFC"}.mdi-alpha-p-box-outline::before{content:"\FBF4"}.mdi-alpha-p-circle::before{content:"\FBF5"}.mdi-alpha-p-circle-outline::before{content:"\FBF6"}.mdi-alpha-q::before{content:"\51"}.mdi-alpha-q-box::before{content:"\FAFD"}.mdi-alpha-q-box-outline::before{content:"\FBF7"}.mdi-alpha-q-circle::before{content:"\FBF8"}.mdi-alpha-q-circle-outline::before{content:"\FBF9"}.mdi-alpha-r::before{content:"\52"}.mdi-alpha-r-box::before{content:"\FAFE"}.mdi-alpha-r-box-outline::before{content:"\FBFA"}.mdi-alpha-r-circle::before{content:"\FBFB"}.mdi-alpha-r-circle-outline::before{content:"\FBFC"}.mdi-alpha-s::before{content:"\53"}.mdi-alpha-s-box::before{content:"\FAFF"}.mdi-alpha-s-box-outline::before{content:"\FBFD"}.mdi-alpha-s-circle::before{content:"\FBFE"}.mdi-alpha-s-circle-outline::before{content:"\FBFF"}.mdi-alpha-t::before{content:"\54"}.mdi-alpha-t-box::before{content:"\FB00"}.mdi-alpha-t-box-outline::before{content:"\FC00"}.mdi-alpha-t-circle::before{content:"\FC01"}.mdi-alpha-t-circle-outline::before{content:"\FC02"}.mdi-alpha-u::before{content:"\55"}.mdi-alpha-u-box::before{content:"\FB01"}.mdi-alpha-u-box-outline::before{content:"\FC03"}.mdi-alpha-u-circle::before{content:"\FC04"}.mdi-alpha-u-circle-outline::before{content:"\FC05"}.mdi-alpha-v::before{content:"\56"}.mdi-alpha-v-box::before{content:"\FB02"}.mdi-alpha-v-box-outline::before{content:"\FC06"}.mdi-alpha-v-circle::before{content:"\FC07"}.mdi-alpha-v-circle-outline::before{content:"\FC08"}.mdi-alpha-w::before{content:"\57"}.mdi-alpha-w-box::before{content:"\FB03"}.mdi-alpha-w-box-outline::before{content:"\FC09"}.mdi-alpha-w-circle::before{content:"\FC0A"}.mdi-alpha-w-circle-outline::before{content:"\FC0B"}.mdi-alpha-x::before{content:"\58"}.mdi-alpha-x-box::before{content:"\FB04"}.mdi-alpha-x-box-outline::before{content:"\FC0C"}.mdi-alpha-x-circle::before{content:"\FC0D"}.mdi-alpha-x-circle-outline::before{content:"\FC0E"}.mdi-alpha-y::before{content:"\59"}.mdi-alpha-y-box::before{content:"\FB05"}.mdi-alpha-y-box-outline::before{content:"\FC0F"}.mdi-alpha-y-circle::before{content:"\FC10"}.mdi-alpha-y-circle-outline::before{content:"\FC11"}.mdi-alpha-z::before{content:"\5A"}.mdi-alpha-z-box::before{content:"\FB06"}.mdi-alpha-z-box-outline::before{content:"\FC12"}.mdi-alpha-z-circle::before{content:"\FC13"}.mdi-alpha-z-circle-outline::before{content:"\FC14"}.mdi-alphabet-aurebesh::before{content:"\F0357"}.mdi-alphabet-cyrillic::before{content:"\F0358"}.mdi-alphabet-greek::before{content:"\F0359"}.mdi-alphabet-latin::before{content:"\F035A"}.mdi-alphabet-piqad::before{content:"\F035B"}.mdi-alphabet-tengwar::before{content:"\F0362"}.mdi-alphabetical::before{content:"\F02C"}.mdi-alphabetical-off::before{content:"\F002E"}.mdi-alphabetical-variant::before{content:"\F002F"}.mdi-alphabetical-variant-off::before{content:"\F0030"}.mdi-altimeter::before{content:"\F5D7"}.mdi-amazon::before{content:"\F02D"}.mdi-amazon-alexa::before{content:"\F8C5"}.mdi-amazon-drive::before{content:"\F02E"}.mdi-ambulance::before{content:"\F02F"}.mdi-ammunition::before{content:"\FCC4"}.mdi-ampersand::before{content:"\FA8C"}.mdi-amplifier::before{content:"\F030"}.mdi-amplifier-off::before{content:"\F01E0"}.mdi-anchor::before{content:"\F031"}.mdi-android::before{content:"\F032"}.mdi-android-auto::before{content:"\FA8D"}.mdi-android-debug-bridge::before{content:"\F033"}.mdi-android-head::before{content:"\F78F"}.mdi-android-messages::before{content:"\FD21"}.mdi-android-studio::before{content:"\F034"}.mdi-angle-acute::before{content:"\F936"}.mdi-angle-obtuse::before{content:"\F937"}.mdi-angle-right::before{content:"\F938"}.mdi-angular::before{content:"\F6B1"}.mdi-angularjs::before{content:"\F6BE"}.mdi-animation::before{content:"\F5D8"}.mdi-animation-outline::before{content:"\FA8E"}.mdi-animation-play::before{content:"\F939"}.mdi-animation-play-outline::before{content:"\FA8F"}.mdi-ansible::before{content:"\F00C5"}.mdi-antenna::before{content:"\F0144"}.mdi-anvil::before{content:"\F89A"}.mdi-apache-kafka::before{content:"\F0031"}.mdi-api::before{content:"\F00C6"}.mdi-api-off::before{content:"\F0282"}.mdi-apple::before{content:"\F035"}.mdi-apple-finder::before{content:"\F036"}.mdi-apple-icloud::before{content:"\F038"}.mdi-apple-ios::before{content:"\F037"}.mdi-apple-keyboard-caps::before{content:"\F632"}.mdi-apple-keyboard-command::before{content:"\F633"}.mdi-apple-keyboard-control::before{content:"\F634"}.mdi-apple-keyboard-option::before{content:"\F635"}.mdi-apple-keyboard-shift::before{content:"\F636"}.mdi-apple-safari::before{content:"\F039"}.mdi-application::before{content:"\F614"}.mdi-application-export::before{content:"\FD89"}.mdi-application-import::before{content:"\FD8A"}.mdi-approximately-equal::before{content:"\FFBE"}.mdi-approximately-equal-box::before{content:"\FFBF"}.mdi-apps::before{content:"\F03B"}.mdi-apps-box::before{content:"\FD22"}.mdi-arch::before{content:"\F8C6"}.mdi-archive::before{content:"\F03C"}.mdi-archive-arrow-down::before{content:"\F0284"}.mdi-archive-arrow-down-outline::before{content:"\F0285"}.mdi-archive-arrow-up::before{content:"\F0286"}.mdi-archive-arrow-up-outline::before{content:"\F0287"}.mdi-archive-outline::before{content:"\F0239"}.mdi-arm-flex::before{content:"\F008F"}.mdi-arm-flex-outline::before{content:"\F0090"}.mdi-arrange-bring-forward::before{content:"\F03D"}.mdi-arrange-bring-to-front::before{content:"\F03E"}.mdi-arrange-send-backward::before{content:"\F03F"}.mdi-arrange-send-to-back::before{content:"\F040"}.mdi-arrow-all::before{content:"\F041"}.mdi-arrow-bottom-left::before{content:"\F042"}.mdi-arrow-bottom-left-bold-outline::before{content:"\F9B6"}.mdi-arrow-bottom-left-thick::before{content:"\F9B7"}.mdi-arrow-bottom-right::before{content:"\F043"}.mdi-arrow-bottom-right-bold-outline::before{content:"\F9B8"}.mdi-arrow-bottom-right-thick::before{content:"\F9B9"}.mdi-arrow-collapse::before{content:"\F615"}.mdi-arrow-collapse-all::before{content:"\F044"}.mdi-arrow-collapse-down::before{content:"\F791"}.mdi-arrow-collapse-horizontal::before{content:"\F84B"}.mdi-arrow-collapse-left::before{content:"\F792"}.mdi-arrow-collapse-right::before{content:"\F793"}.mdi-arrow-collapse-up::before{content:"\F794"}.mdi-arrow-collapse-vertical::before{content:"\F84C"}.mdi-arrow-decision::before{content:"\F9BA"}.mdi-arrow-decision-auto::before{content:"\F9BB"}.mdi-arrow-decision-auto-outline::before{content:"\F9BC"}.mdi-arrow-decision-outline::before{content:"\F9BD"}.mdi-arrow-down::before{content:"\F045"}.mdi-arrow-down-bold::before{content:"\F72D"}.mdi-arrow-down-bold-box::before{content:"\F72E"}.mdi-arrow-down-bold-box-outline::before{content:"\F72F"}.mdi-arrow-down-bold-circle::before{content:"\F047"}.mdi-arrow-down-bold-circle-outline::before{content:"\F048"}.mdi-arrow-down-bold-hexagon-outline::before{content:"\F049"}.mdi-arrow-down-bold-outline::before{content:"\F9BE"}.mdi-arrow-down-box::before{content:"\F6BF"}.mdi-arrow-down-circle::before{content:"\FCB7"}.mdi-arrow-down-circle-outline::before{content:"\FCB8"}.mdi-arrow-down-drop-circle::before{content:"\F04A"}.mdi-arrow-down-drop-circle-outline::before{content:"\F04B"}.mdi-arrow-down-thick::before{content:"\F046"}.mdi-arrow-expand::before{content:"\F616"}.mdi-arrow-expand-all::before{content:"\F04C"}.mdi-arrow-expand-down::before{content:"\F795"}.mdi-arrow-expand-horizontal::before{content:"\F84D"}.mdi-arrow-expand-left::before{content:"\F796"}.mdi-arrow-expand-right::before{content:"\F797"}.mdi-arrow-expand-up::before{content:"\F798"}.mdi-arrow-expand-vertical::before{content:"\F84E"}.mdi-arrow-horizontal-lock::before{content:"\F0186"}.mdi-arrow-left::before{content:"\F04D"}.mdi-arrow-left-bold::before{content:"\F730"}.mdi-arrow-left-bold-box::before{content:"\F731"}.mdi-arrow-left-bold-box-outline::before{content:"\F732"}.mdi-arrow-left-bold-circle::before{content:"\F04F"}.mdi-arrow-left-bold-circle-outline::before{content:"\F050"}.mdi-arrow-left-bold-hexagon-outline::before{content:"\F051"}.mdi-arrow-left-bold-outline::before{content:"\F9BF"}.mdi-arrow-left-box::before{content:"\F6C0"}.mdi-arrow-left-circle::before{content:"\FCB9"}.mdi-arrow-left-circle-outline::before{content:"\FCBA"}.mdi-arrow-left-drop-circle::before{content:"\F052"}.mdi-arrow-left-drop-circle-outline::before{content:"\F053"}.mdi-arrow-left-right::before{content:"\FE90"}.mdi-arrow-left-right-bold::before{content:"\FE91"}.mdi-arrow-left-right-bold-outline::before{content:"\F9C0"}.mdi-arrow-left-thick::before{content:"\F04E"}.mdi-arrow-right::before{content:"\F054"}.mdi-arrow-right-bold::before{content:"\F733"}.mdi-arrow-right-bold-box::before{content:"\F734"}.mdi-arrow-right-bold-box-outline::before{content:"\F735"}.mdi-arrow-right-bold-circle::before{content:"\F056"}.mdi-arrow-right-bold-circle-outline::before{content:"\F057"}.mdi-arrow-right-bold-hexagon-outline::before{content:"\F058"}.mdi-arrow-right-bold-outline::before{content:"\F9C1"}.mdi-arrow-right-box::before{content:"\F6C1"}.mdi-arrow-right-circle::before{content:"\FCBB"}.mdi-arrow-right-circle-outline::before{content:"\FCBC"}.mdi-arrow-right-drop-circle::before{content:"\F059"}.mdi-arrow-right-drop-circle-outline::before{content:"\F05A"}.mdi-arrow-right-thick::before{content:"\F055"}.mdi-arrow-split-horizontal::before{content:"\F93A"}.mdi-arrow-split-vertical::before{content:"\F93B"}.mdi-arrow-top-left::before{content:"\F05B"}.mdi-arrow-top-left-bold-outline::before{content:"\F9C2"}.mdi-arrow-top-left-bottom-right::before{content:"\FE92"}.mdi-arrow-top-left-bottom-right-bold::before{content:"\FE93"}.mdi-arrow-top-left-thick::before{content:"\F9C3"}.mdi-arrow-top-right::before{content:"\F05C"}.mdi-arrow-top-right-bold-outline::before{content:"\F9C4"}.mdi-arrow-top-right-bottom-left::before{content:"\FE94"}.mdi-arrow-top-right-bottom-left-bold::before{content:"\FE95"}.mdi-arrow-top-right-thick::before{content:"\F9C5"}.mdi-arrow-up::before{content:"\F05D"}.mdi-arrow-up-bold::before{content:"\F736"}.mdi-arrow-up-bold-box::before{content:"\F737"}.mdi-arrow-up-bold-box-outline::before{content:"\F738"}.mdi-arrow-up-bold-circle::before{content:"\F05F"}.mdi-arrow-up-bold-circle-outline::before{content:"\F060"}.mdi-arrow-up-bold-hexagon-outline::before{content:"\F061"}.mdi-arrow-up-bold-outline::before{content:"\F9C6"}.mdi-arrow-up-box::before{content:"\F6C2"}.mdi-arrow-up-circle::before{content:"\FCBD"}.mdi-arrow-up-circle-outline::before{content:"\FCBE"}.mdi-arrow-up-down::before{content:"\FE96"}.mdi-arrow-up-down-bold::before{content:"\FE97"}.mdi-arrow-up-down-bold-outline::before{content:"\F9C7"}.mdi-arrow-up-drop-circle::before{content:"\F062"}.mdi-arrow-up-drop-circle-outline::before{content:"\F063"}.mdi-arrow-up-thick::before{content:"\F05E"}.mdi-arrow-vertical-lock::before{content:"\F0187"}.mdi-artist::before{content:"\F802"}.mdi-artist-outline::before{content:"\FCC5"}.mdi-artstation::before{content:"\FB37"}.mdi-aspect-ratio::before{content:"\FA23"}.mdi-assistant::before{content:"\F064"}.mdi-asterisk::before{content:"\F6C3"}.mdi-at::before{content:"\F065"}.mdi-atlassian::before{content:"\F803"}.mdi-atm::before{content:"\FD23"}.mdi-atom::before{content:"\F767"}.mdi-atom-variant::before{content:"\FE98"}.mdi-attachment::before{content:"\F066"}.mdi-audio-video::before{content:"\F93C"}.mdi-audio-video-off::before{content:"\F01E1"}.mdi-audiobook::before{content:"\F067"}.mdi-augmented-reality::before{content:"\F84F"}.mdi-auto-download::before{content:"\F03A9"}.mdi-auto-fix::before{content:"\F068"}.mdi-auto-upload::before{content:"\F069"}.mdi-autorenew::before{content:"\F06A"}.mdi-av-timer::before{content:"\F06B"}.mdi-aws::before{content:"\FDF2"}.mdi-axe::before{content:"\F8C7"}.mdi-axis::before{content:"\FD24"}.mdi-axis-arrow::before{content:"\FD25"}.mdi-axis-arrow-lock::before{content:"\FD26"}.mdi-axis-lock::before{content:"\FD27"}.mdi-axis-x-arrow::before{content:"\FD28"}.mdi-axis-x-arrow-lock::before{content:"\FD29"}.mdi-axis-x-rotate-clockwise::before{content:"\FD2A"}.mdi-axis-x-rotate-counterclockwise::before{content:"\FD2B"}.mdi-axis-x-y-arrow-lock::before{content:"\FD2C"}.mdi-axis-y-arrow::before{content:"\FD2D"}.mdi-axis-y-arrow-lock::before{content:"\FD2E"}.mdi-axis-y-rotate-clockwise::before{content:"\FD2F"}.mdi-axis-y-rotate-counterclockwise::before{content:"\FD30"}.mdi-axis-z-arrow::before{content:"\FD31"}.mdi-axis-z-arrow-lock::before{content:"\FD32"}.mdi-axis-z-rotate-clockwise::before{content:"\FD33"}.mdi-axis-z-rotate-counterclockwise::before{content:"\FD34"}.mdi-azure::before{content:"\F804"}.mdi-azure-devops::before{content:"\F0091"}.mdi-babel::before{content:"\FA24"}.mdi-baby::before{content:"\F06C"}.mdi-baby-bottle::before{content:"\FF56"}.mdi-baby-bottle-outline::before{content:"\FF57"}.mdi-baby-carriage::before{content:"\F68E"}.mdi-baby-carriage-off::before{content:"\FFC0"}.mdi-baby-face::before{content:"\FE99"}.mdi-baby-face-outline::before{content:"\FE9A"}.mdi-backburger::before{content:"\F06D"}.mdi-backspace::before{content:"\F06E"}.mdi-backspace-outline::before{content:"\FB38"}.mdi-backspace-reverse::before{content:"\FE9B"}.mdi-backspace-reverse-outline::before{content:"\FE9C"}.mdi-backup-restore::before{content:"\F06F"}.mdi-bacteria::before{content:"\FEF2"}.mdi-bacteria-outline::before{content:"\FEF3"}.mdi-badminton::before{content:"\F850"}.mdi-bag-carry-on::before{content:"\FF58"}.mdi-bag-carry-on-check::before{content:"\FD41"}.mdi-bag-carry-on-off::before{content:"\FF59"}.mdi-bag-checked::before{content:"\FF5A"}.mdi-bag-personal::before{content:"\FDF3"}.mdi-bag-personal-off::before{content:"\FDF4"}.mdi-bag-personal-off-outline::before{content:"\FDF5"}.mdi-bag-personal-outline::before{content:"\FDF6"}.mdi-baguette::before{content:"\FF5B"}.mdi-balloon::before{content:"\FA25"}.mdi-ballot::before{content:"\F9C8"}.mdi-ballot-outline::before{content:"\F9C9"}.mdi-ballot-recount::before{content:"\FC15"}.mdi-ballot-recount-outline::before{content:"\FC16"}.mdi-bandage::before{content:"\FD8B"}.mdi-bandcamp::before{content:"\F674"}.mdi-bank::before{content:"\F070"}.mdi-bank-minus::before{content:"\FD8C"}.mdi-bank-outline::before{content:"\FE9D"}.mdi-bank-plus::before{content:"\FD8D"}.mdi-bank-remove::before{content:"\FD8E"}.mdi-bank-transfer::before{content:"\FA26"}.mdi-bank-transfer-in::before{content:"\FA27"}.mdi-bank-transfer-out::before{content:"\FA28"}.mdi-barcode::before{content:"\F071"}.mdi-barcode-off::before{content:"\F0261"}.mdi-barcode-scan::before{content:"\F072"}.mdi-barley::before{content:"\F073"}.mdi-barley-off::before{content:"\FB39"}.mdi-barn::before{content:"\FB3A"}.mdi-barrel::before{content:"\F074"}.mdi-baseball::before{content:"\F851"}.mdi-baseball-bat::before{content:"\F852"}.mdi-basecamp::before{content:"\F075"}.mdi-bash::before{content:"\F01AE"}.mdi-basket::before{content:"\F076"}.mdi-basket-fill::before{content:"\F077"}.mdi-basket-outline::before{content:"\F01AC"}.mdi-basket-unfill::before{content:"\F078"}.mdi-basketball::before{content:"\F805"}.mdi-basketball-hoop::before{content:"\FC17"}.mdi-basketball-hoop-outline::before{content:"\FC18"}.mdi-bat::before{content:"\FB3B"}.mdi-battery::before{content:"\F079"}.mdi-battery-10::before{content:"\F07A"}.mdi-battery-10-bluetooth::before{content:"\F93D"}.mdi-battery-20::before{content:"\F07B"}.mdi-battery-20-bluetooth::before{content:"\F93E"}.mdi-battery-30::before{content:"\F07C"}.mdi-battery-30-bluetooth::before{content:"\F93F"}.mdi-battery-40::before{content:"\F07D"}.mdi-battery-40-bluetooth::before{content:"\F940"}.mdi-battery-50::before{content:"\F07E"}.mdi-battery-50-bluetooth::before{content:"\F941"}.mdi-battery-60::before{content:"\F07F"}.mdi-battery-60-bluetooth::before{content:"\F942"}.mdi-battery-70::before{content:"\F080"}.mdi-battery-70-bluetooth::before{content:"\F943"}.mdi-battery-80::before{content:"\F081"}.mdi-battery-80-bluetooth::before{content:"\F944"}.mdi-battery-90::before{content:"\F082"}.mdi-battery-90-bluetooth::before{content:"\F945"}.mdi-battery-alert::before{content:"\F083"}.mdi-battery-alert-bluetooth::before{content:"\F946"}.mdi-battery-alert-variant::before{content:"\F00F7"}.mdi-battery-alert-variant-outline::before{content:"\F00F8"}.mdi-battery-bluetooth::before{content:"\F947"}.mdi-battery-bluetooth-variant::before{content:"\F948"}.mdi-battery-charging::before{content:"\F084"}.mdi-battery-charging-10::before{content:"\F89B"}.mdi-battery-charging-100::before{content:"\F085"}.mdi-battery-charging-20::before{content:"\F086"}.mdi-battery-charging-30::before{content:"\F087"}.mdi-battery-charging-40::before{content:"\F088"}.mdi-battery-charging-50::before{content:"\F89C"}.mdi-battery-charging-60::before{content:"\F089"}.mdi-battery-charging-70::before{content:"\F89D"}.mdi-battery-charging-80::before{content:"\F08A"}.mdi-battery-charging-90::before{content:"\F08B"}.mdi-battery-charging-high::before{content:"\F02D1"}.mdi-battery-charging-low::before{content:"\F02CF"}.mdi-battery-charging-medium::before{content:"\F02D0"}.mdi-battery-charging-outline::before{content:"\F89E"}.mdi-battery-charging-wireless::before{content:"\F806"}.mdi-battery-charging-wireless-10::before{content:"\F807"}.mdi-battery-charging-wireless-20::before{content:"\F808"}.mdi-battery-charging-wireless-30::before{content:"\F809"}.mdi-battery-charging-wireless-40::before{content:"\F80A"}.mdi-battery-charging-wireless-50::before{content:"\F80B"}.mdi-battery-charging-wireless-60::before{content:"\F80C"}.mdi-battery-charging-wireless-70::before{content:"\F80D"}.mdi-battery-charging-wireless-80::before{content:"\F80E"}.mdi-battery-charging-wireless-90::before{content:"\F80F"}.mdi-battery-charging-wireless-alert::before{content:"\F810"}.mdi-battery-charging-wireless-outline::before{content:"\F811"}.mdi-battery-heart::before{content:"\F023A"}.mdi-battery-heart-outline::before{content:"\F023B"}.mdi-battery-heart-variant::before{content:"\F023C"}.mdi-battery-high::before{content:"\F02CE"}.mdi-battery-low::before{content:"\F02CC"}.mdi-battery-medium::before{content:"\F02CD"}.mdi-battery-minus::before{content:"\F08C"}.mdi-battery-negative::before{content:"\F08D"}.mdi-battery-off::before{content:"\F0288"}.mdi-battery-off-outline::before{content:"\F0289"}.mdi-battery-outline::before{content:"\F08E"}.mdi-battery-plus::before{content:"\F08F"}.mdi-battery-positive::before{content:"\F090"}.mdi-battery-unknown::before{content:"\F091"}.mdi-battery-unknown-bluetooth::before{content:"\F949"}.mdi-battlenet::before{content:"\FB3C"}.mdi-beach::before{content:"\F092"}.mdi-beaker::before{content:"\FCC6"}.mdi-beaker-alert::before{content:"\F0254"}.mdi-beaker-alert-outline::before{content:"\F0255"}.mdi-beaker-check::before{content:"\F0256"}.mdi-beaker-check-outline::before{content:"\F0257"}.mdi-beaker-minus::before{content:"\F0258"}.mdi-beaker-minus-outline::before{content:"\F0259"}.mdi-beaker-outline::before{content:"\F68F"}.mdi-beaker-plus::before{content:"\F025A"}.mdi-beaker-plus-outline::before{content:"\F025B"}.mdi-beaker-question::before{content:"\F025C"}.mdi-beaker-question-outline::before{content:"\F025D"}.mdi-beaker-remove::before{content:"\F025E"}.mdi-beaker-remove-outline::before{content:"\F025F"}.mdi-beats::before{content:"\F097"}.mdi-bed-double::before{content:"\F0092"}.mdi-bed-double-outline::before{content:"\F0093"}.mdi-bed-empty::before{content:"\F89F"}.mdi-bed-king::before{content:"\F0094"}.mdi-bed-king-outline::before{content:"\F0095"}.mdi-bed-queen::before{content:"\F0096"}.mdi-bed-queen-outline::before{content:"\F0097"}.mdi-bed-single::before{content:"\F0098"}.mdi-bed-single-outline::before{content:"\F0099"}.mdi-bee::before{content:"\FFC1"}.mdi-bee-flower::before{content:"\FFC2"}.mdi-beehive-outline::before{content:"\F00F9"}.mdi-beer::before{content:"\F098"}.mdi-beer-outline::before{content:"\F0337"}.mdi-behance::before{content:"\F099"}.mdi-bell::before{content:"\F09A"}.mdi-bell-alert::before{content:"\FD35"}.mdi-bell-alert-outline::before{content:"\FE9E"}.mdi-bell-check::before{content:"\F0210"}.mdi-bell-check-outline::before{content:"\F0211"}.mdi-bell-circle::before{content:"\FD36"}.mdi-bell-circle-outline::before{content:"\FD37"}.mdi-bell-off::before{content:"\F09B"}.mdi-bell-off-outline::before{content:"\FA90"}.mdi-bell-outline::before{content:"\F09C"}.mdi-bell-plus::before{content:"\F09D"}.mdi-bell-plus-outline::before{content:"\FA91"}.mdi-bell-ring::before{content:"\F09E"}.mdi-bell-ring-outline::before{content:"\F09F"}.mdi-bell-sleep::before{content:"\F0A0"}.mdi-bell-sleep-outline::before{content:"\FA92"}.mdi-beta::before{content:"\F0A1"}.mdi-betamax::before{content:"\F9CA"}.mdi-biathlon::before{content:"\FDF7"}.mdi-bible::before{content:"\F0A2"}.mdi-bicycle::before{content:"\F00C7"}.mdi-bicycle-basket::before{content:"\F0260"}.mdi-bike::before{content:"\F0A3"}.mdi-bike-fast::before{content:"\F014A"}.mdi-billboard::before{content:"\F0032"}.mdi-billiards::before{content:"\FB3D"}.mdi-billiards-rack::before{content:"\FB3E"}.mdi-bing::before{content:"\F0A4"}.mdi-binoculars::before{content:"\F0A5"}.mdi-bio::before{content:"\F0A6"}.mdi-biohazard::before{content:"\F0A7"}.mdi-bitbucket::before{content:"\F0A8"}.mdi-bitcoin::before{content:"\F812"}.mdi-black-mesa::before{content:"\F0A9"}.mdi-blackberry::before{content:"\F0AA"}.mdi-blender::before{content:"\FCC7"}.mdi-blender-software::before{content:"\F0AB"}.mdi-blinds::before{content:"\F0AC"}.mdi-blinds-open::before{content:"\F0033"}.mdi-block-helper::before{content:"\F0AD"}.mdi-blogger::before{content:"\F0AE"}.mdi-blood-bag::before{content:"\FCC8"}.mdi-bluetooth::before{content:"\F0AF"}.mdi-bluetooth-audio::before{content:"\F0B0"}.mdi-bluetooth-connect::before{content:"\F0B1"}.mdi-bluetooth-off::before{content:"\F0B2"}.mdi-bluetooth-settings::before{content:"\F0B3"}.mdi-bluetooth-transfer::before{content:"\F0B4"}.mdi-blur::before{content:"\F0B5"}.mdi-blur-linear::before{content:"\F0B6"}.mdi-blur-off::before{content:"\F0B7"}.mdi-blur-radial::before{content:"\F0B8"}.mdi-bolnisi-cross::before{content:"\FCC9"}.mdi-bolt::before{content:"\FD8F"}.mdi-bomb::before{content:"\F690"}.mdi-bomb-off::before{content:"\F6C4"}.mdi-bone::before{content:"\F0B9"}.mdi-book::before{content:"\F0BA"}.mdi-book-information-variant::before{content:"\F009A"}.mdi-book-lock::before{content:"\F799"}.mdi-book-lock-open::before{content:"\F79A"}.mdi-book-minus::before{content:"\F5D9"}.mdi-book-minus-multiple::before{content:"\FA93"}.mdi-book-multiple::before{content:"\F0BB"}.mdi-book-open::before{content:"\F0BD"}.mdi-book-open-outline::before{content:"\FB3F"}.mdi-book-open-page-variant::before{content:"\F5DA"}.mdi-book-open-variant::before{content:"\F0BE"}.mdi-book-outline::before{content:"\FB40"}.mdi-book-play::before{content:"\FE9F"}.mdi-book-play-outline::before{content:"\FEA0"}.mdi-book-plus::before{content:"\F5DB"}.mdi-book-plus-multiple::before{content:"\FA94"}.mdi-book-remove::before{content:"\FA96"}.mdi-book-remove-multiple::before{content:"\FA95"}.mdi-book-search::before{content:"\FEA1"}.mdi-book-search-outline::before{content:"\FEA2"}.mdi-book-variant::before{content:"\F0BF"}.mdi-book-variant-multiple::before{content:"\F0BC"}.mdi-bookmark::before{content:"\F0C0"}.mdi-bookmark-check::before{content:"\F0C1"}.mdi-bookmark-check-outline::before{content:"\F03A6"}.mdi-bookmark-minus::before{content:"\F9CB"}.mdi-bookmark-minus-outline::before{content:"\F9CC"}.mdi-bookmark-multiple::before{content:"\FDF8"}.mdi-bookmark-multiple-outline::before{content:"\FDF9"}.mdi-bookmark-music::before{content:"\F0C2"}.mdi-bookmark-music-outline::before{content:"\F03A4"}.mdi-bookmark-off::before{content:"\F9CD"}.mdi-bookmark-off-outline::before{content:"\F9CE"}.mdi-bookmark-outline::before{content:"\F0C3"}.mdi-bookmark-plus::before{content:"\F0C5"}.mdi-bookmark-plus-outline::before{content:"\F0C4"}.mdi-bookmark-remove::before{content:"\F0C6"}.mdi-bookmark-remove-outline::before{content:"\F03A5"}.mdi-bookshelf::before{content:"\F028A"}.mdi-boom-gate::before{content:"\FEA3"}.mdi-boom-gate-alert::before{content:"\FEA4"}.mdi-boom-gate-alert-outline::before{content:"\FEA5"}.mdi-boom-gate-down::before{content:"\FEA6"}.mdi-boom-gate-down-outline::before{content:"\FEA7"}.mdi-boom-gate-outline::before{content:"\FEA8"}.mdi-boom-gate-up::before{content:"\FEA9"}.mdi-boom-gate-up-outline::before{content:"\FEAA"}.mdi-boombox::before{content:"\F5DC"}.mdi-boomerang::before{content:"\F00FA"}.mdi-bootstrap::before{content:"\F6C5"}.mdi-border-all::before{content:"\F0C7"}.mdi-border-all-variant::before{content:"\F8A0"}.mdi-border-bottom::before{content:"\F0C8"}.mdi-border-bottom-variant::before{content:"\F8A1"}.mdi-border-color::before{content:"\F0C9"}.mdi-border-horizontal::before{content:"\F0CA"}.mdi-border-inside::before{content:"\F0CB"}.mdi-border-left::before{content:"\F0CC"}.mdi-border-left-variant::before{content:"\F8A2"}.mdi-border-none::before{content:"\F0CD"}.mdi-border-none-variant::before{content:"\F8A3"}.mdi-border-outside::before{content:"\F0CE"}.mdi-border-right::before{content:"\F0CF"}.mdi-border-right-variant::before{content:"\F8A4"}.mdi-border-style::before{content:"\F0D0"}.mdi-border-top::before{content:"\F0D1"}.mdi-border-top-variant::before{content:"\F8A5"}.mdi-border-vertical::before{content:"\F0D2"}.mdi-bottle-soda::before{content:"\F009B"}.mdi-bottle-soda-classic::before{content:"\F009C"}.mdi-bottle-soda-classic-outline::before{content:"\F038E"}.mdi-bottle-soda-outline::before{content:"\F009D"}.mdi-bottle-tonic::before{content:"\F0159"}.mdi-bottle-tonic-outline::before{content:"\F015A"}.mdi-bottle-tonic-plus::before{content:"\F015B"}.mdi-bottle-tonic-plus-outline::before{content:"\F015C"}.mdi-bottle-tonic-skull::before{content:"\F015D"}.mdi-bottle-tonic-skull-outline::before{content:"\F015E"}.mdi-bottle-wine::before{content:"\F853"}.mdi-bottle-wine-outline::before{content:"\F033B"}.mdi-bow-tie::before{content:"\F677"}.mdi-bowl::before{content:"\F617"}.mdi-bowling::before{content:"\F0D3"}.mdi-box::before{content:"\F0D4"}.mdi-box-cutter::before{content:"\F0D5"}.mdi-box-shadow::before{content:"\F637"}.mdi-boxing-glove::before{content:"\FB41"}.mdi-braille::before{content:"\F9CF"}.mdi-brain::before{content:"\F9D0"}.mdi-bread-slice::before{content:"\FCCA"}.mdi-bread-slice-outline::before{content:"\FCCB"}.mdi-bridge::before{content:"\F618"}.mdi-briefcase::before{content:"\F0D6"}.mdi-briefcase-account::before{content:"\FCCC"}.mdi-briefcase-account-outline::before{content:"\FCCD"}.mdi-briefcase-check::before{content:"\F0D7"}.mdi-briefcase-check-outline::before{content:"\F0349"}.mdi-briefcase-clock::before{content:"\F00FB"}.mdi-briefcase-clock-outline::before{content:"\F00FC"}.mdi-briefcase-download::before{content:"\F0D8"}.mdi-briefcase-download-outline::before{content:"\FC19"}.mdi-briefcase-edit::before{content:"\FA97"}.mdi-briefcase-edit-outline::before{content:"\FC1A"}.mdi-briefcase-minus::before{content:"\FA29"}.mdi-briefcase-minus-outline::before{content:"\FC1B"}.mdi-briefcase-outline::before{content:"\F813"}.mdi-briefcase-plus::before{content:"\FA2A"}.mdi-briefcase-plus-outline::before{content:"\FC1C"}.mdi-briefcase-remove::before{content:"\FA2B"}.mdi-briefcase-remove-outline::before{content:"\FC1D"}.mdi-briefcase-search::before{content:"\FA2C"}.mdi-briefcase-search-outline::before{content:"\FC1E"}.mdi-briefcase-upload::before{content:"\F0D9"}.mdi-briefcase-upload-outline::before{content:"\FC1F"}.mdi-brightness-1::before{content:"\F0DA"}.mdi-brightness-2::before{content:"\F0DB"}.mdi-brightness-3::before{content:"\F0DC"}.mdi-brightness-4::before{content:"\F0DD"}.mdi-brightness-5::before{content:"\F0DE"}.mdi-brightness-6::before{content:"\F0DF"}.mdi-brightness-7::before{content:"\F0E0"}.mdi-brightness-auto::before{content:"\F0E1"}.mdi-brightness-percent::before{content:"\FCCE"}.mdi-broom::before{content:"\F0E2"}.mdi-brush::before{content:"\F0E3"}.mdi-buddhism::before{content:"\F94A"}.mdi-buffer::before{content:"\F619"}.mdi-bug::before{content:"\F0E4"}.mdi-bug-check::before{content:"\FA2D"}.mdi-bug-check-outline::before{content:"\FA2E"}.mdi-bug-outline::before{content:"\FA2F"}.mdi-bugle::before{content:"\FD90"}.mdi-bulldozer::before{content:"\FB07"}.mdi-bullet::before{content:"\FCCF"}.mdi-bulletin-board::before{content:"\F0E5"}.mdi-bullhorn::before{content:"\F0E6"}.mdi-bullhorn-outline::before{content:"\FB08"}.mdi-bullseye::before{content:"\F5DD"}.mdi-bullseye-arrow::before{content:"\F8C8"}.mdi-bulma::before{content:"\F0312"}.mdi-bunk-bed::before{content:"\F032D"}.mdi-bus::before{content:"\F0E7"}.mdi-bus-alert::before{content:"\FA98"}.mdi-bus-articulated-end::before{content:"\F79B"}.mdi-bus-articulated-front::before{content:"\F79C"}.mdi-bus-clock::before{content:"\F8C9"}.mdi-bus-double-decker::before{content:"\F79D"}.mdi-bus-marker::before{content:"\F023D"}.mdi-bus-multiple::before{content:"\FF5C"}.mdi-bus-school::before{content:"\F79E"}.mdi-bus-side::before{content:"\F79F"}.mdi-bus-stop::before{content:"\F0034"}.mdi-bus-stop-covered::before{content:"\F0035"}.mdi-bus-stop-uncovered::before{content:"\F0036"}.mdi-cached::before{content:"\F0E8"}.mdi-cactus::before{content:"\FD91"}.mdi-cake::before{content:"\F0E9"}.mdi-cake-layered::before{content:"\F0EA"}.mdi-cake-variant::before{content:"\F0EB"}.mdi-calculator::before{content:"\F0EC"}.mdi-calculator-variant::before{content:"\FA99"}.mdi-calendar::before{content:"\F0ED"}.mdi-calendar-account::before{content:"\FEF4"}.mdi-calendar-account-outline::before{content:"\FEF5"}.mdi-calendar-alert::before{content:"\FA30"}.mdi-calendar-arrow-left::before{content:"\F015F"}.mdi-calendar-arrow-right::before{content:"\F0160"}.mdi-calendar-blank::before{content:"\F0EE"}.mdi-calendar-blank-multiple::before{content:"\F009E"}.mdi-calendar-blank-outline::before{content:"\FB42"}.mdi-calendar-check::before{content:"\F0EF"}.mdi-calendar-check-outline::before{content:"\FC20"}.mdi-calendar-clock::before{content:"\F0F0"}.mdi-calendar-edit::before{content:"\F8A6"}.mdi-calendar-export::before{content:"\FB09"}.mdi-calendar-heart::before{content:"\F9D1"}.mdi-calendar-import::before{content:"\FB0A"}.mdi-calendar-minus::before{content:"\FD38"}.mdi-calendar-month::before{content:"\FDFA"}.mdi-calendar-month-outline::before{content:"\FDFB"}.mdi-calendar-multiple::before{content:"\F0F1"}.mdi-calendar-multiple-check::before{content:"\F0F2"}.mdi-calendar-multiselect::before{content:"\FA31"}.mdi-calendar-outline::before{content:"\FB43"}.mdi-calendar-plus::before{content:"\F0F3"}.mdi-calendar-question::before{content:"\F691"}.mdi-calendar-range::before{content:"\F678"}.mdi-calendar-range-outline::before{content:"\FB44"}.mdi-calendar-remove::before{content:"\F0F4"}.mdi-calendar-remove-outline::before{content:"\FC21"}.mdi-calendar-repeat::before{content:"\FEAB"}.mdi-calendar-repeat-outline::before{content:"\FEAC"}.mdi-calendar-search::before{content:"\F94B"}.mdi-calendar-star::before{content:"\F9D2"}.mdi-calendar-text::before{content:"\F0F5"}.mdi-calendar-text-outline::before{content:"\FC22"}.mdi-calendar-today::before{content:"\F0F6"}.mdi-calendar-week::before{content:"\FA32"}.mdi-calendar-week-begin::before{content:"\FA33"}.mdi-calendar-weekend::before{content:"\FEF6"}.mdi-calendar-weekend-outline::before{content:"\FEF7"}.mdi-call-made::before{content:"\F0F7"}.mdi-call-merge::before{content:"\F0F8"}.mdi-call-missed::before{content:"\F0F9"}.mdi-call-received::before{content:"\F0FA"}.mdi-call-split::before{content:"\F0FB"}.mdi-camcorder::before{content:"\F0FC"}.mdi-camcorder-box::before{content:"\F0FD"}.mdi-camcorder-box-off::before{content:"\F0FE"}.mdi-camcorder-off::before{content:"\F0FF"}.mdi-camera::before{content:"\F100"}.mdi-camera-account::before{content:"\F8CA"}.mdi-camera-burst::before{content:"\F692"}.mdi-camera-control::before{content:"\FB45"}.mdi-camera-enhance::before{content:"\F101"}.mdi-camera-enhance-outline::before{content:"\FB46"}.mdi-camera-front::before{content:"\F102"}.mdi-camera-front-variant::before{content:"\F103"}.mdi-camera-gopro::before{content:"\F7A0"}.mdi-camera-image::before{content:"\F8CB"}.mdi-camera-iris::before{content:"\F104"}.mdi-camera-metering-center::before{content:"\F7A1"}.mdi-camera-metering-matrix::before{content:"\F7A2"}.mdi-camera-metering-partial::before{content:"\F7A3"}.mdi-camera-metering-spot::before{content:"\F7A4"}.mdi-camera-off::before{content:"\F5DF"}.mdi-camera-outline::before{content:"\FD39"}.mdi-camera-party-mode::before{content:"\F105"}.mdi-camera-plus::before{content:"\FEF8"}.mdi-camera-plus-outline::before{content:"\FEF9"}.mdi-camera-rear::before{content:"\F106"}.mdi-camera-rear-variant::before{content:"\F107"}.mdi-camera-retake::before{content:"\FDFC"}.mdi-camera-retake-outline::before{content:"\FDFD"}.mdi-camera-switch::before{content:"\F108"}.mdi-camera-timer::before{content:"\F109"}.mdi-camera-wireless::before{content:"\FD92"}.mdi-camera-wireless-outline::before{content:"\FD93"}.mdi-campfire::before{content:"\FEFA"}.mdi-cancel::before{content:"\F739"}.mdi-candle::before{content:"\F5E2"}.mdi-candycane::before{content:"\F10A"}.mdi-cannabis::before{content:"\F7A5"}.mdi-caps-lock::before{content:"\FA9A"}.mdi-car::before{content:"\F10B"}.mdi-car-2-plus::before{content:"\F0037"}.mdi-car-3-plus::before{content:"\F0038"}.mdi-car-back::before{content:"\FDFE"}.mdi-car-battery::before{content:"\F10C"}.mdi-car-brake-abs::before{content:"\FC23"}.mdi-car-brake-alert::before{content:"\FC24"}.mdi-car-brake-hold::before{content:"\FD3A"}.mdi-car-brake-parking::before{content:"\FD3B"}.mdi-car-brake-retarder::before{content:"\F0039"}.mdi-car-child-seat::before{content:"\FFC3"}.mdi-car-clutch::before{content:"\F003A"}.mdi-car-connected::before{content:"\F10D"}.mdi-car-convertible::before{content:"\F7A6"}.mdi-car-coolant-level::before{content:"\F003B"}.mdi-car-cruise-control::before{content:"\FD3C"}.mdi-car-defrost-front::before{content:"\FD3D"}.mdi-car-defrost-rear::before{content:"\FD3E"}.mdi-car-door::before{content:"\FB47"}.mdi-car-door-lock::before{content:"\F00C8"}.mdi-car-electric::before{content:"\FB48"}.mdi-car-esp::before{content:"\FC25"}.mdi-car-estate::before{content:"\F7A7"}.mdi-car-hatchback::before{content:"\F7A8"}.mdi-car-info::before{content:"\F01E9"}.mdi-car-key::before{content:"\FB49"}.mdi-car-light-dimmed::before{content:"\FC26"}.mdi-car-light-fog::before{content:"\FC27"}.mdi-car-light-high::before{content:"\FC28"}.mdi-car-limousine::before{content:"\F8CC"}.mdi-car-multiple::before{content:"\FB4A"}.mdi-car-off::before{content:"\FDFF"}.mdi-car-parking-lights::before{content:"\FD3F"}.mdi-car-pickup::before{content:"\F7A9"}.mdi-car-seat::before{content:"\FFC4"}.mdi-car-seat-cooler::before{content:"\FFC5"}.mdi-car-seat-heater::before{content:"\FFC6"}.mdi-car-shift-pattern::before{content:"\FF5D"}.mdi-car-side::before{content:"\F7AA"}.mdi-car-sports::before{content:"\F7AB"}.mdi-car-tire-alert::before{content:"\FC29"}.mdi-car-traction-control::before{content:"\FD40"}.mdi-car-turbocharger::before{content:"\F003C"}.mdi-car-wash::before{content:"\F10E"}.mdi-car-windshield::before{content:"\F003D"}.mdi-car-windshield-outline::before{content:"\F003E"}.mdi-caravan::before{content:"\F7AC"}.mdi-card::before{content:"\FB4B"}.mdi-card-bulleted::before{content:"\FB4C"}.mdi-card-bulleted-off::before{content:"\FB4D"}.mdi-card-bulleted-off-outline::before{content:"\FB4E"}.mdi-card-bulleted-outline::before{content:"\FB4F"}.mdi-card-bulleted-settings::before{content:"\FB50"}.mdi-card-bulleted-settings-outline::before{content:"\FB51"}.mdi-card-outline::before{content:"\FB52"}.mdi-card-plus::before{content:"\F022A"}.mdi-card-plus-outline::before{content:"\F022B"}.mdi-card-search::before{content:"\F009F"}.mdi-card-search-outline::before{content:"\F00A0"}.mdi-card-text::before{content:"\FB53"}.mdi-card-text-outline::before{content:"\FB54"}.mdi-cards::before{content:"\F638"}.mdi-cards-club::before{content:"\F8CD"}.mdi-cards-diamond::before{content:"\F8CE"}.mdi-cards-diamond-outline::before{content:"\F003F"}.mdi-cards-heart::before{content:"\F8CF"}.mdi-cards-outline::before{content:"\F639"}.mdi-cards-playing-outline::before{content:"\F63A"}.mdi-cards-spade::before{content:"\F8D0"}.mdi-cards-variant::before{content:"\F6C6"}.mdi-carrot::before{content:"\F10F"}.mdi-cart::before{content:"\F110"}.mdi-cart-arrow-down::before{content:"\FD42"}.mdi-cart-arrow-right::before{content:"\FC2A"}.mdi-cart-arrow-up::before{content:"\FD43"}.mdi-cart-minus::before{content:"\FD44"}.mdi-cart-off::before{content:"\F66B"}.mdi-cart-outline::before{content:"\F111"}.mdi-cart-plus::before{content:"\F112"}.mdi-cart-remove::before{content:"\FD45"}.mdi-case-sensitive-alt::before{content:"\F113"}.mdi-cash::before{content:"\F114"}.mdi-cash-100::before{content:"\F115"}.mdi-cash-marker::before{content:"\FD94"}.mdi-cash-minus::before{content:"\F028B"}.mdi-cash-multiple::before{content:"\F116"}.mdi-cash-plus::before{content:"\F028C"}.mdi-cash-refund::before{content:"\FA9B"}.mdi-cash-register::before{content:"\FCD0"}.mdi-cash-remove::before{content:"\F028D"}.mdi-cash-usd::before{content:"\F01A1"}.mdi-cash-usd-outline::before{content:"\F117"}.mdi-cassette::before{content:"\F9D3"}.mdi-cast::before{content:"\F118"}.mdi-cast-audio::before{content:"\F0040"}.mdi-cast-connected::before{content:"\F119"}.mdi-cast-education::before{content:"\FE6D"}.mdi-cast-off::before{content:"\F789"}.mdi-castle::before{content:"\F11A"}.mdi-cat::before{content:"\F11B"}.mdi-cctv::before{content:"\F7AD"}.mdi-ceiling-light::before{content:"\F768"}.mdi-cellphone::before{content:"\F11C"}.mdi-cellphone-android::before{content:"\F11D"}.mdi-cellphone-arrow-down::before{content:"\F9D4"}.mdi-cellphone-basic::before{content:"\F11E"}.mdi-cellphone-dock::before{content:"\F11F"}.mdi-cellphone-erase::before{content:"\F94C"}.mdi-cellphone-information::before{content:"\FF5E"}.mdi-cellphone-iphone::before{content:"\F120"}.mdi-cellphone-key::before{content:"\F94D"}.mdi-cellphone-link::before{content:"\F121"}.mdi-cellphone-link-off::before{content:"\F122"}.mdi-cellphone-lock::before{content:"\F94E"}.mdi-cellphone-message::before{content:"\F8D2"}.mdi-cellphone-message-off::before{content:"\F00FD"}.mdi-cellphone-nfc::before{content:"\FEAD"}.mdi-cellphone-nfc-off::before{content:"\F0303"}.mdi-cellphone-off::before{content:"\F94F"}.mdi-cellphone-play::before{content:"\F0041"}.mdi-cellphone-screenshot::before{content:"\FA34"}.mdi-cellphone-settings::before{content:"\F123"}.mdi-cellphone-settings-variant::before{content:"\F950"}.mdi-cellphone-sound::before{content:"\F951"}.mdi-cellphone-text::before{content:"\F8D1"}.mdi-cellphone-wireless::before{content:"\F814"}.mdi-celtic-cross::before{content:"\FCD1"}.mdi-centos::before{content:"\F0145"}.mdi-certificate::before{content:"\F124"}.mdi-certificate-outline::before{content:"\F01B3"}.mdi-chair-rolling::before{content:"\FFBA"}.mdi-chair-school::before{content:"\F125"}.mdi-charity::before{content:"\FC2B"}.mdi-chart-arc::before{content:"\F126"}.mdi-chart-areaspline::before{content:"\F127"}.mdi-chart-areaspline-variant::before{content:"\FEAE"}.mdi-chart-bar::before{content:"\F128"}.mdi-chart-bar-stacked::before{content:"\F769"}.mdi-chart-bell-curve::before{content:"\FC2C"}.mdi-chart-bell-curve-cumulative::before{content:"\FFC7"}.mdi-chart-bubble::before{content:"\F5E3"}.mdi-chart-donut::before{content:"\F7AE"}.mdi-chart-donut-variant::before{content:"\F7AF"}.mdi-chart-gantt::before{content:"\F66C"}.mdi-chart-histogram::before{content:"\F129"}.mdi-chart-line::before{content:"\F12A"}.mdi-chart-line-stacked::before{content:"\F76A"}.mdi-chart-line-variant::before{content:"\F7B0"}.mdi-chart-multiline::before{content:"\F8D3"}.mdi-chart-multiple::before{content:"\F023E"}.mdi-chart-pie::before{content:"\F12B"}.mdi-chart-ppf::before{content:"\F03AB"}.mdi-chart-scatter-plot::before{content:"\FEAF"}.mdi-chart-scatter-plot-hexbin::before{content:"\F66D"}.mdi-chart-snakey::before{content:"\F020A"}.mdi-chart-snakey-variant::before{content:"\F020B"}.mdi-chart-timeline::before{content:"\F66E"}.mdi-chart-timeline-variant::before{content:"\FEB0"}.mdi-chart-tree::before{content:"\FEB1"}.mdi-chat::before{content:"\FB55"}.mdi-chat-alert::before{content:"\FB56"}.mdi-chat-alert-outline::before{content:"\F02F4"}.mdi-chat-outline::before{content:"\FEFB"}.mdi-chat-processing::before{content:"\FB57"}.mdi-chat-processing-outline::before{content:"\F02F5"}.mdi-chat-sleep::before{content:"\F02FC"}.mdi-chat-sleep-outline::before{content:"\F02FD"}.mdi-check::before{content:"\F12C"}.mdi-check-all::before{content:"\F12D"}.mdi-check-bold::before{content:"\FE6E"}.mdi-check-box-multiple-outline::before{content:"\FC2D"}.mdi-check-box-outline::before{content:"\FC2E"}.mdi-check-circle::before{content:"\F5E0"}.mdi-check-circle-outline::before{content:"\F5E1"}.mdi-check-decagram::before{content:"\F790"}.mdi-check-network::before{content:"\FC2F"}.mdi-check-network-outline::before{content:"\FC30"}.mdi-check-outline::before{content:"\F854"}.mdi-check-underline::before{content:"\FE70"}.mdi-check-underline-circle::before{content:"\FE71"}.mdi-check-underline-circle-outline::before{content:"\FE72"}.mdi-checkbook::before{content:"\FA9C"}.mdi-checkbox-blank::before{content:"\F12E"}.mdi-checkbox-blank-circle::before{content:"\F12F"}.mdi-checkbox-blank-circle-outline::before{content:"\F130"}.mdi-checkbox-blank-off::before{content:"\F0317"}.mdi-checkbox-blank-off-outline::before{content:"\F0318"}.mdi-checkbox-blank-outline::before{content:"\F131"}.mdi-checkbox-intermediate::before{content:"\F855"}.mdi-checkbox-marked::before{content:"\F132"}.mdi-checkbox-marked-circle::before{content:"\F133"}.mdi-checkbox-marked-circle-outline::before{content:"\F134"}.mdi-checkbox-marked-outline::before{content:"\F135"}.mdi-checkbox-multiple-blank::before{content:"\F136"}.mdi-checkbox-multiple-blank-circle::before{content:"\F63B"}.mdi-checkbox-multiple-blank-circle-outline::before{content:"\F63C"}.mdi-checkbox-multiple-blank-outline::before{content:"\F137"}.mdi-checkbox-multiple-marked::before{content:"\F138"}.mdi-checkbox-multiple-marked-circle::before{content:"\F63D"}.mdi-checkbox-multiple-marked-circle-outline::before{content:"\F63E"}.mdi-checkbox-multiple-marked-outline::before{content:"\F139"}.mdi-checkerboard::before{content:"\F13A"}.mdi-checkerboard-minus::before{content:"\F022D"}.mdi-checkerboard-plus::before{content:"\F022C"}.mdi-checkerboard-remove::before{content:"\F022E"}.mdi-cheese::before{content:"\F02E4"}.mdi-chef-hat::before{content:"\FB58"}.mdi-chemical-weapon::before{content:"\F13B"}.mdi-chess-bishop::before{content:"\F85B"}.mdi-chess-king::before{content:"\F856"}.mdi-chess-knight::before{content:"\F857"}.mdi-chess-pawn::before{content:"\F858"}.mdi-chess-queen::before{content:"\F859"}.mdi-chess-rook::before{content:"\F85A"}.mdi-chevron-double-down::before{content:"\F13C"}.mdi-chevron-double-left::before{content:"\F13D"}.mdi-chevron-double-right::before{content:"\F13E"}.mdi-chevron-double-up::before{content:"\F13F"}.mdi-chevron-down::before{content:"\F140"}.mdi-chevron-down-box::before{content:"\F9D5"}.mdi-chevron-down-box-outline::before{content:"\F9D6"}.mdi-chevron-down-circle::before{content:"\FB0B"}.mdi-chevron-down-circle-outline::before{content:"\FB0C"}.mdi-chevron-left::before{content:"\F141"}.mdi-chevron-left-box::before{content:"\F9D7"}.mdi-chevron-left-box-outline::before{content:"\F9D8"}.mdi-chevron-left-circle::before{content:"\FB0D"}.mdi-chevron-left-circle-outline::before{content:"\FB0E"}.mdi-chevron-right::before{content:"\F142"}.mdi-chevron-right-box::before{content:"\F9D9"}.mdi-chevron-right-box-outline::before{content:"\F9DA"}.mdi-chevron-right-circle::before{content:"\FB0F"}.mdi-chevron-right-circle-outline::before{content:"\FB10"}.mdi-chevron-triple-down::before{content:"\FD95"}.mdi-chevron-triple-left::before{content:"\FD96"}.mdi-chevron-triple-right::before{content:"\FD97"}.mdi-chevron-triple-up::before{content:"\FD98"}.mdi-chevron-up::before{content:"\F143"}.mdi-chevron-up-box::before{content:"\F9DB"}.mdi-chevron-up-box-outline::before{content:"\F9DC"}.mdi-chevron-up-circle::before{content:"\FB11"}.mdi-chevron-up-circle-outline::before{content:"\FB12"}.mdi-chili-hot::before{content:"\F7B1"}.mdi-chili-medium::before{content:"\F7B2"}.mdi-chili-mild::before{content:"\F7B3"}.mdi-chip::before{content:"\F61A"}.mdi-christianity::before{content:"\F952"}.mdi-christianity-outline::before{content:"\FCD2"}.mdi-church::before{content:"\F144"}.mdi-cigar::before{content:"\F01B4"}.mdi-circle::before{content:"\F764"}.mdi-circle-double::before{content:"\FEB2"}.mdi-circle-edit-outline::before{content:"\F8D4"}.mdi-circle-expand::before{content:"\FEB3"}.mdi-circle-medium::before{content:"\F9DD"}.mdi-circle-off-outline::before{content:"\F00FE"}.mdi-circle-outline::before{content:"\F765"}.mdi-circle-slice-1::before{content:"\FA9D"}.mdi-circle-slice-2::before{content:"\FA9E"}.mdi-circle-slice-3::before{content:"\FA9F"}.mdi-circle-slice-4::before{content:"\FAA0"}.mdi-circle-slice-5::before{content:"\FAA1"}.mdi-circle-slice-6::before{content:"\FAA2"}.mdi-circle-slice-7::before{content:"\FAA3"}.mdi-circle-slice-8::before{content:"\FAA4"}.mdi-circle-small::before{content:"\F9DE"}.mdi-circular-saw::before{content:"\FE73"}.mdi-cisco-webex::before{content:"\F145"}.mdi-city::before{content:"\F146"}.mdi-city-variant::before{content:"\FA35"}.mdi-city-variant-outline::before{content:"\FA36"}.mdi-clipboard::before{content:"\F147"}.mdi-clipboard-account::before{content:"\F148"}.mdi-clipboard-account-outline::before{content:"\FC31"}.mdi-clipboard-alert::before{content:"\F149"}.mdi-clipboard-alert-outline::before{content:"\FCD3"}.mdi-clipboard-arrow-down::before{content:"\F14A"}.mdi-clipboard-arrow-down-outline::before{content:"\FC32"}.mdi-clipboard-arrow-left::before{content:"\F14B"}.mdi-clipboard-arrow-left-outline::before{content:"\FCD4"}.mdi-clipboard-arrow-right::before{content:"\FCD5"}.mdi-clipboard-arrow-right-outline::before{content:"\FCD6"}.mdi-clipboard-arrow-up::before{content:"\FC33"}.mdi-clipboard-arrow-up-outline::before{content:"\FC34"}.mdi-clipboard-check::before{content:"\F14C"}.mdi-clipboard-check-multiple::before{content:"\F028E"}.mdi-clipboard-check-multiple-outline::before{content:"\F028F"}.mdi-clipboard-check-outline::before{content:"\F8A7"}.mdi-clipboard-file::before{content:"\F0290"}.mdi-clipboard-file-outline::before{content:"\F0291"}.mdi-clipboard-flow::before{content:"\F6C7"}.mdi-clipboard-flow-outline::before{content:"\F0142"}.mdi-clipboard-list::before{content:"\F00FF"}.mdi-clipboard-list-outline::before{content:"\F0100"}.mdi-clipboard-multiple::before{content:"\F0292"}.mdi-clipboard-multiple-outline::before{content:"\F0293"}.mdi-clipboard-outline::before{content:"\F14D"}.mdi-clipboard-play::before{content:"\FC35"}.mdi-clipboard-play-multiple::before{content:"\F0294"}.mdi-clipboard-play-multiple-outline::before{content:"\F0295"}.mdi-clipboard-play-outline::before{content:"\FC36"}.mdi-clipboard-plus::before{content:"\F750"}.mdi-clipboard-plus-outline::before{content:"\F034A"}.mdi-clipboard-pulse::before{content:"\F85C"}.mdi-clipboard-pulse-outline::before{content:"\F85D"}.mdi-clipboard-text::before{content:"\F14E"}.mdi-clipboard-text-multiple::before{content:"\F0296"}.mdi-clipboard-text-multiple-outline::before{content:"\F0297"}.mdi-clipboard-text-outline::before{content:"\FA37"}.mdi-clipboard-text-play::before{content:"\FC37"}.mdi-clipboard-text-play-outline::before{content:"\FC38"}.mdi-clippy::before{content:"\F14F"}.mdi-clock::before{content:"\F953"}.mdi-clock-alert::before{content:"\F954"}.mdi-clock-alert-outline::before{content:"\F5CE"}.mdi-clock-check::before{content:"\FFC8"}.mdi-clock-check-outline::before{content:"\FFC9"}.mdi-clock-digital::before{content:"\FEB4"}.mdi-clock-end::before{content:"\F151"}.mdi-clock-fast::before{content:"\F152"}.mdi-clock-in::before{content:"\F153"}.mdi-clock-out::before{content:"\F154"}.mdi-clock-outline::before{content:"\F150"}.mdi-clock-start::before{content:"\F155"}.mdi-close::before{content:"\F156"}.mdi-close-box::before{content:"\F157"}.mdi-close-box-multiple::before{content:"\FC39"}.mdi-close-box-multiple-outline::before{content:"\FC3A"}.mdi-close-box-outline::before{content:"\F158"}.mdi-close-circle::before{content:"\F159"}.mdi-close-circle-outline::before{content:"\F15A"}.mdi-close-network::before{content:"\F15B"}.mdi-close-network-outline::before{content:"\FC3B"}.mdi-close-octagon::before{content:"\F15C"}.mdi-close-octagon-outline::before{content:"\F15D"}.mdi-close-outline::before{content:"\F6C8"}.mdi-closed-caption::before{content:"\F15E"}.mdi-closed-caption-outline::before{content:"\FD99"}.mdi-cloud::before{content:"\F15F"}.mdi-cloud-alert::before{content:"\F9DF"}.mdi-cloud-braces::before{content:"\F7B4"}.mdi-cloud-check::before{content:"\F160"}.mdi-cloud-check-outline::before{content:"\F02F7"}.mdi-cloud-circle::before{content:"\F161"}.mdi-cloud-download::before{content:"\F162"}.mdi-cloud-download-outline::before{content:"\FB59"}.mdi-cloud-lock::before{content:"\F021C"}.mdi-cloud-lock-outline::before{content:"\F021D"}.mdi-cloud-off-outline::before{content:"\F164"}.mdi-cloud-outline::before{content:"\F163"}.mdi-cloud-print::before{content:"\F165"}.mdi-cloud-print-outline::before{content:"\F166"}.mdi-cloud-question::before{content:"\FA38"}.mdi-cloud-search::before{content:"\F955"}.mdi-cloud-search-outline::before{content:"\F956"}.mdi-cloud-sync::before{content:"\F63F"}.mdi-cloud-sync-outline::before{content:"\F0301"}.mdi-cloud-tags::before{content:"\F7B5"}.mdi-cloud-upload::before{content:"\F167"}.mdi-cloud-upload-outline::before{content:"\FB5A"}.mdi-clover::before{content:"\F815"}.mdi-coach-lamp::before{content:"\F0042"}.mdi-coat-rack::before{content:"\F00C9"}.mdi-code-array::before{content:"\F168"}.mdi-code-braces::before{content:"\F169"}.mdi-code-braces-box::before{content:"\F0101"}.mdi-code-brackets::before{content:"\F16A"}.mdi-code-equal::before{content:"\F16B"}.mdi-code-greater-than::before{content:"\F16C"}.mdi-code-greater-than-or-equal::before{content:"\F16D"}.mdi-code-less-than::before{content:"\F16E"}.mdi-code-less-than-or-equal::before{content:"\F16F"}.mdi-code-not-equal::before{content:"\F170"}.mdi-code-not-equal-variant::before{content:"\F171"}.mdi-code-parentheses::before{content:"\F172"}.mdi-code-parentheses-box::before{content:"\F0102"}.mdi-code-string::before{content:"\F173"}.mdi-code-tags::before{content:"\F174"}.mdi-code-tags-check::before{content:"\F693"}.mdi-codepen::before{content:"\F175"}.mdi-coffee::before{content:"\F176"}.mdi-coffee-maker::before{content:"\F00CA"}.mdi-coffee-off::before{content:"\FFCA"}.mdi-coffee-off-outline::before{content:"\FFCB"}.mdi-coffee-outline::before{content:"\F6C9"}.mdi-coffee-to-go::before{content:"\F177"}.mdi-coffee-to-go-outline::before{content:"\F0339"}.mdi-coffin::before{content:"\FB5B"}.mdi-cog-clockwise::before{content:"\F0208"}.mdi-cog-counterclockwise::before{content:"\F0209"}.mdi-cogs::before{content:"\F8D5"}.mdi-coin::before{content:"\F0196"}.mdi-coin-outline::before{content:"\F178"}.mdi-coins::before{content:"\F694"}.mdi-collage::before{content:"\F640"}.mdi-collapse-all::before{content:"\FAA5"}.mdi-collapse-all-outline::before{content:"\FAA6"}.mdi-color-helper::before{content:"\F179"}.mdi-comma::before{content:"\FE74"}.mdi-comma-box::before{content:"\FE75"}.mdi-comma-box-outline::before{content:"\FE76"}.mdi-comma-circle::before{content:"\FE77"}.mdi-comma-circle-outline::before{content:"\FE78"}.mdi-comment::before{content:"\F17A"}.mdi-comment-account::before{content:"\F17B"}.mdi-comment-account-outline::before{content:"\F17C"}.mdi-comment-alert::before{content:"\F17D"}.mdi-comment-alert-outline::before{content:"\F17E"}.mdi-comment-arrow-left::before{content:"\F9E0"}.mdi-comment-arrow-left-outline::before{content:"\F9E1"}.mdi-comment-arrow-right::before{content:"\F9E2"}.mdi-comment-arrow-right-outline::before{content:"\F9E3"}.mdi-comment-check::before{content:"\F17F"}.mdi-comment-check-outline::before{content:"\F180"}.mdi-comment-edit::before{content:"\F01EA"}.mdi-comment-edit-outline::before{content:"\F02EF"}.mdi-comment-eye::before{content:"\FA39"}.mdi-comment-eye-outline::before{content:"\FA3A"}.mdi-comment-multiple::before{content:"\F85E"}.mdi-comment-multiple-outline::before{content:"\F181"}.mdi-comment-outline::before{content:"\F182"}.mdi-comment-plus::before{content:"\F9E4"}.mdi-comment-plus-outline::before{content:"\F183"}.mdi-comment-processing::before{content:"\F184"}.mdi-comment-processing-outline::before{content:"\F185"}.mdi-comment-question::before{content:"\F816"}.mdi-comment-question-outline::before{content:"\F186"}.mdi-comment-quote::before{content:"\F0043"}.mdi-comment-quote-outline::before{content:"\F0044"}.mdi-comment-remove::before{content:"\F5DE"}.mdi-comment-remove-outline::before{content:"\F187"}.mdi-comment-search::before{content:"\FA3B"}.mdi-comment-search-outline::before{content:"\FA3C"}.mdi-comment-text::before{content:"\F188"}.mdi-comment-text-multiple::before{content:"\F85F"}.mdi-comment-text-multiple-outline::before{content:"\F860"}.mdi-comment-text-outline::before{content:"\F189"}.mdi-compare::before{content:"\F18A"}.mdi-compass::before{content:"\F18B"}.mdi-compass-off::before{content:"\FB5C"}.mdi-compass-off-outline::before{content:"\FB5D"}.mdi-compass-outline::before{content:"\F18C"}.mdi-compass-rose::before{content:"\F03AD"}.mdi-concourse-ci::before{content:"\F00CB"}.mdi-console::before{content:"\F18D"}.mdi-console-line::before{content:"\F7B6"}.mdi-console-network::before{content:"\F8A8"}.mdi-console-network-outline::before{content:"\FC3C"}.mdi-consolidate::before{content:"\F0103"}.mdi-contact-mail::before{content:"\F18E"}.mdi-contact-mail-outline::before{content:"\FEB5"}.mdi-contact-phone::before{content:"\FEB6"}.mdi-contact-phone-outline::before{content:"\FEB7"}.mdi-contactless-payment::before{content:"\FD46"}.mdi-contacts::before{content:"\F6CA"}.mdi-contain::before{content:"\FA3D"}.mdi-contain-end::before{content:"\FA3E"}.mdi-contain-start::before{content:"\FA3F"}.mdi-content-copy::before{content:"\F18F"}.mdi-content-cut::before{content:"\F190"}.mdi-content-duplicate::before{content:"\F191"}.mdi-content-paste::before{content:"\F192"}.mdi-content-save::before{content:"\F193"}.mdi-content-save-alert::before{content:"\FF5F"}.mdi-content-save-alert-outline::before{content:"\FF60"}.mdi-content-save-all::before{content:"\F194"}.mdi-content-save-all-outline::before{content:"\FF61"}.mdi-content-save-edit::before{content:"\FCD7"}.mdi-content-save-edit-outline::before{content:"\FCD8"}.mdi-content-save-move::before{content:"\FE79"}.mdi-content-save-move-outline::before{content:"\FE7A"}.mdi-content-save-outline::before{content:"\F817"}.mdi-content-save-settings::before{content:"\F61B"}.mdi-content-save-settings-outline::before{content:"\FB13"}.mdi-contrast::before{content:"\F195"}.mdi-contrast-box::before{content:"\F196"}.mdi-contrast-circle::before{content:"\F197"}.mdi-controller-classic::before{content:"\FB5E"}.mdi-controller-classic-outline::before{content:"\FB5F"}.mdi-cookie::before{content:"\F198"}.mdi-coolant-temperature::before{content:"\F3C8"}.mdi-copyright::before{content:"\F5E6"}.mdi-cordova::before{content:"\F957"}.mdi-corn::before{content:"\F7B7"}.mdi-counter::before{content:"\F199"}.mdi-cow::before{content:"\F19A"}.mdi-cowboy::before{content:"\FEB8"}.mdi-cpu-32-bit::before{content:"\FEFC"}.mdi-cpu-64-bit::before{content:"\FEFD"}.mdi-crane::before{content:"\F861"}.mdi-creation::before{content:"\F1C9"}.mdi-creative-commons::before{content:"\FD47"}.mdi-credit-card::before{content:"\F0010"}.mdi-credit-card-clock::before{content:"\FEFE"}.mdi-credit-card-clock-outline::before{content:"\FFBC"}.mdi-credit-card-marker::before{content:"\F6A7"}.mdi-credit-card-marker-outline::before{content:"\FD9A"}.mdi-credit-card-minus::before{content:"\FFCC"}.mdi-credit-card-minus-outline::before{content:"\FFCD"}.mdi-credit-card-multiple::before{content:"\F0011"}.mdi-credit-card-multiple-outline::before{content:"\F19C"}.mdi-credit-card-off::before{content:"\F0012"}.mdi-credit-card-off-outline::before{content:"\F5E4"}.mdi-credit-card-outline::before{content:"\F19B"}.mdi-credit-card-plus::before{content:"\F0013"}.mdi-credit-card-plus-outline::before{content:"\F675"}.mdi-credit-card-refund::before{content:"\F0014"}.mdi-credit-card-refund-outline::before{content:"\FAA7"}.mdi-credit-card-remove::before{content:"\FFCE"}.mdi-credit-card-remove-outline::before{content:"\FFCF"}.mdi-credit-card-scan::before{content:"\F0015"}.mdi-credit-card-scan-outline::before{content:"\F19D"}.mdi-credit-card-settings::before{content:"\F0016"}.mdi-credit-card-settings-outline::before{content:"\F8D6"}.mdi-credit-card-wireless::before{content:"\F801"}.mdi-credit-card-wireless-outline::before{content:"\FD48"}.mdi-cricket::before{content:"\FD49"}.mdi-crop::before{content:"\F19E"}.mdi-crop-free::before{content:"\F19F"}.mdi-crop-landscape::before{content:"\F1A0"}.mdi-crop-portrait::before{content:"\F1A1"}.mdi-crop-rotate::before{content:"\F695"}.mdi-crop-square::before{content:"\F1A2"}.mdi-crosshairs::before{content:"\F1A3"}.mdi-crosshairs-gps::before{content:"\F1A4"}.mdi-crosshairs-off::before{content:"\FF62"}.mdi-crosshairs-question::before{content:"\F0161"}.mdi-crown::before{content:"\F1A5"}.mdi-crown-outline::before{content:"\F01FB"}.mdi-cryengine::before{content:"\F958"}.mdi-crystal-ball::before{content:"\FB14"}.mdi-cube::before{content:"\F1A6"}.mdi-cube-outline::before{content:"\F1A7"}.mdi-cube-scan::before{content:"\FB60"}.mdi-cube-send::before{content:"\F1A8"}.mdi-cube-unfolded::before{content:"\F1A9"}.mdi-cup::before{content:"\F1AA"}.mdi-cup-off::before{content:"\F5E5"}.mdi-cup-off-outline::before{content:"\F03A8"}.mdi-cup-outline::before{content:"\F033A"}.mdi-cup-water::before{content:"\F1AB"}.mdi-cupboard::before{content:"\FF63"}.mdi-cupboard-outline::before{content:"\FF64"}.mdi-cupcake::before{content:"\F959"}.mdi-curling::before{content:"\F862"}.mdi-currency-bdt::before{content:"\F863"}.mdi-currency-brl::before{content:"\FB61"}.mdi-currency-btc::before{content:"\F1AC"}.mdi-currency-cny::before{content:"\F7B9"}.mdi-currency-eth::before{content:"\F7BA"}.mdi-currency-eur::before{content:"\F1AD"}.mdi-currency-eur-off::before{content:"\F0340"}.mdi-currency-gbp::before{content:"\F1AE"}.mdi-currency-ils::before{content:"\FC3D"}.mdi-currency-inr::before{content:"\F1AF"}.mdi-currency-jpy::before{content:"\F7BB"}.mdi-currency-krw::before{content:"\F7BC"}.mdi-currency-kzt::before{content:"\F864"}.mdi-currency-ngn::before{content:"\F1B0"}.mdi-currency-php::before{content:"\F9E5"}.mdi-currency-rial::before{content:"\FEB9"}.mdi-currency-rub::before{content:"\F1B1"}.mdi-currency-sign::before{content:"\F7BD"}.mdi-currency-try::before{content:"\F1B2"}.mdi-currency-twd::before{content:"\F7BE"}.mdi-currency-usd::before{content:"\F1B3"}.mdi-currency-usd-off::before{content:"\F679"}.mdi-current-ac::before{content:"\F95A"}.mdi-current-dc::before{content:"\F95B"}.mdi-cursor-default::before{content:"\F1B4"}.mdi-cursor-default-click::before{content:"\FCD9"}.mdi-cursor-default-click-outline::before{content:"\FCDA"}.mdi-cursor-default-gesture::before{content:"\F0152"}.mdi-cursor-default-gesture-outline::before{content:"\F0153"}.mdi-cursor-default-outline::before{content:"\F1B5"}.mdi-cursor-move::before{content:"\F1B6"}.mdi-cursor-pointer::before{content:"\F1B7"}.mdi-cursor-text::before{content:"\F5E7"}.mdi-database::before{content:"\F1B8"}.mdi-database-check::before{content:"\FAA8"}.mdi-database-edit::before{content:"\FB62"}.mdi-database-export::before{content:"\F95D"}.mdi-database-import::before{content:"\F95C"}.mdi-database-lock::before{content:"\FAA9"}.mdi-database-marker::before{content:"\F0321"}.mdi-database-minus::before{content:"\F1B9"}.mdi-database-plus::before{content:"\F1BA"}.mdi-database-refresh::before{content:"\FCDB"}.mdi-database-remove::before{content:"\FCDC"}.mdi-database-search::before{content:"\F865"}.mdi-database-settings::before{content:"\FCDD"}.mdi-death-star::before{content:"\F8D7"}.mdi-death-star-variant::before{content:"\F8D8"}.mdi-deathly-hallows::before{content:"\FB63"}.mdi-debian::before{content:"\F8D9"}.mdi-debug-step-into::before{content:"\F1BB"}.mdi-debug-step-out::before{content:"\F1BC"}.mdi-debug-step-over::before{content:"\F1BD"}.mdi-decagram::before{content:"\F76B"}.mdi-decagram-outline::before{content:"\F76C"}.mdi-decimal::before{content:"\F00CC"}.mdi-decimal-comma::before{content:"\F00CD"}.mdi-decimal-comma-decrease::before{content:"\F00CE"}.mdi-decimal-comma-increase::before{content:"\F00CF"}.mdi-decimal-decrease::before{content:"\F1BE"}.mdi-decimal-increase::before{content:"\F1BF"}.mdi-delete::before{content:"\F1C0"}.mdi-delete-alert::before{content:"\F00D0"}.mdi-delete-alert-outline::before{content:"\F00D1"}.mdi-delete-circle::before{content:"\F682"}.mdi-delete-circle-outline::before{content:"\FB64"}.mdi-delete-empty::before{content:"\F6CB"}.mdi-delete-empty-outline::before{content:"\FEBA"}.mdi-delete-forever::before{content:"\F5E8"}.mdi-delete-forever-outline::before{content:"\FB65"}.mdi-delete-off::before{content:"\F00D2"}.mdi-delete-off-outline::before{content:"\F00D3"}.mdi-delete-outline::before{content:"\F9E6"}.mdi-delete-restore::before{content:"\F818"}.mdi-delete-sweep::before{content:"\F5E9"}.mdi-delete-sweep-outline::before{content:"\FC3E"}.mdi-delete-variant::before{content:"\F1C1"}.mdi-delta::before{content:"\F1C2"}.mdi-desk::before{content:"\F0264"}.mdi-desk-lamp::before{content:"\F95E"}.mdi-deskphone::before{content:"\F1C3"}.mdi-desktop-classic::before{content:"\F7BF"}.mdi-desktop-mac::before{content:"\F1C4"}.mdi-desktop-mac-dashboard::before{content:"\F9E7"}.mdi-desktop-tower::before{content:"\F1C5"}.mdi-desktop-tower-monitor::before{content:"\FAAA"}.mdi-details::before{content:"\F1C6"}.mdi-dev-to::before{content:"\FD4A"}.mdi-developer-board::before{content:"\F696"}.mdi-deviantart::before{content:"\F1C7"}.mdi-devices::before{content:"\FFD0"}.mdi-diabetes::before{content:"\F0151"}.mdi-dialpad::before{content:"\F61C"}.mdi-diameter::before{content:"\FC3F"}.mdi-diameter-outline::before{content:"\FC40"}.mdi-diameter-variant::before{content:"\FC41"}.mdi-diamond::before{content:"\FB66"}.mdi-diamond-outline::before{content:"\FB67"}.mdi-diamond-stone::before{content:"\F1C8"}.mdi-dice-1::before{content:"\F1CA"}.mdi-dice-1-outline::before{content:"\F0175"}.mdi-dice-2::before{content:"\F1CB"}.mdi-dice-2-outline::before{content:"\F0176"}.mdi-dice-3::before{content:"\F1CC"}.mdi-dice-3-outline::before{content:"\F0177"}.mdi-dice-4::before{content:"\F1CD"}.mdi-dice-4-outline::before{content:"\F0178"}.mdi-dice-5::before{content:"\F1CE"}.mdi-dice-5-outline::before{content:"\F0179"}.mdi-dice-6::before{content:"\F1CF"}.mdi-dice-6-outline::before{content:"\F017A"}.mdi-dice-d10::before{content:"\F017E"}.mdi-dice-d10-outline::before{content:"\F76E"}.mdi-dice-d12::before{content:"\F017F"}.mdi-dice-d12-outline::before{content:"\F866"}.mdi-dice-d20::before{content:"\F0180"}.mdi-dice-d20-outline::before{content:"\F5EA"}.mdi-dice-d4::before{content:"\F017B"}.mdi-dice-d4-outline::before{content:"\F5EB"}.mdi-dice-d6::before{content:"\F017C"}.mdi-dice-d6-outline::before{content:"\F5EC"}.mdi-dice-d8::before{content:"\F017D"}.mdi-dice-d8-outline::before{content:"\F5ED"}.mdi-dice-multiple::before{content:"\F76D"}.mdi-dice-multiple-outline::before{content:"\F0181"}.mdi-dictionary::before{content:"\F61D"}.mdi-digital-ocean::before{content:"\F0262"}.mdi-dip-switch::before{content:"\F7C0"}.mdi-directions::before{content:"\F1D0"}.mdi-directions-fork::before{content:"\F641"}.mdi-disc::before{content:"\F5EE"}.mdi-disc-alert::before{content:"\F1D1"}.mdi-disc-player::before{content:"\F95F"}.mdi-discord::before{content:"\F66F"}.mdi-dishwasher::before{content:"\FAAB"}.mdi-dishwasher-alert::before{content:"\F01E3"}.mdi-dishwasher-off::before{content:"\F01E4"}.mdi-disqus::before{content:"\F1D2"}.mdi-disqus-outline::before{content:"\F1D3"}.mdi-distribute-horizontal-center::before{content:"\F01F4"}.mdi-distribute-horizontal-left::before{content:"\F01F3"}.mdi-distribute-horizontal-right::before{content:"\F01F5"}.mdi-distribute-vertical-bottom::before{content:"\F01F6"}.mdi-distribute-vertical-center::before{content:"\F01F7"}.mdi-distribute-vertical-top::before{content:"\F01F8"}.mdi-diving-flippers::before{content:"\FD9B"}.mdi-diving-helmet::before{content:"\FD9C"}.mdi-diving-scuba::before{content:"\FD9D"}.mdi-diving-scuba-flag::before{content:"\FD9E"}.mdi-diving-scuba-tank::before{content:"\FD9F"}.mdi-diving-scuba-tank-multiple::before{content:"\FDA0"}.mdi-diving-snorkel::before{content:"\FDA1"}.mdi-division::before{content:"\F1D4"}.mdi-division-box::before{content:"\F1D5"}.mdi-dlna::before{content:"\FA40"}.mdi-dna::before{content:"\F683"}.mdi-dns::before{content:"\F1D6"}.mdi-dns-outline::before{content:"\FB68"}.mdi-do-not-disturb::before{content:"\F697"}.mdi-do-not-disturb-off::before{content:"\F698"}.mdi-dock-bottom::before{content:"\F00D4"}.mdi-dock-left::before{content:"\F00D5"}.mdi-dock-right::before{content:"\F00D6"}.mdi-dock-window::before{content:"\F00D7"}.mdi-docker::before{content:"\F867"}.mdi-doctor::before{content:"\FA41"}.mdi-dog::before{content:"\FA42"}.mdi-dog-service::before{content:"\FAAC"}.mdi-dog-side::before{content:"\FA43"}.mdi-dolby::before{content:"\F6B2"}.mdi-dolly::before{content:"\FEBB"}.mdi-domain::before{content:"\F1D7"}.mdi-domain-off::before{content:"\FD4B"}.mdi-domain-plus::before{content:"\F00D8"}.mdi-domain-remove::before{content:"\F00D9"}.mdi-domino-mask::before{content:"\F0045"}.mdi-donkey::before{content:"\F7C1"}.mdi-door::before{content:"\F819"}.mdi-door-closed::before{content:"\F81A"}.mdi-door-closed-lock::before{content:"\F00DA"}.mdi-door-open::before{content:"\F81B"}.mdi-doorbell::before{content:"\F0311"}.mdi-doorbell-video::before{content:"\F868"}.mdi-dot-net::before{content:"\FAAD"}.mdi-dots-horizontal::before{content:"\F1D8"}.mdi-dots-horizontal-circle::before{content:"\F7C2"}.mdi-dots-horizontal-circle-outline::before{content:"\FB69"}.mdi-dots-vertical::before{content:"\F1D9"}.mdi-dots-vertical-circle::before{content:"\F7C3"}.mdi-dots-vertical-circle-outline::before{content:"\FB6A"}.mdi-douban::before{content:"\F699"}.mdi-download::before{content:"\F1DA"}.mdi-download-lock::before{content:"\F034B"}.mdi-download-lock-outline::before{content:"\F034C"}.mdi-download-multiple::before{content:"\F9E8"}.mdi-download-network::before{content:"\F6F3"}.mdi-download-network-outline::before{content:"\FC42"}.mdi-download-off::before{content:"\F00DB"}.mdi-download-off-outline::before{content:"\F00DC"}.mdi-download-outline::before{content:"\FB6B"}.mdi-drag::before{content:"\F1DB"}.mdi-drag-horizontal::before{content:"\F1DC"}.mdi-drag-horizontal-variant::before{content:"\F031B"}.mdi-drag-variant::before{content:"\FB6C"}.mdi-drag-vertical::before{content:"\F1DD"}.mdi-drag-vertical-variant::before{content:"\F031C"}.mdi-drama-masks::before{content:"\FCDE"}.mdi-draw::before{content:"\FF66"}.mdi-drawing::before{content:"\F1DE"}.mdi-drawing-box::before{content:"\F1DF"}.mdi-dresser::before{content:"\FF67"}.mdi-dresser-outline::before{content:"\FF68"}.mdi-dribbble::before{content:"\F1E0"}.mdi-dribbble-box::before{content:"\F1E1"}.mdi-drone::before{content:"\F1E2"}.mdi-dropbox::before{content:"\F1E3"}.mdi-drupal::before{content:"\F1E4"}.mdi-duck::before{content:"\F1E5"}.mdi-dumbbell::before{content:"\F1E6"}.mdi-dump-truck::before{content:"\FC43"}.mdi-ear-hearing::before{content:"\F7C4"}.mdi-ear-hearing-off::before{content:"\FA44"}.mdi-earth::before{content:"\F1E7"}.mdi-earth-arrow-right::before{content:"\F033C"}.mdi-earth-box::before{content:"\F6CC"}.mdi-earth-box-off::before{content:"\F6CD"}.mdi-earth-off::before{content:"\F1E8"}.mdi-edge::before{content:"\F1E9"}.mdi-edge-legacy::before{content:"\F027B"}.mdi-egg::before{content:"\FAAE"}.mdi-egg-easter::before{content:"\FAAF"}.mdi-eight-track::before{content:"\F9E9"}.mdi-eject::before{content:"\F1EA"}.mdi-eject-outline::before{content:"\FB6D"}.mdi-electric-switch::before{content:"\FEBC"}.mdi-electric-switch-closed::before{content:"\F0104"}.mdi-electron-framework::before{content:"\F0046"}.mdi-elephant::before{content:"\F7C5"}.mdi-elevation-decline::before{content:"\F1EB"}.mdi-elevation-rise::before{content:"\F1EC"}.mdi-elevator::before{content:"\F1ED"}.mdi-elevator-down::before{content:"\F02ED"}.mdi-elevator-passenger::before{content:"\F03AC"}.mdi-elevator-up::before{content:"\F02EC"}.mdi-ellipse::before{content:"\FEBD"}.mdi-ellipse-outline::before{content:"\FEBE"}.mdi-email::before{content:"\F1EE"}.mdi-email-alert::before{content:"\F6CE"}.mdi-email-alert-outline::before{content:"\FD1E"}.mdi-email-box::before{content:"\FCDF"}.mdi-email-check::before{content:"\FAB0"}.mdi-email-check-outline::before{content:"\FAB1"}.mdi-email-edit::before{content:"\FF00"}.mdi-email-edit-outline::before{content:"\FF01"}.mdi-email-lock::before{content:"\F1F1"}.mdi-email-mark-as-unread::before{content:"\FB6E"}.mdi-email-minus::before{content:"\FF02"}.mdi-email-minus-outline::before{content:"\FF03"}.mdi-email-multiple::before{content:"\FF04"}.mdi-email-multiple-outline::before{content:"\FF05"}.mdi-email-newsletter::before{content:"\FFD1"}.mdi-email-open::before{content:"\F1EF"}.mdi-email-open-multiple::before{content:"\FF06"}.mdi-email-open-multiple-outline::before{content:"\FF07"}.mdi-email-open-outline::before{content:"\F5EF"}.mdi-email-outline::before{content:"\F1F0"}.mdi-email-plus::before{content:"\F9EA"}.mdi-email-plus-outline::before{content:"\F9EB"}.mdi-email-receive::before{content:"\F0105"}.mdi-email-receive-outline::before{content:"\F0106"}.mdi-email-search::before{content:"\F960"}.mdi-email-search-outline::before{content:"\F961"}.mdi-email-send::before{content:"\F0107"}.mdi-email-send-outline::before{content:"\F0108"}.mdi-email-sync::before{content:"\F02F2"}.mdi-email-sync-outline::before{content:"\F02F3"}.mdi-email-variant::before{content:"\F5F0"}.mdi-ember::before{content:"\FB15"}.mdi-emby::before{content:"\F6B3"}.mdi-emoticon::before{content:"\FC44"}.mdi-emoticon-angry::before{content:"\FC45"}.mdi-emoticon-angry-outline::before{content:"\FC46"}.mdi-emoticon-confused::before{content:"\F0109"}.mdi-emoticon-confused-outline::before{content:"\F010A"}.mdi-emoticon-cool::before{content:"\FC47"}.mdi-emoticon-cool-outline::before{content:"\F1F3"}.mdi-emoticon-cry::before{content:"\FC48"}.mdi-emoticon-cry-outline::before{content:"\FC49"}.mdi-emoticon-dead::before{content:"\FC4A"}.mdi-emoticon-dead-outline::before{content:"\F69A"}.mdi-emoticon-devil::before{content:"\FC4B"}.mdi-emoticon-devil-outline::before{content:"\F1F4"}.mdi-emoticon-excited::before{content:"\FC4C"}.mdi-emoticon-excited-outline::before{content:"\F69B"}.mdi-emoticon-frown::before{content:"\FF69"}.mdi-emoticon-frown-outline::before{content:"\FF6A"}.mdi-emoticon-happy::before{content:"\FC4D"}.mdi-emoticon-happy-outline::before{content:"\F1F5"}.mdi-emoticon-kiss::before{content:"\FC4E"}.mdi-emoticon-kiss-outline::before{content:"\FC4F"}.mdi-emoticon-lol::before{content:"\F023F"}.mdi-emoticon-lol-outline::before{content:"\F0240"}.mdi-emoticon-neutral::before{content:"\FC50"}.mdi-emoticon-neutral-outline::before{content:"\F1F6"}.mdi-emoticon-outline::before{content:"\F1F2"}.mdi-emoticon-poop::before{content:"\F1F7"}.mdi-emoticon-poop-outline::before{content:"\FC51"}.mdi-emoticon-sad::before{content:"\FC52"}.mdi-emoticon-sad-outline::before{content:"\F1F8"}.mdi-emoticon-tongue::before{content:"\F1F9"}.mdi-emoticon-tongue-outline::before{content:"\FC53"}.mdi-emoticon-wink::before{content:"\FC54"}.mdi-emoticon-wink-outline::before{content:"\FC55"}.mdi-engine::before{content:"\F1FA"}.mdi-engine-off::before{content:"\FA45"}.mdi-engine-off-outline::before{content:"\FA46"}.mdi-engine-outline::before{content:"\F1FB"}.mdi-epsilon::before{content:"\F010B"}.mdi-equal::before{content:"\F1FC"}.mdi-equal-box::before{content:"\F1FD"}.mdi-equalizer::before{content:"\FEBF"}.mdi-equalizer-outline::before{content:"\FEC0"}.mdi-eraser::before{content:"\F1FE"}.mdi-eraser-variant::before{content:"\F642"}.mdi-escalator::before{content:"\F1FF"}.mdi-escalator-down::before{content:"\F02EB"}.mdi-escalator-up::before{content:"\F02EA"}.mdi-eslint::before{content:"\FC56"}.mdi-et::before{content:"\FAB2"}.mdi-ethereum::before{content:"\F869"}.mdi-ethernet::before{content:"\F200"}.mdi-ethernet-cable::before{content:"\F201"}.mdi-ethernet-cable-off::before{content:"\F202"}.mdi-etsy::before{content:"\F203"}.mdi-ev-station::before{content:"\F5F1"}.mdi-eventbrite::before{content:"\F7C6"}.mdi-evernote::before{content:"\F204"}.mdi-excavator::before{content:"\F0047"}.mdi-exclamation::before{content:"\F205"}.mdi-exclamation-thick::before{content:"\F0263"}.mdi-exit-run::before{content:"\FA47"}.mdi-exit-to-app::before{content:"\F206"}.mdi-expand-all::before{content:"\FAB3"}.mdi-expand-all-outline::before{content:"\FAB4"}.mdi-expansion-card::before{content:"\F8AD"}.mdi-expansion-card-variant::before{content:"\FFD2"}.mdi-exponent::before{content:"\F962"}.mdi-exponent-box::before{content:"\F963"}.mdi-export::before{content:"\F207"}.mdi-export-variant::before{content:"\FB6F"}.mdi-eye::before{content:"\F208"}.mdi-eye-check::before{content:"\FCE0"}.mdi-eye-check-outline::before{content:"\FCE1"}.mdi-eye-circle::before{content:"\FB70"}.mdi-eye-circle-outline::before{content:"\FB71"}.mdi-eye-minus::before{content:"\F0048"}.mdi-eye-minus-outline::before{content:"\F0049"}.mdi-eye-off::before{content:"\F209"}.mdi-eye-off-outline::before{content:"\F6D0"}.mdi-eye-outline::before{content:"\F6CF"}.mdi-eye-plus::before{content:"\F86A"}.mdi-eye-plus-outline::before{content:"\F86B"}.mdi-eye-settings::before{content:"\F86C"}.mdi-eye-settings-outline::before{content:"\F86D"}.mdi-eyedropper::before{content:"\F20A"}.mdi-eyedropper-variant::before{content:"\F20B"}.mdi-face::before{content:"\F643"}.mdi-face-agent::before{content:"\FD4C"}.mdi-face-outline::before{content:"\FB72"}.mdi-face-profile::before{content:"\F644"}.mdi-face-profile-woman::before{content:"\F00A1"}.mdi-face-recognition::before{content:"\FC57"}.mdi-face-woman::before{content:"\F00A2"}.mdi-face-woman-outline::before{content:"\F00A3"}.mdi-facebook::before{content:"\F20C"}.mdi-facebook-box::before{content:"\F20D"}.mdi-facebook-messenger::before{content:"\F20E"}.mdi-facebook-workplace::before{content:"\FB16"}.mdi-factory::before{content:"\F20F"}.mdi-fan::before{content:"\F210"}.mdi-fan-off::before{content:"\F81C"}.mdi-fast-forward::before{content:"\F211"}.mdi-fast-forward-10::before{content:"\FD4D"}.mdi-fast-forward-30::before{content:"\FCE2"}.mdi-fast-forward-5::before{content:"\F0223"}.mdi-fast-forward-outline::before{content:"\F6D1"}.mdi-fax::before{content:"\F212"}.mdi-feather::before{content:"\F6D2"}.mdi-feature-search::before{content:"\FA48"}.mdi-feature-search-outline::before{content:"\FA49"}.mdi-fedora::before{content:"\F8DA"}.mdi-ferris-wheel::before{content:"\FEC1"}.mdi-ferry::before{content:"\F213"}.mdi-file::before{content:"\F214"}.mdi-file-account::before{content:"\F73A"}.mdi-file-account-outline::before{content:"\F004A"}.mdi-file-alert::before{content:"\FA4A"}.mdi-file-alert-outline::before{content:"\FA4B"}.mdi-file-cabinet::before{content:"\FAB5"}.mdi-file-cad::before{content:"\FF08"}.mdi-file-cad-box::before{content:"\FF09"}.mdi-file-cancel::before{content:"\FDA2"}.mdi-file-cancel-outline::before{content:"\FDA3"}.mdi-file-certificate::before{content:"\F01B1"}.mdi-file-certificate-outline::before{content:"\F01B2"}.mdi-file-chart::before{content:"\F215"}.mdi-file-chart-outline::before{content:"\F004B"}.mdi-file-check::before{content:"\F216"}.mdi-file-check-outline::before{content:"\FE7B"}.mdi-file-clock::before{content:"\F030C"}.mdi-file-clock-outline::before{content:"\F030D"}.mdi-file-cloud::before{content:"\F217"}.mdi-file-cloud-outline::before{content:"\F004C"}.mdi-file-code::before{content:"\F22E"}.mdi-file-code-outline::before{content:"\F004D"}.mdi-file-compare::before{content:"\F8A9"}.mdi-file-delimited::before{content:"\F218"}.mdi-file-delimited-outline::before{content:"\FEC2"}.mdi-file-document::before{content:"\F219"}.mdi-file-document-box::before{content:"\F21A"}.mdi-file-document-box-check::before{content:"\FEC3"}.mdi-file-document-box-check-outline::before{content:"\FEC4"}.mdi-file-document-box-minus::before{content:"\FEC5"}.mdi-file-document-box-minus-outline::before{content:"\FEC6"}.mdi-file-document-box-multiple::before{content:"\FAB6"}.mdi-file-document-box-multiple-outline::before{content:"\FAB7"}.mdi-file-document-box-outline::before{content:"\F9EC"}.mdi-file-document-box-plus::before{content:"\FEC7"}.mdi-file-document-box-plus-outline::before{content:"\FEC8"}.mdi-file-document-box-remove::before{content:"\FEC9"}.mdi-file-document-box-remove-outline::before{content:"\FECA"}.mdi-file-document-box-search::before{content:"\FECB"}.mdi-file-document-box-search-outline::before{content:"\FECC"}.mdi-file-document-edit::before{content:"\FDA4"}.mdi-file-document-edit-outline::before{content:"\FDA5"}.mdi-file-document-outline::before{content:"\F9ED"}.mdi-file-download::before{content:"\F964"}.mdi-file-download-outline::before{content:"\F965"}.mdi-file-edit::before{content:"\F0212"}.mdi-file-edit-outline::before{content:"\F0213"}.mdi-file-excel::before{content:"\F21B"}.mdi-file-excel-box::before{content:"\F21C"}.mdi-file-excel-box-outline::before{content:"\F004E"}.mdi-file-excel-outline::before{content:"\F004F"}.mdi-file-export::before{content:"\F21D"}.mdi-file-export-outline::before{content:"\F0050"}.mdi-file-eye::before{content:"\FDA6"}.mdi-file-eye-outline::before{content:"\FDA7"}.mdi-file-find::before{content:"\F21E"}.mdi-file-find-outline::before{content:"\FB73"}.mdi-file-hidden::before{content:"\F613"}.mdi-file-image::before{content:"\F21F"}.mdi-file-image-outline::before{content:"\FECD"}.mdi-file-import::before{content:"\F220"}.mdi-file-import-outline::before{content:"\F0051"}.mdi-file-key::before{content:"\F01AF"}.mdi-file-key-outline::before{content:"\F01B0"}.mdi-file-link::before{content:"\F01A2"}.mdi-file-link-outline::before{content:"\F01A3"}.mdi-file-lock::before{content:"\F221"}.mdi-file-lock-outline::before{content:"\F0052"}.mdi-file-move::before{content:"\FAB8"}.mdi-file-move-outline::before{content:"\F0053"}.mdi-file-multiple::before{content:"\F222"}.mdi-file-multiple-outline::before{content:"\F0054"}.mdi-file-music::before{content:"\F223"}.mdi-file-music-outline::before{content:"\FE7C"}.mdi-file-outline::before{content:"\F224"}.mdi-file-pdf::before{content:"\F225"}.mdi-file-pdf-box::before{content:"\F226"}.mdi-file-pdf-box-outline::before{content:"\FFD3"}.mdi-file-pdf-outline::before{content:"\FE7D"}.mdi-file-percent::before{content:"\F81D"}.mdi-file-percent-outline::before{content:"\F0055"}.mdi-file-phone::before{content:"\F01A4"}.mdi-file-phone-outline::before{content:"\F01A5"}.mdi-file-plus::before{content:"\F751"}.mdi-file-plus-outline::before{content:"\FF0A"}.mdi-file-powerpoint::before{content:"\F227"}.mdi-file-powerpoint-box::before{content:"\F228"}.mdi-file-powerpoint-box-outline::before{content:"\F0056"}.mdi-file-powerpoint-outline::before{content:"\F0057"}.mdi-file-presentation-box::before{content:"\F229"}.mdi-file-question::before{content:"\F86E"}.mdi-file-question-outline::before{content:"\F0058"}.mdi-file-remove::before{content:"\FB74"}.mdi-file-remove-outline::before{content:"\F0059"}.mdi-file-replace::before{content:"\FB17"}.mdi-file-replace-outline::before{content:"\FB18"}.mdi-file-restore::before{content:"\F670"}.mdi-file-restore-outline::before{content:"\F005A"}.mdi-file-search::before{content:"\FC58"}.mdi-file-search-outline::before{content:"\FC59"}.mdi-file-send::before{content:"\F22A"}.mdi-file-send-outline::before{content:"\F005B"}.mdi-file-settings::before{content:"\F00A4"}.mdi-file-settings-outline::before{content:"\F00A5"}.mdi-file-settings-variant::before{content:"\F00A6"}.mdi-file-settings-variant-outline::before{content:"\F00A7"}.mdi-file-star::before{content:"\F005C"}.mdi-file-star-outline::before{content:"\F005D"}.mdi-file-swap::before{content:"\FFD4"}.mdi-file-swap-outline::before{content:"\FFD5"}.mdi-file-sync::before{content:"\F0241"}.mdi-file-sync-outline::before{content:"\F0242"}.mdi-file-table::before{content:"\FC5A"}.mdi-file-table-box::before{content:"\F010C"}.mdi-file-table-box-multiple::before{content:"\F010D"}.mdi-file-table-box-multiple-outline::before{content:"\F010E"}.mdi-file-table-box-outline::before{content:"\F010F"}.mdi-file-table-outline::before{content:"\FC5B"}.mdi-file-tree::before{content:"\F645"}.mdi-file-undo::before{content:"\F8DB"}.mdi-file-undo-outline::before{content:"\F005E"}.mdi-file-upload::before{content:"\FA4C"}.mdi-file-upload-outline::before{content:"\FA4D"}.mdi-file-video::before{content:"\F22B"}.mdi-file-video-outline::before{content:"\FE10"}.mdi-file-word::before{content:"\F22C"}.mdi-file-word-box::before{content:"\F22D"}.mdi-file-word-box-outline::before{content:"\F005F"}.mdi-file-word-outline::before{content:"\F0060"}.mdi-film::before{content:"\F22F"}.mdi-filmstrip::before{content:"\F230"}.mdi-filmstrip-off::before{content:"\F231"}.mdi-filter::before{content:"\F232"}.mdi-filter-menu::before{content:"\F0110"}.mdi-filter-menu-outline::before{content:"\F0111"}.mdi-filter-minus::before{content:"\FF0B"}.mdi-filter-minus-outline::before{content:"\FF0C"}.mdi-filter-outline::before{content:"\F233"}.mdi-filter-plus::before{content:"\FF0D"}.mdi-filter-plus-outline::before{content:"\FF0E"}.mdi-filter-remove::before{content:"\F234"}.mdi-filter-remove-outline::before{content:"\F235"}.mdi-filter-variant::before{content:"\F236"}.mdi-filter-variant-minus::before{content:"\F013D"}.mdi-filter-variant-plus::before{content:"\F013E"}.mdi-filter-variant-remove::before{content:"\F0061"}.mdi-finance::before{content:"\F81E"}.mdi-find-replace::before{content:"\F6D3"}.mdi-fingerprint::before{content:"\F237"}.mdi-fingerprint-off::before{content:"\FECE"}.mdi-fire::before{content:"\F238"}.mdi-fire-extinguisher::before{content:"\FF0F"}.mdi-fire-hydrant::before{content:"\F0162"}.mdi-fire-hydrant-alert::before{content:"\F0163"}.mdi-fire-hydrant-off::before{content:"\F0164"}.mdi-fire-truck::before{content:"\F8AA"}.mdi-firebase::before{content:"\F966"}.mdi-firefox::before{content:"\F239"}.mdi-fireplace::before{content:"\FE11"}.mdi-fireplace-off::before{content:"\FE12"}.mdi-firework::before{content:"\FE13"}.mdi-fish::before{content:"\F23A"}.mdi-fishbowl::before{content:"\FF10"}.mdi-fishbowl-outline::before{content:"\FF11"}.mdi-fit-to-page::before{content:"\FF12"}.mdi-fit-to-page-outline::before{content:"\FF13"}.mdi-flag::before{content:"\F23B"}.mdi-flag-checkered::before{content:"\F23C"}.mdi-flag-minus::before{content:"\FB75"}.mdi-flag-minus-outline::before{content:"\F00DD"}.mdi-flag-outline::before{content:"\F23D"}.mdi-flag-plus::before{content:"\FB76"}.mdi-flag-plus-outline::before{content:"\F00DE"}.mdi-flag-remove::before{content:"\FB77"}.mdi-flag-remove-outline::before{content:"\F00DF"}.mdi-flag-triangle::before{content:"\F23F"}.mdi-flag-variant::before{content:"\F240"}.mdi-flag-variant-outline::before{content:"\F23E"}.mdi-flare::before{content:"\FD4E"}.mdi-flash::before{content:"\F241"}.mdi-flash-alert::before{content:"\FF14"}.mdi-flash-alert-outline::before{content:"\FF15"}.mdi-flash-auto::before{content:"\F242"}.mdi-flash-circle::before{content:"\F81F"}.mdi-flash-off::before{content:"\F243"}.mdi-flash-outline::before{content:"\F6D4"}.mdi-flash-red-eye::before{content:"\F67A"}.mdi-flashlight::before{content:"\F244"}.mdi-flashlight-off::before{content:"\F245"}.mdi-flask::before{content:"\F093"}.mdi-flask-empty::before{content:"\F094"}.mdi-flask-empty-minus::before{content:"\F0265"}.mdi-flask-empty-minus-outline::before{content:"\F0266"}.mdi-flask-empty-outline::before{content:"\F095"}.mdi-flask-empty-plus::before{content:"\F0267"}.mdi-flask-empty-plus-outline::before{content:"\F0268"}.mdi-flask-empty-remove::before{content:"\F0269"}.mdi-flask-empty-remove-outline::before{content:"\F026A"}.mdi-flask-minus::before{content:"\F026B"}.mdi-flask-minus-outline::before{content:"\F026C"}.mdi-flask-outline::before{content:"\F096"}.mdi-flask-plus::before{content:"\F026D"}.mdi-flask-plus-outline::before{content:"\F026E"}.mdi-flask-remove::before{content:"\F026F"}.mdi-flask-remove-outline::before{content:"\F0270"}.mdi-flask-round-bottom::before{content:"\F0276"}.mdi-flask-round-bottom-empty::before{content:"\F0277"}.mdi-flask-round-bottom-empty-outline::before{content:"\F0278"}.mdi-flask-round-bottom-outline::before{content:"\F0279"}.mdi-flattr::before{content:"\F246"}.mdi-fleur-de-lis::before{content:"\F032E"}.mdi-flickr::before{content:"\FCE3"}.mdi-flip-horizontal::before{content:"\F0112"}.mdi-flip-to-back::before{content:"\F247"}.mdi-flip-to-front::before{content:"\F248"}.mdi-flip-vertical::before{content:"\F0113"}.mdi-floor-lamp::before{content:"\F8DC"}.mdi-floor-lamp-dual::before{content:"\F0062"}.mdi-floor-lamp-variant::before{content:"\F0063"}.mdi-floor-plan::before{content:"\F820"}.mdi-floppy::before{content:"\F249"}.mdi-floppy-variant::before{content:"\F9EE"}.mdi-flower::before{content:"\F24A"}.mdi-flower-outline::before{content:"\F9EF"}.mdi-flower-poppy::before{content:"\FCE4"}.mdi-flower-tulip::before{content:"\F9F0"}.mdi-flower-tulip-outline::before{content:"\F9F1"}.mdi-focus-auto::before{content:"\FF6B"}.mdi-focus-field::before{content:"\FF6C"}.mdi-focus-field-horizontal::before{content:"\FF6D"}.mdi-focus-field-vertical::before{content:"\FF6E"}.mdi-folder::before{content:"\F24B"}.mdi-folder-account::before{content:"\F24C"}.mdi-folder-account-outline::before{content:"\FB78"}.mdi-folder-alert::before{content:"\FDA8"}.mdi-folder-alert-outline::before{content:"\FDA9"}.mdi-folder-clock::before{content:"\FAB9"}.mdi-folder-clock-outline::before{content:"\FABA"}.mdi-folder-download::before{content:"\F24D"}.mdi-folder-download-outline::before{content:"\F0114"}.mdi-folder-edit::before{content:"\F8DD"}.mdi-folder-edit-outline::before{content:"\FDAA"}.mdi-folder-google-drive::before{content:"\F24E"}.mdi-folder-heart::before{content:"\F0115"}.mdi-folder-heart-outline::before{content:"\F0116"}.mdi-folder-home::before{content:"\F00E0"}.mdi-folder-home-outline::before{content:"\F00E1"}.mdi-folder-image::before{content:"\F24F"}.mdi-folder-information::before{content:"\F00E2"}.mdi-folder-information-outline::before{content:"\F00E3"}.mdi-folder-key::before{content:"\F8AB"}.mdi-folder-key-network::before{content:"\F8AC"}.mdi-folder-key-network-outline::before{content:"\FC5C"}.mdi-folder-key-outline::before{content:"\F0117"}.mdi-folder-lock::before{content:"\F250"}.mdi-folder-lock-open::before{content:"\F251"}.mdi-folder-marker::before{content:"\F0298"}.mdi-folder-marker-outline::before{content:"\F0299"}.mdi-folder-move::before{content:"\F252"}.mdi-folder-move-outline::before{content:"\F0271"}.mdi-folder-multiple::before{content:"\F253"}.mdi-folder-multiple-image::before{content:"\F254"}.mdi-folder-multiple-outline::before{content:"\F255"}.mdi-folder-music::before{content:"\F0384"}.mdi-folder-music-outline::before{content:"\F0385"}.mdi-folder-network::before{content:"\F86F"}.mdi-folder-network-outline::before{content:"\FC5D"}.mdi-folder-open::before{content:"\F76F"}.mdi-folder-open-outline::before{content:"\FDAB"}.mdi-folder-outline::before{content:"\F256"}.mdi-folder-plus::before{content:"\F257"}.mdi-folder-plus-outline::before{content:"\FB79"}.mdi-folder-pound::before{content:"\FCE5"}.mdi-folder-pound-outline::before{content:"\FCE6"}.mdi-folder-remove::before{content:"\F258"}.mdi-folder-remove-outline::before{content:"\FB7A"}.mdi-folder-search::before{content:"\F967"}.mdi-folder-search-outline::before{content:"\F968"}.mdi-folder-settings::before{content:"\F00A8"}.mdi-folder-settings-outline::before{content:"\F00A9"}.mdi-folder-settings-variant::before{content:"\F00AA"}.mdi-folder-settings-variant-outline::before{content:"\F00AB"}.mdi-folder-star::before{content:"\F69C"}.mdi-folder-star-outline::before{content:"\FB7B"}.mdi-folder-swap::before{content:"\FFD6"}.mdi-folder-swap-outline::before{content:"\FFD7"}.mdi-folder-sync::before{content:"\FCE7"}.mdi-folder-sync-outline::before{content:"\FCE8"}.mdi-folder-table::before{content:"\F030E"}.mdi-folder-table-outline::before{content:"\F030F"}.mdi-folder-text::before{content:"\FC5E"}.mdi-folder-text-outline::before{content:"\FC5F"}.mdi-folder-upload::before{content:"\F259"}.mdi-folder-upload-outline::before{content:"\F0118"}.mdi-folder-zip::before{content:"\F6EA"}.mdi-folder-zip-outline::before{content:"\F7B8"}.mdi-font-awesome::before{content:"\F03A"}.mdi-food::before{content:"\F25A"}.mdi-food-apple::before{content:"\F25B"}.mdi-food-apple-outline::before{content:"\FC60"}.mdi-food-croissant::before{content:"\F7C7"}.mdi-food-fork-drink::before{content:"\F5F2"}.mdi-food-off::before{content:"\F5F3"}.mdi-food-variant::before{content:"\F25C"}.mdi-foot-print::before{content:"\FF6F"}.mdi-football::before{content:"\F25D"}.mdi-football-australian::before{content:"\F25E"}.mdi-football-helmet::before{content:"\F25F"}.mdi-forklift::before{content:"\F7C8"}.mdi-format-align-bottom::before{content:"\F752"}.mdi-format-align-center::before{content:"\F260"}.mdi-format-align-justify::before{content:"\F261"}.mdi-format-align-left::before{content:"\F262"}.mdi-format-align-middle::before{content:"\F753"}.mdi-format-align-right::before{content:"\F263"}.mdi-format-align-top::before{content:"\F754"}.mdi-format-annotation-minus::before{content:"\FABB"}.mdi-format-annotation-plus::before{content:"\F646"}.mdi-format-bold::before{content:"\F264"}.mdi-format-clear::before{content:"\F265"}.mdi-format-color-fill::before{content:"\F266"}.mdi-format-color-highlight::before{content:"\FE14"}.mdi-format-color-marker-cancel::before{content:"\F033E"}.mdi-format-color-text::before{content:"\F69D"}.mdi-format-columns::before{content:"\F8DE"}.mdi-format-float-center::before{content:"\F267"}.mdi-format-float-left::before{content:"\F268"}.mdi-format-float-none::before{content:"\F269"}.mdi-format-float-right::before{content:"\F26A"}.mdi-format-font::before{content:"\F6D5"}.mdi-format-font-size-decrease::before{content:"\F9F2"}.mdi-format-font-size-increase::before{content:"\F9F3"}.mdi-format-header-1::before{content:"\F26B"}.mdi-format-header-2::before{content:"\F26C"}.mdi-format-header-3::before{content:"\F26D"}.mdi-format-header-4::before{content:"\F26E"}.mdi-format-header-5::before{content:"\F26F"}.mdi-format-header-6::before{content:"\F270"}.mdi-format-header-decrease::before{content:"\F271"}.mdi-format-header-equal::before{content:"\F272"}.mdi-format-header-increase::before{content:"\F273"}.mdi-format-header-pound::before{content:"\F274"}.mdi-format-horizontal-align-center::before{content:"\F61E"}.mdi-format-horizontal-align-left::before{content:"\F61F"}.mdi-format-horizontal-align-right::before{content:"\F620"}.mdi-format-indent-decrease::before{content:"\F275"}.mdi-format-indent-increase::before{content:"\F276"}.mdi-format-italic::before{content:"\F277"}.mdi-format-letter-case::before{content:"\FB19"}.mdi-format-letter-case-lower::before{content:"\FB1A"}.mdi-format-letter-case-upper::before{content:"\FB1B"}.mdi-format-letter-ends-with::before{content:"\FFD8"}.mdi-format-letter-matches::before{content:"\FFD9"}.mdi-format-letter-starts-with::before{content:"\FFDA"}.mdi-format-line-spacing::before{content:"\F278"}.mdi-format-line-style::before{content:"\F5C8"}.mdi-format-line-weight::before{content:"\F5C9"}.mdi-format-list-bulleted::before{content:"\F279"}.mdi-format-list-bulleted-square::before{content:"\FDAC"}.mdi-format-list-bulleted-triangle::before{content:"\FECF"}.mdi-format-list-bulleted-type::before{content:"\F27A"}.mdi-format-list-checkbox::before{content:"\F969"}.mdi-format-list-checks::before{content:"\F755"}.mdi-format-list-numbered::before{content:"\F27B"}.mdi-format-list-numbered-rtl::before{content:"\FCE9"}.mdi-format-list-text::before{content:"\F029A"}.mdi-format-overline::before{content:"\FED0"}.mdi-format-page-break::before{content:"\F6D6"}.mdi-format-paint::before{content:"\F27C"}.mdi-format-paragraph::before{content:"\F27D"}.mdi-format-pilcrow::before{content:"\F6D7"}.mdi-format-quote-close::before{content:"\F27E"}.mdi-format-quote-close-outline::before{content:"\F01D3"}.mdi-format-quote-open::before{content:"\F756"}.mdi-format-quote-open-outline::before{content:"\F01D2"}.mdi-format-rotate-90::before{content:"\F6A9"}.mdi-format-section::before{content:"\F69E"}.mdi-format-size::before{content:"\F27F"}.mdi-format-strikethrough::before{content:"\F280"}.mdi-format-strikethrough-variant::before{content:"\F281"}.mdi-format-subscript::before{content:"\F282"}.mdi-format-superscript::before{content:"\F283"}.mdi-format-text::before{content:"\F284"}.mdi-format-text-rotation-angle-down::before{content:"\FFDB"}.mdi-format-text-rotation-angle-up::before{content:"\FFDC"}.mdi-format-text-rotation-down::before{content:"\FD4F"}.mdi-format-text-rotation-down-vertical::before{content:"\FFDD"}.mdi-format-text-rotation-none::before{content:"\FD50"}.mdi-format-text-rotation-up::before{content:"\FFDE"}.mdi-format-text-rotation-vertical::before{content:"\FFDF"}.mdi-format-text-variant::before{content:"\FE15"}.mdi-format-text-wrapping-clip::before{content:"\FCEA"}.mdi-format-text-wrapping-overflow::before{content:"\FCEB"}.mdi-format-text-wrapping-wrap::before{content:"\FCEC"}.mdi-format-textbox::before{content:"\FCED"}.mdi-format-textdirection-l-to-r::before{content:"\F285"}.mdi-format-textdirection-r-to-l::before{content:"\F286"}.mdi-format-title::before{content:"\F5F4"}.mdi-format-underline::before{content:"\F287"}.mdi-format-vertical-align-bottom::before{content:"\F621"}.mdi-format-vertical-align-center::before{content:"\F622"}.mdi-format-vertical-align-top::before{content:"\F623"}.mdi-format-wrap-inline::before{content:"\F288"}.mdi-format-wrap-square::before{content:"\F289"}.mdi-format-wrap-tight::before{content:"\F28A"}.mdi-format-wrap-top-bottom::before{content:"\F28B"}.mdi-forum::before{content:"\F28C"}.mdi-forum-outline::before{content:"\F821"}.mdi-forward::before{content:"\F28D"}.mdi-forwardburger::before{content:"\FD51"}.mdi-fountain::before{content:"\F96A"}.mdi-fountain-pen::before{content:"\FCEE"}.mdi-fountain-pen-tip::before{content:"\FCEF"}.mdi-foursquare::before{content:"\F28E"}.mdi-freebsd::before{content:"\F8DF"}.mdi-frequently-asked-questions::before{content:"\FED1"}.mdi-fridge::before{content:"\F290"}.mdi-fridge-alert::before{content:"\F01DC"}.mdi-fridge-alert-outline::before{content:"\F01DD"}.mdi-fridge-bottom::before{content:"\F292"}.mdi-fridge-off::before{content:"\F01DA"}.mdi-fridge-off-outline::before{content:"\F01DB"}.mdi-fridge-outline::before{content:"\F28F"}.mdi-fridge-top::before{content:"\F291"}.mdi-fruit-cherries::before{content:"\F0064"}.mdi-fruit-citrus::before{content:"\F0065"}.mdi-fruit-grapes::before{content:"\F0066"}.mdi-fruit-grapes-outline::before{content:"\F0067"}.mdi-fruit-pineapple::before{content:"\F0068"}.mdi-fruit-watermelon::before{content:"\F0069"}.mdi-fuel::before{content:"\F7C9"}.mdi-fullscreen::before{content:"\F293"}.mdi-fullscreen-exit::before{content:"\F294"}.mdi-function::before{content:"\F295"}.mdi-function-variant::before{content:"\F870"}.mdi-furigana-horizontal::before{content:"\F00AC"}.mdi-furigana-vertical::before{content:"\F00AD"}.mdi-fuse::before{content:"\FC61"}.mdi-fuse-blade::before{content:"\FC62"}.mdi-gamepad::before{content:"\F296"}.mdi-gamepad-circle::before{content:"\FE16"}.mdi-gamepad-circle-down::before{content:"\FE17"}.mdi-gamepad-circle-left::before{content:"\FE18"}.mdi-gamepad-circle-outline::before{content:"\FE19"}.mdi-gamepad-circle-right::before{content:"\FE1A"}.mdi-gamepad-circle-up::before{content:"\FE1B"}.mdi-gamepad-down::before{content:"\FE1C"}.mdi-gamepad-left::before{content:"\FE1D"}.mdi-gamepad-right::before{content:"\FE1E"}.mdi-gamepad-round::before{content:"\FE1F"}.mdi-gamepad-round-down::before{content:"\FE7E"}.mdi-gamepad-round-left::before{content:"\FE7F"}.mdi-gamepad-round-outline::before{content:"\FE80"}.mdi-gamepad-round-right::before{content:"\FE81"}.mdi-gamepad-round-up::before{content:"\FE82"}.mdi-gamepad-square::before{content:"\FED2"}.mdi-gamepad-square-outline::before{content:"\FED3"}.mdi-gamepad-up::before{content:"\FE83"}.mdi-gamepad-variant::before{content:"\F297"}.mdi-gamepad-variant-outline::before{content:"\FED4"}.mdi-gamma::before{content:"\F0119"}.mdi-gantry-crane::before{content:"\FDAD"}.mdi-garage::before{content:"\F6D8"}.mdi-garage-alert::before{content:"\F871"}.mdi-garage-alert-variant::before{content:"\F0300"}.mdi-garage-open::before{content:"\F6D9"}.mdi-garage-open-variant::before{content:"\F02FF"}.mdi-garage-variant::before{content:"\F02FE"}.mdi-gas-cylinder::before{content:"\F647"}.mdi-gas-station::before{content:"\F298"}.mdi-gas-station-outline::before{content:"\FED5"}.mdi-gate::before{content:"\F299"}.mdi-gate-and::before{content:"\F8E0"}.mdi-gate-arrow-right::before{content:"\F0194"}.mdi-gate-nand::before{content:"\F8E1"}.mdi-gate-nor::before{content:"\F8E2"}.mdi-gate-not::before{content:"\F8E3"}.mdi-gate-open::before{content:"\F0195"}.mdi-gate-or::before{content:"\F8E4"}.mdi-gate-xnor::before{content:"\F8E5"}.mdi-gate-xor::before{content:"\F8E6"}.mdi-gatsby::before{content:"\FE84"}.mdi-gauge::before{content:"\F29A"}.mdi-gauge-empty::before{content:"\F872"}.mdi-gauge-full::before{content:"\F873"}.mdi-gauge-low::before{content:"\F874"}.mdi-gavel::before{content:"\F29B"}.mdi-gender-female::before{content:"\F29C"}.mdi-gender-male::before{content:"\F29D"}.mdi-gender-male-female::before{content:"\F29E"}.mdi-gender-male-female-variant::before{content:"\F016A"}.mdi-gender-non-binary::before{content:"\F016B"}.mdi-gender-transgender::before{content:"\F29F"}.mdi-gentoo::before{content:"\F8E7"}.mdi-gesture::before{content:"\F7CA"}.mdi-gesture-double-tap::before{content:"\F73B"}.mdi-gesture-pinch::before{content:"\FABC"}.mdi-gesture-spread::before{content:"\FABD"}.mdi-gesture-swipe::before{content:"\FD52"}.mdi-gesture-swipe-down::before{content:"\F73C"}.mdi-gesture-swipe-horizontal::before{content:"\FABE"}.mdi-gesture-swipe-left::before{content:"\F73D"}.mdi-gesture-swipe-right::before{content:"\F73E"}.mdi-gesture-swipe-up::before{content:"\F73F"}.mdi-gesture-swipe-vertical::before{content:"\FABF"}.mdi-gesture-tap::before{content:"\F740"}.mdi-gesture-tap-box::before{content:"\F02D4"}.mdi-gesture-tap-button::before{content:"\F02D3"}.mdi-gesture-tap-hold::before{content:"\FD53"}.mdi-gesture-two-double-tap::before{content:"\F741"}.mdi-gesture-two-tap::before{content:"\F742"}.mdi-ghost::before{content:"\F2A0"}.mdi-ghost-off::before{content:"\F9F4"}.mdi-gif::before{content:"\FD54"}.mdi-gift::before{content:"\FE85"}.mdi-gift-outline::before{content:"\F2A1"}.mdi-git::before{content:"\F2A2"}.mdi-github-box::before{content:"\F2A3"}.mdi-github-circle::before{content:"\F2A4"}.mdi-github-face::before{content:"\F6DA"}.mdi-gitlab::before{content:"\FB7C"}.mdi-glass-cocktail::before{content:"\F356"}.mdi-glass-flute::before{content:"\F2A5"}.mdi-glass-mug::before{content:"\F2A6"}.mdi-glass-mug-variant::before{content:"\F0141"}.mdi-glass-pint-outline::before{content:"\F0338"}.mdi-glass-stange::before{content:"\F2A7"}.mdi-glass-tulip::before{content:"\F2A8"}.mdi-glass-wine::before{content:"\F875"}.mdi-glassdoor::before{content:"\F2A9"}.mdi-glasses::before{content:"\F2AA"}.mdi-globe-light::before{content:"\F0302"}.mdi-globe-model::before{content:"\F8E8"}.mdi-gmail::before{content:"\F2AB"}.mdi-gnome::before{content:"\F2AC"}.mdi-go-kart::before{content:"\FD55"}.mdi-go-kart-track::before{content:"\FD56"}.mdi-gog::before{content:"\FB7D"}.mdi-gold::before{content:"\F027A"}.mdi-golf::before{content:"\F822"}.mdi-golf-cart::before{content:"\F01CF"}.mdi-golf-tee::before{content:"\F00AE"}.mdi-gondola::before{content:"\F685"}.mdi-goodreads::before{content:"\FD57"}.mdi-google::before{content:"\F2AD"}.mdi-google-adwords::before{content:"\FC63"}.mdi-google-analytics::before{content:"\F7CB"}.mdi-google-assistant::before{content:"\F7CC"}.mdi-google-cardboard::before{content:"\F2AE"}.mdi-google-chrome::before{content:"\F2AF"}.mdi-google-circles::before{content:"\F2B0"}.mdi-google-circles-communities::before{content:"\F2B1"}.mdi-google-circles-extended::before{content:"\F2B2"}.mdi-google-circles-group::before{content:"\F2B3"}.mdi-google-classroom::before{content:"\F2C0"}.mdi-google-cloud::before{content:"\F0221"}.mdi-google-controller::before{content:"\F2B4"}.mdi-google-controller-off::before{content:"\F2B5"}.mdi-google-downasaur::before{content:"\F038D"}.mdi-google-drive::before{content:"\F2B6"}.mdi-google-earth::before{content:"\F2B7"}.mdi-google-fit::before{content:"\F96B"}.mdi-google-glass::before{content:"\F2B8"}.mdi-google-hangouts::before{content:"\F2C9"}.mdi-google-home::before{content:"\F823"}.mdi-google-keep::before{content:"\F6DB"}.mdi-google-lens::before{content:"\F9F5"}.mdi-google-maps::before{content:"\F5F5"}.mdi-google-my-business::before{content:"\F006A"}.mdi-google-nearby::before{content:"\F2B9"}.mdi-google-pages::before{content:"\F2BA"}.mdi-google-photos::before{content:"\F6DC"}.mdi-google-physical-web::before{content:"\F2BB"}.mdi-google-play::before{content:"\F2BC"}.mdi-google-plus::before{content:"\F2BD"}.mdi-google-plus-box::before{content:"\F2BE"}.mdi-google-podcast::before{content:"\FED6"}.mdi-google-spreadsheet::before{content:"\F9F6"}.mdi-google-street-view::before{content:"\FC64"}.mdi-google-translate::before{content:"\F2BF"}.mdi-gradient::before{content:"\F69F"}.mdi-grain::before{content:"\FD58"}.mdi-graph::before{content:"\F006B"}.mdi-graph-outline::before{content:"\F006C"}.mdi-graphql::before{content:"\F876"}.mdi-grave-stone::before{content:"\FB7E"}.mdi-grease-pencil::before{content:"\F648"}.mdi-greater-than::before{content:"\F96C"}.mdi-greater-than-or-equal::before{content:"\F96D"}.mdi-grid::before{content:"\F2C1"}.mdi-grid-large::before{content:"\F757"}.mdi-grid-off::before{content:"\F2C2"}.mdi-grill::before{content:"\FE86"}.mdi-grill-outline::before{content:"\F01B5"}.mdi-group::before{content:"\F2C3"}.mdi-guitar-acoustic::before{content:"\F770"}.mdi-guitar-electric::before{content:"\F2C4"}.mdi-guitar-pick::before{content:"\F2C5"}.mdi-guitar-pick-outline::before{content:"\F2C6"}.mdi-guy-fawkes-mask::before{content:"\F824"}.mdi-hackernews::before{content:"\F624"}.mdi-hail::before{content:"\FAC0"}.mdi-hair-dryer::before{content:"\F011A"}.mdi-hair-dryer-outline::before{content:"\F011B"}.mdi-halloween::before{content:"\FB7F"}.mdi-hamburger::before{content:"\F684"}.mdi-hammer::before{content:"\F8E9"}.mdi-hammer-screwdriver::before{content:"\F034D"}.mdi-hammer-wrench::before{content:"\F034E"}.mdi-hand::before{content:"\FA4E"}.mdi-hand-heart::before{content:"\F011C"}.mdi-hand-left::before{content:"\FE87"}.mdi-hand-okay::before{content:"\FA4F"}.mdi-hand-peace::before{content:"\FA50"}.mdi-hand-peace-variant::before{content:"\FA51"}.mdi-hand-pointing-down::before{content:"\FA52"}.mdi-hand-pointing-left::before{content:"\FA53"}.mdi-hand-pointing-right::before{content:"\F2C7"}.mdi-hand-pointing-up::before{content:"\FA54"}.mdi-hand-right::before{content:"\FE88"}.mdi-hand-saw::before{content:"\FE89"}.mdi-handball::before{content:"\FF70"}.mdi-handcuffs::before{content:"\F0169"}.mdi-handshake::before{content:"\F0243"}.mdi-hanger::before{content:"\F2C8"}.mdi-hard-hat::before{content:"\F96E"}.mdi-harddisk::before{content:"\F2CA"}.mdi-harddisk-plus::before{content:"\F006D"}.mdi-harddisk-remove::before{content:"\F006E"}.mdi-hat-fedora::before{content:"\FB80"}.mdi-hazard-lights::before{content:"\FC65"}.mdi-hdr::before{content:"\FD59"}.mdi-hdr-off::before{content:"\FD5A"}.mdi-head::before{content:"\F0389"}.mdi-head-alert::before{content:"\F0363"}.mdi-head-alert-outline::before{content:"\F0364"}.mdi-head-check::before{content:"\F0365"}.mdi-head-check-outline::before{content:"\F0366"}.mdi-head-cog::before{content:"\F0367"}.mdi-head-cog-outline::before{content:"\F0368"}.mdi-head-dots-horizontal::before{content:"\F0369"}.mdi-head-dots-horizontal-outline::before{content:"\F036A"}.mdi-head-flash::before{content:"\F036B"}.mdi-head-flash-outline::before{content:"\F036C"}.mdi-head-heart::before{content:"\F036D"}.mdi-head-heart-outline::before{content:"\F036E"}.mdi-head-lightbulb::before{content:"\F036F"}.mdi-head-lightbulb-outline::before{content:"\F0370"}.mdi-head-minus::before{content:"\F0371"}.mdi-head-minus-outline::before{content:"\F0372"}.mdi-head-outline::before{content:"\F038A"}.mdi-head-plus::before{content:"\F0373"}.mdi-head-plus-outline::before{content:"\F0374"}.mdi-head-question::before{content:"\F0375"}.mdi-head-question-outline::before{content:"\F0376"}.mdi-head-remove::before{content:"\F0377"}.mdi-head-remove-outline::before{content:"\F0378"}.mdi-head-snowflake::before{content:"\F0379"}.mdi-head-snowflake-outline::before{content:"\F037A"}.mdi-head-sync::before{content:"\F037B"}.mdi-head-sync-outline::before{content:"\F037C"}.mdi-headphones::before{content:"\F2CB"}.mdi-headphones-bluetooth::before{content:"\F96F"}.mdi-headphones-box::before{content:"\F2CC"}.mdi-headphones-off::before{content:"\F7CD"}.mdi-headphones-settings::before{content:"\F2CD"}.mdi-headset::before{content:"\F2CE"}.mdi-headset-dock::before{content:"\F2CF"}.mdi-headset-off::before{content:"\F2D0"}.mdi-heart::before{content:"\F2D1"}.mdi-heart-box::before{content:"\F2D2"}.mdi-heart-box-outline::before{content:"\F2D3"}.mdi-heart-broken::before{content:"\F2D4"}.mdi-heart-broken-outline::before{content:"\FCF0"}.mdi-heart-circle::before{content:"\F970"}.mdi-heart-circle-outline::before{content:"\F971"}.mdi-heart-flash::before{content:"\FF16"}.mdi-heart-half::before{content:"\F6DE"}.mdi-heart-half-full::before{content:"\F6DD"}.mdi-heart-half-outline::before{content:"\F6DF"}.mdi-heart-multiple::before{content:"\FA55"}.mdi-heart-multiple-outline::before{content:"\FA56"}.mdi-heart-off::before{content:"\F758"}.mdi-heart-outline::before{content:"\F2D5"}.mdi-heart-pulse::before{content:"\F5F6"}.mdi-helicopter::before{content:"\FAC1"}.mdi-help::before{content:"\F2D6"}.mdi-help-box::before{content:"\F78A"}.mdi-help-circle::before{content:"\F2D7"}.mdi-help-circle-outline::before{content:"\F625"}.mdi-help-network::before{content:"\F6F4"}.mdi-help-network-outline::before{content:"\FC66"}.mdi-help-rhombus::before{content:"\FB81"}.mdi-help-rhombus-outline::before{content:"\FB82"}.mdi-hexadecimal::before{content:"\F02D2"}.mdi-hexagon::before{content:"\F2D8"}.mdi-hexagon-multiple::before{content:"\F6E0"}.mdi-hexagon-multiple-outline::before{content:"\F011D"}.mdi-hexagon-outline::before{content:"\F2D9"}.mdi-hexagon-slice-1::before{content:"\FAC2"}.mdi-hexagon-slice-2::before{content:"\FAC3"}.mdi-hexagon-slice-3::before{content:"\FAC4"}.mdi-hexagon-slice-4::before{content:"\FAC5"}.mdi-hexagon-slice-5::before{content:"\FAC6"}.mdi-hexagon-slice-6::before{content:"\FAC7"}.mdi-hexagram::before{content:"\FAC8"}.mdi-hexagram-outline::before{content:"\FAC9"}.mdi-high-definition::before{content:"\F7CE"}.mdi-high-definition-box::before{content:"\F877"}.mdi-highway::before{content:"\F5F7"}.mdi-hiking::before{content:"\FD5B"}.mdi-hinduism::before{content:"\F972"}.mdi-history::before{content:"\F2DA"}.mdi-hockey-puck::before{content:"\F878"}.mdi-hockey-sticks::before{content:"\F879"}.mdi-hololens::before{content:"\F2DB"}.mdi-home::before{content:"\F2DC"}.mdi-home-account::before{content:"\F825"}.mdi-home-alert::before{content:"\F87A"}.mdi-home-analytics::before{content:"\FED7"}.mdi-home-assistant::before{content:"\F7CF"}.mdi-home-automation::before{content:"\F7D0"}.mdi-home-circle::before{content:"\F7D1"}.mdi-home-circle-outline::before{content:"\F006F"}.mdi-home-city::before{content:"\FCF1"}.mdi-home-city-outline::before{content:"\FCF2"}.mdi-home-currency-usd::before{content:"\F8AE"}.mdi-home-edit::before{content:"\F0184"}.mdi-home-edit-outline::before{content:"\F0185"}.mdi-home-export-outline::before{content:"\FFB8"}.mdi-home-flood::before{content:"\FF17"}.mdi-home-floor-0::before{content:"\FDAE"}.mdi-home-floor-1::before{content:"\FD5C"}.mdi-home-floor-2::before{content:"\FD5D"}.mdi-home-floor-3::before{content:"\FD5E"}.mdi-home-floor-a::before{content:"\FD5F"}.mdi-home-floor-b::before{content:"\FD60"}.mdi-home-floor-g::before{content:"\FD61"}.mdi-home-floor-l::before{content:"\FD62"}.mdi-home-floor-negative-1::before{content:"\FDAF"}.mdi-home-group::before{content:"\FDB0"}.mdi-home-heart::before{content:"\F826"}.mdi-home-import-outline::before{content:"\FFB9"}.mdi-home-lightbulb::before{content:"\F027C"}.mdi-home-lightbulb-outline::before{content:"\F027D"}.mdi-home-lock::before{content:"\F8EA"}.mdi-home-lock-open::before{content:"\F8EB"}.mdi-home-map-marker::before{content:"\F5F8"}.mdi-home-minus::before{content:"\F973"}.mdi-home-modern::before{content:"\F2DD"}.mdi-home-outline::before{content:"\F6A0"}.mdi-home-plus::before{content:"\F974"}.mdi-home-remove::before{content:"\F0272"}.mdi-home-roof::before{content:"\F0156"}.mdi-home-thermometer::before{content:"\FF71"}.mdi-home-thermometer-outline::before{content:"\FF72"}.mdi-home-variant::before{content:"\F2DE"}.mdi-home-variant-outline::before{content:"\FB83"}.mdi-hook::before{content:"\F6E1"}.mdi-hook-off::before{content:"\F6E2"}.mdi-hops::before{content:"\F2DF"}.mdi-horizontal-rotate-clockwise::before{content:"\F011E"}.mdi-horizontal-rotate-counterclockwise::before{content:"\F011F"}.mdi-horseshoe::before{content:"\FA57"}.mdi-hospital::before{content:"\F0017"}.mdi-hospital-box::before{content:"\F2E0"}.mdi-hospital-box-outline::before{content:"\F0018"}.mdi-hospital-building::before{content:"\F2E1"}.mdi-hospital-marker::before{content:"\F2E2"}.mdi-hot-tub::before{content:"\F827"}.mdi-hotel::before{content:"\F2E3"}.mdi-houzz::before{content:"\F2E4"}.mdi-houzz-box::before{content:"\F2E5"}.mdi-hubspot::before{content:"\FCF3"}.mdi-hulu::before{content:"\F828"}.mdi-human::before{content:"\F2E6"}.mdi-human-child::before{content:"\F2E7"}.mdi-human-female::before{content:"\F649"}.mdi-human-female-boy::before{content:"\FA58"}.mdi-human-female-female::before{content:"\FA59"}.mdi-human-female-girl::before{content:"\FA5A"}.mdi-human-greeting::before{content:"\F64A"}.mdi-human-handsdown::before{content:"\F64B"}.mdi-human-handsup::before{content:"\F64C"}.mdi-human-male::before{content:"\F64D"}.mdi-human-male-boy::before{content:"\FA5B"}.mdi-human-male-female::before{content:"\F2E8"}.mdi-human-male-girl::before{content:"\FA5C"}.mdi-human-male-height::before{content:"\FF18"}.mdi-human-male-height-variant::before{content:"\FF19"}.mdi-human-male-male::before{content:"\FA5D"}.mdi-human-pregnant::before{content:"\F5CF"}.mdi-humble-bundle::before{content:"\F743"}.mdi-hvac::before{content:"\F037D"}.mdi-hydraulic-oil-level::before{content:"\F034F"}.mdi-hydraulic-oil-temperature::before{content:"\F0350"}.mdi-hydro-power::before{content:"\F0310"}.mdi-ice-cream::before{content:"\F829"}.mdi-ice-pop::before{content:"\FF1A"}.mdi-id-card::before{content:"\FFE0"}.mdi-identifier::before{content:"\FF1B"}.mdi-ideogram-cjk::before{content:"\F035C"}.mdi-ideogram-cjk-variant::before{content:"\F035D"}.mdi-iframe::before{content:"\FC67"}.mdi-iframe-array::before{content:"\F0120"}.mdi-iframe-array-outline::before{content:"\F0121"}.mdi-iframe-braces::before{content:"\F0122"}.mdi-iframe-braces-outline::before{content:"\F0123"}.mdi-iframe-outline::before{content:"\FC68"}.mdi-iframe-parentheses::before{content:"\F0124"}.mdi-iframe-parentheses-outline::before{content:"\F0125"}.mdi-iframe-variable::before{content:"\F0126"}.mdi-iframe-variable-outline::before{content:"\F0127"}.mdi-image::before{content:"\F2E9"}.mdi-image-album::before{content:"\F2EA"}.mdi-image-area::before{content:"\F2EB"}.mdi-image-area-close::before{content:"\F2EC"}.mdi-image-auto-adjust::before{content:"\FFE1"}.mdi-image-broken::before{content:"\F2ED"}.mdi-image-broken-variant::before{content:"\F2EE"}.mdi-image-edit::before{content:"\F020E"}.mdi-image-edit-outline::before{content:"\F020F"}.mdi-image-filter::before{content:"\F2EF"}.mdi-image-filter-black-white::before{content:"\F2F0"}.mdi-image-filter-center-focus::before{content:"\F2F1"}.mdi-image-filter-center-focus-strong::before{content:"\FF1C"}.mdi-image-filter-center-focus-strong-outline::before{content:"\FF1D"}.mdi-image-filter-center-focus-weak::before{content:"\F2F2"}.mdi-image-filter-drama::before{content:"\F2F3"}.mdi-image-filter-frames::before{content:"\F2F4"}.mdi-image-filter-hdr::before{content:"\F2F5"}.mdi-image-filter-none::before{content:"\F2F6"}.mdi-image-filter-tilt-shift::before{content:"\F2F7"}.mdi-image-filter-vintage::before{content:"\F2F8"}.mdi-image-frame::before{content:"\FE8A"}.mdi-image-move::before{content:"\F9F7"}.mdi-image-multiple::before{content:"\F2F9"}.mdi-image-off::before{content:"\F82A"}.mdi-image-off-outline::before{content:"\F01FC"}.mdi-image-outline::before{content:"\F975"}.mdi-image-plus::before{content:"\F87B"}.mdi-image-search::before{content:"\F976"}.mdi-image-search-outline::before{content:"\F977"}.mdi-image-size-select-actual::before{content:"\FC69"}.mdi-image-size-select-large::before{content:"\FC6A"}.mdi-image-size-select-small::before{content:"\FC6B"}.mdi-import::before{content:"\F2FA"}.mdi-inbox::before{content:"\F686"}.mdi-inbox-arrow-down::before{content:"\F2FB"}.mdi-inbox-arrow-down-outline::before{content:"\F029B"}.mdi-inbox-arrow-up::before{content:"\F3D1"}.mdi-inbox-arrow-up-outline::before{content:"\F029C"}.mdi-inbox-full::before{content:"\F029D"}.mdi-inbox-full-outline::before{content:"\F029E"}.mdi-inbox-multiple::before{content:"\F8AF"}.mdi-inbox-multiple-outline::before{content:"\FB84"}.mdi-inbox-outline::before{content:"\F029F"}.mdi-incognito::before{content:"\F5F9"}.mdi-infinity::before{content:"\F6E3"}.mdi-information::before{content:"\F2FC"}.mdi-information-outline::before{content:"\F2FD"}.mdi-information-variant::before{content:"\F64E"}.mdi-instagram::before{content:"\F2FE"}.mdi-instapaper::before{content:"\F2FF"}.mdi-instrument-triangle::before{content:"\F0070"}.mdi-internet-explorer::before{content:"\F300"}.mdi-invert-colors::before{content:"\F301"}.mdi-invert-colors-off::before{content:"\FE8B"}.mdi-iobroker::before{content:"\F0313"}.mdi-ip::before{content:"\FA5E"}.mdi-ip-network::before{content:"\FA5F"}.mdi-ip-network-outline::before{content:"\FC6C"}.mdi-ipod::before{content:"\FC6D"}.mdi-islam::before{content:"\F978"}.mdi-island::before{content:"\F0071"}.mdi-itunes::before{content:"\F676"}.mdi-iv-bag::before{content:"\F00E4"}.mdi-jabber::before{content:"\FDB1"}.mdi-jeepney::before{content:"\F302"}.mdi-jellyfish::before{content:"\FF1E"}.mdi-jellyfish-outline::before{content:"\FF1F"}.mdi-jira::before{content:"\F303"}.mdi-jquery::before{content:"\F87C"}.mdi-jsfiddle::before{content:"\F304"}.mdi-json::before{content:"\F626"}.mdi-judaism::before{content:"\F979"}.mdi-jump-rope::before{content:"\F032A"}.mdi-kabaddi::before{content:"\FD63"}.mdi-karate::before{content:"\F82B"}.mdi-keg::before{content:"\F305"}.mdi-kettle::before{content:"\F5FA"}.mdi-kettle-alert::before{content:"\F0342"}.mdi-kettle-alert-outline::before{content:"\F0343"}.mdi-kettle-off::before{content:"\F0346"}.mdi-kettle-off-outline::before{content:"\F0347"}.mdi-kettle-outline::before{content:"\FF73"}.mdi-kettle-steam::before{content:"\F0344"}.mdi-kettle-steam-outline::before{content:"\F0345"}.mdi-kettlebell::before{content:"\F032B"}.mdi-key::before{content:"\F306"}.mdi-key-arrow-right::before{content:"\F033D"}.mdi-key-change::before{content:"\F307"}.mdi-key-link::before{content:"\F01CA"}.mdi-key-minus::before{content:"\F308"}.mdi-key-outline::before{content:"\FDB2"}.mdi-key-plus::before{content:"\F309"}.mdi-key-remove::before{content:"\F30A"}.mdi-key-star::before{content:"\F01C9"}.mdi-key-variant::before{content:"\F30B"}.mdi-key-wireless::before{content:"\FFE2"}.mdi-keyboard::before{content:"\F30C"}.mdi-keyboard-backspace::before{content:"\F30D"}.mdi-keyboard-caps::before{content:"\F30E"}.mdi-keyboard-close::before{content:"\F30F"}.mdi-keyboard-esc::before{content:"\F02E2"}.mdi-keyboard-f1::before{content:"\F02D6"}.mdi-keyboard-f10::before{content:"\F02DF"}.mdi-keyboard-f11::before{content:"\F02E0"}.mdi-keyboard-f12::before{content:"\F02E1"}.mdi-keyboard-f2::before{content:"\F02D7"}.mdi-keyboard-f3::before{content:"\F02D8"}.mdi-keyboard-f4::before{content:"\F02D9"}.mdi-keyboard-f5::before{content:"\F02DA"}.mdi-keyboard-f6::before{content:"\F02DB"}.mdi-keyboard-f7::before{content:"\F02DC"}.mdi-keyboard-f8::before{content:"\F02DD"}.mdi-keyboard-f9::before{content:"\F02DE"}.mdi-keyboard-off::before{content:"\F310"}.mdi-keyboard-off-outline::before{content:"\FE8C"}.mdi-keyboard-outline::before{content:"\F97A"}.mdi-keyboard-return::before{content:"\F311"}.mdi-keyboard-settings::before{content:"\F9F8"}.mdi-keyboard-settings-outline::before{content:"\F9F9"}.mdi-keyboard-space::before{content:"\F0072"}.mdi-keyboard-tab::before{content:"\F312"}.mdi-keyboard-variant::before{content:"\F313"}.mdi-khanda::before{content:"\F0128"}.mdi-kickstarter::before{content:"\F744"}.mdi-klingon::before{content:"\F0386"}.mdi-knife::before{content:"\F9FA"}.mdi-knife-military::before{content:"\F9FB"}.mdi-kodi::before{content:"\F314"}.mdi-kotlin::before{content:"\F0244"}.mdi-kubernetes::before{content:"\F0129"}.mdi-label::before{content:"\F315"}.mdi-label-multiple::before{content:"\F03A0"}.mdi-label-multiple-outline::before{content:"\F03A1"}.mdi-label-off::before{content:"\FACA"}.mdi-label-off-outline::before{content:"\FACB"}.mdi-label-outline::before{content:"\F316"}.mdi-label-percent::before{content:"\F0315"}.mdi-label-percent-outline::before{content:"\F0316"}.mdi-label-variant::before{content:"\FACC"}.mdi-label-variant-outline::before{content:"\FACD"}.mdi-ladybug::before{content:"\F82C"}.mdi-lambda::before{content:"\F627"}.mdi-lamp::before{content:"\F6B4"}.mdi-lan::before{content:"\F317"}.mdi-lan-check::before{content:"\F02D5"}.mdi-lan-connect::before{content:"\F318"}.mdi-lan-disconnect::before{content:"\F319"}.mdi-lan-pending::before{content:"\F31A"}.mdi-language-c::before{content:"\F671"}.mdi-language-cpp::before{content:"\F672"}.mdi-language-csharp::before{content:"\F31B"}.mdi-language-css3::before{content:"\F31C"}.mdi-language-fortran::before{content:"\F0245"}.mdi-language-go::before{content:"\F7D2"}.mdi-language-haskell::before{content:"\FC6E"}.mdi-language-html5::before{content:"\F31D"}.mdi-language-java::before{content:"\FB1C"}.mdi-language-javascript::before{content:"\F31E"}.mdi-language-lua::before{content:"\F8B0"}.mdi-language-php::before{content:"\F31F"}.mdi-language-python::before{content:"\F320"}.mdi-language-python-text::before{content:"\F321"}.mdi-language-r::before{content:"\F7D3"}.mdi-language-ruby-on-rails::before{content:"\FACE"}.mdi-language-swift::before{content:"\F6E4"}.mdi-language-typescript::before{content:"\F6E5"}.mdi-laptop::before{content:"\F322"}.mdi-laptop-chromebook::before{content:"\F323"}.mdi-laptop-mac::before{content:"\F324"}.mdi-laptop-off::before{content:"\F6E6"}.mdi-laptop-windows::before{content:"\F325"}.mdi-laravel::before{content:"\FACF"}.mdi-lasso::before{content:"\FF20"}.mdi-lastfm::before{content:"\F326"}.mdi-lastpass::before{content:"\F446"}.mdi-latitude::before{content:"\FF74"}.mdi-launch::before{content:"\F327"}.mdi-lava-lamp::before{content:"\F7D4"}.mdi-layers::before{content:"\F328"}.mdi-layers-minus::before{content:"\FE8D"}.mdi-layers-off::before{content:"\F329"}.mdi-layers-off-outline::before{content:"\F9FC"}.mdi-layers-outline::before{content:"\F9FD"}.mdi-layers-plus::before{content:"\FE30"}.mdi-layers-remove::before{content:"\FE31"}.mdi-layers-search::before{content:"\F0231"}.mdi-layers-search-outline::before{content:"\F0232"}.mdi-layers-triple::before{content:"\FF75"}.mdi-layers-triple-outline::before{content:"\FF76"}.mdi-lead-pencil::before{content:"\F64F"}.mdi-leaf::before{content:"\F32A"}.mdi-leaf-maple::before{content:"\FC6F"}.mdi-leaf-maple-off::before{content:"\F0305"}.mdi-leaf-off::before{content:"\F0304"}.mdi-leak::before{content:"\FDB3"}.mdi-leak-off::before{content:"\FDB4"}.mdi-led-off::before{content:"\F32B"}.mdi-led-on::before{content:"\F32C"}.mdi-led-outline::before{content:"\F32D"}.mdi-led-strip::before{content:"\F7D5"}.mdi-led-strip-variant::before{content:"\F0073"}.mdi-led-variant-off::before{content:"\F32E"}.mdi-led-variant-on::before{content:"\F32F"}.mdi-led-variant-outline::before{content:"\F330"}.mdi-leek::before{content:"\F01A8"}.mdi-less-than::before{content:"\F97B"}.mdi-less-than-or-equal::before{content:"\F97C"}.mdi-library::before{content:"\F331"}.mdi-library-books::before{content:"\F332"}.mdi-library-movie::before{content:"\FCF4"}.mdi-library-music::before{content:"\F333"}.mdi-library-music-outline::before{content:"\FF21"}.mdi-library-shelves::before{content:"\FB85"}.mdi-library-video::before{content:"\FCF5"}.mdi-license::before{content:"\FFE3"}.mdi-lifebuoy::before{content:"\F87D"}.mdi-light-switch::before{content:"\F97D"}.mdi-lightbulb::before{content:"\F335"}.mdi-lightbulb-cfl::before{content:"\F0233"}.mdi-lightbulb-cfl-off::before{content:"\F0234"}.mdi-lightbulb-cfl-spiral::before{content:"\F02A0"}.mdi-lightbulb-cfl-spiral-off::before{content:"\F02EE"}.mdi-lightbulb-group::before{content:"\F027E"}.mdi-lightbulb-group-off::before{content:"\F02F8"}.mdi-lightbulb-group-off-outline::before{content:"\F02F9"}.mdi-lightbulb-group-outline::before{content:"\F027F"}.mdi-lightbulb-multiple::before{content:"\F0280"}.mdi-lightbulb-multiple-off::before{content:"\F02FA"}.mdi-lightbulb-multiple-off-outline::before{content:"\F02FB"}.mdi-lightbulb-multiple-outline::before{content:"\F0281"}.mdi-lightbulb-off::before{content:"\FE32"}.mdi-lightbulb-off-outline::before{content:"\FE33"}.mdi-lightbulb-on::before{content:"\F6E7"}.mdi-lightbulb-on-outline::before{content:"\F6E8"}.mdi-lightbulb-outline::before{content:"\F336"}.mdi-lighthouse::before{content:"\F9FE"}.mdi-lighthouse-on::before{content:"\F9FF"}.mdi-link::before{content:"\F337"}.mdi-link-box::before{content:"\FCF6"}.mdi-link-box-outline::before{content:"\FCF7"}.mdi-link-box-variant::before{content:"\FCF8"}.mdi-link-box-variant-outline::before{content:"\FCF9"}.mdi-link-lock::before{content:"\F00E5"}.mdi-link-off::before{content:"\F338"}.mdi-link-plus::before{content:"\FC70"}.mdi-link-variant::before{content:"\F339"}.mdi-link-variant-minus::before{content:"\F012A"}.mdi-link-variant-off::before{content:"\F33A"}.mdi-link-variant-plus::before{content:"\F012B"}.mdi-link-variant-remove::before{content:"\F012C"}.mdi-linkedin::before{content:"\F33B"}.mdi-linkedin-box::before{content:"\F33C"}.mdi-linux::before{content:"\F33D"}.mdi-linux-mint::before{content:"\F8EC"}.mdi-litecoin::before{content:"\FA60"}.mdi-loading::before{content:"\F771"}.mdi-location-enter::before{content:"\FFE4"}.mdi-location-exit::before{content:"\FFE5"}.mdi-lock::before{content:"\F33E"}.mdi-lock-alert::before{content:"\F8ED"}.mdi-lock-clock::before{content:"\F97E"}.mdi-lock-open::before{content:"\F33F"}.mdi-lock-open-outline::before{content:"\F340"}.mdi-lock-open-variant::before{content:"\FFE6"}.mdi-lock-open-variant-outline::before{content:"\FFE7"}.mdi-lock-outline::before{content:"\F341"}.mdi-lock-pattern::before{content:"\F6E9"}.mdi-lock-plus::before{content:"\F5FB"}.mdi-lock-question::before{content:"\F8EE"}.mdi-lock-reset::before{content:"\F772"}.mdi-lock-smart::before{content:"\F8B1"}.mdi-locker::before{content:"\F7D6"}.mdi-locker-multiple::before{content:"\F7D7"}.mdi-login::before{content:"\F342"}.mdi-login-variant::before{content:"\F5FC"}.mdi-logout::before{content:"\F343"}.mdi-logout-variant::before{content:"\F5FD"}.mdi-longitude::before{content:"\FF77"}.mdi-looks::before{content:"\F344"}.mdi-loupe::before{content:"\F345"}.mdi-lumx::before{content:"\F346"}.mdi-lungs::before{content:"\F00AF"}.mdi-lyft::before{content:"\FB1D"}.mdi-magnet::before{content:"\F347"}.mdi-magnet-on::before{content:"\F348"}.mdi-magnify::before{content:"\F349"}.mdi-magnify-close::before{content:"\F97F"}.mdi-magnify-minus::before{content:"\F34A"}.mdi-magnify-minus-cursor::before{content:"\FA61"}.mdi-magnify-minus-outline::before{content:"\F6EB"}.mdi-magnify-plus::before{content:"\F34B"}.mdi-magnify-plus-cursor::before{content:"\FA62"}.mdi-magnify-plus-outline::before{content:"\F6EC"}.mdi-magnify-remove-cursor::before{content:"\F0237"}.mdi-magnify-remove-outline::before{content:"\F0238"}.mdi-magnify-scan::before{content:"\F02A1"}.mdi-mail::before{content:"\FED8"}.mdi-mail-ru::before{content:"\F34C"}.mdi-mailbox::before{content:"\F6ED"}.mdi-mailbox-open::before{content:"\FD64"}.mdi-mailbox-open-outline::before{content:"\FD65"}.mdi-mailbox-open-up::before{content:"\FD66"}.mdi-mailbox-open-up-outline::before{content:"\FD67"}.mdi-mailbox-outline::before{content:"\FD68"}.mdi-mailbox-up::before{content:"\FD69"}.mdi-mailbox-up-outline::before{content:"\FD6A"}.mdi-map::before{content:"\F34D"}.mdi-map-check::before{content:"\FED9"}.mdi-map-check-outline::before{content:"\FEDA"}.mdi-map-clock::before{content:"\FCFA"}.mdi-map-clock-outline::before{content:"\FCFB"}.mdi-map-legend::before{content:"\FA00"}.mdi-map-marker::before{content:"\F34E"}.mdi-map-marker-alert::before{content:"\FF22"}.mdi-map-marker-alert-outline::before{content:"\FF23"}.mdi-map-marker-check::before{content:"\FC71"}.mdi-map-marker-check-outline::before{content:"\F0326"}.mdi-map-marker-circle::before{content:"\F34F"}.mdi-map-marker-distance::before{content:"\F8EF"}.mdi-map-marker-down::before{content:"\F012D"}.mdi-map-marker-left::before{content:"\F0306"}.mdi-map-marker-left-outline::before{content:"\F0308"}.mdi-map-marker-minus::before{content:"\F650"}.mdi-map-marker-minus-outline::before{content:"\F0324"}.mdi-map-marker-multiple::before{content:"\F350"}.mdi-map-marker-multiple-outline::before{content:"\F02A2"}.mdi-map-marker-off::before{content:"\F351"}.mdi-map-marker-off-outline::before{content:"\F0328"}.mdi-map-marker-outline::before{content:"\F7D8"}.mdi-map-marker-path::before{content:"\FCFC"}.mdi-map-marker-plus::before{content:"\F651"}.mdi-map-marker-plus-outline::before{content:"\F0323"}.mdi-map-marker-question::before{content:"\FF24"}.mdi-map-marker-question-outline::before{content:"\FF25"}.mdi-map-marker-radius::before{content:"\F352"}.mdi-map-marker-radius-outline::before{content:"\F0327"}.mdi-map-marker-remove::before{content:"\FF26"}.mdi-map-marker-remove-outline::before{content:"\F0325"}.mdi-map-marker-remove-variant::before{content:"\FF27"}.mdi-map-marker-right::before{content:"\F0307"}.mdi-map-marker-right-outline::before{content:"\F0309"}.mdi-map-marker-up::before{content:"\F012E"}.mdi-map-minus::before{content:"\F980"}.mdi-map-outline::before{content:"\F981"}.mdi-map-plus::before{content:"\F982"}.mdi-map-search::before{content:"\F983"}.mdi-map-search-outline::before{content:"\F984"}.mdi-mapbox::before{content:"\FB86"}.mdi-margin::before{content:"\F353"}.mdi-markdown::before{content:"\F354"}.mdi-markdown-outline::before{content:"\FF78"}.mdi-marker::before{content:"\F652"}.mdi-marker-cancel::before{content:"\FDB5"}.mdi-marker-check::before{content:"\F355"}.mdi-mastodon::before{content:"\FAD0"}.mdi-mastodon-variant::before{content:"\FAD1"}.mdi-material-design::before{content:"\F985"}.mdi-material-ui::before{content:"\F357"}.mdi-math-compass::before{content:"\F358"}.mdi-math-cos::before{content:"\FC72"}.mdi-math-integral::before{content:"\FFE8"}.mdi-math-integral-box::before{content:"\FFE9"}.mdi-math-log::before{content:"\F00B0"}.mdi-math-norm::before{content:"\FFEA"}.mdi-math-norm-box::before{content:"\FFEB"}.mdi-math-sin::before{content:"\FC73"}.mdi-math-tan::before{content:"\FC74"}.mdi-matrix::before{content:"\F628"}.mdi-medal::before{content:"\F986"}.mdi-medal-outline::before{content:"\F0351"}.mdi-medical-bag::before{content:"\F6EE"}.mdi-meditation::before{content:"\F01A6"}.mdi-medium::before{content:"\F35A"}.mdi-meetup::before{content:"\FAD2"}.mdi-memory::before{content:"\F35B"}.mdi-menu::before{content:"\F35C"}.mdi-menu-down::before{content:"\F35D"}.mdi-menu-down-outline::before{content:"\F6B5"}.mdi-menu-left::before{content:"\F35E"}.mdi-menu-left-outline::before{content:"\FA01"}.mdi-menu-open::before{content:"\FB87"}.mdi-menu-right::before{content:"\F35F"}.mdi-menu-right-outline::before{content:"\FA02"}.mdi-menu-swap::before{content:"\FA63"}.mdi-menu-swap-outline::before{content:"\FA64"}.mdi-menu-up::before{content:"\F360"}.mdi-menu-up-outline::before{content:"\F6B6"}.mdi-merge::before{content:"\FF79"}.mdi-message::before{content:"\F361"}.mdi-message-alert::before{content:"\F362"}.mdi-message-alert-outline::before{content:"\FA03"}.mdi-message-arrow-left::before{content:"\F031D"}.mdi-message-arrow-left-outline::before{content:"\F031E"}.mdi-message-arrow-right::before{content:"\F031F"}.mdi-message-arrow-right-outline::before{content:"\F0320"}.mdi-message-bulleted::before{content:"\F6A1"}.mdi-message-bulleted-off::before{content:"\F6A2"}.mdi-message-draw::before{content:"\F363"}.mdi-message-image::before{content:"\F364"}.mdi-message-image-outline::before{content:"\F0197"}.mdi-message-lock::before{content:"\FFEC"}.mdi-message-lock-outline::before{content:"\F0198"}.mdi-message-minus::before{content:"\F0199"}.mdi-message-minus-outline::before{content:"\F019A"}.mdi-message-outline::before{content:"\F365"}.mdi-message-plus::before{content:"\F653"}.mdi-message-plus-outline::before{content:"\F00E6"}.mdi-message-processing::before{content:"\F366"}.mdi-message-processing-outline::before{content:"\F019B"}.mdi-message-reply::before{content:"\F367"}.mdi-message-reply-text::before{content:"\F368"}.mdi-message-settings::before{content:"\F6EF"}.mdi-message-settings-outline::before{content:"\F019C"}.mdi-message-settings-variant::before{content:"\F6F0"}.mdi-message-settings-variant-outline::before{content:"\F019D"}.mdi-message-text::before{content:"\F369"}.mdi-message-text-clock::before{content:"\F019E"}.mdi-message-text-clock-outline::before{content:"\F019F"}.mdi-message-text-lock::before{content:"\FFED"}.mdi-message-text-lock-outline::before{content:"\F01A0"}.mdi-message-text-outline::before{content:"\F36A"}.mdi-message-video::before{content:"\F36B"}.mdi-meteor::before{content:"\F629"}.mdi-metronome::before{content:"\F7D9"}.mdi-metronome-tick::before{content:"\F7DA"}.mdi-micro-sd::before{content:"\F7DB"}.mdi-microphone::before{content:"\F36C"}.mdi-microphone-minus::before{content:"\F8B2"}.mdi-microphone-off::before{content:"\F36D"}.mdi-microphone-outline::before{content:"\F36E"}.mdi-microphone-plus::before{content:"\F8B3"}.mdi-microphone-settings::before{content:"\F36F"}.mdi-microphone-variant::before{content:"\F370"}.mdi-microphone-variant-off::before{content:"\F371"}.mdi-microscope::before{content:"\F654"}.mdi-microsoft::before{content:"\F372"}.mdi-microsoft-dynamics::before{content:"\F987"}.mdi-microwave::before{content:"\FC75"}.mdi-middleware::before{content:"\FF7A"}.mdi-middleware-outline::before{content:"\FF7B"}.mdi-midi::before{content:"\F8F0"}.mdi-midi-port::before{content:"\F8F1"}.mdi-mine::before{content:"\FDB6"}.mdi-minecraft::before{content:"\F373"}.mdi-mini-sd::before{content:"\FA04"}.mdi-minidisc::before{content:"\FA05"}.mdi-minus::before{content:"\F374"}.mdi-minus-box::before{content:"\F375"}.mdi-minus-box-multiple::before{content:"\F016C"}.mdi-minus-box-multiple-outline::before{content:"\F016D"}.mdi-minus-box-outline::before{content:"\F6F1"}.mdi-minus-circle::before{content:"\F376"}.mdi-minus-circle-outline::before{content:"\F377"}.mdi-minus-network::before{content:"\F378"}.mdi-minus-network-outline::before{content:"\FC76"}.mdi-mirror::before{content:"\F0228"}.mdi-mixcloud::before{content:"\F62A"}.mdi-mixed-martial-arts::before{content:"\FD6B"}.mdi-mixed-reality::before{content:"\F87E"}.mdi-mixer::before{content:"\F7DC"}.mdi-molecule::before{content:"\FB88"}.mdi-monitor::before{content:"\F379"}.mdi-monitor-cellphone::before{content:"\F988"}.mdi-monitor-cellphone-star::before{content:"\F989"}.mdi-monitor-clean::before{content:"\F012F"}.mdi-monitor-dashboard::before{content:"\FA06"}.mdi-monitor-edit::before{content:"\F02F1"}.mdi-monitor-lock::before{content:"\FDB7"}.mdi-monitor-multiple::before{content:"\F37A"}.mdi-monitor-off::before{content:"\FD6C"}.mdi-monitor-screenshot::before{content:"\FE34"}.mdi-monitor-speaker::before{content:"\FF7C"}.mdi-monitor-speaker-off::before{content:"\FF7D"}.mdi-monitor-star::before{content:"\FDB8"}.mdi-moon-first-quarter::before{content:"\FF7E"}.mdi-moon-full::before{content:"\FF7F"}.mdi-moon-last-quarter::before{content:"\FF80"}.mdi-moon-new::before{content:"\FF81"}.mdi-moon-waning-crescent::before{content:"\FF82"}.mdi-moon-waning-gibbous::before{content:"\FF83"}.mdi-moon-waxing-crescent::before{content:"\FF84"}.mdi-moon-waxing-gibbous::before{content:"\FF85"}.mdi-moped::before{content:"\F00B1"}.mdi-more::before{content:"\F37B"}.mdi-mother-heart::before{content:"\F033F"}.mdi-mother-nurse::before{content:"\FCFD"}.mdi-motion-sensor::before{content:"\FD6D"}.mdi-motorbike::before{content:"\F37C"}.mdi-mouse::before{content:"\F37D"}.mdi-mouse-bluetooth::before{content:"\F98A"}.mdi-mouse-off::before{content:"\F37E"}.mdi-mouse-variant::before{content:"\F37F"}.mdi-mouse-variant-off::before{content:"\F380"}.mdi-move-resize::before{content:"\F655"}.mdi-move-resize-variant::before{content:"\F656"}.mdi-movie::before{content:"\F381"}.mdi-movie-edit::before{content:"\F014D"}.mdi-movie-edit-outline::before{content:"\F014E"}.mdi-movie-filter::before{content:"\F014F"}.mdi-movie-filter-outline::before{content:"\F0150"}.mdi-movie-open::before{content:"\FFEE"}.mdi-movie-open-outline::before{content:"\FFEF"}.mdi-movie-outline::before{content:"\FDB9"}.mdi-movie-roll::before{content:"\F7DD"}.mdi-movie-search::before{content:"\F01FD"}.mdi-movie-search-outline::before{content:"\F01FE"}.mdi-muffin::before{content:"\F98B"}.mdi-multiplication::before{content:"\F382"}.mdi-multiplication-box::before{content:"\F383"}.mdi-mushroom::before{content:"\F7DE"}.mdi-mushroom-outline::before{content:"\F7DF"}.mdi-music::before{content:"\F759"}.mdi-music-accidental-double-flat::before{content:"\FF86"}.mdi-music-accidental-double-sharp::before{content:"\FF87"}.mdi-music-accidental-flat::before{content:"\FF88"}.mdi-music-accidental-natural::before{content:"\FF89"}.mdi-music-accidental-sharp::before{content:"\FF8A"}.mdi-music-box::before{content:"\F384"}.mdi-music-box-outline::before{content:"\F385"}.mdi-music-circle::before{content:"\F386"}.mdi-music-circle-outline::before{content:"\FAD3"}.mdi-music-clef-alto::before{content:"\FF8B"}.mdi-music-clef-bass::before{content:"\FF8C"}.mdi-music-clef-treble::before{content:"\FF8D"}.mdi-music-note::before{content:"\F387"}.mdi-music-note-bluetooth::before{content:"\F5FE"}.mdi-music-note-bluetooth-off::before{content:"\F5FF"}.mdi-music-note-eighth::before{content:"\F388"}.mdi-music-note-eighth-dotted::before{content:"\FF8E"}.mdi-music-note-half::before{content:"\F389"}.mdi-music-note-half-dotted::before{content:"\FF8F"}.mdi-music-note-off::before{content:"\F38A"}.mdi-music-note-off-outline::before{content:"\FF90"}.mdi-music-note-outline::before{content:"\FF91"}.mdi-music-note-plus::before{content:"\FDBA"}.mdi-music-note-quarter::before{content:"\F38B"}.mdi-music-note-quarter-dotted::before{content:"\FF92"}.mdi-music-note-sixteenth::before{content:"\F38C"}.mdi-music-note-sixteenth-dotted::before{content:"\FF93"}.mdi-music-note-whole::before{content:"\F38D"}.mdi-music-note-whole-dotted::before{content:"\FF94"}.mdi-music-off::before{content:"\F75A"}.mdi-music-rest-eighth::before{content:"\FF95"}.mdi-music-rest-half::before{content:"\FF96"}.mdi-music-rest-quarter::before{content:"\FF97"}.mdi-music-rest-sixteenth::before{content:"\FF98"}.mdi-music-rest-whole::before{content:"\FF99"}.mdi-nail::before{content:"\FDBB"}.mdi-nas::before{content:"\F8F2"}.mdi-nativescript::before{content:"\F87F"}.mdi-nature::before{content:"\F38E"}.mdi-nature-people::before{content:"\F38F"}.mdi-navigation::before{content:"\F390"}.mdi-near-me::before{content:"\F5CD"}.mdi-necklace::before{content:"\FF28"}.mdi-needle::before{content:"\F391"}.mdi-netflix::before{content:"\F745"}.mdi-network::before{content:"\F6F2"}.mdi-network-off::before{content:"\FC77"}.mdi-network-off-outline::before{content:"\FC78"}.mdi-network-outline::before{content:"\FC79"}.mdi-network-router::before{content:"\F00B2"}.mdi-network-strength-1::before{content:"\F8F3"}.mdi-network-strength-1-alert::before{content:"\F8F4"}.mdi-network-strength-2::before{content:"\F8F5"}.mdi-network-strength-2-alert::before{content:"\F8F6"}.mdi-network-strength-3::before{content:"\F8F7"}.mdi-network-strength-3-alert::before{content:"\F8F8"}.mdi-network-strength-4::before{content:"\F8F9"}.mdi-network-strength-4-alert::before{content:"\F8FA"}.mdi-network-strength-off::before{content:"\F8FB"}.mdi-network-strength-off-outline::before{content:"\F8FC"}.mdi-network-strength-outline::before{content:"\F8FD"}.mdi-new-box::before{content:"\F394"}.mdi-newspaper::before{content:"\F395"}.mdi-newspaper-minus::before{content:"\FF29"}.mdi-newspaper-plus::before{content:"\FF2A"}.mdi-newspaper-variant::before{content:"\F0023"}.mdi-newspaper-variant-multiple::before{content:"\F0024"}.mdi-newspaper-variant-multiple-outline::before{content:"\F0025"}.mdi-newspaper-variant-outline::before{content:"\F0026"}.mdi-nfc::before{content:"\F396"}.mdi-nfc-off::before{content:"\FE35"}.mdi-nfc-search-variant::before{content:"\FE36"}.mdi-nfc-tap::before{content:"\F397"}.mdi-nfc-variant::before{content:"\F398"}.mdi-nfc-variant-off::before{content:"\FE37"}.mdi-ninja::before{content:"\F773"}.mdi-nintendo-switch::before{content:"\F7E0"}.mdi-nix::before{content:"\F0130"}.mdi-nodejs::before{content:"\F399"}.mdi-noodles::before{content:"\F01A9"}.mdi-not-equal::before{content:"\F98C"}.mdi-not-equal-variant::before{content:"\F98D"}.mdi-note::before{content:"\F39A"}.mdi-note-multiple::before{content:"\F6B7"}.mdi-note-multiple-outline::before{content:"\F6B8"}.mdi-note-outline::before{content:"\F39B"}.mdi-note-plus::before{content:"\F39C"}.mdi-note-plus-outline::before{content:"\F39D"}.mdi-note-text::before{content:"\F39E"}.mdi-note-text-outline::before{content:"\F0202"}.mdi-notebook::before{content:"\F82D"}.mdi-notebook-multiple::before{content:"\FE38"}.mdi-notebook-outline::before{content:"\FEDC"}.mdi-notification-clear-all::before{content:"\F39F"}.mdi-npm::before{content:"\F6F6"}.mdi-npm-variant::before{content:"\F98E"}.mdi-npm-variant-outline::before{content:"\F98F"}.mdi-nuke::before{content:"\F6A3"}.mdi-null::before{content:"\F7E1"}.mdi-numeric::before{content:"\F3A0"}.mdi-numeric-0::before{content:"\30"}.mdi-numeric-0-box::before{content:"\F3A1"}.mdi-numeric-0-box-multiple::before{content:"\FF2B"}.mdi-numeric-0-box-multiple-outline::before{content:"\F3A2"}.mdi-numeric-0-box-outline::before{content:"\F3A3"}.mdi-numeric-0-circle::before{content:"\FC7A"}.mdi-numeric-0-circle-outline::before{content:"\FC7B"}.mdi-numeric-1::before{content:"\31"}.mdi-numeric-1-box::before{content:"\F3A4"}.mdi-numeric-1-box-multiple::before{content:"\FF2C"}.mdi-numeric-1-box-multiple-outline::before{content:"\F3A5"}.mdi-numeric-1-box-outline::before{content:"\F3A6"}.mdi-numeric-1-circle::before{content:"\FC7C"}.mdi-numeric-1-circle-outline::before{content:"\FC7D"}.mdi-numeric-10::before{content:"\F000A"}.mdi-numeric-10-box::before{content:"\FF9A"}.mdi-numeric-10-box-multiple::before{content:"\F000B"}.mdi-numeric-10-box-multiple-outline::before{content:"\F000C"}.mdi-numeric-10-box-outline::before{content:"\FF9B"}.mdi-numeric-10-circle::before{content:"\F000D"}.mdi-numeric-10-circle-outline::before{content:"\F000E"}.mdi-numeric-2::before{content:"\32"}.mdi-numeric-2-box::before{content:"\F3A7"}.mdi-numeric-2-box-multiple::before{content:"\FF2D"}.mdi-numeric-2-box-multiple-outline::before{content:"\F3A8"}.mdi-numeric-2-box-outline::before{content:"\F3A9"}.mdi-numeric-2-circle::before{content:"\FC7E"}.mdi-numeric-2-circle-outline::before{content:"\FC7F"}.mdi-numeric-3::before{content:"\33"}.mdi-numeric-3-box::before{content:"\F3AA"}.mdi-numeric-3-box-multiple::before{content:"\FF2E"}.mdi-numeric-3-box-multiple-outline::before{content:"\F3AB"}.mdi-numeric-3-box-outline::before{content:"\F3AC"}.mdi-numeric-3-circle::before{content:"\FC80"}.mdi-numeric-3-circle-outline::before{content:"\FC81"}.mdi-numeric-4::before{content:"\34"}.mdi-numeric-4-box::before{content:"\F3AD"}.mdi-numeric-4-box-multiple::before{content:"\FF2F"}.mdi-numeric-4-box-multiple-outline::before{content:"\F3AE"}.mdi-numeric-4-box-outline::before{content:"\F3AF"}.mdi-numeric-4-circle::before{content:"\FC82"}.mdi-numeric-4-circle-outline::before{content:"\FC83"}.mdi-numeric-5::before{content:"\35"}.mdi-numeric-5-box::before{content:"\F3B0"}.mdi-numeric-5-box-multiple::before{content:"\FF30"}.mdi-numeric-5-box-multiple-outline::before{content:"\F3B1"}.mdi-numeric-5-box-outline::before{content:"\F3B2"}.mdi-numeric-5-circle::before{content:"\FC84"}.mdi-numeric-5-circle-outline::before{content:"\FC85"}.mdi-numeric-6::before{content:"\36"}.mdi-numeric-6-box::before{content:"\F3B3"}.mdi-numeric-6-box-multiple::before{content:"\FF31"}.mdi-numeric-6-box-multiple-outline::before{content:"\F3B4"}.mdi-numeric-6-box-outline::before{content:"\F3B5"}.mdi-numeric-6-circle::before{content:"\FC86"}.mdi-numeric-6-circle-outline::before{content:"\FC87"}.mdi-numeric-7::before{content:"\37"}.mdi-numeric-7-box::before{content:"\F3B6"}.mdi-numeric-7-box-multiple::before{content:"\FF32"}.mdi-numeric-7-box-multiple-outline::before{content:"\F3B7"}.mdi-numeric-7-box-outline::before{content:"\F3B8"}.mdi-numeric-7-circle::before{content:"\FC88"}.mdi-numeric-7-circle-outline::before{content:"\FC89"}.mdi-numeric-8::before{content:"\38"}.mdi-numeric-8-box::before{content:"\F3B9"}.mdi-numeric-8-box-multiple::before{content:"\FF33"}.mdi-numeric-8-box-multiple-outline::before{content:"\F3BA"}.mdi-numeric-8-box-outline::before{content:"\F3BB"}.mdi-numeric-8-circle::before{content:"\FC8A"}.mdi-numeric-8-circle-outline::before{content:"\FC8B"}.mdi-numeric-9::before{content:"\39"}.mdi-numeric-9-box::before{content:"\F3BC"}.mdi-numeric-9-box-multiple::before{content:"\FF34"}.mdi-numeric-9-box-multiple-outline::before{content:"\F3BD"}.mdi-numeric-9-box-outline::before{content:"\F3BE"}.mdi-numeric-9-circle::before{content:"\FC8C"}.mdi-numeric-9-circle-outline::before{content:"\FC8D"}.mdi-numeric-9-plus::before{content:"\F000F"}.mdi-numeric-9-plus-box::before{content:"\F3BF"}.mdi-numeric-9-plus-box-multiple::before{content:"\FF35"}.mdi-numeric-9-plus-box-multiple-outline::before{content:"\F3C0"}.mdi-numeric-9-plus-box-outline::before{content:"\F3C1"}.mdi-numeric-9-plus-circle::before{content:"\FC8E"}.mdi-numeric-9-plus-circle-outline::before{content:"\FC8F"}.mdi-numeric-negative-1::before{content:"\F0074"}.mdi-nut::before{content:"\F6F7"}.mdi-nutrition::before{content:"\F3C2"}.mdi-nuxt::before{content:"\F0131"}.mdi-oar::before{content:"\F67B"}.mdi-ocarina::before{content:"\FDBC"}.mdi-oci::before{content:"\F0314"}.mdi-ocr::before{content:"\F0165"}.mdi-octagon::before{content:"\F3C3"}.mdi-octagon-outline::before{content:"\F3C4"}.mdi-octagram::before{content:"\F6F8"}.mdi-octagram-outline::before{content:"\F774"}.mdi-odnoklassniki::before{content:"\F3C5"}.mdi-offer::before{content:"\F0246"}.mdi-office::before{content:"\F3C6"}.mdi-office-building::before{content:"\F990"}.mdi-oil::before{content:"\F3C7"}.mdi-oil-lamp::before{content:"\FF36"}.mdi-oil-level::before{content:"\F0075"}.mdi-oil-temperature::before{content:"\F0019"}.mdi-omega::before{content:"\F3C9"}.mdi-one-up::before{content:"\FB89"}.mdi-onedrive::before{content:"\F3CA"}.mdi-onenote::before{content:"\F746"}.mdi-onepassword::before{content:"\F880"}.mdi-opacity::before{content:"\F5CC"}.mdi-open-in-app::before{content:"\F3CB"}.mdi-open-in-new::before{content:"\F3CC"}.mdi-open-source-initiative::before{content:"\FB8A"}.mdi-openid::before{content:"\F3CD"}.mdi-opera::before{content:"\F3CE"}.mdi-orbit::before{content:"\F018"}.mdi-origin::before{content:"\FB2B"}.mdi-ornament::before{content:"\F3CF"}.mdi-ornament-variant::before{content:"\F3D0"}.mdi-outdoor-lamp::before{content:"\F0076"}.mdi-outlook::before{content:"\FCFE"}.mdi-overscan::before{content:"\F0027"}.mdi-owl::before{content:"\F3D2"}.mdi-pac-man::before{content:"\FB8B"}.mdi-package::before{content:"\F3D3"}.mdi-package-down::before{content:"\F3D4"}.mdi-package-up::before{content:"\F3D5"}.mdi-package-variant::before{content:"\F3D6"}.mdi-package-variant-closed::before{content:"\F3D7"}.mdi-page-first::before{content:"\F600"}.mdi-page-last::before{content:"\F601"}.mdi-page-layout-body::before{content:"\F6F9"}.mdi-page-layout-footer::before{content:"\F6FA"}.mdi-page-layout-header::before{content:"\F6FB"}.mdi-page-layout-header-footer::before{content:"\FF9C"}.mdi-page-layout-sidebar-left::before{content:"\F6FC"}.mdi-page-layout-sidebar-right::before{content:"\F6FD"}.mdi-page-next::before{content:"\FB8C"}.mdi-page-next-outline::before{content:"\FB8D"}.mdi-page-previous::before{content:"\FB8E"}.mdi-page-previous-outline::before{content:"\FB8F"}.mdi-palette::before{content:"\F3D8"}.mdi-palette-advanced::before{content:"\F3D9"}.mdi-palette-outline::before{content:"\FE6C"}.mdi-palette-swatch::before{content:"\F8B4"}.mdi-palette-swatch-outline::before{content:"\F0387"}.mdi-palm-tree::before{content:"\F0077"}.mdi-pan::before{content:"\FB90"}.mdi-pan-bottom-left::before{content:"\FB91"}.mdi-pan-bottom-right::before{content:"\FB92"}.mdi-pan-down::before{content:"\FB93"}.mdi-pan-horizontal::before{content:"\FB94"}.mdi-pan-left::before{content:"\FB95"}.mdi-pan-right::before{content:"\FB96"}.mdi-pan-top-left::before{content:"\FB97"}.mdi-pan-top-right::before{content:"\FB98"}.mdi-pan-up::before{content:"\FB99"}.mdi-pan-vertical::before{content:"\FB9A"}.mdi-panda::before{content:"\F3DA"}.mdi-pandora::before{content:"\F3DB"}.mdi-panorama::before{content:"\F3DC"}.mdi-panorama-fisheye::before{content:"\F3DD"}.mdi-panorama-horizontal::before{content:"\F3DE"}.mdi-panorama-vertical::before{content:"\F3DF"}.mdi-panorama-wide-angle::before{content:"\F3E0"}.mdi-paper-cut-vertical::before{content:"\F3E1"}.mdi-paper-roll::before{content:"\F0182"}.mdi-paper-roll-outline::before{content:"\F0183"}.mdi-paperclip::before{content:"\F3E2"}.mdi-parachute::before{content:"\FC90"}.mdi-parachute-outline::before{content:"\FC91"}.mdi-parking::before{content:"\F3E3"}.mdi-party-popper::before{content:"\F0078"}.mdi-passport::before{content:"\F7E2"}.mdi-passport-biometric::before{content:"\FDBD"}.mdi-pasta::before{content:"\F018B"}.mdi-patio-heater::before{content:"\FF9D"}.mdi-patreon::before{content:"\F881"}.mdi-pause::before{content:"\F3E4"}.mdi-pause-circle::before{content:"\F3E5"}.mdi-pause-circle-outline::before{content:"\F3E6"}.mdi-pause-octagon::before{content:"\F3E7"}.mdi-pause-octagon-outline::before{content:"\F3E8"}.mdi-paw::before{content:"\F3E9"}.mdi-paw-off::before{content:"\F657"}.mdi-paypal::before{content:"\F882"}.mdi-pdf-box::before{content:"\FE39"}.mdi-peace::before{content:"\F883"}.mdi-peanut::before{content:"\F001E"}.mdi-peanut-off::before{content:"\F001F"}.mdi-peanut-off-outline::before{content:"\F0021"}.mdi-peanut-outline::before{content:"\F0020"}.mdi-pen::before{content:"\F3EA"}.mdi-pen-lock::before{content:"\FDBE"}.mdi-pen-minus::before{content:"\FDBF"}.mdi-pen-off::before{content:"\FDC0"}.mdi-pen-plus::before{content:"\FDC1"}.mdi-pen-remove::before{content:"\FDC2"}.mdi-pencil::before{content:"\F3EB"}.mdi-pencil-box::before{content:"\F3EC"}.mdi-pencil-box-multiple::before{content:"\F016F"}.mdi-pencil-box-multiple-outline::before{content:"\F0170"}.mdi-pencil-box-outline::before{content:"\F3ED"}.mdi-pencil-circle::before{content:"\F6FE"}.mdi-pencil-circle-outline::before{content:"\F775"}.mdi-pencil-lock::before{content:"\F3EE"}.mdi-pencil-lock-outline::before{content:"\FDC3"}.mdi-pencil-minus::before{content:"\FDC4"}.mdi-pencil-minus-outline::before{content:"\FDC5"}.mdi-pencil-off::before{content:"\F3EF"}.mdi-pencil-off-outline::before{content:"\FDC6"}.mdi-pencil-outline::before{content:"\FC92"}.mdi-pencil-plus::before{content:"\FDC7"}.mdi-pencil-plus-outline::before{content:"\FDC8"}.mdi-pencil-remove::before{content:"\FDC9"}.mdi-pencil-remove-outline::before{content:"\FDCA"}.mdi-pencil-ruler::before{content:"\F037E"}.mdi-penguin::before{content:"\FEDD"}.mdi-pentagon::before{content:"\F6FF"}.mdi-pentagon-outline::before{content:"\F700"}.mdi-percent::before{content:"\F3F0"}.mdi-percent-outline::before{content:"\F02A3"}.mdi-periodic-table::before{content:"\F8B5"}.mdi-periodic-table-co::before{content:"\F0329"}.mdi-periodic-table-co2::before{content:"\F7E3"}.mdi-periscope::before{content:"\F747"}.mdi-perspective-less::before{content:"\FCFF"}.mdi-perspective-more::before{content:"\FD00"}.mdi-pharmacy::before{content:"\F3F1"}.mdi-phone::before{content:"\F3F2"}.mdi-phone-alert::before{content:"\FF37"}.mdi-phone-alert-outline::before{content:"\F01B9"}.mdi-phone-bluetooth::before{content:"\F3F3"}.mdi-phone-bluetooth-outline::before{content:"\F01BA"}.mdi-phone-cancel::before{content:"\F00E7"}.mdi-phone-cancel-outline::before{content:"\F01BB"}.mdi-phone-check::before{content:"\F01D4"}.mdi-phone-check-outline::before{content:"\F01D5"}.mdi-phone-classic::before{content:"\F602"}.mdi-phone-classic-off::before{content:"\F02A4"}.mdi-phone-forward::before{content:"\F3F4"}.mdi-phone-forward-outline::before{content:"\F01BC"}.mdi-phone-hangup::before{content:"\F3F5"}.mdi-phone-hangup-outline::before{content:"\F01BD"}.mdi-phone-in-talk::before{content:"\F3F6"}.mdi-phone-in-talk-outline::before{content:"\F01AD"}.mdi-phone-incoming::before{content:"\F3F7"}.mdi-phone-incoming-outline::before{content:"\F01BE"}.mdi-phone-lock::before{content:"\F3F8"}.mdi-phone-lock-outline::before{content:"\F01BF"}.mdi-phone-log::before{content:"\F3F9"}.mdi-phone-log-outline::before{content:"\F01C0"}.mdi-phone-message::before{content:"\F01C1"}.mdi-phone-message-outline::before{content:"\F01C2"}.mdi-phone-minus::before{content:"\F658"}.mdi-phone-minus-outline::before{content:"\F01C3"}.mdi-phone-missed::before{content:"\F3FA"}.mdi-phone-missed-outline::before{content:"\F01D0"}.mdi-phone-off::before{content:"\FDCB"}.mdi-phone-off-outline::before{content:"\F01D1"}.mdi-phone-outgoing::before{content:"\F3FB"}.mdi-phone-outgoing-outline::before{content:"\F01C4"}.mdi-phone-outline::before{content:"\FDCC"}.mdi-phone-paused::before{content:"\F3FC"}.mdi-phone-paused-outline::before{content:"\F01C5"}.mdi-phone-plus::before{content:"\F659"}.mdi-phone-plus-outline::before{content:"\F01C6"}.mdi-phone-return::before{content:"\F82E"}.mdi-phone-return-outline::before{content:"\F01C7"}.mdi-phone-ring::before{content:"\F01D6"}.mdi-phone-ring-outline::before{content:"\F01D7"}.mdi-phone-rotate-landscape::before{content:"\F884"}.mdi-phone-rotate-portrait::before{content:"\F885"}.mdi-phone-settings::before{content:"\F3FD"}.mdi-phone-settings-outline::before{content:"\F01C8"}.mdi-phone-voip::before{content:"\F3FE"}.mdi-pi::before{content:"\F3FF"}.mdi-pi-box::before{content:"\F400"}.mdi-pi-hole::before{content:"\FDCD"}.mdi-piano::before{content:"\F67C"}.mdi-pickaxe::before{content:"\F8B6"}.mdi-picture-in-picture-bottom-right::before{content:"\FE3A"}.mdi-picture-in-picture-bottom-right-outline::before{content:"\FE3B"}.mdi-picture-in-picture-top-right::before{content:"\FE3C"}.mdi-picture-in-picture-top-right-outline::before{content:"\FE3D"}.mdi-pier::before{content:"\F886"}.mdi-pier-crane::before{content:"\F887"}.mdi-pig::before{content:"\F401"}.mdi-pig-variant::before{content:"\F0028"}.mdi-piggy-bank::before{content:"\F0029"}.mdi-pill::before{content:"\F402"}.mdi-pillar::before{content:"\F701"}.mdi-pin::before{content:"\F403"}.mdi-pin-off::before{content:"\F404"}.mdi-pin-off-outline::before{content:"\F92F"}.mdi-pin-outline::before{content:"\F930"}.mdi-pine-tree::before{content:"\F405"}.mdi-pine-tree-box::before{content:"\F406"}.mdi-pinterest::before{content:"\F407"}.mdi-pinterest-box::before{content:"\F408"}.mdi-pinwheel::before{content:"\FAD4"}.mdi-pinwheel-outline::before{content:"\FAD5"}.mdi-pipe::before{content:"\F7E4"}.mdi-pipe-disconnected::before{content:"\F7E5"}.mdi-pipe-leak::before{content:"\F888"}.mdi-pipe-wrench::before{content:"\F037F"}.mdi-pirate::before{content:"\FA07"}.mdi-pistol::before{content:"\F702"}.mdi-piston::before{content:"\F889"}.mdi-pizza::before{content:"\F409"}.mdi-play::before{content:"\F40A"}.mdi-play-box::before{content:"\F02A5"}.mdi-play-box-outline::before{content:"\F40B"}.mdi-play-circle::before{content:"\F40C"}.mdi-play-circle-outline::before{content:"\F40D"}.mdi-play-network::before{content:"\F88A"}.mdi-play-network-outline::before{content:"\FC93"}.mdi-play-outline::before{content:"\FF38"}.mdi-play-pause::before{content:"\F40E"}.mdi-play-protected-content::before{content:"\F40F"}.mdi-play-speed::before{content:"\F8FE"}.mdi-playlist-check::before{content:"\F5C7"}.mdi-playlist-edit::before{content:"\F8FF"}.mdi-playlist-minus::before{content:"\F410"}.mdi-playlist-music::before{content:"\FC94"}.mdi-playlist-music-outline::before{content:"\FC95"}.mdi-playlist-play::before{content:"\F411"}.mdi-playlist-plus::before{content:"\F412"}.mdi-playlist-remove::before{content:"\F413"}.mdi-playlist-star::before{content:"\FDCE"}.mdi-playstation::before{content:"\F414"}.mdi-plex::before{content:"\F6B9"}.mdi-plus::before{content:"\F415"}.mdi-plus-box::before{content:"\F416"}.mdi-plus-box-multiple::before{content:"\F334"}.mdi-plus-box-multiple-outline::before{content:"\F016E"}.mdi-plus-box-outline::before{content:"\F703"}.mdi-plus-circle::before{content:"\F417"}.mdi-plus-circle-multiple-outline::before{content:"\F418"}.mdi-plus-circle-outline::before{content:"\F419"}.mdi-plus-minus::before{content:"\F991"}.mdi-plus-minus-box::before{content:"\F992"}.mdi-plus-network::before{content:"\F41A"}.mdi-plus-network-outline::before{content:"\FC96"}.mdi-plus-one::before{content:"\F41B"}.mdi-plus-outline::before{content:"\F704"}.mdi-plus-thick::before{content:"\F0217"}.mdi-pocket::before{content:"\F41C"}.mdi-podcast::before{content:"\F993"}.mdi-podium::before{content:"\FD01"}.mdi-podium-bronze::before{content:"\FD02"}.mdi-podium-gold::before{content:"\FD03"}.mdi-podium-silver::before{content:"\FD04"}.mdi-point-of-sale::before{content:"\FD6E"}.mdi-pokeball::before{content:"\F41D"}.mdi-pokemon-go::before{content:"\FA08"}.mdi-poker-chip::before{content:"\F82F"}.mdi-polaroid::before{content:"\F41E"}.mdi-police-badge::before{content:"\F0192"}.mdi-police-badge-outline::before{content:"\F0193"}.mdi-poll::before{content:"\F41F"}.mdi-poll-box::before{content:"\F420"}.mdi-poll-box-outline::before{content:"\F02A6"}.mdi-polymer::before{content:"\F421"}.mdi-pool::before{content:"\F606"}.mdi-popcorn::before{content:"\F422"}.mdi-post::before{content:"\F002A"}.mdi-post-outline::before{content:"\F002B"}.mdi-postage-stamp::before{content:"\FC97"}.mdi-pot::before{content:"\F65A"}.mdi-pot-mix::before{content:"\F65B"}.mdi-pound::before{content:"\F423"}.mdi-pound-box::before{content:"\F424"}.mdi-pound-box-outline::before{content:"\F01AA"}.mdi-power::before{content:"\F425"}.mdi-power-cycle::before{content:"\F900"}.mdi-power-off::before{content:"\F901"}.mdi-power-on::before{content:"\F902"}.mdi-power-plug::before{content:"\F6A4"}.mdi-power-plug-off::before{content:"\F6A5"}.mdi-power-settings::before{content:"\F426"}.mdi-power-sleep::before{content:"\F903"}.mdi-power-socket::before{content:"\F427"}.mdi-power-socket-au::before{content:"\F904"}.mdi-power-socket-de::before{content:"\F0132"}.mdi-power-socket-eu::before{content:"\F7E6"}.mdi-power-socket-fr::before{content:"\F0133"}.mdi-power-socket-jp::before{content:"\F0134"}.mdi-power-socket-uk::before{content:"\F7E7"}.mdi-power-socket-us::before{content:"\F7E8"}.mdi-power-standby::before{content:"\F905"}.mdi-powershell::before{content:"\FA09"}.mdi-prescription::before{content:"\F705"}.mdi-presentation::before{content:"\F428"}.mdi-presentation-play::before{content:"\F429"}.mdi-printer::before{content:"\F42A"}.mdi-printer-3d::before{content:"\F42B"}.mdi-printer-3d-nozzle::before{content:"\FE3E"}.mdi-printer-3d-nozzle-alert::before{content:"\F01EB"}.mdi-printer-3d-nozzle-alert-outline::before{content:"\F01EC"}.mdi-printer-3d-nozzle-outline::before{content:"\FE3F"}.mdi-printer-alert::before{content:"\F42C"}.mdi-printer-check::before{content:"\F0171"}.mdi-printer-off::before{content:"\FE40"}.mdi-printer-pos::before{content:"\F0079"}.mdi-printer-settings::before{content:"\F706"}.mdi-printer-wireless::before{content:"\FA0A"}.mdi-priority-high::before{content:"\F603"}.mdi-priority-low::before{content:"\F604"}.mdi-professional-hexagon::before{content:"\F42D"}.mdi-progress-alert::before{content:"\FC98"}.mdi-progress-check::before{content:"\F994"}.mdi-progress-clock::before{content:"\F995"}.mdi-progress-close::before{content:"\F0135"}.mdi-progress-download::before{content:"\F996"}.mdi-progress-upload::before{content:"\F997"}.mdi-progress-wrench::before{content:"\FC99"}.mdi-projector::before{content:"\F42E"}.mdi-projector-screen::before{content:"\F42F"}.mdi-propane-tank::before{content:"\F0382"}.mdi-propane-tank-outline::before{content:"\F0383"}.mdi-protocol::before{content:"\FFF9"}.mdi-publish::before{content:"\F6A6"}.mdi-pulse::before{content:"\F430"}.mdi-pumpkin::before{content:"\FB9B"}.mdi-purse::before{content:"\FF39"}.mdi-purse-outline::before{content:"\FF3A"}.mdi-puzzle::before{content:"\F431"}.mdi-puzzle-outline::before{content:"\FA65"}.mdi-qi::before{content:"\F998"}.mdi-qqchat::before{content:"\F605"}.mdi-qrcode::before{content:"\F432"}.mdi-qrcode-edit::before{content:"\F8B7"}.mdi-qrcode-minus::before{content:"\F01B7"}.mdi-qrcode-plus::before{content:"\F01B6"}.mdi-qrcode-remove::before{content:"\F01B8"}.mdi-qrcode-scan::before{content:"\F433"}.mdi-quadcopter::before{content:"\F434"}.mdi-quality-high::before{content:"\F435"}.mdi-quality-low::before{content:"\FA0B"}.mdi-quality-medium::before{content:"\FA0C"}.mdi-quicktime::before{content:"\F436"}.mdi-quora::before{content:"\FD05"}.mdi-rabbit::before{content:"\F906"}.mdi-racing-helmet::before{content:"\FD6F"}.mdi-racquetball::before{content:"\FD70"}.mdi-radar::before{content:"\F437"}.mdi-radiator::before{content:"\F438"}.mdi-radiator-disabled::before{content:"\FAD6"}.mdi-radiator-off::before{content:"\FAD7"}.mdi-radio::before{content:"\F439"}.mdi-radio-am::before{content:"\FC9A"}.mdi-radio-fm::before{content:"\FC9B"}.mdi-radio-handheld::before{content:"\F43A"}.mdi-radio-off::before{content:"\F0247"}.mdi-radio-tower::before{content:"\F43B"}.mdi-radioactive::before{content:"\F43C"}.mdi-radioactive-off::before{content:"\FEDE"}.mdi-radiobox-blank::before{content:"\F43D"}.mdi-radiobox-marked::before{content:"\F43E"}.mdi-radius::before{content:"\FC9C"}.mdi-radius-outline::before{content:"\FC9D"}.mdi-railroad-light::before{content:"\FF3B"}.mdi-raspberry-pi::before{content:"\F43F"}.mdi-ray-end::before{content:"\F440"}.mdi-ray-end-arrow::before{content:"\F441"}.mdi-ray-start::before{content:"\F442"}.mdi-ray-start-arrow::before{content:"\F443"}.mdi-ray-start-end::before{content:"\F444"}.mdi-ray-vertex::before{content:"\F445"}.mdi-react::before{content:"\F707"}.mdi-read::before{content:"\F447"}.mdi-receipt::before{content:"\F449"}.mdi-record::before{content:"\F44A"}.mdi-record-circle::before{content:"\FEDF"}.mdi-record-circle-outline::before{content:"\FEE0"}.mdi-record-player::before{content:"\F999"}.mdi-record-rec::before{content:"\F44B"}.mdi-rectangle::before{content:"\FE41"}.mdi-rectangle-outline::before{content:"\FE42"}.mdi-recycle::before{content:"\F44C"}.mdi-reddit::before{content:"\F44D"}.mdi-redhat::before{content:"\F0146"}.mdi-redo::before{content:"\F44E"}.mdi-redo-variant::before{content:"\F44F"}.mdi-reflect-horizontal::before{content:"\FA0D"}.mdi-reflect-vertical::before{content:"\FA0E"}.mdi-refresh::before{content:"\F450"}.mdi-refresh-circle::before{content:"\F03A2"}.mdi-regex::before{content:"\F451"}.mdi-registered-trademark::before{content:"\FA66"}.mdi-relative-scale::before{content:"\F452"}.mdi-reload::before{content:"\F453"}.mdi-reload-alert::before{content:"\F0136"}.mdi-reminder::before{content:"\F88B"}.mdi-remote::before{content:"\F454"}.mdi-remote-desktop::before{content:"\F8B8"}.mdi-remote-off::before{content:"\FEE1"}.mdi-remote-tv::before{content:"\FEE2"}.mdi-remote-tv-off::before{content:"\FEE3"}.mdi-rename-box::before{content:"\F455"}.mdi-reorder-horizontal::before{content:"\F687"}.mdi-reorder-vertical::before{content:"\F688"}.mdi-repeat::before{content:"\F456"}.mdi-repeat-off::before{content:"\F457"}.mdi-repeat-once::before{content:"\F458"}.mdi-replay::before{content:"\F459"}.mdi-reply::before{content:"\F45A"}.mdi-reply-all::before{content:"\F45B"}.mdi-reply-all-outline::before{content:"\FF3C"}.mdi-reply-circle::before{content:"\F01D9"}.mdi-reply-outline::before{content:"\FF3D"}.mdi-reproduction::before{content:"\F45C"}.mdi-resistor::before{content:"\FB1F"}.mdi-resistor-nodes::before{content:"\FB20"}.mdi-resize::before{content:"\FA67"}.mdi-resize-bottom-right::before{content:"\F45D"}.mdi-responsive::before{content:"\F45E"}.mdi-restart::before{content:"\F708"}.mdi-restart-alert::before{content:"\F0137"}.mdi-restart-off::before{content:"\FD71"}.mdi-restore::before{content:"\F99A"}.mdi-restore-alert::before{content:"\F0138"}.mdi-rewind::before{content:"\F45F"}.mdi-rewind-10::before{content:"\FD06"}.mdi-rewind-30::before{content:"\FD72"}.mdi-rewind-5::before{content:"\F0224"}.mdi-rewind-outline::before{content:"\F709"}.mdi-rhombus::before{content:"\F70A"}.mdi-rhombus-medium::before{content:"\FA0F"}.mdi-rhombus-outline::before{content:"\F70B"}.mdi-rhombus-split::before{content:"\FA10"}.mdi-ribbon::before{content:"\F460"}.mdi-rice::before{content:"\F7E9"}.mdi-ring::before{content:"\F7EA"}.mdi-rivet::before{content:"\FE43"}.mdi-road::before{content:"\F461"}.mdi-road-variant::before{content:"\F462"}.mdi-robber::before{content:"\F007A"}.mdi-robot::before{content:"\F6A8"}.mdi-robot-industrial::before{content:"\FB21"}.mdi-robot-mower::before{content:"\F0222"}.mdi-robot-mower-outline::before{content:"\F021E"}.mdi-robot-vacuum::before{content:"\F70C"}.mdi-robot-vacuum-variant::before{content:"\F907"}.mdi-rocket::before{content:"\F463"}.mdi-rodent::before{content:"\F0352"}.mdi-roller-skate::before{content:"\FD07"}.mdi-rollerblade::before{content:"\FD08"}.mdi-rollupjs::before{content:"\FB9C"}.mdi-roman-numeral-1::before{content:"\F00B3"}.mdi-roman-numeral-10::before{content:"\F00BC"}.mdi-roman-numeral-2::before{content:"\F00B4"}.mdi-roman-numeral-3::before{content:"\F00B5"}.mdi-roman-numeral-4::before{content:"\F00B6"}.mdi-roman-numeral-5::before{content:"\F00B7"}.mdi-roman-numeral-6::before{content:"\F00B8"}.mdi-roman-numeral-7::before{content:"\F00B9"}.mdi-roman-numeral-8::before{content:"\F00BA"}.mdi-roman-numeral-9::before{content:"\F00BB"}.mdi-room-service::before{content:"\F88C"}.mdi-room-service-outline::before{content:"\FD73"}.mdi-rotate-3d::before{content:"\FEE4"}.mdi-rotate-3d-variant::before{content:"\F464"}.mdi-rotate-left::before{content:"\F465"}.mdi-rotate-left-variant::before{content:"\F466"}.mdi-rotate-orbit::before{content:"\FD74"}.mdi-rotate-right::before{content:"\F467"}.mdi-rotate-right-variant::before{content:"\F468"}.mdi-rounded-corner::before{content:"\F607"}.mdi-router::before{content:"\F020D"}.mdi-router-wireless::before{content:"\F469"}.mdi-router-wireless-settings::before{content:"\FA68"}.mdi-routes::before{content:"\F46A"}.mdi-routes-clock::before{content:"\F007B"}.mdi-rowing::before{content:"\F608"}.mdi-rss::before{content:"\F46B"}.mdi-rss-box::before{content:"\F46C"}.mdi-rss-off::before{content:"\FF3E"}.mdi-ruby::before{content:"\FD09"}.mdi-rugby::before{content:"\FD75"}.mdi-ruler::before{content:"\F46D"}.mdi-ruler-square::before{content:"\FC9E"}.mdi-ruler-square-compass::before{content:"\FEDB"}.mdi-run::before{content:"\F70D"}.mdi-run-fast::before{content:"\F46E"}.mdi-rv-truck::before{content:"\F01FF"}.mdi-sack::before{content:"\FD0A"}.mdi-sack-percent::before{content:"\FD0B"}.mdi-safe::before{content:"\FA69"}.mdi-safe-square::before{content:"\F02A7"}.mdi-safe-square-outline::before{content:"\F02A8"}.mdi-safety-goggles::before{content:"\FD0C"}.mdi-sailing::before{content:"\FEE5"}.mdi-sale::before{content:"\F46F"}.mdi-salesforce::before{content:"\F88D"}.mdi-sass::before{content:"\F7EB"}.mdi-satellite::before{content:"\F470"}.mdi-satellite-uplink::before{content:"\F908"}.mdi-satellite-variant::before{content:"\F471"}.mdi-sausage::before{content:"\F8B9"}.mdi-saw-blade::before{content:"\FE44"}.mdi-saxophone::before{content:"\F609"}.mdi-scale::before{content:"\F472"}.mdi-scale-balance::before{content:"\F5D1"}.mdi-scale-bathroom::before{content:"\F473"}.mdi-scale-off::before{content:"\F007C"}.mdi-scanner::before{content:"\F6AA"}.mdi-scanner-off::before{content:"\F909"}.mdi-scatter-plot::before{content:"\FEE6"}.mdi-scatter-plot-outline::before{content:"\FEE7"}.mdi-school::before{content:"\F474"}.mdi-school-outline::before{content:"\F01AB"}.mdi-scissors-cutting::before{content:"\FA6A"}.mdi-scooter::before{content:"\F0214"}.mdi-scoreboard::before{content:"\F02A9"}.mdi-scoreboard-outline::before{content:"\F02AA"}.mdi-screen-rotation::before{content:"\F475"}.mdi-screen-rotation-lock::before{content:"\F476"}.mdi-screw-flat-top::before{content:"\FDCF"}.mdi-screw-lag::before{content:"\FE54"}.mdi-screw-machine-flat-top::before{content:"\FE55"}.mdi-screw-machine-round-top::before{content:"\FE56"}.mdi-screw-round-top::before{content:"\FE57"}.mdi-screwdriver::before{content:"\F477"}.mdi-script::before{content:"\FB9D"}.mdi-script-outline::before{content:"\F478"}.mdi-script-text::before{content:"\FB9E"}.mdi-script-text-outline::before{content:"\FB9F"}.mdi-sd::before{content:"\F479"}.mdi-seal::before{content:"\F47A"}.mdi-seal-variant::before{content:"\FFFA"}.mdi-search-web::before{content:"\F70E"}.mdi-seat::before{content:"\FC9F"}.mdi-seat-flat::before{content:"\F47B"}.mdi-seat-flat-angled::before{content:"\F47C"}.mdi-seat-individual-suite::before{content:"\F47D"}.mdi-seat-legroom-extra::before{content:"\F47E"}.mdi-seat-legroom-normal::before{content:"\F47F"}.mdi-seat-legroom-reduced::before{content:"\F480"}.mdi-seat-outline::before{content:"\FCA0"}.mdi-seat-passenger::before{content:"\F0274"}.mdi-seat-recline-extra::before{content:"\F481"}.mdi-seat-recline-normal::before{content:"\F482"}.mdi-seatbelt::before{content:"\FCA1"}.mdi-security::before{content:"\F483"}.mdi-security-network::before{content:"\F484"}.mdi-seed::before{content:"\FE45"}.mdi-seed-outline::before{content:"\FE46"}.mdi-segment::before{content:"\FEE8"}.mdi-select::before{content:"\F485"}.mdi-select-all::before{content:"\F486"}.mdi-select-color::before{content:"\FD0D"}.mdi-select-compare::before{content:"\FAD8"}.mdi-select-drag::before{content:"\FA6B"}.mdi-select-group::before{content:"\FF9F"}.mdi-select-inverse::before{content:"\F487"}.mdi-select-marker::before{content:"\F02AB"}.mdi-select-multiple::before{content:"\F02AC"}.mdi-select-multiple-marker::before{content:"\F02AD"}.mdi-select-off::before{content:"\F488"}.mdi-select-place::before{content:"\FFFB"}.mdi-select-search::before{content:"\F022F"}.mdi-selection::before{content:"\F489"}.mdi-selection-drag::before{content:"\FA6C"}.mdi-selection-ellipse::before{content:"\FD0E"}.mdi-selection-ellipse-arrow-inside::before{content:"\FF3F"}.mdi-selection-marker::before{content:"\F02AE"}.mdi-selection-multiple-marker::before{content:"\F02AF"}.mdi-selection-mutliple::before{content:"\F02B0"}.mdi-selection-off::before{content:"\F776"}.mdi-selection-search::before{content:"\F0230"}.mdi-semantic-web::before{content:"\F0341"}.mdi-send::before{content:"\F48A"}.mdi-send-check::before{content:"\F018C"}.mdi-send-check-outline::before{content:"\F018D"}.mdi-send-circle::before{content:"\FE58"}.mdi-send-circle-outline::before{content:"\FE59"}.mdi-send-clock::before{content:"\F018E"}.mdi-send-clock-outline::before{content:"\F018F"}.mdi-send-lock::before{content:"\F7EC"}.mdi-send-lock-outline::before{content:"\F0191"}.mdi-send-outline::before{content:"\F0190"}.mdi-serial-port::before{content:"\F65C"}.mdi-server::before{content:"\F48B"}.mdi-server-minus::before{content:"\F48C"}.mdi-server-network::before{content:"\F48D"}.mdi-server-network-off::before{content:"\F48E"}.mdi-server-off::before{content:"\F48F"}.mdi-server-plus::before{content:"\F490"}.mdi-server-remove::before{content:"\F491"}.mdi-server-security::before{content:"\F492"}.mdi-set-all::before{content:"\F777"}.mdi-set-center::before{content:"\F778"}.mdi-set-center-right::before{content:"\F779"}.mdi-set-left::before{content:"\F77A"}.mdi-set-left-center::before{content:"\F77B"}.mdi-set-left-right::before{content:"\F77C"}.mdi-set-none::before{content:"\F77D"}.mdi-set-right::before{content:"\F77E"}.mdi-set-top-box::before{content:"\F99E"}.mdi-settings::before{content:"\F493"}.mdi-settings-box::before{content:"\F494"}.mdi-settings-helper::before{content:"\FA6D"}.mdi-settings-outline::before{content:"\F8BA"}.mdi-settings-transfer::before{content:"\F007D"}.mdi-settings-transfer-outline::before{content:"\F007E"}.mdi-shaker::before{content:"\F0139"}.mdi-shaker-outline::before{content:"\F013A"}.mdi-shape::before{content:"\F830"}.mdi-shape-circle-plus::before{content:"\F65D"}.mdi-shape-outline::before{content:"\F831"}.mdi-shape-oval-plus::before{content:"\F0225"}.mdi-shape-plus::before{content:"\F495"}.mdi-shape-polygon-plus::before{content:"\F65E"}.mdi-shape-rectangle-plus::before{content:"\F65F"}.mdi-shape-square-plus::before{content:"\F660"}.mdi-share::before{content:"\F496"}.mdi-share-all::before{content:"\F021F"}.mdi-share-all-outline::before{content:"\F0220"}.mdi-share-circle::before{content:"\F01D8"}.mdi-share-off::before{content:"\FF40"}.mdi-share-off-outline::before{content:"\FF41"}.mdi-share-outline::before{content:"\F931"}.mdi-share-variant::before{content:"\F497"}.mdi-sheep::before{content:"\FCA2"}.mdi-shield::before{content:"\F498"}.mdi-shield-account::before{content:"\F88E"}.mdi-shield-account-outline::before{content:"\FA11"}.mdi-shield-airplane::before{content:"\F6BA"}.mdi-shield-airplane-outline::before{content:"\FCA3"}.mdi-shield-alert::before{content:"\FEE9"}.mdi-shield-alert-outline::before{content:"\FEEA"}.mdi-shield-car::before{content:"\FFA0"}.mdi-shield-check::before{content:"\F565"}.mdi-shield-check-outline::before{content:"\FCA4"}.mdi-shield-cross::before{content:"\FCA5"}.mdi-shield-cross-outline::before{content:"\FCA6"}.mdi-shield-edit::before{content:"\F01CB"}.mdi-shield-edit-outline::before{content:"\F01CC"}.mdi-shield-half::before{content:"\F038B"}.mdi-shield-half-full::before{content:"\F77F"}.mdi-shield-home::before{content:"\F689"}.mdi-shield-home-outline::before{content:"\FCA7"}.mdi-shield-key::before{content:"\FBA0"}.mdi-shield-key-outline::before{content:"\FBA1"}.mdi-shield-link-variant::before{content:"\FD0F"}.mdi-shield-link-variant-outline::before{content:"\FD10"}.mdi-shield-lock::before{content:"\F99C"}.mdi-shield-lock-outline::before{content:"\FCA8"}.mdi-shield-off::before{content:"\F99D"}.mdi-shield-off-outline::before{content:"\F99B"}.mdi-shield-outline::before{content:"\F499"}.mdi-shield-plus::before{content:"\FAD9"}.mdi-shield-plus-outline::before{content:"\FADA"}.mdi-shield-refresh::before{content:"\F01CD"}.mdi-shield-refresh-outline::before{content:"\F01CE"}.mdi-shield-remove::before{content:"\FADB"}.mdi-shield-remove-outline::before{content:"\FADC"}.mdi-shield-search::before{content:"\FD76"}.mdi-shield-star::before{content:"\F0166"}.mdi-shield-star-outline::before{content:"\F0167"}.mdi-shield-sun::before{content:"\F007F"}.mdi-shield-sun-outline::before{content:"\F0080"}.mdi-ship-wheel::before{content:"\F832"}.mdi-shoe-formal::before{content:"\FB22"}.mdi-shoe-heel::before{content:"\FB23"}.mdi-shoe-print::before{content:"\FE5A"}.mdi-shopify::before{content:"\FADD"}.mdi-shopping::before{content:"\F49A"}.mdi-shopping-music::before{content:"\F49B"}.mdi-shopping-outline::before{content:"\F0200"}.mdi-shopping-search::before{content:"\FFA1"}.mdi-shovel::before{content:"\F70F"}.mdi-shovel-off::before{content:"\F710"}.mdi-shower::before{content:"\F99F"}.mdi-shower-head::before{content:"\F9A0"}.mdi-shredder::before{content:"\F49C"}.mdi-shuffle::before{content:"\F49D"}.mdi-shuffle-disabled::before{content:"\F49E"}.mdi-shuffle-variant::before{content:"\F49F"}.mdi-shuriken::before{content:"\F03AA"}.mdi-sigma::before{content:"\F4A0"}.mdi-sigma-lower::before{content:"\F62B"}.mdi-sign-caution::before{content:"\F4A1"}.mdi-sign-direction::before{content:"\F780"}.mdi-sign-direction-minus::before{content:"\F0022"}.mdi-sign-direction-plus::before{content:"\FFFD"}.mdi-sign-direction-remove::before{content:"\FFFE"}.mdi-sign-real-estate::before{content:"\F0143"}.mdi-sign-text::before{content:"\F781"}.mdi-signal::before{content:"\F4A2"}.mdi-signal-2g::before{content:"\F711"}.mdi-signal-3g::before{content:"\F712"}.mdi-signal-4g::before{content:"\F713"}.mdi-signal-5g::before{content:"\FA6E"}.mdi-signal-cellular-1::before{content:"\F8BB"}.mdi-signal-cellular-2::before{content:"\F8BC"}.mdi-signal-cellular-3::before{content:"\F8BD"}.mdi-signal-cellular-outline::before{content:"\F8BE"}.mdi-signal-distance-variant::before{content:"\FE47"}.mdi-signal-hspa::before{content:"\F714"}.mdi-signal-hspa-plus::before{content:"\F715"}.mdi-signal-off::before{content:"\F782"}.mdi-signal-variant::before{content:"\F60A"}.mdi-signature::before{content:"\FE5B"}.mdi-signature-freehand::before{content:"\FE5C"}.mdi-signature-image::before{content:"\FE5D"}.mdi-signature-text::before{content:"\FE5E"}.mdi-silo::before{content:"\FB24"}.mdi-silverware::before{content:"\F4A3"}.mdi-silverware-clean::before{content:"\FFFF"}.mdi-silverware-fork::before{content:"\F4A4"}.mdi-silverware-fork-knife::before{content:"\FA6F"}.mdi-silverware-spoon::before{content:"\F4A5"}.mdi-silverware-variant::before{content:"\F4A6"}.mdi-sim::before{content:"\F4A7"}.mdi-sim-alert::before{content:"\F4A8"}.mdi-sim-off::before{content:"\F4A9"}.mdi-simple-icons::before{content:"\F0348"}.mdi-sina-weibo::before{content:"\FADE"}.mdi-sitemap::before{content:"\F4AA"}.mdi-skate::before{content:"\FD11"}.mdi-skew-less::before{content:"\FD12"}.mdi-skew-more::before{content:"\FD13"}.mdi-ski::before{content:"\F032F"}.mdi-ski-cross-country::before{content:"\F0330"}.mdi-ski-water::before{content:"\F0331"}.mdi-skip-backward::before{content:"\F4AB"}.mdi-skip-backward-outline::before{content:"\FF42"}.mdi-skip-forward::before{content:"\F4AC"}.mdi-skip-forward-outline::before{content:"\FF43"}.mdi-skip-next::before{content:"\F4AD"}.mdi-skip-next-circle::before{content:"\F661"}.mdi-skip-next-circle-outline::before{content:"\F662"}.mdi-skip-next-outline::before{content:"\FF44"}.mdi-skip-previous::before{content:"\F4AE"}.mdi-skip-previous-circle::before{content:"\F663"}.mdi-skip-previous-circle-outline::before{content:"\F664"}.mdi-skip-previous-outline::before{content:"\FF45"}.mdi-skull::before{content:"\F68B"}.mdi-skull-crossbones::before{content:"\FBA2"}.mdi-skull-crossbones-outline::before{content:"\FBA3"}.mdi-skull-outline::before{content:"\FBA4"}.mdi-skype::before{content:"\F4AF"}.mdi-skype-business::before{content:"\F4B0"}.mdi-slack::before{content:"\F4B1"}.mdi-slackware::before{content:"\F90A"}.mdi-slash-forward::before{content:"\F0000"}.mdi-slash-forward-box::before{content:"\F0001"}.mdi-sleep::before{content:"\F4B2"}.mdi-sleep-off::before{content:"\F4B3"}.mdi-slope-downhill::before{content:"\FE5F"}.mdi-slope-uphill::before{content:"\FE60"}.mdi-slot-machine::before{content:"\F013F"}.mdi-slot-machine-outline::before{content:"\F0140"}.mdi-smart-card::before{content:"\F00E8"}.mdi-smart-card-outline::before{content:"\F00E9"}.mdi-smart-card-reader::before{content:"\F00EA"}.mdi-smart-card-reader-outline::before{content:"\F00EB"}.mdi-smog::before{content:"\FA70"}.mdi-smoke-detector::before{content:"\F392"}.mdi-smoking::before{content:"\F4B4"}.mdi-smoking-off::before{content:"\F4B5"}.mdi-snapchat::before{content:"\F4B6"}.mdi-snowboard::before{content:"\F0332"}.mdi-snowflake::before{content:"\F716"}.mdi-snowflake-alert::before{content:"\FF46"}.mdi-snowflake-melt::before{content:"\F02F6"}.mdi-snowflake-variant::before{content:"\FF47"}.mdi-snowman::before{content:"\F4B7"}.mdi-soccer::before{content:"\F4B8"}.mdi-soccer-field::before{content:"\F833"}.mdi-sofa::before{content:"\F4B9"}.mdi-solar-panel::before{content:"\FD77"}.mdi-solar-panel-large::before{content:"\FD78"}.mdi-solar-power::before{content:"\FA71"}.mdi-soldering-iron::before{content:"\F00BD"}.mdi-solid::before{content:"\F68C"}.mdi-sort::before{content:"\F4BA"}.mdi-sort-alphabetical::before{content:"\F4BB"}.mdi-sort-alphabetical-ascending::before{content:"\F0173"}.mdi-sort-alphabetical-descending::before{content:"\F0174"}.mdi-sort-ascending::before{content:"\F4BC"}.mdi-sort-descending::before{content:"\F4BD"}.mdi-sort-numeric::before{content:"\F4BE"}.mdi-sort-variant::before{content:"\F4BF"}.mdi-sort-variant-lock::before{content:"\FCA9"}.mdi-sort-variant-lock-open::before{content:"\FCAA"}.mdi-sort-variant-remove::before{content:"\F0172"}.mdi-soundcloud::before{content:"\F4C0"}.mdi-source-branch::before{content:"\F62C"}.mdi-source-commit::before{content:"\F717"}.mdi-source-commit-end::before{content:"\F718"}.mdi-source-commit-end-local::before{content:"\F719"}.mdi-source-commit-local::before{content:"\F71A"}.mdi-source-commit-next-local::before{content:"\F71B"}.mdi-source-commit-start::before{content:"\F71C"}.mdi-source-commit-start-next-local::before{content:"\F71D"}.mdi-source-fork::before{content:"\F4C1"}.mdi-source-merge::before{content:"\F62D"}.mdi-source-pull::before{content:"\F4C2"}.mdi-source-repository::before{content:"\FCAB"}.mdi-source-repository-multiple::before{content:"\FCAC"}.mdi-soy-sauce::before{content:"\F7ED"}.mdi-spa::before{content:"\FCAD"}.mdi-spa-outline::before{content:"\FCAE"}.mdi-space-invaders::before{content:"\FBA5"}.mdi-space-station::before{content:"\F03AE"}.mdi-spade::before{content:"\FE48"}.mdi-speaker::before{content:"\F4C3"}.mdi-speaker-bluetooth::before{content:"\F9A1"}.mdi-speaker-multiple::before{content:"\FD14"}.mdi-speaker-off::before{content:"\F4C4"}.mdi-speaker-wireless::before{content:"\F71E"}.mdi-speedometer::before{content:"\F4C5"}.mdi-speedometer-medium::before{content:"\FFA2"}.mdi-speedometer-slow::before{content:"\FFA3"}.mdi-spellcheck::before{content:"\F4C6"}.mdi-spider::before{content:"\F0215"}.mdi-spider-thread::before{content:"\F0216"}.mdi-spider-web::before{content:"\FBA6"}.mdi-spotify::before{content:"\F4C7"}.mdi-spotlight::before{content:"\F4C8"}.mdi-spotlight-beam::before{content:"\F4C9"}.mdi-spray::before{content:"\F665"}.mdi-spray-bottle::before{content:"\FADF"}.mdi-sprinkler::before{content:"\F0081"}.mdi-sprinkler-variant::before{content:"\F0082"}.mdi-sprout::before{content:"\FE49"}.mdi-sprout-outline::before{content:"\FE4A"}.mdi-square::before{content:"\F763"}.mdi-square-edit-outline::before{content:"\F90B"}.mdi-square-inc::before{content:"\F4CA"}.mdi-square-inc-cash::before{content:"\F4CB"}.mdi-square-medium::before{content:"\FA12"}.mdi-square-medium-outline::before{content:"\FA13"}.mdi-square-off::before{content:"\F0319"}.mdi-square-off-outline::before{content:"\F031A"}.mdi-square-outline::before{content:"\F762"}.mdi-square-root::before{content:"\F783"}.mdi-square-root-box::before{content:"\F9A2"}.mdi-square-small::before{content:"\FA14"}.mdi-squeegee::before{content:"\FAE0"}.mdi-ssh::before{content:"\F8BF"}.mdi-stack-exchange::before{content:"\F60B"}.mdi-stack-overflow::before{content:"\F4CC"}.mdi-stackpath::before{content:"\F359"}.mdi-stadium::before{content:"\F001A"}.mdi-stadium-variant::before{content:"\F71F"}.mdi-stairs::before{content:"\F4CD"}.mdi-stairs-down::before{content:"\F02E9"}.mdi-stairs-up::before{content:"\F02E8"}.mdi-stamper::before{content:"\FD15"}.mdi-standard-definition::before{content:"\F7EE"}.mdi-star::before{content:"\F4CE"}.mdi-star-box::before{content:"\FA72"}.mdi-star-box-multiple::before{content:"\F02B1"}.mdi-star-box-multiple-outline::before{content:"\F02B2"}.mdi-star-box-outline::before{content:"\FA73"}.mdi-star-circle::before{content:"\F4CF"}.mdi-star-circle-outline::before{content:"\F9A3"}.mdi-star-face::before{content:"\F9A4"}.mdi-star-four-points::before{content:"\FAE1"}.mdi-star-four-points-outline::before{content:"\FAE2"}.mdi-star-half::before{content:"\F4D0"}.mdi-star-off::before{content:"\F4D1"}.mdi-star-outline::before{content:"\F4D2"}.mdi-star-three-points::before{content:"\FAE3"}.mdi-star-three-points-outline::before{content:"\FAE4"}.mdi-state-machine::before{content:"\F021A"}.mdi-steam::before{content:"\F4D3"}.mdi-steam-box::before{content:"\F90C"}.mdi-steering::before{content:"\F4D4"}.mdi-steering-off::before{content:"\F90D"}.mdi-step-backward::before{content:"\F4D5"}.mdi-step-backward-2::before{content:"\F4D6"}.mdi-step-forward::before{content:"\F4D7"}.mdi-step-forward-2::before{content:"\F4D8"}.mdi-stethoscope::before{content:"\F4D9"}.mdi-sticker::before{content:"\F038F"}.mdi-sticker-alert::before{content:"\F0390"}.mdi-sticker-alert-outline::before{content:"\F0391"}.mdi-sticker-check::before{content:"\F0392"}.mdi-sticker-check-outline::before{content:"\F0393"}.mdi-sticker-circle-outline::before{content:"\F5D0"}.mdi-sticker-emoji::before{content:"\F784"}.mdi-sticker-minus::before{content:"\F0394"}.mdi-sticker-minus-outline::before{content:"\F0395"}.mdi-sticker-outline::before{content:"\F0396"}.mdi-sticker-plus::before{content:"\F0397"}.mdi-sticker-plus-outline::before{content:"\F0398"}.mdi-sticker-remove::before{content:"\F0399"}.mdi-sticker-remove-outline::before{content:"\F039A"}.mdi-stocking::before{content:"\F4DA"}.mdi-stomach::before{content:"\F00BE"}.mdi-stop::before{content:"\F4DB"}.mdi-stop-circle::before{content:"\F666"}.mdi-stop-circle-outline::before{content:"\F667"}.mdi-store::before{content:"\F4DC"}.mdi-store-24-hour::before{content:"\F4DD"}.mdi-store-outline::before{content:"\F038C"}.mdi-storefront::before{content:"\F00EC"}.mdi-stove::before{content:"\F4DE"}.mdi-strategy::before{content:"\F0201"}.mdi-strava::before{content:"\FB25"}.mdi-stretch-to-page::before{content:"\FF48"}.mdi-stretch-to-page-outline::before{content:"\FF49"}.mdi-string-lights::before{content:"\F02E5"}.mdi-string-lights-off::before{content:"\F02E6"}.mdi-subdirectory-arrow-left::before{content:"\F60C"}.mdi-subdirectory-arrow-right::before{content:"\F60D"}.mdi-subtitles::before{content:"\FA15"}.mdi-subtitles-outline::before{content:"\FA16"}.mdi-subway::before{content:"\F6AB"}.mdi-subway-alert-variant::before{content:"\FD79"}.mdi-subway-variant::before{content:"\F4DF"}.mdi-summit::before{content:"\F785"}.mdi-sunglasses::before{content:"\F4E0"}.mdi-surround-sound::before{content:"\F5C5"}.mdi-surround-sound-2-0::before{content:"\F7EF"}.mdi-surround-sound-3-1::before{content:"\F7F0"}.mdi-surround-sound-5-1::before{content:"\F7F1"}.mdi-surround-sound-7-1::before{content:"\F7F2"}.mdi-svg::before{content:"\F720"}.mdi-swap-horizontal::before{content:"\F4E1"}.mdi-swap-horizontal-bold::before{content:"\FBA9"}.mdi-swap-horizontal-circle::before{content:"\F0002"}.mdi-swap-horizontal-circle-outline::before{content:"\F0003"}.mdi-swap-horizontal-variant::before{content:"\F8C0"}.mdi-swap-vertical::before{content:"\F4E2"}.mdi-swap-vertical-bold::before{content:"\FBAA"}.mdi-swap-vertical-circle::before{content:"\F0004"}.mdi-swap-vertical-circle-outline::before{content:"\F0005"}.mdi-swap-vertical-variant::before{content:"\F8C1"}.mdi-swim::before{content:"\F4E3"}.mdi-switch::before{content:"\F4E4"}.mdi-sword::before{content:"\F4E5"}.mdi-sword-cross::before{content:"\F786"}.mdi-syllabary-hangul::before{content:"\F035E"}.mdi-syllabary-hiragana::before{content:"\F035F"}.mdi-syllabary-katakana::before{content:"\F0360"}.mdi-syllabary-katakana-half-width::before{content:"\F0361"}.mdi-symfony::before{content:"\FAE5"}.mdi-sync::before{content:"\F4E6"}.mdi-sync-alert::before{content:"\F4E7"}.mdi-sync-circle::before{content:"\F03A3"}.mdi-sync-off::before{content:"\F4E8"}.mdi-tab::before{content:"\F4E9"}.mdi-tab-minus::before{content:"\FB26"}.mdi-tab-plus::before{content:"\F75B"}.mdi-tab-remove::before{content:"\FB27"}.mdi-tab-unselected::before{content:"\F4EA"}.mdi-table::before{content:"\F4EB"}.mdi-table-border::before{content:"\FA17"}.mdi-table-chair::before{content:"\F0083"}.mdi-table-column::before{content:"\F834"}.mdi-table-column-plus-after::before{content:"\F4EC"}.mdi-table-column-plus-before::before{content:"\F4ED"}.mdi-table-column-remove::before{content:"\F4EE"}.mdi-table-column-width::before{content:"\F4EF"}.mdi-table-edit::before{content:"\F4F0"}.mdi-table-eye::before{content:"\F00BF"}.mdi-table-headers-eye::before{content:"\F0248"}.mdi-table-headers-eye-off::before{content:"\F0249"}.mdi-table-large::before{content:"\F4F1"}.mdi-table-large-plus::before{content:"\FFA4"}.mdi-table-large-remove::before{content:"\FFA5"}.mdi-table-merge-cells::before{content:"\F9A5"}.mdi-table-of-contents::before{content:"\F835"}.mdi-table-plus::before{content:"\FA74"}.mdi-table-remove::before{content:"\FA75"}.mdi-table-row::before{content:"\F836"}.mdi-table-row-height::before{content:"\F4F2"}.mdi-table-row-plus-after::before{content:"\F4F3"}.mdi-table-row-plus-before::before{content:"\F4F4"}.mdi-table-row-remove::before{content:"\F4F5"}.mdi-table-search::before{content:"\F90E"}.mdi-table-settings::before{content:"\F837"}.mdi-table-tennis::before{content:"\FE4B"}.mdi-tablet::before{content:"\F4F6"}.mdi-tablet-android::before{content:"\F4F7"}.mdi-tablet-cellphone::before{content:"\F9A6"}.mdi-tablet-dashboard::before{content:"\FEEB"}.mdi-tablet-ipad::before{content:"\F4F8"}.mdi-taco::before{content:"\F761"}.mdi-tag::before{content:"\F4F9"}.mdi-tag-faces::before{content:"\F4FA"}.mdi-tag-heart::before{content:"\F68A"}.mdi-tag-heart-outline::before{content:"\FBAB"}.mdi-tag-minus::before{content:"\F90F"}.mdi-tag-minus-outline::before{content:"\F024A"}.mdi-tag-multiple::before{content:"\F4FB"}.mdi-tag-multiple-outline::before{content:"\F0322"}.mdi-tag-off::before{content:"\F024B"}.mdi-tag-off-outline::before{content:"\F024C"}.mdi-tag-outline::before{content:"\F4FC"}.mdi-tag-plus::before{content:"\F721"}.mdi-tag-plus-outline::before{content:"\F024D"}.mdi-tag-remove::before{content:"\F722"}.mdi-tag-remove-outline::before{content:"\F024E"}.mdi-tag-text::before{content:"\F024F"}.mdi-tag-text-outline::before{content:"\F4FD"}.mdi-tank::before{content:"\FD16"}.mdi-tanker-truck::before{content:"\F0006"}.mdi-tape-measure::before{content:"\FB28"}.mdi-target::before{content:"\F4FE"}.mdi-target-account::before{content:"\FBAC"}.mdi-target-variant::before{content:"\FA76"}.mdi-taxi::before{content:"\F4FF"}.mdi-tea::before{content:"\FD7A"}.mdi-tea-outline::before{content:"\FD7B"}.mdi-teach::before{content:"\F88F"}.mdi-teamviewer::before{content:"\F500"}.mdi-telegram::before{content:"\F501"}.mdi-telescope::before{content:"\FB29"}.mdi-television::before{content:"\F502"}.mdi-television-ambient-light::before{content:"\F0381"}.mdi-television-box::before{content:"\F838"}.mdi-television-classic::before{content:"\F7F3"}.mdi-television-classic-off::before{content:"\F839"}.mdi-television-clean::before{content:"\F013B"}.mdi-television-guide::before{content:"\F503"}.mdi-television-off::before{content:"\F83A"}.mdi-television-pause::before{content:"\FFA6"}.mdi-television-play::before{content:"\FEEC"}.mdi-television-stop::before{content:"\FFA7"}.mdi-temperature-celsius::before{content:"\F504"}.mdi-temperature-fahrenheit::before{content:"\F505"}.mdi-temperature-kelvin::before{content:"\F506"}.mdi-tennis::before{content:"\FD7C"}.mdi-tennis-ball::before{content:"\F507"}.mdi-tent::before{content:"\F508"}.mdi-terraform::before{content:"\F0084"}.mdi-terrain::before{content:"\F509"}.mdi-test-tube::before{content:"\F668"}.mdi-test-tube-empty::before{content:"\F910"}.mdi-test-tube-off::before{content:"\F911"}.mdi-text::before{content:"\F9A7"}.mdi-text-recognition::before{content:"\F0168"}.mdi-text-shadow::before{content:"\F669"}.mdi-text-short::before{content:"\F9A8"}.mdi-text-subject::before{content:"\F9A9"}.mdi-text-to-speech::before{content:"\F50A"}.mdi-text-to-speech-off::before{content:"\F50B"}.mdi-textarea::before{content:"\F00C0"}.mdi-textbox::before{content:"\F60E"}.mdi-textbox-lock::before{content:"\F0388"}.mdi-textbox-password::before{content:"\F7F4"}.mdi-texture::before{content:"\F50C"}.mdi-texture-box::before{content:"\F0007"}.mdi-theater::before{content:"\F50D"}.mdi-theme-light-dark::before{content:"\F50E"}.mdi-thermometer::before{content:"\F50F"}.mdi-thermometer-alert::before{content:"\FE61"}.mdi-thermometer-chevron-down::before{content:"\FE62"}.mdi-thermometer-chevron-up::before{content:"\FE63"}.mdi-thermometer-high::before{content:"\F00ED"}.mdi-thermometer-lines::before{content:"\F510"}.mdi-thermometer-low::before{content:"\F00EE"}.mdi-thermometer-minus::before{content:"\FE64"}.mdi-thermometer-plus::before{content:"\FE65"}.mdi-thermostat::before{content:"\F393"}.mdi-thermostat-box::before{content:"\F890"}.mdi-thought-bubble::before{content:"\F7F5"}.mdi-thought-bubble-outline::before{content:"\F7F6"}.mdi-thumb-down::before{content:"\F511"}.mdi-thumb-down-outline::before{content:"\F512"}.mdi-thumb-up::before{content:"\F513"}.mdi-thumb-up-outline::before{content:"\F514"}.mdi-thumbs-up-down::before{content:"\F515"}.mdi-ticket::before{content:"\F516"}.mdi-ticket-account::before{content:"\F517"}.mdi-ticket-confirmation::before{content:"\F518"}.mdi-ticket-outline::before{content:"\F912"}.mdi-ticket-percent::before{content:"\F723"}.mdi-tie::before{content:"\F519"}.mdi-tilde::before{content:"\F724"}.mdi-timelapse::before{content:"\F51A"}.mdi-timeline::before{content:"\FBAD"}.mdi-timeline-alert::before{content:"\FFB2"}.mdi-timeline-alert-outline::before{content:"\FFB5"}.mdi-timeline-clock::before{content:"\F0226"}.mdi-timeline-clock-outline::before{content:"\F0227"}.mdi-timeline-help::before{content:"\FFB6"}.mdi-timeline-help-outline::before{content:"\FFB7"}.mdi-timeline-outline::before{content:"\FBAE"}.mdi-timeline-plus::before{content:"\FFB3"}.mdi-timeline-plus-outline::before{content:"\FFB4"}.mdi-timeline-text::before{content:"\FBAF"}.mdi-timeline-text-outline::before{content:"\FBB0"}.mdi-timer::before{content:"\F51B"}.mdi-timer-10::before{content:"\F51C"}.mdi-timer-3::before{content:"\F51D"}.mdi-timer-off::before{content:"\F51E"}.mdi-timer-sand::before{content:"\F51F"}.mdi-timer-sand-empty::before{content:"\F6AC"}.mdi-timer-sand-full::before{content:"\F78B"}.mdi-timetable::before{content:"\F520"}.mdi-toaster::before{content:"\F0085"}.mdi-toaster-off::before{content:"\F01E2"}.mdi-toaster-oven::before{content:"\FCAF"}.mdi-toggle-switch::before{content:"\F521"}.mdi-toggle-switch-off::before{content:"\F522"}.mdi-toggle-switch-off-outline::before{content:"\FA18"}.mdi-toggle-switch-outline::before{content:"\FA19"}.mdi-toilet::before{content:"\F9AA"}.mdi-toolbox::before{content:"\F9AB"}.mdi-toolbox-outline::before{content:"\F9AC"}.mdi-tools::before{content:"\F0086"}.mdi-tooltip::before{content:"\F523"}.mdi-tooltip-account::before{content:"\F00C"}.mdi-tooltip-edit::before{content:"\F524"}.mdi-tooltip-edit-outline::before{content:"\F02F0"}.mdi-tooltip-image::before{content:"\F525"}.mdi-tooltip-image-outline::before{content:"\FBB1"}.mdi-tooltip-outline::before{content:"\F526"}.mdi-tooltip-plus::before{content:"\FBB2"}.mdi-tooltip-plus-outline::before{content:"\F527"}.mdi-tooltip-text::before{content:"\F528"}.mdi-tooltip-text-outline::before{content:"\FBB3"}.mdi-tooth::before{content:"\F8C2"}.mdi-tooth-outline::before{content:"\F529"}.mdi-toothbrush::before{content:"\F0154"}.mdi-toothbrush-electric::before{content:"\F0157"}.mdi-toothbrush-paste::before{content:"\F0155"}.mdi-tor::before{content:"\F52A"}.mdi-tortoise::before{content:"\FD17"}.mdi-toslink::before{content:"\F02E3"}.mdi-tournament::before{content:"\F9AD"}.mdi-tower-beach::before{content:"\F680"}.mdi-tower-fire::before{content:"\F681"}.mdi-towing::before{content:"\F83B"}.mdi-toy-brick::before{content:"\F02B3"}.mdi-toy-brick-marker::before{content:"\F02B4"}.mdi-toy-brick-marker-outline::before{content:"\F02B5"}.mdi-toy-brick-minus::before{content:"\F02B6"}.mdi-toy-brick-minus-outline::before{content:"\F02B7"}.mdi-toy-brick-outline::before{content:"\F02B8"}.mdi-toy-brick-plus::before{content:"\F02B9"}.mdi-toy-brick-plus-outline::before{content:"\F02BA"}.mdi-toy-brick-remove::before{content:"\F02BB"}.mdi-toy-brick-remove-outline::before{content:"\F02BC"}.mdi-toy-brick-search::before{content:"\F02BD"}.mdi-toy-brick-search-outline::before{content:"\F02BE"}.mdi-track-light::before{content:"\F913"}.mdi-trackpad::before{content:"\F7F7"}.mdi-trackpad-lock::before{content:"\F932"}.mdi-tractor::before{content:"\F891"}.mdi-trademark::before{content:"\FA77"}.mdi-traffic-cone::before{content:"\F03A7"}.mdi-traffic-light::before{content:"\F52B"}.mdi-train::before{content:"\F52C"}.mdi-train-car::before{content:"\FBB4"}.mdi-train-variant::before{content:"\F8C3"}.mdi-tram::before{content:"\F52D"}.mdi-tram-side::before{content:"\F0008"}.mdi-transcribe::before{content:"\F52E"}.mdi-transcribe-close::before{content:"\F52F"}.mdi-transfer::before{content:"\F0087"}.mdi-transfer-down::before{content:"\FD7D"}.mdi-transfer-left::before{content:"\FD7E"}.mdi-transfer-right::before{content:"\F530"}.mdi-transfer-up::before{content:"\FD7F"}.mdi-transit-connection::before{content:"\FD18"}.mdi-transit-connection-variant::before{content:"\FD19"}.mdi-transit-detour::before{content:"\FFA8"}.mdi-transit-transfer::before{content:"\F6AD"}.mdi-transition::before{content:"\F914"}.mdi-transition-masked::before{content:"\F915"}.mdi-translate::before{content:"\F5CA"}.mdi-translate-off::before{content:"\FE66"}.mdi-transmission-tower::before{content:"\FD1A"}.mdi-trash-can::before{content:"\FA78"}.mdi-trash-can-outline::before{content:"\FA79"}.mdi-tray::before{content:"\F02BF"}.mdi-tray-alert::before{content:"\F02C0"}.mdi-tray-full::before{content:"\F02C1"}.mdi-tray-minus::before{content:"\F02C2"}.mdi-tray-plus::before{content:"\F02C3"}.mdi-tray-remove::before{content:"\F02C4"}.mdi-treasure-chest::before{content:"\F725"}.mdi-tree::before{content:"\F531"}.mdi-tree-outline::before{content:"\FE4C"}.mdi-trello::before{content:"\F532"}.mdi-trending-down::before{content:"\F533"}.mdi-trending-neutral::before{content:"\F534"}.mdi-trending-up::before{content:"\F535"}.mdi-triangle::before{content:"\F536"}.mdi-triangle-outline::before{content:"\F537"}.mdi-triforce::before{content:"\FBB5"}.mdi-trophy::before{content:"\F538"}.mdi-trophy-award::before{content:"\F539"}.mdi-trophy-broken::before{content:"\FD80"}.mdi-trophy-outline::before{content:"\F53A"}.mdi-trophy-variant::before{content:"\F53B"}.mdi-trophy-variant-outline::before{content:"\F53C"}.mdi-truck::before{content:"\F53D"}.mdi-truck-check::before{content:"\FCB0"}.mdi-truck-check-outline::before{content:"\F02C5"}.mdi-truck-delivery::before{content:"\F53E"}.mdi-truck-delivery-outline::before{content:"\F02C6"}.mdi-truck-fast::before{content:"\F787"}.mdi-truck-fast-outline::before{content:"\F02C7"}.mdi-truck-outline::before{content:"\F02C8"}.mdi-truck-trailer::before{content:"\F726"}.mdi-trumpet::before{content:"\F00C1"}.mdi-tshirt-crew::before{content:"\FA7A"}.mdi-tshirt-crew-outline::before{content:"\F53F"}.mdi-tshirt-v::before{content:"\FA7B"}.mdi-tshirt-v-outline::before{content:"\F540"}.mdi-tumble-dryer::before{content:"\F916"}.mdi-tumble-dryer-alert::before{content:"\F01E5"}.mdi-tumble-dryer-off::before{content:"\F01E6"}.mdi-tumblr::before{content:"\F541"}.mdi-tumblr-box::before{content:"\F917"}.mdi-tumblr-reblog::before{content:"\F542"}.mdi-tune::before{content:"\F62E"}.mdi-tune-vertical::before{content:"\F66A"}.mdi-turnstile::before{content:"\FCB1"}.mdi-turnstile-outline::before{content:"\FCB2"}.mdi-turtle::before{content:"\FCB3"}.mdi-twitch::before{content:"\F543"}.mdi-twitter::before{content:"\F544"}.mdi-twitter-box::before{content:"\F545"}.mdi-twitter-circle::before{content:"\F546"}.mdi-twitter-retweet::before{content:"\F547"}.mdi-two-factor-authentication::before{content:"\F9AE"}.mdi-typewriter::before{content:"\FF4A"}.mdi-uber::before{content:"\F748"}.mdi-ubisoft::before{content:"\FBB6"}.mdi-ubuntu::before{content:"\F548"}.mdi-ufo::before{content:"\F00EF"}.mdi-ufo-outline::before{content:"\F00F0"}.mdi-ultra-high-definition::before{content:"\F7F8"}.mdi-umbraco::before{content:"\F549"}.mdi-umbrella::before{content:"\F54A"}.mdi-umbrella-closed::before{content:"\F9AF"}.mdi-umbrella-outline::before{content:"\F54B"}.mdi-undo::before{content:"\F54C"}.mdi-undo-variant::before{content:"\F54D"}.mdi-unfold-less-horizontal::before{content:"\F54E"}.mdi-unfold-less-vertical::before{content:"\F75F"}.mdi-unfold-more-horizontal::before{content:"\F54F"}.mdi-unfold-more-vertical::before{content:"\F760"}.mdi-ungroup::before{content:"\F550"}.mdi-unicode::before{content:"\FEED"}.mdi-unity::before{content:"\F6AE"}.mdi-unreal::before{content:"\F9B0"}.mdi-untappd::before{content:"\F551"}.mdi-update::before{content:"\F6AF"}.mdi-upload::before{content:"\F552"}.mdi-upload-lock::before{content:"\F039E"}.mdi-upload-lock-outline::before{content:"\F039F"}.mdi-upload-multiple::before{content:"\F83C"}.mdi-upload-network::before{content:"\F6F5"}.mdi-upload-network-outline::before{content:"\FCB4"}.mdi-upload-off::before{content:"\F00F1"}.mdi-upload-off-outline::before{content:"\F00F2"}.mdi-upload-outline::before{content:"\FE67"}.mdi-usb::before{content:"\F553"}.mdi-usb-flash-drive::before{content:"\F02C9"}.mdi-usb-flash-drive-outline::before{content:"\F02CA"}.mdi-usb-port::before{content:"\F021B"}.mdi-valve::before{content:"\F0088"}.mdi-valve-closed::before{content:"\F0089"}.mdi-valve-open::before{content:"\F008A"}.mdi-van-passenger::before{content:"\F7F9"}.mdi-van-utility::before{content:"\F7FA"}.mdi-vanish::before{content:"\F7FB"}.mdi-vanity-light::before{content:"\F020C"}.mdi-variable::before{content:"\FAE6"}.mdi-variable-box::before{content:"\F013C"}.mdi-vector-arrange-above::before{content:"\F554"}.mdi-vector-arrange-below::before{content:"\F555"}.mdi-vector-bezier::before{content:"\FAE7"}.mdi-vector-circle::before{content:"\F556"}.mdi-vector-circle-variant::before{content:"\F557"}.mdi-vector-combine::before{content:"\F558"}.mdi-vector-curve::before{content:"\F559"}.mdi-vector-difference::before{content:"\F55A"}.mdi-vector-difference-ab::before{content:"\F55B"}.mdi-vector-difference-ba::before{content:"\F55C"}.mdi-vector-ellipse::before{content:"\F892"}.mdi-vector-intersection::before{content:"\F55D"}.mdi-vector-line::before{content:"\F55E"}.mdi-vector-link::before{content:"\F0009"}.mdi-vector-point::before{content:"\F55F"}.mdi-vector-polygon::before{content:"\F560"}.mdi-vector-polyline::before{content:"\F561"}.mdi-vector-polyline-edit::before{content:"\F0250"}.mdi-vector-polyline-minus::before{content:"\F0251"}.mdi-vector-polyline-plus::before{content:"\F0252"}.mdi-vector-polyline-remove::before{content:"\F0253"}.mdi-vector-radius::before{content:"\F749"}.mdi-vector-rectangle::before{content:"\F5C6"}.mdi-vector-selection::before{content:"\F562"}.mdi-vector-square::before{content:"\F001"}.mdi-vector-triangle::before{content:"\F563"}.mdi-vector-union::before{content:"\F564"}.mdi-venmo::before{content:"\F578"}.mdi-vhs::before{content:"\FA1A"}.mdi-vibrate::before{content:"\F566"}.mdi-vibrate-off::before{content:"\FCB5"}.mdi-video::before{content:"\F567"}.mdi-video-3d::before{content:"\F7FC"}.mdi-video-3d-variant::before{content:"\FEEE"}.mdi-video-4k-box::before{content:"\F83D"}.mdi-video-account::before{content:"\F918"}.mdi-video-check::before{content:"\F008B"}.mdi-video-check-outline::before{content:"\F008C"}.mdi-video-image::before{content:"\F919"}.mdi-video-input-antenna::before{content:"\F83E"}.mdi-video-input-component::before{content:"\F83F"}.mdi-video-input-hdmi::before{content:"\F840"}.mdi-video-input-scart::before{content:"\FFA9"}.mdi-video-input-svideo::before{content:"\F841"}.mdi-video-minus::before{content:"\F9B1"}.mdi-video-off::before{content:"\F568"}.mdi-video-off-outline::before{content:"\FBB7"}.mdi-video-outline::before{content:"\FBB8"}.mdi-video-plus::before{content:"\F9B2"}.mdi-video-stabilization::before{content:"\F91A"}.mdi-video-switch::before{content:"\F569"}.mdi-video-vintage::before{content:"\FA1B"}.mdi-video-wireless::before{content:"\FEEF"}.mdi-video-wireless-outline::before{content:"\FEF0"}.mdi-view-agenda::before{content:"\F56A"}.mdi-view-agenda-outline::before{content:"\F0203"}.mdi-view-array::before{content:"\F56B"}.mdi-view-carousel::before{content:"\F56C"}.mdi-view-column::before{content:"\F56D"}.mdi-view-comfy::before{content:"\FE4D"}.mdi-view-compact::before{content:"\FE4E"}.mdi-view-compact-outline::before{content:"\FE4F"}.mdi-view-dashboard::before{content:"\F56E"}.mdi-view-dashboard-outline::before{content:"\FA1C"}.mdi-view-dashboard-variant::before{content:"\F842"}.mdi-view-day::before{content:"\F56F"}.mdi-view-grid::before{content:"\F570"}.mdi-view-grid-outline::before{content:"\F0204"}.mdi-view-grid-plus::before{content:"\FFAA"}.mdi-view-grid-plus-outline::before{content:"\F0205"}.mdi-view-headline::before{content:"\F571"}.mdi-view-list::before{content:"\F572"}.mdi-view-module::before{content:"\F573"}.mdi-view-parallel::before{content:"\F727"}.mdi-view-quilt::before{content:"\F574"}.mdi-view-sequential::before{content:"\F728"}.mdi-view-split-horizontal::before{content:"\FBA7"}.mdi-view-split-vertical::before{content:"\FBA8"}.mdi-view-stream::before{content:"\F575"}.mdi-view-week::before{content:"\F576"}.mdi-vimeo::before{content:"\F577"}.mdi-violin::before{content:"\F60F"}.mdi-virtual-reality::before{content:"\F893"}.mdi-visual-studio::before{content:"\F610"}.mdi-visual-studio-code::before{content:"\FA1D"}.mdi-vk::before{content:"\F579"}.mdi-vk-box::before{content:"\F57A"}.mdi-vk-circle::before{content:"\F57B"}.mdi-vlc::before{content:"\F57C"}.mdi-voice::before{content:"\F5CB"}.mdi-voice-off::before{content:"\FEF1"}.mdi-voicemail::before{content:"\F57D"}.mdi-volleyball::before{content:"\F9B3"}.mdi-volume-high::before{content:"\F57E"}.mdi-volume-low::before{content:"\F57F"}.mdi-volume-medium::before{content:"\F580"}.mdi-volume-minus::before{content:"\F75D"}.mdi-volume-mute::before{content:"\F75E"}.mdi-volume-off::before{content:"\F581"}.mdi-volume-plus::before{content:"\F75C"}.mdi-volume-source::before{content:"\F014B"}.mdi-volume-variant-off::before{content:"\FE68"}.mdi-volume-vibrate::before{content:"\F014C"}.mdi-vote::before{content:"\FA1E"}.mdi-vote-outline::before{content:"\FA1F"}.mdi-vpn::before{content:"\F582"}.mdi-vuejs::before{content:"\F843"}.mdi-vuetify::before{content:"\FE50"}.mdi-walk::before{content:"\F583"}.mdi-wall::before{content:"\F7FD"}.mdi-wall-sconce::before{content:"\F91B"}.mdi-wall-sconce-flat::before{content:"\F91C"}.mdi-wall-sconce-variant::before{content:"\F91D"}.mdi-wallet::before{content:"\F584"}.mdi-wallet-giftcard::before{content:"\F585"}.mdi-wallet-membership::before{content:"\F586"}.mdi-wallet-outline::before{content:"\FBB9"}.mdi-wallet-plus::before{content:"\FFAB"}.mdi-wallet-plus-outline::before{content:"\FFAC"}.mdi-wallet-travel::before{content:"\F587"}.mdi-wallpaper::before{content:"\FE69"}.mdi-wan::before{content:"\F588"}.mdi-wardrobe::before{content:"\FFAD"}.mdi-wardrobe-outline::before{content:"\FFAE"}.mdi-warehouse::before{content:"\FFBB"}.mdi-washing-machine::before{content:"\F729"}.mdi-washing-machine-alert::before{content:"\F01E7"}.mdi-washing-machine-off::before{content:"\F01E8"}.mdi-watch::before{content:"\F589"}.mdi-watch-export::before{content:"\F58A"}.mdi-watch-export-variant::before{content:"\F894"}.mdi-watch-import::before{content:"\F58B"}.mdi-watch-import-variant::before{content:"\F895"}.mdi-watch-variant::before{content:"\F896"}.mdi-watch-vibrate::before{content:"\F6B0"}.mdi-watch-vibrate-off::before{content:"\FCB6"}.mdi-water::before{content:"\F58C"}.mdi-water-boiler::before{content:"\FFAF"}.mdi-water-boiler-alert::before{content:"\F01DE"}.mdi-water-boiler-off::before{content:"\F01DF"}.mdi-water-off::before{content:"\F58D"}.mdi-water-outline::before{content:"\FE6A"}.mdi-water-percent::before{content:"\F58E"}.mdi-water-polo::before{content:"\F02CB"}.mdi-water-pump::before{content:"\F58F"}.mdi-water-pump-off::before{content:"\FFB0"}.mdi-water-well::before{content:"\F008D"}.mdi-water-well-outline::before{content:"\F008E"}.mdi-watermark::before{content:"\F612"}.mdi-wave::before{content:"\FF4B"}.mdi-waves::before{content:"\F78C"}.mdi-waze::before{content:"\FBBA"}.mdi-weather-cloudy::before{content:"\F590"}.mdi-weather-cloudy-alert::before{content:"\FF4C"}.mdi-weather-cloudy-arrow-right::before{content:"\FE51"}.mdi-weather-fog::before{content:"\F591"}.mdi-weather-hail::before{content:"\F592"}.mdi-weather-hazy::before{content:"\FF4D"}.mdi-weather-hurricane::before{content:"\F897"}.mdi-weather-lightning::before{content:"\F593"}.mdi-weather-lightning-rainy::before{content:"\F67D"}.mdi-weather-night::before{content:"\F594"}.mdi-weather-night-partly-cloudy::before{content:"\FF4E"}.mdi-weather-partly-cloudy::before{content:"\F595"}.mdi-weather-partly-lightning::before{content:"\FF4F"}.mdi-weather-partly-rainy::before{content:"\FF50"}.mdi-weather-partly-snowy::before{content:"\FF51"}.mdi-weather-partly-snowy-rainy::before{content:"\FF52"}.mdi-weather-pouring::before{content:"\F596"}.mdi-weather-rainy::before{content:"\F597"}.mdi-weather-snowy::before{content:"\F598"}.mdi-weather-snowy-heavy::before{content:"\FF53"}.mdi-weather-snowy-rainy::before{content:"\F67E"}.mdi-weather-sunny::before{content:"\F599"}.mdi-weather-sunny-alert::before{content:"\FF54"}.mdi-weather-sunset::before{content:"\F59A"}.mdi-weather-sunset-down::before{content:"\F59B"}.mdi-weather-sunset-up::before{content:"\F59C"}.mdi-weather-tornado::before{content:"\FF55"}.mdi-weather-windy::before{content:"\F59D"}.mdi-weather-windy-variant::before{content:"\F59E"}.mdi-web::before{content:"\F59F"}.mdi-web-box::before{content:"\FFB1"}.mdi-web-clock::before{content:"\F0275"}.mdi-webcam::before{content:"\F5A0"}.mdi-webhook::before{content:"\F62F"}.mdi-webpack::before{content:"\F72A"}.mdi-webrtc::before{content:"\F0273"}.mdi-wechat::before{content:"\F611"}.mdi-weight::before{content:"\F5A1"}.mdi-weight-gram::before{content:"\FD1B"}.mdi-weight-kilogram::before{content:"\F5A2"}.mdi-weight-lifter::before{content:"\F0188"}.mdi-weight-pound::before{content:"\F9B4"}.mdi-whatsapp::before{content:"\F5A3"}.mdi-wheelchair-accessibility::before{content:"\F5A4"}.mdi-whistle::before{content:"\F9B5"}.mdi-whistle-outline::before{content:"\F02E7"}.mdi-white-balance-auto::before{content:"\F5A5"}.mdi-white-balance-incandescent::before{content:"\F5A6"}.mdi-white-balance-iridescent::before{content:"\F5A7"}.mdi-white-balance-sunny::before{content:"\F5A8"}.mdi-widgets::before{content:"\F72B"}.mdi-widgets-outline::before{content:"\F0380"}.mdi-wifi::before{content:"\F5A9"}.mdi-wifi-off::before{content:"\F5AA"}.mdi-wifi-star::before{content:"\FE6B"}.mdi-wifi-strength-1::before{content:"\F91E"}.mdi-wifi-strength-1-alert::before{content:"\F91F"}.mdi-wifi-strength-1-lock::before{content:"\F920"}.mdi-wifi-strength-2::before{content:"\F921"}.mdi-wifi-strength-2-alert::before{content:"\F922"}.mdi-wifi-strength-2-lock::before{content:"\F923"}.mdi-wifi-strength-3::before{content:"\F924"}.mdi-wifi-strength-3-alert::before{content:"\F925"}.mdi-wifi-strength-3-lock::before{content:"\F926"}.mdi-wifi-strength-4::before{content:"\F927"}.mdi-wifi-strength-4-alert::before{content:"\F928"}.mdi-wifi-strength-4-lock::before{content:"\F929"}.mdi-wifi-strength-alert-outline::before{content:"\F92A"}.mdi-wifi-strength-lock-outline::before{content:"\F92B"}.mdi-wifi-strength-off::before{content:"\F92C"}.mdi-wifi-strength-off-outline::before{content:"\F92D"}.mdi-wifi-strength-outline::before{content:"\F92E"}.mdi-wii::before{content:"\F5AB"}.mdi-wiiu::before{content:"\F72C"}.mdi-wikipedia::before{content:"\F5AC"}.mdi-wind-turbine::before{content:"\FD81"}.mdi-window-close::before{content:"\F5AD"}.mdi-window-closed::before{content:"\F5AE"}.mdi-window-closed-variant::before{content:"\F0206"}.mdi-window-maximize::before{content:"\F5AF"}.mdi-window-minimize::before{content:"\F5B0"}.mdi-window-open::before{content:"\F5B1"}.mdi-window-open-variant::before{content:"\F0207"}.mdi-window-restore::before{content:"\F5B2"}.mdi-window-shutter::before{content:"\F0147"}.mdi-window-shutter-alert::before{content:"\F0148"}.mdi-window-shutter-open::before{content:"\F0149"}.mdi-windows::before{content:"\F5B3"}.mdi-windows-classic::before{content:"\FA20"}.mdi-wiper::before{content:"\FAE8"}.mdi-wiper-wash::before{content:"\FD82"}.mdi-wordpress::before{content:"\F5B4"}.mdi-worker::before{content:"\F5B5"}.mdi-wrap::before{content:"\F5B6"}.mdi-wrap-disabled::before{content:"\FBBB"}.mdi-wrench::before{content:"\F5B7"}.mdi-wrench-outline::before{content:"\FBBC"}.mdi-wunderlist::before{content:"\F5B8"}.mdi-xamarin::before{content:"\F844"}.mdi-xamarin-outline::before{content:"\F845"}.mdi-xaml::before{content:"\F673"}.mdi-xbox::before{content:"\F5B9"}.mdi-xbox-controller::before{content:"\F5BA"}.mdi-xbox-controller-battery-alert::before{content:"\F74A"}.mdi-xbox-controller-battery-charging::before{content:"\FA21"}.mdi-xbox-controller-battery-empty::before{content:"\F74B"}.mdi-xbox-controller-battery-full::before{content:"\F74C"}.mdi-xbox-controller-battery-low::before{content:"\F74D"}.mdi-xbox-controller-battery-medium::before{content:"\F74E"}.mdi-xbox-controller-battery-unknown::before{content:"\F74F"}.mdi-xbox-controller-menu::before{content:"\FE52"}.mdi-xbox-controller-off::before{content:"\F5BB"}.mdi-xbox-controller-view::before{content:"\FE53"}.mdi-xda::before{content:"\F5BC"}.mdi-xing::before{content:"\F5BD"}.mdi-xing-box::before{content:"\F5BE"}.mdi-xing-circle::before{content:"\F5BF"}.mdi-xml::before{content:"\F5C0"}.mdi-xmpp::before{content:"\F7FE"}.mdi-yahoo::before{content:"\FB2A"}.mdi-yammer::before{content:"\F788"}.mdi-yeast::before{content:"\F5C1"}.mdi-yelp::before{content:"\F5C2"}.mdi-yin-yang::before{content:"\F67F"}.mdi-yoga::before{content:"\F01A7"}.mdi-youtube::before{content:"\F5C3"}.mdi-youtube-creator-studio::before{content:"\F846"}.mdi-youtube-gaming::before{content:"\F847"}.mdi-youtube-subscription::before{content:"\FD1C"}.mdi-youtube-tv::before{content:"\F448"}.mdi-z-wave::before{content:"\FAE9"}.mdi-zend::before{content:"\FAEA"}.mdi-zigbee::before{content:"\FD1D"}.mdi-zip-box::before{content:"\F5C4"}.mdi-zip-box-outline::before{content:"\F001B"}.mdi-zip-disk::before{content:"\FA22"}.mdi-zodiac-aquarius::before{content:"\FA7C"}.mdi-zodiac-aries::before{content:"\FA7D"}.mdi-zodiac-cancer::before{content:"\FA7E"}.mdi-zodiac-capricorn::before{content:"\FA7F"}.mdi-zodiac-gemini::before{content:"\FA80"}.mdi-zodiac-leo::before{content:"\FA81"}.mdi-zodiac-libra::before{content:"\FA82"}.mdi-zodiac-pisces::before{content:"\FA83"}.mdi-zodiac-sagittarius::before{content:"\FA84"}.mdi-zodiac-scorpio::before{content:"\FA85"}.mdi-zodiac-taurus::before{content:"\FA86"}.mdi-zodiac-virgo::before{content:"\FA87"}.mdi-blank::before{content:"\F68C";visibility:hidden}.mdi-18px.mdi-set,.mdi-18px.mdi:before{font-size:18px}.mdi-24px.mdi-set,.mdi-24px.mdi:before{font-size:24px}.mdi-36px.mdi-set,.mdi-36px.mdi:before{font-size:36px}.mdi-48px.mdi-set,.mdi-48px.mdi:before{font-size:48px}.mdi-dark:before{color:rgba(0,0,0,0.54)}.mdi-dark.mdi-inactive:before{color:rgba(0,0,0,0.26)}.mdi-light:before{color:#fff}.mdi-light.mdi-inactive:before{color:rgba(255,255,255,0.3)}.mdi-rotate-45:before{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.mdi-rotate-90:before{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.mdi-rotate-135:before{-webkit-transform:rotate(135deg);-ms-transform:rotate(135deg);transform:rotate(135deg)}.mdi-rotate-180:before{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.mdi-rotate-225:before{-webkit-transform:rotate(225deg);-ms-transform:rotate(225deg);transform:rotate(225deg)}.mdi-rotate-270:before{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.mdi-rotate-315:before{-webkit-transform:rotate(315deg);-ms-transform:rotate(315deg);transform:rotate(315deg)}.mdi-flip-h:before{-webkit-transform:scaleX(-1);transform:scaleX(-1);filter:FlipH;-ms-filter:"FlipH"}.mdi-flip-v:before{-webkit-transform:scaleY(-1);transform:scaleY(-1);filter:FlipV;-ms-filter:"FlipV"}.mdi-spin:before{-webkit-animation:mdi-spin 2s infinite linear;animation:mdi-spin 2s infinite linear}@-webkit-keyframes mdi-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes mdi-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}
+
+/*# sourceMappingURL=materialdesignicons.css.map */
diff --git a/packages/merchant-backoffice-ui/src/scss/libs/_all.scss b/packages/merchant-backoffice-ui/src/scss/libs/_all.scss
new file mode 100644
index 000000000..313eb52f9
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/scss/libs/_all.scss
@@ -0,0 +1,29 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+ /**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+@import "node_modules/bulma-radio/bulma-radio";
+// @import "node_modules/bulma-responsive-tables/bulma-responsive-tables";
+@import "node_modules/bulma-checkbox/bulma-checkbox";
+@import "node_modules/bulma-switch-control/bulma-switch-control";
+@import "node_modules/bulma-upload-control/bulma-upload-control";
+
+/* Bulma */
+@import "node_modules/bulma/bulma";
diff --git a/packages/merchant-backoffice-ui/src/scss/main.scss b/packages/merchant-backoffice-ui/src/scss/main.scss
new file mode 100644
index 000000000..b523566c1
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/scss/main.scss
@@ -0,0 +1,191 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+ 
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+ 
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+/* Theme style (colors & sizes) */
+@import "theme-default";
+
+/* Core Libs & Lib configs */
+@import "libs/all";
+
+/* Mixins */
+@import "mixins";
+
+/* Theme components */
+@import "nav-bar";
+@import "aside";
+@import "title-bar";
+@import "hero-bar";
+@import "card";
+@import "table";
+@import "tiles";
+@import "form";
+@import "main-section";
+@import "modal";
+@import "footer";
+@import "misc";
+@import "custom-calendar";
+@import "loading";
+
+@import "fonts/nunito.css";
+@import "icons/materialdesignicons-4.9.95.min.css";
+
+$tooltip-color: red;
+
+@import "../../node_modules/@creativebulma/bulma-tooltip/dist/bulma-tooltip.min.css";
+@import "../../node_modules/bulma-timeline/dist/css/bulma-timeline.min.css";
+
+.notification {
+  background-color: transparent;
+}
+
+.timeline .timeline-item .timeline-content {
+  padding-top: 0;
+}
+
+.timeline .timeline-item:last-child::before {
+  display: none;
+}
+
+.timeline .timeline-item .timeline-marker {
+  top: 0;
+}
+
+.toast {
+  position: absolute;
+  width: 60%;
+  margin-left: 10%;
+  margin-right: 10%;
+  z-index: 999;
+
+  display: flex;
+  flex-direction: column;
+  padding: 15px;
+  text-align: center;
+  pointer-events: none;
+}
+
+.toast > .message {
+  white-space: pre-wrap;
+  opacity: 80%;
+}
+
+div {
+  &.is-loading {
+    position: relative;
+    pointer-events: none;
+    opacity: 0.5;
+    &:after {
+      // @include loader;
+      position: absolute;
+      top: calc(50% - 2.5em);
+      left: calc(50% - 2.5em);
+      width: 5em;
+      height: 5em;
+      border-width: 0.25em;
+    }
+  }
+}
+
+input[type="checkbox"]:indeterminate + .check {
+  background: red !important;
+}
+
+.right-sticky {
+  position: sticky;
+  right: 0px;
+  background-color: $white;
+}
+
+.right-sticky .buttons {
+  flex-wrap: nowrap;
+}
+
+.table.is-striped tbody tr:not(.is-selected):nth-child(even) .right-sticky {
+  background-color: #fafafa;
+}
+
+tr:hover .right-sticky {
+  background-color: hsl(0, 0%, 80%);
+}
+.table.is-striped tbody tr:nth-child(even):hover .right-sticky {
+  background-color: hsl(0, 0%, 95%);
+}
+
+.content-full-size {
+  height: calc(100% - 3rem);
+  position: absolute;
+  width: calc(100% - 14rem);
+  display: flex;
+}
+
+.content-full-size .column .card {
+  min-width: 200px;
+}
+
+@include touch {
+  .content-full-size {
+    height: 100%;
+    position: absolute;
+    width: 100%;
+  }
+}
+
+.column.is-half {
+  flex: none;
+  width: 50%;
+}
+
+input:read-only {
+  cursor: initial;
+}
+
+[data-tooltip]:before {
+  max-width: 15rem;
+  width: max-content;
+  text-align: left;
+  transition: opacity 0.1s linear 1s;
+  // transform: inherit !important;
+  white-space: pre-wrap !important;
+  font-weight: normal;
+  // position: relative;
+}
+
+.icon[data-tooltip]:before {
+  transition: none;
+  z-index: 5;
+}
+
+span[data-tooltip] {
+  border-bottom: none;
+}
+
+div[data-tooltip]::before {
+  position: absolute;
+}
+
+.modal-card-body > p {
+  padding: 1em;
+}
+
+.modal-card-body > p.warning {
+  background-color: #fffbdd;
+  border: solid 1px #f2e9bf;
+}
diff --git a/packages/merchant-backoffice-ui/src/sw.js b/packages/merchant-backoffice-ui/src/sw.js
new file mode 100644
index 000000000..5fcde8281
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/sw.js
@@ -0,0 +1,25 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+ /**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+// import { getFiles, setupPrecaching, setupRouting } from 'preact-cli/sw/';
+
+// setupRouting();
+// setupPrecaching(getFiles());
diff --git a/packages/merchant-backoffice-ui/src/template.html b/packages/merchant-backoffice-ui/src/template.html
new file mode 100644
index 000000000..ccccab167
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/template.html
@@ -0,0 +1,52 @@
+<!--
+	 This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+
+ @author Sebastian Javier Marchano
+-->
+<!DOCTYPE html>
+<html lang="en" class="has-aside-left has-aside-mobile-transition has-navbar-fixed-top has-aside-expanded">
+	<head>
+		<meta charset="utf-8">
+		<title><%= htmlWebpackPlugin.options.title %></title>
+		<meta name="viewport" content="width=device-width,initial-scale=1">
+		<meta name="mobile-web-app-capable" content="yes">
+		<meta name="apple-mobile-web-app-capable" content="yes">
+
+		<link rel="icon" href="data:;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAABILAAASCwAAAAAAAAAAAAD///////////////////////////////////////////////////////////////////////////////////////////////////7//v38//78/P/+/fz//vz7///+/v/+/f3//vz7///+/v/+/fz//v38///////////////////////+/v3///7+/////////////////////////////////////////////////////////v3//v79///////+/v3///////r28v/ct5//06SG/9Gffv/Xqo7/7N/V/9e2nf/bsJb/6uDW/9Sskf/euKH/+/j2///////+/v3//////+3azv+/eE3/2rWd/9Kkhv/Vr5T/48i2/8J+VP/Qn3//3ryn/795Tf/WrpP/2LCW/8B6T//w4Nb///////Pn4P+/d0v/9u3n/+7d0v/EhV7//v///+HDr//fxLD/zph2/+TJt//8/Pv/woBX//Lm3f/y5dz/v3hN//bu6f/JjGn/4sW0///////Df1j/8OLZ//v6+P+/elH/+vj1//jy7f+/elL//////+zYzP/Eg13//////967p//MlHT/wn5X///////v4Nb/yY1s///////jw7H/06KG////////////z5t9/+fNvf//////x4pn//Pp4v/8+vn/w39X/8WEX///////5s/A/9CbfP//////27Oc/9y2n////////////9itlf/gu6f//////86Vdf/r2Mz//////8SCXP/Df1j//////+7d0v/KkG7//////+HBrf/VpYr////////////RnoH/5sq6///////Ii2n/8ubf//39/P/Cf1j/xohk/+bNvv//////wn5W//Tq4//58/D/wHxV//7+/f/59fH/v3xU//39/P/w4Nf/xIFb///////hw7H/yo9t/+/f1f/AeU3/+/n2/+nSxP/FhmD//////9qzm//Upon/4MSx/96+qf//////xINc/+3bz//48e3/v3hN//Pn3///////6M+//752S//gw6//06aK/8J+VP/kzLr/zZd1/8OCWv/q18r/17KZ/9Ooi//fv6r/v3dK/+vWyP///////v39///////27un/1aeK/9Opjv/m1cf/1KCC/9a0nP/n08T/0Jx8/82YdP/QnHz/16yR//jx7P///////v39///////+/f3///7+///////+//7//v7+///////+/v7//v/+/////////////////////////v7//v79///////////////////+/v/+/Pv//v39///+/v/+/Pv///7+//7+/f/+/Pv//v39//79/P/+/Pv///7+////////////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==" />
+		<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon" />
+
+		<% if (htmlWebpackPlugin.options.manifest.theme_color) { %>
+			<meta name="theme-color" content="<%= htmlWebpackPlugin.options.manifest.theme_color %>">
+		<% } %>
+
+		<% for (const index in htmlWebpackPlugin.files.css) { %>
+			<% const file = htmlWebpackPlugin.files.css[index] %>
+			<style data-href='<%= file %>' >
+				<%= compilation.assets[file.substr(htmlWebpackPlugin.files.publicPath.length)].source() %>
+			</style>
+		<% } %>
+		
+	</head>
+	<body>
+
+		<script>
+			<%= compilation.assets[htmlWebpackPlugin.files.chunks["polyfills"].entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %>
+		</script>
+		<script>
+			<%= compilation.assets[htmlWebpackPlugin.files.chunks["bundle"].entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %>
+		</script>
+
+	</body>
+</html>
diff --git a/packages/merchant-backoffice-ui/src/utils/amount.ts b/packages/merchant-backoffice-ui/src/utils/amount.ts
new file mode 100644
index 000000000..61e33129c
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/utils/amount.ts
@@ -0,0 +1,70 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+import { amountFractionalBase, AmountJson, Amounts } from "@gnu-taler/taler-util";
+import { MerchantBackend } from "../declaration";
+
+/**
+ * sums two prices, 
+ * @param one 
+ * @param two 
+ * @returns 
+ */
+const sumPrices = (one: string, two: string) => {
+  const [currency, valueOne] = one.split(':')
+  const [, valueTwo] = two.split(':')
+  return `${currency}:${parseInt(valueOne, 10) + parseInt(valueTwo, 10)}`
+}
+
+/**
+ * merge refund with the same description and a difference less than one minute
+ * @param prev list of refunds that will hold the merged refunds 
+ * @param cur new refund to add to the list
+ * @returns list with the new refund, may be merged with the last
+ */
+export function mergeRefunds(prev: MerchantBackend.Orders.RefundDetails[], cur: MerchantBackend.Orders.RefundDetails) {
+  let tail;
+
+  if (prev.length === 0 ||  //empty list
+    cur.timestamp.t_s === 'never' || //current doesnt have timestamp
+    (tail = prev[prev.length - 1]).timestamp.t_s === 'never' || // last doesnt have timestamp
+    cur.reason !== tail.reason || //different reason
+    cur.pending !== tail.pending || //different pending state
+    Math.abs(cur.timestamp.t_s - tail.timestamp.t_s) > 1000 * 60) {//more than 1 minute difference
+
+    prev.push(cur)
+    return prev
+  }
+
+  prev[prev.length - 1] = {
+    ...tail,
+    amount: sumPrices(tail.amount, cur.amount)
+  }
+
+  return prev
+}
+
+export const rate = (one: string, two: string) => {
+  const a = Amounts.parseOrThrow(one)
+  const b = Amounts.parseOrThrow(two)
+  const af = toFloat(a)
+  const bf = toFloat(b)
+  if (bf === 0) return 0
+  return af / bf
+}
+
+function toFloat(amount: AmountJson) {
+  return amount.value + (amount.fraction / amountFractionalBase);
+}
diff --git a/packages/merchant-backoffice-ui/src/utils/constants.ts b/packages/merchant-backoffice-ui/src/utils/constants.ts
new file mode 100644
index 000000000..5356a1a49
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/utils/constants.ts
@@ -0,0 +1,194 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+//https://tools.ietf.org/html/rfc8905
+export const PAYTO_REGEX = /^payto:\/\/[a-zA-Z][a-zA-Z0-9-.]+(\/[a-zA-Z0-9\-\.\~\(\)@_%:!$&'*+,;=]*)*\??((amount|receiver-name|sender-name|instruction|message)=[a-zA-Z0-9\-\.\~\(\)@_%:!$'*+,;=]*&?)*$/
+export const PAYTO_WIRE_METHOD_LOOKUP = /payto:\/\/([a-zA-Z][a-zA-Z0-9-.]+)\/.*/
+
+export const AMOUNT_REGEX = /^[a-zA-Z][a-zA-Z]*:[0-9][0-9,]*\.?[0-9,]*$/
+
+export const INSTANCE_ID_LOOKUP = /\/instances\/([^/]*)\/?$/
+
+export const AMOUNT_ZERO_REGEX = /^[a-zA-Z][a-zA-Z]*:0$/
+
+export const CROCKFORD_BASE32_REGEX = /^[0123456789ABCDEFGHJKMNPQRSTVWXYZ]+[*~$=U]*$/
+
+export const URL_REGEX = /^((https?:)(\/\/\/?)([\w]*(?::[\w]*)?@)?([\d\w\.-]+)(?::(\d+))?)\/$/
+
+// how much rows we add every time user hit load more
+export const PAGE_SIZE = 20
+// how bigger can be the result set
+// after this threshold, load more with move the cursor
+export const MAX_RESULT_SIZE = PAGE_SIZE * 2 - 1;
+
+// how much we will wait for all request, in seconds
+export const DEFAULT_REQUEST_TIMEOUT = 10;
+
+export const MAX_IMAGE_SIZE = 1024 * 1024;
+
+export const INSTANCE_ID_REGEX = /^[a-zA-Z0-9][a-zA-Z0-9_.@-]+$/
+
+export const COUNTRY_TABLE = {
+  AE: "U.A.E.",
+  AF: "Afghanistan",
+  AL: "Albania",
+  AM: "Armenia",
+  AN: "Netherlands Antilles",
+  AR: "Argentina",
+  AT: "Austria",
+  AU: "Australia",
+  AZ: "Azerbaijan",
+  BA: "Bosnia and Herzegovina",
+  BD: "Bangladesh",
+  BE: "Belgium",
+  BG: "Bulgaria",
+  BH: "Bahrain",
+  BN: "Brunei Darussalam",
+  BO: "Bolivia",
+  BR: "Brazil",
+  BT: "Bhutan",
+  BY: "Belarus",
+  BZ: "Belize",
+  CA: "Canada",
+  CG: "Congo",
+  CH: "Switzerland",
+  CI: "Cote d'Ivoire",
+  CL: "Chile",
+  CM: "Cameroon",
+  CN: "People's Republic of China",
+  CO: "Colombia",
+  CR: "Costa Rica",
+  CS: "Serbia and Montenegro",
+  CZ: "Czech Republic",
+  DE: "Germany",
+  DK: "Denmark",
+  DO: "Dominican Republic",
+  DZ: "Algeria",
+  EC: "Ecuador",
+  EE: "Estonia",
+  EG: "Egypt",
+  ER: "Eritrea",
+  ES: "Spain",
+  ET: "Ethiopia",
+  FI: "Finland",
+  FO: "Faroe Islands",
+  FR: "France",
+  GB: "United Kingdom",
+  GD: "Caribbean",
+  GE: "Georgia",
+  GL: "Greenland",
+  GR: "Greece",
+  GT: "Guatemala",
+  HK: "Hong Kong",
+  // HK: "Hong Kong S.A.R.",
+  HN: "Honduras",
+  HR: "Croatia",
+  HT: "Haiti",
+  HU: "Hungary",
+  ID: "Indonesia",
+  IE: "Ireland",
+  IL: "Israel",
+  IN: "India",
+  IQ: "Iraq",
+  IR: "Iran",
+  IS: "Iceland",
+  IT: "Italy",
+  JM: "Jamaica",
+  JO: "Jordan",
+  JP: "Japan",
+  KE: "Kenya",
+  KG: "Kyrgyzstan",
+  KH: "Cambodia",
+  KR: "South Korea",
+  KW: "Kuwait",
+  KZ: "Kazakhstan",
+  LA: "Laos",
+  LB: "Lebanon",
+  LI: "Liechtenstein",
+  LK: "Sri Lanka",
+  LT: "Lithuania",
+  LU: "Luxembourg",
+  LV: "Latvia",
+  LY: "Libya",
+  MA: "Morocco",
+  MC: "Principality of Monaco",
+  MD: "Moldava",
+  // MD: "Moldova",
+  ME: "Montenegro",
+  MK: "Former Yugoslav Republic of Macedonia",
+  ML: "Mali",
+  MM: "Myanmar",
+  MN: "Mongolia",
+  MO: "Macau S.A.R.",
+  MT: "Malta",
+  MV: "Maldives",
+  MX: "Mexico",
+  MY: "Malaysia",
+  NG: "Nigeria",
+  NI: "Nicaragua",
+  NL: "Netherlands",
+  NO: "Norway",
+  NP: "Nepal",
+  NZ: "New Zealand",
+  OM: "Oman",
+  PA: "Panama",
+  PE: "Peru",
+  PH: "Philippines",
+  PK: "Islamic Republic of Pakistan",
+  PL: "Poland",
+  PR: "Puerto Rico",
+  PT: "Portugal",
+  PY: "Paraguay",
+  QA: "Qatar",
+  RE: "Reunion",
+  RO: "Romania",
+  RS: "Serbia",
+  RU: "Russia",
+  RW: "Rwanda",
+  SA: "Saudi Arabia",
+  SE: "Sweden",
+  SG: "Singapore",
+  SI: "Slovenia",
+  SK: "Slovak",
+  SN: "Senegal",
+  SO: "Somalia",
+  SR: "Suriname",
+  SV: "El Salvador",
+  SY: "Syria",
+  TH: "Thailand",
+  TJ: "Tajikistan",
+  TM: "Turkmenistan",
+  TN: "Tunisia",
+  TR: "Turkey",
+  TT: "Trinidad and Tobago",
+  TW: "Taiwan",
+  TZ: "Tanzania",
+  UA: "Ukraine",
+  US: "United States",
+  UY: "Uruguay",
+  VA: "Vatican",
+  VE: "Venezuela",
+  VN: "Viet Nam",
+  YE: "Yemen",
+  ZA: "South Africa",
+  ZW: "Zimbabwe"
+}
+
diff --git a/packages/merchant-backoffice-ui/src/utils/switchableAxios.ts b/packages/merchant-backoffice-ui/src/utils/switchableAxios.ts
new file mode 100644
index 000000000..be7eedd48
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/utils/switchableAxios.ts
@@ -0,0 +1,66 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import axios, { AxiosPromise, AxiosRequestConfig } from "axios";
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+export let removeAxiosCancelToken = false;
+
+export let axiosHandler = function doAxiosRequest(config: AxiosRequestConfig): AxiosPromise<any> {
+  return axios(config)
+}
+
+/**
+ * Set this backend library to testing mode.
+ * Instead of calling the axios library the @handler will be called
+ * 
+ * @param handler callback that will mock axios 
+ */
+export function setAxiosRequestAsTestingEnvironment(handler: AxiosHandler): void {
+  removeAxiosCancelToken = true;
+  axiosHandler = function defaultTestingHandler(config) {
+    const currentHanlder = listOfHandlersToUseOnce.shift()
+    if (!currentHanlder) {
+      return handler(config)
+    }
+
+    return currentHanlder(config)
+  }
+}
+
+type AxiosHandler = (config: AxiosRequestConfig) => AxiosPromise<any>;
+type AxiosArguments = { args: AxiosRequestConfig | undefined }
+
+
+const listOfHandlersToUseOnce = new Array<AxiosHandler>()
+
+/**
+ * 
+ * @param handler mock function
+ * @returns savedArgs
+ */
+export function mockAxiosOnce(handler: AxiosHandler): { args: AxiosRequestConfig | undefined } {
+  const savedArgs: AxiosArguments = { args: undefined }
+  listOfHandlersToUseOnce.push((config: AxiosRequestConfig): AxiosPromise<any> => {
+    savedArgs.args = config;
+    return handler(config)
+  })
+  return savedArgs;
+}
diff --git a/packages/merchant-backoffice-ui/src/utils/table.ts b/packages/merchant-backoffice-ui/src/utils/table.ts
new file mode 100644
index 000000000..3d713a6f7
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/utils/table.ts
@@ -0,0 +1,37 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import { WithId } from "../declaration";
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+export interface Actions<T extends WithId> {
+  element: T;
+  type: 'DELETE' | 'UPDATE';
+}
+
+function notEmpty<TValue>(value: TValue | null | undefined): value is TValue {
+  return value !== null && value !== undefined;
+}
+
+export function buildActions<T extends WithId>(intances: T[], selected: string[], action: 'DELETE'): Actions<T>[] {
+  return selected.map(id => intances.find(i => i.id === id))
+    .filter(notEmpty)
+    .map(id => ({ element: id, type: action }))
+}
diff --git a/packages/merchant-backoffice-ui/src/utils/types.ts b/packages/merchant-backoffice-ui/src/utils/types.ts
new file mode 100644
index 000000000..a3f23ac10
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/utils/types.ts
@@ -0,0 +1,31 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import { VNode } from "preact";
+
+export interface KeyValue {
+  [key: string]: string;
+}
+
+export interface Notification {
+  message: string;
+  description?: string | VNode;
+  details?: string | VNode;
+  type: MessageType;
+}
+
+export type ValueOrFunction<T> = T | ((p: T) => T);
+export type MessageType = "INFO" | "WARN" | "ERROR" | "SUCCESS";
diff --git a/packages/merchant-backoffice-ui/tests/__mocks__/browserMocks.ts b/packages/merchant-backoffice-ui/tests/__mocks__/browserMocks.ts
new file mode 100644
index 000000000..ee6bba505
--- /dev/null
+++ b/packages/merchant-backoffice-ui/tests/__mocks__/browserMocks.ts
@@ -0,0 +1,42 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+ /**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+// Mock Browser API's which are not supported by JSDOM, e.g. ServiceWorker, LocalStorage
+/**
+ * An example how to mock localStorage is given below 👇
+ */
+
+/* 
+// Mocks localStorage
+const localStorageMock = (function() {
+	let store = {};
+
+	return {
+		getItem: (key) => store[key] || null,
+		setItem: (key, value) => store[key] = value.toString(),
+		clear: () => store = {}
+	};
+
+})();
+
+Object.defineProperty(window, 'localStorage', {
+	value: localStorageMock
+}); */
diff --git a/packages/merchant-backoffice-ui/tests/__mocks__/fileMocks.ts b/packages/merchant-backoffice-ui/tests/__mocks__/fileMocks.ts
new file mode 100644
index 000000000..0c045e9d1
--- /dev/null
+++ b/packages/merchant-backoffice-ui/tests/__mocks__/fileMocks.ts
@@ -0,0 +1,24 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+ /**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+// This fixed an error related to the CSS and loading gif breaking my Jest test
+// See https://facebook.github.io/jest/docs/en/webpack.html#handling-static-assets
+export default 'test-file-stub';
diff --git a/packages/merchant-backoffice-ui/tests/__mocks__/fileTransformer.js b/packages/merchant-backoffice-ui/tests/__mocks__/fileTransformer.js
new file mode 100644
index 000000000..e6193f8fd
--- /dev/null
+++ b/packages/merchant-backoffice-ui/tests/__mocks__/fileTransformer.js
@@ -0,0 +1,31 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+// fileTransformer.js
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const path = require('path');
+
+module.exports = {
+    process(src, filename, config, options) {
+        return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
+    },
+};
+
diff --git a/packages/merchant-backoffice-ui/tests/__mocks__/setupTests.ts b/packages/merchant-backoffice-ui/tests/__mocks__/setupTests.ts
new file mode 100644
index 000000000..b08eb7fe6
--- /dev/null
+++ b/packages/merchant-backoffice-ui/tests/__mocks__/setupTests.ts
@@ -0,0 +1,28 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import "regenerator-runtime/runtime";
+// import { configure } from 'enzyme';
+// import Adapter from 'enzyme-adapter-preact-pure';
+
+// configure({
+//     adapter: new Adapter()
+// });
diff --git a/packages/merchant-backoffice-ui/tests/axiosMock.ts b/packages/merchant-backoffice-ui/tests/axiosMock.ts
new file mode 100644
index 000000000..13ddab598
--- /dev/null
+++ b/packages/merchant-backoffice-ui/tests/axiosMock.ts
@@ -0,0 +1,445 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+import * as axios from 'axios';
+import { MerchantBackend } from '../src/declaration';
+import { mockAxiosOnce, setAxiosRequestAsTestingEnvironment } from '../src/utils/switchableAxios';
+// import { mockAxiosOnce, setAxiosRequestAsTestingEnvironment } from "../src/hooks/backend";
+
+export type Query<Req, Res> = (GetQuery | PostQuery | DeleteQuery | PatchQuery) & RequestResponse<Req, Res>
+
+interface RequestResponse<Req, Res> {
+  code?: number,
+}
+interface GetQuery { get: string }
+interface PostQuery { post: string }
+interface DeleteQuery { delete: string }
+interface PatchQuery { patch: string }
+
+
+const JEST_DEBUG_LOG = process.env['JEST_DEBUG_LOG'] !== undefined
+
+type ExpectationValues = { query: Query<any, any>; params?: { auth?: string, request?: any, qparam?: any, response?: any } }
+
+type TestValues = [axios.AxiosRequestConfig | undefined, ExpectationValues | undefined]
+
+const defaultCallback = (actualQuery?: axios.AxiosRequestConfig): axios.AxiosPromise<any> => {
+  if (JEST_DEBUG_LOG) {
+    console.log('UNEXPECTED QUERY', actualQuery)
+  }
+  throw Error('Default Axios mock callback is called, this mean that the test did a tried to use axios but there was no expectation in place, try using JEST_DEBUG_LOG env')
+}
+
+setAxiosRequestAsTestingEnvironment(
+  defaultCallback
+);
+
+export class AxiosMockEnvironment {
+  expectations: Array<{
+    query: Query<any, any>,
+    auth?: string,
+    params?: { request?: any, qparam?: any, response?: any },
+    result: { args: axios.AxiosRequestConfig | undefined }
+  } | undefined> = []
+  // axiosMock: jest.MockedFunction<axios.AxiosStatic>
+
+  addRequestExpectation<RequestType, ResponseType>(expectedQuery: Query<RequestType, ResponseType>, params: { auth?: string, request?: RequestType, qparam?: any, response?: ResponseType }): void {
+    const result = mockAxiosOnce(function (actualQuery?: axios.AxiosRequestConfig): axios.AxiosPromise {
+
+      if (JEST_DEBUG_LOG) {
+        console.log('query to the backend is made', actualQuery)
+      }
+      if (!expectedQuery) {
+        return Promise.reject("a query was made but it was not expected")
+      }
+      if (JEST_DEBUG_LOG) {
+        console.log('expected query:', params?.request)
+        console.log('expected qparams:', params?.qparam)
+        console.log('sending response:', params?.response)
+      }
+
+      const responseCode = expectedQuery.code || 200
+
+      //This response is what buildRequestOk is expecting in file hook/backend.ts
+      if (responseCode >= 200 && responseCode < 300) {
+        return Promise.resolve({
+          data: params?.response, config: {
+            data: params?.response,
+            params: actualQuery?.params || {},
+          }, request: { params: actualQuery?.params || {} }
+        } as any);
+      }
+      //This response is what buildRequestFailed is expecting in file hook/backend.ts
+      return Promise.reject({
+        response: {
+          status: responseCode
+        },
+        request: {
+          data: params?.response,
+          params: actualQuery?.params || {},
+        }
+      })
+
+    } as any)
+
+    this.expectations.push(expectedQuery ? { query: expectedQuery, params, result } : undefined)
+  }
+
+  getLastTestValues(): TestValues {
+    const expectedQuery = this.expectations.shift()
+
+    return [
+      expectedQuery?.result.args, expectedQuery
+    ]
+  }
+
+}
+
+export function assertJustExpectedRequestWereMade(env: AxiosMockEnvironment): void {
+  let size = env.expectations.length
+  while (size-- > 0) {
+    assertNextRequest(env)
+  }
+  assertNoMoreRequestWereMade(env)
+}
+
+export function assertNoMoreRequestWereMade(env: AxiosMockEnvironment): void {
+  const [actualQuery, expectedQuery] = env.getLastTestValues()
+
+  expect(actualQuery).toBeUndefined();
+  expect(expectedQuery).toBeUndefined();
+}
+
+export function assertNextRequest(env: AxiosMockEnvironment): void {
+  const [actualQuery, expectedQuery] = env.getLastTestValues()
+
+  if (!actualQuery) {
+    //expected one query but the tested component didn't execute one
+    expect(actualQuery).toBe(expectedQuery);
+    return
+  }
+
+  if (!expectedQuery) {
+    const errorMessage = 'a query was made to the backend but the test explicitly expected no query';
+    if (JEST_DEBUG_LOG) {
+      console.log(errorMessage, actualQuery)
+    }
+    throw Error(errorMessage)
+  }
+  if ('get' in expectedQuery.query) {
+    expect(actualQuery.method).toBe('get');
+    expect(actualQuery.url).toBe(expectedQuery.query.get);
+  }
+  if ('post' in expectedQuery.query) {
+    expect(actualQuery.method).toBe('post');
+    expect(actualQuery.url).toBe(expectedQuery.query.post);
+  }
+  if ('delete' in expectedQuery.query) {
+    expect(actualQuery.method).toBe('delete');
+    expect(actualQuery.url).toBe(expectedQuery.query.delete);
+  }
+  if ('patch' in expectedQuery.query) {
+    expect(actualQuery.method).toBe('patch');
+    expect(actualQuery.url).toBe(expectedQuery.query.patch);
+  }
+
+  if (expectedQuery.params?.request) {
+    expect(actualQuery.data).toMatchObject(expectedQuery.params.request)
+  }
+  if (expectedQuery.params?.qparam) {
+    expect(actualQuery.params).toMatchObject(expectedQuery.params.qparam)
+  }
+
+  if (expectedQuery.params?.auth) {
+    expect(actualQuery.headers.Authorization).toBe(expectedQuery.params?.auth)
+  }
+
+}
+
+////////////////////
+// ORDER
+////////////////////
+
+export const API_CREATE_ORDER: Query<
+  MerchantBackend.Orders.PostOrderRequest,
+  MerchantBackend.Orders.PostOrderResponse
+> = {
+  post: "http://backend/instances/default/private/orders",
+};
+
+export const API_GET_ORDER_BY_ID = (
+  id: string
+): Query<
+  unknown,
+  MerchantBackend.Orders.MerchantOrderStatusResponse
+> => ({
+  get: `http://backend/instances/default/private/orders/${id}`,
+});
+
+export const API_LIST_ORDERS: Query<
+  unknown,
+  MerchantBackend.Orders.OrderHistory
+> = {
+  get: "http://backend/instances/default/private/orders",
+};
+
+export const API_REFUND_ORDER_BY_ID = (
+  id: string
+): Query<
+  MerchantBackend.Orders.RefundRequest,
+  MerchantBackend.Orders.MerchantRefundResponse
+> => ({
+  post: `http://backend/instances/default/private/orders/${id}/refund`,
+});
+
+export const API_FORGET_ORDER_BY_ID = (
+  id: string
+): Query<
+  MerchantBackend.Orders.ForgetRequest,
+  unknown
+> => ({
+  patch: `http://backend/instances/default/private/orders/${id}/forget`,
+});
+
+export const API_DELETE_ORDER = (
+  id: string
+): Query<
+  MerchantBackend.Orders.ForgetRequest,
+  unknown
+> => ({
+  delete: `http://backend/instances/default/private/orders/${id}`,
+});
+
+////////////////////
+// TRANSFER
+////////////////////
+
+export const API_LIST_TRANSFERS: Query<
+  unknown,
+  MerchantBackend.Transfers.TransferList
+> = {
+  get: "http://backend/instances/default/private/transfers",
+};
+
+export const API_INFORM_TRANSFERS: Query<
+  MerchantBackend.Transfers.TransferInformation,
+  MerchantBackend.Transfers.MerchantTrackTransferResponse
+> = {
+  post: "http://backend/instances/default/private/transfers",
+};
+
+////////////////////
+// PRODUCT
+////////////////////
+
+export const API_CREATE_PRODUCT: Query<
+  MerchantBackend.Products.ProductAddDetail,
+  unknown
+> = {
+  post: "http://backend/instances/default/private/products",
+};
+
+export const API_LIST_PRODUCTS: Query<
+  unknown,
+  MerchantBackend.Products.InventorySummaryResponse
+> = {
+  get: "http://backend/instances/default/private/products",
+};
+
+export const API_GET_PRODUCT_BY_ID = (
+  id: string
+): Query<unknown, MerchantBackend.Products.ProductDetail> => ({
+  get: `http://backend/instances/default/private/products/${id}`,
+});
+
+export const API_UPDATE_PRODUCT_BY_ID = (
+  id: string
+): Query<
+  MerchantBackend.Products.ProductPatchDetail,
+  MerchantBackend.Products.InventorySummaryResponse
+> => ({
+  patch: `http://backend/instances/default/private/products/${id}`,
+});
+
+export const API_DELETE_PRODUCT = (
+  id: string
+): Query<
+  unknown, unknown
+> => ({
+  delete: `http://backend/instances/default/private/products/${id}`,
+});
+
+////////////////////
+// RESERVES
+////////////////////
+
+export const API_CREATE_RESERVE: Query<
+  MerchantBackend.Tips.ReserveCreateRequest,
+  MerchantBackend.Tips.ReserveCreateConfirmation
+> = {
+  post: "http://backend/instances/default/private/reserves",
+};
+export const API_LIST_RESERVES: Query<
+  unknown,
+  MerchantBackend.Tips.TippingReserveStatus
+> = {
+  get: "http://backend/instances/default/private/reserves",
+};
+
+export const API_GET_RESERVE_BY_ID = (
+  pub: string
+): Query<unknown, MerchantBackend.Tips.ReserveDetail> => ({
+  get: `http://backend/instances/default/private/reserves/${pub}`,
+});
+
+export const API_GET_TIP_BY_ID = (
+  pub: string
+): Query<
+  unknown,
+  MerchantBackend.Tips.TipDetails
+> => ({
+  get: `http://backend/instances/default/private/tips/${pub}`,
+});
+
+export const API_AUTHORIZE_TIP_FOR_RESERVE = (
+  pub: string
+): Query<
+  MerchantBackend.Tips.TipCreateRequest,
+  MerchantBackend.Tips.TipCreateConfirmation
+> => ({
+  post: `http://backend/instances/default/private/reserves/${pub}/authorize-tip`,
+});
+
+export const API_AUTHORIZE_TIP: Query<
+  MerchantBackend.Tips.TipCreateRequest,
+  MerchantBackend.Tips.TipCreateConfirmation
+> = ({
+  post: `http://backend/instances/default/private/tips`,
+});
+
+
+export const API_DELETE_RESERVE = (
+  id: string
+): Query<unknown, unknown> => ({
+  delete: `http://backend/instances/default/private/reserves/${id}`,
+});
+
+
+////////////////////
+// INSTANCE ADMIN
+////////////////////
+
+export const API_CREATE_INSTANCE: Query<
+  MerchantBackend.Instances.InstanceConfigurationMessage,
+  unknown
+> = {
+  post: "http://backend/management/instances",
+};
+
+export const API_GET_INSTANCE_BY_ID = (
+  id: string
+): Query<
+  unknown,
+  MerchantBackend.Instances.QueryInstancesResponse
+> => ({
+  get: `http://backend/management/instances/${id}`,
+});
+
+export const API_GET_INSTANCE_KYC_BY_ID = (
+  id: string
+): Query<
+  unknown,
+  MerchantBackend.Instances.AccountKycRedirects
+> => ({
+  get: `http://backend/management/instances/${id}/kyc`,
+});
+
+export const API_LIST_INSTANCES: Query<
+  unknown,
+  MerchantBackend.Instances.InstancesResponse
+> = {
+  get: "http://backend/management/instances",
+};
+
+export const API_UPDATE_INSTANCE_BY_ID = (
+  id: string
+): Query<
+  MerchantBackend.Instances.InstanceReconfigurationMessage,
+  unknown
+> => ({
+  patch: `http://backend/management/instances/${id}`,
+});
+
+export const API_UPDATE_INSTANCE_AUTH_BY_ID = (
+  id: string
+): Query<
+  MerchantBackend.Instances.InstanceAuthConfigurationMessage,
+  unknown
+> => ({
+  post: `http://backend/management/instances/${id}/auth`,
+});
+
+export const API_DELETE_INSTANCE = (
+  id: string
+): Query<unknown, unknown> => ({
+  delete: `http://backend/management/instances/${id}`,
+});
+
+////////////////////
+// INSTANCE 
+////////////////////
+
+export const API_GET_CURRENT_INSTANCE: Query<
+  unknown,
+  MerchantBackend.Instances.QueryInstancesResponse
+> = ({
+  get: `http://backend/instances/default/private/`,
+});
+
+export const API_GET_CURRENT_INSTANCE_KYC: Query<
+  unknown,
+  MerchantBackend.Instances.AccountKycRedirects
+> =
+  ({
+    get: `http://backend/instances/default/private/kyc`,
+  });
+
+export const API_UPDATE_CURRENT_INSTANCE: Query<
+  MerchantBackend.Instances.InstanceReconfigurationMessage,
+  unknown
+> = {
+  patch: `http://backend/instances/default/private/`,
+};
+
+export const API_UPDATE_CURRENT_INSTANCE_AUTH: Query<
+  MerchantBackend.Instances.InstanceAuthConfigurationMessage,
+  unknown
+> = {
+  post: `http://backend/instances/default/private/auth`,
+};
+
+export const API_DELETE_CURRENT_INSTANCE: Query<
+  unknown,
+  unknown
+> = ({
+  delete: `http://backend/instances/default/private`,
+});
+
+
diff --git a/packages/merchant-backoffice-ui/tests/context/backend.test.tsx b/packages/merchant-backoffice-ui/tests/context/backend.test.tsx
new file mode 100644
index 000000000..b7b50fd47
--- /dev/null
+++ b/packages/merchant-backoffice-ui/tests/context/backend.test.tsx
@@ -0,0 +1,172 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { renderHook } from "@testing-library/preact-hooks";
+import { ComponentChildren, h, VNode } from "preact";
+import { act } from "preact/test-utils";
+import { BackendContextProvider } from "../../src/context/backend";
+import { InstanceContextProvider } from "../../src/context/instance";
+import { MerchantBackend } from "../../src/declaration";
+import {
+  useAdminAPI,
+  useInstanceAPI,
+  useManagementAPI,
+} from "../../src/hooks/instance";
+import {
+  API_CREATE_INSTANCE,
+  API_GET_CURRENT_INSTANCE,
+  API_UPDATE_CURRENT_INSTANCE_AUTH,
+  API_UPDATE_INSTANCE_AUTH_BY_ID,
+  assertJustExpectedRequestWereMade,
+  AxiosMockEnvironment,
+} from "../axiosMock";
+
+interface TestingContextProps {
+  children?: ComponentChildren;
+}
+
+function TestingContext({ children }: TestingContextProps): VNode {
+  return (
+    <BackendContextProvider defaultUrl="http://backend" initialToken="token">
+      {children}
+    </BackendContextProvider>
+  );
+}
+function AdminTestingContext({ children }: TestingContextProps): VNode {
+  return (
+    <BackendContextProvider defaultUrl="http://backend" initialToken="token">
+      <InstanceContextProvider
+        value={{
+          token: "token",
+          id: "default",
+          admin: true,
+          changeToken: () => null,
+        }}
+      >
+        {children}
+      </InstanceContextProvider>
+    </BackendContextProvider>
+  );
+}
+
+describe("backend context api ", () => {
+  it("should use new token after updating the instance token in the settings as user", async () => {
+    const env = new AxiosMockEnvironment();
+
+    const { result, waitForNextUpdate } = renderHook(
+      () => {
+        const instance = useInstanceAPI();
+        const management = useManagementAPI("default");
+        const admin = useAdminAPI();
+
+        return { instance, management, admin };
+      },
+      { wrapper: TestingContext }
+    );
+
+    if (!result.current) {
+      expect(result.current).toBeDefined();
+      return;
+    }
+
+    env.addRequestExpectation(API_UPDATE_INSTANCE_AUTH_BY_ID("default"), {
+      request: {
+        method: "token",
+        token: "another_token",
+      },
+      response: {
+        name: "instance_name",
+      } as MerchantBackend.Instances.QueryInstancesResponse,
+    });
+
+    await act(async () => {
+      await result.current?.management.setNewToken("another_token");
+    });
+
+    // await waitForNextUpdate({ timeout: 1 });
+
+    assertJustExpectedRequestWereMade(env);
+
+    env.addRequestExpectation(API_CREATE_INSTANCE, {
+      auth: "Bearer another_token",
+      request: {
+        id: "new_instance_id",
+      } as MerchantBackend.Instances.InstanceConfigurationMessage,
+    });
+
+    result.current.admin.createInstance({
+      id: "new_instance_id",
+    } as MerchantBackend.Instances.InstanceConfigurationMessage);
+
+    assertJustExpectedRequestWereMade(env);
+  });
+
+  it("should use new token after updating the instance token in the settings as admin", async () => {
+    const env = new AxiosMockEnvironment();
+
+    const { result, waitForNextUpdate } = renderHook(
+      () => {
+        const instance = useInstanceAPI();
+        const management = useManagementAPI("default");
+        const admin = useAdminAPI();
+
+        return { instance, management, admin };
+      },
+      { wrapper: AdminTestingContext }
+    );
+
+    if (!result.current) {
+      expect(result.current).toBeDefined();
+      return;
+    }
+
+    env.addRequestExpectation(API_UPDATE_CURRENT_INSTANCE_AUTH, {
+      request: {
+        method: "token",
+        token: "another_token",
+      },
+      response: {
+        name: "instance_name",
+      } as MerchantBackend.Instances.QueryInstancesResponse,
+    });
+
+    await act(async () => {
+      await result.current?.instance.setNewToken("another_token");
+    });
+
+    // await waitForNextUpdate({ timeout: 1 });
+
+    assertJustExpectedRequestWereMade(env);
+
+    env.addRequestExpectation(API_CREATE_INSTANCE, {
+      auth: "Bearer another_token",
+      request: {
+        id: "new_instance_id",
+      } as MerchantBackend.Instances.InstanceConfigurationMessage,
+    });
+
+    result.current.admin.createInstance({
+      id: "new_instance_id",
+    } as MerchantBackend.Instances.InstanceConfigurationMessage);
+
+    assertJustExpectedRequestWereMade(env);
+  });
+});
diff --git a/packages/merchant-backoffice-ui/tests/declarations.d.ts b/packages/merchant-backoffice-ui/tests/declarations.d.ts
new file mode 100644
index 000000000..61a53dc69
--- /dev/null
+++ b/packages/merchant-backoffice-ui/tests/declarations.d.ts
@@ -0,0 +1,28 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+declare global {
+  namespace jest {
+    interface Matchers<R> {
+      toBeWithinRange(a: number, b: number): R;
+    }
+  }
+}
diff --git a/packages/merchant-backoffice-ui/tests/functions/regex.test.ts b/packages/merchant-backoffice-ui/tests/functions/regex.test.ts
new file mode 100644
index 000000000..fc8a6a42f
--- /dev/null
+++ b/packages/merchant-backoffice-ui/tests/functions/regex.test.ts
@@ -0,0 +1,87 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+ /**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { AMOUNT_REGEX, PAYTO_REGEX } from "../../src/utils/constants";
+
+describe('payto uri format', () => {
+  const valids = [
+    'payto://iban/DE75512108001245126199?amount=EUR:200.0&message=hello',
+    'payto://ach/122000661/1234',
+    'payto://upi/alice@example.com?receiver-name=Alice&amount=INR:200',
+    'payto://void/?amount=EUR:10.5',
+    'payto://ilp/g.acme.bob'
+  ]
+  
+  test('should be valid', () => {
+    valids.forEach(v => expect(v).toMatch(PAYTO_REGEX))
+  });
+  
+  const invalids = [
+    // has two question marks
+    'payto://iban/DE75?512108001245126199?amount=EUR:200.0&message=hello',
+    // has a space
+    'payto://ach /122000661/1234',
+    // has a space
+    'payto://upi/alice@ example.com?receiver-name=Alice&amount=INR:200',
+    // invalid field name (mount instead of amount)
+    'payto://void/?mount=EUR:10.5',
+    // payto:// is incomplete
+    'payto: //ilp/g.acme.bob'
+  ]
+  
+  test('should not be valid', () => {
+    invalids.forEach(v => expect(v).not.toMatch(PAYTO_REGEX))
+  });  
+})
+
+describe('amount format', () => {
+  const valids = [
+    'ARS:10',
+    'COL:10.2',
+    'UY:1,000.2',
+    'ARS:10.123,123',
+    'ARS:1,000,000',
+    'ARSCOL:10',
+    'THISISTHEMOTHERCOIN:1,000,000.123,123',
+  ]
+  
+  test('should be valid', () => {
+    valids.forEach(v => expect(v).toMatch(AMOUNT_REGEX))
+  });
+  
+  const invalids = [
+    //no currency name
+    ':10',
+    //use . instead of ,
+    'ARS:1.000.000',
+    //currency name with numbers
+    '1ARS:10',
+    //currency name with numbers
+    'AR5:10',
+    //missing value
+    'USD:',
+  ]
+  
+  test('should not be valid', () => {
+    invalids.forEach(v => expect(v).not.toMatch(AMOUNT_REGEX))
+  });  
+
+})
\ No newline at end of file
diff --git a/packages/merchant-backoffice-ui/tests/header.test.tsx b/packages/merchant-backoffice-ui/tests/header.test.tsx
new file mode 100644
index 000000000..f098b70d5
--- /dev/null
+++ b/packages/merchant-backoffice-ui/tests/header.test.tsx
@@ -0,0 +1,63 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { h } from "preact";
+import { ProductList } from "../src/components/product/ProductList";
+// See: https://github.com/preactjs/enzyme-adapter-preact-pure
+// import { shallow } from 'enzyme';
+import * as backend from "../src/context/config";
+import { render, findAllByText } from "@testing-library/preact";
+import * as i18n from "../src/context/translation";
+
+import * as jedLib from "jed";
+const handler = new jedLib.Jed("en");
+
+describe("Initial Test of the Sidebar", () => {
+  beforeEach(() => {
+    jest
+      .spyOn(backend, "useConfigContext")
+      .mockImplementation(() => ({ version: "", currency: "" }));
+    jest.spyOn(i18n, "useTranslationContext").mockImplementation(() => ({
+      changeLanguage: () => null,
+      handler,
+      lang: "en",
+    }));
+  });
+  test("Product list renders a table", () => {
+    const context = render(
+      <ProductList
+        list={[
+          {
+            description: "description of the product",
+            image: "asdasda",
+            price: "USD:10",
+            quantity: 1,
+            taxes: [{ name: "VAT", tax: "EUR:1" }],
+            unit: "book",
+          },
+        ]}
+      />
+    );
+
+    expect(context.findAllByText("description of the product")).toBeDefined();
+    // expect(context.find('table tr td img').map(img => img.prop('src'))).toEqual('');
+  });
+});
diff --git a/packages/merchant-backoffice-ui/tests/hooks/async.test.ts b/packages/merchant-backoffice-ui/tests/hooks/async.test.ts
new file mode 100644
index 000000000..a6d0cddfa
--- /dev/null
+++ b/packages/merchant-backoffice-ui/tests/hooks/async.test.ts
@@ -0,0 +1,158 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import { renderHook } from "@testing-library/preact-hooks"
+import { useAsync } from "../../src/hooks/async"
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+test("async function is called", async () => {
+  jest.useFakeTimers()
+
+  const timeout = 500
+
+  const asyncFunction = jest.fn(() => new Promise((res) => {
+    setTimeout(() => {
+      res({ the_answer: 'yes' })
+    }, timeout);
+  }))
+
+  const { result, waitForNextUpdate } = renderHook(() => {
+    return useAsync(asyncFunction)
+  })
+
+  expect(result.current?.isLoading).toBeFalsy()
+
+  result.current?.request()
+  expect(asyncFunction).toBeCalled()
+  await waitForNextUpdate({ timeout: 1 })
+  expect(result.current?.isLoading).toBeTruthy()
+
+  jest.advanceTimersByTime(timeout + 1)
+  await waitForNextUpdate({ timeout: 1 })
+  expect(result.current?.isLoading).toBeFalsy()
+  expect(result.current?.data).toMatchObject({ the_answer: 'yes' })
+  expect(result.current?.error).toBeUndefined()
+  expect(result.current?.isSlow).toBeFalsy()
+})
+
+test("async function return error if rejected", async () => {
+  jest.useFakeTimers()
+
+  const timeout = 500
+
+  const asyncFunction = jest.fn(() => new Promise((_, rej) => {
+    setTimeout(() => {
+      rej({ the_error: 'yes' })
+    }, timeout);
+  }))
+
+  const { result, waitForNextUpdate } = renderHook(() => {
+    return useAsync(asyncFunction)
+  })
+
+  expect(result.current?.isLoading).toBeFalsy()
+
+  result.current?.request()
+  expect(asyncFunction).toBeCalled()
+  await waitForNextUpdate({ timeout: 1 })
+  expect(result.current?.isLoading).toBeTruthy()
+
+  jest.advanceTimersByTime(timeout + 1)
+  await waitForNextUpdate({ timeout: 1 })
+  expect(result.current?.isLoading).toBeFalsy()
+  expect(result.current?.error).toMatchObject({ the_error: 'yes' })
+  expect(result.current?.data).toBeUndefined()
+  expect(result.current?.isSlow).toBeFalsy()
+})
+
+test("async function is slow", async () => {
+  jest.useFakeTimers()
+
+  const timeout = 2200
+
+  const asyncFunction = jest.fn(() => new Promise((res) => {
+    setTimeout(() => {
+      res({ the_answer: 'yes' })
+    }, timeout);
+  }))
+
+  const { result, waitForNextUpdate } = renderHook(() => {
+    return useAsync(asyncFunction)
+  })
+
+  expect(result.current?.isLoading).toBeFalsy()
+
+  result.current?.request()
+  expect(asyncFunction).toBeCalled()
+  await waitForNextUpdate({ timeout: 1 })
+  expect(result.current?.isLoading).toBeTruthy()
+
+  jest.advanceTimersByTime(timeout / 2)
+  await waitForNextUpdate({ timeout: 1 })
+  expect(result.current?.isLoading).toBeTruthy()
+  expect(result.current?.isSlow).toBeTruthy()
+  expect(result.current?.data).toBeUndefined()
+  expect(result.current?.error).toBeUndefined()
+
+  jest.advanceTimersByTime(timeout / 2)
+  await waitForNextUpdate({ timeout: 1 })
+  expect(result.current?.isLoading).toBeFalsy()
+  expect(result.current?.data).toMatchObject({ the_answer: 'yes' })
+  expect(result.current?.error).toBeUndefined()
+  expect(result.current?.isSlow).toBeFalsy()
+
+})
+
+test("async function is cancellable", async () => {
+  jest.useFakeTimers()
+
+  const timeout = 2200
+
+  const asyncFunction = jest.fn(() => new Promise((res) => {
+    setTimeout(() => {
+      res({ the_answer: 'yes' })
+    }, timeout);
+  }))
+
+  const { result, waitForNextUpdate } = renderHook(() => {
+    return useAsync(asyncFunction)
+  })
+
+  expect(result.current?.isLoading).toBeFalsy()
+
+  result.current?.request()
+  expect(asyncFunction).toBeCalled()
+  await waitForNextUpdate({ timeout: 1 })
+  expect(result.current?.isLoading).toBeTruthy()
+
+  jest.advanceTimersByTime(timeout / 2)
+  await waitForNextUpdate({ timeout: 1 })
+  expect(result.current?.isLoading).toBeTruthy()
+  expect(result.current?.isSlow).toBeTruthy()
+  expect(result.current?.data).toBeUndefined()
+  expect(result.current?.error).toBeUndefined()
+
+  result.current?.cancel()
+  await waitForNextUpdate({ timeout: 1 })
+  expect(result.current?.isLoading).toBeFalsy()
+  expect(result.current?.data).toBeUndefined()
+  expect(result.current?.error).toBeUndefined()
+  expect(result.current?.isSlow).toBeFalsy()
+
+})
diff --git a/packages/merchant-backoffice-ui/tests/hooks/listener.test.ts b/packages/merchant-backoffice-ui/tests/hooks/listener.test.ts
new file mode 100644
index 000000000..ae34c1339
--- /dev/null
+++ b/packages/merchant-backoffice-ui/tests/hooks/listener.test.ts
@@ -0,0 +1,62 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { renderHook, act } from '@testing-library/preact-hooks';
+import { useListener } from '../../src/hooks/listener';
+
+// jest.useFakeTimers()
+
+test('listener', async () => {
+
+
+  function createSomeString() {
+    return "hello"
+  }
+  async function addWorldToTheEnd(resultFromComponentB: string) {
+    return `${resultFromComponentB} world`
+  }
+  const expectedResult = "hello world"
+
+  const { result } = renderHook(() => useListener(addWorldToTheEnd))
+
+  if (!result.current) {
+    expect(result.current).toBeDefined()
+    return;
+  }
+
+  {
+    const [activator, subscriber] = result.current
+    expect(activator).toBeUndefined()
+
+    act(() => {
+      subscriber(createSomeString)
+    })
+
+  }
+
+  const [activator] = result.current
+  expect(activator).toBeDefined()
+  if (!activator) return;
+
+  const response = await activator()
+  expect(response).toBe(expectedResult)
+
+});
diff --git a/packages/merchant-backoffice-ui/tests/hooks/notification.test.ts b/packages/merchant-backoffice-ui/tests/hooks/notification.test.ts
new file mode 100644
index 000000000..6825a825a
--- /dev/null
+++ b/packages/merchant-backoffice-ui/tests/hooks/notification.test.ts
@@ -0,0 +1,51 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+ /**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { renderHook, act} from '@testing-library/preact-hooks';
+import { useNotifications } from '../../src/hooks/notifications';
+
+jest.useFakeTimers()
+
+test('notification should disapear after timeout', () => {
+  jest.spyOn(global, 'setTimeout');
+
+  const timeout = 1000
+  const { result, rerender } = renderHook(() => useNotifications(undefined, timeout));
+
+  expect(result.current?.notifications.length).toBe(0);
+
+  act(() => {
+    result.current?.pushNotification({
+      message: 'some_id',
+      type: 'INFO'
+    });
+  });
+  expect(result.current?.notifications.length).toBe(1);
+
+  jest.advanceTimersByTime(timeout/2);
+  rerender()
+  expect(result.current?.notifications.length).toBe(1);
+
+  jest.advanceTimersByTime(timeout);
+  rerender()
+  expect(result.current?.notifications.length).toBe(0);
+
+});
diff --git a/packages/merchant-backoffice-ui/tests/hooks/swr/index.tsx b/packages/merchant-backoffice-ui/tests/hooks/swr/index.tsx
new file mode 100644
index 000000000..44514855d
--- /dev/null
+++ b/packages/merchant-backoffice-ui/tests/hooks/swr/index.tsx
@@ -0,0 +1,45 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { ComponentChildren, h, VNode } from "preact";
+import { SWRConfig } from "swr";
+import { BackendContextProvider } from "../../../src/context/backend";
+import { InstanceContextProvider } from "../../../src/context/instance";
+
+interface TestingContextProps {
+  children?: ComponentChildren;
+}
+export function TestingContext({ children }: TestingContextProps): VNode {
+  return (
+    <BackendContextProvider defaultUrl="http://backend" initialToken="token">
+      <InstanceContextProvider
+        value={{
+          token: "token",
+          id: "default",
+          admin: true,
+          changeToken: () => null,
+        }}
+      >
+        <SWRConfig value={{ provider: () => new Map() }}>{children}</SWRConfig>
+      </InstanceContextProvider>
+    </BackendContextProvider>
+  );
+}
diff --git a/packages/merchant-backoffice-ui/tests/hooks/swr/instance.test.ts b/packages/merchant-backoffice-ui/tests/hooks/swr/instance.test.ts
new file mode 100644
index 000000000..55d9fa6ee
--- /dev/null
+++ b/packages/merchant-backoffice-ui/tests/hooks/swr/instance.test.ts
@@ -0,0 +1,636 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { renderHook } from "@testing-library/preact-hooks";
+import { act } from "preact/test-utils";
+import { MerchantBackend } from "../../../src/declaration";
+import { useAdminAPI, useBackendInstances, useInstanceAPI, useInstanceDetails, useManagementAPI } from "../../../src/hooks/instance";
+import {
+  API_CREATE_INSTANCE,
+  API_DELETE_INSTANCE,
+  API_GET_CURRENT_INSTANCE,
+  API_LIST_INSTANCES,
+  API_UPDATE_CURRENT_INSTANCE,
+  API_UPDATE_CURRENT_INSTANCE_AUTH,
+  API_UPDATE_INSTANCE_AUTH_BY_ID,
+  API_UPDATE_INSTANCE_BY_ID,
+  assertJustExpectedRequestWereMade,
+  AxiosMockEnvironment
+} from "../../axiosMock";
+import { TestingContext } from "./index";
+
+describe("instance api interaction with details ", () => {
+
+  it("should evict cache when updating an instance", async () => {
+
+    const env = new AxiosMockEnvironment();
+
+    env.addRequestExpectation(API_GET_CURRENT_INSTANCE, {
+      response: {
+        name: 'instance_name'
+      } as MerchantBackend.Instances.QueryInstancesResponse,
+    });
+
+    const { result, waitForNextUpdate } = renderHook(
+      () => {
+        const api = useInstanceAPI();
+        const query = useInstanceDetails();
+
+        return { query, api };
+      },
+      { wrapper: TestingContext }
+    );
+
+    if (!result.current) {
+      expect(result.current).toBeDefined();
+      return;
+    }
+    expect(result.current.query.loading).toBeTruthy();
+
+    await waitForNextUpdate({ timeout: 1 });
+
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.loading).toBeFalsy();
+
+    expect(result.current?.query.ok).toBeTruthy();
+    if (!result.current?.query.ok) return;
+
+    expect(result.current.query.data).toEqual({
+      name: 'instance_name'
+    });
+
+    env.addRequestExpectation(API_UPDATE_CURRENT_INSTANCE, {
+      request: {
+        name: 'other_name'
+      } as MerchantBackend.Instances.InstanceReconfigurationMessage,
+    });
+
+    act(async () => {
+      await result.current?.api.updateInstance({
+        name: 'other_name'
+      } as MerchantBackend.Instances.InstanceReconfigurationMessage);
+    });
+
+    assertJustExpectedRequestWereMade(env);
+
+    env.addRequestExpectation(API_GET_CURRENT_INSTANCE, {
+      response: {
+        name: 'other_name'
+      } as MerchantBackend.Instances.QueryInstancesResponse,
+    });
+
+    expect(result.current.query.loading).toBeFalsy();
+
+    await waitForNextUpdate({ timeout: 1 });
+
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.loading).toBeFalsy();
+    expect(result.current.query.ok).toBeTruthy();
+
+    expect(result.current.query.data).toEqual({
+      name: 'other_name'
+    });
+  });
+
+  it("should evict cache when setting the instance's token", async () => {
+    const env = new AxiosMockEnvironment();
+
+    env.addRequestExpectation(API_GET_CURRENT_INSTANCE, {
+      response: {
+        name: 'instance_name',
+        auth: {
+          method: 'token',
+          token: 'not-secret',
+        }
+      } as MerchantBackend.Instances.QueryInstancesResponse,
+    });
+
+    const { result, waitForNextUpdate } = renderHook(
+      () => {
+        const api = useInstanceAPI();
+        const query = useInstanceDetails();
+
+        return { query, api };
+      },
+      { wrapper: TestingContext }
+    );
+
+    if (!result.current) {
+      expect(result.current).toBeDefined();
+      return;
+    }
+    expect(result.current.query.loading).toBeTruthy();
+
+    await waitForNextUpdate({ timeout: 1 });
+
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.loading).toBeFalsy();
+
+    expect(result.current?.query.ok).toBeTruthy();
+    if (!result.current?.query.ok) return;
+
+    expect(result.current.query.data).toEqual({
+      name: 'instance_name',
+      auth: {
+        method: 'token',
+        token: 'not-secret',
+      }
+    });
+
+    env.addRequestExpectation(API_UPDATE_CURRENT_INSTANCE_AUTH, {
+      request: {
+        method: 'token',
+        token: 'secret'
+      } as MerchantBackend.Instances.InstanceAuthConfigurationMessage,
+    });
+
+    act(async () => {
+      await result.current?.api.setNewToken('secret');
+    });
+
+    assertJustExpectedRequestWereMade(env);
+
+    env.addRequestExpectation(API_GET_CURRENT_INSTANCE, {
+      response: {
+        name: 'instance_name',
+        auth: {
+          method: 'token',
+          token: 'secret',
+        }
+      } as MerchantBackend.Instances.QueryInstancesResponse,
+    });
+
+    expect(result.current.query.loading).toBeFalsy();
+
+    await waitForNextUpdate({ timeout: 1 });
+
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.loading).toBeFalsy();
+    expect(result.current.query.ok).toBeTruthy();
+
+    expect(result.current.query.data).toEqual({
+      name: 'instance_name',
+      auth: {
+        method: 'token',
+        token: 'secret',
+      }
+    });
+  });
+
+  it("should evict cache when clearing the instance's token", async () => {
+    const env = new AxiosMockEnvironment();
+
+    env.addRequestExpectation(API_GET_CURRENT_INSTANCE, {
+      response: {
+        name: 'instance_name',
+        auth: {
+          method: 'token',
+          token: 'not-secret',
+        }
+      } as MerchantBackend.Instances.QueryInstancesResponse,
+    });
+
+    const { result, waitForNextUpdate } = renderHook(
+      () => {
+        const api = useInstanceAPI();
+        const query = useInstanceDetails();
+
+        return { query, api };
+      },
+      { wrapper: TestingContext }
+    );
+
+    if (!result.current) {
+      expect(result.current).toBeDefined();
+      return;
+    }
+    expect(result.current.query.loading).toBeTruthy();
+
+    await waitForNextUpdate({ timeout: 1 });
+
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.loading).toBeFalsy();
+
+    expect(result.current?.query.ok).toBeTruthy();
+    if (!result.current?.query.ok) return;
+
+    expect(result.current.query.data).toEqual({
+      name: 'instance_name',
+      auth: {
+        method: 'token',
+        token: 'not-secret',
+      }
+    });
+
+    env.addRequestExpectation(API_UPDATE_CURRENT_INSTANCE_AUTH, {
+      request: {
+        method: 'external',
+      } as MerchantBackend.Instances.InstanceAuthConfigurationMessage,
+    });
+
+    act(async () => {
+      await result.current?.api.clearToken();
+    });
+
+    assertJustExpectedRequestWereMade(env);
+
+    env.addRequestExpectation(API_GET_CURRENT_INSTANCE, {
+      response: {
+        name: 'instance_name',
+        auth: {
+          method: 'external',
+        }
+      } as MerchantBackend.Instances.QueryInstancesResponse,
+    });
+
+    expect(result.current.query.loading).toBeFalsy();
+
+    await waitForNextUpdate({ timeout: 1 });
+
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.loading).toBeFalsy();
+    expect(result.current.query.ok).toBeTruthy();
+
+    expect(result.current.query.data).toEqual({
+      name: 'instance_name',
+      auth: {
+        method: 'external',
+      }
+    });
+  });
+});
+
+describe("instance admin api interaction with listing ", () => {
+
+  it("should evict cache when creating a new instance", async () => {
+    const env = new AxiosMockEnvironment();
+
+    env.addRequestExpectation(API_LIST_INSTANCES, {
+      response: {
+        instances: [{
+          name: 'instance_name'
+        } as MerchantBackend.Instances.Instance]
+      },
+    });
+
+    const { result, waitForNextUpdate } = renderHook(
+      () => {
+        const api = useAdminAPI();
+        const query = useBackendInstances();
+
+        return { query, api };
+      },
+      { wrapper: TestingContext }
+    );
+
+    if (!result.current) {
+      expect(result.current).toBeDefined();
+      return;
+    }
+    expect(result.current.query.loading).toBeTruthy();
+
+    await waitForNextUpdate({ timeout: 1 });
+
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.loading).toBeFalsy();
+
+    expect(result.current?.query.ok).toBeTruthy();
+    if (!result.current?.query.ok) return;
+
+    expect(result.current.query.data).toEqual({
+      instances: [{
+        name: 'instance_name'
+      }]
+    });
+
+    env.addRequestExpectation(API_CREATE_INSTANCE, {
+      request: {
+        name: 'other_name'
+      } as MerchantBackend.Instances.InstanceConfigurationMessage,
+    });
+
+    act(async () => {
+      await result.current?.api.createInstance({
+        name: 'other_name'
+      } as MerchantBackend.Instances.InstanceConfigurationMessage);
+    });
+
+    assertJustExpectedRequestWereMade(env);
+
+    env.addRequestExpectation(API_LIST_INSTANCES, {
+      response: {
+        instances: [{
+          name: 'instance_name'
+        } as MerchantBackend.Instances.Instance,
+        {
+          name: 'other_name'
+        } as MerchantBackend.Instances.Instance]
+      },
+    });
+
+    expect(result.current.query.loading).toBeFalsy();
+
+    await waitForNextUpdate({ timeout: 1 });
+
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.loading).toBeFalsy();
+    expect(result.current.query.ok).toBeTruthy();
+
+    expect(result.current.query.data).toEqual({
+      instances: [{
+        name: 'instance_name'
+      }, {
+        name: 'other_name'
+      }]
+    });
+  });
+
+  it("should evict cache when deleting an instance", async () => {
+    const env = new AxiosMockEnvironment();
+
+    env.addRequestExpectation(API_LIST_INSTANCES, {
+      response: {
+        instances: [{
+          id: 'default',
+          name: 'instance_name'
+        } as MerchantBackend.Instances.Instance,
+        {
+          id: 'the_id',
+          name: 'second_instance'
+        } as MerchantBackend.Instances.Instance]
+      },
+    });
+
+    const { result, waitForNextUpdate } = renderHook(
+      () => {
+        const api = useAdminAPI();
+        const query = useBackendInstances();
+
+        return { query, api };
+      },
+      { wrapper: TestingContext }
+    );
+
+    if (!result.current) {
+      expect(result.current).toBeDefined();
+      return;
+    }
+    expect(result.current.query.loading).toBeTruthy();
+
+    await waitForNextUpdate({ timeout: 1 });
+
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.loading).toBeFalsy();
+
+    expect(result.current?.query.ok).toBeTruthy();
+    if (!result.current?.query.ok) return;
+
+    expect(result.current.query.data).toEqual({
+      instances: [{
+        id: 'default',
+        name: 'instance_name'
+      }, {
+        id: 'the_id',
+        name: 'second_instance'
+      }]
+    });
+
+    env.addRequestExpectation(API_DELETE_INSTANCE('the_id'), {});
+
+    act(async () => {
+      await result.current?.api.deleteInstance('the_id');
+    });
+
+    assertJustExpectedRequestWereMade(env);
+
+    env.addRequestExpectation(API_LIST_INSTANCES, {
+      response: {
+        instances: [{
+          id: 'default',
+          name: 'instance_name'
+        } as MerchantBackend.Instances.Instance]
+      },
+    });
+
+    expect(result.current.query.loading).toBeFalsy();
+
+    await waitForNextUpdate({ timeout: 1 });
+
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.loading).toBeFalsy();
+    expect(result.current.query.ok).toBeTruthy();
+
+    expect(result.current.query.data).toEqual({
+      instances: [{
+        id: 'default',
+        name: 'instance_name'
+      }]
+    });
+  });
+  it("should evict cache when deleting (purge) an instance", async () => {
+    const env = new AxiosMockEnvironment();
+
+    env.addRequestExpectation(API_LIST_INSTANCES, {
+      response: {
+        instances: [{
+          id: 'default',
+          name: 'instance_name'
+        } as MerchantBackend.Instances.Instance,
+        {
+          id: 'the_id',
+          name: 'second_instance'
+        } as MerchantBackend.Instances.Instance]
+      },
+    });
+
+    const { result, waitForNextUpdate } = renderHook(
+      () => {
+        const api = useAdminAPI();
+        const query = useBackendInstances();
+
+        return { query, api };
+      },
+      { wrapper: TestingContext }
+    );
+
+    if (!result.current) {
+      expect(result.current).toBeDefined();
+      return;
+    }
+    expect(result.current.query.loading).toBeTruthy();
+
+    await waitForNextUpdate({ timeout: 1 });
+
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.loading).toBeFalsy();
+
+    expect(result.current?.query.ok).toBeTruthy();
+    if (!result.current?.query.ok) return;
+
+    expect(result.current.query.data).toEqual({
+      instances: [{
+        id: 'default',
+        name: 'instance_name'
+      }, {
+        id: 'the_id',
+        name: 'second_instance'
+      }]
+    });
+
+    env.addRequestExpectation(API_DELETE_INSTANCE('the_id'), {
+      qparam: {
+        purge: 'YES'
+      }
+    });
+
+    act(async () => {
+      await result.current?.api.purgeInstance('the_id');
+    });
+
+    assertJustExpectedRequestWereMade(env);
+
+    env.addRequestExpectation(API_LIST_INSTANCES, {
+      response: {
+        instances: [{
+          id: 'default',
+          name: 'instance_name'
+        } as MerchantBackend.Instances.Instance]
+      },
+    });
+
+    expect(result.current.query.loading).toBeFalsy();
+
+    await waitForNextUpdate({ timeout: 1 });
+
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.loading).toBeFalsy();
+    expect(result.current.query.ok).toBeTruthy();
+
+    expect(result.current.query.data).toEqual({
+      instances: [{
+        id: 'default',
+        name: 'instance_name'
+      }]
+    });
+  });
+});
+
+describe("instance management api interaction with listing ", () => {
+
+  it("should evict cache when updating an instance", async () => {
+    const env = new AxiosMockEnvironment();
+
+    env.addRequestExpectation(API_LIST_INSTANCES, {
+      response: {
+        instances: [{
+          id: 'managed',
+          name: 'instance_name'
+        } as MerchantBackend.Instances.Instance]
+      },
+    });
+
+    const { result, waitForNextUpdate } = renderHook(
+      () => {
+        const api = useManagementAPI('managed');
+        const query = useBackendInstances();
+
+        return { query, api };
+      },
+      { wrapper: TestingContext }
+    );
+
+    if (!result.current) {
+      expect(result.current).toBeDefined();
+      return;
+    }
+    expect(result.current.query.loading).toBeTruthy();
+
+    await waitForNextUpdate({ timeout: 1 });
+
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.loading).toBeFalsy();
+
+    expect(result.current?.query.ok).toBeTruthy();
+    if (!result.current?.query.ok) return;
+
+    expect(result.current.query.data).toEqual({
+      instances: [{
+        id: 'managed',
+        name: 'instance_name'
+      }]
+    });
+
+    env.addRequestExpectation(API_UPDATE_INSTANCE_BY_ID('managed'), {
+      request: {
+        name: 'other_name'
+      } as MerchantBackend.Instances.InstanceReconfigurationMessage,
+    });
+
+    act(async () => {
+      await result.current?.api.updateInstance({
+        name: 'other_name'
+      } as MerchantBackend.Instances.InstanceConfigurationMessage);
+    });
+
+    assertJustExpectedRequestWereMade(env);
+
+    env.addRequestExpectation(API_LIST_INSTANCES, {
+      response: {
+        instances: [
+          {
+            id: 'managed',
+            name: 'other_name'
+          } as MerchantBackend.Instances.Instance]
+      },
+    });
+
+    expect(result.current.query.loading).toBeFalsy();
+
+    await waitForNextUpdate({ timeout: 1 });
+
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.loading).toBeFalsy();
+    expect(result.current.query.ok).toBeTruthy();
+
+    expect(result.current.query.data).toEqual({
+      instances: [{
+        id: 'managed',
+        name: 'other_name'
+      }]
+    });
+  });
+
+});
+
diff --git a/packages/merchant-backoffice-ui/tests/hooks/swr/order.test.ts b/packages/merchant-backoffice-ui/tests/hooks/swr/order.test.ts
new file mode 100644
index 000000000..e7f6c9334
--- /dev/null
+++ b/packages/merchant-backoffice-ui/tests/hooks/swr/order.test.ts
@@ -0,0 +1,567 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { renderHook } from "@testing-library/preact-hooks";
+import { act } from "preact/test-utils";
+import { TestingContext } from ".";
+import { MerchantBackend } from "../../../src/declaration";
+import { useInstanceOrders, useOrderAPI, useOrderDetails } from "../../../src/hooks/order";
+import {
+  API_CREATE_ORDER,
+  API_DELETE_ORDER,
+  API_FORGET_ORDER_BY_ID,
+  API_GET_ORDER_BY_ID,
+  API_LIST_ORDERS, API_REFUND_ORDER_BY_ID, assertJustExpectedRequestWereMade, assertNextRequest, assertNoMoreRequestWereMade, AxiosMockEnvironment
+} from "../../axiosMock";
+
+describe("order api interaction with listing", () => {
+
+  it("should evict cache when creating an order", async () => {
+    const env = new AxiosMockEnvironment();
+
+    env.addRequestExpectation(API_LIST_ORDERS, {
+      qparam: { delta: 0, paid: "yes" },
+      response: {
+        orders: [{ order_id: "1" } as MerchantBackend.Orders.OrderHistoryEntry],
+      },
+    });
+
+    env.addRequestExpectation(API_LIST_ORDERS, {
+      qparam: { delta: -20, paid: "yes" },
+      response: {
+        orders: [{ order_id: "2" } as MerchantBackend.Orders.OrderHistoryEntry],
+      },
+    });
+
+
+    const { result, waitForNextUpdate } = renderHook(() => {
+      const newDate = (d: Date) => {
+        console.log("new date", d);
+      };
+      const query = useInstanceOrders({ paid: "yes" }, newDate);
+      const api = useOrderAPI();
+
+      return { query, api };
+    }, { wrapper: TestingContext });
+
+    if (!result.current) {
+      expect(result.current).toBeDefined();
+      return;
+    }
+
+    expect(result.current.query.loading).toBeTruthy();
+    await waitForNextUpdate({ timeout: 1 });
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.loading).toBeFalsy();
+    expect(result.current?.query.ok).toBeTruthy();
+    if (!result.current?.query.ok) return;
+
+    expect(result.current.query.data).toEqual({
+      orders: [{ order_id: "1" }, { order_id: "2" }],
+    });
+
+    env.addRequestExpectation(API_CREATE_ORDER, {
+      request: {
+        order: { amount: "ARS:12", summary: "pay me" },
+      },
+      response: { order_id: "3" },
+    });
+
+    env.addRequestExpectation(API_LIST_ORDERS, {
+      qparam: { delta: 0, paid: "yes" },
+      response: {
+        orders: [{ order_id: "1" } as any],
+      },
+    });
+
+    env.addRequestExpectation(API_LIST_ORDERS, {
+      qparam: { delta: -20, paid: "yes" },
+      response: {
+        orders: [{ order_id: "2" } as any, { order_id: "3" } as any],
+      },
+    });
+
+    act(async () => {
+      await result.current?.api.createOrder({
+        order: { amount: "ARS:12", summary: "pay me" },
+      } as any);
+    });
+
+    await waitForNextUpdate({ timeout: 1 });
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.loading).toBeFalsy();
+    expect(result.current?.query.ok).toBeTruthy();
+    if (!result.current?.query.ok) return;
+
+    expect(result.current.query.data).toEqual({
+      orders: [{ order_id: "1" }, { order_id: "2" }, { order_id: "3" }],
+    });
+  });
+  it("should evict cache when doing a refund", async () => {
+    const env = new AxiosMockEnvironment();
+
+    env.addRequestExpectation(API_LIST_ORDERS, {
+      qparam: { delta: 0, paid: "yes" },
+      response: {
+        orders: [{ order_id: "1", amount: 'EUR:12', refundable: true } as MerchantBackend.Orders.OrderHistoryEntry],
+      },
+    });
+
+    env.addRequestExpectation(API_LIST_ORDERS, {
+      qparam: { delta: -20, paid: "yes" },
+      response: { orders: [], },
+    });
+
+
+    const { result, waitForNextUpdate } = renderHook(() => {
+      const newDate = (d: Date) => {
+        console.log("new date", d);
+      };
+      const query = useInstanceOrders({ paid: "yes" }, newDate);
+      const api = useOrderAPI();
+
+      return { query, api };
+    }, { wrapper: TestingContext });
+
+    if (!result.current) {
+      expect(result.current).toBeDefined();
+      return;
+    }
+
+    expect(result.current.query.loading).toBeTruthy();
+    await waitForNextUpdate({ timeout: 1 });
+    assertJustExpectedRequestWereMade(env);
+
+
+    expect(result.current.query.loading).toBeFalsy();
+    expect(result.current?.query.ok).toBeTruthy();
+    if (!result.current?.query.ok) return;
+
+    expect(result.current.query.data).toEqual({
+      orders: [{
+        order_id: "1",
+        amount: 'EUR:12',
+        refundable: true,
+      }],
+    });
+
+    env.addRequestExpectation(API_REFUND_ORDER_BY_ID('1'), {
+      request: {
+        reason: 'double pay',
+        refund: 'EUR:1'
+      },
+    });
+
+    env.addRequestExpectation(API_LIST_ORDERS, {
+      qparam: { delta: 0, paid: "yes" },
+      response: {
+        orders: [{ order_id: "1", amount: 'EUR:12', refundable: false } as any],
+      },
+    });
+
+    env.addRequestExpectation(API_LIST_ORDERS, {
+      qparam: { delta: -20, paid: "yes" },
+      response: { orders: [], },
+    });
+
+    act(async () => {
+      await result.current?.api.refundOrder('1', {
+        reason: 'double pay',
+        refund: 'EUR:1'
+      });
+    });
+
+    await waitForNextUpdate({ timeout: 1 });
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.loading).toBeFalsy();
+    expect(result.current?.query.ok).toBeTruthy();
+    if (!result.current?.query.ok) return;
+
+    expect(result.current.query.data).toEqual({
+      orders: [{
+        order_id: "1",
+        amount: 'EUR:12',
+        refundable: false,
+      }],
+    });
+  });
+  it("should evict cache when deleting an order", async () => {
+    const env = new AxiosMockEnvironment();
+
+    env.addRequestExpectation(API_LIST_ORDERS, {
+      qparam: { delta: 0, paid: "yes" },
+      response: {
+        orders: [{ order_id: "1" } as MerchantBackend.Orders.OrderHistoryEntry],
+      },
+    });
+
+    env.addRequestExpectation(API_LIST_ORDERS, {
+      qparam: { delta: -20, paid: "yes" },
+      response: {
+        orders: [{ order_id: "2" } as MerchantBackend.Orders.OrderHistoryEntry],
+      },
+    });
+
+
+    const { result, waitForNextUpdate } = renderHook(() => {
+      const newDate = (d: Date) => {
+        console.log("new date", d);
+      };
+      const query = useInstanceOrders({ paid: "yes" }, newDate);
+      const api = useOrderAPI();
+
+      return { query, api };
+    }, { wrapper: TestingContext });
+
+    if (!result.current) {
+      expect(result.current).toBeDefined();
+      return;
+    }
+
+    expect(result.current.query.loading).toBeTruthy();
+    await waitForNextUpdate({ timeout: 1 });
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.loading).toBeFalsy();
+    expect(result.current?.query.ok).toBeTruthy();
+    if (!result.current?.query.ok) return;
+
+    expect(result.current.query.data).toEqual({
+      orders: [{ order_id: "1" }, { order_id: "2" }],
+    });
+
+    env.addRequestExpectation(API_DELETE_ORDER('1'), {});
+
+    env.addRequestExpectation(API_LIST_ORDERS, {
+      qparam: { delta: 0, paid: "yes" },
+      response: {
+        orders: [],
+      },
+    });
+
+    env.addRequestExpectation(API_LIST_ORDERS, {
+      qparam: { delta: -20, paid: "yes" },
+      response: {
+        orders: [{ order_id: "2" } as any],
+      },
+    });
+
+    act(async () => {
+      await result.current?.api.deleteOrder('1');
+    });
+
+    await waitForNextUpdate({ timeout: 1 });
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.loading).toBeFalsy();
+    expect(result.current?.query.ok).toBeTruthy();
+    if (!result.current?.query.ok) return;
+
+    expect(result.current.query.data).toEqual({
+      orders: [{ order_id: "2" }],
+    });
+  });
+
+});
+
+describe("order api interaction with details", () => {
+
+  it("should evict cache when doing a refund", async () => {
+    const env = new AxiosMockEnvironment();
+
+    env.addRequestExpectation(API_GET_ORDER_BY_ID('1'), {
+      // qparam: { delta: 0, paid: "yes" },
+      response: {
+        summary: 'description',
+        refund_amount: 'EUR:0',
+      } as unknown as MerchantBackend.Orders.CheckPaymentPaidResponse,
+    });
+
+    const { result, waitForNextUpdate } = renderHook(() => {
+      const query = useOrderDetails('1')
+      const api = useOrderAPI();
+
+      return { query, api };
+    }, { wrapper: TestingContext });
+
+    if (!result.current) {
+      expect(result.current).toBeDefined();
+      return;
+    }
+
+    expect(result.current.query.loading).toBeTruthy();
+    await waitForNextUpdate({ timeout: 1 });
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.loading).toBeFalsy();
+    expect(result.current?.query.ok).toBeTruthy();
+    if (!result.current?.query.ok) return;
+
+    expect(result.current.query.data).toEqual({
+      summary: 'description',
+      refund_amount: 'EUR:0',
+    });
+
+    env.addRequestExpectation(API_REFUND_ORDER_BY_ID('1'), {
+      request: {
+        reason: 'double pay',
+        refund: 'EUR:1'
+      },
+    });
+
+    env.addRequestExpectation(API_GET_ORDER_BY_ID('1'), {
+      response: {
+        summary: 'description',
+        refund_amount: 'EUR:1',
+      } as unknown as MerchantBackend.Orders.CheckPaymentPaidResponse,
+    });
+
+    act(async () => {
+      await result.current?.api.refundOrder('1', {
+        reason: 'double pay',
+        refund: 'EUR:1'
+      });
+    });
+
+    await waitForNextUpdate({ timeout: 1 });
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.loading).toBeFalsy();
+    expect(result.current?.query.ok).toBeTruthy();
+    if (!result.current?.query.ok) return;
+
+    expect(result.current.query.data).toEqual({
+      summary: 'description',
+      refund_amount: 'EUR:1',
+    });
+  })
+  it("should evict cache when doing a forget", async () => {
+    const env = new AxiosMockEnvironment();
+
+    env.addRequestExpectation(API_GET_ORDER_BY_ID('1'), {
+      // qparam: { delta: 0, paid: "yes" },
+      response: {
+        summary: 'description',
+        refund_amount: 'EUR:0',
+      } as unknown as MerchantBackend.Orders.CheckPaymentPaidResponse,
+    });
+
+    const { result, waitForNextUpdate } = renderHook(() => {
+      const query = useOrderDetails('1')
+      const api = useOrderAPI();
+
+      return { query, api };
+    }, { wrapper: TestingContext });
+
+    if (!result.current) {
+      expect(result.current).toBeDefined();
+      return;
+    }
+
+    expect(result.current.query.loading).toBeTruthy();
+    await waitForNextUpdate({ timeout: 1 });
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.loading).toBeFalsy();
+    expect(result.current?.query.ok).toBeTruthy();
+    if (!result.current?.query.ok) return;
+
+    expect(result.current.query.data).toEqual({
+      summary: 'description',
+      refund_amount: 'EUR:0',
+    });
+
+    env.addRequestExpectation(API_FORGET_ORDER_BY_ID('1'), {
+      request: {
+        fields: ['$.summary']
+      },
+    });
+
+    env.addRequestExpectation(API_GET_ORDER_BY_ID('1'), {
+      response: {
+        summary: undefined,
+      } as unknown as MerchantBackend.Orders.CheckPaymentPaidResponse,
+    });
+
+    act(async () => {
+      await result.current?.api.forgetOrder('1', {
+        fields: ['$.summary']
+      });
+    });
+
+    await waitForNextUpdate({ timeout: 1 });
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.loading).toBeFalsy();
+    expect(result.current?.query.ok).toBeTruthy();
+    if (!result.current?.query.ok) return;
+
+    expect(result.current.query.data).toEqual({
+      summary: undefined,
+    });
+  })
+})
+
+describe("order listing pagination", () => {
+
+  it("should not load more if has reach the end", async () => {
+    const env = new AxiosMockEnvironment();
+    env.addRequestExpectation(API_LIST_ORDERS, {
+      qparam: { delta: 20, wired: "yes", date_ms: 12 },
+      response: {
+        orders: [{ order_id: "1" } as any],
+      },
+    });
+
+    env.addRequestExpectation(API_LIST_ORDERS, {
+      qparam: { delta: -20, wired: "yes", date_ms: 13 },
+      response: {
+        orders: [{ order_id: "2" } as any],
+      },
+    });
+
+
+    const { result, waitForNextUpdate } = renderHook(() => {
+      const newDate = (d: Date) => {
+        console.log("new date", d);
+      };
+      const date = new Date(12);
+      const query = useInstanceOrders({ wired: "yes", date }, newDate)
+      return { query }
+    }, { wrapper: TestingContext });
+
+    assertJustExpectedRequestWereMade(env);
+
+    await waitForNextUpdate();
+
+    expect(result.current?.query.ok).toBeTruthy();
+    if (!result.current?.query.ok) return;
+
+    expect(result.current.query.data).toEqual({
+      orders: [{ order_id: "1" }, { order_id: "2" }],
+    });
+
+    expect(result.current.query.isReachingEnd).toBeTruthy()
+    expect(result.current.query.isReachingStart).toBeTruthy()
+
+    await act(() => {
+      if (!result.current?.query.ok) throw Error("not ok");
+      result.current.query.loadMore();
+    });
+    assertNoMoreRequestWereMade(env);
+
+    await act(() => {
+      if (!result.current?.query.ok) throw Error("not ok");
+      result.current.query.loadMorePrev();
+    });
+    assertNoMoreRequestWereMade(env);
+
+    expect(result.current.query.data).toEqual({
+      orders: [
+        { order_id: "1" },
+        { order_id: "2" },
+      ],
+    });
+  });
+
+  it("should load more if result brings more that PAGE_SIZE", async () => {
+    const env = new AxiosMockEnvironment();
+
+    const ordersFrom0to20 = Array.from({ length: 20 }).map((e, i) => ({ order_id: String(i) }))
+    const ordersFrom20to40 = Array.from({ length: 20 }).map((e, i) => ({ order_id: String(i + 20) }))
+    const ordersFrom20to0 = [...ordersFrom0to20].reverse()
+
+    env.addRequestExpectation(API_LIST_ORDERS, {
+      qparam: { delta: 20, wired: "yes", date_ms: 12 },
+      response: {
+        orders: ordersFrom0to20,
+      },
+    });
+
+    env.addRequestExpectation(API_LIST_ORDERS, {
+      qparam: { delta: -20, wired: "yes", date_ms: 13 },
+      response: {
+        orders: ordersFrom20to40,
+      },
+    });
+
+    const { result, waitForNextUpdate } = renderHook(() => {
+      const newDate = (d: Date) => {
+        console.log("new date", d);
+      };
+      const date = new Date(12);
+      const query = useInstanceOrders({ wired: "yes", date }, newDate)
+      return { query }
+    }, { wrapper: TestingContext });
+
+    assertJustExpectedRequestWereMade(env);
+
+    await waitForNextUpdate({ timeout: 1 });
+
+    expect(result.current?.query.ok).toBeTruthy();
+    if (!result.current?.query.ok) return;
+
+    expect(result.current.query.data).toEqual({
+      orders: [...ordersFrom20to0, ...ordersFrom20to40],
+    });
+
+    expect(result.current.query.isReachingEnd).toBeFalsy()
+    expect(result.current.query.isReachingStart).toBeFalsy()
+
+    env.addRequestExpectation(API_LIST_ORDERS, {
+      qparam: { delta: -40, wired: "yes", date_ms: 13 },
+      response: {
+        orders: [...ordersFrom20to40, { order_id: '41' }],
+      },
+    });
+
+    await act(() => {
+      if (!result.current?.query.ok) throw Error("not ok");
+      result.current.query.loadMore();
+    });
+    await waitForNextUpdate({ timeout: 1 });
+
+    assertJustExpectedRequestWereMade(env);
+
+    env.addRequestExpectation(API_LIST_ORDERS, {
+      qparam: { delta: 40, wired: "yes", date_ms: 12 },
+      response: {
+        orders: [...ordersFrom0to20, { order_id: '-1' }],
+      },
+    });
+
+    await act(() => {
+      if (!result.current?.query.ok) throw Error("not ok");
+      result.current.query.loadMorePrev();
+    });
+    await waitForNextUpdate({ timeout: 1 });
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.data).toEqual({
+      orders: [{ order_id: '-1' }, ...ordersFrom20to0, ...ordersFrom20to40, { order_id: '41' }],
+    });
+  });
+
+
+});
diff --git a/packages/merchant-backoffice-ui/tests/hooks/swr/product.test.ts b/packages/merchant-backoffice-ui/tests/hooks/swr/product.test.ts
new file mode 100644
index 000000000..5d39a7c47
--- /dev/null
+++ b/packages/merchant-backoffice-ui/tests/hooks/swr/product.test.ts
@@ -0,0 +1,338 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { renderHook } from "@testing-library/preact-hooks";
+import { act } from "preact/test-utils";
+import { TestingContext } from ".";
+import { MerchantBackend } from "../../../src/declaration";
+import { useInstanceProducts, useProductAPI, useProductDetails } from "../../../src/hooks/product";
+import {
+  API_CREATE_PRODUCT,
+  API_DELETE_PRODUCT, API_GET_PRODUCT_BY_ID,
+  API_LIST_PRODUCTS,
+  API_UPDATE_PRODUCT_BY_ID,
+  assertJustExpectedRequestWereMade,
+  assertNextRequest,
+  AxiosMockEnvironment
+} from "../../axiosMock";
+
+describe("product api interaction with listing ", () => {
+  it("should evict cache when creating a product", async () => {
+    const env = new AxiosMockEnvironment();
+
+    env.addRequestExpectation(API_LIST_PRODUCTS, {
+      response: {
+        products: [{ product_id: "1234" }],
+      },
+    });
+    env.addRequestExpectation(API_GET_PRODUCT_BY_ID("1234"), {
+      response: { price: "ARS:12" } as MerchantBackend.Products.ProductDetail,
+    });
+
+    const { result, waitForNextUpdate } = renderHook(
+      () => {
+        const query = useInstanceProducts();
+        const api = useProductAPI();
+        return { api, query };
+      },
+      { wrapper: TestingContext }
+    ); // get products -> loading
+
+    if (!result.current) {
+      expect(result.current).toBeDefined();
+      return;
+    }
+    expect(result.current.query.loading).toBeTruthy();
+    await waitForNextUpdate({ timeout: 1 });
+
+    await waitForNextUpdate({ timeout: 1 });
+    assertJustExpectedRequestWereMade(env);
+    expect(result.current.query.loading).toBeFalsy();
+    expect(result.current.query.ok).toBeTruthy();
+    if (!result.current?.query.ok) return;
+
+    expect(result.current.query.data).toEqual([
+      { id: "1234", price: "ARS:12" },
+    ]);
+
+    env.addRequestExpectation(API_CREATE_PRODUCT, {
+      request: { price: "ARS:23" } as MerchantBackend.Products.ProductAddDetail,
+    });
+
+    env.addRequestExpectation(API_LIST_PRODUCTS, {
+      response: {
+        products: [{ product_id: "1234" }, { product_id: "2345" }],
+      },
+    });
+    env.addRequestExpectation(API_GET_PRODUCT_BY_ID("1234"), {
+      response: { price: "ARS:12" } as MerchantBackend.Products.ProductDetail,
+    });
+    env.addRequestExpectation(API_GET_PRODUCT_BY_ID("1234"), {
+      response: { price: "ARS:12" } as MerchantBackend.Products.ProductDetail,
+    });
+    env.addRequestExpectation(API_GET_PRODUCT_BY_ID("2345"), {
+      response: { price: "ARS:23" } as MerchantBackend.Products.ProductDetail,
+    });
+
+    act(async () => {
+      await result.current?.api.createProduct({
+        price: "ARS:23",
+      } as any);
+    });
+
+    assertNextRequest(env);
+    await waitForNextUpdate({ timeout: 1 });
+    await waitForNextUpdate({ timeout: 1 });
+
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.loading).toBeFalsy();
+    expect(result.current?.query.ok).toBeTruthy();
+    if (!result.current?.query.ok) return;
+
+    expect(result.current.query.data).toEqual([
+      {
+        id: "1234",
+        price: "ARS:12",
+      },
+      {
+        id: "2345",
+        price: "ARS:23",
+      },
+    ]);
+  });
+
+  it("should evict cache when updating a product", async () => {
+    const env = new AxiosMockEnvironment();
+
+    env.addRequestExpectation(API_LIST_PRODUCTS, {
+      response: {
+        products: [{ product_id: "1234" }],
+      },
+    });
+    env.addRequestExpectation(API_GET_PRODUCT_BY_ID("1234"), {
+      response: { price: "ARS:12" } as MerchantBackend.Products.ProductDetail,
+    });
+
+    const { result, waitForNextUpdate } = renderHook(
+      () => {
+        const query = useInstanceProducts();
+        const api = useProductAPI();
+        return { api, query };
+      },
+      { wrapper: TestingContext }
+    ); // get products -> loading
+
+    if (!result.current) {
+      expect(result.current).toBeDefined();
+      return;
+    }
+    expect(result.current.query.loading).toBeTruthy();
+    await waitForNextUpdate({ timeout: 1 });
+
+    await waitForNextUpdate({ timeout: 1 });
+    assertJustExpectedRequestWereMade(env);
+    expect(result.current.query.loading).toBeFalsy();
+    expect(result.current.query.ok).toBeTruthy();
+    if (!result.current?.query.ok) return;
+
+    expect(result.current.query.data).toEqual([
+      { id: "1234", price: "ARS:12" },
+    ]);
+
+    env.addRequestExpectation(API_UPDATE_PRODUCT_BY_ID("1234"), {
+      request: { price: "ARS:13" } as MerchantBackend.Products.ProductPatchDetail,
+    });
+
+    env.addRequestExpectation(API_LIST_PRODUCTS, {
+      response: {
+        products: [{ product_id: "1234" }],
+      },
+    });
+    env.addRequestExpectation(API_GET_PRODUCT_BY_ID("1234"), {
+      response: { price: "ARS:13" } as MerchantBackend.Products.ProductDetail,
+    });
+
+    act(async () => {
+      await result.current?.api.updateProduct("1234", {
+        price: "ARS:13",
+      } as any);
+    });
+
+    assertNextRequest(env);
+    await waitForNextUpdate({ timeout: 1 });
+
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.loading).toBeFalsy();
+    expect(result.current?.query.ok).toBeTruthy();
+    if (!result.current?.query.ok) return;
+
+    expect(result.current.query.data).toEqual([
+      {
+        id: "1234",
+        price: "ARS:13",
+      },
+    ]);
+  });
+
+  it("should evict cache when deleting a product", async () => {
+    const env = new AxiosMockEnvironment();
+
+    env.addRequestExpectation(API_LIST_PRODUCTS, {
+      response: {
+        products: [{ product_id: "1234" }, { product_id: "2345" }],
+      },
+    });
+    env.addRequestExpectation(API_GET_PRODUCT_BY_ID("1234"), {
+      response: { price: "ARS:12" } as MerchantBackend.Products.ProductDetail,
+    });
+    env.addRequestExpectation(API_GET_PRODUCT_BY_ID("2345"), {
+      response: { price: "ARS:23" } as MerchantBackend.Products.ProductDetail,
+    });
+
+    const { result, waitForNextUpdate } = renderHook(
+      () => {
+        const query = useInstanceProducts();
+        const api = useProductAPI();
+        return { api, query };
+      },
+      { wrapper: TestingContext }
+    ); // get products -> loading
+
+    if (!result.current) {
+      expect(result.current).toBeDefined();
+      return;
+    }
+    expect(result.current.query.loading).toBeTruthy();
+    await waitForNextUpdate({ timeout: 1 });
+
+    await waitForNextUpdate({ timeout: 1 });
+    // await waitForNextUpdate({ timeout: 1 });
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.loading).toBeFalsy();
+    expect(result.current.query.ok).toBeTruthy();
+    if (!result.current?.query.ok) return;
+
+    expect(result.current.query.data).toEqual([
+      { id: "1234", price: "ARS:12" },
+      { id: "2345", price: "ARS:23" },
+    ]);
+
+    env.addRequestExpectation(API_DELETE_PRODUCT("2345"), {});
+
+    env.addRequestExpectation(API_LIST_PRODUCTS, {
+      response: {
+        products: [{ product_id: "1234" }],
+      },
+    });
+    env.addRequestExpectation(API_GET_PRODUCT_BY_ID("1234"), {
+      response: { price: "ARS:13" } as MerchantBackend.Products.ProductDetail,
+    });
+
+    act(async () => {
+      await result.current?.api.deleteProduct("2345");
+    });
+
+    assertNextRequest(env);
+    await waitForNextUpdate({ timeout: 1 });
+    await waitForNextUpdate({ timeout: 1 });
+
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.loading).toBeFalsy();
+    expect(result.current?.query.ok).toBeTruthy();
+    if (!result.current?.query.ok) return;
+
+    expect(result.current.query.data).toEqual([
+      {
+        id: "1234",
+        price: "ARS:13",
+      },
+    ]);
+  });
+
+});
+
+describe("product api interaction with details", () => {
+  it("should evict cache when updating a product", async () => {
+    const env = new AxiosMockEnvironment();
+
+    env.addRequestExpectation(API_GET_PRODUCT_BY_ID("12"), {
+      response: {
+        description: "this is a description",
+      } as MerchantBackend.Products.ProductDetail,
+    });
+
+    const { result, waitForNextUpdate } = renderHook(() => {
+      const query = useProductDetails("12");
+      const api = useProductAPI();
+      return { query, api };
+    }, { wrapper: TestingContext });
+
+    if (!result.current) {
+      expect(result.current).toBeDefined();
+      return;
+    }
+    expect(result.current.query.loading).toBeTruthy();
+    await waitForNextUpdate();
+
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.loading).toBeFalsy();
+    expect(result.current?.query.ok).toBeTruthy();
+    if (!result.current?.query.ok) return;
+
+    expect(result.current.query.data).toEqual({
+      description: "this is a description",
+    });
+
+    env.addRequestExpectation(API_UPDATE_PRODUCT_BY_ID("12"), {
+      request: { description: "other description" } as MerchantBackend.Products.ProductPatchDetail,
+    });
+
+    env.addRequestExpectation(API_GET_PRODUCT_BY_ID("12"), {
+      response: {
+        description: "other description",
+      } as MerchantBackend.Products.ProductDetail,
+    });
+
+    act(async () => {
+      return await result.current?.api.updateProduct("12", {
+        description: "other description",
+      } as any);
+    });
+
+    assertNextRequest(env);
+    await waitForNextUpdate();
+
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.loading).toBeFalsy();
+    expect(result.current?.query.ok).toBeTruthy();
+    if (!result.current?.query.ok) return;
+
+    expect(result.current.query.data).toEqual({
+      description: "other description",
+    });
+  })
+})
\ No newline at end of file
diff --git a/packages/merchant-backoffice-ui/tests/hooks/swr/reserve.test.ts b/packages/merchant-backoffice-ui/tests/hooks/swr/reserve.test.ts
new file mode 100644
index 000000000..0361c54e8
--- /dev/null
+++ b/packages/merchant-backoffice-ui/tests/hooks/swr/reserve.test.ts
@@ -0,0 +1,470 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { renderHook } from "@testing-library/preact-hooks";
+import { act } from "preact/test-utils";
+import { MerchantBackend } from "../../../src/declaration";
+import {
+  useInstanceReserves,
+  useReserveDetails,
+  useReservesAPI,
+  useTipDetails,
+} from "../../../src/hooks/reserves";
+import {
+  API_AUTHORIZE_TIP,
+  API_AUTHORIZE_TIP_FOR_RESERVE,
+  API_CREATE_RESERVE,
+  API_DELETE_RESERVE,
+  API_GET_RESERVE_BY_ID,
+  API_GET_TIP_BY_ID,
+  API_LIST_RESERVES,
+  assertJustExpectedRequestWereMade,
+  AxiosMockEnvironment,
+} from "../../axiosMock";
+import { TestingContext } from "./index";
+
+describe("reserve api interaction with listing ", () => {
+  it("should evict cache when creating a reserve", async () => {
+    const env = new AxiosMockEnvironment();
+
+    env.addRequestExpectation(API_LIST_RESERVES, {
+      response: {
+        reserves: [
+          {
+            reserve_pub: "11",
+          } as MerchantBackend.Tips.ReserveStatusEntry,
+        ],
+      },
+    });
+
+    const { result, waitForNextUpdate } = renderHook(
+      () => {
+        const api = useReservesAPI();
+        const query = useInstanceReserves();
+
+        return { query, api };
+      },
+      { wrapper: TestingContext }
+    );
+
+    if (!result.current) {
+      expect(result.current).toBeDefined();
+      return;
+    }
+    expect(result.current.query.loading).toBeTruthy();
+
+    await waitForNextUpdate({ timeout: 1 });
+
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.loading).toBeFalsy();
+    expect(result.current?.query.ok).toBeTruthy();
+    if (!result.current?.query.ok) return;
+
+    expect(result.current.query.data).toEqual({
+      reserves: [{ reserve_pub: "11" }],
+    });
+
+    env.addRequestExpectation(API_CREATE_RESERVE, {
+      request: {
+        initial_balance: "ARS:3333",
+        exchange_url: "http://url",
+        wire_method: "iban",
+      },
+      response: {
+        reserve_pub: "22",
+        payto_uri: "payto",
+      },
+    });
+
+    act(async () => {
+      await result.current?.api.createReserve({
+        initial_balance: "ARS:3333",
+        exchange_url: "http://url",
+        wire_method: "iban",
+      });
+      return;
+    });
+
+    assertJustExpectedRequestWereMade(env);
+
+    env.addRequestExpectation(API_LIST_RESERVES, {
+      response: {
+        reserves: [
+          {
+            reserve_pub: "11",
+          } as MerchantBackend.Tips.ReserveStatusEntry,
+          {
+            reserve_pub: "22",
+          } as MerchantBackend.Tips.ReserveStatusEntry,
+        ],
+      },
+    });
+
+    expect(result.current.query.loading).toBeFalsy();
+
+    await waitForNextUpdate({ timeout: 1 });
+
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.loading).toBeFalsy();
+    expect(result.current.query.ok).toBeTruthy();
+
+    expect(result.current.query.data).toEqual({
+      reserves: [
+        {
+          reserve_pub: "11",
+        } as MerchantBackend.Tips.ReserveStatusEntry,
+        {
+          reserve_pub: "22",
+        } as MerchantBackend.Tips.ReserveStatusEntry,
+      ],
+    });
+  });
+
+  it("should evict cache when deleting a reserve", async () => {
+    const env = new AxiosMockEnvironment();
+
+    env.addRequestExpectation(API_LIST_RESERVES, {
+      response: {
+        reserves: [
+          {
+            reserve_pub: "11",
+          } as MerchantBackend.Tips.ReserveStatusEntry,
+          {
+            reserve_pub: "22",
+          } as MerchantBackend.Tips.ReserveStatusEntry,
+          {
+            reserve_pub: "33",
+          } as MerchantBackend.Tips.ReserveStatusEntry,
+        ],
+      },
+    });
+
+    const { result, waitForNextUpdate } = renderHook(
+      () => {
+        const api = useReservesAPI();
+        const query = useInstanceReserves();
+
+        return { query, api };
+      },
+      {
+        wrapper: TestingContext,
+      }
+    );
+
+    if (!result.current) {
+      expect(result.current).toBeDefined();
+      return;
+    }
+    expect(result.current.query.loading).toBeTruthy();
+
+    await waitForNextUpdate({ timeout: 1 });
+
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.loading).toBeFalsy();
+    expect(result.current?.query.ok).toBeTruthy();
+    if (!result.current?.query.ok) return;
+
+    expect(result.current.query.data).toEqual({
+      reserves: [
+        { reserve_pub: "11" },
+        { reserve_pub: "22" },
+        { reserve_pub: "33" },
+      ],
+    });
+
+    env.addRequestExpectation(API_DELETE_RESERVE("11"), {});
+
+    act(async () => {
+      await result.current?.api.deleteReserve("11");
+      return;
+    });
+
+    assertJustExpectedRequestWereMade(env);
+
+    env.addRequestExpectation(API_LIST_RESERVES, {
+      response: {
+        reserves: [
+          {
+            reserve_pub: "22",
+          } as MerchantBackend.Tips.ReserveStatusEntry,
+          {
+            reserve_pub: "33",
+          } as MerchantBackend.Tips.ReserveStatusEntry,
+        ],
+      },
+    });
+
+    expect(result.current.query.loading).toBeFalsy();
+
+    await waitForNextUpdate({ timeout: 1 });
+
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.loading).toBeFalsy();
+    expect(result.current.query.ok).toBeTruthy();
+
+    expect(result.current.query.data).toEqual({
+      reserves: [
+        {
+          reserve_pub: "22",
+        } as MerchantBackend.Tips.ReserveStatusEntry,
+        {
+          reserve_pub: "33",
+        } as MerchantBackend.Tips.ReserveStatusEntry,
+      ],
+    });
+  });
+});
+
+describe("reserve api interaction with details", () => {
+  it("should evict cache when adding a tip for a specific reserve", async () => {
+    const env = new AxiosMockEnvironment();
+
+    env.addRequestExpectation(API_GET_RESERVE_BY_ID("11"), {
+      response: {
+        payto_uri: "payto://here",
+        tips: [{ reason: "why?", tip_id: "id1", total_amount: "USD:10" }],
+      } as MerchantBackend.Tips.ReserveDetail,
+    });
+
+    const { result, waitForNextUpdate } = renderHook(
+      () => {
+        const api = useReservesAPI();
+        const query = useReserveDetails("11");
+
+        return { query, api };
+      },
+      {
+        wrapper: TestingContext,
+      }
+    );
+
+    if (!result.current) {
+      expect(result.current).toBeDefined();
+      return;
+    }
+    expect(result.current.query.loading).toBeTruthy();
+
+    await waitForNextUpdate({ timeout: 1 });
+
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.loading).toBeFalsy();
+    expect(result.current?.query.ok).toBeTruthy();
+    if (!result.current?.query.ok) return;
+
+    expect(result.current.query.data).toEqual({
+      payto_uri: "payto://here",
+      tips: [{ reason: "why?", tip_id: "id1", total_amount: "USD:10" }],
+    });
+
+    env.addRequestExpectation(API_AUTHORIZE_TIP_FOR_RESERVE("11"), {
+      request: {
+        amount: "USD:12",
+        justification: "not",
+        next_url: "http://taler.net",
+      },
+      response: {
+        tip_id: "id2",
+        taler_tip_uri: "uri",
+        tip_expiration: { t_s: 1 },
+        tip_status_url: "url",
+      },
+    });
+
+    act(async () => {
+      await result.current?.api.authorizeTipReserve("11", {
+        amount: "USD:12",
+        justification: "not",
+        next_url: "http://taler.net",
+      });
+    });
+
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.loading).toBeFalsy();
+
+    env.addRequestExpectation(API_GET_RESERVE_BY_ID("11"), {
+      response: {
+        payto_uri: "payto://here",
+        tips: [
+          { reason: "why?", tip_id: "id1", total_amount: "USD:10" },
+          { reason: "not", tip_id: "id2", total_amount: "USD:12" },
+        ],
+      } as MerchantBackend.Tips.ReserveDetail,
+    });
+
+    await waitForNextUpdate({ timeout: 1 });
+
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.loading).toBeFalsy();
+    expect(result.current.query.ok).toBeTruthy();
+
+    expect(result.current.query.data).toEqual({
+      payto_uri: "payto://here",
+      tips: [
+        { reason: "why?", tip_id: "id1", total_amount: "USD:10" },
+        { reason: "not", tip_id: "id2", total_amount: "USD:12" },
+      ],
+    });
+  });
+
+  it("should evict cache when adding a tip for a random reserve", async () => {
+    const env = new AxiosMockEnvironment();
+
+    env.addRequestExpectation(API_GET_RESERVE_BY_ID("11"), {
+      response: {
+        payto_uri: "payto://here",
+        tips: [{ reason: "why?", tip_id: "id1", total_amount: "USD:10" }],
+      } as MerchantBackend.Tips.ReserveDetail,
+    });
+
+    const { result, waitForNextUpdate } = renderHook(
+      () => {
+        const api = useReservesAPI();
+        const query = useReserveDetails("11");
+
+        return { query, api };
+      },
+      {
+        wrapper: TestingContext,
+      }
+    );
+
+    if (!result.current) {
+      expect(result.current).toBeDefined();
+      return;
+    }
+    expect(result.current.query.loading).toBeTruthy();
+
+    await waitForNextUpdate({ timeout: 1 });
+
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.loading).toBeFalsy();
+    expect(result.current?.query.ok).toBeTruthy();
+    if (!result.current?.query.ok) return;
+
+    expect(result.current.query.data).toEqual({
+      payto_uri: "payto://here",
+      tips: [{ reason: "why?", tip_id: "id1", total_amount: "USD:10" }],
+    });
+
+    env.addRequestExpectation(API_AUTHORIZE_TIP, {
+      request: {
+        amount: "USD:12",
+        justification: "not",
+        next_url: "http://taler.net",
+      },
+      response: {
+        tip_id: "id2",
+        taler_tip_uri: "uri",
+        tip_expiration: { t_s: 1 },
+        tip_status_url: "url",
+      },
+    });
+
+    act(async () => {
+      await result.current?.api.authorizeTip({
+        amount: "USD:12",
+        justification: "not",
+        next_url: "http://taler.net",
+      });
+    });
+
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.loading).toBeFalsy();
+
+    env.addRequestExpectation(API_GET_RESERVE_BY_ID("11"), {
+      response: {
+        payto_uri: "payto://here",
+        tips: [
+          { reason: "why?", tip_id: "id1", total_amount: "USD:10" },
+          { reason: "not", tip_id: "id2", total_amount: "USD:12" },
+        ],
+      } as MerchantBackend.Tips.ReserveDetail,
+    });
+
+    await waitForNextUpdate({ timeout: 1 });
+
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.loading).toBeFalsy();
+    expect(result.current.query.ok).toBeTruthy();
+
+    expect(result.current.query.data).toEqual({
+      payto_uri: "payto://here",
+      tips: [
+        { reason: "why?", tip_id: "id1", total_amount: "USD:10" },
+        { reason: "not", tip_id: "id2", total_amount: "USD:12" },
+      ],
+    });
+  });
+});
+
+describe("reserve api interaction with tip details", () => {
+  it("should list tips", async () => {
+    const env = new AxiosMockEnvironment();
+
+    env.addRequestExpectation(API_GET_TIP_BY_ID("11"), {
+      response: {
+        total_picked_up: "USD:12",
+        reason: "not",
+      } as MerchantBackend.Tips.TipDetails,
+    });
+
+    const { result, waitForNextUpdate } = renderHook(
+      () => {
+        // const api = useReservesAPI();
+        const query = useTipDetails("11");
+
+        return { query };
+      },
+      {
+        wrapper: TestingContext,
+      }
+    );
+
+    if (!result.current) {
+      expect(result.current).toBeDefined();
+      return;
+    }
+    expect(result.current.query.loading).toBeTruthy();
+
+    await waitForNextUpdate({ timeout: 1 });
+
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.loading).toBeFalsy();
+    expect(result.current?.query.ok).toBeTruthy();
+    if (!result.current?.query.ok) return;
+
+    expect(result.current.query.data).toEqual({
+      total_picked_up: "USD:12",
+      reason: "not",
+    });
+  });
+});
diff --git a/packages/merchant-backoffice-ui/tests/hooks/swr/transfer.test.ts b/packages/merchant-backoffice-ui/tests/hooks/swr/transfer.test.ts
new file mode 100644
index 000000000..612cf8842
--- /dev/null
+++ b/packages/merchant-backoffice-ui/tests/hooks/swr/transfer.test.ts
@@ -0,0 +1,268 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { act, renderHook } from "@testing-library/preact-hooks";
+import { TestingContext } from "./index";
+import { useInstanceTransfers, useTransferAPI } from "../../../src/hooks/transfer";
+import {
+  API_INFORM_TRANSFERS,
+  API_LIST_TRANSFERS,
+  assertJustExpectedRequestWereMade,
+  assertNoMoreRequestWereMade,
+  AxiosMockEnvironment,
+} from "../../axiosMock";
+import { MerchantBackend } from "../../../src/declaration";
+
+describe("transfer api interaction with listing", () => {
+
+  it("should evict cache when informing a transfer", async () => {
+    const env = new AxiosMockEnvironment();
+
+    env.addRequestExpectation(API_LIST_TRANSFERS, {
+      qparam: { limit: 0 },
+      response: {
+        transfers: [{ wtid: "2" } as MerchantBackend.Transfers.TransferDetails],
+      },
+    });
+    // FIXME: is this query really needed? if the hook is rendered without
+    // position argument then then backend is returning the newest and no need
+    // to this second query 
+    env.addRequestExpectation(API_LIST_TRANSFERS, {
+      qparam: { limit: -20 },
+      response: {
+        transfers: [],
+      },
+    });
+
+    const { result, waitForNextUpdate } = renderHook(() => {
+      const moveCursor = (d: string) => {
+        console.log("new position", d);
+      };
+      const query = useInstanceTransfers({}, moveCursor);
+      const api = useTransferAPI();
+
+      return { query, api };
+    }, { wrapper: TestingContext });
+
+    if (!result.current) {
+      expect(result.current).toBeDefined();
+      return;
+    }
+
+    expect(result.current.query.loading).toBeTruthy();
+    await waitForNextUpdate({ timeout: 1 });
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.loading).toBeFalsy();
+    expect(result.current.query.ok).toBeTruthy();
+    if (!result.current.query.ok) return;
+
+    expect(result.current.query.data).toEqual({
+      transfers: [{ wtid: "2" }],
+    });
+
+    env.addRequestExpectation(API_INFORM_TRANSFERS, {
+      request: {
+        wtid: '3',
+        credit_amount: 'EUR:1',
+        exchange_url: 'exchange.url',
+        payto_uri: 'payto://'
+      },
+      response: { total: '' } as any,
+    });
+
+    env.addRequestExpectation(API_LIST_TRANSFERS, {
+      qparam: { limit: 0 },
+      response: {
+        transfers: [{ wtid: "2" } as any, { wtid: "3" } as any],
+      },
+    });
+
+    env.addRequestExpectation(API_LIST_TRANSFERS, {
+      qparam: { limit: -20 },
+      response: {
+        transfers: [],
+      },
+    });
+
+    act(async () => {
+      await result.current?.api.informTransfer({
+        wtid: '3',
+        credit_amount: 'EUR:1',
+        exchange_url: 'exchange.url',
+        payto_uri: 'payto://'
+      });
+    });
+
+    await waitForNextUpdate({ timeout: 1 });
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.loading).toBeFalsy();
+    expect(result.current.query.ok).toBeTruthy();
+    if (!result.current?.query.ok) return;
+
+    expect(result.current.query.data).toEqual({
+      transfers: [{ wtid: "3" }, { wtid: "2" }],
+    });
+  });
+
+});
+
+describe("transfer listing pagination", () => {
+
+  it("should not load more if has reach the end", async () => {
+    const env = new AxiosMockEnvironment();
+    env.addRequestExpectation(API_LIST_TRANSFERS, {
+      qparam: { limit: 0, payto_uri: 'payto://' },
+      response: {
+        transfers: [{ wtid: "2" } as any],
+      },
+    });
+
+    env.addRequestExpectation(API_LIST_TRANSFERS, {
+      qparam: { limit: -20, payto_uri: 'payto://' },
+      response: {
+        transfers: [{ wtid: "1" } as any],
+      },
+    });
+
+
+    const { result, waitForNextUpdate } = renderHook(() => {
+      const moveCursor = (d: string) => {
+        console.log("new position", d);
+      };
+      const query = useInstanceTransfers({ payto_uri: 'payto://' }, moveCursor)
+      return { query }
+    }, { wrapper: TestingContext });
+
+    assertJustExpectedRequestWereMade(env);
+
+    await waitForNextUpdate();
+
+    expect(result.current?.query.ok).toBeTruthy();
+    if (!result.current?.query.ok) return;
+
+    expect(result.current.query.data).toEqual({
+      transfers: [{ wtid: "2" }, { wtid: "1" }],
+    });
+
+    expect(result.current.query.isReachingEnd).toBeTruthy()
+    expect(result.current.query.isReachingStart).toBeTruthy()
+
+    await act(() => {
+      if (!result.current?.query.ok) throw Error("not ok");
+      result.current.query.loadMore();
+    });
+    assertNoMoreRequestWereMade(env);
+
+    await act(() => {
+      if (!result.current?.query.ok) throw Error("not ok");
+      result.current.query.loadMorePrev();
+    });
+    assertNoMoreRequestWereMade(env);
+
+    expect(result.current.query.data).toEqual({
+      transfers: [
+        { wtid: "2" },
+        { wtid: "1" },
+      ],
+    });
+  });
+
+  it("should load more if result brings more that PAGE_SIZE", async () => {
+    const env = new AxiosMockEnvironment();
+
+    const transfersFrom0to20 = Array.from({ length: 20 }).map((e, i) => ({ wtid: String(i) }))
+    const transfersFrom20to40 = Array.from({ length: 20 }).map((e, i) => ({ wtid: String(i + 20) }))
+    const transfersFrom20to0 = [...transfersFrom0to20].reverse()
+
+    env.addRequestExpectation(API_LIST_TRANSFERS, {
+      qparam: { limit: 20, payto_uri: 'payto://' },
+      response: {
+        transfers: transfersFrom0to20,
+      },
+    });
+
+    env.addRequestExpectation(API_LIST_TRANSFERS, {
+      qparam: { limit: -20, payto_uri: 'payto://' },
+      response: {
+        transfers: transfersFrom20to40,
+      },
+    });
+
+    const { result, waitForNextUpdate } = renderHook(() => {
+      const moveCursor = (d: string) => {
+        console.log("new position", d);
+      };
+      const query = useInstanceTransfers({ payto_uri: 'payto://', position: '1' }, moveCursor)
+      return { query }
+    }, { wrapper: TestingContext });
+
+    assertJustExpectedRequestWereMade(env);
+
+    await waitForNextUpdate({ timeout: 1 });
+
+    expect(result.current?.query.ok).toBeTruthy();
+    if (!result.current?.query.ok) return;
+
+    expect(result.current.query.data).toEqual({
+      transfers: [...transfersFrom20to0, ...transfersFrom20to40],
+    });
+
+    expect(result.current.query.isReachingEnd).toBeFalsy()
+    expect(result.current.query.isReachingStart).toBeFalsy()
+
+    env.addRequestExpectation(API_LIST_TRANSFERS, {
+      qparam: { limit: -40, payto_uri: 'payto://', offset: "1" },
+      response: {
+        transfers: [...transfersFrom20to40, { wtid: '41' }],
+      },
+    });
+
+    await act(() => {
+      if (!result.current?.query.ok) throw Error("not ok");
+      result.current.query.loadMore();
+    });
+    await waitForNextUpdate({ timeout: 1 });
+
+    assertJustExpectedRequestWereMade(env);
+
+    env.addRequestExpectation(API_LIST_TRANSFERS, {
+      qparam: { limit: 40, payto_uri: 'payto://', offset: "1" },
+      response: {
+        transfers: [...transfersFrom0to20, { wtid: '-1' }],
+      },
+    });
+
+    await act(() => {
+      if (!result.current?.query.ok) throw Error("not ok");
+      result.current.query.loadMorePrev();
+    });
+    await waitForNextUpdate({ timeout: 1 });
+    assertJustExpectedRequestWereMade(env);
+
+    expect(result.current.query.data).toEqual({
+      transfers: [{ wtid: '-1' }, ...transfersFrom20to0, ...transfersFrom20to40, { wtid: '41' }],
+    });
+  });
+
+
+});
diff --git a/packages/merchant-backoffice-ui/tests/stories.test.tsx b/packages/merchant-backoffice-ui/tests/stories.test.tsx
new file mode 100644
index 000000000..5fb3483d2
--- /dev/null
+++ b/packages/merchant-backoffice-ui/tests/stories.test.tsx
@@ -0,0 +1,89 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+import { h, VNode } from "preact";
+import * as config from "../src/context/config";
+import * as i18n from "../src/context/translation";
+import { cleanup, render as originalRender } from "@testing-library/preact";
+import { SWRConfig } from "swr";
+
+import fs from "fs";
+
+function getFiles(dir: string, files_: string[] = []) {
+  const files = fs.readdirSync(dir);
+  for (const i in files) {
+    const name = dir + "/" + files[i];
+    if (fs.statSync(name).isDirectory()) {
+      getFiles(name, files_);
+    } else {
+      files_.push(name);
+    }
+  }
+  return files_;
+}
+
+const STORIES_NAME_REGEX = RegExp(".*.stories.tsx");
+
+function render(vnode: VNode) {
+  return originalRender(
+    <SWRConfig
+      value={{
+        provider: () => new Map(),
+      }}
+    >
+      {vnode}
+    </SWRConfig>
+  );
+}
+
+import * as jedLib from "jed";
+const handler = new jedLib.Jed("en");
+
+describe("storybook testing", () => {
+  it("render every story", () => {
+    jest
+      .spyOn(config, "useConfigContext")
+      .mockImplementation(() => ({ version: "1.0.0", currency: "EUR" }));
+    jest.spyOn(i18n, "useTranslationContext").mockImplementation(() => ({
+      changeLanguage: () => null,
+      handler,
+      lang: "en",
+    }));
+
+    getFiles("./src")
+      .filter((f) => STORIES_NAME_REGEX.test(f))
+      .map((f) => {
+        // const f = "./src/paths/instance/transfers/list/List.stories.tsx";
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        const s = require(`../${f}`);
+
+        delete s.default;
+        Object.keys(s).forEach((k) => {
+          const Component = s[k];
+          const vdom = <Component {...Component.args} />;
+          expect(() => {
+            const { unmount } = render(vdom);
+            unmount();
+          }).not.toThrow(); //`problem rendering ${f} example ${k}`
+          cleanup();
+        });
+      });
+  });
+});
diff --git a/packages/merchant-backoffice-ui/tsconfig.json b/packages/merchant-backoffice-ui/tsconfig.json
new file mode 100644
index 000000000..dfb87582a
--- /dev/null
+++ b/packages/merchant-backoffice-ui/tsconfig.json
@@ -0,0 +1,61 @@
+{
+    "compilerOptions": {
+        /* Basic Options */
+        "target": "ES5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
+        "module": "ESNext",                       /* Specify module code generation: 'none', commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+        // "lib": [],                             /* Specify library files to be included in the compilation:  */
+        "allowJs": true,                          /* Allow javascript files to be compiled. */
+        // "checkJs": true,                       /* Report errors in .js files. */
+        "jsx": "react",                           /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+        "jsxFactory": "h",                        /* Specify the JSX factory function to use when targeting react JSX emit, e.g. React.createElement or h. */
+        "jsxFragmentFactory": "Fragment",         // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-0.html#custom-jsx-factories
+        // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
+        // "sourceMap": true,                     /* Generates corresponding '.map' file. */
+        // "outFile": "./",                       /* Concatenate and emit output to single file. */
+        // "outDir": "./",                        /* Redirect output structure to the directory. */
+        // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+        // "removeComments": true,                /* Do not emit comments to output. */
+        "noEmit": true,                           /* Do not emit outputs. */
+        // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
+        // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+        // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+
+        /* Strict Type-Checking Options */
+        "strict": true,                           /* Enable all strict type-checking options. */
+        // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+        // "strictNullChecks": true,              /* Enable strict null checks. */
+        // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
+        // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
+
+        /* Additional Checks */
+        // "noUnusedLocals": true,                /* Report errors on unused locals. */
+        // "noUnusedParameters": true,            /* Report errors on unused parameters. */
+        // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
+        // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
+
+        /* Module Resolution Options */
+        "moduleResolution": "node",               /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+        "esModuleInterop": true,                  /* */
+        // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
+        // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+        // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
+        // "typeRoots": [],                       /* List of folders to include type definitions from. */
+        // "types": [],                           /* Type declaration files to be included in compilation. */
+        // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+        // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+
+        /* Source Map Options */
+        // "sourceRoot": "./",                    /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+        // "mapRoot": "./",                       /* Specify the location where debugger should locate map files instead of generated locations. */
+        // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+        // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+
+        /* Experimental Options */
+        // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
+        // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+
+        /* Advanced Options */
+        "skipLibCheck": true                      /* Skip type checking of declaration files. */
+    },
+    "include": ["src/**/*", "tests/**/*"]
+}