diff --git a/admin/README.md b/admin/README.md
index 15a0a5ac..1ecae0b2 100644
--- a/admin/README.md
+++ b/admin/README.md
@@ -8,9 +8,9 @@ Providing admin panel  for MyEMS system administration and configuration
 nginx-1.18.0 or later
 
 
-## Installation
+## Option 1: Install on NGINX Server
 
-* Install NGINX  Server
+* Install NGINX Server
 
 refer to http://nginx.org/en/docs/install.html
 
@@ -53,7 +53,7 @@ Add a new 'server' section with direstives as below:
   }
 ```
 
-* Download myems-admin
+* Download myems
 ```
 $ cd ~
 $ git clone https://github.com/MyEMS/myems.git
@@ -75,3 +75,53 @@ The 'upload' folder is for user uploaded files. DO NOT delete/move/overwrite the
 ```
  /var/www/html/admin/upload
 ```
+
+
+## Option 2: Install on Apache2 Server
+* Install Apache2 Server
+
+refer to https://httpd.apache.org/docs/2.4/install.html
+
+* Configure Apache2
+```
+  $ sudo vi /etc/apache2/ports.conf
+```
+Add a Listen
+```
+Listen 8001
+```
+```
+$ sudo vi /etc/apache2/sites-available/000-default.conf
+```
+Add a new 'VirtualHost' as below
+```
+<VirtualHost 127.0.0.1:8001>
+        ServerAdmin MyEMS-admin
+        DocumentRoot /var/www/admin
+        
+        <Directory "var/www/admin">
+                Options FollowSymLinks
+                AllowOverride All
+                Require all granted
+        </Directory>
+        ErrorLog ${APACHE_LOG_DIR}/error.log
+        CustomLog ${APACHE_LOG_DIR}/access.log combined
+</VirtualHost>
+```
+
+* Download myems-admin
+```
+$ cd ~
+$ git clone https://github.com/MyEMS/myems.git
+```
+
+* Install myems-admin :
+  If the server can not connect to the internet, please compress the myems/admin folder and upload it to the server and extract it to ~/myems/admin
+```
+$ sudo cp -r ~/myems/admin  /var/www/html/admin
+$ sudo chmod 0755 -R /var/www/html/admin
+```
+  Check the config file and change it if necessary:
+```
+$ sudo nano /var/www/html/admin/app/api.js
+```
\ No newline at end of file
diff --git a/web/README.md b/web/README.md
index 9664cc61..be402f5c 100644
--- a/web/README.md
+++ b/web/README.md
@@ -30,7 +30,7 @@ This will create an optimized production build by compililing, merging and minif
 
 You can run 'node server.js' to run the production build locally at http://localhost:5000.
 
-## Install Production Build on NGINX Server
+## Option 1: Install Production Build on NGINX Server
 
 * Install NGINX  Server
 
