diff --git a/deployment/.env b/deployment/.env
index aecdd96..48bad91 100644
--- a/deployment/.env
+++ b/deployment/.env
@@ -1,15 +1,3 @@
-##############################################################
-#                                                            #
-# SPCgeonode Settings                                        #
-#                                                            #
-# The defauts settings are suited for testing on localhost.  #
-# If you're deploying SPCgeonode for production, you need to #
-# adapt the following settings                               #
-#                                                            #
-# DO NOT FORGET to also modify values in _secrets !          #
-#                                                            #
-##############################################################
-
 # Name of the setup (you only need to change this if you run several instances of the stack)
 COMPOSE_PROJECT_NAME=igrac
 
@@ -69,3 +57,5 @@ S3_ACCESS_KEY=
 S3_SECRET_KEY=
 S3_REGION=
 S3_BUCKET=
+
+VERSION=4.0.0
diff --git a/deployment/docker-compose.yml b/deployment/docker-compose.yml
index 8a9d495..0de39f3 100644
--- a/deployment/docker-compose.yml
+++ b/deployment/docker-compose.yml
@@ -3,7 +3,7 @@ version: '3.4'
 # Common Django template for Geonode, Celery and Celerycam services below
 x-common-django:
   &default-common-django
-  image: kartoza/igrac_ggis:2.1.0
+  image: kartoza/igrac_ggis:${VERSION}
   build:
     context: ../
     dockerfile: deployment/docker/Dockerfile
@@ -49,13 +49,12 @@ x-common-django:
     - GWML_FOLDER=/home/web/gwml2-file/
     - SFTP_FOLDER=/home/web/sftp/
     - FILE_UPLOAD_TEMP_DIR=/home/web/temp/
-    - STATIC_URL=/static/
     - MEDIA_URL=/uploaded/
     - GEOSERVER_LOCATION=http://nginx/geoserver/
     - ASYNC_SIGNALS=True
     - SESSION_EXPIRED_CONTROL_ENABLED=False
     - MONITORING_ENABLED=False
-    - PYTHONPATH=/home/web/django_project:/spcgeonode
+    - PYTHONPATH=/home/web/django_project:/geonode
     - ADD_TIMESTAMP_IN_THUMBNAIL=True
   volumes:
     - ../django_project:/home/web/django_project
@@ -154,7 +153,7 @@ services:
   # django application for development
   dev:
     <<: *default-common-django
-    image: kartoza/igrac_ggis:2.0.0-dev
+    image: kartoza/igrac_ggis:${VERSION}-dev
     entrypoint: []
     build:
       context: ../
diff --git a/deployment/docker/Dockerfile b/deployment/docker/Dockerfile
index 2568db3..144f710 100644
--- a/deployment/docker/Dockerfile
+++ b/deployment/docker/Dockerfile
@@ -11,9 +11,9 @@ RUN echo "Activate memcached" && \
 WORKDIR /
 
 RUN rm -r /usr/src/geonode
-RUN git clone --branch 3.3.x --single-branch https://github.com/kartoza/geonode.git spcgeonode
+RUN git clone --branch 4.0.3 --single-branch https://github.com/kartoza/geonode.git geonode
 
-WORKDIR /spcgeonode
+WORKDIR /geonode
 RUN pip install -r requirements.txt
 RUN pip uninstall -y django-geonode-mapstore-client
 
diff --git a/deployment/docker/REQUIREMENTS.txt b/deployment/docker/REQUIREMENTS.txt
index fe65dea..1e95873 100644
--- a/deployment/docker/REQUIREMENTS.txt
+++ b/deployment/docker/REQUIREMENTS.txt
@@ -1,10 +1,10 @@
-psycopg2-binary==2.8.6
-django-admin-sortable==2.1.8
-django-braces==1.14.0
-django-model-utils==1.4.0
-django-pipeline==1.6.14
+psycopg2-binary==2.9.5
+django-admin-sortable==2.3
+django-braces==1.15.0
+django-model-utils==4.3.1
+django-pipeline==2.1.0
 django-preferences==1.0.0
-django-role-permissions==2.2.0
+django-role-permissions==3.1.1
 
 raven==6.10.0
 django-sentry==1.13.5
@@ -12,12 +12,10 @@ django-sentry==1.13.5
 service_identity
 
 # igrac
-wagtail==2.9.3
-wagtailmenus==3.1.3
-openpyxl==3.0.5
+wagtail==4.2.1
+wagtailmenus==3.1.5
+openpyxl==3.0.10
 pyexcel-xls==0.7.0
 pyexcel-xlsx==0.6.0
 
-git+https://github.com/kartoza/geonode-mapstore-client.git@3.2.x
-# git+https://github.com/kartoza/django-mapstore-adapter.git@geonode_latest
-# git+https://github.com/kartoza/geonode-mapstore-client.git@2.0.16
+git+https://github.com/kartoza/geonode-mapstore-client.git@4.0.7
diff --git a/deployment/docker/uwsgi.conf b/deployment/docker/uwsgi.conf
index 25c377f..23944b9 100644
--- a/deployment/docker/uwsgi.conf
+++ b/deployment/docker/uwsgi.conf
@@ -18,5 +18,5 @@ logger = file:/var/log/uwsgi-errors.log
 #uid = 1000
 #gid = 1000
 memory-report = true
-harakiri = 1200
+harakiri = 3600
 # plugin = python36
diff --git a/django_project/core/api/layer.py b/django_project/core/api/layer.py
index ab11052..e39a3c0 100644
--- a/django_project/core/api/layer.py
+++ b/django_project/core/api/layer.py
@@ -1,7 +1,7 @@
 from django.http import Http404
 from rest_framework.views import APIView
 from rest_framework.response import Response
-from geonode.layers.models import Layer
+from geonode.layers.models import Dataset
 from core.serializer.attribute import AttributeSerializer
 
 
@@ -13,7 +13,8 @@ class LayerAttributeAPI(APIView):
 
     def get(self, request, alternate, *args):
         try:
-            layer = Layer.objects.get(alternate=alternate)
-            return Response(AttributeSerializer(layer.attribute_set.all(), many=True).data)
-        except Layer.DoesNotExist:
+            dataset = Dataset.objects.get(alternate=alternate)
+            return Response(AttributeSerializer(
+                dataset.attribute_set.all(), many=True).data)
+        except Dataset.DoesNotExist:
             raise Http404('Layer not found')
diff --git a/django_project/core/settings/base.py b/django_project/core/settings/base.py
index 2cd7cc3..794ad28 100644
--- a/django_project/core/settings/base.py
+++ b/django_project/core/settings/base.py
@@ -26,7 +26,7 @@
     'wagtail.images',
     'wagtail.search',
     'wagtail.admin',
-    'wagtail.core',
+    'wagtail',
     'wagtail.contrib.modeladmin',
     'wagtailmenus',
     'modelcluster',
@@ -47,12 +47,13 @@
     'django.contrib.auth.middleware.AuthenticationMiddleware',
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
     'django.middleware.security.SecurityMiddleware',
+    'whitenoise.middleware.WhiteNoiseMiddleware',
     'oauth2_provider.middleware.OAuth2TokenMiddleware',
+    'django_user_agents.middleware.UserAgentMiddleware',
     'geonode.base.middleware.MaintenanceMiddleware',
     'geonode.base.middleware.ReadOnlyMiddleware',  # a Middleware enabling Read Only mode of Geonode
 
     # Wagtail moddleware
-    'wagtail.core.middleware.SiteMiddleware',
     'wagtail.contrib.redirects.middleware.RedirectMiddleware',
 )
 
diff --git a/django_project/core/settings/prod.py b/django_project/core/settings/prod.py
index 61e3a09..a0af39c 100644
--- a/django_project/core/settings/prod.py
+++ b/django_project/core/settings/prod.py
@@ -29,3 +29,4 @@
 )
 
 DEFAULT_FILE_STORAGE = 'django.core.files.storage.FileSystemStorage'
+STATIC_URL = '/static/'
diff --git a/django_project/gwml2 b/django_project/gwml2
index 7f29998..ab6ab29 160000
--- a/django_project/gwml2
+++ b/django_project/gwml2
@@ -1 +1 @@
-Subproject commit 7f299980a4c1c135d7466b9aba254f1ee8620605
+Subproject commit ab6ab29dab917e87162ff01631eedfd46cc8aaf0
diff --git a/django_project/igrac/admin.py b/django_project/igrac/admin.py
index 0894a30..a7b83c8 100644
--- a/django_project/igrac/admin.py
+++ b/django_project/igrac/admin.py
@@ -1,7 +1,7 @@
 from adminsortable.admin import SortableAdmin
 from django.contrib import admin
 from django.utils.translation import ugettext_lazy as _
-from geonode.base.admin import set_user_and_group_layer_permission
+from geonode.base.admin import set_user_and_group_dataset_permission
 from geonode.people.admin import ProfileAdmin
 from geonode.people.models import Profile
 from preferences.admin import PreferencesAdmin
@@ -37,7 +37,7 @@ class IgracProfileAdmin(ProfileAdmin):
         'username', 'organization', 'profile',
         'first_name', 'last_name', 'email'
     )
-    actions = [set_user_and_group_layer_permission, make_active]
+    actions = [set_user_and_group_dataset_permission, make_active]
     fieldsets = (
         (None, {'fields': ('username', 'password')}),
         (_('Personal info'), {'fields': ('first_name', 'last_name', 'email')}),
diff --git a/django_project/igrac/api_views/__init__.py b/django_project/igrac/api_views/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/django_project/igrac/api_views/featured.py b/django_project/igrac/api_views/featured.py
new file mode 100644
index 0000000..6e46078
--- /dev/null
+++ b/django_project/igrac/api_views/featured.py
@@ -0,0 +1,67 @@
+from geonode.base.api.serializers import ResourceBaseSerializer
+from geonode.base.models import (
+    ResourceBase,
+)
+from geonode.geoapps.models import GeoApp
+from geonode.maps.models import Map
+from rest_framework import serializers
+from rest_framework.response import Response
+from rest_framework.views import APIView
+
+from igrac.models.map_slug import MapSlugMapping
+
+
+class MapFeaturedSerializer(ResourceBaseSerializer):
+    slug = serializers.SerializerMethodField()
+    detail_url = serializers.SerializerMethodField()
+
+    def get_slug(self, obj: ResourceBase):
+        map_slug = MapSlugMapping.objects.filter(map=obj).first()
+        if map_slug:
+            return map_slug.slug
+        return ''
+
+    def get_detail_url(self, obj: ResourceBase):
+        map_slug = MapSlugMapping.objects.filter(map=obj).first()
+        if map_slug:
+            return map_slug.slug
+        return ''
+
+    class Meta:
+        model = ResourceBase
+        name = ResourceBaseSerializer.Meta.name
+        view_name = ResourceBaseSerializer.Meta.view_name
+        fields = ResourceBaseSerializer.Meta.fields + ('slug',)
+
+
+class FeaturedMaps(APIView):
+    def get(self, request, *args):
+        featured_map = Map.objects.filter(
+            featured=True
+        ).order_by(
+            'mapslugmapping__order', 'id'
+        )
+        serializer = MapFeaturedSerializer(
+            featured_map,
+            many=True
+        )
+        resources = serializer.data
+        resources += ResourceBaseSerializer(
+            GeoApp.objects.filter(featured=True, resource_type='dashboard'),
+            many=True
+        ).data
+        resources += ResourceBaseSerializer(
+            GeoApp.objects.filter(featured=True, resource_type='geostory'),
+            many=True
+        ).data
+
+        return Response({
+            "links": {
+                "next": None,
+                "previous": None
+            },
+            "total": featured_map.count(),
+            "page": 1,
+            "page_size": 99,
+            "resources": resources
+        })
diff --git a/django_project/igrac/apps.py b/django_project/igrac/apps.py
index 3366e20..4389e05 100644
--- a/django_project/igrac/apps.py
+++ b/django_project/igrac/apps.py
@@ -7,3 +7,14 @@ class IgracConfig(AppConfig):
     def ready(self):
         import igrac.signals
         import igrac.monkeypatch
+        from django.conf import settings
+        geonode_mapstore_client_template_dir = ''
+        for template_dir in settings.TEMPLATES[0]['DIRS']:
+            if 'geonode_mapstore_client' in template_dir:
+                geonode_mapstore_client_template_dir = template_dir
+                settings.TEMPLATES[0]['DIRS'].remove(template_dir)
+                break
+        if geonode_mapstore_client_template_dir:
+            settings.TEMPLATES[0]['DIRS'].append(
+                geonode_mapstore_client_template_dir
+            )
diff --git a/django_project/igrac/static/css/base-igrac.css b/django_project/igrac/static/css/base-igrac.css
index 87de71f..c0fa53a 100644
--- a/django_project/igrac/static/css/base-igrac.css
+++ b/django_project/igrac/static/css/base-igrac.css
@@ -2,6 +2,13 @@ html {
     height: 100%;
 }
 
+:root {
+    --white: #fff;
+    --primary: #2c689c;
+    --secondary: #ff6b0d;
+    --primaryBold: #005198
+}
+
 body.igrac-home {
     padding-top: 51px;
     background: #f6f6f6;
@@ -58,6 +65,7 @@ body.igrac-home {
 
 .branding {
     height: 100%;
+    margin-right: 1rem !important;
 }
 
 .branding a {
@@ -67,7 +75,7 @@ body.igrac-home {
 
 .branding a img {
     height: 100%;
-    padding: 11px 0;
+    padding: 5px 0;
 }
 
 .navbar-nav > li > a {
@@ -116,6 +124,10 @@ body.igrac-home {
     z-index: 20;
 }
 
+h1, h2, h5 {
+    font-weight: 600 !important;
+}
+
 .banner-text h2 {
     font-size: 36px;
     margin-bottom: 20px;
@@ -353,8 +365,108 @@ body.igrac-home {
 
 .open-banner {
     float: right;
-    margin-right: 10px;
+    z-index: 1;
     display: none;
+    position: absolute;
+    right: 0;
+    margin-top: 20px;
+    margin-right: 20px;
+}
+
+.msgapi .btn-primary {
+    background: var(--white);
+    color: var(--primaryBold);
+    border: var(--white);
+}
+
+form .btn-primary {
+    color: #fff !important;
+    background-color: #2c689c !important;
+    border-color: #265a88 !important;
+}
+
+form .btn-primary:hover {
+    background-color: var(--secondary) !important;
+    box-shadow: unset !important;
+}
+
+form .row {
+    display: flex;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+}
+
+
+.footer-item {
+    color: var(--primaryBold)
+}
+
+.msgapi .btn-primary:hover,
+.msgapi .btn-primary:active,
+.msgapi .btn-primary:active:focus,
+.msgapi .btn-primary.active,
+.msgapi .btn-primary:active,
+.msgapi .open > .dropdown-toggle.btn-primary,
+.msgapi .open > .dropdown-toggle.btn-primary:focus,
+.dropdown-menu a:focus {
+    background-color: var(--secondary);
+    box-shadow: unset !important;
+}
+
+
+.msgapi .btn-primary:focus {
+    background-color: white;
+    color: var(--primaryBold);
+}
+
+.msgapi body,
+[data-ms2-container] {
+    font-family: sans-serif !important;
+    -ms-text-size-adjust: 100% !important;;
+    -webkit-text-size-adjust: 100% !important;;
+}
+
+.msgapi .gn-menu {
+    padding: 0;
+}
+
+.msgapi .gn-menu.gn-primary {
+    border-top: 1px solid #f2f0f0;
+    background: #fff;
+    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.23);
+    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.23);
+    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.23);
+}
+
+.msgapi .gn-menu .gn-menu-container {
+    background-color: white;
+}
+
+.msgapi .gn-menu-divider {
+    background-color: #f2f0f0;
+}
+
+.gn-search-bar-li {
+    padding-right: 1rem !important;
+}
+
+#gn-search-bar {
+    border-width: 1px;
+    box-shadow: unset;
+}
+
+.gn-user-menu-dropdown button {
+    padding: 0.25rem 0.5rem !important;
+    border-radius: 0 !important;
+}
+
+.gn-user-menu-dropdown button:hover,
+.gn-user-menu-dropdown button:focus {
+    background-color: var(--secondary) !important;
+}
+
+#gn-search-bar-apply:focus {
+    box-shadow: unset !important;
 }
 
 
@@ -426,4 +538,103 @@ body.igrac-home {
 
 .geostory-button-container .btn:hover, .geostory-button-container .btn:focus {
     color: #ff6b0d !important;
+}
+
+.home-menu a:hover {
+    background-color: white !important;
+    color: #ff6b0d !important;
+}
+
+.fa-home {
+    font-size: 1.4rem !important;
+}
+
+.dropdown-menu {
+    background-color: #2c689c !important;
+    border-top: 1px solid #2c689c !important;
+    border: unset !important;
+}
+.dropdown-menu li > a:hover,
+.dropdown-menu li > a:focus {
+    background-color: #ff6b0d !important;
+}
+
+.dropdown-menu a {
+    color: white !important;
+}
+
+.dropdown-menu .divider {
+    background-color: #204d74 !important;
+}
+
+/*.dropdown-submenu>.dropdown-menu {*/
+/*  top: 0;*/
+/*  left: 100%;*/
+/*  margin-top: -6px;*/
+/*  margin-left: -1px;*/
+/*}*/
+
+/*.dropdown-submenu:hover>.dropdown-menu {*/
+/*  display: block;*/
+/*}*/
+
+/*.dropdown-submenu>a:after {*/
+/*  display: block;*/
+/*  content: " ";*/
+/*  float: right;*/
+/*  width: 0;*/
+/*  height: 0;*/
+/*  border-color: transparent;*/
+/*  border-style: solid;*/
+/*  border-width: 5px 0 5px 5px;*/
+/*  border-left-color: #ccc;*/
+/*  margin-top: 5px;*/
+/*  margin-right: -10px;*/
+/*}*/
+
+/*.dropdown-submenu:hover>a:after {*/
+/*  border-left-color: #fff;*/
+/*}*/
+
+/*.dropdown-submenu.pull-left {*/
+/*  float: none;*/
+/*}*/
+
+/*.dropdown-submenu.pull-left>.dropdown-menu {*/
+/*  left: -100%;*/
+/*  margin-left: 10px;*/
+/*}*/
+.error-data {
+    text-align: center;
+    color: red;
+    padding: 2rem;
+}
+
+#wrap {
+    padding-top: 0 !important;
+    padding-bottom: 80px !important;
+    margin-top: 0 !important;
+}
+
+#gn-brand-navbar {
+    z-index: 1401 !important;
+    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.23);
+    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.23);
+    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.23)
+}
+
+#gn-brand-navbar .btn-primary {
+    padding: 0.9rem 0.5rem;
+}
+
+.nav-link:focus {
+    box-shadow: unset !important;
+}
+
+.menu-sidebar a {
+    outline: none !important;
+}
+
+.menu-sidebar a:focus {
+    text-decoration: unset;
 }
