Release 1.26.0 (#217 )

Feature/set public stripe key dynamically (#216 )
* Set public Stripe key dynamically * Update changelog
2021-07-17 11:06:14 +02:00 · 2021-07-17 11:04:43 +02:00 · 2021-07-16 21:32:02 +02:00 · 2021-07-15 18:10:18 +02:00 · 2021-07-14 20:54:23 +02:00 · 2021-07-14 20:54:05 +02:00
304 changed files with 12001 additions and 5771 deletions
--- a/.env
+++ b/.env
@ -5,12 +5,12 @@ REDIS_HOST=localhost
 REDIS_PORT=6379

 # POSTGRES
+POSTGRES_DB=ghostfolio-db
 POSTGRES_USER=user
 POSTGRES_PASSWORD=password
-POSTGRES_DB=ghostfolio-db

 ACCESS_TOKEN_SALT=GHOSTFOLIO
 ALPHA_VANTAGE_API_KEY=
-DATABASE_URL=postgresql://user:password@localhost:5432/ghostfolio-db?sslmode=prefer
+DATABASE_URL=postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@localhost:5432/${POSTGRES_DB}?sslmode=prefer
 JWT_SECRET_KEY=123456
 PORT=3333
--- a/.travis.yml
+++ b/.travis.yml
@ -0,0 +1,11 @@
+language: node_js
+git:
+  depth: false
+node_js:
+  - 14
+before_script:
+  - yarn
+script:
+  - yarn format:check
+  - yarn test
+  - yarn build:all
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -5,6 +5,349 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

+## 1.26.0 - 17.07.2021
+
+### Added
+
+- Added the import functionality for transactions
+- Added the `robots.txt` file
+
+### Changed
+
+- Improved the styling of the current pricing plan
+- Improved the styling of the transaction type badge
+- Set the public _Stripe_ key dynamically
+- Upgraded `angular-material-css-vars` from version `2.0.0` to `2.1.0`
+
+### Fixed
+
+- Fixed the warn color (button) of the theme
+
+## 1.25.0 - 11.07.2021
+
+### Added
+
+- Added the export functionality for transactions
+
+### Changed
+
+- Respected the cash balance on the analysis page
+- Improved the settings selectors on the account page
+- Harmonized the slogan to "Open Source Wealth Management Software"
+
+### Fixed
+
+- Fixed rendering of currency and platform in dialogs (account and transaction)
+- Fixed an issue in the calculation of the average buy prices in the position detail chart
+
+## 1.24.0 - 07.07.2021
+
+### Added
+
+- Added the total value in the create or edit transaction dialog
+- Added a balance attribute to the account model
+- Calculated the total balance (cash)
+
+### Changed
+
+- Upgraded `@angular/cdk` and `@angular/material` from version `11.0.4` to `12.0.6`
+- Upgraded `@nestjs` dependencies
+- Upgraded `angular-material-css-vars` from version `1.2.0` to `2.0.0`
+- Upgraded `Nx` from version `12.3.6` to `12.5.4`
+
+## 1.23.1 - 03.07.2021
+
+### Fixed
+
+- Fixed the investment chart (drafts)
+
+## 1.23.0 - 03.07.2021
+
+### Added
+
+- Added support for future transactions (drafts)
+
+## 1.22.0 - 25.06.2021
+
+### Added
+
+- Set the user id in the _Stripe_ callback
+
+## 1.21.0 - 22.06.2021
+
+### Changed
+
+- Changed _Stripe_ mode from `subscription` to `payment`
+
+### Fixed
+
+- Fixed the base currency on the pricing page
+
+## 1.20.0 - 21.06.2021
+
+### Added
+
+- Set up _Stripe_ for subscriptions
+
+### Changed
+
+- Improved the style of the _Ghostfolio in Numbers_ section
+
+## 1.19.0 - 17.06.2021
+
+### Added
+
+- Added a _Ghostfolio in Numbers_ section to the about page
+
+## 1.18.0 - 16.06.2021
+
+### Changed
+
+- Improved the pie chart: Investments by sector
+- Improved the onboarding for TWA by redirecting to the account registration page
+
+## 1.17.0 - 15.06.2021
+
+### Changed
+
+- Improved the error page of the sign in with fingerprint
+- Disable the sign in with fingerprint selector for the demo user
+- Upgraded `angular` from version `11.2.4` to `12.0.4`
+- Upgraded `angular-material-css-vars` from version `1.1.2` to `1.2.0`
+- Upgraded `chart.js` from version `3.2.1` to `3.3.2`
+- Upgraded `date-fns` from version `2.19.0` to `2.22.1`
+- Upgraded `eslint` and `prettier` dependencies
+- Upgraded `ngx-device-detector` from version `2.0.6` to `2.1.1`
+- Upgraded `ngx-markdown` from version `11.1.2` to `12.0.1`
+
+## 1.16.0 - 14.06.2021
+
+### Changed
+
+- Improved the sign in with fingerprint
+
+## 1.15.0 - 14.06.2021
+
+### Added
+
+- Added a counter column to the transactions table
+- Added a label to indicate the default account in the accounts table
+- Added an option to limit the items in pie charts
+- Added sign in with fingerprint
+
+### Changed
+
+- Cleaned up the analysis page with an unused chart module
+- Improved the cell alignment in the users table of the admin control panel
+
+### Fixed
+
+- Fixed the last activity column of users in the admin control panel
+
+## 1.14.0 - 09.06.2021
+
+### Added
+
+- Added a connect or create symbol profile model logic on creating a new transaction
+
+### Changed
+
+- Improved the global heat map to visualize investments by country
+
+## 1.13.0 - 08.06.2021
+
+### Added
+
+- Added a global heat map to visualize investments by country
+
+## 1.12.0 - 06.06.2021
+
+### Added
+
+- Added a symbol profile model with additional data
+- Added new pie charts: Investments by continent and country
+
+## 1.11.0 - 05.06.2021
+
+### Added
+
+- Added a dedicated page for the account registration
+- Rendered the average buy prices in the position detail chart (useful for recurring transactions)
+- Introduced the initial prisma migration
+
+### Changed
+
+- Changed the buttons to links (`<a>`) on the tools page
+- Upgraded `prisma` from version `2.20.1` to `2.24.1`
+
+## 1.10.1 - 02.06.2021
+
+### Fixed
+
+- Fixed an optional type in the user interface
+
+## 1.10.0 - 02.06.2021
+
+### Changed
+
+- Moved the tools to a sub path (`/tools`)
+- Extended the pricing page and aligned with the subscription model
+
+## 1.9.0 - 01.06.2021
+
+### Added
+
+- Added the year labels to the investment chart on the x-axis
+
+### Changed
+
+- Respected the data source attribute of the transactions model in the data management for historical data
+- Prettified the generic scraper symbols in the transaction filtering component
+- Changed to the strict mode of distance formatting between two given dates
+
+### Fixed
+
+- Fixed the sorting in various tables
+- Made the order of the rules in the _X-ray_ section consistent
+
+## 1.8.0 - 24.05.2021
+
+### Added
+
+- Added a section for _Analysis_, _X-ray_ and upcoming tools
+
+### Changed
+
+- Introduced a user service implemented as an observable store (single source of truth for state)
+
+### Fixed
+
+- Fixed the performance chart by considering the investment
+- Fixed missing header of public pages (_About_, _Pricing_, _Resources_)
+
+## 1.7.0 - 22.05.2021
+
+### Changed
+
+- Hid footer on mobile (except on landing page)
+
+### Fixed
+
+- Fixed the internal navigation of the _Zen Mode_ in combination with a query parameter
+
+## 1.6.0 - 22.05.2021
+
+### Added
+
+- Added an index in the users table of the admin control panel
+
+### Changed
+
+- Improved the alignment in the users table of the admin control panel
+
+## 1.5.0 - 22.05.2021
+
+### Added
+
+- Added _Zen Mode_: the distraction-free view
+
+## 1.4.0 - 20.05.2021
+
+### Added
+
+- Added filtering by year in the transaction filtering component
+
+### Changed
+
+- Renamed _Ghostfolio Account_ to _My Ghostfolio_
+- Hid unknown exchange in the position overview
+- Disable the base currency selector for the demo user
+- Refactored the portfolio unit tests to work without database
+- Refactored the search functionality of the data management (aligned with data source)
+- Renamed shared helper to `@ghostfolio/common/helper`
+- Moved shared interfaces to `@ghostfolio/common/interfaces`
+- Moved shared types to `@ghostfolio/common/types`
+
+## 1.3.0 - 15.05.2021
+
+### Changed
+
+- Refactored the active menu item state by parsing the current url
+- Used a desaturated background color for unknown types in pie charts
+- Renamed the columns _Initial Share_ and _Current Share_ to _Initial Allocation_ and _Current Allocation_ in the positions table
+
+### Fixed
+
+- Fixed the link to the pricing page
+
+## 1.2.1 - 14.05.2021
+
+### Changed
+
+- Updated the sitemap
+
+## 1.2.0 - 14.05.2021
+
+### Changed
+
+- Harmonized the style of various tables
+- Keep the color per type when switching between _Initial_ and _Current_ in pie charts
+- Upgraded `chart.js` from version `3.0.2` to `3.2.1`
+- Moved the pricing section to a dedicated page
+- Improved the style of the transaction filtering component
+
+### Fixed
+
+- Fixed the tooltips when switching between _Initial_ and _Current_ in pie charts
+
+## 1.1.0 - 11.05.2021
+
+### Added
+
+- Added a button to fetch the current market price in the create or edit transaction dialog
+
+### Changed
+
+- Improved the transaction filtering with multi filter support
+
+### Fixed
+
+- Fixed the filtering by account name in the transactions table
+- Fixed the active menu item state when a modal has opened
+
+## 1.0.0 - 05.05.2021
+
+### Added
+
+- Added the functionality to clone a transaction
+- Added a _Google Play_ badge on the landing page
+
+### Changed
+
+- Changed to maskable icons
+
+## 0.99.0 - 03.05.2021
+
+### Added
+
+- Added support for deleting users in the admin control panel
+
+### Changed
+
+- Eliminated the platform attribute from the transaction model
+
+## 0.98.0 - 02.05.2021
+
+### Added
+
+- Added the logic to create and update accounts
+
+## 0.97.0 - 01.05.2021
+
+### Added
+
+- Added an account page as a preparation for the multi accounts support
+
 ## 0.96.0 - 30.04.2021

 ### Added
@ -32,7 +375,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 ### Changed

- Improved the user table styling of the admin control panel
+- Improved the users table styling of the admin control panel
 - Improved the background colors in the dark mode

 ## 0.92.0 - 25.04.2021
@ -40,7 +383,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added

 - Prepared further for multi accounts support: store account for new transactions
- Added a horizontal scrollbar to the user table of the admin control panel
+- Added a horizontal scrollbar to the users table of the admin control panel

 ### Fixed

@ -67,7 +410,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 ### Changed

- Improved the user table of the admin control panel
+- Improved the users table of the admin control panel

 ## 0.89.0 - 21.04.2021

@ -98,7 +441,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 ### Fixed

- Fixed an issue in the user table of the admin control panel with missing data
+- Fixed an issue in the users table of the admin control panel with missing data

 ## 0.86.1 - 18.04.2021

@ -113,7 +456,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Changed the about page for the new license
 - Optimized the data management for historical data
 - Optimized the exchange rate service
- Improved the user table of the admin control panel
+- Improved the users table of the admin control panel

 ### Fixed

--- a/README.md
+++ b/README.md
@ -1,19 +1,36 @@
 <div align="center">
+  <a href="https://ghostfol.io">
+    <img
+      alt="Ghostfolio Logo"
+      src="https://avatars.githubusercontent.com/u/82473144?s=200"
+      width="100"
+    />
+  </a>
+
  <h1>Ghostfolio</h1>
  <p>
-    <strong>Open Source Portfolio Tracker</strong>
+    <strong>Open Source Wealth Management Software made for Humans</strong>
  </p>
  <p>
    <a href="https://ghostfol.io"><strong>Live Demo</strong></a>
  </p>
  <p>
+    <a href="#contributing">
+      <img src="https://img.shields.io/badge/contributions-welcome-orange.svg"/></a>
+    <a href="https://travis-ci.com/github/ghostfolio/ghostfolio" rel="nofollow">
+      <img src="https://travis-ci.com/ghostfolio/ghostfolio.svg?branch=main" alt="Build Status"/></a>
    <a href="https://www.gnu.org/licenses/agpl-3.0" rel="nofollow">
-      <img src="https://img.shields.io/badge/License-AGPL%20v3-blue.svg" alt="License: AGPL v3">
-    </a>
+      <img src="https://img.shields.io/badge/License-AGPL%20v3-blue.svg" alt="License: AGPL v3"/></a>
  </p>
 </div>

-**Ghostfolio** is an open source portfolio tracker. The software empowers busy folks to have a sharp look of their financial assets and to make solid, data-driven investment decisions by evaluating automated static portfolio analysis rules.
+**Ghostfolio** is an open source wealth management software built with web technology. The application empowers busy people to keep track of their wealth like stocks, ETFs or cryptocurrencies and make solid, data-driven investment decisions.
+
+## Ghostfolio Premium
+
+Our official **[Ghostfolio Premium](https://ghostfol.io/pricing)** cloud offering is the easiest way to get started. Due to the time it saves, this will be the best option for most people. The revenue is used for covering the hosting costs.
+
+If you prefer to run Ghostfolio on your own infrastructure, please find the source code and further instructions here on _GitHub_.

 ## Why Ghostfolio?

@ -40,10 +57,13 @@ Ghostfolio is for you if you are...
 ## Features

 - ✅ Create, update and delete transactions
+- ✅ Multi account management
 - ✅ Portfolio performance (`Today`, `YTD`, `1Y`, `5Y`, `Max`)
 - ✅ Various charts
 - ✅ Static analysis to identify potential risks in your portfolio
 - ✅ Dark Mode
+- ✅ Zen Mode
+- ✅ Mobile-first design

 ## Technology Stack

@ -51,11 +71,11 @@ Ghostfolio is a modern web application written in [TypeScript](https://www.types

 ### Backend

-The backend is based on [NestJS](https://nestjs.com) using [PostgreSQL](https://www.postgresql.org) as a database and [Redis](https://redis.io) for caching.
+The backend is based on [NestJS](https://nestjs.com) using [PostgreSQL](https://www.postgresql.org) as a database together with [Prisma](https://www.prisma.io) and [Redis](https://redis.io) for caching.

 ### Frontend

-The frontend is built with [Angular](https://angular.io).
+The frontend is built with [Angular](https://angular.io) and uses [Angular Material](https://material.angular.io) with utility classes from [Bootstrap](https://getbootstrap.com).

 ## Getting Started

@ -68,33 +88,40 @@ The frontend is built with [Angular](https://angular.io).
 ### Setup

 1. Run `yarn install`
-2. Run `cd docker`
-3. Run `docker compose build`
-4. Run `docker compose up -d` to start [PostgreSQL](https://www.postgresql.org) and [Redis](https://redis.io)
-5. Run `cd -` to go back to the project root directory
-6. Run `yarn setup:database` to initialize the database schema and populate your database with (example) data
-7. Start server and client (see _Development_)
-8. Login as _Admin_ with the following _Security Token_: `ae76872ae8f3419c6d6f64bf51888ecbcc703927a342d815fafe486acdb938da07d0cf44fca211a0be74a423238f535362d390a41e81e633a9ce668a6e31cdf9`
-9. Go to the _Admin Control Panel_ and press _Gather All Data_ to fetch historical data
-10. Press _Sign out_ and check out the _Live Demo_
+1. Run `cd docker`
+1. Run `docker compose up -d` to start [PostgreSQL](https://www.postgresql.org) and [Redis](https://redis.io)
+1. Run `cd -` to go back to the project root directory
+1. Run `yarn setup:database` to initialize the database schema and populate your database with (example) data
+1. Start server and client (see [_Development_](#Development))
+1. Login as _Admin_ with the following _Security Token_: `ae76872ae8f3419c6d6f64bf51888ecbcc703927a342d815fafe486acdb938da07d0cf44fca211a0be74a423238f535362d390a41e81e633a9ce668a6e31cdf9`
+1. Go to the _Admin Control Panel_ and click _Gather All Data_ to fetch historical data
+1. Click _Sign out_ and check out the _Live Demo_

 ## Development

-Please make sure you have completed the instructions from _Setup_
+Please make sure you have completed the instructions from [_Setup_](#Setup).

 ### Start server

- Debug: Run `yarn watch:server` and click "Launch Program" in _Visual Studio Code_
- Serve: Run `yarn start:server`
+<ol type="a">
+  <li>Debug: Run <code>yarn watch:server</code> and click "Launch Program" in <i>Visual Studio Code</i></li>
+  <li>Serve: Run <code>yarn start:server</code></li>
+</ol>

 ### Start client

- Run `yarn start:client`
+Run `yarn start:client`

 ## Testing

 Run `yarn test`

+## Contributing
+
+Ghostfolio is **100% free** and **open source**. We encourage and support an active and healthy community that accepts contributions from the public - including you.
+
+Not sure what to work on? We have got some ideas. Please tweet to [@ghostfolio\_](https://twitter.com/ghostfolio_) or send an e-mail to hi@ghostfol.io. We would love to hear from you.
+
 ## License

 © 2021 [Ghostfolio](https://ghostfol.io)
--- a/angular.json
+++ b/angular.json
@ -86,7 +86,6 @@
            "main": "apps/client/src/main.ts",
            "polyfills": "apps/client/src/polyfills.ts",
            "tsConfig": "apps/client/tsconfig.app.json",
-            "aot": true,
            "assets": [
              "apps/client/src/assets",
              {
@ -104,6 +103,11 @@
                "input": "",
                "output": "./"
              },
+              {
+                "glob": "robots.txt",
+                "input": "apps/client/src/assets",
+                "output": "./"
+              },
              {
                "glob": "sitemap.xml",
                "input": "apps/client/src/assets",
@ -121,7 +125,13 @@
              }
            ],
            "styles": ["apps/client/src/styles.scss"],
-            "scripts": ["node_modules/marked/lib/marked.js"]
+            "scripts": ["node_modules/marked/lib/marked.js"],
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
          },
          "configurations": {
            "production": {
@ -152,7 +162,8 @@
              ]
            }
          },
-          "outputs": ["{options.outputPath}"]
+          "outputs": ["{options.outputPath}"],
+          "defaultConfiguration": ""
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
@ -208,22 +219,22 @@
        }
      }
    },
-    "helper": {
-      "root": "libs/helper",
-      "sourceRoot": "libs/helper/src",
+    "common": {
+      "root": "libs/common",
+      "sourceRoot": "libs/common/src",
      "projectType": "library",
      "architect": {
        "lint": {
          "builder": "@nrwl/linter:eslint",
          "options": {
-            "lintFilePatterns": ["libs/helper/**/*.ts"]
+            "lintFilePatterns": ["libs/common/**/*.ts"]
          }
        },
        "test": {
          "builder": "@nrwl/jest:jest",
-          "outputs": ["coverage/libs/helper"],
+          "outputs": ["coverage/libs/common"],
          "options": {
-            "jestConfig": "libs/helper/jest.config.js",
+            "jestConfig": "libs/common/jest.config.js",
            "passWithNoTests": true
          }
        }
--- a/apps/api/jest.config.js
+++ b/apps/api/jest.config.js
@ -11,5 +11,6 @@ module.exports = {
  },
  moduleFileExtensions: ['ts', 'js', 'html'],
  coverageDirectory: '../../coverage/apps/api',
-  testTimeout: 10000
+  testTimeout: 10000,
+  testEnvironment: 'node'
 };
--- a/apps/api/src/app/access/access.controller.ts
+++ b/apps/api/src/app/access/access.controller.ts
@ -1,10 +1,10 @@
-import { RequestWithUser } from '@ghostfolio/api/app/interfaces/request-with-user.type';
+import { Access } from '@ghostfolio/common/interfaces';
+import { RequestWithUser } from '@ghostfolio/common/types';
 import { Controller, Get, Inject, UseGuards } from '@nestjs/common';
 import { REQUEST } from '@nestjs/core';
 import { AuthGuard } from '@nestjs/passport';

 import { AccessService } from './access.service';
-import { Access } from './interfaces/access.interface';

@Controller('access')
 export class AccessController {
--- a/apps/api/src/app/access/access.service.ts
+++ b/apps/api/src/app/access/access.service.ts
@ -1,9 +1,8 @@
 import { PrismaService } from '@ghostfolio/api/services/prisma.service';
+import { AccessWithGranteeUser } from '@ghostfolio/common/types';
 import { Injectable } from '@nestjs/common';
 import { Prisma } from '@prisma/client';

-import { AccessWithGranteeUser } from './interfaces/access-with-grantee-user.type';
-
@Injectable()
 export class AccessService {
  public constructor(private prisma: PrismaService) {}
--- a/apps/api/src/app/account/account.controller.ts
+++ b/apps/api/src/app/account/account.controller.ts
@ -0,0 +1,241 @@
+import { nullifyValuesInObjects } from '@ghostfolio/api/helper/object.helper';
+import { ImpersonationService } from '@ghostfolio/api/services/impersonation.service';
+import {
+  getPermissions,
+  hasPermission,
+  permissions
+} from '@ghostfolio/common/permissions';
+import { RequestWithUser } from '@ghostfolio/common/types';
+import {
+  Body,
+  Controller,
+  Delete,
+  Get,
+  Headers,
+  HttpException,
+  Inject,
+  Param,
+  Post,
+  Put,
+  UseGuards
+} from '@nestjs/common';
+import { REQUEST } from '@nestjs/core';
+import { AuthGuard } from '@nestjs/passport';
+import { Account as AccountModel } from '@prisma/client';
+import { StatusCodes, getReasonPhrase } from 'http-status-codes';
+
+import { AccountService } from './account.service';
+import { CreateAccountDto } from './create-account.dto';
+import { UpdateAccountDto } from './update-account.dto';
+
+@Controller('account')
+export class AccountController {
+  public constructor(
+    private readonly accountService: AccountService,
+    private readonly impersonationService: ImpersonationService,
+    @Inject(REQUEST) private readonly request: RequestWithUser
+  ) {}
+
+  @Delete(':id')
+  @UseGuards(AuthGuard('jwt'))
+  public async deleteAccount(@Param('id') id: string): Promise<AccountModel> {
+    if (
+      !hasPermission(
+        getPermissions(this.request.user.role),
+        permissions.deleteAccount
+      )
+    ) {
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.FORBIDDEN),
+        StatusCodes.FORBIDDEN
+      );
+    }
+
+    const account = await this.accountService.accountWithOrders(
+      {
+        id_userId: {
+          id,
+          userId: this.request.user.id
+        }
+      },
+      { Order: true }
+    );
+
+    if (account?.isDefault || account?.Order.length > 0) {
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.FORBIDDEN),
+        StatusCodes.FORBIDDEN
+      );
+    }
+
+    return this.accountService.deleteAccount(
+      {
+        id_userId: {
+          id,
+          userId: this.request.user.id
+        }
+      },
+      this.request.user.id
+    );
+  }
+
+  @Get()
+  @UseGuards(AuthGuard('jwt'))
+  public async getAllAccounts(
+    @Headers('impersonation-id') impersonationId
+  ): Promise<AccountModel[]> {
+    const impersonationUserId = await this.impersonationService.validateImpersonationId(
+      impersonationId,
+      this.request.user.id
+    );
+
+    let accounts = await this.accountService.accounts({
+      include: { Order: true, Platform: true },
+      orderBy: { name: 'asc' },
+      where: { userId: impersonationUserId || this.request.user.id }
+    });
+
+    if (
+      impersonationUserId &&
+      !hasPermission(
+        getPermissions(this.request.user.role),
+        permissions.readForeignPortfolio
+      )
+    ) {
+      accounts = nullifyValuesInObjects(accounts, [
+        'fee',
+        'quantity',
+        'unitPrice'
+      ]);
+    }
+
+    return accounts;
+  }
+
+  @Get(':id')
+  @UseGuards(AuthGuard('jwt'))
+  public async getAccountById(@Param('id') id: string): Promise<AccountModel> {
+    return this.accountService.account({
+      id_userId: {
+        id,
+        userId: this.request.user.id
+      }
+    });
+  }
+
+  @Post()
+  @UseGuards(AuthGuard('jwt'))
+  public async createAccount(
+    @Body() data: CreateAccountDto
+  ): Promise<AccountModel> {
+    if (
+      !hasPermission(
+        getPermissions(this.request.user.role),
+        permissions.createAccount
+      )
+    ) {
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.FORBIDDEN),
+        StatusCodes.FORBIDDEN
+      );
+    }
+
+    if (data.platformId) {
+      const platformId = data.platformId;
+      delete data.platformId;
+
+      return this.accountService.createAccount(
+        {
+          ...data,
+          Platform: { connect: { id: platformId } },
+          User: { connect: { id: this.request.user.id } }
+        },
+        this.request.user.id
+      );
+    } else {
+      delete data.platformId;
+
+      return this.accountService.createAccount(
+        {
+          ...data,
+          User: { connect: { id: this.request.user.id } }
+        },
+        this.request.user.id
+      );
+    }
+  }
+
+  @Put(':id')
+  @UseGuards(AuthGuard('jwt'))
+  public async update(@Param('id') id: string, @Body() data: UpdateAccountDto) {
+    if (
+      !hasPermission(
+        getPermissions(this.request.user.role),
+        permissions.updateAccount
+      )
+    ) {
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.FORBIDDEN),
+        StatusCodes.FORBIDDEN
+      );
+    }
+
+    const originalAccount = await this.accountService.account({
+      id_userId: {
+        id,
+        userId: this.request.user.id
+      }
+    });
+
+    if (!originalAccount) {
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.FORBIDDEN),
+        StatusCodes.FORBIDDEN
+      );
+    }
+
+    if (data.platformId) {
+      const platformId = data.platformId;
+      delete data.platformId;
+
+      return this.accountService.updateAccount(
+        {
+          data: {
+            ...data,
+            Platform: { connect: { id: platformId } },
+            User: { connect: { id: this.request.user.id } }
+          },
+          where: {
+            id_userId: {
+              id,
+              userId: this.request.user.id
+            }
+          }
+        },
+        this.request.user.id
+      );
+    } else {
+      // platformId is null, remove it
+      delete data.platformId;
+
+      return this.accountService.updateAccount(
+        {
+          data: {
+            ...data,
+            Platform: originalAccount.platformId
+              ? { disconnect: true }
+              : undefined,
+            User: { connect: { id: this.request.user.id } }
+          },
+          where: {
+            id_userId: {
+              id,
+              userId: this.request.user.id
+            }
+          }
+        },
+        this.request.user.id
+      );
+    }
+  }
+}
--- a/apps/api/src/app/account/account.module.ts
+++ b/apps/api/src/app/account/account.module.ts
@ -0,0 +1,32 @@
+import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
+import { DataProviderService } from '@ghostfolio/api/services/data-provider.service';
+import { AlphaVantageService } from '@ghostfolio/api/services/data-provider/alpha-vantage/alpha-vantage.service';
+import { GhostfolioScraperApiService } from '@ghostfolio/api/services/data-provider/ghostfolio-scraper-api/ghostfolio-scraper-api.service';
+import { RakutenRapidApiService } from '@ghostfolio/api/services/data-provider/rakuten-rapid-api/rakuten-rapid-api.service';
+import { YahooFinanceService } from '@ghostfolio/api/services/data-provider/yahoo-finance/yahoo-finance.service';
+import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
+import { ImpersonationService } from '@ghostfolio/api/services/impersonation.service';
+import { PrismaService } from '@ghostfolio/api/services/prisma.service';
+import { Module } from '@nestjs/common';
+
+import { RedisCacheModule } from '../redis-cache/redis-cache.module';
+import { AccountController } from './account.controller';
+import { AccountService } from './account.service';
+
+@Module({
+  imports: [RedisCacheModule],
+  controllers: [AccountController],
+  providers: [
+    AccountService,
+    AlphaVantageService,
+    ConfigurationService,
+    DataProviderService,
+    ExchangeRateDataService,
+    GhostfolioScraperApiService,
+    ImpersonationService,
+    PrismaService,
+    RakutenRapidApiService,
+    YahooFinanceService
+  ]
+})
+export class AccountModule {}
--- a/apps/api/src/app/account/account.service.ts
+++ b/apps/api/src/app/account/account.service.ts
@ -0,0 +1,113 @@
+import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
+import { PrismaService } from '@ghostfolio/api/services/prisma.service';
+import { Injectable } from '@nestjs/common';
+import { Account, Currency, Order, Prisma } from '@prisma/client';
+
+import { RedisCacheService } from '../redis-cache/redis-cache.service';
+import { CashDetails } from './interfaces/cash-details.interface';
+
+@Injectable()
+export class AccountService {
+  public constructor(
+    private exchangeRateDataService: ExchangeRateDataService,
+    private readonly redisCacheService: RedisCacheService,
+    private prisma: PrismaService
+  ) {}
+
+  public async account(
+    accountWhereUniqueInput: Prisma.AccountWhereUniqueInput
+  ): Promise<Account | null> {
+    return this.prisma.account.findUnique({
+      where: accountWhereUniqueInput
+    });
+  }
+
+  public async accountWithOrders(
+    accountWhereUniqueInput: Prisma.AccountWhereUniqueInput,
+    accountInclude: Prisma.AccountInclude
+  ): Promise<
+    Account & {
+      Order?: Order[];
+    }
+  > {
+    return this.prisma.account.findUnique({
+      include: accountInclude,
+      where: accountWhereUniqueInput
+    });
+  }
+
+  public async accounts(params: {
+    include?: Prisma.AccountInclude;
+    skip?: number;
+    take?: number;
+    cursor?: Prisma.AccountWhereUniqueInput;
+    where?: Prisma.AccountWhereInput;
+    orderBy?: Prisma.AccountOrderByInput;
+  }): Promise<Account[]> {
+    const { include, skip, take, cursor, where, orderBy } = params;
+
+    return this.prisma.account.findMany({
+      cursor,
+      include,
+      orderBy,
+      skip,
+      take,
+      where
+    });
+  }
+
+  public async createAccount(
+    data: Prisma.AccountCreateInput,
+    aUserId: string
+  ): Promise<Account> {
+    return this.prisma.account.create({
+      data
+    });
+  }
+
+  public async deleteAccount(
+    where: Prisma.AccountWhereUniqueInput,
+    aUserId: string
+  ): Promise<Account> {
+    this.redisCacheService.remove(`${aUserId}.portfolio`);
+
+    return this.prisma.account.delete({
+      where
+    });
+  }
+
+  public async getCashDetails(
+    aUserId: string,
+    aCurrency: Currency
+  ): Promise<CashDetails> {
+    let totalCashBalance = 0;
+
+    const accounts = await this.accounts({
+      where: { userId: aUserId }
+    });
+
+    accounts.forEach((account) => {
+      totalCashBalance += this.exchangeRateDataService.toCurrency(
+        account.balance,
+        account.currency,
+        aCurrency
+      );
+    });
+
+    return { accounts, balance: totalCashBalance };
+  }
+
+  public async updateAccount(
+    params: {
+      where: Prisma.AccountWhereUniqueInput;
+      data: Prisma.AccountUpdateInput;
+    },
+    aUserId: string
+  ): Promise<Account> {
+    const { data, where } = params;
+    return this.prisma.account.update({
+      data,
+      where
+    });
+  }
+}
--- a/apps/api/src/app/account/create-account.dto.ts
+++ b/apps/api/src/app/account/create-account.dto.ts
@ -0,0 +1,20 @@
+import { AccountType, Currency } from '@prisma/client';
+import { IsNumber, IsString, ValidateIf } from 'class-validator';
+
+export class CreateAccountDto {
+  @IsString()
+  accountType: AccountType;
+
+  @IsNumber()
+  balance: number;
+
+  @IsString()
+  currency: Currency;
+
+  @IsString()
+  name: string;
+
+  @IsString()
+  @ValidateIf((object, value) => value !== null)
+  platformId: string | null;
+}
--- a/apps/api/src/app/account/interfaces/cash-details.interface.ts
+++ b/apps/api/src/app/account/interfaces/cash-details.interface.ts
@ -0,0 +1,6 @@
+import { Account } from '@prisma/client';
+
+export interface CashDetails {
+  accounts: Account[];
+  balance: number;
+}
--- a/apps/api/src/app/account/update-account.dto.ts
+++ b/apps/api/src/app/account/update-account.dto.ts
@ -0,0 +1,23 @@
+import { AccountType, Currency } from '@prisma/client';
+import { IsNumber, IsString, ValidateIf } from 'class-validator';
+
+export class UpdateAccountDto {
+  @IsString()
+  accountType: AccountType;
+
+  @IsNumber()
+  balance: number;
+
+  @IsString()
+  currency: Currency;
+
+  @IsString()
+  id: string;
+
+  @IsString()
+  name: string;
+
+  @IsString()
+  @ValidateIf((object, value) => value !== null)
+  platformId: string | null;
+}
--- a/apps/api/src/app/admin/admin.controller.ts
+++ b/apps/api/src/app/admin/admin.controller.ts
@ -1,6 +1,11 @@
-import { RequestWithUser } from '@ghostfolio/api/app/interfaces/request-with-user.type';
 import { DataGatheringService } from '@ghostfolio/api/services/data-gathering.service';
-import { getPermissions, hasPermission, permissions } from '@ghostfolio/helper';
+import { AdminData } from '@ghostfolio/common/interfaces';
+import {
+  getPermissions,
+  hasPermission,
+  permissions
+} from '@ghostfolio/common/permissions';
+import { RequestWithUser } from '@ghostfolio/common/types';
 import {
  Controller,
  Get,
@ -14,7 +19,6 @@ import { AuthGuard } from '@nestjs/passport';
 import { StatusCodes, getReasonPhrase } from 'http-status-codes';

 import { AdminService } from './admin.service';
-import { AdminData } from './interfaces/admin-data.interface';

@Controller('admin')
 export class AdminController {
--- a/apps/api/src/app/admin/admin.service.ts
+++ b/apps/api/src/app/admin/admin.service.ts
@ -1,10 +1,9 @@
 import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
 import { PrismaService } from '@ghostfolio/api/services/prisma.service';
+import { AdminData } from '@ghostfolio/common/interfaces';
 import { Injectable } from '@nestjs/common';
 import { Currency } from '@prisma/client';

-import { AdminData } from './interfaces/admin-data.interface';
-
@Injectable()
 export class AdminService {
  public constructor(
@ -109,7 +108,7 @@ export class AdminService {
        createdAt: true,
        id: true
      },
-      take: 20,
+      take: 30,
      where: {
        NOT: {
          Analytics: null
--- a/apps/api/src/app/app.module.ts
+++ b/apps/api/src/app/app.module.ts
@ -1,5 +1,6 @@
 import { join } from 'path';

+import { AuthDeviceModule } from '@ghostfolio/api/app/auth-device/auth-device.module';
 import { Module } from '@nestjs/common';
 import { ConfigModule } from '@nestjs/config';
 import { ScheduleModule } from '@nestjs/schedule';
@ -16,15 +17,19 @@ import { YahooFinanceService } from '../services/data-provider/yahoo-finance/yah
 import { ExchangeRateDataService } from '../services/exchange-rate-data.service';
 import { PrismaService } from '../services/prisma.service';
 import { AccessModule } from './access/access.module';
+import { AccountModule } from './account/account.module';
 import { AdminModule } from './admin/admin.module';
 import { AppController } from './app.controller';
 import { AuthModule } from './auth/auth.module';
 import { CacheModule } from './cache/cache.module';
 import { ExperimentalModule } from './experimental/experimental.module';
+import { ExportModule } from './export/export.module';
+import { ImportModule } from './import/import.module';
 import { InfoModule } from './info/info.module';
 import { OrderModule } from './order/order.module';
 import { PortfolioModule } from './portfolio/portfolio.module';
 import { RedisCacheModule } from './redis-cache/redis-cache.module';
+import { SubscriptionModule } from './subscription/subscription.module';
 import { SymbolModule } from './symbol/symbol.module';
 import { UserModule } from './user/user.module';

@ -32,10 +37,14 @@ import { UserModule } from './user/user.module';
  imports: [
    AdminModule,
    AccessModule,
+    AccountModule,
+    AuthDeviceModule,
    AuthModule,
    CacheModule,
    ConfigModule.forRoot(),
    ExperimentalModule,
+    ExportModule,
+    ImportModule,
    InfoModule,
    OrderModule,
    PortfolioModule,
@ -55,6 +64,7 @@ import { UserModule } from './user/user.module';
      rootPath: join(__dirname, '..', 'client'),
      exclude: ['/api*']
    }),
+    SubscriptionModule,
    SymbolModule,
    UserModule
  ],
--- a/apps/api/src/app/auth-device/auth-device.controller.ts
+++ b/apps/api/src/app/auth-device/auth-device.controller.ts
@ -0,0 +1,44 @@
+import { AuthDeviceService } from '@ghostfolio/api/app/auth-device/auth-device.service';
+import {
+  getPermissions,
+  hasPermission,
+  permissions
+} from '@ghostfolio/common/permissions';
+import { RequestWithUser } from '@ghostfolio/common/types';
+import {
+  Controller,
+  Delete,
+  HttpException,
+  Inject,
+  Param,
+  UseGuards
+} from '@nestjs/common';
+import { REQUEST } from '@nestjs/core';
+import { AuthGuard } from '@nestjs/passport';
+import { StatusCodes, getReasonPhrase } from 'http-status-codes';
+
+@Controller('auth-device')
+export class AuthDeviceController {
+  public constructor(
+    private readonly authDeviceService: AuthDeviceService,
+    @Inject(REQUEST) private readonly request: RequestWithUser
+  ) {}
+
+  @Delete(':id')
+  @UseGuards(AuthGuard('jwt'))
+  public async deleteAuthDevice(@Param('id') id: string): Promise<void> {
+    if (
+      !hasPermission(
+        getPermissions(this.request.user.role),
+        permissions.deleteAuthDevice
+      )
+    ) {
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.FORBIDDEN),
+        StatusCodes.FORBIDDEN
+      );
+    }
+
+    await this.authDeviceService.deleteAuthDevice({ id });
+  }
+}
--- a/apps/api/src/app/auth-device/auth-device.dto.ts
+++ b/apps/api/src/app/auth-device/auth-device.dto.ts
@ -0,0 +1,4 @@
+export interface AuthDeviceDto {
+  createdAt: string;
+  id: string;
+}
--- a/apps/api/src/app/auth-device/auth-device.module.ts
+++ b/apps/api/src/app/auth-device/auth-device.module.ts
@ -0,0 +1,18 @@
+import { AuthDeviceController } from '@ghostfolio/api/app/auth-device/auth-device.controller';
+import { AuthDeviceService } from '@ghostfolio/api/app/auth-device/auth-device.service';
+import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
+import { PrismaService } from '@ghostfolio/api/services/prisma.service';
+import { Module } from '@nestjs/common';
+import { JwtModule } from '@nestjs/jwt';
+
+@Module({
+  controllers: [AuthDeviceController],
+  imports: [
+    JwtModule.register({
+      secret: process.env.JWT_SECRET_KEY,
+      signOptions: { expiresIn: '180 days' }
+    })
+  ],
+  providers: [AuthDeviceService, ConfigurationService, PrismaService]
+})
+export class AuthDeviceModule {}
--- a/apps/api/src/app/auth-device/auth-device.service.ts
+++ b/apps/api/src/app/auth-device/auth-device.service.ts
@ -0,0 +1,65 @@
+import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
+import { PrismaService } from '@ghostfolio/api/services/prisma.service';
+import { Injectable } from '@nestjs/common';
+import { AuthDevice, Prisma } from '@prisma/client';
+
+@Injectable()
+export class AuthDeviceService {
+  public constructor(
+    private readonly configurationService: ConfigurationService,
+    private prisma: PrismaService
+  ) {}
+
+  public async authDevice(
+    where: Prisma.AuthDeviceWhereUniqueInput
+  ): Promise<AuthDevice | null> {
+    return this.prisma.authDevice.findUnique({
+      where
+    });
+  }
+
+  public async authDevices(params: {
+    skip?: number;
+    take?: number;
+    cursor?: Prisma.AuthDeviceWhereUniqueInput;
+    where?: Prisma.AuthDeviceWhereInput;
+    orderBy?: Prisma.AuthDeviceOrderByInput;
+  }): Promise<AuthDevice[]> {
+    const { skip, take, cursor, where, orderBy } = params;
+    return this.prisma.authDevice.findMany({
+      skip,
+      take,
+      cursor,
+      where,
+      orderBy
+    });
+  }
+
+  public async createAuthDevice(
+    data: Prisma.AuthDeviceCreateInput
+  ): Promise<AuthDevice> {
+    return this.prisma.authDevice.create({
+      data
+    });
+  }
+
+  public async updateAuthDevice(params: {
+    data: Prisma.AuthDeviceUpdateInput;
+    where: Prisma.AuthDeviceWhereUniqueInput;
+  }): Promise<AuthDevice> {
+    const { data, where } = params;
+
+    return this.prisma.authDevice.update({
+      data,
+      where
+    });
+  }
+
+  public async deleteAuthDevice(
+    where: Prisma.AuthDeviceWhereUniqueInput
+  ): Promise<AuthDevice> {
+    return this.prisma.authDevice.delete({
+      where
+    });
+  }
+}
--- a/apps/api/src/app/auth/auth.controller.ts
+++ b/apps/api/src/app/auth/auth.controller.ts
@ -1,9 +1,12 @@
+import { WebAuthService } from '@ghostfolio/api/app/auth/web-auth.service';
 import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
 import {
+  Body,
  Controller,
  Get,
  HttpException,
  Param,
+  Post,
  Req,
  Res,
  UseGuards
@ -12,12 +15,17 @@ import { AuthGuard } from '@nestjs/passport';
 import { StatusCodes, getReasonPhrase } from 'http-status-codes';

 import { AuthService } from './auth.service';
+import {
+  AssertionCredentialJSON,
+  AttestationCredentialJSON
+} from './interfaces/simplewebauthn';

@Controller('auth')
 export class AuthController {
  public constructor(
    private readonly authService: AuthService,
-    private readonly configurationService: ConfigurationService
+    private readonly configurationService: ConfigurationService,
+    private readonly webAuthService: WebAuthService
  ) {}

  @Get('anonymous/:accessToken')
@ -53,4 +61,44 @@ export class AuthController {
      res.redirect(`${this.configurationService.get('ROOT_URL')}/auth`);
    }
  }
+
+  @Get('webauthn/generate-attestation-options')
+  @UseGuards(AuthGuard('jwt'))
+  public async generateAttestationOptions() {
+    return this.webAuthService.generateAttestationOptions();
+  }
+
+  @Post('webauthn/verify-attestation')
+  @UseGuards(AuthGuard('jwt'))
+  public async verifyAttestation(
+    @Body() body: { deviceName: string; credential: AttestationCredentialJSON }
+  ) {
+    return this.webAuthService.verifyAttestation(
+      body.deviceName,
+      body.credential
+    );
+  }
+
+  @Post('webauthn/generate-assertion-options')
+  public async generateAssertionOptions(@Body() body: { deviceId: string }) {
+    return this.webAuthService.generateAssertionOptions(body.deviceId);
+  }
+
+  @Post('webauthn/verify-assertion')
+  public async verifyAssertion(
+    @Body() body: { deviceId: string; credential: AssertionCredentialJSON }
+  ) {
+    try {
+      const authToken = await this.webAuthService.verifyAssertion(
+        body.deviceId,
+        body.credential
+      );
+      return { authToken };
+    } catch {
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.FORBIDDEN),
+        StatusCodes.FORBIDDEN
+      );
+    }
+  }
 }
--- a/apps/api/src/app/auth/auth.module.ts
+++ b/apps/api/src/app/auth/auth.module.ts
@ -1,3 +1,5 @@
+import { AuthDeviceService } from '@ghostfolio/api/app/auth-device/auth-device.service';
+import { WebAuthService } from '@ghostfolio/api/app/auth/web-auth.service';
 import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
 import { PrismaService } from '@ghostfolio/api/services/prisma.service';
 import { Module } from '@nestjs/common';
@ -18,12 +20,14 @@ import { JwtStrategy } from './jwt.strategy';
    })
  ],
  providers: [
+    AuthDeviceService,
    AuthService,
    ConfigurationService,
    GoogleStrategy,
    JwtStrategy,
    PrismaService,
-    UserService
+    UserService,
+    WebAuthService
  ]
 })
 export class AuthModule {}
