diff --git a/chinook/.gitignore b/chinook/.gitignore
index 2e5ed3c6..fa48301d 100644
--- a/chinook/.gitignore
+++ b/chinook/.gitignore
@@ -7,9 +7,10 @@ gen/
 node_modules/
 target/
 package-lock.json
+app/build
 
 # html5Deployer
-deployers/html5Deployer/resources/app/
+app/deployers/html5Deployer/resources/
 
 # Web IDE, App Studio
 .che/
diff --git a/chinook/README.md b/chinook/README.md
index e93c0d68..55e1cadd 100644
--- a/chinook/README.md
+++ b/chinook/README.md
@@ -5,9 +5,9 @@ Welcome to your new project.
 It contains these folders and files, following our recommended project layout:
 
 | File or Folder   | Purpose                              |
-|------------------|--------------------------------------|
+| ---------------- | ------------------------------------ |
 | `app/`           | will contain compiled front bundles  |
-| `app/react/`     | contains frontend app on react       |
+| `app/front/`     | contains frontend app on react       |
 | `app/deployers/` | contains deployment staff            |
 | `db/`            | your domain models and data go here  |
 | `srv/`           | your service models and code go here |
@@ -31,7 +31,7 @@ npm run deploy
 cds watch
 ```
 
-- Open `app/react` folder and run next commands. This will install dependencies and run frontend src files watcher. When you will change src files your bundles in app directory will re-compiled. Now you can enjoy development:
+- Open `app/front` folder and run next commands. This will install dependencies and run frontend src files watcher. When you will change src files your bundles in app directory will re-compiled. Now you can enjoy development:
 
 ```json
 npm install
@@ -44,6 +44,22 @@ npm run watch
 > npm run start
 > ```
 
+## Test
+
+- Change package.json db section
+
+```json
+  "db": {
+    "kind": "sql"
+  }
+```
+
+- Run tests
+
+```json
+npm run test
+```
+
 ## Deployment
 
 - Make sure you already have hanatrial instance in your cockpit dashboard (SAP Cloud Platform).
@@ -56,17 +72,17 @@ npm run watch
   }
 ```
 
-- Authenticate in the Cloud Foundry:
+- Authenticate to the Cloud Foundry:
 
 ```json
 cf login
 ```
 
-- Open `app/react` folder and run the following commands. This will create frontend production bundles in app subfolder:
+- Open `app/front` folder and run the following commands. This will create frontend production bundles in app subfolder:
 
 ```json
 npm install
-npm run build
+npm run build:prod
 ```
 
 - Clean up app/deployers/html5Deployer/resources folder from the previous frontend build