\ No newline at end of file
diff --git a/django_project/igrac/static/css/default.css b/django_project/igrac/static/css/default.css
index f4ef7f8..950f775 100644
--- a/django_project/igrac/static/css/default.css
+++ b/django_project/igrac/static/css/default.css
@@ -66,7 +66,12 @@ body {
     position: absolute;
     width: 100%;
     height: 100%;
-    background: #cad2d3;
+}
+
+.gn-homepage #container {
+    height: auto;
+    padding-bottom: 100px;
+    min-height: 60%;
 }
 
 .navbar {
@@ -157,12 +162,27 @@ body {
     display: block;
 }
 
-.navbar-nav .dropdown > .dropdown-menu {
-    margin-left: 15px;
+#gn-topbar > .dropdown > .dropdown-menu {
+    margin-left: 0 !important;
 }
 
-.navbar-nav > .dropdown > .dropdown-menu {
-    margin-left: 0 !important;
+#gn-topbar .dropdown-menu {
+    background-color: var(--primary);
+    border: 1px solid var(--primary);
+    color: var(--white);
+}
+
+#gn-topbar .dropdown-menu .divider {
+    background-color: #204d74;
+}
+
+#gn-topbar .dropdown-menu>li>a {
+    color: var(--white);
+}
+
+#gn-topbar .dropdown-menu>li>a:focus, #gn-topbar .dropdown-menu>li>a:hover {
+    background-color: var(--secondary);
+    color: var(--white);
 }
 
 #branding, .branding {
@@ -192,8 +212,8 @@ body {
 }
 
 .footer-wrapper {
-    background: rgba(255, 255, 255, 0.85);
-    height: 20px;
+    background-color: rgba(255, 255, 255, 0.85) !important;
+    height: 50px;
     position: fixed;
     bottom: 0;
     color: #2c689c;
@@ -221,9 +241,6 @@ body {
     line-height: 47px;
 }
 
-#ms-container {
-    top: 52px !important;
-}
 
 .navbar-nav .search input {
     border-color: lightgrey !important;
@@ -274,4 +291,50 @@ body {
 
 .pagination > li > a {
     height: 37px;
+}
+
+.gn-home-section .gn-footer-wrapper{
+    display: none;
+}
+
+.gn-home-section .gn-resource-action-buttons {
+    display: none;
+}
+
+.gn-home-section .gn-card-grid .gn-card-grid-container > ul li {
+    margin-top: 20px !important;
+}
+
+.msgapi .gn-resource-card .card-title a {
+    color: var(--primary);
+}
+
+.explore-viewer-title {
+    font-size: 30px !important;
+    font-weight: 700 !important;
+    margin: 25px 10px 15px !important;
+    color: var(--primaryBold) !important;
+}
+
+.gn-home-section .gn-card-description {
+    white-space: initial !important;
+}
+
+.gn-home-section .map-abstract {
+    height: 50px !important;
+    overflow-y: auto !important;
+}
+
+.gn-home-section .gn-resource-card .card-body {
+    pointer-events: unset;
+}
+
+.gn-home-section .gn-resource-card .card-img-top {
+    filter: grayscale(1);
+    opacity: 0.5
+}
+
+.gn-home-section .gn-resource-card:hover .card-img-top {
+    filter: unset;
+    opacity: 1;
 }
\ No newline at end of file
diff --git a/django_project/igrac/static/css/manual-page-style.css b/django_project/igrac/static/css/manual-page-style.css
index d5c4379..8d51b0c 100644
--- a/django_project/igrac/static/css/manual-page-style.css
+++ b/django_project/igrac/static/css/manual-page-style.css
@@ -31,16 +31,21 @@ body {
     margin-bottom: 22px;
     font-size: 14px;
     list-style: none;
-    background-color: #ececec;
+    background-color: #ececec!important;
     border-radius: 0;
 }
 
+.manual-content h1,
+.manual-content h2 {
+    font-size: 100% !important;
+}
+
 .manual-title {
-    font-size: 2em;
-    font-style: normal;
-    font-weight: 700;
-    color: #24619d;
-    line-height: 1;
+    font-size: 2em !important;
+    font-style: normal !important;
+    font-weight: 700 !important;
+    color: #24619d !important;
+    line-height: 1 !important;
 }
 
 .manual-intro {
@@ -141,7 +146,7 @@ body {
 }
 
 .manual-content {
-    padding: 25px;
+    padding: 25px !important;
     padding-bottom: 70px;
     padding-left: 35px;
     height: 100%;
@@ -196,4 +201,4 @@ ol ol, ul ol {
     height: 100%;
     padding-bottom: 56.49999999999999% !important;
 }
-}
+}
\ No newline at end of file
diff --git a/django_project/igrac/static/js/g3p-timeseries-chart.js b/django_project/igrac/static/js/g3p-timeseries-chart.js
index 4d19d89..ae0feea 100644
--- a/django_project/igrac/static/js/g3p-timeseries-chart.js
+++ b/django_project/igrac/static/js/g3p-timeseries-chart.js
@@ -169,7 +169,7 @@ let TimeseriesChartObj = function (id, identifier, $loading, xlabel = "", ylabel
         if (!chartData || chartData.length === 0) {
             that.$loading.hide();
             $(`#g3p-${this.id}-chart`).html(
-                '<div style="text-align: center; color: red">No data found</div>');
+                '<div class="error-data">No data found</div>');
             return
         }
         if (xlabel === "") {
@@ -213,7 +213,7 @@ let TimeseriesChartObj = function (id, identifier, $loading, xlabel = "", ylabel
                 error: function (error, textStatus, request) {
                     that.$loading.hide();
                     $(`#g3p-${this.id}-chart`).html(
-                        '<div style="text-align: center; color: red">No data found</div>')
+                        '<div class="error-data">No data found</div>')
                 }
             })
         }
diff --git a/django_project/igrac/templates/account/signup.html b/django_project/igrac/templates/account/signup.html
index 0d2a1c3..e7b63d8 100644
--- a/django_project/igrac/templates/account/signup.html
+++ b/django_project/igrac/templates/account/signup.html
@@ -1,7 +1,7 @@
 {% extends "account/base.html" %}
 
 {% load i18n %}
-{% load staticfiles %}
+{% load static %}
 {% load bootstrap_tags %}
 {% load igrac_bootstrap_tags %}
 {% load account socialaccount %}
diff --git a/django_project/igrac/templates/apps/app_detail.html b/django_project/igrac/templates/apps/app_detail.html
index 20abc3a..9891e72 100644
--- a/django_project/igrac/templates/apps/app_detail.html
+++ b/django_project/igrac/templates/apps/app_detail.html
@@ -1,7 +1,7 @@
 {% extends "apps/app_base.html" %}
 {% load i18n %}
 {% load l10n %}
-{% load staticfiles %}
+{% load static %}
 {% load dialogos_tags %}
 {% load pinax_ratings_tags %}
 {% load bootstrap_tags %}