--- a/apps/api/src/app/auth/interfaces/interfaces.ts
+++ b/apps/api/src/app/auth/interfaces/interfaces.ts
@ -1,5 +1,10 @@
+import { AuthDeviceDto } from '@ghostfolio/api/app/auth-device/auth-device.dto';
 import { Provider } from '@prisma/client';

+export interface AuthDeviceDialogParams {
+  authDevice: AuthDeviceDto;
+}
+
 export interface ValidateOAuthLoginParams {
  provider: Provider;
  thirdPartyId: string;
--- a/apps/api/src/app/auth/interfaces/simplewebauthn.ts
+++ b/apps/api/src/app/auth/interfaces/simplewebauthn.ts
@ -0,0 +1,226 @@
+export interface AuthenticatorAssertionResponse extends AuthenticatorResponse {
+  readonly authenticatorData: ArrayBuffer;
+  readonly signature: ArrayBuffer;
+  readonly userHandle: ArrayBuffer | null;
+}
+export interface AuthenticatorAttestationResponse
+  extends AuthenticatorResponse {
+  readonly attestationObject: ArrayBuffer;
+}
+export interface AuthenticationExtensionsClientInputs {
+  appid?: string;
+  appidExclude?: string;
+  credProps?: boolean;
+  uvm?: boolean;
+}
+export interface AuthenticationExtensionsClientOutputs {
+  appid?: boolean;
+  credProps?: CredentialPropertiesOutput;
+  uvm?: UvmEntries;
+}
+export interface AuthenticatorSelectionCriteria {
+  authenticatorAttachment?: AuthenticatorAttachment;
+  requireResidentKey?: boolean;
+  residentKey?: ResidentKeyRequirement;
+  userVerification?: UserVerificationRequirement;
+}
+export interface PublicKeyCredential extends Credential {
+  readonly rawId: ArrayBuffer;
+  readonly response: AuthenticatorResponse;
+  getClientExtensionResults(): AuthenticationExtensionsClientOutputs;
+}
+export interface PublicKeyCredentialCreationOptions {
+  attestation?: AttestationConveyancePreference;
+  authenticatorSelection?: AuthenticatorSelectionCriteria;
+  challenge: BufferSource;
+  excludeCredentials?: PublicKeyCredentialDescriptor[];
+  extensions?: AuthenticationExtensionsClientInputs;
+  pubKeyCredParams: PublicKeyCredentialParameters[];
+  rp: PublicKeyCredentialRpEntity;
+  timeout?: number;
+  user: PublicKeyCredentialUserEntity;
+}
+export interface PublicKeyCredentialDescriptor {
+  id: BufferSource;
+  transports?: AuthenticatorTransport[];
+  type: PublicKeyCredentialType;
+}
+export interface PublicKeyCredentialParameters {
+  alg: COSEAlgorithmIdentifier;
+  type: PublicKeyCredentialType;
+}
+export interface PublicKeyCredentialRequestOptions {
+  allowCredentials?: PublicKeyCredentialDescriptor[];
+  challenge: BufferSource;
+  extensions?: AuthenticationExtensionsClientInputs;
+  rpId?: string;
+  timeout?: number;
+  userVerification?: UserVerificationRequirement;
+}
+export interface PublicKeyCredentialUserEntity
+  extends PublicKeyCredentialEntity {
+  displayName: string;
+  id: BufferSource;
+}
+export interface AuthenticatorResponse {
+  readonly clientDataJSON: ArrayBuffer;
+}
+export interface CredentialPropertiesOutput {
+  rk?: boolean;
+}
+export interface Credential {
+  readonly id: string;
+  readonly type: string;
+}
+export interface PublicKeyCredentialRpEntity extends PublicKeyCredentialEntity {
+  id?: string;
+}
+export interface PublicKeyCredentialEntity {
+  name: string;
+}
+export declare type AttestationConveyancePreference =
+  | 'direct'
+  | 'enterprise'
+  | 'indirect'
+  | 'none';
+export declare type AuthenticatorTransport = 'ble' | 'internal' | 'nfc' | 'usb';
+export declare type COSEAlgorithmIdentifier = number;
+export declare type UserVerificationRequirement =
+  | 'discouraged'
+  | 'preferred'
+  | 'required';
+export declare type UvmEntries = UvmEntry[];
+export declare type AuthenticatorAttachment = 'cross-platform' | 'platform';
+export declare type ResidentKeyRequirement =
+  | 'discouraged'
+  | 'preferred'
+  | 'required';
+export declare type BufferSource = ArrayBufferView | ArrayBuffer;
+export declare type PublicKeyCredentialType = 'public-key';
+export declare type UvmEntry = number[];
+
+export interface PublicKeyCredentialCreationOptionsJSON
+  extends Omit<
+    PublicKeyCredentialCreationOptions,
+    'challenge' | 'user' | 'excludeCredentials'
+  > {
+  user: PublicKeyCredentialUserEntityJSON;
+  challenge: Base64URLString;
+  excludeCredentials: PublicKeyCredentialDescriptorJSON[];
+  extensions?: AuthenticationExtensionsClientInputs;
+}
+/**
+ * A variant of PublicKeyCredentialRequestOptions suitable for JSON transmission to the browser to
+ * (eventually) get passed into navigator.credentials.get(...) in the browser.
+ */
+export interface PublicKeyCredentialRequestOptionsJSON
+  extends Omit<
+    PublicKeyCredentialRequestOptions,
+    'challenge' | 'allowCredentials'
+  > {
+  challenge: Base64URLString;
+  allowCredentials?: PublicKeyCredentialDescriptorJSON[];
+  extensions?: AuthenticationExtensionsClientInputs;
+}
+export interface PublicKeyCredentialDescriptorJSON
+  extends Omit<PublicKeyCredentialDescriptor, 'id'> {
+  id: Base64URLString;
+}
+export interface PublicKeyCredentialUserEntityJSON
+  extends Omit<PublicKeyCredentialUserEntity, 'id'> {
+  id: string;
+}
+/**
+ * The value returned from navigator.credentials.create()
+ */
+export interface AttestationCredential extends PublicKeyCredential {
+  response: AuthenticatorAttestationResponseFuture;
+}
+/**
+ * A slightly-modified AttestationCredential to simplify working with ArrayBuffers that
+ * are Base64URL-encoded in the browser so that they can be sent as JSON to the server.
+ */
+export interface AttestationCredentialJSON
+  extends Omit<
+    AttestationCredential,
+    'response' | 'rawId' | 'getClientExtensionResults'
+  > {
+  rawId: Base64URLString;
+  response: AuthenticatorAttestationResponseJSON;
+  clientExtensionResults: AuthenticationExtensionsClientOutputs;
+  transports?: AuthenticatorTransport[];
+}
+/**
+ * The value returned from navigator.credentials.get()
+ */
+export interface AssertionCredential extends PublicKeyCredential {
+  response: AuthenticatorAssertionResponse;
+}
+/**
+ * A slightly-modified AssertionCredential to simplify working with ArrayBuffers that
+ * are Base64URL-encoded in the browser so that they can be sent as JSON to the server.
+ */
+export interface AssertionCredentialJSON
+  extends Omit<
+    AssertionCredential,
+    'response' | 'rawId' | 'getClientExtensionResults'
+  > {
+  rawId: Base64URLString;
+  response: AuthenticatorAssertionResponseJSON;
+  clientExtensionResults: AuthenticationExtensionsClientOutputs;
+}
+/**
+ * A slightly-modified AuthenticatorAttestationResponse to simplify working with ArrayBuffers that
+ * are Base64URL-encoded in the browser so that they can be sent as JSON to the server.
+ */
+export interface AuthenticatorAttestationResponseJSON
+  extends Omit<
+    AuthenticatorAttestationResponseFuture,
+    'clientDataJSON' | 'attestationObject'
+  > {
+  clientDataJSON: Base64URLString;
+  attestationObject: Base64URLString;
+}
+/**
+ * A slightly-modified AuthenticatorAssertionResponse to simplify working with ArrayBuffers that
+ * are Base64URL-encoded in the browser so that they can be sent as JSON to the server.
+ */
+export interface AuthenticatorAssertionResponseJSON
+  extends Omit<
+    AuthenticatorAssertionResponse,
+    'authenticatorData' | 'clientDataJSON' | 'signature' | 'userHandle'
+  > {
+  authenticatorData: Base64URLString;
+  clientDataJSON: Base64URLString;
+  signature: Base64URLString;
+  userHandle?: string;
+}
+/**
+ * A WebAuthn-compatible device and the information needed to verify assertions by it
+ */
+export declare type AuthenticatorDevice = {
+  credentialPublicKey: Buffer;
+  credentialID: Buffer;
+  counter: number;
+  transports?: AuthenticatorTransport[];
+};
+/**
+ * An attempt to communicate that this isn't just any string, but a Base64URL-encoded string
+ */
+export declare type Base64URLString = string;
+/**
+ * AuthenticatorAttestationResponse in TypeScript's DOM lib is outdated (up through v3.9.7).
+ * Maintain an augmented version here so we can implement additional properties as the WebAuthn
+ * spec evolves.
+ *
+ * See https://www.w3.org/TR/webauthn-2/#iface-authenticatorattestationresponse
+ *
+ * Properties marked optional are not supported in all browsers.
+ */
+export interface AuthenticatorAttestationResponseFuture
+  extends AuthenticatorAttestationResponse {
+  getTransports?: () => AuthenticatorTransport[];
+  getAuthenticatorData?: () => ArrayBuffer;
+  getPublicKey?: () => ArrayBuffer;
+  getPublicKeyAlgorithm?: () => COSEAlgorithmIdentifier[];
+}
--- a/apps/api/src/app/auth/web-auth.service.ts
+++ b/apps/api/src/app/auth/web-auth.service.ts
@ -0,0 +1,216 @@
+import { AuthDeviceDto } from '@ghostfolio/api/app/auth-device/auth-device.dto';
+import { AuthDeviceService } from '@ghostfolio/api/app/auth-device/auth-device.service';
+import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
+import { RequestWithUser } from '@ghostfolio/common/types';
+import {
+  Inject,
+  Injectable,
+  InternalServerErrorException
+} from '@nestjs/common';
+import { REQUEST } from '@nestjs/core';
+import { JwtService } from '@nestjs/jwt';
+import {
+  GenerateAssertionOptionsOpts,
+  GenerateAttestationOptionsOpts,
+  VerifiedAssertion,
+  VerifiedAttestation,
+  VerifyAssertionResponseOpts,
+  VerifyAttestationResponseOpts,
+  generateAssertionOptions,
+  generateAttestationOptions,
+  verifyAssertionResponse,
+  verifyAttestationResponse
+} from '@simplewebauthn/server';
+
+import { UserService } from '../user/user.service';
+import {
+  AssertionCredentialJSON,
+  AttestationCredentialJSON
+} from './interfaces/simplewebauthn';
+
+@Injectable()
+export class WebAuthService {
+  public constructor(
+    private readonly configurationService: ConfigurationService,
+    private readonly deviceService: AuthDeviceService,
+    private readonly jwtService: JwtService,
+    private readonly userService: UserService,
+    @Inject(REQUEST) private readonly request: RequestWithUser
+  ) {}
+
+  get rpID() {
+    return this.configurationService.get('WEB_AUTH_RP_ID');
+  }
+
+  get expectedOrigin() {
+    return this.configurationService.get('ROOT_URL');
+  }
+
+  public async generateAttestationOptions() {
+    const user = this.request.user;
+
+    const opts: GenerateAttestationOptionsOpts = {
+      rpName: 'Ghostfolio',
+      rpID: this.rpID,
+      userID: user.id,
+      userName: user.alias,
+      timeout: 60000,
+      attestationType: 'indirect',
+      authenticatorSelection: {
+        authenticatorAttachment: 'platform',
+        requireResidentKey: false,
+        userVerification: 'required'
+      }
+    };
+
+    const options = generateAttestationOptions(opts);
+
+    await this.userService.updateUser({
+      data: {
+        authChallenge: options.challenge
+      },
+      where: {
+        id: user.id
+      }
+    });
+
+    return options;
+  }
+
+  public async verifyAttestation(
+    deviceName: string,
+    credential: AttestationCredentialJSON
+  ): Promise<AuthDeviceDto> {
+    const user = this.request.user;
+    const expectedChallenge = user.authChallenge;
+
+    let verification: VerifiedAttestation;
+    try {
+      const opts: VerifyAttestationResponseOpts = {
+        credential,
+        expectedChallenge,
+        expectedOrigin: this.expectedOrigin,
+        expectedRPID: this.rpID
+      };
+      verification = await verifyAttestationResponse(opts);
+    } catch (error) {
+      console.error(error);
+      throw new InternalServerErrorException(error.message);
+    }
+
+    const { verified, attestationInfo } = verification;
+
+    const devices = await this.deviceService.authDevices({
+      where: { userId: user.id }
+    });
+    if (verified && attestationInfo) {
+      const { credentialPublicKey, credentialID, counter } = attestationInfo;
+
+      let existingDevice = devices.find(
+        (device) => device.credentialId === credentialID
+      );
+
+      if (!existingDevice) {
+        /**
+         * Add the returned device to the user's list of devices
+         */
+        existingDevice = await this.deviceService.createAuthDevice({
+          credentialPublicKey,
+          credentialId: credentialID,
+          counter,
+          User: { connect: { id: user.id } }
+        });
+      }
+
+      return {
+        createdAt: existingDevice.createdAt.toISOString(),
+        id: existingDevice.id
+      };
+    }
+
+    throw new InternalServerErrorException('An unknown error occurred');
+  }
+
+  public async generateAssertionOptions(deviceId: string) {
+    const device = await this.deviceService.authDevice({ id: deviceId });
+
+    if (!device) {
+      throw new Error('Device not found');
+    }
+
+    const opts: GenerateAssertionOptionsOpts = {
+      timeout: 60000,
+      allowCredentials: [
+        {
+          id: device.credentialId,
+          type: 'public-key',
+          transports: ['internal']
+        }
+      ],
+      userVerification: 'preferred',
+      rpID: this.rpID
+    };
+
+    const options = generateAssertionOptions(opts);
+
+    await this.userService.updateUser({
+      data: {
+        authChallenge: options.challenge
+      },
+      where: {
+        id: device.userId
+      }
+    });
+
+    return options;
+  }
+
+  public async verifyAssertion(
+    deviceId: string,
+    credential: AssertionCredentialJSON
+  ) {
+    const device = await this.deviceService.authDevice({ id: deviceId });
+
+    if (!device) {
+      throw new Error('Device not found');
+    }
+
+    const user = await this.userService.user({ id: device.userId });
+
+    let verification: VerifiedAssertion;
+    try {
+      const opts: VerifyAssertionResponseOpts = {
+        credential,
+        expectedChallenge: `${user.authChallenge}`,
+        expectedOrigin: this.expectedOrigin,
+        expectedRPID: this.rpID,
+        authenticator: {
+          credentialID: device.credentialId,
+          credentialPublicKey: device.credentialPublicKey,
+          counter: device.counter
+        }
+      };
+      verification = verifyAssertionResponse(opts);
+    } catch (error) {
+      console.error(error);
+      throw new InternalServerErrorException({ error: error.message });
+    }
+
+    const { verified, assertionInfo } = verification;
+
+    if (verified) {
+      device.counter = assertionInfo.newCounter;
+
+      await this.deviceService.updateAuthDevice({
+        data: device,
+        where: { id: device.id }
+      });
+
+      return this.jwtService.sign({
+        id: user.id
+      });
+    }
+
+    throw new Error();
+  }
+}
--- a/apps/api/src/app/cache/cache.controller.ts
+++ b/apps/api/src/app/cache/cache.controller.ts
@ -1,5 +1,5 @@
-import { RequestWithUser } from '@ghostfolio/api/app/interfaces/request-with-user.type';
-import { Controller, Inject, Param, Post, UseGuards } from '@nestjs/common';
+import { RequestWithUser } from '@ghostfolio/common/types';
+import { Controller, Inject, Post, UseGuards } from '@nestjs/common';
 import { REQUEST } from '@nestjs/core';
 import { AuthGuard } from '@nestjs/passport';

--- a/apps/api/src/app/experimental/experimental.controller.ts
+++ b/apps/api/src/app/experimental/experimental.controller.ts
@ -1,9 +1,6 @@
-import { RequestWithUser } from '@ghostfolio/api/app/interfaces/request-with-user.type';
-import {
-  baseCurrency,
-  benchmarks,
-  isApiTokenAuthorized
-} from '@ghostfolio/helper';
+import { baseCurrency, benchmarks } from '@ghostfolio/common/config';
+import { isApiTokenAuthorized } from '@ghostfolio/common/permissions';
+import { RequestWithUser } from '@ghostfolio/common/types';
 import {
  Body,
  Controller,
@ -40,7 +37,9 @@ export class ExperimentalController {
      );
    }

-    return benchmarks;
+    return benchmarks.map(({ symbol }) => {
+      return symbol;
+    });
  }

  @Get('benchmarks/:symbol')
