diff --git a/ajax/products/calc.php b/ajax/products/calc.php
index 1afc25bd33abc7dc8ed36448320991809be1a8c7..12e367771d03d58fc37ce72c75302ab60f70d5a1 100644
--- a/ajax/products/calc.php
+++ b/ajax/products/calc.php
@@ -14,9 +14,10 @@
 
 QUI::$Ajax->registerFunction(
     'package_quiqqer_erp_ajax_products_calc',
-    function ($articles, $user, $currency) {
-        $articles = json_decode($articles, true);
-        $user     = json_decode($user, true);
+    function ($articles, $priceFactors, $user, $currency) {
+        $articles     = json_decode($articles, true);
+        $user         = json_decode($user, true);
+        $priceFactors = json_decode($priceFactors, true);
 
         if (!is_array($articles)) {
             $articles = [];
@@ -36,6 +37,13 @@ function ($articles, $user, $currency) {
         $User = $Calc->getUser();
 
         $Articles = new QUI\ERP\Accounting\ArticleList($articles);
+
+        foreach ($priceFactors as $priceFactor) {
+            $Articles->addPriceFactor(
+                new QUI\ERP\Accounting\PriceFactors\Factor($priceFactor)
+            );
+        }
+
         $Articles->setUser($User);
         $Articles->calc($Calc);
 
@@ -113,6 +121,6 @@ function ($articles, $user, $currency) {
 
         return $result;
     },
-    ['articles', 'user', 'currency'],
+    ['articles', 'priceFactors', 'user', 'currency'],
     'Permission::checkAdminUser'
 );
diff --git a/bin/backend/controls/articles/ArticleList.js b/bin/backend/controls/articles/ArticleList.js
index 844510c16b15887eb4d04dc91cdc82a1187d031b..fb6b3ed9b16e0f85fe8c65e6914f7b3f04308fa0 100644
--- a/bin/backend/controls/articles/ArticleList.js
+++ b/bin/backend/controls/articles/ArticleList.js
@@ -400,51 +400,53 @@ define('package/quiqqer/erp/bin/backend/controls/articles/ArticleList', [
             const self = this;
 
             if (this.$isIncalculationFrame) {
-                self.fireEvent('calc', [
-                    self,
-                    self.$calculations
+                this.fireEvent('calc', [
+                    this,
+                    this.$calculations
                 ]);
 
-                return Promise.resolve(self.$calculations);
+                return Promise.resolve(this.$calculations);
             }
 
             if (this.$calculationRunning) {
-                return new Promise(function (resolve) {
-                    const trigger = function () {
-                        resolve(self.$calculations);
-                        self.removeEvent('onCalc', trigger);
+                return new Promise((resolve) => {
+                    const trigger = () => {
+                        resolve(this.$calculations);
+                        this.removeEvent('onCalc', trigger);
                     };
 
-                    self.addEvent('onCalc', trigger);
+                    this.addEvent('onCalc', trigger);
                 });
             }
 
             this.$calculationRunning = true;
 
-            return new Promise(function (resolve, reject) {
-                const articles = self.$getArticleDataForCalculation();
+            return new Promise((resolve, reject) => {
+                const articles = this.$getArticleDataForCalculation();
 
-                QUIAjax.get('package_quiqqer_erp_ajax_products_calc', function (result) {
-                    self.$calculations = result;
-                    self.$isIncalculationFrame = true;
-                    self.$calculationRunning = false;
+                QUIAjax.get('package_quiqqer_erp_ajax_products_calc', (result) => {
+                    this.$calculations = result;
+                    this.$isIncalculationFrame = true;
+                    this.$calculationRunning = false;
 
                     // performance double request -> quiqqer/invoice#104
-                    setTimeout(function () {
+                    setTimeout(() => {
                         self.$isIncalculationFrame = false;
                     }, 100);
 
-                    self.fireEvent('calc', [
-                        self,
+                    this.fireEvent('calc', [
+                        this,
                         result
                     ]);
+
                     resolve(result);
                 }, {
-                    'package': 'quiqqer/erp',
-                    articles : JSON.encode({articles: articles}),
-                    user     : JSON.encode(self.$user),
-                    currency : self.getAttribute('currency'),
-                    onError  : function (err) {
+                    'package'   : 'quiqqer/erp',
+                    articles    : JSON.encode({articles: articles}),
+                    priceFactors: JSON.encode(this.getPriceFactors()),
+                    user        : JSON.encode(this.$user),
+                    currency    : this.getAttribute('currency'),
+                    onError     : function (err) {
                         console.error(err);
                         reject();
                     }
diff --git a/bin/backend/controls/articles/ArticleSummary.PriceFactors.html b/bin/backend/controls/articles/ArticleSummary.PriceFactors.html
new file mode 100644
index 0000000000000000000000000000000000000000..05ee3a98fffd38f42c1bbb9867b1b5808a48c24f
--- /dev/null
+++ b/bin/backend/controls/articles/ArticleSummary.PriceFactors.html
@@ -0,0 +1,59 @@
+<table class="articles-sum">
+    <tbody>
+    <tr class="articles-sum-row-subsum">
+        <td class="articles-sum-row-firstCell">
+            <span class="articles-sum-row-subsum-text">
+                {{textSubSum}}
+            </span>
+        </td>
+        <td style="width: 140px" class="articles-sum-row-sndCell">
+            <span class="articles-sum-row-subsum-value">
+                {{valueSubSum}}
+            </span>
+        </td>
+    </tr>
+
+    {{#priceFactors}}
+    <tr>
+        <td class="articles-sum-row-firstCell">
+            <span class="articles-sum-row-firstCell-text">
+                {{title}}
+            </span>
+        </td>
+        <td class="articles-sum-row-sndCell">
+            <span class="articles-sum-row-firstCell-value">
+                {{valueText}}
+            </span>
+        </td>
+    </tr>
+    {{/priceFactors}}
+
+    {{#vat}}
+    <tr>
+        <td>
+            <span class="articles-sum-vat-text">
+                {{text}}
+            </span>
+        </td>
+        <td>
+            <span class="articles-sum-vat-value">
+                {{sum}}
+            </span>
+        </td>
+    </tr>
+    {{/vat}}
+
+    <tr class="articles-sum-row-sum">
+        <td class="articles-sum-row-firstCell">
+            <span class="articles-sum-row-sum-text">
+                {{textSum}}
+            </span>
+        </td>
+        <td class="articles-sum-row-sndCell">
+            <span class="articles-sum-row-sum-value">
+                {{valueSum}}
+            </span>
+        </td>
+    </tr>
+    </tbody>
+</table>
\ No newline at end of file
diff --git a/bin/backend/controls/articles/ArticleSummary.css b/bin/backend/controls/articles/ArticleSummary.css
index 4e5407df129ea473f0fc87fc730ccfdf59b7f1c3..e6241e95da2260d5b96e4aa9ea804a253a938c72 100644
--- a/bin/backend/controls/articles/ArticleSummary.css
+++ b/bin/backend/controls/articles/ArticleSummary.css
@@ -52,8 +52,51 @@
     bottom: 80px;
     box-shadow: 0 4px 8px 0 rgb(0 0 0 / 12%), 0 2px 4px 0 rgb(0 0 0 / 8%);
     display: none;
+    padding: 10px;
     position: absolute;
     right: 10px;
-    width: 400px;
+    width: 300px;
     z-index: 1000;
 }
+
+.quiqqer-erp-backend-temporaryErp-priceFactors table {
+    width: 100%;
+}
+
+
+.quiqqer-erp-backend-temporaryErp-priceFactors .articles-sum-container {
+    display: inline-block;
+    width: 100%;
+}
+
+.quiqqer-erp-backend-temporaryErp-priceFactors .articles-sum-container,
+.quiqqer-erp-backend-temporaryErp-priceFactors .articles-sum td,
+.quiqqer-erp-backend-temporaryErp-priceFactors .articles-sum span {
+    page-break-inside: avoid !important;
+    -webkit-column-break-inside: avoid;
+    break-inside: avoid;
+}
+
+.quiqqer-erp-backend-temporaryErp-priceFactors .articles-sum-row-subsum-text {
+    border-bottom: 1px solid #999999;
+}
+
+.quiqqer-erp-backend-temporaryErp-priceFactors .articles-sum-row-subsum-value {
+    border-bottom: 1px solid #999999;
+}
+
+.quiqqer-erp-backend-temporaryErp-priceFactors .articles-sum-row-sum {
+    font-weight: bold;
+}
+
+.quiqqer-erp-backend-temporaryErp-priceFactors .articles-sum-row-sum-text {
+    border-bottom: 3px double #999999;
+}
+
+.quiqqer-erp-backend-temporaryErp-priceFactors .articles-sum-row-sum-value {
+    border-bottom: 3px double #999999;
+}
+
+.quiqqer-erp-backend-temporaryErp-priceFactors .articles-sum td + td {
+    text-align: right;
+}
\ No newline at end of file
diff --git a/bin/backend/controls/articles/ArticleSummary.js b/bin/backend/controls/articles/ArticleSummary.js
index 25f5adcbf4f019085adc39b11cd58c7ef26bb0ff..422fc582229a15f8ec49d4c7c3a12f5a19a3de8c 100644
--- a/bin/backend/controls/articles/ArticleSummary.js
+++ b/bin/backend/controls/articles/ArticleSummary.js
@@ -14,9 +14,10 @@ define('package/quiqqer/erp/bin/backend/controls/articles/ArticleSummary', [
     'Locale',
 
     'text!package/quiqqer/erp/bin/backend/controls/articles/ArticleSummary.html',
+    'text!package/quiqqer/erp/bin/backend/controls/articles/ArticleSummary.PriceFactors.html',
     'css!package/quiqqer/erp/bin/backend/controls/articles/ArticleSummary.css'
 
-], function (QUI, QUIControl, Article, Currency, Mustache, QUILocale, template) {
+], function (QUI, QUIControl, Article, Currency, Mustache, QUILocale, template, templatePriceFactor) {
     "use strict";
 
     const lg = 'quiqqer/erp';
@@ -81,7 +82,10 @@ define('package/quiqqer/erp/bin/backend/controls/articles/ArticleSummary', [
             });
 
             this.$Elm.addEvent('click', this.openSummary);
-            this.$PriceFactors = new Element('div.quiqqer-erp-backend-temporaryErp-priceFactors').inject(this.$Elm);
+            this.$PriceFactors = new Element('div', {
+                'class': 'quiqqer-erp-backend-temporaryErp-priceFactors'
+            }).inject(this.$Elm);
+
             this.$PFFX = moofx(this.$PriceFactors);
 
             this.$NettoSum = this.$Elm.getElement(
@@ -308,17 +312,25 @@ define('package/quiqqer/erp/bin/backend/controls/articles/ArticleSummary', [
 
         showPriceFactors: function () {
             const ArticleList = this.getAttribute('List');
-
             let priceFactors = ArticleList.getPriceFactors();
-            let html = '<ul>';
+            let calculated = ArticleList.getCalculation();
 
-            for (let i = 0, len = priceFactors.length; i < len; i++) {
-                html = html + '<li>' + priceFactors[i].title + ' (<b>' + priceFactors[i].valueText + '</b>)</li>';
-            }
+            const vat = Object.entries(calculated.calculations.vatArray).map((val) => {
+                return {
+                    text: val[1].text,
+                    sum : this.$Formatter.format(val[1].sum)
+                };
+            });
 
-            html = html + '</ul>';
+            this.$PriceFactors.set('html', Mustache.render(templatePriceFactor, {
+                valueSubSum : calculated.calculations.display_subSum,
+                valueSum    : calculated.calculations.display_sum,
+                vat         : vat,
+                textSubSum  : QUILocale.get(lg, 'article.list.articles.subtotal'),
+                textSum     : QUILocale.get(lg, 'article.list.articles.sumtotal'),
+                priceFactors: priceFactors
+            }));
 
-            this.$PriceFactors.set('html', html);
             this.$PriceFactors.setStyle('opacity', 0);
             this.$PriceFactors.setStyle('display', 'block');
             this.$PriceFactors.setStyle('bottom', 70);