diff --git a/chinook/app/react/.babelrc b/chinook/app/front/.babelrc
similarity index 100%
rename from chinook/app/react/.babelrc
rename to chinook/app/front/.babelrc
diff --git a/chinook/app/react/.eslintrc.json b/chinook/app/front/.eslintrc.json
similarity index 100%
rename from chinook/app/react/.eslintrc.json
rename to chinook/app/front/.eslintrc.json
diff --git a/chinook/app/react/.gitignore b/chinook/app/front/.gitignore
similarity index 100%
rename from chinook/app/react/.gitignore
rename to chinook/app/front/.gitignore
diff --git a/chinook/app/react/.prettierrc b/chinook/app/front/.prettierrc
similarity index 100%
rename from chinook/app/react/.prettierrc
rename to chinook/app/front/.prettierrc
diff --git a/chinook/app/react/.vscode/launch.json b/chinook/app/front/.vscode/launch.json
similarity index 100%
rename from chinook/app/react/.vscode/launch.json
rename to chinook/app/front/.vscode/launch.json
diff --git a/chinook/app/react/README.md b/chinook/app/front/README.md
similarity index 100%
rename from chinook/app/react/README.md
rename to chinook/app/front/README.md
diff --git a/chinook/app/react/package.json b/chinook/app/front/package.json
similarity index 96%
rename from chinook/app/react/package.json
rename to chinook/app/front/package.json
index 457556aa..0e392a4b 100644
--- a/chinook/app/react/package.json
+++ b/chinook/app/front/package.json
@@ -10,12 +10,13 @@
     "lint": "./node_modules/.bin/eslint"
   },
   "dependencies": {
+    "@ant-design/icons": "4.3.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "@umijs/hooks": "^1.9.3",
     "antd": "^4.8.2",
-    "@ant-design/icons": "4.3.0",
     "axios": "^0.20.0",
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^6.3.2",
@@ -29,6 +30,7 @@
     "react": "^16.14.0",
     "react-dev-utils": "^11.0.1",
     "react-dom": "^16.14.0",
+    "react-refresh": "^0.9.0",
     "react-router-dom": "^5.2.0",
     "terser-webpack-plugin": "^5.0.3",
     "webpack": "5.8.0",
diff --git a/chinook/app/react/public/index.html b/chinook/app/front/public/index.html
similarity index 100%
rename from chinook/app/react/public/index.html
rename to chinook/app/front/public/index.html
diff --git a/chinook/app/react/public/logo192.png b/chinook/app/front/public/logo192.png
similarity index 100%
rename from chinook/app/react/public/logo192.png
rename to chinook/app/front/public/logo192.png
diff --git a/chinook/app/react/public/logo512.png b/chinook/app/front/public/logo512.png
similarity index 100%
rename from chinook/app/react/public/logo512.png
rename to chinook/app/front/public/logo512.png
diff --git a/chinook/app/react/public/manifest.json b/chinook/app/front/public/manifest.json
similarity index 100%
rename from chinook/app/react/public/manifest.json
rename to chinook/app/front/public/manifest.json
diff --git a/chinook/app/react/public/robots.txt b/chinook/app/front/public/robots.txt
similarity index 100%
rename from chinook/app/react/public/robots.txt
rename to chinook/app/front/public/robots.txt
diff --git a/chinook/app/react/public/xs-app.json b/chinook/app/front/public/xs-app.json
similarity index 100%
rename from chinook/app/react/public/xs-app.json
rename to chinook/app/front/public/xs-app.json
diff --git a/chinook/app/react/src/App.css b/chinook/app/front/src/App.css
similarity index 100%
rename from chinook/app/react/src/App.css
rename to chinook/app/front/src/App.css
diff --git a/chinook/app/react/src/App.jsx b/chinook/app/front/src/App.jsx
similarity index 100%
rename from chinook/app/react/src/App.jsx
rename to chinook/app/front/src/App.jsx
diff --git a/chinook/app/react/src/api/axiosInstance.js b/chinook/app/front/src/api/axiosInstance.js
similarity index 100%
rename from chinook/app/react/src/api/axiosInstance.js
rename to chinook/app/front/src/api/axiosInstance.js
diff --git a/chinook/app/react/src/api/calls.js b/chinook/app/front/src/api/calls.js
similarity index 100%
rename from chinook/app/react/src/api/calls.js
rename to chinook/app/front/src/api/calls.js
diff --git a/chinook/app/react/src/components/ErrorPage.jsx b/chinook/app/front/src/components/ErrorPage.jsx
similarity index 100%
rename from chinook/app/react/src/components/ErrorPage.jsx
rename to chinook/app/front/src/components/ErrorPage.jsx
diff --git a/chinook/app/react/src/components/Header.css b/chinook/app/front/src/components/Header.css
similarity index 100%
rename from chinook/app/react/src/components/Header.css
rename to chinook/app/front/src/components/Header.css
diff --git a/chinook/app/react/src/components/Header.jsx b/chinook/app/front/src/components/Header.jsx
similarity index 100%
rename from chinook/app/react/src/components/Header.jsx
rename to chinook/app/front/src/components/Header.jsx
diff --git a/chinook/app/react/src/components/InvoicePage.jsx b/chinook/app/front/src/components/InvoicePage.jsx
similarity index 100%
rename from chinook/app/react/src/components/InvoicePage.jsx
rename to chinook/app/front/src/components/InvoicePage.jsx
diff --git a/chinook/app/react/src/components/Login.jsx b/chinook/app/front/src/components/Login.jsx
similarity index 100%
rename from chinook/app/react/src/components/Login.jsx
rename to chinook/app/front/src/components/Login.jsx
diff --git a/chinook/app/react/src/components/ManageStore.jsx b/chinook/app/front/src/components/ManageStore.jsx
similarity index 100%
rename from chinook/app/react/src/components/ManageStore.jsx
rename to chinook/app/front/src/components/ManageStore.jsx
diff --git a/chinook/app/react/src/components/MyInvoicesPage.jsx b/chinook/app/front/src/components/MyInvoicesPage.jsx
similarity index 100%
rename from chinook/app/react/src/components/MyInvoicesPage.jsx
rename to chinook/app/front/src/components/MyInvoicesPage.jsx
diff --git a/chinook/app/react/src/components/PersonPage.jsx b/chinook/app/front/src/components/PersonPage.jsx
similarity index 100%
rename from chinook/app/react/src/components/PersonPage.jsx
rename to chinook/app/front/src/components/PersonPage.jsx
diff --git a/chinook/app/react/src/components/Router.jsx b/chinook/app/front/src/components/Router.jsx
similarity index 100%
rename from chinook/app/react/src/components/Router.jsx
rename to chinook/app/front/src/components/Router.jsx
diff --git a/chinook/app/react/src/components/TracksPage.css b/chinook/app/front/src/components/TracksPage.css
similarity index 100%
rename from chinook/app/react/src/components/TracksPage.css
rename to chinook/app/front/src/components/TracksPage.css
diff --git a/chinook/app/react/src/components/TracksPage.jsx b/chinook/app/front/src/components/TracksPage.jsx
similarity index 96%
rename from chinook/app/react/src/components/TracksPage.jsx
rename to chinook/app/front/src/components/TracksPage.jsx
index ed6c9835..a53ca465 100644
--- a/chinook/app/react/src/components/TracksPage.jsx
+++ b/chinook/app/front/src/components/TracksPage.jsx
@@ -19,6 +19,10 @@ const DEBOUNCE_OPTIONS = {
   trailing: false,
 };
 
+const isEven = (value) => {
+  return value % 2 === 0;
+};
+
 const renderGenres = (genres) =>
   genres.map(({ ID, name }) => (
     <Option key={ID} value={ID.toString()}>
@@ -80,7 +84,9 @@ const TracksContainer = () => {
       setLoading(true);
       const options = {
         $top: state.pagination.pageSize,
-        substr: state.searchOptions.substr.replace(`'`, `''`),
+        substr: state.searchOptions.substr.replace(/'*/g, (value) =>
+          isEven(value.length) ? value : `${value}'`
+        ),
         genreIds: state.searchOptions.genreIds,
       };
 
diff --git a/chinook/app/react/src/components/manage-store/AddAlbumForm.jsx b/chinook/app/front/src/components/manage-store/AddAlbumForm.jsx
similarity index 100%
rename from chinook/app/react/src/components/manage-store/AddAlbumForm.jsx
rename to chinook/app/front/src/components/manage-store/AddAlbumForm.jsx
diff --git a/chinook/app/react/src/components/manage-store/AddArtistForm.jsx b/chinook/app/front/src/components/manage-store/AddArtistForm.jsx
similarity index 100%
rename from chinook/app/react/src/components/manage-store/AddArtistForm.jsx
rename to chinook/app/front/src/components/manage-store/AddArtistForm.jsx
diff --git a/chinook/app/react/src/components/manage-store/TrackForm.jsx b/chinook/app/front/src/components/manage-store/TrackForm.jsx
similarity index 100%
rename from chinook/app/react/src/components/manage-store/TrackForm.jsx
rename to chinook/app/front/src/components/manage-store/TrackForm.jsx
diff --git a/chinook/app/react/src/components/tracks/DeleteAction.jsx b/chinook/app/front/src/components/tracks/DeleteAction.jsx
similarity index 100%
rename from chinook/app/react/src/components/tracks/DeleteAction.jsx
rename to chinook/app/front/src/components/tracks/DeleteAction.jsx
diff --git a/chinook/app/react/src/components/tracks/EditAction.jsx b/chinook/app/front/src/components/tracks/EditAction.jsx
similarity index 97%
rename from chinook/app/react/src/components/tracks/EditAction.jsx
rename to chinook/app/front/src/components/tracks/EditAction.jsx
index 1c8c42e6..ee3cd9d0 100644
--- a/chinook/app/react/src/components/tracks/EditAction.jsx
+++ b/chinook/app/front/src/components/tracks/EditAction.jsx
@@ -103,11 +103,15 @@ const EditAction = ({ ID, name, composer, genre, unitPrice, album, afterTrackUpd
 EditAction.propTypes = {
   ID: PropTypes.number.isRequired,
   name: PropTypes.string.isRequired,
-  composer: PropTypes.string.isRequired,
+  composer: PropTypes.string,
   genre: PropTypes.object.isRequired,
   unitPrice: PropTypes.number.isRequired,
   album: PropTypes.object.isRequired,
   afterTrackUpdate: PropTypes.func.isRequired,
 };
 
+EditAction.defaultProps = {
+  composer: undefined,
+};
+
 export { EditAction };
diff --git a/chinook/app/react/src/components/tracks/ManagedTrack.css b/chinook/app/front/src/components/tracks/ManagedTrack.css
similarity index 100%
rename from chinook/app/react/src/components/tracks/ManagedTrack.css
rename to chinook/app/front/src/components/tracks/ManagedTrack.css
diff --git a/chinook/app/react/src/components/tracks/ManagedTrack.jsx b/chinook/app/front/src/components/tracks/ManagedTrack.jsx
similarity index 100%
rename from chinook/app/react/src/components/tracks/ManagedTrack.jsx
rename to chinook/app/front/src/components/tracks/ManagedTrack.jsx
diff --git a/chinook/app/react/src/components/tracks/Track.jsx b/chinook/app/front/src/components/tracks/Track.jsx
similarity index 100%
rename from chinook/app/react/src/components/tracks/Track.jsx
rename to chinook/app/front/src/components/tracks/Track.jsx
diff --git a/chinook/app/react/src/components/tracks/TrackCardBody.jsx b/chinook/app/front/src/components/tracks/TrackCardBody.jsx
similarity index 100%
rename from chinook/app/react/src/components/tracks/TrackCardBody.jsx
rename to chinook/app/front/src/components/tracks/TrackCardBody.jsx
diff --git a/chinook/app/react/src/contexts/AppStateContext.jsx b/chinook/app/front/src/contexts/AppStateContext.jsx
similarity index 100%
rename from chinook/app/react/src/contexts/AppStateContext.jsx
rename to chinook/app/front/src/contexts/AppStateContext.jsx
diff --git a/chinook/app/react/src/hocs/withRestrictions.jsx b/chinook/app/front/src/hocs/withRestrictions.jsx
similarity index 100%
rename from chinook/app/react/src/hocs/withRestrictions.jsx
rename to chinook/app/front/src/hocs/withRestrictions.jsx
diff --git a/chinook/app/react/src/hooks/useAbortableEffect.js b/chinook/app/front/src/hooks/useAbortableEffect.js
similarity index 100%
rename from chinook/app/react/src/hooks/useAbortableEffect.js
rename to chinook/app/front/src/hooks/useAbortableEffect.js
diff --git a/chinook/app/react/src/hooks/useAppState.js b/chinook/app/front/src/hooks/useAppState.js
similarity index 100%
rename from chinook/app/react/src/hooks/useAppState.js
rename to chinook/app/front/src/hooks/useAppState.js
diff --git a/chinook/app/react/src/hooks/useErrors.js b/chinook/app/front/src/hooks/useErrors.js
similarity index 100%
rename from chinook/app/react/src/hooks/useErrors.js
rename to chinook/app/front/src/hooks/useErrors.js
diff --git a/chinook/app/react/src/index.jsx b/chinook/app/front/src/index.jsx
similarity index 100%
rename from chinook/app/react/src/index.jsx
rename to chinook/app/front/src/index.jsx
diff --git a/chinook/app/react/src/logo.svg b/chinook/app/front/src/logo.svg
similarity index 100%
rename from chinook/app/react/src/logo.svg
rename to chinook/app/front/src/logo.svg
diff --git a/chinook/app/react/src/serviceWorker.js b/chinook/app/front/src/serviceWorker.js
similarity index 100%
rename from chinook/app/react/src/serviceWorker.js
rename to chinook/app/front/src/serviceWorker.js
diff --git a/chinook/app/react/src/setupTests.js b/chinook/app/front/src/setupTests.js
similarity index 100%
rename from chinook/app/react/src/setupTests.js
rename to chinook/app/front/src/setupTests.js
diff --git a/chinook/app/react/src/util/EventEmitter.js b/chinook/app/front/src/util/EventEmitter.js
similarity index 100%
rename from chinook/app/react/src/util/EventEmitter.js
rename to chinook/app/front/src/util/EventEmitter.js
diff --git a/chinook/app/react/src/util/constants.js b/chinook/app/front/src/util/constants.js
similarity index 100%
rename from chinook/app/react/src/util/constants.js
rename to chinook/app/front/src/util/constants.js
diff --git a/chinook/app/react/src/util/localStorageService.js b/chinook/app/front/src/util/localStorageService.js
similarity index 100%
rename from chinook/app/react/src/util/localStorageService.js
rename to chinook/app/front/src/util/localStorageService.js
diff --git a/chinook/app/react/src/util/validateUser.js b/chinook/app/front/src/util/validateUser.js
similarity index 100%
rename from chinook/app/react/src/util/validateUser.js
rename to chinook/app/front/src/util/validateUser.js
diff --git a/chinook/app/react/webpack/common-plugins.js b/chinook/app/front/webpack/common-plugins.js
similarity index 81%
rename from chinook/app/react/webpack/common-plugins.js
rename to chinook/app/front/webpack/common-plugins.js
index 9ae39a04..d1db3fee 100644
--- a/chinook/app/react/webpack/common-plugins.js
+++ b/chinook/app/front/webpack/common-plugins.js
@@ -7,10 +7,10 @@ const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 
 module.exports = {
   plugins: [
-    new CleanWebpackPlugin(),
+    new CleanWebpackPlugin({ dangerouslyAllowCleanPatternsOutsideProject: true }),
     new HtmlWebpackPlugin({
       template: path.join(__dirname, '../public/index.html'),
-      filename: path.join(__dirname, '../../app/index.html'),
+      filename: path.join(__dirname, '../../build/index.html'),
       publicPath: '/static/', // for js bundles path
     }),
     new InterpolateHtmlPlugin(HtmlWebpackPlugin, {
@@ -20,7 +20,7 @@ module.exports = {
       patterns: [
         {
           from: path.join(__dirname, '../public'),
-          to: path.join(__dirname, '../../app'),
+          to: path.join(__dirname, '../../build'),
           globOptions: {
             dot: true,
             ignore: ['**/index.html'],
diff --git a/chinook/app/react/webpack/common-rules.js b/chinook/app/front/webpack/common-rules.js
similarity index 99%
rename from chinook/app/react/webpack/common-rules.js
rename to chinook/app/front/webpack/common-rules.js
index 1afcc25e..9d019210 100644
--- a/chinook/app/react/webpack/common-rules.js
+++ b/chinook/app/front/webpack/common-rules.js
@@ -10,6 +10,7 @@ module.exports = {
         },
       },
     },
+
     {
       test: /\.(png|jpg)$/,
       use: [{ loader: 'url-loader' }],
diff --git a/chinook/app/react/webpack/webpack-dev-server.js b/chinook/app/front/webpack/webpack-dev-server.js
similarity index 64%
rename from chinook/app/react/webpack/webpack-dev-server.js
rename to chinook/app/front/webpack/webpack-dev-server.js
index f0efb72e..2100cb61 100644
--- a/chinook/app/react/webpack/webpack-dev-server.js
+++ b/chinook/app/front/webpack/webpack-dev-server.js
@@ -3,28 +3,47 @@ const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
-const { rules } = require('./common-rules');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 
 module.exports = {
-  mode: 'development',
-  devtool: 'inline-source-map',
   entry: {
-    index: './src/index.jsx',
+    app: './src/index.jsx',
   },
+  devtool: 'inline-source-map',
   devServer: {
     contentBase: './dist',
-    compress: true, // compress files to gzip to increase download speed
+    hot: true,
     port: 3000,
+    compress: true, // compress files to gzip to increase download speed
     disableHostCheck: false, // by default true, it is not recomended,
     // because it makes app vulnerable to DNS rebinding attacks
-    headers: {
-      'X-Custom-header': 'custom', // this requires apps with authentication
-      // useful config obj
-    },
     open: true, // open the browser after server had been started
-    hot: true, // hot module replacement
-    historyApiFallback: true, // needs for react-router-dom
+    historyApiFallback: true,
   },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /(node_modules)/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env', '@babel/preset-react'],
+            plugins: ['react-refresh/babel'].filter(Boolean),
+          },
+        },
+      },
+      {
+        test: /\.(png|jpg)$/,
+        use: [{ loader: 'url-loader' }],
+      },
+      {
+        test: /\.css$/,
+        use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
+      },
+    ],
+  },
+
   plugins: [
     new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
     new HtmlWebpackPlugin({
@@ -33,24 +52,17 @@ module.exports = {
     new InterpolateHtmlPlugin(HtmlWebpackPlugin, {
       PUBLIC_URL: '',
     }),
-    new webpack.ProgressPlugin(),
+
     new webpack.DefinePlugin({
       'process.env.SERVICE_URL': JSON.stringify('http://localhost:4004/'),
     }),
-    // new webpack.HotModuleReplacementPlugin(), // for hot module replacement option of devServer
-  ],
+    new webpack.ProgressPlugin(),
+    new webpack.HotModuleReplacementPlugin(), // for hot module replacement option of devServer
+    new ReactRefreshWebpackPlugin(),
+  ].filter(Boolean),
   output: {
-    filename: '[name].[fullhash].js',
+    filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
   },
-  module: {
-    rules: [
-      ...rules,
-      {
-        test: /\.css$/,
-        use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
-      },
-    ],
-  },
   resolve: { extensions: ['*', '.js', '.jsx'] },
 };
diff --git a/chinook/app/react/webpack/webpack.common.js b/chinook/app/front/webpack/webpack.common.js
similarity index 92%
rename from chinook/app/react/webpack/webpack.common.js
rename to chinook/app/front/webpack/webpack.common.js
index 83b11f1f..ea99ce5a 100644
--- a/chinook/app/react/webpack/webpack.common.js
+++ b/chinook/app/front/webpack/webpack.common.js
@@ -16,7 +16,7 @@ module.exports = {
     // from update when developing (doing changes in the files)
     filename: '[name].[fullhash].js',
     // in this folder path bundles will be placed
-    path: path.resolve(__dirname, '../../app/static'),
+    path: path.resolve(__dirname, '../../build/static'),
     // where you uploaded your bundled files. (Relative to server root)
     // needs for react-router-dom
     publicPath: '/static/',
diff --git a/chinook/app/react/webpack/webpack.dev.js b/chinook/app/front/webpack/webpack.dev.js
similarity index 100%
rename from chinook/app/react/webpack/webpack.dev.js
rename to chinook/app/front/webpack/webpack.dev.js
diff --git a/chinook/app/react/webpack/webpack.prod.js b/chinook/app/front/webpack/webpack.prod.js
similarity index 100%
rename from chinook/app/react/webpack/webpack.prod.js
rename to chinook/app/front/webpack/webpack.prod.js
diff --git a/chinook/mta.yaml b/chinook/mta.yaml
index fff60868..78e33879 100644
--- a/chinook/mta.yaml
+++ b/chinook/mta.yaml
@@ -25,6 +25,9 @@ modules:
     path: gen/srv
     properties:
       EXIT: 1 # required by deploy.js task to terminate
+      # REVISIT: This is not a good practice -> don't do it that way, we just did it to save some time :)
+      ACCESS_TOKEN_SECRET: secret
+      REFRESH_TOKEN_SECRET: refresh-secret
     requires:
       # Resources extracted from CAP configuration
       - name: media-store-hdi
@@ -62,7 +65,7 @@ modules:
   - name: media-store-html5-app
     # ------------------------------------------------------------
     type: html5
-    path: app
+    path: app/build
     build-parameters:
       supported-platforms: []
       build-result: /
diff --git a/chinook/package.json b/chinook/package.json
index 082b4851..6f215118 100644
--- a/chinook/package.json
+++ b/chinook/package.json
@@ -23,9 +23,13 @@
   "scripts": {
     "start": "npx cds run",
     "deploy": "cds deploy --to sqlite:mychinook.db",
-    "test": "mocha test/media-store.test.js --verbose --timeout 10000"
+    "test": "mocha ../test/chinook.test.js --verbose --timeout 10000",
+    "import": "cds deploy --to sqlite:sample.db && node ./util/importData.js"
   },
   "cds": {
+    "folders": {
+      "app": "app/build"
+    },
     "requires": {
       "db": {
         "kind": "sqlite",
diff --git a/chinook/test/data/media-store.mock.js b/chinook/test/data/media-store.mock.js
deleted file mode 100644
index cc1168dc..00000000
--- a/chinook/test/data/media-store.mock.js
+++ /dev/null
@@ -1,108 +0,0 @@
-const FIRST_TRACK = {
-  "@odata.context": "$metadata#Tracks(genre(),album(artist()))/$entity",
-  ID: 1,
-  name: "For Those About To Rock (We Salute You)",
-  composer: "Angus Young, Malcolm Young, Brian Johnson",
-  unitPrice: 0.99,
-  album_ID: 1,
-  genre_ID: 1,
-  album: {
-    ID: 1,
-    title: "For Those About To Rock We Salute You",
-    artist_ID: 1,
-    artist: {
-      ID: 1,
-      name: "AC/DC",
-    },
-  },
-  genre: {
-    ID: 1,
-    name: "Rock",
-  },
-};
-
-const SECOND_CUSTOMER = {
-  "@odata.context": "$metadata#Customers/$entity",
-  ID: 2,
-  lastName: "Köhler",
-  firstName: "Leonie",
-  city: "Stuttgart",
-  address: "Theodor-Heuss-Straße 34",
-  country: "Germany",
-  phone: "+49 0711 2842222",
-  email: "leonekohler@surfeu.de",
-};
-
-const FOURTH_MARKED_TRACK_FOR_SECOND_CUSTOMER = {
-  "@odata.context": "$metadata#MarkedTracks/$entity",
-  ID: 4,
-  name: "Restless and Wild",
-  composer:
-    "F. Baltes, R.A. Smith-Diesel, S. Kaufman, U. Dirkscneider & W. Hoffman",
-  unitPrice: 0.99,
-  alreadyOrdered: true,
-  album_ID: 3,
-  genre_ID: 1,
-};
-
-const SECOND_CUSTOMER_INVOICES = {
-  "@odata.context": "$metadata#Invoices",
-  value: [
-    {
-      ID: 1,
-      invoiceDate: "2008-12-31T22:00:00Z",
-      total: 1.98,
-      status: 1,
-      customer_ID: 2,
-    },
-    {
-      ID: 12,
-      invoiceDate: "2009-02-10T22:00:00Z",
-      total: 13.86,
-      status: 1,
-      customer_ID: 2,
-    },
-    {
-      ID: 67,
-      invoiceDate: "2009-10-11T21:00:00Z",
-      total: 8.91,
-      status: 1,
-      customer_ID: 2,
-    },
-    {
-      ID: 196,
-      invoiceDate: "2011-05-18T21:00:00Z",
-      total: 1.98,
-      status: 1,
-      customer_ID: 2,
-    },
-    {
-      ID: 219,
-      invoiceDate: "2011-08-20T21:00:00Z",
-      total: 3.96,
-      status: 1,
-      customer_ID: 2,
-    },
-    {
-      ID: 241,
-      invoiceDate: "2011-11-22T21:00:00Z",
-      total: 5.94,
-      status: 1,
-      customer_ID: 2,
-    },
-    {
-      ID: 293,
-      invoiceDate: "2012-07-12T21:00:00Z",
-      total: 0.99,
-      status: 1,
-      customer_ID: 2,
-    },
-  ],
-};
-
-module.exports = {
-  FIRST_TRACK,
-  SECOND_CUSTOMER,
-  FOURTH_MARKED_TRACK_FOR_SECOND_CUSTOMER,
-  SECOND_CUSTOMER_INVOICES,
-};
diff --git a/chinook/test/media-store.test.js b/chinook/test/media-store.test.js
deleted file mode 100644
index 06a00f7d..00000000
--- a/chinook/test/media-store.test.js
+++ /dev/null
@@ -1,442 +0,0 @@
-const { GET, POST, expect } = require("../../test").run("media-store");
-const cds = require("@sap/cds/lib");
-const {
-  FIRST_TRACK,
-  SECOND_CUSTOMER,
-  FOURTH_MARKED_TRACK_FOR_SECOND_CUSTOMER,
-  SECOND_CUSTOMER_INVOICES,
-} = require("./data/media-store.mock");
-
-const DEFAULT_AXIOS_CONFIG = {
-  headers: { "content-type": "application/json" },
-};
-
-async function resetStore() {
-  const targetCSNModel = await cds.load(["db", "srv"]);
-  const model = cds.reflect(targetCSNModel);
-  await cds.deploy(model).to("sqlite:mychinook.db");
-}
-
-describe("Media Store services", () => {
-  const CURRENT_CUSTOMER_DATA = {
-    ID: 2,
-    email: "leonekohler@surfeu.de",
-    password: "some",
-    roles: ["customer"],
-  };
-  const CURRENT_EMPLOYEE_DATA = {
-    ID: 4,
-    email: "margaret@chinookcorp.com",
-    password: "some",
-    roles: ["employee"],
-  };
-  let customerAccessToken;
-  let employeeAccessToken;
-
-  beforeEach("reset store per each test", async () => {
-    await resetStore();
-  });
-
-  before("login user", async () => {
-    customerLoginResponse = await POST(
-      "/users/login",
-      {
-        email: CURRENT_CUSTOMER_DATA.email,
-        password: CURRENT_CUSTOMER_DATA.password,
-      },
-      DEFAULT_AXIOS_CONFIG
-    );
-    customerAccessToken = customerLoginResponse.data.accessToken;
-
-    employeeLoginResponse = await POST(
-      "/users/login",
-      {
-        email: CURRENT_EMPLOYEE_DATA.email,
-        password: CURRENT_EMPLOYEE_DATA.password,
-      },
-      DEFAULT_AXIOS_CONFIG
-    );
-    employeeAccessToken = employeeLoginResponse.data.accessToken;
-  });
-
-  it("should bootstrap services successfully", () => {
-    const {
-      BrowseTracks,
-      BrowseInvoices,
-      ManageStore,
-      Users,
-      db,
-    } = cds.services;
-    const { Tracks } = BrowseTracks.entities;
-
-    expect(BrowseTracks).not.to.be.undefined;
-    expect(BrowseInvoices).not.to.be.undefined;
-    expect(ManageStore).not.to.be.undefined;
-    expect(Users).not.to.be.undefined;
-    expect(db).not.to.be.undefined;
-    expect(Tracks).not.to.be.undefined;
-  });
-
-  describe("Users", () => {
-    function compareAuthData(actualAuthData) {
-      expect(actualAuthData).not.to.be.undefined;
-      expect(actualAuthData).to.have.own.property("accessToken");
-      expect(actualAuthData).to.have.own.property("refreshToken");
-      expect(actualAuthData).to.have.own.property("ID");
-      expect(actualAuthData).to.have.own.property("email");
-      expect(actualAuthData).to.have.own.property("roles");
-      expect(actualAuthData.ID).to.equal(CURRENT_CUSTOMER_DATA.ID);
-      expect(actualAuthData.email).to.equal(CURRENT_CUSTOMER_DATA.email);
-      expect(actualAuthData.roles).to.deep.equal(CURRENT_CUSTOMER_DATA.roles);
-    }
-
-    it("should login user successfully", async () => {
-      const { data: actualData } = customerLoginResponse;
-
-      compareAuthData(actualData);
-    });
-
-    it("shouldn't login customer with invalid credentials", async () => {
-      try {
-        await POST(
-          "/users/login",
-          {
-            email: CURRENT_CUSTOMER_DATA.email,
-            password: "some-invalid-password",
-          },
-          DEFAULT_AXIOS_CONFIG
-        );
-      } catch (error) {
-        expect(error.message).to.equal("401 - Unauthorized");
-      }
-    });
-
-    it("should refresh tokens successfully", async () => {
-      const {
-        data: { refreshToken },
-      } = customerLoginResponse;
-      const { data: actualRefreshTokensData } = await POST(
-        "/users/refreshTokens",
-        {
-          refreshToken,
-        },
-        DEFAULT_AXIOS_CONFIG
-      );
-
-      compareAuthData(actualRefreshTokensData);
-    });
-
-    it("shouldn't refresh tokens due to invalid provided one", async () => {
-      try {
-        await POST(
-          "/users/refreshTokens",
-          {
-            refreshToken: "some-invalid-refresh-token",
-          },
-          DEFAULT_AXIOS_CONFIG
-        );
-      } catch (error) {
-        expect(error.message).to.equal("401 - Unauthorized");
-      }
-    });
-
-    it("current customer should retrieve his data", async () => {
-      const { data: actualData } = await GET(
-        `/users/Customers(${CURRENT_CUSTOMER_DATA.ID})`,
-        {
-          headers: {
-            authorization: "Basic " + customerAccessToken,
-          },
-        }
-      );
-      expect(actualData).not.to.be.undefined;
-      expect(actualData).to.deep.equal(SECOND_CUSTOMER);
-    });
-
-    it("current employee shouldn't have access to customer data", async () => {
-      const someCustomerID = 15;
-
-      try {
-        await GET(`/users/Customers(${someCustomerID})`, {
-          headers: {
-            authorization: "Basic " + employeeAccessToken,
-          },
-        });
-      } catch (error) {
-        expect(error.message).to.equal("403 - Forbidden");
-      }
-    });
-
-    it("current customer shouldn't retrieve his data without provided access token", async () => {
-      try {
-        await GET(`/users/Customers(11)`, DEFAULT_AXIOS_CONFIG);
-      } catch (error) {
-        expect(error.message).to.equal("401 - Unauthorized");
-      }
-    });
-
-    it("current customer shouldn't retrieve another customer data", async () => {
-      try {
-        await GET(`/users/Customers(11)`, {
-          headers: {
-            authorization: "Basic " + customerAccessToken,
-          },
-        });
-      } catch (error) {
-        expect(error.message).to.equal("404 - Not Found");
-      }
-    });
-  });
-
-  describe("BrowseTracks", () => {
-    it("should return track with ID eq 1", async () => {
-      const { data } = await GET(
-        "/browse-tracks/Tracks(1)?$expand=genre,album($expand=artist)"
-      );
-      expect(data).to.eql(FIRST_TRACK);
-    });
-
-    it("should return track with ID eq 4 for second customer", async () => {
-      const { data } = await GET("/browse-tracks/MarkedTracks(4)", {
-        headers: {
-          authorization: "Basic " + customerAccessToken,
-        },
-      });
-
-      expect(data).to.eql(FOURTH_MARKED_TRACK_FOR_SECOND_CUSTOMER);
-    });
-  });
-
-  describe("BrowseInvoices", () => {
-    const NEW_INVOICE_ID = 413;
-    const CANCELLED_STATUS = -1;
-
-    async function getAllCustomerInvoices() {
-      const { data } = await GET("/browse-invoices/Invoices", {
-        headers: {
-          authorization: "Basic " + customerAccessToken,
-        },
-      });
-      return data;
-    }
-
-    async function createInvoice(tracks) {
-      await POST(
-        "/browse-invoices/invoice",
-        { tracks },
-        {
-          headers: {
-            ...DEFAULT_AXIOS_CONFIG.headers,
-            authorization: "Basic " + customerAccessToken,
-          },
-        }
-      );
-    }
-
-    it("should return all invoices only for current customer", async () => {
-      const data = await getAllCustomerInvoices();
-
-      expect(data).to.eql(SECOND_CUSTOMER_INVOICES);
-    });
-
-    it("should create invoice for current customer", async () => {
-      const beforeData = await getAllCustomerInvoices();
-      expect(beforeData.value.length).to.equal(
-        SECOND_CUSTOMER_INVOICES.value.length
-      );
-
-      await createInvoice([{ ID: 3 }]);
-
-      const afterData = await getAllCustomerInvoices();
-      expect(afterData.value.length).to.equal(
-        SECOND_CUSTOMER_INVOICES.value.length + 1
-      );
-    });
-
-    it("should not create invoice due to current customer already owns some of provided tracks", async () => {
-      const ALREADY_OWNED_TRACK_ID = 4;
-
-      try {
-        await createInvoice([{ ID: ALREADY_OWNED_TRACK_ID }]);
-      } catch (error) {
-        expect(error.message).to.equal(
-          "400 - Invoice contains already owned values"
-        );
-      }
-    });
-
-    it("should cancel invoice for current customer", async () => {
-      await createInvoice([{ ID: 3 }]);
-
-      const beforeData = await getAllCustomerInvoices();
-      expect(beforeData.value.length).to.equal(
-        SECOND_CUSTOMER_INVOICES.value.length + 1
-      );
-
-      await POST(
-        "/browse-invoices/cancelInvoice",
-        { ID: NEW_INVOICE_ID },
-        {
-          headers: {
-            ...DEFAULT_AXIOS_CONFIG.headers,
-            authorization: "Basic " + customerAccessToken,
-          },
-        }
-      );
-
-      const afterData = await getAllCustomerInvoices();
-      expect(afterData.value[afterData.value.length - 1].status).to.equal(
-        CANCELLED_STATUS
-      );
-    });
-
-    it("should not cancel invoice due to leverage time has expired", async () => {
-      const beforeData = await getAllCustomerInvoices();
-      expect(beforeData.value.length).to.equal(
-        SECOND_CUSTOMER_INVOICES.value.length
-      );
-
-      try {
-        await POST(
-          "/browse-invoices/cancelInvoice",
-          { ID: 12 },
-          {
-            headers: {
-              ...DEFAULT_AXIOS_CONFIG.headers,
-              authorization: "Basic " + customerAccessToken,
-            },
-          }
-        );
-      } catch (error) {
-        expect(error.message).to.equal("400 - Leverage time was expired");
-      }
-    });
-
-    it("should not cancel invoice due to invoice with such ID si not belongs to current customer", async () => {
-      const NOT_OWNED_INVOICE_ID = 146;
-
-      try {
-        await POST(
-          "/browse-invoices/cancelInvoice",
-          { ID: NOT_OWNED_INVOICE_ID },
-          {
-            headers: {
-              ...DEFAULT_AXIOS_CONFIG.headers,
-              authorization: "Basic " + customerAccessToken,
-            },
-          }
-        );
-      } catch (error) {
-        expect(error.message).to.equal(
-          "404 - Seems like you are not owning this invoice or it is not exists"
-        );
-      }
-    });
-  });
-
-  describe("ManageStore", () => {
-    const NEW_TRACK_ID = 3504;
-    const newTrack = {
-      name: "Some track",
-      composer: "Some composer",
-      album: { ID: 14 },
-      genre: { ID: 15 },
-      unitPrice: "18.33",
-    };
-
-    async function createTrack(newTrack) {
-      await POST("/manage-store/Tracks", newTrack, {
-        headers: {
-          authorization: "Basic " + employeeAccessToken,
-          "content-type": "application/json;IEEE754Compatible=true",
-        },
-      });
-    }
-
-    async function getTrack(ID) {
-      return await GET(`/browse-tracks/Tracks(${ID})`);
-    }
-
-    it("should create new track", async () => {
-      await createTrack(newTrack);
-      const { data: createdTrack } = await getTrack(NEW_TRACK_ID);
-
-      expect(createdTrack).to.deep.equal({
-        "@odata.context": "$metadata#Tracks/$entity",
-        ID: NEW_TRACK_ID,
-        name: "Some track",
-        composer: "Some composer",
-        unitPrice: 18.33,
-        album_ID: 14,
-        genre_ID: 15,
-      });
-    });
-
-    it("customer should can create track", async () => {
-      try {
-        await POST("/manage-store/Tracks", newTrack, {
-          headers: {
-            authorization: "Basic " + customerAccessToken,
-            "content-type": "application/json;IEEE754Compatible=true",
-          },
-        });
-      } catch (error) {
-        expect(error.message).to.equal("403 - Forbidden");
-      }
-    });
-
-    it("should create new artist", async () => {
-      const NEW_ARTIST_ID = 276;
-
-      await POST(
-        "/manage-store/Artists",
-        { name: "some" },
-        {
-          headers: {
-            authorization: "Basic " + employeeAccessToken,
-            ...DEFAULT_AXIOS_CONFIG.headers,
-          },
-        }
-      );
-
-      const { data } = await GET(`/manage-store/Artists(${NEW_ARTIST_ID})`, {
-        headers: {
-          authorization: "Basic " + employeeAccessToken,
-        },
-      });
-
-      expect({
-        ID: NEW_ARTIST_ID,
-        name: "some",
-        "@odata.context": "$metadata#Artists/$entity",
-      }).to.deep.equal(data);
-    });
-
-    it("should create new artist", async () => {
-      const NEW_ALBUM_ID = 349;
-
-      await POST(
-        "/manage-store/Albums",
-        { title: "some", artist: { ID: 235 } },
-        {
-          headers: {
-            authorization: "Basic " + employeeAccessToken,
-            ...DEFAULT_AXIOS_CONFIG.headers,
-          },
-        }
-      );
-
-      const { data } = await GET(`/manage-store/Albums(${NEW_ALBUM_ID})`, {
-        headers: {
-          authorization: "Basic " + employeeAccessToken,
-        },
-      });
-      expect({
-        ID: NEW_ALBUM_ID,
-        title: "some",
-        artist_ID: 235,
-        "@odata.context": "$metadata#Albums/$entity",
-      }).to.deep.equal(data);
-    });
-  });
-});
diff --git a/chinook/test/test.http b/chinook/test/requests.http
similarity index 100%
rename from chinook/test/test.http
rename to chinook/test/requests.http