--- a/apps/api/src/app/experimental/experimental.module.ts
+++ b/apps/api/src/app/experimental/experimental.module.ts
@ -1,3 +1,5 @@
+import { AccountService } from '@ghostfolio/api/app/account/account.service';
+import { RedisCacheModule } from '@ghostfolio/api/app/redis-cache/redis-cache.module';
 import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
 import { DataProviderService } from '@ghostfolio/api/services/data-provider.service';
 import { AlphaVantageService } from '@ghostfolio/api/services/data-provider/alpha-vantage/alpha-vantage.service';
@ -13,9 +15,10 @@ import { ExperimentalController } from './experimental.controller';
 import { ExperimentalService } from './experimental.service';

@Module({
-  imports: [],
+  imports: [RedisCacheModule],
  controllers: [ExperimentalController],
  providers: [
+    AccountService,
    AlphaVantageService,
    ConfigurationService,
    DataProviderService,
--- a/apps/api/src/app/experimental/experimental.service.ts
+++ b/apps/api/src/app/experimental/experimental.service.ts
@ -1,19 +1,21 @@
+import { AccountService } from '@ghostfolio/api/app/account/account.service';
 import { Portfolio } from '@ghostfolio/api/models/portfolio';
 import { DataProviderService } from '@ghostfolio/api/services/data-provider.service';
 import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
 import { PrismaService } from '@ghostfolio/api/services/prisma.service';
 import { RulesService } from '@ghostfolio/api/services/rules.service';
+import { OrderWithAccount } from '@ghostfolio/common/types';
 import { Injectable } from '@nestjs/common';
 import { Currency, Type } from '@prisma/client';
 import { parseISO } from 'date-fns';

-import { OrderWithPlatform } from '../order/interfaces/order-with-platform.type';
 import { CreateOrderDto } from './create-order.dto';
 import { Data } from './interfaces/data.interface';

@Injectable()
 export class ExperimentalService {
  public constructor(
+    private readonly accountService: AccountService,
    private readonly dataProviderService: DataProviderService,
    private readonly exchangeRateDataService: ExchangeRateDataService,
    private prisma: PrismaService,
@ -33,7 +35,7 @@ export class ExperimentalService {
    aDate: Date,
    aBaseCurrency: Currency
  ): Promise<Data> {
-    const ordersWithPlatform: OrderWithPlatform[] = aOrders.map((order) => {
+    const ordersWithPlatform: OrderWithAccount[] = aOrders.map((order) => {
      return {
        ...order,
        accountId: undefined,
@ -44,6 +46,7 @@ export class ExperimentalService {
        fee: 0,
        id: undefined,
        platformId: undefined,
+        symbolProfileId: undefined,
        type: Type.BUY,
        updatedAt: undefined,
        userId: undefined
@ -51,6 +54,7 @@ export class ExperimentalService {
    });

    const portfolio = new Portfolio(
+      this.accountService,
      this.dataProviderService,
      this.exchangeRateDataService,
      this.rulesService
--- a/apps/api/src/app/export/export.controller.ts
+++ b/apps/api/src/app/export/export.controller.ts
@ -0,0 +1,23 @@
+import { Export } from '@ghostfolio/common/interfaces';
+import { RequestWithUser } from '@ghostfolio/common/types';
+import { Controller, Get, Inject, UseGuards } from '@nestjs/common';
+import { REQUEST } from '@nestjs/core';
+import { AuthGuard } from '@nestjs/passport';
+
+import { ExportService } from './export.service';
+
+@Controller('export')
+export class ExportController {
+  public constructor(
+    private readonly exportService: ExportService,
+    @Inject(REQUEST) private readonly request: RequestWithUser
+  ) {}
+
+  @Get()
+  @UseGuards(AuthGuard('jwt'))
+  public async export(): Promise<Export> {
+    return await this.exportService.export({
+      userId: this.request.user.id
+    });
+  }
+}
--- a/apps/api/src/app/export/export.module.ts
+++ b/apps/api/src/app/export/export.module.ts
@ -0,0 +1,32 @@
+import { CacheService } from '@ghostfolio/api/app/cache/cache.service';
+import { RedisCacheModule } from '@ghostfolio/api/app/redis-cache/redis-cache.module';
+import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
+import { DataGatheringService } from '@ghostfolio/api/services/data-gathering.service';
+import { DataProviderService } from '@ghostfolio/api/services/data-provider.service';
+import { AlphaVantageService } from '@ghostfolio/api/services/data-provider/alpha-vantage/alpha-vantage.service';
+import { GhostfolioScraperApiService } from '@ghostfolio/api/services/data-provider/ghostfolio-scraper-api/ghostfolio-scraper-api.service';
+import { RakutenRapidApiService } from '@ghostfolio/api/services/data-provider/rakuten-rapid-api/rakuten-rapid-api.service';
+import { YahooFinanceService } from '@ghostfolio/api/services/data-provider/yahoo-finance/yahoo-finance.service';
+import { PrismaService } from '@ghostfolio/api/services/prisma.service';
+import { Module } from '@nestjs/common';
+
+import { ExportController } from './export.controller';
+import { ExportService } from './export.service';
+
+@Module({
+  imports: [RedisCacheModule],
+  controllers: [ExportController],
+  providers: [
+    AlphaVantageService,
+    CacheService,
+    ConfigurationService,
+    DataGatheringService,
+    DataProviderService,
+    ExportService,
+    GhostfolioScraperApiService,
+    PrismaService,
+    RakutenRapidApiService,
+    YahooFinanceService
+  ]
+})
+export class ExportModule {}
--- a/apps/api/src/app/export/export.service.ts
+++ b/apps/api/src/app/export/export.service.ts
@ -0,0 +1,31 @@
+import { environment } from '@ghostfolio/api/environments/environment';
+import { PrismaService } from '@ghostfolio/api/services/prisma.service';
+import { Export } from '@ghostfolio/common/interfaces';
+import { Injectable } from '@nestjs/common';
+
+@Injectable()
+export class ExportService {
+  public constructor(private prisma: PrismaService) {}
+
+  public async export({ userId }: { userId: string }): Promise<Export> {
+    const orders = await this.prisma.order.findMany({
+      orderBy: { date: 'desc' },
+      select: {
+        currency: true,
+        dataSource: true,
+        date: true,
+        fee: true,
+        quantity: true,
+        symbol: true,
+        type: true,
+        unitPrice: true
+      },
+      where: { userId }
+    });
+
+    return {
+      meta: { date: new Date().toISOString(), version: environment.version },
+      orders
+    };
+  }
+}
--- a/apps/api/src/app/import/import-data.dto.ts
+++ b/apps/api/src/app/import/import-data.dto.ts
@ -0,0 +1,7 @@
+import { Order } from '@prisma/client';
+import { IsArray } from 'class-validator';
+
+export class ImportDataDto {
+  @IsArray()
+  orders: Partial<Order>[];
+}
--- a/apps/api/src/app/import/import.controller.ts
+++ b/apps/api/src/app/import/import.controller.ts
@ -0,0 +1,50 @@
+import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
+import { RequestWithUser } from '@ghostfolio/common/types';
+import {
+  Body,
+  Controller,
+  HttpException,
+  Inject,
+  Post,
+  UseGuards
+} from '@nestjs/common';
+import { REQUEST } from '@nestjs/core';
+import { AuthGuard } from '@nestjs/passport';
+import { StatusCodes, getReasonPhrase } from 'http-status-codes';
+
+import { ImportDataDto } from './import-data.dto';
+import { ImportService } from './import.service';
+
+@Controller('import')
+export class ImportController {
+  public constructor(
+    private readonly configurationService: ConfigurationService,
+    private readonly importService: ImportService,
+    @Inject(REQUEST) private readonly request: RequestWithUser
+  ) {}
+
+  @Post()
+  @UseGuards(AuthGuard('jwt'))
+  public async import(@Body() importData: ImportDataDto): Promise<void> {
+    if (!this.configurationService.get('ENABLE_FEATURE_IMPORT')) {
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.FORBIDDEN),
+        StatusCodes.FORBIDDEN
+      );
+    }
+
+    try {
+      return await this.importService.import({
+        orders: importData.orders,
+        userId: this.request.user.id
+      });
+    } catch (error) {
+      console.error(error);
+
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.BAD_REQUEST),
+        StatusCodes.BAD_REQUEST
+      );
+    }
+  }
+}
--- a/apps/api/src/app/import/import.module.ts
+++ b/apps/api/src/app/import/import.module.ts
@ -0,0 +1,34 @@
+import { CacheService } from '@ghostfolio/api/app/cache/cache.service';
+import { OrderService } from '@ghostfolio/api/app/order/order.service';
+import { RedisCacheModule } from '@ghostfolio/api/app/redis-cache/redis-cache.module';
+import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
+import { DataGatheringService } from '@ghostfolio/api/services/data-gathering.service';
+import { DataProviderService } from '@ghostfolio/api/services/data-provider.service';
+import { AlphaVantageService } from '@ghostfolio/api/services/data-provider/alpha-vantage/alpha-vantage.service';
+import { GhostfolioScraperApiService } from '@ghostfolio/api/services/data-provider/ghostfolio-scraper-api/ghostfolio-scraper-api.service';
+import { RakutenRapidApiService } from '@ghostfolio/api/services/data-provider/rakuten-rapid-api/rakuten-rapid-api.service';
+import { YahooFinanceService } from '@ghostfolio/api/services/data-provider/yahoo-finance/yahoo-finance.service';
+import { PrismaService } from '@ghostfolio/api/services/prisma.service';
+import { Module } from '@nestjs/common';
+
+import { ImportController } from './import.controller';
+import { ImportService } from './import.service';
+
+@Module({
+  imports: [RedisCacheModule],
+  controllers: [ImportController],
+  providers: [
+    AlphaVantageService,
+    CacheService,
+    ConfigurationService,
+    DataGatheringService,
+    DataProviderService,
+    GhostfolioScraperApiService,
+    ImportService,
+    OrderService,
+    PrismaService,
+    RakutenRapidApiService,
+    YahooFinanceService
+  ]
+})
+export class ImportModule {}
--- a/apps/api/src/app/import/import.service.ts
+++ b/apps/api/src/app/import/import.service.ts
@ -0,0 +1,43 @@
+import { OrderService } from '@ghostfolio/api/app/order/order.service';
+import { Injectable } from '@nestjs/common';
+import { Order } from '@prisma/client';
+import { parseISO } from 'date-fns';
+
+@Injectable()
+export class ImportService {
+  public constructor(private readonly orderService: OrderService) {}
+
+  public async import({
+    orders,
+    userId
+  }: {
+    orders: Partial<Order>[];
+    userId: string;
+  }): Promise<void> {
+    for (const {
+      currency,
+      dataSource,
+      date,
+      fee,
+      quantity,
+      symbol,
+      type,
+      unitPrice
+    } of orders) {
+      await this.orderService.createOrder(
+        {
+          currency,
+          dataSource,
+          fee,
+          quantity,
+          symbol,
+          type,
+          unitPrice,
+          date: parseISO(<string>(<unknown>date)),
+          User: { connect: { id: userId } }
+        },
+        userId
+      );
+    }
+  }
+}
--- a/apps/api/src/app/info/info.controller.ts
+++ b/apps/api/src/app/info/info.controller.ts
@ -1,7 +1,7 @@
+import { InfoItem } from '@ghostfolio/common/interfaces';
 import { Controller, Get } from '@nestjs/common';

 import { InfoService } from './info.service';
-import { InfoItem } from './interfaces/info-item.interface';

@Controller('info')
 export class InfoController {
--- a/apps/api/src/app/info/info.service.ts
+++ b/apps/api/src/app/info/info.service.ts
@ -1,11 +1,13 @@
 import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
 import { PrismaService } from '@ghostfolio/api/services/prisma.service';
-import { permissions } from '@ghostfolio/helper';
+import { InfoItem } from '@ghostfolio/common/interfaces';
+import { Subscription } from '@ghostfolio/common/interfaces/subscription.interface';
+import { permissions } from '@ghostfolio/common/permissions';
 import { Injectable } from '@nestjs/common';
 import { JwtService } from '@nestjs/jwt';
 import { Currency } from '@prisma/client';
-
-import { InfoItem } from './interfaces/info-item.interface';
+import * as bent from 'bent';
+import { subDays } from 'date-fns';

@Injectable()
 export class InfoService {
@ -18,6 +20,7 @@ export class InfoService {
  ) {}

  public async get(): Promise<InfoItem> {
+    const info: Partial<InfoItem> = {};
    const platforms = await this.prisma.platform.findMany({
      orderBy: { name: 'asc' },
      select: { id: true, name: true }
@ -25,23 +28,83 @@ export class InfoService {

    const globalPermissions: string[] = [];

+    if (this.configurationService.get('ENABLE_FEATURE_IMPORT')) {
+      globalPermissions.push(permissions.enableImport);
+    }
+
    if (this.configurationService.get('ENABLE_FEATURE_SOCIAL_LOGIN')) {
      globalPermissions.push(permissions.enableSocialLogin);
    }

+    if (this.configurationService.get('ENABLE_FEATURE_STATISTICS')) {
+      globalPermissions.push(permissions.enableStatistics);
+    }
+
    if (this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION')) {
      globalPermissions.push(permissions.enableSubscription);
+
+      info.stripePublicKey = this.configurationService.get('STRIPE_PUBLIC_KEY');
    }

    return {
+      ...info,
      globalPermissions,
      platforms,
      currencies: Object.values(Currency),
      demoAuthToken: this.getDemoAuthToken(),
-      lastDataGathering: await this.getLastDataGathering()
+      lastDataGathering: await this.getLastDataGathering(),
+      statistics: await this.getStatistics(),
+      subscriptions: await this.getSubscriptions()
    };
  }

+  private async countActiveUsers(aDays: number) {
+    return await this.prisma.user.count({
+      orderBy: {
+        Analytics: {
+          updatedAt: 'desc'
+        }
+      },
+      where: {
+        AND: [
+          {
+            NOT: {
+              Analytics: null
+            }
+          },
+          {
+            Analytics: {
+              updatedAt: {
+                gt: subDays(new Date(), aDays)
+              }
+            }
+          }
+        ]
+      }
+    });
+  }
+
+  private async countGitHubStargazers(): Promise<number> {
+    try {
+      const get = bent(
+        `https://api.github.com/repos/ghostfolio/ghostfolio`,
+        'GET',
+        'json',
+        200,
+        {
+          'User-Agent': 'request'
+        }
+      );
+
+      const { stargazers_count } = await get();
+      return stargazers_count;
+    } catch (error) {
+      console.error(error);
+
+      return undefined;
+    }
+  }
+
  private getDemoAuthToken() {
    return this.jwtService.sign({
      id: InfoService.DEMO_USER_ID
@ -55,4 +118,36 @@ export class InfoService {

    return lastDataGathering?.value ? new Date(lastDataGathering.value) : null;
  }
+
+  private async getStatistics() {
+    if (!this.configurationService.get('ENABLE_FEATURE_STATISTICS')) {
+      return undefined;
+    }
+
+    const activeUsers1d = await this.countActiveUsers(1);
+    const activeUsers30d = await this.countActiveUsers(30);
+    const gitHubStargazers = await this.countGitHubStargazers();
+
+    return {
+      activeUsers1d,
+      activeUsers30d,
+      gitHubStargazers
+    };
+  }
+
+  private async getSubscriptions(): Promise<Subscription[]> {
+    if (!this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION')) {
+      return undefined;
+    }
+
+    const stripeConfig = await this.prisma.property.findUnique({
+      where: { key: 'STRIPE_CONFIG' }
+    });
+
+    if (stripeConfig) {
+      return [JSON.parse(stripeConfig.value)];
+    }
+
+    return [];
+  }
 }
--- a/apps/api/src/app/interfaces/user-with-settings.ts
+++ b/apps/api/src/app/interfaces/user-with-settings.ts
@ -1,6 +0,0 @@
-import { Account, Settings, User } from '@prisma/client';
-
-export type UserWithSettings = User & {
-  Account: Account[];
-  Settings: Settings;
-};
--- a/apps/api/src/app/order/create-order.dto.ts
+++ b/apps/api/src/app/order/create-order.dto.ts
@ -1,5 +1,5 @@
 import { Currency, DataSource, Type } from '@prisma/client';
-import { IsISO8601, IsNumber, IsString, ValidateIf } from 'class-validator';
+import { IsISO8601, IsNumber, IsString } from 'class-validator';

 export class CreateOrderDto {
  @IsString()
@ -17,10 +17,6 @@ export class CreateOrderDto {
  @IsNumber()
  fee: number;

-  @IsString()
-  @ValidateIf((object, value) => value !== null)
-  platformId: string | null;
-
  @IsNumber()
  quantity: number;

--- a/apps/api/src/app/order/interfaces/order-with-platform.type.ts
+++ b/apps/api/src/app/order/interfaces/order-with-platform.type.ts
@ -1,3 +0,0 @@
-import { Order, Platform } from '@prisma/client';
-
-export type OrderWithPlatform = Order & { Platform?: Platform };
--- a/apps/api/src/app/order/order.controller.ts
+++ b/apps/api/src/app/order/order.controller.ts
@ -1,7 +1,11 @@
-import { RequestWithUser } from '@ghostfolio/api/app/interfaces/request-with-user.type';
 import { nullifyValuesInObjects } from '@ghostfolio/api/helper/object.helper';
 import { ImpersonationService } from '@ghostfolio/api/services/impersonation.service';
-import { getPermissions, hasPermission, permissions } from '@ghostfolio/helper';
+import {
+  getPermissions,
+  hasPermission,
+  permissions
+} from '@ghostfolio/common/permissions';
+import { RequestWithUser } from '@ghostfolio/common/types';
 import {
  Body,
  Controller,
@ -64,14 +68,19 @@ export class OrderController {
  public async getAllOrders(
    @Headers('impersonation-id') impersonationId
  ): Promise<OrderModel[]> {
-    const impersonationUserId = await this.impersonationService.validateImpersonationId(
-      impersonationId,
-      this.request.user.id
-    );
+    const impersonationUserId =
+      await this.impersonationService.validateImpersonationId(
+        impersonationId,
+        this.request.user.id
+      );

    let orders = await this.orderService.orders({
      include: {
-        Platform: true
+        Account: {
+          include: {
+            Platform: true
+          }
+        }
      },
      orderBy: { date: 'desc' },
      where: { userId: impersonationUserId || this.request.user.id }
@ -121,41 +130,33 @@ export class OrderController {
    const accountId = data.accountId;
    delete data.accountId;

-    if (data.platformId) {
-      const platformId = data.platformId;
-      delete data.platformId;
-
-      return this.orderService.createOrder(
-        {
-          ...data,
-          date,
-          Account: {
-            connect: {
-              id_userId: { id: accountId, userId: this.request.user.id }
-            }
-          },
-          Platform: { connect: { id: platformId } },
-          User: { connect: { id: this.request.user.id } }
+    return this.orderService.createOrder(
+      {
+        ...data,
+        Account: {
+          connect: {
+            id_userId: { id: accountId, userId: this.request.user.id }
+          }
        },
-        this.request.user.id
-      );
-    } else {
-      delete data.platformId;
-
-      return this.orderService.createOrder(
-        {
-          ...data,
-          date,
-          Account: {
-            connect: {
-              id_userId: { id: accountId, userId: this.request.user.id }
+        date,
+        SymbolProfile: {
+          connectOrCreate: {
+            where: {
+              dataSource_symbol: {
+                dataSource: data.dataSource,
+                symbol: data.symbol
+              }
+            },
+            create: {
+              dataSource: data.dataSource,
+              symbol: data.symbol
            }
-          },
-          User: { connect: { id: this.request.user.id } }
+          }
        },
-        this.request.user.id
-      );
-    }
+        User: { connect: { id: this.request.user.id } }
+      },
+      this.request.user.id
+    );
  }

  @Put(':id')
@ -180,65 +181,38 @@ export class OrderController {
      }
    });

+    if (!originalOrder) {
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.FORBIDDEN),
+        StatusCodes.FORBIDDEN
+      );
+    }
+
    const date = parseISO(data.date);

    const accountId = data.accountId;
    delete data.accountId;

-    if (data.platformId) {
-      const platformId = data.platformId;
-      delete data.platformId;
-
-      return this.orderService.updateOrder(
-        {
-          data: {
-            ...data,
-            date,
-            Account: {
-              connect: {
-                id_userId: { id: accountId, userId: this.request.user.id }
-              }
-            },
-            Platform: { connect: { id: platformId } },
-            User: { connect: { id: this.request.user.id } }
-          },
-          where: {
-            id_userId: {
-              id,
-              userId: this.request.user.id
+    return this.orderService.updateOrder(
+      {
+        data: {
+          ...data,
+          date,
+          Account: {
+            connect: {
+              id_userId: { id: accountId, userId: this.request.user.id }
            }
-          }
-        },
-        this.request.user.id
-      );
-    } else {
-      // platformId is null, remove it
-      delete data.platformId;
-
-      return this.orderService.updateOrder(
-        {
-          data: {
-            ...data,
-            date,
-            Account: {
-              connect: {
-                id_userId: { id: accountId, userId: this.request.user.id }
-              }
-            },
-            Platform: originalOrder.platformId
-              ? { disconnect: true }
-              : undefined,
-            User: { connect: { id: this.request.user.id } }
          },
-          where: {
-            id_userId: {
-              id,
-              userId: this.request.user.id
-            }
-          }
+          User: { connect: { id: this.request.user.id } }
        },
-        this.request.user.id
-      );
-    }
+        where: {
+          id_userId: {
+            id,
+            userId: this.request.user.id
+          }
+        }
+      },
+      this.request.user.id
+    );
  }
 }
--- a/apps/api/src/app/order/order.service.ts
+++ b/apps/api/src/app/order/order.service.ts
@ -1,11 +1,12 @@
 import { DataGatheringService } from '@ghostfolio/api/services/data-gathering.service';
 import { PrismaService } from '@ghostfolio/api/services/prisma.service';
+import { OrderWithAccount } from '@ghostfolio/common/types';
 import { Injectable } from '@nestjs/common';
-import { Order, Prisma } from '@prisma/client';
+import { DataSource, Order, Prisma } from '@prisma/client';
+import { endOfToday, isAfter } from 'date-fns';

 import { CacheService } from '../cache/cache.service';
 import { RedisCacheService } from '../redis-cache/redis-cache.service';
-import { OrderWithPlatform } from './interfaces/order-with-platform.type';

@Injectable()
 export class OrderService {
@ -31,7 +32,7 @@ export class OrderService {
    cursor?: Prisma.OrderWhereUniqueInput;
    where?: Prisma.OrderWhereInput;
    orderBy?: Prisma.OrderOrderByInput;
-  }): Promise<OrderWithPlatform[]> {
+  }): Promise<OrderWithAccount[]> {
    const { include, skip, take, cursor, where, orderBy } = params;

    return this.prisma.order.findMany({
@ -50,13 +51,16 @@ export class OrderService {
  ): Promise<Order> {
    this.redisCacheService.remove(`${aUserId}.portfolio`);

-    // Gather symbol data of order in the background
-    this.dataGatheringService.gatherSymbols([
-      {
-        date: <Date>data.date,
-        symbol: data.symbol
-      }
-    ]);
+    if (!isAfter(data.date as Date, endOfToday())) {
+      // Gather symbol data of order in the background, if not draft
+      this.dataGatheringService.gatherSymbols([
+        {
+          dataSource: data.dataSource,
+          date: <Date>data.date,
+          symbol: data.symbol
+        }
+      ]);
+    }

    await this.cacheService.flush(aUserId);

@ -90,6 +94,7 @@ export class OrderService {
    // Gather symbol data of order in the background
    this.dataGatheringService.gatherSymbols([
      {
+        dataSource: <DataSource>data.dataSource,
        date: <Date>data.date,
        symbol: <string>data.symbol
      }
--- a/apps/api/src/app/order/update-order.dto.ts
+++ b/apps/api/src/app/order/update-order.dto.ts
@ -17,10 +17,6 @@ export class UpdateOrderDto {
  @IsNumber()
  fee: number;

-  @IsString()
-  @ValidateIf((object, value) => value !== null)
-  platformId: string | null;
-
  @IsString()
  id: string;

--- a/apps/api/src/app/portfolio/portfolio.controller.ts
+++ b/apps/api/src/app/portfolio/portfolio.controller.ts
@ -4,7 +4,19 @@ import {
 } from '@ghostfolio/api/helper/object.helper';
 import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
 import { ImpersonationService } from '@ghostfolio/api/services/impersonation.service';
-import { getPermissions, hasPermission, permissions } from '@ghostfolio/helper';
+import {
+  PortfolioItem,
+  PortfolioOverview,
+  PortfolioPerformance,
+  PortfolioPosition,
+  PortfolioReport
+} from '@ghostfolio/common/interfaces';
+import {
+  getPermissions,
+  hasPermission,
+  permissions
+} from '@ghostfolio/common/permissions';
+import { RequestWithUser } from '@ghostfolio/common/types';
 import {
  Controller,
  Get,
@ -21,16 +33,10 @@ import { AuthGuard } from '@nestjs/passport';
 import { Response } from 'express';
 import { StatusCodes, getReasonPhrase } from 'http-status-codes';

-import { RequestWithUser } from '../interfaces/request-with-user.type';
-import { PortfolioItem } from './interfaces/portfolio-item.interface';
-import { PortfolioOverview } from './interfaces/portfolio-overview.interface';
-import { PortfolioPerformance } from './interfaces/portfolio-performance.interface';
 import {
  HistoricalDataItem,
  PortfolioPositionDetail
 } from './interfaces/portfolio-position-detail.interface';
-import { PortfolioPosition } from './interfaces/portfolio-position.interface';
-import { PortfolioReport } from './interfaces/portfolio-report.interface';
 import { PortfolioService } from './portfolio.service';

@Controller('portfolio')
@ -136,10 +142,11 @@ export class PortfolioController {
  ): Promise<{ [symbol: string]: PortfolioPosition }> {
    let details: { [symbol: string]: PortfolioPosition } = {};

-    const impersonationUserId = await this.impersonationService.validateImpersonationId(
-      impersonationId,
-      this.request.user.id
-    );
+    const impersonationUserId =
+      await this.impersonationService.validateImpersonationId(
+        impersonationId,
+        this.request.user.id
+      );

    const portfolio = await this.portfolioService.createPortfolio(
      impersonationUserId || this.request.user.id
@ -185,11 +192,11 @@ export class PortfolioController {
        portfolioPosition.investment =
          portfolioPosition.investment / totalInvestment;

-        for (const [platform, { current, original }] of Object.entries(
-          portfolioPosition.platforms
+        for (const [account, { current, original }] of Object.entries(
+          portfolioPosition.accounts
        )) {
-          portfolioPosition.platforms[platform].current = current / totalValue;
-          portfolioPosition.platforms[platform].original =
+          portfolioPosition.accounts[account].current = current / totalValue;
+          portfolioPosition.accounts[account].original =
            original / totalInvestment;
        }

@ -215,6 +222,7 @@ export class PortfolioController {
      )
    ) {
      overview = nullifyValuesInObject(overview, [
+        'cash',
        'committedFunds',
        'fees',
        'totalBuy',
@ -232,10 +240,11 @@ export class PortfolioController {
    @Query('range') range,
    @Res() res: Response
  ): Promise<PortfolioPerformance> {
-    const impersonationUserId = await this.impersonationService.validateImpersonationId(
-      impersonationId,
-      this.request.user.id
-    );
+    const impersonationUserId =
+      await this.impersonationService.validateImpersonationId(
+        impersonationId,
+        this.request.user.id
+      );

    const portfolio = await this.portfolioService.createPortfolio(
      impersonationUserId || this.request.user.id
@ -300,27 +309,16 @@ export class PortfolioController {
  public async getReport(
    @Headers('impersonation-id') impersonationId
  ): Promise<PortfolioReport> {
-    const impersonationUserId = await this.impersonationService.validateImpersonationId(
-      impersonationId,
-      this.request.user.id
-    );
+    const impersonationUserId =
+      await this.impersonationService.validateImpersonationId(
+        impersonationId,
+        this.request.user.id
+      );

    const portfolio = await this.portfolioService.createPortfolio(
      impersonationUserId || this.request.user.id
    );

-    let report = await portfolio.getReport();
-
-    if (
-      impersonationId &&
-      !hasPermission(
-        getPermissions(this.request.user.role),
-        permissions.readForeignPortfolio
-      )
-    ) {
-      // TODO: Filter out absolute numbers
-    }
-
-    return report;
+    return await portfolio.getReport();
  }
 }
--- a/apps/api/src/app/portfolio/portfolio.module.ts
+++ b/apps/api/src/app/portfolio/portfolio.module.ts
@ -1,3 +1,8 @@
+import { AccountService } from '@ghostfolio/api/app/account/account.service';
+import { CacheService } from '@ghostfolio/api/app/cache/cache.service';
+import { OrderService } from '@ghostfolio/api/app/order/order.service';
+import { RedisCacheModule } from '@ghostfolio/api/app/redis-cache/redis-cache.module';
+import { UserService } from '@ghostfolio/api/app/user/user.service';
 import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
 import { DataGatheringService } from '@ghostfolio/api/services/data-gathering.service';
 import { DataProviderService } from '@ghostfolio/api/services/data-provider.service';
@ -11,10 +16,6 @@ import { PrismaService } from '@ghostfolio/api/services/prisma.service';
 import { RulesService } from '@ghostfolio/api/services/rules.service';
 import { Module } from '@nestjs/common';

-import { CacheService } from '../cache/cache.service';
-import { OrderService } from '../order/order.service';
-import { RedisCacheModule } from '../redis-cache/redis-cache.module';
-import { UserService } from '../user/user.service';
 import { PortfolioController } from './portfolio.controller';
 import { PortfolioService } from './portfolio.service';

@ -22,6 +23,7 @@ import { PortfolioService } from './portfolio.service';
  imports: [RedisCacheModule],
  controllers: [PortfolioController],
  providers: [
+    AccountService,
    AlphaVantageService,
    CacheService,
    ConfigurationService,
--- a/apps/api/src/app/portfolio/portfolio.service.ts
+++ b/apps/api/src/app/portfolio/portfolio.service.ts
@ -1,20 +1,32 @@
-import { RequestWithUser } from '@ghostfolio/api/app/interfaces/request-with-user.type';
+import { AccountService } from '@ghostfolio/api/app/account/account.service';
+import { OrderService } from '@ghostfolio/api/app/order/order.service';
+import { RedisCacheService } from '@ghostfolio/api/app/redis-cache/redis-cache.service';
+import { UserService } from '@ghostfolio/api/app/user/user.service';
 import { Portfolio } from '@ghostfolio/api/models/portfolio';
 import { DataProviderService } from '@ghostfolio/api/services/data-provider.service';
 import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
 import { ImpersonationService } from '@ghostfolio/api/services/impersonation.service';
 import { IOrder } from '@ghostfolio/api/services/interfaces/interfaces';
 import { RulesService } from '@ghostfolio/api/services/rules.service';
+import {
+  PortfolioItem,
+  PortfolioOverview
+} from '@ghostfolio/common/interfaces';
+import { DateRange, RequestWithUser } from '@ghostfolio/common/types';
 import { Inject, Injectable } from '@nestjs/common';
 import { REQUEST } from '@nestjs/core';
+import { DataSource } from '@prisma/client';
 import {
  add,
+  addMonths,
+  endOfToday,
  format,
  getDate,
  getMonth,
  getYear,
  isAfter,
  isSameDay,
+  parse,
  parseISO,
  setDate,
  setMonth,
@ -23,12 +35,6 @@ import {
 import { isEmpty } from 'lodash';
 import * as roundTo from 'round-to';

-import { OrderService } from '../order/order.service';
-import { RedisCacheService } from '../redis-cache/redis-cache.service';
-import { UserService } from '../user/user.service';
-import { DateRange } from './interfaces/date-range.type';
-import { PortfolioItem } from './interfaces/portfolio-item.interface';
-import { PortfolioOverview } from './interfaces/portfolio-overview.interface';
 import {
  HistoricalDataItem,
  PortfolioPositionDetail
@ -37,6 +43,7 @@ import {
@Injectable()
 export class PortfolioService {
  public constructor(
+    private readonly accountService: AccountService,
    private readonly dataProviderService: DataProviderService,
    private readonly exchangeRateDataService: ExchangeRateDataService,
    private readonly impersonationService: ImpersonationService,
@ -49,7 +56,7 @@ export class PortfolioService {

  public async createPortfolio(aUserId: string): Promise<Portfolio> {
    let portfolio: Portfolio;
-    let stringifiedPortfolio = await this.redisCacheService.get(
+    const stringifiedPortfolio = await this.redisCacheService.get(
      `${aUserId}.portfolio`
    );

@ -60,11 +67,11 @@ export class PortfolioService {
      const {
        orders,
        portfolioItems
-      }: { orders: IOrder[]; portfolioItems: PortfolioItem[] } = JSON.parse(
-        stringifiedPortfolio
-      );
+      }: { orders: IOrder[]; portfolioItems: PortfolioItem[] } =
+        JSON.parse(stringifiedPortfolio);

      portfolio = new Portfolio(
+        this.accountService,
        this.dataProviderService,
        this.exchangeRateDataService,
        this.rulesService
@ -73,13 +80,15 @@ export class PortfolioService {
      // Get portfolio from database
      const orders = await this.orderService.orders({
        include: {
-          Platform: true
+          Account: true,
+          SymbolProfile: true
        },
        orderBy: { date: 'asc' },
        where: { userId: aUserId }
      });

      portfolio = new Portfolio(
+        this.accountService,
        this.dataProviderService,
        this.exchangeRateDataService,
        this.rulesService
@ -100,15 +109,21 @@ export class PortfolioService {
    }

    // Enrich portfolio with current data
-    return await portfolio.addCurrentPortfolioItems();
+    await portfolio.addCurrentPortfolioItems();
+
+    // Enrich portfolio with future data
+    await portfolio.addFuturePortfolioItems();
+
+    return portfolio;
  }

  public async findAll(aImpersonationId: string): Promise<PortfolioItem[]> {
    try {
-      const impersonationUserId = await this.impersonationService.validateImpersonationId(
-        aImpersonationId,
-        this.request.user.id
-      );
+      const impersonationUserId =
+        await this.impersonationService.validateImpersonationId(
+          aImpersonationId,
+          this.request.user.id
+        );

      const portfolio = await this.createPortfolio(
        impersonationUserId || this.request.user.id
@ -123,10 +138,11 @@ export class PortfolioService {
    aImpersonationId: string,
    aDateRange: DateRange = 'max'
  ): Promise<HistoricalDataItem[]> {
-    const impersonationUserId = await this.impersonationService.validateImpersonationId(
-      aImpersonationId,
-      this.request.user.id
-    );
+    const impersonationUserId =
+      await this.impersonationService.validateImpersonationId(
+        aImpersonationId,
+        this.request.user.id
+      );

    const portfolio = await this.createPortfolio(
      impersonationUserId || this.request.user.id
@ -144,6 +160,11 @@ export class PortfolioService {
    return portfolio
      .get()
      .filter((portfolioItem) => {
+        if (isAfter(parseISO(portfolioItem.date), endOfToday())) {
+          // Filter out future dates
+          return false;
+        }
+
        if (dateRangeDate === undefined) {
          return true;
        }
@ -157,8 +178,8 @@ export class PortfolioService {
        return {
          date: format(parseISO(portfolioItem.date), 'yyyy-MM-dd'),
          grossPerformancePercent: portfolioItem.grossPerformancePercent,
-          marketPrice: portfolioItem.value || null,
-          value: portfolioItem.value || null
+          marketPrice: portfolioItem.value ?? null,
+          value: portfolioItem.value - portfolioItem.investment ?? null
        };
      });
  }
@ -166,21 +187,27 @@ export class PortfolioService {
  public async getOverview(
    aImpersonationId: string
  ): Promise<PortfolioOverview> {
-    const impersonationUserId = await this.impersonationService.validateImpersonationId(
-      aImpersonationId,
-      this.request.user.id
-    );
+    const impersonationUserId =
+      await this.impersonationService.validateImpersonationId(
+        aImpersonationId,
+        this.request.user.id
+      );

    const portfolio = await this.createPortfolio(
      impersonationUserId || this.request.user.id
    );

+    const { balance } = await this.accountService.getCashDetails(
+      impersonationUserId || this.request.user.id,
+      this.request.user.Settings.currency
+    );
    const committedFunds = portfolio.getCommittedFunds();
    const fees = portfolio.getFees();

    return {
      committedFunds,
      fees,
+      cash: balance,
      ordersCount: portfolio.getOrders().length,
      totalBuy: portfolio.getTotalBuy(),
      totalSell: portfolio.getTotalSell()
@ -191,27 +218,29 @@ export class PortfolioService {
    aImpersonationId: string,
    aSymbol: string
  ): Promise<PortfolioPositionDetail> {
-    const impersonationUserId = await this.impersonationService.validateImpersonationId(
-      aImpersonationId,
-      this.request.user.id
-    );
+    const impersonationUserId =
+      await this.impersonationService.validateImpersonationId(
+        aImpersonationId,
+        this.request.user.id
+      );

    const portfolio = await this.createPortfolio(
      impersonationUserId || this.request.user.id
    );

-    const positions = portfolio.getPositions(new Date())[aSymbol];
+    const position = portfolio.getPositions(new Date())[aSymbol];

-    if (positions) {
-      let {
+    if (position) {
+      const {
        averagePrice,
        currency,
        firstBuyDate,
        investment,
-        marketPrice,
        quantity,
        transactionCount
-      } = portfolio.getPositions(new Date())[aSymbol];
+      } = position;
+      let marketPrice = position.marketPrice;
+      const orders = portfolio.getOrders(aSymbol);

      const historicalData = await this.dataProviderService.getHistorical(
        [aSymbol],
@ -225,6 +254,7 @@ export class PortfolioService {
      }

      const historicalDataArray: HistoricalDataItem[] = [];
+      let currentAveragePrice: number;
      let maxPrice = marketPrice;
      let minPrice = marketPrice;

@ -232,9 +262,25 @@ export class PortfolioService {
        for (const [date, { marketPrice }] of Object.entries(
          historicalData[aSymbol]
        )) {
+          const currentDate = parse(date, 'yyyy-MM-dd', new Date());
+          if (
+            isSameDay(currentDate, parseISO(orders[0]?.getDate())) ||
+            isAfter(currentDate, parseISO(orders[0]?.getDate()))
+          ) {
+            // Get snapshot of first day of next month
+            const snapshot = portfolio.get(
+              addMonths(setDate(currentDate, 1), 1)
+            )?.[0]?.positions[aSymbol];
+            orders.shift();
+
+            if (snapshot?.averagePrice) {
+              currentAveragePrice = snapshot.averagePrice;
+            }
+          }
+
          historicalDataArray.push({
-            averagePrice,
            date,
+            averagePrice: currentAveragePrice,
            value: marketPrice
          });

@ -288,7 +334,7 @@ export class PortfolioService {

      if (isEmpty(historicalData)) {
        historicalData = await this.dataProviderService.getHistoricalRaw(
-          [aSymbol],
+          [{ dataSource: DataSource.YAHOO, symbol: aSymbol }],
          portfolio.getMinDate(),
          new Date()
        );
@ -296,7 +342,7 @@ export class PortfolioService {

      const historicalDataArray: HistoricalDataItem[] = [];

-      for (const [date, { marketPrice, performance }] of Object.entries(
+      for (const [date, { marketPrice }] of Object.entries(
        historicalData[aSymbol]
      ).reverse()) {
        historicalDataArray.push({
@ -307,13 +353,13 @@ export class PortfolioService {

      return {
        averagePrice: undefined,
-        currency: currentData[aSymbol].currency,
+        currency: currentData[aSymbol]?.currency,
        firstBuyDate: undefined,
        grossPerformance: undefined,
        grossPerformancePercent: undefined,
        historicalData: historicalDataArray,
        investment: undefined,
-        marketPrice: currentData[aSymbol].marketPrice,
+        marketPrice: currentData[aSymbol]?.marketPrice,
        maxPrice: undefined,
        minPrice: undefined,
        quantity: undefined,
--- a/apps/api/src/app/subscription/subscription.controller.ts
+++ b/apps/api/src/app/subscription/subscription.controller.ts
@ -0,0 +1,57 @@
+import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
+import { RequestWithUser } from '@ghostfolio/common/types';
+import {
+  Body,
+  Controller,
+  Get,
+  HttpException,
+  Inject,
+  Post,
+  Req,
+  Res,
+  UseGuards
+} from '@nestjs/common';
+import { REQUEST } from '@nestjs/core';
+import { AuthGuard } from '@nestjs/passport';
+import { StatusCodes, getReasonPhrase } from 'http-status-codes';
+
+import { SubscriptionService } from './subscription.service';
+
+@Controller('subscription')
+export class SubscriptionController {
+  public constructor(
+    private readonly configurationService: ConfigurationService,
+    @Inject(REQUEST) private readonly request: RequestWithUser,
+    private readonly subscriptionService: SubscriptionService
+  ) {}
+
+  @Get('stripe/callback')
+  public async stripeCallback(@Req() req, @Res() res) {
+    await this.subscriptionService.createSubscription(
+      req.query.checkoutSessionId
+    );
+
+    res.redirect(`${this.configurationService.get('ROOT_URL')}/account`);
+  }
+
+  @Post('stripe/checkout-session')
+  @UseGuards(AuthGuard('jwt'))
+  public async createCheckoutSession(
+    @Body() { couponId, priceId }: { couponId: string; priceId: string }
+  ) {
+    try {
+      return await this.subscriptionService.createCheckoutSession({
+        couponId,
+        priceId,
+        userId: this.request.user.id
+      });
+    } catch (error) {
+      console.error(error);
+
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.BAD_REQUEST),
+        StatusCodes.BAD_REQUEST
+      );
+    }
+  }
+}
--- a/apps/api/src/app/subscription/subscription.module.ts
+++ b/apps/api/src/app/subscription/subscription.module.ts
@ -0,0 +1,13 @@
+import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
+import { PrismaService } from '@ghostfolio/api/services/prisma.service';
+import { Module } from '@nestjs/common';
+
+import { SubscriptionController } from './subscription.controller';
+import { SubscriptionService } from './subscription.service';
+
+@Module({
+  imports: [],
+  controllers: [SubscriptionController],
+  providers: [ConfigurationService, PrismaService, SubscriptionService]
+})
+export class SubscriptionModule {}
--- a/apps/api/src/app/subscription/subscription.service.ts
+++ b/apps/api/src/app/subscription/subscription.service.ts
@ -0,0 +1,89 @@
+import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
+import { PrismaService } from '@ghostfolio/api/services/prisma.service';
+import { Injectable } from '@nestjs/common';
+import { addDays } from 'date-fns';
+import Stripe from 'stripe';
+
+@Injectable()
+export class SubscriptionService {
+  private stripe: Stripe;
+
+  public constructor(
+    private readonly configurationService: ConfigurationService,
+    private prisma: PrismaService
+  ) {
+    this.stripe = new Stripe(
+      this.configurationService.get('STRIPE_SECRET_KEY'),
+      {
+        apiVersion: '2020-08-27'
+      }
+    );
+  }
+
+  public async createCheckoutSession({
+    couponId,
+    priceId,
+    userId
+  }: {
+    couponId?: string;
+    priceId: string;
+    userId: string;
+  }) {
+    const checkoutSessionCreateParams: Stripe.Checkout.SessionCreateParams = {
+      cancel_url: `${this.configurationService.get('ROOT_URL')}/account`,
+      client_reference_id: userId,
+      line_items: [
+        {
+          price: priceId,
+          quantity: 1
+        }
+      ],
+      mode: 'payment',
+      payment_method_types: ['card'],
+      success_url: `${this.configurationService.get(
+        'ROOT_URL'
+      )}/api/subscription/stripe/callback?checkoutSessionId={CHECKOUT_SESSION_ID}`
+    };
+
+    if (couponId) {
+      checkoutSessionCreateParams.discounts = [
+        {
+          coupon: couponId
+        }
+      ];
+    }
+
+    const session = await this.stripe.checkout.sessions.create(
+      checkoutSessionCreateParams
+    );
+
+    return {
+      sessionId: session.id
+    };
+  }
+
+  public async createSubscription(aCheckoutSessionId: string) {
+    try {
+      const session = await this.stripe.checkout.sessions.retrieve(
+        aCheckoutSessionId
+      );
+
+      await this.prisma.subscription.create({
+        data: {
+          expiresAt: addDays(new Date(), 365),
+          User: {
+            connect: {
+              id: session.client_reference_id
+            }
+          }
+        }
+      });
+
+      await this.stripe.customers.update(session.customer as string, {
+        description: session.client_reference_id
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  }
+}
--- a/apps/api/src/app/symbol/interfaces/lookup-item.interface.ts
+++ b/apps/api/src/app/symbol/interfaces/lookup-item.interface.ts
@ -1,4 +1,7 @@
+import { DataSource } from '@prisma/client';
+
 export interface LookupItem {
+  dataSource: DataSource;
  name: string;
  symbol: string;
 }
--- a/apps/api/src/app/symbol/symbol.controller.ts
+++ b/apps/api/src/app/symbol/symbol.controller.ts
@ -1,4 +1,4 @@
-import { RequestWithUser } from '@ghostfolio/api/app/interfaces/request-with-user.type';
+import { RequestWithUser } from '@ghostfolio/common/types';
 import {
  Controller,
  Get,
@ -28,9 +28,12 @@ export class SymbolController {
   */
  @Get('lookup')
  @UseGuards(AuthGuard('jwt'))
-  public async lookupSymbol(@Query() { query }): Promise<LookupItem[]> {
+  public async lookupSymbol(
+    @Query() { query = '' }
+  ): Promise<{ items: LookupItem[] }> {
    try {
-      return this.symbolService.lookup(query);
+      const encodedQuery = encodeURIComponent(query.toLowerCase());
+      return this.symbolService.lookup(encodedQuery);
    } catch {
      throw new HttpException(
        getReasonPhrase(StatusCodes.INTERNAL_SERVER_ERROR),
--- a/apps/api/src/app/symbol/symbol.service.ts
+++ b/apps/api/src/app/symbol/symbol.service.ts
@ -1,10 +1,8 @@
-import { DataGatheringService } from '@ghostfolio/api/services/data-gathering.service';
 import { DataProviderService } from '@ghostfolio/api/services/data-provider.service';
 import { GhostfolioScraperApiService } from '@ghostfolio/api/services/data-provider/ghostfolio-scraper-api/ghostfolio-scraper-api.service';
 import { convertFromYahooSymbol } from '@ghostfolio/api/services/data-provider/yahoo-finance/yahoo-finance.service';
 import { Injectable } from '@nestjs/common';
-import { Currency } from '@prisma/client';
-import * as bent from 'bent';
+import { Currency, DataSource } from '@prisma/client';

 import { LookupItem } from './interfaces/lookup-item.interface';
 import { SymbolItem } from './interfaces/symbol-item.interface';
@ -27,62 +25,30 @@ export class SymbolService {
    };
  }

-  public async lookup(aQuery = ''): Promise<LookupItem[]> {
-    const query = aQuery.toLowerCase();
-    const results: LookupItem[] = [];
+  public async lookup(aQuery: string): Promise<{ items: LookupItem[] }> {
+    const results: { items: LookupItem[] } = { items: [] };

-    if (!query) {
+    if (!aQuery) {
      return results;
    }

-    const get = bent(
-      `https://query1.finance.yahoo.com/v1/finance/search?q=${query}&lang=en-US&region=US&quotesCount=8&newsCount=0&enableFuzzyQuery=false&quotesQueryId=tss_match_phrase_query&multiQuoteQueryId=multi_quote_single_token_query&newsQueryId=news_cie_vespa&enableCb=true&enableNavLinks=false&enableEnhancedTrivialQuery=true`,
-      'GET',
-      'json',
-      200
-    );
-
-    // Add custom symbols
-    const scraperConfigurations = await this.ghostfolioScraperApiService.getScraperConfigurations();
-    scraperConfigurations.forEach((scraperConfiguration) => {
-      if (scraperConfiguration.name.toLowerCase().startsWith(query)) {
-        results.push({
-          name: scraperConfiguration.name,
-          symbol: scraperConfiguration.symbol
-        });
-      }
-    });
-
    try {
-      const { quotes } = await get();
+      const { items } = await this.dataProviderService.search(aQuery);
+      results.items = items;

-      const searchResult = quotes
-        .filter(({ isYahooFinance }) => {
-          return isYahooFinance;
-        })
-        .filter(({ quoteType }) => {
-          return (
-            quoteType === 'CRYPTOCURRENCY' ||
-            quoteType === 'EQUITY' ||
-            quoteType === 'ETF'
-          );
-        })
-        .filter(({ quoteType, symbol }) => {
-          if (quoteType === 'CRYPTOCURRENCY') {
-            // Only allow cryptocurrencies in USD
-            return symbol.includes('USD');
-          }
+      // Add custom symbols
+      const scraperConfigurations = await this.ghostfolioScraperApiService.getScraperConfigurations();
+      scraperConfigurations.forEach((scraperConfiguration) => {
+        if (scraperConfiguration.name.toLowerCase().startsWith(aQuery)) {
+          results.items.push({
+            dataSource: DataSource.GHOSTFOLIO,
+            name: scraperConfiguration.name,
+            symbol: scraperConfiguration.symbol
+          });
+        }
+      });

-          return true;
-        })
-        .map(({ longname, shortname, symbol }) => {
-          return {
-            name: longname || shortname,
-            symbol: convertFromYahooSymbol(symbol)
-          };
-        });
-
-      return results.concat(searchResult);
+      return results;
    } catch (error) {
      console.error(error);

--- a/apps/api/src/app/user/interfaces/user-settings-params.interface.ts
+++ b/apps/api/src/app/user/interfaces/user-settings-params.interface.ts
@ -0,0 +1,7 @@
+import { Currency, ViewMode } from '@prisma/client';
+
+export interface UserSettingsParams {
+  currency?: Currency;
+  userId: string;
+  viewMode?: ViewMode;
+}
--- a/apps/api/src/app/user/interfaces/user.interface.ts
+++ b/apps/api/src/app/user/interfaces/user.interface.ts
@ -1,21 +0,0 @@
-import { Account, Currency } from '@prisma/client';
-
-import { Access } from './access.interface';
-
-export interface User {
-  access: Access[];
-  accounts: Account[];
-  alias?: string;
-  id: string;
-  permissions: string[];
-  settings: UserSettings;
-  subscription: {
-    expiresAt: Date;
-    type: 'Trial';
-  };
-}
-
-export interface UserSettings {
-  baseCurrency: Currency;
-  locale: string;
-}
--- a/apps/api/src/app/user/update-user-settings.dto.ts
+++ b/apps/api/src/app/user/update-user-settings.dto.ts
@ -1,7 +1,10 @@
-import { Currency } from '@prisma/client';
+import { Currency, ViewMode } from '@prisma/client';
 import { IsString } from 'class-validator';

 export class UpdateUserSettingsDto {
  @IsString()
-  currency: Currency;
+  baseCurrency: Currency;
+
+  @IsString()
+  viewMode: ViewMode;
 }
--- a/apps/api/src/app/user/user.controller.ts
+++ b/apps/api/src/app/user/user.controller.ts
@ -1,8 +1,14 @@
-import { RequestWithUser } from '@ghostfolio/api/app/interfaces/request-with-user.type';
-import { getPermissions, hasPermission, permissions } from '@ghostfolio/helper';
+import { User } from '@ghostfolio/common/interfaces';
+import {
+  getPermissions,
+  hasPermission,
+  permissions
+} from '@ghostfolio/common/permissions';
+import { RequestWithUser } from '@ghostfolio/common/types';
 import {
  Body,
  Controller,
+  Delete,
  Get,
  HttpException,
  Inject,
@ -15,10 +21,11 @@ import { REQUEST } from '@nestjs/core';
 import { JwtService } from '@nestjs/jwt';
 import { AuthGuard } from '@nestjs/passport';
 import { Provider } from '@prisma/client';
+import { User as UserModel } from '@prisma/client';
 import { StatusCodes, getReasonPhrase } from 'http-status-codes';

 import { UserItem } from './interfaces/user-item.interface';
-import { User } from './interfaces/user.interface';
+import { UserSettingsParams } from './interfaces/user-settings-params.interface';
 import { UpdateUserSettingsDto } from './update-user-settings.dto';
 import { UserService } from './user.service';

@ -30,6 +37,27 @@ export class UserController {
    private readonly userService: UserService
  ) {}

+  @Delete(':id')
+  @UseGuards(AuthGuard('jwt'))
+  public async deleteUser(@Param('id') id: string): Promise<UserModel> {
+    if (
+      !hasPermission(
+        getPermissions(this.request.user.role),
+        permissions.deleteUser
+      ) ||
+      id === this.request.user.id
+    ) {
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.FORBIDDEN),
+        StatusCodes.FORBIDDEN
+      );
+    }
+
+    return this.userService.deleteUser({
+      id
+    });
+  }
+
  @Get()
  @UseGuards(AuthGuard('jwt'))
  public async getUser(@Param('id') id: string): Promise<User> {
@ -65,9 +93,20 @@ export class UserController {
      );
    }

-    return await this.userService.updateUserSettings({
-      currency: data.currency,
+    const userSettings: UserSettingsParams = {
+      currency: data.baseCurrency,
      userId: this.request.user.id
-    });
+    };
+
+    if (
+      hasPermission(
+        getPermissions(this.request.user.role),
+        permissions.updateViewMode
+      )
+    ) {
+      userSettings.viewMode = data.viewMode;
+    }
+
+    return await this.userService.updateUserSettings(userSettings);
  }
 }
--- a/apps/api/src/app/user/user.service.ts
+++ b/apps/api/src/app/user/user.service.ts
@ -1,17 +1,14 @@
 import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
 import { PrismaService } from '@ghostfolio/api/services/prisma.service';
-import {
-  getPermissions,
-  locale,
-  permissions,
-  resetHours
-} from '@ghostfolio/helper';
+import { locale } from '@ghostfolio/common/config';
+import { User as IUser, UserWithSettings } from '@ghostfolio/common/interfaces';
+import { getPermissions, permissions } from '@ghostfolio/common/permissions';
+import { SubscriptionType } from '@ghostfolio/common/types/subscription.type';
 import { Injectable } from '@nestjs/common';
-import { Currency, Prisma, Provider, User } from '@prisma/client';
-import { add } from 'date-fns';
+import { Currency, Prisma, Provider, User, ViewMode } from '@prisma/client';
+import { isBefore } from 'date-fns';

-import { UserWithSettings } from '../interfaces/user-with-settings';
-import { User as IUser } from './interfaces/user.interface';
+import { UserSettingsParams } from './interfaces/user-settings-params.interface';

 const crypto = require('crypto');

@ -28,8 +25,9 @@ export class UserService {
    Account,
    alias,
    id,
-    role,
-    Settings
+    permissions,
+    Settings,
+    subscription
  }: UserWithSettings): Promise<IUser> {
    const access = await this.prisma.access.findMany({
      include: {
@ -39,15 +37,11 @@ export class UserService {
      where: { GranteeUser: { id } }
    });

-    const currentPermissions = getPermissions(role);
-
-    if (this.configurationService.get('ENABLE_FEATURE_FEAR_AND_GREED_INDEX')) {
-      currentPermissions.push(permissions.accessFearAndGreedIndex);
-    }
-
    return {
      alias,
      id,
+      permissions,
+      subscription,
      access: access.map((accessItem) => {
        return {
          alias: accessItem.User.alias,
@ -55,14 +49,10 @@ export class UserService {
        };
      }),
      accounts: Account,
-      permissions: currentPermissions,
      settings: {
-        baseCurrency: Settings?.currency || UserService.DEFAULT_CURRENCY,
-        locale
-      },
-      subscription: {
-        expiresAt: resetHours(add(new Date(), { days: 7 })),
-        type: 'Trial'
+        locale,
+        baseCurrency: Settings?.currency ?? UserService.DEFAULT_CURRENCY,
+        viewMode: Settings?.viewMode ?? ViewMode.DEFAULT
      }
    };
  }
@ -70,25 +60,64 @@ export class UserService {
  public async user(
    userWhereUniqueInput: Prisma.UserWhereUniqueInput
  ): Promise<UserWithSettings | null> {
-    const user = await this.prisma.user.findUnique({
-      include: { Account: true, Settings: true },
+    const userFromDatabase = await this.prisma.user.findUnique({
+      include: { Account: true, Settings: true, Subscription: true },
      where: userWhereUniqueInput
    });

-    if (user?.Settings) {
-      if (!user.Settings.currency) {
+    const user: UserWithSettings = userFromDatabase;
+
+    const currentPermissions = getPermissions(userFromDatabase.role);
+
+    if (this.configurationService.get('ENABLE_FEATURE_FEAR_AND_GREED_INDEX')) {
+      currentPermissions.push(permissions.accessFearAndGreedIndex);
+    }
+
+    user.permissions = currentPermissions;
+
+    if (userFromDatabase?.Settings) {
+      if (!userFromDatabase.Settings.currency) {
        // Set default currency if needed
-        user.Settings.currency = UserService.DEFAULT_CURRENCY;
+        userFromDatabase.Settings.currency = UserService.DEFAULT_CURRENCY;
      }
-    } else if (user) {
+    } else if (userFromDatabase) {
      // Set default settings if needed
-      user.Settings = {
+      userFromDatabase.Settings = {
        currency: UserService.DEFAULT_CURRENCY,
        updatedAt: new Date(),
-        userId: user?.id
+        userId: userFromDatabase?.id,
+        viewMode: ViewMode.DEFAULT
      };
    }

+    if (this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION')) {
+      if (userFromDatabase?.Subscription?.length > 0) {
+        const latestSubscription = userFromDatabase.Subscription.reduce(
+          (a, b) => {
+            return new Date(a.expiresAt) > new Date(b.expiresAt) ? a : b;
+          }
+        );
+
+        user.subscription = {
+          expiresAt: latestSubscription.expiresAt,
+          type: isBefore(new Date(), latestSubscription.expiresAt)
+            ? SubscriptionType.Premium
+            : SubscriptionType.Basic
+        };
+      } else {
+        user.subscription = {
+          type: SubscriptionType.Basic
+        };
+      }
+
+      if (user.subscription.type === SubscriptionType.Basic) {
+        user.permissions = user.permissions.filter((permission) => {
+          return permission !== permissions.updateViewMode;
+        });
+        user.Settings.viewMode = ViewMode.ZEN;
+      }
+    }
+
    return user;
  }

@ -163,6 +192,28 @@ export class UserService {
  }

  public async deleteUser(where: Prisma.UserWhereUniqueInput): Promise<User> {
+    await this.prisma.access.deleteMany({
+      where: { OR: [{ granteeUserId: where.id }, { userId: where.id }] }
+    });
+
+    await this.prisma.account.deleteMany({
+      where: { userId: where.id }
+    });
+
+    await this.prisma.analytics.delete({
+      where: { userId: where.id }
+    });
+
+    await this.prisma.order.deleteMany({
+      where: { userId: where.id }
+    });
+
+    try {
+      await this.prisma.settings.delete({
+        where: { userId: where.id }
+      });
+    } catch {}
+
    return this.prisma.user.delete({
      where
    });
@ -170,11 +221,9 @@ export class UserService {

  public async updateUserSettings({
    currency,
-    userId
-  }: {
-    currency: Currency;
-    userId: string;
-  }) {
+    userId,
+    viewMode
+  }: UserSettingsParams) {
    await this.prisma.settings.upsert({
      create: {
        currency,
@ -182,10 +231,12 @@ export class UserService {
          connect: {
            id: userId
          }
-        }
+        },
+        viewMode
      },
      update: {
-        currency
+        currency,
+        viewMode
      },
      where: {
        userId: userId
--- a/apps/api/src/environments/environment.prod.ts
+++ b/apps/api/src/environments/environment.prod.ts
@ -1,3 +1,4 @@
 export const environment = {
-  production: true
+  production: true,
+  version: `v${require('../../../../package.json').version}`
 };
--- a/apps/api/src/environments/environment.ts
+++ b/apps/api/src/environments/environment.ts
@ -1,3 +1,4 @@
 export const environment = {
-  production: false
+  production: false,
+  version: 'dev'
 };
--- a/apps/api/src/models/interfaces/portfolio.interface.ts
+++ b/apps/api/src/models/interfaces/portfolio.interface.ts
@ -1,7 +1,4 @@
-import {
-  PortfolioItem,
-  Position
-} from '@ghostfolio/api/app/portfolio/interfaces/portfolio-item.interface';
+import { PortfolioItem, Position } from '@ghostfolio/common/interfaces';

 import { Order } from '../order';

--- a/apps/api/src/models/interfaces/rule.interface.ts
+++ b/apps/api/src/models/interfaces/rule.interface.ts
@ -1,4 +1,4 @@
-import { PortfolioPosition } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-position.interface';
+import { PortfolioPosition } from '@ghostfolio/common/interfaces';

 import { EvaluationResult } from './evaluation-result.interface';

--- a/apps/api/src/models/order.ts
+++ b/apps/api/src/models/order.ts
@ -1,35 +1,42 @@
-import { Currency, Platform } from '@prisma/client';
+import { Account, Currency, SymbolProfile } from '@prisma/client';
+import { endOfToday, isAfter, parseISO } from 'date-fns';
 import { v4 as uuidv4 } from 'uuid';

 import { IOrder } from '../services/interfaces/interfaces';
 import { OrderType } from './order-type';

 export class Order {
+  private account: Account;
  private currency: Currency;
  private fee: number;
  private date: string;
  private id: string;
  private quantity: number;
-  private platform: Platform;
  private symbol: string;
+  private symbolProfile: SymbolProfile;
  private total: number;
  private type: OrderType;
  private unitPrice: number;

  public constructor(data: IOrder) {
+    this.account = data.account;
    this.currency = data.currency;
    this.fee = data.fee;
    this.date = data.date;
    this.id = data.id || uuidv4();
-    this.platform = data.platform;
    this.quantity = data.quantity;
    this.symbol = data.symbol;
+    this.symbolProfile = data.symbolProfile;
    this.type = data.type;
    this.unitPrice = data.unitPrice;

    this.total = this.quantity * data.unitPrice;
  }

+  public getAccount() {
+    return this.account;
+  }
+
  public getCurrency() {
    return this.currency;
  }
@ -46,8 +53,8 @@ export class Order {
    return this.id;
  }

-  public getPlatform() {
-    return this.platform;
+  public getIsDraft() {
+    return isAfter(parseISO(this.date), endOfToday());
  }

  public getQuantity() {
@ -58,6 +65,10 @@ export class Order {
    return this.symbol;
  }

+  getSymbolProfile() {
+    return this.symbolProfile;
+  }
+
  public getTotal() {
    return this.total;
  }
--- a/apps/api/src/models/portfolio.spec.ts
+++ b/apps/api/src/models/portfolio.spec.ts
@ -1,76 +1,142 @@
-import { baseCurrency, getUtc, getYesterday } from '@ghostfolio/helper';
-import { Test } from '@nestjs/testing';
-import { Currency, Role, Type } from '@prisma/client';
+import { AccountService } from '@ghostfolio/api/app/account/account.service';
+import { UNKNOWN_KEY, baseCurrency } from '@ghostfolio/common/config';
+import { getUtc, getYesterday } from '@ghostfolio/common/helper';
+import {
+  AccountType,
+  Currency,
+  DataSource,
+  Role,
+  Type,
+  ViewMode
+} from '@prisma/client';
+import { format } from 'date-fns';

-import { ConfigurationService } from '../services/configuration.service';
 import { DataProviderService } from '../services/data-provider.service';
-import { AlphaVantageService } from '../services/data-provider/alpha-vantage/alpha-vantage.service';
-import { GhostfolioScraperApiService } from '../services/data-provider/ghostfolio-scraper-api/ghostfolio-scraper-api.service';
-import { RakutenRapidApiService } from '../services/data-provider/rakuten-rapid-api/rakuten-rapid-api.service';
-import { YahooFinanceService } from '../services/data-provider/yahoo-finance/yahoo-finance.service';
 import { ExchangeRateDataService } from '../services/exchange-rate-data.service';
 import { MarketState } from '../services/interfaces/interfaces';
-import { PrismaService } from '../services/prisma.service';
 import { RulesService } from '../services/rules.service';
 import { Portfolio } from './portfolio';

+jest.mock('../app/account/account.service', () => {
+  return {
+    AccountService: jest.fn().mockImplementation(() => {
+      return {
+        getCashDetails: () => Promise.resolve({ accounts: [], balance: 0 })
+      };
+    })
+  };
+});
+
+jest.mock('../services/data-provider.service', () => {
+  return {
+    DataProviderService: jest.fn().mockImplementation(() => {
+      const today = format(new Date(), 'yyyy-MM-dd');
+      const yesterday = format(getYesterday(), 'yyyy-MM-dd');
+
+      return {
+        get: () => {
+          return Promise.resolve({
+            BTCUSD: {
+              currency: Currency.USD,
+              dataSource: DataSource.YAHOO,
+              exchange: UNKNOWN_KEY,
+              marketPrice: 57973.008,
+              marketState: MarketState.open,
+              name: 'Bitcoin USD',
+              type: 'Cryptocurrency'
+            },
+            ETHUSD: {
+              currency: Currency.USD,
+              dataSource: DataSource.YAHOO,
+              exchange: UNKNOWN_KEY,
+              marketPrice: 3915.337,
+              marketState: MarketState.open,
+              name: 'Ethereum USD',
+              type: 'Cryptocurrency'
+            }
+          });
+        },
+        getHistorical: () => {
+          return Promise.resolve({
+            BTCUSD: {
+              [yesterday]: 56710.122,
+              [today]: 57973.008
+            },
+            ETHUSD: {
+              [yesterday]: 3641.984,
+              [today]: 3915.337
+            }
+          });
+        }
+      };
+    })
+  };
+});
+
+jest.mock('../services/exchange-rate-data.service', () => {
+  return {
+    ExchangeRateDataService: jest.fn().mockImplementation(() => {
+      return {
+        initialize: () => Promise.resolve(),
+        toCurrency: (value: number) => value
+      };
+    })
+  };
+});
+
+jest.mock('../services/data-provider.service');
+jest.mock('../services/exchange-rate-data.service');
+jest.mock('../services/rules.service');
+
 const DEFAULT_ACCOUNT_ID = '693a834b-eb89-42c9-ae47-35196c25d269';
 const USER_ID = 'ca6ce867-5d31-495a-bce9-5942bbca9237';

 describe('Portfolio', () => {
-  let alphaVantageService: AlphaVantageService;
-  let configurationService: ConfigurationService;
+  let accountService: AccountService;
  let dataProviderService: DataProviderService;
  let exchangeRateDataService: ExchangeRateDataService;
-  let ghostfolioScraperApiService: GhostfolioScraperApiService;
  let portfolio: Portfolio;
-  let prismaService: PrismaService;
-  let rakutenRapidApiService: RakutenRapidApiService;
  let rulesService: RulesService;
-  let yahooFinanceService: YahooFinanceService;

  beforeAll(async () => {
-    const app = await Test.createTestingModule({
-      imports: [],
-      providers: [
-        AlphaVantageService,
-        ConfigurationService,
-        DataProviderService,
-        ExchangeRateDataService,
-        GhostfolioScraperApiService,
-        PrismaService,
-        RakutenRapidApiService,
-        RulesService,
-        YahooFinanceService
-      ]
-    }).compile();
-
-    alphaVantageService = app.get<AlphaVantageService>(AlphaVantageService);
-    configurationService = app.get<ConfigurationService>(ConfigurationService);
-    dataProviderService = app.get<DataProviderService>(DataProviderService);
-    exchangeRateDataService = app.get<ExchangeRateDataService>(
-      ExchangeRateDataService
+    accountService = new AccountService(null, null, null);
+    dataProviderService = new DataProviderService(
+      null,
+      null,
+      null,
+      null,
+      null,
+      null
    );
-    ghostfolioScraperApiService = app.get<GhostfolioScraperApiService>(
-      GhostfolioScraperApiService
-    );
-    prismaService = app.get<PrismaService>(PrismaService);
-    rakutenRapidApiService = app.get<RakutenRapidApiService>(
-      RakutenRapidApiService
-    );
-    rulesService = app.get<RulesService>(RulesService);
-    yahooFinanceService = app.get<YahooFinanceService>(YahooFinanceService);
+    exchangeRateDataService = new ExchangeRateDataService(null);
+    rulesService = new RulesService();

    await exchangeRateDataService.initialize();

    portfolio = new Portfolio(
+      accountService,
      dataProviderService,
      exchangeRateDataService,
      rulesService
    );
    portfolio.setUser({
      accessToken: null,
+      Account: [
+        {
+          accountType: AccountType.SECURITIES,
+          balance: 0,
+          createdAt: new Date(),
+          currency: Currency.USD,
+          id: DEFAULT_ACCOUNT_ID,
+          isDefault: true,
+          name: 'Default Account',
+          platformId: null,
+          updatedAt: new Date(),
+          userId: USER_ID
+        }
+      ],
      alias: 'Test',
+      authChallenge: null,
      createdAt: new Date(),
      id: USER_ID,
      provider: null,
@ -78,7 +144,8 @@ describe('Portfolio', () => {
      Settings: {
        currency: Currency.CHF,
        updatedAt: new Date(),
-        userId: USER_ID
+        userId: USER_ID,
+        viewMode: ViewMode.DEFAULT
      },
      thirdPartyId: null,
      updatedAt: new Date()
@ -94,12 +161,52 @@ describe('Portfolio', () => {

    it('should return empty details', async () => {
      const details = await portfolio.getDetails('1d');
-      expect(details).toEqual({});
+      expect(details).toMatchObject({
+        _GF_CASH: {
+          accounts: {},
+          allocationCurrent: NaN, // TODO
+          allocationInvestment: NaN, // TODO
+          countries: [],
+          currency: 'CHF',
+          grossPerformance: 0,
+          grossPerformancePercent: 0,
+          investment: 0,
+          marketPrice: 0,
+          marketState: 'open',
+          name: 'Cash',
+          quantity: 0,
+          sectors: [],
+          symbol: '_GF_CASH',
+          transactionCount: 0,
+          type: 'Cash',
+          value: 0
+        }
+      });
    });

    it('should return empty details', async () => {
      const details = await portfolio.getDetails('max');
-      expect(details).toEqual({});
+      expect(details).toMatchObject({
+        _GF_CASH: {
+          accounts: {},
+          allocationCurrent: NaN, // TODO
+          allocationInvestment: NaN, // TODO
+          countries: [],
+          currency: 'CHF',
+          grossPerformance: 0,
+          grossPerformancePercent: 0,
+          investment: 0,
+          marketPrice: 0,
+          marketState: 'open',
+          name: 'Cash',
+          quantity: 0,
+          sectors: [],
+          symbol: '_GF_CASH',
+          transactionCount: 0,
+          type: 'Cash',
+          value: 0
+        }
+      });
    });

    it('should return zero performance for 1d', async () => {
@ -133,12 +240,13 @@ describe('Portfolio', () => {
          accountUserId: USER_ID,
          createdAt: null,
          currency: Currency.USD,
+          dataSource: DataSource.YAHOO,
          fee: 0,
          date: new Date(),
          id: '8d999347-dee2-46ee-88e1-26b344e71fcc',
-          platformId: null,
          quantity: 1,
          symbol: 'BTCUSD',
+          symbolProfileId: null,
          type: Type.BUY,
          unitPrice: 49631.24,
          updatedAt: null,
@ -157,20 +265,8 @@ describe('Portfolio', () => {
      const details = await portfolio.getDetails('1d');
      expect(details).toMatchObject({
        BTCUSD: {
-          currency: Currency.USD,
-          exchange: 'Other',
-          grossPerformance: 0,
-          grossPerformancePercent: 0,
-          investment: exchangeRateDataService.toCurrency(
-            1 * 49631.24,
-            Currency.USD,
-            baseCurrency
-          ),
-          // marketPrice: 57973.008,
-          marketState: MarketState.open,
-          name: 'Bitcoin USD',
-          platforms: {
-            Other: {
+          accounts: {
+            [UNKNOWN_KEY]: {
              /*current: exchangeRateDataService.toCurrency(
                1 * 49631.24,
                Currency.USD,
@ -183,10 +279,24 @@ describe('Portfolio', () => {
              )
            }
          },
+          allocationCurrent: 1,
+          allocationInvestment: 1,
+          countries: [],
+          currency: Currency.USD,
+          exchange: UNKNOWN_KEY,
+          grossPerformance: 0,
+          grossPerformancePercent: 0,
+          investment: exchangeRateDataService.toCurrency(
+            1 * 49631.24,
+            Currency.USD,
+            baseCurrency
+          ),
+          marketPrice: 57973.008,
+          marketState: MarketState.open,
+          name: 'Bitcoin USD',
          quantity: 1,
-          // shareCurrent: 0.9999999559148652,
-          shareInvestment: 1,
          symbol: 'BTCUSD',
+          transactionCount: 1,
          type: 'Cryptocurrency'
        }
      });
@ -221,7 +331,9 @@ describe('Portfolio', () => {

      expect(portfolio.getPositions(getYesterday())).toMatchObject({});

-      expect(portfolio.getSymbols(getYesterday())).toEqual(['BTCUSD']);
+      expect(portfolio.getSymbols(getYesterday())).toEqual([]);
+
+      expect(portfolio.getSymbols(new Date())).toEqual(['BTCUSD']);
    });
  });

@ -233,12 +345,13 @@ describe('Portfolio', () => {
          accountUserId: USER_ID,
          createdAt: null,
          currency: Currency.USD,
+          dataSource: DataSource.YAHOO,
          fee: 0,
          date: new Date(getUtc('2018-01-05')),
          id: '4a5a5c6e-659d-45cc-9fd4-fd6c873b50fb',
-          platformId: null,
          quantity: 0.2,
          symbol: 'ETHUSD',
+          symbolProfileId: null,
          type: Type.BUY,
          unitPrice: 991.49,
          updatedAt: null,
@ -254,27 +367,16 @@ describe('Portfolio', () => {
        )
      );

-      const details = await portfolio.getDetails('1d');
+      /*const details = await portfolio.getDetails('1d');
      expect(details).toMatchObject({
        ETHUSD: {
-          currency: Currency.USD,
-          exchange: 'Other',
-          // grossPerformance: 0,
-          // grossPerformancePercent: 0,
-          investment: exchangeRateDataService.toCurrency(
-            0.2 * 991.49,
-            Currency.USD,
-            baseCurrency
-          ),
-          // marketPrice: 57973.008,
-          name: 'Ethereum USD',
-          platforms: {
-            Other: {
-              /*current: exchangeRateDataService.toCurrency(
+          accounts: {
+            [UNKNOWN_KEY]: {
+              current: exchangeRateDataService.toCurrency(
                0.2 * 991.49,
                Currency.USD,
                baseCurrency
-              ),*/
+              ),
              original: exchangeRateDataService.toCurrency(
                0.2 * 991.49,
                Currency.USD,
@ -282,13 +384,26 @@ describe('Portfolio', () => {
              )
            }
          },
+          // allocationCurrent: 1,
+          allocationInvestment: 1,
+          countries: [],
+          currency: Currency.USD,
+          exchange: UNKNOWN_KEY,
+          // grossPerformance: 0,
+          // grossPerformancePercent: 0,
+          investment: exchangeRateDataService.toCurrency(
+            0.2 * 991.49,
+            Currency.USD,
+            baseCurrency
+          ),
+          marketPrice: 3915.337,
+          name: 'Ethereum USD',
          quantity: 0.2,
-          // shareCurrent: 1,
-          shareInvestment: 1,
+          transactionCount: 1,
          symbol: 'ETHUSD',
          type: 'Cryptocurrency'
        }
-      });
+      });*/

      expect(portfolio.getFees()).toEqual(0);

@ -312,7 +427,7 @@ describe('Portfolio', () => {
            baseCurrency
          ),
          investmentInOriginalCurrency: 0.2 * 991.49,
-          // marketPrice: 0,
+          // marketPrice: 3915.337,
          quantity: 0.2
        }
      });
@ -327,12 +442,13 @@ describe('Portfolio', () => {
          accountUserId: USER_ID,
          createdAt: null,
          currency: Currency.USD,
+          dataSource: DataSource.YAHOO,
          fee: 0,
          date: new Date(getUtc('2018-01-05')),
          id: '4a5a5c6e-659d-45cc-9fd4-fd6c873b50fb',
-          platformId: null,
          quantity: 0.2,
          symbol: 'ETHUSD',
+          symbolProfileId: null,
          type: Type.BUY,
          unitPrice: 991.49,
          updatedAt: null,
@ -343,12 +459,13 @@ describe('Portfolio', () => {
          accountUserId: USER_ID,
          createdAt: null,
          currency: Currency.USD,
+          dataSource: DataSource.YAHOO,
          fee: 0,
          date: new Date(getUtc('2018-01-28')),
          id: '4a5a5c6e-659d-45cc-9fd4-fd6c873b50fc',
-          platformId: null,
          quantity: 0.3,
          symbol: 'ETHUSD',
+          symbolProfileId: null,
          type: Type.BUY,
          unitPrice: 1050,
          updatedAt: null,
@ -388,7 +505,7 @@ describe('Portfolio', () => {
              baseCurrency
            ),
          investmentInOriginalCurrency: 0.2 * 991.49 + 0.3 * 1050,
-          // marketPrice: 0,
+          // marketPrice: 3641.984,
          quantity: 0.5
        }
      });
@ -403,12 +520,13 @@ describe('Portfolio', () => {
          accountUserId: USER_ID,
          createdAt: null,
          currency: Currency.EUR,
+          dataSource: DataSource.YAHOO,
          date: new Date(getUtc('2017-08-16')),
          fee: 2.99,
          id: 'd96795b2-6ae6-420e-aa21-fabe5e45d475',
-          platformId: null,
          quantity: 0.05614682,
          symbol: 'BTCUSD',
+          symbolProfileId: null,
          type: Type.BUY,
          unitPrice: 3562.089535970158,
          updatedAt: null,
@ -419,12 +537,13 @@ describe('Portfolio', () => {
          accountUserId: USER_ID,
          createdAt: null,
          currency: Currency.USD,
+          dataSource: DataSource.YAHOO,
          fee: 2.99,
          date: new Date(getUtc('2018-01-05')),
          id: '4a5a5c6e-659d-45cc-9fd4-fd6c873b50fb',
-          platformId: null,
          quantity: 0.2,
          symbol: 'ETHUSD',
+          symbolProfileId: null,
          type: Type.BUY,
          unitPrice: 991.49,
          updatedAt: null,
@ -492,12 +611,13 @@ describe('Portfolio', () => {
          accountUserId: USER_ID,
          createdAt: null,
          currency: Currency.USD,
+          dataSource: DataSource.YAHOO,
          fee: 1.0,
          date: new Date(getUtc('2018-01-05')),
          id: '4a5a5c6e-659d-45cc-9fd4-fd6c873b50fb',
-          platformId: null,
          quantity: 0.2,
          symbol: 'ETHUSD',
+          symbolProfileId: null,
          type: Type.BUY,
          unitPrice: 991.49,
          updatedAt: null,
@ -508,12 +628,13 @@ describe('Portfolio', () => {
          accountUserId: USER_ID,
          createdAt: null,
          currency: Currency.USD,
+          dataSource: DataSource.YAHOO,
          fee: 1.0,
          date: new Date(getUtc('2018-01-28')),
          id: '4a5a5c6e-659d-45cc-9fd4-fd6c873b50fc',
-          platformId: null,
          quantity: 0.1,
          symbol: 'ETHUSD',
+          symbolProfileId: null,
          type: Type.SELL,
          unitPrice: 1050,
          updatedAt: null,
@ -524,12 +645,13 @@ describe('Portfolio', () => {
          accountUserId: USER_ID,
          createdAt: null,
          currency: Currency.USD,
+          dataSource: DataSource.YAHOO,
          fee: 1.0,
          date: new Date(getUtc('2018-01-31')),
          id: '4a5a5c6e-659d-45cc-9fd4-fd6c873b50fc',
-          platformId: null,
          quantity: 0.2,
          symbol: 'ETHUSD',
+          symbolProfileId: null,
          type: Type.BUY,
          unitPrice: 1050,
          updatedAt: null,
@ -537,8 +659,7 @@ describe('Portfolio', () => {
        }
      ]);

-      // TODO: Fix
-      /*expect(portfolio.getCommittedFunds()).toEqual(
+      expect(portfolio.getCommittedFunds()).toEqual(
        exchangeRateDataService.toCurrency(
          0.2 * 991.49,
          Currency.USD,
@ -554,7 +675,7 @@ describe('Portfolio', () => {
            Currency.USD,
            baseCurrency
          )
-      );*/
+      );

      expect(portfolio.getFees()).toEqual(
        exchangeRateDataService.toCurrency(3, Currency.USD, baseCurrency)
@ -566,12 +687,11 @@ describe('Portfolio', () => {
            (0.2 * 991.49 - 0.1 * 1050 + 0.2 * 1050) / (0.2 - 0.1 + 0.2),
          currency: Currency.USD,
          firstBuyDate: '2018-01-05T00:00:00.000Z',
-          // TODO: Fix
-          /*investment: exchangeRateDataService.toCurrency(
+          investment: exchangeRateDataService.toCurrency(
            0.2 * 991.49 - 0.1 * 1050 + 0.2 * 1050,
            Currency.USD,
            baseCurrency
-          ),*/
+          ),
          investmentInOriginalCurrency: 0.2 * 991.49 - 0.1 * 1050 + 0.2 * 1050,
          // marketPrice: 0,
          quantity: 0.2 - 0.1 + 0.2
@ -581,8 +701,4 @@ describe('Portfolio', () => {
      expect(portfolio.getSymbols(getYesterday())).toEqual(['ETHUSD']);
    });
  });
-
-  afterAll(async () => {
-    prismaService.$disconnect();
-  });
 });
--- a/apps/api/src/models/portfolio.ts
+++ b/apps/api/src/models/portfolio.ts
@ -1,8 +1,20 @@
+import { AccountService } from '@ghostfolio/api/app/account/account.service';
+import { CashDetails } from '@ghostfolio/api/app/account/interfaces/cash-details.interface';
+import { UNKNOWN_KEY, ghostfolioCashSymbol } from '@ghostfolio/common/config';
+import { getToday, getYesterday, resetHours } from '@ghostfolio/common/helper';
 import {
  PortfolioItem,
-  Position
-} from '@ghostfolio/api/app/portfolio/interfaces/portfolio-item.interface';
-import { getToday, getYesterday, resetHours } from '@ghostfolio/helper';
+  PortfolioPerformance,
+  PortfolioPosition,
+  PortfolioReport,
+  Position,
+  UserWithSettings
+} from '@ghostfolio/common/interfaces';
+import { Country } from '@ghostfolio/common/interfaces/country.interface';
+import { Sector } from '@ghostfolio/common/interfaces/sector.interface';
+import { DateRange, OrderWithAccount } from '@ghostfolio/common/types';
+import { Currency, Prisma } from '@prisma/client';
+import { continents, countries } from 'countries-list';
 import {
  add,
  format,
@ -22,26 +34,21 @@ import {
 import { cloneDeep, isEmpty } from 'lodash';
 import * as roundTo from 'round-to';

-import { UserWithSettings } from '../app/interfaces/user-with-settings';
-import { OrderWithPlatform } from '../app/order/interfaces/order-with-platform.type';
-import { DateRange } from '../app/portfolio/interfaces/date-range.type';
-import { PortfolioPerformance } from '../app/portfolio/interfaces/portfolio-performance.interface';
-import { PortfolioPosition } from '../app/portfolio/interfaces/portfolio-position.interface';
-import { PortfolioReport } from '../app/portfolio/interfaces/portfolio-report.interface';
 import { DataProviderService } from '../services/data-provider.service';
 import { ExchangeRateDataService } from '../services/exchange-rate-data.service';
-import { IOrder } from '../services/interfaces/interfaces';
+import { IOrder, MarketState, Type } from '../services/interfaces/interfaces';
 import { RulesService } from '../services/rules.service';
 import { PortfolioInterface } from './interfaces/portfolio.interface';
 import { Order } from './order';
+import { OrderType } from './order-type';
+import { AccountClusterRiskCurrentInvestment } from './rules/account-cluster-risk/current-investment';
+import { AccountClusterRiskInitialInvestment } from './rules/account-cluster-risk/initial-investment';
+import { AccountClusterRiskSingleAccount } from './rules/account-cluster-risk/single-account';
 import { CurrencyClusterRiskBaseCurrencyCurrentInvestment } from './rules/currency-cluster-risk/base-currency-current-investment';
 import { CurrencyClusterRiskBaseCurrencyInitialInvestment } from './rules/currency-cluster-risk/base-currency-initial-investment';
 import { CurrencyClusterRiskCurrentInvestment } from './rules/currency-cluster-risk/current-investment';
 import { CurrencyClusterRiskInitialInvestment } from './rules/currency-cluster-risk/initial-investment';
 import { FeeRatioInitialInvestment } from './rules/fees/fee-ratio-initial-investment';
-import { PlatformClusterRiskCurrentInvestment } from './rules/platform-cluster-risk/current-investment';
-import { PlatformClusterRiskInitialInvestment } from './rules/platform-cluster-risk/initial-investment';
-import { PlatformClusterRiskSinglePlatform } from './rules/platform-cluster-risk/single-platform';

 export class Portfolio implements PortfolioInterface {
  private orders: Order[] = [];
@ -49,6 +56,7 @@ export class Portfolio implements PortfolioInterface {
  private user: UserWithSettings;

  public constructor(
+    private accountService: AccountService,
    private dataProviderService: DataProviderService,
    private exchangeRateDataService: ExchangeRateDataService,
    private rulesService: RulesService
@ -68,7 +76,7 @@ export class Portfolio implements PortfolioInterface {

    const [portfolioItemsYesterday] = this.get(yesterday);

-    let positions: { [symbol: string]: Position } = {};
+    const positions: { [symbol: string]: Position } = {};

    this.getSymbols().forEach((symbol) => {
      positions[symbol] = {
@ -100,14 +108,45 @@ export class Portfolio implements PortfolioInterface {
      );

      // Set value after pushing today's portfolio items
-      this.portfolioItems[portfolioItemsLength - 1].value = this.getValue(
-        today
-      );
+      this.portfolioItems[portfolioItemsLength - 1].value =
+        this.getValue(today);
    }

    return this;
  }

+  public async addFuturePortfolioItems() {
+    let investment = this.getInvestment(new Date());
+
+    this.getOrders()
+      .filter((order) => order.getIsDraft() === true)
+      .forEach((order) => {
+        investment += this.exchangeRateDataService.toCurrency(
+          order.getTotal(),
+          order.getCurrency(),
+          this.user.Settings.currency
+        );
+
+        const portfolioItem = this.portfolioItems.find((item) => {
+          return item.date === order.getDate();
+        });
+
+        if (portfolioItem) {
+          portfolioItem.investment = investment;
+        } else {
+          this.portfolioItems.push({
+            investment,
+            date: order.getDate(),
+            grossPerformancePercent: 0,
+            positions: {},
+            value: 0
+          });
+        }
+      });
+
+    return this;
+  }
+
  public createFromData({
    orders,
    portfolioItems,
@ -119,25 +158,27 @@ export class Portfolio implements PortfolioInterface {
  }): Portfolio {
    orders.forEach(
      ({
+        account,
        currency,
        fee,
        date,
        id,
-        platform,
        quantity,
        symbol,
+        symbolProfile,
        type,
        unitPrice
      }) => {
        this.orders.push(
          new Order({
+            account,
            currency,
            fee,
            date,
            id,
-            platform,
            quantity,
            symbol,
+            symbolProfile,
            type,
            unitPrice
          })
@ -171,6 +212,8 @@ export class Portfolio implements PortfolioInterface {
      if (filteredPortfolio) {
        return [cloneDeep(filteredPortfolio)];
      }
+
+      return [];
    }

    return cloneDeep(this.portfolioItems);
@ -192,17 +235,23 @@ export class Portfolio implements PortfolioInterface {

    const [portfolioItemsNow] = await this.get(new Date());

-    const investment = this.getInvestment(new Date());
+    const cashDetails = await this.accountService.getCashDetails(
+      this.user.id,
+      this.user.Settings.currency
+    );
+    const investment = this.getInvestment(new Date()) + cashDetails.balance;
    const portfolioItems = this.get(new Date());
    const symbols = this.getSymbols(new Date());
-    const value = this.getValue();
+    const value = this.getValue() + cashDetails.balance;

    const details: { [symbol: string]: PortfolioPosition } = {};

    const data = await this.dataProviderService.get(symbols);

    symbols.forEach((symbol) => {
-      const platforms: PortfolioPosition['platforms'] = {};
+      const accounts: PortfolioPosition['accounts'] = {};
+      let countriesOfSymbol: Country[];
+      let sectorsOfSymbol: Sector[];
      const [portfolioItem] = portfolioItems;

      const ordersBySymbol = this.getOrders().filter((order) => {
@ -227,25 +276,51 @@ export class Portfolio implements PortfolioInterface {
          originalValueOfSymbol *= -1;
        }

-        if (platforms[orderOfSymbol.getPlatform()?.name || 'Other']?.current) {
-          platforms[
-            orderOfSymbol.getPlatform()?.name || 'Other'
-          ].current += currentValueOfSymbol;
-          platforms[
-            orderOfSymbol.getPlatform()?.name || 'Other'
-          ].original += originalValueOfSymbol;
+        if (
+          accounts[orderOfSymbol.getAccount()?.name || UNKNOWN_KEY]?.current
+        ) {
+          accounts[orderOfSymbol.getAccount()?.name || UNKNOWN_KEY].current +=
+            currentValueOfSymbol;
+          accounts[orderOfSymbol.getAccount()?.name || UNKNOWN_KEY].original +=
+            originalValueOfSymbol;
        } else {
-          platforms[orderOfSymbol.getPlatform()?.name || 'Other'] = {
+          accounts[orderOfSymbol.getAccount()?.name || UNKNOWN_KEY] = {
            current: currentValueOfSymbol,
            original: originalValueOfSymbol
          };
        }
+
+        countriesOfSymbol = (
+          (orderOfSymbol.getSymbolProfile()?.countries as Prisma.JsonArray) ??
+          []
+        ).map((country) => {
+          const { code, weight } = country as Prisma.JsonObject;
+
+          return {
+            code: code as string,
+            continent:
+              continents[countries[code as string]?.continent] ?? UNKNOWN_KEY,
+            name: countries[code as string]?.name ?? UNKNOWN_KEY,
+            weight: weight as number
+          };
+        });
+
+        sectorsOfSymbol = (
+          (orderOfSymbol.getSymbolProfile()?.sectors as Prisma.JsonArray) ?? []
+        ).map((sector) => {
+          const { name, weight } = sector as Prisma.JsonObject;
+
+          return {
+            name: (name as string) ?? UNKNOWN_KEY,
+            weight: weight as number
+          };
+        });
      });

      let now = portfolioItemsNow.positions[symbol].marketPrice;

      // 1d
-      let before = portfolioItemsBefore.positions[symbol].marketPrice;
+      let before = portfolioItemsBefore?.positions[symbol].marketPrice;

      if (aDateRange === 'ytd') {
        before =
@ -262,7 +337,7 @@ export class Portfolio implements PortfolioInterface {
      if (
        !isBefore(
          parseISO(portfolioItemsNow.positions[symbol].firstBuyDate),
-          parseISO(portfolioItemsBefore.date)
+          parseISO(portfolioItemsBefore?.date)
        )
      ) {
        // Trade was not before the date of portfolioItemsBefore, then override it with average price
@ -276,8 +351,17 @@ export class Portfolio implements PortfolioInterface {

      details[symbol] = {
        ...data[symbol],
-        platforms,
+        accounts,
        symbol,
+        allocationCurrent:
+          this.exchangeRateDataService.toCurrency(
+            portfolioItem.positions[symbol].quantity * now,
+            data[symbol]?.currency,
+            this.user.Settings.currency
+          ) / value,
+        allocationInvestment:
+          portfolioItem.positions[symbol].investment / investment,
+        countries: countriesOfSymbol,
        grossPerformance: roundTo(
          portfolioItemsNow.positions[symbol].quantity * (now - before),
          2
@ -285,18 +369,22 @@ export class Portfolio implements PortfolioInterface {
        grossPerformancePercent: roundTo((now - before) / before, 4),
        investment: portfolioItem.positions[symbol].investment,
        quantity: portfolioItem.positions[symbol].quantity,
-        shareCurrent:
-          this.exchangeRateDataService.toCurrency(
-            portfolioItem.positions[symbol].quantity * now,
-            data[symbol]?.currency,
-            this.user.Settings.currency
-          ) / value,
-        shareInvestment:
-          portfolioItem.positions[symbol].investment / investment,
-        transactionCount: portfolioItem.positions[symbol].transactionCount
+        sectors: sectorsOfSymbol,
+        transactionCount: portfolioItem.positions[symbol].transactionCount,
+        value: this.exchangeRateDataService.toCurrency(
+          portfolioItem.positions[symbol].quantity * now,
+          data[symbol]?.currency,
+          this.user.Settings.currency
+        )
      };
    });

+    details[ghostfolioCashSymbol] = await this.getCashPosition({
+      cashDetails,
+      investment,
+      value
+    });
+
    return details;
  }

@ -321,7 +409,11 @@ export class Portfolio implements PortfolioInterface {
  }

  public getMinDate() {
-    if (this.orders.length > 0) {
+    const orders = this.getOrders().filter(
+      (order) => order.getIsDraft() === false
+    );
+
+    if (orders.length > 0) {
      return new Date(this.orders[0].getDate());
    }

@ -396,6 +488,19 @@ export class Portfolio implements PortfolioInterface {

    return {
      rules: {
+        accountClusterRisk: await this.rulesService.evaluate(
+          this,
+          [
+            new AccountClusterRiskInitialInvestment(
+              this.exchangeRateDataService
+            ),
+            new AccountClusterRiskCurrentInvestment(
+              this.exchangeRateDataService
+            ),
+            new AccountClusterRiskSingleAccount(this.exchangeRateDataService)
+          ],
+          { baseCurrency: this.user.Settings.currency }
+        ),
        currencyClusterRisk: await this.rulesService.evaluate(
          this,
          [
@ -414,19 +519,6 @@ export class Portfolio implements PortfolioInterface {
          ],
          { baseCurrency: this.user.Settings.currency }
        ),
-        platformClusterRisk: await this.rulesService.evaluate(
-          this,
-          [
-            new PlatformClusterRiskSinglePlatform(this.exchangeRateDataService),
-            new PlatformClusterRiskInitialInvestment(
-              this.exchangeRateDataService
-            ),
-            new PlatformClusterRiskCurrentInvestment(
-              this.exchangeRateDataService
-            )
-          ],
-          { baseCurrency: this.user.Settings.currency }
-        ),
        fees: await this.rulesService.evaluate(
          this,
          [new FeeRatioInitialInvestment(this.exchangeRateDataService)],
@ -448,9 +540,11 @@ export class Portfolio implements PortfolioInterface {
        }
      }
    } else {
-      symbols = this.orders.map((order) => {
-        return order.getSymbol();
-      });
+      symbols = this.orders
+        .filter((order) => order.getIsDraft() === false)
+        .map((order) => {
+          return order.getSymbol();
+        });
    }

    // unique values
@ -459,7 +553,9 @@ export class Portfolio implements PortfolioInterface {

  public getTotalBuy() {
    return this.orders
-      .filter((order) => order.getType() === 'BUY')
+      .filter(
+        (order) => order.getIsDraft() === false && order.getType() === 'BUY'
+      )
      .map((order) => {
        return this.exchangeRateDataService.toCurrency(
          order.getTotal(),
@ -472,7 +568,9 @@ export class Portfolio implements PortfolioInterface {

  public getTotalSell() {
    return this.orders
-      .filter((order) => order.getType() === 'SELL')
+      .filter(
+        (order) => order.getIsDraft() === false && order.getType() === 'SELL'
+      )
      .map((order) => {
        return this.exchangeRateDataService.toCurrency(
          order.getTotal(),
@ -483,7 +581,13 @@ export class Portfolio implements PortfolioInterface {
      .reduce((previous, current) => previous + current, 0);
  }

-  public getOrders() {
+  public getOrders(aSymbol?: string) {
+    if (aSymbol) {
+      return this.orders.filter((order) => {
+        return order.getSymbol() === aSymbol;
+      });
+    }
+
    return this.orders;
  }

@ -522,20 +626,21 @@ export class Portfolio implements PortfolioInterface {
    return isFinite(value) ? value : null;
  }

-  public async setOrders(aOrders: OrderWithPlatform[]) {
+  public async setOrders(aOrders: OrderWithAccount[]) {
    this.orders = [];

    // Map data
    aOrders.forEach((order) => {
      this.orders.push(
        new Order({
-          currency: <any>order.currency,
+          account: order.Account,
+          currency: order.currency,
          date: order.date.toISOString(),
          fee: order.fee,
-          platform: order.Platform,
          quantity: order.quantity,
          symbol: order.symbol,
-          type: <any>order.type,
+          symbolProfile: order.SymbolProfile,
+          type: <OrderType>order.type,
          unitPrice: order.unitPrice
        })
      );
@ -552,6 +657,46 @@ export class Portfolio implements PortfolioInterface {
    return this;
  }

+  private async getCashPosition({
+    cashDetails,
+    investment,
+    value
+  }: {
+    cashDetails: CashDetails;
+    investment: number;
+    value: number;
+  }) {
+    const accounts = {};
+    const cashValue = cashDetails.balance;
+
+    cashDetails.accounts.forEach((account) => {
+      accounts[account.name] = {
+        current: account.balance,
+        original: account.balance
+      };
+    });
+
+    return {
+      accounts,
+      allocationCurrent: cashValue / value,
+      allocationInvestment: cashValue / investment,
+      countries: [],
+      currency: Currency.CHF,
+      grossPerformance: 0,
+      grossPerformancePercent: 0,
+      investment: cashValue,
+      marketPrice: 0,
+      marketState: MarketState.open,
+      name: Type.Cash,
+      quantity: 0,
+      sectors: [],
+      symbol: ghostfolioCashSymbol,
+      type: Type.Cash,
+      transactionCount: 0,
+      value: cashValue
+    };
+  }
+
  /**
   * TODO: Refactor
   */
@ -635,10 +780,10 @@ export class Portfolio implements PortfolioInterface {

      this.portfolioItems.push(
        cloneDeep({
+          positions,
          date: yesterday.toISOString(),
          grossPerformancePercent: 0,
          investment: 0,
-          positions: positions,
          value: 0
        })
      );
@ -695,8 +840,6 @@ export class Portfolio implements PortfolioInterface {
  }

  private updatePortfolioItems() {
-    // console.time('update-portfolio-items');
-
    let currentDate = new Date();

    const year = getYear(currentDate);
@ -720,107 +863,99 @@ export class Portfolio implements PortfolioInterface {
    }

    this.orders.forEach((order) => {
-      let index = this.portfolioItems.findIndex((item) => {
-        const dateOfOrder = setDate(parseISO(order.getDate()), 1);
-        return isSameDay(parseISO(item.date), dateOfOrder);
-      });
+      if (order.getIsDraft() === false) {
+        let index = this.portfolioItems.findIndex((item) => {
+          const dateOfOrder = setDate(parseISO(order.getDate()), 1);
+          return isSameDay(parseISO(item.date), dateOfOrder);
+        });

-      if (index === -1) {
-        // if not found, we only have one order, which means we do not loop below
-        index = 0;
-      }
-
-      for (let i = index; i < this.portfolioItems.length; i++) {
-        // Set currency
-        this.portfolioItems[i].positions[
-          order.getSymbol()
-        ].currency = order.getCurrency();
-
-        this.portfolioItems[i].positions[
-          order.getSymbol()
-        ].transactionCount += 1;
-
-        if (order.getType() === 'BUY') {
-          if (
-            !this.portfolioItems[i].positions[order.getSymbol()].firstBuyDate
-          ) {
-            this.portfolioItems[i].positions[
-              order.getSymbol()
-            ].firstBuyDate = resetHours(
-              parseISO(order.getDate())
-            ).toISOString();
-          }
-
-          this.portfolioItems[i].positions[
-            order.getSymbol()
-          ].quantity += order.getQuantity();
-          this.portfolioItems[i].positions[
-            order.getSymbol()
-          ].investment += this.exchangeRateDataService.toCurrency(
-            order.getTotal(),
-            order.getCurrency(),
-            this.user.Settings.currency
-          );
-          this.portfolioItems[i].positions[
-            order.getSymbol()
-          ].investmentInOriginalCurrency += order.getTotal();
-
-          this.portfolioItems[
-            i
-          ].investment += this.exchangeRateDataService.toCurrency(
-            order.getTotal(),
-            order.getCurrency(),
-            this.user.Settings.currency
-          );
-        } else if (order.getType() === 'SELL') {
-          this.portfolioItems[i].positions[
-            order.getSymbol()
-          ].quantity -= order.getQuantity();
-
-          if (
-            this.portfolioItems[i].positions[order.getSymbol()].quantity === 0
-          ) {
-            this.portfolioItems[i].positions[order.getSymbol()].investment = 0;
-            this.portfolioItems[i].positions[
-              order.getSymbol()
-            ].investmentInOriginalCurrency = 0;
-          } else {
-            this.portfolioItems[i].positions[
-              order.getSymbol()
-            ].investment -= this.exchangeRateDataService.toCurrency(
-              order.getTotal(),
-              order.getCurrency(),
-              this.user.Settings.currency
-            );
-            this.portfolioItems[i].positions[
-              order.getSymbol()
-            ].investmentInOriginalCurrency -= order.getTotal();
-          }
-
-          this.portfolioItems[
-            i
-          ].investment -= this.exchangeRateDataService.toCurrency(
-            order.getTotal(),
-            order.getCurrency(),
-            this.user.Settings.currency
-          );
+        if (index === -1) {
+          // if not found, we only have one order, which means we do not loop below
+          index = 0;
        }

-        this.portfolioItems[i].positions[order.getSymbol()].averagePrice =
-          this.portfolioItems[i].positions[order.getSymbol()]
-            .investmentInOriginalCurrency /
-          this.portfolioItems[i].positions[order.getSymbol()].quantity;
+        for (let i = index; i < this.portfolioItems.length; i++) {
+          // Set currency
+          this.portfolioItems[i].positions[order.getSymbol()].currency =
+            order.getCurrency();

-        const currentValue = this.getValue(
-          parseISO(this.portfolioItems[i].date)
-        );
+          this.portfolioItems[i].positions[
+            order.getSymbol()
+          ].transactionCount += 1;

-        this.portfolioItems[i].grossPerformancePercent =
-          currentValue / this.portfolioItems[i].investment - 1 || 0;
-        this.portfolioItems[i].value = currentValue;
+          if (order.getType() === 'BUY') {
+            if (
+              !this.portfolioItems[i].positions[order.getSymbol()].firstBuyDate
+            ) {
+              this.portfolioItems[i].positions[order.getSymbol()].firstBuyDate =
+                resetHours(parseISO(order.getDate())).toISOString();
+            }
+
+            this.portfolioItems[i].positions[order.getSymbol()].quantity +=
+              order.getQuantity();
+            this.portfolioItems[i].positions[order.getSymbol()].investment +=
+              this.exchangeRateDataService.toCurrency(
+                order.getTotal(),
+                order.getCurrency(),
+                this.user.Settings.currency
+              );
+            this.portfolioItems[i].positions[
+              order.getSymbol()
+            ].investmentInOriginalCurrency += order.getTotal();
+
+            this.portfolioItems[i].investment +=
+              this.exchangeRateDataService.toCurrency(
+                order.getTotal(),
+                order.getCurrency(),
+                this.user.Settings.currency
+              );
+          } else if (order.getType() === 'SELL') {
+            this.portfolioItems[i].positions[order.getSymbol()].quantity -=
+              order.getQuantity();
+
+            if (
+              this.portfolioItems[i].positions[order.getSymbol()].quantity === 0
+            ) {
+              this.portfolioItems[i].positions[
+                order.getSymbol()
+              ].investment = 0;
+              this.portfolioItems[i].positions[
+                order.getSymbol()
+              ].investmentInOriginalCurrency = 0;
+            } else {
+              this.portfolioItems[i].positions[order.getSymbol()].investment -=
+                this.exchangeRateDataService.toCurrency(
+                  order.getTotal(),
+                  order.getCurrency(),
+                  this.user.Settings.currency
+                );
+              this.portfolioItems[i].positions[
+                order.getSymbol()
+              ].investmentInOriginalCurrency -= order.getTotal();
+            }
+
+            this.portfolioItems[i].investment -=
+              this.exchangeRateDataService.toCurrency(
+                order.getTotal(),
+                order.getCurrency(),
+                this.user.Settings.currency
+              );
+          }
+
+          this.portfolioItems[i].positions[order.getSymbol()].averagePrice =
+            this.portfolioItems[i].positions[order.getSymbol()]
+              .investmentInOriginalCurrency /
+            this.portfolioItems[i].positions[order.getSymbol()].quantity;
+
+          const currentValue = this.getValue(
+            parseISO(this.portfolioItems[i].date)
+          );
+
+          this.portfolioItems[i].grossPerformancePercent =
+            currentValue / this.portfolioItems[i].investment - 1 || 0;
+          this.portfolioItems[i].value = currentValue;
+        }
      }
    });
-
-    // console.timeEnd('update-portfolio-items');
  }
 }
--- a/apps/api/src/models/rule.ts
+++ b/apps/api/src/models/rule.ts
@ -1,7 +1,7 @@
-import { groupBy } from '@ghostfolio/helper';
+import { groupBy } from '@ghostfolio/common/helper';
+import { PortfolioPosition } from '@ghostfolio/common/interfaces';
 import { Currency } from '@prisma/client';

-import { PortfolioPosition } from '../app/portfolio/interfaces/portfolio-position.interface';
 import { ExchangeRateDataService } from '../services/exchange-rate-data.service';
 import { EvaluationResult } from './interfaces/evaluation-result.interface';
 import { RuleInterface } from './interfaces/rule.interface';
--- a/apps/api/src/models/rules/platform-cluster-risk/current-investment.ts
+++ b/apps/api/src/models/rules/platform-cluster-risk/current-investment.ts
@ -1,9 +1,9 @@
-import { PortfolioPosition } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-position.interface';
 import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
+import { PortfolioPosition } from '@ghostfolio/common/interfaces';

 import { Rule } from '../../rule';

-export class PlatformClusterRiskCurrentInvestment extends Rule {
+export class AccountClusterRiskCurrentInvestment extends Rule {
  public constructor(public exchangeRateDataService: ExchangeRateDataService) {
    super(exchangeRateDataService, {
      name: 'Current Investment'
@ -18,24 +18,22 @@ export class PlatformClusterRiskCurrentInvestment extends Rule {
    }
  ) {
    const ruleSettings =
-      aRuleSettingsMap[PlatformClusterRiskCurrentInvestment.name];
+      aRuleSettingsMap[AccountClusterRiskCurrentInvestment.name];

-    const platforms: {
+    const accounts: {
      [symbol: string]: Pick<PortfolioPosition, 'name'> & {
        investment: number;
      };
    } = {};

    Object.values(aPositions).forEach((position) => {
-      for (const [platform, { current }] of Object.entries(
-        position.platforms
-      )) {
-        if (platforms[platform]?.investment) {
-          platforms[platform].investment += current;
+      for (const [account, { current }] of Object.entries(position.accounts)) {
+        if (accounts[account]?.investment) {
+          accounts[account].investment += current;
        } else {
-          platforms[platform] = {
+          accounts[account] = {
            investment: current,
-            name: platform
+            name: account
          };
        }
      }
@ -44,17 +42,17 @@ export class PlatformClusterRiskCurrentInvestment extends Rule {
    let maxItem;
    let totalInvestment = 0;

-    Object.values(platforms).forEach((platform) => {
+    Object.values(accounts).forEach((account) => {
      if (!maxItem) {
-        maxItem = platform;
+        maxItem = account;
      }

      // Calculate total investment
-      totalInvestment += platform.investment;
+      totalInvestment += account.investment;

      // Find maximum
-      if (platform.investment > maxItem?.investment) {
-        maxItem = platform;
+      if (account.investment > maxItem?.investment) {
+        maxItem = account;
      }
    });

--- a/apps/api/src/models/rules/platform-cluster-risk/initial-investment.ts
+++ b/apps/api/src/models/rules/platform-cluster-risk/initial-investment.ts
@ -1,9 +1,9 @@
-import { PortfolioPosition } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-position.interface';
+import { PortfolioPosition } from '@ghostfolio/common/interfaces';
 import { ExchangeRateDataService } from 'apps/api/src/services/exchange-rate-data.service';

 import { Rule } from '../../rule';

-export class PlatformClusterRiskInitialInvestment extends Rule {
+export class AccountClusterRiskInitialInvestment extends Rule {
  public constructor(public exchangeRateDataService: ExchangeRateDataService) {
    super(exchangeRateDataService, {
      name: 'Initial Investment'
@ -18,7 +18,7 @@ export class PlatformClusterRiskInitialInvestment extends Rule {
    }
  ) {
    const ruleSettings =
-      aRuleSettingsMap[PlatformClusterRiskInitialInvestment.name];
+      aRuleSettingsMap[AccountClusterRiskInitialInvestment.name];

    const platforms: {
      [symbol: string]: Pick<PortfolioPosition, 'name'> & {
@ -27,15 +27,13 @@ export class PlatformClusterRiskInitialInvestment extends Rule {
    } = {};

    Object.values(aPositions).forEach((position) => {
-      for (const [platform, { original }] of Object.entries(
-        position.platforms
-      )) {
-        if (platforms[platform]?.investment) {
-          platforms[platform].investment += original;
+      for (const [account, { original }] of Object.entries(position.accounts)) {
+        if (platforms[account]?.investment) {
+          platforms[account].investment += original;
        } else {
-          platforms[platform] = {
+          platforms[account] = {
            investment: original,
-            name: platform
+            name: account
          };
        }
      }
--- a/apps/api/src/models/rules/platform-cluster-risk/single-platform.ts
+++ b/apps/api/src/models/rules/platform-cluster-risk/single-platform.ts
@ -1,35 +1,35 @@
-import { PortfolioPosition } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-position.interface';
+import { PortfolioPosition } from '@ghostfolio/common/interfaces';
 import { ExchangeRateDataService } from 'apps/api/src/services/exchange-rate-data.service';

 import { Rule } from '../../rule';

-export class PlatformClusterRiskSinglePlatform extends Rule {
+export class AccountClusterRiskSingleAccount extends Rule {
  public constructor(public exchangeRateDataService: ExchangeRateDataService) {
    super(exchangeRateDataService, {
-      name: 'Single Platform'
+      name: 'Single Account'
    });
  }

  public evaluate(positions: { [symbol: string]: PortfolioPosition }) {
-    const platforms: string[] = [];
+    const accounts: string[] = [];

    Object.values(positions).forEach((position) => {
-      for (const [platform] of Object.entries(position.platforms)) {
-        if (!platforms.includes(platform)) {
-          platforms.push(platform);
+      for (const [account] of Object.entries(position.accounts)) {
+        if (!accounts.includes(account)) {
+          accounts.push(account);
        }
      }
    });

-    if (platforms.length === 1) {
+    if (accounts.length === 1) {
      return {
-        evaluation: `All your investment is managed by a single platform`,
+        evaluation: `All your investment is managed by a single account`,
        value: false
      };
    }

    return {
-      evaluation: `Your investment is managed by ${platforms.length} platforms`,
+      evaluation: `Your investment is managed by ${accounts.length} accounts`,
      value: true
    };
  }
--- a/apps/api/src/models/rules/currency-cluster-risk/base-currency-current-investment.ts
+++ b/apps/api/src/models/rules/currency-cluster-risk/base-currency-current-investment.ts
@ -1,5 +1,5 @@
-import { PortfolioPosition } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-position.interface';
 import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
+import { PortfolioPosition } from '@ghostfolio/common/interfaces';

 import { Rule } from '../../rule';

--- a/apps/api/src/models/rules/currency-cluster-risk/base-currency-initial-investment.ts
+++ b/apps/api/src/models/rules/currency-cluster-risk/base-currency-initial-investment.ts
@ -1,4 +1,4 @@
-import { PortfolioPosition } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-position.interface';
+import { PortfolioPosition } from '@ghostfolio/common/interfaces';
 import { ExchangeRateDataService } from 'apps/api/src/services/exchange-rate-data.service';

 import { Rule } from '../../rule';
--- a/apps/api/src/models/rules/currency-cluster-risk/current-investment.ts
+++ b/apps/api/src/models/rules/currency-cluster-risk/current-investment.ts
@ -1,4 +1,4 @@
-import { PortfolioPosition } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-position.interface';
+import { PortfolioPosition } from '@ghostfolio/common/interfaces';
 import { ExchangeRateDataService } from 'apps/api/src/services/exchange-rate-data.service';

 import { Rule } from '../../rule';
--- a/apps/api/src/models/rules/currency-cluster-risk/initial-investment.ts
+++ b/apps/api/src/models/rules/currency-cluster-risk/initial-investment.ts
@ -1,4 +1,4 @@
-import { PortfolioPosition } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-position.interface';
+import { PortfolioPosition } from '@ghostfolio/common/interfaces';
 import { ExchangeRateDataService } from 'apps/api/src/services/exchange-rate-data.service';

 import { Rule } from '../../rule';
--- a/apps/api/src/models/rules/fees/fee-ratio-initial-investment.ts
+++ b/apps/api/src/models/rules/fees/fee-ratio-initial-investment.ts
@ -1,4 +1,4 @@
-import { PortfolioPosition } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-position.interface';
+import { PortfolioPosition } from '@ghostfolio/common/interfaces';
 import { ExchangeRateDataService } from 'apps/api/src/services/exchange-rate-data.service';

 import { Rule } from '../../rule';
--- a/apps/api/src/services/configuration.service.ts
+++ b/apps/api/src/services/configuration.service.ts
@ -1,6 +1,8 @@
 import { Injectable } from '@nestjs/common';
-import { bool, cleanEnv, num, port, str } from 'envalid';
+import { DataSource } from '@prisma/client';
+import { bool, cleanEnv, host, json, num, port, str } from 'envalid';

+import { environment } from '../environments/environment';
 import { Environment } from './interfaces/environment.interface';

@Injectable()
@ -12,9 +14,12 @@ export class ConfigurationService {
      ACCESS_TOKEN_SALT: str(),
      ALPHA_VANTAGE_API_KEY: str({ default: '' }),
      CACHE_TTL: num({ default: 1 }),
+      DATA_SOURCES: json({ default: JSON.stringify([DataSource.YAHOO]) }),
      ENABLE_FEATURE_CUSTOM_SYMBOLS: bool({ default: false }),
      ENABLE_FEATURE_FEAR_AND_GREED_INDEX: bool({ default: false }),
+      ENABLE_FEATURE_IMPORT: bool({ default: !environment.production }),
      ENABLE_FEATURE_SOCIAL_LOGIN: bool({ default: false }),
+      ENABLE_FEATURE_STATISTICS: bool({ default: false }),
      ENABLE_FEATURE_SUBSCRIPTION: bool({ default: false }),
      GOOGLE_CLIENT_ID: str({ default: 'dummyClientId' }),
      GOOGLE_SECRET: str({ default: 'dummySecret' }),
@ -24,7 +29,10 @@ export class ConfigurationService {
      RAKUTEN_RAPID_API_KEY: str({ default: '' }),
      REDIS_HOST: str({ default: 'localhost' }),
      REDIS_PORT: port({ default: 6379 }),
-      ROOT_URL: str({ default: 'http://localhost:4200' })
+      ROOT_URL: str({ default: 'http://localhost:4200' }),
+      STRIPE_PUBLIC_KEY: str({ default: '' }),
+      STRIPE_SECRET_KEY: str({ default: '' }),
+      WEB_AUTH_RP_ID: host({ default: 'localhost' })
    });
  }

--- a/apps/api/src/services/data-gathering.service.ts
+++ b/apps/api/src/services/data-gathering.service.ts
@ -1,13 +1,14 @@
+import { benchmarks, currencyPairs } from '@ghostfolio/common/config';
 import {
-  benchmarks,
-  currencyPairs,
  getUtc,
  isGhostfolioScraperApiSymbol,
  resetHours
-} from '@ghostfolio/helper';
+} from '@ghostfolio/common/helper';
 import { Injectable } from '@nestjs/common';
+import { DataSource } from '@prisma/client';
 import {
  differenceInHours,
+  endOfToday,
  format,
  getDate,
  getMonth,
@ -19,6 +20,7 @@ import {
 import { ConfigurationService } from './configuration.service';
 import { DataProviderService } from './data-provider.service';
 import { GhostfolioScraperApiService } from './data-provider/ghostfolio-scraper-api/ghostfolio-scraper-api.service';
+import { IDataGatheringItem } from './interfaces/interfaces';
 import { PrismaService } from './prisma.service';

@Injectable()
@ -116,15 +118,13 @@ export class DataGatheringService {
    }
  }

-  public async gatherSymbols(
-    aSymbolsWithStartDate: { date: Date; symbol: string }[]
-  ) {
+  public async gatherSymbols(aSymbolsWithStartDate: IDataGatheringItem[]) {
    let hasError = false;

-    for (const { date, symbol } of aSymbolsWithStartDate) {
+    for (const { dataSource, date, symbol } of aSymbolsWithStartDate) {
      try {
        const historicalData = await this.dataProviderService.getHistoricalRaw(
-          [symbol],
+          [{ dataSource, symbol }],
          date,
          new Date()
        );
@ -185,20 +185,25 @@ export class DataGatheringService {
    }
  }

-  public async getCustomSymbolsToGather(startDate?: Date) {
-    const scraperConfigurations = await this.ghostfolioScraperApi.getScraperConfigurations();
+  public async getCustomSymbolsToGather(
+    startDate?: Date
+  ): Promise<IDataGatheringItem[]> {
+    const scraperConfigurations =
+      await this.ghostfolioScraperApi.getScraperConfigurations();

    return scraperConfigurations.map((scraperConfiguration) => {
      return {
+        dataSource: DataSource.GHOSTFOLIO,
        date: startDate,
        symbol: scraperConfiguration.symbol
      };
    });
  }

-  private getBenchmarksToGather(startDate: Date) {
-    const benchmarksToGather = benchmarks.map((symbol) => {
+  private getBenchmarksToGather(startDate: Date): IDataGatheringItem[] {
+    const benchmarksToGather = benchmarks.map(({ dataSource, symbol }) => {
      return {
+        dataSource,
        symbol,
        date: startDate
      };
@ -206,6 +211,7 @@ export class DataGatheringService {

    if (this.configurationService.get('ENABLE_FEATURE_FEAR_AND_GREED_INDEX')) {
      benchmarksToGather.push({
+        dataSource: DataSource.RAKUTEN,
        date: startDate,
        symbol: 'GF.FEAR_AND_GREED_INDEX'
      });
@ -214,16 +220,21 @@ export class DataGatheringService {
    return benchmarksToGather;
  }

-  private async getSymbols7D(): Promise<{ date: Date; symbol: string }[]> {
+  private async getSymbols7D(): Promise<IDataGatheringItem[]> {
    const startDate = subDays(resetHours(new Date()), 7);

    const distinctOrders = await this.prisma.order.findMany({
      distinct: ['symbol'],
      orderBy: [{ symbol: 'asc' }],
-      select: { symbol: true }
+      select: { dataSource: true, symbol: true },
+      where: {
+        date: {
+          lt: endOfToday() // no draft
+        }
+      }
    });

-    const distinctOrdersWithDate = distinctOrders
+    const distinctOrdersWithDate: IDataGatheringItem[] = distinctOrders
      .filter((distinctOrder) => {
        return !isGhostfolioScraperApiSymbol(distinctOrder.symbol);
      })
@ -234,12 +245,15 @@ export class DataGatheringService {
        };
      });

-    const currencyPairsToGather = currencyPairs.map((symbol) => {
-      return {
-        symbol,
-        date: startDate
-      };
-    });
+    const currencyPairsToGather = currencyPairs.map(
+      ({ dataSource, symbol }) => {
+        return {
+          dataSource,
+          symbol,
+          date: startDate
+        };
+      }
+    );

    const customSymbolsToGather = await this.getCustomSymbolsToGather(
      startDate
@ -253,24 +267,32 @@ export class DataGatheringService {
    ];
  }

-  private async getSymbolsMax() {
+  private async getSymbolsMax(): Promise<IDataGatheringItem[]> {
    const startDate = new Date(getUtc('2015-01-01'));

    const customSymbolsToGather = await this.getCustomSymbolsToGather(
      startDate
    );

-    const currencyPairsToGather = currencyPairs.map((symbol) => {
-      return {
-        symbol,
-        date: startDate
-      };
-    });
+    const currencyPairsToGather = currencyPairs.map(
+      ({ dataSource, symbol }) => {
+        return {
+          dataSource,
+          symbol,
+          date: startDate
+        };
+      }
+    );

    const distinctOrders = await this.prisma.order.findMany({
      distinct: ['symbol'],
      orderBy: [{ date: 'asc' }],
-      select: { date: true, symbol: true }
+      select: { dataSource: true, date: true, symbol: true },
+      where: {
+        date: {
+          lt: endOfToday() // no draft
+        }
+      }
    });

    return [
--- a/apps/api/src/services/data-provider.service.ts
+++ b/apps/api/src/services/data-provider.service.ts
@ -1,10 +1,10 @@
 import {
-  isCrypto,
  isGhostfolioScraperApiSymbol,
  isRakutenRapidApiSymbol
-} from '@ghostfolio/helper';
+} from '@ghostfolio/common/helper';
+import { Granularity } from '@ghostfolio/common/types';
 import { Injectable } from '@nestjs/common';
-import { MarketData } from '@prisma/client';
+import { DataSource, MarketData } from '@prisma/client';
 import { format } from 'date-fns';

 import { ConfigurationService } from './configuration.service';
@ -12,16 +12,15 @@ import { AlphaVantageService } from './data-provider/alpha-vantage/alpha-vantage
 import { GhostfolioScraperApiService } from './data-provider/ghostfolio-scraper-api/ghostfolio-scraper-api.service';
 import { RakutenRapidApiService } from './data-provider/rakuten-rapid-api/rakuten-rapid-api.service';
 import { YahooFinanceService } from './data-provider/yahoo-finance/yahoo-finance.service';
-import { DataProviderInterface } from './interfaces/data-provider.interface';
-import { Granularity } from './interfaces/granularity.type';
 import {
+  IDataGatheringItem,
  IDataProviderHistoricalResponse,
  IDataProviderResponse
 } from './interfaces/interfaces';
 import { PrismaService } from './prisma.service';

@Injectable()
-export class DataProviderService implements DataProviderInterface {
+export class DataProviderService {
  public constructor(
    private readonly alphaVantageService: AlphaVantageService,
    private readonly configurationService: ConfigurationService,
@ -120,68 +119,57 @@ export class DataProviderService implements DataProviderInterface {
  }

  public async getHistoricalRaw(
-    aSymbols: string[],
+    aDataGatheringItems: IDataGatheringItem[],
    from: Date,
    to: Date
  ): Promise<{
    [symbol: string]: { [date: string]: IDataProviderHistoricalResponse };
  }> {
-    const filteredSymbols = aSymbols.filter((symbol) => {
-      return !isGhostfolioScraperApiSymbol(symbol);
-    });
+    const result: {
+      [symbol: string]: { [date: string]: IDataProviderHistoricalResponse };
+    } = {};

-    const dataOfYahoo = await this.yahooFinanceService.getHistorical(
-      filteredSymbols,
-      undefined,
-      from,
-      to
-    );
-
-    if (aSymbols.length === 1) {
-      const symbol = aSymbols[0];
-
-      if (
-        isCrypto(symbol) &&
-        this.configurationService.get('ALPHA_VANTAGE_API_KEY')
-      ) {
-        // Merge data from Yahoo with data from Alpha Vantage
-        const dataOfAlphaVantage = await this.alphaVantageService.getHistorical(
-          [symbol],
-          undefined,
-          from,
-          to
+    const promises: Promise<{
+      data: { [date: string]: IDataProviderHistoricalResponse };
+      symbol: string;
+    }>[] = [];
+    for (const { dataSource, symbol } of aDataGatheringItems) {
+      const dataProvider = this.getDataProvider(dataSource);
+      if (dataProvider.canHandle(symbol)) {
+        promises.push(
+          dataProvider
+            .getHistorical([symbol], undefined, from, to)
+            .then((data) => ({ data: data?.[symbol], symbol }))
        );
-
-        return {
-          [symbol]: {
-            ...dataOfYahoo[symbol],
-            ...dataOfAlphaVantage[symbol]
-          }
-        };
-      } else if (isGhostfolioScraperApiSymbol(symbol)) {
-        const dataOfGhostfolioScraperApi = await this.ghostfolioScraperApiService.getHistorical(
-          [symbol],
-          undefined,
-          from,
-          to
-        );
-
-        return dataOfGhostfolioScraperApi;
-      } else if (
-        isRakutenRapidApiSymbol(symbol) &&
-        this.configurationService.get('RAKUTEN_RAPID_API_KEY')
-      ) {
-        const dataOfRakutenRapidApi = await this.rakutenRapidApiService.getHistorical(
-          [symbol],
-          undefined,
-          from,
-          to
-        );
-
-        return dataOfRakutenRapidApi;
      }
    }

-    return dataOfYahoo;
+    const allData = await Promise.all(promises);
+    for (const { data, symbol } of allData) {
+      result[symbol] = data;
+    }
+
+    return result;
+  }
+
+  public async search(aSymbol: string) {
+    return this.getDataProvider(
+      <DataSource>this.configurationService.get('DATA_SOURCES')[0]
+    ).search(aSymbol);
+  }
+
+  private getDataProvider(providerName: DataSource) {
+    switch (providerName) {
+      case DataSource.ALPHA_VANTAGE:
+        return this.alphaVantageService;
+      case DataSource.GHOSTFOLIO:
+        return this.ghostfolioScraperApiService;
+      case DataSource.RAKUTEN:
+        return this.rakutenRapidApiService;
+      case DataSource.YAHOO:
+        return this.yahooFinanceService;
+      default:
+        throw new Error('No data provider has been found.');
+    }
  }
 }
--- a/apps/api/src/services/data-provider/alpha-vantage/alpha-vantage.service.ts
+++ b/apps/api/src/services/data-provider/alpha-vantage/alpha-vantage.service.ts
@ -1,9 +1,11 @@
+import { LookupItem } from '@ghostfolio/api/app/symbol/interfaces/lookup-item.interface';
+import { Granularity } from '@ghostfolio/common/types';
 import { Injectable } from '@nestjs/common';
+import { DataSource } from '@prisma/client';
 import { isAfter, isBefore, parse } from 'date-fns';

 import { ConfigurationService } from '../../configuration.service';
 import { DataProviderInterface } from '../../interfaces/data-provider.interface';
-import { Granularity } from '../../interfaces/granularity.type';
 import {
  IDataProviderHistoricalResponse,
  IDataProviderResponse
@ -22,6 +24,10 @@ export class AlphaVantageService implements DataProviderInterface {
    });
  }

+  public canHandle(symbol: string) {
+    return !!this.configurationService.get('ALPHA_VANTAGE_API_KEY');
+  }
+
  public async get(
    aSymbols: string[]
  ): Promise<{ [symbol: string]: IDataProviderResponse }> {
@ -77,7 +83,17 @@ export class AlphaVantageService implements DataProviderInterface {
    }
  }

-  public search(aSymbol: string) {
-    return this.alphaVantage.data.search(aSymbol);
+  public async search(aSymbol: string): Promise<{ items: LookupItem[] }> {
+    const result = await this.alphaVantage.data.search(aSymbol);
+
+    return {
+      items: result?.bestMatches?.map((bestMatch) => {
+        return {
+          dataSource: DataSource.ALPHA_VANTAGE,
+          name: bestMatch['2. name'],
+          symbol: bestMatch['1. symbol']
+        };
+      })
+    };
  }
 }
--- a/apps/api/src/services/data-provider/ghostfolio-scraper-api/ghostfolio-scraper-api.service.ts
+++ b/apps/api/src/services/data-provider/ghostfolio-scraper-api/ghostfolio-scraper-api.service.ts
@ -1,12 +1,15 @@
-import { DataSource } from '.prisma/client';
-import { getYesterday } from '@ghostfolio/helper';
+import {
+  getYesterday,
+  isGhostfolioScraperApiSymbol
+} from '@ghostfolio/common/helper';
+import { Granularity } from '@ghostfolio/common/types';
 import { Injectable } from '@nestjs/common';
+import { DataSource } from '@prisma/client';
 import * as bent from 'bent';
 import * as cheerio from 'cheerio';
 import { format } from 'date-fns';

 import { DataProviderInterface } from '../../interfaces/data-provider.interface';
-import { Granularity } from '../../interfaces/granularity.type';
 import {
  IDataProviderHistoricalResponse,
  IDataProviderResponse,
@ -21,6 +24,10 @@ export class GhostfolioScraperApiService implements DataProviderInterface {

  public constructor(private prisma: PrismaService) {}

+  public canHandle(symbol: string) {
+    return isGhostfolioScraperApiSymbol(symbol);
+  }
+
  public async get(
    aSymbols: string[]
  ): Promise<{ [symbol: string]: IDataProviderResponse }> {
@ -117,6 +124,10 @@ export class GhostfolioScraperApiService implements DataProviderInterface {
    return [];
  }

+  public async search(aSymbol: string) {
+    return { items: [] };
+  }
+
  private extractNumberFromString(aString: string): number {
    try {
      const [numberString] = aString.match(
--- a/apps/api/src/services/data-provider/ghostfolio-scraper-api/interfaces/scraper-config.interface.ts
+++ b/apps/api/src/services/data-provider/ghostfolio-scraper-api/interfaces/scraper-config.interface.ts
@ -1,4 +1,4 @@
-import { Currency } from '.prisma/client';
+import { Currency } from '@prisma/client';

 export interface ScraperConfig {
  currency: Currency;
--- a/apps/api/src/services/data-provider/rakuten-rapid-api/rakuten-rapid-api.service.ts
+++ b/apps/api/src/services/data-provider/rakuten-rapid-api/rakuten-rapid-api.service.ts
@ -1,12 +1,16 @@
-import { DataSource } from '.prisma/client';
-import { getToday, getYesterday } from '@ghostfolio/helper';
+import {
+  getToday,
+  getYesterday,
+  isRakutenRapidApiSymbol
+} from '@ghostfolio/common/helper';
+import { Granularity } from '@ghostfolio/common/types';
 import { Injectable } from '@nestjs/common';
+import { DataSource } from '@prisma/client';
 import * as bent from 'bent';
 import { format, subMonths, subWeeks, subYears } from 'date-fns';

 import { ConfigurationService } from '../../configuration.service';
 import { DataProviderInterface } from '../../interfaces/data-provider.interface';
-import { Granularity } from '../../interfaces/granularity.type';
 import {
  IDataProviderHistoricalResponse,
  IDataProviderResponse,
@ -24,6 +28,13 @@ export class RakutenRapidApiService implements DataProviderInterface {
    private readonly configurationService: ConfigurationService
  ) {}

+  public canHandle(symbol: string) {
+    return (
+      isRakutenRapidApiSymbol(symbol) &&
+      !!this.configurationService.get('RAKUTEN_RAPID_API_KEY')
+    );
+  }
+
  public async get(
    aSymbols: string[]
  ): Promise<{ [symbol: string]: IDataProviderResponse }> {
@ -117,6 +128,14 @@ export class RakutenRapidApiService implements DataProviderInterface {
    return {};
  }

+  public async search(aSymbol: string) {
+    return { items: [] };
+  }
+
+  public setPrisma(aPrismaService: PrismaService) {
+    this.prisma = aPrismaService;
+  }
+
  private async getFearAndGreedIndex(): Promise<{
    now: { value: number; valueText: string };
    previousClose: { value: number; valueText: string };
@ -147,8 +166,4 @@ export class RakutenRapidApiService implements DataProviderInterface {
      return undefined;
    }
  }
-
-  public setPrisma(aPrismaService: PrismaService) {
-    this.prisma = aPrismaService;
-  }
 }
--- a/apps/api/src/services/data-provider/yahoo-finance/yahoo-finance.service.spec.ts___
+++ b/apps/api/src/services/data-provider/yahoo-finance/yahoo-finance.service.spec.ts___
@ -1,24 +0,0 @@
-/*
-  import { Test } from '@nestjs/testing';
-
-  import { YahooFinanceService } from './yahoo-finance.service';
-
-  describe('AppService', () => {
-    let service: YahooFinanceService;
-
-    beforeAll(async () => {
-      const app = await Test.createTestingModule({
-        imports: [],
-        providers: [YahooFinanceService]
-      }).compile();
-
-      service = app.get<YahooFinanceService>(YahooFinanceService);
-    });
-
-    describe('get', () => {
-      it('should return data for USDCHF', () => {
-        expect(service.get(['USDCHF'])).toEqual('{}');
-      });
-    });
-  });
-*/
--- a/apps/api/src/services/data-provider/yahoo-finance/yahoo-finance.service.ts
+++ b/apps/api/src/services/data-provider/yahoo-finance/yahoo-finance.service.ts
@ -1,17 +1,18 @@
-import { DataSource } from '.prisma/client';
-import { isCrypto, isCurrency, parseCurrency } from '@ghostfolio/helper';
+import { LookupItem } from '@ghostfolio/api/app/symbol/interfaces/lookup-item.interface';
+import { UNKNOWN_KEY } from '@ghostfolio/common/config';
+import { isCrypto, isCurrency, parseCurrency } from '@ghostfolio/common/helper';
+import { Granularity } from '@ghostfolio/common/types';
 import { Injectable } from '@nestjs/common';
+import { DataSource } from '@prisma/client';
+import * as bent from 'bent';
 import { format } from 'date-fns';
 import * as yahooFinance from 'yahoo-finance';

 import { DataProviderInterface } from '../../interfaces/data-provider.interface';
-import { Granularity } from '../../interfaces/granularity.type';
 import {
  IDataProviderHistoricalResponse,
  IDataProviderResponse,
-  Industry,
  MarketState,
-  Sector,
  Type
 } from '../../interfaces/interfaces';
 import {
@ -21,8 +22,14 @@ import {

@Injectable()
 export class YahooFinanceService implements DataProviderInterface {
+  private yahooFinanceHostname = 'https://query1.finance.yahoo.com';
+
  public constructor() {}

+  public canHandle(symbol: string) {
+    return true;
+  }
+
  public async get(
    aSymbols: string[]
  ): Promise<{ [symbol: string]: IDataProviderResponse }> {
@ -61,16 +68,6 @@ export class YahooFinanceService implements DataProviderInterface {
          type: this.parseType(this.getType(symbol, value))
        };

-        const industry = this.parseIndustry(value.summaryProfile?.industry);
-        if (industry) {
-          response[symbol].industry = industry;
-        }
-
-        const sector = this.parseSector(value.summaryProfile?.sector);
-        if (sector) {
-          response[symbol].sector = sector;
-        }
-
        const url = value.summaryProfile?.website;
        if (url) {
          response[symbol].url = url;
@ -135,6 +132,49 @@ export class YahooFinanceService implements DataProviderInterface {
    }
  }

+  public async search(aSymbol: string): Promise<{ items: LookupItem[] }> {
+    let items = [];
+
+    try {
+      const get = bent(
+        `${this.yahooFinanceHostname}/v1/finance/search?q=${aSymbol}&lang=en-US&region=US&quotesCount=8&newsCount=0&enableFuzzyQuery=false&quotesQueryId=tss_match_phrase_query&multiQuoteQueryId=multi_quote_single_token_query&newsQueryId=news_cie_vespa&enableCb=true&enableNavLinks=false&enableEnhancedTrivialQuery=true`,
+        'GET',
+        'json',
+        200
+      );
+
+      const result = await get();
+      items = result.quotes
+        .filter((quote) => {
+          return quote.isYahooFinance;
+        })
+        .filter(({ quoteType }) => {
+          return (
+            quoteType === 'CRYPTOCURRENCY' ||
+            quoteType === 'EQUITY' ||
+            quoteType === 'ETF'
+          );
+        })
+        .filter(({ quoteType, symbol }) => {
+          if (quoteType === 'CRYPTOCURRENCY') {
+            // Only allow cryptocurrencies in USD
+            return symbol.includes('USD');
+          }
+
+          return true;
+        })
+        .map(({ longname, shortname, symbol }) => {
+          return {
+            dataSource: DataSource.YAHOO,
+            name: longname || shortname,
+            symbol: convertFromYahooSymbol(symbol)
+          };
+        });
+    } catch {}
+
+    return { items };
+  }
+
  /**
   * Converts a symbol to a Yahoo symbol
   *
@ -170,61 +210,12 @@ export class YahooFinanceService implements DataProviderInterface {

  private parseExchange(aString: string): string {
    if (aString?.toLowerCase() === 'ccc') {
-      return 'Other';
+      return UNKNOWN_KEY;
    }

    return aString;
  }

-  private parseIndustry(aString: string): Industry {
-    if (aString === undefined) {
-      return undefined;
-    }
-
-    if (aString?.toLowerCase() === 'auto manufacturers') {
-      return Industry.Automotive;
-    } else if (aString?.toLowerCase() === 'biotechnology') {
-      return Industry.Biotechnology;
-    } else if (
-      aString?.toLowerCase() === 'drug manufacturers—specialty & generic'
-    ) {
-      return Industry.Pharmaceutical;
-    } else if (
-      aString?.toLowerCase() === 'internet content & information' ||
-      aString?.toLowerCase() === 'internet retail'
-    ) {
-      return Industry.Internet;
-    } else if (aString?.toLowerCase() === 'packaged foods') {
-      return Industry.Food;
-    } else if (aString?.toLowerCase() === 'software—application') {
-      return Industry.Software;
-    }
-
-    return Industry.Other;
-  }
-
-  private parseSector(aString: string): Sector {
-    if (aString === undefined) {
-      return undefined;
-    }
-
-    if (
-      aString?.toLowerCase() === 'consumer cyclical' ||
-      aString?.toLowerCase() === 'consumer defensive'
-    ) {
-      return Sector.Consumer;
-    } else if (aString?.toLowerCase() === 'healthcare') {
-      return Sector.Healthcare;
-    } else if (
-      aString?.toLowerCase() === 'communication services' ||
-      aString?.toLowerCase() === 'technology'
-    ) {
-      return Sector.Technology;
-    }
-
-    return Sector.Other;
-  }
-
  private parseType(aString: string): Type {
    if (aString?.toLowerCase() === 'cryptocurrency') {
      return Type.Cryptocurrency;
@ -234,11 +225,11 @@ export class YahooFinanceService implements DataProviderInterface {
      return Type.Stock;
    }

-    return Type.Other;
+    return Type.Unknown;
  }
 }

 export const convertFromYahooSymbol = (aSymbol: string) => {
-  let symbol = aSymbol.replace('-', '');
+  const symbol = aSymbol.replace('-', '');
  return symbol.replace('=X', '');
 };
--- a/apps/api/src/services/exchange-rate-data.service.ts
+++ b/apps/api/src/services/exchange-rate-data.service.ts
@ -1,4 +1,4 @@
-import { getYesterday } from '@ghostfolio/helper';
+import { getYesterday } from '@ghostfolio/common/helper';
 import { Injectable } from '@nestjs/common';
 import { Currency } from '@prisma/client';
 import { format } from 'date-fns';
--- a/apps/api/src/services/interfaces/data-provider.interface.ts
+++ b/apps/api/src/services/interfaces/data-provider.interface.ts
@ -1,10 +1,14 @@
-import { Granularity } from './granularity.type';
+import { LookupItem } from '@ghostfolio/api/app/symbol/interfaces/lookup-item.interface';
+import { Granularity } from '@ghostfolio/common/types';
+
 import {
  IDataProviderHistoricalResponse,
  IDataProviderResponse
 } from './interfaces';

 export interface DataProviderInterface {
+  canHandle(symbol: string): boolean;
+
  get(aSymbols: string[]): Promise<{ [symbol: string]: IDataProviderResponse }>;

  getHistorical(
@ -15,4 +19,6 @@ export interface DataProviderInterface {
  ): Promise<{
    [symbol: string]: { [date: string]: IDataProviderHistoricalResponse };
  }>;
+
+  search(aSymbol: string): Promise<{ items: LookupItem[] }>;
 }
--- a/apps/api/src/services/interfaces/environment.interface.ts
+++ b/apps/api/src/services/interfaces/environment.interface.ts
@ -4,9 +4,12 @@ export interface Environment extends CleanedEnvAccessors {
  ACCESS_TOKEN_SALT: string;
  ALPHA_VANTAGE_API_KEY: string;
  CACHE_TTL: number;
+  DATA_SOURCES: string | string[]; // string is not correct, error in envalid?
  ENABLE_FEATURE_CUSTOM_SYMBOLS: boolean;
  ENABLE_FEATURE_FEAR_AND_GREED_INDEX: boolean;
+  ENABLE_FEATURE_IMPORT: boolean;
  ENABLE_FEATURE_SOCIAL_LOGIN: boolean;
+  ENABLE_FEATURE_STATISTICS: boolean;
  ENABLE_FEATURE_SUBSCRIPTION: boolean;
  GOOGLE_CLIENT_ID: string;
  GOOGLE_SECRET: string;
@ -17,4 +20,7 @@ export interface Environment extends CleanedEnvAccessors {
  REDIS_HOST: string;
  REDIS_PORT: number;
  ROOT_URL: string;
+  STRIPE_PUBLIC_KEY: string;
+  STRIPE_SECRET_KEY: string;
+  WEB_AUTH_RP_ID: string;
 }
--- a/apps/api/src/services/interfaces/interfaces.ts
+++ b/apps/api/src/services/interfaces/interfaces.ts
@ -1,45 +1,31 @@
-import { Currency, DataSource, Platform } from '@prisma/client';
+import { UNKNOWN_KEY } from '@ghostfolio/common/config';
+import { Account, Currency, DataSource, SymbolProfile } from '@prisma/client';

 import { OrderType } from '../../models/order-type';

-export const Industry = {
-  Automotive: 'Automotive',
-  Biotechnology: 'Biotechnology',
-  Food: 'Food',
-  Internet: 'Internet',
-  Other: 'Other',
-  Pharmaceutical: 'Pharmaceutical',
-  Software: 'Software'
-};
-
 export const MarketState = {
  closed: 'closed',
  delayed: 'delayed',
  open: 'open'
 };

-export const Sector = {
-  Consumer: 'Consumer',
-  Healthcare: 'Healthcare',
-  Other: 'Other',
-  Technology: 'Technology'
-};
-
 export const Type = {
+  Cash: 'Cash',
  Cryptocurrency: 'Cryptocurrency',
  ETF: 'ETF',
-  Other: 'Other',
-  Stock: 'Stock'
+  Stock: 'Stock',
+  Unknown: UNKNOWN_KEY
 };

 export interface IOrder {
+  account: Account;
  currency: Currency;
  date: string;
  fee: number;
  id?: string;
-  platform: Platform;
  quantity: number;
  symbol: string;
+  symbolProfile: SymbolProfile;
  type: OrderType;
  unitPrice: number;
 }
@ -53,21 +39,21 @@ export interface IDataProviderResponse {
  currency: Currency;
  dataSource: DataSource;
  exchange?: string;
-  industry?: Industry;
  marketChange?: number;
  marketChangePercent?: number;
  marketPrice: number;
  marketState: MarketState;
  name: string;
-  sector?: Sector;
  type?: Type;
  url?: string;
 }

-export type Industry = typeof Industry[keyof typeof Industry];
+export interface IDataGatheringItem {
+  dataSource: DataSource;
+  date?: Date;
+  symbol: string;
+}

 export type MarketState = typeof MarketState[keyof typeof MarketState];

-export type Sector = typeof Sector[keyof typeof Sector];
-
 export type Type = typeof Type[keyof typeof Type];
--- a/apps/api/src/services/rules.service.ts
+++ b/apps/api/src/services/rules.service.ts
@ -2,14 +2,14 @@ import { Injectable } from '@nestjs/common';

 import { Portfolio } from '../models/portfolio';
 import { Rule } from '../models/rule';
+import { AccountClusterRiskCurrentInvestment } from '../models/rules/account-cluster-risk/current-investment';
+import { AccountClusterRiskInitialInvestment } from '../models/rules/account-cluster-risk/initial-investment';
+import { AccountClusterRiskSingleAccount } from '../models/rules/account-cluster-risk/single-account';
 import { CurrencyClusterRiskBaseCurrencyCurrentInvestment } from '../models/rules/currency-cluster-risk/base-currency-current-investment';
 import { CurrencyClusterRiskBaseCurrencyInitialInvestment } from '../models/rules/currency-cluster-risk/base-currency-initial-investment';
 import { CurrencyClusterRiskCurrentInvestment } from '../models/rules/currency-cluster-risk/current-investment';
 import { CurrencyClusterRiskInitialInvestment } from '../models/rules/currency-cluster-risk/initial-investment';
 import { FeeRatioInitialInvestment } from '../models/rules/fees/fee-ratio-initial-investment';
-import { PlatformClusterRiskCurrentInvestment } from '../models/rules/platform-cluster-risk/current-investment';
-import { PlatformClusterRiskInitialInvestment } from '../models/rules/platform-cluster-risk/initial-investment';
-import { PlatformClusterRiskSinglePlatform } from '../models/rules/platform-cluster-risk/single-platform';

@Injectable()
 export class RulesService {
@ -39,6 +39,17 @@ export class RulesService {

  private getDefaultRuleSettings(aUserSettings: { baseCurrency: string }) {
    return {
+      [AccountClusterRiskCurrentInvestment.name]: {
+        baseCurrency: aUserSettings.baseCurrency,
+        isActive: true,
+        threshold: 0.5
+      },
+      [AccountClusterRiskInitialInvestment.name]: {
+        baseCurrency: aUserSettings.baseCurrency,
+        isActive: true,
+        threshold: 0.5
+      },
+      [AccountClusterRiskSingleAccount.name]: { isActive: true },
      [CurrencyClusterRiskBaseCurrencyInitialInvestment.name]: {
        baseCurrency: aUserSettings.baseCurrency,
        isActive: true
@ -61,18 +72,7 @@ export class RulesService {
        baseCurrency: aUserSettings.baseCurrency,
        isActive: true,
        threshold: 0.01
-      },
-      [PlatformClusterRiskCurrentInvestment.name]: {
-        baseCurrency: aUserSettings.baseCurrency,
-        isActive: true,
-        threshold: 0.5
-      },
-      [PlatformClusterRiskInitialInvestment.name]: {
-        baseCurrency: aUserSettings.baseCurrency,
-        isActive: true,
-        threshold: 0.5
-      },
-      [PlatformClusterRiskSinglePlatform.name]: { isActive: true }
+      }
    };
  }
 }
--- a/apps/client/jest.config.js
+++ b/apps/client/jest.config.js
@ -5,19 +5,14 @@ module.exports = {
  globals: {
    'ts-jest': {
      tsconfig: '<rootDir>/tsconfig.spec.json',
-      stringifyContentPathRegex: '\\.(html|svg)$',
-      astTransformers: {
-        before: [
-          'jest-preset-angular/build/InlineFilesTransformer',
-          'jest-preset-angular/build/StripStylesTransformer'
-        ]
-      }
+      stringifyContentPathRegex: '\\.(html|svg)$'
    }
  },
  coverageDirectory: '../../coverage/apps/client',
  snapshotSerializers: [
-    'jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js',
-    'jest-preset-angular/build/AngularSnapshotSerializer.js',
-    'jest-preset-angular/build/HTMLCommentSerializer.js'
-  ]
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment'
+  ],
+  transform: { '^.+\\.(ts|js|html)$': 'jest-preset-angular' }
 };
--- a/apps/client/src/app/adapter/date-formats.ts
+++ b/apps/client/src/app/adapter/date-formats.ts
@ -1,7 +1,7 @@
 import {
  DEFAULT_DATE_FORMAT,
  DEFAULT_DATE_FORMAT_MONTH_YEAR
-} from '@ghostfolio/helper';
+} from '@ghostfolio/common/config';

 export const DateFormats = {
  display: {
--- a/apps/client/src/app/app-routing.module.ts
+++ b/apps/client/src/app/app-routing.module.ts
@ -9,11 +9,6 @@ const routes: Routes = [
    loadChildren: () =>
      import('./pages/about/about-page.module').then((m) => m.AboutPageModule)
  },
-  {
-    path: 'admin',
-    loadChildren: () =>
-      import('./pages/admin/admin-page.module').then((m) => m.AdminPageModule)
-  },
  {
    path: 'account',
    loadChildren: () =>
@ -21,28 +16,40 @@ const routes: Routes = [
        (m) => m.AccountPageModule
      )
  },
+  {
+    path: 'accounts',
+    loadChildren: () =>
+      import('./pages/accounts/accounts-page.module').then(
+        (m) => m.AccountsPageModule
+      )
+  },
+  {
+    path: 'admin',
+    loadChildren: () =>
+      import('./pages/admin/admin-page.module').then((m) => m.AdminPageModule)
+  },
  {
    path: 'auth',
    loadChildren: () =>
      import('./pages/auth/auth-page.module').then((m) => m.AuthPageModule)
  },
-  {
-    path: 'analysis',
-    loadChildren: () =>
-      import('./pages/analysis/analysis-page.module').then(
-        (m) => m.AnalysisPageModule
-      )
-  },
  {
    path: 'home',
    loadChildren: () =>
      import('./pages/home/home-page.module').then((m) => m.HomePageModule)
  },
  {
-    path: 'report',
+    path: 'pricing',
    loadChildren: () =>
-      import('./pages/report/report-page.module').then(
-        (m) => m.ReportPageModule
+      import('./pages/pricing/pricing-page.module').then(
+        (m) => m.PricingPageModule
+      )
+  },
+  {
+    path: 'register',
+    loadChildren: () =>
+      import('./pages/register/register-page.module').then(
+        (m) => m.RegisterPageModule
      )
  },
  {
@ -55,7 +62,28 @@ const routes: Routes = [
  {
    path: 'start',
    loadChildren: () =>
-      import('./pages/login/login-page.module').then((m) => m.LoginPageModule)
+      import('./pages/landing/landing-page.module').then(
+        (m) => m.LandingPageModule
+      )
+  },
+  {
+    path: 'tools',
+    loadChildren: () =>
+      import('./pages/tools/tools-page.module').then((m) => m.ToolsPageModule)
+  },
+  {
+    path: 'tools/analysis',
+    loadChildren: () =>
+      import('./pages/tools/analysis/analysis-page.module').then(
+        (m) => m.AnalysisPageModule
+      )
+  },
+  {
+    path: 'tools/report',
+    loadChildren: () =>
+      import('./pages/tools/report/report-page.module').then(
+        (m) => m.ReportPageModule
+      )
  },
  {
    path: 'transactions',
@ -64,11 +92,23 @@ const routes: Routes = [
        (m) => m.TransactionsPageModule
      )
  },
+  {
+    path: 'webauthn',
+    loadChildren: () =>
+      import('./pages/webauthn/webauthn-page.module').then(
+        (m) => m.WebauthnPageModule
+      )
+  },
+  {
+    path: 'zen',
+    loadChildren: () =>
+      import('./pages/zen/zen-page.module').then((m) => m.ZenPageModule)
+  },
  {
    // wildcard, if requested url doesn't match any paths for routes defined
    // earlier
    path: '**',
-    redirectTo: '/home',
+    redirectTo: 'home',
    pathMatch: 'full'
  }
 ];
--- a/apps/client/src/app/app.component.html
+++ b/apps/client/src/app/app.component.html
@ -4,6 +4,7 @@
    [currentRoute]="currentRoute"
    [info]="info"
    [user]="user"
+    (signOut)="onSignOut()"
  ></gf-header>
 </header>

@ -11,13 +12,15 @@
  <div *ngIf="canCreateAccount" class="container create-account-container">
    <div class="row mb-5">
      <div class="col-md-6 offset-md-3">
-        <div
-          class="create-account-box p-2 text-center"
-          (click)="onCreateAccount()"
+        <a [routerLink]="['/']">
+          <mat-card
+            class="create-account-box p-2 text-center"
+            (click)="onCreateAccount()"
+          >
+            <div class="mt-1" i18n>You are using the Live Demo.</div>
+            <button mat-button color="primary" i18n>Create Account</button>
+          </mat-card></a
        >
-          <div class="mt-1" i18n>You are using the Live Demo.</div>
-          <button mat-button color="primary" i18n>Create Account</button>
-        </div>
      </div>
    </div>
  </div>
@ -25,7 +28,10 @@
  <router-outlet></router-outlet>
 </main>

-<footer class="footer d-flex justify-content-center position-absolute w-100">
+<footer
+  *ngIf="currentRoute === 'start' || deviceType !== 'mobile'"
+  class="footer d-flex justify-content-center position-absolute w-100"
+>
  <div class="container text-center">
    <div>
      © {{ currentYear }} <a href="https://ghostfol.io">Ghostfolio</a>
--- a/apps/client/src/app/app.component.scss
+++ b/apps/client/src/app/app.component.scss
@ -5,14 +5,8 @@
    padding: 5rem 0;

    .create-account-box {
-      border: 1px solid rgba(var(--palette-primary-500), 1);
-      border-radius: 0.25rem;
      cursor: pointer;
      font-size: 90%;
-
-      .link {
-        color: rgba(var(--palette-primary-500), 1);
-      }
    }
  }

--- a/apps/client/src/app/app.component.ts
+++ b/apps/client/src/app/app.component.ts
@ -5,22 +5,23 @@ import {
  OnDestroy,
  OnInit
 } from '@angular/core';
-import { NavigationEnd, Router } from '@angular/router';
-import { InfoItem } from '@ghostfolio/api/app/info/interfaces/info-item.interface';
-import { User } from '@ghostfolio/api/app/user/interfaces/user.interface';
+import { NavigationEnd, PRIMARY_OUTLET, Router } from '@angular/router';
 import {
-  hasPermission,
-  permissions,
  primaryColorHex,
-  secondaryColorHex
-} from '@ghostfolio/helper';
+  secondaryColorHex,
+  warnColorHex
+} from '@ghostfolio/common/config';
+import { InfoItem, User } from '@ghostfolio/common/interfaces';
+import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { MaterialCssVarsService } from 'angular-material-css-vars';
+import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';

 import { environment } from '../environments/environment';
 import { DataService } from './services/data.service';
 import { TokenStorageService } from './services/token-storage.service';
+import { UserService } from './services/user/user.service';

@Component({
  selector: 'gf-root',
@ -32,57 +33,68 @@ export class AppComponent implements OnDestroy, OnInit {
  public canCreateAccount: boolean;
  public currentRoute: string;
  public currentYear = new Date().getFullYear();
+  public deviceType: string;
  public info: InfoItem;
-  public isLoggedIn = false;
  public user: User;
  public version = environment.version;

  private unsubscribeSubject = new Subject<void>();

  public constructor(
-    private cd: ChangeDetectorRef,
+    private changeDetectorRef: ChangeDetectorRef,
    private dataService: DataService,
+    private deviceService: DeviceDetectorService,
    private materialCssVarsService: MaterialCssVarsService,
    private router: Router,
-    private tokenStorageService: TokenStorageService
+    private tokenStorageService: TokenStorageService,
+    private userService: UserService
  ) {
    this.initializeTheme();
    this.user = undefined;
  }

  public ngOnInit() {
-    this.dataService.fetchInfo().subscribe((info) => {
-      this.info = info;
-    });
+    this.deviceType = this.deviceService.getDeviceInfo().deviceType;

    this.router.events
      .pipe(filter((event) => event instanceof NavigationEnd))
-      .subscribe((test) => {
-        this.currentRoute = this.router.url.toString().substring(1);
-        // this.initializeTheme();
-      });
-
-    this.tokenStorageService
-      .onChangeHasToken()
-      .pipe(takeUntil(this.unsubscribeSubject))
      .subscribe(() => {
-        this.isLoggedIn = !!this.tokenStorageService.getToken();
+        const urlTree = this.router.parseUrl(this.router.url);
+        const urlSegmentGroup = urlTree.root.children[PRIMARY_OUTLET];
+        const urlSegments = urlSegmentGroup.segments;
+        this.currentRoute = urlSegments[0].path;

-        if (this.isLoggedIn) {
-          this.dataService.fetchUser().subscribe((user) => {
-            this.user = user;
-
-            this.canCreateAccount = hasPermission(
-              this.user.permissions,
-              permissions.createAccount
-            );
-
-            this.cd.markForCheck();
-          });
-        } else {
-          this.user = null;
-        }
+        this.info = this.dataService.fetchInfo();
      });
+
+    this.userService.stateChanged
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((state) => {
+        this.user = state.user;
+
+        this.canCreateAccount = hasPermission(
+          this.user?.permissions,
+          permissions.createUserAccount
+        );
+
+        this.changeDetectorRef.markForCheck();
+      });
+  }
+
+  public onCreateAccount() {
+    this.tokenStorageService.signOut();
+  }
+
+  public onSignOut() {
+    this.tokenStorageService.signOut();
+    this.userService.remove();
+
+    window.location.reload();
+  }
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
  }

  private initializeTheme() {
@ -96,15 +108,6 @@ export class AppComponent implements OnDestroy, OnInit {

    this.materialCssVarsService.setPrimaryColor(primaryColorHex);
    this.materialCssVarsService.setAccentColor(secondaryColorHex);
-  }
-
-  public onCreateAccount() {
-    this.tokenStorageService.signOut();
-    window.location.reload();
-  }
-
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
+    this.materialCssVarsService.setWarnColor(warnColorHex);
  }
 }
--- a/apps/client/src/app/app.module.ts
+++ b/apps/client/src/app/app.module.ts
@ -2,6 +2,7 @@ import { Platform } from '@angular/cdk/platform';
 import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
 import {
  DateAdapter,
  MAT_DATE_FORMATS,
@ -14,7 +15,9 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MaterialCssVarsModule } from 'angular-material-css-vars';
 import { MarkdownModule } from 'ngx-markdown';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+import { NgxStripeModule, STRIPE_PUBLISHABLE_KEY } from 'ngx-stripe';

+import { environment } from '../environments/environment';
 import { CustomDateAdapter } from './adapter/custom-date-adapter';
 import { DateFormats } from './adapter/date-formats';
 import { AppRoutingModule } from './app-routing.module';
@ -22,7 +25,11 @@ import { AppComponent } from './app.component';
 import { GfHeaderModule } from './components/header/header.module';
 import { authInterceptorProviders } from './core/auth.interceptor';
 import { httpResponseInterceptorProviders } from './core/http-response.interceptor';
-import { LanguageManager } from './core/language-manager.service';
+import { LanguageService } from './core/language.service';
+
+export function NgxStripeFactory(): string {
+  return environment.stripePublicKey;
+}

@NgModule({
  declarations: [AppComponent],
@ -34,6 +41,7 @@ import { LanguageManager } from './core/language-manager.service';
    HttpClientModule,
    MarkdownModule.forRoot(),
    MatButtonModule,
+    MatCardModule,
    MaterialCssVarsModule.forRoot({
      darkThemeClass: 'is-dark-theme',
      isAutoContrast: true,
@ -41,18 +49,23 @@ import { LanguageManager } from './core/language-manager.service';
    }),
    MatNativeDateModule,
    MatSnackBarModule,
-    NgxSkeletonLoaderModule
+    NgxSkeletonLoaderModule,
+    NgxStripeModule.forRoot(environment.stripePublicKey)
  ],
  providers: [
    authInterceptorProviders,
    httpResponseInterceptorProviders,
-    LanguageManager,
+    LanguageService,
    {
      provide: DateAdapter,
      useClass: CustomDateAdapter,
-      deps: [LanguageManager, MAT_DATE_LOCALE, Platform]
+      deps: [LanguageService, MAT_DATE_LOCALE, Platform]
    },
-    { provide: MAT_DATE_FORMATS, useValue: DateFormats }
+    { provide: MAT_DATE_FORMATS, useValue: DateFormats },
+    {
+      provide: STRIPE_PUBLISHABLE_KEY,
+      useFactory: NgxStripeFactory
+    }
  ],
  bootstrap: [AppComponent]
 })
--- a/apps/client/src/app/components/access-table/access-table.component.html
+++ b/apps/client/src/app/components/access-table/access-table.component.html
@ -1,14 +1,14 @@
-<table mat-table [dataSource]="dataSource" class="w-100">
+<table class="gf-table w-100" mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="granteeAlias">
-    <th mat-header-cell *matHeaderCellDef i18n>User</th>
-    <td mat-cell *matCellDef="let element">
+    <th *matHeaderCellDef class="px-1" i18n mat-header-cell>User</th>
+    <td *matCellDef="let element" class="px-1" mat-cell>
      {{ element.granteeAlias }}
    </td></ng-container
  >

  <ng-container matColumnDef="type">
-    <th mat-header-cell *matHeaderCellDef i18n>Type</th>
-    <td mat-cell *matCellDef="let element">
+    <th *matHeaderCellDef class="px-1" i18n mat-header-cell>Type</th>
+    <td *matCellDef="let element" class="px-1" mat-cell>
      <ion-icon class="mr-1" name="lock-closed-outline"></ion-icon>
      Restricted Access
    </td></ng-container
--- a/apps/client/src/app/components/access-table/access-table.component.scss
+++ b/apps/client/src/app/components/access-table/access-table.component.scss
@ -1,3 +1,5 @@
+@import '~apps/client/src/styles/ghostfolio-style';
+
 :host {
  display: block;
 }
--- a/apps/client/src/app/components/access-table/access-table.component.ts
+++ b/apps/client/src/app/components/access-table/access-table.component.ts
@ -6,7 +6,7 @@ import {
  OnInit
 } from '@angular/core';
 import { MatTableDataSource } from '@angular/material/table';
-import { Access } from '@ghostfolio/api/app/access/interfaces/access.interface';
+import { Access } from '@ghostfolio/common/interfaces';

@Component({
  selector: 'gf-access-table',
--- a/apps/client/src/app/components/accounts-table/accounts-table.component.html
+++ b/apps/client/src/app/components/accounts-table/accounts-table.component.html
@ -0,0 +1,89 @@
+<table class="gf-table w-100" mat-table [dataSource]="dataSource">
+  <ng-container matColumnDef="account">
+    <th *matHeaderCellDef class="px-1" i18n mat-header-cell>Name</th>
+    <td *matCellDef="let element" class="px-1" mat-cell>
+      {{ element.name }}
+      <span
+        *ngIf="element.isDefault"
+        class="d-lg-inline-block d-none text-muted"
+        >(Default)</span
+      >
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="platform">
+    <th *matHeaderCellDef class="px-1" i18n mat-header-cell>Platform</th>
+    <td *matCellDef="let element" class="px-1" mat-cell>
+      <div class="d-flex">
+        <gf-symbol-icon
+          *ngIf="element.Platform?.url"
+          class="mr-1"
+          [tooltip]=""
+          [url]="element.Platform?.url"
+        ></gf-symbol-icon>
+        <span>{{ element.Platform?.name }}</span>
+      </div>
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="transactions">
+    <th *matHeaderCellDef class="text-right" i18n mat-header-cell>
+      Transactions
+    </th>
+    <td *matCellDef="let element" class="text-right" mat-cell>
+      {{ element.Order?.length }}
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="balance">
+    <th *matHeaderCellDef class="text-right" i18n mat-header-cell>Balance</th>
+    <td *matCellDef="let element" class="text-right" mat-cell>
+      <gf-value
+        class="d-inline-block justify-content-end"
+        [currency]="element.currency"
+        [locale]="locale"
+        [value]="element.balance"
+      ></gf-value>
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="actions">
+    <th *matHeaderCellDef class="px-1 text-center" i18n mat-header-cell></th>
+    <td *matCellDef="let element" class="px-1 text-center" mat-cell>
+      <button
+        class="mx-1 no-min-width px-2"
+        mat-button
+        [matMenuTriggerFor]="accountMenu"
+        (click)="$event.stopPropagation()"
+      >
+        <ion-icon name="ellipsis-vertical"></ion-icon>
+      </button>
+      <mat-menu #accountMenu="matMenu" xPosition="before">
+        <button i18n mat-menu-item (click)="onUpdateAccount(element)">
+          Edit
+        </button>
+        <button
+          i18n
+          mat-menu-item
+          [disabled]="element.isDefault || element.Order?.length > 0"
+          (click)="onDeleteAccount(element.id)"
+        >
+          Delete
+        </button>
+      </mat-menu>
+    </td>
+  </ng-container>
+
+  <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
+  <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
+</table>
+
+<ngx-skeleton-loader
+  *ngIf="isLoading"
+  animation="pulse"
+  class="px-4 py-3"
+  [theme]="{
+    height: '1.5rem',
+    width: '100%'
+  }"
+></ngx-skeleton-loader>
--- a/Show More
+++ b/Show More