diff --git a/.angular-cli.json b/.angular-cli.json
deleted file mode 100644
index 975ee35..0000000
--- a/.angular-cli.json
+++ /dev/null
@@ -1,110 +0,0 @@
-{
-    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-    "project": {
-      "name": "ng-universal-demo"
-    },
-    "apps": [
-      {
-        "root": "src",
-        "outDir": "dist/browser",
-        "assets": [
-          "assets",
-          "favicon.ico"
-        ],
-        "index": "index.html",
-        "main": "main.ts",
-        "polyfills": "polyfills.ts",
-        "test": "test.ts",
-        "tsconfig": "tsconfig.app.json",
-        "testTsconfig": "tsconfig.spec.json",
-        "prefix": "app",
-        "styles": [
-          "styles.css",
-            "../node_modules/datatables.net-dt/css/jquery.dataTables.css"
-        ],
-        "scripts": [
-          "../node_modules/jquery/dist/jquery.js",
-          "../node_modules/datatables.net/js/jquery.dataTables.js"
-        ],
-        "environmentSource": "environments/environment.ts",
-        "environments": {
-          "dev": "environments/environment.ts",
-          "prod": "environments/environment.prod.ts"
-        }
-      },
-      {
-        "platform": "server",
-        "root": "src",
-        "outDir": "dist/server",
-        "assets": [
-          "assets",
-          "favicon.ico"
-        ],
-        "index": "index.html",
-        "main": "main.server.ts",
-        "test": "test.ts",
-        "tsconfig": "tsconfig.server.json",
-        "testTsconfig": "tsconfig.spec.json",
-        "prefix": "app",
-        "styles": [
-          "styles.css"
-        ],
-        "scripts": [],
-        "environmentSource": "environments/environment.ts",
-        "environments": {
-          "dev": "environments/environment.ts",
-          "prod": "environments/environment.prod.ts"
-        }
-      }
-    ],
-    "e2e": {
-      "protractor": {
-        "config": "./protractor.conf.js"
-      }
-    },
-    "lint": [
-      {
-        "project": "src/tsconfig.app.json",
-        "exclude": "**/node_modules/**"
-      },
-      {
-        "project": "src/tsconfig.spec.json",
-        "exclude": "**/node_modules/**"
-      },
-      {
-        "project": "e2e/tsconfig.e2e.json",
-        "exclude": "**/node_modules/**"
-      }
-    ],
-    "test": {
-      "karma": {
-        "config": "./karma.conf.js"
-      }
-    },
-    "defaults": {
-      "styleExt": "css",
-      "component": {
-        "spec": false,
-        "inlineStyle": true,
-        "inlineTemplate": true
-      },
-      "directive": {
-        "spec": false
-      },
-      "class": {
-        "spec": false
-      },
-      "guard": {
-        "spec": false
-      },
-      "module": {
-        "spec": false
-      },
-      "pipe": {
-        "spec": false
-      },
-      "service": {
-        "spec": false
-      }
-    }
-  }
diff --git a/README.md b/README.md
deleted file mode 100644
index 96e55e9..0000000
--- a/README.md
+++ /dev/null
@@ -1,54 +0,0 @@
-# Angular Universal & Anguar-CLI minimal starter
-
-> This demo is built following the [Angular-CLI Wiki guide](https://github.com/angular/angular-cli/wiki/stories-universal-rendering)
-
-We're utilizing packages from the [Angular Universal @nguniversal](https://github.com/angular/universal) repo, such as [ng-module-map-ngfactory-loader](https://github.com/angular/universal/tree/master/modules/module-map-ngfactory-loader) to enable Lazy Loading.
-
----
-
-## Static or Dynamic
-This repo demonstrates the use of 2 different forms of Server Side Rendering.
-
-**Static** Also known as "prerendering"
-* Happens at build time
-* Renders your application and replaces the dist index.html with a version rendered at the route `/`.
-
-**Dynamic**
-* Happens at runtime
-* Uses `ngExpressEngine` to render you application on the fly at the requested url.
-
----
-
-## Installation
-* `npm install` or `yarn`
-
----
-
-## Development (Client-side only rendering)
-* run `npm run start` which will start `ng serve` (project served at the standard: localhost:4200)
-
----
-
-## Production 
-
-Depending on whether you're publishing dynamic or static prerendering, run the build command, and then serve up your dist folder assets.
-
-> **NOTE**: To deploy your **Static** site to a static hosting platform you will have to deploy the *`dist/browser`* folder, rather than the usual *`dist`*
-
-ie: `npm run build:dynamic` or `npm run build:static`. All of the files that need to be served will be found within the `/dist` folder.
-
-
-
----
-
-## Testing Universal (dynamic or static) builds -Locally-
-
-**Dynamic** : **`npm run start:dynamic`**
-
-Compiles your application and spins up a Node Express to dynamically serve your Universal application on `http://localhost:4000`.
-
-**Static** : **`npm run start:static`**
-
-- Compiles your application and prerenders your applications files, spinning up a demo http-server so you can view it on `http://127.0.0.1:8080`
-
-
diff --git a/angular.json b/angular.json
new file mode 100644
index 0000000..f45194e
--- /dev/null
+++ b/angular.json
@@ -0,0 +1,177 @@
+{
+  "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "ng-universal-demo": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/browser",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "polyfills": "src/polyfills.ts",
+            "assets": [
+              "src/assets",
+              "src/robots.txt"
+            ],
+            "styles": [
+              "src/styles.css",
+              "node_modules/datatables.net-dt/css/jquery.dataTables.css"
+            ],
+            "scripts": [
+              "node_modules/jquery/dist/jquery.js",
+              "node_modules/datatables.net/js/jquery.dataTables.js"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "ng-universal-demo:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "ng-universal-demo:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "ng-universal-demo:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "karmaConfig": "./karma.conf.js",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "scripts": [
+              "node_modules/jquery/dist/jquery.js",
+              "node_modules/datatables.net/js/jquery.dataTables.js"
+            ],
+            "styles": [
+              "src/styles.css",
+              "node_modules/datatables.net-dt/css/jquery.dataTables.css"
+            ],
+            "assets": [
+              "src/assets",
+              "src/robots.txt"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        },
+        "server": {
+          "builder": "@angular-devkit/build-angular:server",
+          "options": {
+            "outputPath": "dist/server",
+            "main": "src/main.server.ts",
+            "tsConfig": "src/tsconfig.server.json"
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
+            }
+          }
+        }
+      }
+    },
+    "ng-universal-demo-e2e": {
+      "root": "e2e",
+      "sourceRoot": "e2e",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "./protractor.conf.js",
+            "devServerTarget": "ng-universal-demo:serve"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "e2e/tsconfig.e2e.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "ng-universal-demo",
+  "schematics": {
+    "@schematics/angular:class": {
+      "spec": false
+    },
+    "@schematics/angular:component": {
+      "spec": false,
+      "inlineStyle": true,
+      "inlineTemplate": true,
+      "prefix": "app",
+      "styleext": "css"
+    },
+    "@schematics/angular:directive": {
+      "spec": false,
+      "prefix": "app"
+    },
+    "@schematics/angular:guard": {
+      "spec": false
+    },
+    "@schematics/angular:module": {
+      "spec": false
+    },
+    "@schematics/angular:pipe": {
+      "spec": false
+    },
+    "@schematics/angular:service": {
+      "spec": false
+    }
+  }
+}
diff --git a/deploy/beta-properties.json b/deploy/beta-properties.json
index babe036..0d9a46d 100644
--- a/deploy/beta-properties.json
+++ b/deploy/beta-properties.json
@@ -1,12 +1,14 @@
 {
+  "environment" : "beta",
   "enablePiwikTrack" : true,
-  "enableHelper" : true,
   "useCache" : true,
-  "showContent" : false,
+  "showContent" : true,
   "metricsAPIURL" : "https://beta.services.openaire.eu/usagestats/",
   "framesAPIURL" : "https://beta.openaire.eu/stats3/",
   "statisticsAPIURL" : "https://beta.services.openaire.eu/stats-api/",
   "statisticsFrameAPIURL":"https://beta.openaire.eu/stats/",
+  "statisticsFrameNewAPIURL": "http://marilyn.athenarc.gr:8080/stats-api/",
+  "useNewStatistisTool":false,
   "claimsAPIURL" : "https://beta.services.openaire.eu/claims/rest/claimsService/",
   "searchAPIURLLAst"     : "https://beta.services.openaire.eu/search/v2/api/",
   "searchResourcesAPIURL"     : "https://beta.services.openaire.eu/search/v2/api/resources",
@@ -15,19 +17,20 @@
   "searchCrossrefAPIURL" : "https://api.crossref.org/works",
   "searchDataciteAPIURL" : "https://api.datacite.org/works",
   "searchOrcidURL"    : "https://pub.orcid.org/v2.1/",
-  "pmidURL"    : "http://www.ncbi.nlm.nih.gov/pubmed/",
+  "orcidURL"   : "https://orcid.org/",
   "doiURL"     : "https://dx.doi.org/",
   "cordisURL"  : "http://cordis.europa.eu/projects/",
-  "pmcURL"     : "http://europepmc.org/articles/",
-  "handleURL"  : "http://hdl.handle.net/",
+  "openDoarURL": "http://v2.sherpa.ac.uk/id/repository/",
+  "r3DataURL": "http://service.re3data.org/repository/",
   "zenodo"   : "https://zenodo.org/",
+  "zenodoCommunities" : "https://zenodo.org/api/communities/",
   "openAccess" : "https://www.openaire.eu/support/faq#article-id-234",
   "openAccessRepo" : "https://www.openaire.eu/support/faq#article-id-310",
   "fp7Guidlines" : "https://www.openaire.eu/open-access-in-fp7-seventh-research-framework-programme",
   "h2020Guidlines" : "https://www.openaire.eu/oa-publications/h2020/open-access-in-horizon-2020",
   "ercGuidlines" : "http://erc.europa.eu/sites/default/files/document/file/ERC_Open_Access_Guidelines-revised_2014.pdf",
   "helpdesk" : "https://www.openaire.eu/support/helpdesk",
-  "uploadService" : "https://demo.openaire.eu/upload/",
+  "utilsService" : "https://demo.openaire.eu/utils-service",
 
   "vocabulariesAPI" :"https://beta.services.openaire.eu/provision/mvc/vocabularies/",
 
@@ -37,21 +40,17 @@
 
   "logoutUrl" :"https://aai.openaire.eu/proxy/saml2/idp/SingleLogoutService.php?ReturnTo=",
 
-  "logoutOpenaireUrl" :"http://dl067.madgik.di.uoa.gr/idp/profile/Logout",
-
   "cookieDomain" :".openaire.eu",
 
   "feedbackmail" :"openaire.test@gmail.com",
 
-  "helperPageUrl" :"http://scoobydoo.di.uoa.gr:16000/api/page/route",
-
   "cacheUrl" :"https://demo.openaire.eu/cache/get?url=",
 
-  "datasourcesAPI": "https://beta.services.openaire.eu/openaire/ds/search/",
 
   "adminToolsAPIURL" :"https://beta.services.openaire.eu/uoa-admin-tools",
 
-  "adminToolsCommunity" :"openaire",
+  "adminToolsCommunity" :"connect",
+  "datasourcesAPI": "https://beta.services.openaire.eu/openaire/ds/search/",
   "contextsAPI":"https://beta.services.openaire.eu/openaire/context",
   "communityAPI":   "https://beta.services.openaire.eu/openaire/community/",
   "communitiesAPI": "https://beta.services.openaire.eu/openaire/community/communities",
@@ -61,21 +60,24 @@
   "resultsPerPage":  10,
 
   "baseLink" : "https://beta.connect.openaire.eu",
-
+  "afterLoginRedirectLink": "/myCommunities",
   "searchLinkToPublication" : "/search/publication?articleId=",
   "searchLinkToProject" : "/search/project?projectId=",
   "searchLinkToDataProvider" : "/search/dataprovider?datasourceId=",
   "searchLinkToDataset" : "/search/dataset?datasetId=",
+  "searchLinkToSoftwareLanding" : "/search/software?softwareId=",
   "searchLinkToOrganization" : "/search/organization?organizationId=",
+  "searchLinkToOrp" : "/search/other?orpId=",
 
+  "searchLinkToCommunities" : "/search/find/communities",
   "searchLinkToPublications" : "/search/find/publications",
   "searchLinkToDataProviders" : "/search/find/dataproviders",
   "searchLinkToProjects" : "/search/find/projects",
   "searchLinkToDatasets" : "/search/find/datasets",
   "searchLinkToSoftware" : "/search/find/software",
+  "searchLinkToOrps" : "/search/find/other",
   "searchLinkToOrganizations" : "/search/find/organizations",
   "searchLinkToCompatibleDataProviders" : "/search/content-providers",
-  "searchLinkToCompatibleDataProvidersTable" : "/search/content-providers-table",
   "searchLinkToEntityRegistriesDataProviders" : "/search/entity-registries",
   "searchLinkToEntityRegistriesDataProvidersTable" : "/search/entity-registries-table",
   "searchLinkToJournals" : "/search/journals",
@@ -85,7 +87,28 @@
   "searchLinkToAdvancedProjects" : "/search/advanced/projects",
   "searchLinkToAdvancedDatasets" : "/search/advanced/datasets",
   "searchLinkToAdvancedSoftware" : "/search/advanced/software",
+  "searchLinkToAdvancedOrps" : "/search/advanced/other",
   "searchLinkToAdvancedDataProviders" : "/search/advanced/dataproviders",
   "searchLinkToAdvancedOrganizations" : "/search/advanced/organizations",
-  "searchLinkToAdvancedPeople" : "/search/advanced/people"
+  
+  "sendMailUrl": "https://beta.services.openaire.eu/uoa-admin-tools/sendMail/",
+  "notifyForNewManagers": "https://beta.services.openaire.eu/uoa-admin-tools/notifyForNewManagers/",
+  "notifyForNewSubscribers": "https://beta.services.openaire.eu/uoa-admin-tools/notifyForNewSubscribers/",
+
+
+  "lastIndexInformationLink" : "https://beta.openaire.eu/aggregation-and-content-provision-workflows",
+  "showLastIndexInformationLink" : true,
+
+  "widgetLink" : "https://beta.openaire.eu/index.php?option=com_openaire&view=widget&format=raw&projectId=",
+  "claimsInformationLink": "https://beta.openaire.eu/linking",
+
+  "depositLearnHowPage": "/participate/deposit/learn-how",
+  "depositSearchPage": "/participate/deposit/search",
+  "shareInZenodoPage": "/participate/deposit/zenodo",
+
+  "reCaptchaSiteKey": "6LezhVIUAAAAAOb4nHDd87sckLhMXFDcHuKyS76P",
+
+  "admins" : ["rcd-helpdesk@openaire.eu"],
+  "lastIndexUpdate": "2019-08-07",
+  "indexInfoAPI": "http://beta.services.openaire.eu/openaire/info/"
 }
diff --git a/deploy/prepareDeploy.sh b/deploy/prepareDeploy.sh
index 8f8d986..0963a37 100755
--- a/deploy/prepareDeploy.sh
+++ b/deploy/prepareDeploy.sh
@@ -1,24 +1,50 @@
-##ATTENTION
-## DON'T run it in svn folder - it *REMOVES* files
-## Copy project in another file "deploy-folder"
-## cd "deploy-folder"
-## run the script
+#ATTENTION
+#DON'T run it in svn folder - it REMOVES files
+#Copy project in another location eg "deploy-folder"
+#go to "deploy-folder/deploy"
+#uncomment the proper commands
+#run the script
+
+# cp theproperties file according to the deploy environment!!!
+## uncommect one of the following -->
+# cp beta-properties.json ../src/assets/env-properties.json;
+# cp production-properties.json ../src/assets/env-properties.json;
 
 ## uncommect from here-->
-# cp monitor-beta-properties.json src/assets/env-properties.json;
-# rm -rf src/assets/common-assets/.svn/;
-# rm -rf src/app/openaireLibrary/.svn/;
-# pico src/app/openaireLibrary/utils/properties/environment-specific.service.ts;
-# npm run build:dynamic;
-# rm -rf src node_modules  .idea/ connect-production-properties.json installOpenaireLib.sh;
-# echo 'Ready!';
+# printf  '\nCheck that you have the correct properties file';
+# echo -n "Press key:";
+# read -n1 ans
+# pico ../src/assets/env-properties.json;
+# printf  '\nCheck the properties file version';
+# echo -n "Press key:";
+# read -n1 ans
+# pico ../src/app/openaireLibrary/utils/properties/environment-specific.service.ts;
+# echo 'For Production keep meta for bots';
+# printf  '\n\nCheck index.html: For test and beta keep meta for noindex, for production remove noindex and keep meta for Search engines verification';
+# printf  '\nUpdate css/ js files version!';
+# echo -n "Press key:";
+# read -n1 ans
+# echo -n "Pressed";
+# pico ../src/index.html;
+# echo -n 'Check Robots.txt: For test and beta add "Diasallow /", for production remove it!';
+# echo -n "Press key:";
+# read -n1 ans
+# pico ../src/robots.txt;
+# echo -n "Pressed";
+# rm -rf ../src/assets/common-assets/.svn/;
+# rm -rf ../src/app/openaireLibrary/.svn/;
+# cd ..; npm run build:ssr; cd deploy;
+# rm -rf ../src ../node_modules  ../.idea/ ../installOpenaireLib.sh; cd ../; rm -rf deploy;
 # echo 'Now copy to the server!'
+
 ##<-- to here
 
-##copy "deploy-folder" in beta.connect.openaire.eu
-##coppies of previous deployments exist in  "/home/argiro.kokogiannaki/connect-portal/connectYYYY-MM-DD"
-##run "npm i"
-##become nodejs user: "sudo su nodejs -s /bin/bash"
-##go to "cd /srv/www/portal"
-##cp files from "cp -r HOME_PATH/deploy-folder/* ."
-##restart portal "pm2 restart connect"
+#Deploy instructions!
+#copy "deploy-folder" in beta.connect.openaire.eu or connect.openaire.eu
+#copies of previous deployments exist in  "/home/argiro.kokogiannaki/connect-portal/connectYYYY-MM-DD"
+#run "npm i"
+#become nodejs user to be able to copy the files: "sudo su nodejs -s /bin/bash"
+#check what is running "pm2 list"
+#portal files exist in "/srv/www/portal/connect"
+#copy deployment files to the portal folder "cp -r /home/argiro.kokogiannaki/connect-portal/connectYYYY-MM-DD/* /srv/www/portal/connect"
+#restart portal to get the changes "pm2 restart connect"
diff --git a/deploy/production-properties.json b/deploy/production-properties.json
new file mode 100644
index 0000000..f8c4f3b
--- /dev/null
+++ b/deploy/production-properties.json
@@ -0,0 +1,107 @@
+{
+  "environment" : "production",
+  "enablePiwikTrack" : false,
+  "useCache" : true,
+  "showContent" : true,
+  "metricsAPIURL" : "https://services.openaire.eu/usagestats/",
+  "framesAPIURL" : "https://www.openaire.eu/stats3/",
+  "statisticsAPIURL" : "https://services.openaire.eu/stats-api/",
+  "statisticsFrameAPIURL":"https://www.openaire.eu/stats/",
+  "statisticsFrameNewAPIURL": "",
+  "useNewStatistisTool":false,
+  "claimsAPIURL" : "https://services.openaire.eu/claims/rest/claimsService/",
+  "searchAPIURLLAst"     : "https://services.openaire.eu/search/v2/api/",
+  "searchResourcesAPIURL"     : "https://services.openaire.eu/search/v2/api/resources",
+  "openCitationsAPIURL" : "https://services.openaire.eu/opencitations/getCitations?id=",
+  "csvAPIURL" : "https://services.openaire.eu/search/v2/api/reports",
+  "searchCrossrefAPIURL" : "https://api.crossref.org/works",
+  "searchDataciteAPIURL" : "https://api.datacite.org/works",
+  "searchOrcidURL"    : "https://pub.orcid.org/v2.1/",
+  "orcidURL"   : "https://orcid.org/",
+  "doiURL"     : "https://dx.doi.org/",
+  "cordisURL"  : "http://cordis.europa.eu/projects/",
+  "openDoarURL": "http://v2.sherpa.ac.uk/id/repository/",
+  "r3DataURL": "http://service.re3data.org/repository/",
+  "zenodo"   : "https://zenodo.org/",
+  "zenodoCommunities" : "https://zenodo.org/api/communities/",
+  "openAccess" : "https://www.openaire.eu/support/faq#article-id-234",
+  "openAccessRepo" : "https://www.openaire.eu/support/faq#article-id-310",
+  "fp7Guidlines" : "https://www.openaire.eu/open-access-in-fp7-seventh-research-framework-programme",
+  "h2020Guidlines" : "https://www.openaire.eu/oa-publications/h2020/open-access-in-horizon-2020",
+  "ercGuidlines" : "http://erc.europa.eu/sites/default/files/document/file/ERC_Open_Access_Guidelines-revised_2014.pdf",
+  "helpdesk" : "https://www.openaire.eu/support/helpdesk",
+  "utilsService" : "https://explore.openaire.eu/utils-service",
+
+  "vocabulariesAPI" :"https://services.openaire.eu/provision/mvc/vocabularies/",
+
+  "piwikBaseUrl" :"https://analytics.openaire.eu/piwik.php?idsite=",
+  "piwikSiteId" : "112",
+  "loginUrl" :"https://services.openaire.eu/_UPDATE_/openid_connect_login",
+
+  "logoutUrl" :"https://aai.openaire.eu/proxy/saml2/idp/SingleLogoutService.php?ReturnTo=",
+
+  "cookieDomain" :".openaire.eu",
+
+  "feedbackmail" :"feedback@openaire.eu",
+
+  "cacheUrl" :"https://explore.openaire.eu/cache/get?url=",
+
+  "datasourcesAPI": "https://services.openaire.eu/openaire/ds/search/",
+
+  "adminToolsAPIURL" :"https://services.openaire.eu/uoa-admin-tools/",
+
+  "adminToolsCommunity" :"connect",
+  "contextsAPI":"https://services.openaire.eu/openaire/context",
+
+  "communityAPI": "https://services.openaire.eu/openaire/community/",
+  "communitiesAPI": "https://services.openaire.eu/openaire/community/communities",
+
+  "csvLimit":  2000,
+  "pagingLimit":  20,
+  "resultsPerPage":  10,
+
+  "baseLink" : "https://connect.openaire.eu",
+
+  "afterLoginRedirectLink": "/myCommunities",
+
+  "searchLinkToPublication" : "/search/publication?articleId=",
+  "searchLinkToProject" : "/search/project?projectId=",
+  "searchLinkToDataProvider" : "/search/dataprovider?datasourceId=",
+  "searchLinkToDataset" : "/search/dataset?datasetId=",
+  "searchLinkToSoftwareLanding" : "/search/software?softwareId=",
+  "searchLinkToOrp" : "/search/other?orpId=",
+  "searchLinkToOrganization" : "/search/organization?organizationId=",
+
+  "searchLinkToPublications" : "/search/find/publications",
+  "searchLinkToDataProviders" : "/search/find/dataproviders",
+  "searchLinkToProjects" : "/search/find/projects",
+  "searchLinkToDatasets" : "/search/find/datasets",
+  "searchLinkToSoftware" : "/search/find/software",
+  "searchLinkToOrps" : "/search/find/other",
+  "searchLinkToOrganizations" : "/search/find/organizations",
+  "searchLinkToCompatibleDataProviders" : "/search/content-providers",
+  "searchLinkToEntityRegistriesDataProviders" : "/search/entity-registries",
+  "searchLinkToEntityRegistriesDataProvidersTable" : "/search/entity-registries-table",
+  "searchLinkToJournals" : "/search/journals",
+  "searchLinkToJournalsTable" : "/search/journals-table",
+
+  "searchLinkToAdvancedPublications" : "/search/advanced/publications",
+  "searchLinkToAdvancedProjects" : "/search/advanced/projects",
+  "searchLinkToAdvancedDatasets" : "/search/advanced/datasets",
+  "searchLinkToAdvancedSoftware" : "/search/advanced/software",
+  "searchLinkToAdvancedOrps" : "/search/advanced/other",
+  "searchLinkToAdvancedDataProviders" : "/search/advanced/dataproviders",
+  "searchLinkToAdvancedOrganizations" : "/search/advanced/organizations",
+  "lastIndexInformationLink" : "https://www.openaire.eu/aggregation-and-content-provision-workflows",
+  "showLastIndexInformationLink" : true,
+  "widgetLink" : "https://www.openaire.eu/index.php?option=com_openaire&view=widget&format=raw&projectId=",
+  "claimsInformationLink": "https://www.openaire.eu/linking",
+  "depositLearnHowPage": "/participate/deposit/learn-how",
+  "depositSearchPage": "/participate/deposit/search",
+  "shareInZenodoPage": "/participate/deposit/zenodo",
+  "reCaptchaSiteKey": "6LezhVIUAAAAAOb4nHDd87sckLhMXFDcHuKyS76P",
+
+  "admins" : ["rcd-helpdesk@openaire.eu"],
+  "lastIndexUpdate": "2019-07-24",
+  "indexInfoAPI": "http://services.openaire.eu/openaire/info/"
+}
diff --git a/package.json b/package.json
deleted file mode 100644
index 4a61f04..0000000
--- a/package.json
+++ /dev/null
@@ -1,63 +0,0 @@
-{
-  "name": "openaire-connect",
-  "version": "1.0.0",
-  "license": "Openaire",
-  "contributors": [
-    "Argiro Kokogiannaki <argirok@di.uoa.gr>",
-    "Konstantina Galouni <kgalouni@di.uoa.gr>"
-  ],
-  "scripts": {
-    "ng": "ng",
-    "start": " ng serve --disable-host-check --host 0.0.0.0",
-    "start:dynamic": "PORT=5000 npm run build:dynamic && npm run serve:dynamic",
-    "start:static": "npm run build:static && npm run serve:static",
-    "build": "ng build",
-    "build:client-and-server-bundles": "ng build --prod -sm --stats-json && ng build --prod --app 1 --output-hashing=false",
-    "build:static": "npm run build:client-and-server-bundles && npm run webpack:server && npm run generate:static",
-    "build:dynamic": "npm run build:client-and-server-bundles  && npm run webpack:server",
-    "generate:static": "cd dist && node prerender",
-    "webpack:server": "webpack --config webpack.server.config.js --progress --colors",
-    "serve:static": "cd dist/browser && http-server",
-    "serve:dynamic": "node dist/server"
-  },
-  "private": true,
-  "dependencies": {
-    "@angular/animations": "^4.2.4",
-    "@angular/common": "^4.2.4",
-    "@angular/compiler": "^4.2.4",
-    "@angular/core": "^4.2.4",
-    "@angular/forms": "^4.2.4",
-    "@angular/http": "^4.2.4",
-    "@angular/platform-browser": "^4.2.4",
-    "@angular/platform-browser-dynamic": "^4.2.4",
-    "@angular/platform-server": "^4.2.4",
-    "@angular/router": "^4.2.4",
-    "@nguniversal/express-engine": "^1.0.0-beta.3",
-    "@nguniversal/module-map-ngfactory-loader": "^1.0.0-beta.3",
-    "angular-datatables": "^4.4.0",
-    "citation-js": "^0.3.4",
-    "clipboard": "^1.5.16",
-    "core-js": "^2.4.1",
-    "datatables.net": "^1.10.16",
-    "datatables.net-dt": "^1.10.16",
-    "jquery": "^3.2.1",
-    "ngx-json-ld": "0.1.6",
-    "rxjs": "^5.4.2",
-    "ts-md5": "^1.2.0",
-    "wikidata-sdk": "^5.2.9",
-    "zone.js": "^0.8.14"
-  },
-  "devDependencies": {
-    "@angular/cli": "^1.3.0",
-    "@angular/compiler-cli": "^4.2.4",
-    "@angular/language-service": "^4.2.4",
-    "@types/datatables.net": "^1.10.8",
-    "@types/jquery": "^3.2.17",
-    "@types/node": "^8.0.30",
-    "cpy-cli": "^1.0.1",
-    "http-server": "^0.10.0",
-    "reflect-metadata": "^0.1.10",
-    "ts-loader": "^2.3.7",
-    "typescript": "~2.3.3"
-  }
-}
diff --git a/prerender.ts b/prerender.ts
deleted file mode 100644
index 5ddb8cd..0000000
--- a/prerender.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-// Load zone.js for the server.
-import 'zone.js/dist/zone-node';
-import 'reflect-metadata';
-import { readFileSync, writeFileSync, existsSync, mkdirSync } from 'fs';
-import { join } from 'path';
-
-import { enableProdMode } from '@angular/core';
-// Faster server renders w/ Prod mode (dev mode never needed)
-enableProdMode();
-
-// Express Engine
-import { ngExpressEngine } from '@nguniversal/express-engine';
-// Import module map for lazy loading
-import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
-import { renderModuleFactory } from '@angular/platform-server';
-import { ROUTES } from './static.paths';
-
-// * NOTE :: leave this as require() since this file is built Dynamically from webpack
-const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main.bundle');
-
-const BROWSER_FOLDER = join(process.cwd(), 'browser');
-
-// Load the index.html file containing referances to your application bundle.
-const index = readFileSync(join('browser', 'index.html'), 'utf8');
-
-let previousRender = Promise.resolve();
-
-// Iterate each route path
-ROUTES.forEach(route => {
-  var fullPath = join(BROWSER_FOLDER, route);
-
-  // Make sure the directory structure is there
-  if(!existsSync(fullPath)){
-    mkdirSync(fullPath);
-  }
-
-  // Writes rendered HTML to index.html, replacing the file if it already exists.
-  previousRender = previousRender.then(_ => renderModuleFactory(AppServerModuleNgFactory, {
-    document: index,
-    url: route,
-    extraProviders: [
-      provideModuleMap(LAZY_MODULE_MAP)
-    ]
-  })).then(html => writeFileSync(join(fullPath, 'index.html'), html));
-});
diff --git a/server.ts b/server.ts
deleted file mode 100644
index 6aeb0fa..0000000
--- a/server.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import 'zone.js/dist/zone-node';
-import 'reflect-metadata';
-import { renderModuleFactory } from '@angular/platform-server';
-import { enableProdMode } from '@angular/core';
-
-import * as express from 'express';
-import { join } from 'path';
-import { readFileSync } from 'fs';
-
-// Faster server renders w/ Prod mode (dev mode never needed)
-enableProdMode();
-
-// Express server
-const app = express();
-
-const PORT = process.env.PORT || 4000;
-const DIST_FOLDER = join(process.cwd(), 'dist');
-
-// Our index.html we'll use as our template
-const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();
-
-// * NOTE :: leave this as require() since this file is built Dynamically from webpack
-const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main.bundle');
-
-// Express Engine
-import { ngExpressEngine } from '@nguniversal/express-engine';
-// Import module map for lazy loading
-import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
-
-// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
-app.engine('html', ngExpressEngine({
-  bootstrap: AppServerModuleNgFactory,
-  providers: [
-    provideModuleMap(LAZY_MODULE_MAP)
-  ]
-}));
-
-app.set('view engine', 'html');
-app.set('views', join(DIST_FOLDER, 'browser'));
-
-/* - Example Express Rest API endpoints -
-  app.get('/api/**', (req, res) => { });
-*/
-
-// Server static files from /browser
-app.get('*.*', express.static(join(DIST_FOLDER, 'browser'), {
-  maxAge: '1y'
-}));
-
-// ALl regular routes use the Universal engine
-app.get('*', (req, res) => {
-  res.render('index', { req });
-});
-
-// Start up the Node server
-app.listen(PORT, () => {
-  console.log(`Node Express server listening on http://localhost:${PORT}`);
-});
diff --git a/src/app/affiliations/affiliations.component.html b/src/app/affiliations/affiliations.component.html
new file mode 100644
index 0000000..b1b8719
--- /dev/null
+++ b/src/app/affiliations/affiliations.component.html
@@ -0,0 +1,93 @@
+<schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other"></schema2jsonld>
+
+<ng-template #card let-organization="organization" let-fullView="fullView">
+  <div class="affiliation-logo  uk-flex uk-flex-middle uk-flex-center uk-padding-remove-horizontal"
+       [ngClass]="(!fullView)?'uk-card-body':'uk-card-media-top uk-padding-small'">
+    <div class="uk-align-center">
+      <img *ngIf="organization.logo_url != null && organization.logo_url != '' "
+           src="{{organization.logo_url}}" alt="{{(organization.name)?organization.name:''}} logo">
+      <span *ngIf="organization.logo_url == null || organization.logo_url == ''" class="uk-icon">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" icon="image" ratio="2.5"><circle cx="16.1" cy="6.1"
+                                                                                                     r="1.1"></circle><rect
+          fill="none" stroke="#000" x="0.5" y="2.5" width="19" height="15"></rect><polyline fill="none" stroke="#000"
+                                                                                            stroke-width="1.01"
+                                                                                            points="4,13 8,9 13,14"></polyline><polyline
+          fill="none" stroke="#000" stroke-width="1.01" points="11,12 12.5,10.5 16,14"></polyline></svg>
+      </span>
+    </div>
+  </div>
+  <div *ngIf="organization.name && fullView" class="uk-card-body uk-padding-remove-horizontal uk-padding-remove-top">
+    <span class="uk-text-bold uk-text-small">{{organization.name.slice(0, 100)}}</span><span
+    *ngIf="organization.name.length > 100">...</span>
+  </div>
+</ng-template>
+
+<ng-container *ngIf="affiliations.length > 0">
+  <div *ngIf="showLoading" class="uk-animation-fade uk-width-1-1" role="alert">
+    <span class="loading-gif uk-align-center"></span>
+  </div>
+  <div *ngIf="longView"
+       class="uk-child-width-1-5@l uk-child-width-1-3@m uk-child-width-1-2@s
+                    uk-text-center uk-grid-match uk-grid-small uk-grid-margin uk-margin-remove"
+       uk-height-match="target: > div > .uk-card > .affiliation-content > .affiliation-logo"
+       uk-scrollspy="cls: uk-animation-fade; target: > div > .uk-card; repeat: false"
+       uk-grid>
+
+    <div *ngFor="let affiliation of affiliations">
+      <div class="uk-card uk-card-default uk-card-small uk-padding-small">
+        <a *ngIf="affiliation.website_url" target="_blank" [href]="affiliation.website_url" class="affiliation-content">
+          <ng-container *ngTemplateOutlet="card; context: { organization: affiliation, fullView: true}"></ng-container>
+        </a>
+        <span *ngIf="!affiliation.website_url" class="affiliation-content">
+          <ng-container *ngTemplateOutlet="card; context: { organization: affiliation, fullView: true}"></ng-container>
+        </span>
+      </div>
+    </div>
+  </div>
+
+  <div *ngIf="communityFirstPage"
+       class="uk-margin-large-top uk-margin uk-text-center uk-text-large uk-text-meta uk-text-bold">
+    Related Organizations ({{affiliations.length}})
+  </div>
+
+  <div *ngIf="!longView" [class]="'uk-position-relative uk-visible-toggle'" tabindex="-1"
+       [attr.uk-slider]="sliderOptions">
+    <div
+      [class]="'uk-align-center uk-width-'+(affiliations.length >= affiliationsInSlider ? affiliationsInSlider : affiliations.length)+'-'+affiliationsInSlider">
+      <ul class="uk-slider-items uk-grid-small" uk-height-match="target: > li > .uk-card" uk-grid>
+        <li *ngFor="let affiliation of affiliations"
+            [class]="'affiliation-element uk-width-1-'+(affiliations.length >= affiliationsInSlider ? affiliationsInSlider : affiliations.length)">
+          <div class="uk-card uk-card-small uk-card-default uk-flex uk-flex-middle uk-flex-center uk-padding-small"
+               [attr.uk-tooltip]="(affiliation.name) ? affiliation.name : 'cls: uk-invisible'">
+            <a *ngIf="affiliation.website_url" target="_blank" [href]="affiliation.website_url"
+               class="affiliation-content">
+              <ng-container
+                *ngTemplateOutlet="card; context: { organization: affiliation, fullView: false}"></ng-container>
+            </a>
+            <span *ngIf="!affiliation.website_url" class="affiliation-content">
+              <ng-container *ngTemplateOutlet="card; context: { organization: affiliation}"></ng-container>
+            </span>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <!--       [class]="'uk-hidden-hover uk-position-center-left uk-padding uk-height-1-1 uk-flex uk-width-1-'+(affiliations.length >= affiliationsInSlider ? affiliationsInSlider : affiliations.length)"-->
+    <!--    class="uk-position-center-right uk-padding uk-height-1-1 uk-flex"-->
+    <a *ngIf="(affiliations.length > affiliationsInSlider) && arrows"
+       class="uk-position-center-left uk-padding uk-height-1-1 uk-flex"
+       href="#" uk-slidenav-previous uk-slider-item="previous"></a>
+    <a *ngIf="(affiliations.length > affiliationsInSlider) && arrows"
+       class="uk-position-center-right uk-padding uk-height-1-1 uk-flex"
+       href="#" uk-slidenav-next uk-slider-item="next"></a>
+  </div>
+  <div *ngIf="communityFirstPage"
+       [class]="'uk-align-center uk-width-'+(affiliations.length >= affiliationsInSlider ? affiliationsInSlider : affiliations.length)+'-'+affiliationsInSlider">
+    <a routerLink="/organizations" class="uk-align-right uk-link">
+      View more details
+    </a>
+  </div>
+</ng-container>
+
+<!--<div *ngIf="affiliations.length == 0 && longView" class="uk-animation-fade uk-alert uk-alert-primary" role="alert">-->
+<!--  No affiliations available-->
+<!--</div>-->
diff --git a/src/app/affiliations/affiliations.component.ts b/src/app/affiliations/affiliations.component.ts
new file mode 100644
index 0000000..f964335
--- /dev/null
+++ b/src/app/affiliations/affiliations.component.ts
@@ -0,0 +1,100 @@
+import {Component, Input}       from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+import {Title, Meta}            from '@angular/platform-browser';
+import {EnvProperties}          from '../openaireLibrary/utils/properties/env-properties';
+import {AffiliationService}     from "../openaireLibrary/connect/affiliations/affiliation.service";
+import {Affiliation}            from "../openaireLibrary/utils/entities/CuratorInfo";
+import {ConnectHelper}          from "../openaireLibrary/connect/connectHelper";
+import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
+import {PiwikService} from "../openaireLibrary/utils/piwik/piwik.service";
+import {PiwikHelper} from "../utils/piwikHelper";
+
+@Component({
+  selector: 'affiliations',
+  templateUrl: './affiliations.component.html'
+})
+export class AffiliationsComponent {
+  @Input() getAffiliationsFromAPI: boolean = false;
+  @Input() longView: boolean = false;
+  @Input() communityFirstPage: boolean = false;
+  @Input() affiliationsInSlider: number = 5;
+  @Input() affiliations: Affiliation[] = [];
+  @Input() sliderOptions = '';
+  @Input() arrows = true;
+
+  public showLoading: boolean = false;
+
+  communityId: string;
+  properties:EnvProperties;
+
+  public piwiksub: any;
+  public url: string = null;
+  public pageTitle: string = "Related Organizations";
+
+  constructor ( private  route: ActivatedRoute, private _router: Router,
+                private _meta: Meta,
+                private _title: Title,
+                private seoService: SEOService,
+                private _piwikService: PiwikService,
+                private affiliationService: AffiliationService) {}
+
+  public ngOnInit() {
+    this.route.data
+      .subscribe((data: { envSpecific: EnvProperties }) => {
+        this.route.queryParams.subscribe(
+          communityId => {
+            this.communityId  = ConnectHelper.getCommunityFromDomain(data.envSpecific.domain);
+            if(!this.communityId) {
+              this.communityId = communityId['communityId'];
+            }
+
+            this.properties = data.envSpecific;
+            if(this.longView) {
+              if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
+                this.piwiksub = this._piwikService.trackView(this.properties, this.pageTitle, PiwikHelper.getSiteId(this.communityId, this.properties.environment)).subscribe();
+              }
+              this.url = this.properties.baseLink + this._router.url;
+              this.seoService.createLinkForCanonicalURL(this.url);
+              this.updateUrl(this.url);
+              this.updateTitle(this.pageTitle);
+              this.updateDescription("OpenAIRE - Connect, Community Gateway, research community, organizations");
+            }
+            if(this.getAffiliationsFromAPI) {
+              this.showLoading = true;
+              this.affiliationService.initAffiliations(this.properties, this.properties.communityAPI + this.communityId + "/organizations");
+              this.affiliationService.affiliations.subscribe(
+                affiliations => {
+                  this.affiliations = affiliations;
+                  this.showLoading = false;
+                },
+                error => {
+                  console.error("Affiliations Component: Error getting affiliations for community with id: "+this.communityId, error);
+                  this.showLoading = false;
+                }
+              );
+            }
+          });
+      });
+  }
+
+  public ngOnDestroy() {
+    if (this.piwiksub) {
+      this.piwiksub.unsubscribe();
+    }
+  }
+
+  private updateDescription(description: string) {
+    this._meta.updateTag({content: description}, "name='description'");
+    this._meta.updateTag({content: description}, "property='og:description'");
+  }
+
+  private updateTitle(title: string) {
+    var _title = ((title.length > 50) ? title.substring(0, 50) : title);
+    this._title.setTitle(_title);
+    this._meta.updateTag({content: _title}, "property='og:title'");
+  }
+
+  private updateUrl(url: string) {
+    this._meta.updateTag({content: url}, "property='og:url'");
+  }
+}
diff --git a/src/app/affiliations/affiliations.module.ts b/src/app/affiliations/affiliations.module.ts
new file mode 100644
index 0000000..20e2528
--- /dev/null
+++ b/src/app/affiliations/affiliations.module.ts
@@ -0,0 +1,30 @@
+import { NgModule,  ModuleWithProviders }            from '@angular/core';
+
+import {FreeGuard} from '../openaireLibrary/login/freeGuard.guard';
+import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
+import {IsRouteEnabled} from '../openaireLibrary/error/isRouteEnabled.guard'
+import {RouterModule} from '@angular/router';
+
+import {AffiliationsComponent} from './affiliations.component';
+import {AffiliationService} from "../openaireLibrary/connect/affiliations/affiliation.service";
+import {CommonModule} from "@angular/common";
+import {Schema2jsonldModule} from "../openaireLibrary/sharedComponents/schema2jsonld/schema2jsonld.module";
+import {SEOServiceModule} from "../openaireLibrary/sharedComponents/SEO/SEOService.module";
+import {PiwikServiceModule} from "../openaireLibrary/utils/piwik/piwikService.module";
+
+@NgModule({
+  imports: [
+    CommonModule, RouterModule, Schema2jsonldModule, SEOServiceModule,
+    PiwikServiceModule
+  ],
+  declarations: [
+    AffiliationsComponent
+  ],
+  providers:[FreeGuard,PreviousRouteRecorder, IsRouteEnabled, AffiliationService],
+  exports: [
+    AffiliationsComponent
+  ]
+})
+
+
+export class AffiliationsModule{}
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 952a435..fb8bc2c 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -5,15 +5,36 @@ import { EnvironmentSpecificResolver} from './openaireLibrary/utils/properties/e
 import { EnvironmentSpecificService} from './openaireLibrary/utils/properties/environment-specific.service';
 
 import { OpenaireErrorPageComponent } from './error/errorPage.component';
+import {ThemeComponent} from "./test/theme.component";
 
 const routes: Routes = [
+  // Other Pages
   { path: '', loadChildren: './home/home.module#HomeModule', resolve: { envSpecific: EnvironmentSpecificResolver  }},
-  { path: 'initiatives', loadChildren: './initiatives/communities/communities.module#CommunitiesModule', resolve: { envSpecific: EnvironmentSpecificResolver  }},
-  { path: 'initiatives/:id', loadChildren: './initiatives/community/community.module#CommunityModule', resolve: { envSpecific: EnvironmentSpecificResolver  }},
 
+  { path: 'about',  redirectTo: 'about/learn-how', pathMatch: 'full'},
+  { path: 'about/learn-how', loadChildren: './learn-how/learn-how.module#LearnHowModule', resolve: { envSpecific:  EnvironmentSpecificResolver }},
+  { path: 'about/learn-in-depth', loadChildren: './learn-how/learnInDepth/learn-in-depth.module#LearnInDepthModule', resolve: { envSpecific:  EnvironmentSpecificResolver }},
+  { path: 'contact-us', loadChildren: './contact/contact.module#ContactModule', resolve: { envSpecific: EnvironmentSpecificResolver  }},
+  { path: 'invite', loadChildren: './utils/subscribe/invite/invite.module#InviteModule', resolve: { envSpecific: EnvironmentSpecificResolver  }},
+  { path: 'content', loadChildren: './content/contentPage.module#ContentPageModule', resolve: { envSpecific: EnvironmentSpecificResolver  }},
+  { path: 'organizations', loadChildren: './htmlPages/organizations/organizationsPage.module#OrganizationsPageModule', resolve: { envSpecific: EnvironmentSpecificResolver  }},
+  { path: 'curators', loadChildren: './curators/curators.module#CuratorsModule', resolve: { envSpecific: EnvironmentSpecificResolver  }},
+
+  { path: 'myCommunities', loadChildren: './my-communities/my-communities.module#MyCommunitiesModule', resolve: { envSpecific: EnvironmentSpecificResolver  }},
+
+  // Search Pages
+
+  { path: 'search/find/communities', loadChildren: './searchPages/communities/searchCommunities.module#SearchCommunitiesModule', resolve: { envSpecific: EnvironmentSpecificResolver  }},
+
+  // Testing Page for help contents
+  { path: 'helper-test', loadChildren: './helper-test/helper-test.module#HelperTestModule', resolve: { envSpecific: EnvironmentSpecificResolver  }},
+
+
+  // help pages - do not exist in Admin portal/api/db
   { path: 'reload', loadChildren: './reload/libReload.module#LibReloadModule', resolve: { envSpecific: EnvironmentSpecificResolver  }},
   { path: 'user-info', loadChildren: './login/libUser.module#LibUserModule', resolve: { envSpecific: EnvironmentSpecificResolver  }},
   { path: 'error', component: OpenaireErrorPageComponent, resolve: { envSpecific: EnvironmentSpecificResolver  }},
+  { path: 'theme', component: ThemeComponent},
   { path: '**',pathMatch: 'full',component: OpenaireErrorPageComponent, resolve: { envSpecific: EnvironmentSpecificResolver  }}
 ];
 
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index e450a54..3c645ae 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,11 +1,15 @@
-import { Component, Directive, ElementRef, Renderer, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
-import {Observable}       from 'rxjs/Observable';
-import {ActivatedRoute} from '@angular/router';
+import {Component} from '@angular/core';
+import {ActivatedRoute, NavigationStart, Router} from '@angular/router';
 
-import { EnvProperties} from './openaireLibrary/utils/properties/env-properties';
-import{MenuItem, RootMenuItem} from './openaireLibrary/sharedComponents/menu';
-import { EnvironmentSpecificService} from './openaireLibrary/utils/properties/environment-specific.service';
-import {Session} from './openaireLibrary/login/utils/helper.class';
+import {EnvProperties} from './openaireLibrary/utils/properties/env-properties';
+import {MenuItem, RootMenuItem} from './openaireLibrary/sharedComponents/menu';
+import {EnvironmentSpecificService} from './openaireLibrary/utils/properties/environment-specific.service';
+import {CommunitiesService} from "./openaireLibrary/connect/communities/communities.service";
+import {Session, User} from './openaireLibrary/login/utils/helper.class';
+import {ConnectHelper} from './openaireLibrary/connect/connectHelper';
+import {SubscribeService} from './openaireLibrary/utils/subscribe/subscribe.service';
+import {HelperFunctions} from "./openaireLibrary/utils/HelperFunctions.class";
+import {UserManagementService} from "./openaireLibrary/services/user-management.service";
 
 @Component({
   //changeDetection: ChangeDetectionStrategy.Default,
@@ -14,82 +18,273 @@ import {Session} from './openaireLibrary/login/utils/helper.class';
   styles: [`
   `],
   template: `
-
-        <navbar *ngIf= "properties  " portal="monitor" [onlyTop]=false    [userMenuItems]=userMenuItems [menuItems]=menuItems logoPath="assets/"
-        [(APIUrl)]="properties.adminToolsAPIURL" [(logInUrl)]="properties.loginUrl" [(logOutUrl)]="properties.logoutUrl"  [(cookieDomain)]="properties.cookieDomain"
-         ></navbar>
-
-
-                   <div class="custom-main-content"   >
-                      <main>
-                       <router-outlet></router-outlet>
-                     </main>
-                    </div>
-          <feedback *ngIf= "isClient && properties" portalName="Connect" [feedbackmail]=properties.feedbackmail></feedback>
-          <cookie-law *ngIf= "isClient" position="bottom">
-              OpenAIRE uses cookies in order to function properly.<br>
-              Cookies are small pieces of data that websites store in your browser to allow us to give you the best browsing experience possible.
-              By using the OpenAIRE portal you accept our use of cookies. <a href="//ec.europa.eu/ipg/basics/legal/cookies/index_en.htm" target="_blank"> Read more <span class="uk-icon">
-              <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-right" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03" points="7 4 13 10 7 16"></polyline></svg>
-              </span></a>
-          </cookie-law>
-           <bottom *ngIf= "isClient" [menuItems]=bottomMenuItems></bottom>
-
-`
+    <div [class]="(community)?(community.id +'App'):'connectApp'">
+      <navbar *ngIf="properties && showMenu && !community && loginCheck" portal="monitor" [onlyTop]=false
+              [userMenuItems]=userMenuItems [menuItems]=menuItems [user]="user"
+              [showMenu]=showMenu [properties]="properties" [showHomeMenuItem]="true"></navbar>
+      <navbar *ngIf="properties && showMenu  && community && loginCheck" portal="monitor" [onlyTop]=false [communityId]="community.id"
+              [userMenuItems]=userMenuItems [menuItems]=menuItems [user]="user"
+              [community]=community [showMenu]=showMenu [properties]="properties" [enableSearch]="true"
+              [showHomeMenuItem]="true"></navbar>
+      <div class="custom-main-content">
+        <main>
+          <router-outlet></router-outlet>
+        </main>
+      </div>
+      <!--feedback *ngIf= "isClient && properties" portalName="Connect" [feedbackQuestionaire]=properties.feedbackQuestionaire></feedback-->
+      <cookie-law *ngIf="isClient" position="bottom">
+        OpenAIRE uses cookies in order to function properly.<br>
+        Cookies are small pieces of data that websites store in your browser to allow us to give you the best browsing
+        experience possible.
+        By using the OpenAIRE portal you accept our use of cookies. <a
+        href="//ec.europa.eu/ipg/basics/legal/cookies/index_en.htm" target="_blank"> Read more <span class="uk-icon">
+            <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-right"
+                 ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03"
+                                     points="7 4 13 10 7 16"></polyline></svg>
+            </span></a>
+      </cookie-law>
+      <bottom *ngIf="properties && isClient && showMenu && !community" [grantAdvance]="false"
+              [properties]="properties"></bottom>
+      <bottom *ngIf="properties && isClient  && showMenu && community" class="communityPanelBackground"
+              [showSocialButtons]="true" [showMenuItems]="true" [grantAdvance]="false" [showOpenaire]="true"
+              [communityId]="community.id" [menuItems]=bottomMenuItems [properties]="properties"></bottom>
+    </div>
+  `
 
 })
 export class AppComponent {
-  isClient:boolean = false;
-  userMenuItems:MenuItem[] =[];
-  menuItems:RootMenuItem []=[];
-  bottomMenuItems:MenuItem[] =[];
-  properties:EnvProperties;
+  isClient: boolean = false;
 
-  constructor(  private  route: ActivatedRoute, private propertiesService:EnvironmentSpecificService  ) {
-   }
+  userMenuItems: MenuItem[] = [];
 
-   ngOnInit() {
-     this.propertiesService.loadEnvironment()
-             .then(es => {
-                 this.propertiesService.setEnvProperties(es);
-                 this.properties = this.propertiesService.envSpecific;
-                 this.bottomMenuItems =[
-                 new MenuItem("","About","https://beta.openaire.eu/project-factsheets","",false,[],[],{}),
-                 new MenuItem("","News - Events","https://beta.openaire.eu/news-events","",false,[],[],{}),
-                 new MenuItem("","Blog","https://blogs.openaire.eu/","",false,[],[],{}),
-                 new MenuItem("","Contact us","https://beta.openaire.eu/contact-us","",false,[],[],{})
-               ];
-               this.userMenuItems =[
-                  //new MenuItem("","My links","","/myclaims",false,[],["/myclaims"],{})
-                ];
-                this.menuItems = [
-                  {rootItem: new MenuItem("funders","Funders","","/search/find",false,[],["/search/find"],{}),
-                    items: [new MenuItem("","Publications","","/search/find/publications",false,["publication"],["/search/find/publications"],{})
-                  ]},
-                  {
-                  rootItem: new MenuItem("ris","Research initiatives","","",false,[],["/participate/deposit-publications","/participate/deposit-datasets"],{}),
-                  items: [new MenuItem("","Publications","","/participate/deposit-publications",false,["publication"],["/participate/deposit-publications"],{}),
-                  new MenuItem("","Research Data","","/participate/deposit-datasets",false,["dataset"],["/participate/deposit-datasets"],{})]
-                  },
-                  {
-                  rootItem: new MenuItem("link","Link","","/participate/claim",false,[],["/participate/claim"],{}),
+
+  menuItems: RootMenuItem [] = [];
+  bottomMenuItems: MenuItem[] = [];
+  public community = null;
+  properties: EnvProperties;
+  showMenu: boolean = false;
+  communities = null;
+  subscriberOfCommunities = false;
+  managerOfCommunities = false;
+  user: User;
+  loginCheck: boolean = false;
+
+  //  community: {id:string, name:string, logoUrl:string};
+  constructor(private  route: ActivatedRoute, private propertiesService: EnvironmentSpecificService,
+              private _communitiesService: CommunitiesService, private _subscribeService: SubscribeService,
+              private router: Router, private userManagementService: UserManagementService) {
+    router.events.forEach((event) => {
+      if (event instanceof NavigationStart) {
+        HelperFunctions.scroll();
+      }
+    });
+  }
+
+  ngOnInit() {
+    this.propertiesService.loadEnvironment()
+      .then(es => {
+        this.properties = this.propertiesService.envSpecific;
+        var communityId: string = "";
+        this._communitiesService.updateCommunities(this.properties, this.properties.communitiesAPI);
+        this.userManagementService.getUserInfo(this.properties.userInfoUrl).subscribe( user => {
+          this.user = user;
+          this.loginCheck = true;
+          if (this.properties.environment == "development") {
+            this.showMenu = false;
+            this.route.queryParams.subscribe(params => {
+              communityId = (params['communityId']) ? params['communityId'] : '';
+              this.buildMenu(communityId);
+            })
+          } else {
+            this.showMenu = false;
+            communityId = ConnectHelper.getCommunityFromDomain(this.properties.domain);
+            this.buildMenu(communityId);
+          }
+          if (typeof document !== 'undefined') {
+            try {
+              this.isClient = true;
+            } catch (e) {
+            }
+          }
+        }, error => {
+          console.log("App couldn't fetch properties");
+          console.log(error);
+
+        });
+        });
+  }
+
+  public buildMenu(communityId: string) {
+    let community = null;
+    this.community = null;
+    this._communitiesService.getCommunitiesState().subscribe(
+      communities => {
+        if (!communities || communities.length == 0 && communityId !== null && communityId !== '') {
+          return;
+        }
+        for (var com of communities) {
+          if ((communityId && communityId != "" && com.communityId == communityId
+            && community != null) ||
+            (
+              !(communityId && communityId != "" && com.communityId == communityId)
+              &&
+              this.managerOfCommunities && this.subscriberOfCommunities)) {
+            break;
+          }
+          if (this.user && com['status'] != "hidden") {
+            if (Session.isCommunityCurator(this.user) || Session.isPortalAdministrator(this.user)) {
+              this.managerOfCommunities = true;
+            } else if (com.managers.indexOf(this.user.email) != -1) {
+              this.managerOfCommunities = true;
+            }
+          }
+
+
+          if (communityId && communityId != "" && com.communityId == communityId) {
+            community = com;
+            let isCommunityManager: boolean = false;
+            if (Session.isCommunityCurator(this.user) || Session.isPortalAdministrator(this.user)) {
+              isCommunityManager = true;
+            } else if (this.user && com.managers.indexOf(this.user.email) != -1) {
+              isCommunityManager = true;
+            }
+            this.community = {
+              id: community.communityId,
+              name: (community.shortTitle) ? community.shortTitle : community.title,
+              logoUrl: community.logoUrl
+            };
+            this.menuItems = [];
+
+            this.menuItems.push(
+              {
+                rootItem: new MenuItem("search", "Search", "", "/search/find", false, [], ["/search/find", "/search/find/publications", "/search/find/datasets", "/search/find/software", "/search/find/other", "/search/find/projects", "/search/find/dataproviders"], this.properties.environment != "development" ? {} : {communityId: community.communityId}),
+                items: [new MenuItem("", "Publications", "", "/search/find/publications", false, ["publication"], ["/search/find/publications"], this.properties.environment != "development" ? {} : {communityId: community.communityId}),
+                  new MenuItem("", "Research Data", "", "/search/find/datasets", false, ["dataset"], ["/search/find/datasets"], this.properties.environment != "development" ? {} : {communityId: community.communityId}),
+                  new MenuItem("", "Software", "", "/search/find/software", false, ["software"], ["/search/find/software"], this.properties.environment != "development" ? {} : {communityId: community.communityId}),
+                  new MenuItem("", "Other Research Products", "", "/search/find/other", false, ["orp"], ["/search/find/other"], this.properties.environment != "development" ? {} : {communityId: community.communityId}),
+                  new MenuItem("", "Projects", "", "/search/find/projects/", false, ["project"], ["/search/find/projects"], this.properties.environment != "development" ? {} : {communityId: community.communityId}),
+                  new MenuItem("", "Content Providers", "", "/search/find/dataproviders", false, ["datasource"], ["/search/find/dataproviders"], this.properties.environment != "development" ? {} : {communityId: community.communityId}),
+                ]
+              });
+
+            this.menuItems.push({
+              rootItem: new MenuItem("deposit", "Deposit", "", "/participate/deposit/learn-how", false, [], ["/participate/deposit/learn-how"], this.properties.environment != "development" ? {} : {communityId: community.communityId}),
+              items: [
+                /*
+                new MenuItem("","Zenodo Communities","","/participate/share-zenodo",false,[],["/participate/share-zenodo"],this.properties.environment!="development"?{}:{communityId:community.communityId}),
+                new MenuItem("","Publications","","/participate/deposit-publications",false,["publication"],["/participate/deposit-publications"],this.properties.environment!="development"?{}:{communityId:community.communityId}),
+                new MenuItem("","Research Data","","/participate/deposit-datasets",false,["dataset"],["/participate/deposit-datasets"],this.properties.environment!="development"?{}:{communityId:community.communityId})
+                */
+              ]
+            });
+            this.menuItems.push(
+              {
+                rootItem: new MenuItem("link", "Link", "", "/participate/claim", false, [], ["/participate/claim"], this.properties.environment != "development" ? {} : {communityId: community.communityId}),
+                items: [
+                  new MenuItem("", "Start linking", "", "/participate/claim", false, [], ["/participate/claim"], this.properties.environment != "development" ? {} : {communityId: community.communityId}),
+                  new MenuItem("", "Learn more", this.properties.claimsInformationLink, "", false, [], [], {})
+                ]
+              });
+            if (isCommunityManager) {
+              this.menuItems.push(
+                {
+                  rootItem: new MenuItem("manage", "Manage", 'https://beta.admin.connect.openaire.eu/dashboard?communityId=' + community.communityId, "", false, [], [], {}),
                   items: []
-                  }
+                });
+            }
 
-              ];
-    //  this.route.queryParams.subscribe(data => {
-     //
-    //  });
-     if (typeof document !== 'undefined') {
-       try{
-         this.isClient = true;
-       }catch (e) {
-       }
-     }
-   }, error => {
-     console.log("App couldn't fetch properties");
-       console.log(error);
+          }
 
-   });
-   }
+        }
+        if (community == null) {
+          this.menuItems = [];
+          this.menuItems.push({
+            rootItem: new MenuItem("about", "About", "", "/about/learn-how", false, [], null, {}),
+            items: []
+          });
+          var myCommunities = [];
+          /*if(this.managerOfCommunities){
+            myCommunities.push( new MenuItem("","Managing communities","","/search/find/communities",false,[],[],{role:"%22manager%22"}))
+          }
+          if(Session.isLoggedIn()){
+            this._subscribeService.getCommunitiesSubscribedTo(this.properties, Session.getUserEmail()).subscribe (
+              pids => {
+                if(pids.length > 0 ) {
+                  myCommunities.push( new MenuItem("","Subscribed to communities","","/search/find/communities",false,[],[],{status:"%22subscribed%22"}))
+                }
+              },
+              error => {
+                console.error("Error fetching your subscribed communities")
+              });
+          }*/
+          this.menuItems.push({
+            rootItem: new MenuItem("communities", "Communities", "", "/search/find/communities", false, [], null, {}),
+            items: []
+          });
+          this.menuItems.push({
+            rootItem: new MenuItem("join", "Join", "", "/contact-us", false, [], null, {}),
+            items: []
+          });
+          /*if(this.managerOfCommunities || this.subscriberOfCommunities){
+            let myCommunitiesMenu =   new MenuItem("myCommunities","My Communities","","",false,[],[],{});
+            myCommunitiesMenu.setMarkAsActive(false);
+            this.menuItems.push({rootItem: myCommunitiesMenu, items: myCommunities});
+          }*/
+
+
+          this.bottomMenuItems = [
+            new MenuItem("", "About", "https://beta.openaire.eu/project-factsheets", "", false, [], [], {}),
+            new MenuItem("", "News - Events", "https://beta.openaire.eu/news-events", "", false, [], [], {}),
+            new MenuItem("", "Blog", "https://blogs.openaire.eu/", "", false, [], [], {}),
+            new MenuItem("", "Contact us", "https://beta.openaire.eu/contact-us", "", false, [], [], {})
+          ];
+          // if(this.properties.showContent){
+          //   this.bottomMenuItems.push(new MenuItem("","Content Policy","","/content",false,[],[],{}));
+          // }
+          this.userMenuItems = [
+            // new MenuItem("","My links","","/myclaims",false,[],["/myclaims"],(data['communityId'] && typeof document !== 'undefined' && ConnectHelper.isProduction(document.location.hostname))?{}:{communityId:data['communityId']}),
+          ];
+          if (Session.isPortalAdministrator(this.user)) {
+            //((this.properties.environment == "beta") ? "https://beta.admin.connect.openaire.eu" : "https://admin.explore.openaire.eu") + "/dashboard?communityId=openaire"
+            this.userMenuItems.push(new MenuItem("", "Manage Helptexts",
+              ((this.properties.environment == "production") ? "https://admin.explore.openaire.eu" : "https://beta.admin.connect.openaire.eu") + "/dashboard?communityId=connect",
+              "", false, [], [], {}))
+          }
+          /*if(this.managerOfCommunities){
+            this.userMenuItems.push( new MenuItem("","Managing communities","","/search/find/communities",false,[],[],{role:"%22manager%22"}))
+          }
+          if(Session.isLoggedIn()){
+            this._subscribeService.getCommunitiesSubscribedTo(this.properties, Session.getUserEmail()).subscribe (
+              pids => {
+                if(pids.length > 0 ) {
+                  this.userMenuItems.push( new MenuItem("","Subscribed to communities","","/search/find/communities",false,[],[],{status:"%22subscribed%22"}))
+                }
+              },
+              error => {
+                console.error("Error fetching your subscribed communities")
+              });
+          }*/
+          if (this.user) {
+            this.userMenuItems.push(new MenuItem("my-communities", "My Communities", "",
+              "/myCommunities", false, [], [], {}));
+          }
+        } else {
+          this.bottomMenuItems = [
+            // new MenuItem("","About","","/about",false,[],["/about"],this.properties.environment!="development"?{}:{communityId:community.communityId}),
+            new MenuItem("", "Organizations", "", "/organizations", false, [], ["/organizations"], this.properties.environment != "development" ? {} : {communityId: community.communityId})
+          ];
+          if (this.properties.showContent) {
+            this.bottomMenuItems.push(new MenuItem("", "Content Policy", "", "/content", false, [], [], {}));
+          }
+          this.userMenuItems = [ /*new MenuItem("","My profile","","",false,[],[],{}),*/
+            new MenuItem("", "My links", "", "/myclaims", false, [], ["/myclaims"], this.properties.environment != "development" ? {} : {communityId: community.communityId}),
+            new MenuItem("", "Invite users", "", "/invite", false, [], [], this.properties.environment != "development" ? {} : {communityId: community.communityId}),
+          ];
+          if (this.managerOfCommunities) {
+            this.userMenuItems.push(new MenuItem("", "Support", "https://openaire-connect.d4science.org/group/openaire-connect-gateway/explore?siteId=172366611", "", false, [], [], {}))
+          }
+        }
+        this.showMenu = true;
+      });
+  }
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
deleted file mode 100755
index b5ee424..0000000
--- a/src/app/app.module.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import {NgModule}                        from '@angular/core';
-import {FormsModule}                     from '@angular/forms';
-import {APP_BASE_HREF, CommonModule}     from '@angular/common';
-import {HttpModule}                      from '@angular/http';
-import {RouterModule}                    from '@angular/router';
-import {BrowserModule}                   from '@angular/platform-browser';
-import {NoopAnimationsModule}            from '@angular/platform-browser/animations';
-
-import {AppComponent}                    from './app.component';
-import {OpenaireErrorPageComponent}      from './error/errorPage.component';
-
-import {AppRoutingModule}                from './app-routing.module';
-import {SharedModule}                    from './shared/shared.module';
-import {CookieLawModule}                 from './openaireLibrary/sharedComponents/cookie-law/cookie-law.module';
-import {BottomModule}                    from './openaireLibrary/sharedComponents/bottom.module';
-import {FeedbackModule}                  from './openaireLibrary/sharedComponents/feedback/feedback.module';
-import {ErrorModule}                     from './openaireLibrary/error/error.module';
-import {NavigationBarModule}             from './openaireLibrary/sharedComponents/navigationBar.module';
-
-import {EnvironmentSpecificResolver}     from './openaireLibrary/utils/properties/environmentSpecificResolver';
-
-@NgModule({
-
-  imports: [
-    SharedModule,
-    NoopAnimationsModule,
-    CommonModule,
-    HttpModule,
-    ErrorModule,
-    NavigationBarModule, FeedbackModule, BottomModule,
-    CookieLawModule,
-    BrowserModule.withServerTransition({appId: 'my-app'}),
-    AppRoutingModule,
-  ],
-  declarations: [ AppComponent, OpenaireErrorPageComponent],
-  exports: [ AppComponent ],
-  providers:[EnvironmentSpecificResolver ],
-  bootstrap: [AppComponent]
-})
-//
-export class AppModule {}
diff --git a/src/app/app.server.module.ts b/src/app/app.server.module.ts
deleted file mode 100644
index 79602ec..0000000
--- a/src/app/app.server.module.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import {NgModule} from '@angular/core';
-import {ServerModule} from '@angular/platform-server';
-import {ModuleMapLoaderModule} from '@nguniversal/module-map-ngfactory-loader';
-
-import {AppModule} from './app.module';
-import {AppComponent} from './app.component';
-
-@NgModule({
-  imports: [
-    // The AppServerModule should import your AppModule followed
-    // by the ServerModule from @angular/platform-server.
-    AppModule,
-    ServerModule,
-    ModuleMapLoaderModule,
-  ],
-  // Since the bootstrapped component is not inherited from your
-  // imported AppModule, it needs to be repeated here.
-  bootstrap: [AppComponent],
-})
-export class AppServerModule {}
diff --git a/src/app/claims/claim.module.ts b/src/app/claims/claim.module.ts
deleted file mode 100644
index 113e859..0000000
--- a/src/app/claims/claim.module.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-// import { NgModule}            from '@angular/core';
-// import { CommonModule }        from '@angular/common';
-// import { FormsModule }         from '@angular/forms';
-// //
-// import {UtilsModule} from '../utils/utils.module';
-// import {ServicesModule} from '../services/services.module';
-//
-// import { ClaimsService} from '../services/claims.service';
-// //main
-// import {ClaimComponent} from './claim/claim.component';
-// import {ClaimsAdminComponent} from './claims/claimsAdmin.component';
-// import {MyClaimsComponent} from './myClaims/myClaims.component';
-// import {LinkingHomeComponent} from './linking/linkingHome.component';
-// import {LinkingComponent} from './linking/linking.component';
-// import { BulkLinkingComponent } from './linking/bulkLinking.component';
-//
-// import {BulkClaimComponent} from './linking/bulkClaim/bulkClaim.component';
-// import {ClaimsComponent} from './claim-utils/claims.component';
-//
-// import {ClaimContextComponent} from './claim-utils/claimContext.component';
-// import {ClaimProjectsComponent} from './claim-utils/claimProject.component';
-// import {ClaimResultComponent} from './claim-utils/claimResult.component';
-// import {ClaimPublicationComponent} from './claim-utils/claimPublication.component';
-// import {ClaimDatasetComponent} from './claim-utils/claimDataset.component';
-//
-// import {ClaimInsertComponent} from './linking/insertClaim/insertClaim.component';
-//
-// import {ClaimSelectedContextsComponent} from './linking/selected/selectedContexts.component';
-// import {ClaimSelectedComponent} from './linking/selected/selected.component';
-// import {ClaimSelectedDatasetsComponent} from './linking/selected/selectedDatasets.component';
-// import {ClaimSelectedResultsComponent} from './linking/selected/selectedResults.component';
-// import {ClaimSelectedProjectsComponent} from './linking/selected/selectedProjects.component';
-// import {ClaimSelectedPublicationsComponent} from './linking/selected/selectedPublications.component';
-//
-// import {LinkingGenericComponent} from './linking/linkingGeneric.component';
-//
-// import {InlineClaimContextComponent} from './inlineClaims/inlineClaimContext.component';
-// import {InlineClaimProjectComponent} from './inlineClaims/inlineClaimProject.component';
-// import {InlineClaimResultComponent} from './inlineClaims/inlineClaimResult.component';
-// import {ClaimEntityFormatter} from '../utils/claimEntityFormatter.component';
-//
-// import { Claim } from '../utils/entities/claim';
-// //helpers
-//
-// import { ClaimRoutingModule } from './claim-routing.module';
-// @NgModule({
-//   imports: [
-//     CommonModule, FormsModule,
-//     UtilsModule,
-//     ServicesModule,
-//     ClaimRoutingModule
-//
-//   ],
-//   declarations: [
-//     ClaimsAdminComponent, MyClaimsComponent, ClaimComponent, ClaimsComponent,
-//     BulkLinkingComponent, LinkingComponent,  LinkingHomeComponent, LinkingGenericComponent,
-//     InlineClaimContextComponent, InlineClaimProjectComponent, InlineClaimResultComponent, ClaimSelectedComponent,
-//     ClaimContextComponent,  ClaimSelectedContextsComponent, ClaimInsertComponent, ClaimProjectsComponent, ClaimSelectedProjectsComponent,
-//     ClaimResultComponent,  ClaimSelectedPublicationsComponent, ClaimSelectedDatasetsComponent, ClaimSelectedResultsComponent,  ClaimPublicationComponent,
-//     ClaimDatasetComponent, BulkClaimComponent,
-//     ClaimEntityFormatter
-//   ],
-//   providers:    [ ClaimsService ],
-//   exports: [
-//     InlineClaimContextComponent, InlineClaimProjectComponent, InlineClaimResultComponent
-//   ]
-// })
-// export class ClaimModule { }
diff --git a/src/app/claims/directLinking/directLinking-routing.module.ts b/src/app/claims/directLinking/directLinking-routing.module.ts
deleted file mode 100644
index f938be9..0000000
--- a/src/app/claims/directLinking/directLinking-routing.module.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { OpenaireDirectLinkingComponent } from './directLinking.component';
-import {LoginGuard} from '../../openaireLibrary/login/loginGuard.guard';
-import {PreviousRouteRecorder} from '../../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
-import {IsRouteEnabled} from '../../openaireLibrary/error/isRouteEnabled.guard';
-import {ConnectSubscriberGuard} from '../../openaireLibrary/connect/communityGuard/connectSubscriber.guard';
-
-@NgModule({
-  imports: [
-    RouterModule.forChild([
-      { path: '', component: OpenaireDirectLinkingComponent, canActivate: [IsRouteEnabled, LoginGuard, ConnectSubscriberGuard], data: {
-          redirect: '/error'
-        }, canDeactivate: [PreviousRouteRecorder]},
-
-    ])
-  ]
-})
-export class DirectLinkingRoutingModule { }
diff --git a/src/app/claims/directLinking/directLinking.component.ts b/src/app/claims/directLinking/directLinking.component.ts
deleted file mode 100644
index afabe0a..0000000
--- a/src/app/claims/directLinking/directLinking.component.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import {Component, Input} from '@angular/core';
-
-@Component({
-    selector: 'openaire-directLinking',
-    template: `<directLinking></directLinking>`
-})
-export class OpenaireDirectLinkingComponent {
-}
diff --git a/src/app/claims/directLinking/directLinking.module.ts b/src/app/claims/directLinking/directLinking.module.ts
deleted file mode 100644
index d8936eb..0000000
--- a/src/app/claims/directLinking/directLinking.module.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { NgModule } from '@angular/core';
-
-import { SharedModule } from '../../shared/shared.module';
-import { OpenaireDirectLinkingComponent } from './directLinking.component';
-import{ DirectLinkingModule} from '../../openaireLibrary/claims/directLinking/directLinking.module';
-import {DirectLinkingRoutingModule} from './directLinking-routing.module';
-import {LoginGuard} from '../../openaireLibrary/login/loginGuard.guard';
-import {PreviousRouteRecorder} from '../../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
-import {IsRouteEnabled} from '../../openaireLibrary/error/isRouteEnabled.guard';
-import {ConnectSubscriberGuard} from '../../openaireLibrary/connect/communityGuard/connectSubscriber.guard';
-import {CommunityService} from '../../openaireLibrary/connect/community/community.service';
-
-@NgModule({
-  imports: [
-    SharedModule, DirectLinkingModule, DirectLinkingRoutingModule
-  ],
-  providers:[LoginGuard, PreviousRouteRecorder, IsRouteEnabled, ConnectSubscriberGuard, CommunityService],
-  declarations: [
-    OpenaireDirectLinkingComponent
-  ], exports:[OpenaireDirectLinkingComponent]
-})
-export class LibDirectLinkingModule { }
diff --git a/src/app/claims/linking/linking-routing.module.ts b/src/app/claims/linking/linking-routing.module.ts
deleted file mode 100644
index d51483e..0000000
--- a/src/app/claims/linking/linking-routing.module.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { OpenaireLinkingComponent } from './linkingGeneric.component';
-
-import {LoginGuard} from '../../openaireLibrary/login/loginGuard.guard';
-import {PreviousRouteRecorder} from '../../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
-import {IsRouteEnabled} from '../../openaireLibrary/error/isRouteEnabled.guard';
-import {ConnectSubscriberGuard} from '../../openaireLibrary/connect/communityGuard/connectSubscriber.guard';
-
-@NgModule({
-  imports: [
-    RouterModule.forChild([
-      { path: '', component: OpenaireLinkingComponent, canActivate: [IsRouteEnabled, LoginGuard, ConnectSubscriberGuard], data: {
-          redirect: '/error'
-        }, canDeactivate: [PreviousRouteRecorder]},
-
-    ])
-  ]
-})
-export class LinkingRoutingModule { }
diff --git a/src/app/claims/linking/linkingGeneric.component.ts b/src/app/claims/linking/linkingGeneric.component.ts
deleted file mode 100644
index ed2a919..0000000
--- a/src/app/claims/linking/linkingGeneric.component.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import {Component, Input} from '@angular/core';
-import {Observable}       from 'rxjs/Observable';
-import {ActivatedRoute, Router} from '@angular/router';
-import {ConnectHelper} from '../../openaireLibrary/connect/connectHelper';
-
-@Component({
-    selector: 'openaire-linking-generic',
-    template: `<linking-generic [communityId]=communityId></linking-generic>`
-
-})
-export class OpenaireLinkingComponent {
-  communityId:string;
-  constructor (
-      private route: ActivatedRoute,
-      private _router: Router
-
-      ) {
-        this.route.queryParams.subscribe(
-          communityId => {
-                this.communityId = communityId['communityId'];
-                 if(!this.communityId){
-                  this.communityId  = ConnectHelper.getCommunityFromDomain(document.location.hostname);
-                 }
-
-              });
-
-      }
-}
diff --git a/src/app/claims/linking/linkingGeneric.module.ts b/src/app/claims/linking/linkingGeneric.module.ts
deleted file mode 100644
index 5095fb9..0000000
--- a/src/app/claims/linking/linkingGeneric.module.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { NgModule } from '@angular/core';
-
-import { SharedModule } from '../../shared/shared.module';
-import {OpenaireLinkingComponent} from './linkingGeneric.component';
-import {LinkingRoutingModule} from './linking-routing.module';
-import{   LinkingGenericModule} from '../../openaireLibrary/claims/linking/linkingGeneric.module';
-import {LoginGuard} from '../../openaireLibrary/login/loginGuard.guard';
-import {PreviousRouteRecorder} from '../../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
-import {IsRouteEnabled} from '../../openaireLibrary/error/isRouteEnabled.guard';
-import {ConnectSubscriberGuard} from '../../openaireLibrary/connect/communityGuard/connectSubscriber.guard';
-import {CommunityService} from '../../openaireLibrary/connect/community/community.service';
-
-@NgModule({
-  imports: [
-    SharedModule, LinkingRoutingModule, LinkingGenericModule
-  ],
-  providers:[LoginGuard, PreviousRouteRecorder, IsRouteEnabled, ConnectSubscriberGuard, CommunityService],
-  declarations: [
-    OpenaireLinkingComponent
-   ], exports:[
-   OpenaireLinkingComponent ]
-})
-export class LibLinkingGenericModule { }
diff --git a/src/app/claims/myClaims/myClaims-routing.module.ts b/src/app/claims/myClaims/myClaims-routing.module.ts
deleted file mode 100644
index 45d21f4..0000000
--- a/src/app/claims/myClaims/myClaims-routing.module.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import {OpenaireMyClaimsComponent } from './myClaims.component';
-import {LoginGuard} from '../../openaireLibrary/login/loginGuard.guard';
-import {PreviousRouteRecorder} from '../../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
-import {IsRouteEnabled} from '../../openaireLibrary/error/isRouteEnabled.guard';
-
-@NgModule({
-  imports: [
-    RouterModule.forChild([
-      { path: '', component: OpenaireMyClaimsComponent, canActivate: [IsRouteEnabled, LoginGuard],
-      data: {redirect: '/error' }, canDeactivate: [PreviousRouteRecorder]}])
-  ]
-})
-export class MyClaimsRoutingModule { }
diff --git a/src/app/claims/myClaims/myClaims.component.ts b/src/app/claims/myClaims/myClaims.component.ts
deleted file mode 100644
index 2bd997b..0000000
--- a/src/app/claims/myClaims/myClaims.component.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import {Component, Input} from '@angular/core';
-import {Observable}       from 'rxjs/Observable';
-
-
-@Component({
-    selector: 'openaire-my-claims',
-    template: `
-    <my-claims>
-</my-claims>
-`
-
-})
- export class OpenaireMyClaimsComponent {
-  constructor () {
-
-   }
-   ngOnInit() {
-
-  }
-
-}
diff --git a/src/app/claims/myClaims/myClaims.module.ts b/src/app/claims/myClaims/myClaims.module.ts
deleted file mode 100644
index 8402be1..0000000
--- a/src/app/claims/myClaims/myClaims.module.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { NgModule } from '@angular/core';
-
-import { SharedModule } from '../../shared/shared.module';
-import { OpenaireMyClaimsComponent } from './myClaims.component';
-import { MyClaimsRoutingModule } from './myClaims-routing.module';
-import{  MyClaimsModule} from '../../openaireLibrary/claims/myClaims/myClaims.module';
-import {LoginGuard} from '../../openaireLibrary/login/loginGuard.guard';
-import {PreviousRouteRecorder} from '../../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
-import {IsRouteEnabled} from '../../openaireLibrary/error/isRouteEnabled.guard';
-
-
-@NgModule({
-  imports: [
-    SharedModule,
-    MyClaimsRoutingModule,
-    MyClaimsModule
-
-  ],
-  providers:[LoginGuard, PreviousRouteRecorder, IsRouteEnabled],
-  declarations: [
-    OpenaireMyClaimsComponent
-  ]
-})
-export class LibMyClaimsModule { }
diff --git a/src/app/claims/myClaimsDemo.component.ts b/src/app/claims/myClaimsDemo.component.ts
deleted file mode 100644
index 6490a59..0000000
--- a/src/app/claims/myClaimsDemo.component.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-// import {Component, Input} from '@angular/core';
-// import {Observable}       from 'rxjs/Observable';
-// import { Router } from '@angular/router';
-//
-//
-//
-// @Component({
-//     selector: 'my-claims-demo',
-//     template: `
-//     <div *ngIf="user" class="container">
-//       <div class="page-header">
-//           <h1> My Claims Demo</h1>
-//       </div>
-//       <div>
-//         <div class=""><a  routerLink="/Linking">Linking</a></div>
-//         <div class=""><a  routerLink]="/MyClaims">MyClaims</a></div>
-//         <div class=""><a  routerLink="/Claims">Claims Admin</a></div>
-//         <p> Extra parameters for claims admin</p>
-//         <div class=""><a  href="claims?fetchBy=User&fetchId=amelie.baecker@uni-bielefeld.de">Claims By user</a></div>
-//         <div class=""><a  href="claims?fetchBy=Project&fetchId=corda_______::2c37878a0cede85dbbd1081bb9b4a2f8">Claims By project</a></div>
-//         <div class=""><a  href="claims?fetchBy=Context&fetchId=egi::country::gr">Claims By context</a></div>
-//
-// <!--        <p>Orcid
-//           <p>N.M.
-//           0000-0002-3477-3082
-//           </p>
-//         </p> -->
-//          <div class=""><a href="publication?articleId=od_______908::3a5b2885656a91307156325644e73b92"  >Publication od_______908::3a5b2885656a91307156325644e73b92</a></div>
-//          <!--<div class=""><a href="publication?articleId=od_______908::3a5b2885656a91307156325644e73b92"  >Publication od_______908::3a5b2885656a91307156325644e73b92</a></div>
-//          <div class=""><a href="publication?articleId=od_______908::3a5b2885656a91307156325644e73b92"  >Publication od_______908::3a5b2885656a91307156325644e73b92</a></div>-->
-//        </div>
-//     </div>
-//
-//
-//
-// `
-// //(click)="changeOrderby('target')"
-// //od_______908::3a5b2885656a91307156325644e73b92
-//
-// })
-//  export class MyClaimsDemoComponent {
-//   constructor ( private _router: Router  ) {
-//    }
-//   user:string="argirok@di.uoa.gr";
-//    ngOnInit() {
-//
-//   }
-//   goToPub(id: number){
-//     this._router.navigate( ['Publication', { articleId: id}] );
-//   }
-// }
diff --git a/src/app/communities/browseCommunity/browse-community.component.html b/src/app/communities/browseCommunity/browse-community.component.html
new file mode 100644
index 0000000..d264e26
--- /dev/null
+++ b/src/app/communities/browseCommunity/browse-community.component.html
@@ -0,0 +1,88 @@
+<div class="uk-container line-height-normal uk-text-small" *ngIf="community">
+  <div *ngIf="community.status =='manager'"
+       class="uk-card-badge private-card-badge uk-width-1-3 uk-position-top-left uk-text-small uk-text-center">
+    Private
+  </div>
+  <div *ngIf="community.isSubscribed"
+       class="uk-position-top-right uk-card-badge portal-card-badge uk-width-1-2 uk-text-small uk-text-center">
+    <span>Subscribed</span>
+  </div>
+  <div class="uk-card-media-top uk-padding uk-padding-remove-vertical uk-flex uk-flex-center uk-flex-middle">
+    <a *ngIf="directLink" [href]="getCommunityPageUrl()" target="_blank">
+      <div class="community">
+        <img *ngIf="community.logoUrl != null && community.logoUrl != ''" src="{{community.logoUrl}}"
+             alt="{{(community.title)?community.title:community.shortTitle}} logo">
+        <span *ngIf="community.logoUrl == null || community.logoUrl == ''" class="uk-icon">
+          <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="2.5"> <circle fill="none" stroke="#000"
+                                                                                           stroke-width="1.1" cx="7.7"
+                                                                                           cy="8.6" r="3.5"></circle> <path
+            fill="none" stroke="#000" stroke-width="1.1"
+            d="M1,18.1 C1.7,14.6 4.4,12.1 7.6,12.1 C10.9,12.1 13.7,14.8 14.3,18.3"></path> <path fill="none"
+                                                                                                 stroke="#000"
+                                                                                                 stroke-width="1.1"
+                                                                                                 d="M11.4,4 C12.8,2.4 15.4,2.8 16.3,4.7 C17.2,6.6 15.7,8.9 13.6,8.9 C16.5,8.9 18.8,11.3 19.2,14.1"></path></svg>
+        </span>
+      </div>
+    </a>
+    <a *ngIf="!directLink" (click)="confirmModalOpen()">
+      <div class="community">
+        <img *ngIf="community.logoUrl != null && community.logoUrl != ''" src="{{community.logoUrl}}"
+             alt="{{(community.title)?community.title:community.shortTitle}} logo">
+        <span *ngIf="community.logoUrl == null || community.logoUrl == ''" class="uk-icon">
+          <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="2.5"> <circle fill="none" stroke="#000"
+                                                                                           stroke-width="1.1" cx="7.7"
+                                                                                           cy="8.6" r="3.5"></circle> <path
+            fill="none" stroke="#000" stroke-width="1.1"
+            d="M1,18.1 C1.7,14.6 4.4,12.1 7.6,12.1 C10.9,12.1 13.7,14.8 14.3,18.3"></path> <path fill="none"
+                                                                                                 stroke="#000"
+                                                                                                 stroke-width="1.1"
+                                                                                                 d="M11.4,4 C12.8,2.4 15.4,2.8 16.3,4.7 C17.2,6.6 15.7,8.9 13.6,8.9 C16.5,8.9 18.8,11.3 19.2,14.1"></path></svg>
+        </span>
+      </div>
+    </a>
+  </div>
+  <div class="uk-card-body uk-padding-small uk-padding-remove-horizontal uk-padding-remove-top uk-margin-small-top uk-margin-bottom">
+    <div class="uk-text-center uk-text-bold " [ngClass]="(showDescription)?'uk-margin-bottom':''">
+      <a *ngIf="directLink" [href]="getCommunityPageUrl()" target="_blank">
+        <span *ngIf="community.title">
+          {{community.title.slice(0, thresholdTitle)}}
+          <span *ngIf="community.title.length > thresholdTitle">...</span>
+        </span>
+        <span *ngIf="!community.title && community.shortTitle">
+          {{community.shortTitle.slice(0, thresholdTitle)}}
+          <span *ngIf="community.shortTitle.length > thresholdTitle">...</span>
+        </span>
+      </a>
+      <a *ngIf="!directLink" (click)="confirmModalOpen()">
+        <span *ngIf="community.title">
+          {{community.title.slice(0, thresholdTitle)}}
+          <span *ngIf="community.title.length > thresholdTitle">...</span>
+        </span>
+        <span *ngIf="!community.title && community.shortTitle">
+          {{community.shortTitle.slice(0, thresholdTitle)}}
+          <span *ngIf="community.shortTitle.length > thresholdTitle">...</span>
+        </span>
+      </a>
+    </div>
+    <div class="uk-text-left" *ngIf="community.description != null && showDescription"
+         title="{{community.description}}">
+      <span>{{community.description.slice(0, thresholdDescription)}}<span
+        *ngIf="community.description.length > thresholdDescription">...</span></span>
+    </div>
+  </div>
+  <div>
+    <div class="uk-position-small uk-position-bottom-right">
+      <a *ngIf="directLink" [href]="getCommunityPageUrl()" target="_blank" class="portal-link uk-text-uppercase uk-text-bold">
+        Visit
+      </a>
+      <a *ngIf="!directLink" (click)="confirmModalOpen()" class="portal-link uk-text-uppercase uk-text-bold">
+        Visit
+      </a>
+    </div>
+  </div>
+</div>
+<modal-alert #AlertModal (alertOutput)="goToCommunityPage($event)">
+  <div class="uk-text-left">
+    You will be navigated to a new tab. Are you sure that you want to proceed?
+  </div>
+</modal-alert>
diff --git a/src/app/communities/browseCommunity/browse-community.component.ts b/src/app/communities/browseCommunity/browse-community.component.ts
new file mode 100644
index 0000000..842c889
--- /dev/null
+++ b/src/app/communities/browseCommunity/browse-community.component.ts
@@ -0,0 +1,94 @@
+import {Component, Input, ViewChild} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+import {Location} from '@angular/common';
+
+import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';
+import {CommunityInfo} from '../../openaireLibrary/connect/community/communityInfo';
+import {LocalStorageService} from "../../openaireLibrary/services/localStorage.service";
+
+@Component({
+  selector: 'browse-community',
+  templateUrl: 'browse-community.component.html'
+})
+
+export class BrowseCommunityComponent {
+  @Input() public community: CommunityInfo = null;
+  @Input() public showDescription: boolean = true;
+  @ViewChild('AlertModal') modal;
+
+  public hiddenMessage: string = "Community is hidden to registered users. It is visible only to users that have privileges to  manage community; delay: 100";
+  // cut title too
+  // check title length, if is manager, if is private and cut description accordingly
+  public thresholdTitle: number = 50;
+  public thresholdDescription: number = 120;
+  properties: EnvProperties;
+  public directLink: boolean = true;
+
+  constructor(private route: ActivatedRoute,
+              private router: Router,
+              private location: Location,
+              private localStorageService: LocalStorageService) {
+  }
+
+
+  public ngOnInit() {
+    this.route.data
+      .subscribe((data: { envSpecific: EnvProperties }) => {
+        this.properties = data.envSpecific;
+        this.localStorageService.get().subscribe(value => {
+          this.directLink = value;
+        });
+      });
+  }
+
+  public ngOnDestroy() {
+  }
+
+  isProduction(): boolean {
+    return this.properties.environment != "development";
+  }
+
+  getProductionPrefix(): string {
+    return (this.properties.environment == "beta") ? "beta." : ""
+  }
+
+  public confirmModalOpen() {
+    this.modal.cancelButton = true;
+    this.modal.okButton = true;
+    this.modal.alertTitle = 'You are going to visit ' +
+      ((this.community.title) ? this.community.title : this.community.shortTitle) + ' Gateway';
+    this.modal.alertMessage = false;
+    this.modal.okButtonLeft = false;
+    this.modal.okButtonText = 'Yes';
+    this.modal.cancelButtonText = 'No';
+    this.modal.choice = true;
+    this.modal.open();
+  }
+
+  public getCommunityPageUrl(): string {
+    let url = '';
+    if (this.isProduction()) {
+      url = 'https://' + this.getProductionPrefix() + this.community.communityId + '.openaire.eu';
+    } else {
+      url = this.router.createUrlTree(['/'], {
+        queryParams: {'communityId': this.community.communityId}
+      }).toString();
+    }
+    return url;
+  }
+
+  public goToCommunityPage(data: any) {
+    if (data.value == true) {
+      this.localStorageService.setCommunityDirectLink(data.choice);
+      let url = '';
+      if (this.isProduction()) {
+        url = 'https://' + this.getProductionPrefix() + this.community.communityId + '.openaire.eu';
+      } else {
+        url = this.router.createUrlTree(['/'], {
+          queryParams: {'communityId': this.community.communityId}
+        }).toString();
+      }
+      window.open(url, '_blank');
+    }
+  }
+}
diff --git a/src/app/communities/browseCommunity/browse-community.module.ts b/src/app/communities/browseCommunity/browse-community.module.ts
new file mode 100644
index 0000000..58edd4f
--- /dev/null
+++ b/src/app/communities/browseCommunity/browse-community.module.ts
@@ -0,0 +1,29 @@
+import {NgModule}                 from '@angular/core';
+import {CommonModule}             from '@angular/common';
+import {FormsModule}              from '@angular/forms';
+import {RouterModule}             from '@angular/router';
+
+import {BrowseCommunityComponent}     from './browse-community.component';
+
+import {FreeGuard}                from '../../openaireLibrary/login/freeGuard.guard';
+
+import {SearchFormModule}         from '../../openaireLibrary/searchPages/searchUtils/searchForm.module';
+import {ManageModule}             from '../../openaireLibrary/utils/manage/manage.module';
+import {AlertModalModule}         from "../../openaireLibrary/utils/modal/alertModal.module";
+
+@NgModule({
+  imports: [
+    CommonModule, FormsModule, RouterModule,
+    SearchFormModule, ManageModule, AlertModalModule
+  ],
+  declarations: [
+    BrowseCommunityComponent
+  ],
+  providers:[
+    FreeGuard
+  ],
+  exports: [
+    BrowseCommunityComponent
+  ]
+})
+export class BrowseCommunityModule { }
diff --git a/src/app/initiatives/communities/communities-routing.module.ts b/src/app/communities/communities-routing.module.ts
similarity index 68%
rename from src/app/initiatives/communities/communities-routing.module.ts
rename to src/app/communities/communities-routing.module.ts
index b56e337..4c792f3 100644
--- a/src/app/initiatives/communities/communities-routing.module.ts
+++ b/src/app/communities/communities-routing.module.ts
@@ -3,8 +3,8 @@ import { RouterModule } from '@angular/router';
 
 import{CommunitiesComponent} from './communities.component';
 
-import {FreeGuard} from '../../openaireLibrary/login/freeGuard.guard';
-import {PreviousRouteRecorder} from '../../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
+import {FreeGuard} from '../openaireLibrary/login/freeGuard.guard';
+import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
 
 @NgModule({
   imports: [
diff --git a/src/app/communities/communities.component.html b/src/app/communities/communities.component.html
new file mode 100644
index 0000000..30fd6b4
--- /dev/null
+++ b/src/app/communities/communities.component.html
@@ -0,0 +1,242 @@
+<schema2jsonld [URL]="properties.baseLink"
+               [logoURL]="properties.baseLink+'/assets/common-assets/logo-small-connect.png'" type="home"
+               name="OpenAIRE Connect">
+</schema2jsonld>
+<div
+     class="image-front-topbar"
+     uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}"
+     tm-header-transparent="light" tm-header-transparent-placeholder="">
+  <helper *ngIf="pageContents && pageContents['left'] && pageContents['left'].length > 0"
+          [texts]="pageContents['left']"></helper>
+  <!--<div style="background-image: url('assets/home/banner.jpg') !important;"
+    class="uk-section uk-background-norepeat uk-background-bottom-center uk-background-cover uk-section-overlap uk-position-relative uk-preserve-color">
+    <div class=" uk-section uk-padding-remove-bottom">
+      <div class="uk-position-cover"></div>
+      <div class="uk-position-relative uk-panel">
+        <div class="uk-container uk-container-large uk-section">
+          <div class="uk-grid">
+            <div class="uk-width-1-2@m uk-width-1-1@s">
+              <div class="uk-h1">Build an Open Research <b>Gateway</b> for your <b>Community</b></div>
+              <h4 class="uk-margin-remove-top">Turn Open Science into practice</h4>
+              <div class="uk-h5 uk-margin-top">Share and link your research results.<br>
+                Across organizations, across borders.<br>Customized to your needs.
+              </div>
+            </div>
+            <div class="uk-width-1-1 uk-inline uk-margin-medium-top uk-margin-medium-bottom">
+              <a class="uk-button portal-button" routerLink="/about/learn-how" routerLinkActive="router-link-active">
+                LEARN
+                HOW</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>-->
+</div>
+<div>
+  <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
+          [texts]="pageContents['top']"></helper>
+  <!--<div class="uk-container uk-container-large uk-margin-medium-top">
+    <div class="uk-text-center uk-text-bold uk-h4">Open and FAIR science is our mission</div>
+    <div class="uk-margin-medium-top">
+      <div class="uk-child-width-1-3@m uk-child-width-1-1@s uk-grid-match uk-grid-medium uk-grid-margin"
+           uk-height-match=".target" uk-grid>
+        <div>
+          <div class="uk-card uk-card-default uk-padding-small connectInfoCard">
+            <div class="uk-card-media-top uk-flex uk-flex-middle uk-flex-center">
+              <div class="target">
+                <img src="assets/connect-assets/home/1.png" width="100" height="89">
+              </div>
+            </div>
+            <div class="uk-card-body uk-padding-remove-horizontal uk-padding-remove-bottom">
+              <div class="target">
+                <h5 class="uk-text-bold uk-text-center">A Virtual Research Environment</h5>
+                <div>An overlay platform making it easy to share, link, disseminate and monitor all your publications,
+                  data, software, methods. In one place.
+                </div>
+              </div>
+              <hr>
+              <div>
+                <div class="uk-text-uppercase text-center">Features</div>
+                <ul class="uk-list">
+                  <li>
+                      <span
+                        class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right"
+                        uk-icon="check">
+                      </span>
+                    Access to OpenAIRE resources
+                  </li>
+                  <li>
+                      <span
+                        class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right"
+                        uk-icon="check">
+                      </span>
+                    Moderated, front-end linking
+                  </li>
+                  <li>
+                      <span
+                        class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right"
+                        uk-icon="check">
+                      </span>
+                    Cross-platform search
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div class="uk-card uk-card-default uk-padding-small connectInfoCard">
+            <div class="uk-card-media-top uk-flex uk-flex-middle uk-flex-center">
+              <div class="target">
+                <img src="assets/connect-assets/home/2.png" width="100" height="108">
+              </div>
+            </div>
+            <div class="uk-card-body uk-padding-remove-horizontal uk-padding-remove-bottom">
+              <div class="target">
+                <h5 class="uk-text-bold uk-text-center">Open Science in action</h5>
+                <div>A time-saving bundle of services for researchers to effortlessly practice open science. An integral
+                  part of the European Open Science Cloud.
+                </div>
+
+              </div>
+              <hr>
+              <div>
+                <div class="uk-text-uppercase text-center">Features</div>
+                <ul class="uk-list">
+                  <li>
+                      <span
+                        class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right"
+                        uk-icon="check">
+                      </span>
+                    Use of OpenAIRE Guidelines
+                  </li>
+                  <li>
+                      <span
+                        class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right"
+                        uk-icon="check">
+                      </span>
+                    DOIs via Zenodo
+                  </li>
+                  <li>
+                      <span
+                        class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right"
+                        uk-icon="check">
+                      </span>
+                    EOSC Single Sign-On
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div class="uk-card uk-card-default uk-padding-small connectInfoCard">
+            <div class="uk-card-media-top uk-flex uk-flex-middle uk-flex-center">
+              <div class="target">
+                <img src="assets/connect-assets/home/3.png" width="120" height="104">
+              </div>
+            </div>
+            <div class="uk-card-body uk-padding-remove-horizontal uk-padding-remove-bottom">
+              <div class="target">
+                <h5 class="uk-text-bold uk-text-center">Customized to your needs</h5>
+                <div>A Science Gateway with your own brand, rules for aggregation, text & data mining, and
+                  presentation. Run by you via a simple, yet powerful backend administration tool.
+                </div>
+              </div>
+              <hr>
+              <div>
+                <div class="uk-text-uppercase text-center">Features</div>
+                <ul class="uk-list">
+                  <li>
+                      <span
+                        class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right"
+                        uk-icon="check">
+                      </span>
+                    Access control
+                  </li>
+                  <li>
+                      <span
+                        class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right"
+                        uk-icon="check">
+                      </span>
+                    Analytics: rich set of indicators
+                  </li>
+                  <li>
+                      <span
+                        class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right"
+                        uk-icon="check">
+                      </span>
+                    Look & feel to match your brand
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div style="background-image: url('assets/home/background.png') !important;"
+       class="uk-margin-large-top uk-section uk-background-norepeat uk-background-top-center uk-background-cover uk-section-overlap uk-position-relative uk-preserve-color">
+    <div class="uk-container uk-container-large">
+      <gif-slider [gifs]="gifs" [link]="true" [linkTitle]="'learn more'" [route]="'/about/learn-how'">
+      </gif-slider>
+    </div>
+  </div>-->
+</div>
+<div *ngIf="researchCommunities.length === 0" class="uk-container uk-container-large uk-margin-medium-top">
+  <errorMessages [status]="[status]" [type]="'communities'"></errorMessages>
+</div>
+<div *ngIf="!loading && researchCommunities.length > 0" class="uk-container uk-container-large uk-margin-medium-top">
+  <div class="uk-text-bold uk-h4">Community Gateways in Action</div>
+  <div [class]="'uk-margin-medium-top' + (researchCommunities.length <= 5 ? ' uk-margin-medium-bottom' : '')">
+
+    <div
+      class="uk-grid-match uk-grid-medium  uk-child-width-1-5@m uk-child-width-1-2 uk-text-center"
+      uk-grid uk-height-match=".community">
+      <div *ngFor="let community of researchCommunities.slice(0, 5); let i = index">
+        <div class="uk-padding-small uk-card uk-card-default communityCard">
+          <browse-community [community]=community></browse-community>
+        </div>
+      </div>
+    </div>
+
+  </div>
+  <div class="uk-text-right uk-margin-top">
+    <a *ngIf="researchCommunities.length > 5" class="portal-link uk-text-uppercase uk-text-bold uk-text-small"
+       routerLinkActive="router-link-active" routerLink="/search/find/communities">
+      Browse All >
+    </a>
+  </div>
+</div>
+<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
+        [texts]="pageContents['bottom']"></helper>
+<!--<div style="background-color: #CFDEF1;"
+     class="uk-background-norepeat uk-background-cover uk-section-overlap uk-position-relative uk-preserve-color uk-margin-large-top">
+  <div class="uk-container uk-container-large uk-section">
+    <div class="uk-flex uk-flex-middle uk-padding" uk-grid>
+      <div class="uk-text-center uk-width-1-1@s uk-width-1-3@m">
+        <img width="237" height="250" src="assets/connect-assets/contact/1.png">
+      </div>
+      <div class="uk-width-expand">
+        <div class="uk-text-bold uk-h4">
+          <div>Let us help you develop a collaborative Open Science Gateway for your community. It is fast. It is
+            reliable.
+          </div>
+        </div>
+        <div class="uk-margin-medium">Get in touch with our team to find out how.</div>
+        <div class="uk-inline">
+          <a class="uk-button portal-button" routerLink="/contact-us" routerLinkActive="router-link-active"> CONTACT
+            US</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>-->
+<div class="uk-section-muted"
+     uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}">
+  <div class="uk-container uk-container-large">
+    <other-portals [properties]="properties" portal="monitor"> </other-portals>
+  </div>
+</div>
diff --git a/src/app/communities/communities.component.ts b/src/app/communities/communities.component.ts
new file mode 100644
index 0000000..6fe3472
--- /dev/null
+++ b/src/app/communities/communities.component.ts
@@ -0,0 +1,199 @@
+import {Component} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+import {Meta, Title} from '@angular/platform-browser';
+import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
+import {CommunitiesService} from '../openaireLibrary/connect/communities/communities.service';
+import {SubscribeService} from '../openaireLibrary/utils/subscribe/subscribe.service';
+import {CommunityInfo} from '../openaireLibrary/connect/community/communityInfo';
+
+import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
+import {StringUtils} from '../openaireLibrary/utils/string-utils.class';
+
+import {ErrorCodes} from '../openaireLibrary/utils/properties/errorCodes';
+import {ErrorMessagesComponent} from '../openaireLibrary/utils/errorMessages.component';
+import {HelperService} from "../openaireLibrary/utils/helper/helper.service";
+import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
+
+@Component({
+  selector: 'communities',
+  templateUrl: 'communities.component.html',
+})
+
+export class CommunitiesComponent {
+  public piwiksub: any;
+
+  public pageTitle = "OpenAIRE"
+  public researchCommunities = [];
+  public gifs: { "gif": string, "header": string, "text" }[] = [];
+  public pageContents = null;
+  public divContents = null;
+  // Message variables
+  public status: number;
+  public loading: boolean = true;
+  public subscriberErrorMessage: string = "";
+  public errorCodes: ErrorCodes;
+  private errorMessages: ErrorMessagesComponent;
+
+  properties: EnvProperties;
+  public keyword: string = "";
+  public type: string = "all";
+
+  constructor(
+    private route: ActivatedRoute,
+    private _router: Router,
+    private _meta: Meta,
+    private _title: Title,
+    private _piwikService: PiwikService,
+    private _communitiesService: CommunitiesService,
+    private _subscribeService: SubscribeService,
+    private helper: HelperService,
+    private seoService: SEOService) {
+
+    var description = "OpenAIRE - Connect, Community Dashboard, research community";
+    var title = "OpenAIRE - Connect";
+
+    this._meta.updateTag({content: description}, "name='description'");
+    this._meta.updateTag({content: description}, "property='og:description'");
+    this._meta.updateTag({content: title}, "property='og:title'");
+    this._title.setTitle(title);
+
+    this.errorCodes = new ErrorCodes();
+    this.errorMessages = new ErrorMessagesComponent();
+    this.status = this.errorCodes.LOADING;
+  }
+
+  public ngOnInit() {
+    this.route.data
+      .subscribe((data: { envSpecific: EnvProperties }) => {
+        this.properties = data.envSpecific;
+        var url = data.envSpecific.baseLink + this._router.url;
+        this.seoService.createLinkForCanonicalURL(url, false);
+        this._meta.updateTag({content: url}, "property='og:url'");
+        if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
+          this.piwiksub = this._piwikService.trackView(this.properties, "OpenAIRE Connect", this.properties.piwikSiteId).subscribe();
+        }
+        this.getCommunities();
+        this.createGifs();
+        //this.getDivContents();
+        this.getPageContents();
+      });
+  }
+
+  private getPageContents() {
+    this.helper.getPageHelpContents(this._router.url, this.properties, 'connect').subscribe(contents => {
+      this.pageContents = contents;
+    })
+  }
+
+  private getDivContents() {
+    this.helper.getDivHelpContents(this._router.url, this.properties, 'connect').subscribe(contents => {
+      this.divContents = contents;
+    })
+  }
+
+  public getCommunities() {
+    this.loading = true;
+    this.status = this.errorCodes.LOADING;
+    this.subscriberErrorMessage = "";
+
+    this.researchCommunities = [];
+
+    this._communitiesService.getCommunitiesState().subscribe(
+      communitiesResults => {
+        if(!communitiesResults){
+          return;
+        }
+        if(communitiesResults.length == 0) {
+          this.status = this.errorCodes.DONE;
+          return;
+        }
+        this.sort(communitiesResults);
+        communitiesResults.forEach((community, index) => {
+          let showCommunity: boolean = true;
+          if (community['status'] == "hidden" || community['status'] == "manager") {
+            showCommunity = false;
+          }
+          if (showCommunity) {
+            this.researchCommunities.push(community);
+          }
+          this.status = this.errorCodes.DONE;
+        });
+        this.loading = false;
+      },
+      error => {
+        this.status = this.handleError("Error getting communities", error);
+        this.loading = false;
+      }
+    );
+  }
+
+  private createGifs() {
+    this.gifs.push({
+      gif: "assets/connect-assets/home/gifs/deposit.gif",
+      header: "Find a repository to deposit your research outcome",
+      text: "This is OpenAIRE’s key service for research communities, both established and emerging ones. Our service helps you reach out and engage all your researchers to practice open science out-of-the-box."
+    });
+    this.gifs.push({
+      gif: "assets/connect-assets/home/gifs/link.gif",
+      header: "Link your research output with your community, funding, and other research products",
+      text: "This is OpenAIRE’s key service for research communities, both established and emerging ones. Our service helps you reach out and engage all your researchers to practice open science out-of-the-box."
+    });
+    this.gifs.push({
+      gif: "assets/connect-assets/home/gifs/overview.gif",
+      header: "View community's overview at a glance",
+      text: "This is OpenAIRE’s key service for research communities, both established and emerging ones. Our service helps you reach out and engage all your researchers to practice open science out-of-the-box."
+    });
+    this.gifs.push({
+      gif: "assets/connect-assets/home/gifs/results.gif",
+      header: "Search & browse your community's research products. ",
+      text: "This is OpenAIRE’s key service for research communities, both established and emerging ones. Our service helps you reach out and engage all your researchers to practice open science out-of-the-box."
+    });
+    this.gifs.push({
+      gif: "assets/connect-assets/home/gifs/graph-analysis.gif",
+      header: "View statistics for your community's research products.",
+      text: "This is OpenAIRE’s key service for research communities, both established and emerging ones. Our service helps you reach out and engage all your researchers to practice open science out-of-the-box."
+    });
+  }
+
+  private sort(results: CommunityInfo[]) {
+    results.sort((left, right): number => {
+      if (!right.date || left.date > right.date) {
+        return -1;
+      } else if (!left.date || left.date < right.date) {
+        return 1;
+      } else {
+        if (left.title > right.title) {
+          return 1;
+        } else if (left.title < right.title) {
+          return -1;
+        } else {
+          return 0;
+        }
+      }
+    })
+  }
+
+  public quote(param: string): string {
+    return StringUtils.quote(param);
+  }
+
+  public ngOnDestroy() {
+    if (this.piwiksub) {
+      this.piwiksub.unsubscribe();
+    }
+  }
+
+  private handleError(message: string, error): number {
+    var code = "";
+    if (!error.status) {
+      var error = error.json();
+      code = error.code;
+    } else {
+      code = error.status;
+    }
+
+    console.error("Communities (component): " + message, error);
+
+    return this.errorMessages.getErrorCode(code);
+  }
+}
diff --git a/src/app/communities/communities.module.ts b/src/app/communities/communities.module.ts
new file mode 100644
index 0000000..7874508
--- /dev/null
+++ b/src/app/communities/communities.module.ts
@@ -0,0 +1,41 @@
+import {NgModule}                 from '@angular/core';
+import {CommonModule}             from '@angular/common';
+import {FormsModule}              from '@angular/forms';
+import {RouterModule}             from '@angular/router';
+import {ManageModule}             from '../openaireLibrary/utils/manage/manage.module';
+
+import {CommunitiesComponent}     from './communities.component';
+
+import {FreeGuard}                from '../openaireLibrary/login/freeGuard.guard';
+import {PreviousRouteRecorder}    from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
+
+import {PiwikService}             from '../openaireLibrary/utils/piwik/piwik.service';
+import {ErrorMessagesModule}      from '../openaireLibrary/utils/errorMessages.module';
+
+import {SearchFormModule}         from '../openaireLibrary/searchPages/searchUtils/searchForm.module';
+import {BrowseCommunityModule}    from './browseCommunity/browse-community.module';
+import {HelperModule} from "../openaireLibrary/utils/helper/helper.module";
+import {GifSliderModule} from "../openaireLibrary/utils/gif-slider/gif-slider.module";
+import {OtherPortalsModule} from "../openaireLibrary/sharedComponents/other-portals/other-portals.module";
+import {Schema2jsonldModule} from "../openaireLibrary/sharedComponents/schema2jsonld/schema2jsonld.module";
+import {SEOServiceModule} from "../openaireLibrary/sharedComponents/SEO/SEOService.module";
+
+@NgModule({
+  imports: [
+    CommonModule, FormsModule, RouterModule,
+    ManageModule, ErrorMessagesModule,
+    SearchFormModule, BrowseCommunityModule, GifSliderModule, OtherPortalsModule,
+    HelperModule, Schema2jsonldModule, SEOServiceModule
+  ],
+  declarations: [
+    CommunitiesComponent
+  ],
+  providers:[
+    FreeGuard, PreviousRouteRecorder,
+    PiwikService
+  ],
+  exports: [
+    CommunitiesComponent
+  ]
+})
+export class CommunitiesModule { }
diff --git a/src/app/initiatives/community/community-routing.module.ts b/src/app/community/community-routing.module.ts
similarity index 68%
rename from src/app/initiatives/community/community-routing.module.ts
rename to src/app/community/community-routing.module.ts
index 676d2f5..a3f8003 100644
--- a/src/app/initiatives/community/community-routing.module.ts
+++ b/src/app/community/community-routing.module.ts
@@ -2,8 +2,8 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 import{CommunityComponent} from './community.component';
-import {FreeGuard} from '../../openaireLibrary/login/freeGuard.guard';
-import {PreviousRouteRecorder} from '../../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
+import {FreeGuard} from '../openaireLibrary/login/freeGuard.guard';
+import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
 
 @NgModule({
   imports: [
diff --git a/src/app/community/community.component.html b/src/app/community/community.component.html
new file mode 100644
index 0000000..c3ca521
--- /dev/null
+++ b/src/app/community/community.component.html
@@ -0,0 +1,559 @@
+<schema2jsonld *ngIf="community" [URL]="url"
+               [logoURL]="community.logoUrl" type="home"
+               [name]="community.title">
+</schema2jsonld>
+<div id="stickhere">
+</div>
+
+<div *ngIf="communityInfo" class="uk-section uk-padding-remove-top">
+  <div class="communityPanelBackground uk-margin-top uk-padding-small">
+    <div class="uk-container uk-margin-top uk-margin-bottom "
+         *ngIf="communityId != null && communityId != '' && community != null">
+      <div class="uk-grid">
+        <div class="uk-width-2-5@m uk-width-1-1@s uk-first-column uk-margin-top">
+          <div *ngIf="community.title != null" class="uk-text-bold uk-h5 uk-margin-remove">
+            {{community.title}}
+          </div>
+          <div *ngIf="community.shortTitle != null"
+               class=" uk-h5 uk-margin-remove">
+            {{community.shortTitle}}
+          </div>
+          <div *ngIf="community.description != null" class="uk-margin ">
+            <div *ngIf="!showAllDescription" class="">
+              {{community.description.substring(0, 300)}}{{community.description.length > 300 ? '...' : ''}}</div>
+            <div *ngIf="showAllDescription" class=""> {{community.description}}</div>
+            <div *ngIf="!showAllDescription && community.description.length > 300 "
+                 class="uk-animation-fade uk-text-center uk-text-bold">
+              <a (click)="showAllDescription = !showAllDescription;">View more
+              </a>
+            </div>
+            <div *ngIf="showAllDescription"
+                 class="uk-text-center uk-text-bold">
+              <a (click)="showAllDescription = !showAllDescription;">
+                View less
+              </a>
+            </div>
+          </div>
+        </div>
+        <div class="uk-width-3-5@m uk-width-1-1@s">
+          <div>
+            <div class="uk-margin-bottom uk-text-right">
+              <subscribe *ngIf="communityId != null && communityId != ''" [communityId]="communityId"
+                         class=""></subscribe>
+              {{" "}}
+              <invite *ngIf="showInvite()" [longView]=false [buttonSizeSmall]=false></invite>
+            </div>
+
+            <!--              <div class=" uk-text-large uk-margin-bottom">Statistics</div>-->
+            <div *ngIf="communityId != null && communityId != ''"
+                 class="uk-child-width-1-6@l uk-child-width-1-6@m uk-child-width-1-3@s uk-text-center uk-grid uk-margin-remove"
+                 uk-scrollspy="cls: uk-animation-fade; target: > div > .uk-card; delay: 450; repeat: false">
+
+              <div
+                *ngIf="publicationTotal != null && publicationTotal > 0 && isEntityEnabled('publication') && isRouteEnabled(searchLinkToPublications)"
+                class="uk-padding-remove-left">
+                <div
+                  class="uk-card uk-card-default uk-card-body uk-padding-remove uk-margin-small-right uk-height-1-1 uk-margin-bottom  ">
+                  <div class="uk-margin-top uk-margin-bottom">
+                    <a class="uk-margin-auto-vertical uk-margin-auto" [queryParams]=params
+                       routerLinkActive="router-link-active" [routerLink]="searchLinkToPublications"><span
+                      class="uk-text-bold uk-h5">{{publicationTotal|number}}</span>
+                      <p class="uk-text-small uk-margin-remove">publications</p></a>
+                  </div>
+                </div>
+              </div>
+
+              <div
+                *ngIf="researchDataTotal != null && researchDataTotal > 0 && isEntityEnabled('dataset') && isRouteEnabled(searchLinkToDatasets)"
+                class="uk-padding-remove-left">
+                <div
+                  class="uk-card uk-card-default uk-card-body uk-padding-remove uk-margin-small-right uk-height-1-1 uk-margin-bottom">
+                  <div class="uk-margin-top uk-margin-bottom">
+                    <a class="uk-margin-auto-vertical uk-margin-auto" [queryParams]=params
+                       routerLinkActive="router-link-active" [routerLink]="searchLinkToDatasets"><span
+                      class="uk-text-bold uk-h5">{{researchDataTotal|number}}</span>
+                      <p class="uk-text-small uk-margin-remove">research data</p></a>
+                  </div>
+                </div>
+              </div>
+              <div
+                *ngIf="softwareTotal != null && softwareTotal > 0 && isEntityEnabled('software') && isRouteEnabled(searchLinkToSoftware)"
+                class="uk-padding-remove-left">
+                <div
+                  class="uk-card uk-card-default uk-card-body uk-padding-remove uk-margin-small-right uk-height-1-1 uk-margin-bottom  ">
+                  <div class="uk-margin-top uk-margin-bottom">
+                    <a class="uk-margin-auto-vertical uk-margin-auto" [queryParams]=params
+                       routerLinkActive="router-link-active" [routerLink]="searchLinkToSoftware"><span
+                      class="uk-text-bold uk-h5">{{softwareTotal|number}}</span>
+                      <p class="uk-text-small uk-margin-remove">software</p></a>
+                  </div>
+                </div>
+              </div>
+
+              <div
+                *ngIf="orpTotal != null  && orpTotal > 0 && isEntityEnabled('orp') && isRouteEnabled(searchLinkToOrps)"
+                class="uk-padding-remove-left">
+                <div
+                  class="uk-card uk-card-default uk-card-body uk-padding-remove uk-margin-small-right uk-height-1-1 uk-margin-bottom  ">
+                  <div class="uk-margin-top uk-margin-bottom">
+                    <a class="uk-margin-auto-vertical uk-margin-auto" [queryParams]=params
+                       routerLinkActive="router-link-active" [routerLink]="searchLinkToOrps"><span
+                      class="uk-text-bold uk-h5">{{orpTotal|number}}</span>
+                      <p class="uk-text-small uk-margin-remove">other products</p></a>
+                  </div>
+                </div>
+              </div>
+
+
+              <div
+                *ngIf="projectTotal != null  && projectTotal > 0 && isEntityEnabled('project') && isRouteEnabled(searchLinkToProjects)"
+                class="uk-padding-remove-left">
+                <div
+                  class="uk-card uk-card-default uk-card-body uk-padding-remove uk-margin-small-right uk-height-1-1 uk-margin-bottom  ">
+                  <div class="uk-margin-top uk-margin-bottom">
+                    <a class="uk-margin-auto-vertical uk-margin-auto" [queryParams]=params
+                       routerLinkActive="router-link-active" [routerLink]="searchLinkToProjects"><span
+                      class="uk-text-bold uk-h5">{{projectTotal|number}}</span>
+                      <p class="uk-text-small uk-margin-remove">projects</p></a>
+                  </div>
+                </div>
+              </div>
+
+              <div
+                *ngIf="contentProviderTotal != null  && contentProviderTotal > 0 && isEntityEnabled('datasource') && isRouteEnabled(searchLinkToDataProviders)"
+                class="uk-padding-remove-left">
+                <div
+                  class="uk-card uk-card-default uk-card-body uk-padding-remove uk-margin-small-right uk-height-1-1 uk-margin-bottom  ">
+                  <div class="uk-margin-top uk-margin-bottom">
+                    <a class="uk-margin-auto-vertical uk-margin-auto" [queryParams]=params
+                       routerLinkActive="router-link-active" [routerLink]="searchLinkToDataProviders"><span
+                      class="uk-text-bold uk-h5">{{contentProviderTotal|number}}</span>
+                      <p class="uk-text-small uk-margin-remove">content providers</p></a>
+                  </div>
+                </div>
+              </div>
+
+            </div>
+            <div *ngIf="community.subjects != null && community.subjects.length > 0"
+                 class="uk-margin-small-bottom uk-margin-top uk-text-bold uk-h5">Subjects
+            </div>
+            <div *ngIf="community.subjects != null" class=" ">
+                <span *ngFor="let subject of community.subjects.slice(0,4) let i=index">
+                    <span *ngIf="subject != ''" class="uk-label uk-margin-small-bottom">
+                      <a [queryParams]="{subject:createParams(subject), sb: 'and'}"
+                         routerLinkActive="router-link-active" [routerLink]="searchLinkToAdvancedPublications">
+                        {{subject}}
+                        </a>
+                    </span>{{" "}}
+                </span>
+              <span *ngIf="showAllSubjects">
+                    <span *ngFor="let subject of community.subjects.slice(4) let i=index">
+                        <span *ngIf="subject != ''" class="uk-label uk-margin-small-bottom">
+                          <a [queryParams]="{subject:createParams(subject), sb: 'and'}"
+                             routerLinkActive="router-link-active" [routerLink]="searchLinkToAdvancedPublications">
+                            {{subject}}
+                            </a>
+                        </span> {{" "}}
+                    </span>
+                </span>
+              <br>
+              <div *ngIf="!showAllSubjects && community.subjects.length > 4 "
+                    class="uk-animation-fade uk-text-center uk-text-bold">
+                    <a (click)="showAllSubjects = !showAllSubjects;">
+                      View more
+                    </a>
+              </div>
+              <div *ngIf="showAllSubjects"
+                    class="uk-text-center uk-text-bold">
+                    <a (click)="showAllSubjects = !showAllSubjects;">
+                      View less
+                    </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</div>
+
+<div class="uk-section tm-middle uk-container uk-margin-small-top uk-padding-remove-top" id="tm-main">
+  <div class="uk-container  uk-margin-bottom uk-grid">
+    <div class="uk-width-expand uk-padding-remove">
+      <article *ngIf="communityInfo" class="uk-article ">
+        <div *ngIf="communityId != null && communityId != '' && community != null">
+
+
+          <!--      <div *ngIf="isRouteEnabled('/search/find')" class="uk-margin-top">
+                  <div class="uk-text-bold uk-h5">Search research results</div>
+                  <search-form [setFormCentered]=false [placeholderText]="getSearchPlaceHolder()" link="/search/find"></search-form>
+                </div>-->
+          <ng-template #stats let-entity="entity" let-entityName="entityName" let-statisticsSum="statisticsSum"
+                       let-statisticsDisplay="statisticsDisplay" let-allowedEntities="allowedEntities"
+                       let-allowedCharts="allowedCharts" let-chartsInfoMap="chartsInfoMap"
+                       let-showChartTitle="showChartTitle"
+                       let-showIn="showIn">
+            <div *ngIf=" showIn == 'showInMonitor' && allowedCharts && allowedCharts[entity].length == 0  &&
+            !statisticsDisplay.entities[entity].numbers.map['total'][showIn] && !statisticsDisplay.entities[entity].numbers.map['project'][showIn] &&
+             !statisticsDisplay.entities[entity].numbers.map['open'][showIn] && !statisticsDisplay.entities[entity].numbers.map['closed'][showIn] &&
+            !statisticsDisplay.entities[entity].numbers.map['embargo'][showIn] && !statisticsDisplay.entities[entity].numbers.map['restricted'][showIn]"
+                 class="uk-alert uk-alert-primary">
+              No graphs available
+            </div>
+            <div *ngIf="statisticsSum && statisticsDisplay &&
+                        statisticsSum[entity].total>0"
+                 class="uk-grid uk-child-width-1-3@l uk-child-width-1-2@m uk-child-width-1-2@s">
+              <div *ngIf="statisticsDisplay.entities[entity].numbers.map['total'][showIn]" class="uk-padding-remove">
+                <div class="uk-card portal-card uk-text-right  uk-margin-left  uk-margin-bottom uk-padding-small">
+                  <div
+                    class="uk-text-large">{{statisticsSum[entity].total|number}}</div>
+                  <div>Total
+                    {{entityName}}</div>
+                </div>
+              </div>
+              <div
+                *ngIf="statisticsDisplay.entities[entity].numbers.map['project'][showIn]" class="uk-padding-remove">
+                <div class="uk-card portal-card uk-text-right  uk-margin-left  uk-margin-bottom uk-padding-small">
+                  <div
+                    class="uk-text-large">{{statisticsSum[entity].projects|number}} </div>
+                  <div>Total projects linked to {{entityName}}</div>
+                </div>
+              </div>
+              <div
+                *ngIf="statisticsDisplay.entities[entity].numbers.map['open'][showIn]" class="uk-padding-remove">
+                <div class="uk-card portal-card uk-text-right  uk-margin-left  uk-margin-bottom uk-padding-small">
+                  <div
+                    class="uk-text-large">{{statisticsSum[entity].open_access|number}} </div>
+                  <div>Open access
+                    {{entityName}}</div>
+                </div>
+              </div>
+              <div *ngIf="statisticsDisplay.entities[entity].numbers.map['closed'][showIn]" class="uk-padding-remove">
+                <div class="uk-card portal-card uk-text-right  uk-margin-left  uk-margin-bottom uk-padding-small">
+                  <div
+                    class="uk-text-large">{{statisticsSum[entity].closed_access|number}} </div>
+                  <div>Closed access
+                    {{entityName}}</div>
+                </div>
+              </div>
+              <div
+                *ngIf="statisticsDisplay.entities[entity].numbers.map['embargo'][showIn]" class="uk-padding-remove">
+                <div class="uk-card portal-card uk-text-right  uk-margin-left  uk-margin-bottom uk-padding-small">
+                  <div
+                    class="uk-text-large">{{statisticsSum[entity].embargo|number}} </div>
+                  <div>Embargoed
+                    {{entityName}}</div>
+                </div>
+              </div>
+              <div
+                *ngIf="statisticsDisplay.entities[entity].numbers.map['restricted'][showIn]"
+                class="uk-padding-remove">
+                <div class="uk-card portal-card uk-text-right  uk-margin-left  uk-margin-bottom uk-padding-small">
+                  <div
+                    class="uk-text-large">{{statisticsSum[entity].restricted|number}} </div>
+                  <div>Restricted
+                    {{entityName}}</div>
+                </div>
+              </div>
+            </div>
+            <div *ngIf="  allowedEntities &&
+              statisticsSum && allowedCharts && statisticsSum[entity] &&
+              allowedCharts[entity] && statisticsSum[entity].total>0 &&
+              allowedCharts[entity].length>0">
+              <div *ngIf="showIn == 'showInDashboard'">
+                <div uk-slider>
+
+                  <div class="uk-position-relative">
+
+                    <div class="uk-slider-container">
+                      <ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-1@s uk-child-width-1-2@m">
+                        <li *ngFor="let chart of allowedCharts[entity]">
+
+                          <div class=" iframeContainer uk-height-medium uk-margin-top">
+                            <div *ngIf="showChartTitle[chart]" class="  uk-h5 ">
+                              {{chartsInfoMap[chart].title}}</div>
+                            <iframe [src]=chartsInfoMap[chart].url scrolling="no"></iframe>
+                          </div>
+                        </li>
+                      </ul>
+                    </div>
+
+                    <div class="uk-hidden@s uk-light">
+                      <a class="uk-position-center-left  " href="#" uk-slidenav-previous uk-slider-item="previous"></a>
+                      <a class="uk-position-center-right  " href="#" uk-slidenav-next uk-slider-item="next"></a>
+                    </div>
+
+                    <div class="uk-visible@s">
+                      <a class="uk-position-center-left-out  " href="#" uk-slidenav-previous
+                         uk-slider-item="previous"></a>
+                      <a class="uk-position-center-right-out  " href="#" uk-slidenav-next uk-slider-item="next"></a>
+                    </div>
+
+                  </div>
+
+                </div>
+
+
+                <div *ngIf="  allowedEntities &&
+                  statisticsSum && allowedCharts && statisticsSum[entity] &&
+                  allowedCharts[entity] && statisticsSum[entity].total>0 &&
+                  allowedCharts[entity].length>0">
+                  <div class="uk-margin-top portal-hr"></div>
+                </div>
+              </div>
+              <div *ngIf="showIn == 'showInMonitor'" class="uk-grid uk-child-width-1-2@l uk-child-width-1-1@m  ">
+                <div *ngFor="let chart of allowedCharts[entity]" class="uk-clearfix uk-margin-bottom">
+
+                  <div class=" iframeContainer uk-height-large uk-margin-top">
+                    <div *ngIf="showChartTitle[chart]" class="  uk-h5 ">
+                      {{chartsInfoMap[chart].title}}</div>
+                    <iframe [src]=chartsInfoMap[chart].url scrolling="no" class=""></iframe>
+                  </div>
+
+                </div>
+
+              </div>
+            </div>
+
+          </ng-template>
+          <div class="uk-text-center">
+            <!-- <button [class]="'uk-button  '+((show == 'overview')?'uk-disabled ':' uk-button-default  ')"
+                     (click)="show='overview'">Overview
+             </button>
+             {{" "}}
+             <button [class]="'uk-button '+((show != 'overview')?'uk-disabled ':' uk-button-default ')"
+                     (click)="show='analysis';">Graph Analysis
+             </button>-->
+            <mat-form-field>
+              <div class="uk-margin-small-bottom">Select view</div>
+<!--              <mat-label>Select view</mat-label>-->
+              <mat-select [(value)]="show">
+                <mat-option value="overview">Overview</mat-option>
+                <mat-option value="analysis">Graph Analysis</mat-option>
+              </mat-select>
+            </mat-form-field>
+            <!--<select [(ngModel)]="show" class="uk-select uk-text-bold uk-width-small">
+              <option value="overview">Overview</option>
+              <option value="analysis">Graph Analysis</option>
+            </select>-->
+            <!--            <select   [(ngModel)]="sortBy"      class="uk-select  uk-margin-small-bottom uk-width-1-2 uk-padding-remove"  name="select_order"   >-->
+            <!--              <option  value="num"  >Sort by results number</option>-->
+            <!--              <option  value="name"  >Sort by name</option>-->
+            <!--            </select>-->
+          </div>
+
+          <div class="uk-margin-top  customTabs">
+
+
+            <ul class="uk-margin-remove uk-flex-center"
+                data-uk-tab="{connect: '#resultTabs'">
+              <li *ngIf="isEntityEnabled('publication')" (click)="searchResearchResults('publication', publicationTotal, publicationResults)" class="uk-active"><a
+                href="#">publications</a></li>
+              <li *ngIf="isEntityEnabled('dataset')" (click)="searchResearchResults('dataset', researchDataTotal, researchDataResults)"><a href="#">research data</a></li>
+              <li *ngIf="isEntityEnabled('software')" (click)="searchResearchResults('software', softwareTotal, softwareResults)"><a href="#">software</a></li>
+              <li *ngIf="isEntityEnabled('orp')" (click)="searchResearchResults('other', orpTotal, orpResults)"><a href="#">other research products</a></li>
+            </ul>
+
+            <ul id="resultTabs" class=" communityBorder customTabsContent uk-switcher " style="min-height:450px;">
+              <li *ngIf="isEntityEnabled('publication')" class="uk-padding">
+                <div *ngIf="show=='overview'">
+                  <div *ngIf="statistics !=null  && activeTab == 'publication'">
+                    <ng-container *ngTemplateOutlet="stats; context: { entity: 'publication', entityName:
+                            'publications' , statisticsSum:statistics.statisticsSum, statisticsDisplay:statistics.statisticsDisplay,
+                            allowedEntities: statistics.allowedEntitiesMode['showInDashboard'],
+                            allowedCharts:statistics.allowedChartsMode['showInDashboard'], showChartTitle:  statistics.chartTitlesMode['showInDashboard'],
+
+                            chartsInfoMap:statistics.chartsInfoMap, showIn:'showInDashboard'}"></ng-container>
+                  </div>
+                  <results-comp [results]=publicationResults [total]=publicationTotal resultType="publication"
+                                [community]=community [params]=params [showLoading]="showLoading"
+                                [properties]="properties"
+                                class=""></results-comp>
+                </div>
+                <div *ngIf="show!='overview' && activeTab == 'publication'">
+                  <ng-container *ngTemplateOutlet="stats; context: { entity: 'publication', entityName:
+                            'publications' , statisticsSum:statistics.statisticsSum, statisticsDisplay:statistics.statisticsDisplay,
+                            allowedEntities: statistics.allowedEntitiesMode['showInMonitor'],
+                            allowedCharts:statistics.allowedChartsMode['showInMonitor'], showChartTitle:  statistics.chartTitlesMode['showInMonitor'],
+                            chartsInfoMap:statistics.chartsInfoMap, showIn:'showInMonitor'}"></ng-container>
+
+                </div>
+
+
+              </li>
+              <li *ngIf="isEntityEnabled('dataset')" class="uk-padding">
+                <div *ngIf="show=='overview'">
+                  <div *ngIf="statistics !=null  && activeTab == 'dataset'">
+                    <ng-container *ngTemplateOutlet="stats; context: { entity: 'dataset', entityName:
+                            'research data' , statisticsSum:statistics.statisticsSum,
+                            statisticsDisplay:statistics.statisticsDisplay,
+                            allowedEntities: statistics.allowedEntitiesMode['showInDashboard'],
+                            allowedCharts:statistics.allowedChartsMode['showInDashboard'], showChartTitle:  statistics.chartTitlesMode['showInDashboard'],
+
+                            chartsInfoMap:statistics.chartsInfoMap, showIn:'showInDashboard'}"></ng-container>
+                  </div>
+                  <results-comp [results]=researchDataResults [total]=researchDataTotal resultType="dataset"
+                                [community]=community [params]=params [showLoading]="showLoading"
+                                [properties]="properties"
+                                class=""></results-comp>
+                </div>
+                <div *ngIf="show!='overview' && activeTab == 'dataset'">
+                  <ng-container *ngTemplateOutlet="stats; context: { entity: 'dataset', entityName:
+                            'research data' , statisticsSum:statistics.statisticsSum, statisticsDisplay:statistics.statisticsDisplay,
+                            allowedEntities: statistics.allowedEntitiesMode['showInMonitor'],
+                            allowedCharts:statistics.allowedChartsMode['showInMonitor'], showChartTitle:  statistics.chartTitlesMode['showInMonitor'],
+                            chartsInfoMap:statistics.chartsInfoMap, showIn:'showInMonitor'}"></ng-container>
+
+                </div>
+
+
+              </li>
+              <li *ngIf="isEntityEnabled('software')" class="uk-padding">
+                <div *ngIf="show=='overview'">
+                  <div *ngIf="statistics !=null  && activeTab == 'software'">
+                    <ng-container *ngTemplateOutlet="stats; context: { entity: 'software', entityName:
+                            'software' , statisticsSum:statistics.statisticsSum, statisticsDisplay:statistics.statisticsDisplay,
+                            allowedEntities: statistics.allowedEntitiesMode['showInDashboard'],
+                            allowedCharts:statistics.allowedChartsMode['showInDashboard'], showChartTitle:  statistics.chartTitlesMode['showInDashboard'],
+
+                            chartsInfoMap:statistics.chartsInfoMap, showIn:'showInDashboard'}"></ng-container>
+                  </div>
+                  <results-comp [results]=softwareResults [total]=softwareTotal resultType="software"
+                                [community]=community [params]=params [showLoading]="showLoading"
+                                [properties]="properties"
+                                class=""></results-comp>
+                </div>
+                <div *ngIf="show!='overview' && activeTab == 'software'">
+                  <ng-container *ngTemplateOutlet="stats; context: { entity: 'software', entityName:
+                            'software' , statisticsSum:statistics.statisticsSum, statisticsDisplay:statistics.statisticsDisplay,
+                            allowedEntities: statistics.allowedEntitiesMode['showInMonitor'],
+                            allowedCharts:statistics.allowedChartsMode['showInMonitor'], showChartTitle:  statistics.chartTitlesMode['showInMonitor'],
+                            chartsInfoMap:statistics.chartsInfoMap, showIn:'showInMonitor'}"></ng-container>
+
+                </div>
+
+
+              </li>
+              <li *ngIf="isEntityEnabled('orp')" class="uk-padding">
+                <div *ngIf="show=='overview'">
+                  <div *ngIf="statistics !=null  && activeTab == 'orp'">
+                    <ng-container *ngTemplateOutlet="stats; context: { entity: 'orp', entityName:
+                            'other products' , statisticsSum:statistics.statisticsSum,
+                            statisticsDisplay:statistics.statisticsDisplay,
+                            allowedEntities: statistics.allowedEntitiesMode['showInDashboard'],
+                            allowedCharts:statistics.allowedChartsMode['showInDashboard'], showChartTitle:  statistics.chartTitlesMode['showInDashboard'],
+
+                            chartsInfoMap:statistics.chartsInfoMap, showIn:'showInDashboard'}"></ng-container>
+                  </div>
+                  <results-comp [results]=orpResults [total]=orpTotal resultType="other"
+                                [community]=community [params]=params [showLoading]="showLoading"
+                                [properties]="properties"
+                                class=""></results-comp>
+                </div>
+                <div *ngIf="show!='overview' && activeTab == 'orp'">
+                  <ng-container *ngTemplateOutlet="stats; context: { entity: 'orp', entityName:
+                            'other products' , statisticsSum:statistics.statisticsSum, statisticsDisplay:statistics.statisticsDisplay,
+                            allowedEntities: statistics.allowedEntitiesMode['showInMonitor'],
+                            allowedCharts:statistics.allowedChartsMode['showInMonitor'], showChartTitle:  statistics.chartTitlesMode['showInMonitor'],
+                            chartsInfoMap:statistics.chartsInfoMap, showIn:'showInMonitor'}"></ng-container>
+
+                </div>
+
+
+              </li>
+            </ul>
+          </div>
+          <!--            <hr>-->
+          <!--<div *ngIf="statistics && statistics.allowedEntities &&  countOtherGraphs()>0">
+            <div class="uk-text-bold uk-h5">
+              Other Graphs
+            </div>
+            <div *ngIf="statistics && statistics.allowedEntities" class="uk-margin-top uk-grid">
+              <ng-container *ngFor="let entity of statistics.allowedEntities">
+                <ng-container *ngIf="statistics.statisticsSum[entity].total>0 && statistics.allowedCharts[entity].length>0 && activeTab!=entity">
+
+                  <ng-container *ngIf="statistics.allowedCharts[entity] " >
+                    <div *ngFor="let chart of statistics.allowedCharts[entity]" class="uk-width-1-2@m uk-first-column">
+                      <div class="iframeContainer">
+                        <iframe [src]=statistics.chartsUrlMap[chart]  scrolling="no"></iframe>
+                      </div>
+                    </div>
+                  </ng-container>
+                </ng-container>
+              </ng-container>
+            </div>
+          </div>-->
+
+
+        </div>
+      </article>
+    </div>
+
+  </div>
+
+</div>
+<statistics-for-dashboard [currentMode]="'showInDashboard'"></statistics-for-dashboard>
+
+
+<div class="communityPanelBackground uk-margin-top uk-padding-small">
+  <div class="uk-container uk-margin-top uk-margin-bottom "
+       *ngIf="communityId != null && communityId != '' && community != null && communityInfo!=null">
+    <div class="uk-grid">
+      <div class="uk-width-2-5@m uk-width-1-1@s uk-first-column uk-margin-top">
+        <div *ngIf="community.date != null"><span
+          class="lowOpacityColor">Created</span> {{community.date | date:'dd-MM-yyyy'}}</div>
+        <subscribe *ngIf="communityId != null" [communityId]="communityId" showNumbers=true class=""></subscribe>
+        <div *ngIf=" isRouteEnabled(shareInZenodoPage)" class="">
+          <span class="lowOpacityColor">Related Zenodo communities </span>
+          <a [queryParams]=params routerLinkActive="router-link-active" [routerLink]="shareInZenodoPage">
+             <span>
+                    {{zenodoCommunityIdS.length + ((masterZenodoCommunity) ? 1 : 0)}}</span>
+
+          </a>
+          {{" "}}
+          <span class="uk-icon"
+                uk-tooltip="title:<div class='uk-margin'>Zenodo is a catch-all repository for OpenAIRE<hr>A zenodo community is created and curated by Zenodo users</div>">
+                    <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="question"
+                         ratio="1"><circle fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9"></circle><circle
+                      cx="10.44" cy="14.42" r="1.05"></circle><path fill="none" stroke="#000" stroke-width="1.2"
+                                                                    d="M8.17,7.79 C8.17,4.75 12.72,4.73 12.72,7.72 C12.72,8.67 11.81,9.15 11.23,9.75 C10.75,10.24 10.51,10.73 10.45,11.4 C10.44,11.53 10.43,11.64 10.43,11.75"></path></svg>
+                  </span>
+        </div>
+      </div>
+      <div *ngIf="isRouteEnabled('/curators')" class="uk-width-3-5@m uk-width-1-1@s uk-margin-top">
+        <curators [longView]="false" [managers]="community.managers" [communityId]="communityId"></curators>
+      </div>
+
+    </div>
+  </div>
+</div>
+<div class="uk-section tm-middle uk-container uk-margin-top uk-padding-remove-top" id="" *ngIf="communityId != null
+   && communityId != '' && community != null && communityInfo != null">
+  <ng-container *ngIf=" isRouteEnabled('/organizations')">
+    <div class="uk-container  uk-margin-bottom uk-grid">
+      <div class="uk-width-expand uk-padding-remove">
+        <affiliations [longView]="false" [getAffiliationsFromAPI]="true" [communityFirstPage]="true"></affiliations>
+      </div>
+    </div>
+  </ng-container>
+</div>
+
+<div *ngIf="(communityId == null || communityId == '' ) && !communityInfo"
+     class="uk-section tm-middle uk-container uk-margin-large-top  ">
+  <div class="uk-container  uk-margin-bottom uk-grid">
+    <div class="uk-width-expand uk-padding-remove">
+      <article class="uk-article ">
+        <div
+          class="uk-child-width-1-6@l uk-child-width-1-6@m uk-child-width-1-3@s uk-text-center uk-alert uk-alert-primary">
+          No community chosen
+        </div>
+        <div *ngIf="communityId != null && communityId != '' && community != null">
+
+        </div>
+      </article>
+    </div>
+
+  </div>
+
+</div>
diff --git a/src/app/community/community.component.ts b/src/app/community/community.component.ts
new file mode 100644
index 0000000..19a062f
--- /dev/null
+++ b/src/app/community/community.component.ts
@@ -0,0 +1,367 @@
+import {Component, ElementRef, Input, ViewChild} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+import {Location} from '@angular/common';
+import {Meta, Title} from '@angular/platform-browser';
+import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
+
+import {CommunityService} from "../openaireLibrary/connect/community/community.service";
+import {ConfigurationService} from '../openaireLibrary/utils/configuration/configuration.service';
+import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
+import {SearchZenodoCommunitiesService} from '../openaireLibrary/connect/zenodoCommunities/searchZenodoCommunities.service';
+import {ZenodoCommunitiesService} from '../openaireLibrary/connect/zenodoCommunities/zenodo-communities.service';
+import {Session, User} from '../openaireLibrary/login/utils/helper.class';
+import {StatisticsForDashboardComponent} from '../statistics/statistics.component';
+import {StringUtils} from '../openaireLibrary/utils/string-utils.class';
+
+import {PiwikHelper} from '../utils/piwikHelper';
+import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
+import {SearchCommunityDataprovidersService} from "../openaireLibrary/connect/contentProviders/searchDataproviders.service";
+import {SearchCommunityProjectsService} from "../openaireLibrary/connect/projects/searchProjects.service";
+import {SearchResearchResultsService} from "../openaireLibrary/services/searchResearchResults.service";
+import {RouterHelper} from "../openaireLibrary/utils/routerHelper.class";
+import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
+import {UserManagementService} from "../openaireLibrary/services/user-management.service";
+
+@Component({
+  selector: 'community',
+  templateUrl: 'community.component.html',
+})
+
+export class CommunityComponent {
+  public url: string = null;
+
+  public sub: any;
+  public piwiksub: any;
+  public subfunders: any;
+
+  public publicationTotal = null;
+  public researchDataTotal = null;
+  public softwareTotal = null;
+  public orpTotal = null;
+  public projectTotal = null;
+  public contentProviderTotal = null;
+  public organizationTotal = null;
+
+  params: any = {};
+  properties: EnvProperties;
+
+  public publicationResults = null;
+  public researchDataResults = null;
+  public softwareResults = null;
+  public orpResults = null;
+
+  @Input() communityId = null;
+  public community = null;
+
+  public communityInfo = null;
+
+  public showLoading: boolean = true;
+  masterZenodoCommunity = null;
+  zenodoCommunityIdS = [];
+  showAllSubjects = false;
+  showAllDescription = false;
+  // TODO Unsubscribe
+  public subPublications;
+  public subResearchData;
+  public subSoftware;
+  public subOrps;
+  @ViewChild(StatisticsForDashboardComponent) statistics: StatisticsForDashboardComponent = null;
+  public activeTab = "publication";
+  public show: string = 'overview';
+
+  searchLinkToPublications: string = null;
+  searchLinkToDatasets: string = null;
+  searchLinkToSoftware: string = null;
+  searchLinkToOrps: string = null;
+  searchLinkToProjects: string = null;
+  searchLinkToDataProviders: string = null;
+  searchLinkToAdvancedPublications: string = null;
+  shareInZenodoPage: string = null;
+  public routerHelper:RouterHelper = new RouterHelper();
+  private user: User;
+  private loginCheck: boolean = false;
+
+  constructor(
+    private element: ElementRef,
+    private route: ActivatedRoute,
+    private _router: Router,
+    private location: Location,
+    private _meta: Meta,
+    private _title: Title,
+    private _piwikService: PiwikService,
+    private config: ConfigurationService,
+    private _communityService: CommunityService,
+    private _searchCommunityDataprovidersService:SearchCommunityDataprovidersService,
+    private _searchCommunityProjectsService: SearchCommunityProjectsService,
+    private _searchResearchResultsService: SearchResearchResultsService,
+    private _searchZenodoCommunitiesService: SearchZenodoCommunitiesService,
+    private _ΖenodoCommunitieService: ZenodoCommunitiesService,
+    private seoService: SEOService,
+    private userManagementService: UserManagementService) {
+
+    var description = "OpenAIRE - Connect, Community Dashboard, research community";
+    var title = "OpenAIRE - Connect";
+    this._meta.updateTag({content: description}, "name='description'");
+    this._meta.updateTag({content: description}, "property='og:description'");
+    this._meta.updateTag({content: title}, "property='og:title'");
+    this._title.setTitle(title);
+
+  }
+
+  public ngOnInit() {
+    this.route.data
+      .subscribe((data: { envSpecific: EnvProperties }) => {
+        this.properties = data.envSpecific;
+        this.searchLinkToPublications = this.properties.searchLinkToPublications;
+        this.searchLinkToDatasets = this.properties.searchLinkToDatasets;
+        this.searchLinkToSoftware = this.properties.searchLinkToSoftware;
+        this.searchLinkToOrps = this.properties.searchLinkToOrps;
+        this.searchLinkToProjects = this.properties.searchLinkToProjects;
+        this.searchLinkToDataProviders = this.properties.searchLinkToDataProviders;
+        this.searchLinkToAdvancedPublications = this.properties.searchLinkToAdvancedPublications;
+        this.shareInZenodoPage = this.properties.shareInZenodoPage;
+        this.url = data.envSpecific.baseLink + this._router.url;
+        this.seoService.createLinkForCanonicalURL(this.url, false);
+        this._meta.updateTag({content: this.url}, "property='og:url'");
+        this.userManagementService.getUserInfo(this.properties.userInfoUrl).subscribe( user => {
+          this.user = user;
+          this.loginCheck = true;
+        })
+        if (this.communityId != null && this.communityId != '') {
+          this._communityService.getCommunity(this.properties, this.properties.communityAPI + this.communityId).subscribe(
+            community => {
+              if (typeof document !== 'undefined') {
+                HelperFunctions.scroll();
+              }
+              this.community = community;
+              if (this.properties.environment == "development") {
+                this.params = {communityId: community.communityId};
+              }
+              this._meta.updateTag({content: community.description}, "name='description'");
+              this._meta.updateTag({content: community.description}, "property='og:description'");
+              this._meta.updateTag({content: community.title}, "property='og:title'");
+              this._title.setTitle(community.title);
+              if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
+                this.piwiksub = this._piwikService.trackView(this.properties, community.title, PiwikHelper.getSiteId(this.communityId,this.properties.environment)).subscribe();
+              }
+              if (this.community.zenodoCommunity) {
+                this._ΖenodoCommunitieService.getZenodoCommunityById(this.properties, this.properties.zenodoCommunities + this.community.zenodoCommunity, null).subscribe(
+                  result => {
+                    this.masterZenodoCommunity = result;
+
+                  },
+                  error => {
+                    // var emptyCommunity:ZenodoCommunityInfo = new ZenodoCommunityInfo();
+                    // emptyCommunity.id = this.masterZenodoCommunityId;
+                    // emptyCommunity.title = this.masterZenodoCommunityId;
+                    // this.masterZenodoCommunity = emptyCommunity;
+                    //console.log("Master Zenodo community'" + this.community.zenodoCommunity + "' couldn't be loaded");
+                    this.handleError("Error getting Master Zenodo community with id: " + this.community.zenodoCommunityId, error);
+
+                  }
+                );
+              }
+              this._searchZenodoCommunitiesService.searchZCommunities(this.properties, this.communityId).subscribe(
+                result => {
+                  this.zenodoCommunityIdS = result;
+
+
+                },
+                error => {
+                  //console.error("list of zenodo communities couldn't be loaded");
+                  this.handleError("Error getting list of zenodo communities for community with openaire id: " + this.communityId, error);
+                } //this.handleError('System error retrieving community profile', error)
+              );
+
+              //console.log(community);
+            });
+
+            this.countResearchResults("publication");
+            this.countResearchResults("dataset");
+            this.countResearchResults("software");
+            this.countResearchResults("other");
+
+            this._searchCommunityProjectsService.countTotalProjects(this.properties,  this.communityId ).subscribe(
+              projectTotal => {
+                this.projectTotal = projectTotal;
+                //console.log(projectTotal);
+              },
+              error => {
+                this.handleError("Error getting number of projects for community with id: " + this.communityId, error);
+              }
+            );
+
+            this._searchCommunityDataprovidersService.countTotalDataproviders(this.properties, this.communityId ).subscribe(
+              contentProviderTotal => {
+                this.contentProviderTotal = contentProviderTotal;
+                //console.log(contentProviderTotal);
+              },
+              error => {
+                this.handleError("Error getting number of content providers for community with id: " + this.communityId, error);
+              }
+          );
+
+          // this._searchEntriesService.countTotal(this.properties.communityAPI+this.communityId+'/organizations').subscribe(
+          //   organizationTotal => {
+          //             this.organizationTotal = organizationTotal;
+          //             console.log(organizationTotal);
+          //   });
+
+
+          /**/
+          this.config.getCommunityInformation(this.properties, this.communityId).subscribe(
+            res => {
+              this.communityInfo = res;
+            },
+            error => {
+              //console.log(error)
+              this.handleError("Error getting community with id: " + this.communityId, error);
+            }
+          );
+        }
+      });
+  }
+
+  public countResearchResults(resultType: string) {
+    this._searchResearchResultsService.countTotalResults(resultType, this.properties,"&fq=communityid=" + this.communityId).subscribe(
+      researchResultsTotal => {
+        this.setTotal(resultType, researchResultsTotal);
+        if(resultType == "publication") {
+          this.searchResearchResults(resultType, this.publicationTotal, this.publicationResults);
+        }
+      },
+      error => {
+        this.handleError("Error getting number of "+this.getEntityName(resultType, true, true)+" for community with id: " + this.communityId, error);
+      }
+    );
+  }
+
+  public searchResearchResults(resultType: string, resultsTotal: number, results: Array<any>) {
+    this.setActiveTab(resultType);
+
+    if (resultsTotal > 0 && results == null) {
+      this.showLoading = true;
+
+      this._searchResearchResultsService.search(resultType, "", "&fq=communityid=" + this.communityId, 1, 5, "resultdateofacceptance,descending", [], this.properties).subscribe(
+        researchResults => {
+          this.setResults(resultType, researchResults[1]);
+          this.showLoading = false;
+        },
+        error => {
+          this.handleError("Error getting "+this.getEntityName(resultType, true, true)+" for community with id: " + this.communityId, error);
+        }
+      );
+    }
+  }
+
+  public ngOnDestroy() {
+    if (this.piwiksub) {
+      this.piwiksub.unsubscribe();
+    }
+  }
+
+  isEntityEnabled(entity: string) {
+    return this.communityInfo.entities.some(x => x['pid'] == entity && x['isEnabled'] === true);
+  }
+
+  isRouteEnabled(route: string) {
+    return this.communityInfo.pages.some(x => x['route'] == route && x['isEnabled'] === true);
+  }
+
+  showInvite() {
+    return this.loginCheck && this.isManager();
+  }
+
+  isManager() {
+    if(!this.user) {
+      return false;
+    }
+    var email = this.user.email;
+    var index = -1;
+    if (email && this.community != null && this.community.managers != null) {
+      index = this.community.managers.indexOf(email);
+    }
+    return Session.isPortalAdministrator(this.user) || Session.isCommunityCurator(this.user) || index != -1;
+  }
+
+  private handleError(message: string, error) {
+    console.error("Community (component): " + message, error);
+  }
+
+  getSearchPlaceHolder() {
+    var entities = [];
+    if (this.isEntityEnabled("publication")) {
+      entities.push("publications");
+    }
+    if (this.isEntityEnabled("dataset")) {
+      entities.push("research data");
+    }
+    if (this.isEntityEnabled("software")) {
+      entities.push("software");
+    }
+    if (this.isEntityEnabled("orp")) {
+      entities.push("other research products");
+    }
+    return "Search" + ((entities.length > 0) ? (" for " + entities.join(', ') + "...") : "");
+  }
+
+  countOtherGraphs() {
+    var count = 0;
+    if (this.statistics && this.statistics.allowedEntities) {
+      for (var entity of this.statistics.allowedEntities) {
+        if (this.statistics.statisticsSum[entity].total > 0 && this.statistics.allowedCharts[entity].length > 0 && this.activeTab != entity) {
+          count += this.statistics.allowedCharts[entity].length;
+        }
+      }
+    }
+    return count;
+  }
+
+  createParams(param) {
+    return StringUtils.quote(StringUtils.URIEncode(param));
+  }
+
+  private setActiveTab(entityType: string) {
+    if(entityType == "other") {
+      this.activeTab = "orp";
+    } else {
+      this.activeTab = entityType;
+    }
+  }
+
+  private setResults(entityType: string, results: Array<any>) {
+    if(entityType == "publication") {
+      this.publicationResults = results;
+    } else if(entityType == "dataset") {
+      this.researchDataResults = results;
+    } else if(entityType == "software") {
+      this.softwareResults = results;
+    } else if(entityType == "other") {
+      this.orpResults = results;
+    }
+  }
+
+  private setTotal(entityType: string, total: number) {
+    if(entityType == "publication") {
+      this.publicationTotal = total;
+    } else if(entityType == "dataset") {
+      this.researchDataTotal = total;
+    } else if(entityType == "software") {
+      this.softwareTotal = total;
+    } else if(entityType == "other") {
+      this.orpTotal = total;
+    }
+  }
+
+  private getEntityName (entityType:string, plural:boolean, full:boolean): string {
+    if(entityType == "publication") {
+      return "publication" + (plural ? "s" : "");
+    } else if(entityType == "dataset") {
+      return (full ? "research data" : ("dataset" + (plural ? "s" : "")));
+    } else if(entityType == "software") {
+      return "software";
+    } else if(entityType == "other") {
+      return (full ? ("other research product" + (plural ? "s" : "")) : "other");
+    }
+  }
+}
diff --git a/src/app/community/community.module.ts b/src/app/community/community.module.ts
new file mode 100644
index 0000000..c0bfdf2
--- /dev/null
+++ b/src/app/community/community.module.ts
@@ -0,0 +1,50 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
+import {RouterModule} from '@angular/router';
+import {CommunityComponent} from './community.component';
+import {ResultsComponent} from '../searchEntries/results/results.component';
+
+import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
+import {CommunityService} from '../openaireLibrary/connect/community/community.service';
+
+import {FreeGuard} from '../openaireLibrary/login/freeGuard.guard';
+import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
+import {SubscribeModule} from '../utils/subscribe/subscribe.module';
+import {InviteModule} from '../utils/subscribe/invite/invite.module';
+import {ManageModule} from '../openaireLibrary/utils/manage/manage.module';
+
+import {StatisticsModule} from "../statistics/statistics.module";
+import {SearchZenodoCommunitiesServiceModule} from '../openaireLibrary/connect/zenodoCommunities/searchZenodoCommunitiesService.module';
+import {ZenodoCommunitiesServiceModule} from '../openaireLibrary/connect/zenodoCommunities/zenodo-communitiesService.module';
+import {SearchFormModule} from '../openaireLibrary/searchPages/searchUtils/searchForm.module';
+import {SearchDataprovidersServiceModule} from "../openaireLibrary/connect/contentProviders/searchDataprovidersService.module";
+import {SearchProjectsServiceModule} from '../openaireLibrary/connect/projects/searchProjectsService.module';
+import {SearchResearchResultsServiceModule} from "../openaireLibrary/services/searchResearchResultsService.module";
+import {SearchResultsModule} from "../openaireLibrary/searchPages/searchUtils/searchResults.module";
+import {CuratorsModule} from "../curators/curators.module";
+import {AffiliationsModule} from "../affiliations/affiliations.module";
+import {Schema2jsonldModule} from "../openaireLibrary/sharedComponents/schema2jsonld/schema2jsonld.module";
+import {SEOServiceModule} from "../openaireLibrary/sharedComponents/SEO/SEOService.module";
+import {MatSelectModule} from "@angular/material";
+
+@NgModule({
+  imports: [
+    CommonModule, FormsModule, RouterModule,
+    SubscribeModule, StatisticsModule, ManageModule, InviteModule,
+    SearchZenodoCommunitiesServiceModule, ZenodoCommunitiesServiceModule, SearchFormModule, SearchDataprovidersServiceModule, SearchProjectsServiceModule,
+    SearchResearchResultsServiceModule, SearchResultsModule, CuratorsModule, AffiliationsModule,
+    Schema2jsonldModule, SEOServiceModule, MatSelectModule
+  ],
+  declarations: [
+    CommunityComponent, ResultsComponent
+  ],
+  providers:[
+    FreeGuard, PreviousRouteRecorder,
+    PiwikService, CommunityService
+  ],
+  exports: [
+    CommunityComponent
+  ]
+})
+export class CommunityModule { }
diff --git a/src/app/communitywrapper/communityWrapper-routing.module.ts b/src/app/communitywrapper/communityWrapper-routing.module.ts
new file mode 100644
index 0000000..d886195
--- /dev/null
+++ b/src/app/communitywrapper/communityWrapper-routing.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import{CommunityWrapperComponent} from './communityWrapper.component';
+import {FreeGuard} from '../openaireLibrary/login/freeGuard.guard';
+import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+     	{ path: '', component: CommunityWrapperComponent, canActivate: [FreeGuard], canDeactivate: [PreviousRouteRecorder] }
+
+    ])
+  ]
+})
+export class CommunityWrapperRoutingModule { }
diff --git a/src/app/communitywrapper/communityWrapper.component.ts b/src/app/communitywrapper/communityWrapper.component.ts
new file mode 100644
index 0000000..c5427e8
--- /dev/null
+++ b/src/app/communitywrapper/communityWrapper.component.ts
@@ -0,0 +1,48 @@
+import {Component} from '@angular/core';
+import {ActivatedRoute, Router}       from '@angular/router';
+
+import {ConnectHelper} from '../openaireLibrary/connect/connectHelper';
+
+@Component({
+  selector: 'community-wrapper',
+  template:`
+      <community *ngIf="dashboard && communityId" [communityId]=communityId></community>
+      <communities *ngIf="dashboard!=null && !dashboard" ></communities>
+  `
+})
+
+export class CommunityWrapperComponent {
+  communityId:string;
+  dashboard:boolean = null;
+
+  constructor (
+      private route: ActivatedRoute,
+      private _router: Router
+
+  ) {
+    this.route.data
+        .subscribe((data: { envSpecific: any }) => {
+          this.route.queryParams.subscribe(
+              communityId => {
+                this.communityId  = ConnectHelper.getCommunityFromDomain(data.envSpecific.domain);
+                if(!this.communityId) {
+                  this.communityId = communityId['communityId'];
+                }
+
+                if(this.communityId){
+                  this.dashboard = true;
+                }else{
+                  this.dashboard = false;
+                }
+
+              });
+        });
+
+  }
+
+  public ngOnInit() {
+  }
+
+
+
+}
diff --git a/src/app/communitywrapper/communityWrapper.module.ts b/src/app/communitywrapper/communityWrapper.module.ts
new file mode 100644
index 0000000..d45beb8
--- /dev/null
+++ b/src/app/communitywrapper/communityWrapper.module.ts
@@ -0,0 +1,27 @@
+import { NgModule}            from '@angular/core';
+import { CommonModule }        from '@angular/common';
+import { FormsModule }         from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import {FreeGuard} from '../openaireLibrary/login/freeGuard.guard';
+import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
+ import{CommunityModule} from '../community/community.module';
+ import{CommunitiesModule} from '../communities/communities.module';
+import {CommunityWrapperComponent} from './communityWrapper.component';
+import {CommunityWrapperRoutingModule} from './communityWrapper-routing.module';
+@NgModule({
+  imports: [
+    CommonModule, FormsModule, RouterModule,
+      CommunityWrapperRoutingModule, CommunityModule, CommunitiesModule
+  ],
+  declarations: [
+    CommunityWrapperComponent
+   ],
+  providers:[
+    FreeGuard, PreviousRouteRecorder,
+
+    ],
+  exports: [
+    CommunityWrapperComponent
+     ]
+})
+export class CommunityWrapperModule { }
diff --git a/src/app/contact/contact-routing.module.ts b/src/app/contact/contact-routing.module.ts
new file mode 100644
index 0000000..e75fd37
--- /dev/null
+++ b/src/app/contact/contact-routing.module.ts
@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import {RouterModule} from '@angular/router';
+import {ContactComponent} from './contact.component';
+import {IsRouteEnabled} from "../openaireLibrary/error/isRouteEnabled.guard";
+
+@NgModule({
+    imports: [
+        RouterModule.forChild([
+            { path: '', component: ContactComponent, canActivate: [IsRouteEnabled]}
+        ])
+    ]
+})
+export class ContactRoutingModule { }
diff --git a/src/app/contact/contact.component.html b/src/app/contact/contact.component.html
new file mode 100644
index 0000000..674f478
--- /dev/null
+++ b/src/app/contact/contact.component.html
@@ -0,0 +1,131 @@
+<schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other"></schema2jsonld>
+
+<ng-template #info>
+  <helper *ngIf="pageContents && pageContents['right'] && pageContents['right'].length > 0"
+          [texts]="pageContents['right']"></helper>
+  <!--<div class="uk-margin-auto-top uk-margin-remove-bottom  uk-text-bold uk-h4">OpenAIRE gives you the virtual
+      environment and services designed for your community to:
+  </div>
+  <ul class="uk-list uk-list-divider uk-padding uk-padding-remove-left uk-margin-auto-top">
+      <li><h5><span class="uk-text-bold">Create and Manage</span> your
+          Community Gateway</h5></li>
+      <li><h5><span class="uk-text-bold">Access, share and link</span> together all your research</h5></li>
+      <li><h5><span class="uk-text-bold">Monitor and report</span> your community's progress</h5></li>
+  </ul>-->
+</ng-template>
+<div class="image-front-topbar"
+     uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}"
+     tm-header-transparent="light" tm-header-transparent-placeholder="">
+  <div
+    class="contact-background uk-section-large uk-background-top-center uk-background-norepeat uk-background-cover uk-section-overlap uk-position-relative uk-preserve-color">
+    <div style=" min-height: 350px;" class="uk-section uk-flex uk-flex-middle uk-margin-top uk-padding-remove-top">
+      <div class="uk-align-center">
+        <div *ngIf="showLoading" class="uk-margin-large">
+          <div class="uk-animation-fade uk-margin-top  uk-width-1-1" role="alert"><span
+            class="loading-gif  uk-align-center"></span></div>
+        </div>
+        <div *ngIf="!showLoading" class="uk-container uk-container-large">
+          <div class="uk-grid-divider" uk-grid>
+            <div class="uk-width-1-1 uk-hidden@m">
+              <ng-container *ngTemplateOutlet="info"></ng-container>
+            </div>
+            <div class="uk-width-1-2@m uk-width-1-1@s">
+              <div class="uk-margin-auto uk-text-bold uk-h4">Contact us to create your Community Gateway</div>
+              <div *ngIf="errorMessage" class="uk-width-1-1 uk-alert uk-alert-danger uk-text-center"
+                   role="alert">{{errorMessage}}</div>
+              <div class="uk-margin-top" uk-grid>
+                <div class="uk-margin-small uk-width-1-1 uk-text-danger uk-text-bold uk-margin-remove-bottom">* Required
+                  fields
+                </div>
+                <div class="uk-width-1-2@s uk-margin-small-top">
+                  <label class="uk-h5 uk-text-bold">
+                    Name <span class="uk-text-danger uk-text-bold">*</span>
+                  </label>
+                  <div *ngIf="name.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none">
+                    Please add a name.
+                  </div>
+                  <input class="uk-input" type="text" placeholder="Your Name" [(ngModel)]="contactForm.name" required
+                         #name="ngModel">
+                </div>
+                <div class="uk-width-1-2@s  uk-margin-small-top">
+                  <label class="uk-h5 uk-text-bold">
+                    Surname <span class="uk-text-danger uk-text-bold">*</span>
+                  </label>
+                  <div *ngIf="surname.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none">
+                    Please add a surname.
+                  </div>
+                  <input class="uk-input" type="text" placeholder="Your Surname" [(ngModel)]="contactForm.surname"
+                         required #surname="ngModel">
+                </div>
+                <div class="uk-width-1-2@s uk-margin-small-top">
+                  <label class="uk-h5 uk-text-bold">
+                    Email <span class="uk-text-danger uk-text-bold">*</span>
+                  </label>
+                  <div *ngIf="sender.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none">
+                    Please add an email.
+                  </div>
+                  <div
+                    *ngIf="!sender.invalid && isSubmitted && !contactForm.email.match('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$')"
+                    class=" uk-text-danger uk-text-small style=display:none">Please add a valid email.
+                  </div>
+                  <input class="uk-input" type="email" placeholder="Your Email" [(ngModel)]="contactForm.email" required
+                         #sender="ngModel">
+                </div>
+                <div class="uk-width-1-2@s uk-margin-small-top">
+                  <label class="uk-h5 uk-text-bold">
+                    Affiliation <span class="uk-text-danger uk-text-bold">*</span>
+                  </label>
+                  <div *ngIf="affiliation.invalid && isSubmitted"
+                       class=" uk-text-danger uk-text-small style=display:none"> Please add an affiliation.
+                  </div>
+                  <input class="uk-input" type="text" placeholder="Your Affiliation"
+                         [(ngModel)]="contactForm.affiliation" required #affiliation="ngModel">
+                </div>
+                <label class="uk-width-1-1 uk-h5 uk-text-bold">
+                  Community Name <span class="uk-text-danger uk-text-bold">*</span>
+                </label>
+                <div class="uk-width-1-2@s uk-margin-remove-top">
+                  <div *ngIf="community.invalid && isSubmitted"
+                       class=" uk-text-danger uk-text-small style=display:none"> Please add a community name.
+                  </div>
+                  <input class="uk-input" type="text" placeholder="Your Community Name"
+                         [(ngModel)]="contactForm.community" required #community="ngModel">
+                </div>
+                <label class="uk-width-1-1 uk-h5 uk-text-bold">
+                  Message <span class="uk-text-danger uk-text-bold">*</span>
+                </label>
+                <div class="uk-width-1-1 uk-margin-remove-top">
+                  <div *ngIf="message.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none">
+                    Please write us a message.
+                  </div>
+                  <textarea rows="4" class="uk-textarea" type="text" placeholder="Your message"
+                            [(ngModel)]="contactForm.message" required #message="ngModel"></textarea>
+                </div>
+                <div class="uk-width-1-1">
+                  <div *ngIf="!contactForm.recaptcha && isSubmitted"
+                       class=" uk-text-danger uk-text-small style=display:none"> Please complete reCaptcha challenge.
+                  </div>
+                  <re-captcha #recaptcha (resolved)="handleRecaptcha($event)" [(siteKey)]="properties.reCaptchaSiteKey"
+                              required></re-captcha>
+                </div>
+                <div class="uk-width-1-1 uk-text-right">
+                  <button class="uk-button uk-button-default uk-margin-small-right" (click)="reset()">Reset</button>
+                  <button class="uk-button portal-button" (click)="send()">Send</button>
+                </div>
+              </div>
+            </div>
+            <div class="uk-width-1-2 uk-visible@m">
+              <ng-container *ngTemplateOutlet="info"></ng-container>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<modal-alert #AlertModal (alertOutput)="goToHome($event)">
+  <div class="uk-text-center">
+    Our team will respond to your submission soon.<br>
+    Press OK to redirect to OpenAIRE Connect home page.
+  </div>
+</modal-alert>
diff --git a/src/app/contact/contact.component.ts b/src/app/contact/contact.component.ts
new file mode 100644
index 0000000..3a350e6
--- /dev/null
+++ b/src/app/contact/contact.component.ts
@@ -0,0 +1,169 @@
+import {Component, OnInit, Input, ElementRef, ViewChild} from '@angular/core';
+import {FormGroup} from '@angular/forms';
+import {ActivatedRoute, Router} from '@angular/router';
+import {EmailService} from "../openaireLibrary/utils/email/email.service";
+import {Email} from "../openaireLibrary/utils/email/email";
+import {EnvProperties} from "../openaireLibrary/utils/properties/env-properties";
+import {ContactForm} from "../openaireLibrary/utils/email/contact-form";
+import {Composer} from "../openaireLibrary/utils/email/composer";
+import {Meta, Title} from "@angular/platform-browser";
+import {PiwikService} from "../openaireLibrary/utils/piwik/piwik.service";
+import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
+import {HelperService} from "../openaireLibrary/utils/helper/helper.service";
+import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
+
+@Component({
+    selector: 'contact',
+    templateUrl: './contact.component.html',
+})
+
+export class ContactComponent implements OnInit {
+  public url: string = null;
+  public pageTitle: string = "OpenAIRE - Connect | Contact Us";
+
+  @Input('group')
+  myForm: FormGroup;
+  public piwiksub: any;
+  public showLoading = true;
+  public errorMessage = '';
+  public isSubmitted = false;
+  public email: Email;
+  public note = '';
+  public properties: EnvProperties = null;
+  public pageContents = null;
+  public divContents = null;
+
+  public contactForm: ContactForm = new ContactForm();
+  @ViewChild('AlertModal') modal;
+  @ViewChild('name') name;
+  @ViewChild('surname') surname;
+  @ViewChild('sender') sender;
+  @ViewChild('affiliation') affiliation;
+  @ViewChild('community') community;
+  @ViewChild('message') message;
+  @ViewChild('recaptcha') recaptcha;
+
+  constructor(private route: ActivatedRoute,
+              private _router: Router,
+              private _emailService: EmailService,
+              private _meta: Meta,
+              private _title: Title,
+              private seoService: SEOService,
+              private _piwikService: PiwikService,
+              private helper: HelperService) {
+  }
+
+  ngOnInit() {
+      this._title.setTitle('OpenAIRE-Connect | Contact Us');
+      this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {
+          this.properties = data.envSpecific;
+          this.email = {body: '', subject: '', recipients: []};
+
+          if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
+            this.piwiksub = this._piwikService.trackView(this.properties, this.pageTitle, this.properties.piwikSiteId).subscribe();
+          }
+          this.url = this.properties.baseLink + this._router.url;
+          this.seoService.createLinkForCanonicalURL(this.url);
+          this.updateUrl(this.url);
+          this.updateTitle(this.pageTitle);
+          this.updateDescription("OpenAIRE - Connect, Community Gateway, research community");
+
+          //this.getDivContents();
+          this.getPageContents();
+          HelperFunctions.scroll();
+          this.showLoading = false;
+      });
+  }
+
+  private getPageContents() {
+      this.helper.getPageHelpContents(this._router.url, this.properties, 'connect').subscribe(contents => {
+          this.pageContents = contents;
+      })
+  }
+
+  private getDivContents() {
+      this.helper.getDivHelpContents(this._router.url, this.properties, 'connect').subscribe(contents => {
+          this.divContents = contents;
+      })
+  }
+
+  public send() {
+      HelperFunctions.scroll();
+      if(!this.name.invalid && !this.surname.invalid && !this.sender.invalid &&
+          this.contactForm.email.match('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$') &&
+          !this.affiliation.invalid && !this.message.invalid && this.contactForm.recaptcha != '') {
+          this.sendMail(this.properties.admins);
+      }
+      else {
+          this.errorMessage = 'Please fill in all the required fields!'
+          this.isSubmitted = true;
+      }
+  }
+
+  public reset() {
+      this.contactForm = new ContactForm();
+      this.isSubmitted = false;
+      this.errorMessage = '';
+      this.contactForm.recaptcha = '';
+  }
+
+   private sendMail(admins: any) {
+       this.showLoading = true;
+       this._emailService.contact(this.properties.adminToolsAPIURL + '/contact',
+                                    Composer.composeEmailForNewCommunity(this.contactForm, admins), this.contactForm.recaptcha).subscribe(
+             res => {
+                 if(res) {
+                     this.reset();
+                     this.modalOpen();
+                     this.showLoading = false;
+                 }
+             },
+             error => {
+                 this.handleError('Email sent failed! Please try again.', error);
+                 this.showLoading = false;
+                 this.contactForm.recaptcha = '';
+             }
+       );
+   }
+
+  public modalOpen() {
+      this.modal.okButton = true;
+      this.modal.alertTitle = 'Your request has been successfully submitted';
+      this.modal.alertMessage = false;
+      this.modal.cancelButton = false;
+      this.modal.okButtonLeft = false;
+      this.modal.okButtonText = 'OK';
+      this.modal.open();
+  }
+
+  public handleRecaptcha(captchaResponse: string) {
+      this.contactForm.recaptcha = captchaResponse;
+  }
+
+
+  handleError(message: string, error) {
+      this.errorMessage = message;
+      console.log('Server responded: ' + error);
+
+      this.showLoading = false;
+  }
+
+  public goToHome(data: any) {
+      this._router.navigate(['/']);
+  }
+
+  private updateDescription(description: string) {
+    this._meta.updateTag({content: description}, "name='description'");
+    this._meta.updateTag({content: description}, "property='og:description'");
+  }
+
+  private updateTitle(title: string) {
+    var _title = ((title.length > 50) ? title.substring(0, 50) : title);
+    this._title.setTitle(_title);
+    this._meta.updateTag({content: _title}, "property='og:title'");
+  }
+
+  private updateUrl(url: string) {
+    this._meta.updateTag({content: url}, "property='og:url'");
+  }
+}
diff --git a/src/app/contact/contact.module.ts b/src/app/contact/contact.module.ts
new file mode 100644
index 0000000..3309a8b
--- /dev/null
+++ b/src/app/contact/contact.module.ts
@@ -0,0 +1,35 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
+import {RouterModule} from '@angular/router';
+
+import {ContactComponent} from './contact.component';
+import {ContactRoutingModule} from "./contact-routing.module";
+import {EmailService} from "../openaireLibrary/utils/email/email.service";
+import {RecaptchaModule} from "ng-recaptcha";
+import {AlertModalModule} from "../openaireLibrary/utils/modal/alertModal.module";
+import {PiwikService} from "../openaireLibrary/utils/piwik/piwik.service";
+import {HelperModule} from "../openaireLibrary/utils/helper/helper.module";
+import {IsRouteEnabled} from "../openaireLibrary/error/isRouteEnabled.guard";
+import {Schema2jsonldModule} from "../openaireLibrary/sharedComponents/schema2jsonld/schema2jsonld.module";
+import {SEOServiceModule} from "../openaireLibrary/sharedComponents/SEO/SEOService.module";
+
+
+@NgModule({
+  imports: [
+    ContactRoutingModule, CommonModule, FormsModule, RouterModule,
+    AlertModalModule, RecaptchaModule.forRoot(), HelperModule,
+    Schema2jsonldModule, SEOServiceModule
+  ],
+  declarations: [
+    ContactComponent
+  ],
+  providers: [
+    EmailService, PiwikService, IsRouteEnabled
+  ],
+  exports: [
+    ContactComponent
+  ]
+})
+
+export class ContactModule { }
diff --git a/src/app/home/home-routing.module.ts b/src/app/content/content-routing.module.ts
similarity index 59%
rename from src/app/home/home-routing.module.ts
rename to src/app/content/content-routing.module.ts
index 099e07c..d1abda4 100644
--- a/src/app/home/home-routing.module.ts
+++ b/src/app/content/content-routing.module.ts
@@ -1,17 +1,16 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import{HomeComponent} from './home.component';
-
+import {ContentPageComponent} from './contentPage.component';
 import {FreeGuard} from '../openaireLibrary/login/freeGuard.guard';
 import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
 
 @NgModule({
   imports: [
     RouterModule.forChild([
-     	{ path: '', component: HomeComponent, canActivate: [FreeGuard], canDeactivate: [PreviousRouteRecorder] }
+     	{ path: '', component: ContentPageComponent, canActivate: [FreeGuard], canDeactivate: [PreviousRouteRecorder] }
 
     ])
   ]
 })
-export class HomeRoutingModule { }
+export class ContentPageRoutingModule { }
diff --git a/src/app/content/contentPage.component.html b/src/app/content/contentPage.component.html
new file mode 100644
index 0000000..71cd4b9
--- /dev/null
+++ b/src/app/content/contentPage.component.html
@@ -0,0 +1,83 @@
+<schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other"></schema2jsonld>
+
+<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0" [texts]="pageContents['top']"></helper>
+<!--
+<div class="uk-margin-large-top tm-middle uk-container" id="tm-main">
+  <div class="uk-container  uk-margin-bottom">
+      <div class="uk-article-title custom-article-title">
+         Content policy
+      </div>
+      <div>
+
+
+
+
+
+        <p>
+          OpenAIRE builds an open scholarly graph of research products (publications, datasets, software and other types of research products), linked to each other and to fundings, projects and organizations.
+          The information used to build the graph is collected from the OpenAIRE network of content providers&lt;!&ndash; (currently composed of more than 400 institutional repositories, 8,000 Open Access journals, 70 dataset archives and 20 funders)&ndash;&gt;
+          and is inferred by OpenAIRE algorithms. OpenAIRE algorithms are capable of detecting duplicates and mining information from the full-texts of Open Access publications.
+          For more details about the construction of the graph, please check  <a  href="https://beta.openaire.eu/aggregation-and-content-provision-workflows" target="_blank"   >here</a>.
+          </p>
+          <p>
+          Thanks to the Research Community Dashboard (RCD), researchers have a dedicated view of the OpenAIRE graph where only the research products relevant to the community are searchable and browsable.<br>
+          There are several ways to decide if a research product is relevant to a given community:
+        </p>
+
+
+        <p class="uk-margin-left">
+          &lt;!&ndash; <span class="uk-text-large uk-text-primary">Users </span> &ndash;&gt;
+          &lt;!&ndash; <div class="uk-margin-left"> &ndash;&gt;
+            <b>Links:</b> Users can "claim" that a research result is relevant to a community via the
+          <a   routerLinkActive="uk-link" routerLink="/participate/claim"   >Link</a> functionality of the Research  community dashboard.
+          <br>
+          For more details about linking functionality, please check <a  href="https://beta.openaire.eu/linking" target="_blank"   >here</a>.
+
+          &lt;!&ndash; </div> &ndash;&gt;
+        </p>
+        <div class="uk-margin-left uk-margin-top">
+          &lt;!&ndash; <span class="uk-text-large uk-text-primary">OpenAIRE algorithms </span><br> &ndash;&gt;
+          <b>OpenAIRE algorithms:</b> Community managers can configure the OpenAIRE algorithms, in order to automatically assign research products to a community based on:
+
+          <div class="uk-margin-left">
+             <ul class=" uk-list uk-list-bullet  ">
+               <li>
+                  The content providers they have been collected from. <br>Examples: all research products collected from "NeuroVault" are relevant to the Neuroinformatics community; all research products collected from the LINDAT/CLARIN repository are relevant to the CLARIN research initiative.
+
+               </li>
+               <li>
+                 The projects they have been produced in.  <br>Examples: all research products of the project "Tara Mediterranee" are relevant to the European Marine Science community; all research products of the project "ARIADNE" are relevant to the Digital Humanities and Cultural Heritage community.
+               </li>
+               <li>
+                 The subjects and keywords (only for RCD serving research communities).  <br>Examples: all research products having "SDG11 - Sustainable cities and communities" among the subjects are relevant to the Greek Sustainable Development Solutions Network community; all research products with subject "agriculture" are relevant to the AgInfra community
+               </li>
+
+             </ul>
+           </div>
+
+
+         </div>
+         <div class="uk-margin-left uk-margin-top">
+          <b>Acknowledgement statements:</b> Acknowledgement statements found in full-texts (only for RCDs serving research infrastructures/initiatives)
+        </div>
+        &lt;!&ndash;div  class="uk-margin-top">
+                 Stay tuned to discover the new criteria that will be supported in the next releases of the OpenAIRE-Connect Research Community Dashboard:
+                 <div class="uk-margin-left ">
+
+                   <ul class="  uk-list uk-list-bullet   ">
+                     <li>
+                       Community managers will be able to specify additional criteria to select subsets of research results collected from a content provider or linked to projects.
+                     </li>
+                     <li>
+                       GUI support for the selection of keywords from standard subject classification vocabularies and taxonomies
+                     </li>
+
+                   </ul>
+                   </div>
+
+        </div&ndash;&gt;
+
+      </div>
+  </div>
+</div>
+-->
diff --git a/src/app/content/contentPage.component.ts b/src/app/content/contentPage.component.ts
new file mode 100644
index 0000000..3f60795
--- /dev/null
+++ b/src/app/content/contentPage.component.ts
@@ -0,0 +1,81 @@
+import {Component} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+import {Meta, Title} from '@angular/platform-browser';
+import {HelperService} from "../openaireLibrary/utils/helper/helper.service";
+import {EnvProperties} from "../openaireLibrary/utils/properties/env-properties";
+import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
+import {PiwikService} from "../openaireLibrary/utils/piwik/piwik.service";
+
+@Component({
+  selector: 'content',
+  templateUrl: './contentPage.component.html'
+})
+export class ContentPageComponent {
+
+  properties: EnvProperties;
+  public pageContents = null;
+  public divContents = null;
+
+  public url: string = null;
+  public pageTitle: string = "OpenAIRE - Connect | Content Policy";
+  piwiksub: any;
+
+  constructor(private  route: ActivatedRoute, private _router: Router,
+              private _meta: Meta,
+              private _title: Title,
+              private seoService: SEOService,
+              private _piwikService: PiwikService,
+              private helper: HelperService) {}
+
+  public ngOnInit() {
+    this.route.data
+      .subscribe((data: { envSpecific: EnvProperties }) => {
+        this.properties = data.envSpecific;
+
+        if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
+          this.piwiksub = this._piwikService.trackView(this.properties, this.pageTitle, this.properties.piwikSiteId).subscribe();
+        }
+        this.url = this.properties.baseLink + this._router.url;
+        this.seoService.createLinkForCanonicalURL(this.url);
+        this.updateUrl(this.url);
+        this.updateTitle(this.pageTitle);
+        this.updateDescription("content, open access");
+
+        //this.getDivContents();
+        this.getPageContents();
+      });
+  }
+
+  ngOnDestroy() {
+    if(this.piwiksub) {
+      this.piwiksub.unsubscribe();
+    }
+  }
+
+  private updateDescription(description: string) {
+    this._meta.updateTag({content: description}, "name='description'");
+    this._meta.updateTag({content: description}, "property='og:description'");
+  }
+
+  private updateTitle(title: string) {
+    var _title = ((title.length > 50) ? title.substring(0, 50) : title);
+    this._title.setTitle(_title);
+    this._meta.updateTag({content: _title}, "property='og:title'");
+  }
+
+  private updateUrl(url: string) {
+    this._meta.updateTag({content: url}, "property='og:url'");
+  }
+
+  private getPageContents() {
+    this.helper.getPageHelpContents(this._router.url, this.properties, 'connect').subscribe(contents => {
+      this.pageContents = contents;
+    })
+  }
+
+  private getDivContents() {
+    this.helper.getDivHelpContents(this._router.url, this.properties, 'connect').subscribe(contents => {
+      this.divContents = contents;
+    })
+  }
+}
diff --git a/src/app/content/contentPage.module.ts b/src/app/content/contentPage.module.ts
new file mode 100644
index 0000000..657e560
--- /dev/null
+++ b/src/app/content/contentPage.module.ts
@@ -0,0 +1,33 @@
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+
+import {FreeGuard} from '../openaireLibrary/login/freeGuard.guard';
+import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
+
+import {ContentPageComponent} from './contentPage.component';
+import {ContentPageRoutingModule} from './content-routing.module';
+import {CommonModule} from "@angular/common";
+import {HelperModule} from "../openaireLibrary/utils/helper/helper.module";
+import {PiwikService} from "../openaireLibrary/utils/piwik/piwik.service";
+import {Schema2jsonldModule} from "../openaireLibrary/sharedComponents/schema2jsonld/schema2jsonld.module";
+import {SEOServiceModule} from "../openaireLibrary/sharedComponents/SEO/SEOService.module";
+import {PiwikServiceModule} from "../openaireLibrary/utils/piwik/piwikService.module";
+
+
+@NgModule({
+  imports: [
+    ContentPageRoutingModule, RouterModule, CommonModule, HelperModule,
+    Schema2jsonldModule, SEOServiceModule, PiwikServiceModule
+  ],
+  declarations: [
+    ContentPageComponent
+  ],
+  providers: [FreeGuard, PreviousRouteRecorder],
+  exports: [
+    ContentPageComponent
+  ]
+})
+
+
+export class ContentPageModule {
+}
diff --git a/src/app/createCommunity/community-creation-instructions-routing.module.ts b/src/app/createCommunity/community-creation-instructions-routing.module.ts
new file mode 100644
index 0000000..f37e14c
--- /dev/null
+++ b/src/app/createCommunity/community-creation-instructions-routing.module.ts
@@ -0,0 +1,17 @@
+import {NgModule}     from '@angular/core';
+import {RouterModule} from '@angular/router';
+
+import {FreeGuard}              from '../openaireLibrary/login/freeGuard.guard';
+import {PreviousRouteRecorder}  from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
+
+import {CommunityCreationInstructionsComponent} from './community-creation-instructions.component';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+     	{ path: '', component: CommunityCreationInstructionsComponent, canActivate: [FreeGuard], canDeactivate: [PreviousRouteRecorder] }
+
+    ])
+  ]
+})
+export class CommunityCreationInstructionsRoutingModule { }
diff --git a/src/app/createCommunity/community-creation-instructions.component.ts b/src/app/createCommunity/community-creation-instructions.component.ts
new file mode 100644
index 0000000..bbde140
--- /dev/null
+++ b/src/app/createCommunity/community-creation-instructions.component.ts
@@ -0,0 +1,416 @@
+import {Component, ElementRef, HostListener, Input, ViewChild} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+import {Title, Meta}            from '@angular/platform-browser';
+
+import {PiwikService}           from '../openaireLibrary/utils/piwik/piwik.service';
+import {EnvProperties}          from '../openaireLibrary/utils/properties/env-properties';
+
+declare var UIkit: any;
+
+@Component({
+    selector: 'community-creation-instructions',
+    template: `
+      <div class="image-front-topbar  uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}" tm-header-transparent="light" tm-header-transparent-placeholder="">
+        <div  style=" min-height: calc(7.89999px + 60vh);"
+              class=" mainPageSearchForm uk-background-norepeat uk-background-cover uk-section uk-padding-remove-bottom" >
+          <div class="uk-position-cover" style=""></div>
+          <div class="uk-position-relative uk-panel">
+            <div class="uk-container uk-section">
+              <div>
+                <h3 class="uk-margin-remove-bottom uk-margin-large-top">Discover the power of OpenAIRE Connect community page builder</h3>
+                <h5 class="uk-margin-remove-top">Gather all your research in one place</h5>
+
+<!--                <div class="uk-width-medium uk-text-center uk-margin-large-top uk-margin-large-left">-->
+<!--                  <h5>Contact OpenAIRE team, in order to create your community page</h5>-->
+<!--                  <div>-->
+<!--                    <a class="uk-button portal-button" routerLinkActive="router-link-active" routerLink="/contact-us"> CONTACT US</a>-->
+<!--                  </div>-->
+<!--                </div>-->
+
+                <div class="uk-width-1-2 uk-inline uk-margin-large-top uk-margin-large-bottom">
+                    <div class="uk-position-center ">
+                        <div class="uk-width-medium uk-text-center">
+                            <h5>Contact OpenAIRE team, in order to create your community page</h5>
+                            <div>
+                                <a class="uk-button portal-button" routerLinkActive="router-link-active" routerLink="/contact-us"> CONTACT US</a>
+                            </div>
+                        </div>
+                    </div>
+                    <br>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <div>
+          <div #adminPortalImage class="uk-margin-bottom uk-margin-top">
+          <!--div uk-scrollspy="cls: uk-animation-fade uk-animation-reverse; target: > div > div > .uk-card; delay: 1000; repeat: false"-->
+              <div class="uk-container uk-margin-large-top">
+                <h3>OpenAIRE Connect community page builder at a glance</h3>
+                <div class="uk-inline uk-dark" (scroll)="scrollHandler($event)">
+                  <img  src="assets/admin-portal.png" alt="OpenAIRE" >
+
+                  <div id="logo" class="my-tooltip uk-card uk-card-secondary uk-position-absolute uk-transform-center"
+                        style="left: 27%; top: 2%" hidden>
+                    <div class="uk-padding-small uk-text-small uk-text-bold">Your logo goes here</div>
+                  </div>
+
+                  <div id="configure-profile" class="my-tooltip uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center"
+                        style="left: 33%; top: 21%" hidden>
+                    <div class="uk-padding-small uk-text-small uk-text-bold">Configure your community profile</div>
+                  </div>
+                  <div id="connect-with" class="my-tooltip uk-width-1-5 uk-card uk-text-center uk-card-secondary uk-position-absolute uk-transform-center"
+                        style="left: 56%; top: 18%" hidden>
+                    <div class="uk-padding-small uk-text-small uk-text-bold">Connect with subjects, projects, content providers & Zenodo communities</div>
+                  </div>
+                  <div id="choose-statistics" class="my-tooltip uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center"
+                        style="left: 80%; top: 19%" hidden>
+                    <div class="uk-padding-small uk-text-small uk-text-bold">Choose statistics and charts to be publicly available</div>
+                  </div>
+
+                  <div id="curate" class="my-tooltip uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center"
+                        style="left: 32%; top: 60%" hidden>
+                    <div class="uk-padding-small uk-text-small uk-text-bold">Curate links of research results</div>
+                  </div>
+                  <div id="help-texts" class="my-tooltip uk-width-1-5 uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center"
+                        style="left: 56%; top: 59%" hidden>
+                    <div class="uk-padding-small uk-text-small uk-text-bold">Add help texts in your pages for extra information</div>
+                  </div>
+                  <div id="invite" class="my-tooltip uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center"
+                        style="left: 80%; top: 60%" hidden>
+                    <div class="uk-padding-small uk-text-small uk-text-bold">Invite collaborators and users</div>
+                  </div>
+
+
+                  <!--[attr.uk-tooltip]="'title: ' + createTooltip('Your logo goes here')"-->
+                  <!--uk-toggle="target: #logo; mode: click"-->
+                  <a  class="uk-position-absolute uk-transform-center uk-icon uk-marker"
+                      style="left: 20%; top: 5%" uk-marker>
+                    <!--span uk-icon="plus"></span-->
+                    <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg>
+                  </a>
+
+                  <!--[attr.uk-tooltip]="'title: ' + createTooltip('Configure your community profile') + '; cls: conf-profile'"-->
+                  <!--class: configure-profile -->
+                  <a  class="uk-position-absolute uk-transform-center uk-icon uk-marker"
+                      style="left: 22%; top: 24%" uk-marker>
+                    <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg>
+                  </a>
+                  <!--[attr.uk-tooltip]="'title: ' + createTooltip('Connect with subjects, projects, content providers & Zenodo communities')"-->
+                  <a  class="uk-position-absolute uk-transform-center uk-icon uk-marker"
+                      style="left: 46%; top: 24%" uk-marker>
+                    <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg>
+                  </a>
+                  <!-- [attr.uk-tooltip]="'title: ' + createTooltip('Choose statistics and charts to be publicly available')"-->
+                  <a  class="uk-position-absolute uk-transform-center uk-icon uk-marker"
+                      style="left: 70%; top: 24%" uk-marker>
+                    <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg>
+                  </a>
+
+                  <!--[attr.uk-tooltip]="'title: ' + createTooltip('Curate links of research results')"-->
+                  <a  class="uk-position-absolute uk-transform-center uk-icon uk-marker"
+                      style="left: 22%; top: 64%" uk-marker>
+                    <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg>
+                  </a>
+                  <!--[attr.uk-tooltip]="'title: ' + createTooltip('Add help texts in your pages for extra information')"-->
+                  <a  class="uk-position-absolute uk-transform-center uk-icon uk-marker"
+                      style="left: 46%; top: 64%" uk-marker>
+                    <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg>
+                  </a>
+                  <!--[attr.uk-tooltip]="'title: ' + createTooltip('Invite collaborators and users')"-->
+                  <a  class="uk-position-absolute uk-transform-center uk-icon uk-marker"
+                      style="left: 70%; top: 64%" uk-marker>
+                    <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg>
+                  </a>
+
+                </div>
+              </div>
+          </div>
+
+          <div #communityImage class="uk-container uk-margin-large-top">
+            <h3>Community page</h3>
+            <div uk-grid uk-grid-match>
+              <div class="uk-width-1-3 uk-card">
+                <div class="uk-text-center uk-position-center ">
+                <p>Contact OpenAIRE team, in order to create your community page</p>
+                <div>
+                  <a class="uk-button portal-button" routerLinkActive="router-link-active" routerLink="/contact-us"> CONTACT US</a>
+                </div>
+                </div>
+              </div>
+              <div class="uk-width-2-3 uk-text-center">
+                <div class="uk-inline uk-dark">
+                  <img  src="assets/community-first-page.jpg" alt="OpenAIRE">
+
+                  <div id="community-content" class="my-tooltip uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center"
+                        style="left: 80%; top: 31%" hidden>
+                    <div class="uk-padding-small uk-text-small uk-text-bold">Community content at a glance</div>
+                  </div>
+                  <div id="locate-research-results" class="my-tooltip uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center"
+                        style="left: 57%; top: 38%" hidden>
+                    <div class="uk-padding-small uk-text-small uk-text-bold">Locate Research Results</div>
+                  </div>
+                  <div id="recent-research-results" class="my-tooltip uk-width-1-4 uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center"
+                        style="left: 48%; top: 58%" hidden>
+                    <div class="uk-padding-small uk-text-small uk-text-bold">Recent research results and related graphs</div>
+                  </div>
+
+                  <!--[attr.uk-tooltip]="'title: ' + createTooltip('Community content at a glance')"-->
+                  <a  class="uk-position-absolute uk-transform-center uk-icon uk-marker"
+                      style="right: 6%; top: 28%" uk-marker>
+                    <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg>
+                  </a>
+                  <!--[attr.uk-tooltip]="'title: ' + createTooltip('Locate Research Results')"-->
+                  <a  class="uk-position-absolute uk-transform-center uk-icon uk-marker"
+                      style="left: 45%; top: 40%" uk-marker>
+                    <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg>
+                  </a>
+                  <!--[attr.uk-tooltip]="'title: ' + createTooltip('Recent research results and related graphs')"-->
+                  <a  class="uk-position-absolute uk-transform-center uk-icon uk-marker"
+                      style="left: 35%; top: 55%" uk-marker>
+                    <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!--/div-->
+      </div>
+
+<!--<div class="uk-container">-->
+<!--      <a  class="configure-profile uk-icon uk-marker"-->
+<!--          uk-marker-->
+<!--          uk-tooltip="title: AAAAAAA 1">-->
+<!--        <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg>-->
+<!--      </a>-->
+<!--      <a  class="connect-with uk-icon uk-marker"-->
+<!--          uk-marker-->
+<!--          uk-tooltip="title: AAAAAAA 2">-->
+<!--        <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg>-->
+<!--      </a>-->
+<!--      <a  class="choose-statistics uk-icon uk-marker"-->
+<!--          uk-marker-->
+<!--          uk-tooltip="title: AAAAAAA 3">-->
+<!--        <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg>-->
+<!--      </a>-->
+
+<!--      <button (click)="openTooltips()">OPEN TOOLTIPS</button>-->
+
+
+<!--      <button type="button" uk-toggle="target: #my-id1; mode: hover; animation: uk-animation-fade">test tooltip</button>-->
+<!--      <p id="my-id1" class="test-tooltip">TEST tooltip1</p>-->
+
+<!--      <button (scroll)="scrollHandler($event)" type="button" uk-toggle="target: #my-id2; mode: hover; animation: uk-animation-fade">test tooltip</button>-->
+<!--      <p id="my-id2" class="test-tooltip" [attr.hidden]="hidden ? 'hidden' : null">TEST tooltip2</p>-->
+
+<!--      <button type="button" uk-toggle="target: #my-id3; mode: hover; animation: uk-animation-fade">test tooltip</button>-->
+<!--      <p id="my-id3"class="test-tooltip">TEST tooltip3</p>-->
+<!--</div>-->
+
+      <div class="uk-section-muted uk-margin-large-top">
+        <div class="uk-container uk-container-large">
+          <div class="uk-margin-large-top uk-margin-large-bottom">
+            <div class="uk-margin uk-panel">
+              <h4 class="uk-margin uk-h4 uk-text-bold">
+                Why trust OpenAIRE?
+              </h4>
+
+              <div  class="uk-child-width-1-3@m uk-grid-small uk-grid-match" uk-grid
+                    uk-scrollspy="target: > div; cls:uk-animation-fade; delay: 500">
+                <div>
+                    <div class="uk-card uk-card-default uk-card-body">
+                        <p class="">It is the Open Access Infrastructure for Europe.</p>
+                    </div>
+                </div>
+                <div>
+                    <div class="uk-card uk-card-default uk-card-body">
+                        <p>It is community based and independent.</p>
+                    </div>
+                </div>
+                <div>
+                    <div class="uk-card uk-card-default uk-card-body">
+                        <p>Provides organizational and technical framework to support OpenScience.</p>
+                    </div>
+                </div>
+                <div>
+                    <div class="uk-card uk-card-default uk-card-body">
+                        <p>Provides access to over 25 million research outputs and services that enable their access, link and reuse.</p>
+                    </div>
+                </div>
+                <div>
+                    <div class="uk-card uk-card-default uk-card-body">
+                        <p>Provides organizational and technical framework to support OpenScience.</p>
+                    </div>
+                </div>
+                <div>
+                    <div class="uk-card uk-card-default uk-card-body">
+                        <p>Ensures that all data come from trusted sources.</p>
+                    </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `
+  })
+
+export class CommunityCreationInstructionsComponent {
+  public piwiksub: any;
+
+  public pageTitle = "OpenAIRE"
+
+  public admin_portal_image_hidden: boolean = true;
+  @ViewChild('adminPortalImage') admin_portal_image: ElementRef;
+
+  public community_image_hidden: boolean = true;
+  @ViewChild('communityImage') community_image: ElementRef;
+
+  properties:EnvProperties;
+
+  constructor (
+      private route: ActivatedRoute,
+      private _router: Router,
+      private _title: Title,
+      private _piwikService:PiwikService) {
+
+          var description = "OpenAIRE - Connect, Community Dashboard, research community";
+          var title = "OpenAIRE - Connect | Create and manage your community page";
+          this._title.setTitle(title);
+  }
+
+  public ngOnInit() {
+    this.route.data
+          .subscribe((data: { envSpecific: EnvProperties }) => {
+            this.properties = data.envSpecific;
+            var url = data.envSpecific.baseLink+this._router.url;
+
+            if(this.properties.enablePiwikTrack && (typeof document !== 'undefined')){
+              this.piwiksub = this._piwikService.trackView(this.properties, "OpenAIRE Connect | Create and manage your community page", this.properties.piwikSiteId).subscribe();
+            }
+
+            //UIkit.tooltip('.configure-profile').show();
+          });
+  }
+
+/*
+  public openTooltips() {
+    console.debug("open these tooltips!");
+    UIkit.tooltip('.configure-profile').show();
+    UIkit.tooltip('.connect-with').show();
+    UIkit.tooltip('.choose-statistics').show();
+  }
+*/
+
+
+  public ngAfterViewInit() {
+    /* if (typeof document !== 'undefined') {
+
+      if (document.getElementById('enableFadeOutScrollScript')) {
+        document.getElementById('enableFadeOutScrollScript').remove();
+      }
+
+      const enableFadeOutScrollScript = document.createElement('script');
+      enableFadeOutScrollScript.setAttribute('id', 'enableFadeOutScrollScript');
+      enableFadeOutScrollScript.innerHTML = '\n' +
+      '$(document).ready(function() {\n' +
+      '\n' +
+      '             $(window).scroll( function(){\n' +
+      '\n' +
+      '                 $(\'.my-tooltip\').each( function(i){\n' +
+      '\n' +
+      '                     var bottom_of_object = $(this).position().top + $(this).outerHeight();\n' +
+      '                     var bottom_of_window = $(window).scrollTop() + $(window).height();\n' +
+      '\n' +
+      '                     if( bottom_of_window > bottom_of_object ){\n' +
+      '\n' +
+      '                         $(this).animate({\'opacity\':\'1\'},1500);\n' +
+      //'\n' + 'this.hidden = true;' +
+      '\n' +
+      '                     }\n' +
+      '\n' +
+      '                 });\n' +
+      '\n' +
+      '             });\n' +
+      '\n' +
+      '         });';
+
+      document.body.appendChild(enableFadeOutScrollScript);
+*/
+      /*UIkit.util.on('#logo', 'beforehide', function () {
+        // do something
+        if(this.hide =http://www.equp4.wf/= false) {
+          return false;
+        }
+      });
+    }*/
+  }
+
+
+
+  @HostListener('window:scroll', ['$event'])
+  scrollHandler(event) {
+    let offsetHeight = document.getElementById('stickyNavbar').offsetHeight;
+    let scrollPosition = window.pageYOffset;
+
+    let admin_portal_image_idsToToggle: string[] = ['#logo', '#configure-profile', '#choose-statistics', '#connect-with', '#curate', '#help-texts', '#invite'];
+    let adminPortalImageHeight = this.admin_portal_image.nativeElement.offsetHeight;
+    let adminPortalImagePosition = this.admin_portal_image.nativeElement.offsetTop - offsetHeight;
+
+    if(!this.admin_portal_image_hidden
+        && ((scrollPosition >= 0.7*adminPortalImagePosition+adminPortalImageHeight) || scrollPosition < 0.7*adminPortalImagePosition)) {
+      this.admin_portal_image_hidden = true;
+      admin_portal_image_idsToToggle.forEach((id: string) => {
+        UIkit.toggle(id, {
+          animation: 'uk-animation-fade uk-animation-reverse',
+          duration: 1500
+        }).toggle();
+      });
+    } else if (this.admin_portal_image_hidden && (scrollPosition >= 0.7*adminPortalImagePosition)) {
+      this.admin_portal_image_hidden = false;
+      admin_portal_image_idsToToggle.forEach((id: string) => {
+        UIkit.toggle(id, {
+          animation: 'uk-animation-fade',
+          duration: 1500
+        }).toggle();
+      });
+    }
+
+    let community_image_idsToToggle: string[] = ['#community-content', '#locate-research-results', '#recent-research-results'];
+    let communityImageHeight = this.community_image.nativeElement.offsetHeight;
+    let communityImagePosition = this.community_image.nativeElement.offsetTop - offsetHeight;
+
+    if(!this.community_image_hidden
+      && ((scrollPosition >= 0.9*communityImagePosition+communityImageHeight) || scrollPosition < 0.9*communityImagePosition)) {
+      this.community_image_hidden = true;
+      community_image_idsToToggle.forEach((id: string) => {
+        UIkit.toggle(id, {
+          animation: 'uk-animation-fade uk-animation-reverse',
+          duration: 1500
+        }).toggle();
+      });
+    } else if (this.community_image_hidden && (scrollPosition >= 0.9*communityImagePosition)) {
+      this.community_image_hidden = false;
+      community_image_idsToToggle.forEach((id: string) => {
+        UIkit.toggle(id, {
+          animation: 'uk-animation-fade',
+          duration: 1500
+        }).toggle();
+      });
+    }
+  }
+
+  public ngOnDestroy() {
+    if(this.piwiksub){
+      this.piwiksub.unsubscribe();
+    }
+  }
+
+  public createTooltip(content: string) : string {
+    return "<div class=\"uk-text-center uk-text-bold uk-padding-small\">"+content+"</div>";
+  }
+}
diff --git a/src/app/createCommunity/community-creation-instructions.module.ts b/src/app/createCommunity/community-creation-instructions.module.ts
new file mode 100644
index 0000000..487daf9
--- /dev/null
+++ b/src/app/createCommunity/community-creation-instructions.module.ts
@@ -0,0 +1,26 @@
+import { NgModule}      from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+
+import {FreeGuard}      from '../openaireLibrary/login/freeGuard.guard';
+import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
+import {PiwikService}          from '../openaireLibrary/utils/piwik/piwik.service';
+
+import {CommunityCreationInstructionsComponent}     from './community-creation-instructions.component';
+import {CommunityCreationInstructionsRoutingModule} from './community-creation-instructions-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule, RouterModule, CommunityCreationInstructionsRoutingModule
+  ],
+  declarations: [
+    CommunityCreationInstructionsComponent
+  ],
+  exports: [
+    CommunityCreationInstructionsComponent
+  ],
+  providers:[
+    FreeGuard, PreviousRouteRecorder, PiwikService
+  ]
+})
+export class CommunityCreationInstructionsModule { }
diff --git a/src/app/curators/curators-routing.module.ts b/src/app/curators/curators-routing.module.ts
new file mode 100644
index 0000000..590a7b7
--- /dev/null
+++ b/src/app/curators/curators-routing.module.ts
@@ -0,0 +1,15 @@
+import { NgModule}      from '@angular/core';
+import { RouterModule } from '@angular/router';
+import {CuratorsComponent} from "./curators.component";
+import {IsRouteEnabled} from "../openaireLibrary/error/isRouteEnabled.guard";
+import {PreviousRouteRecorder} from "../openaireLibrary/utils/piwik/previousRouteRecorder.guard";
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      { path: '', component: CuratorsComponent, canActivate: [IsRouteEnabled], canDeactivate: [PreviousRouteRecorder]}
+    ])
+  ]
+})
+export class CuratorsRoutingModule {
+}
diff --git a/src/app/curators/curators.component.html b/src/app/curators/curators.component.html
new file mode 100644
index 0000000..f496d6f
--- /dev/null
+++ b/src/app/curators/curators.component.html
@@ -0,0 +1,142 @@
+<schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other"></schema2jsonld>
+
+<ng-container *ngIf="longView else shortView">
+  <div class="image-front-topbar  uk-section-default uk-position-relative"
+       uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}"
+       tm-header-transparent="light">
+    <div style=" min-height: 650px;" class="uk-section uk-padding-remove-bottom uk-flex uk-flex-middle">
+      <div class="uk-align-center">
+        <div class="uk-section">
+          <div class="uk-container">
+            <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
+                    [texts]="pageContents['top']"></helper>
+            <div *ngIf="showLoading" class="uk-margin-large">
+              <div class="uk-animation-fade uk-margin-top  uk-width-1-1" role="alert"><span
+                class="loading-gif  uk-align-center"></span></div>
+            </div>
+            <div *ngIf="!showLoading && curators.length > 0">
+              <h4 class="uk-margin-top uk-h4">
+                <span class="uk-text-bold">Curators</span>
+                <span> ({{curators.length}})</span>
+              </h4>
+              <div *ngFor="let curator of curators let i=index;"
+                   class="uk-width-1-1 uk-card uk-card-default uk-card-body uk-margin-top uk-animation-slide-top">
+                <div
+                  [class]="(curator.affiliations.length > 0 && curator.affiliations.length <= 2)?'uk-grid-divider uk-flex uk-flex-middle':''"
+                  uk-grid>
+
+                  <div class="uk-width-1-2 uk-first-column">
+                    <div class="uk-flex uk-flex-middle">
+                      <div>
+                        <img *ngIf="curator.photo && curator.photo !== ''" class="uk-border-circle curator-photo"
+                             src="{{downloadUrl + curator.photo}}" alt="Curator Photo">
+                        <img *ngIf="!curator.photo || curator.photo == ''" class="uk-border-circle curator-photo"
+                             src="../../assets/common-assets/curator-default.png" alt="Curator Photo">
+                      </div>
+                      <div class="uk-width-expand uk-margin-left uk-text-bold">
+                        {{curator.name}}
+                      </div>
+                    </div>
+                  </div>
+
+
+                  <div *ngIf="(curator.affiliations.length > 0 && curator.affiliations.length <= 2)"
+                       class="uk-width-1-2">
+                    <div class="uk-flex uk-flex-middle">
+                      <div class="uk-width-expand uk-margin-left uk-text-meta uk-flex-first">
+                        Affiliations
+                      </div>
+                      <affiliations [longView]="false" [affiliations]="curator.affiliations"
+                                    [affiliationsInSlider]="curator.affiliations.length"
+                                    class="uk-width-2-3"></affiliations>
+                    </div>
+                  </div>
+
+                  <div *ngIf="(curator.affiliations.length > 2)" class="uk-width-1-1 uk-margin-top">
+                    <div class="uk-text-meta uk-margin-small-bottom">
+                      Affiliations
+                    </div>
+                    <affiliations [longView]="false" [affiliations]="curator.affiliations"></affiliations>
+                  </div>
+                  <div class="uk-width-1-1 uk-first-column uk-margin-top uk-height-max-large uk-overflow-auto">
+                    <div class="uk-text-meta uk-margin-small-bottom">
+                      Biography
+                    </div>
+                    <div class="uk-margin-top">
+                      <p *ngIf="showMore[i]" class="biography"> {{curator.bio}}}</p>
+                      <p *ngIf="!showMore[i]" class="biography">{{_format(curator.bio)}}</p>
+                    </div>
+                  </div>
+                  <div class="uk-width-1-1 uk-margin-top uk-text-right">
+                    <a *ngIf="curator.bio.length > maxCharacters && !showMore[i]" class="uk-text-bold"
+                       (click)="toggle(i)">
+                      Show more
+                    </a>
+                    <a *ngIf="curator.bio.length > maxCharacters && showMore[i]" class="uk-text-bold"
+                       (click)="toggle(i)">
+                      Show less
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
+                    [texts]="pageContents['bottom']"></helper>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</ng-container>
+<ng-template #shortView>
+   <span *ngIf=" curators && curators.length > 0" class="lowOpacityColor  uk-width-1-1">
+      Curators
+    </span>
+  <div class="uk-grid">
+    <div *ngFor="let curator of curators let i=index;" class="uk-flex uk-flex-middle uk-width-1-2 uk-margin-small-top">
+      <div>
+        <img *ngIf="curator.photo && curator.photo !== ''" class="uk-border-circle curator-photo"
+             src="{{downloadUrl + curator.photo}}" alt="Curator Photo">
+        <img *ngIf="!curator.photo || curator.photo == ''" class="uk-border-circle curator-photo"
+             src="../../assets/common-assets/curator-default.png" alt="Curator Photo">
+      </div>
+      <div class="uk-width-expand uk-margin-left">
+        <a>{{curator.name}}</a>
+        <div class="default-dropdown uk-margin-remove-top uk-padding-medium uk-width-medium"
+             uk-dropdown="pos: bottom-left; mode:click; ">
+          <div class="uk-grid uk-grid-stack">
+            <div class="uk-first-column uk-flex uk-flex-middle uk-grid">
+              <div>
+                <img *ngIf="curator.photo && curator.photo !== ''" class="uk-border-circle curator-photo"
+                     src="{{downloadUrl + curator.photo}}" alt="Curator Photo">
+                <img *ngIf="!curator.photo || curator.photo == ''" class="uk-border-circle curator-photo"
+                     src="../../assets/common-assets/curator-default.png" alt="Curator Photo">
+              </div>
+              <div class="uk-width-expand uk-h5 ignoreCommunityPanelBackground">
+                {{curator.name}}
+              </div>
+            </div>
+            <div *ngIf="curator.affiliations.length > 0" class="uk-width-1-1">
+              <hr class="uk-margin-top">
+              <span class="uk-text-left  uk-margin">
+                Affiliations
+              </span>
+              <span> ({{curator.affiliations.length}})</span>
+              <div class="uk-width-1-1">
+                <affiliations [affiliations]="curator.affiliations"
+                              [affiliationsInSlider]="2"
+                              [arrows]="false"
+                              [sliderOptions]="'autoplay: true; autoplay-interval: 2000'"></affiliations>
+              </div>
+            </div>
+            <div class="uk-width-1-1">
+              <a routerLink="/curators" class="uk-align-right uk-link ignoreCommunityPanelBackground">
+                View more details
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</ng-template>
diff --git a/src/app/curators/curators.component.ts b/src/app/curators/curators.component.ts
new file mode 100644
index 0000000..c3667be
--- /dev/null
+++ b/src/app/curators/curators.component.ts
@@ -0,0 +1,148 @@
+import {Component, Input} from '@angular/core';
+import {EnvProperties}    from '../openaireLibrary/utils/properties/env-properties';
+import {CuratorService} from "../openaireLibrary/connect/curators/curator.service";
+import {Curator} from "../openaireLibrary/utils/entities/CuratorInfo";
+import {ActivatedRoute, Router} from "@angular/router";
+import {CommunitiesService} from "../openaireLibrary/connect/communities/communities.service";
+import {ConnectHelper} from "../openaireLibrary/connect/connectHelper";
+import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
+import {HelperService} from "../openaireLibrary/utils/helper/helper.service";
+import {Meta, Title} from "@angular/platform-browser";
+import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
+import {PiwikService} from "../openaireLibrary/utils/piwik/piwik.service";
+import {PiwikHelper} from "../utils/piwikHelper";
+
+@Component({
+  selector: 'curators',
+  templateUrl: './curators.component.html'
+
+})
+
+export class CuratorsComponent {
+  @Input() managers: string[];
+  @Input() communityId = null;
+  @Input() longView = true;
+  public downloadUrl = null;
+  public showLoading = true;
+
+  public curators: Curator[];
+
+  public showMore = [];
+  public maxCharacters = 500;
+
+  public properties: EnvProperties;
+  public pageContents = null;
+  public divContents = null;
+
+  public piwiksub: any;
+  public url: string = null;
+  public pageTitle: string = "Curators";
+
+  constructor (private route: ActivatedRoute,
+               private curatorsService: CuratorService,
+               private communitiesService: CommunitiesService,
+               private _router: Router,
+               private helper: HelperService,
+               private _meta: Meta,
+               private _title: Title,
+               private seoService: SEOService,
+               private _piwikService: PiwikService) {}
+
+  ngOnInit() {
+    this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {
+      this.showLoading = true;
+      this.properties = data.envSpecific;
+      if(this.longView) {
+        if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
+          this.piwiksub = this._piwikService.trackView(this.properties, this.pageTitle, PiwikHelper.getSiteId(this.communityId, this.properties.environment)).subscribe();
+        }
+        this.url = this.properties.baseLink + this._router.url;
+        this.seoService.createLinkForCanonicalURL(this.url);
+        this.updateUrl(this.url);
+        this.updateTitle(this.pageTitle);
+        this.updateDescription("OpenAIRE - Connect, Community Gateway, research community");
+      }
+      this.downloadUrl = this.properties.utilsService + '/download/';
+      if(!this.longView) {
+        let emails = this.managers.join();
+        this.curatorsService.getCurators(this.properties,
+          this.properties.adminToolsAPIURL + '/curator?emails=' + emails).subscribe(curators => {
+          this.curators = curators;
+          for(let i = 0; i < this.curators.length; i++) {
+            this.showMore[i]= false;
+          }
+          this.showLoading = false;
+          HelperFunctions.scroll();
+        })
+      } else {
+        this.route.queryParams.subscribe(data => {
+          this.communityId  = ConnectHelper.getCommunityFromDomain(this.properties.domain);
+          if(!this.communityId) {
+            this.communityId = data['communityId'];
+          }
+          //this.getDivContents();
+          this.getPageContents();
+          this.communitiesService.getCommunities(this.properties,
+            this.properties.communityAPI + this.communityId).subscribe(community => {
+              this.managers = community[0].managers;
+              let emails = this.managers.join();
+              this.curatorsService.getCurators(this.properties,
+                this.properties.adminToolsAPIURL + '/curator?emails=' + emails).subscribe(curators => {
+                this.curators = curators;
+                for(let i = 0; i < this.curators.length; i++) {
+                  this.showMore[i]= false;
+                }
+                this.showLoading = false;
+                HelperFunctions.scroll();
+              });
+          })
+        });
+      }
+    });
+  }
+
+  ngOnDestroy() {
+    if(this.piwiksub) {
+      this.piwiksub.unsubscribe();
+    }
+  }
+
+  private getPageContents() {
+    this.helper.getPageHelpContents(this._router.url, this.properties, 'connect').subscribe(contents => {
+      this.pageContents = contents;
+    })
+  }
+
+  private getDivContents() {
+    this.helper.getDivHelpContents(this._router.url, this.properties, 'connect').subscribe(contents => {
+      this.divContents = contents;
+    })
+  }
+
+  public toggle(index: number) {
+    this.showMore[index] = !this.showMore[index];
+  }
+
+  _format(name: string){
+    if(name) {
+      return (((name).length > this.maxCharacters) ? (name.substring(0, (this.maxCharacters - ('...').length)) + '...') : name);
+    } else {
+      return null;
+    }
+  }
+
+  private updateDescription(description: string) {
+    this._meta.updateTag({content: description}, "name='description'");
+    this._meta.updateTag({content: description}, "property='og:description'");
+  }
+
+  private updateTitle(title: string) {
+    var _title = ((title.length > 50) ? title.substring(0, 50) : title);
+    this._title.setTitle(_title);
+    this._meta.updateTag({content: _title}, "property='og:title'");
+  }
+
+  private updateUrl(url: string) {
+    this._meta.updateTag({content: url}, "property='og:url'");
+  }
+}
diff --git a/src/app/curators/curators.module.ts b/src/app/curators/curators.module.ts
new file mode 100644
index 0000000..700946a
--- /dev/null
+++ b/src/app/curators/curators.module.ts
@@ -0,0 +1,30 @@
+import { NgModule} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule }  from '@angular/forms';
+import { RouterModule } from '@angular/router';
+
+import {CuratorsComponent} from './curators.component';
+import {CuratorService} from "../openaireLibrary/connect/curators/curator.service";
+import {CuratorsRoutingModule} from "./curators-routing.module";
+import {AffiliationsModule} from "../affiliations/affiliations.module";
+import {HelperModule} from "../openaireLibrary/utils/helper/helper.module";
+import {Schema2jsonldModule} from "../openaireLibrary/sharedComponents/schema2jsonld/schema2jsonld.module";
+import {SEOServiceModule} from "../openaireLibrary/sharedComponents/SEO/SEOService.module";
+import {PiwikService} from "../openaireLibrary/utils/piwik/piwik.service";
+import {PiwikServiceModule} from "../openaireLibrary/utils/piwik/piwikService.module";
+
+@NgModule({
+  imports: [
+    CommonModule, FormsModule, RouterModule,
+    CuratorsRoutingModule, AffiliationsModule, HelperModule,
+    Schema2jsonldModule, SEOServiceModule, PiwikServiceModule
+  ],
+  declarations: [
+    CuratorsComponent
+  ],
+  providers: [CuratorService],
+  exports: [
+    CuratorsComponent
+  ]
+})
+export class CuratorsModule {}
diff --git a/src/app/deposit/datasets/depositBySubjectResult-routing.module.ts b/src/app/deposit/datasets/depositBySubjectResult-routing.module.ts
deleted file mode 100644
index 48d594c..0000000
--- a/src/app/deposit/datasets/depositBySubjectResult-routing.module.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { OpenaireDepositBySubjectResultComponent } from './depositBySubjectResult.component';
-import {FreeGuard} from '../../openaireLibrary/login/freeGuard.guard';
-import {PreviousRouteRecorder} from '../../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
-import {IsRouteEnabled} from '../../openaireLibrary/error/isRouteEnabled.guard';
-
-@NgModule({
-  imports: [
-    RouterModule.forChild([
-     	{ path: '', component: OpenaireDepositBySubjectResultComponent, canActivate: [FreeGuard, IsRouteEnabled], data: {
-          redirect: '/error' 
-        },canDeactivate: [PreviousRouteRecorder]   }
-
-    ])
-  ]
-})
-export class DepositBySubjectResultsRoutingModule { }
diff --git a/src/app/deposit/datasets/depositBySubjectResult.component.ts b/src/app/deposit/datasets/depositBySubjectResult.component.ts
deleted file mode 100644
index ae65ba2..0000000
--- a/src/app/deposit/datasets/depositBySubjectResult.component.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import {Component, Input} from '@angular/core';
-import {Observable}       from 'rxjs/Observable';
-import {PiwikHelper} from '../../utils/piwikHelper';
-import {ConnectHelper} from '../../openaireLibrary/connect/connectHelper';
-
-
-@Component({
-    selector: 'openaire-deposit-by-subject-result',
-    template:`<deposit-by-subject-result [piwikSiteId]=piwikSiteId></deposit-by-subject-result>`
-})
-
-export class OpenaireDepositBySubjectResultComponent {
-  piwikSiteId = null;
-  constructor (  ) {
-    var communityId = ConnectHelper.getCommunityFromDomain(document.location.hostname);
-    this.piwikSiteId = PiwikHelper.siteIDs[communityId];
-  }
-
-}
diff --git a/src/app/deposit/datasets/depositBySubjectResults.module.ts b/src/app/deposit/datasets/depositBySubjectResults.module.ts
deleted file mode 100644
index 63815f7..0000000
--- a/src/app/deposit/datasets/depositBySubjectResults.module.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { NgModule }            from '@angular/core';
-import { CommonModule }        from '@angular/common';
-import { FormsModule }         from '@angular/forms';
-
-import { OpenaireDepositBySubjectResultComponent } from './depositBySubjectResult.component';
-
-import {DepositBySubjectResultsRoutingModule} from './depositBySubjectResult-routing.module';
-import {DepositBySubjectResultsModule  } from '../../openaireLibrary/deposit/datasets/depositBySubjectResults.module';
-import {FreeGuard} from '../../openaireLibrary/login/freeGuard.guard';
-import {PreviousRouteRecorder} from '../../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
-import {IsRouteEnabled} from '../../openaireLibrary/error/isRouteEnabled.guard'
-
-@NgModule({
-  imports: [
-    CommonModule, FormsModule,
-    DepositBySubjectResultsModule,
-    DepositBySubjectResultsRoutingModule
-  ],
-  declarations: [
-
-    OpenaireDepositBySubjectResultComponent
-
-  ],
-  exports: [
-    OpenaireDepositBySubjectResultComponent
-   ],
-  providers:    [FreeGuard,PreviousRouteRecorder, IsRouteEnabled]
-})
-export class LibDepositBySubjectResultsModule { }
diff --git a/src/app/deposit/datasets/depositDatasets.component.ts b/src/app/deposit/datasets/depositDatasets.component.ts
deleted file mode 100644
index b52a8b0..0000000
--- a/src/app/deposit/datasets/depositDatasets.component.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import {Component, Input} from '@angular/core';
-import {PiwikHelper} from '../../utils/piwikHelper';
-import {ConnectHelper} from '../../openaireLibrary/connect/connectHelper';
-
-@Component({
-    selector: 'openaire-deposit-datasets',
-    template: `
-    <deposit-datasets [piwikSiteId]=piwikSiteId>
-
-</deposit-datasets>
-    `
-})
-
-export class OpenaireDepositDatasetsComponent {
-  piwikSiteId = null;
-  constructor (  ) {
-    var communityId = ConnectHelper.getCommunityFromDomain(document.location.hostname);
-    this.piwikSiteId = PiwikHelper.siteIDs[communityId];
-  }
-
-}
diff --git a/src/app/deposit/datasets/depositDatasets.module.ts b/src/app/deposit/datasets/depositDatasets.module.ts
deleted file mode 100644
index 257a1e3..0000000
--- a/src/app/deposit/datasets/depositDatasets.module.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { NgModule }            from '@angular/core';
-import { CommonModule }        from '@angular/common';
-import { FormsModule }         from '@angular/forms';
-
-import { OpenaireDepositDatasetsComponent } from './depositDatasets.component';
- import {DepositDatasetsRoutingModule} from './depositDatasets-routing.module';
-import {DepositDatasetsModule} from '../../openaireLibrary/deposit/datasets/depositDatasets.module';
-import {FreeGuard} from '../../openaireLibrary/login/freeGuard.guard';
-import {PreviousRouteRecorder} from '../../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
-import {IsRouteEnabled} from '../../openaireLibrary/error/isRouteEnabled.guard'
-@NgModule({
-  imports: [
-    CommonModule, FormsModule,
-    DepositDatasetsModule,
-    DepositDatasetsRoutingModule
-  ],
-  declarations: [
-
-    OpenaireDepositDatasetsComponent
-
-  ],
-  exports: [
-    OpenaireDepositDatasetsComponent
-   ],
-  providers:    [FreeGuard,PreviousRouteRecorder, IsRouteEnabled]
-})
-export class LibDepositDatasetsModule { }
diff --git a/src/app/deposit/datasets/depositDatasetsResult.component.ts b/src/app/deposit/datasets/depositDatasetsResult.component.ts
deleted file mode 100644
index 4bbad41..0000000
--- a/src/app/deposit/datasets/depositDatasetsResult.component.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import {Component, Input} from '@angular/core';
-import {PiwikHelper} from '../../utils/piwikHelper';
-import {ConnectHelper} from '../../openaireLibrary/connect/connectHelper';
-
-@Component({
-    selector: 'openaire-deposit-datasets-result',
-    template: `
-        <deposit-datasets-result [piwikSiteId]=piwikSiteId></deposit-datasets-result>
-
-
-    `
-})
-
-export class OpenaireDepositDatasetsResultComponent {
-  piwikSiteId = null;
-  constructor (  ) {
-    var communityId = ConnectHelper.getCommunityFromDomain(document.location.hostname);
-    this.piwikSiteId = PiwikHelper.siteIDs[communityId];
-  }
-
-}
diff --git a/src/app/deposit/datasets/depositDatasetsResults-routing.module.ts b/src/app/deposit/datasets/depositDatasetsResults-routing.module.ts
deleted file mode 100644
index 5220e14..0000000
--- a/src/app/deposit/datasets/depositDatasetsResults-routing.module.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { OpenaireDepositDatasetsResultComponent } from './depositDatasetsResult.component';
-import {FreeGuard} from '../../openaireLibrary/login/freeGuard.guard';
-import {PreviousRouteRecorder} from '../../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
-import {IsRouteEnabled} from '../../openaireLibrary/error/isRouteEnabled.guard';
-
-@NgModule({
-  imports: [
-    RouterModule.forChild([
-     	{ path: '', component: OpenaireDepositDatasetsResultComponent, canActivate: [FreeGuard, IsRouteEnabled], data: {
-          redirect: '/error' 
-        },canDeactivate: [PreviousRouteRecorder]  }
-
-    ])
-  ]
-})
-export class DepositDatasetsResultsRoutingModule { }
diff --git a/src/app/deposit/datasets/depositDatasetsResults.module.ts b/src/app/deposit/datasets/depositDatasetsResults.module.ts
deleted file mode 100644
index 1843d32..0000000
--- a/src/app/deposit/datasets/depositDatasetsResults.module.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { NgModule }            from '@angular/core';
-import { CommonModule }        from '@angular/common';
-import { FormsModule }         from '@angular/forms';
-
-import { OpenaireDepositDatasetsResultComponent } from './depositDatasetsResult.component';
-
-import {DepositDatasetsResultsRoutingModule} from './depositDatasetsResults-routing.module';
-import {DepositDatasetsResultsModule} from '../../openaireLibrary/deposit/datasets/depositDatasetsResults.module';
-import {FreeGuard} from '../../openaireLibrary/login/freeGuard.guard';
-import {PreviousRouteRecorder} from '../../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
-import {IsRouteEnabled} from '../../openaireLibrary/error/isRouteEnabled.guard'
-
-@NgModule({
-  imports: [
-    CommonModule, FormsModule,
-    DepositDatasetsResultsModule,
-    DepositDatasetsResultsRoutingModule
-  ],
-  declarations: [
-
-    OpenaireDepositDatasetsResultComponent,
-
-  ],
-  exports: [
-    OpenaireDepositDatasetsResultComponent,
-   ],
-  providers:    [FreeGuard,PreviousRouteRecorder, IsRouteEnabled]
-})
-export class LibDepositDatasetsResultsModule { }
diff --git a/src/app/deposit/publications/depositPublications.component.ts b/src/app/deposit/publications/depositPublications.component.ts
deleted file mode 100644
index 99a4580..0000000
--- a/src/app/deposit/publications/depositPublications.component.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import {Component, Input} from '@angular/core';
-import {PiwikHelper} from '../../utils/piwikHelper';
-import {ConnectHelper} from '../../openaireLibrary/connect/connectHelper';
-
-@Component({
-    selector: 'openaire-deposit-publications',
-    template: `
-    <deposit-publications [piwikSiteId]=piwikSiteId></deposit-publications>
-    `
-})
-
-export class OpenaireDepositPublicationsComponent {
-  piwikSiteId = null;
-  constructor (  ) {
-    var communityId = ConnectHelper.getCommunityFromDomain(document.location.hostname);
-    this.piwikSiteId = PiwikHelper.siteIDs[communityId];
-  }
-
- }
diff --git a/src/app/deposit/publications/depositPublications.module.ts b/src/app/deposit/publications/depositPublications.module.ts
deleted file mode 100644
index b019607..0000000
--- a/src/app/deposit/publications/depositPublications.module.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { NgModule }            from '@angular/core';
-import { CommonModule }        from '@angular/common';
-import { FormsModule }         from '@angular/forms';
-
-import { OpenaireDepositPublicationsComponent } from './depositPublications.component';
-
-import {DepositPublicationsRoutingModule} from './depositPublications-routing.module';
-import {DepositPublicationsModule} from '../../openaireLibrary/deposit/publications/depositPublications.module';
-import {FreeGuard} from '../../openaireLibrary/login/freeGuard.guard';
-import {PreviousRouteRecorder} from '../../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
-import {IsRouteEnabled} from '../../openaireLibrary/error/isRouteEnabled.guard'
-@NgModule({
-  imports: [
-    CommonModule, FormsModule,
-    DepositPublicationsModule,
-    DepositPublicationsRoutingModule
-  ],
-  declarations: [
-    OpenaireDepositPublicationsComponent
-  ],
-  exports: [
-    OpenaireDepositPublicationsComponent,
-   ],
-  providers:    [FreeGuard,PreviousRouteRecorder, IsRouteEnabled]
-})
-export class LibDepositPublicationsModule { }
diff --git a/src/app/deposit/publications/depositPublicationsResult-routing.module.ts b/src/app/deposit/publications/depositPublicationsResult-routing.module.ts
deleted file mode 100644
index 34aacb6..0000000
--- a/src/app/deposit/publications/depositPublicationsResult-routing.module.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { OpenaireDepositPublicationsResultComponent } from './depositPublicationsResult.component';
-import {FreeGuard} from '../../openaireLibrary/login/freeGuard.guard';
-import {PreviousRouteRecorder} from '../../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
-import {IsRouteEnabled} from '../../openaireLibrary/error/isRouteEnabled.guard'
-
-@NgModule({
-  imports: [
-    RouterModule.forChild([
-      { path: '', component: OpenaireDepositPublicationsResultComponent, canActivate: [FreeGuard, IsRouteEnabled], data: {
-          redirect: '/error' 
-        }, canDeactivate: [PreviousRouteRecorder] }
-
-    ])
-  ]
-})
-export class DepositPublicationsResultRoutingModule { }
diff --git a/src/app/deposit/publications/depositPublicationsResult.component.ts b/src/app/deposit/publications/depositPublicationsResult.component.ts
deleted file mode 100644
index 3051d67..0000000
--- a/src/app/deposit/publications/depositPublicationsResult.component.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import {Component, Input} from '@angular/core';
-import {PiwikHelper} from '../../utils/piwikHelper';
-import {ConnectHelper} from '../../openaireLibrary/connect/connectHelper';
-
-@Component({
-    selector: 'openaire-deposit-publications-result',
-    template: `
-        <deposit-publications-result [piwikSiteId]=piwikSiteId></deposit-publications-result>
-    `
-})
-
-export class OpenaireDepositPublicationsResultComponent {
-  piwikSiteId = null;
-  constructor (  ) {
-    var communityId = ConnectHelper.getCommunityFromDomain(document.location.hostname);
-    this.piwikSiteId = PiwikHelper.siteIDs[communityId];
-  }
-
-
-}
diff --git a/src/app/deposit/publications/depositPublicationsResults.module.ts b/src/app/deposit/publications/depositPublicationsResults.module.ts
deleted file mode 100644
index b8411c8..0000000
--- a/src/app/deposit/publications/depositPublicationsResults.module.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { NgModule }            from '@angular/core';
-import { CommonModule }        from '@angular/common';
-import { FormsModule }         from '@angular/forms';
-
-import { OpenaireDepositPublicationsResultComponent } from './depositPublicationsResult.component';
-
-import {DepositPublicationsResultRoutingModule} from './depositPublicationsResult-routing.module';
-import {DepositPublicationsResultsModule} from '../../openaireLibrary/deposit/publications/depositPublicationsResults.module';
-import {FreeGuard} from '../../openaireLibrary/login/freeGuard.guard';
-import {PreviousRouteRecorder} from '../../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
-import {IsRouteEnabled} from '../../openaireLibrary/error/isRouteEnabled.guard'
-@NgModule({
-  imports: [
-    CommonModule, FormsModule,
-    DepositPublicationsResultsModule,
-    DepositPublicationsResultRoutingModule
-  ],
-  declarations: [
-    OpenaireDepositPublicationsResultComponent
-  ],
-  exports: [
-    OpenaireDepositPublicationsResultComponent
-   ],
-  providers:    [FreeGuard,PreviousRouteRecorder, IsRouteEnabled]
-})
-export class LibDepositPublicationsResultsModule { }
diff --git a/src/app/error/errorPage.component.ts b/src/app/error/errorPage.component.ts
deleted file mode 100644
index e96d3dc..0000000
--- a/src/app/error/errorPage.component.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { Location } from '@angular/common';
-  
-@Component({
-    selector: 'openaire-error',
-    template: `
-    <error></error>
-    `
-})
-
-export class OpenaireErrorPageComponent {
-
-}
diff --git a/src/app/funders/funder/funder.component.ts b/src/app/funders/funder/funder.component.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/helper-test/helper-test.component.html b/src/app/helper-test/helper-test.component.html
new file mode 100644
index 0000000..6a3a073
--- /dev/null
+++ b/src/app/helper-test/helper-test.component.html
@@ -0,0 +1 @@
+<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0" [texts]="pageContents['top']"></helper>
diff --git a/src/app/helper-test/helper-test.component.ts b/src/app/helper-test/helper-test.component.ts
new file mode 100644
index 0000000..eb021f4
--- /dev/null
+++ b/src/app/helper-test/helper-test.component.ts
@@ -0,0 +1,37 @@
+import {Component, OnInit} from '@angular/core';
+import {EnvProperties} from "../openaireLibrary/utils/properties/env-properties";
+import {ActivatedRoute, Router} from "@angular/router";
+import {HelperService} from "../openaireLibrary/utils/helper/helper.service";
+
+
+@Component({
+  selector: 'theme',
+  templateUrl: 'helper-test.component.html',
+})
+
+export class HelperTestComponent implements OnInit{
+
+  public pageContents = null;
+  properties:EnvProperties;
+
+  constructor(private route: ActivatedRoute,
+              private _router: Router,
+              private helper: HelperService) {
+
+  }
+
+  ngOnInit(): void {
+    this.route.data
+      .subscribe((data: { envSpecific: EnvProperties }) => {
+        this.properties = data.envSpecific;
+        this.getPageContents();
+      });
+  }
+
+  private getPageContents() {
+    this.helper.getPageHelpContents(this._router.url, this.properties, 'connect').subscribe(contents => {
+      this.pageContents = contents;
+    })
+  }
+
+}
diff --git a/src/app/helper-test/helper-test.module.ts b/src/app/helper-test/helper-test.module.ts
new file mode 100644
index 0000000..48513ad
--- /dev/null
+++ b/src/app/helper-test/helper-test.module.ts
@@ -0,0 +1,27 @@
+import { NgModule }            from '@angular/core';
+
+import {HelperModule} from "../openaireLibrary/utils/helper/helper.module";
+import {HelperTestComponent} from "./helper-test.component";
+import {CommonModule} from "@angular/common";
+import {RouterModule} from "@angular/router";
+import {IsRouteEnabled} from "../openaireLibrary/error/isRouteEnabled.guard";
+
+@NgModule({
+  imports: [
+    HelperModule,
+    CommonModule,
+    RouterModule.forChild([
+      {path: '', component: HelperTestComponent, canActivate: [IsRouteEnabled]}
+    ])
+  ],
+  declarations: [
+    HelperTestComponent
+  ],
+  providers:[IsRouteEnabled],
+  exports: [
+    HelperTestComponent
+  ]
+})
+
+
+export class HelperTestModule{}
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
deleted file mode 100644
index 9c8396f..0000000
--- a/src/app/home/home.component.html
+++ /dev/null
@@ -1,287 +0,0 @@
-
-<div class="image-front-topbar uk-section-muted uk-section-overlap uk-light" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-slide-top&quot;,&quot;delay&quot;:false}" tm-header-transparent="light" tm-header-transparent-placeholder="">
-  <div style="  background-color: #1e3040;" class=" mainPageSearchForm uk-background-center-center uk-section-large">
-
-
-    <div class="uk-container">
-     <div class="uk-container uk-container-large uk-grid-margin">
-        <div class="tm-header-placeholder uk-margin-remove-adjacent" style="height: 104px;"></div>
-        <div uk-grid="" class="uk-grid uk-grid-stack">
-           <div class="uk-width-1-1@m uk-first-column">
-              <h1 class="uk-text-left@s uk-text-center uk-heading-hero portal-color">
-                 Tracking, reporting, monitoring made easy
-              </h1>
-           </div>
-        </div>
-     </div>
-     <div class="uk-container uk-container-expand uk-margin-medium">
-        <div class="uk-grid-large uk-flex-middle uk-grid uk-grid-stack" uk-grid="">
-           <div class="uk-width-expand@m uk-first-column">
-              <div id="page#7" class="uk-text-large uk-margin-remove-vertical uk-text-left uk-child-width-1-1 uk-grid-match uk-child-width-1-4@s uk-child-width-1-4@m uk-child-width-1-4@l uk-child-width-1-4@xl uk-grid-collapse uk-grid-divider uk-grid" uk-grid="">
-                 <div class="uk-first-column">
-                    <div class="el-item uk-panel">
-                       <div class="el-content uk-margin">
-                          <h2 class="uk-margin-remove-bottom">24925921</h2>
-                          <h6 style="text-transform: uppercase;" class="uk-margin-remove-top">Publications</h6>
-                       </div>
-                    </div>
-                 </div>
-                 <div>
-                    <div class="el-item uk-panel">
-                       <div class="el-content uk-margin">
-                          <h2 class="uk-margin-remove-bottom">667708</h2>
-                          <h6 style="text-transform: uppercase;" class="uk-margin-remove-top">Datasets</h6>
-                       </div>
-                    </div>
-                 </div>
-                 <div>
-                    <div class="el-item uk-panel">
-                       <div class="el-content uk-margin">
-                          <h2 class="uk-margin-remove-bottom">84333 </h2>
-                          <h6 style="text-transform: uppercase;" class="uk-margin-remove-top">Software</h6>
-                       </div>
-                    </div>
-                 </div>
-                 <div>
-                    <div class="el-item uk-panel">
-                       <div class="el-content uk-margin">
-                          <h2 class="uk-margin-remove-bottom">17 </h2>
-                          <h6 style="text-transform: uppercase;" class="uk-margin-remove-top">funders</h6>
-                       </div>
-                    </div>
-                 </div>
-              </div>
-           </div>
-           <div class="uk-width-medium@m">
-           </div>
-        </div>
-     </div>
-    </div>
-
-
-  </div>
-</div>
-
-<div class="uk-section-default uk-section">
-<div class="uk-container">
-   <div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
-      <div class="uk-width-1-1@m uk-first-column">
-         <div class="uk-margin uk-text-center uk-child-width-1-1 uk-grid-match uk-child-width-1-3@m uk-grid" uk-grid="">
-            <div class="uk-first-column">
-               <div class="uk-width-medium uk-margin-auto el-item uk-panel">
-                  <img src="/images/Icons_Monitor/Funder%20Icon.svg" class="el-image" alt="" uk-svg="" hidden="true">
-                  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 74.3 74.3" style="enable-background:new 0 0 74.3 74.3;" xml:space="preserve" width="74.3" height="74.3" class="el-image uk-svg">
-                     <g transform="translate(-292.6 -954.2)">
-                        <path style="fill:#FFFFFF;" d="M337.9,1009.7v-4h-16.3v4H314v-7.2l-0.5-0.4c-1.8-1.6-3.2-3.6-4-5.9l-0.4-1h-4.5v-7.6h4.5l0.4-1
-                           c0.6-1.7,1.6-3.3,2.8-4.7l0.4-0.4V973c2.6,0.1,5,1.4,6.4,3.6l0.5,0.9l1-0.2c0.9-0.2,1.7-0.2,2.6-0.2h13.3c7.4,0,13.6,5.6,14.3,13
-                           l0.1,1.3l0,0l-0.1,1.1c-0.3,3.7-2,7.2-4.7,9.7l-0.5,0.4v7.2L337.9,1009.7L337.9,1009.7z"></path>
-                        <path style="fill:#9ABB55;" d="M314.1,974.6c1.5,0.4,2.8,1.3,3.6,2.6l1.1,1.7l2-0.4c0.8-0.1,1.5-0.2,2.3-0.2h13.3
-                           c6.7,0,12.3,5.1,12.9,11.7l0.1,1l-0.1,1.2c-0.2,3.3-1.8,6.4-4.3,8.6l-1,0.9v6.3h-4.6v-4h-19.3v4h-4.6v-6.4l-1-0.9
-                           c-1.6-1.5-2.8-3.3-3.6-5.3l-0.7-2h-4V989h4l0.7-2c0.6-1.5,1.4-3,2.5-4.2l0.7-0.8V974.6 M312.5,971.4L312.5,971.4
-                           c-0.7,0-1.4,0.5-1.4,1.3c0,0,0,0,0,0v8.1c-1.3,1.5-2.4,3.3-3.1,5.2h-3.6c-0.7,0-1.3,0.6-1.3,1.3v8c0,0.7,0.6,1.3,1.3,1.3h3.6
-                           c0.9,2.5,2.4,4.8,4.4,6.5v6.7c0,0.7,0.6,1.3,1.3,1.3h8c0.7,0,1.3-0.6,1.3-1.3v-2.7h13.3v2.7c0,0.7,0.6,1.3,1.3,1.3h8
-                           c0.7,0,1.3-0.6,1.3-1.3v-6.7c3.1-2.7,4.9-6.6,5.2-10.7c3.1-0.6,5.4-3.3,5.4-6.5h-2.7c0,1.7-1.1,3.2-2.7,3.8
-                           c-0.8-8.1-7.6-14.3-15.8-14.4H323c-0.9,0-1.9,0.1-2.8,0.3C318.5,973,315.6,971.4,312.5,971.4L312.5,971.4z"></path>
-                        <path style="fill:#9ABB55;" d="M329.7,957.2c0.6,0,1,0.4,1,1s-0.4,1-1,1s-1-0.4-1-1S329.1,957.2,329.7,957.2 M329.7,954.2
-                           c-2.2,0-4,1.8-4,4s1.8,4,4,4s4-1.8,4-4C333.7,956,331.9,954.2,329.7,954.2z"></path>
-                        <path style="fill:#9ABB55;" d="M319.1,985.3c-1.2,0-2.1,0.9-2.1,2.1c0,1.2,0.9,2.1,2.1,2.1c1.2,0,2.1-0.9,2.1-2.1l0,0
-                           C321.2,986.3,320.3,985.3,319.1,985.3C319.2,985.3,319.1,985.3,319.1,985.3z"></path>
-                        <path style="fill:#9ABB55;" d="M335,980.7h-10.6v2.7H335V980.7z"></path>
-                        <path style="fill:#9ABB55;" d="M362.9,970.4c0.6,0,1,0.4,1,1s-0.4,1-1,1s-1-0.4-1-1S362.3,970.4,362.9,970.4 M362.9,967.4
-                           c-2.2,0-4,1.8-4,4s1.8,4,4,4s4-1.8,4-4C366.9,969.2,365.1,967.4,362.9,967.4z"></path>
-                        <path style="fill:#9ABB55;" d="M296.6,970.4c0.6,0,1,0.4,1,1s-0.4,1-1,1s-1-0.4-1-1S296,970.4,296.6,970.4 M296.6,967.4
-                           c-2.2,0-4,1.8-4,4s1.8,4,4,4s4-1.8,4-4C300.6,969.2,298.8,967.4,296.6,967.4z"></path>
-                        <path style="fill:#9ABB55;" d="M329.7,1023.5c0.6,0,1,0.4,1,1c0,0.6-0.4,1-1,1c-0.5,0-1-0.4-1-0.9c0,0,0-0.1,0-0.1
-                           C328.7,1024,329.2,1023.5,329.7,1023.5 M329.7,1020.5c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4s4-1.8,4-4
-                           C333.7,1022.3,331.9,1020.5,329.7,1020.5z"></path>
-                        <path style="fill:#9ABB55;" d="M296.6,1010.2c0.6,0,1,0.4,1,1s-0.4,1-1,1s-1-0.4-1-1S296,1010.2,296.6,1010.2 M296.6,1007.2
-                           c-2.2,0-4,1.8-4,4s1.8,4,4,4s4-1.8,4-4C300.6,1009,298.8,1007.2,296.6,1007.2z"></path>
-                        <path style="fill:#9ABB55;" d="M362.9,1010.2c0.6,0,1,0.4,1,1s-0.4,1-1,1s-1-0.4-1-1S362.3,1010.2,362.9,1010.2 M362.9,1007.2
-                           c-2.2,0-4,1.8-4,4s1.8,4,4,4s4-1.8,4-4C366.9,1009,365.1,1007.2,362.9,1007.2z"></path>
-                        <line style="fill:none;stroke:#9ABB55;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;" x1="329.7" y1="971.8" x2="329.7" y2="966.5"></line>
-                        <line style="fill:none;stroke:#9ABB55;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;" x1="306.7" y1="981" x2="302.7" y2="977"></line>
-                        <line style="fill:none;stroke:#9ABB55;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;" x1="356.7" y1="977" x2="352.7" y2="981"></line>
-                        <line style="fill:none;stroke:#9ABB55;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;" x1="307.2" y1="1001.2" x2="303.2" y2="1005.1"></line>
-                        <line style="fill:none;stroke:#9ABB55;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;" x1="329.7" y1="1015.2" x2="329.7" y2="1009.9"></line>
-                        <line style="fill:none;stroke:#9ABB55;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;" x1="356" y1="1005.1" x2="352" y2="1001.2"></line>
-                     </g>
-                  </svg>
-                  <h3 class="el-title uk-margin">
-                     Are you a funder?
-                  </h3>
-                  <div class="el-content uk-margin">
-                     <p class="uk-text-left">All you need to do is to provide OpenAIRE with a ‘very limited’ set of metadata fields from your database and we will take it up from there.</p>
-                     <p class="uk-text-left">Learn <a href="https://www.openaire.eu/faqs#ifaqCat-171">how to participate and ensure that your information is picked up by OpenAIRE</a>.</p>
-                  </div>
-               </div>
-            </div>
-            <div>
-               <div class="uk-width-medium uk-margin-auto el-item uk-panel">
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 82.278 58.7" width="82.278" height="58.7" class="el-image uk-svg"><defs><style>.a{fill:#fff;}.a,.b{stroke:#9ABB55;stroke-miterlimit:10;stroke-width:3px;}.b{fill:none;}</style></defs><g transform="translate(1 2)"><g transform="translate(-9.464 -954.4)"><path class="a" d="M60,979.6a12.864,12.864,0,0,0,1.9-2.1.91.91,0,0,0,0-1.2c-.9-1.1-1.5-1.9-1.9-2.5.2-.5.4-1,.6-1.4l3.3-.5a.9.9,0,0,0,.8-1l-.1-4.2a1.063,1.063,0,0,0-.9-1l-3.2-.5a11.111,11.111,0,0,0-.7-1.6c.1-.1.2-.3.4-.4a5.548,5.548,0,0,0,.6-.8l.3-.4a6.783,6.783,0,0,0,.6-.9,1.083,1.083,0,0,0,0-1.1,19.927,19.927,0,0,0-3.2-3.3,1.059,1.059,0,0,0-1.3-.1l-2.6,2c-.5-.2-.9-.4-1.4-.6l-.5-3.3a.974.974,0,0,0-1-.8H47.5a.974.974,0,0,0-1,.8c-.2,1.1-.4,2.2-.5,3.4l-1.5.6-2.4-1.9c-.1-.1-.2-.1-.3-.2-.6-.3-1.1,0-2.4,1.3a17.966,17.966,0,0,0-1.9,2,.91.91,0,0,0,0,1.2l.2.2a22.13,22.13,0,0,1,1.7,2.3,4.714,4.714,0,0,0-.6,1.5l-3.4.6a.9.9,0,0,0-.8,1l.1,4.2a1.063,1.063,0,0,0,.9,1l3.3.5a11.111,11.111,0,0,0,.7,1.6c-.2.3-.6.7-.9,1.2l-.3.4a6.783,6.783,0,0,0-.6.9,1.083,1.083,0,0,0,0,1.1,32.6,32.6,0,0,0,3.1,3.3,1.23,1.23,0,0,0,1.3.1l2.6-2a11.209,11.209,0,0,0,1.3.5l.5,3.3a.974.974,0,0,0,1,.8h4.2a1.077,1.077,0,0,0,1-.8v-.1a30.679,30.679,0,0,0,.4-3.1l1.5-.6,3,2.5Z"></path><path class="a" d="M50.1,965.6a2.9,2.9,0,1,1-2.9,2.9A3.039,3.039,0,0,1,50.1,965.6Z"></path></g><circle class="a" cx="7.435" cy="7.435" r="7.435" transform="translate(61.335 13.246)"></circle><circle class="a" cx="7.435" cy="7.435" r="7.435" transform="translate(4.169 13.246)"></circle><path class="b" d="M63.951,58.112h0A16.5,16.5,0,0,0,47.438,41.6H34.112A16.5,16.5,0,0,0,17.6,58.112h0" transform="translate(-0.588 -1.412)"></path><path class="b" d="M65.5,41.6h0A16.567,16.567,0,0,1,82.012,58.112h0" transform="translate(-2.234 -1.412)"></path><path class="b" d="M17.012,41.6h0A16.567,16.567,0,0,0,.5,58.112h0" transform="translate(0 -1.412)"></path></g></svg>
-                  <h3 class="el-title uk-margin">
-                     Are you managing a research community?
-                  </h3>
-                  <div class="el-content uk-margin">
-                     <p class="uk-text-left">Using text mining (topic modeling) on the full texts we can discover hidden structures and identify useful patterns, similarities, correlations trends and communities. </p>
-                     <p class="uk-text-left">
-                        Our tech team would be happy to work with new use cases as this is the real value of using open science for transparent decision policy making. Our services have already been successfully applied for the evaluation of parts of FP7, and we are continuing with the rest.
-                     </p>
-                  </div>
-               </div>
-            </div>
-            <div>
-               <div class="uk-width-medium uk-margin-auto el-item uk-panel">
-                  <img src="/images/Icons_Monitor/Monitor%20Help.svg" class="el-image" alt="" uk-svg="" hidden="true">
-                  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 58.3 58.3" style="enable-background:new 0 0 58.3 58.3;" xml:space="preserve" width="58.3" height="58.3" class="el-image uk-svg">
-                     <style type="text/css">
-                        .st0{fill:#FFFFFF;stroke:#9ABB55;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
-                        .st1{fill:#9ABB55;stroke:#9ABB55;stroke-width:2;}
-                     </style>
-                     <g transform="translate(-1000.9 -961.038)">
-                        <g transform="translate(1002.4 962.538)">
-                           <path class="st0" d="M27.6,0c15.3,0,27.6,12.4,27.6,27.6c0,15.3-12.4,27.6-27.6,27.6S0,42.9,0,27.6C0,12.4,12.4,0,27.6,0
-                              C27.6,0,27.6,0,27.6,0z"></path>
-                        </g>
-                        <path class="st1" d="M1030,973.7c-4.9,0-8.8,4-8.8,8.8c0,0.4,0.3,0.7,0.6,0.7c0.4,0,0.7-0.3,0.7-0.6l0,0l0,0c0-4.1,3.3-7.5,7.5-7.5
-                           c4.1,0,7.5,3.3,7.5,7.5c0,2.2-1,4.4-2.6,5.9c-1.7,1.6-3.4,3-5.3,4.4c-0.2,0.1-0.3,0.3-0.3,0.5v5.4c0,0.4,0.3,0.7,0.6,0.7
-                           c0.4,0,0.7-0.3,0.7-0.6l0,0v-5.1c1.8-1.3,3.5-2.7,5.1-4.3c1.8-1.8,2.9-4.2,3-6.8c0.2-4.8-3.6-8.8-8.4-9
-                           C1030.3,973.7,1030.2,973.7,1030,973.7z"></path>
-                        <circle class="st1" cx="1030" cy="1005.4" r="1.4"></circle>
-                     </g>
-                  </svg>
-                  <h3 class="el-title uk-margin">
-                     Have more questions?
-                  </h3>
-                  <div class="el-content uk-margin">
-                     <ul class="uk-list uk-list-divider uk-text-left">
-                        <li><a href="https://www.openaire.eu/oa-basics">Learn about open science policies and how to align</a></li>
-                        <li><a href="https://www.openaire.eu/rdm-handbook">Learn more on how to manage your data in the open science era</a></li>
-                        <li><a href="https://www.openaire.eu/guides/">Find out how to use OpenAIRE to best serve your needs</a></li>
-                        <li><a href="https://www.openaire.eu/webinars/">View our training material on a variety of related topics</a></li>
-                        <li><a href="https://www.openaire.eu/contact-us">Contact us</a></li>
-                     </ul>
-                  </div>
-               </div>
-            </div>
-         </div>
-      </div>
-   </div>
-</div>
-</div>
-          <div class="uk-section-primary uk-section uk-section-small portal-card">
-             <div class="uk-container uk-container-expand">
-                <div class="uk-margin-remove-vertical uk-grid uk-grid-stack" uk-grid="" uk-height-match="target: .uk-card; row: false">
-                   <div class="uk-width-1-1@m uk-first-column">
-                      <div class="uk-margin-remove-top uk-h3">
-                         Monitor
-                      </div>
-                      <div class="uk-panel">
-                         <div id="uk-grid5c3" class="uk-grid uk-child-width-1-4@m uk-child-width-1-4@s uk-text-left infocus" data-uk-grid-match="{target:'> div > .uk-panel', row:true}" data-uk-grid-margin="">
-                            <div class="uk-row-first">
-                               <div class="uk-panel" style="min-height: 91.4px;">
-                                  <h2 class="" style=""><a href="funders.html">Funders</a></h2>
-                               </div>
-                            </div>
-                            <div>
-                               <div class="uk-panel" style="min-height: 91.4px;">
-                                  <h2 class="" style=""><a href="RIs.html">Research Initiatives</a></h2>
-                               </div>
-                            </div>
-                            <div>
-                               <div class="uk-panel" style="min-height: 91.4px;">
-                                  <h2 class="" style=""><a href="./org.html">Institutions</a></h2>
-                               </div>
-                            </div>
-                            <div>
-                               <div class="uk-panel" style="min-height: 91.4px;">
-                                  <h2 class="" style=""><a href="./project.html">Projects</a></h2>
-                               </div>
-                            </div>
-                         </div>
-                      </div>
-                   </div>
-                </div>
-             </div>
-          </div>
-
-<div class="uk-section-muted" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}">
-    <div class="uk-container uk-container-large">
-      <div uk-grid="" class="uk-grid uk-margin-large-top uk-margin-large-bottom">
-        <div class="uk-width-expand@m uk-width-1-2@s uk-dark uk-grid-item-match uk-first-column explore">
-          <div class="uk-margin uk-panel uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
-            <h4 class="el-title uk-margin uk-h4">
-              Researcher?
-            </h4>
-            <div class="el-content uk-margin">
-              Explore all OA research results. Link all your research. Build your profile
-            </div>
-            <p>
-              <a [href]="'https://'+(properties.environment =='beta'?'beta.':'')+'explore.openaire.eu'" class="el-link uk-button uk-button-default">
-                OpenAIRE.EXPLORE
-              </a>
-            </p>
-          </div>
-        </div>
-        <div class="uk-width-expand@m uk-width-1-2@s uk-dark uk-grid-item-match uk-first-column provide">
-          <div class="uk-margin uk-panel uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
-            <h4 class="el-title uk-margin uk-h4">
-              Content provider?
-            </h4>
-            <div class="el-content uk-margin">
-              Join OpenAIRE, use our tools and make your content more visible around the world.
-            </div>
-            <p>
-              <a target="_blank" [href]="'https://'+(properties.environment =='beta'?'beta.':'')+'provide.openaire.eu'" class="el-link uk-button uk-button-default">
-                OpenAIRE.PROVIDE
-              </a>
-            </p>
-          </div>
-        </div>
-        <div class="uk-width-expand@m uk-width-1-2@s uk-dark uk-grid-item-match connect">
-          <div class="uk-margin uk-panel uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
-            <h4 class="el-title uk-margin uk-h4">
-              Research community?
-            </h4>
-            <div class="el-content uk-margin">
-              Use a trusted partner to share, link, disseminate and monitor your research.
-            </div>
-            <p>
-              <a target="_blank" [href]="'https://'+(properties.environment =='beta'?'beta.':'')+'connect.openaire.eu'" class="el-link uk-button uk-button-default">
-                OpenAIRE.CONNECT
-              </a>
-            </p>
-          </div>
-        </div>
-        <!-- <div class="uk-width-expand@m uk-width-1-2@s uk-dark uk-grid-item-match monitor">
-          <div class="uk-margin uk-panel uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
-            <h4 class="el-title uk-margin uk-h4">
-              Research manager?
-            </h4>
-            <div class="el-content uk-margin">
-              Use our monitoring services and easily track all relevant research results.
-            </div>
-            <p>
-              <a target="_blank" href="https://monitor.openaire.eu" class="el-link uk-button uk-button-default">
-                OpenAIRE.MONITOR
-              </a>
-            </p>
-          </div>
-        </div> -->
-        <div class="uk-width-expand@m uk-width-1-2@s uk-dark uk-grid-item-match develop">
-          <div class="uk-margin uk-panel uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
-            <h4 class="el-title uk-margin uk-h4">
-              Developer?
-            </h4>
-            <div class="el-content uk-margin">
-              Get access to OpenAIRE data and capitalize on on Europe's open linked research
-            </div>
-            <p>
-              <a target="_blank" href="https://develop.openaire.eu" class="el-link uk-button uk-button-default">
-                OpenAIRE.DEVELOP
-              </a>
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
deleted file mode 100644
index 18df157..0000000
--- a/src/app/home/home.component.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import {Component, ElementRef} from '@angular/core';
-import { EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
-import {ActivatedRoute, Router} from '@angular/router';
-import {Location} from '@angular/common';
-import "rxjs/add/observable/zip";
-import {Title, Meta}                  from '@angular/platform-browser';
-import {ConfigurationService} from '../openaireLibrary/utils/configuration/configuration.service';
-
-import {  RouterHelper} from '../openaireLibrary/utils/routerHelper.class';
-import { ErrorCodes} from '../openaireLibrary/utils/properties/errorCodes';
-import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
-import { SEOService } from '../openaireLibrary/sharedComponents/SEO/SEO.service';
-
-@Component({
-    selector: 'home',
-    templateUrl: './home.component.html'
-  })
-
-export class HomeComponent {
-  public piwiksub: any;
-
-    public pageTitle = "OpenAIRE"
-    public keyword:string = "";
-
-
-    properties: EnvProperties;
-  public subPub;public subData;public subProjects;public subOrg; public subDataPr;
-
-    constructor (
-      private route: ActivatedRoute,
-        private _router: Router,
-        private location: Location, private _piwikService:PiwikService,
-        private _meta: Meta, private _title: Title, private seoService: SEOService
-      ) {
-
-            var description = "openAIRE monitor,funder, European commission, statistics";
-
-            var title = "OpenAIRE | Monitor";
-
-            this._title.setTitle(title);
-            this._meta.updateTag({content:description},"name='description'");
-            this._meta.updateTag({content:description},"property='og:description'");
-            this._meta.updateTag({content:title},"property='og:title'");
-            this.seoService.createLinkForCanonicalURL(false);
-
-
-            //this.fetchDataproviders = new FetchDataproviders(this._searchDataprovidersService);
-    }
-    public ngOnInit() {
-      this.route.data
-       .subscribe((data: { envSpecific: EnvProperties }) => {
-          this.properties = data.envSpecific;
-          if(this.properties!=null){
-            var url = this.properties.baseLink+this._router.url;
-            this._meta.updateTag({content:url},"property='og:url'");
-            if(this.properties.enablePiwikTrack && (typeof document !== 'undefined')){
-              this.piwiksub = this._piwikService.trackView(this.properties, "OpenAIRE").subscribe();
-            }
-
-          }
-         });
-
-    }
-}
diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts
deleted file mode 100644
index 416a133..0000000
--- a/src/app/home/home.module.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { NgModule}            from '@angular/core';
-import { CommonModule }        from '@angular/common';
-import { FormsModule }         from '@angular/forms';
-import { RouterModule } from '@angular/router';
-
-import{HomeRoutingModule} from './home-routing.module';
-import{HomeComponent} from './home.component';
-
-import {PiwikServiceModule} from '../openaireLibrary/utils/piwik/piwikService.module';
-
-import {FreeGuard} from '../openaireLibrary/login/freeGuard.guard';
-import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
-import {Schema2jsonldModule} from '../openaireLibrary/sharedComponents/schema2jsonld/schema2jsonld.module';
-import { SEOServiceModule } from '../openaireLibrary/sharedComponents/SEO/SEOService.module';
-
- @NgModule({
-  imports: [
-    CommonModule, FormsModule, RouterModule,
-      PiwikServiceModule,
-      HomeRoutingModule,
-
-      Schema2jsonldModule, SEOServiceModule
-  ],
-  declarations: [
-    HomeComponent
-   ],
-  providers:[
-    FreeGuard, PreviousRouteRecorder
-    ],
-  exports: [
-    HomeComponent
-     ]
-})
-export class HomeModule { }
diff --git a/src/app/deposit/datasets/depositDatasets-routing.module.ts b/src/app/htmlPages/about/aboutPage-routing.module.ts
similarity index 56%
rename from src/app/deposit/datasets/depositDatasets-routing.module.ts
rename to src/app/htmlPages/about/aboutPage-routing.module.ts
index e4fcf4c..03e2c00 100644
--- a/src/app/deposit/datasets/depositDatasets-routing.module.ts
+++ b/src/app/htmlPages/about/aboutPage-routing.module.ts
@@ -1,19 +1,17 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { OpenaireDepositDatasetsComponent } from './depositDatasets.component';
-
+import {AboutPageComponent} from './aboutPage.component';
 import {FreeGuard} from '../../openaireLibrary/login/freeGuard.guard';
 import {PreviousRouteRecorder} from '../../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
 import {IsRouteEnabled} from '../../openaireLibrary/error/isRouteEnabled.guard'
+
 @NgModule({
   imports: [
     RouterModule.forChild([
-     	{ path: '', component: OpenaireDepositDatasetsComponent, canActivate: [FreeGuard, IsRouteEnabled], data: {
-          redirect: '/error' 
-        },canDeactivate: [PreviousRouteRecorder]  }
+     	{ path: '', component: AboutPageComponent, canActivate: [FreeGuard, IsRouteEnabled], canDeactivate: [PreviousRouteRecorder] }
 
     ])
   ]
 })
-export class DepositDatasetsRoutingModule { }
+export class AboutPageRoutingModule { }
diff --git a/src/app/htmlPages/about/aboutPage.component.ts b/src/app/htmlPages/about/aboutPage.component.ts
new file mode 100644
index 0000000..969c38b
--- /dev/null
+++ b/src/app/htmlPages/about/aboutPage.component.ts
@@ -0,0 +1,45 @@
+import {Component, Input, Output, EventEmitter, ViewChild, ElementRef} from '@angular/core';
+import {Observable}       from 'rxjs/Observable';
+import {ActivatedRoute, Router} from '@angular/router';
+import {Title, Meta}                  from '@angular/platform-browser';
+import{EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';
+
+@Component({
+    selector: 'about',
+    template: `
+      <div class=" uk-section  uk-margin-large-top tm-middle uk-container" id="tm-main">
+        <div class="uk-container  uk-margin-bottom">
+          <html-page></html-page>
+        </div>
+      </div>
+     `
+})
+export class AboutPageComponent {
+  properties:EnvProperties;
+
+  constructor ( private  route: ActivatedRoute, private _router: Router,
+                private _meta: Meta, private _title: Title) {}
+
+  public ngOnInit() {
+    this.route.data
+      .subscribe((data: { envSpecific: EnvProperties }) => {
+         this.updateUrl(data.envSpecific.baseLink+this._router.url);
+         this.updateTitle("About");
+         this.updateDescription("About, open access");
+      });
+  }
+
+  private updateDescription(description:string){
+    this._meta.updateTag({content:description},"name='description'");
+    this._meta.updateTag({content:description},"property='og:description'");
+  }
+  private updateTitle(title:string){
+    var _prefix ="OpenAIRE | ";
+    var _title = _prefix + ((title.length> 50 ) ?title.substring(0,50):title);
+    this._title.setTitle(_title);
+    this._meta.updateTag({content:_title},"property='og:title'");
+  }
+  private updateUrl(url:string){
+    this._meta.updateTag({content:url},"property='og:url'");
+  }
+}
diff --git a/src/app/htmlPages/about/aboutPage.module.ts b/src/app/htmlPages/about/aboutPage.module.ts
new file mode 100644
index 0000000..357c86e
--- /dev/null
+++ b/src/app/htmlPages/about/aboutPage.module.ts
@@ -0,0 +1,26 @@
+import { NgModule,  ModuleWithProviders }            from '@angular/core';
+
+import {FreeGuard} from '../../openaireLibrary/login/freeGuard.guard';
+import {PreviousRouteRecorder} from '../../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
+import {IsRouteEnabled} from '../../openaireLibrary/error/isRouteEnabled.guard'
+
+import {AboutPageComponent} from './aboutPage.component';
+import {AboutPageRoutingModule} from './aboutPage-routing.module';
+
+import {HtmlPagesModule} from '../htmlPages.module';
+
+@NgModule({
+  imports: [
+    AboutPageRoutingModule, HtmlPagesModule
+  ],
+  declarations: [
+    AboutPageComponent
+  ],
+  providers:[FreeGuard,PreviousRouteRecorder, IsRouteEnabled],
+  exports: [
+    AboutPageComponent
+  ]
+})
+
+
+export class AboutPageModule{}
diff --git a/src/app/htmlPages/htmlPage.component.ts b/src/app/htmlPages/htmlPage.component.ts
new file mode 100644
index 0000000..6080992
--- /dev/null
+++ b/src/app/htmlPages/htmlPage.component.ts
@@ -0,0 +1,62 @@
+import { Component, Input } from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import 'rxjs/Rx';
+import {HtmlPageService} from './htmlPage.service';
+import{EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
+import {ConnectHelper} from '../openaireLibrary/connect/connectHelper';
+import {SafeHtmlPipe} from '../openaireLibrary/utils/pipes/safeHTML.pipe';
+
+@Component({
+  selector: 'html-page',
+  template: `
+    <div [innerHTML]="content | safeHtml"></div>
+`
+})
+export class HtmlPageComponent {
+  public content:string="";
+  sub:any;
+  properties:EnvProperties;
+  private communityId: string = null;
+  constructor (private _service: HtmlPageService, private route: ActivatedRoute,) {}
+
+  ngOnInit() {
+    this.route.data
+      .subscribe((data: { envSpecific: EnvProperties }) => {
+         this.properties = data.envSpecific;
+         this.route.queryParams.subscribe(
+           params => {
+                 this.communityId  = ConnectHelper.getCommunityFromDomain(this.properties.domain);
+                 if(!this.communityId) {
+                   this.communityId = params['communityId'];
+                 }
+
+                  if(!this.communityId){
+                    this.communityId = this.properties.adminToolsCommunity;
+                  }
+                  if(location){
+                    this.sub = this._service.getHtmlContent(location.pathname, this.properties, this.communityId).subscribe(
+                      data => {
+                        if(data.length > 0) {
+                          this.content = data[0].content;
+                        }
+                      },
+                      err => {
+                        //console.log(err);
+                        this.handleError("Error getting html content with route: "+location.pathname+" for community with id: "+this.communityId, err);
+                      }
+                    );
+                  }
+               });
+      });
+  }
+
+  ngOnDestroy() {
+    if(this.sub){
+      this.sub.unsubscribe();
+    }
+  }
+
+  private handleError(message: string, error) {
+    console.error("Html Page: "+message, error);
+  }
+}
diff --git a/src/app/htmlPages/htmlPage.service.ts b/src/app/htmlPages/htmlPage.service.ts
new file mode 100644
index 0000000..3099ab8
--- /dev/null
+++ b/src/app/htmlPages/htmlPage.service.ts
@@ -0,0 +1,25 @@
+import {Injectable, Inject} from '@angular/core';
+import {HttpClient} from "@angular/common/http";
+import {Observable}     from 'rxjs/Observable';
+import 'rxjs/add/observable/of';
+import 'rxjs/add/operator/do';
+import 'rxjs/add/operator/share';
+import{EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
+
+@Injectable()
+export class HtmlPageService {
+    constructor(private http: HttpClient) {}
+
+    getHtmlContent (router: string, properties:EnvProperties, communityId:string ):any {
+        //console.info("get router html content for : "+router);
+
+        let url = properties.adminToolsAPIURL + '/htmlpagecontent?community='+communityId+'&page='+router;
+
+        return this.http.get<Array<any>>((properties.useCache)? (properties.cacheUrl+encodeURIComponent(url)): url);
+                    //.map(res => <Array<any>> res.json());
+
+    }
+
+
+
+}
diff --git a/src/app/htmlPages/htmlPages.module.ts b/src/app/htmlPages/htmlPages.module.ts
new file mode 100644
index 0000000..9675e6a
--- /dev/null
+++ b/src/app/htmlPages/htmlPages.module.ts
@@ -0,0 +1,21 @@
+import { NgModule }            from '@angular/core';
+
+import {HtmlPageComponent} from './htmlPage.component';
+import {HtmlPageService} from './htmlPage.service';
+import {SafeHtmlPipeModule} from '../openaireLibrary/utils/pipes/safeHTMLPipe.module';
+
+@NgModule({
+  imports: [
+    SafeHtmlPipeModule
+  ],
+  declarations: [
+    HtmlPageComponent
+  ],
+  providers:[HtmlPageService],
+  exports: [
+    HtmlPageComponent
+  ]
+})
+
+
+export class HtmlPagesModule{}
diff --git a/src/app/deposit/publications/depositPublications-routing.module.ts b/src/app/htmlPages/organizations/organizationsPage-routing.module.ts
similarity index 54%
rename from src/app/deposit/publications/depositPublications-routing.module.ts
rename to src/app/htmlPages/organizations/organizationsPage-routing.module.ts
index 2dadf89..8500909 100644
--- a/src/app/deposit/publications/depositPublications-routing.module.ts
+++ b/src/app/htmlPages/organizations/organizationsPage-routing.module.ts
@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { OpenaireDepositPublicationsComponent } from './depositPublications.component';
+
+import {OrganizationsPageComponent} from './organizationsPage.component';
 import {FreeGuard} from '../../openaireLibrary/login/freeGuard.guard';
 import {PreviousRouteRecorder} from '../../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
 import {IsRouteEnabled} from '../../openaireLibrary/error/isRouteEnabled.guard'
@@ -8,11 +9,9 @@ import {IsRouteEnabled} from '../../openaireLibrary/error/isRouteEnabled.guard'
 @NgModule({
   imports: [
     RouterModule.forChild([
-      { path: '', component: OpenaireDepositPublicationsComponent, canActivate: [FreeGuard, IsRouteEnabled], data: {
-          redirect: '/error' 
-        }, canDeactivate: [PreviousRouteRecorder]   }
+     	{ path: '', component: OrganizationsPageComponent, canActivate: [FreeGuard, IsRouteEnabled], canDeactivate: [PreviousRouteRecorder] }
 
     ])
   ]
 })
-export class DepositPublicationsRoutingModule { }
+export class OrganizationsPageRoutingModule { }
diff --git a/src/app/htmlPages/organizations/organizationsPage.component.ts b/src/app/htmlPages/organizations/organizationsPage.component.ts
new file mode 100644
index 0000000..c2da0f6
--- /dev/null
+++ b/src/app/htmlPages/organizations/organizationsPage.component.ts
@@ -0,0 +1,70 @@
+import {Component} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+import {Title, Meta}                  from '@angular/platform-browser';
+import{EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';
+import {HelperService} from "../../openaireLibrary/utils/helper/helper.service";
+import {ConnectHelper} from "../../openaireLibrary/connect/connectHelper";
+
+@Component({
+    selector: 'organizations',
+    template: `
+      <div class=" uk-section tm-middle uk-container uk-padding-remove-top uk-margin-top" id="tm-main">
+        <div class="uk-container  uk-margin-bottom">
+          <div class="uk-article-title custom-article-title uk-margin-bottom"> Organizations related to the community
+          </div>
+          <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
+                  [texts]="pageContents['top']"></helper>
+          <affiliations [longView]="true" [getAffiliationsFromAPI]="true"></affiliations>
+        </div>
+      </div>
+    `
+})
+export class OrganizationsPageComponent {
+  properties:EnvProperties;
+  public pageContents = null;
+  public divContents = null;
+  public communityId = null;
+
+  constructor ( private  route: ActivatedRoute, private _router: Router,
+                private _meta: Meta, private _title: Title,
+                private helper: HelperService) {}
+
+  public ngOnInit() {
+    this.route.data
+      .subscribe((data: { envSpecific: EnvProperties }) => {
+        this.properties = data.envSpecific;
+        this.communityId = ConnectHelper.getCommunityFromDomain(this.properties.domain);
+        this.updateUrl(data.envSpecific.baseLink+this._router.url);
+        this.updateTitle("Organizations");
+        this.updateDescription("Organizations, open access");
+        //this.getDivContents();
+        this.getPageContents();
+      });
+  }
+
+  private updateDescription(description:string){
+    this._meta.updateTag({content:description},"name='description'");
+    this._meta.updateTag({content:description},"property='og:description'");
+  }
+  private updateTitle(title:string){
+    var _prefix ="OpenAIRE | ";
+    var _title = _prefix + ((title.length> 50 ) ?title.substring(0,50):title);
+    this._title.setTitle(_title);
+    this._meta.updateTag({content:_title},"property='og:title'");
+  }
+  private updateUrl(url:string){
+    this._meta.updateTag({content:url},"property='og:url'");
+  }
+
+  private getPageContents() {
+    this.helper.getPageHelpContents(this._router.url, this.properties, this.communityId).subscribe(contents => {
+      this.pageContents = contents;
+    })
+  }
+
+  private getDivContents() {
+    this.helper.getDivHelpContents(this._router.url, this.properties, this.communityId).subscribe(contents => {
+      this.divContents = contents;
+    })
+  }
+}
diff --git a/src/app/htmlPages/organizations/organizationsPage.module.ts b/src/app/htmlPages/organizations/organizationsPage.module.ts
new file mode 100644
index 0000000..ba38603
--- /dev/null
+++ b/src/app/htmlPages/organizations/organizationsPage.module.ts
@@ -0,0 +1,28 @@
+import { NgModule,  ModuleWithProviders }            from '@angular/core';
+
+import {FreeGuard} from '../../openaireLibrary/login/freeGuard.guard';
+import {PreviousRouteRecorder} from '../../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
+import {IsRouteEnabled} from '../../openaireLibrary/error/isRouteEnabled.guard'
+
+import {OrganizationsPageComponent} from './organizationsPage.component';
+import {OrganizationsPageRoutingModule} from './organizationsPage-routing.module';
+
+import {AffiliationsModule} from "../../affiliations/affiliations.module";
+import {HelperModule} from "../../openaireLibrary/utils/helper/helper.module";
+import {CommonModule} from "@angular/common";
+
+@NgModule({
+  imports: [
+    OrganizationsPageRoutingModule, AffiliationsModule, HelperModule, CommonModule
+  ],
+  declarations: [
+    OrganizationsPageComponent
+  ],
+  providers:[FreeGuard,PreviousRouteRecorder, IsRouteEnabled],
+  exports: [
+    OrganizationsPageComponent
+  ]
+})
+
+
+export class OrganizationsPageModule{}
diff --git a/src/app/initiatives/communities/communities.component.html b/src/app/initiatives/communities/communities.component.html
deleted file mode 100644
index 31afcc4..0000000
--- a/src/app/initiatives/communities/communities.component.html
+++ /dev/null
@@ -1,40 +0,0 @@
-
-
-   <div *ngIf= "communitiesResults != null && communitiesResults.length > 0" class="uk-margin-xlarge-top">
-    <div class="uk-container uk-margin-top-large uk-margin-bottom">
-      <div class="uk-child-width-1-3@m uk-text-center uk-grid-match " uk-grid >
-        <ng-container *ngFor="let item of communitiesResults; let i = index">
-            <div *ngIf="showCommunity(item)" class="uk-card uk-card-default uk-margin-bottom uk-padding-remove">
-              <span >
-                <div class="uk-card-media-top">
-                    <img *ngIf= "item.logoUrl != null && item.logoUrl != '' " src="{{item.logoUrl}}" alt="{{(item.title)?item.title:item.shortTitle}} logo"  class="uk-height-small uk-responsive-height ">
-                     <span  *ngIf= "item.logoUrl == null || item.logoUrl == '' "  class="uk-icon   uk-margin-top">
-                       <svg width="50" height="50" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="2.5"> <circle fill="none" stroke="#000" stroke-width="1.1" cx="7.7" cy="8.6" r="3.5"></circle> <path fill="none" stroke="#000" stroke-width="1.1" d="M1,18.1 C1.7,14.6 4.4,12.1 7.6,12.1 C10.9,12.1 13.7,14.8 14.3,18.3"></path> <path fill="none" stroke="#000" stroke-width="1.1" d="M11.4,4 C12.8,2.4 15.4,2.8 16.3,4.7 C17.2,6.6 15.7,8.9 13.6,8.9 C16.5,8.9 18.8,11.3 19.2,14.1"></path></svg>
-                    </span>
-                </div>
-              </span>
-              <div class="uk-card-body">
-                <div>
-
-                   <h3 class="uk-card-title">
-                    <a    [routerLink]="['/initiatives', item.communityId]"   routerLinkActive="router-link-active" >
-                    {{(item.title)?item.title:item.shortTitle}}</a>
-                  </h3>
-                </div>
-
-                <div *ngIf="item.status !='all'" class="uk-float-right" uk-tooltip="title: Community is hidden to registered users. It is visible only to users that have privileges to  manage community; delay: 100">
-                  <span class="private-view-label uk-label uk-label-success " aria-expanded="false">Private view</span>
-                </div>
-                <div *ngIf="item.type =='ri'" class="" >
-                  <span class="ri-label uk-label uk-label-info " aria-expanded="false">Research Initiative</span>
-                </div>
-                <div *ngIf="item.type !='ri'" class="" >
-                  <span class="uk-label rc-label  uk-label-warning " aria-expanded="false">Research Community</span>
-                </div>
-                  <p *ngIf="item.description != null" >{{item.description}}</p>
-              </div>
-            </div>
-        </ng-container>
-      </div>
-    </div>
-</div>
diff --git a/src/app/initiatives/communities/communities.component.ts b/src/app/initiatives/communities/communities.component.ts
deleted file mode 100644
index cfe53cf..0000000
--- a/src/app/initiatives/communities/communities.component.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-import {Component, Input, Output, EventEmitter}  from '@angular/core';
-import {ViewChild, ChangeDetectionStrategy}      from '@angular/core';
-import {ViewEncapsulation}                       from '@angular/core';
-import {ActivatedRoute, Router}                  from '@angular/router';
-import {Location}                                from '@angular/common';
-import {Title, Meta}                             from '@angular/platform-browser';
-
-import {Observable}                              from 'rxjs/Observable';
-
-import "rxjs/add/observable/zip";
-
-import {ConnectHelper}                           from '../../openaireLibrary/connect/connectHelper';
-import {EnvProperties}                           from '../../openaireLibrary/utils/properties/env-properties';
-import {ErrorCodes}                              from '../../openaireLibrary/utils/properties/errorCodes';
-
-import {ConfigurationService}                    from '../../openaireLibrary/utils/configuration/configuration.service';
-import {CommunitiesService}                      from '../../openaireLibrary/connect/communities/communities.service';
-import {PiwikService}                            from '../../openaireLibrary/utils/piwik/piwik.service';
-import {Session} from '../../openaireLibrary/login/utils/helper.class';
-@Component({
-    selector: 'communities',
-    templateUrl: 'communities.component.html',
-})
-
-export class CommunitiesComponent {
-  public piwiksub: any;
-  public subfunders: any;
-
-  public pageTitle = "OpenAIRE"
-
-  public communitiesResults = null;
-
-  properties:EnvProperties;
-
-  constructor (
-      private route: ActivatedRoute,
-      private _router: Router,
-      private location: Location,
-      private _meta: Meta,
-      private _title: Title,
-      private _piwikService:PiwikService,
-      private _communitiesService:CommunitiesService,
-      private config: ConfigurationService) {
-
-                var description = "Community Dashboard";
-                var title = "Community Dashboard";
-
-                this._meta.updateTag({content:description},"name='description'");
-                this._meta.updateTag({content:description},"property='og:description'");
-                this._meta.updateTag({content:title},"property='og:title'");
-                this._title.setTitle(title);
-      }
-
-        public ngOnInit() {
-          this.route.data
-              .subscribe((data: { envSpecific: EnvProperties }) => {
-                 this.properties = data.envSpecific;
-                 var url = data.envSpecific.baseLink+this._router.url
-                 this._meta.updateTag({content:url},"property='og:url'");
-                 if(this.properties.enablePiwikTrack && (typeof document !== 'undefined')){
-                   this.piwiksub = this._piwikService.trackView(this.properties, "OpenAIRE Connect", this.properties.piwikSiteId).subscribe();
-                 }
-
-                 this._communitiesService.getCommunities(this.properties, this.properties.communitiesAPI).subscribe(
-                       communitiesResults => {
-                             this.communitiesResults = communitiesResults;
-                             //console.log(communitiesResults);
-                 });
-              });
-        }
-
-        public ngOnDestroy() {
-          if(this.piwiksub){
-            this.piwiksub.unsubscribe();
-          }
-        }
-        isProduction():boolean{
-          return ConnectHelper.isProduction(document.location.hostname);
-
-        }
-        getProductionPrefix():string{
-          return ConnectHelper.getProductionPrefix(document.location.hostname);
-        }
-        showCommunity(community):boolean{
-          if(community['type'] !="ri"){
-            return false;
-          }
-          if(community['status'] == "hidden"){
-            return false;
-          }else if(community['status'] == "manager"){
-            var mail = Session.getUserEmail();
-            if(mail == null){ // no user
-              return false;
-            }else if(Session.isCommunityCurator() || Session.isPortalAdministrator()){
-              return true;
-            }else if(community.managers.indexOf(mail)!=-1){
-              return true;
-            }
-            return false;
-          }
-          return true;
-
-        }
-}
diff --git a/src/app/initiatives/communities/communities.module.ts b/src/app/initiatives/communities/communities.module.ts
deleted file mode 100644
index 668a41f..0000000
--- a/src/app/initiatives/communities/communities.module.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import {NgModule}                 from '@angular/core';
-import {CommonModule}             from '@angular/common';
-import {FormsModule}              from '@angular/forms';
-import {RouterModule}             from '@angular/router';
-
-import {CommunitiesRoutingModule} from './communities-routing.module';
-import {CommunitiesComponent}     from './communities.component';
-import {FreeGuard}                from '../../openaireLibrary/login/freeGuard.guard';
-import {PreviousRouteRecorder}    from '../../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
-
-import {PiwikService}             from '../../openaireLibrary/utils/piwik/piwik.service';
-import {ConfigurationService}     from '../../openaireLibrary/utils/configuration/configuration.service';
-import {CommunitiesService}       from '../../openaireLibrary/connect/communities/communities.service';
-
-@NgModule({
-  imports: [
-    CommonModule, FormsModule, RouterModule, CommunitiesRoutingModule
-  ],
-  declarations: [
-    CommunitiesComponent
-  ],
-  providers:[
-    FreeGuard, PreviousRouteRecorder, ConfigurationService,
-    PiwikService, CommunitiesService
-  ],
-  exports: [
-    CommunitiesComponent
-  ]
-})
-export class CommunitiesModule { }
diff --git a/src/app/initiatives/community/community.component.html b/src/app/initiatives/community/community.component.html
deleted file mode 100644
index cd4d288..0000000
--- a/src/app/initiatives/community/community.component.html
+++ /dev/null
@@ -1,60 +0,0 @@
-<div class=" uk-section  uk-margin-small-top tm-middle uk-container" id="tm-main">
-
-<div class="uk-container  uk-margin-bottom">
-
-  <article *ngIf="community" class="uk-article ">
-    <div *ngIf="communityId == null || communityId == ''" class="uk-child-width-1-6@l uk-child-width-1-6@m uk-child-width-1-3@s uk-text-center uk-alert uk-alert-primary">
-       No community chosen
-    </div>
-
-    <div *ngIf="communityId != null && communityId != '' && community != null">
-        <blockquote>
-            <div *ngIf="community.title != null">
-              <p> {{community.title}}</p>
-            </div>
-            <div *ngIf="community.title == null && community.shortTitle != null">
-              <p> {{community.shortTitle}}</p>
-            </div>
-            <div *ngIf="community.description != null">
-              <p> {{community.description}}</p>
-            </div>
-        </blockquote>
-        <div *ngIf="community.subjects != null">
-          <span *ngFor="let subject of community.subjects.slice(0,10) let i=index">
-              <span *ngIf="subject != ''" class="uk-label uk-margin-small-bottom">{{subject}}</span>
-              <!-- <span *ngIf=" i<9 && i<(community.subjects.length-1)">&nbsp;</span> -->
-          </span>
-          <span *ngIf="showAll">
-              <span *ngFor="let subject of community.subjects.slice(10) let i=index">
-                  <span *ngIf="subject != ''" class="uk-label uk-margin-small-bottom">{{subject}}</span>
-                  <!-- <span *ngIf="i<(community.subjects.length-1)">&nbsp;</span> -->
-              </span>
-          </span>
-          <span *ngIf="!showAll && community.subjects.length > 10">
-              <a (click)="showAll = !showAll;">
-                show more
-              </a>
-          </span>
-          <span *ngIf="showAll">
-              <a (click)="showAll = !showAll;">
-                show less
-              </a>
-          </span>
-        </div>
-        <p>
-          <!--span *ngIf="community.managers != null && community.managers[0] != '' && community.managers[0] != null"> Curated by:
-              <span *ngFor='let manager of community.managers; let i = index'>{{manager.substr(0, manager.indexOf('@'))}}<span *ngIf="manager.includes('@') == 0">{{manager}}</span><span *ngIf="i<(community.managers.length-1)">,</span>
-              </span>
-          </span-->
-          <span *ngIf="community.date != null" class="uk-margin-left"> Created: {{community.date | date:'dd-MM-yyyy'}}</span>
-         </p>
-    </div>
-
-
-
-
-
-  </article>
-</div>
-
-</div>
diff --git a/src/app/initiatives/community/community.component.ts b/src/app/initiatives/community/community.component.ts
deleted file mode 100644
index 3b7aad4..0000000
--- a/src/app/initiatives/community/community.component.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-import {Component, Input, Output}     from '@angular/core';
-import {EventEmitter, ViewChild}      from '@angular/core';
-import {ChangeDetectionStrategy}      from '@angular/core';
-import {ViewEncapsulation}            from '@angular/core';
-import {ActivatedRoute, Router}       from '@angular/router';
-import {Location}                     from '@angular/common';
-import {Title, Meta}                  from '@angular/platform-browser';
-
-import {Observable}                   from 'rxjs/Observable';
-
-import "rxjs/add/observable/zip";
-
-import {EnvProperties}                from '../../openaireLibrary/utils/properties/env-properties';
-import {ErrorCodes}                   from '../../openaireLibrary/utils/properties/errorCodes';
-
-import {CommunityService}             from '../../openaireLibrary/connect/community/community.service';
-import {ConfigurationService}         from '../../openaireLibrary/utils/configuration/configuration.service';
-import {PiwikService}                 from '../../openaireLibrary/utils/piwik/piwik.service';
-
-
-@Component({
-    selector: 'community',
-    templateUrl: 'community.component.html',
-})
-
-export class CommunityComponent {
-  public piwiksub: any;
-  public subfunders: any;
-
-  public pageTitle = "OpenAIRE"
-
-
-
-  params: any;
-  properties:EnvProperties;
-
-
-
-  @Input() communityId = null;
-  public community = null;
-
- 
-  constructor (
-      private route: ActivatedRoute,
-      private _router: Router,
-      private location: Location,
-      private _meta: Meta,
-      private _title: Title,
-      private _piwikService:PiwikService,
-      private config: ConfigurationService,
-      private _communityService:CommunityService ) {
-
-          var description = "Community Dashboard";
-          var title = "Community Dashboard";
-          this._meta.updateTag({content:description},"name='description'");
-          this._meta.updateTag({content:description},"property='og:description'");
-          this._meta.updateTag({content:title},"property='og:title'");
-          this._title.setTitle(title);
-
-  }
-
-  public ngOnInit() {
-    this.route.data
-        .subscribe((data: { envSpecific: EnvProperties }) => {
-          console.log("here:"+this.communityId);
-          this.properties = data.envSpecific;
-          var url = data.envSpecific.baseLink+this._router.url;
-          this._meta.updateTag({content:url},"property='og:url'");
-          this.route.params.subscribe(params => {
-               this.communityId = params['id'];
-               console.log("communityId:"+this.communityId);
-
-               if (this.communityId != null && this.communityId != '') {
-                 this._communityService.getCommunity(this.properties, this.properties.communityAPI+this.communityId).subscribe (
-                   community => {
-                     this.community = community;
-                     this.params = {communityId: community.communityId};
-                     this._meta.updateTag({content:community.description},"name='description'");
-                     this._meta.updateTag({content:community.description},"property='og:description'");
-                     this._meta.updateTag({content:community.title},"property='og:title'");
-                     this._title.setTitle(community.title);
-
-                   });
-
-
-                 }
-         });
-
-      });
-  }
-
-  public ngOnDestroy() {
-    if(this.piwiksub){
-      this.piwiksub.unsubscribe();
-    }
-  }
-
-
-}
diff --git a/src/app/initiatives/community/community.module.ts b/src/app/initiatives/community/community.module.ts
deleted file mode 100644
index 3578c95..0000000
--- a/src/app/initiatives/community/community.module.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { NgModule}            from '@angular/core';
-import { CommonModule }        from '@angular/common';
-import { FormsModule }         from '@angular/forms';
-import { RouterModule } from '@angular/router';
-
-import{CommunityRoutingModule} from './community-routing.module';
-import{CommunityComponent} from './community.component';
-
-import {PiwikService} from '../../openaireLibrary/utils/piwik/piwik.service';
-import {ConfigurationService} from '../../openaireLibrary/utils/configuration/configuration.service';
-import {CommunityService} from '../../openaireLibrary/connect/community/community.service';
-
-import {FreeGuard} from '../../openaireLibrary/login/freeGuard.guard';
-import {PreviousRouteRecorder} from '../../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
-
-
-@NgModule({
-  imports: [
-    CommonModule, FormsModule, RouterModule, CommunityRoutingModule
-  ],
-  declarations: [
-    CommunityComponent
-  ],
-  providers:[
-    FreeGuard, PreviousRouteRecorder, ConfigurationService,
-    PiwikService, CommunityService
-  ],
-  exports: [
-    CommunityComponent
-  ]
-})
-export class CommunityModule { }
diff --git a/src/app/learn-how/learn-how-routing.module.ts b/src/app/learn-how/learn-how-routing.module.ts
new file mode 100644
index 0000000..ca8e08c
--- /dev/null
+++ b/src/app/learn-how/learn-how-routing.module.ts
@@ -0,0 +1,17 @@
+import {NgModule}     from '@angular/core';
+import {RouterModule} from '@angular/router';
+
+import {FreeGuard}              from '../openaireLibrary/login/freeGuard.guard';
+import {PreviousRouteRecorder}  from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
+import {LearnHowComponent} from "./learn-how.component";
+import {IsRouteEnabled} from "../openaireLibrary/error/isRouteEnabled.guard";
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+     	{ path: '', component: LearnHowComponent, canActivate: [FreeGuard, IsRouteEnabled], canDeactivate: [PreviousRouteRecorder] }
+
+    ])
+  ]
+})
+export class LearnHowRoutingModule { }
diff --git a/src/app/learn-how/learn-how.component.ts b/src/app/learn-how/learn-how.component.ts
new file mode 100644
index 0000000..50a1d91
--- /dev/null
+++ b/src/app/learn-how/learn-how.component.ts
@@ -0,0 +1,228 @@
+import {Component} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+import {Meta, Title} from '@angular/platform-browser';
+import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
+import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
+import {HelperService} from "../openaireLibrary/utils/helper/helper.service";
+import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
+
+@Component({
+  selector: 'learn-how',
+  template: `
+    <schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other"></schema2jsonld>
+
+    <ng-template #one>
+      <h5 class="uk-text-bold uk-margin-small-bottom">1. Understanding your needs</h5>
+      <div>
+        First, we learn about your requirements and challenges. We help you understand Open Science practices within
+        EOSC and together we’ll talk about how OpenAIRE RCD fits as a solution.
+      </div>
+    </ng-template>
+    <ng-template #two>
+      <h5 class=" uk-text-bold uk-margin-small-bottom">2. Develop a pilot</h5>
+      <div>
+        How do you work today, and how would you like to work tomorrow? We translate your needs into rules and processes
+        and we configure operational OpenAIRE services. By the end of this phase, we’ll have defined the basic
+        configuration of your Community Gateway.
+      </div>
+    </ng-template>
+    <ng-template #three>
+      <h5 class="uk-text-bold uk-margin-small-bottom">3. Test and Validate</h5>
+      <div>
+        You validate and test your new Community Gateway (portal) with your experts and community to ensure all
+        workflows are in place and quality of data meets your standards. If needed, we work together in another
+        iteration to further refine and adapt to your needs.
+      </div>
+    </ng-template>
+    <ng-template #four>
+      <h5 class=" uk-text-bold uk-margin-small-bottom">4. Roll out the service</h5>
+      <div>
+        We jointly roll out your new Community Gateway. You take over the business operations and start engaging your
+        researchers, we take care of the smooth operation of the e-service.
+      </div>
+    </ng-template>
+    <div class="image-front-topbar"
+         uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}"
+         tm-header-transparent="light" tm-header-transparent-placeholder="">
+      <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
+              [texts]="pageContents['top']"></helper>
+      <!--<div style=" min-height: calc(7.89999px + 60vh); background-image: url('assets/about/background.png') !important;"
+           class="uk-section uk-background-norepeat uk-background-cover uk-section-overlap uk-position-relative uk-preserve-color">
+        <div class="uk-container uk-container-large uk-section uk-margin-top uk-padding-remove-top">
+          <div class="uk-margin-large-top uk-grid">
+            <h1 class="uk-width-1-1 font-41 uk-text-bold">Learn the process</h1>
+            <div class="uk-width-1-2@l uk-width-1-1@s uk-h5 uk-margin-top">Build a <b>Gateway to your community's</b>
+              open and linked research outcomes. Customized to your needs.
+            </div>
+          </div>
+          <div class="uk-margin-large-top uk-flex uk-child-width-1-3@m uk-child-width-1-1@s uk-flex-center" uk-grid>
+            <div class="uk-flex uk-child-width-1-1@m uk-child-width-1-2@s" uk-grid>
+              <div>
+                <ng-container *ngTemplateOutlet="one"></ng-container>
+              </div>
+              <div class="uk-visible@m">
+                <ng-container *ngTemplateOutlet="four"></ng-container>
+              </div>
+              <div class="uk-hidden@m">
+                <ng-container *ngTemplateOutlet="two"></ng-container>
+              </div>
+            </div>
+            <div>
+              <img src="../../assets/about/cycle.png">
+            </div>
+            <div class="uk-flex uk-child-width-1-1@m uk-child-width-1-2@s" uk-grid>
+              <div class="uk-visible@m">
+                <ng-container *ngTemplateOutlet="two"></ng-container>
+              </div>
+              <div class="uk-hidden@m uk-visible@s">
+                <ng-container *ngTemplateOutlet="four"></ng-container>
+              </div>
+              <div>
+                <ng-container *ngTemplateOutlet="three"></ng-container>
+              </div>
+              <div class="uk-hidden@s uk-visible@xs">
+                <ng-container *ngTemplateOutlet="four"></ng-container>
+              </div>
+            </div>
+          </div>
+          <div class="uk-width-1-1 uk-text-center uk-text-large uk-margin-large-top">
+            <a class="uk-button portal-button uk-text-uppercase" routerLinkActive="router-link-active"
+               routerLink="/about/learn-in-depth"> Learn more details</a>
+          </div>
+        </div>
+      </div>
+      <div style="background-image: url('assets/cloud/abstract.png') !important;"
+        class="uk-background-norepeat uk-section uk-background-center uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color">
+        <div class="uk-container uk-container-large">
+          <gif-slider [gifs]="gifs"></gif-slider>
+        </div>
+      </div>
+      <div style="background-color: #CFDEF1;"
+        class="uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color">
+        <div class="uk-container uk-container-large uk-section">
+          <div class="uk-flex uk-flex-middle uk-padding" uk-grid>
+            <div class="uk-width-expand">
+              <div class="uk-text-bold uk-h4">We look forward to working together and helping you unlock the full
+                potential of your research community through open science.
+              </div>
+              <div class="uk-margin-medium">Get in touch with our team to find out how.</div>
+              <div class="uk-inline">
+                <a class="uk-button portal-button" routerLinkActive="router-link-active" routerLink="/contact-us">
+                  CONTACT US</a>
+              </div>
+            </div>
+            <div class="uk-text-center uk-width-1-1@s uk-width-1-3@m">
+              <img width="263" height="250" src="assets/connect-assets/contact/3.png">
+            </div>
+          </div>
+        </div>
+      </div>-->
+    </div>
+  `
+})
+export class LearnHowComponent {
+  public piwiksub: any;
+  public gifs: { "gif": string, "header": string, "text" }[] = [];
+  public pageContents = null;
+  public divContents = null;
+
+  public url: string = null;
+  public pageTitle: string = "OpenAIRE - Connect | Learn How";
+
+  properties: EnvProperties;
+
+  constructor(
+    private route: ActivatedRoute,
+    private _router: Router,
+    private _meta: Meta,
+    private _title: Title,
+    private seoService: SEOService,
+    private _piwikService: PiwikService,
+    private helper: HelperService) {}
+
+  public ngOnInit() {
+    this.route.data
+      .subscribe((data: { envSpecific: EnvProperties }) => {
+        this.properties = data.envSpecific;
+
+        if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
+          this.piwiksub = this._piwikService.trackView(this.properties, this.pageTitle, this.properties.piwikSiteId).subscribe();
+        }
+        this.url = this.properties.baseLink + this._router.url;
+        this.seoService.createLinkForCanonicalURL(this.url);
+        this.updateUrl(this.url);
+        this.updateTitle(this.pageTitle);
+        this.updateDescription("OpenAIRE - Connect, Community Gateway, research community");
+
+        //this.getDivContents();
+        this.getPageContents();
+      });
+    this.createGifs();
+  }
+
+  private getPageContents() {
+    this.helper.getPageHelpContents(this._router.url, this.properties, 'connect').subscribe(contents => {
+      this.pageContents = contents;
+    })
+  }
+
+  private getDivContents() {
+    this.helper.getDivHelpContents(this._router.url, this.properties, 'connect').subscribe(contents => {
+      this.divContents = contents;
+    })
+  }
+
+  public ngOnDestroy() {
+    if (this.piwiksub) {
+      this.piwiksub.unsubscribe();
+    }
+  }
+
+  private createGifs() {
+    this.gifs.push({
+      gif: "assets/connect-assets/about/gifs/profile.gif",
+      header: "Profile",
+      text: "Edit community information, change logo url, add community managers or organizations related to community."
+    });
+    this.gifs.push({
+      gif: "assets/connect-assets/about/gifs/content.gif",
+      header: "Content",
+      text: "Manage projects, content providers, subjects and zenodo communities that are related to the research community."
+    });
+    this.gifs.push({
+      gif: "assets/connect-assets/about/gifs/statistics.gif",
+      header: "Statistics & Charts",
+      text: "Manage statistical numbers & charts that will be displayed in the community overview and graph analysis views."
+    });
+    this.gifs.push({
+      gif: "assets/connect-assets/about/gifs/links.gif",
+      header: "Links",
+      text: " Manage user claims related to the research community."
+    });
+    this.gifs.push({
+      gif: "assets/connect-assets/about/gifs/help.gif",
+      header: " Help texts",
+      text: "Add or edit help text in research community pages."
+    });
+    this.gifs.push({
+      gif: "assets/connect-assets/about/gifs/users.gif",
+      header: "Users",
+      text: "Invite more users to subscribe, manage community subscribers, your personal info and notification settings."
+    });
+  }
+
+  private updateDescription(description: string) {
+    this._meta.updateTag({content: description}, "name='description'");
+    this._meta.updateTag({content: description}, "property='og:description'");
+  }
+
+  private updateTitle(title: string) {
+    var _title = ((title.length > 50) ? title.substring(0, 50) : title);
+    this._title.setTitle(_title);
+    this._meta.updateTag({content: _title}, "property='og:title'");
+  }
+
+  private updateUrl(url: string) {
+    this._meta.updateTag({content: url}, "property='og:url'");
+  }
+}
diff --git a/src/app/learn-how/learn-how.module.ts b/src/app/learn-how/learn-how.module.ts
new file mode 100644
index 0000000..9848b5a
--- /dev/null
+++ b/src/app/learn-how/learn-how.module.ts
@@ -0,0 +1,32 @@
+import { NgModule}      from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+
+import {FreeGuard}      from '../openaireLibrary/login/freeGuard.guard';
+import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
+import {PiwikService}          from '../openaireLibrary/utils/piwik/piwik.service';
+
+import {LearnHowComponent} from "./learn-how.component";
+import {LearnHowRoutingModule} from "./learn-how-routing.module";
+import {GifSliderModule} from "../openaireLibrary/utils/gif-slider/gif-slider.module";
+import {HelperModule} from "../openaireLibrary/utils/helper/helper.module";
+import {IsRouteEnabled} from "../openaireLibrary/error/isRouteEnabled.guard";
+import {Schema2jsonldModule} from "../openaireLibrary/sharedComponents/schema2jsonld/schema2jsonld.module";
+import {SEOServiceModule} from "../openaireLibrary/sharedComponents/SEO/SEOService.module";
+
+@NgModule({
+  imports: [
+    CommonModule, RouterModule, LearnHowRoutingModule, GifSliderModule, HelperModule,
+    Schema2jsonldModule, SEOServiceModule
+  ],
+  declarations: [
+    LearnHowComponent
+  ],
+  exports: [
+    LearnHowComponent
+  ],
+  providers:[
+    FreeGuard, PreviousRouteRecorder, PiwikService, IsRouteEnabled
+  ]
+})
+export class LearnHowModule { }
diff --git a/src/app/learn-how/learnInDepth/learn-in-depth-routing.module.ts b/src/app/learn-how/learnInDepth/learn-in-depth-routing.module.ts
new file mode 100644
index 0000000..d1ab12f
--- /dev/null
+++ b/src/app/learn-how/learnInDepth/learn-in-depth-routing.module.ts
@@ -0,0 +1,17 @@
+import {NgModule}     from '@angular/core';
+import {RouterModule} from '@angular/router';
+
+import {FreeGuard}              from '../../openaireLibrary/login/freeGuard.guard';
+import {PreviousRouteRecorder}  from '../../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
+import {LearnInDepthComponent} from "./learn-in-depth.component";
+import {IsRouteEnabled} from "../../openaireLibrary/error/isRouteEnabled.guard";
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      { path: '', component: LearnInDepthComponent, canActivate: [FreeGuard, IsRouteEnabled], canDeactivate: [PreviousRouteRecorder] }
+
+    ])
+  ]
+})
+export class LearnInDepthRoutingModule { }
diff --git a/src/app/learn-how/learnInDepth/learn-in-depth.component.ts b/src/app/learn-how/learnInDepth/learn-in-depth.component.ts
new file mode 100644
index 0000000..9796700
--- /dev/null
+++ b/src/app/learn-how/learnInDepth/learn-in-depth.component.ts
@@ -0,0 +1,279 @@
+import {Component} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+import {Meta, Title} from '@angular/platform-browser';
+import {PiwikService} from '../../openaireLibrary/utils/piwik/piwik.service';
+import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';
+import {HelperService} from "../../openaireLibrary/utils/helper/helper.service";
+import {SEOService} from "../../openaireLibrary/sharedComponents/SEO/SEO.service";
+
+@Component({
+  selector: 'learn-in-depth',
+  template: `
+    <schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other"></schema2jsonld>
+
+    <div class="image-front-topbar"
+         uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}"
+         tm-header-transparent="light" tm-header-transparent-placeholder="">
+      <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
+              [texts]="pageContents['top']"></helper>
+      <!--<div
+        class="uk-background-norepeat uk-background-cover uk-section uk-padding-remove-bottom uk-section-overlap uk-position-relative uk-preserve-color"
+        style="min-height: calc(7.89999px + 60vh); background-image: url('assets/cloud/background.png') !important;">
+        <div class="uk-container uk-container-large uk-section uk-margin-top uk-padding-remove-top">
+          <div uk-grid>
+            <div class="uk-margin-large-top uk-width-3-4@m uk-width-1-1@s">
+              <h1 class="uk-width-3-4  uk-margin-medium-bottom">Let’s set up a Gateway for your Community
+                <b>Together</b></h1>
+              <div class="uk-width-4-5@m uk-width-1-1@s uk-h5">
+                <div class="uk-margin-bottom">You don’t have to go alone.</div>
+                <div>
+                  We work with you in <b>4 collaborative steps</b> to identify your needs, putting in practice our
+                  expertise on open science so you get the most out of OpenAIRE’s operational services.
+                </div>
+              </div>
+            </div>
+            <div class="uk-margin-large-top uk-width-expand">
+              <img width="308" height="285" src="assets/connect-assets/banner/together.png">
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="uk-container uk-container-large uk-section uk-padding-remove-top">
+        <ul class="uk-breadcrumb">
+          <li><a routerLinkActive="router-link-active" routerLink="/about">About</a></li>
+          <li><span class="active">Learn in-depth</span></li>
+        </ul>
+        <div uk-grid>
+          <div class="uk-width-1-6 uk-position-relative uk-flex uk-flex-column">
+            <img src="assets/connect-assets/about/1.png" class="uk-align-center" width="100px" height="100px">
+            <img src="assets/connect-assets/sketch_line_arrow.svg" class="uk-align-center">
+          </div>
+          <div class="uk-width-expand">
+            <div class="uk-margin-medium uk-text-bold uk-h4">1. Analyse your needs</div>
+            <i>Identify the scope and goals. Understand open science practices within EOSC and the OpenAIRE
+              services</i>
+
+            <p>
+              In this stage, you get to talk to the OpenAIRE team.
+              Share your expectations with us and let us give you all the details about the operational OpenAIRE
+              services, which will be integrated into the Gateway for your community.
+            </p>
+            <p>
+              Here are the most important questions that the OpenAIRE team will ask you, in order to understand your
+              scope and goals:
+            </p>
+            <ul class="uk-list uk-list-bullet">
+              <li>
+                Do you want a gateway, where researchers can have access to all research products of a discipline?
+                Do you want a gateway that gathers any research outcome, produced thanks to the funding and services
+                of a given research infrastructure?
+              </li>
+              <li>
+                Is your community (in)formally organized in sub-communities?
+                Would you like to browse research products and get statistics also for these sub-communities?
+                For example, the European Grid Infrastructure (EGI) features “virtual organizations” that represent
+                discipline-specific communities and/or specific research projects.
+                The research infrastructure DARIAH, on the other hand, is organised in national nodes (e.g.
+                DARIAH-IT, DARIAH-DE).
+              </li>
+              <li>
+                How can the OpenAIRE team identify the research products of your community, among all those
+                available in the OpenAIRE Graph?
+                Through a series of steps: set of keywords, acknowledgment statements, set of projects, set of
+                repositories, etc.
+                This can be partial and provisional information that will serve as a starting point to the OpenAIRE
+                team.
+                You will be able to refine and update this information, in the second phase “Develop a pilot”.
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        <div uk-grid uk-height-match>
+          <div class="uk-width-1-6 uk-position-relative uk-flex uk-flex-column">
+            <img src="assets/connect-assets/about/2.png" class="uk-align-center" width="100px" height="100px">
+            <img src="assets/connect-assets/sketch_line_arrow.svg" class="uk-align-center">
+          </div>
+          <div class="uk-width-expand">
+            <div class="uk-margin-medium uk-text-bold uk-h4">2. Develop a pilot</div>
+            <i>We translate your needs into rules and processes and we configure operational OpenAIRE services.</i>
+
+            <p>
+              Based on the information gathered in phase 1 “Analyse your needs”, the OpenAIRE team will set up a
+              pilot Gateway.
+              We will configure the OpenAIRE mining algorithms to identify research products of the OpenAIRE Graph
+              that are relevant to your community.
+              Those, together with some basic statistics, will be available in the pilot version of the Community
+              Gateway that will be deployed on the OpenAIRE BETA infrastructure.
+            </p>
+            <p>
+              The OpenAIRE team will give you a demo of the Community Gateway, with details on how to refine and
+              update the configuration of the Community Gateway, both in terms of criteria for including research
+              products and in terms of logo and visible portal pages.
+            </p>
+          </div>
+        </div>
+        <div uk-grid uk-height-match>
+          <div class="uk-width-1-6 uk-position-relative uk-flex uk-flex-column">
+            <img src="assets/connect-assets/about/3.png" class="uk-align-center" width="100px" height="100px">
+            <img src="assets/connect-assets/sketch_line_arrow_large.svg" class="uk-align-center">
+          </div>
+          <div class="uk-width-expand">
+            <div class="uk-margin-medium uk-text-bold uk-h4">3. Test and Validate</div>
+            <i>You validate and test your new Community Gateway (portal). If needed, we further refine and adapt to
+              your needs</i>
+
+            <p>
+              Upon the completion of phase 2, take the time you need to test all its features, from search and
+              browse for research products, to addition/removal of statistics from the portal.
+              You can report any issue you might find and ask questions directly to the dedicated OpenAIRE team, via
+              a specially designed collaboration tool.
+            </p>
+            <p>
+              Typically, this phase takes some months, as you will have to go through certain procedures.
+              Change the configuration of the criteria to include research products, wait for the new configuration
+              to be applied on the OpenAIRE graph and validate the results, before you actually decide that the
+              coverage of research products for your community is adequate.
+            </p>
+            <p>
+              For some communities, the OpenAIRE team may also be able to implement dedicated mining algorithms
+              (e.g. to find acknowledgement statements to your community/infrastructure in the full-texts of
+              research articles) that may require several rounds of application, validation, and fine-tuning, before
+              it reaches a high precision and recall.
+              Your feedback is very important to minimize the effort and time needed for this process to complete.
+            </p>
+
+            <div class="uk-width-1-1 uk-text-center uk-margin-medium ">
+              <img src="assets/connect-assets/OpenAIRE-RCD_howtos.png" width="auto" height="auto">
+            </div>
+          </div>
+        </div>
+        <div uk-grid uk-height-match>
+          <div class="uk-width-1-6 uk-position-relative">
+            <img src="assets/connect-assets/about/4.png" class="uk-align-center" width="100px" height="100px">
+          </div>
+          <div class="uk-width-expand">
+            <div class="uk-margin-medium  uk-text-bold uk-h4">4. Roll out the service</div>
+            <i>We jointly roll out your new portal. You take over the business operations and start engaging your
+              researchers</i>
+
+            <p>
+              Here we are: the coverage of research products is good, interesting statistics and charts have been
+              selected, and the portal pages available for end-users are ready.
+              We can roll out the Community Gateway and make it available to all the researchers of the community!
+            </p>
+            <p>
+              You, as a Community manager, become the main “promoter” of the Community Gateway.
+              Engage the researchers of your community and, when applicable, inform the managers of the research
+              infrastructure about the availability of tools for impact monitoring.
+            </p>
+            <p>
+              Remember that you will still be able to change the configuration of the Community Gateway in order to
+              address any issue that may arise and to follow the evolution of the community (e.g. a new project or a
+              new content provider that was not previously available in OpenAIRE).
+            </p>
+            <p>
+              Remember that you don’t have to go alone: the dedicated issue tracker you used in the “Test and
+              Validate” phase is always available for you to contact the OpenAIRE team and ask for support.
+            </p>
+          </div>
+        </div>
+      </div>
+      <div style="background-color: #CFDEF1;"
+        class="uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color">
+        <div class="uk-container uk-container-large uk-section">
+          <div class="uk-flex uk-flex-middle uk-padding" uk-grid>
+            <div class="uk-text-center uk-width-1-1@s uk-width-1-2@m">
+              <img width="329" height="250" src="assets/connect-assets/contact/2.png">
+            </div>
+            <div class="uk-width-expand">
+              <div class="uk-text-bold uk-h4">
+                <div>Let us help you develop a collaborative Open Science Gateway for your community. It is fast. It
+                  is reliable.
+                </div>
+              </div>
+              <div class="uk-margin-medium">Get in touch with our team to find out how.</div>
+              <div class="uk-inline">
+                <a class="uk-button portal-button" routerLink="/contact-us" routerLinkActive="router-link-active">
+                  CONTACT
+                  US</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>-->
+    </div>
+  `
+})
+export class LearnInDepthComponent {
+  public piwiksub: any;
+  public pageContents = null;
+  public divContents = null;
+
+  public url: string = null;
+  public pageTitle: string = "OpenAIRE - Connect | Learn In Depth";
+
+  properties: EnvProperties;
+
+  constructor(
+    private route: ActivatedRoute,
+    private _router: Router,
+    private _meta: Meta,
+    private _title: Title,
+    private seoService: SEOService,
+    private _piwikService: PiwikService,
+    private helper: HelperService) {
+  }
+
+  public ngOnInit() {
+    this.route.data
+      .subscribe((data: { envSpecific: EnvProperties }) => {
+        this.properties = data.envSpecific;
+
+        if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
+          this.piwiksub = this._piwikService.trackView(this.properties, this.pageTitle, this.properties.piwikSiteId).subscribe();
+        }
+        this.url = this.properties.baseLink + this._router.url;
+        this.seoService.createLinkForCanonicalURL(this.url);
+        this.updateUrl(this.url);
+        this.updateTitle(this.pageTitle);
+        this.updateDescription("OpenAIRE - Connect, Community Gateway, research community");
+
+        //this.getDivContents();
+        this.getPageContents();
+      });
+  }
+
+  private getPageContents() {
+    this.helper.getPageHelpContents(this._router.url, this.properties, 'connect').subscribe(contents => {
+      this.pageContents = contents;
+    })
+  }
+
+  private getDivContents() {
+    this.helper.getDivHelpContents(this._router.url, this.properties, 'connect').subscribe(contents => {
+      this.divContents = contents;
+    })
+  }
+
+  public ngOnDestroy() {
+    if (this.piwiksub) {
+      this.piwiksub.unsubscribe();
+    }
+  }
+
+  private updateDescription(description: string) {
+    this._meta.updateTag({content: description}, "name='description'");
+    this._meta.updateTag({content: description}, "property='og:description'");
+  }
+
+  private updateTitle(title: string) {
+    var _title = ((title.length > 50) ? title.substring(0, 50) : title);
+    this._title.setTitle(_title);
+    this._meta.updateTag({content: _title}, "property='og:title'");
+  }
+
+  private updateUrl(url: string) {
+    this._meta.updateTag({content: url}, "property='og:url'");
+  }
+}
diff --git a/src/app/learn-how/learnInDepth/learn-in-depth.module.ts b/src/app/learn-how/learnInDepth/learn-in-depth.module.ts
new file mode 100644
index 0000000..d97ba6b
--- /dev/null
+++ b/src/app/learn-how/learnInDepth/learn-in-depth.module.ts
@@ -0,0 +1,31 @@
+import { NgModule}      from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+
+import {FreeGuard}      from '../../openaireLibrary/login/freeGuard.guard';
+import {PreviousRouteRecorder} from '../../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
+import {PiwikService}          from '../../openaireLibrary/utils/piwik/piwik.service';
+
+import {LearnInDepthComponent} from "./learn-in-depth.component";
+import {LearnInDepthRoutingModule} from "./learn-in-depth-routing.module";
+import {HelperModule} from "../../openaireLibrary/utils/helper/helper.module";
+import {IsRouteEnabled} from "../../openaireLibrary/error/isRouteEnabled.guard";
+import {Schema2jsonldModule} from "../../openaireLibrary/sharedComponents/schema2jsonld/schema2jsonld.module";
+import {SEOServiceModule} from "../../openaireLibrary/sharedComponents/SEO/SEOService.module";
+
+@NgModule({
+  imports: [
+    CommonModule, RouterModule, LearnInDepthRoutingModule, HelperModule,
+    Schema2jsonldModule, SEOServiceModule
+  ],
+  declarations: [
+    LearnInDepthComponent
+  ],
+  exports: [
+    LearnInDepthComponent
+  ],
+  providers:[
+    FreeGuard, PreviousRouteRecorder, PiwikService, IsRouteEnabled
+  ]
+})
+export class LearnInDepthModule { }
diff --git a/src/app/login/libUser.module.ts b/src/app/login/libUser.module.ts
index b1040ce..2e51871 100644
--- a/src/app/login/libUser.module.ts
+++ b/src/app/login/libUser.module.ts
@@ -7,14 +7,16 @@ import { UserRoutingModule } from './user-routing.module';
 import { UserModule} from '../openaireLibrary/login/user.module';
 
 import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
+import { SubscribeService } from '../openaireLibrary/utils/subscribe/subscribe.service';
+import {EmailService} from "../openaireLibrary/utils/email/email.service";
+import {SubscribeModule} from '../utils/subscribe/subscribe.module';
 
 @NgModule({
   imports: [
     CommonModule, FormsModule,
-    UserRoutingModule, UserModule
-
+    UserRoutingModule, UserModule, SubscribeModule
   ],
-  providers:[PreviousRouteRecorder],
+  providers:[PreviousRouteRecorder, SubscribeService, EmailService],
   declarations: [
 OpenaireUserComponent
 
diff --git a/src/app/login/user.component.ts b/src/app/login/user.component.ts
index 0b7e1a3..360e770 100644
--- a/src/app/login/user.component.ts
+++ b/src/app/login/user.component.ts
@@ -1,11 +1,106 @@
-import {Component, ElementRef} from '@angular/core';
-import {Observable}       from 'rxjs/Observable';
+import {Component, ElementRef, ViewChild} from '@angular/core';
+import {Observable} from 'rxjs/Observable';
+import {ActivatedRoute} from '@angular/router';
+
+import {UserComponent} from '../openaireLibrary/login/user.component';
+import {SubscribeService} from '../openaireLibrary/utils/subscribe/subscribe.service';
+import {EmailService} from "../openaireLibrary/utils/email/email.service";
+import {Email} from "../openaireLibrary/utils/email/email";
+
+import {Session} from '../openaireLibrary/login/utils/helper.class';
+import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
+import {SubscribeComponent} from '../utils/subscribe/subscribe.component';
+import {ConnectHelper} from '../openaireLibrary/connect/connectHelper';
 
 @Component({
-    selector: 'openaire-user',
-    template: `<user></user>`
-  })
+  selector: 'openaire-user',
+  template: `
+<div id="tm-main" class="uk-section  uk-margin-small-top tm-middle">
+
+  <user [mainComponent]=false></user>
+  <div *ngIf="!server" class=" uk-container uk-container-small uk-position-relative">
+
+    <div *ngIf="usercomponent.errorCode == '6' && !isSubscribed" class="uk-alert uk-alert-warning">
+      <span *ngIf="!isSubscribed ">For this action you have to <span *ngIf="!loggedIn">login and</span> subscribe to the research community.
+        <span *ngIf="subscribe && !subscribeLoading "> <span *ngIf="!loggedIn">Login and </span>Subscribe <a [class]="'' + (subscribe.loading ? ' uk-disabled' : '')"  (click)="subscribeTo()"  > here</a>.</span>
+      </span>
+      <span *ngIf="subscribeLoading ">Subscribing to community....</span>
+      <span *ngIf="subscribeError ">An error occured while trying to subscribe to community....</span>
+
+    </div>
+    <div *ngIf="usercomponent.errorCode == '7'" class="uk-alert uk-alert-warning">
+      This action requires authentication.
+      <span  *ngIf="!loggedIn">
+        Please  <a  class=""  (click)="login()"  > sign in</a> to continue.
+       </span>
+    </div>
+
+
+  </div>
+</div>
+    <subscribe  [communityId]="communityId" [showTemplate]= false class="" (subscribeEvent)="afterSubscibeEvent($event)"></subscribe>
+    `
+})
 
 export class OpenaireUserComponent {
+  @ViewChild(UserComponent) usercomponent:UserComponent;
+  @ViewChild(SubscribeComponent) subscribe:SubscribeComponent;
+  properties:EnvProperties;
+  communityId = null;
+  subscribeLoading:boolean = false;
+  subscribeError:boolean = false;
+  isSubscribed:boolean = false;
+  public server: boolean = true;
+  loggedIn:boolean = false;
+  constructor(private _subscribeService: SubscribeService,
+              private _emailService: EmailService, private route: ActivatedRoute){}
+  public ngOnInit() {
+    if( typeof document !== 'undefined') {
+      this.server = false;
+      this.loggedIn = Session.isLoggedIn();
+    }
+    this.route.data
+      .subscribe((data: { envSpecific: any }) => {
+        this.route.queryParams.subscribe(
+          communityId => {
+            this.communityId  = ConnectHelper.getCommunityFromDomain(data.envSpecific.domain);
+            if(!this.communityId) {
+              this.communityId = communityId['communityId'];
+            }
+            if(this.subscribe.subscribed){
+              this.usercomponent.redirect();
+            }
+          });
+      });
+
+
+
+  }
+  login(){
+    this.usercomponent.logIn();
+
+  }
+  subscribeTo(){
+    if(this.subscribe && this.communityId){
+      this.subscribeLoading = true;
+      this.subscribe.subscribe();
+
+
+
+    }
+
+  }
+  afterSubscibeEvent($event){
+    var res = $event.value;
+    this.subscribeLoading = false;
+    this.isSubscribed = this.subscribe.subscribed;
+    if(res == "ok"){
+      this.isSubscribed = true;
+      this.usercomponent.redirect();
+    }else{
+      this.subscribeError = true;
+    }
+
+  }
 
 }
diff --git a/src/app/my-communities/my-communities-routing.module.ts b/src/app/my-communities/my-communities-routing.module.ts
new file mode 100644
index 0000000..e359a0d
--- /dev/null
+++ b/src/app/my-communities/my-communities-routing.module.ts
@@ -0,0 +1,17 @@
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
+import {MyCommunitiesComponent} from "./my-communities.component";
+import {LoginGuard} from "../openaireLibrary/login/loginGuard.guard";
+import {IsRouteEnabled} from "../openaireLibrary/error/isRouteEnabled.guard";
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {path: '', component: MyCommunitiesComponent, canActivate: [LoginGuard, IsRouteEnabled], canDeactivate: [PreviousRouteRecorder]}
+
+    ])
+  ]
+})
+export class MyCommunitiesRoutingModule {
+}
diff --git a/src/app/my-communities/my-communities.component.html b/src/app/my-communities/my-communities.component.html
new file mode 100644
index 0000000..d97027b
--- /dev/null
+++ b/src/app/my-communities/my-communities.component.html
@@ -0,0 +1,114 @@
+<schema2jsonld [URL]="properties.baseLink"
+               [logoURL]="properties.baseLink+'/assets/common-assets/logo-small-connect.png'" type="home"
+               name="OpenAIRE Connect">
+</schema2jsonld>
+<div
+     class="banner-background image-front-topbar uk-section uk-background-norepeat uk-background-bottom-center uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color"
+     uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}"
+     tm-header-transparent="light" tm-header-transparent-placeholder="">
+  <div class=" uk-section uk-padding-remove-bottom">
+    <div class="uk-position-cover"></div>
+    <div class="uk-position-relative uk-panel">
+      <div *ngIf="loading" class="uk-container uk-container-large uk-height-large">
+        <div class="uk-animation-fade uk-margin-top  uk-width-1-1" role="alert"><span
+          class="loading-gif  uk-align-center"></span></div>
+      </div>
+      <div *ngIf="!loading" class="uk-container uk-container-large">
+        <div class="uk-text-center uk-text-bold uk-h2 uk-margin-bottom">My Communities</div>
+        <div *ngIf="managerOfCommunities.length > 0 || subscriberOfCommunities.length > 0"
+             class="uk-child-width-1-1@s uk-child-width-1-2@m uk-flex uk-flex-middle" uk-grid uk-height-match="target: .community; row: false">
+          <div>
+            <div *ngIf="managerOfCommunities.length > 0" class="uk-grid">
+              <h5 class="uk-width-1-1 uk-text-bold">You are managing</h5>
+              <div class="uk-width-1-1 uk-margin-small-top">
+                <div
+                  class="uk-grid-match uk-grid-small  uk-child-width-1-3@s uk-child-width-1-2 uk-text-center"
+                  uk-grid >
+                  <div *ngFor="let community of managerOfCommunities.slice(0,3); let i = index">
+                    <div class="uk-padding-small uk-card uk-card-default uk-card-small communityCard"
+                         title="{{community.description}}">
+                      <browse-community [community]=community [showDescription]=false></browse-community>
+                    </div>
+                  </div>
+                </div>
+                <div *ngIf="managerOfCommunities.length > 3" class="uk-text-right uk-width-1-1 uk-margin-top">
+                  <a [queryParams]="{role: quote('manager')}" class="portal-link uk-text-uppercase uk-text-bold uk-text-small"
+                     routerLinkActive="router-link-active" routerLink="/search/find/communities">
+                    <div>View all ({{managerOfCommunities.length | number}}) ></div>
+                  </a>
+                </div>
+              </div>
+            </div>
+
+            <div class="uk-container uk-container-large uk-width-4-5">
+              <div *ngIf="subscriberErrorMessage" class="uk-animation-fade uk-alert uk-alert-warning" role="alert">
+                {{subscriberErrorMessage}}
+              </div>
+            </div>
+            <div *ngIf="subscriberOfCommunities.length > 0" class="uk-grid">
+              <h5 class="uk-width-1-1 uk-text-bold">You are subscribed to</h5>
+              <div class="uk-width-1-1 uk-margin-small-top">
+                <div
+                  class="uk-grid-match uk-grid-small uk-child-width-1-3@s uk-child-width-1-2 uk-text-center"
+                  uk-grid>
+                  <div *ngFor="let community of subscriberOfCommunities.slice(0,3); let i = index">
+                    <div class="uk-padding-small  uk-card uk-card-small uk-card-default communityCard"
+                         [attr.uk-tooltip]="((community.description) ? ('title: '+ community.description + '; pos: bottom-right') : 'cls: uk-invisible')">
+                      <browse-community [community]=community [showDescription]=false></browse-community>
+                    </div>
+                  </div>
+                </div>
+                <div *ngIf="subscriberOfCommunities.length > 3" class="uk-text-right uk-width-1-1 uk-margin-top">
+                  <a [queryParams]="{status: quote('subscribed')}" class="portal-link uk-text-uppercase uk-text-bold uk-text-small"
+                     routerLinkActive="router-link-active" routerLink="/search/find/communities">
+                    <div>View all ({{subscriberOfCommunities.length | number}}) ></div>
+                  </a>
+                </div>
+              </div>
+
+            </div>
+
+          </div>
+          <div class="uk-text-center">
+            <img width="200" height="185" src="../../assets/connect-assets/banner/login.png">
+          </div>
+        </div>
+        <div *ngIf="managerOfCommunities.length === 0 && subscriberOfCommunities.length === 0"
+             class="uk-child-width-1-1" uk-grid>
+          <div class="uk-flex uk-flex-center uk-margin-bottom">
+            <div class="uk-card uk-card-default uk-box-shadow-medium uk-width-1-2@m">
+              <div class="uk-card-body uk-text-bold uk-text-center ">
+                You are not yet subscribed in any Communities.<br>
+                Start by browsing and subscribing in those that you are interested in.
+              </div>
+            </div>
+          </div>
+          <div>
+            <errorMessages [status]="[status]" [type]="'communities'"></errorMessages>
+          </div>
+          <div *ngIf="!loading && researchCommunities.length > 0">
+            <div class="uk-text-bold uk-h5">Community Gateways in Action</div>
+            <div [class]="(researchCommunities.length <= 5 ? ' uk-margin-medium-bottom' : '')">
+              <div
+                class="uk-grid-match uk-grid-medium  uk-child-width-1-5@m uk-child-width-1-2 uk-text-center"
+                uk-grid uk-height-match=".community">
+                <div *ngFor="let community of researchCommunities.slice(0, 5); let i = index">
+                  <div class="uk-padding-small uk-card uk-card-default communityCard">
+                    <browse-community [community]=community></browse-community>
+                  </div>
+                </div>
+              </div>
+
+            </div>
+            <div class="uk-text-right uk-margin-top">
+              <a *ngIf="researchCommunities.length > 5" class="portal-link uk-text-uppercase uk-text-bold uk-text-small"
+                 routerLinkActive="router-link-active" routerLink="/search/find/communities">
+                Browse All >
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/app/my-communities/my-communities.component.ts b/src/app/my-communities/my-communities.component.ts
new file mode 100644
index 0000000..0bd1af8
--- /dev/null
+++ b/src/app/my-communities/my-communities.component.ts
@@ -0,0 +1,232 @@
+import {Component} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+import {Meta, Title} from '@angular/platform-browser';
+import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
+import {CommunitiesService} from '../openaireLibrary/connect/communities/communities.service';
+import {SubscribeService} from '../openaireLibrary/utils/subscribe/subscribe.service';
+import {CommunityInfo} from '../openaireLibrary/connect/community/communityInfo';
+
+import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
+import {Session, User} from '../openaireLibrary/login/utils/helper.class';
+import {StringUtils} from '../openaireLibrary/utils/string-utils.class';
+
+import {ErrorCodes} from '../openaireLibrary/utils/properties/errorCodes';
+import {ErrorMessagesComponent} from '../openaireLibrary/utils/errorMessages.component';
+import {HelperService} from "../openaireLibrary/utils/helper/helper.service";
+import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
+import {UserManagementService} from "../openaireLibrary/services/user-management.service";
+
+@Component({
+  selector: 'my-communities',
+  templateUrl: 'my-communities.component.html',
+})
+
+export class MyCommunitiesComponent {
+  public piwiksub: any;
+
+  public pageTitle = "OpenAIRE"
+  public subscriberOfCommunities = [];
+  public managerOfCommunities = [];
+  public researchCommunities = [];
+  public pageContents = null;
+  public divContents = null;
+  // Message variables
+  public status: number;
+  public loading: boolean = true;
+  public subscriberErrorMessage: string = "";
+  public errorCodes: ErrorCodes;
+  private errorMessages: ErrorMessagesComponent;
+
+  properties: EnvProperties;
+  private user: User;
+
+  constructor(
+    private route: ActivatedRoute,
+    private _router: Router,
+    private _meta: Meta,
+    private _title: Title,
+    private _piwikService: PiwikService,
+    private _communitiesService: CommunitiesService,
+    private _subscribeService: SubscribeService,
+    private helper: HelperService,
+    private seoService: SEOService,
+    private userManagementService: UserManagementService) {
+
+    var description = "OpenAIRE - Connect, Community Dashboard, research community " +
+      "| My managing and subscribed to Communities";
+    var title = "OpenAIRE - Connect | My Communities";
+
+    this._meta.updateTag({content: description}, "name='description'");
+    this._meta.updateTag({content: description}, "property='og:description'");
+    this._meta.updateTag({content: title}, "property='og:title'");
+    this._title.setTitle(title);
+
+    this.errorCodes = new ErrorCodes();
+    this.errorMessages = new ErrorMessagesComponent();
+    this.status = this.errorCodes.LOADING;
+  }
+
+  public ngOnInit() {
+    this.route.data
+      .subscribe((data: { envSpecific: EnvProperties }) => {
+        this.properties = data.envSpecific;
+        var url = data.envSpecific.baseLink + this._router.url;
+        this.seoService.createLinkForCanonicalURL(url, false);
+        this._meta.updateTag({content: url}, "property='og:url'");
+        if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
+          this.piwiksub = this._piwikService.trackView(this.properties, "OpenAIRE Connect", this.properties.piwikSiteId).subscribe();
+        }
+        this.userManagementService.getUserInfo(this.properties.userInfoUrl).subscribe(user => {
+          this.user = user;
+          this.getCommunities();
+          //this.getDivContents();
+          //this.getPageContents();
+        });
+      });
+  }
+
+  private getPageContents() {
+    this.helper.getPageHelpContents(this._router.url, this.properties, 'connect').subscribe(contents => {
+      this.pageContents = contents;
+    })
+  }
+
+  private getDivContents() {
+    this.helper.getDivHelpContents(this._router.url, this.properties, 'connect').subscribe(contents => {
+      this.divContents = contents;
+    })
+  }
+
+  public getCommunities() {
+    this.loading = true;
+    this.status = this.errorCodes.LOADING;
+    this.subscriberErrorMessage = "";
+
+    this.subscriberOfCommunities = [];
+    this.managerOfCommunities = [];
+    this.researchCommunities = [];
+
+    this._communitiesService.getCommunitiesState().subscribe(
+      communitiesResults => {
+        if(!communitiesResults){
+          return;
+        }
+        if(communitiesResults.length == 0) {
+          this.status = this.errorCodes.DONE;
+          return;
+        };
+        this.sort(communitiesResults);
+
+        var subscribedLoading = communitiesResults.length;
+        var mail = this.user.email;
+        communitiesResults.forEach((community, index) => {
+          let showCommunity: boolean = true;
+          let isManager: boolean = false;
+          let isSubscriber: boolean = false;
+
+          if (community['status'] == "hidden") {
+            showCommunity = false;
+          } else {
+            if (mail == null && community['status'] == "manager") { // no user
+              showCommunity = false;
+            } else if (Session.isCommunityCurator(this.user) || Session.isPortalAdministrator(this.user)) {
+              isManager = true;
+            } else if (community.managers.indexOf(mail) != -1) {
+              isManager = true;
+            } else if (community['status'] == "manager") {
+              showCommunity = false;
+            }
+          }
+
+          if (showCommunity) {
+            this.researchCommunities.push(community);
+            if (isManager) {
+              community.isManager = true;
+              this.managerOfCommunities.push(community);
+            }
+          }
+
+          this.status = this.errorCodes.DONE;
+
+          if (mail != null && showCommunity) {
+            this._subscribeService.isSubscribedToCommunity(this.properties, community.communityId, mail).subscribe(
+              res => {
+                isSubscriber = res;
+                if (isSubscriber) {
+                  community.isSubscribed = true;
+                  if (isManager) {
+                    this.subscriberOfCommunities.push(community);
+                  } else {
+                    this.subscriberOfCommunities.unshift(community);
+                  }
+                }
+
+                subscribedLoading--;
+                if (subscribedLoading == 0) {
+                  this.loading = false;
+                }
+              },
+              error => {
+                this.handleError("Error getting response if email: " + mail + " is subscribed to community with id: " + community.communityId, error);
+                subscribedLoading--;
+                if (subscribedLoading == 0) {
+                  this.loading = false;
+                }
+              });
+          } else {
+            subscribedLoading--;
+            if (subscribedLoading == 0) {
+              this.loading = false;
+            }
+          }
+        });
+      },
+      error => {
+        this.status = this.handleError("Error getting communities", error);
+        this.loading = false;
+      }
+    );
+  }
+
+  private sort(results: CommunityInfo[]) {
+    results.sort((left, right): number => {
+      if (!right.date || left.date > right.date) {
+        return -1;
+      } else if (!left.date || left.date < right.date) {
+        return 1;
+      } else {
+        if (left.title > right.title) {
+          return 1;
+        } else if (left.title < right.title) {
+          return -1;
+        } else {
+          return 0;
+        }
+      }
+    })
+  }
+
+  public quote(param: string): string {
+    return StringUtils.quote(param);
+  }
+
+  public ngOnDestroy() {
+    if (this.piwiksub) {
+      this.piwiksub.unsubscribe();
+    }
+  }
+
+  private handleError(message: string, error): number {
+    var code = "";
+    if (!error.status) {
+      var error = error.json();
+      code = error.code;
+    } else {
+      code = error.status;
+    }
+
+    console.error("Communities (component): " + message, error);
+
+    return this.errorMessages.getErrorCode(code);
+  }
+}
diff --git a/src/app/my-communities/my-communities.module.ts b/src/app/my-communities/my-communities.module.ts
new file mode 100644
index 0000000..6672fcc
--- /dev/null
+++ b/src/app/my-communities/my-communities.module.ts
@@ -0,0 +1,38 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
+import {RouterModule} from '@angular/router';
+import {ManageModule} from '../openaireLibrary/utils/manage/manage.module';
+
+import {MyCommunitiesComponent} from './my-communities.component';
+import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
+
+import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
+import {ErrorMessagesModule} from '../openaireLibrary/utils/errorMessages.module';
+import {Schema2jsonldModule} from "../openaireLibrary/sharedComponents/schema2jsonld/schema2jsonld.module";
+import {SEOServiceModule} from "../openaireLibrary/sharedComponents/SEO/SEOService.module";
+import {LoginGuard} from "../openaireLibrary/login/loginGuard.guard";
+import {HelperModule} from "../openaireLibrary/utils/helper/helper.module";
+import {BrowseCommunityModule} from "../communities/browseCommunity/browse-community.module";
+import {MyCommunitiesRoutingModule} from "./my-communities-routing.module";
+import {IsRouteEnabled} from "../openaireLibrary/error/isRouteEnabled.guard";
+
+@NgModule({
+  imports: [
+    CommonModule, FormsModule, RouterModule, HelperModule,
+    ManageModule, ErrorMessagesModule, BrowseCommunityModule, Schema2jsonldModule, SEOServiceModule,
+    MyCommunitiesRoutingModule
+  ],
+  declarations: [
+    MyCommunitiesComponent
+  ],
+  providers: [
+    LoginGuard, PreviousRouteRecorder,
+    PiwikService, IsRouteEnabled
+  ],
+  exports: [
+    MyCommunitiesComponent
+  ]
+})
+export class MyCommunitiesModule {
+}
diff --git a/src/app/searchEntries/results/results.component.ts b/src/app/searchEntries/results/results.component.ts
new file mode 100644
index 0000000..f317401
--- /dev/null
+++ b/src/app/searchEntries/results/results.component.ts
@@ -0,0 +1,89 @@
+import {Component, Input} from '@angular/core';
+import {CommunityInfo} from '../../openaireLibrary/connect/community/communityInfo';
+import {EnvProperties} from "../../openaireLibrary/utils/properties/env-properties";
+import {SearchResult} from "../../openaireLibrary/utils/entities/searchResult";
+
+@Component({
+    selector: 'results-comp',
+    template: `        
+     <div class="uk-h5 uk-text-bold  uk-margin-top uk-margin-remove-bottom">Recent research results</div>
+    <div *ngIf="!results && total != 0">
+        <div *ngIf="showLoading" class="uk-animation-fade uk-width-1-1" role="alert"><span class="loading-gif uk-align-center"></span></div>
+    </div>
+    <div *ngIf="results != null && results.length > 0">
+        <div class="uk-text-right">
+            <div>
+                <a class="el-content uk-button uk-button-text" [queryParams]=params routerLinkActive="router-link-active" [routerLink]="'/search/find/'+getresultTypeLink(resultType, true)">
+                View all
+                </a>
+            </div>
+        </div>
+    </div>
+    <div *ngIf="results != null && results.length > 0 && !showLoading">
+      <!--<div class="uk-margin-remove-vertical uk-grid-match uk-child-width-1-1 uk-child-width-1-1@m uk-child-width-1-1@l uk-child-width-1-1@xl uk-grid-small uk-grid uk-grid-stack" uk-grid="">
+        <li *ngFor="let item of results; let i = index">
+         <div class="uk-first-column">
+            <div class="el-item uk-panel">
+              <h6 class="el-title uk-margin uk-h6 uk-text-primary uk-margin-remove-adjacent uk-margin-remove-bottom">
+                <div *ngIf=" community != null && community.communityId != null">
+                    <a [queryParams]="getParamId(resultType,item.id)" routerLinkActive="router-link-active" [routerLink]="'/search/'+getresultTypeLink(resultType, false)" >
+                    {{item.title}} </a>
+                </div>
+                 
+              </h6>
+                <div *ngIf="item.accessRights" class="el-content"><span class=" uk-label  label-{{item.accessRights}}">{{item.accessRights}}</span><br></div>
+                <div>
+                  <span *ngIf="item.authors != null">
+                    <span class="el-meta uk-margin uk-text-meta" *ngFor='let author of item.authors; let i = index'>
+                      <span *ngIf="i < 10">
+                        <span>{{author}}<span *ngIf="i < (item.authors.length-1)">;</span></span>
+                      </span>
+                      <span *ngIf="i == 10">...</span>
+                    </span>
+                  </span>
+                  <span *ngIf="item.year !=''" class="el-meta uk-text-meta"> ({{item.year}}) </span>
+                </div>
+                <div class="text-justify descriptionText"> {{item.description}} </div>
+            </div>
+         </div>
+        </li>
+      </div>-->
+        <search-result  [results]="results"
+                        [type]="resultType"  [properties] = properties class="communityRecentResults">
+        </search-result>
+    </div>
+
+    <div *ngIf="results != null && results.length == 0 || total == 0" class=" uk-alert uk-alert-primary"> No results available </div>
+
+    `
+
+})
+
+export class ResultsComponent {
+
+    @Input() public results : SearchResult[];
+    @Input() public resultType: string;
+    @Input() public params: any;
+    @Input() public community: CommunityInfo;
+    @Input() public total: any;
+    @Input() showLoading: boolean = true;
+    @Input() properties: EnvProperties;
+
+    getresultTypeLink(type:string, plural:boolean){
+        if((type == "publication" || type == "dataset") && plural){
+            return type + "s";
+        }
+        return type;
+    }
+ /*   getParamId(type:string){
+        let param ="";
+        if(type == "publication"){
+            param="article";
+        }else if(type == "other"){
+            param="other";
+        }else{
+            param=type;
+        }
+       return param+"Id";
+    }*/
+}
diff --git a/src/app/searchPages/communities/searchCommunities-routing.module.ts b/src/app/searchPages/communities/searchCommunities-routing.module.ts
new file mode 100644
index 0000000..56bdc63
--- /dev/null
+++ b/src/app/searchPages/communities/searchCommunities-routing.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import {PreviousRouteRecorder} from '../../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
+import {SearchCommunitiesComponent} from "./searchCommunities.component";
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      { path: '', component: SearchCommunitiesComponent, canDeactivate: [PreviousRouteRecorder] }
+
+    ])
+  ]
+})
+export class SearchCommunitiesRoutingModule { }
diff --git a/src/app/searchPages/communities/searchCommunities.component.ts b/src/app/searchPages/communities/searchCommunities.component.ts
new file mode 100644
index 0000000..7bf56b9
--- /dev/null
+++ b/src/app/searchPages/communities/searchCommunities.component.ts
@@ -0,0 +1,484 @@
+import {Component, ViewChild} from "@angular/core";
+import {SearchUtilsClass} from "../../openaireLibrary/searchPages/searchUtils/searchUtils.class";
+import {ErrorMessagesComponent} from "../../openaireLibrary/utils/errorMessages.component";
+import {ErrorCodes} from "../../openaireLibrary/utils/properties/errorCodes";
+import {EnvProperties} from "../../openaireLibrary/utils/properties/env-properties";
+import {SearchPageComponent} from "../../openaireLibrary/searchPages/searchUtils/searchPage.component";
+import {ActivatedRoute} from "@angular/router";
+import {Filter, Value} from "../../openaireLibrary/searchPages/searchUtils/searchHelperClasses.class";
+import {SearchFields} from "../../openaireLibrary/utils/properties/searchFields";
+import {CommunitiesService} from "../../openaireLibrary/connect/communities/communities.service";
+import {Session, User} from "../../openaireLibrary/login/utils/helper.class";
+import {CommunityInfo} from "../../openaireLibrary/connect/community/communityInfo";
+import {SubscribeService} from "../../openaireLibrary/utils/subscribe/subscribe.service";
+import {StringUtils} from "../../openaireLibrary/utils/string-utils.class";
+import {HelperFunctions} from "../../openaireLibrary/utils/HelperFunctions.class";
+import {UserManagementService} from "../../openaireLibrary/services/user-management.service";
+import {url} from "inspector";
+
+@Component({
+  selector: 'search-communities',
+  template: `
+      <search-page pageTitle="OpenAIRE-Connect | Search Communities"
+                   [hasPrefix]=false [piwikSiteId]="piwikSiteId" 
+                   searchFormClass="communitiesSearchForm"
+                   [formPlaceholderText]="'Search for Research Communities' + ((showType)?' and Initiatives':'')"
+                   type="communities" entityType="community" [filters]="filters"
+                   [results]="results" [searchUtils]="searchUtils"
+                   [showResultCount]=true [baseUrl]="baseUrl"
+                   [disableForms]="disableForms"
+                   [lastIndex]=false [sort]=true
+                   [showType]="showType">
+      </search-page>
+  `
+})
+export class SearchCommunitiesComponent {
+  public piwikSiteId = null;
+  private errorCodes: ErrorCodes;
+  private errorMessages: ErrorMessagesComponent;
+  public results: CommunityInfo[] = [];
+  public totalResults: CommunityInfo[] = [];
+  public sub: any; public subResults: any;
+  public filters = [];
+  public searchFields:SearchFields = new SearchFields();
+  public searchUtils:SearchUtilsClass = new SearchUtilsClass();
+  public disableForms: boolean = false;
+  public baseUrl: string = null;
+  public refineFields: string[] =  this.searchFields.COMMUNITIES_SEARCH_FIELDS;
+  public showType = false;
+  properties:EnvProperties;
+  @ViewChild (SearchPageComponent) searchPage : SearchPageComponent ;
+  private user: User;
+
+  constructor (private route: ActivatedRoute,
+               private _communitiesService: CommunitiesService,
+               private _subscribeService: SubscribeService,
+               private userManagementService: UserManagementService) {
+    this.errorCodes = new ErrorCodes();
+    this.errorMessages = new ErrorMessagesComponent();
+    this.searchUtils.status = this.errorCodes.LOADING;
+  }
+
+  public ngOnInit() {
+    this.route.data
+        .subscribe((data: { envSpecific: EnvProperties }) => {
+          this.properties = data.envSpecific;
+          this.piwikSiteId = this.properties.piwikSiteId;
+          this.baseUrl = data.envSpecific.searchLinkToCommunities;
+        });
+    this.sub =  this.route.queryParams.subscribe(params => {
+      this.searchPage.resultsPerPage = 10;
+      this.searchUtils.keyword = (params['keyword']?params['keyword']:'');
+      this.searchUtils.page = (params['page'] === undefined) ? 1: + params['page'];
+      this.searchUtils.sortBy = (params['sortBy'] === undefined)? '' : params['sortBy'];
+      this.searchUtils.size = (params['size'] === undefined) ? this.searchPage.resultsPerPage: +params['size'];
+      this.searchPage.searchUtils = this.searchUtils;
+      if(this.searchUtils.size != 5 && this.searchUtils.size != 10 && this.searchUtils.size != 20 && this.searchUtils.size != 50) {
+        this.searchUtils.size = this.searchPage.resultsPerPage;
+      }
+      if(this.searchUtils.sortBy && this.searchUtils.sortBy != "creationdate,descending" && this.searchUtils.sortBy != "creationdate,ascending") {
+        this.searchUtils.sortBy = "";
+      }
+      this.searchPage.refineFields = this.refineFields;
+      let queryParams = this.searchPage.getQueryParamsFromUrl(params);
+      this.userManagementService.getUserInfo(this.properties.userInfoUrl).subscribe(user => {
+        this.user = user;
+        this.initCommunities(queryParams);
+      });
+    });
+  }
+
+  public ngOnDestroy() {
+    if(this.sub){
+      this.sub.unsubscribe();
+    }
+    if(this.subResults){
+      this.subResults.unsubscribe();
+    }
+  }
+
+  /**
+   * Initialize communities from Communities APIs
+   *
+   * @param params
+   */
+  private initCommunities(params: Map<string, string>) {
+    this.subResults = this._communitiesService.getCommunitiesState().subscribe(
+        data => {
+          if(!data){
+            return;
+          }
+          for(let i = 0; i < data.length; i++) {
+            this.totalResults[i] = data[i];
+            this.totalResults[i].isManager = false;
+            this.totalResults[i].isSubscribed = false;
+            if(this.user) {
+              this.totalResults[i].isManager = this.isCommunityManager(this.totalResults[i]);
+            }
+          }
+          if(this.user) {
+            this._subscribeService.getCommunitiesSubscribedTo(this.properties, this.user.email).subscribe(
+              res => {
+                for (let i = 0; i < this.totalResults.length; i++) {
+                  this.totalResults[i].isSubscribed = (res.indexOf(this.totalResults[i].communityId) != -1);
+                }
+                this._getResults(params);
+              }
+            );
+          }
+          else {
+            this._getResults(params);
+          }
+        },
+        err => {
+          this.handleError('Error getting communities', err);
+          this.searchUtils.status = this.errorMessages.getErrorCode(err.status);
+          this.disableForms = false;
+          HelperFunctions.scroll();
+        }
+      );
+  }
+
+
+  /**
+   * Get all communities from Communities API and apply permission access validator,
+   * keyword searching, filter, paging and sorting.
+   *
+   * @param params, status
+   * @private
+   */
+  private _getResults(params: Map<string, string>){
+    this.searchUtils.status = this.errorCodes.LOADING;
+    this.disableForms = true;
+    this.results = this.totalResults;
+    if(this.filters.length === 0) {
+      this.filters = this.createFilters();
+    }
+    this.searchUtils.totalResults = 0;
+    this.applyParams(params);
+  }
+
+  /**
+   * Return the communities in which user has permission to view or manage.
+   */
+  private showCommunities() {
+    let ret: CommunityInfo[] = [];
+    for(let result of this.results) {
+      if (result.status == 'hidden') {
+        continue;
+      } else if (result.status == "manager") {
+        let mail = (this.user)?this.user.email:null;
+        if (mail == null) { // no user
+          continue;
+        } else if (Session.isCommunityCurator(this.user) || Session.isPortalAdministrator(this.user)) {
+          ret.push(result);
+        } else if (result.managers.indexOf(mail) != -1) {
+          ret.push(result);
+        }
+        continue;
+      }
+      ret.push(result);
+    }
+    this.results = ret;
+  }
+
+  /**
+   * Apply permission access validator,
+   * keyword searching, filter, paging and sorting.
+   *
+   * @param params
+   * @param status
+   */
+  public applyParams(params: Map<string, string>) {
+    this.showCommunities();
+    if(this.searchUtils.keyword && this.searchUtils.keyword != '') {
+      this.searchForKeywords();
+    }
+    this.checkFilters(params);
+    this.sort();
+    this.searchUtils.totalResults = this.results.length;
+    this.searchPage.checkSelectedFilters(this.filters);
+    this.searchPage.updateBaseUrlWithParameters(this.filters);
+    this.results = this.results.slice((this.searchUtils.page-1)*this.searchUtils.size, (this.searchUtils.page*this.searchUtils.size));
+    this.searchUtils.status = this.errorCodes.DONE;
+    if(this.searchUtils.totalResults == 0 ){
+      this.searchUtils.status = this.errorCodes.NONE;
+    }
+    this.disableForms = false;
+    if(this.searchUtils.status == this.errorCodes.DONE) {
+      // Page out of limit!!!
+      let totalPages:any = this.searchUtils.totalResults/(this.searchUtils.size);
+      if(!(Number.isInteger(totalPages))) {
+        totalPages = (parseInt(totalPages, 10) + 1);
+      }
+      if(totalPages < this.searchUtils.page) {
+        this.searchUtils.totalResults = 0;
+        this.searchUtils.status = this.errorCodes.OUT_OF_BOUND;
+      }
+    }
+    HelperFunctions.scroll();
+  }
+
+
+  /**
+   * Parse the given keywords into array and check if any of the requirements field of a community includes
+   * one of the given words.
+   */
+  private searchForKeywords() {
+      let ret: CommunityInfo[] = [];
+      let keywords: string[] = this.searchUtils.keyword.split(/,(?=(?:[^\"]*\"[^\"]*\")*[^\"]*$)/,-1);
+      for(let i = 0; i < this.results.length; i++) {
+          for(let keyword of keywords) {
+            keyword = keyword.toLowerCase();
+            if (keyword != '' && (this.results[i].title.toLowerCase().includes(keyword) || this.results[i].shortTitle.toLowerCase().includes(keyword) ||
+                this.results[i].communityId.toLowerCase().includes(keyword) || this.results[i].description.toLowerCase().includes(keyword))) {
+                ret.push(this.results[i]);
+                break;
+            }
+          }
+      }
+      this.results = ret;
+  }
+
+  /**
+   * Check the current results if they satisfy the values of each filter category and
+   * update the number of possible results in each value.
+   *
+   * @param params
+   */
+  private checkFilters(params: Map<string, string>) {
+    let typeResults: CommunityInfo[] = this.applyFilter('type', params);
+    let statusResults: CommunityInfo[] = this.results;
+    let roleResults: CommunityInfo[] = this.results;
+    if(this.user) {
+      statusResults = this.applyFilter('status', params);
+      roleResults = this.applyFilter('role', params);
+      this.resetFilterNumbers('status');
+      this.updateFilterNumbers(typeResults.filter(value => {
+        return roleResults.includes(value);
+      }), 'status');
+      this.resetFilterNumbers('role');
+      this.updateFilterNumbers(statusResults.filter(value => {
+        return typeResults.includes(value);
+      }), 'role');
+    }
+    this.resetFilterNumbers('type');
+    this.updateFilterNumbers(statusResults.filter(value => {
+      return roleResults.includes(value);
+    }), 'type');
+    this.results = statusResults.filter(value => {
+      return typeResults.includes(value);
+    })
+    this.results = this.results.filter(value => {
+      return roleResults.includes(value);
+    });
+  }
+
+  /**
+   * Apply filter with filterId and return the results
+   *
+   * @param filterId
+   * @param params
+   */
+  private applyFilter(filterId: string, params: Map<string, string>): CommunityInfo[] {
+    let results:CommunityInfo[] = [];
+    let values: string[] = [];
+    if(params.get(filterId) != undefined) {
+      values = (StringUtils.URIDecode(params.get(filterId))).split(/,(?=(?:[^\"]*\"[^\"]*\")*[^\"]*$)/,-1);
+    }
+    if(filterId == 'type') {
+      for (let i = 0; i < this.results.length; i++) {
+        if (values.length == 0) {
+          results.push(this.results[i]);
+        } else {
+          for (let value of values) {
+            if (this.results[i].type == value.replace(/["']/g, "")) {
+              results.push(this.results[i]);
+              break;
+            }
+          }
+        }
+      }
+    }
+    else if(filterId == 'status') {
+      for (let i = 0; i < this.results.length; i++) {
+        if (values.length == 0) {
+          results.push(this.results[i]);
+        } else {
+          for (let value of values) {
+            if (value.replace(/["']/g, "") == 'subscribed') {
+              if (this.results[i].isSubscribed) {
+                results.push(this.results[i]);
+                break;
+              }
+            } else if (value.replace(/["']/g, "") == 'nonsubscribed') {
+              if (!this.results[i].isSubscribed) {
+                results.push(this.results[i]);
+                break;
+              }
+            }
+          }
+        }
+      }
+    }
+    else if(filterId == 'role') {
+      for (let i = 0; i < this.results.length; i++) {
+        if (values.length == 0) {
+          results.push(this.results[i]);
+        } else {
+          for (let value of values) {
+            if (value.replace(/["']/g, "") == 'manager') {
+              if (this.results[i].isManager) {
+                results.push(this.results[i]);
+                break;
+              }
+            }
+          }
+        }
+      }
+    }
+    return results;
+  }
+
+    /**
+     * Reset the values of filter with id filterId with zero.
+     *
+     * @param filterId
+     */
+  private resetFilterNumbers(filterId: string) {
+    for (let i = 0; i < this.filters.length; i++) {
+      if(this.filters[i].filterId == filterId) {
+        for (let j = 0; j < this.filters[i].values.length; j++) {
+          this.filters[i].values[j].number = 0;
+        }
+        break;
+      }
+    }
+  }
+
+    /**
+     * Update the values of filter with id filterId based on
+     * results.
+     *
+     * @param results
+     * @param filterId
+     */
+  private updateFilterNumbers(results: CommunityInfo[], filterId: string) {
+    for(let k = 0; k < results.length; k++) {
+      for (let i = 0; i < this.filters.length; i++) {
+        if(this.filters[i].filterId == filterId) {
+            if (this.filters[i].filterId == 'type') {
+                for (let j = 0; j < this.filters[i].values.length; j++) {
+                    if (results[k].type == this.filters[i].values[j].id) {
+                        this.filters[i].values[j].number++;
+                    }
+                }
+            }
+            else if (this.filters[i].filterId == 'status') {
+                if (results[k].isSubscribed) {
+                    this.filters[i].values[0].number++;
+                } else {
+                    this.filters[i].values[1].number++;
+                }
+            }
+            else if (this.filters[i].filterId == 'role') {
+                if (results[k].isManager) {
+                  this.filters[i].values[0].number++;
+                }
+            }
+            break;
+        }
+      }
+    }
+  }
+
+    /**
+     * Sorting results based on sortBy.
+     */
+  private sort() {
+    if(this.searchUtils.sortBy == '') {
+      this.results.sort((left, right): number => {
+        if (left.title > right.title) {
+          return 1;
+        } else if (left.title < right.title) {
+          return -1;
+        } else {
+          return 0;
+        }
+      })
+    } else if(this.searchUtils.sortBy == 'creationdate,descending') {
+      this.results.sort((left, right): number => {
+        if (!right.date || left.date > right.date) {
+          return -1;
+        } else if (!left.date || left.date < right.date) {
+          return 1;
+        } else {
+          return 0;
+        }
+      })
+    } else if(this.searchUtils.sortBy == 'creationdate,ascending') {
+      this.results.sort((left, right): number => {
+        if (!right.date || left.date > right.date) {
+          return 1;
+        } else if (!left.date || left.date < right.date) {
+          return -1;
+        } else {
+          return 0;
+        }
+      })
+    }
+  }
+
+
+  private isCommunityManager(community: CommunityInfo): boolean {
+    return Session.isCommunityCurator(this.user) || community.managers.indexOf(this.user.email) != -1;
+  }
+
+    /**
+     * Create Search Communities filters.
+     *
+     */
+  private createFilters(): Filter[] {
+    let filter_names = [];
+    let filter_ids = [];
+    let searchFields = new SearchFields();
+    let filter_original_ids = searchFields.COMMUNITIES_SEARCH_FIELDS;
+    let value_names = [];
+    let value_original_ids=[];
+    this.showType = this.results.filter(community => community.type === 'ri').length > 0;
+    if(this.showType) {
+      filter_names.push("Type");
+      filter_ids.push("type");
+      value_names.push([ "Research Communities", "Research Initiatives" ]);
+      value_original_ids.push(["community","ri"]);
+    } else {
+      filter_original_ids = searchFields.COMMUNITIES_SEARCH_FIELDS.splice(0, 1);
+    }
+    if(this.user) {
+      filter_names.push("Status");
+      filter_ids.push("status");
+      value_names.push([ "Subscribed", "Non-subscribed"]);
+      value_original_ids.push(["subscribed", "nonsubscribed"]);
+      filter_names.push("Role");
+      filter_ids.push("role");
+      value_names.push([ "Manager"]);
+      value_original_ids.push(["manager"]);
+    }
+    let filters: Filter[] = [];
+    for(let  i =0 ; i < filter_names.length; i++){
+      let values: Value[] = [];
+      for(let j =0 ; j < value_names[i].length; j++){
+        let value: Value = {name: value_names[i][j], id: value_original_ids[i][j], number:0, selected:false};
+        values.push(value);
+      }
+      let filter: Filter = {title: filter_names[i], filterId: filter_ids[i], originalFilterId:  filter_original_ids[i], values : values, countSelectedValues:0, "filterOperator": 'or', valueIsExact: true , valueIsUnique: false};
+      filters.push(filter);
+    }
+    return filters;
+  }
+
+  private handleError(message: string, error) {
+    console.error('Communities Search Page: ' + message, error);
+  }
+
+}
diff --git a/src/app/searchPages/communities/searchCommunities.module.ts b/src/app/searchPages/communities/searchCommunities.module.ts
new file mode 100644
index 0000000..d4d0f59
--- /dev/null
+++ b/src/app/searchPages/communities/searchCommunities.module.ts
@@ -0,0 +1,24 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {FormsModule} from "@angular/forms";
+import {SearchCommunitiesComponent} from "./searchCommunities.component";
+import {SearchPageModule} from "../../openaireLibrary/searchPages/searchUtils/searchPage.module";
+import {SearchFormModule} from "../../openaireLibrary/searchPages/searchUtils/searchForm.module";
+import {SearchCommunitiesRoutingModule} from "./searchCommunities-routing.module";
+import {PreviousRouteRecorder} from "../../openaireLibrary/utils/piwik/previousRouteRecorder.guard";
+
+@NgModule({
+  imports: [
+    CommonModule, FormsModule,
+    SearchFormModule, SearchPageModule,
+    SearchCommunitiesRoutingModule
+  ],
+  declarations: [
+    SearchCommunitiesComponent
+  ],
+  providers:[ PreviousRouteRecorder],
+  exports: [
+    SearchCommunitiesComponent
+  ]
+})
+export class SearchCommunitiesModule { }
diff --git a/src/app/statistics/statistics-routing.module.ts b/src/app/statistics/statistics-routing.module.ts
new file mode 100644
index 0000000..da2de6a
--- /dev/null
+++ b/src/app/statistics/statistics-routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import{StatisticsComponent} from './statistics.component';
+import {FreeGuard} from '../openaireLibrary/login/freeGuard.guard';
+import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
+// import {IsRouteEnabled} from '../openaireLibrary/error/isRouteEnabled.guard'
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+     	{ path: '', component: StatisticsComponent, canActivate: [FreeGuard], canDeactivate: [PreviousRouteRecorder] }
+
+    ])
+  ]
+})
+export class StatisticsRoutingModule { }
diff --git a/src/app/statistics/statistics.component.html b/src/app/statistics/statistics.component.html
new file mode 100644
index 0000000..f2451f1
--- /dev/null
+++ b/src/app/statistics/statistics.component.html
@@ -0,0 +1,192 @@
+<div class=" uk-section  uk-margin-small-top tm-middle uk-container" id="tm-main">
+
+    <div class="uk-container  uk-margin-bottom">
+
+        <article class="uk-article ">
+          <div *ngIf="status == errorCodes.LOADING" class="uk-animation-fade uk-width-1-1" role="alert"><span class="loading-gif uk-align-center"></span></div>
+          <div *ngIf="status == errorCodes.ERROR" class="uk-alert uk-alert-warning" style="margin-top:40px; padding-left:40px;">
+              An error occured
+          </div>
+            <div *ngIf=" (status == errorCodes.DONE) && (!statisticsSum || !statisticsDisplay  || ((statisticsSum.total_projects==0) && (allowedEntities.length == 0)))" class="uk-alert uk-alert-info" style="margin-top:40px; padding-left:40px;">
+                No statistics are available for {{ communityId.toUpperCase() }}
+            </div>
+            <div *ngIf="statisticsSum && (statisticsSum.total_projects>0) && statisticsDisplay" class="uk-margin uk-margin-top">
+                <div class="uk-grid">
+                    <div class="uk-width-1-6@m uk-visible@m uk-margin-top">
+                      <div uk-sticky="offset: 120">
+                        <ul class="uk-tab uk-tab-left" uk-tab="connect:#tabs">
+                        <!-- <ul class="uk-tab uk-tab-left uk-width-1-6 uk-margin-top" data-uk-tab="{connect:'#tabs'}"> -->
+                          <li *ngFor="let entity of allowedEntities"
+                              (click)="onChangeEntity(entity)" [class]="displayedEntity == entity?'uk-active':''">
+
+                              <a href="#">{{ entitiesMap.get(entity) }}</a>
+                          </li>
+                        </ul>
+                      </div>
+                    </div>
+
+                    <div class="uk-hidden@m uk-clearfix uk-width-1-1 uk-margin-bottom">
+                      <button class="uk-button uk-button-default uk-hidden@m " type="button">
+                        <span uk-navbar-toggle-icon></span> <span class="uk-margin-small-left">{{entitiesMap.get(displayedEntity)}}</span>
+                      </button>
+
+                      <ul id="toggle-small-tabs" class="uk-subnav uk-subnav-pill uk-dropdown uk-hidden@m uk-margin-top"
+                          uk-switcher="connect:#tabs; animation: uk-animation-fade"
+                          uk-dropdown="mode: click" uk-toggle="target: #toggle-small-tabs">
+                         <li *ngFor="let entity of allowedEntities"
+                             (click)="onChangeEntity(entity)" [class]="displayedEntity == entity?'uk-active':''">
+                             <a>{{ entitiesMap.get(entity) }}</a>
+                         </li>
+                       </ul>
+                     </div>
+
+                    <ul id="tabs" class="uk-switcher uk-margin uk-width-expand" style="min-height:450px; padding-left:40px;">
+                        <li *ngFor="let entity of allowedEntities" [class]="displayedEntity == entity?'uk-active':''">
+                            <div *ngIf="(displayedEntity == entity) && statisticsSum[entity]">
+                                <div class="uk-text-uppercase uk-text-bold uk-heading-divider">
+                                    <h2>{{ entitiesMap.get(entity) }} statistics</h2>
+
+                                    <div *ngIf="!statisticsSum[entity] ||
+                                                !statisticsDisplay.entities[entity] ||
+                                                statisticsSum[entity].total==0"
+                                         class="uk-alert uk-alert-info">
+
+                                        No {{ entitiesMap.get(entity) }} statistics available
+                                    </div>
+
+                                    <div *ngIf="statisticsDisplay.entities[entity] && statisticsSum[entity].total>0">
+                                        <span *ngIf="statisticsDisplay.entities[entity].numbers.map['total'][currentMode]">
+                                            {{statisticsSum[entity].total|number}} {{ entity + ( (entity == 'software' || statisticsSum[entity].total == 1) ? '' : 's') }}
+                                        </span>
+
+                                        <span *ngIf="statisticsDisplay.entities[entity].numbers.map['project'][currentMode] &&
+                                                     statisticsSum[entity].projects>0">
+                                                     <span *ngIf="statisticsDisplay.entities[entity].numbers.map['total'][currentMode]">
+                                                          linked to
+                                                     </span>
+                                            {{statisticsSum[entity].projects|number}} project{{ statisticsSum[entity].projects == 1 ? '' : 's' }}.
+                                        </span><br>
+                                        <span *ngIf="statisticsDisplay.entities[entity].numbers.map['open'][currentMode] &&
+                                                     statisticsSum[entity].open_access>0">
+                                            {{statisticsSum[entity].open_access|number}}
+                                            {{statisticsSum[entity].open_access == 1 ? 'is' : 'are'}} OA
+                                        </span>
+                                        <span *ngIf="statisticsDisplay.entities[entity].numbers.map['closed'][currentMode] &&
+                                                     statisticsSum[entity].closed_access>0">
+
+                                            <span *ngIf="statisticsDisplay.entities[entity].numbers.map['open'][currentMode]">
+                                                ,
+                                            </span>
+
+                                            {{statisticsSum[entity].closed_access|number}}
+                                            {{statisticsSum[entity].closed_access == 1 ? 'is' : 'are'}} closed
+                                        </span>
+                                        <span *ngIf="statisticsDisplay.entities[entity].numbers.map['restricted'][currentMode] &&
+                                                     statisticsSum[entity].restricted>0">
+
+                                            <span *ngIf="statisticsDisplay.entities[entity].numbers.map['open'][currentMode] ||
+                                                         statisticsDisplay.entities[entity].numbers.map['closed'][currentMode]">
+                                                ,
+                                            </span>
+
+                                            {{statisticsSum[entity].restricted|number}}
+                                            {{statisticsSum[entity].restricted == 1 ? 'is' : 'are'}} restricted
+                                        </span>
+                                        <span *ngIf="statisticsDisplay.entities[entity].numbers.map['embargo'][currentMode] &&
+                                                     statisticsSum[entity].embargo>0">
+
+                                            <span *ngIf="statisticsDisplay.entities[entity].numbers.map['open'][currentMode] ||
+                                                         statisticsDisplay.entities[entity].numbers.map['closed'][currentMode] ||
+                                                         statisticsDisplay.entities[entity].numbers.map['restricted'][currentMode]">
+                                                 and
+                                            </span>
+                                            {{statisticsSum[entity].embargo|number}}
+                                            {{statisticsSum[entity].embargo == 1 ? 'is' : 'are'}} still in embargo.
+                                        </span>
+                                    </div>
+                                </div>
+                                <div *ngIf="statisticsSum[entity].total>0 && allowedCharts[entity].length==0"
+                                     class="uk-alert uk-alert-info">
+                                    No charts available
+                                </div>
+                                <div *ngIf="statisticsSum[entity].total>0 && allowedCharts[entity].length>0">
+                                    <div class="uk-grid">
+                                        <div *ngIf="statisticsDisplay.entities[entity].charts.map['timeline'] &&
+                                                    statisticsDisplay.entities[entity].charts.map['timeline'][currentMode] &&
+                                                    chartsInfoMap[entity + 'Timeline'] &&
+                                                    (displayedTimeline == (entity + 'Timeline'))">
+                                            <iframe [src]=displayedTimelineUrl width="1000" height="450"></iframe>
+                                        </div>
+                                        <div *ngIf="statisticsDisplay.entities[entity].charts.map['graph'] &&
+                                                    statisticsDisplay.entities[entity].charts.map['graph'][currentMode] &&
+                                                    chartsInfoMap[entity + 'Graph'] &&
+                                                    (displayedGraph == (entity + 'Graph'))">
+                                            <iframe [src]=displayedGraphUrl width="1000" height="450"></iframe>
+                                        </div>
+                                    </div>
+                                    <hr *ngIf="(statisticsDisplay.entities[entity].charts.map['timeline'] &&
+                                                statisticsDisplay.entities[entity].charts.map['timeline'][currentMode] &&
+                                                chartsInfoMap[entity + 'Timeline'] &&
+                                                (displayedTimeline == (entity + 'Timeline'))) || (statisticsDisplay.entities[entity].charts.map['graph'] &&
+                                                            statisticsDisplay.entities[entity].charts.map['graph'][currentMode] &&
+                                                            chartsInfoMap[entity + 'Graph'] &&
+                                                            (displayedGraph == (entity + 'Graph')))">
+
+                                    <div *ngIf="statisticsDisplay.entities[entity].charts.map['projectColumn'][currentMode] ||
+                                                statisticsDisplay.entities[entity].charts.map['projectPie'][currentMode] ||
+                                                statisticsDisplay.entities[entity].charts.map['projectTable'][currentMode]">
+                                        <div>
+                                            <h4 class="uk-text-uppercase uk-text-bold">{{ entitiesMap.get(entity) }} per project</h4>
+                                        </div>
+                                        <div>
+                                            <ul class="uk-tab uk-margin-top" data-uk-tab="{connect: '#projectChartTabs'">
+                                                <li *ngIf=" statisticsDisplay.entities[entity].charts.map['projectColumn'] &&
+                                                            statisticsDisplay.entities[entity].charts.map['projectColumn'][currentMode] &&
+                                                            chartsInfoMap[entity + 'Projectcolumn']"
+                                                    (click)="changeDisplayedProjectChart(entity + 'Projectcolumn')">
+
+                                                    <a href="#">Columns</a>
+                                                </li>
+                                                <li *ngIf=" statisticsDisplay.entities[entity].charts.map['projectPie'] &&
+                                                            statisticsDisplay.entities[entity].charts.map['projectPie'][currentMode] &&
+                                                            chartsInfoMap[entity + 'Projectpie']"
+                                                    (click)="changeDisplayedProjectChart(entity + 'Projectpie')">
+
+                                                    <a href="#">Pie</a>
+                                                </li>
+                                                <li *ngIf=" statisticsDisplay.entities[entity].charts.map['projectTable'] &&
+                                                            statisticsDisplay.entities[entity].charts.map['projectTable'][currentMode] &&
+                                                            chartsInfoMap[entity + 'Projecttable']"
+                                                    (click)="changeDisplayedProjectChart(entity + 'Projecttable')">
+
+                                                    <a href="#">Table</a>
+                                                </li>
+                                            </ul>
+                                            <ul id="projectChartTabs" class="uk-switcher uk-margin">
+                                                <li *ngIf="statisticsDisplay.entities[entity].charts.map['projectColumn'][currentMode]">
+                                                    <div *ngIf="displayedProjectChart == (entity + 'Projectcolumn')">
+                                                        <iframe [src]=displayedProjectChartUrl width="1000" height="450"></iframe>
+                                                    </div>
+                                                </li>
+                                                <li *ngIf="statisticsDisplay.entities[entity].charts.map['projectPie'][currentMode]">
+                                                    <div *ngIf="displayedProjectChart == (entity + 'Projectpie')">
+                                                        <iframe [src]=displayedProjectChartUrl width="1000" height="450"></iframe>
+                                                    </div>
+                                                </li>
+                                                <li *ngIf="statisticsDisplay.entities[entity].charts.map['projectTable'][currentMode]">
+                                                    <div *ngIf="displayedProjectChart == (entity + 'Projecttable')">
+                                                        <iframe [src]=displayedProjectChartUrl width="1000" height="450"></iframe>
+                                                    </div>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </article>
+    </div>
+</div>
diff --git a/src/app/statistics/statistics.component.ts b/src/app/statistics/statistics.component.ts
new file mode 100644
index 0000000..91f2c4f
--- /dev/null
+++ b/src/app/statistics/statistics.component.ts
@@ -0,0 +1,314 @@
+import {Component, Input} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+import {Location, TitleCasePipe} from '@angular/common';
+import {Title, Meta} from '@angular/platform-browser';
+import {DomSanitizer} from '@angular/platform-browser';
+import "rxjs/add/observable/zip";
+import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
+import {ErrorCodes} from '../openaireLibrary/utils/properties/errorCodes';
+import {StatisticsService} from '../utils/services/statistics.service';
+import {ConfigurationService} from '../openaireLibrary/utils/configuration/configuration.service';
+import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
+import {ConnectHelper} from '../openaireLibrary/connect/connectHelper';
+import {
+  availableCharts, availableEntitiesMap, StatisticsDisplay,
+  StatisticsSummary
+} from "../openaireLibrary/connect/statistics/statisticsEntities";
+import {PiwikHelper} from '../utils/piwikHelper';
+import {CommunityCharts} from "../openaireLibrary/connect/statistics/communityCharts";
+import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
+import {CommunityService} from "../openaireLibrary/connect/community/community.service";
+
+
+@Component({
+  selector: 'statistics',
+  templateUrl: 'statistics.component.html',
+})
+
+export class StatisticsComponent {
+  public piwiksub: any;
+  public pageTitle = "OpenAIRE";
+  properties: EnvProperties;
+  @Input() communityId = null;
+  @Input() currentMode = 'showInMonitor';
+  communityInfo: any = null;
+  entitiesList: string[] = [];
+  entitiesMap: Map<string, string> = availableEntitiesMap;
+  chartCatsList: string[] = availableCharts;
+  allowedCharts: Map<string, string[]> = new Map<string, string[]>();
+  allowedEntities: string[] = [];
+  allowedChartsMode = {showInMonitor: new Map<string, string[]>(), showInDashboard: new Map<string, string[]>()};
+  allowedEntitiesMode = {showInMonitor: [], showInDashboard: []};
+
+  statisticsSum: StatisticsSummary = null;
+  statisticsDisplay: StatisticsDisplay = null;
+  chartTitlesMode = {showInMonitor: {}, showInDashboard: {}};
+  chartsInfoMap: {};
+
+  displayedTimeline: string;
+  displayedTimelineUrl: string;
+  displayedGraph: string;
+  displayedGraphUrl: string;
+  displayedProjectChart: string;
+  displayedProjectChartUrl: string;
+  displayedEntity: string;
+  public errorCodes: ErrorCodes = new ErrorCodes();
+  status = null;
+  communityName = null;
+
+  constructor(
+    private route: ActivatedRoute,
+    private _router: Router,
+    private location: Location,
+    private _meta: Meta,
+    private _title: Title,
+    private _piwikService: PiwikService,
+    private _statisticsService: StatisticsService,
+    private _configService: ConfigurationService,
+    private titleCase: TitleCasePipe,
+    private _communityService: CommunityService,
+    private sanitizer: DomSanitizer) {
+
+  }
+
+  public ngOnInit() {
+    if (this.currentMode == "showInMonitor") {
+      var description = "open access, research, scientific publication, European Commission, EC, FP7, ERC, Horizon 2020, H2020, search, projects ";
+      var title = "Monitor";
+
+      this._title.setTitle(title);
+      this._meta.updateTag({content: description}, "name='description'");
+      this._meta.updateTag({content: description}, "property='og:description'");
+      this._meta.updateTag({content: title}, "property='og:title'");
+    }
+    this.route.data
+      .subscribe((data: { envSpecific: EnvProperties }) => {
+        this.properties = data.envSpecific;
+        var url = data.envSpecific.baseLink + this._router.url;
+        this._meta.updateTag({content: url}, "property='og:url'");
+
+        this.route.queryParams.subscribe(
+          communityId => {
+            this.communityId  = ConnectHelper.getCommunityFromDomain(this.properties.domain);
+            if(!this.communityId) {
+              this.communityId = communityId['communityId'];
+            }
+
+            if (this.currentMode == "showInMonitor" && this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
+              this.piwiksub = this._piwikService.trackView(this.properties, "Monitor " + this.communityId, PiwikHelper.siteIDs[this.communityId]).subscribe();
+            }
+            this._communityService.getCommunity(this.properties, this.properties.communityAPI + this.communityId).subscribe(
+              community => {
+                if (typeof document !== 'undefined') {
+                  HelperFunctions.scroll();
+                }
+                this.communityName = community.shortTitle;
+                this.createStatisticsObjects();
+              });
+            // console.log(" Stats! "+ this.properties.statisticsAPIURL);
+
+          });
+      });
+
+  }
+
+
+  public ngOnDestroy() {
+    if (this.piwiksub) {
+      this.piwiksub.unsubscribe();
+    }
+
+  }
+
+  getCamelCaseString(inputString: string) {
+    return this.titleCase.transform(inputString);
+  }
+
+  createStatisticsObjects() {
+    // console.log(" Stats! "+ this.properties.statisticsAPIURL);
+    this.status = this.errorCodes.LOADING;
+    this._statisticsService.getCommunityStatistics(this.properties, this.communityId).subscribe(
+      res => {
+        this.statisticsSum = res;
+        if (res["other"]) { //hack because in stats API the entity name is "other" while in admin API is "orp". This component uses also "orp" name
+          this.statisticsSum["orp"] = res["other"];
+        }
+        this.getDisplayOptions();
+      },
+      error => {
+        //console.log(error);
+        this.handleError("Error getting community statistics for community with id: " + this.communityId, error);
+        this.status = this.errorCodes.ERROR;
+      });
+  }
+
+  getDisplayOptions() {
+    this._statisticsService.getCommunityAdminStatisticsChoices(this.properties, this.communityId)
+      .subscribe(
+        res => {
+          this.statisticsDisplay = res;
+          this.createChartUrlMap();
+          this.getCommunityInfo();
+          this.status = this.errorCodes.DONE;
+
+        },
+        error => {
+          //console.log(error);
+          this.handleError("Error getting community statistics choices by administrators for community with id: " + this.communityId, error);
+          this.status = this.errorCodes.ERROR;
+        }
+      );
+  }
+
+
+  getCommunityInfo() {
+    // console.log(`calling ${this.properties.adminToolsAPIURL}/communityFull/${this.communityId}`);
+    this._configService.getCommunityInformation(this.properties, this.communityId).subscribe(
+      res => {
+        this.communityInfo = res;
+        /*for(let i=0; i<this.communityInfo.entities.length; i++){
+
+            if (this.communityInfo.entities[i]["isEnabled"] ) {
+                this.entitiesList.push(this.communityInfo.entities[i]['pid']);
+            }
+        }
+        console.log(this.entitiesList);*/
+      },
+      error => {
+        //console.log(error)
+        this.handleError("Error getting community with id: " + this.communityId, error);
+      },
+      () => this.initializeDisplayedCharts()
+    );
+  }
+
+  initializeDisplayedCharts() {
+    let firstEntity: string;
+    this.entitiesList = Array.from(this.entitiesMap.keys());
+
+    this.allowedChartsMode[this.currentMode] = this.allowedCharts;
+    this.allowedEntitiesMode[this.currentMode] = this.allowedEntities;
+    let titles = [];
+    // console.log('this.entitiesList is',this.entitiesList);
+    // console.log(`my current mode is: ${this.currentMode}`);
+    for (let entity of this.entitiesList) {
+      if (this.statisticsDisplay.entities[entity] && this.statisticsSum[entity].total && this.communityInfo.entities.filter(x => x['pid'] == entity && x['isEnabled'] === true).length) {
+        this.allowedChartsMode.showInDashboard[entity] = [];
+        this.allowedChartsMode.showInMonitor[entity] = [];
+        for (let chart of this.chartCatsList) {
+          if (this.statisticsSum[entity].total &&
+            this.statisticsDisplay.entities[entity].charts.map[chart] &&
+            this.statisticsDisplay.entities[entity].charts.map[chart]["showInDashboard"] &&
+            this.chartsInfoMap[entity + this.getCamelCaseString(chart)].url) {
+            this.allowedChartsMode.showInDashboard[entity].push(entity + this.getCamelCaseString(chart));
+            if (titles.indexOf("dashboard" + this.chartsInfoMap[entity + this.getCamelCaseString(chart)].title) == -1) {
+              titles.push("dashboard" + this.chartsInfoMap[entity + this.getCamelCaseString(chart)].title);
+              this.chartTitlesMode.showInDashboard[entity + this.getCamelCaseString(chart)] = true;
+            } else {
+              this.chartTitlesMode.showInDashboard[entity + this.getCamelCaseString(chart)] = false;
+            }
+
+            // console.log(`added ${entity} - ${chart} to allowedCharts`);
+          }
+          if (this.statisticsSum[entity].total &&
+            this.statisticsDisplay.entities[entity].charts.map[chart] &&
+            this.statisticsDisplay.entities[entity].charts.map[chart]["showInMonitor"] &&
+            this.chartsInfoMap[entity + this.getCamelCaseString(chart)].url) {
+            this.allowedChartsMode.showInMonitor[entity].push(entity + this.getCamelCaseString(chart));
+            if (titles.indexOf("monitor" + this.chartsInfoMap[entity + this.getCamelCaseString(chart)].title) == -1) {
+              titles.push("monitor" + this.chartsInfoMap[entity + this.getCamelCaseString(chart)].title);
+              this.chartTitlesMode.showInMonitor[entity + this.getCamelCaseString(chart)] = true;
+            } else {
+              this.chartTitlesMode.showInMonitor[entity + this.getCamelCaseString(chart)] = false;
+            }
+            // console.log(`added ${entity} - ${chart} to allowedCharts`);
+
+          }
+        }
+        if (this.allowedChartsMode.showInMonitor[entity].length) {
+          // console.log(`added ${entity} to allowedEntities`);
+          this.allowedEntitiesMode.showInMonitor.push(entity);
+          if (!firstEntity) {
+            firstEntity = entity;
+            this.onChangeEntity(entity);
+          }
+        }
+        if (this.allowedChartsMode.showInDashboard[entity].length) {
+          // console.log(`added ${entity} to allowedEntities`);
+          this.allowedEntitiesMode.showInDashboard.push(entity);
+          if (!firstEntity) {
+            firstEntity = entity;
+            this.onChangeEntity(entity);
+          }
+        }
+      }
+    }
+
+  }
+
+  createChartUrlMap() {
+
+    let communityCharts: CommunityCharts = new CommunityCharts(this.sanitizer);
+    this.chartsInfoMap = communityCharts.getChartsForCommunity(this.communityId, this.communityName, this.properties);
+  }
+
+
+  onChangeEntity(entity: string) {
+    this.displayedEntity = entity;
+    // console.log(`displayed entity is ${entity}`);
+    // console.log(`statisticsSum[${entity}].total is ${this.statisticsSum[entity].total}`);
+
+    if (this.statisticsSum[entity].total &&
+      this.allowedEntities.filter(x => x == entity).length) {
+
+      // console.log(`found ${entity} in allowedEntities`);
+      this.displayedTimeline = `${entity}Timeline`;
+      this.displayedTimelineUrl = this.chartsInfoMap[this.displayedTimeline].url;
+      // console.log(`displayed Timeline is: ${this.displayedTimeline}`);
+      this.displayedGraph = `${entity}Graph`;
+      this.displayedGraphUrl = this.chartsInfoMap[this.displayedGraph].url;
+      // console.log(`displayed Graph is: ${this.displayedGraph}`);
+      if (this.allowedCharts[entity]) {
+        let firstProjectChart = this.allowedCharts[entity].filter(x => x.includes(entity + 'Project'));
+        if (firstProjectChart[0]) {
+          this.changeDisplayedProjectChart(firstProjectChart[0]);
+        } else {
+          this.displayedProjectChart = '';
+          this.displayedProjectChartUrl = '';
+          // console.log(`displayed ProjectChart is: ${this.displayedProjectChart}`);
+        }
+      }
+    } else {
+      this.displayedTimeline = '';
+      this.displayedTimelineUrl = '';
+      // console.log(`displayed Timeline is: ${this.displayedTimeline}`);
+      this.displayedGraph = '';
+      this.displayedGraphUrl = '';
+      // console.log(`displayed Graph is: ${this.displayedGraph}`);
+    }
+  }
+
+  changeDisplayedProjectChart(chartName: string) {
+    this.displayedProjectChart = chartName;
+    this.displayedProjectChartUrl = this.chartsInfoMap[this.displayedProjectChart].url;
+    // console.log(`displayed ProjectChart is: ${this.displayedProjectChart}`);
+  }
+
+  private handleError(message: string, error) {
+    console.error("Statistics (Monitor) Page: " + message, error);
+  }
+}
+
+
+@Component({
+  selector: 'statistics-for-dashboard',
+  template: ''
+  // templateUrl: 'statistics-for-dashboard.component.html',
+})
+
+export class StatisticsForDashboardComponent extends StatisticsComponent {
+  ngOnInit() {
+    super.ngOnInit();
+  }
+
+}
diff --git a/src/app/statistics/statistics.module.ts b/src/app/statistics/statistics.module.ts
new file mode 100644
index 0000000..ca227f0
--- /dev/null
+++ b/src/app/statistics/statistics.module.ts
@@ -0,0 +1,35 @@
+import {NgModule}                    from '@angular/core';
+import {CommonModule, TitleCasePipe} from '@angular/common';
+import {FormsModule}                 from '@angular/forms';
+import {RouterModule}                from '@angular/router';
+
+import {StatisticsRoutingModule}     from './statistics-routing.module';
+import {IFrameModule}                from '../openaireLibrary/utils/iframe.module';
+
+import {StatisticsComponent, StatisticsForDashboardComponent} from './statistics.component';
+
+import {StatisticsService}           from '../utils/services/statistics.service';
+import {PiwikService}                from '../openaireLibrary/utils/piwik/piwik.service';
+
+import {FreeGuard}                   from '../openaireLibrary/login/freeGuard.guard';
+import {PreviousRouteRecorder}       from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
+import {IsRouteEnabled} from '../openaireLibrary/error/isRouteEnabled.guard'
+
+@NgModule({
+  imports: [
+    CommonModule, FormsModule, RouterModule,
+    StatisticsRoutingModule, IFrameModule
+  ],
+  declarations: [
+    StatisticsComponent,
+    StatisticsForDashboardComponent
+  ],
+  providers: [
+    IsRouteEnabled, FreeGuard, PreviousRouteRecorder,
+    PiwikService, StatisticsService, TitleCasePipe
+  ],
+  exports: [
+    StatisticsForDashboardComponent
+  ]
+})
+export class StatisticsModule { }
diff --git a/src/app/test/theme.component.html b/src/app/test/theme.component.html
new file mode 100644
index 0000000..9ded157
--- /dev/null
+++ b/src/app/test/theme.component.html
@@ -0,0 +1,798 @@
+<div class="uk-offcanvas-content">
+
+  <nav class="uk-navbar-container">
+    <div class="uk-container">
+      <div uk-navbar="" class="uk-navbar">
+        <div class="uk-navbar-left">
+
+          <a class="uk-navbar-item uk-logo" href="#">Logo</a>
+
+          <ul class="uk-navbar-nav">
+            <li class="uk-active"><a href="#">Active</a></li>
+            <li>
+              <a href="#" aria-expanded="false">Parent</a>
+              <div class="uk-navbar-dropdown">
+                <ul class="uk-nav uk-navbar-dropdown-nav">
+                  <li class="uk-active"><a href="#">Active</a></li>
+                  <li class="uk-parent">
+                    <a href="#">Parent</a>
+                    <ul class="uk-nav-sub">
+                      <li><a href="#">Sub item</a></li>
+                      <li><a href="#">Sub item</a></li>
+                    </ul>
+                  </li>
+                  <li class="uk-nav-header">Header</li>
+                  <li><a href="#"><span class="uk-margin-small-right uk-icon" uk-icon="icon: table"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="table"><rect x="1" y="3" width="18" height="1"></rect><rect x="1" y="7" width="18" height="1"></rect><rect x="1" y="11" width="18" height="1"></rect><rect x="1" y="15" width="18" height="1"></rect></svg></span> Item</a></li>
+                  <li><a href="#"><span class="uk-margin-small-right uk-icon" uk-icon="icon: thumbnails"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="thumbnails"><rect fill="none" stroke="#000" x="3.5" y="3.5" width="5" height="5"></rect><rect fill="none" stroke="#000" x="11.5" y="3.5" width="5" height="5"></rect><rect fill="none" stroke="#000" x="11.5" y="11.5" width="5" height="5"></rect><rect fill="none" stroke="#000" x="3.5" y="11.5" width="5" height="5"></rect></svg></span> Item</a></li>
+                  <li class="uk-nav-divider"></li>
+                  <li><a href="#"><span class="uk-margin-small-right uk-icon" uk-icon="icon: trash"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="trash"><polyline fill="none" stroke="#000" points="6.5 3 6.5 1.5 13.5 1.5 13.5 3"></polyline><polyline fill="none" stroke="#000" points="4.5 4 4.5 18.5 15.5 18.5 15.5 4"></polyline><rect x="8" y="7" width="1" height="9"></rect><rect x="11" y="7" width="1" height="9"></rect><rect x="2" y="3" width="16" height="1"></rect></svg></span> Item</a></li>
+                </ul>
+              </div>
+            </li>
+            <li><a href="#">Item</a></li>
+            <li><a href="#">Item</a></li>
+          </ul>
+
+        </div>
+        <div class="uk-navbar-right">
+          <a class="uk-navbar-toggle uk-icon" href="#modal" uk-icon="icon: more-vertical" uk-toggle=""><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="more-vertical"><circle cx="10" cy="3" r="2"></circle><circle cx="10" cy="10" r="2"></circle><circle cx="10" cy="17" r="2"></circle></svg></a>
+          <a class="uk-navbar-toggle uk-icon uk-search-icon" href="#modal-search" uk-search-icon="" uk-toggle=""><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="search-icon"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path></svg></a>
+          <a class="uk-navbar-toggle uk-icon uk-navbar-toggle-icon" href="#offcanvas" uk-navbar-toggle-icon="" uk-toggle=""><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="navbar-toggle-icon"><rect y="9" width="20" height="2"></rect><rect y="3" width="20" height="2"></rect><rect y="15" width="20" height="2"></rect></svg></a>
+        </div>
+      </div>
+    </div>
+  </nav>
+
+  <div class="uk-section uk-section-default">
+    <div class="uk-container">
+
+      <div uk-grid="" class="uk-grid">
+        <div class="uk-width-2-3@m uk-first-column">
+
+          <ul class="uk-breadcrumb">
+            <li><a href="#">Home</a></li>
+            <li><a href="#">Blog</a></li>
+            <li class="uk-disabled"><a>Category</a></li>
+            <li><span>Post</span></li>
+          </ul>
+
+          <article class="uk-article">
+
+            <h1 class="uk-article-title"><a class="uk-link-reset" href="#">Article Title</a></h1>
+
+            <hr class="uk-divider-small">
+
+            <p class="uk-text-lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+
+            <p class="uk-column-1-2@s uk-dropcap">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+            <p class="uk-article-meta">Written by <a href="#">Super User</a> on 12 April 2012. Posted in <a href="#">Blog</a></p>
+
+            <hr class="uk-divider-icon uk-margin-medium">
+
+            <div class="uk-grid-small uk-child-width-auto uk-flex-middle uk-margin-medium uk-grid" uk-grid="">
+              <div class="uk-first-column">
+                <button class="uk-button uk-button-default" aria-expanded="false">Default</button>
+                <div uk-dropdown="mode: click" class="uk-dropdown">
+                  <ul class="uk-nav uk-dropdown-nav">
+                    <li class="uk-active"><a href="#">Active</a></li>
+                    <li class="uk-parent">
+                      <a href="#">Parent</a>
+                      <ul class="uk-nav-sub">
+                        <li><a href="#">Sub item</a></li>
+                        <li><a href="#">Sub item</a></li>
+                      </ul>
+                    </li>
+                    <li class="uk-nav-header">Header</li>
+                    <li><a href="#"><span class="uk-margin-small-right uk-icon" uk-icon="icon: table"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="table"><rect x="1" y="3" width="18" height="1"></rect><rect x="1" y="7" width="18" height="1"></rect><rect x="1" y="11" width="18" height="1"></rect><rect x="1" y="15" width="18" height="1"></rect></svg></span> Item</a></li>
+                    <li><a href="#"><span class="uk-margin-small-right uk-icon" uk-icon="icon: thumbnails"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="thumbnails"><rect fill="none" stroke="#000" x="3.5" y="3.5" width="5" height="5"></rect><rect fill="none" stroke="#000" x="11.5" y="3.5" width="5" height="5"></rect><rect fill="none" stroke="#000" x="11.5" y="11.5" width="5" height="5"></rect><rect fill="none" stroke="#000" x="3.5" y="11.5" width="5" height="5"></rect></svg></span> Item</a></li>
+                    <li class="uk-nav-divider"></li>
+                    <li><a href="#"><span class="uk-margin-small-right uk-icon" uk-icon="icon: trash"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="trash"><polyline fill="none" stroke="#000" points="6.5 3 6.5 1.5 13.5 1.5 13.5 3"></polyline><polyline fill="none" stroke="#000" points="4.5 4 4.5 18.5 15.5 18.5 15.5 4"></polyline><rect x="8" y="7" width="1" height="9"></rect><rect x="11" y="7" width="1" height="9"></rect><rect x="2" y="3" width="16" height="1"></rect></svg></span> Item</a></li>
+                  </ul>
+                </div>
+              </div>
+              <div>
+                <button class="uk-button uk-button-primary">Primary</button>
+              </div>
+              <div>
+                <button class="uk-button uk-button-secondary">Secondary</button>
+              </div>
+              <div>
+                <button class="uk-button uk-button-danger">Danger</button>
+              </div>
+              <div>
+                <button class="uk-button uk-button-default" disabled="">Disabled</button>
+              </div>
+            </div>
+
+            <hr class="uk-margin-medium">
+
+            <div class="uk-child-width-1-2 uk-child-width-1-4@s uk-margin uk-grid" uk-grid="">
+              <div class="uk-first-column">
+                <ul class="uk-list">
+                  <li><a href="#">a element</a></li>
+                  <li><abbr title="Title text">abbr element</abbr></li>
+                  <li><code>code element</code></li>
+                  <li><del>del element</del></li>
+                  <li><dfn title="Title text">dfn element</dfn></li>
+                  <li><a href="#" class="uk-link-muted">Link Muted</a></li>
+                </ul>
+              </div>
+              <div>
+                <ul class="uk-list">
+                  <li><em>em element</em></li>
+                  <li><ins>ins element</ins></li>
+                  <li><mark>mark element</mark></li>
+                  <li><q>q <q>inside</q> a q</q></li>
+                  <li><strong>strong element</strong></li>
+                  <li><a href="#" class="uk-link-reset">Link Reset</a></li>
+                </ul>
+              </div>
+              <div>
+                <ul class="uk-list">
+                  <li class="uk-text-muted">Text Muted</li>
+                  <li class="uk-text-emphasis">Text Emphasis</li>
+                  <li class="uk-text-primary">Text Primary</li>
+                  <li class="uk-text-secondary">Text Secondary</li>
+                  <li class="uk-text-success">Text Success</li>
+                  <li class="uk-text-warning">Text Warning</li>
+                  <li class="uk-text-danger">Text Danger</li>
+                  <li class="uk-text-meta">Text Meta</li>
+                </ul>
+              </div>
+              <div>
+                <ul class="uk-list">
+                  <li><span class="uk-label">Default</span></li>
+                  <li><span class="uk-label uk-label-success">Success</span></li>
+                  <li><span class="uk-label uk-label-warning">Warning</span></li>
+                  <li><span class="uk-label uk-label-danger">Danger</span></li>
+                  <li><a class="uk-badge" href="#">1</a></li>
+                  <li>
+                    <a class="uk-icon-button uk-icon" href="#" uk-icon="icon: home"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="home"><polygon points="18.65 11.35 10 2.71 1.35 11.35 0.65 10.65 10 1.29 19.35 10.65"></polygon><polygon points="15 4 18 4 18 7 17 7 17 5 15 5"></polygon><polygon points="3 11 4 11 4 18 7 18 7 12 12 12 12 18 16 18 16 11 17 11 17 19 11 19 11 13 8 13 8 19 3 19"></polygon></svg></a>
+                    <a class="uk-icon-button uk-icon" href="#" uk-icon="icon: github"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="github"><path d="M10,1 C5.03,1 1,5.03 1,10 C1,13.98 3.58,17.35 7.16,18.54 C7.61,18.62 7.77,18.34 7.77,18.11 C7.77,17.9 7.76,17.33 7.76,16.58 C5.26,17.12 4.73,15.37 4.73,15.37 C4.32,14.33 3.73,14.05 3.73,14.05 C2.91,13.5 3.79,13.5 3.79,13.5 C4.69,13.56 5.17,14.43 5.17,14.43 C5.97,15.8 7.28,15.41 7.79,15.18 C7.87,14.6 8.1,14.2 8.36,13.98 C6.36,13.75 4.26,12.98 4.26,9.53 C4.26,8.55 4.61,7.74 5.19,7.11 C5.1,6.88 4.79,5.97 5.28,4.73 C5.28,4.73 6.04,4.49 7.75,5.65 C8.47,5.45 9.24,5.35 10,5.35 C10.76,5.35 11.53,5.45 12.25,5.65 C13.97,4.48 14.72,4.73 14.72,4.73 C15.21,5.97 14.9,6.88 14.81,7.11 C15.39,7.74 15.73,8.54 15.73,9.53 C15.73,12.99 13.63,13.75 11.62,13.97 C11.94,14.25 12.23,14.8 12.23,15.64 C12.23,16.84 12.22,17.81 12.22,18.11 C12.22,18.35 12.38,18.63 12.84,18.54 C16.42,17.35 19,13.98 19,10 C19,5.03 14.97,1 10,1 L10,1 Z"></path></svg></a>
+                    <a class="uk-icon-link uk-icon" href="#" uk-icon="icon: trash"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="trash"><polyline fill="none" stroke="#000" points="6.5 3 6.5 1.5 13.5 1.5 13.5 3"></polyline><polyline fill="none" stroke="#000" points="4.5 4 4.5 18.5 15.5 18.5 15.5 4"></polyline><rect x="8" y="7" width="1" height="9"></rect><rect x="11" y="7" width="1" height="9"></rect><rect x="2" y="3" width="16" height="1"></rect></svg></a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+
+            <pre class="uk-pre uk-margin-medium"><code>&lt;div class="myclass"&gt;...&lt;div&gt;</code></pre>
+
+            <blockquote class="uk-margin-medium" cite="#">
+              <p>The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element.</p>
+              <footer>Someone famous in <cite><a href="#">Source Title</a></cite></footer>
+            </blockquote>
+
+            <div class="uk-grid-small uk-grid" uk-grid="">
+              <div class="uk-first-column">
+                <a class="uk-button uk-button-text" href="#">Read more</a>
+              </div>
+              <div>
+                <a class="uk-button uk-button-text" href="#">5 Comments</a>
+              </div>
+            </div>
+
+          </article>
+
+          <hr class="uk-margin-medium">
+
+          <ul class="uk-comment-list uk-margin-medium">
+            <li>
+              <article class="uk-comment uk-visible-toggle" tabindex="-1">
+                <header class="uk-comment-header uk-position-relative">
+                  <div class="uk-grid-medium uk-flex-middle uk-grid" uk-grid="">
+                    <div class="uk-width-auto uk-first-column">
+                      <canvas class="uk-comment-avatar test-img-small" width="50" height="50"></canvas>
+                    </div>
+                    <div class="uk-width-expand">
+                      <h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">Author</a></h4>
+                      <p class="uk-comment-meta uk-margin-remove-top"><a class="uk-link-reset" href="#">12 days ago</a></p>
+                    </div>
+                  </div>
+                  <div class="uk-position-top-right uk-position-small uk-hidden-hover"><a class="uk-button uk-button-text" href="#">Reply</a></div>
+                </header>
+                <div class="uk-comment-body">
+                  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
+                </div>
+              </article>
+            </li>
+          </ul>
+
+          <ul class="uk-pagination uk-flex-center" uk-margin="">
+            <li class="uk-first-column"><a href="#"><span uk-pagination-previous="" class="uk-icon uk-pagination-previous"><svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg" data-svg="pagination-previous"><polyline fill="none" stroke="#000" stroke-width="1.2" points="6 1 1 6 6 11"></polyline></svg></span></a></li>
+            <li><a href="#">1</a></li>
+            <li class="uk-disabled"><span>...</span></li>
+            <li><a href="#">4</a></li>
+            <li><a href="#">5</a></li>
+            <li><a href="#">6</a></li>
+            <li class="uk-active"><span>7</span></li>
+            <li><a href="#">8</a></li>
+            <li><a href="#">9</a></li>
+            <li><a href="#">10</a></li>
+            <li class="uk-disabled"><span>...</span></li>
+            <li><a href="#">20</a></li>
+            <li><a href="#"><span uk-pagination-next="" class="uk-icon uk-pagination-next"><svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg" data-svg="pagination-next"><polyline fill="none" stroke="#000" stroke-width="1.2" points="1 1 6 6 1 11"></polyline></svg></span></a></li>
+          </ul>
+
+        </div>
+        <div class="uk-width-expand@m">
+
+          <div class="uk-margin-medium-bottom">
+            <form class="uk-search uk-search-default uk-width-1-1">
+              <span uk-search-icon="" class="uk-icon uk-search-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="search-icon"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path></svg></span>
+              <input class="uk-search-input" type="search" placeholder="Search...">
+            </form>
+          </div>
+
+          <ul class="uk-nav-default uk-nav-parent-icon uk-margin-medium uk-nav" uk-nav="">
+            <li class="uk-active"><a href="#">Active</a></li>
+            <li class="uk-parent">
+              <a href="#">Parent</a>
+              <ul class="uk-nav-sub" aria-hidden="true" hidden="">
+                <li><a href="#">Sub item</a></li>
+                <li><a href="#">Sub item</a>
+                  <ul>
+                    <li><a href="#">Sub item</a></li>
+                    <li><a href="#">Sub item</a></li>
+                  </ul>
+                </li>
+              </ul>
+            </li>
+            <li class="uk-parent">
+              <a href="#">Parent</a>
+              <ul class="uk-nav-sub" aria-hidden="true" hidden="">
+                <li><a href="#">Sub item</a></li>
+                <li><a href="#">Sub item</a></li>
+              </ul>
+            </li>
+            <li class="uk-nav-header">Header</li>
+            <li><a href="#"><span class="uk-margin-small-right uk-icon" uk-icon="icon: table"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="table"><rect x="1" y="3" width="18" height="1"></rect><rect x="1" y="7" width="18" height="1"></rect><rect x="1" y="11" width="18" height="1"></rect><rect x="1" y="15" width="18" height="1"></rect></svg></span> Item</a></li>
+            <li><a href="#"><span class="uk-margin-small-right uk-icon" uk-icon="icon: thumbnails"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="thumbnails"><rect fill="none" stroke="#000" x="3.5" y="3.5" width="5" height="5"></rect><rect fill="none" stroke="#000" x="11.5" y="3.5" width="5" height="5"></rect><rect fill="none" stroke="#000" x="11.5" y="11.5" width="5" height="5"></rect><rect fill="none" stroke="#000" x="3.5" y="11.5" width="5" height="5"></rect></svg></span> Item</a></li>
+            <li class="uk-nav-divider"></li>
+            <li><a href="#"><span class="uk-margin-small-right uk-icon" uk-icon="icon: trash"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="trash"><polyline fill="none" stroke="#000" points="6.5 3 6.5 1.5 13.5 1.5 13.5 3"></polyline><polyline fill="none" stroke="#000" points="4.5 4 4.5 18.5 15.5 18.5 15.5 4"></polyline><rect x="8" y="7" width="1" height="9"></rect><rect x="11" y="7" width="1" height="9"></rect><rect x="2" y="3" width="16" height="1"></rect></svg></span> Item</a></li>
+          </ul>
+
+          <div class="uk-card uk-card-body uk-card-default uk-card-hover">
+            <h3 class="uk-card-title">Default</h3>
+            <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+          </div>
+
+          <div class="uk-margin uk-card uk-card-body uk-card-primary uk-card-hover">
+            <h3 class="uk-card-title">Primary</h3>
+            <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+          </div>
+
+          <div class="uk-margin uk-card uk-card-body uk-card-secondary uk-card-hover">
+            <h3 class="uk-card-title">Secondary</h3>
+            <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+          </div>
+
+          <div class="uk-margin uk-card uk-card-body uk-card-hover">
+            <h3 class="uk-card-title">Hover</h3>
+            <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+          </div>
+
+        </div>
+      </div>
+
+      <hr class="uk-margin-large">
+
+      <div class="uk-grid-divider uk-grid" uk-grid="">
+        <div class="uk-width-3-5@m uk-first-column">
+
+          <div class="uk-child-width-expand@s uk-grid" uk-grid="">
+            <div class="uk-first-column">
+
+              <form class="uk-form-stacked">
+
+                <div class="uk-margin-small">
+                  <label class="uk-form-label">Text</label>
+                  <input class="uk-input" type="text" placeholder="Some text...">
+                </div>
+
+                <div class="uk-margin-small">
+                  <select class="uk-select">
+                    <option>Option 01</option>
+                    <option>Option 02</option>
+                  </select>
+                </div>
+
+                <div class="uk-margin-small">
+                  <textarea class="uk-textarea" rows="2" placeholder="Some text..."></textarea>
+                </div>
+
+                <div class="uk-grid-small uk-child-width-auto uk-grid" uk-grid="">
+                  <div class="uk-first-column">
+                    <label><input class="uk-radio" type="radio" name="radio"> Radio</label>
+                  </div>
+                  <div>
+                    <label><input class="uk-checkbox" type="checkbox"> Checkbox</label>
+                  </div>
+                </div>
+
+                <div class="uk-margin-small">
+                  <input class="uk-range" type="range" value="2" min="0" max="10" step="0.1">
+                </div>
+
+              </form>
+
+            </div>
+            <div>
+
+              <form class="uk-form-stacked">
+
+                <div class="uk-margin-small">
+                  <label class="uk-form-label">States</label>
+                  <input class="uk-input" type="text" placeholder=":disabled" disabled="">
+                </div>
+
+                <div class="uk-margin-small">
+                  <input class="uk-input uk-form-danger" type="text" placeholder="form-danger" value="form-danger">
+                </div>
+                <div class="uk-margin-small">
+                  <input class="uk-input uk-form-success" type="text" placeholder="form-success" value="form-success">
+                </div>
+                <div class="uk-margin-small">
+                  <input class="uk-input uk-form-blank" type="text" placeholder="form-blank">
+                </div>
+
+              </form>
+
+            </div>
+          </div>
+
+          <div class="uk-overflow-auto uk-margin-medium-top">
+            <table class="uk-table uk-table-divider uk-table-hover uk-table-small">
+              <thead>
+              <tr>
+                <th>Table Heading</th>
+                <th>Table Heading</th>
+                <th>Table Heading</th>
+              </tr>
+              </thead>
+              <tbody>
+              <tr>
+                <td>Table Data</td>
+                <td>Table Data</td>
+                <td>Table Data</td>
+              </tr>
+              <tr>
+                <td>Table Data</td>
+                <td>Table Data</td>
+                <td>Table Data</td>
+              </tr>
+              <tr>
+                <td>Table Data</td>
+                <td>Table Data</td>
+                <td>Table Data</td>
+              </tr>
+              <tr>
+                <td>Table Data</td>
+                <td>Table Data</td>
+                <td>Table Data</td>
+              </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <div class="uk-margin-medium-top uk-alert" uk-alert="">
+            <a href="#" class="uk-alert-close uk-icon uk-close" uk-close=""><svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" data-svg="close-icon"><line fill="none" stroke="#000" stroke-width="1.1" x1="1" y1="1" x2="13" y2="13"></line><line fill="none" stroke="#000" stroke-width="1.1" x1="13" y1="1" x2="1" y2="13"></line></svg></a>
+            <p>Default</p>
+          </div>
+
+          <div class="uk-alert-primary uk-alert" uk-alert="">
+            <a href="#" class="uk-alert-close uk-icon uk-close" uk-close=""><svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" data-svg="close-icon"><line fill="none" stroke="#000" stroke-width="1.1" x1="1" y1="1" x2="13" y2="13"></line><line fill="none" stroke="#000" stroke-width="1.1" x1="13" y1="1" x2="1" y2="13"></line></svg></a>
+            <p>Primary</p>
+          </div>
+
+          <div class="uk-alert-success uk-alert" uk-alert="">
+            <a href="#" class="uk-alert-close uk-icon uk-close" uk-close=""><svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" data-svg="close-icon"><line fill="none" stroke="#000" stroke-width="1.1" x1="1" y1="1" x2="13" y2="13"></line><line fill="none" stroke="#000" stroke-width="1.1" x1="13" y1="1" x2="1" y2="13"></line></svg></a>
+            <p>Success</p>
+          </div>
+
+          <div class="uk-alert-warning uk-alert" uk-alert="">
+            <a href="#" class="uk-alert-close uk-icon uk-close" uk-close=""><svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" data-svg="close-icon"><line fill="none" stroke="#000" stroke-width="1.1" x1="1" y1="1" x2="13" y2="13"></line><line fill="none" stroke="#000" stroke-width="1.1" x1="13" y1="1" x2="1" y2="13"></line></svg></a>
+            <p>Warning</p>
+          </div>
+
+          <div class="uk-alert-danger uk-margin-remove-bottom uk-alert" uk-alert="">
+            <a href="#" class="uk-alert-close uk-icon uk-close" uk-close=""><svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" data-svg="close-icon"><line fill="none" stroke="#000" stroke-width="1.1" x1="1" y1="1" x2="13" y2="13"></line><line fill="none" stroke="#000" stroke-width="1.1" x1="13" y1="1" x2="1" y2="13"></line></svg></a>
+            <p>Danger</p>
+          </div>
+
+          <div class="uk-grid-small uk-child-width-auto uk-margin-medium-top uk-countdown uk-grid" uk-grid="" js-countdown="">
+            <div class="uk-first-column">
+              <div class="uk-countdown-number uk-countdown-days"><span>0</span><span>6</span></div>
+            </div>
+            <div class="uk-countdown-separator">:</div>
+            <div>
+              <div class="uk-countdown-number uk-countdown-hours"><span>2</span><span>3</span></div>
+            </div>
+            <div class="uk-countdown-separator">:</div>
+            <div>
+              <div class="uk-countdown-number uk-countdown-minutes"><span>5</span><span>9</span></div>
+            </div>
+            <div class="uk-countdown-separator">:</div>
+            <div>
+              <div class="uk-countdown-number uk-countdown-seconds"><span>5</span><span>0</span></div>
+            </div>
+          </div>
+
+          <script>
+
+              var date = (new Date(Date.now() + 864e5 * 7)).toISOString();
+
+              UIkit.util.$$('[js-countdown]').forEach(function(el) {
+                  UIkit.countdown(el, {date: date});
+              });
+
+          </script>
+
+        </div>
+        <div class="uk-width-2-5@m">
+
+          <h1 class="uk-heading-2xlarge uk-margin-small">2XL</h1>
+          <h1 class="uk-heading-xlarge uk-margin-small">XLarge</h1>
+          <h1 class="uk-heading-large uk-margin-small">Heading L</h1>
+          <h1 class="uk-heading-medium uk-margin-small">Heading M</h1>
+          <h1 class="uk-heading-small uk-margin-small">Heading S</h1>
+
+          <h1 class="uk-margin-small">Heading H1</h1>
+          <h2 class="uk-margin-small">Heading H2</h2>
+          <h3 class="uk-margin-small">Heading H3</h3>
+          <h4 class="uk-margin-small">Heading H4</h4>
+          <h5 class="uk-margin-small">Heading H5</h5>
+          <h6 class="uk-margin-small">Heading H6</h6>
+
+          <h3 class="uk-heading-divider">Heading Divider</h3>
+          <h3 class="uk-heading-bullet">Heading Bullet</h3>
+          <h3 class="uk-heading-line"><span>Heading Line</span></h3>
+
+        </div>
+      </div>
+
+      <hr class="uk-margin-medium">
+
+      <div class="uk-child-width-1-2@s uk-child-width-expand@m uk-grid" uk-grid="">
+        <div class="uk-first-column">
+
+          <div class="uk-inline">
+            <canvas width="800" height="600" class="test-img"></canvas>
+            <a class="uk-position-absolute uk-transform-center uk-icon uk-marker" style="left: 20%; top: 30%" href="#" uk-marker=""><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg></a>
+            <a class="uk-position-absolute uk-transform-center uk-icon uk-marker" style="left: 60%; top: 40%" href="#" uk-marker=""><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg></a>
+            <a class="uk-position-absolute uk-transform-center uk-icon uk-marker" style="left: 80%; top: 70%" href="#" uk-marker=""><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg></a>
+          </div>
+
+        </div>
+        <div>
+
+          <div class="uk-inline-clip">
+            <canvas width="800" height="600" class="test-img"></canvas>
+            <div class="uk-overlay uk-overlay-default uk-position-bottom">
+              <p>Default Lorem ipsum dolor sit amet, consectetur.</p>
+            </div>
+          </div>
+
+        </div>
+        <div>
+
+          <div class="uk-inline-clip">
+            <canvas width="800" height="600" class="test-img"></canvas>
+            <div class="uk-overlay uk-overlay-primary uk-position-bottom">
+              <p>Primary Lorem ipsum dolor sit amet, consectetur.</p>
+            </div>
+          </div>
+
+        </div>
+        <div>
+
+          <div class="uk-inline">
+            <canvas width="800" height="600" class="test-img"></canvas>
+            <div class="uk-position-center">
+              <span uk-overlay-icon="" class="uk-icon uk-overlay-icon"><svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" data-svg="overlay-icon"><rect x="19" y="0" width="1" height="40"></rect><rect x="0" y="19" width="40" height="1"></rect></svg></span>
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+      <hr class="uk-margin-medium">
+
+      <div class="uk-grid-divider uk-child-width-auto@m uk-grid" uk-grid="">
+        <div class="uk-first-column">
+
+          <ul class="uk-dotnav">
+            <li class="uk-active"><a href="#">Item 1</a></li>
+            <li><a href="#">Item 2</a></li>
+            <li><a href="#">Item 3</a></li>
+            <li><a href="#">Item 4</a></li>
+            <li><a href="#">Item 5</a></li>
+            <li><a href="#">Item 6</a></li>
+          </ul>
+
+        </div>
+        <div>
+
+          <a href="#" uk-slidenav-previous="" class="uk-icon uk-slidenav-previous uk-slidenav"><svg width="14px" height="24px" viewBox="0 0 14 24" xmlns="http://www.w3.org/2000/svg" data-svg="slidenav-previous"><polyline fill="none" stroke="#000" stroke-width="1.4" points="12.775,1 1.225,12 12.775,23 "></polyline></svg></a>
+          <a href="#" uk-slidenav-next="" class="uk-icon uk-slidenav-next uk-slidenav"><svg width="14px" height="24px" viewBox="0 0 14 24" xmlns="http://www.w3.org/2000/svg" data-svg="slidenav-next"><polyline fill="none" stroke="#000" stroke-width="1.4" points="1.225,23 12.775,12 1.225,1 "></polyline></svg></a>
+
+        </div>
+        <div>
+
+          <ul class="uk-thumbnav">
+            <li class="uk-active"><a href="#"><canvas width="60" height="40" class="test-img"></canvas></a></li>
+            <li><a href="#"><canvas width="60" height="40" class="test-img"></canvas></a></li>
+            <li><a href="#"><canvas width="60" height="40" class="test-img"></canvas></a></li>
+          </ul>
+
+        </div>
+        <div>
+
+          <div class="uk-tooltip uk-tooltip-top-center uk-display-inline-block uk-margin-remove uk-position-relative">Tooltip</div>
+
+        </div>
+        <div class="uk-width-expand@m">
+
+          <progress class="uk-progress" value="45" max="100">45%</progress>
+
+        </div>
+        <div>
+
+          <button type="button" uk-close="" class="uk-icon uk-close"><svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" data-svg="close-icon"><line fill="none" stroke="#000" stroke-width="1.1" x1="1" y1="1" x2="13" y2="13"></line><line fill="none" stroke="#000" stroke-width="1.1" x1="13" y1="1" x2="1" y2="13"></line></svg></button>
+
+        </div>
+        <div>
+
+          <a href="#" uk-totop="" class="uk-icon uk-totop"><svg width="18" height="10" viewBox="0 0 18 10" xmlns="http://www.w3.org/2000/svg" data-svg="totop"><polyline fill="none" stroke="#000" stroke-width="1.2" points="1 9 9 1 17 9 "></polyline></svg></a>
+
+        </div>
+      </div>
+
+      <hr class="uk-margin-medium">
+
+      <div class="uk-grid-divider uk-child-width-expand@m uk-grid" uk-grid="">
+        <div class="uk-first-column">
+
+          <ul class="uk-subnav uk-subnav-divider" uk-margin="">
+            <li class="uk-active uk-first-column"><a href="#">Active</a></li>
+            <li><a href="#">Item</a></li>
+            <li class="uk-disabled"><a>Disabled</a></li>
+          </ul>
+
+        </div>
+        <div>
+
+          <ul class="uk-subnav uk-subnav-pill" uk-margin="">
+            <li class="uk-active uk-first-column"><a href="#">Active</a></li>
+            <li><a href="#">Item</a></li>
+            <li class="uk-disabled"><a>Disabled</a></li>
+          </ul>
+
+        </div>
+        <div>
+
+          <ul uk-tab="" class="uk-tab">
+            <li class="uk-active"><a href="#">Active</a></li>
+            <li><a href="#">Item</a></li>
+            <li class="uk-disabled"><a>Disabled</a></li>
+          </ul>
+
+        </div>
+      </div>
+
+      <hr class="uk-margin-medium">
+
+      <div class="uk-grid-divider uk-child-width-expand@m uk-grid" uk-grid="">
+        <div class="uk-first-column">
+
+          <ul class="uk-list uk-list-bullet uk-margin-medium">
+            <li>List item 1</li>
+            <li>List item 2</li>
+            <li>List item 3</li>
+          </ul>
+
+          <ul class="uk-list uk-list-striped">
+            <li>List item 1</li>
+            <li>List item 2</li>
+            <li>List item 3</li>
+          </ul>
+
+        </div>
+        <div>
+
+          <ul class="uk-list uk-list-divider uk-margin-medium">
+            <li>List item 1</li>
+            <li>List item 2</li>
+            <li>List item 3</li>
+          </ul>
+
+          <dl class="uk-description-list uk-description-list-divider">
+            <dt>Description lists</dt>
+            <dd>A description text</dd>
+            <dt>Description lists</dt>
+            <dd>A description text</dd>
+          </dl>
+
+        </div>
+        <div>
+
+          <ul uk-accordion="" class="uk-accordion">
+            <li class="uk-open">
+
+              <a class="uk-accordion-title" href="#">Item 1</a>
+              <div class="uk-accordion-content" aria-hidden="false">
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
+              </div>
+
+            </li>
+            <li>
+
+              <a class="uk-accordion-title" href="#">Item 2</a>
+              <div class="uk-accordion-content" aria-hidden="true" hidden="">
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
+              </div>
+
+            </li>
+            <li>
+
+              <a class="uk-accordion-title" href="#">Item 3</a>
+              <div class="uk-accordion-content" aria-hidden="true" hidden="">
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
+              </div>
+
+            </li>
+          </ul>
+
+        </div>
+      </div>
+
+    </div>
+  </div>
+
+  <div class="uk-section uk-padding-remove-vertical">
+    <div class="uk-child-width-1-2@s uk-child-width-1-4@l uk-grid-collapse uk-grid-match uk-grid" uk-grid="">
+      <div class="uk-first-column">
+        <div class="uk-tile uk-tile-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</div>
+      </div>
+      <div>
+        <div class="uk-tile uk-tile-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</div>
+      </div>
+      <div>
+        <div class="uk-tile uk-tile-primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</div>
+      </div>
+      <div>
+        <div class="uk-tile uk-tile-secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</div>
+      </div>
+    </div>
+  </div>
+
+  <div class="uk-section uk-section-default">
+    <div class="uk-container">
+
+      <div class="uk-grid-large uk-flex-middle uk-grid" uk-grid="">
+        <div class="uk-width-expand@m uk-first-column">
+          <p class="uk-text-large">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
+        </div>
+        <div class="uk-width-auto@m">
+          <a class="uk-button uk-button-default uk-button-large" href="#">Button</a>
+        </div>
+      </div>
+
+    </div>
+  </div>
+
+  <div class="uk-section uk-section-muted">
+    <div class="uk-container">
+
+      <div class="uk-grid-large uk-flex-middle uk-grid" uk-grid="">
+        <div class="uk-width-expand@m uk-first-column">
+          <p class="uk-text-large">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
+        </div>
+        <div class="uk-width-auto@m">
+          <a class="uk-button uk-button-default uk-button-large" href="#">Button</a>
+        </div>
+      </div>
+
+    </div>
+  </div>
+
+  <div class="uk-section uk-section-primary">
+    <div class="uk-container">
+
+      <div class="uk-grid-large uk-flex-middle uk-grid" uk-grid="">
+        <div class="uk-width-expand@m uk-first-column">
+          <p class="uk-text-large">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
+        </div>
+        <div class="uk-width-auto@m">
+          <a class="uk-button uk-button-default uk-button-large" href="#">Button</a>
+        </div>
+      </div>
+
+    </div>
+  </div>
+
+  <div class="uk-section uk-section-secondary">
+    <div class="uk-container">
+
+      <div class="uk-grid-large uk-flex-middle uk-grid" uk-grid="">
+        <div class="uk-width-expand@m uk-first-column">
+          <p class="uk-text-large">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
+        </div>
+        <div class="uk-width-auto@m">
+          <a class="uk-button uk-button-default uk-button-large" href="#">Button</a>
+        </div>
+      </div>
+
+    </div>
+  </div>
+
+  <div id="modal" uk-modal="" class="uk-modal">
+    <div class="uk-modal-dialog">
+      <button class="uk-modal-close-default uk-icon uk-close" type="button" uk-close=""><svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" data-svg="close-icon"><line fill="none" stroke="#000" stroke-width="1.1" x1="1" y1="1" x2="13" y2="13"></line><line fill="none" stroke="#000" stroke-width="1.1" x1="13" y1="1" x2="1" y2="13"></line></svg></button>
+      <div class="uk-modal-header">
+        <h2 class="uk-modal-title">Headline</h2>
+      </div>
+      <div class="uk-modal-body">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+      </div>
+      <div class="uk-modal-footer uk-text-right">
+        <button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
+        <button class="uk-button uk-button-primary" type="button">Save</button>
+      </div>
+    </div>
+  </div>
+
+  <div id="modal-search" class="uk-modal-full uk-modal" uk-modal="">
+    <div class="uk-modal-dialog uk-flex uk-flex-center uk-flex-middle" uk-height-viewport="">
+
+      <button class="uk-modal-close-full uk-close-large uk-icon uk-close" type="button" uk-close=""><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="close-large"><line fill="none" stroke="#000" stroke-width="1.4" x1="1" y1="1" x2="19" y2="19"></line><line fill="none" stroke="#000" stroke-width="1.4" x1="19" y1="1" x2="1" y2="19"></line></svg></button>
+
+      <div>
+
+        <ul class="uk-nav-primary uk-nav-center uk-nav" uk-nav="">
+          <li class="uk-active"><a href="#">Active</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+        </ul>
+
+        <div class="uk-margin">
+          <form class="uk-search uk-search-large">
+            <input class="uk-search-input uk-text-center" type="search" placeholder="Search...">
+          </form>
+        </div>
+
+      </div>
+
+    </div>
+  </div>
+
+</div>
+<div class="uk-container ">
+  <button class="uk-button portal-button">Button</button>
+  <div class="portal-color">portal-color</div>
+  <div class="portal-secondary-color">portal-secondary-color</div>
+  <div class="portal-background-color">portal-background-color</div>
+  <a class="uk-link portal-link">portal-link</a>
+  <div class="portal-box">portal-box</div>
+  <div><span class="portal-icon-button uk-icon uk-icon-button" uk-icon="icon: check"></span> portal-icon-button
+    uk-icon-button uk-icon</div>
+
+</div>
+<div class="uk-container uk-container-small portal-box">
+  <div class=" uk-text-large">small container</div>
+
+
+</div>
+<div class="uk-container   portal-box">
+  <div class=" uk-text-large">large container</div>
+
+
+</div>
+<div class="uk-container uk-container-large portal-box">
+  <div class=" uk-text-large">large container</div>
+
+
+</div>
+
+.
diff --git a/src/app/test/theme.component.ts b/src/app/test/theme.component.ts
new file mode 100644
index 0000000..297bb14
--- /dev/null
+++ b/src/app/test/theme.component.ts
@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  selector: 'theme',
+  templateUrl: 'theme.component.html',
+})
+
+export class ThemeComponent {
+
+}
diff --git a/src/app/utils/customization/customization.component.ts b/src/app/utils/customization/customization.component.ts
new file mode 100644
index 0000000..4d8b91e
--- /dev/null
+++ b/src/app/utils/customization/customization.component.ts
@@ -0,0 +1,210 @@
+import {Component, Input} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';
+import {LayoutService} from "../../openaireLibrary/services/layout.service";
+import {CustomizationOptions} from "../../openaireLibrary/connect/community/CustomizationOptions";
+import {ConnectHelper} from "../../openaireLibrary/connect/connectHelper";
+import {PiwikHelper} from "../piwikHelper";
+import {StringUtils} from "../../openaireLibrary/utils/string-utils.class";
+
+declare var appendCss: any;
+
+@Component({
+  selector: 'customization',
+  template: `
+
+<!--    <p>This is customizing layout component</p>-->
+  `
+})
+
+export class CustomizationComponent {
+  @Input() communityId;
+  layout: CustomizationOptions;
+
+  constructor(private route: ActivatedRoute,
+              private router: Router, private _layoutService: LayoutService
+  ) {
+  }
+
+  public ngOnInit() {
+    this.route.data
+      .subscribe((data: { envSpecific: EnvProperties }) => {
+        this.route.queryParams.subscribe(params => {
+
+          if(params['layout']) {
+            this.layout = JSON.parse(StringUtils.URIDecode(params['layout']));
+            this.buildCss();
+          }else{
+            // this.properties = data.envSpecific;
+//com.communityId,
+//               data.envSpecific.adminToolsAPIURL + '/'
+
+            this._layoutService.mockLayout().subscribe(
+              layout => {
+                this.layout = layout;
+
+                this.buildCss();
+              }
+            );
+          }
+
+        });
+
+
+
+      });
+
+
+  }
+
+  private buildCss() {
+    // console.log(this.layout);
+    document.documentElement.style.setProperty('--portal-main-color', this.layout.mainColor);
+    document.documentElement.style.setProperty('--portal-dark-color', this.layout.secondaryColor);
+    let css = `
+            /*Panel background*/
+.communityPanelBackground:not(bottom)  {   
+    border-style: ` + (this.layout.panel.background.borderStyle != null ? this.layout.panel.background.borderStyle : 'solid') + `;
+    border-color:` + (this.layout.panel.background.borderColor != null ? this.layout.panel.background.borderColor : 'transparent') + `;
+    border-width: ` + (this.layout.panel.background.borderWidth != null ? this.layout.panel.background.borderWidth : '1px') + `;`+`
+}
+.communityPanelBackground, .communityPanelBackground .uk-section-primary {
+        background-color:  ` + this.layout.mainColor + `;    
+}
+
+/*Panel fonts*/
+
+.communityPanelBackground {
+    color:` + (this.layout.panel.fonts.color != null ? this.layout.panel.fonts.color : 'white') + ` !important;` +
+      (this.layout.panel.fonts.family != null ? ('font-family: ' + this.layout.panel.fonts.family + ' !important;') : '') +
+      (this.layout.panel.fonts.size != null ? ('font-size: ' + this.layout.panel.fonts.size + ' !important;') : '') +
+
+      `
+}
+ .communityPanelBackground div.uk-modal  {
+    color:#666 !important;
+}
+
+.communityPanelBackground .uk-h6:not(.ignoreCommunityPanelBackground),.communityPanelBackground .uk-h5:not(.ignoreCommunityPanelBackground),.communityPanelBackground .uk-h4:not(.ignoreCommunityPanelBackground),.communityPanelBackground .uk-h3:not(.ignoreCommunityPanelBackground), .communityPanelBackground .uk-h2:not(.ignoreCommunityPanelBackground),.communityPanelBackground .uk-h1:not(.ignoreCommunityPanelBackground) {
+    color: ` + (this.layout.panel.title.color != null ? this.layout.panel.title.color : 'white') + ` !important;` +
+
+      `
+}
+.communityPanelBackground .uk-h5:not(.ignoreCommunityPanelBackground){
+`+
+      (this.layout.panel.title.family != null ? ('font-family: ' + this.layout.panel.title.family + ' !important;') : '') +
+      (this.layout.panel.title.size != null ? ('font-size: ' + this.layout.panel.title.size + ' !important;') : '') +
+      `
+}
+/* Panel links */
+.communityPanelBackground .uk-link:not(.ignoreCommunityPanelBackground), .communityPanelBackground a:not(.uk-button):not(.uk-button-text):not(.ignoreCommunityPanelBackground), .portal-card a {
+    color: `
+      + (this.layout.panel.links.color != null ? this.layout.panel.links.color : 'white') + ` !important;` +
+      (this.layout.panel.links.family != null ? ('font-family: ' + this.layout.panel.links.family + ' !important;') : '') +
+      (this.layout.panel.links.size != null ? ('font-size: ' + this.layout.panel.links.size + ' !important;') : '') +
+      `
+}
+/* Panel links - hover */
+
+.communityPanelBackground .uk-link:not(.ignoreCommunityPanelBackground):hover, .communityPanelBackground a:not(.uk-button):not(.uk-button-text):not(.ignoreCommunityPanelBackground):hover, .portal-card a:hover {
+    color: `
+      + (this.layout.panel.links.onHover.color != null ? this.layout.panel.links.onHover.color : `rgba(255, 255, 255, 0.5)`) + ` !important;` + `
+}
+ 
+.uk-link, a:not(.uk-button), .uk-navbar-dropdown-nav > li > a, .uk-navbar-nav > li > a, .loginLink,
+.uk-tab > .uk-active > a, .uk-tab > * > a:focus, .uk-tab > * > a:hover {
+    color:` + (this.layout.links.color != null ? this.layout.links.color : `var(--portal-main-color)`) + `     
+}
+
+.uk-link:hover, a:not(.uk-button):hover,
+.uk-navbar-dropdown-nav > li > a:focus, .uk-navbar-dropdown-nav > li > a:hover, .uk-navbar-nav > li > a:hover, .uk-navbar-nav > li > a:focus, .uk-navbar-nav > li > a:active, .uk-navbar-nav > li:hover > a,
+.uk-navbar-dropdown-nav > li.uk-active > a, .uk-tab > .uk-active > a, .uk-navbar-nav > li.uk-active > a, .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav > li.uk-active > a {
+    color:` + (this.layout.links.onHover.color != null ? this.layout.links.onHover.color : `var(--portal-dark-color)`) + `     
+}
+
+.communityBorder {
+    border-color: ` + (this.layout.box.borderColor != null ? this.layout.box.borderColor : `var(--portal-main-color)`) + `;
+    border-style: ` + (this.layout.box.borderStyle != null ? this.layout.box.borderStyle : `solid`) + `;
+    border-width: ` + (this.layout.box.borderWidth != null ? this.layout.box.borderWidth : `2px`) + `;
+    border-radius: ` + (this.layout.box.borderRadius != null ? this.layout.box.borderRadius : `6px`) + `;
+}
+
+/*Panel Elements & cards*/
+.communityPanelBackground .uk-card:not(.ignoreCommunityPanelBackground), .communityPanelBackground .uk-label:not(.ignoreCommunityPanelBackground) {
+    background-color: ` + (this.layout.panel.panelElements.backgroundColor != null ? this.layout.panel.panelElements.backgroundColor : `rgba(255, 255, 255, 0.5)`) + `;
+    border-color: ` + (this.layout.panel.panelElements.borderColor != null ? this.layout.panel.panelElements.borderColor : `rgba(255, 255, 255, 0.5)`) + `;
+}
+.communityPanelBackground .uk-label:not(.ignoreCommunityPanelBackground) a{    
+    border-color: ` + (this.layout.panel.links.color != null ? this.layout.panel.links.color : `rgba(255, 255, 255, 0.8)`) + `;
+    border-bottom: 1px solid;
+}
+.communityPanelBackground .uk-label:not(.ignoreCommunityPanelBackground) a:hover{    
+    border-color: ` + (this.layout.panel.links.onHover.color != null ? this.layout.panel.links.onHover.color : `rgba(255, 255, 255, 0.5)`) + `;
+}
+.communityPanelBackground .uk-card:not(.ignoreCommunityPanelBackground), .communityPanelBackground .uk-label:not(.ignoreCommunityPanelBackground) {
+    color: ` + (this.layout.panel.panelElements.color != null ? this.layout.panel.panelElements.color : `rgba(255, 255, 255, 0.5)`) + `;
+}
+
+
+.uk-button:not(.uk-button-text){
+  border-radius:` + (this.layout.buttons.borderRadius != null ? this.layout.buttons.borderRadius : `4px`) + `;
+}
+.uk-button:not(.uk-button-text):not(.uk-button-default):not(.uk-button-primary), .portal-button {
+    background-color:` + (this.layout.buttons.backgroundColor != null ? this.layout.buttons.backgroundColor : `#003052`) + `;
+    color: ` + (this.layout.buttons.color != null ? this.layout.buttons.color : `white`) + `;
+    border-color: ` + (this.layout.buttons.borderColor != null ? this.layout.buttons.borderColor : `transparent`) + `;
+    border-style: ` + (this.layout.buttons.borderStyle != null ? this.layout.buttons.borderStyle : `solid`) + `;
+    border-width: ` + (this.layout.buttons.borderWidth != null ? this.layout.buttons.borderWidth : `1px`) + `;
+  
+
+}
+
+.uk-button:not(.uk-button-text):not(.uk-button-default):not(.uk-button-primary):hover, .portal-button:hover {
+    background-color: ` + (this.layout.buttons.onHover.backgroundColor != null ? this.layout.buttons.onHover.backgroundColor : `#154B71`) + `;
+    color: ` + (this.layout.buttons.onHover.color != null ? this.layout.buttons.onHover.color : `white`) + `;
+    border-color: ` + (this.layout.buttons.onHover.color != null ? this.layout.buttons.onHover.color : `transparent`) + `;
+}
+
+/*Buttons*/
+.communityPanelBackground .uk-button:not(.ignoreCommunityPanelBackground) {
+    background-color: ` + (this.layout.panel.buttons.backgroundColor != null ? this.layout.panel.buttons.backgroundColor : `white`) + `  !important;
+    color: ` + (this.layout.panel.buttons.color != null ? this.layout.panel.buttons.color : `var(--portal-main-color)`) + ` !important;
+    border-color: ` + (this.layout.panel.buttons.borderColor != null ? this.layout.panel.buttons.borderColor : `transparent`) + ` !important;
+    border-style: ` + (this.layout.panel.buttons.borderStyle != null ? this.layout.panel.buttons.borderStyle : `solid`) + `  !important;
+    border-width: ` + (this.layout.panel.buttons.borderWidth != null ? this.layout.panel.buttons.borderWidth : `1px`) + ` !important;
+    border-radius:` + (this.layout.panel.buttons.borderRadius != null ? this.layout.panel.buttons.borderRadius : `4px`) + ` !important;
+    font-weight:` + (this.layout.panel.buttons.fontWeight != null ? this.layout.panel.buttons.fontWeight : `600`) + `;
+
+}
+
+.communityPanelBackground .uk-button:not(.ignoreCommunityPanelBackground):hover {
+    background-color: ` + (this.layout.panel.buttons.onHover.backgroundColor != null ? this.layout.panel.buttons.onHover.backgroundColor : ` #eeeeee `) + ` !important;
+    color: ` + (this.layout.panel.buttons.onHover.color != null ? this.layout.panel.buttons.onHover.color : ` var(--portal-main-color) `) + `  !important;
+    border-color:` + (this.layout.panel.buttons.onHover.borderColor != null ? this.layout.panel.buttons.onHover.borderColor : `transparent`) + `  !important;
+}
+
+
+.uk-navbar-dropdown {
+    background-color: white;
+    color: #666;
+    box-shadow: 0 5px 12px rgba(0, 0, 0, .15);
+    /*border:var(--portal-main-color) 1px solid;*/
+}
+
+.customTabs .uk-tab > .uk-active > a {
+    border-color: var(--portal-main-color);
+}
+
+.customTabs .uk-tab > .uk-active > a {
+    border-color: var(--portal-main-color);
+}
+
+.uk-tab > * > a:focus, .uk-tab > * > a:hover {
+    border-color: var(--portal-dark-color);
+}
+
+
+`
+    appendCss(css);
+  }
+}
diff --git a/src/app/utils/customization/customization.module.ts b/src/app/utils/customization/customization.module.ts
new file mode 100644
index 0000000..a2785d6
--- /dev/null
+++ b/src/app/utils/customization/customization.module.ts
@@ -0,0 +1,28 @@
+import {ModuleWithProviders, NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {RouterModule} from '@angular/router';
+import {CustomizationComponent} from "./customization.component";
+import {LayoutService} from "../../openaireLibrary/services/layout.service";
+
+
+@NgModule({
+  imports: [
+    CommonModule, RouterModule
+  ],
+  declarations: [
+    CustomizationComponent
+  ],
+  exports: [
+    CustomizationComponent
+  ]
+})
+export class CustomizationModule {
+  static forRoot(): ModuleWithProviders {
+    return {
+      ngModule: CustomizationModule,
+      providers: [
+      LayoutService
+      ]
+    }
+  }
+}
diff --git a/src/app/utils/manage/manage.component.ts b/src/app/utils/manage/manage.component.ts
deleted file mode 100644
index c53a600..0000000
--- a/src/app/utils/manage/manage.component.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Component, Input, ViewChild } from '@angular/core';
-import { Location } from '@angular/common';
-import {ActivatedRoute} from '@angular/router';
-import { EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';
-import {CommunityService} from '../../openaireLibrary/connect/community/community.service';
-import {Session} from '../../openaireLibrary/login/utils/helper.class';
-@Component({
-    selector: 'manage',
-    template: `
-
-
-      <a *ngIf="isManager" [href]="'https://beta.admin.connect.openaire.eu/dashboard?communityId='+communityId"  class="uk-button uk-button-default uk-margin-left" target="_blank"  >
-        <span class="uk-margin-small-right uk-icon" uk-icon="cog"> </span>Manage</a>
-
-
-    `
-})
-
-export class ManageComponent {
-   @Input() communityId:string;
-
-
-  isManager:boolean = false;
-  properties:EnvProperties;
-    constructor (private route: ActivatedRoute,
-      private _communityService: CommunityService
-    ) {
-    }
-
-    public ngOnInit() {
-      this.route.data
-          .subscribe((data: { envSpecific: EnvProperties }) => {
-             this.properties = data.envSpecific;
-             if(Session.isLoggedIn()){
-               if(Session.isPortalAdministrator()||Session.isCommunityCurator()){
-                 this.isManager = true;
-               }else if(Session.isLoggedIn()){
-                 var email = Session.getUserEmail();
-                 this._communityService.iscommunityManager(this.properties, this.properties.communityAPI+ this.communityId, email).subscribe (
-                     res => {
-                       this.isManager = res;
-                     });
-                 }
-               }
-             });
-
-
-
-    }
-
-}
diff --git a/src/app/utils/manage/manage.module.ts b/src/app/utils/manage/manage.module.ts
deleted file mode 100644
index ff61e55..0000000
--- a/src/app/utils/manage/manage.module.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { NgModule}            from '@angular/core';
-import { CommonModule }        from '@angular/common';
-import { RouterModule } from '@angular/router';
-
-import {CommunityService} from '../../openaireLibrary/connect/community/community.service';
-import {ManageComponent} from './manage.component';
-import {AlertModalModule} from '../../openaireLibrary/utils/modal/alertModal.module';
-
-@NgModule({
-  imports: [
-    CommonModule,   RouterModule, AlertModalModule
-  ],
-  declarations: [
-    ManageComponent
-   ],
-  providers:[
-    CommunityService
-    ],
-  exports: [
-    ManageComponent
-     ]
-})
-export class ManageModule { }
diff --git a/src/app/utils/piwikHelper.ts b/src/app/utils/piwikHelper.ts
index 040b397..390c493 100644
--- a/src/app/utils/piwikHelper.ts
+++ b/src/app/utils/piwikHelper.ts
@@ -14,6 +14,28 @@ export class PiwikHelper{
     "aginfra":93,
     "clarin":100,
     "dariah":103
+  };
+  public static siteIDsProduction={
+    "connect": 112,
+    "dh-ch":198,
+    "ee":200,
+    "egi":'',
+    "elixir-gr":'',
+    "fam":197,
+    "instruct":'',
+    "mes":196,
+    "ni":199,
+    "oa-pg":'',
+    "rda":'',
+    "aginfra":'',
+    "clarin":'',
+    "dariah":''
+  };
+  public static getSiteId(communityId:string, environment:string){
+    if(environment == 'production'){
+      return this.siteIDsProduction[communityId];
+    }
+    return this.siteIDs[communityId];
   }
 
 }
diff --git a/src/app/utils/services/statistics.service.ts b/src/app/utils/services/statistics.service.ts
index be868c7..e29ed5d 100644
--- a/src/app/utils/services/statistics.service.ts
+++ b/src/app/utils/services/statistics.service.ts
@@ -1,38 +1,39 @@
 import { Injectable } from '@angular/core';
-import { Http, Response, Headers, RequestOptions } from '@angular/http';
+import {HttpClient, HttpErrorResponse} from "@angular/common/http";
 import { Observable } from 'rxjs/Rx';
 import {StatisticsDisplay, StatisticsSummary} from "../../openaireLibrary/connect/statistics/statisticsEntities";
+import {catchError, map} from "rxjs/operators";
+import {throwError} from "rxjs";
+import {EnvProperties} from "../../openaireLibrary/utils/properties/env-properties";
 
 
 @Injectable()
 export class StatisticsService {
 
 
-    constructor(private http:Http) { }
+    constructor(private http:HttpClient) { }
 
-    getCommunityStatistics(apiUrl: string, communityId: string): Observable<StatisticsSummary> {
-        let url = `${apiUrl}communities/${communityId}`;
-        console.log(`getting statistics summary from: ${url}`);
-        return this.http.get(url)
-            .map(res => <any>res.json())
-            .do(res => {console.log(res)})
-            .map(res => res.statistics)
-            .do(res => {console.log(res)});
+    getCommunityStatistics(properties:EnvProperties, communityId: string): Observable<StatisticsSummary> {
+        let url = properties.statisticsAPIURL+"/communities/"+communityId;
+        //console.log(`getting statistics summary from: ${url}`);
+        return this.http.get<any>((properties.useCache) ? (properties.cacheUrl + encodeURIComponent(url)) : url)
+            //.map(res => <any>res.json())
+            .pipe(map(res => res['statistics']));
     }
 
-    getCommunityAdminStatisticsChoices(apiUrl: string, communityId: string): Observable<StatisticsDisplay> {
-        let url = `${apiUrl}/statistics/${communityId}`;
-        console.log(`getting admin choices for statistics from: ${url}`);
-        return this.http.get(url)
-            .map(stats => <StatisticsDisplay>stats.json())
-            .catch(this.handleError);
+    getCommunityAdminStatisticsChoices(properties: EnvProperties, communityId: string): Observable<StatisticsDisplay> {
+        let url = properties.adminToolsAPIURL+"/statistics/"+communityId;
+        //console.log(`getting admin choices for statistics from: ${url}`);
+        return this.http.get<StatisticsDisplay>((properties.useCache) ? (properties.cacheUrl + encodeURIComponent(url)) : url)
+            //.map(stats => <StatisticsDisplay>stats.json())
+            .pipe(catchError(this.handleError));
     }
 
 
-    private handleError (error: Response) {
+    private handleError (error: HttpErrorResponse) {
         // in a real world app, we may send the error to some remote logging infrastructure
         // instead of just logging it to the console
         console.log(error);
-        return Observable.throw(error  || 'Server error');
+        return throwError(error  || 'Server error');
     }
 }
diff --git a/src/app/utils/subscribe/invite.component.ts b/src/app/utils/subscribe/invite.component.ts
deleted file mode 100644
index 79eda4e..0000000
--- a/src/app/utils/subscribe/invite.component.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import { Component, Input, ViewChild } from '@angular/core';
-import { Location } from '@angular/common';
-import {ActivatedRoute} from '@angular/router';
-import { EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';
-
-import {InviteService} from './invite.service';
-import {Session} from '../../openaireLibrary/login/utils/helper.class';
-@Component({
-    selector: 'invite',
-    template: `
-    <form class="uk-form-stacked">
-        <div>
-            <label class="uk-form-label">Subject</label>
-            <input type="text" placeholder="Subject" [(ngModel)]=subject name="subject">
-        </div>
-        <div>
-            <div class="uk-form-label">Message</div>
-            <textarea cols="" rows="6" placeholder="Email message..." [(ngModel)]=body name="body"></textarea>
-         </div>
-        <a class="uk-button uk-button-primary" (click)="invite()"> Invite</a>
-    </form>
-
-    `
-})
-
-export class InviteComponent {
-  @Input() communityName:boolean;
-  @Input() communityId:string;
-  properties:EnvProperties;
-
-  subject:string;
-  body:string;
-  recipients:string[] = [];
-
-  constructor (private route: ActivatedRoute,
-      private _inviteService: InviteService
-    ) {
-    }
-
-    public ngOnInit() {
-      this.route.data
-          .subscribe((data: { envSpecific: EnvProperties }) => {
-             this.properties = data.envSpecific;
-             this.subject = "["+this.communityName+"] Invitation to join community";
-             this.body = "Dear sir or madame, \n\nWe would like to invite you to join "+this.communityName +
-             " OpenAIRE community (beta."+this.communityId+".openaire.eu)";
-           });
-
-
-    }
-
-    invite(){
-      var email = Session.getUserEmail();
-      //TODO
-        this._inviteService.inviteUsers(  this.properties.adminToolsAPIURL,this.subject, this.body, ["argirok@di.uoa.gr"]).subscribe (
-          res => {
-             console.log(res);
-
-          });
-      }
-
-
-}
diff --git a/src/app/utils/subscribe/invite.module.ts b/src/app/utils/subscribe/invite.module.ts
deleted file mode 100644
index 8819261..0000000
--- a/src/app/utils/subscribe/invite.module.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { NgModule}            from '@angular/core';
-import { CommonModule }        from '@angular/common';
-import { RouterModule } from '@angular/router';
-import {FormsModule}                from '@angular/forms';
-
-import { InviteService } from './invite.service';
-import {InviteComponent} from './invite.component';
-import {AlertModalModule} from '../../openaireLibrary/utils/modal/alertModal.module';
-
-@NgModule({
-  imports: [
-    CommonModule,   RouterModule, AlertModalModule, FormsModule
-  ],
-  declarations: [
-    InviteComponent
-   ],
-  providers:[
-    InviteService
-    ],
-  exports: [
-    InviteComponent
-     ]
-})
-export class InviteModule { }
diff --git a/src/app/utils/subscribe/invite.service.ts b/src/app/utils/subscribe/invite.service.ts
deleted file mode 100644
index fd54def..0000000
--- a/src/app/utils/subscribe/invite.service.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Http, Response, Headers, RequestOptions } from '@angular/http';
-import { Observable } from 'rxjs/Rx';
-import {COOKIE} from "../../openaireLibrary/login/utils/helper.class"
-
-
-@Injectable()
-export class InviteService {
-
-  constructor(private http:Http) {
-    }
-     inviteUsers(url:string, subject:string, body:string, recipients:string[]){
-       var email = {"subject":subject, "body":body, recipients: recipients };
-       return this.http.post(url+"/email", JSON.stringify(email), this.getAuthOptionsWithBody())
-           .map(res => <any> res.json())
-           .do(res => {console.log("Response is "+res)});
-     }
-     public getAuthOptionsWithBody():RequestOptions{
-     let headers = new Headers();
-     headers.append('Content-Type', 'application/json');
-     headers.append('X-XSRF-TOKEN',  COOKIE.getCookie(COOKIE.cookieName_id));
-     let options = new RequestOptions({ headers: headers, withCredentials:true  });
-       return options;
-     }
-
-}
diff --git a/src/app/utils/subscribe/invite/invite-routing.module.ts b/src/app/utils/subscribe/invite/invite-routing.module.ts
new file mode 100644
index 0000000..09dba94
--- /dev/null
+++ b/src/app/utils/subscribe/invite/invite-routing.module.ts
@@ -0,0 +1,17 @@
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+
+import {InviteComponent} from './invite.component';
+import {LoginGuard} from '../../../openaireLibrary/login/loginGuard.guard';
+import {PreviousRouteRecorder} from '../../../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
+import {IsRouteEnabled} from "../../../openaireLibrary/error/isRouteEnabled.guard";
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+     	{ path: '', component: InviteComponent, canActivate: [LoginGuard, /*IsRouteEnabled*/], canDeactivate: [PreviousRouteRecorder] }
+
+    ])
+  ]
+})
+export class InviteRoutingModule { }
diff --git a/src/app/utils/subscribe/invite/invite.component.html b/src/app/utils/subscribe/invite/invite.component.html
new file mode 100644
index 0000000..94b27ec
--- /dev/null
+++ b/src/app/utils/subscribe/invite/invite.component.html
@@ -0,0 +1,199 @@
+<schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other"></schema2jsonld>
+
+<div *ngIf="longView == true">
+  <div class="uk-section uk-padding-remove-top tm-middle uk-container" id="tm-main">
+
+    <div class="uk-container  uk-margin-bottom">
+      <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
+              [texts]="pageContents['top']"></helper>
+      <div id="invite" class=" uk-card uk-card-default uk-padding uk-margin-top">
+        <div class="uk-text-large uk-text-center uk-width-5-6@l uk-width ">Invite users to subscribe</div>
+        <div class="uk-margin-top">
+          <errorMessages [status]="[status]" [type]="'community'"></errorMessages>
+        </div>
+        <div *ngIf="missingCommunityId" class="uk-alert uk-alert-warning" role="alert">{{missingCommunityId}}</div>
+        <div *ngIf="successfulSentMessage" class="uk-alert uk-alert-success"
+             role="alert">{{successfulSentMessage}} {{successfulSentRecipients}}</div>
+        <div *ngIf="failureSentMessage" class="uk-alert uk-alert-warning"
+             role="alert">{{failureSentMessage}} {{failureSentRecipients}}</div>
+        <div *ngIf="inviteErrorMessage" class="uk-alert uk-alert-warning" role="alert">{{inviteErrorMessage}}</div>
+        <div *ngIf="communityId != null && status == errorCodes.DONE">
+          <table class="uk-table uk-align-center">
+            <tbody>
+            <!-- <tr>
+                <td>
+                </td>
+                <td>
+                    <li>Invite by email</li>
+                </td>
+            </tr> -->
+            <tr>
+              <td for="from" class="uk-text-bold uk-width-1-4 uk-text-right">From <span
+                class="uk-text-danger uk-text-bold">*</span> :
+              </td>
+              <td class="uk-text-left uk-width-expand">
+                <input placeholder="Type your name" type="text" (click)="resetMessages()"
+                       class="form-control uk-input uk-width-large@l uk-width-medium@s" [(ngModel)]="body.fromName"
+                       id="from" required>
+                <div *ngIf="!body.fromName" class="uk-width-large uk-text-danger uk-text-small">Please add your name.
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <td for="recipients" class="uk-text-bold uk-text-right">To <span
+                class="uk-text-danger uk-text-bold">*</span> :
+              </td>
+              <td class="uk-text-left">
+                <input placeholder="email" type="text" (click)="resetMessages(); areValid=true"
+                       class="form-control uk-input uk-width-large@l uk-width-medium@s" [(ngModel)]="recipients"
+                       id="recipients"
+                       required>
+                <div *ngIf="areValid && !showAddRecipientMessage" class="uk-width-medium uk-text-muted uk-text-small">
+                  separate multiple emails with a comma
+                </div>
+                <div *ngIf="recipients && !areValid" class="uk-width-large uk-text-danger uk-text-small">Please add
+                  valid email/s.
+                </div>
+                <div *ngIf="isEmpty(recipients) && showAddRecipientMessage"
+                     class="uk-width-large uk-text-danger uk-text-small">Please add a recipient.
+                </div>
+              </td>
+            </tr>
+            </tbody>
+          </table>
+          <div class="boundary-align uk-panel uk-placeholder">
+
+            <table class="uk-table uk-align-center">
+              <tbody>
+              <!-- <tr>
+                 <td class="uk-text-bold uk-width-1-4@xl uk-width-1-4@m uk-width-1-4@s uk-text-right"></td>
+                 <td class="uk-text-left">
+                      <{{body.salutation}}<br>-->
+              <!-- <span *ngIf="body.fromName == ''" class="uk-text-muted">
+                      <i>{{body.fromMessage}}...</i>
+              </span>
+              <span *ngIf="body.fromName !=''">
+                      {{body.fromMessage}}
+                      <b>{{body.fromName}}</b>
+              </span>
+         </td>
+      </tr> -->
+              <tr>
+                <td for="email.body" class="uk-text-bold uk-text-right">Message:</td>
+                <td *ngIf="allowEdit()" class="uk-text-left">
+                  <ckeditor (click)="resetMessages()"
+                            class="form-control" [(ngModel)]="body.paragraphs" id="message"
+                            debounce="400"
+                            [config]="{ extraAllowedContent: '* [uk-*](*) ; span', disallowedContent: 'script; *[on*]', removeButtons: 'Save,NewPage,DocProps,Preview,Print',
+                                                                   extraPlugins: 'divarea'}">
+                    <!-- <id="contentTag"-->
+                    <!--(ready)="onReady($event)"-->
+                    <!--(focus)="onFocus($event)"-->
+                    <!--[config]="{uiColor: '#99000'}"-->
+                    <!--(blur)="onBlur($event)"-->
+                    <!--(change)="onChange($event)"-->
+                  </ckeditor>
+                </td>
+                <td *ngIf="!allowEdit()" class="uk-text-left">
+
+                  <div [innerHtml]="body.paragraphs"></div>
+                </td>
+              </tr>
+              <tr>
+                <td></td>
+                <td class="uk-text-left">
+                  <!-- {{body.closing}}<br> -->
+                  {{body.signature}}
+                  <span *ngIf="body.fromName == ''" class="uk-text-muted">
+                                                        <i>{{body.fromMessage}}...</i>
+                                                </span>
+                  <span *ngIf="body.fromName !=''">
+                                                        {{body.fromMessage}}
+                    <b>{{body.fromName}}</b>
+                                                </span>
+                  <br><a href="https://www.openaire.eu">www.openaire.eu</a>
+                </td>
+              </tr>
+              </tbody>
+            </table>
+          </div>
+          <table class="uk-table uk-align-center">
+            <tbody>
+            <tr>
+              <td class="uk-text-bold uk-width-3-5@xl uk-width-3-5@m uk-width-3-5@s uk-text-right"></td>
+              <td>
+                <div class="uk-padding uk-padding-remove-top uk-padding-remove-bottom uk-text-danger uk-text-bold">*
+                  Required fields
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <td class="uk-text-right"></td>
+              <td>
+                <div
+                  class="uk-grid-margin uk-first-column uk-align-center uk-text-left uk-padding uk-padding-remove-top uk-padding-remove-bottom">
+                  <button class="uk-button portal-button" (click)="invite()">Invite</button>
+                </div>
+              </td>
+            </tr>
+            </tbody>
+          </table>
+
+          <div class="uk-text-left">
+            <span uk-icon="chevron-left"></span><span class="uk-margin-small-left">
+                                        <a [queryParams]="communityIdParam" routerLinkActive="router-link-active"
+                                           routerLink="/">Back</a>
+                                </span>
+          </div>
+
+        </div>
+      </div>
+      <helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
+              [texts]="pageContents['bottom']"></helper>
+    </div>
+  </div>
+</div>
+<div class="uk-inline">
+  <button *ngIf="!longView" [class]=" ((buttonSizeSmall)?'uk-button-small':'') + ' uk-button  uk-button-primary'">
+    Invite users
+  </button>
+  <div uk-dropdown="mode: click" class="uk-form uk-margin-small uk-alert uk-background-default" id="toggle-usage">
+    <div class="uk-margin-top">
+      <errorMessages [status]="[status]" [type]="'community'"></errorMessages>
+    </div>
+    <div *ngIf="missingCommunityId" class="uk-width-large uk-text-warning uk-text-small uk-margin-top"
+         role="alert">{{missingCommunityId}}</div>
+    <div *ngIf="successfulSentMessage" class="uk-width-large uk-text-success uk-text-small uk-margin-top"
+         role="alert">{{successfulSentMessage}} {{successfulSentRecipients}}</div>
+    <div *ngIf="failureSentMessage" class="uk-width-large uk-text-warning uk-text-small uk-margin-top"
+         role="alert">{{failureSentMessage}} {{failureSentRecipients}}</div>
+    <div *ngIf="inviteErrorMessage" class="uk-width-large uk-text-warning uk-text-small uk-margin-top"
+         role="alert">{{inviteErrorMessage}}</div>
+
+    <div *ngIf="recipients && !areValid" class="uk-width-large uk-text-danger uk-text-small uk-margin-top">Please add
+      valid email/s.
+    </div>
+    <div *ngIf="isEmpty(recipients) && showAddRecipientMessage"
+         class="uk-width-large uk-text-danger uk-text-small uk-margin-top">Please add a recipient.
+    </div>
+    <input (click)="resetMessages(); areValid=true" placeholder="Type e-mails" type="text"
+           class="form-control uk-input uk-form-small uk-form" [(ngModel)]="recipients" id="recipients"
+           required>
+    <div class="uk-width-medium uk-text-muted uk-text-small">separate with commas</div>
+    <div class="uk-margin-small-top uk-text-center ">
+      <button class=" uk-button portal-button ignoreCommunityPanelBackground uk-button-small " (click)="invite()">Invite</button>
+      {{" "}}
+      <a class=" uk-button uk-button-default uk-button-small ignoreCommunityPanelBackground " [queryParams]="communityIdParam"
+         routerLinkActive="router-link-active" routerLink="/invite">
+                        <span class="uk-margin-xsmall-left uk-icon">
+                            <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="cog"
+                                 ratio="0.8"><circle fill="none" stroke="#000" cx="9.997" cy="10" r="3.31"></circle><path
+                              fill="none" stroke="#000"
+                              d="M18.488,12.285 L16.205,16.237 C15.322,15.496 14.185,15.281 13.303,15.791 C12.428,16.289 12.047,17.373 12.246,18.5 L7.735,18.5 C7.938,17.374 7.553,16.299 6.684,15.791 C5.801,15.27 4.655,15.492 3.773,16.237 L1.5,12.285 C2.573,11.871 3.317,10.999 3.317,9.991 C3.305,8.98 2.573,8.121 1.5,7.716 L3.765,3.784 C4.645,4.516 5.794,4.738 6.687,4.232 C7.555,3.722 7.939,2.637 7.735,1.5 L12.263,1.5 C12.072,2.637 12.441,3.71 13.314,4.22 C14.206,4.73 15.343,4.516 16.225,3.794 L18.487,7.714 C17.404,8.117 16.661,8.988 16.67,10.009 C16.672,11.018 17.415,11.88 18.488,12.285 L18.488,12.285 Z"></path></svg>
+
+                          </span>
+        Customize
+      </a>
+    </div>
+  </div>
+</div>
diff --git a/src/app/utils/subscribe/invite/invite.component.ts b/src/app/utils/subscribe/invite/invite.component.ts
new file mode 100644
index 0000000..8136352
--- /dev/null
+++ b/src/app/utils/subscribe/invite/invite.component.ts
@@ -0,0 +1,315 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {FormBuilder} from "@angular/forms";
+import {ActivatedRoute, Router} from '@angular/router';
+
+import {ConnectHelper} from '../../../openaireLibrary/connect/connectHelper';
+
+import {Email} from '../../../openaireLibrary/utils/email/email';
+import {Body} from '../../../openaireLibrary/utils/email/body';
+import {Validator} from '../../../openaireLibrary/utils/email/validator';
+import {Composer} from '../../../openaireLibrary/utils/email/composer';
+
+import {EnvProperties} from '../../../openaireLibrary/utils/properties/env-properties';
+import {EmailService} from '../../../openaireLibrary/utils/email/email.service';
+import {CommunityService} from "../../../openaireLibrary/connect/community/community.service";
+import {ErrorCodes} from '../../../openaireLibrary/utils/properties/errorCodes';
+import {ErrorMessagesComponent} from '../../../openaireLibrary/utils/errorMessages.component';
+import {Session, User} from '../../../openaireLibrary/login/utils/helper.class';
+import {HelperFunctions} from "../../../openaireLibrary/utils/HelperFunctions.class";
+import {HelperService} from "../../../openaireLibrary/utils/helper/helper.service";
+import {Meta, Title} from "@angular/platform-browser";
+import {SEOService} from "../../../openaireLibrary/sharedComponents/SEO/SEO.service";
+import {PiwikService} from "../../../openaireLibrary/utils/piwik/piwik.service";
+import {PiwikHelper} from "../../piwikHelper";
+import {UserManagementService} from "../../../openaireLibrary/services/user-management.service";
+
+@Component({
+  selector: 'invite',
+  templateUrl: './invite.component.html',
+})
+
+export class InviteComponent implements OnInit {
+
+  @Input() longView: boolean = true;
+  @Input() communityId = null;
+  @Input() buttonSizeSmall = true;
+
+  private properties: EnvProperties = null;
+
+  public community = null;
+  //public showLoading: boolean = true;
+  public errorMessage: string = '';
+  public successfulSentMessage: string = '';
+  public successfulSentRecipients: string[] = [];
+  public failureSentMessage: string = '';
+  public failureSentRecipients: string[] = [];
+  public inviteErrorMessage: string = '';
+  public missingCommunityId: string = '';
+  public showAddRecipientMessage: boolean = false;
+  public showAddNameMessage: boolean = false;
+
+  public email: Email;
+  public body: Body;
+  public recipients: string;
+  public fullname: string;
+
+  public areValid: boolean = true;
+
+  private ckeditorContent: string;
+
+  // public defaultBody ='';
+
+  public communityIdParam = {};
+  public status: number = 1;
+  public errorCodes: ErrorCodes;
+  private errorMessages: ErrorMessagesComponent;
+  public pageContents = null;
+  public divContents = null;
+
+  public url: string = null;
+  public pageTitle: string = "Invite";
+  piwiksub: any;
+  private user: User;
+
+  constructor(
+    private route: ActivatedRoute,
+    private _router: Router,
+    public _fb: FormBuilder,
+    private _emailService: EmailService,
+    private _communityService: CommunityService,
+    private helper: HelperService,
+    private _meta: Meta,
+    private _title: Title,
+    private seoService: SEOService,
+    private _piwikService: PiwikService,
+    private userManageService: UserManagementService) {
+
+    this.errorCodes = new ErrorCodes();
+    this.errorMessages = new ErrorMessagesComponent();
+    this.status = this.errorCodes.LOADING;
+  }
+
+  public ngOnInit() {
+    this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {
+      this.properties = data.envSpecific;
+      this.errorMessage = "";
+      this.missingCommunityId = "";
+      this.status = this.errorCodes.LOADING;
+      this.userManageService.getUserInfo(this.properties.userInfoUrl).subscribe(user => {
+        this.user = user;
+        this.route.queryParams.subscribe(
+          communityId => {
+            //if(!this.communityId && typeof document !== 'undefined'){
+            this.communityId = ConnectHelper.getCommunityFromDomain(this.properties.domain);
+            if (!this.communityId) {
+              this.communityId = communityId['communityId'];
+            }
+
+            if (this.longView) {
+              if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
+                this.piwiksub = this._piwikService.trackView(this.properties, this.pageTitle, PiwikHelper.getSiteId(this.communityId, this.properties.environment)).subscribe();
+              }
+              this.url = this.properties.baseLink + this._router.url;
+              this.seoService.createLinkForCanonicalURL(this.url);
+              this.updateUrl(this.url);
+              this.updateTitle(this.pageTitle);
+              this.updateDescription("OpenAIRE - Connect, Community Gateway, research community, invite");
+            }
+            this.communityIdParam = (this.properties.environment != "development") ? {} : {communityId: this.communityId};
+            if (this.communityId != null && this.communityId != '') {
+              //this.getDivContents();
+              this.getPageContents();
+              this._communityService.getCommunity(this.properties, this.properties.communityAPI + this.communityId).subscribe(
+                community => {
+                  this.community = community;
+                  this.fullname = this.user.fullname;
+                  //console.log("Fullname from session " + Session.getUserFullName());
+
+                  this.body = Composer.initializeInvitationsBody(this.communityId, this.community.title, this.fullname);
+                  this.email = Composer.initializeInvitationsEmail(community.title);
+                  this.recipients = "";
+
+                  this.status = this.errorCodes.DONE;
+                },
+                error => {
+                  //this.handleError(error)
+                  this.handleError("Error getting community with id: " + this.communityId, error);
+                  this.status = this.errorMessages.getErrorCode(error.status);
+                }
+              );
+            } else {
+              this.status = this.errorCodes.DONE;
+              this.missingCommunityId = "There is no community selected!";
+            }
+
+          });
+
+        HelperFunctions.scroll();
+      });
+    });
+  }
+
+  ngOnDestroy() {
+    if (this.piwiksub) {
+      this.piwiksub.unsubscribe();
+    }
+  }
+
+  private getPageContents() {
+    this.helper.getPageHelpContents(this._router.url, this.properties, this.communityId).subscribe(contents => {
+      this.pageContents = contents;
+    })
+  }
+
+  private getDivContents() {
+    this.helper.getDivHelpContents(this._router.url, this.properties, this.communityId).subscribe(contents => {
+      this.divContents = contents;
+    })
+  }
+
+
+  public invite() {
+    this.successfulSentMessage = "";
+    this.failureSentMessage = "";
+    this.inviteErrorMessage = "";
+    this.status = this.errorCodes.LOADING;
+    HelperFunctions.scroll();
+    if (!this.isEmpty(this.recipients) && this.body.fromName != "") {
+      if (this.validateEmails()) {
+        this.composeEmail();
+
+        this._emailService.sendEmail(this.properties.adminToolsAPIURL + "/sendMail/", this.email).subscribe(
+          res => {
+            this.status = this.errorCodes.DONE;
+            //console.log("Emails Sent: ",res);
+            /*if(res == 0) {
+
+            } else if(res > 1) {
+              this.successfulSentMessage = res + " emails sent successfully!";
+            } else {
+              this.successfulSentMessage = res + " email sent successfully!";
+            }*/
+
+            if (res['success']) {
+              this.successfulSentMessage = "Email sent successfully to: ";
+              this.successfulSentRecipients = res['success'];
+            }
+            if (res['failure']) {
+              this.failureSentMessage = "There was an error sending email to: ";
+              this.failureSentRecipients = res['failure'];
+            }
+
+            this.body = Composer.initializeInvitationsBody(this.communityId, this.community.title, this.fullname);
+            this.email = Composer.initializeInvitationsEmail(this.community.title);
+            this.recipients = "";
+          },
+          error => {
+            //console.log(error);
+            this.handleError("Error inviting emails: " + JSON.stringify(this.recipients) + " to community with id: " + this.communityId + " by: " + this.fullname, error);
+            this.status = this.errorCodes.DONE;
+            this.inviteErrorMessage = "There was an error sending emails. Please try again.";
+          }
+        );
+      } else {
+        this.email.recipients = [];
+        this.status = this.errorCodes.DONE;
+      }
+    } else {
+      this.showAddRecipientMessage = true;
+      this.status = this.errorCodes.DONE;
+    }
+  }
+
+  public isEmpty(data: string): boolean {
+    if (data != undefined && !data.replace(/\s/g, '').length)
+      return true;
+    else
+      return false;
+  }
+
+  public resetMessages() {
+    this.errorMessage = "";
+    this.successfulSentMessage = "";
+    this.failureSentMessage = "";
+    this.inviteErrorMessage = "";
+  }
+
+  public validateEmails(): boolean {
+    if (this.parseEmails()) {
+      if (Validator.hasValidEmails(this.email.recipients)) {
+        return this.areValid;
+      }
+    }
+    this.areValid = false;
+    return this.areValid;
+  }
+
+  public parseEmails(): boolean {
+    let email = new Array<string>();
+
+    // remove spaces
+    this.recipients = this.recipients.replace(/\s/g, '');
+
+    // remove commas
+    email = this.recipients.split(",");
+
+    // remove empty fields
+    for (let i = 0; i < email.length; i++) {
+      if (!(email[i] == "")) {
+        this.email.recipients.push(email[i]);
+      }
+    }
+    return true;
+  }
+
+  public composeEmail() {
+    this.email.body = Composer.formatEmailBodyForInvitation(this.body);
+  }
+
+  /*
+    public handleError(error) {
+      if(error.status == '401') {
+        this.status = this.errorCodes.FORBIDDEN;
+      } else if(error.status == '403') {
+        this.status = this.errorCodes.FORBIDDEN;
+      } else if(error.status == '404') {
+        this.status = this.errorCodes.NOT_FOUND;
+      } else if(error.status == '500') {
+        this.status = this.errorCodes.ERROR;
+      } else {
+        this.status = this.errorCodes.NOT_AVAILABLE;
+      }
+        console.log('Server responded: ' + error);
+    }
+  */
+  allowEdit() {
+    if (!this.user) {
+      return false;
+    }
+    var email = this.user.email;
+    var index = -1;
+    if (email && this.community != null && this.community.managers != null) {
+      index = this.community.managers.indexOf(email);
+    }
+    return Session.isPortalAdministrator(this.user) || Session.isCommunityCurator(this.user) || index != -1;
+  }
+
+  private handleError(message: string, error) {
+    console.error("Invite Page (or component): " + message, error);
+  }
+
+  private updateDescription(description: string) {
+    this._meta.updateTag({content: description}, "name='description'");
+    this._meta.updateTag({content: description}, "property='og:description'");
+  }
+
+  private updateTitle(title: string) {
+    var _title = ((title.length > 50) ? title.substring(0, 50) : title);
+    this._title.setTitle(_title);
+    this._meta.updateTag({content: _title}, "property='og:title'");
+  }
+
+  private updateUrl(url: string) {
+    this._meta.updateTag({content: url}, "property='og:url'");
+  }
+}
diff --git a/src/app/utils/subscribe/invite/invite.module.ts b/src/app/utils/subscribe/invite/invite.module.ts
new file mode 100644
index 0000000..e0fcbda
--- /dev/null
+++ b/src/app/utils/subscribe/invite/invite.module.ts
@@ -0,0 +1,40 @@
+import {NgModule}                   from '@angular/core';
+import {CommonModule}               from '@angular/common';
+import {FormsModule}                from '@angular/forms';
+import {RouterModule}               from '@angular/router';
+import {CKEditorModule}             from 'ng2-ckeditor';
+
+import {InviteComponent}            from './invite.component';
+import {InviteRoutingModule}        from './invite-routing.module';
+
+import {PreviousRouteRecorder}      from '../../../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
+
+import {LoginGuard} from '../../../openaireLibrary/login/loginGuard.guard';
+import {EmailService}               from '../../../openaireLibrary/utils/email/email.service';
+import {CommunityService}           from '../../../openaireLibrary/connect/community/community.service';
+import {ErrorMessagesModule}        from '../../../openaireLibrary/utils/errorMessages.module';
+import {IsRouteEnabled} from "../../../openaireLibrary/error/isRouteEnabled.guard";
+import {HelperModule} from "../../../openaireLibrary/utils/helper/helper.module";
+import {Schema2jsonldModule} from "../../../openaireLibrary/sharedComponents/schema2jsonld/schema2jsonld.module";
+import {SEOServiceModule} from "../../../openaireLibrary/sharedComponents/SEO/SEOService.module";
+import {PiwikService} from "../../../openaireLibrary/utils/piwik/piwik.service";
+
+@NgModule({
+  imports: [
+    CommonModule, FormsModule, RouterModule, InviteRoutingModule, CKEditorModule, ErrorMessagesModule,
+    HelperModule, Schema2jsonldModule, SEOServiceModule
+  ],
+  declarations: [
+    InviteComponent
+  ],
+  providers: [
+    LoginGuard, PreviousRouteRecorder,
+    EmailService, CommunityService, IsRouteEnabled,
+    PiwikService
+  ],
+  exports: [
+    InviteComponent
+  ]
+})
+
+export class InviteModule { }
diff --git a/src/app/utils/subscribe/subscribe.component.ts b/src/app/utils/subscribe/subscribe.component.ts
index 9b2eeed..aa10a26 100644
--- a/src/app/utils/subscribe/subscribe.component.ts
+++ b/src/app/utils/subscribe/subscribe.component.ts
@@ -1,119 +1,241 @@
-import { Component, Input, ViewChild } from '@angular/core';
-import { Location } from '@angular/common';
-import {ActivatedRoute} from '@angular/router';
-import { EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';
+import {Component, EventEmitter, Input, Output, ViewChild} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';
 import {AlertModal} from '../../openaireLibrary/utils/modal/alert';
 
+import {CommunityService} from '../../openaireLibrary/connect/community/community.service';
 import {SubscribeService} from '../../openaireLibrary/utils/subscribe/subscribe.service';
-import {Session} from '../../openaireLibrary/login/utils/helper.class';
-@Component({
-    selector: 'subscribe',
-    template: `
+import {EmailService} from "../../openaireLibrary/utils/email/email.service";
+import {Session, User} from '../../openaireLibrary/login/utils/helper.class';
 
-    <span *ngIf="subscribed != null && !showNumbers">
-      <div *ngIf="!subscribed && showLoginAlert" class="uk-alert-warning uk-animation-slide-bottom" uk-alert=""  >
+import {Email} from "../../openaireLibrary/utils/email/email";
+import {Composer} from "../../openaireLibrary/utils/email/composer";
+import {LoginErrorCodes} from '../../openaireLibrary/login/utils/guardHelper.class';
+import {UserManagementService} from "../../openaireLibrary/services/user-management.service";
+
+declare var UIkit: any;
+
+@Component({
+  selector: 'subscribe',
+  template: `
+
+    <span *ngIf="subscribed != null && !showNumbers && showTemplate">
+      <div *ngIf="!subscribed && showLoginAlert" class="uk-alert-warning uk-animation-slide-bottom" uk-alert="">
       <a class="uk-alert-close" uk-close></a>
       <p>Please login first to subscribe</p>
       </div>
-      <a *ngIf="!subscribed" class="uk-button uk-button-primary" (click)="subscribe()"> Subscribe</a>
-      <a *ngIf="subscribed" class="uk-button uk-button-danger" (click)="confirmOpen()"> Unsubscribe</a>
+      <button *ngIf="!subscribed" [class]="'uk-button uk-button-primary' + (loading ? ' uk-disabled' : '')"
+              (click)="subscribe()"> Subscribe</button>
+      <button *ngIf="subscribed" [class]="'uk-button uk-button-primary' + (loading ? ' uk-disabled' : '')"
+              (click)="confirmOpen()"> Unsubscribe</button>
     </span>
 
-    <span *ngIf="showNumbers && subscribers !=null && subscribers > 0" >
-        Members: {{subscribers}}
+    <span *ngIf="showNumbers && subscribers !=null && subscribers > 0  && showTemplate">
+      <span class="lowOpacityColor">  Members</span> {{subscribers}}
     </span>
     <modal-alert (alertOutput)="confirmClose($event)">
     </modal-alert>
-    `
+  `
 })
 
 export class SubscribeComponent {
   // @Input() showSubscribe:boolean = true;
-  @Input() showNumbers:boolean;
-  @Input() communityId:string;
+  @Input() showNumbers: boolean;
+  @Input() communityId: string;
+  @Input() showTemplate: boolean = true;
+  @Output() subscribeEvent = new EventEmitter();
 
+  public community = null;
+  public emailToInformManagers: Email;
 
-  subscribed:boolean = null;
-  properties:EnvProperties;
-  subscribers:number= null;
-  showLoginAlert:Boolean = false;
+  loading: boolean = false;
+  subscribed: boolean = null;
+  properties: EnvProperties;
+  subscribers: number = null;
+  showLoginAlert: Boolean = false;
   @ViewChild(AlertModal) alert;
-  constructor (private route: ActivatedRoute,
-      private _subscribeService: SubscribeService
-    ) {
-    }
+  private user: User;
 
-    public ngOnInit() {
-      this.route.data
-          .subscribe((data: { envSpecific: EnvProperties }) => {
-             this.properties = data.envSpecific;
-             if(!this.showNumbers){
-               var email = Session.getUserEmail();
-               if(email == null){
-                 this.subscribed = false;
-               }else{
-                 this._subscribeService.isSubscribedToCommunity(this.communityId, email,this.properties.adminToolsAPIURL).subscribe (
-                   res => {
-                     this.subscribed = res;
-                   });
-               }
-             }else{
-               this._subscribeService.getCommunitySubscribers(this.communityId, this.properties.adminToolsAPIURL).subscribe (
-                 res => {
+  constructor(private route: ActivatedRoute,
+              private _subscribeService: SubscribeService,
+              private _emailService: EmailService,
+              private _communityService: CommunityService,
+              private router: Router,
+              private userManagementService: UserManagementService
+  ) {
+  }
 
-                    this.subscribers = (res && res.subscribers && res.subscribers.length )?res.subscribers.length:0;
+  public ngOnInit() {
+    this.route.data
+      .subscribe((data: { envSpecific: EnvProperties }) => {
+        this.properties = data.envSpecific;
+        this.userManagementService.getUserInfo(this.properties.userInfoUrl).subscribe( user => {
+          this.user = user;
+          if (!this.showNumbers) {
+            let email = (this.user)?this.user.email:null;
+            if (email == null) {
+              this.subscribed = false;
+            } else {
+              if (this.communityId) {
+                this._subscribeService.isSubscribedToCommunity(this.properties, this.communityId, email).subscribe(
+                  res => {
+                    this.subscribed = res;
+                    if (this.subscribed) {
+                      this.subscribeEvent.emit({
+                        value: "ok"
+                      });
+                    }
+                  },
+                  error => {
+                    this.handleError("Error getting response if email: " + email + " is subscribed to community with id: " + this.communityId, error);
+                  });
+              }
+            }
+          } else {
+            if (this.communityId) {
+              this._subscribeService.getCommunitySubscribers(this.properties, this.communityId).subscribe(
+                res => {
+                  this.subscribers = (res && res.subscribers && res.subscribers.length) ? res.subscribers.length : 0;
+                },
+                error => {
+                  this.handleError("Error getting community subscribers for community with id: " + this.communityId, error);
+                });
+            }
+          }
+          if (this.communityId) {
+            this.emailToInformManagers = {body: "", subject: "", recipients: []};
 
-                 });
-             }
-           });
+            this._communityService.getCommunity(this.properties, this.properties.communityAPI + this.communityId).subscribe(
+              community => {
+                this.community = community;
+              },
+              error => {
+                //console.log('System error retrieving community profile', error)
+                this.handleError("Error getting community with id: " + this.communityId, error);
+              }
+            );
+          }
+        });
+      });
+  }
 
-
-    }
-
-    subscribe(){
-      var email = Session.getUserEmail();
-      if(email == null){
-        this.subscribed = false;
-         this.showLoginAlert = true;
-      }else{
-        this.showLoginAlert = false;
-        this._subscribeService.subscribeToCommunity(this.communityId, email, this.properties.adminToolsAPIURL).subscribe (
-          res => {
-             console.log(res);
-             if(!this.subscribed){
-               this.subscribed = true;
-             }
+  subscribe() {
+    var email = (this.user)?this.user.email:null;
+    if (email == null) {
+      this.subscribed = false;
+      // this.showLoginAlert = true;
+      this.router.navigate(['/user-info'], {
+        queryParams: {
+          "errorCode": LoginErrorCodes.ACTION_REQUIRES_LOGIN,
+          "redirectUrl": this.router.url
+        }
+      });
+    } else {
+      this.loading = true;
+      this.showLoginAlert = false;
+      this._subscribeService.subscribeToCommunity(this.communityId, email, this.properties.adminToolsAPIURL).subscribe(
+        res => {
+          this.loading = false;
+          if (res.status && res.status != 200) {
+            this.subscribeEvent.emit({
+              value: "error"
+            });
+            UIkit.notification({
+              message: '<strong>An error occured. Please try again!<strong>',
+              status: 'warning',
+              timeout: 3000,
+              pos: 'top-center'
+            });
+          } else {
+            if (!this.subscribed) {
+              this.subscribed = true;
+              this.subscribeEvent.emit({
+                value: "ok"
+              });
+              this._emailService.sendEmail(this.properties.adminToolsAPIURL + "/notifyForNewSubscribers/" + this.communityId, Composer.composeEmailToInformManagers(this.community.title, this.communityId, this.community.managers, email)).subscribe(
+                res => {
+                  //console.log("The email has been sent successfully!")
+                },
+                error => {
+                  //console.log(error)
+                  this.handleError("Error notifying managers about new subscribers for community with id: " + this.communityId, error);
+                }
+              );
+            }
+          }
+        },
+        error => {
+          this.loading = false;
+          this.subscribeEvent.emit({
+            value: "error"
           });
-      }
-    }
-
-    unsubscribe(){
-      var email = Session.getUserEmail();
-      if(email == null){
-        this.subscribed = false;
-      }else{
-        //this.properties.adminToolsAPIURL
-        this._subscribeService.unSubscribeToCommunity(this.communityId, email,this.properties.adminToolsAPIURL).subscribe (
-          res => {
-             console.log(res);
-             if(this.subscribed){
-               this.subscribed = false;
-             }
+          UIkit.notification({
+            message: '<strong>An error occured. Please try again!<strong>',
+            status: 'warning',
+            timeout: 3000,
+            pos: 'top-center'
           });
-      }
+          //console.log(error)
+          this.handleError("Error subscribing email: " + email + " to community with id: " + this.communityId, error);
+        });
     }
+  }
 
-    confirmOpen(){
+  unsubscribe() {
+    var email = (this.user)?this.user.email:null;
+    if (email == null) {
+      this.subscribed = false;
+    } else {
+      this.loading = true;
+      //this.properties.adminToolsAPIURL
+      this._subscribeService.unSubscribeToCommunity(this.communityId, email, this.properties.adminToolsAPIURL).subscribe(
+        res => {
+          this.loading = false;
+          if (res.status && res.status != 200) {
+            UIkit.notification({
+              message: '<strong>An error occured. Please try again!<strong>',
+              status: 'warning',
+              timeout: 3000,
+              pos: 'top-center'
+            });
+          } else {
+            //console.log(res);
+            if (this.subscribed) {
+              console.log('here')
+              this.subscribed = false;
+            }
+          }
+        },
+        error => {
+          this.loading = false;
+          UIkit.notification({
+            message: '<strong>An error occured. Please try again!<strong>',
+            status: 'warning',
+            timeout: 3000,
+            pos: 'top-center'
+          });
+          //console.log(error)
+          this.handleError("Error unsubscribing email: " + email + " from community with id: " + this.communityId, error);
+        });
+    }
+  }
 
-        this.alert.cancelButton = true;
-        this.alert.okButton = true;
-        this.alert.alertTitle = "Unsubscribe community ";
-        this.alert.message = "Do you want to proceed? ";
-        this.alert.okButtonText = "Yes";
-        this.alert.cancelButtonText = "No";
-        this.alert.open();
-      }
-      confirmClose(data){
-       this.unsubscribe();
-     }
+  confirmOpen() {
+
+    this.alert.cancelButton = true;
+    this.alert.okButton = true;
+    this.alert.alertTitle = "Unsubscribe community ";
+    this.alert.message = "Do you want to proceed? ";
+    this.alert.okButtonText = "Yes";
+    this.alert.cancelButtonText = "No";
+    this.alert.open();
+  }
+
+  confirmClose(data) {
+    this.unsubscribe();
+  }
+
+  private handleError(message: string, error) {
+    console.error("Subscribe (component): " + message, error);
+  }
 }
diff --git a/src/app/utils/subscribe/subscribe.module.ts b/src/app/utils/subscribe/subscribe.module.ts
index e54ca08..ea9d6e9 100644
--- a/src/app/utils/subscribe/subscribe.module.ts
+++ b/src/app/utils/subscribe/subscribe.module.ts
@@ -1,23 +1,32 @@
-import { NgModule}            from '@angular/core';
-import { CommonModule }        from '@angular/common';
-import { RouterModule } from '@angular/router';
+import {ModuleWithProviders, NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {RouterModule} from '@angular/router';
 
-import { SubscribeService } from '../../openaireLibrary/utils/subscribe/subscribe.service';
+import {SubscribeService} from '../../openaireLibrary/utils/subscribe/subscribe.service';
+import {CommunityService} from "../../openaireLibrary/connect/community/community.service";
+
+import {EmailService} from "../../openaireLibrary/utils/email/email.service";
 import {SubscribeComponent} from './subscribe.component';
 import {AlertModalModule} from '../../openaireLibrary/utils/modal/alertModal.module';
 
 @NgModule({
   imports: [
-    CommonModule,   RouterModule, AlertModalModule
+    CommonModule, RouterModule, AlertModalModule
   ],
   declarations: [
     SubscribeComponent
-   ],
-  providers:[
-    SubscribeService
-    ],
+  ],
   exports: [
     SubscribeComponent
-     ]
+  ]
 })
-export class SubscribeModule { }
+export class SubscribeModule {
+  static forRoot(): ModuleWithProviders {
+    return {
+      ngModule: SubscribeModule,
+      providers: [
+        SubscribeService, EmailService, CommunityService
+      ]
+    }
+  }
+}
diff --git a/src/assets/Connect animations.gif b/src/assets/Connect animations.gif
new file mode 100644
index 0000000..d16d015
Binary files /dev/null and b/src/assets/Connect animations.gif differ
diff --git a/src/assets/admin-portal.png b/src/assets/admin-portal.png
new file mode 100644
index 0000000..67363a3
Binary files /dev/null and b/src/assets/admin-portal.png differ
diff --git a/src/assets/ask-connect.svg b/src/assets/ask-connect.svg
new file mode 100644
index 0000000..1d980cb
--- /dev/null
+++ b/src/assets/ask-connect.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60.152 60.152"><defs><style>.a{fill:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-width:3px;}.a,.b,.c{stroke:#ebb13e;}.b{fill:#37c7e9;}.b,.c{stroke-width:2px;}.c{fill:#d95f2d;}</style></defs><g transform="translate(1.5 1.5)"><path class="a" d="M1030.976,1914.9a28.576,28.576,0,1,1-28.576,28.576A28.563,28.563,0,0,1,1030.976,1914.9Z" transform="translate(-1002.4 -1914.9)"/><path class="b" d="M1032.218,975.9a9.126,9.126,0,0,0-9.118,9.118.707.707,0,0,0,1.41.094h0a7.708,7.708,0,1,1,15.416,0,8.607,8.607,0,0,1-2.726,6.11,49.571,49.571,0,0,1-5.452,4.512.67.67,0,0,0-.282.564v5.546a.707.707,0,1,0,1.41.094h0v-5.264a45.228,45.228,0,0,0,5.264-4.418,10.238,10.238,0,0,0,3.1-7.05A8.976,8.976,0,0,0,1032.218,975.9Z" transform="translate(-1003.642 -964.374)"/><circle class="c" cx="1.41" cy="1.41" r="1.41" transform="translate(27.166 42.922)"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/community-first-page.jpg b/src/assets/community-first-page.jpg
new file mode 100644
index 0000000..c2bb98d
Binary files /dev/null and b/src/assets/community-first-page.jpg differ
diff --git a/src/assets/connect-assets/OpenAIRE-RCD_howtos.png b/src/assets/connect-assets/OpenAIRE-RCD_howtos.png
new file mode 100644
index 0000000..86db889
Binary files /dev/null and b/src/assets/connect-assets/OpenAIRE-RCD_howtos.png differ
diff --git a/src/assets/connect-assets/about/1.png b/src/assets/connect-assets/about/1.png
new file mode 100644
index 0000000..f49a97a
Binary files /dev/null and b/src/assets/connect-assets/about/1.png differ
diff --git a/src/assets/connect-assets/about/2.png b/src/assets/connect-assets/about/2.png
new file mode 100644
index 0000000..6ede349
Binary files /dev/null and b/src/assets/connect-assets/about/2.png differ
diff --git a/src/assets/connect-assets/about/3.png b/src/assets/connect-assets/about/3.png
new file mode 100644
index 0000000..677f3c4
Binary files /dev/null and b/src/assets/connect-assets/about/3.png differ
diff --git a/src/assets/connect-assets/about/4.png b/src/assets/connect-assets/about/4.png
new file mode 100644
index 0000000..18ec9d1
Binary files /dev/null and b/src/assets/connect-assets/about/4.png differ
diff --git a/src/assets/connect-assets/about/background.png b/src/assets/connect-assets/about/background.png
new file mode 100644
index 0000000..54752ae
Binary files /dev/null and b/src/assets/connect-assets/about/background.png differ
diff --git a/src/assets/connect-assets/about/cycle.png b/src/assets/connect-assets/about/cycle.png
new file mode 100644
index 0000000..89b726c
Binary files /dev/null and b/src/assets/connect-assets/about/cycle.png differ
diff --git a/src/assets/connect-assets/about/gifs/content.gif b/src/assets/connect-assets/about/gifs/content.gif
new file mode 100644
index 0000000..2417a11
Binary files /dev/null and b/src/assets/connect-assets/about/gifs/content.gif differ
diff --git a/src/assets/connect-assets/about/gifs/help.gif b/src/assets/connect-assets/about/gifs/help.gif
new file mode 100644
index 0000000..f7d35ff
Binary files /dev/null and b/src/assets/connect-assets/about/gifs/help.gif differ
diff --git a/src/assets/connect-assets/about/gifs/links.gif b/src/assets/connect-assets/about/gifs/links.gif
new file mode 100644
index 0000000..3dcc2b5
Binary files /dev/null and b/src/assets/connect-assets/about/gifs/links.gif differ
diff --git a/src/assets/connect-assets/about/gifs/profile.gif b/src/assets/connect-assets/about/gifs/profile.gif
new file mode 100644
index 0000000..d7d043c
Binary files /dev/null and b/src/assets/connect-assets/about/gifs/profile.gif differ
diff --git a/src/assets/connect-assets/about/gifs/statistics.gif b/src/assets/connect-assets/about/gifs/statistics.gif
new file mode 100644
index 0000000..2ef8d45
Binary files /dev/null and b/src/assets/connect-assets/about/gifs/statistics.gif differ
diff --git a/src/assets/connect-assets/about/gifs/users.gif b/src/assets/connect-assets/about/gifs/users.gif
new file mode 100644
index 0000000..abd9f73
Binary files /dev/null and b/src/assets/connect-assets/about/gifs/users.gif differ
diff --git a/src/assets/connect-assets/banner/background.png b/src/assets/connect-assets/banner/background.png
new file mode 100644
index 0000000..1434a44
Binary files /dev/null and b/src/assets/connect-assets/banner/background.png differ
diff --git a/src/assets/connect-assets/banner/login.png b/src/assets/connect-assets/banner/login.png
new file mode 100644
index 0000000..81df821
Binary files /dev/null and b/src/assets/connect-assets/banner/login.png differ
diff --git a/src/assets/connect-assets/banner/search.png b/src/assets/connect-assets/banner/search.png
new file mode 100644
index 0000000..b134f6a
Binary files /dev/null and b/src/assets/connect-assets/banner/search.png differ
diff --git a/src/assets/connect-assets/banner/together.png b/src/assets/connect-assets/banner/together.png
new file mode 100644
index 0000000..31b792a
Binary files /dev/null and b/src/assets/connect-assets/banner/together.png differ
diff --git a/src/assets/connect-assets/cloud/abstract.png b/src/assets/connect-assets/cloud/abstract.png
new file mode 100644
index 0000000..23a9a95
Binary files /dev/null and b/src/assets/connect-assets/cloud/abstract.png differ
diff --git a/src/assets/connect-assets/cloud/background.png b/src/assets/connect-assets/cloud/background.png
new file mode 100644
index 0000000..a349571
Binary files /dev/null and b/src/assets/connect-assets/cloud/background.png differ
diff --git a/src/assets/connect-assets/contact/1.png b/src/assets/connect-assets/contact/1.png
new file mode 100644
index 0000000..6f07200
Binary files /dev/null and b/src/assets/connect-assets/contact/1.png differ
diff --git a/src/assets/connect-assets/contact/2.png b/src/assets/connect-assets/contact/2.png
new file mode 100644
index 0000000..acb52d0
Binary files /dev/null and b/src/assets/connect-assets/contact/2.png differ
diff --git a/src/assets/connect-assets/contact/3.png b/src/assets/connect-assets/contact/3.png
new file mode 100644
index 0000000..80463a6
Binary files /dev/null and b/src/assets/connect-assets/contact/3.png differ
diff --git a/src/assets/connect-assets/contact/background.png b/src/assets/connect-assets/contact/background.png
new file mode 100644
index 0000000..8ed6785
Binary files /dev/null and b/src/assets/connect-assets/contact/background.png differ
diff --git a/src/assets/connect-assets/home/1.png b/src/assets/connect-assets/home/1.png
new file mode 100644
index 0000000..a758bb9
Binary files /dev/null and b/src/assets/connect-assets/home/1.png differ
diff --git a/src/assets/connect-assets/home/2.png b/src/assets/connect-assets/home/2.png
new file mode 100644
index 0000000..58c9134
Binary files /dev/null and b/src/assets/connect-assets/home/2.png differ
diff --git a/src/assets/connect-assets/home/3.png b/src/assets/connect-assets/home/3.png
new file mode 100644
index 0000000..2f956c9
Binary files /dev/null and b/src/assets/connect-assets/home/3.png differ
diff --git a/src/assets/connect-assets/home/background.png b/src/assets/connect-assets/home/background.png
new file mode 100644
index 0000000..4878c48
Binary files /dev/null and b/src/assets/connect-assets/home/background.png differ
diff --git a/src/assets/connect-assets/home/banner.jpg b/src/assets/connect-assets/home/banner.jpg
new file mode 100644
index 0000000..feeba62
Binary files /dev/null and b/src/assets/connect-assets/home/banner.jpg differ
diff --git a/src/assets/connect-assets/home/gifs/deposit.gif b/src/assets/connect-assets/home/gifs/deposit.gif
new file mode 100644
index 0000000..2b15881
Binary files /dev/null and b/src/assets/connect-assets/home/gifs/deposit.gif differ
diff --git a/src/assets/connect-assets/home/gifs/graph-analysis.gif b/src/assets/connect-assets/home/gifs/graph-analysis.gif
new file mode 100644
index 0000000..54a8511
Binary files /dev/null and b/src/assets/connect-assets/home/gifs/graph-analysis.gif differ
diff --git a/src/assets/connect-assets/home/gifs/link.gif b/src/assets/connect-assets/home/gifs/link.gif
new file mode 100644
index 0000000..f73b4e3
Binary files /dev/null and b/src/assets/connect-assets/home/gifs/link.gif differ
diff --git a/src/assets/connect-assets/home/gifs/overview.gif b/src/assets/connect-assets/home/gifs/overview.gif
new file mode 100644
index 0000000..0dc15f1
Binary files /dev/null and b/src/assets/connect-assets/home/gifs/overview.gif differ
diff --git a/src/assets/connect-assets/home/gifs/results.gif b/src/assets/connect-assets/home/gifs/results.gif
new file mode 100644
index 0000000..c211043
Binary files /dev/null and b/src/assets/connect-assets/home/gifs/results.gif differ
diff --git a/src/assets/connect-assets/sketch_line_arrow.svg b/src/assets/connect-assets/sketch_line_arrow.svg
new file mode 100644
index 0000000..80eb2a5
--- /dev/null
+++ b/src/assets/connect-assets/sketch_line_arrow.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="33.534" height="182.701" viewBox="0 0 33.534 182.701">
+  <g id="Group_755" data-name="Group 755" transform="translate(-4.701 -13.326)">
+    <g id="Group_342" data-name="Group 342" transform="translate(686.122 -100.639) rotate(90)">
+      <path id="Path_235" data-name="Path 235" d="M1783.518,676.418s45.7-15.767,85.456-2.516c20.573,6.859,63.031,6.3,95.334,0" transform="translate(-1669.227 -11.527)" fill="none" stroke="#94b2e2" stroke-width="2"/>
+    </g>
+    <path id="Path_309" data-name="Path 309" d="M6823.193,2688.6c14.274,8.08,17.506,17.843,17.506,17.843s12.12-8.416,14.544-26.394" transform="translate(-6818 -2512)" fill="none" stroke="#94b2e2" stroke-width="2"/>
+  </g>
+</svg>
diff --git a/src/assets/connect-assets/sketch_line_arrow_large.svg b/src/assets/connect-assets/sketch_line_arrow_large.svg
new file mode 100644
index 0000000..a4d3e20
--- /dev/null
+++ b/src/assets/connect-assets/sketch_line_arrow_large.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="33.534" height="519.494" viewBox="0 0 33.534 519.494">
+  <g id="Group_755" data-name="Group 755" transform="translate(-4.701 -13.532)">
+    <g id="Group_342" data-name="Group 342" transform="translate(686.122 -100.639) rotate(90)">
+      <path id="Path_235" data-name="Path 235" d="M1783.519,676.418s130.88-15.767,244.75-2.516c58.923,6.859,180.524,6.3,273.04,0" transform="translate(-1669.228 -11.527)" fill="none" stroke="#94b2e2" stroke-width="2"/>
+    </g>
+    <path id="Path_309" data-name="Path 309" d="M6823.193,2688.6c14.274,8.08,17.506,17.843,17.506,17.843s12.12-8.416,14.544-26.394" transform="translate(-6818 -2175)" fill="none" stroke="#94b2e2" stroke-width="2"/>
+  </g>
+</svg>
diff --git a/src/assets/customization.css b/src/assets/customization.css
new file mode 100644
index 0000000..31f090e
--- /dev/null
+++ b/src/assets/customization.css
@@ -0,0 +1,155 @@
+/*Panel background*/
+.communityPanelBackground, .communityPanelBackground .uk-section-primary {
+    background-image: linear-gradient(to right, var(--portal-main-color), var(--portal-dark-color));
+    border-style: solid;
+    border-color: var(--portal-main-color);
+    border-width: 1px;
+}
+
+/*Panel fonts*/
+
+.communityPanelBackground {
+    color: white !important;
+    font-family: Roboto, sans-serif !important;
+    font-size: 14px !important;
+
+}
+
+.communityPanelBackground .uk-h5:not(.ignoreCommunityPanelBackground) {
+    color: white !important;
+    font-family: Roboto, sans-serif !important;
+    font-size: 22px !important;
+
+}
+
+.communityPanelBackground .uk-link:not(.ignoreCommunityPanelBackground), .communityPanelBackground a:not(.uk-button):not(.uk-button-text):not(.ignoreCommunityPanelBackground), .portal-card a {
+    color: rgba(255, 255, 255, 0.98) !important;
+    font-family: Roboto, sans-serif !important;
+    font-size: 14px !important;
+    text-decoration: underline;
+
+}
+
+.communityPanelBackground .uk-link:not(.ignoreCommunityPanelBackground):hover, .communityPanelBackground a:not(.uk-button):not(.uk-button-text):not(.ignoreCommunityPanelBackground):hover, .portal-card a:hover {
+    color: rgba(255, 255, 255, 0.8) !important;
+}
+
+/*Other fonts*/
+
+/*
+TO check again
+  div,  p, .descriptionText{
+    color:blue ;
+    font-family: Roboto, sans-serif;
+    font-size: 11px ;
+
+}
+*/
+
+/*.uk-h5{
+    color:blue;
+    font-family: Roboto, sans-serif;
+    font-size: 22px;
+
+}*/
+.uk-link, a:not(.uk-button), .uk-navbar-dropdown-nav > li > a, .uk-navbar-nav > li > a, .loginLink,
+.uk-tab > .uk-active > a, .uk-tab > * > a:focus, .uk-tab > * > a:hover {
+    color: var(--portal-main-color);
+    font-family: Roboto, sans-serif !important;
+}
+
+.uk-link:hover, a:not(.uk-button):hover,
+.uk-navbar-dropdown-nav > li > a:focus, .uk-navbar-dropdown-nav > li > a:hover, .uk-navbar-nav > li > a:hover, .uk-navbar-nav > li > a:focus, .uk-navbar-nav > li > a:active, .uk-navbar-nav > li:hover > a,
+.uk-navbar-dropdown-nav > li.uk-active > a, .uk-tab > .uk-active > a, .uk-navbar-nav > li.uk-active > a, .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav > li.uk-active > a {
+    color: var(--portal-dark-color);
+}
+
+.communityBorder {
+    border-color: var(--portal-main-color);
+    border-style: solid;
+    border-width: 2px;
+    border-radius: 6px;
+}
+
+.customTabs .uk-tab > .uk-active > a {
+    border-color: var(--portal-main-color);
+}
+
+.customTabs .uk-tab > .uk-active > a {
+    border-color: var(--portal-main-color);
+}
+
+.uk-tab > * > a:focus, .uk-tab > * > a:hover {
+    border-color: var(--portal-dark-color);
+}
+
+/*Panel Elements & cards*/
+.communityPanelBackground .uk-card:not(.ignoreCommunityPanelBackground), .communityPanelBackground .uk-label:not(.ignoreCommunityPanelBackground) {
+    background-color: rgba(255, 255, 255, 0.5);
+    border-color: rgba(255, 255, 255, 0.5);
+}
+
+.communityPanelBackground .uk-card:not(.ignoreCommunityPanelBackground), .communityPanelBackground .uk-label:not(.ignoreCommunityPanelBackground) {
+    color: white;
+}
+
+
+.uk-button:not(.uk-button-text) {
+    background-color: var(--portal-main-color);;
+    color: white;
+    border-color: transparent;
+    border-style: solid;
+    border-width: 1px;
+    border-radius: 4px;
+
+}
+
+.uk-button:not(.uk-button-text):hover {
+    background-color: var(--portal-dark-color);
+    color: white;
+    border-color: transparent;
+}
+
+/*Buttons*/
+.communityPanelBackground .uk-button:not(.ignoreCommunityPanelBackground) {
+    background-color: white  !important;
+    color: var(--portal-main-color)  !important;
+    border-color: transparent  !important;
+    border-style: solid  !important;
+    border-width: 1px  !important;
+    border-radius: 4px  !important;
+
+}
+
+.communityPanelBackground .uk-button:not(.ignoreCommunityPanelBackground):hover {
+    background-color: #eeeeee !important;
+    color: var(--portal-main-color)  !important;
+    border-color: transparent  !important;
+}
+/*
+
+
+.communityPanelBackground .uk-link:not(.ignoreCommunityPanelBackground):not(.license):not(.newsletter),
+.communityPanelBackground a:not(.uk-button):not(.ignoreCommunityPanelBackground):not(.uk-icon):not(.license):not(.newsletter):not(.breadcrumb)
+{
+    !*text-decoration: underline;*!
+    border-bottom: 1px solid white;
+}
+
+
+.communityPanelBackground .lowOpacityColor:not(.ignoreCommunityPanelBackground){
+    color:rgba(255,255,255,0.7);
+}
+
+
+*/
+
+
+.uk-navbar-dropdown {
+    background-color: white;
+    color: #666;
+    box-shadow: 0 5px 12px rgba(0, 0, 0, .15);
+    /*border:var(--portal-main-color) 1px solid;*/
+}
+
+
diff --git a/src/assets/customizationOptions.json b/src/assets/customizationOptions.json
new file mode 100644
index 0000000..b65830c
--- /dev/null
+++ b/src/assets/customizationOptions.json
@@ -0,0 +1,80 @@
+{
+  "mainColor": "#4C9CD5",
+  "secondaryColor": "#24857F",
+  "panel": {
+    "background": {
+      "borderStyle": null,
+      "borderColor": null,
+      "borderWidth": null
+    }, "fonts": {
+      "color": "white",
+      "family": null,
+      "size": null
+    },
+    "title": {
+      "color": "white",
+      "family": null,
+      "size": null
+    },
+    "links": {
+      "color": "rgba(255, 255, 255, 0.98)",
+      "family": null,
+      "size": null,
+      "onHover": {
+        "color": null
+      }
+    },
+    "buttons": {
+      "backgroundColor": "white",
+      "fontWeight": null,
+      "color": null,
+      "borderStyle": null,
+      "borderColor": null,
+      "borderWidth": "1px",
+      "borderRadius": "4px",
+      "onHover": {
+        "backgroundColor": "#eeeeee",
+        "color": null,
+        "borderColor": null
+      }
+
+    },
+
+
+    "panelElements": {
+      "backgroundColor": "rgba(255, 255, 255, 0.5)",
+      "borderColor": "rgba(255, 255, 255, 0.5)",
+      "color": "white"
+    }
+  },
+
+  "box": {
+    "borderColor": null,
+    "borderStyle": "solid",
+    "borderWidth": "2px",
+    "borderRadius": "6px"
+  },
+
+  "links": {
+    "color": null,
+    "family": null,
+    "decoration": null,
+    "onHover": {
+      "color": null
+    }
+  },
+
+  "buttons": {
+    "backgroundColor": null,
+    "color": null,
+    "borderStyle": null,
+    "borderColor": null,
+    "borderWidth": null,
+    "borderRadius": null,
+    "onHover": {
+      "backgroundColor": null,
+      "color": null,
+      "borderColor": null
+    }
+  }
+}
diff --git a/src/assets/env-properties.json b/src/assets/env-properties.json
index a729dbf..067b5a8 100644
--- a/src/assets/env-properties.json
+++ b/src/assets/env-properties.json
@@ -1,30 +1,29 @@
 {
-  "environment" : "beta",
+  "environment" : "development",
   "enablePiwikTrack" : false,
-  "enableHelper" : true,
   "useCache" : false,
+  "showContent" : true,
   "metricsAPIURL" : "https://beta.services.openaire.eu/usagestats/",
   "framesAPIURL" : "https://beta.openaire.eu/stats3/",
-  "statisticsAPIURL" : "http://vatopedi.di.uoa.gr:8080/stats/",
+  "statisticsAPIURL" : "https://beta.services.openaire.eu/stats-api/",
   "statisticsFrameAPIURL":"https://beta.openaire.eu/stats/",
-  "claimsAPIURL" : "http://duffy.di.uoa.gr:8080/dnet-claims-service-2.0.0-SNAPSHOT/rest/claimsService/",
-  "searchAPIURLLAst"     : "https://beta.services.openaire.eu/search/v2/api/",
+  "statisticsFrameNewAPIURL": "http://marilyn.athenarc.gr:8080/stats-api/",
+  "useNewStatistisTool":false,
+  "claimsAPIURL" : "http://scoobydoo.di.uoa.gr:8080/dnet-claims-service-2.0.0-SNAPSHOT/rest/claimsService/",
+   "searchAPIURLLAst"     : "https://beta.services.openaire.eu/search/v2/api/",
   "searchResourcesAPIURL"     : "https://beta.services.openaire.eu/search/v2/api/resources",
   "openCitationsAPIURL" : "https://services.openaire.eu/opencitations/getCitations?id=",
-  "csvAPIURL" : "https://beta.services.openaire.eu/search/v2/api/reports",
+  "csvAPIURL" : "http://rudie.di.uoa.gr:8080/dnet-functionality-services-2.0.0-SNAPSHOT/rest/v2/reports",
   "searchCrossrefAPIURL" : "https://api.crossref.org/works",
   "searchDataciteAPIURL" : "https://api.datacite.org/works",
-
-  "searchOrcidURL"    :  "https://pub.orcid.org/v2.1/",
-
-  "pmidURL"    : "http://www.ncbi.nlm.nih.gov/pubmed/",
+  "searchOrcidURL"    : "https://pub.orcid.org/v2.1/",
+  "orcidURL"   : "https://orcid.org/",
   "doiURL"     : "https://dx.doi.org/",
   "cordisURL"  : "http://cordis.europa.eu/projects/",
-  "pmcURL"     : "http://europepmc.org/articles/",
-  "handleURL"  : "http://hdl.handle.net/",
   "openDoarURL": "http://v2.sherpa.ac.uk/id/repository/",
   "r3DataURL": "http://service.re3data.org/repository/",
   "zenodo"   : "https://zenodo.org/",
+  "zenodoCommunities" : "https://zenodo.org/api/communities/",
   "openAccess" : "https://www.openaire.eu/support/faq#article-id-234",
   "openAccessRepo" : "https://www.openaire.eu/support/faq#article-id-310",
   "fp7Guidlines" : "https://www.openaire.eu/open-access-in-fp7-seventh-research-framework-programme",
@@ -32,13 +31,15 @@
   "ercGuidlines" : "http://erc.europa.eu/sites/default/files/document/file/ERC_Open_Access_Guidelines-revised_2014.pdf",
   "helpdesk" : "https://www.openaire.eu/support/helpdesk",
   "uploadService" : "http://scoobydoo.di.uoa.gr:8000/upload",
+  "utilsService" : "http://mpagasas.di.uoa.gr:8000",
 
   "vocabulariesAPI" :"https://beta.services.openaire.eu/provision/mvc/vocabularies/",
 
   "piwikBaseUrl" :"https://analytics.openaire.eu/piwik.php?idsite=",
-  "piwikSiteId" : "6",
+  "piwikSiteId" : "80",
+  "loginUrl" :"http://rudie.di.uoa.gr:8080/dnet-login/openid_connect_login",
 
-  "loginUrl" :"http://scoobydoo.di.uoa.gr:8080/dnet-openaire-users-1.0.0-SNAPSHOT/openid_connect_login",
+  "userInfoUrl" : "http://rudie.di.uoa.gr:8080/dnet-openaire-users-1.0.0-SNAPSHOT/api/users/getUserInfo?accessToken=",
 
   "logoutUrl" :"https://aai.openaire.eu/proxy/saml2/idp/SingleLogoutService.php?ReturnTo=",
 
@@ -46,17 +47,15 @@
 
   "feedbackmail" :"openaire.test@gmail.com",
 
-  "helperPageUrl" :"http://scoobydoo.di.uoa.gr:16000/api/page/route",
-
   "cacheUrl" :"http://scoobydoo.di.uoa.gr:3000/get?url=",
 
-  "adminToolsAPIURL" :"http://duffy.di.uoa.gr:8080/uoa-admin-tools/",
-
-  "adminToolsCommunity" :"openaire",
+  "adminToolsAPIURL" :"http://mpagasas.di.uoa.gr:8080/uoa-admin-tools",
 
+  "adminToolsCommunity" :"connect",
   "datasourcesAPI": "https://beta.services.openaire.eu/openaire/ds/search/",
   "contextsAPI":"https://dev-openaire.d4science.org/openaire/context",
-  "communityAPI": "https://dev-openaire.d4science.org/openaire/community/",
+  "communityAPI":   "https://dev-openaire.d4science.org/openaire/community/",
+  "communitiesAPI": "https://dev-openaire.d4science.org/openaire/community/communities",
 
   "csvLimit":  2000,
   "pagingLimit":  20,
@@ -64,13 +63,17 @@
 
   "baseLink" : "https://beta.explore.openaire.eu",
 
+  "afterLoginRedirectLink": "/myCommunities",
+
   "searchLinkToPublication" : "/search/publication?articleId=",
   "searchLinkToProject" : "/search/project?projectId=",
   "searchLinkToDataProvider" : "/search/dataprovider?datasourceId=",
   "searchLinkToDataset" : "/search/dataset?datasetId=",
-  "searchLinkToOrp" : "/search/other?orpId=",
+  "searchLinkToSoftwareLanding" : "/search/software?softwareId=",
   "searchLinkToOrganization" : "/search/organization?organizationId=",
+  "searchLinkToOrp" : "/search/other?orpId=",
 
+  "searchLinkToCommunities" : "/search/find/communities",
   "searchLinkToPublications" : "/search/find/publications",
   "searchLinkToDataProviders" : "/search/find/dataproviders",
   "searchLinkToProjects" : "/search/find/projects",
@@ -79,7 +82,6 @@
   "searchLinkToOrps" : "/search/find/other",
   "searchLinkToOrganizations" : "/search/find/organizations",
   "searchLinkToCompatibleDataProviders" : "/search/content-providers",
-  "searchLinkToCompatibleDataProvidersTable" : "/search/content-providers-table",
   "searchLinkToEntityRegistriesDataProviders" : "/search/entity-registries",
   "searchLinkToEntityRegistriesDataProvidersTable" : "/search/entity-registries-table",
   "searchLinkToJournals" : "/search/journals",
@@ -92,8 +94,25 @@
   "searchLinkToAdvancedOrps" : "/search/advanced/other",
   "searchLinkToAdvancedDataProviders" : "/search/advanced/dataproviders",
   "searchLinkToAdvancedOrganizations" : "/search/advanced/organizations",
-  "lastIndexInformationLink" : "https://www.openaire.eu/aggregation-and-content-provision-workflows",
+
+
+  "sendMailUrl": "http://scoobydoo.di.uoa.gr:8080/uoa-admin-tools/sendMail/",
+  "notifyForNewManagers": "http://scoobydoo.di.uoa.gr:8080/uoa-admin-tools/notifyForNewManagers/",
+  "notifyForNewSubscribers": "http://scoobydoo.di.uoa.gr:8080/uoa-admin-tools/notifyForNewSubscribers/",
+
+  "lastIndexInformationLink" : "https://beta.openaire.eu/aggregation-and-content-provision-workflows",
   "showLastIndexInformationLink" : true,
+
   "widgetLink" : "https://beta.openaire.eu/index.php?option=com_openaire&view=widget&format=raw&projectId=",
-  "claimsInformationLink": "https://www.openaire.eu/linking-beta"
+  "claimsInformationLink": "https://beta.openaire.eu/linking",
+
+  "depositLearnHowPage": "/participate/deposit/learn-how",
+  "depositSearchPage": "/participate/deposit/search",
+  "shareInZenodoPage": "/participate/deposit/zenodo",
+
+  "reCaptchaSiteKey": "6LcVtFIUAAAAAB2ac6xYivHxYXKoUvYRPi-6_rLu",
+
+  "admins" : ["kostis30fylloy@gmail.com","argirok@di.uoa.gr"],
+  "lastIndexUpdate": "2019-05-16",
+  "indexInfoAPI": "http://beta.services.openaire.eu/openaire/info/"
 }
diff --git a/src/assets/home.jpeg b/src/assets/home.jpeg
deleted file mode 100644
index 54d839c..0000000
Binary files a/src/assets/home.jpeg and /dev/null differ
diff --git a/src/assets/home.jpg b/src/assets/home.jpg
new file mode 100644
index 0000000..423a931
Binary files /dev/null and b/src/assets/home.jpg differ
diff --git a/src/assets/logo-large-monitor.png b/src/assets/logo-large-monitor.png
deleted file mode 100644
index c4565fe..0000000
Binary files a/src/assets/logo-large-monitor.png and /dev/null differ
diff --git a/src/assets/logo-small-monitor.png b/src/assets/logo-small-monitor.png
deleted file mode 100644
index b58e78d..0000000
Binary files a/src/assets/logo-small-monitor.png and /dev/null differ
diff --git a/src/assets/manager.svg b/src/assets/manager.svg
new file mode 100644
index 0000000..ac7fb12
--- /dev/null
+++ b/src/assets/manager.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 82.278 58.7"><defs><style>.a{fill:#fff;}.a,.b{stroke:#ebb13e;stroke-miterlimit:10;stroke-width:3px;}.b{fill:none;}</style></defs><g transform="translate(1 2)"><g transform="translate(-9.464 -954.4)"><path class="a" d="M60,979.6a12.864,12.864,0,0,0,1.9-2.1.91.91,0,0,0,0-1.2c-.9-1.1-1.5-1.9-1.9-2.5.2-.5.4-1,.6-1.4l3.3-.5a.9.9,0,0,0,.8-1l-.1-4.2a1.063,1.063,0,0,0-.9-1l-3.2-.5a11.111,11.111,0,0,0-.7-1.6c.1-.1.2-.3.4-.4a5.548,5.548,0,0,0,.6-.8l.3-.4a6.783,6.783,0,0,0,.6-.9,1.083,1.083,0,0,0,0-1.1,19.927,19.927,0,0,0-3.2-3.3,1.059,1.059,0,0,0-1.3-.1l-2.6,2c-.5-.2-.9-.4-1.4-.6l-.5-3.3a.974.974,0,0,0-1-.8H47.5a.974.974,0,0,0-1,.8c-.2,1.1-.4,2.2-.5,3.4l-1.5.6-2.4-1.9c-.1-.1-.2-.1-.3-.2-.6-.3-1.1,0-2.4,1.3a17.966,17.966,0,0,0-1.9,2,.91.91,0,0,0,0,1.2l.2.2a22.13,22.13,0,0,1,1.7,2.3,4.714,4.714,0,0,0-.6,1.5l-3.4.6a.9.9,0,0,0-.8,1l.1,4.2a1.063,1.063,0,0,0,.9,1l3.3.5a11.111,11.111,0,0,0,.7,1.6c-.2.3-.6.7-.9,1.2l-.3.4a6.783,6.783,0,0,0-.6.9,1.083,1.083,0,0,0,0,1.1,32.6,32.6,0,0,0,3.1,3.3,1.23,1.23,0,0,0,1.3.1l2.6-2a11.209,11.209,0,0,0,1.3.5l.5,3.3a.974.974,0,0,0,1,.8h4.2a1.077,1.077,0,0,0,1-.8v-.1a30.679,30.679,0,0,0,.4-3.1l1.5-.6,3,2.5Z"/><path class="a" d="M50.1,965.6a2.9,2.9,0,1,1-2.9,2.9A3.039,3.039,0,0,1,50.1,965.6Z"/></g><circle class="a" cx="7.435" cy="7.435" r="7.435" transform="translate(61.335 13.246)"/><circle class="a" cx="7.435" cy="7.435" r="7.435" transform="translate(4.169 13.246)"/><path class="b" d="M63.951,58.112h0A16.5,16.5,0,0,0,47.438,41.6H34.112A16.5,16.5,0,0,0,17.6,58.112h0" transform="translate(-0.588 -1.412)"/><path class="b" d="M65.5,41.6h0A16.567,16.567,0,0,1,82.012,58.112h0" transform="translate(-2.234 -1.412)"/><path class="b" d="M17.012,41.6h0A16.567,16.567,0,0,0,.5,58.112h0" transform="translate(0 -1.412)"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/monitor-custom.css b/src/assets/monitor-custom.css
index de5c1da..a4a84f8 100644
--- a/src/assets/monitor-custom.css
+++ b/src/assets/monitor-custom.css
@@ -1,28 +1,8 @@
-/* .tm-toolbar .uk-subnav-line .custom-monitor-li {
-   display: block;
-  background:#68A704 !important; color:#fff !important;
-}
-.custom-monitor-toolbar   ul.uk-subnav.uk-subnav-line{
-  background-color: #8BCC00 !important;
-  }
-
-  .custom-monitor-toolbar .inner {
-       background-color: #8BCC00 !important;
-  }
-
-  .custom-monitor-toolbar{
-    border-top-color:#8BCC00 !important;
-  }
-.uk-button-default:hover,.uk-button-default:focus,.btn:hover,.btn:focus {
-  background-color:#fff !important;
-  color:#5b5b5b !important;
- box-shadow:0 6px 50px rgba(0,0,0,0.05)
-}
- */
- :root {
+:root {
     --portal-main-color: #9ABB55;
     --portal-main-contrast: white;
     --portal-dark-color: #7c9144;
+
     --openaire-main-color: #313179;
 
     --explore-portal-color: #D95F2D;
@@ -36,17 +16,168 @@
     --monitor-portal-lower-tone: #7c9144;
     --connect-portal-lower-tone: #b48536;
     --develop-portal-lower-tone: #9f4e7e;
+
+    --community_main_color: #4C9CD5;
+    --community_main_color_rgb: 76,156,213;
+    --community_secondary_color:#24857F;
+    --community_main_dark_color:#2276B9;
+
 }
 
 
+
 .tm-toolbar .uk-subnav-line .custom-monitor-li {
-   background:var(--portal-main-color) !important;
+  background:var(--portal-main-color) !important;
 }
 
+/* .uk-button-default:hover,.uk-button-default:focus,.btn:hover,.btn:focus {
+  background-color:#fff !important;
+  color:#5b5b5b !important;
+ box-shadow:0 6px 50px rgba(0,0,0,0.05)
+} */
+
 
 .mainPageSearchForm {
-    background-image: url("./home.jpeg") !important;
+    background-image: url("connect-assets/home/banner.jpg") !important;
     background-color: rgb(255, 255, 255);
     box-sizing: border-box;
     min-height: calc(100vh - 412.767px);
 }
+
+.home-banner {
+  background-image: url("connect-assets/home/banner.jpg") !important;
+  background-color: rgb(255, 255, 255);
+}
+
+.contact-banner {
+  background-color: #CFDEF1;
+}
+
+.contact-background {
+  background-image: url("connect-assets/contact/background.png") !important;
+  background-color: rgb(255, 255, 255);
+}
+
+.cloud-background {
+    background-image: url("connect-assets/cloud/background.png") !important;
+    background-color: rgb(255, 255, 255);
+}
+
+.cloud-abstract {
+  background-image: url("connect-assets/cloud/abstract.png") !important;
+  background-color: rgb(255, 255, 255);
+}
+
+.banner-background {
+  background: linear-gradient(145deg, rgba(255,255,255,1) 0%, rgba(160,193,242,1) 100%);
+}
+
+.home-background {
+  background-image: url("connect-assets/home/background.png") !important;
+  background-color: rgb(255, 255, 255);
+}
+
+.connectInfoCard {
+  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.24);
+}
+
+.connectCheckIcon {
+  background: rgba(0, 0, 0, 0.60);
+  color: white;
+}
+
+.communityCard {
+  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+}
+
+.rc-label{
+  color:black !important;
+  background-color: #FFC700 !important;
+}
+
+.private-view-label{
+  color:black !important;
+}
+
+
+.searchForm, .communitiesSearchForm{
+  background: linear-gradient(145deg, rgba(255,255,255,1) 0%, rgba(160,193,242,1) 100%);
+}
+.generalSearchForm,
+.publicationsSearchForm,
+.projectsSearchForm, .projectsTableSearchForm,
+.organizationsSearchForm,
+.datasetsSearchForm,
+.softwareSearchForm,
+.orpsSearchForm,
+.datasourcesSearchForm,  .compatibleDatasourcesSearchForm, .compatibleDatasourcesTableSearchForm, .datasourcesTableSearchForm,
+ .journalsSearchForm, .journalsTableSearchForm,
+.entityRegistriesSearchForm, .entityRegistriesTableSearchForm {
+
+    background: url('') !important;
+
+}
+
+.communityToolBar{
+  background-color:#dedede;
+  z-index: 10;
+}
+
+/*.my-tooltip {
+  opacity: 0;
+}*/
+
+.communityToolBarSection{
+  z-index: 10;
+}
+
+.iframeContainer{
+  /*position:relative;*/
+  overflow:hidden;
+  /*padding-top:56.25%;*/
+  /*padding-bottom:35%;*/
+
+}
+
+.iframeContainer iframe{
+  /*position: absolute;*/
+  /*top:0;*/
+  /*left:0;*/
+  width:100%;
+  height:100%;
+  border:0;
+}
+
+div:not(.connect_App) bottom .uk-totop{
+    background-color: transparent !important;
+}
+
+.communityPanelBackground .curator-photo{
+    border:rgba(255, 255, 255, 0.5) 8px solid;
+}
+
+.communityRecentResults .search-results > li:nth-child(2){
+    border-top:  none !important;
+}
+.communityRecentResults .search-results > li:last-child {
+    border-bottom: none !important;
+
+}
+
+.communityPanelBackground .uk-breadcrumb .active{
+    color:white;
+}
+
+.uk-breadcrumb .active{
+    font-weight: bold;
+}
+
+.communityPanelBackground  .uk-label:not(.ignoreCommunityPanelBackground){
+    border-radius: 20px;
+    padding: 10px 20px;
+}
+
+
+.communityPanelBackground .uk-grid-divider > :not(.uk-first-column)::before {
+    border-left: 1px solid rgba(255, 255, 255, .2);
+}
diff --git a/src/assets/researcher.svg b/src/assets/researcher.svg
new file mode 100644
index 0000000..446a3a8
--- /dev/null
+++ b/src/assets/researcher.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72.3 64.727"><defs><style>.a{fill:#fff;}.a,.b,.c{stroke:#ebb13e;stroke-linecap:round;stroke-width:3px;}.b,.c{fill:none;}.b{stroke-miterlimit:10;}</style></defs><g transform="translate(1 1)"><path class="a" d="M29.149,14.574A14.574,14.574,0,0,1,0,14.574C0,6.525,29.149,6.525,29.149,14.574Z" transform="translate(0.5 33.078)"/><path class="a" d="M29.149,14.574A14.574,14.574,0,0,1,0,14.574C0,6.525,29.149,6.525,29.149,14.574Z" transform="translate(40.508 33.078)"/><line class="b" x2="10.717" transform="translate(29.792 47.653)"/><path class="b" d="M51.788,47.653V9.788L42.5.5" transform="translate(18.012)"/><path class="b" d="M.5,48.081V9.788L9.788.5"/><path class="c" d="M5.144,34.847s7.429-5.319,16.916,0" transform="translate(19.069 -4.556) rotate(18)"/><path class="c" d="M23.231,32.482s-7.943,5.2-18.087,0" transform="translate(19.491 9.185) rotate(-31)"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/search.jpg b/src/assets/search.jpg
new file mode 100644
index 0000000..5f1de67
Binary files /dev/null and b/src/assets/search.jpg differ
diff --git a/src/assets/sitemap.xml b/src/assets/sitemap.xml
index ff3aa18..35438b8 100644
--- a/src/assets/sitemap.xml
+++ b/src/assets/sitemap.xml
@@ -1,8 +1,113 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
    <url>
-      <loc><![CDATA[https://monitor.openaire.eu]]></loc>
+      <loc><![CDATA[https://demo.openaire.eu]]></loc>
       <changefreq>weekly</changefreq>
       <priority>0.5</priority>
-   </url>    
+   </url>
+   <url>
+      <loc><![CDATA[https://demo.openaire.eu/participate/deposit-publications-data]]></loc>
+      <changefreq>weekly</changefreq>
+      <priority>0.5</priority>
+   </url>
+   <url>
+      <loc><![CDATA[https://demo.openaire.eu/participate/claim]]></loc>
+      <changefreq>weekly</changefreq>
+      <priority>0.5</priority>
+   </url>
+   <url>
+      <loc><![CDATA[https://demo.openaire.eu/search/find]]></loc>
+      <changefreq>weekly</changefreq>
+      <priority>0.5</priority>
+   </url>
+   <url>
+      <loc><![CDATA[https://demo.openaire.eu/search/find/publications]]></loc>
+      <changefreq>weekly</changefreq>
+      <priority>0.5</priority>
+   </url>
+   <url>
+      <loc><![CDATA[https://demo.openaire.eu/search/find/other]]></loc>
+      <changefreq>weekly</changefreq>
+      <priority>0.5</priority>
+   </url>
+   <url>
+      <loc><![CDATA[https://demo.openaire.eu/search/find/datasets]]></loc>
+      <changefreq>weekly</changefreq>
+      <priority>0.5</priority>
+   </url>
+   <url>
+      <loc><![CDATA[https://demo.openaire.eu/search/find/projects]]></loc>
+      <changefreq>weekly</changefreq>
+      <priority>0.5</priority>
+   </url>
+   <url>
+      <loc><![CDATA[https://demo.openaire.eu/search/find/people]]></loc>
+      <changefreq>weekly</changefreq>
+      <priority>0.5</priority>
+   </url>
+   <url>
+      <loc><![CDATA[https://demo.openaire.eu/search/find/organizations]]></loc>
+      <changefreq>weekly</changefreq>
+      <priority>0.5</priority>
+   </url>
+   <url>
+      <loc><![CDATA[https://demo.openaire.eu/search/find/dataproviders]]></loc>
+      <changefreq>weekly</changefreq>
+      <priority>0.5</priority>
+   </url>
+   <url>
+      <loc><![CDATA[https://demo.openaire.eu/search/advanced/publications]]></loc>
+      <changefreq>weekly</changefreq>
+      <priority>0.5</priority>
+   </url>
+   <url>
+      <loc><![CDATA[https://demo.openaire.eu/search/advanced/other]]></loc>
+      <changefreq>weekly</changefreq>
+      <priority>0.5</priority>
+   </url>
+   <url>
+      <loc><![CDATA[https://demo.openaire.eu/search/advanced/datasets]]></loc>
+      <changefreq>weekly</changefreq>
+      <priority>0.5</priority>
+   </url>
+   <url>
+      <loc><![CDATA[https://demo.openaire.eu/search/advanced/projects]]></loc>
+      <changefreq>weekly</changefreq>
+      <priority>0.5</priority>
+   </url>
+   <url>
+      <loc><![CDATA[https://demo.openaire.eu/search/advanced/people]]></loc>
+      <changefreq>weekly</changefreq>
+      <priority>0.5</priority>
+   </url>
+   <url>
+      <loc><![CDATA[https://demo.openaire.eu/search/advanced/organizations]]></loc>
+      <changefreq>weekly</changefreq>
+      <priority>0.5</priority>
+   </url>
+   <url>
+      <loc><![CDATA[https://demo.openaire.eu/search/advanced/dataproviders]]></loc>
+      <changefreq>weekly</changefreq>
+      <priority>0.5</priority>
+   </url>
+   <url>
+      <loc><![CDATA[https://demo.openaire.eu/search/content-providers]]></loc>
+      <changefreq>weekly</changefreq>
+      <priority>0.5</priority>
+   </url>
+   <url>
+      <loc><![CDATA[https://demo.openaire.eu/search/entity-registries]]></loc>
+      <changefreq>weekly</changefreq>
+      <priority>0.5</priority>
+   </url>
+   <url>
+      <loc>![CDATA[https://demo.openaire.eu/participate/deposit-publications]</loc>
+      <changefreq>weekly</changefreq>
+      <priority>0.5</priority>
+   </url>
+   <url>
+      <loc>![CDATA[https://demo.openaire.eu/participate/deposit-datasets]</loc>
+      <changefreq>weekly</changefreq>
+      <priority>0.5</priority>
+   </url>
 </urlset>
diff --git a/src/index.html b/src/index.html
index fba9c53..7742ab5 100644
--- a/src/index.html
+++ b/src/index.html
@@ -7,24 +7,22 @@
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <base href="/" />
       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-      <!--meta name="description" content="OpenAIRE, Connect,Community Dashboard, communities, open access, research, projects "/>
+      <meta name="description" content="OpenAIRE Monitor, funder, funding, research,  "/>
 
 
-      <meta property="og:description" content="OpenAIRE, Connect,Community Dashboard, communities, open access, research, projects"/>
-      <meta property="og:title" content="OpenAIRE Connect | Community Dashboard"/>
+      <meta property="og:description" content="OpenAIRE Monitor, funder, funding"/>
+      <meta property="og:title" content="OpenAIRE - Monitor "/>
 
       <meta property="og:type" content="website"/>
-      <meta property="og:url" content="https://beta.connect.openaire.eu"/>
-      <meta property="og:site_name" content="OpenAIRE"/-->
+      <meta property="og:url" content="https://beta.monitor.openaire.eu"/>
+      <meta property="og:site_name" content="OpenAIRE - Monitor"/>
 
-
-       
       <meta property="og:image" content="assets/common-assets/common/Symbol.png"/>
       <meta property="og:image:secure_url" content="assets/common-assets/common/Symbol.png" />
       <meta property="og:image:type" content="image/png" />
       <meta property="og:image:width" content="360" />
       <meta property="og:image:height" content="359" />
-
+      <meta name="robots" content="noindex">
       <link rel="apple-touch-icon" sizes="57x57" href="assets/common-assets/logo/apple-icon-57x57.png">
       <link rel="apple-touch-icon" sizes="60x60" href="assets/common-assets/logo/apple-icon-60x60.png">
       <link rel="apple-touch-icon" sizes="72x72" href="assets/common-assets/logo/apple-icon-72x72.png">
@@ -44,94 +42,39 @@
       <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
       <meta name="theme-color" content="#ffffff">
 
-      <!--title>OpenAIRE Connect</title-->
       <script>
-      window.onerror = function (errorMsg, url, lineNumber, column, errorObj) {
-        // console.log(errorMsg + " __" + url + " __" +  lineNumber + " __" +  column + " __" +  errorObj);
-        if((errorMsg && errorMsg.indexOf("uikit.js") != -1) || url.indexOf("uikit.js") != -1 ){
+      window.onerror = function (errorMsg) {
+        if(errorMsg !=null && (errorMsg.message && errorMsg.message.indexOf("uikit.js") != -1) || (errorMsg.url &&
+            errorMsg.url.indexOf("uikit.js") != -1 )){
           console.log("********UIKIT Error ***********");
-          $.getScript("assets/common-assets/common/uikit.js");
-          $.getScript("assets/common-assets/common/uikit-icons-max.js");
+          $.getScript("assets/common-assets/common/uikit.min.js?v=1");
+          $.getScript("assets/common-assets/common/uikit-icons.min.js?v=1");
 }
 
 }
       </script>
 
-
-       <!-- <script src="assets/common-assets/jquery/jquery.min.js" type="text/javascript"></script> -->
        <script  src="assets/common-assets/common/jquery.js"></script>
        <script  src="assets/common-assets/citeproc.js"></script>
-       <!-- <script  src="assets/common-assets/common/uikit.js"></script> -->
-       <script src="assets/common-assets/common/uikit-icons-max.js"></script>
+        <script  src="assets/common-assets/common/uikit.min.js?v=1"></script>
+     <script src="assets/common-assets/common/uikit-icons.min.js?v=1"></script>
+       <script src="https://cdn.ckeditor.com/4.5.11/full-all/ckeditor.js"></script>       
 <script>
 $(document).ready(function(){
   console.log("Is ready - load uikit ***")
-    $.getScript("assets/common-assets/common/uikit.js");
-    $.getScript("assets/common-assets/common/uikit-icons-max.js");
+    $.getScript("assets/common-assets/common/uikit.min.js?v=1");
+    $.getScript("assets/common-assets/common/uikit-icons.min.js?v=1");
 });
 
 </script>
-<script>
-  var logoutClicked = function(){
-    console.log("jqery logout!");
-    // no
-    // $("#logout1").load("https://dl067.madgik.di.uoa.gr/idp/profile/Logout");
-    //yes
-    // window.open('https://dl067.madgik.di.uoa.gr/idp/profile/Logout','_blank','toolbar=no,status=no,menubar=no,scrollbars=no,resizable=no,visible=none', '');
 
-    // no
-    var xmlHttp = null;
+      <link rel="stylesheet" href="assets/common-assets/common/theme.css?v=1">
+      <link rel="stylesheet" href="assets/common-assets/common/custom.css?v=1">
+      <link rel="stylesheet" href="assets/common-assets/library.css?v=4">
+      <link rel="stylesheet" href="assets/monitor-custom.css?v=7">
 
-    xmlHttp = new XMLHttpRequest();
-    xmlHttp.open( "GET", "https://dl067.madgik.di.uoa.gr/idp/profile/Logout", true );
-    xmlHttp.send( null );
-
-   };
-
-</script>
-       <!-- <script  src="assets/common-assets/common/uikit.js"></script> -->
-       <!-- <script src="assets/common-assets/common/uikit-icons-max.js"></script> -->
-
-
-      <link rel="stylesheet" href="assets/common-assets/common/theme.css">
-      <link rel="stylesheet" href="assets/common-assets/common/custom.css">
-      <link rel="stylesheet" href="assets/common-assets/library.css">
-      <link rel="stylesheet" href="assets/monitor-custom.css">
-
-      <!-- <script async src="assets/common-assets/common/theme.js"></script> -->
-
-
-             <!-- Google sitename markup-->
-      <script type="application/ld+json">
-         {
-           "@context" : "http://schema.org",
-           "@type" : "WebSite",
-           "name" : "OpenAIRE",
-             "url" : "http://demo.openaire.eu"
-         }
-      </script>
-      <!-- End of Google sitename markup-->
-      <!-- Google sitelinks search markup-->
-      <script type="application/ld+json">
-         {
-           "@context": "http://schema.org",
-           "@type": "WebSite",
-           "url" : "http://demo.openaire.eu",
-           "potentialAction": {
-             "@type": "SearchAction",
-             "target": "http://demo.openaire.eu/search/find/?keyword={search_term_string}",
-             "query-input": "required name=search_term_string"
-           }
-         }
-      </script>
 
       <script src="assets/common-assets/clipboard.min.js"></script>
-      <!--script type='text/javascript' src="node_modules/clipboard/dist/clipboard.min.js"></script-->
-      <!--script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script-->
-
-      <!--script type='text/javascript' src='https://d1bxh8uas1mnw7.cloudfront.net/assets/common-assets/embed.js'></script-->
-
-      <!-- End of Google sitelinks search markup-->
 
 
  </head>
@@ -148,6 +91,20 @@ $(document).ready(function(){
     var d="createElement",c="getElementsByTagName",m="setAttribute",n=document.getElementById(e);
     return n&&n.parentNode&&n.parentNode.removeChild(n),n=document[d+"NS"]&&document.documentElement.namespaceURI,n=n?document[d+"NS"](n,"script"):document[d]("script"),n[m]("id",e),n[m]("src",t),(document[c]("head")[0]||document[c]("body")[0]).appendChild(n),n=new Image,void n[m]("src","https://d1uo4w7k31k5mn.cloudfront.net/donut/0.png")
   };
+  function appendCss(customData) {
+      if (typeof customData != "undefined")
+          $(document).ready(function () {
+              $("style").append(customData);
+          });
+  }
+    /*  console.log("here!");
+      var fileref=document.createElement("link");
+      fileref.setAttribute("rel", "stylesheet");
+      fileref.setAttribute("type", "text/css");
+      fileref.setAttribute("href", "assets/customization.css");
+      if (typeof fileref!="undefined")
+          document.getElementsByTagName("head")[0].appendChild(fileref)
+  }*/
 </script>
 <!-- Go to www.addthis.com/dashboard to customize your tools -->
 <!-- to update addThis: https://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-559d24521cd8c080-->
diff --git a/src/polyfills.ts b/src/polyfills.ts
index 98fd841..4e77c07 100644
--- a/src/polyfills.ts
+++ b/src/polyfills.ts
@@ -39,7 +39,6 @@ import 'core-js/es6/set';
 
 /** Evergreen browsers require these. **/
 import 'core-js/es6/reflect';
-import 'core-js/es7/reflect';
 
 
 /**
diff --git a/src/robots.txt b/src/robots.txt
index d150c52..e44c1d4 100644
--- a/src/robots.txt
+++ b/src/robots.txt
@@ -1,7 +1,4 @@
 User-Agent: *
 Disallow: /cache
 Disallow: /upload
-#Disallow: /
-
-
-Sitemap: https://monitor.openaire.eu/sitemap.xml
+Disallow: /
diff --git a/src/styles.css b/src/styles.css
index 90d4ee0..5f69d4f 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1 +1,2 @@
 /* You can add global styles to this file, and also import other style files */
+@import "~@angular/material/prebuilt-themes/indigo-pink.css";
diff --git a/static.paths.ts b/static.paths.ts
deleted file mode 100644
index 0c21f94..0000000
--- a/static.paths.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export const ROUTES = [
-  '/',
-  '/lazy',
-  '/home',
-  '/search/publication','/search/project','/search/dataset','/search/dataprovider','/search/organization',
-  '/search/find',
-  '/search/person','/search/publication','/search/project','/search/dataset','/search/dataprovider','/search/organization',
-  '/search/find/people','/search/find/publications','/search/find/projects','/search/find/datasets','/search/find/dataproviders','/search/find/organizations',
-  '/search/advanced/people','/search/advanced/publications','/search/advanced/projects','/search/advanced/datasets','/search/advanced/dataproviders','/search/advanced/organizations',
-  '/participate/deposit-publications','/participate/deposit-datasets','/participate/deposit-publications-result','/participate/deposit-datasets-result','/participate/deposit-subject-result',
-  '/search/content-providers','/search/content-providers-table','/search/entity-registries','/search/entity-registries-table','/search/journals','/search/journals-table',
-  '/project-report','/claims','/myclaims','/participate/claim','/participate/direct-claim','/claims-project-manager',
-  '/test','/user-info',
-  '/error', '/*path'
-];
diff --git a/tsconfig.json b/tsconfig.json
deleted file mode 100644
index a6c016b..0000000
--- a/tsconfig.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "compileOnSave": false,
-  "compilerOptions": {
-    "outDir": "./dist/out-tsc",
-    "sourceMap": true,
-    "declaration": false,
-    "moduleResolution": "node",
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "target": "es5",
-    "typeRoots": [
-      "node_modules/@types"
-    ],
-    "lib": [
-      "es2017",
-      "dom"
-    ]
-  }
-}
diff --git a/webpack.server.config.js b/webpack.server.config.js
deleted file mode 100644
index 626690c..0000000
--- a/webpack.server.config.js
+++ /dev/null
@@ -1,42 +0,0 @@
-// Work around for https://github.com/angular/angular-cli/issues/7200
-
-const path = require('path');
-const webpack = require('webpack');
-
-module.exports = {
-  entry: {
-    // This is our Express server for Dynamic universal
-    server: './server.ts',
-    // This is an example of Static prerendering (generative)
-    prerender: './prerender.ts'
-  },
-  target: 'node',
-  resolve: { extensions: ['.ts', '.js'] },
-  // Make sure we include all node_modules etc
-  externals: [/(node_modules|main\..*\.js)/,],
-  output: {
-    // Puts the output at the root of the dist folder
-    path: path.join(__dirname, 'dist'),
-    filename: '[name].js'
-  },
-  module: {
-    rules: [
-      { test: /\.ts$/, loader: 'ts-loader' }
-    ]
-  },
-  plugins: [
-    new webpack.ContextReplacementPlugin(
-      // fixes WARNING Critical dependency: the request of a dependency is an expression
-      /(.+)?angular(\\|\/)core(.+)?/,
-      path.join(__dirname, 'src'), // location of your src
-      {} // a map of your routes
-    ),
-    new webpack.ContextReplacementPlugin(
-      // fixes WARNING Critical dependency: the request of a dependency is an expression
-      /(.+)?express(\\|\/)(.+)?/,
-      path.join(__dirname, 'src'),
-      {}
-    )
-  ]
-}
-  
\ No newline at end of file