diff --git a/django_project/igrac/templates/base.html b/django_project/igrac/templates/base.html
index 0641a4f..ea7d74b 100644
--- a/django_project/igrac/templates/base.html
+++ b/django_project/igrac/templates/base.html
@@ -1,865 +1,132 @@
-<!-- -----------------------------------------------------------------
--
-- Copyright (C) 2019 OSGeo
--
-- This program is free software: you can redistribute it and/or modify
-- it under the terms of the GNU General Public License as published by
-- the Free Software Foundation, either version 3 of the License, or
-- (at your option) any later version.
--
-- This program is distributed in the hope that it will be useful,
-- but WITHOUT ANY WARRANTY; without even the implied warranty of
-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-- GNU General Public License for more details.
--
-- You should have received a copy of the GNU General Public License
-- along with this program. If not, see <http://www.gnu.org/licenses/>.
--
----------------------------------------------------------------------- -->
-
-{% load i18n avatar_tags %}
-{% load static from staticfiles %}
-{% load account socialaccount %}
-{% load base_tags %}
-{% load menu_tags %}
-{% load gwml2_menu %}
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta Http-Equiv="Cache-Control" Content="no-cache">
-    <meta Http-Equiv="Pragma" Content="no-cache">
-    <meta Http-Equiv="Expires" Content="0">
-    <meta Http-Equiv="Pragma-directive: no-cache">
-    <meta Http-Equiv="Cache-directive: no-cache">
-
-    <title>{% block title %}{{ SITE_NAME }}{% endblock %}</title>
-
-    <link rel="shortcut icon" href="{% static 'img/favicon.ico' %}"/>
-    <link href="{% static "lib/css/ol.css" %}" rel="stylesheet"/>
-    <script src="{% static "lib/js/ol.js" %}"></script>
-
-    {% block head %}
-
-        <script>
-            function setCookie(cname, cvalue, exdays) {
-                var d = new Date();
-                d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
-                var expires = "expires=" + d.toGMTString();
-                document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
+{% extends "base.html" %}
+{% load client_version %}
+{% load static %}
+
+{% block html_class %}msgapi{% endblock %}
+{% block head %}
+    {% if DEBUG_STATIC %}
+        <link href="{% static "lib/css/jquery.dataTables.css" %}"
+              rel="stylesheet"/>
+        <link href="{% static "lib/css/select2.css" %}" rel="stylesheet"/>
+        <link href="{% static "lib/css/bootstrap.css" %}" rel="stylesheet"/>
+        <link href="{% static "lib/css/bootstrap-treeview.css" %}"
+              rel="stylesheet"/>
+        <link href="{% static "lib/css/jquery-ui.theme.min.css" %}"
+              rel="stylesheet"/>
+        <link href="{% static "lib/css/jquery-ui.structure.min.css" %}"
+              rel="stylesheet"/>
+        <link href="{% static "lib/css/bootstrap-treeview.css" %}"
+              rel="stylesheet"/>
+    {% else %}
+        <link href="{% static "lib/css/assets.min.css" %}" rel="stylesheet"/>
+    {% endif %}
+    <link href="{% static "geonode/css/base.css" %}" rel="stylesheet"/>
+    <link rel='stylesheet' id='cookie-law-info-css'
+          href="{% static "geonode/css/cookie-law-info/cookie-law-info-public.css" %}"
+          type='text/css' media='all'/>
+    <link rel='stylesheet' id='cookie-law-info-gdpr-css'
+          href="{% static "geonode/css/cookie-law-info/cookie-law-info-gdpr.css" %}"
+          type='text/css' media='all'/>
+
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap"
+          rel="stylesheet">
+    <link href="{% static 'mapstore/dist/themes/geonode.css' %}?{% client_version %}"
+          rel="stylesheet"/>
+    <link href="{% static 'lib/css/bootstrap-select.css' %}?{% client_version %}"
+          rel="stylesheet"/>
+    <link href="{% static 'css/default.css' %}?{% client_version %}"
+          rel="stylesheet"/>
+    <link href="{% static 'css/base-igrac.css' %}?{% client_version %}"
+          rel="stylesheet"/>
+    <link rel="shortcut icon" href="{% static "/img/favicon.ico" %}"/>
+    {% include './geonode-mapstore-client/snippets/custom_theme.html' %}
+    <style type="text/css">[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak, .ng-hide:not(.ng-hide-animate) {
+        display: none !important;
+    }</style>
+    <style type="text/css">
+        {% if custom_theme.logo %}
+            .navbar-brand {
+                background-image: url({{ custom_theme.logo.url }});
+                background-repeat: no-repeat;
+                background-position: center;
+                background-size: contain;
             }
+        {% endif %}
 
-            function getCookie(cname) {
-                var name = cname + "=";
-                var decodedCookie = decodeURIComponent(document.cookie);
-                var ca = decodedCookie.split(';');
-                for (var i = 0; i < ca.length; i++) {
-                    var c = ca[i];
-                    while (c.charAt(0) == ' ') {
-                        c = c.substring(1);
-                    }
-                    if (c.indexOf(name) == 0) {
-                        return c.substring(name.length, c.length);
-                    }
-                }
-                return "";
+        {% if custom_theme.jumbotron_color %}
+            .home .jumbotron {
+                background-color: {{ custom_theme.jumbotron_color }}
             }
+        {% endif %}
 
-            function delete_cookie(name) {
-                document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
+        {% if custom_theme.jumbotron_title_color %}
+            .home .jumbotron h1,
+            .home .jumbotron h2,
+            .home .jumbotron h3 {
+                color: {{ custom_theme.jumbotron_title_color }}
             }
-
-            {# Google analytic #}
-            {% if GOOGLE_ANALYTIC_KEY %}
-                (function (i, s, o, g, r, a, m) {
-                    i['GoogleAnalyticsObject'] = r;
-                    i[r] = i[r] || function () {
-                        (i[r].q = i[r].q || []).push(arguments)
-                    }, i[r].l = 1 * new Date();
-                    a = s.createElement(o),
-                        m = s.getElementsByTagName(o)[0];
-                    a.async = 1;
-                    a.src = g;
-                    m.parentNode.insertBefore(a, m)
-                })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
-
-                ga('create', "{{ GOOGLE_ANALYTIC_KEY }}", 'auto');
-                ga('send', 'pageview', { 'page': location.pathname + location.search + location.hash });
-            {% endif %}
-        </script>
-
-        {% if DEBUG_STATIC %}
-            <link href="{% static "lib/css/jquery.dataTables.css" %}" rel="stylesheet"/>
-            <link href="{% static "lib/css/select2.css" %}" rel="stylesheet"/>
-            <link href="{% static "lib/css/bootstrap.css" %}" rel="stylesheet"/>
-            <link href="{% static "lib/css/bootstrap-treeview.css" %}" rel="stylesheet"/>
-            <link href="{% static "lib/css/jquery-ui.theme.css" %}" rel="stylesheet"/>
-            <link href="{% static "lib/css/jquery-ui.structure.css" %}" rel="stylesheet"/>
-            <link href="{% static "lib/css/bootstrap-treeview.css" %}" rel="stylesheet"/>
-        {% else %}
-            <link href="{% static "lib/css/assets.min.css" %}" rel="stylesheet"/>
         {% endif %}
 
-        <link href="{% static "geonode/css/base.css" %}" rel="stylesheet"/>
-        <link href="{% static "css/default.css" %}" rel="stylesheet"/>
-        <link href="{% static "css/base-igrac.css" %}" rel="stylesheet"/>
-
-        <link rel='stylesheet' id='cookie-law-info-css' href="{% static "geonode/css/cookie-law-info/cookie-law-info-public.css" %}" type='text/css' media='all'/>
-        <link rel='stylesheet' id='cookie-law-info-gdpr-css' href="{% static "geonode/css/cookie-law-info/cookie-law-info-gdpr.css" %}" type='text/css' media='all'/>
-
-        <style type="text/css">[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak, .ng-hide:not(.ng-hide-animate) {
-            display: none !important;
-        }</style>
-        <style type="text/css">
-            /* Additional styles by custom themes */
-            {% if custom_theme.body_color %}
-                body {
-                    background: {{ custom_theme.body_color }};
-                {% if custom_theme.body_text_color %}
-                    color: {{ custom_theme.body_text_color }};
-                {% endif %}
-                }
-
-                .home #partners {
-                    background: {{ custom_theme.body_color }};
-                    padding: 2em 0;
-                    text-align: center;
-                }
-            {% endif %}
-
-            {% if custom_theme.navbar_color %}
-                .home .navbar-inverse, .navbar-inverse {
-                    background-color: {{ custom_theme.navbar_color }};
-                }
-            {% endif %}
-
-            {% if custom_theme.navbar_text_color %}
-                .navbar-inverse .navbar-nav > li > a {
-                    color: {{ custom_theme.navbar_text_color }};
-                    font-weight: 600;
-                    padding-top: 25px;
-                    padding-bottom: 25px;
-                }
-            {% endif %}
-
-            {% if custom_theme.navbar_text_hover %}
-                .navbar-inverse .navbar-nav > li > a:hover {
-                    background-color: {{ custom_theme.navbar_text_hover }};
-                }
-            {% endif %}
-
-            {% if custom_theme.navbar_text_hover_focus %}
-                .navbar-inverse .navbar-nav > .open > a,
-                .navbar-inverse .navbar-nav > .open > a:hover,
-                .navbar-inverse .navbar-nav > .open > a:focus {
-                    background-color: {{ custom_theme.navbar_text_hover_focus }};
-                }
-            {% endif %}
-
-            {% if custom_theme.navbar_dropdown_menu %}
-                .navbar-nav .dropdown-menu {
-                    background-color: {{ custom_theme.navbar_dropdown_menu }};
-                    border-top: 1px solid{{ custom_theme.navbar_dropdown_menu }};
-                }
-            {% endif %}
-
-            {% if custom_theme.navbar_dropdown_menu_text %}
-                .navbar-nav .dropdown-menu a {
-                    color: {{ custom_theme.navbar_dropdown_menu_text }};
-                }
-            {% endif %}
-
-            {% if custom_theme.navbar_dropdown_menu_hover %}
-                .navbar-nav .dropdown-menu li a:hover {
-                    background-color: {{ custom_theme.navbar_dropdown_menu_hover }};
-                    color: {{ custom_theme.navbar_dropdown_menu_text }};
-                }
-            {% endif %}
-
-            {% if custom_theme.navbar_dropdown_menu_divider %}
-                .navbar-nav .dropdown-menu .divider {
-                    background-color: {{ custom_theme.navbar_dropdown_menu_divider }};
-                }
-            {% endif %}
-
-            {% if custom_theme.logo %}
-                .navbar-brand {
-                    background-image: url({{ custom_theme.logo.url }});
-                    background-repeat: no-repeat;
-                    background-position: center;
-                    background-size: contain;
-                }
-            {% endif %}
-
-            {% if custom_theme.jumbotron_color %}
-                .home .jumbotron {
-                    background-color: {{ custom_theme.jumbotron_color }}
-                }
-            {% endif %}
-
-            {% if custom_theme.jumbotron_title_color %}
-                .home .jumbotron h1,
-                .home .jumbotron h2,
-                .home .jumbotron h3 {
-                    color: {{ custom_theme.jumbotron_title_color }}
-                }
-            {% endif %}
-
-            {% if custom_theme.jumbotron_text_color %}
-                .home .jumbotron p {
-                    color: {{ custom_theme.jumbotron_text_color }};
-                    font-weight: normal;
-                    font-size: xx-large;
-                    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
-                }
-            {% endif %}
-
-            {% if custom_theme.jumbotron_welcome_hide %}
-                .home .jumbotron .container {
-                    visibility: hidden;
-                }
-            {% endif %}
-
-            {% if custom_theme.jumbotron_bg %}
-                .home .jumbotron .container {
-                    position: relative;
-                    z-index: 1;
-                }
-                .home .jumbotron:after {
-                    content: "";
-                    background-image: url({{ custom_theme.jumbotron_bg.url }});
-                    background-repeat: no-repeat;
-                    background-position: center;
-                    background-size: cover;
-                {% if not custom_theme.jumbotron_welcome_hide %}
-                    opacity: 0.5;
-                {% endif %}
-                    top: 0;
-                    left: 0;
-                    bottom: 0;
-                    right: 0;
-                    position: absolute;
-                    z-index: 0;
-                }
-            {% endif %}
-
-            {% if custom_theme.search_bg_color or custom_theme.search_title_color %}
-                .home .big-search {
-                    background: {{ custom_theme.search_bg_color }};
-                    color: {{ custom_theme.search_title_color }};
-                    padding-bottom: 3em;
-                    padding-top: 1em;
-                }
-                .home .big-search .btn-default {
-                    background: transparent;
-                    border: none;
-                    color: {{ custom_theme.search_link_color }};
-                }
-            {% endif %}
-
-            {% if custom_theme.copyright_color %}
-                .footer-copyright {
-                    background-color: {{ custom_theme.copyright_color }};
-                }
-            {% endif %}
-
-            {% if custom_theme.footer_bg_color or custom_theme.footer_text_color or custom_theme.footer_href_color %}
-                footer {
-                    background-color: {{ custom_theme.footer_bg_color }};
-                    color: {{ custom_theme.footer_text_color }};
-                    padding: 1.5em;
-                }
-                footer a {
-                    color: {{ custom_theme.footer_href_color }};
-                }
-            {% endif %}
-        </style>
-        {% block extra_head %}
-        {% endblock %}
-    {% endblock %}
-    <!--[if IE]>
-      <script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
-      <style>
-        #ieflag{
-            display: block !important;
-            height: 150px;
-            text-align: center;
-        }
-      </style>
-    <![endif]-->
-    <link rel="search" type="application/opensearchdescription+xml" href="{{ SITEURL }}catalogue/opensearch" title="{% trans "GeoNode Search" %}"/>
-
-    <script>
-        var siteUrl = '{{ SITEURL }}'.replace(/\/?$/, '/');
-        var staticUrl = '{% static '' %}';
-
-        function setCookie(cname, cvalue, exdays) {
-            var d = new Date();
-            d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
-            var expires = "expires=" + d.toGMTString();
-            document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
-        }
-
-        function getCookie(cname) {
-            var name = cname + "=";
-            var decodedCookie = decodeURIComponent(document.cookie);
-            var ca = decodedCookie.split(';');
-            for (var i = 0; i < ca.length; i++) {
-                var c = ca[i];
-                while (c.charAt(0) == ' ') {
-                    c = c.substring(1);
-                }
-                if (c.indexOf(name) == 0) {
-                    return c.substring(name.length, c.length);
-                }
+        {% if custom_theme.jumbotron_text_color %}
+            .home .jumbotron p {
+                color: {{ custom_theme.jumbotron_text_color }};
+                font-weight: normal;
+                font-size: xx-large;
+                font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
             }
-            return "";
-        }
-
-        function delete_cookie(name) {
-            document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
-        }
-    </script>
-
-    <!-- Autocomplete script for input boxes -->
-    <script src="{% static "geonode/js/search/autocomplete.js" %}"></script>
+        {% endif %}
 
-    <script type="text/javascript">
-        function thumbnailFeedbacks(data, status) {
-            try {
-                $("#_thumbnail_feedbacks").find('.modal-title').text(status);
-                $("#_thumbnail_feedbacks").find('.modal-body').text(data);
-                $("#_thumbnail_feedbacks").modal("show");
-            } catch (err) {
-                console.log(err);
-            } finally {
-                return true;
+        {% if custom_theme.jumbotron_welcome_hide %}
+            .home .jumbotron .container {
+                visibility: hidden;
             }
-        }
-    </script>
+        {% endif %}
 
-    {% block additional_head %}
+        {% if custom_theme.jumbotron_bg %}
+            .home .jumbotron .container {
+                position: relative;
+                z-index: 1;
+            }
+            .home .jumbotron:after {
+                content: "";
+                background-image: url({{ custom_theme.jumbotron_bg.url }});
+                background-repeat: no-repeat;
+                background-position: center;
+                background-size: cover;
+            {% if not custom_theme.jumbotron_welcome_hide %}
+                opacity: 0.5;
+            {% endif %}
+                top: 0;
+                left: 0;
+                bottom: 0;
+                right: 0;
+                position: absolute;
+                z-index: 0;
+            }
+        {% endif %}
+    </style>
+    {% block extra_head %}
     {% endblock %}
-
-</head>
-
-<body class="{% block body_class %}{% endblock %}">
-<!-- Navbar -->
-{% block header %}
-    <nav class="navbar navbar-fixed-top" role="navigation">
-        <div class="container" style="width: 100%">
-            <div class="navbar-header">
-                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
-                    <i class="fa fa-navicon fa-lg"></i>
-                </button>
-                <div id="branding">
-                    <a class="logo" href="/"><i class="fa fa-home" aria-hidden="true"></i></a>
-                </div>
-            </div>
-            <div id="navbar" class="navbar-collapse collapse">
-                <ul class="nav navbar-nav toolbar">
-                    {% block tabs %}
-
-                        <li id="nav_layers">
-                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{% trans "Data" %}<i class="fa fa-angle-down fa-lg"></i></a>
-                            <ul class="dropdown-menu">
-                                <li><a href="{% url "layer_browse" %}">
-                                    {% trans "Map Layers &nbsp;" %}</a></li>
-                                <li><a href="{% url "document_browse" %}">{% trans "Documents" %}</a></li>
-                                {% if user.is_authenticated %}
-                                    <li><a href="{% url "services" %}">{% trans "Remote Services" %}</a></li>
-                                {% endif %}
-                                {% if user.is_authenticated and not READ_ONLY_MODE %}
-                                    <li role="separator" class="divider"></li>
-                                    <li><a href="{% url "layer_upload" %}">{% trans "Upload Map Layers" %}</a></li>
-                                    {% if USE_GEOSERVER and CREATE_LAYER %}
-                                        <li><a href="{% url "layer_create" %}">{% trans "Create Map Layer" %}</a></li>
-                                    {% endif %}
-                                    <li><a href="{% url "document_upload" %}">{% trans "Upload Document" %}</a></li>
-                                {% endif %}
-                                {% if user.is_superuser or user.is_staff %}
-                                    {% if not READ_ONLY_MODE %}
-                                        <li><a href="{% url "register_service" %}">{% trans "Add Remote Service" %}</a></li>
-                                    {% endif %}
-                                {% endif %}
-                                <li role="separator" class="divider"></li>
-                                <li><a href="/view/well-and-monitoring-data">{% trans "Well and Monitoring Data" %}</a></li>
-                                {% if user.is_authenticated and not READ_ONLY_MODE %}
-                                    {% allow_to_edit user as allow %}
-                                    {% if allow %}
-                                        <li class="dropdown-submenu">
-                                            <a class="btn-submenu" tabindex="-1" href="#" style="position: relative; display: inline-block">
-                                                {% trans "Upload Well and Monitoring Data" %} &nbsp;&nbsp;
-                                                <i class="fa fa-angle-right fa-lg pull-right" aria-hidden="true" style="position: absolute; top: 6px; right: 10px;"></i>
-                                            </a>
-                                            <ul class="dropdown-menu dropdown-sub-menu">
-                                                <li><a tabindex="-1" href="{% url "well_create" %}">{% trans "Add Record" %}</a></li>
-                                                <li><a tabindex="-1" href="{% url "well_upload_view" %}">{% trans "Batch Upload" %}</a></li>
-                                            </ul>
-                                        </li>
-                                    {% endif %}
-                                {% endif %}
-                            </ul>
-                        </li>
-                        <li id="nav_maps">
-                            {% if user.is_authenticated %}
-                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{% trans "Map Viewers" %}<i class="fa fa-angle-down fa-lg"></i></a>
-                                <ul class="dropdown-menu">
-                                    <li><a href="{% url "maps_browse" %}">{% trans "Explore Map Viewers" %}</a></li>
-                                    {% if not READ_ONLY_MODE %}
-                                        <li><a href="{% url "new_map" %}">{% trans "Create Map Viewer" %}</a></li>
-                                    {% endif %}
-                                </ul>
-                            {% else %}
-                                <a href="{% url "maps_browse" %}">{% trans "Map Viewers" %}</a>
-                            {% endif %}
-                        </li>
-                        <li>
-                            <a href="/apps">{% trans "GeoStories" %}</a>
-                        </li>
-                        {% if user.is_authenticated %}
-                            <li>
-                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{% trans "Users" %}<i class="fa fa-angle-down fa-lg"></i></a>
-                                <ul class="dropdown-menu">
-                                    <li><a href="{% url "profile_browse" %}">{% trans "People" %}</a></li>
-                                    <li><a href="{% url "group_list" %}">{% trans "Groups" %}</a></li>
-                                    <li><a href="{% url "group_category_list" %}">{% trans "Group Categories" %}</a></li>
-                                    {% if perms.announcements.can_manage %}
-                                        <li><a href="{% url "announcements_list" %}">{% trans "Announcements" %}</a></li>
-                                    {% endif %}
-                                    {% if user.is_authenticated and not READ_ONLY_MODE %}
-                                        <li role="separator" class="divider"></li>
-                                        <li><a href="{% url "geonode.invitations:geonode-send-invite" %}">{% trans "Invite Users" %}</a></li>
-                                    {% endif %}
-                                    {% if user.is_superuser and not READ_ONLY_MODE %}
-                                        <li><a href="{{ SITEURL }}admin/people/profile/add/">{% trans "Add User" %}</a></li>
-                                        <li><a href="{% url "group_create" %}">{% trans "Create Group" %}</a></li>
-                                    {% endif %}
-                                </ul>
-                            </li>
-                        {% endif %}
-                        {% if preferences.SitePreference.manual_page_link %}
-                            <li class="nav-item active">
-                                <a class="nav-link"
-                                   href="{{ preferences.SitePreference.manual_page_link }}">About</a>
-                            </li>
-                        {% endif %}
-                        {% block extra_tab %}
-
-                        {% endblock %}
-
-                    {% endblock %}
-
-                </ul>
-                <ul class="nav navbar-nav navbar-right">
-
-                    {% block my_extra_right_tab %}
-
-                        {% render_nav_menu 'TOPBAR_MENU' %}
-
-                    {% endblock my_extra_right_tab %}
-
-                    <li>
-                        <div class="navbar-header branding">
-                            <a class="logo" href="https://www.un-igrac.org/" target="_blank"><img src="/static/img/logo-small.svg" width="100" height="27" alt="logo"/></a>
-                        </div>
-                    </li>
-                    <li>
-                        <div class="search">
-                            <form id="search" action="{% url "search" %}">
-                                <span class="fa fa-search"></span>
-                                <div id="search-container" class="autocomplete-input">
-                                    {% if HAYSTACK_SEARCH %}
-                                        <input autocomplete="off" id="search_input" type="text" placeholder="{% trans 'Search' %}" name="q">
-                                        <input type="hidden" name="abstract__icontains" id="search_abstract_input" placeholder="{% trans 'Search' %}">
-                                        <input type="hidden" name="purpose__icontains" id="search_purpose_input" placeholder="{% trans 'Search' %}">
-                                        <input type="hidden" name="f_method" id="filtering_type" value="or">
-                                    {% else %}
-                                        <input autocomplete="off" type="text" name="title__icontains" id="search_input" placeholder="{% trans 'Search' %}">
-                                        <input type="hidden" name="abstract__icontains" id="search_abstract_input" placeholder="{% trans 'Search' %}">
-                                        <input type="hidden" name="purpose__icontains" id="search_purpose_input" placeholder="{% trans 'Search' %}">
-                                        <input type="hidden" name="f_method" id="filtering_type" value="or">
-                                    {% endif %}
-                                </div>
-                            </form>
-                        </div>
-                    </li>
-                    {% if not user.is_authenticated and ACCOUNT_OPEN_SIGNUP and not READ_ONLY_MODE %}
-                        <li><a href="{% url "account_signup" %}">{% trans "Register" %}</a></li>
-                    {% endif %}
-                    {% if user.is_authenticated %}
-                        <li>
-                            <a href="#" class="dropdown-toggle avatar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
-                                {% autoescape off %}{% avatar user 40 %}{% endautoescape %}
-                                {% with full_name=user.first_name|add:' '|add:user.last_name %}
-                                    {% if full_name.strip %}
-                                        {{ full_name | truncatechars:20 }}
-                                    {% else %}
-                                        {{ user.username | truncatechars:20 }}
-                                    {% endif %}
-                                {% endwith %}
-                                <i class="fa fa-angle-down fa-lg"></i>
-                            </a>
-                            <ul class="dropdown-menu">
-                                <li><a href="{{ user.get_absolute_url }}">{% trans "Profile" %}</a></li>
-                                <li><a href="{% url "recent-activity" %}">{% trans "Recent Activity" %}</a></li>
-                                {% if FAVORITE_ENABLED and user.is_authenticated %}
-                                    <li><a href="{% url "favorite_list" %}">{% trans "Favorites" %}</a></li>
-                                {% endif %}
-                                <li><a href="{% url "messages_inbox" %}">{% trans "Inbox" %}</a></li>
-
-                                {% is_admin user as allow %}
-                                {% if allow %}
-                                    <li><a href="{% url "organisation_list" %}">{% trans "Organisation" %}</a></li>
-                                {% endif %}
-
-                                <li><a href="{% url "well_download_request" %}">{% trans "Download Well Data" %}</a></li>
-                                {% if user.is_superuser or user.is_staff %}
-                                    <li role="separator" class="divider"></li>
-                                    <li><a href="{% url "admin:index" %}">{% trans "Admin" %}</a></li>
-                                    {% if 'geonode.geoserver' in INSTALLED_APPS %}
-                                        <li><a href="{{ OGC_SERVER.default.WEB_UI_LOCATION }}">GeoServer</a></li>
-                                    {% endif %}
-                                    {% if USE_MONITORING %}
-                                        <li role="separator" class="divider"></li>
-                                        <li><a href="{% url "monitoring:index" %}">{% trans "Monitoring & Analytics" %}</a></li>
-                                    {% endif %}
-                                {% endif %}
-
-                                {% if perms.wagtailadmin.access_admin %}
-                                    {% if not user.is_superuser and not user.is_staff %}
-                                        <li role="separator" class="divider"></li>
-                                    {% endif %}
-                                    <li><a href="/cms/">{% trans "Wagtail Admin" %}</a></li>
-                                {% endif %}
-
-                                <li role="separator" class="divider"></li>
-                                <li><a href="{% url "help" %}">{% trans "Help" %}</a></li>
-                                <li role="separator" class="divider"></li>
-                                <li><a href="{{ SITEURL }}account/logout/">{% trans "Log out" %}</a></li>
-                            </ul>
-                        </li>
-                    {% else %}
-                        <li><a href="#" data-toggle="modal" data-target="#SigninModal" role="button">{% trans "Sign in" %} </a></li>
-                    {% endif %}
-                </ul>
-            </div> <!--/.nav-collapse -->
-        </div>
-    </nav>
-{% endblock header %}
-<!-- End of Navbar -->
-
-<div class="alert alert-danger alert-dismissible" role="alert" id="ieflag" style="display:none">
-    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-    <h1>{% trans "You are using an outdated browser that is not supported by GeoNode." %}</h1>
-    <p>{% trans "Please use a <strong>modern browser</strong> like Mozilla Firefox, Google Chrome or Safari." %}</p>
-</div>
-
-{% block banner %}
 {% endblock %}
 
-<div id="wrap">
-    {% block middle %}
-        <div class="container">
-            {% include "_status_message.html" %}
-            {% include "_announcements.html" %}
-            {% include "_messages.html" %}
-            {% block body_outer %}
-                <div class="row">
-                    <div class="col-md-8">
-                        {% block body %}{% endblock %}
-                    </div>
-                    <div class="col-md-4">
-                        {% block sidebar %}{% endblock %}
-                    </div>
-                </div>
-            {% endblock %}
-        </div>
-    {% endblock middle %}
+{% block body_extra_class %}gn-legacy gn-theme {% if request.user_agent.is_mobile %}gn-mobile{% else %}gn-desktop{% endif %}{% endblock %}
 
-    {% block extra_mainbody %}
-    {% endblock extra_mainbody %}
-
-</div>
-
-{% block monitoring %}
+{% block header %}
+{% include './geonode-mapstore-client/snippets/header.html' %}
 {% endblock %}
 
 {% block footer %}
-    <div class="footer-wrapper">
-        {% if IGRAC_VERSION %}
-            <div class="footer-item" style="position: absolute; top: 8px; left: 7px;">{% trans "Version" %} <a href="{{ IGRAC_VERSION.url }}">{{ IGRAC_VERSION.name }}</a></div>
-        {% endif %}
-        <center>
-            <div class="footer-item">{% trans "Brought to you by" %}&nbsp;</div>
-            <a class="footer-item" href="https://www.un-igrac.org/" target="_blank"><img src="/static/img/logo-small.png" width="50" alt="logo" style="vertical-align: bottom"/></a>
-            <div class="footer-item" style="padding-left: 15px">{% trans "Web site developed by" %}&nbsp;</div>
-            <a class="footer-item" href="https://kartoza.com/" target="_blank"><img src="/static/img/kartoza-icon.png" height="23" alt="kartoza_logo"/></a>
-        </center>
-        {#  form for change language #}
-        <form id="lang-form" class="form-inline" action="/i18n/setlang/" method="post"
-              style="width: 300px;
-                position: absolute;
-                top: 8px;
-                right: 7px;">
-            {% csrf_token %}
-            <select id="lang-select" class="col-md-6 pull-right" name="language" onchange="changeLanguage($(this).val())" style="font-size: 12px; height: 24px;">
-                {% for lang in LANGUAGES %}
-                    <option value="{{ lang.0 }}" {% ifequal LANGUAGE_CODE lang.0 %} selected="selected"{% endifequal %}>
-                        {{ lang.1 }}
-                    </option>
-                {% endfor %}
-            </select>
-        </form>
-    </div>
+{% include './geonode-mapstore-client/snippets/footer.html' %}
 {% endblock %}
 
-{% block additional_footer %}{% endblock %}
-
-<!-- Modal must stay outside the navbar -->
-{% if not user.is_authenticated %}
-    <div class="modal fade" id="SigninModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-        <div class="modal-dialog modal-sm">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">{% trans "Close" %}</span></button>
-                    <h4 class="modal-title" id="myModalLabel">{% trans "Sign in" %}</h4>
-                </div>
-                <form class="form-signin" role="form" action="{% url "account_login" %}?next={{ request.path }}" method="post">
-                    <div class="modal-body">
-                        {% csrf_token %}
-                        {% get_providers as socialaccount_providers %}
-                        {% if socialaccount_providers %}
-                            {% include "socialaccount/snippets/provider_list.html" with process="login" %}
-                            {% include "socialaccount/snippets/login_extra.html" %}
-                            <hr>
-                        {% endif %}
-                        <div class="form-group">
-                            <label for="id_username" class="sr-only">{% trans "Username" %}:</label>
-                            <input id="id_username" class="form-control" name="login" placeholder="{% trans "Username" %}" type="text"/>
-                        </div>
-                        <div class="form-group">
-                            <label for="id_password" class="sr-only">{% trans "Password" %}:</label>
-                            <input id="id_password" class="form-control" name="password" placeholder="{% trans "Password" %}" type="password" autocomplete="off"/>
-                        </div>
-                        <label class="checkbox">
-                            <input type="checkbox"/> {% trans "Remember Me" %}
-                        </label>
-                        <p>
-                            <a href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a>
-                        </p>
-                    </div>
-                    <div class="modal-footer">
-                        <button type="submit" class="btn btn-primary btn-block">{% trans "Sign in" %}</button>
-                    </div>
-                </form>
-            </div>
-        </div>
-    </div>
-{% endif %}
-<!-- End of Modal -->
-
-{% if DEBUG_STATIC %}
-    <script src="{% static "lib/js/jquery.js" %}"></script>
-    <script src="{% static "lib/js/jquery.dataTables.js" %}"></script>
-    <script src="{% static "lib/js/bootstrap-treeview.js" %}"></script>
-    <script src="{% static "lib/js/bootstrap-tokenfield.js" %}"></script>
-    <script src="{% static "lib/js/fastselect.standalone.js" %}"></script>
-    <script src="{% static "lib/js/select2.full.js" %}"></script>
-    <script src="{% static "lib/js/jquery.timeago.js" %}"></script>
-    <script src="{% static "lib/js/jq-ajax-progress.js" %}"></script>
-    <script src="{% static "lib/js/jquery-ui.js" %}"></script>
-    <script src="{% static "lib/js/jquery.raty.js" %}"></script>
-    <script src="{% static "lib/js/bootstrap.js" %}"></script>
-    <script src="{% static "lib/js/moment-with-locales.js" %}"></script>
-    <script src="{% static "lib/js/bootstrap-datetimepicker.js" %}"></script>
-    <script src="{% static "lib/js/json2.js" %}"></script>
-    <script src="{% static "lib/js/waypoints.js" %}"></script>
-{% else %}
-    <script src="{% static "lib/js/assets.min.js" %}"></script>
-{% endif %}
-<script src="{% static "geonode/js/utils/utils.js" %}"></script>
-<script src="{% static "geonode/js/base/base.js" %}"></script>
-<script type="text/javascript" src="{% url "javascript-catalog" %}"></script>
-{% block extra_script %}{% endblock extra_script %}
-<script type="text/javascript">
-    function removeLocationHash(){
-        let noHashURL = window.location.href.replace(/#.*$/, '');
-        window.history.replaceState('', document.title, noHashURL)
-    }
-
-    function waitForElm(selector) {
-        return new Promise(resolve => {
-            if (document.querySelector(selector)) {
-                return resolve(document.querySelector(selector));
-            }
-
-            const observer = new MutationObserver(mutations => {
-                if (document.querySelector(selector)) {
-                    resolve(document.querySelector(selector));
-                    observer.disconnect();
-                }
-            });
-
-            observer.observe(document.body, {
-                childList: true,
-                subtree: true
-            });
-        });
-    }
-
-    window.addEventListener("load", function(){
-        removeLocationHash();
-        if (window.location.href.includes('/maps/')) {
-          waitForElm('.timeline-plugin-btn-group').then((elm) => {
-            document.querySelectorAll('.timeline-plugin-btn-group button')[1].click()
-          });
-        }
-    });
-
-    // Autocomplete instance for the search found in the header.
-    $(document).ready(function () {
-        window.autocomplete2 = new Autocomplete({
-            form_btn: null,
-            form_submit: '#search',
-            form_selector: '#search',
-            input_selector: '#search_input',
-            container_selector: '#search-container',
-            url: '{% url "autocomplete_base" %}'
-        })
-        window.autocomplete2.setup()
-
-        $('.dropdown-submenu a.btn-submenu').on("click", function (e) {
-            $(this).next('ul').toggle();
-            e.stopPropagation();
-            e.preventDefault();
-        });
-    })
-
-    $('#search').on('submit', (e) => {
-        $('#search_abstract_input')[0].value = $('#search_input')[0].value;
-        $('#search_purpose_input')[0].value = $('#search_input')[0].value;
-    });
-    $(".datepicker").datepicker({
-        format: "yyyy-mm-dd"
-    });
-
-    // Bootstrap tooltip
-    $(function () {
-        $('[data-toggle="tooltip"]').tooltip()
-    });
-
-    // Fix navbar for wagtailmenus
-    $('.dropdown').click(function () {
-        $(this).parentsUntil('.nav').addClass('dropdown-open');
-        let dropdownElement = $(this).closest('.dropdown-open');
-    });
-    $('.dropdown-toggle').click(function () {
-        $('li').removeClass('dropdown-open');
-        $('ul').removeClass('dropdown-open');
-    })
-
-    function changeLanguage(lang) {
-        setCookie('lang', lang)
-        $('#lang-select').val(lang)
-        $('#lang-form').submit()
-    }
-
-    {# listening for the mapstore result #}
-    {# just show the first result of well #}
-    $('body').on('DOMSubtreeModified', '.ms2-border-layout-content', function () {
-        let results = $('iframe').closest('.ms-template-viewer > div');
-        for (let i = 0; i < results.length; i++) {
-            if (i !== 0) {
-                $(results[i]).hide()
-            }
-        }
-    });
-
-</script>
-
-<div class="modal fade" style="width: 100%; height: 100%;" id="_resource_uploading" data-backdrop="static" data-keyboard="false" aria-hidden="true">
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h1>{% trans "Uploading..." %}</h1>
-            </div>
-            <div class="modal-body">
-                <div class="progress">
-                    <div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:100%">
-                        {% trans "Upload in progress..." %}
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<div class="modal fade" style="width: 100%; height: 100%;" id="_thumbnail_processing" data-backdrop="static" data-keyboard="false" aria-hidden="true">
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h1>{% trans "Processing..." %}</h1>
-            </div>
-            <div class="modal-body">
-                <div class="progress">
-                    <div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:100%">
-                        {% trans "Updating Thumbnail..." %}
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<div class="modal fade" id="_thumbnail_feedbacks" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-    <div class="modal-dialog" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-                <h4 class="modal-title" id="exampleModalLabel">{% trans "Message box" %}</h4>
-            </div>
-            <div class="modal-body">
-                ...
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-default" data-dismiss="modal">{% trans "OK" %}</button>
-            </div>
-        </div>
-    </div>
-</div>
-
-<div id="confirmMsgBoxModalOK" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-    <!-- How to use it:
-        $("#confirmMsgBoxModalOK").find('.modal-title').text('{% trans "Title" %}');
-        $("#confirmMsgBoxModalOK").find('.modal-body').text('{% trans "Message. Do you want to proceed?" %}');
-        $("#confirmMsgBoxModalOK_control_field").val('your_control_value');
-        $("#confirmMsgBoxModalOK").modal("show");
-
-        $('#confirmMsgBoxModalOK').find('.modal-footer #confirm').on('click', function() {
-          if ($("#control_field").val() == 'your_control_value') {
-            CONFIRMED
-          }
+{% block extra_script %}
+    <script type="text/javascript">
+        // enable dropdown functionalities
+        $('li.dropdown-submenu a[data-toggle="dropdown"]').on('click', function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+            $('li.dropdown-submenu').not($(this).parent()).removeClass('open');
+            $(this).parent().toggleClass('open');
         });
-      -->
-    <div class="modal-dialog">
-        <input type="hidden" class="form-control" id="confirmMsgBoxModalOK_control_field"/>
-        <div class="modal-content panel-success">
-            <div class="modal-header panel-heading">
-                <button type="button" class="close" data-dismiss="modal">&times;</button>
-                <h4 class="modal-title">{% trans "Confirm" %}</h4>
-            </div>
-            <div class="modal-body">
-                <p>{% trans "Some text in the modal" %}.</p>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Cancel" %}</button>
-                <button type="button" class="btn btn-danger confirm" id="confirm">{% trans "OK" %}</button>
-            </div>
-        </div>
-    </div>
-</div>
-</body>
-</html>
\ No newline at end of file
+    </script>
+{% endblock extra_script %}
diff --git a/django_project/igrac/templates/g3p_timeseries_chart.html b/django_project/igrac/templates/g3p_timeseries_chart.html
index 00ab1cd..c41e3eb 100644
--- a/django_project/igrac/templates/g3p_timeseries_chart.html
+++ b/django_project/igrac/templates/g3p_timeseries_chart.html
@@ -1,4 +1,4 @@
-{% load staticfiles %}
+{% load static %}
 <!DOCTYPE html>
 <html lang="en">
 <head>
diff --git a/django_project/igrac/templates/g3p_timeseries_chart_iframe.html b/django_project/igrac/templates/g3p_timeseries_chart_iframe.html
index 4c58ed3..a54722c 100644
--- a/django_project/igrac/templates/g3p_timeseries_chart_iframe.html
+++ b/django_project/igrac/templates/g3p_timeseries_chart_iframe.html
@@ -1,4 +1,4 @@
-{% load staticfiles %}
+{% load static %}
 <!DOCTYPE html>
 <html lang="en">
 <head>
diff --git a/django_project/igrac/templates/geonode-mapstore-client/catalogue.html b/django_project/igrac/templates/geonode-mapstore-client/catalogue.html
new file mode 100644
index 0000000..7b5c688
--- /dev/null
+++ b/django_project/igrac/templates/geonode-mapstore-client/catalogue.html
@@ -0,0 +1,125 @@
+{% load static %}
+{% load client_lib_tags %}
+{% load client_version %}
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="preconnect" href="https://fonts.gstatic.com">
+        <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
+        <link href="{% static 'mapstore/dist/themes/geonode.css' %}?{% client_version %}" rel="stylesheet" />
+        <link href="{% static 'css/default.css' %}?{% client_version %}" rel="stylesheet" />
+        <link href="{% static 'css/base-igrac.css' %}?{% client_version %}" rel="stylesheet" />
+        <title>{{ SITE_NAME }}</title>
+        <link rel="shortcut icon" href="{% static "/img/favicon.ico" %}"/>
+        {% include './snippets/loader_style.html' %}
+
+        {% block custom_theme %}
+            {% include './snippets/custom_theme.html' %}
+        {% endblock %}
+
+        {% block extra_style %}
+        {% endblock %}
+
+    </head>
+
+    <body class="msgapi ms2" data-ms2-container="ms2" >
+        <div class="gn-page-wrapper {% if request.user_agent.is_mobile %}gn-mobile{% else %}gn-desktop{% endif %}">
+            {% block gn_config %}
+                {% include './_geonode_config.html' %}
+            {% endblock %}
+            <div class="gn-catalogue gn-theme">
+                {% block header %}
+                    {% include './snippets/header.html' %}
+                {% endblock %}
+
+                {% block container %}
+                    <div id="ms-container">
+                        <div class="gn-main-event-container">
+                            <div class="gn-main-event-content">
+                                <div class="gn-main-loader"></div>
+                                <div class="gn-main-event-text"></div>
+                            </div>
+                        </div>
+                    </div>
+                {% endblock %}
+
+                {% block ms_scripts %}
+                    <script id="gn-script" src="{% static 'mapstore/dist/js/gn-catalogue.js' %}?{% client_version %}"></script>
+                {% endblock %}
+
+                {% block footer %}
+                    {% include './snippets/footer.html' %}
+                {% endblock %}
+
+                {% block scripts %}
+                    <script src="{% static "lib/js/jquery.min.js" %}"></script>
+                    <script src="{% static "lib/js/bootstrap.min.js" %}"></script>
+                    <script type="text/javascript">
+                        let isBeforeDetail = null
+                        // enable dropdown functionalities
+                        $('li.dropdown-submenu a[data-toggle="dropdown"]').on('click', function (event) {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            $('li.dropdown-submenu').not($(this).parent()).removeClass('open');
+                            $(this).parent().toggleClass('open');
+                        });
+
+                        function waitForElm(selector) {
+                            return new Promise(resolve => {
+                                if (document.querySelector(selector)) {
+                                    return resolve(document.querySelector(selector));
+                                }
+
+                                const observer = new MutationObserver(mutations => {
+                                    if (document.querySelector(selector)) {
+                                        resolve(document.querySelector(selector));
+                                        observer.disconnect();
+                                    }
+                                });
+
+                                observer.observe(document.body, {
+                                    childList: true,
+                                    subtree: true
+                                });
+                            });
+                        }
+
+                        function openMapViewDrawer() {
+                            if(window.location.href.includes('#/map/') || window.location.href.includes('/view/')) {
+                                console.log('openMapViewDrawer', window.location.href);
+                                waitForElm('#drawer-menu-button').then((elm) => {
+                                    document.getElementById('drawer-menu-button').click();
+                                });
+                            }
+                        }
+
+                        function openFilterMenu() {
+                            if(window.location.href.includes('/catalogue/')) {
+                                waitForElm('.gn-filters-menu button').then((elm) => {
+                                    console.log(isBeforeDetail)
+                                    if(!$('.gn-filter-form').length && !window.location.href.includes('detail') && !isBeforeDetail) {
+                                        $($('.gn-filters-menu button')[0]).click()
+                                        isBeforeDetail = false
+                                    }
+                                });
+                            }
+                        }
+
+                        window.onhashchange = function() {
+                            if(window.location.href.includes('detail')) {
+                              isBeforeDetail = true
+                            }
+                            openMapViewDrawer()
+                            openFilterMenu()
+                        }
+                        openMapViewDrawer()
+                        openFilterMenu()
+                    </script>
+                {% endblock %}
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/django_project/igrac/templates/geonode-mapstore-client/map_embed.html b/django_project/igrac/templates/geonode-mapstore-client/map_embed.html
new file mode 100644
index 0000000..3d78774
--- /dev/null
+++ b/django_project/igrac/templates/geonode-mapstore-client/map_embed.html
@@ -0,0 +1,130 @@
+{% load static %}
+{% load client_lib_tags %}
+{% load client_version %}
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="preconnect" href="https://fonts.gstatic.com">
+        <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
+        <link href="{% static 'mapstore/dist/themes/geonode.css' %}?{% client_version %}" rel="stylesheet" />
+        <link href="{% static 'css/default.css' %}?{% client_version %}" rel="stylesheet" />
+        <link href="{% static 'css/base-igrac.css' %}?{% client_version %}" rel="stylesheet" />
+        <title>{{ SITE_NAME }}</title>
+        <link rel="shortcut icon" href="{% static "/img/favicon.ico" %}"/>
+        {% include './snippets/loader_style.html' %}
+
+        {% block custom_theme %}
+            {% include './snippets/custom_theme.html' %}
+        {% endblock %}
+
+        {% block extra_style %}
+        {% endblock %}
+
+    </head>
+    <body class="msgapi ms2" data-ms2-container="ms2" >
+        <div class="gn-page-wrapper {% if request.user_agent.is_mobile %}gn-mobile{% else %}gn-desktop{% endif %}">
+            {% block gn_config %}
+                {% include './_geonode_config.html' with plugins_config_key='map_viewer' is_embed='false' %}
+            {% endblock %}
+            <div class="gn-embed gn-theme">
+                {% block header %}
+                    {% if '/view/' in  request.build_absolute_uri %}
+                        {% include './snippets/header.html' %}
+                    {% endif %}
+                {% endblock %}
+
+                {% block container %}
+                    <div id="ms-container">
+                        <div class="gn-main-event-container">
+                            <div class="gn-main-event-content">
+                                <div class="gn-main-loader"></div>
+                                <div class="gn-main-event-text"></div>
+                            </div>
+                        </div>
+                    </div>
+                {% endblock %}
+
+                {% block ms_scripts %}
+                    <script id="gn-script" src="{% static 'mapstore/dist/js/gn-map.js' %}?{% client_version %}"></script>
+                {% endblock %}
+            </div>
+        </div>
+    </body>
+    <style>
+        .gn-action-navbar-title {
+            margin-left: -10px;
+        }
+        .gn-action-navbar-title .nav-link, .gn-action-navbar-title .fa-angle-right {
+            display: none;
+        }
+    </style>
+    <script src="{% static "lib/js/jquery.min.js" %}"></script>
+    <script src="{% static "lib/js/bootstrap.min.js" %}"></script>
+    <script>
+        function removeLocationHash() {
+            let noHashURL = window.location.href.replace(/#.*$/, '');
+            window.history.replaceState('', document.title, noHashURL)
+        }
+
+        window.addEventListener("load", function () {
+            removeLocationHash();
+        });
+
+        function waitForElm(selector) {
+            return new Promise(resolve => {
+                if (document.querySelector(selector)) {
+                    return resolve(document.querySelector(selector));
+                }
+
+                const observer = new MutationObserver(mutations => {
+                    if (document.querySelector(selector)) {
+                        resolve(document.querySelector(selector));
+                        observer.disconnect();
+                    }
+                });
+
+                observer.observe(document.body, {
+                    childList: true,
+                    subtree: true
+                });
+            });
+        }
+
+        function waitForElm(selector) {
+            return new Promise(resolve => {
+                if (document.querySelector(selector)) {
+                    return resolve(document.querySelector(selector));
+                }
+
+                const observer = new MutationObserver(mutations => {
+                    if (document.querySelector(selector)) {
+                        resolve(document.querySelector(selector));
+                        observer.disconnect();
+                    }
+                });
+
+                observer.observe(document.body, {
+                    childList: true,
+                    subtree: true
+                });
+            });
+        }
+
+        function openMapViewDrawer() {
+            if(window.location.href.includes('/view/')) {
+                console.log('openMapViewDrawer', window.location.href);
+                waitForElm('#drawer-menu-button').then((elm) => {
+                    document.getElementById('drawer-menu-button').click();
+                });
+            }
+        }
+
+        window.onhashchange = function() {
+            openMapViewDrawer()
+        }
+        openMapViewDrawer()
+    </script>
+</html>
diff --git a/django_project/igrac/templates/geonode-mapstore-client/snippets/brand_navbar.html b/django_project/igrac/templates/geonode-mapstore-client/snippets/brand_navbar.html
new file mode 100644
index 0000000..db9b75e
--- /dev/null
+++ b/django_project/igrac/templates/geonode-mapstore-client/snippets/brand_navbar.html
@@ -0,0 +1,142 @@
+{% load static %}
+{% load get_menu_json %}
+{% load manual_menu %}
+{% load catalogue_urls %}
+{% get_igrac_user_menu as USER_MENU %}
+
+{% get_igrac_base_left_topbar_menu as BASE_TOPBAR_MENU_LEFT %}
+{% get_menu_json 'TOPBAR_MENU' as TOPBAR_MENU %}
+{% get_menu_json 'TOPBAR_MENU_LEFT' as TOPBAR_MENU_LEFT %}
+{% get_igrac_base_right_topbar_menu as BASE_TOPBAR_MENU_RIGHT %}
+{% get_menu_json 'TOPBAR_MENU_RIGHT' as TOPBAR_MENU_RIGHT %}
+
+{% block extra_style %}
+{% endblock %}
+
+<style>
+    #{{ id|default:'' }}-bottom {
+        display: none;
+        margin-bottom: 0;
+    }
+    @media (max-width: 748px) {
+        #{{ id|default:'' }} .gn-menu-content-center > * {
+            display: none;
+        }
+        #{{ id|default:'' }}-bottom {
+            display: flex;
+            width: calc(100% - 16px);
+            margin: 8px;
+        }
+    }
+</style>
+
+<nav id="{{ id|default:'' }}" class="gn-menu gn-menu-symmetric">
+    <div class="gn-menu-container">
+        <div class="gn-menu-content">
+            <div class="gn-menu-content-left">
+                {% block left_menu %}
+                    <ul class="gn-menu-list">
+                        <li class="home-menu">
+                            <a href="/" target="" class="nav-link btn btn-primary">
+                                <i class="fa fa-home" aria-hidden="true"></i>
+                            </a>
+                        </li>
+                         {% for menu_item in BASE_TOPBAR_MENU_LEFT %}
+                            {% include './menu_item.html' with menu_item=menu_item variant='primary' %}
+                        {% endfor %}
+                        {% for menu_item in TOPBAR_MENU %}
+                            {% include './menu_item.html' with menu_item=menu_item variant='primary' %}
+                        {% endfor %}
+                        {% for menu_item in TOPBAR_MENU_LEFT %}
+                            {% include './menu_item.html' with menu_item=menu_item variant='primary' %}
+                        {% endfor %}
+                    </ul>
+                {% endblock %}
+            </div>
+            <div class="gn-menu-content-right">
+                {% block right_menu %}
+                <ul class="gn-menu-list">
+                    <li>
+                        <div class="navbar-header branding">
+                            <a class="logo" href="https://www.un-igrac.org/" target="_blank"><img src="{% static "img/logo-small.svg" %}" width="50" alt="logo"></a>
+                        </div>
+                    </li>
+                    <li class="gn-search-bar-li">
+                        {% include './search_bar.html' with search_bar_id='gn-search-bar' %}
+                    </li>
+                    {% for menu_item in USER_MENU %}
+                        {% include './menu_item.html' with menu_item=menu_item align_right=True variant='primary' %}
+                    {% endfor %}
+                    {% block language_selector %}
+                        {% include './language_selector.html' with variant='primary' align_right=True %}
+                    {% endblock %}
+                </ul>
+                {% endblock %}
+            </div>
+        </div>
+    </div>
+</nav>
+{% include './topbar.html' with id='gn-topbar' %}
+<div id="{{ id|default:'' }}-bottom">
+    {% block bottom_menu %}
+        {% include './search_bar.html' with search_bar_id='gn-search-bar-bottom' %}
+    {% endblock %}
+</div>
+{% block extra_script %}
+    <script type="text/javascript">
+        (function() {
+            function manageUrlChange() {
+                var signInElement = document.getElementById("sign-in");
+                if (signInElement){
+                    if (window.location.pathname === '/account/login/'){
+                        signInElement.setAttribute("href", window.location.href)
+                    }
+                    else {
+                        var href = signInElement.getAttribute("href").split("next=")[0];
+                        var url_parts = window.location.href.split(window.location.pathname);
+                        var path_name = encodeURIComponent(window.location.pathname + url_parts[url_parts.length-1]);
+                        signInElement.setAttribute("href", href.concat("next=".concat(path_name)));
+                    }
+                }
+            }
+            window.addEventListener('DOMContentLoaded', manageUrlChange);
+            window.addEventListener('hashchange', manageUrlChange, false);
+        })();
+    </script>
+    <script>
+        (function () {
+            function onResizeMenu(menu) {
+                const menuContent = menu.querySelector('.gn-menu-content');
+                const leftSide = menu.querySelector('.gn-menu-content-left');
+                const leftSideMenuList = menu.querySelector('.gn-menu-content-left > .gn-menu-list');
+                leftSideMenuList.style.position = 'absolute';
+                leftSideMenuList.style.top = '50%';
+                leftSideMenuList.style.transform = 'translateY(-50%)';
+                const leftSideMenuDisplay = leftSideMenuList.style.display;
+                const leftSideDropdown = menu.querySelector('.gn-menu-content-left > .dropdown');
+                leftSideDropdown.style.position = 'absolute';
+                leftSideDropdown.style.top = '50%';
+                leftSideDropdown.style.transform = 'translateY(-50%)';
+                function resize() {
+                    if (leftSide.clientWidth < leftSideMenuList.clientWidth) {
+                        leftSideMenuList.style.visibility = 'hidden';
+                        leftSideDropdown.style.visibility = 'visible';
+                    } else {
+                        leftSideMenuList.style.visibility = 'visible';
+                        leftSideDropdown.style.visibility = 'hidden';
+                    }
+                }
+
+                window.addEventListener('resize', resize);
+                window.addEventListener('DOMContentLoaded', resize);
+
+                resize();
+            }
+            const menus = document.querySelectorAll('[data-gn-menu-resize="true"]');
+            for (var i = 0; i < menus.length; i++) {
+                const menu = menus[i];
+                onResizeMenu(menu);
+            }
+        })();
+    </script>
+{% endblock extra_script %}
\ No newline at end of file
diff --git a/django_project/igrac/templates/geonode-mapstore-client/snippets/footer.html b/django_project/igrac/templates/geonode-mapstore-client/snippets/footer.html
new file mode 100644
index 0000000..2247f27
--- /dev/null
+++ b/django_project/igrac/templates/geonode-mapstore-client/snippets/footer.html
@@ -0,0 +1,28 @@
+{% load i18n %}
+
+<footer class="gn-footer footer-wrapper">
+    {% if IGRAC_VERSION %}
+        <div class="footer-item" style="position: absolute; top: 8px; left: 7px;">{% trans "Version" %} <a href="{{ IGRAC_VERSION.url }}">{{ IGRAC_VERSION.name }}</a></div>
+    {% endif %}
+    <div style="margin-left: auto; margin-right: auto; display: flex">
+        <div class="footer-item">{% trans "Brought to you by" %}&nbsp;</div>
+        <a class="footer-item" href="https://www.un-igrac.org/" target="_blank"><img src="/static/img/logo-small.svg" width="50" alt="logo" style="vertical-align: bottom"/></a>
+        <div class="footer-item" style="padding-left: 15px">{% trans "Web site developed by" %}&nbsp;</div>
+        <a class="footer-item" href="https://kartoza.com/" target="_blank"><img src="/static/img/kartoza-icon.png" height="23" alt="kartoza_logo"/></a>
+    </div>
+    {#  form for change language #}
+{#    <form id="lang-form" class="form-inline" action="/i18n/setlang/" method="post"#}
+{#          style="width: 300px;#}
+{#            position: absolute;#}
+{#            top: 8px;#}
+{#            right: 7px;">#}
+{#        {% csrf_token %}#}
+{#        <select id="lang-select" class="col-md-6 pull-right" name="language" onchange="changeLanguage($(this).val())" style="font-size: 12px; height: 24px;">#}
+{#            {% for lang in LANGUAGES %}#}
+{#                <option value="{{ lang.0 }}" {% ifequal LANGUAGE_CODE lang.0 %} selected="selected"{% endifequal %}>#}
+{#                    {{ lang.1 }}#}
+{#                </option>#}
+{#            {% endfor %}#}
+{#        </select>#}
+{#    </form>#}
+</footer>
diff --git a/django_project/igrac/templates/geonode-mapstore-client/snippets/header.html b/django_project/igrac/templates/geonode-mapstore-client/snippets/header.html
new file mode 100644
index 0000000..012e256
--- /dev/null
+++ b/django_project/igrac/templates/geonode-mapstore-client/snippets/header.html
@@ -0,0 +1,28 @@
+{% load static %}
+<header class="gn-main-header">
+    {% include './brand_navbar.html'  with id='gn-brand-navbar' %}
+</header>
+<div class="gn-main-header-placeholder"></div>
+
+{% if show_hero %}
+    {% include './hero.html' %}
+{% endif %}
+
+<script>
+    (function () {
+        const mainHeader = document.querySelector('.gn-main-header');
+        const mainHeaderPlaceholder = document.querySelector('.gn-main-header-placeholder');
+        const topbar = document.querySelector('#gn-topbar');
+        function resize() {
+            if (mainHeaderPlaceholder && mainHeader) {
+                mainHeaderPlaceholder.style.height = mainHeader.clientHeight + 'px';
+            }
+            if (topbar && mainHeader) {
+                topbar.style.top = mainHeader.clientHeight + 'px';
+            }
+        }
+        window.addEventListener('resize', resize);
+        window.addEventListener('DOMContentLoaded', resize);
+        resize();
+    })();
+</script>
diff --git a/django_project/igrac/templates/geonode-mapstore-client/snippets/hero.html b/django_project/igrac/templates/geonode-mapstore-client/snippets/hero.html
new file mode 100644
index 0000000..7d22b4f
--- /dev/null
+++ b/django_project/igrac/templates/geonode-mapstore-client/snippets/hero.html
@@ -0,0 +1,21 @@
+{% load i18n %}
+<div class="banner">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-7">
+                    <div class="banner-text">
+                        <h2>{% trans "The Global Groundwater Information System (GGIS)" %}</h2>
+                        <p>{% trans "The GGIS is an interactive portal for sharing data and information on groundwater resources around the world. It gives access to map layers, documents, and well and monitoring data. It also contains several thematic map viewers." %}</p>
+                    </div>
+                </div>
+            </div>
+            <div class="cta">
+                <div class="justify">
+                    <a class="btn btn-orange" href="https://www.un-igrac.org/" target="_blank">{% trans "Visit IGRAC Website" %}</a>
+                    <a class="btn btn-blue ml-auto btn-hide">{% trans "Hide this banner" %} <i class="fa fa-times-circle-o" aria-hidden="true" style="margin-left: 7px"></i></a>
+                </div>
+            </div>
+        </div>
+
+        <div class="background"></div>
+</div>
\ No newline at end of file
diff --git a/django_project/igrac/templates/geonode-mapstore-client/snippets/menu_item.html b/django_project/igrac/templates/geonode-mapstore-client/snippets/menu_item.html
new file mode 100644
index 0000000..b378192
--- /dev/null
+++ b/django_project/igrac/templates/geonode-mapstore-client/snippets/menu_item.html
@@ -0,0 +1,76 @@
+{% load i18n %}
+{% if menu_item %}
+    {% if menu_item.type == 'link' %}
+        <li>
+            <a
+                id={{ menu_item.label | slugify }}
+                href="{{ menu_item.href }}"
+                target="{{ menu_item.target }}"
+                class="nav-link btn btn-{{variant|default:'default'}}"
+            >
+                {% trans menu_item.label %}
+            </a>
+        </li>
+    {% endif %}
+    {% if menu_item.type == 'divider' %}
+        <li role="separator" class="gn-menu-divider"></li>
+    {% endif %}
+    {% if menu_item.type == 'dropdown' %}
+        <li>
+            <div class="dropdown {{menu_item.className}}">
+                <button
+                    id="{{menu_item.id}}"
+                    role="button"
+                    aria-haspopup="true"
+                    aria-expanded="false"
+                    type="button"
+                    class="dropdown-toggle btn btn-{{variant|default:'default'}}"
+                    data-toggle="dropdown"
+                >
+                    {% if menu_item.image %}
+                        <img src="{{ menu_item.image }}">
+                        {% if menu_item.label %}
+                            &nbsp;&nbsp;
+                        {% endif %}
+                    {% endif %}
+                    {% if menu_item.label %}
+                        {% trans menu_item.label %} <i class="fa fa-angle-down fa-lg"></i>
+                    {% endif %}
+                </button>
+                <ul class="dropdown-menu{% if align_right %} dropdown-menu-right{% endif %}" aria-labelledby="{{menu_item.id}}">
+                    {% for child_item in menu_item.items %}
+                        {% if child_item.type == 'link' %}
+                            <li>
+                                <a
+                                    href="{{ child_item.href }}"
+                                    target="{{ child_item.target }}"
+                                >
+                                    {% trans child_item.label %}
+                                    {% if menu_item.badge %}
+                                        <span class="badge">{{ menu_item.badge }}</span>
+                                    {% endif %}
+                                </a>
+                            </li>
+                        {% endif %}
+                        {% if child_item.type == 'divider' %}
+                            <li role="separator" class="divider"></li>
+                        {% endif %}
+                        {% if child_item.type == 'dropdown' %}
+                            <li class="dropdown-submenu">
+                                <a class="btn-submenu dropdown-toggle" data-toggle="dropdown" role="button">
+                                    {{ child_item.label }}&nbsp;
+                                    <i class="fa fa-angle-right fa-lg pull-right" aria-hidden="true" style="position: absolute; top: 6px; right: 10px;"></i>
+                                </a>
+                                <ul class="dropdown-menu dropdown-sub-menu">
+                                    {% for child_sub_item in child_item.items %}
+                                        <li><a tabindex="-1" href="{{ child_sub_item.href }}">{{ child_sub_item.label }}</a></li>
+                                    {% endfor %}
+                                </ul>
+                            </li>
+                        {% endif %}
+                    {% endfor %}
+                </ul>
+            </div>
+        </li>
+    {% endif %}
+{% endif %}
diff --git a/django_project/igrac/templates/geonode-mapstore-client/snippets/topbar.html b/django_project/igrac/templates/geonode-mapstore-client/snippets/topbar.html
new file mode 100644
index 0000000..00e0068
--- /dev/null
+++ b/django_project/igrac/templates/geonode-mapstore-client/snippets/topbar.html
@@ -0,0 +1,112 @@
+{#{% load get_menu_json %}#}
+{#{% load manual_menu %}#}
+{#{% get_igrac_base_left_topbar_menu as BASE_TOPBAR_MENU_LEFT %}#}
+{#{% get_menu_json 'TOPBAR_MENU' as TOPBAR_MENU %}#}
+{#{% get_menu_json 'TOPBAR_MENU_LEFT' as TOPBAR_MENU_LEFT %}#}
+{#{% get_igrac_base_right_topbar_menu as BASE_TOPBAR_MENU_RIGHT %}#}
+{#{% get_menu_json 'TOPBAR_MENU_RIGHT' as TOPBAR_MENU_RIGHT %}#}
+{##}
+{#<nav id="{{ id|default:'' }}" class="gn-menu gn-primary" data-gn-menu-resize="true">#}
+{#    <div class="gn-menu-container">#}
+{#        <div class="gn-menu-content">#}
+{#            <div class="gn-menu-content-side gn-menu-content-left">#}
+{#                {% block left_menu %}#}
+{#                <div class="dropdown">#}
+{#                    <button#}
+{#                        class="btn btn-primary dropdown-toggle"#}
+{#                        type="button"#}
+{#                        id="gn-topbar-small-menu"#}
+{#                        data-toggle="dropdown"#}
+{#                        aria-haspopup="true"#}
+{#                        aria-expanded="true"#}
+{#                    >#}
+{#                        <i class="fa fa-bars"> </i>#}
+{#                    </button>#}
+{#                    <ul#}
+{#                        class="dropdown-menu"#}
+{#                        aria-labelledby="gn-topbar-small-menu"#}
+{#                    >#}
+{#                        {% for menu_item in BASE_TOPBAR_MENU_LEFT %}#}
+{#                            {% include './menu_item_compact.html' with menu_item=menu_item %}#}
+{#                        {% endfor %}#}
+{#                        {% for menu_item in TOPBAR_MENU %}#}
+{#                            {% include './menu_item_compact.html' with menu_item=menu_item variant='primary' %}#}
+{#                        {% endfor %}#}
+{#                        {% for menu_item in TOPBAR_MENU_LEFT %}#}
+{#                            {% include './menu_item_compact.html' with menu_item=menu_item %}#}
+{#                        {% endfor %}#}
+{##}
+{#                    </ul>#}
+{#                </div>#}
+{#                <ul class="gn-menu-list">#}
+{#                    {% for menu_item in BASE_TOPBAR_MENU_LEFT %}#}
+{#                        {% include './menu_item.html' with menu_item=menu_item variant='primary' %}#}
+{#                    {% endfor %}#}
+{#                    {% for menu_item in TOPBAR_MENU %}#}
+{#                        {% include './menu_item.html' with menu_item=menu_item variant='primary' %}#}
+{#                    {% endfor %}#}
+{#                    {% for menu_item in TOPBAR_MENU_LEFT %}#}
+{#                        {% include './menu_item.html' with menu_item=menu_item variant='primary' %}#}
+{#                    {% endfor %}#}
+{#                </ul>#}
+{#                {% endblock %}#}
+{#            </div>#}
+{#            <div class="gn-menu-content-center">#}
+{#                {% block center_menu %}#}
+{#                {% endblock %}#}
+{#            </div>#}
+{#            <div class="gn-menu-content-right">#}
+{#                {% block right_menu %}#}
+{#                <ul class="gn-menu-list">#}
+{#                    {% for menu_item in BASE_TOPBAR_MENU_RIGHT %}#}
+{#                        {% include './menu_item.html' with menu_item=menu_item variant='primary' align_right=True %}#}
+{#                    {% endfor %}#}
+{#                    {% for menu_item in TOPBAR_MENU_RIGHT %}#}
+{#                        {% include './menu_item.html' with menu_item=menu_item variant='primary' align_right=True %}#}
+{#                    {% endfor %}#}
+{##}
+{#                    {% block language_selector %}#}
+{#                        {% include './language_selector.html' with variant='primary' align_right=True %}#}
+{#                    {% endblock %}#}
+{#                </ul>#}
+{#                {% endblock %}#}
+{#            </div>#}
+{#        </div>#}
+{#    </div>#}
+{#</nav>#}
+{#<script>#}
+{#    (function () {#}
+{#        function onResizeMenu(menu) {#}
+{#            const menuContent = menu.querySelector('.gn-menu-content');#}
+{#            const leftSide = menu.querySelector('.gn-menu-content-left');#}
+{#            const leftSideMenuList = menu.querySelector('.gn-menu-content-left > .gn-menu-list');#}
+{#            leftSideMenuList.style.position = 'absolute';#}
+{#            leftSideMenuList.style.top = '50%';#}
+{#            leftSideMenuList.style.transform = 'translateY(-50%)';#}
+{#            const leftSideMenuDisplay = leftSideMenuList.style.display;#}
+{#            const leftSideDropdown = menu.querySelector('.gn-menu-content-left > .dropdown');#}
+{#            leftSideDropdown.style.position = 'absolute';#}
+{#            leftSideDropdown.style.top = '50%';#}
+{#            leftSideDropdown.style.transform = 'translateY(-50%)';#}
+{#            function resize() {#}
+{#                if (leftSide.clientWidth < leftSideMenuList.clientWidth) {#}
+{#                    leftSideMenuList.style.visibility = 'hidden';#}
+{#                    leftSideDropdown.style.visibility = 'visible';#}
+{#                } else {#}
+{#                    leftSideMenuList.style.visibility = 'visible';#}
+{#                    leftSideDropdown.style.visibility = 'hidden';#}
+{#                }#}
+{#            }#}
+{##}
+{#            window.addEventListener('resize', resize);#}
+{#            window.addEventListener('DOMContentLoaded', resize);#}
+{##}
+{#            resize();#}
+{#        }#}
+{#        const menus = document.querySelectorAll('[data-gn-menu-resize="true"]');#}
+{#        for (var i = 0; i < menus.length; i++) {#}
+{#            const menu = menus[i];#}
+{#            onResizeMenu(menu);#}
+{#        }#}
+{#    })();#}
+{#</script>#}
diff --git a/django_project/igrac/templates/igrac/blog_index_page.html b/django_project/igrac/templates/igrac/blog_index_page.html
index 2ffdcd5..c1a4579 100644
--- a/django_project/igrac/templates/igrac/blog_index_page.html
+++ b/django_project/igrac/templates/igrac/blog_index_page.html
@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 {% load i18n %}
-{% load staticfiles %}
+{% load static %}
 
 {% load wagtailcore_tags %}
 
diff --git a/django_project/igrac/templates/igrac/blog_page.html b/django_project/igrac/templates/igrac/blog_page.html
index 35e62f3..ec4b8e4 100644
--- a/django_project/igrac/templates/igrac/blog_page.html
+++ b/django_project/igrac/templates/igrac/blog_page.html
@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 {% load i18n %}
-{% load staticfiles %}
+{% load static %}
 
 {% load wagtailcore_tags %}
 
diff --git a/django_project/igrac/templates/igrac/disclaimer_license_page.html b/django_project/igrac/templates/igrac/disclaimer_license_page.html
index 874edf1..d9688ff 100644
--- a/django_project/igrac/templates/igrac/disclaimer_license_page.html
+++ b/django_project/igrac/templates/igrac/disclaimer_license_page.html
@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 {% load i18n %}
-{% load staticfiles %}
+{% load static %}
 
 {#{% block body_class %}{% trans "igrac-home" %}{% endblock %}#}
 
diff --git a/django_project/igrac/templates/igrac/manual_page.html b/django_project/igrac/templates/igrac/manual_page.html
index 05ad52f..2a63285 100644
--- a/django_project/igrac/templates/igrac/manual_page.html
+++ b/django_project/igrac/templates/igrac/manual_page.html
@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% load static from staticfiles %}
+{% load static %}
 {% load manual_menu %}
 {% load wagtailcore_tags %}
 
@@ -11,7 +11,7 @@
     {% endif %}
 {% endblock %}
 
-{% block additional_head %}
+{% block extra_head %}
     <link rel="stylesheet"
           href="{% static "css/jstree-3.2.1/style.min.css" %}"/>
     <link rel="stylesheet"
@@ -38,7 +38,7 @@
 {% endblock %}
 
 {% block middle %}
-    <div class="container-fluid">
+    <div class="container-fluid igrac-wagtail">
         <div class="row manual-row">
             <div class="col-md-10 col-md-push-2 col-xs-12 manual-content">
                 <!-- Breadcrumb -->
@@ -68,7 +68,7 @@ <h3 class="manual-title">{{ page.title }}</h3>
             </div>
 
             <div class="col-md-2 col-md-pull-10 col-xs-12 menu-sidebar">
-                <h5>{{ request.site.root_page.title }}</h5>
+                <h5>GGIS Documentation</h5>
                 <div id="jstree1" class="demo">
                     {% manual_menu menu page.slug %}
                 </div>
diff --git a/django_project/igrac/templates/index.html b/django_project/igrac/templates/index.html
new file mode 100644
index 0000000..7ed526c
--- /dev/null
+++ b/django_project/igrac/templates/index.html
@@ -0,0 +1,151 @@
+{% load static %}
+{% load client_version %}
+{% load i18n %}
+<!DOCTYPE html>
+<html class="msgapi">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
+        <link href="{% static 'mapstore/dist/themes/geonode.css' %}?{% client_version %}" rel="stylesheet" />
+        <link href="{% static 'css/default.css' %}?{% client_version %}" rel="stylesheet" />
+        <link href="{% static 'css/base-igrac.css' %}?{% client_version %}" rel="stylesheet" />
+
+        <title>{{ SITE_NAME }}</title>
+        <link rel="shortcut icon" href="{% static "/img/favicon.ico" %}"/>
+        {% include './geonode-mapstore-client/snippets/loader_style.html' %}
+
+        {% block custom_theme %}
+            {% include './geonode-mapstore-client/snippets/custom_theme.html' %}
+        {% endblock %}
+
+        <script>
+            function setCookie(cname, cvalue, exdays) {
+                var d = new Date();
+                d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
+                var expires = "expires=" + d.toGMTString();
+                document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
+            }
+
+            function getCookie(cname) {
+                var name = cname + "=";
+                var decodedCookie = decodeURIComponent(document.cookie);
+                var ca = decodedCookie.split(';');
+                for (var i = 0; i < ca.length; i++) {
+                    var c = ca[i];
+                    while (c.charAt(0) == ' ') {
+                        c = c.substring(1);
+                    }
+                    if (c.indexOf(name) == 0) {
+                        return c.substring(name.length, c.length);
+                    }
+                }
+                return "";
+            }
+
+            function delete_cookie(name) {
+                document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
+            }
+            function checkCookieBanner() {
+                var hide_banner = getCookie("hideBanner");
+                if (hide_banner) {
+                    var css = '.banner {display: none;} .open-banner {display: block;}',
+                        head = document.head || document.getElementsByTagName('head')[0],
+                        style = document.createElement('style');
+
+                    head.appendChild(style);
+
+                    console.log('hide_Banner', head)
+                    style.type = 'text/css';
+                    if (style.styleSheet) {
+                        // This is required for IE8 and below.
+                        style.styleSheet.cssText = css;
+                    } else {
+                        style.appendChild(document.createTextNode(css));
+                    }
+                }
+            }
+
+            checkCookieBanner();
+        </script>
+
+        {% block extra_style %}
+        {% endblock %}
+    </head>
+    <body class="msgapi ms2" data-ms2-container="ms2">
+
+        <div class="gn-page-wrapper {% if request.user_agent.is_mobile %}gn-mobile{% else %}gn-desktop{% endif %}">
+            <div class="gn-theme gn-homepage">
+
+                {% include './geonode-mapstore-client/_geonode_config.html' %}
+                {% block header %}
+                    {% include './geonode-mapstore-client/snippets/header.html' with show_hero=True %}
+                {% endblock %}
+
+                <div class="open-banner">
+                    <button onclick="openBanner()" class="btn btn-grey ml-auto">{% trans "Show banner" %} <i class="fa fa-eye" aria-hidden="true" style="margin-left: 7px"></i></button>
+                </div>
+
+                {% block content %}
+                    {% comment %}
+                    <!-- example of content extension -->
+                    <div class="gn-container">
+                        <div class="gn-content">
+                            <!-- My custom content -->
+                        </div>
+                    </div>
+                    {% endcomment %}
+                {% endblock %}
+
+                {% block container %}
+                    <div id="container">
+                        <div class="gn-main-event-container">
+                            <div class="gn-main-event-content">
+                                <div class="gn-main-loader"></div>
+                                <div class="gn-main-event-text"></div>
+                            </div>
+                        </div>
+                    </div>
+                {% endblock %}
+    
+                {% block ms_scripts %}
+                    <script id="gn-script" src="{% static 'mapstore/dist/js/gn-home.js' %}?{% client_version %}"></script>
+                {% endblock %}
+    
+                {% block footer %}
+                    {% include './geonode-mapstore-client/snippets/footer.html' %}
+                {% endblock %}
+    
+                {% block scripts %}
+                    <script src="{% static "lib/js/jquery.min.js" %}"></script>
+                    <script src="{% static "lib/js/bootstrap.min.js" %}"></script>
+                    <script type="text/javascript">
+                        // enable dropdown functionalities
+                        $('li.dropdown-submenu a[data-toggle="dropdown"]').on('click', function (event) {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            $('li.dropdown-submenu').not($(this).parent()).removeClass('open');
+                            $(this).parent().toggleClass('open');
+                        });
+                    </script>
+                {% endblock %}
+
+                <script>
+                    $('.btn-hide').click(function () {
+                        $('.banner').slideUp();
+                        setCookie('hideBanner', true, 7);
+                        $('.open-banner').show();
+                    });
+
+                    function openBanner() {
+                        delete_cookie('hideBanner');
+                        console.log('banner')
+                        $('.banner').slideDown();
+                        $('.open-banner').hide();
+                    }
+                </script>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/django_project/igrac/templates/landing_page.html b/django_project/igrac/templates/landing_page.html
index 5bd7405..62aceb3 100644
--- a/django_project/igrac/templates/landing_page.html
+++ b/django_project/igrac/templates/landing_page.html
@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 {% load i18n %}
-{% load staticfiles %}
+{% load static %}
 {% load manual_menu %}
 
 {% block body_class %}{% trans "igrac-home" %}{% endblock %}
@@ -72,7 +72,9 @@ <h1>{% trans "Explore the viewers" %}</h1>
             <div class="row">
                 {% for map in ordered_maps %}
                     <div class="col-lg-4 map-item">
-                        <div class="map-item-wrappper" onclick="window.location='{% url 'map_view_slug' slug=map.slug %}'" data-toggle="tooltip" data-placement="top" title="{{ map.map.title }}">
+                        <div class="map-item-wrappper"
+                             onclick="window.location='{% url 'map_view_slug' slug=map.slug %}'"
+                             data-toggle="tooltip" data-placement="top" title="{{ map.map.title }}">
                             <div class="viewer-thumb">
                                 <img src="{{ map.map.thumbnail_url }}"/>
                             </div>
diff --git a/django_project/igrac/templates/layers/layer_detail.html b/django_project/igrac/templates/layers/layer_detail.html
index 0097552..1a726ec 100644
--- a/django_project/igrac/templates/layers/layer_detail.html
+++ b/django_project/igrac/templates/layers/layer_detail.html
@@ -1,6 +1,6 @@
 {% extends "layers/layer_base.html" %}
 {% load i18n %}
-{% load staticfiles %}
+{% load static %}
 {% load dialogos_tags %}
 {% load pinax_ratings_tags %}
 {% load bootstrap_tags %}
diff --git a/django_project/igrac/templates/maps/map_embed.html b/django_project/igrac/templates/maps/map_embed.html
new file mode 100644
index 0000000..e2399c3
--- /dev/null
+++ b/django_project/igrac/templates/maps/map_embed.html
@@ -0,0 +1,16 @@
+{% load i18n %}
+{% load client_lib_tags %}
+
+{% block head %}
+
+    <style>
+        #paneltbar {
+            margin-top: 0px !important;
+        }
+    </style>
+
+    {% get_map_embed %}
+{% endblock head %}
+
+{% block body %}
+{% endblock %}
diff --git a/django_project/igrac/templates/maps/metadata_detail_article.html b/django_project/igrac/templates/maps/metadata_detail_article.html
index 187f397..de9f0d0 100644
--- a/django_project/igrac/templates/maps/metadata_detail_article.html
+++ b/django_project/igrac/templates/maps/metadata_detail_article.html
@@ -6,7 +6,6 @@
     {% elif resource.class_name == "Layer" %}
         <a href="{% url 'layer_detail' layername=resource.alternate %}" class="btn btn-primary pull-right">{% trans "Return to Layer" %}</a>
     {% else %}
-        <a href="{% url 'map_detail' mapid=resource.id %}" class="btn btn-primary pull-right">{% trans "Return to Map" %}</a>
     {% endif %}
     <h2 class="page-title">{{ resource.title }}</h2>
 </div>
diff --git a/django_project/igrac/templates/metadata_detail.html b/django_project/igrac/templates/metadata_detail.html
index 368e5bb..481f25a 100644
--- a/django_project/igrac/templates/metadata_detail.html
+++ b/django_project/igrac/templates/metadata_detail.html
@@ -28,7 +28,6 @@
     {% elif resource.class_name == "Layer" %}
     <a href="{% url 'layer_detail' layername=resource.alternate %}" class="btn btn-primary pull-right">{% trans "Return to Layer" %}</a>
     {% elif resource.class_name == "Map" %}
-    <a href="{% url 'map_detail' mapid=resource.id %}" class="btn btn-primary pull-right">{% trans "Return to Map" %}</a>
     {% elif resource.class_name == "GeoApp" %}
     <a href="{% url 'geoapp_detail' geoappid=resource.id %}" class="btn btn-primary pull-right">{% trans "Return to" %} {{ resource.type }}</a>
     {% endif %}
diff --git a/django_project/igrac/templatetags/manual_menu.py b/django_project/igrac/templatetags/manual_menu.py
index 09a3eb5..68d55b5 100644
--- a/django_project/igrac/templatetags/manual_menu.py
+++ b/django_project/igrac/templatetags/manual_menu.py
@@ -1,6 +1,7 @@
 from django import template
 from django.utils.safestring import mark_safe
-
+from geonode.base.models import Configuration
+from geonode_mapstore_client.templatetags.get_menu_json import get_user_menu
 register = template.Library()
 
 
@@ -43,3 +44,181 @@ def explore_map(maps):
                 _map.map.thumbnail_url = _map.map.curatedthumbnail.thumbnail_url
         output.append(_map)
     return output
+
+
+def _is_mobile_device(context):
+    if context and 'request' in context:
+        req = context['request']
+        return req.user_agent.is_mobile
+    return False
+
+def _is_logged_in(context):
+    if context and 'request' in context:
+        req = context['request']
+        return req.user.is_authenticated
+    return False
+
+@register.simple_tag(
+    takes_context=True, name='get_igrac_base_left_topbar_menu')
+def get_igrac_base_left_topbar_menu(context):
+
+    is_mobile = _is_mobile_device(context)
+    is_logged_in = _is_logged_in(context)
+
+    user = context.get('request').user
+    users = {
+        "label": "Users",
+        "type": "dropdown",
+        "items": [
+            {
+                "type": "link",
+                "href": "/people/",
+                "label": "People"
+            },
+            {
+                "type": "link",
+                "href": "/groups/",
+                "label": "Groups"
+            },
+            {
+                "type": "link",
+                "href": "/groundwater/organisation/",
+                "label": "Organisations"
+            } if user.is_superuser else None,
+        ]
+    }
+    if user.is_authenticated and not Configuration.load().read_only:
+        users['items'].extend([
+            {
+                "type": "divider"
+            },
+            {
+                "type": "link",
+                "href": "/invitations/geonode-send-invite/",
+                "label": "Invite users"
+            },
+            {
+                "type": "link",
+                "href": "/admin/people/profile/add/",
+                "label": "Add user"
+            } if user.is_superuser else None,
+            {
+                "type": "link",
+                "href": "/groups/create/",
+                "label": "Create group"
+            } if user.is_superuser else None,
+        ])
+
+    return [
+        {
+            "label": 'Data',
+            "type": "dropdown",
+            "items": [
+                {
+                    "type": "link",
+                    "href": "/catalogue/#/search/?f=dataset",
+                    "label": "Map Layers"
+                },
+                {
+                    "type": "link",
+                    "href": "/catalogue/#/search/?f=document",
+                    "label": "Documents"
+                } if not is_mobile else None,
+                {
+                    "type": "link",
+                    "href": "/services/",
+                    "label": "Remote Services"
+                } if is_logged_in else None,
+                {
+                    "type": "divider"
+                } if is_logged_in else None,
+                {
+                    "type": "link",
+                    "href": "/catalogue/#/upload/dataset",
+                    "label": "Upload Map Layers"
+                } if is_logged_in else None,
+                {
+                    "type": "link",
+                    "href": "/catalogue/#/upload/document",
+                    "label": "Upload Document"
+                } if is_logged_in else None,
+                {
+                    "type": "link",
+                    "href": "/services/register/",
+                    "label": "Add Remote Services"
+                } if is_logged_in else None,
+                {
+                    "type": "divider"
+                },
+                {
+                    "type": "link",
+                    "href": "/view/well-and-monitoring-data/",
+                    "label": "Well and Monitoring Data"
+                },
+                {
+                    "type": "dropdown",
+                    "label": "Upload Well and Monitoring Data",
+                    "items": [{
+                        "type": "link",
+                        "href": "/groundwater/record/create/",
+                        "label": "Add Record"
+                    }, {
+                        "type": "link",
+                        "href": "/groundwater/batch-upload",
+                        "label": "Batch Upload"
+                    }]
+                } if is_logged_in else None,
+                {
+                    "type": "link",
+                    "href": "/groundwater/record/download-request",
+                    "label": "Download Well and Monitoring Data",
+                },
+            ]
+        },
+        {
+            "type": "link",
+            "href": "/catalogue/#/search/?f=map",
+            "label": "Maps"
+        },
+        {
+            "type": "link",
+            "href": "/catalogue/#/search/?f=dashboard",
+            "label": "Dashboards"
+        },
+        {
+            "type": "link",
+            "href": "/catalogue/#/search/?f=geostory",
+            "label": "GeoStories"
+        },
+        users,
+        {
+            "type": "link",
+            "href": "/about",
+            "label": "About"
+        }
+    ]
+
+
+@register.simple_tag(
+    takes_context=True, name='get_igrac_base_right_topbar_menu')
+def get_igrac_base_right_topbar_menu(context):
+    return []
+
+
+@register.simple_tag(takes_context=True)
+def get_igrac_user_menu(context):
+    profile = get_user_menu(context)
+    user = context.get('request').user
+    if user.is_authenticated:
+        profile[0]['label'] = user.full_name_or_nick
+        profile[0]['variant'] = 'primary'
+        for idx, item in enumerate(profile[0]['items']):
+            try:
+                if item['label'] == 'GeoServer':
+                    profile[0]['items'].insert(
+                        idx + 1,
+                        {'type': 'link', 'href': '/cms/', 'label': 'Wagtail Admin'}
+                    )
+            except KeyError:
+                pass
+    return profile
\ No newline at end of file
diff --git a/django_project/igrac/urls.py b/django_project/igrac/urls.py
index d5d5c80..a38560c 100644
--- a/django_project/igrac/urls.py
+++ b/django_project/igrac/urls.py
@@ -16,20 +16,26 @@
     G3PTimeseriesChart,
     G3PTimeseriesChartIframe
 )
+from igrac.api_views.featured import (
+    FeaturedMaps
+)
 
 urlpatterns = [
-    url(r'^$',
-        view=HomeView.as_view(),
-        name='home_igrac'),
     url(r'^view/(?P<id>[^/]+)/metadata_detail/article$',
         MapSlugMetadataDetail.as_view(),
         name='map_view_slug_metadata_detail'),
     url(r'^maps/(?P<id>[^/]+)/metadata_detail/article$',
         MapMetadataDetail.as_view(),
         name='map_view_metadata_detail'),
-    url(r'^view/(?P<slug>[^/]+)$',
+    url(r'^view/(?P<slug>[^/]+)/$',
         view=map_view_with_slug,
         name='map_view_slug'),
+    url(r'^igrac_api/featured/$',
+        view=FeaturedMaps.as_view(),
+        name='featured_maps'),
+    url(r'^/api/v2/maps/$',
+        view=FeaturedMaps.as_view(),
+        name='featured_maps'),
     url(r'^groundwater/', include('gwml2.urls')),
     url(r'^cms/', include(wagtailadmin_urls)),
     url(r'^wagtail/documents/', include(wagtaildocs_urls)),
diff --git a/django_project/igrac/views.py b/django_project/igrac/views.py
index d63670b..530dc78 100644
--- a/django_project/igrac/views.py
+++ b/django_project/igrac/views.py
@@ -5,7 +5,7 @@
 from allauth.account.views import SignupView
 
 from geonode.maps.models import Map
-from geonode.maps.views import map_view
+from geonode.maps.views import map_embed
 from geonode.groups.models import GroupProfile
 from geonode.base import register_event
 from geonode.monitoring.models import EventType
@@ -37,7 +37,7 @@ def map_view_with_slug(request, slug):
     except MapSlugMapping.DoesNotExist:
         raise Http404("Map does not exist")
 
-    return map_view(request, mapid=map.map.id)
+    return map_embed(request, mapid=map.map.id)
 
 
 class MetadataDetail(TemplateView):
diff --git a/django_project/version/version.txt b/django_project/version/version.txt
index 50aea0e..0c89fc9 100644
--- a/django_project/version/version.txt
+++ b/django_project/version/version.txt
@@ -1 +1 @@
-2.1.0
\ No newline at end of file
+4.0.0
\ No newline at end of file