@@ -104,3 +104,62 @@ $ sudo systemctl restart nginx
   $ sudo rm -r /var/www/html/web
   $ sudo mv build  /var/www/html/web
 ```
+
+## Option 2: Install Production Build on Apache2 Server
+* Install Apache2 Server
+
+refer to https://httpd.apache.org/docs/2.4/install.html
+
+* Configure Apache2
+```
+  $ sudo vi /etc/apache2/ports.conf
+```
+Add a Listen
+```
+Listen 80
+```
+```
+  $ sudo vi /etc/apache2/sites-available/000-default.conf
+```
+Add a new 'VirtualHost' as below
+```
+<VirtualHost 127.0.0.1:80>
+        ServerAdmin MyEMS-web
+        DocumentRoot /var/www/web
+        
+        <Directory "var/www/web">
+                Options FollowSymLinks
+                AllowOverride All
+                Require all granted
+        </Directory>
+        ErrorLog ${APACHE_LOG_DIR}/error.log
+        CustomLog ${APACHE_LOG_DIR}/access.log combined
+</VirtualHost>
+```
+
+* Download myems:
+```
+  $ cd ~
+  $ git clone https://github.com/MyEMS/myems.git
+```
+* Install myems-web :
+
+  Check and change the config file if necessary:
+```
+  $ cd ~/myems/web
+  $ sudo nano src/config.js
+```
+  Build and Compress
+```
+  $ cd ~/myems/web/
+  $ sudo npm run build
+  $ tar czvf myems-web.tar.gz build
+```
+  Install 
+  Upload the file myems-web.tar.gz to you web server. 
+  Note that the following path should be same as that was configured in 000-default.conf
+```
+  $ tar xzf myems-web.tar.gz
+  $ sudo rm -r /var/www/web
+  $ sudo mv build  /var/www/web
+```
\ No newline at end of file
diff --git a/web/src/components/MyEMS/Space/SpaceCost.js b/web/src/components/MyEMS/Space/SpaceCost.js
index 02c352ca..024de40a 100644
--- a/web/src/components/MyEMS/Space/SpaceCost.js
+++ b/web/src/components/MyEMS/Space/SpaceCost.js
@@ -83,7 +83,9 @@ const SpaceCost = ({ setRedirect, setRedirectUrl, t }) => {
   const [spaceLineChartLabels, setSpaceLineChartLabels] = useState([]);
   const [spaceLineChartData, setSpaceLineChartData] = useState({});
   const [spaceLineChartOptions, setSpaceLineChartOptions] = useState([]);
-  
+  const [childSpaceProportionList, setChildSpaceProportionList] = useState([]);
+  const [childSpaceSubtotalShareData, setChildSpaceSubtotalShareData] = useState([]);
+
   const [parameterLineChartLabels, setParameterLineChartLabels] = useState([]);
   const [parameterLineChartData, setParameterLineChartData] = useState({});
   const [parameterLineChartOptions, setParameterLineChartOptions] = useState([]);
@@ -318,7 +320,45 @@ const SpaceCost = ({ setRedirect, setRedirectUrl, t }) => {
           costDataArray.push(costDataItem);
         });
         setCostShareData(costDataArray);
-        
+
+        let childSpaceProportionArray = [];
+        json['child_space']['energy_category_names'].forEach((currentValue, energyCategoryIndex) => {
+          if (json['child_space']['child_space_names_array'][energyCategoryIndex].length > 0) {
+            let childSpaceProportionItem = {}
+            childSpaceProportionItem['data'] = []
+            json['child_space']['child_space_names_array'][energyCategoryIndex].forEach((currentSpaceName, spaceIndex) => {
+              let childSpaceProportionItemDataItem = {}
+              childSpaceProportionItemDataItem['id'] = spaceIndex;
+              childSpaceProportionItemDataItem['name'] = currentSpaceName;
+              childSpaceProportionItemDataItem['value'] = json['child_space']['subtotals_array'][energyCategoryIndex][spaceIndex];
+              childSpaceProportionItemDataItem['color'] = "#"+((1<<24)*Math.random()|0).toString(16);
+              childSpaceProportionItem['data'].push(childSpaceProportionItemDataItem);
+            });
+
+            childSpaceProportionItem['name'] = json['child_space']['energy_category_names'][energyCategoryIndex];
+            childSpaceProportionItem['unit'] = json['child_space']['units'][energyCategoryIndex];
+            childSpaceProportionArray.push(childSpaceProportionItem);
+          };
+        });
+        setChildSpaceProportionList(childSpaceProportionArray);
+
+        let childSpaceSubtotalShareDataArray = [];
+        if (json['child_space']['child_space_names_array'].length > 0) {
+          json['child_space']['child_space_names_array'][0].forEach((currentSpaceName, spaceIndex) => {
+            let subtotal = 0.0;
+            json['child_space']['energy_category_names'].forEach((currentValue, energyCategoryIndex) => {
+              subtotal += json['child_space']['subtotals_array'][energyCategoryIndex][spaceIndex];
+            });
+            let childSpaceSubtotalDataItem = {};
+            childSpaceSubtotalDataItem['id'] = spaceIndex;
+            childSpaceSubtotalDataItem['name'] = currentSpaceName;
+            childSpaceSubtotalDataItem['value'] = subtotal;
+            childSpaceSubtotalDataItem['color'] = "#"+((1<<24)*Math.random()|0).toString(16);
+           childSpaceSubtotalShareDataArray.push(childSpaceSubtotalDataItem);
+          });
+        };
+        setChildSpaceSubtotalShareData(childSpaceSubtotalShareDataArray);
+
         let timestamps = {}
         json['reporting_period']['timestamps'].forEach((currentValue, index) => {
           timestamps['a' + index] = currentValue;
@@ -637,6 +677,24 @@ const SpaceCost = ({ setRedirect, setRedirectUrl, t }) => {
         <Col className="mb-3 pr-lg-2 mb-3">
           <SharePie data={costShareData} title={t('Costs by Energy Category')} />
         </Col>
+        {childSpaceProportionList.map(childSpaceProportionItem => (
+          <Col className="mb-3 pr-lg-2 mb-3">
+            <SharePie
+              data={childSpaceProportionItem['data']}
+              title={t('Child Space Proportion CATEGORY UNIT',
+                      {'CATEGORY': childSpaceProportionItem['name'],
+                       'UNIT': '(' + childSpaceProportionItem['unit'] + ')'
+                      })}
+            />
+          </Col>
+        ))}
+        <Col className="mb-3 pr-lg-2 mb-3">
+          <SharePie
+            data={childSpaceSubtotalShareData}
+            title={t('Child Space Total Proportion')}
+          />
+        </Col>
+
       </Row>
       <LineChart reportingTitle={t('Reporting Period Costs CATEGORY VALUE UNIT', { 'CATEGORY': null, 'VALUE': null, 'UNIT': null })}
          baseTitle=''
diff --git a/web/src/i18n.js b/web/src/i18n.js
index fde945d5..b2973b84 100644
--- a/web/src/i18n.js
+++ b/web/src/i18n.js
@@ -154,7 +154,8 @@ const resources = {
       "Reporting Period Consumption ITEM CATEGORY UNIT": "Reporting Period Consumption {{ITEM}} {{CATEGORY}} {{UNIT}}",
       "Reporting Period Consumption ITEM CATEGORY VALUE UNIT": "Reporting Period Consumption {{ITEM}} {{CATEGORY}} {{VALUE}} {{UNIT}}",
       "Base Period Consumption ITEM CATEGORY VALUE UNIT": "Base Period Consumption {{ITEM}} {{CATEGORY}} {{VALUE}} {{UNIT}}",
-      "Child Space Proportion CATEGORY UNIT": "Child Space Proportion {{CATEGORY}} {{UNIT}}",
+      "Child Space Proportion CATEGORY UNIT": "Child Space Proportion by Energy Category {{CATEGORY}} {{UNIT}}",
+      "Child Space Total Proportion": "Child Space Total Proportion",
       "Reporting Period Costs CATEGORY UNIT": "Reporting Period Costs {{CATEGORY}} {{UNIT}}",
       "Reporting Period Costs CATEGORY VALUE UNIT": "Reporting Period Costs {{CATEGORY}} {{VALUE}} {{UNIT}}",
       "Base Period Costs CATEGORY VALUE UNIT": "Base Period Costs {{CATEGORY}} {{VALUE}} {{UNIT}}",
@@ -500,7 +501,8 @@ const resources = {
       "Reporting Period Consumption ITEM CATEGORY UNIT": "Verbrauch des Berichtszeitraums {{ITEM}} {{CATEGORY}} {{UNIT}}",
       "Reporting Period Consumption ITEM CATEGORY VALUE UNIT": "Verbrauch des Berichtszeitraums {{ITEM}} {{CATEGORY}} {{VALUE}} {{UNIT}}",
       "Base Period Consumption ITEM CATEGORY VALUE UNIT": "Verbrauch des Basiszeitraums {{ITEM}} {{CATEGORY}} {{VALUE}} {{UNIT}}",
-      "Child Space Proportion CATEGORY UNIT": "Anteil des Teil Platz {{CATEGORY}} {{UNIT}}",
+      "Child Space Proportion CATEGORY UNIT": "Anteil des Teil Platz nach Energiekategorie {{CATEGORY}} {{UNIT}}",
+      "Child Space Total Proportion": "Anteil des Teil Platz Gesamtanteil",
       "Reporting Period Costs CATEGORY UNIT": "Berichtszeitraumkosten {{CATEGORY}} {{UNIT}}",
       "Reporting Period Costs CATEGORY VALUE UNIT": "Berichtszeitraumkosten {{CATEGORY}} {{VALUE}} {{UNIT}}",
       "Base Period Costs CATEGORY VALUE UNIT": "Kosten des Basiszeitraums {{CATEGORY}} {{VALUE}} {{UNIT}}",
@@ -849,7 +851,8 @@ const resources = {
       "Reporting Period Consumption ITEM CATEGORY UNIT": "报告期消耗 {{ITEM}} {{CATEGORY}} {{UNIT}}",
       "Reporting Period Consumption ITEM CATEGORY VALUE UNIT": "报告期消耗 {{ITEM}} {{CATEGORY}} {{VALUE}} {{UNIT}}",
       "Base Period Consumption ITEM CATEGORY VALUE UNIT": "基准期消耗 {{ITEM}} {{CATEGORY}} {{VALUE}} {{UNIT}}",
-      "Child Space Proportion CATEGORY UNIT": "子空间占比 {{CATEGORY}} {{UNIT}}",
+      "Child Space Proportion CATEGORY UNIT": "子空间分类占比 {{CATEGORY}} {{UNIT}}",
+      "Child Space Total Proportion": "子空间总计占比",
       "Reporting Period Costs CATEGORY UNIT": "报告期成本 {{CATEGORY}} {{UNIT}}",
       "Reporting Period Costs CATEGORY VALUE UNIT": "报告期成本 {{CATEGORY}} {{VALUE}} {{UNIT}}",
       "Base Period Costs CATEGORY VALUE UNIT": "基准期成本 {{CATEGORY}} {{VALUE}} {{UNIT}}",